@ds-mo/ui 1.2.0 → 1.4.0

package/dist/types/nav/index.d.ts

@@ -0,0 +1,5 @@
+export type { NavChromeStyle } from './nav-chrome';
+export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, resolveNavChromeStyle, shouldResyncNavChromeStyle, } from './nav-chrome';
+export { SHELL_BAR_NAV_VT_NAME, parseCssTimeMs, ensureShellNavVtStyle, resolveShellNavRevealOrigin, setShellNavRevealOriginVars, animateShellNavRadialReveal, runShellNavStyleRevealOnReady, } from './shell-view-transition';
+export type { ShellNavRevealOrigin } from './shell-view-transition';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/nav/nav-chrome.d.ts

@@ -0,0 +1,14 @@
+/** Visual chrome family for primary/secondary navigation surfaces. */
+export type NavChromeStyle = 'navigation' | 'default';
+/** `document.documentElement` attribute for pre-bootstrap style hints (SPA hard reload). */
+export declare const NAV_STYLE_HINT_ATTR = "data-nav-style";
+/** Parse `nav-style` from a host or document hint attribute value. */
+export declare function readNavStyleAttr(attr: string | null): NavChromeStyle | undefined;
+/** Set a document-level style hint before nav custom elements upgrade (hard reload). */
+export declare function setNavStyleHint(style: NavChromeStyle): void;
+export declare function clearNavStyleHint(): void;
+/** Resolve initial nav chrome style — host attr, then document hint, then prop default. */
+export declare function resolveNavChromeStyle(styleProp: NavChromeStyle, styleAttr: string | null, documentStyleAttr?: string | null): NavChromeStyle;
+/** True when internal rendered surface lags the host `style` prop. */
+export declare function shouldResyncNavChromeStyle(renderedStyle: NavChromeStyle, style: NavChromeStyle): boolean;
+//# sourceMappingURL=nav-chrome.d.ts.map

package/dist/types/nav/shell-view-transition.d.ts

@@ -0,0 +1,21 @@
+/** `view-transition-name` on `ds-bar-nav` — pairs with root reveal in shell apps. */
+export declare const SHELL_BAR_NAV_VT_NAME = "ds-shell-bar-nav";
+/** Parse a CSS <time> value to milliseconds. */
+export declare function parseCssTimeMs(value: string, fallback: number): number;
+/** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */
+export declare function ensureShellNavVtStyle(): void;
+export interface ShellNavRevealOrigin {
+    x: number;
+    y: number;
+    maxRadius: number;
+}
+/** Origin for the radial reveal — defaults to panel-nav footer gear, then viewport center. */
+export declare function resolveShellNavRevealOrigin(originEl?: HTMLElement | null): ShellNavRevealOrigin;
+export declare function setShellNavRevealOriginVars(origin: ShellNavRevealOrigin): void;
+/** Animate root + bar-nav snapshots with the same radial clip-path reveal. */
+export declare function animateShellNavRadialReveal(origin: ShellNavRevealOrigin, durationMs?: number): void;
+/** Run radial reveal when a view transition's `ready` promise settles (app/router driver). */
+export declare function runShellNavStyleRevealOnReady(transition: {
+    ready: Promise<void>;
+}, originEl?: HTMLElement | null): void;
+//# sourceMappingURL=shell-view-transition.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -41,6 +41,10 @@
       "types": "./src/wc/components.d.ts",
       "import": "./dist/components/index.js"
     },
+    "./nav": {
+      "types": "./src/wc/nav/index.ts",
+      "import": "./src/wc/nav/index.ts"
+    },
     "./dist/components/*": "./dist/components/*"
   },
   "files": [
@@ -50,6 +54,7 @@
     "src/wc/components/**/*.tsx",
     "!src/wc/components/**/*.stories.ts",
     "!src/wc/components/**/*.stories.tsx",
+    "src/wc/nav",
     "src/angular",
     "src/react"
   ],
@@ -58,18 +63,24 @@
     "pretypecheck": "node scripts/generate-icon-catalog.mjs",
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs",
-    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts",
+    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/shell-view-transition.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts",
     "test:e2e": "npm run build && playwright test",
     "test:e2e:install": "playwright install chromium",
     "build:docs": "stencil build --docs",
-    "dev": "node scripts/generate-icon-catalog.mjs && stencil build --dev --watch",
-    "storybook": "stencil build && storybook dev -p 6006",
+    "dev": "node scripts/generate-icon-catalog.mjs && stencil build --watch",
+    "storybook:ui": "storybook dev -p 6006 --no-open",
+    "storybook": "node scripts/storybook-dev.mjs",
     "storybook:build": "storybook build",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",
     "registry:build": "node scripts/build-registry.mjs",
-    "mcp": "node scripts/mcp-server.mjs"
+    "mcp": "node scripts/mcp-server.mjs",
+    "figma:connect:help": "figma connect --help",
+    "figma:connect:publish:dry-run": "figma connect publish --dry-run -c figma.config.json --exit-on-unreadable-files",
+    "figma:connect:publish": "figma connect publish -c figma.config.json --exit-on-unreadable-files",
+    "figma:connect:preview": "figma connect preview -c figma.config.json",
+    "typecheck:figma": "tsc -p tsconfig.figma.json --noEmit"
   },
   "peerDependencies": {
     "@ds-mo/icons": "^6.0.0",
@@ -87,8 +98,9 @@
   },
   "devDependencies": {
     "@ds-mo/icons": "^6.0.0",
-    "@ds-mo/tokens": "^2.9.1",
+    "@ds-mo/tokens": "^2.10.0",
     "@eslint/js": "^10.0.1",
+    "@figma/code-connect": "^1.4.8",
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@playwright/test": "^1.55.0",
     "@stencil/angular-output-target": "^1.3.1",

package/src/angular/index.ts

@@ -12,6 +12,7 @@ export const DIRECTIVES = [
   d.DsButtonGroup,
   d.DsCard,
   d.DsCheckbox,
+  d.DsChip,
   d.DsDivider,
   d.DsEmptyState,
   d.DsFade,

package/src/angular/proxies.ts

@@ -36,14 +36,14 @@ export declare interface DsAccordion extends Components.DsAccordion {
 
 
 @ProxyCmp({
-  inputs: ['count', 'isSelected', 'label']
+  inputs: ['background', 'count', 'isSelected', 'label', 'max', 'surface', 'variant']
 })
 @Component({
   selector: 'ds-badge',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['count', 'isSelected', 'label'],
+  inputs: ['background', 'count', 'isSelected', 'label', 'max', 'surface', 'variant'],
   standalone: false
 })
 export class DsBadge {
@@ -87,14 +87,14 @@ export declare interface DsBanner extends Components.DsBanner {
 
 
 @ProxyCmp({
-  inputs: ['actions', 'actionsJson', 'background', 'basePath', 'currentUrl', 'heading', 'tabs', 'tabsJson', 'value']
+  inputs: ['actions', 'actionsJson', 'basePath', 'currentUrl', 'heading', 'navStyle', 'tabs', 'tabsJson', 'value']
 })
 @Component({
   selector: 'ds-bar-nav',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['actions', 'actionsJson', 'background', 'basePath', 'currentUrl', 'heading', 'tabs', 'tabsJson', 'value'],
+  inputs: ['actions', 'actionsJson', 'basePath', 'currentUrl', 'heading', 'navStyle', 'tabs', 'tabsJson', 'value'],
   outputs: ['dsTabChange', 'dsActionChange'],
   standalone: false
 })
@@ -296,6 +296,46 @@ export declare interface DsCheckbox extends Components.DsCheckbox {
 }
 
 
+@ProxyCmp({
+  inputs: ['background', 'contrast', 'elevation', 'inactive', 'intent', 'label', 'maxWidth', 'pressed', 'removable', 'rounded', 'size']
+})
+@Component({
+  selector: 'ds-chip',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['background', 'contrast', 'elevation', 'inactive', 'intent', { name: 'label', required: true }, 'maxWidth', 'pressed', 'removable', 'rounded', 'size'],
+  outputs: ['dsRemove', 'dsClick', 'dsPressedChange'],
+  standalone: false
+})
+export class DsChip {
+  protected el: HTMLDsChipElement;
+  @Output() dsRemove = new EventEmitter<CustomEvent<void>>();
+  @Output() dsClick = new EventEmitter<CustomEvent<void>>();
+  @Output() dsPressedChange = new EventEmitter<CustomEvent<boolean>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsChip extends Components.DsChip {
+  /**
+   * Fired when the remove button is clicked.
+   */
+  dsRemove: EventEmitter<CustomEvent<void>>;
+  /**
+   * Fired when an interactive chip is clicked.
+   */
+  dsClick: EventEmitter<CustomEvent<void>>;
+  /**
+   * Fired when the pressed state toggles.
+   */
+  dsPressedChange: EventEmitter<CustomEvent<boolean>>;
+}
+
+
 @ProxyCmp({
   inputs: ['inset', 'length', 'orientation', 'semantic', 'surface']
 })
@@ -343,14 +383,14 @@ export declare interface DsEmptyState extends Components.DsEmptyState {}
 
 
 @ProxyCmp({
-  inputs: ['background', 'height', 'side']
+  inputs: ['background', 'height', 'side', 'size', 'surface', 'visible']
 })
 @Component({
   selector: 'ds-fade',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['background', 'height', { name: 'side', required: true }],
+  inputs: ['background', 'height', 'side', 'size', 'surface', 'visible'],
   standalone: false
 })
 export class DsFade {
@@ -579,14 +619,14 @@ export declare interface DsPagination extends Components.DsPagination {
 
 
 @ProxyCmp({
-  inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'disableViewTransition', 'groups', 'routerMode', 'storageKey', 'userInitial', 'userName', 'variant']
+  inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'disableViewTransition', 'groups', 'navStyle', 'routerMode', 'storageKey', 'userInitial', 'userName']
 })
 @Component({
   selector: 'ds-panel-nav',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'disableViewTransition', 'groups', 'routerMode', 'storageKey', 'userInitial', 'userName', 'variant'],
+  inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'disableViewTransition', 'groups', 'navStyle', 'routerMode', 'storageKey', 'userInitial', 'userName'],
   outputs: ['dsNavSelect', 'dsNavToggle', 'dsNavFooterAction', 'dsNavUserAction'],
   standalone: false
 })
@@ -902,22 +942,18 @@ export declare interface DsTable extends Components.DsTable {
 
 
 @ProxyCmp({
-  inputs: ['background', 'contrast', 'elevation', 'inactive', 'intent', 'interactive', 'label', 'maxWidth', 'pressed', 'removable', 'rounded', 'size']
+  inputs: ['contrast', 'elevation', 'intent', 'label', 'maxWidth', 'rounded', 'size']
 })
 @Component({
   selector: 'ds-tag',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['background', 'contrast', 'elevation', 'inactive', 'intent', 'interactive', { name: 'label', required: true }, 'maxWidth', 'pressed', 'removable', 'rounded', 'size'],
-  outputs: ['dsRemove', 'dsClick', 'dsPressedChange'],
+  inputs: ['contrast', 'elevation', 'intent', { name: 'label', required: true }, 'maxWidth', 'rounded', 'size'],
   standalone: false
 })
 export class DsTag {
   protected el: HTMLDsTagElement;
-  @Output() dsRemove = new EventEmitter<CustomEvent<void>>();
-  @Output() dsClick = new EventEmitter<CustomEvent<void>>();
-  @Output() dsPressedChange = new EventEmitter<CustomEvent<boolean>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -925,20 +961,7 @@ export class DsTag {
 }
 
 
-export declare interface DsTag extends Components.DsTag {
-  /**
-   * Fired when the remove button is clicked.
-   */
-  dsRemove: EventEmitter<CustomEvent<void>>;
-  /**
-   * Fired when an interactive tag is clicked.
-   */
-  dsClick: EventEmitter<CustomEvent<void>>;
-  /**
-   * Fired when the pressed state toggles.
-   */
-  dsPressedChange: EventEmitter<CustomEvent<boolean>>;
-}
+export declare interface DsTag extends Components.DsTag {}
 
 
 @ProxyCmp({

package/src/react/components.ts

@@ -14,6 +14,7 @@ export { DsButtonGroup } from "./ds-button-group.js";
 export { DsButton } from "./ds-button.js";
 export { DsCard } from "./ds-card.js";
 export { DsCheckbox } from "./ds-checkbox.js";
+export { DsChip } from "./ds-chip.js";
 export { DsDivider } from "./ds-divider.js";
 export { DsEmptyState } from "./ds-empty-state.js";
 export { DsFade } from "./ds-fade.js";

package/src/react/ds-chip.ts

@@ -0,0 +1,35 @@
+'use client';
+
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+
+/* eslint-disable */
+
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+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 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,
+    defineCustomElement: defineDsChip
+});

package/src/react/ds-tag.ts

@@ -7,29 +7,20 @@
 
 /* eslint-disable */
 
-import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { StencilReactComponent } from '@stencil/react-output-target/runtime';
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
 
-import { type DsTagCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTag as DsTagElement, defineCustomElement as defineDsTag } from "@ds-mo/ui/dist/components/ds-tag.js";
 
-export type DsTagEvents = {
-    onDsRemove: EventName<DsTagCustomEvent<void>>,
-    onDsClick: EventName<DsTagCustomEvent<void>>,
-    onDsPressedChange: EventName<DsTagCustomEvent<boolean>>
-};
+export type DsTagEvents = NonNullable<unknown>;
 
 export const DsTag: StencilReactComponent<DsTagElement, DsTagEvents, Components.DsTag> = /*@__PURE__*/ createComponent<DsTagElement, DsTagEvents, Components.DsTag>({
     tagName: 'ds-tag',
     elementClass: DsTagElement,
     // @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 DsTagEvents,
+    events: {} as DsTagEvents,
     defineCustomElement: defineDsTag
 });

package/src/wc/components/Badge/Badge.tsx

@@ -1,32 +1,82 @@
 import { Component, Prop, h, Host } from '@stencil/core';
 
+export type BadgeVariant = 'counter' | 'dot';
+export type BadgeSurface =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'medium'
+  | 'bold'
+  | 'strong'
+  | 'navigation'
+  | 'always-dark';
+
+const SURFACE_RING: Record<BadgeSurface, string> = {
+  default: 'var(--color-background-secondary)',
+  primary: 'var(--color-background-primary)',
+  secondary: 'var(--color-background-secondary)',
+  medium: 'var(--color-background-medium-neutral)',
+  bold: 'var(--color-background-bold-neutral)',
+  strong: 'var(--color-background-strong-neutral)',
+  navigation: 'var(--color-navigation-background)',
+  'always-dark': 'var(--color-always-dark-background)',
+};
+
 @Component({
   tag: 'ds-badge',
   styleUrl: 'Badge.css',
   scoped: true,
 })
 export class Badge {
+  /** Render as a compact counter or notification dot. */
+  @Prop() variant: BadgeVariant = 'counter';
+
+  /** Count shown for counter badges. Count 0 hides the badge. */
   @Prop() count: number = 0;
+
+  /** Highest count shown before compacting to "+". */
+  @Prop() max: number = 9;
+
+  /** Surface context for the ring around dots. */
+  @Prop() surface: BadgeSurface = 'default';
+
+  /** Direct ring background override for component-local surfaces. */
+  @Prop() background: string | undefined;
+
+  /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */
   @Prop() isSelected: boolean = false;
+
   /** Accessible label. Defaults to the count as a string. */
   @Prop() label: string | undefined;
 
   render() {
-    if (this.count === 0) return <Host style={{ display: 'none' }} />;
+    const isDot = this.variant === 'dot';
+
+    if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;
 
-    const display = this.count > 9 ? '+' : String(this.count);
-    const ariaLabel = this.label ?? String(this.count);
+    const display = this.count > this.max ? '+' : String(this.count);
+    const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));
+    const ring = this.background ?? SURFACE_RING[this.surface];
 
     return (
-      <Host class="badge" aria-label={ariaLabel}>
+      <Host
+        class={{
+          badge: true,
+          'badge--counter': !isDot,
+          'badge--dot': isDot,
+          'badge--selected': this.isSelected,
+        }}
+        aria-label={ariaLabel}
+        style={{ '--_badge-ring': ring }}
+      >
         <span
           class={{
-            'text-caption-emphasis': true,
-            'badge__text': true,
-            'badge__text--selected': this.isSelected,
+            'badge__mark': true,
+            'text-caption-emphasis': !isDot,
           }}
+          aria-hidden="true"
         >
-          {display}
+          {!isDot && display}
         </span>
       </Host>
     );

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

@@ -1 +1 @@
-export type {} from './Badge';
+export type { BadgeVariant, BadgeSurface } from './Badge';

package/src/wc/components/Banner/Banner.tsx

@@ -87,8 +87,8 @@ export class Banner {
 
   private getElevation(): string {
     return this.floating
-      ? 'var(--effect-elevation-elevated-floating, var(--effect-elevation-floating))'
-      : 'var(--effect-elevation-elevated)';
+      ? 'var(--effect-elevation-elevated-floating)'
+      : 'var(--effect-elevation-elevated-sm)';
   }
 
   render() {

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

@@ -10,7 +10,9 @@ import {
 } from '@stencil/core';
 import type { MenuItemData } from '../Menu/Menu';
 import type { BarNavActionBackground } from '../BarNavAction/BarNavAction';
-import type { TabItem } from '../TabGroup/tab-item-utils';
+import type { NavChromeStyle } from '../../nav/nav-chrome';
+import { SHELL_BAR_NAV_VT_NAME } from '../../nav/shell-view-transition';
+import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
 import {
   deriveBarNavValueFromUrl,
   parseJsonArrayProp,
@@ -28,23 +30,6 @@ import {
   tabsToMenuSections,
 } from './bar-nav-tabs-menu-utils';
 
-export type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
-
-/** Same shape as `TabItem` — supports `{ type: 'divider' }` between tab groups. */
-export type BarNavTab = TabItem;
-
-export interface BarNavActionItem {
-  id: string;
-  /** Icon name for <ds-icon>. */
-  icon: string;
-  /** Whether this action button is currently pressed/active. */
-  selected?: boolean;
-  /** Show a notification dot. */
-  dot?: boolean;
-  inactive?: boolean;
-  ariaLabel?: string;
-}
-
 @Component({
   tag: 'ds-bar-nav',
   styleUrl: 'BarNav.css',
@@ -78,8 +63,9 @@ export class BarNav {
    */
   @Prop() heading: string | undefined;
 
-  /** Surface background variant. */
-  @Prop() background: BarNavBackground = 'secondary';
+  /** Chrome style: `navigation` = navigation tokens, `default` = app tokens.
+   *  Property: `navStyle`. HTML attribute: `nav-style`. */
+  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'default';
 
   /** Section base path (e.g. `/dashboard/safety`). Used with `currentUrl` to derive `value`. */
   @Prop() basePath: string = '';
@@ -455,20 +441,24 @@ export class BarNav {
     }
   }
 
+  private get tabSurface(): BarNavActionBackground | undefined {
+    return this.navStyle === 'navigation' ? 'navigation' : undefined;
+  }
+
   render() {
     const hasTabs = this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;
-
-    const bgToActionBg: Partial<Record<BarNavBackground, BarNavActionBackground>> = {};
-    const actionBg: BarNavActionBackground | undefined = bgToActionBg[this.background];
+    const tabSurface = this.tabSurface;
 
     return (
       <Host>
         <header
           class={{
             'bar-nav': true,
-            [`bg-${this.background}`]: true,
+            'bar-nav--navigation': this.navStyle === 'navigation',
+            'bar-nav--default': this.navStyle === 'default',
             'bar-nav--tabs-collapsed': hasTabs && this.tabsCollapsed,
           }}
+          style={{ viewTransitionName: SHELL_BAR_NAV_VT_NAME }}
           ref={el => {
             this.headerEl = el as HTMLElement;
             if (el && !this.resizeObserver) {
@@ -488,6 +478,7 @@ export class BarNav {
                   }}
                   tabs={this.resolvedTabs}
                   value={this.effectiveValue}
+                  background={tabSurface}
                 />
               </div>
             )}
@@ -501,6 +492,7 @@ export class BarNav {
                   }}
                   tabs={this.resolvedTabs}
                   value={this.effectiveValue}
+                  background={tabSurface}
                   onDsChange={(e: Event) => this.handleTabChange(e)}
                 />
               </div>
@@ -551,7 +543,13 @@ export class BarNav {
                     {this.activeTabLabel}
                   </span>
                   {this.activeTabHasDot && (
-                    <span class="bar-nav__tab-trigger-dot" aria-hidden="true" />
+                    <ds-badge
+                      class="bar-nav__tab-trigger-dot"
+                      variant="dot"
+                      background="var(--_bar-nav-bg)"
+                      label=""
+                      aria-hidden="true"
+                    />
                   )}
                 </span>
                 <ds-icon
@@ -577,7 +575,7 @@ export class BarNav {
                   dot={action.dot ?? false}
                   inactive={action.inactive}
                   aria-label={action.ariaLabel ?? action.id}
-                  background={actionBg}
+                  background={tabSurface}
                   onDsChange={(e: Event) => this.handleActionChange(action.id, e)}
                 />
               ))}

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

@@ -0,0 +1,15 @@
+import type { TabItem } from '../TabGroup/tab-item-utils';
+
+export type BarNavTab = TabItem;
+
+export interface BarNavActionItem {
+  id: string;
+  /** Icon name for <ds-icon>. */
+  icon: string;
+  /** Whether this action button is currently pressed/active. */
+  selected?: boolean;
+  /** Show a notification dot. */
+  dot?: boolean;
+  inactive?: boolean;
+  ariaLabel?: string;
+}

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

@@ -1,5 +1,5 @@
 import { getSelectableTabs } from '../TabGroup/tab-item-utils';
-import type { BarNavActionItem, BarNavTab } from './BarNav';
+import type { BarNavActionItem, BarNavTab } from './bar-nav-types';
 
 export interface BarNavUrlState {
   /** Tab id derived from the URL, or empty when none applies. */

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

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

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

@@ -1,6 +1,6 @@
 import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
 
-export type BarNavActionBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+export type BarNavActionBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';
 
 @Component({
   tag: 'ds-bar-nav-action',
@@ -44,6 +44,7 @@ export class BarNavAction {
       onBold: bg === 'bold',
       onStrong: bg === 'strong',
       onAlwaysDark: bg === 'always-dark',
+      onNavigation: bg === 'navigation',
     };
 
     return (
@@ -58,7 +59,15 @@ export class BarNavAction {
         >
           <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" />}
+            {this.dot && (
+              <ds-badge
+                class="action-btn__dot"
+                variant="dot"
+                background="var(--_dot-ring)"
+                label=""
+                aria-hidden="true"
+              />
+            )}
           </span>
         </button>
       </Host>