@ds-mo/ui 1.8.1 → 1.9.0

package/src/wc/components/PanelTools/PanelTools.tsx

@@ -1,8 +1,11 @@
-import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';
+import { Component, Prop, Event, EventEmitter, Element, State, Watch, h, Host } from '@stencil/core';
 import {
   PANEL_TOOLS_LABELS,
+  PANEL_TOOLS_PRIMARY_TOOL_ID,
+  type PanelToolsItem,
   type PanelToolsToolId,
 } from './panel-tools-types';
+import { parsePanelToolsItems } from './panel-tools-utils';
 
 @Component({
   tag: 'ds-panel-tools',
@@ -12,26 +15,38 @@ import {
 export class PanelTools {
   @Element() el!: HTMLElement;
 
-  /** When false, width animates to 0. */
-  @Prop({ reflect: true }) open: boolean = false;
+  /** When false, only the icon rail is shown. */
+  @Prop({ mutable: true, reflect: true }) open: boolean = false;
 
-  /** Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`. */
-  @Prop({ attribute: 'active-tool', reflect: true }) activeTool: PanelToolsToolId | '' = '';
+  /** Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`. */
+  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })
+  activeTool: PanelToolsToolId | '' = '';
 
-  /** Stays true until the close width transition finishes. */
-  @State() private expanded = false;
+  /**
+   * Rail items rendered in the right column.
+   * Set via JS property: `el.items = [...]`. Replace the array reference to update.
+   */
+  @Prop() items: PanelToolsItem[] = [];
+
+  /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */
+  @Prop({ attribute: 'items-json' }) itemsJson: string = '';
+
+  /** Emitted when a rail button is toggled. Detail = { id, selected }. */
+  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{
+    id: PanelToolsToolId;
+    selected: boolean;
+  }>;
+
+  /** Arms open vs close easing for the in-flight width transition. */
+  @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';
 
   /** Suppresses width transition until the host has painted its initial open state. */
   @State() private readyForMotion = false;
 
   private motionEnableGeneration = 0;
 
-  componentWillLoad() {
-    if (this.open) this.expanded = true;
-  }
-
-  componentDidLoad() {
-    this.deferMotionEnable();
+  private get railItems(): PanelToolsItem[] {
+    return parsePanelToolsItems(this.items, this.itemsJson);
   }
 
   disconnectedCallback() {
@@ -39,7 +54,6 @@ export class PanelTools {
     this.motionEnableGeneration += 1;
   }
 
-  /** Two rAFs after the last pre-ready prop change — host bindings may land late on refresh. */
   private deferMotionEnable() {
     if (this.readyForMotion) return;
     const generation = ++this.motionEnableGeneration;
@@ -57,8 +71,10 @@ export class PanelTools {
   }
 
   @Watch('open')
-  openChanged(isOpen: boolean) {
-    if (isOpen) this.expanded = true;
+  openChanged(isOpen: boolean, wasOpen?: boolean) {
+    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {
+      this.motion = isOpen ? 'opening' : 'closing';
+    }
     this.deferMotionEnable();
   }
 
@@ -67,27 +83,73 @@ export class PanelTools {
     this.deferMotionEnable();
   }
 
+  componentDidLoad() {
+    this.deferMotionEnable();
+  }
+
+  @Watch('items')
+  @Watch('itemsJson')
+  itemsChanged() {
+    this.deferMotionEnable();
+  }
+
   private handleTransitionEnd = (event: TransitionEvent) => {
-    if (event.target !== this.el) return;
+    if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;
     if (event.propertyName !== 'max-width') return;
-    if (!this.open) this.expanded = false;
+    this.motion = 'idle';
   };
 
-  private isShowingContent(): boolean {
-    return this.open || this.expanded;
+  /** Rail selection follows `open` immediately — independent of the slide animation. */
+  private isRailSelected(id: PanelToolsToolId): boolean {
+    return this.open && this.activeTool === id;
   }
 
-  private isActiveTool(id: PanelToolsToolId): boolean {
-    return this.isShowingContent() && this.activeTool === id;
+  /** Drawer body stays mounted while the clip frame animates closed. */
+  private isDrawerPresent(): boolean {
+    return this.open || this.motion === 'closing';
+  }
+
+  private isViewActive(id: PanelToolsToolId): boolean {
+    return this.isDrawerPresent() && this.activeTool === id;
   }
 
   private headerLabel(): string {
-    if (!this.activeTool) return '';
+    if (!this.isDrawerPresent() || !this.activeTool) return '';
     return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';
   }
 
+  private handleToolChange = (id: PanelToolsToolId) => {
+    const selected = !this.isRailSelected(id);
+    if (selected) {
+      this.open = true;
+      this.activeTool = id;
+    } else {
+      this.open = false;
+    }
+    this.dsToolChange.emit({ id, selected });
+  };
+
+  private renderRailAction(item: PanelToolsItem) {
+    return (
+      <ds-bar-nav-action
+        key={item.id}
+        class="panel-tools__rail-action"
+        icon={item.icon}
+        selected={this.isRailSelected(item.id)}
+        dot={item.dot ?? false}
+        inactive={item.inactive}
+        aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}
+        onDsChange={() => this.handleToolChange(item.id)}
+      />
+    );
+  }
+
   render() {
-    const showingContent = this.isShowingContent();
+    const headerLabel = this.headerLabel();
+    const railItems = this.railItems;
+    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
+    const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);
+    const showDrawerChrome = this.isDrawerPresent();
 
     return (
       <Host
@@ -95,67 +157,87 @@ export class PanelTools {
           'panel-tools': true,
           'panel-tools--open': this.open,
           'panel-tools--ready': this.readyForMotion,
+          'panel-tools--motion-opening': this.motion === 'opening',
+          'panel-tools--motion-closing': this.motion === 'closing',
         }}
         role="complementary"
-        aria-label={this.headerLabel() || 'Tools'}
-        aria-hidden={showingContent ? null : 'true'}
+        aria-label="Tools"
       >
-        <div class="panel-tools__inner">
-          <header class="panel-tools__header">
-            <span class="text-body-medium-emphasis">{this.headerLabel()}</span>
-          </header>
-          <div class="panel-tools__body">
-            <div
-              class={{
-                'panel-tools__view': true,
-                'panel-tools__view--active': this.isActiveTool('search'),
-                'text-body-medium': true,
-              }}
-              hidden={!this.isActiveTool('search')}
-            >
-              <slot name="search" />
-            </div>
-            <div
-              class={{
-                'panel-tools__view': true,
-                'panel-tools__view--active': this.isActiveTool('messages'),
-                'text-body-medium': true,
-              }}
-              hidden={!this.isActiveTool('messages')}
-            >
-              <slot name="messages" />
-            </div>
-            <div
-              class={{
-                'panel-tools__view': true,
-                'panel-tools__view--active': this.isActiveTool('stacks'),
-                'text-body-medium': true,
-              }}
-              hidden={!this.isActiveTool('stacks')}
-            >
-              <slot name="stacks" />
-            </div>
-            <div
-              class={{
-                'panel-tools__view': true,
-                'panel-tools__view--active': this.isActiveTool('activity'),
-                'text-body-medium': true,
-              }}
-              hidden={!this.isActiveTool('activity')}
-            >
-              <slot name="activity" />
-            </div>
-            <div
-              class={{
-                'panel-tools__view': true,
-                'panel-tools__view--active': this.isActiveTool('agents'),
-                'text-body-medium': true,
-              }}
-              hidden={!this.isActiveTool('agents')}
-            >
-              <slot name="agents" />
+        <div class="panel-tools__layout">
+          <div
+            class={{
+              'panel-tools__drawer': true,
+              'panel-tools__drawer--visible': showDrawerChrome,
+            }}
+            aria-hidden={showDrawerChrome ? null : 'true'}
+          >
+            <div class="panel-tools__drawer-surface">
+              <header class="panel-tools__header">
+                <span class="panel-tools__title text-body-medium-emphasis">{headerLabel}</span>
+              </header>
+              <div class="panel-tools__body">
+                <div
+                  class={{
+                    'panel-tools__view': true,
+                    'panel-tools__view--active': this.isViewActive('search'),
+                    'text-body-medium': true,
+                  }}
+                  hidden={!this.isViewActive('search')}
+                >
+                  <slot name="search" />
+                </div>
+                <div
+                  class={{
+                    'panel-tools__view': true,
+                    'panel-tools__view--active': this.isViewActive('messages'),
+                    'text-body-medium': true,
+                  }}
+                  hidden={!this.isViewActive('messages')}
+                >
+                  <slot name="messages" />
+                </div>
+                <div
+                  class={{
+                    'panel-tools__view': true,
+                    'panel-tools__view--active': this.isViewActive('stacks'),
+                    'text-body-medium': true,
+                  }}
+                  hidden={!this.isViewActive('stacks')}
+                >
+                  <slot name="stacks" />
+                </div>
+                <div
+                  class={{
+                    'panel-tools__view': true,
+                    'panel-tools__view--active': this.isViewActive('activity'),
+                    'text-body-medium': true,
+                  }}
+                  hidden={!this.isViewActive('activity')}
+                >
+                  <slot name="activity" />
+                </div>
+                <div
+                  class={{
+                    'panel-tools__view': true,
+                    'panel-tools__view--active': this.isViewActive('agents'),
+                    'text-body-medium': true,
+                  }}
+                  hidden={!this.isViewActive('agents')}
+                >
+                  <slot name="agents" />
+                </div>
+              </div>
             </div>
           </div>
+
+          <nav class="panel-tools__rail" aria-label="Tool shortcuts">
+            {headerItem ? (
+              <div class="panel-tools__rail-header">{this.renderRailAction(headerItem)}</div>
+            ) : null}
+            <div class="panel-tools__rail-body">
+              {bodyItems.map(item => this.renderRailAction(item))}
+            </div>
+          </nav>
         </div>
       </Host>
     );

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

@@ -1,2 +1,6 @@
-export type { PanelToolsToolId } from './panel-tools-types';
-export { PANEL_TOOLS_LABELS, PANEL_TOOLS_TOOL_IDS } from './panel-tools-types';
+export type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';
+export {
+  PANEL_TOOLS_LABELS,
+  PANEL_TOOLS_PRIMARY_TOOL_ID,
+  PANEL_TOOLS_TOOL_IDS,
+} from './panel-tools-types';

package/src/wc/components/PanelTools/panel-tools-types.ts

@@ -1,14 +1,17 @@
-/** Bar-nav tool ids that map to `ds-panel-tools` views. */
-export type PanelToolsToolId = 'search' | 'messages' | 'stacks' | 'activity' | 'agents';
+/** Tool ids for the `ds-panel-tools` rail and drawer views. */
+export type PanelToolsToolId = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';
 
 export const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [
   'search',
+  'agents',
   'messages',
   'stacks',
   'activity',
-  'agents',
 ];
 
+/** Rail header slot — mirrors panel-nav M logo row. */
+export const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';
+
 export const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {
   search: 'Search',
   messages: 'Messages',
@@ -16,3 +19,15 @@ export const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {
   activity: 'Activity',
   agents: 'Agents',
 };
+
+export interface PanelToolsItem {
+  id: PanelToolsToolId;
+  /** Icon name for <ds-icon>. */
+  icon: string;
+  /** Whether this rail button is currently pressed/active. */
+  selected?: boolean;
+  /** Show a notification dot. */
+  dot?: boolean;
+  inactive?: boolean;
+  ariaLabel?: string;
+}

package/src/wc/components/PanelTools/panel-tools-utils.ts

@@ -0,0 +1,31 @@
+import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';
+import type { PanelToolsItem } from './panel-tools-types';
+
+export function parsePanelToolsItems(
+  items: PanelToolsItem[],
+  itemsJson: string,
+): PanelToolsItem[] {
+  if (itemsJson) {
+    return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);
+  }
+  return items ?? [];
+}
+
+export function shouldResyncPanelToolsItems(
+  prev: PanelToolsItem[],
+  next: PanelToolsItem[],
+): boolean {
+  if (prev.length !== next.length) return true;
+  return next.some((item, index) => {
+    const prior = prev[index];
+    if (!prior) return true;
+    return (
+      prior.id !== item.id ||
+      prior.icon !== item.icon ||
+      prior.selected !== item.selected ||
+      prior.dot !== item.dot ||
+      prior.inactive !== item.inactive ||
+      prior.ariaLabel !== item.ariaLabel
+    );
+  });
+}

package/src/wc/components.d.ts

@@ -26,7 +26,7 @@ import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ModalWidth } from "./components/Modal/Modal";
 import { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
-import { PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
+import { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
@@ -63,7 +63,7 @@ export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ModalWidth } from "./components/Modal/Modal";
 export { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
-export { PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
+export { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
@@ -97,7 +97,7 @@ export namespace Components {
     }
     interface DsAppShell {
         /**
-          * When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds.
+          * When `true`, paints the shared chrome surface (bg + wash + grid) behind panel, bar, and tools.
           * @default false
          */
         "gradient": boolean;
@@ -108,7 +108,7 @@ export namespace Components {
         "gradientSrc": string;
         /**
           * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
-          * @default 'navigation'
+          * @default 'dashboard'
          */
         "navStyle": NavChromeStyle;
     }
@@ -210,8 +210,8 @@ export namespace Components {
          */
         "heading": string | undefined;
         /**
-          * Chrome style: `navigation` = navigation tokens, `default` = app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
-          * @default 'default'
+          * Style slot: `dashboard` or `settings`. Colors match for now.
+          * @default 'dashboard'
          */
         "navStyle": NavChromeStyle;
         /**
@@ -647,7 +647,7 @@ export namespace Components {
          */
         "currentUrl": string;
         /**
-          * When `true`, the component does not run its own View Transition on style change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
+          * When `true`, style changes apply synchronously — host app owns view transitions.
           * @default false
          */
         "disableViewTransition": boolean;
@@ -657,8 +657,8 @@ export namespace Components {
          */
         "groups": string | PanelNavGroup[];
         /**
-          * Chrome style: `navigation` = navigation tokens, `default` = standard app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
-          * @default 'navigation'
+          * Style slot: `dashboard` or `settings`. Colors match for now; class hooks reserved for texture/glyph layers. Property: `navStyle`. Attribute: `nav-style`.
+          * @default 'dashboard'
          */
         "navStyle": NavChromeStyle;
         /**
@@ -684,12 +684,22 @@ export namespace Components {
     }
     interface DsPanelTools {
         /**
-          * Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`.
+          * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
           * @default ''
          */
         "activeTool": PanelToolsToolId | '';
         /**
-          * When false, width animates to 0.
+          * Rail items rendered in the right column. Set via JS property: `el.items = [...]`. Replace the array reference to update.
+          * @default []
+         */
+        "items": PanelToolsItem[];
+        /**
+          * JSON fallback for `items` — useful when framework bindings don't propagate arrays.
+          * @default ''
+         */
+        "itemsJson": string;
+        /**
+          * When false, only the icon rail is shown.
           * @default false
          */
         "open": boolean;
@@ -1134,6 +1144,10 @@ export interface DsPanelNavCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsPanelNavElement;
 }
+export interface DsPanelToolsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsPanelToolsElement;
+}
 export interface DsRadioGroupCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsRadioGroupElement;
@@ -1479,7 +1493,21 @@ declare global {
         prototype: HTMLDsPanelNavElement;
         new (): HTMLDsPanelNavElement;
     };
+    interface HTMLDsPanelToolsElementEventMap {
+        "dsToolChange": {
+    id: PanelToolsToolId;
+    selected: boolean;
+  };
+    }
     interface HTMLDsPanelToolsElement extends Components.DsPanelTools, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsPanelToolsElementEventMap>(type: K, listener: (this: HTMLDsPanelToolsElement, ev: DsPanelToolsCustomEvent<HTMLDsPanelToolsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsPanelToolsElementEventMap>(type: K, listener: (this: HTMLDsPanelToolsElement, ev: DsPanelToolsCustomEvent<HTMLDsPanelToolsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLDsPanelToolsElement: {
         prototype: HTMLDsPanelToolsElement;
@@ -1747,7 +1775,7 @@ declare namespace LocalJSX {
     }
     interface DsAppShell {
         /**
-          * When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds.
+          * When `true`, paints the shared chrome surface (bg + wash + grid) behind panel, bar, and tools.
           * @default false
          */
         "gradient"?: boolean;
@@ -1758,7 +1786,7 @@ declare namespace LocalJSX {
         "gradientSrc"?: string;
         /**
           * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
-          * @default 'navigation'
+          * @default 'dashboard'
          */
         "navStyle"?: NavChromeStyle;
     }
@@ -1861,8 +1889,8 @@ declare namespace LocalJSX {
          */
         "heading"?: string | undefined;
         /**
-          * Chrome style: `navigation` = navigation tokens, `default` = app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
-          * @default 'default'
+          * Style slot: `dashboard` or `settings`. Colors match for now.
+          * @default 'dashboard'
          */
         "navStyle"?: NavChromeStyle;
         /**
@@ -2336,7 +2364,7 @@ declare namespace LocalJSX {
          */
         "currentUrl"?: string;
         /**
-          * When `true`, the component does not run its own View Transition on style change — it just updates the rendered surface synchronously. Use this when the host app orchestrates the page transition itself (e.g. Angular Router's `withViewTransitions`), so the two don't fight or nest.
+          * When `true`, style changes apply synchronously — host app owns view transitions.
           * @default false
          */
         "disableViewTransition"?: boolean;
@@ -2346,8 +2374,8 @@ declare namespace LocalJSX {
          */
         "groups"?: string | PanelNavGroup[];
         /**
-          * Chrome style: `navigation` = navigation tokens, `default` = standard app tokens. Property: `navStyle`. HTML attribute: `nav-style`.
-          * @default 'navigation'
+          * Style slot: `dashboard` or `settings`. Colors match for now; class hooks reserved for texture/glyph layers. Property: `navStyle`. Attribute: `nav-style`.
+          * @default 'dashboard'
          */
         "navStyle"?: NavChromeStyle;
         /**
@@ -2389,12 +2417,29 @@ declare namespace LocalJSX {
     }
     interface DsPanelTools {
         /**
-          * Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`.
+          * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
           * @default ''
          */
         "activeTool"?: PanelToolsToolId | '';
         /**
-          * When false, width animates to 0.
+          * Rail items rendered in the right column. Set via JS property: `el.items = [...]`. Replace the array reference to update.
+          * @default []
+         */
+        "items"?: PanelToolsItem[];
+        /**
+          * JSON fallback for `items` — useful when framework bindings don't propagate arrays.
+          * @default ''
+         */
+        "itemsJson"?: string;
+        /**
+          * Emitted when a rail button is toggled. Detail = { id, selected }.
+         */
+        "onDsToolChange"?: (event: DsPanelToolsCustomEvent<{
+    id: PanelToolsToolId;
+    selected: boolean;
+  }>) => void;
+        /**
+          * When false, only the icon rail is shown.
           * @default false
          */
         "open"?: boolean;
@@ -2832,11 +2877,11 @@ declare namespace LocalJSX {
         "dismissLabel": string;
     }
     interface DsBarNavAttributes {
+        "navStyle": NavChromeStyle;
         "tabsJson": string;
         "value": string;
         "actionsJson": string;
         "heading": string | undefined;
-        "navStyle": NavChromeStyle;
         "basePath": string;
         "currentUrl": string;
     }
@@ -2989,6 +3034,7 @@ declare namespace LocalJSX {
     interface DsPanelToolsAttributes {
         "open": boolean;
         "activeTool": PanelToolsToolId | '';
+        "itemsJson": string;
     }
     interface DsRadioGroupAttributes {
         "value": string;

package/src/wc/nav/badge-gradient-ring.ts

@@ -95,17 +95,12 @@ export function readShellGradientPosition(surface: GradientSurface): string {
   return styles.getPropertyValue(surface.positionVar).trim() || '0 0';
 }
 
-/** Stamp `--_badge-gradient-position` on the badge host. */
+/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */
 export function syncBadgeGradientPosition(badgeHost: HTMLElement): void {
-  const surface = findGradientSurface(badgeHost);
-  if (!surface) {
+  if (!isShellGradientActive(badgeHost)) {
     badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);
     return;
   }
 
-  const shellPosition = readShellGradientPosition(surface);
-  badgeHost.style.setProperty(
-    BADGE_GRADIENT_POSITION_VAR,
-    badgeGradientPosition(badgeHost, surface, shellPosition),
-  );
+  badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');
 }

package/src/wc/nav/index.ts

@@ -25,12 +25,14 @@ export {
   SHELL_GRADIENT_POSITION_PANEL_VAR,
   SHELL_GRADIENT_POSITION_BAR_VAR,
   SHELL_GRADIENT_OPACITY_VAR,
+  SHELL_CHROME_SURFACE_POSITION_VAR,
   SHELL_GRADIENT_OPACITY,
   buildShellRadialGradient,
-  shellGradientImageForStyle,
+  shellGradientImage,
   shellGradientSize,
   shellGradientPositionPanel,
   shellGradientPositionBar,
+  shellChromeSurfacePosition,
 } from './shell-gradient';
 export type { ShellGradientLayout } from './shell-gradient';
 export {