@universal-material/web 3.0.8 → 3.0.10

package/src/container/container.styles.scss

@@ -0,0 +1,39 @@
+: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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,13 @@
+@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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,31 @@
+@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

@@ -0,0 +1,17 @@
+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/{index.js → src/index.ts}

@@ -9,6 +9,7 @@ import './divider/divider.js';
 import './elevation/elevation.js';
 import './ripple/ripple.js';
 import './table/table.js';
+
 export * from './button/button-base.js';
 export * from './button/button.js';
 export * from './button/fab.js';
@@ -24,4 +25,3 @@ export * from './elevation/elevation.js';
 export * from './ripple/ripple.js';
 export * from './table/table.js';
 export * from './theme/theme-builder.js';
-//# sourceMappingURL=index.js.map

package/src/ripple/ripple.styles.scss

@@ -0,0 +1,80 @@
+@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

@@ -0,0 +1,150 @@
+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

@@ -0,0 +1,5 @@
+: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

@@ -0,0 +1,9 @@
+@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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,9 @@
+@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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,9 @@
+@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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,10 @@
+@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

@@ -0,0 +1,21 @@
+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

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

package/src/table/table-row.ts

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,12 @@
+: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/{table/table.js → src/table/table.ts}

@@ -1,4 +1,5 @@
-import { html, LitElement } from 'lit';
+import { html, HTMLTemplateResult, LitElement } from 'lit';
+
 import './table-head.js';
 import './table-body.js';
 import './table-row.js';
@@ -6,14 +7,22 @@ import './table-cell.js';
 import './table-header-cell.js';
 import { styles as baseStyles } from '../shared/base.styles';
 import { styles } from './table.styles';
+
 export class UmTable extends LitElement {
-    render() {
-        return html `
+  static override styles = [baseStyles, styles];
+
+  protected override render(): HTMLTemplateResult {
+    return html`
       <slot name="header"></slot>
       <slot></slot>
 `;
-    }
+  }
 }
-UmTable.styles = [baseStyles, styles];
+
 customElements.define('u-table', UmTable);
-//# sourceMappingURL=table.js.map
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-table': UmTable;
+  }
+}

package/src/theme/color.ts

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

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

@@ -0,0 +1,36 @@
+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/{theme/index.js → src/theme/index.ts}

@@ -1,2 +1 @@
 export * from './theme-builder.js';
-//# sourceMappingURL=index.js.map

package/src/theme/neutral-colors.ts

@@ -0,0 +1,21 @@
+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 }
+]