@shortfuse/materialdesignweb 0.7.6 → 0.8.0

package/components/RadioIcon.js

@@ -3,9 +3,9 @@ import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(ShapeMixin)
-  .extend()
   .observe({
     selected: 'boolean',
     icon: 'string',
@@ -21,12 +21,12 @@ export default CustomElement
       set(value) { this.selected = value; },
     },
   })
-  .html/* html */`
+  .html`
     <div id=inner-shape class=shape selected={selected}></div>
   `.on({
     composed() {
       const { outline } = this.refs;
-      outline.removeAttribute('_if');
+      outline.removeAttribute('mdw-if');
       outline.setAttribute('selected', '{selected}');
     },
   })

package/components/Ripple.js

@@ -34,8 +34,8 @@ export default CustomElement
             minBlockSize: `${_radius}px`,
             minInlineSize: `${_radius}px`,
             boxShadow: `0 0 calc(0.10 * ${_radius}px) calc(0.10 * ${_radius}px) currentColor`,
-            left: `calc(50% + ${_positionX}px)`,
             top: `calc(50% + ${_positionY}px)`,
+            left: `calc(50% + ${_positionX}px)`,
           },
         };
       },
@@ -109,6 +109,7 @@ export default CustomElement
     },
   })
   .css`
+    /* stylelint-disable liberty/use-logical-spec */
     :host {
       --enter-delay: 80ms;
       --touch-down-acceleration: 1024;
@@ -121,9 +122,7 @@ export default CustomElement
     
       --size: 0;
       position: absolute;
-      /* stylelint-disable-next-line liberty/use-logical-spec */
       top: 50%;
-      /* stylelint-disable-next-line liberty/use-logical-spec */
       left: 50%;
     
       display: block;

package/components/Search.js

@@ -0,0 +1,85 @@
+import TopAppBar from './TopAppBar.js';
+
+/* @implements {HTMLSelectElement} */
+export default TopAppBar
+  .extend()
+  .undefine('headline')
+  // .undefine('_headlineOpacity')
+  .undefine('size')
+  .undefine('_headlineStyle')
+  .observe({
+    placeholder: { type: 'string', empty: 'Search' },
+    color: { empty: 'surface-container-high' },
+    shapeStyle: { empty: 'full' },
+    kbdNav: { empty: 'false' },
+  })
+  .define({
+    /** @return {HTMLInputElement} */
+    input() { return this.refs.input; },
+    value: {
+      get() { return this.refs.input.value; },
+      set(value) {
+        this.refs.input.value = value;
+      },
+    },
+  })
+  .html`
+    <mdw-input id=input placeholder={placeholder} aria-label={placeholder}></mdw-input>
+  `
+  .css`
+    :host {
+      --mdw-bg: var(--mdw-color__surface-container-high);
+      padding-block: 16px;
+    }
+
+    #surface {
+      background-color: transparent;
+    }
+
+    #leading:not([slotted]),
+    #trailing:not([slotted]) {
+      display: none;
+    }
+
+    #shape {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      padding-inline: 16px;
+
+      background-color: rgb(var(--mdw-bg));
+    }
+
+    #input {
+      --mdw-state__hovered-opacity: 0;
+      flex: 1;
+    }
+  `
+  .methods({
+    /** @param {{currentTarget:HTMLSlotElement}} event */
+    onSlotChange({ currentTarget }) {
+      currentTarget.toggleAttribute('slotted', currentTarget.assignedNodes().length >= 0);
+    },
+  })
+  .childEvents({
+    leading: { slotchange: 'onSlotChange' },
+    trailing: { slotchange: 'onSlotChange' },
+    input: {
+      change(event) {
+        // Change events are not composed. Rethrow.
+        event.stopPropagation();
+        this.dispatchEvent(new Event('change', { bubbles: true }));
+      },
+    },
+  })
+  .on({
+    composed() {
+      const { companion, headline, input, surface } = this.refs;
+      companion.remove();
+      headline.replaceWith(input);
+      surface.removeAttribute('aria-labelledby');
+    },
+  })
+
+  .autoRegister('mdw-search');

package/components/SegmentedButton.js

@@ -23,7 +23,7 @@ export default Button
       `);
       shape.setAttribute('selected', '{checked}');
 
-      icon.removeAttribute('_if');
+      icon.removeAttribute('mdw-if');
       icon.setAttribute('has-icon', '{hasIcon}');
       icon.setAttribute('selected', '{checked}');
       outline.setAttribute('inner-segmented-button', '{innerSegmentedButton}');
@@ -74,10 +74,6 @@ export default Button
       background-color: rgb(var(--mdw-bg));
     }
 
-    #label[selected] {
-      color: rgb(var(--mdw-ink));
-    }
-
     #icons {
       position: relative;
 
@@ -132,10 +128,5 @@ export default Button
     #shape[disabled][selected] {
       background-color: rgba(var(--mdw-color__on-surface), 0.12);
     }
-
-    #label[disabled][selected] {
-      color: rgba(var(--mdw-color__on-surface), 0.38);
-    }
-
   `
   .autoRegister('mdw-segmented-button');

package/components/SegmentedButtonGroup.js

@@ -7,9 +7,9 @@ import SegmentedButton from './SegmentedButton.js';
 /** @typedef {'compact'} DeprecatedHTMLMenuElementProperties */
 
 export default Box
+  .extend()
   .mixin(KeyboardNav)
   .mixin(AriaReflectorMixin)
-  .extend()
   .define({
     kbdNavQuery() {
       return SegmentedButton.elementName;
@@ -22,15 +22,12 @@ export default Box
     slot: {
       slotchange() {
         this.refreshTabIndexes();
-        // eslint-disable-next-line github/array-foreach
-        this.kbdNavChildren.forEach((child, index, list) => {
-        /** @type {InstanceType<SegmentedButton>} */
-          (child).shapeStart = index === 0;
-          /** @type {InstanceType<SegmentedButton>} */
-          (child).innerSegmentedButton = index > 0 && index < list.length - 1;
-          /** @type {InstanceType<SegmentedButton>} */
-          (child).shapeEnd = index === list.length - 1;
-        });
+        const list = /** @type {NodeListOf<InstanceType<SegmentedButton>>} */ (this.kbdNavChildren);
+        for (const [index, child] of list.entries()) {
+          child.shapeStart = index === 0;
+          child.innerSegmentedButton = index > 0 && index < list.length - 1;
+          child.shapeEnd = index === list.length - 1;
+        }
       },
     },
   })
@@ -42,12 +39,21 @@ export default Box
       --mdw-ink: var(--mdw-color__on-secondary-container);
 
       display: inline-flex;
+      overflow-x: auto;
+      overflow-y: hidden;
     }
 
     :host([color]) {
       background-color: transparent;
     }
 
+    #slot {
+      display: grid;
+      grid-auto-flow: column;
+
+      flex: none;
+    }
+
   `
   .on({
     constructed() {

package/components/Select.js

@@ -6,11 +6,11 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 
 /* @implements {HTMLSelectElement} */
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(ControlMixin)
   .mixin(TextFieldMixin)
-  .extend()
   .observe({
     trailingIcon: { empty: 'arrow_drop_down' },
   })
@@ -27,7 +27,7 @@ export default CustomElement
     multiple: { value: false },
     size: { value: 1 },
   })
-  .html/* html */`<slot id=slot></slot>`
+  .html`<slot id=slot></slot>`
   .childEvents({
     slot: {
     /** @param {Event & {currentTarget:HTMLSlotElement}} event */
@@ -59,13 +59,13 @@ export default CustomElement
       display: none;
     }
     
-    #label {
+    #shape {
       padding: 0;
     
       cursor: pointer;
     }
     
-    #label[disabled] {
+    #shape[disabled] {
       cursor: not-allowed;
     }
     

package/components/Shape.js

@@ -3,8 +3,8 @@ import ShapeMixin from '../mixins/ShapeMixin.js';
 import Box from './Box.js';
 
 export default Box
-  .mixin(ShapeMixin)
   .extend()
+  .mixin(ShapeMixin)
   .on({
     composed() {
       const { shape, outline } = this.refs;

package/components/Slider.js

@@ -1,4 +1,5 @@
 import CustomElement from '../core/CustomElement.js';
+import { isRtl } from '../core/dom.js';
 import InputMixin from '../mixins/InputMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
@@ -29,10 +30,10 @@ function valueAsFraction(value, min, max) {
 }
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(InputMixin)
-  .extend()
   .set({
     stateLayer: true,
     type: 'range',
@@ -43,6 +44,7 @@ export default CustomElement
     _previewValue: { nullable: false },
     _roundedValue: 'float',
     _isHoveringThumb: 'boolean',
+    _lastDispatchedChangeValue: 'string',
   })
   .methods({
     /**
@@ -103,6 +105,9 @@ export default CustomElement
         const nMax = parseFloat(max, 100);
         const nStep = parseFloat(step, 1);
 
+        if (isRtl(this)) {
+          position = 1 - position;
+        }
         const currentValue = position * (nMax - nMin) + nMin;
         let roundedValue = Math.round(currentValue / nStep) * nStep;
 
@@ -121,7 +126,10 @@ export default CustomElement
 
       if (isTouch) return;
 
-      const fractionalValue = valueAsFraction(this.value, this.min, this.max);
+      let fractionalValue = valueAsFraction(this.value, this.min, this.max);
+      if (isRtl(this)) {
+        fractionalValue = 1 - fractionalValue;
+      }
       const thumbOffset = fractionalValue * clientWidth;
       const thumbMin = thumbOffset - 20;
       const thumbMax = thumbOffset + 20;
@@ -143,8 +151,9 @@ export default CustomElement
       if (input.disabled) return;
       event.preventDefault();
       input.valueAsNumber = this._roundedValue;
-      if (this._value !== input.value) {
-        this._value = input.value;
+      this._value = input.value;
+      if (this._lastDispatchedChangeValue !== this._value) {
+        this._lastDispatchedChangeValue = this._value;
         input.dispatchEvent(new Event('change', { bubbles: true }));
       }
     },
@@ -175,25 +184,27 @@ export default CustomElement
         `--value:${valueAsFraction(_previewValue, min, max)}`,
       ].filter(Boolean).join(';') || null;
     },
+    _thumbLabelHidden({ _isHoveringThumb, focusedState }) {
+      return (!_isHoveringThumb && !focusedState);
+    },
   })
+  .html`
+    <div id=track style={computeTrackStyle} aria-hidden=true disabled={disabledState}>
+      <div mdw-if={ticks} id=ticks></div>
+      <div id=track-active></div>
+      <div id=thumb-anchor>
+        <div id=thumb></div>
+        <div id=thumb-label
+          hidden={_thumbLabelHidden}
+          text={_previewValue}></div>
+      </div>
+    </div>
+  `
   .on({
-    composed({ template, html }) {
-      const { state, label, control } = this.refs;
-      template.append(html`
-        <div id=track style={computeTrackStyle} aria-hidden=true disabled={disabledState}>
-          <div _if={ticks} id=ticks></div>
-          <div id=track-active></div>
-          <div id=thumb-anchor>
-            <div id=thumb>
-              ${state}
-            </div>
-            <div id=thumb-label
-              hidden=${({ _isHoveringThumb, focusedState }) => (!_isHoveringThumb && !focusedState)} 
-              text={_previewValue}></div>
-          </div>
-        </div>
-      `);
-      label.removeAttribute('aria-labelledby');
+    composed() {
+      const { thumb, state, control } = this.refs;
+      thumb.append(state);
+      control.removeAttribute('aria-labelledby');
     },
     valueChanged(oldValue, newValue) {
       this._previewValue = newValue;
@@ -220,20 +231,6 @@ export default CustomElement
       background-color: transparent;
     }
 
-    #label {
-      position: absolute;
-      inset: 0;
-
-      display: block;
-
-      cursor: pointer;
-
-      z-index: 1;
-
-      /* border-radius: 50%; */
-      color: rgb(var(--mdw-bg));
-    }
-
     #control {
       inset:0;
 
@@ -246,12 +243,11 @@ export default CustomElement
 
       appearance: none;
 
-      cursor: inherit;
+      cursor: pointer;
 
       transform: none;
 
       background-color: transparent;
-      color: inherit;
     }
 
     #control::-webkit-slider-runnable-track {
@@ -323,7 +319,7 @@ export default CustomElement
       pointer-events: none;
       user-select: none;
 
-      background-color: rgb(var(--mdw-color__surface-variant));
+      background-color: rgb(var(--mdw-color__surface-container-highest));
       border-radius: inherit;
     }
 
@@ -411,7 +407,7 @@ export default CustomElement
       inset: 0;
 
       transform: scaleX(var(--value));
-      transform-origin: 0 0;
+      transform-origin: calc(100% * calc(-0.5 * var(--mdw-dir, 1) + 0.5)) 0;
 
       background-color: rgb(var(--mdw-bg));
 
@@ -420,23 +416,23 @@ export default CustomElement
 
     #thumb-anchor {
       position: absolute;
-      inset-inline: 0;
+
+      inset-inline-start: calc(var(--value) * 100%);
 
       display: flex;
       align-items: flex-start;
       flex-direction: column;
 
-      inline-size: 1%;
-
-      transform: translateX(calc(var(--value) * 100 * 100%));
-      transform-origin: 0 0;
       z-index: 24;
 
-      will-change: transform;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      will-change: inset-inline-start, left, right;
     }
 
     #thumb-label {
       position: absolute;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 0;
       inset-block-end: 14px;
 
       display: flex;
@@ -496,16 +492,13 @@ export default CustomElement
       background-color: rgb(var(--mdw-bg));
     }
 
-    #track[disabled] {
-      background-color: rgb(var(--mdw-color__on-surface), calc(0.12 / 0.38));
-    }
-
-    #label[disabled],
     #track[disabled] {
       --mdw-bg: var(--mdw-color__on-surface);
       cursor: not-allowed;
 
       opacity: 0.38;
+
+      background-color: rgb(var(--mdw-color__on-surface), calc(0.12 / 0.38));
     }
   `
   .autoRegister('mdw-slider');

package/components/Snackbar.js

@@ -10,9 +10,9 @@ import './IconButton.js';
 import Surface from './Surface.js';
 
 export default Surface
+  .extend()
   .mixin(DensityMixin)
   .mixin(AriaReflectorMixin)
-  .extend()
   .set({
     _ariaRole: 'status',
     elevated: true,
@@ -46,10 +46,10 @@ export default Surface
       this.textContent = text;
     },
   })
-  .html/* html */`
+  .html`
     <div id=content></div>
-    <mdw-button _if={action} id=action class=button ink={actionInk} type-style={actionTypeStyle}>{action}</mdw-button>
-    <mdw-icon-button _if={closeButton} id=close class=button icon={closeIcon} ink={closeInk}>Close</mdw-button>
+    <mdw-button mdw-if={action} id=action class=button ink={actionInk} type-style={actionTypeStyle}>{action}</mdw-button>
+    <mdw-icon-button mdw-if={closeButton} id=close class=button icon={closeIcon} ink={closeInk}>Close</mdw-button>
   `
   .on({
     composed() {
@@ -76,7 +76,6 @@ export default Surface
     :host {
       --mdw-shape__size: var(--mdw-shape__small);
       --mdw-surface__shadow: var(--mdw-surface__shadow__3);
-      --mdw-surface__tint: var(--mdw-surface__tint__3);
       --mdw-shape__bg: rgb(var(--mdw-color__inverse-surface));
       --mdw-ink: var(--mdw-color__inverse-on-surface);
 

package/components/Surface.js

@@ -5,15 +5,15 @@ import SurfaceMixin from '../mixins/SurfaceMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(FlexableMixin)
   .mixin(SurfaceMixin)
   .mixin(ShapeMixin)
-  .html/* html */`<slot id=slot></slot>`
+  .html`<slot id=slot></slot>`
   .on({
     composed() {
-      const { surface, shape, surfaceTint } = this.refs;
-      shape.append(surfaceTint);
+      const { surface, shape } = this.refs;
       surface.append(shape);
     },
   })

package/components/Switch.js

@@ -6,12 +6,12 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 import TouchTargetMixin from '../mixins/TouchTargetMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(InputMixin) // Label as root
   .mixin(StateMixin)
   .mixin(TouchTargetMixin)
   // Switches have their own pressed animation (No ripple)
-  .extend()
   .set({
     type: 'checkbox',
     stateLayer: true,
@@ -24,25 +24,34 @@ export default CustomElement
     selectedSrc: 'string',
     unselectedSrc: 'string',
   })
+  .html`
+    <mdw-switch-icon id=switch
+      color={color} ink={ink} selected={checked} hovered={hoveredState}
+      focused={focusedState} pressed={pressedState} disabled={disabledState}
+      icon={icon}
+      selected-icon={selectedIcon}
+      unselected-icon={unselectedIcon}
+      src={src}
+      selected-src={selectedSrc}
+      unselected-src={unselectedSrc}
+      >
+    </mdw-switch-icon>
+    <slot id=slot></slot>
+  `
+  .rootEvents({
+    click(event) {
+      const { control } = this.refs;
+      if (event.target !== control) {
+        // Label-like click
+        event.stopPropagation();
+        control.click();
+      }
+    },
+  })
   .on({
-    composed({ html }) {
-      const { state, label, control, touchTarget } = this.refs;
-      label.append(html`
-        ${touchTarget}
-        <mdw-switch-icon id=switch
-          color={color} ink={ink} selected={checked} hovered={hoveredState} focused={focusedState} pressed={pressedState} disabled={disabledState}
-          icon={icon}
-          selected-icon={selectedIcon}
-          unselected-icon={unselectedIcon}
-          src={src}
-          selected-src={selectedSrc}
-          unselected-src={unselectedSrc}
-          >
-          ${state}
-          ${control}
-        </mdw-switch-icon>
-        <slot id=slot></slot>
-      `);
+    composed() {
+      const { switch: switchEl, state, control } = this.refs;
+      switchEl.append(state, control);
       control.setAttribute('role', 'switch');
     },
   })
@@ -133,6 +142,11 @@ export default CustomElement
       gap: 12px;
       vertical-align: middle;
 
+      cursor: pointer;
+    }
+
+    #control {
+      cursor: inherit;
     }
 
     #touch-target {
@@ -161,7 +175,10 @@ export default CustomElement
 
     #state {
       position: absolute;
-      inset: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      top: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 50%;
 
       block-size: 100%;
       min-block-size: 40px;
@@ -175,9 +192,15 @@ export default CustomElement
       border-radius: 50%;
     }
 
+    #state[touched] {
+      /* Pressed state already has an animation */
+      /* stylelint-disable-next-line rule-selector-property-disallowed-list */
+      --mdw-state__pressed-opacity: 0;
+    }
+
     /** Disabled **/
 
-    #label[disabled] {
+    :host(:disabled) {
       --mdw-ink: var(--mdw-color__on-surface); /* selected icon */
       --mdw-bg: var(--mdw-color__surface);
       cursor: not-allowed;
@@ -185,5 +208,16 @@ export default CustomElement
       opacity: 0.38;
     }
 
+    :host([internals-disabled]) {
+      --mdw-ink: var(--mdw-color__on-surface); /* selected icon */
+      --mdw-bg: var(--mdw-color__surface);
+      cursor: not-allowed;
+
+      opacity: 0.38;
+    }
+
+    #switch[disabled] {
+      opacity: 1;
+    }
   `
   .autoRegister('mdw-switch');