@accelint/design-toolkit 2.0.0 → 2.1.0

package/dist/styles.css

@@ -103,8 +103,6 @@
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --animate-spin: spin 1s linear infinite;
-    --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);
@@ -171,6 +169,10 @@
     --spacing-xl: 24px;
     --spacing-xxl: 40px;
     --spacing-oversized: 80px;
+    --icon-size-l: var(--spacing-xl);
+    --icon-size-m: 20px;
+    --icon-size-s: var(--spacing-l);
+    --icon-size-xs: var(--spacing-m);
   }
 }
 @layer base {
@@ -346,6 +348,12 @@
   .top-\[6px\] {
     top: 6px;
   }
+  .top-\[8px\] {
+    top: 8px;
+  }
+  .top-\[50\%\] {
+    top: 50%;
+  }
   .right-\[5px\] {
     right: 5px;
   }
@@ -361,18 +369,66 @@
   .bottom-\[20px\] {
     bottom: 20px;
   }
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
   .left-\[7px\] {
     left: 7px;
   }
+  .left-\[50\%\] {
+    left: 50%;
+  }
   .left-s {
     left: var(--spacing-s);
   }
+  .order-1 {
+    order: 1;
+  }
+  .order-2 {
+    order: 2;
+  }
+  .order-3 {
+    order: 3;
+  }
+  .order-4 {
+    order: 4;
+  }
+  .order-5 {
+    order: 5;
+  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
+  .col-span-3 {
+    grid-column: span 3 / span 3;
+  }
   .col-span-full {
     grid-column: 1 / -1;
   }
+  .col-start-1 {
+    grid-column-start: 1;
+  }
+  .col-start-2 {
+    grid-column-start: 2;
+  }
+  .col-start-3 {
+    grid-column-start: 3;
+  }
+  .row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .row-start-1 {
+    grid-row-start: 1;
+  }
+  .row-start-2 {
+    grid-row-start: 2;
+  }
+  .row-start-3 {
+    grid-row-start: 3;
+  }
+  .row-start-4 {
+    grid-row-start: 4;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -409,18 +465,12 @@
   .mt-xl {
     margin-top: var(--spacing-xl);
   }
-  .mr-s {
-    margin-right: var(--spacing-s);
-  }
   .mb-m {
     margin-bottom: var(--spacing-m);
   }
   .mb-s {
     margin-bottom: var(--spacing-s);
   }
-  .ml-auto {
-    margin-left: auto;
-  }
   .block {
     display: block;
   }
@@ -433,6 +483,9 @@
   .hidden {
     display: none;
   }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -454,6 +507,10 @@
     width: 32px;
     height: 32px;
   }
+  .size-\[400px\] {
+    width: 400px;
+    height: 400px;
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -490,9 +547,6 @@
     width: var(--spacing-xxs);
     height: var(--spacing-xxs);
   }
-  .\[height\:var\(--icon-size\)\] {
-    height: var(--icon-size);
-  }
   .h-\[16px\] {
     height: 16px;
   }
@@ -508,17 +562,8 @@
   .h-\[800px\] {
     height: 800px;
   }
-  .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-\[var\(--icon-size\,var\(--icon-size-m\)\)\] {
+    height: var(--icon-size,var(--icon-size-m));
   }
   .h-full {
     height: 100%;
@@ -526,9 +571,18 @@
   .h-l {
     height: var(--spacing-l);
   }
+  .h-m {
+    height: var(--spacing-m);
+  }
+  .h-s {
+    height: var(--spacing-s);
+  }
   .h-xl {
     height: var(--spacing-xl);
   }
+  .h-xxs {
+    height: var(--spacing-xxs);
+  }
   .max-h-\[200px\] {
     max-height: 200px;
   }
@@ -544,9 +598,6 @@
   .min-h-xxl {
     min-height: var(--spacing-xxl);
   }
-  .\[width\:var\(--icon-size\)\] {
-    width: var(--icon-size);
-  }
   .w-\(--trigger-width\) {
     width: var(--trigger-width);
   }
@@ -565,6 +616,12 @@
   .w-\[32px\] {
     width: 32px;
   }
+  .w-\[50px\] {
+    width: 50px;
+  }
+  .w-\[50px\] {
+    width: 50px;
+  }
   .w-\[80px\] {
     width: 80px;
   }
@@ -583,6 +640,12 @@
   .w-\[120px\] {
     width: 120px;
   }
+  .w-\[200px\] {
+    width: 200px;
+  }
+  .w-\[200px\] {
+    width: 200px;
+  }
   .w-\[280px\] {
     width: 280px;
   }
@@ -619,29 +682,11 @@
   .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\,var\(--icon-size-m\)\)\] {
+    width: var(--icon-size,var(--icon-size-m));
   }
-  .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-\[var\(--icon-size\,var\(--icon-size-m\)\)\] {
+    width: var(--icon-size,var(--icon-size-m));
   }
   .w-content {
     width: fit-content;
@@ -652,9 +697,18 @@
   .w-full {
     width: 100%;
   }
+  .w-m {
+    width: var(--spacing-m);
+  }
+  .w-s {
+    width: var(--spacing-s);
+  }
   .w-xl {
     width: var(--spacing-xl);
   }
+  .w-xxs {
+    width: var(--spacing-xxs);
+  }
   .max-w-\[160px\] {
     max-width: 160px;
   }
@@ -676,13 +730,31 @@
   .min-w-l {
     min-width: var(--spacing-l);
   }
+  .flex-auto {
+    flex: auto;
+  }
   .flex-none {
     flex: none;
   }
+  .grow {
+    flex-grow: 1;
+  }
+  .translate-x-\[40\%\] {
+    --tw-translate-x: 40%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-1\/2 {
+    --tw-translate-y: calc(1/2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-\[50\%\] {
+    --tw-translate-y: 50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .scale-x-\[-1\] {
     --tw-scale-x: -1;
     scale: var(--tw-scale-x) var(--tw-scale-y);
@@ -723,12 +795,33 @@
   .grid-cols-\[auto_1fr\] {
     grid-template-columns: auto 1fr;
   }
+  .grid-cols-\[auto_1fr_auto\] {
+    grid-template-columns: auto 1fr auto;
+  }
+  .grid-cols-\[auto_auto_1fr_auto_auto\] {
+    grid-template-columns: auto auto 1fr auto auto;
+  }
+  .grid-cols-\[auto_auto_auto\] {
+    grid-template-columns: auto auto auto;
+  }
   .grid-cols-\[minmax\(100px\,_1fr\)_min-content\] {
     grid-template-columns: minmax(100px, 1fr) min-content;
   }
+  .grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+  .grid-rows-\[auto_auto_1fr_auto\] {
+    grid-template-rows: auto auto 1fr auto;
+  }
+  .grid-rows-\[auto_auto_auto\] {
+    grid-template-rows: auto auto auto;
+  }
   .flex-col {
     flex-direction: column;
   }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
   .flex-row {
     flex-direction: row;
   }
@@ -768,6 +861,12 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-\(--spacing-xxl\) {
+    gap: var(--spacing-xxl);
+  }
+  .gap-\[11px\] {
+    gap: 11px;
+  }
   .gap-l {
     gap: var(--spacing-l);
   }
@@ -783,6 +882,9 @@
   .gap-xs {
     gap: var(--spacing-xs);
   }
+  .gap-xxl {
+    gap: var(--spacing-xxl);
+  }
   .gap-xxs {
     gap: var(--spacing-xxs);
   }
@@ -807,6 +909,15 @@
   .gap-y-xxl {
     row-gap: var(--spacing-xxl);
   }
+  .self-end {
+    align-self: flex-end;
+  }
+  .justify-self-center {
+    justify-self: center;
+  }
+  .justify-self-end {
+    justify-self: flex-end;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -965,6 +1076,12 @@
   .bg-default-light {
     background-color: var(--color-default-light);
   }
+  .bg-default-light\/40 {
+    background-color: var(--color-default-light);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-default-light) 40%, transparent);
+    }
+  }
   .bg-disabled {
     background-color: var(--color-disabled);
   }
@@ -1094,6 +1211,12 @@
   .py-xs {
     padding-block: var(--spacing-xs);
   }
+  .pt-s {
+    padding-top: var(--spacing-s);
+  }
+  .pt-xs {
+    padding-top: var(--spacing-xs);
+  }
   .pr-\[30px\] {
     padding-right: 30px;
   }
@@ -1103,6 +1226,12 @@
   .pr-xl {
     padding-right: var(--spacing-xl);
   }
+  .pb-s {
+    padding-bottom: var(--spacing-s);
+  }
+  .pb-xs {
+    padding-bottom: var(--spacing-xs);
+  }
   .pl-\[32px\] {
     padding-left: 32px;
   }
@@ -1115,9 +1244,6 @@
   .pl-s {
     padding-left: var(--spacing-s);
   }
-  .pl-xs {
-    padding-left: var(--spacing-xs);
-  }
   .text-center {
     text-align: center;
   }
@@ -1381,6 +1507,12 @@
   .outline-highlight {
     outline-color: var(--color-highlight);
   }
+  .outline-highlight-bold\/40 {
+    outline-color: var(--color-highlight-bold);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--color-highlight-bold) 40%, transparent);
+    }
+  }
   .outline-info-bold {
     outline-color: var(--color-info-bold);
   }
@@ -1411,11 +1543,6 @@
   .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;
@@ -1445,12 +1572,33 @@
   .\[--icon-size\:24px\] {
     --icon-size: 24px;
   }
+  .\[--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);
+  }
   .\[--icon-size\:var\(--spacing-l\)\] {
     --icon-size: var(--spacing-l);
   }
   .\[--icon-size\:var\(--spacing-xl\)\] {
     --icon-size: var(--spacing-xl);
   }
+  .\[--my-font-size\:12px\] {
+    --my-font-size: 12px;
+  }
+  .\[--my-font-size\:var\(--body-m-size\)\] {
+    --my-font-size: var(--body-m-size);
+  }
+  .\[background\:--color-default-light\] {
+    background: --color-default-light;
+  }
   .icon-default-dark {
     --icon-color: var(--color-default-dark);
   }
@@ -1463,29 +1611,17 @@
   .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);
-  }
-  .icon-size-xl {
-    --icon-size: var(--spacing-xl);
-  }
-  .not-ai-selected\:cursor-not-allowed {
+  .not-dtk-selected\:cursor-not-allowed {
     &:not(*[data-selected]) {
       cursor: not-allowed;
     }
   }
-  .not-ai-selected\:bg-interactive-disabled {
+  .not-dtk-selected\:bg-interactive-disabled {
     &:not(*[data-selected]) {
       background-color: var(--color-interactive-disabled);
     }
   }
-  .not-ai-selected\:icon-disabled {
+  .not-dtk-selected\:icon-disabled {
     &:not(*[data-selected]) {
       --icon-color: var(--color-disabled);
     }
@@ -1552,96 +1688,101 @@
       --icon-color: var(--color-default-light);
     }
   }
-  .group-ai-orientation-horizontal\:rounded-small {
+  .group-dtk-orientation-horizontal\:rounded-small {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-radius: var(--radius-small);
     }
   }
-  .group-ai-orientation-horizontal\:rounded-b-none {
+  .group-dtk-orientation-horizontal\:rounded-b-none {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
     }
   }
-  .group-ai-orientation-horizontal\:rounded-b-none {
+  .group-dtk-orientation-horizontal\:rounded-b-none {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-bottom-right-radius: var(--radius-none);
       border-bottom-left-radius: var(--radius-none);
     }
   }
-  .group-ai-orientation-horizontal\:border-b {
+  .group-dtk-orientation-horizontal\:border-b {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-bottom-style: var(--tw-border-style);
       border-bottom-width: 1px;
     }
   }
-  .group-ai-orientation-horizontal\:border-highlight {
+  .group-dtk-orientation-horizontal\:border-highlight {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-color: var(--color-highlight);
     }
   }
-  .group-ai-orientation-horizontal\:border-interactive-disabled {
+  .group-dtk-orientation-horizontal\:border-interactive-disabled {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-color: var(--color-interactive-disabled);
     }
   }
-  .group-ai-orientation-horizontal\:border-interactive-hover {
+  .group-dtk-orientation-horizontal\:border-interactive-hover {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-color: var(--color-interactive-hover);
     }
   }
-  .group-ai-orientation-horizontal\:border-static-light {
+  .group-dtk-orientation-horizontal\:border-static-light {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       border-color: var(--color-static-light);
     }
   }
-  .group-ai-orientation-horizontal\:pl-0 {
+  .group-dtk-orientation-horizontal\:pl-0 {
     &:is(:where(.group)[data-orientation="horizontal"] *) {
       padding-left: var(--spacing-0);
     }
   }
-  .group-ai-orientation-vertical\:border {
+  .group-dtk-orientation-vertical\:border {
     &:is(:where(.group)[data-orientation="vertical"] *) {
       border-style: var(--tw-border-style);
       border-width: 1px;
     }
   }
-  .group-ai-orientation-vertical\:border-interactive-hover {
+  .group-dtk-orientation-vertical\:border-interactive-hover {
     &:is(:where(.group)[data-orientation="vertical"] *) {
       border-color: var(--color-interactive-hover);
     }
   }
-  .group-ai-orientation-vertical\:border-transparent {
+  .group-dtk-orientation-vertical\:border-transparent {
     &:is(:where(.group)[data-orientation="vertical"] *) {
       border-color: transparent;
     }
   }
-  .group-ai-orientation-vertical\:pt-0 {
+  .group-dtk-orientation-vertical\:pt-0 {
     &:is(:where(.group)[data-orientation="vertical"] *) {
       padding-top: var(--spacing-0);
     }
   }
-  .group-ai-expanded\:rotate-180 {
+  .group-dtk-expanded\:rotate-180 {
     &:is(:where(.group)[data-expanded] *) {
       rotate: 180deg;
     }
   }
-  .group-ai-empty\:hidden {
+  .group-dtk-empty\:hidden {
     &:is(:where(.group)[data-empty] *) {
       display: none;
     }
   }
-  .group-ai-disabled\:hidden {
+  .group-dtk-selected\:rotate-180 {
+    &:is(:where(.group)[data-selected] *) {
+      rotate: 180deg;
+    }
+  }
+  .group-dtk-disabled\:hidden {
     &:is(:where(.group)[data-disabled] *) {
       display: none;
     }
   }
-  .group-ai-disabled\:bg-interactive-disabled {
+  .group-dtk-disabled\:bg-interactive-disabled {
     &:is(:where(.group)[data-disabled] *) {
       background-color: var(--color-interactive-disabled);
     }
   }
-  .group-ai-disabled\:outline-interactive-disabled {
+  .group-dtk-disabled\:outline-interactive-disabled {
     &:is(:where(.group)[data-disabled] *) {
       outline-color: var(--color-interactive-disabled);
     }
@@ -1766,7 +1907,7 @@
       }
     }
   }
-  .group-ai-disabled\:before\:bg-disabled {
+  .group-dtk-disabled\:before\:bg-disabled {
     &:is(:where(.group)[data-disabled] *) {
       &::before {
         content: var(--tw-content);
@@ -1884,6 +2025,20 @@
       }
     }
   }
+  .hover\:bg-normal {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-normal);
+      }
+    }
+  }
+  .hover\:bg-serious-bold {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-serious-bold);
+      }
+    }
+  }
   .hover\:bg-serious-hover {
     &:hover {
       @media (hover: hover) {
@@ -1922,6 +2077,14 @@
       }
     }
   }
+  .hover\:outline-4 {
+    &:hover {
+      @media (hover: hover) {
+        outline-style: var(--tw-outline-style);
+        outline-width: 4px;
+      }
+    }
+  }
   .hover\:outline-interactive-disabled {
     &:hover {
       @media (hover: hover) {
@@ -1958,7 +2121,7 @@
       }
     }
   }
-  .not-ai-selected\:hover\:bg-interactive-disabled {
+  .not-dtk-selected\:hover\:bg-interactive-disabled {
     &:not(*[data-selected]) {
       &:hover {
         @media (hover: hover) {
@@ -2032,6 +2195,12 @@
       color: var(--color-inverse-light);
     }
   }
+  .focus\:outline-4 {
+    &:focus {
+      outline-style: var(--tw-outline-style);
+      outline-width: 4px;
+    }
+  }
   .focus\:outline-highlight {
     &:focus {
       outline-color: var(--color-highlight);
@@ -2069,7 +2238,7 @@
       --icon-color: var(--color-default-light);
     }
   }
-  .not-ai-selected\:focus\:bg-interactive-disabled {
+  .not-dtk-selected\:focus\:bg-interactive-disabled {
     &:not(*[data-selected]) {
       &:focus {
         background-color: var(--color-interactive-disabled);
@@ -2126,42 +2295,6 @@
       }
     }
   }
-  .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));
@@ -2172,33 +2305,43 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
-  .ai-orientation-horizontal\:flex-col {
+  .dtk-orientation-horizontal\:flex-col {
     &[data-orientation="horizontal"] {
       flex-direction: column;
     }
   }
-  .ai-orientation-horizontal\:flex-row {
+  .dtk-orientation-horizontal\:flex-row {
     &[data-orientation="horizontal"] {
       flex-direction: row;
     }
   }
-  .ai-orientation-vertical\:gap-xs {
+  .dtk-orientation-vertical\:gap-xs {
     &[data-orientation="vertical"] {
       gap: var(--spacing-xs);
     }
   }
-  .ai-focus\:bg-highlight-bold {
+  .dtk-hover\:bg-normal {
+    &[data-hovered] {
+      background-color: var(--color-normal);
+    }
+  }
+  .dtk-focus\:bg-highlight-bold {
     &[data-focused] {
       background-color: var(--color-highlight-bold);
     }
   }
-  .ai-focus\:fg-inverse-light {
+  .dtk-focus\:bg-serious-bold {
+    &[data-focused] {
+      background-color: var(--color-serious-bold);
+    }
+  }
+  .dtk-focus\:fg-inverse-light {
     &[data-focused] {
       color: var(--color-inverse-light);
       --icon-color: var(--color-inverse-light);
     }
   }
-  .ai-focus\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
+  .dtk-focus\:\*\*\:data-\[slot\=description\]\:fg-inverse-light {
     &[data-focused] {
       :is(& *) {
         &[data-slot="description"] {
@@ -2208,72 +2351,72 @@
       }
     }
   }
-  .ai-pressed\:bg-critical-hover {
+  .dtk-pressed\:bg-critical-hover {
     &[data-pressed] {
       background-color: var(--color-critical-hover);
     }
   }
-  .ai-pressed\:bg-interactive-hover-dark {
+  .dtk-pressed\:bg-interactive-hover-dark {
     &[data-pressed] {
       background-color: var(--color-interactive-hover-dark);
     }
   }
-  .ai-pressed\:bg-interactive-hover-light {
+  .dtk-pressed\:bg-interactive-hover-light {
     &[data-pressed] {
       background-color: var(--color-interactive-hover-light);
     }
   }
-  .ai-pressed\:bg-serious-hover {
+  .dtk-pressed\:bg-serious-hover {
     &[data-pressed] {
       background-color: var(--color-serious-hover);
     }
   }
-  .ai-pressed\:bg-transparent {
+  .dtk-pressed\:bg-transparent {
     &[data-pressed] {
       background-color: transparent;
     }
   }
-  .ai-pressed\:outline-interactive-hover {
+  .dtk-pressed\:outline-interactive-hover {
     &[data-pressed] {
       outline-color: var(--color-interactive-hover);
     }
   }
-  .ai-pressed\:icon-default-light {
+  .dtk-pressed\:icon-default-light {
     &[data-pressed] {
       --icon-color: var(--color-default-light);
     }
   }
-  .ai-selected\:cursor-default {
+  .dtk-selected\:cursor-default {
     &[data-selected] {
       cursor: default;
     }
   }
-  .ai-selected\:bg-highlight-subtle {
+  .dtk-selected\:bg-highlight-subtle {
     &[data-selected] {
       background-color: var(--color-highlight-subtle);
     }
   }
-  .ai-selected\:bg-transparent {
+  .dtk-selected\:bg-transparent {
     &[data-selected] {
       background-color: transparent;
     }
   }
-  .ai-selected\:outline-highlight {
+  .dtk-selected\:outline-highlight {
     &[data-selected] {
       outline-color: var(--color-highlight);
     }
   }
-  .ai-selected\:outline-interactive-disabled {
+  .dtk-selected\:outline-interactive-disabled {
     &[data-selected] {
       outline-color: var(--color-interactive-disabled);
     }
   }
-  .ai-selected\:icon-highlight {
+  .dtk-selected\:icon-highlight {
     &[data-selected] {
       --icon-color: var(--color-highlight);
     }
   }
-  .ai-selected\:hover\:bg-highlight-subtle {
+  .dtk-selected\:hover\:bg-highlight-subtle {
     &[data-selected] {
       &:hover {
         @media (hover: hover) {
@@ -2282,7 +2425,7 @@
       }
     }
   }
-  .ai-selected\:hover\:bg-transparent {
+  .dtk-selected\:hover\:bg-transparent {
     &[data-selected] {
       &:hover {
         @media (hover: hover) {
@@ -2291,47 +2434,47 @@
       }
     }
   }
-  .ai-selected\:focus\:bg-highlight-subtle {
+  .dtk-selected\:focus\:bg-highlight-subtle {
     &[data-selected] {
       &:focus {
         background-color: var(--color-highlight-subtle);
       }
     }
   }
-  .ai-selected\:focus\:bg-transparent {
+  .dtk-selected\:focus\:bg-transparent {
     &[data-selected] {
       &:focus {
         background-color: transparent;
       }
     }
   }
-  .ai-disabled\:cursor-default {
+  .dtk-disabled\:cursor-default {
     &[data-disabled] {
       cursor: default;
     }
   }
-  .ai-disabled\:cursor-not-allowed {
+  .dtk-disabled\:cursor-not-allowed {
     &[data-disabled] {
       cursor: not-allowed;
     }
   }
-  .ai-disabled\:bg-transparent {
+  .dtk-disabled\:bg-transparent {
     &[data-disabled] {
       background-color: transparent;
     }
   }
-  .ai-disabled\:fg-disabled {
+  .dtk-disabled\:fg-disabled {
     &[data-disabled] {
       color: var(--color-disabled);
       --icon-color: var(--color-disabled);
     }
   }
-  .ai-disabled\:text-interactive-disabled {
+  .dtk-disabled\:text-interactive-disabled {
     &[data-disabled] {
       color: var(--color-interactive-disabled);
     }
   }
-  .ai-disabled\:\*\*\:data-\[slot\=description\]\:fg-disabled {
+  .dtk-disabled\:\*\*\:data-\[slot\=description\]\:fg-disabled {
     &[data-disabled] {
       :is(& *) {
         &[data-slot="description"] {
@@ -2341,6 +2484,11 @@
       }
     }
   }
+  .\[\&_span\]\:pl-s {
+    & span {
+      padding-left: var(--spacing-s);
+    }
+  }
   .\[\&\:empty\]\:before\:content-\[\'CUI\'\] {
     &:empty {
       &::before {
@@ -2438,6 +2586,11 @@
       }
     }
   }
+  .\[\&\:nth-child\(3n\)\]\:bg-default-dark {
+    &:nth-child(3n) {
+      background-color: var(--color-default-dark);
+    }
+  }
   .\[\&\>\*\]\:p-s {
     &>* {
       padding: var(--spacing-s);
@@ -2462,14 +2615,14 @@
       line-height: 0;
     }
   }
-  .ai-orientation-horizontal\:\[\&\>\*\]\:pr-s {
+  .dtk-orientation-horizontal\:\[\&\>\*\]\:pr-s {
     &[data-orientation="horizontal"] {
       &>* {
         padding-right: var(--spacing-s);
       }
     }
   }
-  .ai-orientation-horizontal\:\[\&\>\*\]\:pl-s {
+  .dtk-orientation-horizontal\:\[\&\>\*\]\:pl-s {
     &[data-orientation="horizontal"] {
       &>* {
         padding-left: var(--spacing-s);