@ds-mo/ui 14.6.0 → 14.8.0

package/dist/.package-ready.json

@@ -1 +1 @@
-{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.6.0","components":70,"digest":"a0460c1db6eef494f884f0e84a21686a84ed8454852d3b265f0e524e2ee936d4","completedAt":"2026-08-20T20:20:47.279Z"}
+{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.8.0","components":72,"digest":"e0f698a341e8a2d2099382d71e58d815c87bf021f8fb302a5a42cff1c75ddb5a","completedAt":"2026-08-21T03:30:13.970Z"}

package/dist/agent-patterns.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.6.0",
+  "packageVersion": "14.8.0",
   "kind": "patterns",
   "entries": [
     {
@@ -451,16 +451,16 @@
         "The application synchronizes one open boolean to the trigger's expanded prop and Menu.open.",
         "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, update the selected value, close the Menu, and restore focus to the trigger.",
+        "On dsSelect from a command or single-selection row, update the selected value, close the Menu, and restore focus to the trigger.",
+        "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."
       ],
       "accessibility": [
         "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 overflow or more-options control. Set hasMenu, which adds no chevron, so the glyph must convey the menu alone; use Ellipses. Only ButtonUnfilled carries this shape, because the role is chrome rather than a primary action.",
-        "Never pair hasMenu with an icon-only glyph that does not read as a menu on its own; there is no chevron to fall back on.",
+        "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 Preferences for Customize table. Only ButtonUnfilled carries this shape, because the role is chrome rather than a primary action.",
         "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, because no visible label or chevron carries it.",
+        "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.",
         "Give Menu a concise menuLabel describing the available commands or views.",
         "Set Menu.initialFocusVisible only when the trigger MouseEvent detail is zero, indicating keyboard activation.",
@@ -484,7 +484,7 @@
                 {
                   "path": "view-menu.html",
                   "language": "html",
-                  "content": "<ds-button-unfilled\n  id=\"view-menu-trigger\"\n  label=\"View · Overview\"\n  has-menu\n  controls=\"view-menu\"\n></ds-button-unfilled>\n<ds-menu\n  id=\"view-menu\"\n  anchor-id=\"view-menu-trigger\"\n  menu-label=\"Choose view\"\n></ds-menu>\n\n<!-- Overflow shape: the Ellipses glyph conveys the menu, so no chevron is added. -->\n<ds-button-unfilled\n  id=\"row-menu-trigger\"\n  variant=\"icon\"\n  icon=\"Ellipses\"\n  aria-label=\"More options\"\n  has-menu\n  controls=\"row-menu\"\n></ds-button-unfilled>\n<ds-menu\n  id=\"row-menu\"\n  anchor-id=\"row-menu-trigger\"\n  menu-label=\"More options\"\n  align=\"end\"\n></ds-menu>"
+                  "content": "<ds-button-unfilled\n  id=\"view-menu-trigger\"\n  label=\"View · Overview\"\n  has-menu\n  controls=\"view-menu\"\n></ds-button-unfilled>\n<ds-menu\n  id=\"view-menu\"\n  anchor-id=\"view-menu-trigger\"\n  menu-label=\"Choose view\"\n></ds-menu>\n\n<!-- Overflow shape: Ellipses means more options, so no chevron is added. -->\n<ds-button-unfilled\n  id=\"row-menu-trigger\"\n  variant=\"icon\"\n  icon=\"Ellipses\"\n  aria-label=\"More options\"\n  has-menu\n  controls=\"row-menu\"\n></ds-button-unfilled>\n<ds-menu\n  id=\"row-menu\"\n  anchor-id=\"row-menu-trigger\"\n  menu-label=\"More options\"\n  align=\"end\"\n></ds-menu>\n\n<!-- Named menu: a specific glyph when the menu is not generic overflow. -->\n<ds-button-unfilled\n  id=\"customize-menu-trigger\"\n  variant=\"icon\"\n  icon=\"Preferences\"\n  aria-label=\"Customize table\"\n  has-menu\n  controls=\"customize-menu\"\n></ds-button-unfilled>\n<ds-menu\n  id=\"customize-menu\"\n  anchor-id=\"customize-menu-trigger\"\n  menu-label=\"Customize table\"\n  align=\"end\"\n></ds-menu>"
                 },
                 {
                   "path": "view-menu.ts",

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.6.0",
+  "packageVersion": "14.8.0",
   "kind": "components",
   "entries": [
     {
@@ -1950,7 +1950,7 @@
         "accessibility": [
           "Provide an explicit accessible name for every icon-only action.",
           "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, because no visible label or chevron carries it.",
+          "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.",
           "Use pressed only for a genuine toggle button; it supplies aria-pressed and dsChange intent. Use isActive only for owner-controlled visual emphasis inside a composite whose selection semantics live on the owner.",
           "Treat notification dots as supplemental unread or status information; never use a dot as the sole state, meaning, or accessible name.",
@@ -1970,8 +1970,8 @@
           "Rounded changes only the control radius to the half-radius treatment; it does not change hierarchy, size, variant, or interaction semantics.",
           "Physical press scaling is on by default. Disable it only when an owning composite must keep child or background geometry fixed; hover and pressed interaction washes remain available.",
           "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, meaning the overflow or more-options control, and no chevron is added.",
-          "Because the icon-only shape has no chevron, its glyph must convey the menu on its own; use Ellipses. Never pair hasMenu with an icon-only glyph that does not read as a menu.",
+          "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 Preferences 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."
         ],
         "responsiveBehavior": [
@@ -4486,15 +4486,15 @@
       "tag": "ds-menu",
       "name": "menu",
       "title": "Menu",
-      "summary": "Anchored action menu with flat commands, grouped sections, single-selection choices, supplemental notification dots or trailing tags, switches, and destructive actions.",
+      "summary": "Anchored action menu with flat commands, grouped sections, single-selection choices, supplemental notification dots or trailing tags, prefix icons, reorderable rows, switches, and destructive actions.",
       "intentStatus": "complete",
       "intent": {
         "audience": "general",
         "status": "stable",
-        "summary": "Anchored action menu with flat commands, grouped sections, single-selection choices, supplemental notification dots or trailing tags, switches, and destructive actions.",
+        "summary": "Anchored action menu with flat commands, grouped sections, single-selection choices, supplemental notification dots or trailing tags, prefix icons, reorderable rows, switches, and destructive actions.",
         "useWhen": [
           "A trigger reveals a short contextual list of commands or state-changing actions.",
-          "Actions need grouping, mutually exclusive selected state, supplemental notification dots or trailing tags, switch rows, or destructive treatment."
+          "Actions need grouping, mutually exclusive selected state, supplemental notification dots or trailing tags, prefix icons, reorderable switch or command rows, or destructive treatment."
         ],
         "avoidWhen": [
           "The user is selecting a value for a form field.",
@@ -4535,17 +4535,21 @@
           "Single-selection menus use menuitemradio semantics and aria-checked on each row, but render no nested radio control; selected interaction fill and primary foreground provide the visual state.",
           "A swatch-picker section changes the popup to a non-modal dialog so its radio group and ordinary preference buttons keep valid nested semantics; Tab moves between its controls, then leaves and closes at the popup boundary.",
           "Use notification dots only as supplemental status and not as the sole indication of important information.",
-          "Trailing tags are non-interactive supplemental content; their visible label remains part of the menu item's accessible name."
+          "Trailing tags are non-interactive supplemental content; their visible label remains part of the menu item's accessible name.",
+          "Reorderable rows keep a presentation Drag handle. Pointer drag on the handle and Alt+Arrow Up or Down emit dsReorder without closing. Pointer cancellation abandons the pending move. Hide-locked reorderable rows expose aria-disabled for the unavailable toggle but stay focusable so they can move; fully locked rows stay out of the contiguous reorderable run.",
+          "Announce the new position through a polite live region that is a sibling of the role=menu popup, so the menu retains only permitted descendants."
         ],
         "states": [
           "The host owns open state and responds to selection and close events.",
           "Use either flat items or sections, not both.",
           "After dsSelect from a switch row, replace the items or sections array with updated switchValue data so the controlled indicator reflects the new state.",
+          "After dsReorder, replace items or the affected section with the emitted items array. Menu never mutates order and does not close.",
           "For selectionMode single, keep exactly one item isSelected and replace the items or sections array after dsSelect; Menu never mutates consumer-owned selection data.",
           "Arrays, objects, and element anchors must be assigned as JavaScript properties.",
           "Use a swatch-picker section for a small curated visual preference and apply dsSwatchSelect immediately without closing the popup.",
           "Ordinary rows, section headings, and supporting text consume the Menu size. At xs, both the primary label and supporting text use caption metrics.",
-          "A trailing tag resolves one density smaller than its menu row so it nests without changing row height. Do not combine tag, dot, and switch suffixes on one item."
+          "A trailing tag resolves one density smaller than its menu row and uses the inset recipe so it nests without changing row height. Do not combine tag, dot, and switch suffixes on one item.",
+          "Reorderable rows use the Drag prefix and ignore icon. Prefix and drag-handle icons inherit the choice-popup secondary foreground, matching Select. When any row in a section has an icon or is reorderable, the remaining rows get a spacer so labels align."
         ],
         "responsiveBehavior": [
           "Keep the default choice-cell anchor alignment so the first or last interactive row edge aligns with its trigger, matching Select; use popup-frame only for deliberate custom frame geometry.",
@@ -4554,13 +4558,14 @@
         ],
         "frameworkCaveats": {
           "customElements": [
-            "Assign items, sections, and HTMLElement anchors as properties after the element is defined."
+            "Assign items, sections, and HTMLElement anchors as properties after the element is defined.",
+            "Handle dsReorder by replacing the items or section items with the emitted items array; Menu never mutates order."
           ],
           "react": [
-            "Pass arrays and objects as wrapper props and handle generated onDsSelect and onDsClose event props."
+            "Pass arrays and objects as wrapper props and handle generated onDsSelect, onDsReorder, and onDsClose event props."
           ],
           "angular": [
-            "Use property bindings for arrays, objects, and anchors and event bindings for dsSelect and dsClose."
+            "Use property bindings for arrays, objects, and anchors and event bindings for dsSelect, dsReorder, and dsClose."
           ]
         },
         "references": [
@@ -4650,6 +4655,10 @@
             "name": "dsClose",
             "detail": "void"
           },
+          {
+            "name": "dsReorder",
+            "detail": "MenuReorderDetail"
+          },
           {
             "name": "dsSelect",
             "detail": "MenuItemData"
@@ -4668,10 +4677,12 @@
       },
       "dependencies": [
         "@ds-mo/ui",
-        "@ds-mo/tokens"
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
       ],
       "componentDependencies": [
         "badge",
+        "icon",
         "swatch-picker",
         "switch",
         "tag",
@@ -7040,6 +7051,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.",
@@ -7065,7 +7077,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."
@@ -7253,6 +7265,10 @@
           {
             "name": "dsOptionAction",
             "detail": "SelectOptionActionDetail"
+          },
+          {
+            "name": "dsOptionSubtextAction",
+            "detail": "SelectOptionSubtextActionDetail"
           }
         ],
         "slots": []
@@ -8622,7 +8638,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, or pagination while retaining ownership of the data query and transformations.",
+          "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": [
@@ -8636,6 +8652,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",
@@ -8647,7 +8665,9 @@
           "pattern:menu-trigger"
         ],
         "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 receive the complete content width inside the component-owned 8px inset, so the application can compose its own control groups and alignment without table-defined leading or trailing zones.",
+          "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.",
           "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.",
@@ -8656,8 +8676,9 @@
           "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, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one full-width composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns all internal layout, controls, labels, filtering behavior, and action handling. 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.",
@@ -8673,21 +8694,22 @@
           "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."
         ],
         "frameworkCaveats": {
           "customElements": [
-            "Assign columns, rows, groups, grouping, sort, selectedRowIds, collapsedGroupIds, pagination, displayedCount, and totalCount through JavaScript properties rather than HTML attribute strings.",
+            "Assign columns, rows, groups, grouping, sort, selectedRowIds, collapsedGroupIds, hiddenColumnIds, columnOrder, pagination, displayedCount, and totalCount through JavaScript properties rather than HTML attribute strings.",
             "When an action cell supplies items, the table opens one shared ds-menu from the Ellipses trigger; dsCellAction fires for the selected command, not for opening or closing the menu.",
+            "When columnCustomizer is enabled, the Preferences trigger opens the same shared ds-menu of reorderable switch rows; toggling a switch or reordering a row emits dsColumnsConfigChange and does not close the menu.",
             "Overflowing text tracks present one shared ds-tooltip with the omitted value. Unlimited wrapping tracks and disabled rows never show it. The tooltip is not linked with aria-describedby because the full string remains in the cell.",
-            "Replace controlled property values in response to dsSortChange, dsGroupCollapseChange, dsSelectionChange, dsLoadMore, dsGroupLoadMore, and dsPaginationChange; route dsRowActivate in the application owner."
+            "Replace controlled property values in response to dsSortChange, dsGroupCollapseChange, dsSelectionChange, dsLoadMore, dsGroupLoadMore, dsPaginationChange, and dsColumnsConfigChange; route dsRowActivate in the application owner. When columnCustomizer is enabled, keep columns as the full catalog and replace hiddenColumnIds and columnOrder from that event."
           ],
           "react": [
             "Pass new array and state-object references when the controlled data or query state changes.",
-            "Apply emitted sort, collapse, selection, action, pagination, or global/group loading detail to application state and perform data transformations in the owning layer."
+            "Apply emitted sort, collapse, selection, action, pagination, column-customizer, or global/group loading detail to application state and perform data transformations in the owning layer."
           ],
           "angular": [
             "Bind complex table inputs as properties and update the controlled values from the corresponding output events.",
@@ -8723,6 +8745,14 @@
             "type": "string[]",
             "required": false
           },
+          "columnCustomizer": {
+            "type": "boolean",
+            "required": false
+          },
+          "columnOrder": {
+            "type": "string[]",
+            "required": false
+          },
           "columns": {
             "type": "TableColumn[]",
             "required": false
@@ -8731,6 +8761,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
@@ -8807,6 +8849,14 @@
             "type": "string | number | undefined",
             "required": false
           },
+          "hiddenColumnIds": {
+            "type": "string[]",
+            "required": false
+          },
+          "infiniteModeLabel": {
+            "type": "string",
+            "required": false
+          },
           "loadIdentity": {
             "type": "string | number",
             "required": false
@@ -8847,6 +8897,10 @@
             "type": "TablePaginationState | null",
             "required": false
           },
+          "paginationModeLabel": {
+            "type": "string",
+            "required": false
+          },
           "resultSummaryLabel": {
             "type": "string",
             "required": false
@@ -8905,6 +8959,14 @@
             "name": "dsCellAction",
             "detail": "TableCellActionDetail"
           },
+          {
+            "name": "dsColumnsConfigChange",
+            "detail": "TableColumnsConfigChangeDetail"
+          },
+          {
+            "name": "dsDataModeChange",
+            "detail": "TableDataModeChangeDetail"
+          },
           {
             "name": "dsGroupCollapseChange",
             "detail": "TableGroupCollapseChangeDetail"
@@ -8949,6 +9011,7 @@
       "componentDependencies": [
         "button-unfilled",
         "checkbox",
+        "divider",
         "empty-state",
         "icon",
         "loader",
@@ -8960,6 +9023,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-menu.d.ts

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, ElementRef, NgZone, EventEmitter } from '@angular/co
 import type { Components } from '@ds-mo/ui/components';
 import type { DsMenuCustomEvent } from '@ds-mo/ui/components';
 import type { MenuItemData as IDsMenuMenuItemData } from '@ds-mo/ui/components';
+import type { MenuReorderDetail as IDsMenuMenuReorderDetail } from '@ds-mo/ui/components';
 import * as i0 from "@angular/core";
 export declare class DsMenu {
     protected z: NgZone;
@@ -10,9 +11,10 @@ export declare class DsMenu {
     dsAfterClose: EventEmitter<DsMenuCustomEvent<void>>;
     dsSelect: EventEmitter<DsMenuCustomEvent<IDsMenuMenuItemData>>;
     dsSwatchSelect: EventEmitter<DsMenuCustomEvent<string>>;
+    dsReorder: EventEmitter<DsMenuCustomEvent<IDsMenuMenuReorderDetail>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsMenu, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsMenu, "ds-menu", never, { "align": { "alias": "align"; "required": false; }; "alignOffset": { "alias": "alignOffset"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlignment": { "alias": "anchorAlignment"; "required": false; }; "anchorId": { "alias": "anchorId"; "required": false; }; "initialFocusVisible": { "alias": "initialFocusVisible"; "required": false; }; "items": { "alias": "items"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "menuWidth": { "alias": "menuWidth"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "open": { "alias": "open"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "side": { "alias": "side"; "required": false; }; "sideOffset": { "alias": "sideOffset"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "dsClose": "dsClose"; "dsAfterClose": "dsAfterClose"; "dsSelect": "dsSelect"; "dsSwatchSelect": "dsSwatchSelect"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsMenu, "ds-menu", never, { "align": { "alias": "align"; "required": false; }; "alignOffset": { "alias": "alignOffset"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlignment": { "alias": "anchorAlignment"; "required": false; }; "anchorId": { "alias": "anchorId"; "required": false; }; "initialFocusVisible": { "alias": "initialFocusVisible"; "required": false; }; "items": { "alias": "items"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "menuWidth": { "alias": "menuWidth"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "open": { "alias": "open"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "side": { "alias": "side"; "required": false; }; "sideOffset": { "alias": "sideOffset"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "dsClose": "dsClose"; "dsAfterClose": "dsAfterClose"; "dsSelect": "dsSelect"; "dsSwatchSelect": "dsSwatchSelect"; "dsReorder": "dsReorder"; }, never, ["*"], true, never>;
 }
 export declare interface DsMenu extends Components.DsMenu {
     dsClose: EventEmitter<DsMenuCustomEvent<void>>;
@@ -25,4 +27,8 @@ export declare interface DsMenu extends Components.DsMenu {
      * Emitted when a generic `swatch-picker` section option is chosen.
      */
     dsSwatchSelect: EventEmitter<DsMenuCustomEvent<string>>;
+    /**
+     * Emitted after a pointer drop or keyboard move; Menu never mutates item order.
+     */
+    dsReorder: EventEmitter<DsMenuCustomEvent<IDsMenuMenuReorderDetail>>;
 }