svelte-comp 1.0.9 → 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

@@ -188,4 +188,4 @@
       }
     }
   }
-</style>
+</style>

package/dist/lib/Select.svelte

@@ -1,4 +1,4 @@
-<!-- src/lib/Select.svelte -->
+<!-- src/lib/Select.svelte -->
 <script lang="ts">
   /**
    * @component Select
@@ -167,6 +167,8 @@
     `position:fixed;top:${menuTop}px;left:${menuLeft}px;min-width:${menuWidth}px;max-height:${menuMaxHeight}px;`
   );
 
+  const selectedOption = $derived(options.find((o) => o.value === value));
+
   $effect(() => {
     const currentTriggerEl = triggerEl;
     const currentListEl = listEl;
@@ -409,14 +411,25 @@
       onkeydown={onTriggerKeydown}
     >
       <span class="min-w-0 grow truncate">
-        {#if value}
-          {options.find((o) => o.value === value)?.label}
+        {#if selectedOption}
+          <span class="inline-flex items-center gap-2 min-w-0">
+            {#if selectedOption.swatch}
+              <span
+                aria-hidden="true"
+                class="block w-3 h-3 rounded-[var(--radius-xs)] border border-[var(--border-color-default)] shadow-sm shrink-0"
+                style={`background:${selectedOption.swatch}`}
+              ></span>
+            {/if}
+            <span class="truncate">{selectedOption.label}</span>
+          </span>
         {:else}
           <span class="[color:var(--color-text-muted)]">{placeholder}</span>
         {/if}
       </span>
       <span
-        class={cx("pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 [color:var(--color-text-default)]")}
+        class={cx(
+          "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 [color:var(--color-text-default)]"
+        )}
       >
         <svg
           class={iconsSizes[sz]}
@@ -470,13 +483,22 @@
           <button
             type="button"
             tabindex="0"
-            class={cx("w-full text-left focus:outline-[3px] focus:outline-offset-3 focus:outline-[var(--border-color-focus)] rounded")}
+            class={cx(
+              "w-full text-left focus:outline-[3px] focus:outline-offset-3 focus:outline-[var(--border-color-focus)] rounded flex items-center gap-2"
+            )}
             disabled={opt.disabled}
             onclick={() => choose(i)}
             onfocus={() => (highlighted = i)}
             onmouseenter={() => (highlighted = i)}
           >
-            {opt.label}
+            {#if opt.swatch}
+              <span
+                aria-hidden="true"
+                class="block w-3 h-3 rounded-[var(--radius-xs)] border border-[var(--border-color-default)] shadow-sm shrink-0"
+                style={`background:${opt.swatch}`}
+              ></span>
+            {/if}
+            <span class="truncate">{opt.label}</span>
           </button>
         </li>
       {/each}

package/dist/lib/Splitter.svelte

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

package/dist/lib/Table.svelte

@@ -203,7 +203,7 @@
     String(col.key ?? idx);
 </script>
 
-<div class={wrapperClass}>
+<div class={wrapperClass} tabindex="-1">
   <table class={tableClass}>
     <thead class={variantStyles.header}>
       {#if currentVariant !== "noTitle" && currentVariant !== "list"}

package/dist/lib/Tabs.svelte

@@ -67,6 +67,14 @@
       activeTab = tabs[0].id;
     }
   });
+  
+  function focusActiveButton() {
+    if (!activeTab) return;
+    const btn = document.getElementById(
+      `tab-${activeTab}`
+    ) as HTMLButtonElement | null;
+    btn?.focus();
+  }
 
   function handleTabClick(tab: TabItem) {
     if (tab.disabled) return;
@@ -95,12 +103,7 @@
     const nextId = enabled[next].id;
     activeTab = nextId;
     onChange?.(nextId);
-    queueMicrotask(() => {
-      const btn = document.getElementById(
-        `tab-${nextId}`
-      ) as HTMLButtonElement | null;
-      btn?.focus();
-    });
+    queueMicrotask(focusActiveButton);
   }
 
   const sizes: Record<SizeKey, string> = {
@@ -112,7 +115,7 @@
   };
 
   const base =
-    "inline-flex items-center justify-center font-medium transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--border-color-focus)] focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed";
+    "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";
 
   const variants = $derived({
     default: {
@@ -160,6 +163,7 @@
     aria-orientation="horizontal"
     class={tablistClass}
     onkeydown={handleKeyDown}
+    onfocus={focusActiveButton}
   >
     {#each tabs as tab (tab.id)}
       <button
@@ -200,7 +204,7 @@
   <div
     id={`panel-${activeTab}`}
     role="tabpanel"
-    tabindex="0"
+    tabindex="-1"
     aria-labelledby={`tab-${activeTab}`}
     class="w-full min-w-0 relative z-0 border-t border-[var(--border-color-default)] bg-[var(--color-bg-surface)] p-[var(--spacing-md)] rounded-b-[var(--radius-sm)] shadow-[0_1px_2px_0_var(--shadow-color)]"
   >

package/dist/lib/index.d.ts

@@ -14,6 +14,7 @@ export { default as Hamburger } from "./Hamburger.svelte";
 export { default as Menu } from "./Menu.svelte";
 export { default as PaginatedCard } from "./PaginatedCard.svelte";
 export { default as Pagination } from "./Pagination.svelte";
+export { default as PrimaryColorSelect } from "./PrimaryColorSelect.svelte";
 export { default as ProgressBar } from "./ProgressBar.svelte";
 export { default as ProgressCircle } from "./ProgressCircle.svelte";
 export { default as Radio } from "./Radio.svelte";

package/dist/lib/index.js

@@ -15,6 +15,7 @@ export { default as Hamburger } from "./Hamburger.svelte";
 export { default as Menu } from "./Menu.svelte";
 export { default as PaginatedCard } from "./PaginatedCard.svelte";
 export { default as Pagination } from "./Pagination.svelte";
+export { default as PrimaryColorSelect } from "./PrimaryColorSelect.svelte";
 export { default as ProgressBar } from "./ProgressBar.svelte";
 export { default as ProgressCircle } from "./ProgressCircle.svelte";
 export { default as Radio } from "./Radio.svelte";

package/dist/lib/lang.d.ts

@@ -32,6 +32,9 @@ export declare const TEXTS: {
             readonly menu: {
                 readonly subtitle: "Menu with size options";
             };
+            readonly primaryColorSelect: {
+                readonly text: "Primary color";
+            };
             readonly timePicker: {
                 readonly text: "Choose time";
                 readonly placeholder: "No time selected";
@@ -78,6 +81,9 @@ export declare const TEXTS: {
             readonly menu: {
                 readonly subtitle: "Меню с опциями размеров";
             };
+            readonly primaryColorSelect: {
+                readonly text: "Основной цвет";
+            };
             readonly timePicker: {
                 readonly text: "Выбрать время";
                 readonly placeholder: "Время не выбрано";
@@ -124,6 +130,9 @@ export declare const TEXTS: {
             readonly menu: {
                 readonly subtitle: "Menú con opciones de tamaño";
             };
+            readonly primaryColorSelect: {
+                readonly text: "Color primario";
+            };
             readonly timePicker: {
                 readonly text: "Elegir hora";
                 readonly placeholder: "Ninguna hora seleccionada";

package/dist/lib/lang.js

@@ -30,6 +30,7 @@ var enTexts = {
             totalSize: "Total size",
         },
         menu: { subtitle: "Menu with size options" },
+        primaryColorSelect: { text: "Primary color" },
         timePicker: {
             text: "Choose time",
             placeholder: "No time selected",
@@ -74,6 +75,7 @@ var ruTexts = {
             totalSize: "Общий размер",
         },
         menu: { subtitle: "Меню с опциями размеров" },
+        primaryColorSelect: { text: "Основной цвет" },
         timePicker: {
             text: "Выбрать время",
             placeholder: "Время не выбрано",
@@ -118,6 +120,7 @@ var esTexts = {
             totalSize: "Tamaño total",
         },
         menu: { subtitle: "Menú con opciones de tamaño" },
+        primaryColorSelect: { text: "Color primario" },
         timePicker: {
             text: "Elegir hora",
             placeholder: "Ninguna hora seleccionada",