@lyeve-labs/ui-kit 0.8.4 → 0.10.0

package/dist/components/Input.svelte

@@ -1,4 +1,14 @@
 <script lang="ts">
+  import {
+    CONTROL_BASE,
+    FIELD_ERROR,
+    FIELD_HINT,
+    FIELD_LABEL,
+    FIELD_WRAP,
+    controlBorder,
+    describedBy,
+  } from '../internal/field.js';
+
   interface Props {
     value?: string;
     label?: string;
@@ -31,10 +41,10 @@
   const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
 </script>
 
-<div class="flex flex-col gap-1.5 {klass}">
+<div class="{FIELD_WRAP} {klass}">
   {#if label}
-    <label for={fieldId} class="text-sm font-medium text-fg">
-      {label}{#if required}<span class="text-danger ml-0.5">*</span>{/if}
+    <label for={fieldId} class={FIELD_LABEL}>
+      {label}{#if required}<span class="text-danger ml-0.5" aria-label="required">*</span>{/if}
     </label>
   {/if}
 
@@ -46,15 +56,14 @@
     {required}
     bind:value
     aria-invalid={error ? 'true' : undefined}
-    class="w-full rounded-lg bg-surface-2 border px-3 py-2 text-sm text-fg placeholder:text-faint
-           transition-colors outline-none disabled:opacity-50 disabled:cursor-not-allowed
-           {error ? 'border-danger focus:border-danger' : 'border-line focus:border-brand'}"
+    aria-describedby={describedBy(fieldId, error, hint)}
+    class="{CONTROL_BASE} {controlBorder(!!error)}"
     {...rest}
   />
 
   {#if error}
-    <p class="text-xs text-danger">{error}</p>
+    <p id={fieldId ? `${fieldId}-error` : undefined} class={FIELD_ERROR}>{error}</p>
   {:else if hint}
-    <p class="text-xs text-faint">{hint}</p>
+    <p id={fieldId ? `${fieldId}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
   {/if}
 </div>

package/dist/components/Modal.svelte

@@ -68,10 +68,19 @@
           <button
             type="button"
             onclick={close}
-            class="text-faint hover:text-fg transition-colors text-xl leading-none -mt-1"
+            class="shrink-0 text-faint transition-colors duration-150 hover:text-fg"
             aria-label="Close"
           >
-            ×
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              aria-hidden="true"><path d="M18 6L6 18M6 6l12 12" /></svg
+            >
           </button>
         </div>
       {/if}

package/dist/components/MultiSelect.svelte

@@ -1,4 +1,12 @@
 <script lang="ts">
+  import {
+    FIELD_ERROR,
+    FIELD_HINT,
+    FIELD_LABEL,
+    FIELD_WRAP,
+    controlBorder,
+    describedBy,
+  } from '../internal/field.js';
   // MultiSelect: pick several options, shown as removable chips, with an optional
   // search box. Binds to a string[] of selected values.
   interface Option {
@@ -85,10 +93,10 @@
   });
 </script>
 
-<div class="flex flex-col gap-1.5 {cls}" bind:this={containerEl}>
+<div class="{FIELD_WRAP} {cls}" bind:this={containerEl}>
   {#if label}
-    <label for={id} class="text-sm font-medium text-fg">
-      {label}{#if required}<span class="text-danger ml-0.5">*</span>{/if}
+    <label for={id} class={FIELD_LABEL}>
+      {label}{#if required}<span class="text-danger ml-0.5" aria-label="required">*</span>{/if}
     </label>
   {/if}
 
@@ -108,11 +116,11 @@
           open ? (open = false) : open_();
         }
       }}
-      class="w-full min-h-[2.375rem] flex flex-wrap items-center gap-1.5 rounded-lg border bg-surface-2
-        px-2.5 py-1.5 text-left text-sm transition-colors outline-none cursor-pointer
-        focus-visible:border-brand
+      aria-describedby={describedBy(id, error, hint)}
+      class="w-full min-h-control flex flex-wrap items-center gap-1.5 rounded-lg border bg-surface-2
+        px-2.5 py-1.5 text-left text-sm transition-colors duration-150 outline-none cursor-pointer
         {disabled ? 'opacity-50 cursor-not-allowed' : ''}
-        {error ? 'border-danger focus:border-danger' : 'border-line focus:border-brand'}"
+        {controlBorder(!!error)}"
     >
       {#if selected.length === 0}
         <span class="text-faint px-0.5">{placeholder}</span>
@@ -129,8 +137,21 @@
                 e.stopPropagation();
                 remove(opt.value);
               }}
-              class="hover:text-brand-light leading-none">×</button
+              class="transition-colors duration-150 hover:text-brand-light"
             >
+              <svg
+                width="11"
+                height="11"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                aria-hidden="true"
+              >
+                <path d="M18 6L6 18M6 6l12 12" />
+              </svg>
+            </button>
           </span>
         {/each}
       {/if}
@@ -174,11 +195,11 @@
               aria-selected={isSelected(opt.value)}
               disabled={opt.disabled}
               onclick={() => toggle(opt)}
-              class="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-fg transition-colors
+              class="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-fg transition-colors duration-150
                 hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed"
             >
               <span
-                class="flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors
+                class="flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors duration-150
                   {isSelected(opt.value) ? 'bg-brand border-brand' : 'bg-surface-2 border-line'}"
               >
                 {#if isSelected(opt.value)}
@@ -205,8 +226,8 @@
   </div>
 
   {#if error}
-    <p class="text-xs text-danger">{error}</p>
+    <p id={id ? `${id}-error` : undefined} class={FIELD_ERROR}>{error}</p>
   {:else if hint}
-    <p class="text-xs text-faint">{hint}</p>
+    <p id={id ? `${id}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
   {/if}
 </div>

package/dist/components/NumberInput.svelte

@@ -1,12 +1,23 @@
 <script lang="ts">
+  import {
+    FIELD_ERROR,
+    FIELD_HINT,
+    FIELD_LABEL,
+    FIELD_WRAP,
+    describedBy,
+  } from '../internal/field.js';
+
   interface Props {
     value?: number;
     min?: number;
     max?: number;
     step?: number;
     disabled?: boolean;
+    required?: boolean;
     id?: string;
     name?: string;
+    label?: string;
+    hint?: string;
     error?: string;
     class?: string;
     onchange?: (v: number) => void;
@@ -18,13 +29,18 @@
     max = undefined,
     step = 1,
     disabled = false,
+    required = false,
     id = undefined,
     name = undefined,
+    label = undefined,
+    hint = undefined,
     error = undefined,
     class: cls = '',
     onchange = undefined,
   }: Props = $props();
 
+  const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
+
   function dec() {
     const next = value - step;
     if (min !== undefined && next < min) return;
@@ -49,33 +65,57 @@
 
   let canDec = $derived(!(disabled || (min !== undefined && value <= min)));
   let canInc = $derived(!(disabled || (max !== undefined && value >= max)));
+
+  const step_ =
+    'flex w-control shrink-0 items-center justify-center border-line bg-surface-2 text-muted ' +
+    'transition-colors duration-150 hover:bg-line hover:text-fg ' +
+    'disabled:opacity-50 disabled:cursor-not-allowed';
 </script>
 
-<div class="flex flex-col gap-1 {cls}">
-  <div class="flex h-9">
+<div class="{FIELD_WRAP} {cls}">
+  {#if label}
+    <label for={fieldId} class={FIELD_LABEL}>
+      {label}{#if required}<span class="text-danger ml-0.5" aria-label="required">*</span>{/if}
+    </label>
+  {/if}
+
+  <div class="flex h-control">
     <button
       type="button"
       onclick={dec}
       disabled={!canDec}
       aria-label="Decrease"
-      class="flex w-9 shrink-0 items-center justify-center rounded-l-lg border border-r-0 border-line
-        bg-surface-2 text-lg leading-none text-muted transition-colors
-        hover:bg-line hover:text-fg
-        disabled:cursor-not-allowed disabled:opacity-40">−</button
+      class="{step_} rounded-l-lg border border-r-0"
     >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <path d="M5 12h14" />
+      </svg>
+    </button>
 
     <input
       type="number"
-      {id}
+      id={fieldId}
       {name}
       {min}
       {max}
       {step}
       {disabled}
+      {required}
       {value}
       oninput={handleInput}
+      aria-invalid={error ? 'true' : undefined}
+      aria-describedby={describedBy(fieldId, error, hint)}
       class="min-w-0 flex-1 border-y bg-surface-2 text-center text-sm text-fg
-        focus:outline-none focus:border-brand transition-colors
+        outline-none transition-colors duration-150 focus:border-brand
         disabled:cursor-not-allowed disabled:opacity-50
         [appearance:textfield]
         [&::-webkit-inner-spin-button]:appearance-none
@@ -88,11 +128,26 @@
       onclick={inc}
       disabled={!canInc}
       aria-label="Increase"
-      class="flex w-9 shrink-0 items-center justify-center rounded-r-lg border border-l-0 border-line
-        bg-surface-2 text-lg leading-none text-muted transition-colors
-        hover:bg-line hover:text-fg
-        disabled:cursor-not-allowed disabled:opacity-40">+</button
+      class="{step_} rounded-r-lg border border-l-0"
     >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <path d="M12 5v14M5 12h14" />
+      </svg>
+    </button>
   </div>
-  {#if error}<p class="text-xs text-danger">{error}</p>{/if}
+
+  {#if error}
+    <p id={fieldId ? `${fieldId}-error` : undefined} class={FIELD_ERROR}>{error}</p>
+  {:else if hint}
+    <p id={fieldId ? `${fieldId}-hint` : undefined} class={FIELD_HINT}>{hint}</p>
+  {/if}
 </div>

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

@@ -4,8 +4,11 @@ interface Props {
     max?: number;
     step?: number;
     disabled?: boolean;
+    required?: boolean;
     id?: string;
     name?: string;
+    label?: string;
+    hint?: string;
     error?: string;
     class?: string;
     onchange?: (v: number) => void;

package/dist/components/PageHeader.svelte

@@ -13,7 +13,9 @@
 
 <header class="mb-8 flex flex-wrap items-start justify-between gap-4 {klass}">
   <div class="min-w-0">
-    <h1 class="text-2xl font-bold text-fg">{title}</h1>
+    <!-- The app shells render their own h1 for the current route, so a heading
+         lookup by name matches two elements. This names the page's own title. -->
+    <h1 data-testid="page-title" class="text-2xl font-bold text-fg">{title}</h1>
     {#if description}<p class="mt-1 text-sm text-muted">{description}</p>{/if}
   </div>
   {#if actions}

package/dist/components/Pagination.svelte

@@ -34,7 +34,7 @@
   let nums = $derived(pageNumbers(safePage, totalPages));
 
   const btnBase =
-    'inline-flex items-center justify-center w-7 h-7 rounded text-xs font-medium transition-colors';
+    'inline-flex items-center justify-center w-7 h-7 rounded text-xs font-medium transition-colors duration-150';
 </script>
 
 {#if totalPages > 1}

package/dist/components/Progress.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  type Tone = 'brand' | 'violet' | 'success' | 'warn' | 'danger';
+  import type { AccentTone } from '../internal/tone.js';
   type Size = 'xs' | 'sm' | 'md';
 
   interface Props {
     value: number;
     max?: number;
-    tone?: Tone;
+    tone?: AccentTone;
     size?: Size;
     label?: string;
     showValue?: boolean;
@@ -30,7 +30,8 @@
       : 0,
   );
 
-  const tones: Record<Tone, string> = {
+  const tones: Record<AccentTone, string> = {
+    neutral: 'bg-muted',
     brand: 'bg-brand',
     violet: 'bg-violet',
     success: 'bg-success',

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

@@ -1,9 +1,9 @@
-type Tone = 'brand' | 'violet' | 'success' | 'warn' | 'danger';
+import type { AccentTone } from '../internal/tone.js';
 type Size = 'xs' | 'sm' | 'md';
 interface Props {
     value: number;
     max?: number;
-    tone?: Tone;
+    tone?: AccentTone;
     size?: Size;
     label?: string;
     showValue?: boolean;

package/dist/components/Radio.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { FIELD_HINT } from '../internal/field.js';
   interface Props {
     value: string;
     group?: string;
@@ -8,6 +9,7 @@
     disabled?: boolean;
     id?: string;
     name?: string;
+    class?: string;
     onchange?: (value: string) => void;
   }
 
@@ -20,6 +22,7 @@
     disabled = false,
     id = undefined,
     name = undefined,
+    class: cls = '',
     onchange = undefined,
   }: Props = $props();
 
@@ -31,7 +34,7 @@
 
 <label
   class="inline-flex cursor-pointer select-none items-start gap-2.5
-    {disabled ? 'cursor-not-allowed opacity-50' : ''}"
+    {disabled ? 'cursor-not-allowed opacity-50' : ''} {cls}"
 >
   <span class="relative mt-0.5 flex shrink-0 items-center justify-center">
     <input
@@ -46,7 +49,7 @@
       class="peer sr-only"
     />
     <span
-      class="flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors
+      class="flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors duration-150
         {group === value
         ? 'border-brand bg-surface-2'
         : 'border-line bg-surface-2 peer-focus-visible:border-brand'}"
@@ -59,7 +62,7 @@
   {#if label || hint}
     <span class="flex flex-col gap-0.5">
       {#if label}<span class="text-sm text-fg">{label}</span>{/if}
-      {#if hint}<span class="text-xs text-faint">{hint}</span>{/if}
+      {#if hint}<span class={FIELD_HINT}>{hint}</span>{/if}
     </span>
   {/if}
 </label>

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

@@ -7,6 +7,7 @@ interface Props {
     disabled?: boolean;
     id?: string;
     name?: string;
+    class?: string;
     onchange?: (value: string) => void;
 }
 declare const Radio: import("svelte").Component<Props, {}, "group">;

package/dist/components/RadioGroup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { FIELD_ERROR, FIELD_HINT, FIELD_LABEL } from '../internal/field.js';
   // RadioGroup renders a managed set of radio options bound to a single value.
   // Matches the visual of Radio.svelte; use this when you have a fixed option list.
   interface Option {
@@ -46,7 +47,7 @@
 
 <fieldset class="flex flex-col gap-2 {cls}" {disabled}>
   {#if label}
-    <legend class="text-sm font-medium text-fg mb-0.5">
+    <legend class="{FIELD_LABEL} mb-0.5">
       {label}{#if required}<span class="text-danger ml-0.5">*</span>{/if}
     </legend>
   {/if}
@@ -70,7 +71,7 @@
             class="peer sr-only"
           />
           <span
-            class="flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors
+            class="flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors duration-150
               {value === opt.value
               ? 'border-brand bg-surface-2'
               : 'border-line bg-surface-2 peer-focus-visible:border-brand'}"
@@ -82,15 +83,15 @@
         </span>
         <span class="flex flex-col gap-0.5">
           <span class="text-sm text-fg">{opt.label}</span>
-          {#if opt.hint}<span class="text-xs text-faint">{opt.hint}</span>{/if}
+          {#if opt.hint}<span class={FIELD_HINT}>{opt.hint}</span>{/if}
         </span>
       </label>
     {/each}
   </div>
 
   {#if error}
-    <p class="text-xs text-danger">{error}</p>
+    <p class={FIELD_ERROR}>{error}</p>
   {:else if hint}
-    <p class="text-xs text-faint">{hint}</p>
+    <p class={FIELD_HINT}>{hint}</p>
   {/if}
 </fieldset>

package/dist/components/SearchInput.svelte

@@ -1,20 +1,30 @@
 <script lang="ts">
+  import { CONTROL_BASE, FIELD_LABEL, FIELD_WRAP, controlBorder } from '../internal/field.js';
+
   interface Props {
     value?: string;
+    label?: string;
     placeholder?: string;
     disabled?: boolean;
+    id?: string;
+    name?: string;
     class?: string;
     oninput?: (value: string) => void;
   }
 
   let {
     value = $bindable(''),
+    label = undefined,
     placeholder = 'Search…',
     disabled = false,
+    id = undefined,
+    name = undefined,
     class: cls = '',
     oninput = undefined,
   }: Props = $props();
 
+  const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
+
   function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
     value = e.currentTarget.value;
     oninput?.(value);
@@ -26,56 +36,61 @@
   }
 </script>
 
-<div class="relative {cls}">
-  <svg
-    width="15"
-    height="15"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-faint"
-    aria-hidden="true"
-  >
-    <circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" />
-  </svg>
-
-  <input
-    type="search"
-    {placeholder}
-    {disabled}
-    {value}
-    oninput={handleInput}
-    class="w-full rounded-lg border border-line bg-surface-2
-      py-2 pl-9 text-sm text-fg placeholder:text-faint
-      focus:border-brand focus:outline-none transition-colors
-      disabled:cursor-not-allowed disabled:opacity-50
-      [&::-webkit-search-cancel-button]:appearance-none
-      {value ? 'pr-8' : 'pr-3'}"
-  />
+<div class="{FIELD_WRAP} {cls}">
+  {#if label}
+    <label for={fieldId} class={FIELD_LABEL}>{label}</label>
+  {/if}
 
-  {#if value}
-    <button
-      type="button"
-      onclick={clear}
-      aria-label="Clear search"
-      class="absolute right-2.5 top-1/2 -translate-y-1/2 text-faint
-        transition-colors hover:text-fg"
+  <div class="relative">
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-faint"
+      aria-hidden="true"
     >
-      <svg
-        width="14"
-        height="14"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        aria-hidden="true"
+      <circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" />
+    </svg>
+
+    <input
+      type="search"
+      id={fieldId}
+      {name}
+      {placeholder}
+      {disabled}
+      {value}
+      oninput={handleInput}
+      class="{CONTROL_BASE} {controlBorder(false)} pl-9
+        [&::-webkit-search-cancel-button]:appearance-none
+        {value ? 'pr-8' : 'pr-3'}"
+    />
+
+    {#if value}
+      <button
+        type="button"
+        onclick={clear}
+        aria-label="Clear search"
+        class="absolute right-2.5 top-1/2 -translate-y-1/2 text-faint
+          transition-colors duration-150 hover:text-fg"
       >
-        <path d="M18 6L6 18M6 6l12 12" />
-      </svg>
-    </button>
-  {/if}
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          aria-hidden="true"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    {/if}
+  </div>
 </div>

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

@@ -1,7 +1,10 @@
 interface Props {
     value?: string;
+    label?: string;
     placeholder?: string;
     disabled?: boolean;
+    id?: string;
+    name?: string;
     class?: string;
     oninput?: (value: string) => void;
 }