@universal-material/web 3.0.140 → 3.0.142

package/src/tab-bar/tab.ts

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

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

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

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

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

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

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

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

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

package/src/theme/neutral-colors.ts

@@ -1,26 +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: '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

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

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

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

package/src/typeahead/highlight.ts

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

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