@ds-mo/ui 14.7.0 → 14.9.0

package/dist/.package-ready.json

@@ -1 +1 @@
-{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.7.0","components":70,"digest":"4d1976acb1ef3f2b1b320e810a04676eabe2f5a21144b751a7e6c5a6d98db08d","completedAt":"2026-08-20T23:50:41.765Z"}
+{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.9.0","components":72,"digest":"1ca8377391f4827408635f876e002129658e4574004d636ecc5da5981139d48f","completedAt":"2026-08-21T18:00:05.482Z"}

package/dist/agent-patterns.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.7.0",
+  "packageVersion": "14.9.0",
   "kind": "patterns",
   "entries": [
     {

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.7.0",
+  "packageVersion": "14.9.0",
   "kind": "components",
   "entries": [
     {
@@ -3556,6 +3556,7 @@
           }
         ],
         "commonlyComposedWith": [
+          "component:ds-table",
           "component:ds-select",
           "component:ds-text",
           "component:ds-icon"
@@ -7051,6 +7052,7 @@
           "When any option supplies subtext, every row uses the same subtext structure and missing values render an em dash. Subtext should disambiguate or add decision-helpful information.",
           "Option labels and the selected trigger label stay on one line and truncate when constrained. Option subtext may wrap to at most two lines.",
           "Use an option action only for a contextual menu about that user-managed option. The fixed ellipsis action appears on hover, keyboard activity, focus, and touch; expanded keeps it visible while its controlled menu is open. Activating it emits dsOptionAction without selecting the option or closing the Select popup.",
+          "Use option subtextActions for a compact set of immediate actions that belong to one option. They render beneath only that option's label using the standard supporting-text inset and rhythm, use action or negative semantic color, and emit dsOptionSubtextAction without selecting the option or closing the popup. Unlike descriptive subtext, they do not reserve a blank supporting line on neighboring options.",
           "The optional prefix icon and trailing indicator always use the parent surface's secondary foreground color, including when a selected value promotes the label to primary. The default down indicator communicates disclosure; up-down is reserved for compact value steppers such as pagination page size.",
           "While the popup is open, the trigger holds the pressed interaction wash without changing its resting foreground or selected-value treatment.",
           "The shared popup search control follows the Select density, using the same text, icon, and internal spacing as a borderless trigger. Its container uses menu-item padding on every side and owns a 1px bottom divider that becomes a 1.5px bold-brand stroke while search has focus. Search placeholder text is secondary at rest and quaternary while focused because it becomes decorative once the editable field is active.",
@@ -7076,7 +7078,7 @@
             "Assign options, sections, and multiple-mode array values through JavaScript properties because arrays and objects cannot be represented safely as attributes."
           ],
           "react": [
-            "Pass options or sections as wrapper props, set multiple for array values, and handle onDsChange, onDsClear, onDsOpenChange, onDsFooterAction, and onDsOptionAction."
+            "Pass options or sections as wrapper props, set multiple for array values, and handle onDsChange, onDsClear, onDsOpenChange, onDsFooterAction, onDsOptionAction, and onDsOptionSubtextAction."
           ],
           "angular": [
             "Import DsSelect and SelectValueAccessor when integrating with Angular Forms; bind options and sections as properties."
@@ -7264,6 +7266,10 @@
           {
             "name": "dsOptionAction",
             "detail": "SelectOptionActionDetail"
+          },
+          {
+            "name": "dsOptionSubtextAction",
+            "detail": "SelectOptionSubtextActionDetail"
           }
         ],
         "slots": []
@@ -8633,7 +8639,7 @@
         "summary": "Semantic, controlled data table with durable visual primitives for cell geometry, grouping, sorting, multi-selection, sticky overflow, incremental loading, and top-level pagination.",
         "useWhen": [
           "A structured dataset needs native row and column relationships, optional one-level grouping, or comparable values across records.",
-          "An application needs controlled sorting, loaded-row selection, infinite loading, pagination, or an opted-in table-owned column customizer while retaining ownership of the data query, catalog, and persistence.",
+          "An application needs controlled sorting, loaded-row selection, infinite loading, pagination, or opted-in table-owned data-mode and column controls while retaining ownership of the data query, catalog, and persistence.",
           "A product table needs a token-backed recipe whose individual header, group, row, cell, selection, state, and load-more layers remain easy to restyle."
         ],
         "avoidWhen": [
@@ -8647,6 +8653,8 @@
           "component:ds-skeleton",
           "component:ds-loader",
           "component:ds-pagination",
+          "component:ds-table-toolbar",
+          "component:ds-table-saved-views",
           "component:ds-bar-action",
           "component:ds-button-unfilled",
           "component:ds-menu",
@@ -8659,8 +8667,9 @@
         ],
         "accessibility": [
           "The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a 48px header bar renders as component chrome outside the horizontal scrollport. It defaults to a presentational caption title that does not duplicate the accessible name. Application-owned labeled controls supplied through the single named header slot replace that fallback and occupy the leading content width inside the component-owned 8px inset. When columnCustomizer is enabled, the table adds a trailing Preferences control named Customize table; otherwise the header slot receives the complete content width.",
+          "The data-mode switcher is the shared Menu of the table's supported infinite and pagination modes. It is the final caption-bar action; when the column customizer is also present, a decorative vertical divider separates the two controls. dataMode remains controlled, and the application responds to change intent by supplying the matching records, pagination state, loading behavior, and query consequences. Escape, dismissal, and selection return focus to the trigger.",
           "The column customizer is the shared Menu of switch rows, not a table-owned dialog. Data columns can be shown, hidden, and reordered. Locked action columns stay visible, inactive, and last. The selection checkbox is not a column and never appears. The last remaining visible data column cannot be hidden, but it stays focusable so it can still be reordered. Escape and outside click restore focus to the trigger. Persistence stays in the application.",
-          "Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. Grouping never adds a second sort indicator or header control; the application supplies groups in its fixed product order.",
+          "Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. Grouping never adds a second sort indicator or header control; the application supplies groups in its fixed product order. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
           "Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window. When grouping is active with multi-selection, each group section header also exposes a checkbox that selects or clears that group's selectable loaded rows.",
           "Interactive rows are focusable as native rows, activate with Enter or Space, and do not steal activation from their nested selection, action, overflow-menu, or primary-text link controls.",
           "Scrollable table regions become keyboard focusable and named only when overflow exists.",
@@ -8668,12 +8677,12 @@
           "Static and infinite tables may show an optional result summary footer when displayedCount and totalCount are finite. Pagination mode instead renders a named Pagination control with a compact selected-size total, vertical divider, and page position; range changes are announced independently with complete phrasing. While focus is anywhere inside a paginated table, unmodified Left and Right Arrow request the adjacent page; editable fields, choice controls, sliders, and modified key combinations retain their own keyboard behavior. The footer slot can replace summary copy, while footer-leading and footer-trailing remain available in the same compact-bar anatomy."
         ],
         "states": [
-          "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. Opting into columnCustomizer adds a trailing Customize table Menu trigger and requires caption visibility. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
+          "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize table precedes a decorative divider and the data-mode trigger remains the final action. The table closes one trailing Menu before opening the other. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
           "Grouping supports one level. The application supplies groups in a fixed product-defined order and supplies ordered member rows independently. Group section headers show an emphasized text-body-medium label followed by a middle dot and plain secondary loaded progress, for example Critical · 50 of 166. The loaded value comes from the supplied member rows and the total comes from totalCount. A localized countLabel total phrase remains available for the complete assistive progress announcement. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background. Internal sections keep their separators; a collapsed or empty section header yields its separator only when it is the table's final rendered item. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe and toggles controlled collapsedGroupIds, showing ChevronUp while expanded and ChevronDown while collapsed. While any group is expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each contained section uses its one real section row as a native sticky header inside its real row-group boundary. The browser therefore owns pinning, push-off, scrolling, and resize layout in one pass without a duplicated lane, active-section state, transforms, or scroll-time geometry. Shared grid tracks retain exact header and member-cell alignment. The section surface also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width.",
           "When columnCustomizer is false, columns render in catalog order. When it is true, columns remains the catalog: hiddenColumnIds and columnOrder control visibility and data-column sequence, action columns stay last and cannot be hidden, and dsColumnsConfigChange reports the next hidden ids and data-column order without mutating those inputs. The customizer Menu live-applies show/hide and data-column reorder. The table does not persist preferences.",
           "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. 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.",
+          "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. 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, and pagination renders the controlled page supplied by the application and emits dsPaginationChange. 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. 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.",
@@ -8686,7 +8695,7 @@
           "stickyHeader follows the active vertical scroll owner: a maxHeight, height, or fitViewport table keeps its native header and group sections inside one bounded table scrollport, while a document-flow table retains a semantic native header and renders a sticky control header whose columns follow the body's native inline scroll timeline. Consumers set --ds-table-sticky-header-offset when page chrome occupies an unbounded document scrollport edge. When the 48px table header bar is visible, it sticks at that external offset and the column header stacks immediately below it.",
           "fitViewport uses viewportInsetBlockStart and viewportInsetBlockEnd to describe compact surrounding chrome and page gutters relative to the nearest vertical scroll owner. Before the table reaches that compact position, its host reserves the eventual height while the visible composition grows and vertical input remains owned by the outer page. Once settled, the internal table viewport becomes the vertical scroll owner. Bounded grouped tables use browser-native sticky section rows inside real block row-group boundaries, so scroll and resize do not run component JavaScript or trigger reactive section swaps. Document-flow tables retain the synchronized visual lane required by their separate horizontal scrollport.",
           "Without maxHeight the table grows the document and automatic lazy loading observes the browser viewport. Horizontal scrolling chains vertical wheel and trackpad movement to the page instead of trapping it.",
-          "Explicit column sizes establish the horizontal overflow width; unsized columns share remaining space.",
+          "Explicit column sizes establish the horizontal overflow width; unsized columns share remaining space. Set imageTracks on an image column to derive its fixed width from the matching 1-, 2-, or 3-track 16:9 image geometry plus table cell padding instead of copying a numeric width.",
           "Prefer the named xs through xl column sizes, which resolve through TokoMo's table-column width tokens; numeric pixel sizes remain an escape hatch for exceptional application-owned widths.",
           "Column headers use one 32px geometry. Body rows use a 40px single-track minimum with shared 8px cell padding; additional tracks grow downward. Image previews fill the same content box as their declared track count. The second text track and the third text track share one subdued body-small recipe so line 3 lines up with line 2.",
           "Long content truncates to one line by default. Hover (or keyboard-focus a primary link) shows the omitted value in one table-owned tooltip when that track overflows. maxLines 2 or 3 wrap onto the named 2-track and 3-track row heights, then ellipsize with the same tooltip. wrap: true remains unlimited and does not show a truncation tooltip. Wrapping 1-track primary occupies the named 2-track and 3-track row heights instead of a private line-height scale. Wrapping secondary on a 2-track cell occupies the named 3-track row and a 106px fourth track for three lines."
@@ -8753,6 +8762,18 @@
             "type": "TableDataMode",
             "required": false
           },
+          "dataModeMenuLabel": {
+            "type": "string",
+            "required": false
+          },
+          "dataModeSwitcher": {
+            "type": "boolean",
+            "required": false
+          },
+          "dataModeSwitcherLabel": {
+            "type": "string",
+            "required": false
+          },
           "displayedCount": {
             "type": "number | undefined",
             "required": false
@@ -8833,6 +8854,10 @@
             "type": "string[]",
             "required": false
           },
+          "infiniteModeLabel": {
+            "type": "string",
+            "required": false
+          },
           "loadIdentity": {
             "type": "string | number",
             "required": false
@@ -8873,6 +8898,10 @@
             "type": "TablePaginationState | null",
             "required": false
           },
+          "paginationModeLabel": {
+            "type": "string",
+            "required": false
+          },
           "resultSummaryLabel": {
             "type": "string",
             "required": false
@@ -8935,6 +8964,10 @@
             "name": "dsColumnsConfigChange",
             "detail": "TableColumnsConfigChangeDetail"
           },
+          {
+            "name": "dsDataModeChange",
+            "detail": "TableDataModeChangeDetail"
+          },
           {
             "name": "dsGroupCollapseChange",
             "detail": "TableGroupCollapseChangeDetail"
@@ -8979,6 +9012,7 @@
       "componentDependencies": [
         "button-unfilled",
         "checkbox",
+        "divider",
         "empty-state",
         "icon",
         "loader",
@@ -8990,6 +9024,238 @@
         "tooltip"
       ]
     },
+    {
+      "id": "component:ds-table-saved-views",
+      "tag": "ds-table-saved-views",
+      "name": "table-saved-views",
+      "title": "TableSavedViews",
+      "summary": "Controlled saved-views UI for table toolbars, including selection, dirty state, create, save, discard, rename, remove, validation, and focus behavior without owning table configuration or persistence.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "general",
+        "status": "stable",
+        "summary": "Controlled saved-views UI for table toolbars, including selection, dirty state, create, save, discard, rename, remove, validation, and focus behavior without owning table configuration or persistence.",
+        "useWhen": [
+          "A table workspace lets people recall and manage named combinations of table controls.",
+          "Several products need the same saved-view interaction while retaining different view payloads and storage systems."
+        ],
+        "avoidWhen": [
+          "The choices do not represent restorable table configurations.",
+          "The application expects the component to serialize filters, grouping, sorting, columns, pagination, or product-specific state."
+        ],
+        "commonlyComposedWith": [
+          "component:ds-table-toolbar",
+          "component:ds-table",
+          "component:ds-select",
+          "component:ds-menu",
+          "component:ds-modal"
+        ],
+        "patterns": [
+          "pattern:menu-trigger"
+        ],
+        "accessibility": [
+          "The primary control retains combobox semantics and exposes a direct accessible name.",
+          "Each custom view exposes a separately named options trigger. The options menu supports keyboard navigation and returns focus through the shared Select and Menu behavior.",
+          "The naming dialog traps focus through Modal behavior, associates validation text with the input through Field, and restores focus to the saved-views control after closing."
+        ],
+        "states": [
+          "views, value, and dirty are controlled. Selection, create, save, discard, rename, and remove events communicate intent and never mutate application records.",
+          "The component owns only transient interaction state: the contextual menu, naming dialog, draft name, duplicate-name validation, and focus restoration.",
+          "The default view is a non-editable template. Application-owned custom views appear in a separate section with Rename and Remove actions. New view opens the naming dialog. When an editable selected view is dirty, that view row shows Save and negative Discard supporting actions while the footer remains dedicated to New view. The application decides which table state to capture, restore, and persist."
+        ],
+        "responsiveBehavior": [
+          "The control remains a single toolbar item and relies on Select, Menu, and Modal collision and viewport behavior.",
+          "Place it in the leading region of ds-table-toolbar so narrow table headers preserve the expected control order."
+        ],
+        "frameworkCaveats": {
+          "customElements": [
+            "Assign views through the JavaScript property and update value after handling dsViewChange."
+          ],
+          "react": [
+            "Keep view records and serialized table configuration in application state; update controlled props in response to the component events."
+          ],
+          "angular": [
+            "Import the generated DsTableSavedViews adapter and bind views, value, and dirty; handle event.detail for selection and mutations."
+          ]
+        },
+        "references": [
+          {
+            "label": "Storybook review states",
+            "path": "src/wc/components/TableSavedViews/TableSavedViews.stories.ts"
+          },
+          {
+            "label": "Toolbar composition owner",
+            "path": "src/wc/components/TableToolbar/TableToolbar.agent.json"
+          }
+        ]
+      },
+      "api": {
+        "props": {
+          "createLabel": {
+            "type": "string",
+            "required": false
+          },
+          "defaultViewId": {
+            "type": "string",
+            "required": false
+          },
+          "defaultViewLabel": {
+            "type": "string",
+            "required": false
+          },
+          "dirty": {
+            "type": "boolean",
+            "required": false
+          },
+          "label": {
+            "type": "string",
+            "required": false
+          },
+          "triggerLabel": {
+            "type": "string",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          },
+          "views": {
+            "type": "TableSavedView[]",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsViewChange",
+            "detail": "TableSavedViewChangeDetail"
+          },
+          {
+            "name": "dsViewCreate",
+            "detail": "TableSavedViewCreateDetail"
+          },
+          {
+            "name": "dsViewDiscard",
+            "detail": "TableSavedViewDiscardDetail"
+          },
+          {
+            "name": "dsViewRemove",
+            "detail": "TableSavedViewRemoveDetail"
+          },
+          {
+            "name": "dsViewRename",
+            "detail": "TableSavedViewRenameDetail"
+          },
+          {
+            "name": "dsViewSave",
+            "detail": "TableSavedViewSaveDetail"
+          }
+        ],
+        "slots": []
+      },
+      "exports": {
+        "customElement": "ds-table-saved-views",
+        "react": "DsTableSavedViews",
+        "angular": "DsTableSavedViews"
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "componentDependencies": [
+        "button-filled",
+        "button-unfilled",
+        "field",
+        "input",
+        "menu",
+        "modal",
+        "select"
+      ]
+    },
+    {
+      "id": "component:ds-table-toolbar",
+      "tag": "ds-table-toolbar",
+      "name": "table-toolbar",
+      "title": "TableToolbar",
+      "summary": "Data-agnostic companion layout for application-owned controls in a table header, with leading and trailing control groups and narrow-width horizontal overflow.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "general",
+        "status": "stable",
+        "summary": "Data-agnostic companion layout for application-owned controls in a table header, with leading and trailing control groups and narrow-width horizontal overflow.",
+        "useWhen": [
+          "Several table pages repeat the same leading discovery controls and trailing result-shaping controls.",
+          "A ds-table header slot needs consistent control spacing, alignment, grouping, and narrow-width overflow without moving product behavior into the table."
+        ],
+        "avoidWhen": [
+          "The controls do not operate on a table or structured result set.",
+          "The application expects the toolbar to define filters, saved views, grouping choices, persistence, or data transformations.",
+          "Only one standalone control is present and needs no grouped toolbar semantics."
+        ],
+        "commonlyComposedWith": [
+          "component:ds-table",
+          "component:ds-table-saved-views",
+          "component:ds-input",
+          "component:ds-filter-menu",
+          "component:ds-button-unfilled"
+        ],
+        "patterns": [],
+        "accessibility": [
+          "The component exposes a named toolbar while each slotted control retains its own accessible name and native keyboard behavior.",
+          "Use the leading slot for discovery and context controls such as saved views and search. Use the trailing slot for result-shaping controls such as filters and grouping.",
+          "Tab order follows authored DOM order. The toolbar does not add roving focus because it may contain heterogeneous form and popup controls."
+        ],
+        "states": [
+          "The component owns layout only. Slotted controls, values, menus, loading, persistence, and consequences remain controlled by the application. Use ds-table-saved-views when saved-view interaction needs the shared CompoMo behavior while application storage remains external.",
+          "Either region may be empty. The populated region continues to occupy the available width without adding placeholder chrome."
+        ],
+        "responsiveBehavior": [
+          "The two control groups stay on one line and horizontally scroll when their complete controls no longer fit.",
+          "The scrollbar is visually suppressed without removing touch, trackpad, mouse-wheel, or keyboard scrolling from the overflow container.",
+          "Trailing controls remain grouped after leading controls; the toolbar does not collapse controls into an application-specific overflow menu."
+        ],
+        "frameworkCaveats": {
+          "customElements": [
+            "Project controls through slot=leading or slot=trailing and provide a label that names their table context when Table controls is insufficient."
+          ],
+          "react": [
+            "Set slot=leading or slot=trailing on each child control; keep values and event handlers in the application."
+          ],
+          "angular": [
+            "Set slot=leading or slot=trailing on each child control and import the generated DsTableToolbar adapter alongside those controls."
+          ]
+        },
+        "references": [
+          {
+            "label": "Storybook review states",
+            "path": "src/wc/components/TableToolbar/TableToolbar.stories.ts"
+          },
+          {
+            "label": "Table composition owner",
+            "path": "src/wc/components/Table/Table.agent.json"
+          }
+        ]
+      },
+      "api": {
+        "props": {
+          "label": {
+            "type": "string",
+            "required": false
+          }
+        },
+        "events": [],
+        "slots": []
+      },
+      "exports": {
+        "customElement": "ds-table-toolbar",
+        "react": "DsTableToolbar",
+        "angular": "DsTableToolbar"
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "componentDependencies": []
+    },
     {
       "id": "component:ds-tag",
       "tag": "ds-tag",

package/dist/angular/ds-select.d.ts

@@ -3,6 +3,7 @@ import type { Components } from '@ds-mo/ui/components';
 import type { DsSelectCustomEvent } from '@ds-mo/ui/components';
 import type { SelectValue as IDsSelectSelectValue } from '@ds-mo/ui/components';
 import type { SelectOptionActionDetail as IDsSelectSelectOptionActionDetail } from '@ds-mo/ui/components';
+import type { SelectOptionSubtextActionDetail as IDsSelectSelectOptionSubtextActionDetail } from '@ds-mo/ui/components';
 import * as i0 from "@angular/core";
 export declare class DsSelect {
     protected z: NgZone;
@@ -12,9 +13,10 @@ export declare class DsSelect {
     dsOpenChange: EventEmitter<DsSelectCustomEvent<boolean>>;
     dsFooterAction: EventEmitter<DsSelectCustomEvent<void>>;
     dsOptionAction: EventEmitter<DsSelectCustomEvent<IDsSelectSelectOptionActionDetail>>;
+    dsOptionSubtextAction: EventEmitter<DsSelectCustomEvent<IDsSelectSelectOptionSubtextActionDetail>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsSelect, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsSelect, "ds-select", never, { "activeFill": { "alias": "activeFill"; "required": false; }; "allowClear": { "alias": "allowClear"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "background": { "alias": "background"; "required": false; }; "clearLabel": { "alias": "clearLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "footerActionLabel": { "alias": "footerActionLabel"; "required": false; }; "hasBorder": { "alias": "hasBorder"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "indicator": { "alias": "indicator"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "name": { "alias": "name"; "required": false; }; "noResultsText": { "alias": "noResultsText"; "required": false; }; "open": { "alias": "open"; "required": false; }; "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "popupAlign": { "alias": "popupAlign"; "required": false; }; "required": { "alias": "required"; "required": false; }; "requiredMessage": { "alias": "requiredMessage"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "selectedLabel": { "alias": "selectedLabel"; "required": false; }; "size": { "alias": "size"; "required": false; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; }; "triggerLabelPlaceholder": { "alias": "triggerLabelPlaceholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsChange": "dsChange"; "dsClear": "dsClear"; "dsOpenChange": "dsOpenChange"; "dsFooterAction": "dsFooterAction"; "dsOptionAction": "dsOptionAction"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsSelect, "ds-select", never, { "activeFill": { "alias": "activeFill"; "required": false; }; "allowClear": { "alias": "allowClear"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledby": { "alias": "ariaLabelledby"; "required": false; }; "background": { "alias": "background"; "required": false; }; "clearLabel": { "alias": "clearLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "footerActionLabel": { "alias": "footerActionLabel"; "required": false; }; "hasBorder": { "alias": "hasBorder"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "indicator": { "alias": "indicator"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "isInactive": { "alias": "isInactive"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "name": { "alias": "name"; "required": false; }; "noResultsText": { "alias": "noResultsText"; "required": false; }; "open": { "alias": "open"; "required": false; }; "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "popupAlign": { "alias": "popupAlign"; "required": false; }; "required": { "alias": "required"; "required": false; }; "requiredMessage": { "alias": "requiredMessage"; "required": false; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "selectedLabel": { "alias": "selectedLabel"; "required": false; }; "size": { "alias": "size"; "required": false; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; }; "triggerLabelPlaceholder": { "alias": "triggerLabelPlaceholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "dsChange": "dsChange"; "dsClear": "dsClear"; "dsOpenChange": "dsOpenChange"; "dsFooterAction": "dsFooterAction"; "dsOptionAction": "dsOptionAction"; "dsOptionSubtextAction": "dsOptionSubtextAction"; }, never, ["*"], true, never>;
 }
 export declare interface DsSelect extends Components.DsSelect {
     /**
@@ -37,4 +39,8 @@ export declare interface DsSelect extends Components.DsSelect {
      * Emitted when an option's contextual ellipsis action is activated.
      */
     dsOptionAction: EventEmitter<DsSelectCustomEvent<IDsSelectSelectOptionActionDetail>>;
+    /**
+     * Emitted when an option's supporting text action is activated.
+     */
+    dsOptionSubtextAction: EventEmitter<DsSelectCustomEvent<IDsSelectSelectOptionSubtextActionDetail>>;
 }

package/dist/angular/ds-select.js

@@ -18,11 +18,12 @@ let DsSelect = class DsSelect {
         this.dsOpenChange = new EventEmitter();
         this.dsFooterAction = new EventEmitter();
         this.dsOptionAction = new EventEmitter();
+        this.dsOptionSubtextAction = new EventEmitter();
         c.detach();
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsSelect, 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: DsSelect, isStandalone: true, selector: "ds-select", inputs: { activeFill: "activeFill", allowClear: "allowClear", ariaDescribedby: "ariaDescribedby", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", background: "background", clearLabel: "clearLabel", disabled: "disabled", dot: "dot", error: "error", errorMessage: "errorMessage", footerActionLabel: "footerActionLabel", hasBorder: "hasBorder", icon: "icon", indicator: "indicator", inputId: "inputId", isInactive: "isInactive", isLoading: "isLoading", loadingLabel: "loadingLabel", multiple: "multiple", name: "name", noResultsText: "noResultsText", open: "open", options: "options", placeholder: "placeholder", popupAlign: "popupAlign", required: "required", requiredMessage: "requiredMessage", searchPlaceholder: "searchPlaceholder", searchable: "searchable", sections: "sections", selectedLabel: "selectedLabel", size: "size", triggerLabel: "triggerLabel", triggerLabelPlaceholder: "triggerLabelPlaceholder", value: "value", width: "width" }, outputs: { dsChange: "dsChange", dsClear: "dsClear", dsOpenChange: "dsOpenChange", dsFooterAction: "dsFooterAction", dsOptionAction: "dsOptionAction" }, 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: DsSelect, isStandalone: true, selector: "ds-select", inputs: { activeFill: "activeFill", allowClear: "allowClear", ariaDescribedby: "ariaDescribedby", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", background: "background", clearLabel: "clearLabel", disabled: "disabled", dot: "dot", error: "error", errorMessage: "errorMessage", footerActionLabel: "footerActionLabel", hasBorder: "hasBorder", icon: "icon", indicator: "indicator", inputId: "inputId", isInactive: "isInactive", isLoading: "isLoading", loadingLabel: "loadingLabel", multiple: "multiple", name: "name", noResultsText: "noResultsText", open: "open", options: "options", placeholder: "placeholder", popupAlign: "popupAlign", required: "required", requiredMessage: "requiredMessage", searchPlaceholder: "searchPlaceholder", searchable: "searchable", sections: "sections", selectedLabel: "selectedLabel", size: "size", triggerLabel: "triggerLabel", triggerLabelPlaceholder: "triggerLabelPlaceholder", value: "value", width: "width" }, outputs: { dsChange: "dsChange", dsClear: "dsClear", dsOpenChange: "dsOpenChange", dsFooterAction: "dsFooterAction", dsOptionAction: "dsOptionAction", dsOptionSubtextAction: "dsOptionSubtextAction" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsSelect = __decorate([
     ProxyCmp({
@@ -40,7 +41,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                     inputs: ['activeFill', 'allowClear', 'ariaDescribedby', 'ariaLabel', 'ariaLabelledby', 'background', 'clearLabel', 'disabled', 'dot', 'error', 'errorMessage', 'footerActionLabel', 'hasBorder', 'icon', 'indicator', 'inputId', 'isInactive', 'isLoading', 'loadingLabel', 'multiple', 'name', 'noResultsText', 'open', 'options', 'placeholder', 'popupAlign', 'required', 'requiredMessage', 'searchPlaceholder', 'searchable', 'sections', 'selectedLabel', 'size', 'triggerLabel', 'triggerLabelPlaceholder', 'value', 'width'],
-                    outputs: ['dsChange', 'dsClear', 'dsOpenChange', 'dsFooterAction', 'dsOptionAction'],
+                    outputs: ['dsChange', 'dsClear', 'dsOpenChange', 'dsFooterAction', 'dsOptionAction', 'dsOptionSubtextAction'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsChange: [{
                 type: Output
@@ -52,4 +53,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Output
             }], dsOptionAction: [{
                 type: Output
+            }], dsOptionSubtextAction: [{
+                type: Output
             }] } });

package/dist/angular/ds-table-saved-views.d.ts

@@ -0,0 +1,49 @@
+import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/core';
+import type { Components } from '@ds-mo/ui/components';
+import type { DsTableSavedViewsCustomEvent } from '@ds-mo/ui/components';
+import type { TableSavedViewChangeDetail as IDsTableSavedViewsTableSavedViewChangeDetail } from '@ds-mo/ui/components';
+import type { TableSavedViewCreateDetail as IDsTableSavedViewsTableSavedViewCreateDetail } from '@ds-mo/ui/components';
+import type { TableSavedViewRenameDetail as IDsTableSavedViewsTableSavedViewRenameDetail } from '@ds-mo/ui/components';
+import type { TableSavedViewRemoveDetail as IDsTableSavedViewsTableSavedViewRemoveDetail } from '@ds-mo/ui/components';
+import type { TableSavedViewSaveDetail as IDsTableSavedViewsTableSavedViewSaveDetail } from '@ds-mo/ui/components';
+import type { TableSavedViewDiscardDetail as IDsTableSavedViewsTableSavedViewDiscardDetail } from '@ds-mo/ui/components';
+import * as i0 from "@angular/core";
+export declare class DsTableSavedViews {
+    protected z: NgZone;
+    protected el: HTMLDsTableSavedViewsElement;
+    dsViewChange: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewChangeDetail>>;
+    dsViewCreate: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewCreateDetail>>;
+    dsViewRename: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewRenameDetail>>;
+    dsViewRemove: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewRemoveDetail>>;
+    dsViewSave: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewSaveDetail>>;
+    dsViewDiscard: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewDiscardDetail>>;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DsTableSavedViews, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsTableSavedViews, "ds-table-saved-views", never, { "createLabel": { "alias": "createLabel"; "required": false; }; "defaultViewId": { "alias": "defaultViewId"; "required": false; }; "defaultViewLabel": { "alias": "defaultViewLabel"; "required": false; }; "dirty": { "alias": "dirty"; "required": false; }; "label": { "alias": "label"; "required": false; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; }; "value": { "alias": "value"; "required": false; }; "views": { "alias": "views"; "required": false; }; }, { "dsViewChange": "dsViewChange"; "dsViewCreate": "dsViewCreate"; "dsViewRename": "dsViewRename"; "dsViewRemove": "dsViewRemove"; "dsViewSave": "dsViewSave"; "dsViewDiscard": "dsViewDiscard"; }, never, ["*"], true, never>;
+}
+export declare interface DsTableSavedViews extends Components.DsTableSavedViews {
+    /**
+     * Emitted when a view selection is requested.
+     */
+    dsViewChange: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewChangeDetail>>;
+    /**
+     * Emitted after a valid create-view name is submitted.
+     */
+    dsViewCreate: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewCreateDetail>>;
+    /**
+     * Emitted after a valid renamed view name is submitted.
+     */
+    dsViewRename: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewRenameDetail>>;
+    /**
+     * Emitted when a custom view removal is requested.
+     */
+    dsViewRemove: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewRemoveDetail>>;
+    /**
+     * Emitted when changes to the active custom view should replace its stored payload.
+     */
+    dsViewSave: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewSaveDetail>>;
+    /**
+     * Emitted when the active custom view's stored payload should be restored.
+     */
+    dsViewDiscard: EventEmitter<DsTableSavedViewsCustomEvent<IDsTableSavedViewsTableSavedViewDiscardDetail>>;
+}

package/dist/angular/ds-table-saved-views.js

@@ -0,0 +1,57 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { ProxyCmp } from './angular-component-lib/utils.js';
+import { defineCustomElement as defineDsTableSavedViews } from '@ds-mo/ui/components/ds-table-saved-views.js';
+import * as i0 from "@angular/core";
+let DsTableSavedViews = class DsTableSavedViews {
+    constructor(c, r, z) {
+        this.z = z;
+        this.dsViewChange = new EventEmitter();
+        this.dsViewCreate = new EventEmitter();
+        this.dsViewRename = new EventEmitter();
+        this.dsViewRemove = new EventEmitter();
+        this.dsViewSave = new EventEmitter();
+        this.dsViewDiscard = new EventEmitter();
+        c.detach();
+        this.el = r.nativeElement;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsTableSavedViews, 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: DsTableSavedViews, isStandalone: true, selector: "ds-table-saved-views", inputs: { createLabel: "createLabel", defaultViewId: "defaultViewId", defaultViewLabel: "defaultViewLabel", dirty: "dirty", label: "label", triggerLabel: "triggerLabel", value: "value", views: "views" }, outputs: { dsViewChange: "dsViewChange", dsViewCreate: "dsViewCreate", dsViewRename: "dsViewRename", dsViewRemove: "dsViewRemove", dsViewSave: "dsViewSave", dsViewDiscard: "dsViewDiscard" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+DsTableSavedViews = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: defineDsTableSavedViews,
+        inputs: ['createLabel', 'defaultViewId', 'defaultViewLabel', 'dirty', 'label', 'triggerLabel', 'value', 'views']
+    })
+], DsTableSavedViews);
+export { DsTableSavedViews };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsTableSavedViews, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ds-table-saved-views',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: ['createLabel', 'defaultViewId', 'defaultViewLabel', 'dirty', 'label', 'triggerLabel', 'value', 'views'],
+                    outputs: ['dsViewChange', 'dsViewCreate', 'dsViewRename', 'dsViewRemove', 'dsViewSave', 'dsViewDiscard'],
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsViewChange: [{
+                type: Output
+            }], dsViewCreate: [{
+                type: Output
+            }], dsViewRename: [{
+                type: Output
+            }], dsViewRemove: [{
+                type: Output
+            }], dsViewSave: [{
+                type: Output
+            }], dsViewDiscard: [{
+                type: Output
+            }] } });