@universal-material/web 3.0.8 → 3.0.9

package/src/button/button.styles.scss

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

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

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

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

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

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

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

package/src/card/card-content.ts

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

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

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

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

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

@@ -0,0 +1,77 @@
+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;
+  }
+}