@ds-mo/ui 14.23.0 → 14.25.0

package/dist/.package-ready.json

@@ -1 +1 @@
-{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.23.0","components":77,"digest":"2db305df550d826a65e3755c57cc2404e35f4ddd1ea9740d06ac41399959b27d","completedAt":"2026-08-31T23:09:00.789Z"}
+{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.25.0","components":77,"digest":"f1a7aa473f373792c783db432b2f12160c7403108897991076ee1fc0412b6863","completedAt":"2026-09-02T01:26:05.059Z"}

package/dist/agent-patterns.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.23.0",
+  "packageVersion": "14.25.0",
   "kind": "patterns",
   "entries": [
     {
@@ -458,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
         },
         {
@@ -468,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
         }
       ],
@@ -478,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."
       ],
@@ -485,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.",
@@ -653,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.",
@@ -667,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.",
@@ -687,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": [
@@ -712,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": [
@@ -743,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.23.0",
+  "packageVersion": "14.25.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": []
@@ -7695,6 +7734,7 @@
           "Managed composition is the standard. Supply navigation, pageChrome, and tools objects plus named tool-view and default page-content slots.",
           "The application router owns the current route, authorization filtering, Dashboard or Settings context, destination collections, section collections, and localized content labels.",
           "ShellApp renders the lower-level desktop, tablet, and mobile chrome, coordinates layout, gradient alignment, transitions, shortcuts, global surfaces, optional Inbox state, focus restoration, and mobile-stage visibility.",
+          "Desktop and tablet PanelNav and PanelTools width motion is one continuous layout transition: the shell bar or title and routed page must follow the same intermediate lane widths without terminal-state snapping, overlapping chrome, transform scaling, or temporary replacement backgrounds.",
           "The application router owns authorization, current URLs, history, and route execution; ShellApp forwards navigation and page intent events without routing.",
           "sectionNavigation is an application-controlled preference: bar keeps route sections in BarNav, while panel renders them as nested PanelNav children and places compact BarTitle in the shell bar.",
           "Managed ShellApp derives ShellPage desktop header placement from sectionNavigation. Panel mode removes page-local title geometry, restores the standard responsive top gutter, and preserves full-bleed page content without requiring route-specific navigation branches.",
@@ -7711,6 +7751,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."
@@ -7735,6 +7776,7 @@
           "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": {
@@ -7902,7 +7944,9 @@
       "componentDependencies": [
         "bar-nav",
         "bar-title",
+        "button-filled",
         "button-unfilled",
+        "menu",
         "mobile-bar-nav",
         "mobile-header",
         "mobile-sheet-nav",
@@ -9101,7 +9145,7 @@
           "An active member sort toggles only between ascending and descending; activating a different sortable label moves the one sorting state to that key. Applications may still clear the controlled sort state explicitly. Grouping does not introduce another interactive direction.",
           "Compound headers can expose multiple related labels with independent sort keys. Each label owns only its content-width interaction target while the active direction remains in the column's alignment-aware sort lane.",
           "Initial loading defaults to ten row-shaped skeletons and preserves row dividers, column dividers, selection lanes, and sticky boundaries. A selectable table renders a checkbox-sized control skeleton in its selection lane so loading geometry matches the real checkbox instead of a generic icon. Each column may declare representative text, multiline text, image, Tag, icon, icon-and-text, action, or intentionally blank loading geometry; the table applies the matching resolved-cell padding and track anatomy so the placeholder row has the same height and rhythm as its data row. Columns without a declaration use one text line, while action columns infer an icon action placeholder. chromeLoading replaces opted-in table-owned caption controls with non-interactive control skeletons in the same slots and at the same dimensions, without changing dataMode or the surrounding caption geometry. Empty and initial error replace only the body with ds-empty-state, using Inbox or ErrorTriangle plus the table heading and body copy. In height-bounded and maxHeight tables that region fills the remaining viewport below the column header; content-sized tables keep a minimum empty-region height. Empty, initial error, load-more, retry, loading-more, and terminal bands remain fixed to the visible table width while data columns scroll horizontally beneath them. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states. When grouping is active, each expanded group owns its load band at the end of its member rows; internal group load bands keep their bottom divider, while a terminal group load band yields it to the table edge or footer. The global bottom-of-table loader is not rendered.",
-          "dataMode selects the top-level window: infinite appends ungrouped rows through dsLoadMore when hasMore is true, pagination renders the controlled page supplied by the application and emits dsPaginationChange, and virtual recycles row DOM over the full in-memory rows or groups the application already supplied. Infinite mode also covers fixed result sets by leaving hasMore false. In a grouped paginated table, pagination counts and windows only parent groups; each expanded parent can still append its own members through dsGroupLoadMore. Virtual mode does not fetch, ignores hasMore and load bands, and requires a bounded viewport (height, maxHeight, or fitViewport with a definite block size). Without that height it fails visibly instead of mounting every row. The application owns requests, cancellation, cursors, deduplication, slicing, and query identity.",
+          "dataMode selects the top-level window: infinite appends ungrouped rows through dsLoadMore when hasMore is true, pagination renders the controlled page supplied by the application and emits dsPaginationChange, and virtual recycles row DOM over the full in-memory rows or groups the application already supplied. A bounded ungrouped infinite or pagination window with more than 50 supplied rows also recycles visible row DOM internally while preserving its selected data mode, complete supplied-window row count, selection scope, footer, and load behavior. Smaller and grouped non-virtual windows retain their supplied row DOM while deferring off-screen row content with token-aligned intrinsic heights. Infinite mode also covers fixed result sets by leaving hasMore false. In a grouped paginated table, pagination counts and windows only parent groups; each expanded parent can still append its own members through dsGroupLoadMore. Virtual mode does not fetch, ignores hasMore and load bands, and requires a bounded viewport (height, maxHeight, or fitViewport with a definite block size). Without that height it fails visibly instead of mounting every row. The application owns requests, cancellation, cursors, deduplication, slicing, and query identity.",
           "When pagination enables Fit to page on a bounded table, the table proposes the number of complete top-level rows that fit below its column header. Grouped tables count group headers only; member rows never affect capacity. Selecting Fit captures that numeric snapshot. A changed fitIdentity requests one fresh snapshot for a new query shape, while viewport resizing alone does not change the active controlled page size.",
           "Rows opt into complete-row activation with interactive and emit dsRowActivate without owning navigation. Selection paints through the shared selected ::before layer; interactive hover and press paint through the shared ::after layer.",
           "Row selection owns the single sticky start lane. One explicitly sized application column can own the sticky end lane, or the start lane when selection is absent. Each sticky boundary owns one fixed divider and a row-clipped directional shadow that paints into the adjacent scrolling columns only while more inline content remains beyond that edge.",

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: [{

package/dist/angular/ds-button-filled.d.ts

@@ -6,10 +6,12 @@ export declare class DsButtonFilled {
     protected z: NgZone;
     protected el: HTMLDsButtonFilledElement;
     dsClick: EventEmitter<DsButtonFilledCustomEvent<MouseEvent>>;
+    dsMenuClick: EventEmitter<DsButtonFilledCustomEvent<MouseEvent>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsButtonFilled, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsButtonFilled, "ds-button-filled", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "background": { "alias": "background"; "required": false; }; "contrast": { "alias": "contrast"; "required": false; }; "controls": { "alias": "controls"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "hasBorder": { "alias": "hasBorder"; "required": false; }; "hasMenu": { "alias": "hasMenu"; "required": false; }; "haspopup": { "alias": "haspopup"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "insetDepth": { "alias": "insetDepth"; "required": false; }; "intent": { "alias": "intent"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "isInset": { "alias": "isInset"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelEmphasis": { "alias": "labelEmphasis"; "required": false; }; "pressScale": { "alias": "pressScale"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsClick": "dsClick"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsButtonFilled, "ds-button-filled", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "background": { "alias": "background"; "required": false; }; "contrast": { "alias": "contrast"; "required": false; }; "controls": { "alias": "controls"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "hasBorder": { "alias": "hasBorder"; "required": false; }; "hasMenu": { "alias": "hasMenu"; "required": false; }; "haspopup": { "alias": "haspopup"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "insetDepth": { "alias": "insetDepth"; "required": false; }; "intent": { "alias": "intent"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "isInset": { "alias": "isInset"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelEmphasis": { "alias": "labelEmphasis"; "required": false; }; "menuAriaLabel": { "alias": "menuAriaLabel"; "required": false; }; "pressScale": { "alias": "pressScale"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; "split": { "alias": "split"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsClick": "dsClick"; "dsMenuClick": "dsMenuClick"; }, never, ["*"], true, never>;
 }
 export declare interface DsButtonFilled extends Components.DsButtonFilled {
     dsClick: EventEmitter<DsButtonFilledCustomEvent<MouseEvent>>;
+    dsMenuClick: EventEmitter<DsButtonFilledCustomEvent<MouseEvent>>;
 }

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

@@ -14,16 +14,17 @@ let DsButtonFilled = class DsButtonFilled {
     constructor(c, r, z) {
         this.z = z;
         this.dsClick = new EventEmitter();
+        this.dsMenuClick = new EventEmitter();
         c.detach();
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsButtonFilled, 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: DsButtonFilled, isStandalone: true, selector: "ds-button-filled", inputs: { ariaLabel: "ariaLabel", background: "background", contrast: "contrast", controls: "controls", expanded: "expanded", hasBorder: "hasBorder", hasMenu: "hasMenu", haspopup: "haspopup", icon: "icon", insetDepth: "insetDepth", intent: "intent", isInactive: "isInactive", isInset: "isInset", isLoading: "isLoading", label: "label", labelEmphasis: "labelEmphasis", pressScale: "pressScale", rounded: "rounded", size: "size", type: "type", variant: "variant", width: "width" }, outputs: { dsClick: "dsClick" }, 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: DsButtonFilled, isStandalone: true, selector: "ds-button-filled", inputs: { ariaLabel: "ariaLabel", background: "background", contrast: "contrast", controls: "controls", expanded: "expanded", hasBorder: "hasBorder", hasMenu: "hasMenu", haspopup: "haspopup", icon: "icon", insetDepth: "insetDepth", intent: "intent", isInactive: "isInactive", isInset: "isInset", isLoading: "isLoading", label: "label", labelEmphasis: "labelEmphasis", menuAriaLabel: "menuAriaLabel", pressScale: "pressScale", rounded: "rounded", size: "size", split: "split", type: "type", variant: "variant", width: "width" }, outputs: { dsClick: "dsClick", dsMenuClick: "dsMenuClick" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsButtonFilled = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsButtonFilled,
-        inputs: ['ariaLabel', 'background', 'contrast', 'controls', 'expanded', 'hasBorder', 'hasMenu', 'haspopup', 'icon', 'insetDepth', 'intent', 'isInactive', 'isInset', 'isLoading', 'label', 'labelEmphasis', 'pressScale', 'rounded', 'size', 'type', 'variant', 'width'],
+        inputs: ['ariaLabel', 'background', 'contrast', 'controls', 'expanded', 'hasBorder', 'hasMenu', 'haspopup', 'icon', 'insetDepth', 'intent', 'isInactive', 'isInset', 'isLoading', 'label', 'labelEmphasis', 'menuAriaLabel', 'pressScale', 'rounded', 'size', 'split', 'type', 'variant', 'width'],
         methods: ['setFocus']
     })
 ], DsButtonFilled);
@@ -35,9 +36,11 @@ 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: ['ariaLabel', 'background', 'contrast', 'controls', 'expanded', 'hasBorder', 'hasMenu', 'haspopup', 'icon', 'insetDepth', 'intent', 'isInactive', 'isInset', 'isLoading', 'label', 'labelEmphasis', 'pressScale', 'rounded', 'size', 'type', 'variant', 'width'],
-                    outputs: ['dsClick'],
+                    inputs: ['ariaLabel', 'background', 'contrast', 'controls', 'expanded', 'hasBorder', 'hasMenu', 'haspopup', 'icon', 'insetDepth', 'intent', 'isInactive', 'isInset', 'isLoading', 'label', 'labelEmphasis', 'menuAriaLabel', 'pressScale', 'rounded', 'size', 'split', 'type', 'variant', 'width'],
+                    outputs: ['dsClick', 'dsMenuClick'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsClick: [{
                 type: Output
+            }], dsMenuClick: [{
+                type: Output
             }] } });

package/dist/angular/ds-button-unfilled.d.ts

@@ -6,12 +6,14 @@ export declare class DsButtonUnfilled {
     protected z: NgZone;
     protected el: HTMLDsButtonUnfilledElement;
     dsClick: EventEmitter<DsButtonUnfilledCustomEvent<MouseEvent>>;
+    dsMenuClick: EventEmitter<DsButtonUnfilledCustomEvent<MouseEvent>>;
     dsChange: EventEmitter<DsButtonUnfilledCustomEvent<boolean>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsButtonUnfilled, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsButtonUnfilled, "ds-button-unfilled", never, { "activeFill": { "alias": "activeFill"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "background": { "alias": "background"; "required": false; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; }; "controls": { "alias": "controls"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "focusTabIndex": { "alias": "focusTabIndex"; "required": false; }; "hasBorder": { "alias": "hasBorder"; "required": false; }; "hasMenu": { "alias": "hasMenu"; "required": false; }; "haspopup": { "alias": "haspopup"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "insetDepth": { "alias": "insetDepth"; "required": false; }; "isActive": { "alias": "isActive"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "isInset": { "alias": "isInset"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelEmphasis": { "alias": "labelEmphasis"; "required": false; }; "pressScale": { "alias": "pressScale"; "required": false; }; "pressed": { "alias": "pressed"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsClick": "dsClick"; "dsChange": "dsChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsButtonUnfilled, "ds-button-unfilled", never, { "activeFill": { "alias": "activeFill"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "background": { "alias": "background"; "required": false; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; }; "controls": { "alias": "controls"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "focusTabIndex": { "alias": "focusTabIndex"; "required": false; }; "hasBorder": { "alias": "hasBorder"; "required": false; }; "hasMenu": { "alias": "hasMenu"; "required": false; }; "haspopup": { "alias": "haspopup"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "insetDepth": { "alias": "insetDepth"; "required": false; }; "isActive": { "alias": "isActive"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "isInset": { "alias": "isInset"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelEmphasis": { "alias": "labelEmphasis"; "required": false; }; "menuAriaLabel": { "alias": "menuAriaLabel"; "required": false; }; "pressScale": { "alias": "pressScale"; "required": false; }; "pressed": { "alias": "pressed"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; "split": { "alias": "split"; "required": false; }; "type": { "alias": "type"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsClick": "dsClick"; "dsMenuClick": "dsMenuClick"; "dsChange": "dsChange"; }, never, ["*"], true, never>;
 }
 export declare interface DsButtonUnfilled extends Components.DsButtonUnfilled {
     dsClick: EventEmitter<DsButtonUnfilledCustomEvent<MouseEvent>>;
+    dsMenuClick: EventEmitter<DsButtonUnfilledCustomEvent<MouseEvent>>;
     dsChange: EventEmitter<DsButtonUnfilledCustomEvent<boolean>>;
 }

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

@@ -14,17 +14,18 @@ let DsButtonUnfilled = class DsButtonUnfilled {
     constructor(c, r, z) {
         this.z = z;
         this.dsClick = new EventEmitter();
+        this.dsMenuClick = new EventEmitter();
         this.dsChange = new EventEmitter();
         c.detach();
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsButtonUnfilled, 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: DsButtonUnfilled, isStandalone: true, selector: "ds-button-unfilled", inputs: { activeFill: "activeFill", ariaLabel: "ariaLabel", background: "background", collapseLabel: "collapseLabel", controls: "controls", dot: "dot", expanded: "expanded", focusTabIndex: "focusTabIndex", hasBorder: "hasBorder", hasMenu: "hasMenu", haspopup: "haspopup", icon: "icon", insetDepth: "insetDepth", isActive: "isActive", isInactive: "isInactive", isInset: "isInset", isLoading: "isLoading", label: "label", labelEmphasis: "labelEmphasis", pressScale: "pressScale", pressed: "pressed", rounded: "rounded", size: "size", type: "type", variant: "variant", width: "width" }, outputs: { dsClick: "dsClick", dsChange: "dsChange" }, 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: DsButtonUnfilled, isStandalone: true, selector: "ds-button-unfilled", inputs: { activeFill: "activeFill", ariaLabel: "ariaLabel", background: "background", collapseLabel: "collapseLabel", controls: "controls", dot: "dot", expanded: "expanded", focusTabIndex: "focusTabIndex", hasBorder: "hasBorder", hasMenu: "hasMenu", haspopup: "haspopup", icon: "icon", insetDepth: "insetDepth", isActive: "isActive", isInactive: "isInactive", isInset: "isInset", isLoading: "isLoading", label: "label", labelEmphasis: "labelEmphasis", menuAriaLabel: "menuAriaLabel", pressScale: "pressScale", pressed: "pressed", rounded: "rounded", size: "size", split: "split", type: "type", variant: "variant", width: "width" }, outputs: { dsClick: "dsClick", dsMenuClick: "dsMenuClick", dsChange: "dsChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsButtonUnfilled = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsButtonUnfilled,
-        inputs: ['activeFill', 'ariaLabel', 'background', 'collapseLabel', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'hasMenu', 'haspopup', 'icon', 'insetDepth', 'isActive', 'isInactive', 'isInset', 'isLoading', 'label', 'labelEmphasis', 'pressScale', 'pressed', 'rounded', 'size', 'type', 'variant', 'width'],
+        inputs: ['activeFill', 'ariaLabel', 'background', 'collapseLabel', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'hasMenu', 'haspopup', 'icon', 'insetDepth', 'isActive', 'isInactive', 'isInset', 'isLoading', 'label', 'labelEmphasis', 'menuAriaLabel', 'pressScale', 'pressed', 'rounded', 'size', 'split', 'type', 'variant', 'width'],
         methods: ['setFocus']
     })
 ], DsButtonUnfilled);
@@ -36,11 +37,13 @@ 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: ['activeFill', 'ariaLabel', 'background', 'collapseLabel', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'hasMenu', 'haspopup', 'icon', 'insetDepth', 'isActive', 'isInactive', 'isInset', 'isLoading', 'label', 'labelEmphasis', 'pressScale', 'pressed', 'rounded', 'size', 'type', 'variant', 'width'],
-                    outputs: ['dsClick', 'dsChange'],
+                    inputs: ['activeFill', 'ariaLabel', 'background', 'collapseLabel', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'hasMenu', 'haspopup', 'icon', 'insetDepth', 'isActive', 'isInactive', 'isInset', 'isLoading', 'label', 'labelEmphasis', 'menuAriaLabel', 'pressScale', 'pressed', 'rounded', 'size', 'split', 'type', 'variant', 'width'],
+                    outputs: ['dsClick', 'dsMenuClick', 'dsChange'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsClick: [{
                 type: Output
+            }], dsMenuClick: [{
+                type: Output
             }], dsChange: [{
                 type: Output
             }] } });

package/dist/components/ds-agent-questionnaire.js

@@ -1,2 +1,2 @@
-import{A as o,d as s}from"./p-CrYJnDev.js";const r=o;const t=s;export{r as DsAgentQuestionnaire,t as defineCustomElement};
+import{A as o,d as s}from"./p-DiS5BgLA.js";const t=o;const p=s;export{t as DsAgentQuestionnaire,p as defineCustomElement};
 //# sourceMappingURL=ds-agent-questionnaire.js.map

package/dist/components/ds-agent-response.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,h as t,a,t as o}from"./index.js";import{d as i}from"./p-x5u5Ueli.js";import{d as r}from"./p-CrYJnDev.js";import{d as n}from"./p-BXv6RpoF.js";import{d}from"./p-w9fkkwL2.js";import{d as m}from"./p-B0kSlcaw.js";import{d as c}from"./p-DzPtYdXy.js";import{d as l}from"./p-BnTPuV3x.js";import{d as f}from"./p-7MWaWl8w.js";import{d as u}from"./p-CBymzuOO.js";import{d as p}from"./p-DiyO47xX.js";import{d as b}from"./p-Cea7rROU.js";import{d as k}from"./p-0XTyQNRG.js";import{d as h}from"./p-CilwchJH.js";import{d as g}from"./p-CTH3dSYg.js";import{d as y}from"./p-DI8DUozc.js";import{d as w}from"./p-Cd1JnnVK.js";import{d as E}from"./p-9X_p0bHr.js";const j=()=>`.sc-ds-agent-response-h{display:block;width:100%;--ds-prose-text-max-inline-size:var(--dimension-panel-width-lg);-webkit-user-select:none;user-select:none}.agent-response.sc-ds-agent-response{display:grid;gap:var(--dimension-space-150);min-width:0;width:100%;-webkit-user-select:none;user-select:none}`;const x=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.messageId="";this.author="";this.showAuthor=true;this.timestamp="";this.parts=[];this.renderMode="parts";this.streaming=false;this.metadataVisibility="always"}renderPart(s){switch(s.type){case"markdown":return t("ds-markdown",{key:s.id,content:s.content,streaming:s.state==="streaming"});case"activity":return t("ds-agent-activity",{key:s.id,items:s.items});case"tool":return t("ds-agent-tool-call",{key:s.id,name:s.name,label:s.label,state:s.state,input:s.input,output:s.output,error:s.error});case"attachments":return t("ds-attachment-list",{key:s.id,items:s.items});case"sources":return t("ds-agent-source-list",{key:s.id,items:s.items});case"questionnaire":return t("ds-agent-questionnaire",{key:s.id,requestId:s.requestId,questions:s.questions,answers:s.answers,status:"answered"})}}render(){return t(a,{key:"db10ea33a2fc6e46bcabc1cb26babf169f5b03be"},t("ds-message",{key:"a8eb1fa5758d33f89749b2346673ed58b6b8a89b",messageId:this.messageId,direction:"incoming",author:this.author,showAuthor:this.showAuthor,timestamp:this.timestamp,streaming:this.streaming,metadataVisibility:this.metadataVisibility},t("div",{key:"f5fdc038dff60073e5b48d6c0df1af1fc25a7b6d",class:"agent-response"},this.renderMode==="composed"?t("slot",null):this.parts.map((s=>this.renderPart(s)))),t("slot",{key:"59fdb0bad04a1007969b6fb90d2db24f4829c78c",name:"footer",slot:"footer"}),t("slot",{key:"76dd5a653b78ae66dbb9f2c6e63e1cc14d8964e0",name:"metadata-actions",slot:"metadata-actions"}),t("slot",{key:"a128d8e692dd33d312e7b650778a7eb80f8ac2af",name:"actions",slot:"actions"})))}static get style(){return j()}},[262,"ds-agent-response",{messageId:[1,"message-id"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],parts:[16],renderMode:[1,"render-mode"],streaming:[4],metadataVisibility:[1,"metadata-visibility"]}]);function v(){if(typeof customElements==="undefined"){return}const s=["ds-agent-response","ds-agent-activity","ds-agent-questionnaire","ds-agent-source-list","ds-agent-tool-call","ds-attachment-list","ds-badge","ds-button-filled","ds-button-unfilled","ds-checkbox","ds-code-block","ds-icon","ds-loader","ds-markdown","ds-message","ds-radio","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-agent-response":if(!customElements.get(o(s))){customElements.define(o(s),x)}break;case"ds-agent-activity":if(!customElements.get(o(s))){i()}break;case"ds-agent-questionnaire":if(!customElements.get(o(s))){r()}break;case"ds-agent-source-list":if(!customElements.get(o(s))){n()}break;case"ds-agent-tool-call":if(!customElements.get(o(s))){d()}break;case"ds-attachment-list":if(!customElements.get(o(s))){m()}break;case"ds-badge":if(!customElements.get(o(s))){c()}break;case"ds-button-filled":if(!customElements.get(o(s))){l()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){f()}break;case"ds-checkbox":if(!customElements.get(o(s))){u()}break;case"ds-code-block":if(!customElements.get(o(s))){p()}break;case"ds-icon":if(!customElements.get(o(s))){b()}break;case"ds-loader":if(!customElements.get(o(s))){k()}break;case"ds-markdown":if(!customElements.get(o(s))){h()}break;case"ds-message":if(!customElements.get(o(s))){g()}break;case"ds-radio":if(!customElements.get(o(s))){y()}break;case"ds-text":if(!customElements.get(o(s))){w()}break;case"ds-tooltip":if(!customElements.get(o(s))){E()}break}}))}v();const q=x;const C=v;export{q as DsAgentResponse,C as defineCustomElement};
+import{p as s,H as e,h as t,a,t as o}from"./index.js";import{d as i}from"./p-x5u5Ueli.js";import{d as r}from"./p-DiS5BgLA.js";import{d}from"./p-BXv6RpoF.js";import{d as n}from"./p-w9fkkwL2.js";import{d as m}from"./p-B0kSlcaw.js";import{d as c}from"./p-DzPtYdXy.js";import{d as l}from"./p-BR1ayqMU.js";import{d as f}from"./p-kslioYhf.js";import{d as u}from"./p-CBymzuOO.js";import{d as p}from"./p-PXdvBMXB.js";import{d as b}from"./p-Cea7rROU.js";import{d as k}from"./p-0XTyQNRG.js";import{d as h}from"./p-CglHiyY2.js";import{d as g}from"./p-CTH3dSYg.js";import{d as y}from"./p-DI8DUozc.js";import{d as w}from"./p-Cd1JnnVK.js";import{d as E}from"./p-9X_p0bHr.js";const j=()=>`.sc-ds-agent-response-h{display:block;width:100%;--ds-prose-text-max-inline-size:var(--dimension-panel-width-lg);-webkit-user-select:none;user-select:none}.agent-response.sc-ds-agent-response{display:grid;gap:var(--dimension-space-150);min-width:0;width:100%;-webkit-user-select:none;user-select:none}`;const v=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.messageId="";this.author="";this.showAuthor=true;this.timestamp="";this.parts=[];this.renderMode="parts";this.streaming=false;this.metadataVisibility="always"}renderPart(s){switch(s.type){case"markdown":return t("ds-markdown",{key:s.id,content:s.content,streaming:s.state==="streaming"});case"activity":return t("ds-agent-activity",{key:s.id,items:s.items});case"tool":return t("ds-agent-tool-call",{key:s.id,name:s.name,label:s.label,state:s.state,input:s.input,output:s.output,error:s.error});case"attachments":return t("ds-attachment-list",{key:s.id,items:s.items});case"sources":return t("ds-agent-source-list",{key:s.id,items:s.items});case"questionnaire":return t("ds-agent-questionnaire",{key:s.id,requestId:s.requestId,questions:s.questions,answers:s.answers,status:"answered"})}}render(){return t(a,{key:"db10ea33a2fc6e46bcabc1cb26babf169f5b03be"},t("ds-message",{key:"a8eb1fa5758d33f89749b2346673ed58b6b8a89b",messageId:this.messageId,direction:"incoming",author:this.author,showAuthor:this.showAuthor,timestamp:this.timestamp,streaming:this.streaming,metadataVisibility:this.metadataVisibility},t("div",{key:"f5fdc038dff60073e5b48d6c0df1af1fc25a7b6d",class:"agent-response"},this.renderMode==="composed"?t("slot",null):this.parts.map((s=>this.renderPart(s)))),t("slot",{key:"59fdb0bad04a1007969b6fb90d2db24f4829c78c",name:"footer",slot:"footer"}),t("slot",{key:"76dd5a653b78ae66dbb9f2c6e63e1cc14d8964e0",name:"metadata-actions",slot:"metadata-actions"}),t("slot",{key:"a128d8e692dd33d312e7b650778a7eb80f8ac2af",name:"actions",slot:"actions"})))}static get style(){return j()}},[262,"ds-agent-response",{messageId:[1,"message-id"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],parts:[16],renderMode:[1,"render-mode"],streaming:[4],metadataVisibility:[1,"metadata-visibility"]}]);function x(){if(typeof customElements==="undefined"){return}const s=["ds-agent-response","ds-agent-activity","ds-agent-questionnaire","ds-agent-source-list","ds-agent-tool-call","ds-attachment-list","ds-badge","ds-button-filled","ds-button-unfilled","ds-checkbox","ds-code-block","ds-icon","ds-loader","ds-markdown","ds-message","ds-radio","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-agent-response":if(!customElements.get(o(s))){customElements.define(o(s),v)}break;case"ds-agent-activity":if(!customElements.get(o(s))){i()}break;case"ds-agent-questionnaire":if(!customElements.get(o(s))){r()}break;case"ds-agent-source-list":if(!customElements.get(o(s))){d()}break;case"ds-agent-tool-call":if(!customElements.get(o(s))){n()}break;case"ds-attachment-list":if(!customElements.get(o(s))){m()}break;case"ds-badge":if(!customElements.get(o(s))){c()}break;case"ds-button-filled":if(!customElements.get(o(s))){l()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){f()}break;case"ds-checkbox":if(!customElements.get(o(s))){u()}break;case"ds-code-block":if(!customElements.get(o(s))){p()}break;case"ds-icon":if(!customElements.get(o(s))){b()}break;case"ds-loader":if(!customElements.get(o(s))){k()}break;case"ds-markdown":if(!customElements.get(o(s))){h()}break;case"ds-message":if(!customElements.get(o(s))){g()}break;case"ds-radio":if(!customElements.get(o(s))){y()}break;case"ds-text":if(!customElements.get(o(s))){w()}break;case"ds-tooltip":if(!customElements.get(o(s))){E()}break}}))}x();const q=v;const B=x;export{q as DsAgentResponse,B as defineCustomElement};
 //# sourceMappingURL=ds-agent-response.js.map