svelte-comp 1.2.7 → 1.3.5

package/dist/lang.js

@@ -1,6 +1,6 @@
 var enTexts = {
     app: {
-        version: "v1.2.6",
+        version: "v1.3.3",
         title: "Svelte 5 UI Components",
         footer: "© 2025 MaestroFusion360",
         authorUrl: "https://github.com/MaestroFusion360/svelte-comp",
@@ -361,7 +361,7 @@ var enTexts = {
 };
 var ruTexts = {
     app: {
-        version: "v1.2.6",
+        version: "v1.3.3",
         title: "Svelte 5 UI Components",
         footer: "© 2025 MaestroFusion360",
         authorUrl: "https://github.com/MaestroFusion360/svelte-comp",
@@ -723,7 +723,7 @@ var ruTexts = {
 };
 var esTexts = {
     app: {
-        version: "v1.2.6",
+        version: "v1.3.3",
         title: "Svelte 5 UI Components",
         footer: "© 2025 MaestroFusion360",
         authorUrl: "https://github.com/MaestroFusion360/svelte-comp",

package/dist/lib/Accordion.svelte

@@ -51,22 +51,22 @@
   }: Props = $props();
 
   const base =
-    "w-full border border-[var(--border-color-default)] bg-[var(--color-bg-surface)] shadow-sm";
+    "w-full border border-[var(--border-color-default)] bg-[var(--color-bg-surface)] shadow-[0_1px_2px_var(--shadow-color)]";
 
   const sizes: Record<SizeKey, string> = {
-    xs: "rounded-[var(--radius-md)] text-sm",
-    sm: "rounded-[var(--radius-md)] text-base",
-    md: "rounded-[var(--radius-lg)] text-lg",
-    lg: "rounded-[var(--radius-lg)] text-xl",
-    xl: "rounded-[var(--radius-xl)] text-2xl",
+    xs: cx("rounded-[var(--radius-md)]", TEXT.xs),
+    sm: cx("rounded-[var(--radius-md)]", TEXT.sm),
+    md: cx("rounded-[var(--radius-lg)]", TEXT.md),
+    lg: cx("rounded-[var(--radius-lg)]", TEXT.lg),
+    xl: cx("rounded-[var(--radius-xl)]", TEXT.xl),
   };
 
   const contentSize: Record<SizeKey, string> = {
-    xs: "px-4 pb-4 mt-1",
-    sm: "px-5 pb-5 mt-2",
-    md: "px-6 pb-6 mt-3",
-    lg: "px-8 pb-8 mt-4",
-    xl: "px-10 pb-10 mt-5",
+    xs: "px-[var(--spacing-md)] pb-[var(--spacing-md)] mt-[var(--spacing-xs)]",
+    sm: "px-[calc(var(--spacing-md)+var(--spacing-xs))] pb-[calc(var(--spacing-md)+var(--spacing-xs))] mt-[var(--spacing-sm)]",
+    md: "px-[calc(var(--spacing-md)+var(--spacing-sm))] pb-[calc(var(--spacing-md)+var(--spacing-sm))] mt-[calc(var(--spacing-sm)+var(--spacing-xs))]",
+    lg: "px-[var(--spacing-xl)] pb-[var(--spacing-xl)] mt-[var(--spacing-md)]",
+    xl: "px-[calc(var(--spacing-xl)+var(--spacing-sm))] pb-[calc(var(--spacing-xl)+var(--spacing-sm))] mt-[calc(var(--spacing-md)+var(--spacing-xs))]",
   };
 
   const iconSize: Record<SizeKey, string> = {
@@ -110,14 +110,14 @@
       <h3>
         <button
           type="button"
-          class="flex w-full items-center justify-between gap-3 p-2 text-left font-medium text-[var(--color-text-default)] bg-transparent transition-colors hover:bg-[var(--color-bg-hover)] active:bg-[var(--color-bg-active)] focus:outline-none focus:ring-2 focus:ring-[var(--border-color-focus)] focus:ring-inset"
+          class="flex w-full items-center justify-between gap-[calc(var(--spacing-sm)+var(--spacing-xs))] p-[var(--spacing-sm)] text-left font-medium text-[var(--color-text-default)] bg-transparent transition-colors hover:bg-[var(--color-bg-hover)] active:bg-[var(--color-bg-active)] focus:outline-none focus:ring-2 focus:ring-[var(--border-color-focus)] focus:ring-inset"
           aria-expanded={isOpen(i)}
           onclick={() => toggle(i)}
         >
           <span>{item.title}</span>
           <svg
             class={cx(
-              "shrink-0 transition-transform duration-200 text-[var(--color-text-muted)]",
+              "shrink-0 transition-transform duration-[var(--transition-fast)] text-[var(--color-text-muted)]",
               iconClass
             )}
             class:rotate-180={isOpen(i)}
@@ -135,7 +135,7 @@
       </h3>
 
       <div
-        class="grid overflow-hidden transition-[grid-template-rows] duration-200"
+        class="grid overflow-hidden transition-[grid-template-rows] duration-[var(--transition-fast)]"
         class:grid-rows-[1fr]={isOpen(i)}
         class:grid-rows-[0fr]={!isOpen(i)}
       >

package/dist/lib/Badge.svelte

@@ -0,0 +1,44 @@
+<!-- src/lib/Badge.svelte -->
+<script lang="ts">
+  /**
+   * @component Badge
+   * @description Compact status badge for inline labels and small indicators.
+   *
+   * @prop message {string} - Badge text
+   *
+   * @prop variant {ToastVariant} - Visual style
+   * @options success|danger|warning|info
+   * @default info
+   *
+   * @prop showIcon {boolean} - Shows a variant icon
+   * @default false
+   *
+   * @prop class {string} - Additional wrapper classes
+   * @default ""
+   *
+   * @note Intended for inline status labels.
+   * @note Uses NoticeBase for shared styling with Toast.
+   */
+  import NoticeBase from "./NoticeBase.svelte";
+  import type { ToastVariant } from "./types";
+
+  let {
+    message,
+    variant = "info",
+    showIcon = false,
+    class: externalClass = "",
+  }: {
+    message: string;
+    variant?: ToastVariant;
+    showIcon?: boolean;
+    class?: string;
+  } = $props();
+</script>
+
+<NoticeBase
+  {message}
+  {variant}
+  {showIcon}
+  inline
+  class={externalClass}
+/>

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

@@ -0,0 +1,10 @@
+import type { ToastVariant } from "./types";
+type $$ComponentProps = {
+    message: string;
+    variant?: ToastVariant;
+    showIcon?: boolean;
+    class?: string;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/lib/Button.svelte

@@ -70,6 +70,7 @@
     relative inline-flex items-center justify-center gap-2 rounded-[var(--radius-md)] border font-medium
     transition-all duration-[var(--transition-fast)] ease-[var(--timing-default)] whitespace-nowrap select-none
     focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-color-focus)]
+    [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11
     disabled:opacity-[var(--opacity-disabled)]
     disabled:cursor-not-allowed
     disabled:brightness-100
@@ -87,20 +88,20 @@
 
   const variants: Record<ButtonVariant, string> = {
     primary:
-      "bg-[var(--color-bg-primary)] text-white border-[var(--border-color-primary)] hover:brightness-110 active:scale-95",
+      "bg-[var(--color-bg-primary)] text-[var(--color-text-inverse,#fff)] border-[var(--border-color-primary)] hover:brightness-110 active:scale-95",
     secondary:
       "bg-[var(--color-bg-secondary)] [color:var(--color-text-default)] border-[var(--border-color-default)] hover:bg-[var(--color-bg-hover)] active:scale-95",
-    pill: "bg-[var(--color-bg-primary)] text-white border-[var(--border-color-primary)] rounded-full hover:brightness-110 active:scale-95",
+    pill: "bg-[var(--color-bg-primary)] text-[var(--color-text-inverse,#fff)] border-[var(--border-color-primary)] rounded-full hover:brightness-110 active:scale-95",
     danger:
-      "bg-[var(--color-bg-danger)] text-white border-[var(--color-bg-danger)] hover:brightness-110 active:scale-95",
+      "bg-[var(--color-bg-danger)] text-[var(--color-text-inverse,#fff)] border-[var(--color-bg-danger)] hover:brightness-110 active:scale-95",
     success:
-      "bg-[var(--color-bg-success)] text-white border-[var(--color-bg-success)] hover:brightness-110 active:scale-95",
+      "bg-[var(--color-bg-success)] text-[var(--color-text-inverse,#fff)] border-[var(--color-bg-success)] hover:brightness-110 active:scale-95",
     warning:
-      "bg-[var(--color-bg-warning)] text-white border-[var(--color-bg-warning)] hover:brightness-110 active:scale-95",
+      "bg-[var(--color-bg-warning)] text-[var(--color-text-inverse,#fff)] border-[var(--color-bg-warning)] hover:brightness-110 active:scale-95",
     ghost:
       "bg-transparent [color:var(--color-text-default)] border-transparent hover:bg-[var(--color-bg-hover)] active:bg-[var(--color-bg-active)] active:scale-95",
     link: "bg-transparent underline border-transparent [color:var(--color-text-link)] hover:brightness-110 active:scale-95 transition-transform ",
-    info: "bg-[var(--color-bg-secondary)] text-white border-[var(--border-color-default)] hover:bg-[var(--color-bg-hover)] active:scale-95",
+    info: "bg-[var(--color-bg-secondary)] text-[var(--color-text-inverse,#fff)] border-[var(--border-color-default)] hover:bg-[var(--color-bg-hover)] active:scale-95",
   };
 
   const buttonClass = $derived(
@@ -132,15 +133,29 @@
 
   function navigateToLink() {
     if (!link || typeof window === "undefined") return;
+    const safeLink = getSafeLink(link);
+    if (!safeLink) return;
 
     const restAttrs = rest as Record<string, unknown>;
     const target =
       typeof restAttrs.target === "string" ? restAttrs.target : undefined;
 
     if (target === "_blank") {
-      window.open(link, "_blank", "noopener,noreferrer");
+      window.open(safeLink, "_blank", "noopener,noreferrer");
     } else {
-      window.location.assign(link);
+      window.location.assign(safeLink);
+    }
+  }
+
+  function getSafeLink(value: string) {
+    try {
+      const url = new URL(value, window.location.href);
+      if (!["http:", "https:", "mailto:", "tel:"].includes(url.protocol)) {
+        return null;
+      }
+      return value;
+    } catch {
+      return null;
     }
   }
 </script>