@accelint/design-toolkit 2.6.0 → 3.0.0

package/dist/styles.css

@@ -924,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;
   }
@@ -939,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;
   }
@@ -954,9 +948,6 @@
   .justify-end {
     justify-content: flex-end;
   }
-  .justify-evenly {
-    justify-content: space-evenly;
-  }
   .justify-start {
     justify-content: flex-start;
   }
@@ -1295,6 +1286,9 @@
   .object-center {
     object-position: center;
   }
+  .\!p-xs {
+    padding: var(--spacing-xs) !important;
+  }
   .p-l {
     padding: var(--spacing-l);
   }
@@ -1676,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;
   }
@@ -1789,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);
     }
@@ -1831,17 +1822,17 @@
       }
     }
   }
-  .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);
         }
       }
@@ -1853,6 +1844,11 @@
       --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) *) {
@@ -1874,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);
       }
@@ -1889,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);
       }
     }
@@ -1910,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);
       }
     }
@@ -2061,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);
       }
@@ -2070,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);
         }
@@ -2089,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);
       }
@@ -2098,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);
         }
@@ -2215,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);
@@ -2396,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);
@@ -2406,6 +2438,16 @@
       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);
@@ -2414,6 +2456,48 @@
       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);
@@ -2434,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;
@@ -2462,6 +2541,14 @@
       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);
@@ -2470,6 +2557,16 @@
       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);
@@ -2478,6 +2575,48 @@
       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);
@@ -2498,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));
@@ -2526,6 +2670,14 @@
       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);
@@ -2682,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);
         }
       }
@@ -2722,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);
         }
       }
@@ -2756,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);
         }
       }
@@ -2842,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);
@@ -2918,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);
@@ -2930,22 +3082,6 @@
       }
     }
   }
-  .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);
@@ -2967,40 +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);
-      }
-    }
-  }
-  .group-enabled\/combobox-field\:focus-within\:outline-highlight {
-    &:is(:where(.group\/combobox-field):where(:not([disabled], [data-disabled]), :enabled) *) {
-      &:where([data-focus-within], :focus-within) {
-        outline-color: var(--color-highlight);
-      }
-    }
-  }
   .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);
@@ -3013,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);
@@ -3051,64 +3152,48 @@
       }
     }
   }
-  .focus\:bg-highlight {
-    &:where([data-focused], :focus) {
-      background-color: var(--color-highlight);
-    }
-  }
-  .focus\:bg-highlight-bold {
-    &:where([data-focused], :focus) {
-      background-color: var(--color-highlight-bold);
-    }
-  }
-  .focus\:bg-serious-bold {
-    &:where([data-focused], :focus) {
-      background-color: var(--color-serious-bold);
-    }
-  }
   .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-visible\:bg-highlight {
+    &:where([data-focus-visible], :focus-visible) {
+      background-color: var(--color-highlight);
     }
   }
-  .focus\:fg-inverse-light {
-    &:where([data-focused], :focus) {
-      color: var(--color-inverse-light);
-      --icon-color: var(--color-inverse-light);
+  .focus-visible\:fg-interactive-hover {
+    &:where([data-focus-visible], :focus-visible) {
+      color: var(--color-interactive-hover);
+      --icon-color: var(--color-interactive-hover);
     }
   }
-  .focus\:text-inverse-light {
-    &:where([data-focused], :focus) {
+  .focus-visible\:text-inverse-light {
+    &:where([data-focus-visible], :focus-visible) {
       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-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);
       }
     }
@@ -3118,47 +3203,11 @@
       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);
@@ -3171,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) *) {
@@ -3219,45 +3241,17 @@
       }
     }
   }
-  .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);
-      }
-    }
-  }
-  .group-focus\/select-field\:enabled\:outline-highlight-bold {
-    &:is(:where(.group\/select-field):where([data-focused], :focus) *) {
+  .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-critical-hover {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-hovered], :hover) {
-        background-color: var(--color-critical-hover);
-      }
-    }
-  }
-  .enabled\:hover\:bg-interactive-hover-dark {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-hovered], :hover) {
-        background-color: var(--color-interactive-hover-dark);
-      }
-    }
-  }
-  .enabled\:hover\:bg-interactive-hover-light {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-hovered], :hover) {
-        background-color: var(--color-interactive-hover-light);
-      }
-    }
-  }
-  .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);
       }
     }
   }
@@ -3291,67 +3285,39 @@
       }
     }
   }
-  .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);
+      &:where([data-focus-visible], :focus-visible) {
+        background-color: transparent;
       }
     }
   }
-  .enabled\:focus\:bg-interactive-hover-dark {
+  .enabled\:focus-visible\:fg-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: var(--color-interactive-hover-dark);
+      &:where([data-focus-visible], :focus-visible) {
+        color: var(--color-interactive-hover);
+        --icon-color: var(--color-interactive-hover);
       }
     }
   }
-  .enabled\:focus\:bg-interactive-hover-light {
+  .enabled\:focus-visible\:fg-inverse-light {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: var(--color-interactive-hover-light);
+      &:where([data-focus-visible], :focus-visible) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
       }
     }
   }
-  .enabled\:focus\:bg-serious-hover {
+  .enabled\:focus-visible\:outline-interactive-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: var(--color-serious-hover);
+      &:where([data-focus-visible], :focus-visible) {
+        outline-color: var(--color-interactive-hover);
       }
     }
   }
-  .enabled\:focus\:bg-transparent {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        background-color: transparent;
-      }
-    }
-  }
-  .enabled\:focus\:fg-interactive-hover {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        color: var(--color-interactive-hover);
-        --icon-color: var(--color-interactive-hover);
-      }
-    }
-  }
-  .enabled\:focus\:fg-inverse-light {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        color: var(--color-inverse-light);
-        --icon-color: var(--color-inverse-light);
-      }
-    }
-  }
-  .enabled\:focus\:outline-interactive-hover {
-    &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        outline-color: var(--color-interactive-hover);
-      }
-    }
-  }
-  .disabled\:cursor-not-allowed {
-    &:where([disabled], [data-disabled], :disabled) {
-      cursor: not-allowed;
+  .disabled\:cursor-not-allowed {
+    &:where([disabled], [data-disabled], :disabled) {
+      cursor: not-allowed;
     }
   }
   .disabled\:bg-interactive-disabled {
@@ -3435,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\:hover\:color-info\:bg-interactive-hover-dark {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &: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\:color-info\:bg-highlight-bold {
+  .enabled\:focus-visible\:color-info\:bg-highlight-bold {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        &:where([data-color~="info"]) {
+      &: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\:focus\:color-serious\:bg-serious-bold {
+  .enabled\:hover\:color-serious\:bg-serious-hover {
     &:where(:not([disabled], [data-disabled]), :enabled) {
-      &:where([data-focused], :focus) {
-        &:where([data-color~="serious"]) {
+      &: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-visible\:color-serious\:bg-serious-bold {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &: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);
@@ -3509,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"]) {
@@ -3575,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"]) {
@@ -3648,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"]) {
@@ -3693,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"]) {
@@ -3735,77 +4102,23 @@
     &:where([data-size="large"]) {
       padding-inline: var(--spacing-m);
     }
-  }
-  .size-large\:py-s {
-    &:where([data-size="large"]) {
-      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);
-        }
-      }
+  }
+  .size-large\:py-s {
+    &:where([data-size="large"]) {
+      padding-block: var(--spacing-s);
     }
   }
-  .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);
-        }
-      }
+  .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);
     }
   }
-  .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\:\[--icon-size\:var\(--icon-size-l\)\] {
+    &:where([data-size="large"]) {
+      --icon-size: var(--icon-size-l);
     }
   }
   .size-medium\:size-\[32px\] {
@@ -3891,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);
@@ -4010,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);
@@ -4152,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);
+          }
+        }
       }
     }
   }
@@ -4508,13 +4828,6 @@
       }
     }
   }
-  .closed\:\[\&\>\*\:not\(nav\)\]\:hidden {
-    &:where(:not([open], [data-open], :open)) {
-      &>*:not(nav) {
-        display: none;
-      }
-    }
-  }
   .\[\&\[data-placement\]\]\:absolute {
     &[data-placement] {
       position: absolute;