@ds-mo/ui 1.0.2 → 1.2.0

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

@@ -0,0 +1,76 @@
+import { getSelectableTabs } from '../TabGroup/tab-item-utils';
+import type { BarNavActionItem, BarNavTab } from './BarNav';
+
+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,
+  resolvedActions: BarNavActionItem[],
+  actions: BarNavActionItem[],
+  actionsJson: string,
+): boolean {
+  const tabsIncoming = tabsJson
+    ? parseJsonArrayProp(tabsJson, [])
+    : (tabs ?? []);
+  const actionsIncoming = actionsJson
+    ? parseJsonArrayProp(actionsJson, [])
+    : (actions ?? []);
+
+  return (
+    (resolvedTabs.length === 0 && tabsIncoming.length > 0) ||
+    (resolvedActions.length === 0 && actionsIncoming.length > 0)
+  );
+}
+
+/** Parse tabs/actions 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

@@ -0,0 +1 @@
+export type { BarNavBackground, BarNavTab, BarNavActionItem } from './BarNav';

package/src/wc/components/BarNavAction/BarNavAction.tsx

@@ -0,0 +1,67 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+
+export type BarNavActionBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+
+@Component({
+  tag: 'ds-bar-nav-action',
+  styleUrl: 'BarNavAction.css',
+  scoped: true,
+})
+export class BarNavAction {
+  /** Icon name passed to <ds-icon>. */
+  @Prop() icon: string = '';
+
+  /** Controlled toggle/selected state. */
+  @Prop() selected: boolean = false;
+
+  /** Show a notification dot (brand colour) at the top-right of the icon. */
+  @Prop() dot: boolean = false;
+
+  /** Disables interaction. */
+  @Prop() inactive: boolean = false;
+
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';
+
+  /** Parent surface context — adjusts hover/press colours for coloured backgrounds. */
+  @Prop() background: BarNavActionBackground | undefined;
+
+  /** Emits the new selected value (!selected) on click. */
+  @Event() dsChange!: EventEmitter<boolean>;
+
+  private handleClick = () => {
+    if (this.inactive) return;
+    this.dsChange.emit(!this.selected);
+  };
+
+  render() {
+    const bg = this.background;
+
+    const cls: Record<string, boolean> = {
+      'action-btn': true,
+      selected: this.selected,
+      inactive: this.inactive,
+      onMedium: bg === 'medium',
+      onBold: bg === 'bold',
+      onStrong: bg === 'strong',
+      onAlwaysDark: bg === 'always-dark',
+    };
+
+    return (
+      <Host>
+        <button
+          type="button"
+          class={cls}
+          disabled={this.inactive}
+          aria-pressed={this.selected}
+          aria-label={this.ariaLabel}
+          onClick={this.handleClick}
+        >
+          <span class="action-btn__icon-wrap">
+            <ds-icon name={this.icon} size="md" color="inherit" />
+            {this.dot && <span class="action-btn__dot" aria-hidden="true" />}
+          </span>
+        </button>
+      </Host>
+    );
+  }
+}

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

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

package/src/wc/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,61 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+@Component({
+  tag: 'ds-breadcrumb',
+  styleUrl: 'Breadcrumb.css',
+  scoped: true,
+})
+export class Breadcrumb {
+  @Prop() items: BreadcrumbItem[] = [];
+  @Prop() separator: string = '/';
+
+  @Event() dsNavigate!: EventEmitter<{ item: BreadcrumbItem; index: number }>;
+
+  private handleClick(item: BreadcrumbItem, index: number, e: MouseEvent) {
+    if (!item.href) {
+      e.preventDefault();
+    }
+    this.dsNavigate.emit({ item, index });
+  }
+
+  render() {
+    return (
+      <Host>
+        <nav aria-label="Breadcrumb" class="breadcrumb">
+          <ol class="list">
+            {this.items.map((item, i) => {
+              const isLast = i === this.items.length - 1;
+              return (
+                <li class="item" key={i}>
+                  {isLast ? (
+                    <span class="text-body-medium-emphasis current" aria-current="page">
+                      {item.label}
+                    </span>
+                  ) : (
+                    <span class="item-inner">
+                      <a
+                        href={item.href ?? '#'}
+                        class="link text-body-medium"
+                        onClick={e => this.handleClick(item, i, e)}
+                      >
+                        {item.label}
+                      </a>
+                      <span class="separator text-body-small" aria-hidden="true">
+                        {this.separator}
+                      </span>
+                    </span>
+                  )}
+                </li>
+              );
+            })}
+          </ol>
+        </nav>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Button/Button.tsx

@@ -0,0 +1,158 @@
+import { Component, Prop, Event, EventEmitter, Element, State, h, Host } from '@stencil/core';
+
+export type ButtonVariant   = 'primary' | 'secondary';
+export type ButtonElevation = 'none' | 'flat' | 'elevated' | 'floating';
+export type ButtonIntent    = 'none' | 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
+export type ButtonSize      = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonContrast  = 'strong' | 'bold' | 'medium' | 'faint';
+export type ButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+
+const ICON_SIZE: Record<ButtonSize, number> = { xs: 12, sm: 16, md: 20, lg: 24 };
+const TEXT_CLASS: Record<ButtonSize, string> = {
+  xs: 'text-caption-emphasis',
+  sm: 'text-body-small-emphasis',
+  md: 'text-body-medium-emphasis',
+  lg: 'text-body-large-emphasis',
+};
+
+@Component({
+  tag: 'ds-button',
+  styleUrl: 'Button.css',
+  scoped: true,
+})
+export class Button {
+  @Element() el!: HTMLElement;
+
+  @Prop() variant: ButtonVariant = 'primary';
+  @Prop() intent: ButtonIntent = 'brand';
+  @Prop() size: ButtonSize = 'md';
+  @Prop() label: string | undefined;
+  @Prop() rounded: boolean = false;
+  @Prop() fullWidth: boolean = false;
+  @Prop() width: string | undefined;
+  @Prop() contrast: ButtonContrast = 'bold';
+  @Prop() background: ButtonBackground | undefined;
+  @Prop() dropdown: boolean = false;
+  @Prop() badgeCount: number | undefined;
+  @Prop() elevation: ButtonElevation | undefined;
+  @Prop() loading: boolean = false;
+  @Prop() inactive: boolean = false;
+  @Prop() href: string | undefined;
+  @Prop() target: string | undefined;
+  @Prop() type: 'button' | 'submit' | 'reset' = 'button';
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
+  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;
+
+  @State() private hasIcon: boolean = false;
+
+  @Event() dsClick!: EventEmitter<MouseEvent>;
+  @Event() dsMouseEnter!: EventEmitter<MouseEvent>;
+  @Event() dsMouseLeave!: EventEmitter<MouseEvent>;
+
+  componentWillLoad() {
+    this.hasIcon = !!this.el.querySelector('[slot="icon"]');
+  }
+
+  private handleClick = (e: MouseEvent) => {
+    if (this.inactive || this.loading) return;
+    this.dsClick.emit(e);
+  };
+
+  private get effectiveElevation(): ButtonElevation {
+    return this.elevation ?? (this.variant === 'primary' ? 'none' : 'flat');
+  }
+
+  render() {
+    const Tag = this.href ? 'a' : 'button';
+    const size = this.size;
+    const iconSize = ICON_SIZE[size];
+    const textClass = TEXT_CLASS[size];
+    const elev = this.effectiveElevation;
+    const hasLabel = !!this.label;
+    const showLeading = this.hasIcon || this.loading;
+    const isIconOnly = showLeading && !hasLabel;
+    const isLabelOnly = hasLabel && !showLeading;
+    const isIconAndLabel = showLeading && hasLabel;
+    const bg = this.background;
+
+    const btnCls: Record<string, boolean> = {
+      btn: true,
+      [this.variant]: true,
+      [`intent${cap(this.intent)}`]: true,
+      [`size${size.toUpperCase()}`]: size !== 'md',
+      rounded: this.rounded,
+      inactive: this.inactive || this.loading,
+      iconOnly: isIconOnly,
+      labelOnly: isLabelOnly,
+      iconAndLabel: isIconAndLabel,
+      dropdown: this.dropdown,
+      [`contrast${cap(this.contrast)}`]: this.variant === 'primary' && this.intent !== 'none' && this.contrast !== 'bold',
+      [`elevation${cap(elev)}`]: true,
+      onMedium: bg === 'medium',
+      onBold: bg === 'bold',
+      onStrong: bg === 'strong',
+      onAlwaysDark: bg === 'always-dark',
+      fullWidth: this.fullWidth,
+    };
+
+    const extraProps: Record<string, unknown> = {};
+    if (Tag === 'button') {
+      extraProps.type = this.type;
+      extraProps.disabled = this.inactive || this.loading;
+    }
+    if (this.href) extraProps.href = this.href;
+    if (this.target) extraProps.target = this.target;
+
+    return (
+      <Host class={{ 'btn-host': true, 'btn-host--full': this.fullWidth }}>
+        <Tag
+          class={btnCls}
+          style={this.width ? { width: this.width } : undefined}
+          aria-label={this.ariaLabel}
+          aria-labelledby={this.ariaLabelledby}
+          aria-disabled={this.inactive || this.loading || undefined}
+          aria-busy={this.loading || undefined}
+          onClick={this.handleClick}
+          onMouseEnter={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseEnter.emit(e)}
+          onMouseLeave={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseLeave.emit(e)}
+          {...extraProps}
+        >
+          {/* Leading icon / loader */}
+          <span class="btn__icon" style={{ fontSize: `${iconSize}px`, display: showLeading ? undefined : 'none' }}>
+            {this.loading
+              ? <ds-loader size={iconSize} />
+              : <slot name="icon" />
+            }
+          </span>
+          {/* Label */}
+          {hasLabel && (
+            <span class={`btn__label ${textClass}`}>{this.label}</span>
+          )}
+          {/* Trailing chevron */}
+          {this.dropdown && (
+            <svg
+              class="btn__chevron"
+              width={iconSize}
+              height={iconSize}
+              viewBox="0 0 20 20"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          )}
+          {/* Badge */}
+          {this.badgeCount != null && this.badgeCount > 0 && (
+            <span class="btn__badge">
+              {this.badgeCount > 9 ? '+' : this.badgeCount}
+            </span>
+          )}
+        </Tag>
+      </Host>
+    );
+  }
+}
+
+function cap(s: string) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}

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

@@ -0,0 +1 @@
+export type { ButtonVariant, ButtonElevation, ButtonIntent, ButtonSize, ButtonContrast, ButtonBackground } from './Button';

package/src/wc/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,110 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+
+export type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';
+export type ButtonGroupSize      = 'xs' | 'sm' | 'md' | 'lg';
+
+export interface ButtonGroupItem {
+  label?: string;
+  /** Icon name for <ds-icon>. Set via JS property. */
+  icon?: string;
+  variant?: 'primary' | 'secondary';
+  intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';
+  inactive?: boolean;
+  href?: string;
+}
+
+@Component({
+  tag: 'ds-button-group',
+  styleUrl: 'ButtonGroup.css',
+  scoped: true,
+})
+export class ButtonGroup {
+  /**
+   * Array of button descriptors. Set via JS property.
+   * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];
+   */
+  @Prop() items: ButtonGroupItem[] = [];
+
+  /** Chrome level for the group container. */
+  @Prop() elevation: ButtonGroupElevation = 'flat';
+
+  /** Size passed to each ds-button. */
+  @Prop() size: ButtonGroupSize = 'md';
+
+  /** Pill shape for group + buttons. */
+  @Prop() rounded: boolean = false;
+
+  /** Emits the index of the clicked item. */
+  @Event() dsClick!: EventEmitter<number>;
+
+  render() {
+    const items = this.items;
+    const count = items.length;
+    const elev = this.elevation;
+    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);
+    const isGhost = elev === 'none';
+
+    const groupCls: Record<string, boolean> = {
+      group: true,
+      [`group${elevKey}`]: true,
+      groupRounded: this.rounded,
+    };
+
+    return (
+      <Host>
+        <div class={groupCls} role="group">
+          {items.map((item, i) => {
+            const isFirst = i === 0;
+            const isLast = i === count - 1;
+            const isMid = !isFirst && !isLast;
+            const variant = item.variant ?? 'secondary';
+            const isIconOnly = !!item.icon && !item.label;
+            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';
+            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'LG' | 'XS';
+
+            const itemCls: Record<string, boolean> = {
+              item: true,
+              first: isFirst,
+              last: isLast,
+              middle: isMid,
+              itemShort: isGhost && variant === 'secondary',
+              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),
+              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),
+              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),
+            };
+
+            const dividerCls: Record<string, boolean> = {
+              divider: true,
+              dividerGhost: isGhost,
+              dividerGhostXS: isGhost && this.size === 'xs',
+              dividerGhostSM: isGhost && this.size === 'sm',
+              dividerGhostLG: isGhost && this.size === 'lg',
+            };
+
+            return [
+              i > 0 && (
+                <div class={dividerCls} aria-hidden="true" />
+              ),
+              <ds-button
+                class={itemCls}
+                variant={variant}
+                intent={item.intent ?? 'none'}
+                elevation={elev}
+                size={this.size}
+                label={item.label}
+                rounded={this.rounded}
+                inactive={item.inactive}
+                href={item.href}
+                onDsClick={() => this.dsClick.emit(i)}
+              >
+                {item.icon && (
+                  <ds-icon slot="icon" name={item.icon} />
+                )}
+              </ds-button>,
+            ];
+          })}
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/Card/Card.tsx

@@ -0,0 +1,26 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+
+export type CardElevation = 'flat' | 'elevated' | 'floating';
+export type CardRadius = 'sm' | 'md' | 'lg' | 'xl';
+
+@Component({
+  tag: 'ds-card',
+  styleUrl: 'Card.css',
+  scoped: true,
+})
+export class Card {
+  @Prop() elevation: CardElevation = 'elevated';
+  @Prop() radius: CardRadius = 'lg';
+
+  render() {
+    return (
+      <Host class={{ card: true, [`elevation-${this.elevation}`]: true, [`radius-${this.radius}`]: true }}>
+        <slot name="header" />
+        <div class="body">
+          <slot />
+        </div>
+        <slot name="footer" />
+      </Host>
+    );
+  }
+}

package/src/wc/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,60 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+
+let idCounter = 0;
+
+@Component({
+  tag: 'ds-checkbox',
+  styleUrl: 'Checkbox.css',
+  scoped: true,
+})
+export class Checkbox {
+  private labelId = `ds-checkbox-label-${++idCounter}`;
+
+  @Prop() label!: string;
+  @Prop({ mutable: true }) checked: boolean = false;
+  @Prop() indeterminate: boolean = false;
+  @Prop() inactive: boolean = false;
+
+  @Event() dsChange!: EventEmitter<boolean>;
+
+  private handleActivate = () => {
+    if (this.inactive) return;
+    this.checked = !this.checked;
+    this.dsChange.emit(this.checked);
+  };
+
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      this.handleActivate();
+    }
+  };
+
+  render() {
+    const isMarked = this.checked || this.indeterminate;
+
+    return (
+      <Host
+        role="checkbox"
+        aria-checked={this.indeterminate ? 'mixed' : String(this.checked)}
+        aria-disabled={this.inactive || undefined}
+        aria-labelledby={this.labelId}
+        tabIndex={this.inactive ? -1 : 0}
+        class={{ checkbox: true, inactive: this.inactive }}
+        onClick={this.handleActivate}
+        onKeyDown={this.handleKeyDown}
+      >
+        <span class={{ box: true, 'box--marked': isMarked }}>
+          {isMarked && (
+            <span class="checkmark" aria-hidden="true">
+              {this.indeterminate ? '−' : '✓'}
+            </span>
+          )}
+        </span>
+        <span id={this.labelId} class="text-body-medium checkbox__label">
+          {this.label}
+        </span>
+      </Host>
+    );
+  }
+}

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

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

package/src/wc/components/Divider/Divider.tsx

@@ -0,0 +1,107 @@
+import { Component, Prop, h, Host } from '@stencil/core';
+
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerSurface =
+  | 'default'
+  | 'on-bold-background'
+  | 'on-strong-background'
+  | 'on-medium-background'
+  | 'on-translucent-background'
+  | 'navigation'
+  | 'media'
+  | 'always-dark'
+  | 'inverted';
+export type DividerInsetToken =
+  | 'space-000'
+  | 'space-012'
+  | 'space-025'
+  | 'space-050'
+  | 'space-075'
+  | 'space-100'
+  | 'space-125'
+  | 'space-150'
+  | 'space-175'
+  | 'space-200'
+  | 'space-250'
+  | 'space-300'
+  | 'space-400'
+  | 'space-600'
+  | 'space-800';
+export type DividerInset = 'none' | DividerInsetToken | (string & {});
+export type DividerLength = 'auto' | 'full' | (string & {});
+
+const INSET_VALUE: Record<'none' | DividerInsetToken, string> = {
+  none: '0',
+  'space-000': 'var(--dimension-space-000)',
+  'space-012': 'var(--dimension-space-012)',
+  'space-025': 'var(--dimension-space-025)',
+  'space-050': 'var(--dimension-space-050)',
+  'space-075': 'var(--dimension-space-075)',
+  'space-100': 'var(--dimension-space-100)',
+  'space-125': 'var(--dimension-space-125)',
+  'space-150': 'var(--dimension-space-150)',
+  'space-175': 'var(--dimension-space-175)',
+  'space-200': 'var(--dimension-space-200)',
+  'space-250': 'var(--dimension-space-250)',
+  'space-300': 'var(--dimension-space-300)',
+  'space-400': 'var(--dimension-space-400)',
+  'space-600': 'var(--dimension-space-600)',
+  'space-800': 'var(--dimension-space-800)',
+};
+
+@Component({
+  tag: 'ds-divider',
+  styleUrl: 'Divider.css',
+  scoped: true,
+})
+export class Divider {
+  /** Direction of the divider line. Defaults to 'horizontal'. */
+  @Prop() orientation: DividerOrientation = 'horizontal';
+
+  /** Surface context so the divider uses the right TokoMo divider token. */
+  @Prop() surface: DividerSurface = 'default';
+
+  /** Insets the divider from its start/end edges. Accepts spacing token names or any CSS length. */
+  @Prop() inset: DividerInset = 'none';
+
+  /** Visual line length. Defaults to filling the available axis. Accepts any CSS length. */
+  @Prop() length: DividerLength = 'auto';
+
+  /** Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default. */
+  @Prop() semantic: boolean = false;
+
+  private resolveInset(): string {
+    return Object.prototype.hasOwnProperty.call(INSET_VALUE, this.inset)
+      ? INSET_VALUE[this.inset as keyof typeof INSET_VALUE]
+      : this.inset;
+  }
+
+  private resolveLength(): string {
+    return this.length === 'auto' || this.length === 'full'
+      ? '100%'
+      : this.length;
+  }
+
+  render() {
+    const isVertical = this.orientation === 'vertical';
+    const hasCustomLength = this.length !== 'auto' && this.length !== 'full';
+
+    return (
+      <Host
+        role={this.semantic ? 'separator' : undefined}
+        aria-orientation={this.semantic ? this.orientation : undefined}
+        aria-hidden={this.semantic ? undefined : 'true'}
+        class={{
+          divider: true,
+          'divider--vertical': isVertical,
+          'divider--custom-length': hasCustomLength,
+          [`divider--surface-${this.surface}`]: true,
+        }}
+        style={{
+          '--_divider-inset': this.resolveInset(),
+          '--_divider-length': this.resolveLength(),
+        }}
+      />
+    );
+  }
+}

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

@@ -0,0 +1,2 @@
+export type { DividerOrientation } from './Divider';
+