@zentauri-ui/zentauri-components 2.0.0 → 2.1.0

package/dist/ui/toggle.js

@@ -1,24 +1,24 @@
 "use client";
 'use strict';
 
-var chunkZITS2V53_js = require('../chunk-ZITS2V53.js');
-require('../chunk-P25NI2HG.js');
+var chunkZIP7EX64_js = require('../chunk-ZIP7EX64.js');
+require('../chunk-USLNTKVQ.js');
 require('../chunk-ZS5756ZC.js');
 require('../chunk-PZ5AY32C.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function Toggle(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkZITS2V53_js.ToggleBase, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkZIP7EX64_js.ToggleBase, { ...props });
 }
 Toggle.displayName = "Toggle";
 
 Object.defineProperty(exports, "toggleThumbVariants", {
   enumerable: true,
-  get: function () { return chunkZITS2V53_js.toggleThumbVariants; }
+  get: function () { return chunkZIP7EX64_js.toggleThumbVariants; }
 });
 Object.defineProperty(exports, "toggleTrackVariants", {
   enumerable: true,
-  get: function () { return chunkZITS2V53_js.toggleTrackVariants; }
+  get: function () { return chunkZIP7EX64_js.toggleTrackVariants; }
 });
 exports.Toggle = Toggle;
 //# sourceMappingURL=toggle.js.map

package/dist/ui/toggle.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { ToggleBase } from '../chunk-QKZR2UTL.mjs';
-export { toggleThumbVariants, toggleTrackVariants } from '../chunk-QKZR2UTL.mjs';
-import '../chunk-IULYVARJ.mjs';
+import { ToggleBase } from '../chunk-FEMXNI6E.mjs';
+export { toggleThumbVariants, toggleTrackVariants } from '../chunk-FEMXNI6E.mjs';
+import '../chunk-4ZBMDWWY.mjs';
 import '../chunk-4D54YOL6.mjs';
 import '../chunk-J5LGTIGS.mjs';
 import { jsx } from 'react/jsx-runtime';

package/dist/ui/tooltip/animated.js

@@ -1,8 +1,8 @@
 "use client";
 'use strict';
 
-var chunkKEGOUZL5_js = require('../../chunk-KEGOUZL5.js');
-require('../../chunk-UU34Q42Q.js');
+var chunkJGPG2D2Y_js = require('../../chunk-JGPG2D2Y.js');
+require('../../chunk-D7ATXPVI.js');
 var chunkZS5756ZC_js = require('../../chunk-ZS5756ZC.js');
 require('../../chunk-PZ5AY32C.js');
 var framerMotion = require('framer-motion');
@@ -30,7 +30,7 @@ var TooltipContentAnimated = ({
   width,
   animation = "none"
 }) => {
-  const { open, position } = chunkKEGOUZL5_js.useTooltip();
+  const { open, position } = chunkJGPG2D2Y_js.useTooltip();
   if (!open) return null;
   const positionStyles = {
     top: "bottom-full mb-2",
@@ -46,7 +46,7 @@ var TooltipContentAnimated = ({
       role: "tooltip",
       ...motionProps,
       className: chunkZS5756ZC_js.cn(
-        chunkKEGOUZL5_js.tooltipVariants({ variant, size, width }),
+        chunkJGPG2D2Y_js.tooltipVariants({ variant, size, width }),
         positionStyles[position],
         className
       ),

package/dist/ui/tooltip/animated.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useTooltip, tooltipVariants } from '../../chunk-4FU6FDUT.mjs';
-import '../../chunk-4QLWSXXO.mjs';
+import { useTooltip, tooltipVariants } from '../../chunk-MXYQOQJ4.mjs';
+import '../../chunk-YH6MOKHR.mjs';
 import { cn } from '../../chunk-4D54YOL6.mjs';
 import '../../chunk-J5LGTIGS.mjs';
 import { motion } from 'framer-motion';

package/dist/ui/tooltip.js

@@ -1,8 +1,8 @@
 "use client";
 'use strict';
 
-var chunkKEGOUZL5_js = require('../chunk-KEGOUZL5.js');
-require('../chunk-UU34Q42Q.js');
+var chunkJGPG2D2Y_js = require('../chunk-JGPG2D2Y.js');
+require('../chunk-D7ATXPVI.js');
 require('../chunk-ZS5756ZC.js');
 require('../chunk-PZ5AY32C.js');
 
@@ -10,27 +10,27 @@ require('../chunk-PZ5AY32C.js');
 
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
-  get: function () { return chunkKEGOUZL5_js.Tooltip; }
+  get: function () { return chunkJGPG2D2Y_js.Tooltip; }
 });
 Object.defineProperty(exports, "TooltipContent", {
   enumerable: true,
-  get: function () { return chunkKEGOUZL5_js.TooltipContent; }
+  get: function () { return chunkJGPG2D2Y_js.TooltipContent; }
 });
 Object.defineProperty(exports, "TooltipContext", {
   enumerable: true,
-  get: function () { return chunkKEGOUZL5_js.TooltipContext; }
+  get: function () { return chunkJGPG2D2Y_js.TooltipContext; }
 });
 Object.defineProperty(exports, "TooltipTrigger", {
   enumerable: true,
-  get: function () { return chunkKEGOUZL5_js.TooltipTrigger; }
+  get: function () { return chunkJGPG2D2Y_js.TooltipTrigger; }
 });
 Object.defineProperty(exports, "tooltipVariants", {
   enumerable: true,
-  get: function () { return chunkKEGOUZL5_js.tooltipVariants; }
+  get: function () { return chunkJGPG2D2Y_js.tooltipVariants; }
 });
 Object.defineProperty(exports, "useTooltip", {
   enumerable: true,
-  get: function () { return chunkKEGOUZL5_js.useTooltip; }
+  get: function () { return chunkJGPG2D2Y_js.useTooltip; }
 });
 //# sourceMappingURL=tooltip.js.map
 //# sourceMappingURL=tooltip.js.map

package/dist/ui/tooltip.mjs

@@ -1,6 +1,6 @@
 "use client";
-export { Tooltip, TooltipContent, TooltipContext, TooltipTrigger, tooltipVariants, useTooltip } from '../chunk-4FU6FDUT.mjs';
-import '../chunk-4QLWSXXO.mjs';
+export { Tooltip, TooltipContent, TooltipContext, TooltipTrigger, tooltipVariants, useTooltip } from '../chunk-MXYQOQJ4.mjs';
+import '../chunk-YH6MOKHR.mjs';
 import '../chunk-4D54YOL6.mjs';
 import '../chunk-J5LGTIGS.mjs';
 //# sourceMappingURL=tooltip.mjs.map

package/dist/ui/tree-view/animated.js

@@ -1,8 +1,8 @@
 "use client";
 'use strict';
 
-var chunk7GIL24GK_js = require('../../chunk-7GIL24GK.js');
-require('../../chunk-AADGUMYW.js');
+var chunk7ARZ3MK2_js = require('../../chunk-7ARZ3MK2.js');
+require('../../chunk-IEHY6KNM.js');
 require('../../chunk-ZS5756ZC.js');
 require('../../chunk-PZ5AY32C.js');
 var react = require('react');
@@ -45,7 +45,7 @@ function TreeViewAnimated({
     () => createAnimatedGroup(transitionVariant),
     [transitionVariant]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(chunk7GIL24GK_js.TreeViewBase, { ...props, GroupComponent });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk7ARZ3MK2_js.TreeViewBase, { ...props, GroupComponent });
 }
 TreeViewAnimated.displayName = "TreeViewAnimated";
 

package/dist/ui/tree-view/animated.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { TreeViewBase } from '../../chunk-ZY6O6Z2I.mjs';
-import '../../chunk-NXNL64Q7.mjs';
+import { TreeViewBase } from '../../chunk-CQ2S43AD.mjs';
+import '../../chunk-T4ZLTKV2.mjs';
 import '../../chunk-4D54YOL6.mjs';
 import '../../chunk-J5LGTIGS.mjs';
 import { useMemo } from 'react';

package/dist/ui/tree-view.js

@@ -1,28 +1,28 @@
 "use client";
 'use strict';
 
-var chunk7GIL24GK_js = require('../chunk-7GIL24GK.js');
-require('../chunk-AADGUMYW.js');
+var chunk7ARZ3MK2_js = require('../chunk-7ARZ3MK2.js');
+require('../chunk-IEHY6KNM.js');
 require('../chunk-ZS5756ZC.js');
 require('../chunk-PZ5AY32C.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function TreeView(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunk7GIL24GK_js.TreeViewBase, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunk7ARZ3MK2_js.TreeViewBase, { ...props });
 }
 TreeView.displayName = "TreeView";
 
 Object.defineProperty(exports, "TreeViewBase", {
   enumerable: true,
-  get: function () { return chunk7GIL24GK_js.TreeViewBase; }
+  get: function () { return chunk7ARZ3MK2_js.TreeViewBase; }
 });
 Object.defineProperty(exports, "treeViewItemVariants", {
   enumerable: true,
-  get: function () { return chunk7GIL24GK_js.treeViewItemVariants; }
+  get: function () { return chunk7ARZ3MK2_js.treeViewItemVariants; }
 });
 Object.defineProperty(exports, "treeViewVariants", {
   enumerable: true,
-  get: function () { return chunk7GIL24GK_js.treeViewVariants; }
+  get: function () { return chunk7ARZ3MK2_js.treeViewVariants; }
 });
 exports.TreeView = TreeView;
 //# sourceMappingURL=tree-view.js.map

package/dist/ui/tree-view.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { TreeViewBase } from '../chunk-ZY6O6Z2I.mjs';
-export { TreeViewBase, treeViewItemVariants, treeViewVariants } from '../chunk-ZY6O6Z2I.mjs';
-import '../chunk-NXNL64Q7.mjs';
+import { TreeViewBase } from '../chunk-CQ2S43AD.mjs';
+export { TreeViewBase, treeViewItemVariants, treeViewVariants } from '../chunk-CQ2S43AD.mjs';
+import '../chunk-T4ZLTKV2.mjs';
 import '../chunk-4D54YOL6.mjs';
 import '../chunk-J5LGTIGS.mjs';
 import { jsx } from 'react/jsx-runtime';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "keywords": [
     "react",
@@ -102,7 +102,7 @@
     "check:exports": "node scripts/check-exports.mjs",
     "prepack": "npm run build && node scripts/generate-registry.mjs && node scripts/check-design-tokens.mjs && node scripts/check-exports.mjs",
     "test": "vitest run",
-    "test:a11y": "vitest run src/ui/accessibility/axe-core.test.tsx",
+    "test:a11y": "vitest run src/accessibility/axe-core.test.tsx",
     "test:watch": "vitest"
   },
   "peerDependencies": {

package/src/design-system/accordion.ts

@@ -2,78 +2,78 @@ export const zuiAccordionBase = "w-full";
 
 export const zuiAccordionAppearances = {
   default:
-    "divide-y divide-[var(--zui-accordion-default-divider,#0000001a)] dark:divide-[var(--zui-accordion-default-divider-dark,#ffffff1a)] rounded-xl border border-[color:var(--zui-accordion-default-border,#0000001a)] dark:border-[color:var(--zui-accordion-default-border-dark,#ffffff1a)]",
+    "divide-y divide-[var(--zui-accordion-default-divider,var(--zui-border,#0000001a))] dark:divide-[var(--zui-accordion-default-divider-dark,var(--zui-border-dark,#ffffff1a))] rounded-xl border border-[color:var(--zui-accordion-default-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-accordion-default-border-dark,var(--zui-border-dark,#ffffff1a))]",
   outline:
-    "divide-y divide-[var(--zui-accordion-outline-divider,#0000001a)] dark:divide-[var(--zui-accordion-outline-divider-dark,#ffffff1a)] rounded-xl border border-[color:var(--zui-accordion-outline-border,#00000026)] dark:border-[color:var(--zui-accordion-outline-border-dark,#ffffff26)]",
+    "divide-y divide-[var(--zui-accordion-outline-divider,var(--zui-border,#0000001a))] dark:divide-[var(--zui-accordion-outline-divider-dark,var(--zui-border-dark,#ffffff1a))] rounded-xl border border-[color:var(--zui-accordion-outline-border,var(--zui-border,#00000026))] dark:border-[color:var(--zui-accordion-outline-border-dark,var(--zui-border-dark,#ffffff26))]",
   ghost:
-    "divide-y divide-[var(--zui-accordion-ghost-divider,#0000000d)] dark:divide-[var(--zui-accordion-ghost-divider-dark,#ffffff0d)]",
+    "divide-y divide-[var(--zui-accordion-ghost-divider,var(--zui-border,#0000000d))] dark:divide-[var(--zui-accordion-ghost-divider-dark,var(--zui-border-dark,#ffffff0d))]",
   card: "space-y-2",
   separated: "space-y-3",
-  blue: "divide-y divide-[var(--zui-accordion-blue-divider,#2563eb)] dark:divide-[var(--zui-accordion-blue-divider-dark,#3b82f6)] rounded-xl border border-[color:var(--zui-accordion-blue-border,#2563eb)] dark:border-[color:var(--zui-accordion-blue-border-dark,#3b82f6)]",
-  cyan: "divide-y divide-[var(--zui-accordion-cyan-divider,#0891b2)] dark:divide-[var(--zui-accordion-cyan-divider-dark,#22d3ee)] rounded-xl border border-[color:var(--zui-accordion-cyan-border,#0891b2)] dark:border-[color:var(--zui-accordion-cyan-border-dark,#22d3ee)]",
+  blue: "divide-y divide-[var(--zui-accordion-blue-divider,var(--zui-color-blue,#2563eb))] dark:divide-[var(--zui-accordion-blue-divider-dark,var(--zui-color-blue-dark,#3b82f6))] rounded-xl border border-[color:var(--zui-accordion-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[color:var(--zui-accordion-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))]",
+  cyan: "divide-y divide-[var(--zui-accordion-cyan-divider,var(--zui-color-cyan,#0891b2))] dark:divide-[var(--zui-accordion-cyan-divider-dark,var(--zui-color-cyan-dark,#22d3ee))] rounded-xl border border-[color:var(--zui-accordion-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[color:var(--zui-accordion-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))]",
   green:
-    "divide-y divide-[var(--zui-accordion-green-divider,#16a34a)] dark:divide-[var(--zui-accordion-green-divider-dark,#22c55e)] rounded-xl border border-[color:var(--zui-accordion-green-border,#16a34a)] dark:border-[color:var(--zui-accordion-green-border-dark,#22c55e)]",
-  lime: "divide-y divide-[var(--zui-accordion-lime-divider,#65a30d)] dark:divide-[var(--zui-accordion-lime-divider-dark,#a3e635)] rounded-xl border border-[color:var(--zui-accordion-lime-border,#65a30d)] dark:border-[color:var(--zui-accordion-lime-border-dark,#a3e635)]",
-  mint: "divide-y divide-[var(--zui-accordion-mint-divider,#10b981)] dark:divide-[var(--zui-accordion-mint-divider-dark,#6ee7b7)] rounded-xl border border-[color:var(--zui-accordion-mint-border,#10b981)] dark:border-[color:var(--zui-accordion-mint-border-dark,#6ee7b7)]",
+    "divide-y divide-[var(--zui-accordion-green-divider,var(--zui-color-green,#16a34a))] dark:divide-[var(--zui-accordion-green-divider-dark,var(--zui-color-green-dark,#22c55e))] rounded-xl border border-[color:var(--zui-accordion-green-border,var(--zui-color-green,#16a34a))] dark:border-[color:var(--zui-accordion-green-border-dark,var(--zui-color-green-dark,#22c55e))]",
+  lime: "divide-y divide-[var(--zui-accordion-lime-divider,var(--zui-color-lime,#65a30d))] dark:divide-[var(--zui-accordion-lime-divider-dark,var(--zui-color-lime-dark,#a3e635))] rounded-xl border border-[color:var(--zui-accordion-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[color:var(--zui-accordion-lime-border-dark,var(--zui-color-lime-dark,#a3e635))]",
+  mint: "divide-y divide-[var(--zui-accordion-mint-divider,var(--zui-color-mint,#10b981))] dark:divide-[var(--zui-accordion-mint-divider-dark,var(--zui-color-mint-dark,#6ee7b7))] rounded-xl border border-[color:var(--zui-accordion-mint-border,var(--zui-color-mint,#10b981))] dark:border-[color:var(--zui-accordion-mint-border-dark,var(--zui-color-mint-dark,#6ee7b7))]",
   ocean:
-    "divide-y divide-[var(--zui-accordion-ocean-divider,#0284c7)] dark:divide-[var(--zui-accordion-ocean-divider-dark,#38bdf8)] rounded-xl border border-[color:var(--zui-accordion-ocean-border,#0284c7)] dark:border-[color:var(--zui-accordion-ocean-border-dark,#38bdf8)]",
+    "divide-y divide-[var(--zui-accordion-ocean-divider,var(--zui-color-ocean,#0284c7))] dark:divide-[var(--zui-accordion-ocean-divider-dark,var(--zui-color-ocean-dark,#38bdf8))] rounded-xl border border-[color:var(--zui-accordion-ocean-border,var(--zui-color-ocean,#0284c7))] dark:border-[color:var(--zui-accordion-ocean-border-dark,var(--zui-color-ocean-dark,#38bdf8))]",
   sapphire:
-    "divide-y divide-[var(--zui-accordion-sapphire-divider,#1d4ed8)] dark:divide-[var(--zui-accordion-sapphire-divider-dark,#60a5fa)] rounded-xl border border-[color:var(--zui-accordion-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-accordion-sapphire-border-dark,#60a5fa)]",
+    "divide-y divide-[var(--zui-accordion-sapphire-divider,var(--zui-color-sapphire,#1d4ed8))] dark:divide-[var(--zui-accordion-sapphire-divider-dark,var(--zui-color-sapphire-dark,#60a5fa))] rounded-xl border border-[color:var(--zui-accordion-sapphire-border,var(--zui-color-sapphire,#1d4ed8))] dark:border-[color:var(--zui-accordion-sapphire-border-dark,var(--zui-color-sapphire-dark,#60a5fa))]",
   lavender:
-    "divide-y divide-[var(--zui-accordion-lavender-divider,#8b5cf6)] dark:divide-[var(--zui-accordion-lavender-divider-dark,#a78bfa)] rounded-xl border border-[color:var(--zui-accordion-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-accordion-lavender-border-dark,#a78bfa)]",
-  ruby: "divide-y divide-[var(--zui-accordion-ruby-divider,#be123c)] dark:divide-[var(--zui-accordion-ruby-divider-dark,#fb7185)] rounded-xl border border-[color:var(--zui-accordion-ruby-border,#be123c)] dark:border-[color:var(--zui-accordion-ruby-border-dark,#fb7185)]",
-  red: "divide-y divide-[var(--zui-accordion-red-divider,#dc2626)] dark:divide-[var(--zui-accordion-red-divider-dark,#ef4444)] rounded-xl border border-[color:var(--zui-accordion-red-border,#dc2626)] dark:border-[color:var(--zui-accordion-red-border-dark,#ef4444)]",
+    "divide-y divide-[var(--zui-accordion-lavender-divider,var(--zui-color-lavender,#8b5cf6))] dark:divide-[var(--zui-accordion-lavender-divider-dark,var(--zui-color-lavender-dark,#a78bfa))] rounded-xl border border-[color:var(--zui-accordion-lavender-border,var(--zui-color-lavender,#8b5cf6))] dark:border-[color:var(--zui-accordion-lavender-border-dark,var(--zui-color-lavender-dark,#a78bfa))]",
+  ruby: "divide-y divide-[var(--zui-accordion-ruby-divider,var(--zui-color-ruby,#be123c))] dark:divide-[var(--zui-accordion-ruby-divider-dark,var(--zui-color-ruby-dark,#fb7185))] rounded-xl border border-[color:var(--zui-accordion-ruby-border,var(--zui-color-ruby,#be123c))] dark:border-[color:var(--zui-accordion-ruby-border-dark,var(--zui-color-ruby-dark,#fb7185))]",
+  red: "divide-y divide-[var(--zui-accordion-red-divider,var(--zui-color-red,#dc2626))] dark:divide-[var(--zui-accordion-red-divider-dark,var(--zui-color-red-dark,#ef4444))] rounded-xl border border-[color:var(--zui-accordion-red-border,var(--zui-color-red,#dc2626))] dark:border-[color:var(--zui-accordion-red-border-dark,var(--zui-color-red-dark,#ef4444))]",
   slate:
-    "divide-y divide-[var(--zui-accordion-slate-divider,#475569)] dark:divide-[var(--zui-accordion-slate-divider-dark,#64748b)] rounded-xl border border-[color:var(--zui-accordion-slate-border,#475569)] dark:border-[color:var(--zui-accordion-slate-border-dark,#64748b)]",
-  zinc: "divide-y divide-[var(--zui-accordion-zinc-divider,#52525b)] dark:divide-[var(--zui-accordion-zinc-divider-dark,#71717a)] rounded-xl border border-[color:var(--zui-accordion-zinc-border,#52525b)] dark:border-[color:var(--zui-accordion-zinc-border-dark,#71717a)]",
+    "divide-y divide-[var(--zui-accordion-slate-divider,var(--zui-color-slate,#475569))] dark:divide-[var(--zui-accordion-slate-divider-dark,var(--zui-color-slate-dark,#64748b))] rounded-xl border border-[color:var(--zui-accordion-slate-border,var(--zui-color-slate,#475569))] dark:border-[color:var(--zui-accordion-slate-border-dark,var(--zui-color-slate-dark,#64748b))]",
+  zinc: "divide-y divide-[var(--zui-accordion-zinc-divider,var(--zui-color-zinc,#52525b))] dark:divide-[var(--zui-accordion-zinc-divider-dark,var(--zui-color-zinc-dark,#71717a))] rounded-xl border border-[color:var(--zui-accordion-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[color:var(--zui-accordion-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))]",
   stone:
-    "divide-y divide-[var(--zui-accordion-stone-divider,#57534e)] dark:divide-[var(--zui-accordion-stone-divider-dark,#78716c)] rounded-xl border border-[color:var(--zui-accordion-stone-border,#57534e)] dark:border-[color:var(--zui-accordion-stone-border-dark,#78716c)]",
+    "divide-y divide-[var(--zui-accordion-stone-divider,var(--zui-color-stone,#57534e))] dark:divide-[var(--zui-accordion-stone-divider-dark,var(--zui-color-stone-dark,#78716c))] rounded-xl border border-[color:var(--zui-accordion-stone-border,var(--zui-color-stone,#57534e))] dark:border-[color:var(--zui-accordion-stone-border-dark,var(--zui-color-stone-dark,#78716c))]",
   royal:
-    "divide-y divide-[var(--zui-accordion-royal-divider,#4338ca)] dark:divide-[var(--zui-accordion-royal-divider-dark,#818cf8)] rounded-xl border border-[color:var(--zui-accordion-royal-border,#4338ca)] dark:border-[color:var(--zui-accordion-royal-border-dark,#818cf8)]",
+    "divide-y divide-[var(--zui-accordion-royal-divider,var(--zui-color-royal,#4338ca))] dark:divide-[var(--zui-accordion-royal-divider-dark,var(--zui-color-royal-dark,#818cf8))] rounded-xl border border-[color:var(--zui-accordion-royal-border,var(--zui-color-royal,#4338ca))] dark:border-[color:var(--zui-accordion-royal-border-dark,var(--zui-color-royal-dark,#818cf8))]",
   electric:
-    "divide-y divide-[var(--zui-accordion-electric-divider,#0ea5e9)] dark:divide-[var(--zui-accordion-electric-divider-dark,#38bdf8)] rounded-xl border border-[color:var(--zui-accordion-electric-border,#0ea5e9)] dark:border-[color:var(--zui-accordion-electric-border-dark,#38bdf8)]",
+    "divide-y divide-[var(--zui-accordion-electric-divider,var(--zui-color-electric,#0ea5e9))] dark:divide-[var(--zui-accordion-electric-divider-dark,var(--zui-color-electric-dark,#38bdf8))] rounded-xl border border-[color:var(--zui-accordion-electric-border,var(--zui-color-electric,#0ea5e9))] dark:border-[color:var(--zui-accordion-electric-border-dark,var(--zui-color-electric-dark,#38bdf8))]",
   forest:
-    "divide-y divide-[var(--zui-accordion-forest-divider,#166534)] dark:divide-[var(--zui-accordion-forest-divider-dark,#4ade80)] rounded-xl border border-[color:var(--zui-accordion-forest-border,#166534)] dark:border-[color:var(--zui-accordion-forest-border-dark,#4ade80)]",
+    "divide-y divide-[var(--zui-accordion-forest-divider,var(--zui-color-forest,#166534))] dark:divide-[var(--zui-accordion-forest-divider-dark,var(--zui-color-forest-dark,#4ade80))] rounded-xl border border-[color:var(--zui-accordion-forest-border,var(--zui-color-forest,#166534))] dark:border-[color:var(--zui-accordion-forest-border-dark,var(--zui-color-forest-dark,#4ade80))]",
   sunset:
-    "divide-y divide-[var(--zui-accordion-sunset-divider,#ea580c)] dark:divide-[var(--zui-accordion-sunset-divider-dark,#fb923c)] rounded-xl border border-[color:var(--zui-accordion-sunset-border,#ea580c)] dark:border-[color:var(--zui-accordion-sunset-border-dark,#fb923c)]",
+    "divide-y divide-[var(--zui-accordion-sunset-divider,var(--zui-color-sunset,#ea580c))] dark:divide-[var(--zui-accordion-sunset-divider-dark,var(--zui-color-sunset-dark,#fb923c))] rounded-xl border border-[color:var(--zui-accordion-sunset-border,var(--zui-color-sunset,#ea580c))] dark:border-[color:var(--zui-accordion-sunset-border-dark,var(--zui-color-sunset-dark,#fb923c))]",
   magenta:
-    "divide-y divide-[var(--zui-accordion-magenta-divider,#c026d3)] dark:divide-[var(--zui-accordion-magenta-divider-dark,#e879f9)] rounded-xl border border-[color:var(--zui-accordion-magenta-border,#c026d3)] dark:border-[color:var(--zui-accordion-magenta-border-dark,#e879f9)]",
+    "divide-y divide-[var(--zui-accordion-magenta-divider,var(--zui-color-magenta,#c026d3))] dark:divide-[var(--zui-accordion-magenta-divider-dark,var(--zui-color-magenta-dark,#e879f9))] rounded-xl border border-[color:var(--zui-accordion-magenta-border,var(--zui-color-magenta,#c026d3))] dark:border-[color:var(--zui-accordion-magenta-border-dark,var(--zui-color-magenta-dark,#e879f9))]",
   crimson:
-    "divide-y divide-[var(--zui-accordion-crimson-divider,#b91c1c)] dark:divide-[var(--zui-accordion-crimson-divider-dark,#f87171)] rounded-xl border border-[color:var(--zui-accordion-crimson-border,#b91c1c)] dark:border-[color:var(--zui-accordion-crimson-border-dark,#f87171)]",
-  aqua: "divide-y divide-[var(--zui-accordion-aqua-divider,#0f766e)] dark:divide-[var(--zui-accordion-aqua-divider-dark,#2dd4bf)] rounded-xl border border-[color:var(--zui-accordion-aqua-border,#0f766e)] dark:border-[color:var(--zui-accordion-aqua-border-dark,#2dd4bf)]",
-  plum: "divide-y divide-[var(--zui-accordion-plum-divider,#7e22ce)] dark:divide-[var(--zui-accordion-plum-divider-dark,#c084fc)] rounded-xl border border-[color:var(--zui-accordion-plum-border,#7e22ce)] dark:border-[color:var(--zui-accordion-plum-border-dark,#c084fc)]",
-  sky: "divide-y divide-[var(--zui-accordion-sky-divider,oklch(44.3%_0.11_240.79))] dark:divide-[var(--zui-accordion-sky-divider-dark,oklch(58.8%_0.158_241.966))] rounded-xl border border-[color:var(--zui-accordion-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-accordion-sky-border-dark,oklch(58.8%_0.158_241.966))]",
-  rose: "divide-y divide-[var(--zui-accordion-rose-divider,oklch(45.5%_0.188_13.697))] dark:divide-[var(--zui-accordion-rose-divider-dark,oklch(58.6%_0.253_17.585))] rounded-xl border border-[color:var(--zui-accordion-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-accordion-rose-border-dark,oklch(58.6%_0.253_17.585))]",
+    "divide-y divide-[var(--zui-accordion-crimson-divider,var(--zui-color-crimson,#b91c1c))] dark:divide-[var(--zui-accordion-crimson-divider-dark,var(--zui-color-crimson-dark,#f87171))] rounded-xl border border-[color:var(--zui-accordion-crimson-border,var(--zui-color-crimson,#b91c1c))] dark:border-[color:var(--zui-accordion-crimson-border-dark,var(--zui-color-crimson-dark,#f87171))]",
+  aqua: "divide-y divide-[var(--zui-accordion-aqua-divider,var(--zui-color-aqua,#0f766e))] dark:divide-[var(--zui-accordion-aqua-divider-dark,var(--zui-color-aqua-dark,#2dd4bf))] rounded-xl border border-[color:var(--zui-accordion-aqua-border,var(--zui-color-aqua,#0f766e))] dark:border-[color:var(--zui-accordion-aqua-border-dark,var(--zui-color-aqua-dark,#2dd4bf))]",
+  plum: "divide-y divide-[var(--zui-accordion-plum-divider,var(--zui-color-plum,#7e22ce))] dark:divide-[var(--zui-accordion-plum-divider-dark,var(--zui-color-plum-dark,#c084fc))] rounded-xl border border-[color:var(--zui-accordion-plum-border,var(--zui-color-plum,#7e22ce))] dark:border-[color:var(--zui-accordion-plum-border-dark,var(--zui-color-plum-dark,#c084fc))]",
+  sky: "divide-y divide-[var(--zui-accordion-sky-divider,var(--zui-color-sky,oklch(44.3%_0.11_240.79)))] dark:divide-[var(--zui-accordion-sky-divider-dark,var(--zui-color-sky-dark,oklch(58.8%_0.158_241.966)))] rounded-xl border border-[color:var(--zui-accordion-sky-border,var(--zui-color-sky,oklch(44.3%_0.11_240.79)))] dark:border-[color:var(--zui-accordion-sky-border-dark,var(--zui-color-sky-dark,oklch(58.8%_0.158_241.966)))]",
+  rose: "divide-y divide-[var(--zui-accordion-rose-divider,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:divide-[var(--zui-accordion-rose-divider-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))] rounded-xl border border-[color:var(--zui-accordion-rose-border,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:border-[color:var(--zui-accordion-rose-border-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))]",
   purple:
-    "divide-y divide-[var(--zui-accordion-purple-divider,oklch(43.8%_0.218_303.724))] dark:divide-[var(--zui-accordion-purple-divider-dark,oklch(55.8%_0.288_302.321))] rounded-xl border border-[color:var(--zui-accordion-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-accordion-purple-border-dark,oklch(55.8%_0.288_302.321))]",
-  pink: "divide-y divide-[var(--zui-accordion-pink-divider,oklch(45.9%_0.187_3.815))] dark:divide-[var(--zui-accordion-pink-divider-dark,oklch(59.2%_0.249_0.584))] rounded-xl border border-[color:var(--zui-accordion-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-accordion-pink-border-dark,oklch(59.2%_0.249_0.584))]",
+    "divide-y divide-[var(--zui-accordion-purple-divider,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:divide-[var(--zui-accordion-purple-divider-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] rounded-xl border border-[color:var(--zui-accordion-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[color:var(--zui-accordion-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]",
+  pink: "divide-y divide-[var(--zui-accordion-pink-divider,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:divide-[var(--zui-accordion-pink-divider-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] rounded-xl border border-[color:var(--zui-accordion-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[color:var(--zui-accordion-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]",
   orange:
-    "divide-y divide-[var(--zui-accordion-orange-divider,oklch(47%_0.157_37.304))] dark:divide-[var(--zui-accordion-orange-divider-dark,oklch(64.6%_0.222_41.116))] rounded-xl border border-[color:var(--zui-accordion-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-accordion-orange-border-dark,oklch(64.6%_0.222_41.116))]",
+    "divide-y divide-[var(--zui-accordion-orange-divider,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:divide-[var(--zui-accordion-orange-divider-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] rounded-xl border border-[color:var(--zui-accordion-orange-border,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:border-[color:var(--zui-accordion-orange-border-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))]",
   yellow:
-    "divide-y divide-[var(--zui-accordion-yellow-divider,oklch(47.6%_0.114_61.907))] dark:divide-[var(--zui-accordion-yellow-divider-dark,oklch(68.1%_0.162_75.834))] rounded-xl border border-[color:var(--zui-accordion-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-accordion-yellow-border-dark,oklch(68.1%_0.162_75.834))]",
-  teal: "divide-y divide-[var(--zui-accordion-teal-divider,oklch(43.7%_0.078_188.216))] dark:divide-[var(--zui-accordion-teal-divider-dark,oklch(60%_0.118_184.704))] rounded-xl border border-[color:var(--zui-accordion-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-accordion-teal-border-dark,oklch(60%_0.118_184.704))]",
+    "divide-y divide-[var(--zui-accordion-yellow-divider,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:divide-[var(--zui-accordion-yellow-divider-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] rounded-xl border border-[color:var(--zui-accordion-yellow-border,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:border-[color:var(--zui-accordion-yellow-border-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))]",
+  teal: "divide-y divide-[var(--zui-accordion-teal-divider,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:divide-[var(--zui-accordion-teal-divider-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] rounded-xl border border-[color:var(--zui-accordion-teal-border,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:border-[color:var(--zui-accordion-teal-border-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))]",
   indigo:
-    "divide-y divide-[var(--zui-accordion-indigo-divider,oklch(39.8%_0.195_277.366))] dark:divide-[var(--zui-accordion-indigo-divider-dark,oklch(51.1%_0.262_276.966))] rounded-xl border border-[color:var(--zui-accordion-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-accordion-indigo-border-dark,oklch(51.1%_0.262_276.966))]",
+    "divide-y divide-[var(--zui-accordion-indigo-divider,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:divide-[var(--zui-accordion-indigo-divider-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] rounded-xl border border-[color:var(--zui-accordion-indigo-border,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:border-[color:var(--zui-accordion-indigo-border-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))]",
   emerald:
-    "divide-y divide-[var(--zui-accordion-emerald-divider,oklch(43.2%_0.095_166.913))] dark:divide-[var(--zui-accordion-emerald-divider-dark,oklch(59.6%_0.145_163.225))] rounded-xl border border-[color:var(--zui-accordion-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-accordion-emerald-border-dark,oklch(59.6%_0.145_163.225))]",
+    "divide-y divide-[var(--zui-accordion-emerald-divider,var(--zui-color-emerald,oklch(43.2%_0.095_166.913)))] dark:divide-[var(--zui-accordion-emerald-divider-dark,var(--zui-color-emerald-dark,oklch(59.6%_0.145_163.225)))] rounded-xl border border-[color:var(--zui-accordion-emerald-border,var(--zui-color-emerald,oklch(43.2%_0.095_166.913)))] dark:border-[color:var(--zui-accordion-emerald-border-dark,var(--zui-color-emerald-dark,oklch(59.6%_0.145_163.225)))]",
   "gradient-blue":
-    "divide-y divide-[var(--zui-accordion-gradient-blue-divider,oklch(42.4%_0.199_265.638))] dark:divide-[var(--zui-accordion-gradient-blue-divider-dark,oklch(54.6%_0.245_262.881))] rounded-xl border border-[color:var(--zui-accordion-gradient-blue-border,oklch(42.4%_0.199_265.638))] dark:border-[color:var(--zui-accordion-gradient-blue-border-dark,oklch(54.6%_0.245_262.881))]",
+    "divide-y divide-[var(--zui-accordion-gradient-blue-divider,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:divide-[var(--zui-accordion-gradient-blue-divider-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] rounded-xl border border-[color:var(--zui-accordion-gradient-blue-border,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:border-[color:var(--zui-accordion-gradient-blue-border-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))]",
   "gradient-green":
-    "divide-y divide-[var(--zui-accordion-gradient-green-divider,oklch(44.8%_0.119_151.328))] dark:divide-[var(--zui-accordion-gradient-green-divider-dark,oklch(62.7%_0.194_149.214))] rounded-xl border border-[color:var(--zui-accordion-gradient-green-border,oklch(44.8%_0.119_151.328))] dark:border-[color:var(--zui-accordion-gradient-green-border-dark,oklch(62.7%_0.194_149.214))]",
+    "divide-y divide-[var(--zui-accordion-gradient-green-divider,var(--zui-color-green,oklch(44.8%_0.119_151.328)))] dark:divide-[var(--zui-accordion-gradient-green-divider-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] rounded-xl border border-[color:var(--zui-accordion-gradient-green-border,var(--zui-color-green,oklch(44.8%_0.119_151.328)))] dark:border-[color:var(--zui-accordion-gradient-green-border-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))]",
   "gradient-red":
-    "divide-y divide-[var(--zui-accordion-gradient-red-divider,oklch(44.4%_0.177_26.899))] dark:divide-[var(--zui-accordion-gradient-red-divider-dark,oklch(57.7%_0.245_27.325))] rounded-xl border border-[color:var(--zui-accordion-gradient-red-border,oklch(44.4%_0.177_26.899))] dark:border-[color:var(--zui-accordion-gradient-red-border-dark,oklch(57.7%_0.245_27.325))]",
+    "divide-y divide-[var(--zui-accordion-gradient-red-divider,var(--zui-color-red,oklch(44.4%_0.177_26.899)))] dark:divide-[var(--zui-accordion-gradient-red-divider-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] rounded-xl border border-[color:var(--zui-accordion-gradient-red-border,var(--zui-color-red,oklch(44.4%_0.177_26.899)))] dark:border-[color:var(--zui-accordion-gradient-red-border-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))]",
   "gradient-yellow":
-    "divide-y divide-[var(--zui-accordion-gradient-yellow-divider,oklch(47.6%_0.114_61.907))] dark:divide-[var(--zui-accordion-gradient-yellow-divider-dark,oklch(68.1%_0.162_75.834))] rounded-xl border border-[color:var(--zui-accordion-gradient-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-accordion-gradient-yellow-border-dark,oklch(68.1%_0.162_75.834))]",
+    "divide-y divide-[var(--zui-accordion-gradient-yellow-divider,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:divide-[var(--zui-accordion-gradient-yellow-divider-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] rounded-xl border border-[color:var(--zui-accordion-gradient-yellow-border,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:border-[color:var(--zui-accordion-gradient-yellow-border-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))]",
   "gradient-purple":
-    "divide-y divide-[var(--zui-accordion-gradient-purple-divider,oklch(43.8%_0.218_303.724))] dark:divide-[var(--zui-accordion-gradient-purple-divider-dark,oklch(55.8%_0.288_302.321))] rounded-xl border border-[color:var(--zui-accordion-gradient-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-accordion-gradient-purple-border-dark,oklch(55.8%_0.288_302.321))]",
+    "divide-y divide-[var(--zui-accordion-gradient-purple-divider,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:divide-[var(--zui-accordion-gradient-purple-divider-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] rounded-xl border border-[color:var(--zui-accordion-gradient-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[color:var(--zui-accordion-gradient-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]",
   "gradient-teal":
-    "divide-y divide-[var(--zui-accordion-gradient-teal-divider,oklch(43.7%_0.078_188.216))] dark:divide-[var(--zui-accordion-gradient-teal-divider-dark,oklch(60%_0.118_184.704))] rounded-xl border border-[color:var(--zui-accordion-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-accordion-gradient-teal-border-dark,oklch(60%_0.118_184.704))]",
+    "divide-y divide-[var(--zui-accordion-gradient-teal-divider,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:divide-[var(--zui-accordion-gradient-teal-divider-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] rounded-xl border border-[color:var(--zui-accordion-gradient-teal-border,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:border-[color:var(--zui-accordion-gradient-teal-border-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))]",
   "gradient-indigo":
-    "divide-y divide-[var(--zui-accordion-gradient-indigo-divider,oklch(39.8%_0.195_277.366))] dark:divide-[var(--zui-accordion-gradient-indigo-divider-dark,oklch(51.1%_0.262_276.966))] rounded-xl border border-[color:var(--zui-accordion-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-accordion-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))]",
+    "divide-y divide-[var(--zui-accordion-gradient-indigo-divider,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:divide-[var(--zui-accordion-gradient-indigo-divider-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] rounded-xl border border-[color:var(--zui-accordion-gradient-indigo-border,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:border-[color:var(--zui-accordion-gradient-indigo-border-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))]",
   "gradient-pink":
-    "divide-y divide-[var(--zui-accordion-gradient-pink-divider,oklch(45.9%_0.187_3.815))] dark:divide-[var(--zui-accordion-gradient-pink-divider-dark,oklch(59.2%_0.249_0.584))] rounded-xl border border-[color:var(--zui-accordion-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-accordion-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))]",
+    "divide-y divide-[var(--zui-accordion-gradient-pink-divider,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:divide-[var(--zui-accordion-gradient-pink-divider-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] rounded-xl border border-[color:var(--zui-accordion-gradient-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[color:var(--zui-accordion-gradient-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]",
   "gradient-orange":
-    "divide-y divide-[var(--zui-accordion-gradient-orange-divider,oklch(47%_0.157_37.304))] dark:divide-[var(--zui-accordion-gradient-orange-divider-dark,oklch(64.6%_0.222_41.116))] rounded-xl border border-[color:var(--zui-accordion-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-accordion-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))]",
+    "divide-y divide-[var(--zui-accordion-gradient-orange-divider,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:divide-[var(--zui-accordion-gradient-orange-divider-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] rounded-xl border border-[color:var(--zui-accordion-gradient-orange-border,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:border-[color:var(--zui-accordion-gradient-orange-border-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))]",
 } as const;
 
 export const zuiAccordionSizes = {
@@ -83,84 +83,84 @@ export const zuiAccordionSizes = {
 } as const;
 
 export const zuiAccordionItemBase =
-  "text-[color:var(--zui-accordion-item-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-accordion-item-fg-dark,oklch(92.9%_0.013_255.508))]";
+  "text-[color:var(--zui-accordion-item-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-accordion-item-fg-dark,var(--zui-fg-dark,oklch(92.9%_0.013_255.508)))]";
 
 export const zuiAccordionItemAppearances = {
   default: "",
   outline: "",
   ghost: "",
-  card: "rounded-xl border border-[color:var(--zui-accordion-item-card-border,#0000001a)] dark:border-[color:var(--zui-accordion-item-card-border-dark,#ffffff1a)] bg-[var(--zui-accordion-item-card-bg,#0000000d)] dark:bg-[var(--zui-accordion-item-card-bg-dark,#00000099)] p-2",
+  card: "rounded-xl border border-[color:var(--zui-accordion-item-card-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-accordion-item-card-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-accordion-item-card-bg,var(--zui-surface-soft,#0000000d))] dark:bg-[var(--zui-accordion-item-card-bg-dark,var(--zui-surface-soft-dark,#00000099))] p-2",
   separated:
-    "rounded-xl border border-[color:var(--zui-accordion-item-separated-border,#0000001a)] dark:border-[color:var(--zui-accordion-item-separated-border-dark,#ffffff1a)] bg-[var(--zui-accordion-item-separated-bg,oklch(98.4%_0.003_247.858_/_0.4))] dark:bg-[var(--zui-accordion-item-separated-bg-dark,oklch(12.9%_0.042_264.695_/_0.4))] p-2",
-  blue: "rounded-xl border border-[color:var(--zui-accordion-item-blue-border,#2563eb)] dark:border-[color:var(--zui-accordion-item-blue-border-dark,#3b82f6)] bg-[var(--zui-accordion-item-blue-bg,#2563eb1a)] dark:bg-[var(--zui-accordion-item-blue-bg-dark,#3b82f626)] p-2",
-  cyan: "rounded-xl border border-[color:var(--zui-accordion-item-cyan-border,#0891b2)] dark:border-[color:var(--zui-accordion-item-cyan-border-dark,#22d3ee)] bg-[var(--zui-accordion-item-cyan-bg,#0891b21a)] dark:bg-[var(--zui-accordion-item-cyan-bg-dark,#22d3ee26)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-separated-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-accordion-item-separated-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-accordion-item-separated-bg,var(--zui-surface-soft,oklch(98.4%_0.003_247.858_/_0.4)))] dark:bg-[var(--zui-accordion-item-separated-bg-dark,var(--zui-surface-soft-dark,oklch(12.9%_0.042_264.695_/_0.4)))] p-2",
+  blue: "rounded-xl border border-[color:var(--zui-accordion-item-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[color:var(--zui-accordion-item-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] bg-[var(--zui-accordion-item-blue-bg,color-mix(in oklch, var(--zui-color-blue,#2563eb) 10%, transparent))] dark:bg-[var(--zui-accordion-item-blue-bg-dark,color-mix(in oklch, var(--zui-color-blue-dark,#3b82f6) 18%, transparent))] p-2",
+  cyan: "rounded-xl border border-[color:var(--zui-accordion-item-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[color:var(--zui-accordion-item-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] bg-[var(--zui-accordion-item-cyan-bg,color-mix(in oklch, var(--zui-color-cyan,#0891b2) 10%, transparent))] dark:bg-[var(--zui-accordion-item-cyan-bg-dark,color-mix(in oklch, var(--zui-color-cyan-dark,#22d3ee) 18%, transparent))] p-2",
   green:
-    "rounded-xl border border-[color:var(--zui-accordion-item-green-border,#16a34a)] dark:border-[color:var(--zui-accordion-item-green-border-dark,#22c55e)] bg-[var(--zui-accordion-item-green-bg,#16a34a1a)] dark:bg-[var(--zui-accordion-item-green-bg-dark,#22c55e26)] p-2",
-  lime: "rounded-xl border border-[color:var(--zui-accordion-item-lime-border,#65a30d)] dark:border-[color:var(--zui-accordion-item-lime-border-dark,#a3e635)] bg-[var(--zui-accordion-item-lime-bg,#65a30d1a)] dark:bg-[var(--zui-accordion-item-lime-bg-dark,#a3e63526)] p-2",
-  mint: "rounded-xl border border-[color:var(--zui-accordion-item-mint-border,#10b981)] dark:border-[color:var(--zui-accordion-item-mint-border-dark,#6ee7b7)] bg-[var(--zui-accordion-item-mint-bg,#10b9811a)] dark:bg-[var(--zui-accordion-item-mint-bg-dark,#6ee7b726)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-green-border,var(--zui-color-green,#16a34a))] dark:border-[color:var(--zui-accordion-item-green-border-dark,var(--zui-color-green-dark,#22c55e))] bg-[var(--zui-accordion-item-green-bg,color-mix(in oklch, var(--zui-color-green,#16a34a) 10%, transparent))] dark:bg-[var(--zui-accordion-item-green-bg-dark,color-mix(in oklch, var(--zui-color-green-dark,#22c55e) 18%, transparent))] p-2",
+  lime: "rounded-xl border border-[color:var(--zui-accordion-item-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[color:var(--zui-accordion-item-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] bg-[var(--zui-accordion-item-lime-bg,color-mix(in oklch, var(--zui-color-lime,#65a30d) 10%, transparent))] dark:bg-[var(--zui-accordion-item-lime-bg-dark,color-mix(in oklch, var(--zui-color-lime-dark,#a3e635) 18%, transparent))] p-2",
+  mint: "rounded-xl border border-[color:var(--zui-accordion-item-mint-border,var(--zui-color-mint,#10b981))] dark:border-[color:var(--zui-accordion-item-mint-border-dark,var(--zui-color-mint-dark,#6ee7b7))] bg-[var(--zui-accordion-item-mint-bg,color-mix(in oklch, var(--zui-color-mint,#10b981) 10%, transparent))] dark:bg-[var(--zui-accordion-item-mint-bg-dark,color-mix(in oklch, var(--zui-color-mint-dark,#6ee7b7) 18%, transparent))] p-2",
   ocean:
-    "rounded-xl border border-[color:var(--zui-accordion-item-ocean-border,#0284c7)] dark:border-[color:var(--zui-accordion-item-ocean-border-dark,#38bdf8)] bg-[var(--zui-accordion-item-ocean-bg,#0284c71a)] dark:bg-[var(--zui-accordion-item-ocean-bg-dark,#38bdf826)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-ocean-border,var(--zui-color-ocean,#0284c7))] dark:border-[color:var(--zui-accordion-item-ocean-border-dark,var(--zui-color-ocean-dark,#38bdf8))] bg-[var(--zui-accordion-item-ocean-bg,color-mix(in oklch, var(--zui-color-ocean,#0284c7) 10%, transparent))] dark:bg-[var(--zui-accordion-item-ocean-bg-dark,color-mix(in oklch, var(--zui-color-ocean-dark,#38bdf8) 18%, transparent))] p-2",
   sapphire:
-    "rounded-xl border border-[color:var(--zui-accordion-item-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-accordion-item-sapphire-border-dark,#60a5fa)] bg-[var(--zui-accordion-item-sapphire-bg,#1d4ed81a)] dark:bg-[var(--zui-accordion-item-sapphire-bg-dark,#60a5fa26)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-sapphire-border,var(--zui-color-sapphire,#1d4ed8))] dark:border-[color:var(--zui-accordion-item-sapphire-border-dark,var(--zui-color-sapphire-dark,#60a5fa))] bg-[var(--zui-accordion-item-sapphire-bg,color-mix(in oklch, var(--zui-color-sapphire,#1d4ed8) 10%, transparent))] dark:bg-[var(--zui-accordion-item-sapphire-bg-dark,color-mix(in oklch, var(--zui-color-sapphire-dark,#60a5fa) 18%, transparent))] p-2",
   lavender:
-    "rounded-xl border border-[color:var(--zui-accordion-item-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-accordion-item-lavender-border-dark,#a78bfa)] bg-[var(--zui-accordion-item-lavender-bg,#8b5cf61a)] dark:bg-[var(--zui-accordion-item-lavender-bg-dark,#a78bfa26)] p-2",
-  ruby: "rounded-xl border border-[color:var(--zui-accordion-item-ruby-border,#be123c)] dark:border-[color:var(--zui-accordion-item-ruby-border-dark,#fb7185)] bg-[var(--zui-accordion-item-ruby-bg,#be123c1a)] dark:bg-[var(--zui-accordion-item-ruby-bg-dark,#fb718526)] p-2",
-  red: "rounded-xl border border-[color:var(--zui-accordion-item-red-border,#dc2626)] dark:border-[color:var(--zui-accordion-item-red-border-dark,#ef4444)] bg-[var(--zui-accordion-item-red-bg,#dc26261a)] dark:bg-[var(--zui-accordion-item-red-bg-dark,#ef444426)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-lavender-border,var(--zui-color-lavender,#8b5cf6))] dark:border-[color:var(--zui-accordion-item-lavender-border-dark,var(--zui-color-lavender-dark,#a78bfa))] bg-[var(--zui-accordion-item-lavender-bg,color-mix(in oklch, var(--zui-color-lavender,#8b5cf6) 10%, transparent))] dark:bg-[var(--zui-accordion-item-lavender-bg-dark,color-mix(in oklch, var(--zui-color-lavender-dark,#a78bfa) 18%, transparent))] p-2",
+  ruby: "rounded-xl border border-[color:var(--zui-accordion-item-ruby-border,var(--zui-color-ruby,#be123c))] dark:border-[color:var(--zui-accordion-item-ruby-border-dark,var(--zui-color-ruby-dark,#fb7185))] bg-[var(--zui-accordion-item-ruby-bg,color-mix(in oklch, var(--zui-color-ruby,#be123c) 10%, transparent))] dark:bg-[var(--zui-accordion-item-ruby-bg-dark,color-mix(in oklch, var(--zui-color-ruby-dark,#fb7185) 18%, transparent))] p-2",
+  red: "rounded-xl border border-[color:var(--zui-accordion-item-red-border,var(--zui-color-red,#dc2626))] dark:border-[color:var(--zui-accordion-item-red-border-dark,var(--zui-color-red-dark,#ef4444))] bg-[var(--zui-accordion-item-red-bg,color-mix(in oklch, var(--zui-color-red,#dc2626) 10%, transparent))] dark:bg-[var(--zui-accordion-item-red-bg-dark,color-mix(in oklch, var(--zui-color-red-dark,#ef4444) 18%, transparent))] p-2",
   slate:
-    "rounded-xl border border-[color:var(--zui-accordion-item-slate-border,#475569)] dark:border-[color:var(--zui-accordion-item-slate-border-dark,#64748b)] bg-[var(--zui-accordion-item-slate-bg,#4755691a)] dark:bg-[var(--zui-accordion-item-slate-bg-dark,#64748b26)] p-2",
-  zinc: "rounded-xl border border-[color:var(--zui-accordion-item-zinc-border,#52525b)] dark:border-[color:var(--zui-accordion-item-zinc-border-dark,#71717a)] bg-[var(--zui-accordion-item-zinc-bg,#52525b1a)] dark:bg-[var(--zui-accordion-item-zinc-bg-dark,#71717a26)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-slate-border,var(--zui-color-slate,#475569))] dark:border-[color:var(--zui-accordion-item-slate-border-dark,var(--zui-color-slate-dark,#64748b))] bg-[var(--zui-accordion-item-slate-bg,color-mix(in oklch, var(--zui-color-slate,#475569) 10%, transparent))] dark:bg-[var(--zui-accordion-item-slate-bg-dark,color-mix(in oklch, var(--zui-color-slate-dark,#64748b) 18%, transparent))] p-2",
+  zinc: "rounded-xl border border-[color:var(--zui-accordion-item-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[color:var(--zui-accordion-item-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] bg-[var(--zui-accordion-item-zinc-bg,color-mix(in oklch, var(--zui-color-zinc,#52525b) 10%, transparent))] dark:bg-[var(--zui-accordion-item-zinc-bg-dark,color-mix(in oklch, var(--zui-color-zinc-dark,#71717a) 18%, transparent))] p-2",
   stone:
-    "rounded-xl border border-[color:var(--zui-accordion-item-stone-border,#57534e)] dark:border-[color:var(--zui-accordion-item-stone-border-dark,#78716c)] bg-[var(--zui-accordion-item-stone-bg,#57534e1a)] dark:bg-[var(--zui-accordion-item-stone-bg-dark,#78716c26)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-stone-border,var(--zui-color-stone,#57534e))] dark:border-[color:var(--zui-accordion-item-stone-border-dark,var(--zui-color-stone-dark,#78716c))] bg-[var(--zui-accordion-item-stone-bg,color-mix(in oklch, var(--zui-color-stone,#57534e) 10%, transparent))] dark:bg-[var(--zui-accordion-item-stone-bg-dark,color-mix(in oklch, var(--zui-color-stone-dark,#78716c) 18%, transparent))] p-2",
   royal:
-    "rounded-xl border border-[color:var(--zui-accordion-item-royal-border,#4338ca)] dark:border-[color:var(--zui-accordion-item-royal-border-dark,#818cf8)] bg-[var(--zui-accordion-item-royal-bg,#4338ca1a)] dark:bg-[var(--zui-accordion-item-royal-bg-dark,#818cf826)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-royal-border,var(--zui-color-royal,#4338ca))] dark:border-[color:var(--zui-accordion-item-royal-border-dark,var(--zui-color-royal-dark,#818cf8))] bg-[var(--zui-accordion-item-royal-bg,color-mix(in oklch, var(--zui-color-royal,#4338ca) 10%, transparent))] dark:bg-[var(--zui-accordion-item-royal-bg-dark,color-mix(in oklch, var(--zui-color-royal-dark,#818cf8) 18%, transparent))] p-2",
   electric:
-    "rounded-xl border border-[color:var(--zui-accordion-item-electric-border,#0ea5e9)] dark:border-[color:var(--zui-accordion-item-electric-border-dark,#38bdf8)] bg-[var(--zui-accordion-item-electric-bg,#0ea5e91a)] dark:bg-[var(--zui-accordion-item-electric-bg-dark,#38bdf826)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-electric-border,var(--zui-color-electric,#0ea5e9))] dark:border-[color:var(--zui-accordion-item-electric-border-dark,var(--zui-color-electric-dark,#38bdf8))] bg-[var(--zui-accordion-item-electric-bg,color-mix(in oklch, var(--zui-color-electric,#0ea5e9) 10%, transparent))] dark:bg-[var(--zui-accordion-item-electric-bg-dark,color-mix(in oklch, var(--zui-color-electric-dark,#38bdf8) 18%, transparent))] p-2",
   forest:
-    "rounded-xl border border-[color:var(--zui-accordion-item-forest-border,#166534)] dark:border-[color:var(--zui-accordion-item-forest-border-dark,#4ade80)] bg-[var(--zui-accordion-item-forest-bg,#1665341a)] dark:bg-[var(--zui-accordion-item-forest-bg-dark,#4ade8026)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-forest-border,var(--zui-color-forest,#166534))] dark:border-[color:var(--zui-accordion-item-forest-border-dark,var(--zui-color-forest-dark,#4ade80))] bg-[var(--zui-accordion-item-forest-bg,color-mix(in oklch, var(--zui-color-forest,#166534) 10%, transparent))] dark:bg-[var(--zui-accordion-item-forest-bg-dark,color-mix(in oklch, var(--zui-color-forest-dark,#4ade80) 18%, transparent))] p-2",
   sunset:
-    "rounded-xl border border-[color:var(--zui-accordion-item-sunset-border,#ea580c)] dark:border-[color:var(--zui-accordion-item-sunset-border-dark,#fb923c)] bg-[var(--zui-accordion-item-sunset-bg,#ea580c1a)] dark:bg-[var(--zui-accordion-item-sunset-bg-dark,#fb923c26)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-sunset-border,var(--zui-color-sunset,#ea580c))] dark:border-[color:var(--zui-accordion-item-sunset-border-dark,var(--zui-color-sunset-dark,#fb923c))] bg-[var(--zui-accordion-item-sunset-bg,color-mix(in oklch, var(--zui-color-sunset,#ea580c) 10%, transparent))] dark:bg-[var(--zui-accordion-item-sunset-bg-dark,color-mix(in oklch, var(--zui-color-sunset-dark,#fb923c) 18%, transparent))] p-2",
   magenta:
-    "rounded-xl border border-[color:var(--zui-accordion-item-magenta-border,#c026d3)] dark:border-[color:var(--zui-accordion-item-magenta-border-dark,#e879f9)] bg-[var(--zui-accordion-item-magenta-bg,#c026d31a)] dark:bg-[var(--zui-accordion-item-magenta-bg-dark,#e879f926)] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-magenta-border,var(--zui-color-magenta,#c026d3))] dark:border-[color:var(--zui-accordion-item-magenta-border-dark,var(--zui-color-magenta-dark,#e879f9))] bg-[var(--zui-accordion-item-magenta-bg,color-mix(in oklch, var(--zui-color-magenta,#c026d3) 10%, transparent))] dark:bg-[var(--zui-accordion-item-magenta-bg-dark,color-mix(in oklch, var(--zui-color-magenta-dark,#e879f9) 18%, transparent))] p-2",
   crimson:
-    "rounded-xl border border-[color:var(--zui-accordion-item-crimson-border,#b91c1c)] dark:border-[color:var(--zui-accordion-item-crimson-border-dark,#f87171)] bg-[var(--zui-accordion-item-crimson-bg,#b91c1c1a)] dark:bg-[var(--zui-accordion-item-crimson-bg-dark,#f8717126)] p-2",
-  aqua: "rounded-xl border border-[color:var(--zui-accordion-item-aqua-border,#0f766e)] dark:border-[color:var(--zui-accordion-item-aqua-border-dark,#2dd4bf)] bg-[var(--zui-accordion-item-aqua-bg,#0f766e1a)] dark:bg-[var(--zui-accordion-item-aqua-bg-dark,#2dd4bf26)] p-2",
-  plum: "rounded-xl border border-[color:var(--zui-accordion-item-plum-border,#7e22ce)] dark:border-[color:var(--zui-accordion-item-plum-border-dark,#c084fc)] bg-[var(--zui-accordion-item-plum-bg,#7e22ce1a)] dark:bg-[var(--zui-accordion-item-plum-bg-dark,#c084fc26)] p-2",
-  sky: "rounded-xl border border-[color:var(--zui-accordion-item-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-accordion-item-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-accordion-item-sky-bg,oklch(95.1%_0.026_236.824_/_0.5))] dark:bg-[var(--zui-accordion-item-sky-bg-dark,oklch(58.8%_0.158_241.966_/_0.03))] p-2",
-  rose: "rounded-xl border border-[color:var(--zui-accordion-item-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-accordion-item-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-accordion-item-rose-bg,oklch(94.1%_0.03_12.58_/_0.5))] dark:bg-[var(--zui-accordion-item-rose-bg-dark,oklch(58.6%_0.253_17.585_/_0.03))] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-crimson-border,var(--zui-color-crimson,#b91c1c))] dark:border-[color:var(--zui-accordion-item-crimson-border-dark,var(--zui-color-crimson-dark,#f87171))] bg-[var(--zui-accordion-item-crimson-bg,color-mix(in oklch, var(--zui-color-crimson,#b91c1c) 10%, transparent))] dark:bg-[var(--zui-accordion-item-crimson-bg-dark,color-mix(in oklch, var(--zui-color-crimson-dark,#f87171) 18%, transparent))] p-2",
+  aqua: "rounded-xl border border-[color:var(--zui-accordion-item-aqua-border,var(--zui-color-aqua,#0f766e))] dark:border-[color:var(--zui-accordion-item-aqua-border-dark,var(--zui-color-aqua-dark,#2dd4bf))] bg-[var(--zui-accordion-item-aqua-bg,color-mix(in oklch, var(--zui-color-aqua,#0f766e) 10%, transparent))] dark:bg-[var(--zui-accordion-item-aqua-bg-dark,color-mix(in oklch, var(--zui-color-aqua-dark,#2dd4bf) 18%, transparent))] p-2",
+  plum: "rounded-xl border border-[color:var(--zui-accordion-item-plum-border,var(--zui-color-plum,#7e22ce))] dark:border-[color:var(--zui-accordion-item-plum-border-dark,var(--zui-color-plum-dark,#c084fc))] bg-[var(--zui-accordion-item-plum-bg,color-mix(in oklch, var(--zui-color-plum,#7e22ce) 10%, transparent))] dark:bg-[var(--zui-accordion-item-plum-bg-dark,color-mix(in oklch, var(--zui-color-plum-dark,#c084fc) 18%, transparent))] p-2",
+  sky: "rounded-xl border border-[color:var(--zui-accordion-item-sky-border,var(--zui-color-sky,oklch(44.3%_0.11_240.79)))] dark:border-[color:var(--zui-accordion-item-sky-border-dark,var(--zui-color-sky-dark,oklch(58.8%_0.158_241.966)))] bg-[var(--zui-accordion-item-sky-bg,color-mix(in oklch, var(--zui-color-sky,oklch(95.1%_0.026_236.824)) 10%, transparent))] dark:bg-[var(--zui-accordion-item-sky-bg-dark,color-mix(in oklch, var(--zui-color-sky-dark,oklch(58.8%_0.158_241.966)) 18%, transparent))] p-2",
+  rose: "rounded-xl border border-[color:var(--zui-accordion-item-rose-border,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:border-[color:var(--zui-accordion-item-rose-border-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))] bg-[var(--zui-accordion-item-rose-bg,color-mix(in oklch, var(--zui-color-rose,oklch(94.1%_0.03_12.58)) 10%, transparent))] dark:bg-[var(--zui-accordion-item-rose-bg-dark,color-mix(in oklch, var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)) 18%, transparent))] p-2",
   purple:
-    "rounded-xl border border-[color:var(--zui-accordion-item-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-accordion-item-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-accordion-item-purple-bg,oklch(94.6%_0.033_307.174_/_0.5))] dark:bg-[var(--zui-accordion-item-purple-bg-dark,oklch(55.8%_0.288_302.321_/_0.03))] p-2",
-  pink: "rounded-xl border border-[color:var(--zui-accordion-item-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-accordion-item-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-accordion-item-pink-bg,oklch(94.8%_0.028_342.258_/_0.5))] dark:bg-[var(--zui-accordion-item-pink-bg-dark,oklch(59.2%_0.249_0.584_/_0.03))] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[color:var(--zui-accordion-item-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] bg-[var(--zui-accordion-item-purple-bg,color-mix(in oklch, var(--zui-color-purple,oklch(94.6%_0.033_307.174)) 10%, transparent))] dark:bg-[var(--zui-accordion-item-purple-bg-dark,color-mix(in oklch, var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)) 18%, transparent))] p-2",
+  pink: "rounded-xl border border-[color:var(--zui-accordion-item-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[color:var(--zui-accordion-item-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] bg-[var(--zui-accordion-item-pink-bg,color-mix(in oklch, var(--zui-color-pink,oklch(94.8%_0.028_342.258)) 10%, transparent))] dark:bg-[var(--zui-accordion-item-pink-bg-dark,color-mix(in oklch, var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)) 18%, transparent))] p-2",
   orange:
-    "rounded-xl border border-[color:var(--zui-accordion-item-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-accordion-item-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-accordion-item-orange-bg,oklch(95.4%_0.038_75.164_/_0.5))] dark:bg-[var(--zui-accordion-item-orange-bg-dark,oklch(64.6%_0.222_41.116_/_0.03))] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-orange-border,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:border-[color:var(--zui-accordion-item-orange-border-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] bg-[var(--zui-accordion-item-orange-bg,color-mix(in oklch, var(--zui-color-orange,oklch(95.4%_0.038_75.164)) 10%, transparent))] dark:bg-[var(--zui-accordion-item-orange-bg-dark,color-mix(in oklch, var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)) 18%, transparent))] p-2",
   yellow:
-    "rounded-xl border border-[color:var(--zui-accordion-item-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-accordion-item-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-accordion-item-yellow-bg,oklch(97.3%_0.071_103.193_/_0.5))] dark:bg-[var(--zui-accordion-item-yellow-bg-dark,oklch(68.1%_0.162_75.834_/_0.03))] p-2",
-  teal: "rounded-xl border border-[color:var(--zui-accordion-item-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-accordion-item-teal-border-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-accordion-item-teal-bg,oklch(95.3%_0.051_180.801_/_0.5))] dark:bg-[var(--zui-accordion-item-teal-bg-dark,oklch(60%_0.118_184.704_/_0.03))] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-yellow-border,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:border-[color:var(--zui-accordion-item-yellow-border-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] bg-[var(--zui-accordion-item-yellow-bg,color-mix(in oklch, var(--zui-color-yellow,oklch(97.3%_0.071_103.193)) 10%, transparent))] dark:bg-[var(--zui-accordion-item-yellow-bg-dark,color-mix(in oklch, var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)) 18%, transparent))] p-2",
+  teal: "rounded-xl border border-[color:var(--zui-accordion-item-teal-border,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:border-[color:var(--zui-accordion-item-teal-border-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] bg-[var(--zui-accordion-item-teal-bg,color-mix(in oklch, var(--zui-color-teal,oklch(95.3%_0.051_180.801)) 10%, transparent))] dark:bg-[var(--zui-accordion-item-teal-bg-dark,color-mix(in oklch, var(--zui-color-teal-dark,oklch(60%_0.118_184.704)) 18%, transparent))] p-2",
   indigo:
-    "rounded-xl border border-[color:var(--zui-accordion-item-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-accordion-item-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-accordion-item-indigo-bg,oklch(93%_0.034_272.788_/_0.5))] dark:bg-[var(--zui-accordion-item-indigo-bg-dark,oklch(51.1%_0.262_276.966_/_0.03))] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-indigo-border,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:border-[color:var(--zui-accordion-item-indigo-border-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] bg-[var(--zui-accordion-item-indigo-bg,color-mix(in oklch, var(--zui-color-indigo,oklch(93%_0.034_272.788)) 10%, transparent))] dark:bg-[var(--zui-accordion-item-indigo-bg-dark,color-mix(in oklch, var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)) 18%, transparent))] p-2",
   emerald:
-    "rounded-xl border border-[color:var(--zui-accordion-item-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-accordion-item-emerald-border-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-accordion-item-emerald-bg,oklch(95%_0.052_163.051_/_0.5))] dark:bg-[var(--zui-accordion-item-emerald-bg-dark,oklch(59.6%_0.145_163.225_/_0.03))] p-2",
+    "rounded-xl border border-[color:var(--zui-accordion-item-emerald-border,var(--zui-color-emerald,oklch(43.2%_0.095_166.913)))] dark:border-[color:var(--zui-accordion-item-emerald-border-dark,var(--zui-color-emerald-dark,oklch(59.6%_0.145_163.225)))] bg-[var(--zui-accordion-item-emerald-bg,color-mix(in oklch, var(--zui-color-emerald,oklch(95%_0.052_163.051)) 10%, transparent))] dark:bg-[var(--zui-accordion-item-emerald-bg-dark,color-mix(in oklch, var(--zui-color-emerald-dark,oklch(59.6%_0.145_163.225)) 18%, transparent))] p-2",
   "gradient-blue":
-    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-blue-from,oklch(80.9%_0.105_251.813))] dark:from-[var(--zui-accordion-item-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-accordion-item-gradient-blue-to,oklch(82.7%_0.119_306.383))] dark:to-[var(--zui-accordion-item-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] p-2",
+    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-blue-from,var(--zui-color-blue,oklch(80.9%_0.105_251.813)))] dark:from-[var(--zui-accordion-item-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] to-[var(--zui-accordion-item-gradient-blue-to,var(--zui-color-purple,oklch(82.7%_0.119_306.383)))] dark:to-[var(--zui-accordion-item-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] p-2",
   "gradient-green":
-    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-green-from,oklch(87.1%_0.15_154.449))] dark:from-[var(--zui-accordion-item-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-accordion-item-gradient-green-to,oklch(89.7%_0.196_126.665))] dark:to-[var(--zui-accordion-item-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] p-2",
+    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-green-from,var(--zui-color-green,oklch(87.1%_0.15_154.449)))] dark:from-[var(--zui-accordion-item-gradient-green-from-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] to-[var(--zui-accordion-item-gradient-green-to,var(--zui-color-lime,oklch(89.7%_0.196_126.665)))] dark:to-[var(--zui-accordion-item-gradient-green-to-dark,var(--zui-color-lime-dark,oklch(64.8%_0.2_131.684)))] p-2",
   "gradient-red":
-    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-red-from,oklch(80.8%_0.114_19.571))] dark:from-[var(--zui-accordion-item-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-accordion-item-gradient-red-to,oklch(82.3%_0.12_346.018))] dark:to-[var(--zui-accordion-item-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] p-2",
+    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-red-from,var(--zui-color-red,oklch(80.8%_0.114_19.571)))] dark:from-[var(--zui-accordion-item-gradient-red-from-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] to-[var(--zui-accordion-item-gradient-red-to,var(--zui-color-pink,oklch(82.3%_0.12_346.018)))] dark:to-[var(--zui-accordion-item-gradient-red-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] p-2",
   "gradient-yellow":
-    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-yellow-from,oklch(90.5%_0.182_98.111))] dark:from-[var(--zui-accordion-item-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-accordion-item-gradient-yellow-to,oklch(83.7%_0.128_66.29))] dark:to-[var(--zui-accordion-item-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] p-2",
+    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-yellow-from,var(--zui-color-yellow,oklch(90.5%_0.182_98.111)))] dark:from-[var(--zui-accordion-item-gradient-yellow-from-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] to-[var(--zui-accordion-item-gradient-yellow-to,var(--zui-color-orange,oklch(83.7%_0.128_66.29)))] dark:to-[var(--zui-accordion-item-gradient-yellow-to-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] p-2",
   "gradient-purple":
-    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-purple-from,oklch(82.7%_0.119_306.383))] dark:from-[var(--zui-accordion-item-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-accordion-item-gradient-purple-to,oklch(82.3%_0.12_346.018))] dark:to-[var(--zui-accordion-item-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] p-2",
+    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-purple-from,var(--zui-color-purple,oklch(82.7%_0.119_306.383)))] dark:from-[var(--zui-accordion-item-gradient-purple-from-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] to-[var(--zui-accordion-item-gradient-purple-to,var(--zui-color-pink,oklch(82.3%_0.12_346.018)))] dark:to-[var(--zui-accordion-item-gradient-purple-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] p-2",
   "gradient-teal":
-    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-teal-from,oklch(85.5%_0.138_181.071))] dark:from-[var(--zui-accordion-item-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-accordion-item-gradient-teal-to,oklch(86.5%_0.127_207.078))] dark:to-[var(--zui-accordion-item-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] p-2",
+    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-teal-from,var(--zui-color-teal,oklch(85.5%_0.138_181.071)))] dark:from-[var(--zui-accordion-item-gradient-teal-from-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] to-[var(--zui-accordion-item-gradient-teal-to,var(--zui-color-cyan,oklch(86.5%_0.127_207.078)))] dark:to-[var(--zui-accordion-item-gradient-teal-to-dark,var(--zui-color-cyan-dark,oklch(60.9%_0.126_221.723)))] p-2",
   "gradient-indigo":
-    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-indigo-from,oklch(78.5%_0.115_274.713))] dark:from-[var(--zui-accordion-item-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-accordion-item-gradient-indigo-to,oklch(82.7%_0.119_306.383))] dark:to-[var(--zui-accordion-item-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] p-2",
+    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-indigo-from,var(--zui-color-indigo,oklch(78.5%_0.115_274.713)))] dark:from-[var(--zui-accordion-item-gradient-indigo-from-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] to-[var(--zui-accordion-item-gradient-indigo-to,var(--zui-color-purple,oklch(82.7%_0.119_306.383)))] dark:to-[var(--zui-accordion-item-gradient-indigo-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] p-2",
   "gradient-pink":
-    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-pink-from,oklch(82.3%_0.12_346.018))] dark:from-[var(--zui-accordion-item-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-accordion-item-gradient-pink-to,oklch(81%_0.117_11.638))] dark:to-[var(--zui-accordion-item-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] p-2",
+    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-pink-from,var(--zui-color-pink,oklch(82.3%_0.12_346.018)))] dark:from-[var(--zui-accordion-item-gradient-pink-from-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] to-[var(--zui-accordion-item-gradient-pink-to,var(--zui-color-rose,oklch(81%_0.117_11.638)))] dark:to-[var(--zui-accordion-item-gradient-pink-to-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))] p-2",
   "gradient-orange":
-    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-orange-from,oklch(83.7%_0.128_66.29))] dark:from-[var(--zui-accordion-item-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-accordion-item-gradient-orange-to,oklch(80.8%_0.114_19.571))] dark:to-[var(--zui-accordion-item-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] p-2",
+    "rounded-xl bg-linear-to-r from-[var(--zui-accordion-item-gradient-orange-from,var(--zui-color-orange,oklch(83.7%_0.128_66.29)))] dark:from-[var(--zui-accordion-item-gradient-orange-from-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] to-[var(--zui-accordion-item-gradient-orange-to,var(--zui-color-red,oklch(80.8%_0.114_19.571)))] dark:to-[var(--zui-accordion-item-gradient-orange-to-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] p-2",
 } as const;
 
 export const zuiAccordionTriggerBase =
-  "flex w-full items-center justify-between gap-3 py-3 text-left font-medium text-[color:var(--zui-accordion-trigger-fg,oklch(27.9%_0.041_260.031))] dark:text-[color:var(--zui-accordion-trigger-fg-dark,oklch(92.9%_0.013_255.508))] outline-none transition hover:text-[color:var(--zui-accordion-trigger-fg-hover,oklch(20.8%_0.042_265.755))] dark:hover:text-[color:var(--zui-accordion-trigger-fg-hover-dark,#ffffff)] focus-visible:ring-2 focus-visible:ring-[var(--zui-accordion-trigger-ring-focus,#0000004d)] dark:focus-visible:ring-[var(--zui-accordion-trigger-ring-focus-dark,#ffffff4d)]";
+  "flex w-full items-center justify-between gap-3 py-3 text-left font-medium text-[color:var(--zui-accordion-trigger-fg,var(--zui-fg,oklch(27.9%_0.041_260.031)))] dark:text-[color:var(--zui-accordion-trigger-fg-dark,var(--zui-fg-dark,oklch(92.9%_0.013_255.508)))] outline-none transition hover:text-[color:var(--zui-accordion-trigger-fg-hover,oklch(20.8%_0.042_265.755))] dark:hover:text-[color:var(--zui-accordion-trigger-fg-hover-dark,#ffffff)] focus-visible:ring-2 focus-visible:ring-[var(--zui-accordion-trigger-ring-focus,var(--zui-focus-ring,#0000004d))] dark:focus-visible:ring-[var(--zui-accordion-trigger-ring-focus-dark,var(--zui-focus-ring-dark,#ffffff4d))]";
 
 export const zuiAccordionTriggerSizes = {
   sm: "py-2 text-sm",