@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/components/chip/_theme.scss

@@ -1,177 +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
-
-@use '../../core/theme/_mixins.scss' as theme;
+/* 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);
+}
 
-$themeValues: (
-  text-color:                    (('foreground-light', 0.87), ('foreground-dark', 1.00)),
-  background-color:              (('foreground-light', 0.12), ('foreground-dark', 0.24)),
+.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;
 
-  // icon
-  active-icon-color__focus:      (('foreground-light', 0.87), ('foreground-dark', 1.00)),
-  active-icon-color:             (('foreground-light', 0.54), ('foreground-dark', 0.70)),
-  inactive-icon-color:           (('foreground-light', 0.38), ('foreground-dark', 0.50)),
+  --mdw-chip__pressed-opacity: 0.16;
 
-  // states
-  overlay-color:                 (('foreground-light', 1.00), ('foreground-dark', 1.00)),
+  --mdw-chip__disabled-text-color: RGBA(var(--mdw-ink-default-light), 0.26);
+}
 
-  default-opacity:               (0.12              , 0.24),
-  hover-opacity:                 (0.12 + 0.04       , 0.24 + 0.08),
-  focus-opacity:                 (0.12 + 0.12       , 0.24 + 0.24),
-  hover-focus-opacity:           (0.12 + 0.04 + 0.12, 0.24 + 0.08 + 0.24),
+.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);
 
-  selected-opacity:              (0.12 + 0.08              , 0.24 + 0.16),
-  selected-hover-opacity:        (0.12 + 0.08 + 0.04       , 0.24 + 0.16 + 0.08),
-  selected-focus-opacity:        (0.12 + 0.08 + 0.12       , 0.24 + 0.16 + 0.24),
-  selected-hover-focus-opacity:  (0.12 + 0.08 + 0.04 + 0.12, 0.24 + 0.16 + 0.08 + 0.24),
+  --mdw-chip__pressed-opacity: 0.32;
 
-  outlined-opacity:               (0.00       , 0.00),
-  outlined-hover-opacity:         (0.04       , 0.08),
-  outlined-focus-opacity:         (0.12       , 0.24),
-  outlined-hover-focus-opacity:   (0.04 + 0.12, 0.08 + 0.24),
+  --mdw-chip__disabled-text-color: RGBA(var(--mdw-ink-default-dark), 0.30);
+}
 
-  outlined-selected-opacity:              (0.08              , 0.16),
-  outlined-selected-hover-opacity:        (0.08 + 0.04       , 0.16 + 0.08),
-  outlined-selected-focus-opacity:        (0.08 + 0.12       , 0.16 + 0.24),
-  outlined-selected-hover-focus-opacity:  (0.08 + 0.04 + 0.12, 0.16 + 0.08 + 0.24),
+.mdw-chip {
+  --mdw-chip__base-opacity: var(--mdw-chip__default-opacity);
+  --mdw-chip__border-color: transparent;
 
-  activated-opacity:             (0.12, 0.24),
+  &[mdw-outlined] {
+    --mdw-chip__base-opacity: var(--mdw-chip__outlined-opacity);
+    --mdw-chip__border-color: var(--mdw-chip__outline-color);
+  }
+}
 
-  activated-text-color:           (inherit, ('foreground-dark', 1.00)),
+.mdw-chip__thumbnail,
+.mdw-chip__remove,
+.mdw-chip__text {
+  color: var(--mdw-chip__text-color);
+}
 
-  activated-hover-opacity:       (0.12 + 0.04, 0.24 + 0.4),
-  activated-focus-opacity:       (0.12 + 0.12, 0.24 + 0.12),
-  activated-hover-focus-opacity: (0.12 + 0.04 + 0.12, 0.24 + 0.4 + 0.12),
+.mdw-chip__input {
+  border-color: var(--mdw-chip__border-color);
+  color: inherit;
 
-  pressed-opacity:               (0.16, 0.32),
+  &:not(:hover) {
+    --mdw-chip__hover-opacity: 0;
+  }
 
-  // disabled
-  disabled-text-color:           (('foreground-light', 0.26), ('foreground-dark', 0.30)),
-  disabled-background-color:     (('foreground-light', 0.12), ('foreground-dark', 0.12)),
-  outline-color:                 (('foreground-light', 0.12), ('foreground-dark', 0.12)),
+  &:not(:focus) {
+    --mdw-chip__focus-opacity: 0;
+  }
 
-) !default;
+  &:not(:checked) {
+    --mdw-chip__selected-opacity: 0;
+  }
 
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('chip', $themeValues, $key, $type);
-}
+  &::before {
+    opacity: calc(var(--mdw-chip__base-opacity) + var(--mdw-chip__hover-opacity) + var(--mdw-chip__focus-opacity) + var(--mdw-chip__selected-opacity));
 
-@mixin addThemeRules($type: 'var') {
-  .mdw-chip__thumbnail,
-  .mdw-chip__remove,
-  .mdw-chip__text {
-    color: RGBA(getThemeValue("text-color", $type));
+    background-color: var(--mdw-chip__overlay-color);
   }
 
-  .mdw-chip__input {
+  &:checked::before {
     color: inherit;
-
-    &::before {
-      opacity: getThemeValue("default-opacity", $type);
-
-      background-color: RGBA(getThemeValue("overlay-color", $type));
-    }
-
-    &:checked::before {
-      color: inherit;
-    }
-
-    &:hover::before {
-      opacity: getThemeValue("hover-opacity", $type);
-    }
-
-    &:focus::before {
-      opacity: getThemeValue("focus-opacity", $type);
-    }
-
-    &:hover:focus::before {
-      opacity: getThemeValue("hover-focus-opacity", $type);
-    }
-
-    &:checked {
-      & ~ .mdw-chip__text {
-        color: RGBA(getThemeValue("activated-text-color", $type));
-      }
-
-      &[type="radio"] {
-        &::before {
-          background: currentColor;
-        }
-      }
-
-      &[type="checkbox"] {
-        &::before {
-          opacity: getThemeValue("selected-opacity", $type);
-        }
-
-        &:hover::before {
-          opacity: getThemeValue("selected-hover-opacity", $type);
-        }
-
-        &:focus::before {
-          opacity: getThemeValue("selected-focus-opacity", $type);
-        }
-
-        &:hover:focus::before {
-          opacity: getThemeValue("selected-hover-focus-opacity", $type);
-        }
-      }
-    }
   }
 
-  .mdw-chip[mdw-outlined] .mdw-chip__input {
-    border-color: RGBA(getThemeValue('outline-color', $type));
-
-    &:not(:checked) {
-      &::before {
-        opacity: getThemeValue("outlined-opacity", $type);
-      }
-
-      &:hover::before {
-        opacity: getThemeValue("outlined-hover-opacity", $type);
-      }
-
-      &:focus::before {
-        opacity: getThemeValue("outlined-focus-opacity", $type);
-      }
-
-      &:hover:focus::before {
-        opacity: getThemeValue("outlined-hover-focus-opacity", $type);
-      }
+  &:checked {
+    & ~ .mdw-chip__text {
+      color: var(--mdw-chip__activated-text-color);
     }
 
-    &:checked {
-      &[type="checkbox"] {
-        &::before {
-          opacity: getThemeValue("outlined-selected-opacity", $type);
-        }
-
-        &:hover::before {
-          opacity: getThemeValue("outlined-selected-hover-opacity", $type);
-        }
-
-        &:focus::before {
-          opacity: getThemeValue("outlined-selected-focus-opacity", $type);
-        }
-
-        &:hover:focus::before {
-          opacity: getThemeValue("outlined-selected-hover-focus-opacity", $type);
-        }
+    &[type="radio"] {
+      &::before {
+        background: currentColor;
       }
     }
   }
 }
-
-
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
-
-@include theme.addComponentCSSVariableRules('chip', $themeValues) {
-  @include addThemeRules();
-}

package/components/chip/index.js

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

package/components/datatable/_spec.scss

@@ -6,7 +6,15 @@
 @use '../../core/_platform.scss' as platform;
 @use '../../core/_type.scss' as type;
 
-$iconSize: dp(16) !default;
+$iconSize: 16px !default;
+
+:root {
+  --mdw-datatable__footer-controls-transform: scaleX(1);
+
+  &[dir="rtl"] {
+    --mdw-datatable__footer-controls-transform: scaleX(-1);
+  }
+}
 
 .mdw-datatable {
   display: flex;
@@ -18,28 +26,22 @@ $iconSize: dp(16) !default;
 
   border-collapse: collapse;
 
-  width: 100%;
+  inline-size: 100%;
 }
 
 .mdw-datatable caption,
 .mdw-datatable__header {
   @include type.addRules('h6');
-  min-height: dp(64);
+  min-block-size: 64px;
 }
 
 .mdw-datatable caption {
   caption-side: top;
 
-  padding: 0 dp(16);
+  padding: 0 16px;
 
-  line-height: dp(64);
-  text-align: left;
+  line-height: 64px;
   text-align: start;
-
-  :root[dir="rtl"] & {
-    text-align: right;
-    text-align: start;
-  }
 }
 
 .mdw-datatable__header {
@@ -62,34 +64,26 @@ $iconSize: dp(16) !default;
 }
 
 .mdw-datatable__header-text {
-  padding-right: 0;
-  padding-left: dp(16);
-
-  :root[dir="rtl"] & {
-    padding-right: dp(16);
-    padding-left: 0;
-  }
+  padding-inline: 16px 0;
 }
 
 .mdw-datatable tr {
-  height: dp(48);
-  border-bottom-style: solid;
-  border-bottom-width: dp(1);
+  block-size: 48px;
+  border-block-end-style: solid;
+  border-block-end-width: 1px;
 
   outline: none;
 }
 
 .mdw-datatable thead > tr {
-  height: dp(48);
+  block-size: 48px;
 }
 
-
 .mdw-datatable td {
   @include type.addRules('body-2');
   // text-align: left;
   // Expected line-height is 20dp. Support two lines within 48dp
-  padding-top: dp(4);
-  padding-bottom: dp(4 - 1); // Remove bottom border width
+  padding-block: 4px 3px; // Remove 1px bottom border width
 
   outline: none;
 
@@ -102,8 +96,7 @@ $iconSize: dp(16) !default;
 
 .mdw-datatable th,
 .mdw-datatable td {
-  padding-right: dp(16);
-  padding-left: dp(16);
+  padding-inline: 16px;
 
   text-align: center;
 
@@ -112,56 +105,27 @@ $iconSize: dp(16) !default;
   }
 
   &[mdw-text] {
-    text-align: left;
     text-align: start;
-  
-    :root[dir="rtl"] & {
-      text-align: right;
-      text-align: start;
-    }
   }
 
   &[mdw-number] {
-    text-align: right;
     text-align: end;
-
-    :root[dir="rtl"] & {
-      text-align: left;
-      text-align: end;
-    }
   }
 
   &[mdw-primary-column] {
-    width: 100%;
-    border-right-style: solid;
-    border-width: dp(1);
-
-    :root[dir="rtl"] & {
-      border-right-style: none;
-      border-left-style: solid;
-    }
+    inline-size: 100%;
+    border-width: 1px;
+    border-inline-end-style: solid;
   }
 }
 
 .mdw-datatable th[mdw-selector] {
-  width: dp(24);
-  padding-right: 0;
-  padding-left: dp(16);
-
-  :root[dir="rtl"] & {
-    padding-right: dp(16);
-    padding-left: 0;
-  }
+  inline-size: 24px;
+  padding-inline: 16px 0;
 
   & + td,
   & + th {
-    padding-right: dp(16);
-    padding-left: dp(12);
-
-    :root[dir="rtl"] & {
-      padding-right: dp(12);
-      padding-left: dp(16);
-    }
+    padding-inline: 12px 16px;
   }
 }
 
@@ -169,7 +133,7 @@ $iconSize: dp(16) !default;
   display: inline-block;
   vertical-align: text-bottom;
 
-  max-width: 0;
+  max-inline-size: 0;
 
   transition-duration: motion.$shapeChangeDuration;
   transition-property: transform;
@@ -223,66 +187,39 @@ $iconSize: dp(16) !default;
   flex-direction: row;
   justify-content: flex-end;
 
-  min-height: dp(56);
+  min-block-size: 56px;
   flex: none;
 }
 
-.mdw-datatable__header,
-.mdw-datatable__footer {
-  @include platform.ifIE() {
-    // Fix IE min-height flexbug
-    &::after {
-      content: '';
-
-      min-height: inherit;
-      width: 0;
-    }
-  }
-}
-
 .mdw-datatable__footer-options,
 .mdw-datatable__footer-details {
-  margin-right: dp(28);
-  margin-left: dp(2);
-
-  :root[dir="rtl"] & {
-    margin-right: dp(2);
-    margin-left: dp(28);
-  }
+  margin-inline: 2px 28px;
 }
 
 .mdw-datatable__header-controls,
 .mdw-datatable__footer-controls {
   display: inline-flex;
 
-  margin-right: dp(4);
-  margin-left: dp(4);
+  margin-inline: 4px;
 
   .mdw-button {
-    margin: 0 dp(4);
+    margin: 0 4px;
   }
 }
 
 .mdw-datatable__footer-controls {
-  direction: ltr;
-
-  :root[dir="rtl"] & {
-    transform: scaleX(-1);
+  .mdw-button {
+    transform: var(--mdw-datatable__footer-controls-transform);
   }
 }
 
 .mdw-datatable__footer-options {
   display: flex;
   align-items: center;
-  
-  select.mdw-textfield__input {
-    min-width: dp(40 + 24);
 
-    direction: rtl;
+  select.mdw-textfield__input {
+    min-inline-size: 64px; // 40 + 24;
 
-    :root[dir="rtl"] & {
-      direction: ltr;
-    }
+    text-align: end;
   }
 }
-