@apliteni/apliteni-ui 0.33.0 → 0.34.0

package/src/styles/layout.css

@@ -52,9 +52,13 @@
   transition: width var(--dur-med) var(--ease);
 }
 /* Each block of the rail keeps the open column while the box closes over it. The
-   nav declares its own; these are the two that are not the nav. */
-.ui-app__head,
-.ui-app__user { width: var(--ui-nav-col); flex: none; }
+   nav declares its own; these are the three that are not the nav. Scoped to the rail,
+   because the topbar layout draws the reader's block in its band instead and a column
+   the rail's width is no measurement for a box on a 52px line.
+   why: docs/specification.md#the-page-shell */
+.ui-app__rail > .ui-app__head,
+.ui-app__rail > .ui-app__user,
+.ui-app__rail > .ui-app__foot { width: var(--ui-nav-col); flex: none; }
 /* The rail's hover WAS --surface-2, so moving the rail onto it would have made
    hovering a row do nothing. The danger row and the current row are left out by
    name, because this rule outranks the states nav.css writes for them.
@@ -105,7 +109,7 @@
    smallest of three weak signals doing the most work, so it grows with the row. */
 /* Re-tuned at #295, which took the light rail down a step with the page. Below 720px
    the glyph is the whole row, so it is held at text grade rather than at 1.4.11's bar —
-   stories/apps/shell-states.test.js:1340 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1400 `a resting glyph is dimmer but still legible`. */
 .ui-app__rail .ui-nav__ic svg { opacity: 0.66; }
 .ui-app__rail .ui-nav__item.is-active .ui-nav__ic svg,
 .ui-app__rail .ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: currentColor; } /* motion: still — the glyph brightens with its row, whose own highlight already transitions */
@@ -128,6 +132,18 @@
   padding-top: var(--space-5);
   border-top: 1px solid var(--border);
 }
+/* The other thing that can close a rail: where the reader's block is in the band,
+   the fold's control takes its place under the same rule.
+   why: docs/specification.md#the-page-shell */
+.ui-app__foot {
+  display: flex;
+  align-items: center;
+  padding-top: var(--space-5);
+  border-top: 1px solid var(--border);
+}
+/* On the glyph column from the first frame, so the fold moves it nowhere — the ride
+   along the closing edge belongs to the head band, where the mark holds that column. */
+.ui-app__foot > .ui-app__fold-row { margin-inline-start: 0; }
 /* The avatar is the reader block's own glyph, so half the difference between the
    glyph column and itself is the inset that centres it on the line every glyph above
    it stands on. The arithmetic and not the 5.5 it comes to: both numbers are declared
@@ -231,17 +247,29 @@
    where the control arrives: below 720px the toggle is not drawn, so the 720px block
    gives the lockup back rather than leaving an empty band with a hairline under it.
    why: docs/specification.md#the-page-shell */
-:where(.ui-app.is-collapsed) .ui-app__fold-row { inset-inline-start: calc(var(--ui-nav-strip) - var(--ui-nav-col)); }
-:where(.ui-app.is-collapsed) .ui-app__brand { opacity: 0; visibility: hidden; pointer-events: none; }
+:where(.ui-app.is-collapsed) .ui-app__head > .ui-app__fold-row { inset-inline-start: calc(var(--ui-nav-strip) - var(--ui-nav-col)); }
+/* …and only in the layout where something arrives on the mark's column. In the
+   topbar layout the toggle is at the rail's foot, nothing lands where the mark
+   stands, and a lockup faded out there leaves a band with nothing in it and its
+   hairline still under it — the defect the 720px block below exists to avoid. So
+   that layout keeps the mark and lets the shared rule above fold away its words.
+   why: docs/specification.md#the-page-shell */
+:where(.ui-app:not(.ui-app--topbar).is-collapsed) .ui-app__brand { opacity: 0; visibility: hidden; pointer-events: none; }
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__sub { margin-inline-start: 0; padding-inline-start: 0; border-inline-start-width: 0; }
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:not(:has(.ui-nav__ic))::after { opacity: 0.62; }
 /* The label IS the chip. `fixed` is the fallback placement, out of the rail's own
    clip; the @supports branch below pins it to the row and is the only one that
    survives a scroll. The toggle's selector is unscoped, because it is wordless at
-   both widths. why: docs/specification.md#the-page-shell */
+   both widths.
+
+   It floats by role — a readout placed over the page for as long as a pointer
+   rests on a row — so it takes the floating treatment the hover readout takes,
+   which is the same shape on the same step: the two-step edge and the drops.
+   why: docs/specification.md#the-page-shell
+   why: docs/specification.md#elevation */
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:is(:hover, :focus-visible) > .ui-nav__label,
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who,
-.ui-app__rail .ui-app__fold:is(:hover, :focus-visible) > .ui-nav__label { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface-3); color: var(--strong); box-shadow: var(--shadow-md); opacity: 1; pointer-events: none; }
+.ui-app__rail .ui-app__fold:is(:hover, :focus-visible) > .ui-nav__label { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; 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-xs); background: var(--surface-3); color: var(--strong); opacity: 1; pointer-events: none; }
 @supports (anchor-name: --a) and (anchor-scope: --a) {
   .ui-app.is-collapsed,
   .ui-app:has(.ui-app__fold) { anchor-scope: --ui-rail; }
@@ -271,6 +299,80 @@
   margin-inline: auto;
   padding: 40px clamp(24px, 4vw, 56px) 72px;
 }
+/* The whole of the difference: `centered` is the rule above and `wide` takes its cap
+   off. `maxWidth` is the number under either name. why: docs/specification.md#widths */
+.ui-app__main--wide { max-width: var(--ui-app-main, none); }
+
+/* -- The topbar layout ----------------------------------------------------- */
+/* The band stands BESIDE the rail, not across the top of both, which is the
+   arrangement where the rail's head band and the band close at the same height — what
+   the three heights below are for. Level, not one continuous stroke: the rail insets
+   its own rule, and in light that half is 1.009:1 on the rail's ground.
+   why: docs/specification.md#the-second-layout */
+.ui-app { --ui-app-band: 52px; }
+.ui-app__well { display: flex; flex-direction: column; min-width: 0; }
+.ui-app__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: var(--ui-app-band);
+  flex: none;
+  padding-inline: clamp(24px, 4vw, 56px);
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  /* Sticky for the reason the rail beside it is: chrome that scrolls away is chrome
+     you scroll back up for. */
+  position: sticky;
+  top: 0;
+  z-index: var(--z-sticky);
+}
+.ui-app__bar-gap { flex: 1 1 auto; }
+/* The rail's two bands take the band's height, so the rule under the head lands on
+   the line the band's own rule lands on. The rail gives up its top inset to buy it. */
+.ui-app--topbar > .ui-app__rail { padding-top: 0; }
+.ui-app--topbar > .ui-app__rail > .ui-app__head { height: var(--ui-app-band); padding-bottom: 0; }
+.ui-app--topbar > .ui-app__rail > .ui-app__foot { height: var(--ui-app-band); padding-top: 0; }
+
+/* Drawn as a field, behaving as a button. The ladder is the field's — the sunken
+   step, the hairline and the radius src/styles/input.css:20 `.ui-input` sets — because
+   what it looks like is the point. It gives way before anything else on the band.
+   why: docs/specification.md#the-page-shell */
+.ui-app__search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 0 1 var(--panel-sm);
+  min-width: 0;
+  padding: 7px 10px;
+  /* A family alone leaves the browser's leading behind: `font: inherit` first, then
+     the one step this row takes. why: CONTRIBUTING.md#button-chrome-ledgers */
+  font: inherit;
+  font-size: var(--text-sm);
+  text-align: start;
+  color: var(--muted);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
+}
+.ui-app__search:hover { border-color: var(--border-strong); color: var(--strong); }
+/* The same glyph the palette draws in its own search box, at the same box and the
+   same stroke: the trigger and the thing it opens are not two search marks.
+   src/styles/command-palette.css:107 `.ui-cmdk__search-ic svg` */
+.ui-app__search-ic { display: flex; flex: none; }
+.ui-app__search-ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; }
+/* Part of the button's name, so it is squeezed rather than dropped: an ellipsis
+   still leaves the whole string in the tree. */
+.ui-app__search-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The other half of the name, so it never gives way. */
+.ui-app__search kbd { flex: none; }
+
+/* The mark alone — no room for two lines on a 52px row. No rule over it, since the
+   band's hairline is under the whole of it, and no column, since this is not the rail.
+   why: docs/specification.md#the-page-shell */
+.ui-app__user--bar { flex: none; padding-top: 0; border-top: 0; }
+.ui-app__user--bar .ui-app__av { margin-inline-start: 0; }
 /* Crumb, then the title block. At --space-2 the crumb sat 8px off the h1 and
    the h1 8px off its subtitle, so all three ranks read as one. */
 .ui-app__main .ui-nav--crumbs { margin-bottom: var(--space-5); }
@@ -315,6 +417,11 @@
   .ui-app { --ui-rail-w: calc(var(--ui-nav-strip) + 2 * var(--space-4) + var(--ui-rail-rule)); }
   /* The strip is the only layout this width has, so there is nothing to fold. */
   .ui-app__rail .ui-app__fold-row { display: none; }
+  /* …and the foot goes with it, for the reason the head band does below: in the
+     topbar layout that box holds the toggle and nothing else, so at this width it is
+     padding and a hairline drawn over nothing. Scoped to the shell's own rail, like
+     every other rule in this block. why: docs/specification.md#the-page-shell */
+  .ui-app__rail .ui-app__foot { display: none; }
   /* …and with it the band, when the band has nothing else in it: a head with no
      wordmark is the toggle alone, so at this width it is padding and a hairline
      drawn over nothing. The reader's fold cannot take this rule — there the toggle
@@ -343,7 +450,7 @@
   .ui-app__rail .ui-nav__item,
   .ui-app__rail .ui-app__user-trigger { min-height: 44px; }
   .ui-app__rail .ui-nav__item:is(:hover, :focus-visible) > .ui-nav__label,
-  .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface-3); color: var(--strong); box-shadow: var(--shadow-md); opacity: 1; pointer-events: none; }
+  .ui-app__rail .ui-app__user-trigger:is(:hover, :focus-visible) > .ui-app__who { position: fixed; left: calc(var(--ui-rail-w) + var(--space-2)); z-index: var(--z-dropdown); width: max-content; max-width: 15rem; margin-block: -7px; padding: 6px 10px; 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-xs); background: var(--surface-3); color: var(--strong); opacity: 1; pointer-events: none; }
   @supports (anchor-name: --a) and (anchor-scope: --a) {
     .ui-app { anchor-scope: --ui-rail; }
     .ui-app__rail { anchor-name: --ui-rail; }

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,7 +123,10 @@
   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;
@@ -177,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:155 `.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; }
@@ -222,7 +226,10 @@
   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;

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);