svelte-comp 1.1.3 → 1.1.5

package/dist/App.svelte

@@ -19,6 +19,7 @@
   import Toast from "./lib/Toast.svelte";
   import Tooltip from "./lib/Tooltip.svelte";
   import type { ToastVariant } from "./lib/types";
+  import Container from "./Container.svelte";
 
   const tabs = [
     { id: "overview", label: "Overview" },
@@ -151,15 +152,10 @@
   }
 </script>
 
-<main class="min-h-screen bg-[var(--color-bg-page)] text-[var(--color-text-default)]">
-  <div class="pointer-events-none absolute inset-0 overflow-hidden">
-    <div class="absolute -left-10 top-10 h-64 w-64 rounded-full bg-[var(--color-bg-primary)]/10 blur-3xl"></div>
-    <div class="absolute right-0 bottom-0 h-72 w-72 rounded-full bg-[var(--color-bg-warning)]/20 blur-3xl"></div>
-  </div>
-
+<Container>
   <div class="relative mx-auto max-w-6xl space-y-8 px-6 py-10">
     <section
-      class="relative overflow-hidden rounded-[28px] border border-[var(--border-color-default)] bg-gradient-to-br from-[var(--color-bg-surface)] via-white/70 to-[var(--color-bg-muted)] shadow-[0_20px_60px_-25px_var(--shadow-color)] dark:from-[var(--color-bg-surface)] dark:via-slate-900/70 dark:to-slate-900/50"
+      class="relative rounded-[28px] border border-[var(--border-color-default)] bg-gradient-to-br from-[var(--color-bg-surface)] via-white/70 to-[var(--color-bg-muted)] shadow-[0_20px_60px_-25px_var(--shadow-color)] dark:from-[var(--color-bg-surface)] dark:via-slate-900/70 dark:to-slate-900/50"
     >
       <div
         class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(99,102,241,0.18),transparent_35%),radial-gradient(circle_at_80%_0%,rgba(16,185,129,0.14),transparent_25%)]"
@@ -168,7 +164,7 @@
       <div class="relative grid gap-8 p-8 md:p-10 lg:grid-cols-[1.1fr_0.9fr]">
         <div class="space-y-4">
           <p class="text-xs uppercase tracking-[0.25em] text-[var(--color-text-muted)]">
-            svelte-comp kit
+            svelte-comp
           </p>
           <h1 class="text-3xl font-bold leading-tight md:text-4xl">
             Component showcase
@@ -203,7 +199,7 @@
         </div>
 
         <div
-          class="space-y-4 rounded-2xl border border-[var(--border-color-default)] bg-white/70 p-5 shadow-lg backdrop-blur dark:bg-slate-900/60"
+          class="space-y-4 rounded-2xl border border-[var(--border-color-default)] bg-white/70 p-5 shadow-lg dark:bg-slate-900/60"
         >
           <div class="flex items-start justify-between gap-3">
             <div>
@@ -552,4 +548,4 @@
       timeout={3500}
     />
   {/each}
-</main>
+</Container>

package/dist/Container.svelte

@@ -0,0 +1,60 @@
+<!-- src/Container.svelte -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { cx } from "./utils";
+
+  type Props = {
+    header?: Snippet;
+    footer?: Snippet;
+    left?: Snippet;
+    right?: Snippet;
+    children?: Snippet;
+    class?: string;
+  };
+
+  let {
+    header,
+    footer,
+    left,
+    right,
+    children,
+    class: externalClass = "",
+  }: Props = $props();
+
+  const baseClass =
+    "min-h-dvh w-full bg-[var(--color-bg-page,oklch(98%_0_0))] text-[var(--color-text-default,oklch(15%_0_0))] transition-colors duration-[var(--transition-normal,300ms)]";
+
+  const rootClass = $derived(cx(baseClass, externalClass));
+</script>
+
+<div class={rootClass}>
+  <div class="grid min-h-dvh grid-rows-[auto_1fr_auto]">
+    {#if header}
+      <header class="p-[var(--spacing-md,1rem)]">
+        {@render header?.()}
+      </header>
+    {/if}
+
+    {#if left}
+      <aside class="hidden lg:block p-[var(--spacing-md,1rem)]">
+        {@render left?.()}
+      </aside>
+    {/if}
+
+    <main class="p-[var(--spacing-md,1rem)]">
+      {@render children?.()}
+    </main>
+
+    {#if right}
+      <aside class="hidden lg:block p-[var(--spacing-md,1rem)]">
+        {@render right?.()}
+      </aside>
+    {/if}
+
+    {#if footer}
+      <footer class="p-[var(--spacing-md,1rem)]">
+        {@render footer?.()}
+      </footer>
+    {/if}
+  </div>
+</div>

package/dist/Container.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+type Props = {
+    header?: Snippet;
+    footer?: Snippet;
+    left?: Snippet;
+    right?: Snippet;
+    children?: Snippet;
+    class?: string;
+};
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/app.css

@@ -1,3 +1,235 @@
 /* src/app.css */
 
-@import "tailwindcss";
+@import "tailwindcss";
+
+/* src/styles.css */
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* COLORS — TEXT */
+  --color-text-default: oklch(15% 0 0deg);
+  --color-text-muted: oklch(60% 0 0deg);
+  --color-text-danger: oklch(92% 0.05 25deg);
+  --color-text-success: oklch(92% 0.05 150deg);
+  --color-text-warning: oklch(95% 0.05 90deg);
+  --color-text-link: oklch(35% 0.3 250deg);
+  --color-text-red: oklch(50% 0.25 30deg);
+
+  /* COLORS — BG */
+  --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);
+  --color-bg-warning: oklch(75% 0.2 70deg);
+  --color-bg-muted: oklch(90% 0 0deg);
+
+  /* INTERACTION STATES */
+  --color-bg-hover: oklch(94% 0 0deg);
+  --color-bg-active: oklch(88% 0 0deg);
+
+  /* BORDER */
+  --border-color-default: oklch(85% 0 0deg);
+  --border-color-primary: oklch(50% 0.19 259.8deg);
+  --border-color-strong: oklch(75% 0 0deg);
+  --border-color-focus: oklch(68.7% 0.14 237.5deg);
+
+  /* SHADOW */
+  --shadow-color: oklch(0% 0 0deg / 0.15);
+
+  /* SPACING */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+
+  /* TYPOGRAPHY */
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: "Fira Code", "Consolas", "Monaco", monospace;
+
+  /* FONT WEIGHTS */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* TEXT SIZES */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-md: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+
+  /* LINE HEIGHT & LETTER SPACING */
+  --line-height-tight: 1.1;
+  --line-height-normal: 1.4;
+  --line-height-relaxed: 1.6;
+  --letter-spacing-tight: -0.01em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.02em;
+
+  /* RADIUS */
+  --radius-sm: 0.125rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 9999px;
+
+  /* TRANSITIONS */
+  --transition-fast: 150ms;
+  --transition-normal: 300ms;
+  --transition-slow: 500ms;
+  --timing-default: ease-in-out;
+
+  /* OPACITY */
+  --opacity-disabled: 0.5;
+  --opacity-hover: 0.9;
+  --opacity-overlay: 0.7;
+
+  /* Z-INDEX */
+  --z-base: 0;
+  --z-dropdown: 10;
+  --z-overlay: 50;
+  --z-modal: 100;
+  --z-toast: 200;
+}
+
+.dark {
+  /* COLORS — TEXT */
+  --color-text-default: oklch(98% 0 0deg);
+  --color-text-muted: oklch(60% 0 0deg);
+  --color-text-danger: oklch(98% 0.02 25deg);
+  --color-text-success: oklch(92% 0.05 150deg);
+  --color-text-warning: oklch(95% 0.05 90deg);
+  --color-text-link: oklch(65% 0.3 250deg);
+  --color-text-red: oklch(50% 0.25 30deg);
+
+  /* COLORS — BG */
+  --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);
+  --color-bg-warning: oklch(65% 0.2 70deg);
+  --color-bg-muted: oklch(30% 0 0deg);
+
+  /* INTERACTION STATES */
+  --color-bg-hover: oklch(25% 0 0deg);
+  --color-bg-active: oklch(18% 0 0deg);
+
+  /* BORDER */
+  --border-color-default: oklch(35% 0 0deg);
+  --border-color-primary: oklch(50% 0.17 259.8deg);
+  --border-color-strong: oklch(45% 0 0deg);
+  --border-color-focus: oklch(68.7% 0.14 237.5deg);
+
+  /* SHADOW */
+  --shadow-color: oklch(0% 0 0deg / 0.6);
+
+  /* OPACITY */
+  --opacity-disabled: 0.4;
+  --opacity-hover: 0.85;
+  --opacity-overlay: 0.6;
+}
+
+/* SCROLLBARS */
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-bg-secondary);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(from var(--color-bg-secondary) l c h / 0.8);
+}
+
+@supports (scrollbar-width: thin) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-bg-secondary) transparent;
+  }
+
+  .dark * {
+    scrollbar-color: oklch(from var(--color-bg-secondary) l c h / 0.7)
+      transparent;
+  }
+}
+
+.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/dist/lib/CodeView.svelte

@@ -170,7 +170,7 @@
     </div>
   {/if}
 
-  <div class="flex font-mono {TEXT[sz]} {LINE_HEIGHT[sz]}">
+  <div class={cx("flex font-mono", TEXT[sz], LINE_HEIGHT[sz])}>
     {#if showLineNumbers}
       <div
         bind:this={gutterEl}
@@ -189,7 +189,7 @@
     <div class="relative flex-1 min-h-[180px] max-h-[480px]">
       <div
         bind:this={highlightEl}
-        class="cv-highlight cv-layer {TEXT[sz]} {LINE_HEIGHT[sz]}"
+        class={cx("cv-highlight cv-layer", TEXT[sz], LINE_HEIGHT[sz])}
         class:cv-active-line={activeLine && editable}
         style={activeLine && editable
           ? `--cv-line-height: ${lineHeightPx}px; --cv-active-line-top: ${padTopPx + activeLineIndex * lineHeightPx - highlightScroll}px;`
@@ -211,7 +211,7 @@
         onfocus={editable ? updateActiveLine : undefined}
         spellcheck="false"
         readonly={!editable}
-        class="cv-input cv-layer {TEXT[sz]} {LINE_HEIGHT[sz]}"
+        class={cx("cv-input cv-layer", TEXT[sz], LINE_HEIGHT[sz])}
       ></textarea>
     </div>
   </div>

package/dist/lib/Form.svelte

@@ -151,8 +151,11 @@
     return compact ? (compactMap[size] ?? "md") : size;
   }
 
-  let formInstanceCounter = 0;
-  const instanceId = $state(formInstanceCounter++);
+  const globalFormInstanceCounter = globalThis as unknown as {
+    __svelteCompFormInstanceCounter?: number;
+  };
+  globalFormInstanceCounter.__svelteCompFormInstanceCounter ??= 0;
+  const instanceId = $state(globalFormInstanceCounter.__svelteCompFormInstanceCounter++);
 
   const baseFormId = $derived.by(() => {
     if (formId && formId.trim()) return formId.trim();

package/dist/lib/PrimaryColorSelect.svelte

@@ -71,9 +71,15 @@
 
   $effect(() => {
     if (!mounted) {
-      const saved = localStorage.getItem("primary");
-      if (isPrimaryKey(saved)) {
-        selected = saved;
+      try {
+        if (typeof window !== "undefined") {
+          const saved = localStorage.getItem("primary");
+          if (isPrimaryKey(saved)) {
+            selected = saved;
+          }
+        }
+      } catch {
+        // ignore unavailable storage/environment
       }
       mounted = true;
     }
@@ -81,8 +87,16 @@
 
   $effect(() => {
     if (mounted) {
-      document.documentElement.setAttribute("data-primary", selected);
-      localStorage.setItem("primary", selected);
+      try {
+        if (typeof document !== "undefined") {
+          document.documentElement.setAttribute("data-primary", selected);
+        }
+        if (typeof window !== "undefined") {
+          localStorage.setItem("primary", selected);
+        }
+      } catch {
+        // ignore unavailable storage/environment
+      }
     }
   });
 </script>

package/dist/lib/ProgressBar.svelte

@@ -104,7 +104,7 @@
   {...rest}
 >
   {#if label}
-    <span class="text-[var(--color-text-muted)] select-none {TEXT[sz]}">
+    <span class={cx("text-[var(--color-text-muted)] select-none", TEXT[sz])}>
       {label}
     </span>
   {/if}

package/dist/lib/ProgressCircle.svelte

@@ -94,7 +94,7 @@
   {...rest}
 >
   {#if label}
-    <span class="text-[var(--color-text-muted)] select-none {TEXT[sz]}">
+    <span class={cx("text-[var(--color-text-muted)] select-none", TEXT[sz])}>
       {label}
     </span>
   {/if}
@@ -143,9 +143,10 @@
 
     {#if !indeterminate}
       <div
-        class="absolute inset-0 flex items-center justify-center text-[var(--color-text-muted)] font-medium select-none {TEXT[
-          sz
-        ]}"
+        class={cx(
+          "absolute inset-0 flex items-center justify-center text-[var(--color-text-muted)] font-medium select-none",
+          TEXT[sz]
+        )}
       >
         {pctText}%
       </div>

package/dist/lib/Select.svelte

@@ -384,6 +384,7 @@
 <div class={rootClass}>
   {#if label}
     <label
+      id={`${fieldId}-hidden-label`}
       for={`${fieldId}-hidden`}
       class={cx(TEXT[sz], "font-medium [color:var(--color-text-muted)]")}
     >

package/dist/lib/Slider.svelte

@@ -209,6 +209,8 @@
   bind:this={wrap}
   class={rootClass}
   onclick={onTrackClick}
+  onfocusin={(e) => (rest as unknown as { onfocus?: (e: FocusEvent) => void }).onfocus?.(e as FocusEvent)}
+  onfocusout={(e) => (rest as unknown as { onblur?: (e: FocusEvent) => void }).onblur?.(e as FocusEvent)}
   data-disabled={disabled ? "true" : undefined}
   {...rest}
 >

package/dist/lib/TimePicker.svelte

@@ -194,8 +194,8 @@
     {labelFinal}
   </div>
 
-  <div class="flex items-start gap-4">
-    <div class="flex flex-wrap gap-3 min-w-[0]">
+  <div class="flex flex-wrap items-start gap-4">
+    <div class="flex flex-wrap gap-3 min-w-[0] flex-1">
       {#if timeSystem === "iso"}
         <Select
           label={L.hour}
@@ -235,7 +235,7 @@
       />
     </div>
 
-    <div class="flex items-center gap-3 pt-6">
+    <div class="flex items-center gap-3 basis-full pt-2">
       <Button onClick={toggleSystem} {disabled} sz="xs">
         {timeSystem === "iso" ? L.switchTo12h : L.switchTo24h}
       </Button>

package/dist/lib/lang.d.ts

@@ -51,9 +51,9 @@ export declare const TEXTS: {
     readonly ru: {
         readonly components: {
             readonly colorPicker: {
-                readonly text: "Выберете цвет";
+                readonly text: "Выбрать цвет";
                 readonly color: "Цвет";
-                readonly clear: "Сбросить";
+                readonly clear: "Очистить";
                 readonly placeholder: "Цвет не выбран";
                 readonly selectedColor: "Выбранный цвет";
             };
@@ -61,7 +61,7 @@ export declare const TEXTS: {
                 readonly text: "Выбрать дату";
                 readonly placeholder: "Дата не выбрана";
                 readonly date: "Дата";
-                readonly clear: "Сбросить";
+                readonly clear: "Очистить";
                 readonly selectedDate: "Выбранная дата";
             };
             readonly dialog: {
@@ -70,7 +70,7 @@ export declare const TEXTS: {
             };
             readonly filePicker: {
                 readonly text: "Выбрать файлы";
-                readonly clear: "Сбросить";
+                readonly clear: "Очистить";
                 readonly dragDrop: "Перетащите файлы сюда или нажмите, чтобы выбрать";
                 readonly accepted: "Допустимые форматы";
                 readonly selectedFiles: "Выбранные файлы";
@@ -79,7 +79,7 @@ export declare const TEXTS: {
                 readonly totalSize: "Общий размер";
             };
             readonly menu: {
-                readonly subtitle: "Меню с опциями размеров";
+                readonly subtitle: "Меню с вариантами размеров";
             };
             readonly primaryColorSelect: {
                 readonly text: "Основной цвет";
@@ -88,8 +88,8 @@ export declare const TEXTS: {
                 readonly text: "Выбрать время";
                 readonly placeholder: "Время не выбрано";
                 readonly clear: "Очистить";
-                readonly hour: "Часы";
-                readonly minute: "Минуты";
+                readonly hour: "Час";
+                readonly minute: "Минута";
                 readonly period: "Период";
                 readonly selectedTime: "Выбранное время";
                 readonly switchTo12h: "12ч";

package/dist/lib/lang.js

@@ -47,9 +47,9 @@ var enTexts = {
 var ruTexts = {
     components: {
         colorPicker: {
-            text: "Выберете цвет",
+            text: "Выбрать цвет",
             color: "Цвет",
-            clear: "Сбросить",
+            clear: "Очистить",
             placeholder: "Цвет не выбран",
             selectedColor: "Выбранный цвет",
         },
@@ -57,7 +57,7 @@ var ruTexts = {
             text: "Выбрать дату",
             placeholder: "Дата не выбрана",
             date: "Дата",
-            clear: "Сбросить",
+            clear: "Очистить",
             selectedDate: "Выбранная дата",
         },
         dialog: {
@@ -66,7 +66,7 @@ var ruTexts = {
         },
         filePicker: {
             text: "Выбрать файлы",
-            clear: "Сбросить",
+            clear: "Очистить",
             dragDrop: "Перетащите файлы сюда или нажмите, чтобы выбрать",
             accepted: "Допустимые форматы",
             selectedFiles: "Выбранные файлы",
@@ -74,14 +74,14 @@ var ruTexts = {
             fileCount: "{n} файл(ов) выбрано",
             totalSize: "Общий размер",
         },
-        menu: { subtitle: "Меню с опциями размеров" },
+        menu: { subtitle: "Меню с вариантами размеров" },
         primaryColorSelect: { text: "Основной цвет" },
         timePicker: {
             text: "Выбрать время",
             placeholder: "Время не выбрано",
             clear: "Очистить",
-            hour: "Часы",
-            minute: "Минуты",
+            hour: "Час",
+            minute: "Минута",
             period: "Период",
             selectedTime: "Выбранное время",
             switchTo12h: "12ч",

package/dist/main.d.ts

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

package/dist/main.js

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

package/package.json

@@ -47,5 +47,5 @@
   "svelte": "./dist/lib/index.js",
   "type": "module",
   "types": "./dist/lib/index.d.ts",
-  "version": "1.1.3"
+  "version": "1.1.5"
 }