@lyeve-labs/ui-kit 0.17.1 → 0.19.0

package/dist/components/Dropdown.svelte

@@ -1,4 +1,16 @@
 <script lang="ts">
+  /**
+   * A menu behind a trigger of the caller's own.
+   *
+   * The roles were the whole implementation: `menu` and `menuitem` were stated
+   * and nothing else was. A screen reader takes those roles at their word and
+   * tells the user to arrow through the items, so it announced a keyboard
+   * contract the component did not keep, and the rows were left in the tab
+   * sequence instead. That is worse than a plain list of buttons, which at
+   * least announces what it is. The contract is kept here: focus moves into the
+   * menu when it opens, the arrows and Home and End move it between the items,
+   * and Escape and Tab both close and hand focus back to the trigger.
+   */
   import type { Component, Snippet } from 'svelte';
 
   interface DropdownItem {
@@ -23,52 +35,226 @@
 
   let open = $state(false);
   let containerEl: HTMLDivElement | undefined = $state();
+  let menuEl: HTMLDivElement | undefined = $state();
+  /** The item focus is resting on. Indexes `items`, disabled rows included. */
+  let active = $state(-1);
+
+  /**
+   * What counts as the trigger: the first thing in the tab sequence that is not
+   * inside the menu. The trigger is a snippet the caller fills, so there is no
+   * element here to bind to, and the rows are excluded by position rather than
+   * by selector because a caller can put anything focusable in that snippet.
+   */
+  const FOCUSABLE =
+    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  function triggerNode(): HTMLElement | null {
+    if (containerEl === undefined) return null;
+    for (const node of containerEl.querySelectorAll<HTMLElement>(FOCUSABLE)) {
+      if (menuEl?.contains(node) === true) continue;
+      return node;
+    }
+    return null;
+  }
+
+  function itemNodes(): HTMLButtonElement[] {
+    if (menuEl === undefined) return [];
+    return [...menuEl.querySelectorAll<HTMLButtonElement>('[role="menuitem"]')];
+  }
+
+  function enabled(index: number): boolean {
+    return items[index] !== undefined && items[index].disabled !== true;
+  }
+
+  function first(): number {
+    for (let i = 0; i < items.length; i++) if (enabled(i)) return i;
+    return -1;
+  }
+
+  function last(): number {
+    for (let i = items.length - 1; i >= 0; i--) if (enabled(i)) return i;
+    return -1;
+  }
+
+  /**
+   * The next item in one direction, wrapping past the ends.
+   *
+   * A menu wraps where a listbox does not: arrowing down from the last item
+   * reaches the first, which is what the pattern says and what a reader that
+   * has just been told this is a menu will expect. Disabled rows are stepped
+   * over, because a disabled button refuses focus and Enter refuses to run it.
+   */
+  function step(from: number, direction: 1 | -1): number {
+    const count = items.length;
+    if (count === 0) return -1;
+    let cursor = from < 0 ? (direction === 1 ? -1 : 0) : from;
+    for (let taken = 0; taken < count; taken++) {
+      cursor = (cursor + direction + count) % count;
+      if (enabled(cursor)) return cursor;
+    }
+    return -1;
+  }
+
+  function openMenu(index: number): void {
+    active = index;
+    open = true;
+  }
+
+  function closeMenu(): void {
+    open = false;
+    active = -1;
+  }
+
+  /**
+   * Closes and puts focus back where the user left it.
+   *
+   * Focus is on a row that is about to be unmounted, so without this it falls
+   * to the body and the next Tab starts again from the top of the page.
+   */
+  function closeAndReturn(): void {
+    const back = triggerNode();
+    closeMenu();
+    back?.focus();
+  }
 
   function toggle() {
-    open = !open;
+    if (open) closeMenu();
+    else openMenu(first());
   }
 
   function handleItemClick(item: DropdownItem) {
     if (item.disabled) return;
-    open = false;
+    const back = triggerNode();
+    closeMenu();
+    back?.focus();
+    // Focus is settled before the action runs: the callback may open a dialog
+    // that moves focus itself, and it must not be moved again afterwards.
     item.onclick();
   }
 
   function handleOutsideClick(e: MouseEvent) {
-    if (containerEl && !containerEl.contains(e.target as Node)) open = false;
+    // No focus is returned here. The pointer has already chosen where to go.
+    if (containerEl && !containerEl.contains(e.target as Node)) closeMenu();
+  }
+
+  /**
+   * The last resort for Escape, for the case where focus has left the menu
+   * without closing it. The handler below consumes the key whenever focus is
+   * still inside, so the two never both fire.
+   */
+  function handleDocumentKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') closeAndReturn();
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if (!open) {
+      // The menu-button pattern: either arrow opens the menu, one at the top of
+      // the list and the other at the bottom.
+      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+      event.preventDefault();
+      openMenu(event.key === 'ArrowDown' ? first() : last());
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        active = step(active, 1);
+        break;
+
+      case 'ArrowUp':
+        event.preventDefault();
+        active = step(active, -1);
+        break;
+
+      case 'Home':
+        event.preventDefault();
+        active = first();
+        break;
+
+      case 'End':
+        event.preventDefault();
+        active = last();
+        break;
+
+      case 'Escape':
+        event.preventDefault();
+        // Stopped, or one press closes both this menu and the modal holding it.
+        event.stopPropagation();
+        closeAndReturn();
+        break;
+
+      case 'Tab':
+        // Never preventDefault: Tab is how focus leaves the menu. Focus is
+        // moved to the trigger first and synchronously, so the browser walks on
+        // from there rather than from a row it is about to lose.
+        closeAndReturn();
+        break;
+
+      default:
+        break;
+    }
   }
 
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') open = false;
+  /**
+   * The wrapper's keydown, registered as an action rather than written on the
+   * element.
+   *
+   * The keys have to be taken above the trigger, because the trigger is a
+   * snippet the caller fills and a closed menu is opened from it. Written on
+   * the element, that reads to the compiler as a plain div being made
+   * interactive without a role, which is a defect everywhere except here: the
+   * role that describes this subtree, `menu`, is on the panel inside it, and
+   * the wrapper is not the thing being operated.
+   */
+  function keys(node: HTMLElement): { destroy(): void } {
+    node.addEventListener('keydown', onKeydown);
+    return {
+      destroy() {
+        node.removeEventListener('keydown', onKeydown);
+      },
+    };
   }
 
   $effect(() => {
     if (open) {
       document.addEventListener('click', handleOutsideClick, { capture: true });
-      document.addEventListener('keydown', handleKeydown);
+      document.addEventListener('keydown', handleDocumentKeydown);
     }
     return () => {
       document.removeEventListener('click', handleOutsideClick, { capture: true });
-      document.removeEventListener('keydown', handleKeydown);
+      document.removeEventListener('keydown', handleDocumentKeydown);
     };
   });
+
+  /*
+   * Roving focus, as real focus rather than as aria-activedescendant: the rows
+   * are buttons the user activates with Enter and Space, and a button that is
+   * described as focused without being focused does not take either key.
+   */
+  $effect(() => {
+    if (!open) return;
+    itemNodes()[active]?.focus();
+  });
 </script>
 
-<div bind:this={containerEl} class="relative inline-block {cls}">
+<div bind:this={containerEl} use:keys class="relative inline-block {cls}">
   {@render trigger({ open, toggle })}
 
   {#if open}
     <div
+      bind:this={menuEl}
       role="menu"
-      class="absolute z-50 mt-1 py-1 min-w-36 rounded-xl border border-line
+      class="absolute z-dropdown mt-1 py-1 min-w-36 rounded-xl border border-line
         bg-surface shadow-2xl
-        {align === 'right' ? 'right-0' : 'left-0'}"
+        {align === 'right' ? 'end-0' : 'start-0'}"
     >
-      {#each items as item}
+      {#each items as item, index}
         <button
           type="button"
           role="menuitem"
           disabled={item.disabled}
+          tabindex={index === active ? 0 : -1}
           onclick={() => handleItemClick(item)}
           class="w-full flex items-center gap-2.5 px-3 py-2 text-sm transition-colors duration-150
             disabled:opacity-40 disabled:cursor-not-allowed

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

@@ -1,3 +1,15 @@
+/**
+   * A menu behind a trigger of the caller's own.
+   *
+   * The roles were the whole implementation: `menu` and `menuitem` were stated
+   * and nothing else was. A screen reader takes those roles at their word and
+   * tells the user to arrow through the items, so it announced a keyboard
+   * contract the component did not keep, and the rows were left in the tab
+   * sequence instead. That is worse than a plain list of buttons, which at
+   * least announces what it is. The contract is kept here: focus moves into the
+   * menu when it opens, the arrows and Home and End move it between the items,
+   * and Escape and Tab both close and hand focus back to the trigger.
+   */
 import type { Component, Snippet } from 'svelte';
 interface DropdownItem {
     label: string;

package/dist/components/Field.svelte

@@ -90,7 +90,7 @@
       the controls with nothing ahead of them saying what each one is.
     -->
     <label for={fieldId} class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
-      {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 

package/dist/components/Input.svelte

@@ -54,7 +54,7 @@
 <div class="{FIELD_WRAP} {klass}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
-      {label}{#if required}<span class="text-danger ml-0.5" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 

package/dist/components/Label.svelte

@@ -31,6 +31,6 @@
     <span class="text-danger font-bold leading-none" aria-hidden="true">*</span>
   {/if}
   {#if hint}
-    <span class="text-faint normal-case font-normal ml-0.5">({hint})</span>
+    <span class="text-faint normal-case font-normal ms-0.5">({hint})</span>
   {/if}
 </label>

package/dist/components/Logo.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  /**
+   * The product mark, and the wordmark beside it.
+   *
+   * Two applications each carried their own copy of this lockup and the two had
+   * drifted: different box sizes, different wordmark weights, and one of them
+   * painting the mark from hex behind a prefers-color-scheme query. That query
+   * asks the operating system, while the apps theme off `data-theme` on the
+   * html element, so the two disagreed for anyone who chose a theme their
+   * desktop was not already set to: a light desktop with the app in dark mode
+   * drew a near-black column on a dark surface. There is no media query here
+   * for that reason, and none belongs here.
+   *
+   * The neutral faces come from currentColor and the lit faces from the brand
+   * ramp, so every face answers the same tokens as the rest of the page and a
+   * palette change reaches the mark with everything else.
+   */
+
+  type Size = 'sm' | 'md' | 'lg';
+
+  interface Props {
+    /**
+     * Named rather than a pixel count. The two copies this replaces shipped at
+     * 28px and 36px with different wordmark weights, and a free number is how
+     * the third one drifts too.
+     */
+    size?: Size;
+    /**
+     * False renders the mark alone, for a slot too narrow to carry the name.
+     * The mark is decoration and is hidden from a screen reader either way, so
+     * a link holding only the mark has to carry its own name.
+     */
+    wordmark?: boolean;
+    class?: string;
+  }
+
+  let { size = 'md', wordmark = true, class: klass = '' }: Props = $props();
+
+  /*
+   * The box is a width and a height attribute, not a utility class: the two
+   * dimensions are a runtime value, and a class assembled from one matches no
+   * candidate in Tailwind's scan and silently does nothing.
+   */
+  const marks: Record<Size, number> = { sm: 24, md: 28, lg: 36 };
+  const words: Record<Size, string> = { sm: 'text-sm', md: 'text-base', lg: 'text-xl' };
+
+  const px = $derived(marks[size]);
+</script>
+
+<!-- text-fg is stated here rather than inherited. The mark is usually wrapped
+     in a link that carries no colour of its own, so currentColor would
+     otherwise be whatever that ancestor happened to hold. -->
+<span class="inline-flex items-center gap-2 text-fg {klass}">
+  <span class="inline-flex shrink-0 items-center justify-center">
+    <svg
+      width={px}
+      height={px}
+      viewBox="0 0 72 64"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <g transform="translate(6 4)">
+        <polygon class="fill-current" points="0,14 14,7 14,40 0,47" />
+        <polygon class="fill-current opacity-50" points="0,47 14,40 14,54 0,61" />
+        <polygon class="fill-current opacity-75" points="14,40 28,33 28,47 14,54" />
+        <polygon class="fill-brand-light" points="14,54 28,47 56,33 42,40" />
+        <polygon class="fill-brand-deep" points="42,40 56,33 56,47 42,54" />
+        <polygon class="fill-brand" points="14,54 28,61 42,54 28,47" />
+        <polygon class="fill-brand" points="28,47 42,54 56,47 42,40" />
+      </g>
+    </svg>
+  </span>
+
+  {#if wordmark}
+    <span class="font-semibold tracking-tight {words[size]}">LyEve</span>
+  {/if}
+</span>

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

@@ -0,0 +1,35 @@
+/**
+ * The product mark, and the wordmark beside it.
+ *
+ * Two applications each carried their own copy of this lockup and the two had
+ * drifted: different box sizes, different wordmark weights, and one of them
+ * painting the mark from hex behind a prefers-color-scheme query. That query
+ * asks the operating system, while the apps theme off `data-theme` on the
+ * html element, so the two disagreed for anyone who chose a theme their
+ * desktop was not already set to: a light desktop with the app in dark mode
+ * drew a near-black column on a dark surface. There is no media query here
+ * for that reason, and none belongs here.
+ *
+ * The neutral faces come from currentColor and the lit faces from the brand
+ * ramp, so every face answers the same tokens as the rest of the page and a
+ * palette change reaches the mark with everything else.
+ */
+type Size = 'sm' | 'md' | 'lg';
+interface Props {
+    /**
+     * Named rather than a pixel count. The two copies this replaces shipped at
+     * 28px and 36px with different wordmark weights, and a free number is how
+     * the third one drifts too.
+     */
+    size?: Size;
+    /**
+     * False renders the mark alone, for a slot too narrow to carry the name.
+     * The mark is decoration and is hidden from a screen reader either way, so
+     * a link holding only the mark has to carry its own name.
+     */
+    wordmark?: boolean;
+    class?: string;
+}
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

package/dist/components/Modal.svelte

@@ -51,7 +51,7 @@
 <svelte:window onkeydown={open ? onkeydown : undefined} />
 
 {#if open}
-  <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+  <div class="fixed inset-0 z-modal flex items-center justify-center p-4">
     <button
       type="button"
       tabindex="-1"
@@ -64,7 +64,7 @@
       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]"
+             animate-[modal-in_var(--duration-modal-in)_ease-out]"
       role="dialog"
       aria-modal="true"
       aria-labelledby={title ? headingId : undefined}
@@ -114,16 +114,3 @@
     </div>
   </div>
 {/if}
-
-<style>
-  @keyframes modal-in {
-    from {
-      opacity: 0;
-      transform: translateY(6px) scale(0.98);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-</style>

package/dist/components/MultiSelect.svelte

@@ -154,7 +154,7 @@
 <div class="{FIELD_WRAP} {cls}">
   {#if label}
     <label id="{fieldId}-label" for={fieldId} class={FIELD_LABEL}>
-      {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
@@ -181,7 +181,7 @@
       onkeydown={onTriggerKeydown}
       {...box.triggerAttrs}
       class="flex min-h-control w-full cursor-pointer 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
+        border bg-surface-2 px-2.5 py-1.5 text-start text-sm transition-colors duration-150
         outline-none {disabled ? 'cursor-not-allowed opacity-50' : ''} {controlBorder(!!error)}"
     >
       {#if selected.length === 0}
@@ -199,11 +199,20 @@
                 event.stopPropagation();
                 remove(option.value);
               }}
-              class="transition-colors duration-150 hover:text-brand-light"
+              class="-m-1.5 p-1.5 transition-colors duration-150 hover:text-brand-light"
             >
+              <!--
+                12px inside 6px of padding is a 24px target, which is the floor
+                SC 2.5.8 puts on a control that cannot claim the spacing
+                exception, and this one sits inside the trigger. The padding is
+                taken straight back off as margin, so the chip is laid out
+                exactly as it was and only the reachable area grew. The glyph
+                is the same 12px cross Autocomplete clears its value with; it
+                was drawn a pixel smaller here for no reason anyone recorded.
+              -->
               <svg
-                width="11"
-                height="11"
+                width="12"
+                height="12"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
@@ -217,7 +226,7 @@
           </span>
         {/each}
       {/if}
-      <span class="ml-auto shrink-0 text-faint" aria-hidden="true">
+      <span class="ms-auto shrink-0 text-faint" aria-hidden="true">
         <svg
           width="12"
           height="12"
@@ -306,7 +315,7 @@
                   </svg>
                 {/if}
               </span>
-              <span class="min-w-0 truncate text-left">{option.label}</span>
+              <span class="min-w-0 truncate text-start">{option.label}</span>
             </button>
           {:else}
             <p class={PANEL_EMPTY}>No matches</p>

package/dist/components/NumberInput.svelte

@@ -79,7 +79,7 @@
 <div class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
-      {label}{#if required}<span class="text-danger ml-0.5" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
@@ -89,7 +89,7 @@
       onclick={dec}
       disabled={!canDec}
       aria-label="Decrease"
-      class="{step_} rounded-l-lg border border-r-0"
+      class="{step_} rounded-s-lg border border-e-0"
     >
       <svg
         width="14"
@@ -132,7 +132,7 @@
       onclick={inc}
       disabled={!canInc}
       aria-label="Increase"
-      class="{step_} rounded-r-lg border border-l-0"
+      class="{step_} rounded-e-lg border border-s-0"
     >
       <svg
         width="14"

package/dist/components/PageHeader.svelte

@@ -43,9 +43,31 @@
   <div class="min-w-0">
     <!-- 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. -->
+    <!--
+      The page title is the one place the brand type scale had a component to
+      land on and did not: eighteen type tokens shipped and nothing referenced
+      one of them, while this rendered at 24px, a size the ramp does not
+      contain.
+
+      text-h2 and not text-h1. The brand ramp is a marketing ramp - it runs
+      64 / 44 / 32 / 22 / 16 and holds nothing between 16 and 22, which is
+      where a console's own type lives. A 44px page title over a 14px table on
+      a 390px screen is the ramp applied rather than adopted. 32px is the step
+      the ramp does hold and the step this was already reaching for.
+
+      The weight stays at 700, which is the ramp's H1 weight, because this is
+      still the page's h1. Taking H2's 600 along with its size would move the
+      title twice for one decision.
+
+      Each size token names its own leading and tracking. A `text-*` token
+      built from `--text-*` alone sets font-size and leaves line-height to
+      whatever it inherits, which is not the ratio the ramp specifies.
+    -->
     <h1
       data-testid="page-title"
-      class={compact ? 'text-sm font-semibold text-fg' : 'text-2xl font-bold text-fg'}
+      class={compact
+        ? 'text-sm font-semibold text-fg'
+        : 'text-h2 leading-h2 tracking-h2 font-bold text-fg'}
     >
       {title}
     </h1>