@casinogate/ui 2.0.9 → 2.0.10

package/dist/assets/css/root.css

@@ -24,7 +24,6 @@
     --cgui-font-weight-semibold: 600;
     --cgui-tracking-wide: 0.025em;
     --cgui-leading-relaxed: 1.625;
-    --cgui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --cgui-animate-spin: spin 1s linear infinite;
     --cgui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --cgui-default-transition-duration: 150ms;
@@ -862,6 +861,12 @@
   .cgui\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .cgui\:grid-cols-\[1\.5rem_minmax\(0\,1fr\)\] {
+    grid-template-columns: 1.5rem minmax(0,1fr);
+  }
+  .cgui\:grid-cols-\[1\.5rem_minmax\(0\,1fr\)_auto\] {
+    grid-template-columns: 1.5rem minmax(0,1fr) auto;
+  }
   .cgui\:flex-col {
     flex-direction: column;
   }
@@ -1161,6 +1166,9 @@
   .cgui\:bg-stroke-divider {
     background-color: var(--cg-ui-color-stroke-divider);
   }
+  .cgui\:bg-surface-dark {
+    background-color: var(--cg-ui-color-surface-dark);
+  }
   .cgui\:bg-surface-darkest {
     background-color: var(--cg-ui-color-surface-darkest);
   }
@@ -1234,6 +1242,12 @@
     }
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .cgui\:bg-\[linear-gradient\(105deg\,color-mix\(in_srgb\,var\(--cg-ui-color-fg-regular\)_20\%\,transparent\)_0\%_40\%\,var\(--cg-ui-color-fg-regular\)_50\%\,color-mix\(in_srgb\,var\(--cg-ui-color-fg-regular\)_20\%\,transparent\)_60\%_100\%\)\] {
+    background-image: linear-gradient(105deg,var(--cg-ui-color-fg-regular) 0% 40%,var(--cg-ui-color-fg-regular) 50%,var(--cg-ui-color-fg-regular) 60% 100%);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-image: linear-gradient(105deg,color-mix(in srgb,var(--cg-ui-color-fg-regular) 20%,transparent) 0% 40%,var(--cg-ui-color-fg-regular) 50%,color-mix(in srgb,var(--cg-ui-color-fg-regular) 20%,transparent) 60% 100%);
+    }
+  }
   .cgui\:from-neutral-40\/30 {
     --tw-gradient-from: var(--cg-ui-palette-neutral-40);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1248,9 +1262,18 @@
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .cgui\:bg-\[length\:200\%_auto\] {
+    background-size: 200% auto;
+  }
   .cgui\:bg-clip-padding {
     background-clip: padding-box;
   }
+  .cgui\:bg-clip-text {
+    background-clip: text;
+  }
+  .cgui\:bg-\[position\:-50\%_0\] {
+    background-position: -50% 0;
+  }
   .cgui\:object-contain {
     object-fit: contain;
   }
@@ -1525,6 +1548,9 @@
   .cgui\:text-state-warning {
     color: var(--cg-ui-color-state-warning);
   }
+  .cgui\:text-transparent {
+    color: transparent;
+  }
   .cgui\:uppercase {
     text-transform: uppercase;
   }
@@ -1580,16 +1606,76 @@
   .cgui\:outline-stroke-focus {
     outline-color: var(--cg-ui-color-stroke-focus);
   }
+  .cgui\:transition-\[background-color\,border-color\,box-shadow\] {
+    transition-property: background-color,border-color,box-shadow;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
+  .cgui\:transition-\[background-color\,border-color\,opacity\] {
+    transition-property: background-color,border-color,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-\[background-color\,border-color\,transform\] {
+    transition-property: background-color,border-color,transform;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
   .cgui\:transition-\[background-color\,color\,ring\,outline\,border-color\] {
     transition-property: background-color,color,ring,outline,border-color;
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
   }
+  .cgui\:transition-\[background-color\,color\] {
+    transition-property: background-color,color;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
+  .cgui\:transition-\[background-color\] {
+    transition-property: background-color;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
+  .cgui\:transition-\[color\,background-color\,border-color\,box-shadow\,transform\,opacity\,width\,height\,border-radius\] {
+    transition-property: color,background-color,border-color,box-shadow,transform,opacity,width,height,border-radius;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
+  .cgui\:transition-\[color\,background-color\,border-color\,box-shadow\,transform\] {
+    transition-property: color,background-color,border-color,box-shadow,transform;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
+  .cgui\:transition-\[color\,background-color\,border-color\,box-shadow\] {
+    transition-property: color,background-color,border-color,box-shadow;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
+  .cgui\:transition-\[color\,background-color\,border-color\,opacity\] {
+    transition-property: color,background-color,border-color,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-\[color\,background-color\,border-color\] {
+    transition-property: color,background-color,border-color;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
+  .cgui\:transition-\[opacity\,transform\] {
+    transition-property: opacity,transform;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
   .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-\[width\] {
+    transition-property: width;
+    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));
@@ -1610,6 +1696,18 @@
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
   }
+  .cgui\:duration-\(--cg-ui-duration-base\) {
+    --tw-duration: var(--cg-ui-duration-base);
+    transition-duration: var(--cg-ui-duration-base);
+  }
+  .cgui\:duration-\(--cg-ui-duration-fast\) {
+    --tw-duration: var(--cg-ui-duration-fast);
+    transition-duration: var(--cg-ui-duration-fast);
+  }
+  .cgui\:duration-\(--cg-ui-duration-slow\) {
+    --tw-duration: var(--cg-ui-duration-slow);
+    transition-duration: var(--cg-ui-duration-slow);
+  }
   .cgui\:duration-150 {
     --tw-duration: 150ms;
     transition-duration: 150ms;
@@ -1626,9 +1724,20 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .cgui\:ease-hover {
+    --tw-ease: var(--cg-ui-ease-hover);
+    transition-timing-function: var(--cg-ui-ease-hover);
+  }
   .cgui\:ease-in-out {
-    --tw-ease: var(--cgui-ease-in-out);
-    transition-timing-function: var(--cgui-ease-in-out);
+    --tw-ease: var(--cg-ui-ease-in-out);
+    transition-timing-function: var(--cg-ui-ease-in-out);
+  }
+  .cgui\:ease-out {
+    --tw-ease: var(--cg-ui-ease-out);
+    transition-timing-function: var(--cg-ui-ease-out);
+  }
+  .cgui\:will-change-\[background-position\] {
+    will-change: background-position;
   }
   .cgui\:outline-none {
     --tw-outline-style: none;
@@ -1638,6 +1747,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .cgui\:\[transition\:grid-template-columns_var\(--cg-ui-duration-slow\)_var\(--ease-out\)\,padding_var\(--cg-ui-duration-slow\)_var\(--ease-out\)\,gap_var\(--cg-ui-duration-slow\)_var\(--ease-out\)\,border-radius_var\(--cg-ui-duration-slow\)_var\(--ease-out\)\,background-color_var\(--cg-ui-duration-base\)_var\(--ease-hover\)\,color_var\(--cg-ui-duration-base\)_var\(--ease-hover\)\,transform_var\(--cg-ui-duration-instant\)_var\(--ease-out\)\] {
+    transition: grid-template-columns var(--cg-ui-duration-slow) var(--ease-out),padding var(--cg-ui-duration-slow) var(--ease-out),gap var(--cg-ui-duration-slow) var(--ease-out),border-radius var(--cg-ui-duration-slow) var(--ease-out),background-color var(--cg-ui-duration-base) var(--ease-hover),color var(--cg-ui-duration-base) var(--ease-hover),transform var(--cg-ui-duration-instant) var(--ease-out);
+  }
   .cgui\:scrollbar-thumb-rounded-full {
     --scrollbar-thumb-radius: 9999px;
   }
@@ -1705,11 +1817,21 @@
       }
     }
   }
+  .cgui\:group-data-\[compact\=true\]\/navigation\:grid-cols-\[1\.5rem_minmax\(0\,0fr\)\] {
+    &:is(:where(.cgui\:group\/navigation)[data-compact="true"] *) {
+      grid-template-columns: 1.5rem minmax(0,0fr);
+    }
+  }
   .cgui\:group-data-\[compact\=true\]\/navigation\:justify-center {
     &:is(:where(.cgui\:group\/navigation)[data-compact="true"] *) {
       justify-content: center;
     }
   }
+  .cgui\:group-data-\[compact\=true\]\/navigation\:gap-0 {
+    &:is(:where(.cgui\:group\/navigation)[data-compact="true"] *) {
+      gap: calc(var(--cgui-spacing) * 0);
+    }
+  }
   .cgui\:group-data-\[compact\=true\]\/navigation\:py-3 {
     &:is(:where(.cgui\:group\/navigation)[data-compact="true"] *) {
       padding-block: calc(var(--cgui-spacing) * 3);
@@ -2219,6 +2341,14 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
+  .cgui\:active\:scale-98 {
+    &:active {
+      --tw-scale-x: 98%;
+      --tw-scale-y: 98%;
+      --tw-scale-z: 98%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   .cgui\:active\:bg-primary-100 {
     &:active {
       background-color: var(--cg-ui-palette-primary-100);
@@ -2229,6 +2359,19 @@
       color: var(--cg-ui-palette-primary-100);
     }
   }
+  .cgui\:active\:duration-\(--cg-ui-duration-instant\) {
+    &:active {
+      --tw-duration: var(--cg-ui-duration-instant);
+      transition-duration: var(--cg-ui-duration-instant);
+    }
+  }
+  .cgui\:not-data-\[disabled\]\:active\:scale-\[0\.98\] {
+    &:not(*[data-disabled]) {
+      &:active {
+        scale: 0.98;
+      }
+    }
+  }
   .cgui\:disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -2298,6 +2441,14 @@
       color: var(--cg-ui-color-fg-primary);
     }
   }
+  .cgui\:data-active\:scale-98 {
+    &[data-active] {
+      --tw-scale-x: 98%;
+      --tw-scale-y: 98%;
+      --tw-scale-z: 98%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   .cgui\:data-active\:scale-\[0\.98\] {
     &[data-active] {
       scale: 0.98;
@@ -2757,6 +2908,17 @@
       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\]\:delay-\[120ms\] {
+    &[data-state="closed"] {
+      transition-delay: 120ms;
+    }
+  }
+  .cgui\:data-\[state\=closed\]\:delay-\[120ms\] {
+    &[data-state="closed"] {
+      animation-delay: 120ms;
+      --tw-animation-delay: 120ms;
+    }
+  }
   .cgui\:data-\[state\=closed\]\:fade-out-0 {
     &[data-state="closed"] {
       --tw-exit-opacity: calc(0/100);
@@ -2775,6 +2937,11 @@
       --tw-exit-scale: .95;
     }
   }
+  .cgui\:data-\[state\=closed\]\:slide-out-to-top-2 {
+    &[data-state="closed"] {
+      --tw-exit-translate-y: calc(2*var(--spacing)*-1);
+    }
+  }
   .cgui\:data-\[state\=indeterminate\]\:border-surface-primary {
     &[data-state="indeterminate"] {
       border-color: var(--cg-ui-color-surface-primary);
@@ -2827,6 +2994,19 @@
       }
     }
   }
+  .cgui\:data-\[state\=open\]\:delay-0 {
+    &[data-state="open"] {
+      transition-delay: 0ms;
+    }
+  }
+  .cgui\:data-\[state\=open\]\:delay-0 {
+    &[data-state="open"] {
+      animation-delay: calc(0*1ms);
+      animation-delay: 0s;
+      --tw-animation-delay: calc(0*1ms);
+      --tw-animation-delay: 0s;
+    }
+  }
   .cgui\:data-\[state\=open\]\:fade-in-0 {
     &[data-state="open"] {
       --tw-enter-opacity: calc(0/100);
@@ -2845,6 +3025,11 @@
       --tw-enter-scale: .95;
     }
   }
+  .cgui\:data-\[state\=open\]\:slide-in-from-top-2 {
+    &[data-state="open"] {
+      --tw-enter-translate-y: calc(2*var(--spacing)*-1);
+    }
+  }
   .cgui\:data-\[vaul-drawer-direction\=bottom\]\:right-0 {
     &[data-vaul-drawer-direction="bottom"] {
       right: calc(var(--cgui-spacing) * 0);
@@ -2949,6 +3134,17 @@
       border-bottom-left-radius: calc(var(--cg-ui-number-md) * 1px);
     }
   }
+  .cgui\:motion-safe\:animate-shimmer {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: shimmer 1.8s ease-in-out infinite;
+    }
+  }
+  .cgui\:motion-reduce\:duration-\[15s\] {
+    @media (prefers-reduced-motion: reduce) {
+      --tw-duration: 15s;
+      transition-duration: 15s;
+    }
+  }
   .cgui\:md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3004,6 +3200,92 @@
       margin-inline-end: auto;
     }
   }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-chevron\"\]\]\:inline-grid {
+    & [data-slot="nav-trigger-chevron"] {
+      display: inline-grid;
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-chevron\"\]\]\:shrink-0 {
+    & [data-slot="nav-trigger-chevron"] {
+      flex-shrink: 0;
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-chevron\"\]\]\:place-items-center {
+    & [data-slot="nav-trigger-chevron"] {
+      place-items: center;
+    }
+  }
+  .cgui\:group-data-\[compact\=false\]\/navigation\:data-\[state\=open\]\:\[\&_\[data-slot\=\"nav-trigger-chevron\"\]\]\:rotate-180 {
+    &:is(:where(.cgui\:group\/navigation)[data-compact="false"] *) {
+      &[data-state="open"] {
+        & [data-slot="nav-trigger-chevron"] {
+          rotate: 180deg;
+        }
+      }
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-chevron\"\]_svg\]\:size-5 {
+    & [data-slot="nav-trigger-chevron"] svg {
+      width: calc(var(--cgui-spacing) * 5);
+      height: calc(var(--cgui-spacing) * 5);
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-icon\"\]\]\:pointer-events-none {
+    & [data-slot="nav-trigger-icon"] {
+      pointer-events: none;
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-icon\"\]\]\:me-auto {
+    & [data-slot="nav-trigger-icon"] {
+      margin-inline-end: auto;
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-icon\"\]\]\:shrink-0 {
+    & [data-slot="nav-trigger-icon"] {
+      flex-shrink: 0;
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-icon\"\]_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-6 {
+    & [data-slot="nav-trigger-icon"] svg:not([class*="size-"]) {
+      width: calc(var(--cgui-spacing) * 6);
+      height: calc(var(--cgui-spacing) * 6);
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-label\"\]\]\:min-w-0 {
+    & [data-slot="nav-trigger-label"] {
+      min-width: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-label\"\]\]\:overflow-hidden {
+    & [data-slot="nav-trigger-label"] {
+      overflow: hidden;
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-label\"\]\]\:text-left {
+    & [data-slot="nav-trigger-label"] {
+      text-align: left;
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-label\"\]\]\:whitespace-nowrap {
+    & [data-slot="nav-trigger-label"] {
+      white-space: nowrap;
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-label\"\]\>\*\]\:min-w-0 {
+    & [data-slot="nav-trigger-label"]>* {
+      min-width: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-label\"\]\>\*\]\:overflow-hidden {
+    & [data-slot="nav-trigger-label"]>* {
+      overflow: hidden;
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"nav-trigger-label\"\]\>\*\]\:whitespace-nowrap {
+    & [data-slot="nav-trigger-label"]>* {
+      white-space: nowrap;
+    }
+  }
   .cgui\:\[\&_\[data-slot\=\"trigger\"\]\]\:rounded-sm {
     & [data-slot="trigger"] {
       border-radius: calc(var(--cg-ui-number-sm) * 1px);
@@ -3191,8 +3473,8 @@
   }
   .cgui\:\[\&_svg\]\:ease-in-out {
     & svg {
-      --tw-ease: var(--cgui-ease-in-out);
-      transition-timing-function: var(--cgui-ease-in-out);
+      --tw-ease: var(--cg-ui-ease-in-out);
+      transition-timing-function: var(--cg-ui-ease-in-out);
     }
   }
   .cgui\:\[\&_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-3 {
@@ -3624,6 +3906,15 @@
   --cg-ui-z-index-notification: 400;
   --cg-ui-z-index-critical: 500;
   --cg-ui-z-index-loading: 500;
+  --cg-ui-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --cg-ui-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --cg-ui-ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
+  --cg-ui-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --cg-ui-ease-out-expo: var(--ease-out);
+  --cg-ui-duration-instant: 100ms;
+  --cg-ui-duration-fast: 150ms;
+  --cg-ui-duration-base: 200ms;
+  --cg-ui-duration-slow: 300ms;
 }
 :root, [data-theme='light'] {
   --cg-ui-color-fg-darkest: var(--cg-ui-palette-neutral-100);
@@ -4076,6 +4367,14 @@
     filter: blur(var(--tw-exit-blur,0));
   }
 }
+@keyframes shimmer {
+  0% {
+    background-position: 150%;
+  }
+  100% {
+    background-position: -50%;
+  }
+}
 @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 {

package/dist/assets/css/tailwind/theme.css

@@ -170,4 +170,28 @@
   --breakpoint-desktop-sm: 1280px;
   --breakpoint-desktop: 1440px;
   --breakpoint-desktop-lg: 1920px;
+
+  /* -------------------------------------------------------------------------
+       Animations
+       ------------------------------------------------------------------------- */
+  --ease-out: var(--cg-ui-ease-out);
+  --ease-in-out: var(--cg-ui-ease-in-out);
+  --ease-hover: var(--cg-ui-ease-hover);
+  --ease-drawer: var(--cg-ui-ease-drawer);
+  --ease-out-expo: var(--cg-ui-ease-out-expo);
+
+  --duration-instant: var(--cg-ui-duration-instant);
+  --duration-fast: var(--cg-ui-duration-fast);
+  --duration-base: var(--cg-ui-duration-base);
+  --duration-slow: var(--cg-ui-duration-slow);
+
+  --animate-shimmer: shimmer 1.8s ease-in-out infinite;
+  @keyframes shimmer {
+    0% {
+      background-position: 150%;
+    }
+    100% {
+      background-position: -50%;
+    }
+  }
 }

package/dist/assets/css/tokens/primitives.css

@@ -121,4 +121,18 @@
   --cg-ui-z-index-notification: 400;
   --cg-ui-z-index-critical: 500;
   --cg-ui-z-index-loading: 500;
+
+  /* -------------------------------------------------------------------------
+       Animations
+       ------------------------------------------------------------------------- */
+  --cg-ui-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --cg-ui-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --cg-ui-ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
+  --cg-ui-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+  --cg-ui-ease-out-expo: var(--ease-out);
+
+  --cg-ui-duration-instant: 100ms; /* button press, scale-98 */
+  --cg-ui-duration-fast: 150ms; /* tooltips, popover content */
+  --cg-ui-duration-base: 200ms; /* selects, hovers, inputs */
+  --cg-ui-duration-slow: 300ms; /* sidebar collapse, layout grid */
 }

package/dist/internal/utils/motion.d.ts

@@ -0,0 +1,20 @@
+import { cubicInOut, quartOut } from 'svelte/easing';
+/** Duration tokens in milliseconds (match `--duration-*` in `theme.css`). */
+export declare const duration: {
+    readonly instant: 100;
+    readonly fast: 150;
+    readonly base: 200;
+    readonly slow: 300;
+};
+export declare const easeOut: typeof quartOut;
+export declare const easeInOut: typeof cubicInOut;
+export declare const motion: {
+    readonly duration: {
+        readonly instant: 100;
+        readonly fast: 150;
+        readonly base: 200;
+        readonly slow: 300;
+    };
+    readonly easeOut: typeof quartOut;
+    readonly easeInOut: typeof cubicInOut;
+};

package/dist/internal/utils/motion.js

@@ -0,0 +1,15 @@
+import { cubicInOut, quartOut } from 'svelte/easing';
+/** Duration tokens in milliseconds (match `--duration-*` in `theme.css`). */
+export const duration = {
+    instant: 100,
+    fast: 150,
+    base: 200,
+    slow: 300,
+};
+export const easeOut = quartOut;
+export const easeInOut = cubicInOut;
+export const motion = {
+    duration,
+    easeOut,
+    easeInOut,
+};

package/dist/primitives/app-shell/styles.js

@@ -8,7 +8,7 @@ export const appShellHeaderVariants = tv({
     base: [
         'cgui:fixed cgui:top-0 cgui:right-0 cgui:h-(--app-shell-header-height) cgui:w-full',
         'cgui:flex cgui:items-center',
-        'cgui:transition-(width) cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[width] cgui:duration-(--cg-ui-duration-slow) cgui:ease-out',
         'cgui:bg-surface-white',
     ],
     variants: {
@@ -29,9 +29,8 @@ export const appShellSidebarVariants = tv({
         'cgui:flex cgui:flex-col',
         'cgui:h-full cgui:w-(--app-shell-sidebar-width) cgui:data-[collapsed]:w-(--app-shell-sidebar-collapsed-width)',
         'cgui:bg-surface-darkest',
-        'cgui:transition-(width) cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-all cgui:duration-(--cg-ui-duration-slow) cgui:ease-out',
         'cgui:fixed cgui:left-0 cgui:bottom-0',
-        'cgui:will-change-width',
     ],
     variants: {
         layout: {
@@ -47,13 +46,13 @@ export const appShellContentVariants = tv({
     base: [
         'cgui:overflow-y-auto',
         'cgui:size-full cgui:flex cgui:flex-col cgui:grow',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-all cgui:duration-(--cg-ui-duration-slow) cgui:ease-out',
     ],
 });
 export const appShellViewportVariants = tv({
     base: [
         'cgui:size-full cgui:overflow-hidden cgui:flex cgui:flex-col cgui:grow',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-all cgui:duration-(--cg-ui-duration-slow) cgui:ease-out',
         'cgui:group-has-[[data-slot="sidebar"]]/appShell:pl-(--app-shell-sidebar-width) cgui:group-data-[collapsed]/appShell:group-has-[[data-slot="sidebar"]]/appShell:pl-(--app-shell-sidebar-collapsed-width)',
         'cgui:group-has-[[data-slot="header"]]/appShell:pt-(--app-shell-header-height)',
     ],

package/dist/primitives/badge/styles.js

@@ -1,10 +1,11 @@
 import { tv } from '../../internal/utils/tailwindcss.js';
 export const badgeVariants = tv({
     base: [
-        'cgui:inline-flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:text-center cgui:overflow-hidden cgui:shrink-0 cgui:w-fit cgui:whitespace-nowrap',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
-        'cgui:select-none cgui:font-normal cgui:text-caption-2',
-        'cgui:[&>svg]:pointer-events-none',
+        'cgui:inline-flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:overflow-hidden cgui:shrink-0 cgui:w-fit',
+        'cgui:whitespace-nowrap cgui:select-none cgui:bg-clip-padding',
+        'cgui:transition-[color,background-color,border-color,box-shadow,transform,opacity,width,height,border-radius] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
+        'cgui:text-center cgui:leading-none cgui:font-normal cgui:text-caption-2',
+        'cgui:[&_svg]:pointer-events-none',
     ],
     variants: {
         variant: {

package/dist/primitives/breadcrumb/styles.js

@@ -14,7 +14,7 @@ export const breadcrumbSeparatorVariants = tv({
 export const breadcrumbLinkVariants = tv({
     base: [
         'cgui:text-fg-regular cgui:hover:text-fg-darkest',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-colors cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:truncate',
     ],
 });

package/dist/primitives/button/styles.js

@@ -1,13 +1,15 @@
 import { tv } from '../../internal/utils/tailwindcss.js';
 export const buttonVariants = tv({
     base: [
-        'cgui:flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:cursor-pointer cgui:px-2 cgui:text-center cgui:overflow-hidden cgui:shrink-0',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
-        'cgui:select-none cgui:font-medium cgui:outline-none cgui:bg-clip-padding cgui:whitespace-nowrap',
+        'cgui:inline-flex cgui:items-center cgui:justify-center cgui:gap-1  cgui:px-2  cgui:overflow-hidden cgui:shrink-0',
+        'cgui:whitespace-nowrap cgui:select-none cgui:outline-none cgui:cursor-pointer cgui:bg-clip-padding',
+        'cgui:transition-[color,background-color,border-color,box-shadow,transform] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
+        'cgui:font-medium cgui:text-center cgui:leading-none',
         'cgui:data-disabled:cursor-not-allowed cgui:data-disabled:opacity-50',
         'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg:not([class*="size-"])]:size-4.5',
         'cgui:focus-visible:ring-stroke-primary/50 cgui:focus-visible:ring-2',
         'cgui:aria-invalid:ring-stroke-error cgui:aria-invalid:border-stroke-error',
+        'cgui:active:scale-98 cgui:active:duration-(--cg-ui-duration-instant)',
     ],
     variants: {
         variant: {

package/dist/primitives/calendar/styles.js

@@ -21,7 +21,7 @@ export const calendarHeaderButtonVariants = tv({
     base: [
         'cgui:inline-flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:cursor-pointer cgui:size-6 cgui:text-center cgui:overflow-hidden',
         'cgui:text-icon-default',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color,box-shadow] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:select-none cgui:font-medium cgui:outline-none',
         'cgui:data-disabled:cursor-not-allowed cgui:data-disabled:opacity-50',
         'cgui:[&_svg]:shrink-0 cgui:[&_svg]:size-5',
@@ -59,7 +59,7 @@ export const calendarDayVariants = tv({
         'cgui:before:absolute cgui:data-today:before:block cgui:before:hidden cgui:before:top-1 cgui:before:left-1/2 cgui:before:-translate-x-1/2 cgui:before:size-1 cgui:before:bg-stroke-primary cgui:before:rounded-full',
         'cgui:rounded-full cgui:text-body-2 cgui:text-fg-darkest cgui:font-normal cgui:whitespace-nowrap',
         'cgui:bg-transparent cgui:border cgui:border-transparent',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color,box-shadow] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:cursor-pointer cgui:outline-none',
         'cgui:focus-visible:ring-stroke-primary/50 cgui:focus-visible:ring-2 cgui:bg-clip-padding',
         'cgui:data-selected:bg-surface-primary  cgui:data-selected:text-fg-white cgui:data-selected:font-medium',