@apliteni/apliteni-ui 0.61.2 → 0.63.0

package/src/components/index.js

@@ -210,8 +210,8 @@ export function select({ options = [], value, name, id, ariaLabel, disabled } =
   }).join('');
   return `<select class="ui-select"${id ? ` id="${esc(id)}"` : ''}${name ? ` name="${esc(name)}"` : ''}${ariaLabel ? ` aria-label="${esc(ariaLabel)}"` : ''}${disabled ? ' disabled' : ''}>${opts}</select>`;
 }
-export function checkbox({ label, checked, type = 'checkbox', name } = {}) {
-  return `<label class="ui-check"><input type="${esc(type)}"${name ? ` name="${esc(name)}"` : ''}${checked ? ' checked' : ''}><span>${label}</span></label>`;
+export function checkbox({ label, checked, type = 'checkbox', name, disabled = false } = {}) {
+  return `<label class="ui-check"><input type="${esc(type)}"${name ? ` name="${esc(name)}"` : ''}${checked ? ' checked' : ''}${disabled ? ' disabled' : ''}><span>${label}</span></label>`;
 }
 // `label` becomes the input's accessible name (a bare switch has no visible text,
 // so it needs one). Defaults to "Toggle" so a control is never left unlabelled.

package/src/components/shell.js

@@ -135,12 +135,17 @@ export function railCollapsed(cookies) {
 // The name says what the press will do, and aria-expanded says what the rail is.
 const railName = (collapsed) => (collapsed ? 'Expand sidebar' : 'Collapse sidebar');
 
-// A frame that holds still and a seam that crosses it. Only the two nodes are
-// written here — a seam that travels has to be a child a stylesheet can reach —
-// and they are spliced into icon()'s own wrapper rather than a copy of it.
-// why: docs/specification.md#the-page-shell
+// Lucide `panel-left-close`, unmodified: a frame, the seam at 9, and a chevron
+// pointing the way the press moves the rail's edge. The folded rail mirrors the
+// chevron about 15 in layout.css, which lands it exactly on Lucide
+// `panel-left-open` — so both states are a shipped glyph and neither is drawn by
+// hand. The seam does not move: it IS the rail, and the compartment it cuts off
+// stays on the side the rail is on. Only the nodes are written here — a child a
+// stylesheet can reach — and they are spliced into icon()'s own wrapper rather
+// than a copy of it. why: docs/specification.md#the-page-shell
 const MARK = '<rect x="3" y="3" width="18" height="18" rx="2"/>'
-  + '<path class="ui-app__fold-seam" d="M9 3v18"/>';
+  + '<path class="ui-app__fold-seam" d="M9 3v18"/>'
+  + '<path class="ui-app__fold-arrow" d="m16 15-3-3 3-3"/>';
 const railMark = () => icon('').replace('></svg>', `>${MARK}</svg>`);
 
 // The rail's own skin, outside the <nav>: folding the rail is not a place to go.

package/src/styles/input.css

@@ -157,7 +157,9 @@
   transform: translate(-50%, -50%);
 }
 .ui-check input[type="radio"] { border-radius: 50%; }
-.ui-check input:hover { border-color: var(--accent); }
+/* :enabled, or the accent lights the border of a box that cannot be clicked —
+   the same "press me" a disabled control has to stop making. #429 */
+.ui-check input:enabled:hover { border-color: var(--accent); }
 .ui-check input:checked { background: var(--accent); border-color: var(--accent); }
 .ui-check input[type="checkbox"]:checked::after {
   content: "";
@@ -177,6 +179,26 @@
 }
 .ui-check input:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 
+/* Off. `.ui-check` had no disabled rule at all until #429 put a disabled checkbox
+   on screen: the box kept --surface-2 and --border-strong, its words kept --text,
+   and it was the word "unavailable" in the label that carried the state. The same
+   flat pair the fields and the buttons take (#220, #273) — a paint on the box and
+   quiet ink on the words, never an `opacity`, which drags label and box toward the
+   ground together. A checked box drops the accent for the reason a disabled primary
+   button does: the accent IS the "press me". Its mark inverts to --disabled-surface,
+   so the tick and the dot keep the measured --disabled-ink pair in both themes. */
+.ui-check input:disabled {
+  background: var(--disabled-surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  border-color: var(--disabled-border);
+  cursor: not-allowed;
+}
+.ui-check input:disabled:checked { background: var(--disabled-ink); border-color: var(--disabled-ink); }
+.ui-check input[type="checkbox"]:disabled:checked::after { border-color: var(--disabled-surface); }
+.ui-check input[type="radio"]:disabled:checked::after { background: var(--disabled-surface); /* ring-gap: inherit — the mark inside the box; the box carries the focus indicator. */ }
+/* The label is the click target, so the cursor belongs on it, and the words it
+   holds go quiet with the box beside them. */
+.ui-check:has(input:disabled) { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: not-allowed; }
+
 /* Toggle switch */
 .ui-switch {
   --sw-w: 44px;

package/src/styles/layout.css

@@ -106,13 +106,14 @@
 /* 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. */
+   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. */
 /* 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:1456 `a resting glyph is dimmer but still legible`. */
+   stories/apps/shell-states.test.js:1491 `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 */
 .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
@@ -224,12 +225,27 @@
 .ui-app .ui-app__fold { color: var(--text); }
 .ui-app .ui-app__fold:hover,
 .ui-app .ui-app__fold:focus-visible { color: var(--strong); }
-/* The width's own clock, not the words', so the mark and the closing edge arrive
-   together; no `!important`, so the reduced-motion net still takes it. 6 is not a
-   number: shell.js draws the frame 3..21 and the seam at 9, and 6 mirrors it about
-   the centre. why: docs/specification.md#the-page-shell */
-.ui-app__fold .ui-app__fold-seam { transition: transform var(--dur-med) var(--ease); }
-.ui-app.is-collapsed .ui-app__fold .ui-app__fold-seam { transform: translateX(6px); }
+/* The seam holds at 9 at both widths, because it is the rail: the compartment it
+   cuts off is the narrow one, on the side the rail is on. What travels is the
+   chevron, and it says what the press will do rather than repeating the state —
+   the same thing the control's own accessible name says. shell.js draws it at
+   13..16, Lucide `panel-left-close`; mirrored about 15, the centre of the
+   compartment it stands in, it lands at 14..17, which is Lucide
+   `panel-left-open`. So the two states are two Lucide glyphs and the CSS between
+   them is one reflection, not a hand-drawn position. `transform-origin` is
+   written out because a scale, unlike the translate this replaces, is read from
+   wherever the origin is — left to the initial 0 0 it would fold the mark
+   through the viewBox's left edge.
+
+   The width's own clock, not the words', so the mark and the closing edge arrive
+   together; no `!important`, so the reduced-motion net still takes it.
+   why: docs/specification.md#the-page-shell */
+.ui-app__fold .ui-app__fold-arrow {
+  transform-box: view-box;
+  transform-origin: 15px 12px;
+  transition: transform var(--dur-med) var(--ease);
+}
+.ui-app.is-collapsed .ui-app__fold .ui-app__fold-arrow { transform: scaleX(-1); }
 
 /* -- The collapsed rail --------------------------------------------------- */
 /* Each rule here has its twin in the 720px block below; nothing lays a row out
@@ -257,6 +273,16 @@
 :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/specification.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; }
 /* 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
@@ -452,6 +478,10 @@
   .ui-app__brand span { opacity: 0; pointer-events: none; }
   .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; }
   /* 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

@@ -93,8 +93,12 @@
 
 .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. */
 .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__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 {
   flex: 1 1 auto; min-width: 0;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -146,16 +150,14 @@
 .ui-nav__badge.is-live { background: var(--chip-success-fill); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--chip-success-ink); }
 .ui-nav__badge.is-danger { background: var(--glow-pink); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */ color: var(--pink); }
 .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 an active row the accent counter takes the row's
-   OWN surface instead of laying its wash over it. An active row is already
-   painted --surface, so an opaque counter avoids stacking tinted fills. Every
-   figure here is measured against the tokens this kit now ships. The accent on
-   that pair falls under WCAG AA in four of the eight theme x accent cells —
-   4.08 in dark Nebula, where the flat surface reads 4.92 — and no alpha reaches
-   it, the largest that clears being 0.06 in dark Nebula and 0.02 in light
-   Emerald. So the accent wash is painted on a base surface, never a raised one.
-   See #157 and docs/specification.md#colour-and-contrast. */
-.ui-nav__item.is-active .ui-nav__badge.is-accent { background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--accent); }
+/* 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
+   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/specification.md#colour-and-contrast. */
+.ui-nav__item.is-active .ui-nav__badge.is-accent { background: var(--surface); /* ring-gap: inherit — decorative or text-only surface has no nested focus target. */ color: var(--strong); }
 
 /* Collapsible group */
 .ui-nav__group { display: flex; flex-direction: column; }
@@ -248,6 +250,43 @@
 }
 .ui-nav--side.is-collapsed .ui-nav__item:not(:has(.ui-nav__ic))::after { opacity: 0.62; }
 
+/* The current row on a folded rail: ONE plate on the glyph column, and nothing
+   else. The open rail's marker is a 3px bar standing in the row's own left
+   padding; on the strip that padding is the rail's edge, so the bar reads as a
+   tick on the rail rather than a mark on a row — and a nested row puts it
+   --space-3 further out again, outside the rail altogether. The hairline cannot
+   close either: a row keeps the open column and the rail clips it, so its right
+   edge is drawn off the strip.
+
+   The plate is the strip. --ui-nav-strip is twice a row's own glyph centre, so a
+   box that wide standing at the row's edge is centred on the glyph, and the mark
+   lands where the reader is already looking. --surface-3 is the kit's quiet
+   non-text fill — a step off the rail in both themes, carrying a glyph and never
+   a word. The references mark current the same way and with no hue at all:
+   Cloudflare's docs rail paints a flat plate, and lessly-ui's rail is "a plate and
+   the weight step, no hue". Here the glyph's own step from 0.66 to full ink is the
+   second half of that pair. See #429.
+
+   `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 instead. */
+.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;
+  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;
+}
+/* Hover's hairline is an outline on a row that keeps the open column, so on the
+   strip it too is drawn with no right edge. 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. At rest only, so the focus ring is left standing. */
+.ui-nav--side.is-collapsed .ui-nav__item:hover:not(:focus-visible) { outline: none; }
+
 /* -- Horizontal tabs ----------------------------------------------------- */
 .ui-nav--tabs {
   display: flex;