@shortfuse/materialdesignweb 0.7.6 → 0.8.0

package/mixins/TextFieldMixin.js

@@ -11,7 +11,6 @@ export default function TextFieldMixin(Base) {
   return Base
     .mixin(DensityMixin)
     .mixin(ShapeMixin)
-    .extend()
     .set({
       stateLayer: true,
     })
@@ -30,7 +29,7 @@ export default function TextFieldMixin(Base) {
       placeholder: { nullParser: String }, // DOMString
     })
     .observe({
-      erroredState({ error, _invalid }) { return Boolean(error || _invalid); },
+      erroredState({ error, _invalid, _userInteracted }) { return _userInteracted && Boolean(error || _invalid); },
     })
     .expressions({
       computePlaceholder({ filled, outlined, label, placeholder }) {
@@ -38,12 +37,12 @@ export default function TextFieldMixin(Base) {
         return placeholder ?? label;
       },
 
-      shouldShowSupporting({ _invalid, error, supporting }) {
-        return _invalid || ((error ?? supporting) != null);
+      shouldShowSupporting({ erroredState, supporting }) {
+        return erroredState || (supporting != null);
       },
 
-      computeSupportingText({ error, _validationMessage, supporting }) {
-        return (error || _validationMessage || supporting) ?? '';
+      computeSupportingText({ error, erroredState, _validationMessage, supporting }) {
+        return (error || (erroredState && _validationMessage) || supporting) ?? '';
       },
 
       populatedState({ value, _badInput }) {
@@ -53,44 +52,57 @@ export default function TextFieldMixin(Base) {
         return label && (filled || outlined);
       },
     })
+    .html`
+      <div id=label-text mdw-if={_showLabelText} aria-hidden=true
+        outlined={outlined}
+        populated={populatedState}
+        focused={focusedState}
+        icon={icon}
+        trailing-icon={trailingIcon}
+        disabled={disabledState}
+        errored={erroredState}>{label}</div>
+      <div mdw-if={shouldShowSupporting} id=supporting disabled={disabledState} errored={erroredState}>
+        {computeSupportingText}
+        <slot id=supporting-slot name=supporting></slot>
+      </div>
+    `
     .on({
-      composed({ template, html, inline }) {
-        const { control, label: labelElement, outline, shape, outlineLeft, outlineRight, state } = this.refs;
+      composed({ html, inline }) {
+        const { control, outline, shape, outlineLeft, outlineRight, state } = this.refs;
         control.setAttribute('placeholder', '{computePlaceholder}');
         control.setAttribute('aria-label', '{label}');
         control.setAttribute('input-suffix', '{inputSuffix}');
         control.setAttribute('errored', '{erroredState}');
+        control.setAttribute('aria-describedby', 'supporting');
         control.removeAttribute('aria-labelledby');
         control.classList.add('inline');
 
-        labelElement.classList.add('shape');
-        labelElement.setAttribute('filled', '{filled}');
-        labelElement.setAttribute('color', '{color}');
-        labelElement.setAttribute('icon', '{icon}');
-        labelElement.setAttribute('shape-style', '{shapeStyle}');
-        labelElement.setAttribute('trailingIcon', '{trailingIcon}');
-        labelElement.setAttribute('populated', '{populatedState}');
-        labelElement.setAttribute('outlined', '{outlined}');
-        labelElement.setAttribute('focused', '{focusedState}');
-        labelElement.setAttribute('label', '{label}');
-        labelElement.setAttribute('shape-top', inline(({ shapeTop, filled }) => shapeTop || filled));
-        labelElement.append(
+        state.setAttribute('mdw-if', '{!outlined}');
+        shape.setAttribute('role', 'none');
+        shape.setAttribute('filled', '{filled}');
+        shape.setAttribute('icon', '{icon}');
+        shape.setAttribute('trailingIcon', '{trailingIcon}');
+        shape.setAttribute('populated', '{populatedState}');
+        shape.setAttribute('focused', '{focusedState}');
+        shape.setAttribute('label', '{label}');
+        shape.setAttribute('shape-top', inline(({ shapeTop, filled }) => shapeTop || filled));
+        shape.append(
           state,
           outline,
+          control,
           html`
-            <mdw-icon _if={icon} id=icon aria-hidden=true disabled={disabledState}>{icon}</mdw-icon>
-            <span _if={inputPrefix} class=inline id=prefix aria-hidden=true focused={focusedState} populated={populatedState}>{inputPrefix}</span>
-            <span _if={inputSuffix} class=inline id=suffix aria-hidden=true focused={focusedState} populated={populatedState}>{inputSuffix}</span>
-            <mdw-icon _if={trailingIcon} id=trailing-icon ink={trailingIconInk} aria-hidden=true disabled={disabledState}>{trailingIcon}</mdw-icon>
-            <div id=indicator _if={filled} focused={focusedState} hovered={hoveredState} errored={erroredState} disabled={disabledState} ></div>
+            <mdw-icon mdw-if={icon} id=icon aria-hidden=true disabled={disabledState}>{icon}</mdw-icon>
+            <span mdw-if={inputPrefix} class=inline id=prefix aria-hidden=true focused={focusedState} populated={populatedState}>{inputPrefix}</span>
+            <span mdw-if={inputSuffix} class=inline id=suffix aria-hidden=true focused={focusedState} populated={populatedState}>{inputSuffix}</span>
+            <mdw-icon mdw-if={trailingIcon} id=trailing-icon ink={trailingIconInk} aria-hidden=true disabled={disabledState}>{trailingIcon}</mdw-icon>
+            <div mdw-if={filled} id=indicator aria-hidden=true focused={focusedState} hovered={hoveredState} errored={erroredState} disabled={disabledState}></div>
           `,
         );
 
         outline.setAttribute('label', '{label}');
-        outline.setAttribute('invalid', '{invalid}');
         outline.setAttribute('errored', '{erroredState}');
         outlineLeft.after(html`
-          <div id=gap _if={label} label={label} populated={populatedState} focused={focusedState}>
+          <div id=gap mdw-if={label} label={label} populated={populatedState} focused={focusedState}>
             <div id=gap-slot focused={focusedState}></div>
             <span id=gap-label>{label}</span>
           </div>
@@ -98,24 +110,6 @@ export default function TextFieldMixin(Base) {
 
         outlineLeft.setAttribute('focused', '{focusedState}');
         outlineRight.setAttribute('focused', '{focusedState}');
-
-        shape.remove();
-        state.setAttribute('_if', '{!outlined}');
-
-        template.append(html`
-          <div id=label-text _if={_showLabelText} aria-hidden=true
-            outlined={outlined}
-            populated={populatedState}
-            focused={focusedState}
-            icon={icon}
-            trailing-icon={trailingIcon}
-            disabled={disabledState}
-            errored={erroredState}>{label}</div>
-          <div _if={shouldShowSupporting} id=supporting disabled={disabledState} errored={erroredState}>
-            {computeSupportingText}
-            <slot id=supporting-slot name=supporting></slot>
-          </div>
-        `);
       },
       sizeChanged(oldValue, newValue) {
         this.refs.control.style.setProperty('--size', `${newValue}ch`);
@@ -162,7 +156,7 @@ export default function TextFieldMixin(Base) {
 
         --descriptor-opacity: 0.5;
         --mdw-ink: var(--mdw-color__primary);
-        --mdw-bg: var(--mdw-color__surface-variant);
+        --mdw-bg: var(--mdw-color__surface-container-highest);
 
         --mdw-type__font: var(--mdw-typescale__body-large__font);
         --mdw-type__letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
@@ -190,18 +184,15 @@ export default function TextFieldMixin(Base) {
       }
 
       /** Guard against bleed */
-      :host([label][outlined]) {
+      #shape[label][outlined] {
         --mdw-shape__size__top-start-size: min(var(--mdw-shape__size), 12px);
         --mdw-shape__size__bottom-start-size: min(var(--mdw-shape__size), 12px);
         --mdw-shape__size__top-end-size: min(var(--mdw-shape__size), 12px);
         --mdw-shape__size__bottom-end-size: min(var(--mdw-shape__size), 12px);
-      }
-
-      #label[label][outlined] {
         -webkit-mask-box-image-width: min(var(--mdw-shape__size), 12px);
       }
 
-      #label {
+      #shape {
         position: relative;
 
         display: flex;
@@ -209,9 +200,6 @@ export default function TextFieldMixin(Base) {
         align-items: center;
         overflow: visible;
 
-        padding-inline-start: 16px;
-        padding-inline-end: 16px;
-
         cursor: inherit;
 
         z-index: 0;
@@ -227,12 +215,16 @@ export default function TextFieldMixin(Base) {
         transition: none 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
       }
 
-      #label:is([filled],[color]) {
+      #shape:where([filled],[outlined]) {
+        padding-inline: 16px;
+      }
+
+      #shape:where([filled],[color]) {
         background-color: rgb(var(--mdw-bg));
         color: rgb(var(--mdw-color__on-surface));
       }
 
-      #label[outlined] {
+      #shape[outlined] {
         background-color: transparent;
       }
 
@@ -245,19 +237,19 @@ export default function TextFieldMixin(Base) {
         color: rgb(var(--mdw-ink))
       }
 
-      #label[icon] {
+      #shape:where([filled],[outlined])[icon] {
         padding-inline-start: 12px;
       }
 
-      #label[trailing-icon] {
+      #shape[trailing-icon] {
         padding-inline-end: 12px;
       }
 
-      #label[focused] {
+      #shape[focused] {
         transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
       }
 
-      #label[shape-top] {
+      #shape[shape-top] {
         --mdw-shape__size__bottom-start-size: 0px;
         --mdw-shape__size__bottom-end-size: 0px;
         --mdw-shape__mask: linear-gradient(transparent 50%, black 50%);
@@ -701,7 +693,7 @@ export default function TextFieldMixin(Base) {
         padding: 0;
       }
 
-      #label[label][filled] {
+      #shape[label][filled] {
         align-items: flex-start;
       }
 
@@ -753,8 +745,8 @@ export default function TextFieldMixin(Base) {
       }
 
       /* stylelint-disable-next-line selector-max-compound-selectors */
-      #label[disabled],
-      #label[disabled] #control {
+      #shape[disabled],
+      #shape[disabled] #control {
         cursor: not-allowed;
       }
 
@@ -778,7 +770,7 @@ export default function TextFieldMixin(Base) {
         color: rgba(var(--mdw-color__on-surface), 0.38);
       }
 
-      #label[disabled] {
+      #shape[disabled] {
         background-color: rgba(var(--mdw-color__on-surface), calc(0.04));
         color: rgba(var(--mdw-color__on-surface), 0.38);
       }
@@ -787,7 +779,7 @@ export default function TextFieldMixin(Base) {
         color: rgba(var(--mdw-color__on-surface), 0.38);
       }
 
-      #label[disabled][outlined] {
+      #shape[disabled][outlined] {
         background-color: transparent;
       }
     

package/mixins/ThemableMixin.js

@@ -3,62 +3,50 @@
  */
 export default function ThemableMixin(Base) {
   return Base
-    .extend()
     .observe({
       color: 'string',
       ink: 'string',
-      block: 'boolean',
       typeStyle: 'string',
     })
+    .css`${
+    ThemableMixin.PALETTES.map((palette) => [
+      `:host([color="${palette}"]){`,
+      `--mdw-bg: var(--mdw-color__${palette});`,
+      `--mdw-ink: var(--mdw-color__on-${palette});`,
+      '}',
+      `:host([color="${palette}-container"]){`,
+      `--mdw-bg: var(--mdw-color__${palette}-container);`,
+      `--mdw-ink: var(--mdw-color__on-${palette}-container);`,
+      '}',
+    ].join('')).join('')}`
     .css`
-      :host([color="primary"]) {
-        --mdw-bg: var(--mdw-color__primary);
-        --mdw-ink: var(--mdw-color__on-primary);
+      :host([color="background"]) {
+        --mdw-bg: var(--mdw-color__background);
+        --mdw-ink: var(--mdw-color__on-background);
       }
-      
-      :host([color="primary-container"]) {
-        --mdw-bg: var(--mdw-color__primary-container);
-        --mdw-ink: var(--mdw-color__on-primary-container);
+
+      :host([color="surface-dim"]) {
+        --mdw-bg: var(--mdw-color__surface-dim);
       }
-      
-      :host([color="secondary"]) {
-        --mdw-bg: var(--mdw-color__secondary);
-        --mdw-ink: var(--mdw-color__on-secondary);
+
+      :host([color="surface-bright"]) {
+        --mdw-bg: var(--mdw-color__surface-bright);
       }
-      
-      :host([color="secondary-container"]) {
-        --mdw-bg: var(--mdw-color__secondary-container);
-        --mdw-ink: var(--mdw-color__on-secondary-container);
-      }
-      
-      :host([color="tertiary"]) {
-        --mdw-bg: var(--mdw-color__tertiary);
-        --mdw-ink: var(--mdw-color__on-tertiary);
+
+      :host([color="surface-container-lowest"]) {
+        --mdw-bg: var(--mdw-color__surface-container-lowest);
       }
-      
-      :host([color="tertiary-container"]) {
-        --mdw-bg: var(--mdw-color__tertiary-container);
-        --mdw-ink: var(--mdw-color__on-tertiary-container);
+
+      :host([color="surface-container-low"]) {
+        --mdw-bg: var(--mdw-color__surface-container-low);
       }
-      
-      :host([color="error"]) {
-        --mdw-bg: var(--mdw-color__error);
-        --mdw-ink: var(--mdw-color__on-error);
-      }
-      
-      :host([color="error-container"]) {
-        --mdw-bg: var(--mdw-color__error-container);
-        --mdw-ink: var(--mdw-color__on-error-container);
-      }
-      
-      :host([color="background"]) {
-        --mdw-bg: var(--mdw-color__background);
-        --mdw-ink: var(--mdw-color__on-background);
+
+      :host([color="surface-container-high"]) {
+        --mdw-bg: var(--mdw-color__surface-container-high);
       }
       
-      :host([color^="surface"]) {
-        --mdw-bg: var(--mdw-color__surface);
-        --mdw-ink: var(--mdw-color__on-surface);
+      :host([color="surface-container-highest"]) {
+        --mdw-bg: var(--mdw-color__surface-container-highest);
       }
       
       /* Quality-of-life */
@@ -67,7 +55,7 @@ export default function ThemableMixin(Base) {
       }
       
       :host([color$="variant"]) {
-        --mdw-bg: var(--mdw-color__surface-variant);
+        --mdw-bg: var(--mdw-color__surface-container-highest);
         --mdw-ink: var(--mdw-color__on-surface-variant);
       }
       
@@ -84,49 +72,27 @@ export default function ThemableMixin(Base) {
         /* background-color: rgba(var(--mdw-color__on-surface), 0.12); */
         /* color: rgba(var(--mdw-color__on-surface), 0.38); */
       }
-      
+      `
+    .css`${
+    ThemableMixin.PALETTES.map((palette) => [
+      `:host([ink="${palette}"]){`,
+      `--mdw-ink: var(--mdw-color__${palette});`,
+      '}',
+      `:host([ink="on-${palette}-container"]){`,
+      `--mdw-ink: var(--mdw-color__on-${palette}-container);`,
+      '}',
+    ].join('')).join('')}`
+    .css`
       :host([ink="inverse-primary"]) {
         --mdw-ink: var(--mdw-color__inverse-primary);
       }
-      
-      :host([ink="primary"]) {
-        --mdw-ink: var(--mdw-color__primary);
-      }
-      
-      :host([ink="on-primary-container"]) {
-        --mdw-ink: var(--mdw-color__on-primary-container);
-      }
-      
-      :host([ink="secondary"]) {
-        --mdw-ink: var(--mdw-color__secondary);
-      }
-      
-      :host([ink="on-secondary-container"]) {
-        --mdw-ink: var(--mdw-color__on-secondary-container);
-      }
-      
-      :host([ink="tertiary"]) {
-        --mdw-ink: var(--mdw-color__tertiary);
-      }
-      
-      :host([ink="on-tertiary-container"]) {
-        --mdw-ink: var(--mdw-color__on-tertiary-container);
-      }
-      
-      :host([ink="error"]) {
-        --mdw-ink: var(--mdw-color__error);
-      }
-      
+
       :host([ink="outline"]) {
         --mdw-ink: var(--mdw-color__outline);
       }
       
-      :host([ink="on-surface"]) {
-        --mdw-ink: var(--mdw-color__on-surface);
-      }
-      
-      :host([ink="surface-variant"]) {
-        --mdw-ink: var(--mdw-color__surface-variant);
+      :host([ink="surface-container-highest"]) {
+        --mdw-ink: var(--mdw-color__surface-container-highest);
       }
       
       :host([ink="on-surface-variant"]) {
@@ -140,80 +106,36 @@ export default function ThemableMixin(Base) {
       :host([ink="inherit"]) {
         --mdw-ink: inherit;
       }
-      
-      :host([type-style|="display"]) {
-        --mdw-type__font: var(--mdw-typescale__display-large__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__display-large__letter-spacing);
-      }
-      
-      :host([type-style="display-medium"]) {
-        --mdw-type__font: var(--mdw-typescale__display-medium__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__display-medium__letter-spacing);
-      }
-      
-      :host([type-style="display-small"]) {
-        --mdw-type__font: var(--mdw-typescale__display-small__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__display-small__letter-spacing);
-      }
-      
-      :host([type-style|="headline"]) {
-        --mdw-type__font: var(--mdw-typescale__headline-large__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__headline-large__letter-spacing);
-      }
-      
-      :host([type-style="headline-medium"]) {
-        --mdw-type__font: var(--mdw-typescale__headline-medium__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__headline-medium__letter-spacing);
-      }
-      
-      :host([type-style="headline-small"]) {
-        --mdw-type__font: var(--mdw-typescale__headline-small__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
-      }
-      
-      :host([type-style|="title"]) {
-        --mdw-type__font: var(--mdw-typescale__title-large__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__title-large__letter-spacing);
-      }
-      
-      :host([type-style="title-medium"]) {
-        --mdw-type__font: var(--mdw-typescale__title-medium__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__title-medium__letter-spacing);
-      }
-      
-      :host([type-style="title-small"]) {
-        --mdw-type__font: var(--mdw-typescale__title-small__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__title-small__letter-spacing);
-      }
-      
-      :host([type-style|="label"]) {
-        --mdw-type__font: var(--mdw-typescale__label-large__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
-      }
-      
-      :host([type-style="label-medium"]) {
-        --mdw-type__font: var(--mdw-typescale__label-medium__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
-      }
-      
-      :host([type-style="label-small"]) {
-        --mdw-type__font: var(--mdw-typescale__label-small__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__label-small__letter-spacing);
-      }
-      
-      :host([type-style|="body"]) {
-        --mdw-type__font: var(--mdw-typescale__body-large__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
-      }
-      
-      :host([type-style="body-medium"]) {
-        --mdw-type__font: var(--mdw-typescale__body-medium__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
-      }
-      
-      :host([type-style="body-small"]) {
-        --mdw-type__font: var(--mdw-typescale__body-small__font);
-        --mdw-type__letter-spacing: var(--mdw-typescale__body-small__letter-spacing);
-      }    
-    `;
+    `
+    .css`${
+    ThemableMixin.TYPE_STYLES.map((typeStyle) => [
+      `:host([type-style|="${typeStyle}"]) {`,
+      `--mdw-type__font: var(--mdw-typescale__${typeStyle}-large__font);`,
+      `--mdw-type__letter-spacing: var(--mdw-typescale__${typeStyle}-large__letter-spacing);`,
+      '}',
+      `:host([type-style="${typeStyle}-medium"]) {`,
+      `--mdw-type__font: var(--mdw-typescale__${typeStyle}-medium__font);`,
+      `--mdw-type__letter-spacing: var(--mdw-typescale__${typeStyle}-medium__letter-spacing);`,
+      '}',
+      `:host([type-style="${typeStyle}-small"]) {`,
+      `--mdw-type__font: var(--mdw-typescale__${typeStyle}-small__font);`,
+      `--mdw-type__letter-spacing: var(--mdw-typescale__${typeStyle}-small__letter-spacing);`,
+      '}',
+    ].join(''))}`;
 }
+
+ThemableMixin.PALETTES = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'error',
+  'surface',
+];
+
+ThemableMixin.TYPE_STYLES = [
+  'display',
+  'headline',
+  'title',
+  'label',
+  'body',
+];

package/mixins/TooltipTriggerMixin.js

@@ -321,24 +321,18 @@ export default function TooltipTriggerMixin(Base) {
 
       let anchorResult;
       for (const preference of preferences) {
-        anchorResult = canAnchorPopup({
+        const result = canAnchorPopup({
           ...anchorOptions,
           ...preference,
         });
-        if (anchorResult) break;
-      }
-
-      // console.log({ anchorResult });
-      if (!anchorResult) {
-        anchorResult = canAnchorPopup({
-          ...anchorOptions,
-          ...preferences[0],
-          force: true,
-        });
+        if (!anchorResult || anchorResult.visibility < result.visibility) {
+          anchorResult = result;
+        }
+        if (result.visibility === 1) break;
       }
 
-      this.#tooltip.style.setProperty('top', `${anchorResult.pageY}px`);
-      this.#tooltip.style.setProperty('left', `${anchorResult.pageX}px`);
+      this.#tooltip.style.setProperty('top', `${anchorResult.top}px`);
+      this.#tooltip.style.setProperty('left', `${anchorResult.left}px`);
       this.#tooltip.style.setProperty('margin', '0');
       this.#tooltip.style.setProperty('transform-origin', `${anchorResult.transformOriginY} ${anchorResult.transformOriginX}`);
 

package/mixins/TouchTargetMixin.js

@@ -1,12 +1,13 @@
 /** @param {typeof import('../core/CustomElement.js').default} Base */
 export default function TouchTargetMixin(Base) {
   return Base
-    .extend()
-    .html/* html */`<div id=touch-target class=touch-target></div>`
+    .html`<div id=touch-target class=touch-target></div>`
     .css`
+        /* stylelint-disable liberty/use-logical-spec */
       .touch-target {
         position: absolute;
-        inset: 50%;
+        top: 50%;
+        left: 50%;
         /* --mdw-device-pixel-ratio: 1; */
       
         block-size: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shortfuse/materialdesignweb",
-  "version": "0.7.6",
+  "version": "0.8.0",
   "description": "Material Design for Web",
   "type": "module",
   "bin": {
@@ -13,6 +13,7 @@
     "docs": "node build/esbuild.js docs/demo.js --outdir=docs --minify --metafile",
     "watch": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile",
     "serve": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile --serve --live",
+    "sample": "node build/esbuild.js index.js --outdir=docs --watch --metafile --serve --live",
     "pretest": "eslint --ignore-path .gitignore",
     "test": "web-test-runner \"test/**/*.test.js\" --node-resolve",
     "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --watch"
@@ -53,6 +54,7 @@
     "./components/*.js",
     "./utils/metadata.js",
     "./theming/loader.js",
+    "./docs/custom.js",
     "./docs/demo/*.js"
   ],
   "bugs": {
@@ -61,13 +63,14 @@
   "homepage": "https://github.com/clshortfuse/materialdesignweb#readme",
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@playwright/test": "^1.32.3",
     "@types/html-minifier-terser": "^7.0.0",
     "@types/mocha": "^10.0.1",
     "@types/tap": "^15.0.7",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
-    "@web/test-runner": "^0.15.2",
-    "@web/test-runner-playwright": "^0.9.0",
+    "@web/test-runner": "^0.16.1",
+    "@web/test-runner-playwright": "^0.10.0",
     "acorn": "^8.8.2",
     "acorn-walk": "^8.2.0",
     "browserslist-to-esbuild": "^1.1.1",
@@ -79,18 +82,19 @@
     "eslint-plugin-compat": "^4.0.2",
     "eslint-plugin-github": "^4.3.5",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsdoc": "^40.0.3",
+    "eslint-plugin-jsdoc": "^43.1.1",
     "eslint-plugin-sort-class-members": "^1.15.2",
     "eslint-plugin-unicorn": "^46.0.0",
     "html-minifier-terser": "^7.1.0",
     "http-server": "^14.1.1",
     "magic-string": "^0.30.0",
+    "playwright": "^1.32.2",
     "postcss-styled": "^0.34.0",
     "postcss-styled-syntax": "^0.4.0",
     "stylelint": "^15.2.0",
     "stylelint-no-unsupported-browser-features": "github:clshortfuse/stylelint-no-unsupported-browser-features#0a51157",
     "stylelint-order": "^6.0.2",
     "stylelint-use-logical-spec": "^5.0.0",
-    "typescript": "^5.0.2"
+    "typescript": "5.1"
   }
 }

package/theming/index.js

@@ -1,5 +1,5 @@
 import { COLOR_KEYWORDS } from '../utils/color_keywords.js';
-import { getScheme } from '../utils/hct/helper.js';
+import { getScheme } from '../utils/material-color/helper.js';
 import { svgToCSSURL } from '../utils/svg.js';
 
 /**

package/theming/themableMixinLoader.js

@@ -0,0 +1,12 @@
+/** Import this first to ensure ThemableMixin includes custom palettes */
+
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+ThemableMixin.PALETTES.push(
+  ...(
+    (new URL(import.meta.url).searchParams)
+      .getAll('custom')
+      .flatMap((c) => c.split(','))
+      .map((c) => c.split(':')[0])
+  ),
+);