svelte-comp 1.2.7 → 1.3.5

package/dist/lib/FilePicker.svelte.d.ts

@@ -16,6 +16,10 @@
    * @prop clearable {boolean} - Shows a clear button to reset selection
    * @default true
    *
+   * @prop maxBytes {number} - Maximum allowed file size in bytes
+   *
+   * @prop onError {(error: string) => void} - Fired when selected files are rejected
+   *
    * @prop placeholder {string} - Placeholder text for the drop zone
    *
    * @prop value {FileList | null} - Controlled selected files (bindable)
@@ -23,14 +27,12 @@
    *
    * @prop onFilesSelected {(files: FileList | null) => void} - Fired when files are chosen
    *
-   * @prop onError {(error: string) => void} - Fired on validation errors
-   *
    * @prop class {string} - Additional classes for the wrapper
    * @default ""
    *
    * @note The entire area is clickable and supports drag-and-drop.
    * @note After a selection, the underlying input resets its value, so choosing the same file twice still triggers updates.
-   * @note `accept` does not apply to dropped files, only to the picker UI; validate files inside `onFilesSelected`.
+   * @note `accept` and `maxBytes` are enforced for both input and dropped files.
    * @note When `clearable=true`, the user can clear selected files and the callback receives `null`.
    * @note When `disabled=true`, clicks, drag events, focus, and keyboard input are blocked.
    */
@@ -43,6 +45,7 @@ type Props = HTMLAttributes<HTMLDivElement> & {
     clearable?: boolean;
     placeholder?: string;
     value?: FileList | null;
+    maxBytes?: number;
     onFilesSelected?: (files: FileList | null) => void;
     onError?: (error: string) => void;
     class?: string;

package/dist/lib/Hamburger.svelte

@@ -117,7 +117,7 @@
   });
 
   const triggerBase =
-    "fixed top-4 left-4 inline-flex items-center justify-center h-8 w-8 rounded-md border border-[var(--border-color-default)] bg-[var(--color-bg-secondary)] hover:bg-[var(--color-bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] transition-colors z-[var(--z-modal)]";
+    "fixed top-4 left-4 inline-flex items-center justify-center h-8 w-8 rounded-[var(--radius-md)] [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11 border border-[var(--border-color-default)] bg-[var(--color-bg-secondary)] hover:bg-[var(--color-bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] transition-colors z-[var(--z-modal)]";
 
   const triggerClass = $derived(cx(triggerBase, externalClass));
 </script>
@@ -133,19 +133,19 @@
   <span class="relative block w-5 h-3.5">
     <span
       class={cx(
-        "absolute left-0 top-1/2 h-[2px] w-full bg-current transition-transform duration-200",
+    "absolute left-0 top-1/2 h-[2px] w-full bg-current transition-transform duration-[var(--transition-fast)]",
         open ? "translate-y-[-50%] rotate-45" : "translate-y-[calc(-50%_-_6px)]"
       )}
     ></span>
     <span
       class={cx(
-        "absolute left-0 top-1/2 h-[2px] w-full bg-current transition-opacity duration-200 translate-y-[-50%]",
+    "absolute left-0 top-1/2 h-[2px] w-full bg-current transition-opacity duration-[var(--transition-fast)] translate-y-[-50%]",
         open ? "opacity-0" : "opacity-100"
       )}
     ></span>
     <span
       class={cx(
-        "absolute left-0 top-1/2 h-[2px] w-full bg-current transition-transform duration-200",
+    "absolute left-0 top-1/2 h-[2px] w-full bg-current transition-transform duration-[var(--transition-fast)]",
         open
           ? "translate-y-[-50%] -rotate-45"
           : "translate-y-[calc(-50%_+_6px)]"
@@ -165,37 +165,43 @@
       style={`width:${typeof width === "number" ? `${width}px` : width}`}
     >
       {#if header}
-        <div class="p-4 border-b border-[var(--border-color-default)]">
+    <div class="p-[var(--spacing-md)] border-b border-[var(--border-color-default)]">
           {@render header?.()}
         </div>
       {/if}
 
       <div class="flex-1 overflow-y-auto" tabindex="-1">
         {#if menuItems.length === 0}
-          <div class="text-xs opacity-70 px-3 py-2 text-center">No items</div>
+        <div class="[font-size:var(--text-xs)] opacity-70 px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[var(--spacing-sm)] text-center">No items</div>
         {:else}
-          <ul class="grid gap-2 p-4">
+      <ul class="grid gap-[var(--spacing-sm)] p-[var(--spacing-md)]">
             {#each menuItems as it (it.id)}
-              <li>
-                <button
-                  type="button"
-                  class="w-full text-left px-3 py-2 rounded-md hover:bg-[var(--color-bg-hover)] focus:outline-[var(--border-color-focus)] focus:outline-2 transition-colors"
-                  aria-current={activeItem === it.id ? "page" : undefined}
-                  onclick={() => {
-                    onSelect?.(it.id);
-                    if (closeOnSelect) closeMenu();
-                  }}
-                >
+              {#if it.type === "section"}
+          <li class="px-[calc(var(--spacing-sm)+var(--spacing-xs))] pt-[var(--spacing-sm)] mt-[calc(var(--spacing-sm)+var(--spacing-xs))] text-[var(--color-text-muted)] [font-size:var(--text-xs)] lowercase tracking-wide opacity-70">
                   {it.label}
-                </button>
-              </li>
+                </li>
+              {:else}
+                <li>
+                  <button
+                    type="button"
+              class="w-full text-left px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[var(--spacing-sm)] rounded-[var(--radius-md)] hover:bg-[var(--color-bg-hover)] focus:outline-[var(--border-color-focus)] focus:outline-2 transition-colors"
+                    aria-current={activeItem === it.id ? "page" : undefined}
+                    onclick={() => {
+                      onSelect?.(it.id);
+                      if (closeOnSelect) closeMenu();
+                    }}
+                  >
+                    {it.label}
+                  </button>
+                </li>
+              {/if}
             {/each}
           </ul>
         {/if}
       </div>
 
       {#if footer}
-        <div class="p-4 border-t border-[var(--border-color-default)]">
+    <div class="p-[var(--spacing-md)] border-t border-[var(--border-color-default)]">
           {@render footer?.()}
         </div>
       {/if}
@@ -203,7 +209,7 @@
 
     <button
       type="button"
-      class="flex-1 bg-black/40"
+        class="flex-1 bg-[oklch(0_0_0/0.4)]"
       aria-hidden="true"
       onclick={closeMenu}
     ></button>

package/dist/lib/InstallPWA.svelte

@@ -0,0 +1,94 @@
+<!-- src/lib/InstallPWA.svelte -->
+<script lang="ts">
+  /**
+   * @component InstallPWA
+   * @description Installs the app using the browser PWA prompt.
+   *
+   * @prop alwaysShow {boolean} - Forces the install button to be visible
+   * @default false
+   *
+   * @prop inline {boolean} - Renders the button inline instead of fixed
+   * @default false
+   *
+   * @prop class {string} - Additional button classes
+   * @default ""
+   *
+   * @note Uses the `beforeinstallprompt` event and defers the prompt until user action.
+   */
+  import Button from "./Button.svelte";
+  
+  interface BeforeInstallPromptEvent extends Event {
+    prompt: () => Promise<void>;
+    userChoice: Promise<{ outcome: "accepted" | "dismissed"; platform: string }>;
+  }
+
+  type Props = {
+    alwaysShow?: boolean;
+    inline?: boolean;
+    class?: string;
+  };
+
+  let {
+    alwaysShow = false,
+    inline = false,
+    class: externalClass = "",
+  }: Props = $props();
+
+  let deferredPrompt = $state<BeforeInstallPromptEvent | null>(null);
+  let showButton = $state(false);
+
+  $effect(() => {
+    const handler = (e: Event) => {
+      const bipEvent = e as BeforeInstallPromptEvent;
+      bipEvent.preventDefault();
+      deferredPrompt = bipEvent;
+      showButton = true;
+    };
+
+    window.addEventListener("beforeinstallprompt", handler);
+    return () => window.removeEventListener("beforeinstallprompt", handler);
+  });
+  
+  function installPWA() {
+    if (deferredPrompt) {
+      deferredPrompt.prompt();
+      deferredPrompt.userChoice.then(() => {
+        showButton = false;
+      });
+    }
+  }
+</script>
+
+{#if showButton || alwaysShow}
+  <Button
+    onClick={installPWA}
+    sz="sm"
+    class={inline
+      ? `z-[1000] flex items-center gap-2.5 ${externalClass}`
+      : `fixed bottom-5 right-5 z-[10] flex items-center gap-2.5 ${externalClass}`}
+    variant="pill"
+  >
+    <span class="flex items-center gap-2">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="w-4 h-4"
+        aria-hidden="true"
+      >
+        <path d="M12 15V3" />
+        <path
+          d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+        />
+        <path d="m7 10 5 5 5-5" />
+      </svg>
+      <span>Install App</span>
+    </span>
+  </Button>
+{/if}

package/dist/lib/InstallPWA.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    alwaysShow?: boolean;
+    inline?: boolean;
+    class?: string;
+};
+declare const InstallPWA: import("svelte").Component<Props, {}, "">;
+type InstallPWA = ReturnType<typeof InstallPWA>;
+export default InstallPWA;

package/dist/lib/Menu.svelte

@@ -61,20 +61,20 @@
   let subMenuLeft = $state(0);
 
   const sizes: Record<SizeKey, string> = {
-    xs: "h-7 px-3",
-    sm: "h-8 px-3",
-    md: "h-9 px-4",
-    lg: "h-10 px-4",
-    xl: "h-11 px-5",
+    xs: "h-[calc(var(--spacing-md)+var(--spacing-sm)+var(--spacing-xs))] px-[calc(var(--spacing-sm)+var(--spacing-xs))]",
+    sm: "h-[var(--spacing-xl)] px-[calc(var(--spacing-sm)+var(--spacing-xs))]",
+    md: "h-[calc(var(--spacing-xl)+var(--spacing-xs))] px-[var(--spacing-md)]",
+    lg: "h-[calc(var(--spacing-xl)+var(--spacing-sm))] px-[var(--spacing-md)]",
+    xl: "h-[calc(var(--spacing-xl)+var(--spacing-sm)+var(--spacing-xs))] px-[calc(var(--spacing-md)+var(--spacing-xs))]",
   };
 
   const navBase =
-    "flex items-stretch pl-2 gap-1 border-b relative z-10 bg-[var(--color-bg-surface)] text-[var(--color-text-default)] border-[var(--border-color-default)]";
+    "flex items-stretch pl-[var(--spacing-sm)] gap-[var(--spacing-xs)] border-b relative z-10 bg-[var(--color-bg-surface)] text-[var(--color-text-default)] border-[var(--border-color-default)]";
 
   const subMenuGutter = 8;
 
   const topButtonBase =
-    "px-4 rounded-xs leading-none transition-colors outline-none focus-visible:shadow-[inset_0_0_0_2px_var(--border-color-focus)]";
+    "px-[var(--spacing-md)] rounded-[var(--radius-sm)] leading-none transition-colors outline-none [@media(pointer:coarse)]:min-h-11 focus-visible:shadow-[inset_0_0_0_2px_var(--border-color-focus)]";
 
   const topButtonActive =
     "bg-[var(--color-bg-muted)] text-[var(--color-text-default)]";
@@ -480,7 +480,7 @@
       <div
         bind:this={menuRefs[menuItem.name]}
         class={cx(
-          "fixed z-50 min-w-44 p-2 rounded-xs shadow-[0_2px_4px_var(--shadow-color)] ",
+          "fixed z-50 min-w-44 p-[var(--spacing-sm)] rounded-[var(--radius-sm)] shadow-[0_2px_4px_var(--shadow-color)] ",
           "border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]"
         )}
         style={menuStyle}
@@ -491,7 +491,7 @@
         {#each menuItem.actions as action, i (actionKey(action, i))}
           {#if isSeparator(action)}
             <div
-              class="my-1 mx-1 border-t border-[var(--border-color-default)]"
+              class="my-[var(--spacing-xs)] mx-[var(--spacing-xs)] border-t border-[var(--border-color-default)]"
               role="separator"
             ></div>
           {:else}
@@ -501,8 +501,8 @@
                 type="button"
                 role="menuitem"
                 class={cx(
-                  "relative text-left rounded-xs transition-colors outline-none px-1.5 py-0.5 my-1 mr-1 min-w-full flex items-center",
-                  "gap-3 hover:bg-[var(--color-bg-muted)] focus-visible:bg-[var(--color-bg-muted)]",
+                  "relative text-left rounded-[var(--radius-sm)] transition-colors outline-none px-[calc(var(--spacing-sm)+var(--spacing-xs)/2)] py-[calc(var(--spacing-xs)/2)] my-[var(--spacing-xs)] mr-[var(--spacing-xs)] min-w-full flex items-center",
+                  "gap-[calc(var(--spacing-sm)+var(--spacing-xs))] hover:bg-[var(--color-bg-muted)] focus-visible:bg-[var(--color-bg-muted)]",
                   "focus-visible:shadow-[inset_0_0_0_2px_var(--border-color-focus)]",
                   textCls
                 )}
@@ -528,11 +528,11 @@
                   focusMenuAction(menuItem, i);
                 }}
               >
-                <span class="flex items-center gap-2 flex-1 min-w-0">
+                <span class="flex items-center gap-[var(--spacing-sm)] flex-1 min-w-0">
                   <span class="truncate">{actionText(action)}</span>
                 </span>
 
-                <span class="flex items-center shrink-0 ml-auto gap-1">
+                <span class="flex items-center shrink-0 ml-auto gap-[var(--spacing-xs)]">
                   {#if actionShortcut(action)}
                     <span
                       class={cx(
@@ -562,7 +562,7 @@
                 <div
                   bind:this={subMenuRefs[actionId(action)]}
                   class={cx(
-                    "fixed z-50 min-w-44 p-2 rounded-xs shadow-[0_2px_4px_var(--shadow-color)]",
+                    "fixed z-50 min-w-44 p-[var(--spacing-sm)] rounded-[var(--radius-sm)] shadow-[0_2px_4px_var(--shadow-color)]",
                     "border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]"
                   )}
                   style={subMenuStyle}
@@ -574,7 +574,7 @@
                   {#each action.submenu as sub, j (actionKey(sub, j))}
                     {#if isSeparator(sub)}
                       <div
-                        class="my-1 mx-1 border-t border-[var(--border-color-default)]"
+                        class="my-[var(--spacing-xs)] mx-[var(--spacing-xs)] border-t border-[var(--border-color-default)]"
                         role="separator"
                       ></div>
                     {:else}
@@ -583,8 +583,8 @@
                         type="button"
                         role="menuitem"
                         class={cx(
-                          "relative text-left rounded-xs transition-colors outline-none px-1.5 py-0.5",
-                          "my-1 mr-1 w-full flex items-center justify-between gap-3",
+                          "relative text-left rounded-[var(--radius-sm)] transition-colors outline-none px-[calc(var(--spacing-sm)+var(--spacing-xs)/2)] py-[calc(var(--spacing-xs)/2)]",
+                          "my-[var(--spacing-xs)] mr-[var(--spacing-xs)] w-full flex items-center justify-between gap-[calc(var(--spacing-sm)+var(--spacing-xs))]",
                           "hover:bg-[var(--color-bg-muted)] focus-visible:bg-[var(--color-bg-muted)]",
                           "focus-visible:shadow-[inset_0_0_0_2px_var(--border-color-focus)]",
                           "decoration-[var(--color-text-default)]",
@@ -595,7 +595,7 @@
                         onmouseenter={() => (activeSubIndex = j)}
                         onfocus={() => (activeSubIndex = j)}
                       >
-                        <span class="flex items-center gap-2 flex-1 min-w-0">
+                        <span class="flex items-center gap-[var(--spacing-sm)] flex-1 min-w-0">
                           <span class="truncate">{actionText(sub)}</span>
                         </span>
 

package/dist/lib/NoticeBase.svelte

@@ -0,0 +1,140 @@
+<!-- src/lib/NoticeBase.svelte -->
+<script lang="ts">
+  /**
+   * @component NoticeBase
+   * @description Shared base for Toast and Badge visuals.
+   *
+   * @prop title {string} - Optional title displayed above the message
+   *
+   * @prop message {string} - Notice text content
+   *
+   * @prop variant {ToastVariant} - Visual style
+   * @options success|danger|warning|info
+   * @default info
+   *
+   * @prop showIcon {boolean} - Shows an icon matching the variant
+   * @default true
+   *
+   * @prop inline {boolean} - Inline layout without overlay styling
+   * @default false
+   *
+   * @prop size {"sm" | "md"} - Size preset for spacing and typography
+   * @default "sm"
+   *
+   * @prop end {Snippet} - Trailing content (e.g. close button)
+   *
+   * @prop class {string} - Additional wrapper classes
+   * @default ""
+   *
+   * @note Used by Toast and Badge to keep styles consistent.
+   */
+  import type { Snippet } from "svelte";
+  import type { ToastVariant } from "./types";
+  import { cx } from "../utils";
+
+  type Props = {
+    title?: string;
+    message: string;
+    variant?: ToastVariant;
+    showIcon?: boolean;
+    class?: string;
+    inline?: boolean;
+    size?: "sm" | "md";
+    end?: Snippet;
+  };
+
+  let {
+    title,
+    message,
+    variant = "info",
+    showIcon = true,
+    inline = false,
+    size = "sm",
+    end,
+    class: externalClass = "",
+  }: Props = $props();
+
+  function variantClasses(v: ToastVariant) {
+    switch (v) {
+      case "success":
+        return "bg-[var(--color-bg-success)] text-[var(--color-text-success)]";
+      case "danger":
+        return "bg-[var(--color-bg-danger)] text-[var(--color-text-danger)]";
+      case "warning":
+        return "bg-[var(--color-bg-warning)] text-[var(--color-text-warning)]";
+      default:
+        return "bg-[var(--color-bg-page)] text-[var(--color-text-default)]";
+    }
+  }
+
+  const sizeClasses = $derived(
+    size === "md"
+      ? "gap-[calc(var(--spacing-sm)+var(--spacing-xs))] px-[var(--spacing-md)] py-[calc(var(--spacing-sm)+var(--spacing-xs))] rounded-[var(--radius-lg)]"
+      : "gap-[var(--spacing-sm)] px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[calc(var(--spacing-sm)+var(--spacing-xs)/2)] rounded-[var(--radius-md)]"
+  );
+
+  const iconClass = $derived(size === "md" ? "w-5 h-5" : "w-4 h-4");
+
+  const titleClass = $derived(
+    size === "md"
+      ? "font-[var(--font-weight-medium)] truncate [font-size:var(--text-md)] max-sm:[font-size:var(--text-sm)]"
+      : "font-[var(--font-weight-medium)] truncate [font-size:var(--text-sm)]"
+  );
+
+  const messageClass = $derived(
+    size === "md"
+      ? "line-clamp-3 [font-size:var(--text-sm)] max-sm:[font-size:var(--text-xs)]"
+      : "truncate [font-size:var(--text-xs)]"
+  );
+
+  const rootClass = $derived(
+    cx(
+      "flex items-center border border-[var(--border-color-default)]",
+      sizeClasses,
+      !inline && "shadow-[0_8px_16px_var(--shadow-color)] backdrop-blur-sm",
+      variantClasses(variant),
+      externalClass
+    )
+  );
+</script>
+
+<div class={rootClass} role="status" aria-live="polite">
+  {#if showIcon}
+    <span class={cx(iconClass, "flex-shrink-0")} aria-hidden="true">
+      {#if variant === "success"}
+        <svg fill="none" viewBox="0 0 26 26">
+          <path d="M8.5 14L11.1 16.6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <path d="M18.2 10L11.6 16.6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <path d="M13 25C19.6 25 25 19.6 25 13C25 6.4 19.6 1 13 1C6.4 1 1 6.4 1 13C1 19.6 6.4 25 13 25Z" stroke="currentColor" stroke-width="2"/>
+        </svg>
+      {:else if variant === "danger"}
+        <svg fill="none" viewBox="0 0 26 26">
+          <path d="M13 25C19.6 25 25 19.6 25 13C25 6.4 19.6 1 13 1C6.4 1 1 6.4 1 13C1 19.6 6.4 25 13 25Z" stroke="currentColor" stroke-width="2"/>
+          <path d="M9 9.5L16.7 17.3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          <path d="M16.7 9.5L9 17.3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+        </svg>
+      {:else if variant === "warning"}
+        <svg fill="none" viewBox="0 0 27 27">
+          <path d="M4.6 25.9H22.5C25.2 25.9 26.8 23 25.6 20.6L16.6 3.8C15.3 1.3 11.8 1.3 10.5 3.8L1.5 20.6C0.3 23 1.9 25.9 4.6 25.9Z" stroke="currentColor" stroke-width="2"/>
+          <path d="M13.9 18H13.2L11.9 9.3C11.9 8.6 12.5 8 13.2 8H13.9C14.6 8 15.2 8.6 15.2 9.3L13.9 18Z" fill="currentColor"/>
+          <circle cx="13.5" cy="20.6" r="1.3" fill="currentColor"/>
+        </svg>
+      {:else}
+        <svg fill="none" viewBox="0 0 26 26">
+          <path d="M13 25C19.6 25 25 19.6 25 13C25 6.4 19.6 1 13 1C6.4 1 1 6.4 1 13C1 19.6 6.4 25 13 25Z" stroke="currentColor" stroke-width="2"/>
+          <circle cx="13" cy="7.7" r="1.3" fill="currentColor"/>
+          <rect x="11.6" y="10.3" width="2.7" height="9.4" rx="1.3" fill="currentColor"/>
+        </svg>
+      {/if}
+    </span>
+  {/if}
+
+  <div class="flex-1 min-w-0">
+    {#if title}
+      <div class={titleClass}>{title}</div>
+    {/if}
+    <div class={messageClass} title={message}>{message}</div>
+  </div>
+
+  {@render end?.()}
+</div>

package/dist/lib/NoticeBase.svelte.d.ts

@@ -0,0 +1,43 @@
+/**
+   * @component NoticeBase
+   * @description Shared base for Toast and Badge visuals.
+   *
+   * @prop title {string} - Optional title displayed above the message
+   *
+   * @prop message {string} - Notice text content
+   *
+   * @prop variant {ToastVariant} - Visual style
+   * @options success|danger|warning|info
+   * @default info
+   *
+   * @prop showIcon {boolean} - Shows an icon matching the variant
+   * @default true
+   *
+   * @prop inline {boolean} - Inline layout without overlay styling
+   * @default false
+   *
+   * @prop size {"sm" | "md"} - Size preset for spacing and typography
+   * @default "sm"
+   *
+   * @prop end {Snippet} - Trailing content (e.g. close button)
+   *
+   * @prop class {string} - Additional wrapper classes
+   * @default ""
+   *
+   * @note Used by Toast and Badge to keep styles consistent.
+   */
+import type { Snippet } from "svelte";
+import type { ToastVariant } from "./types";
+type Props = {
+    title?: string;
+    message: string;
+    variant?: ToastVariant;
+    showIcon?: boolean;
+    class?: string;
+    inline?: boolean;
+    size?: "sm" | "md";
+    end?: Snippet;
+};
+declare const NoticeBase: import("svelte").Component<Props, {}, "">;
+type NoticeBase = ReturnType<typeof NoticeBase>;
+export default NoticeBase;

package/dist/lib/PrimaryColorSelect.svelte

@@ -19,9 +19,9 @@
    * @note The `html` element receives `data-primary="{value}"` for theme styling.
    * @note Uses the same onChange contract as Select and forwards palette options as-is.
    */
-  import Select from "./Select.svelte";
-  import type { PrimaryKey, PaletteOption, SizeKey } from "./types";
-  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
+  import Select from "./Select.svelte";
+  import type { PrimaryKey, PaletteOption, SizeKey } from "./types";
+  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
 
   type Props = {
     sz?: SizeKey;
@@ -31,9 +31,9 @@
 
   let { sz = "sm", label, class: externalClass = "" }: Props = $props();
 
-  const langCtx = getLangContext();
-  const langKey = $derived(getLangKey(langCtx));
-  const L = $derived(getComponentText("primaryColorSelect", langKey));
+  const langCtx = getLangContext();
+  const langKey = $derived(getLangKey(langCtx));
+  const L = $derived(getComponentText("primaryColorSelect", langKey));
 
   const labelFinal = $derived(label ?? L.text);
 

package/dist/lib/ProgressCircle.svelte

@@ -7,20 +7,18 @@
    * @default 0
    * @prop indeterminate {boolean} - Enables spinning infinite mode
    * @default false
-   * @prop size {number} - Diameter in px
-   * @default 48
-   * @prop stroke {number} - Stroke width in px
-   * @default 4
+   * @prop sz {SizeKey} - Size preset (xs|sm|md|lg|xl)
+   * @default md
    * @prop variant {ComponentVariant} - Color/style variant
-   * @options default|neutral|success|warning|error
+   * @options default|neutral
    * @default default
-   * @prop label {string} - Optional text shown in center
+   * @prop label {string} - Optional text shown above the circle
    * @default ""
-   * @prop max {number} - Max progress value for normalization
-   * @default 100
+   * @prop disabled {boolean} - Apply disabled styles
+   * @default false
    * @prop class {string} - Extra wrapper classes
    * @default ""
-   * @note Clamps value between 0-max
+   * @note Clamps value between 0-100
    * @note Uses SVG stroke-dashoffset animation
    * @note Accessible role=progressbar with aria-valuenow
    * @note Works in both determinate/indeterminate modes

package/dist/lib/ProgressCircle.svelte.d.ts

@@ -5,20 +5,18 @@
    * @default 0
    * @prop indeterminate {boolean} - Enables spinning infinite mode
    * @default false
-   * @prop size {number} - Diameter in px
-   * @default 48
-   * @prop stroke {number} - Stroke width in px
-   * @default 4
+   * @prop sz {SizeKey} - Size preset (xs|sm|md|lg|xl)
+   * @default md
    * @prop variant {ComponentVariant} - Color/style variant
-   * @options default|neutral|success|warning|error
+   * @options default|neutral
    * @default default
-   * @prop label {string} - Optional text shown in center
+   * @prop label {string} - Optional text shown above the circle
    * @default ""
-   * @prop max {number} - Max progress value for normalization
-   * @default 100
+   * @prop disabled {boolean} - Apply disabled styles
+   * @default false
    * @prop class {string} - Extra wrapper classes
    * @default ""
-   * @note Clamps value between 0-max
+   * @note Clamps value between 0-100
    * @note Uses SVG stroke-dashoffset animation
    * @note Accessible role=progressbar with aria-valuenow
    * @note Works in both determinate/indeterminate modes

package/dist/lib/SearchInput.svelte

@@ -23,9 +23,9 @@
    *
    * @note Renders a leading search icon and uses `Field` with `type="search"` and `clearable`.
    */
-  import Field from "./Field.svelte";
-  import type { FieldVariant, SizeKey } from "./types";
-  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
+  import Field from "./Field.svelte";
+  import type { FieldVariant, SizeKey } from "./types";
+  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
 
   type Props = {
     label?: string;
@@ -47,9 +47,9 @@
     ...rest
   }: Props = $props();
 
-  const langCtx = getLangContext();
-  const langKey = $derived(getLangKey(langCtx));
-  const L = $derived(getComponentText("searchInput", langKey));
+  const langCtx = getLangContext();
+  const langKey = $derived(getLangKey(langCtx));
+  const L = $derived(getComponentText("searchInput", langKey));
 
   const placeholderFinal = $derived(placeholder ?? L.placeholder);
 </script>

package/dist/lib/Select.svelte

@@ -102,7 +102,7 @@
   let menuPosition = $state<"top" | "bottom">("bottom");
 
   const base =
-    "relative w-full outline-none appearance-none cursor-pointer transition-colors duration-[var(--transition-fast)] ease-[var(--timing-default)] box-border rounded-[var(--radius-md)] border focus:border-[var(--border-color-focus)] focus:ring-2 focus:ring-[var(--border-color-focus)] [color:var(--color-text-default)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed";
+    "relative w-full outline-none appearance-none cursor-pointer transition-colors duration-[var(--transition-fast)] ease-[var(--timing-default)] box-border rounded-[var(--radius-md)] border focus:border-[var(--border-color-focus)] focus:ring-2 focus:ring-[var(--border-color-focus)] [color:var(--color-text-default)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed [@media(pointer:coarse)]:min-h-11";
 
   const sizes: Record<SizeKey, string> = {
     xs: "px-2 pr-6 h-6",
@@ -152,7 +152,7 @@
 
   const itemBaseClass = $derived(
     cx(
-      "w-full text-left px-4 py-2 transition-colors duration-[var(--transition-fast)] cursor-pointer",
+      "w-full text-left px-4 py-2 transition-colors duration-[var(--transition-fast)] cursor-pointer [@media(pointer:coarse)]:min-h-11",
       TEXT[sz]
     )
   );