@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/mixins/ShapeMixin.js

@@ -0,0 +1,31 @@
+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
+ */
+export default function ShapeMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      shapeTop: 'boolean',
+      shapeBottom: 'boolean',
+      shapeStart: 'boolean',
+      shapeEnd: 'boolean',
+      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}>
+          <div id=outline-left class="outline-section outline-left"></div>
+          <div id=outline-right class="outline-section outline-right"></div>
+        </div>
+      </div>
+    `;
+}

package/mixins/StateMixin.css

@@ -0,0 +1,82 @@
+/* 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/StateMixin.js

@@ -0,0 +1,114 @@
+import styles from './StateMixin.css' assert { type: 'css' };
+
+// Globals
+
+let lastInteractionWasTouch = window?.matchMedia?.('(any-pointer: coarse)').matches;
+
+/**
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function StateMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      disabled: 'boolean',
+      _lastInteraction: {
+        /** @type {'mouse'|'touch'|'key'|'pen'|null} */
+        value: null,
+      },
+      _hovered: 'boolean',
+      _focused: 'boolean',
+      _pressed: 'boolean',
+      stateLayer: 'boolean',
+    })
+    .observe({
+      disabledState({ disabled }) { return disabled; },
+      hoveredState({ _hovered }) { return _hovered; },
+      focusedState({ _focused }) { return _focused; },
+      pressedState({ _pressed }) { return _pressed; },
+      touchedState({ _lastInteraction }) {
+        return _lastInteraction === 'touch';
+      },
+    })
+    .define({
+      stateTargetElement() { return this; },
+    })
+    .css(styles)
+    .html/* html */`
+      <div id=state _if={stateLayer}
+        disabled={disabledState}
+        focused={focusedState}
+        hovered={hoveredState}
+        pressed={pressedState}
+        interaction={_lastInteraction}
+        touched=${({ _lastInteraction }) => _lastInteraction === 'touch'}
+        aria-hidden=true></div>
+    `
+    .events({
+      pointerenter(event) {
+        if (!event.isPrimary) return;
+        this._pressed = this.stateTargetElement.matches(':active');
+        if (event.pointerType === 'touch') return;
+        this._hovered = true;
+        // Firefox lags a frame before reporting :hover
+        // requestAnimationFrame(() => {
+        //  this._hovered = this.stateTargetElement.matches(':hover');
+        // });
+      },
+      '~pointerdown'(event) {
+        if (!event.isPrimary) return;
+        this._lastInteraction = /** @type {'touch'|'mouse'|'pen'} */ (event.pointerType);
+        this._pressed = true;
+      },
+      '~pointerup'(event) {
+        if (!event.isPrimary) return;
+        this._lastInteraction = /** @type {'touch'|'mouse'|'pen'} */ (event.pointerType);
+        this._pressed = false;
+      },
+      pointercancel(e) {
+        if (!e.isPrimary) return;
+        this._pressed = this.stateTargetElement.matches(':active');
+      },
+      pointerleave(event) {
+        if (!event.isPrimary) return;
+        this._pressed = false;
+        this._hovered = false;
+      },
+      '~keydown'(e) {
+        this._lastInteraction = 'key';
+        if (e.repeat) return;
+        // console.debug('keydown', this.stateTargetElement.matches(':active'));
+        requestAnimationFrame(() => {
+          this._pressed = this.stateTargetElement.matches(':active');
+          // console.debug('pressed? after one keydown frame', this._pressed);
+        });
+      },
+      '~keyup'() {
+        this._lastInteraction = 'key';
+        // console.debug('keyup', this.stateTargetElement.matches(':active'));
+        requestAnimationFrame(() => {
+          this._pressed = this.stateTargetElement.matches(':active');
+          // console.debug('pressed? after one keyUP frame?', this._pressed);
+        });
+      },
+      blur() {
+        this._focused = false;
+        if (!this._lastInteraction) return;
+        lastInteractionWasTouch = (this._lastInteraction === 'touch');
+        // this._lastInteraction = null;
+      },
+      focus() {
+        this._focused = true;
+        // Element was focused without a mouse or touch event (keyboard or programmatic)
+        if (!this._lastInteraction && lastInteractionWasTouch) {
+          // Replicate touch behavior
+          this._lastInteraction = 'touch';
+        }
+      },
+    })
+    .on({
+      disconnected() {
+        this._lastInteraction = null;
+      },
+    });
+}

package/mixins/SurfaceMixin.css

@@ -0,0 +1,150 @@
+: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;
+}

package/mixins/SurfaceMixin.js

@@ -0,0 +1,32 @@
+import styles from './SurfaceMixin.css' assert { type: 'css' };
+
+/**
+ * @param {ReturnType<import('./StateMixin.js').default> & ReturnType<import('./ThemableMixin.js').default>} Base
+ */
+export default function SurfaceMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      elevated: 'boolean',
+      elevation: 'integer',
+      _raised: {
+        type: 'boolean',
+        get({ hoveredState, pressedState }) {
+          return hoveredState && !pressedState;
+        },
+      },
+    })
+    .expressions({
+      showSurfaceTint({ elevated, elevation, disabledState, color }) {
+        return (elevated || elevation !== null)
+          && !disabledState
+          && (!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>
+    `;
+}