@shortfuse/materialdesignweb 0.7.6 → 0.8.0

package/components/Button.md

@@ -41,17 +41,17 @@
 
 ## Custom
 ```html
-  <mdw-button class=mdw-custom ink=yellow>Custom text</mdw-button>
-  <mdw-button class=mdw-custom elevated ink=yellow>Custom elevated</mdw-button>
-  <mdw-button class=mdw-custom filled color=yellow>Custom filled</mdw-button>
-  <mdw-button class=mdw-custom filled=tonal icon=add color=yellow-container>Custom tonal</mdw-button>
-  <mdw-button class=mdw-custom outlined ink=yellow>Custom outlined</mdw-button>
+  <mdw-button ink=yellow>Custom text</mdw-button>
+  <mdw-button elevated ink=yellow>Custom elevated</mdw-button>
+  <mdw-button filled color=yellow>Custom filled</mdw-button>
+  <mdw-button filled=tonal icon=add color=yellow-container>Custom tonal</mdw-button>
+  <mdw-button outlined ink=yellow>Custom outlined</mdw-button>
   <mdw-button disabled outlined>Outlined (Disabled)</mdw-button>
   <mdw-button disabled outlined icon=add>Outlined icon (Disabled)</mdw-button>
-  <mdw-button disabled class=mdw-custom ink=yellow>Custom text</mdw-button>
-  <mdw-button disabled class=mdw-custom elevated=yellow>Custom elevated</mdw-button>
-  <mdw-button disabled filled class=mdw-custom color=yellow>Custom filled</mdw-button>
-  <mdw-button disabled filled=tonal class=mdw-custom icon=add color=yellow-container>Custom tonal</mdw-button>
+  <mdw-button disabled ink=yellow>Custom text</mdw-button>
+  <mdw-button disabled elevated=yellow>Custom elevated</mdw-button>
+  <mdw-button disabled filled color=yellow>Custom filled</mdw-button>
+  <mdw-button disabled filled=tonal icon=add color=yellow-container>Custom tonal</mdw-button>
 ```
 
 ```js

package/components/Card.js

@@ -11,6 +11,7 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 const SUPPORTS_INERT = 'inert' in HTMLElement.prototype;
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(FlexableMixin)
   .mixin(SurfaceMixin)
@@ -18,7 +19,6 @@ export default CustomElement
   .mixin(FormAssociatedMixin) // Tap into FormAssociated for disabledState
   .mixin(StateMixin)
   .mixin(AriaReflectorMixin)
-  .extend()
   .setStatic({
     delegatesFocus: true,
   })
@@ -43,9 +43,9 @@ export default CustomElement
       if (this.actionable) this.refs.action.focus();
     },
   })
-  .html/* html */`
-    <mdw-button _if={actionable} aria-label={actionLabel} id=action disabled={disabledState}></mdw-button>
-    <div _if={showBlocker} id=inert-blocker></div>
+  .html`
+    <mdw-button mdw-if={actionable} aria-label={actionLabel} id=action disabled={disabledState}></mdw-button>
+    <div mdw-if={showBlocker} id=inert-blocker></div>
     <slot id=slot disabled={disabledState}></slot>
   `
   .css`
@@ -53,14 +53,12 @@ export default CustomElement
 
     :host {
       --mdw-shape__size: 12px;
-      --mdw-surface__tint: var(--mdw-surface__tint__0);
-      --mdw-surface__tint__raised: var(--mdw-surface__tint);
 
       --mdw-surface__shadow__resting: none;
       --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
       /* padding-inline: 12px; */
 
-      --mdw-bg: var(--mdw-color__surface);
+      --mdw-bg: var(--mdw-color__surface-container);
       --mdw-ink: var(--mdw-color__on-surface);
       position: relative;
 
@@ -77,32 +75,28 @@ export default CustomElement
     }
 
     :host(:where([filled])) {
-      --mdw-bg: var(--mdw-color__surface-variant);
+      --mdw-bg: var(--mdw-color__surface-container-highest);
       --mdw-ink: var(--mdw-color__on-surface-variant);
     }
 
     :host(:where([elevated])) {
-      --mdw-bg: var(--mdw-color__surface);
+      --mdw-bg: var(--mdw-color__surface-container-low);
       --mdw-ink: var(--mdw-color__on-surface);
     }
 
     :host([filled]) {
-      --mdw-surface__tint: var(--mdw-surface__tint__0);
       --mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
     }
 
     :host([filled][actionable]) {
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
       --mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
     }
 
     :host([elevated]) {
-      --mdw-surface__tint: var(--mdw-surface__tint__1);
       --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
     }
 
     :host([elevated][actionable]) {
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
       --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
     }
 
@@ -142,7 +136,7 @@ export default CustomElement
     }
 
     #shape[disabled][elevated] {
-      background-color: rgba(var(--mdw-color__surface-variant));
+      background-color: rgba(var(--mdw-color__surface-container-highest));
     }
 
     #action {
@@ -161,8 +155,7 @@ export default CustomElement
   `
   .on({
     composed() {
-      const { slot, surface, surfaceTint, shape, outline } = this.refs;
-      shape.append(surfaceTint);
+      const { slot, surface, shape, outline } = this.refs;
       surface.append(shape);
       outline.removeAttribute('pressed');
       outline.removeAttribute('focused');

package/components/Checkbox.js

@@ -8,12 +8,12 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 import TouchTargetMixin from '../mixins/TouchTargetMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(RippleMixin)
   .mixin(InputMixin)
   .mixin(TouchTargetMixin)
-  .extend()
   .set({
     stateLayer: true,
     type: 'checkbox',
@@ -32,6 +32,33 @@ export default CustomElement
       return (indeterminate ? indeterminateIcon : icon);
     },
   })
+  .html`
+    <div id=checkbox errored={erroredState} selected={checked}>
+      <mdw-checkbox-icon id=icon errored={erroredState} disabled={disabledState}
+        icon={_determinateIcon} selected={checked}>
+      </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}');
+    },
+  })
   .css`
     /* https://m3.material.io/components/checkbox/specs */
 
@@ -50,7 +77,15 @@ export default CustomElement
       transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
     }
 
-    :host([disabled]) {
+    :host(:disabled) {
+      cursor: not-allowed;
+
+      opacity: 0.38;
+    }
+
+    :host([internals-disabled]) {
+      cursor: not-allowed;
+
       opacity: 0.38;
     }
 
@@ -60,28 +95,18 @@ export default CustomElement
       line-height: 18px;
     }
 
-    :host(:empty) #checkbox {
-      transform: none;
-    }
-
     #control {
       grid-column: 1/1;
 
       cursor: inherit;
     }
 
-    #label {
-      cursor: inherit;
-    }
-
-    #label[disabled] {
-      cursor: not-allowed;
-    }
-
     #state,
     #ripple-container {
-      inset-block-start: 50%;
-      inset-inline-start: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      top: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 50%;
 
       block-size: 40px;
       inline-size: 40px;
@@ -117,30 +142,14 @@ export default CustomElement
       color: rgb(var(--mdw-color__error));
     }
 
+    :host(:empty) #checkbox {
+      transform: none;
+    }
+
     #icon {
       --mdw-ink: inherit;
       --mdw-bg: inherit;
       --disabled-opacity: 1;
     }
   `
-  .on({
-    composed({ html }) {
-      const { label, control, state, rippleContainer, touchTarget } = this.refs;
-      label.append(html`
-        ${touchTarget}
-        ${control}
-        <div id=checkbox errored={erroredState} selected={checked}>
-          <mdw-checkbox-icon id=icon errored={erroredState} disabled={disabledState}
-            icon={_determinateIcon} selected={checked}>
-          </mdw-checkbox-icon>
-          ${state}
-          ${rippleContainer}
-        </div>
-        <slot id=slot></slot>
-      `);
-
-      // Indeterminate must be manually expressed for ARIA
-      control.setAttribute('aria-checked', '{_ariaChecked}');
-    },
-  })
   .autoRegister('mdw-checkbox');

package/components/CheckboxIcon.js

@@ -4,6 +4,7 @@ import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(ShapeMixin)
   .observe({
@@ -114,7 +115,7 @@ export default CustomElement
   .on({
     composed({ html }) {
       const { outline, shape } = this.refs;
-      outline.removeAttribute('_if');
+      outline.removeAttribute('mdw-if');
       outline.setAttribute('selected', '{selected}');
       outline.setAttribute('errored', '{errored}');
       outline.setAttribute('disabled', '{disabled}');
@@ -125,5 +126,4 @@ export default CustomElement
       `);
     },
   })
-  .extend()
   .autoRegister('mdw-checkbox-icon');

package/components/Chip.js

@@ -49,7 +49,7 @@ export default Button
       slot.setAttribute('disabled', '{disabledState}');
       slot.removeAttribute('ink');
       slot.removeAttribute('color');
-      outline.setAttribute('_if', '{!elevated}');
+      outline.setAttribute('mdw-if', '{!elevated}');
       outline.setAttribute('ink', '{ink}');
       outline.setAttribute('color', '{color}');
       icon.setAttribute('ink', inline(({ ink, iconInk }) => iconInk ?? ink ?? 'primary'));