npm - @apliteni/apliteni-ui - Versions diffs - 0.26.0 → 0.30.0 - Mend

@apliteni/apliteni-ui 0.26.0 → 0.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/README.md +2 -2
package/package.json +1 -1
package/react/README.md +111 -2
package/react/dist/index.css +11 -13
package/react/dist/index.d.ts +111 -4
package/react/dist/index.js +811 -167
package/src/components/back.js +57 -0
package/src/components/command-palette.js +597 -0
package/src/components/confirm.js +3 -2
package/src/components/drawer.js +31 -2
package/src/components/dropdown.js +192 -17
package/src/components/feedback.js +2 -2
package/src/components/index.js +5 -2
package/src/components/loading.js +3 -2
package/src/components/nav.js +15 -7
package/src/components/overlay.js +67 -14
package/src/components/pagination.js +344 -0
package/src/components/shell.js +11 -2
package/src/components/tabs.js +7 -1
package/src/components/tooltip.js +237 -0
package/src/components/topbar.js +9 -4
package/src/index.css +4 -0
package/src/index.js +4 -0
package/src/inline.js +8 -0
package/src/motion.js +43 -2
package/src/styles/back.css +42 -0
package/src/styles/badge.css +5 -7
package/src/styles/base.css +8 -7
package/src/styles/button.css +14 -0
package/src/styles/card.css +12 -8
package/src/styles/code.css +3 -4
package/src/styles/command-palette.css +321 -0
package/src/styles/confirm.css +11 -11
package/src/styles/drawer.css +57 -15
package/src/styles/dropdown.css +70 -11
package/src/styles/feedback.css +2 -0
package/src/styles/footer.css +3 -4
package/src/styles/input.css +7 -1
package/src/styles/layout.css +3 -2
package/src/styles/loading.css +5 -0
package/src/styles/nav.css +12 -8
package/src/styles/pagination.css +124 -0
package/src/styles/success.css +3 -2
package/src/styles/table.css +4 -5
package/src/styles/tabs.css +3 -0
package/src/styles/tooltip.css +65 -0
package/src/styles/topbar.css +3 -4
package/src/tokens/tokens.css +14 -8

package/src/components/tooltip.js ADDED Viewed

@@ -0,0 +1,237 @@
+// Tooltip — the readout that shows a value while a pointer rests on the mark
+// holding it. An overlay in every state: one element, rendered once inside its
+// host and absolutely placed there, so showing it moves nothing on the page.
+//
+//   <div class="ui-tip-host" data-tip-host>
+//     <svg>… <rect data-tip-label="Mar 2026" data-tip-value="€48,210" …/> …</svg>
+//     ${tooltip()}
+//   </div>
+//   wireTooltip(container);
+//
+// A mark carries `data-tip-value`, with `data-tip-label` and `data-tip-detail`;
+// a `[data-tip-anchor]` inside it is where the readout opens.
+// why: docs/specification.md#the-hover-readout
+import { esc } from './index.js';
+const cx = (...a) => a.filter(Boolean).join(' ');
+const PARTS = ['label', 'value', 'detail'];
+const px = (n) => (typeof n === 'number' && Number.isFinite(n) ? `${n}px` : null);
+let seq = 0;
+/**
+ * The readout. Render it once inside a `[data-tip-host]`; wireTooltip() fills it.
+ *
+ * @param {object} [o]
+ * @param {string} [o.label]     which point — a date, a category, a series
+ * @param {string} [o.value]     the number, already formatted
+ * @param {string} [o.detail]    at most one comparison, such as "+4.2% on February"
+ * @param {string} [o.placement] 'top' (default) | 'bottom' — the side it prefers; the wiring flips it when clipped
+ * @param {boolean} [o.open]     render it shown, as a picture; its host leaves off `data-tip-host` so no wiring takes it down
+ * @param {number} [o.x]         with `open`: the mark's centre, px from the host's left
+ * @param {number} [o.y]         with `open`: the mark's top edge (its bottom for 'bottom'), px from the host's top
+ * @param {string} [o.id]
+ * @returns {string} html
+ */
+export function tooltip({
+  label = '', value = '', detail = '', placement = 'top', open = false, x, y, id,
+} = {}) {
+  const text = { label, value, detail };
+  const named = value != null && String(value) !== '';
+  const pos =[['--ui-tip-x', px(x)], ['--ui-tip-y', px(y)]]
+    .filter(([, v]) => v).map(([k, v]) => `${k}:${v}`).join(';');
+  // A tooltip with nothing in it has no name, so an empty readout — the one a
+  // chart renders before any mark is hovered — takes the role with its first value.
+  const attrs = [
+    `class="${cx('ui-tip', placement === 'bottom' && 'is-below', open && 'is-open')}"`,
+    named ? 'role="tooltip"' : '',
+    'data-tip',
+    id ? `id="${esc(id)}"` : '',
+    pos ? `style="${pos}"` : '',
+  ].filter(Boolean).join(' ');
+  const spans = PARTS.map((k) => {
+    const t = text[k] == null ? '' : String(text[k]);
+    return `<span class="ui-tip__${k}"${t ? '' : ' hidden'}>${esc(t)}</span>`;
+  }).join('');
+  return `<div ${attrs}>${spans}</div>`;
+}
+// ---- Placement -----------------------------------------------------------
+// The mark-to-readout distance is --ui-tip-gap in src/styles/tooltip.css. This is
+// the fallback for a document that has not loaded the sheet;
+// src/components/tooltip.test.js pins the two to each other.
+const TIP_GAP = 8;
+function tipGap(tip) {
+  const declared = parseFloat(getComputedStyle(tip).getPropertyValue('--ui-tip-gap'));
+  return Number.isFinite(declared) ? declared : TIP_GAP;
+}
+// Hosts nest. A mark or a readout belongs to the nearest [data-tip-host] above it,
+// so one mark opens one readout, and an outer host is never handed an inner one's.
+function holds(host, el) {
+  const nearest = el.parentElement?.closest('[data-tip-host]') ?? null;
+  return host.contains(el) && (nearest === host || !host.contains(nearest));
+}
+const tipOf = (host) => [...host.querySelectorAll('[data-tip]')].find((tip) => holds(host, tip)) ?? null;
+const clips = (cs) => [cs.overflow, cs.overflowX, cs.overflowY].some((v) => v && v !== 'visible');
+// What the readout has to stay inside: the viewport less its scrollbars, cut
+// down by the host and every ancestor whose overflow clips. <body> is left out —
+// its overflow is the viewport's, and its box can be shorter than the page.
+function clipBox(host) {
+  const view = host.ownerDocument.documentElement;
+  const box = { top: 0, left: 0, right: view.clientWidth, bottom: view.clientHeight };
+  for (let el = host; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+    if (!clips(getComputedStyle(el))) continue;
+    const r = el.getBoundingClientRect();
+    box.top = Math.max(box.top, r.top);
+    box.left = Math.max(box.left, r.left);
+    box.right = Math.min(box.right, r.right);
+    box.bottom = Math.min(box.bottom, r.bottom);
+  }
+  return box;
+}
+// Flip only when the preferred side is too tight AND the other side is roomier,
+// so a readout that fits on neither side opens on the roomier one. Then slide
+// it along the mark's edge, no further than it takes to stay inside the box.
+function place(host, tip, mark) {
+  const m = (mark.querySelector('[data-tip-anchor]') || mark).getBoundingClientRect();
+  const h = host.getBoundingClientRect();
+  const clip = clipBox(host);
+  const need = tip.offsetHeight + tipGap(tip);
+  const above = m.top - clip.top;
+  const below = clip.bottom - m.bottom;
+  const prefersBelow = tip.__tipPrefersBelow;
+  const flip = prefersBelow ? below < need && above > below : above < need && below > above;
+  const isBelow = prefersBelow !== flip;
+  tip.classList.toggle('is-below', isBelow);
+  const centre = m.left + m.width / 2;
+  const ideal = centre - tip.offsetWidth / 2;
+  const left = Math.max(clip.left, Math.min(ideal, clip.right - tip.offsetWidth));
+  // An absolute box is measured from the host's padding edge and rides its scroll.
+  const s = tip.style;
+  s.setProperty('--ui-tip-x', `${centre - h.left - host.clientLeft + host.scrollLeft}px`);
+  s.setProperty('--ui-tip-y', `${(isBelow ? m.bottom : m.top) - h.top - host.clientTop + host.scrollTop}px`);
+  s.setProperty('--ui-tip-shift', `${left - ideal}px`);
+}
+function fill(tip, mark) {
+  tip.setAttribute('role', 'tooltip');
+  for (const k of PARTS) {
+    const el = tip.querySelector(`.ui-tip__${k}`);
+    if (!el) continue;
+    const t = mark.getAttribute(`data-tip-${k}`) || '';
+    el.textContent = t;
+    el.hidden = !t;
+  }
+}
+// ---- Behaviour -----------------------------------------------------------
+/**
+ * Show the host's readout for one mark, until hideTooltip() or Escape. For a chart that does its own
+ * hit-testing; its host needs `.ui-tip-host`. After Escape it shows nothing for the dismissed mark
+ * until another mark shows or hideTooltip() is called, so a chart may call it on every pointer sample.
+ */
+export function showTooltip(host, mark) {
+  const tip = tipOf(host);
+  if (!tip || !mark || mark === host.__tipDismissed) return;
+  if (tip.__tipPrefersBelow == null) tip.__tipPrefersBelow = tip.classList.contains('is-below');
+  if (!tip.id) tip.id = `ui-tip-${++seq}`;
+  releaseMark(host);
+  fill(tip, mark);
+  place(host, tip, mark);
+  // Described only while shown, and only a mark that carried no description of its own.
+  if (!mark.hasAttribute('aria-describedby')) {
+    mark.setAttribute('aria-describedby', tip.id);
+    mark.__tipDescribed = true;
+  }
+  host.__tipMark = mark;
+  host.__tipDismissed = null;
+  tip.__tipHost = host;
+  tip.classList.add('is-open');
+  wireEscape(host.ownerDocument);
+}
+function releaseMark(host) {
+  const mark = host.__tipMark;
+  if (mark?.__tipDescribed) { mark.removeAttribute('aria-describedby'); mark.__tipDescribed = false; }
+  host.__tipMark = null;
+}
+function close(host) {
+  releaseMark(host);
+  tipOf(host)?.classList.remove('is-open');
+}
+/** Hide the host's readout: the pointer has left, so the mark Escape dismissed may show again. */
+export function hideTooltip(host) {
+  close(host);
+  host.__tipDismissed = null;
+}
+// Escape dismisses every readout the kit is showing without the pointer having
+// to move — the reader it covers something for. One rendered open and never
+// shown is a picture, and stays. The dismissed mark is remembered until another
+// mark shows or the pointer leaves, so crossing the gap between marks and coming
+// back does not return the readout to the mark it was dismissed from.
+function wireEscape(doc) {
+  if (doc.__tipEscapeWired) return;
+  doc.__tipEscapeWired = true;
+  doc.addEventListener('keydown', (e) => {
+    if (e.key !== 'Escape') return;
+    doc.querySelectorAll('[data-tip].is-open').forEach((tip) => {
+      const host = tip.__tipHost;
+      if (!host) return;
+      const mark = host.__tipMark;
+      close(host);
+      host.__tipDismissed = mark;
+    });
+  });
+}
+// The readout is placed in px from its host, so the host has to be the box it is
+// positioned against. .ui-tip-host makes it one; a host without it is given the same.
+// A host outside the document has no computed style to read, so it waits until it is in one.
+function anchorHost(host) {
+  if (host.__tipAnchored || !host.isConnected) return;
+  host.__tipAnchored = true;
+  if (getComputedStyle(host).position === 'static') host.style.position = 'relative';
+}
+/**
+ * Wire every `[data-tip-host]` under root: a pointer resting on a mark, or focus
+ * landing on one, shows the readout; leaving the marks hides it. A host with no
+ * readout of its own is given one here, once, never on hover. Safe to call again.
+ */
+export function wireTooltip(root = document) {
+  const hosts = [...root.querySelectorAll('[data-tip-host]')];
+  if (root.matches?.('[data-tip-host]')) hosts.unshift(root);
+  hosts.forEach((host) => {
+    if (host.__tipWired) return;
+    host.__tipWired = true;
+    anchorHost(host);
+    if (!tipOf(host)) host.insertAdjacentHTML('beforeend', tooltip());
+    const markOf = (t) => {
+      const mark = t?.closest?.('[data-tip-value]');
+      return mark && holds(host, mark) ? mark : null;
+    };
+    host.addEventListener('pointerover', (e) => {
+      anchorHost(host);
+      const mark = markOf(e.target);
+      if (!mark) close(host);
+      else if (mark !== host.__tipMark) showTooltip(host, mark);
+    });
+    host.addEventListener('pointerleave', () => hideTooltip(host));
+    host.addEventListener('focusin', (e) => {
+      anchorHost(host);
+      const mark = markOf(e.target);
+      if (mark) showTooltip(host, mark);
+    });
+    host.addEventListener('focusout', (e) => { if (!markOf(e.relatedTarget)) hideTooltip(host); });
+  });
+}

package/src/components/topbar.js CHANGED Viewed

@@ -41,12 +41,17 @@ export function deckTextSwitch(active = 'deck') {
 // Thin consumer of the shared dropdown wiring (wireDropdown): keeps its own
 // bespoke .vsw/.vopt classes for a pixel-identical look, but emits the generic
 // [data-dropdown] hooks so there's ONE open/close/keyboard implementation.
+// `badge` is a tone key and the kit writes the word for it; the stylesheet used
+// to uppercase the key itself. why: docs/specification.md#labels-and-titles
+const VBADGE = { live: 'Live', archive: 'Archive' };
 export function versionSwitcher(versions = [], activeIdx = 0) {
   const cur = versions[activeIdx]?.label || '';
-  const opts = versions.map((v, i) =>
-    `<div class="vopt" role="option" data-dd-item tabindex="-1" aria-selected="${i === activeIdx}" data-active="${i === activeIdx ? '1' : '0'}">` +
-    `<span><div class="vname">${v.label}</div><div class="vmeta">${v.meta || ''}</div></span>` +
-    `<span class="vbadge ${v.badge === 'live' ? 'live' : 'arch'}">${v.badge || 'archive'}</span></div>`).join('');
+  const opts = versions.map((v, i) => {
+    const key = String(v.badge || 'archive').toLowerCase();
+    return `<div class="vopt" role="option" data-dd-item tabindex="-1" aria-selected="${i === activeIdx}" data-active="${i === activeIdx ? '1' : '0'}">` +
+      `<span><div class="vname">${v.label}</div><div class="vmeta">${v.meta || ''}</div></span>` +
+      `<span class="vbadge ${key === 'live' ? 'live' : 'arch'}">${Object.hasOwn(VBADGE, key) ? VBADGE[key] : v.badge}</span></div>`;
+  }).join('');
   return `<div class="vsw" data-dropdown><button type="button" class="vsw__btn" data-dropdown-trigger aria-haspopup="listbox" aria-expanded="false" aria-label="Version — ${esc(cur)}">` +
     `<span class="lbl">version:</span><span class="cur">${cur}</span><span class="car"></span></button>` +
     `<div class="vsw__menu" data-dropdown-panel role="listbox" aria-label="Version">${opts}</div></div>`;

package/src/index.css CHANGED Viewed

@@ -24,10 +24,14 @@
 @import "./styles/tabs.css";
 @import "./styles/input.css";
 @import "./styles/dropdown.css";
+@import "./styles/tooltip.css";
 @import "./styles/nav.css";
+@import "./styles/back.css";
 @import "./styles/drawer.css";
 @import "./styles/confirm.css";
+@import "./styles/command-palette.css";
 @import "./styles/table.css";
+@import "./styles/pagination.css";
 @import "./styles/empty.css";
 @import "./styles/callout.css";
 @import "./styles/code.css";

package/src/index.js CHANGED Viewed

@@ -2,10 +2,13 @@
 // Styles ship separately: `import 'apliteni-ui/css'`.
 export * from './components/index.js';
 export * from './components/dropdown.js';
+export * from './components/tooltip.js';
 export * from './components/tabs.js';
 export * from './components/nav.js';
+export * from './components/back.js';
 export * from './components/drawer.js';
 export * from './components/confirm.js';
+export * from './components/command-palette.js';
 export * from './components/topbar.js';
 export * from './components/shell.js';
 export * from './components/footer.js';
@@ -13,6 +16,7 @@ export * from './components/feedback.js';
 export * from './components/toasts.js';
 export * from './components/success.js';
 export * from './components/loading.js';
+export * from './components/pagination.js';
 export * from './assets/icons.js';
 export * from './assets/brand.js';
 export * from './motion.js';

package/src/inline.js CHANGED Viewed

@@ -37,10 +37,14 @@ export const styles = {
   tabs: read('styles/tabs.css'),
   input: read('styles/input.css'),
   dropdown: read('styles/dropdown.css'),
+  tooltip: read('styles/tooltip.css'),
   nav: read('styles/nav.css'),
+  back: read('styles/back.css'),
   drawer: read('styles/drawer.css'),
   confirm: read('styles/confirm.css'),
+  commandPalette: read('styles/command-palette.css'),
   table: read('styles/table.css'),
+  pagination: read('styles/pagination.css'),
   empty: read('styles/empty.css'),
   callout: read('styles/callout.css'),
   code: read('styles/code.css'),
@@ -65,10 +69,14 @@ export const cssText = [
   styles.tabs,
   styles.input,
   styles.dropdown,
+  styles.tooltip,
   styles.nav,
+  styles.back,
   styles.drawer,
   styles.confirm,
+  styles.commandPalette,
   styles.table,
+  styles.pagination,
   styles.empty,
   styles.callout,
   styles.code,

package/src/motion.js CHANGED Viewed

@@ -1,7 +1,8 @@
 // apliteni-ui — motion hook.
 //
-// The one small, optional piece of JS behind the CSS motion library: a
-// scroll-reveal activator plus a replay helper. Everything else is pure CSS
+// The one small piece of JS behind the CSS motion library: a scroll-reveal
+// activator, the entrance player the components call when something they show
+// appears (playEntrance), and a replay helper. Everything else is pure CSS
 // (src/styles/motion.css). Framework-agnostic, no dependencies, guarded so it
 // no-ops cleanly under `node --test` / SSR (no window, no IntersectionObserver).
 //
@@ -59,6 +60,46 @@ export function initReveal(root) {
   return io;
 }
+/**
+ * How long playEntrance() waits for `animationend` before taking the class off
+ * itself. Longer than the slowest --dur-* token, so it only ever fires for an
+ * animation that never ran; src/motion.test.js holds it above that token.
+ */
+export const ENTRANCE_FALLBACK_MS = 1000;
+const entering = new WeakMap();
+/**
+ * Play the one-shot entrance of something the reader just caused to appear.
+ *
+ * Adds `className` and takes it off at the element's own `animationend`, or
+ * after ENTRANCE_FALLBACK_MS if that never fires (the element was hidden again,
+ * or no stylesheet gives the class an animation) — so the class is never left
+ * half-applied. The sheet decides what the entrance looks like: the component
+ * pairs the class with an animation in its own stylesheet. A component calls
+ * this on a change, never at first render, which is how the page loads still.
+ * Reduced motion needs no branch here: the net in reduced-motion.css shortens
+ * the animation to nothing and `animationend` still fires.
+ */
+export function playEntrance(el, className = 'is-entering') {
+  if (!el || !el.classList) return;
+  entering.get(el)?.();
+  el.classList.remove(className);
+  void el.offsetWidth; // restart the animation when the class was already on
+  el.classList.add(className);
+  let timer;
+  const done = (e) => {
+    if (e && e.target !== el) return; // a descendant's animation bubbling up
+    clearTimeout(timer);
+    el.removeEventListener('animationend', done);
+    el.classList.remove(className);
+    entering.delete(el);
+  };
+  el.addEventListener('animationend', done);
+  timer = setTimeout(done, ENTRANCE_FALLBACK_MS);
+  entering.set(el, () => done());
+}
 /** Restart the CSS animation on an element (for a "replay" control). */
 export function replay(el) {
   if (!el || !el.style) return;

package/src/styles/back.css ADDED Viewed

@@ -0,0 +1,42 @@
+/* ============================================================================
+ * Back link — .ui-back
+ * The way up from a page to the page it sits under. It stands above the page
+ * title, in the slot a breadcrumb trail would take, and it is quiet at rest: it
+ * is on every page below a list, and it is never what the page is for.
+ * why: docs/specification.md#the-back-link
+ * ========================================================================== */
+/* Its own line, and only as wide as its words, so the hover ground does not run
+   the width of the column. */
+.ui-back {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: var(--space-1);
+  /* WCAG 2.5.8's 24px: the line of text alone is 17px tall. */
+  min-height: var(--space-6);
+  padding: 0 var(--space-2) 0 var(--space-1);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  line-height: 1.3;
+  text-decoration: none;
+}
+/* [href] as well as the class, because a host stylesheet's `a:link` is (0,1,1)
+   and outranks a bare class: it would paint this in the host's link colour.
+   (0,2,0) wins without !important — the argument `.ui-nav .ui-nav__item` makes
+   in nav.css. */
+.ui-back[href] { color: var(--dim); }
+.ui-back[href]:hover { color: var(--strong); background: var(--surface-2); }
+.ui-back:focus-visible { outline: none; box-shadow: var(--ring); }
+/* 16px, with the stroke raised to match: the glyph set draws at 1.7 on a 24-unit
+   box, which is 1.13 CSS px at this size and under the kit's 1.5 for a stroked
+   mark. 2.4 paints 1.6. why: docs/specification.md#icons-and-glyphs */
+.ui-back svg { width: 16px; height: 16px; flex: none; stroke-width: 2.4; }
+/* In the page shell it takes the trail's place, and the trail's distance from
+   the title with it. */
+.ui-app__main > .ui-back { margin-bottom: var(--space-5); }

package/src/styles/badge.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /* ============================================================================
  * Badge / Pill / Tag
- *   .ui-badge        — uppercase status chip (live / soon / archive / neutral)
+ *   .ui-badge        — status chip (live / soon / archive / neutral)
  *   .ui-tag          — soft solid label
  *   .ui-dot          — leading status dot (pulses when .is-live)
  * ========================================================================== */
@@ -9,10 +9,9 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: 10px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  font-weight: var(--weight-bold);
+  /* rank: chip */
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
   padding: 3px 9px;
   border-radius: var(--radius-pill);
   color: var(--muted);
@@ -45,9 +44,8 @@
   display: inline-flex;
   align-items: center;
   gap: 7px;
+  /* rank: chip */
   font-size: var(--text-xs);
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
   color: var(--muted);
   background: var(--surface-2);
   border-radius: var(--radius-pill);

package/src/styles/base.css CHANGED Viewed

@@ -19,6 +19,7 @@ body {
   color: var(--text);
   font-family: var(--font-sans);
   font-weight: var(--weight-normal);
+  /* rank: body */
   font-size: var(--text-base);
   line-height: var(--leading-normal);
   -webkit-font-smoothing: antialiased;
@@ -40,8 +41,8 @@ a {
  * ELEMENT decides which — never the size. A size threshold would change a
  * heading's typeface halfway through a resize, which is the one thing a
  * reader notices. A component that wants a heading tag set in the text face
- * says so on its own rule, which outranks this one at (0,1,0); .ui-drawer__title
- * and .ui-confirm__title are the two that do.
+ * says so on its own rule, which outranks this one at (0,1,0); .ui-card__title,
+ * .ui-drawer__title and .ui-confirm__title are the three that do.
  * why: docs/specification.md#typefaces */
 h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-display);
@@ -113,13 +114,13 @@ strong {
 .ui-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(14px, 2.4vw, 26px); }
 .ui-stack > * + * { margin-top: var(--space-4); }
-/* Section eyebrow — uppercase caption used across cards and headers */
+/* Eyebrow — the label above a title or a figure, in sentence case like every
+   label in the kit. why: docs/specification.md#labels-and-titles */
 .ui-eyebrow {
-  font-size: var(--text-xs);
-  letter-spacing: var(--tracking-caps);
-  text-transform: uppercase;
+  /* rank: label */
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
   color: var(--muted);
-  font-weight: var(--weight-semibold);
 }
 /* Sensible default size for inline icons that a parent rule doesn't size.

package/src/styles/button.css CHANGED Viewed

@@ -100,7 +100,21 @@
 .ui-btn--ghost[aria-disabled="true"] {
   background: transparent;
   border-color: transparent;
+  color: var(--disabled-ink-bare);
 }
+/* With no box, the ink is read on whatever is behind it. --disabled-ink read
+   5.18:1 on a card and 4.66:1 on --surface-3 in dark, under #220's 5.56, so the
+   ghost takes an ink set for the dullest ground: in dark 7.00 / 6.24 / 6.69 /
+   5.62 on --bg / --surface / --surface-2 / --surface-3, in light 6.50 / 6.50 /
+   6.01 / 5.60. The enabled ghost's --dim reads 1.5 times that in dark, 1.6 in light.
+   #273 got here the long way. It first gave the ghost the flat disabled box
+   instead, on the claim that nothing would get less readable. That was false:
+   --bg and --surface lost up to 0.46. Then the box was rendered in a pager at
+   page 1, and the boxed First and Prev read heavier than the boxless Next and
+   Last beside them: the controls that were off looked like the live ones. No
+   contrast table shows that. The box was reverted and this ink shipped.
+   Held by src/styles/button-disabled.test.js. */
 /* Busy: keep the label, run an indeterminate accent shimmer along the base, and
    the button is disabled (not clickable). Pass busy + the .ui-btn__bars markup.

package/src/styles/card.css CHANGED Viewed

@@ -12,11 +12,12 @@
 }
 /* Light theme is an all-white app, so a filled card can't rely on a darker-
-   than-page surface the way the dark deck does — give it a hairline border +
-   soft shadow to read as a panel. Dark keeps the borderless deck look. */
+   than-page surface the way the dark deck does — a hairline border delineates
+   it instead. Flat, no drop shadow (#284). `none` rather than no declaration:
+   at (0,3,0) it outranks .ui-card--accent's inset ring, which light never showed. */
 :root[data-theme="light"] .ui-card {
   border: 1px solid var(--border);
-  box-shadow: var(--shadow-card);
+  box-shadow: none;
 }
 /* A table wider than its card scrolls INSIDE the card instead of bleeding past
@@ -50,17 +51,20 @@
   border: 0;
   text-align: left;
   font: inherit;
-  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease);
-}
-.ui-card--interactive:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
+  transition: transform var(--dur-fast) var(--ease);
 }
+/* The lift alone, no shadow: cards are flat (#284), and light never showed one. */
+.ui-card--interactive:hover { transform: translateY(-2px); }
+/* card() emits the title as an h2, so the text face is named here rather than
+   left to the element. why: docs/specification.md#labels-and-titles */
 .ui-card__title {
   color: var(--strong);
+  font-family: var(--font-sans);
+  /* rank: card-title */
   font-size: var(--text-lg);
   font-weight: var(--weight-semibold);
+  line-height: var(--leading-snug);
   display: flex;
   align-items: center;
   gap: 10px;

package/src/styles/code.css CHANGED Viewed

@@ -15,11 +15,10 @@
   padding: 10px 15px;
 }
 .ui-snippet__bar span {
-  font-size: 11.5px;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+  /* rank: label */
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
   color: var(--muted);
-  font-weight: var(--weight-semibold);
 }
 .ui-snippet pre {
   margin: 0;