svelte-comp 1.3.3 → 1.3.5

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,26 +165,26 @@
       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 pt-10" tabindex="-1">
+      <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)}
               {#if it.type === "section"}
-                <li class="px-3 pt-2 mt-3 text-[var(--color-text-muted)] text-[var(--text-xs)] lowercase tracking-wide opacity-70">
+          <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}
                 </li>
               {:else}
                 <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"
+              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);
@@ -201,7 +201,7 @@
       </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}
@@ -209,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/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

@@ -69,8 +69,8 @@
 
   const sizeClasses = $derived(
     size === "md"
-      ? "gap-3 px-4 py-3 rounded-[var(--radius-lg)]"
-      : "gap-2 px-3 py-1.5 rounded-[var(--radius-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");
@@ -78,20 +78,20 @@
   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 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 text-xs"
+      : "truncate [font-size:var(--text-xs)]"
   );
 
   const rootClass = $derived(
     cx(
       "flex items-center border border-[var(--border-color-default)]",
       sizeClasses,
-      !inline && "shadow-lg backdrop-blur-sm",
+      !inline && "shadow-[0_8px_16px_var(--shadow-color)] backdrop-blur-sm",
       variantClasses(variant),
       externalClass
     )

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]
     )
   );

package/dist/lib/Slider.svelte

@@ -172,7 +172,7 @@
     if (disabled) return;
     const span = max - min;
     const big = Math.max(step || 1, Math.round(span / 10));
-    let v = value;
+    let v: number;
 
     switch (e.key) {
       case "ArrowLeft":

package/dist/lib/Splitter.svelte

@@ -83,7 +83,7 @@
   }
 
   function onDrag(e: PointerEvent): void {
-    if (!isDragging) return;
+    if (!isDragging || containerSize <= 0) return;
 
     const currentPos = direction === "horizontal" ? e.clientX : e.clientY;
     const delta = currentPos - startPos;
@@ -124,8 +124,11 @@
     </div>
 
     <div
-      class="touch-none select-none z-10 cursor-col-resize bg-[var(--color-bg-muted)] hover:bg-[var(--color-bg-hover)] transition-colors"
-      style="width: {dividerSize}px"
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize handle"
+      class="touch-none select-none z-10 cursor-col-resize bg-[var(--color-bg-muted)] hover:bg-[var(--color-bg-hover)] transition-colors [@media(pointer:coarse)]:min-w-11"
+      style="width: {dividerSize}px; min-width: {dividerSize}px"
       onpointerdown={startDrag}
     ></div>
 
@@ -138,12 +141,18 @@
     </div>
 
     <div
-      class="touch-none select-none z-10 cursor-row-resize bg-[var(--color-bg-muted)] hover:bg-[var(--color-bg-hover)] transition-colors"
-      style="height: {dividerSize}px"
+      role="separator"
+      aria-orientation="horizontal"
+      aria-label="Resize handle"
+      class="touch-none select-none z-10 cursor-row-resize bg-[var(--color-bg-muted)] hover:bg-[var(--color-bg-hover)] transition-colors [@media(pointer:coarse)]:min-h-11"
+      style="height: {dividerSize}px; min-height: {dividerSize}px"
       onpointerdown={startDrag}
     ></div>
 
-    <div class="overflow-auto min-w-0 min-h-0" style="height: calc(100% - {size}% - {dividerSize}px)">
+    <div
+      class="overflow-auto min-w-0 min-h-0"
+      style="height: calc(100% - {size}% - {dividerSize}px)"
+    >
       {@render second?.()}
     </div>
   {/if}

package/dist/lib/Switch.svelte

@@ -103,6 +103,7 @@
       isDisabled
         ? "opacity-[var(--opacity-disabled)] cursor-not-allowed"
         : "cursor-pointer",
+      "[@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11",
       justifyClass
     )
   );
@@ -114,21 +115,21 @@
   const knobClass = $derived(
     cx(
       knob[sz],
-      "rounded-full bg-white border border-[var(--border-color-default)] shadow-sm"
+      "rounded-full bg-[var(--color-text-inverse,#fff)] border border-[var(--border-color-default)] shadow-[0_1px_2px_var(--shadow-color)]"
     )
   );
 </script>
 
 <label class={rootClass} for={inputId}>
   {#if topLabel}
-    <span class="text-[var(--color-text-muted)] {TEXT[sz]}">
+    <span class={cx("text-[var(--color-text-muted)]", TEXT[sz])}>
       {topLabel}
     </span>
   {/if}
 
   <div class="inline-flex items-center gap-2">
     {#if leftLabel}
-      <span class="text-[var(--color-text-muted)] {TEXT[sz]}">
+      <span class={cx("text-[var(--color-text-muted)]", TEXT[sz])}>
         {leftLabel}
       </span>
     {/if}
@@ -159,7 +160,7 @@
     </button>
 
     {#if rightLabel}
-      <span class="text-[var(--color-text-muted)] {TEXT[sz]}">
+      <span class={cx("text-[var(--color-text-muted)]", TEXT[sz])}>
         {rightLabel}
       </span>
     {/if}

package/dist/lib/Tabs.svelte

@@ -90,7 +90,7 @@
       0,
       enabled.findIndex((t) => t.id === activeTab)
     );
-    let next = idx;
+    let next: number;
 
     if (e.key === "ArrowRight") next = (idx + 1) % enabled.length;
     else if (e.key === "ArrowLeft")
@@ -115,27 +115,27 @@
   };
 
   const base =
-    "inline-flex items-center justify-center font-medium transition-colors duration-150 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus-visible:ring-offset-0 focus:outline-none disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed";
+    "inline-flex items-center justify-center font-medium transition-colors duration-[var(--transition-fast)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)] focus-visible:ring-offset-0 focus:outline-none disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed [@media(pointer:coarse)]:min-h-11";
 
   const variants = $derived({
     default: {
-      base: "border-b-2 border-transparent text-[var(--color-text-muted)]",
+      base: "border-b-2 border-transparent text-[var(--color-text-default)]",
       active:
         "bg-[var(--color-bg-secondary)] !text-[var(--color-text-default)] border-[var(--border-color-strong)]",
       hover:
         "hover:text-[var(--color-text-default)] hover:bg-[var(--color-bg-muted)]",
     },
     underline: {
-      base: "border-b-2 border-transparent text-[var(--color-text-muted)]",
+      base: "border-b-2 border-transparent text-[var(--color-text-default)]",
       active:
         "border-[var(--border-color-focus)] !text-[var(--color-text-default)]",
       hover:
         "hover:text-[var(--color-text-default)] hover:border-[var(--border-color-strong)]",
     },
     pills: {
-      base: "text-[var(--color-text-muted)] border border-transparent font-medium",
+      base: "text-[var(--color-text-default)] border border-transparent font-medium",
       active:
-        "bg-[var(--color-bg-primary)] text-white border-[var(--color-bg-primary)]",
+        "bg-[var(--color-bg-primary)] text-[var(--color-text-default)] border-[var(--color-bg-primary)] font-[var(--font-weight-semibold)]",
       hover:
         "hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-text-default)]",
     },

package/dist/lib/ThemeToggle.svelte

@@ -48,6 +48,7 @@
     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
+    [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11
     disabled:opacity-[var(--opacity-disabled)]
     disabled:cursor-not-allowed
     disabled:brightness-100