@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/components/Table.js

@@ -0,0 +1,116 @@
+import CustomElement from '../core/CustomElement.js';
+
+// https://html.spec.whatwg.org/multipage/tables.html#htmltableelement
+
+/**
+ * @param {Element} parent
+ * @param {string} tagName
+ * @return {Element?}
+ */
+function getByTagName(parent, tagName) {
+  for (const element of parent.children) {
+    if (element.tagName === tagName) {
+      return element;
+    }
+  }
+  return null;
+}
+
+/**
+ * @param {Element} parent
+ * @param {string} tagName
+ * @param {Element|null} value
+ * @param {string} errorMessage
+ * @return {Element?}
+ */
+function setByTagName(parent, tagName, value, errorMessage) {
+  const current = getByTagName(parent, tagName);
+  if (!value) {
+    current?.remove();
+    return undefined;
+  }
+  if (value === current) return value;
+  if (value instanceof HTMLElement && value.tagName === tagName) {
+    if (current) {
+      current.replaceWith(value);
+    } else {
+      this.prepend(value);
+    }
+    return value;
+  }
+  throw new TypeError(errorMessage);
+}
+
+/**
+ * @param {Element} parent
+ * @param {string} tagName
+ * @return {Element?}
+ */
+function createByTagName(parent, tagName) {
+  let element = this.getByTagName(parent, tagName);
+  if (element) return element;
+  element = document.createElement(tagName);
+  this.prepend(element);
+  return element;
+}
+
+/**
+ * @param {Element} parent
+ * @param {string} tagName
+ * @return {void}
+ */
+function deleteByTagName(parent, tagName) {
+  this.setByTagName(parent, tagName, null);
+}
+
+/** -implements {HTMLTableElement} */
+CustomElement
+  .extend()
+  .define({
+    caption: {
+      get() {
+        return getByTagName(this, 'mdw-caption');
+      },
+      set(value) {
+        return setByTagName(this, 'mdw-caption', value, "Failed to set the 'caption' property on 'MDWTableElement': Failed to convert value to 'MDWCaptionElement'.");
+      },
+    },
+    tHead: {
+      get() {
+        return getByTagName(this, 'mdw-thread');
+      },
+      set(value) {
+        return setByTagName(this, 'mdw-thead', value, "Failed to set the 'tHead' property on 'MDWTableElement': Failed to convert value to 'MDWTHeadElement'.");
+      },
+    },
+    tFoot: {
+      get() {
+        return getByTagName(this, 'mdw-tfoot');
+      },
+      set(value) {
+        return setByTagName(this, 'mdw-tfoot', value, "Failed to set the 'tFoot' property on 'MDWTableElement': Failed to convert value to 'MDWTFootElement'.");
+      },
+    },
+    tBodies() {
+      return this.getElementsByTagName('mdw-tbody');
+    },
+    rows() {
+      return this.getElementsByTagName('mdw-tr');
+    },
+  })
+  .methods({
+    createCaption() { return createByTagName(this, 'mdw-caption'); },
+    deleteCaption() { return deleteByTagName(this, 'mdw-caption'); },
+    createTHead() { return createByTagName(this, 'mdw-thead'); },
+    deleteTHead() { return deleteByTagName(this, 'mdw-thead'); },
+    createTFoot() { return createByTagName(this, 'mdw-tfoot'); },
+    deleteTFoot() { return deleteByTagName(this, 'mdw-tfoot'); },
+    createTBody() { return this.insertBefore(this.tFoot, document.createElement('mdw-tbody')); },
+  })
+  .html`<slot id=slot></slot>`
+  .css`
+    :host{
+      display:table;
+    }
+  `
+  .autoRegister('mdw-table');

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,18 +128,14 @@ 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) {
+    onResizeObserved() {
       if (this.matches(':active')) return;
       this.resize();
     },
@@ -162,19 +165,18 @@ export default CustomElement
       },
     },
   })
+  .recompose(({ refs: { control } }) => {
+    // Spec
+    control.removeAttribute('placeholder');
+    control.setAttribute('rows', '{rows}');
+
+    // Custom
+    control.setAttribute('input-prefix', '{inputPrefix}');
+    control.setAttribute('input-suffix', '{inputSuffix}');
+    control.setAttribute('fixed', '{fixed}');
+    control.setAttribute('icon', '{icon}');
+  })
   .on({
-    composed() {
-      const { control } = this.refs;
-      // Spec
-      control.removeAttribute('placeholder');
-      control.setAttribute('rows', '{rows}');
-
-      // Custom
-      control.setAttribute('input-prefix', '{inputPrefix}');
-      control.setAttribute('input-suffix', '{inputSuffix}');
-      control.setAttribute('fixed', '{fixed}');
-      control.setAttribute('icon', '{icon}');
-    },
     defaultValueAttrChanged(oldValue, newValue) {
       this.defaultValue = newValue;
     },
@@ -183,14 +185,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() {
@@ -227,7 +230,7 @@ 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(--line-height)
@@ -241,7 +244,7 @@ export default CustomElement
       }
 
       @supports(height: 1lh) {
-        #label {
+        #shape {
           --line-height: 1lh;
         }
       }
@@ -255,36 +258,37 @@ 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)));
+      }
+
+      #icon {
+        margin-inline-end: 16px;
+      }
+
+      #control[icon] {
+        padding-inline-start: 0;
       }
 
       #control:is([icon], [input-prefix]) {

package/components/Title.js

@@ -1,14 +1,9 @@
-import Headline from './Headline.js';
+import Display from './Display.js';
 
-export default Headline
+export default Display
   .extend()
-  .expressions({
-    computeAriaLevel({ ariaLevel, size }) {
-      if (ariaLevel) return ariaLevel;
-      if (size === 'medium') return '5';
-      if (size === 'small') return '6';
-      return '4';
-    },
+  .set({
+    _baseAriaLevel: 7,
   })
   .css`
     :host {

package/components/Tooltip.js

@@ -1,10 +1,15 @@
+import CustomElement from '../core/CustomElement.js';
 import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import Surface from './Surface.js';
+/* https://m3.material.io/components/tooltips/specs */
 
-export default Surface
-  .mixin(AriaReflectorMixin)
+export default CustomElement
   .extend()
+  .mixin(ThemableMixin)
+  .mixin(ShapeMixin)
+  .mixin(AriaReflectorMixin)
   .set({
     _ariaRole: 'tooltip',
   })
@@ -15,48 +20,65 @@ export default Surface
         this.updateAriaProperty('ariaHidden', newValue ? 'true' : 'false');
       },
     },
-    touch: 'boolean',
   })
+  .html`
+    <div id=hover-target></div>
+    <slot id=slot></slot>
+    `
   .css`
-    /* https://m2.material.io/components/tooltips */
-
     :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-ink: var(--mdw-color__inverse-on-surface);
+      --mdw-bg: var(--mdw-color__inverse-surface);
       display: block;
-      vertical-align: middle;
 
       box-sizing: border-box;
-      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-      margin-inline: auto;
-      padding-block: 4px;
+
+      /* Ensure 24px min-height while keeping display:block */
+      padding-block: calc(12px - var(--mdw-typescale__body-small__line-height) / 2);
       padding-inline: 8px;
 
       pointer-events: none;
 
       opacity: 0;
       transform: scale(0);
-      z-index: 24;
+      z-index: 28;
 
-      font: var(--mdw-typescale__label-medium__font);
-      letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
 
-      transition: transform 200ms, opacity 200ms;
+      font: var(--mdw-typescale__body-small__font);
+      letter-spacing: var(--mdw-typescale__body-small__letter-spacing);
 
+      transition: transform 200ms, opacity 200ms;
     }
 
-    :host([touch]) {
-      padding-block: 6px;
-      padding-inline: 16px;
-
-      font: var(--mdw-typescale__label-large__font);
-      letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
+    @supports(width: 1lh) {
+      :host {
+        padding-block: calc(12px - 0.5lh);
+      }
     }
 
     :host([open]) {
+      pointer-events: auto;
+
       opacity: 1;
       transform: scale(1);
     }
+
+    #hover-target {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+
+      box-sizing: content-box;
+      block-size: 100%;
+      inline-size: 100%;
+      padding: 8px;
+
+      transform: translateX(-50%) translateY(-50%);
+      z-index: -1;
+      
+    }
   `
   .autoRegister('mdw-tooltip');