svelte-comp 1.2.7 → 1.3.5

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

package/dist/lib/TimePicker.svelte

@@ -34,10 +34,10 @@
    * @note No locale or date-formatting APIs are used internally
    */
   import type { HTMLAttributes } from "svelte/elements";
-  import Button from "./Button.svelte";
-  import Select from "./Select.svelte";
-  import { cx } from "../utils";
-  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
+  import Button from "./Button.svelte";
+  import Select from "./Select.svelte";
+  import { cx } from "../utils";
+  import { getComponentText, getLangContext, getLangKey } from "./lang-context";
 
   type Props = HTMLAttributes<HTMLDivElement> & {
     value?: string | null;
@@ -50,6 +50,7 @@
     onChange?: (value: string | null) => void;
     class?: string;
   };
+  type Period = "AM" | "PM";
 
   let {
     value = $bindable<string | null>(null),
@@ -64,22 +65,23 @@
     ...rest
   }: Props = $props();
 
-  const langCtx = getLangContext();
-  const langKey = $derived(getLangKey(langCtx));
-  const L = $derived(getComponentText("timePicker", langKey));
+  const langCtx = getLangContext();
+  const langKey = $derived(getLangKey(langCtx));
+  const L = $derived(getComponentText("timePicker", langKey));
 
   const labelFinal = $derived(label ?? L.text);
   const placeholderFinal = $derived(placeholder ?? L.placeholder);
 
   const pickerClass = $derived(cx("inline-block w-full", externalClass));
 
-  let timeSystem = $state(initialSystem);
+  let timeSystem = $state<"iso" | "english">("iso");
+  let didInitSystem = $state(false);
 
   let hour = $state("00");
   let minute = $state("00");
-  let period = $state<"AM" | "PM">("AM");
+  let period = $state<Period>("AM");
 
-  const hasValue = $derived(value != null);
+  const hasValue = $derived(value != null);
 
   const isoHours = Array.from({ length: 24 }, (_, i) => {
     const h = i.toString().padStart(2, "0");
@@ -91,7 +93,7 @@
     return { value: h, label: h };
   });
 
-  const periodOptions = [
+  const periodOptions: Array<{ value: Period; label: Period }> = [
     { value: "AM", label: "AM" },
     { value: "PM", label: "PM" },
   ];
@@ -109,35 +111,35 @@
     return arr;
   });
 
-  function normalize(x: string) {
-    return x.padStart(2, "0").slice(-2);
-  }
-
-  function toIsoHour(h: string, p: "AM" | "PM") {
-    const numeric = Number.parseInt(h, 10);
-    if (Number.isNaN(numeric)) return "00";
-    const base = numeric % 12;
-    const withPeriod = p === "PM" ? base + 12 : base;
-    return normalize(String(withPeriod));
-  }
-
-  function toEnglishHour(isoHour: string) {
-    const numeric = Number.parseInt(isoHour, 10);
-    if (Number.isNaN(numeric)) {
-      return { hour: "12", period: "AM" as const };
-    }
-    const periodValue = numeric >= 12 ? "PM" : "AM";
-    const normalized = numeric % 12 || 12;
-    return { hour: normalize(String(normalized)), period: periodValue };
-  }
-
-  function emit() {
-    const isoHour =
-      timeSystem === "english" ? toIsoHour(hour, period) : normalize(hour);
-    const v = `${isoHour}:${normalize(minute)}`;
-    value = v;
-    onChange?.(v);
-  }
+  function normalize(x: string) {
+    return x.padStart(2, "0").slice(-2);
+  }
+
+  function toIsoHour(h: string, p: "AM" | "PM") {
+    const numeric = Number.parseInt(h, 10);
+    if (Number.isNaN(numeric)) return "00";
+    const base = numeric % 12;
+    const withPeriod = p === "PM" ? base + 12 : base;
+    return normalize(String(withPeriod));
+  }
+
+  function toEnglishHour(isoHour: string): { hour: string; period: Period } {
+    const numeric = Number.parseInt(isoHour, 10);
+    if (Number.isNaN(numeric)) {
+      return { hour: "12", period: "AM" as const };
+    }
+    const periodValue: Period = numeric >= 12 ? "PM" : "AM";
+    const normalized = numeric % 12 || 12;
+    return { hour: normalize(String(normalized)), period: periodValue };
+  }
+
+  function emit() {
+    const isoHour =
+      timeSystem === "english" ? toIsoHour(hour, period) : normalize(hour);
+    const v = `${isoHour}:${normalize(minute)}`;
+    value = v;
+    onChange?.(v);
+  }
 
   function handleIsoHour(v: string) {
     hour = normalize(v);
@@ -159,22 +161,22 @@
     emit();
   }
 
-  function toggleSystem() {
-    if (disabled) return;
-
-    if (timeSystem === "iso") {
-      timeSystem = "english";
-      const mapped = toEnglishHour(hour);
-      hour = mapped.hour;
-      period = mapped.period;
-    } else {
-      timeSystem = "iso";
-      hour = toIsoHour(hour, period);
-      period = "AM";
-    }
-
-    emit();
-  }
+  function toggleSystem() {
+    if (disabled) return;
+
+    if (timeSystem === "iso") {
+      timeSystem = "english";
+      const mapped = toEnglishHour(hour);
+      hour = mapped.hour;
+      period = mapped.period;
+    } else {
+      timeSystem = "iso";
+      hour = toIsoHour(hour, period);
+      period = "AM";
+    }
+
+    emit();
+  }
 
   function clearSelection() {
     if (!clearable) return;
@@ -185,47 +187,53 @@
     onChange?.(null);
   }
 
-  const displayValue = $derived.by(() => {
-    if (!value) return "";
-    const [isoH, isoM] = value.split(":");
-    if (timeSystem === "english") {
-      const { hour: h, period: p } = toEnglishHour(isoH);
-      return `${h}:${normalize(isoM)} ${p}`;
-    }
-    return `${normalize(isoH)}:${normalize(isoM)}`;
-  });
-
-  $effect(() => {
-    if (value == null) return;
-
-    let raw = value;
-    let parsedPeriod: "AM" | "PM" | null = null;
-
-    if (raw.includes("AM") || raw.includes("PM")) {
-      parsedPeriod = raw.includes("PM") ? "PM" : "AM";
-      raw = raw.replace(" AM", "").replace(" PM", "");
-    }
-
-    const [h, m] = raw.split(":");
-    const isoHour = normalize(h);
-    const isoMinute = normalize(m);
-
-    if (timeSystem === "english") {
-      const mapped = parsedPeriod
-        ? { hour: normalize(h), period: parsedPeriod }
-        : toEnglishHour(isoHour);
-      hour = mapped.hour;
-      period = mapped.period;
-    } else {
-      hour = isoHour;
-      period = toEnglishHour(isoHour).period;
-    }
-    minute = isoMinute;
-  });
+  const displayValue = $derived.by(() => {
+    if (!value) return "";
+    const [isoH, isoM] = value.split(":");
+    if (timeSystem === "english") {
+      const { hour: h, period: p } = toEnglishHour(isoH);
+      return `${h}:${normalize(isoM)} ${p}`;
+    }
+    return `${normalize(isoH)}:${normalize(isoM)}`;
+  });
+
+  $effect(() => {
+    if (didInitSystem) return;
+    didInitSystem = true;
+    timeSystem = initialSystem;
+  });
+
+  $effect(() => {
+    if (value == null) return;
+
+    let raw = value;
+    let parsedPeriod: Period | null = null;
+
+    if (raw.includes("AM") || raw.includes("PM")) {
+      parsedPeriod = raw.includes("PM") ? "PM" : "AM";
+      raw = raw.replace(" AM", "").replace(" PM", "");
+    }
+
+    const [h, m] = raw.split(":");
+    const isoHour = normalize(h);
+    const isoMinute = normalize(m);
+
+    if (timeSystem === "english") {
+      const mapped = parsedPeriod
+        ? { hour: normalize(h), period: parsedPeriod }
+        : toEnglishHour(isoHour);
+      hour = mapped.hour;
+      period = mapped.period;
+    } else {
+      hour = isoHour;
+      period = toEnglishHour(isoHour).period;
+    }
+    minute = isoMinute;
+  });
 </script>
 
 <div class={pickerClass} {...rest}>
-  <div class="text-md font-medium mb-2 [color:var(--color-text-default)]">
+  <div class="text-md font-medium mb-2 [color:var(--color-text-default)]">
     {labelFinal}
   </div>
 
@@ -295,7 +303,7 @@
 
     <p class="text-sm font-semibold mt-1 [color:var(--color-text-default)]">
       {#if hasValue}
-        {displayValue}
+        {displayValue}
       {:else}
         {placeholderFinal}
       {/if}