@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/components/Box.js

@@ -3,35 +3,16 @@ import FlexableMixin from '../mixins/FlexableMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 /**
- * Containers are stateless elements that may have a color and ink.
+ * Boxes are stateless elements that may have a color and ink.
  * They should have simple geometry for rendering and layout.
  */
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
   .mixin(FlexableMixin)
-  .observe({
-    inline: 'boolean',
-    grid: 'boolean',
-    block: {
-      type: 'boolean',
-      empty: true,
-    },
-  })
+  .html`<slot id=slot></slot>`
   .css`
-    :host {
-      display: block;
-    }
-    
-    :host([inline]) {
-      display: inline-block;
-    }
-    
-    :host([flex]:where([inline])) {
-      display: inline-flex;
-    }
-
-    :host([color]) {
+    :host(:where([color])) {
       background-color: rgb(var(--mdw-bg));
       color: rgb(var(--mdw-ink));
     }
@@ -49,36 +30,17 @@ export default CustomElement
       font: var(--mdw-type__font);
       letter-spacing: var(--mdw-type__letter-spacing);
     }
-    
-    #slot {
-      /* Passthrough from parent */
-      block-size: inherit;
-      inline-size: inherit;
-    }
 
-    :host([grid]) {
-      display: grid;
-      column-gap: 16px; /* Gutters */
-      grid-auto-flow: row;
-      grid-template-columns: repeat(var(--mdw-grid__columns), 1fr);
+    #slot::slotted([flex-0]) {
+      flex: 0;
     }
 
-    #slot[grid]::slotted(*) { grid-column: auto / span calc(var(--mdw-grid__columns)) }
-    #slot[grid]::slotted([col-span="1"]) { grid-column: auto / span 1; }
-    #slot[grid]::slotted([col-span="2"]) { grid-column: auto / span min(2, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="3"]) { grid-column: auto / span min(3, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="4"]) { grid-column: auto / span min(4, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="5"]) { grid-column: auto / span min(5, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="6"]) { grid-column: auto / span min(6, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="7"]) { grid-column: auto / span min(7, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="8"]) { grid-column: auto / span min(8, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="9"]) { grid-column: auto / span min(9, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="10"]) { grid-column: auto / span min(10, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="11"]) { grid-column: auto / span min(11, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="12"]) { grid-column: auto / span min(12, var(--mdw-grid__columns)); }
-    #slot[grid]::slotted([col-span="50%"]) { grid-column: auto / span max(calc(var(--mdw-grid__columns) / 2), 1); }
-    #slot[grid]::slotted([col-span="25%"]) { grid-column: auto / span max(calc(var(--mdw-grid__columns) / 4), 1); }
+    #slot::slotted([flex-1]) {
+      flex: 1;
+    }
 
+    #slot::slotted([flex-none]) {
+      flex: none;
+    }
   `
-  .html`<slot id=slot type-style={typeStyle} grid={grid}></slot>`
   .autoRegister('mdw-box');

package/components/Button.js

@@ -1,34 +1,51 @@
 import './Icon.js';
 import CustomElement from '../core/CustomElement.js';
 import DensityMixin from '../mixins/DensityMixin.js';
+import ElevationMixin from '../mixins/ElevationMixin.js';
+import HyperlinkMixin from '../mixins/HyperlinkMixin.js';
 import InputMixin from '../mixins/InputMixin.js';
 import RippleMixin from '../mixins/RippleMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
-import SurfaceMixin from '../mixins/SurfaceMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
+/* https://m3.material.io/components/buttons/specs */
+
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
   .mixin(DensityMixin)
-  .mixin(SurfaceMixin)
-  .mixin(ShapeMixin)
   .mixin(StateMixin)
+  .mixin(ElevationMixin)
+  .mixin(ShapeMixin)
   .mixin(RippleMixin)
   .mixin(InputMixin)
+  .mixin(HyperlinkMixin)
   .define({
     stateTargetElement() { return this.refs.control; },
   })
   .set({
     stateLayer: true,
-    delegatesFocus: true,
+    _allowedTypes: ['button', 'submit', 'reset', 'file'],
   })
   .observe({
-    type: { empty: 'button' },
+    type: {
+      empty: 'button',
+      /**
+       * @param {string} value
+       * @param {*} internalSet
+       */
+      set(value, internalSet) {
+        const enumeratedValue = value?.toLowerCase() ?? 'button';
+        internalSet(
+          this._allowedTypes.includes(enumeratedValue)
+            ? enumeratedValue
+            : 'button',
+        );
+      },
+    },
     elevated: 'boolean',
     filled: 'string',
-    href: 'string',
     outlined: 'boolean',
     icon: 'string',
     iconInk: 'string',
@@ -36,17 +53,17 @@ export default CustomElement
     svg: 'string',
     viewBox: 'string',
     svgPath: 'string',
-    _slotInnerText: 'string',
   })
   .expressions({
-    hasIcon({ icon, svg, src, svgPath }) {
+    hasIcon({ icon, svg, src, svgPath } = this) {
       return icon ?? svg ?? src ?? svgPath;
     },
-    computedAriaLabel({ ariaLabel, _slotInnerText }) {
-      return ariaLabel?.trim() || _slotInnerText?.trim() || null;
+    iconVariation({ outlined } = this) {
+      return outlined ? null : 'filled';
     },
   })
   .methods({
+    /** @type {HTMLElement['focus']} */
     focus(...options) {
       if (this.href) {
         this.refs.anchor.focus(...options);
@@ -56,39 +73,19 @@ export default CustomElement
     },
   })
   .html`
-    <mdw-icon mdw-if={hasIcon} id=icon ink={iconInk} disabled={disabledState} outlined={outlined} aria-hidden=true svg={svg} src={src} svg-path={svgPath} view-box={viewBox}>{icon}</mdw-icon>
-    <a mdw-if={href} id=anchor href={href} aria-label="{computedAriaLabel}"></a>
-    <slot id=slot disabled={disabledState} aria-hidden=false></slot>
+    <mdw-icon mdw-if={hasIcon} id=icon ink={iconInk} disabled={disabledState}
+      outlined={outlined} variation={iconVariation} aria-hidden=true svg={svg} src={src}
+      svg-path={svgPath} view-box={viewBox} icon={icon}></mdw-icon>
+    <slot id=slot disabled={disabledState} aria-hidden=true>{_defaultValue}</slot>
   `
-  .childEvents({
-    slot: {
-      slotchange() {
-        // Firefox and Webkit will not apply label from slots.
-        // https://bugs.webkit.org/show_bug.cgi?id=254934
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=1826194
-        if (navigator.userAgent.includes('Firefox')
-        || (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrom'))) {
-          this._slotInnerText = this.textContent;
-        }
-      },
-    },
-  })
-  .on({
-    composed() {
-      const {
-        shape, state, rippleContainer, surface, control,
-      } = this.refs;
-      surface.append(shape);
-      shape.append(state, rippleContainer);
-      shape.setAttribute('filled', '{filled}');
-      control.setAttribute('aria-label', '{computedAriaLabel}');
-      control.setAttribute('hidden', '{href}');
-      control.setAttribute('role', 'button');
-    },
+  .recompose(({ refs: { anchor, control } }) => {
+    control.setAttribute('mdw-if', '{!href}');
+    control.setAttribute('role', 'button');
+    anchor.setAttribute('mdw-if', '{href}');
+    anchor.setAttribute('aria-label', '{_computedAriaLabel}');
+    anchor.setAttribute('aria-labelledby', '{_computedAriaLabelledby}');
   })
   .css`
-    /* https://m3.material.io/components/buttons/specs */
-
     :host {
       --mdw-shape__size: var(--mdw-shape__full);
       --mdw-ink: var(--mdw-color__primary);
@@ -121,23 +118,39 @@ export default CustomElement
     }
 
     :host(:where([elevated],[filled])) {
-      will-change: filter;
+      transition: box-shadow 200ms;
+      will-change: box-shadow;
     }
 
     /** Elevated Color Defaults */
     :host(:where([elevated])) {
       --mdw-bg: var(--mdw-color__surface-container-low);
       --mdw-ink: var(--mdw-color__primary);
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
+      box-shadow: var(--mdw-elevation__box-shadow__1);
     }
     /** Filled Color Defaults */
     :host(:where([filled])) {
       --mdw-bg: var(--mdw-color__primary);
       --mdw-ink: var(--mdw-color__on-primary);
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
+      box-shadow: var(--mdw-elevation__box-shadow__0);
+    }
+
+    :host(:where([elevated]:hover:not(:active))) {
+      box-shadow: var(--mdw-elevation__box-shadow__2);
     }
+
+    :host(:where([filled]:hover:not(:active))) {
+      box-shadow: var(--mdw-elevation__box-shadow__1);
+    }
+
+    :host(:where([elevated]:disabled)) {
+      box-shadow: var(--mdw-elevation__box-shadow__0);
+    }
+
+    :host(:where([filled]:disabled)) {
+      box-shadow: var(--mdw-elevation__box-shadow__0);
+    }
+
     /** Filled Tonal Color Defaults */
     :host(:where([filled="tonal"])) {
       --mdw-bg: var(--mdw-color__secondary-container);
@@ -164,7 +177,7 @@ export default CustomElement
       padding-inline: calc(16px + (var(--mdw-density) * 2px)) calc(24px + (var(--mdw-density) * 2px));
     }
 
-    #shape:where([elevated],[filled],[color]) {
+    :host(:where([elevated],[filled],[color])) {
       background-color: rgb(var(--mdw-bg));
     }
 
@@ -192,7 +205,7 @@ export default CustomElement
       color: rgba(var(--mdw-color__on-surface), 0.38);
     }
 
-    #shape[disabled]:is([elevated], [filled]) {
+    :host([disabled]:is([elevated], [filled])) {
       background-color: rgba(var(--mdw-color__on-surface), 0.12);
       color: rgba(var(--mdw-color__on-surface), 0.38);
     }
@@ -203,11 +216,6 @@ export default CustomElement
 
     #icon {
       font-size: calc(18/14 * 1em);
-      font-variation-settings: 'FILL' 1;
-    }
-
-    #icon[outlined] {
-      font-variation-settings: 'FILL' 0;
     }
 
     #icon[disabled] {
@@ -222,37 +230,8 @@ export default CustomElement
 
     @media (any-pointer: coarse) {
       #touch-target {
-        visibility: visible;
+        visibility: inherit;
       }
     }
   `
-  .childEvents({
-    control: {
-      /**
-       * Duplicates button for form submission
-       * @see https://github.com/WICG/webcomponents/issues/814
-       * @param {{currentTarget:HTMLInputElement}} event
-       * @type {any}
-       */
-      '~click'({ currentTarget }) {
-        if (currentTarget.disabled) return;
-        if (currentTarget.type !== 'submit') return;
-        if (this.disabled) return;
-        const { value } = currentTarget;
-        const form = this.elementInternals?.form;
-        if (!form) return;
-        this.elementInternals.setFormValue(value);
-        if ((currentTarget.type ?? 'submit') !== 'submit') return;
-        const duplicatedButton = /** @type {HTMLInputElement} */ (currentTarget.cloneNode());
-        duplicatedButton.hidden = true;
-        form.append(duplicatedButton);
-        if ('requestSubmit' in form) {
-          form.requestSubmit(duplicatedButton);
-        } else {
-          duplicatedButton.click();
-        }
-        duplicatedButton.remove();
-      },
-    },
-  })
   .autoRegister('mdw-button');

package/components/Card.js

@@ -1,31 +1,32 @@
-import CustomElement from '../core/CustomElement.js';
 import { EVENT_HANDLER_TYPE } from '../core/customTypes.js';
 import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
-import FlexableMixin from '../mixins/FlexableMixin.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import ElevationMixin from '../mixins/ElevationMixin.js';
 import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
+import HyperlinkMixin from '../mixins/HyperlinkMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
-import SurfaceMixin from '../mixins/SurfaceMixin.js';
-import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import Box from './Box.js';
+
+/* https://m3.material.io/components/cards/specs */
 
 const SUPPORTS_INERT = 'inert' in HTMLElement.prototype;
 
-export default CustomElement
+export default Box
   .extend()
-  .mixin(ThemableMixin)
-  .mixin(FlexableMixin)
-  .mixin(SurfaceMixin)
+  .mixin(StateMixin)
+  .mixin(ElevationMixin)
   .mixin(ShapeMixin)
   .mixin(FormAssociatedMixin) // Tap into FormAssociated for disabledState
-  .mixin(StateMixin)
   .mixin(AriaReflectorMixin)
-  .setStatic({
-    delegatesFocus: true,
-  })
+  .mixin(DelegatesFocusMixin)
+  .mixin(HyperlinkMixin)
   .set({
     _ariaRole: 'figure',
   })
   .observe({
+    elevated: 'boolean',
     filled: 'boolean',
     actionable: 'boolean',
     actionLabel: 'string',
@@ -35,7 +36,8 @@ export default CustomElement
     stateTargetElement() { return this.actionable ? this.refs.action : this; },
   })
   .expressions({
-    showBlocker: ({ disabledState }) => !SUPPORTS_INERT && disabledState,
+    showBlocker: ({ disabledState, disabled }) => disabledState && (!disabled || !SUPPORTS_INERT),
+    showButton: ({ actionable, href }) => Boolean(actionable || href),
   })
   .methods({
     focus() {
@@ -44,68 +46,62 @@ export default CustomElement
     },
   })
   .html`
-    <mdw-button mdw-if={actionable} aria-label={actionLabel} id=action disabled={disabledState}></mdw-button>
+    <mdw-button mdw-if={showButton} aria-label={actionLabel} href={href}
+      target={target}
+      download={download}
+      ping={ping}
+      rel={rel}
+      hreflang={hreflang}
+      referrerpolicy={referrerPolicy} id=action disabled={disabledState}></mdw-button>
     <div mdw-if={showBlocker} id=inert-blocker></div>
-    <slot id=slot disabled={disabledState}></slot>
   `
+  .recompose(({ refs: { anchor, inertBlocker, slot } }) => {
+    anchor.remove();
+    slot.setAttribute('disabled', '{disabledState}');
+    inertBlocker.before(slot);
+  })
   .css`
-    /* https://m3.material.io/components/cards/specs */
-
     :host {
-      --mdw-shape__size: 12px;
+      --mdw-shape__size: var(--mdw-shape__medium);
 
-      --mdw-surface__shadow__resting: none;
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
       /* padding-inline: 12px; */
 
-      --mdw-bg: var(--mdw-color__surface-container);
+      --mdw-bg: var(--mdw-color__surface);
       --mdw-ink: var(--mdw-color__on-surface);
       position: relative;
 
-      display: block;
-
-      color: rgb(var(--mdw-ink));
-
       font: var(--mdw-type__font);
       letter-spacing: var(--mdw-type__letter-spacing);
-    }
 
-    #shape:where([elevated],[filled],[color]) {
-      background-color: rgb(var(--mdw-bg));
+      transition: filter 200ms;
+      will-change: filter;
     }
 
-    :host(:where([filled])) {
-      --mdw-bg: var(--mdw-color__surface-container-highest);
-      --mdw-ink: var(--mdw-color__on-surface-variant);
+    :host(:where([elevated],[filled],[outlined])) {
+      background-color: rgb(var(--mdw-bg));
     }
 
     :host(:where([elevated])) {
       --mdw-bg: var(--mdw-color__surface-container-low);
       --mdw-ink: var(--mdw-color__on-surface);
+      filter: var(--mdw-elevation__drop-shadow__1);
     }
 
-    :host([filled]) {
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
+    :host(:where([filled])) {
+      --mdw-bg: var(--mdw-color__surface-container-highest);
+      --mdw-ink: var(--mdw-color__on-surface-variant);
     }
 
-    :host([filled][actionable]) {
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
+    :host(:where([filled][actionable])) {
+      filter: var(--mdw-elevation__drop-shadow__0);
     }
 
-    :host([elevated]) {
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
+    :host(:where([elevated][actionable]:hover:not(:active))) {
+      filter: var(--mdw-elevation__drop-shadow__2);
     }
 
-    :host([elevated][actionable]) {
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
-    }
-
-    #shape[disabled] {
-
-      /* Works on images */
-      filter: grayscale();
-
-      color: rgb(var(--mdw-color__on-surface));
+    :host(:where([filled][actionable]:hover:not(:active))) {
+      filter: var(--mdw-elevation__drop-shadow__1);
     }
 
     :host([disabled]) {
@@ -113,6 +109,8 @@ export default CustomElement
 
       filter: grayscale();
       opacity: 0.38;
+
+      color: rgb(var(--mdw-color__on-surface));
     }
 
     #slot[disabled] {
@@ -135,10 +133,14 @@ export default CustomElement
       z-index: 99;
     }
 
-    #shape[disabled][elevated] {
+    :host([disabled][elevated]) {
       background-color: rgba(var(--mdw-color__surface-container-highest));
     }
 
+    :host([disabled][filled]) {
+      background-color: rgba(var(--mdw-color__surface));
+    }
+
     #action {
       --mdw-ink: inherit;
       --mdw-shape__size: inherit;
@@ -153,19 +155,12 @@ export default CustomElement
       color: inherit
     }
   `
-  .on({
-    composed() {
-      const { slot, surface, shape, outline } = this.refs;
-      surface.append(shape);
-      outline.removeAttribute('pressed');
-      outline.removeAttribute('focused');
-
-      shape.setAttribute('filled', '{filled}');
-      slot.setAttribute('inert', '{disabledState}');
-      slot.setAttribute('disabled', '{disabledState}');
-      // shape.setAttribute('disabled', '{disabledState}');
-      // shape.setAttribute('filled', '{filled}');
-    },
+  .recompose(({ refs: { slot, outline } }) => {
+    outline.removeAttribute('pressed');
+    outline.removeAttribute('focused');
+
+    slot.setAttribute('inert', '{disabledState}');
+    slot.setAttribute('disabled', '{disabledState}');
   })
   .childEvents({
     action: {

package/components/Checkbox.js

@@ -21,43 +21,25 @@ export default CustomElement
   .observe({
     icon: { value: 'check' },
     indeterminateIcon: { value: 'check_indeterminate_small' },
-    /** Reflected property */
-    indeterminate: 'boolean',
   })
-  .observe({
-    _ariaChecked({ indeterminate, checked }) {
-      return (indeterminate ? 'mixed' : `${!!checked}`);
-    },
+  .expressions({
     _determinateIcon({ indeterminate, indeterminateIcon, icon }) {
       return (indeterminate ? indeterminateIcon : icon);
     },
+    _iconSelectedState({ checked, indeterminate }) {
+      return checked || indeterminate;
+    },
   })
   .html`
     <div id=checkbox errored={erroredState} selected={checked}>
       <mdw-checkbox-icon id=icon errored={erroredState} disabled={disabledState}
-        icon={_determinateIcon} selected={checked}>
+        icon={_determinateIcon} selected={_iconSelectedState}>
       </mdw-checkbox-icon>
     </div>
     <slot id=slot></slot>
   `
-  .rootEvents({
-    click(event) {
-      const { control } = this.refs;
-      if (event.target !== control) {
-        // Label-like click
-        event.stopPropagation();
-        control.click();
-      }
-    },
-  })
-  .on({
-    composed() {
-      const { control, checkbox, state, rippleContainer } = this.refs;
-      checkbox.append(state, rippleContainer);
-
-      // Indeterminate must be manually expressed for ARIA
-      control.setAttribute('aria-checked', '{_ariaChecked}');
-    },
+  .recompose(({ refs: { checkbox, state, rippleContainer } }) => {
+    checkbox.append(state, rippleContainer);
   })
   .css`
     /* https://m3.material.io/components/checkbox/specs */

package/components/CheckboxIcon.js

@@ -42,16 +42,6 @@ export default CustomElement
       line-height: 18px;
     }
 
-    #shape {
-      --mdw-shape__size: inherit;
-      position: absolute;
-      inset: 0;
-
-      z-index: auto;
-
-      background-color: transparent;
-    }
-
     #icon {
       position: absolute;
       inset: 0;
@@ -59,6 +49,7 @@ export default CustomElement
       opacity: 0;
 
       background-color: rgb(var(--mdw-bg));
+      border-radius: inherit;
       color: rgb(var(--mdw-ink));
 
       transition-duration: 200ms;
@@ -67,11 +58,7 @@ export default CustomElement
     }
 
     #outline {
-      filter:
-        drop-shadow(1px 0px 0px currentColor)
-        drop-shadow(0px 1px 0px currentColor)
-        drop-shadow(-1px 0px 0px currentColor)
-        drop-shadow(0px -1px 0px currentColor);
+      border-width: 2px;
 
       color: rgb(var(--mdw-color__on-surface));
 
@@ -112,18 +99,13 @@ export default CustomElement
       color: rgb(var(--mdw-color__on-surface), var(--disabled-opacity));
     }
   `
-  .on({
-    composed({ html }) {
-      const { outline, shape } = this.refs;
-      outline.removeAttribute('mdw-if');
-      outline.setAttribute('selected', '{selected}');
-      outline.setAttribute('errored', '{errored}');
-      outline.setAttribute('disabled', '{disabled}');
-      // outlineLeft.remove();
-      // outlineRight.remove();
-      shape.append(html`
-        <mdw-icon id=icon selected={selected} errored={errored} disabled={disabled}>{icon}</mdw-icon>
-      `);
-    },
+  .html`
+    <mdw-icon id=icon selected={selected} errored={errored} disabled={disabled} icon={icon}></mdw-icon>
+  `
+  .recompose(({ refs: { outline } }) => {
+    outline.removeAttribute('mdw-if');
+    outline.setAttribute('selected', '{selected}');
+    outline.setAttribute('errored', '{errored}');
+    outline.setAttribute('disabled', '{disabled}');
   })
   .autoRegister('mdw-checkbox-icon');

package/components/Chip.js

@@ -5,6 +5,11 @@ export default Button
   .observe({
     suggestion: 'boolean',
   })
+  .expressions({
+    iconVariation({ elevated }) {
+      return elevated ? 'filled' : null;
+    },
+  })
   .css`
     /* https://m3.material.io/components/chips/specs */
 
@@ -43,16 +48,13 @@ export default Button
     }
 
   `
-  .on({
-    composed({ inline }) {
-      const { slot, outline, icon } = this.refs;
-      slot.setAttribute('disabled', '{disabledState}');
-      slot.removeAttribute('ink');
-      slot.removeAttribute('color');
-      outline.setAttribute('mdw-if', '{!elevated}');
-      outline.setAttribute('ink', '{ink}');
-      outline.setAttribute('color', '{color}');
-      icon.setAttribute('ink', inline(({ ink, iconInk }) => iconInk ?? ink ?? 'primary'));
-    },
+  .recompose(({ inline, refs: { slot, outline, icon } }) => {
+    slot.setAttribute('disabled', '{disabledState}');
+    slot.removeAttribute('ink');
+    slot.removeAttribute('color');
+    outline.setAttribute('mdw-if', '{!elevated}');
+    outline.setAttribute('ink', '{ink}');
+    outline.setAttribute('color', '{color}');
+    icon.setAttribute('ink', inline(({ ink, iconInk }) => iconInk ?? ink ?? 'primary'));
   })
   .autoRegister('mdw-chip');