@accelint/design-toolkit 2.5.0 → 3.0.0

package/dist/styles.css

@@ -406,9 +406,6 @@
   .top-\[var\(--classification-banner-height\)\] {
     top: var(--classification-banner-height);
   }
-  .right-xs {
-    right: var(--spacing-xs);
-  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -514,9 +511,15 @@
       max-width: 96rem;
     }
   }
+  .m-xl {
+    margin: var(--spacing-xl);
+  }
   .m-xs {
     margin: var(--spacing-xs);
   }
+  .-mx-xs {
+    margin-inline: calc(var(--spacing-xs) * -1);
+  }
   .my-s {
     margin-block: var(--spacing-s);
   }
@@ -526,9 +529,6 @@
   .mt-l {
     margin-top: var(--spacing-l);
   }
-  .mt-m {
-    margin-top: var(--spacing-m);
-  }
   .mt-oversized {
     margin-top: var(--spacing-oversized);
   }
@@ -550,6 +550,9 @@
   .mb-xs {
     margin-bottom: var(--spacing-xs);
   }
+  .-ml-s {
+    margin-left: calc(var(--spacing-s) * -1);
+  }
   .block {
     display: block;
   }
@@ -620,9 +623,6 @@
   .h-\[90px\] {
     height: 90px;
   }
-  .h-\[300px\] {
-    height: 300px;
-  }
   .h-\[600px\] {
     height: 600px;
   }
@@ -641,6 +641,9 @@
   .h-m {
     height: var(--spacing-m);
   }
+  .h-oversized {
+    height: var(--spacing-oversized);
+  }
   .h-s {
     height: var(--spacing-s);
   }
@@ -665,12 +668,6 @@
   .min-h-\[1lh\] {
     min-height: 1lh;
   }
-  .w-\(--trigger-width\) {
-    width: var(--trigger-width);
-  }
-  .w-\(--trigger-width\) {
-    width: var(--trigger-width);
-  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -773,6 +770,9 @@
   .w-content {
     width: fit-content;
   }
+  .w-dvh {
+    width: 100dvh;
+  }
   .w-fit {
     width: fit-content;
   }
@@ -800,6 +800,9 @@
   .max-w-\[720px\] {
     max-width: 720px;
   }
+  .min-w-\(--trigger-width\) {
+    min-width: var(--trigger-width);
+  }
   .min-w-0 {
     min-width: var(--spacing-0);
   }
@@ -809,9 +812,15 @@
   .min-w-\[320px\] {
     min-width: 320px;
   }
+  .min-w-\[calc\(var\(--trigger-width\)\+\(var\(--spacing-s\)\*2\)\)\] {
+    min-width: calc(var(--trigger-width) + (var(--spacing-s) * 2));
+  }
   .min-w-sm {
     min-width: var(--container-sm);
   }
+  .min-w-xl {
+    min-width: var(--spacing-xl);
+  }
   .flex-1 {
     flex: 1;
   }
@@ -840,9 +849,6 @@
     --tw-translate-y: 50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .rotate-180 {
-    rotate: 180deg;
-  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -918,12 +924,12 @@
   .flex-row {
     flex-direction: row;
   }
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
-  .items-baseline {
-    align-items: baseline;
-  }
   .items-center {
     align-items: center;
   }
@@ -933,12 +939,6 @@
   .items-start {
     align-items: flex-start;
   }
-  .items-stretch {
-    align-items: stretch;
-  }
-  .justify-around {
-    justify-content: space-around;
-  }
   .justify-between {
     justify-content: space-between;
   }
@@ -948,9 +948,6 @@
   .justify-end {
     justify-content: flex-end;
   }
-  .justify-evenly {
-    justify-content: space-evenly;
-  }
   .justify-start {
     justify-content: flex-start;
   }
@@ -1080,6 +1077,14 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-b-\[3px\] {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 3px;
+  }
+  .border-dotted {
+    --tw-border-style: dotted;
+    border-style: dotted;
+  }
   .border-\[\#E8178A\] {
     border-color: #E8178A;
   }
@@ -1125,6 +1130,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-b-default-dark {
+    border-bottom-color: var(--color-default-dark);
+  }
   .bg-\[\#E8178A\]\/40 {
     background-color: color-mix(in oklab, #E8178A 40%, transparent);
   }
@@ -1278,8 +1286,8 @@
   .object-center {
     object-position: center;
   }
-  .p-0 {
-    padding: var(--spacing-0);
+  .\!p-xs {
+    padding: var(--spacing-xs) !important;
   }
   .p-l {
     padding: var(--spacing-l);
@@ -1293,9 +1301,15 @@
   .p-xl {
     padding: var(--spacing-xl);
   }
+  .p-xs {
+    padding: var(--spacing-xs);
+  }
   .p-xxs {
     padding: var(--spacing-xxs);
   }
+  .px-0 {
+    padding-inline: var(--spacing-0);
+  }
   .px-l {
     padding-inline: var(--spacing-l);
   }
@@ -1320,9 +1334,6 @@
   .pt-xs {
     padding-top: var(--spacing-xs);
   }
-  .pr-\[32px\] {
-    padding-right: 32px;
-  }
   .pr-\[calc\(var\(--room\)\+var\(--spacing-s\)\)\] {
     padding-right: calc(var(--room) + var(--spacing-s));
   }
@@ -1537,9 +1548,6 @@
   .text-default-light {
     color: var(--color-default-light);
   }
-  .text-disabled {
-    color: var(--color-disabled);
-  }
   .text-highlight {
     color: var(--color-highlight);
   }
@@ -1610,9 +1618,6 @@
   .outline-interactive {
     outline-color: var(--color-interactive);
   }
-  .outline-interactive-disabled {
-    outline-color: var(--color-interactive-disabled);
-  }
   .outline-normal {
     outline-color: var(--color-normal);
   }
@@ -1665,9 +1670,6 @@
   .\[--drawer-menu-size\:40px\] {
     --drawer-menu-size: 40px;
   }
-  .\[--drawer-size-closed\:0\] {
-    --drawer-size-closed: 0;
-  }
   .\[--drawer-size-large\:400px\] {
     --drawer-size-large: 400px;
   }
@@ -1725,9 +1727,11 @@
   .text-shadow-2xs {
     text-shadow: 0px 1px 0px var(--tw-text-shadow-color, rgb(0 0 0 / 0.15));
   }
-  .group-not-focus-within\/input\:hidden {
-    &:is(:where(.group\/input):not(*:where([data-focus-within], :focus-within)) *) {
-      display: none;
+  .group-not-empty\/input\:group-not-focus-within\/input\:invisible {
+    &:is(:where(.group\/input):not(*:where([data-empty], :empty)) *) {
+      &:is(:where(.group\/input):not(*:where([data-focus-within], :focus-within)) *) {
+        visibility: hidden;
+      }
     }
   }
   .group-not-has-\[\>_\[slot\=description\]\]\/menu-item\:row-span-full {
@@ -1735,6 +1739,16 @@
       grid-row: 1 / -1;
     }
   }
+  .group-open\/combobox-field\:rotate-180 {
+    &:is(:where(.group\/combobox-field):where([open], [data-open], :open) *) {
+      rotate: 180deg;
+    }
+  }
+  .group-open\/combobox-field\:transform {
+    &:is(:where(.group\/combobox-field):where([open], [data-open], :open) *) {
+      transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+    }
+  }
   .group-open\/drawer\:flex {
     &:is(:where(.group\/drawer):where([open], [data-open], :open) *) {
       display: flex;
@@ -1745,6 +1759,16 @@
       rotate: 180deg;
     }
   }
+  .group-open\/select-field\:rotate-180 {
+    &:is(:where(.group\/select-field):where([open], [data-open], :open) *) {
+      rotate: 180deg;
+    }
+  }
+  .group-empty\/input\:invisible {
+    &:is(:where(.group\/input):where([data-empty], :empty) *) {
+      visibility: hidden;
+    }
+  }
   .group-empty\/search-field\:invisible {
     &:is(:where(.group\/search-field):where([data-empty], :empty) *) {
       visibility: hidden;
@@ -1756,8 +1780,8 @@
       --icon-color: var(--color-inverse-light);
     }
   }
-  .group-focus\/menu-item\:fg-inverse-light {
-    &:is(:where(.group\/menu-item):where([data-focused], :focus) *) {
+  .group-focus-visible\/menu-item\:fg-inverse-light {
+    &:is(:where(.group\/menu-item):where([data-focus-visible], :focus-visible) *) {
       color: var(--color-inverse-light);
       --icon-color: var(--color-inverse-light);
     }
@@ -1798,22 +1822,40 @@
       }
     }
   }
-  .group-enabled\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
+  .group-enabled\/checkbox\:group-focus-visible\/checkbox\:outline-interactive-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/checkbox):where([data-focused], :focus) *) {
+      &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
         outline-color: var(--color-interactive-hover);
       }
     }
   }
-  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
+  .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-focus-visible\/checkbox\:outline-interactive-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
-        &:is(:where(.group\/checkbox):where([data-focused], :focus) *) {
+        &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
     }
   }
+  .group-enabled\/combobox-field\:fg-default-light {
+    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      color: var(--color-default-light);
+      --icon-color: var(--color-default-light);
+    }
+  }
+  .group-enabled\/combobox-field\:outline-interactive {
+    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      outline-color: var(--color-interactive);
+    }
+  }
+  .group-enabled\/combobox-field\:group-invalid\/combobox-field\:outline-serious {
+    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/combobox-field):where([invalid], [data-invalid], :invalid) *) {
+        outline-color: var(--color-serious);
+      }
+    }
+  }
   .group-enabled\/options-item\:fg-default-dark {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       color: var(--color-default-dark);
@@ -1828,9 +1870,9 @@
       }
     }
   }
-  .group-enabled\/options-item\:group-focus\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-focus-visible\/options-item\:fg-inverse-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/options-item):where([data-focused], :focus) *) {
+      &:is(:where(.group\/options-item):where([data-focus-visible], :focus-visible) *) {
         color: var(--color-inverse-light);
         --icon-color: var(--color-inverse-light);
       }
@@ -1843,9 +1885,9 @@
       }
     }
   }
-  .group-enabled\/radio\:group-focus\/radio\:outline-interactive-hover {
+  .group-enabled\/radio\:group-focus-visible\/radio\:outline-interactive-hover {
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/radio):where([data-focused], :focus) *) {
+      &:is(:where(.group\/radio):where([data-focus-visible], :focus-visible) *) {
         outline-color: var(--color-interactive-hover);
       }
     }
@@ -1864,16 +1906,16 @@
       }
     }
   }
-  .group-enabled\/switch\:group-focus\/switch\:bg-interactive-hover-dark {
+  .group-enabled\/switch\:group-focus-visible\/switch\:bg-interactive-hover-dark {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+      &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
         background-color: var(--color-interactive-hover-dark);
       }
     }
   }
-  .group-enabled\/switch\:group-focus\/switch\:outline-interactive-hover {
+  .group-enabled\/switch\:group-focus-visible\/switch\:outline-interactive-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+      &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
         outline-color: var(--color-interactive-hover);
       }
     }
@@ -1921,6 +1963,17 @@
       }
     }
   }
+  .group-disabled\/combobox-field\:fg-disabled {
+    &:is(:where(.group\/combobox-field):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
+  .group-disabled\/combobox-field\:outline-interactive-disabled {
+    &:is(:where(.group\/combobox-field):where([disabled], [data-disabled], :disabled) *) {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
   .group-disabled\/date-field\:fg-disabled {
     &:is(:where(.group\/date-field):where([disabled], [data-disabled], :disabled) *) {
       color: var(--color-disabled);
@@ -1959,6 +2012,12 @@
       visibility: hidden;
     }
   }
+  .group-disabled\/select-field\:fg-disabled {
+    &:is(:where(.group\/select-field):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
   .group-disabled\/switch\:bg-interactive-disabled {
     &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
       background-color: var(--color-interactive-disabled);
@@ -1998,7 +2057,7 @@
   }
   .group-enabled\/options-item\:group-color-info\/options-item\:fg-default-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/options-item):where([data-color~="info"]) *) {
+      &:is(:where(.group\/options-item):where([data-color="info"]) *) {
         color: var(--color-default-light);
         --icon-color: var(--color-default-light);
       }
@@ -2007,17 +2066,17 @@
   .group-enabled\/options-item\:group-hover\/options-item\:group-color-info\/options-item\:fg-inverse-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-hovered], :hover) *) {
-        &:is(:where(.group\/options-item):where([data-color~="info"]) *) {
+        &:is(:where(.group\/options-item):where([data-color="info"]) *) {
           color: var(--color-inverse-light);
           --icon-color: var(--color-inverse-light);
         }
       }
     }
   }
-  .group-enabled\/options-item\:group-focus\/options-item\:group-color-info\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-focus-visible\/options-item\:group-color-info\/options-item\:fg-inverse-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/options-item):where([data-focused], :focus) *) {
-        &:is(:where(.group\/options-item):where([data-color~="info"]) *) {
+      &:is(:where(.group\/options-item):where([data-focus-visible], :focus-visible) *) {
+        &:is(:where(.group\/options-item):where([data-color="info"]) *) {
           color: var(--color-inverse-light);
           --icon-color: var(--color-inverse-light);
         }
@@ -2026,7 +2085,7 @@
   }
   .group-enabled\/options-item\:group-color-serious\/options-item\:fg-serious {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/options-item):where([data-color~="serious"]) *) {
+      &:is(:where(.group\/options-item):where([data-color="serious"]) *) {
         color: var(--color-serious);
         --icon-color: var(--color-serious);
       }
@@ -2035,17 +2094,17 @@
   .group-enabled\/options-item\:group-hover\/options-item\:group-color-serious\/options-item\:fg-inverse-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/options-item):where([data-hovered], :hover) *) {
-        &:is(:where(.group\/options-item):where([data-color~="serious"]) *) {
+        &:is(:where(.group\/options-item):where([data-color="serious"]) *) {
           color: var(--color-inverse-light);
           --icon-color: var(--color-inverse-light);
         }
       }
     }
   }
-  .group-enabled\/options-item\:group-focus\/options-item\:group-color-serious\/options-item\:fg-inverse-light {
+  .group-enabled\/options-item\:group-focus-visible\/options-item\:group-color-serious\/options-item\:fg-inverse-light {
     &:is(:where(.group\/options-item):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/options-item):where([data-focused], :focus) *) {
-        &:is(:where(.group\/options-item):where([data-color~="serious"]) *) {
+      &:is(:where(.group\/options-item):where([data-focus-visible], :focus-visible) *) {
+        &:is(:where(.group\/options-item):where([data-color="serious"]) *) {
           color: var(--color-inverse-light);
           --icon-color: var(--color-inverse-light);
         }
@@ -2152,12 +2211,6 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .group-placement-right\/drawer\:-translate-y-1\/8 {
-    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
-      --tw-translate-y: calc(calc(1/8 * 100%) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .group-placement-right\/drawer\:-translate-y-7\/8 {
     &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
       --tw-translate-y: calc(calc(7/8 * 100%) * -1);
@@ -2333,6 +2386,48 @@
       border-bottom-left-radius: var(--radius-none);
     }
   }
+  .group-placement-left\/drawer\:group-size-large\/drawer\:w-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        width: var(--drawer-size-large);
+      }
+    }
+  }
+  .group-placement-left\/drawer\:group-size-large\/drawer\:w-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        width: var(--drawer-size-large);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-large\/drawer\:w-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        width: var(--drawer-size-large);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-large\/drawer\:w-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        width: var(--drawer-size-large);
+      }
+    }
+  }
+  .group-placement-top\/drawer\:group-size-large\/drawer\:h-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        height: var(--drawer-size-large);
+      }
+    }
+  }
+  .group-placement-bottom\/drawer\:group-size-large\/drawer\:h-\[var\(--drawer-size-large\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="large"]) *) {
+        height: var(--drawer-size-large);
+      }
+    }
+  }
   .group-size-large\/options\:pt-s {
     &:is(:where(.group\/options):where([data-size="large"]) *) {
       padding-top: var(--spacing-s);
@@ -2343,6 +2438,66 @@
       padding-bottom: var(--spacing-s);
     }
   }
+  .group-size-medium\/combobox-field\:max-w-\[400px\] {
+    &:is(:where(.group\/combobox-field):where([data-size="medium"]) *) {
+      max-width: 400px;
+    }
+  }
+  .group-size-medium\/combobox-field\:min-w-\[160px\] {
+    &:is(:where(.group\/combobox-field):where([data-size="medium"]) *) {
+      min-width: 160px;
+    }
+  }
+  .group-size-medium\/combobox-field\:text-body-s {
+    &:is(:where(.group\/combobox-field):where([data-size="medium"]) *) {
+      font-size: var(--typography-body-s-size);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-s-spacing);
+      line-height: var(--typography-body-s-height);
+    }
+  }
+  .group-placement-left\/drawer\:group-size-medium\/drawer\:w-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        width: var(--drawer-size-medium);
+      }
+    }
+  }
+  .group-placement-left\/drawer\:group-size-medium\/drawer\:w-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        width: var(--drawer-size-medium);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-medium\/drawer\:w-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        width: var(--drawer-size-medium);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-medium\/drawer\:w-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        width: var(--drawer-size-medium);
+      }
+    }
+  }
+  .group-placement-top\/drawer\:group-size-medium\/drawer\:h-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        height: var(--drawer-size-medium);
+      }
+    }
+  }
+  .group-placement-bottom\/drawer\:group-size-medium\/drawer\:h-\[var\(--drawer-size-medium\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="medium"]) *) {
+        height: var(--drawer-size-medium);
+      }
+    }
+  }
   .group-size-medium\/input\:mr-xs {
     &:is(:where(.group\/input):where([data-size="medium"]) *) {
       margin-right: var(--spacing-xs);
@@ -2363,11 +2518,6 @@
       max-width: 400px;
     }
   }
-  .group-size-medium\/input\:min-w-\[80px\] {
-    &:is(:where(.group\/input):where([data-size="medium"]) *) {
-      min-width: 80px;
-    }
-  }
   .group-size-medium\/input\:min-w-\[160px\] {
     &:is(:where(.group\/input):where([data-size="medium"]) *) {
       min-width: 160px;
@@ -2381,6 +2531,24 @@
       line-height: var(--typography-body-s-height);
     }
   }
+  .group-size-medium\/select-field\:min-w-\[220px\] {
+    &:is(:where(.group\/select-field):where([data-size="medium"]) *) {
+      min-width: 220px;
+    }
+  }
+  .group-size-medium\/select-field\:gap-s {
+    &:is(:where(.group\/select-field):where([data-size="medium"]) *) {
+      gap: var(--spacing-s);
+    }
+  }
+  .group-size-medium\/select-field\:text-body-s {
+    &:is(:where(.group\/select-field):where([data-size="medium"]) *) {
+      font-size: var(--typography-body-s-size);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-s-spacing);
+      line-height: var(--typography-body-s-height);
+    }
+  }
   .group-size-medium\/text-area-field\:text-body-s {
     &:is(:where(.group\/text-area-field):where([data-size="medium"]) *) {
       font-size: var(--typography-body-s-size);
@@ -2389,6 +2557,66 @@
       line-height: var(--typography-body-s-height);
     }
   }
+  .group-size-small\/combobox-field\:max-w-\[200px\] {
+    &:is(:where(.group\/combobox-field):where([data-size="small"]) *) {
+      max-width: 200px;
+    }
+  }
+  .group-size-small\/combobox-field\:min-w-\[80px\] {
+    &:is(:where(.group\/combobox-field):where([data-size="small"]) *) {
+      min-width: 80px;
+    }
+  }
+  .group-size-small\/combobox-field\:text-body-xs {
+    &:is(:where(.group\/combobox-field):where([data-size="small"]) *) {
+      font-size: var(--typography-body-xs-size);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-xs-spacing);
+      line-height: var(--typography-body-xs-height);
+    }
+  }
+  .group-placement-left\/drawer\:group-size-small\/drawer\:w-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        width: var(--drawer-size-small);
+      }
+    }
+  }
+  .group-placement-left\/drawer\:group-size-small\/drawer\:w-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="left"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        width: var(--drawer-size-small);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-small\/drawer\:w-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        width: var(--drawer-size-small);
+      }
+    }
+  }
+  .group-placement-right\/drawer\:group-size-small\/drawer\:w-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="right"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        width: var(--drawer-size-small);
+      }
+    }
+  }
+  .group-placement-top\/drawer\:group-size-small\/drawer\:h-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="top"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        height: var(--drawer-size-small);
+      }
+    }
+  }
+  .group-placement-bottom\/drawer\:group-size-small\/drawer\:h-\[var\(--drawer-size-small\)\] {
+    &:is(:where(.group\/drawer):where([data-placement~="bottom"]) *) {
+      &:is(:where(.group\/drawer):where([data-size="small"]) *) {
+        height: var(--drawer-size-small);
+      }
+    }
+  }
   .group-size-small\/input\:mr-xxs {
     &:is(:where(.group\/input):where([data-size="small"]) *) {
       margin-right: var(--spacing-xxs);
@@ -2409,6 +2637,11 @@
       max-width: 200px;
     }
   }
+  .group-size-small\/input\:min-w-\[80px\] {
+    &:is(:where(.group\/input):where([data-size="small"]) *) {
+      min-width: 80px;
+    }
+  }
   .group-size-small\/input\:min-w-\[calc\(2ch\+\(\(var\(--length\)-1\)\*var\(--typography-body-xs-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
     &:is(:where(.group\/input):where([data-size="small"]) *) {
       min-width: calc(2ch + ((var(--length) - 1) * var(--typography-body-xs-spacing)) + (var(--spacing-s) * 2) + var(--room));
@@ -2432,6 +2665,19 @@
       padding-bottom: var(--spacing-xs);
     }
   }
+  .group-size-small\/select-field\:gap-xs {
+    &:is(:where(.group\/select-field):where([data-size="small"]) *) {
+      gap: var(--spacing-xs);
+    }
+  }
+  .group-size-small\/select-field\:text-body-xs {
+    &:is(:where(.group\/select-field):where([data-size="small"]) *) {
+      font-size: var(--typography-body-xs-size);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-xs-spacing);
+      line-height: var(--typography-body-xs-height);
+    }
+  }
   .group-size-small\/text-area-field\:text-body-xs {
     &:is(:where(.group\/text-area-field):where([data-size="small"]) *) {
       font-size: var(--typography-body-xs-size);
@@ -2588,10 +2834,10 @@
       }
     }
   }
-  .group-enabled\/checkbox\:group-selected\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
+  .group-enabled\/checkbox\:group-selected\/checkbox\:group-focus-visible\/checkbox\:outline-interactive-hover {
     &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
-        &:is(:where(.group\/checkbox):where([data-focused], :focus) *) {
+        &:is(:where(.group\/checkbox):where([data-focus-visible], :focus-visible) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
@@ -2628,10 +2874,10 @@
       }
     }
   }
-  .group-enabled\/radio\:group-selected\/radio\:group-focus\/radio\:outline-interactive-hover {
+  .group-enabled\/radio\:group-selected\/radio\:group-focus-visible\/radio\:outline-interactive-hover {
     &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/radio):where([data-selected], :checked) *) {
-        &:is(:where(.group\/radio):where([data-focused], :focus) *) {
+        &:is(:where(.group\/radio):where([data-focus-visible], :focus-visible) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
@@ -2662,19 +2908,19 @@
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-focus\/switch\:bg-highlight-subtle {
+  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:bg-highlight-subtle {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
-        &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+        &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
           background-color: var(--color-highlight-subtle);
         }
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-focus\/switch\:outline-interactive-hover {
+  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:outline-interactive-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
-        &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+        &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
@@ -2685,9 +2931,12 @@
       color: var(--color-default-dark);
     }
   }
-  .placeholder\:text-disabled {
-    &::placeholder {
-      color: var(--color-disabled);
+  .group-enabled\/combobox-field\:placeholder\:fg-default-dark {
+    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &::placeholder {
+        color: var(--color-default-dark);
+        --icon-color: var(--color-default-dark);
+      }
     }
   }
   .group-disabled\/text-area-field\:placeholder\:text-disabled {
@@ -2745,9 +2994,9 @@
       }
     }
   }
-  .group-enabled\/switch\:group-focus\/switch\:before\:bg-interactive-hover {
+  .group-enabled\/switch\:group-focus-visible\/switch\:before\:bg-interactive-hover {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+      &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
         &::before {
           content: var(--tw-content);
           background-color: var(--color-interactive-hover);
@@ -2821,10 +3070,10 @@
       }
     }
   }
-  .group-enabled\/switch\:group-selected\/switch\:group-focus\/switch\:before\:bg-highlight {
+  .group-enabled\/switch\:group-selected\/switch\:group-focus-visible\/switch\:before\:bg-highlight {
     &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:is(:where(.group\/switch):where([data-selected], :checked) *) {
-        &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+        &:is(:where(.group\/switch):where([data-focus-visible], :focus-visible) *) {
           &::before {
             content: var(--tw-content);
             background-color: var(--color-highlight);
@@ -2833,55 +3082,11 @@
       }
     }
   }
-  .open\:bg-highlight-bold {
-    &:where([open], [data-open], :open) {
-      background-color: var(--color-highlight-bold);
-    }
-  }
-  .open\:bg-serious-bold {
-    &:where([open], [data-open], :open) {
-      background-color: var(--color-serious-bold);
-    }
-  }
-  .open\:fg-inverse-light {
-    &:where([open], [data-open], :open) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
-    }
-  }
   .invalid\:outline-serious {
     &:where([invalid], [data-invalid], :invalid) {
       outline-color: var(--color-serious);
     }
   }
-  .not-disabled\:read-only\:rounded-none {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        border-radius: 0;
-      }
-    }
-  }
-  .not-disabled\:read-only\:rounded-none {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        border-radius: var(--radius-none);
-      }
-    }
-  }
-  .not-disabled\:read-only\:p-0 {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        padding: var(--spacing-0);
-      }
-    }
-  }
-  .not-disabled\:read-only\:outline-transparent {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        outline-color: transparent;
-      }
-    }
-  }
   .empty\:hidden {
     &:where([data-empty], :empty) {
       display: none;
@@ -2898,33 +3103,11 @@
       padding-inline: var(--spacing-none);
     }
   }
-  .focus-within\:outline-highlight {
-    &:where([data-focus-within], :focus-within) {
-      outline-color: var(--color-highlight);
-    }
-  }
-  .group-enabled\/accordion\:focus-within\:bg-interactive-hover-dark {
-    &:is(:where(.group\/accordion):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:where([data-focus-within], :focus-within) {
-        background-color: var(--color-interactive-hover-dark);
-      }
-    }
-  }
   .hover\:\!bg-transparent {
     &:where([data-hovered], :hover) {
       background-color: transparent !important;
     }
   }
-  .hover\:bg-highlight-bold {
-    &:where([data-hovered], :hover) {
-      background-color: var(--color-highlight-bold);
-    }
-  }
-  .hover\:bg-serious-bold {
-    &:where([data-hovered], :hover) {
-      background-color: var(--color-serious-bold);
-    }
-  }
   .hover\:fg-default-light {
     &:where([data-hovered], :hover) {
       color: var(--color-default-light);
@@ -2937,12 +3120,6 @@
       --icon-color: var(--color-interactive-hover);
     }
   }
-  .hover\:fg-inverse-light {
-    &:where([data-hovered], :hover) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
-    }
-  }
   .hover\:outline-4 {
     &:where([data-hovered], :hover) {
       outline-style: var(--tw-outline-style);
@@ -2961,144 +3138,76 @@
       }
     }
   }
-  .group-enabled\/text-area-field\:hover\:outline-interactive-hover {
-    &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+  .group-enabled\/combobox-field\:hover\:outline-interactive-hover {
+    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
       &:where([data-hovered], :hover) {
         outline-color: var(--color-interactive-hover);
       }
     }
   }
-  .not-disabled\:read-only\:hover\:outline-transparent {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        &:where([data-hovered], :hover) {
-          outline-color: transparent;
-        }
+  .group-enabled\/text-area-field\:hover\:outline-interactive-hover {
+    &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:where([data-hovered], :hover) {
+        outline-color: var(--color-interactive-hover);
       }
     }
   }
-  .focus\:bg-highlight {
+  .focus\:fg-default-light {
     &:where([data-focused], :focus) {
+      color: var(--color-default-light);
+      --icon-color: var(--color-default-light);
+    }
+  }
+  .focus-visible\:bg-highlight {
+    &:where([data-focus-visible], :focus-visible) {
       background-color: var(--color-highlight);
     }
   }
-  .focus\:bg-highlight-bold {
-    &:where([data-focused], :focus) {
-      background-color: var(--color-highlight-bold);
+  .focus-visible\:fg-interactive-hover {
+    &:where([data-focus-visible], :focus-visible) {
+      color: var(--color-interactive-hover);
+      --icon-color: var(--color-interactive-hover);
     }
   }
-  .focus\:bg-serious-bold {
-    &:where([data-focused], :focus) {
-      background-color: var(--color-serious-bold);
+  .focus-visible\:text-inverse-light {
+    &:where([data-focus-visible], :focus-visible) {
+      color: var(--color-inverse-light);
     }
   }
-  .focus\:fg-default-light {
-    &:where([data-focused], :focus) {
-      color: var(--color-default-light);
-      --icon-color: var(--color-default-light);
-    }
-  }
-  .focus\:fg-interactive-hover {
-    &:where([data-focused], :focus) {
-      color: var(--color-interactive-hover);
-      --icon-color: var(--color-interactive-hover);
-    }
-  }
-  .focus\:fg-inverse-light {
-    &:where([data-focused], :focus) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
-    }
-  }
-  .focus\:text-inverse-light {
-    &:where([data-focused], :focus) {
-      color: var(--color-inverse-light);
-    }
-  }
-  .focus\:outline-4 {
-    &:where([data-focused], :focus) {
+  .focus-visible\:outline-4 {
+    &:where([data-focus-visible], :focus-visible) {
       outline-style: var(--tw-outline-style);
       outline-width: 4px;
     }
   }
-  .focus\:outline-highlight {
-    &:where([data-focused], :focus) {
-      outline-color: var(--color-highlight);
-    }
-  }
-  .focus\:outline-interactive-hover {
-    &:where([data-focused], :focus) {
+  .focus-visible\:outline-interactive-hover {
+    &:where([data-focus-visible], :focus-visible) {
       outline-color: var(--color-interactive-hover);
     }
   }
-  .focus\:outline-none {
-    &:where([data-focused], :focus) {
+  .focus-visible\:outline-none {
+    &:where([data-focus-visible], :focus-visible) {
       --tw-outline-style: none;
       outline-style: none;
     }
   }
-  .group-enabled\/text-area-field\:focus\:outline-highlight {
+  .group-enabled\/text-area-field\:focus-visible\:outline-highlight {
     &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:where([data-focused], :focus) {
+      &:where([data-focus-visible], :focus-visible) {
         outline-color: var(--color-highlight);
       }
     }
   }
-  .not-disabled\:read-only\:focus\:outline-transparent {
-    &:not(*:where([disabled], [data-disabled], :disabled)) {
-      &:where([readonly], [data-readonly], :read-only) {
-        &:where([data-focused], :focus) {
-          outline-color: transparent;
-        }
-      }
-    }
-  }
   .enabled\:cursor-pointer {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       cursor: pointer;
     }
   }
-  .enabled\:bg-critical {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-critical);
-    }
-  }
-  .enabled\:bg-critical-subtle {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-critical-subtle);
-    }
-  }
-  .enabled\:bg-interactive-default {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-interactive-default);
-    }
-  }
-  .enabled\:bg-serious {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-serious);
-    }
-  }
-  .enabled\:bg-serious-subtle {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-serious-subtle);
-    }
-  }
-  .enabled\:bg-surface-default {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      background-color: var(--color-surface-default);
-    }
-  }
   .enabled\:bg-transparent {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       background-color: transparent;
     }
   }
-  .enabled\:fg-critical {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      color: var(--color-critical);
-      --icon-color: var(--color-critical);
-    }
-  }
   .enabled\:fg-default-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       color: var(--color-default-light);
@@ -3111,33 +3220,6 @@
       --icon-color: var(--color-interactive);
     }
   }
-  .enabled\:fg-inverse-light {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
-    }
-  }
-  .enabled\:fg-serious {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      color: var(--color-serious);
-      --icon-color: var(--color-serious);
-    }
-  }
-  .enabled\:outline-critical {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      outline-color: var(--color-critical);
-    }
-  }
-  .enabled\:outline-interactive {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      outline-color: var(--color-interactive);
-    }
-  }
-  .enabled\:outline-serious {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      outline-color: var(--color-serious);
-    }
-  }
   .enabled\:group-invalid\/input\:outline-serious {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:is(:where(.group\/input):where([invalid], [data-invalid], :invalid) *) {
@@ -3145,45 +3227,31 @@
       }
     }
   }
-  .enabled\:group-hover\/input\:outline-interactive-hover {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:is(:where(.group\/input):where([data-hovered], :hover) *) {
-        outline-color: var(--color-interactive-hover);
-      }
-    }
-  }
-  .enabled\:group-focus\/input\:outline-highlight {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:is(:where(.group\/input):where([data-focused], :focus) *) {
-        outline-color: var(--color-highlight);
-      }
-    }
-  }
-  .enabled\:hover\:bg-critical-hover {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-hovered], :hover) {
-        background-color: var(--color-critical-hover);
+  .group-invalid\/select-field\:enabled\:outline-serious {
+    &:is(:where(.group\/select-field):where([invalid], [data-invalid], :invalid) *) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        outline-color: var(--color-serious);
       }
     }
   }
-  .enabled\:hover\:bg-interactive-hover-dark {
+  .enabled\:group-hover\/input\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-hovered], :hover) {
-        background-color: var(--color-interactive-hover-dark);
+      &:is(:where(.group\/input):where([data-hovered], :hover) *) {
+        outline-color: var(--color-interactive-hover);
       }
     }
   }
-  .enabled\:hover\:bg-interactive-hover-light {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-hovered], :hover) {
-        background-color: var(--color-interactive-hover-light);
+  .group-focus-visible\/select-field\:enabled\:outline-highlight-bold {
+    &:is(:where(.group\/select-field):where([data-focus-visible], :focus-visible) *) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        outline-color: var(--color-highlight-bold);
       }
     }
   }
-  .enabled\:hover\:bg-serious-hover {
+  .enabled\:group-focus-visible-within\/input\:outline-highlight {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-hovered], :hover) {
-        background-color: var(--color-serious-hover);
+      &:is(:where(.group\/input):where(:has([data-focus-visible], :focus-visible)) *) {
+        outline-color: var(--color-highlight);
       }
     }
   }
@@ -3217,60 +3285,32 @@
       }
     }
   }
-  .enabled\:focus\:bg-critical-hover {
+  .enabled\:focus-visible\:bg-transparent {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: var(--color-critical-hover);
-      }
-    }
-  }
-  .enabled\:focus\:bg-interactive-hover-dark {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: var(--color-interactive-hover-dark);
-      }
-    }
-  }
-  .enabled\:focus\:bg-interactive-hover-light {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: var(--color-interactive-hover-light);
-      }
-    }
-  }
-  .enabled\:focus\:bg-serious-hover {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: var(--color-serious-hover);
-      }
-    }
-  }
-  .enabled\:focus\:bg-transparent {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
+      &:where([data-focus-visible], :focus-visible) {
         background-color: transparent;
       }
     }
   }
-  .enabled\:focus\:fg-interactive-hover {
+  .enabled\:focus-visible\:fg-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
+      &:where([data-focus-visible], :focus-visible) {
         color: var(--color-interactive-hover);
         --icon-color: var(--color-interactive-hover);
       }
     }
   }
-  .enabled\:focus\:fg-inverse-light {
+  .enabled\:focus-visible\:fg-inverse-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
+      &:where([data-focus-visible], :focus-visible) {
         color: var(--color-inverse-light);
         --icon-color: var(--color-inverse-light);
       }
     }
   }
-  .enabled\:focus\:outline-interactive-hover {
+  .enabled\:focus-visible\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
+      &:where([data-focus-visible], :focus-visible) {
         outline-color: var(--color-interactive-hover);
       }
     }
@@ -3361,42 +3401,485 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .enabled\:color-info\:bg-interactive-default {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="info"]) {
+        background-color: var(--color-interactive-default);
+      }
+    }
+  }
+  .enabled\:color-info\:bg-surface-default {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="info"]) {
+        background-color: var(--color-surface-default);
+      }
+    }
+  }
+  .color-info\:enabled\:fg-default-light {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        color: var(--color-default-light);
+        --icon-color: var(--color-default-light);
+      }
+    }
+  }
+  .enabled\:color-info\:fg-default-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="info"]) {
+        color: var(--color-default-light);
+        --icon-color: var(--color-default-light);
+      }
+    }
+  }
+  .enabled\:color-info\:fg-interactive {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="info"]) {
+        color: var(--color-interactive);
+        --icon-color: var(--color-interactive);
+      }
+    }
+  }
+  .enabled\:color-info\:fg-inverse-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="info"]) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
+      }
+    }
+  }
+  .enabled\:color-info\:outline-interactive {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="info"]) {
+        outline-color: var(--color-interactive);
+      }
+    }
+  }
+  .color-info\:enabled\:open\:bg-highlight-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([open], [data-open], :open) {
+          background-color: var(--color-highlight-bold);
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:open\:fg-inverse-light {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([open], [data-open], :open) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:hover\:bg-highlight-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-hovered], :hover) {
+          background-color: var(--color-highlight-bold);
+        }
+      }
+    }
+  }
   .enabled\:hover\:color-info\:bg-highlight-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
-        &:where([data-color~="info"]) {
+        &:where([data-color="info"]) {
           background-color: var(--color-highlight-bold);
         }
       }
     }
   }
-  .enabled\:focus\:color-info\:bg-highlight-bold {
+  .enabled\:hover\:color-info\:bg-interactive-hover-dark {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        &:where([data-color~="info"]) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="info"]) {
+          background-color: var(--color-interactive-hover-dark);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-info\:bg-interactive-hover-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="info"]) {
+          background-color: var(--color-interactive-hover-light);
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:hover\:fg-inverse-light {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-hovered], :hover) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-info\:fg-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="info"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-info\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="info"]) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:focus-visible\:bg-highlight-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-focus-visible], :focus-visible) {
+          background-color: var(--color-highlight-bold);
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:color-info\:bg-highlight-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="info"]) {
           background-color: var(--color-highlight-bold);
         }
       }
     }
   }
+  .enabled\:focus-visible\:color-info\:bg-interactive-hover-dark {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="info"]) {
+          background-color: var(--color-interactive-hover-dark);
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:color-info\:bg-interactive-hover-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="info"]) {
+          background-color: var(--color-interactive-hover-light);
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:focus-visible\:fg-inverse-light {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-focus-visible], :focus-visible) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:color-info\:fg-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="info"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:color-info\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="info"]) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .enabled\:color-serious\:bg-serious {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="serious"]) {
+        background-color: var(--color-serious);
+      }
+    }
+  }
+  .enabled\:color-serious\:bg-serious-subtle {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="serious"]) {
+        background-color: var(--color-serious-subtle);
+      }
+    }
+  }
+  .color-serious\:enabled\:fg-serious {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        color: var(--color-serious);
+        --icon-color: var(--color-serious);
+      }
+    }
+  }
+  .enabled\:color-serious\:fg-default-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="serious"]) {
+        color: var(--color-default-light);
+        --icon-color: var(--color-default-light);
+      }
+    }
+  }
+  .enabled\:color-serious\:fg-inverse-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="serious"]) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
+      }
+    }
+  }
+  .enabled\:color-serious\:fg-serious {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="serious"]) {
+        color: var(--color-serious);
+        --icon-color: var(--color-serious);
+      }
+    }
+  }
+  .enabled\:color-serious\:outline-serious {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="serious"]) {
+        outline-color: var(--color-serious);
+      }
+    }
+  }
+  .color-serious\:enabled\:open\:bg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([open], [data-open], :open) {
+          background-color: var(--color-serious-bold);
+        }
+      }
+    }
+  }
+  .color-serious\:enabled\:open\:fg-inverse-light {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([open], [data-open], :open) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .color-serious\:enabled\:hover\:bg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-hovered], :hover) {
+          background-color: var(--color-serious-bold);
+        }
+      }
+    }
+  }
   .enabled\:hover\:color-serious\:bg-serious-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-hovered], :hover) {
-        &:where([data-color~="serious"]) {
+        &:where([data-color="serious"]) {
+          background-color: var(--color-serious-bold);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-serious\:bg-serious-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="serious"]) {
+          background-color: var(--color-serious-hover);
+        }
+      }
+    }
+  }
+  .color-serious\:enabled\:hover\:fg-inverse-light {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-hovered], :hover) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-serious\:fg-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="serious"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-serious\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="serious"]) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .color-serious\:enabled\:focus-visible\:bg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-focus-visible], :focus-visible) {
           background-color: var(--color-serious-bold);
         }
       }
     }
   }
-  .enabled\:focus\:color-serious\:bg-serious-bold {
+  .enabled\:focus-visible\:color-serious\:bg-serious-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        &:where([data-color~="serious"]) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="serious"]) {
           background-color: var(--color-serious-bold);
         }
       }
     }
   }
+  .enabled\:focus-visible\:color-serious\:bg-serious-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="serious"]) {
+          background-color: var(--color-serious-hover);
+        }
+      }
+    }
+  }
+  .color-serious\:enabled\:focus-visible\:fg-inverse-light {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-focus-visible], :focus-visible) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:color-serious\:fg-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="serious"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:color-serious\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="serious"]) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .enabled\:color-critical\:bg-critical {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="critical"]) {
+        background-color: var(--color-critical);
+      }
+    }
+  }
+  .enabled\:color-critical\:bg-critical-subtle {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="critical"]) {
+        background-color: var(--color-critical-subtle);
+      }
+    }
+  }
+  .enabled\:color-critical\:fg-critical {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="critical"]) {
+        color: var(--color-critical);
+        --icon-color: var(--color-critical);
+      }
+    }
+  }
+  .enabled\:color-critical\:fg-default-light {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="critical"]) {
+        color: var(--color-default-light);
+        --icon-color: var(--color-default-light);
+      }
+    }
+  }
+  .enabled\:color-critical\:outline-critical {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-color="critical"]) {
+        outline-color: var(--color-critical);
+      }
+    }
+  }
+  .enabled\:hover\:color-critical\:bg-critical-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="critical"]) {
+          background-color: var(--color-critical-hover);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-critical\:fg-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="critical"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .enabled\:hover\:color-critical\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        &:where([data-color="critical"]) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:color-critical\:bg-critical-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="critical"]) {
+          background-color: var(--color-critical-hover);
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:color-critical\:fg-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="critical"]) {
+          color: var(--color-interactive-hover);
+          --icon-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .enabled\:focus-visible\:color-critical\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focus-visible], :focus-visible) {
+        &:where([data-color="critical"]) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
   .placement-left\:left-\[attr\(data-offset-x_px\,0px\)\] {
     &:where([data-placement~="left"]) {
       left: attr(data-offset-x px,0px);
@@ -3435,20 +3918,6 @@
       }
     }
   }
-  .group-data-\[extend\=left\]\/layout\:placement-left\:z-10 {
-    &:is(:where(.group\/layout)[data-extend="left"] *) {
-      &:where([data-placement~="left"]) {
-        z-index: 10;
-      }
-    }
-  }
-  .group-data-\[extend\=right\]\/layout\:placement-left\:z-1 {
-    &:is(:where(.group\/layout)[data-extend="right"] *) {
-      &:where([data-placement~="left"]) {
-        z-index: 1;
-      }
-    }
-  }
   .group-data-\[extend\=top\]\/layout\:placement-left\:row-end-4 {
     &:is(:where(.group\/layout)[data-extend="top"] *) {
       &:where([data-placement~="left"]) {
@@ -3501,20 +3970,6 @@
       }
     }
   }
-  .group-data-\[extend\=left\]\/layout\:placement-right\:z-1 {
-    &:is(:where(.group\/layout)[data-extend="left"] *) {
-      &:where([data-placement~="right"]) {
-        z-index: 1;
-      }
-    }
-  }
-  .group-data-\[extend\=right\]\/layout\:placement-right\:z-10 {
-    &:is(:where(.group\/layout)[data-extend="right"] *) {
-      &:where([data-placement~="right"]) {
-        z-index: 10;
-      }
-    }
-  }
   .group-data-\[extend\=top\]\/layout\:placement-right\:row-end-4 {
     &:is(:where(.group\/layout)[data-extend="top"] *) {
       &:where([data-placement~="right"]) {
@@ -3574,13 +4029,6 @@
       }
     }
   }
-  .group-data-\[extend\~\=top\]\/layout\:placement-top\:z-10 {
-    &:is(:where(.group\/layout)[data-extend~="top"] *) {
-      &:where([data-placement~="top"]) {
-        z-index: 10;
-      }
-    }
-  }
   .group-data-\[extend\~\=top\]\/layout\:placement-top\:col-span-full {
     &:is(:where(.group\/layout)[data-extend~="top"] *) {
       &:where([data-placement~="top"]) {
@@ -3619,13 +4067,6 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .group-data-\[extend\=bottom\]\/layout\:placement-bottom\:z-10 {
-    &:is(:where(.group\/layout)[data-extend="bottom"] *) {
-      &:where([data-placement~="bottom"]) {
-        z-index: 10;
-      }
-    }
-  }
   .group-data-\[extend\=left\]\/layout\:placement-bottom\:col-end-4 {
     &:is(:where(.group\/layout)[data-extend="left"] *) {
       &:where([data-placement~="bottom"]) {
@@ -3667,71 +4108,17 @@
       padding-block: var(--spacing-s);
     }
   }
-  .size-large\:text-button-l {
-    &:where([data-size="large"]) {
-      font-size: var(--typography-button-l-size);
-      font-weight: bold;
-      letter-spacing: var(--typography-button-l-spacing);
-      line-height: var(--typography-button-l-height);
-    }
-  }
-  .size-large\:\[--icon-size\:var\(--icon-size-l\)\] {
-    &:where([data-size="large"]) {
-      --icon-size: var(--icon-size-l);
-    }
-  }
-  .placement-left\:open\:size-large\:w-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          width: var(--drawer-size-large);
-        }
-      }
-    }
-  }
-  .placement-left\:open\:size-large\:w-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          width: var(--drawer-size-large);
-        }
-      }
-    }
-  }
-  .placement-right\:open\:size-large\:w-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          width: var(--drawer-size-large);
-        }
-      }
-    }
-  }
-  .placement-right\:open\:size-large\:w-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          width: var(--drawer-size-large);
-        }
-      }
-    }
-  }
-  .placement-top\:open\:size-large\:h-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="top"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          height: var(--drawer-size-large);
-        }
-      }
-    }
-  }
-  .placement-bottom\:open\:size-large\:h-\[var\(--drawer-size-large\)\] {
-    &:where([data-placement~="bottom"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="large"]) {
-          height: var(--drawer-size-large);
-        }
-      }
+  .size-large\:text-button-l {
+    &:where([data-size="large"]) {
+      font-size: var(--typography-button-l-size);
+      font-weight: bold;
+      letter-spacing: var(--typography-button-l-spacing);
+      line-height: var(--typography-button-l-height);
+    }
+  }
+  .size-large\:\[--icon-size\:var\(--icon-size-l\)\] {
+    &:where([data-size="large"]) {
+      --icon-size: var(--icon-size-l);
     }
   }
   .size-medium\:size-\[32px\] {
@@ -3817,60 +4204,6 @@
       --icon-size: var(--icon-size-m);
     }
   }
-  .placement-left\:open\:size-medium\:w-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          width: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
-  .placement-left\:open\:size-medium\:w-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          width: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
-  .placement-right\:open\:size-medium\:w-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          width: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
-  .placement-right\:open\:size-medium\:w-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          width: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
-  .placement-top\:open\:size-medium\:h-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="top"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          height: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
-  .placement-bottom\:open\:size-medium\:h-\[var\(--drawer-size-medium\)\] {
-    &:where([data-placement~="bottom"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="medium"]) {
-          height: var(--drawer-size-medium);
-        }
-      }
-    }
-  }
   .size-small\:size-xl {
     &:where([data-size="small"]) {
       width: var(--spacing-xl);
@@ -3902,6 +4235,11 @@
       padding-block: var(--spacing-xs);
     }
   }
+  .size-small\:py-xxs {
+    &:where([data-size="small"]) {
+      padding-block: var(--spacing-xxs);
+    }
+  }
   .size-small\:text-body-xs {
     &:where([data-size="small"]) {
       font-size: var(--typography-body-xs-size);
@@ -3931,60 +4269,6 @@
       --icon-size: var(--icon-size-s);
     }
   }
-  .placement-left\:open\:size-small\:w-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          width: var(--drawer-size-small);
-        }
-      }
-    }
-  }
-  .placement-left\:open\:size-small\:w-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="left"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          width: var(--drawer-size-small);
-        }
-      }
-    }
-  }
-  .placement-right\:open\:size-small\:w-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          width: var(--drawer-size-small);
-        }
-      }
-    }
-  }
-  .placement-right\:open\:size-small\:w-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="right"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          width: var(--drawer-size-small);
-        }
-      }
-    }
-  }
-  .placement-top\:open\:size-small\:h-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="top"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          height: var(--drawer-size-small);
-        }
-      }
-    }
-  }
-  .placement-bottom\:open\:size-small\:h-\[var\(--drawer-size-small\)\] {
-    &:where([data-placement~="bottom"]) {
-      &:where([open], [data-open], :open) {
-        &:where([data-size="small"]) {
-          height: var(--drawer-size-small);
-        }
-      }
-    }
-  }
   .size-xsmall\:gap-xxs {
     &:where([data-size="xsmall"]) {
       gap: var(--spacing-xxs);
@@ -4073,219 +4357,334 @@
       gap: var(--spacing-xs);
     }
   }
-  .placement-left\:closed\:w-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="left"]) {
-      &:where(:not([open], [data-open], :open)) {
-        width: var(--drawer-size-closed);
+  .focus-visible-within\:outline-highlight {
+    &:where(:has([data-focus-visible], :focus-visible)) {
+      outline-color: var(--color-highlight);
+    }
+  }
+  .group-enabled\/accordion\:focus-visible-within\:bg-interactive-hover-dark {
+    &:is(:where(.group\/accordion):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:where(:has([data-focus-visible], :focus-visible)) {
+        background-color: var(--color-interactive-hover-dark);
       }
     }
   }
-  .placement-left\:closed\:w-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="left"]) {
-      &:where(:not([open], [data-open], :open)) {
-        width: var(--drawer-size-closed);
+  .group-enabled\/combobox-field\:focus-visible-within\:outline-highlight {
+    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:where(:has([data-focus-visible], :focus-visible)) {
+        outline-color: var(--color-highlight);
       }
     }
   }
-  .placement-right\:closed\:w-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="right"]) {
-      &:where(:not([open], [data-open], :open)) {
-        width: var(--drawer-size-closed);
+  .selected\:cursor-default {
+    &:where([data-selected], :checked) {
+      cursor: default;
+    }
+  }
+  .selected\:bg-highlight-subtle {
+    &:where([data-selected], :checked) {
+      background-color: var(--color-highlight-subtle);
+    }
+  }
+  .selected\:fg-highlight {
+    &:where([data-selected], :checked) {
+      color: var(--color-highlight);
+      --icon-color: var(--color-highlight);
+    }
+  }
+  .selected\:outline-highlight {
+    &:where([data-selected], :checked) {
+      outline-color: var(--color-highlight);
+    }
+  }
+  .enabled\:selected\:bg-highlight-subtle {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        background-color: var(--color-highlight-subtle);
       }
     }
   }
-  .placement-right\:closed\:w-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="right"]) {
-      &:where(:not([open], [data-open], :open)) {
-        width: var(--drawer-size-closed);
+  .enabled\:selected\:fg-highlight {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        color: var(--color-highlight);
+        --icon-color: var(--color-highlight);
       }
     }
   }
-  .placement-top\:closed\:h-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="top"]) {
-      &:where(:not([open], [data-open], :open)) {
-        height: var(--drawer-size-closed);
+  .enabled\:selected\:outline-highlight {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        outline-color: var(--color-highlight);
       }
     }
   }
-  .placement-bottom\:closed\:h-\[var\(--drawer-size-closed\)\] {
-    &:where([data-placement~="bottom"]) {
-      &:where(:not([open], [data-open], :open)) {
-        height: var(--drawer-size-closed);
+  .enabled\:selected\:hover\:fg-highlight {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-hovered], :hover) {
+          color: var(--color-highlight);
+          --icon-color: var(--color-highlight);
+        }
       }
     }
   }
-  .selected\:bg-highlight-bold {
-    &:where([data-selected], :checked) {
-      background-color: var(--color-highlight-bold);
+  .enabled\:selected\:hover\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-hovered], :hover) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
     }
   }
-  .selected\:bg-highlight-subtle {
-    &:where([data-selected], :checked) {
-      background-color: var(--color-highlight-subtle);
+  .enabled\:selected\:focus-visible\:fg-highlight {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focus-visible], :focus-visible) {
+          color: var(--color-highlight);
+          --icon-color: var(--color-highlight);
+        }
+      }
     }
   }
-  .selected\:bg-serious-bold {
-    &:where([data-selected], :checked) {
-      background-color: var(--color-serious-bold);
+  .enabled\:selected\:focus-visible\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focus-visible], :focus-visible) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
     }
   }
-  .selected\:fg-highlight {
-    &:where([data-selected], :checked) {
-      color: var(--color-highlight);
-      --icon-color: var(--color-highlight);
+  .disabled\:selected\:bg-interactive-disabled {
+    &:where([disabled], [data-disabled], :disabled) {
+      &:where([data-selected], :checked) {
+        background-color: var(--color-interactive-disabled);
+      }
     }
   }
-  .selected\:fg-inverse-light {
-    &:where([data-selected], :checked) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
+  .color-info\:enabled\:selected\:bg-highlight-bold {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          background-color: var(--color-highlight-bold);
+        }
+      }
     }
   }
-  .selected\:outline-highlight {
-    &:where([data-selected], :checked) {
-      outline-color: var(--color-highlight);
+  .enabled\:selected\:color-info\:bg-info-subtle {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-color="info"]) {
+          background-color: var(--color-info-subtle);
+        }
+      }
+    }
+  }
+  .color-info\:enabled\:selected\:fg-inverse-light {
+    &:where([data-color="info"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
+      }
     }
   }
-  .enabled\:selected\:bg-critical-subtle {
+  .enabled\:selected\:color-info\:outline-highlight {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-critical-subtle);
+        &:where([data-color="info"]) {
+          outline-color: var(--color-highlight);
+        }
       }
     }
   }
-  .enabled\:selected\:bg-highlight-subtle {
+  .enabled\:selected\:hover\:color-info\:bg-interactive-hover-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-highlight-subtle);
+        &:where([data-hovered], :hover) {
+          &:where([data-color="info"]) {
+            background-color: var(--color-interactive-hover-light);
+          }
+        }
       }
     }
   }
-  .enabled\:selected\:bg-info-subtle {
+  .enabled\:selected\:hover\:color-info\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-info-subtle);
+        &:where([data-hovered], :hover) {
+          &:where([data-color="info"]) {
+            outline-color: var(--color-interactive-hover);
+          }
+        }
       }
     }
   }
-  .enabled\:selected\:bg-serious-subtle {
+  .enabled\:selected\:focus-visible\:color-info\:bg-interactive-hover-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-serious-subtle);
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="info"]) {
+            background-color: var(--color-interactive-hover-light);
+          }
+        }
       }
     }
   }
-  .enabled\:selected\:fg-highlight {
+  .enabled\:selected\:focus-visible\:color-info\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        color: var(--color-highlight);
-        --icon-color: var(--color-highlight);
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="info"]) {
+            outline-color: var(--color-interactive-hover);
+          }
+        }
       }
     }
   }
-  .enabled\:selected\:outline-highlight {
+  .color-serious\:enabled\:selected\:bg-serious-bold {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          background-color: var(--color-serious-bold);
+        }
+      }
+    }
+  }
+  .enabled\:selected\:color-serious\:bg-serious-subtle {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        outline-color: var(--color-highlight);
+        &:where([data-color="serious"]) {
+          background-color: var(--color-serious-subtle);
+        }
+      }
+    }
+  }
+  .color-serious\:enabled\:selected\:fg-inverse-light {
+    &:where([data-color="serious"]) {
+      &:where(:not([disabled], [data-disabled]), :enabled) {
+        &:where([data-selected], :checked) {
+          color: var(--color-inverse-light);
+          --icon-color: var(--color-inverse-light);
+        }
       }
     }
   }
-  .enabled\:selected\:hover\:bg-critical-hover {
+  .enabled\:selected\:color-serious\:outline-highlight {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-hovered], :hover) {
-          background-color: var(--color-critical-hover);
+        &:where([data-color="serious"]) {
+          outline-color: var(--color-highlight);
         }
       }
     }
   }
-  .enabled\:selected\:hover\:bg-interactive-hover-light {
+  .enabled\:selected\:hover\:color-serious\:bg-serious-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
-          background-color: var(--color-interactive-hover-light);
+          &:where([data-color="serious"]) {
+            background-color: var(--color-serious-hover);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:hover\:bg-serious-hover {
+  .enabled\:selected\:hover\:color-serious\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
         &:where([data-hovered], :hover) {
-          background-color: var(--color-serious-hover);
+          &:where([data-color="serious"]) {
+            outline-color: var(--color-interactive-hover);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:hover\:fg-highlight {
+  .enabled\:selected\:focus-visible\:color-serious\:bg-serious-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-hovered], :hover) {
-          color: var(--color-highlight);
-          --icon-color: var(--color-highlight);
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="serious"]) {
+            background-color: var(--color-serious-hover);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:hover\:outline-interactive-hover {
+  .enabled\:selected\:focus-visible\:color-serious\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-hovered], :hover) {
-          outline-color: var(--color-interactive-hover);
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="serious"]) {
+            outline-color: var(--color-interactive-hover);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:focus\:bg-critical-hover {
+  .enabled\:selected\:color-critical\:bg-critical-subtle {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-focused], :focus) {
-          background-color: var(--color-critical-hover);
+        &:where([data-color="critical"]) {
+          background-color: var(--color-critical-subtle);
         }
       }
     }
   }
-  .enabled\:selected\:focus\:bg-interactive-hover-light {
+  .enabled\:selected\:color-critical\:outline-highlight {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-focused], :focus) {
-          background-color: var(--color-interactive-hover-light);
+        &:where([data-color="critical"]) {
+          outline-color: var(--color-highlight);
         }
       }
     }
   }
-  .enabled\:selected\:focus\:bg-serious-hover {
+  .enabled\:selected\:hover\:color-critical\:bg-critical-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-focused], :focus) {
-          background-color: var(--color-serious-hover);
+        &:where([data-hovered], :hover) {
+          &:where([data-color="critical"]) {
+            background-color: var(--color-critical-hover);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:focus\:fg-highlight {
+  .enabled\:selected\:hover\:color-critical\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-focused], :focus) {
-          color: var(--color-highlight);
-          --icon-color: var(--color-highlight);
+        &:where([data-hovered], :hover) {
+          &:where([data-color="critical"]) {
+            outline-color: var(--color-interactive-hover);
+          }
         }
       }
     }
   }
-  .enabled\:selected\:focus\:outline-interactive-hover {
+  .enabled\:selected\:focus-visible\:color-critical\:bg-critical-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        &:where([data-focused], :focus) {
-          outline-color: var(--color-interactive-hover);
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="critical"]) {
+            background-color: var(--color-critical-hover);
+          }
         }
       }
     }
   }
-  .disabled\:selected\:bg-interactive-disabled {
-    &:where([disabled], [data-disabled], :disabled) {
+  .enabled\:selected\:focus-visible\:color-critical\:outline-interactive-hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       &:where([data-selected], :checked) {
-        background-color: var(--color-interactive-disabled);
+        &:where([data-focus-visible], :focus-visible) {
+          &:where([data-color="critical"]) {
+            outline-color: var(--color-interactive-hover);
+          }
+        }
       }
     }
   }
@@ -4429,13 +4828,6 @@
       }
     }
   }
-  .closed\:\[\&\>\*\:not\(nav\)\]\:hidden {
-    &:where(:not([open], [data-open], :open)) {
-      &>*:not(nav) {
-        display: none;
-      }
-    }
-  }
   .\[\&\[data-placement\]\]\:absolute {
     &[data-placement] {
       position: absolute;
@@ -4583,6 +4975,19 @@ body {
   .hide-cancel::-webkit-search-cancel-button {
     display: none;
   }
+  *::-webkit-scrollbar {
+    width: var(--spacing-l);
+    height: var(--spacing-l);
+  }
+  *::-webkit-scrollbar-track {
+    background: var(--color-interactive);
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-interactive-hover-light);
+    border-radius: var(--radius-large);
+    border: 5px solid transparent;
+    background-clip: padding-box;
+  }
   .queryBuilder .rule-lines::before {
     content: '';
     width: 10px;