@apliteni/apliteni-ui 0.31.0 → 0.32.0

package/src/styles/segmented.css

@@ -30,8 +30,7 @@
 .ui-seg button[aria-pressed="true"],
 .ui-seg button[aria-selected="true"] {
   color: var(--strong);
-  background: var(--seg-active-bg);
-  box-shadow: var(--shadow-seg);
+  background: var(--seg-active-bg);   /* the step is the lift; nothing casts. #295 */
 }
 
 .ui-seg--sm button { padding: 5px 13px; font-size: 12px; }

package/src/styles/stat.css

@@ -0,0 +1,121 @@
+/* ============================================================================
+ * Stat band — .ui-stats  (a row of key figures: label, value, change, trend)
+ *   .ui-stats--tiles  one card per figure — the default
+ *   .ui-stats--band   one card, figures divided by space
+ *   .ui-stats--open   no surface; a rule over each figure
+ * why: docs/specification.md#stat-bands
+ * ========================================================================== */
+
+/* The band lays out from the width of its own box, not the window's: a band in
+   a column beside a rail and a band across a full page are different widths at
+   the same viewport. */
+.ui-stats { container-type: inline-size; }
+
+/* Equal columns while the figures fit. A figure is never narrower than its
+   widest unbreakable piece — the value — so a band too narrow for its figures
+   wraps a figure onto the next row rather than letting it overlap the next. */
+.ui-stats__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-6) var(--space-10);
+  margin: 0;
+}
+
+.ui-stat { display: flex; flex-direction: column; flex: 1 1 0; min-width: min-content; }
+
+/* Takes the label rank's size and weight, but not its inherited leading: a
+   figure's parts are held close, so the label keeps the band's tighter line.
+   It sits outside the rank table for that one reason, and claims no rank. */
+.ui-stat__label {
+  color: var(--dim);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-snug);
+}
+
+/* A figure is never broken across lines and never truncated: `€` stays with its
+   digits and every digit stays on screen. The band stacks before a figure
+   would have to do either. */
+.ui-stat__value {
+  margin-top: var(--space-2);
+  color: var(--strong);
+  /* display: readout — a key figure is read as a number at a glance, not as a line of prose */
+  font-family: var(--font-display);
+  font-size: var(--text-2xl);
+  font-weight: var(--weight-semibold);
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.ui-stat__delta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px var(--space-1);
+  margin-top: var(--space-2);
+  color: var(--dim);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: var(--leading-snug);
+}
+.ui-stat__delta svg { width: 14px; height: 14px; flex: none; stroke-width: 2.7; } /* 2.7 of a 24 box drawn at 14px = 1.58 CSS px. docs/specification.md#icons-and-glyphs */
+.ui-stat__change { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ui-stat__basis { color: var(--muted); font-weight: var(--weight-normal); }
+.ui-stat__delta--none { color: var(--muted); font-weight: var(--weight-normal); }
+
+/* Tone is set by the caller and says good or bad news. Direction is the arrow's
+   job, so an unset tone keeps the change neutral whichever way it points. */
+.ui-stat--good .ui-stat__delta { color: var(--chip-success-ink); }
+.ui-stat--bad .ui-stat__delta { color: var(--chip-danger-ink); }
+
+/* The trend is the caller's <svg>. margin-top: auto seats it on the bottom of
+   the figure, so trends line up across figures whose text wraps differently. */
+.ui-stat__trend { margin-top: auto; padding-top: var(--space-4); color: var(--muted); }
+.ui-stat__trend svg { display: block; width: 100%; height: 32px; overflow: visible; }
+.ui-stat--good .ui-stat__trend { color: var(--chip-success-ink); }
+.ui-stat--bad .ui-stat__trend { color: var(--chip-danger-ink); }
+
+/* The band's caption, above the figures rather than in one: it is what every
+   change points at, so it sits outside the ranks and takes none of them. The
+   margin is under it because it leads the row. */
+.ui-stats__basis {
+  margin: 0 0 var(--space-5);
+  color: var(--muted);
+  font-size: var(--text-xs);
+  line-height: var(--leading-snug);
+}
+
+.ui-stats--tiles .ui-stats__list { gap: var(--space-4); }
+
+.ui-stats--open .ui-stat {
+  border-top: 1px solid var(--border-strong);
+  padding-top: var(--space-4);
+}
+.ui-stats--open .ui-stat__value { font-size: var(--text-3xl); }
+
+/* Wrapping alone would leave three figures on one row and one on the next. So
+   before a row of figures runs out of room, four fold two by two and an odd
+   count stacks. The widths are where four and three tiles of `€ 6,459,401`
+   stop fitting, and the open band's larger value moves them out; a longer
+   figure still wraps rather than overlaps.
+   why: docs/specification.md#stat-bands */
+@container (28rem < width <= 56rem) {
+  .ui-stats:not(.ui-stats--open) .ui-stats__list:has(> .ui-stat:nth-child(4):last-child) > .ui-stat { flex-basis: 34%; }
+}
+@container (width <= 42rem) {
+  .ui-stats__list:has(> .ui-stat:last-child:nth-child(odd)) > .ui-stat { flex-basis: 100%; }
+}
+@container (width <= 28rem) {
+  .ui-stats__list > .ui-stat { flex-basis: 100%; }
+}
+@container (32rem < width <= 66rem) {
+  .ui-stats--open .ui-stats__list:has(> .ui-stat:nth-child(4):last-child) > .ui-stat { flex-basis: 34%; }
+}
+@container (width <= 50rem) {
+  .ui-stats--open .ui-stats__list:has(> .ui-stat:last-child:nth-child(odd)) > .ui-stat { flex-basis: 100%; }
+}
+@container (width <= 32rem) {
+  .ui-stats--open .ui-stats__list > .ui-stat { flex-basis: 100%; }
+}

package/src/styles/success.css

@@ -19,8 +19,8 @@
   position: relative;
   overflow: hidden;
   border-radius: 20px;
-  background: var(--bg-elevated);
-  box-shadow: var(--shadow-md);
+  background: var(--bg-elevated);   /* the floating step carries it. #295 */
+  border: 1px solid var(--border);
   isolation: isolate;
 }
 

package/src/styles/tooltip.css

@@ -28,7 +28,6 @@
   background: var(--ui-tip-bg);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
-  box-shadow: var(--shadow-md);
   font-family: var(--font-sans);
   font-size: var(--text-xs);
   line-height: 1.45;
@@ -45,9 +44,9 @@
     visibility var(--dur-fast) linear;
 }
 
-/* Light is an all-white app, so the raised surface is white over a hairline,
-   the way a light card is. */
-:root[data-theme="light"] .ui-tip { --ui-tip-bg: var(--surface); }
+/* No light override: it re-pointed the readout at --surface, which #295 made the card
+   step, so a readout over a card was painted the card's own colour. --surface-3 is the
+   readout's step in both themes. why: docs/specification.md#elevation */
 
 /* Below the mark: the wiring's flip when above would be clipped, or the
    author's own choice. */

package/src/styles/topbar.css

@@ -66,7 +66,7 @@
   transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
 }
 .dtsw a:hover { color: var(--text); }
-.dtsw a.cur { color: var(--strong); background: var(--surface); box-shadow: var(--shadow-sm); }
+.dtsw a.cur { color: var(--strong); background: var(--surface); }
 
 /* Theme toggle — a single icon-only switch (no label). */
 .toggle {
@@ -122,11 +122,10 @@
   top: calc(100% + 9px);
   left: 0;
   min-width: 266px;
-  background: var(--surface-2);
+  background: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
   border: 1px solid var(--border);
   border-radius: 16px;
   padding: 6px;
-  box-shadow: var(--shadow-lg);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px);
@@ -160,7 +159,9 @@
   font: inherit;
   transition: background var(--dur-fast) var(--ease);
 }
-.vopt:hover { background: var(--surface); }
+/* The menu is raised, so a hovered row takes the step ABOVE it — see
+   src/styles/dropdown.css:130. why: docs/specification.md#elevation */
+.vopt:hover { background: var(--surface-3); }
 .vopt .vname { font-family: var(--font-sans); font-size: 12.5px; color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
 .vopt .vmeta { font-size: 11px; color: var(--muted); margin-top: 2px; }
 .vopt .vbadge {
@@ -174,7 +175,7 @@
   margin-top: 1px;
 }
 .vbadge.live { color: var(--chip-success-ink); background: var(--chip-success-fill); }
-.vbadge.arch { color: var(--muted); background: var(--surface); }
+.vbadge.arch { color: var(--muted); background: var(--surface-3); }
 /* The switcher keeps its glyph and drops its label where the shell folds — the
    same step the rail folds at: docs/specification.md#breakpoints. */
 @media (max-width: 720px) { .vsw__btn .lbl { display: none; } }
@@ -203,10 +204,9 @@
   position: absolute;
   right: 0; top: 44px;
   width: 252px;
-  background: var(--surface-2);
+  background: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
   border: 1px solid var(--border);
   border-radius: 14px;
-  box-shadow: var(--shadow-lg);
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
@@ -225,7 +225,7 @@
 .amenu .ahead .anm { color: var(--strong); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .amenu .ahead .aem { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .amenu a { display: flex; align-items: center; gap: 11px; padding: 10px 15px; color: var(--text); text-decoration: none; font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
-.amenu a:hover { background: var(--surface); }
+.amenu a:hover { background: var(--surface-3); }
 .amenu a.cur { color: var(--accent); }
 .amenu a svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; opacity: 0.85; }
 .amenu .asep { height: 1px; background: var(--border); margin: 5px 0; }

package/src/tokens/accents.css

@@ -77,9 +77,9 @@
   --purple-light: #1568d6;
   --purple-mid: #1560c8;
   /* Deepened for WCAG AA on the raised grey panel and its wash — hue and chroma held
-     in OKLCH (H 258, C 0.185), four points of lightness down. The washed figures are
-     read at the 0.10 alpha below, which is what this cell ships. See issues #96, #157. */
-  --accent: #005bc8;
+     in OKLCH (H 258, C 0.185), read at the 0.10 alpha below. Down a second step at
+     #295, which took the light page off white. See issues #96, #157, #295. */
+  --accent: #005ab4;
   --accent-strong: var(--accent);
   --accent-contrast: #ffffff;
   /* Back to the 0.10 this cell carried before #157: deepening the ink closed the pair,
@@ -107,9 +107,10 @@
   --purple: #0a865a;
   --purple-light: #0b9c68;
   --purple-mid: #0a9060;
-  /* Deepened for WCAG AA on the light ground (#fff): #0b9c68 was 3.52:1 as text
-     and as the ink-on-fill; #087a52 clears AA at 5.36:1. See issue #96. */
-  --accent: #087a52;
+  /* Deepened for WCAG AA on the light ground: #0b9c68 was 3.52:1 as text and as the
+     ink-on-fill. Down again at #295 — green has the least room of the four hues, and
+     this was the only cell that failed flat as well as washed. See issues #96, #295. */
+  --accent: #076c48;
   --accent-strong: var(--accent);
   --accent-contrast: #ffffff;
   /* Thinned from 0.10 for WCAG AA, the same grey-panel pair as light Ocean and

package/src/tokens/tokens.css

@@ -133,12 +133,15 @@
   --pink: #e97ca5;
   --amber: #ffcf6a;
 
-  --bg: #16151f;
-  --bg-elevated: #1c1a28;
-  --surface: #221f2e;
-  --surface-2: #1b1927;
-  --surface-3: #2a2739;
-  --seg-active-bg: #34314a; /* raised pill — clearly above the inset track in dark */
+  /* The elevation ladder, bottom to top. Nothing casts; a surface says how high it is
+     with its step and with the hairline around it, and --muted caps how far the ladder
+     can go. why: docs/specification.md#elevation */
+  --bg: #0e0d14;
+  --surface-2: #161520;     /* SUNKEN — fields, tracks, disabled, code */
+  --surface: #211e2d;       /* the card */
+  --bg-elevated: #2a2639;   /* FLOATING — menus, panels, drawer, modal, toasts */
+  --surface-3: #2d293c;     /* the top step — the hover readout, chips, the nav rail */
+  --seg-active-bg: #383350; /* raised pill — clearly above the inset track in dark */
   /* The raised handle on a control track (switch knob). White in both themes and under
      every accent: it reads on the plain track AND on the accent fill of an on control. */
   --control-knob: #ffffff;
@@ -148,7 +151,10 @@
   --text: #e9e7f0;
   --strong: #ffffff;
   --dim: #c6c2d6;
-  --muted: #948fa8;
+  /* Picked against the TOP of the ladder above, not against the page: #948fa8 cleared the
+     two floating steps by hundredths. Same violet-grey, fourteen steps up every channel.
+     why: docs/specification.md#elevation */
+  --muted: #a29db6;
 
   /* The paint of a control that is off. NOT an opacity: `opacity` is a group property,
      so it fades label and box toward the ground TOGETHER — a disabled primary button
@@ -208,14 +214,19 @@
   --signal-solid-info: var(--cyan);
   --signal-solid-neutral: var(--muted);
 
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
-  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
-  /* Tight elevation for the active segmented pill — stays contained in its track. */
-  --shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
-  /* A card's resting elevation. Nothing in the kit reads it since #284 made .ui-card
-     flat; it stays because it is published and a consumer may. Dark casts nothing. */
-  --shadow-card: none;
+  /* DEPRECATED since #295: the kit casts no shadow anywhere. Published still, so a
+     consumer reading one gets nothing rather than an unresolved var(), and a consumer who
+     wants a cast shadow sets them. Nothing in src/ reads them.
+
+     A transparent shadow, not `none`, because these are read in a LIST. The kit's own
+     pre-0.32 pattern was `box-shadow: var(--shadow-lg), var(--ring)`, and `none` is only
+     valid alone — it makes the whole declaration invalid, which silently takes the focus
+     ring with it. `0 0 #0000` composes. why: docs/specification.md#elevation */
+  --shadow-sm: 0 0 #0000;
+  --shadow-md: 0 0 #0000;
+  --shadow-lg: 0 0 #0000;
+  --shadow-seg: 0 0 #0000;
+  --shadow-card: 0 0 #0000;
   /* THE ONLY --ring in the kit — light and every data-accent sub-theme declare an
      --accent and inherit this line. Opaque because a translucent ring is a glow, and the
      eight rgba() literals it replaced all missed WCAG 1.4.11's 3:1 (#218). Held by
@@ -250,17 +261,19 @@
   --cyan: #0c8fa8;
   --green: #1c8a2c;
   /* Deeper than the dark pink for the same reason dark's is lighter: the wash under it
-     is white, so the ink has to come down to meet it. See issue #131. */
-  --pink: #b63361;
+     is the page, so the ink comes down to meet it. Down a second step at #295, which
+     took the page off white. See issues #131 and #295. */
+  --pink: #a92d59;
   --amber: #b5730a;
 
-  /* A WHITE app: page and cards are both white, and cards are delineated by a hairline
-     border (see card.css), not a grey canvas or a shadow. */
-  --bg: #ffffff;
-  --bg-elevated: #ffffff;
-  --surface: #ffffff;
-  --surface-2: #f5f6f9;
-  --surface-3: #eceef3;
+  /* The same ladder, run the only way light can run it: nothing is brighter than the
+     white a card already was, so light moves DOWN and keeps white for the top step.
+     why: docs/specification.md#elevation */
+  --bg: #eef0f5;
+  --surface-2: #e3e6ee;     /* SUNKEN — fields, tracks, disabled, code */
+  --surface: #f8f9fc;       /* the card */
+  --bg-elevated: #ffffff;   /* FLOATING — menus, panels, drawer, modal, toasts */
+  --surface-3: #e7eaf1;     /* the hover readout, chips, the nav rail */
   --seg-active-bg: #ffffff; /* white pill raised above the grey track in light */
   --control-knob: #ffffff;
   --border: #e4e7ee;
@@ -292,20 +305,22 @@
   --glow-green: rgba(28, 138, 44, 0.1);
   --glow-purple: rgba(106, 45, 204, 0.09);
   --glow-cyan: rgba(12, 143, 168, 0.1);
-  --glow-pink: rgba(182, 51, 97, 0.1);
+  --glow-pink: rgba(169, 45, 89, 0.1);   /* an exact tint of --pink above */
 
-  /* Solid chip pairs for the white app. Each ink is deepened past its signal hue so 11px
-     chip text clears WCAG AA on its own pale fill. */
-  --chip-success-ink: #1f7a38;
+  /* Solid chip pairs for the light app. Each ink is deepened past its signal hue so 11px
+     chip text clears WCAG AA on its own pale fill, and on the soft toast's wash, which
+     #131 gave the same ink. Three came down again at #295 with the page; danger did not
+     need to. */
+  --chip-success-ink: #1c7034;
   --chip-success-fill: #dff3e4;
-  --chip-warn-ink: #8a5e00;
+  --chip-warn-ink: #825900;
   --chip-warn-fill: #fbedd2;
   --chip-danger-ink: #b7295f;
   --chip-danger-fill: #fbe0ea;
   /* Info was the one signal family without a pair, so the info badge painted --cyan on
      --glow-cyan over white and missed AA. This pair sits in the band the other three
      already occupy. See issue #131. */
-  --chip-info-ink: #0a7286;
+  --chip-info-ink: #096a7c;
   --chip-info-fill: #ddeff3;
 
   /* Light runs the same rule the other way. The signals are mid-tone here, so NO ink
@@ -319,14 +334,12 @@
   --signal-solid-info: var(--chip-info-ink);
   --signal-solid-neutral: var(--muted);
 
-  --shadow-sm: 0 1px 3px rgba(30, 30, 50, 0.08);
-  --shadow-md: 0 8px 24px rgba(30, 30, 50, 0.1);
-  --shadow-lg: 0 18px 50px rgba(30, 30, 50, 0.16);
-  /* Tight elevation for the active segmented pill — stays contained in its track. */
-  --shadow-seg: 0 1px 2px rgba(30, 30, 50, 0.12), 0 2px 4px rgba(30, 30, 50, 0.1);
-  /* A hairline contact shadow plus a wide soft one. Unread by the kit since #284 —
-     see the dark block. */
-  --shadow-card: 0 1px 2px rgba(20, 25, 45, 0.04), 0 4px 14px rgba(20, 25, 45, 0.05);
+  /* Deprecated and unread — see the dark block. */
+  --shadow-sm: 0 0 #0000;
+  --shadow-md: 0 0 #0000;
+  --shadow-lg: 0 0 #0000;
+  --shadow-seg: 0 0 #0000;
+  --shadow-card: 0 0 #0000;
   /* No --ring here. :root's is var(--accent), and light re-points --accent. */
 
   --shadow-ink: #1e1e32;