@apliteni/apliteni-ui 0.26.0 → 0.30.0

package/src/styles/nav.css

@@ -18,10 +18,9 @@
 .ui-nav__section + .ui-nav__section { margin-top: 14px; }
 .ui-nav__list { display: flex; flex-direction: column; gap: 2px; }
 .ui-nav__cap {
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
+  /* rank: label */
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
   color: var(--muted);
   padding: 4px 12px 8px;
 }
@@ -64,7 +63,7 @@
   width: 3px; height: 17px;
   border-radius: 3px;
   background: var(--accent);
-  transform: translateY(-50%);
+  transform: translateY(-50%); /* motion: still — a mark on the current row, whose own highlight already transitions; this centres it, it does not travel */
 }
 .ui-nav__item:focus-visible { outline: none; box-shadow: var(--ring); }
 .ui-nav__item.is-active:focus-visible { box-shadow: var(--ring); }
@@ -72,7 +71,7 @@
 .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; }
 .ui-nav__item.is-active .ui-nav__ic svg,
-.ui-nav__item.is-current .ui-nav__ic svg { opacity: 1; stroke: var(--accent); }
+.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; }
 
 /* Destructive row (sign out, revoke). Quiet at rest, --pink once a pointer or
@@ -148,6 +147,12 @@
   border-left: 1px solid var(--border);
 }
 .ui-nav__sub[hidden] { display: none; }
+/* An opened group's list fades in and drops --space-1 into place. wireNav() adds
+   the class when the reader opens it, never at first render. */
+.ui-nav__sub.is-entering {
+  --m-dist: var(--space-1);
+  animation: m-slide-down var(--dur-fast) var(--ease-out) both;
+}
 .ui-nav__item--sub { font-size: 14px; 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
@@ -164,8 +169,7 @@
 .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,
-.ui-nav--side.is-collapsed .ui-nav__sub { display: none; }
+.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; }

package/src/styles/pagination.css

@@ -0,0 +1,124 @@
+/* ============================================================================
+ * Pagination — .ui-pager  (variants: --steps / --numbered / --jump)
+ *   --open    total unknown: Prev and Next only, no last page to reach
+ *   --single  one page of content: the size control alone, no steps
+ * The controls are .ui-btn ghost/sm and the size control is a .ui-select, so
+ * everything here is layout and the two states those sheets do not own.
+ * ========================================================================== */
+
+.ui-pager {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-3) var(--space-4);
+  font-size: var(--text-sm);
+}
+
+/* The status is the only thing anchored to the start of the strip: it is read,
+   not aimed at, and pushing the controls to the far end keeps the pointer's
+   target group in one place as the row count changes width. */
+.ui-pager__status {
+  margin: 0 auto 0 0;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.ui-pager__size {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.ui-pager__size-label { color: var(--muted); }
+
+/* .ui-select is a form field sized for a form — full width, 12px/15px padding.
+   In a pager it sits in a row of sm buttons, so it takes their scale. Two things
+   travel with that: the chevron .ui-select paints is positioned from the right
+   edge, so the padding on that side has to stay clear of it, and the height is
+   declared so this control and the jump input beside it agree on one box. */
+.ui-pager__size-select {
+  width: auto;
+  min-height: var(--space-8);
+  padding: var(--space-1) var(--space-6) var(--space-1) var(--space-2);
+  font-size: var(--text-sm);
+  border-radius: var(--radius-sm);
+  background-position: right var(--space-2) center;
+}
+
+.ui-pager__steps {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+/* Page numbers are read as a row of equal cells, and .ui-btn--sm's padding makes
+   "1" narrower than "49" — so a strip re-flows under the pointer as the reader
+   walks into three-digit pages. The number is WCAG 2.5.8's 24px: an equalised
+   cell should not be narrower than a target is allowed to be. */
+.ui-pager__page {
+  min-width: var(--space-6);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The page you are on. Guarded, because this weighs the same as `.ui-btn:disabled`
+   and is imported after it: written plainly it would repaint the current page of
+   a `loading` pager as though it were live, which is the one thing the busy state
+   must not leave behind. Spelled `[disabled]` rather than `:disabled` — the same
+   selector for the markup this component emits, and the spelling that keeps a
+   rule about an ENABLED control out of the disabled-rule sweep in
+   stories/guidelines/accessibility-floor.test.js, which reads selector text. */
+.ui-pager__page.is-current:not([disabled]) {
+  background: var(--surface-3);
+  border-color: var(--border);
+  color: var(--strong);
+  font-weight: var(--weight-semibold);
+}
+
+.ui-pager__gap {
+  padding: 0 var(--space-1);
+  color: var(--muted);
+}
+
+.ui-pager__jump {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--muted);
+  padding: 0 var(--space-1);
+}
+/* Wide enough for four digits and the spinner a number input draws beside them;
+   in ch so it follows the type rather than a measured pixel. The height is
+   declared rather than left to the line box, because an <input> holds its value
+   in a property: it is the one control in the strip with no text of its own, and
+   nothing else gives it the 24px WCAG 2.5.8 asks of a pointer target. */
+.ui-pager__jump-input {
+  width: 8ch;
+  min-height: var(--space-8);
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-sm);
+  border-radius: var(--radius-sm);
+  text-align: center;
+}
+
+/* A pager directly after a table stands off it. The strip owns no margin of its
+   own — it is dropped under lists and cards too, and a component that carries
+   spacing everywhere is one every caller has to cancel somewhere — so the gap is
+   declared on the one adjacency the kit can see. `.rx-pager` carried a bare
+   `margin-top: 16px` for this, which is --space-4; the number moves to the scale
+   with it rather than travelling as a literal.
+   why: docs/specification.md#spacing-and-rhythm */
+.ui-table + .ui-pager { margin-top: var(--space-4); }
+
+/* A step given an `href` is an anchor, and a host stylesheet's `a:link` is
+   (0,1,1) — which outranks `.ui-btn--ghost` at (0,1,0) and paints the enabled
+   steps in the host's link colour while the disabled ends keep --disabled-ink-bare.
+   One strip, reading as two different controls. The kit has paid for this twice
+   already and both fixes are the same shape: see the (0,2,0) note on
+   `.ui-nav .ui-nav__item` in nav.css. Storybook ships no `a:link`, so the "Pages
+   as links" story cannot show it — which is why the rule is stated rather than
+   discovered.
+   why: docs/specification.md#pagination */
+a.ui-pager__step,
+a.ui-pager__page { color: var(--dim); }
+a.ui-pager__step:hover,
+a.ui-pager__page:hover { color: var(--strong); }

package/src/styles/success.css

@@ -55,8 +55,9 @@
 .ui-sx__inner { position: relative; z-index: 1; }
 .ui-sx__content { min-width: 0; }
 .ui-sx__eyebrow {
-  color: var(--green); font-size: 12px; font-weight: var(--weight-semibold);
-  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px;
+  /* rank: label */
+  color: var(--green); font-size: var(--text-sm); font-weight: var(--weight-medium);
+  margin-bottom: 10px;
 }
 .ui-sx__title {
   color: var(--strong); font-size: 22px; font-weight: var(--weight-semibold);

package/src/styles/table.css

@@ -1,5 +1,5 @@
 /* ============================================================================
- * Table — .ui-table  (borderless-body, hairline rows, uppercase head)
+ * Table — .ui-table  (borderless-body, hairline rows, muted head)
  * Row modifiers: .is-dead (revoked/struck), right-aligned .ui-table__act
  * ========================================================================== */
 
@@ -10,11 +10,10 @@
 }
 .ui-table th {
   text-align: left;
-  font-size: var(--text-xs);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
+  /* rank: label */
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
   color: var(--muted);
-  font-weight: var(--weight-semibold);
   padding: 0 var(--space-4) var(--space-3) 0;
   border-bottom: 1px solid var(--border);
 }

package/src/styles/tabs.css

@@ -26,6 +26,9 @@
 
 .ui-tabs__panels { padding-top: 20px; }
 .ui-tabs__panel[hidden] { display: none; }
+/* The panel the reader switches to fades in, without travel. initTabs() adds the
+   class on a switch and never at first render; playEntrance() takes it off. */
+.ui-tabs__panel.is-entering { animation: m-fade var(--dur-fast) var(--ease-out) both; }
 /* The panel is focusable (tabindex="0", see tabs.js) so a keyboard user can
    reach text-only content. Show the ring when they land on it. */
 .ui-tabs__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

package/src/styles/tooltip.css

@@ -0,0 +1,65 @@
+/* ============================================================================
+ * Tooltip — .ui-tip, the readout that shows a value while a pointer rests on
+ * the mark holding it: a bar, a point on a sparkline, a cell in a heatmap.
+ *   .ui-tip-host   the box the readout is placed against
+ *   .ui-tip        the readout — __label, __value, __detail
+ * The readout is an overlay in every state. It is absolutely placed inside its
+ * host, so showing it, filling it and moving it change the size of nothing.
+ * why: docs/specification.md#the-hover-readout
+ * ========================================================================== */
+
+.ui-tip-host { position: relative; }
+
+.ui-tip {
+  /* One number for the mark-to-readout distance, read by both placements here
+     and by the wiring's flip test, so above and below cannot drift apart. */
+  --ui-tip-gap: 8px;
+  --ui-tip-bg: var(--surface-3);
+  position: absolute;
+  top: var(--ui-tip-y, 0px);
+  left: var(--ui-tip-x, 50%);
+  z-index: var(--z-dropdown);
+  translate: calc(-50% + var(--ui-tip-shift, 0px)) calc(-100% - var(--ui-tip-gap));
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  max-width: var(--prose-caption);
+  padding: var(--space-2) var(--space-3);
+  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;
+  color: var(--text);
+  /* The readout covers the marks beside the one it describes. Were it a hover
+     target it would take the pointer, uncover the mark, lose the pointer and
+     return — a flicker at pointer speed. */
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--dur-fast) var(--ease),
+    /* `linear`: visibility is discrete, the rule the dropdown panel states. */
+    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); }
+
+/* Below the mark: the wiring's flip when above would be clipped, or the
+   author's own choice. */
+.ui-tip.is-below { translate: calc(-50% + var(--ui-tip-shift, 0px)) var(--ui-tip-gap); }
+
+.ui-tip.is-open { opacity: 1; visibility: visible; }
+
+.ui-tip__label { color: var(--muted); }
+.ui-tip__value {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+  color: var(--strong);
+  font-variant-numeric: tabular-nums;
+}
+.ui-tip__detail { color: var(--dim); font-variant-numeric: tabular-nums; }

package/src/styles/topbar.css

@@ -164,10 +164,9 @@
 .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 {
-  font-size: 9.5px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  font-weight: 700;
+  /* rank: chip */
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
   padding: 2px 7px;
   border-radius: 999px;
   margin-left: auto;

package/src/tokens/tokens.css

@@ -78,7 +78,7 @@
   --tracking-tight: -0.01em;
   --tracking-normal: 0;
   --tracking-wide: 0.04em;
-  --tracking-caps: 0.14em;
+  --tracking-caps: 0.14em; /* nothing in the kit reads it since #268; consumer rules still may */
 
   /* -- Motion -------------------------------------------------------------
    * The kit's legacy --dur-* and --ease names alias onto the brand's
@@ -158,6 +158,11 @@
   --disabled-ink: var(--muted);
   --disabled-surface: var(--surface-2);
   --disabled-border: var(--border);
+  /* The ink of a disabled control that paints no box of its own — a ghost button. With
+     no surface beside it, it is read on whatever is behind it, so it is set to clear the
+     floor on the dullest ground there is (--surface-3). #273
+     why: docs/specification.md#colour-and-contrast */
+  --disabled-ink-bare: #a39eb7;
 
   /* Lifted from #9b5dff, which cleared the flat surfaces and failed on its own wash over
      a card; the value was already in the ramp. --ring is var(--accent) and follows by
@@ -208,8 +213,8 @@
   --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);
-  /* Resting elevation for a card. Dark cards are borderless — the surface groups on
-     its own — so they cast nothing. */
+  /* 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;
   /* 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
@@ -250,7 +255,7 @@
   --amber: #b5730a;
 
   /* A WHITE app: page and cards are both white, and cards are delineated by a hairline
-     border + soft shadow (see card.css), not a grey canvas. */
+     border (see card.css), not a grey canvas or a shadow. */
   --bg: #ffffff;
   --bg-elevated: #ffffff;
   --surface: #ffffff;
@@ -271,6 +276,7 @@
   --disabled-ink: var(--muted);
   --disabled-surface: var(--surface-2);
   --disabled-border: var(--border);
+  --disabled-ink-bare: #585e6c;
 
   --accent: #6a2dcc;
   --accent-strong: #6a2dcc; /* already dark enough for white text */
@@ -288,8 +294,8 @@
   --glow-cyan: rgba(12, 143, 168, 0.1);
   --glow-pink: rgba(182, 51, 97, 0.1);
 
-  /* Solid chip pairs for the white app. Each ink is deepened past its signal hue so 10px
-     uppercase text clears WCAG AA on its own pale fill. */
+  /* 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;
   --chip-success-fill: #dff3e4;
   --chip-warn-ink: #8a5e00;
@@ -318,8 +324,8 @@
   --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 white card on a white page needs its own flatter-than-sm elevation: a hairline
-     contact shadow plus a wide soft one (see card.css). */
+  /* 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);
   /* No --ring here. :root's is var(--accent), and light re-points --accent. */