@apliteni/apliteni-ui 0.32.0 → 0.33.1

package/src/styles/nav.css

@@ -9,12 +9,32 @@
 .ui-nav :where(ul, ol) { list-style: none; margin: 0; padding: 0; } /* floor, not ceiling */
 
 /* -- Sidebar rail -------------------------------------------------------- */
+/* The rail's two widths, and the one place they are written. --ui-nav-col is the
+   open column. --ui-nav-strip is twice a row's own glyph centre — the row's
+   padding plus half a glyph — so a strip that wide has the glyph standing in the
+   middle of it, exactly where it stood in the open rail. That is what lets the
+   fold animate: the column keeps --ui-nav-col and is clipped to the strip, so
+   the width travels and nothing inside it is laid out again. layout.css adds the
+   shell rail's own inset to both. stories/apps/shell-states.test.js derives the
+   strip from the resolved cascade and refuses a number that has drifted from it.
+   Declared for the shell as well as the nav, because the shell's rail is this
+   nav with an inset around it, and two copies of 41 is the drift itself. */
+.ui-nav--side,
+.ui-app { --ui-nav-col: 216px; --ui-nav-strip: 41px; }
 .ui-nav--side {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  width: 216px;
+  width: var(--ui-nav-col);
+  /* The width is the only property the fold travels. Nothing is clipped here:
+     inside the shell it is the rail that clips, and a clip of its own would have
+     been a second scroll box cutting the rows off at the rail's height. */
+  transition: width var(--dur-med) var(--ease);
 }
+/* Every block keeps the open column while the nav clips to the strip. Without
+   this each one stretches to whatever the nav is wide and every row inside it is
+   laid out again on each frame of the fold. */
+.ui-nav--side > * { width: var(--ui-nav-col); flex: none; }
 .ui-nav__section + .ui-nav__section { margin-top: 14px; }
 .ui-nav__list { display: flex; flex-direction: column; gap: 2px; }
 .ui-nav__cap {
@@ -23,6 +43,9 @@
   font-weight: var(--weight-medium);
   color: var(--muted);
   padding: 4px 12px 8px;
+  /* Goes on the labels' clock — a section heading is words, and the fold takes
+     every word on the rail together. */
+  transition: opacity var(--dur-fast) var(--ease);
 }
 
 /* Item row — link, group toggle, and leaf share the same skin */
@@ -72,7 +95,15 @@
 .ui-nav__ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; opacity: 0.72; }
 .ui-nav__item.is-active .ui-nav__ic svg,
 .ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: var(--accent); } /* motion: still — the glyph brightens with its row, whose own highlight already transitions */
-.ui-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ui-nav__label {
+  flex: 1 1 auto; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  /* The words go before the closing edge reaches them, which is most of why the
+     fold is worth animating — a label cut through by that edge reads as the rail
+     eating it. --dur-fast against the width's --dur-med, as the reference times
+     its own. */
+  transition: opacity var(--dur-fast) var(--ease);
+}
 
 /* Destructive row (sign out, revoke). Quiet at rest, --pink once a pointer or
    the keyboard reaches it — as .ui-btn--danger and .ui-dropdown__item do. */
@@ -111,6 +142,10 @@
   line-height: 1;
   background: var(--surface-3);
   color: var(--dim);
+  /* The count fades with the words. It is never lost: sidebarNav() spells it
+     into the row's aria-label, so "Pending 3" is what a reader hears at either
+     width. */
+  transition: opacity var(--dur-fast) var(--ease);
 }
 .ui-nav__badge.is-accent { background: var(--glow-purple); color: var(--accent); }
 .ui-nav__badge.is-live { background: var(--chip-success-fill); color: var(--chip-success-ink); }
@@ -135,7 +170,7 @@
   border-right: 1.6px solid var(--muted);
   border-bottom: 1.6px solid var(--muted);
   transform: rotate(-45deg);
-  transition: transform var(--dur-fast) var(--ease);
+  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
 }
 .ui-nav__group.is-open > .ui-nav__toggle .ui-nav__caret { transform: rotate(45deg); }
 .ui-nav__sub {
@@ -164,16 +199,59 @@
 /* Footer slot (divider + trailing links, e.g. sign-out) */
 .ui-nav__foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
 
-/* Collapsed (icon-only) rail */
-.ui-nav--side.is-collapsed { width: 60px; align-items: stretch; }
+/* A row with no glyph, on a rail folded to its glyphs, would be a blank target.
+   It gets a dot on the glyph column instead — out of flow, so the open rail's
+   labels stay where they are, and resting at nothing, so what the fold does is
+   raise it rather than conjure it. 18px is the row's own 12px padding plus half
+   a 17px glyph less half the dot: the column the glyph beside it stands on.
+   sidebarNav() takes `icon` as optional at every level, sub rows included. */
+.ui-nav--side .ui-nav__item:not(:has(.ui-nav__ic))::after {
+  content: "";
+  position: absolute;
+  left: 18px; top: 50%;
+  width: 5px; height: 5px;
+  margin-top: -2.5px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0;
+  transition: opacity var(--dur-fast) var(--ease);
+}
+
+/* The nested list's indent, which the strip has no room for. It travels with the
+   width rather than vanishing under it: the guide hairline thins to nothing and
+   the children walk back onto the glyph column their parent stands on. */
+.ui-nav__sub {
+  transition: margin-inline-start var(--dur-med) var(--ease),
+    padding-inline-start var(--dur-med) var(--ease),
+    border-inline-start-width var(--dur-med) var(--ease);
+}
+
+/* Collapsed (icon-only) rail — the same fold the shell's rail makes, drawn once
+   rather than pressed: the column keeps its width and the nav clips to the
+   strip, so no row is laid out again and no glyph moves. A group's children stay
+   rows here, because wireNav() toggles the list's `hidden` attribute and nothing
+   else, so folding .ui-nav__sub away left the toggle announcing a list it could
+   not open. What goes is the indent and the words, and sidebarNav({ collapsed })
+   hands each row its name as a `title` so a pointer can still read it. The
+   shell's rail draws a chip of its own instead, on keyboard focus as well — see
+   layout.css. */
+.ui-nav--side.is-collapsed {
+  width: var(--ui-nav-strip);
+  /* clip, not hidden: a standalone rail has nothing around it to clip for it,
+     and `hidden` would make this a scroll box in both axes and cut the rows off
+     at whatever height it was given. `clip` across leaves `visible` down alone,
+     which is the one pair that does. */
+  overflow-x: clip;
+  overflow-y: visible;
+}
 .ui-nav--side.is-collapsed .ui-nav__cap,
 .ui-nav--side.is-collapsed .ui-nav__label,
 .ui-nav--side.is-collapsed .ui-nav__badge,
-.ui-nav--side.is-collapsed .ui-nav__caret { display: none; } /* motion: still — folding the rail is a layout change of the whole rail; animating these would reflow the page */
-.ui-nav--side.is-collapsed .ui-nav__item { justify-content: center; padding: 11px 0; gap: 0; }
-.ui-nav--side.is-collapsed .ui-nav__ic svg { width: 19px; height: 19px; stroke-width: 2; }
-.ui-nav--side.is-collapsed .ui-nav__item.is-active::before { left: 3px; }
-.ui-nav--side.is-collapsed .ui-nav__foot { text-align: center; }
+.ui-nav--side.is-collapsed .ui-nav__caret { opacity: 0; pointer-events: none; }
+.ui-nav--side.is-collapsed .ui-nav__sub {
+  margin-inline-start: 0; padding-inline-start: 0; border-inline-start-width: 0;
+}
+.ui-nav--side.is-collapsed .ui-nav__item:not(:has(.ui-nav__ic))::after { opacity: 0.62; }
 
 /* -- Horizontal tabs ----------------------------------------------------- */
 .ui-nav--tabs {

package/src/styles/tooltip.css

@@ -26,7 +26,10 @@
   max-width: var(--prose-caption);
   padding: var(--space-2) var(--space-3);
   background: var(--ui-tip-bg);
-  border: 1px solid var(--border);
+  /* The two-step edge and the drop: --border-strong outside, --border one pixel
+     inside it, then the broad faint drop. why: docs/specification.md#elevation */
+  border: 1px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   border-radius: var(--radius-sm);
   font-family: var(--font-sans);
   font-size: var(--text-xs);

package/src/styles/topbar.css

@@ -123,11 +123,18 @@
   left: 0;
   min-width: 266px;
   background: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
-  border: 1px solid var(--border);
+  /* The two-step edge and the drop: --border-strong outside, --border one pixel
+     inside it, then the broad faint drop. why: docs/specification.md#elevation */
+  border: 1px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   border-radius: 16px;
   padding: 6px;
   opacity: 0;
   visibility: hidden;
+  /* Drawn for the whole of the fade out, so the rows do not vanish mid-fade — and a box
+     that is drawn is a box that is hit. The open rule takes this back.
+     why: docs/specification.md#the-dropdown-panel */
+  pointer-events: none;
   transform: translateY(-6px);
   /* Named properties, not the bare shorthand: `transition: 0.18s` is `all`, and `all`
      includes visibility — held at the OLD value for the whole duration, so the menu is
@@ -138,7 +145,20 @@
     visibility var(--dur-med) linear;
   z-index: var(--z-dropdown);
 }
-.vsw.open .vsw__menu { opacity: 1; visibility: visible; transform: translateY(0); }
+/* Open, the menu is clickable and visible AT ONCE. Both menus in this file are
+   `wireDropdown()` in bespoke clothes — same hooks, same keyboard, same fade — so they
+   owe a panel's two rules as much as `.ui-dropdown__panel` does: `visibility` off the
+   open transition, because the frame the open class lands is the frame the wiring moves
+   focus onto a row in and a browser will not focus inside a hidden box; and
+   `pointer-events` back on, because the closed rule turned it off.
+   why: docs/specification.md#the-dropdown-panel */
+.vsw.open .vsw__menu {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+  transition-property: opacity, transform;
+}
 .vopt {
   display: flex;
   gap: 11px;
@@ -160,7 +180,8 @@
   transition: background var(--dur-fast) var(--ease);
 }
 /* The menu is raised, so a hovered row takes the step ABOVE it — see
-   src/styles/dropdown.css:130. why: docs/specification.md#elevation */
+   src/styles/dropdown.css:144 `.ui-dropdown__item:hover`.
+   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; }
@@ -205,11 +226,15 @@
   right: 0; top: 44px;
   width: 252px;
   background: var(--bg-elevated);   /* the floating step — see dropdown.css. #295 */
-  border: 1px solid var(--border);
+  /* The two-step edge and the drop: --border-strong outside, --border one pixel
+     inside it, then the broad faint drop. why: docs/specification.md#elevation */
+  border: 1px solid var(--border-strong);
+  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
   border-radius: 14px;
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
+  pointer-events: none; /* see .vsw__menu above */
   transform: translateY(-6px);
   /* Named properties — see .vsw__menu above. */
   transition:
@@ -218,7 +243,15 @@
     visibility var(--dur-med) linear;
   z-index: var(--z-dropdown);
 }
-.acct.open .amenu { opacity: 1; visibility: visible; transform: translateY(0); }
+/* Clickable and visible at once — see .vsw.open .vsw__menu above. The row this one
+   costs is `.aout`: a stray click in the fade out ends the reader's session. */
+.acct.open .amenu {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+  transition-property: opacity, transform;
+}
 .amenu .ahead { padding: 13px 15px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 11px; }
 .amenu .ahead .avatar { cursor: default; }
 .amenu .ahead .aw { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }

package/src/tokens/tokens.css

@@ -133,9 +133,10 @@
   --pink: #e97ca5;
   --amber: #ffcf6a;
 
-  /* 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 */
+  /* The elevation ladder, bottom to top. 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. Nothing casts
+     below the floating step; the floating step itself adds --elev-drop under its inner
+     line and nothing else in the kit does. why: docs/specification.md#elevation */
   --bg: #0e0d14;
   --surface-2: #161520;     /* SUNKEN — fields, tracks, disabled, code */
   --surface: #211e2d;       /* the card */
@@ -214,9 +215,10 @@
   --signal-solid-info: var(--cyan);
   --signal-solid-neutral: var(--muted);
 
-  /* 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.
+  /* DEPRECATED since #295: no surface below the floating step casts, and the floating
+     step reads --elev-drop rather than any of these. 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
@@ -239,6 +241,18 @@
   --shadow-ink: #000000;
   --sheen: #ffffff;
 
+  /* The drops of the floating treatment, in Primer's --shadow-floating-* order:
+     the inner half of the two-step edge, then these. The line is NOT in this
+     token and cannot be — a var() inside a custom property is substituted on the
+     element that DECLARES it, so an --elev-edge read here resolves at :root and
+     nothing below could re-point it. A floating surface writes the pair itself:
+       box-shadow: inset 0 0 0 1px var(--elev-edge, var(--border)), var(--elev-drop);
+     Dark spends 62% / 50% of the ink and reaches 1.20 at the drop's core, having
+     nowhere to go on a near-black page. why: docs/specification.md#elevation */
+  --elev-drop:
+    0 14px 30px -12px color-mix(in srgb, var(--shadow-ink) 62%, transparent),
+    0 3px 9px -4px color-mix(in srgb, var(--shadow-ink) 50%, transparent);
+
   /* Backdrop that dims the page behind an overlay (drawer, modal, composer). */
   --scrim: rgba(0, 0, 0, 0.58);
 
@@ -345,6 +359,13 @@
   --shadow-ink: #1e1e32;
   --sheen: #ffffff;
 
+  /* 18% / 10% against dark's 62% / 50%. Light's ink is #1e1e32 on a card at
+     #f8f9fc, and 18% is what puts the drop core at #d1d2d8 — 1.44, the strongest
+     separation either theme gets. why: docs/specification.md#elevation */
+  --elev-drop:
+    0 14px 30px -12px color-mix(in srgb, var(--shadow-ink) 18%, transparent),
+    0 3px 9px -4px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
+
   --scrim: rgba(20, 22, 40, 0.38);
 
   --grad-from: var(--purple-light);