@lyeve-labs/ui-kit 0.39.0 → 0.40.0

package/dist/components/Field.svelte

@@ -25,7 +25,7 @@
      * The id of the caption, for a group's `aria-labelledby`. Set only when
      * the field is a `group` with a label.
      */
-    labelledBy: string | undefined;
+    labeledBy: string | undefined;
   }
 </script>
 
@@ -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 `labelledBy`.
+     * 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;
@@ -91,17 +95,19 @@
     id: fieldId,
     describedBy: describedBy(fieldId, error, hint),
     invalid: !!error,
-    labelledBy: group && label ? `${fieldId}-label` : undefined,
+    labeledBy: group && label ? `${fieldId}-label` : undefined,
   });
 </script>
 
 <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

@@ -24,7 +24,7 @@ export interface FieldWiring {
      * The id of the caption, for a group's `aria-labelledby`. Set only when
      * the field is a `group` with a label.
      */
-    labelledBy: string | undefined;
+    labeledBy: string | undefined;
 }
 import type { Snippet } from 'svelte';
 interface Props {
@@ -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 `labelledBy`.
+     * 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/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/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,9 +71,10 @@
     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.
      */
-    labelledBy?: string;
+    labeledBy?: string;
     /** Submits the value with the surrounding form, through a hidden input. */
     name?: string;
     size?: Size;
@@ -87,7 +93,7 @@
     hint = undefined,
     error = undefined,
     describedBy: callerIds = undefined,
-    labelledBy = undefined,
+    labeledBy = undefined,
     name = undefined,
     size = 'md',
     disabled = false,
@@ -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 },
   };
@@ -252,8 +258,8 @@
     bind:this={rootEl}
     {id}
     role={linked ? 'group' : 'radiogroup'}
-    aria-label={labelledBy ? undefined : label}
-    aria-labelledby={labelledBy}
+    aria-label={labeledBy ? undefined : label}
+    aria-labelledby={labeledBy}
     aria-invalid={error && !linked ? 'true' : undefined}
     aria-describedby={describedByIds}
     onfocusout={linked ? onGroupFocusOut : undefined}

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,9 +56,10 @@ 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.
          */
-        labelledBy?: string;
+        labeledBy?: string;
         /** Submits the value with the surrounding form, through a hidden input. */
         name?: string;
         size?: "sm" | "md";

package/dist/index.d.ts

@@ -103,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.39.0";
+export declare const VERSION = "0.40.0";

package/dist/index.js

@@ -116,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.39.0';
+export const VERSION = '0.40.0';

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/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.0",
+  "version": "0.40.0",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",

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;
+    }
   }
 }