@ds-mo/ui 12.1.0 → 12.3.0

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

@@ -11,11 +11,16 @@ export { DsAvatar } from "./ds-avatar.js";
 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";
@@ -45,6 +50,7 @@ export { DsPanelToolHeader } from "./ds-panel-tool-header.js";
 export { DsPanelToolSearch } from "./ds-panel-tool-search.js";
 export { DsPanelTools } from "./ds-panel-tools.js";
 export { DsRadio } from "./ds-radio.js";
+export { DsScrollOverlay } from "./ds-scroll-overlay.js";
 export { DsSelectMulti } from "./ds-select-multi.js";
 export { DsSelect } from "./ds-select.js";
 export { DsShellApp } from "./ds-shell-app.js";

package/dist/react/components.js

@@ -12,11 +12,16 @@ export { DsAvatar } from "./ds-avatar.js";
 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";
@@ -46,6 +51,7 @@ export { DsPanelToolHeader } from "./ds-panel-tool-header.js";
 export { DsPanelToolSearch } from "./ds-panel-tool-search.js";
 export { DsPanelTools } from "./ds-panel-tools.js";
 export { DsRadio } from "./ds-radio.js";
+export { DsScrollOverlay } from "./ds-scroll-overlay.js";
 export { DsSelectMulti } from "./ds-select-multi.js";
 export { DsSelect } from "./ds-select.js";
 export { DsShellApp } from "./ds-shell-app.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-bar-workflow.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 DsBarWorkflowCustomEvent } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsBarWorkflow as DsBarWorkflowElement } from "@ds-mo/ui/dist/components/ds-bar-workflow.js";
+export type DsBarWorkflowEvents = {
+    onDsExit: EventName<DsBarWorkflowCustomEvent<MouseEvent>>;
+    onDsStepChange: EventName<DsBarWorkflowCustomEvent<string>>;
+    onDsSubmit: EventName<DsBarWorkflowCustomEvent<MouseEvent>>;
+};
+export declare const DsBarWorkflow: StencilReactComponent<DsBarWorkflowElement, DsBarWorkflowEvents, Components.DsBarWorkflow, 'heading'>;

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

@@ -0,0 +1,16 @@
+'use client';
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
+import { DsBarWorkflow as DsBarWorkflowElement, defineCustomElement as defineDsBarWorkflow } from "@ds-mo/ui/dist/components/ds-bar-workflow.js";
+export const DsBarWorkflow = /*@__PURE__*/ createComponent({
+    tagName: 'ds-bar-workflow',
+    elementClass: DsBarWorkflowElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsExit: 'dsExit',
+        onDsStepChange: 'dsStepChange',
+        onDsSubmit: 'dsSubmit'
+    },
+    defineCustomElement: defineDsBarWorkflow
+});

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-scroll-overlay.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 DsScrollOverlayCustomEvent, type ScrollOverlayScrollDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsScrollOverlay as DsScrollOverlayElement } from "@ds-mo/ui/dist/components/ds-scroll-overlay.js";
+export type DsScrollOverlayEvents = {
+    onDsScroll: EventName<DsScrollOverlayCustomEvent<ScrollOverlayScrollDetail>>;
+};
+export declare const DsScrollOverlay: StencilReactComponent<DsScrollOverlayElement, DsScrollOverlayEvents, Components.DsScrollOverlay>;

package/dist/react/ds-scroll-overlay.js

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

package/dist/styles/prose.css

@@ -0,0 +1,215 @@
+/*
+ * Renderer-neutral document rhythm for safe semantic DOM.
+ *
+ * Import `@ds-mo/ui/prose.css`, then apply `.ds-prose` to a consumer-owned
+ * semantic container. Keep selectors at zero specificity so ordinary product
+ * CSS can override the recipe. `data-ds-prose="off"` opts an entire embedded
+ * product-UI subtree out of prose element styling.
+ */
+
+:where(.ds-prose) {
+  display: block;
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  color: inherit;
+  overflow-wrap: anywhere;
+}
+
+:where(.ds-prose)
+  :where(p, ul, ol, dl, blockquote, figure, figcaption, table):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin: 0;
+  color: inherit;
+  font-family: var(--typography-font-family);
+  font-size: var(--typography-fontsize-md);
+  font-weight: var(--typography-weight-regular);
+  line-height: var(--typography-lineheight-md);
+  letter-spacing: var(--typography-letterspacing-negative-half);
+}
+
+:where(.ds-prose)
+  :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin: 0;
+  color: var(--color-foreground-primary);
+  font-family: var(--typography-font-family);
+  font-weight: var(--typography-weight-semibold);
+}
+
+:where(.ds-prose)
+  :where(h1, h2):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  font-size: var(--typography-fontsize-xl);
+  line-height: var(--typography-lineheight-xl);
+  letter-spacing: var(--typography-letterspacing-negative-double);
+}
+
+:where(.ds-prose)
+  :where(h3, h4):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  font-size: var(--typography-fontsize-lg);
+  line-height: var(--typography-lineheight-lg);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+:where(.ds-prose)
+  :where(h5, h6):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  font-size: var(--typography-fontsize-md);
+  line-height: var(--typography-lineheight-md);
+  letter-spacing: var(--typography-letterspacing-negative);
+}
+
+/* New blocks own their leading space, so appending streamed content never
+ * changes the style or position of an earlier sibling. */
+:where(.ds-prose) > :where(* + *) {
+  margin-block-start: var(--dimension-space-150);
+}
+
+:where(.ds-prose)
+  > :where(*)
+  + :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-block-start: var(--dimension-space-200);
+}
+
+:where(.ds-prose)
+  > :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *))
+  + :where(*) {
+  margin-block-start: var(--dimension-space-100);
+}
+
+:where(.ds-prose)
+  :where(blockquote, li, dd)
+  > :where(* + *):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-block-start: var(--dimension-space-050);
+}
+
+:where(.ds-prose)
+  :where(li + li, dt + dd):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-block-start: var(--dimension-space-050);
+}
+
+:where(.ds-prose)
+  :where(ul, ol):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  padding-inline-start: var(--dimension-space-300);
+}
+
+:where(.ds-prose)
+  :where(li > ul, li > ol):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-block-start: var(--dimension-space-050);
+}
+
+:where(.ds-prose)
+  :where(li > input[type='checkbox']):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-inline-end: var(--dimension-space-050);
+}
+
+:where(.ds-prose)
+  :where(blockquote):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  padding-inline-start: var(--dimension-space-150);
+  border-inline-start: var(--dimension-stroke-width-025) solid var(--color-border-secondary);
+  color: var(--color-foreground-secondary);
+}
+
+:where(.ds-prose)
+  :where(strong, b):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  font-weight: var(--typography-weight-medium);
+}
+
+:where(.ds-prose)
+  :where(h1, h2, h3, h4, h5, h6)
+  :where(strong, b):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  font-weight: inherit;
+}
+
+:where(.ds-prose)
+  :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)
+  :where(code):not(:where(pre code, [data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  padding: var(--dimension-space-012) var(--dimension-space-025);
+  border-radius: var(--dimension-radius-025);
+  background: var(--color-background-secondary);
+  font-family: var(--typography-fontfamily-mono);
+  font-size: var(--typography-fontsize-sm);
+  line-height: var(--typography-lineheight-sm);
+  letter-spacing: var(--typography-letterspacing-none);
+}
+
+:where(.ds-prose)
+  :where(pre):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  margin: 0;
+  padding: var(--dimension-space-150);
+  overflow: auto;
+  border-radius: var(--dimension-radius-050);
+  background: var(--color-background-strong-neutral);
+  color: var(--color-foreground-faint-neutral);
+  font-family: var(--typography-fontfamily-mono);
+  font-size: var(--typography-fontsize-sm);
+  line-height: var(--typography-lineheight-sm);
+  letter-spacing: var(--typography-letterspacing-none);
+  tab-size: 2;
+}
+
+:where(.ds-prose)
+  :where(pre code):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  white-space: pre;
+}
+
+:where(.ds-prose)
+  :where(hr):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin: 0;
+  border: 0;
+  border-block-start: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
+}
+
+:where(.ds-prose__table-scroll) {
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow-x: auto;
+}
+
+:where(.ds-prose)
+  :where(table):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  inline-size: 100%;
+  border-collapse: collapse;
+}
+
+:where(.ds-prose)
+  :where(th, td):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  padding: var(--dimension-space-075);
+  border: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);
+  text-align: start;
+  vertical-align: top;
+  overflow-wrap: anywhere;
+}
+
+:where(.ds-prose)
+  :where(th):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  color: var(--color-foreground-primary);
+  font-weight: var(--typography-weight-medium);
+}
+
+:where(.ds-prose)
+  :where(img, video, svg):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+:where(.ds-prose)
+  :where(figcaption):not(:where([data-ds-prose='off'], [data-ds-prose='off'] *)) {
+  margin-block-start: var(--dimension-space-050);
+  color: var(--color-foreground-secondary);
+  font-size: var(--typography-fontsize-sm);
+  line-height: var(--typography-lineheight-sm);
+  letter-spacing: var(--typography-letterspacing-none);
+}

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

@@ -1,9 +1,12 @@
 import type { IconColor } from '../Icon/Icon';
+export type AvatarSize = 'md' | 'sm' | 'xs';
 export declare class Avatar {
     /** Canonical IcoMo icon name displayed inside the avatar. */
     icon: string;
-    /** Semantic color for the icon. Use primary to surface unread or current identity state. */
+    /** Semantic icon hierarchy. Use primary for stronger emphasis; secondary is the default. */
     iconColor: IconColor;
+    /** Circle and icon density. Maps to 32/20, 24/16, or 16/12 px. */
+    size: AvatarSize;
     /** Optional accessible label. Omit when the surrounding content already conveys the meaning. */
     label: string | undefined;
     render(): any;

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

@@ -1,6 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type BarTitleActionItem, type BarTitleMode, type BarTitlePrimaryAction, type BarTitleSectionItem, type BarTitleVariant } from './bar-title-types';
+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. */
@@ -25,10 +31,10 @@ export declare class BarTitle {
     actionsAriaLabel: string;
     /** Explicit visual/capacity variant. ShellPage owns automatic selection. */
     variant: BarTitleVariant;
-    /** Semantic page-header treatment. Editor mode uses bold-brand create/edit chrome. */
-    mode: BarTitleMode;
     /** 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. */
@@ -44,10 +50,11 @@ export declare class BarTitle {
     private readonly actionMenuId;
     private sectionTriggerEl;
     private actionTriggerEl;
+    componentWillLoad(): void;
     handleSectionsChange(): void;
     handleActionsChange(): void;
     private get compact();
-    private get editor();
+    private get expandedBreadcrumbItems();
     /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */
     private get backTooltipLabel();
     private get primaryCollapsed();
@@ -70,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/BarTitle/bar-title-types.d.ts

@@ -24,7 +24,6 @@ export interface BarTitlePrimaryAction extends BarTitleAction {
 }
 export type BarTitleActionItem = BarTitleAction | BarTitleDivider;
 export type BarTitleVariant = 'expanded' | 'compact' | 'constrained';
-export type BarTitleMode = 'default' | 'editor';
 export type BarTitlePrimaryActionCollapse = 'auto' | 'never';
 export declare function isBarTitleDivider(item: BarTitleSectionItem | BarTitleActionItem): item is BarTitleDivider;
 //# sourceMappingURL=bar-title-types.d.ts.map

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

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { BarWorkflowStep, BarWorkflowSubmitAction } from './bar-workflow-types';
+export declare class BarWorkflow {
+    /** The workflow's single visible h1. */
+    heading: string;
+    /** Ordered workflow steps. Step state is controlled by the application. */
+    steps: BarWorkflowStep[];
+    /** Id of the current workflow step. Falls back to the first step. */
+    value: string;
+    /** Concise tooltip label for the Exit control. */
+    exitLabel: string;
+    /** Workflow-specific accessible name for Exit. */
+    exitAriaLabel: string;
+    /** Tooltip and accessible name for the previous-step control. */
+    previousLabel: string;
+    /** Tooltip and accessible name for the next-step control. */
+    nextLabel: string;
+    /** The final-step Save or Submit action. */
+    submitAction: BarWorkflowSubmitAction;
+    /** Prevent advancing while the current step is incomplete or invalid. */
+    isNextInactive: boolean;
+    /** Emitted when Exit is activated. */
+    dsExit: EventEmitter<MouseEvent>;
+    /** Emitted with the target previous or next step id. The component never mutates value. */
+    dsStepChange: EventEmitter<string>;
+    /** Emitted when the final Save or Submit control is activated. */
+    dsSubmit: EventEmitter<MouseEvent>;
+    private get currentIndex();
+    private get previousStep();
+    private get nextStep();
+    private get isLastStep();
+    private get resolvedHeading();
+    private handlePrevious;
+    private handleNext;
+    render(): any;
+}
+//# sourceMappingURL=BarWorkflow.d.ts.map

package/dist/types/components/BarWorkflow/bar-workflow-types.d.ts

@@ -0,0 +1,12 @@
+export interface BarWorkflowStep {
+    id: string;
+    label: string;
+    isInactive?: boolean;
+}
+export interface BarWorkflowSubmitAction {
+    label: string;
+    type?: 'button' | 'submit' | 'reset';
+    isInactive?: boolean;
+    isLoading?: boolean;
+}
+//# sourceMappingURL=bar-workflow-types.d.ts.map