@lyeve-labs/ui-kit 0.39.1 → 0.41.0

package/dist/internal/aside.js

@@ -0,0 +1,61 @@
+/**
+ * What a split pane remembers per viewer: its width and whether the width is
+ * locked. Browser storage can be absent or throw (a private window, cleared or
+ * blocked site data, a thumbnail capture), so every read and write is guarded
+ * and the pane falls back to its default. A convenience, not state a server
+ * holds.
+ *
+ * The stored value is `{"width": <px>, "locked": <bool>}` under the key the
+ * consumer names, so a reader keeps the width an earlier copy of this pane
+ * wrote under the same key.
+ *
+ * Not exported from the package entry point: this is an implementation detail.
+ */
+/**
+ * The page's local storage, or nothing. Reading the global can itself throw
+ * when site data is blocked. Outside a browser it is never read: a server
+ * runtime may define a localStorage of its own, warning on first access or
+ * holding one store that every request would share.
+ */
+export function viewerStorage() {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        return typeof localStorage === 'undefined' ? null : localStorage;
+    }
+    catch {
+        return null;
+    }
+}
+export function clampWidth(bounds, width) {
+    return Math.round(Math.min(bounds.max, Math.max(bounds.min, width)));
+}
+export function readAside(storage, key, bounds) {
+    const fallback = { width: bounds.width, locked: false };
+    try {
+        const raw = storage?.getItem(key);
+        if (!raw)
+            return fallback;
+        const parsed = JSON.parse(raw);
+        if (typeof parsed !== 'object' || parsed === null)
+            return fallback;
+        const { width, locked } = parsed;
+        return {
+            width: typeof width === 'number' && Number.isFinite(width)
+                ? clampWidth(bounds, width)
+                : fallback.width,
+            locked: locked === true,
+        };
+    }
+    catch {
+        return fallback;
+    }
+}
+export function writeAside(storage, key, bounds, prefs) {
+    try {
+        storage?.setItem(key, JSON.stringify({ width: clampWidth(bounds, prefs.width), locked: prefs.locked }));
+    }
+    catch {
+        // Storage refused: the width lasts the page and nothing else.
+    }
+}

package/dist/internal/choice.d.ts

@@ -14,6 +14,7 @@
  *
  * Not exported from the package entry point: this is an implementation detail.
  */
+import type { IconPx } from './icon.js';
 /** The scale of the painted box: sm 14px, md 16px, lg 20px. */
 export type ChoiceSize = 'sm' | 'md' | 'lg';
 /** Inline is a box beside a label. Card is a bordered option surface. */
@@ -100,9 +101,10 @@ export declare function choiceIcon(size: ChoiceSize): string;
  *
  * A lucide icon takes a number, not a class, so the slot above cannot size it.
  * These are the same 14, 16 and 20 the slot reserves. An icon rendered at any
- * other size overflows the slot or floats inside it.
+ * other size overflows the slot or floats inside it. Each is a rung of the
+ * icon ladder, which the type holds.
  */
-export declare const CHOICE_ICON_PX: Record<ChoiceSize, number>;
+export declare const CHOICE_ICON_PX: Record<ChoiceSize, IconPx>;
 /**
  * The fieldset a group renders, so the set is announced as a group rather than
  * as loose controls.

package/dist/internal/choice.js

@@ -142,7 +142,8 @@ export function choiceIcon(size) {
  *
  * A lucide icon takes a number, not a class, so the slot above cannot size it.
  * These are the same 14, 16 and 20 the slot reserves. An icon rendered at any
- * other size overflows the slot or floats inside it.
+ * other size overflows the slot or floats inside it. Each is a rung of the
+ * icon ladder, which the type holds.
  */
 export const CHOICE_ICON_PX = {
     sm: 14,

package/dist/internal/gate.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Why a read a page needed did not fill it, as the page learned it from the
+ * server's answer. A page never decides how a feature is enabled, which role a
+ * route needs or whether the database is up. It maps the answer to one of
+ * these states and hands it to GateNotice with its own words.
+ */
+export type Gate = {
+    state: 'ok';
+}
+/** The route is not there. */
+ | {
+    state: 'absent';
+}
+/** Not enabled here. The link forward is where it is turned on, when the server names one. */
+ | {
+    state: 'locked';
+    forwardHref: string;
+}
+/**
+ * At a capacity ceiling: as many are in use as the server allows, so it
+ * refuses one more. The notice draws the page's words for it and offers no
+ * link, since only the page knows a way past the ceiling. The numbers are
+ * there for the page to put into those words, and either is null when the
+ * server did not send it.
+ */
+ | {
+    state: 'full';
+    limit: number | null;
+    current: number | null;
+}
+/** The reader's role may not read it, which no retry changes. */
+ | {
+    state: 'forbidden';
+}
+/** Refused for the request rate. The same read succeeds once the window passes. */
+ | {
+    state: 'busy';
+}
+/** The server or its database did not answer. The same read may answer in a moment. */
+ | {
+    state: 'unavailable';
+}
+/** The read failed. The message says so in words that never read as an empty result. */
+ | {
+    state: 'error';
+    message: string;
+};
+/** A heading and the sentence under it. */
+export interface GateText {
+    title: string;
+    body: string;
+}
+/**
+ * Every sentence a GateNotice can draw, in the page's own words. The kit holds
+ * none of them, so each console says a refusal its own way and in its own
+ * language.
+ */
+export interface GateWords {
+    /** What a missing route means for this page. */
+    absent: string;
+    /** A capacity ceiling, with the numbers the gate carried already in the body. */
+    full: GateText;
+    /** A role that may not read it, and who to ask. */
+    forbidden: string;
+    /** A refusal for the request rate. */
+    busy: GateText;
+    /** A server or database that did not answer. */
+    unavailable: GateText;
+    /** The label of the link that asks for the page again. */
+    retry: string;
+}

package/dist/internal/gate.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/href.d.ts

@@ -11,3 +11,11 @@
  */
 /** The href as given, or nothing when its scheme is one no component will emit. */
 export declare function safeHref(href: string | undefined | null): string | undefined;
+/**
+ * Whether an href leaves the page's own origin: an absolute URL with a scheme
+ * and a host, or a protocol-relative one, whose origin is not the page's. A
+ * link that leaves opens in a tab of its own, so the page it opens cannot
+ * reach back through window.opener. A server render has no location to
+ * compare with, so there every absolute URL counts as leaving.
+ */
+export declare function isExternalHref(href: string): boolean;

package/dist/internal/href.js

@@ -25,3 +25,21 @@ export function safeHref(href) {
         return undefined;
     return DENIED.test(href.replace(IGNORED, '')) ? undefined : href;
 }
+/**
+ * Whether an href leaves the page's own origin: an absolute URL with a scheme
+ * and a host, or a protocol-relative one, whose origin is not the page's. A
+ * link that leaves opens in a tab of its own, so the page it opens cannot
+ * reach back through window.opener. A server render has no location to
+ * compare with, so there every absolute URL counts as leaving.
+ */
+export function isExternalHref(href) {
+    const absolute = /^[a-z][a-z0-9+.-]*:\/\//i.test(href) || href.startsWith('//');
+    if (!absolute || typeof location === 'undefined')
+        return absolute;
+    try {
+        return new URL(href, location.href).origin !== location.origin;
+    }
+    catch {
+        return true;
+    }
+}

package/dist/internal/icon.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The five sizes an icon may take. Each console names the same ladder in its
+ * own icon.ts, and the consistency suite holds every literal size in the kit
+ * to this list.
+ */
+export declare const ICON_LADDER: readonly [12, 14, 16, 20, 40];
+/**
+ * A rung of the icon ladder. A size a component looks up in a table is typed
+ * with it, so an entry off the ladder fails the type check where the suite
+ * cannot read a number held in a variable.
+ */
+export type IconPx = (typeof ICON_LADDER)[number];

package/dist/internal/icon.js

@@ -0,0 +1,6 @@
+/**
+ * The five sizes an icon may take. Each console names the same ladder in its
+ * own icon.ts, and the consistency suite holds every literal size in the kit
+ * to this list.
+ */
+export const ICON_LADDER = [12, 14, 16, 20, 40];

package/dist/internal/layout.d.ts

@@ -93,6 +93,15 @@ export declare const PAGE_STACK = "flex flex-col gap-section";
  * crops the ring of every button inside it down to whichever edge fits.
  */
 export declare const CARD_SURFACE = "bg-surface border border-line rounded-xl";
+/**
+ * The card surface in the danger tone, for a group of destructive actions.
+ *
+ * The fill is danger mixed into surface rather than a translucent tint, so it
+ * is opaque and paints the same on the page ground and inside a card. Five
+ * percent keeps the controls of a form inside it on a ground they were drawn
+ * for. The contrast suite reads the share from this string.
+ */
+export declare const PANEL_DANGER_SURFACE = "bg-[color-mix(in_srgb,var(--color-danger)_5%,var(--color-surface))] border border-danger/40 rounded-xl";
 /**
  * Card padding by name.
  *

package/dist/internal/layout.js

@@ -104,6 +104,15 @@ export const PAGE_STACK = 'flex flex-col gap-section';
  * crops the ring of every button inside it down to whichever edge fits.
  */
 export const CARD_SURFACE = 'bg-surface border border-line rounded-xl';
+/**
+ * The card surface in the danger tone, for a group of destructive actions.
+ *
+ * The fill is danger mixed into surface rather than a translucent tint, so it
+ * is opaque and paints the same on the page ground and inside a card. Five
+ * percent keeps the controls of a form inside it on a ground they were drawn
+ * for. The contrast suite reads the share from this string.
+ */
+export const PANEL_DANGER_SURFACE = 'bg-[color-mix(in_srgb,var(--color-danger)_5%,var(--color-surface))] border border-danger/40 rounded-xl';
 /**
  * Card padding by name.
  *

package/dist/styles/theme.css

@@ -524,6 +524,12 @@ html[data-theme='light'] {
    *
    * Durations are not zeroed. An animation that finishes in 1ms still fires its
    * animationend, so components that wait on one keep working.
+   *
+   * The View Transitions API animates pseudo-elements on the root, and `*`
+   * matches none of them, so a page transition still cross-faded. They take a
+   * rule of their own because a browser that does not know a pseudo-element
+   * drops the whole rule it appears in, and the element rule has to survive
+   * there.
    */
   @media (prefers-reduced-motion: reduce) {
     *,
@@ -534,6 +540,14 @@ html[data-theme='light'] {
       transition-duration: 1ms !important;
       scroll-behavior: auto !important;
     }
+
+    ::view-transition-group(*),
+    ::view-transition-image-pair(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+      animation-duration: 1ms !important;
+      animation-iteration-count: 1 !important;
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.39.1",
+  "version": "0.41.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",
@@ -22,7 +22,9 @@
     "lyeve"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "engines": {
     "node": ">=24"
   },
@@ -52,7 +54,9 @@
     "access": "public"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.1",
     "@lucide/svelte": "^0.511.0",
+    "@playwright/experimental-ct-svelte": "1.58.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^4.0.4",
     "@testing-library/svelte": "^5.3.1",

package/src/lib/styles/theme.css

@@ -524,6 +524,12 @@ html[data-theme='light'] {
    *
    * Durations are not zeroed. An animation that finishes in 1ms still fires its
    * animationend, so components that wait on one keep working.
+   *
+   * The View Transitions API animates pseudo-elements on the root, and `*`
+   * matches none of them, so a page transition still cross-faded. They take a
+   * rule of their own because a browser that does not know a pseudo-element
+   * drops the whole rule it appears in, and the element rule has to survive
+   * there.
    */
   @media (prefers-reduced-motion: reduce) {
     *,
@@ -534,6 +540,14 @@ html[data-theme='light'] {
       transition-duration: 1ms !important;
       scroll-behavior: auto !important;
     }
+
+    ::view-transition-group(*),
+    ::view-transition-image-pair(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+      animation-duration: 1ms !important;
+      animation-iteration-count: 1 !important;
+    }
   }
 }