@ds-mo/ui 1.0.1 → 1.1.0

package/src/wc/components/TabGroupNav/TabGroupNav.tsx

@@ -0,0 +1,188 @@
+import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';
+import {
+  getSelectableTabs,
+  isTabDivider,
+  type TabItem,
+  type TabItemTab,
+} from '../TabGroup/tab-item-utils';
+
+export type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+
+@Component({
+  tag: 'ds-tab-group-nav',
+  styleUrl: 'TabGroupNav.css',
+  scoped: true,
+})
+export class TabGroupNav {
+  @Element() el!: HTMLElement;
+
+  @Prop({ mutable: true }) value: string = '';
+  @Prop() tabs: TabItem[] = [];
+  @Prop() background: TabGroupNavBackground | undefined;
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
+  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
+  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';
+
+  @Event() dsChange!: EventEmitter<string>;
+
+  private get selectableTabs(): TabItemTab[] {
+    return getSelectableTabs(this.tabs);
+  }
+
+  private selectTab(id: string, options?: { focus?: boolean }) {
+    this.value = id;
+    this.dsChange.emit(id);
+    if (options?.focus !== false) {
+      this.focusTab(id);
+    }
+  }
+
+  private focusTab(id: string) {
+    const btn = this.el.querySelector(`[data-tab-id="${id}"]`) as HTMLElement | null;
+    btn?.focus({ preventScroll: true });
+  }
+
+  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */
+  @Watch('value')
+  onValueChange(next: string, prev: string | undefined) {
+    if (prev === undefined || next === prev) return;
+
+    requestAnimationFrame(() => {
+      const active = document.activeElement as HTMLElement | null;
+      if (!active || !this.el.contains(active)) return;
+
+      const activeId = active.getAttribute('data-tab-id');
+      if (activeId === next) return;
+
+      const nextTab = this.el.querySelector(`[data-tab-id="${next}"]`) as HTMLElement | null;
+      if (nextTab) {
+        nextTab.focus({ preventScroll: true });
+      } else {
+        active.blur();
+      }
+    });
+  }
+
+  /**
+   * Find the next non-disabled tab index relative to `from`, stepping by `step`.
+   * Returns `from` unchanged if no other enabled tab exists.
+   */
+  private findEnabled(from: number, step: 1 | -1): number {
+    const tabs = this.selectableTabs;
+    const len = tabs.length;
+    for (let n = 0; n < len; n++) {
+      const i = (from + step * (n + 1) + len * (n + 1)) % len;
+      if (!tabs[i]?.disabled) return i;
+    }
+    return from;
+  }
+
+  @Listen('keydown')
+  handleKeyDown(e: KeyboardEvent) {
+    const tabs = this.selectableTabs;
+    if (!tabs.length) return;
+
+    const currentIdx = tabs.findIndex(t => t.id === this.value);
+    const isVertical = this.orientation === 'vertical';
+
+    let nextIdx: number | null = null;
+
+    if (!isVertical) {
+      if (e.key === 'ArrowRight') {
+        nextIdx = this.findEnabled(currentIdx, 1);
+      } else if (e.key === 'ArrowLeft') {
+        nextIdx = this.findEnabled(currentIdx, -1);
+      }
+    } else {
+      if (e.key === 'ArrowDown') {
+        nextIdx = this.findEnabled(currentIdx, 1);
+      } else if (e.key === 'ArrowUp') {
+        nextIdx = this.findEnabled(currentIdx, -1);
+      }
+    }
+
+    if (e.key === 'Home') {
+      const first = tabs.findIndex(t => !t.disabled);
+      nextIdx = first === -1 ? null : first;
+    } else if (e.key === 'End') {
+      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);
+      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;
+    }
+
+    if (nextIdx !== null) {
+      e.preventDefault();
+      const next = tabs[nextIdx];
+      this.selectTab(next.id);
+    }
+  }
+
+  private getBgClass(): string {
+    if (!this.background || this.background === 'faint') return '';
+    if (this.background === 'always-dark') return 'on-always-dark';
+    return `on-${this.background}`;
+  }
+
+  render() {
+    const bgClass = this.getBgClass();
+    const isVertical = this.orientation === 'vertical';
+
+    return (
+      <Host class="tab-group-nav-host">
+        <div
+          role="tablist"
+          class={{ 'tab-list': true, 'tab-list--vertical': isVertical }}
+          aria-label={this.ariaLabel}
+          aria-labelledby={this.ariaLabelledby}
+          aria-orientation={isVertical ? 'vertical' : undefined}
+        >
+          {this.tabs.map((tab, index) => {
+            if (isTabDivider(tab)) {
+              return (
+                <div
+                  key={`divider-${index}`}
+                  class={{
+                    'tab-divider': true,
+                    'tab-divider--vertical': isVertical,
+                  }}
+                  aria-hidden="true"
+                >
+                  <div class="tab-divider__line" />
+                </div>
+              );
+            }
+
+            const isSelected = tab.id === this.value;
+            return (
+              <button
+                key={tab.id}
+                type="button"
+                role="tab"
+                data-tab-id={tab.id}
+                class={{
+                  tab: true,
+                  'tab--selected': isSelected,
+                  [bgClass]: !!bgClass,
+                }}
+                aria-selected={isSelected}
+                aria-disabled={tab.disabled || undefined}
+                aria-controls={tab.panelId ?? undefined}
+                disabled={tab.disabled}
+                tabIndex={isSelected ? 0 : -1}
+                onClick={() => !tab.disabled && this.selectTab(tab.id)}
+              >
+                <span class={{
+                  tab__label: true,
+                  'tab__label--dot': !!tab.dot,
+                  [isSelected ? 'text-body-medium-emphasis' : 'text-body-medium']: true,
+                }}>
+                  {tab.label}
+                  {tab.dot && <span class="tab__dot" aria-hidden="true" />}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Table/Table.tsx

@@ -0,0 +1,268 @@
+import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';
+
+export type SortDirection = 'asc' | 'desc';
+
+export interface SortState {
+  columnId: string;
+  direction: SortDirection;
+}
+
+export interface TableColumn<T = unknown> {
+  id: string;
+  header: string;
+  accessorKey?: string;
+  accessor?: (row: T) => unknown;
+  sortable?: boolean;
+  align?: 'left' | 'right' | 'center';
+  width?: string | number;
+  minWidth?: string | number;
+  hide?: boolean;
+}
+
+function getCellValue<T>(col: TableColumn<T>, row: T): unknown {
+  if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];
+  if (col.accessor) return col.accessor(row);
+  return undefined;
+}
+
+function compareValues(a: unknown, b: unknown, dir: SortDirection): number {
+  const m = dir === 'asc' ? 1 : -1;
+  if (a == null && b == null) return 0;
+  if (a == null) return m;
+  if (b == null) return -m;
+  if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;
+  return String(a).localeCompare(String(b)) * m;
+}
+
+@Component({
+  tag: 'ds-table',
+  styleUrl: 'Table.css',
+  scoped: true,
+})
+export class Table {
+  @Prop() columns: TableColumn[] = [];
+  @Prop() data: unknown[] = [];
+  @Prop() sortState: SortState | undefined;
+  @Prop() loading: boolean = false;
+  @Prop() emptyMessage: string = 'No results found.';
+  /** Comma-separated zero-based row indices that are selected. */
+  @Prop() selectedRows: string = '';
+  /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */
+  @Prop({ mutable: true }) pageIndex: number | undefined;
+  @Prop() pageSize: number = 20;
+
+  @State() private internalSort: SortState | undefined;
+
+  @Event() dsSort!: EventEmitter<{ columnId: string }>;
+  @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;
+  @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;
+
+  private get activeSort(): SortState | undefined {
+    return this.sortState ?? this.internalSort;
+  }
+
+  private get visibleCols(): TableColumn[] {
+    return this.columns.filter(c => !c.hide);
+  }
+
+  private get gridTemplate(): string {
+    return this.visibleCols.map(col => {
+      if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;
+      return 'minmax(120px, 1fr)';
+    }).join(' ');
+  }
+
+  private get sortedData(): unknown[] {
+    const sort = this.activeSort;
+    if (!sort) return this.data;
+    const col = this.columns.find(c => c.id === sort.columnId);
+    if (!col) return this.data;
+    return [...this.data].sort((a, b) =>
+      compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction)
+    );
+  }
+
+  private get pagedData(): unknown[] {
+    if (this.pageIndex === undefined) return this.sortedData;
+    const start = this.pageIndex * this.pageSize;
+    return this.sortedData.slice(start, start + this.pageSize);
+  }
+
+  private get totalPages(): number {
+    if (this.pageIndex === undefined) return 1;
+    return Math.ceil(this.sortedData.length / this.pageSize);
+  }
+
+  private get selectedSet(): Set<number> {
+    if (!this.selectedRows) return new Set();
+    return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));
+  }
+
+  private handleSort(columnId: string) {
+    this.dsSort.emit({ columnId });
+    // Toggle internal sort if consumer hasn't provided sortState
+    if (!this.sortState) {
+      const cur = this.internalSort;
+      this.internalSort = cur?.columnId === columnId
+        ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }
+        : { columnId, direction: 'asc' };
+    }
+  }
+
+  render() {
+    const { visibleCols, pagedData, totalPages, loading } = this;
+    const isEmpty = !loading && pagedData.length === 0;
+    const selectedSet = this.selectedSet;
+    const sort = this.activeSort;
+    const hasPagination = this.pageIndex !== undefined && totalPages > 1;
+
+    return (
+      <Host>
+        <div class="table-wrapper" aria-busy={loading || undefined}>
+          <div class="table-scroll">
+            <div class="table" style={{ gridTemplateColumns: this.gridTemplate }} role="table">
+
+              {/* Header row */}
+              <div class="header-row" role="row">
+                {visibleCols.map(col => {
+                  const isSorted = sort?.columnId === col.id;
+                  const ariaSort = col.sortable
+                    ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')
+                    : undefined;
+                  return (
+                    <div
+                      key={col.id}
+                      class={{
+                        'header-cell': true,
+                        'header-cell--sortable': !!col.sortable,
+                        'align-right': col.align === 'right',
+                        'align-center': col.align === 'center',
+                      }}
+                      role="columnheader"
+                      aria-sort={ariaSort}
+                      tabIndex={col.sortable ? 0 : undefined}
+                      onClick={() => col.sortable && this.handleSort(col.id)}
+                      onKeyDown={(e: KeyboardEvent) => {
+                        if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {
+                          e.preventDefault();
+                          this.handleSort(col.id);
+                        }
+                      }}
+                      style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}
+                    >
+                      <span class="text-body-small-emphasis" style={{ color: 'var(--color-foreground-secondary)' }}>
+                        {col.header}
+                      </span>
+                      {isSorted && (
+                        <span class="sort-indicator" aria-hidden="true">
+                          {sort.direction === 'asc' ? '↑' : '↓'}
+                        </span>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Loading skeleton */}
+              {loading && Array.from({ length: 5 }).map((_, i) => (
+                <div
+                  key={`sk-${i}`}
+                  class="row"
+                  role={i === 0 ? 'status' : 'row'}
+                  aria-label={i === 0 ? 'Loading' : undefined}
+                >
+                  {visibleCols.map(col => (
+                    <div key={col.id} class="cell" role="cell">
+                      <div class="skeleton" />
+                    </div>
+                  ))}
+                </div>
+              ))}
+
+              {/* Empty state */}
+              {isEmpty && (
+                <div class="empty-row" style={{ gridColumn: '1 / -1' }}>
+                  <p class="text-body-medium" style={{ margin: '0', color: 'var(--color-foreground-secondary)' }}>
+                    {this.emptyMessage}
+                  </p>
+                </div>
+              )}
+
+              {/* Data rows */}
+              {!loading && pagedData.map((row, rowIndex) => {
+                const isSelected = selectedSet.has(rowIndex);
+                return (
+                  <div
+                    key={rowIndex}
+                    class={{
+                      'row': true,
+                      'row--selected': isSelected,
+                      'row--clickable': true,
+                    }}
+                    role="row"
+                    tabIndex={0}
+                    aria-selected={this.selectedRows ? isSelected : undefined}
+                    onClick={() => this.dsRowClick.emit({ row, rowIndex })}
+                    onKeyDown={(e: KeyboardEvent) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.dsRowClick.emit({ row, rowIndex });
+                      }
+                    }}
+                  >
+                    {visibleCols.map(col => (
+                      <div
+                        key={col.id}
+                        class={{
+                          'cell': true,
+                          'align-right': col.align === 'right',
+                          'align-center': col.align === 'center',
+                        }}
+                        role="cell"
+                      >
+                        <span class="text-body-medium cell-value">
+                          {String(getCellValue(col, row) ?? '')}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Built-in pagination */}
+          {hasPagination && (
+            <div class="table-pagination">
+              <button
+                type="button"
+                class="page-button"
+                disabled={this.pageIndex === 0}
+                onClick={() => {
+                  this.pageIndex = this.pageIndex! - 1;
+                  this.dsPageChange.emit({ pageIndex: this.pageIndex });
+                }}
+              >
+                <span class="text-body-small">Previous</span>
+              </button>
+              <span class="text-body-small" style={{ color: 'var(--color-foreground-secondary)' }}>
+                Page {this.pageIndex! + 1} of {totalPages}
+              </span>
+              <button
+                type="button"
+                class="page-button"
+                disabled={this.pageIndex! >= totalPages - 1}
+                onClick={() => {
+                  this.pageIndex = this.pageIndex! + 1;
+                  this.dsPageChange.emit({ pageIndex: this.pageIndex });
+                }}
+              >
+                <span class="text-body-small">Next</span>
+              </button>
+            </div>
+          )}
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Tag/Tag.tsx

@@ -0,0 +1,135 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+
+export type TagIntent     = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
+export type TagContrast   = 'strong' | 'bold' | 'medium' | 'faint';
+export type TagElevation  = 'none' | 'flat' | 'elevated';
+export type TagSize       = 'md' | 'sm' | 'xs';
+export type TagBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+
+const TEXT_VARIANT: Record<TagSize, string> = {
+  md: 'text-body-medium',
+  sm: 'text-body-small',
+  xs: 'text-caption',
+};
+
+const ICON_SIZE: Record<TagSize, number> = { md: 20, sm: 16, xs: 12 };
+
+@Component({
+  tag: 'ds-tag',
+  styleUrl: 'Tag.css',
+  scoped: true,
+})
+export class Tag {
+  @Prop() label!: string;
+  @Prop() intent: TagIntent = 'neutral';
+  @Prop() contrast: TagContrast = 'faint';
+  @Prop() elevation: TagElevation = 'none';
+  @Prop() size: TagSize = 'md';
+  @Prop() rounded: boolean = false;
+  @Prop() removable: boolean = false;
+  @Prop() maxWidth: string | number | undefined;
+  @Prop() inactive: boolean = false;
+  @Prop() background: TagBackground | undefined;
+  @Prop({ mutable: true }) pressed: boolean = false;
+  /** Whether the tag has a click/toggle behavior. */
+  @Prop() interactive: boolean = false;
+
+  /** Fired when the remove button is clicked. */
+  @Event() dsRemove!: EventEmitter<void>;
+  /** Fired when an interactive tag is clicked. */
+  @Event() dsClick!: EventEmitter<void>;
+  /** Fired when the pressed state toggles. */
+  @Event() dsPressedChange!: EventEmitter<boolean>;
+
+  private handleClick = () => {
+    if (this.inactive) return;
+    this.pressed = !this.pressed;
+    this.dsPressedChange.emit(this.pressed);
+    this.dsClick.emit();
+  };
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (this.inactive) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.handleClick();
+    }
+  };
+
+  private handleRemove = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dsRemove.emit();
+  };
+
+  render() {
+    const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+    const sz = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';
+    const hasIconSlot = true; // always render slot, consumer decides whether to fill it
+    const textVariant = TEXT_VARIANT[this.size];
+    const iconSize = ICON_SIZE[this.size];
+
+    const maxWidthStyle = this.maxWidth != null
+      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }
+      : undefined;
+
+    const hostCls: Record<string, boolean> = {
+      'tag': true,
+      [`tag--intent-${this.intent}`]: true,
+      [`tag--contrast-${this.contrast}`]: true,
+      [`tag--elevation-${this.elevation}`]: true,
+      [`tag--size-${this.size}`]: true,
+      'tag--rounded': this.rounded,
+      'tag--rounded-no-icon-left': this.rounded, // consumer overrides via slot presence hack
+      'tag--rounded-no-remove-right': this.rounded && !this.removable,
+      [`tag--icon-left-${sz}`]: false, // toggled by slotchange
+      [`tag--icon-right-${sz}`]: this.removable,
+      'tag--removable': this.removable,
+      'tag--interactive': this.interactive,
+      'tag--inactive': this.inactive,
+      'tag--pressed': this.pressed,
+      'tag--on-medium':      this.background === 'medium',
+      'tag--on-bold':        this.background === 'bold',
+      'tag--on-strong':      this.background === 'strong',
+      'tag--on-always-dark': this.background === 'always-dark',
+    };
+
+    return (
+      <Host
+        class={hostCls}
+        style={maxWidthStyle}
+        onClick={this.interactive ? this.handleClick : undefined}
+        onKeyDown={this.interactive ? this.handleKeyDown : undefined}
+        role={this.interactive ? 'button' : undefined}
+        tabIndex={this.interactive ? (this.inactive ? -1 : 0) : undefined}
+        aria-pressed={this.interactive && this.pressed !== undefined ? String(this.pressed) : undefined}
+        aria-disabled={this.inactive || undefined}
+      >
+        {/* Leading icon slot — consumer provides an icon element */}
+        <span class="tag__icon-slot" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>
+          <slot name="icon" />
+        </span>
+        {/* Label */}
+        <span class={{ 'tag__label': true, [textVariant]: true }}>
+          {this.label}
+        </span>
+        {/* Remove button */}
+        {this.removable && (
+          <button
+            type="button"
+            class="tag__remove"
+            onClick={this.handleRemove}
+            aria-label={`Remove ${this.label}`}
+            tabIndex={-1}
+          >
+            {/* Remove icon slot — defaults to × glyph */}
+            <slot name="remove-icon">
+              <span class="tag__remove-x" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>
+                ✕
+              </span>
+            </slot>
+          </button>
+        )}
+      </Host>
+    );
+  }
+}

package/src/wc/components/Tag/index.ts

@@ -0,0 +1 @@
+export type { TagIntent, TagContrast, TagElevation, TagSize, TagBackground } from './Tag';

package/src/wc/components/Text/Text.tsx

@@ -0,0 +1,100 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+
+export type TextVariant =
+  | 'text-display-medium'
+  | 'text-display-small'
+  | 'text-title-large'
+  | 'text-title-medium'
+  | 'text-title-small'
+  | 'text-body-large'
+  | 'text-body-large-emphasis'
+  | 'text-body-medium'
+  | 'text-body-medium-emphasis'
+  | 'text-body-small'
+  | 'text-body-small-emphasis'
+  | 'text-caption'
+  | 'text-caption-emphasis';
+
+export type TextColorToken =
+  | 'primary' | 'secondary' | 'tertiary'
+  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai'
+  | 'on-strong' | 'on-bold' | 'inherit';
+
+export type TextColor = TextColorToken | `var(--${string})`;
+export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
+export type TextAlign = 'left' | 'center' | 'right';
+export type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';
+export type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
+export type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+@Component({
+  tag: 'ds-text',
+  styleUrl: 'Text.css',
+  scoped: true,
+})
+export class Text {
+  @Prop() variant: TextVariant = 'text-body-medium';
+  @Prop() color: TextColor | undefined;
+  @Prop() decoration: TextDecoration | undefined;
+  @Prop() italic: boolean = false;
+  @Prop() align: TextAlign | undefined;
+  @Prop() lineTruncation: LineTruncation = 'none';
+  @Prop() wrap: TextWrap | undefined;
+  @Prop() as: TextElement = 'p';
+  /** Maps to `for` attribute on <label> elements. */
+  @Prop() for: string | undefined;
+
+  render() {
+    // Polymorphic element: TSX treats a variable tag as a component, so a
+    // dynamic intrinsic element name must be cast to `any` to render.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const Tag = this.as as any;
+    const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');
+
+    const cls: Record<string, boolean> = {
+      [this.variant]: true,
+      'text': true,
+      'text--nowrap': this.wrap === 'nowrap',
+      'text--balance': this.wrap === 'balance',
+      'text--pretty': this.wrap === 'pretty',
+      'text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',
+      'text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',
+      'text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',
+      'text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',
+      'text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',
+      'text--color-primary':   this.color === 'primary',
+      'text--color-secondary': this.color === 'secondary',
+      'text--color-tertiary':  this.color === 'tertiary',
+      'text--color-brand':     this.color === 'brand',
+      'text--color-negative':  this.color === 'negative',
+      'text--color-positive':  this.color === 'positive',
+      'text--color-warning':   this.color === 'warning',
+      'text--color-caution':   this.color === 'caution',
+      'text--color-ai':        this.color === 'ai',
+      'text--color-on-strong': this.color === 'on-strong',
+      'text--color-on-bold':   this.color === 'on-bold',
+      'text--color-inherit':   this.color === 'inherit',
+      'text--decoration-underline':        this.decoration === 'underline',
+      'text--decoration-dotted-underline': this.decoration === 'dotted-underline',
+      'text--italic': this.italic,
+      'text--align-left':   this.align === 'left',
+      'text--align-center': this.align === 'center',
+      'text--align-right':  this.align === 'right',
+    };
+
+    const style = this.color && isCustomColor(this.color)
+      ? { color: this.color as string }
+      : undefined;
+
+    const extraProps: Record<string, string> = {};
+    if (this.as === 'label' && this.for) extraProps['for'] = this.for;
+
+    return (
+      <Host style={{ display: 'contents' }}>
+        <Tag class={cls} style={style} {...extraProps}>
+          <slot />
+        </Tag>
+      </Host>
+    );
+  }
+}