@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/banner/_spec.scss

@@ -1,83 +0,0 @@
-// https://material.io/design/components/banners.html
-
-@use '../../core/_breakpoint.scss' as breakpoint;
-@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;
-
-  inline-size: 100%;
-  border-block-end: solid 1px;
-}
-
-.mdw-banner__container {
-  @include type.addRules('body-2');
-
-  display: flex;
-  position: relative;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-
-  box-sizing: border-box;
-  max-inline-size: 960px;
-  flex: 1;
-  padding-block: 8px 7px;
-}
-
-.mdw-banner__icon {
-  position: absolute;
-
-  inset-block-start: 24px;
-  inset-inline: 16px auto;
-}
-
-.mdw-banner__text {
-  @include type.textTopToTop(12);
-  @include type.baselineToBottom(12);
-
-  flex-grow: 1;
-
-  padding-inline-start: var(--mdw-banner__text-padding-inline-start);
-
-  white-space: pre-line;
-
-  .mdw-banner__icon ~ & {
-    margin-inline: 56px 0; // 40 + 16
-  }
-}
-
-.mdw-banner__buttons {
-  display: flex;
-  flex-direction: row-reverse;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  max-inline-size: 100%;
-  flex: none;
-  margin-inline-start: var(--mdw-banner__buttons-margin-inline-start);
-
-  .mdw-button {
-    margin-inline: 0 8px;
-
-    text-align: end;
-  }
-}

package/components/banner/index.scss

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

package/components/bottomnav/README.md

@@ -1,85 +0,0 @@
-# Syntax
-
-
-## Fixed (Primary Color)
-
-```
-form.mdw-bottomnav.mdw-theme(mdw-ink="primary 500")
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="recents")
-    .mdw-bottomnav__icon.material-icons history
-    .mdw-bottomnav__label Recents
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="favorites" checked)
-    .mdw-bottomnav__icon.material-icons favorite
-    .mdw-bottomnav__label Favorites
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="nearby")
-    .mdw-bottomnav__icon.material-icons near_me
-    .mdw-bottomnav__label Nearby
-```
-
-## Fixed (Filled)
-```
-form.mdw-bottomnav.mdw-theme(mdw-surface="primary 700")
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="recents")
-    .mdw-bottomnav__icon.material-icons history
-    .mdw-bottomnav__label Recents
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="favorites" checked)
-    .mdw-bottomnav__icon.material-icons favorite
-    .mdw-bottomnav__label Favorites
-  label.mdw-bottomnav__item
-    input.mdw-bottomnav__input(type="radio" name="bottomnav" value="nearby")
-    .mdw-bottomnav__icon.material-icons near_me
-    .mdw-bottomnav__label Nearby
-```
-
-## Shifting (Primary Color)
-```
-form.mdw-bottomnav.mdw-theme(mdw-ink="primary 500" mdw-shifting)
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="movies" id='value1')
-  label.mdw-bottomnav__item(for='value1')
-    .mdw-bottomnav__icon.material-icons tv
-    .mdw-bottomnav__label Movies & TV
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="music" id='value2' checked )
-  label.mdw-bottomnav__item(for='value2')
-    .mdw-bottomnav__icon.material-icons music_note
-    .mdw-bottomnav__label Music
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="books" id='value3')
-  label.mdw-bottomnav__item(for='value3')
-    .mdw-bottomnav__icon.material-icons book
-    .mdw-bottomnav__label Books
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="newsstand" id='value4')
-  label.mdw-bottomnav__item(for='value4')
-    .mdw-bottomnav__icon.material-icons assignment
-    .mdw-bottomnav__label Newsstand
-```
-
-## Shifting (Filled)
-```
-form.mdw-bottomnav.mdw-theme(mdw-surface="primary 700" mdw-shifting)
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="movies" id='value1')
-  label.mdw-bottomnav__item(for='value1')
-    .mdw-bottomnav__icon.material-icons tv
-    .mdw-bottomnav__label Movies & TV
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="music" id='value2' checked )
-  label.mdw-bottomnav__item(for='value2')
-    .mdw-bottomnav__icon.material-icons music_note
-    .mdw-bottomnav__label Music
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="books" id='value3')
-  label.mdw-bottomnav__item(for='value3')
-    .mdw-bottomnav__icon.material-icons book
-    .mdw-bottomnav__label Books
-  input.mdw-bottomnav__input(type="radio" name="shiftingbottomnav" value="newsstand" id='value4')
-  label.mdw-bottomnav__item(for='value4')
-    .mdw-bottomnav__icon.material-icons assignment
-    .mdw-bottomnav__label Newsstand
-```
-
-# Notes
-
-Shifting items requires use of `input` elements *immediately* preceeding its corresponding the `.mdw-bottomnav__item` element.
-
-See `.mdw-button` documentation for more information regardling ripple origins.

package/components/bottomnav/_spec.scss

@@ -1,149 +0,0 @@
-// https://material.io/design/components/bottom-navigation.html#specs
-
-@use '../../core/_length.scss' as *;
-@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-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 {
-  display: flex;
-  position: relative;
-  align-items: center;
-  flex-direction: column;
-  justify-content: flex-start;
-  overflow: visible;
-
-  min-inline-size: 80px;
-  flex: 168px;
-  flex-grow: 0;
-  // flex-shrink: 1;
-  // flex-basis: 168px;
-  margin: 0;
-  padding: 0;
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-
-  z-index: 0;
-
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.mdw-bottomnav__icon {
-  display: flex;
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 50%;
-
-  margin-inline-start: -12px;
-
-  margin: 0;
-  padding: 0;
-
-  pointer-events: none;
-
-  transition-duration: motion.$shapeChangeDuration, motion.$simpleDuration;
-  transition-property: transform, color;
-  transition-timing-function: motion.$standardEasing;
-
-  transform: var(--mdw-bottomnav__icon-transform);
-
-  &:last-child {
-    // No label
-    transform: translateY(16px);
-  }
-}
-
-.mdw-bottomnav__badge {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline: 16px auto;
-
-  box-sizing: border-box;
-  min-block-size: 8px;
-  min-inline-size: 8px;
-  padding: 2px;
-
-  visibility: hidden;
-
-  z-index: 1;
-
-  border-radius: 8px;
-
-  font: inherit;
-
-  font-weight: type.$weightRegular;
-  font-size: 10px;
-  line-height: 12px;
-  letter-spacing: normal;
-
-  &[mdw-badge] {
-    visibility: visible;
-
-    &::before {
-      content: attr(mdw-badge);
-    }
-  }
-
-  &[data-mdw-badge] {
-    visibility: visible;
-
-    &::before {
-      content: attr(data-mdw-badge);
-    }
-  }
-}
-
-.mdw-bottomnav__label {
-  @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-inline-size: 100%;
-  padding: 0 12px;
-
-  pointer-events: none;
-
-  transition-duration: motion.$shapeChangeDuration;
-  transition-property: transform, opacity, color;
-  transition-timing-function: motion.$standardEasing;
-
-  opacity: var(--mdw-bottomnav__label-opacity);
-  transform: var(--mdw-bottomnav__label-transform);
-
-  text-align: center;
-  word-break: break-all;
-  word-break: break-word;
-}

package/components/bottomnav/index.js

@@ -1,117 +0,0 @@
-// https://www.w3.org/TR/wai-aria-practices/#tabpanel
-
-import * as Keyboard from '../../core/aria/keyboard.js';
-import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
-
-import * as BottomNavItem from './item.js';
-
-/**
- * @param {Event} event
- * @return {void}
- */
-function onTabIndexZeroed(event) {
-  event.stopPropagation();
-  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
-  const currentItem = /** @type {HTMLElement} */ (event.target);
-  RovingTabIndex.removeTabIndex(bottomnavElement.querySelectorAll('[role="tab"]'), [currentItem]);
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-function onForwardsRequested(event) {
-  if (event.detail.ctrlKey || event.detail.altKey
-    || event.detail.shiftKey || event.detail.metaKey) {
-    return;
-  }
-  event.preventDefault();
-  event.stopPropagation();
-  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
-  RovingTabIndex.selectNext(bottomnavElement.querySelectorAll('[role="tab"]'));
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-function onBackwardsRequested(event) {
-  if (event.detail.ctrlKey || event.detail.altKey
-    || event.detail.shiftKey || event.detail.metaKey) {
-    return;
-  }
-  event.preventDefault();
-  event.stopPropagation();
-  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
-  RovingTabIndex.selectPrevious(bottomnavElement.querySelectorAll('[role="tab"]'));
-}
-
-/**
- * @param {Element} bottomnavElement
- * @return {void}
- */
-export function setupARIA(bottomnavElement) {
-  bottomnavElement.setAttribute('role', 'tablist');
-  bottomnavElement.setAttribute('aria-multiselectable', 'false');
-  bottomnavElement.setAttribute('aria-orientation', 'horizontal');
-}
-
-/**
- * @param {CustomEvent} event
- * @return {void}
- */
-export function onSelectedChangeEvent(event) {
-  const itemElement = /** @type {HTMLElement} */ (event.target);
-  if (event.detail.value !== 'true') {
-    return;
-  }
-  const bottomnavElement = /** @type {HTMLElement} */ (event.currentTarget);
-  for (const item of bottomnavElement.querySelectorAll('[role="tab"]')) {
-    if (item !== itemElement) {
-      BottomNavItem.setSelected(item, false);
-    }
-  }
-}
-
-/**
- * @param {Element} bottomnavElement
- * @return {void}
- */
-export function attach(bottomnavElement) {
-  setupARIA(bottomnavElement);
-  /** @type {?Element} */
-  let selectedItem = null;
-  const items = bottomnavElement.getElementsByClassName('mdw-bottomnav__item');
-
-  for (const item of items) {
-    BottomNavItem.attach(item);
-    if (!selectedItem && item.getAttribute('aria-selected') === 'true') {
-      selectedItem = item;
-    }
-  }
-  if (!selectedItem) {
-    selectedItem = items[0];
-  }
-  if (selectedItem) {
-    BottomNavItem.setSelected(selectedItem, true, true);
-  }
-  RovingTabIndex.setupTabIndexes(bottomnavElement.querySelectorAll('[role="tab"]'));
-  bottomnavElement.addEventListener(BottomNavItem.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
-  bottomnavElement.addEventListener(Keyboard.FORWARD_ARROW_KEY, onForwardsRequested);
-  bottomnavElement.addEventListener(Keyboard.BACK_ARROW_KEY, onBackwardsRequested);
-  bottomnavElement.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
-}
-
-/**
- * @param {Element} bottomnavElement
- * @return {void}
- */
-export function detach(bottomnavElement) {
-  bottomnavElement.removeEventListener(BottomNavItem.SELECTED_CHANGE_EVENT, onSelectedChangeEvent);
-  bottomnavElement.removeEventListener(Keyboard.FORWARD_ARROW_KEY, onForwardsRequested);
-  bottomnavElement.removeEventListener(Keyboard.BACK_ARROW_KEY, onBackwardsRequested);
-  bottomnavElement.removeEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
-  for (const element of bottomnavElement.getElementsByClassName('mdw-bottomnav__item')) {
-    BottomNavItem.detach(element);
-  }
-}

package/components/bottomnav/index.scss

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

package/components/bottomnav/item.js

@@ -1,88 +0,0 @@
-// https://www.w3.org/TR/wai-aria-1.1/#tab
-
-import * as AriaTab from '../../core/aria/tab.js';
-import * as Overlay from '../../core/overlay/index.js';
-import * as Ripple from '../../core/ripple/index.js';
-
-export const SELECTED_CHANGE_EVENT = 'mdw:bottomnavitem-selectedchange';
-
-/**
- * @param {Element} element
- * @param {string|boolean} value
- * @param {boolean} [dispatchEvent=true]
- * @return {boolean} successful
- */
-export function setSelected(element, value, dispatchEvent = true) {
-  return AriaTab.setSelected(element, value, dispatchEvent ? SELECTED_CHANGE_EVENT : null);
-}
-
-/**
- * @param {MouseEvent} event
- * @return {void}
- */
-function onClick(event) {
-  const element = /** @type {HTMLElement} */ (event.currentTarget);
-  if (element.getAttribute('aria-disabled') === 'true') {
-    return;
-  }
-  setSelected(element, true);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attachAria(element) {
-  AriaTab.attach(element);
-  for (const el of element.getElementsByClassName('mdw-bottomnav__icon')) {
-    el.setAttribute('aria-hidden', 'true');
-  }
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attachCore(element) {
-  attachAria(element);
-  element.addEventListener('click', onClick);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function attach(element) {
-  element.classList.add('mdw-overlay');
-  if (!element.hasAttribute('mdw-overlay-off')) {
-    element.setAttribute('mdw-overlay-off', 'selected activated');
-  }
-  if (!element.hasAttribute('mdw-overlay-default')) {
-    element.setAttribute('mdw-overlay-default', 'medium');
-  }
-  Overlay.attach(element);
-
-  element.classList.add('mdw-ripple');
-  Ripple.attach(element);
-
-  attachCore(element);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detachCore(element) {
-  AriaTab.detach(element);
-  element.removeEventListener('click', onClick);
-}
-
-/**
- * @param {Element} element
- * @return {void}
- */
-export function detach(element) {
-  detachCore(element);
-  Ripple.detach(element);
-  Overlay.detach(element);
-}

package/components/button/README.md

@@ -1,61 +0,0 @@
-# Syntax
-
-
-## Flat
-```
-.mdw-button
-```
-
-## Raised
-```
-.mdw-button(mdw-raised)
-```
-
-## Colored (Primary)
-```
-.mdw-button.mdw-theme(mdw-ink="primary contrast")
-```
-
-## Colored (Custom)
-```
-.mdw-button.mdw-theme(mdw-ink="green contrast")
-```
-
-## Filled Light
-```
-.mdw-button.mdw-theme(mdw-surface="primary 100" mdw-light)
-```
-
-## Filled Dark
-```
-.mdw-button.mdw-theme(mdw-surface="secondary 600" mdw-dark)
-```
-
-## Toggled
-```
-.mdw-button(aria-pressed="true")
-```
-
-## Disabled
-```
-a.mdw-button(disabled)
-button.mdw-button(disabled)
-.mdw-button(aria-disabled="true")
-```
-
-## Icon Button
-```
-.mdw-button(mdw-icon).material-icons favorite
-```
-
-# Javascript
-
-```
-  for (const el of document.getElementsByClassName("mdw-button")) Button.attach(el);
-```
-
-# Notes
-
-The click ripple aftereffect is centered when using keyboard or when using only CSS. Initializing the element with Javascript will ensure the ripple will spawn from the cursor position.
-
-Use of `HTMLElementButton` or `HTMLAnchorElement` is supported, but note that using interactive content descendents violates the HTML specifications. Therefore, some browsers may not apply interactive elements such as ripples.