@bitrix24/b24ui-nuxt 0.7.2 → 1.0.1

package/.nuxt/b24ui/content/table-wrapper.ts

@@ -7,33 +7,33 @@ const size = [
 
 export default {
   "slots": {
-    "base": "font-b24-primary [&>table]:text-md [&>table]:relative [&>table]:w-full [&>table]:text-left [&>table]:rtl:text-right [&>table]:text-base-900 dark:[&>table]:text-base-200 [&>table>thead>tr>td]:align-middle [&>table>thead>tr>th]:align-middle [&>table>tbody>tr>td]:align-middle [&>table>tbody>tr>th]:align-middle [&>table>tfoot>tr>td]:align-middle [&>table>tfoot>tr>th]:align-middle [&>table>thead>tr>td]:whitespace-nowrap  [&>table>thead>tr>td]:text-md [&>table>thead>tr>td]:font-normal [&>table>thead>tr>th]:whitespace-nowrap  [&>table>thead>tr>th]:text-md [&>table>thead>tr>th]:font-normal [&>table>tbody>tr>th]:whitespace-nowrap  [&>table>tbody>tr>th]:text-md [&>table>tbody>tr>th]:font-normal [&>table>tfoot>tr>td]:whitespace-nowrap  [&>table>tfoot>tr>td]:text-md [&>table>tfoot>tr>td]:font-normal [&>table>tfoot>tr>th]:whitespace-nowrap  [&>table>tfoot>tr>th]:text-md [&>table>tfoot>tr>th]:font-normal [&>table>thead>tr]:border-base-300 dark:[&>table>thead>tr]:border-base-800 [&>table>tbody>tr]:border-base-master/10 dark:[&>table>tbody>tr]:border-base-100/20 [&>table>tfoot]:border-base-300 dark:[&>table>tfoot]:border-base-800 [&>table>thead>tr]:border-b [&>table>tbody>tr:not(:last-child)]:border-b [&>table>tfoot]:border-t"
+    "base": "font-[family-name:var(--ui-font-family-primary)] [&>table]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table]:relative [&>table]:w-full [&>table]:text-left [&>table]:rtl:text-right [&>table]:text-(--b24ui-typography-label-color) [&>table>thead>tr>td]:align-middle [&>table>thead>tr>th]:align-middle [&>table>tbody>tr>td]:align-middle [&>table>tbody>tr>th]:align-middle [&>table>tfoot>tr>td]:align-middle [&>table>tfoot>tr>th]:align-middle [&>table>thead>tr>td]:whitespace-nowrap [&>table>thead>tr>td]:text-(length:--ui-font-size-md) [&>table>thead>tr>td]:font-(--ui-font-weight-normal) [&>table>thead>tr>th]:whitespace-nowrap [&>table>thead>tr>th]:text-(length:--ui-font-size-md) [&>table>thead>tr>th]:font-(--ui-font-weight-normal) [&>table>tbody>tr>th]:whitespace-nowrap [&>table>tbody>tr>th]:text-(length:--ui-font-size-md) [&>table>tbody>tr>th]:font-(--ui-font-weight-normal) [&>table>tfoot>tr>td]:whitespace-nowrap [&>table>tfoot>tr>td]:text-(length:--ui-font-size-md) [&>table>tfoot>tr>td]:font-(--ui-font-weight-normal) [&>table>tfoot>tr>th]:whitespace-nowrap [&>table>tfoot>tr>th]:text-(length:--ui-font-size-md) [&>table>tfoot>tr>th]:font-(--ui-font-weight-normal) [&>table>thead>tr]:border-(--ui-color-divider-vibrant-accent-more) [&>table>tbody>tr]:border-(--ui-color-divider-vibrant-default) [&>table>tfoot]:border-(--ui-color-divider-vibrant-default) [&>table>thead>tr]:border-b [&>table>tbody>tr:not(:last-child)]:border-b [&>table>tfoot]:border-t"
   },
   "variants": {
     "size": {
-      "xs": "[&>table>thead>tr>td]:text-xs [&>table>thead>tr>td]:px-2 [&>table>thead>tr>td]:py-1 [&>table>thead>tr>th]:text-xs [&>table>thead>tr>th]:px-2 [&>table>thead>tr>th]:py-1 [&>table>tbody>tr>td]:text-xs [&>table>tbody>tr>td]:px-2 [&>table>tbody>tr>td]:py-1 [&>table>tbody>tr>th]:text-xs [&>table>tbody>tr>th]:px-2 [&>table>tbody>tr>th]:py-1 [&>table>tfoot>tr>td]:text-xs [&>table>tfoot>tr>td]:px-2 [&>table>tfoot>tr>td]:py-1 [&>table>tfoot>tr>th]:text-xs [&>table>tfoot>tr>th]:px-2 [&>table>tfoot>tr>th]:py-1",
-      "sm": "[&>table>thead>tr>td]:text-sm [&>table>thead>tr>td]:px-3 [&>table>thead>tr>td]:py-2 [&>table>thead>tr>th]:text-sm [&>table>thead>tr>th]:px-3 [&>table>thead>tr>th]:py-2 [&>table>tbody>tr>td]:text-sm [&>table>tbody>tr>td]:px-3 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>th]:text-sm [&>table>tbody>tr>th]:px-3 [&>table>tbody>tr>th]:py-2 [&>table>tfoot>tr>td]:text-sm [&>table>tfoot>tr>td]:px-3 [&>table>tfoot>tr>td]:py-2 [&>table>tfoot>tr>th]:text-sm [&>table>tfoot>tr>th]:px-3 [&>table>tfoot>tr>th]:py-2",
-      "md": "[&>table>thead>tr>td]:text-md [&>table>thead>tr>td]:px-4 [&>table>thead>tr>td]:py-3.5 [&>table>thead>tr>th]:text-md [&>table>thead>tr>th]:px-4 [&>table>thead>tr>th]:py-3.5 [&>table>tbody>tr>td]:text-md [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-3.5 [&>table>tbody>tr>th]:text-md [&>table>tbody>tr>th]:px-4 [&>table>tbody>tr>th]:py-3.5 [&>table>tfoot>tr>td]:text-md [&>table>tfoot>tr>td]:px-4 [&>table>tfoot>tr>td]:py-3.5 [&>table>tfoot>tr>th]:text-md [&>table>tfoot>tr>th]:px-4 [&>table>tfoot>tr>th]:py-3.5",
-      "lg": "[&>table>thead>tr>td]:text-lg [&>table>thead>tr>td]:px-5 [&>table>thead>tr>td]:py-4 [&>table>thead>tr>th]:text-lg [&>table>thead>tr>th]:px-5 [&>table>thead>tr>th]:py-4 [&>table>tbody>tr>td]:text-lg [&>table>tbody>tr>td]:px-5 [&>table>tbody>tr>td]:py-4 [&>table>tbody>tr>th]:text-lg [&>table>tbody>tr>th]:px-5 [&>table>tbody>tr>th]:py-4 [&>table>tfoot>tr>td]:text-lg [&>table>tfoot>tr>td]:px-5 [&>table>tfoot>tr>td]:py-4 [&>table>tfoot>tr>th]:text-lg [&>table>tfoot>tr>th]:px-5 [&>table>tfoot>tr>th]:py-4"
+      "xs": "[&>table>thead>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>thead>tr>td]:px-2 [&>table>thead>tr>td]:py-1 [&>table>thead>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>thead>tr>th]:px-2 [&>table>thead>tr>th]:py-1 [&>table>tbody>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tbody>tr>td]:px-2 [&>table>tbody>tr>td]:py-1 [&>table>tbody>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tbody>tr>th]:px-2 [&>table>tbody>tr>th]:py-1 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tfoot>tr>th]:px-2 [&>table>tfoot>tr>th]:py-1 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-xs)/(--ui-font-line-height-2xs) [&>table>tfoot>tr>th]:px-2 [&>table>tfoot>tr>th]:py-1",
+      "sm": "[&>table>thead>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>thead>tr>td]:px-3 [&>table>thead>tr>td]:py-2 [&>table>thead>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>thead>tr>th]:px-3 [&>table>thead>tr>th]:py-2 [&>table>tbody>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tbody>tr>td]:px-3 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tbody>tr>th]:px-3 [&>table>tbody>tr>th]:py-2 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tfoot>tr>th]:px-3 [&>table>tfoot>tr>th]:py-2 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) [&>table>tfoot>tr>th]:px-3 [&>table>tfoot>tr>th]:py-2",
+      "md": "[&>table>thead>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>thead>tr>td]:px-4 [&>table>thead>tr>td]:py-3.5 [&>table>thead>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>thead>tr>th]:px-4 [&>table>thead>tr>th]:py-3.5 [&>table>tbody>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-3.5 [&>table>tbody>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tbody>tr>th]:px-4 [&>table>tbody>tr>th]:py-3.5 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tfoot>tr>th]:px-4 [&>table>tfoot>tr>th]:py-3.5 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-md)/(--ui-font-line-height-md) [&>table>tfoot>tr>th]:px-4 [&>table>tfoot>tr>th]:py-3.5",
+      "lg": "[&>table>thead>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>thead>tr>td]:px-5 [&>table>thead>tr>td]:py-4 [&>table>thead>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>thead>tr>th]:px-5 [&>table>thead>tr>th]:py-4 [&>table>tbody>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tbody>tr>td]:px-5 [&>table>tbody>tr>td]:py-4 [&>table>tbody>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tbody>tr>th]:px-5 [&>table>tbody>tr>th]:py-4 [&>table>tfoot>tr>td]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tfoot>tr>th]:px-5 [&>table>tfoot>tr>th]:py-4 [&>table>tfoot>tr>th]:text-(length:--ui-font-size-lg)/(--ui-font-line-height-lg) [&>table>tfoot>tr>th]:px-5 [&>table>tfoot>tr>th]:py-4"
     },
     "rounded": {
-      "true": "rounded-md",
+      "true": "rounded-(--ui-border-radius-md)",
       "false": ""
     },
     "zebra": {
-      "true": "[&>table>tbody>tr]:even:bg-base-30 [&>table>tbody>tr]:even:[&>td]:bg-base-30 [&>table>tbody>tr]:even:[&>th]:bg-base-30 dark:[&>table>tbody>tr]:even:bg-base-dark dark:[&>table>tbody>tr]:even:[&>td]:bg-base-dark dark:[&>table>tbody>tr]:even:[&>th]:bg-base-dark"
+      "true": "[&>table>tbody>tr]:even:bg-(--ui-color-base-8) [&>table>tbody>tr]:even:[&>td]:bg-(--ui-color-base-8) [&>table>tbody>tr]:even:[&>th]:bg-(--ui-color-base-8) light:[&>table>tbody>tr]:even:bg-(--ui-color-base-6) light:[&>table>tbody>tr]:even:[&>td]:bg-(--ui-color-base-6) light:[&>table>tbody>tr]:even:[&>th]:bg-(--ui-color-base-6)"
     },
     "pinRows": {
-      "true": "[&>table>thead>tr]:sticky [&>table>thead>tr]:top-0 [&>table>thead>tr]:z-1 [&>table>thead>tr]:bg-white dark:[&>table>thead>tr]:bg-base-dark [&>table>thead>tr]:shadow-bottom-sm [&>table>tfoot>tr]:sticky [&>table>tfoot>tr]:bottom-0 [&>table>tfoot>tr]:z-1 [&>table>tfoot>tr]:bg-white dark:[&>table>tfoot>tr]:bg-base-dark [&>table>tfoot>tr]:shadow-top-sm"
+      "true": "[&>table>thead>tr]:sticky [&>table>thead>tr]:top-0      [&>table>thead>tr]:z-1 dark:[&>table>thead>tr]:bg-(--ui-color-base-5) [&>table>thead>tr]:bg-(--ui-color-base-white-fixed) [&>table>thead>tr]:text-(--ui-color-g-content-grey-1) [&>table>thead>tr]:shadow-bottom-sm [&>table>tfoot>tr]:sticky [&>table>tfoot>tr]:bottom-0   [&>table>tfoot>tr]:z-1 dark:[&>table>tfoot>tr]:bg-(--ui-color-base-5) [&>table>tfoot>tr]:bg-(--ui-color-base-white-fixed) [&>table>tfoot>tr]:text-(--ui-color-g-content-grey-1) [&>table>tfoot>tr]:shadow-top-sm"
     },
     "pinCols": {
-      "true": "[&>table>thead>tr>th]:sticky [&>table>thead>tr>th]:right-0 [&>table>thead>tr>th]:left-0 [&>table>thead>tr>th]:bg-base-20 dark:[&>table>thead>tr>th]:bg-base-dark [&>table>tbody>tr>th]:sticky [&>table>tbody>tr>th]:right-0 [&>table>tbody>tr>th]:left-0 [&>table>tbody>tr>th]:bg-base-20 dark:[&>table>tbody>tr>th]:bg-base-dark [&>table>tfoot>tr>th]:sticky [&>table>tfoot>tr>th]:right-0 [&>table>tfoot>tr>th]:left-0 [&>table>tfoot>tr>th]:bg-base-20 dark:[&>table>tfoot>tr>th]:bg-base-dark"
+      "true": "[&>table>thead>tr>th]:sticky [&>table>thead>tr>th]:right-0 [&>table>thead>tr>th]:left-0 dark:[&>table>thead>tr>th]:bg-(--ui-color-base-5) [&>table>thead>tr>th]:bg-(--ui-color-base-white-fixed) [&>table>thead>tr>th]:text-(--ui-color-g-content-grey-1) [&>table>tbody>tr>th]:sticky [&>table>tbody>tr>th]:right-0 [&>table>tbody>tr>th]:left-0 dark:[&>table>tbody>tr>th]:bg-(--ui-color-base-5) [&>table>tbody>tr>th]:bg-(--ui-color-base-white-fixed) [&>table>tbody>tr>th]:text-(--ui-color-g-content-grey-1) [&>table>tfoot>tr>th]:sticky [&>table>tfoot>tr>th]:right-0 [&>table>tfoot>tr>th]:left-0 dark:[&>table>tfoot>tr>th]:bg-(--ui-color-base-5) [&>table>tfoot>tr>th]:bg-(--ui-color-base-white-fixed) [&>table>tfoot>tr>th]:text-(--ui-color-g-content-grey-1)"
     },
     "rowHover": {
-      "true": "[&>table>tbody>tr]:hover:bg-base-40 [&>table>tbody>tr]:hover:[&>td]:bg-base-40 [&>table>tbody>tr]:hover:[&>th]:bg-base-40 dark:[&>table>tbody>tr]:hover:bg-base-900 dark:[&>table>tbody>tr]:hover:[&>td]:bg-base-900 dark:[&>table>tbody>tr]:hover:[&>th]:bg-base-900"
+      "true": "[&>table>tbody>tr]:hover:bg-(--ui-color-base-8) [&>table>tbody>tr]:hover:[&>td]:bg-(--ui-color-base-8) [&>table>tbody>tr]:hover:[&>th]:bg-(--ui-color-base-8) light:[&>table>tbody>tr]:hover:bg-(--ui-color-base-6) light:[&>table>tbody>tr]:hover:[&>td]:bg-(--ui-color-base-6) light:[&>table>tbody>tr]:hover:[&>th]:bg-(--ui-color-base-6)"
     },
     "bordered": {
-      "true": "border border-base-master/10 dark:border-base-800"
+      "true": "border border-(--ui-color-divider-vibrant-default)"
     },
     "scrollbarThin": {
       "true": "scrollbar-thin"

package/.nuxt/b24ui/countdown.ts

@@ -8,7 +8,7 @@ const size = [
 
 export default {
   "slots": {
-    "base": "relative flex flex-row flex-nowrap items-center justify-between text-base-500 dark:text-base-600",
+    "base": "relative flex flex-row flex-nowrap items-center justify-between text-(--b24ui-typography-legend-color)",
     "label": "",
     "leadingIcon": "shrink-0",
     "leadingAvatar": "shrink-0",
@@ -21,27 +21,27 @@ export default {
   "variants": {
     "size": {
       "xs": {
-        "base": "gap-0.5 text-5xs leading-none",
+        "base": "gap-0.5 text-(length:--ui-font-size-5xs)/(--ui-font-line-height-reset)",
         "leadingIcon": "size-sm",
         "leadingAvatarSize": "3xs"
       },
       "sm": {
-        "base": "gap-1 text-4xs leading-none",
+        "base": "gap-1 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset)",
         "leadingIcon": "size-sm2",
         "leadingAvatarSize": "3xs"
       },
       "md": {
-        "base": "gap-1 text-md leading-none",
+        "base": "gap-1 text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)",
         "leadingIcon": "size-[16px]",
         "leadingAvatarSize": "3xs"
       },
       "lg": {
-        "base": "gap-1 text-lg leading-none",
+        "base": "gap-1 text-(length:--ui-font-size-lg)/(--ui-font-line-height-reset)",
         "leadingIcon": "size-[22px]",
         "leadingAvatarSize": "2xs"
       },
       "xl": {
-        "base": "gap-1 text-xl leading-none",
+        "base": "gap-1 text-(length:--ui-font-size-xl)/(--ui-font-line-height-reset)",
         "leadingIcon": "size-[26px]",
         "leadingAvatarSize": "xs"
       }
@@ -60,27 +60,27 @@ export default {
     {
       "size": "xs" as typeof size[number],
       "useCircle": true,
-      "class": "text-7xs leading-normal p-0.5"
+      "class": "text-(length:--ui-font-size-7xs)/[normal] p-0.5"
     },
     {
       "size": "sm" as typeof size[number],
       "useCircle": true,
-      "class": "text-6xs leading-normal p-1.5"
+      "class": "text-(length:--ui-font-size-6xs)/[normal] p-1.5"
     },
     {
       "size": "md" as typeof size[number],
       "useCircle": true,
-      "class": "text-3xs leading-normal p-1.5"
+      "class": "text-(length:--ui-font-size-3xs)/[normal] p-1.5"
     },
     {
       "size": "lg" as typeof size[number],
       "useCircle": true,
-      "class": "text-xs leading-normal p-1.5 pb-2"
+      "class": "text-(length:--ui-font-size-xs)/[normal] p-1.5 pb-2"
     },
     {
       "size": "xl" as typeof size[number],
       "useCircle": true,
-      "class": "text-sm leading-normal p-2 pb-2.5"
+      "class": "text-(length:--ui-font-size-sm)/[normal] p-2 pb-2.5"
     }
   ],
   "defaultVariants": {

package/.nuxt/b24ui/description-list.ts

@@ -6,18 +6,18 @@ const size = [
 export default {
   "slots": {
     "root": "w-full shrink-0",
-    "legend": "font-semibold text-black dark:text-base-150",
-    "text": "text-base-500 dark:text-base-400",
+    "legend": "font-(--ui-font-weight-semibold) text-(--b24ui-typography-label-color)",
+    "text": "text-(--b24ui-typography-description-color)",
     "container": "grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto]",
-    "labelWrapper": "col-start-1 border-t first:border-none sm:border-t flex flex-nowrap flex-row items-center justify-start gap-1.5 border-base-950/5 text-base-500 sm:border-base-950/5 dark:border-white/5 dark:text-base-400 sm:dark:border-white/5",
-    "icon": "shrink-0 size-6 text-base-500 dark:text-base-400",
+    "labelWrapper": "col-start-1 border-t first:border-none sm:border-t flex flex-nowrap flex-row items-center justify-start gap-1.5 border-(--ui-color-divider-vibrant-default) sm:border-(--ui-color-divider-vibrant-default) text-(--b24ui-typography-description-color)",
+    "icon": "shrink-0 size-6 text-(--b24ui-typography-description-color)",
     "avatar": "shrink-0",
     "avatarSize": "",
     "label": "",
-    "descriptionWrapper": "sm:border-t sm:[&:nth-child(2)]:border-none text-base-900 sm:border-base-950/5 dark:text-base-150 dark:sm:border-white/5",
+    "descriptionWrapper": "sm:border-t sm:[&:nth-child(2)]:border-none sm:border-(--ui-color-divider-vibrant-default) text-(--b24ui-typography-label-color)",
     "description": "",
     "actions": "flex flex-wrap gap-1.5 shrink-0",
-    "footer": "border-t border-base-950/5 dark:border-white/5"
+    "footer": "border-t border-(--ui-color-divider-vibrant-default)"
   },
   "variants": {
     "size": {

package/.nuxt/b24ui/dropdown-menu.ts

@@ -1,4 +1,9 @@
 const color = [
+  "air-primary",
+  "air-primary-success",
+  "air-primary-alert",
+  "air-primary-copilot",
+  "air-primary-warning",
   "default",
   "danger",
   "success",
@@ -9,228 +14,151 @@ const color = [
   "ai"
 ] as const
 
-const size = [
-  "xs",
-  "sm",
-  "md",
-  "lg"
-] as const
-
 export default {
   "slots": {
-    "content": "min-w-32 bg-white dark:bg-base-dark shadow-lg rounded-2xs ring ring-base-300 dark:ring-base-800 overflow-hidden motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) flex flex-col pointer-events-auto",
-    "viewport": "relative divide-y divide-base-master/10 dark:divide-base-100/20 scroll-py-1 overflow-y-auto flex-1",
-    "arrow": "fill-base-master/10 dark:fill-base-100/20",
-    "group": "p-1 isolate",
-    "label": "w-full flex items-center font-semibold text-base-900 dark:text-base-200",
-    "separator": "-mx-1 my-1 h-px bg-base-master/10 dark:bg-base-100/20",
-    "item": "group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-2xs cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-75 text-base-master dark:text-base-150 data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-base-100/50 dark:data-highlighted:before:bg-base-900 transition-colors before:transition-colors",
-    "itemLeadingIcon": "shrink-0 text-base-500 dark:text-base-700 group-data-highlighted:text-base-master dark:group-data-highlighted:text-base-150 group-data-[state=checked]:text-base-master dark:group-data-[state=checked]:text-base-150 transition-colors",
-    "itemLeadingAvatar": "shrink-0",
-    "itemLeadingAvatarSize": "",
-    "itemTrailing": "ms-auto inline-flex gap-1.5 items-center",
-    "itemTrailingIcon": "shrink-0",
-    "itemTrailingKbds": "hidden lg:inline-flex items-center shrink-0",
-    "itemTrailingKbdsSize": "",
-    "itemLabel": "truncate",
-    "itemLabelExternalIcon": "inline-block size-3 align-top text-base-500 dark:text-base-700"
+    "content": "light bg-(--popup-window-background-color) shadow-(--popup-window-box-shadow) rounded-(--popup-window-border-radius) will-change-[opacity] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-dropdown-menu-content-transform-origin) font-[family-name:var(--ui-font-family-primary)] relative isolate px-0 py-(--menu-popup-padding) pointer-events-auto",
+    "viewport": "relative w-[240px] max-h-[40vh] overflow-x-hidden overflow-y-auto scrollbar-thin",
+    "arrow": "fill-(--popup-window-background-color)",
+    "group": "grid",
+    "label": "w-full min-w-[195px] h-(--popup-window-delimiter-section-height) px-[18px] mt-(--menu-item-block-stack-space) flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap text-start text-(length:--popup-window-delimiter-font-size) text-(--popup-window-delimiter-text-color) font-(--popup-window-delimiter-font-weight) after:ms-[10px] after:block after:flex-1 after:min-w-[15px] after:h-px after:bg-(--popup-window-delimiter-bg-color)",
+    "separator": "my-[8px] mx-[18px] h-[1px] bg-(--popup-window-delimiter-bg-color)",
+    "item": "group w-full min-w-[195px] h-[36px] px-[18px] mt-(--menu-item-block-stack-space) relative flex flex-row rtl:flex-row-reverse items-center select-none outline-none whitespace-nowrap cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-30 text-start text-(length:--menu-popup-item-font-size) text-(--menu-popup-item-color) hover:text-(--menu-popup-item-color-hover) data-highlighted:text-(--menu-popup-item-color-hover) data-[state=open]:text-(--menu-popup-item-color-hover) hover:bg-(--menu-popup-item-bg-color-hover) data-highlighted:bg-(--menu-popup-item-bg-color-hover) data-[state=open]:bg-(--menu-popup-item-bg-color-hover) transition-colors",
+    "itemLeadingIcon": "shrink-0 size-[18px] text-(--ui-color-design-plain-content-icon-secondary) group-data-highlighted:text-(--ui-color-accent-main-primary) group-data-[state=open]:text-(--ui-color-accent-main-primary) group-data-[state=checked]:text-(--ui-color-accent-main-primary) transition-colors",
+    "itemLeadingAvatar": "shrink-0 size-[16px] mx-px",
+    "itemLeadingAvatarSize": "2xs",
+    "itemTrailing": "ml-auto rtl:ml-0 rtl:mr-auto inline-flex gap-1.5 items-center",
+    "itemTrailingIcon": "shrink-0 size-[24px] text-(--ui-color-design-plain-content-icon-secondary)",
+    "itemTrailingKbds": "shrink-0 hidden lg:inline-flex items-center gap-0.5",
+    "itemTrailingKbdsSize": "md",
+    "itemLabel": "truncate ms-[2px] -mt-px group-data-[state=checked]:text-(--ui-color-accent-main-primary)",
+    "itemLabelExternalIcon": "inline-block size-[16px] text-(--ui-color-design-plain-content-icon-secondary)"
   },
   "variants": {
     "color": {
-      "default": "",
-      "danger": "",
-      "success": "",
-      "warning": "",
-      "primary": "",
-      "secondary": "",
-      "collab": "",
-      "ai": ""
+      "air-primary": {
+        "item": "style-filled"
+      },
+      "air-primary-success": {
+        "item": "style-filled-success"
+      },
+      "air-primary-alert": {
+        "item": "style-filled-alert"
+      },
+      "air-primary-copilot": {
+        "item": "style-filled-copilot"
+      },
+      "air-primary-warning": {
+        "item": "style-filled-warning"
+      },
+      "default": {
+        "item": "style-old-default"
+      },
+      "danger": {
+        "item": "style-old-danger"
+      },
+      "success": {
+        "item": "style-old-success"
+      },
+      "warning": {
+        "item": "style-old-warning"
+      },
+      "primary": {
+        "item": "style-old-primary"
+      },
+      "secondary": {
+        "item": "style-old-secondary"
+      },
+      "collab": {
+        "item": "style-old-collab"
+      },
+      "ai": {
+        "item": "style-old-ai"
+      }
     },
     "active": {
-      "false": {
-        "item": "text-base-master data-highlighted:text-base-900 data-highlighted:before:bg-base-100/50 data-[state=open]:text-base-900 data-[state=open]:before:bg-base-100/50 dark:text-base-150 dark:data-highlighted:text-base-200 dark:data-highlighted:before:bg-base-900 dark:data-[state=open]:text-base-200 dark:data-[state=open]:before:bg-base-900 transition-colors before:transition-colors",
-        "itemLeadingIcon": "text-base-500 group-data-highlighted:text-base-master group-data-[state=open]:text-base-master dark:text-base-700 dark:group-data-highlighted:text-base-150 dark:group-data-[state=open]:text-base-150 transition-colors"
-      },
       "true": {
-        "item": "text-base-900 before:bg-base-100/50 dark:text-base-200 dark:before:bg-base-900",
-        "itemLeadingIcon": "text-base-master group-data-[state=open]:text-base-master dark:text-base-700"
-      }
+        "item": "text-(--ui-color-accent-main-primary) hover:text-(--ui-color-accent-main-primary)",
+        "itemLeadingIcon": "text-(--ui-color-accent-main-primary) hover:text-(--ui-color-accent-main-primary) group-data-[state=open]:text-(--ui-color-accent-main-primary)"
+      },
+      "false": {}
     },
     "loading": {
       "true": {
         "itemLeadingIcon": "animate-spin"
       }
-    },
-    "size": {
-      "xs": {
-        "label": "p-1 text-xs gap-1",
-        "item": "p-1 text-xs gap-1",
-        "itemLeadingIcon": "size-4",
-        "itemLeadingAvatarSize": "3xs",
-        "itemTrailingIcon": "size-4",
-        "itemTrailingKbds": "gap-0.5",
-        "itemTrailingKbdsSize": "sm"
-      },
-      "sm": {
-        "label": "p-1.5 text-xs gap-1.5",
-        "item": "p-1.5 text-xs gap-1.5",
-        "itemLeadingIcon": "size-4",
-        "itemLeadingAvatarSize": "3xs",
-        "itemTrailingIcon": "size-4",
-        "itemTrailingKbds": "gap-0.5",
-        "itemTrailingKbdsSize": "sm"
-      },
-      "md": {
-        "label": "h-9 ps-2 pe-3 text-sm gap-2",
-        "item": "h-9 ps-3 pe-3 text-sm gap-2",
-        "itemLeadingIcon": "size-5",
-        "itemLeadingAvatarSize": "2xs",
-        "itemTrailingIcon": "size-3",
-        "itemTrailingKbds": "gap-0.5",
-        "itemTrailingKbdsSize": "md"
-      },
-      "lg": {
-        "label": "p-2 text-sm gap-2",
-        "item": "p-2 text-sm gap-2",
-        "itemLeadingIcon": "size-5",
-        "itemLeadingAvatarSize": "2xs",
-        "itemTrailingIcon": "size-5",
-        "itemTrailingKbds": "gap-1",
-        "itemTrailingKbdsSize": "md"
-      }
     }
   },
   "compoundVariants": [
     {
-      "color": "default" as typeof color[number],
+      "color": [
+        "air-primary" as typeof color[number],
+        "air-primary-success" as typeof color[number],
+        "air-primary-alert" as typeof color[number],
+        "air-primary-copilot" as typeof color[number],
+        "air-primary-warning" as typeof color[number]
+      ],
       "active": false,
       "class": {
-        "item": "text-base-master data-highlighted:text-base-900 data-highlighted:before:bg-base-100/50 data-[state=open]:text-base-900 data-[state=open]:before:bg-base-100/50 dark:text-base-150 dark:data-highlighted:text-base-200 dark:data-highlighted:before:bg-base-900 dark:data-[state=open]:text-base-200 dark:data-[state=open]:before:bg-base-900",
-        "itemLeadingIcon": "text-base-500 group-data-highlighted:text-base-master group-data-[state=open]:text-base-master dark:text-base-700 dark:group-data-highlighted:text-base-150 dark:group-data-[state=open]:text-base-150"
+        "item": "text-(--b24ui-background) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)",
+        "itemLeadingIcon": "text-(--b24ui-background) group-data-highlighted:text-(--b24ui-background-hover) group-data-[state=open]:text-(--b24ui-background-hover)"
       }
     },
     {
-      "color": "default" as typeof color[number],
+      "color": [
+        "air-primary" as typeof color[number],
+        "air-primary-success" as typeof color[number],
+        "air-primary-alert" as typeof color[number],
+        "air-primary-copilot" as typeof color[number],
+        "air-primary-warning" as typeof color[number]
+      ],
       "active": true,
       "class": {
-        "item": "text-base-900 before:bg-base-100/50 dark:text-base-200 dark:before:bg-base-900",
-        "itemLeadingIcon": "text-base-master group-data-[state=open]:text-base-master dark:text-base-700"
+        "item": "text-(--b24ui-background-active)",
+        "itemLeadingIcon": "text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)"
       }
     },
     {
-      "color": "danger" as typeof color[number],
-      "active": false,
-      "class": {
-        "item": "text-red-950 data-highlighted:text-red-900 data-highlighted:before:bg-red-100 data-[state=open]:text-red-900 data-[state=open]:before:bg-red-100 dark:text-red-150 dark:data-highlighted:text-red-200 dark:data-highlighted:before:bg-red-900 dark:data-[state=open]:text-red-200 dark:data-[state=open]:before:bg-red-900",
-        "itemLeadingIcon": "text-red-500 group-data-highlighted:text-red-900 group-data-[state=open]:text-red-900 dark:text-red-700 dark:group-data-highlighted:text-red-150 dark:group-data-[state=open]:text-red-150"
-      }
-    },
-    {
-      "color": "danger" as typeof color[number],
-      "active": true,
-      "class": {
-        "item": "text-red-900 before:bg-red-100 dark:text-red-200 dark:before:bg-red-900",
-        "itemLeadingIcon": "text-red-900 group-data-[state=open]:text-red-900 dark:text-red-700"
-      }
-    },
-    {
-      "color": "success" as typeof color[number],
-      "active": false,
-      "class": {
-        "item": "text-green-950 data-highlighted:text-green-900 data-highlighted:before:bg-green-100 data-[state=open]:text-green-900 data-[state=open]:before:bg-green-100 dark:text-green-150 dark:data-highlighted:text-green-200 dark:data-highlighted:before:bg-green-900 dark:data-[state=open]:text-green-200 dark:data-[state=open]:before:bg-green-900",
-        "itemLeadingIcon": "text-green-500 group-data-highlighted:text-green-900 group-data-[state=open]:text-green-900 dark:text-green-700 dark:group-data-highlighted:text-green-150 dark:group-data-[state=open]:text-green-150"
-      }
-    },
-    {
-      "color": "success" as typeof color[number],
-      "active": true,
-      "class": {
-        "item": "text-green-900 before:bg-green-100 dark:text-green-200 dark:before:bg-green-900",
-        "itemLeadingIcon": "text-green-900 group-data-[state=open]:text-green-900 dark:text-green-700"
-      }
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "active": false,
-      "class": {
-        "item": "text-orange-950 data-highlighted:text-orange-900 data-highlighted:before:bg-orange-100 data-[state=open]:text-orange-900 data-[state=open]:before:bg-orange-100 dark:text-orange-150 dark:data-highlighted:text-orange-200 dark:data-highlighted:before:bg-orange-900 dark:data-[state=open]:text-orange-200 dark:data-[state=open]:before:bg-orange-900",
-        "itemLeadingIcon": "text-orange-500 group-data-highlighted:text-orange-900 group-data-[state=open]:text-orange-900 dark:text-orange-700 dark:group-data-highlighted:text-orange-150 dark:group-data-[state=open]:text-orange-150"
-      }
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "active": true,
-      "class": {
-        "item": "text-orange-900 before:bg-orange-100 dark:text-orange-200 dark:before:bg-orange-900",
-        "itemLeadingIcon": "text-orange-900 group-data-[state=open]:text-orange-900 dark:text-orange-700"
-      }
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "active": false,
-      "class": {
-        "item": "text-blue-950 data-highlighted:text-blue-900 data-highlighted:before:bg-blue-100 data-[state=open]:text-blue-900 data-[state=open]:before:bg-blue-100 dark:text-blue-150 dark:data-highlighted:text-blue-200 dark:data-highlighted:before:bg-blue-900 dark:data-[state=open]:text-blue-200 dark:data-[state=open]:before:bg-blue-900",
-        "itemLeadingIcon": "text-blue-500 group-data-highlighted:text-blue-900 group-data-[state=open]:text-blue-900 dark:text-blue-700 dark:group-data-highlighted:text-blue-150 dark:group-data-[state=open]:text-blue-150"
-      }
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "active": true,
-      "class": {
-        "item": "text-blue-900 before:bg-blue-100 dark:text-blue-200 dark:before:bg-blue-900",
-        "itemLeadingIcon": "text-blue-900 group-data-[state=open]:text-blue-900 dark:text-blue-700"
-      }
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "active": false,
-      "class": {
-        "item": "text-cyan-950 data-highlighted:text-cyan-900 data-highlighted:before:bg-cyan-100/50 data-[state=open]:text-cyan-900 data-[state=open]:before:bg-cyan-100/50 dark:text-cyan-150 dark:data-highlighted:text-cyan-200 dark:data-highlighted:before:bg-cyan-900 dark:data-[state=open]:text-cyan-200 dark:data-[state=open]:before:bg-cyan-900",
-        "itemLeadingIcon": "text-cyan-500 group-data-highlighted:text-cyan-900 group-data-[state=open]:text-cyan-900 dark:text-cyan-700 dark:group-data-highlighted:text-cyan-150 dark:group-data-[state=open]:text-cyan-150"
-      }
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "active": true,
-      "class": {
-        "item": "text-cyan-900 before:bg-cyan-100/50 dark:text-cyan-200 dark:before:bg-cyan-900",
-        "itemLeadingIcon": "text-cyan-900 group-data-[state=open]:text-cyan-900 dark:text-cyan-700"
-      }
-    },
-    {
-      "color": "collab" as typeof color[number],
+      "color": "default" as typeof color[number],
       "active": false,
-      "class": {
-        "item": "text-collab-900 data-highlighted:text-collab-900 data-highlighted:before:bg-collab-100 data-[state=open]:text-collab-900 data-[state=open]:before:bg-collab-100 dark:text-collab-150 dark:data-highlighted:text-collab-200 dark:data-highlighted:before:bg-collab-900 dark:data-[state=open]:text-collab-200 dark:data-[state=open]:before:bg-collab-900",
-        "itemLeadingIcon": "text-collab-600 group-data-highlighted:text-collab-900 group-data-[state=open]:text-collab-900 dark:text-collab-700 dark:group-data-highlighted:text-collab-150 dark:group-data-[state=open]:text-collab-150"
-      }
+      "class": ""
     },
     {
-      "color": "collab" as typeof color[number],
+      "color": "default" as typeof color[number],
       "active": true,
-      "class": {
-        "item": "text-collab-900 before:bg-collab-100 dark:text-collab-200 dark:before:bg-collab-900",
-        "itemLeadingIcon": "text-collab-900 group-data-[state=open]:text-collab-900 dark:text-collab-700"
-      }
-    },
-    {
-      "color": "ai" as typeof color[number],
+      "class": ""
+    },
+    {
+      "color": [
+        "danger" as typeof color[number],
+        "success" as typeof color[number],
+        "warning" as typeof color[number],
+        "primary" as typeof color[number],
+        "secondary" as typeof color[number],
+        "collab" as typeof color[number],
+        "ai" as typeof color[number]
+      ],
       "active": false,
       "class": {
-        "item": "text-ai-950 data-highlighted:text-ai-900 data-highlighted:before:bg-ai-100/50 data-[state=open]:text-ai-900 data-[state=open]:before:bg-ai-100/50 dark:text-ai-150 dark:data-highlighted:text-ai-200 dark:data-highlighted:before:bg-ai-900 dark:data-[state=open]:text-ai-200 dark:data-[state=open]:before:bg-ai-900",
-        "itemLeadingIcon": "text-ai-500 group-data-highlighted:text-ai-900 group-data-[state=open]:text-ai-900 dark:text-ai-700 dark:group-data-highlighted:text-ai-150 dark:group-data-[state=open]:text-ai-150"
+        "item": "text-(--b24ui-background-active) data-highlighted:text-(--b24ui-background-hover) data-[state=open]:text-(--b24ui-background-hover)",
+        "itemLeadingIcon": "text-(--b24ui-icon) group-data-highlighted:text-(--b24ui-icon) group-data-[state=open]:text-(--b24ui-icon)"
       }
     },
     {
-      "color": "ai" as typeof color[number],
+      "color": [
+        "danger" as typeof color[number],
+        "success" as typeof color[number],
+        "warning" as typeof color[number],
+        "primary" as typeof color[number],
+        "secondary" as typeof color[number],
+        "collab" as typeof color[number],
+        "ai" as typeof color[number]
+      ],
       "active": true,
       "class": {
-        "item": "text-ai-900 before:bg-ai-100/50 dark:text-ai-200 dark:before:bg-ai-900",
-        "itemLeadingIcon": "text-ai-900 group-data-[state=open]:text-ai-900 dark:text-ai-700"
+        "item": "text-(--b24ui-background-active)",
+        "itemLeadingIcon": "text-(--b24ui-background-active) group-data-[state=open]:text-(--b24ui-background-active)"
       }
     }
   ],
-  "defaultVariants": {
-    "size": "md" as typeof size[number]
-  }
+  "defaultVariants": {}
 }

package/.nuxt/b24ui/form-field.ts

@@ -7,47 +7,47 @@ const size = [
 
 export default {
   "slots": {
-    "root": "font-b24-system font-regular",
-    "wrapper": "leading-none",
+    "root": "font-[family-name:var(--ui-font-family-system)] font-(--ui-font-weight-regular)",
+    "wrapper": "leading-(--ui-font-line-height-reset)",
     "labelWrapper": "flex content-center items-center justify-between",
-    "label": "block text-base-900 dark:text-base-400",
-    "hint": "text-base-500 dark:text-base-600",
+    "label": "block text-(--b24ui-typography-label-color)",
+    "hint": "text-(--b24ui-typography-description-color)",
     "container": "relative",
-    "description": "mt-0.5 leading-tight text-base-500 dark:text-base-600",
-    "error": "mt-1 text-red-500 dark:text-red-600",
-    "errorWrapper": "flex flex-row flex-nowrap gap-0.5",
-    "errorIcon": "size-lg",
-    "help": "mt-1.5 leading-tight italic text-base-500 dark:text-base-600"
+    "description": "mt-[2px] leading-(--ui-font-line-height-2xs) text-(--b24ui-typography-description-color)",
+    "error": "mt-[4px] text-(--ui-color-accent-main-alert)",
+    "errorWrapper": "flex flex-row flex-nowrap items-center gap-0.5",
+    "errorIcon": "size-[18px] mt-[2px]",
+    "help": "mt-[6px] leading-(--ui-font-line-height-2xs) italic text-(--b24ui-typography-description-color)"
   },
   "variants": {
     "useDescription": {
       "true": {
-        "wrapper": "mb-1.5"
+        "wrapper": "mb-[6px]"
       },
       "false": {
-        "wrapper": "mb-2.5"
+        "wrapper": "mb-[10px]"
       }
     },
     "size": {
       "xs": {
-        "root": "text-xs",
-        "errorIcon": "size-md"
+        "root": "text-(length:--ui-font-size-xs)",
+        "errorIcon": "size-[16px]"
       },
       "sm": {
-        "root": "text-xs",
-        "errorIcon": "size-md"
+        "root": "text-(length:--ui-font-size-xs)",
+        "errorIcon": "size-[16px]"
       },
       "md": {
-        "root": "text-sm",
-        "errorIcon": "size-md2"
+        "root": "text-(length:--ui-font-size-sm)",
+        "errorIcon": "size-[18px]"
       },
       "lg": {
-        "root": "text-md"
+        "root": "text-(length:--ui-font-size-md)"
       }
     },
     "required": {
       "true": {
-        "label": "after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-600"
+        "label": "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
       }
     }
   },

package/.nuxt/b24ui/index.ts

@@ -44,7 +44,6 @@ export { default as sidebarSection } from './sidebar-section'
 export { default as sidebarSpacer } from './sidebar-spacer'
 export { default as skeleton } from './skeleton'
 export { default as slideover } from './slideover'
-export { default as stackedLayout } from './stacked-layout'
 export { default as switch } from './switch'
 export { default as tabs } from './tabs'
 export { default as textarea } from './textarea'