@universal-material/web 3.0.10 → 3.0.12

package/src/button/button.styles.scss

@@ -1,97 +0,0 @@
-@import "../utils";
-
-:host {
-  --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);
-  --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);
-  --u-common-button-font-weight: #{get-font-weight-var(medium)};
-  --_common-button-height: var(--u-common-button-height, 2.5rem);
-  --_common-button-padding: var(--u-common-button-padding, 24px);
-  --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);
-
-  border-radius: var(--u-common-button-shape-corner, #{get-shaper-corner-var(full)});
-  font-family: var(--u-font-family-base, system-ui);
-  height: var(--u-common-button-height, 40px);
-  font-size: var(--u-common-button-font-size);
-  font-weight: var(--u-common-button-font-weight);
-  padding-inline: var(--_common-button-padding);
-  box-sizing: border-box;
-}
-
-:host([variant=filled]),
-:host([variant=filled][color=primary]) {
-  background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));
-  color: var(--u-filled-button-primary-text-color, #{get-color-var(on-primary)});
-}
-
-:host([variant=filled][color=secondary]) {
-  background-color: var(--u-filled-button-secondary-container-color, #{get-color-var(secondary)});
-  color: var(--u-filled-button-secondary-text-color, #{get-color-var(on-secondary)});
-}
-
-:host([variant=filled][color=tertiary]) {
-  background-color: var(--u-filled-button-tertiary-container-color, #{get-color-var(tertiary)});
-  color: var(--u-filled-button-tertiary-text-color, #{get-color-var(on-tertiary)});
-}
-
-:host([variant=filled][color=error]) {
-  background-color: var(--u-filled-button-error-container-color, #{get-color-var(error)});
-  color: var(--u-filled-button-error-text-color, #{get-color-var(on-error)});
-}
-
-:host([variant=tonal]) {
-  background-color: var(--u-tonal-button-background-color, #{get-color-var(secondary-container)});
-  color: var(--u-tonal-button-text-color, #{get-color-var(on-secondary-container)});
-}
-
-:host([variant=elevated]) {
-  background-color: var(--u-elevated-button-background-color, #{get-color-var(surface-container-low)});
-  color: var(--u-tonal-button-text-color, #{get-color-var(on-secondary-container)});
-}
-
-@media (hover: hover) {
-  :host([variant=filled]:hover:not(:focus-within):not(:active)),
-  :host([variant=tonal]:hover:not(:focus-within):not(:active)) {
-    --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);
-  }
-}
-
-:host([variant=outlined]),
-:host([variant=text]),
-:host([variant=elevated]) {
-  color: var(--_color-primary);
-}
-
-:host([variant=outlined]) {
-  border: 1px solid #{get-color-var(outline-color)};
-}
-
-:host([variant=elevated]) {
-  --u-elevation-level: var(--u-elevated-button-elevation-level, 1);
-}
-
-@media (hover: hover) {
-  :host([variant=elevated]:hover) {
-    --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);
-  }
-}
-
-:host([has-icon]) {
-  padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);
-}
-
-:host([has-icon][trailing-icon]) {
-  padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);
-}
-
-::slotted([slot=icon]) {
-  display: inline-block;
-  width: var(--u-common-button-icon-size, 1.125rem);
-  height: var(--u-common-button-icon-size, 1.125rem);
-  margin-inline-end: 8px;
-  font-size: var(--u-common-button-icon-size, 1.125rem);
-  line-height: var(--u-common-button-icon-size, 1.125rem);
-}
-
-:host([trailing-icon]) ::slotted([slot=icon]) {
-  margin-inline: 8px 0;
-}

package/src/button/button.ts

@@ -1,64 +0,0 @@
-import { CSSResult, html, HTMLTemplateResult, nothing } from 'lit';
-import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
-
-import { UmButtonBase } from './button-base';
-import { styles as buttonBaseStyles } from './button-base.styles';
-import { styles } from './button.styles';
-import '../ripple/ripple.js';
-
-export type UmButtonVariant = 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';
-export type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | undefined;
-
-@customElement('u-button')
-export class UmButton extends UmButtonBase {
-
-  static override styles: CSSResult | CSSResult[] = [buttonBaseStyles, styles];
-
-  /**
-   * The Button variant to render
-   */
-  @property({reflect: true}) variant: UmButtonVariant = 'filled';
-
-  /**
-   * The Button color
-   *
-   * _Note:_ Filled buttons only
-   */
-  @property({reflect: true}) color: UmButtonColor;
-
-  @property({type: Boolean, attribute: 'trailing-icon', reflect: true}) trailingIcon = false;
-
-  /**
-   * Whether the button has icon or not
-   *
-   * _Note:_ Readonly
-   */
-  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon = false;
-
-  @queryAssignedElements({slot: 'icon', flatten: true})
-  private readonly assignedIcons!: HTMLElement[];
-
-  protected override renderContent(): HTMLTemplateResult {
-    const icon = html`
-      <slot
-        name="icon"
-        aria-hidden="true"
-        @slotchange="${this.handleSlotChange}"></slot>`;
-
-    return html`
-      ${this.trailingIcon ? nothing : icon}
-      <span><slot></slot></span>
-      ${this.trailingIcon ? icon : nothing}
-    `;
-  }
-
-  private handleSlotChange() {
-    this.hasIcon = this.assignedIcons.length > 0;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-button': UmButton;
-  }
-}

package/src/button/fab.styles.scss

@@ -1,90 +0,0 @@
-@import "../utils";
-
-:host {
-  aspect-ratio: 1;
-  --u-elevation-level: var(--u-fab-button-elevation-level, 3);
-}
-
-:host([lowered]) {
-  --u-elevation-level: var(--u-fab-button-elevation-level, 1);
-}
-
-@media (hover: hover) {
-  :host(:hover:not(:focus-within):not(:active)) {
-    --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);
-  }
-
-  :host(:hover:not(:focus-within):not(:active)[lowered]) {
-    --u-elevation-level: var(--u-fab-button-elevation-level, 2);
-  }
-}
-
-@media (hover: hover) {
-  :host(:hover:not(:focus-within):not(:active)) {
-    --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);
-  }
-}
-
-:host([size="small"]) {
-  width: var(--u-fab-button-small-size, 40px);
-  border-radius: var(--u-fab-button-medium-shape-corner, #{get-shaper-corner-var(medium)});
-}
-
-:host([size="large"]) {
-  width: var(--u-fab-button-medium-size, 96px);
-  border-radius: var(--u-fab-button-medium-shape-corner, #{get-shaper-corner-var(extra-large)});
-}
-
-:host([extended]),
-:host([size="medium"]) {
-  width: var(--u-fab-button-medium-size, 56px);
-  border-radius: var(--u-fab-button-medium-shape-corner, #{get-shaper-corner-var(large)});
-}
-
-:host([size="large"]) .icon {
-  font-size: var(--u-fab-button-icon-size, 2rem);
-}
-
-:host([extended]) .icon,
-:host([size="small"]) .icon,
-:host([size="medium"]) .icon {
-  font-size: var(--u-fab-button-icon-size, 1.5rem);
-}
-
-:host([extended]) {
-  width: auto;
-  height: var(--u-extended-fab-button-height, 56px);
-  aspect-ratio: auto;
-  min-width: var(--u-extended-fab-button-min-width, 80px);
-  padding-inline: var(--u-extended-fab-button-padding, 16px 24px);
-}
-
-:host([extended]) .icon {
-  margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);
-}
-
-:host([color="primary"]) {
-  background-color: var(--u-fab-button-primary-background-color, #{get-color-var(primary-container)});
-  color: var(--u-fab-button-primary-text-color, #{get-color-var(on-primary-container)});
-}
-
-:host([color="secondary"]) {
-  background-color: var(--u-fab-button-secondary-background-color, #{get-color-var(secondary-container)});
-  color: var(--u-fab-button-secondary-text-color, #{get-color-var(on-secondary-container)});
-}
-
-:host([color="tertiary"]) {
-  background-color: var(--u-fab-button-tertiary-background-color, #{get-color-var(tertiary-container)});
-  color: var(--u-fab-button-tertiary-text-color, #{get-color-var(on-tertiary-container)});
-}
-
-:host([color="branded"]),
-:host([color="surface"]) {
-  background-color: var(--u-fab-button-surface-background-color, #{get-color-var(surface-container-high)});
-  color: var(--u-fab-button-surface-text-color, var(--_color-primary));
-}
-
-:host([color="branded"][lowered]),
-:host([color="surface"][lowered]) {
-  background-color: var(--u-fab-button-surface-background-color, #{get-color-var(surface-container-low)});
-}

package/src/button/fab.ts

@@ -1,55 +0,0 @@
-import { CSSResult, html, HTMLTemplateResult, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import { UmButtonBase } from './button-base';
-import { styles as buttonBaseStyles } from './button-base.styles';
-import { styles } from './fab.styles';
-
-export type UmFabColor = 'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded';
-export type UmFabSize = 'small' | 'medium' | 'large';
-
-@customElement('u-fab')
-export class UmFab extends UmButtonBase {
-
-  static override styles: CSSResult | CSSResult[] = [buttonBaseStyles, styles];
-  
-  /**
-   * The FAB color variant to render.
-   */
-  @property({reflect: true}) color: UmFabColor = 'primary';
-
-  /**
-   * The size of the FAB.
-   */
-  @property({reflect: true}) size: UmFabSize = 'medium';
-
-  /**
-   * The text to display the FAB.
-   */
-  @property({reflect: true}) label: string | null = null;
-
-  /**
-   * Lowers the FAB's elevation.
-   */
-  @property({type: Boolean, reflect: true}) lowered = false;
-
-  @property({type: Boolean, reflect: true})
-  get extended(): boolean {
-    return !!this.label;
-  }
-
-  protected override renderContent(): HTMLTemplateResult {
-    const labelTag = html`<span>${this.label}</span>`;
-
-    return html`
-      <span class="icon" aria-hidden="true"><slot></slot></span>
-      ${this.label ? labelTag : nothing}
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-fab': UmFab;
-  }
-}

package/src/button/icon-button.styles.scss

@@ -1,74 +0,0 @@
-@import "../utils";
-
-:host {
-  --_surface-container-highest-color: #{get-color-var(surface-container-highest)};
-
-  width: var(--u-icon-button-size, 2.5rem);
-  height: var(--u-icon-button-size, 2.5rem);
-  border-radius: var(--u-icon-button-shape-corner, 9999px);
-  font-family: var(--u-font-family-base, system-ui);
-
-}
-
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--u-icon-button-icon-size, 1.5rem);
-  line-height: var(--u-icon-button-icon-size, 1.5rem);
-
-  &.icon-selected {
-    display: none;
-  }
-}
-
-:host([selected]) {
-  .icon:not(.icon-selected) {
-    display: none;
-  }
-
-  .icon.icon-selected {
-    display: inline-block;
-  }
-}
-
-:host([variant="filled"]) {
-  background-color: var(--u-filled-icon-button-unselected-background-color, var(--_surface-container-highest-color));
-  color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));
-}
-
-:host([variant="tonal"]) {
-  background-color: var(--u-total-icon-button-unselected-background-color, var(--_surface-container-highest-color));
-  color: var(--u-tonal-icon-button-unselected-text-color, #{get-color-var(on-surface-variant)});
-}
-
-:host([selected][variant="filled"]),
-:host([variant="filled"]:not([has-selection-icon])) {
-  background-color: var(--u-filled-icon-button-background-color, var(--_color-primary));
-  color: var(--u-filled-icon-button-text-color, #{get-color-var(on-primary)});
-}
-
-:host([selected][variant="tonal"]),
-:host([variant="tonal"]:not([has-selection-icon])) {
-  background-color: var(--u-tonal-icon-button-background-color, #{get-color-var(secondary-container)});
-  color: var(--u-tonal-icon-button-text-color, #{get-color-var(on-secondary-container)});
-}
-
-:host([variant="standard"]),
-:host([variant="outlined"]) {
-  color: #{get-color-var(on-surface-variant)};
-}
-
-:host([variant="outlined"]) {
-  border: 1px solid #{get-color-var(outline)};
-}
-
-:host([selected][variant="outlined"]) {
-  border: none;
-  background-color: var(--u-outlined-icon-button-selected-background-color, #{get-color-var(inverse-surface)});
-  color: var(--u-outlined-icon-button-selected-text-color, #{get-color-var(inverse-on-surface)});
-}
-
-:host([selected][variant="standard"]) {
-  color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));
-}

package/src/button/icon-button.ts

@@ -1,72 +0,0 @@
-import { CSSResult, html, HTMLTemplateResult, nothing } from 'lit';
-import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
-
-import '../ripple/ripple.js';
-import { UmButtonBase } from './button-base';
-import { styles as buttonBaseStyles } from './button-base.styles';
-import { styles } from './icon-button.styles';
-
-export type UmIconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
-
-@customElement('u-icon-button')
-export class UmIconButton extends UmButtonBase {
-
-  static override styles: CSSResult | CSSResult[] = [buttonBaseStyles, styles];
-
-  @property({reflect: true}) variant: UmIconButtonVariant = 'standard';
-
-  /**
-   * When true, the button will toggle between selected and unselected
-   * states
-   */
-  @property({type: Boolean}) toggle = false;
-
-  @property({type: Boolean, attribute: 'has-selection-icon', reflect: true}) hasSelectionIcon = false;
-
-  /**
-   * Sets the selected state. When false, displays the default icon. When true,
-   * displays the selected icon, or the default icon If no `slot="selected"`
-   * icon is provided.
-   */
-  @property({type: Boolean, reflect: true}) selected = false;
-
-  /**
-   * The `aria-label` of the button when the button is toggleable and selected.
-   */
-  @property({attribute: 'aria-label-selected'}) ariaLabelSelected = '';
-
-  @queryAssignedElements({slot: 'selected', flatten: true})
-  private readonly selectedIcons!: HTMLElement[];
-
-  protected override renderContent(): HTMLTemplateResult {
-
-    return html`
-      <span class="icon" aria-hidden="true"><slot></slot></span>
-      <span class="icon icon-selected" aria-hidden="true">
-        <slot name="selected" @slotchange="${this.handleSlotChange}"></slot>
-      </span>
-    `;
-  }
-
-  protected override handleClick(_: UIEvent): void {
-    if (this.toggle) {
-      this.selected = !this.selected;
-    }
-  }
-
-  override getAriaLabel(): string | null | typeof nothing {
-    return this.selected
-      ? this.ariaLabelSelected || super.getAriaLabel()
-      : super.getAriaLabel();
-  }
-
-  private handleSlotChange() {
-    this.hasSelectionIcon = this.selectedIcons.length > 0;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-icon-button': UmIconButton;
-  }
-}

package/src/card/card-content.styles.scss

@@ -1,11 +0,0 @@
-:host {
-  display: block;
-}
-
-:host(:has(slot > *)) {
-  display: none;
-}
-
-:host([has-content]) {
-  padding: var(--u-card-padding, 16px);
-}

package/src/card/card-content.ts

@@ -1,45 +0,0 @@
-import { HTMLTemplateResult, LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import { styles as baseStyles } from '../shared/base.styles';
-import { styles } from './card-content.styles';
-
-@customElement('u-card-content')
-export class UmCardContent extends LitElement {
-
-  static override styles = [baseStyles, styles];
-
-  @property({type: Boolean, attribute: 'has-content', reflect: true}) hasContent = false;
-
-  override render(): HTMLTemplateResult {
-    return html`
-      <slot @slotchange="${this.handleSlotChange}"></slot>`;
-  }
-
-  private handleSlotChange(e: Event) {
-    const slot = <HTMLSlotElement>e.target;
-
-    this.hasContent = slot.assignedElements({flatten: true}).length > 0;
-
-    if (this.hasContent) {
-      return;
-    }
-
-    const nodes = slot.assignedNodes({flatten: true});
-
-    for (const node of nodes) {
-      if (node.nodeValue?.trim()) {
-        this.hasContent = true;
-        return;
-      }
-    }
-
-    this.hasContent = false;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-card-content': UmCardContent;
-  }
-}

package/src/card/card-media.styles.scss

@@ -1,9 +0,0 @@
-:host {
-  display: block;
-  aspect-ratio: 1;
-  border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));
-}
-
-:host([wide]) {
-  aspect-ratio: 16/9;
-}

package/src/card/card-media.ts

@@ -1,24 +0,0 @@
-import { HTMLTemplateResult, LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import { styles as baseStyles } from '../shared/base.styles';
-import { styles } from './card-media.styles';
-
-@customElement('u-card-media')
-export class UmCardMedia extends LitElement {
-
-  static override styles = [baseStyles, styles];
-
-  @property({type: Boolean, reflect: true}) wide = false;
-
-  override render(): HTMLTemplateResult {
-    return html`
-      <slot></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-card-media': UmCardMedia;
-  }
-}

package/src/card/card.styles.scss

@@ -1,27 +0,0 @@
-@import "../utils";
-
-:host {
-  display: block;
-  position: relative;
-  border-radius: var(--u-card-shape-corner, #{get-shaper-corner-var(medium)});
-}
-
-:host(:not(:first-child)) {
-  margin-top: 8px;
-}
-
-:host([variant=elevated]) {
-  background-color: #{get-color-var(surface-container-low)};
-
-  u-elevation {
-    --u-elevation-level: var(--u-elevated-card-elevation-level, 1);
-  }
-}
-
-:host([variant=filled]) {
-  background-color: #{get-color-var(surface-container-highest)};
-}
-
-:host([variant=outlined]) {
-  border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, #{get-color-var(outline-variant)});
-}

package/src/card/card.ts

@@ -1,37 +0,0 @@
-import { html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-
-import { styles as baseStyles } from '../shared/base.styles';
-import { styles } from './card.styles';
-import './card-content.js';
-import './card-media.js';
-import '../elevation/elevation.js';
-
-export type UmCardVariant = 'filled' | 'elevated' | 'outlined';
-
-@customElement('u-card')
-export class UmCard extends LitElement {
-
-  static override styles = [baseStyles, styles];
-
-  /**
-   * The Card variant to render.
-   */
-  @property({reflect: true}) variant: UmCardVariant = 'elevated';
-
-  override render(): HTMLTemplateResult {
-    return html`
-      <u-elevation></u-elevation>
-      <slot name="before-content"></slot>
-      <u-card-content>
-        <slot></slot>
-      </u-card-content>
-      <slot name="after-content"></slot>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-card': UmCard;
-  }
-}

package/src/checkbox/checkbox.ts

@@ -1,77 +0,0 @@
-import { css, html, HTMLTemplateResult, LitElement } from 'lit';
-import { customElement, query, queryAssignedElements } from 'lit/decorators.js';
-
-import { UmRipple } from '../ripple/ripple';
-import { styles as baseStyles } from '../shared/base.styles';
-
-@customElement('u-checkbox')
-export class UmCheckbox extends LitElement {
-  static override styles = [
-    baseStyles,
-    css`
-      :host {
-        position: relative;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width: 48px;
-        height: 48px;
-      }
-      
-      ::slotted(input) {
-        position: relative;
-        padding: 0;
-        margin: 0;
-        aspect-ratio: 1;
-        height: 100%;
-        z-index: 1;
-        appearance: none;
-      }
-      
-      .touch {
-        position: absolute;
-        inset: 0;
-        border-radius: 9999px;
-      }
-    `
-  ];
-
-  @query('u-ripple') private readonly ripple!: UmRipple;
-  @queryAssignedElements({selector: 'input', flatten: true})
-  private readonly assignedInputs!: HTMLInputElement[];
-
-  private input: HTMLInputElement | undefined;
-
-  override render(): HTMLTemplateResult {
-    return html`
-      <div class="touch">
-        <u-ripple><slot @slotchange="${this.handleSlotChange}"></slot></u-ripple>
-      </div>`;
-  }
-
-  private handleSlotChange(): void {
-    console.log('slotchange');
-
-    if (this.input) {
-      this.input.removeEventListener('click', this.handleInputChange);
-    }
-
-    this.input = this.assignedInputs[0];
-
-    if (this.input) {
-      this.input.addEventListener('click', this.handleInputChange);
-    }
-  }
-
-  private handleInputChange = (e: MouseEvent) => {
-    if (this.input !== document.elementFromPoint(e.clientX, e.clientY)) {
-      this.ripple.createRipple();
-    }
-  };
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'u-checkbox': UmCheckbox;
-  }
-}