@lyeve-labs/ui-kit 0.18.0 → 0.20.0

package/README.md

@@ -7,7 +7,7 @@ A clean, accessible Svelte 5 component library. The design system behind [LyEve]
 [![Tailwind CSS 4](https://img.shields.io/badge/tailwind-v4-38bdf8.svg)](https://tailwindcss.com)
 
 ```bash
-pnpm add @lyeve-labs/ui-kit
+pnpm add @lyeve-labs/ui-kit @lucide/svelte
 ```
 
 ```svelte
@@ -69,16 +69,23 @@ ThemeToggle, Toaster (plus the `toast` service)
 
 - **Svelte 5.0** or newer
 - **Tailwind CSS v4** with the `@tailwindcss/vite` plugin
+- **`@lucide/svelte`** 0.511 or newer, below 2.0
 - **Node 20** or newer
 
 ## Install
 
 ```bash
-pnpm add @lyeve-labs/ui-kit
-# or npm install @lyeve-labs/ui-kit
-# or yarn add @lyeve-labs/ui-kit
+pnpm add @lyeve-labs/ui-kit @lucide/svelte
+# or npm install @lyeve-labs/ui-kit @lucide/svelte
+# or yarn add @lyeve-labs/ui-kit @lucide/svelte
 ```
 
+The icon set is a peer dependency, so it installs once and the application
+picks the version. Most applications already depend on it directly, and while
+the kit owned a copy of its own they resolved two: the same icons shipped twice
+in the bundle and an upgrade on the application's side moved only one of them.
+A missing peer is resolved for you by pnpm and by npm, and not by yarn.
+
 If you don't have Tailwind v4 yet:
 
 ```bash

package/dist/components/AccordionItem.svelte

@@ -33,7 +33,7 @@
       onclick={() => ctx?.toggle(id)}
       aria-expanded={open}
       aria-controls={panelId}
-      class="flex w-full items-center justify-between px-5 py-4 text-left text-sm font-medium
+      class="flex w-full items-center justify-between px-5 py-4 text-start text-sm font-medium
         text-fg transition-colors duration-150 hover:bg-surface-2/50
         outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand
         {open ? 'bg-surface-2/40' : ''}"

package/dist/components/AppShell.svelte

@@ -116,7 +116,7 @@
   <a
     href="#content"
     data-print="hide"
-    class="sr-only focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:z-skip-link focus:rounded-lg focus:bg-surface focus:px-3 focus:py-2 focus:text-sm focus:text-fg focus:outline-none focus:ring-2 focus:ring-brand"
+    class="sr-only focus:not-sr-only focus:fixed focus:start-3 focus:top-3 focus:z-skip-link focus:rounded-lg focus:bg-surface focus:px-3 focus:py-2 focus:text-sm focus:text-fg focus:outline-none focus:ring-2 focus:ring-brand"
   >
     Skip to content
   </a>
@@ -171,7 +171,7 @@
                still lines up with the page content below. -->
           <button
             type="button"
-            class="-ms-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted outline-none transition-colors duration-150 hover:bg-surface-2 hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+            class="-ms-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted outline-none transition-colors duration-150 hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
             aria-label={navOpen ? 'Close navigation' : 'Open navigation'}
             aria-expanded={navOpen}
             onclick={() => (navOpen = !navOpen)}
@@ -184,7 +184,7 @@
           <button
             type="button"
             data-testid="app-sidebar-toggle"
-            class="-ms-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted outline-none transition-colors duration-150 hover:bg-surface-2 hover:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
+            class="-ms-2 flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-muted outline-none transition-colors duration-150 hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand"
             aria-label={collapsed ? 'Show sidebar' : 'Hide sidebar'}
             aria-expanded={!collapsed}
             onclick={() => (collapsed = !collapsed)}

package/dist/components/Autocomplete.svelte

@@ -169,7 +169,7 @@
 <div class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
-      {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
@@ -193,7 +193,7 @@
       aria-invalid={error ? 'true' : undefined}
       aria-describedby={describedBy(fieldId, error, hint)}
       {...box.triggerAttrs}
-      class="{CONTROL_BASE} {controlBorder(!!error)} {allowClear && value ? 'pr-8' : 'pr-3'}"
+      class="{CONTROL_BASE} {controlBorder(!!error)} {allowClear && value ? 'pe-8' : 'pe-3'}"
     />
 
     {#if allowClear && value && !disabled}
@@ -210,7 +210,7 @@
         type="button"
         aria-label="Clear"
         onclick={clear}
-        class="absolute right-2.5 top-1/2 -mx-1.5 -translate-y-1/2 p-1.5 text-faint transition-colors duration-150 hover:text-fg"
+        class="absolute end-2.5 top-1/2 -mx-1.5 -translate-y-1/2 p-1.5 text-faint transition-colors duration-150 hover:text-fg"
       >
         <svg
           width="12"
@@ -264,7 +264,7 @@
                   height="10"
                   viewBox="0 0 12 10"
                   fill="none"
-                  class="ml-auto shrink-0"
+                  class="ms-auto shrink-0"
                   aria-hidden="true"
                 >
                   <path

package/dist/components/AvatarGroup.svelte

@@ -30,14 +30,14 @@
 
 <div class="flex items-center {cls}">
   {#each visible as user}
-    <span class="-ml-1.5 inline-block rounded-full ring-2 ring-ink first:ml-0">
+    <span class="-ms-1.5 inline-block rounded-full ring-2 ring-ink first:ms-0">
       <Avatar name={user.name} src={user.src} {size} />
     </span>
   {/each}
 
   {#if overflow > 0}
     <span
-      class="-ml-1.5 inline-flex shrink-0 items-center justify-center rounded-full
+      class="-ms-1.5 inline-flex shrink-0 items-center justify-center rounded-full
         bg-surface-2 font-semibold text-faint ring-2 ring-ink
         {overflowSizes[size]}">+{overflow}</span
     >

package/dist/components/Breadcrumb.svelte

@@ -24,7 +24,7 @@
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        class="text-faint shrink-0"
+        class="text-faint shrink-0 rtl:rotate-180"
         aria-hidden="true"
       >
         <path d="M9 18l6-6-6-6" />

package/dist/components/Button.svelte

@@ -2,6 +2,7 @@
   import type { Snippet } from 'svelte';
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
   import Spinner from './Spinner.svelte';
+  import { safeHref } from '../internal/href.js';
 
   type Variant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'violet';
   type Size = 'sm' | 'md' | 'lg';
@@ -43,14 +44,36 @@
     ...rest
   }: Props = $props();
 
+  /**
+   * Colour per variant, in three states: at rest, under a pointer, and held.
+   *
+   * The pressed step is the one a touch screen depends on. `hover:` compiles
+   * inside `@media (hover: hover)`, which is false on a finger, so a tap ran
+   * rest to rest with the action already fired and the control never
+   * acknowledged the press. `active:` matches under a finger as well as under a
+   * mouse, and Tailwind emits it after `hover:` at equal specificity, so the
+   * held colour wins on a device that has both.
+   *
+   * primary and violet had a pressed state already and neither one showed:
+   * `active:bg-brand` on a `bg-brand` button and `active:brightness-100` on an
+   * unfiltered one are both the resting appearance spelled twice.
+   *
+   * Every pressed step moves the same way in both palettes. brand-deep sits
+   * below brand-light on the dark ramp and below it again on the light one, and
+   * the filtered variants darken rather than brighten, so a press does not read
+   * as one gesture in one theme and its opposite in the other.
+   */
   const variants: Record<Variant, string> = {
-    primary: 'bg-brand text-ink hover:bg-brand-light active:bg-brand shadow-sm shadow-brand/20',
+    primary:
+      'bg-brand text-ink hover:bg-brand-light active:bg-brand-deep shadow-sm shadow-brand/20',
     violet:
-      'bg-violet text-ink hover:brightness-110 active:brightness-100 shadow-sm shadow-violet/20',
-    secondary: 'bg-surface-2 text-fg border border-line-strong hover:bg-line',
-    danger: 'bg-danger text-ink hover:brightness-110 active:brightness-100',
-    ghost: 'text-muted hover:bg-surface-2 hover:text-fg',
-    outline: 'border border-line-strong text-fg hover:border-brand hover:text-brand',
+      'bg-violet text-ink hover:brightness-110 active:brightness-90 shadow-sm shadow-violet/20',
+    secondary:
+      'bg-surface-2 text-fg border border-line-strong hover:bg-line active:bg-line-strong/30',
+    danger: 'bg-danger text-ink hover:brightness-110 active:brightness-90',
+    ghost: 'text-muted hover:bg-surface-2 hover:text-fg active:bg-line active:text-fg',
+    outline:
+      'border border-line-strong text-fg hover:border-brand hover:text-brand active:bg-brand/10',
   };
 
   const sizes: Record<Size, string> = {
@@ -66,8 +89,10 @@
       `${full ? 'w-full' : ''} ${variants[variant]} ${sizes[size]} ${klass}`,
   );
 
-  // Reject javascript: and data: URIs - only allow standard schemes and relative URLs.
-  let safeHref = $derived(href && !/^(javascript|data):/i.test(href) ? href : undefined);
+  // Only standard schemes and relative URLs reach the DOM. The rule itself
+  // lives in internal/href.ts, because Pagination applies the same one to the
+  // hrefs its caller builds and two copies of it would drift.
+  let resolvedHref = $derived(safeHref(href));
 
   /**
    * An anchor has no `disabled`. The prop was accepted and then dropped on this
@@ -81,7 +106,7 @@
 
 {#if href}
   <a
-    href={inert ? undefined : safeHref}
+    href={inert ? undefined : resolvedHref}
     class="{cls} {inert ? 'pointer-events-none opacity-50' : ''}"
     aria-disabled={inert ? 'true' : undefined}
     tabindex={inert ? -1 : undefined}

package/dist/components/ButtonGroup.svelte

@@ -13,9 +13,9 @@
 {#if orientation === 'horizontal'}
   <div
     class="inline-flex
-      [&>*:not(:first-child)]:rounded-l-none
-      [&>*:not(:last-child)]:rounded-r-none
-      [&>*:not(:first-child)]:-ml-px
+      [&>*:not(:first-child)]:rounded-s-none
+      [&>*:not(:last-child)]:rounded-e-none
+      [&>*:not(:first-child)]:-ms-px
       {cls}"
   >
     {@render children()}

package/dist/components/Card.svelte

@@ -109,7 +109,7 @@
           {:else}
             <h3 class={sectionHeading(3)}>{heading}</h3>
           {/if}
-          {#if meta}<span class="ml-auto shrink-0 text-xs text-faint">{meta}</span>{/if}
+          {#if meta}<span class="ms-auto shrink-0 text-xs text-faint">{meta}</span>{/if}
         </div>
         {#if description}<p class="text-sm text-muted mt-0.5">{description}</p>{/if}
       {:else}

package/dist/components/Checkbox.svelte

@@ -155,7 +155,7 @@
                  own text it became part of the name, and the reader heard the
                  whole paragraph before it reached the checked state. -->
             <span id="{fieldId}-label" class="{choiceLabel(size)} {labelHidden ? 'sr-only' : ''}">
-              {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+              {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
             </span>
           {/if}
         </span>

package/dist/components/CheckboxGroup.svelte

@@ -124,7 +124,7 @@
     ahead of them saying what the set is for.
   -->
   <legend class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
-    {label}{#if required}<span class="text-danger ml-0.5" aria-hidden="true">*</span><span
+    {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span><span
         class="sr-only"
       >
         (required)</span

package/dist/components/Collapsible.svelte

@@ -70,7 +70,7 @@
     aria-expanded={open}
     aria-controls={panelId}
     onclick={toggle}
-    class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm font-medium
+    class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-start text-sm font-medium
       text-fg transition-colors duration-150 outline-none focus-visible:ring-2
       focus-visible:ring-inset focus-visible:ring-brand disabled:cursor-not-allowed
       disabled:opacity-50 {disabled ? '' : 'hover:bg-surface-2'}"
@@ -88,7 +88,7 @@
       stroke-linejoin="round"
       class="shrink-0 text-faint transition-transform duration-200 ease-out {open
         ? ''
-        : '-rotate-90'}"
+        : '-rotate-90 rtl:rotate-90'}"
       aria-hidden="true"
     >
       <path d="M6 9l6 6 6-6" />
@@ -102,7 +102,7 @@
     <span class="truncate">{label}</span>
 
     {#if badge !== undefined}
-      <span class="ml-auto shrink-0 rounded-full bg-surface-2 px-2 py-0.5 text-xs text-muted">
+      <span class="ms-auto shrink-0 rounded-full bg-surface-2 px-2 py-0.5 text-xs text-muted">
         {badge}
       </span>
     {/if}

package/dist/components/CopyButton.svelte

@@ -105,7 +105,7 @@
     type="button"
     aria-label={label}
     onclick={copy}
-    class="inline-flex items-center justify-center rounded-md p-1 outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand {status ===
+    class="inline-flex items-center justify-center rounded-md p-1 outline-none transition-colors duration-150 active:bg-surface-2 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand {status ===
     'copied'
       ? 'text-success'
       : 'text-faint hover:text-fg'}"

package/dist/components/DatePicker.svelte

@@ -176,7 +176,7 @@
 <div class="{FIELD_WRAP} {cls}" bind:this={containerEl}>
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
-      {label}{#if required}<span class="text-danger ml-0.5" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
@@ -206,7 +206,7 @@
       aria-invalid={error ? 'true' : undefined}
       aria-required={required ? 'true' : undefined}
       aria-describedby={describedBy(fieldId, error, hint)}
-      class="{CONTROL_BASE} {controlBorder(!!error)} flex items-center justify-between text-left"
+      class="{CONTROL_BASE} {controlBorder(!!error)} flex items-center justify-between text-start"
     >
       <span class={display ? 'text-fg' : 'text-faint'}>{display || placeholder}</span>
       <span class="text-faint shrink-0" aria-hidden="true">

package/dist/components/DateTimePicker.svelte

@@ -281,7 +281,7 @@
          names it and clicking that label opens the calendar. The group below
          takes its name from this same element. -->
     <label id="{fieldId}-label" for="{fieldId}-date" class={FIELD_LABEL}>
-      {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 

package/dist/components/Drawer.svelte

@@ -68,7 +68,7 @@
     <div
       use:overlay
       class="relative flex h-full max-w-full flex-col {widths[size]} bg-surface shadow-2xl
-        {side === 'right' ? 'border-l' : 'border-r'} border-line
+        {side === 'right' ? 'border-s' : 'border-e'} border-line
         {side === 'right'
         ? 'animate-[drawer-in-right_var(--duration-drawer-in)_ease-out]'
         : 'animate-[drawer-in-left_var(--duration-drawer-in)_ease-out]'}"

package/dist/components/Dropdown.svelte

@@ -247,7 +247,7 @@
       role="menu"
       class="absolute z-dropdown mt-1 py-1 min-w-36 rounded-xl border border-line
         bg-surface shadow-2xl
-        {align === 'right' ? 'right-0' : 'left-0'}"
+        {align === 'right' ? 'end-0' : 'start-0'}"
     >
       {#each items as item, index}
         <button

package/dist/components/Field.svelte

@@ -90,7 +90,7 @@
       the controls with nothing ahead of them saying what each one is.
     -->
     <label for={fieldId} class="{FIELD_LABEL} {labelHidden ? 'sr-only' : ''}">
-      {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 

package/dist/components/Input.svelte

@@ -54,7 +54,7 @@
 <div class="{FIELD_WRAP} {klass}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
-      {label}{#if required}<span class="text-danger ml-0.5" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 

package/dist/components/Label.svelte

@@ -31,6 +31,6 @@
     <span class="text-danger font-bold leading-none" aria-hidden="true">*</span>
   {/if}
   {#if hint}
-    <span class="text-faint normal-case font-normal ml-0.5">({hint})</span>
+    <span class="text-faint normal-case font-normal ms-0.5">({hint})</span>
   {/if}
 </label>

package/dist/components/MultiSelect.svelte

@@ -154,7 +154,7 @@
 <div class="{FIELD_WRAP} {cls}">
   {#if label}
     <label id="{fieldId}-label" for={fieldId} class={FIELD_LABEL}>
-      {label}{#if required}<span class="ml-0.5 text-danger" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="ms-0.5 text-danger" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
@@ -181,7 +181,7 @@
       onkeydown={onTriggerKeydown}
       {...box.triggerAttrs}
       class="flex min-h-control w-full cursor-pointer flex-wrap items-center gap-1.5 rounded-lg
-        border bg-surface-2 px-2.5 py-1.5 text-left text-sm transition-colors duration-150
+        border bg-surface-2 px-2.5 py-1.5 text-start text-sm transition-colors duration-150
         outline-none {disabled ? 'cursor-not-allowed opacity-50' : ''} {controlBorder(!!error)}"
     >
       {#if selected.length === 0}
@@ -226,7 +226,7 @@
           </span>
         {/each}
       {/if}
-      <span class="ml-auto shrink-0 text-faint" aria-hidden="true">
+      <span class="ms-auto shrink-0 text-faint" aria-hidden="true">
         <svg
           width="12"
           height="12"
@@ -315,7 +315,7 @@
                   </svg>
                 {/if}
               </span>
-              <span class="min-w-0 truncate text-left">{option.label}</span>
+              <span class="min-w-0 truncate text-start">{option.label}</span>
             </button>
           {:else}
             <p class={PANEL_EMPTY}>No matches</p>

package/dist/components/NumberInput.svelte

@@ -79,7 +79,7 @@
 <div class="{FIELD_WRAP} {cls}">
   {#if label}
     <label for={fieldId} class={FIELD_LABEL}>
-      {label}{#if required}<span class="text-danger ml-0.5" aria-hidden="true">*</span>{/if}
+      {label}{#if required}<span class="text-danger ms-0.5" aria-hidden="true">*</span>{/if}
     </label>
   {/if}
 
@@ -89,7 +89,7 @@
       onclick={dec}
       disabled={!canDec}
       aria-label="Decrease"
-      class="{step_} rounded-l-lg border border-r-0"
+      class="{step_} rounded-s-lg border border-e-0"
     >
       <svg
         width="14"
@@ -132,7 +132,7 @@
       onclick={inc}
       disabled={!canInc}
       aria-label="Increase"
-      class="{step_} rounded-r-lg border border-l-0"
+      class="{step_} rounded-e-lg border border-s-0"
     >
       <svg
         width="14"