@ds-mo/ui 2.11.2 → 2.13.0

package/src/react/{ds-fade.ts → ds-card.ts}

@@ -12,15 +12,15 @@ import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
 
 import type { Components } from "@ds-mo/ui/dist/components";
-import { DsFade as DsFadeElement, defineCustomElement as defineDsFade } from "@ds-mo/ui/dist/components/ds-fade.js";
+import { DsCard as DsCardElement, defineCustomElement as defineDsCard } from "@ds-mo/ui/dist/components/ds-card.js";
 
-export type DsFadeEvents = NonNullable<unknown>;
+export type DsCardEvents = NonNullable<unknown>;
 
-export const DsFade: StencilReactComponent<DsFadeElement, DsFadeEvents, Components.DsFade> = /*@__PURE__*/ createComponent<DsFadeElement, DsFadeEvents, Components.DsFade>({
-    tagName: 'ds-fade',
-    elementClass: DsFadeElement,
+export const DsCard: StencilReactComponent<DsCardElement, DsCardEvents, Components.DsCard> = /*@__PURE__*/ createComponent<DsCardElement, DsCardEvents, Components.DsCard>({
+    tagName: 'ds-card',
+    elementClass: DsCardElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {} as DsFadeEvents,
-    defineCustomElement: defineDsFade
+    events: {} as DsCardEvents,
+    defineCustomElement: defineDsCard
 });

package/src/react/ds-chip.ts

@@ -15,21 +15,13 @@ import { type DsChipCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsChip as DsChipElement, defineCustomElement as defineDsChip } from "@ds-mo/ui/dist/components/ds-chip.js";
 
-export type DsChipEvents = {
-    onDsRemove: EventName<DsChipCustomEvent<void>>,
-    onDsClick: EventName<DsChipCustomEvent<void>>,
-    onDsPressedChange: EventName<DsChipCustomEvent<boolean>>
-};
+export type DsChipEvents = { onDsRemove: EventName<DsChipCustomEvent<void>> };
 
 export const DsChip: StencilReactComponent<DsChipElement, DsChipEvents, Components.DsChip> = /*@__PURE__*/ createComponent<DsChipElement, DsChipEvents, Components.DsChip>({
     tagName: 'ds-chip',
     elementClass: DsChipElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {
-        onDsRemove: 'dsRemove',
-        onDsClick: 'dsClick',
-        onDsPressedChange: 'dsPressedChange'
-    } as DsChipEvents,
+    events: { onDsRemove: 'dsRemove' } as DsChipEvents,
     defineCustomElement: defineDsChip
 });

package/src/wc/components/BarNav/BarNav.tsx

@@ -687,15 +687,16 @@ export class BarNav {
             )}
 
             {hasTabs && this.hasOverflowTabs && (
-              <ds-button-unfilled-icon
+              <ds-button-unfilled variant="icon"
                 class={{
                   'bar-nav__overflow-trigger': true,
                 }}
                 icon="Ellipses"
                 isActive={this.menuOpen}
                 activeFill={false}
+                hasBorder={false}
                 focusTabIndex={this.overflowRovingFocused ? 0 : -1}
-                ref={(el?: HTMLDsButtonUnfilledIconElement) => {
+                ref={(el?: HTMLDsButtonUnfilledElement) => {
                   this.triggerEl = (el as (HTMLElement & { setFocus?: () => Promise<void> })) ?? null;
                 }}
                 haspopup="menu"

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

@@ -24,7 +24,7 @@ export function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSec
       label: item.label,
       value: item.id,
       isSelected: item.id === selectedId,
-      isInactive: item.disabled,
+      isInactive: item.isInactive,
     });
   }
 

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

@@ -1,4 +1,5 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
+import { controlWidthClass, type ControlWidth } from '../../utils/control-width';
 
 export type ButtonFilledIntent =
   | 'neutral'
@@ -13,6 +14,29 @@ export type ButtonFilledIntent =
 
 export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
 
+export type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';
+
+export type ButtonFilledSize = 'md' | 'sm' | 'xs';
+
+export type ButtonFilledWidth = ControlWidth;
+
+/** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */
+const TEXT_VARIANT: Record<ButtonFilledSize, string> = {
+  md: 'text-body-medium-emphasis',
+  sm: 'text-body-small-emphasis',
+  xs: 'text-caption-emphasis',
+};
+
+/**
+ * `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',
@@ -21,7 +45,22 @@ export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
 export class ButtonFilled {
   @Element() el!: HTMLElement;
 
-  /** Icon name passed to <ds-icon>. */
+  /**
+   * 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. */
@@ -34,12 +73,12 @@ export class ButtonFilled {
   @Prop() contrast: ButtonFilledContrast = 'bold';
 
   /** Disables interaction. */
-  @Prop() inactive: boolean = false;
+  @Prop() isInactive: boolean = false;
 
   /** Native button type. */
   @Prop() type: 'button' | 'submit' | 'reset' = 'button';
 
-  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
 
   @Event() dsClick!: EventEmitter<MouseEvent>;
 
@@ -51,34 +90,81 @@ export class ButtonFilled {
   }
 
   private handleClick = (event: MouseEvent) => {
-    if (this.inactive) return;
+    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 = TEXT_VARIANT[this.size];
+    const iconSize = ICON_SIZE[this.size];
+
     const cls: Record<string, boolean> = {
       'button-filled': true,
       'ds-focus-ring-inset': true,
-      'button-filled--inactive': this.inactive,
+      '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 tabIndex={-1}>
+      <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.inactive}
-          aria-label={this.ariaLabel}
+          disabled={this.isInactive}
+          aria-label={this.accessibleName}
           onClick={this.handleClick}
         >
-          <span class="button-filled__icon-wrap">
-            <ds-icon name={this.icon} size="md" color="inherit" />
-          </span>
+          {this.showIcon && (
+            <span class="button-filled__icon-wrap ds-interaction-fill__content">
+              <ds-icon name={this.icon} size={iconSize} color="inherit" />
+            </span>
+          )}
+          {this.showLabel && (
+            <span class={{ 'button-filled__label': true, [textVariant]: true, 'ds-interaction-fill__content': true }}>
+              {this.label}
+            </span>
+          )}
         </button>
       </Host>
     );

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

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

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

@@ -0,0 +1,230 @@
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
+import { controlWidthClass, type ControlWidth } from '../../utils/control-width';
+
+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;
+
+/** Emphasis text per control-density size (buttons use emphasis, unlike Tag). */
+const TEXT_VARIANT: Record<ButtonUnfilledSize, string> = {
+  md: 'text-body-medium-emphasis',
+  sm: 'text-body-small-emphasis',
+  xs: 'text-caption-emphasis',
+};
+
+/**
+ * `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 = 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 && (
+            <span class={{ 'button-unfilled__label': true, [textVariant]: true, 'ds-interaction-fill__content': true }}>
+              {this.label}
+            </span>
+          )}
+        </button>
+      </Host>
+    );
+  }
+}

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

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

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

@@ -0,0 +1,79 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+
+export type CardWidth = 'sm' | 'md' | 'lg';
+
+/** Visual chrome recipe — default app surface, or settings edit wash. */
+export type CardAppearance = 'default' | 'editing';
+
+const CARD_WIDTH_VARS: Record<CardWidth, string> = {
+  sm: 'var(--dimension-card-width-sm)',
+  md: 'var(--dimension-card-width-md)',
+  lg: 'var(--dimension-card-width-lg)',
+};
+
+const CARD_HEIGHT_VARS: Record<CardWidth, string> = {
+  sm: 'var(--dimension-card-height-sm)',
+  md: 'var(--dimension-card-height-md)',
+  lg: 'var(--dimension-card-height-lg)',
+};
+
+const FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';
+
+/**
+ * Shared card chrome — width + matching min-height tokens, header (title + actions),
+ * and a flex body that fills leftover space. Compose this from settings / data-viz cards.
+ */
+@Component({
+  tag: 'ds-card',
+  styleUrl: 'Card.css',
+  scoped: true,
+})
+export class Card {
+  /** Section heading shown in the card header. */
+  @Prop() heading!: string;
+
+  /**
+   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the
+   * matching `--dimension-card-height-*` so empty bodies still fill the card.
+   */
+  @Prop() cardWidth: CardWidth = 'md';
+
+  /** Chrome recipe — `editing` applies the settings edit wash. */
+  @Prop() appearance: CardAppearance = 'default';
+
+  render() {
+    const editing = this.appearance === 'editing';
+
+    return (
+      <Host
+        class={{
+          card: true,
+          'card--editing': editing,
+        }}
+        style={{
+          '--_card-width': CARD_WIDTH_VARS[this.cardWidth],
+          '--_card-min-height': CARD_HEIGHT_VARS[this.cardWidth],
+        }}
+      >
+        <header class="card__header">
+          <div class="card__title-wrap">
+            <ds-text
+              class="card__title"
+              variant="text-title-small"
+              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}
+              as="h2"
+            >
+              {this.heading}
+            </ds-text>
+          </div>
+          <div class="card__actions">
+            <slot name="actions" />
+          </div>
+        </header>
+        <div class="card__body">
+          <slot />
+        </div>
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1 @@
+export type { CardWidth, CardAppearance } from './Card';