@shortfuse/materialdesignweb 0.5.0 → 0.7.1-0

package/components/Button.js

@@ -0,0 +1,95 @@
+import './Icon.js';
+import CustomElement from '../core/CustomElement.js';
+import DensityMixin from '../mixins/DensityMixin.js';
+import InputMixin from '../mixins/InputMixin.js';
+import RippleMixin from '../mixins/RippleMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+import SurfaceMixin from '../mixins/SurfaceMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './Button.css' assert { type: 'css' };
+
+export default CustomElement
+  .mixin(ThemableMixin)
+  .mixin(DensityMixin)
+  .mixin(SurfaceMixin)
+  .mixin(ShapeMixin)
+  .mixin(StateMixin)
+  .mixin(RippleMixin)
+  .mixin(InputMixin)
+  .extend()
+  .define({
+    stateTargetElement() { return this.refs.control; },
+  })
+  .set({
+    stateLayer: true,
+    delegatesFocus: true,
+  })
+  .observe({
+    type: { value: 'button' },
+    elevated: 'boolean',
+    filled: 'string',
+    outlined: 'boolean',
+    icon: 'string',
+    iconInk: 'string',
+    src: 'string',
+    svg: 'string',
+    svgPath: 'string',
+  })
+  .expressions({
+    hasIcon({ icon, svg, src, svgPath }) {
+      return icon ?? svg ?? src ?? svgPath;
+    },
+  })
+  .css(styles)
+  .html/* html */`
+    <mdw-icon _if={hasIcon} id=icon ink={iconInk} disabled={disabledState} outlined={outlined} aria-hidden=true svg={svg} src={src} svg-path={svgPath}>{icon}</mdw-icon>
+    <slot id=slot disabled={disabledState}></slot>
+  `
+  .on({
+    composed() {
+      const {
+        shape, surfaceTint, state, rippleContainer,
+        surface, control, label, slot,
+        icon,
+      } = this.refs;
+      surface.append(shape);
+      shape.append(state, rippleContainer, surfaceTint);
+      label.append(icon, slot);
+
+      shape.setAttribute('filled', '{filled}');
+      control.setAttribute('role', 'button');
+      control.setAttribute('type', 'button');
+    },
+  })
+  .childEvents({
+    control: {
+    /**
+     * Duplicates button for form submission
+     * @see https://github.com/WICG/webcomponents/issues/814
+     * @param {{currentTarget:HTMLInputElement}} event
+     * @type {any}
+     */
+      '~click'({ currentTarget }) {
+        if (currentTarget.disabled) return;
+        if (currentTarget.type !== 'submit') return;
+        if (this.disabled) return;
+        const { value } = currentTarget;
+        const form = this.elementInternals?.form;
+        if (!form) return;
+        this.elementInternals.setFormValue(value);
+        if ((currentTarget.type ?? 'submit') !== 'submit') return;
+        const duplicatedButton = /** @type {HTMLInputElement} */ (currentTarget.cloneNode());
+        duplicatedButton.hidden = true;
+        form.append(duplicatedButton);
+        if ('requestSubmit' in form) {
+          form.requestSubmit(duplicatedButton);
+        } else {
+          duplicatedButton.click();
+        }
+        duplicatedButton.remove();
+      },
+    },
+  })
+  .autoRegister('mdw-button');

package/components/Button.md

@@ -0,0 +1,61 @@
+# Syntax
+
+
+## Elevated
+```html
+  <mdw-button elevated>Elevated</mdw-button>
+  <mdw-button disabled elevated>Elevated (disabled)</mdw-button>
+  <mdw-button elevated icon=search>Elevated icon</mdw-button>
+  <mdw-button elevated color=surface ink=tertiary>Elevated Surface-Tertiary</mdw-button>
+```
+
+## Filled
+```html
+  <mdw-button filled>Filled button</mdw-button>
+  <mdw-button disabled filled>Filled button (Disabled)</mdw-button>
+```
+
+## Filled Tonal
+```html
+  <mdw-button filled=tonal>Filled tonal button</mdw-button>
+  <mdw-button disabled filled=tonal>Filled tonal button (Disabled)</mdw-button>
+  <mdw-button filled=tonal icon=search>Filled tonal button</mdw-button>
+```
+
+## Outlined
+```html
+  <mdw-button outlined>Outlined</mdw-button>
+  <mdw-button outlined icon=add>Outlined icon</mdw-button>
+  <mdw-button outlinedsurface icon=add>Outlined surface icon</mdw-button>
+  <mdw-button disabled outlined>Outlined (Disabled)</mdw-button>
+  <mdw-button disabled outlined icon=add>Outlined icon (Disabled)</mdw-button>
+```
+
+## Text
+```html
+  <mdw-button>Text</mdw-button>
+  <mdw-button ink=tertiary icon=add>Tertiary</mdw-button>
+  <mdw-button ink=tertiary disabled>Text (Disabled)</mdw-button>
+  <mdw-button ink=primary disabled icon=add>Icon text (Disabled)</mdw-button>
+```
+
+## Custom
+```html
+  <mdw-button class=mdw-custom ink=yellow>Custom text</mdw-button>
+  <mdw-button class=mdw-custom elevated ink=yellow>Custom elevated</mdw-button>
+  <mdw-button class=mdw-custom filled color=yellow>Custom filled</mdw-button>
+  <mdw-button class=mdw-custom filled=tonal icon=add color=yellow-container>Custom tonal</mdw-button>
+  <mdw-button class=mdw-custom outlined ink=yellow>Custom outlined</mdw-button>
+  <mdw-button disabled outlined>Outlined (Disabled)</mdw-button>
+  <mdw-button disabled outlined icon=add>Outlined icon (Disabled)</mdw-button>
+  <mdw-button disabled class=mdw-custom ink=yellow>Custom text</mdw-button>
+  <mdw-button disabled class=mdw-custom elevated=yellow>Custom elevated</mdw-button>
+  <mdw-button disabled filled class=mdw-custom color=yellow>Custom filled</mdw-button>
+  <mdw-button disabled filled=tonal class=mdw-custom icon=add color=yellow-container>Custom tonal</mdw-button>
+```
+
+```js
+  import Button from "components/Button.js";
+
+  Button.register()
+```

package/components/Card.css

@@ -0,0 +1,109 @@
+/* https://m3.material.io/components/cards/specs */
+
+:host {
+  --mdw-shape__size: 12px;
+  --mdw-surface__tint: var(--mdw-surface__tint__0);
+  --mdw-surface__tint__raised: var(--mdw-surface__tint);
+
+  --mdw-surface__shadow__resting: none;
+  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
+  /* padding-inline: 12px; */
+
+  --mdw-bg: var(--mdw-color__surface);
+  --mdw-ink: var(--mdw-color__on-surface);
+  position: relative;
+
+  display: block;
+
+  color: rgb(var(--mdw-ink));
+
+  font: var(--mdw-type__font);
+  letter-spacing: var(--mdw-type__letter-spacing);
+}
+
+#shape:is([elevated],[filled]) {
+  background-color: rgb(var(--mdw-bg));
+}
+
+:host(:where([filled])) {
+  --mdw-bg: var(--mdw-color__surface-variant);
+  --mdw-ink: var(--mdw-color__on-surface-variant);
+}
+
+:host(:where([elevated])) {
+  --mdw-bg: var(--mdw-color__surface);
+  --mdw-ink: var(--mdw-color__on-surface);
+}
+
+:host([filled]) {
+  --mdw-surface__tint: var(--mdw-surface__tint__0);
+  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
+}
+
+:host([filled][actionable]) {
+  --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
+  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
+}
+
+:host([elevated]) {
+  --mdw-surface__tint: var(--mdw-surface__tint__1);
+  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
+}
+
+:host([elevated][actionable]) {
+  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
+  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
+}
+
+#shape[disabled] {
+
+  /* Works on images */
+  filter: grayscale();
+
+  color: rgb(var(--mdw-color__on-surface));
+}
+
+:host([disabled]) {
+  cursor: not-allowed;
+
+  filter: grayscale();
+  opacity: 0.38;
+}
+
+#slot[disabled] {
+  color: rgb(var(--mdw-color__on-surface));
+}
+
+#outline[disabled] {
+  color: rgba(var(--mdw-color__on-surface), calc(0.12/0.38));
+}
+
+/** Firefox and Safari do not support [inert] */
+
+#inert-blocker {
+  position: absolute;
+  inset: 0;
+
+  cursor: not-allowed;
+  pointer-events: auto;
+
+  z-index: 99;
+}
+
+#shape[disabled][elevated] {
+  background-color: rgba(var(--mdw-color__surface-variant));
+}
+
+#action {
+  --mdw-ink: inherit;
+  --mdw-shape__size: inherit;
+
+  position: absolute;
+  inset: 0;
+
+  padding: 0;
+
+  z-index: 0;
+
+  color: inherit
+}

package/components/Card.js

@@ -0,0 +1,82 @@
+import CustomElement from '../core/CustomElement.js';
+import { EVENT_HANDLER_TYPE } from '../core/customTypes.js';
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import FlexableMixin from '../mixins/FlexableMixin.js';
+import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+import SurfaceMixin from '../mixins/SurfaceMixin.js';
+
+import styles from './Card.css' assert { type: 'css' };
+
+const SUPPORTS_INERT = 'inert' in HTMLElement.prototype;
+
+export default CustomElement
+  .mixin(FlexableMixin)
+  .mixin(SurfaceMixin)
+  .mixin(ShapeMixin)
+  .mixin(FormAssociatedMixin) // Tap into FormAssociated for disabledState
+  .mixin(StateMixin)
+  .mixin(AriaReflectorMixin)
+  .extend()
+  .setStatic({
+    delegatesFocus: true,
+  })
+  .set({
+    _ariaRole: 'figure',
+  })
+  .observe({
+    filled: 'boolean',
+    actionable: 'boolean',
+    actionLabel: 'string',
+    onaction: EVENT_HANDLER_TYPE,
+  })
+  .define({
+    stateTargetElement() { return this.actionable ? this.refs.action : this; },
+  })
+  .expressions({
+    showBlocker: ({ disabledState }) => !SUPPORTS_INERT && disabledState,
+  })
+  .methods({
+    focus() {
+      if (this.disabledState) return;
+      if (this.actionable) this.refs.action.focus();
+    },
+  })
+  .html/* html */`
+    <mdw-button _if={actionable} aria-label={actionLabel} id=action disabled={disabledState}></mdw-button>
+    <div _if={showBlocker} id=inert-blocker></div>
+    <slot id=slot disabled={disabledState}></slot>
+  `
+  .css(styles)
+  .on({
+    composed() {
+      const { slot, surface, surfaceTint, shape, outline } = this.refs;
+      shape.append(surfaceTint);
+      surface.append(shape);
+      outline.removeAttribute('pressed');
+      outline.removeAttribute('focused');
+
+      shape.setAttribute('filled', '{filled}');
+      slot.setAttribute('inert', '{disabledState}');
+      slot.setAttribute('disabled', '{disabledState}');
+      // shape.setAttribute('disabled', '{disabledState}');
+      // shape.setAttribute('filled', '{filled}');
+    },
+  })
+  .childEvents({
+    action: {
+      click() {
+        if (this.disabledState) return;
+        this.dispatchEvent(new Event('action'));
+      },
+    },
+    slot: SUPPORTS_INERT ? {} : {
+      focusin() {
+        if (this.disabledState) {
+          console.warn('Inert not supported. Element should be able to receive focus');
+        }
+      },
+    },
+  })
+  .autoRegister('mdw-card');

package/components/Checkbox.css

@@ -0,0 +1,89 @@
+/* https://m3.material.io/components/checkbox/specs */
+
+:host {
+  --mdw-ink: var(--mdw-color__on-primary);
+  --mdw-bg: var(--mdw-color__primary);
+
+  display: inline-grid;
+  align-items: baseline;
+  gap: 12px;
+  grid-auto-flow: column;
+  justify-content: flex-start;
+
+  cursor: pointer;
+
+  transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
+}
+
+:host([disabled]) {
+  opacity: 0.38;
+}
+
+:host(:empty) {
+  vertical-align: -11.5%;
+
+  line-height: 18px;
+}
+
+:host(:empty) #checkbox {
+  transform: none;
+}
+
+#control {
+  grid-column: 1/1;
+
+  cursor: inherit;
+}
+
+#label {
+  cursor: inherit;
+}
+
+#label[disabled] {
+  cursor: not-allowed;
+}
+
+#state,
+#ripple-container {
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+
+  block-size: 40px;
+  inline-size: 40px;
+
+  transform: translateX(-50%) translateY(-50%);
+
+  border-radius: 50%;
+}
+
+#checkbox {
+  position: relative;
+
+  display: inline-flex;
+
+  grid-column: 1 / 1;
+
+  pointer-events: none;
+
+  transform: translateY(11.5%);
+
+  color: rgb(var(--mdw-color__on-surface));
+}
+
+#checkbox[selected] {
+  color: rgb(var(--mdw-bg));
+}
+
+#checkbox[disabled] {
+  color: rgb(var(--mdw-color__on-surface));
+}
+
+#checkbox[errored] {
+  color: rgb(var(--mdw-color__error));
+}
+
+#icon {
+  --mdw-ink: inherit;
+  --mdw-bg: inherit;
+  --disabled-opacity: 1;
+}

package/components/Checkbox.js

@@ -0,0 +1,59 @@
+import './CheckboxIcon.js';
+
+import CustomElement from '../core/CustomElement.js';
+import InputMixin from '../mixins/InputMixin.js';
+import RippleMixin from '../mixins/RippleMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+import TouchTargetMixin from '../mixins/TouchTargetMixin.js';
+
+import styles from './Checkbox.css' assert { type: 'css' };
+
+export default CustomElement
+  .mixin(ThemableMixin)
+  .mixin(StateMixin)
+  .mixin(RippleMixin)
+  .mixin(InputMixin)
+  .mixin(TouchTargetMixin)
+  .extend()
+  .set({
+    stateLayer: true,
+    type: 'checkbox',
+  })
+  .observe({
+    icon: { value: 'check' },
+    indeterminateIcon: { value: 'check_indeterminate_small' },
+    /** Reflected property */
+    indeterminate: 'boolean',
+  })
+  .observe({
+    _ariaChecked({ indeterminate, checked }) {
+      return (indeterminate ? 'mixed' : `${!!checked}`);
+    },
+    _determinateIcon({ indeterminate, indeterminateIcon, icon }) {
+      return (indeterminate ? indeterminateIcon : icon);
+    },
+  })
+  .css(styles)
+  .on({
+    composed({ html }) {
+      const { label, control, state, rippleContainer, touchTarget } = this.refs;
+      label.append(html`
+        ${touchTarget}
+        ${control}
+        <div id=checkbox errored={erroredState} selected={checked}>
+          <mdw-checkbox-icon id=icon errored={erroredState} disabled={disabledState}
+            icon={_determinateIcon} selected={checked}>
+          </mdw-checkbox-icon>
+          ${state}
+          ${rippleContainer}
+        </div>
+        <slot id=slot></slot>
+      `);
+
+      control.setAttribute('type', 'checkbox');
+      // Indeterminate must be manually expressed for ARIA
+      control.setAttribute('aria-checked', '{_ariaChecked}');
+    },
+  })
+  .autoRegister('mdw-checkbox');

package/components/CheckboxIcon.css

@@ -0,0 +1,90 @@
+/* https://m3.material.io/components/checkbox/specs */
+
+:host {
+  --mdw-ink: var(--mdw-color__on-primary);
+  --mdw-bg: var(--mdw-color__primary);
+  --mdw-shape__size: 2px;
+  --disabled-opacity: 0.38;
+  position: relative;
+
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  block-size: 18px;
+  inline-size: 18px;
+
+  font-size: 18px;
+  line-height: 18px;
+}
+
+#shape {
+  --mdw-shape__size: inherit;
+  position: absolute;
+  inset: 0;
+
+  z-index: auto;
+
+  background-color: transparent;
+}
+
+#icon {
+  position: absolute;
+  inset: 0;
+
+  opacity: 0;
+
+  background-color: rgb(var(--mdw-bg));
+  color: rgb(var(--mdw-ink));
+
+  transition-duration: 200ms;
+  transition-property: opacity, background-color, color;
+  will-change: opacity;
+}
+
+#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__on-surface));
+
+  transition-duration: 200ms;
+  transition-property: opacity, background-color, color;
+  will-change: opacity;
+}
+
+/* Selected */
+
+#icon[selected] {
+  opacity: 1;
+}
+
+#outline[selected] {
+  opacity: 0;
+}
+
+/* Errored */
+
+#icon[errored] {
+  background-color: rgb(var(--mdw-color__error));
+  color: rgb(var(--mdw-color__on-error));
+}
+
+#outline[errored] {
+  color: rgb(var(--mdw-color__error));
+}
+
+/* Disabled */
+
+#icon[disabled] {
+  background-color: rgba(var(--mdw-color__on-surface), var(--disabled-opacity));
+  color: rgb(var(--mdw-color__surface), var(--disabled-opacity));
+}
+
+#outline[disabled] {
+  color: rgb(var(--mdw-color__on-surface), var(--disabled-opacity));
+}

package/components/CheckboxIcon.js

@@ -0,0 +1,41 @@
+import './Icon.js';
+import CustomElement from '../core/CustomElement.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './CheckboxIcon.css' assert {type: 'css'};
+import outlineStyles from './Outline.css' assert {type:'css'};
+
+export default CustomElement
+  .mixin(ThemableMixin)
+  .mixin(ShapeMixin)
+  .observe({
+    selected: 'boolean',
+    icon: 'string',
+    errored: 'boolean',
+    disabled: 'boolean',
+  })
+  .define({
+    /** Alias for Selected (QoL) */
+    checked: {
+      get() { return this.selected; },
+      set(value) { this.selected = value; },
+    },
+  })
+  .css(outlineStyles, styles)
+  .on({
+    composed({ html }) {
+      const { outline, shape } = this.refs;
+      outline.removeAttribute('_if');
+      outline.setAttribute('selected', '{selected}');
+      outline.setAttribute('errored', '{errored}');
+      outline.setAttribute('disabled', '{disabled}');
+      // outlineLeft.remove();
+      // outlineRight.remove();
+      shape.append(html`
+        <mdw-icon id=icon selected={selected} errored={errored} disabled={disabled}>{icon}</mdw-icon>
+      `);
+    },
+  })
+  .extend()
+  .autoRegister('mdw-checkbox-icon');

package/components/Chip.css

@@ -0,0 +1,35 @@
+/* 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);
+}

package/components/Chip.js

@@ -0,0 +1,22 @@
+import Button from './Button.js';
+import styles from './Chip.css' assert { type: 'css' };
+
+export default Button
+  .extend()
+  .observe({
+    suggestion: 'boolean',
+  })
+  .css(styles)
+  .on({
+    composed({ inline }) {
+      const { slot, outline, icon } = this.refs;
+      slot.setAttribute('disabled', '{disabledState}');
+      slot.removeAttribute('ink');
+      slot.removeAttribute('color');
+      outline.setAttribute('_if', '{!elevated}');
+      outline.setAttribute('ink', '{ink}');
+      outline.setAttribute('color', '{color}');
+      icon.setAttribute('ink', inline(({ ink, iconInk }) => iconInk ?? ink ?? 'primary'));
+    },
+  })
+  .autoRegister('mdw-chip');