@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/card/_spec.scss

@@ -0,0 +1,241 @@
+/* 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

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

package/components/chip/_spec.scss

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

package/components/chip/_theme.scss

@@ -0,0 +1,105 @@
+/* https://material.io/design/interaction/states.html */
+/* https://material.io/design/components/chips.html */
+/* https://material.io/design/iconography/system-icons.html#color */
+
+.mdw-theme {
+  --mdw-chip__text-color: var(--mdw-text-color);
+  --mdw-chip__background-color: var(--mdw-divider-color);
+  --mdw-chip__active-icon-color__focus: var(--mdw-text-color);
+  --mdw-chip__active-icon-color: var(--mdw-medium-color);
+  --mdw-chip__inactive-icon-color: var(--mdw-inactive-color);
+  --mdw-chip__overlay-color: RGBA(var(--mdw-ink-default), 1.00);
+
+  --mdw-chip__disabled-background-color: RGBA(var(--mdw-ink-default), 0.12);
+  --mdw-chip__outline-color: RGBA(var(--mdw-ink-default), 0.12);
+
+  --mdw-chip__default-opacity: var(--mdw-chip__default-opacity-value);
+  --mdw-chip__hover-opacity: var(--mdw-chip__hover-opacity-value);
+  --mdw-chip__focus-opacity: var(--mdw-chip__focus-opacity-value);
+  --mdw-chip__selected-opacity: var(--mdw-chip__selected-opacity-value);
+  --mdw-chip__outlined-opacity: var(--mdw-chip__outlined-opacity-value);
+  --mdw-chip__activated-opacity: var(--mdw-chip__activated-opacity-value);
+}
+
+.mdw-theme[mdw-light] {
+  --mdw-chip__default-opacity-value: 0.12;
+  --mdw-chip__hover-opacity-value: 0.04;
+  --mdw-chip__focus-opacity-value: 0.12;
+  --mdw-chip__selected-opacity-value: 0.08;
+  --mdw-chip__outlined-opacity-value: 0.00;
+  --mdw-chip__activated-opacity-value: 0.12;
+  --mdw-chip__activated-text-color: inherit;
+
+  --mdw-chip__pressed-opacity: 0.16;
+
+  --mdw-chip__disabled-text-color: RGBA(var(--mdw-ink-default-light), 0.26);
+}
+
+.mdw-theme[mdw-dark] {
+  --mdw-chip__default-opacity-value: 0.24;
+  --mdw-chip__hover-opacity-value: 0.08;
+  --mdw-chip__focus-opacity-value: 0.24;
+  --mdw-chip__selected-opacity-value: 0.16;
+  --mdw-chip__outlined-opacity-value: 0.00;
+  --mdw-chip__activated-opacity-value: 0.24;
+  --mdw-chip__activated-text-color: var(--mdw-text-color);
+
+  --mdw-chip__pressed-opacity: 0.32;
+
+  --mdw-chip__disabled-text-color: RGBA(var(--mdw-ink-default-dark), 0.30);
+}
+
+.mdw-chip {
+  --mdw-chip__base-opacity: var(--mdw-chip__default-opacity);
+  --mdw-chip__border-color: transparent;
+
+  &[mdw-outlined] {
+    --mdw-chip__base-opacity: var(--mdw-chip__outlined-opacity);
+    --mdw-chip__border-color: var(--mdw-chip__outline-color);
+  }
+}
+
+.mdw-chip__thumbnail,
+.mdw-chip__remove,
+.mdw-chip__text {
+  color: var(--mdw-chip__text-color);
+}
+
+.mdw-chip__input {
+  border-color: var(--mdw-chip__border-color);
+  color: inherit;
+
+  &:not(:hover) {
+    --mdw-chip__hover-opacity: 0;
+  }
+
+  &:not(:focus) {
+    --mdw-chip__focus-opacity: 0;
+  }
+
+  &:not(:checked) {
+    --mdw-chip__selected-opacity: 0;
+  }
+
+  &::before {
+    opacity: calc(var(--mdw-chip__base-opacity) + var(--mdw-chip__hover-opacity) + var(--mdw-chip__focus-opacity) + var(--mdw-chip__selected-opacity));
+
+    background-color: var(--mdw-chip__overlay-color);
+  }
+
+  &:checked::before {
+    color: inherit;
+  }
+
+  &:checked {
+    & ~ .mdw-chip__text {
+      color: var(--mdw-chip__activated-text-color);
+    }
+
+    &[type="radio"] {
+      &::before {
+        background: currentColor;
+      }
+    }
+  }
+}

package/components/chip/index.js

@@ -0,0 +1,23 @@
+// https://www.w3.org/TR/wai-aria-practices/#Listbox
+
+import * as ChipItem from './item.js';
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  for (const el of element.getElementsByClassName('mdw-chip__item')) {
+    ChipItem.attach(el);
+  }
+}
+
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  for (const el of element.getElementsByClassName('mdw-chip__item')) {
+    ChipItem.detach(el);
+  }
+}

package/components/chip/index.scss

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

package/components/chip/item.js

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