@ds-mo/ui 2.7.0 → 2.9.0

package/dist/types/utils/token-defaults.d.ts

@@ -12,6 +12,7 @@ export declare const TOKEN_DEFAULTS: {
     readonly panelWidthMd: "--dimension-panel-width-md";
     readonly panelWidthLg: "--dimension-panel-width-lg";
     readonly menuWidthXs: "--dimension-menu-width-xs";
+    readonly motionShort2: "--effect-motion-short-2";
     readonly motionShort3: "--effect-motion-short-3";
     readonly animationDurationShort3: "--effect-animation-duration-short-3";
     readonly animationDurationMedium1: "--effect-animation-duration-medium-1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/src/angular/index.ts

@@ -8,10 +8,10 @@ export const DIRECTIVES = [
   d.DsBanner,
   d.DsBarNav,
   d.DsBreadcrumb,
-  d.DsButton,
-  d.DsButtonGroup,
+  d.DsButtonFilled,
   d.DsButtonUnfilledIcon,
   d.DsCard,
+  d.DsCardSetting,
   d.DsCheckbox,
   d.DsChip,
   d.DsDivider,
@@ -42,7 +42,5 @@ export const DIRECTIVES = [
   d.DsText,
   d.DsToastProvider,
   d.DsToggle,
-  d.DsToggleButton,
-  d.DsToggleButtonGroup,
   d.DsTooltip
 ];

package/src/angular/proxies.ts

@@ -170,22 +170,21 @@ export declare interface DsBreadcrumb extends Components.DsBreadcrumb {
 
 
 @ProxyCmp({
-  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'badgeCount', 'contrast', 'dropdown', 'elevation', 'fullWidth', 'href', 'inactive', 'intent', 'label', 'loading', 'rounded', 'size', 'target', 'type', 'variant', 'width']
+  inputs: ['ariaLabel', 'contrast', 'icon', 'inactive', 'intent', 'type'],
+  methods: ['setFocus']
 })
 @Component({
-  selector: 'ds-button',
+  selector: 'ds-button-filled',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'badgeCount', 'contrast', 'dropdown', 'elevation', 'fullWidth', 'href', 'inactive', 'intent', 'label', 'loading', 'rounded', 'size', 'target', 'type', 'variant', 'width'],
-  outputs: ['dsClick', 'dsMouseEnter', 'dsMouseLeave'],
+  inputs: ['ariaLabel', 'contrast', 'icon', 'inactive', 'intent', 'type'],
+  outputs: ['dsClick'],
   standalone: false
 })
-export class DsButton {
-  protected el: HTMLDsButtonElement;
+export class DsButtonFilled {
+  protected el: HTMLDsButtonFilledElement;
   @Output() dsClick = new EventEmitter<CustomEvent<MouseEvent>>();
-  @Output() dsMouseEnter = new EventEmitter<CustomEvent<MouseEvent>>();
-  @Output() dsMouseLeave = new EventEmitter<CustomEvent<MouseEvent>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -193,48 +192,14 @@ export class DsButton {
 }
 
 
-export declare interface DsButton extends Components.DsButton {
+export declare interface DsButtonFilled extends Components.DsButtonFilled {
 
   dsClick: EventEmitter<CustomEvent<MouseEvent>>;
-
-  dsMouseEnter: EventEmitter<CustomEvent<MouseEvent>>;
-
-  dsMouseLeave: EventEmitter<CustomEvent<MouseEvent>>;
-}
-
-
-@ProxyCmp({
-  inputs: ['elevation', 'items', 'rounded', 'size']
-})
-@Component({
-  selector: 'ds-button-group',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['elevation', 'items', 'rounded', 'size'],
-  outputs: ['dsClick'],
-  standalone: false
-})
-export class DsButtonGroup {
-  protected el: HTMLDsButtonGroupElement;
-  @Output() dsClick = new EventEmitter<CustomEvent<number>>();
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface DsButtonGroup extends Components.DsButtonGroup {
-  /**
-   * Emits the index of the clicked item.
-   */
-  dsClick: EventEmitter<CustomEvent<number>>;
 }
 
 
 @ProxyCmp({
-  inputs: ['activeFill', 'ariaLabel', 'background', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'inactive', 'isActive', 'pressed', 'type'],
+  inputs: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'inactive', 'isActive', 'pressed', 'type'],
   methods: ['setFocus']
 })
 @Component({
@@ -242,7 +207,7 @@ export declare interface DsButtonGroup extends Components.DsButtonGroup {
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activeFill', 'ariaLabel', 'background', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'inactive', 'isActive', 'pressed', 'type'],
+  inputs: ['activeFill', 'ariaLabel', 'background', 'backgroundContrast', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'inactive', 'isActive', 'pressed', 'type'],
   outputs: ['dsClick', 'dsChange'],
   standalone: false
 })
@@ -288,6 +253,36 @@ export class DsCard {
 export declare interface DsCard extends Components.DsCard {}
 
 
+@ProxyCmp({
+  inputs: ['cardWidth', 'editing', 'heading']
+})
+@Component({
+  selector: 'ds-card-setting',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['cardWidth', 'editing', { name: 'heading', required: true }],
+  outputs: ['dsEditingChange'],
+  standalone: false
+})
+export class DsCardSetting {
+  protected el: HTMLDsCardSettingElement;
+  @Output() dsEditingChange = new EventEmitter<CustomEvent<boolean>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsCardSetting extends Components.DsCardSetting {
+  /**
+   * Emits when the user enters or exits edit mode.
+   */
+  dsEditingChange: EventEmitter<CustomEvent<boolean>>;
+}
+
+
 @ProxyCmp({
   inputs: ['checked', 'inactive', 'indeterminate', 'label']
 })
@@ -1151,66 +1146,6 @@ export declare interface DsToggle extends Components.DsToggle {
 }
 
 
-@ProxyCmp({
-  inputs: ['ariaLabel', 'background', 'elevation', 'icon', 'inactive', 'label', 'pressed', 'rounded', 'size']
-})
-@Component({
-  selector: 'ds-toggle-button',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'background', 'elevation', 'icon', 'inactive', 'label', 'pressed', 'rounded', 'size'],
-  outputs: ['dsChange'],
-  standalone: false
-})
-export class DsToggleButton {
-  protected el: HTMLDsToggleButtonElement;
-  @Output() dsChange = new EventEmitter<CustomEvent<boolean>>();
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface DsToggleButton extends Components.DsToggleButton {
-  /**
-   * Emits the new pressed value (!pressed) on click.
-   */
-  dsChange: EventEmitter<CustomEvent<boolean>>;
-}
-
-
-@ProxyCmp({
-  inputs: ['background', 'elevation', 'items', 'rounded', 'size', 'value']
-})
-@Component({
-  selector: 'ds-toggle-button-group',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: '<ng-content></ng-content>',
-  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['background', 'elevation', 'items', 'rounded', 'size', 'value'],
-  outputs: ['dsChange'],
-  standalone: false
-})
-export class DsToggleButtonGroup {
-  protected el: HTMLDsToggleButtonGroupElement;
-  @Output() dsChange = new EventEmitter<CustomEvent<string>>();
-  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
-    c.detach();
-    this.el = r.nativeElement;
-  }
-}
-
-
-export declare interface DsToggleButtonGroup extends Components.DsToggleButtonGroup {
-  /**
-   * Emits the id of the newly selected item.
-   */
-  dsChange: EventEmitter<CustomEvent<string>>;
-}
-
-
 @ProxyCmp({
   inputs: ['align', 'alignOffset', 'delay', 'label', 'shortcutKey', 'shortcutKeyPosition', 'side', 'sideOffset']
 })

package/src/react/components.ts

@@ -10,9 +10,9 @@ export { DsBadge } from "./ds-badge.js";
 export { DsBanner } from "./ds-banner.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsBreadcrumb } from "./ds-breadcrumb.js";
-export { DsButtonGroup } from "./ds-button-group.js";
+export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilledIcon } from "./ds-button-unfilled-icon.js";
-export { DsButton } from "./ds-button.js";
+export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCard } from "./ds-card.js";
 export { DsCheckbox } from "./ds-checkbox.js";
 export { DsChip } from "./ds-chip.js";
@@ -43,7 +43,5 @@ export { DsTable } from "./ds-table.js";
 export { DsTag } from "./ds-tag.js";
 export { DsText } from "./ds-text.js";
 export { DsToastProvider } from "./ds-toast-provider.js";
-export { DsToggleButtonGroup } from "./ds-toggle-button-group.js";
-export { DsToggleButton } from "./ds-toggle-button.js";
 export { DsToggle } from "./ds-toggle.js";
 export { DsTooltip } from "./ds-tooltip.js";

package/src/react/ds-button-filled.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 DsButtonFilledCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsButtonFilled as DsButtonFilledElement, defineCustomElement as defineDsButtonFilled } from "@ds-mo/ui/dist/components/ds-button-filled.js";
+
+export type DsButtonFilledEvents = { onDsClick: EventName<DsButtonFilledCustomEvent<MouseEvent>> };
+
+export const DsButtonFilled: StencilReactComponent<DsButtonFilledElement, DsButtonFilledEvents, Components.DsButtonFilled> = /*@__PURE__*/ createComponent<DsButtonFilledElement, DsButtonFilledEvents, Components.DsButtonFilled>({
+    tagName: 'ds-button-filled',
+    elementClass: DsButtonFilledElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsClick: 'dsClick' } as DsButtonFilledEvents,
+    defineCustomElement: defineDsButtonFilled
+});

package/src/react/ds-card-setting.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 DsCardSettingCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardSetting as DsCardSettingElement, defineCustomElement as defineDsCardSetting } from "@ds-mo/ui/dist/components/ds-card-setting.js";
+
+export type DsCardSettingEvents = { onDsEditingChange: EventName<DsCardSettingCustomEvent<boolean>> };
+
+export const DsCardSetting: StencilReactComponent<DsCardSettingElement, DsCardSettingEvents, Components.DsCardSetting> = /*@__PURE__*/ createComponent<DsCardSettingElement, DsCardSettingEvents, Components.DsCardSetting>({
+    tagName: 'ds-card-setting',
+    elementClass: DsCardSettingElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsEditingChange: 'dsEditingChange' } as DsCardSettingEvents,
+    defineCustomElement: defineDsCardSetting
+});

package/src/wc/components/ButtonFilled/ButtonFilled.tsx

@@ -0,0 +1,86 @@
+import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
+
+export type ButtonFilledIntent =
+  | 'neutral'
+  | 'brand'
+  | 'ai'
+  | 'negative'
+  | 'warning'
+  | 'caution'
+  | 'positive'
+  | 'guide'
+  | 'walkthrough';
+
+export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
+
+@Component({
+  tag: 'ds-button-filled',
+  styleUrl: 'ButtonFilled.css',
+  scoped: true,
+})
+export class ButtonFilled {
+  @Element() el!: HTMLElement;
+
+  /** Icon name passed to <ds-icon>. */
+  @Prop() icon: string = '';
+
+  /** Semantic colour intent. */
+  @Prop() intent: ButtonFilledIntent = 'brand';
+
+  /**
+   * Background fill weight. Foreground uses the paired contrast token:
+   * bold → faint, strong → medium, medium → strong, faint → bold.
+   */
+  @Prop() contrast: ButtonFilledContrast = 'bold';
+
+  /** Disables interaction. */
+  @Prop() inactive: boolean = false;
+
+  /** Native button type. */
+  @Prop() type: 'button' | 'submit' | 'reset' = 'button';
+
+  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';
+
+  @Event() dsClick!: EventEmitter<MouseEvent>;
+
+  private buttonEl: HTMLButtonElement | null = null;
+
+  @Method()
+  async setFocus() {
+    this.buttonEl?.focus();
+  }
+
+  private handleClick = (event: MouseEvent) => {
+    if (this.inactive) return;
+    this.dsClick.emit(event);
+  };
+
+  render() {
+    const cls: Record<string, boolean> = {
+      'button-filled': true,
+      'ds-focus-ring-inset': true,
+      'button-filled--inactive': this.inactive,
+      [`button-filled--intent-${this.intent}`]: true,
+      [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',
+    };
+
+    return (
+      <Host tabIndex={-1}>
+        <button
+          ref={el => {
+            this.buttonEl = el ?? null;
+          }}
+          type={this.type}
+          class={cls}
+          disabled={this.inactive}
+          aria-label={this.ariaLabel}
+          onClick={this.handleClick}
+        >
+          <span class="button-filled__icon-wrap">
+            <ds-icon name={this.icon} size="md" color="inherit" />
+          </span>
+        </button>
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1 @@
+export type { ButtonFilledContrast, ButtonFilledIntent } from './ButtonFilled';

package/src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.tsx

@@ -1,12 +1,8 @@
 import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
 
-export type ButtonUnfilledIconBackground =
-  | 'faint'
-  | 'medium'
-  | 'bold'
-  | 'strong'
-  | 'always-dark'
-  | 'navigation';
+export type ButtonUnfilledIconOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
+
+export type ButtonUnfilledIconBackground = 'always-dark' | 'navigation';
 
 @Component({
   tag: 'ds-button-unfilled-icon',
@@ -37,7 +33,14 @@ export class ButtonUnfilledIcon {
   /** Native button type. */
   @Prop() type: 'button' | 'submit' | 'reset' = 'button';
 
-  /** Parent surface context — adjusts hover/press/focus colours for coloured backgrounds. */
+  /**
+   * Foreground and interaction tokens when the button sits on a contrasting parent
+   * background (default, medium, bold, or strong).
+   */
+  @Prop({ attribute: 'on-background-contrast' })
+  backgroundContrast?: ButtonUnfilledIconOnBackgroundContrast;
+
+  /** Parent surface context for navigation and always-dark chrome. */
   @Prop() background: ButtonUnfilledIconBackground | undefined;
 
   @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';
@@ -68,8 +71,13 @@ export class ButtonUnfilledIcon {
     this.dsChange.emit(!this.isActive);
   };
 
+  private effectiveContrast(): ButtonUnfilledIconOnBackgroundContrast {
+    return this.backgroundContrast ?? 'default';
+  }
+
   render() {
     const bg = this.background;
+    const contrast = this.effectiveContrast();
 
     const cls: Record<string, boolean> = {
       'button-icon': true,
@@ -78,9 +86,9 @@ export class ButtonUnfilledIcon {
       'button-icon--active-fill': this.isActive && this.activeFill,
       'button-icon--bordered': this.hasBorder,
       'button-icon--inactive': this.inactive,
-      'button-icon--on-medium': bg === 'medium',
-      'button-icon--on-bold': bg === 'bold',
-      'button-icon--on-strong': bg === 'strong',
+      'button-icon--contrast-medium': contrast === 'medium',
+      'button-icon--contrast-bold': contrast === 'bold',
+      'button-icon--contrast-strong': contrast === 'strong',
       'button-icon--on-always-dark': bg === 'always-dark',
       'button-icon--on-navigation': bg === 'navigation',
     };

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

@@ -1 +1 @@
-export type { ButtonUnfilledIconBackground } from './ButtonUnfilledIcon';
+export type { ButtonUnfilledIconBackground, ButtonUnfilledIconOnBackgroundContrast } from './ButtonUnfilledIcon';

package/src/wc/components/CardSetting/CardSetting.tsx

@@ -0,0 +1,96 @@
+import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
+
+export type CardSettingWidth = 'xs' | 'sm' | 'md' | 'lg';
+
+const CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {
+  xs: 'var(--dimension-card-width-xs)',
+  sm: 'var(--dimension-card-width-sm)',
+  md: 'var(--dimension-card-width-md)',
+  lg: 'var(--dimension-card-width-lg)',
+};
+
+const FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';
+
+@Component({
+  tag: 'ds-card-setting',
+  styleUrl: 'CardSetting.css',
+  scoped: true,
+})
+export class CardSetting {
+  /** Section heading shown in the card header. */
+  @Prop() heading!: string;
+
+  /** Card width token. */
+  @Prop() cardWidth: CardSettingWidth = 'md';
+
+  /** Controlled edit state — parent owns single-edit orchestration. */
+  @Prop() editing = false;
+
+  /** Emits when the user enters or exits edit mode. */
+  @Event() dsEditingChange!: EventEmitter<boolean>;
+
+  private enterEdit = () => {
+    this.dsEditingChange.emit(true);
+  };
+
+  private exitEdit = () => {
+    this.dsEditingChange.emit(false);
+  };
+
+  render() {
+    const editing = this.editing;
+
+    return (
+      <Host
+        class={{
+          'card-setting': true,
+          'card-setting--editing': editing,
+        }}
+        style={{ '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth] }}
+      >
+        <header class="card-setting__header">
+          <div class="card-setting__title-wrap">
+            <ds-text
+              class="card-setting__title"
+              variant="text-title-small"
+              color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}
+              as="h2"
+            >
+              {this.heading}
+            </ds-text>
+          </div>
+          {!editing ? (
+            <ds-button-unfilled-icon
+              type="button"
+              icon="Pencil"
+              aria-label="Edit"
+              onDsClick={this.enterEdit}
+            />
+          ) : (
+            <div class="card-setting__actions">
+              <ds-button-unfilled-icon
+                type="button"
+                icon="Cross"
+                backgroundContrast="bold"
+                has-border
+                aria-label="Cancel"
+                onDsClick={this.exitEdit}
+              />
+              <ds-button-filled
+                type="button"
+                icon="Check"
+                intent="brand"
+                contrast="faint"
+                aria-label="Save"
+                onDsClick={this.exitEdit}
+              />
+            </div>
+          )}
+        </header>
+        <div class="card-setting__body">
+          <slot />
+        </div>
+      </Host>
+    );
+  }
+}

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

@@ -0,0 +1 @@
+export type { CardSettingWidth } from './CardSetting';

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

@@ -124,7 +124,7 @@ export class Menu {
   }
 
   private get closeAnimationMs(): number {
-    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);
+    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);
   }
 
   private get resolvedAnchor(): HTMLElement | null {
@@ -312,7 +312,6 @@ export class Menu {
   private handleItemClick(item: MenuItemData) {
     if (item.isInactive) return;
     this.dsSelect.emit(item);
-    this.close();
   }
 
   private handleGradientSelect(preset: ShellGradientPreset) {

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

@@ -14,11 +14,13 @@ export interface MenuPlacement {
  * Anchor from `dsNavUserAction` detail `{ anchor }` (id `ds-panel-nav-user-menu-anchor`).
  *
  * Not for BarNav overflow menus — those use `side="bottom"` / `align="end"` internally.
- * Use `align: 'end'` so tall footer menus bottom-align on the anchor and grow upward.
+ * `align: 'end'` bottom-aligns on the anchor; offsets nudge into the content area:
+ * - `sideOffset` space-100 + space-050 (12px): 4px past the panel-nav outer edge (anchor is ~8px inset).
+ * - `alignOffset` space-050 (4px): 4px below the footer user row.
  */
 export const PANEL_NAV_USER_MENU_PLACEMENT = {
   side: 'right',
   align: 'end',
-  sideOffset: TOKEN_CSS_LENGTHS.space050,
-  alignOffset: 0,
+  sideOffset: 'calc(var(--dimension-space-100) + var(--dimension-space-050))',
+  alignOffset: TOKEN_CSS_LENGTHS.space050,
 } as const satisfies MenuPlacement;

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

@@ -16,7 +16,7 @@ export class ShellGradientSwatch {
   /** Wash preset this orb previews. */
   @Prop({ reflect: true }) preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET;
 
-  /** Selected state — brand ring with background offset (notification-dot pattern). */
+  /** Selected — brand stroke + halo over inner fill/border/interaction stack. */
   @Prop({ reflect: true }) selected = false;
 
   @Prop() inactive = false;
@@ -55,7 +55,13 @@ export class ShellGradientSwatch {
           aria-pressed={this.selected ? 'true' : 'false'}
           disabled={this.inactive}
           onClick={this.handleClick}
-        />
+        >
+          <span class="shell-gradient-swatch__fill" aria-hidden="true" />
+          <span class="shell-gradient-swatch__border" aria-hidden="true" />
+          <span class="shell-gradient-swatch__interaction" aria-hidden="true" />
+          <span class="shell-gradient-swatch__halo" aria-hidden="true" />
+          <span class="shell-gradient-swatch__stroke" aria-hidden="true" />
+        </button>
       </Host>
     );
   }