@lyeve-labs/ui-kit 0.11.0 → 0.12.1

package/README.md

@@ -188,7 +188,7 @@ src/
 breaking changes bump the **minor** version; additive changes bump the **patch**.
 Every release is logged in [`CHANGELOG.md`](CHANGELOG.md) and on the docs site.
 
-Maintainers: see [`PUBLISHING.md`](PUBLISHING.md) for the release workflow.
+Maintainers: the release workflow is [`CONTRIBUTING.md`](CONTRIBUTING.md#releases).
 
 ## Contributing
 

package/dist/components/AccordionItem.svelte

@@ -35,7 +35,7 @@
       aria-controls={panelId}
       class="flex w-full items-center justify-between px-5 py-4 text-left text-sm font-medium
         text-fg transition-colors duration-150 hover:bg-surface-2/50
-        outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/50
+        outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand
         {open ? 'bg-surface-2/40' : ''}"
     >
       <span>{title}</span>

package/dist/components/Button.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
   import Spinner from './Spinner.svelte';
 
   type Variant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'violet';
   type Size = 'sm' | 'md' | 'lg';
 
-  interface Props {
+  /**
+   * Attributes forwarded to whichever element renders. Naming them, rather than
+   * accepting an open index signature, means a prop the component does not
+   * define fails the build instead of reaching the DOM as a stray attribute.
+   */
+  type Forwarded = Omit<
+    HTMLButtonAttributes & HTMLAnchorAttributes,
+    'type' | 'href' | 'disabled' | 'class' | 'onclick' | 'children'
+  >;
+
+  interface Props extends Forwarded {
     variant?: Variant;
     size?: Size;
     disabled?: boolean;
@@ -16,7 +27,6 @@
     class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;
-    [key: string]: unknown;
   }
 
   let {
@@ -37,10 +47,10 @@
     primary: 'bg-brand text-ink hover:bg-brand-light active:bg-brand shadow-sm shadow-brand/20',
     violet:
       'bg-violet text-ink hover:brightness-110 active:brightness-100 shadow-sm shadow-violet/20',
-    secondary: 'bg-surface-2 text-fg border border-line hover:bg-line',
+    secondary: 'bg-surface-2 text-fg border border-line-strong hover:bg-line',
     danger: 'bg-danger text-ink hover:brightness-110 active:brightness-100',
     ghost: 'text-muted hover:bg-surface-2 hover:text-fg',
-    outline: 'border border-line text-fg hover:border-brand hover:text-brand',
+    outline: 'border border-line-strong text-fg hover:border-brand hover:text-brand',
   };
 
   const sizes: Record<Size, string> = {
@@ -58,15 +68,37 @@
 
   // Reject javascript: and data: URIs - only allow standard schemes and relative URLs.
   let safeHref = $derived(href && !/^(javascript|data):/i.test(href) ? href : undefined);
+
+  /**
+   * An anchor has no `disabled`. The prop was accepted and then dropped on this
+   * branch, so `<Button href="..." disabled>` rendered a link that looked
+   * ordinary and navigated on click, and `disabled:opacity-50` never matched
+   * because that pseudo-class does not apply to `a`. Dropping the href is what
+   * actually takes it out of the tab order and stops activation.
+   */
+  const inert = $derived(disabled || loading);
 </script>
 
 {#if href}
-  <a href={safeHref} class={cls} {...rest}>
+  <a
+    href={inert ? undefined : safeHref}
+    class="{cls} {inert ? 'pointer-events-none opacity-50' : ''}"
+    aria-disabled={inert ? 'true' : undefined}
+    tabindex={inert ? -1 : undefined}
+    {...rest}
+  >
     {#if loading}<Spinner size={spinnerSize} />{/if}
     {@render children()}
   </a>
 {:else}
-  <button {type} disabled={disabled || loading} {onclick} class={cls} {...rest}>
+  <button
+    {type}
+    disabled={disabled || loading}
+    aria-busy={loading ? 'true' : undefined}
+    {onclick}
+    class={cls}
+    {...rest}
+  >
     {#if loading}<Spinner size={spinnerSize} />{/if}
     {@render children()}
   </button>

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

@@ -1,7 +1,14 @@
 import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 type Variant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'violet';
 type Size = 'sm' | 'md' | 'lg';
-interface Props {
+/**
+ * Attributes forwarded to whichever element renders. Naming them, rather than
+ * accepting an open index signature, means a prop the component does not
+ * define fails the build instead of reaching the DOM as a stray attribute.
+ */
+type Forwarded = Omit<HTMLButtonAttributes & HTMLAnchorAttributes, 'type' | 'href' | 'disabled' | 'class' | 'onclick' | 'children'>;
+interface Props extends Forwarded {
     variant?: Variant;
     size?: Size;
     disabled?: boolean;
@@ -12,7 +19,6 @@ interface Props {
     class?: string;
     onclick?: (e: MouseEvent) => void;
     children: Snippet;
-    [key: string]: unknown;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/components/Card.svelte

@@ -29,6 +29,23 @@
     children,
   }: Props = $props();
 
+  /**
+   * A clickable Card advertises itself as a button and used to do nothing when
+   * you pressed one. It took `role="button"` and `tabindex="0"` from `onclick`
+   * alone, so it entered the tab order and then ignored Enter and Space unless
+   * the page happened to pass its own `onkeydown`. Native button semantics are
+   * the contract here, so the component honours them itself and still forwards
+   * whatever the consumer supplied.
+   */
+  function activate(e: KeyboardEvent) {
+    onkeydown?.(e);
+    if (!onclick || e.defaultPrevented) return;
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    // Space scrolls the page on a non-button element.
+    e.preventDefault();
+    (e.currentTarget as HTMLElement).click();
+  }
+
   const pads: Record<Pad, string> = {
     none: '',
     sm: 'p-4',
@@ -47,7 +64,7 @@
   role={onclick ? 'button' : undefined}
   tabindex={onclick ? 0 : undefined}
   {onclick}
-  {onkeydown}
+  onkeydown={onclick ? activate : onkeydown}
 >
   {#if header || title}
     <div class="px-5 py-4 border-b border-line">

package/dist/components/Checkbox.svelte

@@ -45,13 +45,17 @@
       {disabled}
       {checked}
       onchange={handleChange}
-      class="peer sr-only"
+      class="peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
     />
+    <!-- The focus ring is stated once, outside the checked branch. It used to
+         live only on the unchecked classes, so ticking a box removed the only
+         indicator a keyboard user had; in a permissions matrix of a hundred
+         boxes that loses your place entirely. A ring rather than a border
+         colour, because when checked the border is already brand. -->
     <span
-      class="w-4 h-4 rounded border transition-colors duration-150 flex items-center justify-center
-        {checked
-        ? 'bg-brand border-brand'
-        : 'bg-surface-2 border-line peer-focus-visible:border-brand'}"
+      class="pointer-events-none w-4 h-4 rounded border transition-colors duration-150 flex items-center justify-center
+        peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-brand peer-focus-visible:outline-offset-2
+        {checked ? 'bg-brand border-brand' : 'bg-surface-2 border-line-strong'}"
     >
       {#if checked}
         <svg width="10" height="8" viewBox="0 0 10 8" fill="none" aria-hidden="true">

package/dist/components/Drawer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { overlay } from '../internal/overlay.js';
 
   type Side = 'left' | 'right';
   type Size = 'sm' | 'md' | 'lg' | 'xl';
@@ -33,6 +34,9 @@
     xl: 'w-[480px]',
   };
 
+  const headingId = $props.id();
+  const descriptionId = `${headingId}-description`;
+
   function close() {
     open = false;
     onclose?.();
@@ -52,25 +56,32 @@
   <div class="fixed inset-0 z-50 flex {side === 'right' ? 'justify-end' : 'justify-start'}">
     <button
       type="button"
+      tabindex="-1"
+      aria-hidden="true"
       class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
-      aria-label="Close"
       onclick={close}
     ></button>
 
     <div
-      class="relative flex h-full flex-col {widths[size]} bg-surface shadow-2xl
+      use:overlay
+      class="relative flex h-full max-w-full flex-col {widths[size]} bg-surface shadow-2xl
         {side === 'right' ? 'border-l' : 'border-r'} border-line
         {side === 'right'
         ? 'animate-[drawer-in-right_150ms_ease-out]'
         : 'animate-[drawer-in-left_150ms_ease-out]'}"
       role="dialog"
       aria-modal="true"
+      aria-labelledby={title ? headingId : undefined}
+      aria-describedby={description ? descriptionId : undefined}
+      aria-label={title ? undefined : 'Panel'}
     >
       {#if title}
         <div class="flex shrink-0 items-start justify-between gap-4 border-b border-line px-5 py-4">
           <div>
-            <h2 class="font-semibold text-fg">{title}</h2>
-            {#if description}<p class="mt-0.5 text-sm text-muted">{description}</p>{/if}
+            <h2 id={headingId} class="font-semibold text-fg">{title}</h2>
+            {#if description}
+              <p id={descriptionId} class="mt-0.5 text-sm text-muted">{description}</p>
+            {/if}
           </div>
           <button
             type="button"

package/dist/components/Input.svelte

@@ -8,8 +8,19 @@
     controlBorder,
     describedBy,
   } from '../internal/field.js';
+  import type { HTMLInputAttributes } from 'svelte/elements';
 
-  interface Props {
+  /**
+   * Attributes forwarded to the input. Naming them, rather than accepting an
+   * open index signature, means a prop the component does not define fails the
+   * build instead of reaching the DOM as a stray attribute.
+   */
+  type Forwarded = Omit<
+    HTMLInputAttributes,
+    'value' | 'type' | 'placeholder' | 'disabled' | 'required' | 'id' | 'name' | 'class'
+  >;
+
+  interface Props extends Forwarded {
     value?: string;
     label?: string;
     type?: string;
@@ -21,7 +32,6 @@
     id?: string;
     name?: string;
     class?: string;
-    [key: string]: unknown;
   }
 
   let {

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

@@ -1,4 +1,11 @@
-interface Props {
+import type { HTMLInputAttributes } from 'svelte/elements';
+/**
+ * Attributes forwarded to the input. Naming them, rather than accepting an
+ * open index signature, means a prop the component does not define fails the
+ * build instead of reaching the DOM as a stray attribute.
+ */
+type Forwarded = Omit<HTMLInputAttributes, 'value' | 'type' | 'placeholder' | 'disabled' | 'required' | 'id' | 'name' | 'class'>;
+interface Props extends Forwarded {
     value?: string;
     label?: string;
     type?: string;
@@ -10,7 +17,6 @@ interface Props {
     id?: string;
     name?: string;
     class?: string;
-    [key: string]: unknown;
 }
 declare const Input: import("svelte").Component<Props, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/components/Modal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { overlay } from '../internal/overlay.js';
 
   type Size = 'sm' | 'md' | 'lg';
 
@@ -29,6 +30,11 @@
     lg: 'max-w-2xl',
   };
 
+  // aria-labelledby needs an id that is unique per instance, because two modals
+  // can be mounted at once while one animates out.
+  const headingId = $props.id();
+  const descriptionId = `${headingId}-description`;
+
   function close() {
     open = false;
     onclose?.();
@@ -48,27 +54,38 @@
   <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
     <button
       type="button"
+      tabindex="-1"
+      aria-hidden="true"
       class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
-      aria-label="Close"
       onclick={close}
     ></button>
 
     <div
-      class="relative w-full {widths[size]} rounded-xl border border-line bg-surface shadow-2xl
+      use:overlay
+      class="relative flex max-h-[calc(100dvh-2rem)] w-full {widths[size]} flex-col
+             overflow-hidden rounded-xl border border-line bg-surface shadow-2xl
              animate-[modal-in_120ms_ease-out]"
       role="dialog"
       aria-modal="true"
+      aria-labelledby={title ? headingId : undefined}
+      aria-describedby={description ? descriptionId : undefined}
+      aria-label={title ? undefined : 'Dialog'}
     >
       {#if title}
-        <div class="flex items-start justify-between gap-4 px-5 py-4 border-b border-line">
+        <div
+          class="flex shrink-0 items-start justify-between gap-4 px-5 py-4 border-b border-line"
+        >
           <div>
-            <h2 class="font-semibold text-fg">{title}</h2>
-            {#if description}<p class="text-sm text-muted mt-0.5">{description}</p>{/if}
+            <h2 id={headingId} class="font-semibold text-fg">{title}</h2>
+            {#if description}
+              <p id={descriptionId} class="text-sm text-muted mt-0.5">{description}</p>
+            {/if}
           </div>
           <button
             type="button"
             onclick={close}
-            class="shrink-0 text-faint transition-colors duration-150 hover:text-fg"
+            class="shrink-0 rounded text-faint transition-colors duration-150 hover:text-fg
+                   outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
             aria-label="Close"
           >
             <svg
@@ -85,13 +102,13 @@
         </div>
       {/if}
 
-      <div class="px-5 py-4">
+      <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
         {@render children()}
       </div>
 
       {#if footer}
         <div
-          class="flex items-center justify-end gap-2 px-5 py-3 border-t border-line bg-surface-2/40"
+          class="flex shrink-0 items-center justify-end gap-2 px-5 py-3 border-t border-line bg-surface-2/40"
         >
           {@render footer()}
         </div>

package/dist/components/MultiSelect.svelte

@@ -197,7 +197,7 @@
               onclick={() => toggle(opt)}
               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
-                outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/50"
+                outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
             >
               <span
                 class="flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors duration-150

package/dist/components/Pagination.svelte

@@ -37,20 +37,25 @@
     'inline-flex items-center justify-center w-7 h-7 rounded text-xs font-medium transition-colors duration-150';
 </script>
 
-{#if totalPages > 1}
-  <div class="flex items-center gap-3 {cls}">
-    <span class="text-xs text-faint shrink-0">
-      {total === 0 ? 'No results' : `${from}–${to} of ${total}`}
-    </span>
+<!-- The summary renders whenever there is a count to state, and the page
+     buttons only when there is more than one page. The whole component used to
+     be behind `totalPages > 1`, and an empty list has one page, so the 'No
+     results' line below could never appear and a single page of results showed
+     no count at all. -->
+<div class="flex flex-wrap items-center gap-x-3 gap-y-2 {cls}">
+  <span class="text-xs text-faint shrink-0">
+    {safeTotal === 0 ? 'No results' : `${from} to ${to} of ${safeTotal}`}
+  </span>
 
-    <div class="flex items-center gap-0.5 ml-auto">
+  {#if totalPages > 1}
+    <div class="flex flex-wrap items-center gap-0.5 ml-auto">
       <button
         type="button"
         disabled={safePage <= 1}
         onclick={() => onchange(safePage - 1)}
         aria-label="Previous page"
         class="{btnBase} text-muted hover:text-fg hover:bg-surface-2
-          disabled:opacity-30 disabled:cursor-not-allowed"
+            disabled:opacity-30 disabled:cursor-not-allowed"
       >
         <svg
           width="14"
@@ -76,7 +81,7 @@
             onclick={() => onchange(n as number)}
             aria-current={safePage === n ? 'page' : undefined}
             class="{btnBase}
-              {safePage === n
+                {safePage === n
               ? 'bg-brand text-ink'
               : 'text-muted hover:text-fg hover:bg-surface-2'}"
           >
@@ -108,5 +113,5 @@
         </svg>
       </button>
     </div>
-  </div>
-{/if}
+  {/if}
+</div>

package/dist/components/Radio.svelte

@@ -46,13 +46,16 @@
       {disabled}
       checked={group === value}
       onchange={handleChange}
-      class="peer sr-only"
+      class="peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
     />
+    <!-- The focus ring is stated once, outside the selected branch. It used to
+         sit only on the unselected classes, so choosing an option removed the
+         only indicator a keyboard user had. A ring rather than a border colour,
+         because when selected the border is already brand. -->
     <span
-      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'}"
+      class="pointer-events-none flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors duration-150
+        peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-brand peer-focus-visible:outline-offset-2
+        {group === value ? 'border-brand bg-surface-2' : 'border-line-strong bg-surface-2'}"
     >
       {#if group === value}
         <span class="h-2 w-2 rounded-full bg-brand"></span>

package/dist/components/RadioGroup.svelte

@@ -68,10 +68,10 @@
             disabled={disabled || opt.disabled}
             checked={value === opt.value}
             onchange={() => select(opt)}
-            class="peer sr-only"
+            class="peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
           />
           <span
-            class="flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors duration-150
+            class="pointer-events-none 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'}"

package/dist/components/Textarea.svelte

@@ -49,11 +49,6 @@
   } = $props();
 
   const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
-
-  function handleInput(e: TAE) {
-    value = e.currentTarget.value;
-    oninput?.(e);
-  }
 </script>
 
 <div class="{FIELD_WRAP} {cls}">
@@ -75,9 +70,10 @@
     aria-invalid={error ? 'true' : undefined}
     aria-describedby={describedBy(fieldId, error, hint)}
     class="{CONTROL_MULTILINE} {controlBorder(!!error)} {resize ? 'resize-y' : 'resize-none'}"
-    oninput={handleInput}
-    {onblur}>{value}</textarea
-  >
+    bind:value
+    {oninput}
+    {onblur}
+  ></textarea>
 
   {#if error}
     <p id={fieldId ? `${fieldId}-error` : undefined} class={FIELD_ERROR}>{error}</p>

package/dist/components/Toaster.svelte

@@ -11,14 +11,21 @@
   };
 </script>
 
+<!-- The live region is this container, which is mounted for the life of the
+     app and empty most of the time. Marking each toast `role="status"` instead
+     announced nothing: assistive technology watches an existing region for
+     changes, and a region that arrives already holding its text is not a
+     change. -->
 <div
   class="pointer-events-none fixed bottom-4 right-4 z-[60] flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2"
+  role="status"
+  aria-live="polite"
+  aria-atomic="false"
 >
   {#each toast.items as t (t.id)}
     <div
       class="pointer-events-auto flex items-start gap-3 overflow-hidden rounded-lg border border-line
              bg-surface pl-0 pr-3 py-3 shadow-xl animate-[toast-in_140ms_ease-out]"
-      role="status"
     >
       <span class="w-1 self-stretch shrink-0 {styles[statusTone(t.tone)].bar}"></span>
       <span
@@ -43,7 +50,7 @@
       <p class="flex-1 text-sm text-fg leading-snug">{t.message}</p>
       <button
         type="button"
-        class="shrink-0 rounded text-faint transition-colors duration-150 hover:text-fg outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand/50"
+        class="shrink-0 rounded text-faint transition-colors duration-150 hover:text-fg outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
         aria-label="Dismiss"
         onclick={() => toast.dismiss(t.id)}
       >

package/dist/components/Toggle.svelte

@@ -6,6 +6,7 @@
     hint,
     disabled = false,
     size = 'md',
+    id,
     class: cls = '',
     onchange,
   }: {
@@ -14,6 +15,8 @@
     hint?: string;
     disabled?: boolean;
     size?: 'sm' | 'md';
+    /** Lets a `<Label for=...>` outside the component target the switch. */
+    id?: string;
     class?: string;
     onchange?: (checked: boolean) => void;
   } = $props();
@@ -47,13 +50,14 @@
 >
   <button
     type="button"
+    {id}
     role="switch"
     aria-checked={checked}
     aria-label={label ?? 'Toggle'}
     {disabled}
     onclick={handleClick}
     class="relative shrink-0 rounded-full transition-colors duration-150 outline-none
-      focus-visible:ring-2 focus-visible:ring-brand/50 focus-visible:ring-offset-1
+      focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1
       focus-visible:ring-offset-ink mt-0.5
       {track[size]}
       {checked ? 'bg-brand' : 'bg-surface-2'}"

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

@@ -4,6 +4,8 @@ type $$ComponentProps = {
     hint?: string;
     disabled?: boolean;
     size?: 'sm' | 'md';
+    /** Lets a `<Label for=...>` outside the component target the switch. */
+    id?: string;
     class?: string;
     onchange?: (checked: boolean) => void;
 };

package/dist/components/Tooltip.svelte

@@ -13,6 +13,9 @@
   let { text, position = 'top', class: cls = '', children }: Props = $props();
 
   let visible = $state(false);
+  let wrapper = $state<HTMLElement>();
+
+  const id = $props.id();
 
   const pos: Record<Position, string> = {
     top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
@@ -20,25 +23,58 @@
     left: 'right-full top-1/2 -translate-y-1/2 mr-2',
     right: 'left-full top-1/2 -translate-y-1/2 ml-2',
   };
+
+  /**
+   * `role="tooltip"` on its own is inert: assistive technology reads a tooltip
+   * only because the element it describes points at it. The trigger arrives as
+   * a snippet, so the component cannot put the attribute on it at compile time
+   * and wires it to the first focusable descendant instead. Without this the
+   * text was visible to a sighted mouse user and to nobody else.
+   */
+  $effect(() => {
+    const trigger = wrapper?.querySelector<HTMLElement>(
+      'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    );
+    if (!trigger) return;
+    trigger.setAttribute('aria-describedby', id);
+    return () => trigger.removeAttribute('aria-describedby');
+  });
+
+  function onkeydown(e: KeyboardEvent) {
+    // SC 1.4.13 requires content shown on hover or focus to be dismissible
+    // without moving the pointer or the focus.
+    if (e.key === 'Escape' && visible) {
+      e.stopPropagation();
+      visible = false;
+    }
+  }
 </script>
 
+<!-- focusin and focusout, not focus and blur. focus and blur do not bubble, so
+     bound to this wrapper they never fired for the trigger inside it and the
+     tooltip was unreachable by keyboard. -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <span
+  bind:this={wrapper}
   class="relative inline-flex {cls}"
   onmouseenter={() => (visible = true)}
   onmouseleave={() => (visible = false)}
-  onfocus={() => (visible = true)}
-  onblur={() => (visible = false)}
+  onfocusin={() => (visible = true)}
+  onfocusout={() => (visible = false)}
+  {onkeydown}
 >
   {@render children()}
-  {#if visible}
-    <span
-      role="tooltip"
-      class="pointer-events-none absolute {pos[position]} z-50
-        whitespace-nowrap rounded-lg border border-line bg-surface-2
-        px-2.5 py-1.5 text-xs text-fg shadow-xl"
-    >
-      {text}
-    </span>
-  {/if}
+  <!-- Always rendered, hidden by the `hidden` attribute rather than removed:
+       aria-describedby resolves the text of a hidden element, so the trigger
+       keeps a stable target. Left hoverable rather than pointer-events-none, so
+       moving onto it does not dismiss it, which SC 1.4.13 also requires. -->
+  <span
+    {id}
+    role="tooltip"
+    hidden={!visible}
+    class="absolute {pos[position]} z-50 max-w-[min(16rem,calc(100vw-2rem))]
+      rounded-lg border border-line bg-surface-2 px-2.5 py-1.5 text-xs text-fg shadow-xl"
+  >
+    {text}
+  </span>
 </span>

package/dist/components/dialog/Dialog.svelte

@@ -9,15 +9,14 @@
    * Not meant to be used directly - use openDialog() from dialog-manager.
    */
   import { X } from '@lucide/svelte';
-  import { onMount, tick } from 'svelte';
+  import { onMount } from 'svelte';
   import type { Snippet } from 'svelte';
   import type { DialogEntry } from './types.js';
   import { sizeClass } from './types.js';
+  import { overlay } from '../../internal/overlay.js';
   import {
     closeDialog,
     dismissDialog,
-    _lockBodyScroll,
-    _unlockBodyScroll,
   } from './dialog-manager.svelte';
   import ConfirmDialog from './ConfirmDialog.svelte';
 
@@ -45,45 +44,18 @@
   // ──────────────────────────────────────────────────────
 
   let dialogEl = $state<HTMLDivElement>();
-  let previousFocus = $state<HTMLElement | null>(null);
-  let focusableSelector =
-    'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
   // ──────────────────────────────────────────────────────
   // Lifecycle
   // ──────────────────────────────────────────────────────
 
+  // Focus entry, the Tab trap, the body scroll lock and focus restore all come
+  // from `use:overlay` on the panel below, which is the same implementation
+  // Modal and Drawer use. This is only the enter animation.
   onMount(() => {
-    // Save previously focused element for restore on unmount
-    const el = document.activeElement;
-    previousFocus = el instanceof HTMLElement ? el : null;
-
-    // Trigger enter animation on next frame
     requestAnimationFrame(() => {
       visible = true;
     });
-
-    // Focus trap: focus first focusable element, or the dialog itself
-    tick().then(() => {
-      if (dialogEl) {
-        const focusable = dialogEl.querySelectorAll(focusableSelector);
-        if (focusable.length > 0) {
-          (focusable[0] as HTMLElement).focus();
-        } else {
-          dialogEl.focus();
-        }
-      }
-    });
-
-    // Lock body scroll (counter-based: only unlock when no dialogs remain)
-    _lockBodyScroll();
-    const unlock = () => _unlockBodyScroll();
-
-    return () => {
-      unlock();
-      // Restore focus
-      previousFocus?.focus?.();
-    };
   });
 
   // ──────────────────────────────────────────────────────
@@ -104,30 +76,6 @@
         handleDismiss();
       }
     }
-
-    // Focus trap
-    if (e.key === 'Tab' && dialogEl) {
-      const focusable = dialogEl.querySelectorAll(focusableSelector);
-      if (focusable.length === 0) {
-        e.preventDefault();
-        return;
-      }
-
-      const first = focusable[0] as HTMLElement;
-      const last = focusable[focusable.length - 1] as HTMLElement;
-
-      if (e.shiftKey) {
-        if (document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else {
-        if (document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    }
   }
 
   async function handleDismiss(): Promise<void> {
@@ -145,7 +93,15 @@
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="fixed inset-0 z-[{zIndex}] flex items-center justify-center" role="presentation">
+<!-- z-index is an inline style, not a `z-[...]` class. Tailwind scans source text
+     for complete class names, so a class built from a runtime value matches no
+     candidate and no rule is ever generated: every stacked dialog rendered at
+     `z-index: auto` and the stacking order came down to DOM order. -->
+<div
+  class="fixed inset-0 flex items-center justify-center"
+  style="z-index: {zIndex}"
+  role="presentation"
+>
   <!-- Backdrop -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
@@ -163,6 +119,7 @@
   <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
   <div
     bind:this={dialogEl}
+    use:overlay
     class="relative w-full {sizeClass(entry.options.size ?? 'md')} mx-4
 			bg-surface border border-line rounded-xl shadow-2xl
 			transition-all duration-200 ease-out

package/dist/components/dialog/dialog-manager.svelte.d.ts

@@ -15,8 +15,8 @@
  *   if (ok) { /* ... *\/ }
  */
 import type { DialogOptions, DialogEntry } from './types.js';
-export declare function _lockBodyScroll(): void;
-export declare function _unlockBodyScroll(): void;
+import { lockBodyScroll, unlockBodyScroll } from '../../internal/overlay.js';
+export { lockBodyScroll as _lockBodyScroll, unlockBodyScroll as _unlockBodyScroll };
 /** Readonly snapshot for components */
 export declare function getDialogStack(): readonly DialogEntry<any>[];
 /**

package/dist/components/dialog/dialog-manager.svelte.js

@@ -14,6 +14,7 @@
  *   const ok = await confirm('Delete this item?', 'This action cannot be undone.');
  *   if (ok) { /* ... *\/ }
  */
+import { lockBodyScroll, unlockBodyScroll } from '../../internal/overlay.js';
 // ──────────────────────────────────────────────────────────
 // Module-level reactive state
 // ──────────────────────────────────────────────────────────
@@ -23,22 +24,13 @@ let stack = $state([]);
 // ──────────────────────────────────────────────────────────
 // Body scroll lock (counter-based - handles stacked dialogs)
 // ──────────────────────────────────────────────────────────
-let bodyLockCount = 0;
-export function _lockBodyScroll() {
-    bodyLockCount++;
-    if (typeof document !== 'undefined') {
-        document.body.style.overflow = 'hidden';
-    }
-}
-export function _unlockBodyScroll() {
-    bodyLockCount--;
-    if (bodyLockCount <= 0) {
-        bodyLockCount = 0;
-        if (typeof document !== 'undefined') {
-            document.body.style.overflow = '';
-        }
-    }
-}
+/*
+ * The count lives in internal/overlay.ts, which is also what Modal and Drawer
+ * lock through. Two counters meant a Dialog opened over a Drawer restored
+ * scrolling to the page as soon as either one closed, because each believed it
+ * held the only lock.
+ */
+export { lockBodyScroll as _lockBodyScroll, unlockBodyScroll as _unlockBodyScroll };
 /** Readonly snapshot for components */
 export function getDialogStack() {
     return stack;
@@ -132,10 +124,9 @@ export function dismissDialog(id) {
 export function dismissAllDialogs() {
     const copy = [...stack];
     stack = [];
-    bodyLockCount = 0;
-    if (typeof document !== 'undefined') {
-        document.body.style.overflow = '';
-    }
+    // The manager never locks. Each overlay takes one lock on mount and releases
+    // it on unmount, so clearing the stack unmounts the dialogs and the count
+    // unwinds itself. Zeroing it here released locks a Modal or Drawer still held.
     for (const entry of copy) {
         entry.reject(new DOMException('All dialogs dismissed', 'AbortError'));
     }
@@ -150,7 +141,16 @@ export function confirm(title, message) {
     const id = `confirm-${++idCounter}`;
     const promise = openDialog({ id, size: 'sm', title });
     setDialogMeta(id, { confirmTitle: title, confirmMessage: message ?? '' });
-    return promise;
+    // Cancelling a dialog dismisses it, and dismissal rejects. Callers write
+    // `if (await confirm(...))`, so a rejection on Cancel is an unhandled
+    // rejection on the ordinary path rather than an error anyone meant to
+    // handle. Cancel is an answer, not a failure: it resolves false, which is
+    // what this function has always documented.
+    return promise.catch((err) => {
+        if (err instanceof DOMException && err.name === 'AbortError')
+            return false;
+        throw err;
+    });
 }
 /**
  * Set metadata on a dialog entry after it's opened.

package/dist/index.d.ts

@@ -60,4 +60,4 @@ export { openDialog, closeDialog, dismissDialog, dismissAllDialogs, confirm, set
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, setTheme, toggleTheme, themeBootScript, type Theme } from './utils/theme.js';
-export declare const VERSION = "0.11.0";
+export declare const VERSION = "0.12.1";

package/dist/index.js

@@ -71,4 +71,4 @@ export { getTheme, setTheme, toggleTheme, themeBootScript } from './utils/theme.
 // ── 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.11.0';
+export const VERSION = '0.12.1';

package/dist/internal/field.js

@@ -41,7 +41,10 @@ export const CONTROL_MULTILINE = 'w-full min-h-control rounded-lg bg-surface-2 b
  * `border-danger/70`.
  */
 export function controlBorder(error) {
-    return error ? 'border-danger focus:border-danger' : 'border-line focus:border-brand';
+    // 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.
+    return error ? 'border-danger focus:border-danger' : 'border-line-strong focus:border-brand';
 }
 /**
  * Wires a control to whichever of its hint or error is on screen.

package/dist/internal/overlay.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The behaviour 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
+ * overlay cannot ship without it.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+export declare function lockBodyScroll(): void;
+export declare function unlockBodyScroll(): void;
+/**
+ * Svelte action for the panel element of a modal overlay.
+ *
+ *     <div use:overlay role="dialog" aria-modal="true">
+ *
+ * Moves focus in on mount, keeps Tab inside the panel, locks the page behind
+ * it, and returns focus to whatever opened it on unmount.
+ */
+export declare function overlay(node: HTMLElement): {
+    destroy(): void;
+};

package/dist/internal/overlay.js

@@ -0,0 +1,92 @@
+/**
+ * The behaviour 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
+ * overlay cannot ship without it.
+ *
+ * Not exported from the package entry point - this is an implementation detail.
+ */
+/**
+ * Elements that can hold focus. `[tabindex="-1"]` is excluded because it is
+ * programmatically focusable but not part of the tab sequence, which is what
+ * the trap is wrapping.
+ */
+const FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * Counted rather than boolean: a dialog opened from inside a drawer must not
+ * restore scrolling when only the inner one closes.
+ */
+let bodyLockCount = 0;
+export function lockBodyScroll() {
+    bodyLockCount++;
+    if (typeof document !== 'undefined') {
+        document.body.style.overflow = 'hidden';
+    }
+}
+export function unlockBodyScroll() {
+    bodyLockCount--;
+    if (bodyLockCount <= 0) {
+        bodyLockCount = 0;
+        if (typeof document !== 'undefined') {
+            document.body.style.overflow = '';
+        }
+    }
+}
+function focusable(node) {
+    return [...node.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetWidth > 0 || el.offsetHeight > 0 || el === document.activeElement);
+}
+/**
+ * Svelte action for the panel element of a modal overlay.
+ *
+ *     <div use:overlay role="dialog" aria-modal="true">
+ *
+ * Moves focus in on mount, keeps Tab inside the panel, locks the page behind
+ * it, and returns focus to whatever opened it on unmount.
+ */
+export function overlay(node) {
+    const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    lockBodyScroll();
+    // A panel with nothing focusable still has to receive focus, or the screen
+    // reader stays on the element behind the overlay and reads the wrong thing.
+    const first = focusable(node)[0];
+    if (first) {
+        first.focus();
+    }
+    else {
+        node.tabIndex = -1;
+        node.focus();
+    }
+    function onkeydown(e) {
+        if (e.key !== 'Tab')
+            return;
+        const items = focusable(node);
+        if (items.length === 0) {
+            e.preventDefault();
+            return;
+        }
+        const head = items[0];
+        const tail = items[items.length - 1];
+        if (e.shiftKey && document.activeElement === head) {
+            e.preventDefault();
+            tail.focus();
+        }
+        else if (!e.shiftKey && document.activeElement === tail) {
+            e.preventDefault();
+            head.focus();
+        }
+    }
+    node.addEventListener('keydown', onkeydown);
+    return {
+        destroy() {
+            node.removeEventListener('keydown', onkeydown);
+            unlockBodyScroll();
+            // The opener can be gone by now, for instance a row action whose row the
+            // dialog just deleted, so this is deliberately best effort.
+            previous?.focus?.();
+        },
+    };
+}

package/dist/styles/theme.css

@@ -36,6 +36,12 @@
   --color-surface: #101a2b;
   --color-surface-2: #162233;
   --color-line: #1e2d40;
+  /* line reads 1.25:1 against surface. That is fine for a divider, which
+   * carries no information, and fails SC 1.4.11 for anything whose boundary
+   * is the only thing identifying it as a control. Inputs, selects,
+   * checkboxes, radios and toggles use line-strong, which clears 3:1 on
+   * every surface in the palette. */
+  --color-line-strong: #616d80;
   --color-fg: #e6e8ee;
   --color-muted: #9aa1ad;
   /* #525866 failed WCAG AA against surface/ink (~2.5:1); every caption and
@@ -46,13 +52,24 @@
   --color-brand: #00d4ff;
   --color-brand-light: #5fd9f4;
   --color-brand-deep: #0099c4;
-  --color-violet: #7c6aef;
+  /* #7c6aef reads 4.29:1 on surface and 3.83:1 inside its own bg-violet/10
+   * badge, both under the 4.5:1 floor. #9587f2 clears every surface the kit
+   * paints it on and the badge as well. */
+  --color-violet: #9587f2;
 
   /* #15803d and #b45309 sit at ~3.7:1 on ink, below the 4.5:1 AA floor
    * for the text-size status labels that use them. */
   --color-success: #22c55e;
   --color-warn: #f59e0b;
-  --color-danger: #b91c1c;
+  /* #b91c1c reads 2.85:1 on ink and 2.61:1 inside bg-danger/10, so every
+   * form error message and every validation hint failed AA. A dark red
+   * cannot work as a foreground on a dark surface.
+   *
+   * One token serves both roles because it inverts with `ink`. As text on a
+   * dark surface #f87171 reads 6.30:1; as the fill behind a `text-ink` label
+   * on a filled destructive button it reads 6.67:1. The light palette does
+   * the same in reverse with a dark red and a near-white ink. */
+  --color-danger: #f87171;
 
   /* ── Radius ─────────────────────────────────────────────────── */
   --radius-xs: 4px;
@@ -125,20 +142,30 @@ html[data-theme='light'] {
   --color-surface: #ffffff;
   --color-surface-2: #e6e8ee;
   --color-line: #d6d9e0;
+  --color-line-strong: #767d8e;
   --color-fg: #111827;
   --color-muted: #525866;
-  /* #9aa1ad on white is ~3.1:1, below the 4.5:1 AA floor; #6b7280 sits
-   * at ~4.8:1 while staying visually tertiary. */
-  --color-faint: #6b7280;
-
-  --color-brand: #007ea6;
-  --color-brand-light: #00b4dd;
-  --color-brand-deep: #006a8a;
-  --color-violet: #6b5cdf;
-
-  --color-success: #15803d;
-  --color-warn: #b45309;
-  --color-danger: #b91c1c;
+  /* Every value below is the lightest colour on its own hue that clears
+   * 4.5:1 against the worst background the kit actually paints it on. That
+   * worst case is rarely the bare canvas: status text and brand chips sit
+   * inside a tint of their own token (bg-warn/10 text-warn), and the tint
+   * drags the background toward the text. Values chosen against white alone
+   * fail inside the tint and on surface-2. */
+  --color-faint: #616774;
+
+  --color-brand: #005a77;
+  /* brand-light is the hover step for brand links and for the filled brand
+   * button. In a light theme emphasis reads as deeper, not lighter, so it
+   * sits below brand here and brand-deep below that. The names describe
+   * their place in the default dark ramp. #00b4dd put near-white text at
+   * 2.45:1 on the primary button's hover state. */
+  --color-brand-light: #004f69;
+  --color-brand-deep: #00455c;
+  --color-violet: #5544da;
+
+  --color-success: #126c34;
+  --color-warn: #904207;
+  --color-danger: #ab1a1a;
 }
 
 @layer base {
@@ -163,8 +190,14 @@ html[data-theme='light'] {
     background-color: color-mix(in srgb, var(--color-brand) 30%, transparent);
   }
 
+  /*
+   * SC 1.4.11 puts a 3:1 floor on the focus indicator. Mixing brand down to
+   * 60% alpha left it at 2.39:1 on the light palette, so the one affordance a
+   * keyboard user has for locating themselves was the element that failed.
+   * Solid brand reads 9.85:1 on dark and 7.70:1 on light.
+   */
   :focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--color-brand) 60%, transparent);
+    outline: 2px solid var(--color-brand);
     outline-offset: 2px;
   }
 

package/package.json

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

package/src/lib/styles/theme.css

@@ -36,6 +36,12 @@
   --color-surface: #101a2b;
   --color-surface-2: #162233;
   --color-line: #1e2d40;
+  /* line reads 1.25:1 against surface. That is fine for a divider, which
+   * carries no information, and fails SC 1.4.11 for anything whose boundary
+   * is the only thing identifying it as a control. Inputs, selects,
+   * checkboxes, radios and toggles use line-strong, which clears 3:1 on
+   * every surface in the palette. */
+  --color-line-strong: #616d80;
   --color-fg: #e6e8ee;
   --color-muted: #9aa1ad;
   /* #525866 failed WCAG AA against surface/ink (~2.5:1); every caption and
@@ -46,13 +52,24 @@
   --color-brand: #00d4ff;
   --color-brand-light: #5fd9f4;
   --color-brand-deep: #0099c4;
-  --color-violet: #7c6aef;
+  /* #7c6aef reads 4.29:1 on surface and 3.83:1 inside its own bg-violet/10
+   * badge, both under the 4.5:1 floor. #9587f2 clears every surface the kit
+   * paints it on and the badge as well. */
+  --color-violet: #9587f2;
 
   /* #15803d and #b45309 sit at ~3.7:1 on ink, below the 4.5:1 AA floor
    * for the text-size status labels that use them. */
   --color-success: #22c55e;
   --color-warn: #f59e0b;
-  --color-danger: #b91c1c;
+  /* #b91c1c reads 2.85:1 on ink and 2.61:1 inside bg-danger/10, so every
+   * form error message and every validation hint failed AA. A dark red
+   * cannot work as a foreground on a dark surface.
+   *
+   * One token serves both roles because it inverts with `ink`. As text on a
+   * dark surface #f87171 reads 6.30:1; as the fill behind a `text-ink` label
+   * on a filled destructive button it reads 6.67:1. The light palette does
+   * the same in reverse with a dark red and a near-white ink. */
+  --color-danger: #f87171;
 
   /* ── Radius ─────────────────────────────────────────────────── */
   --radius-xs: 4px;
@@ -125,20 +142,30 @@ html[data-theme='light'] {
   --color-surface: #ffffff;
   --color-surface-2: #e6e8ee;
   --color-line: #d6d9e0;
+  --color-line-strong: #767d8e;
   --color-fg: #111827;
   --color-muted: #525866;
-  /* #9aa1ad on white is ~3.1:1, below the 4.5:1 AA floor; #6b7280 sits
-   * at ~4.8:1 while staying visually tertiary. */
-  --color-faint: #6b7280;
-
-  --color-brand: #007ea6;
-  --color-brand-light: #00b4dd;
-  --color-brand-deep: #006a8a;
-  --color-violet: #6b5cdf;
-
-  --color-success: #15803d;
-  --color-warn: #b45309;
-  --color-danger: #b91c1c;
+  /* Every value below is the lightest colour on its own hue that clears
+   * 4.5:1 against the worst background the kit actually paints it on. That
+   * worst case is rarely the bare canvas: status text and brand chips sit
+   * inside a tint of their own token (bg-warn/10 text-warn), and the tint
+   * drags the background toward the text. Values chosen against white alone
+   * fail inside the tint and on surface-2. */
+  --color-faint: #616774;
+
+  --color-brand: #005a77;
+  /* brand-light is the hover step for brand links and for the filled brand
+   * button. In a light theme emphasis reads as deeper, not lighter, so it
+   * sits below brand here and brand-deep below that. The names describe
+   * their place in the default dark ramp. #00b4dd put near-white text at
+   * 2.45:1 on the primary button's hover state. */
+  --color-brand-light: #004f69;
+  --color-brand-deep: #00455c;
+  --color-violet: #5544da;
+
+  --color-success: #126c34;
+  --color-warn: #904207;
+  --color-danger: #ab1a1a;
 }
 
 @layer base {
@@ -163,8 +190,14 @@ html[data-theme='light'] {
     background-color: color-mix(in srgb, var(--color-brand) 30%, transparent);
   }
 
+  /*
+   * SC 1.4.11 puts a 3:1 floor on the focus indicator. Mixing brand down to
+   * 60% alpha left it at 2.39:1 on the light palette, so the one affordance a
+   * keyboard user has for locating themselves was the element that failed.
+   * Solid brand reads 9.85:1 on dark and 7.70:1 on light.
+   */
   :focus-visible {
-    outline: 2px solid color-mix(in srgb, var(--color-brand) 60%, transparent);
+    outline: 2px solid var(--color-brand);
     outline-offset: 2px;
   }