@ds-mo/ui 1.3.0 → 1.5.0

package/src/angular/proxies.ts

@@ -35,6 +35,29 @@ export declare interface DsAccordion extends Components.DsAccordion {
 }
 
 
+@ProxyCmp({
+  inputs: ['gradient', 'gradientSrc', 'navStyle']
+})
+@Component({
+  selector: 'ds-app-shell',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['gradient', 'gradientSrc', 'navStyle'],
+  standalone: false
+})
+export class DsAppShell {
+  protected el: HTMLDsAppShellElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsAppShell extends Components.DsAppShell {}
+
+
 @ProxyCmp({
   inputs: ['background', 'count', 'isSelected', 'label', 'max', 'surface', 'variant']
 })
@@ -87,14 +110,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
 })
@@ -619,14 +642,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
 })

package/src/react/components.ts

@@ -5,6 +5,7 @@
 
 /* eslint-disable */
 export { DsAccordion } from "./ds-accordion.js";
+export { DsAppShell } from "./ds-app-shell.js";
 export { DsBadge } from "./ds-badge.js";
 export { DsBanner } from "./ds-banner.js";
 export { DsBarNavAction } from "./ds-bar-nav-action.js";

package/src/react/ds-app-shell.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 { DsAppShell as DsAppShellElement, defineCustomElement as defineDsAppShell } from "@ds-mo/ui/dist/components/ds-app-shell.js";
+
+export type DsAppShellEvents = NonNullable<unknown>;
+
+export const DsAppShell: StencilReactComponent<DsAppShellElement, DsAppShellEvents, Components.DsAppShell> = /*@__PURE__*/ createComponent<DsAppShellElement, DsAppShellEvents, Components.DsAppShell>({
+    tagName: 'ds-app-shell',
+    elementClass: DsAppShellElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {} as DsAppShellEvents,
+    defineCustomElement: defineDsAppShell
+});

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

@@ -0,0 +1,180 @@
+import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';
+import type { NavChromeStyle } from '../../nav/nav-chrome';
+import {
+  SHELL_GRADIENT_IMAGE_VAR,
+  SHELL_GRADIENT_OPACITY,
+  SHELL_GRADIENT_OPACITY_VAR,
+  SHELL_GRADIENT_POSITION_BAR_VAR,
+  SHELL_GRADIENT_POSITION_PANEL_VAR,
+  SHELL_GRADIENT_SIZE_VAR,
+  shellGradientImageForStyle,
+  shellGradientPositionBar,
+  shellGradientPositionPanel,
+  shellGradientSize,
+} from '../../nav/shell-gradient';
+
+@Component({
+  tag: 'ds-app-shell',
+  styleUrl: 'AppShell.css',
+  scoped: true,
+})
+export class AppShell {
+  /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */
+  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'navigation';
+
+  /** When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds. */
+  @Prop({ reflect: true }) gradient: boolean = false;
+
+  /**
+   * Optional custom gradient for `background-image` (e.g. SVG URL).
+   * When set, overrides the built-in radial wash.
+   */
+  @Prop() gradientSrc: string = '';
+
+  @Element() el!: HTMLElement;
+
+  private resizeObserver: ResizeObserver | null = null;
+
+  componentDidLoad() {
+    this.syncSlottedNavStyle();
+    this.connectMetricsObserver();
+    this.scheduleGradientVars();
+  }
+
+  private scheduleGradientVars() {
+    this.updateGradientVars();
+    requestAnimationFrame(() => this.updateGradientVars());
+  }
+
+  disconnectedCallback() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+
+  @Watch('navStyle')
+  @Watch('gradient')
+  @Watch('gradientSrc')
+  onShellPropsChange() {
+    this.syncSlottedNavStyle();
+    this.scheduleGradientVars();
+  }
+
+  private connectMetricsObserver() {
+    this.resizeObserver = new ResizeObserver(() => this.scheduleGradientVars());
+    this.resizeObserver.observe(this.el);
+    const panelWrap = this.el.querySelector('.app-shell__panel');
+    const barWrap = this.el.querySelector('.app-shell__bar');
+    if (panelWrap) this.resizeObserver.observe(panelWrap);
+    if (barWrap) this.resizeObserver.observe(barWrap);
+    this.scheduleGradientVars();
+  }
+
+  private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {
+    const style = target.style;
+    for (const [name, value] of Object.entries(vars)) {
+      if (value === null) style.removeProperty(name);
+      else style.setProperty(name, value);
+    }
+  }
+
+  private clearGradientVars(targets: HTMLElement[]) {
+    const keys = [
+      SHELL_GRADIENT_IMAGE_VAR,
+      SHELL_GRADIENT_SIZE_VAR,
+      SHELL_GRADIENT_POSITION_PANEL_VAR,
+      SHELL_GRADIENT_POSITION_BAR_VAR,
+      SHELL_GRADIENT_OPACITY_VAR,
+    ];
+    for (const target of targets) {
+      for (const key of keys) target.style.removeProperty(key);
+    }
+  }
+
+  private syncSlottedNavStyle() {
+    const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;
+    const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;
+    if (panel) {
+      panel.setAttribute('nav-style', this.navStyle);
+      panel.navStyle = this.navStyle;
+    }
+    if (bar) {
+      bar.setAttribute('nav-style', this.navStyle);
+      bar.navStyle = this.navStyle;
+    }
+  }
+
+  private updateGradientVars() {
+    const panel = this.el.querySelector('ds-panel-nav') as HTMLElement | null;
+    const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;
+    const targets = [this.el, panel, bar].filter((el): el is HTMLElement => el !== null);
+
+    if (!this.gradient) {
+      this.clearGradientVars(targets);
+      return;
+    }
+
+    const image = this.gradientSrc.trim()
+      ? `url(${this.gradientSrc.trim()})`
+      : shellGradientImageForStyle(this.navStyle);
+
+    const shellRect = this.el.getBoundingClientRect();
+    const panelWrap = this.el.querySelector('.app-shell__panel') as HTMLElement | null;
+    const panelWidth = panelWrap?.getBoundingClientRect().width ?? 0;
+
+    const size = shellGradientSize({
+      width: shellRect.width,
+      height: shellRect.height,
+      panelWidth,
+    });
+    const panelPosition = shellGradientPositionPanel();
+    const barPosition = shellGradientPositionBar(panelWidth);
+    const opacity = SHELL_GRADIENT_OPACITY;
+
+    for (const target of targets) {
+      if (target === this.el) {
+        this.applyGradientVars(target, {
+          [SHELL_GRADIENT_IMAGE_VAR]: image,
+          [SHELL_GRADIENT_SIZE_VAR]: size,
+          [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,
+          [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,
+          [SHELL_GRADIENT_OPACITY_VAR]: opacity,
+        });
+        continue;
+      }
+
+      const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';
+      this.applyGradientVars(target, {
+        [SHELL_GRADIENT_IMAGE_VAR]: image,
+        [SHELL_GRADIENT_SIZE_VAR]: size,
+        [SHELL_GRADIENT_OPACITY_VAR]: opacity,
+        [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,
+        [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,
+      });
+    }
+  }
+
+  render() {
+    const shellCls: Record<string, boolean> = {
+      'app-shell': true,
+      'app-shell--gradient': this.gradient,
+    };
+
+    return (
+      <Host class={shellCls}>
+        <div class="app-shell__row">
+          <div class="app-shell__panel">
+            <slot name="panel" />
+          </div>
+          <div class="app-shell__main">
+            <div class="app-shell__bar">
+              <slot name="bar" />
+            </div>
+            <div class="app-shell__content">
+              <slot />
+            </div>
+          </div>
+        </div>
+      </Host>
+    );
+  }
+}

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>
@@ -554,7 +546,7 @@ export class BarNav {
                     <ds-badge
                       class="bar-nav__tab-trigger-dot"
                       variant="dot"
-                      background="var(--_dot-ring)"
+                      background="var(--_bar-nav-bg)"
                       label=""
                       aria-hidden="true"
                     />
@@ -583,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 (