@accelint/design-toolkit 0.0.1 → 1.0.0

package/dist/styles.css

@@ -101,6 +101,8 @@
   :root, :host {
     --font-weight-normal: 400;
     --font-weight-medium: 500;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --font-primary: "Roboto Flex", sans-serif;
     --font-display: "Roboto Mono", monospace;
     --color-surface-default: var(--neutral-10, #0b0b0b);
@@ -136,8 +138,8 @@
     --color-critical-subtle: var(--utility-critical-05, #2a0706);
     --color-default-light: var(--neutral-01, #ffffff);
     --color-default-dark: var(--neutral-03, #898989);
-    --color-inverse-dark: var(--neutral-09, #222222);
-    --color-inverse-light: var(--neutral-07, #383838);
+    --color-inverse-dark: var(--neutral-07,#383838);
+    --color-inverse-light: var(--neutral-09, #222222);
     --color-disabled: var(--neutral-05, #565656);
     --color-highlight: var(--highlight-primary-03, #28f5be);
     --color-info: var(--neutral-04, #686868);
@@ -151,13 +153,14 @@
     --color-classification-confidential: var(--classification-confidential, #0033a0);
     --color-classification-secret: var(--classification-secret, #c8102e);
     --color-classification-top-secret: var(--classification-top-secret, #ff8c00);
-    --color-classification-top-secret-sci: var(--classification-top-secret-sci, #fce83a);
+    --color-classification-ts-sci: var(--classification-ts-sci, #fce83a);
     --radius-none: 0px;
     --radius-small: 2px;
     --radius-medium: 4px;
     --radius-large: 8px;
     --radius-round: 80px;
     --spacing-none: unset;
+    --spacing-0: 0;
     --spacing-xxs: 2px;
     --spacing-xs: 4px;
     --spacing-s: 8px;
@@ -329,6 +332,9 @@
   .\[inset\:var\(--badge-inset\,initial\)\] {
     inset: var(--badge-inset,initial);
   }
+  .right-\[5px\] {
+    right: 5px;
+  }
   .right-\[20px\] {
     right: 20px;
   }
@@ -356,6 +362,12 @@
   .mt-oversized {
     margin-top: var(--spacing-oversized);
   }
+  .mt-xl {
+    margin-top: var(--spacing-xl);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
   .block {
     display: block;
   }
@@ -383,10 +395,6 @@
     width: 32px;
     height: 32px;
   }
-  .size-\[var\(--icon-size\,var\(--spacing-xl\)\)\] {
-    width: var(--icon-size,var(--spacing-xl));
-    height: var(--icon-size,var(--spacing-xl));
-  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -423,8 +431,8 @@
     width: var(--spacing-xxs);
     height: var(--spacing-xxs);
   }
-  .\[height\:var\(--icon-size\,--spacing-xl\)\] {
-    height: var(--icon-size,--spacing-xl);
+  .\[height\:var\(--icon-size\)\] {
+    height: var(--icon-size);
   }
   .h-\[40px\] {
     height: 40px;
@@ -432,9 +440,24 @@
   .h-\[90px\] {
     height: 90px;
   }
+  .h-\[var\(--icon-size\,12px\)\] {
+    height: var(--icon-size,12px);
+  }
+  .h-\[var\(--icon-size\,16px\)\] {
+    height: var(--icon-size,16px);
+  }
+  .h-\[var\(--icon-size\,20px\)\] {
+    height: var(--icon-size,20px);
+  }
+  .h-\[var\(--icon-size\,24px\)\] {
+    height: var(--icon-size,24px);
+  }
   .h-l {
     height: var(--spacing-l);
   }
+  .h-xl {
+    height: var(--spacing-xl);
+  }
   .min-h-\[20px\] {
     min-height: 20px;
   }
@@ -447,8 +470,17 @@
   .min-h-xxl {
     min-height: var(--spacing-xxl);
   }
-  .\[width\:var\(--icon-size\,--spacing-xl\)\] {
-    width: var(--icon-size,--spacing-xl);
+  .\[width\:var\(--icon-size\)\] {
+    width: var(--icon-size);
+  }
+  .w-\[32px\] {
+    width: 32px;
+  }
+  .w-\[32px\] {
+    width: 32px;
+  }
+  .w-\[80px\] {
+    width: 80px;
   }
   .w-\[80px\] {
     width: 80px;
@@ -456,27 +488,87 @@
   .w-\[90px\] {
     width: 90px;
   }
+  .w-\[90px\] {
+    width: 90px;
+  }
+  .w-\[120px\] {
+    width: 120px;
+  }
   .w-\[120px\] {
     width: 120px;
   }
+  .w-\[280px\] {
+    width: 280px;
+  }
+  .w-\[280px\] {
+    width: 280px;
+  }
+  .w-\[size\] {
+    width: size;
+  }
   .w-\[size\] {
     width: size;
   }
+  .w-\[var\(--icon-size\,12px\)\] {
+    width: var(--icon-size,12px);
+  }
+  .w-\[var\(--icon-size\,12px\)\] {
+    width: var(--icon-size,12px);
+  }
+  .w-\[var\(--icon-size\,16px\)\] {
+    width: var(--icon-size,16px);
+  }
+  .w-\[var\(--icon-size\,16px\)\] {
+    width: var(--icon-size,16px);
+  }
+  .w-\[var\(--icon-size\,20px\)\] {
+    width: var(--icon-size,20px);
+  }
+  .w-\[var\(--icon-size\,20px\)\] {
+    width: var(--icon-size,20px);
+  }
+  .w-\[var\(--icon-size\,24px\)\] {
+    width: var(--icon-size,24px);
+  }
+  .w-\[var\(--icon-size\,24px\)\] {
+    width: var(--icon-size,24px);
+  }
   .w-content {
     width: fit-content;
   }
+  .w-full {
+    width: 100%;
+  }
+  .w-xl {
+    width: var(--spacing-xl);
+  }
   .max-w-\[160px\] {
     max-width: 160px;
   }
   .min-w-l {
     min-width: var(--spacing-l);
   }
+  .flex-none {
+    flex: none;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .cursor-crosshair {
+    cursor: crosshair;
+  }
+  .cursor-default {
+    cursor: default;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
   .cursor-pointer {
     cursor: pointer;
   }
+  .auto-cols-max {
+    grid-auto-columns: max-content;
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -489,6 +581,9 @@
   .flex-row {
     flex-direction: row;
   }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
   .items-baseline {
     align-items: baseline;
   }
@@ -592,9 +687,6 @@
   .border-advisory {
     border-color: var(--color-advisory);
   }
-  .border-advisory-bold {
-    border-color: var(--color-advisory-bold);
-  }
   .border-critical {
     border-color: var(--color-critical);
   }
@@ -604,15 +696,9 @@
   .border-info {
     border-color: var(--color-info);
   }
-  .border-info-bold {
-    border-color: var(--color-info-bold);
-  }
   .border-interactive {
     border-color: var(--color-interactive);
   }
-  .border-interactive-default {
-    border-color: var(--color-interactive-default);
-  }
   .border-interactive-disabled {
     border-color: var(--color-interactive-disabled);
   }
@@ -661,8 +747,8 @@
   .bg-classification-top-secret {
     background-color: var(--color-classification-top-secret);
   }
-  .bg-classification-top-secret-sci {
-    background-color: var(--color-classification-top-secret-sci);
+  .bg-classification-ts-sci {
+    background-color: var(--color-classification-ts-sci);
   }
   .bg-classification-unclass {
     background-color: var(--color-classification-unclass);
@@ -778,12 +864,21 @@
   .object-center {
     object-position: center;
   }
+  .p-0 {
+    padding: var(--spacing-0);
+  }
   .p-m {
     padding: var(--spacing-m);
   }
+  .p-oversized {
+    padding: var(--spacing-oversized);
+  }
   .p-s {
     padding: var(--spacing-s);
   }
+  .p-xs {
+    padding: var(--spacing-xs);
+  }
   .px-l {
     padding-inline: var(--spacing-l);
   }
@@ -799,6 +894,15 @@
   .py-xs {
     padding-block: var(--spacing-xs);
   }
+  .pr-xl {
+    padding-right: var(--spacing-xl);
+  }
+  .pl-m {
+    padding-left: var(--spacing-m);
+  }
+  .pl-s {
+    padding-left: var(--spacing-s);
+  }
   .text-center {
     text-align: center;
   }
@@ -811,90 +915,95 @@
   .font-primary {
     font-family: var(--font-primary);
   }
+  .text-body-l {
+    font-size: var(--body-l-size);
+    font-weight: 400;
+    letter-spacing: 0.5px;
+    line-height: var(--body-l-height);
+  }
+  .text-body-m {
+    font-size: var(--body-m-size);
+    font-weight: 400;
+    letter-spacing: 0.25px;
+    line-height: var(--body-m-height);
+  }
+  .text-body-s {
+    font-size: var(--body-s-size);
+    font-weight: 400;
+    letter-spacing: 0.4px;
+    line-height: var(--body-s-height);
+  }
+  .text-body-xs {
+    font-size: var(--body-xs-size);
+    font-weight: 400;
+    letter-spacing: 0.5px;
+    line-height: var(--body-xs-height);
+  }
+  .text-body-xxs {
+    font-size: var(--body-xxs-size);
+    font-weight: 400;
+    letter-spacing: 0.25px;
+    line-height: var(--body-xxs-height);
+  }
   .text-button-l {
     font-size: var(--button-l-size);
     font-weight: bold;
-    line-height: var(--button-l-height);
     letter-spacing: 0.5px;
+    line-height: var(--button-l-height);
   }
   .text-button-m {
     font-size: var(--button-m-size);
     font-weight: bold;
-    line-height: var(--button-m-height);
     letter-spacing: 0.25px;
+    line-height: var(--button-m-height);
   }
   .text-button-s {
     font-size: var(--button-s-size);
     font-weight: bold;
-    line-height: var(--button-s-height);
     letter-spacing: 0.4px;
+    line-height: var(--button-s-height);
   }
   .text-button-xs {
     font-size: var(--button-xs-size);
     font-weight: bold;
-    line-height: var(--button-xs-height);
     letter-spacing: 0.5px;
+    line-height: var(--button-xs-height);
   }
   .text-header-l {
     font-size: var(--header-l-size);
     font-weight: 500;
-    line-height: var(--header-l-height);
     letter-spacing: 0.18px;
+    line-height: var(--header-l-height);
   }
   .text-header-m {
     font-size: var(--header-m-size);
     font-weight: 500;
-    line-height: var(--header-m-height);
     letter-spacing: 0.25px;
+    line-height: var(--header-m-height);
   }
   .text-header-s {
     font-size: var(--header-s-size);
     font-weight: 500;
-    line-height: var(--header-s-height);
     letter-spacing: 0.4px;
+    line-height: var(--header-s-height);
   }
   .text-header-xl {
     font-size: var(--header-xl-size);
     font-weight: 500;
-    line-height: var(--header-xl-height);
     letter-spacing: 0.18px;
+    line-height: var(--header-xl-height);
   }
   .text-header-xs {
     font-size: var(--header-xs-size);
     font-weight: 500;
-    line-height: var(--header-xs-height);
     letter-spacing: 0.25px;
+    line-height: var(--header-xs-height);
   }
   .text-header-xxl {
     font-size: var(--header-xxl-size);
     font-weight: 500;
-    line-height: var(--header-xxl-height);
     letter-spacing: 0px;
-  }
-  .text-body-l {
-    font-size: var(--body-l-size);
-    line-height: var(--body-l-height);
-    letter-spacing: 0.5px;
-  }
-  .text-body-m {
-    font-size: var(--body-m-size);
-    line-height: var(--body-m-height);
-    letter-spacing: 0.25px;
-  }
-  .text-body-s {
-    font-size: var(--body-s-size);
-    line-height: var(--body-s-height);
-    letter-spacing: 0.4px;
-  }
-  .text-body-xs {
-    font-size: var(--body-xs-size);
-    line-height: var(--body-xs-height);
-    letter-spacing: 0.5px;
-  }
-  .text-body-xxs {
-    font-size: var(--body-xxs-size);
-    line-height: var(--body-xxs-height);
-    letter-spacing: 0.25px;
+    line-height: var(--header-xxl-height);
   }
   .text-\[24px\] {
     font-size: 24px;
@@ -952,6 +1061,10 @@
     color: var(--color-info);
     --icon-color: var(--color-info);
   }
+  .fg-interactive {
+    color: var(--color-interactive);
+    --icon-color: var(--color-interactive);
+  }
   .fg-interactive-default {
     color: var(--color-interactive-default);
     --icon-color: var(--color-interactive-default);
@@ -982,6 +1095,12 @@
   .text-default-dark {
     color: var(--color-default-dark);
   }
+  .text-default-light {
+    color: var(--color-default-light);
+  }
+  .text-disabled {
+    color: var(--color-disabled);
+  }
   .text-highlight {
     color: var(--color-highlight);
   }
@@ -991,6 +1110,9 @@
   .text-interactive-hover-light {
     color: var(--color-interactive-hover-light);
   }
+  .capitalize {
+    text-transform: capitalize;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1024,18 +1146,44 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
-  .brightness-150 {
-    --tw-brightness: brightness(150%);
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  .outline-advisory-bold {
+    outline-color: var(--color-advisory-bold);
   }
-  .saturate-200 {
-    --tw-saturate: saturate(200%);
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  .outline-critical {
+    outline-color: var(--color-critical);
+  }
+  .outline-highlight {
+    outline-color: var(--color-highlight);
+  }
+  .outline-info-bold {
+    outline-color: var(--color-info-bold);
+  }
+  .outline-interactive {
+    outline-color: var(--color-interactive);
+  }
+  .outline-interactive-default {
+    outline-color: var(--color-interactive-default);
   }
-  .sepia-50 {
-    --tw-sepia: sepia(50%);
+  .outline-interactive-disabled {
+    outline-color: var(--color-interactive-disabled);
+  }
+  .outline-interactive-hover {
+    outline-color: var(--color-interactive-hover);
+  }
+  .outline-normal {
+    outline-color: var(--color-normal);
+  }
+  .outline-serious {
+    outline-color: var(--color-serious);
+  }
+  .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1080,8 +1228,17 @@
   .icon-disabled {
     --icon-color: var(--color-disabled);
   }
-  .icon-size-xl {
-    --icon-size: var(--spacing-xl);
+  .icon-inverse-light {
+    --icon-color: var(--color-inverse-light);
+  }
+  .icon-size-\[15px\] {
+    --icon-size: 15px;
+  }
+  .icon-size-l {
+    --icon-size: var(--spacing-l);
+  }
+  .icon-size-m {
+    --icon-size: var(--spacing-m);
   }
   .not-ai-selected\:cursor-not-allowed {
     &:not(*[data-selected]) {
@@ -1098,11 +1255,221 @@
       --icon-color: var(--color-disabled);
     }
   }
+  .group-focus-within\:bg-highlight-subtle {
+    &:is(:where(.group):focus-within *) {
+      background-color: var(--color-highlight-subtle);
+    }
+  }
+  .group-focus-within\:bg-interactive-hover-dark {
+    &:is(:where(.group):focus-within *) {
+      background-color: var(--color-interactive-hover-dark);
+    }
+  }
+  .group-focus-within\:outline-interactive-hover {
+    &:is(:where(.group):focus-within *) {
+      outline-color: var(--color-interactive-hover);
+    }
+  }
+  .group-hover\:bg-highlight-subtle {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-highlight-subtle);
+      }
+    }
+  }
+  .group-hover\:bg-interactive-hover-dark {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-interactive-hover-dark);
+      }
+    }
+  }
+  .group-hover\:outline-highlight {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        outline-color: var(--color-highlight);
+      }
+    }
+  }
+  .group-hover\:outline-interactive-hover {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        outline-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .group-hover\:icon-default-light {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --icon-color: var(--color-default-light);
+      }
+    }
+  }
+  .group-hover\:icon-disabled {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        --icon-color: var(--color-disabled);
+      }
+    }
+  }
+  .group-focus\:icon-default-light {
+    &:is(:where(.group):focus *) {
+      --icon-color: var(--color-default-light);
+    }
+  }
+  .group-ai-expanded\:rotate-180 {
+    &:is(:where(.group)[data-expanded] *) {
+      rotate: 180deg;
+    }
+  }
+  .group-ai-disabled\:bg-interactive-disabled {
+    &:is(:where(.group)[data-disabled] *) {
+      background-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-ai-disabled\:outline-interactive-disabled {
+    &:is(:where(.group)[data-disabled] *) {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
+  .placeholder\:text-default-dark {
+    &::placeholder {
+      color: var(--color-default-dark);
+    }
+  }
+  .placeholder\:text-disabled {
+    &::placeholder {
+      color: var(--color-disabled);
+    }
+  }
+  .before\:absolute {
+    &::before {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .before\:right-\[3px\] {
+    &::before {
+      content: var(--tw-content);
+      right: 3px;
+    }
+  }
+  .before\:left-\[3px\] {
+    &::before {
+      content: var(--tw-content);
+      left: 3px;
+    }
+  }
+  .before\:block {
+    &::before {
+      content: var(--tw-content);
+      display: block;
+    }
+  }
+  .before\:size-m {
+    &::before {
+      content: var(--tw-content);
+      width: var(--spacing-m);
+      height: var(--spacing-m);
+    }
+  }
+  .before\:size-s {
+    &::before {
+      content: var(--tw-content);
+      width: var(--spacing-s);
+      height: var(--spacing-s);
+    }
+  }
+  .before\:rounded-full {
+    &::before {
+      content: var(--tw-content);
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .before\:rounded-round {
+    &::before {
+      content: var(--tw-content);
+      border-radius: var(--radius-round);
+    }
+  }
+  .before\:bg-default-dark {
+    &::before {
+      content: var(--tw-content);
+      background-color: var(--color-default-dark);
+    }
+  }
+  .before\:bg-highlight {
+    &::before {
+      content: var(--tw-content);
+      background-color: var(--color-highlight);
+    }
+  }
+  .before\:bg-interactive-disabled {
+    &::before {
+      content: var(--tw-content);
+      background-color: var(--color-interactive-disabled);
+    }
+  }
+  .before\:bg-transparent {
+    &::before {
+      content: var(--tw-content);
+      background-color: transparent;
+    }
+  }
+  .group-focus-within\:before\:bg-highlight {
+    &:is(:where(.group):focus-within *) {
+      &::before {
+        content: var(--tw-content);
+        background-color: var(--color-highlight);
+      }
+    }
+  }
+  .group-focus-within\:before\:bg-interactive-hover {
+    &:is(:where(.group):focus-within *) {
+      &::before {
+        content: var(--tw-content);
+        background-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .group-hover\:before\:bg-highlight {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--color-highlight);
+        }
+      }
+    }
+  }
+  .group-hover\:before\:bg-interactive-hover {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        &::before {
+          content: var(--tw-content);
+          background-color: var(--color-interactive-hover);
+        }
+      }
+    }
+  }
+  .group-ai-disabled\:before\:bg-disabled {
+    &:is(:where(.group)[data-disabled] *) {
+      &::before {
+        content: var(--tw-content);
+        background-color: var(--color-disabled);
+      }
+    }
+  }
   .empty\:\[inset\:var\(--badge-empty-inset\,initial\)\] {
     &:empty {
       inset: var(--badge-empty-inset,initial);
     }
   }
+  .empty\:hidden {
+    &:empty {
+      display: none;
+    }
+  }
   .empty\:size-s {
     &:empty {
       width: var(--spacing-s);
@@ -1119,18 +1486,14 @@
       padding-inline: var(--spacing-none);
     }
   }
-  .hover\:border-interactive-disabled {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-interactive-disabled);
-      }
+  .focus-within\:bg-interactive-hover-dark {
+    &:focus-within {
+      background-color: var(--color-interactive-hover-dark);
     }
   }
-  .hover\:border-interactive-hover {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-interactive-hover);
-      }
+  .focus-within\:bg-transparent {
+    &:focus-within {
+      background-color: transparent;
     }
   }
   .hover\:bg-critical-hover {
@@ -1183,6 +1546,28 @@
       }
     }
   }
+  .hover\:fg-interactive-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-interactive-hover);
+        --icon-color: var(--color-interactive-hover);
+      }
+    }
+  }
+  .hover\:outline-interactive-disabled {
+    &:hover {
+      @media (hover: hover) {
+        outline-color: var(--color-interactive-disabled);
+      }
+    }
+  }
+  .hover\:outline-interactive-hover {
+    &:hover {
+      @media (hover: hover) {
+        outline-color: var(--color-interactive-hover);
+      }
+    }
+  }
   .hover\:icon-default-light {
     &:hover {
       @media (hover: hover) {
@@ -1206,9 +1591,121 @@
       }
     }
   }
-  .ai-pressed\:border-interactive-hover {
-    &[data-pressed] {
-      border-color: var(--color-interactive-hover);
+  .focus\:bg-critical-hover {
+    &:focus {
+      background-color: var(--color-critical-hover);
+    }
+  }
+  .focus\:bg-default-light\/5 {
+    &:focus {
+      background-color: var(--color-default-light);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-default-light) 5%, transparent);
+      }
+    }
+  }
+  .focus\:bg-interactive-disabled {
+    &:focus {
+      background-color: var(--color-interactive-disabled);
+    }
+  }
+  .focus\:bg-interactive-hover-dark {
+    &:focus {
+      background-color: var(--color-interactive-hover-dark);
+    }
+  }
+  .focus\:bg-interactive-hover-light {
+    &:focus {
+      background-color: var(--color-interactive-hover-light);
+    }
+  }
+  .focus\:bg-serious-hover {
+    &:focus {
+      background-color: var(--color-serious-hover);
+    }
+  }
+  .focus\:bg-transparent {
+    &:focus {
+      background-color: transparent;
+    }
+  }
+  .focus\:fg-disabled {
+    &:focus {
+      color: var(--color-disabled);
+      --icon-color: var(--color-disabled);
+    }
+  }
+  .focus\:outline-highlight {
+    &:focus {
+      outline-color: var(--color-highlight);
+    }
+  }
+  .focus\:outline-interactive-disabled {
+    &:focus {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
+  .focus\:outline-interactive-hover {
+    &:focus {
+      outline-color: var(--color-interactive-hover);
+    }
+  }
+  .focus\:icon-default-light {
+    &:focus {
+      --icon-color: var(--color-default-light);
+    }
+  }
+  .not-ai-selected\:focus\:bg-interactive-disabled {
+    &:not(*[data-selected]) {
+      &:focus {
+        background-color: var(--color-interactive-disabled);
+      }
+    }
+  }
+  .data-\[variant\=compact\]\:gap-xs {
+    &[data-variant="compact"] {
+      gap: var(--spacing-xs);
+    }
+  }
+  .data-\[variant\=compact\]\:text-header-s {
+    &[data-variant="compact"] {
+      font-size: var(--header-s-size);
+      font-weight: 500;
+      letter-spacing: 0.4px;
+      line-height: var(--header-s-height);
+    }
+  }
+  .data-\[variant\=compact\]\:icon-size-l {
+    &[data-variant="compact"] {
+      --icon-size: var(--spacing-l);
+    }
+  }
+  .data-\[variant\=cozy\]\:gap-s {
+    &[data-variant="cozy"] {
+      gap: var(--spacing-s);
+    }
+  }
+  .data-\[variant\=cozy\]\:text-header-m {
+    &[data-variant="cozy"] {
+      font-size: var(--header-m-size);
+      font-weight: 500;
+      letter-spacing: 0.25px;
+      line-height: var(--header-m-height);
+    }
+  }
+  .data-\[variant\=cozy\]\:icon-size-xl {
+    &[data-variant="cozy"] {
+      --icon-size: var(--spacing-xl);
+    }
+  }
+  .md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-4 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
   .ai-pressed\:bg-critical-hover {
@@ -1236,6 +1733,11 @@
       background-color: transparent;
     }
   }
+  .ai-pressed\:outline-interactive-hover {
+    &[data-pressed] {
+      outline-color: var(--color-interactive-hover);
+    }
+  }
   .ai-pressed\:icon-default-light {
     &[data-pressed] {
       --icon-color: var(--color-default-light);
@@ -1246,6 +1748,26 @@
       cursor: default;
     }
   }
+  .ai-selected\:bg-highlight-subtle {
+    &[data-selected] {
+      background-color: var(--color-highlight-subtle);
+    }
+  }
+  .ai-selected\:bg-transparent {
+    &[data-selected] {
+      background-color: transparent;
+    }
+  }
+  .ai-selected\:outline-highlight {
+    &[data-selected] {
+      outline-color: var(--color-highlight);
+    }
+  }
+  .ai-selected\:outline-interactive-disabled {
+    &[data-selected] {
+      outline-color: var(--color-interactive-disabled);
+    }
+  }
   .ai-selected\:icon-highlight {
     &[data-selected] {
       --icon-color: var(--color-highlight);
@@ -1269,6 +1791,35 @@
       }
     }
   }
+  .ai-selected\:focus\:bg-highlight-subtle {
+    &[data-selected] {
+      &:focus {
+        background-color: var(--color-highlight-subtle);
+      }
+    }
+  }
+  .ai-selected\:focus\:bg-transparent {
+    &[data-selected] {
+      &:focus {
+        background-color: transparent;
+      }
+    }
+  }
+  .ai-disabled\:cursor-default {
+    &[data-disabled] {
+      cursor: default;
+    }
+  }
+  .ai-disabled\:cursor-not-allowed {
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
+  }
+  .ai-disabled\:text-interactive-disabled {
+    &[data-disabled] {
+      color: var(--color-interactive-disabled);
+    }
+  }
   .\[\&\:empty\]\:before\:content-\[\'CUI\'\] {
     &:empty {
       &::before {
@@ -1430,7 +1981,7 @@
   --classification-confidential: #0033a0;
   --classification-secret: #c8102e;
   --classification-top-secret: #ff8c00;
-  --classification-top-secret-sci: #fce83a;
+  --classification-ts-sci: #fce83a;
   --header-xxl-size: 32px;
   --header-xxl-height: 40px;
   --header-xl-size: 24px;
@@ -1462,6 +2013,26 @@
   --button-xs-size: 10px;
   --button-xs-height: 12px;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1606,6 +2177,11 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;