@accelint/design-toolkit 2.3.2 → 2.4.1

package/dist/styles.css

@@ -153,54 +153,69 @@
     --color-classification-secret: var(--colors-classification-secret, #c8102e);
     --color-classification-top-secret: var(--colors-classification-top-secret, #ff8c00);
     --color-classification-ts-sci: var(--colors-classification-ts-sci, #fce83a);
-    --typography-header-xxl-size: var(--typography-header-xxl-size);
-    --typography-header-xxl-height: var(--typography-header-xxl-height);
-    --typography-header-xl-size: var(--typography-header-xl-size);
-    --typography-header-xl-height: var(--typography-header-xl-height);
-    --typography-header-l-size: var(--typography-header-l-size);
-    --typography-header-l-height: var(--typography-header-l-height);
-    --typography-header-m-size: var(--typography-header-m-size);
-    --typography-header-m-height: var(--typography-header-m-height);
-    --typography-header-s-size: var(--typography-header-s-size);
-    --typography-header-s-height: var(--typography-header-s-height);
-    --typography-header-xs-size: var(--typography-header-xs-size);
-    --typography-header-xs-height: var(--typography-header-xs-height);
-    --typography-body-l-size: var(--typography-body-l-size);
-    --typography-body-l-height: var(--typography-body-l-height);
-    --typography-body-m-size: var(--typography-body-m-size);
-    --typography-body-m-height: var(--typography-body-m-height);
-    --typography-body-s-size: var(--typography-body-s-size);
-    --typography-body-s-height: var(--typography-body-s-height);
-    --typography-body-xs-size: var(--typography-body-xs-size);
-    --typography-body-xs-height: var(--typography-body-xs-height);
-    --typography-body-xxs-size: var(--typography-body-xxs-size);
-    --typography-body-xxs-height: var(--typography-body-xxs-height);
-    --typography-button-l-size: var(--typography-button-l-size);
-    --typography-button-l-height: var(--typography-button-l-height);
-    --typography-button-m-size: var(--typography-button-m-size);
-    --typography-button-m-height: var(--typography-button-m-height);
-    --typography-button-s-size: var(--typography-button-s-size);
-    --typography-button-s-height: var(--typography-button-s-height);
-    --typography-button-xs-size: var(--typography-button-xs-size);
-    --typography-button-xs-height: var(--typography-button-xs-height);
-    --spacing-0: var(--spacing-0);
-    --spacing-none: var(--spacing-none);
-    --spacing-xxs: var(--spacing-xxs);
-    --spacing-xs: var(--spacing-xs);
-    --spacing-s: var(--spacing-s);
-    --spacing-m: var(--spacing-m);
-    --spacing-l: var(--spacing-l);
-    --spacing-xl: var(--spacing-xl);
-    --spacing-xxl: var(--spacing-xxl);
-    --spacing-oversized: var(--spacing-oversized);
-    --radius-none: var(--radius-none);
-    --radius-small: var(--radius-small);
-    --radius-medium: var(--radius-medium);
-    --radius-large: var(--radius-large);
-    --radius-round: var(--radius-round);
-    --shadows-elevation-default: var(--shadows-elevation-default);
-    --shadows-elevation-overlay: var(--shadows-elevation-overlay);
-    --shadows-elevation-raised: var(--shadows-elevation-raised);
+    --typography-header-xxl-size: var(--typography-header-xxl-size, 32px);
+    --typography-header-xxl-height: var(--typography-header-xxl-height, 40px);
+    --typography-header-xxl-spacing: var(--typography-header-xxl-spacing, 0px);
+    --typography-header-xl-size: var(--typography-header-xl-size, 24px);
+    --typography-header-xl-height: var(--typography-header-xl-height, 28px);
+    --typography-header-xl-spacing: var(--typography-header-xl-spacing, 0.18px);
+    --typography-header-l-size: var(--typography-header-l-size, 20px);
+    --typography-header-l-height: var(--typography-header-l-height, 24px);
+    --typography-header-l-spacing: var(--typography-header-l-spacing, 0.18px);
+    --typography-header-m-size: var(--typography-header-m-size, 14px);
+    --typography-header-m-height: var(--typography-header-m-height, 20px);
+    --typography-header-m-spacing: var(--typography-header-m-spacing, 0.25px);
+    --typography-header-s-size: var(--typography-header-s-size, 12px);
+    --typography-header-s-height: var(--typography-header-s-height, 16px);
+    --typography-header-s-spacing: var(--typography-header-s-spacing, 0.4px);
+    --typography-header-xs-size: var(--typography-header-xs-size, 10px);
+    --typography-header-xs-height: var(--typography-header-xs-height, 12px);
+    --typography-header-xs-spacing: var(--typography-header-xs-spacing, 0.25px);
+    --typography-body-l-size: var(--typography-body-l-size, 16px);
+    --typography-body-l-height: var(--typography-body-l-height, 24px);
+    --typography-body-l-spacing: var(--typography-body-l-spacing, 0.5px);
+    --typography-body-m-size: var(--typography-body-m-size, 14px);
+    --typography-body-m-height: var(--typography-body-m-height, 20px);
+    --typography-body-m-spacing: var(--typography-body-m-spacing, 0.25px);
+    --typography-body-s-size: var(--typography-body-s-size, 12px);
+    --typography-body-s-height: var(--typography-body-s-height, 16px);
+    --typography-body-s-spacing: var(--typography-body-s-spacing, 0.4px);
+    --typography-body-xs-size: var(--typography-body-xs-size, 10px);
+    --typography-body-xs-height: var(--typography-body-xs-height, 12px);
+    --typography-body-xs-spacing: var(--typography-body-xs-spacing, 0.5px);
+    --typography-body-xxs-size: var(--typography-body-xxs-size, 9px);
+    --typography-body-xxs-height: var(--typography-body-xxs-height, 12px);
+    --typography-body-xxs-spacing: var(--typography-body-xxs-spacing, 0.25px);
+    --typography-button-l-size: var(--typography-button-l-size, 16px);
+    --typography-button-l-height: var(--typography-button-l-height, 24px);
+    --typography-button-l-spacing: var(--typography-button-l-spacing, 0.5px);
+    --typography-button-m-size: var(--typography-button-m-size, 14px);
+    --typography-button-m-height: var(--typography-button-m-height, 20px);
+    --typography-button-m-spacing: var(--typography-button-m-spacing, 0.25px);
+    --typography-button-s-size: var(--typography-button-s-size, 12px);
+    --typography-button-s-height: var(--typography-button-s-height, 16px);
+    --typography-button-s-spacing: var(--typography-button-s-spacing, 0.4px);
+    --typography-button-xs-size: var(--typography-button-xs-size, 10px);
+    --typography-button-xs-height: var(--typography-button-xs-height, 12px);
+    --typography-button-xs-spacing: var(--typography-button-xs-spacing, 0.5px);
+    --spacing-0: var(--spacing-0, 0px);
+    --spacing-none: var(--spacing-none, unset);
+    --spacing-xxs: var(--spacing-xxs, 2px);
+    --spacing-xs: var(--spacing-xs, 4px);
+    --spacing-s: var(--spacing-s, 8px);
+    --spacing-m: var(--spacing-m, 12px);
+    --spacing-l: var(--spacing-l, 16px);
+    --spacing-xl: var(--spacing-xl, 24px);
+    --spacing-xxl: var(--spacing-xxl, 40px);
+    --spacing-oversized: var(--spacing-oversized, 80px);
+    --radius-none: var(--radius-none, 0px);
+    --radius-small: var(--radius-small, 2px);
+    --radius-medium: var(--radius-medium, 4px);
+    --radius-large: var(--radius-large, 8px);
+    --radius-round: var(--radius-round, 80px);
+    --shadow-elevation-default: var(--shadow-elevation-default);
+    --shadow-elevation-overlay: var(--shadow-elevation-overlay);
+    --shadow-elevation-raised: var(--shadow-elevation-raised);
     --font-primary: var(--font-primary);
     --font-display: var(--font-display);
     --icon-size-l: var(--icon-size-l);
@@ -355,15 +370,9 @@
   }
 }
 @layer utilities {
-  .pointer-events-none {
-    pointer-events: none;
-  }
   .invisible {
     visibility: hidden;
   }
-  .\[position\:var\(--badge-position\,initial\)\] {
-    position: var(--badge-position,initial);
-  }
   .absolute {
     position: absolute;
   }
@@ -376,9 +385,6 @@
   .static {
     position: static;
   }
-  .\[inset\:var\(--badge-inset\,initial\)\] {
-    inset: var(--badge-inset,initial);
-  }
   .inset-0 {
     inset: var(--spacing-0);
   }
@@ -394,9 +400,6 @@
   .top-\[50\%\] {
     top: 50%;
   }
-  .right-\[5px\] {
-    right: 5px;
-  }
   .right-\[8px\] {
     right: 8px;
   }
@@ -430,6 +433,12 @@
   .order-5 {
     order: 5;
   }
+  .\[grid-column\:1\/-1\] {
+    grid-column: 1/-1;
+  }
+  .\[grid-column\:2\/-1\] {
+    grid-column: 2/-1;
+  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -448,6 +457,9 @@
   .col-start-3 {
     grid-column-start: 3;
   }
+  .\[grid-row\:1\] {
+    grid-row: 1;
+  }
   .row-span-3 {
     grid-row: span 3 / span 3;
   }
@@ -523,19 +535,12 @@
   .inline {
     display: inline;
   }
-  .inline-block {
-    display: inline-block;
-  }
   .inline-flex {
     display: inline-flex;
   }
   .table {
     display: table;
   }
-  .size-\[32px\] {
-    width: 32px;
-    height: 32px;
-  }
   .size-\[400px\] {
     width: 400px;
     height: 400px;
@@ -597,9 +602,6 @@
   .h-full {
     height: 100%;
   }
-  .h-l {
-    height: var(--spacing-l);
-  }
   .h-m {
     height: var(--spacing-m);
   }
@@ -738,9 +740,6 @@
   .min-w-\[320px\] {
     min-width: 320px;
   }
-  .min-w-l {
-    min-width: var(--spacing-l);
-  }
   .min-w-sm {
     min-width: var(--container-sm);
   }
@@ -794,9 +793,15 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .\[appearance\:textfield\] {
+    appearance: textfield;
+  }
   .auto-cols-max {
     grid-auto-columns: max-content;
   }
+  .\[grid-template-columns\:minmax\(0\,1fr\)_min-content\] {
+    grid-template-columns: minmax(0,1fr) min-content;
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -812,6 +817,9 @@
   .grid-cols-\[auto_1fr_auto\] {
     grid-template-columns: auto 1fr auto;
   }
+  .grid-cols-\[auto_auto_1fr_auto\] {
+    grid-template-columns: auto auto 1fr auto;
+  }
   .grid-cols-\[auto_auto_1fr_auto_auto\] {
     grid-template-columns: auto auto 1fr auto auto;
   }
@@ -1211,15 +1219,9 @@
   .p-xl {
     padding: var(--spacing-xl);
   }
-  .p-xs {
-    padding: var(--spacing-xs);
-  }
   .p-xxs {
     padding: var(--spacing-xxs);
   }
-  .px-m {
-    padding-inline: var(--spacing-m);
-  }
   .px-s {
     padding-inline: var(--spacing-s);
   }
@@ -1244,8 +1246,8 @@
   .pr-\[32px\] {
     padding-right: 32px;
   }
-  .pr-xl {
-    padding-right: var(--spacing-xl);
+  .pr-\[calc\(var\(--room\)\+var\(--spacing-s\)\)\] {
+    padding-right: calc(var(--room) + var(--spacing-s));
   }
   .pb-s {
     padding-bottom: var(--spacing-s);
@@ -1277,91 +1279,91 @@
   .text-body-l {
     font-size: var(--typography-body-l-size);
     font-weight: 400;
-    letter-spacing: 0.5px;
+    letter-spacing: var(--typography-body-l-spacing);
     line-height: var(--typography-body-l-height);
   }
   .text-body-m {
     font-size: var(--typography-body-m-size);
     font-weight: 400;
-    letter-spacing: 0.25px;
+    letter-spacing: var(--typography-body-m-spacing);
     line-height: var(--typography-body-m-height);
   }
   .text-body-s {
     font-size: var(--typography-body-s-size);
     font-weight: 400;
-    letter-spacing: 0.4px;
+    letter-spacing: var(--typography-body-s-spacing);
     line-height: var(--typography-body-s-height);
   }
   .text-body-xs {
     font-size: var(--typography-body-xs-size);
     font-weight: 400;
-    letter-spacing: 0.5px;
+    letter-spacing: var(--typography-body-xs-spacing);
     line-height: var(--typography-body-xs-height);
   }
   .text-body-xxs {
     font-size: var(--typography-body-xxs-size);
     font-weight: 400;
-    letter-spacing: 0.25px;
+    letter-spacing: var(--typography-body-xxs-spacing);
     line-height: var(--typography-body-xxs-height);
   }
   .text-button-l {
     font-size: var(--typography-button-l-size);
     font-weight: bold;
-    letter-spacing: 0.5px;
+    letter-spacing: var(--typography-button-l-spacing);
     line-height: var(--typography-button-l-height);
   }
   .text-button-m {
     font-size: var(--typography-button-m-size);
     font-weight: bold;
-    letter-spacing: 0.25px;
+    letter-spacing: var(--typography-button-m-spacing);
     line-height: var(--typography-button-m-height);
   }
   .text-button-s {
     font-size: var(--typography-button-s-size);
     font-weight: bold;
-    letter-spacing: 0.4px;
+    letter-spacing: var(--typography-button-s-spacing);
     line-height: var(--typography-button-s-height);
   }
   .text-button-xs {
     font-size: var(--typography-button-xs-size);
     font-weight: bold;
-    letter-spacing: 0.5px;
+    letter-spacing: var(--typography-button-xs-spacing);
     line-height: var(--typography-button-xs-height);
   }
   .text-header-l {
     font-size: var(--typography-header-l-size);
     font-weight: 500;
-    letter-spacing: 0.18px;
+    letter-spacing: var(--typography-header-l-spacing);
     line-height: var(--typography-header-l-height);
   }
   .text-header-m {
     font-size: var(--typography-header-m-size);
     font-weight: 500;
-    letter-spacing: 0.25px;
+    letter-spacing: var(--typography-header-m-spacing);
     line-height: var(--typography-header-m-height);
   }
   .text-header-s {
     font-size: var(--typography-header-s-size);
     font-weight: 500;
-    letter-spacing: 0.4px;
+    letter-spacing: var(--typography-header-s-spacing);
     line-height: var(--typography-header-s-height);
   }
   .text-header-xl {
     font-size: var(--typography-header-xl-size);
     font-weight: 500;
-    letter-spacing: 0.18px;
+    letter-spacing: var(--typography-header-xl-spacing);
     line-height: var(--typography-header-xl-height);
   }
   .text-header-xs {
     font-size: var(--typography-header-xs-size);
     font-weight: 500;
-    letter-spacing: 0.25px;
+    letter-spacing: var(--typography-header-xs-spacing);
     line-height: var(--typography-header-xs-height);
   }
   .text-header-xxl {
     font-size: var(--typography-header-xxl-size);
     font-weight: 500;
-    letter-spacing: 0px;
+    letter-spacing: var(--typography-header-xxl-spacing);
     line-height: var(--typography-header-xxl-height);
   }
   .text-\[24px\] {
@@ -1480,6 +1482,18 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .shadow-elevation-default {
+    --tw-shadow: var(--shadow-elevation-default);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-elevation-overlay {
+    --tw-shadow: var(--shadow-elevation-overlay);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-elevation-raised {
+    --tw-shadow: var(--shadow-elevation-raised);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-surface-default {
     --tw-shadow-color: var(--color-surface-default);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1502,6 +1516,9 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline {
+    outline-offset: -1px;
+  }
   .outline-offset-1 {
     outline-offset: 1px;
   }
@@ -1552,26 +1569,8 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .\[--badge-empty-inset\:0_0_auto_auto\] {
-    --badge-empty-inset: 0 0 auto auto;
-  }
-  .\[--badge-inset\:calc\(var\(--spacing-xxs\)\*-1\)_calc\(var\(--spacing-xxs\)\*-1\)_auto_auto\] {
-    --badge-inset: calc(var(--spacing-xxs) * -1) calc(var(--spacing-xxs) * -1) auto auto;
-  }
-  .\[--badge-position\:absolute\] {
-    --badge-position: absolute;
-  }
-  .\[--icon-size\:var\(--icon-size-l\)\] {
-    --icon-size: var(--icon-size-l);
-  }
-  .\[--icon-size\:var\(--icon-size-m\)\] {
-    --icon-size: var(--icon-size-m);
-  }
-  .\[--icon-size\:var\(--icon-size-s\)\] {
-    --icon-size: var(--icon-size-s);
-  }
-  .\[--icon-size\:var\(--icon-size-xs\)\] {
-    --icon-size: var(--icon-size-xs);
+  .\[--length\:attr\(data-length_type\(\<number\>\)\,0\)\] {
+    --length: attr(data-length type(<number>),0);
   }
   .\[--my-font-size\:12px\] {
     --my-font-size: 12px;
@@ -1579,349 +1578,557 @@
   .\[--my-font-size\:var\(--body-m-size\)\] {
     --my-font-size: var(--body-m-size);
   }
+  .\[--room\:0px\] {
+    --room: 0px;
+  }
+  .\[--room\:20px\] {
+    --room: 20px;
+  }
   .\[background\:--color-default-light\] {
     background: --color-default-light;
   }
-  .group-empty\:hidden {
-    &:is(:is(:where(.group)[data-empty], :where(.group):empty) *) {
+  .\[grid-area\:action\] {
+    grid-area: action;
+  }
+  .\[grid-area\:content\] {
+    grid-area: content;
+  }
+  .\[grid-area\:description\] {
+    grid-area: description;
+  }
+  .\[grid-area\:icon\] {
+    grid-area: icon;
+  }
+  .\[grid-area\:label\] {
+    grid-area: label;
+  }
+  .\[grid-template-areas\:\"icon_label_space_action\"_\"icon_description_space_action\"\] {
+    grid-template-areas: "icon label space action" "icon description space action";
+  }
+  .\[grid-template-areas\:\'content\'\] {
+    grid-template-areas: 'content';
+  }
+  .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-enabled\:group-hover\:bg-interactive-hover-dark {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
-        background-color: var(--color-interactive-hover-dark);
-      }
+  .group-not-has-data-\[slot\=description\]\/item\:row-span-full {
+    &:is(:where(.group\/item):not(*:has(*[data-slot="description"])) *) {
+      grid-row: 1 / -1;
     }
   }
-  .group-enabled\:group-hover\:outline-interactive-hover {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
-        outline-color: var(--color-interactive-hover);
-      }
+  .group-empty\:hidden {
+    &:is(:where(.group):where([data-empty], :empty) *) {
+      display: none;
     }
   }
-  .group-enabled\:group-focus\:bg-interactive-hover-dark {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
-        background-color: var(--color-interactive-hover-dark);
-      }
+  .group-hover\/item\:fg-inverse-light {
+    &:is(:where(.group\/item):where([data-hovered], :hover) *) {
+      color: var(--color-inverse-light);
+      --icon-color: var(--color-inverse-light);
     }
   }
-  .group-enabled\:group-focus\:outline-interactive-hover {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
-        outline-color: var(--color-interactive-hover);
-      }
+  .group-enabled\/checkbox\:fg-info-subtle {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      color: var(--color-info-subtle);
+      --icon-color: var(--color-info-subtle);
     }
   }
   .group-enabled\/checkbox\:group-indeterminate\/checkbox\:bg-highlight {
-    &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
-      &:is(:is(:where(.group\/checkbox)[data-indeterminate], :where(.group\/checkbox):indeterminate) *) {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
         background-color: var(--color-highlight);
       }
     }
   }
   .group-enabled\/checkbox\:group-indeterminate\/checkbox\:outline-highlight {
-    &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
-      &:is(:is(:where(.group\/checkbox)[data-indeterminate], :where(.group\/checkbox):indeterminate) *) {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
         outline-color: var(--color-highlight);
       }
     }
   }
   .group-enabled\/checkbox\:group-hover\/checkbox\:outline-interactive-hover {
-    &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
-      &:is(:is(:where(.group\/checkbox)[data-hovered], :where(.group\/checkbox):hover) *) {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-hovered], :hover) *) {
         outline-color: var(--color-interactive-hover);
       }
     }
   }
   .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-hover\/checkbox\:outline-interactive-hover {
-    &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
-      &:is(:is(:where(.group\/checkbox)[data-indeterminate], :where(.group\/checkbox):indeterminate) *) {
-        &:is(:is(:where(.group\/checkbox)[data-hovered], :where(.group\/checkbox):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-hovered], :hover) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
     }
   }
   .group-enabled\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
-    &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
-      &:is(:is(:where(.group\/checkbox)[data-focused], :where(.group\/checkbox):focus) *) {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-focused], :focus) *) {
         outline-color: var(--color-interactive-hover);
       }
     }
   }
   .group-enabled\/checkbox\:group-indeterminate\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
-    &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
-      &:is(:is(:where(.group\/checkbox)[data-indeterminate], :where(.group\/checkbox):indeterminate) *) {
-        &:is(:is(:where(.group\/checkbox)[data-focused], :where(.group\/checkbox):focus) *) {
+    &: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) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
     }
   }
   .group-enabled\/radio\:group-hover\/radio\:outline-interactive-hover {
-    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
-      &:is(:is(:where(.group\/radio)[data-hovered], :where(.group\/radio):hover) *) {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/radio):where([data-hovered], :hover) *) {
         outline-color: var(--color-interactive-hover);
       }
     }
   }
   .group-enabled\/radio\:group-focus\/radio\:outline-interactive-hover {
-    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
-      &:is(:is(:where(.group\/radio)[data-focused], :where(.group\/radio):focus) *) {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/radio):where([data-focused], :focus) *) {
         outline-color: var(--color-interactive-hover);
       }
     }
   }
+  .group-enabled\/switch\:group-hover\/switch\:bg-interactive-hover-dark {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
+        background-color: var(--color-interactive-hover-dark);
+      }
+    }
+  }
+  .group-enabled\/switch\:group-hover\/switch\:outline-interactive-hover {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
+        outline-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .group-enabled\/switch\:group-focus\/switch\:bg-interactive-hover-dark {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+        background-color: var(--color-interactive-hover-dark);
+      }
+    }
+  }
+  .group-enabled\/switch\:group-focus\/switch\:outline-interactive-hover {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-focused], :focus) *) {
+        outline-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .group-enabled\/text-area-field\:group-invalid\/text-area-field\:outline-serious {
+    &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/text-area-field):where([invalid], [data-invalid], :invalid) *) {
+        outline-color: var(--color-serious);
+      }
+    }
+  }
   .group-disabled\:hidden {
-    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+    &:is(:where(.group):where([disabled], [data-disabled], :disabled) *) {
       display: none;
     }
   }
-  .group-disabled\:bg-interactive-disabled {
-    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
-      background-color: var(--color-interactive-disabled);
+  .group-disabled\/accordion\:cursor-not-allowed {
+    &:is(:where(.group\/accordion):where([disabled], [data-disabled], :disabled) *) {
+      cursor: not-allowed;
     }
   }
-  .group-disabled\:fg-disabled {
-    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+  .group-disabled\/accordion\:fg-disabled {
+    &:is(:where(.group\/accordion):where([disabled], [data-disabled], :disabled) *) {
       color: var(--color-disabled);
       --icon-color: var(--color-disabled);
     }
   }
-  .group-disabled\:text-interactive-disabled {
-    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+  .group-disabled\/checkbox\:text-interactive-disabled {
+    &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
       color: var(--color-interactive-disabled);
     }
   }
-  .group-disabled\:outline-interactive-disabled {
-    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+  .group-disabled\/checkbox\:outline-interactive-disabled {
+    &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
       outline-color: var(--color-interactive-disabled);
     }
   }
-  .group-disabled\/checkbox\:text-interactive-disabled {
-    &:is(:is(:where(.group\/checkbox):is([disabled], [data-disabled]), :where(.group\/checkbox):disabled) *) {
-      color: var(--color-interactive-disabled);
+  .group-disabled\/checkbox\:group-indeterminate\/checkbox\:bg-interactive-disabled {
+    &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
+      &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
+        background-color: var(--color-interactive-disabled);
+      }
     }
   }
-  .group-disabled\/checkbox\:outline-interactive-disabled {
-    &:is(:is(:where(.group\/checkbox):is([disabled], [data-disabled]), :where(.group\/checkbox):disabled) *) {
-      outline-color: var(--color-interactive-disabled);
+  .group-disabled\/checkbox\:group-indeterminate\/checkbox\:fg-inverse-light {
+    &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
+      &:is(:where(.group\/checkbox):where([data-indeterminate], :indeterminate) *) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
+      }
     }
   }
   .group-disabled\/radio\:text-interactive-disabled {
-    &:is(:is(:where(.group\/radio):is([disabled], [data-disabled]), :where(.group\/radio):disabled) *) {
+    &:is(:where(.group\/radio):where([disabled], [data-disabled], :disabled) *) {
       color: var(--color-interactive-disabled);
     }
   }
   .group-disabled\/radio\:outline-interactive-disabled {
-    &:is(:is(:where(.group\/radio):is([disabled], [data-disabled]), :where(.group\/radio):disabled) *) {
+    &:is(:where(.group\/radio):where([disabled], [data-disabled], :disabled) *) {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-disabled\/switch\:bg-interactive-disabled {
+    &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
+      background-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-disabled\/switch\:text-interactive-disabled {
+    &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-interactive-disabled);
+    }
+  }
+  .group-disabled\/switch\:outline-interactive-disabled {
+    &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-disabled\/text-area-field\:fg-disabled {
+    &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
+  .group-disabled\/text-area-field\:text-disabled {
+    &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-disabled);
+    }
+  }
+  .group-disabled\/text-area-field\:outline-interactive-disabled {
+    &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
       outline-color: var(--color-interactive-disabled);
     }
   }
+  .group-disabled\/text-field\:fg-disabled {
+    &:is(:where(.group\/text-field):where([disabled], [data-disabled], :disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
+  .group-data-\[disabled\]\/item\:fg-disabled {
+    &:is(:where(.group\/item)[data-disabled] *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
+  .group-data-\[focused\]\/item\:fg-inverse-light {
+    &:is(:where(.group\/item)[data-focused] *) {
+      color: var(--color-inverse-light);
+      --icon-color: var(--color-inverse-light);
+    }
+  }
+  .group-size-medium\/input\:mr-xs {
+    &:is(:where(.group\/input):where([data-size="medium"]) *) {
+      margin-right: var(--spacing-xs);
+    }
+  }
+  .group-size-medium\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-s-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
+    &:is(:where(.group\/input):where([data-size="medium"]) *) {
+      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-s-spacing)) + (var(--spacing-s) * 2) + var(--room));
+    }
+  }
+  .group-size-medium\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-s-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
+    &:is(:where(.group\/input):where([data-size="medium"]) *) {
+      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-s-spacing)) + (var(--spacing-s) * 2) + var(--room));
+    }
+  }
+  .group-size-medium\/input\:max-w-\[400px\] {
+    &:is(:where(.group\/input):where([data-size="medium"]) *) {
+      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;
+    }
+  }
+  .group-size-medium\/input\:text-body-s {
+    &:is(:where(.group\/input):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);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-s-spacing);
+      line-height: var(--typography-body-s-height);
+    }
+  }
+  .group-size-small\/input\:mr-xxs {
+    &:is(:where(.group\/input):where([data-size="small"]) *) {
+      margin-right: var(--spacing-xxs);
+    }
+  }
+  .group-size-small\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-xs-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
+    &:is(:where(.group\/input):where([data-size="small"]) *) {
+      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-xs-spacing)) + (var(--spacing-s) * 2) + var(--room));
+    }
+  }
+  .group-size-small\/input\:w-\[calc\(\(var\(--length\)\*1ch\)\+\(\(var\(--length\)-1\)\*var\(--typography-body-xs-spacing\)\)\+\(var\(--spacing-s\)\*2\)\+var\(--room\)\)\] {
+    &:is(:where(.group\/input):where([data-size="small"]) *) {
+      width: calc((var(--length) * 1ch) + ((var(--length) - 1) * var(--typography-body-xs-spacing)) + (var(--spacing-s) * 2) + var(--room));
+    }
+  }
+  .group-size-small\/input\:max-w-\[200px\] {
+    &:is(:where(.group\/input):where([data-size="small"]) *) {
+      max-width: 200px;
+    }
+  }
+  .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));
+    }
+  }
+  .group-size-small\/input\:text-body-xs {
+    &:is(:where(.group\/input):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);
+      font-weight: 400;
+      letter-spacing: var(--typography-body-xs-spacing);
+      line-height: var(--typography-body-xs-height);
+    }
+  }
   .group-orientation-horizontal\:rounded-small {
-    &:is(:where(.group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
       border-radius: var(--radius-small);
     }
   }
   .group-orientation-horizontal\:rounded-b-none {
-    &:is(:where(.group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
     }
   }
   .group-orientation-horizontal\:rounded-b-none {
-    &:is(:where(.group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
       border-bottom-right-radius: var(--radius-none);
       border-bottom-left-radius: var(--radius-none);
     }
   }
   .group-orientation-horizontal\:border-b {
-    &:is(:where(.group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
       border-bottom-style: var(--tw-border-style);
       border-bottom-width: 1px;
     }
   }
   .group-orientation-horizontal\:border-highlight {
-    &:is(:where(.group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
       border-color: var(--color-highlight);
     }
   }
   .group-orientation-horizontal\:border-interactive-disabled {
-    &:is(:where(.group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
       border-color: var(--color-interactive-disabled);
     }
   }
   .group-orientation-horizontal\:border-interactive-hover {
-    &:is(:where(.group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
       border-color: var(--color-interactive-hover);
     }
   }
   .group-orientation-horizontal\:border-static-light {
-    &:is(:where(.group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
       border-color: var(--color-static-light);
     }
   }
   .group-orientation-horizontal\:pl-0 {
-    &:is(:where(.group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group):where([data-orientation="horizontal"]) *) {
       padding-left: var(--spacing-0);
     }
   }
   .group-orientation-horizontal\/checkbox-group\:grow {
-    &:is(:where(.group\/checkbox-group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group\/checkbox-group):where([data-orientation="horizontal"]) *) {
       flex-grow: 1;
     }
   }
   .group-orientation-horizontal\/checkbox-group\:basis-1\/3 {
-    &:is(:where(.group\/checkbox-group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group\/checkbox-group):where([data-orientation="horizontal"]) *) {
       flex-basis: calc(1/3 * 100%);
     }
   }
   .group-orientation-horizontal\/radio-group\:grow {
-    &:is(:where(.group\/radio-group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group\/radio-group):where([data-orientation="horizontal"]) *) {
       flex-grow: 1;
     }
   }
   .group-orientation-horizontal\/radio-group\:basis-1\/3 {
-    &:is(:where(.group\/radio-group)[data-orientation="horizontal"] *) {
+    &:is(:where(.group\/radio-group):where([data-orientation="horizontal"]) *) {
       flex-basis: calc(1/3 * 100%);
     }
   }
   .group-orientation-vertical\:border {
-    &:is(:where(.group)[data-orientation="vertical"] *) {
+    &:is(:where(.group):where([data-orientation="vertical"]) *) {
       border-style: var(--tw-border-style);
       border-width: 1px;
     }
   }
   .group-orientation-vertical\:border-interactive-hover {
-    &:is(:where(.group)[data-orientation="vertical"] *) {
+    &:is(:where(.group):where([data-orientation="vertical"]) *) {
       border-color: var(--color-interactive-hover);
     }
   }
   .group-orientation-vertical\:border-transparent {
-    &:is(:where(.group)[data-orientation="vertical"] *) {
+    &:is(:where(.group):where([data-orientation="vertical"]) *) {
       border-color: transparent;
     }
   }
   .group-orientation-vertical\:pt-0 {
-    &:is(:where(.group)[data-orientation="vertical"] *) {
+    &:is(:where(.group):where([data-orientation="vertical"]) *) {
       padding-top: var(--spacing-0);
     }
   }
-  .group-expanded\:rotate-180 {
-    &:is(:where(.group):is([expanded], [data-expanded]) *) {
+  .group-expanded\/accordion\:rotate-180 {
+    &:is(:where(.group\/accordion):where([expanded], [data-expanded]) *) {
       rotate: 180deg;
     }
   }
   .group-selected\:rotate-180 {
-    &:is(:where(.group)[data-selected] *) {
+    &:is(:where(.group):where([data-selected], :checked) *) {
       rotate: 180deg;
     }
   }
-  .group-enabled\:group-selected\:outline-highlight {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:where(.group)[data-selected] *) {
-        outline-color: var(--color-highlight);
+  .group-enabled\/checkbox\:group-selected\/checkbox\:bg-highlight {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
+        background-color: var(--color-highlight);
       }
     }
   }
-  .group-enabled\:group-selected\:group-hover\:bg-highlight-subtle {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:where(.group)[data-selected] *) {
-        &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
-          background-color: var(--color-highlight-subtle);
-        }
+  .group-enabled\/checkbox\:group-selected\/checkbox\:outline-highlight {
+    &:is(:where(.group\/checkbox):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
+        outline-color: var(--color-highlight);
       }
     }
   }
-  .group-enabled\:group-selected\:group-hover\:outline-highlight {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:where(.group)[data-selected] *) {
-        &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
-          outline-color: var(--color-highlight);
+  .group-enabled\/checkbox\:group-selected\/checkbox\:group-hover\/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-hovered], :hover) *) {
+          outline-color: var(--color-interactive-hover);
         }
       }
     }
   }
-  .group-enabled\:group-selected\:group-focus\:bg-highlight-subtle {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:where(.group)[data-selected] *) {
-        &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
-          background-color: var(--color-highlight-subtle);
+  .group-enabled\/checkbox\:group-selected\/checkbox\:group-focus\/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) *) {
+          outline-color: var(--color-interactive-hover);
         }
       }
     }
   }
-  .group-enabled\:group-selected\:group-focus\:outline-interactive-hover {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:where(.group)[data-selected] *) {
-        &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
-          outline-color: var(--color-interactive-hover);
-        }
+  .group-disabled\/checkbox\:group-selected\/checkbox\:bg-interactive-disabled {
+    &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
+      &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
+        background-color: var(--color-interactive-disabled);
       }
     }
   }
-  .group-enabled\/checkbox\:group-selected\/checkbox\:bg-highlight {
-    &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
-      &:is(:where(.group\/checkbox)[data-selected] *) {
-        background-color: var(--color-highlight);
+  .group-disabled\/checkbox\:group-selected\/checkbox\:fg-inverse-light {
+    &:is(:where(.group\/checkbox):where([disabled], [data-disabled], :disabled) *) {
+      &:is(:where(.group\/checkbox):where([data-selected], :checked) *) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
       }
     }
   }
-  .group-enabled\/checkbox\:group-selected\/checkbox\:outline-highlight {
-    &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
-      &:is(:where(.group\/checkbox)[data-selected] *) {
+  .group-enabled\/radio\:group-selected\/radio\:outline-highlight {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/radio):where([data-selected], :checked) *) {
         outline-color: var(--color-highlight);
       }
     }
   }
-  .group-enabled\/checkbox\:group-selected\/checkbox\:group-hover\/checkbox\:outline-interactive-hover {
-    &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
-      &:is(:where(.group\/checkbox)[data-selected] *) {
-        &:is(:is(:where(.group\/checkbox)[data-hovered], :where(.group\/checkbox):hover) *) {
+  .group-enabled\/radio\:group-selected\/radio\:group-hover\/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-hovered], :hover) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
     }
   }
-  .group-enabled\/checkbox\:group-selected\/checkbox\:group-focus\/checkbox\:outline-interactive-hover {
-    &:is(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
-      &:is(:where(.group\/checkbox)[data-selected] *) {
-        &:is(:is(:where(.group\/checkbox)[data-focused], :where(.group\/checkbox):focus) *) {
+  .group-enabled\/radio\:group-selected\/radio\:group-focus\/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) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
     }
   }
-  .group-disabled\/checkbox\:group-selected\/checkbox\:bg-interactive-disabled {
-    &:is(:is(:where(.group\/checkbox):is([disabled], [data-disabled]), :where(.group\/checkbox):disabled) *) {
-      &:is(:where(.group\/checkbox)[data-selected] *) {
-        background-color: var(--color-interactive-disabled);
+  .group-enabled\/switch\:group-selected\/switch\:outline-highlight {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-selected], :checked) *) {
+        outline-color: var(--color-highlight);
       }
     }
   }
-  .group-enabled\/radio\:group-selected\/radio\:outline-highlight {
-    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
-      &:is(:where(.group\/radio)[data-selected] *) {
-        outline-color: var(--color-highlight);
+  .group-enabled\/switch\:group-selected\/switch\:group-hover\/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-hovered], :hover) *) {
+          background-color: var(--color-highlight-subtle);
+        }
       }
     }
   }
-  .group-enabled\/radio\:group-selected\/radio\:group-hover\/radio\:outline-interactive-hover {
-    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
-      &:is(:where(.group\/radio)[data-selected] *) {
-        &:is(:is(:where(.group\/radio)[data-hovered], :where(.group\/radio):hover) *) {
-          outline-color: var(--color-interactive-hover);
+  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:outline-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-hovered], :hover) *) {
+          outline-color: var(--color-highlight);
         }
       }
     }
   }
-  .group-enabled\/radio\:group-selected\/radio\:group-focus\/radio\:outline-interactive-hover {
-    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
-      &:is(:where(.group\/radio)[data-selected] *) {
-        &:is(:is(:where(.group\/radio)[data-focused], :where(.group\/radio):focus) *) {
+  .group-enabled\/switch\:group-selected\/switch\:group-focus\/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) *) {
+          background-color: var(--color-highlight-subtle);
+        }
+      }
+    }
+  }
+  .group-enabled\/switch\:group-selected\/switch\:group-focus\/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) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
@@ -1937,6 +2144,13 @@
       color: var(--color-disabled);
     }
   }
+  .group-disabled\/text-area-field\:placeholder\:text-disabled {
+    &:is(:where(.group\/text-area-field):where([disabled], [data-disabled], :disabled) *) {
+      &::placeholder {
+        color: var(--color-disabled);
+      }
+    }
+  }
   .before\:mr-l {
     &::before {
       content: var(--tw-content);
@@ -1975,9 +2189,9 @@
       background-color: var(--color-default-dark);
     }
   }
-  .group-enabled\:group-hover\:before\:bg-interactive-hover {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
+  .group-enabled\/switch\:group-hover\/switch\:before\:bg-interactive-hover {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-hovered], :hover) *) {
         &::before {
           content: var(--tw-content);
           background-color: var(--color-interactive-hover);
@@ -1985,9 +2199,9 @@
       }
     }
   }
-  .group-enabled\:group-focus\:before\:bg-interactive-hover {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
+  .group-enabled\/switch\:group-focus\/switch\:before\:bg-interactive-hover {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-focused], :focus) *) {
         &::before {
           content: var(--tw-content);
           background-color: var(--color-interactive-hover);
@@ -1995,33 +2209,53 @@
       }
     }
   }
-  .group-disabled\:before\:bg-disabled {
-    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+  .group-disabled\/switch\:before\:bg-disabled {
+    &:is(:where(.group\/switch):where([disabled], [data-disabled], :disabled) *) {
       &::before {
         content: var(--tw-content);
         background-color: var(--color-disabled);
       }
     }
   }
-  .group-selected\:before\:mr-0 {
-    &:is(:where(.group)[data-selected] *) {
+  .group-enabled\/radio\:group-selected\/radio\:before\:bg-highlight {
+    &:is(:where(.group\/radio):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/radio):where([data-selected], :checked) *) {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--color-highlight);
+        }
+      }
+    }
+  }
+  .group-disabled\/radio\:group-selected\/radio\:before\:bg-interactive-disabled {
+    &:is(:where(.group\/radio):where([disabled], [data-disabled], :disabled) *) {
+      &:is(:where(.group\/radio):where([data-selected], :checked) *) {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--color-interactive-disabled);
+        }
+      }
+    }
+  }
+  .group-selected\/switch\:before\:mr-0 {
+    &:is(:where(.group\/switch):where([data-selected], :checked) *) {
       &::before {
         content: var(--tw-content);
         margin-right: var(--spacing-0);
       }
     }
   }
-  .group-selected\:before\:ml-l {
-    &:is(:where(.group)[data-selected] *) {
+  .group-selected\/switch\:before\:ml-l {
+    &:is(:where(.group\/switch):where([data-selected], :checked) *) {
       &::before {
         content: var(--tw-content);
         margin-left: var(--spacing-l);
       }
     }
   }
-  .group-enabled\:group-selected\:before\:bg-highlight {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:where(.group)[data-selected] *) {
+  .group-enabled\/switch\:group-selected\/switch\:before\:bg-highlight {
+    &:is(:where(.group\/switch):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:is(:where(.group\/switch):where([data-selected], :checked) *) {
         &::before {
           content: var(--tw-content);
           background-color: var(--color-highlight);
@@ -2029,10 +2263,10 @@
       }
     }
   }
-  .group-enabled\:group-selected\:group-hover\:before\:bg-highlight {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:where(.group)[data-selected] *) {
-        &:is(:is(:where(.group)[data-hovered], :where(.group):hover) *) {
+  .group-enabled\/switch\:group-selected\/switch\:group-hover\/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-hovered], :hover) *) {
           &::before {
             content: var(--tw-content);
             background-color: var(--color-highlight);
@@ -2041,10 +2275,10 @@
       }
     }
   }
-  .group-enabled\:group-selected\:group-focus\:before\:bg-highlight {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &:is(:where(.group)[data-selected] *) {
-        &:is(:is(:where(.group)[data-focused], :where(.group):focus) *) {
+  .group-enabled\/switch\:group-selected\/switch\:group-focus\/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) *) {
           &::before {
             content: var(--tw-content);
             background-color: var(--color-highlight);
@@ -2053,402 +2287,449 @@
       }
     }
   }
-  .group-enabled\/radio\:group-selected\/radio\:before\:bg-highlight {
-    &:is(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
-      &:is(:where(.group\/radio)[data-selected] *) {
-        &::before {
-          content: var(--tw-content);
-          background-color: var(--color-highlight);
-        }
-      }
-    }
-  }
-  .group-disabled\/radio\:group-selected\/radio\:before\:bg-interactive-disabled {
-    &:is(:is(:where(.group\/radio):is([disabled], [data-disabled]), :where(.group\/radio):disabled) *) {
-      &:is(:where(.group\/radio)[data-selected] *) {
-        &::before {
-          content: var(--tw-content);
-          background-color: var(--color-interactive-disabled);
-        }
-      }
-    }
-  }
   .first\:border-none {
     &:first-child {
       --tw-border-style: none;
       border-style: none;
     }
   }
+  .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);
+    }
+  }
   .not-disabled\:read-only\:rounded-none {
-    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
-      &:is([readonly], [data-readonly]), &:read-only {
+    &:not(*:where([disabled], [data-disabled], :disabled)) {
+      &:where([readonly], [data-readonly], :read-only) {
         border-radius: 0;
       }
     }
   }
   .not-disabled\:read-only\:rounded-none {
-    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
-      &:is([readonly], [data-readonly]), &:read-only {
+    &:not(*:where([disabled], [data-disabled], :disabled)) {
+      &:where([readonly], [data-readonly], :read-only) {
         border-radius: var(--radius-none);
       }
     }
   }
   .not-disabled\:read-only\:p-0 {
-    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
-      &:is([readonly], [data-readonly]), &:read-only {
+    &:not(*:where([disabled], [data-disabled], :disabled)) {
+      &:where([readonly], [data-readonly], :read-only) {
         padding: var(--spacing-0);
       }
     }
   }
   .not-disabled\:read-only\:outline-transparent {
-    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
-      &:is([readonly], [data-readonly]), &:read-only {
+    &:not(*:where([disabled], [data-disabled], :disabled)) {
+      &:where([readonly], [data-readonly], :read-only) {
         outline-color: transparent;
       }
     }
   }
-  .empty\:\[inset\:var\(--badge-empty-inset\,initial\)\] {
-    &[data-empty], &:empty {
-      inset: var(--badge-empty-inset,initial);
-    }
-  }
   .empty\:hidden {
-    &[data-empty], &:empty {
+    &:where([data-empty], :empty) {
       display: none;
     }
   }
   .empty\:size-s {
-    &[data-empty], &:empty {
+    &:where([data-empty], :empty) {
       width: var(--spacing-s);
       height: var(--spacing-s);
     }
   }
-  .empty\:min-w-none {
-    &[data-empty], &:empty {
-      min-width: var(--spacing-none);
-    }
-  }
   .empty\:px-none {
-    &[data-empty], &:empty {
+    &:where([data-empty], :empty) {
       padding-inline: var(--spacing-none);
     }
   }
   .focus-within\:outline-highlight {
-    &[data-focus-within], &:focus-within {
+    &:where([data-focus-within], :focus-within) {
       outline-color: var(--color-highlight);
     }
   }
-  .group-enabled\:focus-within\:bg-interactive-hover-dark {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &[data-focus-within], &:focus-within {
+  .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-highlight-bold {
-    &[data-hovered], &:hover {
+    &:where([data-hovered], :hover) {
       background-color: var(--color-highlight-bold);
     }
   }
   .hover\:bg-serious-bold {
-    &[data-hovered], &:hover {
+    &:where([data-hovered], :hover) {
       background-color: var(--color-serious-bold);
     }
   }
   .hover\:fg-interactive-hover {
-    &[data-hovered], &:hover {
+    &:where([data-hovered], :hover) {
       color: var(--color-interactive-hover);
       --icon-color: var(--color-interactive-hover);
     }
   }
   .hover\:fg-inverse-light {
-    &[data-hovered], &:hover {
+    &:where([data-hovered], :hover) {
       color: var(--color-inverse-light);
       --icon-color: var(--color-inverse-light);
     }
   }
   .hover\:outline-4 {
-    &[data-hovered], &:hover {
+    &:where([data-hovered], :hover) {
       outline-style: var(--tw-outline-style);
       outline-width: 4px;
     }
   }
   .hover\:outline-interactive-hover {
-    &[data-hovered], &:hover {
+    &:where([data-hovered], :hover) {
       outline-color: var(--color-interactive-hover);
     }
   }
   .hover\:outline-solid {
-    &[data-hovered], &:hover {
+    &:where([data-hovered], :hover) {
       --tw-outline-style: solid;
       outline-style: solid;
     }
   }
-  .group-enabled\:hover\:bg-interactive-hover-dark {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
-      &[data-hovered], &:hover {
+  .group-enabled\/accordion\:hover\:bg-interactive-hover-dark {
+    &:is(:where(.group\/accordion):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:where([data-hovered], :hover) {
         background-color: var(--color-interactive-hover-dark);
       }
     }
   }
+  .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);
+      }
+    }
+  }
   .not-disabled\:read-only\:hover\:outline-transparent {
-    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
-      &:is([readonly], [data-readonly]), &:read-only {
-        &[data-hovered], &:hover {
+    &:not(*:where([disabled], [data-disabled], :disabled)) {
+      &:where([readonly], [data-readonly], :read-only) {
+        &:where([data-hovered], :hover) {
           outline-color: transparent;
         }
       }
     }
   }
   .focus\:bg-highlight {
-    &[data-focused], &:focus {
+    &:where([data-focused], :focus) {
       background-color: var(--color-highlight);
     }
   }
   .focus\:bg-highlight-bold {
-    &[data-focused], &:focus {
+    &:where([data-focused], :focus) {
       background-color: var(--color-highlight-bold);
     }
   }
   .focus\:bg-serious-bold {
-    &[data-focused], &:focus {
+    &:where([data-focused], :focus) {
       background-color: var(--color-serious-bold);
     }
   }
   .focus\:fg-inverse-light {
-    &[data-focused], &:focus {
+    &:where([data-focused], :focus) {
       color: var(--color-inverse-light);
       --icon-color: var(--color-inverse-light);
     }
   }
   .focus\:text-inverse-light {
-    &[data-focused], &:focus {
+    &:where([data-focused], :focus) {
       color: var(--color-inverse-light);
     }
   }
   .focus\:outline-4 {
-    &[data-focused], &:focus {
+    &:where([data-focused], :focus) {
       outline-style: var(--tw-outline-style);
       outline-width: 4px;
     }
   }
   .focus\:outline-highlight {
-    &[data-focused], &:focus {
+    &:where([data-focused], :focus) {
       outline-color: var(--color-highlight);
     }
   }
   .focus\:outline-interactive-hover {
-    &[data-focused], &:focus {
+    &:where([data-focused], :focus) {
       outline-color: var(--color-interactive-hover);
     }
   }
-  .focus\:outline-serious {
-    &[data-focused], &:focus {
-      outline-color: var(--color-serious);
-    }
-  }
   .focus\:outline-none {
-    &[data-focused], &:focus {
+    &:where([data-focused], :focus) {
       --tw-outline-style: none;
       outline-style: none;
     }
   }
   .focus\:outline-solid {
-    &[data-focused], &:focus {
+    &:where([data-focused], :focus) {
       --tw-outline-style: solid;
       outline-style: solid;
     }
   }
+  .group-enabled\/text-area-field\:focus\:outline-highlight {
+    &:is(:where(.group\/text-area-field):where(:not([disabled], [data-disabled]), :enabled) *) {
+      &:where([data-focused], :focus) {
+        outline-color: var(--color-highlight);
+      }
+    }
+  }
   .not-disabled\:read-only\:focus\:outline-transparent {
-    &:not(*:is([disabled], [data-disabled]),  *:disabled) {
-      &:is([readonly], [data-readonly]), &:read-only {
-        &[data-focused], &:focus {
+    &:not(*:where([disabled], [data-disabled], :disabled)) {
+      &:where([readonly], [data-readonly], :read-only) {
+        &:where([data-focused], :focus) {
           outline-color: transparent;
         }
       }
     }
   }
   .enabled\:bg-critical {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       background-color: var(--color-critical);
     }
   }
   .enabled\:bg-critical-subtle {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       background-color: var(--color-critical-subtle);
     }
   }
   .enabled\:bg-interactive-default {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       background-color: var(--color-interactive-default);
     }
   }
   .enabled\:bg-serious {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       background-color: var(--color-serious);
     }
   }
   .enabled\:bg-serious-subtle {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       background-color: var(--color-serious-subtle);
     }
   }
   .enabled\:bg-surface-default {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &: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 {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       color: var(--color-critical);
       --icon-color: var(--color-critical);
     }
   }
   .enabled\:fg-default-light {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       color: var(--color-default-light);
       --icon-color: var(--color-default-light);
     }
   }
   .enabled\:fg-interactive {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       color: var(--color-interactive);
       --icon-color: var(--color-interactive);
     }
   }
   .enabled\:fg-serious {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       color: var(--color-serious);
       --icon-color: var(--color-serious);
     }
   }
   .enabled\:outline-critical {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       outline-color: var(--color-critical);
     }
   }
   .enabled\:outline-interactive {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
       outline-color: var(--color-interactive);
     }
   }
   .enabled\:outline-serious {
-    &:not([disabled], [data-disabled]), &:enabled {
+    &: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) *) {
+        outline-color: var(--color-serious);
+      }
+    }
+  }
+  .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 {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-hovered], &:hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
         background-color: var(--color-critical-hover);
       }
     }
   }
   .enabled\:hover\:bg-interactive-hover-dark {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-hovered], &:hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
         background-color: var(--color-interactive-hover-dark);
       }
     }
   }
   .enabled\:hover\:bg-interactive-hover-light {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-hovered], &:hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
         background-color: var(--color-interactive-hover-light);
       }
     }
   }
   .enabled\:hover\:bg-serious-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-hovered], &:hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
         background-color: var(--color-serious-hover);
       }
     }
   }
+  .enabled\:hover\:bg-transparent {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
+        background-color: transparent;
+      }
+    }
+  }
   .enabled\:hover\:fg-interactive-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-hovered], &:hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
         color: var(--color-interactive-hover);
         --icon-color: var(--color-interactive-hover);
       }
     }
   }
   .enabled\:hover\:outline-interactive-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-hovered], &:hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-hovered], :hover) {
         outline-color: var(--color-interactive-hover);
       }
     }
   }
   .enabled\:focus\:bg-critical-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-focused], &:focus {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focused], :focus) {
         background-color: var(--color-critical-hover);
       }
     }
   }
   .enabled\:focus\:bg-interactive-hover-dark {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-focused], &:focus {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focused], :focus) {
         background-color: var(--color-interactive-hover-dark);
       }
     }
   }
   .enabled\:focus\:bg-interactive-hover-light {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-focused], &:focus {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focused], :focus) {
         background-color: var(--color-interactive-hover-light);
       }
     }
   }
   .enabled\:focus\:bg-serious-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-focused], &:focus {
+    &: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) {
+        background-color: transparent;
+      }
+    }
+  }
   .enabled\:focus\:fg-interactive-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-focused], &:focus {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focused], :focus) {
         color: var(--color-interactive-hover);
         --icon-color: var(--color-interactive-hover);
       }
     }
   }
   .enabled\:focus\:outline-interactive-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-focused], &:focus {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-focused], :focus) {
         outline-color: var(--color-interactive-hover);
       }
     }
   }
   .disabled\:cursor-not-allowed {
-    &:is([disabled], [data-disabled]), &:disabled {
+    &:where([disabled], [data-disabled], :disabled) {
       cursor: not-allowed;
     }
   }
   .disabled\:bg-interactive-disabled {
-    &:is([disabled], [data-disabled]), &:disabled {
+    &:where([disabled], [data-disabled], :disabled) {
       background-color: var(--color-interactive-disabled);
     }
   }
   .disabled\:bg-transparent {
-    &:is([disabled], [data-disabled]), &:disabled {
+    &:where([disabled], [data-disabled], :disabled) {
       background-color: transparent;
     }
   }
   .disabled\:fg-disabled {
-    &:is([disabled], [data-disabled]), &:disabled {
+    &:where([disabled], [data-disabled], :disabled) {
       color: var(--color-disabled);
       --icon-color: var(--color-disabled);
     }
   }
+  .disabled\:text-disabled {
+    &:where([disabled], [data-disabled], :disabled) {
+      color: var(--color-disabled);
+    }
+  }
   .disabled\:outline-interactive-disabled {
-    &:is([disabled], [data-disabled]), &:disabled {
+    &:where([disabled], [data-disabled], :disabled) {
       outline-color: var(--color-interactive-disabled);
     }
   }
+  .disabled\:placeholder\:text-disabled {
+    &:where([disabled], [data-disabled], :disabled) {
+      &::placeholder {
+        color: var(--color-disabled);
+      }
+    }
+  }
   .data-selected\:outline-highlight {
     &[data-selected] {
       outline-color: var(--color-highlight);
@@ -2465,7 +2746,7 @@
       &[data-slot="description"] {
         font-size: var(--typography-body-xs-size);
         font-weight: 400;
-        letter-spacing: 0.5px;
+        letter-spacing: var(--typography-body-xs-spacing);
         line-height: var(--typography-body-xs-height);
       }
     }
@@ -2479,7 +2760,7 @@
     }
   }
   .hover\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
-    &[data-hovered], &:hover {
+    &:where([data-hovered], :hover) {
       :is(& *) {
         &[data-slot="description"] {
           color: var(--color-inverse-light);
@@ -2489,7 +2770,7 @@
     }
   }
   .focus\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
-    &[data-focused], &:focus {
+    &:where([data-focused], :focus) {
       :is(& *) {
         &[data-slot="description"] {
           color: var(--color-inverse-light);
@@ -2499,7 +2780,7 @@
     }
   }
   .disabled\:\*\*\:data-\[slot\=description\]\:fg-disabled {
-    &:is([disabled], [data-disabled]), &:disabled {
+    &:where([disabled], [data-disabled], :disabled) {
       :is(& *) {
         &[data-slot="description"] {
           color: var(--color-disabled);
@@ -2518,105 +2799,369 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .placement-left\:left-\[attr\(data-offset-x_px\,0px\)\] {
+    &:where([data-placement~="left"]) {
+      left: attr(data-offset-x px,0px);
+    }
+  }
+  .placement-left\:-translate-x-1\/2 {
+    &:where([data-placement~="left"]) {
+      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .placement-right\:right-\[attr\(data-offset-x_px\,0px\)\] {
+    &:where([data-placement~="right"]) {
+      right: attr(data-offset-x px,0px);
+    }
+  }
+  .placement-right\:translate-x-1\/2 {
+    &:where([data-placement~="right"]) {
+      --tw-translate-x: calc(1/2 * 100%);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .placement-top\:top-\[attr\(data-offset-y_px\,0px\)\] {
+    &:where([data-placement~="top"]) {
+      top: attr(data-offset-y px,0px);
+    }
+  }
+  .placement-top\:-translate-y-1\/2 {
+    &:where([data-placement~="top"]) {
+      --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .placement-bottom\:bottom-\[attr\(data-offset-y_px\,0px\)\] {
+    &:where([data-placement~="bottom"]) {
+      bottom: attr(data-offset-y px,0px);
+    }
+  }
+  .placement-bottom\:translate-y-1\/2 {
+    &:where([data-placement~="bottom"]) {
+      --tw-translate-y: calc(1/2 * 100%);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .size-large\:gap-xs {
+    &:where([data-size="large"]) {
+      gap: var(--spacing-xs);
+    }
+  }
+  .size-large\:p-xs {
+    &:where([data-size="large"]) {
+      padding: var(--spacing-xs);
+    }
+  }
+  .size-large\:px-m {
+    &: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);
+    }
+  }
+  .size-medium\:size-\[32px\] {
+    &:where([data-size="medium"]) {
+      width: 32px;
+      height: 32px;
+    }
+  }
+  .size-medium\:gap-xs {
+    &:where([data-size="medium"]) {
+      gap: var(--spacing-xs);
+    }
+  }
+  .size-medium\:p-xs {
+    &:where([data-size="medium"]) {
+      padding: var(--spacing-xs);
+    }
+  }
+  .size-medium\:px-m {
+    &:where([data-size="medium"]) {
+      padding-inline: var(--spacing-m);
+    }
+  }
+  .size-medium\:px-s {
+    &:where([data-size="medium"]) {
+      padding-inline: var(--spacing-s);
+    }
+  }
+  .size-medium\:py-s {
+    &:where([data-size="medium"]) {
+      padding-block: var(--spacing-s);
+    }
+  }
+  .size-medium\:py-xs {
+    &:where([data-size="medium"]) {
+      padding-block: var(--spacing-xs);
+    }
+  }
+  .size-medium\:text-body-s {
+    &: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);
+    }
+  }
+  .size-medium\:text-button-m {
+    &:where([data-size="medium"]) {
+      font-size: var(--typography-button-m-size);
+      font-weight: bold;
+      letter-spacing: var(--typography-button-m-spacing);
+      line-height: var(--typography-button-m-height);
+    }
+  }
+  .size-medium\:text-header-m {
+    &:where([data-size="medium"]) {
+      font-size: var(--typography-header-m-size);
+      font-weight: 500;
+      letter-spacing: var(--typography-header-m-spacing);
+      line-height: var(--typography-header-m-height);
+    }
+  }
+  .size-medium\:text-header-s {
+    &:where([data-size="medium"]) {
+      font-size: var(--typography-header-s-size);
+      font-weight: 500;
+      letter-spacing: var(--typography-header-s-spacing);
+      line-height: var(--typography-header-s-height);
+    }
+  }
+  .size-medium\:\[--icon-size\:var\(--icon-size-m\)\] {
+    &:where([data-size="medium"]) {
+      --icon-size: var(--icon-size-m);
+    }
+  }
+  .size-small\:size-xl {
+    &:where([data-size="small"]) {
+      width: var(--spacing-xl);
+      height: var(--spacing-xl);
+    }
+  }
+  .size-small\:gap-xxs {
+    &:where([data-size="small"]) {
+      gap: var(--spacing-xxs);
+    }
+  }
+  .size-small\:rounded-small {
+    &:where([data-size="small"]) {
+      border-radius: var(--radius-small);
+    }
+  }
+  .size-small\:p-xxs {
+    &:where([data-size="small"]) {
+      padding: var(--spacing-xxs);
+    }
+  }
+  .size-small\:px-s {
+    &:where([data-size="small"]) {
+      padding-inline: var(--spacing-s);
+    }
+  }
+  .size-small\:py-xs {
+    &:where([data-size="small"]) {
+      padding-block: var(--spacing-xs);
+    }
+  }
+  .size-small\:text-body-xs {
+    &: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);
+    }
+  }
+  .size-small\:text-button-s {
+    &:where([data-size="small"]) {
+      font-size: var(--typography-button-s-size);
+      font-weight: bold;
+      letter-spacing: var(--typography-button-s-spacing);
+      line-height: var(--typography-button-s-height);
+    }
+  }
+  .size-small\:text-header-xs {
+    &:where([data-size="small"]) {
+      font-size: var(--typography-header-xs-size);
+      font-weight: 500;
+      letter-spacing: var(--typography-header-xs-spacing);
+      line-height: var(--typography-header-xs-height);
+    }
+  }
+  .size-small\:\[--icon-size\:var\(--icon-size-s\)\] {
+    &:where([data-size="small"]) {
+      --icon-size: var(--icon-size-s);
+    }
+  }
+  .size-xsmall\:gap-xxs {
+    &:where([data-size="xsmall"]) {
+      gap: var(--spacing-xxs);
+    }
+  }
+  .size-xsmall\:rounded-small {
+    &:where([data-size="xsmall"]) {
+      border-radius: var(--radius-small);
+    }
+  }
+  .size-xsmall\:p-xxs {
+    &:where([data-size="xsmall"]) {
+      padding: var(--spacing-xxs);
+    }
+  }
+  .size-xsmall\:px-s {
+    &:where([data-size="xsmall"]) {
+      padding-inline: var(--spacing-s);
+    }
+  }
+  .size-xsmall\:py-xs {
+    &:where([data-size="xsmall"]) {
+      padding-block: var(--spacing-xs);
+    }
+  }
+  .size-xsmall\:text-button-xs {
+    &:where([data-size="xsmall"]) {
+      font-size: var(--typography-button-xs-size);
+      font-weight: bold;
+      letter-spacing: var(--typography-button-xs-spacing);
+      line-height: var(--typography-button-xs-height);
+    }
+  }
+  .size-xsmall\:\[--icon-size\:var\(--icon-size-xs\)\] {
+    &:where([data-size="xsmall"]) {
+      --icon-size: var(--icon-size-xs);
+    }
+  }
   .orientation-horizontal\:flex-col {
-    &[data-orientation="horizontal"] {
+    &:where([data-orientation="horizontal"]) {
       flex-direction: column;
     }
   }
   .orientation-horizontal\:flex-row {
-    &[data-orientation="horizontal"] {
+    &:where([data-orientation="horizontal"]) {
       flex-direction: row;
     }
   }
   .orientation-horizontal\:flex-wrap {
-    &[data-orientation="horizontal"] {
+    &:where([data-orientation="horizontal"]) {
       flex-wrap: wrap;
     }
   }
   .orientation-vertical\:flex-col {
-    &[data-orientation="vertical"] {
+    &:where([data-orientation="vertical"]) {
       flex-direction: column;
     }
   }
   .orientation-vertical\:gap-xs {
-    &[data-orientation="vertical"] {
+    &:where([data-orientation="vertical"]) {
       gap: var(--spacing-xs);
     }
   }
+  .selected\:bg-highlight-bold {
+    &:where([data-selected], :checked) {
+      background-color: var(--color-highlight-bold);
+    }
+  }
+  .selected\:bg-serious-bold {
+    &:where([data-selected], :checked) {
+      background-color: var(--color-serious-bold);
+    }
+  }
+  .selected\:fg-inverse-light {
+    &:where([data-selected], :checked) {
+      color: var(--color-inverse-light);
+      --icon-color: var(--color-inverse-light);
+    }
+  }
   .enabled\:selected\:bg-critical-subtle {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
         background-color: var(--color-critical-subtle);
       }
     }
   }
   .enabled\:selected\:bg-highlight-subtle {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
         background-color: var(--color-highlight-subtle);
       }
     }
   }
   .enabled\:selected\:bg-info-subtle {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
         background-color: var(--color-info-subtle);
       }
     }
   }
   .enabled\:selected\:bg-serious-subtle {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
         background-color: var(--color-serious-subtle);
       }
     }
   }
   .enabled\:selected\:fg-highlight {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
         color: var(--color-highlight);
         --icon-color: var(--color-highlight);
       }
     }
   }
   .enabled\:selected\:outline-highlight {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
         outline-color: var(--color-highlight);
       }
     }
   }
   .enabled\:selected\:hover\:bg-critical-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
-        &[data-hovered], &:hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-hovered], :hover) {
           background-color: var(--color-critical-hover);
         }
       }
     }
   }
   .enabled\:selected\:hover\:bg-interactive-hover-light {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
-        &[data-hovered], &:hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-hovered], :hover) {
           background-color: var(--color-interactive-hover-light);
         }
       }
     }
   }
   .enabled\:selected\:hover\:bg-serious-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
-        &[data-hovered], &:hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-hovered], :hover) {
           background-color: var(--color-serious-hover);
         }
       }
     }
   }
   .enabled\:selected\:hover\:fg-highlight {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
-        &[data-hovered], &:hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-hovered], :hover) {
           color: var(--color-highlight);
           --icon-color: var(--color-highlight);
         }
@@ -2624,45 +3169,45 @@
     }
   }
   .enabled\:selected\:hover\:outline-interactive-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
-        &[data-hovered], &:hover {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-hovered], :hover) {
           outline-color: var(--color-interactive-hover);
         }
       }
     }
   }
   .enabled\:selected\:focus\:bg-critical-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
-        &[data-focused], &:focus {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focused], :focus) {
           background-color: var(--color-critical-hover);
         }
       }
     }
   }
   .enabled\:selected\:focus\:bg-interactive-hover-light {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
-        &[data-focused], &:focus {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focused], :focus) {
           background-color: var(--color-interactive-hover-light);
         }
       }
     }
   }
   .enabled\:selected\:focus\:bg-serious-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
-        &[data-focused], &:focus {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focused], :focus) {
           background-color: var(--color-serious-hover);
         }
       }
     }
   }
   .enabled\:selected\:focus\:fg-highlight {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
-        &[data-focused], &:focus {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focused], :focus) {
           color: var(--color-highlight);
           --icon-color: var(--color-highlight);
         }
@@ -2670,17 +3215,17 @@
     }
   }
   .enabled\:selected\:focus\:outline-interactive-hover {
-    &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
-        &[data-focused], &:focus {
+    &:where(:not([disabled], [data-disabled]), :enabled) {
+      &:where([data-selected], :checked) {
+        &:where([data-focused], :focus) {
           outline-color: var(--color-interactive-hover);
         }
       }
     }
   }
   .disabled\:selected\:bg-interactive-disabled {
-    &:is([disabled], [data-disabled]), &:disabled {
-      &[data-selected] {
+    &:where([disabled], [data-disabled], :disabled) {
+      &:where([data-selected], :checked) {
         background-color: var(--color-interactive-disabled);
       }
     }
@@ -2690,6 +3235,16 @@
       padding-left: var(--spacing-s);
     }
   }
+  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none {
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+  }
+  .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none {
+    &::-webkit-outer-spin-button {
+      appearance: none;
+    }
+  }
   .\[\&\:empty\]\:before\:content-\[\'CUI\'\] {
     &:empty {
       &::before {
@@ -2762,22 +3317,6 @@
       }
     }
   }
-  .\*\*\:\[svg\]\:size-l {
-    :is(& *) {
-      &:is(svg) {
-        width: var(--spacing-l);
-        height: var(--spacing-l);
-      }
-    }
-  }
-  .\*\*\:\[svg\]\:size-xl {
-    :is(& *) {
-      &:is(svg) {
-        width: var(--spacing-xl);
-        height: var(--spacing-xl);
-      }
-    }
-  }
   .\[\&\:nth-child\(3n\)\]\:bg-default-dark {
     &:nth-child(3n) {
       background-color: var(--color-default-dark);
@@ -2797,7 +3336,7 @@
     &>* {
       font-size: var(--typography-header-m-size);
       font-weight: 500;
-      letter-spacing: 0.25px;
+      letter-spacing: var(--typography-header-m-spacing);
       line-height: var(--typography-header-m-height);
     }
   }
@@ -2808,19 +3347,24 @@
     }
   }
   .orientation-horizontal\:\[\&\>\*\]\:pr-s {
-    &[data-orientation="horizontal"] {
+    &:where([data-orientation="horizontal"]) {
       &>* {
         padding-right: var(--spacing-s);
       }
     }
   }
   .orientation-horizontal\:\[\&\>\*\]\:pl-s {
-    &[data-orientation="horizontal"] {
+    &:where([data-orientation="horizontal"]) {
       &>* {
         padding-left: var(--spacing-s);
       }
     }
   }
+  .\[\&\[data-placement\]\]\:absolute {
+    &[data-placement] {
+      position: absolute;
+    }
+  }
 }
 :root {
   --colors-neutral-10: #0b0b0b;
@@ -2888,34 +3432,49 @@
   --colors-classification-ts-sci: #fce83a;
   --typography-header-xxl-size: 32px;
   --typography-header-xxl-height: 40px;
+  --typography-header-xxl-spacing: 0px;
   --typography-header-xl-size: 24px;
   --typography-header-xl-height: 28px;
+  --typography-header-xl-spacing: 0.18px;
   --typography-header-l-size: 20px;
   --typography-header-l-height: 24px;
+  --typography-header-l-spacing: 0.18px;
   --typography-header-m-size: 14px;
   --typography-header-m-height: 20px;
+  --typography-header-m-spacing: 0.25px;
   --typography-header-s-size: 12px;
   --typography-header-s-height: 16px;
+  --typography-header-s-spacing: 0.4px;
   --typography-header-xs-size: 10px;
   --typography-header-xs-height: 12px;
+  --typography-header-xs-spacing: 0.25px;
   --typography-body-l-size: 16px;
   --typography-body-l-height: 24px;
+  --typography-body-l-spacing: 0.5px;
   --typography-body-m-size: 14px;
   --typography-body-m-height: 20px;
+  --typography-body-m-spacing: 0.25px;
   --typography-body-s-size: 12px;
   --typography-body-s-height: 16px;
+  --typography-body-s-spacing: 0.4px;
   --typography-body-xs-size: 10px;
   --typography-body-xs-height: 12px;
+  --typography-body-xs-spacing: 0.5px;
   --typography-body-xxs-size: 9px;
   --typography-body-xxs-height: 12px;
+  --typography-body-xxs-spacing: 0.25px;
   --typography-button-l-size: 16px;
   --typography-button-l-height: 24px;
+  --typography-button-l-spacing: 0.5px;
   --typography-button-m-size: 14px;
   --typography-button-m-height: 20px;
+  --typography-button-m-spacing: 0.25px;
   --typography-button-s-size: 12px;
   --typography-button-s-height: 16px;
+  --typography-button-s-spacing: 0.4px;
   --typography-button-xs-size: 10px;
   --typography-button-xs-height: 12px;
+  --typography-button-xs-spacing: 0.5px;
   --spacing-0: 0px;
   --spacing-none: unset;
   --spacing-xxs: 2px;
@@ -2931,9 +3490,9 @@
   --radius-medium: 4px;
   --radius-large: 8px;
   --radius-round: 80px;
-  --shadows-elevation-default: initial;
-  --shadows-elevation-overlay: 0 8px 10px 0 rgba(0 0 0 / 0.2), 0 6px 30px 0 rgba(0 0 0 / 0.12), 0 16px 24px 0 rgba(0 0 0 / 0.14);
-  --shadows-elevation-raised: 0 5px 5px 0 rgba(0 0 0 / 0.2), 0 3px 14px 0 rgba(0 0 0 / 0.12), 0 8px 10px 0 rgba(0 0 0 / 0.14);
+  --shadow-elevation-default: initial;
+  --shadow-elevation-overlay: 0 8px 10px 0 rgba(0 0 0 / 0.2), 0 6px 30px 0 rgba(0 0 0 / 0.12), 0 16px 24px 0 rgba(0 0 0 / 0.14);
+  --shadow-elevation-raised: 0 5px 5px 0 rgba(0 0 0 / 0.2), 0 3px 14px 0 rgba(0 0 0 / 0.12), 0 8px 10px 0 rgba(0 0 0 / 0.14);
   --font-primary: "Roboto Flex", sans-serif;
   --font-display: "Roboto Mono", monospace;
   --icon-size-l: var(--spacing-xl);
@@ -3176,6 +3735,15 @@ body {
   syntax: "*";
   inherits: false;
 }
+@property --tw-text-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-text-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -3232,6 +3800,8 @@ body {
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-text-shadow-color: initial;
+      --tw-text-shadow-alpha: 100%;
       --tw-content: "";
     }
   }