@universal-material/web 3.0.10 → 3.0.11

package/src/container/container.styles.scss

@@ -1,39 +0,0 @@
-:host {
-  --_grid-spacing-small: var(--u-spacing-sm, 8px);
-  --_grid-spacing-medium: var(--u-spacing-md, 16px);
-  --_grid-spacing-large: var(--u-spacing-lg, 24px);
-  --_grid-spacing-extra-large: var(--u-spacing-xl, 40px);
-}
-
-:host([margin="none"]) {
-  --_container-margin: 0;
-}
-
-:host([margin="small"]) {
-  --_container-margin: var(--u-container-margin, var(--_grid-spacing-small));
-}
-
-:host([margin="medium"]) {
-  --_container-margin: var(--u-container-margin, var(--_grid-spacing-medium));
-}
-
-:host([margin="large"]) {
-  --_container-margin: var(--u-container-margin, var(--_grid-spacing-large));
-}
-
-:host([margin="extra-large"]) {
-  --_container-margin: var(--u-container-margin, var(--_grid-spacing-extra-large));
-}
-
-:host {
-  display: block;
-  width: 100%;
-  max-width: var(--u-container-max-width, 992px);
-  margin-inline: auto;
-  padding: var(--_container-margin, var(--_grid-spacing-medium));
-}
-
-:host::after {
-  content: '';
-  display: block;
-}

package/src/container/container.ts

@@ -1,24 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import { styles } from './container.styles.js';
-
-export type UmSpacingSizes = 'none' | 'small' | 'medium ' | 'large' | 'extra-large';
-
-@customElement('u-container')
-export class UmContainer extends LitElement {
-
-  static override styles = styles;
-
-  @property({reflect: true}) margin: UmSpacingSizes | undefined;
-
-  override render(): HTMLTemplateResult {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-container': UmContainer;
-  }
-}

package/src/divider/divider.styles.scss

@@ -1,13 +0,0 @@
-@import "../utils";
-
-:host {
-  --_divider-thickness: var(--u-divider-thickness, 1px);
-  display: block;
-  margin-block: 8px;
-  height: var(--_divider-thickness);
-  background-color: var(--u-divider-color, #{get-color-var(outline-variant)});
-}
-
-:host([no-margin]) {
-  margin: 0;
-}

package/src/divider/divider.ts

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import { styles } from './divider.styles';
-
-@customElement('u-divider')
-export class UmDivider extends LitElement {
-
-  static override styles = styles;
-
-  /**
-   * When true, remove the margin of the divider
-   */
-  @property({type: Boolean, attribute: 'no-margin', reflect: true}) noMargin = false;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-divider': UmDivider;
-  }
-}

package/src/elevation/elevation.styles.scss

@@ -1,31 +0,0 @@
-@import "../utils";
-
-:host {
-  --_level: var(--u-elevation-level, 0);
-  --_shadow-color: #{get-color-var(shadow)};
-
-  -webkit-tap-highlight-color: transparent;
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    transition: box-shadow 150ms ease-in-out;
-  }
-
-  &::before {
-    box-shadow: 0 calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0 var(--_shadow-color);
-    opacity: .3;
-  }
-
-  &::after {
-    box-shadow: 0 calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color);
-    opacity: .15;
-  }
-}

package/src/elevation/elevation.ts

@@ -1,17 +0,0 @@
-import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import { styles } from './elevation.styles';
-
-@customElement('u-elevation')
-export class UmElevation extends LitElement {
-  static override styles = styles;
-
-  override ariaHidden = "true";
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-elevation': UmElevation;
-  }
-}

package/src/ripple/ripple.styles.scss

@@ -1,80 +0,0 @@
-@import '../variables';
-
-:host,
-.ripple-container::before {
-  --_ripple-hover-color: var(--u-ripple-hover-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));
-  --_ripple-pressed-color: var(--u-ripple-pressed-color, var(--u-ripple-color, var(--u-state-layer-color, currentColor)));
-  --_ripple-hover-opacity: var(--u-ripple-pressed-opacity, .08);
-  --_ripple-pressed-opacity: var(--u-ripple-pressed-opacity, .2);
-
-  display: block;
-  inset: 0;
-  isolation: isolate;
-}
-
-.ripple-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: inherit;
-}
-
-.ripple-container::before {
-  content: '';
-  background: var(--_ripple-hover-color);
-  opacity: 0;
-  transition: opacity 200ms;
-}
-
-@media (hover: hover) {
-  :host(:not([disabled]):hover) .ripple-container::before {
-    content: '';
-    background: var(--_ripple-hover-color);
-    opacity: var(--_ripple-hover-opacity);
-  }
-}
-
-:host,
-.ripple-container::before,
-.ripple {
-  position: absolute;
-  border-radius: inherit;
-}
-
-.ripple {
-  top: 50%;
-  left: 50%;
-  background: var(--_ripple-pressed-color);
-  border-radius: 50%;
-  box-shadow: 0 0 64px 64px var(--_ripple-pressed-color);
-  opacity: var(--_ripple-pressed-opacity);
-  transform: scale3d(0, 0, 1);
-  pointer-events: none;
-  will-change: transform;
-
-  &.show {
-    transition:
-      transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) $awesome-cubic-bezier,
-      opacity calc(750ms / var(--u-ripple-speed, 1));
-    transform: scale3d(1, 1, 1);
-  }
-  &.show-forced {
-    transition:
-      transform calc(var(--_ripple-transition-duration) / var(--u-ripple-speed, 1)) $awesome-cubic-bezier,
-      opacity calc(200ms / var(--u-ripple-speed, 1)) 300ms;
-    transform: scale3d(2, 2, 1);
-    opacity: 0;
-  }
-
-  &.dismiss {
-    opacity: 0;
-    transform: scale3d(2, 2, 1);
-  }
-}
-
-::slotted(*) {
-  position: absolute !important;
-  inset: 0;
-  border-radius: inherit;
-}

package/src/ripple/ripple.ts

@@ -1,150 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-
-import { styles } from './ripple.styles';
-
-@customElement('u-ripple')
-export class UmRipple extends LitElement {
-
-  static override styles = styles;
-
-  private isTouching = false;
-
-  /**
-   * Disables the ripple.
-   */
-  @property({type: Boolean, reflect: true}) disabled = false;
-
-  @query('.ripple-container') private readonly rippleContainer!: HTMLElement;
-
-  constructor() {
-    super();
-
-    this.ariaHidden = "true";
-    this.attachEvents();
-  }
-
-  override render(): HTMLTemplateResult {
-    return html`<div class="ripple-container"></div><slot></slot>`
-  }
-
-  private attachEvents(): void {
-
-    this.addEventListener('mousedown', this.handleMouseDown);
-    this.addEventListener('touchstart', this.handleTouchStart);
-  }
-
-  private handleMouseDown(e: MouseEvent): void {
-
-    if (this.isTouching || !this.canCreateRipple()) {
-      return;
-    }
-
-    this.createRipple(e.clientX, e.clientY, 'mouseup');
-  }
-
-  private handleTouchStart(e: TouchEvent): void {
-
-    if (!this.canCreateRipple()) {
-      return;
-    }
-
-    this.isTouching = true;
-
-    const dismiss = this.createRipple(e.touches[0].clientX, e.touches[0].clientY, 'touchend')!;
-
-    this.addEventListener("touchmove", dismiss);
-  }
-
-  private canCreateRipple(): boolean {
-    if (this.disabled) return false;
-
-    const parent = this.parentElement;
-
-    if (!parent || window.getComputedStyle(parent).position !== "relative" && window.getComputedStyle(parent).position !== "absolute" && window.getComputedStyle(parent).position !== "fixed") {
-      return false;
-    }
-
-    return true;
-  }
-
-  createRipple(targetX: number | null = null, targetY: number | null = null, releaseEventName: string | null = null): (() => void) | null {
-    const preClientRect = this.rippleContainer.getBoundingClientRect();
-    targetX ??= preClientRect.x + this.rippleContainer.clientWidth / 2;
-    targetY ??= preClientRect.y + this.rippleContainer.clientHeight / 2;
-
-    const ripple = document.createElement('DIV');
-    ripple.classList.add('ripple');
-    this.rippleContainer!.appendChild(ripple);
-
-    requestAnimationFrame(() => {
-      const clientRect = this.getBoundingClientRect();
-      const largestDimensionSize = Math.max(this.clientWidth, this.clientHeight);
-      const rippleSize = largestDimensionSize * 2;
-
-      UmRipple._setElementSquareSizeAndCenter(ripple, rippleSize);
-      ripple.style.setProperty('--_ripple-transition-duration', `${1080 * Math.pow(rippleSize, 0.3)}ms`);
-
-      const x = (targetX! - clientRect.left) + ((rippleSize - this.rippleContainer.clientWidth) / 2);
-      const y = (targetY! - clientRect.top) + ((rippleSize - this.rippleContainer.clientHeight) / 2);
-
-      ripple.style.transformOrigin = `${x}px ${y}px`;
-      ripple.classList.add(releaseEventName ? 'show' : 'show-forced');
-    });
-
-    const interval = setInterval(() => {
-
-      if (!ripple.classList.contains('dismiss') && !ripple.classList.contains('show-forced')) {
-        return;
-      }
-
-      const animations = ripple.getAnimations();
-
-      if (animations.length) {
-        return;
-      }
-
-      clearInterval(interval);
-      ripple.remove();
-    }, 1000);
-
-    if (!releaseEventName) {
-      return null;
-    }
-
-    return this.createDismissEvent(ripple, releaseEventName);
-  }
-
-  private createDismissEvent(ripple: HTMLElement, releaseEventName: string): () => void {
-    const dismiss = () => {
-      ripple.classList.add('dismiss');
-
-      this.isTouching = false;
-
-      this.removeEventListener('dragover', dismiss);
-      this.removeEventListener('mouseleave', dismiss);
-      window.removeEventListener(releaseEventName, dismiss);
-    }
-
-    this.addEventListener("dragover", dismiss);
-    this.addEventListener("mouseleave", dismiss);
-    window.addEventListener(releaseEventName, dismiss);
-
-    return dismiss;
-  }
-
-  private static _setElementSquareSizeAndCenter(element: HTMLElement, size: number) {
-    element.style.top = "50%";
-    element.style.left = "50%";
-    element.style.width = `${size}px`;
-    element.style.height = `${size}px`;
-    element.style.marginLeft = `${-size / 2}px`;
-    element.style.marginTop = `${-size / 2}px`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-ripple': UmRipple;
-  }
-}

package/src/shared/base.styles.scss

@@ -1,5 +0,0 @@
-:host,
-* {
-  font-family: var(--u-font-family-base, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
-  box-sizing: border-box;
-}

package/src/table/table-body.styles.scss

@@ -1,9 +0,0 @@
-@import "../utils";
-
-:host {
-  display: table-row-group;
-}
-
-::slotted(u-tr:not(:first-child)) {
-  border-top: 1px solid #{get-color-var(outline-variant)};
-}

package/src/table/table-body.ts

@@ -1,21 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import { styles as baseStyles } from '../shared/base.styles';
-import { styles } from './table-body.styles';
-
-@customElement('u-tbody')
-export class UmTableBody extends LitElement {
-
-  static override styles = [baseStyles, styles];
-
-  protected override render(): HTMLTemplateResult {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-tbody': UmTableBody;
-  }
-}

package/src/table/table-cell.styles.scss

@@ -1,9 +0,0 @@
-@import "../utils";
-
-:host {
-  display: table-cell;
-  padding: var(--u-td-padding, 13px 16px);
-  font-size: var(--u-td-font-size, .875rem);
-  font-weight: var(--u-td-font-weight, #{get-font-weight-var(medium)});
-  text-align: start;
-}

package/src/table/table-cell.ts

@@ -1,21 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import { styles as baseStyles } from '../shared/base.styles';
-import { styles } from './table-cell.styles';
-
-@customElement('u-td')
-export class UmTableCell extends LitElement {
-
-  static override styles = [baseStyles, styles];
-
-  protected override render(): HTMLTemplateResult {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-td': UmTableCell;
-  }
-}

package/src/table/table-head.styles.scss

@@ -1,9 +0,0 @@
-@import "../utils";
-
-:host {
-  display: table-header-group;
-}
-
-::slotted(u-tr:not(:first-child)) {
-  border-top: 1px solid #{get-color-var(outline-variant)};
-}

package/src/table/table-head.ts

@@ -1,21 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import { styles as baseStyles } from '../shared/base.styles';
-import { styles } from './table-head.styles';
-
-@customElement('u-thead')
-export class UmTableHead extends LitElement {
-
-  static override styles = [baseStyles, styles];
-
-  protected override render(): HTMLTemplateResult {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-thead': UmTableHead;
-  }
-}

package/src/table/table-header-cell.styles.scss

@@ -1,10 +0,0 @@
-@import "../utils";
-
-:host {
-  display: table-cell;
-  padding: var(--u-th-padding, 13px 16px);
-  font-size: var(--u-th-font-size, .8125rem);
-  font-weight: var(--u-th-font-weigh, #{get-font-weight-var(medium)});
-  text-align: start;
-  color: var(--u-low-emphasis-color, #{get-color-var(on-surface-variant)});
-}

package/src/table/table-header-cell.ts

@@ -1,21 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import { styles as baseStyles } from '../shared/base.styles';
-import { styles } from './table-header-cell.styles';
-
-@customElement('u-th')
-export class UmTableHeaderCell extends LitElement {
-
-  static override styles = [baseStyles, styles];
-
-  protected override render(): HTMLTemplateResult {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-th': UmTableHeaderCell;
-  }
-}

package/src/table/table-row.styles.scss

@@ -1,3 +0,0 @@
-:host {
-  display: table-row;
-}

package/src/table/table-row.ts

@@ -1,21 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-
-import { styles as baseStyles } from '../shared/base.styles';
-import { styles } from './table-row.styles';
-
-@customElement('u-tr')
-export class UmTableRow extends LitElement {
-
-  static override styles = [baseStyles, styles];
-
-  protected override render(): HTMLTemplateResult {
-    return html`<slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-tr': UmTableRow;
-  }
-}

package/src/table/table.styles.scss

@@ -1,12 +0,0 @@
-:host {
-  display: table;
-  min-width: 100%;
-  border-collapse: collapse;
-}
-
-::slotted(u-thead:not(:first-child)),
-::slotted(u-tbody:not(:first-child)),
-::slotted(u-tfooter:not(:first-child)),
-::slotted(u-tr:not(:first-child)) {
-  border-top: 1px solid #{get-color-var(outline-variant)};
-}

package/src/theme/color.ts

@@ -1,6 +0,0 @@
-export interface Color {
-  name: string;
-  fixedTone?: number;
-  lightTone?: number;
-  darkTone?: number;
-}

package/src/theme/css-var-builder.ts

@@ -1,36 +0,0 @@
-import { hexFromArgb } from '@material/material-color-utilities';
-
-import { RgbColor } from './rgb-color.js';
-
-export class CssVarBuilder {
-
-  private content = '';
-
-  private constructor() {
-  }
-
-  static create(): CssVarBuilder {
-    return new CssVarBuilder();
-  }
-
-  add(name: string, value: string): CssVarBuilder {
-
-    const cssVar = `  ${name}: ${value};
-`;
-
-    this.content += cssVar
-
-    return this;
-  }
-
-  addFromArgb(name: string, argb: number): CssVarBuilder {
-    this.add(`--u-color-${name}`, hexFromArgb(argb));
-    this.add(`--u-color-${name}-rgb`, RgbColor.fromArgb(argb).toString());
-
-    return this;
-  }
-
-  build(): string {
-    return this.content;
-  }
-}

package/src/theme/neutral-colors.ts

@@ -1,21 +0,0 @@
-import {Color} from './color.js';
-
-export const neutralColors: Color[] = [
-  { name: 'surface', lightTone: 98, darkTone: 6 },
-  { name: 'surface-bright', lightTone: 98, darkTone: 24 },
-  { name: 'surface-dim', lightTone: 87, darkTone: 6 },
-  { name: 'surface-container-lowest', lightTone: 100, darkTone: 4 },
-  { name: 'surface-container-low', lightTone: 96, darkTone: 10 },
-  { name: 'surface-container', lightTone: 94, darkTone: 12 },
-  { name: 'surface-container-high', lightTone: 92, darkTone: 17 },
-  { name: 'surface-container-highest', lightTone: 90, darkTone: 22 },
-  { name: 'on-surface', lightTone: 10, darkTone: 90 },
-  { name: 'scrim', fixedTone: 0 },
-  { name: 'shadow', fixedTone: 0 },
-]
-
-export const neutralVariantColors: Color[] = [
-  { name: 'on-surface-variant', lightTone: 30, darkTone: 80 },
-  { name: 'outline', lightTone: 50, darkTone: 60 },
-  { name: 'outline-variant', lightTone: 80, darkTone: 30 }
-]

package/src/theme/rgb-color.ts

@@ -1,19 +0,0 @@
-import { blueFromArgb, greenFromArgb, redFromArgb } from '@material/material-color-utilities';
-
-export class RgbColor {
-  r: number;
-  g: number;
-  b: number;
-
-  constructor(r: number, g: number, b: number) {
-    this.r = r;
-    this.g = g;
-    this.b = b;
-  }
-
-  static fromArgb(argb: number): RgbColor {
-    return new RgbColor(redFromArgb(argb), greenFromArgb(argb), blueFromArgb(argb));
-  }
-
-  toString = (): string => `${this.r},${this.g},${this.b}`;
-}