@shortfuse/materialdesignweb 0.7.0 → 0.7.1-1

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.0",
+  "version": "0.7.1-1",
   "description": "Material Design for Web",
   "type": "module",
   "scripts": {
@@ -12,6 +12,7 @@
     "pretest": "eslint --ignore-path .gitignore",
     "test": "c8 tap --no-coverage"
   },
+  "main": "index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/clshortfuse/materialdesignweb.git"
@@ -60,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/index.js

@@ -10,53 +10,6 @@ import { svgToCSSURL } from '../utils/svg.js';
  * @return {string}
  */
 
-/** @return {string} */
-function cornerCutClipPath() {
-  const TOP = 0;
-  const END = '100%';
-  const BOTTOM = '100%';
-  const START = 0;
-
-  const TOP_START_SIZE = 'var(--mdw-shape__size__top-start-size)';
-  const TOP_END_SIZE = 'var(--mdw-shape__size__top-end-size)';
-  const BOTTOM_START_SIZE = 'var(--mdw-shape__size__bottom-start-size)';
-  const BOTTOM_END_SIZE = 'var(--mdw-shape__size__bottom-end-size)';
-
-  const TOP_INSET = (size) => `min(${size},50%)`;
-  const START_INSET = (size) => `min(${size},50%)`;
-  const END_INSET = (size) => `calc(100% - min(${size},50%))`;
-  const BOTTOM_INSET = (size) => `calc(100% - min(${size},50%))`;
-
-  /**
-   *     2           3
-   *   ┌──────────────┐
-   * 1 │              │ 4
-   *   │              │
-   *   │              │
-   *   │              │
-   * 8 │              │ 5
-   *   └──────────────┘
-   *    7            6
-   */
-
-  return `polygon(${
-    [
-      [START, TOP_INSET(TOP_START_SIZE)],
-      [START_INSET(TOP_START_SIZE), TOP],
-
-      [END_INSET(TOP_END_SIZE), TOP],
-      [END, TOP_INSET(TOP_END_SIZE)],
-
-      [END, BOTTOM_INSET(BOTTOM_END_SIZE)],
-      [END_INSET(BOTTOM_END_SIZE), BOTTOM],
-
-      [START_INSET(BOTTOM_START_SIZE), BOTTOM],
-      [START, BOTTOM_INSET(BOTTOM_START_SIZE)],
-
-    ].map((coordinates) => coordinates.join(' ')).join(', ')
-  })`;
-}
-
 /**
  * @param {string} shape
  * @return {string}
@@ -156,31 +109,6 @@ const SHAPE_SQUIRCLE_DEFAULT = {
   mask: SQUIRCLE_PATH,
 };
 
-const LAYOUT_DEFAULT = {
-  density: 0,
-  body: {
-    0: 'calc(100% - 32px)',
-    '600px': 'calc(100% - 64px)',
-    '904px': '840px',
-    '1240px': 'calc(100% - 200px)',
-    '1440px': '1040px',
-  },
-  columns: {
-    '0px': 4,
-    '600px': 8,
-    '904px': 12,
-  },
-  alias: {
-    'extra-small': '0px',
-    phone: '0px',
-    small: '600px',
-    medium: '904px',
-    tablet: '600px',
-    laptop: '1240px',
-    large: '1440px',
-  },
-};
-
 const SP = 1 / 16;
 
 const TYPOGRAPHY_DEFAULT = {
@@ -430,55 +358,6 @@ export function generateTypographyGlobalCSS() {
     .join('\n')}}`;
 }
 
-/**
- * @param {LAYOUT_DEFAULT} [config]
- * @return {string}
- */
-export function generateLayoutGlobalCSS(config = LAYOUT_DEFAULT) {
-  /** @type {Map<string, Set<string>>} */
-  const breakpoints = new Map();
-  /**
-   *
-   * @param {string} breakpoint
-   * @return {Set<string>}
-   */
-  function getSet(breakpoint) {
-    let set = breakpoints.get(breakpoint);
-    if (!set) {
-      set = new Set();
-      breakpoints.set(breakpoint, set);
-    }
-    return set;
-  }
-
-  for (const [breakpoint, value] of Object.entries(config.body)) {
-    getSet((breakpoint === '0' || breakpoint === '0px') ? '' : `min-width ${breakpoint}`)
-      .add(`--mdw-breakpoint__body: ${value};`);
-  }
-
-  for (const [breakpoint, value] of Object.entries(config.columns)) {
-    getSet((breakpoint === '0' || breakpoint === '0px') ? '' : `min-width ${breakpoint}`)
-      .add(`--mdw-breakpoint__columns: ${value};`);
-  }
-
-  for (const [alias, value] of Object.entries(config.alias)) {
-    getSet('').add(`--mdw-breakpoint__${alias}: ${value};`);
-  }
-
-  getSet('').add(`--mdw-density__default: ${config.density};`);
-
-  let css = '';
-  for (const [breakpoint, set] of breakpoints) {
-    let rules = `:root { ${[...set].join('')}}`;
-    if (breakpoint) {
-      rules = `@media (min-width: ${breakpoint}) { ${rules} }`;
-    }
-    css += rules;
-  }
-
-  return css;
-}
-
 /**
  * @param {typeof SHAPE_ROUNDED_DEFAULT} config
  * @return {string}

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/utils/svg.js

@@ -1,120 +1,3 @@
-/**
- * @param {string} path
- * @param {Object} [options]
- * @param {number} [options.size=24]
- * @param {boolean} [options.outline] Outline path
- * @return {string}
- */
-export function pathToSVG(path, options = {}) {
-  const svgSize = 24;
-  const outline = options.outline;
-  /* eslint-disable indent */
-  return [
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${svgSize}" height="${svgSize}" preserveAspectRatio="none">`,
-      outline
-       ? `
-        <mask id="m">
-          <rect width="24" height="24" fill="white"/>
-          <path fill="black" d="${path}"/>
-        </mask>
-        <rect width="24" height="24" fill="black" mask="url(#m)"/>
-      `
-      : `<path fill="black" d="${path}"/>`,
-    '</svg>',
-  ].join('');
-  /* eslint-enable indent */
-}
-
-/**
- * @param {string} path
- * @param {Object} [options]
- * @param {number} [options.size=24]
- * @param {boolean} [options.outline] Outline path
- * @return {string}
- */
-export function maskedPathToSVG(path, options = {}) {
-  const svgSize = 24;
-  const outline = options.outline;
-  /* eslint-disable indent */
-  return [
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${svgSize}" height="${svgSize}" preserveAspectRatio="none">`,
-      outline
-       ? `
-       <defs>
-          <path id="p" d="${path}"/>
-        </defs>
-        <mask id="m">
-          <use href="#p" fill="white"/>
-          <use href="#p" fill="black" transform="scale(0.9166666666666667) translate(1 1)"/>
-        </mask>
-        <use href="#p" fill="black" mask="url(#m)"/>
-      `
-      : `<path fill="black" d="${path}"/>`,
-    '</svg>',
-  ].join('');
-  /* eslint-enable indent */
-}
-
-/**
- * @param {string} path
- * @param {Object} [options]
- * @param {number} [options.size=24]
- * @param {string} [options.outline] Outline path
- * @return {string}
- */
-export function auto9SliceSVG(path, options = {}) {
-  const pathSize = options.size ?? 24;
-  const svgSize = 24;
-  const outline = options.outline;
-  /* eslint-disable indent */
-  return [
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${svgSize}" height="${svgSize}">`,
-      '<defs>',
-        `<path id="p" d="${path}"/>`,
-        '<g id="g">',
-          '<use href="#p" transform="translate(0 0)"/>',
-          `<use href="#p" transform="translate(${svgSize - pathSize} 0)"/>`,
-          `<use href="#p" transform="translate(${svgSize - pathSize} ${svgSize - pathSize})"/>`,
-          `<use href="#p" transform="translate(0 ${svgSize - pathSize})"/>`,
-          '<path d="',
-            `M${pathSize / 2} 0`,
-            `H${svgSize - (pathSize / 2)}`,
-            `V${pathSize / 2}`,
-            `H${svgSize}`,
-            `V${svgSize - (pathSize / 2)}`,
-            `H${svgSize - (pathSize / 2)}`,
-            `V${svgSize}`,
-            `H${pathSize / 2}`,
-            `V${svgSize - (pathSize / 2)}`,
-            'H0',
-            `V${pathSize / 2}`,
-            `H${pathSize / 2}`,
-            'Z',
-          '"/>',
-        '</g>',
-      '</defs>',
-      outline
-      ? [
-        '<mask id="m">',
-          '<use href="#g" fill="white"/>',
-          `<use href="#g" fill="black" transform="scale(0.5) translate(${pathSize / 2} ${pathSize / 2})" />`,
-          `<use href="#g" fill="black" transform="scale(0.5) translate(${svgSize - (pathSize / 2)} ${pathSize / 2})" />`,
-          `<use href="#g" fill="black" transform="scale(0.5) translate(${svgSize - (pathSize / 2)} ${svgSize - (pathSize / 2)})" />`,
-          `<use href="#g" fill="black" transform="scale(0.5) translate(${pathSize / 2} ${svgSize - (pathSize / 2)})" />`,
-        '</mask>',
-        '<path d="',
-          'M0 0',
-          `H${svgSize}`,
-          `V${svgSize}`,
-          'H0',
-          'Z',
-        '" fill="black" mask="url(#m)"/>',
-      ].join('') : '<use href="#g" fill="black"/>',
-    '</svg>',
-  ].join('');
-  /* eslint-enable indent */
-}
-
 /**
  * Uses UTF-8 charset instead of base64 for better compression
  * @param {string} svg

package/components/Badge.css

@@ -1,30 +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;
-
-  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-inline-size: 1lh; /* Clamps to 1:1 */
-    padding-inline: max(0.25lh, calc(0.25lh + (var(--mdw-density) * 2px)));
-  }
-}
-
-: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;
-}