@shortfuse/materialdesignweb 0.7.1-0 → 0.7.1-2

package/mixins/ShapeMixin.js

@@ -1,7 +1,3 @@
-import outlineStyles from '../components/Outline.css' assert { type: 'css' };
-
-import styles from './ShapeMixin.css' assert { type: 'css' };
-
 /**
  * @param {ReturnType<import('./StateMixin.js').default> & ReturnType<import('./ThemableMixin.js').default>} Base
  */
@@ -16,10 +12,6 @@ export default function ShapeMixin(Base) {
       shapeStyle: 'string',
       outlined: 'boolean',
     })
-    .css(
-      outlineStyles,
-      styles,
-    )
     .html/* html */`
       <div id=shape part=shape class=shape elevated={elevated} shape-top={shapeTop} shape-bottom={shapeBottom} shape-start={shapeStart} shape-end={shapeEnd} shape-style={shapeStyle} color={color} outlined={outlined} disabled={disabledState}>
         <div id=outline _if={outlined} class=outline disabled={disabledState} focused={focusedState} pressed={pressedState} hovered={hoveredState}>
@@ -27,5 +19,284 @@ export default function ShapeMixin(Base) {
           <div id=outline-right class="outline-section outline-right"></div>
         </div>
       </div>
+    `
+    .css`
+      :host {
+        --mdw-shape__size: 0px;
+        --mdw-shape__bg: transparent;
+        --mdw-surface__will-change: none;
+        --mdw-shape__size__top-start-size: var(--mdw-shape__size);
+        --mdw-shape__size__top-end-size: var(--mdw-shape__size);
+        --mdw-shape__size__bottom-start-size: var(--mdw-shape__size);
+        --mdw-shape__size__bottom-end-size: var(--mdw-shape__size);
+      
+        /* (1/2n + 1/2)L + (-1/2n + 1/2)R  */
+        --mdw-shape__ltr: calc(0.5 * var(--mdw-dir, 1) + 0.5); /* 1 if LTR, 0 if RTL */
+        --mdw-shape__rtl: calc(-0.5 * var(--mdw-dir, 1) + 0.5); /* 0 if LTR, 1 if RTL */
+        --mdw-shape__size__top-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__top-end-size)));
+        --mdw-shape__size__top-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__top-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__top-end-size)));
+        --mdw-shape__size__bottom-left-size: calc((var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-end-size)));
+        --mdw-shape__size__bottom-right-size: calc((var(--mdw-shape__rtl) * var(--mdw-shape__size__bottom-start-size)) + (var(--mdw-shape__ltr) * var(--mdw-shape__size__bottom-end-size)));
+      
+        --mdw-shape__rounded: 1;
+        --mdw-shape__mask-border-source: none;
+        --mdw-shape__mask: none;
+        --mdw-shape__inline-start-deg: calc(var(--mdw-dir, 1) * -90deg);
+        z-index: 0;
+      }
+
+      :host([shape-style="none"]) {
+        --mdw-shape__size: 0px;
+      }
+      
+      :host([shape-style="extra-small"]) {
+        --mdw-shape__size: var(--mdw-shape__extra-small);
+      }
+      
+      :host([shape-style="small"]) {
+        --mdw-shape__size: var(--mdw-shape__small);
+      }
+      
+      :host([shape-style="medium"]) {
+        --mdw-shape__size: var(--mdw-shape__medium);
+      }
+      
+      :host([shape-style="large"]) {
+        --mdw-shape__size: var(--mdw-shape__large);
+      }
+      
+      :host([shape-style="extra-large"]) {
+        --mdw-shape__size: var(--mdw-shape__extra-large);
+      }
+      
+      :host([shape-style="full"]) {
+        --mdw-shape__size: var(--mdw-shape__full);
+      }
+      
+      :host([shape-style="inherit"]) {
+        --mdw-shape__size: inherit;
+      }
+      
+      :host([shape-top]) {
+        --mdw-shape__size__bottom-start-size: 0px;
+        --mdw-shape__size__bottom-end-size: 0px;
+        --mdw-shape__mask: linear-gradient(transparent 50%, black 50%);
+      
+      }
+      
+      :host([shape-bottom]) {
+        --mdw-shape__size__top-start-size: 0px;
+        --mdw-shape__size__top-end-size: 0px;
+        --mdw-shape__mask: linear-gradient(black 50%, transparent 50%);
+      }
+      
+      :host([shape-start]) {
+        --mdw-shape__size__top-end-size: 0px;
+        --mdw-shape__size__bottom-end-size: 0px;
+        --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), black 50%, transparent 50%);
+      }
+      
+      :host([shape-end]) {
+        --mdw-shape__size__top-start-size: 0px;
+        --mdw-shape__size__bottom-start-size: 0px;
+        --mdw-shape__mask: linear-gradient(var(--mdw-shape__inline-start-deg), transparent 50%, black 50%);
+      }
+      
+      @supports(-webkit-mask-box-image: none) {
+        :host {
+          --mdw-shape__rounded: inherit;
+          --mdw-shape__mask-border-source: inherit;
+      
+          -webkit-mask-box-image: var(--mdw-shape__mask-border-source)
+            8 fill /
+            var(--mdw-shape__size)
+            stretch;
+      
+          -webkit-mask: var(--mdw-shape__mask);
+        }
+      }
+    `
+    .css`
+      .shape {
+        position: absolute;
+        inset: 0;
+      
+        overflow: hidden;
+      
+        z-index: -1;
+      
+        background-color: var(--mdw-shape__bg, transparent);
+      
+        border-start-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-start-size));
+        border-start-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-end-size));
+        border-end-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-start-size));
+        border-end-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-end-size));
+      
+        transition-delay: 1ms;
+        transition-duration: 200ms;
+        transition-property: background-color, color;
+        will-change: background-color, color;
+      
+      }
+      
+      .shape[outlined] {
+        background-color: transparent;
+      }
+      
+      .shape[color] {
+        background-color: rgb(var(--mdw-bg));
+        color: rgb(var(--mdw-ink));
+      }
+      
+      .shape:is([color="none"], [color="transparent"]) {
+        background-color: transparent;
+      }
+
+      @supports(-webkit-mask-box-image: none) {
+        .shape {
+          transition-duration: 200ms, 200ms, 200ms;
+          transition-property: background-color, color, -webkit-mask-box-image-width;
+          will-change: background-color, color, -webkit-mask-box-image;
+        }
+      }
+    `
+    .css`
+      .outline {
+        position: absolute;
+        inset: 0;
+      
+        pointer-events: none;
+      
+        border-color: currentColor;
+        border-radius: inherit;
+        color: rgb(var(--mdw-color__outline));
+      }
+      
+      .outline:is([pressed],[focused]) {
+        color: rgb(var(--mdw-ink));
+      
+        transition-delay: 0;
+        transition-duration: 0;
+      }
+      
+      .outline[disabled] {
+        color: rgba(var(--mdw-color__on-surface), 0.12);
+      }
+      
+      .outline::before {
+        content: '';
+      
+        position: absolute;
+        inset: 0;
+      
+        border-style: solid;
+        border-width: 1px;
+      
+        border-radius: inherit;
+      }
+      
+      @supports(-webkit-mask-box-image: none) {
+        .outline::before {
+          content: none;
+        }
+      
+        .outline::after {
+          content: '';
+      
+          position: absolute;
+          inset: 0;
+      
+          -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
+            8 fill /
+            auto
+            stretch;
+      
+          background-color: currentColor;
+        }
+      
+        .outline-section {
+          position: absolute;
+          inset: 0;
+        }
+      
+        .outline-section::before,
+        .outline-section::after {
+          content: "";
+      
+          position: absolute;
+      
+          max-block-size: 50%;
+          max-inline-size: 50%;
+      
+          -webkit-mask-repeat: no-repeat;
+          -webkit-mask-size: contain;
+      
+          background-color: currentColor;
+      
+          transition-duration: 200ms;
+          /* stylelint-disable-next-line liberty/use-logical-spec */
+          transition-property: width, height;
+        }
+      
+        .outline-left::before {
+          /* stylelint-disable-next-line liberty/use-logical-spec */
+          left: calc(-1px * var(--mdw-shape__convex));
+          inset-block-start: calc(-1px * var(--mdw-shape__convex));
+      
+          block-size: calc(var(--mdw-shape__size__top-left-size));
+          inline-size: calc(var(--mdw-shape__size__top-left-size));
+          /* stylelint-disable-next-line liberty/use-logical-spec */
+          padding-right: calc(2px * var(--mdw-shape__convex));
+          padding-block-end: calc(2px * var(--mdw-shape__convex));
+      
+          -webkit-mask-image: var(--mdw-shape__mask-image__top-left);
+        }
+      
+        .outline-left::after {
+          /* stylelint-disable-next-line liberty/use-logical-spec */
+          left: calc(-1px * var(--mdw-shape__convex));
+          inset-block-end: calc(-1px * var(--mdw-shape__convex));
+      
+          block-size: var(--mdw-shape__size__bottom-left-size);
+          inline-size: var(--mdw-shape__size__bottom-left-size);
+          /* stylelint-disable-next-line liberty/use-logical-spec */
+          padding-right: calc(2px * var(--mdw-shape__convex));
+          padding-block-start: calc(2px * var(--mdw-shape__convex));
+      
+          -webkit-mask-image: var(--mdw-shape__mask-image__bottom-left);
+          -webkit-mask-position-y: 100%;
+        }
+      
+        .outline-right::before {
+          /* stylelint-disable-next-line liberty/use-logical-spec */
+          right: calc(-1px * var(--mdw-shape__convex));
+          inset-block-start: calc(-1px * var(--mdw-shape__convex));
+      
+          block-size: var(--mdw-shape__size__top-right-size);
+          inline-size: var(--mdw-shape__size__top-right-size);
+          /* stylelint-disable-next-line liberty/use-logical-spec */
+          padding-left: calc(2px * var(--mdw-shape__convex));
+          padding-block-end: calc(2px * var(--mdw-shape__convex));
+      
+          -webkit-mask-image: var(--mdw-shape__mask-image__top-right);
+          -webkit-mask-position-x: 100%;
+        }
+
+        .outline-right::after {
+          /* stylelint-disable-next-line liberty/use-logical-spec */
+          right: calc(-1px * var(--mdw-shape__convex));
+          inset-block-end: calc(-1px * var(--mdw-shape__convex));
+      
+          block-size: var(--mdw-shape__size__bottom-right-size);
+          inline-size: var(--mdw-shape__size__bottom-right-size);
+          /* stylelint-disable-next-line liberty/use-logical-spec */
+          padding-left: calc(2px * var(--mdw-shape__convex));
+          padding-block-start: calc(2px * var(--mdw-shape__convex));
+      
+          -webkit-mask-image: var(--mdw-shape__mask-image__bottom-right);
+          -webkit-mask-position-x: 100%;
+          -webkit-mask-position-y: 100%;
+        }
+      }
     `;
 }

package/mixins/StateMixin.js

@@ -1,5 +1,3 @@
-import styles from './StateMixin.css' assert { type: 'css' };
-
 // Globals
 
 let lastInteractionWasTouch = window?.matchMedia?.('(any-pointer: coarse)').matches;
@@ -33,7 +31,6 @@ export default function StateMixin(Base) {
     .define({
       stateTargetElement() { return this; },
     })
-    .css(styles)
     .html/* html */`
       <div id=state _if={stateLayer}
         disabled={disabledState}
@@ -41,7 +38,7 @@ export default function StateMixin(Base) {
         hovered={hoveredState}
         pressed={pressedState}
         interaction={_lastInteraction}
-        touched=${({ _lastInteraction }) => _lastInteraction === 'touch'}
+        touched={touchedState}
         aria-hidden=true></div>
     `
     .events({
@@ -110,5 +107,90 @@ export default function StateMixin(Base) {
       disconnected() {
         this._lastInteraction = null;
       },
-    });
+    })
+    .css`
+      /* https://m3.material.io/foundations/interaction-states */
+
+      :host {
+        --mdw-state__hovered-opacity: 0.08;
+        --mdw-state__focused-opacity: 0.12;
+        --mdw-state__pressed-opacity: 0.12;
+        --mdw-state__dragged-opacity: 0.12;
+        position: relative;
+
+        outline: none;
+        -webkit-tap-highlight-color: transparent;
+      }
+
+      /* Remove Firefox inner */
+      :host(::-moz-focus-inner) {
+        border: 0;
+      }
+
+      #state {
+        position: absolute;
+        inset: 0;
+
+        pointer-events: none;
+
+        opacity: calc(
+            var(--mdw-state__hovered-opacity) +
+            var(--mdw-state__focused-opacity) +
+            var(--mdw-state__pressed-opacity) +
+            var(--mdw-state__dragged-opacity)
+          );
+        /* opacity handled by theme engine */
+        background-color: currentColor;
+        border-radius: inherit;
+
+        transition-delay: 0ms;
+        transition-duration: 000ms;
+        transition-property: opacity, color, background-color;
+        will-change: opacity;
+      }
+
+      #state[touched] {
+        --mdw-state__hovered-opacity: 0;
+        --mdw-state__focused-opacity: 0;
+      }
+
+      /* Remove Hover State */
+      #state:is(
+      :not([hovered]),
+      [disabled]:not([state-disabled~="hover"]),
+      [state-off~="hover"]) {
+        --mdw-state__hovered-opacity: 0;
+      }
+
+      /* Remove Focus State */
+      #state:is(
+      :not([focused]),
+      [disabled]:not([state-disabled~="focus"]),
+      [state-off~="focus"]) {
+        --mdw-state__focused-opacity: 0;
+      }
+
+      /* Remove Pressed State */
+
+      #state:is(
+      :not([pressed]),
+      [disabled]:not([state-disabled~="pressed"]),
+      [state-off~="pressed"]) {
+        --mdw-state__pressed-opacity: 0;
+      }
+
+      /* Remove Dragged State */
+      :host(:not([aria-dragged="true"])) #state,
+      #state:is(
+        [disabled]:not([state-disabled~="dragged"]),
+        [state-off~="dragged"]) {
+        --mdw-state__dragged-opacity: 0;
+      }
+
+      /* Disabled */
+      #state[disabled]:not([state-disabled]) {
+        display: none;
+      }
+
+    `;
 }

package/mixins/SurfaceMixin.js

@@ -1,5 +1,3 @@
-import styles from './SurfaceMixin.css' assert { type: 'css' };
-
 /**
  * @param {ReturnType<import('./StateMixin.js').default> & ReturnType<import('./ThemableMixin.js').default>} Base
  */
@@ -23,10 +21,161 @@ export default function SurfaceMixin(Base) {
           && (!color || color.includes('surface'));
       },
     })
-    .css(styles)
     .html/* html */`
       <div id=surface class=surface raised={_raised} disabled={disabledState} color={color}>
         <div _if={showSurfaceTint} id=surface-tint class=surface-tint raised={_raised} color={color} aria-hidden=true></div>
       </div>
+    `
+    .css`
+      :host {
+
+        /** Filter blur is 1/2 CSS blur */
+      
+        /** Reference Properties */
+        /*
+        --mdw-surface__box-shadow__1__umbra: 0px 1px 2px 0px rgba(var(--mdw-color__shadow), 0.30);
+        --mdw-surface__box-shadow__2__umbra: 0px 1px 2px 0px rgba(var(--mdw-color__shadow), 0.30);
+        --mdw-surface__box-shadow__3__umbra: 0px 1px 3px 0px rgba(var(--mdw-color__shadow), 0.30);
+        --mdw-surface__box-shadow__4__umbra: 0px 2px 3px 0px rgba(var(--mdw-color__shadow), 0.30);
+        --mdw-surface__box-shadow__5__umbra: 0px 4px 4px 0px rgba(var(--mdw-color__shadow), 0.30);
+      
+        --mdw-surface__filter__0__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0));
+        --mdw-surface__filter__1__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0.30));
+        --mdw-surface__filter__2__umbra: drop-shadow(0px 1px 1px rgba(var(--mdw-color__shadow), 0.30));
+        --mdw-surface__filter__3__umbra: drop-shadow(0px 1px 1.5px rgba(var(--mdw-color__shadow), 0.30));
+        --mdw-surface__filter__4__umbra: drop-shadow(0px 2px 1.5px rgba(var(--mdw-color__shadow), 0.30));
+        --mdw-surface__filter__5__umbra: drop-shadow(0px 4px 2px rgba(var(--mdw-color__shadow), 0.30));
+      
+        --mdw-surface__box-shadow__1__penumbra: 0px 1px 3px 1px  rgba(var(--mdw-color__shadow), 0.15);
+        --mdw-surface__box-shadow__2__penumbra: 0px 2px 6px 2px  rgba(var(--mdw-color__shadow), 0.15);
+        --mdw-surface__box-shadow__3__penumbra: 0px 4px 8px 3px  rgba(var(--mdw-color__shadow), 0.15);
+        --mdw-surface__box-shadow__4__penumbra: 0px 6px 10px 4px rgba(var(--mdw-color__shadow), 0.15);
+        --mdw-surface__box-shadow__5__penumbra: 0px 8px 12px 6px rgba(var(--mdw-color__shadow), 0.15);
+      
+        --mdw-surface__filter__0__penumbra: drop-shadow(0px 1px 2.5px rgba(var(--mdw-color__shadow), 0));
+        --mdw-surface__filter__1__penumbra: drop-shadow(0px 1px 2.5px rgba(var(--mdw-color__shadow), 0.25));
+        --mdw-surface__filter__2__penumbra: drop-shadow(0px 2px 5px rgba(var(--mdw-color__shadow), 0.25));
+        --mdw-surface__filter__3__penumbra: drop-shadow(0px 4px 7px rgba(var(--mdw-color__shadow), 0.263));
+        --mdw-surface__filter__4__penumbra: drop-shadow(0px 6px 9px rgba(var(--mdw-color__shadow), 0.27));
+        --mdw-surface__filter__5__penumbra: drop-shadow(0px 8px 12px rgba(var(--mdw-color__shadow), 0.30));
+      
+        --mdw-surface__filter__0: var(--mdw-surface__shadow__0__umbra) var(--mdw-surface__shadow__0__penumbra);
+        --mdw-surface__filter__1: var(--mdw-surface__shadow__1__umbra) var(--mdw-surface__shadow__1__penumbra);
+        --mdw-surface__filter__2: var(--mdw-surface__shadow__2__umbra) var(--mdw-surface__shadow__2__penumbra);
+        --mdw-surface__filter__3: var(--mdw-surface__shadow__3__umbra) var(--mdw-surface__shadow__3__penumbra);
+        --mdw-surface__filter__4: var(--mdw-surface__shadow__4__umbra) var(--mdw-surface__shadow__4__penumbra);
+        --mdw-surface__filter__5: var(--mdw-surface__shadow__5__umbra) var(--mdw-surface__shadow__5__penumbra);
+        */
+      
+        /** Flatten for performance */
+        --mdw-surface__shadow__0: drop-shadow(0px 1px 001px rgba(0,0,0,000)) drop-shadow(0px 1px 2.5px rgba(0,0,0,00000));
+        --mdw-surface__shadow__1: drop-shadow(0px 1px 001px rgba(0,0,0,0.3)) drop-shadow(0px 1px 2.5px rgba(0,0,0,0.250));
+        --mdw-surface__shadow__2: drop-shadow(0px 1px 001px rgba(0,0,0,0.3)) drop-shadow(0px 2px 005px rgba(0,0,0,0.250));
+        --mdw-surface__shadow__3: drop-shadow(0px 1px 1.5px rgba(0,0,0,0.3)) drop-shadow(0px 4px 007px rgba(0,0,0,0.263));
+        --mdw-surface__shadow__4: drop-shadow(0px 2px 1.5px rgba(0,0,0,0.3)) drop-shadow(0px 6px 009px rgba(0,0,0,0.270));
+        --mdw-surface__shadow__5: drop-shadow(0px 4px 2.0px rgba(0,0,0,0.3)) drop-shadow(0px 8px 012px rgba(0,0,0,0.300));
+      
+        --mdw-surface__tint__1: 0.05;
+        --mdw-surface__tint__2: 0.08;
+        --mdw-surface__tint__3: 0.11;
+        --mdw-surface__tint__4: 0.12;
+        --mdw-surface__tint__5: 0.14;
+      
+        /** Configurables */
+      
+        --mdw-surface__shadow__resting: none;
+        --mdw-surface__shadow: var(--mdw-surface__shadow__resting);
+        --mdw-surface__tint: 0;
+        --mdw-surface__tint__raised: 0;
+        z-index: 0;
+      }
+      
+      :host([elevation="0"]) {
+        --mdw-surface__tint: 0;
+        --mdw-surface__shadow__resting: none;
+      }
+      
+      :host([elevation="1"]) {
+        --mdw-surface__tint: var(--mdw-surface__tint__1);
+        --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
+      }
+      
+      :host([elevation="2"]) {
+        --mdw-surface__tint: var(--mdw-surface__tint__2);
+        --mdw-surface__shadow__resting: var(--mdw-surface__shadow__2);
+      }
+      
+      :host([elevation="3"]) {
+        --mdw-surface__tint: var(--mdw-surface__tint__3);
+        --mdw-surface__shadow__resting: var(--mdw-surface__shadow__3);
+      }
+      
+      :host([elevation="4"]) {
+        --mdw-surface__tint: var(--mdw-surface__tint__4);
+        --mdw-surface__shadow__resting: var(--mdw-surface__shadow__4);
+      }
+      
+      :host([elevation="5"]) {
+        --mdw-surface__tint: var(--mdw-surface__tint__5);
+        --mdw-surface__shadow__resting: var(--mdw-surface__shadow__5);
+      }
+      
+      :host([elevation]) {
+        --mdw-surface__tint__raised: var(--mdw-surface__tint);
+        --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
+      }
+      
+      .surface {
+        position: absolute;
+        inset: 0;
+      
+        pointer-events: none;
+      
+        filter: var(--mdw-surface__shadow);
+        z-index: -1;
+      
+        transition-delay: 1ms;
+        transition-duration: 200ms;
+        transition-property: filter;
+        transition-timing-function: linear;
+        will-change: filter;
+      }
+      
+      .surface[raised] {
+        filter: var(--mdw-surface__shadow__raised, var(--mdw-surface__shadow__resting));
+      }
+      
+      .surface[disabled] {
+        filter:none;
+      }
+      
+      .surface-tint {
+        position: absolute;
+        inset: 0;
+      
+        pointer-events: none;
+      
+        opacity: var(--mdw-surface__tint, 0);
+      
+        background-color: rgb(var(--mdw-color__primary));
+        border-radius: inherit;
+      
+        transition-delay: 1ms;
+        transition-duration: 200ms;
+        transition-property: opacity;
+        will-change: opacity;
+      }
+      
+      .surface-tint[raised] {
+        opacity: var(--mdw-surface__tint__raised, 0);
+      }
+      
+      .surface-tint[pressed] {
+        opacity: var(--mdw-surface__tint, 0);
+      }
+      
+      .surface-tint[color]:not([color|="surface"]) {
+        display: none;
+      }    
     `;
 }