@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-1

package/bin/generate-css.js

@@ -1,4 +1,4 @@
-import { generateLayoutGlobalCSS, generateThemeCSS, generateTypographyGlobalCSS, themeOptionsFromSearchParams } from '../theming/index.js';
+import { generateThemeCSS, generateTypographyGlobalCSS, themeOptionsFromSearchParams } from '../theming/index.js';
 import { getSearchParams } from '../utils/cli.js';
 
 process.stdout.write(
@@ -9,4 +9,3 @@ process.stdout.write(
   ),
 );
 process.stdout.write(generateTypographyGlobalCSS());
-process.stdout.write(generateLayoutGlobalCSS());

package/components/Badge.js

@@ -3,13 +3,50 @@ import DensityMixin from '../mixins/DensityMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './Badge.css' assert { type: 'css'};
-
 export default CustomElement
   .mixin(ThemableMixin)
   .mixin(DensityMixin)
   .mixin(ShapeMixin)
   .extend()
-  .css(styles)
   .html/* html */`<slot id=slot></slot>`
+  .css`
+    :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;
+    }
+  `
   .autoRegister('mdw-badge');

package/components/Body.js

@@ -1,7 +1,21 @@
-import styles from './Body.css' assert { type: 'css' };
 import Box from './Box.js';
 
 export default Box
   .extend()
-  .css(styles)
+  .css`
+    :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);
+    }
+  `
   .autoRegister('mdw-body');

package/components/BottomAppBar.js

@@ -1,7 +1,6 @@
 import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
 import AriaToolbarMixin from '../mixins/AriaToolbarMixin.js';
 
-import styles from './BottomAppBar.css' assert { type: 'css' };
 import Surface from './Surface.js';
 
 /**
@@ -21,5 +20,29 @@ export default Surface
   .observe({
     color: { empty: 'surface' },
   })
-  .css(styles)
+  .css`
+    /* 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;
+    }
+  `
   .autoRegister('mdw-bottom-app-bar');

package/components/Box.js

@@ -2,8 +2,6 @@ import CustomElement from '../core/CustomElement.js';
 import FlexableMixin from '../mixins/FlexableMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './Box.css' assert { type: 'css' };
-
 /**
  * Containers are stateless elements that may have a color and ink.
  * They should have simple geometry for rendering and layout.
@@ -19,6 +17,38 @@ export default CustomElement
       empty: true,
     },
   })
-  .css(styles)
+  .css`
+    :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;
+    }
+  `
   .html/* html */`<slot id=slot type-style={typeStyle}></slot>`
   .autoRegister('mdw-box');

package/components/Button.js

@@ -8,8 +8,6 @@ import StateMixin from '../mixins/StateMixin.js';
 import SurfaceMixin from '../mixins/SurfaceMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './Button.css' assert { type: 'css' };
-
 export default CustomElement
   .mixin(ThemableMixin)
   .mixin(DensityMixin)
@@ -42,7 +40,6 @@ export default CustomElement
       return icon ?? svg ?? src ?? svgPath;
     },
   })
-  .css(styles)
   .html/* html */`
     <mdw-icon _if={hasIcon} id=icon ink={iconInk} disabled={disabledState} outlined={outlined} aria-hidden=true svg={svg} src={src} svg-path={svgPath}>{icon}</mdw-icon>
     <slot id=slot disabled={disabledState}></slot>
@@ -63,14 +60,154 @@ export default CustomElement
       control.setAttribute('type', 'button');
     },
   })
+  .css`
+    /* 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 (any-pointer: coarse) {
+      #touch-target {
+        visibility: visible;
+      }
+    }
+  `
   .childEvents({
     control: {
-    /**
-     * Duplicates button for form submission
-     * @see https://github.com/WICG/webcomponents/issues/814
-     * @param {{currentTarget:HTMLInputElement}} event
-     * @type {any}
-     */
+      /**
+       * Duplicates button for form submission
+       * @see https://github.com/WICG/webcomponents/issues/814
+       * @param {{currentTarget:HTMLInputElement}} event
+       * @type {any}
+       */
       '~click'({ currentTarget }) {
         if (currentTarget.disabled) return;
         if (currentTarget.type !== 'submit') return;

package/components/Card.js

@@ -7,8 +7,6 @@ import ShapeMixin from '../mixins/ShapeMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import SurfaceMixin from '../mixins/SurfaceMixin.js';
 
-import styles from './Card.css' assert { type: 'css' };
-
 const SUPPORTS_INERT = 'inert' in HTMLElement.prototype;
 
 export default CustomElement
@@ -48,7 +46,117 @@ export default CustomElement
     <div _if={showBlocker} id=inert-blocker></div>
     <slot id=slot disabled={disabledState}></slot>
   `
-  .css(styles)
+  .css`
+    /* 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
+    }
+  `
   .on({
     composed() {
       const { slot, surface, surfaceTint, shape, outline } = this.refs;

package/components/Checkbox.js

@@ -7,8 +7,6 @@ import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 import TouchTargetMixin from '../mixins/TouchTargetMixin.js';
 
-import styles from './Checkbox.css' assert { type: 'css' };
-
 export default CustomElement
   .mixin(ThemableMixin)
   .mixin(StateMixin)
@@ -34,7 +32,97 @@ export default CustomElement
       return (indeterminate ? indeterminateIcon : icon);
     },
   })
-  .css(styles)
+  .css`
+    /* https://m3.material.io/components/checkbox/specs */
+
+    :host {
+      --mdw-ink: var(--mdw-color__on-primary);
+      --mdw-bg: var(--mdw-color__primary);
+
+      display: inline-grid;
+      align-items: baseline;
+      gap: 12px;
+      grid-auto-flow: column;
+      justify-content: flex-start;
+
+      cursor: pointer;
+
+      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;
+
+      cursor: inherit;
+    }
+
+    #label {
+      cursor: inherit;
+    }
+
+    #label[disabled] {
+      cursor: not-allowed;
+    }
+
+    #state,
+    #ripple-container {
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+
+      block-size: 40px;
+      inline-size: 40px;
+
+      transform: translateX(-50%) translateY(-50%);
+
+      border-radius: 50%;
+    }
+
+    #checkbox {
+      position: relative;
+
+      display: inline-flex;
+
+      grid-column: 1 / 1;
+
+      pointer-events: none;
+
+      transform: translateY(11.5%);
+
+      color: rgb(var(--mdw-color__on-surface));
+    }
+
+    #checkbox[selected] {
+      color: rgb(var(--mdw-bg));
+    }
+
+    #checkbox[disabled] {
+      color: rgb(var(--mdw-color__on-surface));
+    }
+
+    #checkbox[errored] {
+      color: rgb(var(--mdw-color__error));
+    }
+
+    #icon {
+      --mdw-ink: inherit;
+      --mdw-bg: inherit;
+      --disabled-opacity: 1;
+    }
+  `
   .on({
     composed({ html }) {
       const { label, control, state, rippleContainer, touchTarget } = this.refs;

package/components/CheckboxIcon.js

@@ -3,9 +3,6 @@ import CustomElement from '../core/CustomElement.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './CheckboxIcon.css' assert {type: 'css'};
-import outlineStyles from './Outline.css' assert {type:'css'};
-
 export default CustomElement
   .mixin(ThemableMixin)
   .mixin(ShapeMixin)
@@ -22,7 +19,98 @@ export default CustomElement
       set(value) { this.selected = value; },
     },
   })
-  .css(outlineStyles, styles)
+  .css`
+    /* https://m3.material.io/components/checkbox/specs */
+
+    :host {
+      --mdw-ink: var(--mdw-color__on-primary);
+      --mdw-bg: var(--mdw-color__primary);
+      --mdw-shape__size: 2px;
+      --disabled-opacity: 0.38;
+      position: relative;
+
+      display: inline-block;
+      align-items: center;
+      justify-content: center;
+
+      box-sizing: border-box;
+      block-size: 18px;
+      inline-size: 18px;
+
+      font-size: 18px;
+      line-height: 18px;
+    }
+
+    #shape {
+      --mdw-shape__size: inherit;
+      position: absolute;
+      inset: 0;
+
+      z-index: auto;
+
+      background-color: transparent;
+    }
+
+    #icon {
+      position: absolute;
+      inset: 0;
+
+      opacity: 0;
+
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
+
+      transition-duration: 200ms;
+      transition-property: opacity, background-color, color;
+      will-change: opacity;
+    }
+
+    #outline {
+      filter:
+        drop-shadow(1px 0px 0px currentColor)
+        drop-shadow(0px 1px 0px currentColor)
+        drop-shadow(-1px 0px 0px currentColor)
+        drop-shadow(0px -1px 0px currentColor);
+
+      color: rgb(var(--mdw-color__on-surface));
+
+      transition-duration: 200ms;
+      transition-property: opacity, background-color, color;
+      will-change: opacity;
+    }
+
+    /* Selected */
+
+    #icon[selected] {
+      opacity: 1;
+    }
+
+    #outline[selected] {
+      opacity: 0;
+    }
+
+    /* Errored */
+
+    #icon[errored] {
+      background-color: rgb(var(--mdw-color__error));
+      color: rgb(var(--mdw-color__on-error));
+    }
+
+    #outline[errored] {
+      color: rgb(var(--mdw-color__error));
+    }
+
+    /* Disabled */
+
+    #icon[disabled] {
+      background-color: rgba(var(--mdw-color__on-surface), var(--disabled-opacity));
+      color: rgb(var(--mdw-color__surface), var(--disabled-opacity));
+    }
+
+    #outline[disabled] {
+      color: rgb(var(--mdw-color__on-surface), var(--disabled-opacity));
+    }
+  `
   .on({
     composed({ html }) {
       const { outline, shape } = this.refs;