@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-2

package/mixins/ThemableMixin.js

@@ -1,5 +1,3 @@
-import styles from './ThemableMixin.css' assert { type: 'css' };
-
 /**
  * @param {typeof import('../core/CustomElement.js').default} Base
  */
@@ -12,5 +10,210 @@ export default function ThemableMixin(Base) {
       block: 'boolean',
       typeStyle: 'string',
     })
-    .css(styles);
+    .css`
+      :host([color="primary"]) {
+        --mdw-bg: var(--mdw-color__primary);
+        --mdw-ink: var(--mdw-color__on-primary);
+      }
+      
+      :host([color="primary-container"]) {
+        --mdw-bg: var(--mdw-color__primary-container);
+        --mdw-ink: var(--mdw-color__on-primary-container);
+      }
+      
+      :host([color="secondary"]) {
+        --mdw-bg: var(--mdw-color__secondary);
+        --mdw-ink: var(--mdw-color__on-secondary);
+      }
+      
+      :host([color="secondary-container"]) {
+        --mdw-bg: var(--mdw-color__secondary-container);
+        --mdw-ink: var(--mdw-color__on-secondary-container);
+      }
+      
+      :host([color="tertiary"]) {
+        --mdw-bg: var(--mdw-color__tertiary);
+        --mdw-ink: var(--mdw-color__on-tertiary);
+      }
+      
+      :host([color="tertiary-container"]) {
+        --mdw-bg: var(--mdw-color__tertiary-container);
+        --mdw-ink: var(--mdw-color__on-tertiary-container);
+      }
+      
+      :host([color="error"]) {
+        --mdw-bg: var(--mdw-color__error);
+        --mdw-ink: var(--mdw-color__on-error);
+      }
+      
+      :host([color="error-container"]) {
+        --mdw-bg: var(--mdw-color__error-container);
+        --mdw-ink: var(--mdw-color__on-error-container);
+      }
+      
+      :host([color="background"]) {
+        --mdw-bg: var(--mdw-color__background);
+        --mdw-ink: var(--mdw-color__on-background);
+      }
+      
+      :host([color^="surface"]) {
+        --mdw-bg: var(--mdw-color__surface);
+        --mdw-ink: var(--mdw-color__on-surface);
+      }
+      
+      /* Quality-of-life */
+      :host([color="surface-primary"]) {
+        --mdw-ink: var(--mdw-color__primary);
+      }
+      
+      :host([color$="variant"]) {
+        --mdw-bg: var(--mdw-color__surface-variant);
+        --mdw-ink: var(--mdw-color__on-surface-variant);
+      }
+      
+      :host([color^="inverse"]) {
+        --mdw-bg: var(--mdw-color__inverse-surface);
+        --mdw-ink: var(--mdw-color__inverse-on-surface);
+      }
+      
+      :host([color="inverse-primary"]) {
+        --mdw-ink: var(--mdw-color__inverse-primary);
+      }
+      
+      :host([color][disabled]) {
+        /* background-color: rgba(var(--mdw-color__on-surface), 0.12); */
+        /* color: rgba(var(--mdw-color__on-surface), 0.38); */
+      }
+      
+      :host([ink="inverse-primary"]) {
+        --mdw-ink: var(--mdw-color__inverse-primary);
+      }
+      
+      :host([ink="primary"]) {
+        --mdw-ink: var(--mdw-color__primary);
+      }
+      
+      :host([ink="on-primary-container"]) {
+        --mdw-ink: var(--mdw-color__on-primary-container);
+      }
+      
+      :host([ink="secondary"]) {
+        --mdw-ink: var(--mdw-color__secondary);
+      }
+      
+      :host([ink="on-secondary-container"]) {
+        --mdw-ink: var(--mdw-color__on-secondary-container);
+      }
+      
+      :host([ink="tertiary"]) {
+        --mdw-ink: var(--mdw-color__tertiary);
+      }
+      
+      :host([ink="on-tertiary-container"]) {
+        --mdw-ink: var(--mdw-color__on-tertiary-container);
+      }
+      
+      :host([ink="error"]) {
+        --mdw-ink: var(--mdw-color__error);
+      }
+      
+      :host([ink="outline"]) {
+        --mdw-ink: var(--mdw-color__outline);
+      }
+      
+      :host([ink="on-surface"]) {
+        --mdw-ink: var(--mdw-color__on-surface);
+      }
+      
+      :host([ink="surface-variant"]) {
+        --mdw-ink: var(--mdw-color__surface-variant);
+      }
+      
+      :host([ink="on-surface-variant"]) {
+        --mdw-ink: var(--mdw-color__on-surface-variant);
+      }
+      
+      :host([ink="inverse-on-surface"]) {
+        --mdw-ink: var(--mdw-color__inverse-on-surface);
+      }
+      
+      :host([ink="inherit"]) {
+        --mdw-ink: inherit;
+      }
+      
+      :host([type-style|="display"]) {
+        --mdw-type__font: var(--mdw-typescale__display-large__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__display-large__letter-spacing);
+      }
+      
+      :host([type-style="display-medium"]) {
+        --mdw-type__font: var(--mdw-typescale__display-medium__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__display-medium__letter-spacing);
+      }
+      
+      :host([type-style="display-small"]) {
+        --mdw-type__font: var(--mdw-typescale__display-small__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__display-small__letter-spacing);
+      }
+      
+      :host([type-style|="headline"]) {
+        --mdw-type__font: var(--mdw-typescale__headline-large__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__headline-large__letter-spacing);
+      }
+      
+      :host([type-style="headline-medium"]) {
+        --mdw-type__font: var(--mdw-typescale__headline-medium__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__headline-medium__letter-spacing);
+      }
+      
+      :host([type-style="headline-small"]) {
+        --mdw-type__font: var(--mdw-typescale__headline-small__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
+      }
+      
+      :host([type-style|="title"]) {
+        --mdw-type__font: var(--mdw-typescale__title-large__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__title-large__letter-spacing);
+      }
+      
+      :host([type-style="title-medium"]) {
+        --mdw-type__font: var(--mdw-typescale__title-medium__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__title-medium__letter-spacing);
+      }
+      
+      :host([type-style="title-small"]) {
+        --mdw-type__font: var(--mdw-typescale__title-small__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__title-small__letter-spacing);
+      }
+      
+      :host([type-style|="label"]) {
+        --mdw-type__font: var(--mdw-typescale__label-large__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
+      }
+      
+      :host([type-style="label-medium"]) {
+        --mdw-type__font: var(--mdw-typescale__label-medium__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
+      }
+      
+      :host([type-style="label-small"]) {
+        --mdw-type__font: var(--mdw-typescale__label-small__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__label-small__letter-spacing);
+      }
+      
+      :host([type-style|="body"]) {
+        --mdw-type__font: var(--mdw-typescale__body-large__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
+      }
+      
+      :host([type-style="body-medium"]) {
+        --mdw-type__font: var(--mdw-typescale__body-medium__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+      }
+      
+      :host([type-style="body-small"]) {
+        --mdw-type__font: var(--mdw-typescale__body-small__font);
+        --mdw-type__letter-spacing: var(--mdw-typescale__body-small__letter-spacing);
+      }    
+    `;
 }

package/mixins/TooltipTriggerMixin.js

@@ -1,16 +1,12 @@
 import Tooltip from '../components/Tooltip.js';
 import { canAnchorPopup } from '../utils/popup.js';
 
-import styles from './TooltipTriggerMixin.css' assert { type: 'css' };
-
 /**
  * @param {ReturnType<import('./StateMixin.js').default>} Base
  */
 export default function TooltipTriggerMixin(Base) {
   class TooltipTrigger extends Base {
     static {
-      this.css(styles);
-
       this.on({
         composed({ template, html }) {
           template.append(html`
@@ -21,6 +17,36 @@ export default function TooltipTriggerMixin(Base) {
           `);
         },
       });
+      // eslint-disable-next-line no-unused-expressions
+      this.css`
+        #tooltip {
+          position:absolute;
+        
+          overflow: hidden;
+        
+          box-sizing: content-box;
+        
+          block-size: 0;
+          inline-size: 0;
+          margin: 0;
+          padding: 0;
+        
+          transform: none;
+        }
+        
+        #tooltip[open] {
+          display: block;
+        
+          block-size: auto;
+          inline-size: auto;
+        
+          cursor: default;
+          pointer-events:auto;
+        
+          opacity: 0;
+          transform: none;
+        }
+      `;
     }
 
     static TOOLTIP_MOUSE_IDLE_MS = 500;

package/mixins/TouchTargetMixin.js

@@ -1,9 +1,34 @@
-import styles from './TouchTargetMixin.css' assert { type: 'css' };
-
 /** @param {typeof import('../core/CustomElement.js').default} Base */
 export default function TouchTargetMixin(Base) {
   return Base
     .extend()
-    .css(styles)
-    .html/* html */`<div id=touch-target class=touch-target></div>`;
+    .html/* html */`<div id=touch-target class=touch-target></div>`
+    .css`
+      .touch-target {
+        position: absolute;
+        inset: 50%;
+        /* --mdw-device-pixel-ratio: 1; */
+      
+        block-size: 100%;
+        min-block-size: 48px;
+        /* min-block-size: 10mm; */
+        /* min-block-size: calc(0.393701in / var(--mdw-device-pixel-ratio, 1)); */
+        inline-size:100%;
+        min-inline-size: 48px;
+        /* min-inline-size: 10mm; */
+        /* min-inline-size: calc(0.393701in / var(--mdw-device-pixel-ratio, 1)); */
+      
+        cursor: inherit;
+      
+        /* box-sizing: border-box; */
+        /* border: solid 1px magenta; */
+        pointer-events: auto;
+      
+        transform: translateX(-50%) translateY(-50%);
+        visibility: visible;
+        z-index: 1;
+      
+        border-radius: inherit;
+      }
+    `;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shortfuse/materialdesignweb",
-  "version": "0.7.1-0",
+  "version": "0.7.1-2",
   "description": "Material Design for Web",
   "type": "module",
   "scripts": {
@@ -61,6 +61,7 @@
     "c8": "^7.12.0",
     "element-internals-polyfill": "^1.1.11",
     "esbuild": "^0.17.12",
+    "esbuild-minify-templates": "^0.10.0",
     "eslint": "^8.24.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-compat": "^4.0.2",

package/theming/loader.js

@@ -1,7 +1,6 @@
 import { css } from '../core/template.js';
 
 import {
-  generateLayoutGlobalCSS,
   generateThemeCSS,
   generateTypographyGlobalCSS,
   themeOptionsFromSearchParams,
@@ -10,7 +9,6 @@ import {
 const rules = [
   generateThemeCSS(themeOptionsFromSearchParams(new URL(import.meta.url).searchParams)),
   generateTypographyGlobalCSS(),
-  generateLayoutGlobalCSS(),
 ].join('\n');
 
 const parsed = css`${rules}`;

package/components/Badge.css

@@ -1,38 +0,0 @@
-:host {
-  --mdw-shape__size: 8px;
-  --mdw-ink: var(--mdw-color__on-error);
-  --mdw-shape__bg: rgb(var(--mdw-color__error));
-  --mdw-type__font: var(--mdw-typescale__label-small__font);
-  --mdw-type__letter-spacing: var(--mdw-typescale__label-small__letter-spacing);
-  position: relative;
-
-  display: inline-block;
-  vertical-align: middle;
-
-  box-sizing: border-box;
-  min-block-size: var(--mdw-typescale__label-small__line-height);
-  min-inline-size: var(--mdw-typescale__label-small__line-height);
-  padding-inline: max(4px, calc(4px + (var(--mdw-density) * 2px)));
-
-  color: rgb(var(--mdw-ink));
-
-  font: var(--mdw-type__font);
-  letter-spacing: var(--mdw-type__letter-spacing);
-  text-align: center;
-}
-
-@supports (width: 1lh) {
-  :host {
-    min-block-size: 1lh; /* Clamps to 1:1 */
-    min-inline-size: 1lh; /* Clamps to 1:1 */
-    padding-inline: max(0.25lh, calc(0.25lh + (var(--mdw-density) * 2px)));
-  }
-}
-
-:host(:empty) {
-  vertical-align: middle;
-}
-
-:host(:empty) #shape {
-  inset: 5px;
-}

package/components/Body.css

@@ -1,14 +0,0 @@
-:host {
-  font: var(--mdw-typescale__body-large__font);
-  letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
-}
-
-:host([size="medium"]) {
-  font: var(--mdw-typescale__body-medium__font);
-  letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
-}
-
-:host([size="small"]) {
-  font: var(--mdw-typescale__body-small__font);
-  letter-spacing: var(--mdw-typescale__body-small__letter-spacing);
-}

package/components/BottomAppBar.css

@@ -1,23 +0,0 @@
-/* https://m3.material.io/components/bottom-app-bar/specs */
-
-:host {
-  --mdw-surface__tint: var(--mdw-surface__tint__2);
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
-  --mdw-bg: var(--mdw-color__surface);
-  --mdw-ink: var(--mdw-color__on-surface);
-
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  justify-content: flex-start;
-
-  box-sizing: content-box;
-  /* Don't apply density */
-  block-size: 56px;
-  padding-block: 12px;
-  padding-inline: 8px 16px;
-
-  box-shadow: none;
-
-  direction: ltr;
-}

package/components/Box.css

@@ -1,31 +0,0 @@
-:host {
-  display: block;
-}
-
-:host([inline]) {
-  display: inline-block;
-}
-
-:host([flex]:where([inline])) {
-  display: inline-flex;
-}
-
-:host([color]) {
-  background-color: rgb(var(--mdw-bg));
-  color: rgb(var(--mdw-ink));
-}
-
-:host([ink]) {
-  color: rgb(var(--mdw-ink));
-}
-
-:host([type-style]) {
-  font: var(--mdw-type__font);
-  letter-spacing: var(--mdw-type__letter-spacing);
-}
-
-#slot {
-  /* Passthrough from parent */
-  block-size: inherit;
-  inline-size: inherit;
-}

package/components/Button.css

@@ -1,147 +0,0 @@
-/* https://m3.material.io/components/buttons/specs */
-
-:host {
-  --mdw-shape__size: var(--mdw-shape__full);
-  --mdw-ink: var(--mdw-color__primary);
-
-  --mdw-type__font: var(--mdw-typescale__label-large__font);
-  --mdw-type__letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
-
-  display: inline-flex;
-
-  align-items: center;
-  gap: 0;
-  justify-content: center;
-  vertical-align: middle;
-
-  /* box-sizing: border-box; */
-  min-block-size: 24px;
-  min-inline-size: 24px;
-
-  padding-block: calc(8px + (var(--mdw-density) * 2px));
-  padding-inline: calc(12px + (var(--mdw-density) * 2px));
-
-  -webkit-tap-highlight-color: transparent;
-  -webkit-user-select: none;
-  user-select: none;
-
-  color: rgb(var(--mdw-ink));
-
-  font: var(--mdw-type__font);
-  letter-spacing: var(--mdw-type__letter-spacing);
-}
-
-:host(:where([elevated],[filled])) {
-  will-change: filter;
-}
-
-/** Elevated Color Defaults */
-:host(:where([elevated])) {
-  --mdw-bg: var(--mdw-color__surface);
-  --mdw-ink: var(--mdw-color__primary);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
-  --mdw-surface__tint: var(--mdw-surface__tint__1);
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
-}
-/** Filled Color Defaults */
-:host(:where([filled])) {
-  --mdw-bg: var(--mdw-color__primary);
-  --mdw-ink: var(--mdw-color__on-primary);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
-  --mdw-surface__tint: 0;
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
-}
-/** Filled Tonal Color Defaults */
-:host(:where([filled="tonal"])) {
-  --mdw-bg: var(--mdw-color__secondary-container);
-  --mdw-ink: var(--mdw-color__on-secondary-container);
-}
-/** Outlined Color Defaults */
-:host(:where([outlined])) {
-  --mdw-ink: var(--mdw-color__primary);
-}
-
-:host(:where([icon])) {
-  gap: 8px;
-
-  padding-inline: calc(12px + (var(--mdw-density) * 2px)) calc(16px + (var(--mdw-density) * 2px));
-}
-
-:host(:where([outlined], [elevated], [filled])) {
-  padding-inline: calc(24px + (var(--mdw-density) * 2px));
-}
-
-:host(:where([icon]):where([outlined], [elevated], [filled])) {
-  gap: 8px;
-
-  padding-inline: calc(16px + (var(--mdw-density) * 2px)) calc(24px + (var(--mdw-density) * 2px));
-}
-
-#shape:where([elevated],[filled],[color]) {
-  background-color: rgb(var(--mdw-bg));
-}
-
-#slot {
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-#control {
-  cursor: inherit;
-}
-
-:host([disabled]) {
-  /* cursor: not-allowed; */
-
-  color: rgba(var(--mdw-color__on-surface), 0.38);
-}
-
-#shape[disabled]:is([elevated], [filled]) {
-  background-color: rgba(var(--mdw-color__on-surface), 0.12);
-  color: rgba(var(--mdw-color__on-surface), 0.38);
-}
-
-#slot[disabled] {
-  color: rgba(var(--mdw-color__on-surface), 0.38);
-}
-
-#icon {
-  font-size: calc(18/14 * 1em);
-  font-variation-settings: 'FILL' 1;
-}
-
-#icon[outlined] {
-  font-variation-settings: 'FILL' 0;
-}
-
-#icon[disabled] {
-  opacity: 0.38;
-
-  color: rgba(var(--mdw-color__on-surface));
-}
-
-#label {
-  cursor: pointer;
-}
-
-#label[disabled] {
-  cursor: not-allowed;
-}
-
-/*
-@media screen and (max-resolution: 0.75dppx) { #touch-target { --mdw-device-pixel-ratio: 0.75; } }
-@media screen and (max-resolution: 0.85dppx) { #touch-target { --mdw-device-pixel-ratio: 0.90; } }
-@media screen and (max-resolution: 0.90dppx) { #touch-target { --mdw-device-pixel-ratio: 0.90; } }
-@media screen and (min-resolution: 1.5dppx) { #touch-target { --mdw-device-pixel-ratio: 1.5; } }
-@media screen and (min-resolution: 1.75dppx) { #touch-target { --mdw-device-pixel-ratio: 1.75; } }
-@media screen and (min-resolution: 2dppx) { #touch-target { --mdw-device-pixel-ratio: 2; } }
-*/
-
-@media (any-pointer: coarse) {
-  #touch-target {
-    visibility: visible;
-  }
-}

package/components/Card.css

@@ -1,109 +0,0 @@
-/* https://m3.material.io/components/cards/specs */
-
-:host {
-  --mdw-shape__size: 12px;
-  --mdw-surface__tint: var(--mdw-surface__tint__0);
-  --mdw-surface__tint__raised: var(--mdw-surface__tint);
-
-  --mdw-surface__shadow__resting: none;
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
-  /* padding-inline: 12px; */
-
-  --mdw-bg: var(--mdw-color__surface);
-  --mdw-ink: var(--mdw-color__on-surface);
-  position: relative;
-
-  display: block;
-
-  color: rgb(var(--mdw-ink));
-
-  font: var(--mdw-type__font);
-  letter-spacing: var(--mdw-type__letter-spacing);
-}
-
-#shape:is([elevated],[filled]) {
-  background-color: rgb(var(--mdw-bg));
-}
-
-:host(:where([filled])) {
-  --mdw-bg: var(--mdw-color__surface-variant);
-  --mdw-ink: var(--mdw-color__on-surface-variant);
-}
-
-:host(:where([elevated])) {
-  --mdw-bg: var(--mdw-color__surface);
-  --mdw-ink: var(--mdw-color__on-surface);
-}
-
-:host([filled]) {
-  --mdw-surface__tint: var(--mdw-surface__tint__0);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
-}
-
-:host([filled][actionable]) {
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
-}
-
-:host([elevated]) {
-  --mdw-surface__tint: var(--mdw-surface__tint__1);
-  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
-}
-
-:host([elevated][actionable]) {
-  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
-  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
-}
-
-#shape[disabled] {
-
-  /* Works on images */
-  filter: grayscale();
-
-  color: rgb(var(--mdw-color__on-surface));
-}
-
-:host([disabled]) {
-  cursor: not-allowed;
-
-  filter: grayscale();
-  opacity: 0.38;
-}
-
-#slot[disabled] {
-  color: rgb(var(--mdw-color__on-surface));
-}
-
-#outline[disabled] {
-  color: rgba(var(--mdw-color__on-surface), calc(0.12/0.38));
-}
-
-/** Firefox and Safari do not support [inert] */
-
-#inert-blocker {
-  position: absolute;
-  inset: 0;
-
-  cursor: not-allowed;
-  pointer-events: auto;
-
-  z-index: 99;
-}
-
-#shape[disabled][elevated] {
-  background-color: rgba(var(--mdw-color__surface-variant));
-}
-
-#action {
-  --mdw-ink: inherit;
-  --mdw-shape__size: inherit;
-
-  position: absolute;
-  inset: 0;
-
-  padding: 0;
-
-  z-index: 0;
-
-  color: inherit
-}