@zentauri-ui/zentauri-components 1.8.42 → 1.9.1

package/src/design-system/timeline.ts

@@ -26,23 +26,56 @@ export const zuiTimelineIndicatorAppearances = {
   violet:
     "border-[color:var(--zui-timeline-indicator-violet-border,oklch(60.6%_0.25_292.717_/_0.6))] bg-[var(--zui-timeline-indicator-violet-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-timeline-indicator-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-timeline-indicator-violet-fg-dark,oklch(94.3%_0.029_294.588))] ring-2 ring-[var(--zui-timeline-indicator-violet-ring,oklch(70.2%_0.183_293.541_/_0.3))]",
   "gradient-blue":
-    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-timeline-indicator-gradient-blue-to,oklch(54.6%_0.245_262.881))] text-[color:var(--zui-timeline-indicator-gradient-blue-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-blue-ring,oklch(70.7%_0.165_254.624_/_0.3))]",
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-blue-from,oklch(62.3%_0.214_259.815))] dark:from-[var(--zui-timeline-indicator-gradient-blue-from-dark,oklch(42.4%_0.199_265.638))] to-[var(--zui-timeline-indicator-gradient-blue-to,oklch(54.6%_0.245_262.881))] dark:to-[var(--zui-timeline-indicator-gradient-blue-to-dark,oklch(37.9%_0.146_265.522))] text-[color:var(--zui-timeline-indicator-gradient-blue-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-blue-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-blue-ring,oklch(70.7%_0.165_254.624_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-blue-ring-dark,oklch(42.4%_0.199_265.638_/_0.3))]",
   "gradient-green":
-    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-timeline-indicator-gradient-green-to,oklch(62.7%_0.194_149.214))] text-[color:var(--zui-timeline-indicator-gradient-green-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-green-ring,oklch(79.2%_0.209_151.711_/_0.3))]",
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-green-from,oklch(72.3%_0.219_149.579))] dark:from-[var(--zui-timeline-indicator-gradient-green-from-dark,oklch(44.8%_0.119_151.328))] to-[var(--zui-timeline-indicator-gradient-green-to,oklch(62.7%_0.194_149.214))] dark:to-[var(--zui-timeline-indicator-gradient-green-to-dark,oklch(39.3%_0.095_152.535))] text-[color:var(--zui-timeline-indicator-gradient-green-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-green-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-green-ring,oklch(79.2%_0.209_151.711_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-green-ring-dark,oklch(44.8%_0.119_151.328_/_0.3))]",
   "gradient-red":
-    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-timeline-indicator-gradient-red-to,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-timeline-indicator-gradient-red-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-red-ring,oklch(70.4%_0.191_22.216_/_0.3))]",
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-red-from,oklch(63.7%_0.237_25.331))] dark:from-[var(--zui-timeline-indicator-gradient-red-from-dark,oklch(44.4%_0.177_26.899))] to-[var(--zui-timeline-indicator-gradient-red-to,oklch(57.7%_0.245_27.325))] dark:to-[var(--zui-timeline-indicator-gradient-red-to-dark,oklch(39.6%_0.141_25.723))] text-[color:var(--zui-timeline-indicator-gradient-red-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-red-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-red-ring,oklch(70.4%_0.191_22.216_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-red-ring-dark,oklch(44.4%_0.177_26.899_/_0.3))]",
   "gradient-yellow":
-    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-timeline-indicator-gradient-yellow-to,oklch(79.5%_0.184_86.047))] text-[color:var(--zui-timeline-indicator-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] ring-2 ring-[var(--zui-timeline-indicator-gradient-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-yellow-from,oklch(85.2%_0.199_91.936))] dark:from-[var(--zui-timeline-indicator-gradient-yellow-from-dark,oklch(47.6%_0.114_61.907))] to-[var(--zui-timeline-indicator-gradient-yellow-to,oklch(79.5%_0.184_86.047))] dark:to-[var(--zui-timeline-indicator-gradient-yellow-to-dark,oklch(42.1%_0.095_57.708))] text-[color:var(--zui-timeline-indicator-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-timeline-indicator-gradient-yellow-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-yellow-ring-dark,oklch(47.6%_0.114_61.907_/_0.3))]",
   "gradient-purple":
-    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-timeline-indicator-gradient-purple-to,oklch(62.7%_0.265_303.9))] text-[color:var(--zui-timeline-indicator-gradient-purple-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-purple-from,oklch(71.4%_0.203_305.504))] dark:from-[var(--zui-timeline-indicator-gradient-purple-from-dark,oklch(43.8%_0.218_303.724))] to-[var(--zui-timeline-indicator-gradient-purple-to,oklch(62.7%_0.265_303.9))] dark:to-[var(--zui-timeline-indicator-gradient-purple-to-dark,oklch(38.1%_0.176_304.987))] text-[color:var(--zui-timeline-indicator-gradient-purple-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-purple-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-purple-ring-dark,oklch(43.8%_0.218_303.724_/_0.3))]",
   "gradient-teal":
-    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-timeline-indicator-gradient-teal-to,oklch(70.4%_0.14_182.503))] text-[color:var(--zui-timeline-indicator-gradient-teal-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-teal-from,oklch(77.7%_0.152_181.912))] dark:from-[var(--zui-timeline-indicator-gradient-teal-from-dark,oklch(43.7%_0.078_188.216))] to-[var(--zui-timeline-indicator-gradient-teal-to,oklch(70.4%_0.14_182.503))] dark:to-[var(--zui-timeline-indicator-gradient-teal-to-dark,oklch(38.6%_0.063_188.416))] text-[color:var(--zui-timeline-indicator-gradient-teal-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-teal-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-teal-ring-dark,oklch(43.7%_0.078_188.216_/_0.3))]",
   "gradient-indigo":
-    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-timeline-indicator-gradient-indigo-to,oklch(58.5%_0.233_277.117))] text-[color:var(--zui-timeline-indicator-gradient-indigo-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-indigo-from,oklch(67.3%_0.182_276.935))] dark:from-[var(--zui-timeline-indicator-gradient-indigo-from-dark,oklch(39.8%_0.195_277.366))] to-[var(--zui-timeline-indicator-gradient-indigo-to,oklch(58.5%_0.233_277.117))] dark:to-[var(--zui-timeline-indicator-gradient-indigo-to-dark,oklch(35.9%_0.144_278.697))] text-[color:var(--zui-timeline-indicator-gradient-indigo-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-indigo-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-indigo-ring-dark,oklch(39.8%_0.195_277.366_/_0.3))]",
   "gradient-pink":
-    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-timeline-indicator-gradient-pink-to,oklch(65.6%_0.241_354.308))] text-[color:var(--zui-timeline-indicator-gradient-pink-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-pink-from,oklch(71.8%_0.202_349.761))] dark:from-[var(--zui-timeline-indicator-gradient-pink-from-dark,oklch(45.9%_0.187_3.815))] to-[var(--zui-timeline-indicator-gradient-pink-to,oklch(65.6%_0.241_354.308))] dark:to-[var(--zui-timeline-indicator-gradient-pink-to-dark,oklch(40.8%_0.153_2.432))] text-[color:var(--zui-timeline-indicator-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-pink-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-pink-ring-dark,oklch(45.9%_0.187_3.815_/_0.3))]",
   "gradient-orange":
-    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-timeline-indicator-gradient-orange-to,oklch(70.5%_0.213_47.604))] text-[color:var(--zui-timeline-indicator-gradient-orange-fg,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-orange-ring,oklch(75%_0.183_55.934_/_0.3))]",
+    "border-transparent bg-linear-to-br from-[var(--zui-timeline-indicator-gradient-orange-from,oklch(75%_0.183_55.934))] dark:from-[var(--zui-timeline-indicator-gradient-orange-from-dark,oklch(47%_0.157_37.304))] to-[var(--zui-timeline-indicator-gradient-orange-to,oklch(70.5%_0.213_47.604))] dark:to-[var(--zui-timeline-indicator-gradient-orange-to-dark,oklch(40.8%_0.123_38.172))] text-[color:var(--zui-timeline-indicator-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-timeline-indicator-gradient-orange-fg-dark,#ffffff)] ring-2 ring-[var(--zui-timeline-indicator-gradient-orange-ring,oklch(75%_0.183_55.934_/_0.3))] dark:ring-[var(--zui-timeline-indicator-gradient-orange-ring-dark,oklch(47%_0.157_37.304_/_0.3))]",
+  blue: "border-[color:var(--zui-timeline-indicator-blue-border,#2563eb)] dark:border-[color:var(--zui-timeline-indicator-blue-border-dark,#3b82f6)] bg-[var(--zui-timeline-indicator-blue-bg,#2563eb14)] dark:bg-[var(--zui-timeline-indicator-blue-bg-dark,#3b82f624)] text-[color:var(--zui-timeline-indicator-blue-fg,#2563eb)] dark:text-[color:var(--zui-timeline-indicator-blue-fg-dark,#3b82f6)] ring-2 ring-[var(--zui-timeline-indicator-blue-ring,#2563eb33)] dark:ring-[var(--zui-timeline-indicator-blue-ring-dark,#3b82f640)]",
+  cyan: "border-[color:var(--zui-timeline-indicator-cyan-border,#0891b2)] dark:border-[color:var(--zui-timeline-indicator-cyan-border-dark,#22d3ee)] bg-[var(--zui-timeline-indicator-cyan-bg,#0891b214)] dark:bg-[var(--zui-timeline-indicator-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-timeline-indicator-cyan-fg,#0891b2)] dark:text-[color:var(--zui-timeline-indicator-cyan-fg-dark,#22d3ee)] ring-2 ring-[var(--zui-timeline-indicator-cyan-ring,#0891b233)] dark:ring-[var(--zui-timeline-indicator-cyan-ring-dark,#22d3ee40)]",
+  green:
+    "border-[color:var(--zui-timeline-indicator-green-border,#16a34a)] dark:border-[color:var(--zui-timeline-indicator-green-border-dark,#22c55e)] bg-[var(--zui-timeline-indicator-green-bg,#16a34a14)] dark:bg-[var(--zui-timeline-indicator-green-bg-dark,#22c55e24)] text-[color:var(--zui-timeline-indicator-green-fg,#16a34a)] dark:text-[color:var(--zui-timeline-indicator-green-fg-dark,#22c55e)] ring-2 ring-[var(--zui-timeline-indicator-green-ring,#16a34a33)] dark:ring-[var(--zui-timeline-indicator-green-ring-dark,#22c55e40)]",
+  lime: "border-[color:var(--zui-timeline-indicator-lime-border,#65a30d)] dark:border-[color:var(--zui-timeline-indicator-lime-border-dark,#a3e635)] bg-[var(--zui-timeline-indicator-lime-bg,#65a30d14)] dark:bg-[var(--zui-timeline-indicator-lime-bg-dark,#a3e63524)] text-[color:var(--zui-timeline-indicator-lime-fg,#65a30d)] dark:text-[color:var(--zui-timeline-indicator-lime-fg-dark,#a3e635)] ring-2 ring-[var(--zui-timeline-indicator-lime-ring,#65a30d33)] dark:ring-[var(--zui-timeline-indicator-lime-ring-dark,#a3e63540)]",
+  mint: "border-[color:var(--zui-timeline-indicator-mint-border,#10b981)] dark:border-[color:var(--zui-timeline-indicator-mint-border-dark,#6ee7b7)] bg-[var(--zui-timeline-indicator-mint-bg,#10b98114)] dark:bg-[var(--zui-timeline-indicator-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-timeline-indicator-mint-fg,#10b981)] dark:text-[color:var(--zui-timeline-indicator-mint-fg-dark,#6ee7b7)] ring-2 ring-[var(--zui-timeline-indicator-mint-ring,#10b98133)] dark:ring-[var(--zui-timeline-indicator-mint-ring-dark,#6ee7b740)]",
+  ocean:
+    "border-[color:var(--zui-timeline-indicator-ocean-border,#0284c7)] dark:border-[color:var(--zui-timeline-indicator-ocean-border-dark,#38bdf8)] bg-[var(--zui-timeline-indicator-ocean-bg,#0284c714)] dark:bg-[var(--zui-timeline-indicator-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-timeline-indicator-ocean-fg,#0284c7)] dark:text-[color:var(--zui-timeline-indicator-ocean-fg-dark,#38bdf8)] ring-2 ring-[var(--zui-timeline-indicator-ocean-ring,#0284c733)] dark:ring-[var(--zui-timeline-indicator-ocean-ring-dark,#38bdf840)]",
+  sapphire:
+    "border-[color:var(--zui-timeline-indicator-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-timeline-indicator-sapphire-border-dark,#60a5fa)] bg-[var(--zui-timeline-indicator-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-timeline-indicator-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-timeline-indicator-sapphire-fg,#1d4ed8)] dark:text-[color:var(--zui-timeline-indicator-sapphire-fg-dark,#60a5fa)] ring-2 ring-[var(--zui-timeline-indicator-sapphire-ring,#1d4ed833)] dark:ring-[var(--zui-timeline-indicator-sapphire-ring-dark,#60a5fa40)]",
+  lavender:
+    "border-[color:var(--zui-timeline-indicator-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-timeline-indicator-lavender-border-dark,#a78bfa)] bg-[var(--zui-timeline-indicator-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-timeline-indicator-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-timeline-indicator-lavender-fg,#8b5cf6)] dark:text-[color:var(--zui-timeline-indicator-lavender-fg-dark,#a78bfa)] ring-2 ring-[var(--zui-timeline-indicator-lavender-ring,#8b5cf633)] dark:ring-[var(--zui-timeline-indicator-lavender-ring-dark,#a78bfa40)]",
+  ruby: "border-[color:var(--zui-timeline-indicator-ruby-border,#be123c)] dark:border-[color:var(--zui-timeline-indicator-ruby-border-dark,#fb7185)] bg-[var(--zui-timeline-indicator-ruby-bg,#be123c14)] dark:bg-[var(--zui-timeline-indicator-ruby-bg-dark,#fb718524)] text-[color:var(--zui-timeline-indicator-ruby-fg,#be123c)] dark:text-[color:var(--zui-timeline-indicator-ruby-fg-dark,#fb7185)] ring-2 ring-[var(--zui-timeline-indicator-ruby-ring,#be123c33)] dark:ring-[var(--zui-timeline-indicator-ruby-ring-dark,#fb718540)]",
+  red: "border-[color:var(--zui-timeline-indicator-red-border,#dc2626)] dark:border-[color:var(--zui-timeline-indicator-red-border-dark,#ef4444)] bg-[var(--zui-timeline-indicator-red-bg,#dc262614)] dark:bg-[var(--zui-timeline-indicator-red-bg-dark,#ef444424)] text-[color:var(--zui-timeline-indicator-red-fg,#dc2626)] dark:text-[color:var(--zui-timeline-indicator-red-fg-dark,#ef4444)] ring-2 ring-[var(--zui-timeline-indicator-red-ring,#dc262633)] dark:ring-[var(--zui-timeline-indicator-red-ring-dark,#ef444440)]",
+  slate:
+    "border-[color:var(--zui-timeline-indicator-slate-border,#475569)] dark:border-[color:var(--zui-timeline-indicator-slate-border-dark,#64748b)] bg-[var(--zui-timeline-indicator-slate-bg,#47556914)] dark:bg-[var(--zui-timeline-indicator-slate-bg-dark,#64748b24)] text-[color:var(--zui-timeline-indicator-slate-fg,#475569)] dark:text-[color:var(--zui-timeline-indicator-slate-fg-dark,#64748b)] ring-2 ring-[var(--zui-timeline-indicator-slate-ring,#47556933)] dark:ring-[var(--zui-timeline-indicator-slate-ring-dark,#64748b40)]",
+  zinc: "border-[color:var(--zui-timeline-indicator-zinc-border,#52525b)] dark:border-[color:var(--zui-timeline-indicator-zinc-border-dark,#71717a)] bg-[var(--zui-timeline-indicator-zinc-bg,#52525b14)] dark:bg-[var(--zui-timeline-indicator-zinc-bg-dark,#71717a24)] text-[color:var(--zui-timeline-indicator-zinc-fg,#52525b)] dark:text-[color:var(--zui-timeline-indicator-zinc-fg-dark,#71717a)] ring-2 ring-[var(--zui-timeline-indicator-zinc-ring,#52525b33)] dark:ring-[var(--zui-timeline-indicator-zinc-ring-dark,#71717a40)]",
+  stone:
+    "border-[color:var(--zui-timeline-indicator-stone-border,#57534e)] dark:border-[color:var(--zui-timeline-indicator-stone-border-dark,#78716c)] bg-[var(--zui-timeline-indicator-stone-bg,#57534e14)] dark:bg-[var(--zui-timeline-indicator-stone-bg-dark,#78716c24)] text-[color:var(--zui-timeline-indicator-stone-fg,#57534e)] dark:text-[color:var(--zui-timeline-indicator-stone-fg-dark,#78716c)] ring-2 ring-[var(--zui-timeline-indicator-stone-ring,#57534e33)] dark:ring-[var(--zui-timeline-indicator-stone-ring-dark,#78716c40)]",
+  royal:
+    "border-[color:var(--zui-timeline-indicator-royal-border,#4338ca)] dark:border-[color:var(--zui-timeline-indicator-royal-border-dark,#818cf8)] bg-[var(--zui-timeline-indicator-royal-bg,#4338ca14)] dark:bg-[var(--zui-timeline-indicator-royal-bg-dark,#818cf824)] text-[color:var(--zui-timeline-indicator-royal-fg,#4338ca)] dark:text-[color:var(--zui-timeline-indicator-royal-fg-dark,#818cf8)] ring-2 ring-[var(--zui-timeline-indicator-royal-ring,#4338ca33)] dark:ring-[var(--zui-timeline-indicator-royal-ring-dark,#818cf840)]",
+  electric:
+    "border-[color:var(--zui-timeline-indicator-electric-border,#0ea5e9)] dark:border-[color:var(--zui-timeline-indicator-electric-border-dark,#38bdf8)] bg-[var(--zui-timeline-indicator-electric-bg,#0ea5e914)] dark:bg-[var(--zui-timeline-indicator-electric-bg-dark,#38bdf824)] text-[color:var(--zui-timeline-indicator-electric-fg,#0ea5e9)] dark:text-[color:var(--zui-timeline-indicator-electric-fg-dark,#38bdf8)] ring-2 ring-[var(--zui-timeline-indicator-electric-ring,#0ea5e933)] dark:ring-[var(--zui-timeline-indicator-electric-ring-dark,#38bdf840)]",
+  forest:
+    "border-[color:var(--zui-timeline-indicator-forest-border,#166534)] dark:border-[color:var(--zui-timeline-indicator-forest-border-dark,#4ade80)] bg-[var(--zui-timeline-indicator-forest-bg,#16653414)] dark:bg-[var(--zui-timeline-indicator-forest-bg-dark,#4ade8024)] text-[color:var(--zui-timeline-indicator-forest-fg,#166534)] dark:text-[color:var(--zui-timeline-indicator-forest-fg-dark,#4ade80)] ring-2 ring-[var(--zui-timeline-indicator-forest-ring,#16653433)] dark:ring-[var(--zui-timeline-indicator-forest-ring-dark,#4ade8040)]",
+  sunset:
+    "border-[color:var(--zui-timeline-indicator-sunset-border,#ea580c)] dark:border-[color:var(--zui-timeline-indicator-sunset-border-dark,#fb923c)] bg-[var(--zui-timeline-indicator-sunset-bg,#ea580c14)] dark:bg-[var(--zui-timeline-indicator-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-timeline-indicator-sunset-fg,#ea580c)] dark:text-[color:var(--zui-timeline-indicator-sunset-fg-dark,#fb923c)] ring-2 ring-[var(--zui-timeline-indicator-sunset-ring,#ea580c33)] dark:ring-[var(--zui-timeline-indicator-sunset-ring-dark,#fb923c40)]",
+  magenta:
+    "border-[color:var(--zui-timeline-indicator-magenta-border,#c026d3)] dark:border-[color:var(--zui-timeline-indicator-magenta-border-dark,#e879f9)] bg-[var(--zui-timeline-indicator-magenta-bg,#c026d314)] dark:bg-[var(--zui-timeline-indicator-magenta-bg-dark,#e879f924)] text-[color:var(--zui-timeline-indicator-magenta-fg,#c026d3)] dark:text-[color:var(--zui-timeline-indicator-magenta-fg-dark,#e879f9)] ring-2 ring-[var(--zui-timeline-indicator-magenta-ring,#c026d333)] dark:ring-[var(--zui-timeline-indicator-magenta-ring-dark,#e879f940)]",
+  crimson:
+    "border-[color:var(--zui-timeline-indicator-crimson-border,#b91c1c)] dark:border-[color:var(--zui-timeline-indicator-crimson-border-dark,#f87171)] bg-[var(--zui-timeline-indicator-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-timeline-indicator-crimson-bg-dark,#f8717124)] text-[color:var(--zui-timeline-indicator-crimson-fg,#b91c1c)] dark:text-[color:var(--zui-timeline-indicator-crimson-fg-dark,#f87171)] ring-2 ring-[var(--zui-timeline-indicator-crimson-ring,#b91c1c33)] dark:ring-[var(--zui-timeline-indicator-crimson-ring-dark,#f8717140)]",
+  aqua: "border-[color:var(--zui-timeline-indicator-aqua-border,#0f766e)] dark:border-[color:var(--zui-timeline-indicator-aqua-border-dark,#2dd4bf)] bg-[var(--zui-timeline-indicator-aqua-bg,#0f766e14)] dark:bg-[var(--zui-timeline-indicator-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-timeline-indicator-aqua-fg,#0f766e)] dark:text-[color:var(--zui-timeline-indicator-aqua-fg-dark,#2dd4bf)] ring-2 ring-[var(--zui-timeline-indicator-aqua-ring,#0f766e33)] dark:ring-[var(--zui-timeline-indicator-aqua-ring-dark,#2dd4bf40)]",
+  plum: "border-[color:var(--zui-timeline-indicator-plum-border,#7e22ce)] dark:border-[color:var(--zui-timeline-indicator-plum-border-dark,#c084fc)] bg-[var(--zui-timeline-indicator-plum-bg,#7e22ce14)] dark:bg-[var(--zui-timeline-indicator-plum-bg-dark,#c084fc24)] text-[color:var(--zui-timeline-indicator-plum-fg,#7e22ce)] dark:text-[color:var(--zui-timeline-indicator-plum-fg-dark,#c084fc)] ring-2 ring-[var(--zui-timeline-indicator-plum-ring,#7e22ce33)] dark:ring-[var(--zui-timeline-indicator-plum-ring-dark,#c084fc40)]",
 } as const;
 
 export const zuiTimelineIndicatorSizes = {

package/src/design-system/toast.ts

@@ -60,6 +60,39 @@ export const zuiToastRootAppearances = {
     "border-[color:var(--zui-toast-root-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-toast-root-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-linear-to-r from-[var(--zui-toast-root-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-toast-root-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.7))] to-[var(--zui-toast-root-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-toast-root-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl",
   "gradient-orange":
     "border-[color:var(--zui-toast-root-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-toast-root-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-linear-to-r from-[var(--zui-toast-root-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-toast-root-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.7))] to-[var(--zui-toast-root-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-toast-root-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.7))] backdrop-blur-xl",
+  blue: "border border-[color:var(--zui-toast-root-blue-border,#2563eb)] dark:border-[color:var(--zui-toast-root-blue-border-dark,#3b82f6)] bg-[var(--zui-toast-root-blue-bg,#2563eb14)] dark:bg-[var(--zui-toast-root-blue-bg-dark,#3b82f624)] text-[color:var(--zui-toast-root-blue-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-blue-fg-dark,#f8fafc)]",
+  cyan: "border border-[color:var(--zui-toast-root-cyan-border,#0891b2)] dark:border-[color:var(--zui-toast-root-cyan-border-dark,#22d3ee)] bg-[var(--zui-toast-root-cyan-bg,#0891b214)] dark:bg-[var(--zui-toast-root-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-toast-root-cyan-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-cyan-fg-dark,#f8fafc)]",
+  green:
+    "border border-[color:var(--zui-toast-root-green-border,#16a34a)] dark:border-[color:var(--zui-toast-root-green-border-dark,#22c55e)] bg-[var(--zui-toast-root-green-bg,#16a34a14)] dark:bg-[var(--zui-toast-root-green-bg-dark,#22c55e24)] text-[color:var(--zui-toast-root-green-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-green-fg-dark,#f8fafc)]",
+  lime: "border border-[color:var(--zui-toast-root-lime-border,#65a30d)] dark:border-[color:var(--zui-toast-root-lime-border-dark,#a3e635)] bg-[var(--zui-toast-root-lime-bg,#65a30d14)] dark:bg-[var(--zui-toast-root-lime-bg-dark,#a3e63524)] text-[color:var(--zui-toast-root-lime-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-lime-fg-dark,#f8fafc)]",
+  mint: "border border-[color:var(--zui-toast-root-mint-border,#10b981)] dark:border-[color:var(--zui-toast-root-mint-border-dark,#6ee7b7)] bg-[var(--zui-toast-root-mint-bg,#10b98114)] dark:bg-[var(--zui-toast-root-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-toast-root-mint-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-mint-fg-dark,#f8fafc)]",
+  ocean:
+    "border border-[color:var(--zui-toast-root-ocean-border,#0284c7)] dark:border-[color:var(--zui-toast-root-ocean-border-dark,#38bdf8)] bg-[var(--zui-toast-root-ocean-bg,#0284c714)] dark:bg-[var(--zui-toast-root-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-toast-root-ocean-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-ocean-fg-dark,#f8fafc)]",
+  sapphire:
+    "border border-[color:var(--zui-toast-root-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-toast-root-sapphire-border-dark,#60a5fa)] bg-[var(--zui-toast-root-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-toast-root-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-toast-root-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-sapphire-fg-dark,#f8fafc)]",
+  lavender:
+    "border border-[color:var(--zui-toast-root-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-toast-root-lavender-border-dark,#a78bfa)] bg-[var(--zui-toast-root-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-toast-root-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-toast-root-lavender-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-lavender-fg-dark,#f8fafc)]",
+  ruby: "border border-[color:var(--zui-toast-root-ruby-border,#be123c)] dark:border-[color:var(--zui-toast-root-ruby-border-dark,#fb7185)] bg-[var(--zui-toast-root-ruby-bg,#be123c14)] dark:bg-[var(--zui-toast-root-ruby-bg-dark,#fb718524)] text-[color:var(--zui-toast-root-ruby-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-ruby-fg-dark,#f8fafc)]",
+  red: "border border-[color:var(--zui-toast-root-red-border,#dc2626)] dark:border-[color:var(--zui-toast-root-red-border-dark,#ef4444)] bg-[var(--zui-toast-root-red-bg,#dc262614)] dark:bg-[var(--zui-toast-root-red-bg-dark,#ef444424)] text-[color:var(--zui-toast-root-red-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-red-fg-dark,#f8fafc)]",
+  slate:
+    "border border-[color:var(--zui-toast-root-slate-border,#475569)] dark:border-[color:var(--zui-toast-root-slate-border-dark,#64748b)] bg-[var(--zui-toast-root-slate-bg,#47556914)] dark:bg-[var(--zui-toast-root-slate-bg-dark,#64748b24)] text-[color:var(--zui-toast-root-slate-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-slate-fg-dark,#f8fafc)]",
+  zinc: "border border-[color:var(--zui-toast-root-zinc-border,#52525b)] dark:border-[color:var(--zui-toast-root-zinc-border-dark,#71717a)] bg-[var(--zui-toast-root-zinc-bg,#52525b14)] dark:bg-[var(--zui-toast-root-zinc-bg-dark,#71717a24)] text-[color:var(--zui-toast-root-zinc-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-zinc-fg-dark,#f8fafc)]",
+  stone:
+    "border border-[color:var(--zui-toast-root-stone-border,#57534e)] dark:border-[color:var(--zui-toast-root-stone-border-dark,#78716c)] bg-[var(--zui-toast-root-stone-bg,#57534e14)] dark:bg-[var(--zui-toast-root-stone-bg-dark,#78716c24)] text-[color:var(--zui-toast-root-stone-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-stone-fg-dark,#f8fafc)]",
+  royal:
+    "border border-[color:var(--zui-toast-root-royal-border,#4338ca)] dark:border-[color:var(--zui-toast-root-royal-border-dark,#818cf8)] bg-[var(--zui-toast-root-royal-bg,#4338ca14)] dark:bg-[var(--zui-toast-root-royal-bg-dark,#818cf824)] text-[color:var(--zui-toast-root-royal-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-royal-fg-dark,#f8fafc)]",
+  electric:
+    "border border-[color:var(--zui-toast-root-electric-border,#0ea5e9)] dark:border-[color:var(--zui-toast-root-electric-border-dark,#38bdf8)] bg-[var(--zui-toast-root-electric-bg,#0ea5e914)] dark:bg-[var(--zui-toast-root-electric-bg-dark,#38bdf824)] text-[color:var(--zui-toast-root-electric-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-electric-fg-dark,#f8fafc)]",
+  forest:
+    "border border-[color:var(--zui-toast-root-forest-border,#166534)] dark:border-[color:var(--zui-toast-root-forest-border-dark,#4ade80)] bg-[var(--zui-toast-root-forest-bg,#16653414)] dark:bg-[var(--zui-toast-root-forest-bg-dark,#4ade8024)] text-[color:var(--zui-toast-root-forest-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-forest-fg-dark,#f8fafc)]",
+  sunset:
+    "border border-[color:var(--zui-toast-root-sunset-border,#ea580c)] dark:border-[color:var(--zui-toast-root-sunset-border-dark,#fb923c)] bg-[var(--zui-toast-root-sunset-bg,#ea580c14)] dark:bg-[var(--zui-toast-root-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-toast-root-sunset-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-sunset-fg-dark,#f8fafc)]",
+  magenta:
+    "border border-[color:var(--zui-toast-root-magenta-border,#c026d3)] dark:border-[color:var(--zui-toast-root-magenta-border-dark,#e879f9)] bg-[var(--zui-toast-root-magenta-bg,#c026d314)] dark:bg-[var(--zui-toast-root-magenta-bg-dark,#e879f924)] text-[color:var(--zui-toast-root-magenta-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-magenta-fg-dark,#f8fafc)]",
+  crimson:
+    "border border-[color:var(--zui-toast-root-crimson-border,#b91c1c)] dark:border-[color:var(--zui-toast-root-crimson-border-dark,#f87171)] bg-[var(--zui-toast-root-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-toast-root-crimson-bg-dark,#f8717124)] text-[color:var(--zui-toast-root-crimson-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-crimson-fg-dark,#f8fafc)]",
+  aqua: "border border-[color:var(--zui-toast-root-aqua-border,#0f766e)] dark:border-[color:var(--zui-toast-root-aqua-border-dark,#2dd4bf)] bg-[var(--zui-toast-root-aqua-bg,#0f766e14)] dark:bg-[var(--zui-toast-root-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-toast-root-aqua-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-aqua-fg-dark,#f8fafc)]",
+  plum: "border border-[color:var(--zui-toast-root-plum-border,#7e22ce)] dark:border-[color:var(--zui-toast-root-plum-border-dark,#c084fc)] bg-[var(--zui-toast-root-plum-bg,#7e22ce14)] dark:bg-[var(--zui-toast-root-plum-bg-dark,#c084fc24)] text-[color:var(--zui-toast-root-plum-fg,#0f172a)] dark:text-[color:var(--zui-toast-root-plum-fg-dark,#f8fafc)]",
 } as const;
 
 export const zuiToastRootSizes = {

package/src/design-system/toggle.ts

@@ -57,6 +57,30 @@ export const zuiToggleTrackAppearances = {
     "bg-[var(--zui-toggle-track-gradient-pink-bg,oklch(82.3%_0.12_346.018))] dark:bg-[var(--zui-toggle-track-gradient-pink-bg-dark,oklch(82.3%_0.12_346.018))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-toggle-track-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-toggle-track-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-toggle-track-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))]",
   "gradient-orange":
     "bg-[var(--zui-toggle-track-gradient-orange-bg,oklch(83.7%_0.128_66.29))] dark:bg-[var(--zui-toggle-track-gradient-orange-bg-dark,oklch(83.7%_0.128_66.29))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-toggle-track-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-toggle-track-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-toggle-track-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))]",
+  blue: "data-[state=checked]:border-[color:var(--zui-toggle-track-blue-border-checked,#2563eb66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-blue-border-checked-dark,#3b82f666)] data-[state=checked]:bg-[var(--zui-toggle-track-blue-bg-checked,#2563ebcc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-blue-bg-checked-dark,#3b82f6cc)]",
+  mint: "data-[state=checked]:border-[color:var(--zui-toggle-track-mint-border-checked,#10b98166)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-mint-border-checked-dark,#6ee7b766)] data-[state=checked]:bg-[var(--zui-toggle-track-mint-bg-checked,#10b981cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-mint-bg-checked-dark,#6ee7b7cc)]",
+  ocean:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-ocean-border-checked,#0284c766)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-ocean-border-checked-dark,#38bdf866)] data-[state=checked]:bg-[var(--zui-toggle-track-ocean-bg-checked,#0284c7cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-ocean-bg-checked-dark,#38bdf8cc)]",
+  sapphire:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-sapphire-border-checked,#1d4ed866)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-sapphire-border-checked-dark,#60a5fa66)] data-[state=checked]:bg-[var(--zui-toggle-track-sapphire-bg-checked,#1d4ed8cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-sapphire-bg-checked-dark,#60a5facc)]",
+  lavender:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-lavender-border-checked,#8b5cf666)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-lavender-border-checked-dark,#a78bfa66)] data-[state=checked]:bg-[var(--zui-toggle-track-lavender-bg-checked,#8b5cf6cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-lavender-bg-checked-dark,#a78bfacc)]",
+  ruby: "data-[state=checked]:border-[color:var(--zui-toggle-track-ruby-border-checked,#be123c66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-ruby-border-checked-dark,#fb718566)] data-[state=checked]:bg-[var(--zui-toggle-track-ruby-bg-checked,#be123ccc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-ruby-bg-checked-dark,#fb7185cc)]",
+  red: "data-[state=checked]:border-[color:var(--zui-toggle-track-red-border-checked,#dc262666)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-red-border-checked-dark,#ef444466)] data-[state=checked]:bg-[var(--zui-toggle-track-red-bg-checked,#dc2626cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-red-bg-checked-dark,#ef4444cc)]",
+  royal:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-royal-border-checked,#4338ca66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-royal-border-checked-dark,#818cf866)] data-[state=checked]:bg-[var(--zui-toggle-track-royal-bg-checked,#4338cacc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-royal-bg-checked-dark,#818cf8cc)]",
+  electric:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-electric-border-checked,#0ea5e966)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-electric-border-checked-dark,#38bdf866)] data-[state=checked]:bg-[var(--zui-toggle-track-electric-bg-checked,#0ea5e9cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-electric-bg-checked-dark,#38bdf8cc)]",
+  forest:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-forest-border-checked,#16653466)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-forest-border-checked-dark,#4ade8066)] data-[state=checked]:bg-[var(--zui-toggle-track-forest-bg-checked,#166534cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-forest-bg-checked-dark,#4ade80cc)]",
+  sunset:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-sunset-border-checked,#ea580c66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-sunset-border-checked-dark,#fb923c66)] data-[state=checked]:bg-[var(--zui-toggle-track-sunset-bg-checked,#ea580ccc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-sunset-bg-checked-dark,#fb923ccc)]",
+  magenta:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-magenta-border-checked,#c026d366)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-magenta-border-checked-dark,#e879f966)] data-[state=checked]:bg-[var(--zui-toggle-track-magenta-bg-checked,#c026d3cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-magenta-bg-checked-dark,#e879f9cc)]",
+  crimson:
+    "data-[state=checked]:border-[color:var(--zui-toggle-track-crimson-border-checked,#b91c1c66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-crimson-border-checked-dark,#f8717166)] data-[state=checked]:bg-[var(--zui-toggle-track-crimson-bg-checked,#b91c1ccc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-crimson-bg-checked-dark,#f87171cc)]",
+  aqua: "data-[state=checked]:border-[color:var(--zui-toggle-track-aqua-border-checked,#0f766e66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-aqua-border-checked-dark,#2dd4bf66)] data-[state=checked]:bg-[var(--zui-toggle-track-aqua-bg-checked,#0f766ecc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-aqua-bg-checked-dark,#2dd4bfcc)]",
+  plum: "data-[state=checked]:border-[color:var(--zui-toggle-track-plum-border-checked,#7e22ce66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-plum-border-checked-dark,#c084fc66)] data-[state=checked]:bg-[var(--zui-toggle-track-plum-bg-checked,#7e22cecc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-plum-bg-checked-dark,#c084fccc)]",
 } as const;
 
 export const zuiToggleThumbBase =
@@ -118,4 +142,28 @@ export const zuiToggleThumbColors = {
     "bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg,oklch(65.6%_0.241_354.308))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg-dark,oklch(65.6%_0.241_354.308))]",
   "gradient-orange":
     "bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg-dark,oklch(70.5%_0.213_47.604))]",
+  blue: "bg-[var(--zui-toggle-thumb-colors-blue-bg,#2563eb)] dark:bg-[var(--zui-toggle-thumb-colors-blue-bg-dark,#3b82f6)]",
+  mint: "bg-[var(--zui-toggle-thumb-colors-mint-bg,#10b981)] dark:bg-[var(--zui-toggle-thumb-colors-mint-bg-dark,#6ee7b7)]",
+  ocean:
+    "bg-[var(--zui-toggle-thumb-colors-ocean-bg,#0284c7)] dark:bg-[var(--zui-toggle-thumb-colors-ocean-bg-dark,#38bdf8)]",
+  sapphire:
+    "bg-[var(--zui-toggle-thumb-colors-sapphire-bg,#1d4ed8)] dark:bg-[var(--zui-toggle-thumb-colors-sapphire-bg-dark,#60a5fa)]",
+  lavender:
+    "bg-[var(--zui-toggle-thumb-colors-lavender-bg,#8b5cf6)] dark:bg-[var(--zui-toggle-thumb-colors-lavender-bg-dark,#a78bfa)]",
+  ruby: "bg-[var(--zui-toggle-thumb-colors-ruby-bg,#be123c)] dark:bg-[var(--zui-toggle-thumb-colors-ruby-bg-dark,#fb7185)]",
+  red: "bg-[var(--zui-toggle-thumb-colors-red-bg,#dc2626)] dark:bg-[var(--zui-toggle-thumb-colors-red-bg-dark,#ef4444)]",
+  royal:
+    "bg-[var(--zui-toggle-thumb-colors-royal-bg,#4338ca)] dark:bg-[var(--zui-toggle-thumb-colors-royal-bg-dark,#818cf8)]",
+  electric:
+    "bg-[var(--zui-toggle-thumb-colors-electric-bg,#0ea5e9)] dark:bg-[var(--zui-toggle-thumb-colors-electric-bg-dark,#38bdf8)]",
+  forest:
+    "bg-[var(--zui-toggle-thumb-colors-forest-bg,#166534)] dark:bg-[var(--zui-toggle-thumb-colors-forest-bg-dark,#4ade80)]",
+  sunset:
+    "bg-[var(--zui-toggle-thumb-colors-sunset-bg,#ea580c)] dark:bg-[var(--zui-toggle-thumb-colors-sunset-bg-dark,#fb923c)]",
+  magenta:
+    "bg-[var(--zui-toggle-thumb-colors-magenta-bg,#c026d3)] dark:bg-[var(--zui-toggle-thumb-colors-magenta-bg-dark,#e879f9)]",
+  crimson:
+    "bg-[var(--zui-toggle-thumb-colors-crimson-bg,#b91c1c)] dark:bg-[var(--zui-toggle-thumb-colors-crimson-bg-dark,#f87171)]",
+  aqua: "bg-[var(--zui-toggle-thumb-colors-aqua-bg,#0f766e)] dark:bg-[var(--zui-toggle-thumb-colors-aqua-bg-dark,#2dd4bf)]",
+  plum: "bg-[var(--zui-toggle-thumb-colors-plum-bg,#7e22ce)] dark:bg-[var(--zui-toggle-thumb-colors-plum-bg-dark,#c084fc)]",
 } as const;

package/src/design-system/tooltip.ts

@@ -44,6 +44,37 @@ export const zuiTooltipVariants = {
     "bg-linear-to-r from-[var(--zui-tooltip-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-tooltip-gradient-pink-from-dark,oklch(45.9%_0.187_3.815))] to-[var(--zui-tooltip-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-tooltip-gradient-pink-to-dark,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-tooltip-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-pink-fg-dark,#ffffff)]",
   "gradient-orange":
     "bg-linear-to-r from-[var(--zui-tooltip-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-tooltip-gradient-orange-from-dark,oklch(47%_0.157_37.304))] to-[var(--zui-tooltip-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-tooltip-gradient-orange-to-dark,oklch(44.4%_0.177_26.899))] text-[color:var(--zui-tooltip-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-orange-fg-dark,#ffffff)]",
+  blue: "border border-[color:var(--zui-tooltip-blue-border,#2563eb)] dark:border-[color:var(--zui-tooltip-blue-border-dark,#3b82f6)] bg-[var(--zui-tooltip-blue-bg,#2563eb14)] dark:bg-[var(--zui-tooltip-blue-bg-dark,#3b82f624)] text-[color:var(--zui-tooltip-blue-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-blue-fg-dark,#f8fafc)]",
+  cyan: "border border-[color:var(--zui-tooltip-cyan-border,#0891b2)] dark:border-[color:var(--zui-tooltip-cyan-border-dark,#22d3ee)] bg-[var(--zui-tooltip-cyan-bg,#0891b214)] dark:bg-[var(--zui-tooltip-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-tooltip-cyan-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-cyan-fg-dark,#f8fafc)]",
+  lime: "border border-[color:var(--zui-tooltip-lime-border,#65a30d)] dark:border-[color:var(--zui-tooltip-lime-border-dark,#a3e635)] bg-[var(--zui-tooltip-lime-bg,#65a30d14)] dark:bg-[var(--zui-tooltip-lime-bg-dark,#a3e63524)] text-[color:var(--zui-tooltip-lime-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-lime-fg-dark,#f8fafc)]",
+  mint: "border border-[color:var(--zui-tooltip-mint-border,#10b981)] dark:border-[color:var(--zui-tooltip-mint-border-dark,#6ee7b7)] bg-[var(--zui-tooltip-mint-bg,#10b98114)] dark:bg-[var(--zui-tooltip-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-tooltip-mint-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-mint-fg-dark,#f8fafc)]",
+  ocean:
+    "border border-[color:var(--zui-tooltip-ocean-border,#0284c7)] dark:border-[color:var(--zui-tooltip-ocean-border-dark,#38bdf8)] bg-[var(--zui-tooltip-ocean-bg,#0284c714)] dark:bg-[var(--zui-tooltip-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-tooltip-ocean-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-ocean-fg-dark,#f8fafc)]",
+  sapphire:
+    "border border-[color:var(--zui-tooltip-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-tooltip-sapphire-border-dark,#60a5fa)] bg-[var(--zui-tooltip-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-tooltip-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-tooltip-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-sapphire-fg-dark,#f8fafc)]",
+  lavender:
+    "border border-[color:var(--zui-tooltip-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-tooltip-lavender-border-dark,#a78bfa)] bg-[var(--zui-tooltip-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-tooltip-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-tooltip-lavender-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-lavender-fg-dark,#f8fafc)]",
+  ruby: "border border-[color:var(--zui-tooltip-ruby-border,#be123c)] dark:border-[color:var(--zui-tooltip-ruby-border-dark,#fb7185)] bg-[var(--zui-tooltip-ruby-bg,#be123c14)] dark:bg-[var(--zui-tooltip-ruby-bg-dark,#fb718524)] text-[color:var(--zui-tooltip-ruby-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-ruby-fg-dark,#f8fafc)]",
+  red: "border border-[color:var(--zui-tooltip-red-border,#dc2626)] dark:border-[color:var(--zui-tooltip-red-border-dark,#ef4444)] bg-[var(--zui-tooltip-red-bg,#dc262614)] dark:bg-[var(--zui-tooltip-red-bg-dark,#ef444424)] text-[color:var(--zui-tooltip-red-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-red-fg-dark,#f8fafc)]",
+  slate:
+    "border border-[color:var(--zui-tooltip-slate-border,#475569)] dark:border-[color:var(--zui-tooltip-slate-border-dark,#64748b)] bg-[var(--zui-tooltip-slate-bg,#47556914)] dark:bg-[var(--zui-tooltip-slate-bg-dark,#64748b24)] text-[color:var(--zui-tooltip-slate-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-slate-fg-dark,#f8fafc)]",
+  zinc: "border border-[color:var(--zui-tooltip-zinc-border,#52525b)] dark:border-[color:var(--zui-tooltip-zinc-border-dark,#71717a)] bg-[var(--zui-tooltip-zinc-bg,#52525b14)] dark:bg-[var(--zui-tooltip-zinc-bg-dark,#71717a24)] text-[color:var(--zui-tooltip-zinc-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-zinc-fg-dark,#f8fafc)]",
+  stone:
+    "border border-[color:var(--zui-tooltip-stone-border,#57534e)] dark:border-[color:var(--zui-tooltip-stone-border-dark,#78716c)] bg-[var(--zui-tooltip-stone-bg,#57534e14)] dark:bg-[var(--zui-tooltip-stone-bg-dark,#78716c24)] text-[color:var(--zui-tooltip-stone-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-stone-fg-dark,#f8fafc)]",
+  royal:
+    "border border-[color:var(--zui-tooltip-royal-border,#4338ca)] dark:border-[color:var(--zui-tooltip-royal-border-dark,#818cf8)] bg-[var(--zui-tooltip-royal-bg,#4338ca14)] dark:bg-[var(--zui-tooltip-royal-bg-dark,#818cf824)] text-[color:var(--zui-tooltip-royal-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-royal-fg-dark,#f8fafc)]",
+  electric:
+    "border border-[color:var(--zui-tooltip-electric-border,#0ea5e9)] dark:border-[color:var(--zui-tooltip-electric-border-dark,#38bdf8)] bg-[var(--zui-tooltip-electric-bg,#0ea5e914)] dark:bg-[var(--zui-tooltip-electric-bg-dark,#38bdf824)] text-[color:var(--zui-tooltip-electric-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-electric-fg-dark,#f8fafc)]",
+  forest:
+    "border border-[color:var(--zui-tooltip-forest-border,#166534)] dark:border-[color:var(--zui-tooltip-forest-border-dark,#4ade80)] bg-[var(--zui-tooltip-forest-bg,#16653414)] dark:bg-[var(--zui-tooltip-forest-bg-dark,#4ade8024)] text-[color:var(--zui-tooltip-forest-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-forest-fg-dark,#f8fafc)]",
+  sunset:
+    "border border-[color:var(--zui-tooltip-sunset-border,#ea580c)] dark:border-[color:var(--zui-tooltip-sunset-border-dark,#fb923c)] bg-[var(--zui-tooltip-sunset-bg,#ea580c14)] dark:bg-[var(--zui-tooltip-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-tooltip-sunset-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-sunset-fg-dark,#f8fafc)]",
+  magenta:
+    "border border-[color:var(--zui-tooltip-magenta-border,#c026d3)] dark:border-[color:var(--zui-tooltip-magenta-border-dark,#e879f9)] bg-[var(--zui-tooltip-magenta-bg,#c026d314)] dark:bg-[var(--zui-tooltip-magenta-bg-dark,#e879f924)] text-[color:var(--zui-tooltip-magenta-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-magenta-fg-dark,#f8fafc)]",
+  crimson:
+    "border border-[color:var(--zui-tooltip-crimson-border,#b91c1c)] dark:border-[color:var(--zui-tooltip-crimson-border-dark,#f87171)] bg-[var(--zui-tooltip-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-tooltip-crimson-bg-dark,#f8717124)] text-[color:var(--zui-tooltip-crimson-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-crimson-fg-dark,#f8fafc)]",
+  aqua: "border border-[color:var(--zui-tooltip-aqua-border,#0f766e)] dark:border-[color:var(--zui-tooltip-aqua-border-dark,#2dd4bf)] bg-[var(--zui-tooltip-aqua-bg,#0f766e14)] dark:bg-[var(--zui-tooltip-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-tooltip-aqua-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-aqua-fg-dark,#f8fafc)]",
+  plum: "border border-[color:var(--zui-tooltip-plum-border,#7e22ce)] dark:border-[color:var(--zui-tooltip-plum-border-dark,#c084fc)] bg-[var(--zui-tooltip-plum-bg,#7e22ce14)] dark:bg-[var(--zui-tooltip-plum-bg-dark,#c084fc24)] text-[color:var(--zui-tooltip-plum-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-plum-fg-dark,#f8fafc)]",
 } as const;
 
 export const zuiTooltipSizes = {

package/src/design-system/tree-view.ts

@@ -42,6 +42,39 @@ export const zuiTreeViewAppearances = {
     "rounded-xl border border-[color:var(--zui-tree-view-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-tree-view-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] p-2",
   "gradient-orange":
     "rounded-xl border border-[color:var(--zui-tree-view-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-tree-view-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] p-2",
+  blue: "rounded-xl border border-[color:var(--zui-tree-view-blue-border,#2563eb)] dark:border-[color:var(--zui-tree-view-blue-border-dark,#3b82f6)] bg-[var(--zui-tree-view-blue-bg,transparent)] dark:bg-[var(--zui-tree-view-blue-bg-dark,transparent)] text-[color:var(--zui-tree-view-blue-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-blue-fg-dark,#f8fafc)] p-2",
+  cyan: "rounded-xl border border-[color:var(--zui-tree-view-cyan-border,#0891b2)] dark:border-[color:var(--zui-tree-view-cyan-border-dark,#22d3ee)] bg-[var(--zui-tree-view-cyan-bg,transparent)] dark:bg-[var(--zui-tree-view-cyan-bg-dark,transparent)] text-[color:var(--zui-tree-view-cyan-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-cyan-fg-dark,#f8fafc)] p-2",
+  green:
+    "rounded-xl border border-[color:var(--zui-tree-view-green-border,#16a34a)] dark:border-[color:var(--zui-tree-view-green-border-dark,#22c55e)] bg-[var(--zui-tree-view-green-bg,transparent)] dark:bg-[var(--zui-tree-view-green-bg-dark,transparent)] text-[color:var(--zui-tree-view-green-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-green-fg-dark,#f8fafc)] p-2",
+  lime: "rounded-xl border border-[color:var(--zui-tree-view-lime-border,#65a30d)] dark:border-[color:var(--zui-tree-view-lime-border-dark,#a3e635)] bg-[var(--zui-tree-view-lime-bg,transparent)] dark:bg-[var(--zui-tree-view-lime-bg-dark,transparent)] text-[color:var(--zui-tree-view-lime-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-lime-fg-dark,#f8fafc)] p-2",
+  mint: "rounded-xl border border-[color:var(--zui-tree-view-mint-border,#10b981)] dark:border-[color:var(--zui-tree-view-mint-border-dark,#6ee7b7)] bg-[var(--zui-tree-view-mint-bg,transparent)] dark:bg-[var(--zui-tree-view-mint-bg-dark,transparent)] text-[color:var(--zui-tree-view-mint-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-mint-fg-dark,#f8fafc)] p-2",
+  ocean:
+    "rounded-xl border border-[color:var(--zui-tree-view-ocean-border,#0284c7)] dark:border-[color:var(--zui-tree-view-ocean-border-dark,#38bdf8)] bg-[var(--zui-tree-view-ocean-bg,transparent)] dark:bg-[var(--zui-tree-view-ocean-bg-dark,transparent)] text-[color:var(--zui-tree-view-ocean-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-ocean-fg-dark,#f8fafc)] p-2",
+  sapphire:
+    "rounded-xl border border-[color:var(--zui-tree-view-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-tree-view-sapphire-border-dark,#60a5fa)] bg-[var(--zui-tree-view-sapphire-bg,transparent)] dark:bg-[var(--zui-tree-view-sapphire-bg-dark,transparent)] text-[color:var(--zui-tree-view-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-sapphire-fg-dark,#f8fafc)] p-2",
+  lavender:
+    "rounded-xl border border-[color:var(--zui-tree-view-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-tree-view-lavender-border-dark,#a78bfa)] bg-[var(--zui-tree-view-lavender-bg,transparent)] dark:bg-[var(--zui-tree-view-lavender-bg-dark,transparent)] text-[color:var(--zui-tree-view-lavender-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-lavender-fg-dark,#f8fafc)] p-2",
+  ruby: "rounded-xl border border-[color:var(--zui-tree-view-ruby-border,#be123c)] dark:border-[color:var(--zui-tree-view-ruby-border-dark,#fb7185)] bg-[var(--zui-tree-view-ruby-bg,transparent)] dark:bg-[var(--zui-tree-view-ruby-bg-dark,transparent)] text-[color:var(--zui-tree-view-ruby-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-ruby-fg-dark,#f8fafc)] p-2",
+  red: "rounded-xl border border-[color:var(--zui-tree-view-red-border,#dc2626)] dark:border-[color:var(--zui-tree-view-red-border-dark,#ef4444)] bg-[var(--zui-tree-view-red-bg,transparent)] dark:bg-[var(--zui-tree-view-red-bg-dark,transparent)] text-[color:var(--zui-tree-view-red-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-red-fg-dark,#f8fafc)] p-2",
+  slate:
+    "rounded-xl border border-[color:var(--zui-tree-view-slate-border,#475569)] dark:border-[color:var(--zui-tree-view-slate-border-dark,#64748b)] bg-[var(--zui-tree-view-slate-bg,transparent)] dark:bg-[var(--zui-tree-view-slate-bg-dark,transparent)] text-[color:var(--zui-tree-view-slate-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-slate-fg-dark,#f8fafc)] p-2",
+  zinc: "rounded-xl border border-[color:var(--zui-tree-view-zinc-border,#52525b)] dark:border-[color:var(--zui-tree-view-zinc-border-dark,#71717a)] bg-[var(--zui-tree-view-zinc-bg,transparent)] dark:bg-[var(--zui-tree-view-zinc-bg-dark,transparent)] text-[color:var(--zui-tree-view-zinc-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-zinc-fg-dark,#f8fafc)] p-2",
+  stone:
+    "rounded-xl border border-[color:var(--zui-tree-view-stone-border,#57534e)] dark:border-[color:var(--zui-tree-view-stone-border-dark,#78716c)] bg-[var(--zui-tree-view-stone-bg,transparent)] dark:bg-[var(--zui-tree-view-stone-bg-dark,transparent)] text-[color:var(--zui-tree-view-stone-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-stone-fg-dark,#f8fafc)] p-2",
+  royal:
+    "rounded-xl border border-[color:var(--zui-tree-view-royal-border,#4338ca)] dark:border-[color:var(--zui-tree-view-royal-border-dark,#818cf8)] bg-[var(--zui-tree-view-royal-bg,transparent)] dark:bg-[var(--zui-tree-view-royal-bg-dark,transparent)] text-[color:var(--zui-tree-view-royal-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-royal-fg-dark,#f8fafc)] p-2",
+  electric:
+    "rounded-xl border border-[color:var(--zui-tree-view-electric-border,#0ea5e9)] dark:border-[color:var(--zui-tree-view-electric-border-dark,#38bdf8)] bg-[var(--zui-tree-view-electric-bg,transparent)] dark:bg-[var(--zui-tree-view-electric-bg-dark,transparent)] text-[color:var(--zui-tree-view-electric-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-electric-fg-dark,#f8fafc)] p-2",
+  forest:
+    "rounded-xl border border-[color:var(--zui-tree-view-forest-border,#166534)] dark:border-[color:var(--zui-tree-view-forest-border-dark,#4ade80)] bg-[var(--zui-tree-view-forest-bg,transparent)] dark:bg-[var(--zui-tree-view-forest-bg-dark,transparent)] text-[color:var(--zui-tree-view-forest-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-forest-fg-dark,#f8fafc)] p-2",
+  sunset:
+    "rounded-xl border border-[color:var(--zui-tree-view-sunset-border,#ea580c)] dark:border-[color:var(--zui-tree-view-sunset-border-dark,#fb923c)] bg-[var(--zui-tree-view-sunset-bg,transparent)] dark:bg-[var(--zui-tree-view-sunset-bg-dark,transparent)] text-[color:var(--zui-tree-view-sunset-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-sunset-fg-dark,#f8fafc)] p-2",
+  magenta:
+    "rounded-xl border border-[color:var(--zui-tree-view-magenta-border,#c026d3)] dark:border-[color:var(--zui-tree-view-magenta-border-dark,#e879f9)] bg-[var(--zui-tree-view-magenta-bg,transparent)] dark:bg-[var(--zui-tree-view-magenta-bg-dark,transparent)] text-[color:var(--zui-tree-view-magenta-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-magenta-fg-dark,#f8fafc)] p-2",
+  crimson:
+    "rounded-xl border border-[color:var(--zui-tree-view-crimson-border,#b91c1c)] dark:border-[color:var(--zui-tree-view-crimson-border-dark,#f87171)] bg-[var(--zui-tree-view-crimson-bg,transparent)] dark:bg-[var(--zui-tree-view-crimson-bg-dark,transparent)] text-[color:var(--zui-tree-view-crimson-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-crimson-fg-dark,#f8fafc)] p-2",
+  aqua: "rounded-xl border border-[color:var(--zui-tree-view-aqua-border,#0f766e)] dark:border-[color:var(--zui-tree-view-aqua-border-dark,#2dd4bf)] bg-[var(--zui-tree-view-aqua-bg,transparent)] dark:bg-[var(--zui-tree-view-aqua-bg-dark,transparent)] text-[color:var(--zui-tree-view-aqua-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-aqua-fg-dark,#f8fafc)] p-2",
+  plum: "rounded-xl border border-[color:var(--zui-tree-view-plum-border,#7e22ce)] dark:border-[color:var(--zui-tree-view-plum-border-dark,#c084fc)] bg-[var(--zui-tree-view-plum-bg,transparent)] dark:bg-[var(--zui-tree-view-plum-bg-dark,transparent)] text-[color:var(--zui-tree-view-plum-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-plum-fg-dark,#f8fafc)] p-2",
 } as const;
 
 export const zuiTreeViewSizes = {
@@ -101,6 +134,39 @@ export const zuiTreeViewItemAppearances = {
     "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-pink-from,oklch(82.3%_0.12_346.018))] data-[selected=true]:to-[var(--zui-tree-view-gradient-pink-to,oklch(81%_0.117_11.638))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
   "gradient-orange":
     "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-orange-from,oklch(83.7%_0.128_66.29))] data-[selected=true]:to-[var(--zui-tree-view-gradient-orange-to,oklch(80.8%_0.114_19.571))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
+  blue: "hover:bg-[var(--zui-tree-view-item-blue-bg-hover,#2563eb18)] dark:hover:bg-[var(--zui-tree-view-item-blue-bg-hover-dark,#3b82f62e)] hover:text-[color:var(--zui-tree-view-item-blue-fg-hover,#2563eb)] dark:hover:text-[color:var(--zui-tree-view-item-blue-fg-hover-dark,#3b82f6)] data-[selected=true]:bg-[var(--zui-tree-view-item-blue-bg,#2563eb14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-blue-bg-dark,#3b82f624)] data-[selected=true]:text-[color:var(--zui-tree-view-item-blue-fg,#2563eb)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-blue-fg-dark,#3b82f6)]",
+  cyan: "hover:bg-[var(--zui-tree-view-item-cyan-bg-hover,#0891b218)] dark:hover:bg-[var(--zui-tree-view-item-cyan-bg-hover-dark,#22d3ee2e)] hover:text-[color:var(--zui-tree-view-item-cyan-fg-hover,#0891b2)] dark:hover:text-[color:var(--zui-tree-view-item-cyan-fg-hover-dark,#22d3ee)] data-[selected=true]:bg-[var(--zui-tree-view-item-cyan-bg,#0891b214)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-cyan-bg-dark,#22d3ee24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-cyan-fg,#0891b2)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-cyan-fg-dark,#22d3ee)]",
+  green:
+    "hover:bg-[var(--zui-tree-view-item-green-bg-hover,#16a34a18)] dark:hover:bg-[var(--zui-tree-view-item-green-bg-hover-dark,#22c55e2e)] hover:text-[color:var(--zui-tree-view-item-green-fg-hover,#16a34a)] dark:hover:text-[color:var(--zui-tree-view-item-green-fg-hover-dark,#22c55e)] data-[selected=true]:bg-[var(--zui-tree-view-item-green-bg,#16a34a14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-green-bg-dark,#22c55e24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-green-fg,#16a34a)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-green-fg-dark,#22c55e)]",
+  lime: "hover:bg-[var(--zui-tree-view-item-lime-bg-hover,#65a30d18)] dark:hover:bg-[var(--zui-tree-view-item-lime-bg-hover-dark,#a3e6352e)] hover:text-[color:var(--zui-tree-view-item-lime-fg-hover,#65a30d)] dark:hover:text-[color:var(--zui-tree-view-item-lime-fg-hover-dark,#a3e635)] data-[selected=true]:bg-[var(--zui-tree-view-item-lime-bg,#65a30d14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-lime-bg-dark,#a3e63524)] data-[selected=true]:text-[color:var(--zui-tree-view-item-lime-fg,#65a30d)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-lime-fg-dark,#a3e635)]",
+  mint: "hover:bg-[var(--zui-tree-view-item-mint-bg-hover,#10b98118)] dark:hover:bg-[var(--zui-tree-view-item-mint-bg-hover-dark,#6ee7b72e)] hover:text-[color:var(--zui-tree-view-item-mint-fg-hover,#10b981)] dark:hover:text-[color:var(--zui-tree-view-item-mint-fg-hover-dark,#6ee7b7)] data-[selected=true]:bg-[var(--zui-tree-view-item-mint-bg,#10b98114)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-mint-bg-dark,#6ee7b724)] data-[selected=true]:text-[color:var(--zui-tree-view-item-mint-fg,#10b981)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-mint-fg-dark,#6ee7b7)]",
+  ocean:
+    "hover:bg-[var(--zui-tree-view-item-ocean-bg-hover,#0284c718)] dark:hover:bg-[var(--zui-tree-view-item-ocean-bg-hover-dark,#38bdf82e)] hover:text-[color:var(--zui-tree-view-item-ocean-fg-hover,#0284c7)] dark:hover:text-[color:var(--zui-tree-view-item-ocean-fg-hover-dark,#38bdf8)] data-[selected=true]:bg-[var(--zui-tree-view-item-ocean-bg,#0284c714)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-ocean-bg-dark,#38bdf824)] data-[selected=true]:text-[color:var(--zui-tree-view-item-ocean-fg,#0284c7)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-ocean-fg-dark,#38bdf8)]",
+  sapphire:
+    "hover:bg-[var(--zui-tree-view-item-sapphire-bg-hover,#1d4ed818)] dark:hover:bg-[var(--zui-tree-view-item-sapphire-bg-hover-dark,#60a5fa2e)] hover:text-[color:var(--zui-tree-view-item-sapphire-fg-hover,#1d4ed8)] dark:hover:text-[color:var(--zui-tree-view-item-sapphire-fg-hover-dark,#60a5fa)] data-[selected=true]:bg-[var(--zui-tree-view-item-sapphire-bg,#1d4ed814)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-sapphire-bg-dark,#60a5fa24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-sapphire-fg,#1d4ed8)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-sapphire-fg-dark,#60a5fa)]",
+  lavender:
+    "hover:bg-[var(--zui-tree-view-item-lavender-bg-hover,#8b5cf618)] dark:hover:bg-[var(--zui-tree-view-item-lavender-bg-hover-dark,#a78bfa2e)] hover:text-[color:var(--zui-tree-view-item-lavender-fg-hover,#8b5cf6)] dark:hover:text-[color:var(--zui-tree-view-item-lavender-fg-hover-dark,#a78bfa)] data-[selected=true]:bg-[var(--zui-tree-view-item-lavender-bg,#8b5cf614)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-lavender-bg-dark,#a78bfa24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-lavender-fg,#8b5cf6)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-lavender-fg-dark,#a78bfa)]",
+  ruby: "hover:bg-[var(--zui-tree-view-item-ruby-bg-hover,#be123c18)] dark:hover:bg-[var(--zui-tree-view-item-ruby-bg-hover-dark,#fb71852e)] hover:text-[color:var(--zui-tree-view-item-ruby-fg-hover,#be123c)] dark:hover:text-[color:var(--zui-tree-view-item-ruby-fg-hover-dark,#fb7185)] data-[selected=true]:bg-[var(--zui-tree-view-item-ruby-bg,#be123c14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-ruby-bg-dark,#fb718524)] data-[selected=true]:text-[color:var(--zui-tree-view-item-ruby-fg,#be123c)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-ruby-fg-dark,#fb7185)]",
+  red: "hover:bg-[var(--zui-tree-view-item-red-bg-hover,#dc262618)] dark:hover:bg-[var(--zui-tree-view-item-red-bg-hover-dark,#ef44442e)] hover:text-[color:var(--zui-tree-view-item-red-fg-hover,#dc2626)] dark:hover:text-[color:var(--zui-tree-view-item-red-fg-hover-dark,#ef4444)] data-[selected=true]:bg-[var(--zui-tree-view-item-red-bg,#dc262614)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-red-bg-dark,#ef444424)] data-[selected=true]:text-[color:var(--zui-tree-view-item-red-fg,#dc2626)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-red-fg-dark,#ef4444)]",
+  slate:
+    "hover:bg-[var(--zui-tree-view-item-slate-bg-hover,#47556918)] dark:hover:bg-[var(--zui-tree-view-item-slate-bg-hover-dark,#64748b2e)] hover:text-[color:var(--zui-tree-view-item-slate-fg-hover,#475569)] dark:hover:text-[color:var(--zui-tree-view-item-slate-fg-hover-dark,#64748b)] data-[selected=true]:bg-[var(--zui-tree-view-item-slate-bg,#47556914)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-slate-bg-dark,#64748b24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-slate-fg,#475569)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-slate-fg-dark,#64748b)]",
+  zinc: "hover:bg-[var(--zui-tree-view-item-zinc-bg-hover,#52525b18)] dark:hover:bg-[var(--zui-tree-view-item-zinc-bg-hover-dark,#71717a2e)] hover:text-[color:var(--zui-tree-view-item-zinc-fg-hover,#52525b)] dark:hover:text-[color:var(--zui-tree-view-item-zinc-fg-hover-dark,#71717a)] data-[selected=true]:bg-[var(--zui-tree-view-item-zinc-bg,#52525b14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-zinc-bg-dark,#71717a24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-zinc-fg,#52525b)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-zinc-fg-dark,#71717a)]",
+  stone:
+    "hover:bg-[var(--zui-tree-view-item-stone-bg-hover,#57534e18)] dark:hover:bg-[var(--zui-tree-view-item-stone-bg-hover-dark,#78716c2e)] hover:text-[color:var(--zui-tree-view-item-stone-fg-hover,#57534e)] dark:hover:text-[color:var(--zui-tree-view-item-stone-fg-hover-dark,#78716c)] data-[selected=true]:bg-[var(--zui-tree-view-item-stone-bg,#57534e14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-stone-bg-dark,#78716c24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-stone-fg,#57534e)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-stone-fg-dark,#78716c)]",
+  royal:
+    "hover:bg-[var(--zui-tree-view-item-royal-bg-hover,#4338ca18)] dark:hover:bg-[var(--zui-tree-view-item-royal-bg-hover-dark,#818cf82e)] hover:text-[color:var(--zui-tree-view-item-royal-fg-hover,#4338ca)] dark:hover:text-[color:var(--zui-tree-view-item-royal-fg-hover-dark,#818cf8)] data-[selected=true]:bg-[var(--zui-tree-view-item-royal-bg,#4338ca14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-royal-bg-dark,#818cf824)] data-[selected=true]:text-[color:var(--zui-tree-view-item-royal-fg,#4338ca)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-royal-fg-dark,#818cf8)]",
+  electric:
+    "hover:bg-[var(--zui-tree-view-item-electric-bg-hover,#0ea5e918)] dark:hover:bg-[var(--zui-tree-view-item-electric-bg-hover-dark,#38bdf82e)] hover:text-[color:var(--zui-tree-view-item-electric-fg-hover,#0ea5e9)] dark:hover:text-[color:var(--zui-tree-view-item-electric-fg-hover-dark,#38bdf8)] data-[selected=true]:bg-[var(--zui-tree-view-item-electric-bg,#0ea5e914)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-electric-bg-dark,#38bdf824)] data-[selected=true]:text-[color:var(--zui-tree-view-item-electric-fg,#0ea5e9)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-electric-fg-dark,#38bdf8)]",
+  forest:
+    "hover:bg-[var(--zui-tree-view-item-forest-bg-hover,#16653418)] dark:hover:bg-[var(--zui-tree-view-item-forest-bg-hover-dark,#4ade802e)] hover:text-[color:var(--zui-tree-view-item-forest-fg-hover,#166534)] dark:hover:text-[color:var(--zui-tree-view-item-forest-fg-hover-dark,#4ade80)] data-[selected=true]:bg-[var(--zui-tree-view-item-forest-bg,#16653414)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-forest-bg-dark,#4ade8024)] data-[selected=true]:text-[color:var(--zui-tree-view-item-forest-fg,#166534)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-forest-fg-dark,#4ade80)]",
+  sunset:
+    "hover:bg-[var(--zui-tree-view-item-sunset-bg-hover,#ea580c18)] dark:hover:bg-[var(--zui-tree-view-item-sunset-bg-hover-dark,#fb923c2e)] hover:text-[color:var(--zui-tree-view-item-sunset-fg-hover,#ea580c)] dark:hover:text-[color:var(--zui-tree-view-item-sunset-fg-hover-dark,#fb923c)] data-[selected=true]:bg-[var(--zui-tree-view-item-sunset-bg,#ea580c14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-sunset-bg-dark,#fb923c24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-sunset-fg,#ea580c)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-sunset-fg-dark,#fb923c)]",
+  magenta:
+    "hover:bg-[var(--zui-tree-view-item-magenta-bg-hover,#c026d318)] dark:hover:bg-[var(--zui-tree-view-item-magenta-bg-hover-dark,#e879f92e)] hover:text-[color:var(--zui-tree-view-item-magenta-fg-hover,#c026d3)] dark:hover:text-[color:var(--zui-tree-view-item-magenta-fg-hover-dark,#e879f9)] data-[selected=true]:bg-[var(--zui-tree-view-item-magenta-bg,#c026d314)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-magenta-bg-dark,#e879f924)] data-[selected=true]:text-[color:var(--zui-tree-view-item-magenta-fg,#c026d3)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-magenta-fg-dark,#e879f9)]",
+  crimson:
+    "hover:bg-[var(--zui-tree-view-item-crimson-bg-hover,#b91c1c18)] dark:hover:bg-[var(--zui-tree-view-item-crimson-bg-hover-dark,#f871712e)] hover:text-[color:var(--zui-tree-view-item-crimson-fg-hover,#b91c1c)] dark:hover:text-[color:var(--zui-tree-view-item-crimson-fg-hover-dark,#f87171)] data-[selected=true]:bg-[var(--zui-tree-view-item-crimson-bg,#b91c1c14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-crimson-bg-dark,#f8717124)] data-[selected=true]:text-[color:var(--zui-tree-view-item-crimson-fg,#b91c1c)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-crimson-fg-dark,#f87171)]",
+  aqua: "hover:bg-[var(--zui-tree-view-item-aqua-bg-hover,#0f766e18)] dark:hover:bg-[var(--zui-tree-view-item-aqua-bg-hover-dark,#2dd4bf2e)] hover:text-[color:var(--zui-tree-view-item-aqua-fg-hover,#0f766e)] dark:hover:text-[color:var(--zui-tree-view-item-aqua-fg-hover-dark,#2dd4bf)] data-[selected=true]:bg-[var(--zui-tree-view-item-aqua-bg,#0f766e14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-aqua-bg-dark,#2dd4bf24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-aqua-fg,#0f766e)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-aqua-fg-dark,#2dd4bf)]",
+  plum: "hover:bg-[var(--zui-tree-view-item-plum-bg-hover,#7e22ce18)] dark:hover:bg-[var(--zui-tree-view-item-plum-bg-hover-dark,#c084fc2e)] hover:text-[color:var(--zui-tree-view-item-plum-fg-hover,#7e22ce)] dark:hover:text-[color:var(--zui-tree-view-item-plum-fg-hover-dark,#c084fc)] data-[selected=true]:bg-[var(--zui-tree-view-item-plum-bg,#7e22ce14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-plum-bg-dark,#c084fc24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-plum-fg,#7e22ce)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-plum-fg-dark,#c084fc)]",
 } as const;
 
 export const zuiTreeViewChevron =

package/src/design-system/typography.ts

@@ -10,7 +10,7 @@ export const zuiTypographyTones = {
   accent:
     "text-[color:var(--zui-typography-accent-fg,oklch(49.1%_0.27_292.581))] dark:text-[color:var(--zui-typography-accent-fg-dark,oklch(81.1%_0.111_293.571))] border-[color:var(--zui-typography-accent-border,oklch(81.1%_0.111_293.571_/_0.4))] dark:border-[color:var(--zui-typography-accent-border-dark,oklch(81.1%_0.111_293.571_/_0.4))]",
   destructive:
-    "text-[color:var(--zui-typography-destructive-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-typography-destructive-fg-dark,oklch(71.2%_0.194_13.428))] border-[color:var(--zui-typography-destructive-border,oklch(81%_0.117_11.638_/_0.4))] dark:border-[color:var(--zui-typography-destructive-border-dark,oklch(81%_0.117_11.638_/_0.4))]",
+    "text-[color:var(--zui-typography-destructive-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-typography-destructive-fg-dark,oklch(71.2%_0.194_13.428))] border-[color:var(--zui-typography-destructive-border,oklch(81%_0.117_11.638_/_0.4))] dark:border-[color:var(--zui-typography-destructive-border-dark,oklch(71.2%_0.194_13.428_/_0.4))]",
   info: "text-[color:var(--zui-typography-info-fg,oklch(50%_0.134_242.749))] dark:text-[color:var(--zui-typography-info-fg-dark,oklch(82.8%_0.111_230.318))] border-[color:var(--zui-typography-info-border,oklch(82.8%_0.111_230.318_/_0.4))] dark:border-[color:var(--zui-typography-info-border-dark,oklch(82.8%_0.111_230.318_/_0.4))]",
   success:
     "text-[color:var(--zui-typography-success-fg,oklch(50.8%_0.118_165.612))] dark:text-[color:var(--zui-typography-success-fg-dark,oklch(84.5%_0.143_164.978))] border-[color:var(--zui-typography-success-border,oklch(84.5%_0.143_164.978_/_0.4))] dark:border-[color:var(--zui-typography-success-border-dark,oklch(84.5%_0.143_164.978_/_0.4))]",

package/src/ui/accessibility/axe-core.test.tsx

@@ -0,0 +1,139 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it } from "vitest";
+
+import { assertNoAxeViolations } from "../../test-utils/axe";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../accordion";
+import { Button } from "../buttons/button";
+import { Checkbox } from "../checkbox";
+import { Input } from "../inputs/input";
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalDescription,
+  ModalTitle,
+} from "../modal";
+import { RadioGroup, RadioGroupItem } from "../radio-group";
+import { Rating } from "../rating";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
+
+describe("axe-core accessibility smoke coverage", () => {
+  it("passes axe checks for labeled form controls and actions", async () => {
+    const { container } = render(
+      <form aria-label="Account settings">
+        <label htmlFor="email">Email</label>
+        <Input id="email" type="email" />
+
+        <Checkbox defaultChecked>Send product updates</Checkbox>
+
+        <Button type="submit">Save settings</Button>
+      </form>,
+    );
+
+    await assertNoAxeViolations(container);
+  });
+
+  it("passes axe checks for accordion disclosure markup", async () => {
+    const { container } = render(
+      <Accordion type="multiple" defaultValues={["shipping"]}>
+        <AccordionItem value="shipping">
+          <AccordionTrigger>Shipping details</AccordionTrigger>
+          <AccordionContent>
+            Choose a delivery method before confirming the order.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="billing">
+          <AccordionTrigger>Billing address</AccordionTrigger>
+          <AccordionContent>
+            Add the billing address used for the invoice.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    await assertNoAxeViolations(container);
+  });
+
+  it("passes axe checks for modal dialog markup", async () => {
+    render(
+      <Modal defaultOpen>
+        <ModalContent>
+          <ModalTitle>Confirm publish</ModalTitle>
+          <ModalDescription>
+            Review the release notes before publishing the package.
+          </ModalDescription>
+          <ModalBody>The package will be published to npm.</ModalBody>
+        </ModalContent>
+      </Modal>,
+    );
+
+    await screen.findByRole("dialog", { name: "Confirm publish" });
+    await assertNoAxeViolations(document.body);
+  });
+
+  it("passes axe checks for tablist and tabpanel relationships", async () => {
+    const { container } = render(
+      <Tabs defaultValue="overview">
+        <TabsList aria-label="Package sections">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="api">API</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">Install and usage details.</TabsContent>
+        <TabsContent value="api">Props and public exports.</TabsContent>
+      </Tabs>,
+    );
+
+    await assertNoAxeViolations(container);
+  });
+
+  it("passes axe checks for opened select listbox markup", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Select defaultValue={[]}>
+        <SelectTrigger>
+          <SelectValue placeholder="Select plan" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="starter">Starter</SelectItem>
+          <SelectItem value="pro">Pro</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Select plan" }));
+    await waitFor(() => {
+      screen.getByRole("listbox");
+    });
+
+    await assertNoAxeViolations(document.body);
+  });
+
+  it("passes axe checks for radio-group and rating controls", async () => {
+    const { container } = render(
+      <section aria-label="Product preferences">
+        <RadioGroup defaultValue="pro" aria-label="Plan">
+          <RadioGroupItem value="starter">Starter</RadioGroupItem>
+          <RadioGroupItem value="pro">Pro</RadioGroupItem>
+        </RadioGroup>
+
+        <Rating defaultValue={4} label="Product score" />
+      </section>,
+    );
+
+    await assertNoAxeViolations(container);
+  });
+});

package/src/ui/dropdown/types.ts

@@ -1,5 +1,7 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 
+import type { zuiDropdownTriggerVariants } from "../../design-system/dropdown";
+
 export type DropdownContextType = {
   open: boolean;
   setOpen: (open: boolean) => void;
@@ -10,33 +12,7 @@ export type DropdownContextType = {
   menuId: string;
 };
 
-type Variant =
-  | "default"
-  | "outline"
-  | "ghost"
-  | "white"
-  | "black"
-  | "sky"
-  | "rose"
-  | "purple"
-  | "pink"
-  | "orange"
-  | "yellow"
-  | "teal"
-  | "indigo"
-  | "emerald"
-  | "gray"
-  | "amber"
-  | "violet"
-  | "gradient-blue"
-  | "gradient-green"
-  | "gradient-red"
-  | "gradient-yellow"
-  | "gradient-purple"
-  | "gradient-teal"
-  | "gradient-indigo"
-  | "gradient-pink"
-  | "gradient-orange";
+type Variant = keyof typeof zuiDropdownTriggerVariants;
 
 export type DropdownProps = {
   children: ReactNode;

package/src/ui/dynamic-stepper/variants.ts

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 import {
   zuiDynamicStepperIndicatorBase,
   zuiDynamicStepperIndicatorSizes,
-  zuiDynamicStepperIndicatorToneClass,
+  zuiDynamicStepperIndicatorToneClasses,
   zuiDynamicStepperItemBase,
   zuiDynamicStepperItemOrientations,
   zuiDynamicStepperMapperBase,
@@ -20,8 +20,12 @@ export type DynamicStepperIndicatorToneAppearance =
 export type DynamicStepperIndicatorSemanticState =
   ZuiDynamicStepperIndicatorSemanticState;
 
-export const dynamicStepperIndicatorToneClass =
-  zuiDynamicStepperIndicatorToneClass;
+export function dynamicStepperIndicatorToneClass(
+  state: DynamicStepperIndicatorSemanticState,
+  tone: DynamicStepperIndicatorToneAppearance,
+) {
+  return zuiDynamicStepperIndicatorToneClasses[tone][state];
+}
 
 export const dynamicStepperRootVariants = cva(zuiDynamicStepperRootBase, {
   variants: {