@d4gger/design-system 3.0.1 → 4.0.1

package/README.md

@@ -12,6 +12,25 @@ pnpm add @d4gger/design-system react react-dom lucide-react
 React 18 and 19 are supported. Add optional peers only for the advanced
 surfaces you use.
 
+## Migrating from 3.x
+
+Text and Heading now accept single typography and spacing values. Replace
+responsive maps on `size`, `color`, `align`, `wrap`, `trim`, `weight`, and
+the margin/padding props with scalar values. Choose one readable type role;
+put responsive spacing and composition on layout primitives such as Flex and Grid.
+
+```tsx
+// 3.x
+<Text size={{ initial: '2', md: '3' }}>Workspace update</Text>
+
+// 4.x
+<Text size="3">Workspace update</Text>
+```
+
+Responsive layout props remain available. There is no compatibility adapter
+for the removed typography maps. Rebuild generated declarations and styles
+together when upgrading.
+
 ## Start using it
 
 Import the complete stylesheet once at application entry:

package/dist/brand-effects.css

@@ -16,10 +16,12 @@
 
 .dsx-brand-ambient {
   background-color: var(--dsx-color-background);
+  /* The three washes are multiples of the theme-aware ambient strength (G-16, 2026-10-05): at the dark value of 10% they are the
+     22% / 12% / 8% they always were, and light, which is raised, gets the same proportions. */
   background-image:
-    radial-gradient(ellipse 900px 500px at 15% -5%, color-mix(in srgb, var(--dsx-color-primary) 22%, transparent), transparent 55%),
-    radial-gradient(ellipse 700px 400px at 88% 8%, color-mix(in srgb, var(--dsx-color-secondary) 12%, transparent), transparent 50%),
-    radial-gradient(ellipse 600px 300px at 50% 100%, color-mix(in srgb, var(--dsx-color-primary) 8%, transparent), transparent 60%),
+    radial-gradient(ellipse 900px 500px at 15% -5%, color-mix(in srgb, var(--dsx-color-primary) calc(var(--dsx-effect-ambient-strength) * 2.2), transparent), transparent 55%),
+    radial-gradient(ellipse 700px 400px at 88% 8%, color-mix(in srgb, var(--dsx-color-secondary) calc(var(--dsx-effect-ambient-strength) * 1.2), transparent), transparent 50%),
+    radial-gradient(ellipse 600px 300px at 50% 100%, color-mix(in srgb, var(--dsx-color-primary) calc(var(--dsx-effect-ambient-strength) * 0.8), transparent), transparent 60%),
     linear-gradient(180deg, var(--dsx-color-surface) 0%, var(--dsx-color-background) 50%);
   background-repeat: no-repeat;
 }

package/dist/components/accordion.css

@@ -2,7 +2,7 @@
 
 .dsx-accordion__item {
   width: 100%;
-  overflow: hidden;
+  overflow: visible;
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
@@ -33,10 +33,11 @@
   flex: 1;
   min-width: 0;
   text-align: start;
+  overflow-wrap: anywhere;
 }
 
 .dsx-accordion__trigger[data-state='open'] {
-  color: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-indicator);
 }
 
 .dsx-accordion__trigger:focus-visible {
@@ -89,3 +90,9 @@
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
   font-size: var(--dsx-typography-body-medium-font-size);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-accordion__chevron { transition: none; }
+}
+
+.dsx-accordion__trigger:disabled { opacity: var(--dsx-opacity-disabled); }

package/dist/components/alert/Alert.cjs

@@ -39,7 +39,6 @@ var React = __toESM(require("react"), 1);
 var import_classnames = __toESM(require("classnames"), 1);
 var import_react_slot = require("@radix-ui/react-slot");
 var import_extractProps = require("../../_internal/helpers/extractProps");
-var import_Card = require("../card/Card");
 var import_Icon = require("../icon/Icon");
 var import_alert = require("./alert.props");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -47,6 +46,11 @@ const AlertAction = React.forwardRef(
   ({ className, ...props }, forwardedRef) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref: forwardedRef, className: (0, import_classnames.default)("dsx-alert__action", className) })
 );
 AlertAction.displayName = "AlertAction";
+const isAlertAction = (node) => React.isValidElement(node) && node.type === AlertAction;
+function splitAlertChildren(children) {
+  const nodes = React.Children.toArray(children);
+  return { actions: nodes.filter(isAlertAction), body: nodes.filter((node) => !isAlertAction(node)) };
+}
 const AlertRoot = React.forwardRef((props, forwardedRef) => {
   const {
     asChild,
@@ -54,6 +58,7 @@ const AlertRoot = React.forwardRef((props, forwardedRef) => {
     color,
     highContrast = false,
     icon,
+    children,
     role,
     size = "md",
     variant = "default",
@@ -61,19 +66,27 @@ const AlertRoot = React.forwardRef((props, forwardedRef) => {
   } = (0, import_extractProps.extractProps)(props, import_alert.alertPropDefs);
   const Comp = asChild ? import_react_slot.Slot : "div";
   const fallbackIcon = variant === "success" ? "check-circle" : variant === "default" ? "info" : "alert-triangle";
+  const child = asChild ? React.Children.only(children) : null;
+  const { actions, body } = splitAlertChildren(child ? child.props.children : children);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    icon === null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "dsx-alert__icon", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: fallbackIcon, size: "md", strokeWidth: "var(--dsx-icon-stroke-width-strong, 2.25)" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-alert__main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-alert__content", children: body }),
+      actions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-alert__actions", children: actions }) : null
+    ] })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Card.CardRoot,
+    Comp,
     {
-      asChild: true,
+      ...alertProps,
+      ref: forwardedRef,
+      role: role ?? "alert",
       className: (0, import_classnames.default)("dsx-alert", className),
       "data-accent-color": color,
       "data-high-contrast": highContrast ? "true" : void 0,
       "data-size": size,
       "data-variant": variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Comp, { ...alertProps, ref: forwardedRef, role: role ?? "alert", children: [
-        icon === null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "dsx-alert__icon", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: fallbackIcon, size: "md", strokeWidth: "var(--dsx-icon-stroke-width-strong, 2.25)" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-alert__content", children: alertProps.children })
-      ] })
+      children: child ? React.cloneElement(child, void 0, content) : content
     }
   );
 });
@@ -84,16 +97,21 @@ const AlertTitle = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...titleProps, ref: forwardedRef, className: (0, import_classnames.default)("dsx-alert__title", className) });
 });
 AlertTitle.displayName = "AlertTitle";
+const isLineClamp = (value) => typeof value === "number" && Number.isInteger(value) && value >= 1;
 const AlertDescription = React.forwardRef(
   (props, forwardedRef) => {
-    const { asChild, className, ...descriptionProps } = (0, import_extractProps.extractProps)(props, import_alert.alertDescriptionPropDefs);
+    const { lineClamp, style, ...ownProps } = props;
+    const { asChild, className, ...descriptionProps } = (0, import_extractProps.extractProps)(ownProps, import_alert.alertDescriptionPropDefs);
     const Comp = asChild ? import_react_slot.Slot : "p";
+    const clamp = isLineClamp(lineClamp) ? lineClamp : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Comp,
       {
         ...descriptionProps,
         ref: forwardedRef,
-        className: (0, import_classnames.default)("dsx-alert__description", className)
+        className: (0, import_classnames.default)("dsx-alert__description", className),
+        "data-line-clamp": clamp,
+        style: clamp ? { ...style, "--dsx-alert-line-clamp": clamp } : style
       }
     );
   }

package/dist/components/alert/Alert.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/alert/Alert.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { CardRoot } from '../card/Card'\nimport { Icon } from '../icon/Icon'\nimport { alertDescriptionPropDefs, alertPropDefs, alertTitlePropDefs } from './alert.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype AlertActionElement = React.ComponentRef<'div'>\n\nconst AlertAction = React.forwardRef<AlertActionElement, React.ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, forwardedRef) => (\n    <div {...props} ref={forwardedRef} className={classNames('dsx-alert__action', className)} />\n  ),\n)\nAlertAction.displayName = 'AlertAction'\n\ntype AlertElement = React.ComponentRef<'div'>\ntype AlertOwnProps = GetPropDefTypes<typeof alertPropDefs> & {\n  icon?: React.ReactNode\n}\n\ninterface AlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>, AlertOwnProps {}\n\nconst AlertRoot = React.forwardRef<AlertElement, AlertProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    color,\n    highContrast = false,\n    icon,\n    role,\n    size = 'md',\n    variant = 'default',\n    ...alertProps\n  } = extractProps(props, alertPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const fallbackIcon = variant === 'success' ? 'check-circle' : variant === 'default' ? 'info' : 'alert-triangle'\n\n  return (\n    <CardRoot\n      asChild\n      className={classNames('dsx-alert', className)}\n      data-accent-color={color}\n      data-high-contrast={highContrast ? 'true' : undefined}\n      data-size={size}\n      data-variant={variant}\n    >\n      <Comp {...alertProps} ref={forwardedRef} role={role ?? 'alert'}>\n        {icon === null ? null : (\n          <span aria-hidden=\"true\" className=\"dsx-alert__icon\">\n            {icon ?? <Icon name={fallbackIcon} size=\"md\" strokeWidth=\"var(--dsx-icon-stroke-width-strong, 2.25)\" />}\n          </span>\n        )}\n        <div className=\"dsx-alert__content\">{alertProps.children}</div>\n      </Comp>\n    </CardRoot>\n  )\n})\nAlertRoot.displayName = 'Alert'\n\ntype AlertTitleElement = React.ComponentRef<'h5'>\ntype AlertTitleOwnProps = GetPropDefTypes<typeof alertTitlePropDefs>\n\ninterface AlertTitleProps extends React.ComponentPropsWithoutRef<'h5'>, AlertTitleOwnProps {}\n\nconst AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, alertTitlePropDefs)\n  const Comp = asChild ? Slot : 'h5'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-alert__title', className)} />\n})\nAlertTitle.displayName = 'AlertTitle'\n\ntype AlertDescriptionElement = React.ComponentRef<'p'>\ntype AlertDescriptionOwnProps = GetPropDefTypes<typeof alertDescriptionPropDefs>\n\ninterface AlertDescriptionProps\n  extends React.ComponentPropsWithoutRef<'p'>,\n    AlertDescriptionOwnProps {}\n\nconst AlertDescription = React.forwardRef<AlertDescriptionElement, AlertDescriptionProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...descriptionProps } = extractProps(props, alertDescriptionPropDefs)\n    const Comp = asChild ? Slot : 'p'\n\n    return (\n      <Comp\n        {...descriptionProps}\n        ref={forwardedRef}\n        className={classNames('dsx-alert__description', className)}\n      />\n    )\n  },\n)\nAlertDescription.displayName = 'AlertDescription'\n\nconst Alert: typeof AlertRoot & {\n  Title: typeof AlertTitle\n  Description: typeof AlertDescription\n  Action: typeof AlertAction\n} = Object.assign(AlertRoot, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n  Action: AlertAction,\n})\n\nexport { Alert, AlertAction, AlertDescription, AlertRoot, AlertTitle }\nexport type { AlertDescriptionProps, AlertProps, AlertTitleProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AAErB,0BAA6B;AAC7B,kBAAyB;AACzB,kBAAqB;AACrB,mBAA4E;AAQxE;AAFJ,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,iBACxB,4CAAC,SAAK,GAAG,OAAO,KAAK,cAAc,eAAW,kBAAAA,SAAW,qBAAqB,SAAS,GAAG;AAE9F;AACA,YAAY,cAAc;AAS1B,MAAM,YAAY,MAAM,WAAqC,CAAC,OAAO,iBAAiB;AACpF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG;AAAA,EACL,QAAI,kCAAa,OAAO,0BAAa;AACrC,QAAM,OAAO,UAAU,yBAAO;AAC9B,QAAM,eAAe,YAAY,YAAY,iBAAiB,YAAY,YAAY,SAAS;AAE/F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAO;AAAA,MACP,eAAW,kBAAAA,SAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,sBAAoB,eAAe,SAAS;AAAA,MAC5C,aAAW;AAAA,MACX,gBAAc;AAAA,MAEd,uDAAC,QAAM,GAAG,YAAY,KAAK,cAAc,MAAM,QAAQ,SACpD;AAAA,iBAAS,OAAO,OACf,4CAAC,UAAK,eAAY,QAAO,WAAU,mBAChC,kBAAQ,4CAAC,oBAAK,MAAM,cAAc,MAAK,MAAK,aAAY,6CAA4C,GACvG;AAAA,QAEF,4CAAC,SAAI,WAAU,sBAAsB,qBAAW,UAAS;AAAA,SAC3D;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,UAAU,cAAc;AAOxB,MAAM,aAAa,MAAM,WAA+C,CAAC,OAAO,iBAAiB;AAC/F,QAAM,EAAE,SAAS,WAAW,GAAG,WAAW,QAAI,kCAAa,OAAO,+BAAkB;AACpF,QAAM,OAAO,UAAU,yBAAO;AAE9B,SAAO,4CAAC,QAAM,GAAG,YAAY,KAAK,cAAc,eAAW,kBAAAA,SAAW,oBAAoB,SAAS,GAAG;AACxG,CAAC;AACD,WAAW,cAAc;AASzB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,QAAI,kCAAa,OAAO,qCAAwB;AAChG,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,kBAAAA,SAAW,0BAA0B,SAAS;AAAA;AAAA,IAC3D;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAE/B,MAAM,QAIF,OAAO,OAAO,WAAW;AAAA,EAC3B,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AACV,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { alertDescriptionPropDefs, alertPropDefs, alertTitlePropDefs } from './alert.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype AlertActionElement = React.ComponentRef<'div'>\n\nconst AlertAction = React.forwardRef<AlertActionElement, React.ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, forwardedRef) => (\n    <div {...props} ref={forwardedRef} className={classNames('dsx-alert__action', className)} />\n  ),\n)\nAlertAction.displayName = 'AlertAction'\n\nconst isAlertAction = (node: React.ReactNode): boolean => React.isValidElement(node) && node.type === AlertAction\n\n// An `Alert.Action` that is a direct child sits beside the content, not inside it, in one `.dsx-alert__actions` group: the\n// group trails the row, and wraps below the text as a whole when it is narrow, under the text and not under the icon (the\n// icon is one column, the text and the group are the other: `.dsx-alert__main`). A consumer who nests an action in their own\n// wrapper keeps it in the content.\nfunction splitAlertChildren(children: React.ReactNode): { actions: React.ReactNode[]; body: React.ReactNode[] } {\n  const nodes = React.Children.toArray(children)\n  return { actions: nodes.filter(isAlertAction), body: nodes.filter((node) => !isAlertAction(node)) }\n}\n\ntype AlertElement = React.ComponentRef<'div'>\ntype AlertOwnProps = GetPropDefTypes<typeof alertPropDefs> & {\n  icon?: React.ReactNode\n}\n\ninterface AlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>, AlertOwnProps {}\n\nconst AlertRoot = React.forwardRef<AlertElement, AlertProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    color,\n    highContrast = false,\n    icon,\n    children,\n    role,\n    size = 'md',\n    variant = 'default',\n    ...alertProps\n  } = extractProps(props, alertPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const fallbackIcon = variant === 'success' ? 'check-circle' : variant === 'default' ? 'info' : 'alert-triangle'\n  const child = asChild ? React.Children.only(children) as React.ReactElement<{ children?: React.ReactNode }> : null\n  const { actions, body } = splitAlertChildren(child ? child.props.children : children)\n  const content = <>\n    {icon === null ? null : (\n      <span aria-hidden=\"true\" className=\"dsx-alert__icon\">\n        {icon ?? <Icon name={fallbackIcon} size=\"md\" strokeWidth=\"var(--dsx-icon-stroke-width-strong, 2.25)\" />}\n      </span>\n    )}\n    <div className=\"dsx-alert__main\">\n      <div className=\"dsx-alert__content\">{body}</div>\n      {actions.length > 0 ? <div className=\"dsx-alert__actions\">{actions}</div> : null}\n    </div>\n  </>\n\n  return (\n    <Comp\n      {...alertProps}\n      ref={forwardedRef}\n      role={role ?? 'alert'}\n      className={classNames('dsx-alert', className)}\n      data-accent-color={color}\n      data-high-contrast={highContrast ? 'true' : undefined}\n      data-size={size}\n      data-variant={variant}\n    >\n      {child ? React.cloneElement(child, undefined, content) : content}\n    </Comp>\n  )\n})\nAlertRoot.displayName = 'Alert'\n\ntype AlertTitleElement = React.ComponentRef<'h5'>\ntype AlertTitleOwnProps = GetPropDefTypes<typeof alertTitlePropDefs>\n\ninterface AlertTitleProps extends React.ComponentPropsWithoutRef<'h5'>, AlertTitleOwnProps {}\n\nconst AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, alertTitlePropDefs)\n  const Comp = asChild ? Slot : 'h5'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-alert__title', className)} />\n})\nAlertTitle.displayName = 'AlertTitle'\n\ntype AlertDescriptionElement = React.ComponentRef<'p'>\ntype AlertDescriptionOwnProps = GetPropDefTypes<typeof alertDescriptionPropDefs>\n\ninterface AlertDescriptionProps\n  extends React.ComponentPropsWithoutRef<'p'>,\n    AlertDescriptionOwnProps {\n  /**\n   * Clamp the text to this many lines (a whole number of 1 or more); the rest is clipped with an ellipsis. Anything else\n   * leaves the text unclamped. Whether the text is clipped, and how to reveal it, is the consumer's: it can measure the\n   * element (`scrollHeight > clientHeight`) and drop the prop to show everything.\n   */\n  lineClamp?: number\n}\n\nconst isLineClamp = (value: unknown): value is number =>\n  typeof value === 'number' && Number.isInteger(value) && value >= 1\n\nconst AlertDescription = React.forwardRef<AlertDescriptionElement, AlertDescriptionProps>(\n  (props, forwardedRef) => {\n    // `lineClamp` is behaviour-only, so it stays out of extractProps (it has no class mapping and would leak to the DOM).\n    const { lineClamp, style, ...ownProps } = props\n    const { asChild, className, ...descriptionProps } = extractProps(ownProps, alertDescriptionPropDefs)\n    const Comp = asChild ? Slot : 'p'\n    const clamp = isLineClamp(lineClamp) ? lineClamp : undefined\n\n    return (\n      <Comp\n        {...descriptionProps}\n        ref={forwardedRef}\n        className={classNames('dsx-alert__description', className)}\n        data-line-clamp={clamp}\n        style={clamp ? ({ ...style, '--dsx-alert-line-clamp': clamp } as React.CSSProperties) : style}\n      />\n    )\n  },\n)\nAlertDescription.displayName = 'AlertDescription'\n\nconst Alert: typeof AlertRoot & {\n  Title: typeof AlertTitle\n  Description: typeof AlertDescription\n  Action: typeof AlertAction\n} = Object.assign(AlertRoot, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n  Action: AlertAction,\n})\n\nexport { Alert, AlertAction, AlertDescription, AlertRoot, AlertTitle }\nexport type { AlertDescriptionProps, AlertProps, AlertTitleProps }\n"],
+  "mappings": "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",
   "names": ["classNames"]
 }

package/dist/components/alert/Alert.d.cts

@@ -14,6 +14,12 @@ interface AlertTitleProps extends React.ComponentPropsWithoutRef<'h5'>, AlertTit
 declare const AlertTitle: React.ForwardRefExoticComponent<AlertTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 type AlertDescriptionOwnProps = GetPropDefTypes<typeof alertDescriptionPropDefs>;
 interface AlertDescriptionProps extends React.ComponentPropsWithoutRef<'p'>, AlertDescriptionOwnProps {
+    /**
+     * Clamp the text to this many lines (a whole number of 1 or more); the rest is clipped with an ellipsis. Anything else
+     * leaves the text unclamped. Whether the text is clipped, and how to reveal it, is the consumer's: it can measure the
+     * element (`scrollHeight > clientHeight`) and drop the prop to show everything.
+     */
+    lineClamp?: number;
 }
 declare const AlertDescription: React.ForwardRefExoticComponent<AlertDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
 declare const Alert: typeof AlertRoot & {

package/dist/components/alert/Alert.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.cts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAID,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFAkCb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;CAAG;AAE/B,QAAA,MAAM,gBAAgB,oGAarB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"Alert.d.cts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAeD,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFA2Cb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD,QAAA,MAAM,gBAAgB,oGAkBrB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/alert/Alert.d.mts

@@ -14,6 +14,12 @@ interface AlertTitleProps extends React.ComponentPropsWithoutRef<'h5'>, AlertTit
 declare const AlertTitle: React.ForwardRefExoticComponent<AlertTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 type AlertDescriptionOwnProps = GetPropDefTypes<typeof alertDescriptionPropDefs>;
 interface AlertDescriptionProps extends React.ComponentPropsWithoutRef<'p'>, AlertDescriptionOwnProps {
+    /**
+     * Clamp the text to this many lines (a whole number of 1 or more); the rest is clipped with an ellipsis. Anything else
+     * leaves the text unclamped. Whether the text is clipped, and how to reveal it, is the consumer's: it can measure the
+     * element (`scrollHeight > clientHeight`) and drop the prop to show everything.
+     */
+    lineClamp?: number;
 }
 declare const AlertDescription: React.ForwardRefExoticComponent<AlertDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
 declare const Alert: typeof AlertRoot & {

package/dist/components/alert/Alert.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.mts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAID,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFAkCb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;CAAG;AAE/B,QAAA,MAAM,gBAAgB,oGAarB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"Alert.d.mts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAeD,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFA2Cb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD,QAAA,MAAM,gBAAgB,oGAkBrB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/alert/Alert.d.ts

@@ -14,6 +14,12 @@ interface AlertTitleProps extends React.ComponentPropsWithoutRef<'h5'>, AlertTit
 declare const AlertTitle: React.ForwardRefExoticComponent<AlertTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 type AlertDescriptionOwnProps = GetPropDefTypes<typeof alertDescriptionPropDefs>;
 interface AlertDescriptionProps extends React.ComponentPropsWithoutRef<'p'>, AlertDescriptionOwnProps {
+    /**
+     * Clamp the text to this many lines (a whole number of 1 or more); the rest is clipped with an ellipsis. Anything else
+     * leaves the text unclamped. Whether the text is clipped, and how to reveal it, is the consumer's: it can measure the
+     * element (`scrollHeight > clientHeight`) and drop the prop to show everything.
+     */
+    lineClamp?: number;
 }
 declare const AlertDescription: React.ForwardRefExoticComponent<AlertDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
 declare const Alert: typeof AlertRoot & {

package/dist/components/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAID,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFAkCb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;CAAG;AAE/B,QAAA,MAAM,gBAAgB,oGAarB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAeD,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFA2Cb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAKD,QAAA,MAAM,gBAAgB,oGAkBrB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/alert/Alert.js

@@ -2,14 +2,18 @@ import * as React from "react";
 import classNames from "classnames";
 import { Slot } from "@radix-ui/react-slot";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
-import { CardRoot } from "../card/Card.js";
 import { Icon } from "../icon/Icon.js";
 import { alertDescriptionPropDefs, alertPropDefs, alertTitlePropDefs } from "./alert.props.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const AlertAction = React.forwardRef(
   ({ className, ...props }, forwardedRef) => /* @__PURE__ */ jsx("div", { ...props, ref: forwardedRef, className: classNames("dsx-alert__action", className) })
 );
 AlertAction.displayName = "AlertAction";
+const isAlertAction = (node) => React.isValidElement(node) && node.type === AlertAction;
+function splitAlertChildren(children) {
+  const nodes = React.Children.toArray(children);
+  return { actions: nodes.filter(isAlertAction), body: nodes.filter((node) => !isAlertAction(node)) };
+}
 const AlertRoot = React.forwardRef((props, forwardedRef) => {
   const {
     asChild,
@@ -17,6 +21,7 @@ const AlertRoot = React.forwardRef((props, forwardedRef) => {
     color,
     highContrast = false,
     icon,
+    children,
     role,
     size = "md",
     variant = "default",
@@ -24,19 +29,27 @@ const AlertRoot = React.forwardRef((props, forwardedRef) => {
   } = extractProps(props, alertPropDefs);
   const Comp = asChild ? Slot : "div";
   const fallbackIcon = variant === "success" ? "check-circle" : variant === "default" ? "info" : "alert-triangle";
+  const child = asChild ? React.Children.only(children) : null;
+  const { actions, body } = splitAlertChildren(child ? child.props.children : children);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon === null ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "dsx-alert__icon", children: icon ?? /* @__PURE__ */ jsx(Icon, { name: fallbackIcon, size: "md", strokeWidth: "var(--dsx-icon-stroke-width-strong, 2.25)" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "dsx-alert__main", children: [
+      /* @__PURE__ */ jsx("div", { className: "dsx-alert__content", children: body }),
+      actions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "dsx-alert__actions", children: actions }) : null
+    ] })
+  ] });
   return /* @__PURE__ */ jsx(
-    CardRoot,
+    Comp,
     {
-      asChild: true,
+      ...alertProps,
+      ref: forwardedRef,
+      role: role ?? "alert",
       className: classNames("dsx-alert", className),
       "data-accent-color": color,
       "data-high-contrast": highContrast ? "true" : void 0,
       "data-size": size,
       "data-variant": variant,
-      children: /* @__PURE__ */ jsxs(Comp, { ...alertProps, ref: forwardedRef, role: role ?? "alert", children: [
-        icon === null ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "dsx-alert__icon", children: icon ?? /* @__PURE__ */ jsx(Icon, { name: fallbackIcon, size: "md", strokeWidth: "var(--dsx-icon-stroke-width-strong, 2.25)" }) }),
-        /* @__PURE__ */ jsx("div", { className: "dsx-alert__content", children: alertProps.children })
-      ] })
+      children: child ? React.cloneElement(child, void 0, content) : content
     }
   );
 });
@@ -47,16 +60,21 @@ const AlertTitle = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(Comp, { ...titleProps, ref: forwardedRef, className: classNames("dsx-alert__title", className) });
 });
 AlertTitle.displayName = "AlertTitle";
+const isLineClamp = (value) => typeof value === "number" && Number.isInteger(value) && value >= 1;
 const AlertDescription = React.forwardRef(
   (props, forwardedRef) => {
-    const { asChild, className, ...descriptionProps } = extractProps(props, alertDescriptionPropDefs);
+    const { lineClamp, style, ...ownProps } = props;
+    const { asChild, className, ...descriptionProps } = extractProps(ownProps, alertDescriptionPropDefs);
     const Comp = asChild ? Slot : "p";
+    const clamp = isLineClamp(lineClamp) ? lineClamp : void 0;
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ...descriptionProps,
         ref: forwardedRef,
-        className: classNames("dsx-alert__description", className)
+        className: classNames("dsx-alert__description", className),
+        "data-line-clamp": clamp,
+        style: clamp ? { ...style, "--dsx-alert-line-clamp": clamp } : style
       }
     );
   }

package/dist/components/alert/Alert.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/alert/Alert.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { CardRoot } from '../card/Card'\nimport { Icon } from '../icon/Icon'\nimport { alertDescriptionPropDefs, alertPropDefs, alertTitlePropDefs } from './alert.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype AlertActionElement = React.ComponentRef<'div'>\n\nconst AlertAction = React.forwardRef<AlertActionElement, React.ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, forwardedRef) => (\n    <div {...props} ref={forwardedRef} className={classNames('dsx-alert__action', className)} />\n  ),\n)\nAlertAction.displayName = 'AlertAction'\n\ntype AlertElement = React.ComponentRef<'div'>\ntype AlertOwnProps = GetPropDefTypes<typeof alertPropDefs> & {\n  icon?: React.ReactNode\n}\n\ninterface AlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>, AlertOwnProps {}\n\nconst AlertRoot = React.forwardRef<AlertElement, AlertProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    color,\n    highContrast = false,\n    icon,\n    role,\n    size = 'md',\n    variant = 'default',\n    ...alertProps\n  } = extractProps(props, alertPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const fallbackIcon = variant === 'success' ? 'check-circle' : variant === 'default' ? 'info' : 'alert-triangle'\n\n  return (\n    <CardRoot\n      asChild\n      className={classNames('dsx-alert', className)}\n      data-accent-color={color}\n      data-high-contrast={highContrast ? 'true' : undefined}\n      data-size={size}\n      data-variant={variant}\n    >\n      <Comp {...alertProps} ref={forwardedRef} role={role ?? 'alert'}>\n        {icon === null ? null : (\n          <span aria-hidden=\"true\" className=\"dsx-alert__icon\">\n            {icon ?? <Icon name={fallbackIcon} size=\"md\" strokeWidth=\"var(--dsx-icon-stroke-width-strong, 2.25)\" />}\n          </span>\n        )}\n        <div className=\"dsx-alert__content\">{alertProps.children}</div>\n      </Comp>\n    </CardRoot>\n  )\n})\nAlertRoot.displayName = 'Alert'\n\ntype AlertTitleElement = React.ComponentRef<'h5'>\ntype AlertTitleOwnProps = GetPropDefTypes<typeof alertTitlePropDefs>\n\ninterface AlertTitleProps extends React.ComponentPropsWithoutRef<'h5'>, AlertTitleOwnProps {}\n\nconst AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, alertTitlePropDefs)\n  const Comp = asChild ? Slot : 'h5'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-alert__title', className)} />\n})\nAlertTitle.displayName = 'AlertTitle'\n\ntype AlertDescriptionElement = React.ComponentRef<'p'>\ntype AlertDescriptionOwnProps = GetPropDefTypes<typeof alertDescriptionPropDefs>\n\ninterface AlertDescriptionProps\n  extends React.ComponentPropsWithoutRef<'p'>,\n    AlertDescriptionOwnProps {}\n\nconst AlertDescription = React.forwardRef<AlertDescriptionElement, AlertDescriptionProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...descriptionProps } = extractProps(props, alertDescriptionPropDefs)\n    const Comp = asChild ? Slot : 'p'\n\n    return (\n      <Comp\n        {...descriptionProps}\n        ref={forwardedRef}\n        className={classNames('dsx-alert__description', className)}\n      />\n    )\n  },\n)\nAlertDescription.displayName = 'AlertDescription'\n\nconst Alert: typeof AlertRoot & {\n  Title: typeof AlertTitle\n  Description: typeof AlertDescription\n  Action: typeof AlertAction\n} = Object.assign(AlertRoot, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n  Action: AlertAction,\n})\n\nexport { Alert, AlertAction, AlertDescription, AlertRoot, AlertTitle }\nexport type { AlertDescriptionProps, AlertProps, AlertTitleProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,0BAA0B,eAAe,0BAA0B;AAQxE,cAoCE,YApCF;AAFJ,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,iBACxB,oBAAC,SAAK,GAAG,OAAO,KAAK,cAAc,WAAW,WAAW,qBAAqB,SAAS,GAAG;AAE9F;AACA,YAAY,cAAc;AAS1B,MAAM,YAAY,MAAM,WAAqC,CAAC,OAAO,iBAAiB;AACpF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,aAAa;AACrC,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,eAAe,YAAY,YAAY,iBAAiB,YAAY,YAAY,SAAS;AAE/F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAO;AAAA,MACP,WAAW,WAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,sBAAoB,eAAe,SAAS;AAAA,MAC5C,aAAW;AAAA,MACX,gBAAc;AAAA,MAEd,+BAAC,QAAM,GAAG,YAAY,KAAK,cAAc,MAAM,QAAQ,SACpD;AAAA,iBAAS,OAAO,OACf,oBAAC,UAAK,eAAY,QAAO,WAAU,mBAChC,kBAAQ,oBAAC,QAAK,MAAM,cAAc,MAAK,MAAK,aAAY,6CAA4C,GACvG;AAAA,QAEF,oBAAC,SAAI,WAAU,sBAAsB,qBAAW,UAAS;AAAA,SAC3D;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,UAAU,cAAc;AAOxB,MAAM,aAAa,MAAM,WAA+C,CAAC,OAAO,iBAAiB;AAC/F,QAAM,EAAE,SAAS,WAAW,GAAG,WAAW,IAAI,aAAa,OAAO,kBAAkB;AACpF,QAAM,OAAO,UAAU,OAAO;AAE9B,SAAO,oBAAC,QAAM,GAAG,YAAY,KAAK,cAAc,WAAW,WAAW,oBAAoB,SAAS,GAAG;AACxG,CAAC;AACD,WAAW,cAAc;AASzB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,IAAI,aAAa,OAAO,wBAAwB;AAChG,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,WAAW,0BAA0B,SAAS;AAAA;AAAA,IAC3D;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAE/B,MAAM,QAIF,OAAO,OAAO,WAAW;AAAA,EAC3B,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AACV,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { alertDescriptionPropDefs, alertPropDefs, alertTitlePropDefs } from './alert.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype AlertActionElement = React.ComponentRef<'div'>\n\nconst AlertAction = React.forwardRef<AlertActionElement, React.ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, forwardedRef) => (\n    <div {...props} ref={forwardedRef} className={classNames('dsx-alert__action', className)} />\n  ),\n)\nAlertAction.displayName = 'AlertAction'\n\nconst isAlertAction = (node: React.ReactNode): boolean => React.isValidElement(node) && node.type === AlertAction\n\n// An `Alert.Action` that is a direct child sits beside the content, not inside it, in one `.dsx-alert__actions` group: the\n// group trails the row, and wraps below the text as a whole when it is narrow, under the text and not under the icon (the\n// icon is one column, the text and the group are the other: `.dsx-alert__main`). A consumer who nests an action in their own\n// wrapper keeps it in the content.\nfunction splitAlertChildren(children: React.ReactNode): { actions: React.ReactNode[]; body: React.ReactNode[] } {\n  const nodes = React.Children.toArray(children)\n  return { actions: nodes.filter(isAlertAction), body: nodes.filter((node) => !isAlertAction(node)) }\n}\n\ntype AlertElement = React.ComponentRef<'div'>\ntype AlertOwnProps = GetPropDefTypes<typeof alertPropDefs> & {\n  icon?: React.ReactNode\n}\n\ninterface AlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>, AlertOwnProps {}\n\nconst AlertRoot = React.forwardRef<AlertElement, AlertProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    color,\n    highContrast = false,\n    icon,\n    children,\n    role,\n    size = 'md',\n    variant = 'default',\n    ...alertProps\n  } = extractProps(props, alertPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const fallbackIcon = variant === 'success' ? 'check-circle' : variant === 'default' ? 'info' : 'alert-triangle'\n  const child = asChild ? React.Children.only(children) as React.ReactElement<{ children?: React.ReactNode }> : null\n  const { actions, body } = splitAlertChildren(child ? child.props.children : children)\n  const content = <>\n    {icon === null ? null : (\n      <span aria-hidden=\"true\" className=\"dsx-alert__icon\">\n        {icon ?? <Icon name={fallbackIcon} size=\"md\" strokeWidth=\"var(--dsx-icon-stroke-width-strong, 2.25)\" />}\n      </span>\n    )}\n    <div className=\"dsx-alert__main\">\n      <div className=\"dsx-alert__content\">{body}</div>\n      {actions.length > 0 ? <div className=\"dsx-alert__actions\">{actions}</div> : null}\n    </div>\n  </>\n\n  return (\n    <Comp\n      {...alertProps}\n      ref={forwardedRef}\n      role={role ?? 'alert'}\n      className={classNames('dsx-alert', className)}\n      data-accent-color={color}\n      data-high-contrast={highContrast ? 'true' : undefined}\n      data-size={size}\n      data-variant={variant}\n    >\n      {child ? React.cloneElement(child, undefined, content) : content}\n    </Comp>\n  )\n})\nAlertRoot.displayName = 'Alert'\n\ntype AlertTitleElement = React.ComponentRef<'h5'>\ntype AlertTitleOwnProps = GetPropDefTypes<typeof alertTitlePropDefs>\n\ninterface AlertTitleProps extends React.ComponentPropsWithoutRef<'h5'>, AlertTitleOwnProps {}\n\nconst AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, alertTitlePropDefs)\n  const Comp = asChild ? Slot : 'h5'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-alert__title', className)} />\n})\nAlertTitle.displayName = 'AlertTitle'\n\ntype AlertDescriptionElement = React.ComponentRef<'p'>\ntype AlertDescriptionOwnProps = GetPropDefTypes<typeof alertDescriptionPropDefs>\n\ninterface AlertDescriptionProps\n  extends React.ComponentPropsWithoutRef<'p'>,\n    AlertDescriptionOwnProps {\n  /**\n   * Clamp the text to this many lines (a whole number of 1 or more); the rest is clipped with an ellipsis. Anything else\n   * leaves the text unclamped. Whether the text is clipped, and how to reveal it, is the consumer's: it can measure the\n   * element (`scrollHeight > clientHeight`) and drop the prop to show everything.\n   */\n  lineClamp?: number\n}\n\nconst isLineClamp = (value: unknown): value is number =>\n  typeof value === 'number' && Number.isInteger(value) && value >= 1\n\nconst AlertDescription = React.forwardRef<AlertDescriptionElement, AlertDescriptionProps>(\n  (props, forwardedRef) => {\n    // `lineClamp` is behaviour-only, so it stays out of extractProps (it has no class mapping and would leak to the DOM).\n    const { lineClamp, style, ...ownProps } = props\n    const { asChild, className, ...descriptionProps } = extractProps(ownProps, alertDescriptionPropDefs)\n    const Comp = asChild ? Slot : 'p'\n    const clamp = isLineClamp(lineClamp) ? lineClamp : undefined\n\n    return (\n      <Comp\n        {...descriptionProps}\n        ref={forwardedRef}\n        className={classNames('dsx-alert__description', className)}\n        data-line-clamp={clamp}\n        style={clamp ? ({ ...style, '--dsx-alert-line-clamp': clamp } as React.CSSProperties) : style}\n      />\n    )\n  },\n)\nAlertDescription.displayName = 'AlertDescription'\n\nconst Alert: typeof AlertRoot & {\n  Title: typeof AlertTitle\n  Description: typeof AlertDescription\n  Action: typeof AlertAction\n} = Object.assign(AlertRoot, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n  Action: AlertAction,\n})\n\nexport { Alert, AlertAction, AlertDescription, AlertRoot, AlertTitle }\nexport type { AlertDescriptionProps, AlertProps, AlertTitleProps }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/alert.css

@@ -2,6 +2,7 @@
 @import '../../_internal/baseCard.css';
 
 .dsx-alert {
+  box-sizing: border-box;
   display: flex;
   align-items: flex-start;
   gap: var(--dsx-space-md);
@@ -23,16 +24,53 @@
   color: currentColor;
 }
 
-.dsx-alert__action {
-  align-self: center;
+.dsx-alert__icon { flex-shrink: 0; }
+
+/* The icon is one column; the text and the actions are the other. Only this column wraps, so actions that drop below the text
+   start under the text and not under the icon (G-15, 2026-10-05). The gap is the alert's own, per size. */
+.dsx-alert__main {
+  display: flex;
+  flex: 1 1 0;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: inherit;
+  min-width: 0;
 }
 
+/* The basis is the width the text needs to read before the actions wrap below it; min() keeps it from overflowing a column
+   narrower than that. */
 .dsx-alert__content {
   display: grid;
   gap: var(--dsx-space-xs);
-  flex: 1;
+  flex: 1 1 min(calc(var(--dsx-size-xl) * 5), 100%);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* The direct-child Alert.Actions are one group. The content grows to push the group to the end of the row, and when the text
+   would drop under its readable width the group wraps below it as a whole, at the start of the column. It has no auto margin:
+   that would push a wrapped group to the far edge. Its own buttons wrap inside it when even the group is too wide. */
+.dsx-alert__actions {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--dsx-space-sm);
+  max-width: 100%;
+}
+
+.dsx-alert__action {
+  align-self: flex-start;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-sm);
 }
 
+.dsx-alert[data-variant='warning'] { border-color: var(--dsx-color-warning); }
+.dsx-alert[data-variant='success'] { border-color: var(--dsx-color-success); }
+.dsx-alert[data-variant='destructive'] { border-color: var(--dsx-color-error); }
+.dsx-alert[data-high-contrast='true'] { border-color: var(--dsx-color-high-contrast-border); }
+
 .dsx-alert__title {
   margin: 0;
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
@@ -72,3 +110,35 @@
   min-width: var(--dsx-size-lg);
   min-height: var(--dsx-size-lg);
 }
+
+/* With a trailing action, the icon, the first line of text and the action share one centre at any width: all
+   three get a control-height row, and the first line's box is that tall (`::first-line`). Alerts without an
+   action are untouched. Kept last so it wins over the size rules above. */
+:where(.dsx-alert:has(> .dsx-alert__main > .dsx-alert__actions)) :is(.dsx-alert__icon, .dsx-alert__action) {
+  min-height: var(--dsx-size-lg);
+}
+
+:where(.dsx-alert:has(> .dsx-alert__main > .dsx-alert__actions)) .dsx-alert__content > :where(:first-child)::first-line {
+  line-height: var(--dsx-size-lg);
+}
+
+/* `lineClamp` on Alert.Description: the text stops after that many lines with an ellipsis. */
+.dsx-alert__description[data-line-clamp] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--dsx-alert-line-clamp);
+  overflow: hidden;
+}
+
+/* Whether `::first-line` reaches into a clamped description depends on the engine (Chromium draws it as a block
+   container, WebKit and Gecko as a legacy flexbox), so the control-height first line above is switched off for it and
+   the same centring is done with padding in every engine: the first line sits on the middle of the control row (`lh`
+   is the element's own line height). */
+:where(.dsx-alert:has(> .dsx-alert__main > .dsx-alert__actions)) .dsx-alert__description[data-line-clamp] {
+  padding-block-start: calc((var(--dsx-size-lg) - 1lh) / 2);
+}
+
+/* Same specificity as the first-line rule it switches off (0,1,1), so source order decides: this one comes last. */
+:where(.dsx-alert:has(> .dsx-alert__main > .dsx-alert__actions)) .dsx-alert__description:where([data-line-clamp])::first-line {
+  line-height: inherit;
+}

package/dist/components/article-nodes.css

@@ -2,7 +2,22 @@
 .dsx-article-image__media, .dsx-before-after img { display: block; width: 100%; height: auto; border-radius: var(--dsx-rounded-md); }
 .dsx-article-image figcaption { margin-block-start: var(--dsx-space-sm); color: var(--dsx-color-on-surface-variant); text-align: center; }
 .dsx-article-embed, .dsx-article-poll { display: grid; gap: var(--dsx-space-sm); padding: var(--dsx-space-md); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface-raised); }
+.dsx-article-image, .dsx-article-embed, .dsx-article-poll, .dsx-before-after { min-width: 0; overflow-wrap: anywhere; }
 .dsx-before-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dsx-space-sm); overflow-x: auto; }
 .dsx-before-after > div { min-width: var(--dsx-size-3xl); }
 .dsx-before-after span { display: block; margin-block-start: var(--dsx-space-xs); color: var(--dsx-color-on-surface-variant); }
-.dsx-article-poll button { min-height: var(--dsx-size-lg); }
+.dsx-article-poll__option { min-width: 0; width: 100%; }
+.dsx-article-video { margin: var(--dsx-space-md) 0; min-width: 0; }
+.dsx-article-video__media { display: block; width: 100%; border-radius: var(--dsx-rounded-md); }
+.dsx-article-video figcaption { margin-block-start: var(--dsx-space-sm); color: var(--dsx-color-on-surface-variant); }
+.dsx-article-platform-tabs { min-width: 0; }
+.dsx-article-poll__result { display: grid; gap: var(--dsx-space-xs); min-width: 0; }
+.dsx-article-poll__result progress { width: 100%; accent-color: var(--dsx-color-accent-indicator); }
+.dsx-article-poll__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-space-sm); }
+.dsx-article-editor-block { display: grid; gap: var(--dsx-space-md); min-width: 0; margin-block: var(--dsx-space-md); padding: var(--dsx-space-md); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface); }
+.dsx-article-editor-block[aria-current='true'] { border-color: var(--dsx-color-accent-border); }
+.dsx-article-editor-block__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dsx-space-sm); }
+.dsx-article-editor-block__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-space-xs); }
+.dsx-article-editor-block__fields { display: grid; gap: var(--dsx-space-sm); min-width: 0; }
+.dsx-article-editor-block__content { min-width: 0; }
+.dsx-article-editor-block__textarea { width: 100%; min-height: var(--dsx-size-4xl); display: block; padding: var(--dsx-space-sm); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-sm); background: var(--dsx-color-surface-raised); color: var(--dsx-color-on-surface); font: inherit; }

package/dist/components/articleNodes/ArticleNodes.cjs

@@ -30,12 +30,17 @@ var ArticleNodes_exports = {};
 __export(ArticleNodes_exports, {
   ArticleEmbed: () => ArticleEmbed,
   ArticleImage: () => ArticleImage,
+  ArticleMaterialLink: () => ArticleMaterialLink,
+  ArticlePlatformTabs: () => ArticlePlatformTabs,
   ArticlePoll: () => ArticlePoll,
+  ArticleVideo: () => ArticleVideo,
   BeforeAfterComparison: () => BeforeAfterComparison
 });
 module.exports = __toCommonJS(ArticleNodes_exports);
 var React = __toESM(require("react"), 1);
 var import_classnames = __toESM(require("classnames"), 1);
+var import_Button = require("../button/Button");
+var import_Tabs = require("../tabs/Tabs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const ArticleImage = ({ caption, className, alt = "", ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { className: "dsx-article-image", children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { ...props, alt, className: (0, import_classnames.default)("dsx-article-image__media", className) }),
@@ -61,16 +66,52 @@ const BeforeAfterComparison = ({ beforeSrc, afterSrc, beforeAlt, afterAlt, befor
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: afterLabel })
   ] })
 ] });
-const ArticlePoll = ({ pollId, question, options = [], state = "ready", onLoad, onVote, className, ...props }) => {
+const ArticleVideo = ({ caption, className, controls = true, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { className: "dsx-article-video", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("video", { ...props, controls, className: (0, import_classnames.default)("dsx-article-video__media", className) }),
+  caption ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", { children: caption }) : null
+] });
+const ArticleMaterialLink = ({ materialId, href, children, unavailableLabel = "Material unavailable", ...props }) => {
+  let allowed = false;
+  try {
+    allowed = ["http:", "https:"].includes(new URL(href ?? "", "https://example.invalid").protocol);
+  } catch {
+  }
+  return href && allowed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props, href, "data-dsx-material-id": materialId, children }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "status", "data-dsx-material-id": materialId, children: unavailableLabel });
+};
+const ArticlePlatformTabs = ({ tabs, value, onValueChange, className, dir, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Tabs.Tabs, { ...props, dir: dir === "rtl" || dir === "ltr" ? dir : void 0, className: (0, import_classnames.default)("dsx-article-platform-tabs", className), defaultValue: tabs[0]?.platform, value, onValueChange, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Tabs.Tabs.List, { "aria-label": "Platform instructions", children: [
+    tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tabs.Tabs.Trigger, { value: tab.platform, children: tab.label }, tab.platform)),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tabs.Tabs.Indicator, {})
+  ] }),
+  tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tabs.Tabs.Content, { value: tab.platform, children: tab.content }, tab.platform))
+] });
+const ArticlePoll = ({ pollId, question, options = [], state = "ready", onLoad, onVote, selection, multiple = false, onSelectionChange, onSubmit, onRetract, totalVotes, className, ...props }) => {
   React.useEffect(() => {
     onLoad?.(pollId);
   }, [pollId, onLoad]);
+  const controlled = selection !== void 0;
+  const total = totalVotes ?? options.reduce((sum, option) => sum + (option.votes ?? 0), 0);
+  const inert = state === "closed" || state === "loading" || state === "error" || !controlled && state !== "ready";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...props, className: (0, import_classnames.default)("dsx-article-poll", className), "data-dsx-poll-id": pollId, "data-state": state, "aria-busy": state === "loading" || void 0, children: [
     question ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: question }) : null,
-    state === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "alert", children: "Poll unavailable" }) : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", disabled: state !== "ready", onClick: () => onVote?.(pollId, option.id), children: [
-      option.label,
-      option.votes === void 0 ? null : ` (${option.votes})`
-    ] }, option.id))
+    state === "closed" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "status", children: "Poll closed" }) : null,
+    state === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "alert", children: "Poll unavailable" }) : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-article-poll__result", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.Button, { className: "dsx-article-poll__option", type: "button", size: "lg", variant: selection?.includes(option.id) ? "secondary" : "outline", "aria-pressed": controlled ? selection.includes(option.id) : void 0, disabled: inert, onClick: () => {
+        if (!controlled) {
+          onVote?.(pollId, option.id);
+          return;
+        }
+        onSelectionChange?.(multiple ? selection.includes(option.id) ? selection.filter((id) => id !== option.id) : [...selection, option.id] : [option.id]);
+      }, children: [
+        option.label,
+        option.votes === void 0 ? null : ` (${option.votes})`
+      ] }),
+      option.votes !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("progress", { "aria-label": `${String(option.label)} results`, value: option.votes, max: Math.max(total, 1) }) : null
+    ] }, option.id)),
+    controlled && !inert ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-article-poll__actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", disabled: !selection.length || !onSubmit, onClick: () => onSubmit?.(pollId, selection), children: state === "voted" ? "Change vote" : "Vote" }),
+      state === "voted" && onRetract ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", variant: "outline", onClick: () => onRetract(pollId), children: "Retract vote" }) : null
+    ] }) : null
   ] });
 };
 //# sourceMappingURL=ArticleNodes.cjs.map