@ds-mo/ui 3.0.1 → 3.1.0

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

@@ -1,273 +0,0 @@
-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}
-                    >
-                      <ds-text as="span" variant="text-body-small" emphasis color="secondary">
-                        {col.header}
-                      </ds-text>
-                      {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 && (
-                <ds-text
-                  class="empty-row"
-                  as="p"
-                  variant="text-body-medium"
-                  color="secondary"
-                  style={{ gridColumn: '1 / -1' }}
-                >
-                  {this.emptyMessage}
-                </ds-text>
-              )}
-
-              {/* 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 => (
-                      <ds-text
-                        key={col.id}
-                        class={{
-                          'cell': true,
-                          'align-right': col.align === 'right',
-                          'align-center': col.align === 'center',
-                        }}
-                        as="span"
-                        variant="text-body-medium"
-                        lineTruncation={1}
-                        role="cell"
-                      >
-                        {String(getCellValue(col, row) ?? '')}
-                      </ds-text>
-                    ))}
-                  </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 });
-                }}
-              >
-                <ds-text as="span" variant="text-body-small">Previous</ds-text>
-              </button>
-              <ds-text as="span" variant="text-body-small" color="secondary">
-                Page {this.pageIndex! + 1} of {totalPages}
-              </ds-text>
-              <button
-                type="button"
-                class="page-button"
-                disabled={this.pageIndex! >= totalPages - 1}
-                onClick={() => {
-                  this.pageIndex = this.pageIndex! + 1;
-                  this.dsPageChange.emit({ pageIndex: this.pageIndex });
-                }}
-              >
-                <ds-text as="span" variant="text-body-small">Next</ds-text>
-              </button>
-            </div>
-          )}
-        </div>
-      </Host>
-    );
-  }
-}

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

@@ -1,63 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-import { CONTROL_TEXT_VARIANT } from '../../utils';
-
-export type TagIntent   = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
-export type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';
-export type TagSize     = 'md' | 'sm' | 'xs';
-
-/**
- * `ds-icon` size prop matching control-density icon metrics
- * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
- */
-const ICON_SIZE: Record<TagSize, 'md' | 'sm' | 'xs'> = {
-  md: 'md',
-  sm: 'sm',
-  xs: 'xs',
-};
-
-@Component({
-  tag: 'ds-tag',
-  styleUrl: 'Tag.css',
-  scoped: true,
-})
-export class Tag {
-  @Prop() label!: string;
-  @Prop() intent: TagIntent = 'neutral';
-  @Prop() contrast: TagContrast = 'faint';
-  @Prop() size: TagSize = 'md';
-  @Prop() rounded: boolean = false;
-  @Prop() maxWidth: string | number | undefined;
-
-  render() {
-    const textVariant = CONTROL_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;
-
-    return (
-      <Host
-        class={{
-          'tag': true,
-          [`tag--intent-${this.intent}`]: true,
-          [`tag--contrast-${this.contrast}`]: true,
-          [`tag--size-${this.size}`]: true,
-          'ds-control--md': this.size === 'md',
-          'ds-control--sm': this.size === 'sm',
-          'ds-control--xs': this.size === 'xs',
-          'tag--rounded': this.rounded,
-        }}
-        style={maxWidthStyle}
-      >
-        {/* Leading icon — consumer provides ds-icon (or any SVG); prefer size matching tag size. */}
-        <span class="tag__icon-slot" data-icon-size={iconSize}>
-          <slot name="icon" />
-        </span>
-        <ds-text class="tag__label" as="span" variant={textVariant} color="inherit">
-          {this.label}
-        </ds-text>
-      </Host>
-    );
-  }
-}

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

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

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

@@ -1,99 +0,0 @@
-import { Component, Prop, h, Host } from '@stencil/core';
-import { textDisplayClass, textVariantClass } from './text-utils';
-import type {
-  TextAlign,
-  TextColor,
-  TextDecoration,
-  TextElement,
-  TextFontFeature,
-  TextVariant,
-  LineTruncation,
-  TextWrap,
-} from './text-types';
-
-@Component({
-  tag: 'ds-text',
-  styleUrl: 'Text.css',
-  scoped: true,
-})
-export class Text {
-  @Prop() variant: TextVariant = 'text-body-medium';
-  /**
-   * Heavier weight + tighter letter-spacing for the variant.
-   * `false` (default): one step below emphasis (display semibold, title/body
-   * medium, caption medium).
-   * `true`: display bold, title/caption semibold, body medium.
-   */
-  @Prop() emphasis: boolean = false;
-  @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() fontFeature: TextFontFeature = 'normal';
-  @Prop() as: TextElement = 'p';
-  /** Maps to `for` attribute on <label> elements. */
-  @Prop() for: string | undefined;
-  /** Forwarded to the inner element (e.g. aria-labelledby targets). */
-  @Prop() textId: 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> = {
-      'ds-text': true,
-      [textDisplayClass(this.as)]: true,
-      [textVariantClass(this.variant)]: true,
-      'ds-text--emphasis': this.emphasis,
-      'ds-text--regular': !this.emphasis,
-      'ds-text--nowrap': this.wrap === 'nowrap',
-      'ds-text--balance': this.wrap === 'balance',
-      'ds-text--pretty': this.wrap === 'pretty',
-      'ds-text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',
-      'ds-text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',
-      'ds-text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',
-      'ds-text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',
-      'ds-text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',
-      'ds-text--color-primary':   this.color === 'primary',
-      'ds-text--color-secondary': this.color === 'secondary',
-      'ds-text--color-tertiary':  this.color === 'tertiary',
-      'ds-text--color-brand':     this.color === 'brand',
-      'ds-text--color-negative':  this.color === 'negative',
-      'ds-text--color-positive':  this.color === 'positive',
-      'ds-text--color-warning':   this.color === 'warning',
-      'ds-text--color-caution':   this.color === 'caution',
-      'ds-text--color-ai':        this.color === 'ai',
-      'ds-text--color-on-strong': this.color === 'on-strong',
-      'ds-text--color-on-bold':   this.color === 'on-bold',
-      'ds-text--color-inherit':   this.color === 'inherit',
-      'ds-text--decoration-underline':        this.decoration === 'underline',
-      'ds-text--decoration-dotted-underline': this.decoration === 'dotted-underline',
-      'ds-text--italic': this.italic,
-      'ds-text--align-left':   this.align === 'left',
-      'ds-text--align-center': this.align === 'center',
-      'ds-text--align-right':  this.align === 'right',
-      'ds-text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',
-    };
-
-    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;
-    if (this.textId) extraProps['id'] = this.textId;
-
-    return (
-      <Host class={cls} style={style}>
-        <Tag class="ds-text__element" {...extraProps}>
-          <slot />
-        </Tag>
-      </Host>
-    );
-  }
-}

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

@@ -1,12 +0,0 @@
-export type {
-  TextVariant,
-  TextColor,
-  TextColorToken,
-  TextDecoration,
-  TextAlign,
-  LineTruncation,
-  TextWrap,
-  TextElement,
-  TextFontFeature,
-} from './text-types';
-export { textVariantClass } from './text-utils';

package/src/wc/components/Text/text-types.ts

@@ -1,23 +0,0 @@
-export type TextVariant =
-  | 'text-display-medium'
-  | 'text-display-small'
-  | 'text-title-large'
-  | 'text-title-medium'
-  | 'text-title-small'
-  | 'text-body-large'
-  | 'text-body-medium'
-  | 'text-body-small'
-  | 'text-caption';
-
-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';
-export type TextFontFeature = 'normal' | 'tabular-nums';

package/src/wc/components/Text/text-utils.ts

@@ -1,13 +0,0 @@
-import type { TextElement, TextVariant } from './text-types';
-
-/** `text-body-medium` → `ds-text--body-medium` */
-export function textVariantClass(variant: TextVariant): string {
-  return `ds-text--${variant.replace(/^text-/, '')}`;
-}
-
-/** Inline semantics get a measurable inline box; paragraphs/headings get a block box. */
-export function textDisplayClass(element: TextElement): string {
-  return element === 'span' || element === 'label'
-    ? 'ds-text--inline-box'
-    : 'ds-text--block-box';
-}

package/src/wc/components/Toggle/Toggle.tsx

@@ -1,43 +0,0 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
-
-@Component({
-  tag: 'ds-toggle',
-  styleUrl: 'Toggle.css',
-  shadow: true,
-})
-export class Toggle {
-  @Prop({ mutable: true }) checked: boolean = false;
-  @Prop() isInactive: boolean = false;
-
-  @Event() dsChange!: EventEmitter<boolean>;
-
-  private handleClick = () => {
-    if (this.isInactive) return;
-    this.checked = !this.checked;
-    this.dsChange.emit(this.checked);
-  };
-
-  private handleKeyDown = (e: KeyboardEvent) => {
-    if (this.isInactive) return;
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      this.handleClick();
-    }
-  };
-
-  render() {
-    return (
-      <Host
-        role="switch"
-        aria-checked={String(this.checked)}
-        aria-disabled={this.isInactive || undefined}
-        tabIndex={this.isInactive ? -1 : 0}
-        class={{ toggle: true, checked: this.checked, 'ds-control-inactive': this.isInactive }}
-        onClick={this.handleClick}
-        onKeyDown={this.handleKeyDown}
-      >
-        <span class="thumb" />
-      </Host>
-    );
-  }
-}

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

@@ -1 +0,0 @@
-export type { } from './Toggle';