@material/mwc-list - npm Package Compare versions

Comparing version 0.14.0-canary.0b5c7f23.0 to 0.14.0-canary.134cf877.0

mwc-check-list-item-base.d.ts

@@ -26,4 +26,3 @@ /**
     render(): import("lit-element").TemplateResult;
-    protected onClick(): void;
-    connectedCallback(): void;
+    protected onChange(evt: Event): Promise<void>;
 }

mwc-check-list-item-base.js

@@ -45,3 +45,4 @@ /**
             .checked=${this.selected}
-            ?disabled=${this.disabled}>
+            ?disabled=${this.disabled}
+            @change=${this.onChange}>
         </mwc-checkbox>
@@ -52,10 +53,12 @@ </span>
     }
-    onClick() {
-        this.fireRequestDetail(!this.selected, 'interaction');
+    async onChange(evt) {
+        const checkbox = evt.target;
+        const changeFromProp = this.selected === checkbox.checked;
+        if (!changeFromProp) {
+            this._skipPropRequest = true;
+            this.selected = checkbox.checked;
+            await this.updateComplete;
+            this._skipPropRequest = false;
+        }
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.boundOnClick);
-        this.setAttribute('mwc-list-item', '');
-    }
 }
@@ -62,0 +65,0 @@ __decorate([

mwc-list-base.js

@@ -18,4 +18,5 @@ /**
 import { __decorate } from "tslib";
-import { BaseElement, observer } from '@material/mwc-base/base-element.js';
-import { deepActiveElementPath, doesElementContainFocus, findAssignedElement, isNodeElement } from '@material/mwc-base/utils';
+import { BaseElement } from '@material/mwc-base/base-element.js';
+import { observer } from '@material/mwc-base/observer.js';
+import { deepActiveElementPath, doesElementContainFocus, findAssignedElement, isNodeElement } from '@material/mwc-base/utils.js';
 import { html, property, query } from 'lit-element';
@@ -333,11 +334,13 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
         }
-        if (!this.noninteractive) {
-            let first = null;
-            for (const item of this.items) {
-                if (!first && !item.noninteractive) {
-                    first = item;
+        const first = this.items[0];
+        for (const item of this.items) {
+            item.tabindex = -1;
+        }
+        if (first) {
+            if (this.noninteractive) {
+                if (!this.previousTabindex) {
+                    this.previousTabindex = first;
                 }
-                item.tabindex = -1;
             }
-            if (first) {
+            else {
                 first.tabindex = 0;
@@ -344,0 +347,0 @@ }

mwc-list-foundation.js

@@ -106,2 +106,22 @@ /**
         this.isMulti_ = value;
+        const currentIndex = this.selectedIndex_;
+        if (value) {
+            // number to set
+            if (!isIndexSet(currentIndex)) {
+                const isUnset = currentIndex === numbers.UNSET_INDEX;
+                this.selectedIndex_ = isUnset ? new Set() : new Set([currentIndex]);
+            }
+        }
+        else {
+            // set to first sorted number in set
+            if (isIndexSet(currentIndex)) {
+                if (currentIndex.size) {
+                    const vals = Array.from(currentIndex).sort();
+                    this.selectedIndex_ = vals[0];
+                }
+                else {
+                    this.selectedIndex_ = numbers.UNSET_INDEX;
+                }
+            }
+        }
     }
@@ -108,0 +128,0 @@ /**

mwc-list-item-base.d.ts

@@ -26,2 +26,3 @@ /**
  * @fires request-selected {RequestSelectedDetail}
+ * @fires list-item-rendered
  */
@@ -42,2 +43,3 @@ export declare class ListItemBase extends LitElement {
     protected _firstChanged: boolean;
+    protected _skipPropRequest: boolean;
     get text(): string;
@@ -51,3 +53,3 @@ render(): import("lit-element").TemplateResult;
     protected onClick(): void;
-    protected fireRequestDetail(selected: boolean, source: SelectionSource): void;
+    protected fireRequestSelected(selected: boolean, source: SelectionSource): void;
     connectedCallback(): void;
@@ -54,0 +56,0 @@ disconnectedCallback(): void;

mwc-list-item-base.js

@@ -23,2 +23,3 @@ /**
  * @fires request-selected {RequestSelectedDetail}
+ * @fires list-item-rendered
  */
@@ -40,2 +41,3 @@ export class ListItemBase extends LitElement {
         this._firstChanged = true;
+        this._skipPropRequest = false;
     }
@@ -88,5 +90,8 @@ get text() {
     onClick() {
-        this.fireRequestDetail(!this.selected, 'interaction');
+        this.fireRequestSelected(!this.selected, 'interaction');
     }
-    fireRequestDetail(selected, source) {
+    fireRequestSelected(selected, source) {
+        if (this.noninteractive) {
+            return;
+        }
         const customEv = new CustomEvent('request-selected', { bubbles: true, composed: true, detail: { source, selected } });
@@ -172,8 +177,10 @@ this.dispatchEvent(customEv);
             this._firstChanged = false;
+            return;
         }
-        else {
-            this.fireRequestDetail(value, 'property');
+        if (this._skipPropRequest) {
+            return;
         }
+        this.fireRequestSelected(value, 'property');
     })
 ], ListItemBase.prototype, "selected", void 0);
 //# sourceMappingURL=mwc-list-item-base.js.map

mwc-list-item-css.js

@@ -18,3 +18,3 @@ /**
 import { css } from 'lit-element';
-export const style = css `:host{cursor:pointer;user-select:none;height:48px;display:flex;position:relative;align-items:center;justify-content:flex-start;padding:0 16px;overflow:hidden;padding-left:var(--mdc-list-side-padding, 16px);padding-right:var(--mdc-list-side-padding, 16px);outline:none;height:48px;color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87))}:host:focus{outline:none}:host([activated]){color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}:host([activated]) .mdc-list-item__graphic{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-list-item__graphic{flex-shrink:0;align-items:center;justify-content:center;fill:currentColor;display:inline-flex}.mdc-list-item__graphic ::slotted(*){flex-shrink:0;align-items:center;justify-content:center;fill:currentColor;width:100%;height:100%;text-align:center}.mdc-list-item__meta{width:var(--mdc-list-item-meta-size, 24px);height:var(--mdc-list-item-meta-size, 24px);margin-left:auto;margin-right:0;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.38))}.mdc-list-item__meta ::slotted(*){line-height:var(--mdc-list-item-meta-size, 24px)}.mdc-list-item__meta ::slotted(.material-icons),.mdc-list-item__meta ::slotted(mwc-icon){line-height:var(--mdc-list-item-meta-size, 24px) !important}.mdc-list-item__meta ::slotted(:not(.material-icons):not(mwc-icon)){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, 0.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit)}:host[dir=rtl] .mdc-list-item__meta,[dir=rtl] :host .mdc-list-item__meta{margin-left:0;margin-right:auto}.mdc-list-item__meta ::slotted(*){width:100%;height:100%}.mdc-list-item__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-list-item__text ::slotted([for]),.mdc-list-item__text[for]{pointer-events:none}.mdc-list-item__primary-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal;margin-bottom:-20px;display:block}.mdc-list-item__primary-text::before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item__primary-text::after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item__secondary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal;display:block}.mdc-list-item__secondary-text::before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-list--dense .mdc-list-item__secondary-text{font-size:inherit}* ::slotted(a),a{color:inherit;text-decoration:none}:host([twoline]){height:72px}:host([twoline]) .mdc-list-item__text{align-self:flex-start}:host(:not([disabled])){--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host(:not([disabled]))::before,:host(:not([disabled]))::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:"";top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}:host(:not([disabled]))::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1}:host(:not([disabled]))::before,:host(:not([disabled]))::after{background-color:#000}:host(.mdc-ripple-upgraded:not([disabled]))::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}:host(.mdc-ripple-upgraded:not([disabled]))::after{top:0;left:0;transform:scale(0);transform-origin:center center;width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}:host(.mdc-ripple-upgraded--unbounded:not([disabled]))::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}:host(.mdc-ripple-upgraded--foreground-activation:not([disabled]))::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}:host(.mdc-ripple-upgraded--foreground-deactivation:not([disabled]))::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}:host([disabled],[noninteractive]){cursor:default;pointer-events:none}:host([disabled]) .mdc-list-item__text ::slotted(*){opacity:.38}:host([disabled]) .mdc-list-item__text ::slotted(*),:host([disabled]) .mdc-list-item__primary-text ::slotted(*),:host([disabled]) .mdc-list-item__secondary-text ::slotted(*){color:#000;color:var(--mdc-theme-on-surface, #000)}:host(:not([disabled]):hover)::before{opacity:.04}:host(:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host(:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.12}:host(:not([disabled]):not(.mdc-ripple-upgraded))::after{transition:opacity 150ms linear}:host(:not([disabled]):not(.mdc-ripple-upgraded):active)::after{transition-duration:75ms;opacity:.12}:host(:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.12}:host([activated]:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.2}:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):active)::after{opacity:.2}:host([activated]:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.2}:host([activated]:not([disabled]))::before{opacity:.12}:host([activated]:not([disabled]))::before,:host([activated]:not([disabled]))::after{background-color:#6200ee;background-color:var(--mdc-theme-primary, #6200ee)}:host([activated]:not([disabled]):hover)::before{opacity:.16}:host([activated]:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.24}:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):active)::after{opacity:.24}:host([activated]:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.24}.mdc-list-item__secondary-text ::slotted(*){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54))}.mdc-list-item__graphic ::slotted(*){background-color:transparent;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38))}.mdc-list-group__subheader ::slotted(*){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87))}:host([graphic=avatar]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 40px);height:var(--mdc-list-item-graphic-size, 40px)}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 40px)}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 40px) !important}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(*){border-radius:50%}:host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic{margin-left:0;margin-right:var(--mdc-list-item-graphic-margin, 16px)}:host[dir=rtl] :host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic,[dir=rtl] :host :host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic{margin-left:var(--mdc-list-item-graphic-margin, 16px);margin-right:0}:host([graphic=icon]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 24px);height:var(--mdc-list-item-graphic-size, 24px);margin-left:0;margin-right:var(--mdc-list-item-graphic-margin, 32px)}:host([graphic=icon]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 24px)}:host([graphic=icon]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=icon]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 24px) !important}:host[dir=rtl] :host([graphic=icon]) .mdc-list-item__graphic,[dir=rtl] :host :host([graphic=icon]) .mdc-list-item__graphic{margin-left:var(--mdc-list-item-graphic-margin, 32px);margin-right:0}:host([graphic=avatar]:not([twoLine])),:host([graphic=icon]:not([twoLine])){height:56px}:host([graphic=medium]:not([twoLine])),:host([graphic=large]:not([twoLine])){height:72px}:host([graphic=medium]) .mdc-list-item__graphic,:host([graphic=large]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 56px);height:var(--mdc-list-item-graphic-size, 56px)}:host([graphic=medium]) .mdc-list-item__graphic ::slotted(*),:host([graphic=large]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 56px)}:host([graphic=medium]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=medium]) .mdc-list-item__graphic ::slotted(mwc-icon),:host([graphic=large]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=large]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 56px) !important}:host([graphic=large]){padding-left:0px}`;
+export const style = css `:host{cursor:pointer;user-select:none;height:48px;display:flex;position:relative;align-items:center;justify-content:flex-start;padding:0 16px;overflow:hidden;padding-left:var(--mdc-list-side-padding, 16px);padding-right:var(--mdc-list-side-padding, 16px);outline:none;height:48px;color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87))}:host:focus{outline:none}:host([activated]){color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}:host([activated]) .mdc-list-item__graphic{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-list-item__graphic{flex-shrink:0;align-items:center;justify-content:center;fill:currentColor;display:inline-flex}.mdc-list-item__graphic ::slotted(*){flex-shrink:0;align-items:center;justify-content:center;fill:currentColor;width:100%;height:100%;text-align:center}.mdc-list-item__meta{width:var(--mdc-list-item-meta-size, 24px);height:var(--mdc-list-item-meta-size, 24px);margin-left:auto;margin-right:0;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.38))}.mdc-list-item__meta ::slotted(*){line-height:var(--mdc-list-item-meta-size, 24px)}.mdc-list-item__meta ::slotted(.material-icons),.mdc-list-item__meta ::slotted(mwc-icon){line-height:var(--mdc-list-item-meta-size, 24px) !important}.mdc-list-item__meta ::slotted(:not(.material-icons):not(mwc-icon)){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, 0.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit)}:host[dir=rtl] .mdc-list-item__meta,[dir=rtl] :host .mdc-list-item__meta{margin-left:0;margin-right:auto}.mdc-list-item__meta ::slotted(*){width:100%;height:100%}.mdc-list-item__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-list-item__text ::slotted([for]),.mdc-list-item__text[for]{pointer-events:none}.mdc-list-item__primary-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal;margin-bottom:-20px;display:block}.mdc-list-item__primary-text::before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item__primary-text::after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item__secondary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal;display:block}.mdc-list-item__secondary-text::before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-list--dense .mdc-list-item__secondary-text{font-size:inherit}* ::slotted(a),a{color:inherit;text-decoration:none}:host([twoline]){height:72px}:host([twoline]) .mdc-list-item__text{align-self:flex-start}:host(:not([disabled])){--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host(:not([disabled]))::before,:host(:not([disabled]))::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:"";top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}:host(:not([disabled]))::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1}:host(:not([disabled]))::before,:host(:not([disabled]))::after{background-color:#000}:host(.mdc-ripple-upgraded:not([disabled]))::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}:host(.mdc-ripple-upgraded:not([disabled]))::after{top:0;left:0;transform:scale(0);transform-origin:center center;width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}:host(.mdc-ripple-upgraded--unbounded:not([disabled]))::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}:host(.mdc-ripple-upgraded--foreground-activation:not([disabled]))::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}:host(.mdc-ripple-upgraded--foreground-deactivation:not([disabled]))::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}:host([disabled]),:host([noninteractive]){cursor:default;pointer-events:none}:host([disabled]) .mdc-list-item__text ::slotted(*){opacity:.38}:host([disabled]) .mdc-list-item__text ::slotted(*),:host([disabled]) .mdc-list-item__primary-text ::slotted(*),:host([disabled]) .mdc-list-item__secondary-text ::slotted(*){color:#000;color:var(--mdc-theme-on-surface, #000)}:host(:not([disabled]):hover)::before{opacity:.04}:host(:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host(:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.12}:host(:not([disabled]):not(.mdc-ripple-upgraded))::after{transition:opacity 150ms linear}:host(:not([disabled]):not(.mdc-ripple-upgraded):active)::after{transition-duration:75ms;opacity:.12}:host(:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.12}:host([activated]:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.2}:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):active)::after{opacity:.2}:host([activated]:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.2}:host([activated]:not([disabled]))::before{opacity:.12}:host([activated]:not([disabled]))::before,:host([activated]:not([disabled]))::after{background-color:#6200ee;background-color:var(--mdc-theme-primary, #6200ee)}:host([activated]:not([disabled]):hover)::before{opacity:.16}:host([activated]:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.24}:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):active)::after{opacity:.24}:host([activated]:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.24}.mdc-list-item__secondary-text ::slotted(*){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54))}.mdc-list-item__graphic ::slotted(*){background-color:transparent;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38))}.mdc-list-group__subheader ::slotted(*){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87))}:host([graphic=avatar]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 40px);height:var(--mdc-list-item-graphic-size, 40px)}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 40px)}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 40px) !important}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(*){border-radius:50%}:host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic{margin-left:0;margin-right:var(--mdc-list-item-graphic-margin, 16px)}:host[dir=rtl] :host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic,[dir=rtl] :host :host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic{margin-left:var(--mdc-list-item-graphic-margin, 16px);margin-right:0}:host([graphic=icon]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 24px);height:var(--mdc-list-item-graphic-size, 24px);margin-left:0;margin-right:var(--mdc-list-item-graphic-margin, 32px)}:host([graphic=icon]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 24px)}:host([graphic=icon]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=icon]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 24px) !important}:host[dir=rtl] :host([graphic=icon]) .mdc-list-item__graphic,[dir=rtl] :host :host([graphic=icon]) .mdc-list-item__graphic{margin-left:var(--mdc-list-item-graphic-margin, 32px);margin-right:0}:host([graphic=avatar]:not([twoLine])),:host([graphic=icon]:not([twoLine])){height:56px}:host([graphic=medium]:not([twoLine])),:host([graphic=large]:not([twoLine])){height:72px}:host([graphic=medium]) .mdc-list-item__graphic,:host([graphic=large]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 56px);height:var(--mdc-list-item-graphic-size, 56px)}:host([graphic=medium]) .mdc-list-item__graphic ::slotted(*),:host([graphic=large]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 56px)}:host([graphic=medium]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=medium]) .mdc-list-item__graphic ::slotted(mwc-icon),:host([graphic=large]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=large]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 56px) !important}:host([graphic=large]){padding-left:0px}`;
 //# sourceMappingURL=mwc-list-item-css.js.map

mwc-list-item.d.ts

@@ -18,2 +18,3 @@ /**
 import { ListItemBase } from './mwc-list-item-base.js';
+export { GraphicType, RequestSelectedDetail } from './mwc-list-item-base.js';
 declare global {
@@ -20,0 +21,0 @@ interface HTMLElementTagNameMap {

mwc-radio-list-item-base.d.ts

@@ -25,6 +25,6 @@ /**
     graphic: GraphicType;
+    protected _changeFromClick: boolean;
     render(): import("lit-element").TemplateResult;
     protected onClick(): void;
-    protected onChecked(evt: Event): void;
-    connectedCallback(): void;
+    protected onChange(evt: Event): Promise<void>;
 }

mwc-radio-list-item-base.js

@@ -28,2 +28,3 @@ /**
         this.graphic = 'control';
+        this._changeFromClick = false;
     }
@@ -50,3 +51,3 @@ render() {
           ?disabled=${this.disabled}
-          @checked=${this.onChecked}>
+          @checked=${this.onChange}>
       </mwc-radio>
@@ -57,17 +58,19 @@ ${this.left ? text : ''}
     onClick() {
-        this.fireRequestDetail(!this.selected, 'interaction');
+        this._changeFromClick = true;
+        super.onClick();
     }
-    onChecked(evt) {
-        const radio = evt.target;
-        if (this.selected !== radio.checked) {
-            // needed to reconcile radio unchecking itself. List doesn't seem to care
-            this.selected = radio.checked;
-            this.fireRequestDetail(this.selected, 'interaction');
+    async onChange(evt) {
+        const checkbox = evt.target;
+        const changeFromProp = this.selected === checkbox.checked;
+        if (!changeFromProp) {
+            this._skipPropRequest = true;
+            this.selected = checkbox.checked;
+            await this.updateComplete;
+            this._skipPropRequest = false;
+            if (!this._changeFromClick) {
+                this.fireRequestSelected(this.selected, 'interaction');
+            }
         }
+        this._changeFromClick = false;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.boundOnClick);
-        this.setAttribute('mwc-list-item', '');
-    }
 }
@@ -74,0 +77,0 @@ __decorate([

package.json

 {
   "name": "@material/mwc-list",
-  "version": "0.14.0-canary.0b5c7f23.0",
+  "version": "0.14.0-canary.134cf877.0",
   "description": "",
@@ -13,7 +13,7 @@ "main": "mwc-list.js",
   "dependencies": {
-    "@material/base": "=6.0.0-canary.d5808057f.0",
-    "@material/list": "=6.0.0-canary.d5808057f.0",
-    "@material/mwc-base": "0.14.0-canary.0b5c7f23.0",
-    "@material/mwc-checkbox": "0.14.0-canary.0b5c7f23.0",
-    "@material/mwc-radio": "0.14.0-canary.0b5c7f23.0",
+    "@material/base": "=6.0.0-canary.a88c8e4dc.0",
+    "@material/list": "=6.0.0-canary.a88c8e4dc.0",
+    "@material/mwc-base": "0.14.0-canary.134cf877.0",
+    "@material/mwc-checkbox": "0.14.0-canary.134cf877.0",
+    "@material/mwc-radio": "0.14.0-canary.134cf877.0",
     "lit-element": "^2.2.1",
@@ -26,3 +26,3 @@ "lit-html": "^1.1.2",
   },
-  "gitHead": "c142ca8fe1db14da6fd164a99ca71277489f9b16"
+  "gitHead": "c237581285beb5a84c39a5ea15dc95e9a865e057"
 }

README.md

@@ -8,3 +8,3 @@ # `<mwc-list>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-list.svg)](https://www.npmjs.com/package/@material/mwc-list)
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/header.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/header.png" width="402px">
 
@@ -31,3 +31,3 @@ [Material Design Guidelines: lists](https://material.io/design/components/lists.html)
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/basic.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/basic.png" width="402px">
 
@@ -50,3 +50,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/activatable.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/activatable.png" width="402px">
 
@@ -64,3 +64,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/multi.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/multi.png" width="402px">
 
@@ -80,3 +80,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/leading_graphic.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/leading_graphic.png" width="402px">
 
@@ -120,3 +120,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/meta_icon.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/meta_icon.png" width="402px">
 
@@ -146,3 +146,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/two_line.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/two_line.png" width="402px">
 
@@ -177,3 +177,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/dividers.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/dividers.png" width="402px">
 
@@ -207,3 +207,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/check_list.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/check_list.png" width="402px">
 
@@ -233,3 +233,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/radio_list.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/radio_list.png" width="402px">
 
@@ -250,3 +250,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/multi_radio_list.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/multi_radio_list.png" width="402px">
 
@@ -272,3 +272,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/noninteractive.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/noninteractive.png" width="402px">
 
@@ -302,3 +302,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/styled.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/styled.png" width="402px">
 
@@ -328,3 +328,3 @@ ```html
 
-<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/styled_no_ripple.png" width="402px">
+<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/styled_no_ripple.png" width="402px">
 
@@ -569,3 +569,3 @@ ```html
 | ----------------------------------- | --------------------- |------------
-| `--mdc-theme-text-primary-on-background` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the primary text.
+| `--mdc-theme-text-primary-on-background` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/color_0,0,0,87.png) `rgba(0, 0, 0, 0.87)` | Color of the primary text.
 | `--mdc-list-vertical-padding` | `8px`    | Padding before and after the first and last list items.
@@ -579,8 +579,8 @@ | `--mdc-list-side-padding`     | `16px`   | Adjusts the padding of the `[padded]` list dividers (also propagates to `mwc-list-item`).
 | ------------------------------------------ | -------------------- |------------
-| `--mdc-theme-primary`                      | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/color_6200ee.png) `#6200ee` | Color of the activated ripple and primary text color when activated.
-| `--mdc-theme-on-surface`                   | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/color_000.png) `#000`       | Disabled text color
-| `--mdc-theme-text-icon-on-background`      | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/color_0,0,0,38.png) `rgba(0, 0, 0, .38)` | Color of the graphic icon (if graphic is text icon).
-| `--mdc-theme-text-primary-on-background`   | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/color_0,0,0,87.png) `rgba(0, 0, 0, .87)` | Color of the primary text if not activated.
-| `--mdc-theme-text-secondary-on-background` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/color_0,0,0,54.png) `rgba(0, 0, 0, .54)` | Color of the secondary text if not activated.
-| `--mdc-theme-hint-on-background`           | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/list/images/color_0,0,0,38.png) `rgba(0, 0, 0, .38)` | Color of the meta (if is text or text icon).
+| `--mdc-theme-primary`                      | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/color_6200ee.png) `#6200ee` | Color of the activated ripple and primary text color when activated.
+| `--mdc-theme-on-surface`                   | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/color_000.png) `#000`       | Disabled text color
+| `--mdc-theme-text-icon-on-background`      | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/color_0,0,0,38.png) `rgba(0, 0, 0, .38)` | Color of the graphic icon (if graphic is text icon).
+| `--mdc-theme-text-primary-on-background`   | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/color_0,0,0,87.png) `rgba(0, 0, 0, .87)` | Color of the primary text if not activated.
+| `--mdc-theme-text-secondary-on-background` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/color_0,0,0,54.png) `rgba(0, 0, 0, .54)` | Color of the secondary text if not activated.
+| `--mdc-theme-hint-on-background`           | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/list/images/color_0,0,0,38.png) `rgba(0, 0, 0, .38)` | Color of the meta (if is text or text icon).
 | `--mdc-list-side-padding`                  | `16px`               | Side padding of the list item.
@@ -587,0 +587,0 @@ | `--mdc-list-item-meta-size`                | `24px`               | Line height of the meta icon or text and width & height of the slotted parent wrapper.

src/mwc-check-list-item-base.ts

@@ -52,3 +52,4 @@ /**
             .checked=${this.selected}
-            ?disabled=${this.disabled}>
+            ?disabled=${this.disabled}
+            @change=${this.onChange}>
         </mwc-checkbox>
@@ -60,12 +61,13 @@ </span>
 
-  protected onClick() {
-    this.fireRequestDetail(!this.selected, 'interaction');
-  }
+  protected async onChange(evt: Event) {
+    const checkbox = evt.target as Checkbox;
+    const changeFromProp = this.selected === checkbox.checked;
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.boundOnClick);
-
-    this.setAttribute('mwc-list-item', '');
+    if (!changeFromProp) {
+      this._skipPropRequest = true;
+      this.selected = checkbox.checked;
+      await this.updateComplete;
+      this._skipPropRequest = false;
+    }
   }
 }

src/mwc-list-base.ts

@@ -18,4 +18,5 @@ /**
 
-import {BaseElement, observer} from '@material/mwc-base/base-element.js';
-import {deepActiveElementPath, doesElementContainFocus, findAssignedElement, isNodeElement} from '@material/mwc-base/utils';
+import {BaseElement} from '@material/mwc-base/base-element.js';
+import {observer} from '@material/mwc-base/observer.js';
+import {deepActiveElementPath, doesElementContainFocus, findAssignedElement, isNodeElement} from '@material/mwc-base/utils.js';
 import {html, property, query} from 'lit-element';
@@ -466,14 +467,14 @@ import {ifDefined} from 'lit-html/directives/if-defined.js';
 
-    if (!this.noninteractive) {
-      let first: ListItemBase|null = null;
+    const first: ListItemBase|undefined = this.items[0];
 
-      for (const item of this.items) {
-        if (!first && !item.noninteractive) {
-          first = item;
+    for (const item of this.items) {
+      item.tabindex = -1;
+    }
+
+    if (first) {
+      if (this.noninteractive) {
+        if (!this.previousTabindex) {
+          this.previousTabindex = first;
         }
-
-        item.tabindex = -1;
-      }
-
-      if (first) {
+      } else {
         first.tabindex = 0;
@@ -480,0 +481,0 @@ }

src/mwc-list-foundation.ts

@@ -148,2 +148,22 @@ /**
     this.isMulti_ = value;
+
+    const currentIndex = this.selectedIndex_;
+
+    if (value) {
+      // number to set
+      if (!isIndexSet(currentIndex)) {
+        const isUnset = currentIndex === numbers.UNSET_INDEX;
+        this.selectedIndex_ = isUnset ? new Set() : new Set([currentIndex]);
+      }
+    } else {
+      // set to first sorted number in set
+      if (isIndexSet(currentIndex)) {
+        if (currentIndex.size) {
+          const vals = Array.from(currentIndex).sort();
+          this.selectedIndex_ = vals[0];
+        } else {
+          this.selectedIndex_ = numbers.UNSET_INDEX;
+        }
+      }
+    }
   }
@@ -150,0 +170,0 @@

src/mwc-list-item-base.ts

@@ -32,2 +32,3 @@ /**
  * @fires request-selected {RequestSelectedDetail}
+ * @fires list-item-rendered
  */
@@ -76,5 +77,10 @@ export class ListItemBase extends LitElement {
       this._firstChanged = false;
-    } else {
-      this.fireRequestDetail(value, 'property');
+      return;
     }
+
+    if (this._skipPropRequest) {
+      return;
+    }
+
+    this.fireRequestSelected(value, 'property');
   })
@@ -85,2 +91,3 @@ selected = false;
   protected _firstChanged = true;
+  protected _skipPropRequest = false;
 
@@ -142,6 +149,10 @@ get text() {
   protected onClick() {
-    this.fireRequestDetail(!this.selected, 'interaction');
+    this.fireRequestSelected(!this.selected, 'interaction');
   }
 
-  protected fireRequestDetail(selected: boolean, source: SelectionSource) {
+  protected fireRequestSelected(selected: boolean, source: SelectionSource) {
+    if (this.noninteractive) {
+      return;
+    }
+
     const customEv = new CustomEvent<RequestSelectedDetail>(
@@ -148,0 +159,0 @@ 'request-selected',

src/mwc-list-item-css.ts

@@ -19,2 +19,2 @@ /**
 
-export const style = css`:host{cursor:pointer;user-select:none;height:48px;display:flex;position:relative;align-items:center;justify-content:flex-start;padding:0 16px;overflow:hidden;padding-left:var(--mdc-list-side-padding, 16px);padding-right:var(--mdc-list-side-padding, 16px);outline:none;height:48px;color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87))}:host:focus{outline:none}:host([activated]){color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}:host([activated]) .mdc-list-item__graphic{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-list-item__graphic{flex-shrink:0;align-items:center;justify-content:center;fill:currentColor;display:inline-flex}.mdc-list-item__graphic ::slotted(*){flex-shrink:0;align-items:center;justify-content:center;fill:currentColor;width:100%;height:100%;text-align:center}.mdc-list-item__meta{width:var(--mdc-list-item-meta-size, 24px);height:var(--mdc-list-item-meta-size, 24px);margin-left:auto;margin-right:0;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.38))}.mdc-list-item__meta ::slotted(*){line-height:var(--mdc-list-item-meta-size, 24px)}.mdc-list-item__meta ::slotted(.material-icons),.mdc-list-item__meta ::slotted(mwc-icon){line-height:var(--mdc-list-item-meta-size, 24px) !important}.mdc-list-item__meta ::slotted(:not(.material-icons):not(mwc-icon)){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, 0.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit)}:host[dir=rtl] .mdc-list-item__meta,[dir=rtl] :host .mdc-list-item__meta{margin-left:0;margin-right:auto}.mdc-list-item__meta ::slotted(*){width:100%;height:100%}.mdc-list-item__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-list-item__text ::slotted([for]),.mdc-list-item__text[for]{pointer-events:none}.mdc-list-item__primary-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal;margin-bottom:-20px;display:block}.mdc-list-item__primary-text::before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item__primary-text::after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item__secondary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal;display:block}.mdc-list-item__secondary-text::before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-list--dense .mdc-list-item__secondary-text{font-size:inherit}* ::slotted(a),a{color:inherit;text-decoration:none}:host([twoline]){height:72px}:host([twoline]) .mdc-list-item__text{align-self:flex-start}:host(:not([disabled])){--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host(:not([disabled]))::before,:host(:not([disabled]))::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:"";top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}:host(:not([disabled]))::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1}:host(:not([disabled]))::before,:host(:not([disabled]))::after{background-color:#000}:host(.mdc-ripple-upgraded:not([disabled]))::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}:host(.mdc-ripple-upgraded:not([disabled]))::after{top:0;left:0;transform:scale(0);transform-origin:center center;width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}:host(.mdc-ripple-upgraded--unbounded:not([disabled]))::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}:host(.mdc-ripple-upgraded--foreground-activation:not([disabled]))::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}:host(.mdc-ripple-upgraded--foreground-deactivation:not([disabled]))::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}:host([disabled],[noninteractive]){cursor:default;pointer-events:none}:host([disabled]) .mdc-list-item__text ::slotted(*){opacity:.38}:host([disabled]) .mdc-list-item__text ::slotted(*),:host([disabled]) .mdc-list-item__primary-text ::slotted(*),:host([disabled]) .mdc-list-item__secondary-text ::slotted(*){color:#000;color:var(--mdc-theme-on-surface, #000)}:host(:not([disabled]):hover)::before{opacity:.04}:host(:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host(:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.12}:host(:not([disabled]):not(.mdc-ripple-upgraded))::after{transition:opacity 150ms linear}:host(:not([disabled]):not(.mdc-ripple-upgraded):active)::after{transition-duration:75ms;opacity:.12}:host(:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.12}:host([activated]:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.2}:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):active)::after{opacity:.2}:host([activated]:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.2}:host([activated]:not([disabled]))::before{opacity:.12}:host([activated]:not([disabled]))::before,:host([activated]:not([disabled]))::after{background-color:#6200ee;background-color:var(--mdc-theme-primary, #6200ee)}:host([activated]:not([disabled]):hover)::before{opacity:.16}:host([activated]:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.24}:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):active)::after{opacity:.24}:host([activated]:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.24}.mdc-list-item__secondary-text ::slotted(*){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54))}.mdc-list-item__graphic ::slotted(*){background-color:transparent;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38))}.mdc-list-group__subheader ::slotted(*){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87))}:host([graphic=avatar]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 40px);height:var(--mdc-list-item-graphic-size, 40px)}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 40px)}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 40px) !important}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(*){border-radius:50%}:host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic{margin-left:0;margin-right:var(--mdc-list-item-graphic-margin, 16px)}:host[dir=rtl] :host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic,[dir=rtl] :host :host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic{margin-left:var(--mdc-list-item-graphic-margin, 16px);margin-right:0}:host([graphic=icon]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 24px);height:var(--mdc-list-item-graphic-size, 24px);margin-left:0;margin-right:var(--mdc-list-item-graphic-margin, 32px)}:host([graphic=icon]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 24px)}:host([graphic=icon]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=icon]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 24px) !important}:host[dir=rtl] :host([graphic=icon]) .mdc-list-item__graphic,[dir=rtl] :host :host([graphic=icon]) .mdc-list-item__graphic{margin-left:var(--mdc-list-item-graphic-margin, 32px);margin-right:0}:host([graphic=avatar]:not([twoLine])),:host([graphic=icon]:not([twoLine])){height:56px}:host([graphic=medium]:not([twoLine])),:host([graphic=large]:not([twoLine])){height:72px}:host([graphic=medium]) .mdc-list-item__graphic,:host([graphic=large]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 56px);height:var(--mdc-list-item-graphic-size, 56px)}:host([graphic=medium]) .mdc-list-item__graphic ::slotted(*),:host([graphic=large]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 56px)}:host([graphic=medium]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=medium]) .mdc-list-item__graphic ::slotted(mwc-icon),:host([graphic=large]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=large]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 56px) !important}:host([graphic=large]){padding-left:0px}`;
+export const style = css`:host{cursor:pointer;user-select:none;height:48px;display:flex;position:relative;align-items:center;justify-content:flex-start;padding:0 16px;overflow:hidden;padding-left:var(--mdc-list-side-padding, 16px);padding-right:var(--mdc-list-side-padding, 16px);outline:none;height:48px;color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87))}:host:focus{outline:none}:host([activated]){color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}:host([activated]) .mdc-list-item__graphic{color:#6200ee;color:var(--mdc-theme-primary, #6200ee)}.mdc-list-item__graphic{flex-shrink:0;align-items:center;justify-content:center;fill:currentColor;display:inline-flex}.mdc-list-item__graphic ::slotted(*){flex-shrink:0;align-items:center;justify-content:center;fill:currentColor;width:100%;height:100%;text-align:center}.mdc-list-item__meta{width:var(--mdc-list-item-meta-size, 24px);height:var(--mdc-list-item-meta-size, 24px);margin-left:auto;margin-right:0;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.38))}.mdc-list-item__meta ::slotted(*){line-height:var(--mdc-list-item-meta-size, 24px)}.mdc-list-item__meta ::slotted(.material-icons),.mdc-list-item__meta ::slotted(mwc-icon){line-height:var(--mdc-list-item-meta-size, 24px) !important}.mdc-list-item__meta ::slotted(:not(.material-icons):not(mwc-icon)){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, 0.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight, 400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, 0.0333333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-caption-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform, inherit)}:host[dir=rtl] .mdc-list-item__meta,[dir=rtl] :host .mdc-list-item__meta{margin-left:0;margin-right:auto}.mdc-list-item__meta ::slotted(*){width:100%;height:100%}.mdc-list-item__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-list-item__text ::slotted([for]),.mdc-list-item__text[for]{pointer-events:none}.mdc-list-item__primary-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal;margin-bottom:-20px;display:block}.mdc-list-item__primary-text::before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item__primary-text::after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item__secondary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size, 0.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight, 400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing, 0.0178571429em);text-decoration:inherit;text-decoration:var(--mdc-typography-body2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform, inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal;display:block}.mdc-list-item__secondary-text::before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-list--dense .mdc-list-item__secondary-text{font-size:inherit}* ::slotted(a),a{color:inherit;text-decoration:none}:host([twoline]){height:72px}:host([twoline]) .mdc-list-item__text{align-self:flex-start}:host(:not([disabled])){--mdc-ripple-fg-size: 0;--mdc-ripple-left: 0;--mdc-ripple-top: 0;--mdc-ripple-fg-scale: 1;--mdc-ripple-fg-translate-end: 0;--mdc-ripple-fg-translate-start: 0;-webkit-tap-highlight-color:rgba(0,0,0,0)}:host(:not([disabled]))::before,:host(:not([disabled]))::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:"";top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}:host(:not([disabled]))::before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1}:host(:not([disabled]))::before,:host(:not([disabled]))::after{background-color:#000}:host(.mdc-ripple-upgraded:not([disabled]))::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}:host(.mdc-ripple-upgraded:not([disabled]))::after{top:0;left:0;transform:scale(0);transform-origin:center center;width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}:host(.mdc-ripple-upgraded--unbounded:not([disabled]))::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}:host(.mdc-ripple-upgraded--foreground-activation:not([disabled]))::after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}:host(.mdc-ripple-upgraded--foreground-deactivation:not([disabled]))::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}:host([disabled]),:host([noninteractive]){cursor:default;pointer-events:none}:host([disabled]) .mdc-list-item__text ::slotted(*){opacity:.38}:host([disabled]) .mdc-list-item__text ::slotted(*),:host([disabled]) .mdc-list-item__primary-text ::slotted(*),:host([disabled]) .mdc-list-item__secondary-text ::slotted(*){color:#000;color:var(--mdc-theme-on-surface, #000)}:host(:not([disabled]):hover)::before{opacity:.04}:host(:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host(:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.12}:host(:not([disabled]):not(.mdc-ripple-upgraded))::after{transition:opacity 150ms linear}:host(:not([disabled]):not(.mdc-ripple-upgraded):active)::after{transition-duration:75ms;opacity:.12}:host(:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.12}:host([activated]:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.2}:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):active)::after{opacity:.2}:host([activated]:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.2}:host([activated]:not([disabled]))::before{opacity:.12}:host([activated]:not([disabled]))::before,:host([activated]:not([disabled]))::after{background-color:#6200ee;background-color:var(--mdc-theme-primary, #6200ee)}:host([activated]:not([disabled]):hover)::before{opacity:.16}:host([activated]:not([disabled]).mdc-ripple-upgraded--background-focused)::before,:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):focus)::before{transition-duration:75ms;opacity:.24}:host([activated]:not([disabled]):not(.mdc-ripple-upgraded):active)::after{opacity:.24}:host([activated]:not([disabled]).mdc-ripple-upgraded){--mdc-ripple-fg-opacity: 0.24}.mdc-list-item__secondary-text ::slotted(*){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54))}.mdc-list-item__graphic ::slotted(*){background-color:transparent;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38))}.mdc-list-group__subheader ::slotted(*){color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87))}:host([graphic=avatar]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 40px);height:var(--mdc-list-item-graphic-size, 40px)}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 40px)}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 40px) !important}:host([graphic=avatar]) .mdc-list-item__graphic ::slotted(*){border-radius:50%}:host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic{margin-left:0;margin-right:var(--mdc-list-item-graphic-margin, 16px)}:host[dir=rtl] :host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic,[dir=rtl] :host :host([graphic=avatar],[graphic=medium],[graphic=large],[graphic=control]) .mdc-list-item__graphic{margin-left:var(--mdc-list-item-graphic-margin, 16px);margin-right:0}:host([graphic=icon]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 24px);height:var(--mdc-list-item-graphic-size, 24px);margin-left:0;margin-right:var(--mdc-list-item-graphic-margin, 32px)}:host([graphic=icon]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 24px)}:host([graphic=icon]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=icon]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 24px) !important}:host[dir=rtl] :host([graphic=icon]) .mdc-list-item__graphic,[dir=rtl] :host :host([graphic=icon]) .mdc-list-item__graphic{margin-left:var(--mdc-list-item-graphic-margin, 32px);margin-right:0}:host([graphic=avatar]:not([twoLine])),:host([graphic=icon]:not([twoLine])){height:56px}:host([graphic=medium]:not([twoLine])),:host([graphic=large]:not([twoLine])){height:72px}:host([graphic=medium]) .mdc-list-item__graphic,:host([graphic=large]) .mdc-list-item__graphic{width:var(--mdc-list-item-graphic-size, 56px);height:var(--mdc-list-item-graphic-size, 56px)}:host([graphic=medium]) .mdc-list-item__graphic ::slotted(*),:host([graphic=large]) .mdc-list-item__graphic ::slotted(*){line-height:var(--mdc-list-item-graphic-size, 56px)}:host([graphic=medium]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=medium]) .mdc-list-item__graphic ::slotted(mwc-icon),:host([graphic=large]) .mdc-list-item__graphic ::slotted(.material-icons),:host([graphic=large]) .mdc-list-item__graphic ::slotted(mwc-icon){line-height:var(--mdc-list-item-graphic-size, 56px) !important}:host([graphic=large]){padding-left:0px}`;

src/mwc-list-item.ts

@@ -23,2 +23,3 @@ /**
 
+export {GraphicType, RequestSelectedDetail} from './mwc-list-item-base.js';
 declare global {
@@ -25,0 +26,0 @@ interface HTMLElementTagNameMap {

src/mwc-radio-list-item-base.ts

@@ -34,2 +34,4 @@ /**
 
+  protected _changeFromClick = false;
+
   render() {
@@ -57,3 +59,3 @@ const radioClasses = {
           ?disabled=${this.disabled}
-          @checked=${this.onChecked}>
+          @checked=${this.onChange}>
       </mwc-radio>
@@ -64,24 +66,24 @@ ${this.left ? text : ''}
 
-
   protected onClick() {
-    this.fireRequestDetail(!this.selected, 'interaction');
+    this._changeFromClick = true;
+    super.onClick();
   }
 
-  protected onChecked(evt: Event) {
-    const radio = evt.target as Radio;
+  protected async onChange(evt: Event) {
+    const checkbox = evt.target as Radio;
+    const changeFromProp = this.selected === checkbox.checked;
 
-    if (this.selected !== radio.checked) {
-      // needed to reconcile radio unchecking itself. List doesn't seem to care
-      this.selected = radio.checked;
+    if (!changeFromProp) {
+      this._skipPropRequest = true;
+      this.selected = checkbox.checked;
+      await this.updateComplete;
+      this._skipPropRequest = false;
 
-      this.fireRequestDetail(this.selected, 'interaction');
+      if (!this._changeFromClick) {
+        this.fireRequestSelected(this.selected, 'interaction');
+      }
     }
-  }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.boundOnClick);
-
-    this.setAttribute('mwc-list-item', '');
+    this._changeFromClick = false;
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

923273

increased by7.68%

Number of package files

80

increased by1.27%

Number of low license alerts

0

decreased by-100%

License quality

100

increased by25%

Lines of code

4834

increased by47.42%

Dependency changes

• + Added@material/mwc-base@0.14.0-canary.134cf877.0(transitive)

• + Added@material/mwc-checkbox@0.14.0-canary.134cf877.0(transitive)

• + Added@material/mwc-radio@0.14.0-canary.134cf877.0(transitive)

• + Added@material/mwc-ripple@0.14.0-canary.134cf877.0(transitive)

• - Removed@material/mwc-base@0.14.0-canary.0b5c7f23.0(transitive)

• - Removed@material/mwc-checkbox@0.14.0-canary.0b5c7f23.0(transitive)

• - Removed@material/mwc-radio@0.14.0-canary.0b5c7f23.0(transitive)

• - Removed@material/mwc-ripple@0.14.0-canary.0b5c7f23.0(transitive)

• Updated@material/base@=6.0.0-canary.a88c8e4dc.0

• Updated@material/list@=6.0.0-canary.a88c8e4dc.0

• Updated@material/mwc-base@0.14.0-canary.134cf877.0

• Updated@material/mwc-checkbox@0.14.0-canary.134cf877.0

• Updated@material/mwc-radio@0.14.0-canary.134cf877.0