@ds-mo/ui 12.2.0 → 12.4.0

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

@@ -349,7 +349,7 @@
   "files": [
     {
       "path": "src/wc/components/Text/Text.css",
-      "content": "@import '../../utils/typography.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  box-sizing: border-box;\n  max-width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-family: var(--typography-font-family);\n}\n\n:host(:where(.ds-text--inline-box)) {\n  display: inline-block;\n}\n\n:host(:where(.ds-text--block-box)) {\n  display: block;\n  width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  text-decoration: inherit;\n  font-style: inherit;\n  font-variant-numeric: inherit;\n  font-feature-settings: inherit;\n  -webkit-user-select: inherit;\n  user-select: inherit;\n  white-space: inherit;\n  text-wrap: inherit;\n  overflow-wrap: inherit;\n  word-break: inherit;\n  /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n     text node — overflow/text-overflow are not inherited by default. */\n  overflow: inherit;\n  text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element { -webkit-line-clamp: 2; }\n:host(.ds-text--truncate-3) .ds-text__element { -webkit-line-clamp: 3; }\n:host(.ds-text--truncate-4) .ds-text__element { -webkit-line-clamp: 4; }\n:host(.ds-text--truncate-5) .ds-text__element { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n  white-space: nowrap;\n  word-break: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element { text-wrap: balance; }\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary)   { color: var(--color-foreground-primary); }\n:host(.ds-text--color-secondary) { color: var(--color-foreground-secondary); }\n:host(.ds-text--color-tertiary)  { color: var(--color-foreground-tertiary); }\n:host(.ds-text--color-quaternary) { color: var(--color-foreground-quaternary); }\n:host(.ds-text--color-brand)     { color: var(--color-foreground-bold-brand); }\n:host(.ds-text--color-negative)  { color: var(--color-foreground-bold-negative); }\n:host(.ds-text--color-positive)  { color: var(--color-foreground-bold-positive); }\n:host(.ds-text--color-warning)   { color: var(--color-foreground-bold-warning); }\n:host(.ds-text--color-caution)   { color: var(--color-foreground-bold-caution); }\n:host(.ds-text--color-ai)        { color: var(--color-foreground-bold-ai); }\n:host(.ds-text--color-on-strong) { color: var(--color-foreground-on-strong-background-primary); }\n:host(.ds-text--color-on-bold)   { color: var(--color-foreground-on-bold-background-primary); }\n:host(.ds-text--color-inherit)   { color: inherit; }\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline) {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n:host(.ds-text--decoration-dotted-underline) {\n  text-decoration: underline dotted;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--italic) { font-style: italic; }\n\n:host(.ds-text--font-feature-tabular-nums) {\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left)   { text-align: left; }\n:host(.ds-text--align-center) { text-align: center; }\n:host(.ds-text--align-right)  { text-align: right; }\n",
+      "content": "@import '../../utils/typography.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  box-sizing: border-box;\n  max-width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-family: var(--typography-font-family);\n}\n\n:host(:where(.ds-text--inline-box)) {\n  display: inline-block;\n}\n\n:host(:where(.ds-text--block-box)) {\n  display: block;\n  width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  text-decoration: inherit;\n  font-style: inherit;\n  font-variant-numeric: inherit;\n  font-feature-settings: inherit;\n  -webkit-user-select: inherit;\n  user-select: inherit;\n  white-space: inherit;\n  text-wrap: inherit;\n  overflow-wrap: inherit;\n  word-break: inherit;\n  /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n     text node — overflow/text-overflow are not inherited by default. */\n  overflow: inherit;\n  text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element { -webkit-line-clamp: 2; }\n:host(.ds-text--truncate-3) .ds-text__element { -webkit-line-clamp: 3; }\n:host(.ds-text--truncate-4) .ds-text__element { -webkit-line-clamp: 4; }\n:host(.ds-text--truncate-5) .ds-text__element { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n  white-space: nowrap;\n  word-break: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element { text-wrap: balance; }\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary)   { color: var(--color-foreground-primary); }\n:host(.ds-text--color-secondary) { color: var(--color-foreground-secondary); }\n:host(.ds-text--color-tertiary)  { color: var(--color-foreground-tertiary); }\n:host(.ds-text--color-quaternary) { color: var(--color-foreground-quaternary); }\n:host(.ds-text--color-brand)     { color: var(--color-foreground-bold-brand); }\n:host(.ds-text--color-negative)  { color: var(--color-foreground-bold-negative); }\n:host(.ds-text--color-positive)  { color: var(--color-foreground-bold-positive); }\n:host(.ds-text--color-warning)   { color: var(--color-foreground-bold-warning); }\n:host(.ds-text--color-caution)   { color: var(--color-foreground-bold-caution); }\n:host(.ds-text--color-ai)        { color: var(--color-foreground-bold-ai); }\n:host(.ds-text--color-on-strong) { color: var(--color-foreground-on-strong-background-primary); }\n:host(.ds-text--color-on-bold)   { color: var(--color-foreground-on-bold-background-primary); }\n:host(.ds-text--color-inherit)   { color: inherit; }\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline) {\n  text-decoration: underline;\n  text-decoration-color: var(--color-foreground-tertiary);\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n:host(.ds-text--decoration-dotted-underline) {\n  text-decoration: underline dotted;\n  text-decoration-color: var(--color-foreground-tertiary);\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--italic) { font-style: italic; }\n\n:host(.ds-text--font-feature-tabular-nums) {\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left)   { text-align: left; }\n:host(.ds-text--align-center) { text-align: center; }\n:host(.ds-text--align-right)  { text-align: right; }\n",
       "type": "registry:ui"
     },
     {

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

@@ -29,12 +29,12 @@
         "pattern:conversation"
       ],
       "accessibility": [
-        "Provide concise localized status text that names the participant when that context is not otherwise clear.",
+        "Provide concise localized status text; the standard label is Typing followed by a three-dot ellipsis.",
         "The polite atomic status announces typing without representing it as a message bubble."
       ],
       "states": [
         "TypingIndicator is transient conversation status, never persisted message content.",
-        "Its body-small secondary text may shimmer, while reduced-motion preferences retain a static readable status."
+        "Its body-medium secondary text may shimmer, while reduced-motion preferences retain a static readable status."
       ],
       "responsiveBehavior": [
         "The indicator fills the message content width and wraps only when localized status text requires it."
@@ -52,10 +52,10 @@
           "type": "string",
           "resolvedType": "string",
           "attribute": "label",
-          "default": "'Typing…'",
+          "default": "'Typing...'",
           "required": false,
           "mutable": false,
-          "description": "Concise localized status text, ideally naming the participant who is typing."
+          "description": "Concise localized typing status."
         }
       },
       "events": [],
@@ -67,10 +67,10 @@
         "type": "string",
         "resolvedType": "string",
         "attribute": "label",
-        "default": "'Typing…'",
+        "default": "'Typing...'",
         "required": false,
         "mutable": false,
-        "description": "Concise localized status text, ideally naming the participant who is typing."
+        "description": "Concise localized typing status."
       }
     },
     "events": [],
@@ -120,7 +120,7 @@
     },
     {
       "path": "src/wc/components/TypingIndicator/TypingIndicator.tsx",
-      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ds-typing-indicator',\n  styleUrl: 'TypingIndicator.css',\n  scoped: true,\n})\nexport class TypingIndicator {\n  /** Concise localized status text, ideally naming the participant who is typing. */\n  @Prop() label: string = 'Typing…';\n\n  render() {\n    return (\n      <Host role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        <ds-text as=\"span\" variant=\"text-body-small\" color=\"secondary\" shimmer>\n          {this.label}\n        </ds-text>\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ds-typing-indicator',\n  styleUrl: 'TypingIndicator.css',\n  scoped: true,\n})\nexport class TypingIndicator {\n  /** Concise localized typing status. */\n  @Prop() label: string = 'Typing...';\n\n  render() {\n    return (\n      <Host role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        <ds-text as=\"span\" variant=\"text-body-medium\" color=\"secondary\" shimmer>\n          {this.label}\n        </ds-text>\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/react/components.d.ts

@@ -12,11 +12,15 @@ export { DsBadge } from "./ds-badge.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsBarTitle } from "./ds-bar-title.js";
 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 { DsCardDataVizBar } from "./ds-card-data-viz-bar.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
+export { DsCardDataVizLine } from "./ds-card-data-viz-line.js";
 export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardShellDataViz } from "./ds-card-shell-data-viz.js";
+export { DsChartBarStacked } from "./ds-chart-bar-stacked.js";
 export { DsChartBar } from "./ds-chart-bar.js";
 export { DsChartDonut } from "./ds-chart-donut.js";
 export { DsChartLegend } from "./ds-chart-legend.js";
@@ -52,7 +56,11 @@ export { DsSelect } from "./ds-select.js";
 export { DsShellApp } from "./ds-shell-app.js";
 export { DsShellGradientPicker } from "./ds-shell-gradient-picker.js";
 export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.js";
+export { DsShellMobileBar } from "./ds-shell-mobile-bar.js";
+export { DsShellMobileNav } from "./ds-shell-mobile-nav.js";
+export { DsShellMobileSectionNav } from "./ds-shell-mobile-section-nav.js";
 export { DsShellPage } from "./ds-shell-page.js";
+export { DsShellTools } from "./ds-shell-tools.js";
 export { DsSkeleton } from "./ds-skeleton.js";
 export { DsSlider } from "./ds-slider.js";
 export { DsSwatchPicker } from "./ds-swatch-picker.js";

package/dist/react/components.js

@@ -13,11 +13,15 @@ export { DsBadge } from "./ds-badge.js";
 export { DsBarNav } from "./ds-bar-nav.js";
 export { DsBarTitle } from "./ds-bar-title.js";
 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 { DsCardDataVizBar } from "./ds-card-data-viz-bar.js";
 export { DsCardDataVizDonut } from "./ds-card-data-viz-donut.js";
+export { DsCardDataVizLine } from "./ds-card-data-viz-line.js";
 export { DsCardSetting } from "./ds-card-setting.js";
 export { DsCardShellDataViz } from "./ds-card-shell-data-viz.js";
+export { DsChartBarStacked } from "./ds-chart-bar-stacked.js";
 export { DsChartBar } from "./ds-chart-bar.js";
 export { DsChartDonut } from "./ds-chart-donut.js";
 export { DsChartLegend } from "./ds-chart-legend.js";
@@ -53,7 +57,11 @@ export { DsSelect } from "./ds-select.js";
 export { DsShellApp } from "./ds-shell-app.js";
 export { DsShellGradientPicker } from "./ds-shell-gradient-picker.js";
 export { DsShellGradientSwatch } from "./ds-shell-gradient-swatch.js";
+export { DsShellMobileBar } from "./ds-shell-mobile-bar.js";
+export { DsShellMobileNav } from "./ds-shell-mobile-nav.js";
+export { DsShellMobileSectionNav } from "./ds-shell-mobile-section-nav.js";
 export { DsShellPage } from "./ds-shell-page.js";
+export { DsShellTools } from "./ds-shell-tools.js";
 export { DsSkeleton } from "./ds-skeleton.js";
 export { DsSlider } from "./ds-slider.js";
 export { DsSwatchPicker } from "./ds-swatch-picker.js";

package/dist/react/ds-bar-title.d.ts

@@ -3,11 +3,12 @@
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
 import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
-import { type DsBarTitleCustomEvent } from "@ds-mo/ui";
+import { type BreadcrumbSelectDetail, type DsBarTitleCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsBarTitle as DsBarTitleElement } from "@ds-mo/ui/dist/components/ds-bar-title.js";
 export type DsBarTitleEvents = {
     onDsBack: EventName<DsBarTitleCustomEvent<MouseEvent>>;
+    onDsBreadcrumbSelect: EventName<DsBarTitleCustomEvent<BreadcrumbSelectDetail>>;
     onDsSectionChange: EventName<DsBarTitleCustomEvent<string>>;
     onDsAction: EventName<DsBarTitleCustomEvent<string>>;
 };

package/dist/react/ds-bar-title.js

@@ -9,6 +9,7 @@ export const DsBarTitle = /*@__PURE__*/ createComponent({
     react: React,
     events: {
         onDsBack: 'dsBack',
+        onDsBreadcrumbSelect: 'dsBreadcrumbSelect',
         onDsSectionChange: 'dsSectionChange',
         onDsAction: 'dsAction'
     },

package/dist/react/ds-breadcrumb.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 '@stencil/react-output-target/runtime';
+import { type BreadcrumbSelectDetail, type DsBreadcrumbCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBreadcrumb as DsBreadcrumbElement } from "@ds-mo/ui/dist/components/ds-breadcrumb.js";
+export type DsBreadcrumbEvents = {
+    onDsSelect: EventName<DsBreadcrumbCustomEvent<BreadcrumbSelectDetail>>;
+};
+export declare const DsBreadcrumb: StencilReactComponent<DsBreadcrumbElement, DsBreadcrumbEvents, Components.DsBreadcrumb>;

package/dist/react/ds-breadcrumb.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsBreadcrumb as DsBreadcrumbElement, defineCustomElement as defineDsBreadcrumb } from "@ds-mo/ui/dist/components/ds-breadcrumb.js";
+export const DsBreadcrumb = /*@__PURE__*/ createComponent({
+    tagName: 'ds-breadcrumb',
+    elementClass: DsBreadcrumbElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsSelect: 'dsSelect' },
+    defineCustomElement: defineDsBreadcrumb
+});

package/dist/react/ds-card-data-viz-bar.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 '@stencil/react-output-target/runtime';
+import { type DsCardDataVizBarCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardDataVizBar as DsCardDataVizBarElement } from "@ds-mo/ui/dist/components/ds-card-data-viz-bar.js";
+export type DsCardDataVizBarEvents = {
+    onDsFilterClick: EventName<DsCardDataVizBarCustomEvent<void>>;
+};
+export declare const DsCardDataVizBar: StencilReactComponent<DsCardDataVizBarElement, DsCardDataVizBarEvents, Components.DsCardDataVizBar, 'heading'>;

package/dist/react/ds-card-data-viz-bar.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsCardDataVizBar as DsCardDataVizBarElement, defineCustomElement as defineDsCardDataVizBar } from "@ds-mo/ui/dist/components/ds-card-data-viz-bar.js";
+export const DsCardDataVizBar = /*@__PURE__*/ createComponent({
+    tagName: 'ds-card-data-viz-bar',
+    elementClass: DsCardDataVizBarElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsFilterClick: 'dsFilterClick' },
+    defineCustomElement: defineDsCardDataVizBar
+});

package/dist/react/ds-card-data-viz-line.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 '@stencil/react-output-target/runtime';
+import { type DsCardDataVizLineCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsCardDataVizLine as DsCardDataVizLineElement } from "@ds-mo/ui/dist/components/ds-card-data-viz-line.js";
+export type DsCardDataVizLineEvents = {
+    onDsFilterClick: EventName<DsCardDataVizLineCustomEvent<void>>;
+};
+export declare const DsCardDataVizLine: StencilReactComponent<DsCardDataVizLineElement, DsCardDataVizLineEvents, Components.DsCardDataVizLine, 'heading'>;

package/dist/react/ds-card-data-viz-line.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsCardDataVizLine as DsCardDataVizLineElement, defineCustomElement as defineDsCardDataVizLine } from "@ds-mo/ui/dist/components/ds-card-data-viz-line.js";
+export const DsCardDataVizLine = /*@__PURE__*/ createComponent({
+    tagName: 'ds-card-data-viz-line',
+    elementClass: DsCardDataVizLineElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsFilterClick: 'dsFilterClick' },
+    defineCustomElement: defineDsCardDataVizLine
+});

package/dist/react/ds-chart-bar-stacked.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsChartBarStacked as DsChartBarStackedElement } from "@ds-mo/ui/dist/components/ds-chart-bar-stacked.js";
+export type DsChartBarStackedEvents = NonNullable<unknown>;
+export declare const DsChartBarStacked: StencilReactComponent<DsChartBarStackedElement, DsChartBarStackedEvents, Components.DsChartBarStacked>;

package/dist/react/ds-chart-bar-stacked.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsChartBarStacked as DsChartBarStackedElement, defineCustomElement as defineDsChartBarStacked } from "@ds-mo/ui/dist/components/ds-chart-bar-stacked.js";
+export const DsChartBarStacked = /*@__PURE__*/ createComponent({
+    tagName: 'ds-chart-bar-stacked',
+    elementClass: DsChartBarStackedElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineDsChartBarStacked
+});

package/dist/react/ds-shell-app.d.ts

@@ -2,8 +2,13 @@
  * 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 { StencilReactComponent } from '@stencil/react-output-target/runtime';
+import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
+import { type DsShellAppCustomEvent, type ShellResponsiveMode } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsShellApp as DsShellAppElement } from "@ds-mo/ui/dist/components/ds-shell-app.js";
-export type DsShellAppEvents = NonNullable<unknown>;
+export type DsShellAppEvents = {
+    onDsResponsiveModeChange: EventName<DsShellAppCustomEvent<{
+        mode: ShellResponsiveMode;
+    }>>;
+};
 export declare const DsShellApp: StencilReactComponent<DsShellAppElement, DsShellAppEvents, Components.DsShellApp>;

package/dist/react/ds-shell-app.js

@@ -7,6 +7,6 @@ export const DsShellApp = /*@__PURE__*/ createComponent({
     elementClass: DsShellAppElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {},
+    events: { onDsResponsiveModeChange: 'dsResponsiveModeChange' },
     defineCustomElement: defineDsShellApp
 });

package/dist/react/ds-shell-mobile-bar.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 '@stencil/react-output-target/runtime';
+import { type DsShellMobileBarCustomEvent, type ShellMobileBarDestinationDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsShellMobileBar as DsShellMobileBarElement } from "@ds-mo/ui/dist/components/ds-shell-mobile-bar.js";
+export type DsShellMobileBarEvents = {
+    onDsNavigationToggle: EventName<DsShellMobileBarCustomEvent<boolean>>;
+    onDsDestinationChange: EventName<DsShellMobileBarCustomEvent<ShellMobileBarDestinationDetail>>;
+};
+export declare const DsShellMobileBar: StencilReactComponent<DsShellMobileBarElement, DsShellMobileBarEvents, Components.DsShellMobileBar>;

package/dist/react/ds-shell-mobile-bar.js

@@ -0,0 +1,15 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsShellMobileBar as DsShellMobileBarElement, defineCustomElement as defineDsShellMobileBar } from "@ds-mo/ui/dist/components/ds-shell-mobile-bar.js";
+export const DsShellMobileBar = /*@__PURE__*/ createComponent({
+    tagName: 'ds-shell-mobile-bar',
+    elementClass: DsShellMobileBarElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsNavigationToggle: 'dsNavigationToggle',
+        onDsDestinationChange: 'dsDestinationChange'
+    },
+    defineCustomElement: defineDsShellMobileBar
+});

package/dist/react/ds-shell-mobile-nav.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 '@stencil/react-output-target/runtime';
+import { type DsShellMobileNavCustomEvent, type NavChromeStyle, type ShellMobileNavAuxiliaryDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsShellMobileNav as DsShellMobileNavElement } from "@ds-mo/ui/dist/components/ds-shell-mobile-nav.js";
+export type DsShellMobileNavEvents = {
+    onDsAreaSelect: EventName<DsShellMobileNavCustomEvent<string>>;
+    onDsBrowseContextChange: EventName<DsShellMobileNavCustomEvent<NavChromeStyle>>;
+    onDsAuxiliarySelect: EventName<DsShellMobileNavCustomEvent<ShellMobileNavAuxiliaryDetail>>;
+    onDsClose: EventName<DsShellMobileNavCustomEvent<void>>;
+};
+export declare const DsShellMobileNav: StencilReactComponent<DsShellMobileNavElement, DsShellMobileNavEvents, Components.DsShellMobileNav>;

package/dist/react/ds-shell-mobile-nav.js

@@ -0,0 +1,17 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsShellMobileNav as DsShellMobileNavElement, defineCustomElement as defineDsShellMobileNav } from "@ds-mo/ui/dist/components/ds-shell-mobile-nav.js";
+export const DsShellMobileNav = /*@__PURE__*/ createComponent({
+    tagName: 'ds-shell-mobile-nav',
+    elementClass: DsShellMobileNavElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsAreaSelect: 'dsAreaSelect',
+        onDsBrowseContextChange: 'dsBrowseContextChange',
+        onDsAuxiliarySelect: 'dsAuxiliarySelect',
+        onDsClose: 'dsClose'
+    },
+    defineCustomElement: defineDsShellMobileNav
+});

package/dist/react/ds-shell-mobile-section-nav.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 '@stencil/react-output-target/runtime';
+import { type DsShellMobileSectionNavCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsShellMobileSectionNav as DsShellMobileSectionNavElement } from "@ds-mo/ui/dist/components/ds-shell-mobile-section-nav.js";
+export type DsShellMobileSectionNavEvents = {
+    onDsTabChange: EventName<DsShellMobileSectionNavCustomEvent<string>>;
+};
+export declare const DsShellMobileSectionNav: StencilReactComponent<DsShellMobileSectionNavElement, DsShellMobileSectionNavEvents, Components.DsShellMobileSectionNav>;

package/dist/react/ds-shell-mobile-section-nav.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsShellMobileSectionNav as DsShellMobileSectionNavElement, defineCustomElement as defineDsShellMobileSectionNav } from "@ds-mo/ui/dist/components/ds-shell-mobile-section-nav.js";
+export const DsShellMobileSectionNav = /*@__PURE__*/ createComponent({
+    tagName: 'ds-shell-mobile-section-nav',
+    elementClass: DsShellMobileSectionNavElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsTabChange: 'dsTabChange' },
+    defineCustomElement: defineDsShellMobileSectionNav
+});

package/dist/react/ds-shell-tools.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 '@stencil/react-output-target/runtime';
+import { type DsShellToolsCustomEvent, type PanelToolsToolId } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsShellTools as DsShellToolsElement } from "@ds-mo/ui/dist/components/ds-shell-tools.js";
+export type DsShellToolsEvents = {
+    onDsToolChange: EventName<DsShellToolsCustomEvent<{
+        id: PanelToolsToolId;
+        selected: boolean;
+    }>>;
+    onDsPresentationChange: EventName<DsShellToolsCustomEvent<{
+        presentation: 'drawer' | 'fullscreen';
+    }>>;
+    onDsHeaderBack: EventName<DsShellToolsCustomEvent<{
+        tool: PanelToolsToolId;
+    }>>;
+    onDsHeaderAction: EventName<DsShellToolsCustomEvent<{
+        tool: PanelToolsToolId;
+        id: string;
+    }>>;
+};
+export declare const DsShellTools: StencilReactComponent<DsShellToolsElement, DsShellToolsEvents, Components.DsShellTools>;

package/dist/react/ds-shell-tools.js

@@ -0,0 +1,17 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsShellTools as DsShellToolsElement, defineCustomElement as defineDsShellTools } from "@ds-mo/ui/dist/components/ds-shell-tools.js";
+export const DsShellTools = /*@__PURE__*/ createComponent({
+    tagName: 'ds-shell-tools',
+    elementClass: DsShellToolsElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsToolChange: 'dsToolChange',
+        onDsPresentationChange: 'dsPresentationChange',
+        onDsHeaderBack: 'dsHeaderBack',
+        onDsHeaderAction: 'dsHeaderAction'
+    },
+    defineCustomElement: defineDsShellTools
+});

package/dist/styles/prose.css

@@ -122,6 +122,7 @@
   :where(a):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
   color: var(--color-foreground-brand);
   text-decoration: underline;
+  text-decoration-color: var(--color-foreground-tertiary);
 }
 
 :where(.ds-prose)

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

@@ -1,6 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { BreadcrumbItem, BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';
 import { type BarTitleActionItem, type BarTitlePrimaryAction, type BarTitleSectionItem, type BarTitleVariant } from './bar-title-types';
 export declare class BarTitle {
+    el: HTMLElement;
     /** The page's single visible h1. */
     heading: string;
     /** Optional supporting copy shown in the expanded presentation. */
@@ -9,8 +11,12 @@ export declare class BarTitle {
     showBack: boolean;
     /** Accessible name for the leading Back action. */
     backAriaLabel: string;
-    /** Visible parent-page label used by the expanded Back breadcrumb. */
+    /** Visible parent-page label used by the expanded breadcrumb when breadcrumbs is empty. */
     backLabel: string;
+    /** Optional expanded ancestor path. Compact variants continue to use the Back action. */
+    breadcrumbs: BreadcrumbItem[];
+    /** Accessible name for the expanded breadcrumb navigation landmark. */
+    breadcrumbAriaLabel: string;
     /** Optional page sections exposed through the active-section menu. */
     sections: BarTitleSectionItem[];
     /** Id of the active page section. */
@@ -27,6 +33,8 @@ export declare class BarTitle {
     variant: BarTitleVariant;
     /** Emitted when the leading Back action is activated. */
     dsBack: EventEmitter<MouseEvent>;
+    /** Emitted when an authored expanded breadcrumb item is activated. */
+    dsBreadcrumbSelect: EventEmitter<BreadcrumbSelectDetail>;
     /** Emitted with the newly selected page-section id. */
     dsSectionChange: EventEmitter<string>;
     /** Emitted with the activated primary or overflow action id. */
@@ -42,9 +50,11 @@ export declare class BarTitle {
     private readonly actionMenuId;
     private sectionTriggerEl;
     private actionTriggerEl;
+    componentWillLoad(): void;
     handleSectionsChange(): void;
     handleActionsChange(): void;
     private get compact();
+    private get expandedBreadcrumbItems();
     /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */
     private get backTooltipLabel();
     private get primaryCollapsed();
@@ -67,6 +77,8 @@ export declare class BarTitle {
     private handleActionSelect;
     private renderSectionSelector;
     private renderActions;
+    private handleBreadcrumbSelect;
+    private renderBreadcrumb;
     private renderBack;
     render(): any;
 }

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

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { BreadcrumbItem, BreadcrumbSelectDetail } from './breadcrumb-types';
+export declare class Breadcrumb {
+    /** Ordered path from the broadest ancestor to the nearest page. */
+    items: BreadcrumbItem[];
+    /** Accessible name for the breadcrumb navigation landmark. */
+    ariaLabel: string;
+    /** Emitted when an interactive breadcrumb item is activated. Prevent to cancel native navigation. */
+    dsSelect: EventEmitter<BreadcrumbSelectDetail>;
+    private labelWidths;
+    private collapsedLabels;
+    private navElement?;
+    private listElement?;
+    private measurementElements;
+    private separatorElements;
+    private ellipsisMeasurement?;
+    private resizeObserver?;
+    private observedElement?;
+    private measurementFrame?;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    handleItemsChange(): void;
+    private observeContainer;
+    private scheduleMeasurement;
+    private measureLabels;
+    private handleSelect;
+    private renderItem;
+    render(): any;
+}
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/types/components/Breadcrumb/breadcrumb-types.d.ts

@@ -0,0 +1,17 @@
+export interface BreadcrumbItem {
+    /** Stable value returned from dsSelect. */
+    id: string;
+    /** Visible caption label. */
+    label: string;
+    /** Optional accessible name when the visible label is not destination-specific enough. */
+    ariaLabel?: string;
+    /** Native destination. Omit when the route owner handles dsSelect. */
+    href?: string;
+    /** Marks this item as the current page and removes its interaction. */
+    isCurrent?: boolean;
+}
+export interface BreadcrumbSelectDetail {
+    item: BreadcrumbItem;
+    originalEvent: MouseEvent;
+}
+//# sourceMappingURL=breadcrumb-types.d.ts.map

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

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';
+export type CardDataVizBarWidth = CardShellDataVizWidth;
+/**
+ * Bar-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart
+ * region and an optional, content-sized static legend.
+ */
+export declare class CardDataVizBar {
+    el: HTMLElement;
+    /** Widget heading shown in the card header. */
+    heading: string;
+    /** Card width token — also sets matching min-height. */
+    cardWidth: CardDataVizBarWidth;
+    filterLabel: string;
+    /** Emits when the header filter control is activated. */
+    dsFilterClick: EventEmitter<void>;
+    private hasChartSlot;
+    private hasLegendSlot;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    private handleFilterClick;
+    render(): any;
+}
+//# sourceMappingURL=CardDataVizBar.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { CardDataVizBarWidth } from './CardDataVizBar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';
+export type CardDataVizLineWidth = CardShellDataVizWidth;
+/**
+ * Line-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart
+ * region and a content-sized, static legend.
+ */
+export declare class CardDataVizLine {
+    el: HTMLElement;
+    /** Widget heading shown in the card header. */
+    heading: string;
+    /** Card width token — also sets matching min-height. */
+    cardWidth: CardDataVizLineWidth;
+    filterLabel: string;
+    /** Emits when the header filter control is activated. */
+    dsFilterClick: EventEmitter<void>;
+    private hasChartSlot;
+    private hasLegendSlot;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    private handleFilterClick;
+    render(): any;
+}
+//# sourceMappingURL=CardDataVizLine.d.ts.map

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

@@ -0,0 +1,2 @@
+export type { CardDataVizLineWidth } from './CardDataVizLine';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,15 @@
+import type { ChartSeries } from '../../utils/chart-types';
+export type ChartBarStackedVariant = 'stacked' | 'percentage';
+export declare class ChartBarStacked {
+    /** Ordered stack series. Set as a JS property (not an HTML attribute). */
+    series: ChartSeries[];
+    /** X-axis labels — must match each series' `data` length. Set as a JS property. */
+    categories: string[];
+    variant: ChartBarStackedVariant;
+    width: number;
+    height: number;
+    private valuesForCategory;
+    private accessibleLabel;
+    render(): any;
+}
+//# sourceMappingURL=ChartBarStacked.d.ts.map