@d4gger/design-system 4.0.0 → 4.0.1

package/dist/styles.css

@@ -302,6 +302,7 @@ svg {
   --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 16%, transparent);
   --dsx-effect-hover-secondary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 3%, transparent);
   --dsx-effect-hover-ghost: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
+  --dsx-effect-ambient-strength: 10%;
   --dsx-sheet-min-height: 80vh;
   --dsx-sheet-width: 380px;
   --dsx-sheet-width-sm: 320px;
@@ -804,6 +805,7 @@ svg {
   --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 12%, transparent);
   --dsx-effect-hover-secondary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 3%, transparent);
   --dsx-effect-hover-ghost: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
+  --dsx-effect-ambient-strength: 16%;
   --dsx-_accent-rift-primary: var(--dsx-color-accent-rift-9);
   --dsx-_accent-rift-primary-container: var(--dsx-color-accent-rift-4);
   --dsx-_accent-rift-on-primary: #ffffff;
@@ -2705,6 +2707,15 @@ textarea {
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
 }
 
+/* labels="none": icon-only items share the width. The label stays in the accessible name; the active
+   item is carried by its container fill and aria-current. For widths where five labels do not fit. */
+
+.dsx-bottom-dock:where([data-labels='none']) .dsx-bottom-dock__item {
+  flex: 1 1 0;
+  gap: 0;
+  padding: 0;
+}
+
 .dsx-bottom-dock__icon {
   position: relative;
   display: inline-flex;
@@ -3475,8 +3486,10 @@ textarea {
     inset 0 0 0 1px var(--dsx-effect-panel-glass-rim),
     var(--dsx-shadow-panel-shadow);
   border-color: var(--dsx-effect-panel-glass-border);
-  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+  /* Prefixed first, standard last: Next/Turbopack drops the standard line when it comes first and
+     the prefixed one second (Chromium does not alias the prefix), which left glass with no blur. */
   -webkit-backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
 }
 
 [data-dsx-theme='light'] .dsx-card[data-variant='glass']:where(:not([data-active='true'], [data-selected='true'], [aria-selected='true'], [data-state='active'], [data-state='selected'], [data-high-contrast='true'])) {
@@ -3569,8 +3582,8 @@ textarea {
 .dsx-card.dsx-card--outline {
   background: transparent;
   box-shadow: none;
-  backdrop-filter: var(--dsx-effect-panel-solid-backdrop-filter);
   -webkit-backdrop-filter: var(--dsx-effect-panel-solid-backdrop-filter);
+  backdrop-filter: var(--dsx-effect-panel-solid-backdrop-filter);
 }
 
 .dsx-card__header {
@@ -5112,6 +5125,82 @@ textarea {
   color: var(--dsx-color-tertiary);
 }
 
+/* EnvironmentRibbon — a floating warning pill for a non-production environment, with a warm haze behind the top edge.
+   Tokens only. No breakpoints, no motion: the app renders it only off production, and the frame reserves the row it takes on a phone. */
+
+.dsx-environment-ribbon {
+  position: fixed;
+  inset-block-start: var(--dsx-space-sm);
+  inset-inline: var(--dsx-space-3);
+  z-index: var(--dsx-z-index-fixed);
+  box-sizing: border-box;
+  /* Centred between the two insets with logical properties, so it holds in right-to-left. `fit-content` alone does not cap the width:
+     with `white-space: nowrap` the min-content width equals the max-content width, so the pill would refuse to shrink and spill past
+     the gutter (browser proof, 320px frame). The cap is the containing block less the two gutters, so a long label truncates. */
+  inline-size: fit-content;
+  max-inline-size: calc(100% - 2 * var(--dsx-space-3));
+  margin-inline: auto;
+  min-block-size: var(--dsx-size-md);
+  padding-block: var(--dsx-space-xs);
+  padding-inline: var(--dsx-space-sm);
+  /* The Badge warning recipe (container tint + on-container ink), the look passed in the vision, with a hairline warning edge: it keeps
+     the pill's outline over the haze and under forced colors, where fills are dropped. */
+  border: var(--dsx-border-width-sm) solid var(--dsx-color-warning);
+  border-radius: var(--dsx-rounded-full);
+  background: var(--dsx-color-warning-container);
+  color: var(--dsx-color-on-warning-container);
+  box-shadow: var(--dsx-panel-shadow);
+  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);
+  text-transform: var(--dsx-typography-label-small-text-transform);
+  text-decoration: var(--dsx-typography-label-small-text-decoration);
+  text-align: center;
+  /* One short label, one line: a label wider than the room truncates instead of wrapping the pill into a block. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* A status label never blocks what is under it. */
+  pointer-events: none;
+}
+
+.dsx-environment-ribbon:where([data-placement='contained']) {
+  position: absolute;
+}
+
+/* The haze: a warm radial wash anchored at the top centre, painted behind the chrome. z-index -1 puts it over the background of an
+   isolated ancestor (`isolation: isolate`, as `.dsx-brand-ambient` is) and under in-flow content and glass panels, so a panel's blur
+   softens it and its text never sits under a warm veil. The strength is a multiple of the theme-aware accent-haze strength, so light,
+   whose strength is raised, keeps the same proportions as dark (the multiple is written inline, as Sidebar's ambient wash does: a local
+   `--dsx-*` custom property in a component stylesheet is flagged by qa:tokens as a token that does not exist). */
+
+.dsx-environment-ribbon__haze {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image: radial-gradient(
+    ellipse 40rem 15rem at 50% -3.75rem,
+    color-mix(in srgb, var(--dsx-color-warning) calc(var(--dsx-effect-ambient-strength) * 3.2), transparent),
+    transparent 72%
+  );
+  background-repeat: no-repeat;
+}
+
+.dsx-environment-ribbon__haze:where([data-placement='contained']) {
+  position: absolute;
+}
+
+/* Forced colors replaces fills and keeps borders; the haze is decoration and has nothing to say there. */
+
+@media (forced-colors: active) {
+  .dsx-environment-ribbon__haze {
+    display: none;
+  }
+}
+
 .dsx-editable {
   position: relative;
   display: inline-flex;
@@ -8430,8 +8519,8 @@ textarea {
 }
 
 .dsx-dialog__backdrop[data-blur='true'] {
-  backdrop-filter: blur(var(--dsx-blur-md, 8px));
   -webkit-backdrop-filter: blur(var(--dsx-blur-md, 8px));
+  backdrop-filter: blur(var(--dsx-blur-md, 8px));
 }
 
 /* Layout-hint element only — position state is driven by data-position */
@@ -8686,21 +8775,49 @@ textarea {
 
 .dsx-alert__icon { flex-shrink: 0; }
 
-.dsx-alert__action {
-  align-self: center;
-  justify-content: flex-start;
+/* The icon is one column; the text and the actions are the other. Only this column wraps, so actions that drop below the text
+   start under the text and not under the icon (G-15, 2026-10-05). The gap is the alert's own, per size. */
+
+.dsx-alert__main {
+  display: flex;
+  flex: 1 1 0;
   flex-wrap: wrap;
-  gap: var(--dsx-space-sm);
+  align-items: flex-start;
+  gap: inherit;
+  min-width: 0;
 }
 
+/* The basis is the width the text needs to read before the actions wrap below it; min() keeps it from overflowing a column
+   narrower than that. */
+
 .dsx-alert__content {
   display: grid;
   gap: var(--dsx-space-xs);
-  flex: 1;
+  flex: 1 1 min(calc(var(--dsx-size-xl) * 5), 100%);
   min-width: 0;
   overflow-wrap: anywhere;
 }
 
+/* The direct-child Alert.Actions are one group. The content grows to push the group to the end of the row, and when the text
+   would drop under its readable width the group wraps below it as a whole, at the start of the column. It has no auto margin:
+   that would push a wrapped group to the far edge. Its own buttons wrap inside it when even the group is too wide. */
+
+.dsx-alert__actions {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--dsx-space-sm);
+  max-width: 100%;
+}
+
+.dsx-alert__action {
+  align-self: flex-start;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-sm);
+}
+
 .dsx-alert[data-variant='warning'] { border-color: var(--dsx-color-warning); }
 
 .dsx-alert[data-variant='success'] { border-color: var(--dsx-color-success); }
@@ -8750,6 +8867,42 @@ textarea {
   min-height: var(--dsx-size-lg);
 }
 
+/* With a trailing action, the icon, the first line of text and the action share one centre at any width: all
+   three get a control-height row, and the first line's box is that tall (`::first-line`). Alerts without an
+   action are untouched. Kept last so it wins over the size rules above. */
+
+:where(.dsx-alert:has(> .dsx-alert__main > .dsx-alert__actions)) :is(.dsx-alert__icon, .dsx-alert__action) {
+  min-height: var(--dsx-size-lg);
+}
+
+:where(.dsx-alert:has(> .dsx-alert__main > .dsx-alert__actions)) .dsx-alert__content > :where(:first-child)::first-line {
+  line-height: var(--dsx-size-lg);
+}
+
+/* `lineClamp` on Alert.Description: the text stops after that many lines with an ellipsis. */
+
+.dsx-alert__description[data-line-clamp] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--dsx-alert-line-clamp);
+  overflow: hidden;
+}
+
+/* Whether `::first-line` reaches into a clamped description depends on the engine (Chromium draws it as a block
+   container, WebKit and Gecko as a legacy flexbox), so the control-height first line above is switched off for it and
+   the same centring is done with padding in every engine: the first line sits on the middle of the control row (`lh`
+   is the element's own line height). */
+
+:where(.dsx-alert:has(> .dsx-alert__main > .dsx-alert__actions)) .dsx-alert__description[data-line-clamp] {
+  padding-block-start: calc((var(--dsx-size-lg) - 1lh) / 2);
+}
+
+/* Same specificity as the first-line rule it switches off (0,1,1), so source order decides: this one comes last. */
+
+:where(.dsx-alert:has(> .dsx-alert__main > .dsx-alert__actions)) .dsx-alert__description:where([data-line-clamp])::first-line {
+  line-height: inherit;
+}
+
 .dsx-combobox__trigger {
   display: flex;
   align-items: center;
@@ -9765,6 +9918,10 @@ textarea {
 .dsx-field,
 .dsx-fieldset {
   display: grid;
+  /* One column that fills the container and never asks for more: an implicit `auto` track is sized from its items' min-content,
+     and a control's min-content is its intrinsic width, so a password input widened the column past a narrow card (G-22). The
+     horizontal and responsive orientations below set their own templates. */
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--dsx-space-xs);
   width: 100%;
   min-width: 0;
@@ -9831,6 +9988,7 @@ textarea {
 .dsx-field__content,
 .dsx-field-group {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--dsx-space-xs);
 }
 
@@ -10934,6 +11092,28 @@ textarea {
   flex-shrink: 0;
 }
 
+/* variant="floating": a glass bar that sits inside the page with its own edge, the header of the
+   floating shells (direction C). Same glass recipe as `Card variant="glass"`, except the outer shadow.
+   The page decides whether it sticks. Prefixed backdrop-filter first, standard last (see baseCard.css).
+
+   The shadow falls below the bar only (offset = -spread, so it starts at the bar's bottom edge). The bar sits
+   flush at the edge of a scroll container (`Sidebar.Inset`, overflow: auto), which clips anything painted past
+   its left, right and top edges: a full-ring shadow ended in a vertical cut at the bar's side, visible in the
+   light theme (G-21). Offset, blur and the strong card shadow colour are the existing tokens; at the bar's edge
+   this reads as the old shadow does (measured in the batch's verification.md). */
+
+.dsx-page-header:where([data-variant='floating']) {
+  border: var(--dsx-border-width-sm) solid var(--dsx-effect-panel-glass-border);
+  border-radius: var(--dsx-rounded-lg);
+  background: var(--dsx-color-panel-translucent);
+  box-shadow:
+    inset 0 1px 0 0 var(--dsx-effect-panel-glass-rim-highlight),
+    inset 0 0 0 1px var(--dsx-effect-panel-glass-rim),
+    0 var(--dsx-shadow-offset-lg) var(--dsx-shadow-blur-md) calc(-1 * var(--dsx-shadow-offset-lg)) var(--dsx-effect-shadow-card-strong);
+  -webkit-backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+}
+
 .dsx-page-header__title {
   margin: 0;
   font-family: var(--dsx-typography-headline-medium-font-family);
@@ -11772,12 +11952,23 @@ textarea {
 .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;
 }
 
@@ -11921,8 +12112,15 @@ textarea {
   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
@@ -11958,7 +12156,7 @@ textarea {
 .dsx-sidebar__mobile-sheet > .dsx-sidebar {
   position: relative;
   width: 100%;
-  height: 100dvh;
+  height: 100%;
   box-shadow: none;
 }
 
@@ -11983,6 +12181,7 @@ textarea {
 
 .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);
@@ -12180,7 +12379,12 @@ textarea {
   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);
@@ -12357,6 +12561,18 @@ textarea {
   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;
@@ -12404,6 +12620,14 @@ textarea {
   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;
@@ -12411,6 +12635,12 @@ textarea {
   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;
@@ -12422,14 +12652,14 @@ textarea {
   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 {
@@ -17821,15 +18051,25 @@ span.dsx-filter-bar__condition-label {
   border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
 }
 
+/* G-20 (2026-10-05): the trigger is an ordinary icon button (size sm, 32px, like every other header icon) and the count hangs
+   on its corner, so the hover highlight covers the bell only. It used to be laid out inside the button, which made the
+   button a 59x44 pill that wrapped the count and was the one header control with a different shape (the maintainer: "I feel
+   like no one does it"). The count hangs about 17px past the trailing edge; the margin reserves that room whatever gap the
+   host uses, and it is always reserved so the controls after the bell do not move when a count appears. */
+
 .dsx-notification-center__trigger.dsx-icon-button {
   position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 0;
-  width: auto;
-  min-width: calc(var(--dsx-size-xl) + var(--dsx-space-xs));
-  height: calc(var(--dsx-size-xl) + var(--dsx-space-xs));
-  padding-inline: var(--dsx-space-sm);
+  margin-inline-end: var(--dsx-space-md);
+}
+
+/* The highlight is 32px but the hit area stays 44px (size-xl + space-xs, the floor the earlier bell contract set): this
+   pseudo-element is part of the button for pointer events, and its inset shrinks to nothing on a larger size. The selector
+   stays at (0,1,1): the policy allows (0,2,0) in this file and `.dsx-icon-button` has no pseudo-element rules to outrank. */
+
+.dsx-notification-center__trigger::after {
+  content: '';
+  position: absolute;
+  inset: calc((100% - (var(--dsx-size-xl) + var(--dsx-space-xs))) / 2);
 }
 
 .dsx-notification-center__trigger .dsx-icon-button__content {
@@ -17837,9 +18077,9 @@ span.dsx-filter-bar__condition-label {
 }
 
 .dsx-notification-center__badge {
-  position: relative;
+  position: absolute;
   top: calc(-1 * var(--dsx-space-sm));
-  margin-inline-start: calc(-1 * var(--dsx-space-xs));
+  inset-inline-start: calc(50% + var(--dsx-space-xs));
   flex-shrink: 0;
   min-width: var(--dsx-size-sm);
   height: var(--dsx-size-sm);

package/dist/tokens.css

@@ -212,6 +212,7 @@
   --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 16%, transparent);
   --dsx-effect-hover-secondary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 3%, transparent);
   --dsx-effect-hover-ghost: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
+  --dsx-effect-ambient-strength: 10%;
   --dsx-sheet-min-height: 80vh;
   --dsx-sheet-width: 380px;
   --dsx-sheet-width-sm: 320px;
@@ -714,6 +715,7 @@
   --dsx-effect-pressed-primary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 12%, transparent);
   --dsx-effect-hover-secondary: color-mix(in srgb, var(--dsx-color-accent-rift-9) 3%, transparent);
   --dsx-effect-hover-ghost: color-mix(in srgb, var(--dsx-color-accent-rift-9) 6%, transparent);
+  --dsx-effect-ambient-strength: 16%;
   --dsx-_accent-rift-primary: var(--dsx-color-accent-rift-9);
   --dsx-_accent-rift-primary-container: var(--dsx-color-accent-rift-4);
   --dsx-_accent-rift-on-primary: #ffffff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d4gger/design-system",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Publishable design-system package for D4gger foundations, icons, primitives, and components.",
   "keywords": [
     "d4gger",