@ds-mo/ui 3.0.1 → 3.1.1

package/src/wc/components/BarNav/bar-nav-dom-utils.ts

@@ -1,23 +0,0 @@
-export type QueryableHost = {
-  shadowRoot?: ShadowRoot | null;
-  querySelector: (selectors: string) => Element | null;
-};
-
-/**
- * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).
- * Use for child nodes owned by ds-tab-group and similar components.
- */
-export function queryWithinComponentHost(
-  host: QueryableHost | null | undefined,
-  selector: string,
-): HTMLElement | null {
-  if (!host) return null;
-  const root = host.shadowRoot ?? host;
-  return root.querySelector(selector) as HTMLElement | null;
-}
-
-export function getTabListFromTabGroup(
-  tabGroupEl: QueryableHost | null | undefined,
-): HTMLElement | null {
-  return queryWithinComponentHost(tabGroupEl, '[role="tablist"]');
-}

package/src/wc/components/BarNav/bar-nav-tabs-menu-utils.ts

@@ -1,114 +0,0 @@
-import type { MenuItemData, MenuSection } from '../Menu/menu-types';
-import {
-  getSelectableTabs,
-  isTabDivider,
-  type TabItem,
-  type TabItemTab,
-} from '../TabGroup/tab-item-utils';
-
-/** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */
-export function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {
-  const sections: MenuSection[] = [];
-  let batch: MenuItemData[] = [];
-
-  for (const item of tabs) {
-    if (isTabDivider(item)) {
-      if (batch.length > 0) {
-        sections.push({ items: batch });
-        batch = [];
-      }
-      continue;
-    }
-
-    batch.push({
-      label: item.label,
-      value: item.id,
-      isSelected: item.id === selectedId,
-      isInactive: item.isInactive,
-    });
-  }
-
-  if (batch.length > 0) {
-    sections.push({ items: batch });
-  }
-
-  return sections;
-}
-
-export function tabsToOverflowMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {
-  return tabsToMenuSections(trimLeadingDividers(tabs), selectedId);
-}
-
-export function getActiveTab(tabs: TabItem[], selectedId: string): TabItemTab | undefined {
-  const selectable = getSelectableTabs(tabs);
-  return selectable.find(tab => tab.id === selectedId) ?? selectable[0];
-}
-
-export function getActiveTabLabel(tabs: TabItem[], selectedId: string): string {
-  return getActiveTab(tabs, selectedId)?.label ?? 'Tabs';
-}
-
-/** True when tablist content exceeds the available width (with optional hysteresis). */
-export function tabsOverflowContainer(
-  tabListScrollWidth: number,
-  containerClientWidth: number,
-  collapsed: boolean,
-  hysteresis = 2,
-): boolean {
-  const diff = tabListScrollWidth - containerClientWidth;
-  if (collapsed) {
-    return diff > -hysteresis;
-  }
-  return diff > hysteresis;
-}
-
-export function visibleTabCountForWidth(
-  itemWidths: number[],
-  availableWidth: number,
-  overflowTriggerWidth: number,
-  itemGap: number,
-  listExtraWidth: number,
-): number {
-  if (itemWidths.length === 0 || availableWidth <= 0) return 0;
-
-  const fullWidth = widthForItemCount(itemWidths, itemWidths.length, itemGap, listExtraWidth);
-  if (fullWidth <= availableWidth) return itemWidths.length;
-
-  const availableForTabs = Math.max(0, availableWidth - overflowTriggerWidth);
-  let count = 0;
-
-  for (let i = 1; i <= itemWidths.length; i++) {
-    const width = widthForItemCount(itemWidths, i, itemGap, listExtraWidth);
-    if (width > availableForTabs) break;
-    count = i;
-  }
-
-  return count;
-}
-
-export function trimTrailingDividers(tabs: TabItem[]): TabItem[] {
-  let end = tabs.length;
-  while (end > 0 && isTabDivider(tabs[end - 1])) {
-    end -= 1;
-  }
-  return tabs.slice(0, end);
-}
-
-function trimLeadingDividers(tabs: TabItem[]): TabItem[] {
-  let start = 0;
-  while (start < tabs.length && isTabDivider(tabs[start])) {
-    start += 1;
-  }
-  return tabs.slice(start);
-}
-
-function widthForItemCount(
-  itemWidths: number[],
-  count: number,
-  itemGap: number,
-  listExtraWidth: number,
-): number {
-  if (count <= 0) return 0;
-  const itemsWidth = itemWidths.slice(0, count).reduce((sum, width) => sum + width, 0);
-  return listExtraWidth + itemsWidth + itemGap * Math.max(0, count - 1);
-}

package/src/wc/components/BarNav/bar-nav-types.ts

@@ -1,3 +0,0 @@
-import type { TabItem } from '../TabGroup/tab-item-utils';
-
-export type BarNavTab = TabItem;

package/src/wc/components/BarNav/bar-nav-utils.ts

@@ -1,67 +0,0 @@
-import { getSelectableTabs } from '../TabGroup/tab-item-utils';
-import type { BarNavTab } from './bar-nav-types';
-
-export interface BarNavUrlState {
-  /** Tab id derived from the URL, or empty when none applies. */
-  value: string;
-  /** When true, tabs should be hidden (e.g. non-tab child routes like detail pages). */
-  hideTabs: boolean;
-}
-
-/** Derive BarNav tab selection from `currentUrl` relative to `basePath`.
- *  Mirrors motive-webapp-lab `resolveBarNavState` tab-selection semantics. */
-export function deriveBarNavValueFromUrl(
-  path: string,
-  basePath: string,
-  tabs: BarNavTab[],
-): BarNavUrlState {
-  if (!path || !basePath) {
-    return { value: '', hideTabs: false };
-  }
-
-  if (path !== basePath && !path.startsWith(`${basePath}/`)) {
-    return { value: '', hideTabs: false };
-  }
-
-  const remainder = path.slice(basePath.length);
-  const seg = remainder.startsWith('/') ? remainder.slice(1).split('/')[0] : '';
-  const selectableTabs = getSelectableTabs(tabs);
-
-  if (!seg) {
-    return { value: selectableTabs[0]?.id ?? '', hideTabs: false };
-  }
-
-  const tab = selectableTabs.find(t => t.id === seg);
-  if (tab) {
-    return { value: tab.id, hideTabs: false };
-  }
-
-  return { value: '', hideTabs: true };
-}
-
-/** True when host array/json props have data but resolved internal state is still empty. */
-export function shouldResyncBarNavProps(
-  resolvedTabs: BarNavTab[],
-  tabs: BarNavTab[],
-  tabsJson: string,
-): boolean {
-  const tabsIncoming = tabsJson
-    ? parseJsonArrayProp(tabsJson, [])
-    : (tabs ?? []);
-
-  return resolvedTabs.length === 0 && tabsIncoming.length > 0;
-}
-
-/** Parse tabs from either a JSON attribute string or a JS property array. */
-export function parseJsonArrayProp<T>(value: string | T[] | undefined, fallback: T[]): T[] {
-  if (Array.isArray(value)) return value;
-  if (typeof value === 'string' && value !== '') {
-    try {
-      const parsed = JSON.parse(value);
-      return Array.isArray(parsed) ? parsed : fallback;
-    } catch {
-      return fallback;
-    }
-  }
-  return fallback;
-}

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

@@ -1,2 +0,0 @@
-export type { BarNavTab } from './bar-nav-types';
-export type { NavChromeStyle } from '../../nav/nav-chrome';

package/src/wc/components/ButtonFilled/ButtonFilled.tsx

@@ -1,171 +0,0 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
-import { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';
-
-export type ButtonFilledIntent =
-  | 'neutral'
-  | 'brand'
-  | 'ai'
-  | 'negative'
-  | 'warning'
-  | 'caution'
-  | 'positive'
-  | 'guide'
-  | 'walkthrough';
-
-export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
-
-export type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';
-
-export type ButtonFilledSize = 'md' | 'sm' | 'xs';
-
-export type ButtonFilledWidth = ControlWidth;
-
-/**
- * `ds-icon` size prop matching control-density icon metrics
- * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
- */
-const ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {
-  md: 'md',
-  sm: 'sm',
-  xs: 'xs',
-};
-
-@Component({
-  tag: 'ds-button-filled',
-  styleUrl: 'ButtonFilled.css',
-  scoped: true,
-})
-export class ButtonFilled {
-  @Element() el!: HTMLElement;
-
-  /**
-   * Content layout. Default is label-only; pass `icon` for icon-only chrome
-   * (nav / tool rails) or `icon-label` for leading icon + text.
-   */
-  @Prop() variant: ButtonFilledVariant = 'label';
-
-  /** Control density (height, padding, icon, type). */
-  @Prop() size: ButtonFilledSize = 'md';
-
-  /** Width fit — hug content (default) or fill the parent. */
-  @Prop() width: ButtonFilledWidth = 'hug';
-
-  /** Visible text for `label` / `icon-label` variants. */
-  @Prop() label: string = '';
-
-  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */
-  @Prop() icon: string = '';
-
-  /** Semantic colour intent. */
-  @Prop() intent: ButtonFilledIntent = 'brand';
-
-  /**
-   * Background fill weight. Foreground uses the paired contrast token:
-   * bold → faint, strong → medium, medium → strong, faint → bold.
-   */
-  @Prop() contrast: ButtonFilledContrast = 'bold';
-
-  /** Disables interaction. */
-  @Prop() isInactive: boolean = false;
-
-  /** Native button type. */
-  @Prop() type: 'button' | 'submit' | 'reset' = 'button';
-
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
-
-  @Event() dsClick!: EventEmitter<MouseEvent>;
-
-  private buttonEl: HTMLButtonElement | null = null;
-
-  @Method()
-  async setFocus() {
-    this.buttonEl?.focus();
-  }
-
-  private handleClick = (event: MouseEvent) => {
-    if (this.isInactive) return;
-    this.dsClick.emit(event);
-  };
-
-  private get showIcon(): boolean {
-    return this.variant === 'icon' || this.variant === 'icon-label';
-  }
-
-  private get showLabel(): boolean {
-    return this.variant === 'label' || this.variant === 'icon-label';
-  }
-
-  private get accessibleName(): string | undefined {
-    if (this.ariaLabel) return this.ariaLabel;
-    if (this.showLabel && this.label) return undefined;
-    if (this.variant === 'icon') return this.icon || 'action';
-    return this.label || 'action';
-  }
-
-  render() {
-    const textVariant = CONTROL_TEXT_VARIANT[this.size];
-    const iconSize = ICON_SIZE[this.size];
-
-    const cls: Record<string, boolean> = {
-      'button-filled': true,
-      'ds-focus-ring-inset': true,
-      'ds-interaction-fill': !this.isInactive,
-      /* Bold is the default filled contrast — on-bold interaction tokens. */
-      'ds-interaction-fill--on-bold': this.contrast === 'bold',
-      'ds-interaction-fill--on-strong': this.contrast === 'strong',
-      'ds-interaction-fill--on-medium': this.contrast === 'medium',
-      /* faint → default app interaction tokens (no --on-*). */
-      'ds-control-inactive': this.isInactive,
-      'ds-control--md': this.size === 'md',
-      'ds-control--sm': this.size === 'sm',
-      'ds-control--xs': this.size === 'xs',
-      'button-filled--icon': this.variant === 'icon',
-      'button-filled--label': this.variant === 'label',
-      'button-filled--icon-label': this.variant === 'icon-label',
-      [`button-filled--intent-${this.intent}`]: true,
-      [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',
-    };
-
-    return (
-      <Host
-        class={{
-          'button-filled-host': true,
-          'button-filled-host--icon': this.variant === 'icon',
-          'ds-control--md': this.size === 'md',
-          'ds-control--sm': this.size === 'sm',
-          'ds-control--xs': this.size === 'xs',
-          ...controlWidthClass(this.width),
-        }}
-        tabIndex={-1}
-      >
-        <button
-          ref={el => {
-            this.buttonEl = el ?? null;
-          }}
-          type={this.type}
-          class={cls}
-          disabled={this.isInactive}
-          aria-label={this.accessibleName}
-          onClick={this.handleClick}
-        >
-          {this.showIcon && (
-            <span class="button-filled__icon-wrap ds-interaction-fill__content">
-              <ds-icon name={this.icon} size={iconSize} color="inherit" />
-            </span>
-          )}
-          {this.showLabel && (
-            <ds-text
-              class="button-filled__label ds-interaction-fill__content"
-              as="span"
-              variant={textVariant}
-              emphasis
-              color="inherit"
-            >
-              {this.label}
-            </ds-text>
-          )}
-        </button>
-      </Host>
-    );
-  }
-}

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

@@ -1,7 +0,0 @@
-export type {
-  ButtonFilledContrast,
-  ButtonFilledIntent,
-  ButtonFilledSize,
-  ButtonFilledVariant,
-  ButtonFilledWidth,
-} from './ButtonFilled';

package/src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx

@@ -1,229 +0,0 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
-import { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';
-
-export type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
-
-export type ButtonUnfilledBackground = 'always-dark' | 'navigation';
-
-export type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';
-
-export type ButtonUnfilledSize = 'md' | 'sm' | 'xs';
-
-export type ButtonUnfilledWidth = ControlWidth;
-
-/**
- * `ds-icon` size prop matching control-density icon metrics
- * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).
- */
-const ICON_SIZE: Record<ButtonUnfilledSize, 'md' | 'sm' | 'xs'> = {
-  md: 'md',
-  sm: 'sm',
-  xs: 'xs',
-};
-
-@Component({
-  tag: 'ds-button-unfilled',
-  styleUrl: 'ButtonUnfilled.css',
-  scoped: true,
-})
-export class ButtonUnfilled {
-  @Element() el!: HTMLElement;
-
-  /**
-   * Content layout. Default is label-only; pass `icon` for icon-only chrome
-   * (nav / tool rails) or `icon-label` for leading icon + text.
-   */
-  @Prop() variant: ButtonUnfilledVariant = 'label';
-
-  /** Control density (height, padding, icon, type). */
-  @Prop() size: ButtonUnfilledSize = 'md';
-
-  /** Width fit — hug content (default) or fill the parent. */
-  @Prop() width: ButtonUnfilledWidth = 'hug';
-
-  /** Visible text for `label` / `icon-label` variants. */
-  @Prop() label: string = '';
-
-  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */
-  @Prop() icon: string = '';
-
-  /** Active/selected visual state. Always promotes foreground to primary. */
-  @Prop() isActive: boolean = false;
-
-  /**
-   * When active, render the selected interaction fill.
-   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass
-   * `false` so selection is foreground-only (primary color, no fill).
-   */
-  @Prop() activeFill: boolean = true;
-
-  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */
-  @Prop() hasBorder: boolean = true;
-
-  /** Show a notification dot at the top-right of the icon zone (icon variant only). */
-  @Prop() dot: boolean = false;
-
-  /** Disables interaction. */
-  @Prop() isInactive: boolean = false;
-
-  /** Native button type. */
-  @Prop() type: 'button' | 'submit' | 'reset' = 'button';
-
-  /**
-   * Foreground and interaction tokens when the button sits on a contrasting parent
-   * background (default, medium, bold, or strong).
-   */
-  @Prop({ attribute: 'on-background-contrast' })
-  backgroundContrast?: ButtonUnfilledOnBackgroundContrast;
-
-  /** Parent surface context for navigation and always-dark chrome. */
-  @Prop() background: ButtonUnfilledBackground | undefined;
-
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
-  @Prop() controls: string | undefined;
-  @Prop() expanded: boolean | undefined;
-  @Prop() haspopup: string | undefined;
-  @Prop() pressed: boolean | undefined;
-
-  /**
-   * Native `tabindex` for roving keyboard groups in shell chrome.
-   * Omit for the default button tab stop (`0`).
-   */
-  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;
-
-  @Event() dsClick!: EventEmitter<MouseEvent>;
-  @Event() dsChange!: EventEmitter<boolean>;
-
-  private buttonEl: HTMLButtonElement | null = null;
-
-  @Method()
-  async setFocus() {
-    this.buttonEl?.focus();
-  }
-
-  private handleClick = (event: MouseEvent) => {
-    if (this.isInactive) return;
-    this.dsClick.emit(event);
-    this.dsChange.emit(!this.isActive);
-  };
-
-  private effectiveContrast(): ButtonUnfilledOnBackgroundContrast {
-    return this.backgroundContrast ?? 'default';
-  }
-
-  private get showIcon(): boolean {
-    return this.variant === 'icon' || this.variant === 'icon-label';
-  }
-
-  private get showLabel(): boolean {
-    return this.variant === 'label' || this.variant === 'icon-label';
-  }
-
-  private get showDot(): boolean {
-    return this.variant === 'icon' && this.dot;
-  }
-
-  /** Knock-out ring: selected fill → active wash; otherwise surface token. */
-  private get dotRing(): string {
-    if (this.isActive && this.activeFill) {
-      return 'var(--ds-interaction-active)';
-    }
-    return 'var(--ds-button-unfilled-dot-ring)';
-  }
-
-  private get accessibleName(): string | undefined {
-    if (this.ariaLabel) return this.ariaLabel;
-    if (this.showLabel && this.label) return undefined;
-    if (this.variant === 'icon') return this.icon || 'action';
-    return this.label || 'action';
-  }
-
-  render() {
-    const bg = this.background;
-    const contrast = this.effectiveContrast();
-    const textVariant = CONTROL_TEXT_VARIANT[this.size];
-    const iconSize = ICON_SIZE[this.size];
-
-    const cls: Record<string, boolean> = {
-      'button-unfilled': true,
-      'ds-focus-ring-inset': true,
-      'ds-interaction-fill': true,
-      'ds-interaction-fill--selected': this.isActive && this.activeFill && !this.isInactive,
-      'ds-interaction-fill--on-medium': contrast === 'medium',
-      'ds-interaction-fill--on-bold': contrast === 'bold',
-      'ds-interaction-fill--on-strong': contrast === 'strong',
-      'ds-interaction-fill--on-always-dark': bg === 'always-dark',
-      'ds-interaction-fill--on-navigation': bg === 'navigation',
-      'button-unfilled--active': this.isActive,
-      'button-unfilled--bordered': this.hasBorder,
-      'ds-control-inactive': this.isInactive,
-      'ds-control--md': this.size === 'md',
-      'ds-control--sm': this.size === 'sm',
-      'ds-control--xs': this.size === 'xs',
-      'button-unfilled--icon': this.variant === 'icon',
-      'button-unfilled--label': this.variant === 'label',
-      'button-unfilled--icon-label': this.variant === 'icon-label',
-      'button-unfilled--contrast-medium': contrast === 'medium',
-      'button-unfilled--contrast-bold': contrast === 'bold',
-      'button-unfilled--contrast-strong': contrast === 'strong',
-      'button-unfilled--on-always-dark': bg === 'always-dark',
-      'button-unfilled--on-navigation': bg === 'navigation',
-    };
-
-    return (
-      <Host
-        class={{
-          'button-unfilled-host': true,
-          'button-unfilled-host--icon': this.variant === 'icon',
-          'ds-control--md': this.size === 'md',
-          'ds-control--sm': this.size === 'sm',
-          'ds-control--xs': this.size === 'xs',
-          ...controlWidthClass(this.width),
-        }}
-        tabIndex={-1}
-      >
-        <button
-          ref={el => {
-            this.buttonEl = el ?? null;
-          }}
-          type={this.type}
-          class={cls}
-          disabled={this.isInactive}
-          tabIndex={this.focusTabIndex ?? 0}
-          aria-label={this.accessibleName}
-          aria-controls={this.controls}
-          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}
-          aria-haspopup={this.haspopup}
-          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}
-          onClick={this.handleClick}
-        >
-          {this.showIcon && (
-            <span class="button-unfilled__icon-wrap ds-interaction-fill__content">
-              <ds-icon name={this.icon} size={iconSize} color="inherit" />
-              {this.showDot && (
-                <ds-badge
-                  class="button-unfilled__dot"
-                  variant="dot"
-                  background={this.dotRing}
-                  label=""
-                  aria-hidden="true"
-                />
-              )}
-            </span>
-          )}
-          {this.showLabel && (
-            <ds-text
-              class="button-unfilled__label ds-interaction-fill__content"
-              as="span"
-              variant={textVariant}
-              emphasis
-              color="inherit"
-            >
-              {this.label}
-            </ds-text>
-          )}
-        </button>
-      </Host>
-    );
-  }
-}

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

@@ -1,7 +0,0 @@
-export type {
-  ButtonUnfilledBackground,
-  ButtonUnfilledOnBackgroundContrast,
-  ButtonUnfilledSize,
-  ButtonUnfilledVariant,
-  ButtonUnfilledWidth,
-} from './ButtonUnfilled';