@lyeve-labs/ui-kit 0.22.0 → 0.22.2

package/dist/components/AppShell.svelte

@@ -208,12 +208,14 @@
          to its target and moves focus to it only if the target can hold focus,
          so without this the link moved the page and left focus on the body, and
          the next Tab started again at the top of the document: the sidebar the
-         reader had just skipped. -->
+         reader had just skipped. No outline on it: the region is a landing, not
+         a control, and the browser's default drew a box around the whole page
+         body the moment the link was used. -->
     <main
       id="content"
       tabindex="-1"
       data-print="unclip"
-      class="min-w-0 flex-1 overflow-auto bg-ink"
+      class="min-w-0 flex-1 overflow-auto bg-ink outline-none"
     >
       {@render children()}
     </main>

package/dist/components/PageHeader.svelte

@@ -14,7 +14,7 @@
      * Drop the bottom margin, for a caller that owns the rhythm itself.
      *
      * The margin is opt-out rather than removed. Forty-three pages across the
-     * estate render this component directly and take their heading gap from
+     * consuming applications render this component directly and take their heading gap from
      * it, so deleting it outright would have moved every one of them by 32px
      * with nothing in their own source to explain why.
      */

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

@@ -12,7 +12,7 @@ interface Props {
      * Drop the bottom margin, for a caller that owns the rhythm itself.
      *
      * The margin is opt-out rather than removed. Forty-three pages across the
-     * estate render this component directly and take their heading gap from
+     * consuming applications render this component directly and take their heading gap from
      * it, so deleting it outright would have moved every one of them by 32px
      * with nothing in their own source to explain why.
      */

package/dist/components/Select.svelte

@@ -4,7 +4,7 @@
   /**
    * The event a native select hands its change handler.
    *
-   * Frozen, and it stays frozen. Every call site in the estate passes an
+   * 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

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

@@ -2,7 +2,7 @@ import type { Component } from 'svelte';
 /**
  * The event a native select hands its change handler.
  *
- * Frozen, and it stays frozen. Every call site in the estate passes an
+ * 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

package/dist/components/Table.svelte

@@ -210,7 +210,10 @@
   }
 </script>
 
-<div data-testid="table-frame" class="relative w-full rounded-xl border border-line {cls}">
+<!-- overflow-hidden on the frame, not only on the scroller: the hovered row's
+     ring is square and the frame is not, and the last row's corners drew past
+     the frame's rounded ones. -->
+<div data-testid="table-frame" class="relative w-full overflow-hidden rounded-xl border border-line {cls}">
   <!--
     data-print: the box exists to clip. On paper there is no viewport to clip
     to, and every column past the edge would simply not be printed.

package/dist/components/dialog/ConfirmDialog.svelte

@@ -42,6 +42,9 @@
   let confirmLabel = $derived(
     typeof entry.meta?.confirmLabel === 'string' ? entry.meta.confirmLabel : 'Confirm',
   );
+  // An identifier the message refers to. Set apart in monospace on its own
+  // line rather than inside the sentence, where a UUID wraps mid-string.
+  let detail = $derived(typeof entry.meta?.confirmDetail === 'string' ? entry.meta.confirmDetail : '');
 
   async function handleConfirm() {
     if (loading) return;
@@ -80,12 +83,16 @@
       {#if message}
         <p class="text-sm text-muted mt-1">{message}</p>
       {/if}
+      {#if detail}
+        <p class="mt-2 break-all font-mono text-xs text-faint">{detail}</p>
+      {/if}
     </div>
   </div>
 
-  <!-- Actions -->
+  <!-- Actions. Cancel takes focus first: a destructive dialog must not
+       accept an Enter pressed before it was read. -->
   <div class="flex items-center justify-end gap-3 pt-2">
-    <Button variant="secondary" size="sm" onclick={handleCancel}>
+    <Button variant="secondary" size="sm" onclick={handleCancel} data-initial-focus>
       {cancelLabel}
     </Button>
     <Button variant="danger" size="sm" onclick={handleConfirm} {loading}>

package/dist/components/dialog/Dialog.svelte

@@ -137,34 +137,39 @@
     tabindex="-1"
     onkeydown={handleKeydown}
   >
-    <!-- Header -->
-    <div class="flex items-center justify-between px-6 pt-6 pb-2">
-      <div class="flex-1 min-w-0">
-        {#if entry.options.title && entry.meta?.confirmTitle === undefined}
-          {#if typeof entry.options.title === 'string'}
-            <h2 class="text-lg font-semibold text-fg truncate">
-              {entry.options.title}
-            </h2>
-          {:else}
-            {@render entry.options.title()}
+    <!-- Header. A confirm dialog has none: it renders its own title beside
+         the warning icon and offers Cancel, so a header here was an empty row
+         with a close control in it, and that control was the first thing
+         focused. Escape still dismisses. -->
+    {#if entry.meta?.confirmTitle === undefined}
+      <div class="flex items-center justify-between px-6 pt-6 pb-2">
+        <div class="flex-1 min-w-0">
+          {#if entry.options.title}
+            {#if typeof entry.options.title === 'string'}
+              <h2 class="text-lg font-semibold text-fg truncate">
+                {entry.options.title}
+              </h2>
+            {:else}
+              {@render entry.options.title()}
+            {/if}
           {/if}
-        {/if}
-      </div>
+        </div>
 
-      {#if !entry.options.persistent}
-        <button
-          class="inline-flex items-center justify-center w-8 h-8 -me-2 rounded-lg
+        {#if !entry.options.persistent}
+          <button
+            class="inline-flex items-center justify-center w-8 h-8 -me-2 rounded-lg
 						text-muted hover:text-fg hover:bg-surface-2 transition-colors duration-150 shrink-0"
-          onclick={() => handleClose()}
-          aria-label="Close"
-        >
-          <X class="w-4 h-4" />
-        </button>
-      {/if}
-    </div>
+            onclick={() => handleClose()}
+            aria-label="Close"
+          >
+            <X class="w-4 h-4" />
+          </button>
+        {/if}
+      </div>
+    {/if}
 
     <!-- Body -->
-    <div class="px-6 py-2">
+    <div class={entry.meta?.confirmTitle === undefined ? 'px-6 py-2' : 'px-6 pt-6 pb-2'}>
       {#if entry.options.body}
         {@render entry.options.body()}
       {:else if entry.meta?.confirmTitle !== undefined}

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

@@ -55,6 +55,12 @@ export interface ConfirmOptions {
     confirmLabel?: string;
     /** The verb on the dismissing button. Defaults to `Cancel`. */
     cancelLabel?: string;
+    /**
+     * An identifier the message refers to, such as the id of the record about
+     * to be deleted. Rendered on its own line in monospace, so a UUID never
+     * wraps inside the sentence.
+     */
+    detail?: string;
 }
 /**
  * Convenience: confirm dialog.

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

@@ -151,6 +151,7 @@ export function confirm(title, message, options) {
         // would be indistinguishable from an override to the empty case.
         ...(options?.confirmLabel !== undefined ? { confirmLabel: options.confirmLabel } : {}),
         ...(options?.cancelLabel !== undefined ? { cancelLabel: options.cancelLabel } : {}),
+        ...(options?.detail !== undefined ? { confirmDetail: options.detail } : {}),
     });
     // Cancelling a dialog dismisses it, and dismissal rejects. Callers write
     // `if (await confirm(...))`, so a rejection on Cancel is an unhandled

package/dist/index.d.ts

@@ -89,4 +89,4 @@ export type { ConfirmOptions } from './components/dialog/dialog-manager.svelte.j
 export type { DialogOptions, DialogEntry, DialogSize } from './components/dialog/types.js';
 export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
-export declare const VERSION = "0.22.0";
+export declare const VERSION = "0.22.2";

package/dist/index.js

@@ -96,4 +96,4 @@ export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setThe
 // ── 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.22.0';
+export const VERSION = '0.22.2';

package/dist/internal/overlay.js

@@ -50,9 +50,13 @@ function focusable(node) {
 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];
+    // A panel may name where focus lands with data-initial-focus: a confirm
+    // dialog puts it on Cancel, so that Enter on a dialog a person has not read
+    // yet does nothing, and the close control is never the first thing focused.
+    // Otherwise the first focusable element takes it. 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 = node.querySelector('[data-initial-focus]') ?? focusable(node)[0];
     if (first) {
         first.focus();
     }

package/dist/internal/panel.d.ts

@@ -39,8 +39,12 @@
  * border-line-strong, not border-line: a panel floating over arbitrary content
  * needs a boundary that clears 3:1, which line does not. It carries the
  * resting text colour so a row can override it with a single utility.
+ *
+ * overflow-hidden, because the rows are square and the panel is not: the
+ * active ring on the first or last row drew its corners past the panel's
+ * rounded ones, a box poking out of the box that holds it.
  */
-export declare const PANEL_SURFACE = "absolute z-dropdown mt-1 rounded-xl border border-line-strong bg-surface text-fg shadow-2xl";
+export declare const PANEL_SURFACE = "absolute z-dropdown mt-1 overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-2xl";
 /**
  * The scrolling region inside it.
  *

package/dist/internal/panel.js

@@ -39,8 +39,12 @@
  * border-line-strong, not border-line: a panel floating over arbitrary content
  * needs a boundary that clears 3:1, which line does not. It carries the
  * resting text colour so a row can override it with a single utility.
+ *
+ * overflow-hidden, because the rows are square and the panel is not: the
+ * active ring on the first or last row drew its corners past the panel's
+ * rounded ones, a box poking out of the box that holds it.
  */
-export const PANEL_SURFACE = 'absolute z-dropdown mt-1 rounded-xl border border-line-strong bg-surface text-fg shadow-2xl';
+export const PANEL_SURFACE = 'absolute z-dropdown mt-1 overflow-hidden rounded-xl border border-line-strong bg-surface text-fg shadow-2xl';
 /**
  * The scrolling region inside it.
  *

package/dist/styles/theme.css

@@ -409,7 +409,7 @@ html[data-theme='light'] {
 /*
  * Print.
  *
- * The estate had no `@media print` rule anywhere, and three surfaces print:
+ * The consuming applications had no `@media print` rule anywhere, and three surfaces print:
  * the portal prints an invoice, the ops console prints an audit log, the admin
  * prints a subject-access export. All three printed the sidebar, the theme
  * toggle and the nav, in a dark palette, and all three printed one screenful

package/dist/utils/theme.js

@@ -22,7 +22,7 @@
  * helper here understands.
  */
 /**
- * The one key every surface in the estate reads and writes.
+ * The one key every surface of every consuming application reads and writes.
  *
  * Not exported. A surface that needs the name has `getThemePreference` and
  * `setThemePreference`; a surface that spells the key itself is how two of

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",
@@ -24,7 +24,7 @@
   "type": "module",
   "sideEffects": false,
   "engines": {
-    "node": ">=20"
+    "node": ">=24"
   },
   "files": [
     "dist",

package/src/lib/styles/theme.css

@@ -409,7 +409,7 @@ html[data-theme='light'] {
 /*
  * Print.
  *
- * The estate had no `@media print` rule anywhere, and three surfaces print:
+ * The consuming applications had no `@media print` rule anywhere, and three surfaces print:
  * the portal prints an invoice, the ops console prints an audit log, the admin
  * prints a subject-access export. All three printed the sidebar, the theme
  * toggle and the nav, in a dark palette, and all three printed one screenful