svelte-comp 1.2.2 → 1.2.5

package/dist/lib/CodeView.svelte

@@ -146,12 +146,12 @@
 </script>
 
 <div
-  class={cx(
-    "cv-root w-full h-full min-h-0 flex flex-col border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]",
-    "text-[var(--color-text-default)]",
-    externalClass
-  )}
->
+  class={cx(
+    "cv-root w-full h-full min-h-0 flex flex-col border border-[var(--border-color-default)] bg-[var(--color-bg-surface)]",
+    "text-[var(--color-text-default)]",
+    externalClass
+  )}
+>
   {#if title}
     <div
       class={cx(
@@ -176,29 +176,29 @@
     </div>
   {/if}
 
-  <div
-    class={cx(
-      "cv-body flex flex-1 min-h-0 font-mono",
-      TEXT[sz],
-      LINE_HEIGHT[sz]
-    )}
-  >
-    {#if showLineNumbers}
-      <div
-        bind:this={gutterEl}
-        class={cx(
-          "select-none px-3 py-[12px] border-r border-[var(--border-color-default)]",
-          "text-[var(--color-text-muted)] text-right overflow-hidden",
-          "cv-gutter bg-[var(--color-bg-surface)] tabular-nums h-full min-h-0"
-        )}
-      >
-        {#each lines as _, i (i)}
-          <div class={LINE_HEIGHT[sz]}>{i + 1}</div>
-        {/each}
-      </div>
-    {/if}
-
-    <div class="cv-editor relative flex-1 min-h-0">
+  <div
+    class={cx(
+      "cv-body flex flex-1 min-h-0 font-mono",
+      TEXT[sz],
+      LINE_HEIGHT[sz]
+    )}
+  >
+    {#if showLineNumbers}
+      <div
+        bind:this={gutterEl}
+        class={cx(
+          "select-none px-3 py-[12px] border-r border-[var(--border-color-default)]",
+          "text-[var(--color-text-muted)] text-right overflow-hidden",
+          "cv-gutter bg-[var(--color-bg-surface)] tabular-nums h-full min-h-0"
+        )}
+      >
+        {#each lines as _, i (i)}
+          <div class={LINE_HEIGHT[sz]}>{i + 1}</div>
+        {/each}
+      </div>
+    {/if}
+
+    <div class="cv-editor relative flex-1 min-h-0">
       <div
         bind:this={highlightEl}
         class={cx("cv-highlight cv-layer", TEXT[sz], LINE_HEIGHT[sz])}

package/dist/lib/Pagination.svelte

@@ -65,13 +65,14 @@
 </script>
 
 <div class={wrapperClass}>
-  <span>Page {currentPage} of {totalPages}</span>
+  <span class="pagination-count">Page {currentPage} of {totalPages}</span>
 
   <Button
     onClick={prevPage}
     disabled={currentPage === 1}
     sz="xs"
     variant="secondary"
+    class="pagination-btn"
   >
     &lt;
   </Button>
@@ -82,6 +83,7 @@
       sz="xs"
       variant={currentPage === page ? "primary" : "secondary"}
       aria-current={currentPage === page ? "page" : undefined}
+      class="pagination-btn"
     >
       {page}
     </Button>
@@ -92,7 +94,26 @@
     disabled={currentPage === totalPages}
     sz="xs"
     variant="secondary"
+    class="pagination-btn"
   >
     &gt;
   </Button>
 </div>
+
+<style>
+  @media (max-width: 640px) {
+    :global(.pagination-btn) {
+      font-size: 10px;
+      line-height: 1;
+      height: 20px;
+      padding: 0 6px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    :global(.pagination-count) {
+      display: none;
+    }
+  }
+</style>
+

package/dist/lib/SearchInput.svelte

@@ -5,8 +5,7 @@
    *
    * @prop label {string} - Label text rendered above the field
    *
-   * @prop placeholder {string} - Placeholder text
-   * @default "Search"
+   * @prop placeholder {string} - Placeholder text (localized by default)
    *
    * @prop value {string} - Controlled field value (bindable)
    * @default ""
@@ -24,27 +23,37 @@
    *
    * @note Renders a leading search icon and uses `Field` with `type="search"` and `clearable`.
    */
+  import { getContext } from "svelte";
   import Field from "./Field.svelte";
+  import type { FieldVariant, SizeKey } from "./types";
+  import { TEXTS } from "./lang";
 
   type Props = {
     label?: string;
     placeholder?: string;
     value?: string;
-    sz?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    variant?: 'default' | 'filled' | 'neutral';
+    sz?: SizeKey;
+    variant?: FieldVariant;
     class?: string;
     [key: string]: unknown;
   };
 
   let {
     label,
-    placeholder = 'Search',
+    placeholder,
     value = $bindable(''),
     sz = 'sm',
     variant = 'filled',
     class: externalClass = '',
     ...rest
   }: Props = $props();
+
+  const langCtx =
+    getContext<{ value: keyof typeof TEXTS } | undefined>("lang") ?? null;
+  const langKey = $derived(langCtx?.value ?? "en");
+  const L = $derived(TEXTS[langKey].components.searchInput);
+
+  const placeholderFinal = $derived(placeholder ?? L.placeholder);
 </script>
 
 {#snippet leading()}
@@ -75,7 +84,7 @@
   type="search"
   clearable={true}
   {leading}
-  {placeholder}
+  placeholder={placeholderFinal}
   class={`search-input w-full max-w-[520px] [&_input]:pl-10 ${externalClass}`}
   {...rest}
 />

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

@@ -1,9 +1,10 @@
+import type { FieldVariant, SizeKey } from "./types";
 type Props = {
     label?: string;
     placeholder?: string;
     value?: string;
-    sz?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    variant?: 'default' | 'filled' | 'neutral';
+    sz?: SizeKey;
+    variant?: FieldVariant;
     class?: string;
     [key: string]: unknown;
 };

package/dist/lib/ThemeToggle.svelte

@@ -63,7 +63,7 @@
     xl: "px-6 py-3 h-10",
   };
 
-  const position = "fixed top-4 right-4";
+  const position = "fixed top-4 right-4 z-50";
 
   const mergedClass = $derived(
     cx(

package/dist/lib/lang.d.ts

@@ -29,6 +29,9 @@ export declare const TEXTS: {
                 readonly fileCount: "{n} file(s) selected";
                 readonly totalSize: "Total size";
             };
+            readonly searchInput: {
+                readonly placeholder: "Search";
+            };
             readonly menu: {
                 readonly subtitle: "Menu with size options";
             };
@@ -78,6 +81,9 @@ export declare const TEXTS: {
                 readonly fileCount: "{n} файл(ов) выбрано";
                 readonly totalSize: "Общий размер";
             };
+            readonly searchInput: {
+                readonly placeholder: "?????";
+            };
             readonly menu: {
                 readonly subtitle: "Меню с вариантами размеров";
             };
@@ -127,6 +133,9 @@ export declare const TEXTS: {
                 readonly fileCount: "{n} archivo(s) seleccionado(s)";
                 readonly totalSize: "Tamaño total";
             };
+            readonly searchInput: {
+                readonly placeholder: "Buscar";
+            };
             readonly menu: {
                 readonly subtitle: "Menú con opciones de tamaño";
             };

package/dist/lib/lang.js

@@ -29,6 +29,9 @@ var enTexts = {
             fileCount: "{n} file(s) selected",
             totalSize: "Total size",
         },
+        searchInput: {
+            placeholder: "Search",
+        },
         menu: { subtitle: "Menu with size options" },
         primaryColorSelect: { text: "Primary color" },
         timePicker: {
@@ -74,6 +77,9 @@ var ruTexts = {
             fileCount: "{n} файл(ов) выбрано",
             totalSize: "Общий размер",
         },
+        searchInput: {
+            placeholder: "?????",
+        },
         menu: { subtitle: "Меню с вариантами размеров" },
         primaryColorSelect: { text: "Основной цвет" },
         timePicker: {
@@ -119,6 +125,9 @@ var esTexts = {
             fileCount: "{n} archivo(s) seleccionado(s)",
             totalSize: "Tamaño total",
         },
+        searchInput: {
+            placeholder: "Buscar",
+        },
         menu: { subtitle: "Menú con opciones de tamaño" },
         primaryColorSelect: { text: "Color primario" },
         timePicker: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-comp",
-  "version": "1.2.2",
+  "version": "1.2.5",
   "license": "MIT",
   "description": "A comprehensive component library built on Svelte 5 (runes) with design tokens (tailwind), accessibility focus, and TypeScript support",
   "devDependencies": {