@lyeve-labs/ui-kit 0.33.0 → 0.34.0

package/dist/components/PluginCart.svelte

@@ -292,7 +292,9 @@
                       <svg viewBox="0 0 10 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d={CHOICE_MARK.check} /></svg>
                     {/if}
                   </span>
-                  <span id="{id}-name" class="text-sm font-semibold leading-snug text-fg">{plugin.name}</span>
+                  <!-- A one-word name longer than the space beside the price breaks
+                       with a hyphen rather than running under it. -->
+                  <span id="{id}-name" class="min-w-0 text-sm font-semibold leading-snug text-fg hyphens-auto [overflow-wrap:anywhere]">{plugin.name}</span>
                 </span>
                 <span id="{id}-price" class="shrink-0 font-mono text-sm font-semibold text-fg">
                   {formatCents(plugin.price_cents, currency)}<span class="text-xs font-normal text-muted">/mo</span>

package/dist/components/Select.svelte

@@ -1,20 +1,7 @@
 <script lang="ts" module>
   import type { Component } from 'svelte';
 
-  /**
-   * The event a native select hands its change handler.
-   *
-   * Frozen, and it stays frozen. Every call site in the consuming applications passes an
-   * unannotated arrow whose parameter is contextually typed from this prop, and
-   * several of them read `e.currentTarget.value` or call
-   * `e.currentTarget.form.requestSubmit()`. Retyping the callback to take a
-   * plain value would fail all of them under strict mode at once, so the
-   * value-shaped callback is a second prop rather than a new spelling of this
-   * one.
-   */
-  export type SelectChangeEvent = Event & { currentTarget: HTMLSelectElement };
-
-  /** One row of the option list, in either mode. */
+  /** One row of the option list. */
   export interface SelectOption {
     /** The submitted value, and the key the row is rendered under. */
     value: string;
@@ -22,12 +9,7 @@
     label: string;
     /** Blocks this row alone. A disabled control blocks every row. */
     disabled?: boolean;
-    /**
-     * Drawn before the label. Listbox mode only: a native option element holds
-     * text and nothing else, so native mode drops it rather than standing in a
-     * Unicode character that would render at whatever weight the reader's font
-     * gives it.
-     */
+    /** Drawn before the label. */
     icon?: Component<{ size?: number; class?: string }>;
     /**
      * Extra text the default matcher searches, so a machine name finds a row
@@ -36,9 +18,8 @@
     keywords?: string[];
     /**
      * 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.
+     * name it. A caller who interleaves two groups gets the heading twice,
+     * which is what the array says.
      */
     group?: string;
   }
@@ -46,25 +27,23 @@
 
 <script lang="ts">
   /**
-   * A select in four kinds: a native one, a native one driven by an array, a
-   * custom listbox that can search and carry icons, and a listbox behind a
-   * trigger of the caller's own.
+   * A select: a listbox the kit draws, never the browser's own.
    *
-   * 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
-   * `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.
+   * It used to default to a native select, and the native list is the one
+   * surface no stylesheet reaches: it opened white on a dark page, in the
+   * operating system's font and highlight color, in the middle of a checkout.
+   * So there is one mode. The trigger is a button and the value travels in a
+   * hidden input, so a form posts `name` exactly as a select would. A page
+   * that submitted from the change event uses `onvaluechange`, which fires
+   * after the hidden input holds the new value.
    *
-   * Listbox mode owns nothing of its own behavior. The open state, the active
+   * The control 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
-   * the library the way the four hand-rolled ones drifted from each other.
+   * internal/panel, so it cannot drift away from the other lists in the
+   * library the way the four hand-rolled ones drifted from each other.
    */
-  import type { Snippet } from 'svelte';
+  import { tick, type Snippet } from 'svelte';
   import { applyFilter, type FilterInput } from '../internal/filter.js';
   import {
     CONTROL_BASE,
@@ -87,7 +66,7 @@
   import * as motion from '../motion.js';
 
   interface Props {
-    /** The selected value. Bindable, so a listbox pick reaches the caller without a callback. */
+    /** The selected value. Bindable, so a pick reaches the caller without a callback. */
     value?: string | null;
     id?: string;
     name?: string;
@@ -97,29 +76,20 @@
     disabled?: boolean;
     error?: string;
     class?: string;
-    /** Native mode only. Its signature is frozen. See SelectChangeEvent. */
-    onchange?: (e: SelectChangeEvent) => void;
-    /** Option elements, written by hand. Native mode only. */
-    children?: Snippet;
-    /**
-     * 'native' renders a real select. 'listbox' renders the custom panel.
-     * Never inferred: see the note above.
-     */
-    mode?: 'native' | 'listbox';
-    /** The rows, as data. Renders as option elements in native mode. */
+    /** The rows, as data. */
     options?: SelectOption[];
-    /** Listbox mode. Adds a search field inside the panel. */
+    /** Adds a search field inside the panel. */
     searchable?: boolean;
     /**
      * Replaces the default matcher, or false to switch local filtering off
      * because the list arrived already narrowed, by a server query for instance.
      */
     filter?: FilterInput<SelectOption>;
-    /** Fills the trigger in listbox mode. Receives the selected row and the open state. */
+    /** Fills the trigger. Receives the selected row and the open state. */
     trigger?: Snippet<[{ selected: SelectOption | undefined; open: boolean }]>;
-    /** Shown when nothing is selected. In native mode it renders as a leading empty row. */
+    /** Shown when nothing is selected. */
     placeholder?: string;
-    /** Value-shaped and additive, so the event signature above stays frozen. Fires in both modes. */
+    /** Fires with the new value once the hidden input holds it, so the form can be submitted from here. */
     onvaluechange?: (value: string) => void;
   }
 
@@ -133,9 +103,6 @@
     disabled = false,
     error,
     class: cls = '',
-    onchange,
-    children,
-    mode = 'native',
     options = [],
     searchable = false,
     filter,
@@ -158,14 +125,12 @@
   const uid = $props.id();
   const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : uid));
 
-  const listboxMode = $derived(mode === 'listbox');
-
   let query = $state('');
   let triggerEl = $state<HTMLButtonElement | undefined>();
   let searchEl = $state<HTMLInputElement | undefined>();
 
-  /** The rows the panel is showing. Native mode never filters, so it never narrows. */
-  const rows = $derived(listboxMode ? applyFilter(options, query, filter) : options);
+  /** The rows the panel is showing. */
+  const rows = $derived(applyFilter(options, query, filter));
   const selected = $derived(options.find((option) => option.value === value));
 
   interface Row {
@@ -182,9 +147,8 @@
   /**
    * Splits the list into runs of rows that share a group.
    *
-   * Runs rather than a bucket per name, so both modes group identically: an
-   * optgroup nests, so a native select cannot show one group in two places
-   * either, and a caller whose array interleaves gets the same answer from both.
+   * Runs rather than a bucket per name, so a caller whose array interleaves two
+   * groups sees the order it wrote.
    */
   function groupRuns(list: readonly SelectOption[]): Block[] {
     const blocks: Block[] = [];
@@ -214,24 +178,19 @@
   const anchor = box.anchor;
   const panel = box.panel;
 
-  function choose(option: SelectOption): void {
+  async function choose(option: SelectOption): Promise<void> {
     if (option.disabled === true) return;
     value = option.value;
-    onvaluechange?.(option.value);
     // The factory leaves the list open, because a multi-value control collects
     // several picks in one pass. This one takes a single value.
     box.close('select');
     // The row that was clicked is about to be unmounted, so focus has somewhere
     // to be returned to or it falls to the body.
     triggerEl?.focus();
-  }
-
-  function nativeChange(event: SelectChangeEvent): void {
-    value = event.currentTarget.value;
-    // Called synchronously and with the event untouched, so currentTarget is
-    // still the select and a call site can submit the form from it.
-    onchange?.(event);
-    onvaluechange?.(event.currentTarget.value);
+    // After the hidden input has been written, so a caller that submits the
+    // form from here posts the value just picked and not the one before it.
+    await tick();
+    onvaluechange?.(option.value);
   }
 
   function search(event: Event & { currentTarget: HTMLInputElement }): void {
@@ -245,33 +204,6 @@
   $effect(() => {
     if (box.open && searchEl !== undefined) searchEl.focus();
   });
-
-  let warned = false;
-
-  /*
-   * A listbox-only prop passed to a native select is a caller mistake with
-   * three possible answers, and only one of them is safe.
-   *
-   * Throwing turns a cosmetic slip into a blank page in a form the user was
-   * halfway through. Upgrading the mode is worse than it looks: it swaps a
-   * form-associated element for a button, so the change event stops firing and
-   * the call sites that submit their form from it go quiet with no error
-   * anywhere. Warning leaves the page working as the native select it asked
-   * for and puts the mistake where the developer will read it. Once per
-   * instance, and from an effect, so a server render does not repeat it into
-   * the log on every request.
-   */
-  $effect(() => {
-    if (listboxMode || warned) return;
-    const ignored = [searchable ? 'searchable' : '', trigger ? 'trigger' : ''].filter(
-      (part) => part !== '',
-    );
-    if (ignored.length === 0) return;
-    warned = true;
-    for (const prop of ignored) {
-      console.warn(`Select: the ${prop} prop applies to mode="listbox" and was ignored.`);
-    }
-  });
 </script>
 
 {#snippet chevron(open: boolean)}
@@ -352,15 +284,14 @@
     </label>
   {/if}
 
-  {#if listboxMode}
-    <div class="relative" use:anchor>
-      <!--
+  <div class="relative" use:anchor>
+    <!--
         The trigger is a button, so the snippet fills it rather than replacing
         it: a caller-supplied element would have to carry the id, the label
         association and four aria attributes itself, and a button nested inside
         another button is not valid markup a browser will focus.
       -->
-      <!--
+    <!--
         role="combobox" is the select-only combobox pattern, and it is also
         what carries aria-invalid and aria-required: a bare button takes
         neither, so the control could not report its own validity. The role and
@@ -368,142 +299,101 @@
         compiler checks both against the source it can read and it cannot read
         a spread. The spread sets the same expanded value.
       -->
-      <button
-        bind:this={triggerEl}
-        type="button"
-        role="combobox"
-        aria-expanded={box.open}
-        id={fieldId}
-        {disabled}
-        onclick={() => box.toggle()}
-        onkeydown={(event) => {
-          box.onkeydown(event);
-        }}
-        aria-invalid={error ? 'true' : undefined}
-        aria-required={required ? 'true' : undefined}
-        aria-describedby={describedBy(fieldId, error, hint)}
-        {...box.triggerAttrs}
-        class="{CONTROL_BASE} {controlBorder(!!error)} flex cursor-pointer items-center gap-2 pe-8
+    <button
+      bind:this={triggerEl}
+      type="button"
+      role="combobox"
+      aria-expanded={box.open}
+      id={fieldId}
+      {disabled}
+      onclick={() => box.toggle()}
+      onkeydown={(event) => {
+        box.onkeydown(event);
+      }}
+      aria-invalid={error ? 'true' : undefined}
+      aria-required={required ? 'true' : undefined}
+      aria-describedby={describedBy(fieldId, error, hint)}
+      {...box.triggerAttrs}
+      class="{CONTROL_BASE} {controlBorder(!!error)} flex cursor-pointer items-center gap-2 pe-8
           text-start"
-      >
-        {#if trigger}
-          {@render trigger({ selected, open: box.open })}
-        {:else if selected}
-          {#if selected.icon}
-            {@const Icon = selected.icon}
-            <Icon size={16} class="shrink-0" />
-          {/if}
-          <span class="min-w-0 truncate">{selected.label}</span>
-        {:else}
-          <span class="min-w-0 truncate text-faint">{placeholder ?? ''}</span>
+    >
+      {#if trigger}
+        {@render trigger({ selected, open: box.open })}
+      {:else if selected}
+        {#if selected.icon}
+          {@const Icon = selected.icon}
+          <Icon size={16} class="shrink-0" />
         {/if}
-      </button>
-      {@render chevron(box.open)}
+        <span class="min-w-0 truncate">{selected.label}</span>
+      {:else}
+        <span class="min-w-0 truncate text-faint">{placeholder ?? ''}</span>
+      {/if}
+    </button>
+    {@render chevron(box.open)}
 
-      <!--
+    <!--
         The value the form actually submits. The visible control is a button,
         which serializes nothing, and a hidden input is barred from constraint
         validation, so `required` is announced through aria-required and
         enforced by the caller rather than by the browser.
       -->
-      <input type="hidden" {name} {disabled} value={value ?? ''} />
+    <input type="hidden" {name} {disabled} value={value ?? ''} />
 
-      {#if box.open}
-        <div use:placePanel transition:motion.popover|global class="{PANEL_SURFACE} w-full">
-          {#if searchable}
-            <div class="border-b border-line p-2">
-              <!--
+    {#if box.open}
+      <div use:placePanel transition:motion.popover|global class="{PANEL_SURFACE} w-full">
+        {#if searchable}
+          <div class="border-b border-line p-2">
+            <!--
                 The second combobox over the same list, and it earns the role:
                 the trigger has to announce collapsed while it is closed, and
                 this box has to announce the active row while it holds focus.
                 It is rendered only while the panel is open, so its expanded
                 state is a constant.
               -->
-              <input
-                bind:this={searchEl}
-                type="text"
-                role="combobox"
-                aria-expanded="true"
-                value={query}
-                oninput={search}
-                onkeydown={(event) => {
-                  box.onkeydown(event);
-                }}
-                placeholder="Search"
-                aria-label={label ? `Search ${label}` : 'Search options'}
-                {...box.triggerAttrs}
-                class="w-full rounded-md border border-line-strong bg-surface-2 px-2.5 py-1.5
+            <input
+              bind:this={searchEl}
+              type="text"
+              role="combobox"
+              aria-expanded="true"
+              value={query}
+              oninput={search}
+              onkeydown={(event) => {
+                box.onkeydown(event);
+              }}
+              placeholder="Search"
+              aria-label={label ? `Search ${label}` : 'Search options'}
+              {...box.triggerAttrs}
+              class="w-full rounded-md border border-line-strong bg-surface-2 px-2.5 py-1.5
                   text-sm text-fg outline-none transition-colors
                   placeholder:text-faint focus:border-brand"
-              />
-            </div>
-          {/if}
-
-          <div class={PANEL_LIST} data-panel-list use:panel {...box.listAttrs}>
-            {#each blocks as block, position (position)}
-              {#if block.group !== undefined}
-                <!-- Named once, on the group. The heading repeats it on screen. -->
-                <div role="group" aria-label={block.group}>
-                  <div class={PANEL_GROUP_LABEL} aria-hidden="true">{block.group}</div>
-                  {#each block.rows as row (row.option.value)}
-                    {@render optionRow(row)}
-                  {/each}
-                </div>
-              {:else}
-                {#each block.rows as row (row.option.value)}
-                  {@render optionRow(row)}
-                {/each}
-              {/if}
-            {/each}
-
-            {#if rows.length === 0}
-              <p class={PANEL_EMPTY}>No matches</p>
-            {/if}
+            />
           </div>
-        </div>
-      {/if}
-    </div>
-  {:else}
-    <div class="relative">
-      <select
-        id={fieldId}
-        {name}
-        {required}
-        {disabled}
-        value={value ?? ''}
-        onchange={nativeChange}
-        aria-invalid={error ? 'true' : undefined}
-        aria-describedby={describedBy(fieldId, error, hint)}
-        class="{CONTROL_BASE} {controlBorder(!!error)} cursor-pointer appearance-none pe-8"
-      >
-        {#if children}
-          {@render children()}
-        {:else}
-          {#if placeholder}
-            <option value="">{placeholder}</option>
-          {/if}
+        {/if}
+
+        <div class={PANEL_LIST} data-panel-list use:panel {...box.listAttrs}>
           {#each blocks as block, position (position)}
             {#if block.group !== undefined}
-              <optgroup label={block.group}>
+              <!-- Named once, on the group. The heading repeats it on screen. -->
+              <div role="group" aria-label={block.group}>
+                <div class={PANEL_GROUP_LABEL} aria-hidden="true">{block.group}</div>
                 {#each block.rows as row (row.option.value)}
-                  <option value={row.option.value} disabled={row.option.disabled}>
-                    {row.option.label}
-                  </option>
+                  {@render optionRow(row)}
                 {/each}
-              </optgroup>
+              </div>
             {:else}
               {#each block.rows as row (row.option.value)}
-                <option value={row.option.value} disabled={row.option.disabled}>
-                  {row.option.label}
-                </option>
+                {@render optionRow(row)}
               {/each}
             {/if}
           {/each}
-        {/if}
-      </select>
-      {@render chevron(false)}
-    </div>
-  {/if}
+
+          {#if rows.length === 0}
+            <p class={PANEL_EMPTY}>No matches</p>
+          {/if}
+        </div>
+      </div>
+    {/if}
+  </div>
 
   {#if error}
     <p id="{fieldId}-error" class={FIELD_ERROR}>{error}</p>

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

@@ -1,19 +1,5 @@
 import type { Component } from 'svelte';
-/**
- * The event a native select hands its change handler.
- *
- * Frozen, and it stays frozen. Every call site in the consuming applications passes an
- * unannotated arrow whose parameter is contextually typed from this prop, and
- * several of them read `e.currentTarget.value` or call
- * `e.currentTarget.form.requestSubmit()`. Retyping the callback to take a
- * plain value would fail all of them under strict mode at once, so the
- * value-shaped callback is a second prop rather than a new spelling of this
- * one.
- */
-export type SelectChangeEvent = Event & {
-    currentTarget: HTMLSelectElement;
-};
-/** One row of the option list, in either mode. */
+/** One row of the option list. */
 export interface SelectOption {
     /** The submitted value, and the key the row is rendered under. */
     value: string;
@@ -21,12 +7,7 @@ export interface SelectOption {
     label: string;
     /** Blocks this row alone. A disabled control blocks every row. */
     disabled?: boolean;
-    /**
-     * Drawn before the label. Listbox mode only: a native option element holds
-     * text and nothing else, so native mode drops it rather than standing in a
-     * Unicode character that would render at whatever weight the reader's font
-     * gives it.
-     */
+    /** Drawn before the label. */
     icon?: Component<{
         size?: number;
         class?: string;
@@ -38,35 +19,32 @@ export interface SelectOption {
     keywords?: string[];
     /**
      * 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.
+     * name it. A caller who interleaves two groups gets the heading twice,
+     * which is what the array says.
      */
     group?: string;
 }
 /**
-   * A select in four kinds: a native one, a native one driven by an array, a
-   * custom listbox that can search and carry icons, and a listbox behind a
-   * trigger of the caller's own.
+   * A select: a listbox the kit draws, never the browser's own.
    *
-   * 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
-   * `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.
+   * It used to default to a native select, and the native list is the one
+   * surface no stylesheet reaches: it opened white on a dark page, in the
+   * operating system's font and highlight color, in the middle of a checkout.
+   * So there is one mode. The trigger is a button and the value travels in a
+   * hidden input, so a form posts `name` exactly as a select would. A page
+   * that submitted from the change event uses `onvaluechange`, which fires
+   * after the hidden input holds the new value.
    *
-   * Listbox mode owns nothing of its own behavior. The open state, the active
+   * The control 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
-   * the library the way the four hand-rolled ones drifted from each other.
+   * internal/panel, so it cannot drift away from the other lists in the
+   * library the way the four hand-rolled ones drifted from each other.
    */
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import { type FilterInput } from '../internal/filter.js';
 interface Props {
-    /** The selected value. Bindable, so a listbox pick reaches the caller without a callback. */
+    /** The selected value. Bindable, so a pick reaches the caller without a callback. */
     value?: string | null;
     id?: string;
     name?: string;
@@ -76,32 +54,23 @@ interface Props {
     disabled?: boolean;
     error?: string;
     class?: string;
-    /** Native mode only. Its signature is frozen. See SelectChangeEvent. */
-    onchange?: (e: SelectChangeEvent) => void;
-    /** Option elements, written by hand. Native mode only. */
-    children?: Snippet;
-    /**
-     * 'native' renders a real select. 'listbox' renders the custom panel.
-     * Never inferred: see the note above.
-     */
-    mode?: 'native' | 'listbox';
-    /** The rows, as data. Renders as option elements in native mode. */
+    /** The rows, as data. */
     options?: SelectOption[];
-    /** Listbox mode. Adds a search field inside the panel. */
+    /** Adds a search field inside the panel. */
     searchable?: boolean;
     /**
      * Replaces the default matcher, or false to switch local filtering off
      * because the list arrived already narrowed, by a server query for instance.
      */
     filter?: FilterInput<SelectOption>;
-    /** Fills the trigger in listbox mode. Receives the selected row and the open state. */
+    /** Fills the trigger. Receives the selected row and the open state. */
     trigger?: Snippet<[{
         selected: SelectOption | undefined;
         open: boolean;
     }]>;
-    /** Shown when nothing is selected. In native mode it renders as a leading empty row. */
+    /** Shown when nothing is selected. */
     placeholder?: string;
-    /** Value-shaped and additive, so the event signature above stays frozen. Fires in both modes. */
+    /** Fires with the new value once the hidden input holds it, so the form can be submitted from here. */
     onvaluechange?: (value: string) => void;
 }
 declare const Select: Component<Props, {}, "value">;

package/dist/components/TimePicker.svelte

@@ -43,7 +43,7 @@
    * the first attempt already lives.
    */
 
-  /** A segment the user types digits into. The meridiem is a select, not a spinbutton. */
+  /** A segment the user types digits into. The meridiem is a two-value spinbutton. */
   type DigitSegment = Exclude<TimeSegment, 'meridiem'>;
 
   interface Props {
@@ -377,8 +377,8 @@
     commit();
   }
 
-  function onMeridiemChange(e: Event & { currentTarget: HTMLSelectElement }): void {
-    const next = e.currentTarget.value === 'PM' ? 'PM' : 'AM';
+  function setMeridiem(next: 'AM' | 'PM'): void {
+    if (disabled) return;
     meridiemPref = next;
     if (hour !== null && to12Hour(hour).meridiem !== next) {
       hour = stepSegment({ h: hour, mi: 0, s: 0 }, 'meridiem', 1, 1).h;
@@ -387,11 +387,20 @@
   }
 
   function onMeridiemKeydown(e: KeyboardEvent): void {
-    // Up and down still pick an option, which is what a select does. Left and
-    // right belong to the field: they walk the segments.
-    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    // Left and right belong to the field: they walk the segments. Up and down
+    // step the value as they do on every other segment, and the first letter
+    // picks it outright.
+    const key = e.key.toLowerCase();
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      focusSegment('meridiem', e.key === 'ArrowLeft' ? -1 : 1);
+    } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      setMeridiem(meridiem === 'AM' ? 'PM' : 'AM');
+    } else if (key === 'a' || key === 'p') {
+      setMeridiem(key === 'a' ? 'AM' : 'PM');
+    } else {
+      return;
+    }
     e.preventDefault();
-    focusSegment('meridiem', e.key === 'ArrowLeft' ? -1 : 1);
   }
 </script>
 
@@ -446,24 +455,28 @@
     {/each}
 
     {#if hour12}
-      <!-- A select, because two values is exactly what a select is for: it keeps
-           the native option list, the native keyboard and the native
-           announcement instead of a button pretending to be one. -->
-      <select
+      <!-- A spinbutton like the segments beside it, not a select: a native
+           select opens a list the browser draws, which no theme reaches. A
+           click flips it, so two values never need a list at all. -->
+      <button
+        type="button"
+        role="spinbutton"
         data-segment="meridiem"
         id="{fieldId}-meridiem"
         {disabled}
-        value={meridiem}
         aria-label="AM or PM"
+        aria-valuenow={meridiem === 'AM' ? 0 : 1}
+        aria-valuemin={0}
+        aria-valuemax={1}
+        aria-valuetext={meridiem}
         aria-invalid={error ? 'true' : undefined}
         aria-required={required ? 'true' : undefined}
-        onchange={onMeridiemChange}
+        onclick={() => setMeridiem(meridiem === 'AM' ? 'PM' : 'AM')}
         onkeydown={onMeridiemKeydown}
-        class="{CONTROL_SEGMENT} ms-1"
+        class="{CONTROL_SEGMENT} ms-1 w-8 cursor-pointer"
       >
-        <option value="AM">AM</option>
-        <option value="PM">PM</option>
-      </select>
+        {meridiem}
+      </button>
     {/if}
   </div>
 

package/dist/index.d.ts

@@ -50,7 +50,7 @@ export { default as RadioGroup } from './components/RadioGroup.svelte';
 export { default as Toggle } from './components/Toggle.svelte';
 export type { ChoiceSize, ChoiceVariant, ChoiceOrientation } from './internal/choice.js';
 export type { ChoiceOption } from './components/CheckboxGroup.svelte';
-export type { SelectOption, SelectChangeEvent } from './components/Select.svelte';
+export type { SelectOption } from './components/Select.svelte';
 export type { ListOption } from './components/Autocomplete.svelte';
 export type { FilterFn, FilterInput, FilterContext } from './internal/filter.js';
 export { default as Breadcrumb } from './components/Breadcrumb.svelte';
@@ -98,4 +98,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, watchThemePreference, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.33.0";
+export declare const VERSION = "0.34.0";

package/dist/index.js

@@ -107,4 +107,4 @@ export * as motion from './motion.js';
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line. The build and the test suite fail when the two disagree.
-export const VERSION = '0.33.0';
+export const VERSION = '0.34.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",