@shortfuse/materialdesignweb 0.7.0 → 0.7.1-1

package/components/Title.js

@@ -1,9 +1,7 @@
 import Headline from './Headline.js';
-import styles from './Title.css' assert { type: 'css' };
 
 export default Headline
   .extend()
-  .css(styles)
   .expressions({
     computeAriaLevel({ ariaLevel, size }) {
       if (ariaLevel) return ariaLevel;
@@ -12,4 +10,20 @@ export default Headline
       return '4';
     },
   })
+  .css`
+    :host {
+      font: var(--mdw-typescale__title-large__font);
+      letter-spacing: var(--mdw-typescale__title-large__letter-spacing);
+    }
+    
+    :host([size="medium"]) {
+      font: var(--mdw-typescale__title-medium__font);
+      letter-spacing: var(--mdw-typescale__title-medium__letter-spacing);
+    }
+    
+    :host([size="small"]) {
+      font: var(--mdw-typescale__title-small__font);
+      letter-spacing: var(--mdw-typescale__title-small__letter-spacing);
+    }
+  `
   .autoRegister('mdw-title');

package/components/Tooltip.js

@@ -1,7 +1,6 @@
 import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
 
 import Surface from './Surface.js';
-import styles from './Tooltip.css' assert { type: 'css' };
 
 export default Surface
   .mixin(AriaReflectorMixin)
@@ -9,7 +8,6 @@ export default Surface
   .set({
     _ariaRole: 'tooltip',
   })
-  .css(styles)
   .observe({
     open: {
       type: 'boolean',
@@ -19,4 +17,46 @@ export default Surface
     },
     touch: 'boolean',
   })
+  .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));
+      display: block;
+      vertical-align: middle;
+
+      box-sizing: border-box;
+      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+      margin-inline: auto;
+      padding-block: 4px;
+      padding-inline: 8px;
+
+      pointer-events: none;
+
+      opacity: 0;
+      transform: scale(0);
+      z-index: 24;
+
+      font: var(--mdw-typescale__label-medium__font);
+      letter-spacing: var(--mdw-typescale__label-medium__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);
+    }
+
+    :host([open]) {
+      opacity: 1;
+      transform: scale(1);
+    }
+  `
   .autoRegister('mdw-tooltip');

package/components/TopAppBar.js

@@ -6,8 +6,6 @@ import ScrollListenerMixin from '../mixins/ScrollListenerMixin.js';
 import SurfaceMixin from '../mixins/SurfaceMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './TopAppBar.css' assert { type: 'css' };
-
 export default CustomElement
   .mixin(ThemableMixin)
   .mixin(SurfaceMixin) // TopAppBars are non-shaped surfaces
@@ -90,7 +88,6 @@ export default CustomElement
       },
     },
   })
-  .css(styles)
   .html/* html */`
     <slot id=leading name=leading on-slotchange={refreshTabIndexes}></slot>
     <div id=headline ink={ink} color={color} type-style={typeStyle} on-slotchange={refreshTabIndexes}>
@@ -198,4 +195,216 @@ export default CustomElement
       this.clearScrollListener();
     },
   })
+  .css`
+    /* https://m3.material.io/components/bottom-app-bar/specs */
+
+    :host {
+      --mdw-bg: var(--mdw-color__surface);
+      --mdw-ink: var(--mdw-color__on-surface);
+      --mdw-surface__tint: var(--mdw-surface__tint__0);
+      --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
+      display: contents;
+
+      z-index:2;
+    }
+
+    #surface {
+      position: sticky;
+      inset-block-start: 0;
+
+      display: grid;
+
+      align-items: center;
+      gap: 12px;
+      grid-auto-flow: row;
+      grid-template-rows: minmax(64px,min-content);
+      grid-template-columns: minmax(auto,1fr) minmax(0,auto) minmax(auto,1fr);
+      overflow-x: clip; /* Clip oversized touch targets to avoid scroll-bars */
+      overflow-y: visible;
+
+      box-sizing: border-box;
+      inline-size: 100%;
+      max-inline-size: 100%;
+
+      /* 16px from icon */
+      /* inset = (button.width / 2) - (icon.width / 2) */
+      /* paddingInline = 16px - inset */
+      /* paddingInlineStart = 16px - ((48px / 2) - (24px / 2)) */
+      /* paddingInlineEnd = 16px - ((48px / 2) - (30px / 2)) */
+
+      padding-inline: 4px;
+
+      pointer-events: auto;
+
+      filter: none; /* Never receive shadow */
+
+      z-index: 5;
+      /* inset-inline: 0; */
+
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
+
+      transition: grid-template-columns 100ms;
+
+    }
+
+    #surface-tint {
+      position: 0;
+
+      z-index: 1;
+    }
+
+    #leading {
+      justify-self: flex-start;
+
+      display: flex;
+      align-items: center;
+
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    #headline {
+      display: inline-block;
+
+      overflow: clip hidden;
+
+      max-inline-size: 100%;
+
+      grid-column: 2;
+      grid-row: 1;
+
+      font: var(--mdw-typescale__title-large__font);
+      letter-spacing: var(--mdw-typescale__title-large__letter-spacing);
+
+      text-overflow: ellipsis;
+      text-transform: none;
+      white-space: nowrap;
+      word-break: break-word;
+
+      transition-duration: 200ms;
+      transition-property: transform, opacity, color, background-color;
+    }
+
+    #trailing {
+      justify-self: flex-end;
+
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      justify-content: flex-end;
+
+      grid-column: 3;
+      grid-row: 1;
+
+      color: var(--mdw-color__on-surface-variant);
+    }
+
+    /* Medium */
+    #companion {
+      position: relative;
+
+      display: flex;
+      align-items: flex-end;
+
+      /**
+       * Total Height = 112px
+       * Bar = 12 + 40 + 12 (64)
+       * Companion = 112px - 64
+       * Companion Bottom = 20px
+       * Companion = 28px
+       * Shift up = 1lh - 28px
+       */
+      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+      margin-block-start: calc(28px - var(--mdw-typescale__headline-small__line-height));
+      padding-block-end: 20px;
+
+      padding-inline: 16px;
+
+      background-color: rgb(var(--mdw-bg));
+      box-shadow: none;
+
+      font: var(--mdw-typescale__headline-small__font);
+      letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
+      white-space: nowrap;
+    }
+
+    #companion[size="large"] {
+      /**
+       * Total Height = 152px
+       * Bar = 12 + 40 + 12 (64)
+       * Companion = 152px - 64
+       * Companion Bottom = 20px
+       * Companion = 68px
+       * Shift up = 2lh - 68px
+       */
+
+      min-block-size: calc(2 * var(--mdw-typescale__headline-medium__line-height));
+      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+      margin-block-start: calc(68px - (2 * var(--mdw-typescale__headline-medium__line-height)));
+
+      font: var(--mdw-typescale__headline-medium__font);
+      letter-spacing: var(--mdw-typescale__headline-medium__letter-spacing);
+      white-space: normal;
+    }
+
+    @supports(width: 1lh) {
+      #companion {
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        margin-block-start: calc(28px - 1lh);
+      }
+
+      #companion[size="large"] {
+        min-block-size: 2lh;
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        margin-block-start: calc(68px - 2lh);
+      }
+    }
+
+    #companion-slot {
+      display: block;
+      overflow-x: clip;
+      overflow-y: hidden;
+
+      text-overflow: ellipsis;
+      text-transform: none;
+      word-break: break-word;
+    }
+
+    #companion-slot[size="large"] {
+      max-block-size: calc(2 * var(--mdw-typescale__headline-medium__line-height));
+    }
+
+    @supports(-webkit-line-clamp: 2) {
+      #companion-slot[size="large"] {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+
+        max-block-size: none;
+      }
+    }
+
+    #surface[hide-on-scroll] {
+      position: relative;
+
+      inset-block-start: 0;
+
+      transform: translateY(0);
+
+      will-change: transform, position;
+    }
+
+    #surface[size="small"] {
+      gap: 4px;
+      grid-template-columns: auto 1fr auto;
+    }
+
+    #headline:is([size="medium"],[size="large"]) {
+      opacity: 0;
+
+      will-change: opacity;
+    }
+
+  `
   .autoRegister('mdw-top-app-bar');

package/core/template.js

@@ -49,6 +49,12 @@ export function addInlineFunction(fn) {
   return `{${internalName}}`;
 }
 
+/** @type {Map<string, CSSStyleSheet>} */
+const cssStyleSheetsCache = new Map();
+
+/** @type {Map<string, HTMLStyleElement>} */
+const styleElementCache = new Map();
+
 /**
  * @param {TemplateStringsArray} array
  * @param  {...(string)} substitutions
@@ -56,29 +62,42 @@ export function addInlineFunction(fn) {
  */
 export function css(array, ...substitutions) {
   const content = String.raw({ raw: array }, ...substitutions);
+
   if (_cssStyleSheetConstructable == null) {
     try {
       const sheet = new CSSStyleSheet();
       _cssStyleSheetConstructable = true;
       sheet.replaceSync(content);
+      cssStyleSheetsCache.set(content, sheet);
       return sheet;
     } catch {
       _cssStyleSheetConstructable = false;
     }
   }
+
   if (_cssStyleSheetConstructable) {
-    const sheet = new CSSStyleSheet();
-    _cssStyleSheetConstructable = true;
-    sheet.replaceSync(content);
+    let sheet = cssStyleSheetsCache.get(content);
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      _cssStyleSheetConstructable = true;
+      sheet.replaceSync(content);
+      cssStyleSheetsCache.set(content, sheet);
+    }
     return sheet;
   }
 
-  _inactiveDocument ??= document.implementation.createHTMLDocument();
-  const style = _inactiveDocument.createElement('style');
-  style.textContent = content;
-  return style;
+  let style = styleElementCache.get(content);
+  if (!style) {
+    _inactiveDocument ??= document.implementation.createHTMLDocument();
+    style = _inactiveDocument.createElement('style');
+    style.textContent = content;
+    styleElementCache.set(content, style);
+  }
+  return /** @type {HTMLStyleElement} */ (style.cloneNode(true));
 }
 
+/** @type {Map<string, DocumentFragment>} */
+const fragmentCache = new Map();
 /**
  * @template T1
  * @template T2
@@ -109,13 +128,21 @@ export function html(strings, ...substitutions) {
     }
   });
   const compiledString = String.raw({ raw: strings }, ...replacements);
-  const fragment = generateFragment(compiledString);
+
   if (tempSlots) {
+    const fragment = generateFragment(compiledString);
     for (const [id, element] of tempSlots) {
       const slot = fragment.getElementById(id);
       slot.replaceWith(element);
     }
+    return fragment;
+  }
+
+  let fragment = fragmentCache.get(compiledString);
+  if (!fragment) {
+    fragment = generateFragment(compiledString);
+    fragmentCache.set(compiledString, fragment);
   }
 
-  return fragment;
+  return /** @type {DocumentFragment} */ (fragment.cloneNode(true));
 }

package/index.js

@@ -0,0 +1,77 @@
+export { default as Badge } from './components/Badge.js';
+export { default as Body } from './components/Body.js';
+export { default as BottomAppBar } from './components/BottomAppBar.js';
+export { default as Box } from './components/Box.js';
+export { default as Button } from './components/Button.js';
+export { default as Card } from './components/Card.js';
+export { default as Checkbox } from './components/Checkbox.js';
+export { default as Chip } from './components/Chip.js';
+export { default as Dialog } from './components/Dialog.js';
+export { default as Divider } from './components/Divider.js';
+export { default as ExtendedFab } from './components/ExtendedFab.js';
+export { default as Fab } from './components/Fab.js';
+export { default as FilterChip } from './components/FilterChip.js';
+export { default as Headline } from './components/Headline.js';
+export { default as Icon } from './components/Icon.js';
+export { default as IconButton } from './components/IconButton.js';
+export { default as Input } from './components/Input.js';
+export { default as Label } from './components/Label.js';
+export { default as Layout } from './components/Layout.js';
+export { default as List } from './components/List.js';
+export { default as ListItem } from './components/ListItem.js';
+export { default as ListOption } from './components/ListOption.js';
+export { default as ListSelect } from './components/ListSelect.js';
+export { default as Menu } from './components/Menu.js';
+export { default as MenuItem } from './components/MenuItem.js';
+export { default as NavBar } from './components/NavBar.js';
+export { default as NavBarItem } from './components/NavBarItem.js';
+export { default as NavDrawer } from './components/NavDrawer.js';
+export { default as NavDrawerItem } from './components/NavDrawerItem.js';
+export { default as NavItem } from './components/NavItem.js';
+export { default as NavRail } from './components/NavRail.js';
+export { default as NavRailItem } from './components/NavRailItem.js';
+export { default as Pane } from './components/Pane.js';
+export { default as Progress } from './components/Progress.js';
+export { default as Radio } from './components/Radio.js';
+export { default as SegmentedButton } from './components/SegmentedButton.js';
+export { default as SegmentedButtonGroup } from './components/SegmentedButtonGroup.js';
+export { default as Select } from './components/Select.js';
+export { default as Slider } from './components/Slider.js';
+export { default as Snackbar } from './components/Snackbar.js';
+export { default as Surface } from './components/Surface.js';
+export { default as Switch } from './components/Switch.js';
+export { default as Tab } from './components/Tab.js';
+export { default as TabContent } from './components/TabContent.js';
+export { default as TabList } from './components/TabList.js';
+export { default as TabPanel } from './components/TabPanel.js';
+export { default as TextArea } from './components/TextArea.js';
+export { default as Title } from './components/Title.js';
+export { default as Tooltip } from './components/Tooltip.js';
+export { default as TopAppBar } from './components/TopAppBar.js';
+
+export { default as CustomElement } from './core/CustomElement.js';
+export { default as Composition } from './core/Composition.js';
+
+export { default as InputMixin } from './mixins/InputMixin.js';
+export { default as AriaReflectorMixin } from './mixins/AriaReflectorMixin.js';
+export { default as ControlMixin } from './mixins/ControlMixin.js';
+export { default as RTLObserverMixin } from './mixins/RTLObserverMixin.js';
+export { default as TouchTargetMixin } from './mixins/TouchTargetMixin.js';
+export { default as ShapeMixin } from './mixins/ShapeMixin.js';
+export { default as RippleMixin } from './mixins/RippleMixin.js';
+export { default as FormAssociatedMixin } from './mixins/FormAssociatedMixin.js';
+export { default as KeyboardNavMixin } from './mixins/KeyboardNavMixin.js';
+export { default as ResizeObserverMixin } from './mixins/ResizeObserverMixin.js';
+export { default as DensityMixin } from './mixins/DensityMixin.js';
+export { default as TooltipTriggerMixin } from './mixins/TooltipTriggerMixin.js';
+export { default as ScrollListenerMixin } from './mixins/ScrollListenerMixin.js';
+export { default as FlexableMixin } from './mixins/FlexableMixin.js';
+export { default as ThemableMixin } from './mixins/ThemableMixin.js';
+export { default as AriaToolbarMixin } from './mixins/AriaToolbarMixin.js';
+export { default as TextFieldMixin } from './mixins/TextFieldMixin.js';
+export { default as SurfaceMixin } from './mixins/SurfaceMixin.js';
+export { default as StateMixin } from './mixins/StateMixin.js';
+
+export * as themeLoader from './theming/loader.js';
+
+export * as theming from './theming/index.js';

package/mixins/ControlMixin.js

@@ -1,6 +1,5 @@
 /* https://html.spec.whatwg.org/multipage/form-control-infrastructure.html */
 
-import styles from './ControlMixin.css' assert { type: 'css' };
 import FormAssociatedMixin from './FormAssociatedMixin.js';
 
 /** @typedef {import('../core/CustomElement.js').default} CustomElement */
@@ -36,6 +35,71 @@ export default function ControlMixin(Base) {
     /** @type {string[]} */
     static valueChangingContentAttributes = [];
 
+    static {
+      // eslint-disable-next-line no-unused-expressions
+      this.css`
+        
+        :host {
+          display: inline-flex;
+        }
+        
+        /* Remove Firefox inner */
+        :host(::-moz-focus-inner) {
+          border: 0;
+        }
+        
+        #label {
+          display: contents;
+        
+          pointer-events: none;
+        }
+        
+        #control {
+          /* Control is the touch target */
+          /* Firefox requires at least 1px "visible" for screen reading */
+          /* Safari will not allow interaction with 0 opacity */
+          /* Chrome will not focus with visibility:hidden */
+        
+          position: absolute;
+          inset: 50%;
+          /* --mdw-device-pixel-ratio: 1; */
+        
+          block-size: 100%;
+          min-block-size: 48px;
+          inline-size:100%;
+          min-inline-size: 48px;
+          margin: 0;
+          border: 0;
+          padding: 0;
+        
+          -webkit-appearance: none;
+          -moz-appearance: none;
+          appearance: none;
+        
+          cursor: auto;
+          outline: none;
+        
+          pointer-events: auto;
+        
+          transform: translateX(-50%) translateY(-50%);
+        
+          /* Safari and Chrome will emit two click events if not at top of stack */
+          /* Allows up to 3 other layers (eg: ripple, outline) */
+          z-index: 4;
+        
+          background-color: transparent;
+        
+          border-radius: 0;
+          color: transparent;
+        }
+        
+        #control::-moz-focus-inner {
+          border: 0;
+        }
+      
+      `;
+    }
+
     /** @param {any[]} args  */
     constructor(...args) {
       super(...args);
@@ -89,7 +153,6 @@ export default function ControlMixin(Base) {
     }
 
     static {
-      this.css(styles);
       this.on({
         // Wait until controlTagName is settled before templating
         composed({ template, html }) {

package/mixins/DensityMixin.js

@@ -1,5 +1,3 @@
-import styles from './DensityMixin.css' assert {type: 'css'};
-
 /** @param {typeof import('../core/CustomElement.js').default} Base */
 export default function DensityMixin(Base) {
   return Base
@@ -7,5 +5,21 @@ export default function DensityMixin(Base) {
     .observe({
       density: 'integer',
     })
-    .css(styles);
+    .css`
+      :host {
+        --mdw-density: var(--mdw-density__default, 0);
+      }
+      
+      /* Reset */
+      :host([density]) { --mdw-density: 0; }
+      
+      :host([density="-1"]) { --mdw-density: -1; }
+      :host([density="-2"]) { --mdw-density: -2; }
+      :host([density="-3"]) { --mdw-density: -2; }
+      :host([density="-4"]) { --mdw-density: -4; }
+      :host([density="1"]) { --mdw-density: 1; }
+      :host([density="2"]) { --mdw-density: 2; }
+      :host([density="3"]) { --mdw-density: 3; }
+      :host([density="4"]) { --mdw-density: 3; }
+    `;
 }

package/mixins/FlexableMixin.js

@@ -1,5 +1,3 @@
-import styles from './FlexableMixin.css' assert {type: 'css'};
-
 /**
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
@@ -28,5 +26,85 @@ export default function FlexableMixin(Base) {
       gap: 'float',
       padding: 'float',
     })
-    .css(styles);
+    .css`
+      /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
+
+      :host{
+        box-sizing: border-box;
+      }
+
+      :host([flex]) {
+        display:flex;
+      }
+
+      :host([flex="column"]) {
+        flex-direction: column;
+      }
+
+      :host(:where([flex][y="start"], [flex="column"][x="start"])) {
+        align-items: flex-start;
+      }
+
+      :host(:where([flex][y="end"], [flex="column"][x="end"])) {
+        align-items: flex-end;
+      }
+
+      :host(:where([flex][y="center"], [flex="column"][x="center"])) {
+        align-items: center;
+      }
+
+      :host(:where([flex][y="between"], [flex="column"][x="between"])) {
+        align-items: space-between;
+      }
+
+      :host(:where([flex][y="around"], [flex="column"][x="around"])) {
+        align-items: space-around;
+      }
+
+      :host(:where([flex][y="stretch"], [flex="column"][x="stretch"])) {
+        align-items: stretch;
+      }
+
+      :host(:where([flex][x="start"], [flex="column"][y="start"])) {
+        justify-content: flex-start;
+      }
+
+      :host(:where([flex][x="end"], [flex="column"][y="end"])) {
+        justify-content: flex-end;
+      }
+
+      :host(:where([flex][x="center"], [flex="column"][y="center"])) {
+        justify-content: center;
+      }
+
+      :host(:where([flex][x="between"], [flex="column"][y="between"])) {
+        justify-content: space-between;
+      }
+
+      :host(:where([flex][x="stretch"], [flex="column"][y="stretch"])) {
+        justify-content: space-around;
+      }
+
+      :host([wrap]) {
+        flex-wrap: wrap;
+      }
+
+      :host([wrap="reverse"]) {
+        flex-wrap: wrap-reverse;
+      }
+
+      :host([gap="4"]) {gap: 4px;}
+      :host([gap="8"]) {gap: 8px;}
+      :host([gap="12"]) {gap: 12px;}
+      :host([gap="16"]) {gap: 16px;}
+      :host([gap="20"]) {gap: 20px;}
+      :host([gap="24"]) {gap: 24px;}
+
+      :host([padding="4"]) {padding: 4px;}
+      :host([padding="8"]) {padding: 8px;}
+      :host([padding="12"]) {padding: 12px;}
+      :host([padding="16"]) {padding: 16px;}
+      :host([padding="20"]) {padding: 20px;}
+      :host([padding="24"]) {padding: 24px;}
+    `;
 }