@ds-mo/ui 1.4.0 → 1.5.0

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.d.ts

@@ -6,10 +6,10 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { AccordionItemData } from "./components/Accordion/Accordion";
+import { NavChromeStyle } from "./nav/nav-chrome";
 import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 import { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
-import { NavChromeStyle } from "./nav/nav-chrome";
 import { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 import { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 import { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -42,10 +42,10 @@ import { ToggleButtonBackground, ToggleButtonElevation, ToggleButtonSize } from
 import { ToggleGroupBackground, ToggleGroupElevation, ToggleGroupItem, ToggleGroupSize } from "./components/ToggleButtonGroup/ToggleButtonGroup";
 import { TooltipAlign, TooltipSide } from "./components/Tooltip/Tooltip";
 export { AccordionItemData } from "./components/Accordion/Accordion";
+export { NavChromeStyle } from "./nav/nav-chrome";
 export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 export { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 export { BarNavActionItem, BarNavTab } from "./components/BarNav/bar-nav-types";
-export { NavChromeStyle } from "./nav/nav-chrome";
 export { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 export { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 export { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
@@ -93,6 +93,23 @@ export namespace Components {
          */
         "multiple": boolean;
     }
+    interface DsAppShell {
+        /**
+          * When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds.
+          * @default false
+         */
+        "gradient": boolean;
+        /**
+          * Optional custom gradient for `background-image` (e.g. SVG URL). When set, overrides the built-in radial wash.
+          * @default ''
+         */
+        "gradientSrc": string;
+        /**
+          * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
+          * @default 'navigation'
+         */
+        "navStyle": NavChromeStyle;
+    }
     interface DsBadge {
         /**
           * Direct ring background override for component-local surfaces.
@@ -1169,6 +1186,12 @@ declare global {
         prototype: HTMLDsAccordionElement;
         new (): HTMLDsAccordionElement;
     };
+    interface HTMLDsAppShellElement extends Components.DsAppShell, HTMLStencilElement {
+    }
+    var HTMLDsAppShellElement: {
+        prototype: HTMLDsAppShellElement;
+        new (): HTMLDsAppShellElement;
+    };
     interface HTMLDsBadgeElement extends Components.DsBadge, HTMLStencilElement {
     }
     var HTMLDsBadgeElement: {
@@ -1671,6 +1694,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "ds-accordion": HTMLDsAccordionElement;
+        "ds-app-shell": HTMLDsAppShellElement;
         "ds-badge": HTMLDsBadgeElement;
         "ds-banner": HTMLDsBannerElement;
         "ds-bar-nav": HTMLDsBarNavElement;
@@ -1731,6 +1755,23 @@ declare namespace LocalJSX {
         "multiple"?: boolean;
         "onDsExpandedChange"?: (event: DsAccordionCustomEvent<string[]>) => void;
     }
+    interface DsAppShell {
+        /**
+          * When `true`, paints the shared L-shaped radial wash on panel + bar backgrounds.
+          * @default false
+         */
+        "gradient"?: boolean;
+        /**
+          * Optional custom gradient for `background-image` (e.g. SVG URL). When set, overrides the built-in radial wash.
+          * @default ''
+         */
+        "gradientSrc"?: string;
+        /**
+          * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
+          * @default 'navigation'
+         */
+        "navStyle"?: NavChromeStyle;
+    }
     interface DsBadge {
         /**
           * Direct ring background override for component-local surfaces.
@@ -2774,6 +2815,11 @@ declare namespace LocalJSX {
         "multiple": boolean;
         "expandedIds": string;
     }
+    interface DsAppShellAttributes {
+        "navStyle": NavChromeStyle;
+        "gradient": boolean;
+        "gradientSrc": string;
+    }
     interface DsBadgeAttributes {
         "variant": BadgeVariant;
         "count": number;
@@ -3080,6 +3126,7 @@ declare namespace LocalJSX {
 
     interface IntrinsicElements {
         "ds-accordion": Omit<DsAccordion, keyof DsAccordionAttributes> & { [K in keyof DsAccordion & keyof DsAccordionAttributes]?: DsAccordion[K] } & { [K in keyof DsAccordion & keyof DsAccordionAttributes as `attr:${K}`]?: DsAccordionAttributes[K] } & { [K in keyof DsAccordion & keyof DsAccordionAttributes as `prop:${K}`]?: DsAccordion[K] };
+        "ds-app-shell": Omit<DsAppShell, keyof DsAppShellAttributes> & { [K in keyof DsAppShell & keyof DsAppShellAttributes]?: DsAppShell[K] } & { [K in keyof DsAppShell & keyof DsAppShellAttributes as `attr:${K}`]?: DsAppShellAttributes[K] } & { [K in keyof DsAppShell & keyof DsAppShellAttributes as `prop:${K}`]?: DsAppShell[K] };
         "ds-badge": Omit<DsBadge, keyof DsBadgeAttributes> & { [K in keyof DsBadge & keyof DsBadgeAttributes]?: DsBadge[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `attr:${K}`]?: DsBadgeAttributes[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `prop:${K}`]?: DsBadge[K] };
         "ds-banner": Omit<DsBanner, keyof DsBannerAttributes> & { [K in keyof DsBanner & keyof DsBannerAttributes]?: DsBanner[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `attr:${K}`]?: DsBannerAttributes[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `prop:${K}`]?: DsBanner[K] };
         "ds-bar-nav": Omit<DsBarNav, keyof DsBarNavAttributes> & { [K in keyof DsBarNav & keyof DsBarNavAttributes]?: DsBarNav[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `attr:${K}`]?: DsBarNavAttributes[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `prop:${K}`]?: DsBarNav[K] };
@@ -3126,6 +3173,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "ds-accordion": LocalJSX.IntrinsicElements["ds-accordion"] & JSXBase.HTMLAttributes<HTMLDsAccordionElement>;
+            "ds-app-shell": LocalJSX.IntrinsicElements["ds-app-shell"] & JSXBase.HTMLAttributes<HTMLDsAppShellElement>;
             "ds-badge": LocalJSX.IntrinsicElements["ds-badge"] & JSXBase.HTMLAttributes<HTMLDsBadgeElement>;
             "ds-banner": LocalJSX.IntrinsicElements["ds-banner"] & JSXBase.HTMLAttributes<HTMLDsBannerElement>;
             "ds-bar-nav": LocalJSX.IntrinsicElements["ds-bar-nav"] & JSXBase.HTMLAttributes<HTMLDsBarNavElement>;

package/src/wc/nav/index.ts

@@ -17,3 +17,17 @@ export {
   runShellNavStyleRevealOnReady,
 } from './shell-view-transition';
 export type { ShellNavRevealOrigin } from './shell-view-transition';
+export {
+  SHELL_GRADIENT_IMAGE_VAR,
+  SHELL_GRADIENT_SIZE_VAR,
+  SHELL_GRADIENT_POSITION_PANEL_VAR,
+  SHELL_GRADIENT_POSITION_BAR_VAR,
+  SHELL_GRADIENT_OPACITY_VAR,
+  SHELL_GRADIENT_OPACITY,
+  buildShellRadialGradient,
+  shellGradientImageForStyle,
+  shellGradientSize,
+  shellGradientPositionPanel,
+  shellGradientPositionBar,
+} from './shell-gradient';
+export type { ShellGradientLayout } from './shell-gradient';

package/src/wc/nav/shell-gradient.ts

@@ -0,0 +1,44 @@
+import type { NavChromeStyle } from './nav-chrome';
+
+/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */
+export const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';
+export const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';
+export const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';
+export const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';
+export const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';
+
+/** Layer opacity for the nav gradient wash. */
+export const SHELL_GRADIENT_OPACITY = '0.1';
+
+const GRADIENT_GEOMETRY = '128.57% 141.42% at 0% 0%';
+
+/**
+ * Unified shell radial — same wash for all nav chrome styles.
+ * Tokens follow `data-theme` (light/dark blue intent).
+ */
+export function buildShellRadialGradient(): string {
+  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-medium-background) 50%, var(--color-color-intent-blue-strong-background) 100%)`;
+}
+
+/** Built-in radial image (optional `gradientSrc` on shell overrides). */
+export function shellGradientImageForStyle(_style: NavChromeStyle): string {
+  return buildShellRadialGradient();
+}
+
+export interface ShellGradientLayout {
+  width: number;
+  height: number;
+  panelWidth: number;
+}
+
+export function shellGradientSize(layout: ShellGradientLayout): string {
+  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;
+}
+
+export function shellGradientPositionPanel(): string {
+  return '0 0';
+}
+
+export function shellGradientPositionBar(panelWidth: number): string {
+  return `${-Math.round(panelWidth)}px 0`;
+}