@lyeve-labs/ui-kit 0.31.1 → 0.32.0

package/dist/internal/field.js

@@ -7,12 +7,12 @@
  * an Input and a NumberInput placed side by side did not line up. Changing a
  * control's appearance now means changing one of these constants.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
-/** Vertical rhythm inside a labelled field: label, control, hint/error. */
+/** Vertical rhythm inside a labeled field: label, control, hint/error. */
 export const FIELD_WRAP = 'flex flex-col gap-1.5';
 /**
- * The marker every labelled field carries on its outermost element, and the
+ * The marker every labeled field carries on its outermost element, and the
  * only way a surface can ask how much form it is holding.
  *
  * A class would not do: FIELD_WRAP is three utilities a caller may legitimately
@@ -41,20 +41,20 @@ export const FIELD_HINT = 'text-xs text-faint';
 /** Error text below a control. Replaces the hint rather than stacking with it. */
 export const FIELD_ERROR = 'text-xs text-danger';
 /**
- * Everything a single-line control needs except its border colour.
+ * Everything a single-line control needs except its border color.
  *
  * `h-control` is a theme token (2.375rem / 38px), not a literal, so the height
- * is stated once. Controls that grow with their content - Textarea, the
- * MultiSelect chip well - use `CONTROL_MULTILINE` instead and keep the token as
+ * is stated once. Controls that grow with their content: Textarea, the
+ * MultiSelect chip well: use `CONTROL_MULTILINE` instead and keep the token as
  * a minimum.
  */
 /**
  * outline-none must be paired with a replacement. It was not here: theme.css
  * declares a global :focus-visible outline of 2px solid brand, chosen for its
- * contrast, and a utility beats the base layer, so these two cancelled the
+ * contrast, and a utility beats the base layer, so these two canceled the
  * kit's own focus indicator for every text input, textarea, number and select.
- * Focus was left as a 1px border-colour change. SidebarNav's buttons and
- * CONTROL_SEGMENT already pair the two correctly; these did half of it.
+ * Focus was left as a 1px border-color change. SidebarNav's buttons and
+ * CONTROL_SEGMENT already pair the two correctly. These did half of it.
  */
 export const CONTROL_BASE = 'w-full h-control rounded-lg bg-surface-2 border px-3 text-sm text-fg ' +
     'placeholder:text-faint transition-colors outline-none ' +
@@ -76,7 +76,7 @@ export const CONTROL_MULTILINE = 'w-full min-h-control rounded-lg bg-surface-2 b
 export function controlBorder(error) {
     // line-strong, not line: at 1.25:1 against the page the resting border was
     // the only thing marking the control and it failed SC 1.4.11. line stays the
-    // divider colour, where there is no control to identify.
+    // divider color, where there is no control to identify.
     return error ? 'border-danger focus:border-danger' : 'border-line-strong focus:border-brand';
 }
 /**
@@ -84,7 +84,7 @@ export function controlBorder(error) {
  *
  * Returns undefined when neither is present, so the attribute is omitted rather
  * than pointing at an element that was never rendered. Only Input carried
- * `aria-invalid` before this; nothing carried `aria-describedby`, so a screen
+ * `aria-invalid` before this. Nothing carried `aria-describedby`, so a screen
  * reader announced the control and never the reason it was rejected.
  */
 export function describedBy(id, error, hint) {
@@ -123,7 +123,7 @@ export function segmentedBorder(error) {
  *
  * It carries no width. A two-digit segment needs a fixed one so the control
  * does not resize as the user types, and an AM/PM select needs to size to its
- * own text; stating a width here would mean one of the two overriding it, and
+ * own text. Stating a width here would mean one of the two overriding it, and
  * two width utilities on one element resolve by the order Tailwind emits them
  * rather than the order they were written.
  *

package/dist/internal/filter.d.ts

@@ -8,14 +8,14 @@
  *
  * It reads the label and nothing else, so an option a user knows by its value,
  * its airport code or a synonym could not be found. It compares raw code
- * points, so a query of "cafe" missed an option labelled with an acute accent.
+ * points, so a query of "cafe" missed an option labeled with an acute accent.
  * It trims and lowercases the query once per option instead of once per
  * keystroke. And it is not a prop, so a consumer whose list arrives already
  * narrowed by a server query had no way to switch local filtering off or to say
  * what a match means for their data. Both controls now call applyFilter, which
  * takes a matcher the call site can replace or disable.
  *
- * 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 matcher is told about the query, computed once per keystroke rather than per option. */
 export interface FilterContext {
@@ -52,7 +52,7 @@ export declare function normalize(value: string): string;
 /**
  * The default matcher: case- and accent-insensitive substring over the label,
  * plus any keywords the option carries. Label-only matching is what ships
- * today; keywords are additive and absent on every existing option, so adopting
+ * today. Keywords are additive and absent on every existing option, so adopting
  * this changes no current list.
  *
  * An empty needle keeps every option. applyFilter answers an empty query before

package/dist/internal/filter.js

@@ -8,14 +8,14 @@
  *
  * It reads the label and nothing else, so an option a user knows by its value,
  * its airport code or a synonym could not be found. It compares raw code
- * points, so a query of "cafe" missed an option labelled with an acute accent.
+ * points, so a query of "cafe" missed an option labeled with an acute accent.
  * It trims and lowercases the query once per option instead of once per
  * keystroke. And it is not a prop, so a consumer whose list arrives already
  * narrowed by a server query had no way to switch local filtering off or to say
  * what a match means for their data. Both controls now call applyFilter, which
  * takes a matcher the call site can replace or disable.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /**
  * Trim, lowercase, and fold diacritics through NFD so that a query of "e"
@@ -34,7 +34,7 @@ export function normalize(value) {
 /**
  * The default matcher: case- and accent-insensitive substring over the label,
  * plus any keywords the option carries. Label-only matching is what ships
- * today; keywords are additive and absent on every existing option, so adopting
+ * today. Keywords are additive and absent on every existing option, so adopting
  * this changes no current list.
  *
  * An empty needle keeps every option. applyFilter answers an empty query before

package/dist/internal/href.d.ts

@@ -7,7 +7,7 @@
  * from a caller supplied function, and a rule kept in two places is a rule that
  * gets fixed in one of 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 href as given, or nothing when its scheme is one no component will emit. */
 export declare function safeHref(href: string | undefined | null): string | undefined;

package/dist/internal/href.js

@@ -7,7 +7,7 @@
  * from a caller supplied function, and a rule kept in two places is a rule that
  * gets fixed in one of 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 characters a browser drops before it reads the scheme.

package/dist/internal/layout.d.ts

@@ -15,7 +15,7 @@
  * theme declares, `--spacing-control` was the one with any uses, and it had
  * them because the field contract composes from it.
  *
- * 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 treatment a section heading takes, independent of its level. */
 export type SectionVariant = 'default' | 'eyebrow';
@@ -60,7 +60,7 @@ export type OverlaySize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
  */
 export declare const OVERLAY_WIDTH: Record<OverlaySize, string>;
 /**
- * The rung a body of this many labelled fields needs.
+ * The rung a body of this many labeled fields needs.
  *
  * A panel is sized by its caller today, and the caller is guessing: all 18
  * drawers measured across three consuming applications ask for the widest rung
@@ -113,7 +113,7 @@ export declare const CARD_HEADER = "px-card py-card-sm border-b border-line";
 /** The band below a card's content. CARD_HEADER's inset, with the rule on top. */
 export declare const CARD_FOOTER = "px-card py-card-sm border-t border-line bg-surface-2/40";
 /**
- * A placeholder inside a card, where three spellings of the same centred muted
+ * A placeholder inside a card, where three spellings of the same centered muted
  * line currently ship.
  *
  * An empty list is not an error, so it reads as muted body copy and not as a
@@ -132,7 +132,7 @@ export declare const CARD_EMPTY = "py-section text-center text-sm text-muted";
  * near equal numbers, and 8px is the one the token scale names.
  */
 export declare const TABLE_CELL_HEAD = "px-card-sm py-input-y text-xs font-medium uppercase tracking-wider whitespace-nowrap text-faint";
-/** The body cell of a table. TABLE_CELL_HEAD's padding, at body weight and colour. */
+/** The body cell of a table. TABLE_CELL_HEAD's padding, at body weight and color. */
 export declare const TABLE_CELL_BODY = "px-card-sm py-input-y text-fg align-middle";
 /**
  * The gutter every modal surface uses. Modal paints 20px and Dialog paints
@@ -157,7 +157,7 @@ export declare const MODAL_PAD = "px-card py-card-sm";
  * element is a decision about document structure and the treatment is not: an
  * eyebrow appears at both levels. It went unnamed here while thirty of them
  * shipped hand rolled across two apps in four different bottom margins, and a
- * margin is exactly what this function must not carry - the stack around the
+ * margin is exactly what this function must not carry: the stack around the
  * heading owns the distance to what follows.
  */
 export declare function sectionHeading(level: 2 | 3, variant?: SectionVariant): string;
@@ -166,7 +166,7 @@ export declare function sectionHeading(level: 2 | 3, variant?: SectionVariant):
  *
  * Three apps hand rolled this and none of the three agreed. The sidebar was
  * `w-56` in the admin and `w-60` in the other two, `bg-surface` in two and
- * `bg-surface/30` in the third; the header existed in one and not in the other
+ * `bg-surface/30` in the third. The header existed in one and not in the other
  * two. None of that was visible from inside any one app, which is why it went
  * on being three shells for as long as it did.
  *
@@ -178,7 +178,7 @@ export declare const APP_SIDEBAR = "h-full shrink-0 flex-col border-e border-lin
  * The sidebar's two widths. Expanded is the 224px column every authed screen
  * had. The rail is the 56px icon column the theme had named and nothing used:
  * at 768px the expanded column left 496px for the page, and a flow editor with
- * two docked panes had no canvas at all. The shell picks between them; the
+ * two docked panes had no canvas at all. The shell picks between them. The
  * width is not part of APP_SIDEBAR so the aside cannot carry both.
  *
  * The travel between them is on APP_SIDEBAR, which is the one class both

package/dist/internal/layout.js

@@ -15,7 +15,7 @@
  * theme declares, `--spacing-control` was the one with any uses, and it had
  * them because the field contract composes from it.
  *
- * 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 gutter a page sits in, stated once.
@@ -65,7 +65,7 @@ export const OVERLAY_WIDTH = {
     full: 'max-w-overlay-full',
 };
 /**
- * The rung a body of this many labelled fields needs.
+ * The rung a body of this many labeled fields needs.
  *
  * A panel is sized by its caller today, and the caller is guessing: all 18
  * drawers measured across three consuming applications ask for the widest rung
@@ -129,7 +129,7 @@ export const CARD_HEADER = 'px-card py-card-sm border-b border-line';
 /** The band below a card's content. CARD_HEADER's inset, with the rule on top. */
 export const CARD_FOOTER = 'px-card py-card-sm border-t border-line bg-surface-2/40';
 /**
- * A placeholder inside a card, where three spellings of the same centred muted
+ * A placeholder inside a card, where three spellings of the same centered muted
  * line currently ship.
  *
  * An empty list is not an error, so it reads as muted body copy and not as a
@@ -148,7 +148,7 @@ export const CARD_EMPTY = 'py-section text-center text-sm text-muted';
  * near equal numbers, and 8px is the one the token scale names.
  */
 export const TABLE_CELL_HEAD = 'px-card-sm py-input-y text-xs font-medium uppercase tracking-wider whitespace-nowrap text-faint';
-/** The body cell of a table. TABLE_CELL_HEAD's padding, at body weight and colour. */
+/** The body cell of a table. TABLE_CELL_HEAD's padding, at body weight and color. */
 export const TABLE_CELL_BODY = 'px-card-sm py-input-y text-fg align-middle';
 /**
  * The gutter every modal surface uses. Modal paints 20px and Dialog paints
@@ -173,7 +173,7 @@ export const MODAL_PAD = 'px-card py-card-sm';
  * element is a decision about document structure and the treatment is not: an
  * eyebrow appears at both levels. It went unnamed here while thirty of them
  * shipped hand rolled across two apps in four different bottom margins, and a
- * margin is exactly what this function must not carry - the stack around the
+ * margin is exactly what this function must not carry: the stack around the
  * heading owns the distance to what follows.
  */
 export function sectionHeading(level, variant = 'default') {
@@ -200,7 +200,7 @@ export function sectionHeading(level, variant = 'default') {
  *
  * Three apps hand rolled this and none of the three agreed. The sidebar was
  * `w-56` in the admin and `w-60` in the other two, `bg-surface` in two and
- * `bg-surface/30` in the third; the header existed in one and not in the other
+ * `bg-surface/30` in the third. The header existed in one and not in the other
  * two. None of that was visible from inside any one app, which is why it went
  * on being three shells for as long as it did.
  *
@@ -212,7 +212,7 @@ export const APP_SIDEBAR = 'h-full shrink-0 flex-col border-e border-line bg-sur
  * The sidebar's two widths. Expanded is the 224px column every authed screen
  * had. The rail is the 56px icon column the theme had named and nothing used:
  * at 768px the expanded column left 496px for the page, and a flow editor with
- * two docked panes had no canvas at all. The shell picks between them; the
+ * two docked panes had no canvas at all. The shell picks between them. The
  * width is not part of APP_SIDEBAR so the aside cannot carry both.
  *
  * The travel between them is on APP_SIDEBAR, which is the one class both

package/dist/internal/listbox.svelte.d.ts

@@ -24,7 +24,7 @@
  * it. A single-value control calls close('select') from its own onSelect, which
  * is why that reason 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.
  */
 /** The least a row has to be for the keyboard model to work on it. */
 export interface ListboxItem {

package/dist/internal/listbox.svelte.js

@@ -24,7 +24,7 @@
  * it. A single-value control calls close('select') from its own onSelect, which
  * is why that reason 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.
  */
 import { normalize } from './filter.js';
 /**
@@ -251,7 +251,7 @@ export function createListbox(config) {
         if (event.key === ' ' && typed === '')
             return false;
         // Date.now is a timestamp, not a timer: nothing is scheduled and nothing
-        // has to be cancelled when the control unmounts mid-run.
+        // has to be canceled when the control unmounts mid-run.
         const now = Date.now();
         typed = now - typedAt > TYPEAHEAD_WINDOW_MS ? event.key : typed + event.key;
         typedAt = now;
@@ -307,7 +307,7 @@ export function createListbox(config) {
                 return true;
             case 'Escape':
                 // Only an open list consumes Escape. Unstopped, one press closed both
-                // a listbox and the Modal holding it; consumed while closed, Escape
+                // a listbox and the Modal holding it. Consumed while closed, Escape
                 // never reached the Modal at all.
                 if (!open)
                     return false;

package/dist/internal/nav-expansion.svelte.d.ts

@@ -14,7 +14,7 @@
  * the tree and the path underneath them. A reader decision always wins, and
  * until there is one the group follows the page.
  *
- * 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 NavTree } from './nav-tree.js';
 export interface NavExpansionOptions {

package/dist/internal/nav-expansion.svelte.js

@@ -14,13 +14,13 @@
  * the tree and the path underneath them. A reader decision always wins, and
  * until there is one the group follows the page.
  *
- * 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 { activeTrail, flattenNav } from './nav-tree.js';
 /**
  * localStorage is absent on the server and throws on access in a private
  * window and wherever the reader has blocked site data, so it is reached for
- * behind both a typeof guard and a catch. Expansion is a convenience; nothing
+ * behind both a typeof guard and a catch. Expansion is a convenience. Nothing
  * here may be the reason a sidebar fails to render.
  */
 function storage() {

package/dist/internal/nav-tree.d.ts

@@ -14,13 +14,13 @@
  * they are siblings and only one of them can be open.
  *
  * The fix is that prefix matching is a property of a node that owns a section,
- * not of every node. A leaf answers for its own path and nothing below it; a
+ * not of every node. A leaf answers for its own path and nothing below it. A
  * node with children answers for its whole subtree, because that is what makes
  * an ancestor able to say "you are somewhere in here" while its child says
  * "you are here". Either default is overridable per node, and 'none' opts a
  * node out of path matching entirely.
  *
- * 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 { AccentTone } from './tone.js';
@@ -47,7 +47,7 @@ export type NavTree = NavNode[];
 /**
  * True when this node is the current page.
  *
- * Path only. A disabled node still reports the truth about its href; whether
+ * Path only. A disabled node still reports the truth about its href. Whether
  * it is rendered as a link is a separate decision the component makes.
  */
 export declare function isActive(node: NavNode, activePath: string): boolean;

package/dist/internal/nav-tree.js

@@ -14,13 +14,13 @@
  * they are siblings and only one of them can be open.
  *
  * The fix is that prefix matching is a property of a node that owns a section,
- * not of every node. A leaf answers for its own path and nothing below it; a
+ * not of every node. A leaf answers for its own path and nothing below it. A
  * node with children answers for its whole subtree, because that is what makes
  * an ancestor able to say "you are somewhere in here" while its child says
  * "you are here". Either default is overridable per node, and 'none' opts a
  * node out of path matching entirely.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /**
  * Trailing slashes are noise: a router hands over /settings on one route and
@@ -46,7 +46,7 @@ function matchMode(node) {
 /**
  * True when this node is the current page.
  *
- * Path only. A disabled node still reports the truth about its href; whether
+ * Path only. A disabled node still reports the truth about its href. Whether
  * it is rendered as a link is a separate decision the component makes.
  */
 export function isActive(node, activePath) {

package/dist/internal/number.d.ts

@@ -14,7 +14,7 @@
  * and an English sentence carrying a German separator is the worse of the two
  * inconsistencies.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /**
  * A count, grouped in threes.

package/dist/internal/number.js

@@ -14,7 +14,7 @@
  * and an English sentence carrying a German separator is the worse of the two
  * inconsistencies.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /**
  * Built at module load, not per call.

package/dist/internal/overlay.d.ts

@@ -1,14 +1,14 @@
 /**
- * The behaviour every modal surface owes a keyboard and screen reader user.
+ * The behavior every modal surface owes a keyboard and screen reader user.
  *
  * Dialog carried a correct implementation and Modal and Drawer carried none:
  * both declared `aria-modal="true"` while leaving focus behind them in the
  * page, so a screen reader user was told a modal had opened and then went on
  * reading the document underneath it, and a keyboard user tabbed straight out
- * of the panel with no way back. The behaviour lives here now so a fourth
+ * of the panel with no way back. The behavior lives here now so a fourth
  * overlay cannot ship without it.
  *
- * 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 declare function lockBodyScroll(): void;
 export declare function unlockBodyScroll(): void;

package/dist/internal/overlay.js

@@ -1,14 +1,14 @@
 /**
- * The behaviour every modal surface owes a keyboard and screen reader user.
+ * The behavior every modal surface owes a keyboard and screen reader user.
  *
  * Dialog carried a correct implementation and Modal and Drawer carried none:
  * both declared `aria-modal="true"` while leaving focus behind them in the
  * page, so a screen reader user was told a modal had opened and then went on
  * reading the document underneath it, and a keyboard user tabbed straight out
- * of the panel with no way back. The behaviour lives here now so a fourth
+ * of the panel with no way back. The behavior lives here now so a fourth
  * overlay cannot ship without it.
  *
- * Not exported from the package entry point - this is an implementation detail.
+ * Not exported from the package entry point: this is an implementation detail.
  */
 /**
  * Elements that can hold focus. `[tabindex="-1"]` is excluded because it is

package/dist/internal/panel.d.ts

@@ -27,7 +27,7 @@
  * sized to seven columns are different requirements. Everything else is here.
  *
  * Two rules hold these together. No row carries two utilities for the same
- * property. Colour and background sit on the surface, and a row states only
+ * property. Color and background sit on the surface, and a row states only
  * the override its state earns, because two utilities for one property resolve
  * in the order Tailwind emits them and not in the order they were written.
  * And a row is inset and rounded, never square and full width: the surface is
@@ -36,14 +36,14 @@
  * rounded-lg, so what a row paints stays inside the frame with corners of its
  * own.
  *
- * 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 floating surface every popover paints.
  *
  * border-line-strong, not border-line: a panel floating over arbitrary content
  * needs a boundary that clears 3:1, which line does not. It carries the
- * resting text colour so a row can override it with a single utility.
+ * resting text color so a row can override it with a single utility.
  *
  * overflow-hidden is a backstop, not the shape: the rows sit inset with
  * corners of their own, so nothing they paint reaches the rounded frame. It
@@ -67,7 +67,7 @@ export declare const PANEL_LIST = "max-h-panel-max overflow-y-auto overscroll-co
 /**
  * One row at rest.
  *
- * No background and no text colour of its own: it inherits both from the
+ * No background and no text color of its own: it inherits both from the
  * surface, which leaves each state below a single utility to override.
  * rounded-lg, one step inside the surface's rounded-xl, so the hover tint and
  * the active ring follow the row's own corners.
@@ -146,7 +146,7 @@ export declare const PANEL_ABOVE = "bottom-full mb-1 origin-bottom";
  *       <div class={PANEL_LIST} data-panel-list>
  *
  * The anchor is the surface's offset parent, the relative wrapper every
- * control puts around its trigger; a DOM without layout has no offset parent,
+ * control puts around its trigger. A DOM without layout has no offset parent,
  * so the parent element stands in. Below is the default, because a list under
  * its field is where a native select puts one. The panel goes above only when
  * its natural height does not fit below and there is more room above, so a

package/dist/internal/panel.js

@@ -27,7 +27,7 @@
  * sized to seven columns are different requirements. Everything else is here.
  *
  * Two rules hold these together. No row carries two utilities for the same
- * property. Colour and background sit on the surface, and a row states only
+ * property. Color and background sit on the surface, and a row states only
  * the override its state earns, because two utilities for one property resolve
  * in the order Tailwind emits them and not in the order they were written.
  * And a row is inset and rounded, never square and full width: the surface is
@@ -36,14 +36,14 @@
  * rounded-lg, so what a row paints stays inside the frame with corners of its
  * own.
  *
- * 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 floating surface every popover paints.
  *
  * border-line-strong, not border-line: a panel floating over arbitrary content
  * needs a boundary that clears 3:1, which line does not. It carries the
- * resting text colour so a row can override it with a single utility.
+ * resting text color so a row can override it with a single utility.
  *
  * overflow-hidden is a backstop, not the shape: the rows sit inset with
  * corners of their own, so nothing they paint reaches the rounded frame. It
@@ -67,7 +67,7 @@ export const PANEL_LIST = 'max-h-panel-max overflow-y-auto overscroll-contain px
 /**
  * One row at rest.
  *
- * No background and no text colour of its own: it inherits both from the
+ * No background and no text color of its own: it inherits both from the
  * surface, which leaves each state below a single utility to override.
  * rounded-lg, one step inside the surface's rounded-xl, so the hover tint and
  * the active ring follow the row's own corners.
@@ -184,7 +184,7 @@ function swap(node, remove, add) {
  *       <div class={PANEL_LIST} data-panel-list>
  *
  * The anchor is the surface's offset parent, the relative wrapper every
- * control puts around its trigger; a DOM without layout has no offset parent,
+ * control puts around its trigger. A DOM without layout has no offset parent,
  * so the parent element stands in. Below is the default, because a list under
  * its field is where a native select puts one. The panel goes above only when
  * its natural height does not fit below and there is more room above, so a

package/dist/internal/pricing.d.ts

@@ -0,0 +1,110 @@
+/**
+ * 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.
+ */
+/** One sellable capability, as the catalog endpoint reports it. */
+export interface CartPlugin {
+    sku: string;
+    name: string;
+    /** Integer cents, always. No float ever holds money here. */
+    price_cents: number;
+    category?: string;
+    blurb?: string;
+    /** `soon` is shown and cannot be bought. Anything else sells. */
+    status?: string;
+}
+/** One rung of the volume ladder. */
+export interface DiscountBracket {
+    plugins: number;
+    discount_pct: number;
+}
+/** The catalog endpoint's whole answer. */
+export interface CartCatalog {
+    plugins: CartPlugin[];
+    discount_brackets: DiscountBracket[];
+}
+/** One line of a priced cart. */
+export interface CartQuoteItem {
+    sku: string;
+    name: string;
+    unit_cents: number;
+    discounted_cents: number;
+}
+/**
+ * The server's price for one selection. Rendered, never recomputed.
+ *
+ * `count` and `items` are here so a consumer can tell whether the quote it
+ * holds still describes what the reader has selected. A stale total beside a
+ * changed cart is the one failure this component cannot show its way out of.
+ */
+export interface CartQuote {
+    items: CartQuoteItem[];
+    count: number;
+    subtotal_cents: number;
+    volume_discount_pct: number;
+    volume_discount_cents: number;
+    community_discount_pct: number;
+    community_discount_cents: number;
+    total_cents: number;
+    /** A year at ten months' price. Zero on a monthly quote. */
+    annual_total_cents?: number;
+}
+export type BillingPeriod = 'monthly' | 'annual';
+/** Where a selection stands on the ladder, and what the next rung is worth. */
+export interface LadderState {
+    /** The plugin count the ladder was read at. */
+    count: number;
+    /** The discount that count has reached. */
+    reachedPct: number;
+    /** The first rung above the count worth more than the one reached. */
+    next: {
+        plugins: number;
+        discount_pct: number;
+        more: number;
+    } | null;
+    /** Index of the rung the count stands on, ascending, or -1 below the first. */
+    active: number;
+}
+export declare function ladderState(brackets: DiscountBracket[], count: number): LadderState;
+/**
+ * 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 declare function billedCount(opts: {
+    selected: Iterable<string>;
+    held?: Iterable<string>;
+    change?: boolean;
+    pricedSkus?: string[] | null;
+}): number;
+/** One row per rung, labeled by the range it covers. */
+export declare function ladderRows(brackets: DiscountBracket[]): {
+    from: number;
+    to: number | null;
+    discount_pct: number;
+}[];
+/**
+ * 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 declare function formatCents(cents: number, currency?: string): string;