@ds-mo/ui 14.22.2 → 14.24.0

package/dist/.package-ready.json

@@ -1 +1 @@
-{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.22.2","components":77,"digest":"bb5af3012a271c23692af664558b40c32dac4a66836b8610cb8d578b7dce0ac7","completedAt":"2026-08-30T20:03:22.884Z"}
+{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.24.0","components":77,"digest":"788194112cd3c2dab0ded8853b1d03149a99921edc98cba5ac8e62d1b5439b62","completedAt":"2026-09-01T20:08:31.239Z"}

package/dist/agent-patterns.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.22.2",
+  "packageVersion": "14.24.0",
   "kind": "patterns",
   "entries": [
     {
@@ -204,6 +204,8 @@
         "ShellApp emits stable navigation and page intent events; it never mutates router history.",
         "ShellApp owns responsive mode, PanelNav presentation, tool open state, active tool, direct mobile destinations, optional Inbox grouping, Menu state, fullscreen presentation, focus restoration, and breakpoint state preservation.",
         "Tool products and routed content are instantiated once by the application in named tool-view and default slots; ShellApp changes presentation without recreating those owners.",
+        "The application owns rail accessory state, labels, timers, permissions, navigation, and action consequences. ShellApp forwards governed desktop and tablet accessory definitions and intents without changing tool selection or drawer state.",
+        "When a transient status group and shortcut group coexist in the same rail region, the application assigns explicit orders for status, decorative boundary, then shortcuts; component behavior never infers grouping from product-specific ids.",
         "The application owns account menus, tool product data, page actions, and the consequences of every emitted intent event.",
         "The application owns viewport and theme-color metadata, the dynamic-viewport framework root, and containing document overscroll so body never becomes a second application scroller; ShellApp fills that owner and keeps its existing internal scrollers.",
         "The application resolves competing global messages to one Banner and owns its actions, controlled open state, orientation for the available shell capacity, dismissal persistence, and removal after exit motion.",
@@ -213,6 +215,7 @@
         "Render exactly one managed ShellApp and one active routed main landmark.",
         "Provide visible labels and accessible names in navigation, pageChrome, and tool definitions before passing them to ShellApp.",
         "Handle ShellApp intent events without replacing focusable owners during responsive or fullscreen transitions.",
+        "Pair accessory status indicators with accessible status text and keep decorative accessory boundaries out of the accessibility tree.",
         "Keep the canonical Agents and Help tools available; expose Activity directly on mobile unless the product explicitly opts into grouped Inbox behavior.",
         "Do not override browser keyboard chords when enabling shell shortcuts."
       ],
@@ -224,6 +227,7 @@
         "Below 768px the application root owns a 100dvh fixed stage with a 100vh fallback while ShellApp continues to fill its owner with height 100%; JavaScript viewport measurement synchronizes only the chrome wash and does not own layout height.",
         "With viewport-fit=cover, ShellApp consumes the shared top safe-area inset once and MobileBarNav consumes the persistent bottom inset; nested routed, tool, sheet, and consumer headers do not duplicate either inset.",
         "An optional Banner spans the complete application above desktop navigation, workspace, tools, and mobile global surfaces while remaining below the operating-system top safe area.",
+        "Desktop and tablet may render governed direct-action rail accessories. Mobile intentionally omits them, so applications provide equivalent persistent status in the top Banner lane when the product requires it.",
         "Switching breakpoints changes presentation and inert state without recreating route or tool elements.",
         "Switching sectionNavigation changes only desktop and tablet chrome; mobile composition, current route, routed content, and tool state remain stable.",
         "Search, Activity, Messages, and Agents use direct mobile destinations; products may explicitly group review tools under Inbox instead."
@@ -454,7 +458,7 @@
       "components": [
         {
           "component": "component:ds-button-unfilled",
-          "role": "Provides the visible trigger, popup relationship attributes, and focus target. Carries both shapes, and is the only component that carries the icon-only overflow role.",
+          "role": "Provides the visible trigger, popup relationship attributes, focus target, and optional split-menu segment. Carries both menu-button shapes, and is the only component that carries the icon-only overflow role.",
           "required": true
         },
         {
@@ -464,7 +468,7 @@
         },
         {
           "component": "component:ds-button-filled",
-          "role": "Substitutes for the trigger when the menu belongs to the single primary action in a local decision area, using the label or icon-label shape only.",
+          "role": "Substitutes for the trigger when the menu belongs to the single primary action in a local decision area, and supports split mode when the primary command must remain independently available.",
           "required": false
         }
       ],
@@ -474,6 +478,7 @@
         "An open popup is a transient pressed state, not a selected one. The trigger holds only its pressed wash for the popup's rendered lifecycle from expanded alone, without changing foreground, so never also set isActive to represent an open menu.",
         "Menu owns popup placement and keyboard navigation; the application never calculates popup coordinates or applies positional CSS.",
         "On dsSelect from a command or single-selection row, update the selected value, close the Menu, and restore focus to the trigger.",
+        "For button split mode, restore focus to the menu segment after a menu choice; the primary segment remains an independent command.",
         "Switch rows and reorderable rows report dsSelect or dsReorder without closing; replace the items array from those events.",
         "On dsClose, synchronize the application open state to false."
       ],
@@ -481,6 +486,7 @@
         "A button either has a menu or is a menu, and the trigger's variant selects between the two shapes.",
         "Has a menu: a label or icon-label action that opens a menu. Set hasMenu, which implies aria-haspopup of menu and renders the trailing chevron that communicates the popup. Both button primitives support this shape.",
         "Is a menu: an icon-only control. Set hasMenu, which adds no chevron, so the glyph must convey the menu alone. Use Ellipses for generic more-options or overflow. Use a specific icon when the menu has a named purpose, such as Table for Customize table. Only ButtonUnfilled carries this shape, because the role is chrome rather than a primary action.",
+        "Split mode: set split and menuAriaLabel on either button primitive. The selected variant continues to define the primary segment; the appended ChevronDown segment owns controls, expanded, aria-haspopup, and dsMenuClick.",
         "Set controls to the Menu id and expanded from the same open state passed to Menu.",
         "Give an icon-only trigger an accessible name that states the role, such as More options or Customize table, because no visible label or chevron carries it.",
         "Use haspopup directly instead of hasMenu for a non-menu popup such as a listbox or dialog; those cases get no chevron.",
@@ -649,7 +655,7 @@
         }
       ],
       "stateOwnership": [
-        "The router owns heading copy, selected section, depth, available actions, content inset, divider visibility, scroll-compaction policy, content surface, route data, and product outcomes.",
+        "The router owns heading copy, selected section, depth, ordered available actions, content inset, divider visibility, scroll-compaction policy, content surface, route data, and product outcomes.",
         "The application replaces pageChrome from completed route state and handles ShellApp page intent events.",
         "ShellApp owns ShellPage, BarTitle, MobileHeader, the content scroller, sticky presentation, and responsive switching.",
         "The default slot contains application-owned routed content and is not recreated for header compaction or breakpoint changes.",
@@ -663,6 +669,7 @@
       ],
       "responsiveBehavior": [
         "ShellApp derives the desktop BarTitle and mobile MobileHeader from the same pageChrome object.",
+        "Ordered page actions keep icon commands visible on mobile by default and flatten labeled, menu, split, and explicit overflow commands into one ShellApp-owned mobile menu.",
         "Route-level sections remain pageChrome tabs; subordinate local views use subsections.",
         "Use contentInset none only for deliberately full-bleed products such as maps and canvases.",
         "Table pages can retain responsive inline and bottom gutters while tuning their roomy and compact block-start seams; set scrollCompaction false when their roomy title must stay pinned, and let shell capacity continue to compact it for tools or tablet layouts.",
@@ -683,7 +690,7 @@
                 {
                   "path": "drivers-page.ts",
                   "language": "typescript",
-                  "content": "import type { ShellPageChromeConfig } from '@ds-mo/ui/shell'\n\nconst shell = document.querySelector<HTMLDsShellAppElement>('ds-shell-app')!\nconst pageChrome: ShellPageChromeConfig = {\n  heading: 'Drivers',\n  tabs: [{ id: 'active', label: 'Active' }, { id: 'inactive', label: 'Inactive' }],\n  value: 'active',\n  primaryAction: { id: 'create', label: 'Create driver' },\n}\nshell.pageChrome = pageChrome\nshell.addEventListener('dsTabChange', event => appRouter.navigate(event.detail))\nshell.addEventListener('dsPageAction', event => driverActions.run(event.detail))"
+                  "content": "import type { ShellPageChromeConfig } from '@ds-mo/ui/shell'\n\nconst shell = document.querySelector<HTMLDsShellAppElement>('ds-shell-app')!\nconst pageChrome: ShellPageChromeConfig = {\n  heading: 'Drivers',\n  tabs: [{ id: 'active', label: 'Active' }, { id: 'inactive', label: 'Inactive' }],\n  value: 'active',\n  actionItems: [\n    { type: 'button', id: 'create', label: 'Create driver', appearance: 'filled' },\n    { type: 'overflow', id: 'export', label: 'Export drivers' },\n  ],\n}\nshell.pageChrome = pageChrome\nshell.addEventListener('dsTabChange', event => appRouter.navigate(event.detail))\nshell.addEventListener('dsPageAction', event => driverActions.run(event.detail))"
                 }
               ],
               "notes": [
@@ -708,7 +715,7 @@
                 {
                   "path": "DriversRoute.tsx",
                   "language": "tsx",
-                  "content": "import type { ShellPageChromeConfig } from '@ds-mo/ui/shell'\n\nexport const driversPageChrome: ShellPageChromeConfig = {\n  heading: 'Drivers',\n  tabs: [{ id: 'active', label: 'Active' }, { id: 'inactive', label: 'Inactive' }],\n  value: 'active',\n  primaryAction: { id: 'create', label: 'Create driver' },\n}\n\nexport function DriversRoute() {\n  return <section aria-label=\"Driver results\">Page content</section>\n}"
+                  "content": "import type { ShellPageChromeConfig } from '@ds-mo/ui/shell'\n\nexport const driversPageChrome: ShellPageChromeConfig = {\n  heading: 'Drivers',\n  tabs: [{ id: 'active', label: 'Active' }, { id: 'inactive', label: 'Inactive' }],\n  value: 'active',\n  actionItems: [{ type: 'button', id: 'create', label: 'Create driver', appearance: 'filled' }],\n}\n\nexport function DriversRoute() {\n  return <section aria-label=\"Driver results\">Page content</section>\n}"
                 }
               ],
               "notes": [
@@ -739,7 +746,7 @@
                 {
                   "path": "drivers-page-chrome.ts",
                   "language": "typescript",
-                  "content": "import type { ShellPageChromeConfig } from '@ds-mo/ui/shell'\n\nexport const DRIVERS_PAGE_CHROME: ShellPageChromeConfig = {\n  heading: 'Drivers',\n  tabs: [{ id: 'active', label: 'Active' }, { id: 'inactive', label: 'Inactive' }],\n  value: 'active',\n  primaryAction: { id: 'create', label: 'Create driver' },\n}"
+                  "content": "import type { ShellPageChromeConfig } from '@ds-mo/ui/shell'\n\nexport const DRIVERS_PAGE_CHROME: ShellPageChromeConfig = {\n  heading: 'Drivers',\n  tabs: [{ id: 'active', label: 'Active' }, { id: 'inactive', label: 'Inactive' }],\n  value: 'active',\n  actionItems: [{ type: 'button', id: 'create', label: 'Create driver', appearance: 'filled' }],\n}"
                 }
               ],
               "notes": [

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.22.2",
+  "packageVersion": "14.24.0",
   "kind": "components",
   "entries": [
     {
@@ -1218,17 +1218,17 @@
       "tag": "ds-bar-title",
       "name": "bar-title",
       "title": "BarTitle",
-      "summary": "Page-level title chrome with an optional expanded route breadcrumb, compact Back action, supporting description, inline active-section menu, one primary action, grouped overflow actions, and explicit expanded, compact, or constrained variants.",
+      "summary": "Page-level title chrome with route identity, responsive ordered button, icon, menu, split, and overflow actions, plus explicit expanded, compact, or constrained variants.",
       "intentStatus": "complete",
       "intent": {
         "audience": "general",
         "status": "stable",
-        "summary": "Page-level title chrome with an optional expanded route breadcrumb, compact Back action, supporting description, inline active-section menu, one primary action, grouped overflow actions, and explicit expanded, compact, or constrained variants.",
+        "summary": "Page-level title chrome with route identity, responsive ordered button, icon, menu, split, and overflow actions, plus explicit expanded, compact, or constrained variants.",
         "useWhen": [
           "A top-level page needs one h1 above its content.",
           "A list or detail page has multiple route-level sections that belong in the inline active-section menu.",
           "A detail page needs route ancestors in expanded presentation and a page-level Back action in compact chrome.",
-          "A page needs one primary action plus optional secondary or destructive overflow commands."
+          "A page needs an ordered set of primary, secondary, icon, menu, split, or overflow commands."
         ],
         "avoidWhen": [
           "The title belongs to a PanelTools drawer or fullscreen pane; use PanelToolHeader through PanelTools instead.",
@@ -1272,15 +1272,17 @@
           "Provide ordered breadcrumb items for deeper expanded paths and handle dsBreadcrumbSelect when native href navigation is not used; backLabel remains the single-parent expanded fallback.",
           "Keep value synchronized with the current child route; dsSectionChange returns the selected section id.",
           "Section and overflow triggers expose menu relationships and restore focus after selection or dismissal.",
-          "Use one filled primary action in the page decision area and mark destructive overflow actions explicitly."
+          "Use one filled primary action in the page decision area, give icon and menu triggers specific accessible names, and mark destructive overflow actions explicitly.",
+          "Keep every top-level action and nested menu-choice id non-empty and unique; dsAction emits the selected id without adding a parent prefix."
         ],
         "states": [
           "Omitting Back, sections, primaryAction, and actions produces the top-level title-only header.",
           "Two or more selectable sections add the inline section trigger; one section does not render a redundant menu.",
           "Dividers in sections or actions create separate Menu groups without becoming selectable rows.",
-          "The overflow trigger uses its bordered treatment whenever the primary action is visible beside it; overflow-only and auto-collapsed-primary presentations keep the trigger borderless.",
+          "The overflow trigger uses its bordered treatment whenever any visible action sits beside it; overflow-only presentations keep the trigger borderless.",
+          "Ordered actions preserve authored order, but only the first eligible filled button, unfilled button, icon button, labeled menu button, or split button renders beside the title. Remaining commands use the shared overflow, whose rows are text-only. Menu choices and overflowed split commands become separate rows and share the same flat action event.",
           "expanded renders the larger heading, optional description, inset divider, and a full-width caption breadcrumb row above the title. The breadcrumb begins after 32px top padding; the following title and right-side actions share one top alignment. Compact renders 48px chrome with the existing icon Back action; constrained uses compact chrome and moves an auto-collapse primary action into overflow.",
-          "primaryAction collapse defaults to auto. Use never for exceptional actions whose hierarchy must remain visible in constrained layouts.",
+          "The one visible ordered action collapses by default in constrained presentation. Use never for an exceptional action whose hierarchy must remain visible; explicit overflow actions never leave the shared menu.",
           "showDivider=false removes the bottom divider when the surrounding page composition supplies the boundary; showCompactDivider can independently restore or remove that boundary in compact and constrained variants.",
           "placement=shell-bar is reserved for ShellApp panel section navigation. It remains compact, omits description and breadcrumb presentation, and preserves applicable Back, section, primary, and overflow controls."
         ],
@@ -1290,15 +1292,16 @@
           "ShellApp owns shell-bar placement and always selects compact presentation there; mobile continues to use MobileHeader.",
           "When ShellPage owns BarTitle on a secondary desktop or tablet page, its expanded, compact, and constrained presentations all match that canvas; the separate MobileHeader component remains primary.",
           "Compact titles use the shared compact-header geometry and md control inset so top-level headings align with BarNav and inline Back geometry aligns with PanelToolHeader. Long headings and section labels truncate independently while Back and action controls retain complete hit targets and accessible names.",
-          "A never-collapse primary action remains visible in constrained mode; the title and section label yield space first."
+          "A never-collapse action remains visible in constrained mode; the title and section label yield space first.",
+          "On mobile, icon commands remain visible by default while labeled buttons, labeled menus, split buttons, and explicit overflow commands become one flat overflow menu derived by ShellApp."
         ],
         "frameworkCaveats": {
           "customElements": [
-            "Assign breadcrumbs, sections, primaryAction, and actions as JavaScript properties and replace array or object identities when controlled state changes.",
+            "Assign breadcrumbs, sections, actionItems, primaryAction, and actions as JavaScript properties and replace array or object identities when controlled state changes.",
             "Handle dsBack for compact navigation and dsBreadcrumbSelect for application-owned expanded breadcrumb navigation, update value after dsSectionChange, and execute product commands from dsAction."
           ],
           "react": [
-            "Pass breadcrumb, section, and action arrays directly to DsBarTitle and keep value controlled from route state.",
+            "Pass breadcrumb, section, and ordered action arrays directly to DsBarTitle and keep value controlled from route state.",
             "Place DsBarTitle in DsShellPage with slot=header when automatic page behavior is required."
           ],
           "angular": [
@@ -1323,6 +1326,10 @@
       },
       "api": {
         "props": {
+          "actionItems": {
+            "type": "BarTitleActionConfigItem[]",
+            "required": false
+          },
           "actions": {
             "type": "BarTitleActionItem[]",
             "required": false
@@ -1727,7 +1734,8 @@
         "useWhen": [
           "The user initiates the single primary command in a local decision area.",
           "An action's consequence requires a matching semantic treatment.",
-          "A standalone compact primary action needs an icon-only presentation with an explicit accessible name."
+          "A standalone compact primary action needs an icon-only presentation with an explicit accessible name.",
+          "The primary command has closely related alternatives and needs split mode without losing its filled intent, contrast, variant, or loading treatment."
         ],
         "avoidWhen": [
           "Another filled action already exists in the same local decision area.",
@@ -1764,6 +1772,7 @@
         ],
         "accessibility": [
           "Provide an explicit accessible name for icon-only buttons.",
+          "In split mode, provide menuAriaLabel for the appended ChevronDown segment, pass controls with the Menu id, and synchronize expanded with the Menu open state.",
           "Set hasMenu when the action opens a Menu; it implies aria-haspopup of menu and renders the trailing chevron. Pass controls with the Menu id and expanded from the same open state given to Menu.",
           "Use haspopup directly for a non-menu popup such as a dialog; that case gets no chevron.",
           "Use inactive state only when the action must remain visible but unavailable.",
@@ -1787,7 +1796,9 @@
           "Visible labels are emphasized by default. Set labelEmphasis to false when a composed surface deliberately needs the button label to match adjacent regular-weight control labels; this does not change the action hierarchy, foreground, icon, or interaction states.",
           "ButtonFilled has no active, pressed, or selected state; a filled action is a command, not a toggle or a persistent selection.",
           "An open popup is a transient pressed state instead. While expanded is true the pressed wash is held for the popup's complete rendered lifecycle and survives hover, so the trigger reads as held open without introducing a selected treatment.",
-          "hasMenu supports only the label and icon-label variants. The chevron is what communicates that a menu will open, so an icon-only filled menu button would leave the affordance unstated."
+          "hasMenu supports only the label and icon-label variants. The chevron is what communicates that a menu will open, so an icon-only filled menu button would leave the affordance unstated.",
+          "Split mode supports label, icon, and icon-label primary segments. The primary segment emits dsClick and the appended menu segment emits dsMenuClick.",
+          "Split mode keeps both segments flush and uses a tertiary on-background separator. Rounded changes the shared outer radius without separating the segments."
         ],
         "responsiveBehavior": [
           "Use fill width only when the parent layout calls for a full-width action, commonly on narrow form layouts."
@@ -1876,6 +1887,10 @@
             "type": "boolean",
             "required": false
           },
+          "menuAriaLabel": {
+            "type": "string",
+            "required": false
+          },
           "pressScale": {
             "type": "boolean",
             "required": false
@@ -1888,6 +1903,10 @@
             "type": "ButtonFilledSize",
             "required": false
           },
+          "split": {
+            "type": "boolean",
+            "required": false
+          },
           "type": {
             "type": "'button' | 'submit' | 'reset'",
             "required": false
@@ -1905,6 +1924,10 @@
           {
             "name": "dsClick",
             "detail": "MouseEvent"
+          },
+          {
+            "name": "dsMenuClick",
+            "detail": "MouseEvent"
           }
         ],
         "slots": []
@@ -1942,7 +1965,8 @@
           "A secondary command accompanies the single filled primary action in a local decision area.",
           "A toolbar, tool rail, overflow area, or shell region needs a compact icon action.",
           "A command represents a persistent toggle or mode whose active state remains meaningful after activation.",
-          "A row, card, or toolbar needs an overflow or more-options menu; this is the only component that carries that role."
+          "A row, card, or toolbar needs an overflow or more-options menu; this is the only component that carries that role.",
+          "A secondary command has closely related alternatives and needs split mode without losing its border, surface, active, variant, or loading treatment."
         ],
         "avoidWhen": [
           "The command is the single primary action in a local decision area; use ButtonFilled instead.",
@@ -1977,6 +2001,7 @@
         ],
         "accessibility": [
           "Provide an explicit accessible name for every icon-only action.",
+          "In split mode, provide menuAriaLabel for the appended ChevronDown segment, pass controls with the Menu id, and synchronize expanded with the Menu open state.",
           "Set hasMenu when the button triggers a Menu; it implies aria-haspopup of menu. Pass controls with the Menu id and expanded from the same open state given to Menu. Expanded popup triggers hold only the pressed wash while open, without changing their resting foreground; expanded disclosure controls without popup semantics retain the normal resting appearance.",
           "Give an icon-only menu button an accessible name that states the role, such as More options or Customize table, because no visible label or chevron carries it.",
           "Use haspopup directly for a non-menu popup such as a listbox or dialog; those cases get no chevron.",
@@ -2002,7 +2027,9 @@
           "Icon and icon-label loading replace the icon in place. Label-only loading centers the loader while preserving the button's measured width.",
           "hasMenu covers two distinct menu-button shapes and the variant selects between them. With label or icon-label the action has a menu, and a trailing chevron carries the affordance. With icon the button is a menu and no chevron is added.",
           "Because the icon-only shape has no chevron, its glyph must convey the menu on its own. Use Ellipses for a generic more-options or overflow control. Use a specific icon when the menu has a named purpose, such as Table for Customize table.",
-          "An open popup is a transient pressed state rather than a selected one. While expanded is true and haspopup or hasMenu identifies a popup, the pressed wash is held for the popup's complete rendered lifecycle and survives hover without promoting foreground or selected fill, including when chrome opts out of selected fills with activeFill set to false. Expanded disclosure buttons without popup semantics remain visually neutral."
+          "An open popup is a transient pressed state rather than a selected one. While expanded is true and haspopup or hasMenu identifies a popup, the pressed wash is held for the popup's complete rendered lifecycle and survives hover without promoting foreground or selected fill, including when chrome opts out of selected fills with activeFill set to false. Expanded disclosure buttons without popup semantics remain visually neutral.",
+          "Split mode supports label, icon, and icon-label primary segments. The primary segment emits dsClick and the appended menu segment emits dsMenuClick.",
+          "Split mode keeps both segments flush and uses a tertiary surface-aware separator. Bordered mode also preserves the shared outer border; borderless mode limits the separator to the content line height."
         ],
         "responsiveBehavior": [
           "The consuming layout decides when an icon-label action becomes icon-only and must provide an explicit accessible name after changing variants. Table caption Customize is one such layout: below 900px it uses the icon shape while keeping the same neutral resting foreground regardless of the controlled column configuration.",
@@ -2106,6 +2133,10 @@
             "type": "boolean",
             "required": false
           },
+          "menuAriaLabel": {
+            "type": "string",
+            "required": false
+          },
           "pressScale": {
             "type": "boolean",
             "required": false
@@ -2122,6 +2153,10 @@
             "type": "ButtonUnfilledSize",
             "required": false
           },
+          "split": {
+            "type": "boolean",
+            "required": false
+          },
           "type": {
             "type": "'button' | 'submit' | 'reset'",
             "required": false
@@ -2143,6 +2178,10 @@
           {
             "name": "dsClick",
             "detail": "MouseEvent"
+          },
+          {
+            "name": "dsMenuClick",
+            "detail": "MouseEvent"
           }
         ],
         "slots": []
@@ -5271,6 +5310,8 @@
           "Wheel, touch, keyboard navigation, selection, and transcript interaction release automatic following; Scroll to latest explicitly restores it.",
           "A newly appended outgoing Message marked scroll-anchor starts a turn near the top with the configurable previous-turn peek; mutations inside existing messages and prepended history do not re-anchor.",
           "Opening saved history, message jumps, and prepended history preserve deliberate position.",
+          "When a persistent scroller receives a cleared or wholly replaced transcript, it releases internal references to the previous message elements, invalidates their pending anchor work, and treats the replacement as a new baseline at defaultPosition rather than as an appended turn.",
+          "MessageScroller bounds its internal element tracking to the currently rendered transcript. The application still owns transcript data and must cap or window the rendered message collection when conversation history can grow without limit.",
           "The scroll-to-latest action is absent at the live edge, appears only after the reader moves away, and disappears again after returning to the newest message.",
           "Scroll to latest uses the shared md control-elevation wrapper with a pointer-transparent top highlight, preserving its transparent backdrop blur and borderless unfilled action while the press-scale modifier moves the complete elevated surface.",
           "Place a pending human-input surface in interaction and a composer container with 8px padding on every side in overlay; the shared scroll-overlay controller measures them as one stack, tracks every growth step, reserves matching transcript clearance, begins the fade before the stack, and keeps scroll-to-latest above it."
@@ -6780,23 +6821,25 @@
       "tag": "ds-panel-tools",
       "name": "panel-tools",
       "title": "PanelTools",
-      "summary": "Desktop and tablet utility rail-and-drawer primitive for explicitly defined application-wide tools, normally assembled by managed ShellApp through ShellTools.",
+      "summary": "Desktop and tablet utility rail-and-drawer primitive for explicitly defined application-wide tools and governed application-owned rail accessories, normally assembled by managed ShellApp through ShellTools.",
       "intentStatus": "complete",
       "intent": {
         "audience": "specialized",
         "status": "stable",
-        "summary": "Desktop and tablet utility rail-and-drawer primitive for explicitly defined application-wide tools, normally assembled by managed ShellApp through ShellTools.",
+        "summary": "Desktop and tablet utility rail-and-drawer primitive for explicitly defined application-wide tools and governed application-owned rail accessories, normally assembled by managed ShellApp through ShellTools.",
         "useWhen": [
           "An advanced slotted ShellApp needs the desktop and tablet global-tools primitive directly.",
           "Users need to move between application-wide utilities without losing each tool's in-progress state.",
-          "Search, AI conversations, user messages, review stacks, notifications, or help content must remain available alongside route content."
+          "Search, AI conversations, user messages, review stacks, notifications, or help content must remain available alongside route content.",
+          "A persistent desktop or tablet rail needs a generic direct-action status surface or shortcut that must not become a tool drawer."
         ],
         "avoidWhen": [
           "The action is specific to the current page or selected content rather than globally available across the application.",
           "The item navigates to a primary or secondary route; use PanelNav or BarNav instead.",
           "Tool definitions lack stable ids, visible labels, explicit rail placement, or application-owned view content.",
           "Building the mobile tools experience; use ShellTools or managed ShellApp.",
-          "PanelTools would be mounted outside the application's single ShellApp."
+          "PanelTools would be mounted outside the application's single ShellApp.",
+          "An application wants unrestricted rail markup that bypasses PanelTools ordering, geometry, focus, overflow, or action semantics."
         ],
         "alternatives": [
           {
@@ -6830,7 +6873,9 @@
           "When the shortcut rail overflows, its labeled body becomes a keyboard-focusable scroll region without changing the rail action order.",
           "Do not trigger global shortcuts while focus is in an editable control.",
           "Use notification dots only as supplemental unread or new-content status and never as the sole status indication.",
-          "Explain temporarily inactive tools through an accessible label or adjacent product guidance; omit unauthorized tools entirely."
+          "Explain temporarily inactive tools through an accessible label or adjacent product guidance; omit unauthorized tools entirely.",
+          "Give each interactive accessory a localized action label. Every transient surface requires short status text so its active or positive state is not color-only; shortcut notification dots remain supplemental and decorative accessory boundaries remain hidden from assistive technology.",
+          "Accessory primary and optional secondary actions participate in the same visual and roving keyboard order as tool actions."
         ],
         "states": [
           "Every tool has a stable explicit id and accessible label. The application filters definitions for authorization and entitlement.",
@@ -6848,6 +6893,11 @@
           "Tool view roots stay transparent so ShellApp's chrome wash remains visible; only explicitly designed child surfaces introduce a fill.",
           "Tools with search compose ds-panel-tool-search immediately below the shared header. Its 48px row always contains the md search control and must not be reduced to sm or xs.",
           "If an active optional tool becomes unavailable, PanelTools closes the drawer, clears activeTool, and emits its deselection.",
+          "Application-owned accessories are direct intents rather than tools. Activating one never selects a tool, changes activeTool, opens or closes the drawer, or changes mounted tool-view identity.",
+          "Accessory definitions use stable ids, explicit regions, and explicit order. The governed transient recipe is a 32px by 64px half-radius bold surface with 4px padding: a bordered 24px primary visual above an optional unbordered rounded 24px secondary icon action, separated by 8px. It requires accessible status text, supports active-brand or positive semantic tone, and never renders a notification dot.",
+          "The governed shortcut recipe is one standard-height action: a transparent 24px initial orb with a secondary token border centered in a 32px sizing frame, one or two caption-emphasis initials, an optional ds-badge notification dot aligned exactly with standard tool dots, circular hover and press paint, and no selected state or secondary control.",
+          "When transient status and shortcut groups coexist in one rail region, assign explicit orders that place the transient status first, then a decorative divider, then the shortcuts. Do not infer this grouping from application-specific ids.",
+          "Adding, removing, or reordering accessories preserves a surviving focused action when possible and moves focus to the nearest surviving rail action when the focused accessory is removed.",
           "Use isInactive only for a temporarily unavailable visible tool; omit tools the user is not authorized to access.",
           "Rail actions disable physical press scaling so notification-dot halos remain aligned to the shell gradient; hover and pressed washes continue to paint above the dot and halo.",
           "Rail tooltips are shell-owned and position against the viewport so the narrow tools-lane collision boundary cannot clamp them beyond the viewport edge.",
@@ -6860,22 +6910,23 @@
           "The open drawer reduces main-content width and uses --dimension-panel-width-xs (300px) on every supported desktop and tablet viewport.",
           "ShellApp owns the fixed drawer-width variable; consumers must not hardcode alternate drawer widths.",
           "Below 768px, do not reuse PanelTools directly; ShellTools and managed ShellApp present the same persistent tool owners through mobile chrome.",
+          "Rail accessories are intentionally desktop and tablet only. Consuming applications provide equivalent persistent mobile status through ShellApp's top banner or status region rather than converting an accessory into a tool view.",
           "Keep named-slot content mounted while tools switch or the drawer closes so users can return to in-progress global work.",
           "Conversation products may use fullscreenHeaderMode split for a 300px history rail beside a flexible detail pane, each with its own canonical header; the application owns that internal split layout.",
           "Use fixed drawer widths for now; do not add user resizing or width persistence."
         ],
         "frameworkCaveats": {
           "customElements": [
-            "Assign items and headers as JavaScript properties and replace their references when collections change.",
+            "Assign items, accessories, and headers as JavaScript properties and replace their references when collections change.",
             "Assign headers as a JavaScript property and replace its object identity whenever an active tool changes title, depth, or actions.",
             "Keep PanelTools mounted at ShellApp scope across route changes and provide each product through its matching named slot."
           ],
           "react": [
-            "Pass a stable explicitly ordered item collection through the generated React wrapper and keep named-slot product content mounted at ShellApp scope.",
+            "Pass stable explicitly ordered tool and accessory collections through the generated React wrapper and keep named-slot product content mounted at ShellApp scope.",
             "Use storageKey only for same-browser last-tool continuity; do not persist the open drawer."
           ],
           "angular": [
-            "Import DsPanelTools from @ds-mo/ui/angular/ds-panel-tools and bind items as a property.",
+            "Import DsPanelTools from @ds-mo/ui/angular/ds-panel-tools and bind structured tool and accessory collections as properties.",
             "Bind headers as a replaced object and route dsHeaderBack and dsHeaderAction to the active tool owner.",
             "Keep the component in the persistent shell layout rather than recreating it in routed page components."
           ]
@@ -6897,6 +6948,10 @@
       },
       "api": {
         "props": {
+          "accessories": {
+            "type": "PanelToolsRailAccessory[]",
+            "required": false
+          },
           "activeTool": {
             "type": "PanelToolsToolId | ''",
             "required": false
@@ -6955,6 +7010,10 @@
             "name": "dsPresentationChange",
             "detail": "{\n    presentation: 'drawer' | 'fullscreen';\n  }"
           },
+          {
+            "name": "dsRailAccessoryAction",
+            "detail": "PanelToolsRailAccessoryActionDetail"
+          },
           {
             "name": "dsToolChange",
             "detail": "{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }"
@@ -6970,11 +7029,16 @@
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens"
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
       ],
       "componentDependencies": [
+        "badge",
         "button-unfilled",
+        "divider",
+        "icon",
         "panel-tool-header",
+        "text",
         "tooltip"
       ]
     },
@@ -7677,6 +7741,8 @@
           "In panel mode, supply the same route sections as children on their PanelNav parent and handle dsNavChildSelect as structured parent, child, and href navigation intent.",
           "The application supplies each routed content owner and tool view once. ShellApp changes visibility, inert state, and presentation without recreating those nodes.",
           "The optional banner slot accepts one application-owned ds-banner above the complete shell row. The application owns its open state, orientation for the current shell capacity, action consequences, dismissal persistence, and resolution when several messages compete.",
+          "Managed tools may include governed desktop and tablet rail accessories for transient status or direct shortcuts. ShellApp forwards their intents without changing the selected tool, drawer state, or mounted tool views.",
+          "Consuming applications own accessory state, labels, timers, permissions, navigation, and action consequences; ShellApp owns only managed forwarding and responsive placement.",
           "Use composition=slotted only for advanced application architectures that intentionally own all lower-level chrome wiring.",
           "Set gradientPreset to the single resolved global chrome preference: neutral by default, none for solid chrome, or cool, neutral, warm, and fresh for token-based washes.",
           "The application owns gradient preference persistence, cross-tab synchronization, and server or account precedence; ShellApp owns rendering the resolved preset across authenticated routes.",
@@ -7684,6 +7750,7 @@
           "Dashboard represents day-to-day operational work while Settings represents administrative and configuration work; route state selects the context.",
           "Replace navigation and pageChrome together from one completed route state.",
           "When pageChrome.showBack marks a detail depth, mobile chrome keeps the page heading as its identity and presents only local subsections; peer route tabs remain in desktop BarNav rather than replacing the detail heading.",
+          "Route-owned ordered page actions drive both BarTitle and MobileHeader. ShellApp forwards one flat page-action id and owns the derived mobile overflow menu so routes do not duplicate menu state or choices.",
           "Managed ShellApp keeps the selected desktop section-navigation presentation and ShellPage present and owns page header stickiness and the content scroller.",
           "Route-owned pageChrome independently selects ShellPage contentInset, page-header seams, scroll compaction, expanded and compact header-divider visibility, and contentSurface. ShellApp forwards them while resolving whether desktop title geometry is page-local or shell-bar-owned.",
           "The application filters unauthorized destinations, sections, and tools before passing them into shell components."
@@ -7703,10 +7770,12 @@
           "When the application enables viewport-fit=cover, ShellApp reserves the shared top safe-area inset once for the complete mobile stage; nested routed, sheet, and tool headers must not add a second top inset.",
           "A slotted Banner remains below the top safe-area inset and above routed, navigation, fullscreen-tool, and mobile global-surface presentations.",
           "Mobile global surfaces conceal and inert the routed workspace without unmounting it, preserving nested routes and scroll state.",
+          "Managed rail accessories are intentionally omitted below 768px. Applications that need equivalent persistent mobile status provide it through the top banner or status region; ShellApp does not convert rail accessories into mobile tool views.",
           "Keep PanelNav width, BarNav height, PanelTools chrome, and main-content origin stable except during intentional responsive or collapse transitions.",
           "The routed content cell and tools cell expose separate anchored-overlay collision boundaries, so top-layer menus and tooltips remain above local clipping without crossing into neighboring shell lanes. Full-screen modal overlays remain viewport-owned.",
           "Paper texture chrome is desktop/tablet-only and follows the fixed viewport phase of the shell chrome; mobile remains a solid primary stage.",
           "Managed page-header capacity follows only the fixed shell breakpoint: roomy on desktop and compact on tablet. Opening PanelTools does not compact or constrain BarTitle.",
+          "Mobile keeps at most the first eligible ordered icon command visible and moves labeled buttons, menu choices, split actions, and explicit overflow commands into one shell-owned text-only page-actions menu.",
           "The bottom bar remains visible at all route and tool depths in the foundation release."
         ],
         "frameworkCaveats": {
@@ -7838,6 +7907,10 @@
             "name": "dsPresentationChange",
             "detail": "{ presentation: 'drawer' | 'fullscreen' }"
           },
+          {
+            "name": "dsRailAccessoryAction",
+            "detail": "PanelToolsRailAccessoryActionDetail"
+          },
           {
             "name": "dsResponsiveModeChange",
             "detail": "{ mode: ShellResponsiveMode }"
@@ -7870,7 +7943,9 @@
       "componentDependencies": [
         "bar-nav",
         "bar-title",
+        "button-filled",
         "button-unfilled",
+        "menu",
         "mobile-bar-nav",
         "mobile-header",
         "mobile-sheet-nav",
@@ -8087,21 +8162,24 @@
         "accessibility": [
           "Only the active mobile tool view participates in focus or the accessibility tree.",
           "Header Back and application-owned header actions preserve the PanelTools event contract.",
-          "A direct Activity destination renders its own named tool view; an explicitly grouped Inbox uses a named label-only TabGroup."
+          "A direct Activity destination renders its own named tool view; an explicitly grouped Inbox uses a named label-only TabGroup.",
+          "Desktop and tablet rail accessories retain PanelTools-owned labels, focus order, decorative-boundary semantics, and direct-action events."
         ],
         "states": [
           "The application owns open and activeTool and replaces headers when tool depth changes.",
           "Items with mobileDestination inbox map to one mobile Inbox destination while retaining the actual active tool id; the canonical recipe exposes Activity directly and keeps Inbox grouping opt-in.",
           "Stable tool ids own named slots; label, order, rail placement, shortcut, and mobile destination are explicit item data.",
+          "Application-owned rail accessories are forwarded unchanged to PanelTools on desktop and tablet and remain independent from activeTool and open.",
           "Switching responsive mode must not recreate application-owned slotted product elements."
         ],
         "responsiveBehavior": [
           "Desktop and tablet compose PanelTools-compatible rail and drawer chrome.",
-          "Mobile renders one centered MobileHeader for every direct tool; explicitly grouped Inbox tools use the large segmented section control."
+          "Mobile renders one centered MobileHeader for every direct tool; explicitly grouped Inbox tools use the large segmented section control.",
+          "Mobile intentionally omits desktop and tablet rail accessories instead of promoting them into tool views. Applications provide an equivalent persistent mobile status surface through ShellApp's top banner or status region."
         ],
         "frameworkCaveats": {
           "customElements": [
-            "Assign items and headers as JavaScript properties and place each persistent owner in its named *-view slot."
+            "Assign items, accessories, and headers as JavaScript properties and place each persistent owner in its named *-view slot."
           ],
           "react": [
             "Keep stable keyed product owner elements in the generated wrapper's named slots."
@@ -8123,6 +8201,10 @@
       },
       "api": {
         "props": {
+          "accessories": {
+            "type": "PanelToolsRailAccessory[]",
+            "required": false
+          },
           "activeTool": {
             "type": "PanelToolsToolId | ''",
             "required": false
@@ -8185,6 +8267,10 @@
             "name": "dsPresentationChange",
             "detail": "{\n    presentation: 'drawer' | 'fullscreen';\n  }"
           },
+          {
+            "name": "dsRailAccessoryAction",
+            "detail": "PanelToolsRailAccessoryActionDetail"
+          },
           {
             "name": "dsToolChange",
             "detail": "{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }"

package/dist/angular/ds-bar-title.d.ts

@@ -12,7 +12,7 @@ export declare class DsBarTitle {
     dsAction: EventEmitter<DsBarTitleCustomEvent<string>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsBarTitle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsBarTitle, "ds-bar-title", never, { "actions": { "alias": "actions"; "required": false; }; "actionsAriaLabel": { "alias": "actionsAriaLabel"; "required": false; }; "backAriaLabel": { "alias": "backAriaLabel"; "required": false; }; "backLabel": { "alias": "backLabel"; "required": false; }; "breadcrumbAriaLabel": { "alias": "breadcrumbAriaLabel"; "required": false; }; "breadcrumbs": { "alias": "breadcrumbs"; "required": false; }; "description": { "alias": "description"; "required": false; }; "heading": { "alias": "heading"; "required": true; }; "placement": { "alias": "placement"; "required": false; }; "primaryAction": { "alias": "primaryAction"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "sectionsAriaLabel": { "alias": "sectionsAriaLabel"; "required": false; }; "showBack": { "alias": "showBack"; "required": false; }; "showCompactDivider": { "alias": "showCompactDivider"; "required": false; }; "showDivider": { "alias": "showDivider"; "required": false; }; "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "dsBack": "dsBack"; "dsBreadcrumbSelect": "dsBreadcrumbSelect"; "dsSectionChange": "dsSectionChange"; "dsAction": "dsAction"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsBarTitle, "ds-bar-title", never, { "actionItems": { "alias": "actionItems"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "actionsAriaLabel": { "alias": "actionsAriaLabel"; "required": false; }; "backAriaLabel": { "alias": "backAriaLabel"; "required": false; }; "backLabel": { "alias": "backLabel"; "required": false; }; "breadcrumbAriaLabel": { "alias": "breadcrumbAriaLabel"; "required": false; }; "breadcrumbs": { "alias": "breadcrumbs"; "required": false; }; "description": { "alias": "description"; "required": false; }; "heading": { "alias": "heading"; "required": true; }; "placement": { "alias": "placement"; "required": false; }; "primaryAction": { "alias": "primaryAction"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "sectionsAriaLabel": { "alias": "sectionsAriaLabel"; "required": false; }; "showBack": { "alias": "showBack"; "required": false; }; "showCompactDivider": { "alias": "showCompactDivider"; "required": false; }; "showDivider": { "alias": "showDivider"; "required": false; }; "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, { "dsBack": "dsBack"; "dsBreadcrumbSelect": "dsBreadcrumbSelect"; "dsSectionChange": "dsSectionChange"; "dsAction": "dsAction"; }, never, ["*"], true, never>;
 }
 export declare interface DsBarTitle extends Components.DsBarTitle {
     /**

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

@@ -21,12 +21,12 @@ let DsBarTitle = class DsBarTitle {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsBarTitle, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsBarTitle, isStandalone: true, selector: "ds-bar-title", inputs: { actions: "actions", actionsAriaLabel: "actionsAriaLabel", backAriaLabel: "backAriaLabel", backLabel: "backLabel", breadcrumbAriaLabel: "breadcrumbAriaLabel", breadcrumbs: "breadcrumbs", description: "description", heading: "heading", placement: "placement", primaryAction: "primaryAction", sections: "sections", sectionsAriaLabel: "sectionsAriaLabel", showBack: "showBack", showCompactDivider: "showCompactDivider", showDivider: "showDivider", value: "value", variant: "variant" }, outputs: { dsBack: "dsBack", dsBreadcrumbSelect: "dsBreadcrumbSelect", dsSectionChange: "dsSectionChange", dsAction: "dsAction" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsBarTitle, isStandalone: true, selector: "ds-bar-title", inputs: { actionItems: "actionItems", actions: "actions", actionsAriaLabel: "actionsAriaLabel", backAriaLabel: "backAriaLabel", backLabel: "backLabel", breadcrumbAriaLabel: "breadcrumbAriaLabel", breadcrumbs: "breadcrumbs", description: "description", heading: "heading", placement: "placement", primaryAction: "primaryAction", sections: "sections", sectionsAriaLabel: "sectionsAriaLabel", showBack: "showBack", showCompactDivider: "showCompactDivider", showDivider: "showDivider", value: "value", variant: "variant" }, outputs: { dsBack: "dsBack", dsBreadcrumbSelect: "dsBreadcrumbSelect", dsSectionChange: "dsSectionChange", dsAction: "dsAction" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsBarTitle = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsBarTitle,
-        inputs: ['actions', 'actionsAriaLabel', 'backAriaLabel', 'backLabel', 'breadcrumbAriaLabel', 'breadcrumbs', 'description', 'heading', 'placement', 'primaryAction', 'sections', 'sectionsAriaLabel', 'showBack', 'showCompactDivider', 'showDivider', 'value', 'variant']
+        inputs: ['actionItems', 'actions', 'actionsAriaLabel', 'backAriaLabel', 'backLabel', 'breadcrumbAriaLabel', 'breadcrumbs', 'description', 'heading', 'placement', 'primaryAction', 'sections', 'sectionsAriaLabel', 'showBack', 'showCompactDivider', 'showDivider', 'value', 'variant']
     })
 ], DsBarTitle);
 export { DsBarTitle };
@@ -37,7 +37,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['actions', 'actionsAriaLabel', 'backAriaLabel', 'backLabel', 'breadcrumbAriaLabel', 'breadcrumbs', 'description', { name: 'heading', required: true }, 'placement', 'primaryAction', 'sections', 'sectionsAriaLabel', 'showBack', 'showCompactDivider', 'showDivider', 'value', 'variant'],
+                    inputs: ['actionItems', 'actions', 'actionsAriaLabel', 'backAriaLabel', 'backLabel', 'breadcrumbAriaLabel', 'breadcrumbs', 'description', { name: 'heading', required: true }, 'placement', 'primaryAction', 'sections', 'sectionsAriaLabel', 'showBack', 'showCompactDivider', 'showDivider', 'value', 'variant'],
                     outputs: ['dsBack', 'dsBreadcrumbSelect', 'dsSectionChange', 'dsAction'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsBack: [{