@shortfuse/materialdesignweb 0.5.0 → 0.7.1-0

package/components/button/_spec.scss

@@ -1,162 +0,0 @@
-// https://material.io/guidelines/components/buttons.html#buttons-raised-buttons
-// https://material.io/guidelines/style/icons.html#
-
-@use '../../core/_elevation.scss' as elevation;
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-@use '../../core/_platform.scss' as platform;
-@use '../../core/_type.scss' as type;
-
-:root {
-  --mdw-button__click-target-size: 48px;
-  --mdw-button__outline-size: 1px;
-}
-
-.mdw-button {
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-
-  box-sizing: border-box;
-  block-size: 36px;
-  min-inline-size: 64px;
-  margin: 0 8px;
-  border: none;
-  padding: 0 8px;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-
-  transition-duration: motion.$shapeChangeDuration, motion.$simpleDuration;
-  transition-property: box-shadow, background-color, color;
-  transition-timing-function: motion.$standardEasing;
-
-  z-index: 0;
-
-  border-radius: 4px;
-  color: inherit;
-
-  text-align: center;
-  text-decoration: none;
-
-  // Remove Firefox inner
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &[mdw-border-ink],
-  &[mdw-surface] {
-    padding: 0 16px;
-  }
-
-  &:not([mdw-surface]) {
-    background-color: transparent;
-  }
-
-  // Don't override font icon properties
-
-  &:not([mdw-icon]) {
-    @include type.addRules('button');
-    font-family: inherit;
-    word-spacing: normal;
-  }
-
-  &[mdw-border-ink] {
-    border-style: solid;
-    border-width: var(--mdw-button__outline-size);
-
-    &::before,
-    & > .mdw-ripple {
-      box-sizing: content-box;
-      block-size: 100%;
-      inline-size: 100%;
-      margin-block-start: calc(-1 * var(--mdw-button__outline-size));
-      margin-inline-start: calc(-1 * var(--mdw-button__outline-size));
-      padding-block-end: calc(2 * var(--mdw-button__outline-size));
-      padding-inline-end: calc(2 * var(--mdw-button__outline-size));
-    }
-  }
-
-  // Icon properties
-
-  &[mdw-icon] {
-    block-size: 40px;
-    min-inline-size: 40px;
-    padding: 8px;
-
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-
-    border-radius: 50%;
-
-    font-size: 24px; // Internal padding provided by font
-  }
-
-  &[mdw-image] {
-    block-size: 24px;
-    min-inline-size: 24px;
-    margin: 0;
-    padding: 0;
-
-    -ms-user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-
-    border-radius: 50%;
-
-    & > {
-      position: absolute;
-      inset-block-start: 0;
-      inset-inline-start: 0;
-
-      block-size: 100%;
-      inline-size: auto;
-    }
-  }
-}
-
-// Extended touch target
-@mixin touchTarget {
-  @include platform.ifHasTouch() {
-    content: "";
-
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 0;
-
-    block-size: var(--mdw-button__click-target-size);
-    inline-size: 100%;
-
-    transform: translateY(-50%);
-  }
-}
-
-// Raised
-
-.mdw-button[mdw-raised]:not([disabled]):not([aria-disabled="true"]) {
-  @include elevation.boxShadowMixin(2);
-
-  &:active {
-    @include elevation.boxShadowMixin(8);
-  }
-}
-
-// Disabled
-.mdw-button[disabled],
-.mdw-button[aria-disabled="true"] {
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  cursor: not-allowed;
-}

package/components/button/_theme.scss

@@ -1,42 +0,0 @@
-// https://material.io/design/interaction/states.html
-// https://material.io/design/components/buttons.html
-// https://material.io/design/iconography/system-icons.html#color
-
-.mdw-theme {
-  --mdw-button__default-text-rgb: var(--mdw-ink-default);
-  --mdw-button__disabled-text-rgb: var(--mdw-ink-default);
-  --mdw-button__disabled-surface-text-rgb: var(--mdw-ink-default);
-  --mdw-button__disabled-surface-background-rgb: var(--mdw-ink-default);
-  --mdw-button__default-text-opacity: var(--mdw-high-opacity);
-  --mdw-button__disabled-text-opacity: var(--mdw-inactive-opacity);
-  --mdw-button__disabled-surface-text-opacity: var(--mdw-high-opacity);
-  --mdw-button__disabled-surface-background-opacity: var(--mdw-inactive-opacity);
-}
-
-.mdw-button {
-  &:disabled:not([aria-disabled="true"]) {
-    color: RGBA(var(--mdw-button__disabled-text-rgb), var(--mdw-button__disabled-text-opacity));
-
-    &.mdw-overlay::before {
-      display: none;
-    }
-  }
-
-  &.mdw-overlay[aria-disabled="true"] {
-    // Sets foreground to default ink color
-    color: RGBA(var(--mdw-button__default-text-rgb), var(--mdw-button__default-text-opacity));
-
-    &[mdw-surface] {
-      background-color: RGBA(var(--mdw-button__disabled-surface-background-rgb), var(--mdw-button__disabled-surface-background-opacity));
-      color: RGBA(var(--mdw-button__disabled-surface-text-rgb), var(--mdw-button__disabled-surface-text-opacity));
-
-      &[mdw-dark],
-      &[mdw-light] {
-        --mdw-button__disabled-surface-text-rgb: inherit;
-        --mdw-button__disabled-surface-text-opacity: inherit;
-        --mdw-button__disabled-surface-background-rgb: inherit;
-        --mdw-button__disabled-surface-background-opacity: inherit;
-      }
-    }
-  }
-}

package/components/button/index.eta

@@ -1,32 +0,0 @@
-<a <%~ Object.entries({
-    'class': [
-      'mdw-button',
-      it?.overlay != false ? 'mdw-overlay' : '',
-      it?.ripple != false ? 'mdw-ripple' : '',
-      it?.ink || it?.surface || it?.light || it?.dark || it?.borderInk || it?.theme ? 'mdw-theme' : '',
-      it?.class,
-    ].filter(v=>v).join(' '),
-    id: it?.id,
-    'mdw-ink': it?.ink,
-    'mdw-surface': it?.surface,
-    'mdw-border-ink': it?.borderInk,
-    'mdw-light': it?.light,
-    'mdw-dark': it?.dark,
-    'mdw-icon': it?.icon,
-    'mdw-raised': it?.raised,
-    'mdw-more-button': it?.moreButton ?? (
-      it?.icon && (it?.text === 'more_vert' || it?.body === 'more_vert') && it?.class?.split(' ').includes('material-icons')),
-    'disabled': it?.disabled && it?.disabled !== 'false',
-    'aria-disabled': it?.disabled === true ? 'true' : it?.disabled,
-    'tabindex': it?.tabindex || '0',
-    'href': it?.href,
-    ...it?.attributes,
-  }).map(([key, value]) => {
-    if (value === true) return key;
-    if (value === false || value == null) return false;
-    return `${key}="${value}"`
-  }).filter(v=>v).join(' ')-%>>
-
-  <%_~ it?.body ?? '' %><%= it?.text ?? '' _%>
-
-</a>

package/components/button/index.js

@@ -1,43 +0,0 @@
-/** @see https://www.w3.org/TR/wai-aria-practices/#button */
-
-import * as AriaButton from '../../core/aria/button.js';
-import * as Overlay from '../../core/overlay/index.js';
-import * as Ripple from '../../core/ripple/index.js';
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attachCore(element) {
-  AriaButton.attach(element);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  element.classList.add('mdw-overlay');
-  Ripple.attach(element);
-  element.classList.add('mdw-ripple');
-  Overlay.attach(element);
-  attachCore(element);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detachCore(element) {
-  AriaButton.detach(element);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detach(element) {
-  detachCore(element);
-  Ripple.detach(element);
-  Overlay.detach(element);
-}

package/components/button/index.pug

@@ -1,18 +0,0 @@
-mixin mdwButton(options={})
-  a.mdw-button(class=([
-  options.overlay != false ? 'mdw-overlay' : '',
-  options.ripple != false ? 'mdw-ripple' : '',
-  options.ink || options.surface || options.light || options.dark || options.borderInk ? 'mdw-theme' : '',
-  ].filter(v=>v).join(' '))
-  mdw-ink=(options.ink)
-  mdw-surface=(options.surface)
-  mdw-border-ink=(options.borderInk === true ? '' : options.borderInk)
-  mdw-light=(options.light ? '' : false)
-  mdw-dark=(options.dark ? '' : false)
-  mdw-icon=(options.icon ? '' : false)
-  mdw-raised=(options.raised ? '' : false)
-  disabled=(options.disabled ? '' : false)
-  aria-disabled=(options.disabled ? 'true' : false)
-  tabindex=(options.tabindex == null ? '0' : options.tabindex)
-  )&attributes(attributes)
-    block

package/components/button/index.scss

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

package/components/card/_spec.scss

@@ -1,241 +0,0 @@
-/* https://material.io/design/components/cards.html#specs */
-
-@use "sass:math";
-
-@use '../../core/_breakpoint.scss' as breakpoint;
-@use '../../core/_elevation.scss' as elevation;
-@use '../../core/_length.scss' as *;
-@use '../../core/_motion.scss' as motion;
-@use '../../core/_platform.scss' as platform;
-@use '../../core/_type.scss' as type;
-
-$horizontalPadding: 16px !default;
-
-:root {
-  --mdw-card__inline-start: left;
-  --mdw-card__inline-end: right;
-  --mdw-card__box-shadow: #{elevation.boxShadow(0)};
-  --mdw-card__border-color: inherit;
-
-  &[dir="rtl"] {
-    --mdw-card__inline-start: right;
-    --mdw-card__inline-end: left;
-  }
-
-  @include breakpoint.maxTabletDevice() {
-    --mdw-card__box-shadow: #{elevation.boxShadow(1)};
-    --mdw-card__border-color: transparent;
-  }
-}
-
-.mdw-card {
-  @include type.addRules('body-2');
-
-  display: block;
-
-  position: relative;
-
-  outline: none;
-
-  transition-duration: motion.$shapeChangeDuration;
-  transition-property: box-shadow;
-  transition-timing-function: motion.$standardEasing;
-
-  border-radius: 4px;
-  box-shadow: var(--mdw-card__box-shadow);
-
-  &::before {
-    // Outline is behind content, not around it
-    content: "";
-
-    position: absolute;
-    inset: 0;
-
-    // Separated to avoid minification
-    border-block-style: solid;
-    border-block-width: 1px;
-    border-inline-style: solid;
-    border-inline-width: 1px;
-
-    pointer-events: none;
-
-    border-color: var(--mdw-card__border-color, inherit);
-
-    border-radius: inherit;
-
-  }
-
-  &[mdw-elevation="1"] {
-    box-shadow: elevation.boxShadow(1);
-  }
-
-  &[mdw-elevation="8"],
-  &[mdw-raised~="hover"]:hover,
-  &[mdw-raised~="focus"]:focus,
-  &[mdw-raised~="focus-within"]:focus-within {
-    box-shadow: elevation.boxShadow(8);
-  }
-
-  &[mdw-elevation="1"],
-  &[mdw-elevation="8"] {
-    &::before {
-      border-color: transparent;
-    }
-  }
-}
-
-.mdw-card__actions,
-.mdw-card__start,
-.mdw-card__end {
-  // Position z-index higher than .mdw-card__button
-  position: relative;
-
-  z-index: 2;
-}
-
-.mdw-card__header,
-.mdw-card__subheader,
-.mdw-card__supporting-text,
-.mdw-card__content {
-  padding: 0 $horizontalPadding;
-}
-
-.mdw-card__supporting-text {
-  @include type.textTopToTop(14);
-  @include type.baselineToBottom(16);
-}
-
-.mdw-card > .mdw-divider {
-  inline-size: calc(100% - #{$horizontalPadding * 2});
-  margin-inline: $horizontalPadding;
-}
-
-.mdw-card__thumbnail {
-  margin-block: 16px 0;
-  margin-inline: $horizontalPadding;
-}
-
-.mdw-card__start {
-  float: var(--mdw-card__inline-start);
-  float: inline-start;
-}
-
-.mdw-card__end {
-  float: var(--mdw-card__inline-end);
-  float: inline-end;
-}
-
-.mdw-card__image {
-  block-size: auto;
-  inline-size: 100%;
-}
-
-.mdw-card__media {
-  position: relative;
-
-  line-height: 0;
-
-  &[mdw-ratio] > .mdw-card__image {
-    position: absolute;
-
-    block-size: 100%;
-
-    object-fit: cover;
-  }
-
-  &[mdw-ratio]::after {
-    content: '';
-
-    display: inline-block;
-
-    block-size: 0;
-    inline-size: auto;
-  }
-
-  &[mdw-ratio="16:9"]::after {
-    padding-block-end: #{math.div(100%, 16) * 9};
-  }
-
-  &[mdw-ratio="3:2"]::after {
-    padding-block-end: #{math.div(100%, 3) * 2};
-  }
-
-  &[mdw-ratio="4:3"]::after {
-    padding-block-end: #{math.div(100%, 4) * 3};
-  }
-
-  &[mdw-ratio="1:1"]::after {
-    padding-block-end: #{math.div(100%, 1) * 1};
-  }
-}
-
-.mdw-card__header-thumbnail {
-  align-self: center;
-
-  min-block-size: 40px;
-  min-inline-size: 40px;
-  margin-inline: 0 $horizontalPadding;
-}
-
-.mdw-card__header {
-  margin: 0;
-}
-
-h5.mdw-card__header {
-  @include type.textTopToTop(16);
-  @include type.addRules('h5');
-  @include type.baselineToBottom(28);
-  margin-block-end: -28px;
-}
-
-h6.mdw-card__header {
-  @include type.textTopToTop(14);
-  @include type.addRules('h6');
-}
-
-.mdw-card__header[mdw-two-line] {
-  @include type.baselineToBottom(22);
-  margin-block-end: -22px;
-
-  & ~ .mdw-card__subheader {
-    @include type.textTopToTop(8);
-    @include type.baselineToBottom(16);
-  }
-}
-
-.mdw-card__actions {
-  display: flex;
-
-  padding-block-start: 8px;
-  padding-inline: 4px;
-
-  & > .mdw-button {
-    margin: 0 4px;
-  }
-
-  & > span {
-    flex: 1;
-  }
-}
-
-.mdw-card__actions,
-.mdw-card__supporting-text {
-  &:last-child {
-    padding-block-end: 8px;
-  }
-}
-
-.mdw-button.mdw-card__button {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-
-  block-size: 100%;
-  inline-size: 100%;
-  margin: 0;
-  padding: 0;
-
-  z-index: 1;
-
-  border-radius: inherit;
-}

package/components/card/index.scss

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

package/components/chip/_spec.scss

@@ -1,111 +0,0 @@
-// https://material.io/design/components/chips.html
-
-@use '../../core/_length.scss' as *;
-
-$borderWidth: 1px !default;
-
-.mdw-chip {
-  margin-block: 0 -8px;
-  margin-inline: -8px 0;
-}
-
-.mdw-chip__item {
-  display: inline-flex;
-  position: relative;
-  align-items: center;
-  overflow: hidden;
-
-  min-block-size: 32px;
-
-  margin-block: 0 8px;
-  margin-inline: 8px 0;
-  padding: 0 12px;
-
-  transition: inherit;
-
-  border-radius: 32px; // unlikely to be taller than 64dp
-}
-
-.mdw-chip__checkmark,
-.mdw-chip__thumbnail {
-  display: flex;
-  align-items: center;
-  order: -1;
-
-  margin-inline: -8px 8px;
-
-  transition: inherit;
-  transition-property: max-inline-size, opacity;
-
-}
-
-.mdw-chip__input {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-
-  box-sizing: border-box;
-  block-size: 100%;
-  inline-size: 100%;
-  margin: 0;
-  border-style: solid;
-  border-width: $borderWidth;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-
-  transition: inherit;
-  transition-property: none;
-
-  border-color: transparent;
-  border-radius: inherit;
-
-  &::before {
-    content: '';
-
-    position: absolute;
-    inset: -$borderWidth;
-
-    transition: inherit;
-    transition-property: background-color, opacity;
-
-    border-radius: inherit;
-  }
-
-  & ~ .mdw-chip__checkmark {
-    max-inline-size: 0;
-
-    opacity: 0;
-  }
-
-  &:checked ~ .mdw-chip__checkmark {
-    max-inline-size: 24px;
-
-    opacity: 1;
-  }
-}
-
-.mdw-chip__text {
-  transition: inherit;
-  transition-property: color;
-}
-
-.mdw-chip__remove {
-  display: flex;
-  align-items: center;
-  order: 1;
-
-  margin-inline: 8px -4px;
-
-  cursor: pointer;
-
-  z-index: 1;
-
-  /* stylelint-disable-next-line selector-class-pattern */
-  &.material-icons {
-    font-size: 18px;
-  }
-}