@ds-mo/ui 14.22.2 → 14.24.0

package/dist/types/components/PanelTools/panel-tools-types.d.ts

@@ -9,6 +9,7 @@ export declare const PANEL_TOOLS_PRIMARY_TOOL_ID: CanonicalPanelToolsToolId;
 export declare const PANEL_TOOLS_FOOTER_TOOL_ID: CanonicalPanelToolsToolId;
 export declare const PANEL_TOOLS_LABELS: Record<CanonicalPanelToolsToolId, string>;
 export declare const PANEL_TOOLS_SHORTCUTS: Partial<Record<CanonicalPanelToolsToolId, string>>;
+export type PanelToolsRailPlacement = 'header' | 'body' | 'footer';
 export interface PanelToolsItem {
     id: PanelToolsToolId;
     /** Icon name for <ds-icon>. */
@@ -16,7 +17,7 @@ export interface PanelToolsItem {
     /** Visible and accessible fallback label for custom tool ids. */
     label?: string;
     /** Explicit rail region; canonical Agents/Help placement is the fallback. */
-    railPlacement?: 'header' | 'body' | 'footer';
+    railPlacement?: PanelToolsRailPlacement;
     /** Stable ordering within the selected rail region. */
     order?: number;
     /** Optional shortcut label displayed by the tooltip. */
@@ -30,6 +31,79 @@ export interface PanelToolsItem {
     isInactive?: boolean;
     ariaLabel?: string;
 }
+export type PanelToolsRailAccessoryVisual = {
+    type: 'icon';
+    icon: string;
+} | {
+    type: 'initial';
+    initial: string;
+} | {
+    type: 'image';
+    src: string;
+};
+export interface PanelToolsRailAccessoryAction {
+    /** Stable application-owned action id emitted with the accessory id. */
+    id: string;
+    /** Overrides the accessory label for the primary action. */
+    ariaLabel?: string;
+    isInactive?: boolean;
+}
+export interface PanelToolsRailAccessorySecondaryAction {
+    id: string;
+    icon: string;
+    ariaLabel: string;
+    isInactive?: boolean;
+}
+export type PanelToolsRailTransientTone = 'active' | 'positive';
+interface PanelToolsRailAccessoryBase {
+    /** Stable application-owned identity. Duplicate or blank ids are omitted. */
+    id: string;
+    /** Explicit rail region; accessories never infer placement from their id. */
+    railPlacement: PanelToolsRailPlacement;
+    /** Stable ordering within the selected rail region. */
+    order: number;
+}
+/** Decorative boundary between application-owned rail accessory groups. */
+export interface PanelToolsRailDividerAccessory extends PanelToolsRailAccessoryBase {
+    type: 'divider';
+}
+/**
+ * A compact one-action shortcut that matches standard tool-button geometry.
+ * PanelTools owns its initial orb, notification dot, and transient interaction paint.
+ */
+export interface PanelToolsRailShortcutAccessory extends PanelToolsRailAccessoryBase {
+    type: 'shortcut';
+    /** Accessible shortcut name and action-label fallback. */
+    ariaLabel: string;
+    /** One or two displayed graphemes. Longer values are truncated visually. */
+    initials: string;
+    /** Supplemental notification dot. Include its meaning in the accessible label when needed. */
+    dot?: boolean;
+    action: PanelToolsRailAccessoryAction;
+}
+/**
+ * A direct application intent that never selects a tool or changes drawer state.
+ * PanelTools owns the two-control-height surface and its focus behavior.
+ */
+export interface PanelToolsRailTransientAccessory extends PanelToolsRailAccessoryBase {
+    type: 'transient';
+    /** Accessible accessory name and primary-action fallback label. */
+    ariaLabel: string;
+    visual: PanelToolsRailAccessoryVisual;
+    /** State announced with the primary action and shown in its tooltip. */
+    statusText: string;
+    /** Bold surface treatment. Active uses brand; positive uses positive semantic color. */
+    statusTone: PanelToolsRailTransientTone;
+    primaryAction: PanelToolsRailAccessoryAction;
+    secondaryAction?: PanelToolsRailAccessorySecondaryAction;
+}
+export type PanelToolsRailAccessory = PanelToolsRailDividerAccessory | PanelToolsRailShortcutAccessory | PanelToolsRailTransientAccessory;
+export interface PanelToolsRailAccessoryActionDetail {
+    accessoryId: string;
+    actionId: string;
+    /** Rendered action control, suitable for anchoring an application-owned overlay. */
+    anchor: HTMLElement;
+}
 /** Canonical shell recipe used by Lab and by managed ShellApp examples. */
 export declare const PANEL_TOOLS_DEFAULT_ITEMS: PanelToolsItem[];
 export interface PanelToolsHeaderAction {
@@ -64,4 +138,5 @@ export interface PanelToolsHeaderConfig {
 }
 /** Per-tool header state. The application replaces the object when a tool changes depth or actions. */
 export type PanelToolsHeaders = Partial<Record<PanelToolsToolId, PanelToolsHeaderConfig>>;
+export {};
 //# sourceMappingURL=panel-tools-types.d.ts.map

package/dist/types/components/PanelTools/panel-tools-utils.d.ts

@@ -1,5 +1,21 @@
-import { type PanelToolsItem, type PanelToolsToolId } from './panel-tools-types';
+import { type PanelToolsItem, type PanelToolsRailAccessory, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId } from './panel-tools-types';
 export declare function orderPanelToolsItems(items: PanelToolsItem[]): PanelToolsItem[];
+export type PanelToolsRailEntry = {
+    type: 'tool';
+    id: string;
+    item: PanelToolsItem;
+} | {
+    type: 'accessory';
+    id: string;
+    accessory: PanelToolsRailAccessory;
+};
+/** Merge tools and governed accessories into one visual and keyboard order. */
+export declare function orderPanelToolsRailEntries(items: PanelToolsItem[], accessories: PanelToolsRailAccessory[]): PanelToolsRailEntry[];
+/** Flatten interactive entries while leaving decorative boundaries out of focus order. */
+export declare function panelToolsRailFocusKeys(entries: PanelToolsRailEntry[]): string[];
+/** Preserve the current target across collection changes, or choose its nearest survivor. */
+export declare function reconcilePanelToolsRovingIndex(previousKeys: string[], nextKeys: string[], currentIndex: number): number;
+export declare function panelToolsRailAccessoryActionDetail(accessoryId: string, actionId: string, anchor: HTMLElement): PanelToolsRailAccessoryActionDetail;
 export declare function isPanelToolsToolId(value: string | null): value is PanelToolsToolId;
 export declare function panelToolsRailPlacement(item: PanelToolsItem): 'header' | 'body' | 'footer';
 export declare function reconcilePanelToolsAvailability(items: PanelToolsItem[], open: boolean, activeTool: PanelToolsToolId | ''): {

package/dist/types/components/ShellApp/ShellApp.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
-import type { PanelToolsToolId } from '../PanelTools/panel-tools-types';
+import type { PanelToolsRailAccessoryActionDetail, PanelToolsToolId } from '../PanelTools/panel-tools-types';
 import type { BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';
 import { type ShellGradientPreset } from '../../shell/shell-gradient-presets';
 import { type MobileDestination, type ShellResponsiveMode } from '../../shell/shell-responsive';
@@ -67,6 +67,8 @@ export declare class ShellApp {
         tool: PanelToolsToolId;
         id: string;
     }>;
+    /** Managed desktop/tablet rail accessory intent. */
+    dsRailAccessoryAction: EventEmitter<PanelToolsRailAccessoryActionDetail>;
     /** Managed drawer/fullscreen presentation state. */
     dsPresentationChange: EventEmitter<{
         presentation: 'drawer' | 'fullscreen';
@@ -87,6 +89,12 @@ export declare class ShellApp {
     private managedMobileSheetNavOpen;
     private managedInboxTool;
     private managedBrowseContext;
+    private mobileActionMenuOpen;
+    private mobileActionMenuInitialFocusVisible;
+    private readonly instanceId;
+    private readonly mobileActionMenuTriggerId;
+    private readonly mobileActionMenuId;
+    private mobileActionTriggerEl;
     private resizeObserver;
     private hasLoaded;
     private foregroundRefreshTimer;
@@ -112,6 +120,7 @@ export declare class ShellApp {
     disconnectedCallback(): void;
     onShellPropsChange(): void;
     handleNavigationChange(): void;
+    handlePageChromeChange(): void;
     handleToolsChange(): void;
     onMobileStateChange(_next: unknown, previous: unknown): void;
     private updateResponsiveMode;
@@ -159,6 +168,7 @@ export declare class ShellApp {
     private handleManagedPresentationChange;
     private handleManagedHeaderBack;
     private handleManagedHeaderAction;
+    private handleManagedRailAccessoryAction;
     private handleManagedSheetToggle;
     private activateManagedMobileTool;
     private handleManagedMobileDestination;
@@ -181,6 +191,11 @@ export declare class ShellApp {
     private renderManagedMobileBarNav;
     private renderManagedMobileLeading;
     private renderManagedMobileActions;
+    private get resolvedHeaderActions();
+    private get mobileActionMenuSections();
+    private closeMobileActionMenu;
+    private handleMobileActionSelect;
+    private renderManagedMobileActionMenu;
     private get barTitleSections();
     private renderManagedBarTitle;
     private renderManagedPage;

package/dist/types/components/ShellApp/shell-app-types.d.ts

@@ -1,9 +1,9 @@
 import type { BarNavTab } from '../BarNav/bar-nav-types';
-import type { BarTitleActionItem, BarTitlePrimaryAction } from '../BarTitle/bar-title-types';
+import type { BarTitleActionConfigItem, BarTitleActionItem, BarTitlePrimaryAction } from '../BarTitle/bar-title-types';
 import type { BreadcrumbItem } from '../Breadcrumb/breadcrumb-types';
 import type { MobileHeaderTone } from '../MobileHeader/mobile-header-types';
 import type { PanelNavGroup, PanelNavItem, PanelNavRouterMode } from '../PanelNav/panel-nav-types';
-import type { PanelToolsHeaders, PanelToolsHeaderAction, PanelToolsItem } from '../PanelTools/panel-tools-types';
+import type { PanelToolsHeaders, PanelToolsHeaderAction, PanelToolsItem, PanelToolsRailAccessory } from '../PanelTools/panel-tools-types';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
 import type { ShellPageContentInset, ShellPageContentSurface } from '../ShellPage/shell-page-types';
 export type ShellAppComposition = 'managed' | 'slotted';
@@ -67,6 +67,8 @@ export interface ShellPageChromeConfig {
     breadcrumbAriaLabel?: string;
     primaryAction?: BarTitlePrimaryAction | null;
     actions?: BarTitleActionItem[];
+    /** Ordered desktop, tablet, and mobile page-action model. */
+    actionItems?: BarTitleActionConfigItem[];
     /** Icon actions rendered in the mobile header's trailing lane. */
     mobileActions?: PanelToolsHeaderAction[];
     actionsAriaLabel?: string;
@@ -93,6 +95,8 @@ export interface ShellPageChromeConfig {
  */
 export interface ShellToolsConfig {
     items?: PanelToolsItem[];
+    /** Desktop/tablet-only direct rail intents and decorative group boundaries. */
+    accessories?: PanelToolsRailAccessory[];
     headers?: PanelToolsHeaders;
     storageKey?: string;
     fullscreenHeaderMode?: 'shared' | 'split';

package/dist/types/components/ShellTools/ShellTools.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type PanelToolsHeaders, type PanelToolsItem, type PanelToolsToolId } from '../PanelTools/panel-tools-types';
+import { type PanelToolsHeaders, type PanelToolsItem, type PanelToolsRailAccessory, type PanelToolsRailAccessoryActionDetail, type PanelToolsToolId } from '../PanelTools/panel-tools-types';
 import { type ShellResponsiveMode } from '../../shell/shell-responsive';
 export declare class ShellTools {
     el: HTMLElement;
@@ -10,6 +10,8 @@ export declare class ShellTools {
     presentation: 'drawer' | 'fullscreen';
     fullscreenHeaderMode: 'shared' | 'split';
     items: PanelToolsItem[];
+    /** Desktop/tablet rail accessories. Intentionally omitted from the mobile tool stage. */
+    accessories: PanelToolsRailAccessory[];
     headers: PanelToolsHeaders;
     storageKey: string;
     toolsLabel: string;
@@ -31,6 +33,7 @@ export declare class ShellTools {
         tool: PanelToolsToolId;
         id: string;
     }>;
+    dsRailAccessoryAction: EventEmitter<PanelToolsRailAccessoryActionDetail>;
     private panelToolsEl;
     private get resolvedItems();
     private get availableInboxTools();
@@ -46,6 +49,7 @@ export declare class ShellTools {
     private selectInboxTool;
     private handlePanelToolChange;
     private handlePanelPresentationChange;
+    private handlePanelRailAccessoryAction;
     private handleMobileHeaderAction;
     /** Match PanelTools' imperative activation contract in every responsive mode. */
     activateTool(id: PanelToolsToolId): Promise<void>;

package/dist/types/components/ShellTools/index.d.ts

@@ -1,3 +1,3 @@
 export { ShellTools } from './ShellTools';
-export type { PanelToolsHeaderAction, PanelToolsHeaderConfig, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId, } from '../PanelTools/panel-tools-types';
+export type { PanelToolsHeaderAction, PanelToolsHeaderConfig, PanelToolsHeaders, PanelToolsItem, PanelToolsRailAccessory, PanelToolsRailAccessoryAction, PanelToolsRailAccessoryActionDetail, PanelToolsRailAccessorySecondaryAction, PanelToolsRailAccessoryVisual, PanelToolsRailDividerAccessory, PanelToolsRailPlacement, PanelToolsRailShortcutAccessory, PanelToolsRailTransientAccessory, PanelToolsRailTransientTone, PanelToolsToolId, } from '../PanelTools/panel-tools-types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components.d.ts

@@ -13,7 +13,7 @@ import { BannerAnnouncement, BannerContrast, BannerIntent, BannerOrientation } f
 import { NavChromeStyle } from "./shell/nav-chrome";
 import { BarNavTab } from "./components/BarNav/bar-nav-types";
 import { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/breadcrumb-types";
-import { BarTitleActionItem, BarTitlePlacement, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
+import { BarTitleActionConfigItem, BarTitleActionItem, BarTitlePlacement, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
 import { BarWorkflowStep, BarWorkflowSubmitAction } from "./components/BarWorkflow/bar-workflow-types";
 import { MobileDestination, ShellResponsiveMode } from "./shell/shell-responsive";
 import { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledPopup, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
@@ -51,7 +51,7 @@ import { PaginationChangeDetail, PaginationPageSizeMode } from "./components/Pag
 import { ChromeTransitionDetail } from "./shell/chrome-transition";
 import { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
 import { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
-import { PanelToolHeaderActionDetail, PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
+import { PanelToolHeaderActionDetail, PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolsHeaders, PanelToolsItem, PanelToolsRailAccessory, PanelToolsRailAccessoryActionDetail, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 import { PaperTextureConfig } from "./components/PaperTexture/paper-texture-types";
 import { RadioOption, RadioSize } from "./components/Radio/Radio";
 import { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
@@ -83,7 +83,7 @@ export { BannerAnnouncement, BannerContrast, BannerIntent, BannerOrientation } f
 export { NavChromeStyle } from "./shell/nav-chrome";
 export { BarNavTab } from "./components/BarNav/bar-nav-types";
 export { BreadcrumbItem, BreadcrumbSelectDetail } from "./components/Breadcrumb/breadcrumb-types";
-export { BarTitleActionItem, BarTitlePlacement, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
+export { BarTitleActionConfigItem, BarTitleActionItem, BarTitlePlacement, BarTitlePrimaryAction, BarTitleSectionItem, BarTitleVariant } from "./components/BarTitle/bar-title-types";
 export { BarWorkflowStep, BarWorkflowSubmitAction } from "./components/BarWorkflow/bar-workflow-types";
 export { MobileDestination, ShellResponsiveMode } from "./shell/shell-responsive";
 export { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledPopup, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
@@ -121,7 +121,7 @@ export { PaginationChangeDetail, PaginationPageSizeMode } from "./components/Pag
 export { ChromeTransitionDetail } from "./shell/chrome-transition";
 export { PanelSubNavItem } from "./components/PanelSubNav/panel-sub-nav-types";
 export { PanelSubNavBackground } from "./components/PanelSubNav/PanelSubNav";
-export { PanelToolHeaderActionDetail, PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
+export { PanelToolHeaderActionDetail, PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolsHeaders, PanelToolsItem, PanelToolsRailAccessory, PanelToolsRailAccessoryActionDetail, PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 export { PaperTextureConfig } from "./components/PaperTexture/paper-texture-types";
 export { RadioOption, RadioSize } from "./components/Radio/Radio";
 export { ScrollOverlayScrollDetail } from "./components/ScrollOverlay/ScrollOverlay";
@@ -420,6 +420,10 @@ export namespace Components {
         "value": string;
     }
     interface DsBarTitle {
+        /**
+          * Ordered page-header actions. When supplied, this replaces the legacy primaryAction/actions presentation while preserving the same dsAction event.
+         */
+        "actionItems"?: BarTitleActionConfigItem[];
         /**
           * Secondary page actions shown in the overflow menu. Dividers create groups.
           * @default []
@@ -644,6 +648,11 @@ export namespace Components {
           * @default true
          */
         "labelEmphasis": boolean;
+        /**
+          * Accessible name for the appended menu segment in split mode.
+          * @default 'More options'
+         */
+        "menuAriaLabel": string;
         /**
           * Scale down during a physical pointer press. Disable when an owning composite requires fixed child or background geometry.
           * @default true
@@ -654,12 +663,17 @@ export namespace Components {
           * @default false
          */
         "rounded": boolean;
-        "setFocus": () => Promise<void>;
+        "setFocus": (segment?: "primary" | "menu") => Promise<void>;
         /**
           * Control density (height, padding, icon, type).
           * @default 'md'
          */
         "size": ButtonFilledSize;
+        /**
+          * Append a separate ChevronDown menu segment while preserving this button's variant, size, intent, contrast, loading, inactive, and width treatment.
+          * @default false
+         */
+        "split": boolean;
         /**
           * Native button type.
           * @default 'button'
@@ -761,6 +775,11 @@ export namespace Components {
           * @default true
          */
         "labelEmphasis": boolean;
+        /**
+          * Accessible name for the appended menu segment in split mode.
+          * @default 'More options'
+         */
+        "menuAriaLabel": string;
         /**
           * Scale down during a physical pointer press. Disable when an owning composite requires fixed child or background geometry.
           * @default true
@@ -775,12 +794,17 @@ export namespace Components {
           * @default false
          */
         "rounded": boolean;
-        "setFocus": () => Promise<void>;
+        "setFocus": (segment?: "primary" | "menu") => Promise<void>;
         /**
           * Control density (height, padding, icon, type).
           * @default 'md'
          */
         "size": ButtonUnfilledSize;
+        /**
+          * Append a separate ChevronDown menu segment while preserving this button's variant, size, surface, active, loading, border, and width treatment.
+          * @default false
+         */
+        "split": boolean;
         /**
           * Native button type.
           * @default 'button'
@@ -2249,6 +2273,11 @@ export namespace Components {
         "value": string;
     }
     interface DsPanelTools {
+        /**
+          * Desktop/tablet-only application-owned rail boundaries and direct intents. Set via JS property and replace the array reference to update.
+          * @default []
+         */
+        "accessories": PanelToolsRailAccessory[];
         /**
           * Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this.
          */
@@ -2699,6 +2728,11 @@ export namespace Components {
         "scrollCompaction": boolean;
     }
     interface DsShellTools {
+        /**
+          * Desktop/tablet rail accessories. Intentionally omitted from the mobile tool stage.
+          * @default []
+         */
+        "accessories": PanelToolsRailAccessory[];
         /**
           * Match PanelTools' imperative activation contract in every responsive mode.
          */
@@ -4156,6 +4190,7 @@ declare global {
     };
     interface HTMLDsButtonFilledElementEventMap {
         "dsClick": MouseEvent;
+        "dsMenuClick": MouseEvent;
     }
     interface HTMLDsButtonFilledElement extends Components.DsButtonFilled, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsButtonFilledElementEventMap>(type: K, listener: (this: HTMLDsButtonFilledElement, ev: DsButtonFilledCustomEvent<HTMLDsButtonFilledElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4173,6 +4208,7 @@ declare global {
     };
     interface HTMLDsButtonUnfilledElementEventMap {
         "dsClick": MouseEvent;
+        "dsMenuClick": MouseEvent;
         "dsChange": boolean;
     }
     interface HTMLDsButtonUnfilledElement extends Components.DsButtonUnfilled, HTMLStencilElement {
@@ -4721,6 +4757,7 @@ declare global {
     tool: PanelToolsToolId;
   };
         "dsHeaderAction": PanelToolsHeaderActionDetail;
+        "dsRailAccessoryAction": PanelToolsRailAccessoryActionDetail;
         "dsChromeTransitionStart": ChromeTransitionDetail;
         "dsChromeTransitionEnd": ChromeTransitionDetail;
     }
@@ -4812,6 +4849,7 @@ declare global {
         "dsToolChange": { id: PanelToolsToolId; selected: boolean };
         "dsHeaderBack": { tool: PanelToolsToolId };
         "dsHeaderAction": { tool: PanelToolsToolId; id: string };
+        "dsRailAccessoryAction": PanelToolsRailAccessoryActionDetail;
         "dsPresentationChange": { presentation: 'drawer' | 'fullscreen' };
         "dsBrowseContextChange": NavChromeStyle;
         "dsNavFooterAction": void;
@@ -4852,6 +4890,7 @@ declare global {
     tool: PanelToolsToolId;
     id: string;
   };
+        "dsRailAccessoryAction": PanelToolsRailAccessoryActionDetail;
     }
     interface HTMLDsShellToolsElement extends Components.DsShellTools, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsShellToolsElementEventMap>(type: K, listener: (this: HTMLDsShellToolsElement, ev: DsShellToolsCustomEvent<HTMLDsShellToolsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5530,6 +5569,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface DsBarTitle {
+        /**
+          * Ordered page-header actions. When supplied, this replaces the legacy primaryAction/actions presentation while preserving the same dsAction event.
+         */
+        "actionItems"?: BarTitleActionConfigItem[];
         /**
           * Secondary page actions shown in the overflow menu. Dividers create groups.
           * @default []
@@ -5786,7 +5829,13 @@ declare namespace LocalJSX {
           * @default true
          */
         "labelEmphasis"?: boolean;
+        /**
+          * Accessible name for the appended menu segment in split mode.
+          * @default 'More options'
+         */
+        "menuAriaLabel"?: string;
         "onDsClick"?: (event: DsButtonFilledCustomEvent<MouseEvent>) => void;
+        "onDsMenuClick"?: (event: DsButtonFilledCustomEvent<MouseEvent>) => void;
         /**
           * Scale down during a physical pointer press. Disable when an owning composite requires fixed child or background geometry.
           * @default true
@@ -5802,6 +5851,11 @@ declare namespace LocalJSX {
           * @default 'md'
          */
         "size"?: ButtonFilledSize;
+        /**
+          * Append a separate ChevronDown menu segment while preserving this button's variant, size, intent, contrast, loading, inactive, and width treatment.
+          * @default false
+         */
+        "split"?: boolean;
         /**
           * Native button type.
           * @default 'button'
@@ -5903,8 +5957,14 @@ declare namespace LocalJSX {
           * @default true
          */
         "labelEmphasis"?: boolean;
+        /**
+          * Accessible name for the appended menu segment in split mode.
+          * @default 'More options'
+         */
+        "menuAriaLabel"?: string;
         "onDsChange"?: (event: DsButtonUnfilledCustomEvent<boolean>) => void;
         "onDsClick"?: (event: DsButtonUnfilledCustomEvent<MouseEvent>) => void;
+        "onDsMenuClick"?: (event: DsButtonUnfilledCustomEvent<MouseEvent>) => void;
         /**
           * Scale down during a physical pointer press. Disable when an owning composite requires fixed child or background geometry.
           * @default true
@@ -5924,6 +5984,11 @@ declare namespace LocalJSX {
           * @default 'md'
          */
         "size"?: ButtonUnfilledSize;
+        /**
+          * Append a separate ChevronDown menu segment while preserving this button's variant, size, surface, active, loading, border, and width treatment.
+          * @default false
+         */
+        "split"?: boolean;
         /**
           * Native button type.
           * @default 'button'
@@ -7527,6 +7592,11 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface DsPanelTools {
+        /**
+          * Desktop/tablet-only application-owned rail boundaries and direct intents. Set via JS property and replace the array reference to update.
+          * @default []
+         */
+        "accessories"?: PanelToolsRailAccessory[];
         /**
           * Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`.
           * @default ''
@@ -7568,6 +7638,10 @@ declare namespace LocalJSX {
         "onDsPresentationChange"?: (event: DsPanelToolsCustomEvent<{
     presentation: 'drawer' | 'fullscreen';
   }>) => void;
+        /**
+          * Direct accessory intent. Emitting this event never changes the active tool or drawer.
+         */
+        "onDsRailAccessoryAction"?: (event: DsPanelToolsCustomEvent<PanelToolsRailAccessoryActionDetail>) => void;
         /**
           * Emitted when a rail button is toggled. Detail = { id, selected }.
          */
@@ -7969,6 +8043,10 @@ declare namespace LocalJSX {
           * Managed drawer/fullscreen presentation state.
          */
         "onDsPresentationChange"?: (event: DsShellAppCustomEvent<{ presentation: 'drawer' | 'fullscreen' }>) => void;
+        /**
+          * Managed desktop/tablet rail accessory intent.
+         */
+        "onDsRailAccessoryAction"?: (event: DsShellAppCustomEvent<PanelToolsRailAccessoryActionDetail>) => void;
         /**
           * Emitted after crossing the fixed 768px or 1200px shell boundaries.
          */
@@ -8060,6 +8138,11 @@ declare namespace LocalJSX {
         "scrollCompaction"?: boolean;
     }
     interface DsShellTools {
+        /**
+          * Desktop/tablet rail accessories. Intentionally omitted from the mobile tool stage.
+          * @default []
+         */
+        "accessories"?: PanelToolsRailAccessory[];
         /**
           * @default ''
          */
@@ -8094,6 +8177,7 @@ declare namespace LocalJSX {
         "onDsPresentationChange"?: (event: DsShellToolsCustomEvent<{
     presentation: 'drawer' | 'fullscreen';
   }>) => void;
+        "onDsRailAccessoryAction"?: (event: DsShellToolsCustomEvent<PanelToolsRailAccessoryActionDetail>) => void;
         "onDsToolChange"?: (event: DsShellToolsCustomEvent<{
     id: PanelToolsToolId;
     selected: boolean;
@@ -9323,6 +9407,8 @@ declare namespace LocalJSX {
         "controls": string | undefined;
         "expanded": boolean | undefined;
         "haspopup": ButtonFilledPopup | undefined;
+        "split": boolean;
+        "menuAriaLabel": string;
         "hasMenu": boolean;
     }
     interface DsButtonUnfilledAttributes {
@@ -9348,6 +9434,8 @@ declare namespace LocalJSX {
         "controls": string | undefined;
         "expanded": boolean | undefined;
         "haspopup": ButtonUnfilledPopup | undefined;
+        "split": boolean;
+        "menuAriaLabel": string;
         "pressed": boolean | undefined;
         "collapseLabel": boolean;
         "hasMenu": boolean;

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

@@ -1,9 +1,10 @@
 export type { NavChromeStyle } from './nav-chrome';
 export type { PanelNavChildItem, PanelNavChildSelectDetail, PanelNavGroup, PanelNavItem, PanelNavPresentation, } from '../components/PanelNav/panel-nav-types';
 export type { BarNavTab } from '../components/BarNav/bar-nav-types';
+export type { BarTitleAction, BarTitleActionAppearance, BarTitleActionCollapse, BarTitleActionConfigItem, BarTitleActionItem, BarTitleActionMobile, BarTitleButtonAction, BarTitleDivider, BarTitleIconAction, BarTitleMenuAction, BarTitleMenuChoice, BarTitleMenuChoiceItem, BarTitleOverflowAction, BarTitlePrimaryAction, BarTitleSplitAction, } from '../components/BarTitle/bar-title-types';
 export type { ShellPageContentInset, ShellPageContentSurface, ShellPageDesktopHeaderPlacement, } from '../components/ShellPage/shell-page-types';
 export type { ShellAppComposition, ShellNavigationConfig, ShellNavigationSelectDetail, ShellPageChromeConfig, ShellSectionNavigation, ShellToolsConfig, } from '../components/ShellApp/shell-app-types';
-export type { PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolHeaderActionDetail, PanelToolsHeaderConfig, PanelToolsHeaders, PanelToolsItem, PanelToolsToolId, } from '../components/PanelTools/panel-tools-types';
+export type { PanelToolsHeaderAction, PanelToolsHeaderActionDetail, PanelToolHeaderActionDetail, PanelToolsHeaderConfig, PanelToolsHeaders, PanelToolsItem, PanelToolsRailAccessory, PanelToolsRailAccessoryAction, PanelToolsRailAccessoryActionDetail, PanelToolsRailAccessorySecondaryAction, PanelToolsRailAccessoryVisual, PanelToolsRailDividerAccessory, PanelToolsRailPlacement, PanelToolsRailShortcutAccessory, PanelToolsRailTransientAccessory, PanelToolsRailTransientTone, PanelToolsToolId, } from '../components/PanelTools/panel-tools-types';
 export { PANEL_TOOLS_DEFAULT_ITEMS } from '../components/PanelTools/panel-tools-types';
 export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, } from './nav-chrome';
 export type { MenuPlacement } from '../components/Menu/menu-placement';

package/dist/types/utils/button-story-foundation.d.ts

@@ -6,4 +6,6 @@ export declare const BUTTON_STORY_COLUMN = "display:flex;flex-direction:column;g
 export declare const BUTTON_STORY_SURFACE = "display:flex;gap:var(--dimension-space-100);align-items:center;padding:var(--dimension-space-150);border-radius:var(--dimension-radius-100);";
 /** Shared Storybook wiring for the two semantic menu-button components. */
 export declare function wireButtonStoryMenuTriggers(root: Element | undefined): void;
+/** Shared Storybook wiring for native split mode on either button family. */
+export declare function wireButtonStorySplitTriggers(root: Element | undefined): void;
 //# sourceMappingURL=button-story-foundation.d.ts.map

package/dist/vue/ds-bar-title.js

@@ -16,6 +16,7 @@ export const DsBarTitle = /*@__PURE__*/ defineContainer('ds-bar-title', defineDs
     'sectionsAriaLabel',
     'primaryAction',
     'actions',
+    'actionItems',
     'actionsAriaLabel',
     'variant',
     'placement',

package/dist/vue/ds-button-filled.js

@@ -25,8 +25,12 @@ export const DsButtonFilled = /*@__PURE__*/ defineContainer('ds-button-filled',
     'controls',
     'expanded',
     'haspopup',
+    'split',
+    'menuAriaLabel',
     'hasMenu',
-    'dsClick'
+    'dsClick',
+    'dsMenuClick'
 ], [
-    'dsClick'
+    'dsClick',
+    'dsMenuClick'
 ]);

package/dist/vue/ds-button-unfilled.js

@@ -26,13 +26,17 @@ export const DsButtonUnfilled = /*@__PURE__*/ defineContainer('ds-button-unfille
     'controls',
     'expanded',
     'haspopup',
+    'split',
+    'menuAriaLabel',
     'pressed',
     'collapseLabel',
     'hasMenu',
     'focusTabIndex',
     'dsClick',
+    'dsMenuClick',
     'dsChange'
 ], [
     'dsClick',
+    'dsMenuClick',
     'dsChange'
 ]);

package/dist/vue/ds-panel-tools.js

@@ -9,6 +9,7 @@ export const DsPanelTools = /*@__PURE__*/ defineContainer('ds-panel-tools', defi
     'fullscreenHeaderMode',
     'activeTool',
     'items',
+    'accessories',
     'toolsLabel',
     'toolShortcutsLabel',
     'headers',
@@ -17,6 +18,7 @@ export const DsPanelTools = /*@__PURE__*/ defineContainer('ds-panel-tools', defi
     'dsPresentationChange',
     'dsHeaderBack',
     'dsHeaderAction',
+    'dsRailAccessoryAction',
     'dsChromeTransitionStart',
     'dsChromeTransitionEnd'
 ], [
@@ -24,6 +26,7 @@ export const DsPanelTools = /*@__PURE__*/ defineContainer('ds-panel-tools', defi
     'dsPresentationChange',
     'dsHeaderBack',
     'dsHeaderAction',
+    'dsRailAccessoryAction',
     'dsChromeTransitionStart',
     'dsChromeTransitionEnd'
 ]);

package/dist/vue/ds-shell-app.js

@@ -26,6 +26,7 @@ export const DsShellApp = /*@__PURE__*/ defineContainer('ds-shell-app', defineDs
     'dsToolChange',
     'dsHeaderBack',
     'dsHeaderAction',
+    'dsRailAccessoryAction',
     'dsPresentationChange',
     'dsBrowseContextChange',
     'dsNavFooterAction',
@@ -42,6 +43,7 @@ export const DsShellApp = /*@__PURE__*/ defineContainer('ds-shell-app', defineDs
     'dsToolChange',
     'dsHeaderBack',
     'dsHeaderAction',
+    'dsRailAccessoryAction',
     'dsPresentationChange',
     'dsBrowseContextChange',
     'dsNavFooterAction',