@zentauri-ui/zentauri-components 2.1.2 → 2.1.4

package/src/design-system/alert.ts

@@ -5,60 +5,60 @@ export const zuiAlertAppearances = {
   default:
     "border-[color:var(--zui-alert-default-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-alert-default-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-alert-default-bg,var(--zui-brand,#0000000d))] dark:bg-[var(--zui-alert-default-bg-dark,var(--zui-brand-dark,#ffffff0d))] text-[color:var(--zui-alert-default-fg,var(--zui-brand-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-default-fg-dark,var(--zui-brand-fg-dark,oklch(98.4%_0.003_247.858)))]",
   success:
-    "border-[color:var(--zui-alert-success-border,color-mix(in oklch, var(--zui-status-success,oklch(69.6%_0.17_162.48_/_0.4)) 40%, transparent))] dark:border-[color:var(--zui-alert-success-border-dark,color-mix(in oklch, var(--zui-status-success-dark,oklch(69.6%_0.17_162.48_/_0.4)) 40%, transparent))] bg-[var(--zui-alert-success-bg,color-mix(in oklch, var(--zui-status-success,oklch(69.6%_0.17_162.48_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-alert-success-bg-dark,color-mix(in oklch, var(--zui-status-success-dark,oklch(69.6%_0.17_162.48_/_0.1)) 10%, transparent))] text-[color:var(--zui-alert-success-fg,var(--zui-status-success,oklch(26.2%_0.051_172.552)))] dark:text-[color:var(--zui-alert-success-fg-dark,var(--zui-status-success-dark,oklch(97.9%_0.021_166.113)))]",
+    "border-[color:var(--zui-alert-success-border,color-mix(in_oklch,_var(--zui-status-success,oklch(69.6%_0.17_162.48_/_0.4))_40%,_transparent))] dark:border-[color:var(--zui-alert-success-border-dark,color-mix(in_oklch,_var(--zui-status-success-dark,oklch(69.6%_0.17_162.48_/_0.4))_40%,_transparent))] bg-[var(--zui-alert-success-bg,color-mix(in_oklch,_var(--zui-status-success,oklch(69.6%_0.17_162.48_/_0.1))_10%,_transparent))] dark:bg-[var(--zui-alert-success-bg-dark,color-mix(in_oklch,_var(--zui-status-success-dark,oklch(69.6%_0.17_162.48_/_0.1))_10%,_transparent))] text-[color:var(--zui-alert-success-fg,var(--zui-status-success,oklch(26.2%_0.051_172.552)))] dark:text-[color:var(--zui-alert-success-fg-dark,var(--zui-status-success-dark,oklch(97.9%_0.021_166.113)))]",
   warning:
-    "border-[color:var(--zui-alert-warning-border,color-mix(in oklch, var(--zui-status-warning,oklch(76.9%_0.188_70.08_/_0.4)) 40%, transparent))] dark:border-[color:var(--zui-alert-warning-border-dark,color-mix(in oklch, var(--zui-status-warning-dark,oklch(76.9%_0.188_70.08_/_0.4)) 40%, transparent))] bg-[var(--zui-alert-warning-bg,color-mix(in oklch, var(--zui-status-warning,oklch(76.9%_0.188_70.08_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-alert-warning-bg-dark,color-mix(in oklch, var(--zui-status-warning-dark,oklch(76.9%_0.188_70.08_/_0.1)) 10%, transparent))] text-[color:var(--zui-alert-warning-fg,var(--zui-status-warning,oklch(27.9%_0.077_45.635)))] dark:text-[color:var(--zui-alert-warning-fg-dark,var(--zui-status-warning-dark,oklch(98.7%_0.022_95.277)))]",
+    "border-[color:var(--zui-alert-warning-border,color-mix(in_oklch,_var(--zui-status-warning,oklch(76.9%_0.188_70.08_/_0.4))_40%,_transparent))] dark:border-[color:var(--zui-alert-warning-border-dark,color-mix(in_oklch,_var(--zui-status-warning-dark,oklch(76.9%_0.188_70.08_/_0.4))_40%,_transparent))] bg-[var(--zui-alert-warning-bg,color-mix(in_oklch,_var(--zui-status-warning,oklch(76.9%_0.188_70.08_/_0.1))_10%,_transparent))] dark:bg-[var(--zui-alert-warning-bg-dark,color-mix(in_oklch,_var(--zui-status-warning-dark,oklch(76.9%_0.188_70.08_/_0.1))_10%,_transparent))] text-[color:var(--zui-alert-warning-fg,var(--zui-status-warning,oklch(27.9%_0.077_45.635)))] dark:text-[color:var(--zui-alert-warning-fg-dark,var(--zui-status-warning-dark,oklch(98.7%_0.022_95.277)))]",
   error:
-    "border-[color:var(--zui-alert-error-border,color-mix(in oklch, var(--zui-status-error,oklch(64.5%_0.246_16.439_/_0.5)) 40%, transparent))] dark:border-[color:var(--zui-alert-error-border-dark,color-mix(in oklch, var(--zui-status-error-dark,oklch(64.5%_0.246_16.439_/_0.5)) 40%, transparent))] bg-[var(--zui-alert-error-bg,color-mix(in oklch, var(--zui-status-error,oklch(64.5%_0.246_16.439_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-alert-error-bg-dark,color-mix(in oklch, var(--zui-status-error-dark,oklch(64.5%_0.246_16.439_/_0.1)) 10%, transparent))] text-[color:var(--zui-alert-error-fg,var(--zui-status-error,oklch(27.1%_0.105_12.094)))] dark:text-[color:var(--zui-alert-error-fg-dark,var(--zui-status-error-dark,oklch(96.9%_0.015_12.422)))]",
-  info: "border-[color:var(--zui-alert-info-border,color-mix(in oklch, var(--zui-status-info,oklch(68.5%_0.169_237.323_/_0.4)) 40%, transparent))] dark:border-[color:var(--zui-alert-info-border-dark,color-mix(in oklch, var(--zui-status-info-dark,oklch(68.5%_0.169_237.323_/_0.4)) 40%, transparent))] bg-[var(--zui-alert-info-bg,color-mix(in oklch, var(--zui-status-info,oklch(68.5%_0.169_237.323_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-alert-info-bg-dark,color-mix(in oklch, var(--zui-status-info-dark,oklch(68.5%_0.169_237.323_/_0.1)) 10%, transparent))] text-[color:var(--zui-alert-info-fg,var(--zui-status-info,oklch(29.3%_0.066_243.157)))] dark:text-[color:var(--zui-alert-info-fg-dark,var(--zui-status-info-dark,oklch(97.7%_0.013_236.62)))]",
+    "border-[color:var(--zui-alert-error-border,color-mix(in_oklch,_var(--zui-status-error,oklch(64.5%_0.246_16.439_/_0.5))_40%,_transparent))] dark:border-[color:var(--zui-alert-error-border-dark,color-mix(in_oklch,_var(--zui-status-error-dark,oklch(64.5%_0.246_16.439_/_0.5))_40%,_transparent))] bg-[var(--zui-alert-error-bg,color-mix(in_oklch,_var(--zui-status-error,oklch(64.5%_0.246_16.439_/_0.1))_10%,_transparent))] dark:bg-[var(--zui-alert-error-bg-dark,color-mix(in_oklch,_var(--zui-status-error-dark,oklch(64.5%_0.246_16.439_/_0.1))_10%,_transparent))] text-[color:var(--zui-alert-error-fg,var(--zui-status-error,oklch(27.1%_0.105_12.094)))] dark:text-[color:var(--zui-alert-error-fg-dark,var(--zui-status-error-dark,oklch(96.9%_0.015_12.422)))]",
+  info: "border-[color:var(--zui-alert-info-border,color-mix(in_oklch,_var(--zui-status-info,oklch(68.5%_0.169_237.323_/_0.4))_40%,_transparent))] dark:border-[color:var(--zui-alert-info-border-dark,color-mix(in_oklch,_var(--zui-status-info-dark,oklch(68.5%_0.169_237.323_/_0.4))_40%,_transparent))] bg-[var(--zui-alert-info-bg,color-mix(in_oklch,_var(--zui-status-info,oklch(68.5%_0.169_237.323_/_0.1))_10%,_transparent))] dark:bg-[var(--zui-alert-info-bg-dark,color-mix(in_oklch,_var(--zui-status-info-dark,oklch(68.5%_0.169_237.323_/_0.1))_10%,_transparent))] text-[color:var(--zui-alert-info-fg,var(--zui-status-info,oklch(29.3%_0.066_243.157)))] dark:text-[color:var(--zui-alert-info-fg-dark,var(--zui-status-info-dark,oklch(97.7%_0.013_236.62)))]",
   ghost:
     "border-[color:var(--zui-alert-ghost-border,var(--zui-border,transparent))] dark:border-[color:var(--zui-alert-ghost-border-dark,var(--zui-border-dark,transparent))] bg-[var(--zui-alert-ghost-bg,var(--zui-surface-soft,transparent))] dark:bg-[var(--zui-alert-ghost-bg-dark,var(--zui-surface-soft-dark,transparent))] text-[color:var(--zui-alert-ghost-fg,var(--zui-fg-muted,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-alert-ghost-fg-dark,var(--zui-fg-muted-dark,oklch(92.9%_0.013_255.508)))]",
-  blue: "border-[color:var(--zui-alert-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[color:var(--zui-alert-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] bg-[var(--zui-alert-blue-bg,color-mix(in oklch, var(--zui-color-blue,#2563eb) 10%, transparent))] dark:bg-[var(--zui-alert-blue-bg-dark,color-mix(in oklch, var(--zui-color-blue-dark,#3b82f6) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-blue-fg,var(--zui-color-blue,#0f172a))] dark:text-[color:var(--zui-alert-blue-fg-dark,var(--zui-color-blue-dark,#f8fafc))]",
-  cyan: "border-[color:var(--zui-alert-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[color:var(--zui-alert-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] bg-[var(--zui-alert-cyan-bg,color-mix(in oklch, var(--zui-color-cyan,#0891b2) 10%, transparent))] dark:bg-[var(--zui-alert-cyan-bg-dark,color-mix(in oklch, var(--zui-color-cyan-dark,#22d3ee) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-cyan-fg,var(--zui-color-cyan,#0f172a))] dark:text-[color:var(--zui-alert-cyan-fg-dark,var(--zui-color-cyan-dark,#f8fafc))]",
+  blue: "border-[color:var(--zui-alert-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[color:var(--zui-alert-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] bg-[var(--zui-alert-blue-bg,color-mix(in_oklch,_var(--zui-color-blue,#2563eb)_10%,_transparent))] dark:bg-[var(--zui-alert-blue-bg-dark,color-mix(in_oklch,_var(--zui-color-blue-dark,#3b82f6)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-blue-fg,var(--zui-color-blue,#0f172a))] dark:text-[color:var(--zui-alert-blue-fg-dark,var(--zui-color-blue-dark,#f8fafc))]",
+  cyan: "border-[color:var(--zui-alert-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[color:var(--zui-alert-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] bg-[var(--zui-alert-cyan-bg,color-mix(in_oklch,_var(--zui-color-cyan,#0891b2)_10%,_transparent))] dark:bg-[var(--zui-alert-cyan-bg-dark,color-mix(in_oklch,_var(--zui-color-cyan-dark,#22d3ee)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-cyan-fg,var(--zui-color-cyan,#0f172a))] dark:text-[color:var(--zui-alert-cyan-fg-dark,var(--zui-color-cyan-dark,#f8fafc))]",
   green:
-    "border-[color:var(--zui-alert-green-border,var(--zui-color-green,#16a34a))] dark:border-[color:var(--zui-alert-green-border-dark,var(--zui-color-green-dark,#22c55e))] bg-[var(--zui-alert-green-bg,color-mix(in oklch, var(--zui-color-green,#16a34a) 10%, transparent))] dark:bg-[var(--zui-alert-green-bg-dark,color-mix(in oklch, var(--zui-color-green-dark,#22c55e) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-green-fg,var(--zui-color-green,#0f172a))] dark:text-[color:var(--zui-alert-green-fg-dark,var(--zui-color-green-dark,#f8fafc))]",
-  lime: "border-[color:var(--zui-alert-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[color:var(--zui-alert-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] bg-[var(--zui-alert-lime-bg,color-mix(in oklch, var(--zui-color-lime,#65a30d) 10%, transparent))] dark:bg-[var(--zui-alert-lime-bg-dark,color-mix(in oklch, var(--zui-color-lime-dark,#a3e635) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-lime-fg,var(--zui-color-lime,#0f172a))] dark:text-[color:var(--zui-alert-lime-fg-dark,var(--zui-color-lime-dark,#f8fafc))]",
-  mint: "border-[color:var(--zui-alert-mint-border,var(--zui-color-mint,#10b981))] dark:border-[color:var(--zui-alert-mint-border-dark,var(--zui-color-mint-dark,#6ee7b7))] bg-[var(--zui-alert-mint-bg,color-mix(in oklch, var(--zui-color-mint,#10b981) 10%, transparent))] dark:bg-[var(--zui-alert-mint-bg-dark,color-mix(in oklch, var(--zui-color-mint-dark,#6ee7b7) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-mint-fg,var(--zui-color-mint,#0f172a))] dark:text-[color:var(--zui-alert-mint-fg-dark,var(--zui-color-mint-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-green-border,var(--zui-color-green,#16a34a))] dark:border-[color:var(--zui-alert-green-border-dark,var(--zui-color-green-dark,#22c55e))] bg-[var(--zui-alert-green-bg,color-mix(in_oklch,_var(--zui-color-green,#16a34a)_10%,_transparent))] dark:bg-[var(--zui-alert-green-bg-dark,color-mix(in_oklch,_var(--zui-color-green-dark,#22c55e)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-green-fg,var(--zui-color-green,#0f172a))] dark:text-[color:var(--zui-alert-green-fg-dark,var(--zui-color-green-dark,#f8fafc))]",
+  lime: "border-[color:var(--zui-alert-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[color:var(--zui-alert-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] bg-[var(--zui-alert-lime-bg,color-mix(in_oklch,_var(--zui-color-lime,#65a30d)_10%,_transparent))] dark:bg-[var(--zui-alert-lime-bg-dark,color-mix(in_oklch,_var(--zui-color-lime-dark,#a3e635)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-lime-fg,var(--zui-color-lime,#0f172a))] dark:text-[color:var(--zui-alert-lime-fg-dark,var(--zui-color-lime-dark,#f8fafc))]",
+  mint: "border-[color:var(--zui-alert-mint-border,var(--zui-color-mint,#10b981))] dark:border-[color:var(--zui-alert-mint-border-dark,var(--zui-color-mint-dark,#6ee7b7))] bg-[var(--zui-alert-mint-bg,color-mix(in_oklch,_var(--zui-color-mint,#10b981)_10%,_transparent))] dark:bg-[var(--zui-alert-mint-bg-dark,color-mix(in_oklch,_var(--zui-color-mint-dark,#6ee7b7)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-mint-fg,var(--zui-color-mint,#0f172a))] dark:text-[color:var(--zui-alert-mint-fg-dark,var(--zui-color-mint-dark,#f8fafc))]",
   ocean:
-    "border-[color:var(--zui-alert-ocean-border,var(--zui-color-ocean,#0284c7))] dark:border-[color:var(--zui-alert-ocean-border-dark,var(--zui-color-ocean-dark,#38bdf8))] bg-[var(--zui-alert-ocean-bg,color-mix(in oklch, var(--zui-color-ocean,#0284c7) 10%, transparent))] dark:bg-[var(--zui-alert-ocean-bg-dark,color-mix(in oklch, var(--zui-color-ocean-dark,#38bdf8) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-ocean-fg,var(--zui-color-ocean,#0f172a))] dark:text-[color:var(--zui-alert-ocean-fg-dark,var(--zui-color-ocean-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-ocean-border,var(--zui-color-ocean,#0284c7))] dark:border-[color:var(--zui-alert-ocean-border-dark,var(--zui-color-ocean-dark,#38bdf8))] bg-[var(--zui-alert-ocean-bg,color-mix(in_oklch,_var(--zui-color-ocean,#0284c7)_10%,_transparent))] dark:bg-[var(--zui-alert-ocean-bg-dark,color-mix(in_oklch,_var(--zui-color-ocean-dark,#38bdf8)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-ocean-fg,var(--zui-color-ocean,#0f172a))] dark:text-[color:var(--zui-alert-ocean-fg-dark,var(--zui-color-ocean-dark,#f8fafc))]",
   sapphire:
-    "border-[color:var(--zui-alert-sapphire-border,var(--zui-color-sapphire,#1d4ed8))] dark:border-[color:var(--zui-alert-sapphire-border-dark,var(--zui-color-sapphire-dark,#60a5fa))] bg-[var(--zui-alert-sapphire-bg,color-mix(in oklch, var(--zui-color-sapphire,#1d4ed8) 10%, transparent))] dark:bg-[var(--zui-alert-sapphire-bg-dark,color-mix(in oklch, var(--zui-color-sapphire-dark,#60a5fa) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-sapphire-fg,var(--zui-color-sapphire,#0f172a))] dark:text-[color:var(--zui-alert-sapphire-fg-dark,var(--zui-color-sapphire-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-sapphire-border,var(--zui-color-sapphire,#1d4ed8))] dark:border-[color:var(--zui-alert-sapphire-border-dark,var(--zui-color-sapphire-dark,#60a5fa))] bg-[var(--zui-alert-sapphire-bg,color-mix(in_oklch,_var(--zui-color-sapphire,#1d4ed8)_10%,_transparent))] dark:bg-[var(--zui-alert-sapphire-bg-dark,color-mix(in_oklch,_var(--zui-color-sapphire-dark,#60a5fa)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-sapphire-fg,var(--zui-color-sapphire,#0f172a))] dark:text-[color:var(--zui-alert-sapphire-fg-dark,var(--zui-color-sapphire-dark,#f8fafc))]",
   lavender:
-    "border-[color:var(--zui-alert-lavender-border,var(--zui-color-lavender,#8b5cf6))] dark:border-[color:var(--zui-alert-lavender-border-dark,var(--zui-color-lavender-dark,#a78bfa))] bg-[var(--zui-alert-lavender-bg,color-mix(in oklch, var(--zui-color-lavender,#8b5cf6) 10%, transparent))] dark:bg-[var(--zui-alert-lavender-bg-dark,color-mix(in oklch, var(--zui-color-lavender-dark,#a78bfa) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-lavender-fg,var(--zui-color-lavender,#0f172a))] dark:text-[color:var(--zui-alert-lavender-fg-dark,var(--zui-color-lavender-dark,#f8fafc))]",
-  ruby: "border-[color:var(--zui-alert-ruby-border,var(--zui-color-ruby,#be123c))] dark:border-[color:var(--zui-alert-ruby-border-dark,var(--zui-color-ruby-dark,#fb7185))] bg-[var(--zui-alert-ruby-bg,color-mix(in oklch, var(--zui-color-ruby,#be123c) 10%, transparent))] dark:bg-[var(--zui-alert-ruby-bg-dark,color-mix(in oklch, var(--zui-color-ruby-dark,#fb7185) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-ruby-fg,var(--zui-color-ruby,#0f172a))] dark:text-[color:var(--zui-alert-ruby-fg-dark,var(--zui-color-ruby-dark,#f8fafc))]",
-  red: "border-[color:var(--zui-alert-red-border,var(--zui-color-red,#dc2626))] dark:border-[color:var(--zui-alert-red-border-dark,var(--zui-color-red-dark,#ef4444))] bg-[var(--zui-alert-red-bg,color-mix(in oklch, var(--zui-color-red,#dc2626) 10%, transparent))] dark:bg-[var(--zui-alert-red-bg-dark,color-mix(in oklch, var(--zui-color-red-dark,#ef4444) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-red-fg,var(--zui-color-red,#0f172a))] dark:text-[color:var(--zui-alert-red-fg-dark,var(--zui-color-red-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-lavender-border,var(--zui-color-lavender,#8b5cf6))] dark:border-[color:var(--zui-alert-lavender-border-dark,var(--zui-color-lavender-dark,#a78bfa))] bg-[var(--zui-alert-lavender-bg,color-mix(in_oklch,_var(--zui-color-lavender,#8b5cf6)_10%,_transparent))] dark:bg-[var(--zui-alert-lavender-bg-dark,color-mix(in_oklch,_var(--zui-color-lavender-dark,#a78bfa)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-lavender-fg,var(--zui-color-lavender,#0f172a))] dark:text-[color:var(--zui-alert-lavender-fg-dark,var(--zui-color-lavender-dark,#f8fafc))]",
+  ruby: "border-[color:var(--zui-alert-ruby-border,var(--zui-color-ruby,#be123c))] dark:border-[color:var(--zui-alert-ruby-border-dark,var(--zui-color-ruby-dark,#fb7185))] bg-[var(--zui-alert-ruby-bg,color-mix(in_oklch,_var(--zui-color-ruby,#be123c)_10%,_transparent))] dark:bg-[var(--zui-alert-ruby-bg-dark,color-mix(in_oklch,_var(--zui-color-ruby-dark,#fb7185)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-ruby-fg,var(--zui-color-ruby,#0f172a))] dark:text-[color:var(--zui-alert-ruby-fg-dark,var(--zui-color-ruby-dark,#f8fafc))]",
+  red: "border-[color:var(--zui-alert-red-border,var(--zui-color-red,#dc2626))] dark:border-[color:var(--zui-alert-red-border-dark,var(--zui-color-red-dark,#ef4444))] bg-[var(--zui-alert-red-bg,color-mix(in_oklch,_var(--zui-color-red,#dc2626)_10%,_transparent))] dark:bg-[var(--zui-alert-red-bg-dark,color-mix(in_oklch,_var(--zui-color-red-dark,#ef4444)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-red-fg,var(--zui-color-red,#0f172a))] dark:text-[color:var(--zui-alert-red-fg-dark,var(--zui-color-red-dark,#f8fafc))]",
   slate:
-    "border-[color:var(--zui-alert-slate-border,var(--zui-color-slate,#475569))] dark:border-[color:var(--zui-alert-slate-border-dark,var(--zui-color-slate-dark,#64748b))] bg-[var(--zui-alert-slate-bg,color-mix(in oklch, var(--zui-color-slate,#475569) 10%, transparent))] dark:bg-[var(--zui-alert-slate-bg-dark,color-mix(in oklch, var(--zui-color-slate-dark,#64748b) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-slate-fg,var(--zui-color-slate,#0f172a))] dark:text-[color:var(--zui-alert-slate-fg-dark,var(--zui-color-slate-dark,#f8fafc))]",
-  zinc: "border-[color:var(--zui-alert-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[color:var(--zui-alert-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] bg-[var(--zui-alert-zinc-bg,color-mix(in oklch, var(--zui-color-zinc,#52525b) 10%, transparent))] dark:bg-[var(--zui-alert-zinc-bg-dark,color-mix(in oklch, var(--zui-color-zinc-dark,#71717a) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-zinc-fg,var(--zui-color-zinc,#0f172a))] dark:text-[color:var(--zui-alert-zinc-fg-dark,var(--zui-color-zinc-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-slate-border,var(--zui-color-slate,#475569))] dark:border-[color:var(--zui-alert-slate-border-dark,var(--zui-color-slate-dark,#64748b))] bg-[var(--zui-alert-slate-bg,color-mix(in_oklch,_var(--zui-color-slate,#475569)_10%,_transparent))] dark:bg-[var(--zui-alert-slate-bg-dark,color-mix(in_oklch,_var(--zui-color-slate-dark,#64748b)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-slate-fg,var(--zui-color-slate,#0f172a))] dark:text-[color:var(--zui-alert-slate-fg-dark,var(--zui-color-slate-dark,#f8fafc))]",
+  zinc: "border-[color:var(--zui-alert-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[color:var(--zui-alert-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] bg-[var(--zui-alert-zinc-bg,color-mix(in_oklch,_var(--zui-color-zinc,#52525b)_10%,_transparent))] dark:bg-[var(--zui-alert-zinc-bg-dark,color-mix(in_oklch,_var(--zui-color-zinc-dark,#71717a)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-zinc-fg,var(--zui-color-zinc,#0f172a))] dark:text-[color:var(--zui-alert-zinc-fg-dark,var(--zui-color-zinc-dark,#f8fafc))]",
   stone:
-    "border-[color:var(--zui-alert-stone-border,var(--zui-color-stone,#57534e))] dark:border-[color:var(--zui-alert-stone-border-dark,var(--zui-color-stone-dark,#78716c))] bg-[var(--zui-alert-stone-bg,color-mix(in oklch, var(--zui-color-stone,#57534e) 10%, transparent))] dark:bg-[var(--zui-alert-stone-bg-dark,color-mix(in oklch, var(--zui-color-stone-dark,#78716c) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-stone-fg,var(--zui-color-stone,#0f172a))] dark:text-[color:var(--zui-alert-stone-fg-dark,var(--zui-color-stone-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-stone-border,var(--zui-color-stone,#57534e))] dark:border-[color:var(--zui-alert-stone-border-dark,var(--zui-color-stone-dark,#78716c))] bg-[var(--zui-alert-stone-bg,color-mix(in_oklch,_var(--zui-color-stone,#57534e)_10%,_transparent))] dark:bg-[var(--zui-alert-stone-bg-dark,color-mix(in_oklch,_var(--zui-color-stone-dark,#78716c)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-stone-fg,var(--zui-color-stone,#0f172a))] dark:text-[color:var(--zui-alert-stone-fg-dark,var(--zui-color-stone-dark,#f8fafc))]",
   royal:
-    "border-[color:var(--zui-alert-royal-border,var(--zui-color-royal,#4338ca))] dark:border-[color:var(--zui-alert-royal-border-dark,var(--zui-color-royal-dark,#818cf8))] bg-[var(--zui-alert-royal-bg,color-mix(in oklch, var(--zui-color-royal,#4338ca) 10%, transparent))] dark:bg-[var(--zui-alert-royal-bg-dark,color-mix(in oklch, var(--zui-color-royal-dark,#818cf8) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-royal-fg,var(--zui-color-royal,#0f172a))] dark:text-[color:var(--zui-alert-royal-fg-dark,var(--zui-color-royal-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-royal-border,var(--zui-color-royal,#4338ca))] dark:border-[color:var(--zui-alert-royal-border-dark,var(--zui-color-royal-dark,#818cf8))] bg-[var(--zui-alert-royal-bg,color-mix(in_oklch,_var(--zui-color-royal,#4338ca)_10%,_transparent))] dark:bg-[var(--zui-alert-royal-bg-dark,color-mix(in_oklch,_var(--zui-color-royal-dark,#818cf8)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-royal-fg,var(--zui-color-royal,#0f172a))] dark:text-[color:var(--zui-alert-royal-fg-dark,var(--zui-color-royal-dark,#f8fafc))]",
   electric:
-    "border-[color:var(--zui-alert-electric-border,var(--zui-color-electric,#0ea5e9))] dark:border-[color:var(--zui-alert-electric-border-dark,var(--zui-color-electric-dark,#38bdf8))] bg-[var(--zui-alert-electric-bg,color-mix(in oklch, var(--zui-color-electric,#0ea5e9) 10%, transparent))] dark:bg-[var(--zui-alert-electric-bg-dark,color-mix(in oklch, var(--zui-color-electric-dark,#38bdf8) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-electric-fg,var(--zui-color-electric,#0f172a))] dark:text-[color:var(--zui-alert-electric-fg-dark,var(--zui-color-electric-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-electric-border,var(--zui-color-electric,#0ea5e9))] dark:border-[color:var(--zui-alert-electric-border-dark,var(--zui-color-electric-dark,#38bdf8))] bg-[var(--zui-alert-electric-bg,color-mix(in_oklch,_var(--zui-color-electric,#0ea5e9)_10%,_transparent))] dark:bg-[var(--zui-alert-electric-bg-dark,color-mix(in_oklch,_var(--zui-color-electric-dark,#38bdf8)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-electric-fg,var(--zui-color-electric,#0f172a))] dark:text-[color:var(--zui-alert-electric-fg-dark,var(--zui-color-electric-dark,#f8fafc))]",
   forest:
-    "border-[color:var(--zui-alert-forest-border,var(--zui-color-forest,#166534))] dark:border-[color:var(--zui-alert-forest-border-dark,var(--zui-color-forest-dark,#4ade80))] bg-[var(--zui-alert-forest-bg,color-mix(in oklch, var(--zui-color-forest,#166534) 10%, transparent))] dark:bg-[var(--zui-alert-forest-bg-dark,color-mix(in oklch, var(--zui-color-forest-dark,#4ade80) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-forest-fg,var(--zui-color-forest,#0f172a))] dark:text-[color:var(--zui-alert-forest-fg-dark,var(--zui-color-forest-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-forest-border,var(--zui-color-forest,#166534))] dark:border-[color:var(--zui-alert-forest-border-dark,var(--zui-color-forest-dark,#4ade80))] bg-[var(--zui-alert-forest-bg,color-mix(in_oklch,_var(--zui-color-forest,#166534)_10%,_transparent))] dark:bg-[var(--zui-alert-forest-bg-dark,color-mix(in_oklch,_var(--zui-color-forest-dark,#4ade80)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-forest-fg,var(--zui-color-forest,#0f172a))] dark:text-[color:var(--zui-alert-forest-fg-dark,var(--zui-color-forest-dark,#f8fafc))]",
   sunset:
-    "border-[color:var(--zui-alert-sunset-border,var(--zui-color-sunset,#ea580c))] dark:border-[color:var(--zui-alert-sunset-border-dark,var(--zui-color-sunset-dark,#fb923c))] bg-[var(--zui-alert-sunset-bg,color-mix(in oklch, var(--zui-color-sunset,#ea580c) 10%, transparent))] dark:bg-[var(--zui-alert-sunset-bg-dark,color-mix(in oklch, var(--zui-color-sunset-dark,#fb923c) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-sunset-fg,var(--zui-color-sunset,#0f172a))] dark:text-[color:var(--zui-alert-sunset-fg-dark,var(--zui-color-sunset-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-sunset-border,var(--zui-color-sunset,#ea580c))] dark:border-[color:var(--zui-alert-sunset-border-dark,var(--zui-color-sunset-dark,#fb923c))] bg-[var(--zui-alert-sunset-bg,color-mix(in_oklch,_var(--zui-color-sunset,#ea580c)_10%,_transparent))] dark:bg-[var(--zui-alert-sunset-bg-dark,color-mix(in_oklch,_var(--zui-color-sunset-dark,#fb923c)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-sunset-fg,var(--zui-color-sunset,#0f172a))] dark:text-[color:var(--zui-alert-sunset-fg-dark,var(--zui-color-sunset-dark,#f8fafc))]",
   magenta:
-    "border-[color:var(--zui-alert-magenta-border,var(--zui-color-magenta,#c026d3))] dark:border-[color:var(--zui-alert-magenta-border-dark,var(--zui-color-magenta-dark,#e879f9))] bg-[var(--zui-alert-magenta-bg,color-mix(in oklch, var(--zui-color-magenta,#c026d3) 10%, transparent))] dark:bg-[var(--zui-alert-magenta-bg-dark,color-mix(in oklch, var(--zui-color-magenta-dark,#e879f9) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-magenta-fg,var(--zui-color-magenta,#0f172a))] dark:text-[color:var(--zui-alert-magenta-fg-dark,var(--zui-color-magenta-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-magenta-border,var(--zui-color-magenta,#c026d3))] dark:border-[color:var(--zui-alert-magenta-border-dark,var(--zui-color-magenta-dark,#e879f9))] bg-[var(--zui-alert-magenta-bg,color-mix(in_oklch,_var(--zui-color-magenta,#c026d3)_10%,_transparent))] dark:bg-[var(--zui-alert-magenta-bg-dark,color-mix(in_oklch,_var(--zui-color-magenta-dark,#e879f9)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-magenta-fg,var(--zui-color-magenta,#0f172a))] dark:text-[color:var(--zui-alert-magenta-fg-dark,var(--zui-color-magenta-dark,#f8fafc))]",
   crimson:
-    "border-[color:var(--zui-alert-crimson-border,var(--zui-color-crimson,#b91c1c))] dark:border-[color:var(--zui-alert-crimson-border-dark,var(--zui-color-crimson-dark,#f87171))] bg-[var(--zui-alert-crimson-bg,color-mix(in oklch, var(--zui-color-crimson,#b91c1c) 10%, transparent))] dark:bg-[var(--zui-alert-crimson-bg-dark,color-mix(in oklch, var(--zui-color-crimson-dark,#f87171) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-crimson-fg,var(--zui-color-crimson,#0f172a))] dark:text-[color:var(--zui-alert-crimson-fg-dark,var(--zui-color-crimson-dark,#f8fafc))]",
-  aqua: "border-[color:var(--zui-alert-aqua-border,var(--zui-color-aqua,#0f766e))] dark:border-[color:var(--zui-alert-aqua-border-dark,var(--zui-color-aqua-dark,#2dd4bf))] bg-[var(--zui-alert-aqua-bg,color-mix(in oklch, var(--zui-color-aqua,#0f766e) 10%, transparent))] dark:bg-[var(--zui-alert-aqua-bg-dark,color-mix(in oklch, var(--zui-color-aqua-dark,#2dd4bf) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-aqua-fg,var(--zui-color-aqua,#0f172a))] dark:text-[color:var(--zui-alert-aqua-fg-dark,var(--zui-color-aqua-dark,#f8fafc))]",
-  plum: "border-[color:var(--zui-alert-plum-border,var(--zui-color-plum,#7e22ce))] dark:border-[color:var(--zui-alert-plum-border-dark,var(--zui-color-plum-dark,#c084fc))] bg-[var(--zui-alert-plum-bg,color-mix(in oklch, var(--zui-color-plum,#7e22ce) 10%, transparent))] dark:bg-[var(--zui-alert-plum-bg-dark,color-mix(in oklch, var(--zui-color-plum-dark,#c084fc) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-plum-fg,var(--zui-color-plum,#0f172a))] dark:text-[color:var(--zui-alert-plum-fg-dark,var(--zui-color-plum-dark,#f8fafc))]",
+    "border-[color:var(--zui-alert-crimson-border,var(--zui-color-crimson,#b91c1c))] dark:border-[color:var(--zui-alert-crimson-border-dark,var(--zui-color-crimson-dark,#f87171))] bg-[var(--zui-alert-crimson-bg,color-mix(in_oklch,_var(--zui-color-crimson,#b91c1c)_10%,_transparent))] dark:bg-[var(--zui-alert-crimson-bg-dark,color-mix(in_oklch,_var(--zui-color-crimson-dark,#f87171)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-crimson-fg,var(--zui-color-crimson,#0f172a))] dark:text-[color:var(--zui-alert-crimson-fg-dark,var(--zui-color-crimson-dark,#f8fafc))]",
+  aqua: "border-[color:var(--zui-alert-aqua-border,var(--zui-color-aqua,#0f766e))] dark:border-[color:var(--zui-alert-aqua-border-dark,var(--zui-color-aqua-dark,#2dd4bf))] bg-[var(--zui-alert-aqua-bg,color-mix(in_oklch,_var(--zui-color-aqua,#0f766e)_10%,_transparent))] dark:bg-[var(--zui-alert-aqua-bg-dark,color-mix(in_oklch,_var(--zui-color-aqua-dark,#2dd4bf)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-aqua-fg,var(--zui-color-aqua,#0f172a))] dark:text-[color:var(--zui-alert-aqua-fg-dark,var(--zui-color-aqua-dark,#f8fafc))]",
+  plum: "border-[color:var(--zui-alert-plum-border,var(--zui-color-plum,#7e22ce))] dark:border-[color:var(--zui-alert-plum-border-dark,var(--zui-color-plum-dark,#c084fc))] bg-[var(--zui-alert-plum-bg,color-mix(in_oklch,_var(--zui-color-plum,#7e22ce)_10%,_transparent))] dark:bg-[var(--zui-alert-plum-bg-dark,color-mix(in_oklch,_var(--zui-color-plum-dark,#c084fc)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-plum-fg,var(--zui-color-plum,#0f172a))] dark:text-[color:var(--zui-alert-plum-fg-dark,var(--zui-color-plum-dark,#f8fafc))]",
   purple:
-    "border-[color:var(--zui-alert-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[color:var(--zui-alert-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] bg-[var(--zui-alert-purple-bg,var(--zui-color-purple,oklch(97.7%_0.014_308.299)))] dark:bg-[var(--zui-alert-purple-bg-dark,color-mix(in oklch, var(--zui-color-purple-dark,oklch(29.1%_0.149_302.717)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-purple-fg,var(--zui-color-purple,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-purple-fg-dark,var(--zui-color-purple-dark,oklch(98.4%_0.003_247.858)))]",
-  pink: "border-[color:var(--zui-alert-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[color:var(--zui-alert-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] bg-[var(--zui-alert-pink-bg,var(--zui-color-pink,oklch(97.1%_0.014_343.198)))] dark:bg-[var(--zui-alert-pink-bg-dark,color-mix(in oklch, var(--zui-color-pink-dark,oklch(28.4%_0.109_3.907)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-pink-fg,var(--zui-color-pink,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-pink-fg-dark,var(--zui-color-pink-dark,oklch(98.4%_0.003_247.858)))]",
+    "border-[color:var(--zui-alert-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[color:var(--zui-alert-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] bg-[var(--zui-alert-purple-bg,var(--zui-color-purple,oklch(97.7%_0.014_308.299)))] dark:bg-[var(--zui-alert-purple-bg-dark,color-mix(in_oklch,_var(--zui-color-purple-dark,oklch(29.1%_0.149_302.717))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-purple-fg,var(--zui-color-purple,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-purple-fg-dark,var(--zui-color-purple-dark,oklch(98.4%_0.003_247.858)))]",
+  pink: "border-[color:var(--zui-alert-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[color:var(--zui-alert-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] bg-[var(--zui-alert-pink-bg,var(--zui-color-pink,oklch(97.1%_0.014_343.198)))] dark:bg-[var(--zui-alert-pink-bg-dark,color-mix(in_oklch,_var(--zui-color-pink-dark,oklch(28.4%_0.109_3.907))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-pink-fg,var(--zui-color-pink,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-pink-fg-dark,var(--zui-color-pink-dark,oklch(98.4%_0.003_247.858)))]",
   orange:
-    "border-[color:var(--zui-alert-orange-border,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:border-[color:var(--zui-alert-orange-border-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] bg-[var(--zui-alert-orange-bg,var(--zui-color-orange,oklch(98%_0.016_73.684)))] dark:bg-[var(--zui-alert-orange-bg-dark,color-mix(in oklch, var(--zui-color-orange-dark,oklch(26.6%_0.079_36.259)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-orange-fg,var(--zui-color-orange,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-orange-fg-dark,var(--zui-color-orange-dark,oklch(98.4%_0.003_247.858)))]",
+    "border-[color:var(--zui-alert-orange-border,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:border-[color:var(--zui-alert-orange-border-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] bg-[var(--zui-alert-orange-bg,var(--zui-color-orange,oklch(98%_0.016_73.684)))] dark:bg-[var(--zui-alert-orange-bg-dark,color-mix(in_oklch,_var(--zui-color-orange-dark,oklch(26.6%_0.079_36.259))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-orange-fg,var(--zui-color-orange,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-orange-fg-dark,var(--zui-color-orange-dark,oklch(98.4%_0.003_247.858)))]",
   yellow:
-    "border-[color:var(--zui-alert-yellow-border,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:border-[color:var(--zui-alert-yellow-border-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] bg-[var(--zui-alert-yellow-bg,var(--zui-color-yellow,oklch(98.7%_0.026_102.212)))] dark:bg-[var(--zui-alert-yellow-bg-dark,color-mix(in oklch, var(--zui-color-yellow-dark,oklch(28.6%_0.066_53.813)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-yellow-fg,var(--zui-color-yellow,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-yellow-fg-dark,var(--zui-color-yellow-dark,oklch(98.4%_0.003_247.858)))]",
-  teal: "border-[color:var(--zui-alert-teal-border,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:border-[color:var(--zui-alert-teal-border-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] bg-[var(--zui-alert-teal-bg,var(--zui-color-teal,oklch(98.4%_0.014_180.72)))] dark:bg-[var(--zui-alert-teal-bg-dark,color-mix(in oklch, var(--zui-color-teal-dark,oklch(27.7%_0.046_192.524)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-teal-fg,var(--zui-color-teal,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-teal-fg-dark,var(--zui-color-teal-dark,oklch(98.4%_0.003_247.858)))]",
+    "border-[color:var(--zui-alert-yellow-border,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:border-[color:var(--zui-alert-yellow-border-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] bg-[var(--zui-alert-yellow-bg,var(--zui-color-yellow,oklch(98.7%_0.026_102.212)))] dark:bg-[var(--zui-alert-yellow-bg-dark,color-mix(in_oklch,_var(--zui-color-yellow-dark,oklch(28.6%_0.066_53.813))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-yellow-fg,var(--zui-color-yellow,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-yellow-fg-dark,var(--zui-color-yellow-dark,oklch(98.4%_0.003_247.858)))]",
+  teal: "border-[color:var(--zui-alert-teal-border,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:border-[color:var(--zui-alert-teal-border-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] bg-[var(--zui-alert-teal-bg,var(--zui-color-teal,oklch(98.4%_0.014_180.72)))] dark:bg-[var(--zui-alert-teal-bg-dark,color-mix(in_oklch,_var(--zui-color-teal-dark,oklch(27.7%_0.046_192.524))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-teal-fg,var(--zui-color-teal,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-teal-fg-dark,var(--zui-color-teal-dark,oklch(98.4%_0.003_247.858)))]",
   indigo:
-    "border-[color:var(--zui-alert-indigo-border,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:border-[color:var(--zui-alert-indigo-border-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] bg-[var(--zui-alert-indigo-bg,var(--zui-color-indigo,oklch(96.2%_0.018_272.314)))] dark:bg-[var(--zui-alert-indigo-bg-dark,color-mix(in oklch, var(--zui-color-indigo-dark,oklch(25.7%_0.09_281.288)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-indigo-fg,var(--zui-color-indigo,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-indigo-fg-dark,var(--zui-color-indigo-dark,oklch(98.4%_0.003_247.858)))]",
-  gray: "border-[color:var(--zui-alert-gray-border,var(--zui-color-gray,oklch(27.8%_0.033_256.848)))] dark:border-[color:var(--zui-alert-gray-border-dark,var(--zui-color-gray-dark,oklch(44.6%_0.03_256.802)))] bg-[var(--zui-alert-gray-bg,var(--zui-color-gray,oklch(98.5%_0.002_247.839)))] dark:bg-[var(--zui-alert-gray-bg-dark,color-mix(in oklch, var(--zui-color-gray-dark,oklch(13%_0.028_261.692)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-gray-fg,var(--zui-color-gray,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-gray-fg-dark,var(--zui-color-gray-dark,oklch(98.4%_0.003_247.858)))]",
+    "border-[color:var(--zui-alert-indigo-border,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:border-[color:var(--zui-alert-indigo-border-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] bg-[var(--zui-alert-indigo-bg,var(--zui-color-indigo,oklch(96.2%_0.018_272.314)))] dark:bg-[var(--zui-alert-indigo-bg-dark,color-mix(in_oklch,_var(--zui-color-indigo-dark,oklch(25.7%_0.09_281.288))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-indigo-fg,var(--zui-color-indigo,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-indigo-fg-dark,var(--zui-color-indigo-dark,oklch(98.4%_0.003_247.858)))]",
+  gray: "border-[color:var(--zui-alert-gray-border,var(--zui-color-gray,oklch(27.8%_0.033_256.848)))] dark:border-[color:var(--zui-alert-gray-border-dark,var(--zui-color-gray-dark,oklch(44.6%_0.03_256.802)))] bg-[var(--zui-alert-gray-bg,var(--zui-color-gray,oklch(98.5%_0.002_247.839)))] dark:bg-[var(--zui-alert-gray-bg-dark,color-mix(in_oklch,_var(--zui-color-gray-dark,oklch(13%_0.028_261.692))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-gray-fg,var(--zui-color-gray,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-gray-fg-dark,var(--zui-color-gray-dark,oklch(98.4%_0.003_247.858)))]",
   violet:
-    "border-[color:var(--zui-alert-violet-border,var(--zui-color-violet,oklch(43.2%_0.232_292.759)))] dark:border-[color:var(--zui-alert-violet-border-dark,var(--zui-color-violet-dark,oklch(54.1%_0.281_293.009)))] bg-[var(--zui-alert-violet-bg,var(--zui-color-violet,oklch(96.9%_0.016_293.756)))] dark:bg-[var(--zui-alert-violet-bg-dark,color-mix(in oklch, var(--zui-color-violet-dark,oklch(28.3%_0.141_291.089)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-violet-fg,var(--zui-color-violet,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-violet-fg-dark,var(--zui-color-violet-dark,oklch(98.4%_0.003_247.858)))]",
+    "border-[color:var(--zui-alert-violet-border,var(--zui-color-violet,oklch(43.2%_0.232_292.759)))] dark:border-[color:var(--zui-alert-violet-border-dark,var(--zui-color-violet-dark,oklch(54.1%_0.281_293.009)))] bg-[var(--zui-alert-violet-bg,var(--zui-color-violet,oklch(96.9%_0.016_293.756)))] dark:bg-[var(--zui-alert-violet-bg-dark,color-mix(in_oklch,_var(--zui-color-violet-dark,oklch(28.3%_0.141_291.089))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-violet-fg,var(--zui-color-violet,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-violet-fg-dark,var(--zui-color-violet-dark,oklch(98.4%_0.003_247.858)))]",
   "gradient-blue":
     "border-[color:var(--zui-alert-gradient-blue-border,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:border-[color:var(--zui-alert-gradient-blue-border-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] bg-linear-to-r from-[var(--zui-alert-gradient-blue-from,var(--zui-color-blue,oklch(97%_0.014_254.604)))] dark:from-[var(--zui-alert-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(28.2%_0.091_267.935_/_0.7)))] to-[var(--zui-alert-gradient-blue-to,var(--zui-color-purple,oklch(97.7%_0.014_308.299)))] dark:to-[var(--zui-alert-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(29.1%_0.149_302.717_/_0.7)))] backdrop-blur-xl text-[color:var(--zui-alert-gradient-blue-fg,var(--zui-brand-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-gradient-blue-fg-dark,var(--zui-brand-fg-dark,oklch(98.4%_0.003_247.858)))]",
   "gradient-green":

package/src/design-system/skeleton.ts

@@ -62,25 +62,25 @@ export const zuiSkeletonAppearances = {
     "bg-[var(--zui-skeleton-subtle-bg,var(--zui-surface-muted,#00000012))] dark:bg-[var(--zui-skeleton-subtle-bg-dark,var(--zui-surface-muted-dark,#ffffff12))]",
   muted:
     "bg-[var(--zui-skeleton-muted-bg,var(--zui-fg-muted,oklch(92.9%_0.013_255.508_/_0.8)))] dark:bg-[var(--zui-skeleton-muted-bg-dark,var(--zui-fg-muted-dark,oklch(27.9%_0.041_260.031_/_0.8)))]",
-  sky: "bg-[var(--zui-skeleton-sky-bg,color-mix(in oklch, var(--zui-color-sky,oklch(68.5%_0.169_237.323_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-sky-bg-dark,color-mix(in oklch, var(--zui-color-sky-dark,oklch(68.5%_0.169_237.323_/_0.1)) 18%, transparent))]",
-  rose: "bg-[var(--zui-skeleton-rose-bg,color-mix(in oklch, var(--zui-color-rose,oklch(64.5%_0.246_16.439_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-rose-bg-dark,color-mix(in oklch, var(--zui-color-rose-dark,oklch(64.5%_0.246_16.439_/_0.1)) 18%, transparent))]",
+  sky: "bg-[var(--zui-skeleton-sky-bg,color-mix(in_oklch,var(--zui-color-sky,oklch(68.5%_0.169_237.323))_10%,transparent))] dark:bg-[var(--zui-skeleton-sky-bg-dark,color-mix(in_oklch,var(--zui-color-sky-dark,oklch(68.5%_0.169_237.323))_18%,transparent))]",
+  rose: "bg-[var(--zui-skeleton-rose-bg,color-mix(in_oklch,var(--zui-color-rose,oklch(64.5%_0.246_16.439))_10%,transparent))] dark:bg-[var(--zui-skeleton-rose-bg-dark,color-mix(in_oklch,var(--zui-color-rose-dark,oklch(64.5%_0.246_16.439))_18%,transparent))]",
   purple:
-    "bg-[var(--zui-skeleton-purple-bg,color-mix(in oklch, var(--zui-color-purple,oklch(62.7%_0.265_303.9_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-purple-bg-dark,color-mix(in oklch, var(--zui-color-purple-dark,oklch(62.7%_0.265_303.9_/_0.1)) 18%, transparent))]",
-  pink: "bg-[var(--zui-skeleton-pink-bg,color-mix(in oklch, var(--zui-color-pink,oklch(65.6%_0.241_354.308_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-pink-bg-dark,color-mix(in oklch, var(--zui-color-pink-dark,oklch(65.6%_0.241_354.308_/_0.1)) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-purple-bg,color-mix(in_oklch,var(--zui-color-purple,oklch(62.7%_0.265_303.9))_10%,transparent))] dark:bg-[var(--zui-skeleton-purple-bg-dark,color-mix(in_oklch,var(--zui-color-purple-dark,oklch(62.7%_0.265_303.9))_18%,transparent))]",
+  pink: "bg-[var(--zui-skeleton-pink-bg,color-mix(in_oklch,var(--zui-color-pink,oklch(65.6%_0.241_354.308))_10%,transparent))] dark:bg-[var(--zui-skeleton-pink-bg-dark,color-mix(in_oklch,var(--zui-color-pink-dark,oklch(65.6%_0.241_354.308))_18%,transparent))]",
   orange:
-    "bg-[var(--zui-skeleton-orange-bg,color-mix(in oklch, var(--zui-color-orange,oklch(70.5%_0.213_47.604_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-orange-bg-dark,color-mix(in oklch, var(--zui-color-orange-dark,oklch(70.5%_0.213_47.604_/_0.1)) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-orange-bg,color-mix(in_oklch,var(--zui-color-orange,oklch(70.5%_0.213_47.604))_10%,transparent))] dark:bg-[var(--zui-skeleton-orange-bg-dark,color-mix(in_oklch,var(--zui-color-orange-dark,oklch(70.5%_0.213_47.604))_18%,transparent))]",
   yellow:
-    "bg-[var(--zui-skeleton-yellow-bg,color-mix(in oklch, var(--zui-color-yellow,oklch(79.5%_0.184_86.047_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-yellow-bg-dark,color-mix(in oklch, var(--zui-color-yellow-dark,oklch(79.5%_0.184_86.047_/_0.1)) 18%, transparent))]",
-  teal: "bg-[var(--zui-skeleton-teal-bg,color-mix(in oklch, var(--zui-color-teal,oklch(70.4%_0.14_182.503_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-teal-bg-dark,color-mix(in oklch, var(--zui-color-teal-dark,oklch(70.4%_0.14_182.503_/_0.1)) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-yellow-bg,color-mix(in_oklch,var(--zui-color-yellow,oklch(79.5%_0.184_86.047))_10%,transparent))] dark:bg-[var(--zui-skeleton-yellow-bg-dark,color-mix(in_oklch,var(--zui-color-yellow-dark,oklch(79.5%_0.184_86.047))_18%,transparent))]",
+  teal: "bg-[var(--zui-skeleton-teal-bg,color-mix(in_oklch,var(--zui-color-teal,oklch(70.4%_0.14_182.503))_10%,transparent))] dark:bg-[var(--zui-skeleton-teal-bg-dark,color-mix(in_oklch,var(--zui-color-teal-dark,oklch(70.4%_0.14_182.503))_18%,transparent))]",
   indigo:
-    "bg-[var(--zui-skeleton-indigo-bg,color-mix(in oklch, var(--zui-color-indigo,oklch(58.5%_0.233_277.117_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-indigo-bg-dark,color-mix(in oklch, var(--zui-color-indigo-dark,oklch(58.5%_0.233_277.117_/_0.1)) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-indigo-bg,color-mix(in_oklch,var(--zui-color-indigo,oklch(58.5%_0.233_277.117))_10%,transparent))] dark:bg-[var(--zui-skeleton-indigo-bg-dark,color-mix(in_oklch,var(--zui-color-indigo-dark,oklch(58.5%_0.233_277.117))_18%,transparent))]",
   emerald:
-    "bg-[var(--zui-skeleton-emerald-bg,color-mix(in oklch, var(--zui-color-emerald,oklch(69.6%_0.17_162.48_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-emerald-bg-dark,color-mix(in oklch, var(--zui-color-emerald-dark,oklch(69.6%_0.17_162.48_/_0.1)) 18%, transparent))]",
-  gray: "bg-[var(--zui-skeleton-gray-bg,color-mix(in oklch, var(--zui-color-gray,oklch(55.1%_0.027_264.364_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-gray-bg-dark,color-mix(in oklch, var(--zui-color-gray-dark,oklch(55.1%_0.027_264.364_/_0.1)) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-emerald-bg,color-mix(in_oklch,var(--zui-color-emerald,oklch(69.6%_0.17_162.48))_10%,transparent))] dark:bg-[var(--zui-skeleton-emerald-bg-dark,color-mix(in_oklch,var(--zui-color-emerald-dark,oklch(69.6%_0.17_162.48))_18%,transparent))]",
+  gray: "bg-[var(--zui-skeleton-gray-bg,color-mix(in_oklch,var(--zui-color-gray,oklch(55.1%_0.027_264.364))_10%,transparent))] dark:bg-[var(--zui-skeleton-gray-bg-dark,color-mix(in_oklch,var(--zui-color-gray-dark,oklch(55.1%_0.027_264.364))_18%,transparent))]",
   amber:
-    "bg-[var(--zui-skeleton-amber-bg,color-mix(in oklch, var(--zui-color-amber,oklch(76.9%_0.188_70.08_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-amber-bg-dark,color-mix(in oklch, var(--zui-color-amber-dark,oklch(76.9%_0.188_70.08_/_0.1)) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-amber-bg,color-mix(in_oklch,var(--zui-color-amber,oklch(76.9%_0.188_70.08))_10%,transparent))] dark:bg-[var(--zui-skeleton-amber-bg-dark,color-mix(in_oklch,var(--zui-color-amber-dark,oklch(76.9%_0.188_70.08))_18%,transparent))]",
   violet:
-    "bg-[var(--zui-skeleton-violet-bg,color-mix(in oklch, var(--zui-color-violet,oklch(60.6%_0.25_292.717_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-skeleton-violet-bg-dark,color-mix(in oklch, var(--zui-color-violet-dark,oklch(60.6%_0.25_292.717_/_0.1)) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-violet-bg,color-mix(in_oklch,var(--zui-color-violet,oklch(60.6%_0.25_292.717))_10%,transparent))] dark:bg-[var(--zui-skeleton-violet-bg-dark,color-mix(in_oklch,var(--zui-color-violet-dark,oklch(60.6%_0.25_292.717))_18%,transparent))]",
   "gradient-blue":
     "bg-linear-to-r from-[var(--zui-skeleton-gradient-blue-from,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:from-[var(--zui-skeleton-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] to-[var(--zui-skeleton-gradient-blue-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-skeleton-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]",
   "gradient-green":
@@ -99,39 +99,39 @@ export const zuiSkeletonAppearances = {
     "bg-linear-to-r from-[var(--zui-skeleton-gradient-pink-from,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:from-[var(--zui-skeleton-gradient-pink-from-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] to-[var(--zui-skeleton-gradient-pink-to,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:to-[var(--zui-skeleton-gradient-pink-to-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))]",
   "gradient-orange":
     "bg-linear-to-r from-[var(--zui-skeleton-gradient-orange-from,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:from-[var(--zui-skeleton-gradient-orange-from-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] to-[var(--zui-skeleton-gradient-orange-to,var(--zui-color-red,oklch(44.4%_0.177_26.899)))] dark:to-[var(--zui-skeleton-gradient-orange-to-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))]",
-  blue: "bg-[var(--zui-skeleton-blue-bg,color-mix(in oklch, var(--zui-color-blue,#2563eb) 10%, transparent))] dark:bg-[var(--zui-skeleton-blue-bg-dark,color-mix(in oklch, var(--zui-color-blue-dark,#3b82f6) 18%, transparent))]",
-  cyan: "bg-[var(--zui-skeleton-cyan-bg,color-mix(in oklch, var(--zui-color-cyan,#0891b2) 10%, transparent))] dark:bg-[var(--zui-skeleton-cyan-bg-dark,color-mix(in oklch, var(--zui-color-cyan-dark,#22d3ee) 18%, transparent))]",
+  blue: "bg-[var(--zui-skeleton-blue-bg,color-mix(in_oklch,var(--zui-color-blue,#2563eb)_10%,transparent))] dark:bg-[var(--zui-skeleton-blue-bg-dark,color-mix(in_oklch,var(--zui-color-blue-dark,#3b82f6)_18%,transparent))]",
+  cyan: "bg-[var(--zui-skeleton-cyan-bg,color-mix(in_oklch,var(--zui-color-cyan,#0891b2)_10%,transparent))] dark:bg-[var(--zui-skeleton-cyan-bg-dark,color-mix(in_oklch,var(--zui-color-cyan-dark,#22d3ee)_18%,transparent))]",
   green:
-    "bg-[var(--zui-skeleton-green-bg,color-mix(in oklch, var(--zui-color-green,#16a34a) 10%, transparent))] dark:bg-[var(--zui-skeleton-green-bg-dark,color-mix(in oklch, var(--zui-color-green-dark,#22c55e) 18%, transparent))]",
-  lime: "bg-[var(--zui-skeleton-lime-bg,color-mix(in oklch, var(--zui-color-lime,#65a30d) 10%, transparent))] dark:bg-[var(--zui-skeleton-lime-bg-dark,color-mix(in oklch, var(--zui-color-lime-dark,#a3e635) 18%, transparent))]",
-  mint: "bg-[var(--zui-skeleton-mint-bg,color-mix(in oklch, var(--zui-color-mint,#10b981) 10%, transparent))] dark:bg-[var(--zui-skeleton-mint-bg-dark,color-mix(in oklch, var(--zui-color-mint-dark,#6ee7b7) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-green-bg,color-mix(in_oklch,var(--zui-color-green,#16a34a)_10%,transparent))] dark:bg-[var(--zui-skeleton-green-bg-dark,color-mix(in_oklch,var(--zui-color-green-dark,#22c55e)_18%,transparent))]",
+  lime: "bg-[var(--zui-skeleton-lime-bg,color-mix(in_oklch,var(--zui-color-lime,#65a30d)_10%,transparent))] dark:bg-[var(--zui-skeleton-lime-bg-dark,color-mix(in_oklch,var(--zui-color-lime-dark,#a3e635)_18%,transparent))]",
+  mint: "bg-[var(--zui-skeleton-mint-bg,color-mix(in_oklch,var(--zui-color-mint,#10b981)_10%,transparent))] dark:bg-[var(--zui-skeleton-mint-bg-dark,color-mix(in_oklch,var(--zui-color-mint-dark,#6ee7b7)_18%,transparent))]",
   ocean:
-    "bg-[var(--zui-skeleton-ocean-bg,color-mix(in oklch, var(--zui-color-ocean,#0284c7) 10%, transparent))] dark:bg-[var(--zui-skeleton-ocean-bg-dark,color-mix(in oklch, var(--zui-color-ocean-dark,#38bdf8) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-ocean-bg,color-mix(in_oklch,var(--zui-color-ocean,#0284c7)_10%,transparent))] dark:bg-[var(--zui-skeleton-ocean-bg-dark,color-mix(in_oklch,var(--zui-color-ocean-dark,#38bdf8)_18%,transparent))]",
   sapphire:
-    "bg-[var(--zui-skeleton-sapphire-bg,color-mix(in oklch, var(--zui-color-sapphire,#1d4ed8) 10%, transparent))] dark:bg-[var(--zui-skeleton-sapphire-bg-dark,color-mix(in oklch, var(--zui-color-sapphire-dark,#60a5fa) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-sapphire-bg,color-mix(in_oklch,var(--zui-color-sapphire,#1d4ed8)_10%,transparent))] dark:bg-[var(--zui-skeleton-sapphire-bg-dark,color-mix(in_oklch,var(--zui-color-sapphire-dark,#60a5fa)_18%,transparent))]",
   lavender:
-    "bg-[var(--zui-skeleton-lavender-bg,color-mix(in oklch, var(--zui-color-lavender,#8b5cf6) 10%, transparent))] dark:bg-[var(--zui-skeleton-lavender-bg-dark,color-mix(in oklch, var(--zui-color-lavender-dark,#a78bfa) 18%, transparent))]",
-  ruby: "bg-[var(--zui-skeleton-ruby-bg,color-mix(in oklch, var(--zui-color-ruby,#be123c) 10%, transparent))] dark:bg-[var(--zui-skeleton-ruby-bg-dark,color-mix(in oklch, var(--zui-color-ruby-dark,#fb7185) 18%, transparent))]",
-  red: "bg-[var(--zui-skeleton-red-bg,color-mix(in oklch, var(--zui-color-red,#dc2626) 10%, transparent))] dark:bg-[var(--zui-skeleton-red-bg-dark,color-mix(in oklch, var(--zui-color-red-dark,#ef4444) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-lavender-bg,color-mix(in_oklch,var(--zui-color-lavender,#8b5cf6)_10%,transparent))] dark:bg-[var(--zui-skeleton-lavender-bg-dark,color-mix(in_oklch,var(--zui-color-lavender-dark,#a78bfa)_18%,transparent))]",
+  ruby: "bg-[var(--zui-skeleton-ruby-bg,color-mix(in_oklch,var(--zui-color-ruby,#be123c)_10%,transparent))] dark:bg-[var(--zui-skeleton-ruby-bg-dark,color-mix(in_oklch,var(--zui-color-ruby-dark,#fb7185)_18%,transparent))]",
+  red: "bg-[var(--zui-skeleton-red-bg,color-mix(in_oklch,var(--zui-color-red,#dc2626)_10%,transparent))] dark:bg-[var(--zui-skeleton-red-bg-dark,color-mix(in_oklch,var(--zui-color-red-dark,#ef4444)_18%,transparent))]",
   slate:
-    "bg-[var(--zui-skeleton-slate-bg,color-mix(in oklch, var(--zui-color-slate,#475569) 10%, transparent))] dark:bg-[var(--zui-skeleton-slate-bg-dark,color-mix(in oklch, var(--zui-color-slate-dark,#64748b) 18%, transparent))]",
-  zinc: "bg-[var(--zui-skeleton-zinc-bg,color-mix(in oklch, var(--zui-color-zinc,#52525b) 10%, transparent))] dark:bg-[var(--zui-skeleton-zinc-bg-dark,color-mix(in oklch, var(--zui-color-zinc-dark,#71717a) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-slate-bg,color-mix(in_oklch,var(--zui-color-slate,#475569)_10%,transparent))] dark:bg-[var(--zui-skeleton-slate-bg-dark,color-mix(in_oklch,var(--zui-color-slate-dark,#64748b)_18%,transparent))]",
+  zinc: "bg-[var(--zui-skeleton-zinc-bg,color-mix(in_oklch,var(--zui-color-zinc,#52525b)_10%,transparent))] dark:bg-[var(--zui-skeleton-zinc-bg-dark,color-mix(in_oklch,var(--zui-color-zinc-dark,#71717a)_18%,transparent))]",
   stone:
-    "bg-[var(--zui-skeleton-stone-bg,color-mix(in oklch, var(--zui-color-stone,#57534e) 10%, transparent))] dark:bg-[var(--zui-skeleton-stone-bg-dark,color-mix(in oklch, var(--zui-color-stone-dark,#78716c) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-stone-bg,color-mix(in_oklch,var(--zui-color-stone,#57534e)_10%,transparent))] dark:bg-[var(--zui-skeleton-stone-bg-dark,color-mix(in_oklch,var(--zui-color-stone-dark,#78716c)_18%,transparent))]",
   royal:
-    "bg-[var(--zui-skeleton-royal-bg,color-mix(in oklch, var(--zui-color-royal,#4338ca) 10%, transparent))] dark:bg-[var(--zui-skeleton-royal-bg-dark,color-mix(in oklch, var(--zui-color-royal-dark,#818cf8) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-royal-bg,color-mix(in_oklch,var(--zui-color-royal,#4338ca)_10%,transparent))] dark:bg-[var(--zui-skeleton-royal-bg-dark,color-mix(in_oklch,var(--zui-color-royal-dark,#818cf8)_18%,transparent))]",
   electric:
-    "bg-[var(--zui-skeleton-electric-bg,color-mix(in oklch, var(--zui-color-electric,#0ea5e9) 10%, transparent))] dark:bg-[var(--zui-skeleton-electric-bg-dark,color-mix(in oklch, var(--zui-color-electric-dark,#38bdf8) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-electric-bg,color-mix(in_oklch,var(--zui-color-electric,#0ea5e9)_10%,transparent))] dark:bg-[var(--zui-skeleton-electric-bg-dark,color-mix(in_oklch,var(--zui-color-electric-dark,#38bdf8)_18%,transparent))]",
   forest:
-    "bg-[var(--zui-skeleton-forest-bg,color-mix(in oklch, var(--zui-color-forest,#166534) 10%, transparent))] dark:bg-[var(--zui-skeleton-forest-bg-dark,color-mix(in oklch, var(--zui-color-forest-dark,#4ade80) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-forest-bg,color-mix(in_oklch,var(--zui-color-forest,#166534)_10%,transparent))] dark:bg-[var(--zui-skeleton-forest-bg-dark,color-mix(in_oklch,var(--zui-color-forest-dark,#4ade80)_18%,transparent))]",
   sunset:
-    "bg-[var(--zui-skeleton-sunset-bg,color-mix(in oklch, var(--zui-color-sunset,#ea580c) 10%, transparent))] dark:bg-[var(--zui-skeleton-sunset-bg-dark,color-mix(in oklch, var(--zui-color-sunset-dark,#fb923c) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-sunset-bg,color-mix(in_oklch,var(--zui-color-sunset,#ea580c)_10%,transparent))] dark:bg-[var(--zui-skeleton-sunset-bg-dark,color-mix(in_oklch,var(--zui-color-sunset-dark,#fb923c)_18%,transparent))]",
   magenta:
-    "bg-[var(--zui-skeleton-magenta-bg,color-mix(in oklch, var(--zui-color-magenta,#c026d3) 10%, transparent))] dark:bg-[var(--zui-skeleton-magenta-bg-dark,color-mix(in oklch, var(--zui-color-magenta-dark,#e879f9) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-magenta-bg,color-mix(in_oklch,var(--zui-color-magenta,#c026d3)_10%,transparent))] dark:bg-[var(--zui-skeleton-magenta-bg-dark,color-mix(in_oklch,var(--zui-color-magenta-dark,#e879f9)_18%,transparent))]",
   crimson:
-    "bg-[var(--zui-skeleton-crimson-bg,color-mix(in oklch, var(--zui-color-crimson,#b91c1c) 10%, transparent))] dark:bg-[var(--zui-skeleton-crimson-bg-dark,color-mix(in oklch, var(--zui-color-crimson-dark,#f87171) 18%, transparent))]",
-  aqua: "bg-[var(--zui-skeleton-aqua-bg,color-mix(in oklch, var(--zui-color-aqua,#0f766e) 10%, transparent))] dark:bg-[var(--zui-skeleton-aqua-bg-dark,color-mix(in oklch, var(--zui-color-aqua-dark,#2dd4bf) 18%, transparent))]",
-  plum: "bg-[var(--zui-skeleton-plum-bg,color-mix(in oklch, var(--zui-color-plum,#7e22ce) 10%, transparent))] dark:bg-[var(--zui-skeleton-plum-bg-dark,color-mix(in oklch, var(--zui-color-plum-dark,#c084fc) 18%, transparent))]",
+    "bg-[var(--zui-skeleton-crimson-bg,color-mix(in_oklch,var(--zui-color-crimson,#b91c1c)_10%,transparent))] dark:bg-[var(--zui-skeleton-crimson-bg-dark,color-mix(in_oklch,var(--zui-color-crimson-dark,#f87171)_18%,transparent))]",
+  aqua: "bg-[var(--zui-skeleton-aqua-bg,color-mix(in_oklch,var(--zui-color-aqua,#0f766e)_10%,transparent))] dark:bg-[var(--zui-skeleton-aqua-bg-dark,color-mix(in_oklch,var(--zui-color-aqua-dark,#2dd4bf)_18%,transparent))]",
+  plum: "bg-[var(--zui-skeleton-plum-bg,color-mix(in_oklch,var(--zui-color-plum,#7e22ce)_10%,transparent))] dark:bg-[var(--zui-skeleton-plum-bg-dark,color-mix(in_oklch,var(--zui-color-plum-dark,#c084fc)_18%,transparent))]",
 } as const;
 
 export const zuiSkeletonSizes = {

package/src/design-system/tabs.ts

@@ -24,7 +24,7 @@ export const zuiTabsTriggerBase =
 
 export const zuiTabsTriggerAppearances = {
   default:
-    "bg-[var(--zui-tabs-trigger-default-bg,transparent)] dark:bg-[var(--zui-tabs-trigger-default-bg-dark,transparent)] text-[color:var(--zui-tabs-trigger-default-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-tabs-trigger-default-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
+    "bg-[var(--zui-tabs-trigger-default-bg,transparent)] dark:bg-[var(--zui-tabs-trigger-default-bg-dark,transparent)] text-[color:var(--zui-tabs-trigger-default-fg,var(--zui-fg-muted,oklch(55.5%_0.041_257.417)))] dark:text-[color:var(--zui-tabs-trigger-default-fg-dark,var(--zui-fg-muted-dark,oklch(70.4%_0.04_256.788)))] hover:bg-[var(--zui-tabs-trigger-default-bg-hover,oklch(96.8%_0.007_247.896))] dark:hover:bg-[var(--zui-tabs-trigger-default-bg-hover-dark,oklch(27.9%_0.041_260.031))] hover:text-[color:var(--zui-tabs-trigger-default-fg-hover,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:hover:text-[color:var(--zui-tabs-trigger-default-fg-hover-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-default-fg-active,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-default-fg-active-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
   sky: "bg-[var(--zui-tabs-trigger-sky-bg,var(--zui-color-sky,oklch(82.8%_0.111_230.318)))] text-[color:var(--zui-tabs-trigger-sky-fg,var(--zui-color-sky,oklch(39.1%_0.09_240.876)))] dark:bg-[var(--zui-tabs-trigger-sky-bg-dark,var(--zui-color-sky-dark,oklch(39.1%_0.09_240.876)))] dark:text-[color:var(--zui-tabs-trigger-sky-fg-dark,var(--zui-color-sky-dark,oklch(90.1%_0.058_230.902)))] data-[state=active]:bg-[var(--zui-tabs-trigger-sky-bg-active,var(--zui-color-sky,oklch(39.1%_0.09_240.876)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-sky-bg-active-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-sky-fg-active,var(--zui-color-sky,oklch(97.7%_0.013_236.62)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-sky-fg-active-dark,var(--zui-color-sky-dark,oklch(95.1%_0.026_236.824)))]",
   rose: "bg-[var(--zui-tabs-trigger-rose-bg,var(--zui-color-rose,oklch(81%_0.117_11.638)))] text-[color:var(--zui-tabs-trigger-rose-fg,var(--zui-color-rose,oklch(41%_0.159_10.272)))] dark:bg-[var(--zui-tabs-trigger-rose-bg-dark,var(--zui-color-rose-dark,oklch(41%_0.159_10.272)))] dark:text-[color:var(--zui-tabs-trigger-rose-fg-dark,var(--zui-color-rose-dark,oklch(89.2%_0.058_10.001)))] data-[state=active]:bg-[var(--zui-tabs-trigger-rose-bg-active,var(--zui-color-rose,oklch(41%_0.159_10.272)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-rose-bg-active-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-rose-fg-active,var(--zui-color-rose,oklch(96.9%_0.015_12.422)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-rose-fg-active-dark,var(--zui-color-rose-dark,oklch(94.1%_0.03_12.58)))]",
   purple:
@@ -95,7 +95,7 @@ export const zuiTabsTriggerAppearances = {
 
 export const zuiTabsTriggerVariants = {
   default:
-    "data-[state=active]:bg-[var(--zui-tabs-trigger-default-bg-active,var(--zui-surface-muted,#ffffff))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-default-bg-active-dark,var(--zui-surface-muted-dark,#020617))]",
+    "data-[state=active]:bg-[var(--zui-tabs-trigger-default-bg-active,var(--zui-surface,#ffffff))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-default-bg-active-dark,var(--zui-surface-dark,oklch(27.9%_0.041_260.031)))] data-[state=active]:font-medium data-[state=active]:shadow-sm data-[state=active]:shadow-[color:var(--zui-tabs-trigger-default-shadow,oklch(0%_0_0_/_0.06))] dark:data-[state=active]:shadow-[color:var(--zui-tabs-trigger-default-shadow-dark,oklch(0%_0_0_/_0.3))]",
   underline:
     "border-b-2 border-[color:var(--zui-tabs-trigger-underline-border,transparent)] dark:border-[color:var(--zui-tabs-trigger-underline-border-dark,transparent)] data-[state=active]:border-current rounded-none",
   pills: "",

package/src/design-system/toast.ts

@@ -24,7 +24,7 @@ export const zuiToastRootAppearances = {
     "border-[color:var(--zui-toast-root-error-border,var(--zui-status-error,oklch(64.5%_0.246_16.439_/_0.5)))] dark:border-[color:var(--zui-toast-root-error-border-dark,var(--zui-status-error-dark,oklch(64.5%_0.246_16.439_/_0.5)))] bg-[var(--zui-toast-root-error-bg,var(--zui-status-error,oklch(27.1%_0.105_12.094)))] dark:bg-[var(--zui-toast-root-error-bg-dark,var(--zui-status-error-dark,oklch(27.1%_0.105_12.094)))] text-[color:var(--zui-toast-root-error-fg,var(--zui-fg,oklch(96.9%_0.015_12.422)))] dark:text-[color:var(--zui-toast-root-error-fg-dark,var(--zui-fg-dark,oklch(96.9%_0.015_12.422)))]",
   info: "border-[color:var(--zui-toast-root-info-border,var(--zui-status-info,oklch(68.5%_0.169_237.323_/_0.4)))] dark:border-[color:var(--zui-toast-root-info-border-dark,var(--zui-status-info-dark,oklch(68.5%_0.169_237.323_/_0.4)))] bg-[var(--zui-toast-root-info-bg,var(--zui-status-info,oklch(29.3%_0.066_243.157)))] dark:bg-[var(--zui-toast-root-info-bg-dark,var(--zui-status-info-dark,oklch(29.3%_0.066_243.157)))] text-[color:var(--zui-toast-root-info-fg,var(--zui-brand-fg,oklch(97.7%_0.013_236.62)))] dark:text-[color:var(--zui-toast-root-info-fg-dark,var(--zui-brand-fg-dark,oklch(97.7%_0.013_236.62)))]",
   ghost:
-    "border-[color:var(--zui-toast-root-ghost-border,transparent)] dark:border-[color:var(--zui-toast-root-ghost-border-dark,transparent)] bg-[var(--zui-toast-root-ghost-bg,transparent)] dark:bg-[var(--zui-toast-root-ghost-bg-dark,transparent)] text-[color:var(--zui-toast-root-ghost-fg,var(--zui-fg-muted,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-toast-root-ghost-fg-dark,var(--zui-fg-muted-dark,oklch(20.8%_0.042_265.755)))]",
+    "border-[color:var(--zui-toast-root-ghost-border,transparent)] dark:border-[color:var(--zui-toast-root-ghost-border-dark,transparent)] bg-[var(--zui-toast-root-ghost-bg,transparent)] dark:bg-[var(--zui-toast-root-ghost-bg-dark,transparent)] text-[color:var(--zui-toast-root-ghost-fg,var(--zui-fg-muted,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-toast-root-ghost-fg-dark,var(--zui-fg-muted-dark,oklch(70.4%_0.04_256.788)))]",
   purple:
     "border-[color:var(--zui-toast-root-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[color:var(--zui-toast-root-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] bg-[var(--zui-toast-root-purple-bg,var(--zui-color-purple,oklch(29.1%_0.149_302.717)))] dark:bg-[var(--zui-toast-root-purple-bg-dark,var(--zui-color-purple-dark,oklch(29.1%_0.149_302.717)))] backdrop-blur-xl text-[color:var(--zui-toast-root-purple-fg,var(--zui-fg,oklch(97.7%_0.014_308.299)))] dark:text-[color:var(--zui-toast-root-purple-fg-dark,var(--zui-fg-dark,oklch(97.7%_0.014_308.299)))]",
   pink: "border-[color:var(--zui-toast-root-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[color:var(--zui-toast-root-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] bg-[var(--zui-toast-root-pink-bg,var(--zui-color-pink,oklch(28.4%_0.109_3.907)))] dark:bg-[var(--zui-toast-root-pink-bg-dark,var(--zui-color-pink-dark,oklch(28.4%_0.109_3.907)))] backdrop-blur-xl text-[color:var(--zui-toast-root-pink-fg,var(--zui-fg,oklch(97.1%_0.014_343.198)))] dark:text-[color:var(--zui-toast-root-pink-fg-dark,var(--zui-fg-dark,oklch(97.1%_0.014_343.198)))]",

package/src/hooks/useTableFilter/useTableFilter.test.ts

@@ -1,6 +1,7 @@
 import { act, renderHook } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
+import type { TableFilterState } from "./types";
 import { useTableFilter } from "./useTableFilter";
 
 const rows = [
@@ -9,6 +10,11 @@ const rows = [
   { name: "Comet", status: "active", seats: 8 },
 ] as const;
 
+type RowFilterKey = "name" | "status";
+type ControlledFilterProps = {
+  filters: TableFilterState<RowFilterKey>;
+};
+
 describe("useTableFilter", () => {
   it("should return all rows when no filters are active", () => {
     const { result } = renderHook(() => useTableFilter({ data: rows }));
@@ -81,14 +87,18 @@ describe("useTableFilter", () => {
 
   it("should support controlled filters", () => {
     const handleFiltersChange = vi.fn();
+    const initialProps: ControlledFilterProps = {
+      filters: { status: "active" },
+    };
+
     const { result, rerender } = renderHook(
-      ({ filters }: { filters: Record<string, string> }) =>
+      ({ filters }: ControlledFilterProps) =>
         useTableFilter({
           data: rows,
           filters,
           onFiltersChange: handleFiltersChange,
         }),
-      { initialProps: { filters: { status: "active" } } },
+      { initialProps },
     );
 
     expect(result.current.filteredData.length).toBe(2);

package/src/ui/context-menu/context-menu.test.tsx

@@ -53,6 +53,44 @@ describe("ContextMenu", () => {
     expect(screen.getByText("Row actions").tagName).toBe("P");
   });
 
+  it("should open a cloned trigger with Enter and Space", async () => {
+    const user = userEvent.setup();
+    renderContextMenu();
+
+    const trigger = screen.getByTestId("surface");
+    trigger.focus();
+    await user.keyboard("{Enter}");
+
+    expect(screen.getByRole("menu")).toBeVisible();
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => {
+      expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+    });
+
+    await user.keyboard(" ");
+
+    expect(screen.getByRole("menu")).toBeVisible();
+  });
+
+  it("should open the fallback trigger with Enter", async () => {
+    const user = userEvent.setup();
+    render(
+      <ContextMenu>
+        <ContextMenuTrigger>Right-click row</ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem>Copy</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Right-click row" });
+    trigger.focus();
+    await user.keyboard("{Enter}");
+
+    expect(screen.getByRole("menu")).toBeVisible();
+  });
+
   it("should clamp using the rendered menu dimensions", async () => {
     vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
       bottom: 0,

package/src/ui/context-menu/context-menu.tsx

@@ -15,7 +15,6 @@ import {
   useState,
   type KeyboardEvent,
   type MouseEvent,
-  type ReactElement,
   type Ref,
   type RefObject,
 } from "react";
@@ -222,6 +221,14 @@ export const ContextMenuTrigger = ({
       openAt({ x: event.clientX, y: event.clientY });
     }
   };
+  const handleKeyboardTrigger = (event: KeyboardEvent<HTMLElement>) => {
+    if (disabled || (event.key !== "Enter" && event.key !== " ")) {
+      return;
+    }
+    event.preventDefault();
+    const rect = event.currentTarget.getBoundingClientRect();
+    openAt({ x: rect.left, y: rect.bottom });
+  };
   const childList = Children.toArray(children).filter(
     (node) => node !== null && node !== undefined && typeof node !== "boolean",
   );
@@ -239,8 +246,15 @@ export const ContextMenuTrigger = ({
           handleContextMenu(event);
         }
       },
+      onKeyDown: (event) => {
+        soleCandidate.props.onKeyDown?.(event);
+        if (!event.defaultPrevented) {
+          handleKeyboardTrigger(event);
+        }
+      },
       className: cn(className, soleCandidate.props.className),
       tabIndex: soleCandidate.props.tabIndex ?? 0,
+      role: soleCandidate.props.role ?? "button",
       "aria-controls": open ? contentId : undefined,
       "aria-expanded": open,
       "aria-haspopup": "menu",
@@ -251,8 +265,10 @@ export const ContextMenuTrigger = ({
     <span
       ref={triggerRef as Ref<HTMLSpanElement>}
       className={className}
+      role="button"
       tabIndex={0}
       onContextMenu={handleContextMenu}
+      onKeyDown={handleKeyboardTrigger}
       aria-controls={open ? contentId : undefined}
       aria-expanded={open}
       aria-haspopup="menu"

package/src/ui/context-menu/types.ts

@@ -2,6 +2,7 @@ import type { VariantProps } from "class-variance-authority";
 import type {
   ComponentPropsWithRef,
   HTMLAttributes,
+  KeyboardEvent,
   MouseEvent,
   ReactElement,
   ReactNode,
@@ -103,8 +104,10 @@ export type ReactChildSoleCandidate = ReactElement<{
   className?: string;
   ref?: Ref<HTMLElement>;
   onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
   tabIndex?: number;
   "aria-controls"?: string;
   "aria-expanded"?: boolean;
   "aria-haspopup"?: string;
+  role?: string;
 }>;

package/src/ui/dropdown/dropdown.tsx

@@ -7,6 +7,7 @@ import {
   useRef,
   useEffect,
   useId,
+  type KeyboardEvent,
 } from "react";
 import { FiCheck } from "react-icons/fi";
 import { cn } from "../../lib/utils";
@@ -136,6 +137,14 @@ export const DropdownContent = ({
   // click outside
   useClickOutside({ ref, setOpen });
 
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    ref.current?.querySelector<HTMLElement>('[role="menuitem"]')?.focus();
+  }, [open]);
+
   if (!open) return null;
 
   return (
@@ -163,6 +172,8 @@ export const DropdownItem = ({
   value,
   className,
   variant,
+  onClick,
+  onKeyDown,
   onSelect,
   leftIcon,
   rightIcon,
@@ -176,15 +187,61 @@ export const DropdownItem = ({
     onSelect?.();
   };
 
+  const focusSiblingItem = (
+    event: KeyboardEvent<HTMLDivElement>,
+    direction: "next" | "previous" | "first" | "last",
+  ) => {
+    const menu = event.currentTarget.closest('[role="menu"]');
+    const items = Array.from(
+      menu?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [],
+    );
+    const currentIndex = items.indexOf(event.currentTarget);
+
+    if (currentIndex === -1 || items.length === 0) {
+      return;
+    }
+
+    const nextIndex =
+      direction === "first"
+        ? 0
+        : direction === "last"
+          ? items.length - 1
+          : (currentIndex + (direction === "next" ? 1 : -1) + items.length) %
+            items.length;
+
+    items[nextIndex]?.focus();
+  };
+
   return (
     <div
       role="menuitem"
-      tabIndex={0}
-      onClick={handleClick}
+      tabIndex={-1}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          handleClick();
+        }
+      }}
       onKeyDown={(e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) {
+          return;
+        }
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
           handleClick();
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          focusSiblingItem(e, "next");
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          focusSiblingItem(e, "previous");
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          focusSiblingItem(e, "first");
+        } else if (e.key === "End") {
+          e.preventDefault();
+          focusSiblingItem(e, "last");
         }
       }}
       className={cn(itemVariants({ variant }), className)}

package/src/ui/skeleton/skeleton.test.tsx

@@ -40,6 +40,15 @@ describe("Skeleton", () => {
     ).not.toMatch(/animate-pulse/);
   });
 
+  it("should keep colored static appearances in one Tailwind arbitrary class", () => {
+    const { container } = render(
+      <Skeleton appearance="indigo" animation="none" />,
+    );
+    const root = container.querySelector('[data-slot="skeleton"]');
+    expect(root?.className).toContain("color-mix(in_oklch");
+    expect(root?.className).not.toContain("color-mix(in oklch");
+  });
+
   it("should render the requested number of text lines", () => {
     const { container } = render(<SkeletonText lines={4} />);
     const root = container.querySelector('[data-slot="skeleton-text"]');