zabi-components 6.0.0 → 7.0.0

package/dist/util/ssr-safe.js

@@ -0,0 +1,48 @@
+/**
+ * Browser-only guards and id generation for components that run under SSR.
+ * `generateId()` is non-deterministic on the client (random) vs counter on the server —
+ * use stable ids for ARIA pairs (e.g. `menuId` on NavigationMenu), not for persisted keys.
+ */
+export function isBrowser() {
+    return typeof window !== 'undefined';
+}
+export function safeWindow() {
+    return isBrowser() ? window : undefined;
+}
+export function safeDocument() {
+    return isBrowser() ? document : undefined;
+}
+export function safeLocalStorage() {
+    return isBrowser() ? localStorage : undefined;
+}
+export function safeSessionStorage() {
+    return isBrowser() ? sessionStorage : undefined;
+}
+export function safeRequestAnimationFrame(callback) {
+    return isBrowser() ? requestAnimationFrame(callback) : undefined;
+}
+export function safeSetTimeout(callback, delay) {
+    return isBrowser() ? setTimeout(callback, delay) : undefined;
+}
+export function safeClearTimeout(id) {
+    if (isBrowser() && id) {
+        clearTimeout(id);
+    }
+}
+export function safeSetInterval(callback, delay) {
+    return isBrowser() ? setInterval(callback, delay) : undefined;
+}
+export function safeClearInterval(id) {
+    if (isBrowser() && id) {
+        clearInterval(id);
+    }
+}
+let idCounter = 0;
+export function generateId(prefix = 'id') {
+    if (isBrowser()) {
+        return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    else {
+        return `${prefix}-ssr-${++idCounter}`;
+    }
+}

package/dist/zabi-components-colors.css

@@ -118,6 +118,11 @@
   --color-card-hover: var(--color-base-100)
   --color-card-active: var(--color-base-100)
   --color-card-elevated: theme(colors.white)
+  /* Surfaces — layered UI (ascending number = higher layer / more contrast against page) */
+  --color-surface-1: theme(colors.white)
+  --color-surface-2: var(--color-base-50)
+  --color-surface-3: var(--color-base-75)
+  --color-surface-4: var(--color-base-100)
   /* Overlay Colors */
   --color-overlay: rgba(0, 0, 0, 0.5)
   /* Input Colors */
@@ -150,7 +155,7 @@
   --color-inverse: theme(colors.white)
   --color-disabled: var(--color-base-400)
   /* Border Colors */
-  --color-border: var(--color-base-200)
+  --color-border: var(--color-base-300)
   --color-border-weak: var(--color-base-300)
   --color-border-medium: var(--color-base-400)
   --color-border-strong: var(--color-base-500)
@@ -159,6 +164,9 @@
   --color-focus-weak: theme(colors.brand.600)
   --color-focus-medium: theme(colors.brand.700)
   --color-focus-strong: theme(colors.brand.800)
+  /* Aliases for `ring-focus-ring`, `.focus-ring`, and form utils */
+  --color-focus-ring: var(--color-focus)
+  --color-focus-ring-offset: var(--color-card)
   /* Primary Colors */
   --color-primary: theme(colors.brand.600)
   --color-primary-weak: theme(colors.brand.700)
@@ -358,6 +366,11 @@
   --color-card-hover: var(--color-base-300)
   --color-card-active: var(--color-base-400)
   --color-card-elevated: var(--color-base-200)
+  /* Surfaces — layered UI (each step is lighter than the previous to read as "elevated") */
+  --color-surface-1: var(--color-base-250)
+  --color-surface-2: var(--color-base-300)
+  --color-surface-3: var(--color-base-350)
+  --color-surface-4: var(--color-base-400)
   /* Overlay Colors */
   --color-overlay: rgba(0, 0, 0, 0.7)
   /* Input Colors */

package/dist/zabi-components-theme-dark-only.css

@@ -100,6 +100,11 @@
 --color-card-hover: var(--color-base-300)
 --color-card-active: var(--color-base-400)
 --color-card-elevated: var(--color-base-200)
+/* Surfaces — layered UI (each step is lighter than the previous to read as "elevated") */
+--color-surface-1: var(--color-base-250)
+--color-surface-2: var(--color-base-300)
+--color-surface-3: var(--color-base-350)
+--color-surface-4: var(--color-base-400)
 /* Overlay Colors */
 --color-overlay: rgba(0, 0, 0, 0.7)
 /* Input Colors */

package/dist/zabi-components-theme-dark.css

@@ -102,6 +102,11 @@
 --color-card-hover: var(--color-base-300)
 --color-card-active: var(--color-base-400)
 --color-card-elevated: var(--color-base-200)
+/* Surfaces — layered UI (each step is lighter than the previous to read as "elevated") */
+--color-surface-1: var(--color-base-250)
+--color-surface-2: var(--color-base-300)
+--color-surface-3: var(--color-base-350)
+--color-surface-4: var(--color-base-400)
 /* Overlay Colors */
 --color-overlay: rgba(0, 0, 0, 0.7)
 /* Input Colors */

package/dist/zabi-components-theme-only.css

@@ -110,6 +110,11 @@
 --color-card-hover: var(--color-base-100)
 --color-card-active: var(--color-base-100)
 --color-card-elevated: theme(colors.white)
+/* Surfaces — layered UI (ascending number = higher layer / more contrast against page) */
+--color-surface-1: theme(colors.white)
+--color-surface-2: var(--color-base-50)
+--color-surface-3: var(--color-base-75)
+--color-surface-4: var(--color-base-100)
 /* Overlay Colors */
 --color-overlay: rgba(0, 0, 0, 0.5)
 /* Input Colors */
@@ -142,7 +147,7 @@
 --color-inverse: theme(colors.white)
 --color-disabled: var(--color-base-400)
 /* Border Colors */
---color-border: var(--color-base-200)
+--color-border: var(--color-base-300)
 --color-border-weak: var(--color-base-300)
 --color-border-medium: var(--color-base-400)
 --color-border-strong: var(--color-base-500)
@@ -151,6 +156,9 @@
 --color-focus-weak: theme(colors.brand.600)
 --color-focus-medium: theme(colors.brand.700)
 --color-focus-strong: theme(colors.brand.800)
+/* Aliases for `ring-focus-ring`, `.focus-ring`, and form utils */
+--color-focus-ring: var(--color-focus)
+--color-focus-ring-offset: var(--color-card)
 /* Primary Colors */
 --color-primary: theme(colors.brand.600)
 --color-primary-weak: theme(colors.brand.700)

package/dist/zabi-components-theme.css

@@ -112,6 +112,11 @@
 --color-card-hover: var(--color-base-100)
 --color-card-active: var(--color-base-100)
 --color-card-elevated: theme(colors.white)
+/* Surfaces — layered UI (ascending number = higher layer / more contrast against page) */
+--color-surface-1: theme(colors.white)
+--color-surface-2: var(--color-base-50)
+--color-surface-3: var(--color-base-75)
+--color-surface-4: var(--color-base-100)
 /* Overlay Colors */
 --color-overlay: rgba(0, 0, 0, 0.5)
 /* Input Colors */
@@ -144,7 +149,7 @@
 --color-inverse: theme(colors.white)
 --color-disabled: var(--color-base-400)
 /* Border Colors */
---color-border: var(--color-base-200)
+--color-border: var(--color-base-300)
 --color-border-weak: var(--color-base-300)
 --color-border-medium: var(--color-base-400)
 --color-border-strong: var(--color-base-500)
@@ -153,6 +158,9 @@
 --color-focus-weak: theme(colors.brand.600)
 --color-focus-medium: theme(colors.brand.700)
 --color-focus-strong: theme(colors.brand.800)
+/* Aliases for `ring-focus-ring`, `.focus-ring`, and form utils */
+--color-focus-ring: var(--color-focus)
+--color-focus-ring-offset: var(--color-card)
 /* Primary Colors */
 --color-primary: theme(colors.brand.600)
 --color-primary-weak: theme(colors.brand.700)