@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/SegmentedButton.js

@@ -0,0 +1,49 @@
+import './Icon.js';
+
+import Button from './Button.js';
+import styles from './SegmentedButton.css' assert { type: 'css' };
+
+export default Button
+  .extend()
+  .observe({
+    type: { empty: 'radio' },
+    innerSegmentedButton: 'boolean',
+  })
+  .set({
+    focusableOnDisabled: true,
+  })
+  .css(styles)
+  .on({
+    composed({ html, inline }) {
+      const { shape, icon, outline, control, slot, state } = this.refs;
+
+      slot.before(html`
+        <div id=icons>
+          ${icon}
+          <mdw-icon selected={checked} id=check-icon aria-hidden=true>check</mdw-icon>
+        </div>
+      `);
+      shape.setAttribute('selected', '{checked}');
+
+      icon.removeAttribute('_if');
+      icon.setAttribute('has-icon', '{hasIcon}');
+      icon.setAttribute('selected', '{checked}');
+      outline.setAttribute('inner-segmented-button', '{innerSegmentedButton}');
+      outline.setAttribute('shape-start', '{shapeStart}');
+      outline.setAttribute('shape-end', '{shapeEnd}');
+      control.setAttribute('type', 'radio');
+      control.setAttribute('role', 'option');
+      control.setAttribute('aria-checked', inline(
+        ({ type, checked }) => (type === 'checkbox' ? `${(!!checked)}` : null),
+      ));
+      control.setAttribute('aria-selected', inline(
+        ({ type, checked }) => (type === 'checkbox' ? null : `${!!checked}`),
+      ));
+
+      state.setAttribute('state-disabled', 'focus');
+    },
+    constructed() {
+      this.outlined = true;
+    },
+  })
+  .autoRegister('mdw-segmented-button');

package/components/SegmentedButtonGroup.css

@@ -0,0 +1,12 @@
+/* https://m3.material.io/components/segmented-buttons/specs */
+
+:host {
+  --mdw-bg: var(--mdw-color__secondary-container);
+  --mdw-ink: var(--mdw-color__on-secondary-container);
+
+  display: flex;
+}
+
+:host([color]) {
+  background-color: transparent;
+}

package/components/SegmentedButtonGroup.js

@@ -0,0 +1,44 @@
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import KeyboardNav from '../mixins/KeyboardNavMixin.js';
+
+import Box from './Box.js';
+import SegmentedButton from './SegmentedButton.js';
+import styles from './SegmentedButtonGroup.css' assert { type: 'css' };
+
+/** @typedef {'compact'} DeprecatedHTMLMenuElementProperties */
+
+export default Box
+  .mixin(KeyboardNav)
+  .mixin(AriaReflectorMixin)
+  .extend()
+  .define({
+    kbdNavQuery() {
+      return SegmentedButton.elementName;
+    },
+  })
+  .set({
+    _ariaRole: 'listbox',
+  })
+  .childEvents({
+    slot: {
+      slotchange() {
+        this.refreshTabIndexes();
+        // eslint-disable-next-line github/array-foreach
+        this.kbdNavChildren.forEach((child, index, list) => {
+        /** @type {InstanceType<SegmentedButton>} */
+          (child).shapeStart = index === 0;
+          /** @type {InstanceType<SegmentedButton>} */
+          (child).innerSegmentedButton = index > 0 && index < list.length - 1;
+          /** @type {InstanceType<SegmentedButton>} */
+          (child).shapeEnd = index === list.length - 1;
+        });
+      },
+    },
+  })
+  .css(styles)
+  .on({
+    constructed() {
+      this.setAttribute('aria-orientation', 'horizontal');
+    },
+  })
+  .autoRegister('mdw-segmented-button-group');

package/components/Select.css

@@ -0,0 +1,52 @@
+#slot {
+  display: none;
+}
+
+#label {
+  padding: 0;
+
+  cursor: pointer;
+}
+
+#label[disabled] {
+  cursor: not-allowed;
+}
+
+#icon {
+  position: absolute;
+
+  /* padding-inline-start: 12px; */
+}
+
+#trailing-icon {
+  position: absolute;
+  inset-inline-end: 16px;
+}
+
+#control {
+  padding-inline-start: 16px;
+  padding-inline-end: calc(16px + 24px + 16px);
+  accent-color: rgb(var(--mdw-ink));
+
+  cursor: inherit;
+}
+
+#control[icon] {
+  margin-inline-start: calc(16px + 24px);
+  padding-inline-start: 0;
+}
+
+option {
+  accent-color: rgb(var(--mdw-ink));
+
+  min-block-size: var(--mdw-typescale__label-large__line-height);
+
+  appearance: none;
+
+  background-color: rgb(var(--mdw-color__surface)) !important;
+  border-radius: 0;
+  color: rgb(var(--mdw-color__on-surface)) !important;
+
+  font: var(--mdw-typescale__label-large__font);
+  letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
+}

package/components/Select.js

@@ -0,0 +1,71 @@
+import CustomElement from '../core/CustomElement.js';
+import ControlMixin from '../mixins/ControlMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+import TextFieldMixin from '../mixins/TextFieldMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './Select.css' assert { type: 'css' };
+
+/* @implements {HTMLSelectElement} */
+
+export default class Select extends CustomElement
+  .mixin(ThemableMixin)
+  .mixin(StateMixin)
+  .mixin(ControlMixin)
+  .mixin(TextFieldMixin)
+  .extend()
+  .css(styles)
+  .observe({
+    autocomplete: 'string',
+    trailingIcon: {
+      empty: 'arrow_drop_down',
+    },
+  })
+  .define({
+    _select() {
+      return /** @type {HTMLSelectElement} */ (this.refs.control);
+    },
+    /** Readonly values */
+    multiple: { value: false },
+    size: { value: 1 },
+    type: { value: 'select-one' },
+  })
+  .html/* html */`<slot id=slot></slot>`
+  .childEvents({
+    slot: {
+    /** @param {Event & {currentTarget:HTMLSlotElement}} event */
+      slotchange(event) {
+        const select = this._select;
+        select.replaceChildren(
+          ...event.currentTarget.assignedNodes()
+            .map((child) => child.cloneNode(true)),
+        );
+        this._value = select.value;
+      },
+    },
+  })
+  .on({
+    composed({ template }) {
+      const { slot, prefix, suffix, control } = this.refs;
+      control.setAttribute('icon', '{icon}');
+      template.append(slot);
+      prefix.remove();
+      suffix.remove();
+    },
+  })
+  .setStatic({
+    controlTagName: 'select',
+    controlVoidElement: false,
+  })
+  .autoRegister('mdw-select') {
+  /* Overrides */
+  static clonedContentAttributes = [
+    ...super.clonedContentAttributes,
+    'autocomplete', // Hint for form autofill feature
+  ];
+
+  formResetCallback() {
+    this._select.value = this.querySelector('option[selected]')?.value ?? '';
+    super.formResetCallback();
+  }
+}

package/components/Shape.css

@@ -0,0 +1,132 @@
+/** TODO: CSS Mixin */
+
+: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);
+  position: relative;
+
+  overflow: hidden;
+
+  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;
+
+}
+
+:host([color]) {
+  background-color: rgb(var(--mdw-bg));
+}
+
+:host(:where([ink],[color])) {
+  color: rgb(var(--mdw-ink));
+}
+
+:host([outlined]) {
+  background-color: transparent;
+}
+
+:host(:is([color="none"], [color="transparent"])) {
+  background-color: transparent;
+}
+
+: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);
+
+    transition-duration: 200ms, 200ms, 200ms;
+    transition-property: background-color, color, -webkit-mask-box-image-width;
+    will-change: background-color, color, -webkit-mask-box-image;
+  }
+}

package/components/Shape.js

@@ -0,0 +1,25 @@
+import Box from './Box.js';
+import outlineStyles from './Outline.css' assert { type: 'css' };
+import styles from './Shape.css' assert { type: 'css' };
+
+export default Box
+  .extend()
+  .observe({
+    shapeTop: 'boolean',
+    shapeBottom: 'boolean',
+    shapeStart: 'boolean',
+    shapeEnd: 'boolean',
+    shapeStyle: 'string',
+    outlined: 'boolean',
+  })
+  .css(
+    outlineStyles,
+    styles,
+  )
+  .html/* html */`
+    <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>
+  `
+  .autoRegister('mdw-shape');

package/components/Slider.css

@@ -0,0 +1,306 @@
+/* https://m3.material.io/components/sliders/specs */
+
+:host {
+  --mdw-ink: var(--mdw-color__on-primary);
+  --mdw-bg: var(--mdw-color__primary);
+
+  display: block;
+
+  min-block-size: 40px;
+  min-inline-size: 88px;
+
+  background-color: transparent;
+}
+
+:host,
+:host([color]) {
+  background-color: transparent;
+}
+
+#label {
+  position: absolute;
+  inset: 0;
+
+  display: block;
+
+  cursor: pointer;
+
+  z-index: 1;
+
+  /* border-radius: 50%; */
+  color: rgb(var(--mdw-bg));
+}
+
+#control {
+  inset:0;
+
+  overflow: visible;
+
+  block-size: 100%;
+  min-block-size: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
+
+  appearance: none;
+
+  cursor: inherit;
+
+  transform: none;
+
+  background-color: transparent;
+  color: inherit;
+}
+
+#control::-webkit-slider-runnable-track {
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  margin-inline: -10px;
+
+  appearance: none;
+
+  background-color: transparent;
+}
+
+@supports (-moz-appearance:none ){
+  #control {
+    inset-inline: -10px;
+
+    inline-size: calc(100% + 20px);
+  }
+}
+
+#control::-moz-range-track {
+  inline-size: calc(100% + 20px) !important;
+
+  appearance: none;
+}
+
+#control::-webkit-slider-thumb {
+  display: block;
+
+  block-size: 20px;
+  inline-size: 20px;
+
+  -webkit-appearance: none;
+  cursor: inherit;
+
+  transform: scale(2);
+
+  background-color: transparent; /* Safari */
+
+  border-radius: 50%;
+  box-shadow: none; /* Safari */
+}
+
+#control::-moz-range-thumb {
+  display: block;
+
+  box-sizing: content-box;
+  block-size: 20px;
+  inline-size: 20px;
+  border: none;
+
+  appearance: none;
+  cursor: inherit;
+
+  transform: scale(2);
+
+  background-color: transparent;
+  border-radius: 50%;
+}
+
+#track {
+  --value: 0.5;
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline: 0;
+
+  block-size: 4px;
+  margin-block-start: -2px;
+
+  pointer-events: none;
+  user-select: none;
+
+  background-color: rgb(var(--mdw-color__surface-variant));
+  border-radius: inherit;
+}
+
+#thumb {
+  position: absolute;
+  inset-block-start: -18px;
+  inset-inline-start: -20px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  block-size: 40px;
+  inline-size: 40px;
+
+  pointer-events: none;
+
+  border-radius: 50%;
+
+  color: rgb(var(--mdw-bg));
+}
+
+#thumb::before {
+  content: '';
+
+  display: block;
+
+  block-size: 20px;
+  inline-size: 20px;
+
+  background-color: currentColor;
+  border-radius: 50%;
+
+  transition: background-color 100ms;
+}
+
+/* Inactive ticks */
+
+#ticks::before,
+#ticks::after {
+  content: '';
+
+  position: absolute;
+  inset: 0;
+
+  padding-inline: 10px;
+
+  background-clip: content-box;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  background-image: radial-gradient(circle at center, var(--tick-color) 0, var(--tick-color) 1px, transparent 0);
+  background-position: center center;
+  background-repeat: repeat-x;
+  background-size: 0 100%;
+  background-size: calc(100% / var(--ticks, 0)) 2px;
+}
+
+#ticks::before {
+  --tick-color: rgb(var(--mdw-color__on-surface-variant));
+}
+
+#ticks::after {
+  --tick-color: rgb(var(--mdw-ink));
+  /* TODO: Use single-paint implementation */
+  padding-inline-end: calc(100% - (100% * var(--value)) + 10px);
+
+  z-index: 1;
+
+  will-change: padding-inline-end;
+}
+/* Active Indicator */
+#track-active {
+  position: absolute;
+  inset: 0;
+
+  overflow: hidden;
+
+  border-radius: 99px;
+}
+
+#track-active::before {
+  content: '';
+
+  position: absolute;
+  inset: 0;
+
+  transform: scaleX(var(--value));
+  transform-origin: 0 0;
+
+  background-color: rgb(var(--mdw-bg));
+
+  will-change: transform;
+}
+
+#thumb-anchor {
+  position: absolute;
+  inset-inline: 0;
+
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+
+  inline-size: 1%;
+
+  transform: translateX(calc(var(--value) * 100 * 100%));
+  transform-origin: 0 0;
+  z-index: 24;
+
+  will-change: transform;
+}
+
+#thumb-label {
+  position: absolute;
+  inset-block-end: 14px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: content-box;
+  margin-block-end: 6px;
+
+  transform: translateX(-50%) scale(1);
+  transform-origin: 50% 100%;
+
+  font-weight: var(--mdw-typescale__label-medium__font-weight);
+  line-height: var(--mdw-typescale__label-medium__line-height);
+  font-family: var(--mdw-typescale__label-medium__font-family);
+  letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
+
+  transition: transform 200ms;
+  will-change: transform;
+}
+
+#thumb-label:is([hidden],[text=""]) {
+  transform: translateX(-50%) scale(0);
+}
+
+#thumb-label::before {
+  content: attr(text);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-block-size: 28px;
+  min-inline-size: 28px;
+
+  z-index: 1;
+
+  background-color: rgb(var(--mdw-bg));
+  border-radius: 50%;
+  color: rgb(var(--mdw-ink));
+}
+
+#thumb-label::after {
+  /* Values from Figma SVG */
+  --x-start: 14.6446%; /*4.1005px*/
+  --x-end: 85.3554%;
+  --y: 70.7106%; /*24.0416px*/
+
+  content: "";
+
+  position: absolute;
+  inset: 0;
+  inset-block-end: -6px;
+
+  clip-path: polygon(var(--x-start) var(--y), var(--x-end) var(--y), 50% 100%, var(--x-start) var(--y));
+
+  background-color: rgb(var(--mdw-bg));
+}
+
+#track[disabled] {
+  background-color: rgb(var(--mdw-color__on-surface), calc(0.12 / 0.38));
+}
+
+#label[disabled],
+#track[disabled] {
+  --mdw-bg: var(--mdw-color__on-surface);
+  cursor: not-allowed;
+
+  opacity: 0.38;
+}