@shortfuse/materialdesignweb 0.7.0 → 0.7.1-0

package/components/Badge.css

@@ -6,6 +6,9 @@
   --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);
@@ -20,11 +23,16 @@
 
 @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/Button.css

@@ -12,6 +12,7 @@
   align-items: center;
   gap: 0;
   justify-content: center;
+  vertical-align: middle;
 
   /* box-sizing: border-box; */
   min-block-size: 24px;

package/components/Checkbox.css

@@ -5,7 +5,7 @@
   --mdw-bg: var(--mdw-color__primary);
 
   display: inline-grid;
-  align-items: center;
+  align-items: baseline;
   gap: 12px;
   grid-auto-flow: column;
   justify-content: flex-start;
@@ -15,6 +15,20 @@
   transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
 }
 
+:host([disabled]) {
+  opacity: 0.38;
+}
+
+:host(:empty) {
+  vertical-align: -11.5%;
+
+  line-height: 18px;
+}
+
+:host(:empty) #checkbox {
+  transform: none;
+}
+
 #control {
   grid-column: 1/1;
 
@@ -42,10 +56,6 @@
   border-radius: 50%;
 }
 
-:host([disabled]) {
-  opacity: 0.38;
-}
-
 #checkbox {
   position: relative;
 
@@ -55,6 +65,8 @@
 
   pointer-events: none;
 
+  transform: translateY(11.5%);
+
   color: rgb(var(--mdw-color__on-surface));
 }
 

package/components/CheckboxIcon.css

@@ -16,6 +16,7 @@
   inline-size: 18px;
 
   font-size: 18px;
+  line-height: 18px;
 }
 
 #shape {

package/components/IconButton.css

@@ -4,7 +4,6 @@
   --mdw-shape__size: var(--mdw-shape__full);
   --mdw-ink: rgb(var(--mdw-color__on-surface-variant));
 
-  display: flex;
   align-items: center;
   justify-content: center;
 

package/components/NavRail.css

@@ -1,7 +1,7 @@
 /* https://m3.material.io/components/navigation-rail/specs */
 
 :host{
-  display: inline-grid;
+  display: grid;
   align-content: flex-start;
   flex-direction: column;
   grid-template-rows: auto minmax(0,1fr);

package/components/Progress.css

@@ -8,6 +8,7 @@
 
   display: inline-block;
   overflow: hidden;
+  vertical-align: middle;
 
   min-block-size: 4px;
   inline-size: 100%;

package/components/Radio.css

@@ -4,7 +4,7 @@
   --mdw-ink: var(--mdw-color__primary);
   --mdw-shape__size: var(--mdw-shape__full);
   display: inline-grid;
-  align-items: center;
+  align-items: baseline;
   gap: 12px;
   grid-auto-flow: column;
   grid-template-rows: minmax(20px, auto);
@@ -16,6 +16,16 @@
   transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
 }
 
+:host(:empty) {
+  vertical-align: -11.5%;
+
+  line-height: 20px;
+}
+
+:host(:empty) #radio {
+  transform: none;
+}
+
 #control {
   grid-column: 1/1;
 
@@ -62,6 +72,8 @@
 
   pointer-events: none;
 
+  transform: translateY(11.5%);
+
   color: rgb(var(--mdw-color__on-surface));
 }
 

package/components/SegmentedButtonGroup.css

@@ -4,7 +4,7 @@
   --mdw-bg: var(--mdw-color__secondary-container);
   --mdw-ink: var(--mdw-color__on-secondary-container);
 
-  display: flex;
+  display: inline-flex;
 }
 
 :host([color]) {

package/components/Slider.css

@@ -4,7 +4,8 @@
   --mdw-ink: var(--mdw-color__on-primary);
   --mdw-bg: var(--mdw-color__primary);
 
-  display: block;
+  display: inline-block;
+  vertical-align: middle;
 
   min-block-size: 40px;
   min-inline-size: 88px;

package/components/Switch.css

@@ -9,6 +9,7 @@
   align-items: center;
 
   gap: 12px;
+  vertical-align: middle;
 
 }
 

package/components/SwitchIcon.css

@@ -5,16 +5,17 @@
   --mdw-bg: var(--mdw-color__primary);
   --mdw-shape__size: var(--mdw-shape__full);
   --mdw-switch__value: 0;
-  container-type: inline-size;
-  container-name: switch-icon;
 
   position: relative;
 
   display: inline-block;
+  vertical-align: middle;
 
   box-sizing: border-box;
   block-size: 32px;
   inline-size: 52px;
+  container-type: inline-size;
+  container-name: switch-icon;
 }
 
 :host([selected]) {

package/components/TextArea.css

@@ -1,7 +1,7 @@
 /* https://m3.material.io/components/text-fields/specs */
 
 :host {
-  display: grid;
+  display: inline-grid;
   grid-auto-flow: row;
   grid-template-rows: minmax(0, 100%);
 }

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/TextFieldMixin.css

@@ -43,7 +43,7 @@
   --mdw-type__font: var(--mdw-typescale__body-large__font);
   --mdw-type__letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
 
-  display: block;
+  display: inline-block;
 
   /* State layer */
   color: rgb(var(--mdw-color__on-surface));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shortfuse/materialdesignweb",
-  "version": "0.7.0",
+  "version": "0.7.1-0",
   "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"

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/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