@lyeve-labs/ui-kit 0.36.0 → 0.38.0

package/dist/components/Select.svelte

@@ -53,6 +53,7 @@
     FIELD_WRAP,
     controlBorder,
     describedBy,
+    joinIds,
   } from '../internal/field.js';
   import { createListbox } from '../internal/listbox.svelte.js';
   import {
@@ -75,6 +76,12 @@
     required?: boolean;
     disabled?: boolean;
     error?: string;
+    /**
+     * Ids of other elements that describe the control, separated by spaces,
+     * such as the message a wrapping Field renders. They are read after the
+     * control's own hint or error.
+     */
+    describedBy?: string;
     class?: string;
     /** The rows, as data. */
     options?: SelectOption[];
@@ -102,6 +109,7 @@
     required = false,
     disabled = false,
     error,
+    describedBy: callerIds,
     class: cls = '',
     options = [],
     searchable = false,
@@ -312,7 +320,7 @@
       }}
       aria-invalid={error ? 'true' : undefined}
       aria-required={required ? 'true' : undefined}
-      aria-describedby={describedBy(fieldId, error, hint)}
+      aria-describedby={joinIds(describedBy(fieldId, error, hint), callerIds)}
       {...box.triggerAttrs}
       class="{CONTROL_BASE} {controlBorder(!!error)} flex cursor-pointer items-center gap-2 pe-8
           text-start"

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

@@ -53,6 +53,12 @@ interface Props {
     required?: boolean;
     disabled?: boolean;
     error?: string;
+    /**
+     * Ids of other elements that describe the control, separated by spaces,
+     * such as the message a wrapping Field renders. They are read after the
+     * control's own hint or error.
+     */
+    describedBy?: string;
     class?: string;
     /** The rows, as data. */
     options?: SelectOption[];

package/dist/components/SidebarNav.svelte

@@ -166,7 +166,14 @@
         {@render body(node)}
       </span>
     {:else if node.href && branch}
-      <div class="flex items-center gap-1">
+      <!--
+        The rail stacks the disclosure under the link, under a mouse and under
+        a finger alike, so the link keeps the rail's width. Side by side the two
+        did not fit. Under a finger the pair took 92px and scrolled the nav
+        sideways. Under a mouse the link shrank to its own padding with its icon
+        under the chevron, and a rail with a gutter scrolled as well.
+      -->
+      <div class={collapsed ? 'flex flex-col items-start gap-1' : 'flex items-center gap-1'}>
         <a
           href={node.href}
           aria-current={current ? 'page' : undefined}

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export type { CellFit } from './components/Table.svelte';
 export type { SidebarState } from './components/AppShell.svelte';
 export type { PageWidth, SectionVariant } from './internal/layout.js';
 export type { TreeNode, TriState } from './internal/tree.js';
+export { setDocumentTitleFormat, type DocumentTitleFormat } from './internal/document-title.js';
 export { default as Button } from './components/Button.svelte';
 export { default as ButtonGroup } from './components/ButtonGroup.svelte';
 export { default as Input } from './components/Input.svelte';
@@ -79,10 +80,12 @@ export { default as CheckoutSteps } from './components/CheckoutSteps.svelte';
 export { default as PluginCart } from './components/PluginCart.svelte';
 export type { QuickPick } from './components/PluginCart.svelte';
 export { billedCount, formatCents, ladderRows, ladderState, type BillingPeriod, type CartCatalog, type CartPlugin, type CartQuote, type CartQuoteItem, type DiscountBracket, type LadderState, } from './internal/pricing.js';
+export type { AccentTone, StatusTone } from './internal/tone.js';
 export { default as Stat } from './components/Stat.svelte';
 export { default as Kbd } from './components/Kbd.svelte';
 export { default as CopyButton } from './components/CopyButton.svelte';
 export { default as CopyField } from './components/CopyField.svelte';
+export { CopyState, copyToClipboard, type CopyStatus } from './internal/copy.svelte.js';
 export { default as Avatar } from './components/Avatar.svelte';
 export { default as AvatarGroup } from './components/AvatarGroup.svelte';
 export { default as Logo } from './components/Logo.svelte';
@@ -100,4 +103,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, watchThemePreference, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.36.0";
+export declare const VERSION = "0.38.0";

package/dist/index.js

@@ -22,6 +22,10 @@ export { default as Table } from './components/Table.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as Toolbar } from './components/Toolbar.svelte';
 export { default as TreeView } from './components/TreeView.svelte';
+// Stated once in an app's root layout, the format turns every PageShell's
+// title into the browser tab's. An app that never states one gets no title
+// element from the kit.
+export { setDocumentTitleFormat } from './internal/document-title.js';
 // ── Forms & inputs ─────────────────────────────────────────────────────────
 export { default as Button } from './components/Button.svelte';
 export { default as ButtonGroup } from './components/ButtonGroup.svelte';
@@ -79,6 +83,10 @@ export { default as Stat } from './components/Stat.svelte';
 export { default as Kbd } from './components/Kbd.svelte';
 export { default as CopyButton } from './components/CopyButton.svelte';
 export { default as CopyField } from './components/CopyField.svelte';
+// The clipboard write and the confirmation both copy controls run on, for a
+// control the kit does not ship. A menu item that copies then falls back the
+// same way on an insecure origin and confirms on the same clock.
+export { CopyState, copyToClipboard } from './internal/copy.svelte.js';
 // ── Media ──────────────────────────────────────────────────────────────────
 export { default as Avatar } from './components/Avatar.svelte';
 export { default as AvatarGroup } from './components/AvatarGroup.svelte';
@@ -108,4 +116,4 @@ export * as motion from './motion.js';
 // ── 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.36.0';
+export const VERSION = '0.38.0';

package/dist/internal/copy.svelte.d.ts

@@ -3,7 +3,10 @@
  *
  * Both controls report the same three states on the same clock, so a value
  * copied from a field and one copied from a code block confirm the same way.
+ * The package entry point exports the write and the state too, so a control
+ * the kit does not ship confirms the same way as well.
  */
+/** Where the last copy stands: at rest, confirmed, or refused. */
 export type CopyStatus = 'idle' | 'copied' | 'failed';
 /** How long the confirmation holds before the control returns to rest. */
 export declare const COPY_REVERT_MS = 1500;
@@ -16,9 +19,17 @@ export declare const COPY_FAILED_MESSAGE = "Copy failed";
  * writeText rejects while the document is not focused. Either way the value
  * goes through a selected, off-screen textarea and the legacy copy command,
  * which the browser still honors inside the click. Only when that also
- * refuses is it a failure the control reports. It never throws.
+ * refuses does it resolve to false. It never throws.
+ */
+export declare function copyToClipboard(value: string): Promise<boolean>;
+/**
+ * A copy and its outcome, on the clock CopyButton and CopyField confirm on.
+ *
+ * `status` reads `copied` or `failed` for 1.5 seconds after `copy` and `idle`
+ * otherwise. It is reactive, so markup that reads it follows it. Create one
+ * per control while the component initializes, and call `dispose` when that
+ * component unmounts, so the revert timer cannot fire after it.
  */
-export declare function writeClipboard(value: string): Promise<boolean>;
 export declare class CopyState {
     #private;
     status: CopyStatus;

package/dist/internal/copy.svelte.js

@@ -3,6 +3,8 @@
  *
  * Both controls report the same three states on the same clock, so a value
  * copied from a field and one copied from a code block confirm the same way.
+ * The package entry point exports the write and the state too, so a control
+ * the kit does not ship confirms the same way as well.
  */
 /** How long the confirmation holds before the control returns to rest. */
 export const COPY_REVERT_MS = 1500;
@@ -15,9 +17,9 @@ export const COPY_FAILED_MESSAGE = 'Copy failed';
  * writeText rejects while the document is not focused. Either way the value
  * goes through a selected, off-screen textarea and the legacy copy command,
  * which the browser still honors inside the click. Only when that also
- * refuses is it a failure the control reports. It never throws.
+ * refuses does it resolve to false. It never throws.
  */
-export async function writeClipboard(value) {
+export async function copyToClipboard(value) {
     const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard;
     if (clipboard) {
         try {
@@ -50,6 +52,14 @@ function legacyCopy(value) {
         area.remove();
     }
 }
+/**
+ * A copy and its outcome, on the clock CopyButton and CopyField confirm on.
+ *
+ * `status` reads `copied` or `failed` for 1.5 seconds after `copy` and `idle`
+ * otherwise. It is reactive, so markup that reads it follows it. Create one
+ * per control while the component initializes, and call `dispose` when that
+ * component unmounts, so the revert timer cannot fire after it.
+ */
 export class CopyState {
     status = $state('idle');
     #timer;
@@ -57,7 +67,7 @@ export class CopyState {
         // A second press restarts the window. Without this the first press's timer
         // reverts the second copy part way through its own.
         clearTimeout(this.#timer);
-        this.status = (await writeClipboard(value)) ? 'copied' : 'failed';
+        this.status = (await copyToClipboard(value)) ? 'copied' : 'failed';
         this.#timer = setTimeout(() => (this.status = 'idle'), COPY_REVERT_MS);
     }
     dispose() {

package/dist/internal/document-title.d.ts

@@ -0,0 +1,11 @@
+/** Turns a page's name into the words its browser tab shows. */
+export type DocumentTitleFormat = (title: string) => string;
+/**
+ * States the format every PageShell below the calling component renders its
+ * document title in. Call it while a layout initializes, the way any context
+ * is set. A format that reads reactive state is run again when that state
+ * changes.
+ */
+export declare function setDocumentTitleFormat(format: DocumentTitleFormat): void;
+/** The format a layout above stated, or undefined when none did. */
+export declare function getDocumentTitleFormat(): DocumentTitleFormat | undefined;

package/dist/internal/document-title.js

@@ -0,0 +1,28 @@
+/**
+ * The words a browser tab shows for a page, stated once for a whole app.
+ *
+ * A console rendered its own title element on every page, and each page spelled
+ * the suffix after the page name for itself. PageShell already holds the page's
+ * name, so an app that states the format once in its root layout gets every
+ * PageShell page titled the same way. An app that states none gets no title
+ * from the kit at all, and its pages keep whatever they render themselves.
+ *
+ * Context rather than a module variable: one server process renders pages for
+ * every visitor, and a format that reads the request (a tenant's name, say)
+ * would otherwise leak from one render into the next.
+ */
+import { getContext, setContext } from 'svelte';
+const FORMAT = Symbol('document-title-format');
+/**
+ * States the format every PageShell below the calling component renders its
+ * document title in. Call it while a layout initializes, the way any context
+ * is set. A format that reads reactive state is run again when that state
+ * changes.
+ */
+export function setDocumentTitleFormat(format) {
+    setContext(FORMAT, format);
+}
+/** The format a layout above stated, or undefined when none did. */
+export function getDocumentTitleFormat() {
+    return getContext(FORMAT);
+}

package/dist/internal/field.d.ts

@@ -105,3 +105,11 @@ export declare function segmentedBorder(error: boolean): string;
  * by the wrapper's own rounding.
  */
 export declare const CONTROL_SEGMENT: string;
+/**
+ * Joins a control's own message id with the ids its caller names.
+ *
+ * A control inside a Field, or explained by text elsewhere on the page, has to
+ * point at that text as well as at its own hint or error. Returns undefined
+ * when there is nothing to point at, for the reason describedBy does.
+ */
+export declare function joinIds(...ids: (string | undefined)[]): string | undefined;

package/dist/internal/field.js

@@ -134,3 +134,13 @@ export function segmentedBorder(error) {
 export const CONTROL_SEGMENT = 'shrink-0 rounded-sm border-0 bg-transparent p-0 text-center text-sm text-fg tabular-nums ' +
     'outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand ' +
     'disabled:cursor-not-allowed';
+/**
+ * Joins a control's own message id with the ids its caller names.
+ *
+ * A control inside a Field, or explained by text elsewhere on the page, has to
+ * point at that text as well as at its own hint or error. Returns undefined
+ * when there is nothing to point at, for the reason describedBy does.
+ */
+export function joinIds(...ids) {
+    return ids.filter(Boolean).join(' ') || undefined;
+}

package/package.json

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