@d4gger/design-system 3.0.0 → 4.0.0

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

@@ -1,5 +1,12 @@
 declare const sidebarEffects: readonly ["none", "ambient"];
+declare const sidebarVariants: readonly ["default", "floating"];
+type SidebarVariant = (typeof sidebarVariants)[number];
 declare const sidebarProviderPropDefs: {
+    variant: {
+        type: "enum";
+        values: readonly ["default", "floating"];
+        default: "default";
+    };
     defaultExpanded: {
         type: "boolean";
         className: string;
@@ -71,5 +78,6 @@ declare const sidebarMenuSkeletonPropDefs: {
         className: string;
     };
 };
-export { sidebarEffects, sidebarInsetPropDefs, sidebarMenuActionPropDefs, sidebarMenuButtonPropDefs, sidebarMenuSkeletonPropDefs, sidebarMenuSubTriggerPropDefs, sidebarPropDefs, sidebarProviderPropDefs, };
+export { sidebarEffects, sidebarInsetPropDefs, sidebarMenuActionPropDefs, sidebarMenuButtonPropDefs, sidebarMenuSkeletonPropDefs, sidebarMenuSubTriggerPropDefs, sidebarPropDefs, sidebarProviderPropDefs, sidebarVariants, };
+export type { SidebarVariant };
 //# sourceMappingURL=sidebar.props.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.props.d.mts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc,8BAA+B,CAAA;AAEnD,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;CA4B5B,CAAA;AAED,QAAA,MAAM,eAAe;;;;;;;;;;CAapB,CAAA;AAED,QAAA,MAAM,oBAAoB;;;;;CAIzB,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;;;;;CAS9B,CAAA;AAED,QAAA,MAAM,6BAA6B;;;;;;;;;CASlC,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;CAI9B,CAAA;AAED,QAAA,MAAM,2BAA2B;;;;;CAOhC,CAAA;AAED,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EACzB,2BAA2B,EAC3B,6BAA6B,EAC7B,eAAe,EACf,uBAAuB,GACxB,CAAA"}
+{"version":3,"file":"sidebar.props.d.mts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc,8BAA+B,CAAA;AACnD,QAAA,MAAM,eAAe,kCAAmC,CAAA;AAExD,KAAK,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC5B,CAAA;AAED,QAAA,MAAM,eAAe;;;;;;;;;;CAapB,CAAA;AAED,QAAA,MAAM,oBAAoB;;;;;CAIzB,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;;;;;CAS9B,CAAA;AAED,QAAA,MAAM,6BAA6B;;;;;;;;;CASlC,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;CAI9B,CAAA;AAED,QAAA,MAAM,2BAA2B;;;;;CAOhC,CAAA;AAED,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EACzB,2BAA2B,EAC3B,6BAA6B,EAC7B,eAAe,EACf,uBAAuB,EACvB,eAAe,GAChB,CAAA;AACD,YAAY,EAAE,cAAc,EAAE,CAAA"}

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

@@ -1,5 +1,12 @@
 declare const sidebarEffects: readonly ["none", "ambient"];
+declare const sidebarVariants: readonly ["default", "floating"];
+type SidebarVariant = (typeof sidebarVariants)[number];
 declare const sidebarProviderPropDefs: {
+    variant: {
+        type: "enum";
+        values: readonly ["default", "floating"];
+        default: "default";
+    };
     defaultExpanded: {
         type: "boolean";
         className: string;
@@ -71,5 +78,6 @@ declare const sidebarMenuSkeletonPropDefs: {
         className: string;
     };
 };
-export { sidebarEffects, sidebarInsetPropDefs, sidebarMenuActionPropDefs, sidebarMenuButtonPropDefs, sidebarMenuSkeletonPropDefs, sidebarMenuSubTriggerPropDefs, sidebarPropDefs, sidebarProviderPropDefs, };
+export { sidebarEffects, sidebarInsetPropDefs, sidebarMenuActionPropDefs, sidebarMenuButtonPropDefs, sidebarMenuSkeletonPropDefs, sidebarMenuSubTriggerPropDefs, sidebarPropDefs, sidebarProviderPropDefs, sidebarVariants, };
+export type { SidebarVariant };
 //# sourceMappingURL=sidebar.props.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.props.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc,8BAA+B,CAAA;AAEnD,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;CA4B5B,CAAA;AAED,QAAA,MAAM,eAAe;;;;;;;;;;CAapB,CAAA;AAED,QAAA,MAAM,oBAAoB;;;;;CAIzB,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;;;;;CAS9B,CAAA;AAED,QAAA,MAAM,6BAA6B;;;;;;;;;CASlC,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;CAI9B,CAAA;AAED,QAAA,MAAM,2BAA2B;;;;;CAOhC,CAAA;AAED,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EACzB,2BAA2B,EAC3B,6BAA6B,EAC7B,eAAe,EACf,uBAAuB,GACxB,CAAA"}
+{"version":3,"file":"sidebar.props.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc,8BAA+B,CAAA;AACnD,QAAA,MAAM,eAAe,kCAAmC,CAAA;AAExD,KAAK,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC5B,CAAA;AAED,QAAA,MAAM,eAAe;;;;;;;;;;CAapB,CAAA;AAED,QAAA,MAAM,oBAAoB;;;;;CAIzB,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;;;;;CAS9B,CAAA;AAED,QAAA,MAAM,6BAA6B;;;;;;;;;CASlC,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;CAI9B,CAAA;AAED,QAAA,MAAM,2BAA2B;;;;;CAOhC,CAAA;AAED,OAAO,EACL,cAAc,EACd,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EACzB,2BAA2B,EAC3B,6BAA6B,EAC7B,eAAe,EACf,uBAAuB,EACvB,eAAe,GAChB,CAAA;AACD,YAAY,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/sidebar/sidebar.props.js

@@ -1,6 +1,12 @@
 import { asChildPropDef } from "../../_internal/props/asChild.prop.js";
 const sidebarEffects = ["none", "ambient"];
+const sidebarVariants = ["default", "floating"];
 const sidebarProviderPropDefs = {
+  variant: {
+    type: "enum",
+    values: sidebarVariants,
+    default: "default"
+  },
   defaultExpanded: {
     type: "boolean",
     className: "dsx-sidebar-provider-default-expanded"
@@ -68,6 +74,7 @@ export {
   sidebarMenuSkeletonPropDefs,
   sidebarMenuSubTriggerPropDefs,
   sidebarPropDefs,
-  sidebarProviderPropDefs
+  sidebarProviderPropDefs,
+  sidebarVariants
 };
 //# sourceMappingURL=sidebar.props.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/sidebar/sidebar.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst sidebarEffects = ['none', 'ambient'] as const\n\nconst sidebarProviderPropDefs = {\n  defaultExpanded: {\n    type: 'boolean',\n    className: 'dsx-sidebar-provider-default-expanded',\n  },\n  hoverExpand: {\n    type: 'boolean',\n    className: 'dsx-sidebar-provider-hover-expand',\n  },\n  previewOpen: {\n    type: 'boolean',\n    className: 'dsx-sidebar-provider-preview-open',\n  },\n  defaultSubmenuMode: {\n    type: 'enum',\n    values: ['click', 'hover'],\n    default: 'click',\n  },\n  submenuOpenOnActive: {\n    type: 'boolean',\n    default: true,\n  },\n} satisfies {\n  defaultExpanded: PropDef\n  hoverExpand: PropDef\n  previewOpen: PropDef\n  defaultSubmenuMode: PropDef<'click' | 'hover'>\n  submenuOpenOnActive: PropDef\n}\n\nconst sidebarPropDefs = {\n  defaultExpanded: {\n    type: 'boolean',\n    className: 'dsx-sidebar-default-expanded',\n  },\n  effect: {\n    type: 'enum',\n    values: sidebarEffects,\n    default: 'none',\n  },\n} satisfies {\n  defaultExpanded: PropDef\n  effect: PropDef<(typeof sidebarEffects)[number]>\n}\n\nconst sidebarInsetPropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nconst sidebarMenuButtonPropDefs = {\n  ...asChildPropDef,\n  isActive: {\n    type: 'boolean',\n    className: 'dsx-sidebar-menu-button-active',\n  },\n} satisfies {\n  asChild: PropDef\n  isActive: PropDef\n}\n\nconst sidebarMenuSubTriggerPropDefs = {\n  ...asChildPropDef,\n  isActive: {\n    type: 'boolean',\n    className: 'dsx-sidebar-menu-button-active',\n  },\n} satisfies {\n  asChild: PropDef\n  isActive: PropDef\n}\n\nconst sidebarMenuActionPropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nconst sidebarMenuSkeletonPropDefs = {\n  showIcon: {\n    type: 'boolean',\n    className: 'dsx-sidebar-menu-skeleton-icon',\n  },\n} satisfies {\n  showIcon: PropDef\n}\n\nexport {\n  sidebarEffects,\n  sidebarInsetPropDefs,\n  sidebarMenuActionPropDefs,\n  sidebarMenuButtonPropDefs,\n  sidebarMenuSkeletonPropDefs,\n  sidebarMenuSubTriggerPropDefs,\n  sidebarPropDefs,\n  sidebarProviderPropDefs,\n}\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,iBAAiB,CAAC,QAAQ,SAAS;AAEzC,MAAM,0BAA0B;AAAA,EAC9B,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,oBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,QAAQ,CAAC,SAAS,OAAO;AAAA,IACzB,SAAS;AAAA,EACX;AAAA,EACA,qBAAqB;AAAA,IACnB,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;AAQA,MAAM,kBAAkB;AAAA,EACtB,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAKA,MAAM,uBAAuB;AAAA,EAC3B,GAAG;AACL;AAIA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AACF;AAKA,MAAM,gCAAgC;AAAA,EACpC,GAAG;AAAA,EACH,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AACF;AAKA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;AAIA,MAAM,8BAA8B;AAAA,EAClC,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AACF;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst sidebarEffects = ['none', 'ambient'] as const\nconst sidebarVariants = ['default', 'floating'] as const\n\ntype SidebarVariant = (typeof sidebarVariants)[number]\n\nconst sidebarProviderPropDefs = {\n  variant: {\n    type: 'enum',\n    values: sidebarVariants,\n    default: 'default',\n  },\n  defaultExpanded: {\n    type: 'boolean',\n    className: 'dsx-sidebar-provider-default-expanded',\n  },\n  hoverExpand: {\n    type: 'boolean',\n    className: 'dsx-sidebar-provider-hover-expand',\n  },\n  previewOpen: {\n    type: 'boolean',\n    className: 'dsx-sidebar-provider-preview-open',\n  },\n  defaultSubmenuMode: {\n    type: 'enum',\n    values: ['click', 'hover'],\n    default: 'click',\n  },\n  submenuOpenOnActive: {\n    type: 'boolean',\n    default: true,\n  },\n} satisfies {\n  variant: PropDef<SidebarVariant>\n  defaultExpanded: PropDef\n  hoverExpand: PropDef\n  previewOpen: PropDef\n  defaultSubmenuMode: PropDef<'click' | 'hover'>\n  submenuOpenOnActive: PropDef\n}\n\nconst sidebarPropDefs = {\n  defaultExpanded: {\n    type: 'boolean',\n    className: 'dsx-sidebar-default-expanded',\n  },\n  effect: {\n    type: 'enum',\n    values: sidebarEffects,\n    default: 'none',\n  },\n} satisfies {\n  defaultExpanded: PropDef\n  effect: PropDef<(typeof sidebarEffects)[number]>\n}\n\nconst sidebarInsetPropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nconst sidebarMenuButtonPropDefs = {\n  ...asChildPropDef,\n  isActive: {\n    type: 'boolean',\n    className: 'dsx-sidebar-menu-button-active',\n  },\n} satisfies {\n  asChild: PropDef\n  isActive: PropDef\n}\n\nconst sidebarMenuSubTriggerPropDefs = {\n  ...asChildPropDef,\n  isActive: {\n    type: 'boolean',\n    className: 'dsx-sidebar-menu-button-active',\n  },\n} satisfies {\n  asChild: PropDef\n  isActive: PropDef\n}\n\nconst sidebarMenuActionPropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nconst sidebarMenuSkeletonPropDefs = {\n  showIcon: {\n    type: 'boolean',\n    className: 'dsx-sidebar-menu-skeleton-icon',\n  },\n} satisfies {\n  showIcon: PropDef\n}\n\nexport {\n  sidebarEffects,\n  sidebarInsetPropDefs,\n  sidebarMenuActionPropDefs,\n  sidebarMenuButtonPropDefs,\n  sidebarMenuSkeletonPropDefs,\n  sidebarMenuSubTriggerPropDefs,\n  sidebarPropDefs,\n  sidebarProviderPropDefs,\n  sidebarVariants,\n}\nexport type { SidebarVariant }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,iBAAiB,CAAC,QAAQ,SAAS;AACzC,MAAM,kBAAkB,CAAC,WAAW,UAAU;AAI9C,MAAM,0BAA0B;AAAA,EAC9B,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,oBAAoB;AAAA,IAClB,MAAM;AAAA,IACN,QAAQ,CAAC,SAAS,OAAO;AAAA,IACzB,SAAS;AAAA,EACX;AAAA,EACA,qBAAqB;AAAA,IACnB,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;AASA,MAAM,kBAAkB;AAAA,EACtB,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAKA,MAAM,uBAAuB;AAAA,EAC3B,GAAG;AACL;AAIA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AACF;AAKA,MAAM,gCAAgC;AAAA,EACpC,GAAG;AAAA,EACH,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AACF;AAKA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;AAIA,MAAM,8BAA8B;AAAA,EAClC,UAAU;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AACF;",
   "names": []
 }

package/dist/components/sidebar.css

@@ -142,6 +142,33 @@
   pointer-events: none;
 }
 
+/* variant="floating" — the panel is a glass surface set off from the viewport edge, with the page
+   beside it. The gap is the provider's own padding and flex gap, never a sidebar margin: the
+   hover-preview and pin-docking rules above animate margin-inline-end and width, and a margin here
+   would fight them. The panel reuses the glass surface tokens the other floating panels use. Source
+   order matters below: these tie the ambient rule at (0,2,0) and must come after it so the glass
+   background wins while the ambient gradient still paints over it. The mobile drawer never carries
+   this variant (it reads `default` there), so no mobile query is needed. */
+.dsx-sidebar-provider:where([data-variant='floating']) {
+  gap: var(--dsx-space-3);
+  padding: var(--dsx-space-3);
+}
+
+.dsx-sidebar[data-variant='floating'] {
+  top: var(--dsx-space-3);
+  height: calc(100dvh - var(--dsx-space-3) - var(--dsx-space-3));
+  border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
+  border-radius: var(--dsx-rounded-xl);
+  background-color: var(--dsx-color-panel-translucent);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+  box-shadow: var(--dsx-panel-shadow);
+}
+
+/* A hidden offcanvas panel is `width: 0`; its border would still leave a sliver. */
+.dsx-sidebar[data-variant='floating']:where([data-collapsible='offcanvas'][data-state='collapsed']) {
+  border-width: 0;
+}
+
 .dsx-sidebar__recovery-rail {
   display: inline-flex;
   align-items: center;
@@ -595,6 +622,7 @@
   justify-content: flex-start;
   align-items: center;
   gap: var(--dsx-space-sm);
+  border-radius: var(--dsx-rounded-sm);
 }
 
 .dsx-sidebar__menu-sub-trigger:hover {

package/dist/components/sonner.css

@@ -20,16 +20,15 @@
 }
 
 .dsx-sonner__toast {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-start;
-  column-gap: var(--dsx-space-md);
-  padding: var(--dsx-space-sm) var(--dsx-space-md);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--dsx-space-sm);
+  padding: var(--dsx-space-md);
   background-color: var(--dsx-color-surface);
   border-radius: var(--dsx-rounded-md);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
-  box-shadow: var(--dsx-shadow-elevation-2);
+  box-shadow: var(--dsx-shadow-elevation-5); /* Spotlight (B4 Q3): below dialogs, above all menus */
 }
 
 [data-sonner-toast][data-type='success'],
@@ -58,7 +57,7 @@
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
   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);
+  line-height: var(--dsx-size-md);
   letter-spacing: var(--dsx-typography-label-large-letter-spacing);
   color: var(--dsx-color-on-surface);
   margin: 0;
@@ -83,6 +82,9 @@
   color: var(--dsx-color-on-surface-variant);
   padding: var(--dsx-space-xs);
   border-radius: var(--dsx-rounded-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dsx-sonner__action:hover,
@@ -101,13 +103,73 @@
   color: var(--dsx-color-on-error-container);
 }
 
-@media (max-width: 640px) {
-  [data-sonner-toaster] {
-    width: calc(100vw - var(--dsx-size-md));
-    max-width: calc(100vw - var(--dsx-size-md));
-    right: var(--dsx-space-3);
-    left: var(--dsx-space-3);
-    bottom: var(--dsx-space-3);
-    padding: var(--dsx-space-sm);
-  }
+.dsx-sonner[data-sonner-toaster] {
+  max-width: calc(100vw - var(--dsx-dialog-viewport-gap));
+}
+
+.dsx-sonner__action,
+.dsx-sonner__cancel,
+.dsx-sonner__close {
+  min-width: var(--dsx-size-md);
+  min-height: var(--dsx-size-md);
+  flex-shrink: 0;
+}
+
+.dsx-sonner__action,
+.dsx-sonner__cancel {
+  white-space: nowrap;
+  grid-row: 2;
+  align-self: start;
+  justify-self: start;
+  padding: var(--dsx-space-xs) var(--dsx-space-sm);
+  min-height: var(--dsx-size-lg);
+  border: var(--dsx-border-width-sm) solid currentColor;
+  font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-medium-font-size);
+  font-weight: var(--dsx-typography-label-medium-font-weight);
+  line-height: var(--dsx-typography-label-medium-line-height);
+}
+
+.dsx-sonner__action { grid-column: 2; }
+.dsx-sonner__cancel { grid-column: 3; }
+
+.dsx-sonner__close {
+  grid-column: 3;
+  grid-row: 1;
+  justify-self: end;
+  width: var(--dsx-size-md);
+  height: var(--dsx-size-md);
+  padding: 0;
+}
+
+.dsx-sonner__close svg { width: var(--dsx-size-sm); height: var(--dsx-size-sm); }
+
+.dsx-sonner__toast [data-icon] {
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dsx-size-md);
+  height: var(--dsx-size-md);
+}
+
+.dsx-sonner__toast [data-content] {
+  min-width: 0;
+  grid-column: 2;
+  grid-row: 1;
+  overflow-wrap: anywhere;
+}
+
+.dsx-sonner__toast:where(:not(:has([data-icon]))) { grid-template-columns: minmax(0, 1fr) auto; }
+.dsx-sonner__toast:where(:not(:has([data-icon]))) [data-content],
+.dsx-sonner__toast:where(:not(:has([data-icon]))) .dsx-sonner__action { grid-column: 1; }
+.dsx-sonner__toast:where(:not(:has([data-icon]))) .dsx-sonner__close,
+.dsx-sonner__toast:where(:not(:has([data-icon]))) .dsx-sonner__cancel { grid-column: 2; }
+
+.dsx-sonner__action:focus-visible,
+.dsx-sonner__cancel:focus-visible,
+.dsx-sonner__close:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
 }

package/dist/components/sortableList/SortableList.cjs

@@ -62,6 +62,12 @@ SortableListHandle.displayName = "SortableListHandle";
 const SortableListOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref, className: (0, import_classnames.default)("dsx-sortable-list__overlay", className) }));
 SortableListOverlay.displayName = "SortableListOverlay";
 const SortableListRoot = React.forwardRef(({ ids, disabledIds = [], onReorder, announcements, className, children, ...props }, ref) => {
+  const rootRef = React.useRef(null);
+  const mergedRootRef = React.useCallback((node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
   const [activeId, setActiveId] = React.useState(null);
   const [message, setMessage] = React.useState("");
   const sensors = (0, import_core.useSensors)((0, import_core.useSensor)(import_core.PointerSensor), (0, import_core.useSensor)(import_core.TouchSensor), (0, import_core.useSensor)(import_core.KeyboardSensor, { coordinateGetter: import_sortable.sortableKeyboardCoordinates }));
@@ -80,10 +86,10 @@ const SortableListRoot = React.forwardRef(({ ids, disabledIds = [], onReorder, a
     setMessage(announcements?.moved?.(event.active.id, from, to) ?? `Moved item ${String(event.active.id)} from position ${from + 1} to ${to + 1}`);
     onReorder?.({ ids: next, activeIndex: from, overIndex: to });
     const escapedId = globalThis.CSS?.escape?.(String(event.active.id)) ?? String(event.active.id).replace(/["\\]/g, "\\$&");
-    requestAnimationFrame(() => document.querySelector(`[data-sortable-id="${escapedId}"] button`)?.focus());
+    requestAnimationFrame(() => rootRef.current?.querySelector(`[data-sortable-id="${escapedId}"] .dsx-sortable-list__handle`)?.focus());
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.DndContext, { sensors, collisionDetection: import_core.closestCenter, onDragStart: handleStart, onDragCancel: () => setActiveId(null), onDragEnd: handleEnd, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { items: ids, strategy: import_sortable.verticalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref, className: (0, import_classnames.default)("dsx-sortable-list", className), role: props.role ?? "list", children: React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, { "data-sortable-id": String(child.props.id), disabled: child.props.disabled || disabledIds.includes(child.props.id), role: child.props.role ?? "listitem" }) : child) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { items: ids, strategy: import_sortable.verticalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref: mergedRootRef, className: (0, import_classnames.default)("dsx-sortable-list", className), role: props.role ?? "list", children: React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, { "data-sortable-id": String(child.props.id), disabled: child.props.disabled || disabledIds.includes(child.props.id), role: child.props.role ?? "listitem" }) : child) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VisuallyHidden.VisuallyHidden, { "aria-live": "assertive", children: message }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.DragOverlay, { children: activeId == null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableListOverlay, { children: activeContent }) })
   ] });

package/dist/components/sortableList/SortableList.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/sortableList/SortableList.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { DndContext, DragOverlay, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core'\nimport { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'\nimport { CSS as TransformCSS } from '@dnd-kit/utilities'\n\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\n\nimport type {\n  SortableId,\n  SortableListItemProps,\n  SortableListRootProps,\n} from './sortableList.props'\n\nconst SortableContextValue = React.createContext<{ attributes?: ReturnType<typeof useSortable>['attributes']; listeners?: ReturnType<typeof useSortable>['listeners'] }>({})\nconst SortableListItem = React.forwardRef<HTMLDivElement, SortableListItemProps>(({ id, disabled, className, style, children, ...props }, ref) => {\n  const sortable = useSortable({ id, disabled })\n  const mergedRef = (node: HTMLDivElement | null) => { sortable.setNodeRef(node); if (typeof ref === 'function') ref(node); else if (ref) ref.current = node }\n  return <SortableContextValue.Provider value={{ attributes: sortable.attributes, listeners: sortable.listeners }}><div {...props} ref={mergedRef} className={classNames('dsx-sortable-list__item', className)} data-disabled={disabled || undefined} data-dragging={sortable.isDragging || undefined} style={{ ...style, transform: TransformCSS.Transform.toString(sortable.transform), transition: sortable.transition }}>{children}</div></SortableContextValue.Provider>\n})\nSortableListItem.displayName = 'SortableListItem'\n\nconst SortableListHandle = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(({ className, children = '\u22EE\u22EE', ...props }, ref) => {\n  const context = React.useContext(SortableContextValue)\n  return <button {...props} {...context.attributes} {...context.listeners} ref={ref} type=\"button\" className={classNames('dsx-sortable-list__handle', className)} aria-label={props['aria-label'] ?? 'Reorder item'}>{children}</button>\n})\nSortableListHandle.displayName = 'SortableListHandle'\nconst SortableListOverlay = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-sortable-list__overlay', className)} />)\nSortableListOverlay.displayName = 'SortableListOverlay'\n\nconst SortableListRoot = React.forwardRef<HTMLDivElement, SortableListRootProps>(({ ids, disabledIds = [], onReorder, announcements, className, children, ...props }, ref) => {\n  const [activeId, setActiveId] = React.useState<SortableId | null>(null)\n  const [message, setMessage] = React.useState('')\n  const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }))\n  const handleStart = (event: DragStartEvent) => setActiveId(event.active.id)\n  const activeChild = React.Children.toArray(children).find(\n    (child) => React.isValidElement(child) && (child.props as SortableListItemProps).id === activeId,\n  )\n  const activeContent = React.isValidElement<{ children?: React.ReactNode }>(activeChild)\n    ? activeChild.props.children\n    : activeId == null ? null : String(activeId)\n  const handleEnd = (event: DragEndEvent) => {\n    setActiveId(null)\n    if (!event.over || event.active.id === event.over.id) return\n    const from = ids.indexOf(event.active.id); const to = ids.indexOf(event.over.id)\n    if (from < 0 || to < 0 || disabledIds.includes(event.active.id) || disabledIds.includes(event.over.id)) return\n    const next = arrayMove(ids, from, to)\n    setMessage(announcements?.moved?.(event.active.id, from, to) ?? `Moved item ${String(event.active.id)} from position ${from + 1} to ${to + 1}`)\n    onReorder?.({ ids: next, activeIndex: from, overIndex: to })\n    const escapedId = globalThis.CSS?.escape?.(String(event.active.id)) ?? String(event.active.id).replace(/[\"\\\\]/g, '\\\\$&')\n    requestAnimationFrame(() => document.querySelector<HTMLElement>(`[data-sortable-id=\"${escapedId}\"] button`)?.focus())\n  }\n  return <DndContext sensors={sensors} collisionDetection={closestCenter} onDragStart={handleStart} onDragCancel={() => setActiveId(null)} onDragEnd={handleEnd}><SortableContext items={ids} strategy={verticalListSortingStrategy}><div {...props} ref={ref} className={classNames('dsx-sortable-list', className)} role={props.role ?? 'list'}>{React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child as React.ReactElement<Record<string, unknown>>, { 'data-sortable-id': String((child.props as SortableListItemProps).id), disabled: (child.props as SortableListItemProps).disabled || disabledIds.includes((child.props as SortableListItemProps).id), role: (child.props as SortableListItemProps).role ?? 'listitem' }) : child)}</div></SortableContext><VisuallyHidden aria-live=\"assertive\">{message}</VisuallyHidden><DragOverlay>{activeId == null ? null : <SortableListOverlay>{activeContent}</SortableListOverlay>}</DragOverlay></DndContext>\n})\nSortableListRoot.displayName = 'SortableList'\n\nconst SortableList = Object.assign(SortableListRoot, { Root: SortableListRoot, Item: SortableListItem, Handle: SortableListHandle, Overlay: SortableListOverlay })\nexport { SortableList, SortableListHandle, SortableListItem, SortableListOverlay, SortableListRoot }\nexport type {\n  SortableId,\n  SortableListChange,\n  SortableListItemProps,\n  SortableListRootProps,\n} from './sortableList.props'\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { DndContext, DragOverlay, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core'\nimport { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'\nimport { CSS as TransformCSS } from '@dnd-kit/utilities'\n\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\n\nimport type {\n  SortableId,\n  SortableListItemProps,\n  SortableListRootProps,\n} from './sortableList.props'\n\nconst SortableContextValue = React.createContext<{ attributes?: ReturnType<typeof useSortable>['attributes']; listeners?: ReturnType<typeof useSortable>['listeners'] }>({})\nconst SortableListItem = React.forwardRef<HTMLDivElement, SortableListItemProps>(({ id, disabled, className, style, children, ...props }, ref) => {\n  const sortable = useSortable({ id, disabled })\n  const mergedRef = (node: HTMLDivElement | null) => { sortable.setNodeRef(node); if (typeof ref === 'function') ref(node); else if (ref) ref.current = node }\n  return <SortableContextValue.Provider value={{ attributes: sortable.attributes, listeners: sortable.listeners }}><div {...props} ref={mergedRef} className={classNames('dsx-sortable-list__item', className)} data-disabled={disabled || undefined} data-dragging={sortable.isDragging || undefined} style={{ ...style, transform: TransformCSS.Transform.toString(sortable.transform), transition: sortable.transition }}>{children}</div></SortableContextValue.Provider>\n})\nSortableListItem.displayName = 'SortableListItem'\n\nconst SortableListHandle = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(({ className, children = '\u22EE\u22EE', ...props }, ref) => {\n  const context = React.useContext(SortableContextValue)\n  return <button {...props} {...context.attributes} {...context.listeners} ref={ref} type=\"button\" className={classNames('dsx-sortable-list__handle', className)} aria-label={props['aria-label'] ?? 'Reorder item'}>{children}</button>\n})\nSortableListHandle.displayName = 'SortableListHandle'\nconst SortableListOverlay = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-sortable-list__overlay', className)} />)\nSortableListOverlay.displayName = 'SortableListOverlay'\n\nconst SortableListRoot = React.forwardRef<HTMLDivElement, SortableListRootProps>(({ ids, disabledIds = [], onReorder, announcements, className, children, ...props }, ref) => {\n  const rootRef = React.useRef<HTMLDivElement | null>(null)\n  const mergedRootRef = React.useCallback((node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof ref === 'function') ref(node)\n    else if (ref) ref.current = node\n  }, [ref])\n  const [activeId, setActiveId] = React.useState<SortableId | null>(null)\n  const [message, setMessage] = React.useState('')\n  const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }))\n  const handleStart = (event: DragStartEvent) => setActiveId(event.active.id)\n  const activeChild = React.Children.toArray(children).find(\n    (child) => React.isValidElement(child) && (child.props as SortableListItemProps).id === activeId,\n  )\n  const activeContent = React.isValidElement<{ children?: React.ReactNode }>(activeChild)\n    ? activeChild.props.children\n    : activeId == null ? null : String(activeId)\n  const handleEnd = (event: DragEndEvent) => {\n    setActiveId(null)\n    if (!event.over || event.active.id === event.over.id) return\n    const from = ids.indexOf(event.active.id); const to = ids.indexOf(event.over.id)\n    if (from < 0 || to < 0 || disabledIds.includes(event.active.id) || disabledIds.includes(event.over.id)) return\n    const next = arrayMove(ids, from, to)\n    setMessage(announcements?.moved?.(event.active.id, from, to) ?? `Moved item ${String(event.active.id)} from position ${from + 1} to ${to + 1}`)\n    onReorder?.({ ids: next, activeIndex: from, overIndex: to })\n    const escapedId = globalThis.CSS?.escape?.(String(event.active.id)) ?? String(event.active.id).replace(/[\"\\\\]/g, '\\\\$&')\n    requestAnimationFrame(() => rootRef.current?.querySelector<HTMLElement>(`[data-sortable-id=\"${escapedId}\"] .dsx-sortable-list__handle`)?.focus())\n  }\n  return <DndContext sensors={sensors} collisionDetection={closestCenter} onDragStart={handleStart} onDragCancel={() => setActiveId(null)} onDragEnd={handleEnd}><SortableContext items={ids} strategy={verticalListSortingStrategy}><div {...props} ref={mergedRootRef} className={classNames('dsx-sortable-list', className)} role={props.role ?? 'list'}>{React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child as React.ReactElement<Record<string, unknown>>, { 'data-sortable-id': String((child.props as SortableListItemProps).id), disabled: (child.props as SortableListItemProps).disabled || disabledIds.includes((child.props as SortableListItemProps).id), role: (child.props as SortableListItemProps).role ?? 'listitem' }) : child)}</div></SortableContext><VisuallyHidden aria-live=\"assertive\">{message}</VisuallyHidden><DragOverlay>{activeId == null ? null : <SortableListOverlay>{activeContent}</SortableListOverlay>}</DragOverlay></DndContext>\n})\nSortableListRoot.displayName = 'SortableList'\n\nconst SortableList = Object.assign(SortableListRoot, { Root: SortableListRoot, Item: SortableListItem, Handle: SortableListHandle, Overlay: SortableListOverlay })\nexport { SortableList, SortableListHandle, SortableListItem, SortableListOverlay, SortableListRoot }\nexport type {\n  SortableId,\n  SortableListChange,\n  SortableListItemProps,\n  SortableListRootProps,\n} from './sortableList.props'\n"],
+  "mappings": "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",
   "names": ["classNames", "TransformCSS"]
 }

package/dist/components/sortableList/SortableList.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.d.cts","sourceRoot":"","sources":["../../../src/components/sortableList/SortableList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAEV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,sBAAsB,CAAA;AAG7B,QAAA,MAAM,gBAAgB,8FAIpB,CAAA;AAGF,QAAA,MAAM,kBAAkB,yHAGtB,CAAA;AAEF,QAAA,MAAM,mBAAmB,6GAAyM,CAAA;AAGlO,QAAA,MAAM,gBAAgB,8FAuBpB,CAAA;AAGF,QAAA,MAAM,YAAY;;;;;CAAgJ,CAAA;AAClK,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,CAAA;AACpG,YAAY,EACV,UAAU,EACV,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"SortableList.d.cts","sourceRoot":"","sources":["../../../src/components/sortableList/SortableList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAEV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,sBAAsB,CAAA;AAG7B,QAAA,MAAM,gBAAgB,8FAIpB,CAAA;AAGF,QAAA,MAAM,kBAAkB,yHAGtB,CAAA;AAEF,QAAA,MAAM,mBAAmB,6GAAyM,CAAA;AAGlO,QAAA,MAAM,gBAAgB,8FA6BpB,CAAA;AAGF,QAAA,MAAM,YAAY;;;;;CAAgJ,CAAA;AAClK,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,CAAA;AACpG,YAAY,EACV,UAAU,EACV,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,sBAAsB,CAAA"}

package/dist/components/sortableList/SortableList.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.d.mts","sourceRoot":"","sources":["../../../src/components/sortableList/SortableList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAEV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,sBAAsB,CAAA;AAG7B,QAAA,MAAM,gBAAgB,8FAIpB,CAAA;AAGF,QAAA,MAAM,kBAAkB,yHAGtB,CAAA;AAEF,QAAA,MAAM,mBAAmB,6GAAyM,CAAA;AAGlO,QAAA,MAAM,gBAAgB,8FAuBpB,CAAA;AAGF,QAAA,MAAM,YAAY;;;;;CAAgJ,CAAA;AAClK,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,CAAA;AACpG,YAAY,EACV,UAAU,EACV,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"SortableList.d.mts","sourceRoot":"","sources":["../../../src/components/sortableList/SortableList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAEV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,sBAAsB,CAAA;AAG7B,QAAA,MAAM,gBAAgB,8FAIpB,CAAA;AAGF,QAAA,MAAM,kBAAkB,yHAGtB,CAAA;AAEF,QAAA,MAAM,mBAAmB,6GAAyM,CAAA;AAGlO,QAAA,MAAM,gBAAgB,8FA6BpB,CAAA;AAGF,QAAA,MAAM,YAAY;;;;;CAAgJ,CAAA;AAClK,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,CAAA;AACpG,YAAY,EACV,UAAU,EACV,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,sBAAsB,CAAA"}

package/dist/components/sortableList/SortableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../../../src/components/sortableList/SortableList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAEV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,sBAAsB,CAAA;AAG7B,QAAA,MAAM,gBAAgB,8FAIpB,CAAA;AAGF,QAAA,MAAM,kBAAkB,yHAGtB,CAAA;AAEF,QAAA,MAAM,mBAAmB,6GAAyM,CAAA;AAGlO,QAAA,MAAM,gBAAgB,8FAuBpB,CAAA;AAGF,QAAA,MAAM,YAAY;;;;;CAAgJ,CAAA;AAClK,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,CAAA;AACpG,YAAY,EACV,UAAU,EACV,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../../../src/components/sortableList/SortableList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAEV,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,sBAAsB,CAAA;AAG7B,QAAA,MAAM,gBAAgB,8FAIpB,CAAA;AAGF,QAAA,MAAM,kBAAkB,yHAGtB,CAAA;AAEF,QAAA,MAAM,mBAAmB,6GAAyM,CAAA;AAGlO,QAAA,MAAM,gBAAgB,8FA6BpB,CAAA;AAGF,QAAA,MAAM,YAAY;;;;;CAAgJ,CAAA;AAClK,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,CAAA;AACpG,YAAY,EACV,UAAU,EACV,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,sBAAsB,CAAA"}

package/dist/components/sortableList/SortableList.js

@@ -25,6 +25,12 @@ SortableListHandle.displayName = "SortableListHandle";
 const SortableListOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ...props, ref, className: classNames("dsx-sortable-list__overlay", className) }));
 SortableListOverlay.displayName = "SortableListOverlay";
 const SortableListRoot = React.forwardRef(({ ids, disabledIds = [], onReorder, announcements, className, children, ...props }, ref) => {
+  const rootRef = React.useRef(null);
+  const mergedRootRef = React.useCallback((node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
   const [activeId, setActiveId] = React.useState(null);
   const [message, setMessage] = React.useState("");
   const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
@@ -43,10 +49,10 @@ const SortableListRoot = React.forwardRef(({ ids, disabledIds = [], onReorder, a
     setMessage(announcements?.moved?.(event.active.id, from, to) ?? `Moved item ${String(event.active.id)} from position ${from + 1} to ${to + 1}`);
     onReorder?.({ ids: next, activeIndex: from, overIndex: to });
     const escapedId = globalThis.CSS?.escape?.(String(event.active.id)) ?? String(event.active.id).replace(/["\\]/g, "\\$&");
-    requestAnimationFrame(() => document.querySelector(`[data-sortable-id="${escapedId}"] button`)?.focus());
+    requestAnimationFrame(() => rootRef.current?.querySelector(`[data-sortable-id="${escapedId}"] .dsx-sortable-list__handle`)?.focus());
   };
   return /* @__PURE__ */ jsxs(DndContext, { sensors, collisionDetection: closestCenter, onDragStart: handleStart, onDragCancel: () => setActiveId(null), onDragEnd: handleEnd, children: [
-    /* @__PURE__ */ jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("div", { ...props, ref, className: classNames("dsx-sortable-list", className), role: props.role ?? "list", children: React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, { "data-sortable-id": String(child.props.id), disabled: child.props.disabled || disabledIds.includes(child.props.id), role: child.props.role ?? "listitem" }) : child) }) }),
+    /* @__PURE__ */ jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx("div", { ...props, ref: mergedRootRef, className: classNames("dsx-sortable-list", className), role: props.role ?? "list", children: React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child, { "data-sortable-id": String(child.props.id), disabled: child.props.disabled || disabledIds.includes(child.props.id), role: child.props.role ?? "listitem" }) : child) }) }),
     /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "assertive", children: message }),
     /* @__PURE__ */ jsx(DragOverlay, { children: activeId == null ? null : /* @__PURE__ */ jsx(SortableListOverlay, { children: activeContent }) })
   ] });

package/dist/components/sortableList/SortableList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/sortableList/SortableList.tsx"],
-  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { DndContext, DragOverlay, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core'\nimport { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'\nimport { CSS as TransformCSS } from '@dnd-kit/utilities'\n\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\n\nimport type {\n  SortableId,\n  SortableListItemProps,\n  SortableListRootProps,\n} from './sortableList.props'\n\nconst SortableContextValue = React.createContext<{ attributes?: ReturnType<typeof useSortable>['attributes']; listeners?: ReturnType<typeof useSortable>['listeners'] }>({})\nconst SortableListItem = React.forwardRef<HTMLDivElement, SortableListItemProps>(({ id, disabled, className, style, children, ...props }, ref) => {\n  const sortable = useSortable({ id, disabled })\n  const mergedRef = (node: HTMLDivElement | null) => { sortable.setNodeRef(node); if (typeof ref === 'function') ref(node); else if (ref) ref.current = node }\n  return <SortableContextValue.Provider value={{ attributes: sortable.attributes, listeners: sortable.listeners }}><div {...props} ref={mergedRef} className={classNames('dsx-sortable-list__item', className)} data-disabled={disabled || undefined} data-dragging={sortable.isDragging || undefined} style={{ ...style, transform: TransformCSS.Transform.toString(sortable.transform), transition: sortable.transition }}>{children}</div></SortableContextValue.Provider>\n})\nSortableListItem.displayName = 'SortableListItem'\n\nconst SortableListHandle = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(({ className, children = '\u22EE\u22EE', ...props }, ref) => {\n  const context = React.useContext(SortableContextValue)\n  return <button {...props} {...context.attributes} {...context.listeners} ref={ref} type=\"button\" className={classNames('dsx-sortable-list__handle', className)} aria-label={props['aria-label'] ?? 'Reorder item'}>{children}</button>\n})\nSortableListHandle.displayName = 'SortableListHandle'\nconst SortableListOverlay = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-sortable-list__overlay', className)} />)\nSortableListOverlay.displayName = 'SortableListOverlay'\n\nconst SortableListRoot = React.forwardRef<HTMLDivElement, SortableListRootProps>(({ ids, disabledIds = [], onReorder, announcements, className, children, ...props }, ref) => {\n  const [activeId, setActiveId] = React.useState<SortableId | null>(null)\n  const [message, setMessage] = React.useState('')\n  const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }))\n  const handleStart = (event: DragStartEvent) => setActiveId(event.active.id)\n  const activeChild = React.Children.toArray(children).find(\n    (child) => React.isValidElement(child) && (child.props as SortableListItemProps).id === activeId,\n  )\n  const activeContent = React.isValidElement<{ children?: React.ReactNode }>(activeChild)\n    ? activeChild.props.children\n    : activeId == null ? null : String(activeId)\n  const handleEnd = (event: DragEndEvent) => {\n    setActiveId(null)\n    if (!event.over || event.active.id === event.over.id) return\n    const from = ids.indexOf(event.active.id); const to = ids.indexOf(event.over.id)\n    if (from < 0 || to < 0 || disabledIds.includes(event.active.id) || disabledIds.includes(event.over.id)) return\n    const next = arrayMove(ids, from, to)\n    setMessage(announcements?.moved?.(event.active.id, from, to) ?? `Moved item ${String(event.active.id)} from position ${from + 1} to ${to + 1}`)\n    onReorder?.({ ids: next, activeIndex: from, overIndex: to })\n    const escapedId = globalThis.CSS?.escape?.(String(event.active.id)) ?? String(event.active.id).replace(/[\"\\\\]/g, '\\\\$&')\n    requestAnimationFrame(() => document.querySelector<HTMLElement>(`[data-sortable-id=\"${escapedId}\"] button`)?.focus())\n  }\n  return <DndContext sensors={sensors} collisionDetection={closestCenter} onDragStart={handleStart} onDragCancel={() => setActiveId(null)} onDragEnd={handleEnd}><SortableContext items={ids} strategy={verticalListSortingStrategy}><div {...props} ref={ref} className={classNames('dsx-sortable-list', className)} role={props.role ?? 'list'}>{React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child as React.ReactElement<Record<string, unknown>>, { 'data-sortable-id': String((child.props as SortableListItemProps).id), disabled: (child.props as SortableListItemProps).disabled || disabledIds.includes((child.props as SortableListItemProps).id), role: (child.props as SortableListItemProps).role ?? 'listitem' }) : child)}</div></SortableContext><VisuallyHidden aria-live=\"assertive\">{message}</VisuallyHidden><DragOverlay>{activeId == null ? null : <SortableListOverlay>{activeContent}</SortableListOverlay>}</DragOverlay></DndContext>\n})\nSortableListRoot.displayName = 'SortableList'\n\nconst SortableList = Object.assign(SortableListRoot, { Root: SortableListRoot, Item: SortableListItem, Handle: SortableListHandle, Overlay: SortableListOverlay })\nexport { SortableList, SortableListHandle, SortableListItem, SortableListOverlay, SortableListRoot }\nexport type {\n  SortableId,\n  SortableListChange,\n  SortableListItemProps,\n  SortableListRootProps,\n} from './sortableList.props'\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { DndContext, DragOverlay, KeyboardSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core'\nimport { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable'\nimport { CSS as TransformCSS } from '@dnd-kit/utilities'\n\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\n\nimport type {\n  SortableId,\n  SortableListItemProps,\n  SortableListRootProps,\n} from './sortableList.props'\n\nconst SortableContextValue = React.createContext<{ attributes?: ReturnType<typeof useSortable>['attributes']; listeners?: ReturnType<typeof useSortable>['listeners'] }>({})\nconst SortableListItem = React.forwardRef<HTMLDivElement, SortableListItemProps>(({ id, disabled, className, style, children, ...props }, ref) => {\n  const sortable = useSortable({ id, disabled })\n  const mergedRef = (node: HTMLDivElement | null) => { sortable.setNodeRef(node); if (typeof ref === 'function') ref(node); else if (ref) ref.current = node }\n  return <SortableContextValue.Provider value={{ attributes: sortable.attributes, listeners: sortable.listeners }}><div {...props} ref={mergedRef} className={classNames('dsx-sortable-list__item', className)} data-disabled={disabled || undefined} data-dragging={sortable.isDragging || undefined} style={{ ...style, transform: TransformCSS.Transform.toString(sortable.transform), transition: sortable.transition }}>{children}</div></SortableContextValue.Provider>\n})\nSortableListItem.displayName = 'SortableListItem'\n\nconst SortableListHandle = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(({ className, children = '\u22EE\u22EE', ...props }, ref) => {\n  const context = React.useContext(SortableContextValue)\n  return <button {...props} {...context.attributes} {...context.listeners} ref={ref} type=\"button\" className={classNames('dsx-sortable-list__handle', className)} aria-label={props['aria-label'] ?? 'Reorder item'}>{children}</button>\n})\nSortableListHandle.displayName = 'SortableListHandle'\nconst SortableListOverlay = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-sortable-list__overlay', className)} />)\nSortableListOverlay.displayName = 'SortableListOverlay'\n\nconst SortableListRoot = React.forwardRef<HTMLDivElement, SortableListRootProps>(({ ids, disabledIds = [], onReorder, announcements, className, children, ...props }, ref) => {\n  const rootRef = React.useRef<HTMLDivElement | null>(null)\n  const mergedRootRef = React.useCallback((node: HTMLDivElement | null) => {\n    rootRef.current = node\n    if (typeof ref === 'function') ref(node)\n    else if (ref) ref.current = node\n  }, [ref])\n  const [activeId, setActiveId] = React.useState<SortableId | null>(null)\n  const [message, setMessage] = React.useState('')\n  const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }))\n  const handleStart = (event: DragStartEvent) => setActiveId(event.active.id)\n  const activeChild = React.Children.toArray(children).find(\n    (child) => React.isValidElement(child) && (child.props as SortableListItemProps).id === activeId,\n  )\n  const activeContent = React.isValidElement<{ children?: React.ReactNode }>(activeChild)\n    ? activeChild.props.children\n    : activeId == null ? null : String(activeId)\n  const handleEnd = (event: DragEndEvent) => {\n    setActiveId(null)\n    if (!event.over || event.active.id === event.over.id) return\n    const from = ids.indexOf(event.active.id); const to = ids.indexOf(event.over.id)\n    if (from < 0 || to < 0 || disabledIds.includes(event.active.id) || disabledIds.includes(event.over.id)) return\n    const next = arrayMove(ids, from, to)\n    setMessage(announcements?.moved?.(event.active.id, from, to) ?? `Moved item ${String(event.active.id)} from position ${from + 1} to ${to + 1}`)\n    onReorder?.({ ids: next, activeIndex: from, overIndex: to })\n    const escapedId = globalThis.CSS?.escape?.(String(event.active.id)) ?? String(event.active.id).replace(/[\"\\\\]/g, '\\\\$&')\n    requestAnimationFrame(() => rootRef.current?.querySelector<HTMLElement>(`[data-sortable-id=\"${escapedId}\"] .dsx-sortable-list__handle`)?.focus())\n  }\n  return <DndContext sensors={sensors} collisionDetection={closestCenter} onDragStart={handleStart} onDragCancel={() => setActiveId(null)} onDragEnd={handleEnd}><SortableContext items={ids} strategy={verticalListSortingStrategy}><div {...props} ref={mergedRootRef} className={classNames('dsx-sortable-list', className)} role={props.role ?? 'list'}>{React.Children.map(children, (child) => React.isValidElement(child) ? React.cloneElement(child as React.ReactElement<Record<string, unknown>>, { 'data-sortable-id': String((child.props as SortableListItemProps).id), disabled: (child.props as SortableListItemProps).disabled || disabledIds.includes((child.props as SortableListItemProps).id), role: (child.props as SortableListItemProps).role ?? 'listitem' }) : child)}</div></SortableContext><VisuallyHidden aria-live=\"assertive\">{message}</VisuallyHidden><DragOverlay>{activeId == null ? null : <SortableListOverlay>{activeContent}</SortableListOverlay>}</DragOverlay></DndContext>\n})\nSortableListRoot.displayName = 'SortableList'\n\nconst SortableList = Object.assign(SortableListRoot, { Root: SortableListRoot, Item: SortableListItem, Handle: SortableListHandle, Overlay: SortableListOverlay })\nexport { SortableList, SortableListHandle, SortableListItem, SortableListOverlay, SortableListRoot }\nexport type {\n  SortableId,\n  SortableListChange,\n  SortableListItemProps,\n  SortableListRootProps,\n} from './sortableList.props'\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/stat-card.css

@@ -42,6 +42,8 @@
 
 .dsx-stat-card__footer {
   display: flex;
+  flex-wrap: wrap;
+  min-width: 0;
   align-items: center;
   gap: var(--dsx-space-xs);
 }

package/dist/components/stepper.css

@@ -1,8 +1,12 @@
 
 
 .dsx-stepper {
+  --dsx-stepper-indicator-size: var(--dsx-size-lg);
   display: flex;
+  flex-wrap: wrap;
   box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-stepper--horizontal {
@@ -54,24 +58,24 @@
 }
 
 /* Connector, ported from vertical mode's already-correct technique: an absolutely-positioned
-   line anchored directly to the Indicator's own known geometry (--dsx-size-md is its
+   line anchored directly to the Indicator's own known geometry (--dsx-stepper-indicator-size is its
    diameter), not a flex-sibling that only knows about leftover space between item boxes.
    Starts right at the Indicator's own right edge (left: --dsx-size-md) and extends past this
    item's own right edge into the inter-item `gap` above (right: -gap), landing exactly at the
    start of the next item's box — which is where its Indicator begins, since Indicator is
    always flush-left in the item column. */
-.dsx-stepper--horizontal .dsx-stepper__item:not(:last-child)::after {
+.dsx-stepper--horizontal .dsx-stepper__item:has(~ .dsx-stepper__item)::after {
   content: '';
   position: absolute;
-  top: calc(var(--dsx-size-md) / 2 - var(--dsx-border-width-lg) / 2);
-  left: var(--dsx-size-md);
+  top: calc(var(--dsx-stepper-indicator-size) / 2 - var(--dsx-border-width-lg) / 2);
+  left: var(--dsx-stepper-indicator-size);
   right: calc(-1 * var(--dsx-space-lg));
   height: var(--dsx-border-width-lg);
   background: var(--dsx-color-outline-variant);
   border-radius: var(--dsx-rounded-full);
 }
 
-.dsx-stepper--horizontal .dsx-stepper__item--complete:not(:last-child)::after {
+.dsx-stepper--horizontal .dsx-stepper__item--complete:has(~ .dsx-stepper__item)::after {
   background: var(--dsx-color-primary);
 }
 
@@ -91,23 +95,23 @@
   width: 100%;
 }
 
-.dsx-stepper--vertical .dsx-stepper__item:last-child {
+.dsx-stepper--vertical .dsx-stepper__item:not(:has(~ .dsx-stepper__item)) {
   padding-bottom: 0;
 }
 
 /* Connector line drawn from bottom of indicator to bottom of item (padding area) */
-.dsx-stepper--vertical .dsx-stepper__item:not(:last-child)::after {
+.dsx-stepper--vertical .dsx-stepper__item:has(~ .dsx-stepper__item)::after {
   content: '';
   position: absolute;
-  top: var(--dsx-size-md);
-  left: calc(var(--dsx-size-md) / 2 - var(--dsx-border-width-lg) / 2);
+  top: var(--dsx-stepper-indicator-size);
+  left: calc(var(--dsx-stepper-indicator-size) / 2 - var(--dsx-border-width-lg) / 2);
   bottom: 0;
   width: var(--dsx-border-width-lg);
   background: var(--dsx-color-outline-variant);
   border-radius: var(--dsx-rounded-full);
 }
 
-.dsx-stepper--vertical .dsx-stepper__item--complete:not(:last-child)::after {
+.dsx-stepper--vertical .dsx-stepper__item--complete:has(~ .dsx-stepper__item)::after {
   background: var(--dsx-color-primary);
 }
 
@@ -117,12 +121,13 @@
 }
 
 .dsx-stepper__indicator {
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: var(--dsx-size-md);
-  height: var(--dsx-size-md);
+  width: var(--dsx-stepper-indicator-size);
+  height: var(--dsx-stepper-indicator-size);
   border-radius: var(--dsx-rounded-full);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
   font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
@@ -156,6 +161,7 @@
 }
 
 .dsx-stepper__label {
+  overflow-wrap: anywhere;
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;
   font-size: var(--dsx-typography-label-large-font-size);
   font-weight: var(--dsx-typography-label-large-font-weight);
@@ -171,6 +177,7 @@
 }
 
 .dsx-stepper__description {
+  overflow-wrap: anywhere;
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
   font-size: var(--dsx-typography-body-medium-font-size);
   color: var(--dsx-color-on-surface-variant);
@@ -196,3 +203,7 @@
 .dsx-stepper__content {
   margin-top: var(--dsx-space-lg);
 }
+
+.dsx-stepper[data-size='sm'] { --dsx-stepper-indicator-size: var(--dsx-size-md); }
+.dsx-stepper[data-size='lg'] { --dsx-stepper-indicator-size: var(--dsx-size-xl); }
+.dsx-stepper__item > :not(.dsx-stepper__indicator) { min-width: 0; max-width: 100%; }