@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-2

package/components/Chip.js

@@ -1,12 +1,48 @@
 import Button from './Button.js';
-import styles from './Chip.css' assert { type: 'css' };
 
 export default Button
   .extend()
   .observe({
     suggestion: 'boolean',
   })
-  .css(styles)
+  .css`
+    /* https://m3.material.io/components/chips/specs */
+
+    :host {
+      --mdw-shape__size: 8px;
+      --mdw-ink: var(--mdw-color__on-surface);
+      padding-block: calc(4px + (var(--mdw-density) * 2px));
+      padding-inline: calc(16px + (var(--mdw-density) * 2px));
+
+      color: rgb(var(--mdw-ink));
+    }
+
+    :host(:where([suggestion])) {
+      --mdw-ink: var(--mdw-color__on-surface-variant);
+    }
+
+    :host(:where([icon])) {
+      gap: 8px;
+
+      padding-inline: calc(8px + (var(--mdw-density) * 2px)) calc(16px + (var(--mdw-density) * 2px));
+
+    }
+
+    #outline {
+      --mdw-ink: rgb(var(--mdw-color__on-surface-variant));
+    }
+
+    #outline:is([ink],[color]) {
+      /* stylelint-disable-next-line rule-selector-property-disallowed-list */
+      --mdw-ink: inherit;
+    }
+
+    #slot[disabled],
+    #icon[disabled] {
+      color: rgba(var(--mdw-color__on-surface), 0.38);
+    }
+
+  `
   .on({
     composed({ inline }) {
       const { slot, outline, icon } = this.refs;

package/components/Dialog.js

@@ -7,8 +7,6 @@ import './DialogActions.js';
 import { handleTabKeyPress } from '../aria/modal.js';
 import CustomElement from '../core/CustomElement.js';
 
-import styles from './Dialog.css' assert { type: 'css' };
-
 /** @typedef {Object<string,any>} DialogStackState */
 
 /** @typedef {InstanceType<import('./Dialog.js').default>} Dialog */
@@ -250,7 +248,6 @@ export default CustomElement
       return true;
     },
   })
-  .css(styles)
   .expressions({
     cancelAutoFocus({ default: d }) { return d === 'cancel'; },
     confirmAutoFocus({ default: d }) { return d === 'confirm'; },
@@ -281,6 +278,243 @@ export default CustomElement
       </mdw-surface>
     </dialog>
   `
+  .css`
+    /* https://m3.material.io/components/dialogs/specs */
+
+    :host {
+      --mdw-dialog__expand-duration: var(--mdw-motion-expand-duration, 250ms);
+      --mdw-dialog__simple-duration: var(--mdw-motion-simple-duration, 100ms);
+      --mdw-dialog__standard-easing: var(--mdw-motion-standard-easing, cubic-bezier(0.4, 0.0, 0.2, 1));
+      --mdw-dialog__deceleration-easing: var(--mdw-motion-deceleration-easing, cubic-bezier(0.0, 0.0, 0.2, 1));
+      --mdw-dialog__fade-in-duration: var(--mdw-motion-fade-in-duration, 150ms);
+
+      position: fixed;
+      inset: 0;
+
+      pointer-events: none;
+
+      z-index: 24;
+    }
+
+    #dialog {
+      position: fixed;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      justify-content: center;
+
+      box-sizing: border-box;
+      block-size:100%;
+      max-block-size: none;
+      inline-size:100%;
+      max-inline-size: none;
+      margin:0;
+      border: none;
+      padding: 48px;
+
+      opacity: 0;
+      /* visiblity:hidden still registers events, hide from pointer with scale(0) */
+      transform: scale(0);
+      visibility: hidden;
+      z-index: 24;
+
+      background-color: transparent;
+
+      transition-delay: 0s, 200ms, 200ms;
+      transition-duration: 200ms, 0s, 0s;
+      transition-property: opacity, transform, visibility;
+      transition-timing-function: ease-out;
+      will-change: opacity;
+    }
+
+    @media (min-width: 1440px) {
+      #dialog {
+        padding: 56px;
+      }
+    }
+
+    #dialog::backdrop {
+      /** Use scrim instead */
+      display: none;
+    }
+
+    #dialog[aria-hidden="false"],
+    #dialog:modal {
+      pointer-events: auto;
+
+      opacity: 1;
+
+      transform: none;
+      visibility: visible;
+
+      transition-delay: 0s;
+      transition-duration: 0s;
+      transition-timing-function: ease-in;
+    }
+
+    #scrim {
+      position: fixed;
+      inset: 0;
+
+      overflow-y: scroll;
+      overscroll-behavior: none;
+      overscroll-behavior: contain;
+      scrollbar-width: none;
+
+      block-size: 100%;
+      inline-size: 100%;
+
+      cursor: default;
+      pointer-events: inherit;
+      -webkit-tap-highlight-color: transparent;
+
+      opacity: 0.38;
+      z-index: 0;
+
+      background-color: rgb(var(--mdw-color__scrim));
+    }
+
+    #scrim::-webkit-scrollbar {
+      display: none;
+    }
+
+    #scrim::after {
+      content: '';
+
+      display: block;
+
+      block-size: 200%;
+      inline-size: 200%;
+    }
+    @keyframes scaleUpAnimation {
+      from {
+        transform: scaleY(0);
+      }
+
+      to {
+        transform: scaleY(1);
+      }
+    }
+
+    #surface {
+      --mdw-shape__size: 28px;
+
+      position: relative;
+
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: none;
+      overscroll-behavior: contain;
+
+      box-sizing: border-box;
+      max-block-size: 100%;
+      min-inline-size: 280px;
+      max-inline-size: 560px;
+      flex-shrink: 1;
+
+      padding-block-start: 8px;
+
+      transform: scale(1);
+      transform-origin: top center;
+      z-index: 24;
+
+      will-change: display, transform;
+    }
+
+    #surface[icon] {
+      align-items: center;
+    }
+
+    #surface[open] {
+      animation-name: scaleUpAnimation;
+      animation-duration: 200ms;
+      animation-direction: forwards;
+    }
+
+    #icon {
+      padding-block-start: 16px;
+
+      font-size: 24px;
+    }
+
+    #headline {
+      display: block;
+
+      padding-block-start: 16px;
+      padding-inline: 24px;
+
+      font: var(--mdw-typescale__headline-small__font);
+      letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
+    }
+
+    #headline:not([slotted]):empty {
+      display: none;
+    }
+
+    #body {
+      padding-block: 16px;
+    }
+
+    .content {
+      padding-inline: 24px;
+    }
+
+    #divider-top {
+      padding-block-start: 16px;
+    }
+
+    mdw-divider:not([size]) {
+      color: transparent;
+    }
+
+    mdw-divider[size="inset"] {
+      padding-inline: 24px;
+    }
+
+    #fixed {
+      display:block;
+
+      padding-block-start: 16px;
+
+      color: rgb(var(--mdw-color__on-surface-variant));
+
+      font: var(--mdw-typescale__body-medium__font);
+      letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+    }
+
+    #fixed:not([slotted]) {
+      display: none;
+    }
+
+    #slot {
+      display:block;
+
+      overflow-y: auto;
+
+      color: rgb(var(--mdw-color__on-surface-variant));
+
+      font: var(--mdw-typescale__body-medium__font);
+      letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+    }
+
+    #scroller {
+      display: block;
+      overflow-y: auto;
+    }
+
+    #form {
+      display: contents;
+    }
+
+    #form-slot::slotted(form) {
+      display: contents;
+    }
+  `
   .childEvents({
     dialog: {
       cancel(event) {

package/components/DialogActions.js

@@ -2,11 +2,12 @@ import CustomElement from '../core/CustomElement.js';
 
 export default CustomElement
   .extend()
-  .css/* css */`
+  .css`
     :host {
       align-self: flex-end;
-      padding-inline: 24px;
+
       margin-block: 24px;
+      padding-inline: 24px;
     }
   `
   .html/* html */`<slot id=slot></slot>`

package/components/Divider.js

@@ -1,13 +1,54 @@
 import CustomElement from '../core/CustomElement.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './Divider.css' assert { type: 'css' };
-
 export default CustomElement
   .mixin(ThemableMixin)
   .extend()
   .observe({
     vertical: 'boolean',
   })
-  .css(styles)
+  .css`
+    /* https://m3.material.io/components/dividers/specs */
+
+    :host {
+      --mdw-ink: var(--mdw-color__outline-variant);
+      position: relative;
+
+      display: block;
+      overflow: visible;
+
+      box-sizing: border-box;
+      block-size: 0;
+      inline-size: 100%;
+
+      color: rgb(var(--mdw-ink));
+    }
+
+    :host::before {
+      content: '';
+
+      display: block;
+
+      box-sizing: border-box;
+      block-size: 1px;
+      inline-size: auto;
+
+      background-color: currentcolor;
+    }
+
+    :host([vertical]) {
+      display: inline-flex;
+      vertical-align: top;
+
+      block-size: auto;
+      min-block-size: 100%;
+      inline-size: 0;
+    }
+
+    :host([vertical])::before {
+      block-size: auto;
+      min-inline-size: 1px;
+    }
+
+  `
   .autoRegister('mdw-divider');

package/components/ExtendedFab.js

@@ -1,9 +1,34 @@
 import Button from './Button.js';
-import styles from './ExtendedFab.css' assert { type: 'css' };
 
 export default Button
   .extend()
-  .css(styles)
+  .css`
+    /* https://m3.material.io/components/extended-fab/specs */
+
+    :host {
+      --mdw-bg: var(--mdw-color__primary-container);
+      --mdw-ink: var(--mdw-color__on-primary-container);
+      --mdw-shape__size: 16px;
+      --mdw-surface__tint: var(--mdw-surface__tint__3);
+      --mdw-surface__tint__raised: var(--mdw-surface__tint__4);
+      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__3);
+      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__4);
+      min-inline-size: 48px;
+      padding: calc(16px + (var(--mdw-density) * 2px));
+    }
+
+    #icon {
+      font-size: 24px;
+    }
+
+    :host([lowered]) {
+      --mdw-surface__tint: var(--mdw-surface__tint__1);
+      --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
+      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
+      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
+    }
+
+  `
   .observe({
     filled: { empty: 'tonal' },
     elevated: { type: 'boolean', empty: true },

package/components/Fab.js

@@ -1,7 +1,6 @@
 import TooltipTriggerMixin from '../mixins/TooltipTriggerMixin.js';
 
 import ExtendedFab from './ExtendedFab.js';
-import styles from './Fab.css' assert { type: 'css' };
 
 export default ExtendedFab
   .mixin(TooltipTriggerMixin)
@@ -12,7 +11,32 @@ export default ExtendedFab
       value: null,
     },
   })
-  .css(styles)
+  .css`
+    /* https://m3.material.io/components/floating-action-button/specs */
+
+    :host {
+      min-inline-size: 24px;
+    }
+
+    #icon {
+      font-size: 24px;
+    }
+
+    #icon[fab-size="large"] {
+      font-size: 36px;
+    }
+
+    :host([fab-size="small"]) {
+      --mdw-shape__size: 12px;
+      padding: calc(8px + (var(--mdw-density) * 2px));
+    }
+
+    :host([fab-size="large"]) {
+      --mdw-shape__size: 28px;
+      padding: calc(30px + (var(--mdw-density) * 2px));
+    }
+
+  `
   .on({
     composed() {
       const { slot, tooltipSlot, control, shape, icon } = this.refs;

package/components/FilterChip.js

@@ -1,7 +1,6 @@
 import './Icon.js';
 
 import Chip from './Chip.js';
-import styles from './FilterChip.css' assert { type: 'css' };
 
 export default Chip
   .extend()
@@ -19,7 +18,6 @@ export default Chip
       return null;
     },
   })
-  .css(styles)
   .html/* html */`
     <mdw-icon _if={!icon} id=check-icon disabled={disabledState} selected={checked} aria-hidden=true>check</mdw-icon>
     <mdw-icon _if={computedTrailingIcon} id=trailing-icon aria-hidden=true src={trailingSrc}>{computedTrailingIcon}</mdw-icon>
@@ -48,4 +46,87 @@ export default Chip
       slot.after(trailingIcon);
     },
   })
+  .css`
+    /* https://m3.material.io/components/chips/specs */
+
+    /* Filter Chips can be elevated */
+
+    :host {
+      --mdw-ink: var(--mdw-color__on-secondary-container);
+      --mdw-bg: var(--mdw-color__secondary-container);
+      gap: 8px;
+
+      padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
+      padding-inline-end: max(12px, calc(16px + (var(--mdw-density) * 2px)));
+
+      color: rgb(var(--mdw-color__on-surface-variant));
+
+    }
+
+    :host(:focus) {
+      --mdw-outline__rgb: var(--mdw-color__outline);
+    }
+
+    #icon[selected] {
+      font-variation-settings: 'FILL' 1;
+    }
+
+    #shape {
+      background-color: transparent;
+    }
+
+    :host(:where([trailing-icon],[dropdown],[trailing-src])) {
+      padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
+    }
+
+    #shape[elevated] {
+      background-color: rgb(var(--mdw-color__surface));
+    }
+
+    #shape[selected] {
+      background-color: rgb(var(--mdw-bg));
+    }
+
+    :host([selected]) {
+      color: rgb(var(--mdw-ink));
+    }
+
+    #outline[selected] {
+      opacity: 0;
+    }
+
+    #trailing-icon {
+      position: relative;
+
+      font-size: 18px;
+    }
+
+    .mdw-chip__checkbox {
+      position: absolute;
+
+      max-block-size: 0;
+      max-inline-size: 0;
+
+      appearance: none;
+      pointer-events: none;
+    }
+
+    #check-icon {
+      font-size: 0;
+    }
+
+    #check-icon[selected] {
+      font-size: 18px;
+    }
+
+    #check-icon[disabled] {
+      color: rgba(var(--mdw-color__on-surface), 0.38);
+    }
+
+    #shape[disabled]:is([elevated],[selected]) {
+      background-color: rgba(var(--mdw-color__on-surface), 0.12);
+      /* color: rgba(var(--mdw-color__on-surface), 0.38); */
+    }
+
+  `
   .autoRegister('mdw-filter-chip');

package/components/Headline.js

@@ -1,12 +1,10 @@
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 import Box from './Box.js';
-import styles from './Headline.css' assert { type: 'css' };
 
 export default Box
   .mixin(ThemableMixin)
   .extend()
-  .css(styles)
   .observe({
     ariaLevel: 'string',
     size: {
@@ -30,4 +28,20 @@ export default Box
       slot.setAttribute('aria-level', '{computeAriaLevel}');
     },
   })
+  .css`
+    :host {
+      font: var(--mdw-typescale__headline-large__font);
+      letter-spacing: var(--mdw-typescale__headline-large__letter-spacing);
+    }
+    
+    :host([size="medium"]) {
+      font: var(--mdw-typescale__headline-medium__font);
+      letter-spacing: var(--mdw-typescale__headline-medium__letter-spacing);
+    }
+    
+    :host([size="small"]) {
+      font: var(--mdw-typescale__headline-small__font);
+      letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
+    }  
+  `
   .autoRegister('mdw-headline');

package/components/Icon.js

@@ -3,8 +3,6 @@
 import CustomElement from '../core/CustomElement.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './Icon.css' assert { type: 'css' };
-
 /** @type {Map<string, {path:string, viewBox:string}>} */
 const svgAliasMap = new Map();
 const unaliased = new Set();
@@ -84,7 +82,6 @@ export default class Icon extends CustomElement
       },
     },
   })
-  .css(styles)
   .expressions({
     showSVG({ svg, _computedSVGPath }) {
       return Boolean(svg || _computedSVGPath);
@@ -93,7 +90,7 @@ export default class Icon extends CustomElement
   })
   .html/* html */`
     <link _if={_showSlot} id=link rel=stylesheet href={fontLibrary} />
-    <svg _if="{showSVG}" id=svg viewBox="{_computedViewBox}">
+    <svg _if="{showSVG}" id="svg" viewBox="{_computedViewBox}">
       <use id="use" _if="{svg}" href="{svg}" fill="currentColor"/>
       <path id="path" _if="{_computedSVGPath}" d="{_computedSVGPath}"/>
     </svg>
@@ -106,6 +103,85 @@ export default class Icon extends CustomElement
     />
     <slot id=icon class={fontClass} hidden={!_showSlot} aria-hidden=true></slot>
   `
+  .css`
+    /* https://material.io/design/iconography/system-icons.html */
+
+    :host {
+      display: inline-block;
+      vertical-align: -11.5%;
+
+      block-size: 1em;
+      inline-size: 1em;
+
+      -webkit-user-select: none;
+      user-select: none;
+
+      font-variation-settings: 'FILL' 1;
+
+      transition-duration: 200ms;
+      /* stylelint-disable-next-line liberty/use-logical-spec -- Safari does not animate inline-size */
+      transition-property: inline-size, width;
+    }
+
+    :host(:is([color],[ink])) {
+      color: rgb(var(--mdw-ink));
+    }
+
+    #icon {
+      /* Clip bounds in case font is not ready */
+      display: block;
+      overflow: clip;
+
+      block-size: 1em;
+      inline-size: 1em;
+
+      font-size: inherit;
+      font-variation-settings: inherit;
+
+      transition-delay: 1ms;
+      transition-duration: 200ms;
+
+      transition-property: font-variation-settings;
+    }
+
+    #icon[hidden] {
+      display: none;
+    }
+
+    #svg {
+      display: block;
+
+      block-size: inherit;
+      inline-size: inherit;
+
+      fill: currentColor;
+
+      object-fit: cover;
+    }
+
+    #img {
+      display: block;
+
+      block-size: inherit;
+      inline-size: inherit;
+
+      object-fit: cover;
+
+      transition-delay: 1ms;
+      transition-duration: 200ms;
+      transition-property: filter;
+    }
+
+    #img[disabled] {
+      filter: grayscale();
+    }
+
+    .material-symbols-outlined {
+      /* https://github.com/google/material-design-icons/issues/750 */
+      direction: inherit;
+    }
+
+  `
   .childEvents({
     icon: {
       slotchange() {