svelte-comp 1.3.3 → 1.3.6

package/dist/lib/Splitter.svelte

@@ -1,150 +1,159 @@
-<!-- src/lib/Splitter.svelte -->
-<script lang="ts">
-  /**
-   * @component Splitter
-   * @description Resizable split panel container with horizontal or vertical orientation.
-   *
-   * @prop direction {'horizontal' | 'vertical'} - Split orientation
-   * @options horizontal|vertical
-   * @default horizontal
-   *
-   * @prop initialSize {number} - Initial size of the first panel as percentage
-   * @default 30
-   *
-   * @prop dividerSize {number} - Width/height of the divider handle in pixels
-   * @default 4
-   *
-   * @prop minSize {number} - Minimum size of the first panel as percentage
-   * @default 10
-   *
-   * @prop maxSize {number} - Maximum size of the first panel as percentage
-   * @default 90
-   *
-   * @prop first {Snippet} - Content for the first panel
-   *
-   * @prop second {Snippet} - Content for the second panel
-   *
-   * @note Uses pointer events for smooth dragging with proper event delegation
-   * @note Responsive - automatically adjusts to container resize
-   * @note Accessible with proper cursor hints and hover states
-   * @note No wrapper elements - panels render directly for clean DOM structure
-   * @note Supports any content type through snippet rendering
-   */
-
-  import type { Snippet } from "svelte";
-
-  type Props = {
-    direction?: "horizontal" | "vertical";
-    initialSize?: number;
-    dividerSize?: number;
-    minSize?: number;
-    maxSize?: number;
-    first?: Snippet;
-    second?: Snippet;
-  };
-
-  let {
-    direction = "horizontal",
-    initialSize = 30,
-    dividerSize = 4,
-    minSize = 10,
-    maxSize = 90,
-    first,
-    second,
-  }: Props = $props();
-
-  let container: HTMLElement;
-
-  let size = $derived(initialSize);
-  let isDragging = $state(false);
-  let startSize = 0;
-  let startPos = 0;
-  let containerSize = 0;
-
-  function getContainerSize(): number {
-    if (!container) return 0;
-    return direction === "horizontal"
-      ? container.offsetWidth
-      : container.offsetHeight;
-  }
-
-  function startDrag(e: PointerEvent): void {
-    isDragging = true;
-    startSize = size;
-    startPos = direction === "horizontal" ? e.clientX : e.clientY;
-    containerSize = getContainerSize();
-
-    document.addEventListener("pointermove", onDrag);
-    document.addEventListener("pointerup", stopDrag);
-    document.addEventListener("pointercancel", stopDrag);
-
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  function onDrag(e: PointerEvent): void {
-    if (!isDragging) return;
-
-    const currentPos = direction === "horizontal" ? e.clientX : e.clientY;
-    const delta = currentPos - startPos;
-    const deltaPercent = (delta / containerSize) * 100;
-    const newSize = startSize + deltaPercent;
-
-    size = Math.max(minSize, Math.min(maxSize, newSize));
-
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  function stopDrag(): void {
-    isDragging = false;
-    document.removeEventListener("pointermove", onDrag);
-    document.removeEventListener("pointerup", stopDrag);
-    document.removeEventListener("pointercancel", stopDrag);
-  }
-
-  $effect(() => {
-    const onResize = () => {
-      containerSize = getContainerSize();
-    };
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  });
-</script>
-
-<div
-  bind:this={container}
-  class="w-full h-full overflow-hidden"
-  class:flex={direction === "horizontal"}
-  class:flex-col={direction === "vertical"}
->
-  {#if direction === "horizontal"}
-    <div class="overflow-auto min-w-0 min-h-0" style="width: {size}%">
-      {@render first?.()}
-    </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"
-      onpointerdown={startDrag}
-    ></div>
-
-    <div class="overflow-auto min-w-0 min-h-0 flex-1">
-      {@render second?.()}
-    </div>
-  {:else}
-    <div class="overflow-auto min-w-0 min-h-0" style="height: {size}%">
-      {@render first?.()}
-    </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"
-      onpointerdown={startDrag}
-    ></div>
-
-    <div class="overflow-auto min-w-0 min-h-0" style="height: calc(100% - {size}% - {dividerSize}px)">
-      {@render second?.()}
-    </div>
-  {/if}
-</div>
+<!-- src/lib/Splitter.svelte -->
+<script lang="ts">
+  /**
+   * @component Splitter
+   * @description Resizable split panel container with horizontal or vertical orientation.
+   *
+   * @prop direction {'horizontal' | 'vertical'} - Split orientation
+   * @options horizontal|vertical
+   * @default horizontal
+   *
+   * @prop initialSize {number} - Initial size of the first panel as percentage
+   * @default 30
+   *
+   * @prop dividerSize {number} - Width/height of the divider handle in pixels
+   * @default 4
+   *
+   * @prop minSize {number} - Minimum size of the first panel as percentage
+   * @default 10
+   *
+   * @prop maxSize {number} - Maximum size of the first panel as percentage
+   * @default 90
+   *
+   * @prop first {Snippet} - Content for the first panel
+   *
+   * @prop second {Snippet} - Content for the second panel
+   *
+   * @note Uses pointer events for smooth dragging with proper event delegation
+   * @note Responsive - automatically adjusts to container resize
+   * @note Accessible with proper cursor hints and hover states
+   * @note No wrapper elements - panels render directly for clean DOM structure
+   * @note Supports any content type through snippet rendering
+   */
+
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    direction?: "horizontal" | "vertical";
+    initialSize?: number;
+    dividerSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    first?: Snippet;
+    second?: Snippet;
+  };
+
+  let {
+    direction = "horizontal",
+    initialSize = 30,
+    dividerSize = 4,
+    minSize = 10,
+    maxSize = 90,
+    first,
+    second,
+  }: Props = $props();
+
+  let container: HTMLElement;
+
+  let size = $derived(initialSize);
+  let isDragging = $state(false);
+  let startSize = 0;
+  let startPos = 0;
+  let containerSize = 0;
+
+  function getContainerSize(): number {
+    if (!container) return 0;
+    return direction === "horizontal"
+      ? container.offsetWidth
+      : container.offsetHeight;
+  }
+
+  function startDrag(e: PointerEvent): void {
+    isDragging = true;
+    startSize = size;
+    startPos = direction === "horizontal" ? e.clientX : e.clientY;
+    containerSize = getContainerSize();
+
+    document.addEventListener("pointermove", onDrag);
+    document.addEventListener("pointerup", stopDrag);
+    document.addEventListener("pointercancel", stopDrag);
+
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  function onDrag(e: PointerEvent): void {
+    if (!isDragging || containerSize <= 0) return;
+
+    const currentPos = direction === "horizontal" ? e.clientX : e.clientY;
+    const delta = currentPos - startPos;
+    const deltaPercent = (delta / containerSize) * 100;
+    const newSize = startSize + deltaPercent;
+
+    size = Math.max(minSize, Math.min(maxSize, newSize));
+
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  function stopDrag(): void {
+    isDragging = false;
+    document.removeEventListener("pointermove", onDrag);
+    document.removeEventListener("pointerup", stopDrag);
+    document.removeEventListener("pointercancel", stopDrag);
+  }
+
+  $effect(() => {
+    const onResize = () => {
+      containerSize = getContainerSize();
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  });
+</script>
+
+<div
+  bind:this={container}
+  class="w-full h-full overflow-hidden"
+  class:flex={direction === "horizontal"}
+  class:flex-col={direction === "vertical"}
+>
+  {#if direction === "horizontal"}
+    <div class="overflow-auto min-w-0 min-h-0" style="width: {size}%">
+      {@render first?.()}
+    </div>
+
+    <div
+      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>
+
+    <div class="overflow-auto min-w-0 min-h-0 flex-1">
+      {@render second?.()}
+    </div>
+  {:else}
+    <div class="overflow-auto min-w-0 min-h-0" style="height: {size}%">
+      {@render first?.()}
+    </div>
+
+    <div
+      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)"
+    >
+      {@render second?.()}
+    </div>
+  {/if}
+</div>

package/dist/lib/Switch.svelte

@@ -1,167 +1,168 @@
-<!-- src/lib/Switch.svelte -->
-<script lang="ts">
-  /**
-   * @component Switch
-   * @description A compact toggle switch component built on top of a native `<input type="checkbox">`. Supports optional labels around the control and works naturally with `bind:checked`.
-   *
-   * @prop sz {SizeKey} - Size preset for the control
-   * @options xs|sm|md|lg|xl
-   * @default md
-   *
-   * @prop checked {boolean} - Current state (bindable)
-   * @default false
-   *
-   * @prop leftLabel {string} - Optional label rendered on the left side
-   *
-   * @prop rightLabel {string} - Optional label rendered on the right side
-   *
-   * @prop topLabel {string} - Optional label placed above the switch
-   *
-   * @prop onChange {(v: boolean) => void} - Fired on toggle with the new value
-   *
-   * @prop class {string} - External wrapper classes
-   * @default ""
-   *
-   * @note Built over a real checkbox so browser accessibility comes for free: keyboard (Space/Enter), focus ring, and screen reader semantics.
-   * @note Labels do not affect the actual checkbox hitbox, but the whole area is clickable if wrapped correctly.
-   * @note Size preset adjusts track width, knob size, and spacing.
-   * @note Reflects `disabled` by dimming visuals and removing pointer events.
-   * @note The component keeps no internal state besides the bound `checked` value, so it's predictable in forms and controlled UI.
-   */
-  import type { HTMLInputAttributes } from "svelte/elements";
-  import type { SizeKey } from "./types";
-  import { TEXT } from "./types";
-  import { cx, uid } from "../utils";
-
-  type Props = HTMLInputAttributes & {
-    sz?: SizeKey;
-    checked?: boolean;
-    leftLabel?: string;
-    rightLabel?: string;
-    topLabel?: string;
-    onChange?: (v: boolean) => void;
-    class?: string;
-  };
-
-  let {
-    sz = "md",
-    checked = $bindable(false),
-    leftLabel,
-    rightLabel,
-    topLabel,
-    onChange,
-    class: externalClass = "",
-    ...rest
-  }: Props = $props();
-
-  const inputId = $derived(rest.id ?? uid("sw-"));
-
-  const track = {
-    xs: "w-8 h-4",
-    sm: "w-10 h-5",
-    md: "w-12 h-6",
-    lg: "w-14 h-7",
-    xl: "w-16 h-8",
-  } as const;
-
-  const knob = {
-    xs: "h-[14px] w-[14px]",
-    sm: "h-[17px] w-[17px]",
-    md: "h-5 w-5",
-    lg: "h-6 w-6",
-    xl: "h-7 w-7",
-  } as const;
-
-  const pad = {
-    xs: "p-[1px]",
-    sm: "p-[1.5px]",
-    md: "p-[2px]",
-    lg: "p-[2px]",
-    xl: "p-[2px]",
-  } as const;
-
-  const isDisabled = $derived(
-    "disabled" in rest ? Boolean(rest.disabled) : false
-  );
-
-  function toggle() {
-    if (isDisabled) return;
-    checked = !checked;
-    onChange?.(checked);
-  }
-
-  const justifyClass = $derived(checked ? "justify-end" : "justify-start");
-
-  const trackClass = $derived(
-    cx(
-      "relative inline-flex items-center rounded-full border transition focus:outline-none focus:ring-2 focus:ring-[var(--border-color-focus)]",
-      track[sz],
-      pad[sz],
-      checked
-        ? "bg-[var(--color-bg-primary)] border-[var(--color-bg-primary)]"
-        : "bg-[var(--color-bg-muted)] border-[var(--border-color-default)]",
-      isDisabled
-        ? "opacity-[var(--opacity-disabled)] cursor-not-allowed"
-        : "cursor-pointer",
-      justifyClass
-    )
-  );
-
-  const rootClass = $derived(
-    cx("inline-flex flex-col items-center gap-1 select-none", externalClass)
-  );
-
-  const knobClass = $derived(
-    cx(
-      knob[sz],
-      "rounded-full bg-white border border-[var(--border-color-default)] shadow-sm"
-    )
-  );
-</script>
-
-<label class={rootClass} for={inputId}>
-  {#if topLabel}
-    <span class="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]}">
-        {leftLabel}
-      </span>
-    {/if}
-
-    <input
-      id={inputId}
-      type="checkbox"
-      {checked}
-      {...rest}
-      class="sr-only"
-      aria-checked={checked}
-      aria-invalid={rest["aria-invalid"] || undefined}
-      aria-describedby={rest["aria-describedby"]}
-      onchange={() => toggle()}
-    />
-
-    <button
-      type="button"
-      class={trackClass}
-      onclick={toggle}
-      aria-pressed={checked}
-      aria-label={typeof rest["aria-label"] === "string"
-        ? rest["aria-label"]
-        : "Switch"}
-      disabled={isDisabled}
-    >
-      <span class={knobClass}></span>
-    </button>
-
-    {#if rightLabel}
-      <span class="text-[var(--color-text-muted)] {TEXT[sz]}">
-        {rightLabel}
-      </span>
-    {/if}
-  </div>
-</label>
+<!-- src/lib/Switch.svelte -->
+<script lang="ts">
+  /**
+   * @component Switch
+   * @description A compact toggle switch component built on top of a native `<input type="checkbox">`. Supports optional labels around the control and works naturally with `bind:checked`.
+   *
+   * @prop sz {SizeKey} - Size preset for the control
+   * @options xs|sm|md|lg|xl
+   * @default md
+   *
+   * @prop checked {boolean} - Current state (bindable)
+   * @default false
+   *
+   * @prop leftLabel {string} - Optional label rendered on the left side
+   *
+   * @prop rightLabel {string} - Optional label rendered on the right side
+   *
+   * @prop topLabel {string} - Optional label placed above the switch
+   *
+   * @prop onChange {(v: boolean) => void} - Fired on toggle with the new value
+   *
+   * @prop class {string} - External wrapper classes
+   * @default ""
+   *
+   * @note Built over a real checkbox so browser accessibility comes for free: keyboard (Space/Enter), focus ring, and screen reader semantics.
+   * @note Labels do not affect the actual checkbox hitbox, but the whole area is clickable if wrapped correctly.
+   * @note Size preset adjusts track width, knob size, and spacing.
+   * @note Reflects `disabled` by dimming visuals and removing pointer events.
+   * @note The component keeps no internal state besides the bound `checked` value, so it's predictable in forms and controlled UI.
+   */
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { SizeKey } from "./types";
+  import { TEXT } from "./types";
+  import { cx, uid } from "../utils";
+
+  type Props = HTMLInputAttributes & {
+    sz?: SizeKey;
+    checked?: boolean;
+    leftLabel?: string;
+    rightLabel?: string;
+    topLabel?: string;
+    onChange?: (v: boolean) => void;
+    class?: string;
+  };
+
+  let {
+    sz = "md",
+    checked = $bindable(false),
+    leftLabel,
+    rightLabel,
+    topLabel,
+    onChange,
+    class: externalClass = "",
+    ...rest
+  }: Props = $props();
+
+  const inputId = $derived(rest.id ?? uid("sw-"));
+
+  const track = {
+    xs: "w-8 h-4",
+    sm: "w-10 h-5",
+    md: "w-12 h-6",
+    lg: "w-14 h-7",
+    xl: "w-16 h-8",
+  } as const;
+
+  const knob = {
+    xs: "h-[14px] w-[14px]",
+    sm: "h-[17px] w-[17px]",
+    md: "h-5 w-5",
+    lg: "h-6 w-6",
+    xl: "h-7 w-7",
+  } as const;
+
+  const pad = {
+    xs: "p-[1px]",
+    sm: "p-[1.5px]",
+    md: "p-[2px]",
+    lg: "p-[2px]",
+    xl: "p-[2px]",
+  } as const;
+
+  const isDisabled = $derived(
+    "disabled" in rest ? Boolean(rest.disabled) : false
+  );
+
+  function toggle() {
+    if (isDisabled) return;
+    checked = !checked;
+    onChange?.(checked);
+  }
+
+  const justifyClass = $derived(checked ? "justify-end" : "justify-start");
+
+  const trackClass = $derived(
+    cx(
+      "relative inline-flex items-center rounded-full border transition focus:outline-none focus:ring-2 focus:ring-[var(--border-color-focus)]",
+      track[sz],
+      pad[sz],
+      checked
+        ? "bg-[var(--color-bg-primary)] border-[var(--color-bg-primary)]"
+        : "bg-[var(--color-bg-muted)] border-[var(--border-color-default)]",
+      isDisabled
+        ? "opacity-[var(--opacity-disabled)] cursor-not-allowed"
+        : "cursor-pointer",
+      "[@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11",
+      justifyClass
+    )
+  );
+
+  const rootClass = $derived(
+    cx("inline-flex flex-col items-center gap-1 select-none", externalClass)
+  );
+
+  const knobClass = $derived(
+    cx(
+      knob[sz],
+      "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={cx("text-[var(--color-text-muted)]", TEXT[sz])}>
+      {topLabel}
+    </span>
+  {/if}
+
+  <div class="inline-flex items-center gap-2">
+    {#if leftLabel}
+      <span class={cx("text-[var(--color-text-muted)]", TEXT[sz])}>
+        {leftLabel}
+      </span>
+    {/if}
+
+    <input
+      id={inputId}
+      type="checkbox"
+      {checked}
+      {...rest}
+      class="sr-only"
+      aria-checked={checked}
+      aria-invalid={rest["aria-invalid"] || undefined}
+      aria-describedby={rest["aria-describedby"]}
+      onchange={() => toggle()}
+    />
+
+    <button
+      type="button"
+      class={trackClass}
+      onclick={toggle}
+      aria-pressed={checked}
+      aria-label={typeof rest["aria-label"] === "string"
+        ? rest["aria-label"]
+        : "Switch"}
+      disabled={isDisabled}
+    >
+      <span class={knobClass}></span>
+    </button>
+
+    {#if rightLabel}
+      <span class={cx("text-[var(--color-text-muted)]", TEXT[sz])}>
+        {rightLabel}
+      </span>
+    {/if}
+  </div>
+</label>