@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/selection/_spec.scss

@@ -0,0 +1,376 @@
+// https://material.io/guidelines/components/selection-controls.html#
+// https://material.io/guidelines/patterns/selection.html#selection-item-selection
+
+@use "sass:math";
+
+@use '../../core/_elevation.scss' as elevation;
+@use '../../core/_length.scss' as *;
+@use '../../core/_motion.scss' as motion;
+
+$ripple-size: 40px !default;
+$icon-size: 24px !default;
+$scale-size: math.div($ripple-size, $icon-size) !default;
+$radio-size: 20px !default;
+$checkbox-size: 18px !default;
+$border-size: 2px !default;
+$horizontal-margin: 2px !default;
+// from ic_check_black_18px.svg
+// rotated 45°
+
+$checkbox-icon-height: 12.73px !default;
+$checkbox-icon-width: 5.93px !default;
+$checkbox-icon-thickness: 1.5px !default;
+$checkbox-icon-offset-y: 2.64px - $checkbox-icon-thickness - $border-size !default;
+$checkbox-icon-offset-x: 6.04px - $border-size !default;
+
+:root {
+  --mdw-selection__switch-ripple-offset-unchecked: -2px;
+  --mdw-selection__switch-ripple-offset-checked: 14px;
+  --mdw-selection__switch-thumb-offset: 16px;
+  --mdw-selection__checkbox-rotation: 45deg;
+
+  &[dir="rtl"] {
+    --mdw-selection__switch-ripple-offset-unchecked: 2px;
+    --mdw-selection__switch-ripple-offset-checked: -14px;
+    --mdw-selection__switch-thumb-offset: -16px;
+    --mdw-selection__checkbox-rotation: -45deg;
+  }
+}
+
+.mdw-selection {
+  display: inline-flex;
+  position: relative;
+  flex-direction: row;
+}
+
+.mdw-selection__input {
+  display: inline-flex;
+  align-self: center;
+  order: 1;
+
+  min-block-size: $icon-size;
+  min-inline-size: $icon-size;
+  margin: 0 auto;
+  padding: 0;
+
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  -moz-appearance: none;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  -webkit-appearance: none;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+
+  transition-property: transform, color, opacity;
+
+  opacity: 0;
+  transform: scale($scale-size);
+
+  background-color: currentColor;
+  // background-color: var(--button__ripple-color);
+  border-radius: 50%;
+
+  color: inherit;
+
+  .mdw-selection[aria-disabled="true"] &,
+  &:disabled {
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    cursor: not-allowed;
+  }
+
+  // HTMLInputElement should not have psuedos
+  &.mdw-overlay::before {
+    content: none;
+
+    display: none;
+  }
+
+  &[role="switch"] {
+    margin-inline-end: 12px;
+
+    transform: translateX(var(--mdw-selection__switch-ripple-offset-unchecked)) scale($scale-size);
+
+    &:checked {
+      transform: translateX(var(--mdw-selection__switch-ripple-offset-checked)) scale($scale-size);
+    }
+
+    label.mdw-selection:active &:not(:disabled),
+    label.mdw-selection:hover &:not(:disabled),
+    &:active:not(:disabled),
+    &:hover:not(:disabled),
+    &:focus {
+      transform: translateX(var(--mdw-selection__switch-ripple-offset-unchecked)) scale($scale-size);
+
+      &:checked {
+        transform: translateX(var(--mdw-selection__switch-ripple-offset-checked)) scale($scale-size);
+      }
+    }
+  }
+}
+
+.mdw-selection__icon {
+  display: inline-flex;
+  position: relative;
+
+  box-sizing: border-box;
+  block-size: $icon-size;
+  inline-size: $icon-size;
+  flex: none;
+  margin-block: auto;
+  margin: 0;
+  padding: 0;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+
+  pointer-events: none;
+  -webkit-tap-highlight-color: transparent;
+
+  transition-property: background-color, border-color;
+
+  z-index: 1;
+
+  background-color: transparent;
+
+  .mdw-selection__input ~ & {
+    // width is represented by input element
+    max-inline-size: 0;
+  }
+
+  &::before {
+    content: "";
+
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 2px;
+
+    transition-property: border-width, border-color, background-color, color;
+
+    background-color: transparent;
+    border-color: currentColor;
+  }
+
+  &::after {
+    content: "";
+
+    position: absolute;
+  }
+
+  .mdw-selection[aria-disabled="true"] &,
+  .mdw-selection__input:disabled ~ & {
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    cursor: not-allowed;
+  }
+
+  &[mdw-checkbox] {
+    // Box outline
+    &::before {
+      inset-block-start: ($icon-size - $checkbox-size) * 0.5;
+      inset-inline-start: ($icon-size - $checkbox-size) * 0.5;
+
+      block-size: $checkbox-size;
+      inline-size: $checkbox-size;
+
+      border-radius: 2px;
+
+      // Checked or Active
+      .mdw-selection[aria-checked="true"] &,
+      .mdw-selection[aria-checked]:not([aria-disabled="true"]):active &,
+      .mdw-selection__input[type="checkbox"]:checked ~ &,
+      .mdw-selection__input[type="checkbox"]:not(:disabled):active ~ & {
+        border-width: $checkbox-size * 0.5;
+      }
+
+      // Checked not
+      .mdw-selection[aria-checked="true"]:not(:active):not([aria-disabled="true"]) &,
+      .mdw-selection__input[type="checkbox"]:checked:not(:active):not(:disabled) ~ & {
+        background-color: currentColor;
+      }
+    }
+
+    // Check stencil
+    &::after {
+      inset-block-start: $border-size + (($icon-size - $checkbox-size) * 0.5);
+      inset-inline-start: $border-size + (($icon-size - $checkbox-size) * 0.5);
+
+      block-size: $checkbox-icon-height;
+      inline-size: $checkbox-icon-width;
+      margin-block-start: $checkbox-icon-offset-y;
+      margin-inline-start: $checkbox-icon-offset-x;
+
+      .mdw-selection[aria-checked="true"] &,
+      .mdw-selection__input[type="checkbox"]:checked ~ & {
+        box-sizing: border-box;
+        border-block-end-style: solid;
+        // border-width: $checkbox-icon-thickness;
+        // Increase visibility
+        border-width: 2px;
+        border-inline-end-style: solid;
+
+        animation-name: showCheck;
+        animation-direction: normal;
+        animation-fill-mode: forwards;
+
+        transition: none;
+
+        transform: rotate(var(--mdw-selection__checkbox-rotation));
+
+        background-color: transparent;
+      }
+    }
+  }
+
+  &[mdw-radio] {
+    // Outer ring
+    &::before {
+      inset-block-start: ($icon-size - $radio-size) * 0.5;
+      inset-inline-start: ($icon-size - $radio-size) * 0.5;
+
+      block-size: $radio-size;
+      inline-size: $radio-size;
+
+      border-color: currentColor;
+      border-radius: 50%;
+
+      // Active, not disabled
+      .mdw-selection:active:not([aria-disabled="true"]) &,
+      .mdw-selection__input:active:not(:disabled) ~ & {
+        border-width: $radio-size * 0.5;
+      }
+    }
+
+    // Center dot
+    &::after {
+      inset-block-start: ($icon-size - $radio-size) * 0.5;
+      inset-inline-start: ($icon-size - $radio-size) * 0.5;
+
+      block-size: $radio-size;
+      inline-size: $radio-size;
+
+      transition-property: transform, background-color;
+
+      transform: scale(0);
+
+      background-color: currentColor;
+      border-radius: 50%;
+
+      .mdw-selection[aria-checked="true"] &,
+      .mdw-selection__input:checked ~ & {
+        transform: scale(0.5);
+      }
+    }
+  }
+
+  &[mdw-switch] {
+    inline-size: 36px;
+
+    &::before {
+      inset-block-start: 2px;
+      inset-inline-start: 0;
+
+      block-size: 20px;
+      inline-size: 20px;
+      border-style: none;
+
+      transition-property: background-color, transform;
+
+      transform: translateX(0);
+      z-index: 1;
+
+      background-color: currentColor;
+
+      border-radius: 50%;
+      box-shadow: var(--mdw-elevation__box-shadow-1);
+
+      .mdw-selection[aria-checked="true"] &,
+      .mdw-selection__input:checked ~ & {
+        transform: translateX(var(--mdw-selection__switch-thumb-offset));
+      }
+    }
+
+    &::after {
+      inset-block: 5px;
+      inset-inline-start: 0;
+
+      block-size: 14px;
+      inline-size: 36px;
+      margin: 0;
+      border-style: none;
+
+      animation-name: none;
+
+      transform: none;
+
+      background-color: currentColor;
+
+      border-radius: 7px;
+    }
+  }
+}
+
+.mdw-selection__label {
+  order: -1;
+
+  padding-inline: 0 8px;
+
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+
+  z-index: 1;
+
+  // Label as suffix
+  .mdw-selection__icon ~ & {
+    order: 1;
+
+    padding-inline: 8px 0;
+  }
+
+  .mdw-selection[aria-disabled="true"] &,
+  .mdw-selection__input:disabled ~ & {
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    cursor: not-allowed;
+  }
+}
+
+.mdw-selection__input,
+.mdw-selection__icon,
+.mdw-selection__icon::before,
+.mdw-selection__icon::after {
+  animation-duration: motion.$simpleDuration;
+  animation-timing-function: motion.$standardEasing;
+  animation-delay: 0s;
+
+  transition-delay: 0s;
+  transition-duration: motion.$simpleDuration;
+  transition-timing-function: motion.$standardEasing;
+}
+
+@keyframes showCheck {
+  // Animation is applied to pre-rotated box;
+  // Clip box completely horizontally and vertically upto bottom border
+  0% {
+    clip: rect($checkbox-icon-height - $checkbox-icon-thickness, 0, auto, auto);
+  }
+  // Remove horizontal clip
+  // % = stroke length upto corner
+  #{math.div($checkbox-icon-width, $checkbox-icon-width + $checkbox-icon-height) * 100%} {
+    clip: rect($checkbox-icon-height - $checkbox-icon-thickness, $checkbox-icon-width, auto, auto);
+  }
+  // Remove vertical clip
+  100% {
+    clip: rect(0, $checkbox-icon-width, auto, auto);
+  }
+}

package/components/selection/_theme.scss

@@ -0,0 +1,134 @@
+// https://material.io/archive/guidelines/components/selection-controls.html#selection-controls-switch
+
+@use '../../core/_platform.scss' as platform;
+
+.mdw-theme {
+  --mdw-selection__icon-color: var(--mdw-medium-color);
+  --mdw-selection__track-on-opacity: 0.50;
+  --mdw-selection__track-off-color: RGBA(var(--mdw-ink-default), 1.00);
+
+  --mdw-selection__hover-opacity: var(--mdw-selection__hover-opacity-value);
+  --mdw-selection__focus-opacity: var(--mdw-selection__focus-opacity-value);
+  --mdw-selection__selected-opacity: var(--mdw-selection__selected-opacity-value);
+}
+
+.mdw-theme[mdw-light] {
+  --mdw-selection__track-off-opacity: 0.38;
+  --mdw-selection__thumb-off-color: RGBA(var(--mdw-alias-background-50), 1.00);
+  --mdw-selection__thumb-disabled-color: RGBA(var(--mdw-alias-background-400), 1.00);
+  --mdw-selection__disabled-opacity: 0.38;
+  --mdw-selection__hover-opacity-value: 0.04;
+  --mdw-selection__focus-opacity-value: 0.12;
+  --mdw-selection__selected-opacity-value: 0.08;
+}
+
+.mdw-theme[mdw-dark] {
+  --mdw-selection__track-off-opacity: 0.30;
+  --mdw-selection__thumb-off-color: RGBA(var(--mdw-alias-background-400), 1.00);
+  --mdw-selection__thumb-disabled-color: RGBA(var(--mdw-alias-background-800), 1.00);
+  --mdw-selection__disabled-opacity: 0.50;
+  --mdw-selection__hover-opacity-value: 0.08;
+  --mdw-selection__focus-opacity-value: 0.24;
+  --mdw-selection__selected-opacity-value: 0.16;
+}
+
+.mdw-selection[aria-checked="true"],
+.mdw-selection__input:checked, {
+  --mdw-selection__icon-color: RGB(var(--mdw-ink));
+}
+
+.mdw-selection__input {
+  opacity: calc(var(--mdw-selection__hover-opacity) + var(--mdw-selection__focus-opacity) + var(--mdw-selection__selected-opacity));
+
+  &,
+  &.mdw-theme {
+    color: var(--mdw-selection__icon-color);
+  }
+
+  &[mdw-overlay-off~="hover"],
+  &:not(:hover) {
+    --mdw-selection__hover-opacity-value: 0;
+  }
+
+  &[mdw-overlay-off~="focus"],
+  &:not(:focus) {
+    --mdw-selection__focus-opacity-value: 0;
+  }
+
+  // Unselected (unchecked) state
+  &:not([aria-checked="true"]):not(:checked),
+  &[aria-checked="false"],
+  &[mdw-overlay-touch="true"],
+  &[mdw-overlay-off~="selected"] {
+    --mdw-selection__selected-opacity-value: 0;
+  }
+
+  // No overlay when disabled, touch, not hovered, or not focused
+  .mdw-selection[aria-disabled="true"] > &,
+  &[aria-disabled="true"],
+  &[disabled],
+  &[mdw-overlay-touch="true"],
+  &:not(:focus):not(:hover) {
+    opacity: 0;
+  }
+}
+
+.mdw-selection__icon {
+  // Checkbox check default
+  &[mdw-checkbox]::after {
+    // Checkbox color is based on currently filled background-color
+    border-color: RGB(var(--mdw-surface));
+  }
+
+  // Switch track default
+  &[mdw-switch]::after {
+    opacity: var(--mdw-selection__track-on-opacity);
+  }
+
+  .mdw-selection[aria-disabled="true"] &,
+  .mdw-selection__input:disabled ~ & {
+    opacity: var(--mdw-selection__disabled-opacity);
+
+    &[mdw-switch] {
+      // Thumb
+      &::before {
+        background-color: var(--mdw-selection__thumb-disabled-color);
+      }
+      // Track
+      &::after {
+        background-color: var(--mdw-selection__track-off-color);
+      }
+    }
+  }
+
+  // Unchecked or disabled HTMLInputElement
+  .mdw-selection[aria-checked="false"] &,
+  .mdw-selection[aria-disabled="true"] &,
+  .mdw-selection__input:disabled ~ &,
+  input.mdw-selection__input:not(:checked) ~ & {
+    &[mdw-checkbox],
+    &[mdw-radio] {
+      color: var(--mdw-selection__icon-color);
+    }
+
+    &[mdw-switch] {
+      // Thumb
+      &::before {
+        background-color: var(--mdw-selection__thumb-off-color);
+      }
+      // Track
+      &::after {
+        opacity: var(--mdw-selection__track-off-opacity);
+
+        background-color: var(--mdw-selection__track-off-color);
+      }
+    }
+  }
+}
+
+.mdw-selection__label {
+  .mdw-selection[aria-disabled="true"] &,
+  .mdw-selection__input:disabled ~ & {
+    opacity: var(--mdw-selection__disabled-opacity);
+  }
+}

package/components/selection/index.eta

@@ -0,0 +1,60 @@
+<label <%~ Object.entries({
+  'class': [
+    'mdw-selection',
+    it?.labelClass,
+  ].filter(v=>v).join(' '),
+  ...it?.labelAttributes,
+  }).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return false;
+    return `${key}="${value}"`
+  }).filter(v=>v).join(' ')-%>>
+
+  <%_ _%>
+
+  <input <%~ Object.entries({
+    class: [
+      'mdw-selection__input',
+      'mdw-overlay',
+      it?.ink || it?.theme ? 'mdw-theme': '',
+    ].filter(v=>v).join(' '),
+    'mdw-overlay-disabled': 'none',
+    'mdw-ink': it?.ink,
+    'role': it?.type === 'switch' ? 'switch' : false,
+    'type': it?.type === 'radio' ? 'radio' : 'checkbox',
+    'checked': it?.checked,
+    'disabled': it?.disabled && it?.disabled !== 'false',
+    'aria-disabled': it?.disabled === true ? 'true' : it?.disabled,
+    'name': it?.name,
+    'value': it?.value,
+    ...it?.attributes,
+  }).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return false;
+    return `${key}="${value}"`;
+  }).filter(v=>v).join(' ')-%> />
+
+  <%_ if (it?.prefix) { _%>
+  <div class="mdw-selection__label"><%~ it?.body ?? '' %><%= it?.text ?? '' %></div>
+  <%_ } _%>
+
+  <div <%~ Object.entries({
+    'class': [
+      'mdw-selection__icon',
+      it?.ink || it?.theme ? 'mdw-theme' : false,
+    ].filter(v=>v).join(' '),
+    'mdw-ink': it?.ink,
+    'mdw-radio': it?.type === 'radio',
+    'mdw-switch': it?.type === 'switch',
+    'mdw-checkbox': it?.type !== 'radio' && it?.type !== 'switch',
+  }).map(([key, value]) => {
+    if (value === true) return key;
+    if (value === false || value == null) return false;
+    return `${key}="${value}"`;
+  }).filter(v=>v).join(' ')-%>></div>
+
+  <%_ if (!it?.prefix) { _%>
+  <div class="mdw-selection__label"><%~ it?.body ?? '' %><%= it?.text ?? '' %></div>
+  <%_ } _%>
+
+</label>

package/components/selection/index.js

@@ -0,0 +1,70 @@
+import * as Attributes from '../../core/aria/attributes.js';
+import * as Keyboard from '../../core/aria/keyboard.js';
+
+import * as SelectionInput from './input.js';
+
+export const CHECKED_CHANGE_EVENT = 'mdw:selection-checkedchange';
+
+/**
+ * @param {Element} selectionElement
+ * @param {boolean|string} newValue
+ * @param {boolean} [dispatchEvent=false]
+ * @return {boolean} successful
+ */
+export function setChecked(selectionElement, newValue, dispatchEvent) {
+  return Attributes.setChecked(
+    selectionElement,
+    newValue,
+    dispatchEvent ? CHECKED_CHANGE_EVENT : null,
+  );
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+function onActivateEvent(event) {
+  if (event.target instanceof HTMLInputElement) {
+    return;
+  }
+  if (event.type === Keyboard.SPACEBAR_KEY) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  const selectionElement = /** @type {HTMLElement} */ (event.currentTarget);
+  if (Attributes.isDisabled(selectionElement)) {
+    return;
+  }
+  if (Attributes.isReadonly(selectionElement)) {
+    return;
+  }
+  if (!selectionElement.hasAttribute('aria-checked')) {
+    return;
+  }
+  if ((event.type === 'click' || event.type === SelectionInput.CLICK_EVENT)
+    && selectionElement.hasAttribute('mdw-no-autocheck')) return;
+
+  const role = selectionElement.getAttribute('role');
+  if ((event.type === 'focus' || event.type === SelectionInput.FOCUS_EVENT)
+    && role !== 'radio') return;
+
+  const newValue = (role === 'radio' ? true : !Attributes.isChecked(selectionElement));
+  setChecked(selectionElement, newValue, true);
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  const inputElement = /** @type {HTMLElement} */ (element.getElementsByClassName('mdw-selection__input')[0]);
+  if (inputElement) {
+    SelectionInput.attach(inputElement);
+  }
+  Keyboard.attach(element);
+  element.addEventListener('focus', onActivateEvent);
+  element.addEventListener('click', onActivateEvent);
+  element.addEventListener(Keyboard.SPACEBAR_KEY, onActivateEvent);
+  element.addEventListener(SelectionInput.FOCUS_EVENT, onActivateEvent);
+  element.addEventListener(SelectionInput.CLICK_EVENT, onActivateEvent);
+}

package/components/selection/index.pug

@@ -0,0 +1,30 @@
+mixin mdwSelection(options={})
+  label.mdw-selection
+    input.mdw-selection__input.mdw-overlay(
+    mdw-overlay-disabled="none"
+    class=(options.ink ? 'mdw-theme' : false)
+    mdw-ink=(options.ink)
+    role=(options.type === 'switch' ? 'switch' : false)
+    type=(options.type === 'radio' ? 'radio' : 'checkbox')
+    checked=(options.checked ? '' : false)
+    disabled=(options.disabled ? '' : false)
+    aria-disabled=(options.disabled ? 'true' : false)
+    name=(options.name)
+    value=(options.value)
+    )&attributes(attributes)
+    if (options.prefix)
+      .mdw-selection__label
+        block
+      .mdw-selection__icon(class=(options.ink ? 'mdw-theme' : false)
+      mdw-ink=(options.ink)
+      mdw-radio=(options.type === 'radio' ? '' : false)
+      mdw-switch=(options.type === 'switch' ? '' : false)
+      mdw-checkbox=(options.type !== 'radio' && options.type !== 'switch' ? '' : false))
+    else
+      .mdw-selection__icon(class=(options.ink ? 'mdw-theme' : false)
+      mdw-ink=(options.ink)
+      mdw-radio=(options.type === 'radio' ? '' : false)
+      mdw-switch=(options.type === 'switch' ? '' : false)
+      mdw-checkbox=(options.type !== 'radio' && options.type !== 'switch' ? '' : false))
+      .mdw-selection__label
+        block

package/components/selection/index.scss

@@ -0,0 +1,2 @@
+@forward './_spec.scss';
+@forward './_theme.scss';