@accelint/design-toolkit 1.0.1 → 2.0.0

package/dist/styles.css

@@ -99,8 +99,10 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
+    --font-weight-light: 300;
     --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;
@@ -326,15 +328,30 @@
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
   .\[inset\:var\(--badge-inset\,initial\)\] {
     inset: var(--badge-inset,initial);
   }
+  .inset-0 {
+    inset: var(--spacing-0);
+  }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
+  .top-\[6px\] {
+    top: 6px;
+  }
   .right-\[5px\] {
     right: 5px;
   }
+  .right-\[8px\] {
+    right: 8px;
+  }
   .right-\[20px\] {
     right: 20px;
   }
@@ -344,11 +361,17 @@
   .bottom-\[20px\] {
     bottom: 20px;
   }
+  .left-\[7px\] {
+    left: 7px;
+  }
+  .left-s {
+    left: var(--spacing-s);
+  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
-  .col-start-2 {
-    grid-column-start: 2;
+  .col-span-full {
+    grid-column: 1 / -1;
   }
   .container {
     width: 100%;
@@ -374,6 +397,9 @@
   .my-s {
     margin-block: var(--spacing-s);
   }
+  .mt-l {
+    margin-top: var(--spacing-l);
+  }
   .mt-oversized {
     margin-top: var(--spacing-oversized);
   }
@@ -383,8 +409,14 @@
   .mt-xl {
     margin-top: var(--spacing-xl);
   }
-  .mr-xs {
-    margin-right: var(--spacing-xs);
+  .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;
@@ -407,6 +439,9 @@
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .size-\[20px\] {
     width: 20px;
     height: 20px;
@@ -458,12 +493,21 @@
   .\[height\:var\(--icon-size\)\] {
     height: var(--icon-size);
   }
+  .h-\[16px\] {
+    height: 16px;
+  }
   .h-\[40px\] {
     height: 40px;
   }
   .h-\[90px\] {
     height: 90px;
   }
+  .h-\[600px\] {
+    height: 600px;
+  }
+  .h-\[800px\] {
+    height: 800px;
+  }
   .h-\[var\(--icon-size\,12px\)\] {
     height: var(--icon-size,12px);
   }
@@ -476,6 +520,9 @@
   .h-\[var\(--icon-size\,24px\)\] {
     height: var(--icon-size,24px);
   }
+  .h-full {
+    height: 100%;
+  }
   .h-l {
     height: var(--spacing-l);
   }
@@ -506,6 +553,12 @@
   .w-\(--trigger-width\) {
     width: var(--trigger-width);
   }
+  .w-\[16px\] {
+    width: 16px;
+  }
+  .w-\[16px\] {
+    width: 16px;
+  }
   .w-\[32px\] {
     width: 32px;
   }
@@ -536,6 +589,30 @@
   .w-\[280px\] {
     width: 280px;
   }
+  .w-\[300px\] {
+    width: 300px;
+  }
+  .w-\[300px\] {
+    width: 300px;
+  }
+  .w-\[500px\] {
+    width: 500px;
+  }
+  .w-\[500px\] {
+    width: 500px;
+  }
+  .w-\[600px\] {
+    width: 600px;
+  }
+  .w-\[600px\] {
+    width: 600px;
+  }
+  .w-\[960px\] {
+    width: 960px;
+  }
+  .w-\[960px\] {
+    width: 960px;
+  }
   .w-\[size\] {
     width: size;
   }
@@ -569,6 +646,9 @@
   .w-content {
     width: fit-content;
   }
+  .w-fit {
+    width: fit-content;
+  }
   .w-full {
     width: 100%;
   }
@@ -578,18 +658,44 @@
   .max-w-\[160px\] {
     max-width: 160px;
   }
+  .max-w-\[280px\] {
+    max-width: 280px;
+  }
+  .max-w-\[720px\] {
+    max-width: 720px;
+  }
+  .min-w-0 {
+    min-width: var(--spacing-0);
+  }
+  .min-w-\[280px\] {
+    min-width: 280px;
+  }
+  .min-w-\[320px\] {
+    min-width: 320px;
+  }
   .min-w-l {
     min-width: var(--spacing-l);
   }
   .flex-none {
     flex: none;
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    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);
+  }
   .rotate-180 {
     rotate: 180deg;
   }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
   .cursor-crosshair {
     cursor: crosshair;
   }
@@ -611,11 +717,14 @@
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .grid-cols-\[10px_minmax\(100px\,_1fr\)_min-content\] {
+    grid-template-columns: 10px minmax(100px, 1fr) min-content;
+  }
   .grid-cols-\[auto_1fr\] {
     grid-template-columns: auto 1fr;
   }
-  .grid-cols-subgrid {
-    grid-template-columns: subgrid;
+  .grid-cols-\[minmax\(100px\,_1fr\)_min-content\] {
+    grid-template-columns: minmax(100px, 1fr) min-content;
   }
   .flex-col {
     flex-direction: column;
@@ -683,6 +792,9 @@
   .gap-x-oversized {
     column-gap: var(--spacing-oversized);
   }
+  .gap-x-s {
+    column-gap: var(--spacing-s);
+  }
   .gap-x-xxl {
     column-gap: var(--spacing-xxl);
   }
@@ -695,6 +807,11 @@
   .gap-y-xxl {
     row-gap: var(--spacing-xxl);
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -725,6 +842,22 @@
   .rounded-small {
     border-radius: var(--radius-small);
   }
+  .rounded-t-large {
+    border-top-left-radius: var(--radius-large);
+    border-top-right-radius: var(--radius-large);
+  }
+  .rounded-l-large {
+    border-top-left-radius: var(--radius-large);
+    border-bottom-left-radius: var(--radius-large);
+  }
+  .rounded-r-large {
+    border-top-right-radius: var(--radius-large);
+    border-bottom-right-radius: var(--radius-large);
+  }
+  .rounded-b-large {
+    border-bottom-right-radius: var(--radius-large);
+    border-bottom-left-radius: var(--radius-large);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -745,6 +878,9 @@
   .border-default-dark {
     border-color: var(--color-default-dark);
   }
+  .border-default-light {
+    border-color: var(--color-default-light);
+  }
   .border-highlight {
     border-color: var(--color-highlight);
   }
@@ -772,6 +908,9 @@
   .border-static-light {
     border-color: var(--color-static-light);
   }
+  .border-transparent {
+    border-color: transparent;
+  }
   .bg-\[\#E8178A\]\/40 {
     background-color: color-mix(in oklab, #E8178A 40%, transparent);
   }
@@ -922,6 +1061,9 @@
   .p-0 {
     padding: var(--spacing-0);
   }
+  .p-l {
+    padding: var(--spacing-l);
+  }
   .p-m {
     padding: var(--spacing-m);
   }
@@ -931,6 +1073,9 @@
   .p-s {
     padding: var(--spacing-s);
   }
+  .p-xl {
+    padding: var(--spacing-xl);
+  }
   .p-xs {
     padding: var(--spacing-xs);
   }
@@ -949,12 +1094,21 @@
   .py-xs {
     padding-block: var(--spacing-xs);
   }
+  .pr-\[30px\] {
+    padding-right: 30px;
+  }
   .pr-\[32px\] {
     padding-right: 32px;
   }
   .pr-xl {
     padding-right: var(--spacing-xl);
   }
+  .pl-\[32px\] {
+    padding-left: 32px;
+  }
+  .pl-\[35px\] {
+    padding-left: 35px;
+  }
   .pl-m {
     padding-left: var(--spacing-m);
   }
@@ -1080,6 +1234,10 @@
     --tw-leading: 64px;
     line-height: 64px;
   }
+  .font-light {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -1130,6 +1288,10 @@
     color: var(--color-interactive-default);
     --icon-color: var(--color-interactive-default);
   }
+  .fg-interactive-hover {
+    color: var(--color-interactive-hover);
+    --icon-color: var(--color-interactive-hover);
+  }
   .fg-interactive-hover-light {
     color: var(--color-interactive-hover-light);
     --icon-color: var(--color-interactive-hover-light);
@@ -1207,6 +1369,9 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-offset-1 {
+    outline-offset: 1px;
+  }
   .outline-advisory-bold {
     outline-color: var(--color-advisory-bold);
   }
@@ -1237,6 +1402,9 @@
   .outline-serious {
     outline-color: var(--color-serious);
   }
+  .outline-static-dark {
+    outline-color: var(--color-static-dark);
+  }
   .outline-static-light {
     outline-color: var(--color-static-light);
   }
@@ -1384,11 +1552,90 @@
       --icon-color: var(--color-default-light);
     }
   }
+  .group-ai-orientation-horizontal\:rounded-small {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-radius: var(--radius-small);
+    }
+  }
+  .group-ai-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 {
+    &: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 {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .group-ai-orientation-horizontal\:border-highlight {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-highlight);
+    }
+  }
+  .group-ai-orientation-horizontal\:border-interactive-disabled {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-interactive-disabled);
+    }
+  }
+  .group-ai-orientation-horizontal\:border-interactive-hover {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-interactive-hover);
+    }
+  }
+  .group-ai-orientation-horizontal\:border-static-light {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      border-color: var(--color-static-light);
+    }
+  }
+  .group-ai-orientation-horizontal\:pl-0 {
+    &:is(:where(.group)[data-orientation="horizontal"] *) {
+      padding-left: var(--spacing-0);
+    }
+  }
+  .group-ai-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 {
+    &:is(:where(.group)[data-orientation="vertical"] *) {
+      border-color: var(--color-interactive-hover);
+    }
+  }
+  .group-ai-orientation-vertical\:border-transparent {
+    &:is(:where(.group)[data-orientation="vertical"] *) {
+      border-color: transparent;
+    }
+  }
+  .group-ai-orientation-vertical\:pt-0 {
+    &:is(:where(.group)[data-orientation="vertical"] *) {
+      padding-top: var(--spacing-0);
+    }
+  }
   .group-ai-expanded\:rotate-180 {
     &:is(:where(.group)[data-expanded] *) {
       rotate: 180deg;
     }
   }
+  .group-ai-empty\:hidden {
+    &:is(:where(.group)[data-empty] *) {
+      display: none;
+    }
+  }
+  .group-ai-disabled\:hidden {
+    &:is(:where(.group)[data-disabled] *) {
+      display: none;
+    }
+  }
   .group-ai-disabled\:bg-interactive-disabled {
     &:is(:where(.group)[data-disabled] *) {
       background-color: var(--color-interactive-disabled);
@@ -1597,6 +1844,11 @@
       background-color: transparent;
     }
   }
+  .focus-within\:outline-highlight {
+    &:focus-within {
+      outline-color: var(--color-highlight);
+    }
+  }
   .hover\:bg-critical-hover {
     &:hover {
       @media (hover: hover) {
@@ -1684,6 +1936,14 @@
       }
     }
   }
+  .hover\:outline-solid {
+    &:hover {
+      @media (hover: hover) {
+        --tw-outline-style: solid;
+        outline-style: solid;
+      }
+    }
+  }
   .hover\:icon-default-light {
     &:hover {
       @media (hover: hover) {
@@ -1731,6 +1991,11 @@
       }
     }
   }
+  .focus\:bg-highlight {
+    &:focus {
+      background-color: var(--color-highlight);
+    }
+  }
   .focus\:bg-interactive-disabled {
     &:focus {
       background-color: var(--color-interactive-disabled);
@@ -1762,6 +2027,11 @@
       --icon-color: var(--color-disabled);
     }
   }
+  .focus\:text-inverse-light {
+    &:focus {
+      color: var(--color-inverse-light);
+    }
+  }
   .focus\:outline-highlight {
     &:focus {
       outline-color: var(--color-highlight);
@@ -1777,6 +2047,23 @@
       outline-color: var(--color-interactive-hover);
     }
   }
+  .focus\:outline-serious {
+    &:focus {
+      outline-color: var(--color-serious);
+    }
+  }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .focus\:outline-solid {
+    &:focus {
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+  }
   .focus\:icon-default-light {
     &:focus {
       --icon-color: var(--color-default-light);
@@ -1798,6 +2085,17 @@
       }
     }
   }
+  .data-selected\:outline-highlight {
+    &[data-selected] {
+      outline-color: var(--color-highlight);
+    }
+  }
+  .data-selected\:outline-solid {
+    &[data-selected] {
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+  }
   .\*\*\:data-\[slot\=description\]\:text-body-xs {
     :is(& *) {
       &[data-slot="description"] {
@@ -1874,6 +2172,21 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .ai-orientation-horizontal\:flex-col {
+    &[data-orientation="horizontal"] {
+      flex-direction: column;
+    }
+  }
+  .ai-orientation-horizontal\:flex-row {
+    &[data-orientation="horizontal"] {
+      flex-direction: row;
+    }
+  }
+  .ai-orientation-vertical\:gap-xs {
+    &[data-orientation="vertical"] {
+      gap: var(--spacing-xs);
+    }
+  }
   .ai-focus\:bg-highlight-bold {
     &[data-focused] {
       background-color: var(--color-highlight-bold);
@@ -2125,6 +2438,44 @@
       }
     }
   }
+  .\[\&\>\*\]\:p-s {
+    &>* {
+      padding: var(--spacing-s);
+    }
+  }
+  .\[\&\>\*\]\:p-xs {
+    &>* {
+      padding: var(--spacing-xs);
+    }
+  }
+  .\[\&\>\*\]\:text-header-m {
+    &>* {
+      font-size: var(--header-m-size);
+      font-weight: 500;
+      letter-spacing: 0.25px;
+      line-height: var(--header-m-height);
+    }
+  }
+  .\[\&\>\*\]\:leading-\[0\] {
+    &>* {
+      --tw-leading: 0;
+      line-height: 0;
+    }
+  }
+  .ai-orientation-horizontal\:\[\&\>\*\]\:pr-s {
+    &[data-orientation="horizontal"] {
+      &>* {
+        padding-right: var(--spacing-s);
+      }
+    }
+  }
+  .ai-orientation-horizontal\:\[\&\>\*\]\:pl-s {
+    &[data-orientation="horizontal"] {
+      &>* {
+        padding-left: var(--spacing-s);
+      }
+    }
+  }
 }
 :root {
   --neutral-01: #ffffff;
@@ -2221,6 +2572,77 @@
   --button-xs-size: 10px;
   --button-xs-height: 12px;
 }
+@layer components {
+  .hide-cancel::-webkit-search-cancel-button {
+    display: none;
+  }
+  .queryBuilder .rule-lines::before {
+    content: '';
+    width: 10px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    background-image: repeating-linear-gradient(to bottom, var(--neutral-04), var(--neutral-04)), repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
+    background-position: left -1px, center;
+    background-repeat: repeat-y, repeat-x;
+    background-size: 1px 4px, 4px 1px;
+  }
+  .queryBuilder .group > span.rule-lines:last-of-type::before {
+    content: '';
+    width: 10px;
+    position: absolute;
+    top: 0;
+    bottom: 50%;
+    left: 50%;
+    background-image: repeating-linear-gradient(to bottom,var(--neutral-04), var(--neutral-04)), repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
+    background-position: left -1px, bottom;
+    background-repeat: repeat-y, repeat-x;
+    background-size: 1px 4px, 4px 1px;
+  }
+  .queryBuilder .group > span.rule-lines:last-of-type:has(~ div.group)::before {
+    content: '';
+    width: 10px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    background-image: repeating-linear-gradient(to bottom, var(--neutral-04), var(--neutral-04)), repeating-linear-gradient(to right, var(--neutral-04), var(--neutral-04));
+    background-position: left -1px, center;
+    background-repeat: repeat-y, repeat-x;
+    background-size: 1px 4px, 4px 1px;
+  }
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -2382,9 +2804,20 @@
   initial-value: "";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @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-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;