@lyeve-labs/ui-kit 0.31.1 → 0.32.0

package/dist/internal/pricing.js

@@ -0,0 +1,77 @@
+/**
+ * The cart's shape and the volume ladder, shared by every surface that sells.
+ *
+ * Two sites sold the same catalog from two components. One posted the
+ * selection to the server and rendered the price that came back, the other
+ * computed a total in the browser from a catalog it had fetched, with a
+ * hardcoded list behind it for when the fetch failed. They agreed by
+ * coincidence, and the second carried a comment recording how thin the
+ * coincidence was: the discount has to be truncated rather than rounded, or
+ * the quote is a cent deeper than the charge.
+ *
+ * So nothing here computes a price. The types describe what the sales API
+ * returns, and the functions are presentation over the ladder: which rung a
+ * selection stands on and how far the next one is. The total always comes
+ * from the server, on both sites, because a price computed twice is a price
+ * that will disagree once.
+ */
+export function ladderState(brackets, count) {
+    const sorted = [...brackets].sort((a, b) => a.plugins - b.plugins);
+    const reachedPct = sorted
+        .filter((b) => b.plugins <= count)
+        .reduce((m, b) => Math.max(m, b.discount_pct), 0);
+    const step = sorted.find((b) => b.plugins > count && b.discount_pct > reachedPct);
+    let active = -1;
+    sorted.forEach((b, i) => {
+        if (count >= b.plugins)
+            active = i;
+    });
+    return {
+        count,
+        reachedPct,
+        next: step
+            ? { plugins: step.plugins, discount_pct: step.discount_pct, more: step.plugins - count }
+            : null,
+        active,
+    };
+}
+/**
+ * How many capabilities the bill will carry.
+ *
+ * For a new cart that is what is selected. For a change to a live
+ * subscription it is what is held as well, because that is the count the
+ * server prices the change at. Reading the cart alone put a subscriber on the
+ * list-price rung beside a total that had already taken the discount.
+ */
+export function billedCount(opts) {
+    const added = new Set(opts.selected);
+    if (!opts.change)
+        return added.size;
+    if (opts.pricedSkus)
+        return new Set(opts.pricedSkus).size;
+    return new Set([...(opts.held ?? []), ...added]).size;
+}
+/** One row per rung, labeled by the range it covers. */
+export function ladderRows(brackets) {
+    const sorted = [...brackets].sort((a, b) => a.plugins - b.plugins);
+    return sorted.map((b, i) => {
+        const next = sorted[i + 1];
+        return { from: b.plugins, to: next ? next.plugins - 1 : null, discount_pct: b.discount_pct };
+    });
+}
+/**
+ * Money, for display.
+ *
+ * The locale is fixed for the reason `number.ts` states: a server and the
+ * browser that hydrates its output do not have to report the same one, and a
+ * figure that changes under the reader is worse than one that is not local to
+ * them.
+ */
+export function formatCents(cents, currency = 'USD') {
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency,
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+    }).format(cents / 100);
+}

package/dist/internal/rollup.d.ts

@@ -1,15 +1,15 @@
 /**
  * The tri-state contract behind a permissions matrix and a checkable tree.
  *
- * A parent control does two jobs at once: it summarises the rows beneath it,
+ * A parent control does two jobs at once: it summarizes the rows beneath it,
  * and a click on it writes every one of them. Both surfaces folded that summary
  * with `rows.every(has)`, which is true over an empty array, so a group whose
  * rows were all filtered away or all disabled drew as fully granted and the
- * click that followed meant clear rather than fill. Summarising by count rather
+ * click that followed meant clear rather than fill. Summarizing by count rather
  * than by fold, and separating what may be written from what is counted, is the
  * whole reason this module exists.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /** What a parent control shows: nothing granted, part granted, all granted. */
 export type TriState = 'none' | 'some' | 'all';

package/dist/internal/rollup.js

@@ -1,15 +1,15 @@
 /**
  * The tri-state contract behind a permissions matrix and a checkable tree.
  *
- * A parent control does two jobs at once: it summarises the rows beneath it,
+ * A parent control does two jobs at once: it summarizes the rows beneath it,
  * and a click on it writes every one of them. Both surfaces folded that summary
  * with `rows.every(has)`, which is true over an empty array, so a group whose
  * rows were all filtered away or all disabled drew as fully granted and the
- * click that followed meant clear rather than fill. Summarising by count rather
+ * click that followed meant clear rather than fill. Summarizing by count rather
  * than by fold, and separating what may be written from what is counted, is the
  * whole reason this module exists.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /**
  * Rolls a set of rows up to one state.

package/dist/internal/scroll-edges.d.ts

@@ -6,13 +6,13 @@
  * the tab past the edge is otherwise unannounced. The arithmetic is the same
  * in both and lives here so a third scroller cannot get it subtly different.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 export interface ScrollEdges {
     before: boolean;
     after: boolean;
 }
-/** The three metrics the answer is read from; an element has all of them. */
+/** The three metrics the answer is read from. An element has all of them. */
 export interface ScrollMetrics {
     scrollWidth: number;
     clientWidth: number;
@@ -22,8 +22,8 @@ export declare function scrollEdges(el: ScrollMetrics): ScrollEdges;
 /**
  * The fade itself: a dark gradient on the edge, outside the scroll box so it
  * does not scroll away with the content it describes. Dark rather than a
- * palette colour, because the box sits on the page in one place and inside
- * a card in another and no surface token is the colour to fade to; the
+ * palette color, because the box sits on the page in one place and inside
+ * a card in another and no surface token is the color to fade to. The
  * scrims use black at an alpha for the same reason and it reads in both
  * themes. The direction is logical, so a right-to-left page fades the other
  * way.

package/dist/internal/scroll-edges.js

@@ -6,7 +6,7 @@
  * the tab past the edge is otherwise unannounced. The arithmetic is the same
  * in both and lives here so a third scroller cannot get it subtly different.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 export function scrollEdges(el) {
     const slack = el.scrollWidth - el.clientWidth;
@@ -16,14 +16,14 @@ export function scrollEdges(el) {
         return { before: false, after: false };
     // A right-to-left box reports the offset as a negative number, and the two
     // edges are the same two edges either way round.
-    const travelled = Math.abs(el.scrollLeft);
-    return { before: travelled > 1, after: travelled < slack - 1 };
+    const traveled = Math.abs(el.scrollLeft);
+    return { before: traveled > 1, after: traveled < slack - 1 };
 }
 /**
  * The fade itself: a dark gradient on the edge, outside the scroll box so it
  * does not scroll away with the content it describes. Dark rather than a
- * palette colour, because the box sits on the page in one place and inside
- * a card in another and no surface token is the colour to fade to; the
+ * palette color, because the box sits on the page in one place and inside
+ * a card in another and no surface token is the color to fade to. The
  * scrims use black at an alpha for the same reason and it reads in both
  * themes. The direction is logical, so a right-to-left page fades the other
  * way.

package/dist/internal/time.d.ts

@@ -16,7 +16,7 @@
  * rewrites a legal time, and a modulo that turns midnight into hour zero of a
  * clock with no hour zero.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /** One time, already range checked. `mi` rather than `m` so it cannot read as months. */
 export interface TimeParts {
@@ -47,7 +47,7 @@ export declare function parseISOTime(s: string | undefined | null): TimeParts |
  */
 export declare function toISOTime(p: TimeParts, seconds: boolean): string;
 /**
- * Steps one segment without carrying into its neighbour. Stepping the minute
+ * Steps one segment without carrying into its neighbor. Stepping the minute
  * past 59 wraps to 0 and leaves the hour alone, because a spinner that changes
  * two fields at once is not what the arrow key promised.
  *
@@ -91,7 +91,7 @@ export declare function to12Hour(h: number): {
     meridiem: 'AM' | 'PM';
 };
 /**
- * 12-hour back to 24. 12 AM is hour 0 and 12 PM is hour 12; every other hour is
+ * 12-hour back to 24. 12 AM is hour 0 and 12 PM is hour 12. Every other hour is
  * itself in the morning and itself plus twelve in the afternoon.
  */
 export declare function from12Hour(hour: number, meridiem: 'AM' | 'PM'): number;

package/dist/internal/time.js

@@ -16,7 +16,7 @@
  * rewrites a legal time, and a modulo that turns midnight into hour zero of a
  * clock with no hour zero.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /** Highest legal value plus one, per stepped segment. */
 const SEGMENT_SIZE = {
@@ -67,7 +67,7 @@ export function toISOTime(p, seconds) {
     return seconds ? `${base}:${pad2(p.s)}` : base;
 }
 /**
- * Steps one segment without carrying into its neighbour. Stepping the minute
+ * Steps one segment without carrying into its neighbor. Stepping the minute
  * past 59 wraps to 0 and leaves the hour alone, because a spinner that changes
  * two fields at once is not what the arrow key promised.
  *
@@ -149,7 +149,7 @@ export function to12Hour(h) {
     return { hour: wrapped === 0 ? 12 : wrapped, meridiem: h < 12 ? 'AM' : 'PM' };
 }
 /**
- * 12-hour back to 24. 12 AM is hour 0 and 12 PM is hour 12; every other hour is
+ * 12-hour back to 24. 12 AM is hour 0 and 12 PM is hour 12. Every other hour is
  * itself in the morning and itself plus twelve in the afternoon.
  */
 export function from12Hour(hour, meridiem) {

package/dist/internal/tone.d.ts

@@ -4,8 +4,8 @@
  * Alert, Banner and the toast store each named their neutral-informational tone
  * `info`, while Badge, Tag, Indicator and Progress named the same brand-cyan
  * tone `brand`. A consumer building a status row had to remember which
- * component wanted which word for the same colour. `brand` is canonical because
- * it names the token the tone actually resolves to; `info` still works and maps
+ * component wanted which word for the same color. `brand` is canonical because
+ * it names the token the tone actually resolves to. `info` still works and maps
  * onto it, so nothing that already ships has to change.
  */
 /** Tones a status surface can carry. */
@@ -20,7 +20,7 @@ export declare function statusTone(tone: StatusToneInput): StatusTone;
  * The glyph each status tone draws, as SVG path data on a 24x24 grid.
  *
  * Alert and Toaster drew these as the literal characters ℹ ✓ ! ×, which pick up
- * whatever the user's font does with them - the check and the cross landed at
+ * whatever the user's font does with them: the check and the cross landed at
  * different optical weights from every other icon in the library, all of which
  * are stroked SVG.
  */

package/dist/internal/tone.js

@@ -4,8 +4,8 @@
  * Alert, Banner and the toast store each named their neutral-informational tone
  * `info`, while Badge, Tag, Indicator and Progress named the same brand-cyan
  * tone `brand`. A consumer building a status row had to remember which
- * component wanted which word for the same colour. `brand` is canonical because
- * it names the token the tone actually resolves to; `info` still works and maps
+ * component wanted which word for the same color. `brand` is canonical because
+ * it names the token the tone actually resolves to. `info` still works and maps
  * onto it, so nothing that already ships has to change.
  */
 /** Resolves the accepted spelling to the canonical one. */
@@ -16,7 +16,7 @@ export function statusTone(tone) {
  * The glyph each status tone draws, as SVG path data on a 24x24 grid.
  *
  * Alert and Toaster drew these as the literal characters ℹ ✓ ! ×, which pick up
- * whatever the user's font does with them - the check and the cross landed at
+ * whatever the user's font does with them: the check and the cross landed at
  * different optical weights from every other icon in the library, all of which
  * are stroked SVG.
  */

package/dist/internal/touch.d.ts

@@ -7,7 +7,7 @@
  * value of `--spacing-control` and the `hit-area` utility all live beside the
  * palette so a consumer's build emits them.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /**
  * The control grows. For a control whose visual may take the finger's size:

package/dist/internal/touch.js

@@ -7,7 +7,7 @@
  * value of `--spacing-control` and the `hit-area` utility all live beside the
  * palette so a consumer's build emits them.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /**
  * The control grows. For a control whose visual may take the finger's size:

package/dist/internal/tree.d.ts

@@ -2,7 +2,7 @@
  * The shape of a data tree and the arithmetic a checkable one needs.
  *
  * A data tree is not a navigation menu. A menu shows where you can go and one
- * item is current; a tree shows a structure, and a branch in it summarises
+ * item is current. A tree shows a structure, and a branch in it summarizes
  * everything beneath it while a click on that branch writes every one of them.
  * Those two jobs are the reason this module exists: the summary and the write
  * have to be computed from the same list, or a branch reports a state its own
@@ -12,7 +12,7 @@
  * here. That module already holds the case a fold gets wrong, and a second
  * implementation of it would be a second chance to get it wrong.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 import type { Component } from 'svelte';
 import { type TriState } from './rollup.js';

package/dist/internal/tree.js

@@ -2,7 +2,7 @@
  * The shape of a data tree and the arithmetic a checkable one needs.
  *
  * A data tree is not a navigation menu. A menu shows where you can go and one
- * item is current; a tree shows a structure, and a branch in it summarises
+ * item is current. A tree shows a structure, and a branch in it summarizes
  * everything beneath it while a click on that branch writes every one of them.
  * Those two jobs are the reason this module exists: the summary and the write
  * have to be computed from the same list, or a branch reports a state its own
@@ -12,7 +12,7 @@
  * here. That module already holds the case a fold gets wrong, and a second
  * implementation of it would be a second chance to get it wrong.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 import { nextState, rollUp, setSubtree } from './rollup.js';
 /**

package/dist/motion.d.ts

@@ -18,7 +18,7 @@ export declare const FALLBACK: {
 };
 /**
  * What a preset hands Svelte. The function form is resolved once the element
- * is in the DOM, with the direction the animation is really playing in; under
+ * is in the DOM, with the direction the animation is really playing in. Under
  * `transition:` the directive itself only ever says `both`, so this is the
  * one way a single directive can tune its exit apart from its entrance.
  */
@@ -38,7 +38,7 @@ export declare function bezier(x1: number, y1: number, x2: number, y2: number):
 export declare function easing(curve: Curve): (x: number) => number;
 /** True when the document asked for no motion, or cannot play any. */
 export declare function still(node: Element): boolean;
-/** A centred dialog: rises a little and settles to full size. */
+/** A centered dialog: rises a little and settles to full size. */
 export declare const dialog: (node: Element) => Motion;
 /** The scrim behind a dialog or drawer, on the same clock as its surface. */
 export declare const scrim: (node: Element) => Motion;
@@ -55,7 +55,7 @@ export declare const popover: (node: Element) => Motion;
 export declare const toast: (node: Element) => Motion;
 /**
  * Siblings closing the gap a removed item leaves, for `animate:`. Svelte's
- * flip measures the move; the kit supplies the clock.
+ * flip measures the move. The kit supplies the clock.
  */
 export declare function reorder(node: Element, positions: {
     from: DOMRect;

package/dist/motion.js

@@ -6,7 +6,7 @@
  *     <li animate:motion.reorder>
  *
  * `|global` is not optional. A Svelte transition is local by default and
- * plays only when its own block toggles; a page that wraps a Modal in its own
+ * plays only when its own block toggles. A page that wraps a Modal in its own
  * `{#if}` to reset the form each time removes the whole component, and a
  * local exit never runs. Global plays it on any ancestor change.
  *
@@ -22,7 +22,7 @@
  * and a test holds them equal to the tokens.
  *
  * Two cases return no duration at all. A reader who asked for reduced motion
- * gets the state change and none of the travel; the reduced-motion block in
+ * gets the state change and none of the travel. The reduced-motion block in
  * theme.css cannot reach these, because Svelte drives them through the Web
  * Animations API and not through a stylesheet. And a document with no
  * `Element.animate`, which is every jsdom test, mounts and unmounts at once,
@@ -143,7 +143,7 @@ function surface(rung, css) {
         };
     };
 }
-/** A centred dialog: rises a little and settles to full size. */
+/** A centered dialog: rises a little and settles to full size. */
 export const dialog = surface('slow', (t, u) => `opacity: ${t}; transform: translateY(${8 * u}px) scale(${0.96 + 0.04 * t})`);
 /** The scrim behind a dialog or drawer, on the same clock as its surface. */
 export const scrim = surface('slow', (t) => `opacity: ${t}`);
@@ -161,7 +161,7 @@ export const popover = surface('base', (t, u) => `opacity: ${t}; transform: tran
 export const toast = surface('base', (t, u) => `opacity: ${t}; transform: translateY(${8 * u}px) scale(${0.96 + 0.04 * t})`);
 /**
  * Siblings closing the gap a removed item leaves, for `animate:`. Svelte's
- * flip measures the move; the kit supplies the clock.
+ * flip measures the move. The kit supplies the clock.
  */
 export function reorder(node, positions, _params) {
     if (still(node))

package/dist/stores/toast.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { StatusToneInput } from '../internal/tone.js';
 /**
  * A toast carries the same tone vocabulary as Alert and Banner. `brand` is the
- * canonical name; `info` is kept because `toast.info(...)` already ships.
+ * canonical name. `info` is kept because `toast.info(...)` already ships.
  */
 export type ToastTone = StatusToneInput;
 export interface Toast {

package/dist/styles/theme.css

@@ -1,8 +1,8 @@
 /*
- * @lyeve-labs/ui-kit - theme tokens
+ * @lyeve-labs/ui-kit: theme tokens
  *
  * A single CSS file imported once at the top of your app's root stylesheet.
- * Declares two palettes - Soft Dark (default) and Soft Light - built from
+ * Declares two palettes, Soft Dark (default) and Soft Light, built from
  * the LyEve brand guideline (Ink #0B1422 + Cyan #00D4FF) and exposes them
  * as Tailwind v4 `@theme` tokens.
  *
@@ -44,7 +44,7 @@
   --color-line-strong: #616d80;
   --color-fg: #e6e8ee;
   --color-muted: #9aa1ad;
-  /* #525866 failed WCAG AA against surface/ink (~2.5:1); every caption and
+  /* #525866 failed WCAG AA against surface/ink (~2.5:1). Every caption and
    * metadata label uses faint, so one token fix clears the systemic
    * violation. #8b94a7 sits at ~5.6:1 on surface and ~5.9:1 on ink. */
   --color-faint: #8b94a7;
@@ -61,7 +61,7 @@
    * tokens because the brand ramp above is tuned for text contrast: in the
    * light theme it darkens to #005a77 and brand-light sits below brand, so a
    * mark painted from it inverts its lighting. A logotype is exempt from the
-   * contrast floor, so these keep the published colours instead. */
+   * contrast floor, so these keep the published colors instead. */
   --color-mark-ink: #ffffff;
   --color-mark-foot: #9aa1ad;
   --color-mark-step: #c5cad3;
@@ -79,7 +79,7 @@
    * cannot work as a foreground on a dark surface.
    *
    * One token serves both roles because it inverts with `ink`. As text on a
-   * dark surface #f87171 reads 6.30:1; as the fill behind a `text-ink` label
+   * dark surface #f87171 reads 6.30:1. As the fill behind a `text-ink` label
    * on a filled destructive button it reads 6.67:1. The light palette does
    * the same in reverse with a dark red and a near-white ink. */
   --color-danger: #f87171;
@@ -92,7 +92,7 @@
   --radius-xl: 16px;
   --radius-2xl: 24px;
 
-  /* -- Elevation - the stacking order of everything that floats --- *
+  /* -- Elevation: the stacking order of everything that floats --- *
    *  Every floating surface in the kit carried a bare z-50, so which
    *  one won was decided by document order: a Dropdown opened after a
    *  Modal painted over it, and the same two in the other order did
@@ -123,16 +123,16 @@
   --z-index-dropdown: 100; /* a panel anchored to its trigger    */
   --z-index-overlay: 200; /* the scrim behind a drawer or modal */
   --z-index-drawer: 300; /* a panel docked to a viewport edge  */
-  --z-index-modal: 400; /* a centred dialog, and the stack    */
+  --z-index-modal: 400; /* a centered dialog, and the stack    */
   --z-index-tooltip: 500; /* a label attached to a control      */
   --z-index-toast: 600; /* transient status                   */
   --z-index-skip-link: 700; /* the first tab stop in the document */
 
-  /* -- Motion - four durations, three curves, one rule for exits -- *
+  /* -- Motion: four durations, three curves, one rule for exits -- *
    *  Named for what they are used for, so the choice is made by
    *  reading the name:
    *
-   *    fast      a state change in place: colour, opacity, border,
+   *    fast      a state change in place: color, opacity, border,
    *              shadow, focus
    *    base      movement in place (a knob, a chevron, a collapse, a
    *              tab indicator) and a small surface arriving (menu,
@@ -145,7 +145,7 @@
    *    move      changing in place
    *
    *  An exit runs one rung faster than its entrance and on exit:
-   *  slow in, base out; base in, fast out. Entrances and exits move
+   *  slow in, base out. Base in, fast out. Entrances and exits move
    *  only opacity and transform.
    *
    *  Tailwind builds no utility from a --duration-* token: there is
@@ -161,8 +161,8 @@
    *  wrote `duration-150` fifty times to say the same thing.
    *
    *  The reduced-motion block at the foot of this file overrides
-   *  every one of them and stays the authority on whether they run;
-   *  the Svelte presets in motion.ts honour the same preference for
+   *  every one of them and stays the authority on whether they run.
+   *  The Svelte presets in motion.ts honor the same preference for
    *  the entrances and exits that run outside CSS.                    */
   --duration-fast: 120ms;
   --duration-base: 200ms;
@@ -178,7 +178,7 @@
 
   /* The one entrance that is a CSS animation. A panel inside <details> is
    * shown and removed by the browser, so a Svelte transition never sees it
-   * leave; it plays this on the way in and nothing on the way out. Every
+   * leave. It plays this on the way in and nothing on the way out. Every
    * other surface enters and leaves through the presets in motion.ts. */
   --animate-popover-in: popover-in var(--duration-base) var(--ease-enter);
 
@@ -223,7 +223,7 @@
   --tracking-h2: -0.02em;
   --tracking-h3: -0.015em;
 
-  /* -- Typography - console type scale --------------------------- *
+  /* -- Typography: console type scale --------------------------- *
    *  Token       Size   Line   Where it renders                    *
    *  text-xs     12px   16px   labels, table heads, metadata, hints*
    *  text-sm     14px   20px   body copy and every control         *
@@ -259,7 +259,7 @@
    *
    *  A step is declared with its leading, because a --text-* token
    *  sets font-size and nothing else. Only the six steps the kit
-   *  actually renders are declared; the larger ones a marketing
+   *  actually renders are declared. The larger ones a marketing
    *  page reaches for stay as Tailwind ships them.               */
   --text-xs: 0.75rem; /* 12px */
   --text-xs--line-height: calc(1 / 0.75); /* 16px */
@@ -277,32 +277,32 @@
   /* ── Spacing grid · 4px base (semantic shortcuts) ────────────── *
    *  Tailwind's default 0.25rem (4px) grid is unchanged.          *
    *  These tokens add named slots for common component spacing.   */
-  --spacing-page-x: 1.5rem; /* 24px - page horizontal gutter     */
-  --spacing-page-y: 1.5rem; /* 24px - page vertical gutter. Equal to page-x because no page
-                             * measured renders an asymmetric gutter; the two names stay
+  --spacing-page-x: 1.5rem; /* 24px: page horizontal gutter     */
+  --spacing-page-y: 1.5rem; /* 24px: page vertical gutter. Equal to page-x because no page
+                             * measured renders an asymmetric gutter. The two names stay
                              * separate so one axis can move without dragging the other. */
-  --spacing-card: 1.25rem; /* 20px - card inner padding. 24px matched none of the card
-                            * surfaces in use; 20px is their measured mode and Card's own md. */
-  --spacing-card-sm: 1rem; /* 16px - compact card padding       */
-  --spacing-section: 2rem; /* 32px - section gap. 48px matched nothing anywhere; 32px is the
+  --spacing-card: 1.25rem; /* 20px: card inner padding. 24px matched none of the card
+                            * surfaces in use. 20px is their measured mode and Card's own md. */
+  --spacing-card-sm: 1rem; /* 16px: compact card padding       */
+  --spacing-section: 2rem; /* 32px: section gap. 48px matched nothing anywhere. 32px is the
                             * gap the pages that set one already use, and PageHeader's own. */
-  --spacing-input-x: 0.75rem; /* 12px - input horizontal padding   */
+  --spacing-input-x: 0.75rem; /* 12px: input horizontal padding   */
   --spacing-input-y: 0.5rem; /* 8px  - input vertical padding     */
-  /* 38px - the height of every single-line control. Stated once so an Input,
+  /* 38px: the height of every single-line control. Stated once so an Input,
    * a Select and a NumberInput sitting in the same row line up. Derived from
    * the 13px/1.25 control text plus input-y padding and a 1px border. Under a
-   * coarse pointer it is 44px; see the touch-target block below the palette. */
+   * coarse pointer it is 44px. See the touch-target block below the palette. */
   --spacing-control: 2.375rem;
-  --spacing-panel-max: 15rem; /* 240px - the scroll cap on a floating option list */
-  /* 56px - the app header bar, and the sidebar's brand row above the nav.
+  --spacing-panel-max: 15rem; /* 240px: the scroll cap on a floating option list */
+  /* 56px: the app header bar, and the sidebar's brand row above the nav.
    * One token, because the two sit side by side across the top of every
    * authed screen and a 4px disagreement between them reads as a broken
    * seam. Three apps each picked their own height before this existed. */
   --spacing-header: 3.5rem;
-  --spacing-nav-indent: 0.875rem; /* 14px - one level of sidebar nesting */
-  --spacing-nav-rail: 3.5rem; /* 56px - the collapsed icon rail */
-  --spacing-sidebar: 14rem; /* 224px - the expanded sidebar */
-  --spacing-stack: 1rem; /* 16px - default vertical stack gap */
+  --spacing-nav-indent: 0.875rem; /* 14px: one level of sidebar nesting */
+  --spacing-nav-rail: 3.5rem; /* 56px: the collapsed icon rail */
+  --spacing-sidebar: 14rem; /* 224px: the expanded sidebar */
+  --spacing-stack: 1rem; /* 16px: default vertical stack gap */
   --spacing-inline: 0.5rem; /* 8px  - default inline gap         */
 
   /* ── Widths · how much room a surface is allowed to take ───── *
@@ -317,8 +317,8 @@
    *  drawers asked for the widest rung there was, which is what a   *
    *  ladder that stops too early looks like from the outside.      */
   --container-page-narrow: 56rem; /* 896px  - one column: a form, a settings pane  */
-  --container-page-default: 72rem; /* 1152px - a page of stacked cards             */
-  --container-page-wide: 96rem; /* 1536px - a data page whose table needs the room */
+  --container-page-default: 72rem; /* 1152px: a page of stacked cards             */
+  --container-page-wide: 96rem; /* 1536px: a data page whose table needs the room */
 
   /* One ladder for every surface lifted off the page, so a drawer and
    * a modal opened from the same screen are the same size. Each rung
@@ -328,7 +328,7 @@
   --container-overlay-md: 36rem; /* 576px  - up to four fields                */
   --container-overlay-lg: 44rem; /* 704px  - a form with paired fields        */
   --container-overlay-xl: 56rem; /* 896px  - a form beside a preview          */
-  --container-overlay-full: 68rem; /* 1088px - a table inside a dialog        */
+  --container-overlay-full: 68rem; /* 1088px: a table inside a dialog        */
 }
 
 /*
@@ -350,13 +350,13 @@
  *
  * `hit-area` does not move the visual. A switch, a checkbox, a breadcrumb, a
  * pager button, a close cross and an icon inside an input are drawn small on
- * purpose and grown to 44px would push their neighbours around; each one
- * draws an invisible box centred on itself that is never smaller than the
+ * purpose and grown to 44px would push their neighbors around. Each one
+ * draws an invisible box centered on itself that is never smaller than the
  * control size, and a tap on the box lands on the control. The element must
  * be positioned (`relative`, or `absolute` where it already is) for the box
- * to centre on it; the utility does not set position itself, because a
+ * to center on it. The utility does not set position itself, because a
  * position it set would fight the `absolute` an input's clear button relies
- * on. Two neighbours' boxes may overlap; the later one in document order
+ * on. Two neighbors' boxes may overlap. The later one in document order
  * wins the overlap, which is the spacing exception SC 2.5.8 allows for.
  */
 @custom-variant coarse (@media (pointer: coarse));
@@ -392,7 +392,7 @@ html[data-theme='light'] {
   --color-line-strong: #767d8e;
   --color-fg: #111827;
   --color-muted: #525866;
-  /* Every value below is the lightest colour on its own hue that clears
+  /* Every value below is the lightest color on its own hue that clears
    * 4.5:1 against the worst background the kit actually paints it on. That
    * worst case is rarely the bare canvas: status text and brand chips sit
    * inside a tint of their own token (bg-warn/10 text-warn), and the tint
@@ -425,7 +425,7 @@ html[data-theme='light'] {
 /*
  * A forced-colors scheme repaints the page but not a fill named in hex, so the
  * mark's white column vanished on a white high-contrast canvas. Its neutral
- * faces take the system colours there; the cyan faces keep their shape.
+ * faces take the system colors there. The cyan faces keep their shape.
  */
 @media (forced-colors: active) {
   :root,
@@ -515,8 +515,8 @@ html[data-theme='light'] {
   /*
    * Every animation in the kit ran regardless of what the reader asked for:
    * the drawer slid, the toast flew in, the pulse and ping looped forever.
-   * Honouring the preference once here covers every component, including any
-   * added later, which is the only way it stays honoured.
+   * Honoring the preference once here covers every component, including any
+   * added later, which is the only way it stays honored.
    *
    * Durations are not zeroed. An animation that finishes in 1ms still fires its
    * animationend, so components that wait on one keep working.
@@ -565,12 +565,12 @@ html[data-theme='light'] {
    * Every kit component paints from these tokens, so redefining them here
    * turns the whole library monochrome without a single component knowing
    * about paper. Browsers drop backgrounds when printing by default, which
-   * left light text on the white the printer supplies; naming white here means
+   * left light text on the white the printer supplies. Naming white here means
    * the two agree either way.
    *
    * The status hues collapse to black rather than to a print-safe tint. A
-   * colour that carries meaning on screen carries none through a mono printer,
-   * and a legible black label beats an unreadable coloured one.
+   * color that carries meaning on screen carries none through a mono printer,
+   * and a legible black label beats an unreadable colored one.
    */
   html,
   html[data-theme='light'] {