@apliteni/apliteni-ui 0.93.0 → 0.94.0

package/guidelines/colour-and-theming.md

@@ -66,3 +66,5 @@
 **Do:** Draw inputs with an edge. Keep grey fills for non-text states, such as disabled tracks and dividers.
 
 **Don't:** Put text on grey fields, chips, headers or footers.
+
+**Except:** The sidebar rail's current row. Its mark may be neither an accent nor an edge — an outline there means focus — and in the page shell the rail is the card surface already. It takes the quiet fill a rung off its rail, label and all. Artur, r34 of [#475](https://github.com/apliteni/apliteni-ui/issues/475).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.93.0",
+  "version": "0.94.0",
   "workspaces": [
     "react"
   ],

package/src/styles/layout.css

@@ -62,11 +62,13 @@
 .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; }
-/* Hover keeps the reading surface and uses the edge declared in nav.css.
-   The danger row and the current row are left out by name because this
-   rule outranks the states nav.css writes for them.
-   */
-.ui-app__rail .ui-nav__item:not(.is-danger):not(.is-active):hover { background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
+/* The rail is itself --surface, so nav.css's plate has no step here: 1.000:1, with a
+   hairline as the whole resting mark. Both marks go a rung further — the current row
+   to the --surface-3 the folded rail already paints, a hovered row to half of it, so
+   the pointer stays quieter than the reader's own row in both themes (#475 r34). The
+   danger and current rows are named out: this rule outranks nav.css's states. */
+.ui-app__rail .ui-nav__item:not(.is-danger):not(.is-active):hover { background: color-mix(in srgb, var(--surface-3) 50%, transparent); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ }
+.ui-app__rail .ui-nav__item.is-active { background: var(--surface-3); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ }
 .ui-app__brand {
   display: flex;
   align-items: center;
@@ -107,18 +109,18 @@
    anywhere — so the rail's foot is the account block alone. */
 .ui-app__rail .ui-nav--side { flex: 1 1 auto; }
 
-/* Which row is current is structural here, not chromatic: the resting glyphs
-   step down so the current one is the brightest whatever --accent is doing, and
-   the bar beside it carries the hue. A 3x17px bar on a 45x44 tile was the
-   smallest of three weak signals doing the most work, so it grows with the row.
-   The current glyph's own ink is nav.css's rule now, not a copy here: since #429
-   EVERY rail reads it that way, so the rail's copy was the same sentence in a
-   second file. What is left here is the rail's own resting step. */
+/* Which row is current is structural here, not chromatic: the resting glyphs step
+   down so the current one is the brightest whatever --accent is doing, and the
+   plate nav.css draws around it carries no hue at all. #475 took the accent bar
+   that used to stand beside the glyph off every rail, so the line that grew it to
+   the taller tile here went with it. The current glyph's own ink is nav.css's rule
+   too, not a copy here: since #429 EVERY rail reads it that way, so the rail's copy
+   was the same sentence in a second file. What is left here is the rail's own
+   resting step. */
 /* 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:1491 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1595 `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::before { width: 3px; height: 62%; }
 
 /* A destructive row of the rail is a navigation row and rests like one; the danger
    intent is the step nav.css writes for it. Both of nav.css's danger states are
@@ -277,16 +279,12 @@
 :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 current row is ONE plate on the glyph column. Same rules as nav.css writes
-   for a standalone folded rail, and for the same reasons: the bar stands in the
-   row's own left padding, which on the strip is the rail's edge; the hairline is
-   drawn on a row that keeps the open column, so its right edge is off the strip;
-   and --ui-nav-strip is twice the glyph's centre, so a box that wide at the row's
-   edge is centred on the glyph. why: docs/components.md#the-page-shell */
+/* The current row's plate on the glyph column, and beside it the one thing a bare rail
+   does not do: an ordinary row drops its wash here, answered by the floating name below.
+   nav.css's folded rules, a rung further. why: docs/components.md#the-page-shell */
 :where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item.is-active { isolation: isolate; background: none; }
-:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item.is-active:not(:focus-visible) { box-shadow: none; }
-:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item.is-active::before { left: 0; width: var(--ui-nav-strip); height: 100%; border-radius: 10px; background: var(--surface-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ z-index: -1; }
-:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:hover:not(:focus-visible) { outline: none; }
+:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item.is-active::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px; transform: translateY(-50%); /* motion: still — a mark on the current row, whose own highlight already transitions; this centres it, it does not travel */ background: var(--surface-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ z-index: -1; }
+:where(.ui-app.is-collapsed) .ui-app__rail .ui-nav__item:not(.is-danger):not(.is-active):hover { background: none; }
 /* 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
@@ -490,9 +488,8 @@
   .ui-app__rail .ui-nav__sub { margin-inline-start: 0; padding-inline-start: 0; border-inline-start-width: 0; }
   .ui-app__rail .ui-nav__item:not(:has(.ui-nav__ic))::after { opacity: 0.62; }
   .ui-app__rail .ui-nav__item.is-active { isolation: isolate; background: none; }
-  .ui-app__rail .ui-nav__item.is-active:not(:focus-visible) { box-shadow: none; }
-  .ui-app__rail .ui-nav__item.is-active::before { left: 0; width: var(--ui-nav-strip); height: 100%; border-radius: 10px; background: var(--surface-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ z-index: -1; }
-  .ui-app__rail .ui-nav__item:hover:not(:focus-visible) { outline: none; }
+  .ui-app__rail .ui-nav__item.is-active::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--ui-nav-strip); height: 100%; border-radius: 10px; transform: translateY(-50%); /* motion: still — a mark on the current row, whose own highlight already transitions; this centres it, it does not travel */ background: var(--surface-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ z-index: -1; }
+  .ui-app__rail .ui-nav__item:not(.is-danger):not(.is-active):hover { background: none; }
   /* The one line of this block that is deliberately NOT the reader's fold: a finger
      is the only pointer this width has, so a row and the account block are held to
      44px. Neither floor can spread to the press, where growing the box is the one

package/src/styles/nav.css

@@ -75,34 +75,27 @@
   transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
 }
 .ui-nav .ui-nav__item { color: var(--text); } /* (0,2,0): a host sheet's a:link is (0,1,1) — why: docs/components.md#the-page-shell */
-.ui-nav__item:hover { outline: 1px solid var(--control-edge); outline-offset: -1px; background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */ color: var(--strong); }
+.ui-nav__item:hover { background: color-mix(in srgb, var(--surface) 50%, transparent); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ color: var(--strong); }
 .ui-nav__item.is-active {
   background: var(--surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
   color: var(--strong);
   font-weight: 500;
 }
-.ui-nav--side .ui-nav__item.is-active {
-  box-shadow: inset 0 0 0 1px var(--border);
-}
-/* Accent rail marker on the active item */
-.ui-nav--side .ui-nav__item.is-active::before {
-  content: "";
-  position: absolute;
-  left: 4px; top: 50%;
-  width: 3px; height: 17px;
-  border-radius: 3px;
-  background: var(--accent);
-  transform: translateY(-50%); /* motion: still — a mark on the current row, whose own highlight already transitions; this centres it, it does not travel */
-}
+/* The current row's one mark is a plate, and nothing closes it: on a rail row an
+   outline means focus and only focus. The plate is the quiet fill a rung off the
+   ground the rail stands on, so layout.css takes it the next rung where the rail
+   is itself --surface. #475 r33/r34. why: docs/components.md#the-page-shell */
+
 .ui-nav__item:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 .ui-nav__item.is-active:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 
 .ui-nav__ic { display: inline-flex; flex: none; }
 .ui-nav__ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; opacity: 0.72; }
-/* The glyph brightens with its row and takes the row's ink, not the accent. One
-   accent signal per row: that is the marker above, which is the only thing on a
-   rail that means "here". A glyph in --accent beside it is the same sentence
-   said twice, and beside an accent counter it was said three times. See #429. */
+/* The glyph brightens with its row and takes the row's ink, not the accent. A
+   rail row carries no accent at all since #475: the plate above is what means
+   "here", and the glyph's own step to full ink is the other half of that pair.
+   A glyph in --accent beside it was the same sentence said twice, and beside an
+   accent counter it was said three times. See #429 and #475. */
 .ui-nav__item.is-active .ui-nav__ic svg,
 .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 */
 .ui-nav__label {
@@ -127,12 +120,6 @@
    background and pull its label toward the rail behind it (#220). */
 .ui-nav__item.is-disabled { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: default; pointer-events: none; }
 
-/* Hover adds an edge without changing the current row's reading surface.
-   The danger row keeps its own state treatment. */
-.ui-nav__item.is-active:not(.is-danger):hover {
-  background: var(--surface); outline: 1px solid var(--control-edge); outline-offset: -1px; /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
-}
-
 /* Per-item badge / counter */
 .ui-nav__badge {
   flex: none;
@@ -160,8 +147,8 @@
 .ui-nav__item.is-active .ui-nav__badge.is-neutral { background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); }
 /* Same shape, one row up: on the current row the accent counter drops both the
    wash and the accent and reads as the neutral one beside it. The row already
-   carries the one accent signal it is allowed — the marker — and the count is a
-   number, not a second answer to "where am I". It also retires the pair #157
+   carries the one mark it is allowed — the plate — and the count is a number,
+   not a second answer to "where am I". It also retires the pair #157
    recorded: accent ink on --surface fell under WCAG AA in four of the eight
    theme x accent cells (4.08 in dark Nebula), and no alpha cleared it. Nothing
    now paints that pair. See #429 and docs/foundations.md#colour-and-contrast. */
@@ -195,12 +182,10 @@
   animation: m-slide-down var(--dur-fast) var(--ease-out) both;
 }
 .ui-nav__item--sub { font-size: calc(var(--text-base) - 0.5px); padding: 7px 12px; }
-/* No hairline on a nested current row — but only at rest. box-shadow carries
-   both the hairline and the focus ring, so a rule about the resting look must
-   say so, or it silently cancels the ring (WCAG 2.4.7). */
-.ui-nav--side .ui-nav__item--sub.is-active:not(:focus-visible) { box-shadow: none; }
-/* Hangs back onto the guide hairline the indent above draws. */
-.ui-nav--side .ui-nav__item--sub.is-active::before { left: calc(-1 * var(--space-3)); height: 15px; }
+/* A nested current row takes the plate whole, like a top-level one. It used to
+   take neither half — the bar hung back onto the guide hairline and the plate's
+   own hairline was switched off so the two would not stack — and a fill with no
+   edge is not a mark the kit accepts. See #475. */
 
 /* Footer slot (divider + trailing links, e.g. sign-out) */
 .ui-nav__foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
@@ -272,27 +257,31 @@
 /* The current row on a folded rail: one plate on the glyph column, and nothing else.
    The open rail's 3px marker would stand in the rail's edge at this width, and a
    nested row would put it outside the rail; the hairline would be the same mark said
-   twice. The plate is the strip, so it is centred on the glyph, and --surface-3 is the
-   kit's quiet non-text fill — a step off the rail in both themes. The glyph's own step
-   from 0.66 to full ink is the second half of that pair. `isolation` is what puts the
-   plate behind the glyph: a positioned ::before paints over its row's content, and a
-   negative z-index with no stacking context of its own would drop it behind the rail.
-   why: #429 */
+   twice. The plate is the strip, so it is centred on the glyph, and its fill is the
+   rung the open row takes — one off the ground the rail stands on, which layout.css
+   takes one further in the shell — so a rail marks the same row with the same
+   material at both widths. The glyph's own step from 0.66 to full ink is the second
+   half of that pair. `isolation` is what puts the plate behind the glyph: a
+   positioned ::before paints over its row's content, and a negative z-index with no
+   stacking context of its own would drop it behind the rail.
+   why: #429 and #475 */
 .ui-nav--side.is-collapsed .ui-nav__item.is-active { isolation: isolate; background: none; }
-/* At rest only — box-shadow carries the hairline AND the focus ring (WCAG 2.4.7). */
-.ui-nav--side.is-collapsed .ui-nav__item.is-active:not(:focus-visible) { box-shadow: none; }
 .ui-nav--side.is-collapsed .ui-nav__item.is-active::before {
-  left: 0;
+  content: "";
+  position: absolute;
+  left: 0; top: 50%;
   width: var(--ui-nav-strip);
   height: 100%;
   border-radius: 10px;
-  background: var(--surface-3); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
+  transform: translateY(-50%); /* motion: still — a mark on the current row, whose own highlight already transitions; this centres it, it does not travel */
+  background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */
   z-index: -1;
 }
-/* A folded rail answers a pointer with the row's own ink and the name beside it,
-   which is the whole readout at this width — the hover wash stands, the edge
-   around it does not. At rest only, so the focus ring is left standing. */
-.ui-nav--side.is-collapsed .ui-nav__item:hover:not(:focus-visible) { outline: none; }
+/* Nothing switches the hover wash off here: since #588 a folded row is only as wide
+   as the rail draws, so the wash is the box the plate paints, a rung quieter. It is
+   the whole answer a pointer gets outside the shell, where the floating name is
+   layout.css's. (The `outline: none` that stood here switched off an edge #475
+   removed.) #475 */
 
 /* -- Horizontal tabs ----------------------------------------------------- */
 .ui-nav--tabs {