@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/components/banner/_spec.scss

@@ -4,14 +4,28 @@
 @use '../../core/_length.scss' as *;
 @use '../../core/_type.scss' as type;
 
+:root {
+  --mdw-banner__flex-wrap: nowrap;
+  --mdw-banner__text-padding-inline-start: 24px;
+  --mdw-banner__buttons-margin-inline-start: 0;
+  @include breakpoint.has16DPMargin() {
+    --mdw-banner__text-padding-inline-start: 16px;
+  }
+  @include breakpoint.minMediumWindow() {
+    --mdw-banner__flex-wrap: wrap;
+    --mdw-banner__buttons-margin-inline-start: 90px;
+  }
+}
+
 .mdw-banner {
   display: flex;
   align-items: center;
   flex-direction: row;
+  flex-wrap: var(--mdw-banner__flex-wrap);
   justify-content: center;
 
-  width: 100%;
-  border-bottom: solid dp(1);
+  inline-size: 100%;
+  border-block-end: solid 1px;
 }
 
 .mdw-banner__container {
@@ -22,34 +36,18 @@
   align-items: center;
   flex-wrap: wrap;
   justify-content: flex-end;
-  
+
   box-sizing: border-box;
-  max-width: dp(960);
+  max-inline-size: 960px;
   flex: 1;
-  padding-top: dp(8);
-  padding-bottom: dp(7);
+  padding-block: 8px 7px;
 }
 
 .mdw-banner__icon {
   position: absolute;
-  top: dp(24);
-  right: auto;
-  left: dp(16);
 
-  :root[dir="rtl"] & {
-    right: dp(16);
-    left: auto;
-  }
-
-  & ~ .mdw-banner__text {
-    margin-right: 0;
-    margin-left: dp(40 + 16);
-
-    :root[dir="rtl"] & {
-      margin-right: dp(40 + 16);
-      margin-left: 0;
-    }
-  }
+  inset-block-start: 24px;
+  inset-inline: 16px auto;
 }
 
 .mdw-banner__text {
@@ -58,24 +56,12 @@
 
   flex-grow: 1;
 
-  padding-right: 0;
-  padding-left: dp(24);
+  padding-inline-start: var(--mdw-banner__text-padding-inline-start);
 
   white-space: pre-line;
 
-  :root[dir="rtl"] {
-    padding-right: dp(24);
-    padding-left: 0;
-  }
-
-  @include breakpoint.has16DPMargin() {
-    padding-right: 0;
-    padding-left: dp(16);
-
-    :root[dir="rtl"] & {
-      padding-right: dp(16);
-      padding-left: 0;
-    }
+  .mdw-banner__icon ~ & {
+    margin-inline: 56px 0; // 40 + 16
   }
 }
 
@@ -84,35 +70,14 @@
   flex-direction: row-reverse;
   flex-wrap: wrap;
   justify-content: flex-start;
-  
-  max-width: 100%;
+
+  max-inline-size: 100%;
   flex: none;
+  margin-inline-start: var(--mdw-banner__buttons-margin-inline-start);
 
   .mdw-button {
-    margin-right: dp(8);
-    margin-left: 0;
+    margin-inline: 0 8px;
 
     text-align: end;
-
-    :root[dir="rtl"] & {
-      margin-right: 0;
-      margin-left: dp(8);
-    }
-  }
-}
-
-@include breakpoint.minMediumWindow {
-  .mdw-banner {
-    flex-wrap: nowrap;
-  }
-
-  .mdw-banner__buttons {
-    margin-right: 0;
-    margin-left: dp(90);
-
-    :root[dir="rtl"] & {
-      margin-right: dp(90);
-      margin-left: 0;
-    }
   }
 }

package/components/bottomnav/_spec.scss

@@ -4,14 +4,28 @@
 @use '../../core/_motion.scss' as motion;
 @use '../../core/_type.scss' as type;
 
+:root {
+  --mdw-bottomnav__label-opacity: 1;
+  --mdw-bottomnav__label-transform: none;
+  --mdw-bottomnav__icon-transform: #{translateY(8px)};
+}
+
 .mdw-bottomnav {
   display: flex;
   position: relative;
   justify-content: center;
   overflow: hidden;
 
-  min-height: dp(56);
-  width: 100%;
+  min-block-size: 56px;
+  inline-size: 100%;
+
+  &[mdw-shifting] {
+    .mdw-bottomnav__item:not([aria-selected="true"]) {
+      --mdw-bottomnav__label-opacity: 0;
+      --mdw-bottomnav__label-transform: #{translateY(8px)};
+      --mdw-bottomnav__icon-transform: #{translateY(16px)};
+    }
+  }
 }
 
 .mdw-bottomnav__item {
@@ -21,12 +35,12 @@
   flex-direction: column;
   justify-content: flex-start;
   overflow: visible;
-  
-  min-width: dp(80);
-  flex: dp(168);
+
+  min-inline-size: 80px;
+  flex: 168px;
   flex-grow: 0;
   // flex-shrink: 1;
-  // flex-basis: dp(168);
+  // flex-basis: 168px;
   margin: 0;
   padding: 0;
 
@@ -38,7 +52,7 @@
   user-select: none;
 
   z-index: 0;
-  
+
   border-radius: 0;
   box-shadow: none;
 }
@@ -46,56 +60,51 @@
 .mdw-bottomnav__icon {
   display: flex;
   position: absolute;
-  top: 0;
-  left: 50%;
-  
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+
+  margin-inline-start: -12px;
+
   margin: 0;
-  margin-left: dp(-12);
   padding: 0;
 
+  pointer-events: none;
+
   transition-duration: motion.$shapeChangeDuration, motion.$simpleDuration;
   transition-property: transform, color;
   transition-timing-function: motion.$standardEasing;
 
-  pointer-events: none;
-  transform: translateY(dp(8));
+  transform: var(--mdw-bottomnav__icon-transform);
 
   &:last-child {
     // No label
-    transform: translateY(dp(16));
+    transform: translateY(16px);
   }
 }
 
 .mdw-bottomnav__badge {
   position: absolute;
-  top: 0;
-  right: auto;
-  left: dp(16);
+  inset-block-start: 0;
+  inset-inline: 16px auto;
 
-  
   box-sizing: border-box;
-  min-height: dp(8);
-  min-width: dp(8);
-  padding: dp(2);
+  min-block-size: 8px;
+  min-inline-size: 8px;
+  padding: 2px;
 
   visibility: hidden;
 
   z-index: 1;
 
-  border-radius: dp(8);
+  border-radius: 8px;
 
   font: inherit;
 
   font-weight: type.$weightRegular;
-  font-size: dp(10);
-  line-height: dp(12);
+  font-size: 10px;
+  line-height: 12px;
   letter-spacing: normal;
 
-  :root[dir="rtl"] & {
-    right: dp(16);
-    left: auto;
-  }
-  
   &[mdw-badge] {
     visibility: visible;
 
@@ -117,41 +126,24 @@
   @include type.addRules('caption');
   @include type.textTopToTop(32);
   @include type.baselineToBottom(8);
-  
+
   // Overriding 12dp for baseline bottom with 8dp for oversized and textwrapped
   // Baseline top will ensure type.baselineToBottom is 12dp for standard layouts
 
   box-sizing: border-box;
-  max-width: 100%;
-  padding: 0 dp(12);
-  
+  max-inline-size: 100%;
+  padding: 0 12px;
+
+  pointer-events: none;
+
   transition-duration: motion.$shapeChangeDuration;
   transition-property: transform, opacity, color;
   transition-timing-function: motion.$standardEasing;
 
-  pointer-events: none;
+  opacity: var(--mdw-bottomnav__label-opacity);
+  transform: var(--mdw-bottomnav__label-transform);
 
   text-align: center;
   word-break: break-all;
   word-break: break-word;
 }
-
-.mdw-bottomnav[mdw-shifting] {
-  .mdw-bottomnav__icon {
-    transform: translateY(dp(16));
-  }
-
-  .mdw-bottomnav__label {
-    opacity: 0;
-    transform: translateY(dp(8));
-  }
-
-  .mdw-bottomnav__item[aria-selected="true"] > .mdw-bottomnav__label {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  .mdw-bottomnav__item[aria-selected="true"] > .mdw-bottomnav__icon {
-    transform: translateY(dp(8));
-  }
-}

package/components/bottomnav/index.js

@@ -2,7 +2,6 @@
 
 import * as Keyboard from '../../core/aria/keyboard.js';
 import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
-import { iterateArrayLike } from '../../core/dom.js';
 
 import * as BottomNavItem from './item.js';
 
@@ -12,10 +11,8 @@ import * as BottomNavItem from './item.js';
  */
 function onTabIndexZeroed(event) {
   event.stopPropagation();
-  /** @type {HTMLElement} */
-  const bottomnavElement = (event.currentTarget);
-  /** @type {HTMLElement} */
-  const currentItem = (event.target);
+  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const currentItem = /** @type {HTMLElement} */ (event.target);
   RovingTabIndex.removeTabIndex(bottomnavElement.querySelectorAll('[role="tab"]'), [currentItem]);
 }
 
@@ -30,8 +27,7 @@ function onForwardsRequested(event) {
   }
   event.preventDefault();
   event.stopPropagation();
-  /** @type {HTMLElement} */
-  const bottomnavElement = (event.currentTarget);
+  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
   RovingTabIndex.selectNext(bottomnavElement.querySelectorAll('[role="tab"]'));
 }
 
@@ -46,8 +42,7 @@ function onBackwardsRequested(event) {
   }
   event.preventDefault();
   event.stopPropagation();
-  /** @type {HTMLElement} */
-  const bottomnavElement = (event.currentTarget);
+  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
   RovingTabIndex.selectPrevious(bottomnavElement.querySelectorAll('[role="tab"]'));
 }
 
@@ -66,18 +61,16 @@ export function setupARIA(bottomnavElement) {
  * @return {void}
  */
 export function onSelectedChangeEvent(event) {
-  /** @type {HTMLElement} */
-  const itemElement = (event.target);
+  const itemElement = /** @type {HTMLElement} */ (event.target);
   if (event.detail.value !== 'true') {
     return;
   }
-  /** @type {HTMLElement} */
-  const bottomnavElement = (event.currentTarget);
-  iterateArrayLike(bottomnavElement.querySelectorAll('[role="tab"]'), (item) => {
+  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
+  for (const item of bottomnavElement.querySelectorAll('[role="tab"]')) {
     if (item !== itemElement) {
       BottomNavItem.setSelected(item, false);
     }
-  });
+  }
 }
 
 /**
@@ -86,16 +79,16 @@ export function onSelectedChangeEvent(event) {
  */
 export function attach(bottomnavElement) {
   setupARIA(bottomnavElement);
-  /** @type {Element} */
-  let selectedItem;
+  /** @type {?Element} */
+  let selectedItem = null;
   const items = bottomnavElement.getElementsByClassName('mdw-bottomnav__item');
 
-  iterateArrayLike(items, (item) => {
+  for (const item of items) {
     BottomNavItem.attach(item);
     if (!selectedItem && item.getAttribute('aria-selected') === 'true') {
       selectedItem = item;
     }
-  });
+  }
   if (!selectedItem) {
     selectedItem = items[0];
   }
@@ -118,5 +111,7 @@ export function detach(bottomnavElement) {
   bottomnavElement.removeEventListener(Keyboard.FORWARD_ARROW_KEY, onForwardsRequested);
   bottomnavElement.removeEventListener(Keyboard.BACK_ARROW_KEY, onBackwardsRequested);
   bottomnavElement.removeEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
-  iterateArrayLike(bottomnavElement.getElementsByClassName('mdw-bottomnav__item'), BottomNavItem.detach);
+  for (const element of bottomnavElement.getElementsByClassName('mdw-bottomnav__item')) {
+    BottomNavItem.detach(element);
+  }
 }

package/components/bottomnav/item.js

@@ -1,7 +1,6 @@
 // https://www.w3.org/TR/wai-aria-1.1/#tab
 
 import * as AriaTab from '../../core/aria/tab.js';
-import { iterateArrayLike } from '../../core/dom.js';
 import * as Overlay from '../../core/overlay/index.js';
 import * as Ripple from '../../core/ripple/index.js';
 
@@ -22,8 +21,7 @@ export function setSelected(element, value, dispatchEvent = true) {
  * @return {void}
  */
 function onClick(event) {
-  /** @type {HTMLElement} */
-  const element = (event.currentTarget);
+  const element = /** @type {HTMLElement} */ (event.currentTarget);
   if (element.getAttribute('aria-disabled') === 'true') {
     return;
   }
@@ -36,8 +34,9 @@ function onClick(event) {
  */
 export function attachAria(element) {
   AriaTab.attach(element);
-  iterateArrayLike(element.getElementsByClassName('mdw-bottomnav__icon'),
-    (el) => el.setAttribute('aria-hidden', 'true'));
+  for (const el of element.getElementsByClassName('mdw-bottomnav__icon')) {
+    el.setAttribute('aria-hidden', 'true');
+  }
 }
 
 /**

package/components/button/README.md

@@ -51,7 +51,7 @@ button.mdw-button(disabled)
 # Javascript
 
 ```
-  [...document.getElementsByClassName("mdw-button")].forEach(Button.attach);
+  for (const el of document.getElementsByClassName("mdw-button")) Button.attach(el);
 ```
 
 # Notes

package/components/button/_spec.scss

@@ -1,16 +1,16 @@
 // https://material.io/guidelines/components/buttons.html#buttons-raised-buttons
 // https://material.io/guidelines/style/icons.html#
 
-@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;
 
-$externalPadding: dp(8) !default;
-$minimumClickTarget: dp(48) !default;
-$outlineSize: dp(1) !default;
+:root {
+  --mdw-button__click-target-size: 48px;
+  --mdw-button__outline-size: 1px;
+}
 
 .mdw-button {
   display: inline-flex;
@@ -20,11 +20,11 @@ $outlineSize: dp(1) !default;
   overflow: hidden;
 
   box-sizing: border-box;
-  height: dp(36);
-  min-width: dp(64);
-  margin: 0 dp(8);
+  block-size: 36px;
+  min-inline-size: 64px;
+  margin: 0 8px;
   border: none;
-  padding: 0 dp(8);
+  padding: 0 8px;
 
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -42,20 +42,21 @@ $outlineSize: dp(1) !default;
 
   z-index: 0;
 
-  border-radius: dp(4);
+  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 dp(16);
+    padding: 0 16px;
   }
 
   &:not([mdw-surface]) {
@@ -63,6 +64,7 @@ $outlineSize: dp(1) !default;
   }
 
   // Don't override font icon properties
+
   &:not([mdw-icon]) {
     @include type.addRules('button');
     font-family: inherit;
@@ -71,25 +73,26 @@ $outlineSize: dp(1) !default;
 
   &[mdw-border-ink] {
     border-style: solid;
-    border-width: $outlineSize;
+    border-width: var(--mdw-button__outline-size);
 
     &::before,
     & > .mdw-ripple {
       box-sizing: content-box;
-      height: 100%;
-      width: 100%;
-      margin-top: -$outlineSize;
-      margin-left: -$outlineSize;
-      padding-right: 2 * $outlineSize;
-      padding-bottom: 2 * $outlineSize;
+      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] {
-    height: dp(40);
-    min-width: dp(40);
-    padding: dp(8);
+    block-size: 40px;
+    min-inline-size: 40px;
+    padding: 8px;
 
     -moz-user-select: none;
     -ms-user-select: none;
@@ -98,12 +101,12 @@ $outlineSize: dp(1) !default;
 
     border-radius: 50%;
 
-    font-size: dp(24); // Internal padding provided by font
+    font-size: 24px; // Internal padding provided by font
   }
 
   &[mdw-image] {
-    height: dp(24);
-    min-width: dp(24);
+    block-size: 24px;
+    min-inline-size: 24px;
     margin: 0;
     padding: 0;
 
@@ -116,11 +119,11 @@ $outlineSize: dp(1) !default;
 
     & > {
       position: absolute;
-      top: 0;
-      left: 0;
-      
-      height: 100%;
-      width: auto;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      block-size: 100%;
+      inline-size: auto;
     }
   }
 }
@@ -131,31 +134,29 @@ $outlineSize: dp(1) !default;
     content: "";
 
     position: absolute;
-    top: 50%;
-    left: 0;
-    
-    height: $minimumClickTarget;
-    width: 100%;
+    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] {
-  box-shadow: elevation.boxShadow(2);
+
+.mdw-button[mdw-raised]:not([disabled]):not([aria-disabled="true"]) {
+  @include elevation.boxShadowMixin(2);
 
   &:active {
-    box-shadow: elevation.boxShadow(8);
+    @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;
-
-  &,
-  &[mdw-raised] {
-    box-shadow: elevation.boxShadow(0);
-  }
 }