@apliteni/apliteni-ui 0.27.0 → 0.30.0

package/src/styles/footer.css

@@ -71,10 +71,9 @@
   gap: 30px 56px;
 }
 .ui-footer__col-title {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  /* rank: label */
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
   color: var(--footer-text);
   margin: 0 0 14px;
 }

package/src/styles/input.css

@@ -140,7 +140,7 @@
   width: 5px; height: 10px;
   border: solid var(--accent-contrast);
   border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
+  transform: rotate(45deg); /* motion: still — the turn is the tick's shape, not travel; it lands with the box's fill, which transitions */
 }
 .ui-check input[type="radio"]:checked::after {
   content: "";

package/src/styles/layout.css

@@ -78,7 +78,7 @@
    smallest of three weak signals doing the most work, so it grows with the row. */
 .ui-app__rail .ui-nav__ic svg { opacity: 0.62; }
 .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; }
+.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%; }
 
 /* Sign out is a navigation row and rests like one. The danger intent is the
@@ -133,7 +133,8 @@
 .ui-app__main .ui-nav--crumbs { margin-bottom: var(--space-5); }
 .ui-app__main h1 {
   color: var(--strong);
-  font-size: 30px;
+  /* rank: page-title */
+  font-size: var(--text-2xl);
   font-weight: var(--weight-bold);
   line-height: 1.1;
   letter-spacing: var(--tracking-tight);

package/src/styles/loading.css

@@ -31,6 +31,11 @@
 .ui-busy {
   display: block;
 }
+/* What setBusy() puts in the body fades in, without travel. The region the page
+   loads with is not animated: only setBusy() adds the class. */
+.ui-busy__body.is-entering {
+  animation: m-fade var(--dur-med) var(--ease-out) both;
+}
 
 /* -- Skeleton -------------------------------------------------------------- */
 .ui-skel {

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/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
@@ -213,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
@@ -255,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;
@@ -294,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;
@@ -324,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. */