@shortfuse/materialdesignweb 0.5.0 → 0.7.1-0

package/components/Label.js

@@ -0,0 +1,7 @@
+import Box from './Box.js';
+import styles from './Label.css' assert { type: 'css' };
+
+export default Box
+  .extend()
+  .css(styles)
+  .autoRegister('mdw-label');

package/components/Layout.css

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

package/components/Layout.js

@@ -0,0 +1,12 @@
+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>
+  `
+  .autoRegister('mdw-layout');

package/components/List.css

@@ -0,0 +1,12 @@
+/* https://m3.material.io/components/lists/specs */
+
+:host {
+  display: flex;
+  flex-direction: column;
+
+  padding-block: 8px;
+}
+
+:host(:focus) {
+  outline: 1px solid red;
+}

package/components/List.js

@@ -0,0 +1,17 @@
+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 */
+
+export default Box
+  .mixin(DensityMixin)
+  .mixin(AriaReflectorMixin)
+  .extend()
+  .css(styles)
+  .set({
+    _ariaRole: 'list',
+  })
+  .autoRegister('mdw-list');

package/components/ListItem.css

@@ -0,0 +1,224 @@
+/* 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;
+
+  outline: none;
+
+  color: inherit;
+
+  text-decoration: none;
+  cursor: auto;
+}
+
+: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));
+}

package/components/ListItem.js

@@ -0,0 +1,112 @@
+// https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+
+import './CheckboxIcon.js';
+import './RadioIcon.js';
+import './Divider.js';
+import './Icon.js';
+
+import CustomElement from '../core/CustomElement.js';
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+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)
+  .mixin(RippleMixin)
+  .mixin(AriaReflectorMixin)
+  .extend()
+  .set({
+    _ariaRole: 'listitem',
+    delegatesFocus: false,
+    stateLayer: true,
+  })
+  .observe({
+    leading: 'string',
+    avatar: 'string',
+    avatarColor: { value: 'primary-container' },
+    avatarSrc: 'string',
+    src: 'string',
+    alt: 'string',
+    icon: 'string',
+    href: 'string',
+    iconInk: 'string',
+    iconSrc: 'string',
+    checkbox: 'string',
+    radio: 'string',
+    selectionColor: { value: 'primary' },
+    selected: 'boolean',
+    supporting: 'string',
+    trailing: 'string',
+    trailingIcon: 'string',
+    trailingIconInk: 'string',
+    trailingIconSrc: 'string',
+    divider: 'boolean',
+    video: 'boolean',
+    lines: 'integer',
+    _supportingSlotted: 'boolean',
+  })
+  .observe({
+    // Alias since not form-associated
+    disabledState({ disabled }) {
+      return disabled;
+    },
+
+  })
+  .expressions({
+    isInteractive({ href }) {
+      return href != null;
+    },
+    hasSupporting() {
+      return this.supporting || this._supportingSlotted;
+    },
+    checkboxClass() {
+      return this.checkbox || 'leading';
+    },
+    radioClass() {
+      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>
+    <mdw-radio-icon id=radio _if={radio} aria-hidden=true class={radioClass} disabled={disabledState} ink={selectionColor} selected={selected}></mdw-radio-icon>
+    <mdw-box _if={avatar} id=avatar color={avatarColor} type-style=title-medium src={AvatarSrc}
+      aria-hidden=true>{avatar}</mdw-box>
+    <mdw-icon _if={icon} id=icon ink={iconInk} src={iconSrc} aria-hidden=true>{icon}</mdw-icon>
+    <img id=img _if={src} src={src} alt={alt} video={video} />
+    <slot name=leading>{leading}</slot>
+    <div id=content has-supporting={hasSupporting} lines={lines}>
+      <slot id=slot></slot>
+      <slot id=supporting name=supporting class=text lines={lines}>{supporting}</slot>
+    </div>
+    <mdw-icon _if={trailingIcon} id=trailing-icon ink={trailingIconInk} src={trailingIconSrc} aria-hidden=true>{trailingIcon}</mdw-icon>
+    <slot id=trailing name=trailing role=note>{trailing}</slot>
+    <mdw-divider _if={divider} id=divider divder={divider}></mdw-divider>
+  `
+  .on({
+    composed() {
+      const { state, rippleContainer, anchor } = this.refs;
+      anchor.append(
+        state,
+        rippleContainer,
+      );
+      state.setAttribute('state-disabled', 'focus hover');
+    },
+    disabledStateChanged(oldValue, newValue) {
+      this.updateAriaProperty('ariaDisabled', newValue ? 'true' : 'false');
+    },
+  })
+  .childEvents({
+    supporting: {
+      /** @param {Event & {currentTarget: HTMLSlotElement}} event */
+      slotchange({ currentTarget }) {
+        this._supportingSlotted = currentTarget.assignedNodes().length !== 0;
+      },
+    },
+  })
+  .autoRegister('mdw-list-item');

package/components/ListOption.css

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

package/components/ListOption.js

@@ -0,0 +1,122 @@
+// 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
+
+export default class ListOption extends ListItem
+  .extend()
+  .setStatic({
+    formAssociated: true,
+  })
+  .set({
+    _ariaRole: 'none',
+    delegatesFocus: true,
+    _index: -1,
+    _selectedDirty: false,
+    isInteractive: true,
+  })
+  .observe({
+    // ListOption.prototype._form = ListOption.prop('_form');
+    _label: { attr: 'label', nullParser: String },
+    defaultSelected: { attr: 'selected', reflect: true, type: 'boolean' },
+    _selected: 'boolean',
+    _value: { attr: 'value', reflect: true },
+    _formDisabled: 'boolean',
+  })
+  .observe({
+    selected: {
+      reflect: false,
+      type: 'boolean',
+      get({ _selectedDirty, defaultSelected, _selected }) {
+        if (!_selectedDirty) return defaultSelected;
+        return _selected;
+      },
+      /** @param {boolean} value */
+      set(value) {
+        this._selectedDirty = true;
+        this._selected = value;
+      },
+    },
+    disabledState({ _formDisabled, disabled }) {
+      if (_formDisabled) return true;
+      return !!disabled;
+    },
+  })
+  .define({
+    index() { return this._index; },
+    form() { return /** @type {import('./ListSelect.js').default} */ (this.parentElement)?.form; },
+    label: {
+      get() { return this._label; },
+      /** @param {string} value */
+      set(value) {
+        this._label = value;
+      },
+    },
+    value: {
+      get() { return this._value; },
+      /** @param {string} value */
+      set(value) { this._label = value; },
+    },
+  })
+  .methods({
+    /** @param {boolean} formDisabled  */
+    formDisabledCallback(formDisabled) {
+      this._formDisabled = formDisabled;
+    },
+    /** @type {HTMLElement['focus']} */
+    focus(...options) {
+      this.refs.anchor.focus(...options);
+    },
+  })
+  .css(styles)
+  .on({
+    composed({ inline }) {
+      const { anchor, state, content } = this.refs;
+
+      // Form Associated elements cannot receive focus unless using delegatesFocus
+      // Workaround by redirecting focus to an inner element
+      // Reuse HTMLAnchorElement with no HREF
+
+      anchor.setAttribute('disabled', '{disabledState}');
+      anchor.setAttribute('role', 'option');
+      anchor.setAttribute('aria-disabled', inline(({ disabledState }) => `${disabledState}`));
+      anchor.setAttribute('tabindex', '0');
+      anchor.setAttribute('aria-selected', inline(({ selected }) => `${selected}`));
+      anchor.setAttribute('selected', '{selected}');
+      anchor.removeAttribute('href');
+      anchor.removeAttribute('_if');
+
+      content.setAttribute('selected', '{selected}');
+
+      state.setAttribute('state-disabled', 'focus');
+    },
+  }) {
+  static { this.autoRegister('mdw-list-option'); }
+
+  /**
+   * @param {string} [text]
+   * @param {string} [value]
+   * @param {boolean} [defaultSelected]
+   * @param {boolean} [selected]
+   */
+  constructor(text, value, defaultSelected, selected) {
+    super();
+    if (text !== undefined) {
+      this.text = text;
+    }
+    if (value !== undefined) {
+      this._value = value;
+    }
+    if (defaultSelected !== undefined) {
+      this.defaultSelected = defaultSelected;
+    }
+    if (selected !== undefined) {
+      this._selected = selected;
+    }
+    if (!this.hasAttribute('tabindex')) {
+      this.tabIndex = 0;
+    }
+  }
+}

package/components/ListSelect.css

@@ -0,0 +1,9 @@
+:host(:disabled) {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+:host([internals-disabled]) {
+  cursor: not-allowed;
+  pointer-events: none;
+}