@ds-mo/ui 1.1.0 → 1.3.0

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

@@ -1,22 +1,106 @@
 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',
-  shadow: true,
+  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="separator"
-        aria-orientation={this.orientation}
-        class={{ vertical: this.orientation === 'vertical' }}
+        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/Fade/Fade.tsx

@@ -1,30 +1,110 @@
 import { Component, Prop, h, Host } from '@stencil/core';
 
 export type FadeSide = 'top' | 'bottom' | 'left' | 'right';
+export type FadeSurface =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'navigation'
+  | 'media'
+  | 'always-dark'
+  | 'inverted';
+export type FadeSizeToken =
+  | 'size-000'
+  | 'size-050'
+  | 'size-075'
+  | 'size-100'
+  | 'size-150'
+  | 'size-200'
+  | 'size-250'
+  | 'size-300'
+  | 'size-400'
+  | 'size-500'
+  | 'size-600'
+  | 'size-800';
+export type FadeSize = FadeSizeToken | (string & {});
+
+const SIZE_VALUE: Record<FadeSizeToken, string> = {
+  'size-000': 'var(--dimension-size-000)',
+  'size-050': 'var(--dimension-size-050)',
+  'size-075': 'var(--dimension-size-075)',
+  'size-100': 'var(--dimension-size-100)',
+  'size-150': 'var(--dimension-size-150)',
+  'size-200': 'var(--dimension-size-200)',
+  'size-250': 'var(--dimension-size-250)',
+  'size-300': 'var(--dimension-size-300)',
+  'size-400': 'var(--dimension-size-400)',
+  'size-500': 'var(--dimension-size-500)',
+  'size-600': 'var(--dimension-size-600)',
+  'size-800': 'var(--dimension-size-800)',
+};
+
+const SURFACE_BACKGROUND: Record<FadeSurface, string> = {
+  default: 'var(--color-background-secondary)',
+  primary: 'var(--color-background-primary)',
+  secondary: 'var(--color-background-secondary)',
+  navigation: 'var(--color-navigation-background)',
+  media: 'var(--color-media-background)',
+  'always-dark': 'var(--color-always-dark-background)',
+  inverted: 'var(--color-inverted-background)',
+};
 
 @Component({
   tag: 'ds-fade',
   styleUrl: 'Fade.css',
-  shadow: true,
+  scoped: true,
 })
 export class Fade {
-  @Prop() side!: FadeSide;
-  /** Height (or width for left/right) of the fade overlay — any CSS value. */
+  /** Edge where the fade is anchored. */
+  @Prop() side: FadeSide = 'bottom';
+
+  /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */
+  @Prop() size: FadeSize = 'size-600';
+
+  /**
+   * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.
+   * Prefer `size`.
+   */
   @Prop() height: string | undefined;
-  /** Background color to fade from. Defaults to var(--color-background-secondary). */
+
+  /** Surface context used to choose the fade target background token. */
+  @Prop() surface: FadeSurface = 'default';
+
+  /** Direct background override for contexts that already expose a resolved surface var. */
   @Prop() background: string = 'var(--color-background-secondary)';
 
+  /** Controls visibility without removing the element from layout/positioning. */
+  @Prop() visible: boolean = true;
+
+  private resolveSize(): string {
+    if (this.height) return this.height;
+
+    return Object.prototype.hasOwnProperty.call(SIZE_VALUE, this.size)
+      ? SIZE_VALUE[this.size as FadeSizeToken]
+      : this.size;
+  }
+
+  private resolveBackground(): string {
+    if (this.background !== 'var(--color-background-secondary)') return this.background;
+    return SURFACE_BACKGROUND[this.surface];
+  }
+
   render() {
+    const isVerticalEdge = this.side === 'top' || this.side === 'bottom';
+
     return (
       <Host
         aria-hidden="true"
         class={{
           fade: true,
+          'fade--hidden': !this.visible,
+          'fade--vertical-edge': isVerticalEdge,
+          'fade--horizontal-edge': !isVerticalEdge,
           [`fade--${this.side}`]: true,
         }}
         style={{
-          height: this.height,
-          '--ds-fade-bg': this.background,
+          '--ds-fade-size': this.resolveSize(),
+          '--ds-fade-bg': this.resolveBackground(),
         } as Record<string, string>}
       />
     );

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

@@ -1 +1 @@
-export type { FadeSide } from './Fade';
+export type { FadeSide, FadeSize, FadeSizeToken, FadeSurface } from './Fade';

package/src/wc/components/PanelNav/PanelNav.tsx

@@ -517,7 +517,15 @@ export class PanelNav {
           </ds-text>
         </span>
       </span>,
-      item.dot && <span class="panel-nav__item-dot" aria-hidden="true" />,
+      item.dot && (
+        <ds-badge
+          class="panel-nav__item-dot"
+          variant="dot"
+          background="var(--_nav-bg)"
+          label=""
+          aria-hidden="true"
+        />
+      ),
     ];
 
     const sharedProps = {
@@ -604,6 +612,14 @@ export class PanelNav {
 
           {/* ── Footer ── */}
           <div class="panel-nav__footer">
+            <ds-fade
+              class="panel-nav__footer-fade"
+              side="bottom"
+              size="size-600"
+              background="var(--_nav-bg)"
+              visible={!this.atBottom}
+            />
+
             {/* Left icon button — Gear in dashboard, Dashboard in settings */}
             <button
               type="button"

package/src/wc/components/TabGroup/TabGroup.tsx

@@ -176,7 +176,15 @@ export class TabGroup {
                   [isSelected ? 'text-body-small-emphasis' : 'text-body-small']: true,
                 }}>
                   {tab.label}
-                  {tab.dot && <span class="tab__dot" aria-hidden="true" />}
+                  {tab.dot && (
+                    <ds-badge
+                      class="tab__dot"
+                      variant="dot"
+                      background="var(--_dot-ring)"
+                      label=""
+                      aria-hidden="true"
+                    />
+                  )}
                 </span>
               </button>
             );

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

@@ -176,7 +176,15 @@ export class TabGroupNav {
                   [isSelected ? 'text-body-medium-emphasis' : 'text-body-medium']: true,
                 }}>
                   {tab.label}
-                  {tab.dot && <span class="tab__dot" aria-hidden="true" />}
+                  {tab.dot && (
+                    <ds-badge
+                      class="tab__dot"
+                      variant="dot"
+                      background="var(--_dot-ring)"
+                      label=""
+                      aria-hidden="true"
+                    />
+                  )}
                 </span>
               </button>
             );

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

@@ -1,10 +1,9 @@
-import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+import { Component, Prop, 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',
@@ -26,45 +25,10 @@ export class Tag {
   @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];
 
@@ -80,29 +44,15 @@ export class Tag {
       [`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--rounded-no-remove-right': this.rounded,
       [`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',
+      [`tag--icon-right-${sz}`]: false,
     };
 
     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' }}>
@@ -112,23 +62,6 @@ export class Tag {
         <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

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

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

@@ -26,6 +26,7 @@ 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';
 
 @Component({
   tag: 'ds-text',
@@ -40,6 +41,7 @@ export class Text {
   @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;
@@ -80,6 +82,7 @@ export class Text {
       'text--align-left':   this.align === 'left',
       'text--align-center': this.align === 'center',
       'text--align-right':  this.align === 'right',
+      'text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',
     };
 
     const style = this.color && isCustomColor(this.color)