@universal-material/web 3.0.139 → 3.0.140

package/src/tab-bar/tab.ts

@@ -0,0 +1,113 @@
+import { html, HTMLTemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import { UmButtonWrapper } from '../shared/button-wrapper.js';
+import { UmTabBar } from './tab-bar.js';
+import { styles } from './tab.styles.js';
+
+@customElement('u-tab')
+export class UmTab extends UmButtonWrapper {
+  static override styles = [UmButtonWrapper.styles, styles];
+
+  _bar: UmTabBar | null = null;
+
+  readonly #resizeObserver: ResizeObserver = new ResizeObserver(() => {
+    if (this.active) {
+      this._bar?._updateTabIndicator();
+    }
+  });
+
+  @state()
+  get active(): boolean {
+    return this._bar?.activeTab === this;
+  }
+
+  set active(active: boolean) {
+    if (!this._bar) {
+      return;
+    }
+
+    if (active) {
+      this._bar.activeTab = this;
+      return;
+    }
+
+    this._bar.activeTabIndex = 0;
+  }
+
+  @property({ type: Boolean }) hasIcon = false;
+
+  constructor() {
+    super();
+    this.#resizeObserver.observe(this);
+  }
+
+  protected override renderContent(): HTMLTemplateResult {
+    const classes = { active: this.active, ['has-icon']: this.hasIcon };
+
+    return html`
+      <div class="tab-content ${classMap(classes)}">
+        <div class="icon" part="icon">
+          <slot name="icon" @slotchange=${this.#iconSlotChange}></slot>
+        </div>
+        <div class="label" part="label">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._bar?._updateTabIndicator();
+    this._bar?._setScrollIndicatorsActive();
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (!this._bar) {
+      return;
+    }
+
+    if (this._bar.activeTab === this) {
+      this._bar.activeTabIndex = 0;
+    }
+
+    this._bar._updateTabIndicator();
+    this._bar._setScrollIndicatorsActive();
+
+    this._bar = null;
+  }
+
+  protected override handleClick(_: UIEvent) {
+    super.handleClick(_);
+
+    if (!this._bar) {
+      return;
+    }
+
+    const changePrevented = !this._bar.dispatchEvent(
+      new Event('changing', { bubbles: true, cancelable: true }),
+    );
+
+    if (changePrevented) {
+      return;
+    }
+
+    this._bar.activeTab = this;
+    this._bar.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  #iconSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this.hasIcon = !!slot.assignedElements({ flatten: true }).length;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-tab': UmTab;
+  }
+}

package/src/text-area/text-area.styles.scss

@@ -0,0 +1,46 @@
+@use "../scss/api";
+
+:host {
+  resize: both;
+}
+
+.container,
+.input-wrapper {
+  resize: inherit;
+}
+
+.input-wrapper,
+.input,
+textarea,
+.container {
+  height: 100%;
+}
+
+.input-wrapper {
+  padding: 0 !important;
+  overflow: hidden;
+}
+
+textarea {
+  margin: 0;
+  resize: none;
+}
+
+.input {
+  textarea {
+    border-block: var(--_vertical-padding) solid transparent;
+    padding-inline: var(--_field-control-inline-padding);
+  }
+}
+
+
+.container {
+  &.filled {
+    &:not(.no-label) {
+      textarea {
+        border-top: calc(var(--_vertical-padding) + var(--_label-line-height)) solid transparent;
+        border-bottom: var(--_vertical-padding) solid transparent;
+      }
+    }
+  }
+}

package/src/text-area/text-area.ts

@@ -0,0 +1,46 @@
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+
+import { html, HTMLTemplateResult, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+
+import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
+import { styles } from './text-area.styles.js';
+
+@customElement('u-text-area')
+export class UmTextArea extends UmNativeTextFieldWrapper {
+  static override styles: CSSResultGroup = [UmTextFieldBase.styles, styles];
+
+  @property({ type: Number }) rows = 2;
+
+  @query('textarea') override input!: HTMLTextAreaElement;
+
+  protected override renderControl(): HTMLTemplateResult {
+    return html`
+      <div class="input">
+        <textarea
+          part="input"
+          id=${this.id || nothing}
+          aria-labelledby="label"
+          aria-describedBy="supporting-text"
+          ?disabled=${this.disabled}
+          spellcheck=${this.spellcheck}
+          autocomplete=${this.autocomplete}
+          autocapitalize=${this.autocapitalize}
+          role=${this.role ?? nothing}
+          maxlength=${this.maxlength ?? nothing}
+          .rows=${this.rows}
+          .placeholder=${this.placeholder}
+          .value=${live(this._value)}
+          @input=${this._handleInput}></textarea>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-text-area': UmTextArea;
+  }
+}

package/src/text-field/text-field.styles.scss

@@ -0,0 +1,55 @@
+@use "../scss/api";
+
+.prefix,
+.suffix {
+
+  &::slotted(*),
+  span {
+    transition: opacity 150ms 100ms;
+  }
+
+  span:empty {
+    display: none;
+  }
+}
+
+.prefix::slotted(*),
+.prefix span {
+  color: var(--u-field-prefix-color, var(--u-field-affix-color, #{api.get-color-var(on-surface-variant)}));
+  margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));
+}
+
+.suffix::slotted(*),
+.suffix span {
+  color: var(--u-field-suffix-color, var(--u-field-affix-color, #{api.get-color-var(on-surface-variant)}));
+  margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));
+}
+
+:host([disabled]) {
+  .prefix {
+    span,
+    &::slotted(*) {
+      color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, #{api.get-color-transparency-mix(api.get-color-var(on-surface), var(--u-field-disabled-opacity, 38%))}));
+    }
+  }
+
+  .suffix {
+    span,
+    &::slotted(*) {
+      color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, #{api.get-color-transparency-mix(api.get-color-var(on-surface), var(--u-field-disabled-opacity, 38%))}));
+    }
+  }
+}
+
+:host([empty]:not(:focus-within)) {
+  .container:not(.no-label) {
+    .suffix,
+    .prefix {
+      &::slotted(*),
+      span {
+        opacity: 0;
+        transition: opacity 150ms;
+      }
+    }
+  }
+}

package/src/text-field/text-field.ts

@@ -0,0 +1,57 @@
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+
+import { html, HTMLTemplateResult, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+
+import { UmNativeTextFieldWrapper } from '../shared/char-count-text-field/native-text-field-wrapper.js';
+import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
+import { styles } from './text-field.styles.js';
+
+@customElement('u-text-field')
+export class UmTextField extends UmNativeTextFieldWrapper {
+  static override styles: CSSResultGroup = [UmTextFieldBase.styles, styles];
+
+  @property() type = 'text';
+  @property({ attribute: 'prefix-text' }) prefixText: string | undefined;
+  @property({ attribute: 'suffix-text' }) suffixText: string | undefined;
+  @property({ type: Boolean, reflect: true }) readOnly = false;
+  @property({ reflect: true }) override autocapitalize!: string;
+
+  @query('input') input!: HTMLInputElement;
+
+  protected override renderControl(): HTMLTemplateResult {
+    return html`
+      <slot class="prefix" name="prefix">
+        <span>${this.prefixText}</span>
+      </slot>
+      <div class="input">
+        <input
+          type=${this.type}
+          part="input"
+          id=${this.id || nothing}
+          aria-labelledby="label"
+          aria-describedBy="supporting-text"
+          ?readonly=${this.readOnly}
+          ?disabled=${this.disabled}
+          spellcheck=${this.spellcheck}
+          autocomplete=${this.autocomplete}
+          autocapitalize=${this.autocapitalize}
+          role=${this.role}
+          maxlength=${this.maxlength ?? nothing}
+          .placeholder=${this.placeholder}
+          .value=${live(this._value)}
+          @input=${this._handleInput} />
+      </div>
+      <slot class="suffix" name="suffix">
+        <span>${this.suffixText}</span>
+      </slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-text-field': UmTextField;
+  }
+}

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,39 @@
+import { hexFromArgb } from '@material/material-color-utilities';
+
+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));
+
+    return this;
+  }
+
+  addLightAndDarkFromArgb(name: string, lightArgb: number, darkArgb: number): CssVarBuilder {
+    this.add(`--u-color-${name}`, `light-dark(${hexFromArgb(lightArgb)}, ${hexFromArgb(darkArgb)})`);
+
+    return this;
+  }
+
+  build(): string {
+    return this.content;
+  }
+}

package/src/theme/index.ts

@@ -0,0 +1 @@
+export * from './theme-builder.js';

package/src/theme/neutral-colors.ts

@@ -0,0 +1,26 @@
+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: 'light', fixedTone: 98 },
+  { name: 'on-light', fixedTone: 10 },
+  { name: 'dark', fixedTone: 6 },
+  { name: 'on-dark', fixedTone: 90 },
+  { name: 'scrim', fixedTone: 0 },
+  { name: 'shadow', fixedTone: 0 },
+];
+
+export const neutralVariantColors: Color[] = [
+  { name: 'surface-variant', lightTone: 90, darkTone: 30 },
+  { name: 'on-surface-variant', lightTone: 30, darkTone: 80 },
+  { name: 'outline', lightTone: 50, darkTone: 60 },
+  { name: 'outline-variant', lightTone: 80, darkTone: 30 },
+];

package/src/theme/theme-builder.ts

@@ -0,0 +1,197 @@
+import { argbFromHex, CorePalette, TonalPalette } from '@material/material-color-utilities';
+
+import { Color } from './color.js';
+import { CssVarBuilder } from './css-var-builder.js';
+import { neutralColors, neutralVariantColors } from './neutral-colors.js';
+import { ThemeColor } from './theme-color.js';
+
+const getCss = (selector: string, content: string): string =>
+  `${selector} {
+${content}}`;
+
+export class ThemeBuilder {
+  cssClass: string | null;
+  colors: ThemeColor[] = [];
+
+  private partial = false;
+  readonly #corePalette: CorePalette;
+
+  private constructor(primaryColorHex: string) {
+    this.cssClass = null;
+
+    this.#corePalette = CorePalette.of(argbFromHex(primaryColorHex));
+    this.addColorFromPalette('primary', this.#corePalette.a1);
+  }
+
+  static create(primaryColorHex: string): ThemeBuilder {
+    return new ThemeBuilder(primaryColorHex);
+  }
+
+  static createPartial(primaryColorHex: string): ThemeBuilder {
+    const themeBuilder = new ThemeBuilder(primaryColorHex);
+    themeBuilder.partial = true;
+
+    return themeBuilder;
+  }
+
+  addColorFromHex(name: string, hex: string): ThemeBuilder {
+    const palette = TonalPalette.fromInt(argbFromHex(hex));
+
+    this.addColorFromPalette(name, palette);
+    return this;
+  }
+
+  addColorFromPalette(name: string, palette: TonalPalette): ThemeBuilder {
+    this.colors.push({ name, lightTone: 40, darkTone: 80, tonalPalette: palette });
+    this.colors.push({ name: `on-${name}`, lightTone: 100, darkTone: 20, tonalPalette: palette });
+    this.colors.push({ name: `${name}-container`, lightTone: 90, darkTone: 30, tonalPalette: palette });
+    this.colors.push({ name: `on-${name}-container`, lightTone: 10, darkTone: 90, tonalPalette: palette });
+
+    this.colors.push({ name: `${name}-fixed`, fixedTone: 90, tonalPalette: palette });
+    this.colors.push({ name: `${name}-fixed-dim`, fixedTone: 80, tonalPalette: palette });
+    this.colors.push({ name: `on-${name}-fixed`, fixedTone: 10, tonalPalette: palette });
+    this.colors.push({ name: `on-${name}-fixed-variant`, fixedTone: 30, tonalPalette: palette });
+    return this;
+  }
+
+  addStaticColor(name: string, hex: string, tone: number = 80): ThemeBuilder {
+    const palette = TonalPalette.fromInt(argbFromHex(hex));
+    this.colors.push({ name, fixedTone: tone, tonalPalette: palette });
+    this.colors.push({ name: `on-${name}`, fixedTone: 15, tonalPalette: palette });
+    this.colors.push({ name: `${name}-container`, fixedTone: 90, tonalPalette: palette });
+    this.colors.push({ name: `on-${name}-container`, fixedTone: 15, tonalPalette: palette });
+    return this;
+  }
+
+  setCssClass(cssClass: string): ThemeBuilder {
+    this.cssClass = cssClass;
+    return this;
+  }
+
+  private ensureCssClassStartsWithDot(): void {
+    if (!this.cssClass || this.cssClass.startsWith('.')) {
+      return;
+    }
+
+    this.cssClass = `.${this.cssClass}`;
+  }
+
+  private ensureThemeColors(): void {
+    if (!this.colors.find(c => c.name === 'secondary')) {
+      this.addColorFromPalette('secondary', this.#corePalette.a2);
+    }
+
+    if (!this.colors.find(c => c.name === 'tertiary')) {
+      this.addColorFromPalette('tertiary', this.#corePalette.a3);
+    }
+  }
+
+  private ensureStatusColors(): void {
+    if (!this.colors.find(c => c.name === 'success')) {
+      this.addStaticColor('success', '#198754', 60);
+    }
+
+    if (!this.colors.find(c => c.name === 'info')) {
+      this.addStaticColor('info', '#0dcaf0');
+    }
+
+    if (!this.colors.find(c => c.name === 'warning')) {
+      this.addStaticColor('warning', '#ffc107');
+    }
+
+    if (!this.colors.find(c => c.name === 'error')) {
+      this.addColorFromHex('error', '#b3261e');
+    }
+  }
+
+  private getNeutralVariables(): string {
+    const builder = CssVarBuilder.create();
+
+    this.addColors(builder, neutralColors, this.#corePalette.n1);
+
+    builder
+      .add('--u-color-body', 'var(--u-color-surface)')
+      .add('--u-color-body-rgb', 'var(--u-color-surface-rgb)')
+      .add('--u-color-inverse-body', 'var(--u-color-inverse-surface)')
+      .add('--u-color-inverse-body-rgb', 'var(--u-color-inverse-surface-rgb)')
+      .add('--u-color-on-body', 'var(--u-color-on-surface)')
+      .add('--u-color-on-body-rgb', 'var(--u-color-on-surface-rgb)')
+      .add('--u-color-on-inverse-body', 'var(--u-color-on-inverse-surface)')
+      .add('--u-color-on-inverse-body-rgb', 'var(--u-color-on-inverse-surface-rgb)')
+      .add('--u-current-text-color', 'var(--u-color-on-body)')
+      .add('--u-current-text-color-rgb', 'var(--u-color-on-body-rgb)');
+
+    return builder.build();
+  }
+
+  private getNeutralVariantVariables(): string {
+    const builder = CssVarBuilder.create();
+
+    this.addColors(builder, neutralVariantColors, this.#corePalette.n2);
+
+    return builder.build();
+  }
+
+  getColorVariables(color: ThemeColor): string {
+    const builder = CssVarBuilder.create();
+
+    this.addToneColor(builder, color, color.tonalPalette);
+
+    return builder.build();
+  }
+
+  private getColorsVariables(): string {
+    let variables = '';
+
+    for (const color of this.colors) {
+      variables += this.getColorVariables(color);
+    }
+
+    variables += this.getNeutralVariables();
+    variables += this.getNeutralVariantVariables();
+
+    return variables;
+  }
+
+  private addColors(builder: CssVarBuilder, colors: Color[], palette: TonalPalette): void {
+    for (const color of colors) {
+      this.addToneColor(builder, color, palette);
+    }
+  }
+
+  private addToneColor(builder: CssVarBuilder, color: Color, palette: TonalPalette): void {
+    if (color.fixedTone !== undefined) {
+      builder.addFromArgb(color.name, palette.tone(color.fixedTone));
+      return;
+    }
+
+    const inverseName = `inverse-${color.name}`.replace('inverse-on', 'on-inverse');
+
+    builder
+      .addLightAndDarkFromArgb(color.name, palette.tone(color.lightTone!), palette.tone(color.darkTone!))
+      .addLightAndDarkFromArgb(inverseName, palette.tone(color.darkTone!), palette.tone(color.lightTone!));
+
+    if (color.name === 'surface' || color.name === 'on-surface') {
+      const prefix = color.name.startsWith('on-') ? 'on-' : '';
+
+      builder.addFromArgb(`${prefix}light-surface`, palette.tone(color.lightTone!));
+      builder.addFromArgb(`${prefix}dark-surface`, palette.tone(color.darkTone!));
+    }
+  }
+
+  build(): string {
+    this.ensureCssClassStartsWithDot();
+
+    const selector = this.cssClass ?? ':root';
+
+    this.ensureThemeColors();
+
+    if (!this.partial) {
+      this.ensureStatusColors();
+    }
+
+    const variables = `${getCss(selector, this.getColorsVariables())}
+`;
+    return variables;
+  }
+}

package/src/theme/theme-color.ts

@@ -0,0 +1,7 @@
+import { TonalPalette } from '@material/material-color-utilities';
+
+import { Color } from './color.js';
+
+export interface ThemeColor extends Color {
+  tonalPalette: TonalPalette;
+}

package/src/typeahead/highlight.styles.scss

@@ -0,0 +1,3 @@
+:host {
+  display: inline-block;
+}

package/src/typeahead/highlight.ts

@@ -0,0 +1,79 @@
+import { html, HTMLTemplateResult, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+import { normalizeText } from '../shared/normalize-text.js';
+import { styles } from './highlight.styles.js';
+
+const regExpEscape = (text: string) =>
+  text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+
+@customElement('u-highlight')
+export class UmHighlight extends LitElement {
+  static override styles = styles;
+
+  #result: string | undefined;
+  #term: string | undefined;
+  @state() private parts: string[] | undefined;
+
+  /**
+   * The result text to display. If the term is found inside this text, it's highlighted
+   */
+  @property()
+  get result(): string | undefined {
+    return this.#result;
+  }
+
+  set result(value: string | undefined) {
+    this.#result = value;
+
+    this.setParts();
+  }
+
+  /**
+   * The searched term
+   */
+  @property()
+  get term(): string | undefined {
+    return this.#term;
+  }
+
+  set term(value: string | undefined) {
+    this.#term = value;
+
+    this.setParts();
+  }
+
+  protected override render(): HTMLTemplateResult | HTMLTemplateResult[] {
+    return this.parts
+      ? this.parts.map((part, index) => index % 2
+        ? html`<strong>${part}</strong>`
+        : html`<span>${part}</span>`)
+      : html`<span></span>`;
+  }
+
+  private setParts() {
+    const resultStr = this.result || '';
+    const resultNormalized = normalizeText(resultStr).toLowerCase();
+    const termLC = normalizeText(this.term || '').toLowerCase();
+    let currentIdx = 0;
+
+    if (termLC.length <= 0) {
+      this.parts = [resultStr];
+      return;
+    }
+
+    this.parts = resultNormalized
+      .split(new RegExp(`(${regExpEscape(termLC)})`))
+      .map(part => {
+        const originalPart = resultStr.substring(currentIdx, currentIdx + part.length);
+        currentIdx += part.length;
+        return originalPart;
+      });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'u-highlight': UmHighlight;
+  }
+}

package/src/typeahead/typeahead.styles.scss

@@ -0,0 +1,9 @@
+@use "../scss/api";
+
+:host {
+  display: block;
+}
+
+u-menu-item {
+  font-weight: var(--u-typeahead-item-font-weight, #{api.get-font-weight-var(regular)});
+}