@d4gger/design-system 3.0.1 → 4.0.1

package/dist/components/bottomDock/bottomDock.props.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottomDock.props.d.cts","sourceRoot":"","sources":["../../../src/components/bottomDock/bottomDock.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,oBAAoB,iCAAkC,CAAA;AAC5D,QAAA,MAAM,oBAAoB,uCAAwC,CAAA;AAElE,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;CAgBvB,CAAA;AAED,QAAA,MAAM,sBAAsB;;;;;;;;CAQ3B,CAAA;AAED,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/bottomDock/bottomDock.props.d.mts

@@ -0,0 +1,29 @@
+declare const bottomDockPlacements: readonly ["fixed", "contained"];
+declare const bottomDockLabelModes: readonly ["active", "always", "none"];
+declare const bottomDockPropDefs: {
+    placement: {
+        type: "enum";
+        values: readonly ["fixed", "contained"];
+        default: "fixed";
+    };
+    labels: {
+        type: "enum";
+        values: readonly ["active", "always", "none"];
+        default: "active";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+};
+declare const bottomDockItemPropDefs: {
+    isActive: {
+        type: "boolean";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+};
+export { bottomDockItemPropDefs, bottomDockLabelModes, bottomDockPlacements, bottomDockPropDefs };
+//# sourceMappingURL=bottomDock.props.d.mts.map

package/dist/components/bottomDock/bottomDock.props.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottomDock.props.d.mts","sourceRoot":"","sources":["../../../src/components/bottomDock/bottomDock.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,oBAAoB,iCAAkC,CAAA;AAC5D,QAAA,MAAM,oBAAoB,uCAAwC,CAAA;AAElE,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;CAgBvB,CAAA;AAED,QAAA,MAAM,sBAAsB;;;;;;;;CAQ3B,CAAA;AAED,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/bottomDock/bottomDock.props.d.ts

@@ -0,0 +1,29 @@
+declare const bottomDockPlacements: readonly ["fixed", "contained"];
+declare const bottomDockLabelModes: readonly ["active", "always", "none"];
+declare const bottomDockPropDefs: {
+    placement: {
+        type: "enum";
+        values: readonly ["fixed", "contained"];
+        default: "fixed";
+    };
+    labels: {
+        type: "enum";
+        values: readonly ["active", "always", "none"];
+        default: "active";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+};
+declare const bottomDockItemPropDefs: {
+    isActive: {
+        type: "boolean";
+    };
+    asChild: {
+        type: "boolean";
+        default: false;
+    };
+};
+export { bottomDockItemPropDefs, bottomDockLabelModes, bottomDockPlacements, bottomDockPropDefs };
+//# sourceMappingURL=bottomDock.props.d.ts.map

package/dist/components/bottomDock/bottomDock.props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottomDock.props.d.ts","sourceRoot":"","sources":["../../../src/components/bottomDock/bottomDock.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,oBAAoB,iCAAkC,CAAA;AAC5D,QAAA,MAAM,oBAAoB,uCAAwC,CAAA;AAElE,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;CAgBvB,CAAA;AAED,QAAA,MAAM,sBAAsB;;;;;;;;CAQ3B,CAAA;AAED,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/bottomDock/bottomDock.props.js

@@ -0,0 +1,29 @@
+import { asChildPropDef } from "../../_internal/props/asChild.prop.js";
+const bottomDockPlacements = ["fixed", "contained"];
+const bottomDockLabelModes = ["active", "always", "none"];
+const bottomDockPropDefs = {
+  ...asChildPropDef,
+  placement: {
+    type: "enum",
+    values: bottomDockPlacements,
+    default: "fixed"
+  },
+  labels: {
+    type: "enum",
+    values: bottomDockLabelModes,
+    default: "active"
+  }
+};
+const bottomDockItemPropDefs = {
+  ...asChildPropDef,
+  isActive: {
+    type: "boolean"
+  }
+};
+export {
+  bottomDockItemPropDefs,
+  bottomDockLabelModes,
+  bottomDockPlacements,
+  bottomDockPropDefs
+};
+//# sourceMappingURL=bottomDock.props.js.map

package/dist/components/bottomDock/bottomDock.props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/bottomDock/bottomDock.props.ts"],
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst bottomDockPlacements = ['fixed', 'contained'] as const\nconst bottomDockLabelModes = ['active', 'always', 'none'] as const\n\nconst bottomDockPropDefs = {\n  ...asChildPropDef,\n  placement: {\n    type: 'enum',\n    values: bottomDockPlacements,\n    default: 'fixed',\n  },\n  labels: {\n    type: 'enum',\n    values: bottomDockLabelModes,\n    default: 'active',\n  },\n} satisfies {\n  asChild: PropDef\n  placement: PropDef<(typeof bottomDockPlacements)[number]>\n  labels: PropDef<(typeof bottomDockLabelModes)[number]>\n}\n\nconst bottomDockItemPropDefs = {\n  ...asChildPropDef,\n  isActive: {\n    type: 'boolean',\n  },\n} satisfies {\n  asChild: PropDef\n  isActive: PropDef\n}\n\nexport { bottomDockItemPropDefs, bottomDockLabelModes, bottomDockPlacements, bottomDockPropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,uBAAuB,CAAC,SAAS,WAAW;AAClD,MAAM,uBAAuB,CAAC,UAAU,UAAU,MAAM;AAExD,MAAM,qBAAqB;AAAA,EACzB,GAAG;AAAA,EACH,WAAW;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAMA,MAAM,yBAAyB;AAAA,EAC7B,GAAG;AAAA,EACH,UAAU;AAAA,IACR,MAAM;AAAA,EACR;AACF;",
+  "names": []
+}

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

@@ -27,8 +27,8 @@
 .dsx-card.dsx-card--outline {
   background: transparent;
   box-shadow: none;
-  backdrop-filter: var(--dsx-effect-panel-solid-backdrop-filter);
   -webkit-backdrop-filter: var(--dsx-effect-panel-solid-backdrop-filter);
+  backdrop-filter: var(--dsx-effect-panel-solid-backdrop-filter);
 }
 
 .dsx-card__header {
@@ -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,7 +66,11 @@ const COLLAPSIBLE_MOTION_STYLES = `
 
   to {
     height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
     opacity: 0;
+    /* Held by the fill after the animation: a collapsed force-mounted panel leaves the tab order. */
+    visibility: hidden;
   }
 }
 
@@ -77,6 +83,14 @@ const COLLAPSIBLE_MOTION_STYLES = `
   overflow: hidden;
 }
 
+/* The closed state above is only the end frame of the collapse animation. A force-mounted panel that first mounts closed never
+   plays it (Radix suppresses the mount animation by writing animation-name: none on the element), so it would rest at full
+   height. Hide it at rest. After any toggle Radix puts the animation back and the panel animates out as usual. :where() keeps
+   the rule at 0,2,0. */
+.dsx-collapsible__content[data-state='closed']:where([style*='animation-name: none']) {
+  display: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .dsx-collapsible__content[data-state='open'],
   .dsx-collapsible__content[data-state='closed'] {

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    /* Held by the fill after the animation: a collapsed force-mounted panel leaves the tab order. */\n    visibility: hidden;\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/* The closed state above is only the end frame of the collapse animation. A force-mounted panel that first mounts closed never\n   plays it (Radix suppresses the mount animation by writing animation-name: none on the element), so it would rest at full\n   height. Hide it at rest. After any toggle Radix puts the animation back and the panel animates out as usual. :where() keeps\n   the rule at 0,2,0. */\n.dsx-collapsible__content[data-state='closed']:where([style*='animation-name: none']) {\n  display: none;\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;AAoGpF;AAhGR,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6DlC,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;AAmFpE,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;AAmFpE,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;AAmFpE,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,7 +30,11 @@ const COLLAPSIBLE_MOTION_STYLES = `
 
   to {
     height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
     opacity: 0;
+    /* Held by the fill after the animation: a collapsed force-mounted panel leaves the tab order. */
+    visibility: hidden;
   }
 }
 
@@ -41,6 +47,14 @@ const COLLAPSIBLE_MOTION_STYLES = `
   overflow: hidden;
 }
 
+/* The closed state above is only the end frame of the collapse animation. A force-mounted panel that first mounts closed never
+   plays it (Radix suppresses the mount animation by writing animation-name: none on the element), so it would rest at full
+   height. Hide it at rest. After any toggle Radix puts the animation back and the panel animates out as usual. :where() keeps
+   the rule at 0,2,0. */
+.dsx-collapsible__content[data-state='closed']:where([style*='animation-name: none']) {
+  display: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .dsx-collapsible__content[data-state='open'],
   .dsx-collapsible__content[data-state='closed'] {

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    /* Held by the fill after the animation: a collapsed force-mounted panel leaves the tab order. */\n    visibility: hidden;\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/* The closed state above is only the end frame of the collapse animation. A force-mounted panel that first mounts closed never\n   plays it (Radix suppresses the mount animation by writing animation-name: none on the element), so it would rest at full\n   height. Hide it at rest. After any toggle Radix puts the animation back and the panel animates out as usual. :where() keeps\n   the rule at 0,2,0. */\n.dsx-collapsible__content[data-state='closed']:where([style*='animation-name: none']) {\n  display: none;\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;AAoGpF,cAcA,YAdA;AAhGR,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6DlC,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; }