zabi-components 7.0.1 → 7.0.2

package/dist/zabi-components.css

@@ -130,41 +130,112 @@
     --zabi-base-925: #101013;
     --zabi-base-950: #09090b;
     --font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
-    --color-brand-50: #f7faff;
-    --color-brand-100: #edf2fb;
-    --color-brand-200: #dfe7fb;
-    --color-brand-300: #ccdbfd;
-    --color-brand-400: #abc4ff;
-    --color-brand-500: #8fa8ff;
-    --color-brand-600: #6e84fa;
-    --color-brand-700: #5366e2;
-    --color-brand-800: #3f4fc0;
-    --color-brand-900: #2f3c99;
-    --color-brand-950: #1f2866;
-    --color-citron-200: #e4ecaa;
-    --color-citron-300: #d5e184;
-    --color-citron-400: #c7d460;
-    --color-citron-500: #bbbe64;
-    --color-citron-600: #a3a852;
-    --color-citron-700: #848a43;
-    --color-pine-200: #a7d9c9;
-    --color-pine-300: #78c4ad;
-    --color-pine-400: #49ad91;
-    --color-pine-500: #0C5D43;
-    --color-pine-600: #0a513a;
-    --color-pine-700: #084532;
-    --color-pine-800: #063a2a;
-    --color-pine-900: #04231a;
-    --color-iris-50: #f4f4fa;
-    --color-iris-100: #e9e9f7;
-    --color-iris-200: #d6d6f0;
-    --color-iris-300: #bdbde6;
-    --color-iris-400: #a3a3d8;
-    --color-iris-500: #6969B3;
-    --color-iris-600: #58589e;
-    --color-iris-700: #474788;
-    --color-iris-800: #38386f;
-    --color-iris-900: #2a2a56;
+    --zabi-brand-50: #f7faff;
+    --zabi-brand-100: #edf2fb;
+    --zabi-brand-200: #dfe7fb;
+    --zabi-brand-300: #ccdbfd;
+    --zabi-brand-400: #abc4ff;
+    --zabi-brand-500: #8fa8ff;
+    --zabi-brand-600: #6e84fa;
+    --zabi-brand-700: #5366e2;
+    --zabi-brand-800: #3f4fc0;
+    --zabi-brand-900: #2f3c99;
+    --zabi-brand-950: #1f2866;
+    --color-brand-50: var(--zabi-brand-50);
+    --color-brand-100: var(--zabi-brand-100);
+    --color-brand-200: var(--zabi-brand-200);
+    --color-brand-300: var(--zabi-brand-300);
+    --color-brand-400: var(--zabi-brand-400);
+    --color-brand-500: var(--zabi-brand-500);
+    --color-brand-600: var(--zabi-brand-600);
+    --color-brand-700: var(--zabi-brand-700);
+    --color-brand-800: var(--zabi-brand-800);
+    --color-brand-900: var(--zabi-brand-900);
+    --color-brand-950: var(--zabi-brand-950);
+    --zabi-citron-50: #f9faeb;
+    --zabi-citron-100: #f1f5cf;
+    --zabi-citron-200: #e4ecaa;
+    --zabi-citron-300: #d5e184;
+    --zabi-citron-400: #c7d460;
+    --zabi-citron-500: #bbbe64;
+    --zabi-citron-600: #a3a852;
+    --zabi-citron-700: #848a43;
+    --zabi-citron-800: #666c35;
+    --zabi-citron-900: #4d5229;
+    --zabi-citron-950: #323518;
+    --color-citron-300: var(--zabi-citron-300);
+    --color-citron-400: var(--zabi-citron-400);
+    --color-citron-500: var(--zabi-citron-500);
+    --color-citron-600: var(--zabi-citron-600);
+    --color-citron-700: var(--zabi-citron-700);
+    --zabi-pine-50: #e9f6f2;
+    --zabi-pine-100: #d2ece4;
+    --zabi-pine-200: #a7d9c9;
+    --zabi-pine-300: #78c4ad;
+    --zabi-pine-400: #49ad91;
+    --zabi-pine-500: #0c5d43;
+    --zabi-pine-600: #0a513a;
+    --zabi-pine-700: #084532;
+    --zabi-pine-800: #063a2a;
+    --zabi-pine-900: #04231a;
+    --zabi-pine-950: #02160f;
+    --color-pine-600: var(--zabi-pine-600);
+    --color-pine-700: var(--zabi-pine-700);
+    --color-pine-800: var(--zabi-pine-800);
+    --color-pine-900: var(--zabi-pine-900);
+    --zabi-iris-50: #f4f4fa;
+    --zabi-iris-100: #e9e9f7;
+    --zabi-iris-200: #d6d6f0;
+    --zabi-iris-300: #bdbde6;
+    --zabi-iris-400: #a3a3d8;
+    --zabi-iris-500: #6969b3;
+    --zabi-iris-600: #58589e;
+    --zabi-iris-700: #474788;
+    --zabi-iris-800: #38386f;
+    --zabi-iris-900: #2a2a56;
+    --zabi-iris-950: #1b1b37;
+    --color-iris-50: var(--zabi-iris-50);
+    --color-iris-100: var(--zabi-iris-100);
+    --color-iris-200: var(--zabi-iris-200);
+    --color-iris-300: var(--zabi-iris-300);
+    --color-iris-400: var(--zabi-iris-400);
+    --color-iris-500: var(--zabi-iris-500);
+    --color-iris-600: var(--zabi-iris-600);
+    --color-iris-700: var(--zabi-iris-700);
+    --color-iris-800: var(--zabi-iris-800);
+    --color-iris-900: var(--zabi-iris-900);
+    --zabi-warning-50: #fffbeb;
+    --zabi-warning-100: #fef3c7;
+    --zabi-warning-200: #fde68a;
+    --zabi-warning-300: #fcd34d;
+    --zabi-warning-400: #fbbf24;
+    --zabi-warning-500: #f59e0b;
+    --zabi-warning-600: #d97706;
+    --zabi-warning-700: #b45309;
+    --zabi-warning-800: #92400e;
+    --zabi-warning-900: #78350f;
+    --zabi-warning-950: #451a03;
+    --color-warning-300: var(--zabi-warning-300);
+    --color-warning-400: var(--zabi-warning-400);
+    --color-warning-500: var(--zabi-warning-500);
+    --color-warning-600: var(--zabi-warning-600);
+    --color-warning-700: var(--zabi-warning-700);
+    --zabi-error-50: #fef2f2;
+    --zabi-error-100: #fee2e2;
+    --zabi-error-200: #fecaca;
+    --zabi-error-300: #fca5a5;
+    --zabi-error-400: #f87171;
+    --zabi-error-500: #ef4444;
+    --zabi-error-600: #dc2626;
+    --zabi-error-700: #b91c1c;
+    --zabi-error-800: #991b1b;
+    --zabi-error-900: #7f1d1d;
+    --zabi-error-950: #450a0a;
+    --color-error-300: var(--zabi-error-300);
+    --color-error-400: var(--zabi-error-400);
+    --color-error-500: var(--zabi-error-500);
+    --color-error-600: var(--zabi-error-600);
+    --color-error-700: var(--zabi-error-700);
     --color-base-50: var(--zabi-base-50);
     --color-base-75: var(--zabi-base-75);
     --color-base-100: var(--zabi-base-100);
@@ -219,11 +290,11 @@
     --color-nav-menu-active: var(--color-action-primary-subtle);
     --color-nav-menu-focus: var(--color-brand-500);
     --color-success-text: var(--color-success);
-    --color-warning-text: #b45309;
+    --color-warning-text: var(--color-warning-700);
     --color-neutral-text: var(--color-base-700);
     --color-energetic-text: var(--color-citron-700);
-    --color-error-text: #b91c1c;
-    --color-inverse: #ffffff;
+    --color-error-text: var(--color-error-700);
+    --color-inverse: var(--color-base-100);
     --color-disabled: var(--color-base-400);
     --color-border: var(--color-base-300);
     --color-border-weak: var(--color-base-300);
@@ -244,8 +315,8 @@
     --color-secondary-medium: var(--color-base-800);
     --color-secondary-strong: var(--color-base-900);
     --color-success: var(--color-pine-600);
-    --color-warning: #f59e0b;
-    --color-error: #ef4444;
+    --color-warning: var(--color-warning-500);
+    --color-error: var(--color-error-500);
     --color-energetic: var(--color-citron-500);
     --color-neutral: var(--color-base-600);
     --color-info: var(--color-iris-600);
@@ -293,6 +364,8 @@
     --z-popover: 1060;
     --z-tooltip: 1070;
     --z-toast: 1080;
+    --color-tooltip-bg: var(--color-base-800);
+    --color-tooltip-fg: var(--color-base-50);
   }
 }
 @layer base {
@@ -1733,6 +1806,9 @@
   .bg-surface-2 {
     background-color: var(--color-surface-2);
   }
+  .bg-tooltip-bg {
+    background-color: var(--color-tooltip-bg);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -2059,6 +2135,12 @@
   .break-words {
     overflow-wrap: break-word;
   }
+  .wrap-break-word {
+    overflow-wrap: break-word;
+  }
+  .whitespace-normal {
+    white-space: normal;
+  }
   .whitespace-pre {
     white-space: pre;
   }
@@ -2172,6 +2254,9 @@
   .text-success {
     color: var(--color-success);
   }
+  .text-tooltip-fg {
+    color: var(--color-tooltip-fg);
+  }
   .text-warning {
     color: var(--color-warning);
   }
@@ -2333,6 +2418,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[opacity\,visibility\,transform\] {
+    transition-property: opacity,visibility,transform;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3611,6 +3701,12 @@
     --tw-ring-offset-color: transparent;
   }
 }
+@media (prefers-contrast: high) {
+  :root {
+    --color-tooltip-bg: CanvasText;
+    --color-tooltip-fg: Canvas;
+  }
+}
 body {
   font-family: var(--font-family-sans);
 }
@@ -3636,50 +3732,138 @@ body {
   --zabi-base-900: #18181b;
   --zabi-base-925: #101013;
   --zabi-base-950: #09090b;
-  --color-brand-50: #1f2866;
-  --color-brand-100: #2f3c99;
-  --color-brand-200: #3f4fc0;
-  --color-brand-300: #5366e2;
-  --color-brand-400: #6e84fa;
-  --color-brand-500: #8fa8ff;
-  --color-brand-600: #abc4ff;
-  --color-brand-700: #ccdbfd;
-  --color-brand-800: #dfe7fb;
-  --color-brand-900: #edf2fb;
-  --color-brand-950: #f7faff;
-  --color-citron-50: #323518;
-  --color-citron-100: #4d5229;
-  --color-citron-200: #666c35;
-  --color-citron-300: #848a43;
-  --color-citron-400: #a3a852;
-  --color-citron-500: #bbbe64;
-  --color-citron-600: #c7d460;
-  --color-citron-700: #d5e184;
-  --color-citron-800: #e4ecaa;
-  --color-citron-900: #f1f5cf;
-  --color-citron-950: #f9faeb;
-  --color-pine-50: #02160f;
-  --color-pine-100: #04231a;
-  --color-pine-200: #063a2a;
-  --color-pine-300: #084532;
-  --color-pine-400: #0a513a;
-  --color-pine-500: #0c5d43;
-  --color-pine-600: #49ad91;
-  --color-pine-700: #78c4ad;
-  --color-pine-800: #a7d9c9;
-  --color-pine-900: #d2ece4;
-  --color-pine-950: #e9f6f2;
-  --color-iris-50: #1b1b37;
-  --color-iris-100: #2a2a56;
-  --color-iris-200: #38386f;
-  --color-iris-300: #474788;
-  --color-iris-400: #58589e;
-  --color-iris-500: #6969b3;
-  --color-iris-600: #a3a3d8;
-  --color-iris-700: #bdbde6;
-  --color-iris-800: #d6d6f0;
-  --color-iris-900: #e9e9f7;
-  --color-iris-950: #f4f4fa;
+  --zabi-brand-50: #f7faff;
+  --zabi-brand-100: #edf2fb;
+  --zabi-brand-200: #dfe7fb;
+  --zabi-brand-300: #ccdbfd;
+  --zabi-brand-400: #abc4ff;
+  --zabi-brand-500: #8fa8ff;
+  --zabi-brand-600: #6e84fa;
+  --zabi-brand-700: #5366e2;
+  --zabi-brand-800: #3f4fc0;
+  --zabi-brand-900: #2f3c99;
+  --zabi-brand-950: #1f2866;
+  --color-brand-50: var(--zabi-brand-950);
+  --color-brand-100: var(--zabi-brand-900);
+  --color-brand-200: var(--zabi-brand-800);
+  --color-brand-300: var(--zabi-brand-700);
+  --color-brand-400: var(--zabi-brand-600);
+  --color-brand-500: var(--zabi-brand-500);
+  --color-brand-600: var(--zabi-brand-400);
+  --color-brand-700: var(--zabi-brand-300);
+  --color-brand-800: var(--zabi-brand-200);
+  --color-brand-900: var(--zabi-brand-100);
+  --color-brand-950: var(--zabi-brand-50);
+  --zabi-citron-50: #f9faeb;
+  --zabi-citron-100: #f1f5cf;
+  --zabi-citron-200: #e4ecaa;
+  --zabi-citron-300: #d5e184;
+  --zabi-citron-400: #c7d460;
+  --zabi-citron-500: #bbbe64;
+  --zabi-citron-600: #a3a852;
+  --zabi-citron-700: #848a43;
+  --zabi-citron-800: #666c35;
+  --zabi-citron-900: #4d5229;
+  --zabi-citron-950: #323518;
+  --color-citron-50: var(--zabi-citron-950);
+  --color-citron-100: var(--zabi-citron-900);
+  --color-citron-200: var(--zabi-citron-800);
+  --color-citron-300: var(--zabi-citron-700);
+  --color-citron-400: var(--zabi-citron-600);
+  --color-citron-500: var(--zabi-citron-500);
+  --color-citron-600: var(--zabi-citron-400);
+  --color-citron-700: var(--zabi-citron-300);
+  --color-citron-800: var(--zabi-citron-200);
+  --color-citron-900: var(--zabi-citron-100);
+  --color-citron-950: var(--zabi-citron-50);
+  --zabi-pine-50: #e9f6f2;
+  --zabi-pine-100: #d2ece4;
+  --zabi-pine-200: #a7d9c9;
+  --zabi-pine-300: #78c4ad;
+  --zabi-pine-400: #49ad91;
+  --zabi-pine-500: #0c5d43;
+  --zabi-pine-600: #0a513a;
+  --zabi-pine-700: #084532;
+  --zabi-pine-800: #063a2a;
+  --zabi-pine-900: #04231a;
+  --zabi-pine-950: #02160f;
+  --color-pine-50: var(--zabi-pine-950);
+  --color-pine-100: var(--zabi-pine-900);
+  --color-pine-200: var(--zabi-pine-800);
+  --color-pine-300: var(--zabi-pine-700);
+  --color-pine-400: var(--zabi-pine-600);
+  --color-pine-500: var(--zabi-pine-500);
+  --color-pine-600: var(--zabi-pine-400);
+  --color-pine-700: var(--zabi-pine-300);
+  --color-pine-800: var(--zabi-pine-200);
+  --color-pine-900: var(--zabi-pine-100);
+  --color-pine-950: var(--zabi-pine-50);
+  --zabi-iris-50: #f4f4fa;
+  --zabi-iris-100: #e9e9f7;
+  --zabi-iris-200: #d6d6f0;
+  --zabi-iris-300: #bdbde6;
+  --zabi-iris-400: #a3a3d8;
+  --zabi-iris-500: #6969b3;
+  --zabi-iris-600: #58589e;
+  --zabi-iris-700: #474788;
+  --zabi-iris-800: #38386f;
+  --zabi-iris-900: #2a2a56;
+  --zabi-iris-950: #1b1b37;
+  --color-iris-50: var(--zabi-iris-950);
+  --color-iris-100: var(--zabi-iris-900);
+  --color-iris-200: var(--zabi-iris-800);
+  --color-iris-300: var(--zabi-iris-700);
+  --color-iris-400: var(--zabi-iris-600);
+  --color-iris-500: var(--zabi-iris-500);
+  --color-iris-600: var(--zabi-iris-400);
+  --color-iris-700: var(--zabi-iris-300);
+  --color-iris-800: var(--zabi-iris-200);
+  --color-iris-900: var(--zabi-iris-100);
+  --color-iris-950: var(--zabi-iris-50);
+  --zabi-warning-50: #fffbeb;
+  --zabi-warning-100: #fef3c7;
+  --zabi-warning-200: #fde68a;
+  --zabi-warning-300: #fcd34d;
+  --zabi-warning-400: #fbbf24;
+  --zabi-warning-500: #f59e0b;
+  --zabi-warning-600: #d97706;
+  --zabi-warning-700: #b45309;
+  --zabi-warning-800: #92400e;
+  --zabi-warning-900: #78350f;
+  --zabi-warning-950: #451a03;
+  --color-warning-50: var(--zabi-warning-950);
+  --color-warning-100: var(--zabi-warning-900);
+  --color-warning-200: var(--zabi-warning-800);
+  --color-warning-300: var(--zabi-warning-700);
+  --color-warning-400: var(--zabi-warning-600);
+  --color-warning-500: var(--zabi-warning-500);
+  --color-warning-600: var(--zabi-warning-400);
+  --color-warning-700: var(--zabi-warning-300);
+  --color-warning-800: var(--zabi-warning-200);
+  --color-warning-900: var(--zabi-warning-100);
+  --color-warning-950: var(--zabi-warning-50);
+  --zabi-error-50: #fef2f2;
+  --zabi-error-100: #fee2e2;
+  --zabi-error-200: #fecaca;
+  --zabi-error-300: #fca5a5;
+  --zabi-error-400: #f87171;
+  --zabi-error-500: #ef4444;
+  --zabi-error-600: #dc2626;
+  --zabi-error-700: #b91c1c;
+  --zabi-error-800: #991b1b;
+  --zabi-error-900: #7f1d1d;
+  --zabi-error-950: #450a0a;
+  --color-error-50: var(--zabi-error-950);
+  --color-error-100: var(--zabi-error-900);
+  --color-error-200: var(--zabi-error-800);
+  --color-error-300: var(--zabi-error-700);
+  --color-error-400: var(--zabi-error-600);
+  --color-error-500: var(--zabi-error-500);
+  --color-error-600: var(--zabi-error-400);
+  --color-error-700: var(--zabi-error-300);
+  --color-error-800: var(--zabi-error-200);
+  --color-error-900: var(--zabi-error-100);
+  --color-error-950: var(--zabi-error-50);
   --color-base-50: #09090b;
   --color-base-75: #101013;
   --color-base-100: #18181b;
@@ -3715,28 +3899,6 @@ body {
   --color-input-hover: var(--color-base-300);
   --color-input-focus: var(--color-base-300);
   --color-input-disabled: var(--color-base-300);
-  --color-success: var(--color-pine-400);
-  --color-success-weak: var(--color-pine-500);
-  --color-success-medium: var(--color-pine-300);
-  --color-success-strong: var(--color-pine-200);
-  --color-warning: #f59e0b;
-  --color-warning-weak: #d97706;
-  --color-warning-medium: #fbbf24;
-  --color-warning-strong: #fcd34d;
-  --color-error: #ef4444;
-  --color-error-weak: #dc2626;
-  --color-error-medium: #f87171;
-  --color-error-strong: #fca5a5;
-  --color-energetic: var(--color-citron-400);
-  --color-energetic-weak: var(--color-citron-500);
-  --color-energetic-medium: var(--color-citron-300);
-  --color-energetic-strong: var(--color-citron-200);
-  --color-info: var(--color-iris-500);
-  --color-info-weak: var(--color-iris-600);
-  --color-info-active: var(--color-iris-400);
-  --color-info-medium: var(--color-iris-400);
-  --color-info-strong: var(--color-iris-300);
-  --color-info-text: var(--color-info);
   --color-action-primary-text: var(--color-brand-50);
   --color-action-danger: #ef4444;
   --color-action-danger-hover: #dc2626;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zabi-components",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Svelte 5 UI components with TypeScript and Tailwind CSS v4. Accessible, easy to theme, works with SSR.",
   "type": "module",
   "main": "dist/index.js",
@@ -81,7 +81,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/sabnor/zabi-components.git"
+    "url": "git+https://github.com/sabnor/zabi-components.git"
   },
   "scripts": {
     "dev": "vite dev",