@ds-mo/ui 13.11.0 → 13.12.0

package/dist/.package-ready.json

@@ -1 +1 @@
-{"schemaVersion":1,"package":"@ds-mo/ui","version":"13.11.0","components":65,"digest":"a5531f1a6ad36f653a4d1dc8544ccc063e5cb13d55e8c7e99c0386a38835dffe","completedAt":"2026-08-07T00:59:37.127Z"}
+{"schemaVersion":1,"package":"@ds-mo/ui","version":"13.12.0","components":66,"digest":"8aa9f3a30662a6f2b90d68ba52dd64ef92e9654e72f41860eadc554328f2dae0","completedAt":"2026-08-09T04:41:22.713Z"}

package/dist/agent-patterns.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "13.11.0",
+  "packageVersion": "13.12.0",
   "kind": "patterns",
   "entries": [
     {
@@ -520,7 +520,7 @@
       "status": "stable",
       "summary": "Supply route-owned page chrome and content to managed ShellApp, which composes ShellPage, BarTitle, and MobileHeader without duplicate page state.",
       "useWhen": [
-        "A standard authenticated route needs a shared heading, sections, depth, actions, sticky compaction, and content inset.",
+        "A standard authenticated route needs a shared heading, sections, depth, actions, sticky compaction, content inset, and page canvas surface.",
         "The routed page must keep one content owner while desktop and mobile header presentations differ."
       ],
       "avoidWhen": [
@@ -551,7 +551,7 @@
         }
       ],
       "stateOwnership": [
-        "The router owns heading copy, selected section, depth, available actions, route data, and product outcomes.",
+        "The router owns heading copy, selected section, depth, available actions, content inset, content surface, route data, and product outcomes.",
         "The application replaces pageChrome from completed route state and handles ShellApp page intent events.",
         "ShellApp owns ShellPage, BarTitle, MobileHeader, the content scroller, sticky presentation, and responsive switching.",
         "The default slot contains application-owned routed content and is not recreated for header compaction or breakpoint changes.",
@@ -567,6 +567,9 @@
         "ShellApp derives the desktop BarTitle and mobile MobileHeader from the same pageChrome object.",
         "Route-level sections remain pageChrome tabs; subordinate local views use subsections.",
         "Use contentInset none only for deliberately full-bleed products such as maps and canvases.",
+        "Choose contentSurface independently: primary and secondary canvases both support default responsive gutters or full-bleed content.",
+        "Desktop and tablet BarTitle presentations match a secondary page canvas across expanded, compact, and constrained variants; the separate mobile header remains primary.",
+        "ShellPage keeps its scroll-compaction spacer on the selected content surface so the routed canvas remains continuous.",
         "The routed content owner remains mounted while header presentation compacts or changes breakpoint."
       ],
       "implementations": {

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "13.11.0",
+  "packageVersion": "13.12.0",
   "kind": "components",
   "entries": [
     {
@@ -997,6 +997,7 @@
         "responsiveBehavior": [
           "BarTitle does not observe viewport, shell, scroll, or container state. Its owner selects an explicit variant.",
           "ShellPage is the standard owner for automatic expanded, compact, and constrained selection.",
+          "When ShellPage owns BarTitle on a secondary desktop or tablet page, its expanded, compact, and constrained presentations all match that canvas; the separate MobileHeader component remains primary.",
           "Compact titles use the shared compact-header geometry and md control inset so top-level headings align with BarNav and inline Back geometry aligns with PanelToolHeader. Long headings and section labels truncate independently while Back and action controls retain complete hit targets and accessible names.",
           "A never-collapse primary action remains visible in constrained mode; the title and section label yield space first."
         ],
@@ -1987,7 +1988,7 @@
           "Omit score to render a centered Score unavailable cell with a tertiary border and no score fill. Set scoreErrorMessage to replace that copy while the measures remain readable.",
           "Loading replaces the score and measures with skeletons and does not alter the slotted period control. When measures are already supplied, their count preserves the resolved grid shape; otherwise five measure placeholders join the score in the standard six-cell grid.",
           "At most seven measures are shown. Keep larger collections outside the summary bar rather than turning it into a dense dashboard.",
-          "The period and filter controls are slotted rather than owned. Use the period slot when the current range is selectable; otherwise periodLabel supplies fixed current copy in the same md control-frame and label-inset anatomy. Use the filter slot for the application-owned comparison-window control. Slotted Selects use hasBorder false so the 48px bar owns their surrounding boundary.",
+          "The period and filter controls are slotted rather than owned. Use the period slot when the current range is selectable; otherwise periodLabel supplies fixed current copy in the same md control-frame and label-inset anatomy. Use the filter slot for the application-owned comparison-window control. Slotted Selects use hasBorder false so the 48px bar owns their surrounding boundary and allowClear false because both controls always require one selected reporting period.",
           "A numeric safety score infers fair from 0–50, good from 51–80, and excellent from 81–100. The level can be supplied explicitly when the displayed value is not numeric. The deprecated band field is ignored.",
           "The safety score is the first grid cell and uses the same track, 8px outer inset, 6px inner padding, dividers, and responsive behavior as metric cells. The display value removes 8px from both block edges of its line box so it does not increase the shared row height. Score remains nonselectable and excluded from metric roving focus.",
           "During page-controlled scroll collapse, the component preserves its expanded flow height and stationary reporting bar while the metric grid moves and clips beneath it. Elevation remains fitted to the visible surface.",
@@ -4749,6 +4750,7 @@
         ],
         "commonlyComposedWith": [
           "component:ds-mobile-section-switcher",
+          "component:ds-tab-group",
           "component:ds-shell-page",
           "component:ds-shell-tools"
         ],
@@ -4757,19 +4759,19 @@
         ],
         "accessibility": [
           "Static screens render a real h1 or h2 according to headingLevel.",
-          "Section-switching screens expose an equivalent semantic heading alongside the accessible popup trigger.",
+          "Section-switching screens expose an equivalent semantic heading alongside the accessible popup trigger or named segmented TabGroup.",
           "Subsections use a separately named navigation landmark and never replace the semantic page identity.",
           "Leading and trailing slotted icon actions retain their own accessible names and tooltips."
         ],
         "states": [
           "Without multiple sections the center renders heading.",
-          "With multiple sections the center renders the controlled MobileSectionSwitcher.",
+          "With multiple sections the center renders the controlled MobileSectionSwitcher by default or an explicitly requested segmented TabGroup.",
           "Optional subsections render in a second row and emit dsSubsectionChange without changing the primary section.",
           "Sections represent peer destinations at the current navigation level; subsections represent local views beneath the selected page or detail identity.",
           "Brand tone changes surface and foreground without changing geometry or interaction ownership."
         ],
         "responsiveBehavior": [
-          "The primary 48px lane is dedicated to the below-768px presentation; optional subsections add one subordinate 48px lane.",
+          "The primary 56px lane matches the Mobile Sheet Nav header and Mobile Bar Nav; optional subsections add one subordinate 48px lane.",
           "Equal flexible side lanes keep the center mathematically aligned when actions are asymmetric."
         ],
         "references": [
@@ -4790,13 +4792,21 @@
             "required": false
           },
           "sections": {
-            "type": "TabItem[]",
+            "type": "TabGroupItem[]",
             "required": false
           },
           "sectionsAriaLabel": {
             "type": "string",
             "required": false
           },
+          "sectionsPresentation": {
+            "type": "MobileHeaderSectionsPresentation",
+            "required": false
+          },
+          "sectionsSize": {
+            "type": "TabGroupSize",
+            "required": false
+          },
           "subsections": {
             "type": "TabItem[]",
             "required": false
@@ -4841,6 +4851,7 @@
       ],
       "componentDependencies": [
         "mobile-section-switcher",
+        "tab-group",
         "text"
       ]
     },
@@ -4962,7 +4973,7 @@
         ],
         "responsiveBehavior": [
           "The pane fills the mobile content stage while the bottom bar remains available.",
-          "The sheet header and scrollable navigation body each use the shared 8px chrome inset; large destination controls retain their independent 40px density.",
+          "The sheet header and scrollable navigation body each use the shared 8px chrome inset; the context TabGroup and primary controls share a 40px height and 24px icon scale.",
           "Dashboard and Settings preserve their supplied visual groups with an 8px gap between destinations inside a section and a 32px gap between sections."
         ],
         "references": [
@@ -6587,6 +6598,7 @@
           "Replace navigation and pageChrome together from one completed route state.",
           "When pageChrome.showBack marks a detail depth, mobile chrome keeps the page heading as its identity and presents only local subsections; peer route tabs remain in desktop BarNav rather than replacing the detail heading.",
           "Managed ShellApp keeps BarNav and ShellPage presentations present and owns page header stickiness and the content scroller.",
+          "Route-owned pageChrome selects ShellPage contentInset and contentSurface independently; ShellApp forwards both without making page-specific layout or surface decisions.",
           "The application filters unauthorized destinations, sections, and tools before passing them into shell components."
         ],
         "responsiveBehavior": [
@@ -6594,6 +6606,8 @@
           "On desktop, PanelNav defaults expanded, permits user collapse or expansion, and respects the locally persisted desktop preference.",
           "On tablet, ShellApp keeps PanelNav permanently collapsed and prevents user expansion without overwriting the desktop preference.",
           "On mobile, ShellApp hides and inerts desktop chrome, uses a solid primary stage, and composes MobileHeader, MobileSheetNav, ShellTools, and the persistent MobileBarNav around the same application-owned content.",
+          "Opening MobileSheetNav temporarily overlays the active routed page or global tool; closing it without selecting an area restores that same destination and its nested state.",
+          "When a suspended mobile document returns to the foreground, ShellApp refreshes the complete stage paint layer without remounting routed content or tool owners.",
           "When the application enables viewport-fit=cover, ShellApp reserves the shared top safe-area inset once for the complete mobile stage; nested routed, sheet, and tool headers must not add a second top inset.",
           "A slotted Banner remains below the top safe-area inset and above routed, navigation, fullscreen-tool, and mobile global-surface presentations.",
           "Mobile global surfaces conceal and inert the routed workspace without unmounting it, preserving nested routes and scroll state.",
@@ -6760,17 +6774,18 @@
       "tag": "ds-shell-page",
       "name": "shell-page",
       "title": "ShellPage",
-      "summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and optional page-content inset without creating a nested scroll container.",
+      "summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and independent page-content inset and canvas surface without creating a nested scroll container.",
       "intentStatus": "complete",
       "intent": {
         "audience": "general",
         "status": "stable",
-        "summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and optional page-content inset without creating a nested scroll container.",
+        "summary": "The standard routed-page boundary inside ShellApp, owning sticky BarTitle or BarWorkflow placement, application-supplied BarTitle capacity, stable scroll compaction, and independent page-content inset and canvas surface without creating a nested scroll container.",
         "useWhen": [
           "Rendering a standard routed page inside ShellApp's default content region.",
           "BarTitle should expand at a roomy page top, compact after scroll, or use constrained action layout when the application shell reports reduced capacity.",
           "BarWorkflow needs sticky page-level placement while remaining compact.",
-          "Pages need consistent content gutters with an explicit full-bleed option."
+          "Pages need consistent content gutters with an explicit full-bleed option.",
+          "The page canvas surrounding routed content must use either the primary or secondary application surface."
         ],
         "avoidWhen": [
           "Building authentication, onboarding, public, modal, drawer, or intentionally focused fullscreen layouts outside the standard ShellApp page region.",
@@ -6809,6 +6824,8 @@
           "headerPresentation=auto selects the matching header variant from headerCapacity and scroll position.",
           "expanded, compact, and constrained are explicit overrides for exceptional layouts and deterministic examples.",
           "contentInset=default supplies standard page gutters; none permits maps, canvases, and other full-bleed content.",
+          "contentSurface=primary keeps the standard page canvas; secondary paints both the inset gutter and the canvas beneath routed content. Desktop and tablet BarTitle chrome matches that canvas in expanded, compact, and constrained presentations; MobileHeader remains primary.",
+          "contentInset and contentSurface are independent: either surface supports standard responsive gutters or a full-bleed page-owned layout.",
           "The header slot accepts one desktop BarTitle or BarWorkflow; mobile-header accepts the corresponding MobileHeader presentation. The default slot owns router output and all page product content."
         ],
         "responsiveBehavior": [
@@ -6817,7 +6834,10 @@
           "A ShellPage-managed BarTitle remains concealed until headerCapacity is available and its rendered variant matches the resolved presentation, preventing a default-variant flash during route activation.",
           "responsiveMode=mobile hides and inerts the desktop header, exposes mobile-header, and disables desktop scroll-compaction geometry.",
           "Update headerCapacity synchronously with shell layout state so opening tools or crossing application breakpoints cannot briefly render the wrong presentation.",
-          "The default content inset is 32px in desktop mode and 16px in tablet and mobile modes, while preserving the larger bottom scroll space.",
+          "The default content inset is balanced on every side: 32px in desktop mode and 16px in tablet and mobile modes.",
+          "The selected content surface persists unchanged across desktop, tablet, and mobile modes.",
+          "On a secondary desktop or tablet page, BarTitle matches the page canvas across capacity and scroll-driven variant changes; the separate mobile-header presentation remains primary.",
+          "The flow-preservation spacer follows contentSurface so compacting a secondary page cannot expose a primary strip before its content.",
           "On roomy pages, the expanded header scrolls upward until its title and action row reaches the compact row position, while its bottom divider progressively extends from the expanded inset to edge-to-edge; it then snaps variants without moving that shared visual anchor.",
           "Scroll compaction preserves the expanded page flow offset so content never jumps beneath the sticky header.",
           "ShellPage relies on ShellApp's content scroller and never introduces nested scrolling.",
@@ -6830,7 +6850,7 @@
           ],
           "react": [
             "Render the desktop header with slot=header and DsMobileHeader with slot=mobile-header inside DsShellPage.",
-            "Use contentInset none only for deliberately full-bleed page products."
+            "Use contentInset none only for deliberately full-bleed page products, and choose contentSurface independently from the page's spacing model."
           ],
           "angular": [
             "Import the generated standalone DsShellPage adapter with the desktop header and DsMobileHeader, preserve both header slots, and place router-outlet in the default slot.",
@@ -6858,6 +6878,10 @@
             "type": "ShellPageContentInset",
             "required": false
           },
+          "contentSurface": {
+            "type": "ShellPageContentSurface",
+            "required": false
+          },
           "headerCapacity": {
             "type": "ShellPageCapacity",
             "required": false
@@ -6914,7 +6938,7 @@
           "component:ds-shell-app",
           "component:ds-panel-tool-header",
           "component:ds-mobile-header",
-          "component:ds-mobile-section-switcher",
+          "component:ds-tab-group",
           "component:ds-mobile-bar-nav"
         ],
         "patterns": [
@@ -6923,7 +6947,7 @@
         "accessibility": [
           "Only the active mobile tool view participates in focus or the accessibility tree.",
           "Header Back and application-owned header actions preserve the PanelTools event contract.",
-          "Inbox uses the MobileSectionSwitcher popup trigger for Stacks and Activity and never relies on a gesture-only interaction; Messages remains a direct mobile destination."
+          "Mobile Inbox uses a named label-only TabGroup for Stacks and Activity; Messages remains a direct mobile destination."
         ],
         "states": [
           "The application owns open and activeTool and replaces headers when tool depth changes.",
@@ -6933,7 +6957,7 @@
         ],
         "responsiveBehavior": [
           "Desktop and tablet compose PanelTools-compatible rail and drawer chrome.",
-          "Mobile renders one centered MobileHeader for every tool; Stacks and Activity use Inbox section titles, while Messages remains a direct tool destination."
+          "Mobile renders one centered MobileHeader for every tool; Stacks and Activity use the large segmented Inbox control, while Messages remains a direct tool destination."
         ],
         "frameworkCaveats": {
           "customElements": [
@@ -7734,6 +7758,7 @@
           "The parent owns the canonical selected value and adjacent view visibility, and should update both from dsChange.",
           "A missing, empty, inactive, or unknown selected value is invalid when enabled tabs exist; the component does not choose a fallback selection.",
           "Selection is singular and follows keyboard focus.",
+          "Small, medium, and large use the shared 24px, 32px, and 40px control-density recipes for the outer track. Each segment uses the same-size inset recipe at 20px, 28px, and 36px while preserving that density's typography, icon, gap, and label metrics.",
           "Use one consistent content variant across every selectable tab in a group.",
           "Omitted background is for primary and secondary surfaces; pass the faint context explicitly on faint surfaces.",
           "Only the omitted default context emphasizes visible selected label text and keeps the filled track; explicit faint follows the other surface contexts with a transparent track, stable text weight, surface border, and neutral active fill.",
@@ -7741,6 +7766,7 @@
         ],
         "responsiveBehavior": [
           "The component remains a single horizontal row and does not become vertical or wrap.",
+          "Use the large size when a mobile composition aligns the group with 40px shell controls; size does not change automatically at a breakpoint.",
           "The consuming layout owns narrow-width placement and overflow, or replaces the row with a more suitable navigation pattern."
         ],
         "frameworkCaveats": {
@@ -7776,6 +7802,10 @@
             "type": "TabBackground | undefined",
             "required": false
           },
+          "size": {
+            "type": "TabGroupSize",
+            "required": false
+          },
           "tabs": {
             "type": "TabGroupItem[]",
             "required": false
@@ -7809,6 +7839,261 @@
         "text"
       ]
     },
+    {
+      "id": "component:ds-table",
+      "tag": "ds-table",
+      "name": "table",
+      "title": "Table",
+      "summary": "Semantic, controlled data table with durable visual primitives for cell geometry, column geometry, grouping, sorting, multi-selection, sticky overflow, and incremental loading.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "general",
+        "status": "experimental",
+        "summary": "Semantic, controlled data table with durable visual primitives for cell geometry, column geometry, grouping, sorting, multi-selection, sticky overflow, and incremental loading.",
+        "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, or lazy loading while retaining ownership of the data query and transformations.",
+          "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": [
+          "Content is primarily editorial prose; use semantic product-owned markup with the prose recipe instead.",
+          "A small label/value set reads more clearly as a list, description list, or card.",
+          "The interface requires tree-grid behavior, nested grouping, inline cell editing, row reordering, column pinning, or virtualization; those are outside this first contract.",
+          "The application expects the component to fetch, paginate, sort, group, or mutate records internally."
+        ],
+        "commonlyComposedWith": [
+          "component:ds-empty-state",
+          "component:ds-skeleton",
+          "component:ds-loader",
+          "component:ds-button-unfilled",
+          "component:ds-tag",
+          "component:ds-icon"
+        ],
+        "accessibility": [
+          "The rendered structure uses a native table, caption, column headers, row groups, and data cells; keep the caption non-empty even when it is visually hidden.",
+          "Sorting controls remain buttons inside column headers. Member-row sort uses aria-sort, while independent group order is described by the grouped header control.",
+          "Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window.",
+          "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."
+        ],
+        "states": [
+          "Columns, rows, groups, grouping, sorting, selected row IDs, and lazy-loading state are controlled inputs. Events communicate intent and never mutate those inputs.",
+          "Grouping supports one level. The application supplies ordered groups and ordered member rows; group order and member-row sort are independent controls.",
+          "An active member sort toggles only between ascending and descending; activating a different sortable label moves sorting to that key. Applications may still clear the controlled sort state explicitly. The grouped column toggles ascending and descending group order without clearing member sort.",
+          "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 uses row-shaped skeletons. Empty and initial error states remain inside the table. Incremental loading retains existing rows and supports automatic sentinel, manual load-more, retry, and terminal states.",
+          "Lazy loading replaces pagination. The application owns requests, cancellation, cursors, deduplication, appended records, and query identity; loadIdentity resets the component request guard.",
+          "Cells accept scalar content, standard primary-and-secondary or dual-primary text primitives, declarative Tag, icon-only, 16:9 Image, or ButtonUnfilled Action content, or explicit Empty and Blank absence values. Single-track text, selection, tag-only, icon-only, Action, Empty, and Blank cells resolve a 40px base contract while multi-track cells grow downward. Action cells primarily use an icon-only Ellipses treatment, render a 24px small ButtonUnfilled inside 8px padding, default to unbordered, and emit row, column, and action identities through dsCellAction. Image cells render a 52px-high bordered preview inside 6px outer padding, establishing a 64px row, and 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": [
+          "The table keeps native semantics at narrow widths and scrolls horizontally instead of transforming into cards.",
+          "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; cell-specific outer padding and track geometry align text, selection, Tag, icon, Action, Empty, Blank, and Image primitives while additional tracks grow downward.",
+          "Long content truncates by default and can opt into wrapping at the column or cell level."
+        ],
+        "frameworkCaveats": {
+          "customElements": [
+            "Assign columns, rows, groups, grouping, sort, and selectedRowIds through JavaScript properties rather than HTML attribute strings.",
+            "Replace controlled property values in response to dsSortChange, dsGroupingChange, dsSelectionChange, and dsLoadMore."
+          ],
+          "react": [
+            "Pass new array and state-object references when the controlled data or query state changes.",
+            "Apply emitted sort, grouping, selection, action, or 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.",
+            "Keep server cursor, query lifecycle, and cell-action handling in the owning service or container."
+          ]
+        },
+        "references": [
+          {
+            "label": "Storybook review matrix",
+            "path": "src/wc/components/Table/Table.stories.ts"
+          },
+          {
+            "label": "Public visual recipe",
+            "path": "src/wc/styles/table.css"
+          }
+        ]
+      },
+      "api": {
+        "props": {
+          "caption": {
+            "type": "string",
+            "required": true
+          },
+          "captionVisibility": {
+            "type": "TableCaptionVisibility",
+            "required": false
+          },
+          "columns": {
+            "type": "TableColumn[]",
+            "required": false
+          },
+          "emptyBody": {
+            "type": "string",
+            "required": false
+          },
+          "emptyCellLabel": {
+            "type": "string",
+            "required": false
+          },
+          "emptyHeading": {
+            "type": "string",
+            "required": false
+          },
+          "endOfResultsLabel": {
+            "type": "string",
+            "required": false
+          },
+          "error": {
+            "type": "boolean",
+            "required": false
+          },
+          "errorBody": {
+            "type": "string",
+            "required": false
+          },
+          "errorHeading": {
+            "type": "string",
+            "required": false
+          },
+          "grouping": {
+            "type": "TableGroupingState | null",
+            "required": false
+          },
+          "groups": {
+            "type": "TableGroup[]",
+            "required": false
+          },
+          "hasMore": {
+            "type": "boolean",
+            "required": false
+          },
+          "lazyLoading": {
+            "type": "boolean",
+            "required": false
+          },
+          "loadIdentity": {
+            "type": "string | number",
+            "required": false
+          },
+          "loadMoreError": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "loadMoreLabel": {
+            "type": "string",
+            "required": false
+          },
+          "loadMoreMode": {
+            "type": "TableLoadMoreMode",
+            "required": false
+          },
+          "loadMoreThreshold": {
+            "type": "number",
+            "required": false
+          },
+          "loading": {
+            "type": "boolean",
+            "required": false
+          },
+          "loadingMore": {
+            "type": "boolean",
+            "required": false
+          },
+          "loadingMoreLabel": {
+            "type": "string",
+            "required": false
+          },
+          "maxHeight": {
+            "type": "string | number | undefined",
+            "required": false
+          },
+          "retryLabel": {
+            "type": "string",
+            "required": false
+          },
+          "rows": {
+            "type": "TableRow[]",
+            "required": false
+          },
+          "rowsLoadedLabel": {
+            "type": "string",
+            "required": false
+          },
+          "scrollLabel": {
+            "type": "string | undefined",
+            "required": false
+          },
+          "selectedRowIds": {
+            "type": "string[]",
+            "required": false
+          },
+          "selectionMode": {
+            "type": "TableSelectionMode",
+            "required": false
+          },
+          "skeletonRows": {
+            "type": "number",
+            "required": false
+          },
+          "sort": {
+            "type": "TableSortState | null",
+            "required": false
+          },
+          "stickyHeader": {
+            "type": "boolean",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsCellAction",
+            "detail": "TableCellActionDetail"
+          },
+          {
+            "name": "dsGroupingChange",
+            "detail": "TableGroupingChangeDetail"
+          },
+          {
+            "name": "dsLoadMore",
+            "detail": "TableLoadMoreDetail"
+          },
+          {
+            "name": "dsSelectionChange",
+            "detail": "TableSelectionChangeDetail"
+          },
+          {
+            "name": "dsSortChange",
+            "detail": "TableSortChangeDetail"
+          }
+        ],
+        "slots": []
+      },
+      "exports": {
+        "customElement": "ds-table",
+        "react": "DsTable",
+        "angular": "DsTable"
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens",
+        "@ds-mo/icons"
+      ],
+      "componentDependencies": [
+        "button-unfilled",
+        "checkbox",
+        "empty-state",
+        "icon",
+        "loader",
+        "skeleton",
+        "tag",
+        "text"
+      ]
+    },
     {
       "id": "component:ds-tag",
       "tag": "ds-tag",
@@ -7869,12 +8154,13 @@
           "Warning signals higher urgency or risk than caution, which asks for attention before a possible issue.",
           "Contrast changes visual prominence without changing semantic intent or parent surface context.",
           "Rounded is an optional visual style with no semantic difference.",
+          "isInset opts into reduced outer geometry only when Tag is nested inside a control of the same density; semantic styling, typography, icons, gaps, radius, and interaction remain unchanged.",
           "Labels stay on one line and truncate only when the owner supplies a maximum width.",
           "Omitted interactive renders static metadata with no focus, event, or suffix. Interactive adds the fixed ChevronUpDown suffix and emits dsClick without toggling expanded internally.",
           "isInactive disables only the interactive button and applies the shared inactive treatment."
         ],
         "responsiveBehavior": [
-          "The owner selects md, sm, or xs density to match its local layout and owns collection wrapping, overflow, and condensation.",
+          "The owner selects md, sm, or xs density to match its local layout and owns collection wrapping, overflow, and condensation. Use isInset only for same-density control nesting.",
           "Tag does not change size or behavior automatically at breakpoints."
         ],
         "frameworkCaveats": {
@@ -7925,6 +8211,10 @@
             "type": "boolean",
             "required": false
           },
+          "isInset": {
+            "type": "boolean",
+            "required": false
+          },
           "label": {
             "type": "string",
             "required": true

package/dist/angular/ds-mobile-header.d.ts

@@ -9,7 +9,7 @@ export declare class DsMobileHeader {
     dsSubsectionChange: EventEmitter<DsMobileHeaderCustomEvent<string>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsMobileHeader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsMobileHeader, "ds-mobile-header", never, { "heading": { "alias": "heading"; "required": false; }; "headingLevel": { "alias": "headingLevel"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "sectionsAriaLabel": { "alias": "sectionsAriaLabel"; "required": false; }; "subsections": { "alias": "subsections"; "required": false; }; "subsectionsAriaLabel": { "alias": "subsectionsAriaLabel"; "required": false; }; "subvalue": { "alias": "subvalue"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dsSectionChange": "dsSectionChange"; "dsSubsectionChange": "dsSubsectionChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsMobileHeader, "ds-mobile-header", never, { "heading": { "alias": "heading"; "required": false; }; "headingLevel": { "alias": "headingLevel"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "sectionsAriaLabel": { "alias": "sectionsAriaLabel"; "required": false; }; "sectionsPresentation": { "alias": "sectionsPresentation"; "required": false; }; "sectionsSize": { "alias": "sectionsSize"; "required": false; }; "subsections": { "alias": "subsections"; "required": false; }; "subsectionsAriaLabel": { "alias": "subsectionsAriaLabel"; "required": false; }; "subvalue": { "alias": "subvalue"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "dsSectionChange": "dsSectionChange"; "dsSubsectionChange": "dsSubsectionChange"; }, never, ["*"], true, never>;
 }
 export declare interface DsMobileHeader extends Components.DsMobileHeader {
     /**

package/dist/angular/ds-mobile-header.js

@@ -19,12 +19,12 @@ let DsMobileHeader = class DsMobileHeader {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsMobileHeader, 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: DsMobileHeader, isStandalone: true, selector: "ds-mobile-header", inputs: { heading: "heading", headingLevel: "headingLevel", sections: "sections", sectionsAriaLabel: "sectionsAriaLabel", subsections: "subsections", subsectionsAriaLabel: "subsectionsAriaLabel", subvalue: "subvalue", tone: "tone", value: "value" }, outputs: { dsSectionChange: "dsSectionChange", dsSubsectionChange: "dsSubsectionChange" }, 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: DsMobileHeader, isStandalone: true, selector: "ds-mobile-header", inputs: { heading: "heading", headingLevel: "headingLevel", sections: "sections", sectionsAriaLabel: "sectionsAriaLabel", sectionsPresentation: "sectionsPresentation", sectionsSize: "sectionsSize", subsections: "subsections", subsectionsAriaLabel: "subsectionsAriaLabel", subvalue: "subvalue", tone: "tone", value: "value" }, outputs: { dsSectionChange: "dsSectionChange", dsSubsectionChange: "dsSubsectionChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsMobileHeader = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsMobileHeader,
-        inputs: ['heading', 'headingLevel', 'sections', 'sectionsAriaLabel', 'subsections', 'subsectionsAriaLabel', 'subvalue', 'tone', 'value']
+        inputs: ['heading', 'headingLevel', 'sections', 'sectionsAriaLabel', 'sectionsPresentation', 'sectionsSize', 'subsections', 'subsectionsAriaLabel', 'subvalue', 'tone', 'value']
     })
 ], DsMobileHeader);
 export { DsMobileHeader };
@@ -35,7 +35,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['heading', 'headingLevel', 'sections', 'sectionsAriaLabel', 'subsections', 'subsectionsAriaLabel', 'subvalue', 'tone', 'value'],
+                    inputs: ['heading', 'headingLevel', 'sections', 'sectionsAriaLabel', 'sectionsPresentation', 'sectionsSize', 'subsections', 'subsectionsAriaLabel', 'subvalue', 'tone', 'value'],
                     outputs: ['dsSectionChange', 'dsSubsectionChange'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsSectionChange: [{

package/dist/angular/ds-shell-page.d.ts

@@ -6,7 +6,7 @@ export declare class DsShellPage {
     protected el: HTMLDsShellPageElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsShellPage, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsShellPage, "ds-shell-page", never, { "contentInset": { "alias": "contentInset"; "required": false; }; "headerCapacity": { "alias": "headerCapacity"; "required": false; }; "headerPresentation": { "alias": "headerPresentation"; "required": false; }; "responsiveMode": { "alias": "responsiveMode"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsShellPage, "ds-shell-page", never, { "contentInset": { "alias": "contentInset"; "required": false; }; "contentSurface": { "alias": "contentSurface"; "required": false; }; "headerCapacity": { "alias": "headerCapacity"; "required": false; }; "headerPresentation": { "alias": "headerPresentation"; "required": false; }; "responsiveMode": { "alias": "responsiveMode"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export declare interface DsShellPage extends Components.DsShellPage {
 }

package/dist/angular/ds-shell-page.js

@@ -17,12 +17,12 @@ let DsShellPage = class DsShellPage {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsShellPage, 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: DsShellPage, isStandalone: true, selector: "ds-shell-page", inputs: { contentInset: "contentInset", headerCapacity: "headerCapacity", headerPresentation: "headerPresentation", responsiveMode: "responsiveMode" }, 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: DsShellPage, isStandalone: true, selector: "ds-shell-page", inputs: { contentInset: "contentInset", contentSurface: "contentSurface", headerCapacity: "headerCapacity", headerPresentation: "headerPresentation", responsiveMode: "responsiveMode" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsShellPage = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsShellPage,
-        inputs: ['contentInset', 'headerCapacity', 'headerPresentation', 'responsiveMode']
+        inputs: ['contentInset', 'contentSurface', 'headerCapacity', 'headerPresentation', 'responsiveMode']
     })
 ], DsShellPage);
 export { DsShellPage };
@@ -33,6 +33,6 @@ 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: ['contentInset', 'headerCapacity', 'headerPresentation', 'responsiveMode'],
+                    inputs: ['contentInset', 'contentSurface', 'headerCapacity', 'headerPresentation', 'responsiveMode'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });