@casinogate/ui 1.4.0 → 1.5.0

package/README.md

@@ -872,9 +872,12 @@ packages/cg-ui/
 
    ```text
    src/components/my-component/
+   ├── components/                  # Primitive parts (if multi-part component)
    ├── my-component.svelte          # Main component
    ├── my-component.stories.svelte  # Storybook stories
-   ├── index.ts                     # Exports
+   ├── exports.ts                   # Exports presets
+   ├── exports-primitive.ts         # Exports primitives
+   ├── index.ts                     # Public API exports
    └── README.md                    # Documentation (optional)
    ```
 
@@ -891,13 +894,6 @@ packages/cg-ui/
 
 ### Component Guidelines
 
-- ✅ **Accessibility First**: Use bits-ui primitives when available
-- ✅ **Type Safety**: Provide comprehensive TypeScript definitions
-- ✅ **CSS Variables**: Use semantic variables, not hardcoded colors
-- ✅ **Documentation**: Add Storybook stories with examples
-- ✅ **Consistency**: Follow patterns from existing components
-- ✅ **Testing**: (Coming soon) Write unit and integration tests
-
 ### Adding New CSS Variables
 
 1. **Add to palette** (`:root` in `theme.css`)
@@ -960,7 +956,6 @@ ISC
 
 - **Questions?** Check the [Storybook documentation](https://static.casinogate.dev/components/master/)
 - **Issues?** Contact the UI team or file an issue
-- **Feature Requests?** Submit a proposal through the team channels
 
 ---
 

package/dist/assets/css/root.css

@@ -212,6 +212,12 @@
   .cgui\:left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .cgui\:z-\(--cg-ui-z-index-popover\) {
+    z-index: var(--cg-ui-z-index-popover);
+  }
+  .cgui\:z-\(--cg-ui-z-index-select\) {
+    z-index: var(--cg-ui-z-index-select);
+  }
   .cgui\:z-1 {
     z-index: 1;
   }
@@ -303,6 +309,9 @@
   .cgui\:h-\(--app-shell-header-height\) {
     height: var(--app-shell-header-height);
   }
+  .cgui\:h-\(--bits-select-anchor-height\) {
+    height: var(--bits-select-anchor-height);
+  }
   .cgui\:h-3 {
     height: calc(var(--cgui-spacing) * 3);
   }
@@ -360,6 +369,9 @@
   .cgui\:h-full {
     height: 100%;
   }
+  .cgui\:max-h-\(--bits-select-content-available-height\) {
+    max-height: var(--bits-select-content-available-height);
+  }
   .cgui\:min-h-7\.5 {
     min-height: calc(var(--cgui-spacing) * 7.5);
   }
@@ -432,6 +444,9 @@
   .cgui\:max-w-100 {
     max-width: calc(var(--cgui-spacing) * 100);
   }
+  .cgui\:min-w-\(--bits-select-anchor-width\) {
+    min-width: var(--bits-select-anchor-width);
+  }
   .cgui\:min-w-0 {
     min-width: calc(var(--cgui-spacing) * 0);
   }
@@ -453,6 +468,9 @@
   .cgui\:grow {
     flex-grow: 1;
   }
+  .cgui\:origin-\(--bits-select-content-transform-origin\) {
+    transform-origin: var(--bits-select-content-transform-origin);
+  }
   .cgui\:-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -477,12 +495,27 @@
   .cgui\:cursor-col-resize {
     cursor: col-resize;
   }
+  .cgui\:cursor-default {
+    cursor: default;
+  }
+  .cgui\:cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cgui\:cursor-pointer {
     cursor: pointer;
   }
   .cgui\:touch-none {
     touch-action: none;
   }
+  .cgui\:resize-none {
+    resize: none;
+  }
+  .cgui\:resize-y {
+    resize: vertical;
+  }
+  .cgui\:scroll-my-1 {
+    scroll-margin-block: calc(var(--cgui-spacing) * 1);
+  }
   .cgui\:flex-col {
     flex-direction: column;
   }
@@ -501,15 +534,15 @@
   .cgui\:items-stretch {
     align-items: stretch;
   }
+  .cgui\:justify-between {
+    justify-content: space-between;
+  }
   .cgui\:justify-center {
     justify-content: center;
   }
   .cgui\:justify-end {
     justify-content: flex-end;
   }
-  .cgui\:justify-start {
-    justify-content: flex-start;
-  }
   .cgui\:gap-1 {
     gap: calc(var(--cgui-spacing) * 1);
   }
@@ -545,12 +578,20 @@
   .cgui\:self-stretch {
     align-self: stretch;
   }
+  .cgui\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .cgui\:overflow-auto {
     overflow: auto;
   }
   .cgui\:overflow-hidden {
     overflow: hidden;
   }
+  .cgui\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
   .cgui\:overflow-y-auto {
     overflow-y: auto;
   }
@@ -610,6 +651,9 @@
   .cgui\:border-stroke-divider {
     border-color: var(--cg-ui-palette-neutral-20);
   }
+  .cgui\:border-stroke-error {
+    border-color: var(--cg-ui-palette-system-error-100);
+  }
   .cgui\:border-stroke-primary {
     border-color: var(--cg-ui-palette-primary-80);
   }
@@ -652,6 +696,30 @@
   .cgui\:bg-primary-80 {
     background-color: var(--cg-ui-palette-primary-80);
   }
+  .cgui\:bg-state-error {
+    background-color: var(--cg-ui-palette-system-error-100);
+  }
+  .cgui\:bg-state-error-light {
+    background-color: var(--cg-ui-palette-system-error-10);
+  }
+  .cgui\:bg-state-info {
+    background-color: var(--cg-ui-palette-system-info-100);
+  }
+  .cgui\:bg-state-info-light {
+    background-color: var(--cg-ui-palette-system-info-10);
+  }
+  .cgui\:bg-state-success {
+    background-color: var(--cg-ui-palette-system-success-100);
+  }
+  .cgui\:bg-state-success-light {
+    background-color: var(--cg-ui-palette-system-success-10);
+  }
+  .cgui\:bg-state-warning {
+    background-color: var(--cg-ui-palette-system-warning-100);
+  }
+  .cgui\:bg-state-warning-light {
+    background-color: var(--cg-ui-palette-system-warning-10);
+  }
   .cgui\:bg-stroke-divider {
     background-color: var(--cg-ui-palette-neutral-20);
   }
@@ -661,6 +729,12 @@
   .cgui\:bg-surface-light {
     background-color: var(--cg-ui-palette-neutral-20);
   }
+  .cgui\:bg-surface-light\/50 {
+    background-color: var(--cg-ui-palette-neutral-20);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-20) 50%, transparent);
+    }
+  }
   .cgui\:bg-surface-lightest {
     background-color: var(--cg-ui-palette-neutral-10);
   }
@@ -721,6 +795,9 @@
   .cgui\:p-4 {
     padding: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:px-1\.5 {
+    padding-inline: calc(var(--cgui-spacing) * 1.5);
+  }
   .cgui\:px-2 {
     padding-inline: calc(var(--cgui-spacing) * 2);
   }
@@ -730,12 +807,18 @@
   .cgui\:px-3 {
     padding-inline: calc(var(--cgui-spacing) * 3);
   }
+  .cgui\:px-3\.5 {
+    padding-inline: calc(var(--cgui-spacing) * 3.5);
+  }
   .cgui\:px-4 {
     padding-inline: calc(var(--cgui-spacing) * 4);
   }
   .cgui\:px-6 {
     padding-inline: calc(var(--cgui-spacing) * 6);
   }
+  .cgui\:py-0\.5 {
+    padding-block: calc(var(--cgui-spacing) * 0.5);
+  }
   .cgui\:py-1 {
     padding-block: calc(var(--cgui-spacing) * 1);
   }
@@ -806,6 +889,10 @@
     font-size: var(--cg-ui-fz-caption-2);
     line-height: var(--tw-leading, var(--cg-ui-lh-caption-2));
   }
+  .cgui\:text-heading-2 {
+    font-size: var(--cg-ui-fz-heading-2);
+    line-height: var(--tw-leading, var(--cg-ui-lh-heading-2));
+  }
   .cgui\:text-sm {
     font-size: var(--cgui-text-sm);
     line-height: var(--tw-leading, var(--cgui-text-sm--line-height));
@@ -843,6 +930,12 @@
   .cgui\:text-fg-semilight {
     color: var(--cg-ui-palette-neutral-40);
   }
+  .cgui\:text-fg-success {
+    color: var(--cg-ui-palette-system-success-100);
+  }
+  .cgui\:text-fg-warning {
+    color: var(--cg-ui-palette-system-warning-100);
+  }
   .cgui\:text-fg-white {
     color: var(--cg-ui-palette-neutral-0);
   }
@@ -891,13 +984,30 @@
     --tw-shadow: var(--cg-ui-shadow-segment-item);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .cgui\:shadow-select {
+    --tw-shadow: var(--cg-ui-shadow-select);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .cgui\:shadow-toast {
     --tw-shadow: var(--cg-ui-shadow-toast);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .cgui\:outline-hidden {
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+  }
   .cgui\:outline-stroke-focus {
     outline-color: var(--cg-ui-palette-primary-60);
   }
+  .cgui\:transition-\[opacity\] {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
   .cgui\:transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
@@ -931,12 +1041,24 @@
   .cgui\:scrollbar-thumb-rounded-full {
     --scrollbar-thumb-radius: 9999px;
   }
+  .cgui\:scrollbar-thumb-rounded-md {
+    --scrollbar-thumb-radius: calc(var(--cg-ui-number-md) * 1px);
+  }
   .cgui\:scrollbar-thumb-surface-regular {
     --scrollbar-thumb: var(--cg-ui-palette-neutral-50);
   }
+  .cgui\:scrollbar-thumb-surface-regular\/40 {
+    --scrollbar-thumb: var(--cg-ui-palette-neutral-50);
+    @supports (color: color-mix(in lab, red, red)) {
+      --scrollbar-thumb: color-mix(in oklab, var(--cg-ui-palette-neutral-50) 40%, transparent);
+    }
+  }
   .cgui\:scrollbar-track-rounded-full {
     --scrollbar-track-radius: 9999px;
   }
+  .cgui\:scrollbar-track-rounded-md {
+    --scrollbar-track-radius: calc(var(--cg-ui-number-md) * 1px);
+  }
   .cgui\:scrollbar-track-surface-lightest {
     --scrollbar-track: var(--cg-ui-palette-neutral-10);
   }
@@ -979,6 +1101,11 @@
       padding-block: calc(var(--cgui-spacing) * 3);
     }
   }
+  .cgui\:group-data-\[state\=open\]\/select-trigger\:-rotate-180 {
+    &:is(:where(.cgui\:group\/select-trigger)[data-state="open"] *) {
+      rotate: calc(180deg * -1);
+    }
+  }
   .cgui\:placeholder\:text-fg-regular {
     &::placeholder {
       color: var(--cg-ui-palette-neutral-50);
@@ -1071,6 +1198,13 @@
       }
     }
   }
+  .cgui\:hover\:text-fg-darkest {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--cg-ui-palette-neutral-100);
+      }
+    }
+  }
   .cgui\:hover\:text-primary-60 {
     &:hover {
       @media (hover: hover) {
@@ -1287,38 +1421,60 @@
       color: var(--cg-ui-palette-primary-80);
     }
   }
-  .cgui\:data-\[slot\=end-chevron\]\:right-0 {
-    &[data-slot="end-chevron"] {
-      right: calc(var(--cgui-spacing) * 0);
+  .cgui\:data-\[side\=bottom\]\:translate-y-1 {
+    &[data-side="bottom"] {
+      --tw-translate-y: calc(var(--cgui-spacing) * 1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .cgui\:data-\[slot\=end-chevron\]\:right-2 {
-    &[data-slot="end-chevron"] {
-      right: calc(var(--cgui-spacing) * 2);
+  .cgui\:data-\[side\=bottom\]\:slide-in-from-top-2 {
+    &[data-side="bottom"] {
+      --tw-enter-translate-y: calc(2*var(--spacing)*-1);
     }
   }
-  .cgui\:data-\[slot\=end-chevron\]\:-translate-x-1\/2 {
-    &[data-slot="end-chevron"] {
-      --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+  .cgui\:data-\[side\=left\]\:-translate-x-1 {
+    &[data-side="left"] {
+      --tw-translate-x: calc(var(--cgui-spacing) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .cgui\:data-\[slot\=start-chevron\]\:left-0 {
-    &[data-slot="start-chevron"] {
-      left: calc(var(--cgui-spacing) * 0);
+  .cgui\:data-\[side\=left\]\:slide-in-from-right-2 {
+    &[data-side="left"] {
+      --tw-enter-translate-x: calc(2*var(--spacing));
     }
   }
-  .cgui\:data-\[slot\=start-chevron\]\:left-2 {
-    &[data-slot="start-chevron"] {
-      left: calc(var(--cgui-spacing) * 2);
+  .cgui\:data-\[side\=right\]\:translate-x-1 {
+    &[data-side="right"] {
+      --tw-translate-x: calc(var(--cgui-spacing) * 1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .cgui\:data-\[slot\=start-chevron\]\:translate-x-1\/2 {
-    &[data-slot="start-chevron"] {
-      --tw-translate-x: calc(1/2 * 100%);
+  .cgui\:data-\[side\=right\]\:slide-in-from-left-2 {
+    &[data-side="right"] {
+      --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+    }
+  }
+  .cgui\:data-\[side\=top\]\:-translate-y-1 {
+    &[data-side="top"] {
+      --tw-translate-y: calc(var(--cgui-spacing) * -1);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .cgui\:data-\[side\=top\]\:slide-in-from-bottom-2 {
+    &[data-side="top"] {
+      --tw-enter-translate-y: calc(2*var(--spacing));
+    }
+  }
+  .cgui\:data-\[slot\=end-chevron\]\:right-2 {
+    &[data-slot="end-chevron"] {
+      right: calc(var(--cgui-spacing) * 2);
+    }
+  }
+  .cgui\:data-\[slot\=start-chevron\]\:left-2 {
+    &[data-slot="start-chevron"] {
+      left: calc(var(--cgui-spacing) * 2);
+    }
+  }
   .cgui\:data-\[start-chevron\]\:left-2\.5 {
     &[data-start-chevron] {
       left: calc(var(--cgui-spacing) * 2.5);
@@ -1377,11 +1533,45 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .cgui\:data-\[state\=closed\]\:animate-out {
+    &[data-state="closed"] {
+      animation: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .cgui\:data-\[state\=closed\]\:fade-out-0 {
+    &[data-state="closed"] {
+      --tw-exit-opacity: calc(0/100);
+      --tw-exit-opacity: 0;
+    }
+  }
+  .cgui\:data-\[state\=closed\]\:zoom-out-95 {
+    &[data-state="closed"] {
+      --tw-exit-scale: calc(95*1%);
+      --tw-exit-scale: .95;
+    }
+  }
   .cgui\:data-\[state\=indeterminate\]\:border-surface-primary {
     &[data-state="indeterminate"] {
       border-color: var(--cg-ui-palette-primary-80);
     }
   }
+  .cgui\:data-\[state\=open\]\:animate-in {
+    &[data-state="open"] {
+      animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
+    }
+  }
+  .cgui\:data-\[state\=open\]\:fade-in-0 {
+    &[data-state="open"] {
+      --tw-enter-opacity: calc(0/100);
+      --tw-enter-opacity: 0;
+    }
+  }
+  .cgui\:data-\[state\=open\]\:zoom-in-95 {
+    &[data-state="open"] {
+      --tw-enter-scale: calc(95*1%);
+      --tw-enter-scale: .95;
+    }
+  }
   .cgui\:data-\[sub-content\=\"false\"\]\:group-data-\[compact\=true\]\/navigation\:justify-center {
     &[data-sub-content="false"] {
       &:is(:where(.cgui\:group\/navigation)[data-compact="true"] *) {
@@ -1389,6 +1579,14 @@
       }
     }
   }
+  .cgui\:scrollbar-hover\:scrollbar-thumb-surface-regular\/60 {
+    &::-webkit-scrollbar-thumb:hover {
+      --scrollbar-thumb: var(--cg-ui-palette-neutral-50);
+      @supports (color: color-mix(in lab, red, red)) {
+        --scrollbar-thumb: color-mix(in oklab, var(--cg-ui-palette-neutral-50) 60%, transparent);
+      }
+    }
+  }
   .cgui\:\[\&_\[data-slot\=\"icon\"\]\]\:size-6 {
     & [data-slot="icon"] {
       width: calc(var(--cgui-spacing) * 6);
@@ -1463,6 +1661,16 @@
       }
     }
   }
+  .cgui\:\[\&_svg\]\:pointer-events-none {
+    & svg {
+      pointer-events: none;
+    }
+  }
+  .cgui\:\[\&_svg\]\:shrink-0 {
+    & svg {
+      flex-shrink: 0;
+    }
+  }
   .cgui\:\[\&_tr\]\:h-10 {
     & tr {
       height: calc(var(--cgui-spacing) * 10);
@@ -1552,6 +1760,131 @@
       flex: 1;
     }
   }
+  .cgui\:\[\&\>svg\]\:pointer-events-none {
+    &>svg {
+      pointer-events: none;
+    }
+  }
+  .cgui\:\[\&\>svg\]\:size-3\.5 {
+    &>svg {
+      width: calc(var(--cgui-spacing) * 3.5);
+      height: calc(var(--cgui-spacing) * 3.5);
+    }
+  }
+  .cgui\:\[\&\>svg\]\:size-5 {
+    &>svg {
+      width: calc(var(--cgui-spacing) * 5);
+      height: calc(var(--cgui-spacing) * 5);
+    }
+  }
+  .cgui\:\[\&\>svg\]\:size-5\.5 {
+    &>svg {
+      width: calc(var(--cgui-spacing) * 5.5);
+      height: calc(var(--cgui-spacing) * 5.5);
+    }
+  }
+  .cgui\:\[\&\>svg\]\:size-6 {
+    &>svg {
+      width: calc(var(--cgui-spacing) * 6);
+      height: calc(var(--cgui-spacing) * 6);
+    }
+  }
+  .cgui\:\[\&\>svg\]\:size-6\.5 {
+    &>svg {
+      width: calc(var(--cgui-spacing) * 6.5);
+      height: calc(var(--cgui-spacing) * 6.5);
+    }
+  }
+  .cgui\:\[\&\>svg\]\:size-7 {
+    &>svg {
+      width: calc(var(--cgui-spacing) * 7);
+      height: calc(var(--cgui-spacing) * 7);
+    }
+  }
+}
+@property --tw-animation-delay {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0s;
+}
+@property --tw-animation-direction {
+  syntax: "*";
+  inherits: false;
+  initial-value: normal;
+}
+@property --tw-animation-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-animation-fill-mode {
+  syntax: "*";
+  inherits: false;
+  initial-value: none;
+}
+@property --tw-animation-iteration-count {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
 }
 :root {
   --cg-ui-primary-hue: 220;
@@ -1596,6 +1929,7 @@
   --cg-ui-shadow-switch-thumb: 0px 1px 1px 0px hsla(0, 0%, 0%, 0.25);
   --cg-ui-shadow-segment-item: 0px 0px 4px 0px hsla(0, 0%, 0%, 0.1);
   --cg-ui-shadow-popover: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  --cg-ui-shadow-select: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.25);
   --cg-ui-fz-base: 16;
   --cg-ui-fz-heading: calc(16 / var(--cg-ui-fz-base) * 1rem);
   --cg-ui-lh-heading: calc(22 / var(--cg-ui-fz-base) * 1rem);
@@ -1609,6 +1943,23 @@
   --cg-ui-lh-caption: calc(18 / var(--cg-ui-fz-base) * 1rem);
   --cg-ui-fz-caption-2: calc(12 / var(--cg-ui-fz-base) * 1rem);
   --cg-ui-lh-caption-2: calc(16 / var(--cg-ui-fz-base) * 1rem);
+  --cg-ui-z-index-base: 0;
+  --cg-ui-z-index-content: 1;
+  --cg-ui-z-index-sticky: 10;
+  --cg-ui-z-index-fixed: 20;
+  --cg-ui-z-index-dropdown: 50;
+  --cg-ui-z-index-select: 50;
+  --cg-ui-z-index-popover: 100;
+  --cg-ui-z-index-collapsible: 100;
+  --cg-ui-z-index-tooltip: 200;
+  --cg-ui-z-index-navigation: 250;
+  --cg-ui-z-index-modal: 300;
+  --cg-ui-z-index-dialog: 300;
+  --cg-ui-z-index-backdrop: 300;
+  --cg-ui-z-index-toast: 400;
+  --cg-ui-z-index-notification: 400;
+  --cg-ui-z-index-critical: 500;
+  --cg-ui-z-index-loading: 500;
 }
 .dark, [data-theme='dark'] {
   --cg-ui-primary-hue: 160;
@@ -1976,6 +2327,20 @@
     opacity: 0.5;
   }
 }
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity,1);
+    transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));
+    filter: blur(var(--tw-enter-blur,0));
+  }
+}
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity,1);
+    transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));
+    filter: blur(var(--tw-exit-blur,0));
+  }
+}
 @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 {
@@ -2016,6 +2381,23 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+      --tw-animation-delay: 0s;
+      --tw-animation-direction: normal;
+      --tw-animation-duration: initial;
+      --tw-animation-fill-mode: none;
+      --tw-animation-iteration-count: 1;
+      --tw-enter-blur: 0;
+      --tw-enter-opacity: 1;
+      --tw-enter-rotate: 0;
+      --tw-enter-scale: 1;
+      --tw-enter-translate-x: 0;
+      --tw-enter-translate-y: 0;
+      --tw-exit-blur: 0;
+      --tw-exit-opacity: 1;
+      --tw-exit-rotate: 0;
+      --tw-exit-scale: 1;
+      --tw-exit-translate-x: 0;
+      --tw-exit-translate-y: 0;
     }
   }
 }