@shortfuse/materialdesignweb 0.7.5 → 0.8.0

package/components/SwitchIcon.js

@@ -5,9 +5,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',
@@ -41,7 +41,7 @@ export default CustomElement
       return _active ? `${color}-container` : '';
     },
     _iconInk({ disabled, selected, color }) {
-      if (!selected) return 'surface-variant';
+      if (!selected) return 'surface-container-highest';
       if (disabled) return 'on-surface';
       return `on-${color}-container`;
     },
@@ -51,7 +51,7 @@ export default CustomElement
       return Boolean(icon || src || unselectedIcon || unselectedSrc);
     },
   })
-  .html/* html */`
+  .html`
     <div id=thumb selected={checked} pressed={pressed} disabled={disabled}>
       <mdw-shape id=thumb-shape shape-style=full selected={checked} pressed={pressed} hovered={hovered} focused={focused} icon={hasIcon}
        color={_thumbColor} active={_active} ink={_thumbInk} disabled={disabled}></mdw-shape>
@@ -67,7 +67,7 @@ export default CustomElement
       track.id = 'track';
       track.setAttribute('selected', '{checked}');
       track.setAttribute('disabled', '{disabled}');
-      outline.removeAttribute('_if');
+      outline.removeAttribute('mdw-if');
       outline.setAttribute('selected', '{checked}');
       outline.setAttribute('errored', '{errored}');
       outline.setAttribute('disabled', '{disabled}');
@@ -115,7 +115,7 @@ export default CustomElement
       position: absolute;
       inset: 0;
 
-      background-color: rgb(var(--mdw-color__surface-variant));
+      background-color: rgb(var(--mdw-color__surface-container-highest));
     }
 
     #track[selected] {
@@ -206,7 +206,7 @@ export default CustomElement
 
     #thumb-shape:not([selected]) {
       --mdw-bg: var(--mdw-color__outline);
-      --mdw-ink: var(--mdw-color__surface-variant);
+      --mdw-ink: var(--mdw-color__surface-container-highest);
     }
 
     #thumb-shape[selected] {
@@ -225,8 +225,10 @@ export default CustomElement
 
     .icon {
       position: absolute;
-      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%;
 
       opacity: 0;
       transform: translateX(-50%) translateY(-50%);

package/components/Tab.js

@@ -9,11 +9,11 @@ import ShapeMixin from '../mixins/ShapeMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ShapeMixin)
   .mixin(StateMixin)
   .mixin(RippleMixin)
   .mixin(ScrollListenerMixin)
-  .extend()
   .define({
     stateTargetElement() { return this.refs.anchor; },
     /**
@@ -21,9 +21,8 @@ export default CustomElement
      * Default to 24.
      */
     labelMetrics() {
-      const slot = this.refs.slot;
-      let target = this.refs.slot;
-      if (!slot.clientWidth) target = this.refs.icon;
+      const { slot, icon } = this.refs;
+      const target = slot.clientWidth ? slot : icon;
       return {
         width: target.clientWidth,
         left: target.offsetLeft,
@@ -47,7 +46,7 @@ export default CustomElement
       this.refs.anchor.focus(options);
     },
   })
-  .html/* html */`
+  .html`
     <a id=anchor role=tab
       aria-label={ariaLabel}
       aria-controls=${({ href }) => (href?.startsWith('#') ? href.slice(1) : null)}
@@ -55,7 +54,7 @@ export default CustomElement
       aria-disabled=${({ disabledState }) => `${disabledState}`}
       disabled={disabledState}
       href=${({ href }) => href ?? '#'}>
-      <mdw-icon _if=${(data) => data.icon || data.src} id=icon aria-hidden=true src={src} active={active}>{icon}</mdw-icon>
+      <mdw-icon mdw-if=${(data) => data.icon || data.src} id=icon aria-hidden=true src={src} active={active}>{icon}</mdw-icon>
       <slot id=slot></slot>
     </a>
   `
@@ -88,9 +87,12 @@ export default CustomElement
           return;
         }
         if (href.startsWith('#')) {
-        /** @type {HTMLElement} */
-          const el = document.querySelector(href);
-          if (!el) { console.warn('Unknown element', href); }
+          const root = /** @type {HTMLElement} */ this.getRootNode();
+          const el = root.querySelector(href);
+          if (!el) {
+            console.warn('Unknown element', href);
+            return;
+          }
           event.preventDefault();
           el.scrollIntoView({ block: 'nearest', inline: 'start' });
         }

package/components/TabContent.js

@@ -5,8 +5,8 @@ import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
 import TabPanel from './TabPanel.js';
 
 export default CustomElement
-  .mixin(ResizeObserverMixin)
   .extend()
+  .mixin(ResizeObserverMixin)
   .set({
     /** @type {InstanceType<TabPanel>[]} */
     _panelNodes: [],
@@ -87,11 +87,12 @@ export default CustomElement
       },
     },
   })
-  .html/* html */`<slot id=slot></slot>`
+  .html`<slot id=slot></slot>`
   .methods({
     onResizeObserved() {
       this._panelMetrics = null;
-      // Resize should not change panel visibility
+      this.updatePanels();
+      // Resize should not change panel visibility (Chrome Bug?)
     },
     updatePanels() {
       const start = this.scrollLeft;

package/components/TabList.js

@@ -10,12 +10,12 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 import Tab from './Tab.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(KeyboardNavMixin)
   .mixin(ResizeObserverMixin)
   .mixin(RTLObserverMixin)
   .mixin(ShapeMixin)
-  .extend()
   .set({
     /** @type {WeakRef<HTMLElement>} */
     _tabContentRef: null,
@@ -257,7 +257,7 @@ export default CustomElement
   .set({
     ariaRole: 'tablist',
   })
-  .html/* html */`
+  .html`
     <slot id=slot ink={ink} type-style={typeStyle}></slot>
     <div id=indicator aria-hidden=true style={_indicatorStyle} active={active} secondary={secondary}>
       <div id=indicator-start class=indicator-piece></div>

package/components/TabPanel.js

@@ -3,8 +3,8 @@ import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
 import Box from './Box.js';
 
 export default Box
-  .mixin(AriaReflectorMixin)
   .extend()
+  .mixin(AriaReflectorMixin)
   .set({
     _ariaRole: 'tabpanel',
   })
@@ -17,21 +17,24 @@ export default Box
     },
     peeking: 'boolean',
   })
-  .css/* css */`
+  .css`
     :host {
+      overflow-y: auto;
       scroll-snap-align: center;
-      min-inline-size: 100%;
-      max-inline-size: 100%;
+
       min-block-size: 100%;
       max-block-size: 100%;
-      overflow-y: auto;
-      will-change: visibility;
+      min-inline-size: 100%;
+      max-inline-size: 100%;
 
-      visibility: hidden; 
+      visibility: hidden;
+
+      will-change: visibility; 
     }
+
     :host(:is([active],[peeking])) {
       /* Safari bug: Visiblity not changing without !important or layout reflow */
-      visibility: visible !important;;
+      visibility: visible !important;
     }
   `
   .autoRegister('mdw-tab-panel');

package/components/TextArea.js

@@ -12,15 +12,16 @@ const DOMString = { nullParser: String, value: '' };
  * -implements {HTMLTextAreaElement}
  */
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(ControlMixin)
   .mixin(TextFieldMixin)
   .mixin(ResizeObserverMixin)
-  .extend()
   .set({
     supportsCSSLineHeightUnit: CSS.supports('height', '1lh'),
     type: 'textarea',
+    _resizing: false,
   })
   .overrides({
     controlTagName: 'textarea',
@@ -81,11 +82,11 @@ export default CustomElement
 
   })
   .methods({
-
-    /** @return {number} */
     resize() {
+      if (this._resizing) return;
+      this._resizing = true;
       const textarea = this._textarea;
-      textarea.style.removeProperty('height');
+      let userHeight = textarea.style.getPropertyValue('height');
 
       // if (this.placeholder) textarea.removeAttribute('placeholder');
 
@@ -100,7 +101,12 @@ export default CustomElement
         textarea.rows = this.maxRows;
       }
       if (!this.fixed) {
-        while (textarea.scrollHeight > textarea.clientHeight) {
+        // Auto-grow
+        while (textarea.clientHeight < textarea.scrollHeight) {
+          if (userHeight) {
+            textarea.style.removeProperty('height');
+            userHeight = null;
+          }
           if (this.maxRows && textarea.rows === this.maxRows) break;
           const lastClientHeight = textarea.clientHeight;
           textarea.rows++;
@@ -109,7 +115,8 @@ export default CustomElement
             break;
           }
         }
-        while (textarea.scrollHeight === textarea.clientHeight) {
+        // Auto-shrink
+        while (!userHeight && textarea.clientHeight >= textarea.scrollHeight) {
           if (textarea.rows === 1) break;
           if (this.minRows > 1 && textarea.rows === this.minRows) break;
           const lastClientHeight = textarea.clientHeight;
@@ -121,19 +128,16 @@ export default CustomElement
           }
         }
       }
-
       if (textarea.selectionEnd === textarea.value.length) {
         textarea.scrollTop = textarea.scrollHeight;
       }
-
       this.rows = textarea.rows;
+      this._resizing = false;
       // if (this.placeholder) textarea.setAttribute('placeholder', this.placeholder);
-      return this.rows;
     },
 
     /** @param {ResizeObserverEntry} entry */
     onResizeObserved(entry) {
-      super.onResizeObserved(entry);
       if (this.matches(':active')) return;
       this.resize();
     },
@@ -173,10 +177,8 @@ export default CustomElement
       // Custom
       control.setAttribute('input-prefix', '{inputPrefix}');
       control.setAttribute('input-suffix', '{inputSuffix}');
-      control.setAttribute('minrows', '{minRows}');
       control.setAttribute('fixed', '{fixed}');
       control.setAttribute('icon', '{icon}');
-      control.setAttribute('maxrows', '{maxRows}');
     },
     defaultValueAttrChanged(oldValue, newValue) {
       this.defaultValue = newValue;
@@ -186,14 +188,15 @@ export default CustomElement
       this.resize();
     },
     _lineHeightChanged(oldValue, newValue) {
-      this.refs.label.style.setProperty('--line-height', newValue);
+      this.refs.shape.style.setProperty('--line-height', newValue);
     },
+    // Animate API does not override user-resize. Must use inline-styles
     minRowsChanged(oldValue, newValue) {
-      this.refs.label.style.setProperty('--min-rows', `${newValue || 'none'}`);
+      this.refs.shape.style.setProperty('--min-rows', `${newValue || 'none'}`);
       this.resize();
     },
     maxRowsChanged(oldValue, newValue) {
-      this.refs.label.style.setProperty('--max-rows', `${newValue || 'none'}`);
+      this.refs.shape.style.setProperty('--max-rows', `${newValue || 'none'}`);
       this.resize();
     },
     rowsChanged() {
@@ -210,6 +213,8 @@ export default CustomElement
       minlength: cloneAttributeCallback('minlength', 'control'),
       maxlength: cloneAttributeCallback('maxlength', 'control'),
       placeholder: cloneAttributeCallback('placeholder', 'control'),
+      minrows: cloneAttributeCallback('minrows', 'control'),
+      maxrows: cloneAttributeCallback('maxrows', 'control'),
     },
   })
   .css`
@@ -228,17 +233,21 @@ export default CustomElement
         --control__margin-bottom: 1px;
       }
 
-      #label {
+      #shape {
         --max-rows: none;
         --line-height: var(--mdw-typescale__body-large__line-height);
-        --expected-height: calc((var(--control__margin-top) + var(--control__padding-top) + var(--line-height) + var(--control__padding-bottom) + var(--control__margin-bottom)));
+        --expected-height: calc(var(--line-height)
+          + var(--control__margin-top)
+          + var(--control__padding-top)
+          + var(--control__padding-bottom)
+          + var(--control__margin-bottom));
         max-block-size: 100%;
         grid-row: 1 / 1;
         padding: 0;
       }
 
       @supports(height: 1lh) {
-        #label {
+        #shape {
           --line-height: 1lh;
         }
       }
@@ -252,36 +261,33 @@ export default CustomElement
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
 
-        box-sizing: border-box;
-        block-size: 100%;
+        box-sizing: content-box;
+        block-size: min-content;
+
+        min-block-size: var(--line-height);
+        /* Avoid clipping on manual resize */
+        max-block-size: calc(100% - (var(--control__margin-top)
+          + var(--control__padding-top)
+          + var(--control__padding-bottom)
+          + var(--control__margin-bottom)));
+        inline-size: calc(100% - 32px) !important; /* !important to override user-agent resize */
 
-        min-block-size: var(--expected-height);
-        /* Avoid clipping on resize */
-        max-block-size: inherit;
-        inline-size: 100% !important; /* !important to override user-agent resize */
         padding-inline: 16px;
-      }
 
-      #control[icon] {
-        padding-inline-start: 0;
+        /* https://github.com/w3c/csswg-drafts/issues/7542 */
+        form-sizing: normal;
       }
 
       #control[minrows] {
-        min-block-size: calc((var(--min-rows) * var(--line-height))
-          + var(--control__margin-top)
-          + var(--control__padding-top)
-          + var(--control__padding-bottom)
-          + var(--control__margin-bottom)
-        );
+        min-block-size: calc((var(--min-rows) * var(--line-height)));
       }
 
       #control[maxrows] {
-        max-block-size: calc((var(--max-rows) * var(--line-height))
-          + var(--control__margin-top)
-          + var(--control__padding-top)
-          + var(--control__padding-bottom)
-          + var(--control__margin-bottom)
-        );
+        max-block-size: calc((var(--max-rows) * var(--line-height)));
+      }
+
+      #control[icon] {
+        padding-inline-start: 0;
       }
 
       #control:is([icon], [input-prefix]) {

package/components/Tooltip.js

@@ -3,8 +3,8 @@ import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
 import Surface from './Surface.js';
 
 export default Surface
-  .mixin(AriaReflectorMixin)
   .extend()
+  .mixin(AriaReflectorMixin)
   .set({
     _ariaRole: 'tooltip',
   })
@@ -23,7 +23,7 @@ export default Surface
     :host {
       --mdw-shape__size: var(--mdw-shape__extra-small);
       --mdw-ink: var(--mdw-color__on-surface-variant);
-      --mdw-shape__bg: rgb(var(--mdw-color__surface-variant));
+      --mdw-shape__bg: rgb(var(--mdw-color__surface-container));
       display: block;
       vertical-align: middle;