@ds-mo/ui 14.5.0 → 14.7.0

package/dist/.package-ready.json

@@ -1 +1 @@
-{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.5.0","components":70,"digest":"cd5d573d23ff72ee243fb1d99f3bc3ccd51ba95472ce49798c3d681efd1b47b6","completedAt":"2026-08-19T23:31:42.675Z"}
+{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.7.0","components":70,"digest":"4d1976acb1ef3f2b1b320e810a04676eabe2f5a21144b751a7e6c5a6d98db08d","completedAt":"2026-08-20T23:50:41.765Z"}

package/dist/agent-patterns.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.5.0",
+  "packageVersion": "14.7.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.5.0",
+  "packageVersion": "14.7.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",
@@ -8622,7 +8633,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 an opted-in table-owned column customizer 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": [
@@ -8638,21 +8649,28 @@
           "component:ds-pagination",
           "component:ds-bar-action",
           "component:ds-button-unfilled",
+          "component:ds-menu",
+          "component:ds-tooltip",
           "component:ds-tag",
           "component:ds-icon"
         ],
+        "patterns": [
+          "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 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, or primary-text link controls.",
+          "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.",
           "Incremental loading, newly appended row counts, failures, and end-of-results transitions are announced through a polite status region without replacing visible state. In grouped tables, announcements name the independently loading group.",
           "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 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.",
           "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.",
@@ -8660,7 +8678,7 @@
           "When pagination enables Fit to page on a bounded table, the table proposes the number of complete top-level rows that fit below its column header. Grouped tables count group headers only; member rows never affect capacity. Selecting Fit captures that numeric snapshot. A changed fitIdentity requests one fresh snapshot for a new query shape, while viewport resizing alone does not change the active controlled page size.",
           "Rows opt into complete-row activation with interactive and emit dsRowActivate without owning navigation. Selection paints through the shared selected ::before layer; interactive hover and press paint through the shared ::after layer.",
           "Row selection owns the single sticky start lane. One explicitly sized application column can own the sticky end lane, or the start lane when selection is absent. Each sticky boundary owns one fixed divider and a row-clipped directional shadow that paints into the adjacent scrolling columns only while more inline content remains beyond that edge.",
-          "Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, icon-only, icon-and-text, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Text objects may declare an optional href (and target) on the primary track only; the table renders a native anchor with the shared brand text-action treatment when the URL is safe, and leaves scalars unlinked. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; an optional tertiary track uses the same subdued body-small recipe as secondary. Secondary and tertiary may also be a short list of colorable runs, rendered on one line with the table's middle-dot separator. Dual-primary copy keeps both tracks primary unless explicitly colored and does not gain a tertiary track. Body data cells share 8px outer padding; header and group rows keep their own geometry. Text tracks, including Empty, keep 4px inline padding so copy lines up with column-header labels; Tag and icon-only tracks stay on the 8px cell chrome alone. Icon-and-text cells (`kind: 'icon-text'`) place one md prefix icon beside the same copy stack as a text cell. The icon slot takes 2px padding on every side, then a 2px flex gap before the copy; text-track padding stays on the copy. Omit iconLabel when the glyph is decorative. 20px content (body-medium text, md icon, and the row checkbox) sits in a 24px track so it stays optically aligned with 24px Tag and Action content. Single-track text, selection, tag-only, icon-only, icon-and-text, Action, Empty, Blank, and 1-track Image cells resolve a 40px base contract while two-track cells grow to 62px and three-track cells grow to 84px. Tracks stack with a 2px gap. Keep the same track count in every row of a table or group when those rows should share one height. Tag cells use the inset Tag recipe: md double-inset is a 24px control for tag-only and tag-with-text, while text-with-tag uses sm single-inset at 20px so the second-track pill fills the body-small slot. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled, default to unbordered, and emit row, column, and action identities through dsCellAction. Image cells declare tracks 1, 2, or 3 so the 16:9 bordered preview fills that body-row content box (cell height minus 8px padding) and the column hugs the resulting width; omit tracks for the 1-track recipe, and keep image tracks aligned with the other cells in the table or group. Image cells fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type and variant hooks keep every cell family independently styleable.",
+          "Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, icon-only, icon-and-text, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Text objects may declare an optional href (and target) on the primary track only; the table renders a native anchor with the shared brand text-action treatment when the URL is safe, and leaves scalars unlinked. Standard secondary copy defaults to the secondary foreground and may declare a semantic Text color when the application data carries intent; an optional tertiary track uses the same subdued body-small recipe as secondary. Secondary and tertiary may also be a short list of colorable runs, rendered on one line with the table's middle-dot separator. Dual-primary copy keeps both tracks primary unless explicitly colored and does not gain a tertiary track. Body data cells share 8px outer padding; header and group rows keep their own geometry. Text tracks, including Empty, keep 4px inline padding so copy lines up with column-header labels; Tag and icon-only tracks stay on the 8px cell chrome alone. Icon-and-text cells (`kind: 'icon-text'`) place one md prefix icon beside the same copy stack as a text cell. The icon slot takes 2px padding on every side, then a 2px flex gap before the copy; text-track padding stays on the copy. Omit iconLabel when the glyph is decorative. 20px content (body-medium text, md icon, and the row checkbox) sits in a 24px track so it stays optically aligned with 24px Tag and Action content. Single-track text, selection, tag-only, icon-only, icon-and-text, Action, Empty, Blank, and 1-track Image cells resolve a 40px base contract while two-track cells grow to 62px and three-track cells grow to 84px. Tracks stack with a 2px gap. Wrapping primary on a 1-track cell uses that same rhythm: two wrapped lines share the 62px row and three wrapped lines share the 84px row. Wrapping secondary keeps primary on the first track and consumes later tracks: two secondary lines share the 84px row and three secondary lines share a 106px fourth track. Keep the same track count in every row of a table or group when those rows should share one height. Tag cells use the inset Tag recipe: md double-inset is a 24px control for tag-only and tag-with-text, while text-with-tag uses sm single-inset at 20px so the second-track pill fills the body-small slot. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled, default to unbordered, and emit row, column, and action identities through dsCellAction. When an action cell declares items, that Ellipses trigger opens the shared ds-menu for commands, dividers, inactive rows, and destructive rows instead of emitting on click; choosing a command emits dsCellAction with that item's actionId. Omit items to keep a single-shot control. Image cells declare tracks 1, 2, or 3 so the 16:9 bordered preview fills that body-row content box (cell height minus 8px padding) and the column hugs the resulting width; omit tracks for the 1-track recipe, and keep image tracks aligned with the other cells in the table or group. Image cells fall back to an accessible placeholder when no source is supplied. Empty means the data applies but has no value and renders an em dash with localized assistive text; Blank means the data is not applicable and renders no content. Nullish values remain backward-compatible Empty values. Stable type and variant hooks keep every cell family independently styleable.",
           "The public @ds-mo/ui/table.css export is the authoritative zero-specificity visual recipe. Override its --ds-table-* properties or target its stable element classes for product-specific styling."
         ],
         "responsiveBehavior": [
@@ -8671,16 +8689,19 @@
           "Explicit column sizes establish the horizontal overflow width; unsized columns share remaining space.",
           "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 by default and can opt into wrapping at the column or cell level."
+          "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.",
-            "Replace controlled property values in response to dsSortChange, dsGroupCollapseChange, dsSelectionChange, dsLoadMore, dsGroupLoadMore, and dsPaginationChange; route dsRowActivate in the application owner."
+            "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, 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.",
@@ -8695,6 +8716,10 @@
           {
             "label": "Public visual recipe",
             "path": "src/wc/styles/table.css"
+          },
+          {
+            "label": "Menu trigger composition",
+            "path": "agent/patterns/menu-trigger/pattern.agent.json"
           }
         ]
       },
@@ -8712,6 +8737,14 @@
             "type": "string[]",
             "required": false
           },
+          "columnCustomizer": {
+            "type": "boolean",
+            "required": false
+          },
+          "columnOrder": {
+            "type": "string[]",
+            "required": false
+          },
           "columns": {
             "type": "TableColumn[]",
             "required": false
@@ -8796,6 +8829,10 @@
             "type": "string | number | undefined",
             "required": false
           },
+          "hiddenColumnIds": {
+            "type": "string[]",
+            "required": false
+          },
           "loadIdentity": {
             "type": "string | number",
             "required": false
@@ -8894,6 +8931,10 @@
             "name": "dsCellAction",
             "detail": "TableCellActionDetail"
           },
+          {
+            "name": "dsColumnsConfigChange",
+            "detail": "TableColumnsConfigChangeDetail"
+          },
           {
             "name": "dsGroupCollapseChange",
             "detail": "TableGroupCollapseChangeDetail"
@@ -8941,10 +8982,12 @@
         "empty-state",
         "icon",
         "loader",
+        "menu",
         "pagination",
         "skeleton",
         "tag",
-        "text"
+        "text",
+        "tooltip"
       ]
     },
     {
@@ -9474,12 +9517,13 @@
           "component:ds-button-filled",
           "component:ds-button-unfilled",
           "component:ds-panel-nav",
-          "component:ds-panel-tools"
+          "component:ds-panel-tools",
+          "component:ds-table"
         ],
         "accessibility": [
           "The slotted trigger must have its own accessible name, usually an aria-label that closely matches the visual tooltip label.",
           "Tooltip content is supplementary and non-essential; touch input intentionally does not open it.",
-          "While open, the trigger is linked to the role=tooltip popup with aria-describedby; the relationship is removed when the popup leaves the DOM without disturbing consumer description IDs.",
+          "While open, the trigger is linked to the role=tooltip popup with aria-describedby by default; the relationship is removed when the popup leaves the DOM without disturbing consumer description IDs. Hosts that already expose the full string, such as a truncated table cell, disable that relationship.",
           "Keyboard focus opens the tooltip and Escape dismisses it without moving focus."
         ],
         "states": [
@@ -9487,18 +9531,20 @@
           "An empty or whitespace-only label suppresses the popup while preserving the wrapper.",
           "Only one tooltip remains active globally; warm handoff removes the previous popup before showing the next.",
           "Disconnecting and reinserting the tooltip host rebinds the current slotted trigger.",
+          "A host may present the popup against an external anchor it already owns, without wrapping that trigger or binding hover on it.",
           "The preferred side flips when it cannot fit, then alignment is clamped to viewport padding.",
           "Reduced motion removes enter and exit fades while retaining the final visible or hidden state."
         ],
         "responsiveBehavior": [
           "The portaled popup follows trigger and popup resize, viewport resize, and nested scrolling while open.",
           "Touch users rely on the trigger's accessible and visible context rather than tooltip disclosure.",
-          "Keep labels concise and non-wrapping; use inline text or a larger disclosure component for essential explanation."
+          "Keep labels concise and non-wrapping by default; omitted table cell values may wrap at panel-xs."
         ],
         "frameworkCaveats": {
           "customElements": [
             "Place exactly one trigger element as the component's light-DOM child.",
             "Replacing the slotted trigger rebinds pointer and focus behavior automatically.",
+            "A table or similar host can present the popup against an overflowing text node instead of wrapping that node.",
             "sideOffset, alignOffset, and delay accept numbers or TokoMo CSS values."
           ],
           "react": [
@@ -9537,6 +9583,10 @@
             "type": "number | string",
             "required": false
           },
+          "describedBy": {
+            "type": "boolean",
+            "required": false
+          },
           "label": {
             "type": "string",
             "required": true
@@ -9560,6 +9610,10 @@
           "size": {
             "type": "TooltipSize",
             "required": false
+          },
+          "wrapLabel": {
+            "type": "boolean",
+            "required": false
           }
         },
         "events": [],

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>>;
 }

package/dist/angular/ds-menu.js

@@ -17,11 +17,12 @@ let DsMenu = class DsMenu {
         this.dsAfterClose = new EventEmitter();
         this.dsSelect = new EventEmitter();
         this.dsSwatchSelect = new EventEmitter();
+        this.dsReorder = new EventEmitter();
         c.detach();
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsMenu, 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: DsMenu, isStandalone: true, selector: "ds-menu", inputs: { align: "align", alignOffset: "alignOffset", anchor: "anchor", anchorAlignment: "anchorAlignment", anchorId: "anchorId", initialFocusVisible: "initialFocusVisible", items: "items", menuLabel: "menuLabel", menuWidth: "menuWidth", minWidth: "minWidth", open: "open", sections: "sections", selectionMode: "selectionMode", side: "side", sideOffset: "sideOffset", size: "size" }, outputs: { dsClose: "dsClose", dsAfterClose: "dsAfterClose", dsSelect: "dsSelect", dsSwatchSelect: "dsSwatchSelect" }, 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: DsMenu, isStandalone: true, selector: "ds-menu", inputs: { align: "align", alignOffset: "alignOffset", anchor: "anchor", anchorAlignment: "anchorAlignment", anchorId: "anchorId", initialFocusVisible: "initialFocusVisible", items: "items", menuLabel: "menuLabel", menuWidth: "menuWidth", minWidth: "minWidth", open: "open", sections: "sections", selectionMode: "selectionMode", side: "side", sideOffset: "sideOffset", size: "size" }, outputs: { dsClose: "dsClose", dsAfterClose: "dsAfterClose", dsSelect: "dsSelect", dsSwatchSelect: "dsSwatchSelect", dsReorder: "dsReorder" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsMenu = __decorate([
     ProxyCmp({
@@ -38,7 +39,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: ['align', 'alignOffset', 'anchor', 'anchorAlignment', 'anchorId', 'initialFocusVisible', 'items', 'menuLabel', 'menuWidth', 'minWidth', 'open', 'sections', 'selectionMode', 'side', 'sideOffset', 'size'],
-                    outputs: ['dsClose', 'dsAfterClose', 'dsSelect', 'dsSwatchSelect'],
+                    outputs: ['dsClose', 'dsAfterClose', 'dsSelect', 'dsSwatchSelect', 'dsReorder'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsClose: [{
                 type: Output
@@ -48,4 +49,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Output
             }], dsSwatchSelect: [{
                 type: Output
+            }], dsReorder: [{
+                type: Output
             }] } });

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

@@ -9,6 +9,7 @@ import type { TableGroupLoadMoreDetail as IDsTableTableGroupLoadMoreDetail } fro
 import type { PaginationChangeDetail as IDsTablePaginationChangeDetail } from '@ds-mo/ui/components';
 import type { TableCellActionDetail as IDsTableTableCellActionDetail } from '@ds-mo/ui/components';
 import type { TableRowActivateDetail as IDsTableTableRowActivateDetail } from '@ds-mo/ui/components';
+import type { TableColumnsConfigChangeDetail as IDsTableTableColumnsConfigChangeDetail } from '@ds-mo/ui/components';
 import * as i0 from "@angular/core";
 export declare class DsTable {
     protected z: NgZone;
@@ -21,9 +22,10 @@ export declare class DsTable {
     dsPaginationChange: EventEmitter<DsTableCustomEvent<IDsTablePaginationChangeDetail>>;
     dsCellAction: EventEmitter<DsTableCustomEvent<IDsTableTableCellActionDetail>>;
     dsRowActivate: EventEmitter<DsTableCustomEvent<IDsTableTableRowActivateDetail>>;
+    dsColumnsConfigChange: EventEmitter<DsTableCustomEvent<IDsTableTableColumnsConfigChangeDetail>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsTable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsTable, "ds-table", never, { "caption": { "alias": "caption"; "required": true; }; "captionVisibility": { "alias": "captionVisibility"; "required": false; }; "collapsedGroupIds": { "alias": "collapsedGroupIds"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "dataMode": { "alias": "dataMode"; "required": false; }; "displayedCount": { "alias": "displayedCount"; "required": false; }; "emptyBody": { "alias": "emptyBody"; "required": false; }; "emptyCellLabel": { "alias": "emptyCellLabel"; "required": false; }; "emptyHeading": { "alias": "emptyHeading"; "required": false; }; "endOfResultsLabel": { "alias": "endOfResultsLabel"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorBody": { "alias": "errorBody"; "required": false; }; "errorHeading": { "alias": "errorHeading"; "required": false; }; "fitViewport": { "alias": "fitViewport"; "required": false; }; "groupEndOfResultsLabel": { "alias": "groupEndOfResultsLabel"; "required": false; }; "groupLoadMoreAriaLabel": { "alias": "groupLoadMoreAriaLabel"; "required": false; }; "groupLoadMoreLabel": { "alias": "groupLoadMoreLabel"; "required": false; }; "groupLoadingMoreLabel": { "alias": "groupLoadingMoreLabel"; "required": false; }; "groupRetryLabel": { "alias": "groupRetryLabel"; "required": false; }; "groupRowsLoadedLabel": { "alias": "groupRowsLoadedLabel"; "required": false; }; "grouping": { "alias": "grouping"; "required": false; }; "groups": { "alias": "groups"; "required": false; }; "hasMore": { "alias": "hasMore"; "required": false; }; "height": { "alias": "height"; "required": false; }; "loadIdentity": { "alias": "loadIdentity"; "required": false; }; "loadMoreError": { "alias": "loadMoreError"; "required": false; }; "loadMoreLabel": { "alias": "loadMoreLabel"; "required": false; }; "loadMoreMode": { "alias": "loadMoreMode"; "required": false; }; "loadMoreThreshold": { "alias": "loadMoreThreshold"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingMore": { "alias": "loadingMore"; "required": false; }; "loadingMoreLabel": { "alias": "loadingMoreLabel"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "pagination": { "alias": "pagination"; "required": false; }; "resultSummaryLabel": { "alias": "resultSummaryLabel"; "required": false; }; "retryLabel": { "alias": "retryLabel"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "rowsLoadedLabel": { "alias": "rowsLoadedLabel"; "required": false; }; "scrollLabel": { "alias": "scrollLabel"; "required": false; }; "selectedRowIds": { "alias": "selectedRowIds"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; }; "sort": { "alias": "sort"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "totalCount": { "alias": "totalCount"; "required": false; }; "viewportInsetBlockEnd": { "alias": "viewportInsetBlockEnd"; "required": false; }; "viewportInsetBlockStart": { "alias": "viewportInsetBlockStart"; "required": false; }; }, { "dsSortChange": "dsSortChange"; "dsGroupCollapseChange": "dsGroupCollapseChange"; "dsSelectionChange": "dsSelectionChange"; "dsLoadMore": "dsLoadMore"; "dsGroupLoadMore": "dsGroupLoadMore"; "dsPaginationChange": "dsPaginationChange"; "dsCellAction": "dsCellAction"; "dsRowActivate": "dsRowActivate"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsTable, "ds-table", never, { "caption": { "alias": "caption"; "required": true; }; "captionVisibility": { "alias": "captionVisibility"; "required": false; }; "collapsedGroupIds": { "alias": "collapsedGroupIds"; "required": false; }; "columnCustomizer": { "alias": "columnCustomizer"; "required": false; }; "columnOrder": { "alias": "columnOrder"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "dataMode": { "alias": "dataMode"; "required": false; }; "displayedCount": { "alias": "displayedCount"; "required": false; }; "emptyBody": { "alias": "emptyBody"; "required": false; }; "emptyCellLabel": { "alias": "emptyCellLabel"; "required": false; }; "emptyHeading": { "alias": "emptyHeading"; "required": false; }; "endOfResultsLabel": { "alias": "endOfResultsLabel"; "required": false; }; "error": { "alias": "error"; "required": false; }; "errorBody": { "alias": "errorBody"; "required": false; }; "errorHeading": { "alias": "errorHeading"; "required": false; }; "fitViewport": { "alias": "fitViewport"; "required": false; }; "groupEndOfResultsLabel": { "alias": "groupEndOfResultsLabel"; "required": false; }; "groupLoadMoreAriaLabel": { "alias": "groupLoadMoreAriaLabel"; "required": false; }; "groupLoadMoreLabel": { "alias": "groupLoadMoreLabel"; "required": false; }; "groupLoadingMoreLabel": { "alias": "groupLoadingMoreLabel"; "required": false; }; "groupRetryLabel": { "alias": "groupRetryLabel"; "required": false; }; "groupRowsLoadedLabel": { "alias": "groupRowsLoadedLabel"; "required": false; }; "grouping": { "alias": "grouping"; "required": false; }; "groups": { "alias": "groups"; "required": false; }; "hasMore": { "alias": "hasMore"; "required": false; }; "height": { "alias": "height"; "required": false; }; "hiddenColumnIds": { "alias": "hiddenColumnIds"; "required": false; }; "loadIdentity": { "alias": "loadIdentity"; "required": false; }; "loadMoreError": { "alias": "loadMoreError"; "required": false; }; "loadMoreLabel": { "alias": "loadMoreLabel"; "required": false; }; "loadMoreMode": { "alias": "loadMoreMode"; "required": false; }; "loadMoreThreshold": { "alias": "loadMoreThreshold"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "loadingMore": { "alias": "loadingMore"; "required": false; }; "loadingMoreLabel": { "alias": "loadingMoreLabel"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "pagination": { "alias": "pagination"; "required": false; }; "resultSummaryLabel": { "alias": "resultSummaryLabel"; "required": false; }; "retryLabel": { "alias": "retryLabel"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "rowsLoadedLabel": { "alias": "rowsLoadedLabel"; "required": false; }; "scrollLabel": { "alias": "scrollLabel"; "required": false; }; "selectedRowIds": { "alias": "selectedRowIds"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; }; "sort": { "alias": "sort"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "totalCount": { "alias": "totalCount"; "required": false; }; "viewportInsetBlockEnd": { "alias": "viewportInsetBlockEnd"; "required": false; }; "viewportInsetBlockStart": { "alias": "viewportInsetBlockStart"; "required": false; }; }, { "dsSortChange": "dsSortChange"; "dsGroupCollapseChange": "dsGroupCollapseChange"; "dsSelectionChange": "dsSelectionChange"; "dsLoadMore": "dsLoadMore"; "dsGroupLoadMore": "dsGroupLoadMore"; "dsPaginationChange": "dsPaginationChange"; "dsCellAction": "dsCellAction"; "dsRowActivate": "dsRowActivate"; "dsColumnsConfigChange": "dsColumnsConfigChange"; }, never, ["*"], true, never>;
 }
 export declare interface DsTable extends Components.DsTable {
     dsSortChange: EventEmitter<DsTableCustomEvent<IDsTableTableSortChangeDetail>>;
@@ -34,4 +36,5 @@ export declare interface DsTable extends Components.DsTable {
     dsPaginationChange: EventEmitter<DsTableCustomEvent<IDsTablePaginationChangeDetail>>;
     dsCellAction: EventEmitter<DsTableCustomEvent<IDsTableTableCellActionDetail>>;
     dsRowActivate: EventEmitter<DsTableCustomEvent<IDsTableTableRowActivateDetail>>;
+    dsColumnsConfigChange: EventEmitter<DsTableCustomEvent<IDsTableTableColumnsConfigChangeDetail>>;
 }

package/dist/angular/ds-table.js

@@ -21,16 +21,17 @@ let DsTable = class DsTable {
         this.dsPaginationChange = new EventEmitter();
         this.dsCellAction = new EventEmitter();
         this.dsRowActivate = new EventEmitter();
+        this.dsColumnsConfigChange = new EventEmitter();
         c.detach();
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsTable, 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: DsTable, isStandalone: true, selector: "ds-table", inputs: { caption: "caption", captionVisibility: "captionVisibility", collapsedGroupIds: "collapsedGroupIds", columns: "columns", dataMode: "dataMode", displayedCount: "displayedCount", emptyBody: "emptyBody", emptyCellLabel: "emptyCellLabel", emptyHeading: "emptyHeading", endOfResultsLabel: "endOfResultsLabel", error: "error", errorBody: "errorBody", errorHeading: "errorHeading", fitViewport: "fitViewport", groupEndOfResultsLabel: "groupEndOfResultsLabel", groupLoadMoreAriaLabel: "groupLoadMoreAriaLabel", groupLoadMoreLabel: "groupLoadMoreLabel", groupLoadingMoreLabel: "groupLoadingMoreLabel", groupRetryLabel: "groupRetryLabel", groupRowsLoadedLabel: "groupRowsLoadedLabel", grouping: "grouping", groups: "groups", hasMore: "hasMore", height: "height", loadIdentity: "loadIdentity", loadMoreError: "loadMoreError", loadMoreLabel: "loadMoreLabel", loadMoreMode: "loadMoreMode", loadMoreThreshold: "loadMoreThreshold", loading: "loading", loadingMore: "loadingMore", loadingMoreLabel: "loadingMoreLabel", maxHeight: "maxHeight", pagination: "pagination", resultSummaryLabel: "resultSummaryLabel", retryLabel: "retryLabel", rows: "rows", rowsLoadedLabel: "rowsLoadedLabel", scrollLabel: "scrollLabel", selectedRowIds: "selectedRowIds", selectionMode: "selectionMode", skeletonRows: "skeletonRows", sort: "sort", stickyHeader: "stickyHeader", totalCount: "totalCount", viewportInsetBlockEnd: "viewportInsetBlockEnd", viewportInsetBlockStart: "viewportInsetBlockStart" }, outputs: { dsSortChange: "dsSortChange", dsGroupCollapseChange: "dsGroupCollapseChange", dsSelectionChange: "dsSelectionChange", dsLoadMore: "dsLoadMore", dsGroupLoadMore: "dsGroupLoadMore", dsPaginationChange: "dsPaginationChange", dsCellAction: "dsCellAction", dsRowActivate: "dsRowActivate" }, 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: DsTable, isStandalone: true, selector: "ds-table", inputs: { caption: "caption", captionVisibility: "captionVisibility", collapsedGroupIds: "collapsedGroupIds", columnCustomizer: "columnCustomizer", columnOrder: "columnOrder", columns: "columns", dataMode: "dataMode", displayedCount: "displayedCount", emptyBody: "emptyBody", emptyCellLabel: "emptyCellLabel", emptyHeading: "emptyHeading", endOfResultsLabel: "endOfResultsLabel", error: "error", errorBody: "errorBody", errorHeading: "errorHeading", fitViewport: "fitViewport", groupEndOfResultsLabel: "groupEndOfResultsLabel", groupLoadMoreAriaLabel: "groupLoadMoreAriaLabel", groupLoadMoreLabel: "groupLoadMoreLabel", groupLoadingMoreLabel: "groupLoadingMoreLabel", groupRetryLabel: "groupRetryLabel", groupRowsLoadedLabel: "groupRowsLoadedLabel", grouping: "grouping", groups: "groups", hasMore: "hasMore", height: "height", hiddenColumnIds: "hiddenColumnIds", loadIdentity: "loadIdentity", loadMoreError: "loadMoreError", loadMoreLabel: "loadMoreLabel", loadMoreMode: "loadMoreMode", loadMoreThreshold: "loadMoreThreshold", loading: "loading", loadingMore: "loadingMore", loadingMoreLabel: "loadingMoreLabel", maxHeight: "maxHeight", pagination: "pagination", resultSummaryLabel: "resultSummaryLabel", retryLabel: "retryLabel", rows: "rows", rowsLoadedLabel: "rowsLoadedLabel", scrollLabel: "scrollLabel", selectedRowIds: "selectedRowIds", selectionMode: "selectionMode", skeletonRows: "skeletonRows", sort: "sort", stickyHeader: "stickyHeader", totalCount: "totalCount", viewportInsetBlockEnd: "viewportInsetBlockEnd", viewportInsetBlockStart: "viewportInsetBlockStart" }, outputs: { dsSortChange: "dsSortChange", dsGroupCollapseChange: "dsGroupCollapseChange", dsSelectionChange: "dsSelectionChange", dsLoadMore: "dsLoadMore", dsGroupLoadMore: "dsGroupLoadMore", dsPaginationChange: "dsPaginationChange", dsCellAction: "dsCellAction", dsRowActivate: "dsRowActivate", dsColumnsConfigChange: "dsColumnsConfigChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsTable = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsTable,
-        inputs: ['caption', 'captionVisibility', 'collapsedGroupIds', 'columns', 'dataMode', 'displayedCount', 'emptyBody', 'emptyCellLabel', 'emptyHeading', 'endOfResultsLabel', 'error', 'errorBody', 'errorHeading', 'fitViewport', 'groupEndOfResultsLabel', 'groupLoadMoreAriaLabel', 'groupLoadMoreLabel', 'groupLoadingMoreLabel', 'groupRetryLabel', 'groupRowsLoadedLabel', 'grouping', 'groups', 'hasMore', 'height', 'loadIdentity', 'loadMoreError', 'loadMoreLabel', 'loadMoreMode', 'loadMoreThreshold', 'loading', 'loadingMore', 'loadingMoreLabel', 'maxHeight', 'pagination', 'resultSummaryLabel', 'retryLabel', 'rows', 'rowsLoadedLabel', 'scrollLabel', 'selectedRowIds', 'selectionMode', 'skeletonRows', 'sort', 'stickyHeader', 'totalCount', 'viewportInsetBlockEnd', 'viewportInsetBlockStart']
+        inputs: ['caption', 'captionVisibility', 'collapsedGroupIds', 'columnCustomizer', 'columnOrder', 'columns', 'dataMode', 'displayedCount', 'emptyBody', 'emptyCellLabel', 'emptyHeading', 'endOfResultsLabel', 'error', 'errorBody', 'errorHeading', 'fitViewport', 'groupEndOfResultsLabel', 'groupLoadMoreAriaLabel', 'groupLoadMoreLabel', 'groupLoadingMoreLabel', 'groupRetryLabel', 'groupRowsLoadedLabel', 'grouping', 'groups', 'hasMore', 'height', 'hiddenColumnIds', 'loadIdentity', 'loadMoreError', 'loadMoreLabel', 'loadMoreMode', 'loadMoreThreshold', 'loading', 'loadingMore', 'loadingMoreLabel', 'maxHeight', 'pagination', 'resultSummaryLabel', 'retryLabel', 'rows', 'rowsLoadedLabel', 'scrollLabel', 'selectedRowIds', 'selectionMode', 'skeletonRows', 'sort', 'stickyHeader', 'totalCount', 'viewportInsetBlockEnd', 'viewportInsetBlockStart']
     })
 ], DsTable);
 export { DsTable };
@@ -41,8 +42,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: [{ name: 'caption', required: true }, 'captionVisibility', 'collapsedGroupIds', 'columns', 'dataMode', 'displayedCount', 'emptyBody', 'emptyCellLabel', 'emptyHeading', 'endOfResultsLabel', 'error', 'errorBody', 'errorHeading', 'fitViewport', 'groupEndOfResultsLabel', 'groupLoadMoreAriaLabel', 'groupLoadMoreLabel', 'groupLoadingMoreLabel', 'groupRetryLabel', 'groupRowsLoadedLabel', 'grouping', 'groups', 'hasMore', 'height', 'loadIdentity', 'loadMoreError', 'loadMoreLabel', 'loadMoreMode', 'loadMoreThreshold', 'loading', 'loadingMore', 'loadingMoreLabel', 'maxHeight', 'pagination', 'resultSummaryLabel', 'retryLabel', 'rows', 'rowsLoadedLabel', 'scrollLabel', 'selectedRowIds', 'selectionMode', 'skeletonRows', 'sort', 'stickyHeader', 'totalCount', 'viewportInsetBlockEnd', 'viewportInsetBlockStart'],
-                    outputs: ['dsSortChange', 'dsGroupCollapseChange', 'dsSelectionChange', 'dsLoadMore', 'dsGroupLoadMore', 'dsPaginationChange', 'dsCellAction', 'dsRowActivate'],
+                    inputs: [{ name: 'caption', required: true }, 'captionVisibility', 'collapsedGroupIds', 'columnCustomizer', 'columnOrder', 'columns', 'dataMode', 'displayedCount', 'emptyBody', 'emptyCellLabel', 'emptyHeading', 'endOfResultsLabel', 'error', 'errorBody', 'errorHeading', 'fitViewport', 'groupEndOfResultsLabel', 'groupLoadMoreAriaLabel', 'groupLoadMoreLabel', 'groupLoadingMoreLabel', 'groupRetryLabel', 'groupRowsLoadedLabel', 'grouping', 'groups', 'hasMore', 'height', 'hiddenColumnIds', 'loadIdentity', 'loadMoreError', 'loadMoreLabel', 'loadMoreMode', 'loadMoreThreshold', 'loading', 'loadingMore', 'loadingMoreLabel', 'maxHeight', 'pagination', 'resultSummaryLabel', 'retryLabel', 'rows', 'rowsLoadedLabel', 'scrollLabel', 'selectedRowIds', 'selectionMode', 'skeletonRows', 'sort', 'stickyHeader', 'totalCount', 'viewportInsetBlockEnd', 'viewportInsetBlockStart'],
+                    outputs: ['dsSortChange', 'dsGroupCollapseChange', 'dsSelectionChange', 'dsLoadMore', 'dsGroupLoadMore', 'dsPaginationChange', 'dsCellAction', 'dsRowActivate', 'dsColumnsConfigChange'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsSortChange: [{
                 type: Output
@@ -60,4 +61,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 type: Output
             }], dsRowActivate: [{
                 type: Output
+            }], dsColumnsConfigChange: [{
+                type: Output
             }] } });

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

@@ -6,7 +6,7 @@ export declare class DsTooltip {
     protected el: HTMLDsTooltipElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsTooltip, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsTooltip, "ds-tooltip", never, { "align": { "alias": "align"; "required": false; }; "alignOffset": { "alias": "alignOffset"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "label": { "alias": "label"; "required": true; }; "shortcutKey": { "alias": "shortcutKey"; "required": false; }; "shortcutKeyPosition": { "alias": "shortcutKeyPosition"; "required": false; }; "side": { "alias": "side"; "required": false; }; "sideOffset": { "alias": "sideOffset"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsTooltip, "ds-tooltip", never, { "align": { "alias": "align"; "required": false; }; "alignOffset": { "alias": "alignOffset"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "describedBy": { "alias": "describedBy"; "required": false; }; "label": { "alias": "label"; "required": true; }; "shortcutKey": { "alias": "shortcutKey"; "required": false; }; "shortcutKeyPosition": { "alias": "shortcutKeyPosition"; "required": false; }; "side": { "alias": "side"; "required": false; }; "sideOffset": { "alias": "sideOffset"; "required": false; }; "size": { "alias": "size"; "required": false; }; "wrapLabel": { "alias": "wrapLabel"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export declare interface DsTooltip extends Components.DsTooltip {
 }