@d4gger/design-system 3.0.1 → 4.0.1

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

@@ -73,12 +73,23 @@
 .dsx-sidebar[data-effect='ambient'] {
   background-color: var(--dsx-color-surface);
   /* Softened 2026-09-19: accent-9 at 18% painted a visible color blob
-     (worst on bright accents like spark) instead of an ambient wash. */
-  background-image: radial-gradient(
-    circle at var(--dsx-space-xl) var(--dsx-space-lg),
-    color-mix(in srgb, var(--dsx-color-accent-9) 10%, transparent),
-    transparent 58%
-  );
+     (worst on bright accents like spark) instead of an ambient wash. The strength is a theme-aware token (G-16, 2026-10-05):
+     10% in dark, as before; raised in light, where the same wash read about half as strong on the pale surface.
+     A second source at the foot (G-17, 2026-10-05): the corner radial alone reached about 35% of the panel and left the lower
+     half flat. The foot glow is the same colour at 0.9x the same strength, an ellipse anchored to the bottom edge, so the panel
+     is lit at both ends and the nav keeps a calm middle (the account row gets the light the logo gets). House-style, picked by
+     the maintainer in the look lab over a full-height column and a single tall radial. */
+  background-image:
+    radial-gradient(
+      circle at var(--dsx-space-xl) var(--dsx-space-lg),
+      color-mix(in srgb, var(--dsx-color-accent-9) var(--dsx-effect-ambient-strength), transparent),
+      transparent 58%
+    ),
+    radial-gradient(
+      ellipse 130% 38% at 85% 100%,
+      color-mix(in srgb, var(--dsx-color-accent-9) calc(var(--dsx-effect-ambient-strength) * 0.9), transparent),
+      transparent 100%
+    );
   background-repeat: no-repeat;
 }
 
@@ -142,6 +153,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;
@@ -190,8 +228,14 @@
   overflow: auto;
 }
 
+/* G-12: the drawer is flush with the viewport on three sides, so only its free (inline-end) edge is a boundary. The
+   base dialog surface draws the structural border all round, which painted a light outline along the screen edge and
+   made the 100dvh nav 2px taller than the sheet's content box, so the sheet scrolled. The nav owns its own scrolling. */
 .dsx-sidebar__mobile-sheet {
   padding: 0;
+  border-block-width: 0;
+  border-inline-start-width: 0;
+  overflow: hidden;
 }
 
 /* The mobile Drawer carries drawer's own content padding; the X sits over
@@ -226,7 +270,7 @@
 .dsx-sidebar__mobile-sheet > .dsx-sidebar {
   position: relative;
   width: 100%;
-  height: 100dvh;
+  height: 100%;
   box-shadow: none;
 }
 
@@ -251,6 +295,7 @@
 
 .dsx-sidebar__rail:focus-visible,
 .dsx-sidebar__menu-button:focus-visible,
+.dsx-sidebar__menu-sub-trigger:focus-visible,
 .dsx-sidebar__menu-sub-button:focus-visible {
   outline: none;
   box-shadow: var(--dsx-shadow-focus-ring);
@@ -447,7 +492,11 @@
   opacity: 1;
 }
 
-.dsx-sidebar__menu-button {
+/* One row geometry for a plain row and for a parent row that opens a sub-list (G-13, 2026-10-05). The parent is a `.dsx-button` too, and
+   without this base it kept the button's 16px padding (its icon sat 8px right of every other row) and the browser's grey button
+   fill whenever it was neither open nor active. */
+.dsx-sidebar__menu-button,
+.dsx-sidebar__menu-sub-trigger {
   display: flex;
   align-items: center;
   gap: var(--dsx-space-sm);
@@ -595,6 +644,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 {
@@ -617,6 +667,17 @@
   box-shadow: var(--dsx-shadow-active-inset-outline);
 }
 
+/* G-19 (2026-10-05): the active row's own wash in the light theme. Accent-3 at 50% over a tinted light panel is nearly the
+   panel's colour, so in light the row was marked only by its underline and text. Step 4 is the scale's "soft component" step
+   (selected / hover); it reads on Rift, Warp and Ray without a primary fill. Dark keeps the rules above, unchanged. The
+   `:where()` keeps the selector at (0,2,0) (the qa:selectors policy); the tie with the three rules above is decided by
+   source order, so this block stays after them. */
+:where([data-dsx-theme='light']) .dsx-sidebar__menu-button[data-active='true'],
+:where([data-dsx-theme='light']) .dsx-sidebar__menu-sub-button[data-active='true'],
+:where([data-dsx-theme='light']) .dsx-sidebar__menu-sub-trigger[data-active='true'] {
+  background: var(--dsx-color-accent-4);
+}
+
 .dsx-sidebar__menu-sub-trigger-chevron {
   margin-inline-start: auto;
   flex-shrink: 0;
@@ -664,6 +725,13 @@
   min-height: var(--dsx-size-sm);
 }
 
+/* Inside a menu item (a flex row) the skeleton is an auto-width flex item, so its 100%-wide label collapses and the
+   row draws as two small pills. Let it take the item's width. */
+.dsx-sidebar__menu-item > .dsx-sidebar__menu-skeleton {
+  flex: 1;
+  min-width: 0;
+}
+
 .dsx-sidebar__menu-button-text {
   min-width: 0;
   overflow: hidden;
@@ -671,6 +739,11 @@
   white-space: nowrap;
 }
 
+/* G-18 (2026-10-05): a quiet outline in the accent, not a raised disc. The disc was a `surface-raised` fill with a drop shadow:
+   shadows do not read on dark, and on the tinted panel the fill is nearly the panel's own colour, so the control vanished in
+   both themes. The ring is the scale's "normal border" step (7), the glyph its text step (11), the hover one step up (fill 3,
+   ring 8): the Radix 12-step jobs, one purposeful step per state. The ring is an inset shadow so the 32px box does not move,
+   and the focus ring below still replaces it. The pin / unpin glyphs of hover-expand mode live inside the same button. */
 .dsx-sidebar__trigger {
   display: inline-flex;
   align-items: center;
@@ -682,14 +755,14 @@
   padding: 0;
   border: 0;
   border-radius: var(--dsx-rounded-full);
-  background: var(--dsx-color-surface-raised);
-  color: var(--dsx-color-on-surface-variant);
-  box-shadow: var(--dsx-effect-shadow-1);
+  background: transparent;
+  color: var(--dsx-color-accent-11);
+  box-shadow: inset 0 0 0 var(--dsx-border-width-sm) var(--dsx-color-accent-7);
 }
 
 .dsx-sidebar__trigger:hover {
-  background: var(--dsx-effect-hover-ghost);
-  color: var(--dsx-color-on-surface);
+  background: var(--dsx-color-accent-3);
+  box-shadow: inset 0 0 0 var(--dsx-border-width-sm) var(--dsx-color-accent-8);
 }
 
 .dsx-sidebar__trigger:focus-visible {

package/dist/components/sonner.css

@@ -20,12 +20,11 @@
 }
 
 .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);
@@ -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/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%; }

package/dist/components/tab-nav.css

@@ -4,6 +4,8 @@
 
 .dsx-tab-nav {
   display: block;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-tab-nav__list {
@@ -13,15 +15,19 @@
   padding: 0;
   margin: 0;
   list-style: none;
+  flex-wrap: wrap;
+  max-width: 100%;
 }
 
 .dsx-tab-nav__list-item {
   display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
 }
 
 /* Default variant — underline style */
 .dsx-tab-nav[data-variant='default'] .dsx-tab-nav__list {
-  border-bottom: var(--dsx-border-width-md) solid var(--dsx-color-outline-variant);
+  border-bottom: var(--dsx-boundary-divider-width) solid var(--dsx-color-outline-variant);
   padding-bottom: 0;
 }
 
@@ -37,6 +43,10 @@
   font-size: var(--dsx-typography-label-large-font-size);
   font-weight: var(--dsx-typography-label-large-font-weight);
   text-decoration: none;
+  min-height: var(--dsx-size-md);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  box-sizing: border-box;
   cursor: pointer;
   transition:
     background-color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease),
@@ -55,7 +65,7 @@
 
 /* Active state — default (underline) */
 .dsx-tab-nav[data-variant='default'] .dsx-tab-nav__link[data-active='true'] {
-  color: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-indicator);
   background: transparent;
   position: relative;
 }
@@ -63,11 +73,11 @@
 .dsx-tab-nav[data-variant='default'] .dsx-tab-nav__link[data-active='true']::after {
   content: '';
   position: absolute;
-  bottom: calc(-1 * var(--dsx-border-width-md) - 1px);
+  bottom: calc(-1 * var(--dsx-boundary-divider-width));
   left: 0;
   right: 0;
-  height: var(--dsx-border-width-md);
-  background: var(--dsx-color-primary);
+  height: var(--dsx-boundary-selected-width);
+  background: var(--dsx-color-accent-indicator);
   border-radius: var(--dsx-rounded-full);
 }
 
@@ -85,32 +95,32 @@
 }
 
 .dsx-tab-nav[data-variant='pills'] .dsx-tab-nav__link[data-active='true'] {
-  color: var(--dsx-color-on-primary);
-  background: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-contrast);
+  background: var(--dsx-color-accent-track);
 }
 
 .dsx-tab-nav[data-variant='pills'] .dsx-tab-nav__link[data-active='true']:hover {
-  background: var(--dsx-color-primary);
+  background: var(--dsx-color-accent-track);
 }
 
 /* Underline variant — same as default but without the border on the list */
 .dsx-tab-nav[data-variant='underline'] .dsx-tab-nav__list {
-  border-bottom: var(--dsx-border-width-md) solid var(--dsx-color-outline-variant);
+  border-bottom: 0;
 }
 
 .dsx-tab-nav[data-variant='underline'] .dsx-tab-nav__link[data-active='true'] {
-  color: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-indicator);
   position: relative;
 }
 
 .dsx-tab-nav[data-variant='underline'] .dsx-tab-nav__link[data-active='true']::after {
   content: '';
   position: absolute;
-  bottom: calc(-1 * var(--dsx-border-width-md) - 1px);
+  bottom: calc(-1 * var(--dsx-boundary-divider-width));
   left: 0;
   right: 0;
-  height: 2px;
-  background: var(--dsx-color-primary);
+  height: var(--dsx-boundary-selected-width);
+  background: var(--dsx-color-accent-indicator);
   border-radius: var(--dsx-rounded-full);
 }
 
@@ -130,3 +140,5 @@
     transition: none;
   }
 }
+
+.dsx-tab-nav[data-variant='underline'] .dsx-tab-nav__link[data-active='true']::after { bottom: 0; }

package/dist/components/tabNav/TabNav.cjs

@@ -75,7 +75,6 @@ const TabNavList = React.forwardRef(
         ...restProps,
         ref: forwardedRef,
         className: (0, import_classnames.default)("dsx-tab-nav__list", extractedClassName, className),
-        role: "tablist",
         children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children }) : children
       }
     );
@@ -92,9 +91,7 @@ const TabNavLink = React.forwardRef(
         ref: forwardedRef,
         className: (0, import_classnames.default)("dsx-tab-nav__link", className),
         "data-active": active ? "true" : void 0,
-        role: "tab",
-        "aria-selected": active ? "true" : "false",
-        tabIndex: active ? 0 : -1,
+        "aria-current": active ? "page" : props["aria-current"],
         children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children }) : children
       }
     ) });