svelte-comp 1.3.3 → 1.3.5

package/dist/app.css

@@ -1,9 +1,6 @@
 /* src/app.css */
-
 @import "tailwindcss";
 
-/* src/styles.css */
-@import "tailwindcss";
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
@@ -15,6 +12,7 @@
   --color-text-warning: oklch(95% 0.05 90deg);
   --color-text-link: oklch(35% 0.3 250deg);
   --color-text-red: oklch(50% 0.25 30deg);
+  --color-text-inverse: oklch(100% 0 0deg);
 
   /* COLORS — BG */
   --color-bg-page: oklch(98% 0 0deg);
@@ -108,6 +106,7 @@
   --color-text-warning: oklch(95% 0.05 90deg);
   --color-text-link: oklch(65% 0.3 250deg);
   --color-text-red: oklch(50% 0.25 30deg);
+  --color-text-inverse: oklch(100% 0 0deg);
 
   /* COLORS — BG */
   --color-bg-page: oklch(15% 0 0deg);

package/dist/app.d.ts

@@ -0,0 +1,10 @@
+// src/app.d.ts
+declare module "*.css" {
+  const content: string;
+  export default content;
+}
+
+declare module "prismjs/themes/*.css" {
+  const content: string;
+  export default content;
+}

package/dist/lib/Accordion.svelte

@@ -51,22 +51,22 @@
   }: Props = $props();
 
   const base =
-    "w-full border border-[var(--border-color-default)] bg-[var(--color-bg-surface)] shadow-sm";
+    "w-full border border-[var(--border-color-default)] bg-[var(--color-bg-surface)] shadow-[0_1px_2px_var(--shadow-color)]";
 
   const sizes: Record<SizeKey, string> = {
-    xs: "rounded-[var(--radius-md)] text-sm",
-    sm: "rounded-[var(--radius-md)] text-base",
-    md: "rounded-[var(--radius-lg)] text-lg",
-    lg: "rounded-[var(--radius-lg)] text-xl",
-    xl: "rounded-[var(--radius-xl)] text-2xl",
+    xs: cx("rounded-[var(--radius-md)]", TEXT.xs),
+    sm: cx("rounded-[var(--radius-md)]", TEXT.sm),
+    md: cx("rounded-[var(--radius-lg)]", TEXT.md),
+    lg: cx("rounded-[var(--radius-lg)]", TEXT.lg),
+    xl: cx("rounded-[var(--radius-xl)]", TEXT.xl),
   };
 
   const contentSize: Record<SizeKey, string> = {
-    xs: "px-4 pb-4 mt-1",
-    sm: "px-5 pb-5 mt-2",
-    md: "px-6 pb-6 mt-3",
-    lg: "px-8 pb-8 mt-4",
-    xl: "px-10 pb-10 mt-5",
+    xs: "px-[var(--spacing-md)] pb-[var(--spacing-md)] mt-[var(--spacing-xs)]",
+    sm: "px-[calc(var(--spacing-md)+var(--spacing-xs))] pb-[calc(var(--spacing-md)+var(--spacing-xs))] mt-[var(--spacing-sm)]",
+    md: "px-[calc(var(--spacing-md)+var(--spacing-sm))] pb-[calc(var(--spacing-md)+var(--spacing-sm))] mt-[calc(var(--spacing-sm)+var(--spacing-xs))]",
+    lg: "px-[var(--spacing-xl)] pb-[var(--spacing-xl)] mt-[var(--spacing-md)]",
+    xl: "px-[calc(var(--spacing-xl)+var(--spacing-sm))] pb-[calc(var(--spacing-xl)+var(--spacing-sm))] mt-[calc(var(--spacing-md)+var(--spacing-xs))]",
   };
 
   const iconSize: Record<SizeKey, string> = {
@@ -110,14 +110,14 @@
       <h3>
         <button
           type="button"
-          class="flex w-full items-center justify-between gap-3 p-2 text-left font-medium text-[var(--color-text-default)] bg-transparent transition-colors hover:bg-[var(--color-bg-hover)] active:bg-[var(--color-bg-active)] focus:outline-none focus:ring-2 focus:ring-[var(--border-color-focus)] focus:ring-inset"
+          class="flex w-full items-center justify-between gap-[calc(var(--spacing-sm)+var(--spacing-xs))] p-[var(--spacing-sm)] text-left font-medium text-[var(--color-text-default)] bg-transparent transition-colors hover:bg-[var(--color-bg-hover)] active:bg-[var(--color-bg-active)] focus:outline-none focus:ring-2 focus:ring-[var(--border-color-focus)] focus:ring-inset"
           aria-expanded={isOpen(i)}
           onclick={() => toggle(i)}
         >
           <span>{item.title}</span>
           <svg
             class={cx(
-              "shrink-0 transition-transform duration-200 text-[var(--color-text-muted)]",
+              "shrink-0 transition-transform duration-[var(--transition-fast)] text-[var(--color-text-muted)]",
               iconClass
             )}
             class:rotate-180={isOpen(i)}
@@ -135,7 +135,7 @@
       </h3>
 
       <div
-        class="grid overflow-hidden transition-[grid-template-rows] duration-200"
+        class="grid overflow-hidden transition-[grid-template-rows] duration-[var(--transition-fast)]"
         class:grid-rows-[1fr]={isOpen(i)}
         class:grid-rows-[0fr]={!isOpen(i)}
       >

package/dist/lib/Button.svelte

@@ -70,6 +70,7 @@
     relative inline-flex items-center justify-center gap-2 rounded-[var(--radius-md)] border font-medium
     transition-all duration-[var(--transition-fast)] ease-[var(--timing-default)] whitespace-nowrap select-none
     focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)]
+    [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11
     disabled:opacity-[var(--opacity-disabled)]
     disabled:cursor-not-allowed
     disabled:brightness-100
@@ -87,20 +88,20 @@
 
   const variants: Record<ButtonVariant, string> = {
     primary:
-      "bg-[var(--color-bg-primary)] text-white border-[var(--border-color-primary)] hover:brightness-110 active:scale-95",
+      "bg-[var(--color-bg-primary)] text-[var(--color-text-inverse,#fff)] border-[var(--border-color-primary)] hover:brightness-110 active:scale-95",
     secondary:
       "bg-[var(--color-bg-secondary)] [color:var(--color-text-default)] border-[var(--border-color-default)] hover:bg-[var(--color-bg-hover)] active:scale-95",
-    pill: "bg-[var(--color-bg-primary)] text-white border-[var(--border-color-primary)] rounded-full hover:brightness-110 active:scale-95",
+    pill: "bg-[var(--color-bg-primary)] text-[var(--color-text-inverse,#fff)] border-[var(--border-color-primary)] rounded-full hover:brightness-110 active:scale-95",
     danger:
-      "bg-[var(--color-bg-danger)] text-white border-[var(--color-bg-danger)] hover:brightness-110 active:scale-95",
+      "bg-[var(--color-bg-danger)] text-[var(--color-text-inverse,#fff)] border-[var(--color-bg-danger)] hover:brightness-110 active:scale-95",
     success:
-      "bg-[var(--color-bg-success)] text-white border-[var(--color-bg-success)] hover:brightness-110 active:scale-95",
+      "bg-[var(--color-bg-success)] text-[var(--color-text-inverse,#fff)] border-[var(--color-bg-success)] hover:brightness-110 active:scale-95",
     warning:
-      "bg-[var(--color-bg-warning)] text-white border-[var(--color-bg-warning)] hover:brightness-110 active:scale-95",
+      "bg-[var(--color-bg-warning)] text-[var(--color-text-inverse,#fff)] border-[var(--color-bg-warning)] hover:brightness-110 active:scale-95",
     ghost:
       "bg-transparent [color:var(--color-text-default)] border-transparent hover:bg-[var(--color-bg-hover)] active:bg-[var(--color-bg-active)] active:scale-95",
     link: "bg-transparent underline border-transparent [color:var(--color-text-link)] hover:brightness-110 active:scale-95 transition-transform ",
-    info: "bg-[var(--color-bg-secondary)] text-white border-[var(--border-color-default)] hover:bg-[var(--color-bg-hover)] active:scale-95",
+    info: "bg-[var(--color-bg-secondary)] text-[var(--color-text-inverse,#fff)] border-[var(--border-color-default)] hover:bg-[var(--color-bg-hover)] active:scale-95",
   };
 
   const buttonClass = $derived(
@@ -132,15 +133,29 @@
 
   function navigateToLink() {
     if (!link || typeof window === "undefined") return;
+    const safeLink = getSafeLink(link);
+    if (!safeLink) return;
 
     const restAttrs = rest as Record<string, unknown>;
     const target =
       typeof restAttrs.target === "string" ? restAttrs.target : undefined;
 
     if (target === "_blank") {
-      window.open(link, "_blank", "noopener,noreferrer");
+      window.open(safeLink, "_blank", "noopener,noreferrer");
     } else {
-      window.location.assign(link);
+      window.location.assign(safeLink);
+    }
+  }
+
+  function getSafeLink(value: string) {
+    try {
+      const url = new URL(value, window.location.href);
+      if (!["http:", "https:", "mailto:", "tel:"].includes(url.protocol)) {
+        return null;
+      }
+      return value;
+    } catch {
+      return null;
     }
   }
 </script>

package/dist/lib/Card.svelte

@@ -53,16 +53,16 @@
   }: Props = $props();
 
   const paddingSizes: Record<SizeKey, string> = {
-    xs: "px-3 py-2",
-    sm: "px-4 py-2",
-    md: "px-5 py-3",
-    lg: "px-6 py-4",
-    xl: "px-7 py-5",
+    xs: "px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[var(--spacing-sm)]",
+    sm: "px-[var(--spacing-md)] py-[var(--spacing-sm)]",
+    md: "px-[calc(var(--spacing-md)+var(--spacing-xs))] py-[calc(var(--spacing-sm)+var(--spacing-xs))]",
+    lg: "px-[calc(var(--spacing-md)+var(--spacing-sm))] py-[var(--spacing-md)]",
+    xl: "px-[calc(var(--spacing-md)+var(--spacing-sm)+var(--spacing-xs))] py-[calc(var(--spacing-md)+var(--spacing-xs))]",
   };
 
   const cardClass = $derived(
     cx(
-      "bg-[var(--color-bg-surface)] border border-[var(--border-color-default)] rounded-xl shadow-sm overflow-hidden",
+      "bg-[var(--color-bg-surface)] border border-[var(--border-color-default)] rounded-[var(--radius-xl)] shadow-[0_1px_2px_var(--shadow-color)] overflow-hidden",
       TEXT[sz],
       "flex flex-col",
       externalClass

package/dist/lib/Carousel.svelte

@@ -34,7 +34,7 @@
    */
   import Card from "./Card.svelte";
   import type { HTMLAttributes } from "svelte/elements";
-  import type { SizeKey, CarouselItem } from "./types";
+  import { TEXT, type SizeKey, type CarouselItem } from "./types";
   import { cx } from "../utils";
 
   type Props = HTMLAttributes<HTMLDivElement> & {
@@ -66,19 +66,19 @@
     "relative w-full overflow-hidden rounded-[var(--radius-lg)] bg-[var(--color-bg-surface)]";
 
   const sizes: Record<SizeKey, string> = {
-    xs: "rounded-[var(--radius-md)] text-sm",
-    sm: "rounded-[var(--radius-md)] text-base",
-    md: "rounded-[var(--radius-lg)] text-lg",
-    lg: "rounded-[var(--radius-lg)] text-xl",
-    xl: "rounded-[var(--radius-xl)] text-2xl",
+    xs: cx("rounded-[var(--radius-md)]", TEXT.xs),
+    sm: cx("rounded-[var(--radius-md)]", TEXT.sm),
+    md: cx("rounded-[var(--radius-lg)]", TEXT.md),
+    lg: cx("rounded-[var(--radius-lg)]", TEXT.lg),
+    xl: cx("rounded-[var(--radius-xl)]", TEXT.xl),
   };
 
   const contentSize: Record<SizeKey, string> = {
-    xs: "p-3 gap-2",
-    sm: "p-4 gap-2.5",
-    md: "p-5 gap-3",
-    lg: "p-6 gap-4",
-    xl: "p-8 gap-5",
+    xs: "p-[calc(var(--spacing-sm)+var(--spacing-xs))] gap-[var(--spacing-sm)]",
+    sm: "p-[var(--spacing-md)] gap-[calc(var(--spacing-sm)+var(--spacing-xs)/2)]",
+    md: "p-[calc(var(--spacing-md)+var(--spacing-xs))] gap-[calc(var(--spacing-sm)+var(--spacing-xs))]",
+    lg: "p-[calc(var(--spacing-md)+var(--spacing-sm))] gap-[var(--spacing-md)]",
+    xl: "p-[var(--spacing-xl)] gap-[calc(var(--spacing-md)+var(--spacing-xs))]",
   };
 
   const arrowSize: Record<SizeKey, string> = {
@@ -123,14 +123,14 @@
   const arrowClass = $derived(
     cx(
       arrowSize[sz],
-      "rounded-full bg-[var(--color-bg-surface)] shadow-lg flex items-center justify-center [color:var(--color-text-default)] hover:bg-[var(--color-bg-hover)] transition-colors focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
+      "rounded-full bg-[var(--color-bg-surface)] shadow-[0_8px_16px_var(--shadow-color)] flex items-center justify-center [color:var(--color-text-default)] hover:bg-[var(--color-bg-hover)] transition-colors focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
     )
   );
 
   const dotClass = $derived(
     cx(
       dotSize[sz],
-      "rounded-full transition-all duration-200 focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
+      "rounded-full transition-all duration-[var(--transition-fast)] focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
     )
   );
 
@@ -156,7 +156,7 @@
 
   $effect(() => {
     if (autoplay && hasItems && items.length > 1) {
-      autoplayTimer = setInterval(next, interval);
+      autoplayTimer = setInterval(next, Math.max(1000, interval));
     }
     return () => {
       if (autoplayTimer) {
@@ -203,7 +203,7 @@
         {/snippet}
 
         <div
-          class="transition-opacity duration-300 ease-in-out"
+          class="transition-opacity duration-[var(--transition-normal)] ease-in-out"
           class:opacity-100={i === current}
           class:opacity-0={i !== current}
           class:block={i === current}
@@ -275,7 +275,7 @@
   </div>
 
   {#if showDots && hasItems && items.length > 1}
-    <div class="flex justify-center gap-2 p-4">
+    <div class="flex justify-center gap-[var(--spacing-sm)] p-[var(--spacing-md)]">
       {#each items as item, i (item.id ?? i)}
         <button
           type="button"

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
-import type { SizeKey, CarouselItem } from "./types";
+import { type SizeKey, type CarouselItem } from "./types";
 type Props = HTMLAttributes<HTMLDivElement> & {
     items?: CarouselItem[];
     sz?: SizeKey;

package/dist/lib/CheckBox.svelte

@@ -116,12 +116,12 @@
       ? state === "checked" || state === "mixed"
         ? "var(--border-color-strong)"
         : "var(--border-color-default)"
-      : "white"
+      : "var(--color-text-inverse,#fff)"
   );
 
   const rootClass = $derived(
     cx(
-      "inline-flex items-center cursor-pointer select-none",
+      "inline-flex items-center cursor-pointer select-none [@media(pointer:coarse)]:min-h-11",
       gapBySize[sz],
       externalClass
     )

package/dist/lib/CodeView.svelte

@@ -139,6 +139,7 @@
   });
 
   async function copyToClipboard() {
+    if (typeof navigator === "undefined" || !navigator.clipboard) return;
     await navigator.clipboard.writeText(code);
     copied = true;
     setTimeout(() => (copied = false), 1200);
@@ -155,7 +156,7 @@
   {#if title}
     <div
       class={cx(
-        "px-3 py-1 bg-[var(--color-bg-muted)] font-semibold uppercase flex items-center justify-between",
+            "px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[var(--spacing-xs)] bg-[var(--color-bg-muted)] font-semibold uppercase flex items-center justify-between",
         TEXT[sz]
       )}
     >
@@ -165,7 +166,7 @@
         <button
           onclick={copyToClipboard}
           class={cx(
-            "px-3 py-0.5 text-xs rounded bg-[var(--color-primary)] text-white hover:opacity-[var(--opacity-hover)]",
+            "px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[calc(var(--spacing-xs)/2)] [font-size:var(--text-xs)] rounded-[var(--radius-sm)] bg-[var(--color-primary)] text-[var(--color-text-inverse,#fff)] hover:opacity-[var(--opacity-hover)]",
             "transition focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus:outline-none"
           )}
           class:!bg-green-600={copied}
@@ -187,7 +188,7 @@
       <div
         bind:this={gutterEl}
         class={cx(
-          "select-none px-3 py-[12px] border-r border-[var(--border-color-default)]",
+          "select-none px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[calc(var(--spacing-sm)+var(--spacing-xs))] border-r border-[var(--border-color-default)]",
           "text-[var(--color-text-muted)] text-right overflow-hidden",
           "cv-gutter bg-[var(--color-bg-surface)] tabular-nums h-full min-h-0"
         )}
@@ -232,8 +233,8 @@
 <style>
   .cv-layer {
     position: absolute;
-    padding: 12px;
-    white-space: pre;
+    padding: calc(var(--spacing-sm) + var(--spacing-xs));
+    white-space: var(--code-white-space, pre);
     box-sizing: border-box;
     font: inherit;
     line-height: inherit;

package/dist/lib/ContextMenu.svelte

@@ -120,25 +120,31 @@
   const doCut = () => (onCut(), close());
   const doPaste = () => (onPaste(), close());
   const doDelete = () => (onDelete(), close());
+
+  const menuPanelClass =
+    "fixed bg-[var(--color-bg-surface)] border border-[var(--border-color-default)] rounded-[var(--radius-md)] min-w-[160px] max-w-[260px] py-[var(--spacing-xs)] z-[9999] box-border text-[var(--text-sm)] shadow-[0_2px_4px_var(--shadow-color)] font-[var(--font-sans)] text-[var(--color-text-default)] m-0 scale-90 origin-top-left";
+  const itemClass =
+    "w-full flex items-center justify-between bg-transparent border-0 text-[var(--color-text-default)] px-[calc(var(--spacing-sm)+var(--spacing-xs))] py-[var(--spacing-sm)] m-0 font-inherit cursor-pointer rounded-[var(--radius-sm)] whitespace-nowrap leading-[var(--line-height-normal)] gap-[calc(var(--spacing-sm)+var(--spacing-xs))] outline-none shadow-none relative hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-default)] active:bg-[color-mix(in_srgb,var(--color-primary)_12%,var(--color-bg-hover)_88%)] active:text-[var(--color-text-default)] transition-colors duration-[var(--transition-fast)]";
+  const itemContentClass = "flex items-center gap-[calc(var(--spacing-sm)+var(--spacing-xs)/2)]";
 </script>
 
 {#if visible}
   <div
     id="ctx-menu"
-    class="fixed bg-[var(--color-bg-surface)] border border-[var(--border-color-default)] rounded-[var(--radius-md)] min-w-[160px] max-w-[260px] py-1 z-[9999] box-border text-[var(--text-sm)] shadow-md font-[var(--font-sans)] text-[var(--color-text-default)] m-0 scale-90 origin-top-left"
+    class={menuPanelClass}
     style="top: {y}px; left: {x}px;"
     role="menu"
     tabindex="-1"
   >
     <button 
-      class="w-full flex items-center justify-between bg-transparent border-0 text-[var(--color-text-default)] px-3 py-2 m-0 font-inherit cursor-pointer rounded-[var(--radius-sm)] whitespace-nowrap leading-[1.3] gap-3 outline-none shadow-none relative hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-default)] active:bg-[color-mix(in_srgb,var(--color-primary)_12%,var(--color-bg-hover)_88%)] active:text-[var(--color-text-default)] transition-colors duration-150"
+      class={itemClass}
       onclick={(e) => {
         e.stopPropagation();
         doUndo();
       }}
       title={L.hotkeys.undo}
     >
-      <div class="flex items-center gap-2.5">
+      <div class={itemContentClass}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -161,14 +167,14 @@
     </button>
 
     <button 
-      class="w-full flex items-center justify-between bg-transparent border-0 text-[var(--color-text-default)] px-3 py-2 m-0 font-inherit cursor-pointer rounded-[var(--radius-sm)] whitespace-nowrap leading-[1.3] gap-3 outline-none shadow-none relative hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-default)] active:bg-[color-mix(in_srgb,var(--color-primary)_12%,var(--color-bg-hover)_88%)] active:text-[var(--color-text-default)] transition-colors duration-150"
+      class={itemClass}
       onclick={(e) => {
         e.stopPropagation();
         doRedo();
       }}
       title={L.hotkeys.redo}
     >
-      <div class="flex items-center gap-2.5">
+      <div class={itemContentClass}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -191,14 +197,14 @@
     </button>
 
     <button 
-      class="w-full flex items-center justify-between bg-transparent border-0 text-[var(--color-text-default)] px-3 py-2 m-0 font-inherit cursor-pointer rounded-[var(--radius-sm)] whitespace-nowrap leading-[1.3] gap-3 outline-none shadow-none relative hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-default)] active:bg-[color-mix(in_srgb,var(--color-primary)_12%,var(--color-bg-hover)_88%)] active:text-[var(--color-text-default)] transition-colors duration-150"
+      class={itemClass}
       onclick={(e) => {
         e.stopPropagation();
         doCopy();
       }}
       title={L.hotkeys.copy}
     >
-      <div class="flex items-center gap-2.5">
+      <div class={itemContentClass}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -221,14 +227,14 @@
     </button>
 
     <button 
-      class="w-full flex items-center justify-between bg-transparent border-0 text-[var(--color-text-default)] px-3 py-2 m-0 font-inherit cursor-pointer rounded-[var(--radius-sm)] whitespace-nowrap leading-[1.3] gap-3 outline-none shadow-none relative hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-default)] active:bg-[color-mix(in_srgb,var(--color-primary)_12%,var(--color-bg-hover)_88%)] active:text-[var(--color-text-default)] transition-colors duration-150"
+      class={itemClass}
       onclick={(e) => {
         e.stopPropagation();
         doCut();
       }}
       title={L.hotkeys.cut}
     >
-      <div class="flex items-center gap-2.5">
+      <div class={itemContentClass}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -254,14 +260,14 @@
     </button>
 
     <button 
-      class="w-full flex items-center justify-between bg-transparent border-0 text-[var(--color-text-default)] px-3 py-2 m-0 font-inherit cursor-pointer rounded-[var(--radius-sm)] whitespace-nowrap leading-[1.3] gap-3 outline-none shadow-none relative hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-default)] active:bg-[color-mix(in_srgb,var(--color-primary)_12%,var(--color-bg-hover)_88%)] active:text-[var(--color-text-default)] transition-colors duration-150"
+      class={itemClass}
       onclick={(e) => {
         e.stopPropagation();
         doPaste();
       }}
       title={L.hotkeys.paste}
     >
-      <div class="flex items-center gap-2.5">
+      <div class={itemContentClass}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -287,14 +293,14 @@
     </button>
 
     <button 
-      class="w-full flex items-center justify-between bg-transparent border-0 text-[var(--color-text-default)] px-3 py-2 m-0 font-inherit cursor-pointer rounded-[var(--radius-sm)] whitespace-nowrap leading-[1.3] gap-3 outline-none shadow-none relative hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-default)] active:bg-[color-mix(in_srgb,var(--color-primary)_12%,var(--color-bg-hover)_88%)] active:text-[var(--color-text-default)] transition-colors duration-150"
+      class={itemClass}
       onclick={(e) => {
         e.stopPropagation();
         doDelete();
       }}
       title={L.hotkeys.delete}
     >
-      <div class="flex items-center gap-2.5">
+      <div class={itemContentClass}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"

package/dist/lib/Dialog.svelte

@@ -98,7 +98,7 @@
   }
 
   const panelBase =
-    "fusion-dialog bg-[var(--color-bg-surface)] rounded-[var(--radius-lg)] shadow-lg min-w-80 max-w-md w-full border border-[var(--border-color-default)]";
+    "fusion-dialog bg-[var(--color-bg-surface)] rounded-[var(--radius-lg)] shadow-[0_8px_24px_var(--shadow-color)] min-w-0 max-w-[min(100%,28rem)] max-h-[calc(100svh-var(--spacing-lg)*2)] overflow-auto w-full border border-[var(--border-color-default)]";
 
   const paddingBySize: Record<SizeKey, string> = {
     xs: "p-[var(--spacing-sm)]",
@@ -164,7 +164,7 @@
 {#if open}
   {#if modal}
     <div
-      class="fixed inset-0 z-[var(--z-modal)] bg-oklch(0_0_0/var(--opacity-overlay)) flex items-center justify-center p-4"
+      class="fixed inset-0 z-[var(--z-modal)] bg-[oklch(0_0_0/var(--opacity-overlay))] flex items-center justify-center p-[var(--spacing-md)]"
       role="presentation"
       tabindex="-1"
       onkeydown={handleKeydown}
@@ -195,7 +195,7 @@
     </div>
   {:else}
     <div
-      class="fixed top-4 right-4 z-[var(--z-modal)]"
+      class="fixed top-[var(--spacing-md)] right-[var(--spacing-md)] z-[var(--z-modal)] max-w-[calc(100vw-var(--spacing-md)*2)]"
       role="dialog"
       aria-modal="false"
       aria-label={title}

package/dist/lib/Field.svelte

@@ -86,7 +86,7 @@
   }: Props = $props();
 
   const base =
-    "w-full outline-none 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)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed";
+    "w-full outline-none 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)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed [@media(pointer:coarse)]:min-h-11";
 
   const sizes: Record<SizeKey, string> = {
     xs: "px-2 h-6",

package/dist/lib/FilePicker.svelte

@@ -18,6 +18,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)
@@ -30,7 +34,7 @@
    *
    * @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.
    */
@@ -47,6 +51,7 @@
     clearable?: boolean;
     placeholder?: string;
     value?: FileList | null;
+    maxBytes?: number;
     onFilesSelected?: (files: FileList | null) => void;
     onError?: (error: string) => void;
     class?: string;
@@ -60,7 +65,9 @@
     clearable = true,
     placeholder,
     value = $bindable<FileList | null>(null),
+    maxBytes = Number.POSITIVE_INFINITY,
     onFilesSelected,
+    onError,
     class: externalClass = "",
     ...rest
   }: Props = $props();
@@ -97,11 +104,7 @@
 
   function handleFileChange(event: Event) {
     const target = event.target as HTMLInputElement;
-    const files = target.files;
-    value = files;
-    if (files && files.length > 0) {
-      onFilesSelected?.(files);
-    }
+    selectFiles(target.files);
     if (inputEl) {
       inputEl.value = "";
     }
@@ -111,11 +114,7 @@
     event.preventDefault();
     isDragOver = false;
     if (disabled) return;
-    const files = event.dataTransfer?.files;
-    value = files || null;
-    if (files && files.length > 0) {
-      onFilesSelected?.(files);
-    }
+    selectFiles(event.dataTransfer?.files ?? null);
     if (inputEl) {
       inputEl.value = "";
     }
@@ -153,6 +152,62 @@
     }
     onFilesSelected?.(null);
   }
+
+  function selectFiles(files: FileList | null) {
+    const acceptedFiles = filterFiles(files);
+    value = acceptedFiles;
+    if (acceptedFiles && acceptedFiles.length > 0) {
+      onFilesSelected?.(acceptedFiles);
+    }
+  }
+
+  function filterFiles(files: FileList | null) {
+    if (!files || files.length === 0) return null;
+
+    const selected = Array.from(files);
+    const accepted = selected.filter(isAllowedFile);
+
+    if (accepted.length !== selected.length) {
+      onError?.("Some files were rejected by type or size constraints.");
+    }
+
+    if (accepted.length === 0) return null;
+    if (accepted.length === selected.length) return files;
+
+    return toFileList(accepted);
+  }
+
+  function isAllowedFile(file: File) {
+    if (Number.isFinite(maxBytes) && file.size > maxBytes) return false;
+    return matchesAccept(file, accept);
+  }
+
+  function matchesAccept(file: File, acceptValue: string) {
+    const rules = acceptValue
+      .split(",")
+      .map((rule) => rule.trim().toLowerCase())
+      .filter(Boolean);
+
+    if (rules.length === 0 || rules.includes("*/*")) return true;
+
+    const fileName = file.name.toLowerCase();
+    const fileType = file.type.toLowerCase();
+
+    return rules.some((rule) => {
+      if (rule.startsWith(".")) return fileName.endsWith(rule);
+      if (rule.endsWith("/*")) return fileType.startsWith(rule.slice(0, -1));
+      return fileType === rule;
+    });
+  }
+
+  function toFileList(files: File[]) {
+    if (typeof DataTransfer === "undefined") return null;
+    const transfer = new DataTransfer();
+    for (const file of files) {
+      transfer.items.add(file);
+    }
+    return transfer.files;
+  }
 </script>
 
 <div class={pickerClass} {...rest}>

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)
@@ -28,7 +32,7 @@
    *
    * @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.
    */
@@ -41,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;