@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-1

package/components/SwitchIcon.js

@@ -4,12 +4,10 @@ import CustomElement from '../core/CustomElement.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './SwitchIcon.css' assert {type: 'css'};
-import animations from './SwitchIconAnimations.css' assert {type:'css'};
-
 export default CustomElement
   .mixin(ThemableMixin)
   .mixin(ShapeMixin)
+  .extend()
   .observe({
     selected: 'boolean',
     icon: 'string',
@@ -53,7 +51,6 @@ export default CustomElement
       return Boolean(icon || src || unselectedIcon || unselectedSrc);
     },
   })
-  .css(styles, animations)
   .html/* html */`
     <div id=thumb selected={checked} pressed={pressed} disabled={disabled}>
       <mdw-shape id=thumb-shape shape-style=full selected={checked} pressed={pressed} hovered={hovered} focused={focused} icon={hasIcon}
@@ -85,5 +82,275 @@ export default CustomElement
       }
     },
   })
-  .extend()
+  .css`
+    /* https://m3.material.io/components/switch/specs */
+
+    :host {
+      --mdw-ink: var(--mdw-color__on-primary);
+      --mdw-bg: var(--mdw-color__primary);
+      --mdw-shape__size: var(--mdw-shape__full);
+      --mdw-switch__value: 0;
+
+      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]) {
+      --mdw-switch__value: 1;
+    }
+
+    :host([disabled]) {
+      opacity: 0.38;
+    }
+
+    #track{
+      position: absolute;
+      inset: 0;
+
+      background-color: rgb(var(--mdw-color__surface-variant));
+    }
+
+    #track[selected] {
+      background-color: rgb(var(--mdw-bg));
+    }
+
+    #track[disabled] {
+      opacity: calc(0.12/0.38);
+    }
+
+    #track[disabled][selected] {
+      background-color: rgb(var(--mdw-color__on-surface));
+    }
+
+    #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__outline));
+    }
+
+    #outline:is([pressed],[focused]) {
+      color: rgb(var(--mdw-color__outline));
+    }
+
+    #outline[disabled] {
+      color: rgb(var(--mdw-color__on-surface));
+    }
+
+    #outline[selected] {
+      color: transparent;
+    }
+
+    /** Thumb (state) **/
+
+    #thumb {
+      --thumb-color: var(--mdw-ink);
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      transform: translateX(calc(var(--mdw-dir, 1) * var(--mdw-switch__value) * (52px - 100%)));
+
+      aspect-ratio: 1/1;
+    }
+
+    :dir(rtl) #thumb {
+      --mdw-dir: -1;
+    }
+
+    @supports(width: 1cqw) {
+      #thumb {
+        transform: translateX(calc(var(--mdw-dir, 1) * var(--mdw-switch__value) * (100cqw - 100%)));
+      }
+    }
+
+    #slot {
+      color: rgb(var(--mdw-color__on-surface));
+    }
+
+    #slot[selected] {
+      color: rgb(var(--mdw-bg));
+    }
+
+    /** Thumb Shape **/
+
+    #thumb-shape {
+      --mdw-shape__size: inherit;
+
+      position: absolute;
+
+      inset: 2px;
+
+      transform: scale(calc(16/28));
+      z-index: 0;
+    }
+
+    #thumb-shape[icon] {
+      transform: scale(calc(24/28));
+    }
+
+    #thumb-shape:not([selected]) {
+      --mdw-bg: var(--mdw-color__outline);
+      --mdw-ink: var(--mdw-color__surface-variant);
+    }
+
+    #thumb-shape[selected] {
+      transform: scale(calc(24/28));
+    }
+
+    #thumb-shape[selected]:not([active]) {
+      --mdw-bg: var(--thumb-color);
+    }
+
+    #thumb-shape[pressed]:not([disabled]) {
+      transform: scale(1);
+    }
+
+    /** Thumb Icons **/
+
+    .icon {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+
+      opacity: 0;
+      transform: translateX(-50%) translateY(-50%);
+
+      font-size: 16px;
+
+      /* border-radius: 50%; */
+    }
+
+    .icon:not([src]):empty {
+      display: none;
+    }
+
+    #icon, #unselected-icon {
+      opacity: 1;
+
+      font-variation-settings: 'FILL' 0;
+    }
+
+    #unselected-icon[selected] {
+      opacity: 0;
+    }
+
+    #selected-icon[selected] {
+      opacity: 1;
+    }
+
+    #icon[selected] {
+      font-variation-settings: 'FILL' 1;
+    }
+
+    #thumb[disabled] {
+      color: rgb(var(--mdw-color__on-surface));
+    }
+  `
+  .css`
+    /* https://m3.material.io/components/switch/specs */
+
+    :host {
+      /*FastOutLinearInInterpolator*/
+      --mdw-switch__transition-timing__collapse: cubic-bezier(0.4, 0.0, 1, 1);
+      --mdw-switch__transition-duration__collapse: 375ms;
+      /*LinearOutSlowInInterpolator*/
+      --mdw-switch__transition-timing__expand: cubic-bezier(0.0, 0.0, 0.2, 1);
+      --mdw-switch__transition-duration__expand: 500ms;
+      --scale-delay: var(--mdw-switch__transition-duration);
+
+      --mdw-switch__transition-duration: var(--mdw-switch__transition-duration__collapse);
+      --mdw-switch__transition-timing: var(--mdw-switch__transition-timing__collapse);
+      --mdw-switch__transition-delay__color: calc(var(--mdw-switch__transition-duration) / 2);
+      --mdw-switch__transition-delay__translate: calc(var(--mdw-switch__transition-duration) / 2);
+      --mdw-switch__transition-delay__scale: calc(var(--mdw-switch__transition-duration) / 2);
+
+      transition-delay: var(--mdw-switch__transition-delay__color);
+      transition-duration: calc(var(--mdw-switch__transition-duration) / 2);
+      /* 2 legged animation */
+      transition-timing-function: var(--mdw-switch__transition-timing);
+    }
+
+    #track {
+      transition-delay: var(--mdw-switch__transition-delay__color);
+      transition-duration: inherit;
+      transition-property: background-color;
+      transition-timing-function: inherit;
+    }
+
+    #outline {
+      transition-delay: var(--mdw-switch__transition-delay__color);
+      transition-duration: inherit;
+      transition-property: background-color, color;
+      transition-timing-function: inherit;
+    }
+
+    #thumb {
+      transition-delay: var(--mdw-switch__transition-delay__translate);
+      transition-duration: inherit;
+      transition-property: transform;
+      transition-timing-function: inherit;
+    }
+
+    #thumb-shape, .icon {
+      /* (selected => unselected): stall color+scale */
+      transition-delay: var(--mdw-switch__transition-delay__scale), var(--mdw-switch__transition-delay__color), var(--mdw-switch__transition-delay__color);
+      transition-duration: inherit;
+      transition-property: transform, background-color, color;
+      transition-timing-function: inherit;
+    }
+
+    :host([icon]) {
+      --mdw-switch__transition-delay__translate: 0s;
+    }
+
+    .icon {
+      transition-property: transform, opacity, color;
+    }
+
+    /* unselected => selected  */
+    :host([selected]) {
+      --mdw-switch__transition-delay__color: 0s;
+      --mdw-switch__transition-delay__scale: 0s;
+      /* --mdw-switch__transition-delay__translate: 0s; */
+      --mdw-switch__transition-duration: var(--mdw-switch__transition-duration__expand);
+      --mdw-switch__transition-timing: var(--mdw-switch__transition-timing__expand);
+    }
+
+    /* active => selected */
+    :host([selected][pressed]) {
+      /* --mdw-switch__transition-delay__color: 0s; */
+      /* --mdw-switch__transition-delay__scale: 0s; */
+      --mdw-switch__transition-delay__translate: 0s;
+    }
+
+    /* selected => unselected */
+    :host(:not([selected])) {
+      /* --mdw-switch__transition-delay__color: 0s; */
+      /* --mdw-switch__transition-delay__scale: 0s; */
+      --mdw-switch__transition-delay__translate: 0s;
+    }
+
+    /* unselected => active */
+    :host([pressed]:not([selected])) {
+      /* --mdw-switch__transition-delay__color: 0s; */
+      --mdw-switch__transition-delay__scale: 0s;
+      /* --mdw-switch__transition-delay__translate: 0s; */
+    }
+  `
   .autoRegister('mdw-switch-icon');

package/components/Tab.js

@@ -8,8 +8,6 @@ import ScrollListenerMixin from '../mixins/ScrollListenerMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 
-import styles from './Tab.css' assert { type: 'css' };
-
 export default CustomElement
   .mixin(ShapeMixin)
   .mixin(StateMixin)
@@ -49,7 +47,6 @@ export default CustomElement
       this.refs.anchor.focus(options);
     },
   })
-  .css(styles)
   .html/* html */`
     <a id=anchor role=tab
       aria-label={ariaLabel}
@@ -100,4 +97,91 @@ export default CustomElement
       },
     },
   })
+  .css`
+    /* https://m3.material.io/components/tabs/specs */
+
+    :host {
+      display: inline-flex;
+
+      min-inline-size: 64px;
+
+      cursor: pointer;
+    }
+
+    #anchor {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+
+      box-sizing: border-box;
+      block-size: 100%;
+      inline-size: 100%;
+      flex: 1;
+
+      padding-block: 6px;
+      padding-inline: 12px;
+
+      cursor: pointer;
+      outline: none;
+
+      color: inherit;
+
+      text-decoration: inherit;
+    }
+
+    #icon {
+      padding-block: 4px;
+
+      font-size: 24px;
+      font-variation-settings: 'FILL' 0;
+
+    }
+
+    #shape[disabled],
+    #anchor[disabled] {
+      cursor: not-allowed;
+
+      background-color: rgba(var(--mdw-color__on-surface), 0.12);
+      color: rgba(var(--mdw-color__on-surface), 0.38);
+    }
+
+    :host([active]) {
+      color: rgb(var(--mdw-ink));
+    }
+
+    #icon[active] {
+      font-variation-settings: 'FILL' 1;
+    }
+
+    #slot {
+      display: block;
+      overflow-x: hidden;
+      overflow-y: hidden;
+
+      max-block-size: var(--mdw-typescale__title-small__line-height);
+
+      max-inline-size: 100%;
+
+      cursor: inherit;
+      outline: none;
+
+      opacity: var(--mdw-nav-item__anchor__opacity, 1);
+      transform: translateY(var(--mdw-nav-item__offset-y, 0));
+
+      color: inherit;
+
+      font: var(--mdw-typescale__title-small__font);
+      letter-spacing: var(--mdw-typescale__title-small__letter-spacing);
+      text-align: center;
+      text-decoration: inherit;
+      text-overflow: ellipsis;
+      text-transform: none;
+      white-space: nowrap;
+      word-break: break-word;
+
+      transition: opacity, color, transform 200ms;
+      will-change: opacity, transform;
+    }
+  `
   .autoRegister('mdw-tab');

package/components/TabContent.js

@@ -7,27 +7,6 @@ import TabPanel from './TabPanel.js';
 export default CustomElement
   .mixin(ResizeObserverMixin)
   .extend()
-  .css`
-    :host {
-      display: grid;
-      grid-auto-columns: 100%;
-      grid-auto-flow: column;
-      grid-template-columns: 100%;
-      overflow-x: auto;
-      scroll-behavior: smooth;
-      scroll-snap-type: x mandatory;
-      scrollbar-width: none;
-
-      flex-grow: 1;
-      -webkit-scroll-snap-type-x: mandatory;
-      scroll-snap-type-x: mandatory;
-      -webkit-scroll-snap-points-x: repeat(100%);
-      scroll-snap-points-x: repeat(100%);
-      overscroll-behavior-x: none;
-
-      will-change: transform; /* Avoid repaint on scroll */
-    }
-  `
   .set({
     /** @type {InstanceType<TabPanel>[]} */
     _panelNodes: [],
@@ -148,4 +127,25 @@ export default CustomElement
   .events({
     scroll: 'updatePanels',
   })
+  .css`
+    :host {
+      display: grid;
+      grid-auto-columns: 100%;
+      grid-auto-flow: column;
+      grid-template-columns: 100%;
+      overflow-x: auto;
+      scroll-behavior: smooth;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
+
+      flex-grow: 1;
+      -webkit-scroll-snap-type-x: mandatory;
+      scroll-snap-type-x: mandatory;
+      -webkit-scroll-snap-points-x: repeat(100%);
+      scroll-snap-points-x: repeat(100%);
+      overscroll-behavior-x: none;
+
+      will-change: transform; /* Avoid repaint on scroll */
+    }
+  `
   .autoRegister('mdw-tab-content');

package/components/TabList.js

@@ -8,7 +8,6 @@ import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 import Tab from './Tab.js';
-import styles from './TabList.css' assert { type: 'css' };
 
 export default CustomElement
   .mixin(ThemableMixin)
@@ -258,7 +257,6 @@ export default CustomElement
   .set({
     ariaRole: 'tablist',
   })
-  .css(styles)
   .html/* html */`
     <slot id=slot ink={ink} type-style={typeStyle}></slot>
     <div id=indicator aria-hidden=true style={_indicatorStyle} active={active} secondary={secondary}>
@@ -306,4 +304,135 @@ export default CustomElement
       },
     },
   })
+  .css`
+    /* https://m3.material.io/components/tabs/specs */
+
+    :host {
+      --mdw-ink: var(--mdw-color__primary);
+      --mdw-shape__bg: rgb(var(--mdw-color__surface));
+      position: relative;
+      position: sticky;
+      inset-block-start: 0;
+      inset-inline: 0;
+
+      display: grid;
+      align-items: stretch;
+      grid-auto-columns: minmax(auto, 1fr);
+      grid-auto-flow: column;
+      justify-content: space-evenly;
+      overflow-y: hidden;
+
+      box-sizing: border-box;
+      min-block-size: 48px;
+      inline-size: 100%;
+      flex:none;
+
+      color: inherit;
+
+      text-align: center;
+
+      will-change: transform;
+    }
+
+    #indicator {
+      --corner: 3;
+      --width: 24;
+      --offset: 0;
+      --visibility: 0;
+      --transition-ratio: 1;
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline: 0;
+
+      overflow-y: clip;
+
+      block-size: 3px;
+      inline-size: 100%;
+
+      pointer-events: none;
+
+      opacity: 1;
+      transform: translateY(calc(100% * (1 - var(--visibility))));
+
+      color: inherit;
+
+      transition: transform 200ms;
+      will-change: transform;
+    }
+
+    .indicator-piece {
+      position: absolute;
+      inset-block: 0;
+
+      opacity: 1;
+      /* opacity: 0.60; */
+      transform-origin: 0 0;
+      z-index:1;
+
+      background-color: currentColor;
+
+      transition: transform;
+      transition-duration: calc(200ms * var(--transition-ratio));
+      will-change: transform;
+    }
+
+    #indicator-start {
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 0;
+
+      inline-size: calc(2 * 1px * var(--corner));
+
+      transform: translateX(var(--offset));
+
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      border-top-left-radius: calc(1px * var(--corner));
+    }
+
+    #indicator-center {
+      /* Chrome has rendering issues upscaling small elements */
+      --precision: 100;
+
+      position: absolute;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: calc(1px * var(--corner));
+
+      inline-size: calc(1px * var(--precision));
+
+      transform: translateX(var(--offset)) scaleX(calc((var(--width) - (2 * var(--corner))) / var(--precision)));
+
+    }
+
+    #indicator-end {
+      position: absolute;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 0;
+
+      inline-size: calc(2 * 1px * var(--corner));
+
+      transform:
+        translateX(var(--offset))
+        translateX(calc(-2px * var(--corner)))
+        translateX(calc(var(--width) * 1px));
+
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      border-top-right-radius: calc(1px * var(--corner));
+    }
+
+    #indicator[active] {
+      --visibility: 1;
+      color: rgb(var(--mdw-ink));
+    }
+
+    #indicator[secondary] {
+      --corner: 0;
+    }
+
+    :host([scrollable]) {
+      grid-auto-columns: max-content;
+      justify-content: flex-start;
+      overflow-x: auto;
+
+      padding-inline: 48px
+    }
+  `
   .autoRegister('mdw-tab-list');

package/components/TextArea.js

@@ -5,8 +5,6 @@ import StateMixin from '../mixins/StateMixin.js';
 import TextFieldMixin from '../mixins/TextFieldMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import styles from './TextArea.css' assert { type: 'css' };
-
 /** @implements {HTMLTextAreaElement} */
 export default class TextArea extends CustomElement
   .mixin(ThemableMixin)
@@ -17,7 +15,103 @@ export default class TextArea extends CustomElement
   static { this.autoRegister('mdw-textarea'); }
 
   static {
-    this.css(styles);
+    // eslint-disable-next-line no-unused-expressions
+    this.css`
+      /* https://m3.material.io/components/text-fields/specs */
+
+      :host {
+        display: inline-grid;
+        grid-auto-flow: row;
+        grid-template-rows: minmax(0, 100%);
+      }
+
+      :host(:is([filled][label])) {
+        --control__margin-top: calc((var(--mdw-text-field__ratio) * 8px) + var(--mdw-typescale__body-small__line-height));
+        --control__padding-top: 0px;
+        --control__padding-bottom: calc((var(--mdw-text-field__ratio) * 8px) - 1px);
+        --control__margin-bottom: 1px;
+      }
+
+      #label {
+        --max-rows: none;
+        --line-height: var(--mdw-typescale__body-large__line-height);
+        --expected-height: calc((var(--control__margin-top) + var(--control__padding-top) + var(--line-height) + var(--control__padding-bottom) + var(--control__margin-bottom)));
+        max-block-size: 100%;
+        grid-row: 1 / 1;
+        padding: 0;
+      }
+
+      @supports(height: 1lh) {
+        #label {
+          --line-height: 1lh;
+        }
+      }
+
+      #slot {
+        display: none;
+      }
+
+      #control {
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+
+        box-sizing: border-box;
+        block-size: 100%;
+
+        min-block-size: var(--expected-height);
+        /* Avoid clipping on resize */
+        max-block-size: inherit;
+        inline-size: 100% !important; /* !important to override user-agent resize */
+        padding-inline: 16px;
+      }
+
+      #control[icon] {
+        padding-inline-start: 0;
+      }
+
+      #control[minrows] {
+        min-block-size: calc((var(--min-rows) * var(--line-height))
+          + var(--control__margin-top)
+          + var(--control__padding-top)
+          + var(--control__padding-bottom)
+          + var(--control__margin-bottom)
+        );
+      }
+
+      #control[maxrows] {
+        max-block-size: calc((var(--max-rows) * var(--line-height))
+          + var(--control__margin-top)
+          + var(--control__padding-top)
+          + var(--control__padding-bottom)
+          + var(--control__margin-bottom)
+        );
+      }
+
+      #control:is([icon], [input-prefix]) {
+        padding-inline-start: 0;
+      }
+
+      #control:is([trailing-icon], [input-suffix]) {
+        padding-inline-end: 0;
+      }
+
+      #suffix {
+        padding-inline-end: 16px;
+      }
+
+      mdw-icon {
+        align-self: flex-start;
+
+        margin-block-start: calc((var(--expected-height) - var(--mdw-icon__size)) / 2);
+      }
+
+      #control[fixed] {
+        /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+        resize: none;
+      }
+
+    `;
     this.childEvents({ slot: { slotchange: 'onSlotChange' } });
     this.on({
       composed() {