@lyeve-labs/ui-kit 0.39.1 → 0.41.0

package/README.md

@@ -28,7 +28,7 @@ No config file, no theme provider, no setup ceremony.
 
 ## What's in the box
 
-- **72 components:** buttons, inputs, modals, drawers, tabs, tables, toasts, the works.
+- **75 components:** buttons, inputs, modals, drawers, tabs, tables, toasts, the works.
 - **Two themes:** Soft Dark (default) and Soft Light, switched by a single `data-theme` attribute on `<html>`.
 - **One CSS file:** `@lyeve-labs/ui-kit/styles.css` declares every token. The rest is just Tailwind.
 - **Svelte 5 native:** built on runes and snippets, fully typed end-to-end.
@@ -37,10 +37,10 @@ No config file, no theme provider, no setup ceremony.
 ## Component list
 
 <details>
-<summary>72 components, organized by purpose</summary>
+<summary>75 components, organized by purpose</summary>
 
 **Layout and structure**
-Card, Panel, AppShell, AuthShell, PageShell, PageHeader, SectionHeading, Divider, Accordion, AccordionItem, Collapsible, Table, DescriptionList, Toolbar, TreeView
+Card, Panel, AppShell, AuthShell, PageShell, PageHeader, SectionHeading, Divider, Accordion, AccordionItem, Collapsible, Table, DescriptionList, Toolbar, TreeView, SplitPane
 
 **Forms and inputs**
 Button, ButtonGroup, Input, PasswordInput, CopyField, Textarea, NumberInput, SearchInput, FileInput, Label, Field, FormMessage, SegmentedControl, FilterChips, Select, MultiSelect, Autocomplete, DatePicker, TimePicker, DateTimePicker, Checkbox, CheckboxGroup, Radio, RadioGroup, Toggle
@@ -55,7 +55,7 @@ Modal, Drawer, Tooltip
 Dialog, DialogContainer, ConfirmDialog (plus the `openDialog` and `confirm` services)
 
 **Feedback and status**
-Alert, Banner, Badge, Tag, Indicator, Progress, Spinner, Skeleton, CheckoutSteps, EmptyState, PluginCart, Stat, Kbd, CopyButton
+Alert, Banner, RefusalNotice, GateNotice, Badge, Tag, Indicator, Progress, Spinner, Skeleton, CheckoutSteps, EmptyState, PluginCart, Stat, Kbd, CopyButton
 
 **Media**
 Avatar, AvatarGroup, Logo
@@ -400,7 +400,7 @@ This repo is a single-purpose component library. Nothing but `src/lib/`.
 ```
 src/
 └── lib/                 # → published as @lyeve-labs/ui-kit
-    ├── components/      # 72 .svelte files
+    ├── components/      # 75 .svelte files
     ├── stores/          # toast.svelte.ts
     ├── styles/          # theme.css (the one stylesheet)
     ├── utils/           # cn.ts, theme.ts

package/dist/components/Field.svelte

@@ -48,8 +48,12 @@
     /**
      * The control is a group, a `SegmentedControl`, `FilterChips` or a row of
      * your own. A label's `for` reaches one form control and never a group, so
-     * the caption is drawn as text with an id instead, and the group takes its
-     * name from it through `labeledBy`.
+     * the caption is drawn as text with an id instead, handed over as
+     * `labeledBy`. A `SegmentedControl` takes its name from it, and draws no
+     * caption of its own once given `labelHidden` as well. `FilterChips` takes
+     * no `labeledBy`. It names its group from its own `label`, so give that
+     * label the caption's words. A row of your own points `aria-labelledby` at
+     * the caption.
      */
     group?: boolean;
     hint?: string;
@@ -98,10 +102,12 @@
 <div data-field class="{FIELD_WRAP} {klass}">
   {#if label}
     <!--
-      A hidden label stays a real label with a real `for`. Swapping it for an
-      aria-label on the control would name the control and drop the name out of
-      the reading order, so a reader moving through a row of them would meet
-      the controls with nothing ahead of them saying what each one is.
+      A hidden label stays in the page: a real label with a real `for`, or for
+      a group a caption with an id that a SegmentedControl or a row of your own
+      points at. Swapping it for an aria-label on the control would name the
+      control and drop the name out of the reading order, so a reader moving
+      through a row of them would meet the controls with nothing ahead of them
+      saying what each one is.
     -->
     {#if group}
       <span id="{fieldId}-label" class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">

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

@@ -36,8 +36,12 @@ interface Props {
     /**
      * The control is a group, a `SegmentedControl`, `FilterChips` or a row of
      * your own. A label's `for` reaches one form control and never a group, so
-     * the caption is drawn as text with an id instead, and the group takes its
-     * name from it through `labeledBy`.
+     * the caption is drawn as text with an id instead, handed over as
+     * `labeledBy`. A `SegmentedControl` takes its name from it, and draws no
+     * caption of its own once given `labelHidden` as well. `FilterChips` takes
+     * no `labeledBy`. It names its group from its own `label`, so give that
+     * label the caption's words. A row of your own points `aria-labelledby` at
+     * the caption.
      */
     group?: boolean;
     hint?: string;

package/dist/components/FileInput.svelte

@@ -6,6 +6,7 @@
     FIELD_WRAP,
     describedBy,
   } from '../internal/field.js';
+  import { describeAccept } from '../internal/accept.js';
   interface Props {
     id?: string;
     name?: string;
@@ -33,6 +34,7 @@
   }: Props = $props();
 
   let dragOver = $state(false);
+  const types = $derived(describeAccept(accept ?? ''));
 
   function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
     onchange?.(e.currentTarget.files);
@@ -93,7 +95,7 @@
     <div class="text-sm">
       <span class="{error ? 'text-danger' : 'text-brand'} font-medium">Click to upload</span>
       <span class="text-muted"> or drag & drop</span>
-      {#if accept}<p class="mt-0.5 text-xs text-faint [overflow-wrap:anywhere]">{accept}</p>{/if}
+      {#if types}<p class="mt-0.5 text-xs text-faint [overflow-wrap:anywhere]">{types}</p>{/if}
     </div>
     <input
       type="file"

package/dist/components/GateNotice.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { RefreshCw } from '@lucide/svelte';
+  import type { Snippet } from 'svelte';
+  import Alert from './Alert.svelte';
+  import Button from './Button.svelte';
+  import type { Gate, GateWords } from '../internal/gate.js';
+
+  /**
+   * What a page shows in place of what a refused or failed read would have
+   * filled, the same way on every page. The page passes the gate it mapped
+   * from the server's answer and every sentence in its own words. Only the
+   * states that waiting can change offer to try again.
+   */
+  interface Props {
+    gate: Gate;
+    words: GateWords;
+    /** Drawn for a feature that is not enabled, given the link forward the gate carried. */
+    locked: Snippet<[forwardHref: string]>;
+    /** The address that asks for this page again, usually its own path and query. */
+    retryHref: string;
+    class?: string;
+  }
+
+  let { gate, words, locked, retryHref, class: klass = '' }: Props = $props();
+</script>
+
+{#snippet retry()}
+  <div class="mt-3">
+    <!-- A plain link works before the page hydrates. After it hydrates, a
+         SvelteKit router keeps the data it holds for an address that did not
+         change, so the link asks for a fresh document instead. Other hosts
+         ignore the attribute. -->
+    <Button variant="secondary" size="sm" href={retryHref} data-sveltekit-reload>
+      <RefreshCw size={14} aria-hidden="true" />
+      {words.retry}
+    </Button>
+  </div>
+{/snippet}
+
+{#if gate.state !== 'ok'}
+  <div class={klass} data-testid="gate-notice" data-state={gate.state}>
+    {#if gate.state === 'absent'}
+      <Alert tone="brand">{words.absent}</Alert>
+    {:else if gate.state === 'locked'}
+      {@render locked(gate.forwardHref)}
+    {:else if gate.state === 'full'}
+      <Alert tone="warn" title={words.full.title}>{words.full.body}</Alert>
+    {:else if gate.state === 'forbidden'}
+      <!-- Trying again cannot change a role, so this one offers nothing to press. -->
+      <Alert tone="warn">{words.forbidden}</Alert>
+    {:else if gate.state === 'busy'}
+      <Alert tone="warn" title={words.busy.title}>
+        <p>{words.busy.body}</p>
+        {@render retry()}
+      </Alert>
+    {:else if gate.state === 'unavailable'}
+      <Alert tone="warn" title={words.unavailable.title}>
+        <p>{words.unavailable.body}</p>
+        {@render retry()}
+      </Alert>
+    {:else if gate.state === 'error'}
+      <Alert tone="danger">
+        <p>{gate.message}</p>
+        {@render retry()}
+      </Alert>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { Gate, GateWords } from '../internal/gate.js';
+/**
+ * What a page shows in place of what a refused or failed read would have
+ * filled, the same way on every page. The page passes the gate it mapped
+ * from the server's answer and every sentence in its own words. Only the
+ * states that waiting can change offer to try again.
+ */
+interface Props {
+    gate: Gate;
+    words: GateWords;
+    /** Drawn for a feature that is not enabled, given the link forward the gate carried. */
+    locked: Snippet<[forwardHref: string]>;
+    /** The address that asks for this page again, usually its own path and query. */
+    retryHref: string;
+    class?: string;
+}
+declare const GateNotice: import("svelte").Component<Props, {}, "">;
+type GateNotice = ReturnType<typeof GateNotice>;
+export default GateNotice;

package/dist/components/Panel.svelte

@@ -14,12 +14,28 @@
    *
    * The heading is a real h2 or h3. A page's outline is what a screen reader
    * navigates by, and a styled div appears in no heading list.
+   *
+   * `tone="danger"` is the surface for destructive actions such as deleting an
+   * account. Alert and Banner are live regions, so a form inside one is read
+   * out on every change, and apps drew this box by hand instead. The tone
+   * colors the heading and its icon, and the box when there is one. With
+   * `variant="plain"` there is no box, so only the heading carries the tone:
+   * the variant decides whether a box is drawn and the tone decides its color,
+   * and neither prop silently undoes the other. That plain form is the danger
+   * group inside a card that already draws the box. The description stays
+   * muted, and the contrast suite measures every text token on the surface.
    */
   import type { Component, Snippet } from 'svelte';
-  import { CARD_PAD, CARD_SURFACE, sectionHeading } from '../internal/layout.js';
+  import {
+    CARD_PAD,
+    CARD_SURFACE,
+    PANEL_DANGER_SURFACE,
+    sectionHeading,
+  } from '../internal/layout.js';
 
   type Pad = 'none' | 'sm' | 'md';
   type Variant = 'bordered' | 'plain';
+  type Tone = 'neutral' | 'danger';
 
   interface Props {
     heading?: string;
@@ -31,6 +47,8 @@
     pad?: Pad;
     /** A quiet variant with no border, for a grouping that needs separation but not a box. */
     variant?: Variant;
+    /** `danger` for a group of destructive actions. It composes with `plain`, see above. */
+    tone?: Tone;
     class?: string;
     actions?: Snippet;
     children: Snippet;
@@ -43,6 +61,7 @@
     icon = undefined,
     pad = 'md',
     variant = 'bordered',
+    tone = 'neutral',
     class: klass = '',
     actions,
     children,
@@ -55,9 +74,9 @@
    * and which of them wins is decided by the order Tailwind emits them and not
    * by the order they were written here.
    */
-  const SURFACE: Record<Variant, string> = {
-    bordered: CARD_SURFACE,
-    plain: '',
+  const SURFACE: Record<Tone, Record<Variant, string>> = {
+    neutral: { bordered: CARD_SURFACE, plain: '' },
+    danger: { bordered: PANEL_DANGER_SURFACE, plain: '' },
   };
 
   /**
@@ -65,14 +84,25 @@
    * padding change. A plain panel usually takes `pad="none"`: with no box to
    * inset from, an inset only pushes its heading out of line with the page.
    */
-  const surface = $derived(`${SURFACE[variant]} ${CARD_PAD[pad]}`.trim());
+  const surface = $derived(`${SURFACE[tone][variant]} ${CARD_PAD[pad]}`.trim());
+
+  /**
+   * The level's treatment with its one text color swapped, not a second color
+   * added after it: two utilities for one property resolve by emit order.
+   */
+  const headingClass = (level: 2 | 3) =>
+    tone === 'danger'
+      ? sectionHeading(level).replace(/\btext-fg\b/, 'text-danger')
+      : sectionHeading(level);
 </script>
 
 <div data-print="keep" class="flex flex-col gap-stack {surface} {klass}">
   {#snippet headingText()}
     {#if icon}
       {@const Icon = icon}
-      <span class="shrink-0 text-muted" aria-hidden="true"><Icon size={16} /></span>
+      <span class="shrink-0 {tone === 'danger' ? 'text-danger' : 'text-muted'}" aria-hidden="true"
+        ><Icon size={16} /></span
+      >
     {/if}
     {heading}
   {/snippet}
@@ -84,9 +114,9 @@
              document structure decision, and both headings this can produce
              should be readable in the file. -->
         {#if heading && headingLevel === 2}
-          <h2 class="{sectionHeading(2)} flex items-center gap-2">{@render headingText()}</h2>
+          <h2 class="{headingClass(2)} flex items-center gap-2">{@render headingText()}</h2>
         {:else if heading}
-          <h3 class="{sectionHeading(3)} flex items-center gap-2">{@render headingText()}</h3>
+          <h3 class="{headingClass(3)} flex items-center gap-2">{@render headingText()}</h3>
         {/if}
         {#if description}<p class="text-sm text-muted">{description}</p>{/if}
       </div>

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

@@ -13,10 +13,21 @@
    *
    * The heading is a real h2 or h3. A page's outline is what a screen reader
    * navigates by, and a styled div appears in no heading list.
+   *
+   * `tone="danger"` is the surface for destructive actions such as deleting an
+   * account. Alert and Banner are live regions, so a form inside one is read
+   * out on every change, and apps drew this box by hand instead. The tone
+   * colors the heading and its icon, and the box when there is one. With
+   * `variant="plain"` there is no box, so only the heading carries the tone:
+   * the variant decides whether a box is drawn and the tone decides its color,
+   * and neither prop silently undoes the other. That plain form is the danger
+   * group inside a card that already draws the box. The description stays
+   * muted, and the contrast suite measures every text token on the surface.
    */
 import type { Component, Snippet } from 'svelte';
 type Pad = 'none' | 'sm' | 'md';
 type Variant = 'bordered' | 'plain';
+type Tone = 'neutral' | 'danger';
 interface Props {
     heading?: string;
     /** 2 directly under a page title, 3 inside a card or another panel. */
@@ -30,6 +41,8 @@ interface Props {
     pad?: Pad;
     /** A quiet variant with no border, for a grouping that needs separation but not a box. */
     variant?: Variant;
+    /** `danger` for a group of destructive actions. It composes with `plain`, see above. */
+    tone?: Tone;
     class?: string;
     actions?: Snippet;
     children: Snippet;

package/dist/components/RefusalNotice.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import Alert from './Alert.svelte';
+  import Button from './Button.svelte';
+  import { isExternalHref } from '../internal/href.js';
+
+  /**
+   * A write the server refused, said the same way on every page: a title, the
+   * sentence that says why, the way forward when there is one, and a link that
+   * is always offered, such as the page where the setting is read. The page
+   * passes every word, so a lifted limit never reads as a stale one here.
+   */
+  interface NoticeLink {
+    href: string;
+    label: string;
+  }
+
+  interface Props {
+    title: string;
+    body: string;
+    /** Where the reader gets past the refusal, when the refusal names a place. */
+    forward?: NoticeLink | null;
+    /** The link offered on every refusal. */
+    link: NoticeLink;
+    /**
+     * True where the way forward is the one action on its surface. A surface
+     * holds one primary, and the notice usually sits in a drawer or a page that
+     * has its own Create or Save, so by default its links stay below that: the
+     * way forward secondary and the other link ghost.
+     */
+    lead?: boolean;
+    class?: string;
+  }
+
+  let { title, body, forward = null, link, lead = false, class: klass = '' }: Props = $props();
+
+  // A link to another origin opens in a tab of its own, so the page it opens
+  // cannot reach back into this one through window.opener.
+  const away = $derived(forward !== null && isExternalHref(forward.href));
+</script>
+
+<div class={klass} data-testid="refusal-notice">
+  <Alert tone="warn" {title}>
+    <p>{body}</p>
+    <div class="mt-3 flex flex-wrap gap-2">
+      {#if forward}
+        <Button
+          variant={lead ? 'primary' : 'secondary'}
+          size="sm"
+          href={forward.href}
+          target={away ? '_blank' : undefined}
+          rel={away ? 'noopener noreferrer' : undefined}
+        >
+          {forward.label}
+        </Button>
+      {/if}
+      <Button variant={forward && !lead ? 'ghost' : 'secondary'} size="sm" href={link.href}>
+        {link.label}
+      </Button>
+    </div>
+  </Alert>
+</div>

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

@@ -0,0 +1,29 @@
+/**
+ * A write the server refused, said the same way on every page: a title, the
+ * sentence that says why, the way forward when there is one, and a link that
+ * is always offered, such as the page where the setting is read. The page
+ * passes every word, so a lifted limit never reads as a stale one here.
+ */
+interface NoticeLink {
+    href: string;
+    label: string;
+}
+interface Props {
+    title: string;
+    body: string;
+    /** Where the reader gets past the refusal, when the refusal names a place. */
+    forward?: NoticeLink | null;
+    /** The link offered on every refusal. */
+    link: NoticeLink;
+    /**
+     * True where the way forward is the one action on its surface. A surface
+     * holds one primary, and the notice usually sits in a drawer or a page that
+     * has its own Create or Save, so by default its links stay below that: the
+     * way forward secondary and the other link ghost.
+     */
+    lead?: boolean;
+    class?: string;
+}
+declare const RefusalNotice: import("svelte").Component<Props, {}, "">;
+type RefusalNotice = ReturnType<typeof RefusalNotice>;
+export default RefusalNotice;

package/dist/components/SegmentedControl.svelte

@@ -30,6 +30,7 @@
     joinIds,
   } from '../internal/field.js';
   import { safeHref } from '../internal/href.js';
+  import type { IconPx } from '../internal/icon.js';
   import { HIT_AREA } from '../internal/touch.js';
 
   type Size = 'sm' | 'md';
@@ -44,7 +45,11 @@
      * is for from the segments alone.
      */
     label: string;
-    /** Drops the caption above the row. The group keeps its accessible name. */
+    /**
+     * Drops the caption above the row. The group keeps its accessible name.
+     * Pass it with `labeledBy`, or the row draws its own caption as well as
+     * the one it is named by.
+     */
     labelHidden?: boolean;
     /**
      * The group's id. The hint and the error take theirs from it. Left unset,
@@ -66,7 +71,8 @@
     describedBy?: string;
     /**
      * The id of a caption drawn outside the row, a `Field` one for instance.
-     * The group takes its name from it in place of `label`.
+     * The group takes its name from it in place of `label`. The row still draws
+     * `label` above itself until `labelHidden` is set too.
      */
     labeledBy?: string;
     /** Submits the value with the surrounding form, through a hidden input. */
@@ -110,7 +116,7 @@
    * short label such as "6h" takes a 44px target across as well, and the hit
    * boxes of two neighbors do not overlap.
    */
-  const SIZES: Record<Size, { row: string; segment: string; icon: number }> = {
+  const SIZES: Record<Size, { row: string; segment: string; icon: IconPx }> = {
     sm: { row: 'h-8 coarse:min-h-control', segment: 'gap-1.5 px-2.5 text-xs', icon: 14 },
     md: { row: 'h-control', segment: 'gap-2 px-3 text-sm', icon: 16 },
   };

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

@@ -30,7 +30,11 @@ declare function $$render<T extends string>(): {
          * is for from the segments alone.
          */
         label: string;
-        /** Drops the caption above the row. The group keeps its accessible name. */
+        /**
+         * Drops the caption above the row. The group keeps its accessible name.
+         * Pass it with `labeledBy`, or the row draws its own caption as well as
+         * the one it is named by.
+         */
         labelHidden?: boolean;
         /**
          * The group's id. The hint and the error take theirs from it. Left unset,
@@ -52,7 +56,8 @@ declare function $$render<T extends string>(): {
         describedBy?: string;
         /**
          * The id of a caption drawn outside the row, a `Field` one for instance.
-         * The group takes its name from it in place of `label`.
+         * The group takes its name from it in place of `label`. The row still draws
+         * `label` above itself until `labelHidden` is set too.
          */
         labeledBy?: string;
         /** Submits the value with the surrounding form, through a hidden input. */