@ds-mo/ui 2.4.1 → 2.5.0

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,6 +57,13 @@ export class AppShell {
    */
   @Prop() gradientSrc: string = '';
 
+  /**
+   * 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;
 
@@ -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)) {

package/src/wc/components/Menu/Menu.tsx

@@ -2,6 +2,8 @@ import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h,
 import { resolveCssLengthPx, resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';
 import { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';
 import type { MenuItemData, MenuSection } from './menu-types';
+import { isMenuGradientPickerSection } from './menu-types';
+import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';
 
 /** rAF retries while the popup mounts or the anchor resolves. */
 const POSITION_RETRY_BUDGET = 8;
@@ -41,6 +43,8 @@ export class Menu {
 
   @Event() dsClose!: EventEmitter<void>;
   @Event() dsSelect!: EventEmitter<MenuItemData>;
+  /** Emitted when a `gradient-picker` section swatch is chosen. */
+  @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;
 
   private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;
   private scrollResizeHandler: (() => void) | null = null;
@@ -136,7 +140,9 @@ export class Menu {
   }
 
   private get flatItems(): MenuItemData[] {
-    return this.activeSections.flatMap(s => s.items);
+    return this.activeSections.flatMap(section =>
+      isMenuGradientPickerSection(section) ? [] : section.items,
+    );
   }
 
   private cancelPositionRetry() {
@@ -309,6 +315,10 @@ export class Menu {
     this.close();
   }
 
+  private handleGradientSelect(preset: ShellGradientPreset) {
+    this.dsGradientSelect.emit(preset);
+  }
+
   render() {
     if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;
 
@@ -339,7 +349,11 @@ export class Menu {
           {sections.map((section, si) => (
             <div
               key={si}
-              class={{ 'menu-section': true, 'menu-section--divided': si < sections.length - 1 }}
+              class={{
+                'menu-section': true,
+                'menu-section--divided': si < sections.length - 1,
+                'menu-section--gradient-picker': isMenuGradientPickerSection(section),
+              }}
               role={section.header ? 'group' : undefined}
               aria-label={section.header}
             >
@@ -348,7 +362,16 @@ export class Menu {
                   <span class="text-body-small-emphasis section-label">{section.header}</span>
                 </div>
               )}
-              {section.items.map(item => {
+              {isMenuGradientPickerSection(section) ? (
+                <ds-shell-gradient-picker
+                  value={section.value}
+                  onDsChange={(e: CustomEvent<ShellGradientPreset>) => {
+                    e.stopPropagation();
+                    this.handleGradientSelect(e.detail);
+                  }}
+                />
+              ) : (
+                section.items.map(item => {
                 const idx = flatIdx++;
                 const isFocused = this.focusedIndex === idx;
                 return (
@@ -387,7 +410,7 @@ export class Menu {
                     )}
                   </button>
                 );
-              })}
+              }))}
             </div>
           ))}
         </div>

package/src/wc/components/Menu/menu-types.ts

@@ -1,3 +1,5 @@
+import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';
+
 export type { MenuAlign, MenuSide } from './menu-position';
 
 export interface MenuItemData {
@@ -11,7 +13,23 @@ export interface MenuItemData {
   toggleValue?: boolean;
 }
 
-export interface MenuSection {
+export interface MenuItemsSection {
   header?: string;
   items: MenuItemData[];
 }
+
+export interface MenuGradientPickerSection {
+  header?: string;
+  variant: 'gradient-picker';
+  value: ShellGradientPreset;
+}
+
+export type MenuSection = MenuItemsSection | MenuGradientPickerSection;
+
+export function isMenuGradientPickerSection(
+  section: MenuSection,
+): section is MenuGradientPickerSection {
+  return 'variant' in section && section.variant === 'gradient-picker';
+}
+
+export type { ShellGradientPreset };

package/src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx

@@ -0,0 +1,49 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+import {
+  SHELL_GRADIENT_PRESETS,
+  DEFAULT_SHELL_GRADIENT_PRESET,
+  type ShellGradientPreset,
+} from '../ShellGradientSwatch/shell-gradient-swatch-types';
+
+@Component({
+  tag: 'ds-shell-gradient-picker',
+  styleUrl: 'ShellGradientPicker.css',
+  scoped: true,
+})
+export class ShellGradientPicker {
+  /** Active shell wash preset. */
+  @Prop({ mutable: true, reflect: true }) value: ShellGradientPreset =
+    DEFAULT_SHELL_GRADIENT_PRESET;
+
+  @Event() dsChange!: EventEmitter<ShellGradientPreset>;
+
+  private handleSwatchSelect = (preset: ShellGradientPreset) => {
+    if (preset === this.value) return;
+    this.value = preset;
+    this.dsChange.emit(preset);
+  };
+
+  render() {
+    return (
+      <Host>
+        <div
+          class="shell-gradient-picker"
+          role="radiogroup"
+          aria-label="Shell gradient theme"
+        >
+          {SHELL_GRADIENT_PRESETS.map(preset => (
+            <ds-shell-gradient-swatch
+              key={preset}
+              preset={preset}
+              selected={this.value === preset}
+              onDsSelect={(e: CustomEvent<ShellGradientPreset>) => {
+                e.stopPropagation();
+                this.handleSwatchSelect(e.detail);
+              }}
+            />
+          ))}
+        </div>
+      </Host>
+    );
+  }
+}

package/src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx

@@ -0,0 +1,53 @@
+import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';
+import {
+  SHELL_GRADIENT_PRESET_LABELS,
+  buildShellRadialGradientForPreset,
+  DEFAULT_SHELL_GRADIENT_PRESET,
+  type ShellGradientPreset,
+} from './shell-gradient-swatch-types';
+
+@Component({
+  tag: 'ds-shell-gradient-swatch',
+  styleUrl: 'ShellGradientSwatch.css',
+  scoped: true,
+})
+export class ShellGradientSwatch {
+  /** Wash preset this orb previews. */
+  @Prop({ reflect: true }) preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET;
+
+  /** Selected state — shows an inset brand ring. */
+  @Prop({ reflect: true }) selected = false;
+
+  @Prop() inactive = false;
+
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;
+
+  @Event() dsSelect!: EventEmitter<ShellGradientPreset>;
+
+  private handleClick = () => {
+    if (this.inactive) return;
+    this.dsSelect.emit(this.preset);
+  };
+
+  render() {
+    const label = this.ariaLabel ?? SHELL_GRADIENT_PRESET_LABELS[this.preset];
+
+    return (
+      <Host>
+        <button
+          type="button"
+          class={{
+            'shell-gradient-swatch': true,
+            'ds-focus-ring-inset': true,
+            'shell-gradient-swatch--selected': this.selected,
+          }}
+          style={{ backgroundImage: buildShellRadialGradientForPreset(this.preset) }}
+          aria-label={label}
+          aria-pressed={this.selected ? 'true' : 'false'}
+          disabled={this.inactive}
+          onClick={this.handleClick}
+        />
+      </Host>
+    );
+  }
+}

package/src/wc/components/ShellGradientSwatch/shell-gradient-swatch-types.ts

@@ -0,0 +1,16 @@
+import type { ShellGradientPreset } from '../../nav/shell-gradient-presets';
+import {
+  SHELL_GRADIENT_PRESET_LABELS,
+  buildShellRadialGradientForPreset,
+} from '../../nav/shell-gradient-presets';
+
+export type { ShellGradientPreset };
+
+export {
+  DEFAULT_SHELL_GRADIENT_PRESET,
+  SHELL_GRADIENT_PRESETS,
+  SHELL_GRADIENT_PRESET_LABELS,
+  buildShellRadialGradientForPreset,
+  isShellGradientPreset,
+  shellGradientPresetStopToken,
+} from '../../nav/shell-gradient-presets';