@casinogate/ui 1.6.2 → 1.8.0

package/dist/assets/css/root.css

@@ -9,12 +9,18 @@
       "Courier New", monospace;
     --cgui-color-black: #000;
     --cgui-spacing: 0.25rem;
+    --cgui-text-xs: 0.75rem;
+    --cgui-text-xs--line-height: calc(1 / 0.75);
     --cgui-text-sm: 0.875rem;
     --cgui-text-sm--line-height: calc(1.25 / 0.875);
+    --cgui-text-base: 1rem;
+    --cgui-text-base--line-height: calc(1.5 / 1);
     --cgui-text-lg: 1.125rem;
     --cgui-text-lg--line-height: calc(1.75 / 1.125);
     --cgui-font-weight-normal: 400;
     --cgui-font-weight-medium: 500;
+    --cgui-font-weight-semibold: 600;
+    --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;
@@ -203,6 +209,9 @@
   .cgui\:right-0 {
     right: calc(var(--cgui-spacing) * 0);
   }
+  .cgui\:right-2 {
+    right: calc(var(--cgui-spacing) * 2);
+  }
   .cgui\:right-4 {
     right: calc(var(--cgui-spacing) * 4);
   }
@@ -215,8 +224,8 @@
   .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-dropdown\) {
+    z-index: var(--cg-ui-z-index-dropdown);
   }
   .cgui\:z-\(--cg-ui-z-index-select\) {
     z-index: var(--cg-ui-z-index-select);
@@ -230,15 +239,30 @@
   .cgui\:\!m-0 {
     margin: calc(var(--cgui-spacing) * 0) !important;
   }
+  .cgui\:mx-1 {
+    margin-inline: calc(var(--cgui-spacing) * 1);
+  }
   .cgui\:mx-auto {
     margin-inline: auto;
   }
+  .cgui\:my-1 {
+    margin-block: calc(var(--cgui-spacing) * 1);
+  }
   .cgui\:my-4 {
     margin-block: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:ms-auto {
+    margin-inline-start: auto;
+  }
+  .cgui\:mt-2 {
+    margin-top: calc(var(--cgui-spacing) * 2);
+  }
   .cgui\:mt-4 {
     margin-top: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:mb-2 {
+    margin-bottom: calc(var(--cgui-spacing) * 2);
+  }
   .cgui\:scrollbar-thin {
     &::-webkit-scrollbar-track {
       background-color: var(--scrollbar-track);
@@ -311,10 +335,6 @@
     width: calc(var(--cgui-spacing) * 14);
     height: calc(var(--cgui-spacing) * 14);
   }
-  .cgui\:size-40 {
-    width: calc(var(--cgui-spacing) * 40);
-    height: calc(var(--cgui-spacing) * 40);
-  }
   .cgui\:size-full {
     width: 100%;
     height: 100%;
@@ -361,18 +381,21 @@
   .cgui\:h-10 {
     height: calc(var(--cgui-spacing) * 10);
   }
+  .cgui\:h-10\.5 {
+    height: calc(var(--cgui-spacing) * 10.5);
+  }
   .cgui\:h-11 {
     height: calc(var(--cgui-spacing) * 11);
   }
   .cgui\:h-12 {
     height: calc(var(--cgui-spacing) * 12);
   }
-  .cgui\:h-14 {
-    height: calc(var(--cgui-spacing) * 14);
-  }
   .cgui\:h-20 {
     height: calc(var(--cgui-spacing) * 20);
   }
+  .cgui\:h-24 {
+    height: calc(var(--cgui-spacing) * 24);
+  }
   .cgui\:h-30 {
     height: calc(var(--cgui-spacing) * 30);
   }
@@ -388,6 +411,12 @@
   .cgui\:h-full {
     height: 100%;
   }
+  .cgui\:h-px {
+    height: 1px;
+  }
+  .cgui\:max-h-\(--bits-dropdown-menu-content-available-height\) {
+    max-height: var(--bits-dropdown-menu-content-available-height);
+  }
   .cgui\:max-h-\(--bits-select-content-available-height\) {
     max-height: var(--bits-select-content-available-height);
   }
@@ -436,6 +465,21 @@
   .cgui\:w-40 {
     width: calc(var(--cgui-spacing) * 40);
   }
+  .cgui\:w-48 {
+    width: calc(var(--cgui-spacing) * 48);
+  }
+  .cgui\:w-56 {
+    width: calc(var(--cgui-spacing) * 56);
+  }
+  .cgui\:w-64 {
+    width: calc(var(--cgui-spacing) * 64);
+  }
+  .cgui\:w-80 {
+    width: calc(var(--cgui-spacing) * 80);
+  }
+  .cgui\:w-\[420px\] {
+    width: 420px;
+  }
   .cgui\:w-auto {
     width: auto;
   }
@@ -445,6 +489,9 @@
   .cgui\:w-full {
     width: 100%;
   }
+  .cgui\:w-px {
+    width: 1px;
+  }
   .cgui\:w-screen {
     width: 100vw;
   }
@@ -472,15 +519,30 @@
   .cgui\:max-w-200 {
     max-width: calc(var(--cgui-spacing) * 200);
   }
+  .cgui\:max-w-\[90vw\] {
+    max-width: 90vw;
+  }
+  .cgui\:min-w-\(--bits-dropdown-menu-anchor-width\) {
+    min-width: var(--bits-dropdown-menu-anchor-width);
+  }
+  .cgui\:min-w-\(--bits-popover-anchor-width\) {
+    min-width: var(--bits-popover-anchor-width);
+  }
   .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);
   }
+  .cgui\:min-w-35 {
+    min-width: calc(var(--cgui-spacing) * 35);
+  }
   .cgui\:min-w-42 {
     min-width: calc(var(--cgui-spacing) * 42);
   }
+  .cgui\:min-w-64 {
+    min-width: calc(var(--cgui-spacing) * 64);
+  }
   .cgui\:min-w-fit {
     min-width: fit-content;
   }
@@ -496,6 +558,12 @@
   .cgui\:grow {
     flex-grow: 1;
   }
+  .cgui\:origin-\(--bits-dropdown-menu-content-transform-origin\) {
+    transform-origin: var(--bits-dropdown-menu-content-transform-origin);
+  }
+  .cgui\:origin-\(--bits-popover-content-transform-origin\) {
+    transform-origin: var(--bits-popover-content-transform-origin);
+  }
   .cgui\:origin-\(--bits-select-content-transform-origin\) {
     transform-origin: var(--bits-select-content-transform-origin);
   }
@@ -586,11 +654,14 @@
   .cgui\:gap-2\.5 {
     gap: calc(var(--cgui-spacing) * 2.5);
   }
+  .cgui\:gap-3 {
+    gap: calc(var(--cgui-spacing) * 3);
+  }
   .cgui\:gap-4 {
     gap: calc(var(--cgui-spacing) * 4);
   }
-  .cgui\:gap-12 {
-    gap: calc(var(--cgui-spacing) * 12);
+  .cgui\:gap-16 {
+    gap: calc(var(--cgui-spacing) * 16);
   }
   .cgui\:space-y-1 {
     :where(& > :not(:last-child)) {
@@ -599,6 +670,20 @@
       margin-block-end: calc(calc(var(--cgui-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .cgui\:space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--cgui-spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--cgui-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .cgui\:space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--cgui-spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--cgui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .cgui\:space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -626,6 +711,9 @@
   .cgui\:overflow-y-auto {
     overflow-y: auto;
   }
+  .cgui\:scroll-smooth {
+    scroll-behavior: smooth;
+  }
   .cgui\:rounded-\[inherit\] {
     border-radius: inherit;
   }
@@ -660,6 +748,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .cgui\:border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
   .cgui\:border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -672,6 +764,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .cgui\:border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .cgui\:border-none {
     --tw-border-style: none;
     border-style: none;
@@ -775,6 +871,12 @@
   .cgui\:bg-surface-lightest {
     background-color: var(--cg-ui-palette-neutral-10);
   }
+  .cgui\:bg-surface-lightest\/50 {
+    background-color: var(--cg-ui-palette-neutral-10);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 50%, transparent);
+    }
+  }
   .cgui\:bg-surface-primary {
     background-color: var(--cg-ui-palette-primary-80);
   }
@@ -823,6 +925,9 @@
   .cgui\:p-1 {
     padding: calc(var(--cgui-spacing) * 1);
   }
+  .cgui\:p-1\.5 {
+    padding: calc(var(--cgui-spacing) * 1.5);
+  }
   .cgui\:p-2 {
     padding: calc(var(--cgui-spacing) * 2);
   }
@@ -871,6 +976,12 @@
   .cgui\:py-4 {
     padding-block: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:py-5 {
+    padding-block: calc(var(--cgui-spacing) * 5);
+  }
+  .cgui\:pt-2 {
+    padding-top: calc(var(--cgui-spacing) * 2);
+  }
   .cgui\:pt-4 {
     padding-top: calc(var(--cgui-spacing) * 4);
   }
@@ -910,6 +1021,10 @@
   .cgui\:align-middle {
     vertical-align: middle;
   }
+  .cgui\:text-base {
+    font-size: var(--cgui-text-base);
+    line-height: var(--tw-leading, var(--cgui-text-base--line-height));
+  }
   .cgui\:text-body {
     font-size: var(--cg-ui-fz-body);
     line-height: var(--tw-leading, var(--cg-ui-lh-body));
@@ -926,6 +1041,10 @@
     font-size: var(--cg-ui-fz-caption-2);
     line-height: var(--tw-leading, var(--cg-ui-lh-caption-2));
   }
+  .cgui\:text-heading {
+    font-size: var(--cg-ui-fz-heading);
+    line-height: var(--tw-leading, var(--cg-ui-lh-heading));
+  }
   .cgui\:text-heading-2 {
     font-size: var(--cg-ui-fz-heading-2);
     line-height: var(--tw-leading, var(--cg-ui-lh-heading-2));
@@ -938,10 +1057,18 @@
     font-size: var(--cgui-text-sm);
     line-height: var(--tw-leading, var(--cgui-text-sm--line-height));
   }
+  .cgui\:text-xs {
+    font-size: var(--cgui-text-xs);
+    line-height: var(--tw-leading, var(--cgui-text-xs--line-height));
+  }
   .cgui\:leading-none {
     --tw-leading: 1;
     line-height: 1;
   }
+  .cgui\:leading-relaxed {
+    --tw-leading: var(--cgui-leading-relaxed);
+    line-height: var(--cgui-leading-relaxed);
+  }
   .cgui\:font-medium {
     --tw-font-weight: var(--cgui-font-weight-medium);
     font-weight: var(--cgui-font-weight-medium);
@@ -950,6 +1077,10 @@
     --tw-font-weight: var(--cgui-font-weight-normal);
     font-weight: var(--cgui-font-weight-normal);
   }
+  .cgui\:font-semibold {
+    --tw-font-weight: var(--cgui-font-weight-semibold);
+    font-weight: var(--cgui-font-weight-semibold);
+  }
   .cgui\:whitespace-nowrap {
     white-space: nowrap;
   }
@@ -1020,6 +1151,10 @@
     --tw-shadow: var(--cg-ui-shadow-dialog);
     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-dropdown {
+    --tw-shadow: var(--cg-ui-shadow-dropdown);
+    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-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1036,6 +1171,10 @@
     --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-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    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);
@@ -1051,6 +1190,11 @@
   .cgui\:outline-stroke-focus {
     outline-color: var(--cg-ui-palette-primary-60);
   }
+  .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-\[opacity\] {
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
@@ -1061,11 +1205,20 @@
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
   }
+  .cgui\:transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
+  }
   .cgui\:transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
   }
+  .cgui\:duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .cgui\:duration-250 {
     --tw-duration: 250ms;
     transition-duration: 250ms;
@@ -1095,6 +1248,9 @@
   .cgui\:scrollbar-thumb-stroke-default {
     --scrollbar-thumb: var(--cg-ui-palette-neutral-40);
   }
+  .cgui\:scrollbar-thumb-surface-light {
+    --scrollbar-thumb: var(--cg-ui-palette-neutral-20);
+  }
   .cgui\:scrollbar-thumb-surface-regular {
     --scrollbar-thumb: var(--cg-ui-palette-neutral-50);
   }
@@ -1238,6 +1394,13 @@
       }
     }
   }
+  .cgui\:hover\:bg-surface-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cg-ui-palette-neutral-01);
+      }
+    }
+  }
   .cgui\:hover\:bg-surface-primary-active {
     &:hover {
       @media (hover: hover) {
@@ -1266,6 +1429,13 @@
       }
     }
   }
+  .cgui\:hover\:no-underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: none;
+      }
+    }
+  }
   .cgui\:focus\:ring-stroke-default {
     &:focus {
       --tw-ring-color: var(--cg-ui-palette-neutral-40);
@@ -1314,6 +1484,11 @@
       opacity: 50%;
     }
   }
+  .cgui\:has-\[data-slot\=chevron\]\:pr-3 {
+    &:has(*:is(data-slot=chevron)) {
+      padding-right: calc(var(--cgui-spacing) * 3);
+    }
+  }
   .cgui\:has-\[\>\[data-slot\=button-group\]\]\:gap-2 {
     &:has(>[data-slot=button-group]) {
       gap: calc(var(--cgui-spacing) * 2);
@@ -1329,6 +1504,11 @@
       --tw-ring-color: var(--cg-ui-palette-system-error-100);
     }
   }
+  .cgui\:data-highlighted\:bg-surface-lightest {
+    &[data-highlighted] {
+      background-color: var(--cg-ui-palette-neutral-10);
+    }
+  }
   .cgui\:data-\[active\=\"\"\]\:bg-surface-white {
     &[data-active=""] {
       background-color: var(--cg-ui-palette-neutral-0);
@@ -1415,14 +1595,9 @@
       background-color: var(--cg-ui-palette-neutral-10);
     }
   }
-  .cgui\:data-\[orientation\=horizontal\]\:h-px {
-    &[data-orientation="horizontal"] {
-      height: 1px;
-    }
-  }
-  .cgui\:data-\[orientation\=horizontal\]\:w-full {
-    &[data-orientation="horizontal"] {
-      width: 100%;
+  .cgui\:data-\[inset\]\:ps-8 {
+    &[data-inset] {
+      padding-inline-start: calc(var(--cgui-spacing) * 8);
     }
   }
   .cgui\:data-\[orientation\=vertical\]\:h-auto {
@@ -1430,16 +1605,6 @@
       height: auto;
     }
   }
-  .cgui\:data-\[orientation\=vertical\]\:h-full {
-    &[data-orientation="vertical"] {
-      height: 100%;
-    }
-  }
-  .cgui\:data-\[orientation\=vertical\]\:w-px {
-    &[data-orientation="vertical"] {
-      width: 1px;
-    }
-  }
   .cgui\:data-\[placeholder\]\:text-fg-regular {
     &[data-placeholder] {
       color: var(--cg-ui-palette-neutral-50);
@@ -1482,6 +1647,16 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .cgui\:data-\[side\=left\]\:slide-in-from-end-2 {
+    &[data-side="left"] {
+      &:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*) {
+        --tw-enter-translate-x: calc(2*var(--spacing));
+      }
+      &:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*) {
+        --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+      }
+    }
+  }
   .cgui\:data-\[side\=left\]\:slide-in-from-right-2 {
     &[data-side="left"] {
       --tw-enter-translate-x: calc(2*var(--spacing));
@@ -1493,6 +1668,16 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .cgui\:data-\[side\=right\]\:slide-in-from-start-2 {
+    &[data-side="right"] {
+      &:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*) {
+        --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+      }
+      &:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*) {
+        --tw-enter-translate-x: calc(2*var(--spacing));
+      }
+    }
+  }
   .cgui\:data-\[side\=right\]\:slide-in-from-left-2 {
     &[data-side="right"] {
       --tw-enter-translate-x: calc(2*var(--spacing)*-1);
@@ -1712,6 +1897,23 @@
       flex-shrink: 0;
     }
   }
+  .cgui\:\[\&_svg\]\:text-icon-regular {
+    & svg {
+      color: var(--cg-ui-palette-neutral-50);
+    }
+  }
+  .cgui\:\[\&_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-4 {
+    & svg:not([class*="size-"]) {
+      width: calc(var(--cgui-spacing) * 4);
+      height: calc(var(--cgui-spacing) * 4);
+    }
+  }
+  .cgui\:\[\&_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-4\.5 {
+    & svg:not([class*="size-"]) {
+      width: calc(var(--cgui-spacing) * 4.5);
+      height: calc(var(--cgui-spacing) * 4.5);
+    }
+  }
   .cgui\:\[\&_tr\]\:h-10 {
     & tr {
       height: calc(var(--cgui-spacing) * 10);
@@ -1966,12 +2168,14 @@
   --cg-ui-number-xxl: 40;
   --cg-ui-number-2xxl: 48;
   --cg-ui-number-max: 360;
+  --cg-ui-shadow-base: rgba(0, 0, 0, 0.1) 0px 4px 12px;
   --cg-ui-shadow-toast: 0px 0px 8px 0px hsla(0, 0%, 0%, 0.2);
   --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-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+  --cg-ui-shadow-popover: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-dropdown: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-select: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   --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);

package/dist/assets/css/theme.css

@@ -123,6 +123,7 @@
   --shadow-popover: var(--cg-ui-shadow-popover);
   --shadow-select: var(--cg-ui-shadow-select);
   --shadow-dialog: var(--cg-ui-shadow-dialog);
+  --shadow-dropdown: var(--cg-ui-shadow-dropdown);
 
   /* Font sizes, Line heights */
   --text-heading: var(--cg-ui-fz-heading);
@@ -199,12 +200,14 @@
   --cg-ui-number-max: 360;
 
   /* Shadows */
+  --cg-ui-shadow-base: rgba(0, 0, 0, 0.1) 0px 4px 12px;
   --cg-ui-shadow-toast: 0px 0px 8px 0px hsla(0, 0%, 0%, 0.2);
   --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-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+  --cg-ui-shadow-popover: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-dropdown: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-select: var(--cg-ui-shadow-base);
+  --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 
   /* Font sizes, Line heights */
   --cg-ui-fz-base: 16;

package/dist/components/breadcrumb/breadcrumb.svelte

@@ -7,14 +7,14 @@
   import Separator from './components/breadcrumb.separator.svelte';
   import type { BreadcrumbProps } from './types.js';
 
-  let { children, ref = $bindable(null), path, ...restProps }: BreadcrumbProps = $props();
+  let { ref = $bindable(null), path, ...restProps }: BreadcrumbProps = $props();
 
   const items = $derived(Array.isArray(path) ? path : path.split('/').filter(Boolean));
 </script>
 
 <Root bind:ref {...restProps}>
   <List>
-    {#each items as item, idx}
+    {#each items as item, idx (idx)}
       {@const isLast = idx === items.length - 1}
 
       {#if isLast}

package/dist/components/breadcrumb/styles.d.ts

@@ -3,24 +3,24 @@ import type { ReadableBox } from 'svelte-toolbelt';
 import type { VariantProps } from 'tailwind-variants';
 export declare const breadcrumbVariants: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-            page?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-            page?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -32,13 +32,13 @@ export declare const breadcrumbVariants: import("tailwind-variants").TVReturnTyp
     page: string[];
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-            link?: import("tailwind-variants").ClassValue;
-            separator?: import("tailwind-variants").ClassValue;
-            page?: import("tailwind-variants").ClassValue;
-            item?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            link?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            list?: import("tailwind-merge").ClassNameValue;
+            separator?: import("tailwind-merge").ClassNameValue;
+            page?: import("tailwind-merge").ClassNameValue;
+            item?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/components/breadcrumb/types.d.ts

@@ -1,5 +1,5 @@
 import type { PrimitiveAnchorAttributes, PrimitiveElementAttributes, PrimitiveLiAttributes, PrimitiveOListAttributes, PrimitiveSpanAttributes } from '../../internal/types/html-attributes.js';
-import type { WithChild, WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { WithChild, WithChildren, WithElementRef, Without, WithoutChildrenOrChild } from 'svelte-toolbelt';
 import type { BreadcrumbVariantsProps } from './styles.js';
 type BreadcrumbRootPropsWithoutHTML = WithElementRef<WithChildren<{}>> & BreadcrumbVariantsProps;
 export type BreadcrumbRootProps = BreadcrumbRootPropsWithoutHTML & Without<PrimitiveElementAttributes, BreadcrumbRootPropsWithoutHTML>;
@@ -13,7 +13,7 @@ type BreadcrumbLinkPropsWithoutHTML = WithElementRef<WithChild<{}>>;
 export type BreadcrumbLinkProps = BreadcrumbLinkPropsWithoutHTML & Without<PrimitiveAnchorAttributes, BreadcrumbLinkPropsWithoutHTML>;
 type BreadcrumbPagePropsWithoutHTML = WithElementRef<WithChildren<{}>>;
 export type BreadcrumbPageProps = BreadcrumbPagePropsWithoutHTML & Without<PrimitiveSpanAttributes, BreadcrumbPagePropsWithoutHTML>;
-export type BreadcrumbProps = BreadcrumbRootProps & {
+export type BreadcrumbProps = WithoutChildrenOrChild<BreadcrumbRootProps> & {
     path: string[] | string;
 };
 export {};