@d4gger/design-system 2.7.0 → 3.0.0

package/dist/components/sidebar.css

@@ -18,18 +18,126 @@
   flex-direction: column;
   flex-shrink: 0;
   align-self: stretch;
+  /* `position: sticky` is the real fix, not `height` alone — confirmed live 2026-08-25 on a
+     page taller than one viewport (cabinet/loyalty): the provider correctly grows to the real
+     content height (1315px measured), but a `static`-positioned sidebar still only occupies its
+     own 100dvh box within that taller flex container, leaving a real empty gap below it, then
+     scrolling away entirely once you scroll past it — no nav available past the fold. Sticky
+     pins it to the viewport regardless of how tall the main content grows. */
+  position: sticky;
+  top: 0;
   height: 100dvh;
-  width: var(--dsx-sidebar-width, 256px);
+  width: var(--dsx-sidebar-width);
   background-color: var(--dsx-color-surface);
-  border-right: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  /* No border — the depth shadow below is the only edge cue. Zero hard separator lines
+     anywhere in the sidebar, including its own outer edge. */
   box-shadow: var(--dsx-effect-shadow-1);
-  transition: width var(--dsx-motion-duration-normal, 250ms) var(--dsx-motion-easing-standard, ease);
+  /* Exit curve (retracting/collapsing) — a real, measured motion complaint, not a vague "too much
+     movement": exponential ease-out (still used below for the entrance) has a long decelerating
+     tail that's exactly what makes something growing into view feel snappy, but that same tail
+     reads as dragging on the way OUT — traced frame-by-frame retracting from a 200px-wider preview,
+     it was still visibly crawling the last ~15px a full 150ms+ after the "main" motion looked
+     finished. Collapsing gets a shorter duration and a more restrained standard curve instead —
+     decisive, not draggy. Entrances (below) keep the exponential curve; only exits change. */
+  transition:
+    width var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard),
+    margin-inline-end var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard),
+    box-shadow var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard);
   overflow: hidden;
 }
 
+.dsx-sidebar-provider[data-transitions-ready='false'] .dsx-sidebar {
+  transition: none;
+}
+
+/* Entrance curve (expanding — hover-preview growing in, or a direct pin/toggle). Front-loaded
+   exponential ease-out reads as an immediate, decisive "pop" specifically because it's only ever
+   applied on the way in; see the base rule above for why the way out uses a different curve. */
+.dsx-sidebar[data-state='expanded'] {
+  transition:
+    width var(--dsx-motion-duration-normal) var(--dsx-motion-easing-emphasized),
+    margin-inline-end var(--dsx-motion-duration-normal) var(--dsx-motion-easing-emphasized),
+    box-shadow var(--dsx-motion-duration-normal) var(--dsx-motion-easing-emphasized);
+}
+
+/* Docking begins from an already-expanded overlay preview. Animate only the negative margin
+   back to zero: the panel width stays stable while the inset moves out from beneath it. Same
+   specificity as the entrance rule above, so source order decides — this must stay after it to
+   keep winning during the pin-docking window (width has nothing left to animate there anyway). */
+.dsx-sidebar-provider:where([data-hover-expand='true'][data-pinned-state='expanded']) .dsx-sidebar {
+  transition:
+    margin-inline-end var(--dsx-motion-duration-normal) var(--dsx-motion-easing-emphasized),
+    box-shadow var(--dsx-motion-duration-normal) var(--dsx-motion-easing-emphasized);
+}
+
+.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%
+  );
+  background-repeat: no-repeat;
+}
+
+/* A Dribbble/Untitled-style preview grows over the inset while preserving the slim rail's
+   layout footprint. Width and the compensating negative margin animate together, so the main
+   content does not jump while the temporary panel opens. A manual trigger click pins the panel
+   by removing the preview attribute, which lets the inset move over deliberately.
+
+   Confirmed real defect live: because the inset never reflows during preview, the panel's
+   overlap zone (sidebar-width minus collapsed-width, ~200px) sits directly on top of real page
+   content — headings, buttons, form fields sliced mid-word — with no visual signal that this is
+   a floating panel rather than corrupted layout. `surface-overlay` is the semantic tier DESIGN.md
+   reserves for exactly this ("dialogs, popovers, dropdowns, temporary floating panels"), a
+   deliberate step up from the sidebar's own resting `surface` tone. The tone shift alone reads
+   weakly in light mode (surface-overlay is near-white, close to the page background), so a real
+   edge — `outline`, the token DESIGN.md itself prescribes for surface edges — is what actually
+   makes the boundary legible in both themes; the shadow alone wasn't doing that job. */
+/* Confirmed real bug live (maintainer's own repro): z-index was only ever elevated while
+   `data-preview-expanded='true'`. On pin, that attribute clears a render *before* the
+   compensating margin has animated back to 0 — so for one frame the sidebar is still visually
+   overlapping the inset (margin unchanged) but has already lost its stacking priority, and the
+   inset (later in DOM order) paints on top of it: the page visibly flashes above the sidebar,
+   then the margin catches up and everything "locks in" to the right. Elevating z-index for the
+   entire time hover-expand is enabled — not just during the preview window — means the value
+   never actually changes across any state transition, so there is nothing left to pop. It costs
+   nothing at rest: the sidebar only ever visually overlaps other content during preview/docking
+   in the first place. */
+.dsx-sidebar[data-hover-expand='true'] {
+  z-index: var(--dsx-z-index-sticky);
+}
+
+/* `[data-pinned-state='collapsed']` matters here, not just `[data-preview-expanded='true']`:
+   the Materials flyout forces `previewOpen` so the sidebar stays expanded while you interact
+   with it (moving the mouse onto the portaled flyout would otherwise leave the sidebar's own
+   hover zone and auto-collapse it mid-interaction) — but that also sets `data-preview-expanded=
+   'true'` even while the sidebar is already pinned with zero overlap to signal. Scoping to "not
+   already pinned" means this only ever fires during a real temporary peek. */
+.dsx-sidebar:where([data-hover-expand='true'][data-preview-expanded='true'][data-pinned-state='collapsed']) {
+  margin-inline-end: calc(var(--dsx-sidebar-width-collapsed) - var(--dsx-sidebar-width));
+  background-color: var(--dsx-color-panel-translucent);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+  border-inline-end: var(--dsx-border-width-sm, 1px) solid var(--dsx-color-outline);
+  box-shadow: var(--dsx-effect-shadow-3);
+}
+
+/* Two prior rounds tried to patch `previewOpen`'s side effects here — forcing the sidebar to
+   dock (margin to 0) and then separately resetting the background/border/shadow/gradient that
+   forcing produced. Removed outright, not patched a third time: confirmed directly, `previewOpen`
+   is consumed in exactly one place at the JS level (`effectivePreviewExpanded`, keeping the
+   sidebar expanded so it doesn't auto-collapse while you're interacting with the portaled
+   flyout) — nothing about the flyout's own position depends on the sidebar's margin, so forcing
+   a dock here never served a real purpose. Maintainer's own framing settled it: "why materials
+   menu should even move or touch effects of the sidebar [or] move the background page to the
+   right" — it shouldn't, and now it genuinely doesn't touch either. Whatever preview state the
+   sidebar was already in when Materials opens (collapsed, peeking, or pinned) is exactly what it
+   stays in — Materials no longer forces any layout or style change of its own. */
+
 .dsx-sidebar[data-collapsible='offcanvas'][data-state='collapsed'] {
   width: 0;
-  border-right-width: 0;
   box-shadow: none;
   pointer-events: none;
 }
@@ -82,6 +190,46 @@
   overflow: auto;
 }
 
+.dsx-sidebar__mobile-sheet {
+  padding: 0;
+}
+
+/* The mobile Drawer carries drawer's own content padding; the X sits over
+   the nav like the old sheet close did (sheet close geometry preserved).
+   Full icon-tile reset like the mobile trigger: a bare vaul button would
+   render raw browser chrome (2px outset, #efefef) — confirmed live. */
+.dsx-sidebar__mobile-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: var(--dsx-space-sm);
+  right: var(--dsx-space-sm);
+  padding: var(--dsx-space-xs);
+  border: none;
+  border-radius: var(--dsx-rounded-sm);
+  background: transparent;
+  color: var(--dsx-color-on-surface);
+  cursor: pointer;
+  z-index: var(--dsx-z-index-elevated);
+}
+
+.dsx-sidebar__mobile-close:hover {
+  background: var(--dsx-effect-hover-ghost);
+}
+
+.dsx-sidebar__mobile-close:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+.dsx-sidebar__mobile-sheet > .dsx-sidebar {
+  position: relative;
+  width: 100%;
+  height: 100dvh;
+  box-shadow: none;
+}
+
 .dsx-sidebar__rail {
   display: inline-flex;
   align-items: center;
@@ -110,38 +258,35 @@
 
 .dsx-sidebar__rail--edge {
   position: absolute;
+  inset-block: 0;
   right: 0;
-  top: 0;
-  width: 4px;
-  height: 100%;
+  width: 8px;
   padding: 0;
   margin: 0;
   border: none;
   border-radius: 0;
   background: transparent;
-  opacity: 0;
-  cursor: pointer;
+  cursor: ew-resize;
 }
 
 .dsx-sidebar__rail--edge::after {
   content: '';
   position: absolute;
-  right: 0;
-  top: 0;
+  inset-block: 0;
+  right: 3px;
   width: 2px;
-  height: 100%;
+  border-radius: var(--dsx-rounded-full);
   background: transparent;
-  transition: background var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
+  transition: background-color var(--dsx-motion-duration-fast, 150ms) var(--dsx-motion-easing-standard, ease);
 }
 
-.dsx-sidebar__rail--edge:hover::after {
+.dsx-sidebar__rail--edge:hover::after,
+.dsx-sidebar__rail--edge:focus-visible::after {
   background: var(--dsx-color-primary);
 }
 
 .dsx-sidebar__rail--edge:focus-visible {
-  opacity: 1;
   outline: none;
-  box-shadow: inset 0 0 0 2px var(--dsx-color-primary);
 }
 
 .dsx-sidebar__header {
@@ -150,8 +295,8 @@
   align-items: center;
   justify-content: space-between;
   gap: var(--dsx-space-sm);
-  padding: var(--dsx-space-md);
-  border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
+  height: var(--dsx-sidebar-width-collapsed);
+  padding-inline: var(--dsx-space-md);
 }
 
 .dsx-sidebar__content {
@@ -163,7 +308,6 @@
 .dsx-sidebar__footer {
   flex-shrink: 0;
   padding: var(--dsx-space-md);
-  border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
 .dsx-sidebar__group {
@@ -214,6 +358,81 @@
   pointer-events: none;
 }
 
+/* Ring variant: a real value/max ratio (e.g. devices used), not a label — shown as a small SVG
+   progress ring so it stays legible even collapsed to icons, instead of being flattened into the
+   plain-badge's collapsed dot below. */
+.dsx-sidebar__menu-badge--ring {
+  display: inline-flex;
+  background: none;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
+}
+
+.dsx-sidebar__menu-badge-ring-track {
+  stroke: var(--dsx-color-outline-variant);
+}
+
+.dsx-sidebar__menu-badge-ring-fill {
+  stroke: var(--dsx-color-primary);
+  transition: stroke-dashoffset var(--dsx-motion-duration-normal, 250ms) var(--dsx-motion-easing-standard, ease);
+}
+
+.dsx-sidebar__menu-badge-ring-label {
+  margin-left: var(--dsx-space-0-5);
+  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, 600);
+  line-height: var(--dsx-typography-label-small-line-height);
+  letter-spacing: var(--dsx-typography-label-small-letter-spacing);
+  text-transform: var(--dsx-typography-label-small-text-transform);
+  text-decoration: var(--dsx-typography-label-small-text-decoration);
+  font-variant-numeric: tabular-nums;
+  color: var(--dsx-color-on-surface-variant);
+  white-space: nowrap;
+}
+
+.dsx-sidebar__menu-badge--accent {
+  min-width: 0;
+  min-height: 0;
+  /* Interim F6 alignment (2026-09-19): Badge geometry — full pill, Badge
+     block/inline padding, hairline border that matches the fill — so the
+     row value reads as a badge, not bare glowing text. The glow + pulse
+     stay as the accent identity; full MenuBadge→Badge absorption is owned
+     by the chip-taxonomy brief (docs/feature/design-system/chip-taxonomy). */
+  border: var(--dsx-border-width-sm) solid transparent;
+  border-radius: var(--dsx-rounded-full);
+  padding: var(--dsx-space-xs) var(--dsx-space-sm);
+  background: var(--dsx-color-accent-surface);
+  /* Outer halo: text-shadow glow alone is invisible on light themes
+     (light glow on a pale pill). A soft box-shadow halo reads on both. */
+  box-shadow: 0 0 var(--dsx-space-md) color-mix(in srgb, var(--dsx-color-accent-9) 35%, transparent);
+  color: var(--dsx-color-accent-indicator);
+  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);
+  line-height: var(--dsx-typography-label-small-line-height);
+  letter-spacing: var(--dsx-typography-label-small-letter-spacing);
+  font-variant-numeric: tabular-nums;
+  /* Strengthened 2026-09-19: the glow blended into the pill fill and read
+     as flat text. Wider radius + higher alpha so the halo separates from
+     the badge at any accent. */
+  text-shadow: 0 0 var(--dsx-space-md) color-mix(in srgb, var(--dsx-color-accent-9) 72%, transparent);
+  animation: dsx-sidebar-accent-pulse var(--dsx-motion-duration-shimmer) var(--dsx-motion-easing-in-out) infinite alternate;
+}
+
+@keyframes dsx-sidebar-accent-pulse {
+  from {
+    opacity: 0.82;
+    text-shadow: 0 0 var(--dsx-space-sm) color-mix(in srgb, var(--dsx-color-accent-9) 48%, transparent);
+  }
+
+  to {
+    opacity: 1;
+    text-shadow: 0 0 var(--dsx-space-lg) color-mix(in srgb, var(--dsx-color-accent-9) 85%, transparent);
+  }
+}
+
 .dsx-sidebar__menu-action {
   position: absolute;
   right: var(--dsx-space-xs);
@@ -233,6 +452,7 @@
   align-items: center;
   gap: var(--dsx-space-sm);
   width: 100%;
+  min-height: var(--dsx-size-xl);
   padding: var(--dsx-space-sm);
   background: transparent;
   border: none;
@@ -246,14 +466,28 @@
   cursor: pointer;
 }
 
+/* The menu row merges dsx-button, whose inline-flex + centered content would
+   shrink-wrap the row. Re-assert the full-width left-aligned row above it. */
+.dsx-sidebar__menu-button.dsx-button,
+.dsx-sidebar__menu-sub-button.dsx-button {
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+}
+
 .dsx-sidebar__menu-button:hover {
   background-color: var(--dsx-effect-hover-ghost);
 }
 
 .dsx-sidebar__menu-button[data-active='true'] {
-  background-color: var(--dsx-effect-hover-primary);
-  color: var(--dsx-color-primary);
-  box-shadow: inset 3px 0 0 0 var(--dsx-color-primary);
+  /* Sidebar-owned wash, one step deeper than the shared accent-surface
+     (40% tint): review 2026-09-19 found the shared tint too pale to carry
+     selection on light themes, worst on bright accents like spark — "plus
+     one", without going to a primary fill. Text stays accent-indicator. */
+  background: color-mix(in srgb, var(--dsx-color-accent-3) 50%, transparent);
+  color: var(--dsx-color-accent-indicator);
+  border: none;
+  box-shadow: var(--dsx-shadow-active-inset-outline);
 }
 
 .dsx-sidebar[data-state='collapsed'] .dsx-sidebar__menu-button {
@@ -261,11 +495,30 @@
   padding-inline: var(--dsx-space-xs);
 }
 
+/* Collapsed rail icons read slightly larger than expanded — `Icon` sets width/height as inline
+   SVG presentation attributes, but a CSS property on the same element still overrides those. */
+.dsx-sidebar[data-state='collapsed'] .dsx-sidebar__menu-button .dsx-icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* A secondary/trailing icon (e.g. Status row's external-link glyph) has nowhere to go in a 48px
+   icon-only column — confirmed live, it crammed next to the main icon. Matches the reference's
+   own pattern of hiding secondary/action elements when collapsed; the destination is still
+   reachable once expanded. */
+.dsx-sidebar[data-state='collapsed'] .dsx-sidebar__menu-button .dsx-icon:not(:first-child) {
+  display: none;
+}
+
 .dsx-sidebar[data-state='collapsed'] .dsx-sidebar__header {
   justify-content: center;
   padding-inline: var(--dsx-space-xs);
 }
 
+.dsx-sidebar[data-hover-expand='true'][data-state='collapsed'] .dsx-sidebar__trigger {
+  display: none;
+}
+
 .dsx-sidebar[data-state='collapsed'] .dsx-sidebar__header > :not(.dsx-sidebar__trigger):not([data-persistent='true']) {
   display: none;
 }
@@ -281,9 +534,21 @@
 .dsx-sidebar__menu-sub {
   list-style: none;
   margin: var(--dsx-space-xs) 0 0;
-  padding: 0 0 0 var(--dsx-space-lg);
+  /* Indent budget: parent label starts at button-padding + icon + gap.
+     ul carries all of it except the sub-button's own padding-left, so sub
+     text lands exactly under the parent label (measured live 2026-09-19:
+     label x=40, sub text was x=32 — an 8px "shift"). */
+  padding: 0 0 0 calc(var(--dsx-space-lg) + var(--dsx-space-sm));
   display: grid;
   gap: var(--dsx-space-xs);
+  flex-basis: 100%;
+}
+
+/* A submenu shares its MenuItem row with the parent button. Without wrapping,
+   the row's flex layout parks the submenu beside the button instead of below
+   it. :where() keeps this structural rule at zero specificity. */
+:where(.dsx-sidebar__menu-item:has(> .dsx-sidebar__menu-sub)) {
+  flex-wrap: wrap;
 }
 
 .dsx-sidebar[data-state='collapsed'] .dsx-sidebar__menu-sub {
@@ -314,8 +579,67 @@
 }
 
 .dsx-sidebar__menu-sub-button[data-active='true'] {
-  background-color: var(--dsx-effect-hover-primary);
-  color: var(--dsx-color-primary);
+  background: color-mix(in srgb, var(--dsx-color-accent-3) 50%, transparent);
+  color: var(--dsx-color-accent-indicator);
+  border: none;
+  box-shadow: var(--dsx-shadow-active-inset-outline);
+}
+
+/* MenuSubTrigger shares the MenuButton row geometry (full-width flex-start)
+   so a parent with children aligns with plain rows. The chevron parks at the
+   row end and rotates 90° on open — same convention as the dropdown sub
+   chevron and shadcn's collapsible sidebar. */
+.dsx-sidebar__menu-sub-trigger.dsx-button {
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--dsx-space-sm);
+}
+
+.dsx-sidebar__menu-sub-trigger:hover {
+  background-color: var(--dsx-effect-hover-ghost);
+}
+
+/* Open-but-not-active parent: quiet shared tint so it doesn't read
+   "deviant" next to chosen rows, without claiming selection (no underline).
+   0,2,0 placed before the active rule, which wins ties by order. */
+.dsx-sidebar__menu-sub-trigger[data-state='open'] {
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-on-surface);
+  border: none;
+}
+
+.dsx-sidebar__menu-sub-trigger[data-active='true'] {
+  background: color-mix(in srgb, var(--dsx-color-accent-3) 50%, transparent);
+  color: var(--dsx-color-accent-indicator);
+  border: none;
+  box-shadow: var(--dsx-shadow-active-inset-outline);
+}
+
+.dsx-sidebar__menu-sub-trigger-chevron {
+  margin-inline-start: auto;
+  flex-shrink: 0;
+  transition: transform var(--dsx-motion-duration-fast) var(--dsx-motion-easing-in-out);
+}
+
+:where(.dsx-sidebar__menu-sub-trigger[data-state='open']) > .dsx-sidebar__menu-sub-trigger-chevron {
+  transform: rotate(90deg);
+}
+
+.dsx-sidebar[data-state='collapsed'] .dsx-sidebar__menu-sub-trigger {
+  justify-content: center;
+  padding-inline: var(--dsx-space-xs);
+}
+
+.dsx-sidebar[data-state='collapsed'] .dsx-sidebar__menu-sub-trigger .dsx-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.dsx-sidebar[data-state='collapsed'] .dsx-sidebar__menu-sub-trigger-chevron,
+.dsx-sidebar[data-state='collapsed'] .dsx-sidebar__menu-sub-trigger .dsx-sidebar__menu-button-text {
+  display: none;
 }
 
 .dsx-sidebar[data-state='collapsed'] .dsx-sidebar__menu-sub-button {
@@ -348,7 +672,29 @@
 }
 
 .dsx-sidebar__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
+  width: var(--dsx-size-lg);
+  height: var(--dsx-size-lg);
+  min-height: var(--dsx-size-lg);
+  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);
+}
+
+.dsx-sidebar__trigger:hover {
+  background: var(--dsx-effect-hover-ghost);
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-sidebar__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
 }
 
 .dsx-sidebar[data-state='collapsed'] .dsx-sidebar__group-label,
@@ -359,22 +705,10 @@
   display: none;
 }
 
-/* Collapsed badge: show as a small dot indicator */
+/* Compact rail keeps one stable icon column. Values are available to assistive technology but
+   stay visually hidden until the panel has enough room to render them without overlap. */
 .dsx-sidebar[data-state='collapsed'] .dsx-sidebar__menu-badge {
-  position: absolute;
-  right: 6px;
-  top: 6px;
-  transform: none;
-  min-width: 0;
-  width: var(--dsx-space-sm);
-  height: var(--dsx-space-sm);
-  padding: 0;
-  border-radius: var(--dsx-rounded-full);
-  font-size: 0;
-  line-height: 1;
-  overflow: hidden;
-  text-indent: -9999px;
-  white-space: nowrap;
+  display: none;
 }
 
 .dsx-sidebar__separator {
@@ -383,30 +717,48 @@
   margin-inline: var(--dsx-space-sm);
 }
 
+/* Confirmed real bug live: this only ever set layout properties, never reset the native button
+   chrome, so it rendered as the raw browser-default button (2px outset border, #efefef
+   background) on every mobile viewport — not a design choice, just missing CSS that had never
+   actually been looked at closely enough to notice. */
 .dsx-sidebar__mobile-trigger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: var(--dsx-size-lg);
   height: var(--dsx-size-lg);
+  border: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
+  border-radius: var(--dsx-rounded-sm);
+  /* Solid tile: the trigger floats absolute over arbitrary page content
+     (in the cabinet it overlaps the brand mark) — transparent bg reads as
+     a broken overlap, a tile reads as a floating button. */
+  background: var(--dsx-color-surface);
+  color: var(--dsx-color-on-surface);
+  cursor: pointer;
+  position: absolute;
+  inset-block-start: var(--dsx-space-md);
+  inset-inline-start: var(--dsx-space-md);
+  z-index: var(--dsx-z-index-sticky);
 }
 
-.dsx-sidebar__content-viewport {
-  height: 100%;
+.dsx-sidebar__mobile-trigger:hover {
+  background: var(--dsx-effect-hover-ghost);
 }
 
-.dsx-sidebar[data-state='collapsed'] ~ .dsx-sidebar__inset {
-  margin-left: var(--dsx-space-xs);
+.dsx-sidebar__mobile-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
 }
 
-[data-dsx-theme='light'] .dsx-sidebar {
-  border-color: var(--dsx-color-outline-variant);
+.dsx-sidebar__content-viewport {
+  height: 100%;
 }
 
 .dsx-sidebar-menu-button-active {
-  background-color: var(--dsx-effect-hover-primary);
-  color: var(--dsx-color-primary);
-  box-shadow: inset 3px 0 0 0 var(--dsx-color-primary);
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-accent-indicator);
+  border: none;
+  box-shadow: var(--dsx-shadow-active-inset-outline);
 }
 
 /* Skip link — visually hidden until focused */
@@ -435,14 +787,14 @@
 
 /* Icon mode uses a narrower collapsed width for icon-only rail */
 .dsx-sidebar[data-collapsible='icon'][data-state='collapsed'] {
-  width: var(--dsx-size-2xl, 48px);
+  width: var(--dsx-sidebar-width-collapsed);
 }
 
 /* ===== Collapsible mode: none ===== */
 
 /* 'none' mode: sidebar always at full expanded width, never collapses */
 .dsx-sidebar[data-collapsible='none'] {
-  width: var(--dsx-sidebar-width, 256px);
+  width: var(--dsx-sidebar-width);
 }
 
 /* Hide rail and trigger in 'none' mode (TSX safety net) */
@@ -459,9 +811,14 @@
 
 @media (prefers-reduced-motion: reduce) {
   .dsx-sidebar,
+  .dsx-sidebar-provider:where([data-hover-expand='true'][data-pinned-state='expanded']) .dsx-sidebar,
   .dsx-sidebar__recovery-rail,
   .dsx-sidebar__menu-action,
   .dsx-sidebar__skip-link {
     transition: none;
   }
+
+  .dsx-sidebar__menu-badge--accent {
+    animation: none;
+  }
 }

package/dist/components/skeleton/Skeleton.cjs

@@ -45,7 +45,7 @@ const Skeleton = React.forwardRef((props, forwardedRef) => {
     {
       ...skeletonProps,
       ref: forwardedRef,
-      className: (0, import_classnames.default)("dsx-skeleton", `dsx-skeleton--${shape}`, className),
+      className: (0, import_classnames.default)("dsx-skeleton", className),
       "data-shape": shape,
       children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children }) : children
     }

package/dist/components/skeleton/Skeleton.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/skeleton/Skeleton.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { skeletonPropDefs } from './skeleton.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype SkeletonElement = React.ComponentRef<'div'>\ntype SkeletonOwnProps = GetPropDefTypes<typeof skeletonPropDefs>\n\ninterface SkeletonProps extends React.ComponentPropsWithoutRef<'div'>, SkeletonOwnProps {}\n\nconst Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {\n  const { asChild, children, className, shape = 'rectangle', ...skeletonProps } = extractProps(props, skeletonPropDefs)\n\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      {...skeletonProps}\n      ref={forwardedRef}\n      className={classNames('dsx-skeleton', `dsx-skeleton--${shape}`, className)}\n      data-shape={shape}\n    >\n      {asChild ? <Slottable>{children}</Slottable> : children}\n    </Comp>\n  )\n})\nSkeleton.displayName = 'Skeleton'\n\nexport { Skeleton }\nexport type { SkeletonElement, SkeletonOwnProps, SkeletonProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAgC;AAEhC,0BAA6B;AAC7B,sBAAiC;AAqBhB;AAZjB,MAAM,WAAW,MAAM,WAA2C,CAAC,OAAO,iBAAiB;AACzF,QAAM,EAAE,SAAS,UAAU,WAAW,QAAQ,aAAa,GAAG,cAAc,QAAI,kCAAa,OAAO,gCAAgB;AAEpH,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,gBAAgB,iBAAiB,KAAK,IAAI,SAAS;AAAA,MACzE,cAAY;AAAA,MAEX,oBAAU,4CAAC,+BAAW,UAAS,IAAe;AAAA;AAAA,EACjD;AAEJ,CAAC;AACD,SAAS,cAAc;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { skeletonPropDefs } from './skeleton.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype SkeletonElement = React.ComponentRef<'div'>\ntype SkeletonOwnProps = GetPropDefTypes<typeof skeletonPropDefs>\n\ninterface SkeletonProps extends React.ComponentPropsWithoutRef<'div'>, SkeletonOwnProps {}\n\nconst Skeleton = React.forwardRef<SkeletonElement, SkeletonProps>((props, forwardedRef) => {\n  const { asChild, children, className, shape = 'rectangle', ...skeletonProps } = extractProps(props, skeletonPropDefs)\n\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      {...skeletonProps}\n      ref={forwardedRef}\n      className={classNames('dsx-skeleton', className)}\n      data-shape={shape}\n    >\n      {asChild ? <Slottable>{children}</Slottable> : children}\n    </Comp>\n  )\n})\nSkeleton.displayName = 'Skeleton'\n\nexport { Skeleton }\nexport type { SkeletonElement, SkeletonOwnProps, SkeletonProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAgC;AAEhC,0BAA6B;AAC7B,sBAAiC;AAqBhB;AAZjB,MAAM,WAAW,MAAM,WAA2C,CAAC,OAAO,iBAAiB;AACzF,QAAM,EAAE,SAAS,UAAU,WAAW,QAAQ,aAAa,GAAG,cAAc,QAAI,kCAAa,OAAO,gCAAgB;AAEpH,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,gBAAgB,SAAS;AAAA,MAC/C,cAAY;AAAA,MAEX,oBAAU,4CAAC,+BAAW,UAAS,IAAe;AAAA;AAAA,EACjD;AAEJ,CAAC;AACD,SAAS,cAAc;",
   "names": ["classNames"]
 }

package/dist/components/skeleton/Skeleton.js

@@ -12,7 +12,7 @@ const Skeleton = React.forwardRef((props, forwardedRef) => {
     {
       ...skeletonProps,
       ref: forwardedRef,
-      className: classNames("dsx-skeleton", `dsx-skeleton--${shape}`, className),
+      className: classNames("dsx-skeleton", className),
       "data-shape": shape,
       children: asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : children
     }