@ds-mo/ui 1.7.3 → 1.8.0

package/src/angular/proxies.ts

@@ -688,6 +688,29 @@ export declare interface DsPanelNav extends Components.DsPanelNav {
 }
 
 
+@ProxyCmp({
+  inputs: ['activeTool', 'open']
+})
+@Component({
+  selector: 'ds-panel-tools',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['activeTool', 'open'],
+  standalone: false
+})
+export class DsPanelTools {
+  protected el: HTMLDsPanelToolsElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsPanelTools extends Components.DsPanelTools {}
+
+
 @ProxyCmp({
   inputs: ['ariaLabel', 'ariaLabelledby', 'direction', 'inactive', 'options', 'value']
 })

package/src/react/components.ts

@@ -28,6 +28,7 @@ export { DsMenu } from "./ds-menu.js";
 export { DsModal } from "./ds-modal.js";
 export { DsPagination } from "./ds-pagination.js";
 export { DsPanelNav } from "./ds-panel-nav.js";
+export { DsPanelTools } from "./ds-panel-tools.js";
 export { DsRadioGroup } from "./ds-radio-group.js";
 export { DsScrollbar } from "./ds-scrollbar.js";
 export { DsSelect } from "./ds-select.js";

package/src/react/ds-panel-tools.ts

@@ -0,0 +1,26 @@
+'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 { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsPanelTools as DsPanelToolsElement, defineCustomElement as defineDsPanelTools } from "@ds-mo/ui/dist/components/ds-panel-tools.js";
+
+export type DsPanelToolsEvents = NonNullable<unknown>;
+
+export const DsPanelTools: StencilReactComponent<DsPanelToolsElement, DsPanelToolsEvents, Components.DsPanelTools> = /*@__PURE__*/ createComponent<DsPanelToolsElement, DsPanelToolsEvents, Components.DsPanelTools>({
+    tagName: 'ds-panel-tools',
+    elementClass: DsPanelToolsElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsPanelToolsEvents,
+    defineCustomElement: defineDsPanelTools
+});

package/src/wc/components/AppShell/AppShell.tsx

@@ -169,8 +169,13 @@ export class AppShell {
             <div class="app-shell__bar">
               <slot name="bar" />
             </div>
-            <div class="app-shell__content">
-              <slot />
+            <div class="app-shell__workspace">
+              <div class="app-shell__content">
+                <slot />
+              </div>
+              <div class="app-shell__tools">
+                <slot name="tools" />
+              </div>
             </div>
           </div>
         </div>

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

@@ -1,8 +1,10 @@
-import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';
+import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';
 import {
   BADGE_GRADIENT_POSITION_VAR,
+  badgeGradientPosition,
+  findGradientSurface,
   isShellGradientActive,
-  syncBadgeGradientPosition,
+  readShellGradientPosition,
 } from '../../nav/badge-gradient-ring';
 
 export type BadgeVariant = 'counter' | 'dot';
@@ -63,6 +65,9 @@ export class Badge {
   /** Accessible label. Defaults to the count as a string. */
   @Prop() label: string | undefined;
 
+  /** Bumps on resize/layout so render recomputes gradient ring position. */
+  @State() private gradientLayoutVersion = 0;
+
   private gradientObserver: ResizeObserver | null = null;
   private gradientWindowListener: (() => void) | null = null;
 
@@ -70,19 +75,8 @@ export class Badge {
     this.enableShellGradientRingIfNeeded();
   }
 
-  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */
-  private enableShellGradientRingIfNeeded() {
-    if (!this.gradientBackground && isShellGradientActive(this.el)) {
-      this.gradientBackground = true;
-      return;
-    }
-
-    this.bindGradientRingSync();
-  }
-
   disconnectedCallback() {
     this.unbindGradientRingSync();
-    this.el.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);
   }
 
   @Watch('gradientBackground')
@@ -90,12 +84,25 @@ export class Badge {
     this.bindGradientRingSync();
   }
 
+  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */
+  private enableShellGradientRingIfNeeded() {
+    if (!this.gradientBackground && isShellGradientActive(this.el)) {
+      this.gradientBackground = true;
+    }
+
+    if (this.gradientBackground) {
+      this.bindGradientRingSync();
+    }
+  }
+
   private bindGradientRingSync() {
     this.unbindGradientRingSync();
 
     if (!this.gradientBackground) return;
 
-    const update = () => syncBadgeGradientPosition(this.el);
+    const update = () => {
+      this.gradientLayoutVersion += 1;
+    };
     update();
 
     this.gradientWindowListener = update;
@@ -126,6 +133,23 @@ export class Badge {
     this.gradientObserver = null;
   }
 
+  private ringHostStyle(ring: string): Record<string, string> {
+    void this.gradientLayoutVersion;
+
+    const style: Record<string, string> = { '--_badge-ring': ring };
+    if (!this.gradientBackground) return style;
+
+    const surface = findGradientSurface(this.el);
+    if (!surface) return style;
+
+    style[BADGE_GRADIENT_POSITION_VAR] = badgeGradientPosition(
+      this.el,
+      surface,
+      readShellGradientPosition(surface),
+    );
+    return style;
+  }
+
   render() {
     const isDot = this.variant === 'dot';
 
@@ -145,7 +169,7 @@ export class Badge {
           'badge--on-gradient-background': this.gradientBackground,
         }}
         aria-label={ariaLabel}
-        style={{ '--_badge-ring': ring }}
+        style={this.ringHostStyle(ring)}
       >
         <span
           class={{

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

@@ -105,6 +105,10 @@ export class BarNav {
   private resizeObserver: ResizeObserver | null = null;
   private overflowCheckScheduled = false;
   private intrinsicWidthRetryCount = 0;
+  /** Matches `basePath` once tabs + URL are reconciled for the active section. */
+  @State() private committedSection = '';
+  /** Section waiting for URL + tabs to catch up after a cross-area navigation. */
+  @State() private pendingSection = '';
 
   private get effectiveValue(): string {
     if (this.currentUrl && this.basePath) {
@@ -125,23 +129,10 @@ export class BarNav {
   @Watch('tabsJson')
   @Watch('actions')
   @Watch('actionsJson')
-  onPropsChange() {
-    this.resolvedTabs = this.tabsJson
-      ? parseJsonArrayProp(this.tabsJson, [])
-      : (this.tabs ?? []);
-    this.resolvedActions = this.actionsJson
-      ? parseJsonArrayProp(this.actionsJson, [])
-      : (this.actions ?? []);
-    this.syncValueFromUrl();
-    this.intrinsicWidthRetryCount = 0;
-    this.scheduleOverflowCheck();
-  }
-
   @Watch('currentUrl')
   @Watch('basePath')
-  onUrlChange() {
-    this.syncValueFromUrl();
-    this.scheduleOverflowCheck();
+  onHostPropsChange() {
+    this.applyHostProps();
   }
 
   @Watch('value')
@@ -179,7 +170,7 @@ export class BarNav {
   }
 
   componentWillLoad() {
-    this.onPropsChange();
+    this.applyHostProps();
   }
 
   componentDidLoad() {
@@ -215,7 +206,7 @@ export class BarNav {
         this.actionsJson,
       )
     ) {
-      this.onPropsChange();
+      this.applyHostProps();
     } else if (this.currentUrl && this.basePath) {
       this.syncValueFromUrl();
     }
@@ -367,22 +358,81 @@ export class BarNav {
     this.menuOpen = false;
   }
 
+  /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */
+  private incomingTabs(): BarNavTab[] {
+    return this.tabsJson
+      ? parseJsonArrayProp(this.tabsJson, [])
+      : (this.tabs ?? []);
+  }
+
+  private incomingActions(): BarNavActionItem[] {
+    return this.actionsJson
+      ? parseJsonArrayProp(this.actionsJson, [])
+      : (this.actions ?? []);
+  }
+
+  private applyHostProps() {
+    const nextBasePath = this.basePath;
+    const sectionChanged =
+      nextBasePath !== '' &&
+      this.committedSection !== '' &&
+      nextBasePath !== this.committedSection;
+
+    if (sectionChanged) {
+      this.urlDerivedValue = '';
+      this.committedSection = '';
+      this.pendingSection = nextBasePath;
+      this.resolvedTabs = [];
+      this.resolvedActions = this.incomingActions();
+      return;
+    }
+
+    if (this.pendingSection) {
+      if (!nextBasePath || nextBasePath !== this.pendingSection) {
+        return;
+      }
+      if (!this.currentUrl.startsWith(this.pendingSection)) {
+        return;
+      }
+      const tabs = this.incomingTabs();
+      if (tabs.length === 0) {
+        return;
+      }
+      this.pendingSection = '';
+    }
+
+    this.resolvedTabs = this.incomingTabs();
+    this.resolvedActions = this.incomingActions();
+    this.syncValueFromUrl();
+    this.committedSection = nextBasePath;
+    this.intrinsicWidthRetryCount = 0;
+    this.scheduleOverflowCheck();
+  }
+
   private syncMenuSections() {
     if (!this.menuEl) return;
     this.menuEl.sections = tabsToMenuSections(this.resolvedTabs, this.effectiveValue);
   }
 
   private syncValueFromUrl() {
+    const tabs = this.incomingTabs();
+
     if (!this.currentUrl || !this.basePath) {
       this.urlDerivedValue = '';
       this.hideTabsForDetailRoute = false;
       return;
     }
 
+    if (!this.currentUrl.startsWith(this.basePath)) {
+      this.urlDerivedValue = '';
+      this.hideTabsForDetailRoute = false;
+      return;
+    }
+
     const { value, hideTabs } = deriveBarNavValueFromUrl(
       this.currentUrl,
       this.basePath,
-      this.resolvedTabs,
+      tabs,
     );
     this.urlDerivedValue = value;
     this.hideTabsForDetailRoute = hideTabs;
@@ -449,8 +499,12 @@ export class BarNav {
   }
 
   render() {
-    const hasTabs = this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;
+    const sectionReady =
+      this.basePath !== '' && this.committedSection === this.basePath;
+    const hasTabs =
+      sectionReady && this.resolvedTabs.length > 0 && !this.hideTabsForDetailRoute;
     const tabSurface = this.tabSurface;
+    const tabGroupKey = this.basePath || 'no-section';
 
     return (
       <Host>
@@ -472,6 +526,7 @@ export class BarNav {
             {hasTabs && (
               <div class="bar-nav__tabs-probe" aria-hidden="true" inert>
                 <ds-tab-group-nav
+                  key={`probe-${tabGroupKey}`}
                   ref={el => {
                     this.probeTabGroupEl = el ?? null;
                     if (el) {
@@ -489,6 +544,7 @@ export class BarNav {
             {hasTabs && !this.tabsCollapsed && (
               <div class="bar-nav__left">
                 <ds-tab-group-nav
+                  key={`visible-${tabGroupKey}`}
                   class="bar-nav__tabs-visible"
                   ref={el => {
                     this.visibleTabGroupEl = el ?? null;

package/src/wc/components/Fade/Fade.tsx

@@ -1,4 +1,5 @@
-import { Component, Prop, h, Host } from '@stencil/core';
+import { Component, Prop, Element, State, h, Host } from '@stencil/core';
+import { isShellGradientActive } from '../../nav/badge-gradient-ring';
 
 export type FadeSide = 'top' | 'bottom' | 'left' | 'right';
 export type FadeSurface =
@@ -55,6 +56,11 @@ const SURFACE_BACKGROUND: Record<FadeSurface, string> = {
   scoped: true,
 })
 export class Fade {
+  @Element() el!: HTMLElement;
+
+  /** When under `ds-app-shell[gradient]`, composites the shell wash over the base fade. */
+  @State() private shellGradientChrome: 'panel' | 'bar' | null = null;
+
   /** Edge where the fade is anchored. */
   @Prop() side: FadeSide = 'bottom';
 
@@ -76,6 +82,18 @@ export class Fade {
   /** Controls visibility without removing the element from layout/positioning. */
   @Prop() visible: boolean = true;
 
+  componentDidLoad() {
+    this.syncShellGradient();
+  }
+
+  private syncShellGradient() {
+    if (!isShellGradientActive(this.el)) {
+      this.shellGradientChrome = null;
+      return;
+    }
+    this.shellGradientChrome = this.el.closest('ds-bar-nav') ? 'bar' : 'panel';
+  }
+
   private resolveSize(): string {
     if (this.height) return this.height;
 
@@ -100,6 +118,9 @@ export class Fade {
           'fade--hidden': !this.visible,
           'fade--vertical-edge': isVerticalEdge,
           'fade--horizontal-edge': !isVerticalEdge,
+          'fade--shell-gradient': this.shellGradientChrome !== null,
+          'fade--shell-gradient-panel': this.shellGradientChrome === 'panel',
+          'fade--shell-gradient-bar': this.shellGradientChrome === 'bar',
           [`fade--${this.side}`]: true,
         }}
         style={{

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

@@ -37,6 +37,7 @@ const vtResolvers = new WeakMap<object, () => void>();
 @Component({
   tag: 'ds-panel-nav',
   styleUrl: 'PanelNav.css',
+  styleUrls: ['../../utils/scroll-edge-fade.css'],
   scoped: true,
 })
 export class PanelNav {
@@ -550,7 +551,15 @@ export class PanelNav {
           </div>
 
           {/* ── Scrollable body ── */}
-          <div class="panel-nav__body" onScroll={e => this.handleBodyScroll(e)}>
+          <div
+            class={{
+              'panel-nav__body': true,
+              'scroll-edge-fade': true,
+              'scroll-edge-fade--bottom': true,
+              'scroll-edge-fade--at-end': this.atBottom,
+            }}
+            onScroll={e => this.handleBodyScroll(e)}
+          >
             {(() => {
               let flatIdx = 0;
               return this.parsedGroups.map(group => (
@@ -572,14 +581,6 @@ 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 navigation style, Dashboard in default style */}
             <button
               type="button"

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

@@ -0,0 +1,163 @@
+import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';
+import {
+  PANEL_TOOLS_LABELS,
+  type PanelToolsToolId,
+} from './panel-tools-types';
+
+@Component({
+  tag: 'ds-panel-tools',
+  styleUrl: 'PanelTools.css',
+  scoped: true,
+})
+export class PanelTools {
+  @Element() el!: HTMLElement;
+
+  /** When false, width animates to 0. */
+  @Prop({ reflect: true }) open: boolean = false;
+
+  /** Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`. */
+  @Prop({ attribute: 'active-tool', reflect: true }) activeTool: PanelToolsToolId | '' = '';
+
+  /** Stays true until the close width transition finishes. */
+  @State() private expanded = false;
+
+  /** 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();
+  }
+
+  disconnectedCallback() {
+    this.el.removeEventListener('transitionend', this.handleTransitionEnd);
+    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;
+    requestAnimationFrame(() => {
+      if (generation !== this.motionEnableGeneration) return;
+      requestAnimationFrame(() => {
+        if (generation !== this.motionEnableGeneration) return;
+        this.readyForMotion = true;
+      });
+    });
+  }
+
+  connectedCallback() {
+    this.el.addEventListener('transitionend', this.handleTransitionEnd);
+  }
+
+  @Watch('open')
+  openChanged(isOpen: boolean) {
+    if (isOpen) this.expanded = true;
+    this.deferMotionEnable();
+  }
+
+  @Watch('activeTool')
+  activeToolChanged() {
+    this.deferMotionEnable();
+  }
+
+  private handleTransitionEnd = (event: TransitionEvent) => {
+    if (event.target !== this.el) return;
+    if (event.propertyName !== 'max-width') return;
+    if (!this.open) this.expanded = false;
+  };
+
+  private isShowingContent(): boolean {
+    return this.open || this.expanded;
+  }
+
+  private isActiveTool(id: PanelToolsToolId): boolean {
+    return this.isShowingContent() && this.activeTool === id;
+  }
+
+  private headerLabel(): string {
+    if (!this.activeTool) return '';
+    return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';
+  }
+
+  render() {
+    const showingContent = this.isShowingContent();
+
+    return (
+      <Host
+        class={{
+          'panel-tools': true,
+          'panel-tools--open': this.open,
+          'panel-tools--ready': this.readyForMotion,
+        }}
+        role="complementary"
+        aria-label={this.headerLabel() || 'Tools'}
+        aria-hidden={showingContent ? null : 'true'}
+      >
+        <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>
+          </div>
+        </div>
+      </Host>
+    );
+  }
+}

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

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

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

@@ -0,0 +1,18 @@
+/** Bar-nav tool ids that map to `ds-panel-tools` views. */
+export type PanelToolsToolId = 'search' | 'messages' | 'stacks' | 'activity' | 'agents';
+
+export const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [
+  'search',
+  'messages',
+  'stacks',
+  'activity',
+  'agents',
+];
+
+export const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {
+  search: 'Search',
+  messages: 'Messages',
+  stacks: 'Stacks',
+  activity: 'Activity',
+  agents: 'Agents',
+};