svelte-comp 1.0.7 → 1.1.2

package/dist/lib/CodeView.svelte

@@ -48,6 +48,7 @@
   import "prismjs/components/prism-json";
   import "prismjs/components/prism-python";
   import "prismjs/themes/prism.css";
+  import { cx } from "../utils";
 
   type Props = {
     code?: string;
@@ -140,20 +141,27 @@
 </script>
 
 <div
-  class="w-full border border-[var(--border-color-default)] bg-[var(--color-bg-surface)] text-[var(--color-text-default)]"
+  class={cx(
+    "w-full border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]",
+    "text-[var(--color-text-default)]"
+  )}
 >
   {#if title}
     <div
-      class="px-3 py-1 bg-[var(--color-bg-muted)] font-semibold uppercase flex items-center justify-between {TEXT[
-        sz
-      ]}"
+      class={cx(
+        "px-3 py-1 bg-[var(--color-bg-muted)] font-semibold uppercase flex items-center justify-between",
+        TEXT[sz]
+      )}
     >
       <div>{title}</div>
 
       {#if showCopyButton}
         <button
           onclick={copyToClipboard}
-          class="px-3 py-0.5 text-xs rounded bg-[var(--color-primary)] text-white hover:opacity-[var(--opacity-hover)] transition"
+          class={cx(
+            "px-3 py-0.5 text-xs rounded bg-[var(--color-primary)] text-white 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}
         >
           {copied ? "Copied" : "Copy"}
@@ -166,9 +174,11 @@
     {#if showLineNumbers}
       <div
         bind:this={gutterEl}
-        class="select-none px-3 py-[12px] border-r border-[var(--border-color-default)]
-               text-[var(--color-text-muted)] text-right overflow-hidden
-               bg-[var(--color-bg-surface)] tabular-nums min-h-[180px] max-h-[480px]"
+        class={cx(
+          "select-none px-3 py-[12px] border-r border-[var(--border-color-default)]",
+          "text-[var(--color-text-muted)] text-right overflow-hidden",
+          "bg-[var(--color-bg-surface)] tabular-nums min-h-[180px] max-h-[480px]"
+        )}
       >
         {#each lines as _, i (i)}
           <div class={LINE_HEIGHT[sz]}>{i + 1}</div>
@@ -252,6 +262,14 @@
     box-sizing: border-box;
   }
 
+  .cv-input:focus {
+    outline: none;
+  }
+
+  .cv-input:focus-visible {
+    outline: none !important;
+  }
+
   /* Prism */
   .token.comment {
     color: oklch(0.937 0.019 256 / 0.45);

package/dist/lib/FilePicker.svelte

@@ -226,7 +226,7 @@
         {L.fileCount.replace("{n}", String(internalValue.length))}
 
         {#if multiple && internalValue.length > 1}
-          • {L.totalSize}: {(
+          • {L.totalSize}: {(
             Array.from(internalValue).reduce(
               (acc, file) => acc + file.size,
               0

package/dist/lib/Form.svelte

@@ -38,13 +38,13 @@
    * @prop compact {boolean} - Enables denser sizing across controls
    * @default false
    *
-   * @note Initial value for each field: `value[name]` в†’ `schema.default` в†’ `''` (or `false` for checkboxes).
+   * @note Initial value for each field: `value[name]` → `schema.default` → `''` (or `false` for checkboxes).
    * @note `validateOn='input'|'blur'|'submit'` controls when validators run; built-in checks: `required`, `number`, and `email` regex.
    * @note `when(form)` hides a field dynamically; hidden fields are skipped during validation.
    * @note `Select` options are coerced to strings for the underlying control; provide string values if you rely on strict equality.
    * @note Errors are rendered with stable `id`s and wired via `aria-describedby`; `invalid` flags are passed to inputs.
    * @note `expose` provides `{ reset, submit, validate, getData }`; `validate` returns `Promise<boolean>`.
-   * @note `compact` reduces control sizes (`xs→xs`, `sm→xs`, `md→sm`, `lg→md`, `xl→lg`) and centers labels where applicable.
+   * @note `compact` reduces control sizes (`xs→xs`, `sm→xs`, `md→sm`, `lg→md`, `xl→lg`) and centers labels where applicable.
    */
   import Field from "./Field.svelte";
   import Select from "./Select.svelte";

package/dist/lib/Hamburger.svelte

@@ -1,4 +1,4 @@
-<!-- src/lib/Hamburger.svelte -->
+<!-- src/lib/Hamburger.svelte -->
 <script lang="ts">
   /**
    * @component Hamburger
@@ -32,7 +32,7 @@
    * @note Clicking outside the panel or pressing `Escape` closes the drawer.
    * @note Focus moves to the first interactive element inside the panel, is trapped while open, and returns to the trigger on close.
    * @note In controlled mode (`pressed` is defined), state changes are requested via `onOpenChange(open)`.
-   * @note When `menuItems` is empty, a “No items” placeholder is shown.
+   * @note When `menuItems` is empty, a "No items" placeholder is shown.
    * @note The drawer uses `role=\"dialog\"` and `aria-modal=\"true\"`; the trigger reflects state via `aria-expanded`.
    */
   import type { Snippet } from "svelte";

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

@@ -30,7 +30,7 @@
    * @note Clicking outside the panel or pressing `Escape` closes the drawer.
    * @note Focus moves to the first interactive element inside the panel, is trapped while open, and returns to the trigger on close.
    * @note In controlled mode (`pressed` is defined), state changes are requested via `onOpenChange(open)`.
-   * @note When `menuItems` is empty, a “No items” placeholder is shown.
+   * @note When `menuItems` is empty, a "No items" placeholder is shown.
    * @note The drawer uses `role=\"dialog\"` and `aria-modal=\"true\"`; the trigger reflects state via `aria-expanded`.
    */
 import type { Snippet } from "svelte";

package/dist/lib/Menu.svelte

@@ -1,4 +1,4 @@
-<!-- src/lib/Menu.svelte -->
+<!-- src/lib/Menu.svelte -->
 <script lang="ts">
   /**
    * @component Menu
@@ -48,6 +48,7 @@
 
   // Refs for focus control
   let triggerRefs = $state<Record<string, HTMLButtonElement>>({});
+  let menuRefs = $state<Record<string, HTMLDivElement>>({});
   let itemRefs = $state<Record<string, HTMLButtonElement>>({});
   let subItemRefs = $state<Record<string, HTMLButtonElement>>({});
 
@@ -55,6 +56,7 @@
   let menuTop = $state(0);
   let menuLeft = $state(0);
 
+  let subMenuRefs = $state<Record<string, HTMLDivElement>>({});
   let subMenuTop = $state(0);
   let subMenuLeft = $state(0);
 
@@ -69,8 +71,10 @@
   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)]";
 
+  const subMenuGutter = 8;
+
   const topButtonBase =
-    "px-4 rounded-xs leading-none transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--border-color-focus)] focus-visible:outline-offset-2";
+    "px-4 rounded-xs leading-none transition-colors outline-none focus-visible:shadow-[inset_0_0_0_2px_var(--border-color-focus)]";
 
   const topButtonActive =
     "bg-[var(--color-bg-muted)] text-[var(--color-text-default)]";
@@ -78,10 +82,10 @@
     "hover:bg-[var(--color-bg-muted)] text-[var(--color-text-default)]";
 
   const menuStyle = $derived(
-    `position:fixed; top:${menuTop}px; left:${menuLeft}px; width:max-content;`
+    `position:fixed; top:${menuTop}px; left:${menuLeft}px; width:max-content; max-width:calc(100vw - 16px);`
   );
   const subMenuStyle = $derived(
-    `position:fixed; top:${subMenuTop}px; left:${subMenuLeft}px; width:max-content;`
+    `position:fixed; top:${subMenuTop}px; left:${subMenuLeft}px; width:max-content; max-width:calc(100vw - 16px);`
   );
 
   const textCls = $derived(TEXT[sz]);
@@ -136,16 +140,51 @@
   }
 
   // Positioning dropdown
-  function updateMenuPosition(triggerEl: HTMLElement) {
+  function updateMenuPosition(
+    triggerEl: HTMLElement,
+    menuEl?: HTMLElement | null
+  ) {
     const rect = triggerEl.getBoundingClientRect();
+    const menuWidth = Math.min(
+      menuEl?.getBoundingClientRect().width ?? rect.width,
+      window.innerWidth - 16
+    );
+    const spaceRight = window.innerWidth - rect.left;
+    const spaceLeft = rect.right;
+    const alignRight = spaceRight < menuWidth && spaceLeft > spaceRight;
+    const viewportLeft = window.scrollX;
+    const viewportRight = window.scrollX + window.innerWidth;
+
     menuTop = rect.bottom + window.scrollY;
-    menuLeft = rect.left + window.scrollX;
+    const targetLeft = alignRight
+      ? rect.right + window.scrollX - menuWidth
+      : rect.left + window.scrollX;
+    const maxLeft = viewportRight - menuWidth;
+    menuLeft = Math.max(viewportLeft, Math.min(targetLeft, maxLeft));
   }
 
-  function updateSubMenuPosition(parentItemEl: HTMLElement) {
+  function updateSubMenuPosition(
+    parentItemEl: HTMLElement,
+    subMenuEl?: HTMLElement | null
+  ) {
     const rect = parentItemEl.getBoundingClientRect();
+    const subRect = subMenuEl?.getBoundingClientRect();
+    const subWidth = Math.min(
+      subRect?.width ?? rect.width,
+      window.innerWidth - 16
+    );
+    const spaceRight = window.innerWidth - rect.right;
+    const spaceLeft = rect.left;
+    const shouldFlipLeft = spaceRight < subWidth && spaceLeft > spaceRight;
+
     subMenuTop = rect.top + window.scrollY;
-    subMenuLeft = rect.right + window.scrollX;
+    const viewportLeft = window.scrollX;
+    const viewportRight = window.scrollX + window.innerWidth;
+    const targetLeft = shouldFlipLeft
+      ? rect.left + window.scrollX - subWidth - subMenuGutter
+      : rect.right + window.scrollX + subMenuGutter;
+    const maxLeft = viewportRight - subWidth - subMenuGutter;
+    subMenuLeft = Math.max(viewportLeft, Math.min(targetLeft, maxLeft));
   }
 
   function firstActionIndex(actions: MenuAction[]) {
@@ -209,7 +248,7 @@
     activeIndex = firstIndex;
     const triggerEl = triggerRefs[menuItem.name];
     if (triggerEl) {
-      updateMenuPosition(triggerEl);
+      updateMenuPosition(triggerEl, menuRefs[menuItem.name]);
     }
     if (focusFirst && firstIndex !== -1) {
       focusMenuAction(menuItem, firstIndex);
@@ -221,7 +260,7 @@
     openSub = actionId(parentAction);
     const parentEl = itemRefs[actionId(parentAction)];
     if (parentEl) {
-      updateSubMenuPosition(parentEl);
+      updateSubMenuPosition(parentEl, subMenuRefs[actionId(parentAction)]);
     }
     const firstIndex = focusFirst ? firstActionIndex(parentAction.submenu) : -1;
     activeSubIndex = firstIndex;
@@ -352,10 +391,10 @@
     if (open) {
       const triggerEl = triggerRefs[open];
       if (triggerEl) {
-        updateMenuPosition(triggerEl);
+        updateMenuPosition(triggerEl, menuRefs[open]);
 
         const handleScrollResize = () => {
-          updateMenuPosition(triggerEl);
+          updateMenuPosition(triggerEl, menuRefs[open]);
         };
 
         window.addEventListener("scroll", handleScrollResize, true);
@@ -372,11 +411,12 @@
   $effect(() => {
     if (openSub) {
       const itemEl = itemRefs[openSub];
+      const subEl = subMenuRefs[openSub];
       if (itemEl) {
-        updateSubMenuPosition(itemEl);
+        updateSubMenuPosition(itemEl, subEl);
 
         const handleScrollResize = () => {
-          updateSubMenuPosition(itemEl);
+          updateSubMenuPosition(itemEl, subMenuRefs[openSub]);
         };
 
         window.addEventListener("scroll", handleScrollResize, true);
@@ -438,6 +478,7 @@
 
       <!-- Main Menu -->
       <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)] ",
           "border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]"
@@ -462,6 +503,7 @@
                 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)]",
+                  "focus-visible:shadow-[inset_0_0_0_2px_var(--border-color-focus)]",
                   textCls
                 )}
                 onmousedown={(e) => e.preventDefault()}
@@ -518,9 +560,10 @@
               <!-- Sub Menu -->
               {#if hasSubmenu(action) && openSub === actionId(action)}
                 <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)]",
-                    "border border-[var(--border-color-default)] bg-[var(--color-bg-surface)] ml-2"
+                    "border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]"
                   )}
                   style={subMenuStyle}
                   role="menu"
@@ -543,8 +586,7 @@
                           "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",
                           "hover:bg-[var(--color-bg-muted)] focus-visible:bg-[var(--color-bg-muted)]",
-                          "focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)]",
-                          "focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-surface)]",
+                          "focus-visible:shadow-[inset_0_0_0_2px_var(--border-color-focus)]",
                           "decoration-[var(--color-text-default)]",
                           textCls
                         )}

package/dist/lib/PaginatedCard.svelte

@@ -1,4 +1,4 @@
-<!-- src/lib/PaginatedCard.svelte -->
+<!-- src/lib/PaginatedCard.svelte -->
 <script lang="ts">
   /**
    * @component PaginatedCard

package/dist/lib/Pagination.svelte

@@ -13,7 +13,7 @@
    * @prop class {string} - Custom classes applied to the pagination wrapper
    * @default ""
    *
-   * @note Displays “Page X of Y” and numbered page buttons.
+   * @note Displays “Page X of Y” and numbered page buttons.
    * @note Prev/next buttons are disabled at the edges.
    * @note Shows up to 3 numbered buttons centered around the current page.
    * @note Uses `aria-current=\"page\"` on the active page for accessibility.

package/dist/lib/PrimaryColorSelect.svelte

@@ -0,0 +1,99 @@
+<!-- src/lib/PrimaryColorSelect.svelte -->
+<script lang="ts">
+  /**
+   * @component PrimaryColorSelect
+   * @description Theme primary-color selector built on top of Select. Provides a fixed palette,
+   * handles persistence, and updates the global <html> attribute.
+   *
+   * @prop sz {SizeKey} - Sizing preset passed directly to Select
+   * @options xs|sm|md|lg|xl
+   * @default sm
+   *
+   * @prop label {string} - Custom label text. Falls back to localized copy when omitted.
+   *
+   * @prop class {string} - Extra classes forwarded to the underlying Select component
+   * @default ""
+   *
+   * @note The palette is predefined internally (`{ value, label, swatch }`).
+   * @note Selected value is stored in localStorage under "primary".
+   * @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 { getContext } from "svelte";
+  import Select from "./Select.svelte";
+  import type { PrimaryKey, PaletteOption, SizeKey } from "./types";
+  import { TEXTS } from "./lang";
+
+  type Props = {
+    sz?: SizeKey;
+    label?: string;
+    class?: string;
+  };
+
+  let { sz = "sm", label, class: externalClass = "" }: Props = $props();
+
+  const langCtx =
+    getContext<{ value: keyof typeof TEXTS } | undefined>("lang") ?? null;
+  const langKey = $derived(langCtx?.value ?? "en");
+  const L = $derived(TEXTS[langKey].components.primaryColorSelect);
+
+  const labelFinal = $derived(label ?? L.text);
+
+  const palette: PaletteOption[] = [
+    {
+      value: "default",
+      label: "Indigo",
+      swatch: "oklch(62.3% 0.214 259.8deg)",
+    },
+    { value: "cyan", label: "Cyan", swatch: "oklch(71.5% 0.143 215.221)" },
+    { value: "red", label: "Red", swatch: "oklch(58% 0.24 30deg)" },
+    { value: "green", label: "Green", swatch: "oklch(65% 0.22 140deg)" },
+    { value: "yellow", label: "Yellow", swatch: "oklch(75% 0.18 90deg)" },
+    { value: "pink", label: "Pink", swatch: "oklch(70% 0.25 350deg)" },
+    { value: "orange", label: "Orange", swatch: "oklch(72% 0.22 60deg)" },
+    { value: "purple", label: "Purple", swatch: "oklch(55% 0.22 290deg)" },
+  ];
+
+  const paletteMap = palette.reduce<Record<PrimaryKey, PaletteOption>>(
+    (acc, option) => {
+      acc[option.value] = option;
+      return acc;
+    },
+    {} as Record<PrimaryKey, PaletteOption>
+  );
+
+  let selected = $state<PrimaryKey>("default");
+  let mounted = $state(false);
+
+  function isPrimaryKey(value: unknown): value is PrimaryKey {
+    return typeof value === "string" && value in paletteMap;
+  }
+
+  $effect(() => {
+    if (!mounted) {
+      const saved = localStorage.getItem("primary");
+      if (isPrimaryKey(saved)) {
+        selected = saved;
+      }
+      mounted = true;
+    }
+  });
+
+  $effect(() => {
+    if (mounted) {
+      document.documentElement.setAttribute("data-primary", selected);
+      localStorage.setItem("primary", selected);
+    }
+  });
+</script>
+
+<Select
+  {sz}
+  label={labelFinal}
+  options={palette}
+  value={selected}
+  onChange={(v) => {
+    if (isPrimaryKey(v)) selected = v;
+  }}
+  class={externalClass}
+/>

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

@@ -0,0 +1,9 @@
+import type { SizeKey } from "./types";
+type Props = {
+    sz?: SizeKey;
+    label?: string;
+    class?: string;
+};
+declare const PrimaryColorSelect: import("svelte").Component<Props, {}, "">;
+type PrimaryColorSelect = ReturnType<typeof PrimaryColorSelect>;
+export default PrimaryColorSelect;

package/dist/lib/ProgressCircle.svelte

@@ -0,0 +1,191 @@
+<!-- src/lib/ProgressCircle.svelte -->
+<script lang="ts">
+  /**
+   * @component ProgressCircle
+   * @description Circular progress indicator for visualizing completion or load state (0-100). Supports indeterminate mode.
+   * @prop value {number} - Current progress value
+   * @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 variant {ComponentVariant} - Color/style variant
+   * @options default|neutral|success|warning|error
+   * @default default
+   * @prop label {string} - Optional text shown in center
+   * @default ""
+   * @prop max {number} - Max progress value for normalization
+   * @default 100
+   * @prop class {string} - Extra wrapper classes
+   * @default ""
+   * @note Clamps value between 0-max
+   * @note Uses SVG stroke-dashoffset animation
+   * @note Accessible role=progressbar with aria-valuenow
+   * @note Works in both determinate/indeterminate modes
+   */
+  import type { HTMLAttributes } from "svelte/elements";
+  import { type SizeKey, type ComponentVariant, TEXT } from "./types";
+  import { cx, clamp } from "../utils";
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+    indeterminate?: boolean;
+    sz?: SizeKey;
+    variant?: ComponentVariant;
+    class?: string;
+    label?: string;
+    disabled?: boolean;
+  };
+
+  let {
+    value = 0,
+    indeterminate = false,
+    sz = "md",
+    variant = "default",
+    class: externalClass = "",
+    label = "",
+    disabled = false,
+    ...rest
+  }: Props = $props();
+
+  const sizes: Record<SizeKey, { diameter: number; stroke: number }> = {
+    xs: { diameter: 40, stroke: 4 },
+    sm: { diameter: 48, stroke: 5 },
+    md: { diameter: 56, stroke: 6 },
+    lg: { diameter: 64, stroke: 7 },
+    xl: { diameter: 72, stroke: 8 },
+  };
+
+  const pctValue = $derived(clamp(value, 0, 100));
+  const pctText = $derived(Math.round(pctValue));
+
+  const geometry = $derived(sizes[sz]);
+  const center = $derived(geometry.diameter / 2);
+  const radius = $derived(center - geometry.stroke / 2);
+  const circumference = $derived(2 * Math.PI * radius);
+
+  const dashOffset = $derived(((100 - pctValue) / 100) * circumference);
+  const dashArray = $derived(`${circumference} ${circumference}`);
+  const indeterminateDash = $derived(`${circumference * 0.3} ${circumference}`);
+
+  const strokeColor = $derived(
+    variant === "neutral"
+      ? "stroke-[var(--color-bg-secondary)]"
+      : "stroke-[var(--color-bg-primary)]"
+  );
+
+  const rootClass = $derived(
+    cx(
+      "inline-flex flex-col items-center gap-1 data-[disabled=true]:opacity-[var(--opacity-disabled)] data-[disabled=true]:cursor-not-allowed",
+      externalClass
+    )
+  );
+</script>
+
+<div
+  class={rootClass}
+  role="progressbar"
+  aria-valuemin="0"
+  aria-valuemax="100"
+  aria-valuenow={indeterminate ? undefined : pctText}
+  data-disabled={disabled ? "true" : undefined}
+  {...rest}
+>
+  {#if label}
+    <span class="text-[var(--color-text-muted)] select-none {TEXT[sz]}">
+      {label}
+    </span>
+  {/if}
+
+  <div
+    class="relative inline-flex items-center justify-center"
+    style={`width:${geometry.diameter}px;height:${geometry.diameter}px;`}
+  >
+    <svg
+      class="pc-svg"
+      viewBox={`0 0 ${geometry.diameter} ${geometry.diameter}`}
+      role="presentation"
+      aria-hidden="true"
+    >
+      <g class="pc-rot">
+        <circle
+          class="pc-track"
+          cx={center}
+          cy={center}
+          r={radius}
+          stroke-width={geometry.stroke}
+        ></circle>
+
+        {#if indeterminate}
+          <circle
+            class={cx("pc-bar pc-indet", strokeColor)}
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke-width={geometry.stroke}
+            stroke-dasharray={indeterminateDash}
+          ></circle>
+        {:else}
+          <circle
+            class={cx("pc-bar", strokeColor)}
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke-width={geometry.stroke}
+            stroke-dasharray={dashArray}
+            stroke-dashoffset={dashOffset}
+          ></circle>
+        {/if}
+      </g>
+    </svg>
+
+    {#if !indeterminate}
+      <div
+        class="absolute inset-0 flex items-center justify-center text-[var(--color-text-muted)] font-medium select-none {TEXT[
+          sz
+        ]}"
+      >
+        {pctText}%
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .pc-svg {
+    width: 100%;
+    height: 100%;
+  }
+  .pc-rot {
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+  .pc-track {
+    fill: none;
+    stroke: var(--border-color-default);
+  }
+  .pc-bar {
+    fill: none;
+    stroke-linecap: round;
+    transition:
+      stroke-dashoffset 0.25s ease,
+      stroke 0.2s ease;
+    transform-origin: center;
+  }
+  .pc-indet {
+    animation: pc-spin 1.2s linear infinite;
+  }
+
+  :global {
+    @keyframes pc-spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,39 @@
+/**
+   * @component ProgressCircle
+   * @description Circular progress indicator for visualizing completion or load state (0-100). Supports indeterminate mode.
+   * @prop value {number} - Current progress value
+   * @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 variant {ComponentVariant} - Color/style variant
+   * @options default|neutral|success|warning|error
+   * @default default
+   * @prop label {string} - Optional text shown in center
+   * @default ""
+   * @prop max {number} - Max progress value for normalization
+   * @default 100
+   * @prop class {string} - Extra wrapper classes
+   * @default ""
+   * @note Clamps value between 0-max
+   * @note Uses SVG stroke-dashoffset animation
+   * @note Accessible role=progressbar with aria-valuenow
+   * @note Works in both determinate/indeterminate modes
+   */
+import type { HTMLAttributes } from "svelte/elements";
+import { type SizeKey, type ComponentVariant } from "./types";
+type Props = HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+    indeterminate?: boolean;
+    sz?: SizeKey;
+    variant?: ComponentVariant;
+    class?: string;
+    label?: string;
+    disabled?: boolean;
+};
+declare const ProgressCircle: import("svelte").Component<Props, {}, "">;
+type ProgressCircle = ReturnType<typeof ProgressCircle>;
+export default ProgressCircle;