@ds-mo/ui 15.5.1 → 15.7.0

package/dist/mcp-data/registry/registry.json

@@ -12,7 +12,7 @@
     "themeSetup": "Set data-theme=\"dark\" on <html> for dark mode. Light is default.",
     "peerDependencies": {
       "required": [
-        "@ds-mo/tokens ^6.6.1",
+        "@ds-mo/tokens ^6.7.0",
         "@ds-mo/icons ^8.1.1"
       ],
       "optional": [],
@@ -6062,9 +6062,9 @@
             "Borderless toolbar compositions omit resting control borders while retaining focus and interaction feedback.",
             "Apply-required filtering stages edits locally, including match mode. Clear immediately clears all filters and discards pending edits. The footer appears when filters are selected or applied; Apply stays in place and inactive without pending changes; applying emits controlled changes. Closing discards unapplied edits.",
             "Embedded presentation delegates its active tab, draft state, Apply, Reset, and dismissal to the owning panel; it renders vertical filter and grouping content without a popup trigger.",
-            "Customize builds its catalog from fields. catalogReorderable defaults to true for a table: rows drag to reorder and the last visible entry stays locked. Pass false for a show-and-hide catalog, where rows are switches with no drag handle and every entry may be hidden.",
+            "Customize builds its catalog from fields. catalogReorderable defaults to true for a table: each row independently controls visibility and left-side pinning, pinned and unpinned sections constrain drag reorder to their own partition, and the last visible entry stays locked. Pass false for a show-and-hide catalog, where rows are switches with no drag handle or pin action and every entry may be hidden.",
             "catalogHeader overrides the catalog section header, which otherwise reads Columns whenever customizeOptions supply a second section. customizeLabel names the Customize menu, so a non-table surface can announce Customize view rather than Customize table.",
-            "Both catalog modes emit dsFieldsConfigChange with hiddenFieldIds and fieldOrder, so a consumer that never reorders can ignore fieldOrder and keep using hiddenFieldIds."
+            "Both catalog modes emit dsFieldsConfigChange with hiddenFieldIds, fieldOrder, and pinnedFieldIds. Toggle-only catalogs preserve pin state unchanged; table catalogs report pin and partitioned order intent."
           ],
           "accessibility": [
             "An icon-only Preferences trigger opens a named dialog. TabGroup owns section keyboard navigation; Escape and outside activation dismiss, returning focus to the trigger."
@@ -6176,6 +6176,10 @@
             "type": "FilterMenuMatchModes",
             "required": false
           },
+          "pinnedFieldIds": {
+            "type": "string[]",
+            "required": false
+          },
           "sort": {
             "type": "DataSortState | null",
             "required": false
@@ -9330,7 +9334,7 @@
     {
       "name": "menu",
       "title": "Menu",
-      "description": "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.",
+      "description": "Anchored action menu with flat commands, grouped sections, single-selection choices, supplemental notification dots or trailing tags, prefix icons, reorderable rows, switches, independent trailing actions, separate trailing toggles, and destructive actions.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -9341,7 +9345,7 @@
         "intent": {
           "audience": "general",
           "status": "stable",
-          "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.",
+          "summary": "Anchored action menu with flat commands, grouped sections, single-selection choices, supplemental notification dots or trailing tags, prefix icons, reorderable rows, switches, independent trailing actions, separate trailing toggles, 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, prefix icons, reorderable switch or command rows, or destructive treatment."
@@ -9388,7 +9392,9 @@
             "When the anchor is inside an open shadow tree, pass its HTMLElement through anchor. Outside activation, focus return, and forward Tab continuation follow the composed tree across that 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.",
-            "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.",
+            "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. Use reorderHandleInactive to retain quaternary Drag dots without exposing drag interaction when a temporarily fixed row still needs visual alignment.",
+            "A row may append one separately focusable icon toggle after a decorative tertiary divider. The popup uses non-modal dialog semantics for this composite content, the row retains its primary command or visibility toggle, and dsItemToggle reports the requested controlled state without closing the surface.",
+            "A composite row may expose independent trailing icon actions without making its non-actionable row surface appear clickable. Active Drag handles and trailing actions own separate inset hover and pressed feedback. Each action has its own accessible name, does not use aria-pressed, and reports its stable action identity through dsItemToggle without closing the surface.",
             "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": [
@@ -9402,7 +9408,7 @@
             "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 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.",
+            "Reorderable rows use the Drag prefix and ignore icon. Active drag handles inherit the choice-popup secondary foreground; inactive drag handles use quaternary foreground. When any row in a section has an icon, an active handle, or an inactive handle, the remaining rows get a spacer so labels align.",
             "Embedded mode renders the same controlled content inside a parent-owned surface; the parent owns positioning, initial focus, Escape, Tab exit, and dismissal."
           ],
           "responsiveBehavior": [
@@ -9416,13 +9422,13 @@
           "frameworkCaveats": {
             "customElements": [
               "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."
+              "Handle dsReorder by replacing the items or section items with the emitted items array; Menu never mutates order. Handle dsItemToggle by replacing either the controlled trailingToggle state or the requested trailingActions state without changing unrelated row state."
             ],
             "react": [
-              "Pass arrays and objects as wrapper props and handle generated onDsSelect, onDsReorder, and onDsClose event props."
+              "Pass arrays and objects as wrapper props and handle generated onDsSelect, onDsItemToggle, onDsReorder, and onDsClose event props."
             ],
             "angular": [
-              "Use property bindings for arrays, objects, and anchors and event bindings for dsSelect, dsReorder, and dsClose."
+              "Use property bindings for arrays, objects, and anchors and event bindings for dsSelect, dsItemToggle, dsReorder, and dsClose."
             ]
           },
           "references": [
@@ -9548,6 +9554,10 @@
             "name": "dsClose",
             "detail": "void"
           },
+          {
+            "name": "dsItemToggle",
+            "detail": "MenuItemToggleDetail"
+          },
           {
             "name": "dsReorder",
             "detail": "MenuReorderDetail"
@@ -9576,6 +9586,7 @@
       ],
       "registryDependencies": [
         "badge",
+        "button-unfilled",
         "icon",
         "swatch-picker",
         "switch",
@@ -10966,6 +10977,155 @@
         "tooltip"
       ]
     },
+    {
+      "name": "navigation-tab-group",
+      "title": "NavigationTabGroup",
+      "description": "Outset horizontal tab group for switching adjacent local panels on basic application surfaces.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/navigation-tab-group",
+        "source": "src/wc/components/NavigationTabGroup/NavigationTabGroup.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "Outset horizontal tab group for switching adjacent local panels on basic application surfaces.",
+          "useWhen": [
+            "Adjacent local panels need a prominent navigation row with full control-height selected tabs.",
+            "A horizontal tab row has room for an outset shell rather than needing to align beside compact controls."
+          ],
+          "avoidWhen": [
+            "The tab row must sit inline with ordinary controls; use TabGroup's compact segmented presentation instead.",
+            "The row sits on bold, strong, media, inverted, or other specialized surfaces; this treatment is intended for basic application backgrounds.",
+            "The choices navigate application routes rather than switching local panels; use PanelNav or BarNav."
+          ],
+          "alternatives": [
+            {
+              "when": "A compact selector must align beside other controls or support specialized surface contexts.",
+              "component": "component:ds-tab-group",
+              "reason": "TabGroup provides control-height segmented chrome and surface-aware selection."
+            },
+            {
+              "when": "The choices are application destinations rather than local panels.",
+              "component": "component:ds-panel-nav",
+              "reason": "PanelNav owns application navigation semantics and route selection."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-text",
+            "component:ds-icon"
+          ],
+          "accessibility": [
+            "Provide an accessible name for the delegated tab list with aria-label or aria-labelledby.",
+            "TabGroup owns tab semantics, roving focus, arrow-key selection, and inactive-tab behavior; the navigation wrapper must not create a second tab or event stream.",
+            "Keep the selected local panel synchronized with dsChange and connect each tab to its panel when panels are present."
+          ],
+          "states": [
+            "The parent owns which adjacent panel is visible; user activation updates the mutable selected value and emits dsChange once through the wrapper.",
+            "The selected tab uses the normal control-density height and primary surface with medium elevation inside an outset, padded shell.",
+            "The navigation treatment delegates its tab items, selection, focus, and keyboard behavior to TabGroup rather than maintaining a parallel implementation."
+          ],
+          "responsiveBehavior": [
+            "The group stays on one horizontal row; choose the control density and bounded width to fit the available layout.",
+            "Hug follows content width and fill distributes selectable tabs evenly across a definite parent width."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Assign tabs as a JavaScript property and keep the selected panel synchronized with dsChange."
+            ],
+            "react": [
+              "Pass tabs as an array through the generated wrapper and handle onDsChange to update the visible panel."
+            ],
+            "vue": [
+              "Use v-model for the selected value and pass tabs as a property-bound array."
+            ],
+            "angular": [
+              "Bind tabs and value as properties and handle dsChange to update the visible panel."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook examples",
+              "path": "src/wc/components/NavigationTabGroup/NavigationTabGroup.stories.ts"
+            },
+            {
+              "label": "Rendered behavior and geometry",
+              "path": "tests/e2e/navigation-tab-group.spec.ts"
+            }
+          ],
+          "styling": {
+            "rationale": "The component owns its outset shell and selected-tab treatment through TabGroup's shared tab anatomy; applications own the surrounding basic surface and panel layout.",
+            "protected": [
+              {
+                "properties": [
+                  "height",
+                  "padding",
+                  "gap",
+                  "border-radius",
+                  "background",
+                  "border",
+                  "box-shadow"
+                ],
+                "reason": "The shell and selected tab form one density-specific navigation recipe; choose size and width instead of restyling nested tabs.",
+                "props": [
+                  "size",
+                  "width"
+                ]
+              }
+            ],
+            "customProperties": []
+          }
+        },
+        "props": {
+          "ariaLabel": {
+            "type": "string | null",
+            "required": false
+          },
+          "ariaLabelledby": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "size": {
+            "type": "TabGroupSize",
+            "required": false
+          },
+          "tabs": {
+            "type": "TabGroupItem[]",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          },
+          "width": {
+            "type": "TabGroupWidth",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "string"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-navigation-tab-group",
+          "react": "DsNavigationTabGroup",
+          "vue": "DsNavigationTabGroup",
+          "angular": "DsNavigationTabGroup"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "tab-group"
+      ]
+    },
     {
       "name": "pagination",
       "title": "Pagination",
@@ -13305,6 +13465,173 @@
         "tooltip"
       ]
     },
+    {
+      "name": "select-toggle",
+      "title": "SelectToggle",
+      "description": "Compact cycling choice control with a vertical position indicator.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/select-toggle",
+        "source": "src/wc/components/SelectToggle/SelectToggle.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "Compact cycling choice control with a vertical position indicator.",
+          "useWhen": [
+            "Two or three local view modes should cycle through one compact button without opening a popup.",
+            "The current choice should update its label and/or icon while a small vertical dot indicator shows its position."
+          ],
+          "avoidWhen": [
+            "The full choice set must remain visible at once; use TabGroup instead.",
+            "The user must inspect or search more than three options; use Select instead.",
+            "The value must participate in native form submission; this initial component is a local cycling control, not a form-associated select."
+          ],
+          "alternatives": [
+            {
+              "when": "Every choice should be visible and individually selectable.",
+              "component": "component:ds-tab-group",
+              "reason": "TabGroup exposes all choices and owns segmented keyboard selection."
+            },
+            {
+              "when": "The option list exceeds three choices or needs a dropdown.",
+              "component": "component:ds-select",
+              "reason": "Select provides a popup and the complete form-select contract."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-text",
+            "component:ds-icon"
+          ],
+          "accessibility": [
+            "A single native button owns focus and activation by pointer, Enter, or Space; the dots are decorative and hidden from assistive technology.",
+            "Each option supplies a nonempty label, including icon-only choices. The button name announces the current label, position, and next choice; aria-label adds stable context.",
+            "An inactive button is natively disabled. Do not use aria-pressed because this is a multi-choice cycle, not a binary toggle."
+          ],
+          "states": [
+            "The application supplies exactly two or three uniquely valued options and may set value; invalid values resolve to the first choice without emitting a user-change event.",
+            "Activation advances to the next choice, wraps after the last, updates the mutable value, and emits dsChange once with the next value.",
+            "Variant selects label, icon, or icon-label content; the trailing slot scales with control density and displays the same number of vertical dots as choices.",
+            "Both treatments use transparent unfilled chrome; hasBorder removes only the inset stroke while preserving control geometry."
+          ],
+          "responsiveBehavior": [
+            "Hug follows the current content; fill uses the parent width and truncates a long label without moving the trailing indicator.",
+            "When collapseLabel is enabled in a table caption or data toolbar narrower than 900px, icon-label choices display only the icon while preserving the changing accessible name. Explicit icon and label variants are unchanged.",
+            "Small, medium, and large use shared control-density heights and matching dot-slot geometry."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Assign options as a JavaScript property and listen for dsChange to observe user cycling."
+            ],
+            "react": [
+              "Pass options as an array and handle onDsChange to observe user cycling."
+            ],
+            "vue": [
+              "Bind options as an array and handle dsChange to update application state."
+            ],
+            "angular": [
+              "Bind options as an array and handle dsChange to update application state."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook examples",
+              "path": "src/wc/components/SelectToggle/SelectToggle.stories.ts"
+            },
+            {
+              "label": "Rendered behavior and geometry",
+              "path": "tests/e2e/select-toggle.spec.ts"
+            }
+          ],
+          "styling": {
+            "rationale": "The component owns one density-sized unfilled button, changing choice content, and a fixed trailing position indicator; applications own surrounding layout and the choice data.",
+            "protected": [
+              {
+                "properties": [
+                  "height",
+                  "padding",
+                  "gap",
+                  "border-radius",
+                  "background",
+                  "border",
+                  "color"
+                ],
+                "reason": "Control density and the indicator slot stay aligned across the supported variants.",
+                "props": [
+                  "size",
+                  "variant",
+                  "width",
+                  "hasBorder"
+                ]
+              }
+            ],
+            "customProperties": []
+          }
+        },
+        "props": {
+          "ariaLabel": {
+            "type": "string | null",
+            "required": false
+          },
+          "collapseLabel": {
+            "type": "boolean",
+            "required": false
+          },
+          "hasBorder": {
+            "type": "boolean",
+            "required": false
+          },
+          "isInactive": {
+            "type": "boolean",
+            "required": false
+          },
+          "options": {
+            "type": "SelectToggleOption[]",
+            "required": false
+          },
+          "size": {
+            "type": "SelectToggleSize",
+            "required": false
+          },
+          "value": {
+            "type": "string",
+            "required": false
+          },
+          "variant": {
+            "type": "SelectToggleVariant",
+            "required": false
+          },
+          "width": {
+            "type": "ControlWidth",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsChange",
+            "detail": "string"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-select-toggle",
+          "react": "DsSelectToggle",
+          "vue": "DsSelectToggle",
+          "angular": "DsSelectToggle"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
+      ],
+      "registryDependencies": [
+        "icon",
+        "text"
+      ]
+    },
     {
       "name": "setting-row-checkbox",
       "title": "SettingRowCheckbox",
@@ -14543,7 +14870,8 @@
             "Horizontal Slider fills the width supplied by its parent; the parent chooses an appropriate readable track length.",
             "Vertical Slider owns a token-based default length that may be overridden with --ds-slider-vertical-length in layout-specific compositions.",
             "Use md in ordinary forms and sm or xs only when the surrounding control density uses the same recipe.",
-            "Track thickness scales with density. The unfilled track has a neutral border, the filled range uses brand color, and the thumb uses the primary surface with subtle elevation.",
+            "Track thickness scales with density. The half-rounded unfilled track uses a faint-neutral background and tertiary border, and the filled range uses brand color. The round thumb layers a track-sized bold-brand orb with a tertiary inset border over a larger transparent, blurred, medium-elevation circle.",
+            "Edge alignment places the inner orb edge at each full-width rail endpoint while the transparent outer circle overhangs; center alignment places the orb center at inset rail endpoints.",
             "Horizontal value direction is left-to-right; the design system does not author RTL-specific component behavior."
           ],
           "frameworkCaveats": {
@@ -14957,7 +15285,7 @@
             "Activation updates checked immediately and emits dsChange with the new boolean value.",
             "The initial checked value is the form-reset baseline; unchecked switches submit nothing unless uncheckedValue is provided.",
             "Sizes are lg 40×24 with a 16px thumb and 4px body inset, md 32×20 with a 12px thumb and 4px inset, sm 24×16 with a 10px thumb and 3px inset, and xs 20×12 with an 8px thumb and 2px inset.",
-            "Unchecked uses a transparent track with a density-specific tertiary-foreground inset stroke and a solid tertiary-foreground thumb without a border. Checked uses a brand track and primary-background thumb with no strokes.",
+            "Unchecked uses a faint-neutral track with a density-specific tertiary-border inset stroke and a primary-background thumb with medium elevation. Checked uses a brand track with the same default tertiary-border inset stroke and elevated primary-background thumb.",
             "Presentation mode removes switch semantics, focus, interaction, and form submission while retaining the checked visual."
           ],
           "responsiveBehavior": [
@@ -15118,6 +15446,7 @@
             "A tab set needs concise labels, icons, or icon-label content with optional supplemental notification dots."
           ],
           "avoidWhen": [
+            "The group needs an outset shell around full-height control-sized tabs for local panel navigation; use NavigationTabGroup instead.",
             "The choices navigate application routes; use PanelNav or BarNav instead.",
             "The choices belong in a vertical panel or card side rail; use PanelSubNav instead.",
             "The choices are temporary commands or contextual options; use Menu instead.",
@@ -15125,6 +15454,11 @@
             "No enabled tab can remain selected while enabled choices exist."
           ],
           "alternatives": [
+            {
+              "when": "Local panel tabs need a roomy navigation shell rather than compact control-height chrome.",
+              "component": "component:ds-navigation-tab-group",
+              "reason": "NavigationTabGroup preserves tab behavior while giving selected tabs the full control-density height and an elevated primary surface."
+            },
             {
               "when": "Local views need persistent vertical side-rail navigation.",
               "component": "component:ds-panel-sub-nav",
@@ -15262,7 +15596,7 @@
             "required": false
           },
           "presentation": {
-            "type": "'segmented' | 'tabs'",
+            "type": "'segmented' | 'tabs' | 'navigation'",
             "required": false
           },
           "size": {
@@ -15310,7 +15644,7 @@
     {
       "name": "table",
       "title": "Table",
-      "description": "Semantic, controlled data table with durable visual primitives for cell geometry, wrapping multiple-Tag cells, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
+      "description": "Semantic, controlled data table with contained or edge-to-edge chrome, durable visual primitives for cell geometry, wrapping multiple-Tag cells, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -15321,11 +15655,12 @@
         "intent": {
           "audience": "general",
           "status": "stable",
-          "summary": "Semantic, controlled data table with durable visual primitives for cell geometry, wrapping multiple-Tag cells, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
+          "summary": "Semantic, controlled data table with contained or edge-to-edge chrome, durable visual primitives for cell geometry, wrapping multiple-Tag cells, grouping, sorting, multi-selection, sticky overflow, incremental loading, top-level pagination, and optional row virtualization.",
           "useWhen": [
             "A structured dataset needs native row and column relationships, optional one-level grouping, or comparable values across records.",
             "An application needs controlled sorting, loaded-row selection, infinite loading, pagination, virtual row recycling, 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."
+            "A product table needs a token-backed recipe whose individual header, group, row, cell, selection, state, and load-more layers remain easy to restyle.",
+            "A full-bleed page needs edge-to-edge toolbar and footer surfaces around an inset data frame with a tertiary outer border while other tables retain the contained composition."
           ],
           "avoidWhen": [
             "Content is primarily editorial prose; use semantic product-owned markup with the prose recipe instead.",
@@ -15355,8 +15690,9 @@
           ],
           "accessibility": [
             "The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty. The native caption remains visually hidden as the table's accessible name. When caption visibility is enabled, a 48px header bar renders as component chrome outside the data 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 share one horizontal caption overflow row with table-owned actions inside the component-owned 8px inset. Table caption buttons keep pressed interaction paint without physically scaling. When columnCustomizer is enabled, the table adds a trailing Customize control named Customize table. Its label uses regular weight and its resting foreground remains neutral when hidden or reordered columns differ from the catalog default. The control is icon-label at typical widths and the icon-only Customize menu button below 900px, where a tooltip preserves the Customize label. The always-icon-only table-variant control also exposes its label through a tooltip. Otherwise the header slot receives the complete content width.",
-            "The data-mode switcher is the shared Menu of the table's supported infinite, pagination, and virtual modes. It uses an Ellipses trigger. The switcher 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. Action columns and the selection checkbox never appear in the menu. 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.",
+            "The data-mode switcher is the shared Menu of the table's supported infinite, pagination, and virtual modes. It uses an Ellipses trigger. When the column customizer is also present, a decorative vertical divider separates the two controls. The optional caption-trailing slot follows table-owned caption actions for application-owned presentation controls; the application supplies its own divider when needed. 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.",
+            "When alternateView is enabled, the alternate-view slot replaces the table frame body while the shared caption and footer remain mounted. The application owns the replacement content's accessible name, filtering, and interaction. Do not render a hidden duplicate semantic table behind that content.",
+            "The column customizer is the shared Menu surface of composite preference rows. Data columns can be shown, hidden, left-pinned, and reordered. Visibility and pin state are independent, so hidden pinned columns retain their pin state. A tertiary divider separates the visibility switch from an unbordered Pin toggle. Pinned and unpinned sections constrain drag reorder to their own partition; a single pinned row keeps its drag handle visible but inactive in quaternary foreground. Action columns and the selection checkbox remain system-managed and never appear in the menu. 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. ds-data-sort in the toolbar trailing cluster is the matching menu of Data and Order sections; it emits the same dsSortChange shape so header clicks and menu choices stay in sync. Grouping never adds a second sort indicator or header control; ds-data-group controls the grouping data point and ascending or descending group-section order while the application supplies the resulting groups. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
             "Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window. In virtual mode the supplied in-memory rows are that loaded set, including rows whose DOM is recycled. 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. When an application-owned details surface navigates between records, scrollRowIntoView reveals the newly associated row with nearest scrolling while preserving focus in that surface. It resolves false when the identity is absent from the supplied, expanded table model so the application can first load data, change its controlled page, or expand its group.",
@@ -15370,9 +15706,9 @@
             "Cell presentation moves the complete content stack for deliberate middle or bottom alignment; the default remains first-track alignment. Semantic highlight borders require an accessible explanation, and flags require labels. Presentation metadata never changes the cell value or the shared text, icon, tag and action track anatomy.",
             "Report merges name ordered row and column identities. Only a complete contiguous non-overlapping rectangle is accepted, and invalid definitions leave original values visible. Selection checkboxes are never merged. Merges cannot cross pin or elastic-spacer boundaries, and grouped or editable grids do not merge. Cross-row merges require non-windowed reports; column-only merges can use virtual rows. Applications recompute spans with their final data order and retain covered values.",
             "Editing has two opt-in ungrouped modes for scalar values. Edit mode keeps normal table semantics and reveals a floating pencil on cell hover or keyboard focus; touch keeps the pencil visible. Grid mode adds per-cell hover/press feedback, keyboard focus and controlled rectangular ranges. Arrows and Home/End skip read-only cells; Shift+click or Shift+arrows extends the range without selecting read-only cells or opening an editor. A single click, Enter, F2 or typing opens the grid editor, while edit mode requires the pencil. Both modes share validation and controlled change events: Enter or Tab proposes a change; Escape or leaving the editor cancels. Tab advances to the next editable cell or pencil. Read-only content is muted without fading dividers, and those cells cannot receive cell selection or hover feedback. Native controls retain their own keyboard behavior. Plain TSV grid paste is bounded and rejected atomically for invalid, disabled, out-of-range or read-only destinations. Applications accept or reject proposed edits, own persistence and domain validation, and replace controlled data. Row checkbox selection remains independent of cell selection.",
-            "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, highlightTerms, highlightFieldIds, hiddenFieldIds, fieldOrder, 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. highlightTerms only marks matching table-owned text and never filters rows, changes query semantics, or highlights Tag labels. highlightFieldIds optionally narrows that marking to matching column IDs or compound header-segment sort keys. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize precedes a decorative divider and the data-mode trigger remains the final action. The Customize trigger keeps one stable label and neutral resting foreground whether or not hiddenFieldIds or fieldOrder differ from the catalog default; the configured state remains visible inside the Menu. 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.",
+            "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, highlightTerms, highlightFieldIds, hiddenFieldIds, fieldOrder, pinnedFieldIds, 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. highlightTerms only marks matching table-owned text and never filters rows, changes query semantics, or highlights Tag labels. highlightFieldIds optionally narrows that marking to matching column IDs or compound header-segment sort keys. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize precedes a decorative divider and the data-mode trigger remains the final action. The Customize trigger keeps one stable label and neutral resting foreground whether or not column configuration differs from the catalog default; the configured state remains visible inside the Menu. 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 at the start and plain secondary loaded progress at the trailing edge beside the disclosure. A 20px tertiary divider centered on the label track marks the action-column boundary between the count and disclosure. 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. Virtual mode shows totals only, for example 166, because there is no loaded window. A collapsed section with no supplied member rows uses that same total-only copy so collapse does not advertise a zero loaded window, including 0 when no total is known. An expanded empty section still shows loaded progress, for example 0 of 166. Optional accessories occupy a second 24px track under the label, middle-dot separated, at most four items. An accessory with help uses the shared dotted underline and a bottom-start ds-tooltip from that copy; explicit line breaks create an unbulleted list. Without accessories the section stays the single-track row height; with accessories it matches a two-track body row, with the checkbox, trailing count, divider, and disclosure kept on the label track. An optional hero accessory sits before the label. The first supported hero is a safety-score fill. Its one-track presentation uses the default ds-score at sm and aligns to the label track on either row height. Setting hero tracks to 2 creates or spans the two-track header, renders the default ds-score at lg, and centers it across the label and accessory tracks. In selectable tables the two-track score starts at the selection-column boundary; selectionMode none omits that lane and uses the regular group-content start inset. A score hero does not use group intent coloring. Hero presentation does not change the 40 or 64 row-height contract beyond the explicitly requested second track. Groups without intent use the secondary background surface. 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. The complete section header is the expand/collapse target and paints hover and press on that viewport-width surface. The section separator stays on the dedicated trailing-edge rule so the interaction wash cannot replace it. Trailing loaded progress sits on the label track beside a visually neutral icon-only ButtonUnfilled. The centered 20px tertiary divider at the action-column boundary separates the count from the 24px md double-inset disclosure. The disclosure keeps its accessible name and does not paint its own hover or press wash, 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. Virtual grouped tables flatten headers and members into that same scrollport; expanding a section never introduces an inner scroller.",
-            "When columnCustomizer is false, columns render in catalog order. When it is true, columns remains the catalog: hiddenFieldIds and fieldOrder control visibility and data-column sequence, action columns stay last, cannot be hidden, and remain absent from the customizer Menu, and dsFieldsConfigChange 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.",
+            "When columnCustomizer is false, columns render in catalog order. When it is true, columns remains the catalog: hiddenFieldIds, fieldOrder, and pinnedFieldIds control visibility, partitioned data-column sequence, and user-managed sticky-start columns. Fixed sticky columns remain system-managed. User-pinned columns require a resolved fixed width, append to the pinned block when pinned, and become the first unpinned column when released. Action columns stay last, cannot be hidden or user-pinned, and remain absent from the customizer. dsFieldsConfigChange reports all three next values without mutating inputs. 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. chromeLoading replaces opted-in table-owned caption controls with non-interactive control skeletons in the same slots and at the same dimensions, without changing dataMode or the surrounding caption geometry. Empty and initial error replace only the body with ds-empty-state, using Inbox or ErrorTriangle plus the table heading and body copy. In height-bounded and maxHeight tables that region fills the remaining viewport below the column header; content-sized tables keep a minimum empty-region height. Empty, initial error, load-more, retry, loading-more, and terminal bands remain fixed to the visible table width while data columns scroll horizontally beneath them. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states. When grouping is active, each expanded group owns its load band at the end of its member rows; internal group load bands keep their bottom divider, while a terminal group load band yields it to the table edge or footer. The global bottom-of-table loader is not rendered.",
@@ -15390,8 +15726,8 @@
           ],
           "responsiveBehavior": [
             "Editable cells compose the shared borderless controls with cell-owned interaction and focus chrome. Only the active cell mounts a field. Single-select choices complete the edit immediately; multiline fields reserve Enter for a newline and use Ctrl/Command+Enter to commit. Date and time fields keep their picker keyboard behavior and emit canonical scalar values. Drafts stay local until a controlled change is proposed.",
-            "Horizontal scrolling is the default. Opted-in cards reuse the same native table in a narrow-container layout: a record is one card with vertically stacked labeled fields, inset separators aligned to the content origin, and space between labels and values. One row-owned interaction surface covers the card. Actions and selection sit together at the top-right, separated by a short divider. The content region owns card gutters and gaps; the toolbar and footer remain separate edge-to-edge surfaces. Page owners remove their outer table inset at the responsive breakpoint. Column headers remain available to assistive technology but are visually hidden and contain no interactive controls in card mode. Row selection and action controls preserve focus across resizing instead of mounting a duplicate mobile tree. Merged reports and grid interaction retain table layout. Card compositions do not use the duplicated document-flow sticky header.",
-            "Inside the named ds-table container, caption Search retains its standard maximum width and flexes smaller only when the complete row needs space. Filter, Group, and Sort controls that opt into collapseLabel become icon-only below 900px by omitting their labels and chevrons. Active filtering or grouping promotes the visible icon to primary. Sort keeps resting secondary chrome because its selection lives in the menu and headers. Customize switches to the icon-only Customize menu button below 900px and keeps its neutral resting foreground regardless of the controlled column configuration. The caption, frame, and footer remain within the table host at every width. The complete caption row scrolls together only when those compact controls no longer fit, while data columns scroll inside the viewport; table-owned trailing actions never stay pinned over the scrolling toolbar.",
+            "Horizontal scrolling is the default. Opted-in cards reuse the same native table below the 768px browser viewport breakpoint: a record is one card with vertically stacked labeled fields, inset separators aligned to the content origin, and space between labels and values. A narrow table on a desktop viewport remains a table. One row-owned interaction surface covers the card. Actions and selection sit together at the top-right, separated by a short divider. The content region owns card gutters and gaps; the toolbar and footer remain separate edge-to-edge surfaces. The edge-to-edge chrome layout removes its desktop frame inset and outer border while cards provide their own gutters. Column headers remain available to assistive technology but are visually hidden and contain no interactive controls in card mode. Row selection and action controls preserve focus across resizing instead of mounting a duplicate mobile tree. Merged reports and grid interaction retain table layout. Card compositions do not use the duplicated document-flow sticky header.",
+            "Inside the named ds-table container, caption Search retains its standard maximum width and flexes smaller only when the complete row needs space. Filter, Group, and Sort controls that opt into collapseLabel become icon-only below 900px by omitting their labels and chevrons. Active filtering or grouping promotes the visible icon to primary. Sort keeps resting secondary chrome because its selection lives in the menu and headers. Customize switches to the icon-only Customize menu button below 900px and keeps its neutral resting foreground regardless of the controlled column configuration. Contained chrome is the default. Edge-to-edge chrome keeps the caption and footer flush to the host, gives the footer a tertiary divider painted outside its content box, and places the data frame in a transparent, token-backed 16px inset with a tertiary outer border so the owning page surface remains visible. The complete caption row scrolls together only when those compact controls no longer fit, while data columns scroll inside the viewport; table-owned trailing actions never stay pinned over the scrolling toolbar.",
             "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.",
@@ -15402,12 +15738,12 @@
           ],
           "frameworkCaveats": {
             "customElements": [
-              "Assign columns, rows, groups, grouping, sort, selectedRowIds, collapsedGroupIds, highlightTerms, highlightFieldIds, hiddenFieldIds, fieldOrder, pagination, displayedCount, and totalCount through JavaScript properties rather than HTML attribute strings.",
+              "Assign columns, rows, groups, grouping, sort, selectedRowIds, collapsedGroupIds, highlightTerms, highlightFieldIds, hiddenFieldIds, fieldOrder, pinnedFieldIds, pagination, displayedCount, and totalCount through JavaScript properties rather than HTML attribute strings.",
               "dataMode=virtual recycles row DOM over the supplied in-memory rows or groups and requires height, maxHeight, or fitViewport. It does not fetch or paginate.",
               "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 Table trigger opens the same shared ds-menu of reorderable switch rows; toggling a switch or reordering a row emits dsFieldsConfigChange and does not close the menu.",
+              "When columnCustomizer is enabled, the Table trigger opens the same shared ds-menu of reorderable visibility rows with independent pin toggles; changing visibility, pinning, or partition-local order emits dsFieldsConfigChange 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 dsFieldsConfigChange; route dsRowActivate in the application owner. When columnCustomizer is enabled, keep columns as the full catalog and replace hiddenFieldIds and fieldOrder from that event."
+              "Replace controlled property values in response to dsSortChange, dsGroupCollapseChange, dsSelectionChange, dsLoadMore, dsGroupLoadMore, dsPaginationChange, and dsFieldsConfigChange; route dsRowActivate in the application owner. When columnCustomizer is enabled, keep columns as the full catalog and replace hiddenFieldIds, fieldOrder, and pinnedFieldIds from that event."
             ],
             "react": [
               "Pass new array and state-object references when the controlled data or query state changes.",
@@ -15480,6 +15816,11 @@
                 "source": "src/wc/styles/table.css",
                 "reason": "Public table recipe customization; preserve semantic table and scroll behavior."
               },
+              {
+                "name": "--ds-table-frame-inset",
+                "source": "src/wc/styles/table.css",
+                "reason": "Controls the data-frame inset in the edge-to-edge chrome layout."
+              },
               {
                 "name": "--ds-table-inline-scroll-max-offset",
                 "source": "src/wc/styles/table.css",
@@ -15539,6 +15880,10 @@
           }
         },
         "props": {
+          "alternateView": {
+            "type": "boolean",
+            "required": false
+          },
           "caption": {
             "type": "string",
             "required": true
@@ -15559,6 +15904,10 @@
             "type": "TableCellSpan[]",
             "required": false
           },
+          "chromeLayout": {
+            "type": "TableChromeLayout",
+            "required": false
+          },
           "chromeLoading": {
             "type": "boolean",
             "required": false
@@ -15743,6 +16092,10 @@
             "type": "string",
             "required": false
           },
+          "pinnedFieldIds": {
+            "type": "string[]",
+            "required": false
+          },
           "responsiveLayout": {
             "type": "'scroll' | 'cards'",
             "required": false