@ds-mo/ui 2.4.0 → 2.5.0

package/dist/types/components.d.ts

@@ -7,6 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccordionItemData } from "./components/Accordion/Accordion";
 import { NavChromeStyle } from "./nav/nav-chrome";
+import { ShellGradientPreset } from "./nav/shell-gradient-presets";
 import { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 import { BarNavTab } from "./components/BarNav/bar-nav-types";
@@ -31,6 +32,7 @@ import { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
+import { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
 import { SkeletonVariant } from "./components/Skeleton/Skeleton";
 import { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
 import { TabItem } from "./components/TabGroup/tab-item-utils";
@@ -45,6 +47,7 @@ import { ToggleGroupBackground, ToggleGroupElevation, ToggleGroupItem, ToggleGro
 import { TooltipAlign, TooltipSide } from "./components/Tooltip/Tooltip";
 export { AccordionItemData } from "./components/Accordion/Accordion";
 export { NavChromeStyle } from "./nav/nav-chrome";
+export { ShellGradientPreset } from "./nav/shell-gradient-presets";
 export { BadgeSurface, BadgeVariant } from "./components/Badge/Badge";
 export { BannerContrast, BannerIntent } from "./components/Banner/Banner";
 export { BarNavTab } from "./components/BarNav/bar-nav-types";
@@ -69,6 +72,7 @@ export { PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
+export { ShellGradientPreset as ShellGradientPreset1 } from "./components/ShellGradientSwatch/shell-gradient-swatch-types";
 export { SkeletonVariant } from "./components/Skeleton/Skeleton";
 export { SurfaceBackground, SurfaceContrast, SurfaceElement, SurfaceElevation, SurfaceIntent, SurfaceRadius } from "./components/Surface/Surface";
 export { TabItem } from "./components/TabGroup/tab-item-utils";
@@ -103,6 +107,11 @@ export namespace Components {
           * @default false
          */
         "gradient": boolean;
+        /**
+          * Built-in shell wash preset when `gradient` is true. `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
+          * @default DEFAULT_SHELL_GRADIENT_PRESET
+         */
+        "gradientPreset": ShellGradientPreset;
         /**
           * Optional custom gradient for `background-image` (e.g. SVG URL). When set, overrides the built-in radial wash.
           * @default ''
@@ -119,7 +128,7 @@ export namespace Components {
          */
         "navStyle": NavChromeStyle;
         /**
-          * When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer.
+          * When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native.
           * @default true
          */
         "shortcutsEnabled": boolean;
@@ -719,7 +728,7 @@ export namespace Components {
     }
     interface DsPanelTools {
         /**
-          * Toggle any rail tool open/closed — shell shortcuts ⌘/Ctrl+K/A/S/M/N call this.
+          * Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this.
          */
         "activateTool": (id: PanelToolsToolId) => Promise<void>;
         /**
@@ -802,6 +811,30 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DsShellGradientPicker {
+        /**
+          * Active shell wash preset.
+          * @default DEFAULT_SHELL_GRADIENT_PRESET
+         */
+        "value": ShellGradientPreset1;
+    }
+    interface DsShellGradientSwatch {
+        "ariaLabel": string | undefined;
+        /**
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * Wash preset this orb previews.
+          * @default DEFAULT_SHELL_GRADIENT_PRESET
+         */
+        "preset": ShellGradientPreset1;
+        /**
+          * Selected state — shows an inset brand ring.
+          * @default false
+         */
+        "selected": boolean;
+    }
     interface DsSkeleton {
         /**
           * Height as a CSS value string or number (px).
@@ -1212,6 +1245,14 @@ export interface DsSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsSelectElement;
 }
+export interface DsShellGradientPickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsShellGradientPickerElement;
+}
+export interface DsShellGradientSwatchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsShellGradientSwatchElement;
+}
 export interface DsSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsSliderElement;
@@ -1480,6 +1521,7 @@ declare global {
     interface HTMLDsMenuElementEventMap {
         "dsClose": void;
         "dsSelect": MenuItemData;
+        "dsGradientSelect": ShellGradientPreset;
     }
     interface HTMLDsMenuElement extends Components.DsMenu, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsMenuElementEventMap>(type: K, listener: (this: HTMLDsMenuElement, ev: DsMenuCustomEvent<HTMLDsMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1613,6 +1655,40 @@ declare global {
         prototype: HTMLDsSelectElement;
         new (): HTMLDsSelectElement;
     };
+    interface HTMLDsShellGradientPickerElementEventMap {
+        "dsChange": ShellGradientPreset1;
+    }
+    interface HTMLDsShellGradientPickerElement extends Components.DsShellGradientPicker, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsShellGradientPickerElementEventMap>(type: K, listener: (this: HTMLDsShellGradientPickerElement, ev: DsShellGradientPickerCustomEvent<HTMLDsShellGradientPickerElementEventMap[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 HTMLDsShellGradientPickerElementEventMap>(type: K, listener: (this: HTMLDsShellGradientPickerElement, ev: DsShellGradientPickerCustomEvent<HTMLDsShellGradientPickerElementEventMap[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 HTMLDsShellGradientPickerElement: {
+        prototype: HTMLDsShellGradientPickerElement;
+        new (): HTMLDsShellGradientPickerElement;
+    };
+    interface HTMLDsShellGradientSwatchElementEventMap {
+        "dsSelect": ShellGradientPreset1;
+    }
+    interface HTMLDsShellGradientSwatchElement extends Components.DsShellGradientSwatch, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsShellGradientSwatchElementEventMap>(type: K, listener: (this: HTMLDsShellGradientSwatchElement, ev: DsShellGradientSwatchCustomEvent<HTMLDsShellGradientSwatchElementEventMap[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 HTMLDsShellGradientSwatchElementEventMap>(type: K, listener: (this: HTMLDsShellGradientSwatchElement, ev: DsShellGradientSwatchCustomEvent<HTMLDsShellGradientSwatchElementEventMap[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 HTMLDsShellGradientSwatchElement: {
+        prototype: HTMLDsShellGradientSwatchElement;
+        new (): HTMLDsShellGradientSwatchElement;
+    };
     interface HTMLDsSkeletonElement extends Components.DsSkeleton, HTMLStencilElement {
     }
     var HTMLDsSkeletonElement: {
@@ -1800,6 +1876,8 @@ declare global {
         "ds-radio-group": HTMLDsRadioGroupElement;
         "ds-scrollbar": HTMLDsScrollbarElement;
         "ds-select": HTMLDsSelectElement;
+        "ds-shell-gradient-picker": HTMLDsShellGradientPickerElement;
+        "ds-shell-gradient-swatch": HTMLDsShellGradientSwatchElement;
         "ds-skeleton": HTMLDsSkeletonElement;
         "ds-slider": HTMLDsSliderElement;
         "ds-surface": HTMLDsSurfaceElement;
@@ -1840,6 +1918,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "gradient"?: boolean;
+        /**
+          * Built-in shell wash preset when `gradient` is true. `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
+          * @default DEFAULT_SHELL_GRADIENT_PRESET
+         */
+        "gradientPreset"?: ShellGradientPreset;
         /**
           * Optional custom gradient for `background-image` (e.g. SVG URL). When set, overrides the built-in radial wash.
           * @default ''
@@ -1856,7 +1939,7 @@ declare namespace LocalJSX {
          */
         "navStyle"?: NavChromeStyle;
         /**
-          * When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer.
+          * When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native.
           * @default true
          */
         "shortcutsEnabled"?: boolean;
@@ -2374,6 +2457,10 @@ declare namespace LocalJSX {
         "menuWidth"?: string | undefined;
         "minWidth"?: string | undefined;
         "onDsClose"?: (event: DsMenuCustomEvent<void>) => void;
+        /**
+          * Emitted when a `gradient-picker` section swatch is chosen.
+         */
+        "onDsGradientSelect"?: (event: DsMenuCustomEvent<ShellGradientPreset>) => void;
         "onDsSelect"?: (event: DsMenuCustomEvent<MenuItemData>) => void;
         /**
           * @default false
@@ -2597,6 +2684,32 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DsShellGradientPicker {
+        "onDsChange"?: (event: DsShellGradientPickerCustomEvent<ShellGradientPreset1>) => void;
+        /**
+          * Active shell wash preset.
+          * @default DEFAULT_SHELL_GRADIENT_PRESET
+         */
+        "value"?: ShellGradientPreset1;
+    }
+    interface DsShellGradientSwatch {
+        "ariaLabel"?: string | undefined;
+        /**
+          * @default false
+         */
+        "inactive"?: boolean;
+        "onDsSelect"?: (event: DsShellGradientSwatchCustomEvent<ShellGradientPreset1>) => void;
+        /**
+          * Wash preset this orb previews.
+          * @default DEFAULT_SHELL_GRADIENT_PRESET
+         */
+        "preset"?: ShellGradientPreset1;
+        /**
+          * Selected state — shows an inset brand ring.
+          * @default false
+         */
+        "selected"?: boolean;
+    }
     interface DsSkeleton {
         /**
           * Height as a CSS value string or number (px).
@@ -2964,6 +3077,7 @@ declare namespace LocalJSX {
         "gradient": boolean;
         "grid": boolean;
         "gradientSrc": string;
+        "gradientPreset": ShellGradientPreset;
         "shortcutsEnabled": boolean;
     }
     interface DsBadgeAttributes {
@@ -3171,6 +3285,15 @@ declare namespace LocalJSX {
         "ariaLabel": string | undefined;
         "ariaLabelledby": string | undefined;
     }
+    interface DsShellGradientPickerAttributes {
+        "value": ShellGradientPreset;
+    }
+    interface DsShellGradientSwatchAttributes {
+        "preset": ShellGradientPreset;
+        "selected": boolean;
+        "inactive": boolean;
+        "ariaLabel": string | undefined;
+    }
     interface DsSkeletonAttributes {
         "variant": SkeletonVariant;
         "width": string;
@@ -3309,6 +3432,8 @@ declare namespace LocalJSX {
         "ds-radio-group": Omit<DsRadioGroup, keyof DsRadioGroupAttributes> & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes]?: DsRadioGroup[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `attr:${K}`]?: DsRadioGroupAttributes[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `prop:${K}`]?: DsRadioGroup[K] };
         "ds-scrollbar": Omit<DsScrollbar, keyof DsScrollbarAttributes> & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes]?: DsScrollbar[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `attr:${K}`]?: DsScrollbarAttributes[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `prop:${K}`]?: DsScrollbar[K] };
         "ds-select": Omit<DsSelect, keyof DsSelectAttributes> & { [K in keyof DsSelect & keyof DsSelectAttributes]?: DsSelect[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `attr:${K}`]?: DsSelectAttributes[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `prop:${K}`]?: DsSelect[K] };
+        "ds-shell-gradient-picker": Omit<DsShellGradientPicker, keyof DsShellGradientPickerAttributes> & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes]?: DsShellGradientPicker[K] } & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes as `attr:${K}`]?: DsShellGradientPickerAttributes[K] } & { [K in keyof DsShellGradientPicker & keyof DsShellGradientPickerAttributes as `prop:${K}`]?: DsShellGradientPicker[K] };
+        "ds-shell-gradient-swatch": Omit<DsShellGradientSwatch, keyof DsShellGradientSwatchAttributes> & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes]?: DsShellGradientSwatch[K] } & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes as `attr:${K}`]?: DsShellGradientSwatchAttributes[K] } & { [K in keyof DsShellGradientSwatch & keyof DsShellGradientSwatchAttributes as `prop:${K}`]?: DsShellGradientSwatch[K] };
         "ds-skeleton": Omit<DsSkeleton, keyof DsSkeletonAttributes> & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes]?: DsSkeleton[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `attr:${K}`]?: DsSkeletonAttributes[K] } & { [K in keyof DsSkeleton & keyof DsSkeletonAttributes as `prop:${K}`]?: DsSkeleton[K] };
         "ds-slider": Omit<DsSlider, keyof DsSliderAttributes> & { [K in keyof DsSlider & keyof DsSliderAttributes]?: DsSlider[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `attr:${K}`]?: DsSliderAttributes[K] } & { [K in keyof DsSlider & keyof DsSliderAttributes as `prop:${K}`]?: DsSlider[K] } & OneOf<"label", DsSlider["label"], DsSliderAttributes["label"]>;
         "ds-surface": Omit<DsSurface, keyof DsSurfaceAttributes> & { [K in keyof DsSurface & keyof DsSurfaceAttributes]?: DsSurface[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `attr:${K}`]?: DsSurfaceAttributes[K] } & { [K in keyof DsSurface & keyof DsSurfaceAttributes as `prop:${K}`]?: DsSurface[K] };
@@ -3356,6 +3481,8 @@ declare module "@stencil/core" {
             "ds-radio-group": LocalJSX.IntrinsicElements["ds-radio-group"] & JSXBase.HTMLAttributes<HTMLDsRadioGroupElement>;
             "ds-scrollbar": LocalJSX.IntrinsicElements["ds-scrollbar"] & JSXBase.HTMLAttributes<HTMLDsScrollbarElement>;
             "ds-select": LocalJSX.IntrinsicElements["ds-select"] & JSXBase.HTMLAttributes<HTMLDsSelectElement>;
+            "ds-shell-gradient-picker": LocalJSX.IntrinsicElements["ds-shell-gradient-picker"] & JSXBase.HTMLAttributes<HTMLDsShellGradientPickerElement>;
+            "ds-shell-gradient-swatch": LocalJSX.IntrinsicElements["ds-shell-gradient-swatch"] & JSXBase.HTMLAttributes<HTMLDsShellGradientSwatchElement>;
             "ds-skeleton": LocalJSX.IntrinsicElements["ds-skeleton"] & JSXBase.HTMLAttributes<HTMLDsSkeletonElement>;
             "ds-slider": LocalJSX.IntrinsicElements["ds-slider"] & JSXBase.HTMLAttributes<HTMLDsSliderElement>;
             "ds-surface": LocalJSX.IntrinsicElements["ds-surface"] & JSXBase.HTMLAttributes<HTMLDsSurfaceElement>;

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

@@ -4,6 +4,8 @@ export { SHELL_BAR_NAV_VT_NAME, SHELL_NAV_REVEAL_DURATION_VAR, SHELL_NAV_REVEAL_
 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_CHROME_SURFACE_POSITION_VAR, SHELL_GRADIENT_OPACITY, buildShellRadialGradient, shellGradientImage, shellGradientSize, shellGradientPositionPanel, shellGradientPositionBar, shellChromeSurfacePosition, shellChromeLayerActive, readShellViewportDimensions, } from './shell-gradient';
 export type { ShellGradientLayout, ShellViewportDimensions } from './shell-gradient';
+export type { ShellGradientPreset } from './shell-gradient-presets';
+export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, isShellGradientPreset, shellGradientPresetStopToken, } from './shell-gradient-presets';
 export type { ChromeTransitionDetail, ChromeTransitionSource } from './chrome-transition';
 export { CHROME_TRANSITION_END, CHROME_TRANSITION_START, ChromeTransitionDepth, createRafCoalescer, readChromeTransitionSource, readChromeTransitionPhase, } from './chrome-transition';
 export { barGradientPositionFromPanelWidth, isPanelNavCollapsed, panelWidthPxFromTokens, readCssVarWidthPx, readPanelNavWidthTokens, } from './shell-chrome-metrics';

package/dist/types/nav/shell-gradient-presets.d.ts

@@ -0,0 +1,11 @@
+/** Built-in shell chrome wash presets — cool (blue), neutral (grey), warm (yellow). */
+export type ShellGradientPreset = 'cool' | 'neutral' | 'warm';
+export declare const SHELL_GRADIENT_PRESETS: ShellGradientPreset[];
+/** Default wash when `gradient-preset` is omitted. */
+export declare const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset;
+export declare const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string>;
+export declare function shellGradientPresetStopToken(preset: ShellGradientPreset): string;
+export declare function isShellGradientPreset(value: string): value is ShellGradientPreset;
+/** Radial wash for a preset — transparent at top-left into the intent stop. */
+export declare function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string;
+//# sourceMappingURL=shell-gradient-presets.d.ts.map

package/dist/types/nav/shell-gradient.d.ts

@@ -1,4 +1,7 @@
 /** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */
+import type { ShellGradientPreset } from './shell-gradient-presets';
+export type { ShellGradientPreset } from './shell-gradient-presets';
+export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, isShellGradientPreset, shellGradientPresetStopToken, } from './shell-gradient-presets';
 export declare const SHELL_GRADIENT_IMAGE_VAR = "--ds-shell-gradient-image";
 export declare const SHELL_GRADIENT_SIZE_VAR = "--ds-shell-gradient-size";
 export declare const SHELL_GRADIENT_POSITION_PANEL_VAR = "--ds-shell-gradient-position-panel";
@@ -12,11 +15,11 @@ export declare const SHELL_GRADIENT_OPACITY = "0.1";
 export declare function shellChromeLayerActive(gradient: boolean, grid: boolean): boolean;
 /**
  * Shell radial wash — same for panel and bar nav.
- * Tokens follow `data-theme` (light/dark blue intent).
+ * Tokens follow `data-theme` (light/dark intent stops).
  */
-export declare function buildShellRadialGradient(): string;
-/** Built-in radial image (optional `gradientSrc` on shell overrides). */
-export declare function shellGradientImage(): string;
+export declare function buildShellRadialGradient(preset?: ShellGradientPreset): string;
+/** Built-in radial image (`gradientSrc` on shell overrides). */
+export declare function shellGradientImage(preset?: ShellGradientPreset): string;
 export interface ShellViewportDimensions {
     width: number;
     height: number;

package/dist/types/nav/shell-shortcuts.d.ts

@@ -1,10 +1,10 @@
 import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';
 export type ShellShortcutAction = 'toggle-panel-nav' | 'close-panel-tools' | `open-tool:${PanelToolsToolId}`;
-/** Tool shortcut chords (⌘/Ctrl+K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */
-/** True when Cmd (macOS) or Ctrl (Windows/Linux) is held without Alt/Shift. */
-export declare function isShellShortcutModifier(e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>): boolean;
+/** Tool shortcut keys (K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */
+/** True when no modifier keys are held — avoids browser/app chords like ⌘N. */
+export declare function isBareShellShortcutKey(e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>): boolean;
 /** Skip shell shortcuts while typing in an editable control. */
 export declare function isEditableShortcutTarget(target: EventTarget | null): boolean;
-/** Resolve a shell chrome shortcut, or `null` when the chord is not handled. */
+/** Resolve a shell chrome shortcut, or `null` when the key is not handled. */
 export declare function resolveShellShortcut(e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>): ShellShortcutAction | null;
 //# sourceMappingURL=shell-shortcuts.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -69,7 +69,7 @@
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs",
     "verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-nav-import.mjs",
-    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/shell-shortcuts.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.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/panel-tools.test.ts tests/shell-shortcuts.test.ts tests/shell-gradient-presets.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.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",

package/src/angular/index.ts

@@ -30,6 +30,8 @@ export const DIRECTIVES = [
   d.DsRadioGroup,
   d.DsScrollbar,
   d.DsSelect,
+  d.DsShellGradientPicker,
+  d.DsShellGradientSwatch,
   d.DsSkeleton,
   d.DsSlider,
   d.DsSurface,

package/src/angular/proxies.ts

@@ -36,14 +36,14 @@ export declare interface DsAccordion extends Components.DsAccordion {
 
 
 @ProxyCmp({
-  inputs: ['gradient', 'gradientSrc', 'grid', 'navStyle', 'shortcutsEnabled']
+  inputs: ['gradient', 'gradientPreset', 'gradientSrc', 'grid', 'navStyle', 'shortcutsEnabled']
 })
 @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', 'grid', 'navStyle', 'shortcutsEnabled'],
+  inputs: ['gradient', 'gradientPreset', 'gradientSrc', 'grid', 'navStyle', 'shortcutsEnabled'],
   standalone: false
 })
 export class DsAppShell {
@@ -558,13 +558,14 @@ export declare interface DsLoader extends Components.DsLoader {}
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
   inputs: ['align', 'alignOffset', 'anchor', 'anchorId', 'initialFocusVisible', 'items', 'menuWidth', 'minWidth', 'open', 'sections', 'side', 'sideOffset'],
-  outputs: ['dsClose', 'dsSelect'],
+  outputs: ['dsClose', 'dsSelect', 'dsGradientSelect'],
   standalone: false
 })
 export class DsMenu {
   protected el: HTMLDsMenuElement;
   @Output() dsClose = new EventEmitter<CustomEvent<void>>();
   @Output() dsSelect = new EventEmitter<CustomEvent<IDsMenuMenuItemData>>();
+  @Output() dsGradientSelect = new EventEmitter<CustomEvent<IDsMenuShellGradientPreset>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -573,12 +574,17 @@ export class DsMenu {
 
 
 import type { MenuItemData as IDsMenuMenuItemData } from '@ds-mo/ui';
+import type { ShellGradientPreset as IDsMenuShellGradientPreset } from '@ds-mo/ui';
 
 export declare interface DsMenu extends Components.DsMenu {
 
   dsClose: EventEmitter<CustomEvent<void>>;
 
   dsSelect: EventEmitter<CustomEvent<IDsMenuMenuItemData>>;
+  /**
+   * Emitted when a `gradient-picker` section swatch is chosen.
+   */
+  dsGradientSelect: EventEmitter<CustomEvent<IDsMenuShellGradientPreset>>;
 }
 
 
@@ -818,6 +824,66 @@ export declare interface DsSelect extends Components.DsSelect {
 }
 
 
+@ProxyCmp({
+  inputs: ['value']
+})
+@Component({
+  selector: 'ds-shell-gradient-picker',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['value'],
+  outputs: ['dsChange'],
+  standalone: false
+})
+export class DsShellGradientPicker {
+  protected el: HTMLDsShellGradientPickerElement;
+  @Output() dsChange = new EventEmitter<CustomEvent<IDsShellGradientPickerShellGradientPreset>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+import type { ShellGradientPreset as IDsShellGradientPickerShellGradientPreset } from '@ds-mo/ui';
+
+export declare interface DsShellGradientPicker extends Components.DsShellGradientPicker {
+
+  dsChange: EventEmitter<CustomEvent<IDsShellGradientPickerShellGradientPreset>>;
+}
+
+
+@ProxyCmp({
+  inputs: ['ariaLabel', 'inactive', 'preset', 'selected']
+})
+@Component({
+  selector: 'ds-shell-gradient-swatch',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['ariaLabel', 'inactive', 'preset', 'selected'],
+  outputs: ['dsSelect'],
+  standalone: false
+})
+export class DsShellGradientSwatch {
+  protected el: HTMLDsShellGradientSwatchElement;
+  @Output() dsSelect = new EventEmitter<CustomEvent<IDsShellGradientSwatchShellGradientPreset>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+import type { ShellGradientPreset as IDsShellGradientSwatchShellGradientPreset } from '@ds-mo/ui';
+
+export declare interface DsShellGradientSwatch extends Components.DsShellGradientSwatch {
+
+  dsSelect: EventEmitter<CustomEvent<IDsShellGradientSwatchShellGradientPreset>>;
+}
+
+
 @ProxyCmp({
   inputs: ['height', 'lines', 'shimmer', 'variant', 'width']
 })

package/src/react/components.ts

@@ -32,6 +32,8 @@ 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";
+export { DsShellGradientPicker } from "./ds-shell-gradient-picker.js";
+export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.js";
 export { DsSkeleton } from "./ds-skeleton.js";
 export { DsSlider } from "./ds-slider.js";
 export { DsSurface } from "./ds-surface.js";

package/src/react/ds-menu.ts

@@ -11,13 +11,14 @@ import type { EventName, StencilReactComponent } from '@stencil/react-output-tar
 import { createComponent } from '@stencil/react-output-target/runtime';
 import React from 'react';
 
-import { type DsMenuCustomEvent, type MenuItemData } from "@ds-mo/ui";
+import { type DsMenuCustomEvent, type MenuItemData, type ShellGradientPreset } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsMenu as DsMenuElement, defineCustomElement as defineDsMenu } from "@ds-mo/ui/dist/components/ds-menu.js";
 
 export type DsMenuEvents = {
     onDsClose: EventName<DsMenuCustomEvent<void>>,
-    onDsSelect: EventName<DsMenuCustomEvent<MenuItemData>>
+    onDsSelect: EventName<DsMenuCustomEvent<MenuItemData>>,
+    onDsGradientSelect: EventName<DsMenuCustomEvent<ShellGradientPreset>>
 };
 
 export const DsMenu: StencilReactComponent<DsMenuElement, DsMenuEvents, Components.DsMenu> = /*@__PURE__*/ createComponent<DsMenuElement, DsMenuEvents, Components.DsMenu>({
@@ -27,7 +28,8 @@ export const DsMenu: StencilReactComponent<DsMenuElement, DsMenuEvents, Componen
     react: React,
     events: {
         onDsClose: 'dsClose',
-        onDsSelect: 'dsSelect'
+        onDsSelect: 'dsSelect',
+        onDsGradientSelect: 'dsGradientSelect'
     } as DsMenuEvents,
     defineCustomElement: defineDsMenu
 });

package/src/react/ds-shell-gradient-picker.ts

@@ -0,0 +1,27 @@
+'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 DsShellGradientPickerCustomEvent, type ShellGradientPreset } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsShellGradientPicker as DsShellGradientPickerElement, defineCustomElement as defineDsShellGradientPicker } from "@ds-mo/ui/dist/components/ds-shell-gradient-picker.js";
+
+export type DsShellGradientPickerEvents = { onDsChange: EventName<DsShellGradientPickerCustomEvent<ShellGradientPreset>> };
+
+export const DsShellGradientPicker: StencilReactComponent<DsShellGradientPickerElement, DsShellGradientPickerEvents, Components.DsShellGradientPicker> = /*@__PURE__*/ createComponent<DsShellGradientPickerElement, DsShellGradientPickerEvents, Components.DsShellGradientPicker>({
+    tagName: 'ds-shell-gradient-picker',
+    elementClass: DsShellGradientPickerElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsChange: 'dsChange' } as DsShellGradientPickerEvents,
+    defineCustomElement: defineDsShellGradientPicker
+});

package/src/react/ds-shell-gradient-swatch.ts

@@ -0,0 +1,27 @@
+'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 DsShellGradientSwatchCustomEvent, type ShellGradientPreset } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsShellGradientSwatch as DsShellGradientSwatchElement, defineCustomElement as defineDsShellGradientSwatch } from "@ds-mo/ui/dist/components/ds-shell-gradient-swatch.js";
+
+export type DsShellGradientSwatchEvents = { onDsSelect: EventName<DsShellGradientSwatchCustomEvent<ShellGradientPreset>> };
+
+export const DsShellGradientSwatch: StencilReactComponent<DsShellGradientSwatchElement, DsShellGradientSwatchEvents, Components.DsShellGradientSwatch> = /*@__PURE__*/ createComponent<DsShellGradientSwatchElement, DsShellGradientSwatchEvents, Components.DsShellGradientSwatch>({
+    tagName: 'ds-shell-gradient-swatch',
+    elementClass: DsShellGradientSwatchElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsSelect: 'dsSelect' } as DsShellGradientSwatchEvents,
+    defineCustomElement: defineDsShellGradientSwatch
+});

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

@@ -5,6 +5,10 @@ import {
   resolveShellShortcut,
 } from '../../nav/shell-shortcuts';
 import type { PanelToolsToolId } from '../PanelTools/panel-tools-types';
+import {
+  DEFAULT_SHELL_GRADIENT_PRESET,
+  type ShellGradientPreset,
+} from '../../nav/shell-gradient-presets';
 import {
   CHROME_TRANSITION_END,
   CHROME_TRANSITION_START,
@@ -53,7 +57,14 @@ export class AppShell {
    */
   @Prop() gradientSrc: string = '';
 
-  /** When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer. */
+  /**
+   * Built-in shell wash preset when `gradient` is true.
+   * `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
+   */
+  @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =
+    DEFAULT_SHELL_GRADIENT_PRESET;
+
+  /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */
   @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;
 
   @Element() el!: HTMLElement;
@@ -98,6 +109,7 @@ export class AppShell {
   @Watch('gradient')
   @Watch('grid')
   @Watch('gradientSrc')
+  @Watch('gradientPreset')
   onShellPropsChange() {
     this.syncSlottedNavStyle();
     this.scheduleChromeSync();
@@ -311,7 +323,7 @@ export class AppShell {
 
     const image = this.gradientSrc.trim()
       ? `url(${this.gradientSrc.trim()})`
-      : buildShellRadialGradient();
+      : buildShellRadialGradient(this.gradientPreset);
 
     const size = shellGradientSize({
       width: viewport.width,

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

@@ -1,4 +1,4 @@
-import type { MenuSection } from '../Menu/menu-types';
+import type { MenuItemData, MenuSection } from '../Menu/menu-types';
 import {
   getSelectableTabs,
   isTabDivider,
@@ -9,7 +9,7 @@ import {
 /** Map BarNav tabs to menu sections, preserving `{ type: 'divider' }` as section breaks. */
 export function tabsToMenuSections(tabs: TabItem[], selectedId: string): MenuSection[] {
   const sections: MenuSection[] = [];
-  let batch: MenuSection['items'] = [];
+  let batch: MenuItemData[] = [];
 
   for (const item of tabs) {
     if (isTabDivider(item)) {