@accelint/design-toolkit 2.3.2 → 2.4.0

package/dist/styles.css

@@ -155,34 +155,49 @@
     --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-xxl-spacing: var(--typography-header-xxl-spacing);
     --typography-header-xl-size: var(--typography-header-xl-size);
     --typography-header-xl-height: var(--typography-header-xl-height);
+    --typography-header-xl-spacing: var(--typography-header-xl-spacing);
     --typography-header-l-size: var(--typography-header-l-size);
     --typography-header-l-height: var(--typography-header-l-height);
+    --typography-header-l-spacing: var(--typography-header-l-spacing);
     --typography-header-m-size: var(--typography-header-m-size);
     --typography-header-m-height: var(--typography-header-m-height);
+    --typography-header-m-spacing: var(--typography-header-m-spacing);
     --typography-header-s-size: var(--typography-header-s-size);
     --typography-header-s-height: var(--typography-header-s-height);
+    --typography-header-s-spacing: var(--typography-header-s-spacing);
     --typography-header-xs-size: var(--typography-header-xs-size);
     --typography-header-xs-height: var(--typography-header-xs-height);
+    --typography-header-xs-spacing: var(--typography-header-xs-spacing);
     --typography-body-l-size: var(--typography-body-l-size);
     --typography-body-l-height: var(--typography-body-l-height);
+    --typography-body-l-spacing: var(--typography-body-l-spacing);
     --typography-body-m-size: var(--typography-body-m-size);
     --typography-body-m-height: var(--typography-body-m-height);
+    --typography-body-m-spacing: var(--typography-body-m-spacing);
     --typography-body-s-size: var(--typography-body-s-size);
     --typography-body-s-height: var(--typography-body-s-height);
+    --typography-body-s-spacing: var(--typography-body-s-spacing);
     --typography-body-xs-size: var(--typography-body-xs-size);
     --typography-body-xs-height: var(--typography-body-xs-height);
+    --typography-body-xs-spacing: var(--typography-body-xs-spacing);
     --typography-body-xxs-size: var(--typography-body-xxs-size);
     --typography-body-xxs-height: var(--typography-body-xxs-height);
+    --typography-body-xxs-spacing: var(--typography-body-xxs-spacing);
     --typography-button-l-size: var(--typography-button-l-size);
     --typography-button-l-height: var(--typography-button-l-height);
+    --typography-button-l-spacing: var(--typography-button-l-spacing);
     --typography-button-m-size: var(--typography-button-m-size);
     --typography-button-m-height: var(--typography-button-m-height);
+    --typography-button-m-spacing: var(--typography-button-m-spacing);
     --typography-button-s-size: var(--typography-button-s-size);
     --typography-button-s-height: var(--typography-button-s-height);
+    --typography-button-s-spacing: var(--typography-button-s-spacing);
     --typography-button-xs-size: var(--typography-button-xs-size);
     --typography-button-xs-height: var(--typography-button-xs-height);
+    --typography-button-xs-spacing: var(--typography-button-xs-spacing);
     --spacing-0: var(--spacing-0);
     --spacing-none: var(--spacing-none);
     --spacing-xxs: var(--spacing-xxs);
@@ -198,9 +213,9 @@
     --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);
+    --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,40 +1578,64 @@
   .\[--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(*[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(:is(:where(.group)[data-empty], :where(.group):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(:is(:where(.group\/item)[data-hovered], :where(.group\/item):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(:is(:where(.group\/checkbox):not([disabled], [data-disabled]), :where(.group\/checkbox):enabled) *) {
+      color: var(--color-info-subtle);
+      --icon-color: var(--color-info-subtle);
     }
   }
   .group-enabled\/checkbox\:group-indeterminate\/checkbox\:bg-highlight {
@@ -1675,30 +1698,55 @@
       }
     }
   }
-  .group-disabled\:hidden {
-    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
-      display: none;
+  .group-enabled\/switch\:group-hover\/switch\:bg-interactive-hover-dark {
+    &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
+        background-color: var(--color-interactive-hover-dark);
+      }
     }
   }
-  .group-disabled\:bg-interactive-disabled {
-    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
-      background-color: var(--color-interactive-disabled);
+  .group-enabled\/switch\:group-hover\/switch\:outline-interactive-hover {
+    &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
+        outline-color: var(--color-interactive-hover);
+      }
     }
   }
-  .group-disabled\:fg-disabled {
-    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
-      color: var(--color-disabled);
-      --icon-color: var(--color-disabled);
+  .group-enabled\/switch\:group-focus\/switch\:bg-interactive-hover-dark {
+    &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
+        background-color: var(--color-interactive-hover-dark);
+      }
     }
   }
-  .group-disabled\:text-interactive-disabled {
-    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
-      color: var(--color-interactive-disabled);
+  .group-enabled\/switch\:group-focus\/switch\:outline-interactive-hover {
+    &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
+        outline-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .group-enabled\/text-area-field\:group-invalid\/text-area-field\:outline-serious {
+    &:is(:is(:where(.group\/text-area-field):not([disabled], [data-disabled]), :where(.group\/text-area-field):enabled) *) {
+      &:is(:is(:where(.group\/text-area-field):is([invalid], [data-invalid]), :where(.group\/text-area-field):invalid) *) {
+        outline-color: var(--color-serious);
+      }
     }
   }
-  .group-disabled\:outline-interactive-disabled {
+  .group-disabled\:hidden {
     &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
-      outline-color: var(--color-interactive-disabled);
+      display: none;
+    }
+  }
+  .group-disabled\/accordion\:cursor-not-allowed {
+    &:is(:is(:where(.group\/accordion):is([disabled], [data-disabled]), :where(.group\/accordion):disabled) *) {
+      cursor: not-allowed;
+    }
+  }
+  .group-disabled\/accordion\:fg-disabled {
+    &:is(:is(:where(.group\/accordion):is([disabled], [data-disabled]), :where(.group\/accordion):disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
     }
   }
   .group-disabled\/checkbox\:text-interactive-disabled {
@@ -1721,6 +1769,137 @@
       outline-color: var(--color-interactive-disabled);
     }
   }
+  .group-disabled\/switch\:bg-interactive-disabled {
+    &:is(:is(:where(.group\/switch):is([disabled], [data-disabled]), :where(.group\/switch):disabled) *) {
+      background-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-disabled\/switch\:text-interactive-disabled {
+    &:is(:is(:where(.group\/switch):is([disabled], [data-disabled]), :where(.group\/switch):disabled) *) {
+      color: var(--color-interactive-disabled);
+    }
+  }
+  .group-disabled\/switch\:outline-interactive-disabled {
+    &:is(:is(:where(.group\/switch):is([disabled], [data-disabled]), :where(.group\/switch):disabled) *) {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-disabled\/text-area-field\:fg-disabled {
+    &:is(:is(:where(.group\/text-area-field):is([disabled], [data-disabled]), :where(.group\/text-area-field):disabled) *) {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
+  .group-disabled\/text-area-field\:text-disabled {
+    &:is(:is(:where(.group\/text-area-field):is([disabled], [data-disabled]), :where(.group\/text-area-field):disabled) *) {
+      color: var(--color-disabled);
+    }
+  }
+  .group-disabled\/text-area-field\:outline-interactive-disabled {
+    &:is(:is(:where(.group\/text-area-field):is([disabled], [data-disabled]), :where(.group\/text-area-field):disabled) *) {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-disabled\/text-field\:fg-disabled {
+    &:is(:is(:where(.group\/text-field):is([disabled], [data-disabled]), :where(.group\/text-field):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)[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)[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)[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)[data-size="medium"] *) {
+      max-width: 400px;
+    }
+  }
+  .group-size-medium\/input\:min-w-\[160px\] {
+    &:is(:where(.group\/input)[data-size="medium"] *) {
+      min-width: 160px;
+    }
+  }
+  .group-size-medium\/input\:text-body-s {
+    &:is(:where(.group\/input)[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)[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)[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)[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)[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)[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)[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)[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)[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"] *) {
       border-radius: var(--radius-small);
@@ -1810,76 +1989,33 @@
       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):is([expanded], [data-expanded]) *) {
       rotate: 180deg;
     }
   }
   .group-selected\:rotate-180 {
-    &:is(:where(.group)[data-selected] *) {
+    &:is(:is(:where(.group)[data-selected], :where(.group):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\: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\: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\: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\: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-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] *) {
+      &:is(:is(:where(.group\/checkbox)[data-selected], :where(.group\/checkbox):checked) *) {
         background-color: var(--color-highlight);
       }
     }
   }
   .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] *) {
+      &:is(:is(:where(.group\/checkbox)[data-selected], :where(.group\/checkbox):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-selected], :where(.group\/checkbox):checked) *) {
         &:is(:is(:where(.group\/checkbox)[data-hovered], :where(.group\/checkbox):hover) *) {
           outline-color: var(--color-interactive-hover);
         }
@@ -1888,7 +2024,7 @@
   }
   .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-selected], :where(.group\/checkbox):checked) *) {
         &:is(:is(:where(.group\/checkbox)[data-focused], :where(.group\/checkbox):focus) *) {
           outline-color: var(--color-interactive-hover);
         }
@@ -1897,21 +2033,29 @@
   }
   .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] *) {
+      &:is(:is(:where(.group\/checkbox)[data-selected], :where(.group\/checkbox):checked) *) {
         background-color: var(--color-interactive-disabled);
       }
     }
   }
+  .group-disabled\/checkbox\:group-selected\/checkbox\:fg-inverse-light {
+    &:is(:is(:where(.group\/checkbox):is([disabled], [data-disabled]), :where(.group\/checkbox):disabled) *) {
+      &:is(:is(:where(.group\/checkbox)[data-selected], :where(.group\/checkbox):checked) *) {
+        color: var(--color-inverse-light);
+        --icon-color: var(--color-inverse-light);
+      }
+    }
+  }
   .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] *) {
+      &:is(:is(:where(.group\/radio)[data-selected], :where(.group\/radio):checked) *) {
         outline-color: var(--color-highlight);
       }
     }
   }
   .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-selected], :where(.group\/radio):checked) *) {
         &:is(:is(:where(.group\/radio)[data-hovered], :where(.group\/radio):hover) *) {
           outline-color: var(--color-interactive-hover);
         }
@@ -1920,13 +2064,56 @@
   }
   .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-selected], :where(.group\/radio):checked) *) {
         &:is(:is(:where(.group\/radio)[data-focused], :where(.group\/radio):focus) *) {
           outline-color: var(--color-interactive-hover);
         }
       }
     }
   }
+  .group-enabled\/switch\:group-selected\/switch\:outline-highlight {
+    &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
+        outline-color: var(--color-highlight);
+      }
+    }
+  }
+  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:bg-highlight-subtle {
+    &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
+        &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
+          background-color: var(--color-highlight-subtle);
+        }
+      }
+    }
+  }
+  .group-enabled\/switch\:group-selected\/switch\:group-hover\/switch\:outline-highlight {
+    &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
+        &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
+          outline-color: var(--color-highlight);
+        }
+      }
+    }
+  }
+  .group-enabled\/switch\:group-selected\/switch\:group-focus\/switch\:bg-highlight-subtle {
+    &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
+        &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
+          background-color: var(--color-highlight-subtle);
+        }
+      }
+    }
+  }
+  .group-enabled\/switch\:group-selected\/switch\:group-focus\/switch\:outline-interactive-hover {
+    &:is(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
+        &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
+          outline-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
   .placeholder\:text-default-dark {
     &::placeholder {
       color: var(--color-default-dark);
@@ -1937,6 +2124,13 @@
       color: var(--color-disabled);
     }
   }
+  .group-disabled\/text-area-field\:placeholder\:text-disabled {
+    &:is(:is(:where(.group\/text-area-field):is([disabled], [data-disabled]), :where(.group\/text-area-field):disabled) *) {
+      &::placeholder {
+        color: var(--color-disabled);
+      }
+    }
+  }
   .before\:mr-l {
     &::before {
       content: var(--tw-content);
@@ -1975,9 +2169,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(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
         &::before {
           content: var(--tw-content);
           background-color: var(--color-interactive-hover);
@@ -1985,9 +2179,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(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
         &::before {
           content: var(--tw-content);
           background-color: var(--color-interactive-hover);
@@ -1995,33 +2189,53 @@
       }
     }
   }
-  .group-disabled\:before\:bg-disabled {
-    &:is(:is(:where(.group):is([disabled], [data-disabled]), :where(.group):disabled) *) {
+  .group-disabled\/switch\:before\:bg-disabled {
+    &:is(:is(:where(.group\/switch):is([disabled], [data-disabled]), :where(.group\/switch):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(:is(:where(.group\/radio):not([disabled], [data-disabled]), :where(.group\/radio):enabled) *) {
+      &:is(:is(:where(.group\/radio)[data-selected], :where(.group\/radio):checked) *) {
+        &::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(:is(:where(.group\/radio)[data-selected], :where(.group\/radio):checked) *) {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--color-interactive-disabled);
+        }
+      }
+    }
+  }
+  .group-selected\/switch\:before\:mr-0 {
+    &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):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(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):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(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
         &::before {
           content: var(--tw-content);
           background-color: var(--color-highlight);
@@ -2029,10 +2243,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(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
+        &:is(:is(:where(.group\/switch)[data-hovered], :where(.group\/switch):hover) *) {
           &::before {
             content: var(--tw-content);
             background-color: var(--color-highlight);
@@ -2041,10 +2255,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(:is(:where(.group\/switch):not([disabled], [data-disabled]), :where(.group\/switch):enabled) *) {
+      &:is(:is(:where(.group\/switch)[data-selected], :where(.group\/switch):checked) *) {
+        &:is(:is(:where(.group\/switch)[data-focused], :where(.group\/switch):focus) *) {
           &::before {
             content: var(--tw-content);
             background-color: var(--color-highlight);
@@ -2053,32 +2267,28 @@
       }
     }
   }
-  .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 {
+    &:is([open], [data-open]), &:open {
+      background-color: var(--color-highlight-bold);
+    }
+  }
+  .open\:bg-serious-bold {
+    &:is([open], [data-open]), &:open {
+      background-color: var(--color-serious-bold);
+    }
+  }
+  .open\:fg-inverse-light {
+    &:is([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 {
@@ -2107,11 +2317,6 @@
       }
     }
   }
-  .empty\:\[inset\:var\(--badge-empty-inset\,initial\)\] {
-    &[data-empty], &:empty {
-      inset: var(--badge-empty-inset,initial);
-    }
-  }
   .empty\:hidden {
     &[data-empty], &:empty {
       display: none;
@@ -2123,11 +2328,6 @@
       height: var(--spacing-s);
     }
   }
-  .empty\:min-w-none {
-    &[data-empty], &:empty {
-      min-width: var(--spacing-none);
-    }
-  }
   .empty\:px-none {
     &[data-empty], &:empty {
       padding-inline: var(--spacing-none);
@@ -2138,8 +2338,8 @@
       outline-color: var(--color-highlight);
     }
   }
-  .group-enabled\:focus-within\:bg-interactive-hover-dark {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+  .group-enabled\/accordion\:focus-within\:bg-interactive-hover-dark {
+    &:is(:is(:where(.group\/accordion):not([disabled], [data-disabled]), :where(.group\/accordion):enabled) *) {
       &[data-focus-within], &:focus-within {
         background-color: var(--color-interactive-hover-dark);
       }
@@ -2184,13 +2384,20 @@
       outline-style: solid;
     }
   }
-  .group-enabled\:hover\:bg-interactive-hover-dark {
-    &:is(:is(:where(.group):not([disabled], [data-disabled]), :where(.group):enabled) *) {
+  .group-enabled\/accordion\:hover\:bg-interactive-hover-dark {
+    &:is(:is(:where(.group\/accordion):not([disabled], [data-disabled]), :where(.group\/accordion):enabled) *) {
       &[data-hovered], &:hover {
         background-color: var(--color-interactive-hover-dark);
       }
     }
   }
+  .group-enabled\/text-area-field\:hover\:outline-interactive-hover {
+    &:is(:is(:where(.group\/text-area-field):not([disabled], [data-disabled]), :where(.group\/text-area-field):enabled) *) {
+      &[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 {
@@ -2242,11 +2449,6 @@
       outline-color: var(--color-interactive-hover);
     }
   }
-  .focus\:outline-serious {
-    &[data-focused], &:focus {
-      outline-color: var(--color-serious);
-    }
-  }
   .focus\:outline-none {
     &[data-focused], &:focus {
       --tw-outline-style: none;
@@ -2259,6 +2461,13 @@
       outline-style: solid;
     }
   }
+  .group-enabled\/text-area-field\:focus\:outline-highlight {
+    &:is(:is(:where(.group\/text-area-field):not([disabled], [data-disabled]), :where(.group\/text-area-field):enabled) *) {
+      &[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 {
@@ -2298,6 +2507,11 @@
       background-color: var(--color-surface-default);
     }
   }
+  .enabled\:bg-transparent {
+    &:not([disabled], [data-disabled]), &:enabled {
+      background-color: transparent;
+    }
+  }
   .enabled\:fg-critical {
     &:not([disabled], [data-disabled]), &:enabled {
       color: var(--color-critical);
@@ -2337,6 +2551,27 @@
       outline-color: var(--color-serious);
     }
   }
+  .enabled\:group-invalid\/input\:outline-serious {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &:is(:is(:where(.group\/input):is([invalid], [data-invalid]), :where(.group\/input):invalid) *) {
+        outline-color: var(--color-serious);
+      }
+    }
+  }
+  .enabled\:group-hover\/input\:outline-interactive-hover {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &:is(:is(:where(.group\/input)[data-hovered], :where(.group\/input):hover) *) {
+        outline-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .enabled\:group-focus\/input\:outline-highlight {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &:is(:is(:where(.group\/input)[data-focused], :where(.group\/input):focus) *) {
+        outline-color: var(--color-highlight);
+      }
+    }
+  }
   .enabled\:hover\:bg-critical-hover {
     &:not([disabled], [data-disabled]), &:enabled {
       &[data-hovered], &:hover {
@@ -2365,6 +2600,13 @@
       }
     }
   }
+  .enabled\:hover\:bg-transparent {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-hovered], &:hover {
+        background-color: transparent;
+      }
+    }
+  }
   .enabled\:hover\:fg-interactive-hover {
     &:not([disabled], [data-disabled]), &:enabled {
       &[data-hovered], &:hover {
@@ -2408,6 +2650,13 @@
       }
     }
   }
+  .enabled\:focus\:bg-transparent {
+    &:not([disabled], [data-disabled]), &:enabled {
+      &[data-focused], &:focus {
+        background-color: transparent;
+      }
+    }
+  }
   .enabled\:focus\:fg-interactive-hover {
     &:not([disabled], [data-disabled]), &:enabled {
       &[data-focused], &:focus {
@@ -2444,11 +2693,23 @@
       --icon-color: var(--color-disabled);
     }
   }
+  .disabled\:text-disabled {
+    &:is([disabled], [data-disabled]), &:disabled {
+      color: var(--color-disabled);
+    }
+  }
   .disabled\:outline-interactive-disabled {
     &:is([disabled], [data-disabled]), &:disabled {
       outline-color: var(--color-interactive-disabled);
     }
   }
+  .disabled\:placeholder\:text-disabled {
+    &:is([disabled], [data-disabled]), &:disabled {
+      &::placeholder {
+        color: var(--color-disabled);
+      }
+    }
+  }
   .data-selected\:outline-highlight {
     &[data-selected] {
       outline-color: var(--color-highlight);
@@ -2465,7 +2726,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);
       }
     }
@@ -2518,6 +2779,254 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .placement-left\:left-\[attr\(data-offset-x_px\,0px\)\] {
+    &[data-placement~="left"] {
+      left: attr(data-offset-x px,0px);
+    }
+  }
+  .placement-left\:-translate-x-1\/2 {
+    &[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\)\] {
+    &[data-placement~="right"] {
+      right: attr(data-offset-x px,0px);
+    }
+  }
+  .placement-right\:translate-x-1\/2 {
+    &[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\)\] {
+    &[data-placement~="top"] {
+      top: attr(data-offset-y px,0px);
+    }
+  }
+  .placement-top\:-translate-y-1\/2 {
+    &[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\)\] {
+    &[data-placement~="bottom"] {
+      bottom: attr(data-offset-y px,0px);
+    }
+  }
+  .placement-bottom\:translate-y-1\/2 {
+    &[data-placement~="bottom"] {
+      --tw-translate-y: calc(1/2 * 100%);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .size-large\:gap-xs {
+    &[data-size="large"] {
+      gap: var(--spacing-xs);
+    }
+  }
+  .size-large\:p-xs {
+    &[data-size="large"] {
+      padding: var(--spacing-xs);
+    }
+  }
+  .size-large\:px-m {
+    &[data-size="large"] {
+      padding-inline: var(--spacing-m);
+    }
+  }
+  .size-large\:py-s {
+    &[data-size="large"] {
+      padding-block: var(--spacing-s);
+    }
+  }
+  .size-large\:text-button-l {
+    &[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\)\] {
+    &[data-size="large"] {
+      --icon-size: var(--icon-size-l);
+    }
+  }
+  .size-medium\:size-\[32px\] {
+    &[data-size="medium"] {
+      width: 32px;
+      height: 32px;
+    }
+  }
+  .size-medium\:gap-xs {
+    &[data-size="medium"] {
+      gap: var(--spacing-xs);
+    }
+  }
+  .size-medium\:p-xs {
+    &[data-size="medium"] {
+      padding: var(--spacing-xs);
+    }
+  }
+  .size-medium\:px-m {
+    &[data-size="medium"] {
+      padding-inline: var(--spacing-m);
+    }
+  }
+  .size-medium\:px-s {
+    &[data-size="medium"] {
+      padding-inline: var(--spacing-s);
+    }
+  }
+  .size-medium\:py-s {
+    &[data-size="medium"] {
+      padding-block: var(--spacing-s);
+    }
+  }
+  .size-medium\:py-xs {
+    &[data-size="medium"] {
+      padding-block: var(--spacing-xs);
+    }
+  }
+  .size-medium\:text-body-s {
+    &[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 {
+    &[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 {
+    &[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 {
+    &[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\)\] {
+    &[data-size="medium"] {
+      --icon-size: var(--icon-size-m);
+    }
+  }
+  .size-small\:size-xl {
+    &[data-size="small"] {
+      width: var(--spacing-xl);
+      height: var(--spacing-xl);
+    }
+  }
+  .size-small\:gap-xxs {
+    &[data-size="small"] {
+      gap: var(--spacing-xxs);
+    }
+  }
+  .size-small\:rounded-small {
+    &[data-size="small"] {
+      border-radius: var(--radius-small);
+    }
+  }
+  .size-small\:p-xxs {
+    &[data-size="small"] {
+      padding: var(--spacing-xxs);
+    }
+  }
+  .size-small\:px-s {
+    &[data-size="small"] {
+      padding-inline: var(--spacing-s);
+    }
+  }
+  .size-small\:py-xs {
+    &[data-size="small"] {
+      padding-block: var(--spacing-xs);
+    }
+  }
+  .size-small\:text-body-xs {
+    &[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 {
+    &[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 {
+    &[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\)\] {
+    &[data-size="small"] {
+      --icon-size: var(--icon-size-s);
+    }
+  }
+  .size-xsmall\:gap-xxs {
+    &[data-size="xsmall"] {
+      gap: var(--spacing-xxs);
+    }
+  }
+  .size-xsmall\:rounded-small {
+    &[data-size="xsmall"] {
+      border-radius: var(--radius-small);
+    }
+  }
+  .size-xsmall\:p-xxs {
+    &[data-size="xsmall"] {
+      padding: var(--spacing-xxs);
+    }
+  }
+  .size-xsmall\:px-s {
+    &[data-size="xsmall"] {
+      padding-inline: var(--spacing-s);
+    }
+  }
+  .size-xsmall\:py-xs {
+    &[data-size="xsmall"] {
+      padding-block: var(--spacing-xs);
+    }
+  }
+  .size-xsmall\:text-button-xs {
+    &[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\)\] {
+    &[data-size="xsmall"] {
+      --icon-size: var(--icon-size-xs);
+    }
+  }
   .orientation-horizontal\:flex-col {
     &[data-orientation="horizontal"] {
       flex-direction: column;
@@ -2543,37 +3052,53 @@
       gap: var(--spacing-xs);
     }
   }
+  .selected\:bg-highlight-bold {
+    &[data-selected], &:checked {
+      background-color: var(--color-highlight-bold);
+    }
+  }
+  .selected\:bg-serious-bold {
+    &[data-selected], &:checked {
+      background-color: var(--color-serious-bold);
+    }
+  }
+  .selected\:fg-inverse-light {
+    &[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] {
+      &[data-selected], &:checked {
         background-color: var(--color-critical-subtle);
       }
     }
   }
   .enabled\:selected\:bg-highlight-subtle {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         background-color: var(--color-highlight-subtle);
       }
     }
   }
   .enabled\:selected\:bg-info-subtle {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         background-color: var(--color-info-subtle);
       }
     }
   }
   .enabled\:selected\:bg-serious-subtle {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         background-color: var(--color-serious-subtle);
       }
     }
   }
   .enabled\:selected\:fg-highlight {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         color: var(--color-highlight);
         --icon-color: var(--color-highlight);
       }
@@ -2581,14 +3106,14 @@
   }
   .enabled\:selected\:outline-highlight {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         outline-color: var(--color-highlight);
       }
     }
   }
   .enabled\:selected\:hover\:bg-critical-hover {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         &[data-hovered], &:hover {
           background-color: var(--color-critical-hover);
         }
@@ -2597,7 +3122,7 @@
   }
   .enabled\:selected\:hover\:bg-interactive-hover-light {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         &[data-hovered], &:hover {
           background-color: var(--color-interactive-hover-light);
         }
@@ -2606,7 +3131,7 @@
   }
   .enabled\:selected\:hover\:bg-serious-hover {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         &[data-hovered], &:hover {
           background-color: var(--color-serious-hover);
         }
@@ -2615,7 +3140,7 @@
   }
   .enabled\:selected\:hover\:fg-highlight {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         &[data-hovered], &:hover {
           color: var(--color-highlight);
           --icon-color: var(--color-highlight);
@@ -2625,7 +3150,7 @@
   }
   .enabled\:selected\:hover\:outline-interactive-hover {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         &[data-hovered], &:hover {
           outline-color: var(--color-interactive-hover);
         }
@@ -2634,7 +3159,7 @@
   }
   .enabled\:selected\:focus\:bg-critical-hover {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         &[data-focused], &:focus {
           background-color: var(--color-critical-hover);
         }
@@ -2643,7 +3168,7 @@
   }
   .enabled\:selected\:focus\:bg-interactive-hover-light {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         &[data-focused], &:focus {
           background-color: var(--color-interactive-hover-light);
         }
@@ -2652,7 +3177,7 @@
   }
   .enabled\:selected\:focus\:bg-serious-hover {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         &[data-focused], &:focus {
           background-color: var(--color-serious-hover);
         }
@@ -2661,7 +3186,7 @@
   }
   .enabled\:selected\:focus\:fg-highlight {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         &[data-focused], &:focus {
           color: var(--color-highlight);
           --icon-color: var(--color-highlight);
@@ -2671,7 +3196,7 @@
   }
   .enabled\:selected\:focus\:outline-interactive-hover {
     &:not([disabled], [data-disabled]), &:enabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         &[data-focused], &:focus {
           outline-color: var(--color-interactive-hover);
         }
@@ -2680,7 +3205,7 @@
   }
   .disabled\:selected\:bg-interactive-disabled {
     &:is([disabled], [data-disabled]), &:disabled {
-      &[data-selected] {
+      &[data-selected], &:checked {
         background-color: var(--color-interactive-disabled);
       }
     }
@@ -2690,6 +3215,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 +3297,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 +3316,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);
     }
   }
@@ -2821,6 +3340,11 @@
       }
     }
   }
+  .\[\&\[data-placement\]\]\:absolute {
+    &[data-placement] {
+      position: absolute;
+    }
+  }
 }
 :root {
   --colors-neutral-10: #0b0b0b;
@@ -2888,34 +3412,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 +3470,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 +3715,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 +3780,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: "";
     }
   }