@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/mixins/TextFieldMixin.js

@@ -5,6 +5,7 @@ import ShapeMixin from './ShapeMixin.js';
 /** @typedef {import('../core/CustomElement.js').default} CustomElement */
 
 /**
+ * Composes a text field with label, supporting text, icons and control wiring.
  * @param {ReturnType<import('./ControlMixin.js').default>} Base
  */
 export default function TextFieldMixin(Base) {
@@ -12,21 +13,38 @@ export default function TextFieldMixin(Base) {
     .mixin(DensityMixin)
     .mixin(ShapeMixin)
     .set({
+      /** Show an internal visual state layer element */
       stateLayer: true,
     })
     .observe({
+      /** Input type (text, password, email, etc.) */
       type: { empty: 'text' },
+      /** Leading icon key/name to render inside the field */
       icon: 'string',
+      /** Variation of the icon display (e.g., filled) */
+      iconVariation: 'string',
+      /** Floating label text for the field */
       label: 'string',
+      /** When true, use filled styling */
       filled: 'boolean',
+      /** When true, use outlined styling */
       outlined: 'boolean',
+      /** Prefix text shown before the input */
       inputPrefix: 'string',
+      /** Suffix text shown after the input */
       inputSuffix: 'string',
+      /** Trailing icon key/name */
       trailingIcon: 'string',
+      /** Ink/color token for the trailing icon */
       trailingIconInk: 'string',
+      /** Accessible label for the trailing icon */
+      trailingIconLabel: 'string',
+      /** Supporting/helper text shown beneath the field */
       supporting: 'string',
+      /** Error message text */
       error: 'string',
-      placeholder: { nullParser: String }, // DOMString
+      /** Placeholder text (DOMString) */
+      placeholder: { nullParser: String },
     })
     .observe({
       erroredState({ error, _invalid, _userInteracted }) { return _userInteracted && Boolean(error || _invalid); },
@@ -52,7 +70,27 @@ export default function TextFieldMixin(Base) {
         return label && (filled || outlined);
       },
     })
+    .expressions({
+      _shapeShapeTop({ shapeTop, filled }) {
+        return shapeTop || filled;
+      },
+      computedIconVariation({ iconVariation, outlined }) {
+        return iconVariation ?? (outlined ? null : 'filled');
+      },
+    })
     .html`
+      <div id=shape role=none filled={filled} icon={icon} trailing-icon={trailingIcon}
+      populated={populatedState} focused={focusedState} label={label} outlined={outlined}
+      shape-top={_shapeShapeTop}>
+        <mdw-icon mdw-if={icon} id=icon aria-hidden=true disabled={disabledState} icon={icon} variation={computedIconVariation}></mdw-icon>
+        <div id=inline role=none filled={filled} icon={icon} trailing-icon={trailingIcon}
+          populated={populatedState} focused={focusedState} label={label} outlined={outlined}>
+          <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>
+        </div>
+        <mdw-icon-button tabindex=-1 disabled={disabledState} mdw-if={trailingIcon} id=trailing-icon ink={trailingIconInk} disabled={disabledState} icon={trailingIcon}>{trailingIconLabel}</mdw-icon-button>
+        <div mdw-if={filled} id=indicator aria-hidden=true focused={focusedState} hovered={hoveredState} errored={erroredState} disabled={disabledState}></div>
+      </div>
       <div id=label-text mdw-if={_showLabelText} aria-hidden=true
         outlined={outlined}
         populated={populatedState}
@@ -65,54 +103,37 @@ export default function TextFieldMixin(Base) {
         {computeSupportingText}
         <slot id=supporting-slot name=supporting></slot>
       </div>
+      
     `
+    .recompose(({ html, refs: { control, outline, state, shape, inline } }) => {
+      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');
+
+      state.setAttribute('mdw-if', '{!outlined}');
+      outline.append(html`
+        <div id=outline-left class=outline-section focused={focusedState}></div>
+        <div id=gap label={label} populated={populatedState} focused={focusedState}>
+          <div id=gap-slot focused={focusedState}></div>
+          <span id=gap-label>{label}</span>
+        </div>
+        <div id=outline-right class=outline-section focused={focusedState}></div>
+      `);
+      outline.setAttribute('label', '{label}');
+      outline.setAttribute('errored', '{erroredState}');
+      shape.prepend(outline, state);
+      inline.prepend(control);
+    })
     .on({
-      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');
-
-        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 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('errored', '{erroredState}');
-        outlineLeft.after(html`
-          <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>
-        `);
-
-        outlineLeft.setAttribute('focused', '{focusedState}');
-        outlineRight.setAttribute('focused', '{focusedState}');
-      },
+      // @ts-ignore TODO: Missing observable size property
       sizeChanged(oldValue, newValue) {
-        this.refs.control.style.setProperty('--size', `${newValue}ch`);
+        // @ts-ignore TODO: Missing {this} context
+        const control = /** @type {HTMLElement} */ (this.refs.control);
+        control.style.setProperty('--size', `${newValue}ch`);
       },
     })
     .css`
@@ -163,6 +184,8 @@ export default function TextFieldMixin(Base) {
 
         display: inline-block;
 
+        border-radius: 0;
+
         /* State layer */
         color: rgb(var(--mdw-color__on-surface));
 
@@ -170,14 +193,6 @@ export default function TextFieldMixin(Base) {
         letter-spacing: var(--mdw-type__letter-spacing);
       }
 
-      :host([icon]) {
-        --padding-inline-start: 12px;
-      }
-
-      :host([trailing-icon]) {
-        --padding-inline-end: 12px;
-      }
-
       :host(:is([color], [ink])) {
         background-color: transparent;
         color: rgb(var(--mdw-color__on-surface));
@@ -189,7 +204,6 @@ export default function TextFieldMixin(Base) {
         --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);
-        -webkit-mask-box-image-width: min(var(--mdw-shape__size), 12px);
       }
 
       #shape {
@@ -197,15 +211,17 @@ export default function TextFieldMixin(Base) {
 
         display: flex;
 
-        align-items: center;
-        overflow: visible;
-
         cursor: inherit;
 
         z-index: 0;
 
         background-color: transparent;
 
+        border-start-start-radius: calc(var(--mdw-shape__size__top-start-size));
+        border-start-end-radius: calc(var(--mdw-shape__size__top-end-size));
+        border-end-start-radius: calc(var(--mdw-shape__size__bottom-start-size));
+        border-end-end-radius: calc(var(--mdw-shape__size__bottom-end-size));
+
         font-weight: inherit;
         font-size: inherit;
         line-height: inherit;
@@ -215,10 +231,28 @@ export default function TextFieldMixin(Base) {
         transition: none 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
       }
 
-      #shape:where([filled],[outlined]) {
-        padding-inline: 16px;
+      #inline {
+        display: flex;
+
+        align-items: center;
+        overflow: visible;
+
+        flex: 1;
+        padding-block: var(--control__margin-top) var(--control__margin-bottom);
+
+        cursor: inherit;
+
+        font-weight: inherit;
+        font-size: inherit;
+        line-height: inherit;
+        font-family: inherit;
+        letter-spacing: inherit;
+
+        transition: none 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
       }
 
+      
+
       #shape:where([filled],[color]) {
         background-color: rgb(var(--mdw-bg));
         color: rgb(var(--mdw-color__on-surface));
@@ -237,14 +271,6 @@ export default function TextFieldMixin(Base) {
         color: rgb(var(--mdw-ink))
       }
 
-      #shape:where([filled],[outlined])[icon] {
-        padding-inline-start: 12px;
-      }
-
-      #shape[trailing-icon] {
-        padding-inline-end: 12px;
-      }
-
       #shape[focused] {
         transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
       }
@@ -252,7 +278,6 @@ export default function TextFieldMixin(Base) {
       #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%);
       }
 
       #prefix,
@@ -277,16 +302,15 @@ export default function TextFieldMixin(Base) {
         inset: auto;
         align-self: flex-start;
 
-        display: inline;
+        display: inline-block;
 
         box-sizing: border-box;
 
         block-size: auto;
-        min-block-size: none;
+        min-block-size: 0;
         inline-size: 100%;
-        min-inline-size: none;
+        min-inline-size: 0;
         flex: 1;
-        border-block-start: solid var(--control__margin-top) transparent;
         border-block-end: solid var(--control__margin-bottom) transparent;
         padding-block: var(--control__padding-top) var(--control__padding-bottom);
 
@@ -296,7 +320,7 @@ export default function TextFieldMixin(Base) {
 
         transform: none;
 
-        visibility: visible;
+        visibility: inherit;
 
         background-color: transparent;
         border-color: transparent;
@@ -308,6 +332,7 @@ export default function TextFieldMixin(Base) {
         line-height: inherit;
         font-family: inherit;
         letter-spacing: inherit;
+        text-align: initial;
 
         transition-duration: inherit;
         transition-property: color;
@@ -317,7 +342,6 @@ export default function TextFieldMixin(Base) {
       #suffix,
       #prefix {
         /* Symmetrical to allow centering */
-        margin-block: var(--control__margin-top) var(--control__margin-bottom);
         padding-block: var(--control__padding-top) var(--control__padding-bottom);
       }
 
@@ -342,7 +366,7 @@ export default function TextFieldMixin(Base) {
       #icon {
         order: -2;
 
-        margin-inline-end: 16px;
+        margin-inline-start: 12px;
 
         font-size: 24px;
       }
@@ -358,7 +382,8 @@ export default function TextFieldMixin(Base) {
       #trailing-icon {
         order: 2;
 
-        margin-inline-start: 16px;
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        margin-inline-end: 12px;
       }
 
       #indicator {
@@ -465,6 +490,31 @@ export default function TextFieldMixin(Base) {
 
       /** Outlined **/
 
+      #outline {
+        position: absolute;
+        inset: 0;
+
+        border-style: solid;
+        border-width: 0px;
+
+        pointer-events: none;
+
+        border-color: currentColor;
+        border-radius: inherit;
+        color: rgb(var(--mdw-color__outline));
+      }
+
+      #outline:is([pressed],[focused]) {
+        color: rgb(var(--mdw-ink));
+
+        transition-delay: 0;
+        transition-duration: 0;
+      }
+      
+      #outline[disabled] {
+        color: rgba(var(--mdw-color__on-surface), 0.12);
+      }
+
       #outline::before {
         content: none;
       }
@@ -601,73 +651,6 @@ export default function TextFieldMixin(Base) {
         border-block-start-width: 2px;
       }
 
-      @supports(-webkit-mask-box-image: none) {
-        #outline[focused] {
-          /** Fake 2px 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);
-        }
-
-        #outline::before {
-          content: '';
-
-          position: absolute;
-          inset: 0;
-
-          grid-column: calc(2 - var(--mdw-dir, 1)) / span 1;
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          margin-right: -0.99px;
-          border: none;
-
-          background-color: currentColor;
-          -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-            8 fill /
-            auto
-            stretch;
-          -webkit-mask-box-image-width: auto 0 auto auto;
-        }
-
-        #outline::after {
-          grid-column: calc(2 + var(--mdw-dir, 1)) / span 1;
-          grid-row: 1;
-
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          margin-left: -0.99px;
-          -webkit-mask-box-image-width: auto auto auto 0;
-        }
-
-        .outline-section {
-          border: none;
-        }
-
-        #gap::after {
-          border: none;
-
-          background-color: currentColor;
-          -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-            8 fill /
-            auto
-            stretch;
-          -webkit-mask-box-image-width: 0 0 auto 0;
-        }
-
-        #gap-slot::before,
-        #gap-slot::after {
-          border: none;
-
-          background-color: currentColor;
-
-          -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-            8 fill /
-            auto
-            stretch;
-          -webkit-mask-box-image-width: auto 0 0 0;
-        }
-      }
-
       #gap-slot::before {
         /* stylelint-disable-next-line liberty/use-logical-spec */
         margin-right: -0.99px;
@@ -693,7 +676,7 @@ export default function TextFieldMixin(Base) {
         padding: 0;
       }
 
-      #shape[label][filled] {
+      #inline[label][filled] {
         align-items: flex-start;
       }
 

package/mixins/ThemableMixin.js

@@ -1,24 +1,67 @@
+import { PALETTES, TYPE_STYLES } from '../services/theme.js';
+
+const colorAttributeCSS = 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('');
+
+const inkAttributeCSS = PALETTES.map((palette) => [
+  `:host([ink="${palette}"]){`,
+  `--mdw-ink: var(--mdw-color__${palette});`,
+  '}',
+  `:host([ink="on-${palette}"]){`,
+  `--mdw-ink: var(--mdw-color__on-${palette});`,
+  '}',
+  `:host([ink="on-${palette}-container"]){`,
+  `--mdw-ink: var(--mdw-color__on-${palette}-container);`,
+  '}',
+].join('')).join('');
+
+const typeStyleAttributeCSS = 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('')).join('');
+
 /**
+ * Adds theming attributes (`color`, `ink`, `typeStyle`) that map to CSS tokens.
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
 export default function ThemableMixin(Base) {
   return Base
     .observe({
+      /**
+       * Palette or surface token used to select background/ink tokens.
+       * Examples: 'primary', 'background', 'surface-container-low'.
+       */
       color: 'string',
+      /**
+       * Explicit ink override token (e.g. 'outline', 'on-primary', 'inverse-on-surface', 'inherit').
+       * Maps to `--mdw-ink`.
+       */
       ink: 'string',
+      /**
+       * Typographic style shortcut that maps to type scale variables
+       * (e.g. 'headline-large', 'body-medium').
+       */
       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(colorAttributeCSS)
     .css`
       :host([color="background"]) {
         --mdw-bg: var(--mdw-color__background);
@@ -51,6 +94,7 @@ export default function ThemableMixin(Base) {
       
       /* Quality-of-life */
       :host([color="surface-primary"]) {
+        --mdw-bg: var(--mdw-color__surface);
         --mdw-ink: var(--mdw-color__primary);
       }
       
@@ -67,21 +111,8 @@ export default function ThemableMixin(Base) {
       :host([color="inverse-primary"]) {
         --mdw-ink: var(--mdw-color__inverse-primary);
       }
-      
-      :host([color][disabled]) {
-        /* 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(inkAttributeCSS)
     .css`
       :host([ink="inverse-primary"]) {
         --mdw-ink: var(--mdw-color__inverse-primary);
@@ -107,35 +138,5 @@ export default function ThemableMixin(Base) {
         --mdw-ink: inherit;
       }
     `
-    .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(''))}`;
+    .css(typeStyleAttributeCSS);
 }
-
-ThemableMixin.PALETTES = [
-  'primary',
-  'secondary',
-  'tertiary',
-  'error',
-  'surface',
-];
-
-ThemableMixin.TYPE_STYLES = [
-  'display',
-  'headline',
-  'title',
-  'label',
-  'body',
-];