@lyeve-labs/ui-kit 0.31.0 → 0.32.0

package/dist/components/PageShell.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   /**
-   * The page frame: the gutter, the content cap, the centring and the section
+   * The page frame: the gutter, the content cap, the centering and the section
    * rhythm, all owned by the shell so a page cannot pick its own.
    *
    * Nothing in the library owned the frame, so every page built one. Across one
    * app 31 of 35 pages restate the gutter in four spellings, five content caps
    * are in use with no rule for choosing between them, and one page renders
    * against the left edge of the window because it set a cap and forgot
-   * `mx-auto`. Centring and `w-full` come with the gutter here, in PAGE_PAD, so
+   * `mx-auto`. Centering and `w-full` come with the gutter here, in PAGE_PAD, so
    * there is no order of props that leaves them out.
    *
    * The shell renders no landmark of its own. An app shell already owns `main`,
@@ -30,7 +30,7 @@
     /**
      * A full-height page that manages its own scrolling, for instance a split
      * pane or a canvas. The content loses the gutter and the cap so the pane
-     * can reach the edges; the title row keeps both.
+     * can reach the edges. The title row keeps both.
      */
     fill?: boolean;
     /**
@@ -63,7 +63,7 @@
      * spent two rows before its canvas, the title row and then its own toolbar
      * carrying the same name, with the shell's gap between them. The page
      * still has exactly one h1, so a heading query and a screen reader see
-     * what every other page gives them; it is `sr-only`, not absent. A page
+     * what every other page gives them. It is `sr-only`, not absent. A page
      * that hides the row takes on the way back: `back` renders nothing here.
      */
     titleHidden?: boolean;

package/dist/components/PageShell.svelte.d.ts

@@ -1,12 +1,12 @@
 /**
-   * The page frame: the gutter, the content cap, the centring and the section
+   * The page frame: the gutter, the content cap, the centering and the section
    * rhythm, all owned by the shell so a page cannot pick its own.
    *
    * Nothing in the library owned the frame, so every page built one. Across one
    * app 31 of 35 pages restate the gutter in four spellings, five content caps
    * are in use with no rule for choosing between them, and one page renders
    * against the left edge of the window because it set a cap and forgot
-   * `mx-auto`. Centring and `w-full` come with the gutter here, in PAGE_PAD, so
+   * `mx-auto`. Centering and `w-full` come with the gutter here, in PAGE_PAD, so
    * there is no order of props that leaves them out.
    *
    * The shell renders no landmark of its own. An app shell already owns `main`,
@@ -24,7 +24,7 @@ interface Props {
     /**
      * A full-height page that manages its own scrolling, for instance a split
      * pane or a canvas. The content loses the gutter and the cap so the pane
-     * can reach the edges; the title row keeps both.
+     * can reach the edges. The title row keeps both.
      */
     fill?: boolean;
     /**
@@ -60,7 +60,7 @@ interface Props {
      * spent two rows before its canvas, the title row and then its own toolbar
      * carrying the same name, with the shell's gap between them. The page
      * still has exactly one h1, so a heading query and a screen reader see
-     * what every other page gives them; it is `sr-only`, not absent. A page
+     * what every other page gives them. It is `sr-only`, not absent. A page
      * that hides the row takes on the way back: `back` renders nothing here.
      */
     titleHidden?: boolean;

package/dist/components/Pagination.svelte

@@ -182,7 +182,7 @@
 
   /**
    * 28px drawn, 44px under a finger. The steps sit 2px apart, so growing the
-   * visual would put a seven-page pager past a phone's width; the hit box
+   * visual would put a seven-page pager past a phone's width. The hit box
    * grows instead and the pager keeps its shape.
    */
   const btnBase = `${HIT_AREA} inline-flex items-center justify-center w-7 h-7 rounded text-xs font-medium transition-colors`;
@@ -208,7 +208,7 @@
    *
    * An anchor has no `disabled`, and `disabled:` never matches one, so the two
    * states have to be painted rather than declared. Dropping the href is what
-   * takes it out of the tab order and stops activation; the class is only the
+   * takes it out of the tab order and stops activation. The class is only the
    * part a reader can see, at the same 30% the disabled buttons use.
    */
   const linkInert = 'pointer-events-none opacity-30';

package/dist/components/Panel.svelte

@@ -5,7 +5,7 @@
    *
    * An audit counted 63 hand-rolled card surfaces across 31 files in nine
    * paddings while Card itself was used zero times. Many of them did not want
-   * a Card. They wanted a labelled group inside a page, and reaching for a
+   * a Card. They wanted a labeled group inside a page, and reaching for a
    * card meant a box on a box, so each one was written out by hand and each
    * one picked its own padding. Panel is that group: it takes Card's surface
    * and Card's padding scale from the shared layout contract, so a panel and a

package/dist/components/Panel.svelte.d.ts

@@ -4,7 +4,7 @@
    *
    * An audit counted 63 hand-rolled card surfaces across 31 files in nine
    * paddings while Card itself was used zero times. Many of them did not want
-   * a Card. They wanted a labelled group inside a page, and reaching for a
+   * a Card. They wanted a labeled group inside a page, and reaching for a
    * card meant a box on a box, so each one was written out by hand and each
    * one picked its own padding. Panel is that group: it takes Card's surface
    * and Card's padding scale from the shared layout contract, so a panel and a

package/dist/components/PasswordInput.svelte

@@ -77,8 +77,11 @@
   // A disabled field hands over nothing, including a look at what it holds.
   const showToggle = $derived(revealable && !disabled);
 
+  // bind:value rather than a one-way value: on hydration it adopts what the
+  // field already holds, so a password typed or autofilled before the page
+  // took over is kept. A one-way value set the field back to empty, and the
+  // form then refused to submit with the password still shown as required.
   function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
-    value = e.currentTarget.value;
     oninput?.(e);
   }
 </script>
@@ -103,7 +106,7 @@
       {disabled}
       {readonly}
       {autocomplete}
-      {value}
+      bind:value
       oninput={handleInput}
       {onchange}
       aria-invalid={error ? 'true' : undefined}

package/dist/components/PluginCart.svelte

@@ -0,0 +1,339 @@
+<!--
+  The capability picker and its running summary, for every surface that sells.
+
+  It renders, it never prices. The total, the discount and the annual figure
+  all come in as a quote the server made, and `quoted` below refuses to show
+  one that no longer describes what is selected. A host that wants a fresh
+  price listens to `onchange` and fetches one: a form action where there is a
+  server beside the page, the public quote endpoint where there is not.
+
+  The checkboxes carry a name and a value, so a host that wraps this in a form
+  still posts the selection with no JavaScript running at all.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { X } from '@lucide/svelte';
+  import Badge from './Badge.svelte';
+  import Button from './Button.svelte';
+  import Checkbox from './Checkbox.svelte';
+  import SearchInput from './SearchInput.svelte';
+  import SegmentedControl from './SegmentedControl.svelte';
+  import Spinner from './Spinner.svelte';
+  import { cn } from '../utils/cn.js';
+  import {
+    billedCount,
+    formatCents,
+    ladderState,
+    type BillingPeriod,
+    type CartPlugin,
+    type CartQuote,
+    type DiscountBracket,
+  } from '../internal/pricing.js';
+
+  /** One button that replaces the whole selection. */
+  export interface QuickPick {
+    id: string;
+    label: string;
+    skus: string[];
+  }
+
+  interface Props {
+    plugins: CartPlugin[];
+    brackets?: DiscountBracket[];
+    /** What the reader has picked. Bindable, so the host can price it. */
+    selected?: Set<string>;
+    /** Picked before arriving, from another surface's cart. Seeds `selected`. */
+    initial?: string[];
+    /** Already paid for. Shown, never added twice. */
+    held?: string[];
+    /** The server's price for this selection, or null before one exists. */
+    quote?: CartQuote | null;
+    /** The period that quote was priced for. A monthly quote says nothing about a year. */
+    quotePeriod?: BillingPeriod | null;
+    period?: BillingPeriod;
+    /** True while a fresh price is in flight. */
+    quoting?: boolean;
+    /** The count the bill will carry, when the host knows better than the cart. */
+    billedSkus?: string[] | null;
+    currency?: string;
+    /** The form field each checkbox posts under, for the path with no JavaScript. */
+    fieldName?: string;
+    error?: string | null;
+    quickPicks?: QuickPick[];
+    /** Called with the new selection whenever it changes. */
+    onchange?: (skus: string[]) => void;
+    /** The host's call to action, under the total. */
+    actions?: Snippet<[{ skus: string[]; total: number | null }]>;
+    /** Anything the host wants between the total and the actions. */
+    notice?: Snippet;
+    class?: string;
+  }
+
+  /**
+   * What a reader brought from another surface, minus anything the catalog no
+   * longer sells or they already pay for.
+   *
+   * Called in the destructuring default rather than an effect, because an
+   * effect runs only in the browser. The server render is the whole page for a
+   * reader with no JavaScript, and seeding there showed an empty cart to
+   * somebody who had just filled one.
+   */
+  function seed(all: CartPlugin[], owned: string[], brought: string[]): Set<string> {
+    const sells = new Set(all.map((p) => p.sku));
+    const has = new Set(owned);
+    return new Set(brought.filter((s) => sells.has(s) && !has.has(s)));
+  }
+
+  let {
+    plugins,
+    brackets = [],
+    initial = [],
+    held = [],
+    selected = $bindable(seed(plugins, held, initial)),
+    quote = null,
+    quotePeriod = null,
+    period = 'monthly',
+    quoting = false,
+    billedSkus = null,
+    currency = 'USD',
+    fieldName = 'sku',
+    error = null,
+    quickPicks = [],
+    onchange,
+    actions,
+    notice,
+    class: klass = '',
+  }: Props = $props();
+
+  const heldSet = $derived(new Set(held));
+  const known = $derived(new Set(plugins.map((p) => p.sku)));
+
+  let query = $state('');
+  let category = $state('all');
+
+  const categories = $derived([
+    { value: 'all', label: 'All' },
+    ...[...new Set(plugins.map((p) => p.category).filter(Boolean) as string[])]
+      .sort()
+      .map((c) => ({ value: c, label: c })),
+  ]);
+
+  const sellable = $derived(plugins.filter((p) => p.status !== 'soon'));
+
+  const shown = $derived(
+    sellable.filter((p) => {
+      if (category !== 'all' && p.category !== category) return false;
+      if (!query) return true;
+      const q = query.toLowerCase();
+      return (
+        p.name.toLowerCase().includes(q) ||
+        (p.blurb ?? '').toLowerCase().includes(q) ||
+        p.sku.includes(q)
+      );
+    }),
+  );
+
+  const bySku = $derived(new Map(plugins.map((p) => [p.sku, p])));
+  const count = $derived(selected.size);
+
+  // A price counts only for the exact selection and period it was made for.
+  // Anything else is a number that used to be true, which is worse on a page
+  // about to charge someone than no number at all.
+  const quoted = $derived(
+    quote &&
+      (quotePeriod ?? 'monthly') === period &&
+      quote.count === count &&
+      quote.items.every((i) => selected.has(i.sku))
+      ? quote
+      : null,
+  );
+
+  const total = $derived(
+    quoted ? (period === 'annual' ? (quoted.annual_total_cents ?? null) : quoted.total_cents) : null,
+  );
+
+  const ladder = $derived(
+    ladderState(
+      brackets,
+      billedCount({ selected, held, change: held.length > 0, pricedSkus: billedSkus }),
+    ),
+  );
+
+  const perLabel = $derived(period === 'annual' ? '/yr' : '/mo');
+
+  function commit(next: Set<string>) {
+    selected = next;
+    onchange?.([...next]);
+  }
+
+  function toggle(sku: string) {
+    if (heldSet.has(sku)) return;
+    const next = new Set(selected);
+    if (next.has(sku)) next.delete(sku);
+    else next.add(sku);
+    commit(next);
+  }
+
+  function pick(skus: string[]) {
+    commit(new Set(skus.filter((s) => known.has(s) && !heldSet.has(s))));
+  }
+</script>
+
+<div class={cn('grid gap-6 lg:grid-cols-[minmax(0,1fr)_340px]', klass)}>
+  <div class="min-w-0 space-y-4">
+    <div class="flex flex-wrap items-center gap-3">
+      <div class="min-w-48 flex-1">
+        <SearchInput
+          label="Search capabilities"
+          placeholder="Search by name or what it does"
+          bind:value={query}
+        />
+      </div>
+      {#if quickPicks.length > 0}
+        <div class="flex flex-wrap gap-1.5" role="group" aria-label="Quick picks">
+          {#each quickPicks as qp (qp.id)}
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onclick={() => pick(qp.skus)}
+              disabled={qp.skus.length === 0}
+            >
+              {qp.label}
+            </Button>
+          {/each}
+        </div>
+      {/if}
+    </div>
+
+    {#if categories.length > 2}
+      <div class="-mx-1 overflow-x-auto px-1">
+        <SegmentedControl
+          options={categories}
+          bind:value={category}
+          label="Category"
+          labelHidden
+          size="sm"
+        />
+      </div>
+    {/if}
+
+    {#if shown.length === 0}
+      <p class="rounded-xl border border-dashed border-line p-8 text-center text-sm text-muted">
+        Nothing matches that search.
+      </p>
+    {:else}
+      <div class="grid gap-3 sm:grid-cols-2 2xl:grid-cols-3">
+        {#each shown as plugin (plugin.sku)}
+          {@const owned = heldSet.has(plugin.sku)}
+          <Checkbox
+            variant="card"
+            name={fieldName}
+            value={plugin.sku}
+            label={plugin.name}
+            description={owned
+              ? 'Already on your subscription'
+              : `${formatCents(plugin.price_cents, currency)}/mo${plugin.category ? `, ${plugin.category}` : ''}. ${plugin.blurb ?? ''}`}
+            checked={selected.has(plugin.sku) || owned}
+            disabled={owned}
+            onchange={() => toggle(plugin.sku)}
+          />
+        {/each}
+      </div>
+    {/if}
+  </div>
+
+  <aside
+    class="self-start rounded-xl border border-line bg-surface p-5 lg:sticky lg:top-4"
+    aria-label="Your selection"
+  >
+    <div class="mb-4 flex items-center justify-between gap-2">
+      <p class="text-xs font-semibold uppercase tracking-widest text-faint">Your selection</p>
+      {#if count > 0}
+        <Badge tone="brand" size="sm">
+          {count}
+          {count === 1 ? 'capability' : 'capabilities'}
+        </Badge>
+      {/if}
+    </div>
+
+    {#if error}
+      <p class="mb-3 rounded-lg border border-danger/30 bg-danger/10 p-3 text-xs text-danger">
+        {error}
+      </p>
+    {/if}
+
+    {#if count === 0}
+      <p class="py-6 text-center text-sm text-muted">
+        Nothing picked yet. With none of these you are on the free tier, which needs no checkout.
+      </p>
+    {:else}
+      <ul class="mb-4 max-h-56 space-y-1 overflow-y-auto pe-1">
+        {#each [...selected] as sku (sku)}
+          {@const p = bySku.get(sku)}
+          <li class="flex items-center justify-between gap-2 text-xs">
+            <span class="truncate text-fg">{p?.name ?? sku}</span>
+            <span class="flex items-center gap-1">
+              <span class="font-mono text-muted">{formatCents(p?.price_cents ?? 0, currency)}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onclick={() => toggle(sku)}
+                aria-label={`Take ${p?.name ?? sku} out of your selection`}
+              >
+                <X size={12} />
+              </Button>
+            </span>
+          </li>
+        {/each}
+      </ul>
+
+      {#if ladder.reachedPct > 0}
+        <p class="mb-2 text-xs text-success">
+          Volume discount {ladder.reachedPct}% applied.
+        </p>
+      {/if}
+      {#if ladder.next}
+        <p class="mb-3 text-xs text-muted">
+          {ladder.next.more} more and the discount is {ladder.next.discount_pct}%.
+        </p>
+      {/if}
+
+      <div class="mb-4 border-t border-line pt-3">
+        {#if total === null}
+          <p class="flex items-center gap-2 text-sm text-muted">
+            {#if quoting}
+              <Spinner size={14} />
+              Pricing your selection
+            {:else}
+              Waiting for a price.
+            {/if}
+          </p>
+        {:else}
+          <p class="flex items-baseline justify-between gap-2">
+            <span class="text-sm text-muted">Total</span>
+            <span class="font-mono text-xl font-semibold text-fg">
+              {formatCents(total, currency)}<span class="text-sm font-normal text-muted"
+                >{perLabel}</span
+              >
+            </span>
+          </p>
+          {#if quoted && quoted.volume_discount_cents > 0}
+            <p class="mt-1 text-end text-xs text-muted">
+              {formatCents(quoted.volume_discount_cents, currency)} off the list price.
+            </p>
+          {/if}
+          {#if quoted && quoted.community_discount_cents > 0}
+            <p class="mt-1 text-end text-xs text-success">
+              Community discount {quoted.community_discount_pct}% applied.
+            </p>
+          {/if}
+        {/if}
+      </div>
+    {/if}
+
+    {#if notice}{@render notice()}{/if}
+    {#if actions}{@render actions({ skus: [...selected], total })}{/if}
+  </aside>
+</div>

package/dist/components/PluginCart.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { Snippet } from 'svelte';
+import { type BillingPeriod, type CartPlugin, type CartQuote, type DiscountBracket } from '../internal/pricing.js';
+/** One button that replaces the whole selection. */
+export interface QuickPick {
+    id: string;
+    label: string;
+    skus: string[];
+}
+interface Props {
+    plugins: CartPlugin[];
+    brackets?: DiscountBracket[];
+    /** What the reader has picked. Bindable, so the host can price it. */
+    selected?: Set<string>;
+    /** Picked before arriving, from another surface's cart. Seeds `selected`. */
+    initial?: string[];
+    /** Already paid for. Shown, never added twice. */
+    held?: string[];
+    /** The server's price for this selection, or null before one exists. */
+    quote?: CartQuote | null;
+    /** The period that quote was priced for. A monthly quote says nothing about a year. */
+    quotePeriod?: BillingPeriod | null;
+    period?: BillingPeriod;
+    /** True while a fresh price is in flight. */
+    quoting?: boolean;
+    /** The count the bill will carry, when the host knows better than the cart. */
+    billedSkus?: string[] | null;
+    currency?: string;
+    /** The form field each checkbox posts under, for the path with no JavaScript. */
+    fieldName?: string;
+    error?: string | null;
+    quickPicks?: QuickPick[];
+    /** Called with the new selection whenever it changes. */
+    onchange?: (skus: string[]) => void;
+    /** The host's call to action, under the total. */
+    actions?: Snippet<[{
+        skus: string[];
+        total: number | null;
+    }]>;
+    /** Anything the host wants between the total and the actions. */
+    notice?: Snippet;
+    class?: string;
+}
+declare const PluginCart: import("svelte").Component<Props, {}, "selected">;
+type PluginCart = ReturnType<typeof PluginCart>;
+export default PluginCart;

package/dist/components/Radio.svelte

@@ -99,8 +99,8 @@
   function handleChange() {
     // Disabled is enforced here as well as on the input. The native attribute
     // is what stops a real click, and it is the only thing that does, so a
-    // change arriving any other way - a synthetic event, a script driving the
-    // node - would still move the bound value with nothing on screen to say so.
+    // change arriving any other way (a synthetic event, a script driving the
+    // node) would still move the bound value with nothing on screen to say so.
     if (disabled) return;
     group = value;
     onchange?.(value);

package/dist/components/SearchInput.svelte

@@ -26,9 +26,10 @@
 
   const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
 
+  // bind:value keeps what was typed before hydration. A one-way value
+  // cleared it. The binding has updated value by the time this runs.
   function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
-    value = e.currentTarget.value;
-    oninput?.(value);
+    oninput?.(e.currentTarget.value);
   }
 
   function clear() {
@@ -64,7 +65,7 @@
       {name}
       {placeholder}
       {disabled}
-      {value}
+      bind:value
       oninput={handleInput}
       class="{CONTROL_BASE} {controlBorder(false)} ps-9
         [&::-webkit-search-cancel-button]:appearance-none
@@ -78,7 +79,7 @@
         sits inside the field. The padding is taken back off the horizontal axis
         only: the box is positioned from its right edge, so a negative right
         margin holds the glyph exactly where it was, while a negative top margin
-        would fight the translate that centres it and lift it 6px off the middle
+        would fight the translate that centers it and lift it 6px off the middle
         of the field.
       -->
       <button

package/dist/components/SegmentedControl.svelte

@@ -11,7 +11,7 @@
     icon?: Component<{ size?: number; class?: string }>;
     /**
      * Renders the segment as a link to this URL instead of a radio. Every
-     * option carries one or none does; the modes cannot be mixed in one
+     * option carries one or none does. The modes cannot be mixed in one
      * control. The chosen segment is still the one whose value matches
      * `value`, and it carries aria-current="page", so a page can keep its
      * choice in the URL and the control works before any script has loaded.
@@ -43,7 +43,7 @@
     size?: Size;
     disabled?: boolean;
     class?: string;
-    /** Value mode only. A link segment reports nothing; the page it opens does. */
+    /** Value mode only. A link segment reports nothing. The page it opens does. */
     onchange?: (value: T) => void;
   }
 
@@ -239,8 +239,8 @@
         <!--
           Each segment is a radio, and aria-checked is what a screen reader
           reads. The theme picker this replaces was a row of plain buttons whose
-          choice was carried by a background colour alone, so a screen reader
-          user was told nothing and a colour-blind user saw nothing. The
+          choice was carried by a background color alone, so a screen reader
+          user was told nothing and a color-blind user saw nothing. The
           selected segment also sits at a heavier weight, so the state survives
           a palette a reader cannot separate.
         -->

package/dist/components/SegmentedControl.svelte.d.ts

@@ -12,7 +12,7 @@ export interface SegmentOption<T extends string = string> {
     }>;
     /**
      * Renders the segment as a link to this URL instead of a radio. Every
-     * option carries one or none does; the modes cannot be mixed in one
+     * option carries one or none does. The modes cannot be mixed in one
      * control. The chosen segment is still the one whose value matches
      * `value`, and it carries aria-current="page", so a page can keep its
      * choice in the URL and the control works before any script has loaded.
@@ -37,7 +37,7 @@ declare function $$render<T extends string>(): {
         size?: "sm" | "md";
         disabled?: boolean;
         class?: string;
-        /** Value mode only. A link segment reports nothing; the page it opens does. */
+        /** Value mode only. A link segment reports nothing. The page it opens does. */
         onchange?: (value: T) => void;
     };
     exports: {};

package/dist/components/Select.svelte

@@ -35,7 +35,7 @@
      */
     keywords?: string[];
     /**
-     * Groups rows under a heading. A group is a run of neighbouring rows that
+     * Groups rows under a heading. A group is a run of neighboring rows that
      * name it, in both modes, because optgroup nests and cannot describe an
      * interleaved list either. A caller who interleaves two groups gets the
      * heading twice, which is what the array says.
@@ -52,13 +52,13 @@
    *
    * The native element is the default and stays the default. Most call sites
    * sit inside a form and pass `name`, and a custom listbox is a button, which
-   * serializes nothing; one call site submits its form from the change event's
+   * serializes nothing. One call site submits its form from the change event's
    * `currentTarget.form`, which only a form-associated element carries. So the
    * mode is never inferred, not from `options` and not from `searchable`: a
    * page inside a form opts in to the listbox deliberately or keeps a real
    * select.
    *
-   * Listbox mode owns nothing of its own behaviour. The open state, the active
+   * Listbox mode owns nothing of its own behavior. The open state, the active
    * row, the keyboard model and the dismissal come from internal/listbox, the
    * matching from internal/filter and every class in the panel from
    * internal/panel, so this control cannot drift away from the other lists in
@@ -97,7 +97,7 @@
     disabled?: boolean;
     error?: string;
     class?: string;
-    /** Native mode only. Its signature is frozen; see SelectChangeEvent. */
+    /** Native mode only. Its signature is frozen. See SelectChangeEvent. */
     onchange?: (e: SelectChangeEvent) => void;
     /** Option elements, written by hand. Native mode only. */
     children?: Snippet;
@@ -152,7 +152,7 @@
    * The label-derived id stays for a control that has a label, because call
    * sites point their own markup at it. The fallback used to be undefined,
    * which left an error message with no id and the control with no
-   * aria-describedby, so an unlabelled field announced its value and never the
+   * aria-describedby, so an unlabeled field announced its value and never the
    * reason it was rejected.
    */
   const uid = $props.id();