@d4gger/design-system 3.0.1 → 4.0.0

package/dist/components/breadcrumb.css

@@ -3,6 +3,8 @@
 .dsx-breadcrumb {
   box-sizing: border-box;
   display: block;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-breadcrumb__list {
@@ -33,7 +35,7 @@
 
 .dsx-breadcrumb__link:hover {
   background: var(--dsx-effect-hover-ghost);
-  color: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-indicator);
 }
 
 .dsx-breadcrumb__link:focus-visible {
@@ -51,8 +53,8 @@
   align-items: center;
   gap: var(--dsx-space-sm);
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
-  background: var(--dsx-color-accent-indicator);
-  color: var(--dsx-color-on-primary);
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-accent-indicator);
   font-weight: var(--dsx-typography-label-large-font-weight);
   border-radius: var(--dsx-rounded-md);
   cursor: default;
@@ -61,6 +63,8 @@
 .dsx-breadcrumb__item {
   display: inline-flex;
   align-items: center;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-breadcrumb__separator,
@@ -75,3 +79,20 @@
 .dsx-breadcrumb__page > svg {
   flex-shrink: 0;
 }
+
+.dsx-breadcrumb__link, .dsx-breadcrumb__page {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--dsx-size-md);
+  overflow-wrap: anywhere;
+}
+.dsx-breadcrumb:where([data-size='sm']) .dsx-breadcrumb__link,
+.dsx-breadcrumb:where([data-size='sm']) .dsx-breadcrumb__page {
+  font-size: var(--dsx-typography-body-small-font-size);
+  padding: var(--dsx-space-xs);
+}
+.dsx-breadcrumb:where([data-size='lg']) .dsx-breadcrumb__link,
+.dsx-breadcrumb:where([data-size='lg']) .dsx-breadcrumb__page {
+  font-size: var(--dsx-typography-body-large-font-size);
+  padding: var(--dsx-space-sm) var(--dsx-space-md);
+}

package/dist/components/callout.css

@@ -5,11 +5,14 @@
   --_icon-size: var(--dsx-size-md);
   --_padding: var(--dsx-space-md);
   --_gap: var(--dsx-space-sm);
+  --_callout-icon-color: var(--dsx-color-accent-indicator, var(--dsx-color-primary));
 
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: start;
   gap: var(--_gap);
+  min-width: 0;
+  overflow-wrap: anywhere;
   padding: var(--_padding);
   box-sizing: border-box;
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
@@ -25,27 +28,34 @@
   align-items: center;
   justify-content: center;
   grid-column: 1;
+  grid-row: 1 / span 3;
   width: var(--_icon-size);
   min-width: var(--_icon-size);
   height: var(--_icon-size);
-  color: var(--dsx-color-accent-indicator, var(--dsx-color-primary));
+  color: var(--_callout-icon-color);
 }
 
 .dsx-callout__text {
   grid-column: 2;
+  margin: 0;
+  min-width: 0;
 }
 .dsx-callout__title { grid-column: 2; margin: 0; color: var(--dsx-color-on-surface); font-family: var(--dsx-typography-label-large-font-family); font-size: var(--dsx-typography-label-large-font-size); font-weight: var(--dsx-typography-label-large-font-weight); line-height: var(--dsx-typography-label-large-line-height); }
-.dsx-callout[data-tone='warning'] { border-color: var(--dsx-color-warning); }
-.dsx-callout[data-tone='success'] { border-color: var(--dsx-color-success); }
-.dsx-callout[data-tone='danger'] { border-color: var(--dsx-color-error); }
+.dsx-callout[data-tone='warning'] { border-color: var(--dsx-color-warning); --_callout-icon-color: var(--dsx-color-warning); }
+.dsx-callout[data-tone='success'] { border-color: var(--dsx-color-success); --_callout-icon-color: var(--dsx-color-success); }
+.dsx-callout[data-tone='danger'] { border-color: var(--dsx-color-error); --_callout-icon-color: var(--dsx-color-error); }
 
 .dsx-callout__actions {
   display: flex;
   align-items: center;
   gap: var(--dsx-space-xs);
-  grid-column: 3;
+  grid-column: 2;
+  flex-wrap: wrap;
 }
 
+.dsx-callout:not(:has(.dsx-callout__icon)) { grid-template-columns: minmax(0, 1fr); }
+.dsx-callout:where(:not(:has(.dsx-callout__icon))) > :where(.dsx-callout__text, .dsx-callout__title, .dsx-callout__actions) { grid-column: 1; }
+
 .dsx-callout--soft {
   background-color: var(--dsx-color-surface-raised);
   border-color: var(--dsx-color-accent-surface, var(--dsx-color-outline-variant));
@@ -71,6 +81,9 @@
   border-color: var(--dsx-color-high-contrast-border);
 }
 
-.dsx-callout[data-high-contrast='true'] .dsx-text {
+.dsx-callout[data-high-contrast='true'] .dsx-text,
+.dsx-callout[data-high-contrast='true'] .dsx-callout__title {
   color: var(--dsx-color-high-contrast);
 }
+
+:where(.dsx-callout[data-high-contrast='true']) .dsx-callout__icon { color: var(--dsx-color-high-contrast); }

package/dist/components/card.css

@@ -75,3 +75,11 @@
   border-color: transparent;
   box-shadow: var(--dsx-boundary-high-contrast-ring);
 }
+
+/* Selection paints an inset ring. Reassert the transparent physical border
+   after the shared light-appearance edge rule, including in nested Themes. */
+.dsx-card:is([data-active='true'], [data-selected='true'], [aria-selected='true'], [data-state='active'], [data-state='selected']):where(:not([data-high-contrast='true'])) {
+  border-color: transparent;
+  background: var(--dsx-color-accent-surface);
+  box-shadow: var(--dsx-boundary-selected-ring), var(--dsx-shadow-1, var(--dsx-effect-shadow-1));
+}

package/dist/components/code.css

@@ -10,20 +10,19 @@
   text-transform: var(--dsx-typography-code-text-transform);
   text-decoration: var(--dsx-typography-code-text-decoration);
   border-radius: var(--dsx-rounded-sm);
-  padding: var(--dsx-space-0-5, 2px) var(--dsx-space-1-5, 6px);
+  padding: var(--dsx-space-0-5) var(--dsx-space-1-5);
   box-sizing: border-box;
   height: fit-content;
 }
 
 .dsx-code--soft {
-  background-color: var(--dsx-color-surface-sunken);
+  background-color: var(--dsx-code-soft-background);
   color: var(--dsx-color-on-surface);
-  box-shadow: inset 0 0 0 1px var(--dsx-color-outline-variant);
 }
 
 .dsx-code--solid {
-  background-color: var(--dsx-color-primary);
-  color: var(--dsx-color-on-primary);
+  background-color: var(--dsx-color-accent-track);
+  color: var(--dsx-color-accent-contrast);
 }
 
 .dsx-code--outline {
@@ -43,7 +42,7 @@
 }
 
 .dsx-code--solid.dsx-code--muted {
-  color: color-mix(in srgb, var(--dsx-color-on-primary) 65%, transparent);
+  color: var(--dsx-color-accent-contrast);
 }
 
 .dsx-code--inverse {
@@ -51,14 +50,14 @@
 }
 
 .dsx-code--soft.dsx-code--inverse {
-  background-color: color-mix(in srgb, var(--dsx-color-on-high-contrast) 15%, transparent);
-  color: var(--dsx-color-on-high-contrast);
+  background-color: var(--dsx-color-inverse-background);
+  color: var(--dsx-color-on-inverse-background);
   box-shadow: none;
 }
 
 /* solid already supplies its own on-primary/background pairing — tone must not override it */
 .dsx-code--solid.dsx-code--inverse {
-  color: var(--dsx-color-on-primary);
+  color: var(--dsx-color-accent-contrast);
 }
 
 /* Size */
@@ -66,12 +65,29 @@
   font-size: calc(var(--dsx-typography-code-font-size, 0.875em) * 0.85);
 }
 
-.dsx-code[data-size='lg'] {
+.dsx-code:where([data-size='lg']) {
   font-size: calc(var(--dsx-typography-code-font-size, 0.875em) * 1.15);
-  padding: var(--dsx-space-1-5, 6px) var(--dsx-space-sm, 8px);
 }
 
 /* Accent color — solid already tracks --dsx-color-primary via the [data-accent-color] token rescope */
-.dsx-code[data-accent-color]:not(.dsx-code--solid) {
-  color: var(--dsx-color-accent-9);
+.dsx-code:where([data-accent-color]):not(.dsx-code--solid, .dsx-code--inverse) {
+  color: var(--dsx-color-accent-indicator);
+}
+
+/* Contrast keeps each filled treatment paired with its own foreground. */
+.dsx-code:where(:not(.dsx-code--inverse))[data-high-contrast='true'] {
+  color: var(--dsx-color-high-contrast);
+}
+
+.dsx-code--soft:where(:not(.dsx-code--inverse))[data-high-contrast='true'] {
+  background-color: var(--dsx-color-high-contrast-container);
+}
+
+.dsx-code--solid[data-high-contrast='true'] {
+  background-color: var(--dsx-color-high-contrast);
+  color: var(--dsx-color-on-high-contrast);
+}
+
+.dsx-code--inverse:is(.dsx-code--outline, .dsx-code--ghost) {
+  color: var(--dsx-color-on-inverse-background);
 }

package/dist/components/collapsible/Collapsible.cjs

@@ -47,6 +47,8 @@ const COLLAPSIBLE_MOTION_STYLES = `
 @keyframes dsx-collapsible-expand {
   from {
     height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
     opacity: 0;
   }
 
@@ -64,6 +66,8 @@ const COLLAPSIBLE_MOTION_STYLES = `
 
   to {
     height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
     opacity: 0;
   }
 }

package/dist/components/collapsible/Collapsible.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collapsible/Collapsible.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { collapsibleContentPropDefs, collapsiblePropDefs, collapsibleTriggerPropDefs } from './collapsible.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst COLLAPSIBLE_MOTION_STYLE_ID = 'dsx-collapsible-motion-styles'\nconst COLLAPSIBLE_MOTION_STYLES = `\n@keyframes dsx-collapsible-expand {\n  from {\n    height: 0;\n    opacity: 0;\n  }\n\n  to {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n}\n\n@keyframes dsx-collapsible-collapse {\n  from {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n\n  to {\n    height: 0;\n    opacity: 0;\n  }\n}\n\n.dsx-collapsible__content[data-state='open'] {\n  animation: dsx-collapsible-expand var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);\n}\n\n.dsx-collapsible__content[data-state='closed'] {\n  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out) both;\n  overflow: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dsx-collapsible__content[data-state='open'],\n  .dsx-collapsible__content[data-state='closed'] {\n    animation: none !important;\n  }\n  /* No animation runs, so forceMount-kept closed content would render at\n     full height \u2014 hide it outright for reduced-motion users. */\n  .dsx-collapsible__content[data-state='closed'] {\n    display: none;\n  }\n}\n`\n\nfunction useCollapsibleMotionStyles() {\n  React.useInsertionEffect(() => {\n    if (typeof document === 'undefined') {\n      return\n    }\n\n    if (document.getElementById(COLLAPSIBLE_MOTION_STYLE_ID)) {\n      return\n    }\n\n    const style = document.createElement('style')\n\n    style.id = COLLAPSIBLE_MOTION_STYLE_ID\n    style.textContent = COLLAPSIBLE_MOTION_STYLES\n\n    document.head.appendChild(style)\n  }, [])\n}\n\ntype CollapsibleOwnProps = GetPropDefTypes<typeof collapsiblePropDefs>\ntype CollapsibleTriggerOwnProps = GetPropDefTypes<typeof collapsibleTriggerPropDefs>\ntype CollapsibleContentOwnProps = GetPropDefTypes<typeof collapsibleContentPropDefs>\n\ntype CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> & CollapsibleOwnProps\ntype CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger> & CollapsibleTriggerOwnProps\ntype CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> & CollapsibleContentOwnProps\n\nconst CollapsibleRoot = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Root>, CollapsibleProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...collapsibleProps } = extractProps(props, collapsiblePropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Root {...collapsibleProps} ref={forwardedRef} asChild>\n        <Comp className={className}>{children}</Comp>\n      </CollapsiblePrimitive.Root>\n    )\n  },\n)\nCollapsibleRoot.displayName = 'Collapsible'\n\nconst CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Trigger>, CollapsibleTriggerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...triggerProps } = extractProps(props, collapsibleTriggerPropDefs)\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <CollapsiblePrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__trigger', className)}>\n          <span>{asChild ? <Slottable>{children}</Slottable> : children}</span>\n          <Icon name=\"chevron-down\" size=\"lg\" className=\"dsx-collapsible__chevron\" />\n        </Comp>\n      </CollapsiblePrimitive.Trigger>\n    )\n  },\n)\nCollapsibleTrigger.displayName = 'CollapsibleTrigger'\n\nconst CollapsibleContent = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Content>, CollapsibleContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    useCollapsibleMotionStyles()\n\n    const { asChild, className, ...contentProps } = extractProps(props, collapsibleContentPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Content {...contentProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__content', className)}>\n          {asChild ? <Slottable>{children}</Slottable> : children}\n        </Comp>\n      </CollapsiblePrimitive.Content>\n    )\n  },\n)\nCollapsibleContent.displayName = 'CollapsibleContent'\n\nconst Collapsible: typeof CollapsibleRoot & {\n  Trigger: typeof CollapsibleTrigger\n  Content: typeof CollapsibleContent\n} = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n})\n\nexport { Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger }\nexport type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,2BAAsC;AACtC,wBAAgC;AAEhC,0BAA6B;AAC7B,kBAAqB;AACrB,yBAA4F;AAsFpF;AAlFR,MAAM,8BAA8B;AACpC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+ClC,SAAS,6BAA6B;AACpC,QAAM,mBAAmB,MAAM;AAC7B,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAEA,QAAI,SAAS,eAAe,2BAA2B,GAAG;AACxD;AAAA,IACF;AAEA,UAAM,QAAQ,SAAS,cAAc,OAAO;AAE5C,UAAM,KAAK;AACX,UAAM,cAAc;AAEpB,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AACP;AAUA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,QAAI,kCAAa,OAAO,sCAAmB;AAC3F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,MAArB,EAA2B,GAAG,kBAAkB,KAAK,cAAc,SAAO,MACzE,sDAAC,QAAK,WAAuB,UAAS,GACxC;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAE9B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,QAAI,kCAAa,OAAO,6CAA0B;AAC9F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,uDAAC,QAAK,eAAW,kBAAAA,SAAW,4BAA4B,SAAS,GAC/D;AAAA,kDAAC,UAAM,oBAAU,4CAAC,+BAAW,UAAS,IAAe,UAAS;AAAA,MAC9D,4CAAC,oBAAK,MAAK,gBAAe,MAAK,MAAK,WAAU,4BAA2B;AAAA,OAC3E,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,+BAA2B;AAE3B,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,QAAI,kCAAa,OAAO,6CAA0B;AAC9F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,sDAAC,QAAK,eAAW,kBAAAA,SAAW,4BAA4B,SAAS,GAC9D,oBAAU,4CAAC,+BAAW,UAAS,IAAe,UACjD,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,cAGF,OAAO,OAAO,iBAAiB;AAAA,EACjC,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { collapsibleContentPropDefs, collapsiblePropDefs, collapsibleTriggerPropDefs } from './collapsible.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst COLLAPSIBLE_MOTION_STYLE_ID = 'dsx-collapsible-motion-styles'\nconst COLLAPSIBLE_MOTION_STYLES = `\n@keyframes dsx-collapsible-expand {\n  from {\n    height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    opacity: 0;\n  }\n\n  to {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n}\n\n@keyframes dsx-collapsible-collapse {\n  from {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n\n  to {\n    height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    opacity: 0;\n  }\n}\n\n.dsx-collapsible__content[data-state='open'] {\n  animation: dsx-collapsible-expand var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);\n}\n\n.dsx-collapsible__content[data-state='closed'] {\n  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out) both;\n  overflow: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dsx-collapsible__content[data-state='open'],\n  .dsx-collapsible__content[data-state='closed'] {\n    animation: none !important;\n  }\n  /* No animation runs, so forceMount-kept closed content would render at\n     full height \u2014 hide it outright for reduced-motion users. */\n  .dsx-collapsible__content[data-state='closed'] {\n    display: none;\n  }\n}\n`\n\nfunction useCollapsibleMotionStyles() {\n  React.useInsertionEffect(() => {\n    if (typeof document === 'undefined') {\n      return\n    }\n\n    if (document.getElementById(COLLAPSIBLE_MOTION_STYLE_ID)) {\n      return\n    }\n\n    const style = document.createElement('style')\n\n    style.id = COLLAPSIBLE_MOTION_STYLE_ID\n    style.textContent = COLLAPSIBLE_MOTION_STYLES\n\n    document.head.appendChild(style)\n  }, [])\n}\n\ntype CollapsibleOwnProps = GetPropDefTypes<typeof collapsiblePropDefs>\ntype CollapsibleTriggerOwnProps = GetPropDefTypes<typeof collapsibleTriggerPropDefs>\ntype CollapsibleContentOwnProps = GetPropDefTypes<typeof collapsibleContentPropDefs>\n\ntype CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> & CollapsibleOwnProps\ntype CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger> & CollapsibleTriggerOwnProps\ntype CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> & CollapsibleContentOwnProps\n\nconst CollapsibleRoot = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Root>, CollapsibleProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...collapsibleProps } = extractProps(props, collapsiblePropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Root {...collapsibleProps} ref={forwardedRef} asChild>\n        <Comp className={className}>{children}</Comp>\n      </CollapsiblePrimitive.Root>\n    )\n  },\n)\nCollapsibleRoot.displayName = 'Collapsible'\n\nconst CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Trigger>, CollapsibleTriggerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...triggerProps } = extractProps(props, collapsibleTriggerPropDefs)\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <CollapsiblePrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__trigger', className)}>\n          <span>{asChild ? <Slottable>{children}</Slottable> : children}</span>\n          <Icon name=\"chevron-down\" size=\"lg\" className=\"dsx-collapsible__chevron\" />\n        </Comp>\n      </CollapsiblePrimitive.Trigger>\n    )\n  },\n)\nCollapsibleTrigger.displayName = 'CollapsibleTrigger'\n\nconst CollapsibleContent = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Content>, CollapsibleContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    useCollapsibleMotionStyles()\n\n    const { asChild, className, ...contentProps } = extractProps(props, collapsibleContentPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Content {...contentProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__content', className)}>\n          {asChild ? <Slottable>{children}</Slottable> : children}\n        </Comp>\n      </CollapsiblePrimitive.Content>\n    )\n  },\n)\nCollapsibleContent.displayName = 'CollapsibleContent'\n\nconst Collapsible: typeof CollapsibleRoot & {\n  Trigger: typeof CollapsibleTrigger\n  Content: typeof CollapsibleContent\n} = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n})\n\nexport { Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger }\nexport type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,2BAAsC;AACtC,wBAAgC;AAEhC,0BAA6B;AAC7B,kBAAqB;AACrB,yBAA4F;AA0FpF;AAtFR,MAAM,8BAA8B;AACpC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDlC,SAAS,6BAA6B;AACpC,QAAM,mBAAmB,MAAM;AAC7B,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAEA,QAAI,SAAS,eAAe,2BAA2B,GAAG;AACxD;AAAA,IACF;AAEA,UAAM,QAAQ,SAAS,cAAc,OAAO;AAE5C,UAAM,KAAK;AACX,UAAM,cAAc;AAEpB,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AACP;AAUA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,QAAI,kCAAa,OAAO,sCAAmB;AAC3F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,MAArB,EAA2B,GAAG,kBAAkB,KAAK,cAAc,SAAO,MACzE,sDAAC,QAAK,WAAuB,UAAS,GACxC;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAE9B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,QAAI,kCAAa,OAAO,6CAA0B;AAC9F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,uDAAC,QAAK,eAAW,kBAAAA,SAAW,4BAA4B,SAAS,GAC/D;AAAA,kDAAC,UAAM,oBAAU,4CAAC,+BAAW,UAAS,IAAe,UAAS;AAAA,MAC9D,4CAAC,oBAAK,MAAK,gBAAe,MAAK,MAAK,WAAU,4BAA2B;AAAA,OAC3E,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,+BAA2B;AAE3B,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,QAAI,kCAAa,OAAO,6CAA0B;AAC9F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,sDAAC,QAAK,eAAW,kBAAAA,SAAW,4BAA4B,SAAS,GAC9D,oBAAU,4CAAC,+BAAW,UAAS,IAAe,UACjD,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,cAGF,OAAO,OAAO,iBAAiB;AAAA,EACjC,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
   "names": ["classNames"]
 }

package/dist/components/collapsible/Collapsible.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.cts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAqEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"Collapsible.d.cts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAyEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/collapsible/Collapsible.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.mts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAqEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"Collapsible.d.mts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAyEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/collapsible/Collapsible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAqEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAA;AAKnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAA;AAEjH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAyEpE,KAAK,mBAAmB,GAAG,eAAe,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACtE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAEpF,KAAK,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAA;AAC9G,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAC/H,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,OAAO,CAAC,GAAG,0BAA0B,CAAA;AAE/H,QAAA,MAAM,eAAe;;;;;yCAWpB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;4CAcvB,CAAA;AAGD,QAAA,MAAM,kBAAkB;;;;;yCAevB,CAAA;AAGD,QAAA,MAAM,WAAW,EAAE,OAAO,eAAe,GAAG;IAC1C,OAAO,EAAE,OAAO,kBAAkB,CAAA;IAClC,OAAO,EAAE,OAAO,kBAAkB,CAAA;CAIlC,CAAA;AAEF,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAA;AAC/E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/collapsible/Collapsible.js

@@ -11,6 +11,8 @@ const COLLAPSIBLE_MOTION_STYLES = `
 @keyframes dsx-collapsible-expand {
   from {
     height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
     opacity: 0;
   }
 
@@ -28,6 +30,8 @@ const COLLAPSIBLE_MOTION_STYLES = `
 
   to {
     height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
     opacity: 0;
   }
 }

package/dist/components/collapsible/Collapsible.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/collapsible/Collapsible.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { collapsibleContentPropDefs, collapsiblePropDefs, collapsibleTriggerPropDefs } from './collapsible.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst COLLAPSIBLE_MOTION_STYLE_ID = 'dsx-collapsible-motion-styles'\nconst COLLAPSIBLE_MOTION_STYLES = `\n@keyframes dsx-collapsible-expand {\n  from {\n    height: 0;\n    opacity: 0;\n  }\n\n  to {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n}\n\n@keyframes dsx-collapsible-collapse {\n  from {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n\n  to {\n    height: 0;\n    opacity: 0;\n  }\n}\n\n.dsx-collapsible__content[data-state='open'] {\n  animation: dsx-collapsible-expand var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);\n}\n\n.dsx-collapsible__content[data-state='closed'] {\n  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out) both;\n  overflow: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dsx-collapsible__content[data-state='open'],\n  .dsx-collapsible__content[data-state='closed'] {\n    animation: none !important;\n  }\n  /* No animation runs, so forceMount-kept closed content would render at\n     full height \u2014 hide it outright for reduced-motion users. */\n  .dsx-collapsible__content[data-state='closed'] {\n    display: none;\n  }\n}\n`\n\nfunction useCollapsibleMotionStyles() {\n  React.useInsertionEffect(() => {\n    if (typeof document === 'undefined') {\n      return\n    }\n\n    if (document.getElementById(COLLAPSIBLE_MOTION_STYLE_ID)) {\n      return\n    }\n\n    const style = document.createElement('style')\n\n    style.id = COLLAPSIBLE_MOTION_STYLE_ID\n    style.textContent = COLLAPSIBLE_MOTION_STYLES\n\n    document.head.appendChild(style)\n  }, [])\n}\n\ntype CollapsibleOwnProps = GetPropDefTypes<typeof collapsiblePropDefs>\ntype CollapsibleTriggerOwnProps = GetPropDefTypes<typeof collapsibleTriggerPropDefs>\ntype CollapsibleContentOwnProps = GetPropDefTypes<typeof collapsibleContentPropDefs>\n\ntype CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> & CollapsibleOwnProps\ntype CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger> & CollapsibleTriggerOwnProps\ntype CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> & CollapsibleContentOwnProps\n\nconst CollapsibleRoot = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Root>, CollapsibleProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...collapsibleProps } = extractProps(props, collapsiblePropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Root {...collapsibleProps} ref={forwardedRef} asChild>\n        <Comp className={className}>{children}</Comp>\n      </CollapsiblePrimitive.Root>\n    )\n  },\n)\nCollapsibleRoot.displayName = 'Collapsible'\n\nconst CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Trigger>, CollapsibleTriggerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...triggerProps } = extractProps(props, collapsibleTriggerPropDefs)\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <CollapsiblePrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__trigger', className)}>\n          <span>{asChild ? <Slottable>{children}</Slottable> : children}</span>\n          <Icon name=\"chevron-down\" size=\"lg\" className=\"dsx-collapsible__chevron\" />\n        </Comp>\n      </CollapsiblePrimitive.Trigger>\n    )\n  },\n)\nCollapsibleTrigger.displayName = 'CollapsibleTrigger'\n\nconst CollapsibleContent = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Content>, CollapsibleContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    useCollapsibleMotionStyles()\n\n    const { asChild, className, ...contentProps } = extractProps(props, collapsibleContentPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Content {...contentProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__content', className)}>\n          {asChild ? <Slottable>{children}</Slottable> : children}\n        </Comp>\n      </CollapsiblePrimitive.Content>\n    )\n  },\n)\nCollapsibleContent.displayName = 'CollapsibleContent'\n\nconst Collapsible: typeof CollapsibleRoot & {\n  Trigger: typeof CollapsibleTrigger\n  Content: typeof CollapsibleContent\n} = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n})\n\nexport { Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger }\nexport type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,YAAY,0BAA0B;AACtC,SAAS,MAAM,iBAAiB;AAEhC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,4BAA4B,qBAAqB,kCAAkC;AAsFpF,cAcA,YAdA;AAlFR,MAAM,8BAA8B;AACpC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+ClC,SAAS,6BAA6B;AACpC,QAAM,mBAAmB,MAAM;AAC7B,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAEA,QAAI,SAAS,eAAe,2BAA2B,GAAG;AACxD;AAAA,IACF;AAEA,UAAM,QAAQ,SAAS,cAAc,OAAO;AAE5C,UAAM,KAAK;AACX,UAAM,cAAc;AAEpB,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AACP;AAUA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,IAAI,aAAa,OAAO,mBAAmB;AAC3F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,MAArB,EAA2B,GAAG,kBAAkB,KAAK,cAAc,SAAO,MACzE,8BAAC,QAAK,WAAuB,UAAS,GACxC;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAE9B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,IAAI,aAAa,OAAO,0BAA0B;AAC9F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,+BAAC,QAAK,WAAW,WAAW,4BAA4B,SAAS,GAC/D;AAAA,0BAAC,UAAM,oBAAU,oBAAC,aAAW,UAAS,IAAe,UAAS;AAAA,MAC9D,oBAAC,QAAK,MAAK,gBAAe,MAAK,MAAK,WAAU,4BAA2B;AAAA,OAC3E,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,+BAA2B;AAE3B,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,IAAI,aAAa,OAAO,0BAA0B;AAC9F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,8BAAC,QAAK,WAAW,WAAW,4BAA4B,SAAS,GAC9D,oBAAU,oBAAC,aAAW,UAAS,IAAe,UACjD,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,cAGF,OAAO,OAAO,iBAAiB;AAAA,EACjC,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { collapsibleContentPropDefs, collapsiblePropDefs, collapsibleTriggerPropDefs } from './collapsible.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\nconst COLLAPSIBLE_MOTION_STYLE_ID = 'dsx-collapsible-motion-styles'\nconst COLLAPSIBLE_MOTION_STYLES = `\n@keyframes dsx-collapsible-expand {\n  from {\n    height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    opacity: 0;\n  }\n\n  to {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n}\n\n@keyframes dsx-collapsible-collapse {\n  from {\n    height: var(--radix-collapsible-content-height);\n    opacity: 1;\n  }\n\n  to {\n    height: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    opacity: 0;\n  }\n}\n\n.dsx-collapsible__content[data-state='open'] {\n  animation: dsx-collapsible-expand var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out);\n}\n\n.dsx-collapsible__content[data-state='closed'] {\n  animation: dsx-collapsible-collapse var(--dsx-motion-duration-normal) var(--dsx-motion-easing-in-out) both;\n  overflow: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dsx-collapsible__content[data-state='open'],\n  .dsx-collapsible__content[data-state='closed'] {\n    animation: none !important;\n  }\n  /* No animation runs, so forceMount-kept closed content would render at\n     full height \u2014 hide it outright for reduced-motion users. */\n  .dsx-collapsible__content[data-state='closed'] {\n    display: none;\n  }\n}\n`\n\nfunction useCollapsibleMotionStyles() {\n  React.useInsertionEffect(() => {\n    if (typeof document === 'undefined') {\n      return\n    }\n\n    if (document.getElementById(COLLAPSIBLE_MOTION_STYLE_ID)) {\n      return\n    }\n\n    const style = document.createElement('style')\n\n    style.id = COLLAPSIBLE_MOTION_STYLE_ID\n    style.textContent = COLLAPSIBLE_MOTION_STYLES\n\n    document.head.appendChild(style)\n  }, [])\n}\n\ntype CollapsibleOwnProps = GetPropDefTypes<typeof collapsiblePropDefs>\ntype CollapsibleTriggerOwnProps = GetPropDefTypes<typeof collapsibleTriggerPropDefs>\ntype CollapsibleContentOwnProps = GetPropDefTypes<typeof collapsibleContentPropDefs>\n\ntype CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root> & CollapsibleOwnProps\ntype CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger> & CollapsibleTriggerOwnProps\ntype CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content> & CollapsibleContentOwnProps\n\nconst CollapsibleRoot = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Root>, CollapsibleProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...collapsibleProps } = extractProps(props, collapsiblePropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Root {...collapsibleProps} ref={forwardedRef} asChild>\n        <Comp className={className}>{children}</Comp>\n      </CollapsiblePrimitive.Root>\n    )\n  },\n)\nCollapsibleRoot.displayName = 'Collapsible'\n\nconst CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Trigger>, CollapsibleTriggerProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...triggerProps } = extractProps(props, collapsibleTriggerPropDefs)\n    const Comp = asChild ? Slot : 'button'\n\n    return (\n      <CollapsiblePrimitive.Trigger {...triggerProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__trigger', className)}>\n          <span>{asChild ? <Slottable>{children}</Slottable> : children}</span>\n          <Icon name=\"chevron-down\" size=\"lg\" className=\"dsx-collapsible__chevron\" />\n        </Comp>\n      </CollapsiblePrimitive.Trigger>\n    )\n  },\n)\nCollapsibleTrigger.displayName = 'CollapsibleTrigger'\n\nconst CollapsibleContent = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Content>, CollapsibleContentProps>(\n  ({ children, ...props }, forwardedRef) => {\n    useCollapsibleMotionStyles()\n\n    const { asChild, className, ...contentProps } = extractProps(props, collapsibleContentPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <CollapsiblePrimitive.Content {...contentProps} ref={forwardedRef} asChild>\n        <Comp className={classNames('dsx-collapsible__content', className)}>\n          {asChild ? <Slottable>{children}</Slottable> : children}\n        </Comp>\n      </CollapsiblePrimitive.Content>\n    )\n  },\n)\nCollapsibleContent.displayName = 'CollapsibleContent'\n\nconst Collapsible: typeof CollapsibleRoot & {\n  Trigger: typeof CollapsibleTrigger\n  Content: typeof CollapsibleContent\n} = Object.assign(CollapsibleRoot, {\n  Trigger: CollapsibleTrigger,\n  Content: CollapsibleContent,\n})\n\nexport { Collapsible, CollapsibleContent, CollapsibleRoot, CollapsibleTrigger }\nexport type { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps }\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,YAAY,0BAA0B;AACtC,SAAS,MAAM,iBAAiB;AAEhC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,4BAA4B,qBAAqB,kCAAkC;AA0FpF,cAcA,YAdA;AAtFR,MAAM,8BAA8B;AACpC,MAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDlC,SAAS,6BAA6B;AACpC,QAAM,mBAAmB,MAAM;AAC7B,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAEA,QAAI,SAAS,eAAe,2BAA2B,GAAG;AACxD;AAAA,IACF;AAEA,UAAM,QAAQ,SAAS,cAAc,OAAO;AAE5C,UAAM,KAAK;AACX,UAAM,cAAc;AAEpB,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AACP;AAUA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,IAAI,aAAa,OAAO,mBAAmB;AAC3F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,MAArB,EAA2B,GAAG,kBAAkB,KAAK,cAAc,SAAO,MACzE,8BAAC,QAAK,WAAuB,UAAS,GACxC;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAE9B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,IAAI,aAAa,OAAO,0BAA0B;AAC9F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,+BAAC,QAAK,WAAW,WAAW,4BAA4B,SAAS,GAC/D;AAAA,0BAAC,UAAM,oBAAU,oBAAC,aAAW,UAAS,IAAe,UAAS;AAAA,MAC9D,oBAAC,QAAK,MAAK,gBAAe,MAAK,MAAK,WAAU,4BAA2B;AAAA,OAC3E,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACxC,+BAA2B;AAE3B,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,IAAI,aAAa,OAAO,0BAA0B;AAC9F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,qBAAqB,SAArB,EAA8B,GAAG,cAAc,KAAK,cAAc,SAAO,MACxE,8BAAC,QAAK,WAAW,WAAW,4BAA4B,SAAS,GAC9D,oBAAU,oBAAC,aAAW,UAAS,IAAe,UACjD,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAEjC,MAAM,cAGF,OAAO,OAAO,iBAAiB;AAAA,EACjC,SAAS;AAAA,EACT,SAAS;AACX,CAAC;",
   "names": []
 }

package/dist/components/collapsible.css

@@ -15,7 +15,7 @@
 }
 
 .dsx-collapsible__trigger[data-state='open'] {
-  color: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-indicator);
 }
 
 .dsx-collapsible__trigger:focus-visible {
@@ -23,7 +23,10 @@
   box-shadow: var(--dsx-shadow-focus-ring);
 }
 
+.dsx-collapsible__trigger > :where(span) { min-width: 0; text-align: start; overflow-wrap: anywhere; }
+
 .dsx-collapsible__chevron {
+  flex-shrink: 0;
   transition: transform var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
 }
 
@@ -38,3 +41,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-collapsible__chevron { transition: none; }
+}
+
+.dsx-collapsible__trigger:disabled { opacity: var(--dsx-opacity-disabled); }

package/dist/components/command.css

@@ -59,7 +59,6 @@
 .dsx-command__group [cmdk-group-heading] {
   margin-top: var(--dsx-space-md);
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
-  border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   font-family: var(--dsx-typography-label-small-font-family), sans-serif;
   font-size: var(--dsx-typography-label-small-font-size);
   font-weight: var(--dsx-typography-label-small-font-weight);
@@ -82,7 +81,6 @@
 .dsx-command__group-heading {
   margin-top: var(--dsx-space-md);
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
-  border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   font-size: var(--dsx-typography-label-small-font-size);
   font-family: var(--dsx-typography-label-small-font-family), sans-serif;
   font-weight: var(--dsx-typography-label-small-font-weight);

package/dist/components/comment-thread.css

@@ -1,12 +1,20 @@
-.dsx-comment-thread { display: grid; gap: var(--dsx-space-md); }
-.dsx-comment-thread__comment { display: grid; grid-template-columns: auto 1fr; gap: var(--dsx-space-sm); padding: var(--dsx-space-md); border-block-end: var(--dsx-border-width-sm) solid var(--dsx-color-outline); }
+.dsx-comment-thread { display: grid; gap: var(--dsx-space-md); min-width: 0; }
+.dsx-comment-thread__comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--dsx-space-sm); padding: var(--dsx-space-md); border-block-end: var(--dsx-border-width-sm) solid var(--dsx-color-outline); min-width: 0; overflow-wrap: anywhere; }
 .dsx-comment-thread__avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--dsx-size-xl); height: var(--dsx-size-xl); overflow: hidden; border-radius: var(--dsx-rounded-full); background: var(--dsx-color-surface); color: var(--dsx-color-on-surface-variant); }
 .dsx-comment-thread__avatar img { width: 100%; height: 100%; object-fit: cover; }
-.dsx-comment-thread__comment header { display: flex; align-items: baseline; gap: var(--dsx-space-sm); }
+.dsx-comment-thread__comment header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dsx-space-sm); min-width: 0; }
+.dsx-comment-thread__comment :where(header > *) { min-width: 0; }
 .dsx-comment-thread__comment time { color: var(--dsx-color-on-surface-variant); }
-.dsx-comment-thread__body, .dsx-comment-thread__actions { grid-column: 2; }
-.dsx-comment-thread__actions { display: flex; gap: var(--dsx-space-sm); }
+.dsx-comment-thread__body, .dsx-comment-thread__actions { grid-column: 2; min-width: 0; }
+.dsx-comment-thread__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-space-sm); }
 .dsx-comment-thread__replies { margin-inline-start: var(--dsx-space-xl); }
 .dsx-comment-thread__tombstone, .dsx-comment-thread__locked { padding: var(--dsx-space-md); color: var(--dsx-color-on-surface-variant); background: var(--dsx-color-surface-sunken); }
-.dsx-comment-thread__composer { display: grid; gap: var(--dsx-space-sm); }
-.dsx-comment-thread__composer textarea { min-height: var(--dsx-size-4xl); 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-sunken); color: var(--dsx-color-on-surface); }
+.dsx-comment-thread__composer { display: grid; gap: var(--dsx-space-sm); min-width: 0; }
+.dsx-comment-thread__composer :where(textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--dsx-size-4xl); 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-sunken); color: var(--dsx-color-on-surface); font-family: var(--dsx-typography-body-medium-font-family), sans-serif; font-size: var(--dsx-typography-body-medium-font-size); font-weight: var(--dsx-typography-body-medium-font-weight); line-height: var(--dsx-typography-body-medium-line-height); resize: vertical; }
+.dsx-comment-thread__composer :where(textarea:focus-visible) { outline: none; border-color: var(--dsx-color-accent-indicator); box-shadow: var(--dsx-shadow-focus-ring); }
+.dsx-comment-thread__composer :where(textarea:disabled) { background: var(--dsx-color-disabled-surface); color: var(--dsx-color-disabled-text); border-color: var(--dsx-color-disabled-border); cursor: var(--dsx-cursor-disabled, not-allowed); }
+.dsx-comment-thread__count { color: var(--dsx-color-on-surface-variant); font-size: var(--dsx-typography-body-small-font-size); }
+.dsx-comment-thread__submit { justify-self: start; max-width: 100%; }
+
+.dsx-comment-thread__actions .dsx-button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
+.dsx-comment-thread__actions .dsx-button__content { min-width: 0; }

package/dist/components/commentThread/CommentThread.cjs

@@ -39,39 +39,67 @@ __export(CommentThread_exports, {
 module.exports = __toCommonJS(CommentThread_exports);
 var React = __toESM(require("react"), 1);
 var import_classnames = __toESM(require("classnames"), 1);
+var import_Button = require("../button/Button");
 var import_jsx_runtime = require("react/jsx-runtime");
-const Comment = React.forwardRef(({ author, avatarSrc, badge, dateTime, timeLabel, actions, className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { ...props, ref, className: (0, import_classnames.default)("dsx-comment-thread__comment", className), children: [
+const Comment = React.forwardRef(({ author, avatarSrc, badge, dateTime, timeLabel, actions, metadata, className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { ...props, ref, className: (0, import_classnames.default)("dsx-comment-thread__comment", className), children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-comment-thread__avatar", children: avatarSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: avatarSrc, alt: "" }) : author.split(/\s+/).map((part) => part[0]).join("").slice(0, 2).toUpperCase() }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: author }),
     badge,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("time", { dateTime, children: timeLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("time", { dateTime, children: timeLabel }),
+    metadata
   ] }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-comment-thread__body", children }),
   actions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-comment-thread__actions", children: actions }) : null
 ] }));
 Comment.displayName = "CommentThreadComment";
 const ReplyDepthContext = React.createContext(0);
-const Replies = React.forwardRef(({ className, children, ...props }, ref) => {
+const Replies = React.forwardRef(({ className, children, limit, expanded: expandedProp, onExpandedChange, moreLabel, ...props }, ref) => {
+  const [localExpanded, setLocalExpanded] = React.useState(false);
+  const expanded = expandedProp ?? localExpanded;
+  const all = React.Children.toArray(children);
+  const visible = limit == null || expanded ? all : all.slice(0, Math.max(0, limit));
+  const remaining = all.length - visible.length;
   const depth = React.useContext(ReplyDepthContext);
   if (depth >= 1) throw new Error("CommentThread supports one reply level.");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReplyDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref, role: props.role ?? "group", className: (0, import_classnames.default)("dsx-comment-thread__replies", className), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReplyDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...props, ref, role: props.role ?? "group", className: (0, import_classnames.default)("dsx-comment-thread__replies", className), children: [
+    visible,
+    remaining > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", variant: "ghost", onClick: () => {
+      setLocalExpanded(true);
+      onExpandedChange?.(true);
+    }, children: moreLabel?.(remaining) ?? `Show ${remaining} more replies` }) : null
+  ] }) });
 });
 Replies.displayName = "CommentThreadReplies";
-const Tombstone = React.forwardRef(({ children = "Comment removed", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref, className: (0, import_classnames.default)("dsx-comment-thread__tombstone", className), role: "status", "data-removed": "true", children }));
+const Tombstone = React.forwardRef(({ children, state = "removed", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref, className: (0, import_classnames.default)("dsx-comment-thread__tombstone", className), role: "status", "data-removed": "true", "data-state": state, children: children ?? `Comment ${state}` }));
 Tombstone.displayName = "CommentThreadTombstone";
-const Composer = React.forwardRef(({ value, onValueChange, onSubmit, maxLength = 2e3, submitting, locked, className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { ...props, ref, className: (0, import_classnames.default)("dsx-comment-thread__composer", className), "aria-busy": submitting || void 0, onSubmit: (event) => {
-  event.preventDefault();
-  if (!locked && !submitting && value.trim()) onSubmit?.();
-}, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { value, maxLength, disabled: locked || submitting, onChange: (event) => onValueChange(event.currentTarget.value), "aria-label": "Comment" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { "aria-live": "polite", children: [
-    value.length,
-    "/",
-    maxLength
-  ] }),
-  children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "submit", disabled: locked || submitting || !value.trim(), children: submitting ? "Submitting\u2026" : "Comment" })
-] }));
+const Composer = React.forwardRef(({ value, onValueChange, onSubmit, maxLength = 2e3, submitting, locked, label = "Comment", error, status, input, actions, className, children, ...props }, ref) => {
+  const id = React.useId();
+  const countId = `${id}-count`;
+  const errorId = `${id}-error`;
+  const statusId = `${id}-status`;
+  const invalid = Boolean(error) || value.length > maxLength;
+  const disabled = Boolean(locked || submitting);
+  const describedBy = [countId, error ? errorId : "", status ? statusId : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { ...props, ref, className: (0, import_classnames.default)("dsx-comment-thread__composer", className), "aria-busy": submitting || void 0, onSubmit: (event) => {
+    event.preventDefault();
+    if (!disabled && !invalid && value.trim()) onSubmit?.();
+  }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { id: `${id}-label`, htmlFor: id, children: label }),
+    input ? input({ id, value, onValueChange, maxLength, disabled, describedBy, invalid }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { id, value, maxLength, disabled, onChange: (event) => onValueChange(event.currentTarget.value), "aria-invalid": invalid || void 0, "aria-describedby": describedBy }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { id: countId, className: "dsx-comment-thread__count", "aria-live": "polite", children: [
+      value.length,
+      "/",
+      maxLength
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: errorId, role: "alert", children: error }) : null,
+    status ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: statusId, role: "status", children: status }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-comment-thread__actions", children: [
+      actions,
+      children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { className: "dsx-comment-thread__submit", type: "submit", size: "lg", disabled: disabled || invalid || !value.trim(), children: submitting ? "Submitting\u2026" : "Comment" })
+    ] })
+  ] });
+});
 Composer.displayName = "CommentThreadComposer";
 const Locked = React.forwardRef(({ children = "Comments are locked", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref, className: (0, import_classnames.default)("dsx-comment-thread__locked", className), role: "status", children }));
 Locked.displayName = "CommentThreadLocked";

package/dist/components/commentThread/CommentThread.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/commentThread/CommentThread.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport type { CommentProps, CommentThreadRootProps, ComposerProps } from './commentThread.props'\n\nconst Comment = React.forwardRef<HTMLElement, CommentProps>(({ author, avatarSrc, badge, dateTime, timeLabel, actions, className, children, ...props }, ref) => <article {...props} ref={ref} className={classNames('dsx-comment-thread__comment', className)}><div className=\"dsx-comment-thread__avatar\">{avatarSrc ? <img src={avatarSrc} alt=\"\" /> : author.split(/\\s+/).map((part) => part[0]).join('').slice(0, 2).toUpperCase()}</div><header><strong>{author}</strong>{badge}<time dateTime={dateTime}>{timeLabel}</time></header><div className=\"dsx-comment-thread__body\">{children}</div>{actions ? <div className=\"dsx-comment-thread__actions\">{actions}</div> : null}</article>)\nComment.displayName = 'CommentThreadComment'\nconst ReplyDepthContext = React.createContext(0)\nconst Replies = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, children, ...props }, ref) => {\n  const depth = React.useContext(ReplyDepthContext)\n  if (depth >= 1) throw new Error('CommentThread supports one reply level.')\n  return <ReplyDepthContext.Provider value={depth + 1}><div {...props} ref={ref} role={props.role ?? 'group'} className={classNames('dsx-comment-thread__replies', className)}>{children}</div></ReplyDepthContext.Provider>\n})\nReplies.displayName = 'CommentThreadReplies'\nconst Tombstone = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ children = 'Comment removed', className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread__tombstone', className)} role=\"status\" data-removed=\"true\">{children}</div>)\nTombstone.displayName = 'CommentThreadTombstone'\nconst Composer = React.forwardRef<HTMLFormElement, ComposerProps>(({ value, onValueChange, onSubmit, maxLength = 2000, submitting, locked, className, children, ...props }, ref) => <form {...props} ref={ref} className={classNames('dsx-comment-thread__composer', className)} aria-busy={submitting || undefined} onSubmit={(event) => { event.preventDefault(); if (!locked && !submitting && value.trim()) onSubmit?.() }}><textarea value={value} maxLength={maxLength} disabled={locked || submitting} onChange={(event) => onValueChange(event.currentTarget.value)} aria-label=\"Comment\"/><span aria-live=\"polite\">{value.length}/{maxLength}</span>{children ?? <button type=\"submit\" disabled={locked || submitting || !value.trim()}>{submitting ? 'Submitting\u2026' : 'Comment'}</button>}</form>)\nComposer.displayName = 'CommentThreadComposer'\nconst Locked = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ children = 'Comments are locked', className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread__locked', className)} role=\"status\">{children}</div>)\nLocked.displayName = 'CommentThreadLocked'\nconst Root = React.forwardRef<HTMLDivElement, CommentThreadRootProps>(({ className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread', className)} />)\nRoot.displayName = 'CommentThread'\nconst CommentThread = Object.assign(Root, { Root, Comment, Replies, Tombstone, Composer, Locked })\nexport { CommentThread, Comment, Composer, Locked, Replies, Root as CommentThreadRoot, Tombstone }\nexport type { CommentProps, CommentThreadRootProps, ComposerProps } from './commentThread.props'\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Button } from '../button/Button'\n\nimport type { CommentProps, CommentThreadRootProps, ComposerProps, RepliesProps, TombstoneProps } from './commentThread.props'\n\nconst Comment = React.forwardRef<HTMLElement, CommentProps>(({ author, avatarSrc, badge, dateTime, timeLabel, actions, metadata, className, children, ...props }, ref) => <article {...props} ref={ref} className={classNames('dsx-comment-thread__comment', className)}><div className=\"dsx-comment-thread__avatar\">{avatarSrc ? <img src={avatarSrc} alt=\"\" /> : author.split(/\\s+/).map((part) => part[0]).join('').slice(0, 2).toUpperCase()}</div><header><strong>{author}</strong>{badge}<time dateTime={dateTime}>{timeLabel}</time>{metadata}</header><div className=\"dsx-comment-thread__body\">{children}</div>{actions ? <div className=\"dsx-comment-thread__actions\">{actions}</div> : null}</article>)\nComment.displayName = 'CommentThreadComment'\nconst ReplyDepthContext = React.createContext(0)\nconst Replies = React.forwardRef<HTMLDivElement, RepliesProps>(({ className, children, limit, expanded: expandedProp, onExpandedChange, moreLabel, ...props }, ref) => {\n  const [localExpanded, setLocalExpanded] = React.useState(false)\n  const expanded = expandedProp ?? localExpanded\n  const all = React.Children.toArray(children)\n  const visible = limit == null || expanded ? all : all.slice(0, Math.max(0, limit))\n  const remaining = all.length - visible.length\n  const depth = React.useContext(ReplyDepthContext)\n  if (depth >= 1) throw new Error('CommentThread supports one reply level.')\n  return <ReplyDepthContext.Provider value={depth + 1}><div {...props} ref={ref} role={props.role ?? 'group'} className={classNames('dsx-comment-thread__replies', className)}>{visible}{remaining > 0 ? <Button type=\"button\" size=\"lg\" variant=\"ghost\" onClick={() => { setLocalExpanded(true); onExpandedChange?.(true) }}>{moreLabel?.(remaining) ?? `Show ${remaining} more replies`}</Button> : null}</div></ReplyDepthContext.Provider>\n})\nReplies.displayName = 'CommentThreadReplies'\nconst Tombstone = React.forwardRef<HTMLDivElement, TombstoneProps>(({ children, state = 'removed', className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread__tombstone', className)} role=\"status\" data-removed=\"true\" data-state={state}>{children ?? `Comment ${state}`}</div>)\nTombstone.displayName = 'CommentThreadTombstone'\nconst Composer = React.forwardRef<HTMLFormElement, ComposerProps>(({ value, onValueChange, onSubmit, maxLength = 2000, submitting, locked, label = 'Comment', error, status, input, actions, className, children, ...props }, ref) => {\n  const id = React.useId()\n  const countId = `${id}-count`\n  const errorId = `${id}-error`\n  const statusId = `${id}-status`\n  const invalid = Boolean(error) || value.length > maxLength\n  const disabled = Boolean(locked || submitting)\n  const describedBy = [countId, error ? errorId : '', status ? statusId : ''].filter(Boolean).join(' ')\n  return <form {...props} ref={ref} className={classNames('dsx-comment-thread__composer', className)} aria-busy={submitting || undefined} onSubmit={event => { event.preventDefault(); if (!disabled && !invalid && value.trim()) onSubmit?.() }}>\n    <label id={`${id}-label`} htmlFor={id}>{label}</label>\n    {input ? input({ id, value, onValueChange, maxLength, disabled, describedBy, invalid }) : <textarea id={id} value={value} maxLength={maxLength} disabled={disabled} onChange={event => onValueChange(event.currentTarget.value)} aria-invalid={invalid || undefined} aria-describedby={describedBy} />}\n    <span id={countId} className=\"dsx-comment-thread__count\" aria-live=\"polite\">{value.length}/{maxLength}</span>\n    {error ? <div id={errorId} role=\"alert\">{error}</div> : null}\n    {status ? <div id={statusId} role=\"status\">{status}</div> : null}\n    <div className=\"dsx-comment-thread__actions\">{actions}{children ?? <Button className=\"dsx-comment-thread__submit\" type=\"submit\" size=\"lg\" disabled={disabled || invalid || !value.trim()}>{submitting ? 'Submitting\u2026' : 'Comment'}</Button>}</div>\n  </form>\n})\nComposer.displayName = 'CommentThreadComposer'\nconst Locked = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ children = 'Comments are locked', className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread__locked', className)} role=\"status\">{children}</div>)\nLocked.displayName = 'CommentThreadLocked'\nconst Root = React.forwardRef<HTMLDivElement, CommentThreadRootProps>(({ className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread', className)} />)\nRoot.displayName = 'CommentThread'\nconst CommentThread = Object.assign(Root, { Root, Comment, Replies, Tombstone, Composer, Locked })\nexport { CommentThread, Comment, Composer, Locked, Replies, Root as CommentThreadRoot, Tombstone }\nexport type { CommentProps, CommentThreadRootProps, ComposerProps, ComposerInputContext, RepliesProps, TombstoneProps } from './commentThread.props'\n"],
+  "mappings": "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",
   "names": ["classNames"]
 }

package/dist/components/commentThread/CommentThread.d.cts

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import type { CommentProps, CommentThreadRootProps, ComposerProps } from './commentThread.props.cjs';
+import type { CommentProps, CommentThreadRootProps, ComposerProps, RepliesProps, TombstoneProps } from './commentThread.props.cjs';
 declare const Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLElement>>;
-declare const Replies: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const Tombstone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Replies: React.ForwardRefExoticComponent<RepliesProps & React.RefAttributes<HTMLDivElement>>;
+declare const Tombstone: React.ForwardRefExoticComponent<TombstoneProps & React.RefAttributes<HTMLDivElement>>;
 declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<HTMLFormElement>>;
 declare const Locked: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const Root: React.ForwardRefExoticComponent<CommentThreadRootProps & React.RefAttributes<HTMLDivElement>>;
 declare const CommentThread: React.ForwardRefExoticComponent<CommentThreadRootProps & React.RefAttributes<HTMLDivElement>> & {
     Root: React.ForwardRefExoticComponent<CommentThreadRootProps & React.RefAttributes<HTMLDivElement>>;
     Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLElement>>;
-    Replies: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    Tombstone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Replies: React.ForwardRefExoticComponent<RepliesProps & React.RefAttributes<HTMLDivElement>>;
+    Tombstone: React.ForwardRefExoticComponent<TombstoneProps & React.RefAttributes<HTMLDivElement>>;
     Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<HTMLFormElement>>;
     Locked: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 };
 export { CommentThread, Comment, Composer, Locked, Replies, Root as CommentThreadRoot, Tombstone };
-export type { CommentProps, CommentThreadRootProps, ComposerProps } from './commentThread.props.cjs';
+export type { CommentProps, CommentThreadRootProps, ComposerProps, ComposerInputContext, RepliesProps, TombstoneProps } from './commentThread.props.cjs';
 //# sourceMappingURL=CommentThread.d.cts.map