@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/NavItem.css

@@ -0,0 +1,181 @@
+/* https://m3.material.io/components/navigation-bar/specs */
+/* https://m3.material.io/components/navigation-drawer/specs */
+/* https://m3.material.io/components/navigation-rail/specs */
+
+:host {
+  --mdw-badge__scale: 0;
+  --mdw-shape__size: var(--mdw-shape__full);
+  --mdw-nav-item__offset-y: 0;
+  position: relative;
+
+  display: grid;
+  align-content: center;
+  align-items: center;
+  grid-auto-flow: row;
+  grid-auto-rows: minmax(20px, min-content);
+  grid-template-rows: [icon] minmax(32px, 1fr);
+  grid-template-columns: [icon] minmax(56px, 1fr);
+
+  justify-items: center;
+  row-gap: 4px;
+
+  box-sizing: border-box;
+  min-block-size: 56px;
+
+  padding-inline: 0;
+
+  cursor: pointer;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  user-select: none;
+
+  font: var(--mdw-typescale__label-large__font);
+  letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
+
+  text-align: center;
+}
+
+:host(:not([color])) {
+  --mdw-ink: var(--mdw-color__on-secondary-container);
+  --mdw-bg: var(--mdw-color__secondary-container);
+}
+
+:host([color]) {
+  background-color: transparent;
+  color: rgb(var(--mdw-color__on-surface-variant));
+}
+
+#slot {
+  display: contents;
+  align-items: center;
+  flex-direction: column;
+  grid-area: label;
+  justify-content: center;
+
+  grid-column: 1 /4;
+
+  grid-row: 2;
+
+  flex: 1;
+
+  cursor: inherit;
+  outline: none;
+
+  transform: translateY(var(--mdw-nav-item__offset-y));
+
+  color: rgb(var(--mdw-color__on-surface-variant));
+
+  transition: opacity, color, transform 200ms;
+  will-change: opacity, transform;
+}
+
+#anchor {
+  position: absolute;
+  inset: 0;
+}
+
+#shape {
+  position: absolute;
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  top: 50%;
+  /* stylelint-disable-next-line liberty/use-logical-spec */
+  left: 50%;
+
+  block-size: 100%;
+  inline-size: 100%;
+  max-inline-size: 56px;
+
+  grid-column: icon;
+  grid-row: 1 / 1;
+
+  transform: translateX(-50%) translateY(-50%) translateY(var(--mdw-nav-item__offset-y));
+  z-index: 0;
+
+  background-color: transparent;
+
+  transition: transform 200ms;
+  will-change: transform;
+}
+
+#icon {
+  position: relative;
+  align-self: center;
+
+  grid-area: icon;
+
+  transform: translateY(var(--mdw-nav-item__offset-y));
+  z-index: 3;
+
+  color: rgb(var(--mdw-color__on-surface-variant));
+
+  font-size: 24px;
+  font-variation-settings: 'FILL' 0;
+
+  transition: transform 200ms;
+  will-change: transform;
+}
+
+#state {
+  z-index: 2;
+}
+
+#badge {
+  --mdw-badge__scale: 0;
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+
+  overflow: hidden;
+
+  max-inline-size: 50%;
+  grid-column: 1 / 4;
+
+  grid-row: 1 / 2;
+
+  transform: translateY(-100%) translateY(var(--mdw-nav-item__offset-y)) scale(var(--mdw-badge__scale));
+  z-index: 4;
+
+  text-align: start;
+  text-overflow: ellipsis;
+  text-transform: none;
+  white-space: nowrap;
+  word-break: normal;
+
+  transition: transform 200ms;
+  will-change: transform;
+}
+
+#badge[badge] {
+  --mdw-badge__scale: 1;
+}
+
+#ripple {
+  opacity: 1;
+
+  color: rgb(var(--mdw-bg));
+}
+
+#ripple-container {
+  z-index:1;
+}
+
+#shape[active] {
+  color: rgb(var(--mdw-ink));
+}
+
+#icon[active] {
+  color: rgb(var(--mdw-ink));
+
+  font-variation-settings: 'FILL' 1;
+}
+
+#slot[active] {
+  color: inherit;
+}
+
+:host([show-label]) {
+  --mdw-nav-item__offset-y: 12px;
+}
+
+:host([show-label="active"][active]) {
+  --mdw-nav-item__offset-y: 0;
+}

package/components/NavItem.js

@@ -0,0 +1,83 @@
+import './Icon.js';
+import './Ripple.js';
+import './Badge.js';
+
+import CustomElement from '../core/CustomElement.js';
+import RippleMixin from '../mixins/RippleMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './NavItem.css' assert { type: 'css' };
+
+/** @typedef {'charset'|'coords'|'name'|'shape'} DeprecatedHTMLAnchorElementProperties */
+
+export default class NavItem extends CustomElement
+  .mixin(ThemableMixin)
+  .mixin(StateMixin)
+  .mixin(RippleMixin)
+  .mixin(ShapeMixin)
+  .extend()
+  .set({
+    delegatesFocus: true,
+    stateLayer: true,
+  })
+  .observe({
+    showLabel: 'string',
+    active: 'boolean',
+    icon: 'string',
+    src: 'string',
+    href: 'string',
+    badge: 'string',
+    ariaLabel: 'string', // watch attribute and emit callback
+  })
+  .methods({
+    focus(options) {
+      this.refs.anchor.focus(options);
+    },
+  })
+  .css(styles)
+  .html/* html */`
+    <mdw-icon id=icon aria-hidden=true src={src} active={active}>{icon}</mdw-icon>
+    <a id=anchor
+      aria-current=${({ active }) => (active ? 'page' : null)}
+      aria-describedby=badge
+      aria-label={ariaLabel}
+      aria-labelledby=${({ ariaLabel }) => (ariaLabel ? null : 'slot')}
+      href=${({ href }) => href ?? '#'}>
+    </a>
+    <slot id=slot active={active} show-label={showLabel} aria-hidden=true></slot>
+    <mdw-badge part=badge id=badge badge={badge} show-label={showLabel} aria-hidden=true>{badge}</mdw-badge>
+  `
+  .on({
+    composed({ html }) {
+      const { shape, state, rippleContainer } = this.refs;
+      shape.append(html`
+        <mdw-ripple id=ripple ripple-origin=center keep-alive hold-ripple ripple-state=${({ active }) => ((active) ? null : 'complete')}></mdw-ripple>
+        ${state}
+        ${rippleContainer}
+      `);
+      shape.setAttribute('active', '{active}');
+      shape.removeAttribute('color');
+    },
+  })
+  .childEvents({
+    anchor: {
+      click() {
+        /* Prevent Default (false) if no href */
+        return this.href != null;
+      },
+      keydown({ key, repeat }) {
+        if (key !== ' ') return true;
+        if (!repeat) this.click();
+        return false;
+      },
+    },
+  })
+  .autoRegister('mdw-nav-item')
+  .tsClassFix() {
+  addRipple(...args) {
+    if (!this.active) return null;
+    return super.addRipple(...args);
+  }
+}

package/components/NavRail.css

@@ -0,0 +1,47 @@
+/* https://m3.material.io/components/navigation-rail/specs */
+
+:host{
+  display: inline-grid;
+  align-content: flex-start;
+  flex-direction: column;
+  grid-template-rows: auto minmax(0,1fr);
+  grid-template-columns: 80px;
+  justify-items: stretch;
+
+  text-align: center;
+}
+
+#start {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 12px;
+
+  padding-block-start: 12px;
+
+}
+
+#slot {
+  align-self: center;
+
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  gap: 12px;
+  overflow-x: clip;
+  overflow-y: auto;
+
+  box-sizing: border-box;
+
+  inline-size: 100%;
+
+  padding-block: 12px;
+}
+
+#slot[align="start"] {
+  align-self: flex-start;
+}
+
+#slot[align="end"] {
+  align-self: flex-end;
+}

package/components/NavRail.js

@@ -0,0 +1,17 @@
+import Nav from './Nav.js';
+import styles from './NavRail.css' assert { type: 'css' };
+
+export default Nav
+  .extend()
+  .observe({
+    align: { value: /** @type {'start'|'center'|'end'} */ (null) },
+  })
+  .css(styles)
+  .on({
+    composed({ html }) {
+      const { slot } = this.refs;
+      slot.before(html`<slot id=start name=start></slot>`);
+      slot.setAttribute('align', '{align}');
+    },
+  })
+  .autoRegister('mdw-nav-rail');

package/components/NavRailItem.css

@@ -0,0 +1,25 @@
+/* https://m3.material.io/components/navigation-bar/specs */
+/* https://m3.material.io/components/navigation-drawer/specs */
+/* https://m3.material.io/components/navigation-rail/specs */
+
+:host {
+  grid-auto-flow: row;
+  grid-auto-rows: minmax(20px, min-content);
+  grid-template-rows: [icon] minmax(32px, 1fr);
+  grid-template-columns: [icon] minmax(56px, 1fr);
+
+  padding-inline: 12px;
+}
+
+#slot {
+  display: contents;
+  overflow-wrap: anywhere;
+
+  word-break: break-all;
+  word-break: break-word;
+}
+
+#badge {
+  max-inline-size:40px;
+  grid-column: 1 / 2;
+}

package/components/NavRailItem.js

@@ -0,0 +1,7 @@
+import NavItem from './NavItem.js';
+import styles from './NavRailItem.css' assert { type: 'css' };
+
+export default NavItem
+  .extend()
+  .css(styles)
+  .autoRegister('mdw-nav-rail-item');

package/components/Option.js

@@ -0,0 +1,91 @@
+// https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+
+import MenuItem from './MenuItem.js';
+
+// https://html.spec.whatwg.org/multipage/form-elements.html#htmloptionelement
+
+/** @implements {HTMLOptionElement} */
+export default class Option extends MenuItem
+  .extend()
+  .set({
+    disabled: undefined, // Remove observer
+    _index: -1,
+  })
+  .observe({
+    // ListOption.prototype._form = ListOption.prop('_form');
+    _label: { attr: 'label', nullParser: String },
+    defaultSelected: { attr: 'selected', type: 'boolean' },
+    _selected: 'boolean',
+    _value: { attr: 'value', reflect: true },
+  })
+  .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 || this.text; },
+      /** @param {string} value */
+      set(value) { this._label = value; },
+    },
+    selected: {
+      get() { return this._selected; },
+      /** @param {boolean} value */
+      set(value) { this._selected = value; },
+    },
+    disabled: {
+      get() {
+        return this.getAttribute('aria-disabled') === 'true' || this._disabled;
+      },
+      /** @param {boolean} value */
+      set(value) {
+        this._disabled = value;
+      },
+    },
+
+  })
+  .on('composed', ({ $ }) => {
+    // $('#state').setAttribute('state-disabled', 'focus hover');
+  })
+  .onPropChanged({
+    checkbox(oldValue, newValue) {
+      if (newValue) {
+        this.setAttribute('aria-selected', String(this.hasAttribute('selected')));
+      } else {
+        this.removeAttribute('aria-selected');
+      }
+    },
+    _selected(oldValue, newValue) {
+      this.setAttribute('aria-selected', String(newValue));
+    },
+  }) {
+  static { this.autoRegister('mdw-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;
+    }
+  }
+}

package/components/Outline.css

@@ -0,0 +1,138 @@
+.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%;
+  }
+
+}