@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-2

package/components/IconButton.js

@@ -1,12 +1,10 @@
 import TooltipTriggerMixin from '../mixins/TooltipTriggerMixin.js';
 
 import Button from './Button.js';
-import styles from './IconButton.css' assert { type: 'css' };
 
 export default Button
   .mixin(TooltipTriggerMixin)
   .extend()
-  .css(styles)
   .observe({
     _ariaPressed: {
       get({ type, checked }) {
@@ -62,4 +60,157 @@ export default Button
       outline.setAttribute('selected', '{checked}');
     },
   })
+  .css`
+    /* https://m3.material.io/components/icon-buttons/specs */
+
+    :host {
+      --mdw-shape__size: var(--mdw-shape__full);
+      --mdw-ink: rgb(var(--mdw-color__on-surface-variant));
+
+      align-items: center;
+      justify-content: center;
+
+      padding: max(8px, calc(8px + (var(--mdw-density) * 2px)));
+
+      background-color: transparent;
+
+      font-size: 24px;
+    }
+
+    :host(:where([type="checkbox"])) {
+      --mdw-ink: var(--mdw-color__primary);
+    }
+
+    /** Filled | Filled Checked */
+    :host(:where([filled])) {
+      --mdw-ink: var(--mdw-color__on-primary);
+      --mdw-bg: var(--mdw-color__primary);
+      --mdw-surface__shadow__resting: none;
+      --mdw-surface__shadow__raised: none;
+    }
+
+    /** Tonal | Tonal Checked */
+    :host(:where([filled="tonal"])) {
+      --mdw-ink: var(--mdw-color__on-secondary-container);
+      --mdw-bg: var(--mdw-color__secondary-container);
+    }
+
+    /** Outlined | Outlined Unchecked */
+    :host(:where([outlined])) {
+      --mdw-ink: var(--mdw-color__on-surface-variant);
+    }
+
+    /** Outlined | Outlined Unchecked */
+    :host(:where([outlined][type="checkbox"])) {
+      --mdw-bg: var(--mdw-color__inverse-surface);
+      --mdw-ink: var(--mdw-color__inverse-on-surface);
+    }
+
+    #label {
+      font-size: inherit;
+      letter-spacing: inherit;
+    }
+
+    #shape[toggle] {
+      background-color: transparent;
+    }
+
+    .colored[toggle] {
+      color: rgb(var(--mdw-color__on-surface-variant));
+    }
+
+    .colored[selected] {
+      /* background-color: rgb(var(--mdw-bg)); */
+      color: rgb(var(--mdw-ink));
+    }
+
+    #shape[filled][toggle] {
+      background-color: rgb(var(--mdw-color__surface-variant));
+    }
+
+    .colored[filled][toggle] {
+      color: rgb(var(--mdw-bg));
+    }
+
+    #shape[filled="tonal"][toggle] {
+      background-color: rgb(var(--mdw-color__surface-variant));
+    }
+
+    .colored[filled="tonal"][toggle] {
+      color: rgb(var(--mdw-color__on-surface-variant));
+    }
+
+    #shape[filled][selected] {
+      background-color: rgb(var(--mdw-bg));
+    }
+
+    .colored[filled][selected] {
+      color: rgb(var(--mdw-ink));
+    }
+
+    #shape[outlined] {
+      background-color: transparent;
+    }
+
+    .colored[outlined] {
+      color: inherit;
+    }
+
+    #shape[outlined][toggle] {
+      background-color: transparent;
+    }
+
+    .colored[outlined][toggle] {
+      color: rgb(var(--mdw-color__on-surface-variant));
+    }
+
+    #shape[outlined][selected] {
+      background-color: rgb(var(--mdw-bg));
+    }
+
+    .colored[outlined][selected] {
+      color: rgb(var(--mdw-ink));
+    }
+
+    #icon {
+      font-size: inherit;
+      font-variation-settings: 'FILL' 1;
+    }
+
+    #icon[toggle] {
+      font-variation-settings: 'FILL' 0;
+    }
+
+    #icon[selected] {
+      font-variation-settings: 'FILL' 1;
+    }
+
+    #outline[focused] {
+      opacity: 1;
+
+      color: inherit;
+    }
+
+    #outline[selected] {
+      opacity: 0;
+    }
+
+    /** Disabled */
+    .colored[disabled] {
+      cursor: not-allowed;
+
+      color: rgba(var(--mdw-color__on-surface), 0.38);
+    }
+
+    #shape[disabled][filled],
+    #shape[disabled][outlined][selected] {
+      background-color: rgba(var(--mdw-color__on-surface), 0.12);
+    }
+
+    .colored[disabled][filled],
+    .colored[disabled][outlined][selected] {
+      color: rgba(var(--mdw-color__on-surface), 0.38);
+    }
+
+  `
   .autoRegister('mdw-icon-button');

package/components/Label.js

@@ -1,7 +1,21 @@
 import Box from './Box.js';
-import styles from './Label.css' assert { type: 'css' };
 
 export default Box
   .extend()
-  .css(styles)
+  .css`
+    :host {
+      font: var(--mdw-typescale__label-large__font);
+      letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
+    }
+    
+    :host([size="medium"]) {
+      font: var(--mdw-typescale__label-medium__font);
+      letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+    }
+    
+    :host([size="small"]) {
+      font: var(--mdw-typescale__label-small__font);
+      letter-spacing: var(--mdw-typescale__body-small__letter-spacing);
+    }
+  `
   .autoRegister('mdw-label');

package/components/Layout.js

@@ -1,12 +1,30 @@
 import CustomElement from '../core/CustomElement.js';
 
-import styles from './Layout.css' assert {type:'css'};
-
 export default CustomElement
   .extend()
-  .css(styles)
   .html/* html */`
     <slot id=slot-top name=top></slot>
     <slot id=slot></slot>
   `
+  .css`
+    /* https://m3.material.io/foundations/layout/applying-layout/window-size-classes */
+
+    :host {
+      display: block;
+    }
+
+    /* Pane Slot */
+    #slot {
+      display: flex;
+      gap: 24px;
+
+      justify-content: center;
+
+      padding-inline: 16px;
+
+      transition: padding-inline 100ms;
+    }
+
+    @media screen and (min-width: 648px) { #slot { padding-inline: 24px; } }
+  `
   .autoRegister('mdw-layout');

package/components/List.js

@@ -2,7 +2,6 @@ import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
 import DensityMixin from '../mixins/DensityMixin.js';
 
 import Box from './Box.js';
-import styles from './List.css' assert { type: 'css' };
 
 /** @typedef {'compact'} DeprecatedHTMLMenuElementProperties */
 
@@ -10,8 +9,22 @@ export default Box
   .mixin(DensityMixin)
   .mixin(AriaReflectorMixin)
   .extend()
-  .css(styles)
   .set({
     _ariaRole: 'list',
   })
+  .css`
+    /* https://m3.material.io/components/lists/specs */
+
+    :host {
+      display: flex;
+      flex-direction: column;
+
+      padding-block: 8px;
+    }
+
+    :host(:focus) {
+      outline: 1px solid red;
+    }
+
+  `
   .autoRegister('mdw-list');

package/components/ListItem.js

@@ -11,8 +11,6 @@ import RippleMixin from '../mixins/RippleMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './ListItem.css' assert { type: 'css' };
-
 export default CustomElement
   .mixin(ThemableMixin)
   .mixin(StateMixin)
@@ -70,7 +68,6 @@ export default CustomElement
       return this.radio || 'leading';
     },
   })
-  .css(styles)
   .html/* html */`
     <a id=anchor _if={href} href={href} disabled={disabledState} aria-labelledby=content></a>
     <mdw-checkbox-icon id=checkbox _if={checkbox} aria-hidden=true class={checkboxClass} color={selectionColor} disabled={disabledState} icon=check selected={selected}></mdw-checkbox-icon>
@@ -101,6 +98,235 @@ export default CustomElement
       this.updateAriaProperty('ariaDisabled', newValue ? 'true' : 'false');
     },
   })
+  .css`
+    /* https://m3.material.io/components/lists/specs */
+
+    :host {
+      --mdw-shape__size: 0px;
+      /* Grid does not auto collapse columns, leaving gaps */
+
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      border: none;
+      padding-block: 8px;
+      padding-inline: 16px 24px;
+
+      cursor: auto;
+
+      outline: none;
+
+      color: inherit;
+
+      text-decoration: none;
+    }
+
+    :host([href]) {
+      cursor: pointer;
+    }
+
+    #anchor {
+      position: absolute;
+      inset: 0;
+
+      outline: none;
+
+      color: inherit;
+
+    }
+
+    :host([video]) {
+      padding-inline-start: 0;
+    }
+
+    :host([lines="3"]) {
+      align-items: flex-start;
+
+      padding-block: 12px;
+    }
+
+    #content {
+      display: inline-flex;
+      align-items: flex-start;
+      flex-direction: column;
+      justify-content: center;
+
+      flex: 1;
+
+      padding-block: calc(8px + (var(--mdw-density) * 2px));
+    }
+
+    #content:is([has-supporting], [lines="2"]) {
+      box-sizing: border-box;
+      min-block-size: calc(8px + calc(48px + var(--mdw-density) * 2px));
+      padding-block: calc(4px + var(--mdw-density) * 2px);
+    }
+
+    #content:is([lines="3"]) {
+      box-sizing: border-box;
+      min-block-size: calc(8px + calc(48px + var(--mdw-density) * 2px));
+      padding-block: calc(0 + var(--mdw-density) * 2px);
+    }
+
+    #icon {
+      font-size: 24px;
+    }
+
+    #trailing-icon {
+      font-size: 24px;
+    }
+
+    #divider {
+      position: absolute;
+      inset-block-end: 0;
+
+      display: block;
+
+      color: rgb(var(--mdw-color__surface-variant));
+    }
+
+    #divider[divider="inset"] {
+      padding-inline: 16px 24px;
+    }
+
+    #slot {
+      max-block-size: var(--mdw-typescale__body-large__line-height) * 2;
+
+      /* background-color: rgba(255,0,0,0.10); */
+
+      color: var(--mdw-color__on-surface);
+
+      font: var(--mdw-typescale__body-large__font);
+      letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
+    }
+
+    #supporting {
+      max-block-size: calc(var(--mdw-typescale__body-medium__line-height) * 2);
+
+      /* background-color: rgba(0,255,0,0.10); */
+
+      color: var(--mdw-color__on-surface-variant);
+
+      font: var(--mdw-typescale__body-medium__font);
+      letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+    }
+
+    #trailing {
+      color: var(--mdw-color__on-surface-variant);
+
+      font: var(--mdw-typescale__body-medium__font);
+      letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+    }
+
+    #slot, #supporting {
+      display: block;
+      overflow-x: hidden;
+      overflow-y: hidden;
+
+      text-align: start;
+      text-overflow: ellipsis;
+      text-transform: none;
+      white-space: normal;
+      word-break: break-word;
+    }
+
+    #supporting[lines="2"] {
+      min-block-size: var(--mdw-typescale__body-medium__line-height);
+      max-block-size: var(--mdw-typescale__body-medium__line-height);
+    }
+
+    #supporting[lines="3"] {
+      min-block-size: calc(var(--mdw-typescale__body-medium__line-height) * 2);
+      max-block-size: calc(var(--mdw-typescale__body-medium__line-height) * 2);
+    }
+
+    @supports(width: 1lh) {
+      #slot {
+        max-block-size: 1lh;
+      }
+
+      #supporting {
+        max-block-size: 2lh;
+      }
+
+      #supporting[lines="2"] {
+        min-block-size: 1lh;
+        max-block-size: 1lh;
+      }
+
+      #supporting[lines="3"] {
+        min-block-size: 2lh;
+        max-block-size: 2lh;
+      }
+    }
+
+    @supports(-webkit-line-clamp:1) {
+      #slot {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+      }
+
+      #supporting {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      #supporting[lines="2"] {
+        -webkit-line-clamp: 1;
+      }
+    }
+
+    #avatar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      block-size: 40px;
+      inline-size: 40px;
+
+      border-radius: 50%;
+    }
+
+    #img {
+      block-size: 56px;
+      max-block-size: 56px;
+      inline-size: 56px;
+      max-inline-size: 56px;
+
+      object-fit: cover;
+      object-position: center center;
+    }
+
+    #img[video] {
+      block-size: 64px;
+      max-block-size: 64px;
+      inline-size: 114px;
+      max-inline-size: 114px;
+    }
+
+    #checkbox {
+      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+      margin: 3px;
+    }
+
+    #radio {
+      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+      margin: 2px;
+    }
+
+    .trailing {
+      order: 1;
+    }
+
+    :host([disabled]) {
+      opacity: 0.38;
+
+      color: rgb(var(--mdw-color__on-surface));
+    }
+  `
   .childEvents({
     supporting: {
       /** @param {Event & {currentTarget: HTMLSlotElement}} event */

package/components/ListOption.js

@@ -1,7 +1,6 @@
 // https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
 
 import ListItem from './ListItem.js';
-import styles from './ListOption.css' assert {type: 'css'};
 
 // https://html.spec.whatwg.org/multipage/form-elements.html#htmloptionelement
 
@@ -70,7 +69,6 @@ export default class ListOption extends ListItem
       this.refs.anchor.focus(...options);
     },
   })
-  .css(styles)
   .on({
     composed({ inline }) {
       const { anchor, state, content } = this.refs;
@@ -92,7 +90,43 @@ export default class ListOption extends ListItem
 
       state.setAttribute('state-disabled', 'focus');
     },
-  }) {
+  })
+  .css`
+    :host {
+      --mdw-bg: var(--mdw-color__secondary-container);
+      --mdw-ink: var(--mdw-color__on-secondary-container);
+      cursor: pointer;
+    
+      z-index: 0;
+    }
+    
+    :host([href]) {
+      cursor: pointer;
+    }
+    
+    :host([disabled]) {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+    
+    #content {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+    
+    #content[selected] {
+      color: rgb(var(--mdw-ink));
+    }
+    
+    #anchor {
+      z-index: -1;
+    }
+    
+    #anchor[selected] {
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
+    }
+  ` {
   static { this.autoRegister('mdw-list-option'); }
 
   /**

package/components/ListSelect.js

@@ -5,7 +5,6 @@ import StateMixin from '../mixins/StateMixin.js';
 
 import List from './List.js';
 import ListOption from './ListOption.js';
-import styles from './ListSelect.css' assert { type: 'css' };
 
 /** @implements {HTMLSelectElement} */
 export default class ListSelect extends List
@@ -14,7 +13,18 @@ export default class ListSelect extends List
   .mixin(KeyboardNavMixin) {
   static {
     this.autoRegister('mdw-list-select');
-    this.css(styles);
+    // eslint-disable-next-line no-unused-expressions
+    this.css`
+      :host(:disabled) {
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+      
+      :host([internals-disabled]) {
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    `;
     this.on({
       disabledStateChanged(oldValue, newValue) {
         this._kbdFocusable = !newValue;