@crossangle-org/cs-ui 0.1.0 → 0.1.2

package/dist/cs-ui.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
@@ -227,8 +227,13 @@
     --font-letter-spacing-productive: var(--font-letter-spacing-tracking-normal);
     --font-font-weight-heading-bold: var(--font-weight-semibold);
     --font-font-weight-body-normal: var(--font-weight-normal);
+    --font-font-weight-body-bold: var(--font-weight-semibold);
+    --font-font-weight-body-light: var(--font-weight-light);
     --font-font-weight-metric-normal: var(--font-weight-normal);
+    --font-font-weight-metric-light: var(--font-weight-light);
+    --font-font-weight-metric-bold: var(--font-weight-semibold);
     --font-font-weight-productive-normal: var(--font-weight-normal);
+    --font-font-weight-productive-bold: var(--font-weight-semibold);
     --spacing-component-padding-2xl: var(--spacing-8);
     --spacing-component-gap-none: var(--spacing-0);
     --color-progress-track: var(--color-neutral-200);
@@ -424,29 +429,29 @@
     --label-font-disabled: var(--font-color-disabled);
     --dropdown-item-header-font: var(--font-color-primary-default);
     --dropdown-item-common-padding-y: var(--spacing-component-padding-xs);
-    --select-default-common-radius: var(--radius-medium);
-    --select-default-common-padding-x: var(--spacing-component-padding-md);
-    --select-default-common-height: var(--scale-control-lg);
-    --select-default-common-border-width: var(--border-width-thin);
-    --select-default-default-bg: var(--color-bg-surface-default);
-    --select-default-default-border: var(--border-color-default);
-    --select-default-common-gap: var(--spacing-component-padding-xs);
-    --select-default-default-font: var(--font-color-primary-default);
-    --select-default-default-icon: var(--icon-color-onbrand-default);
-    --select-default-hover-bg: var(--color-bg-surface-default);
-    --select-default-hover-border: var(--border-color-surface);
-    --select-default-hover-font: var(--font-color-primary-default);
-    --select-default-hover-icon: var(--icon-color-onbrand-default);
-    --select-default-disabled-bg: var(--color-bg-surface-muted);
-    --select-default-disabled-border: var(--border-color-default);
-    --select-default-disabled-font: var(--icon-color-disabled);
-    --select-default-disabled-icon: var(--icon-color-disabled);
+    --select-base-common-radius: var(--radius-medium);
+    --select-base-common-padding-x: var(--spacing-component-padding-md);
+    --select-base-common-height: var(--scale-control-lg);
+    --select-base-common-border-width: var(--border-width-thin);
+    --select-base-default-bg: var(--color-bg-surface-default);
+    --select-base-default-border: var(--border-color-default);
+    --select-base-common-gap: var(--spacing-component-padding-xs);
+    --select-base-default-font: var(--font-color-primary-default);
+    --select-base-default-icon: var(--icon-color-onbrand-default);
+    --select-base-hover-bg: var(--color-bg-surface-default);
+    --select-base-hover-border: var(--border-color-surface);
+    --select-base-hover-font: var(--font-color-primary-default);
+    --select-base-hover-icon: var(--icon-color-onbrand-default);
+    --select-base-disabled-bg: var(--color-bg-surface-muted);
+    --select-base-disabled-border: var(--border-color-default);
+    --select-base-disabled-font: var(--icon-color-disabled);
+    --select-base-disabled-icon: var(--icon-color-disabled);
     --select-dropdown-radius: var(--radius-medium);
     --select-dropdown-gap: var(--spacing-component-gap-none);
     --select-dropdown-padding-x: var(--spacing-component-padding-xs);
     --select-dropdown-padding-y: var(--spacing-component-padding-xs);
     --select-dropdown-bg: var(--color-bg-surface-default);
-    --select-default-common-icon-size: var(--icon-size-small);
+    --select-base-common-icon-size: var(--icon-size-small);
     --select-dropdown-border: var(--border-color-default);
     --badge-common-radius: var(--radius-max);
     --badge-common-padding-x: var(--spacing-component-padding-sm);
@@ -769,6 +774,7 @@
     --navigation-item-default-icon: var(--icon-color-onbrand-default);
     --navigation-item-hover-bg: var(--color-bg-primary-muted);
     --navigation-item-hover-font: var(--font-color-primary-default);
+    --navigation-item-hover-icon: var(--icon-color-onbrand-default);
     --navigation-item-content-common-radius: var(--radius-medium);
     --navigation-item-content-common-padding-x: var(--spacing-component-padding-md);
     --navigation-item-content-common-padding-y: var(--spacing-component-padding-md);
@@ -864,7 +870,8 @@
     --select-small-common-gap: var(--spacing-component-padding-xs);
     --select-small-common-padding-x: var(--spacing-component-padding-sm);
     --select-small-common-height: var(--scale-control-sm);
-    --breakpoint-max-mobile: 840px;
+    --breakpoint-laptop: 1600px;
+    --breakpoint-mobile: 840px;
   }
 }
 
@@ -1226,6 +1233,10 @@
     z-index: 1;
   }
 
+  .z-\[100\] {
+    z-index: 100;
+  }
+
   .order-first {
     order: -9999;
   }
@@ -1333,6 +1344,10 @@
     display: none;
   }
 
+  .inline {
+    display: inline;
+  }
+
   .inline-flex {
     display: inline-flex;
   }
@@ -1387,9 +1402,9 @@
     height: var(--pagination-common-item-size);
   }
 
-  .size-\(--select-default-common-icon-size\) {
-    width: var(--select-default-common-icon-size);
-    height: var(--select-default-common-icon-size);
+  .size-\(--select-base-common-icon-size\) {
+    width: var(--select-base-common-icon-size);
+    height: var(--select-base-common-icon-size);
   }
 
   .size-\(--toast-common-icon-size\)\! {
@@ -1501,8 +1516,8 @@
     height: var(--scrollbar-horizontal-height);
   }
 
-  .h-\(--select-default-common-height\) {
-    height: var(--select-default-common-height);
+  .h-\(--select-base-common-height\) {
+    height: var(--select-base-common-height);
   }
 
   .h-\(--select-small-common-height\) {
@@ -1537,10 +1552,18 @@
     height: calc(var(--spacing) * 9);
   }
 
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
 
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+
   .h-\[100px\] {
     height: 100px;
   }
@@ -1625,6 +1648,14 @@
     width: calc(var(--spacing) * 6);
   }
 
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -1669,6 +1700,10 @@
     width: calc(2rem + var(--switch-common-padding-x) * 2);
   }
 
+  .w-\[var\(--radix-navigation-menu-viewport-width\)\] {
+    width: var(--radix-navigation-menu-viewport-width);
+  }
+
   .w-auto {
     width: auto;
   }
@@ -1828,6 +1863,10 @@
     grid-auto-rows: min-content;
   }
 
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .grid-cols-10 {
     grid-template-columns: repeat(10, minmax(0, 1fr));
   }
@@ -2028,8 +2067,8 @@
     gap: var(--pagination-common-gap);
   }
 
-  .gap-\(--select-default-common-gap\) {
-    gap: var(--select-default-common-gap);
+  .gap-\(--select-base-common-gap\) {
+    gap: var(--select-base-common-gap);
   }
 
   .gap-\(--select-dropdown-gap\) {
@@ -2268,8 +2307,8 @@
     border-radius: var(--scrollbar-radius);
   }
 
-  .rounded-\(--select-default-common-radius\) {
-    border-radius: var(--select-default-common-radius);
+  .rounded-\(--select-base-common-radius\) {
+    border-radius: var(--select-base-common-radius);
   }
 
   .rounded-\(--select-dropdown-radius\) {
@@ -2432,9 +2471,9 @@
     border-width: var(--popover-outline-border-width);
   }
 
-  .border-\(length\:--select-default-common-border-width\) {
+  .border-\(length\:--select-base-common-border-width\) {
     border-style: var(--tw-border-style);
-    border-width: var(--select-default-common-border-width);
+    border-width: var(--select-base-common-border-width);
   }
 
   .border-\(length\:--table-container-border-width\) {
@@ -2580,8 +2619,8 @@
     border-color: var(--popover-outline-border);
   }
 
-  .border-\(--select-default-default-border\) {
-    border-color: var(--select-default-default-border);
+  .border-\(--select-base-default-border\) {
+    border-color: var(--select-base-default-border);
   }
 
   .border-\(--select-dropdown-border\) {
@@ -2800,8 +2839,8 @@
     background-color: var(--scrollbar-fill);
   }
 
-  .bg-\(--select-default-default-bg\) {
-    background-color: var(--select-default-default-bg);
+  .bg-\(--select-base-default-bg\) {
+    background-color: var(--select-base-default-bg);
   }
 
   .bg-\(--select-dropdown-bg\) {
@@ -2877,6 +2916,10 @@
     padding: calc(var(--spacing) * 0);
   }
 
+  .p-0\! {
+    padding: calc(var(--spacing) * 0) !important;
+  }
+
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -3001,8 +3044,8 @@
     padding-inline: var(--popover-common-padding-x);
   }
 
-  .px-\(--select-default-common-padding-x\) {
-    padding-inline: var(--select-default-common-padding-x);
+  .px-\(--select-base-common-padding-x\) {
+    padding-inline: var(--select-base-common-padding-x);
   }
 
   .px-\(--select-dropdown-padding-x\) {
@@ -3258,6 +3301,13 @@
     letter-spacing: var(--font-letter-spacing-body) !important;
   }
 
+  .typo-body-sm-bold {
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height-body-sm);
+    font-weight: var(--font-font-weight-body-bold);
+    letter-spacing: var(--font-letter-spacing-body);
+  }
+
   .typo-body-xl {
     font-size: var(--font-size-body-xl);
     line-height: var(--line-height-body-xl);
@@ -3272,6 +3322,13 @@
     letter-spacing: var(--font-letter-spacing-body);
   }
 
+  .typo-body-xs-bold {
+    font-size: var(--font-size-body-xs);
+    line-height: var(--line-height-body-xs);
+    font-weight: var(--font-font-weight-body-bold);
+    letter-spacing: var(--font-letter-spacing-body);
+  }
+
   .typo-heading-md {
     font-size: var(--font-size-heading-md);
     line-height: var(--line-height-heading-md);
@@ -3311,6 +3368,20 @@
     letter-spacing: var(--font-letter-spacing-metric);
   }
 
+  .typo-metric-md-light {
+    font-size: var(--font-size-metric-md);
+    line-height: var(--line-height-metric-md);
+    font-weight: var(--font-font-weight-metric-light);
+    letter-spacing: var(--font-letter-spacing-metric);
+  }
+
+  .typo-metric-sm {
+    font-size: var(--font-size-metric-sm);
+    line-height: var(--line-height-metric-sm);
+    font-weight: var(--font-font-weight-metric-normal);
+    letter-spacing: var(--font-letter-spacing-metric);
+  }
+
   .typo-metric-xs {
     font-size: var(--font-size-metric-xs);
     line-height: var(--line-height-metric-xs);
@@ -3328,21 +3399,21 @@
   .typo-productive-code-sm {
     font-size: var(--font-size-productive-code-sm);
     line-height: var(--line-height-productive-code-sm);
-    font-weight: var(--font-weight-productive-normal);
+    font-weight: var(--font-font-weight-productive-normal);
     letter-spacing: var(--font-letter-spacing-productive);
   }
 
   .typo-productive-label-md {
     font-size: var(--font-size-productive-label-md);
     line-height: var(--line-height-productive-label-md);
-    font-weight: var(--font-weight-productive-normal);
+    font-weight: var(--font-font-weight-productive-normal);
     letter-spacing: var(--font-letter-spacing-productive);
   }
 
   .typo-productive-label-sm {
     font-size: var(--font-size-productive-label-sm);
     line-height: var(--line-height-productive-label-sm);
-    font-weight: var(--font-weight-productive-normal);
+    font-weight: var(--font-font-weight-productive-bold);
     letter-spacing: var(--font-letter-spacing-productive);
   }
 
@@ -3376,6 +3447,11 @@
     line-height: var(--leading-tight);
   }
 
+  .font-\(weight\:--font-weight-body-bold\) {
+    --tw-font-weight: var(--font-weight-body-bold);
+    font-weight: var(--font-weight-body-bold);
+  }
+
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -3592,8 +3668,12 @@
     color: var(--pagination-link-default-font);
   }
 
-  .text-\(--select-default-default-font\) {
-    color: var(--select-default-default-font);
+  .text-\(--select-base-default-font\) {
+    color: var(--select-base-default-font);
+  }
+
+  .text-\(--select-base-default-icon\) {
+    color: var(--select-base-default-icon);
   }
 
   .text-\(--spinner-fill-base\) {
@@ -3965,6 +4045,10 @@
     top: 100%;
   }
 
+  .group-data-\[viewport\=false\]\/navigation-menu\:z-\[100\]:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {
+    z-index: 100;
+  }
+
   .group-data-\[viewport\=false\]\/navigation-menu\:mt-1:is(:where(.group\/navigation-menu)[data-viewport="false"] *) {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -4041,8 +4125,8 @@
       border-color: var(--pagination-item-active-hover-border);
     }
 
-    .hover\:border-\(--select-default-hover-border\):hover {
-      border-color: var(--select-default-hover-border);
+    .hover\:border-\(--select-base-hover-border\):hover {
+      border-color: var(--select-base-hover-border);
     }
 
     .hover\:bg-\(--accordion-custom-hover-bg\):hover {
@@ -4121,8 +4205,8 @@
       background-color: var(--pagination-link-hover-bg);
     }
 
-    .hover\:bg-\(--select-default-hover-bg\):hover {
-      background-color: var(--select-default-hover-bg);
+    .hover\:bg-\(--select-base-hover-bg\):hover {
+      background-color: var(--select-base-hover-bg);
     }
 
     .hover\:bg-\(--toggle-outline-hover-bg\):hover {
@@ -4201,8 +4285,8 @@
       color: var(--pagination-link-hover-font);
     }
 
-    .hover\:text-\(--select-default-hover-font\):hover {
-      color: var(--select-default-hover-font);
+    .hover\:text-\(--select-base-hover-font\):hover {
+      color: var(--select-base-hover-font);
     }
 
     .hover\:text-\(--toggle-outline-hover-font\):hover {
@@ -4374,8 +4458,8 @@
     border-color: var(--button-outline-disabled-border);
   }
 
-  .disabled\:border-\(--select-default-disabled-border\):disabled {
-    border-color: var(--select-default-disabled-border);
+  .disabled\:border-\(--select-base-disabled-border\):disabled {
+    border-color: var(--select-base-disabled-border);
   }
 
   .disabled\:bg-\(--button-outline-disabled-bg\):disabled {
@@ -4390,8 +4474,8 @@
     background-color: var(--button-solid-secondary-disabled-bg);
   }
 
-  .disabled\:bg-\(--select-default-disabled-bg\):disabled {
-    background-color: var(--select-default-disabled-bg);
+  .disabled\:bg-\(--select-base-disabled-bg\):disabled {
+    background-color: var(--select-base-disabled-bg);
   }
 
   .disabled\:text-\(--button-ghost-disabled-font\):disabled {
@@ -4430,8 +4514,8 @@
     color: var(--navigation-button-solid-ghost-disabled-font);
   }
 
-  .disabled\:text-\(--select-default-disabled-font\):disabled {
-    color: var(--select-default-disabled-font);
+  .disabled\:text-\(--select-base-disabled-font\):disabled {
+    color: var(--select-base-disabled-font);
   }
 
   .disabled\:opacity-\(--button-common-opacity\):disabled {
@@ -4797,8 +4881,8 @@
     align-items: center;
   }
 
-  :is(.\*\:data-\[slot\=select-value\]\:gap-\(--select-default-common-gap\) > *)[data-slot="select-value"] {
-    gap: var(--select-default-common-gap);
+  :is(.\*\:data-\[slot\=select-value\]\:gap-\(--select-base-common-gap\) > *)[data-slot="select-value"] {
+    gap: var(--select-base-common-gap);
   }
 
   :is(.\*\:data-\[slot\=select-value\]\:gap-\(--select-small-common-gap\) > *)[data-slot="select-value"] {
@@ -5183,6 +5267,82 @@
     border-bottom-width: --drawer-common-border-width;
   }
 
+  @media not all and (min-width: 1600px) {
+    .max-laptop\:gap-4 {
+      gap: calc(var(--spacing) * 4);
+    }
+  }
+
+  @media not all and (min-width: 840px) {
+    .max-mobile\:static {
+      position: static;
+    }
+
+    .max-mobile\:hidden {
+      display: none;
+    }
+
+    .max-mobile\:\!w-full, .max-mobile\:w-full\! {
+      width: 100% !important;
+    }
+
+    .max-mobile\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .max-mobile\:flex-row {
+      flex-direction: row;
+    }
+
+    .max-mobile\:justify-end {
+      justify-content: flex-end;
+    }
+
+    .max-mobile\:gap-\(--box-outline-gap-mobile\) {
+      gap: var(--box-outline-gap-mobile);
+    }
+
+    .max-mobile\:gap-\(--box-solid-gap-mobile\) {
+      gap: var(--box-solid-gap-mobile);
+    }
+
+    .max-mobile\:gap-\(--card-common-gap-mobile\) {
+      gap: var(--card-common-gap-mobile);
+    }
+
+    .max-mobile\:px-\(--box-outline-padding-x-mobile\) {
+      padding-inline: var(--box-outline-padding-x-mobile);
+    }
+
+    .max-mobile\:px-\(--box-solid-padding-x-mobile\) {
+      padding-inline: var(--box-solid-padding-x-mobile);
+    }
+
+    .max-mobile\:px-\(--card-common-padding-x-mobile\) {
+      padding-inline: var(--card-common-padding-x-mobile);
+    }
+
+    .max-mobile\:px-\(--pagination-common-padding-sm\) {
+      padding-inline: var(--pagination-common-padding-sm);
+    }
+
+    .max-mobile\:py-\(--box-outline-padding-y-mobile\) {
+      padding-block: var(--box-outline-padding-y-mobile);
+    }
+
+    .max-mobile\:py-\(--box-solid-padding-y-mobile\) {
+      padding-block: var(--box-solid-padding-y-mobile);
+    }
+
+    .max-mobile\:py-\(--card-common-padding-y-mobile\) {
+      padding-block: var(--card-common-padding-y-mobile);
+    }
+
+    .max-mobile\:text-center {
+      text-align: center;
+    }
+  }
+
   @media (min-width: 40rem) {
     .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"], .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"] {
       max-width: var(--container-sm);
@@ -5346,8 +5506,8 @@
     color: var(--pagination-link-default-icon);
   }
 
-  .\[\&_svg\]\:text-\(--select-default-default-icon\) svg {
-    color: var(--select-default-default-icon);
+  .\[\&_svg\]\:text-\(--select-base-default-icon\) svg {
+    color: var(--select-base-default-icon);
   }
 
   .\[\&_svg\]\:text-\(--table-item-cell-icon\) svg {
@@ -5366,6 +5526,12 @@
     color: var(--toggle-solid-default-icon);
   }
 
+  .\[\&_svg\]\:transition-colors svg {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .\[\&_svg\]\:transition-transform svg {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -5398,22 +5564,6 @@
   }
 
   @media (hover: hover) {
-    .\[\&_svg\]\:hover\:text-\(--navigation-button-bottom-border-hover-icon\) svg:hover {
-      color: var(--navigation-button-bottom-border-hover-icon);
-    }
-
-    .\[\&_svg\]\:hover\:text-\(--navigation-button-solid-ghost-active-icon\) svg:hover {
-      color: var(--navigation-button-solid-ghost-active-icon);
-    }
-
-    .\[\&_svg\]\:hover\:text-\(--navigation-item-content-hover-icon\) svg:hover {
-      color: var(--navigation-item-content-hover-icon);
-    }
-
-    .\[\&_svg\]\:hover\:text-\(--pagination-link-hover-icon\) svg:hover {
-      color: var(--pagination-link-hover-icon);
-    }
-
     .hover\:\[\&_svg\]\:text-\(--button-ghost-hover-icon\):hover svg {
       color: var(--button-ghost-hover-icon);
     }
@@ -5438,8 +5588,28 @@
       color: var(--button-solid-secondary-hover-icon);
     }
 
-    .hover\:\[\&_svg\]\:text-\(--select-default-hover-icon\):hover svg {
-      color: var(--select-default-hover-icon);
+    .hover\:\[\&_svg\]\:text-\(--navigation-button-bottom-border-hover-icon\):hover svg {
+      color: var(--navigation-button-bottom-border-hover-icon);
+    }
+
+    .hover\:\[\&_svg\]\:text-\(--navigation-button-gradient-active-icon\):hover svg {
+      color: var(--navigation-button-gradient-active-icon);
+    }
+
+    .hover\:\[\&_svg\]\:text-\(--navigation-button-solid-ghost-active-icon\):hover svg {
+      color: var(--navigation-button-solid-ghost-active-icon);
+    }
+
+    .hover\:\[\&_svg\]\:text-\(--navigation-item-content-hover-icon\):hover svg {
+      color: var(--navigation-item-content-hover-icon);
+    }
+
+    .hover\:\[\&_svg\]\:text-\(--pagination-link-hover-icon\):hover svg {
+      color: var(--pagination-link-hover-icon);
+    }
+
+    .hover\:\[\&_svg\]\:text-\(--select-base-hover-icon\):hover svg {
+      color: var(--select-base-hover-icon);
     }
 
     .hover\:\[\&_svg\]\:text-\(--toggle-outline-hover-icon\):hover svg {
@@ -5479,18 +5649,6 @@
     }
   }
 
-  .\[\&_svg\]\:disabled\:text-\(--navigation-button-bottom-border-disabled-icon\) svg:disabled {
-    color: var(--navigation-button-bottom-border-disabled-icon);
-  }
-
-  .\[\&_svg\]\:disabled\:text-\(--navigation-button-gradient-disabled-icon\) svg:disabled {
-    color: var(--navigation-button-gradient-disabled-icon);
-  }
-
-  .\[\&_svg\]\:disabled\:text-\(--navigation-button-solid-ghost-disabled-icon\) svg:disabled {
-    color: var(--navigation-button-solid-ghost-disabled-icon);
-  }
-
   .disabled\:\[\&_svg\]\:text-\(--button-ghost-disabled-icon\):disabled svg {
     color: var(--button-ghost-disabled-icon);
   }
@@ -5515,11 +5673,23 @@
     color: var(--button-solid-secondary-disabled-icon);
   }
 
-  .disabled\:\[\&_svg\]\:text-\(--select-default-disabled-icon\):disabled svg {
-    color: var(--select-default-disabled-icon);
+  .disabled\:\[\&_svg\]\:text-\(--navigation-button-bottom-border-disabled-icon\):disabled svg {
+    color: var(--navigation-button-bottom-border-disabled-icon);
+  }
+
+  .disabled\:\[\&_svg\]\:text-\(--navigation-button-gradient-disabled-icon\):disabled svg {
+    color: var(--navigation-button-gradient-disabled-icon);
+  }
+
+  .disabled\:\[\&_svg\]\:text-\(--navigation-button-solid-ghost-disabled-icon\):disabled svg {
+    color: var(--navigation-button-solid-ghost-disabled-icon);
+  }
+
+  .disabled\:\[\&_svg\]\:text-\(--select-base-disabled-icon\):disabled svg {
+    color: var(--select-base-disabled-icon);
   }
 
-  .\[\&_svg\]\:data-\[active\=true\]\:text-\(--navigation-item-content-hover-icon\) svg[data-active="true"] {
+  .data-\[active\=true\]\:\[\&_svg\]\:text-\(--navigation-item-content-hover-icon\)[data-active="true"] svg {
     color: var(--navigation-item-content-hover-icon);
   }
 
@@ -5575,14 +5745,18 @@
     color: var(--toggle-solid-active-icon);
   }
 
-  .\[\&_svg\]\:data-\[state\=open\]\:text-\(--navigation-button-bottom-border-active-icon\) svg[data-state="open"] {
+  .data-\[state\=open\]\:\[\&_svg\]\:text-\(--navigation-button-bottom-border-active-icon\)[data-state="open"] svg {
     color: var(--navigation-button-bottom-border-active-icon);
   }
 
-  .\[\&_svg\]\:data-\[state\=open\]\:text-\(--navigation-button-gradient-active-icon\) svg[data-state="open"] {
+  .data-\[state\=open\]\:\[\&_svg\]\:text-\(--navigation-button-gradient-active-icon\)[data-state="open"] svg {
     color: var(--navigation-button-gradient-active-icon);
   }
 
+  .data-\[state\=open\]\:\[\&_svg\]\:text-\(--navigation-button-solid-ghost-active-icon\)[data-state="open"] svg {
+    color: var(--navigation-button-solid-ghost-active-icon);
+  }
+
   .group-data-\[variant\=custom\]\/accordion\:data-\[state\=open\]\:\[\&_svg\]\:text-\(--accordion-custom-open-icon\):is(:where(.group\/accordion)[data-variant="custom"] *)[data-state="open"] svg {
     color: var(--accordion-custom-open-icon);
   }
@@ -5616,9 +5790,9 @@
     height: var(--navigation-item-content-common-icon-size);
   }
 
-  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--select-default-common-icon-size\) svg:not([class*="size-"]) {
-    width: var(--select-default-common-icon-size);
-    height: var(--select-default-common-icon-size);
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--select-base-common-icon-size\) svg:not([class*="size-"]) {
+    width: var(--select-base-common-icon-size);
+    height: var(--select-base-common-icon-size);
   }
 
   .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--toggle-common-icon-size\) svg:not([class*="size-"]) {
@@ -5654,6 +5828,16 @@
     color: var(--navigation-item-default-icon);
   }
 
+  @media (hover: hover) {
+    .hover\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-\(--navigation-item-hover-icon\):hover svg:not([class*="text-"]) {
+      color: var(--navigation-item-hover-icon);
+    }
+  }
+
+  .data-\[active\=true\]\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-\(--navigation-item-hover-icon\)[data-active="true"] svg:not([class*="text-"]) {
+    color: var(--navigation-item-hover-icon);
+  }
+
   .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected="true"] button {
     border-top-left-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);