svelte-comp 1.0.7 → 1.1.2

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,7 +14,9 @@ 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";
 export { default as Select } from "./Select.svelte";
 export { default as Slider } from "./Slider.svelte";

package/dist/lib/index.js

@@ -15,7 +15,9 @@ 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";
 export { default as Select } from "./Select.svelte";
 export { default as Slider } from "./Slider.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",

package/dist/lib/types/index.d.ts

@@ -83,6 +83,7 @@ export type SelectOption = {
     label: string;
     value: string;
     disabled?: boolean;
+    swatch?: string;
 };
 export type Position = "top" | "bottom" | "left" | "right";
 export type ToastVariant = "success" | "danger" | "warning" | "info";
@@ -102,3 +103,9 @@ export type FieldType = {
     invalid?: boolean;
     describedBy?: string;
 };
+export type PrimaryKey = "default" | "cyan" | "red" | "green" | "yellow" | "pink" | "orange" | "purple";
+export type PaletteOption = {
+    value: PrimaryKey;
+    label: string;
+    swatch: string;
+};

package/dist/main.d.ts

@@ -0,0 +1,4 @@
+import "./app.css";
+import "./styles.css";
+declare const app: {};
+export default app;

package/dist/main.js

@@ -0,0 +1,8 @@
+import { mount } from "svelte";
+import "./app.css";
+import "./styles.css";
+import App from "./App.svelte";
+var app = mount(App, {
+    target: document.getElementById("app"),
+});
+export default app;

package/dist/styles.css

@@ -1,5 +1,6 @@
-/* src/app.css */
+/* src/styles.css */
 @source "../node_modules/svelte-comp/**/*";
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
@@ -16,6 +17,7 @@
   --color-bg-page: oklch(98% 0 0deg);
   --color-bg-surface: oklch(100% 0 0deg);
   --color-bg-primary: oklch(62.3% 0.214 259.8deg);
+  --color-primary: var(--color-bg-primary);
   --color-bg-secondary: oklch(80% 0 0deg);
   --color-bg-danger: oklch(60% 0.25 30deg);
   --color-bg-success: oklch(55% 0.2 150deg);
@@ -108,6 +110,7 @@
   --color-bg-page: oklch(15% 0 0deg);
   --color-bg-surface: oklch(26% 0 0deg);
   --color-bg-primary: oklch(42% 0.19 259.8deg);
+  --color-primary: var(--color-bg-primary);
   --color-bg-secondary: oklch(45% 0 0deg);
   --color-bg-danger: oklch(50% 0.25 30deg);
   --color-bg-success: oklch(45% 0.2 150deg);
@@ -167,3 +170,63 @@
 .dark ::-webkit-scrollbar-thumb {
   background: oklch(from var(--color-bg-secondary) l c h / 0.7);
 }
+
+/* ----------------------------- */
+/* 🎨 Primary color palettes     */
+/* ----------------------------- */
+
+[data-primary="default"] {
+  --color-primary: oklch(62.3% 0.214 259.8deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="cyan"] {
+  --color-primary: oklch(86.5% 0.127 207.078);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="red"] {
+  --color-primary: oklch(58% 0.24 30deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="green"] {
+  --color-primary: oklch(65% 0.22 140deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="yellow"] {
+  --color-primary: oklch(75% 0.18 90deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="pink"] {
+  --color-primary: oklch(70% 0.25 350deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="orange"] {
+  --color-primary: oklch(72% 0.22 60deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}
+
+[data-primary="purple"] {
+  --color-primary: oklch(55% 0.22 290deg);
+  --color-bg-primary: var(--color-primary);
+  --border-color-primary: var(--color-primary);
+  --border-color-focus: var(--color-primary);
+}

package/package.json

@@ -1,14 +1,18 @@
 {
-  "dependencies": {
-    "prismjs": "^1.30.0"
-  },
   "description": "A comprehensive component library built on Svelte 5 (runes) with design tokens (tailwind), accessibility focus, and TypeScript support",
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/vite": "^4.1.17",
     "@tsconfig/svelte": "^5.0.4",
     "@types/node": "^24.5.2",
+    "@types/prismjs": "^1.26.5",
+    "prettier": "^3.7.4",
+    "prettier-plugin-svelte": "^3.4.0",
+    "prismjs": "^1.30.0",
     "svelte": "^5.39.6",
+    "svelte-check": "^4.3.4",
+    "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3",
     "vite": "^7.2.1"
   },
@@ -38,10 +42,10 @@
   "scripts": {
     "build": "svelte-package --input src",
     "dev": "vite",
-    "prepare": "npm run build"
+    "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
   },
   "svelte": "./dist/lib/index.js",
   "type": "module",
   "types": "./dist/lib/index.d.ts",
-  "version": "1.0.7"
+  "version": "1.1.2"
 }