@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/components/Display.js

@@ -0,0 +1,55 @@
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import TypographyMixin from '../mixins/TypographyMixin.js';
+
+import Box from './Box.js';
+
+export default Box
+  .extend()
+  .mixin(AriaReflectorMixin)
+  .mixin(TypographyMixin)
+  .set({
+    _ariaRole: 'heading',
+    _baseAriaLevel: 1,
+  })
+  .observe({
+    ariaLevel: 'string',
+    size: {
+      type: 'string',
+      /** @type {'large'|'medium'|'small'} */
+      empty: 'large',
+    },
+  })
+  .observe({
+    _computedAriaLevel({ ariaLevel, size, _baseAriaLevel }) {
+      if (ariaLevel) return ariaLevel;
+      if (size === 'medium') return `${_baseAriaLevel + 1}`;
+      if (size === 'small') return `${_baseAriaLevel + 2}`;
+      return `${_baseAriaLevel}`;
+    },
+  })
+
+  .on({
+    _computedAriaLevelChanged(oldValue, newValue) {
+      this.updateAriaProperty('ariaLevel', newValue);
+    },
+    constructed() {
+      this.updateAriaProperty('ariaLevel', this._computedAriaLevel);
+    },
+  })
+  .css`
+    :host {
+      font: var(--mdw-typescale__display-large__font);
+      letter-spacing: var(--mdw-typescale__display-large__letter-spacing);
+    }
+    
+    :host([size="medium"]) {
+      font: var(--mdw-typescale__display-medium__font);
+      letter-spacing: var(--mdw-typescale__display-medium__letter-spacing);
+    }
+    
+    :host([size="small"]) {
+      font: var(--mdw-typescale__display-small__font);
+      letter-spacing: var(--mdw-typescale__display-small__letter-spacing);
+    }  
+  `
+  .autoRegister('mdw-display');

package/components/Divider.js

@@ -1,15 +1,15 @@
+/* https://m3.material.io/components/dividers/specs */
+
 import CustomElement from '../core/CustomElement.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 export default CustomElement
-  .mixin(ThemableMixin)
   .extend()
+  .mixin(ThemableMixin)
   .observe({
     vertical: 'boolean',
   })
   .css`
-    /* https://m3.material.io/components/dividers/specs */
-
     :host {
       --mdw-ink: var(--mdw-color__outline-variant);
       position: relative;

package/components/Fab.js

@@ -1,29 +1,83 @@
 import TooltipTriggerMixin from '../mixins/TooltipTriggerMixin.js';
 
-import ExtendedFab from './ExtendedFab.js';
+import Button from './Button.js';
 
-export default ExtendedFab
-  .mixin(TooltipTriggerMixin)
+export default Button
   .extend()
+  .mixin(TooltipTriggerMixin)
   .observe({
+    lowered: 'boolean',
+    extended: 'boolean',
     fabSize: {
       /** @type {null|'small'|'large'} */
       value: null,
     },
+    filled: { empty: 'tonal' },
+    elevated: { type: 'boolean', empty: true },
+  })
+  .observe({
+    autoTooltip({ extended }) {
+      return !extended;
+    },
+  })
+  .recompose(({ refs: { icon, slot } }) => {
+    icon.setAttribute('fab-size', '{fabSize}');
+    slot.setAttribute('extended', '{extended}');
+    slot.setAttribute('icon', '{icon}');
   })
   .css`
-    /* https://m3.material.io/components/floating-action-button/specs */
+    /* https://m3.material.io/components/extended-fab/specs */
 
     :host {
+      --mdw-bg: var(--mdw-color__surface-container-high);
+      --mdw-ink: var(--mdw-color__primary);
+      --mdw-shape__size: 16px;
+      gap: 0;
+      grid-area: fab;
+
       min-inline-size: 24px;
+      padding: calc(16px + (var(--mdw-density) * 2px));
+
+      background-color: rgb(var(--mdw-bg));
+
+      box-shadow: var(--mdw-elevation__box-shadow__3);
+      color: rgb(var(--mdw-ink));
+
+      transition-duration: 200ms;
+
+      transition-property: box-shadow, gap, min-inline-size;
     }
 
-    #icon {
-      font-size: 24px;
+    :host(:where([extended])) {
+      gap: 8px;
+
+      min-inline-size: 48px;
     }
 
-    #icon[fab-size="large"] {
-      font-size: 36px;
+    #slot {
+      display: inline-flex;
+      align-items: center;
+
+      min-block-size: 24px;
+
+      visibility: hidden;
+
+      color: transparent;
+
+      font-size: 0;
+      
+
+      transition: color 200ms, font-size 200ms, visibility 200ms;
+    }
+
+    #slot[extended] {
+      visibility: inherit;
+
+      color: inherit;
+
+      font-size: inherit;
+
+      transition: color 200ms, font-size 200ms, visibility 0ms;
     }
 
     :host([fab-size="small"]) {
@@ -36,15 +90,26 @@ export default ExtendedFab
       padding: calc(30px + (var(--mdw-density) * 2px));
     }
 
+    
+    #icon {
+      font-size: 24px;
+    }
+
+    #icon[fab-size="large"] {
+      font-size: 36px;
+    }
+
+    :host(:where([lowered])) {
+      --mdw-bg: var(--mdw-color__surface-container-low);
+      box-shadow: var(--mdw-elevation__box-shadow__1);
+    }
+
+    :host(:where(:hover:not(:active))) {
+      box-shadow: var(--mdw-elevation__box-shadow__4);
+    }
+
+    :host(:where([lowered]:hover:not(:active))) {
+      box-shadow: var(--mdw-elevation__box-shadow__2);
+    }
   `
-  .on({
-    composed() {
-      const { slot, tooltipSlot, control, shape, icon } = this.refs;
-      slot.remove();
-      tooltipSlot.removeAttribute('name');
-      control.setAttribute('aria-labelledby', 'tooltip');
-      shape.setAttribute('fab-size', '{fabSize}');
-      icon.setAttribute('fab-size', '{fabSize}');
-    },
-  })
   .autoRegister('mdw-fab');

package/components/FabContainer.js

@@ -0,0 +1,48 @@
+import CustomElement from '../core/CustomElement.js';
+import { ELEMENT_STYLE_TYPE } from '../core/customTypes.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+
+export default CustomElement
+  .extend()
+  .mixin(DelegatesFocusMixin)
+  .observe({
+    hideBreakpoint: { value: 728 },
+  })
+  .observe({
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ hideBreakpoint }) {
+        if (hideBreakpoint) {
+          return `@media(min-width:${hideBreakpoint}px){:host{display:none}}`;
+        }
+        return undefined;
+      },
+    },
+  })
+  .html`<slot id=slot></slot>`
+  .css`
+    :host {
+      display: grid;
+      align-items: flex-end;
+      grid-template:
+        "fab" auto
+        / auto;
+      justify-content: flex-end;
+
+      margin: 16px;
+
+      pointer-events: none;
+
+    }
+
+    @media (min-width: 648px) {
+      :host {
+        margin: 24px;
+      }
+    }
+
+    #slot {
+      pointer-events: auto;
+    }
+  `
+  .autoRegister('mdw-fab-container');

package/components/FilterChip.js

@@ -17,33 +17,33 @@ export default Chip
       if (trailingSrc) return '';
       return null;
     },
+    iconVariation({ checked }) {
+      return checked ? 'filled' : null;
+    },
   })
-  .html/* html */`
-    <mdw-icon _if={!icon} id=check-icon disabled={disabledState} selected={checked} aria-hidden=true>check</mdw-icon>
-    <mdw-icon _if={computedTrailingIcon} id=trailing-icon aria-hidden=true src={trailingSrc}>{computedTrailingIcon}</mdw-icon>
+  .html`
+    <mdw-icon mdw-if={!icon} id=check-icon disabled={disabledState} selected={checked} aria-hidden=true icon=check variation=filled></mdw-icon>
+    <mdw-icon mdw-if={computedTrailingIcon} id=trailing-icon aria-hidden=true src={trailingSrc} icon={computedTrailingIcon}></mdw-icon>
   `
-  .on({
-    composed() {
-      const { shape, icon, control, outline, slot, trailingIcon, checkIcon } = this.refs;
-
-      shape.setAttribute('selected', '{checked}');
-      shape.setAttribute('icon', '');
-      shape.setAttribute('trailing-icon', '{computedTrailingIcon}');
-      icon.setAttribute('_if', '{icon}');
-      icon.setAttribute('ink', '{iconInk}');
+  .recompose(({ refs: { icon, control, outline, slot, trailingIcon, checkIcon } }) => {
+    icon.setAttribute('mdw-if', '{icon}');
+    icon.setAttribute('ink', '{iconInk}');
 
-      control.removeAttribute('role');
+    control.removeAttribute('role');
 
-      outline.removeAttribute('ink');
-      outline.removeAttribute('color');
-      outline.setAttribute('selected', '{checked}');
+    outline.removeAttribute('mdw-if');
+    outline.removeAttribute('ink');
+    outline.removeAttribute('color');
+    outline.setAttribute('selected', '{checked}');
+    outline.setAttribute('elevated', '{elevated}');
+    outline.setAttribute('icon', '');
+    outline.setAttribute('trailing-icon', '{computedTrailingIcon}');
 
-      slot.removeAttribute('ink');
-      slot.removeAttribute('color');
+    slot.removeAttribute('ink');
+    slot.removeAttribute('color');
 
-      slot.before(checkIcon);
-      slot.after(trailingIcon);
-    },
+    slot.before(checkIcon);
+    slot.after(trailingIcon);
   })
   .css`
     /* https://m3.material.io/components/chips/specs */
@@ -58,6 +58,8 @@ export default Chip
       padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
       padding-inline-end: max(12px, calc(16px + (var(--mdw-density) * 2px)));
 
+      background-color: transparent;
+
       color: rgb(var(--mdw-color__on-surface-variant));
 
     }
@@ -66,11 +68,9 @@ export default Chip
       --mdw-outline__rgb: var(--mdw-color__outline);
     }
 
-    #icon[selected] {
-      font-variation-settings: 'FILL' 1;
-    }
+    #outline {
+      z-index: -1;
 
-    #shape {
       background-color: transparent;
     }
 
@@ -78,22 +78,20 @@ export default Chip
       padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
     }
 
-    #shape[elevated] {
-      background-color: rgb(var(--mdw-color__surface));
+    #outline[elevated] {
+      background-color: rgb(var(--mdw-color__surface-container-low));
+      border-color: transparent;
     }
 
-    #shape[selected] {
+    #outline[selected] {
       background-color: rgb(var(--mdw-bg));
+      border-color: transparent;
     }
 
     :host([selected]) {
       color: rgb(var(--mdw-ink));
     }
 
-    #outline[selected] {
-      opacity: 0;
-    }
-
     #trailing-icon {
       position: relative;
 
@@ -122,7 +120,11 @@ export default Chip
       color: rgba(var(--mdw-color__on-surface), 0.38);
     }
 
-    #shape[disabled]:is([elevated],[selected]) {
+    :host([disabled]:is([elevated], [filled])) {
+      background-color: transparent;
+    }
+
+    #outline[disabled]:is([elevated],[selected]) {
       background-color: rgba(var(--mdw-color__on-surface), 0.12);
       /* color: rgba(var(--mdw-color__on-surface), 0.38); */
     }

package/components/Grid.js

@@ -0,0 +1,176 @@
+import { ELEMENT_STYLE_TYPE } from '../core/customTypes.js';
+import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
+
+import Box from './Box.js';
+
+export default Box
+  .extend()
+  .mixin(ResizeObserverMixin)
+  .observe({
+    grid: 'boolean',
+    columns: 'integer',
+    _autoColumns: {
+      type: 'integer',
+      empty: 4,
+    },
+    _lastInlineSize: 'float',
+  })
+  .observe({
+    _resizeObserverEnabled: {
+      type: 'boolean',
+      get({ columns }) {
+        // Only use resize observer if using grid, not explicit columns
+        // and CSS containers are not supported.
+        return !columns;
+      },
+    },
+    _computedColumns({ columns, _autoColumns }) {
+      if (columns) return columns;
+      if (_autoColumns) return _autoColumns;
+      return 4;
+    },
+  })
+  .overrides({
+    onResizeObserved(entry) {
+      const { contentBoxSize } = entry;
+      if (!contentBoxSize.length) return;
+      const [{ inlineSize }] = contentBoxSize;
+      this._lastInlineSize = inlineSize;
+    },
+  })
+  .on({
+    _lastInlineSizeChanged(oldValue, inlineSize) {
+      if (inlineSize >= 840) {
+        this._autoColumns = 12;
+      } else if (inlineSize >= 600) {
+        this._autoColumns = 8;
+      } else {
+        this._autoColumns = 4;
+      }
+    },
+    connected() {
+      this._lastInlineSize = this.clientWidth;
+    },
+  })
+  .expressions({
+    _isFlex({ block, grid }) {
+      return !block && !grid;
+    },
+  })
+  .observe({
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ _computedColumns }) {
+        if ((_computedColumns || 4) === 4) return '';
+        return { gridTemplateColumns: `repeat(${_computedColumns},1fr)` };
+      },
+    },
+  })
+  .recompose(({ refs: { slot } }) => {
+    slot.setAttribute('grid', '{grid}');
+    slot.setAttribute('flex', '{_isFlex}');
+    slot.setAttribute('columns', '{_computedColumns}');
+  })
+  .css`
+    :host {
+      display: grid;
+      column-gap: 16px; /* Gutters */
+      grid-auto-flow: row;
+      grid-template-columns: repeat(1fr, 4);
+    }
+
+    :host([y="start"]) { align-items: flex-start; }
+    :host([y="end"]) { align-items: flex-end; }
+    :host([y="center"]) { align-items: center; }
+    :host([y="between"]) { align-items: space-between; }
+    :host([y="around"]) { align-items: space-around; }
+    :host([y="stretch"]) { align-items: stretch; }
+    :host([x="start"]) { justify-content: flex-start; }
+    :host([x="end"]) { justify-content: flex-end; }
+    :host([x="center"]) { justify-content: center; }
+    :host([x="between"]) { justify-content: space-between; }
+    :host([x="stretch"]) { justify-content: stretch; }
+
+    #slot {
+      --mdw-grid__columns: 4;
+      --mdw-grid__columns__4: 1;
+      --mdw-grid__columns__8: 0;
+      --mdw-grid__columns__12: 0;
+    }
+
+    #slot[columns="4"] {
+      --mdw-grid__columns: 4;
+      --mdw-grid__columns__4: 1;
+      --mdw-grid__columns__8: 0;
+      --mdw-grid__columns__12: 0;
+    }
+
+    #slot[columns="8"] {
+      --mdw-grid__columns: 8;
+      --mdw-grid__columns__4: 0;
+      --mdw-grid__columns__8: 1;
+      --mdw-grid__columns__12: 0;
+    }
+
+    #slot[columns="12"] {
+      --mdw-grid__columns: 12;
+      --mdw-grid__columns__4: 0;
+      --mdw-grid__columns__8: 0;
+      --mdw-grid__columns__12: 1;
+    }
+
+    ::slotted(*) {
+      --mdw-grid__column-count: var(--mdw-grid__columns);
+      --mdw-grid__column-count__4: var(--mdw-grid__column-count);
+      --mdw-grid__column-count__8: var(--mdw-grid__column-count);
+      --mdw-grid__column-count__12: var(--mdw-grid__column-count);
+      grid-column: auto / span calc(
+        (min(var(--mdw-grid__column-count__4), 4) * var(--mdw-grid__columns__4))
+        + (min(var(--mdw-grid__column-count__8), 8) * var(--mdw-grid__columns__8))
+        + (min(var(--mdw-grid__column-count__12), 12) * var(--mdw-grid__columns__12))
+      );
+    }
+    ::slotted([col-span="1"]) { --mdw-grid__column-count: 1; }
+    ::slotted([col-span="2"]) { --mdw-grid__column-count: 2; }
+    ::slotted([col-span="3"]) { --mdw-grid__column-count: 3; }
+    ::slotted([col-span="4"]) { --mdw-grid__column-count: 4; }
+    ::slotted([col-span="5"]) { --mdw-grid__column-count: 5; }
+    ::slotted([col-span="6"]) { --mdw-grid__column-count: 6; }
+    ::slotted([col-span="7"]) { --mdw-grid__column-count: 7; }
+    ::slotted([col-span="8"]) { --mdw-grid__column-count: 8; }
+    ::slotted([col-span="9"]) { --mdw-grid__column-count: 9; }
+    ::slotted([col-span="10"]) { --mdw-grid__column-count: 10; }
+    ::slotted([col-span="11"]) { --mdw-grid__column-count: 11; }
+    ::slotted([col-span="12"]) { --mdw-grid__column-count: 12; }
+    
+    ::slotted([col-span="25%"]) { --mdw-grid__column-count: calc(var(--mdw-grid__columns) / 4); }
+    ::slotted([col-span="50%"]) { --mdw-grid__column-count: calc(var(--mdw-grid__columns) / 2); }
+    ::slotted([col-span="100%"]) { --mdw-grid__column-count: calc(var(--mdw-grid__columns)); }
+
+    ::slotted([col-span-4="1"]) { --mdw-grid__column-count__4: 1; }
+    ::slotted([col-span-4="2"]) { --mdw-grid__column-count__4: 2; }
+    ::slotted([col-span-4="3"]) { --mdw-grid__column-count__4: 3; }
+    ::slotted([col-span-4="4"]) { --mdw-grid__column-count__4: 4; }
+    ::slotted([col-span-8="1"]) { --mdw-grid__column-count__8: 1; }
+    ::slotted([col-span-8="2"]) { --mdw-grid__column-count__8: 2; }
+    ::slotted([col-span-8="3"]) { --mdw-grid__column-count__8: 3; }
+    ::slotted([col-span-8="4"]) { --mdw-grid__column-count__8: 4; }
+    ::slotted([col-span-8="5"]) { --mdw-grid__column-count__8: 5; }
+    ::slotted([col-span-8="6"]) { --mdw-grid__column-count__8: 6; }
+    ::slotted([col-span-8="7"]) { --mdw-grid__column-count__8: 7; }
+    ::slotted([col-span-8="8"]) { --mdw-grid__column-count__8: 8; }
+    ::slotted([col-span-12="1"]) { --mdw-grid__column-count__12: 1; }
+    ::slotted([col-span-12="2"]) { --mdw-grid__column-count__12: 2; }
+    ::slotted([col-span-12="3"]) { --mdw-grid__column-count__12: 3; }
+    ::slotted([col-span-12="4"]) { --mdw-grid__column-count__12: 4; }
+    ::slotted([col-span-12="5"]) { --mdw-grid__column-count__12: 5; }
+    ::slotted([col-span-12="6"]) { --mdw-grid__column-count__12: 6; }
+    ::slotted([col-span-12="7"]) { --mdw-grid__column-count__12: 7; }
+    ::slotted([col-span-12="8"]) { --mdw-grid__column-count__12: 8; }
+    ::slotted([col-span-12="9"]) { --mdw-grid__column-count__12: 9; }
+    ::slotted([col-span-12="10"]) { --mdw-grid__column-count__12: 10; }
+    ::slotted([col-span-12="11"]) { --mdw-grid__column-count__12: 11; }
+    ::slotted([col-span-12="12"]) { --mdw-grid__column-count__12: 12; }
+
+  `
+  .autoRegister('mdw-grid');

package/components/Headline.js

@@ -1,32 +1,9 @@
-import ThemableMixin from '../mixins/ThemableMixin.js';
+import Display from './Display.js';
 
-import Box from './Box.js';
-
-export default Box
-  .mixin(ThemableMixin)
+export default Display
   .extend()
-  .observe({
-    ariaLevel: 'string',
-    size: {
-      type: 'string',
-      /** @type {'large'|'medium'|'small'} */
-      empty: 'large',
-    },
-  })
-  .expressions({
-    computeAriaLevel({ ariaLevel, size }) {
-      if (ariaLevel) return ariaLevel;
-      if (size === 'medium') return '2';
-      if (size === 'small') return '3';
-      return '1';
-    },
-  })
-  .on({
-    composed() {
-      const { slot } = this.refs;
-      slot.setAttribute('role', 'heading');
-      slot.setAttribute('aria-level', '{computeAriaLevel}');
-    },
+  .set({
+    _baseAriaLevel: 4,
   })
   .css`
     :host {
@@ -42,6 +19,6 @@ export default Box
     :host([size="small"]) {
       font: var(--mdw-typescale__headline-small__font);
       letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
-    }  
+    }
   `
   .autoRegister('mdw-headline');