@ds-mo/ui 14.32.1 → 14.33.1

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

@@ -2497,6 +2497,124 @@
         "tooltip"
       ]
     },
+    {
+      "name": "card-action-center",
+      "title": "CardActionCenter",
+      "description": "Compact bordered card that groups overview-page actions, optional values or status tags, and native destinations into named sections.",
+      "type": "registry:ui",
+      "meta": {
+        "library": "@ds-mo/ui",
+        "distribution": "npm",
+        "storybook": "https://zainadeel.github.io/compomo/?path=/story/card-action-center",
+        "source": "src/wc/components/CardActionCenter/CardActionCenter.tsx",
+        "intentStatus": "complete",
+        "intent": {
+          "audience": "general",
+          "status": "experimental",
+          "summary": "Compact bordered card that groups overview-page actions, optional values or status tags, and native destinations into named sections.",
+          "useWhen": [
+            "An overview rail needs a compact action center with multiple named groups.",
+            "Action rows need optional counts or short values aligned at the trailing edge.",
+            "Related reports or resource destinations belong beside attention items in one bounded surface."
+          ],
+          "avoidWhen": [
+            "The complete card leads to one destination; use CardNavigation.",
+            "The surface edits settings in place; use CardSetting.",
+            "The content is a chart, legend, metric visualization, or other data-visualization composition; use CardChart or CardOverview.",
+            "Rows require descriptions, nested controls, menus, or selection state instead of one direct action."
+          ],
+          "alternatives": [
+            {
+              "when": "The entire surface represents one destination.",
+              "component": "component:ds-card-navigation",
+              "reason": "CardNavigation provides the single native-link card contract."
+            },
+            {
+              "when": "The card presents page-level score and metric summaries.",
+              "component": "component:ds-card-overview",
+              "reason": "CardOverview owns summary metrics, comparison periods, and selectable metric cells."
+            }
+          ],
+          "commonlyComposedWith": [
+            "component:ds-tag",
+            "component:ds-text"
+          ],
+          "accessibility": [
+            "Each non-empty group is a section labelled by an h2 heading, and each row is a native button or link.",
+            "Use href for real destinations so link context menus, modified clicks, and native browser semantics remain available.",
+            "Prevent the cancelable dsAction event only when an application router takes ownership of the same link activation.",
+            "Inactive items become disabled buttons and are removed from keyboard navigation rather than exposing a false destination.",
+            "Keep item labels concise; a visible trailing value participates in the action's accessible name."
+          ],
+          "states": [
+            "Rows expose distinct rest, hover, pressed, keyboard-focus, and inactive states.",
+            "An empty sections array or groups with no items render the configured empty message.",
+            "The application owns loading, error, permission, routing, and post-activation consequences and reflects availability through the supplied item data."
+          ],
+          "responsiveBehavior": [
+            "The card fills its parent width and never establishes a product breakpoint.",
+            "Long labels wrap while trailing values remain visible; the page owns rail width and movement below primary content.",
+            "Groups retain their order when the parent layout moves the complete card between desktop and mobile regions."
+          ],
+          "frameworkCaveats": {
+            "customElements": [
+              "Assign sections as a JavaScript property; complex arrays are not supported as string attributes.",
+              "Listen for dsAction and inspect sectionId, itemId, item, and the original pointer event."
+            ],
+            "react": [
+              "Pass sections as an array and handle onDsAction for product actions or client-side routing.",
+              "Prevent the event only when replacing native navigation for an item with href."
+            ],
+            "angular": [
+              "Bind [sections] through the generated standalone adapter and inspect $event.detail from (dsAction).",
+              "Keep product data and activation consequences in the Angular owner rather than embedding them in the component contract."
+            ]
+          },
+          "references": [
+            {
+              "label": "Storybook grouped, value, and empty examples",
+              "path": "src/wc/components/CardActionCenter/CardActionCenter.stories.ts"
+            },
+            {
+              "label": "Rendered semantics, interaction, and geometry coverage",
+              "path": "tests/e2e/card-action-center.spec.ts"
+            }
+          ]
+        },
+        "props": {
+          "emptyMessage": {
+            "type": "string",
+            "required": false
+          },
+          "sections": {
+            "type": "ReadonlyArray<CardActionCenterSection>",
+            "required": false
+          }
+        },
+        "events": [
+          {
+            "name": "dsAction",
+            "detail": "CardActionCenterActionDetail"
+          }
+        ],
+        "slots": [],
+        "exports": {
+          "customElement": "ds-card-action-center",
+          "react": "DsCardActionCenter",
+          "vue": "DsCardActionCenter",
+          "angular": "DsCardActionCenter"
+        }
+      },
+      "dependencies": [
+        "@ds-mo/ui",
+        "@ds-mo/tokens"
+      ],
+      "registryDependencies": [
+        "divider",
+        "tag",
+        "text"
+      ]
+    },
     {
       "name": "card-chart",
       "title": "CardChart",
@@ -7634,7 +7752,7 @@
             "Use isInactive only for a temporarily unavailable visible tool; omit tools the user is not authorized to access.",
             "Rail actions disable physical press scaling so notification-dot halos remain aligned to the shell gradient; hover and pressed washes continue to paint above the dot and halo.",
             "Rail tooltips are shell-owned and position against the viewport so the narrow tools-lane collision boundary cannot clamp them beyond the viewport edge.",
-            "The PanelTools host is the composed-tree overlay collision owner for menus and filter popups inside tool views. Drawer presentation keeps that rectangle on the rail-and-drawer column. Fullscreen presentation uses the fixed fullscreen surface, not the leftover ShellApp tools-lane box, so history-pane and header menus stay next to their triggers.",
+            "The PanelTools host is the composed-tree overlay collision owner for menus and filter popups inside tool views. Drawer presentation keeps that rectangle on the rail-and-drawer column. Fullscreen presentation uses the available ShellApp stage below its banner as the collision surface, so history-pane and header menus stay next to their triggers.",
             "ds-menu and ds-filter-menu remain on the native popover top layer. Applications must not set boundary=viewport or position those popups to work around fullscreen collision.",
             "The application owns slotted tool products and data while PanelTools owns rail ordering, drawer selection, open state, motion, and shell events.",
             "Opening and closing clip an already-rendered fixed-width surface. Header and tool content remain fully opaque and retained during width motion; transition completion is accepted only at the measured terminal clip width, after which the closed surface becomes inert and paint-skipped.",

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

@@ -694,7 +694,7 @@
   "files": [
     {
       "path": "src/wc/components/ShellApp/ShellApp.css",
-      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family-ui, system-ui);\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n  --ds-shell-gradient-context: flat;\n}\n\n:host {\n  --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n:host(.shell-app--gradient) {\n  --ds-shell-gradient-context: gradient;\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 0;\n  min-height: 0;\n  position: relative;\n}\n\n.shell-app__banner {\n  --_shell-banner-edge-display: none;\n  flex: 0 0 auto;\n  min-width: 0;\n  position: relative;\n  z-index: 5;\n}\n\n.shell-app__banner ::slotted(ds-banner) {\n  display: grid;\n  width: 100%;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  overflow: hidden;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__paper-texture {\n  z-index: 2;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__panel > ds-panel-nav {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__mobile-sheet-nav,\n.shell-app__mobile-bar-nav {\n  display: none;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__bar ::slotted(ds-bar-title),\n.shell-app__bar ::slotted(ds-bar-page-title) {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-nav {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-title,\n.shell-app__bar > ds-bar-page-title {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Layout scroller, not a control: keep it keyboard-focusable without a page-sized ring. */\n.shell-app__content:focus,\n.shell-app__content:focus-visible {\n  outline: none;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools ::slotted(ds-shell-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools > ds-shell-tools {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tool-slot-proxy {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.shell-app__content > ds-shell-page {\n  display: block;\n  min-height: 100%;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n}\n\n:host(.shell-app--mobile) {\n  --_shell-chrome-bg: var(--color-background-primary);\n  padding-block-start: env(safe-area-inset-top);\n  background: var(--ds-shell-safe-area-background, var(--color-background-primary));\n}\n\n:host(.shell-app--mobile) .shell-app__banner {\n  --_shell-banner-edge-display: block;\n}\n\n/* Refresh the Mobile WebKit stage layer without remounting app content. */\n:host(.shell-app--mobile.shell-app--foreground-refresh) .shell-app__main {\n  transform: translateZ(0);\n}\n\n:host(.shell-app--mobile) .shell-app__chrome,\n:host(.shell-app--mobile) .shell-app__panel,\n:host(.shell-app--mobile) .shell-app__bar {\n  display: none;\n}\n\n:host(.shell-app--mobile) .shell-app__main {\n  width: 100%;\n  box-sizing: border-box;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'stage'\n    'mobile-bar-nav';\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__content,\n:host(.shell-app--mobile) .shell-app__tools,\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  grid-area: stage;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n:host(.shell-app--mobile) .shell-app__content {\n  z-index: 1;\n  overflow: auto;\n}\n\n:host(.shell-app--mobile) .shell-app__tools {\n  z-index: 2;\n  width: 100%;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  display: block;\n  z-index: 3;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav {\n  grid-area: mobile-bar-nav;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 4;\n}\n\n:host(.shell-app--mobile) .shell-app__tools[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav[hidden] {\n  display: none;\n}\n\n:host(.shell-app--mobile-tool-active) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__tools {\n  visibility: hidden;\n}\n",
+      "content": ":host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family-ui, system-ui);\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n  --ds-shell-gradient-context: flat;\n}\n\n:host {\n  --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n:host(.shell-app--gradient) {\n  --ds-shell-gradient-context: gradient;\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 0;\n  min-height: 0;\n  position: relative;\n}\n\n.shell-app__banner {\n  --_shell-banner-edge-display: none;\n  flex: 0 0 auto;\n  min-width: 0;\n  position: relative;\n  z-index: 5;\n}\n\n.shell-app__banner ::slotted(ds-banner) {\n  display: grid;\n  width: 100%;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  overflow: hidden;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__paper-texture {\n  z-index: 2;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__panel > ds-panel-nav {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__mobile-sheet-nav,\n.shell-app__mobile-bar-nav {\n  display: none;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__bar ::slotted(ds-bar-title),\n.shell-app__bar ::slotted(ds-bar-page-title) {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-nav {\n  display: block;\n}\n\n.shell-app__bar > ds-bar-title,\n.shell-app__bar > ds-bar-page-title {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Layout scroller, not a control: keep it keyboard-focusable without a page-sized ring. */\n.shell-app__content:focus,\n.shell-app__content:focus-visible {\n  outline: none;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools ::slotted(ds-shell-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools > ds-shell-tools {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tool-slot-proxy {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.shell-app__content > ds-shell-page {\n  display: block;\n  min-height: 100%;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__row {\n  /* Anchor fixed fullscreen tools to the available stage below the banner. */\n  contain: layout;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__main {\n  /* Above panel chrome while remaining below the global banner layer. */\n  z-index: 3;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__tools {\n  /* Fullscreen tools must outrank retained page-owned overlays in content. */\n  z-index: 2;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n  /* Descendants can override visibility, but must not paint through tools. */\n  content-visibility: hidden;\n}\n\n:host(.shell-app--mobile) {\n  --_shell-chrome-bg: var(--color-background-primary);\n  padding-block-start: env(safe-area-inset-top);\n  background: var(--ds-shell-safe-area-background, var(--color-background-primary));\n}\n\n:host(.shell-app--mobile) .shell-app__banner {\n  --_shell-banner-edge-display: block;\n}\n\n/* Refresh the Mobile WebKit stage layer without remounting app content. */\n:host(.shell-app--mobile.shell-app--foreground-refresh) .shell-app__main {\n  transform: translateZ(0);\n}\n\n:host(.shell-app--mobile) .shell-app__chrome,\n:host(.shell-app--mobile) .shell-app__panel,\n:host(.shell-app--mobile) .shell-app__bar {\n  display: none;\n}\n\n:host(.shell-app--mobile) .shell-app__main {\n  width: 100%;\n  box-sizing: border-box;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'stage'\n    'mobile-bar-nav';\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__content,\n:host(.shell-app--mobile) .shell-app__tools,\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  grid-area: stage;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n:host(.shell-app--mobile) .shell-app__content {\n  z-index: 1;\n  overflow: auto;\n}\n\n:host(.shell-app--mobile) .shell-app__tools {\n  z-index: 2;\n  width: 100%;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  display: block;\n  z-index: 3;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav {\n  grid-area: mobile-bar-nav;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 4;\n}\n\n:host(.shell-app--mobile) .shell-app__tools[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav[hidden] {\n  display: none;\n}\n\n:host(.shell-app--mobile-tool-active) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__tools {\n  visibility: hidden;\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/react/components.d.ts

@@ -19,6 +19,7 @@ export { DsBarWorkflow } from "./ds-bar-workflow.js";
 export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
+export { DsCardActionCenter } from "./ds-card-action-center.js";
 export { DsCardChart } from "./ds-card-chart.js";
 export { DsCardNavigation } from "./ds-card-navigation.js";
 export { DsCardOverview } from "./ds-card-overview.js";

package/dist/react/components.js

@@ -20,6 +20,7 @@ export { DsBarWorkflow } from "./ds-bar-workflow.js";
 export { DsBreadcrumb } from "./ds-breadcrumb.js";
 export { DsButtonFilled } from "./ds-button-filled.js";
 export { DsButtonUnfilled } from "./ds-button-unfilled.js";
+export { DsCardActionCenter } from "./ds-card-action-center.js";
 export { DsCardChart } from "./ds-card-chart.js";
 export { DsCardNavigation } from "./ds-card-navigation.js";
 export { DsCardOverview } from "./ds-card-overview.js";

package/dist/react/ds-card-action-center.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type CardActionCenterActionDetail, type DsCardActionCenterCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardActionCenter as DsCardActionCenterElement } from "@ds-mo/ui/dist/components/ds-card-action-center.js";
+export type DsCardActionCenterEvents = {
+    onDsAction: EventName<DsCardActionCenterCustomEvent<CardActionCenterActionDetail>>;
+};
+export declare const DsCardActionCenter: StencilReactComponent<DsCardActionCenterElement, DsCardActionCenterEvents, Components.DsCardActionCenter>;

package/dist/react/ds-card-action-center.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsCardActionCenter as DsCardActionCenterElement, defineCustomElement as defineDsCardActionCenter } from "@ds-mo/ui/dist/components/ds-card-action-center.js";
+export const DsCardActionCenter = /*@__PURE__*/ createComponent({
+    tagName: 'ds-card-action-center',
+    elementClass: DsCardActionCenterElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsAction: 'dsAction' },
+    defineCustomElement: defineDsCardActionCenter
+});

package/dist/types/components/CardActionCenter/CardActionCenter.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { TagContrast, TagIntent } from '../Tag/Tag';
+export interface CardActionCenterTag {
+    intent?: TagIntent;
+    contrast?: TagContrast;
+}
+export interface CardActionCenterItem {
+    id: string;
+    label: string;
+    value?: string | number;
+    tag?: CardActionCenterTag;
+    href?: string;
+    isInactive?: boolean;
+}
+export interface CardActionCenterSection {
+    id: string;
+    heading: string;
+    items: ReadonlyArray<CardActionCenterItem>;
+}
+export interface CardActionCenterActionDetail {
+    sectionId: string;
+    itemId: string;
+    item: CardActionCenterItem;
+    href?: string;
+    originalEvent: MouseEvent;
+}
+export declare class CardActionCenter {
+    /** Ordered groups of actions rendered in the card. Empty groups are omitted. */
+    sections: ReadonlyArray<CardActionCenterSection>;
+    /** Copy shown when no section contains an action. */
+    emptyMessage: string;
+    /**
+     * Emitted when an available row is activated. When a row has an `href`,
+     * prevent this event to take over navigation with an application router.
+     */
+    dsAction: EventEmitter<CardActionCenterActionDetail>;
+    private readonly instanceId;
+    private get visibleSections();
+    private headingId;
+    private handleAction;
+    private renderValue;
+    private renderItem;
+    render(): any;
+}
+//# sourceMappingURL=CardActionCenter.d.ts.map

package/dist/types/components/CardActionCenter/index.d.ts

@@ -0,0 +1,2 @@
+export type { CardActionCenterActionDetail, CardActionCenterItem, CardActionCenterSection, CardActionCenterTag, } from './CardActionCenter';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/PanelTools/PanelTools.d.ts

@@ -5,7 +5,7 @@ export declare class PanelTools {
     el: HTMLElement;
     /** When false, only the icon rail is shown. */
     open: boolean;
-    /** Drawer presentation or viewport-covering presentation for the active tool. */
+    /** Drawer presentation or presentation covering the shell stage for the active tool. */
     presentation: 'drawer' | 'fullscreen';
     /** Let a fullscreen product supply independent master/detail headers inside its view. */
     fullscreenHeaderMode: 'shared' | 'split';

package/dist/types/components.d.ts

@@ -19,6 +19,7 @@ import { MobileDestination, ShellResponsiveMode } from "./shell/shell-responsive
 import { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledPopup, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
 import { ControlInsetDepth, ControlSize } from "./utils/control-text";
 import { ButtonUnfilledBackground, ButtonUnfilledPopup, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
+import { CardActionCenterActionDetail, CardActionCenterSection } from "./components/CardActionCenter/CardActionCenter";
 import { CardChartVariant, CardChartWidth } from "./components/CardChart/CardChart";
 import { CardNavigationDetail, CardNavigationVariant, CardNavigationWidth } from "./components/CardNavigation/CardNavigation";
 import { CardOverviewLayout, CardOverviewVariant, OverviewMetric, OverviewScore } from "./components/CardOverview/card-overview-types";
@@ -93,6 +94,7 @@ export { MobileDestination, ShellResponsiveMode } from "./shell/shell-responsive
 export { ButtonFilledBackground, ButtonFilledContrast, ButtonFilledIntent, ButtonFilledPopup, ButtonFilledSize, ButtonFilledVariant, ButtonFilledWidth } from "./components/ButtonFilled/ButtonFilled";
 export { ControlInsetDepth, ControlSize } from "./utils/control-text";
 export { ButtonUnfilledBackground, ButtonUnfilledPopup, ButtonUnfilledSize, ButtonUnfilledVariant, ButtonUnfilledWidth } from "./components/ButtonUnfilled/ButtonUnfilled";
+export { CardActionCenterActionDetail, CardActionCenterSection } from "./components/CardActionCenter/CardActionCenter";
 export { CardChartVariant, CardChartWidth } from "./components/CardChart/CardChart";
 export { CardNavigationDetail, CardNavigationVariant, CardNavigationWidth } from "./components/CardNavigation/CardNavigation";
 export { CardOverviewLayout, CardOverviewVariant, OverviewMetric, OverviewScore } from "./components/CardOverview/card-overview-types";
@@ -896,6 +898,18 @@ export namespace Components {
          */
         "width": ButtonUnfilledWidth;
     }
+    interface DsCardActionCenter {
+        /**
+          * Copy shown when no section contains an action.
+          * @default 'No actions available'
+         */
+        "emptyMessage": string;
+        /**
+          * Ordered groups of actions rendered in the card. Empty groups are omitted.
+          * @default []
+         */
+        "sections": ReadonlyArray<CardActionCenterSection>;
+    }
     /**
      * Standard chart card chrome and composition. The variant owns
      * only the chart/legend relationship; applications continue to own data.
@@ -2512,7 +2526,7 @@ export namespace Components {
          */
         "open": boolean;
         /**
-          * Drawer presentation or viewport-covering presentation for the active tool.
+          * Drawer presentation or presentation covering the shell stage for the active tool.
           * @default 'drawer'
          */
         "presentation": 'drawer' | 'fullscreen';
@@ -4171,6 +4185,10 @@ export interface DsButtonUnfilledCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsButtonUnfilledElement;
 }
+export interface DsCardActionCenterCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsCardActionCenterElement;
+}
 export interface DsCardChartCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsCardChartElement;
@@ -4598,6 +4616,23 @@ declare global {
         prototype: HTMLDsButtonUnfilledElement;
         new (): HTMLDsButtonUnfilledElement;
     };
+    interface HTMLDsCardActionCenterElementEventMap {
+        "dsAction": CardActionCenterActionDetail;
+    }
+    interface HTMLDsCardActionCenterElement extends Components.DsCardActionCenter, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsCardActionCenterElementEventMap>(type: K, listener: (this: HTMLDsCardActionCenterElement, ev: DsCardActionCenterCustomEvent<HTMLDsCardActionCenterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsCardActionCenterElementEventMap>(type: K, listener: (this: HTMLDsCardActionCenterElement, ev: DsCardActionCenterCustomEvent<HTMLDsCardActionCenterElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsCardActionCenterElement: {
+        prototype: HTMLDsCardActionCenterElement;
+        new (): HTMLDsCardActionCenterElement;
+    };
     interface HTMLDsCardChartElementEventMap {
         "dsFilterClick": void;
     }
@@ -5642,6 +5677,7 @@ declare global {
         "ds-breadcrumb": HTMLDsBreadcrumbElement;
         "ds-button-filled": HTMLDsButtonFilledElement;
         "ds-button-unfilled": HTMLDsButtonUnfilledElement;
+        "ds-card-action-center": HTMLDsCardActionCenterElement;
         "ds-card-chart": HTMLDsCardChartElement;
         "ds-card-navigation": HTMLDsCardNavigationElement;
         "ds-card-overview": HTMLDsCardOverviewElement;
@@ -6520,6 +6556,22 @@ declare namespace LocalJSX {
          */
         "width"?: ButtonUnfilledWidth;
     }
+    interface DsCardActionCenter {
+        /**
+          * Copy shown when no section contains an action.
+          * @default 'No actions available'
+         */
+        "emptyMessage"?: string;
+        /**
+          * Emitted when an available row is activated. When a row has an `href`, prevent this event to take over navigation with an application router.
+         */
+        "onDsAction"?: (event: DsCardActionCenterCustomEvent<CardActionCenterActionDetail>) => void;
+        /**
+          * Ordered groups of actions rendered in the card. Empty groups are omitted.
+          * @default []
+         */
+        "sections"?: ReadonlyArray<CardActionCenterSection>;
+    }
     /**
      * Standard chart card chrome and composition. The variant owns
      * only the chart/legend relationship; applications continue to own data.
@@ -8303,7 +8355,7 @@ declare namespace LocalJSX {
          */
         "open"?: boolean;
         /**
-          * Drawer presentation or viewport-covering presentation for the active tool.
+          * Drawer presentation or presentation covering the shell stage for the active tool.
           * @default 'drawer'
          */
         "presentation"?: 'drawer' | 'fullscreen';
@@ -10239,6 +10291,9 @@ declare namespace LocalJSX {
         "hasMenu": boolean;
         "focusTabIndex": number;
     }
+    interface DsCardActionCenterAttributes {
+        "emptyMessage": string;
+    }
     interface DsCardChartAttributes {
         "heading": string;
         "variant": CardChartVariant;
@@ -10996,6 +11051,7 @@ declare namespace LocalJSX {
         "ds-breadcrumb": Omit<DsBreadcrumb, keyof DsBreadcrumbAttributes> & { [K in keyof DsBreadcrumb & keyof DsBreadcrumbAttributes]?: DsBreadcrumb[K] } & { [K in keyof DsBreadcrumb & keyof DsBreadcrumbAttributes as `attr:${K}`]?: DsBreadcrumbAttributes[K] } & { [K in keyof DsBreadcrumb & keyof DsBreadcrumbAttributes as `prop:${K}`]?: DsBreadcrumb[K] };
         "ds-button-filled": Omit<DsButtonFilled, keyof DsButtonFilledAttributes> & { [K in keyof DsButtonFilled & keyof DsButtonFilledAttributes]?: DsButtonFilled[K] } & { [K in keyof DsButtonFilled & keyof DsButtonFilledAttributes as `attr:${K}`]?: DsButtonFilledAttributes[K] } & { [K in keyof DsButtonFilled & keyof DsButtonFilledAttributes as `prop:${K}`]?: DsButtonFilled[K] };
         "ds-button-unfilled": Omit<DsButtonUnfilled, keyof DsButtonUnfilledAttributes> & { [K in keyof DsButtonUnfilled & keyof DsButtonUnfilledAttributes]?: DsButtonUnfilled[K] } & { [K in keyof DsButtonUnfilled & keyof DsButtonUnfilledAttributes as `attr:${K}`]?: DsButtonUnfilledAttributes[K] } & { [K in keyof DsButtonUnfilled & keyof DsButtonUnfilledAttributes as `prop:${K}`]?: DsButtonUnfilled[K] };
+        "ds-card-action-center": Omit<DsCardActionCenter, keyof DsCardActionCenterAttributes> & { [K in keyof DsCardActionCenter & keyof DsCardActionCenterAttributes]?: DsCardActionCenter[K] } & { [K in keyof DsCardActionCenter & keyof DsCardActionCenterAttributes as `attr:${K}`]?: DsCardActionCenterAttributes[K] } & { [K in keyof DsCardActionCenter & keyof DsCardActionCenterAttributes as `prop:${K}`]?: DsCardActionCenter[K] };
         "ds-card-chart": Omit<DsCardChart, keyof DsCardChartAttributes> & { [K in keyof DsCardChart & keyof DsCardChartAttributes]?: DsCardChart[K] } & { [K in keyof DsCardChart & keyof DsCardChartAttributes as `attr:${K}`]?: DsCardChartAttributes[K] } & { [K in keyof DsCardChart & keyof DsCardChartAttributes as `prop:${K}`]?: DsCardChart[K] } & OneOf<"heading", DsCardChart["heading"], DsCardChartAttributes["heading"]>;
         "ds-card-navigation": Omit<DsCardNavigation, keyof DsCardNavigationAttributes> & { [K in keyof DsCardNavigation & keyof DsCardNavigationAttributes]?: DsCardNavigation[K] } & { [K in keyof DsCardNavigation & keyof DsCardNavigationAttributes as `attr:${K}`]?: DsCardNavigationAttributes[K] } & { [K in keyof DsCardNavigation & keyof DsCardNavigationAttributes as `prop:${K}`]?: DsCardNavigation[K] } & OneOf<"href", DsCardNavigation["href"], DsCardNavigationAttributes["href"]> & OneOf<"heading", DsCardNavigation["heading"], DsCardNavigationAttributes["heading"]>;
         "ds-card-overview": Omit<DsCardOverview, keyof DsCardOverviewAttributes> & { [K in keyof DsCardOverview & keyof DsCardOverviewAttributes]?: DsCardOverview[K] } & { [K in keyof DsCardOverview & keyof DsCardOverviewAttributes as `attr:${K}`]?: DsCardOverviewAttributes[K] } & { [K in keyof DsCardOverview & keyof DsCardOverviewAttributes as `prop:${K}`]?: DsCardOverview[K] };
@@ -11084,6 +11140,7 @@ declare module "@stencil/core" {
             "ds-breadcrumb": LocalJSX.IntrinsicElements["ds-breadcrumb"] & JSXBase.HTMLAttributes<HTMLDsBreadcrumbElement>;
             "ds-button-filled": LocalJSX.IntrinsicElements["ds-button-filled"] & JSXBase.HTMLAttributes<HTMLDsButtonFilledElement>;
             "ds-button-unfilled": LocalJSX.IntrinsicElements["ds-button-unfilled"] & JSXBase.HTMLAttributes<HTMLDsButtonUnfilledElement>;
+            "ds-card-action-center": LocalJSX.IntrinsicElements["ds-card-action-center"] & JSXBase.HTMLAttributes<HTMLDsCardActionCenterElement>;
             /**
              * Standard chart card chrome and composition. The variant owns
              * only the chart/legend relationship; applications continue to own data.

package/dist/vue/components.d.ts

@@ -19,6 +19,7 @@ export { DsBarWorkflow } from './ds-bar-workflow.js';
 export { DsBreadcrumb } from './ds-breadcrumb.js';
 export { DsButtonFilled } from './ds-button-filled.js';
 export { DsButtonUnfilled } from './ds-button-unfilled.js';
+export { DsCardActionCenter } from './ds-card-action-center.js';
 export { DsCardChart } from './ds-card-chart.js';
 export { DsCardNavigation } from './ds-card-navigation.js';
 export { DsCardOverview } from './ds-card-overview.js';

package/dist/vue/components.js

@@ -21,6 +21,7 @@ export { DsBarWorkflow } from './ds-bar-workflow.js';
 export { DsBreadcrumb } from './ds-breadcrumb.js';
 export { DsButtonFilled } from './ds-button-filled.js';
 export { DsButtonUnfilled } from './ds-button-unfilled.js';
+export { DsCardActionCenter } from './ds-card-action-center.js';
 export { DsCardChart } from './ds-card-chart.js';
 export { DsCardNavigation } from './ds-card-navigation.js';
 export { DsCardOverview } from './ds-card-overview.js';

package/dist/vue/ds-card-action-center.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsCardActionCenter: StencilVueComponent<JSX.DsCardActionCenter>;

package/dist/vue/ds-card-action-center.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsCardActionCenter } from '@ds-mo/ui/components/ds-card-action-center.js';
+export const DsCardActionCenter = /*@__PURE__*/ defineContainer('ds-card-action-center', defineDsCardActionCenter, [
+    'sections',
+    'emptyMessage',
+    'dsAction'
+], [
+    'dsAction'
+]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.32.1",
+  "version": "14.33.1",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",