@casinogate/ui 1.8.8 → 1.9.0

package/dist/assets/css/root.css

@@ -226,6 +226,9 @@
   .cgui\:z-\(--cg-ui-z-index-dropdown\) {
     z-index: var(--cg-ui-z-index-dropdown);
   }
+  .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);
   }
@@ -291,6 +294,9 @@
   .cgui\:hidden {
     display: none;
   }
+  .cgui\:inline-block {
+    display: inline-block;
+  }
   .cgui\:inline-flex {
     display: inline-flex;
   }
@@ -431,9 +437,6 @@
   .cgui\:w-\(--app-shell-sidebar-width\) {
     width: var(--app-shell-sidebar-width);
   }
-  .cgui\:w-0 {
-    width: calc(var(--cgui-spacing) * 0);
-  }
   .cgui\:w-1\.5 {
     width: calc(var(--cgui-spacing) * 1.5);
   }
@@ -536,6 +539,9 @@
   .cgui\:min-w-35 {
     min-width: calc(var(--cgui-spacing) * 35);
   }
+  .cgui\:min-w-40 {
+    min-width: calc(var(--cgui-spacing) * 40);
+  }
   .cgui\:min-w-42 {
     min-width: calc(var(--cgui-spacing) * 42);
   }
@@ -578,9 +584,6 @@
     --tw-scale-x: calc(1 * -1);
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
-  .cgui\:rotate-180 {
-    rotate: 180deg;
-  }
   .cgui\:animate-pulse {
     animation: var(--cgui-animate-pulse);
   }
@@ -849,6 +852,9 @@
   .cgui\:bg-surface-darkest {
     background-color: var(--cg-ui-color-surface-darkest);
   }
+  .cgui\:bg-surface-hover {
+    background-color: var(--cg-ui-color-surface-hover);
+  }
   .cgui\:bg-surface-light {
     background-color: var(--cg-ui-color-surface-light);
   }
@@ -927,6 +933,9 @@
   .cgui\:p-4 {
     padding: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:px-1 {
+    padding-inline: calc(var(--cgui-spacing) * 1);
+  }
   .cgui\:px-1\.5 {
     padding-inline: calc(var(--cgui-spacing) * 1.5);
   }
@@ -1131,9 +1140,6 @@
   .cgui\:underline {
     text-decoration-line: underline;
   }
-  .cgui\:opacity-0 {
-    opacity: 0%;
-  }
   .cgui\:opacity-50 {
     opacity: 50%;
   }
@@ -1292,6 +1298,11 @@
       }
     }
   }
+  .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\:py-3 {
     &:is(:where(.cgui\:group\/navigation)[data-compact="true"] *) {
       padding-block: calc(var(--cgui-spacing) * 3);
@@ -1376,6 +1387,11 @@
       content: var(--tw-content);
     }
   }
+  .cgui\:empty\:hidden {
+    &:empty {
+      display: none;
+    }
+  }
   .cgui\:hover\:bg-primary-60 {
     &:hover {
       @media (hover: hover) {
@@ -1607,16 +1623,6 @@
       }
     }
   }
-  .cgui\:data-\[popover-content\]\:rounded-md {
-    &[data-popover-content] {
-      border-radius: calc(var(--cg-ui-number-md) * 1px);
-    }
-  }
-  .cgui\:data-\[popover-content\]\:bg-surface-darkest {
-    &[data-popover-content] {
-      background-color: var(--cg-ui-color-surface-darkest);
-    }
-  }
   .cgui\:data-\[selected\=\"\"\]\:border-stroke-primary {
     &[data-selected=""] {
       border-color: var(--cg-ui-color-stroke-primary);
@@ -1795,13 +1801,6 @@
       --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"] *) {
-        justify-content: center;
-      }
-    }
-  }
   .cgui\:scrollbar-hover\:scrollbar-thumb-surface-regular\/60 {
     &::-webkit-scrollbar-thumb:hover {
       --scrollbar-thumb: var(--cg-ui-color-surface-regular);
@@ -1810,10 +1809,39 @@
       }
     }
   }
-  .cgui\:\[\&_\[data-slot\=\"icon\"\]\]\:size-6 {
+  .cgui\:group-data-\[compact\=false\]\/navigation\:data-\[state\=open\]\:\[\&_\[data-slot\=\"chevron\"\]\]\:rotate-180 {
+    &:is(:where(.cgui\:group\/navigation)[data-compact="false"] *) {
+      &[data-state="open"] {
+        & [data-slot="chevron"] {
+          rotate: 180deg;
+        }
+      }
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"icon\"\]\]\:me-auto {
     & [data-slot="icon"] {
-      width: calc(var(--cgui-spacing) * 6);
-      height: calc(var(--cgui-spacing) * 6);
+      margin-inline-end: auto;
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"trigger\"\]\]\:rounded-sm {
+    & [data-slot="trigger"] {
+      border-radius: calc(var(--cg-ui-number-sm) * 1px);
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"trigger\"\]\]\:px-2 {
+    & [data-slot="trigger"] {
+      padding-inline: calc(var(--cgui-spacing) * 2);
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"trigger\"\]\]\:py-2 {
+    & [data-slot="trigger"] {
+      padding-block: calc(var(--cgui-spacing) * 2);
+    }
+  }
+  .cgui\:\[\&_\[data-slot\=\"trigger\"\]\]\:text-sm {
+    & [data-slot="trigger"] {
+      font-size: var(--cgui-text-sm);
+      line-height: var(--tw-leading, var(--cgui-text-sm--line-height));
     }
   }
   .cgui\:data-\[compact\=false\]\:\[\&_\[data-slot\=\"trigger\"\]\]\:pl-0 {
@@ -1823,6 +1851,12 @@
       }
     }
   }
+  .cgui\:\[\&_\[data-slot\=\"trigger\"\]_\[data-slot\=\"icon\"\]\]\:size-4 {
+    & [data-slot="trigger"] [data-slot="icon"] {
+      width: calc(var(--cgui-spacing) * 4);
+      height: calc(var(--cgui-spacing) * 4);
+    }
+  }
   .cgui\:hover\:\[\&_\[data-slot\=icon\]\]\:text-icon-focus {
     &:hover {
       @media (hover: hover) {
@@ -1889,6 +1923,18 @@
       pointer-events: none;
     }
   }
+  .cgui\:\[\&_svg\]\:size-4 {
+    & svg {
+      width: calc(var(--cgui-spacing) * 4);
+      height: calc(var(--cgui-spacing) * 4);
+    }
+  }
+  .cgui\:\[\&_svg\]\:size-6 {
+    & svg {
+      width: calc(var(--cgui-spacing) * 6);
+      height: calc(var(--cgui-spacing) * 6);
+    }
+  }
   .cgui\:\[\&_svg\]\:shrink-0 {
     & svg {
       flex-shrink: 0;
@@ -1922,16 +1968,6 @@
       border-width: 0px;
     }
   }
-  .cgui\:\[data-disabled\]\:cursor-not-allowed {
-    &:is(data-disabled) {
-      cursor: not-allowed;
-    }
-  }
-  .cgui\:\[data-disabled\]\:opacity-50 {
-    &:is(data-disabled) {
-      opacity: 50%;
-    }
-  }
   .cgui\:\[\&\>\*\]\:focus-visible\:relative {
     &>* {
       &:focus-visible {

package/dist/components/navigation/components/navigation.content.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { boxWith, mergeProps } from 'svelte-toolbelt';
-
-  import { NavigationStylesContext } from '../styles.js';
   import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { navigationContentStyles } from '../styles.js';
   import type { NavigationContentProps } from '../types.js';
   import { NavigationContentState } from './navigation.svelte.js';
 
@@ -26,7 +25,7 @@
   });
 
   const mergedProps = $derived(
-    mergeProps(restProps, contentState.props, { class: cn(NavigationStylesContext.get().current.content(), className) })
+    mergeProps(restProps, contentState.props, { class: cn(navigationContentStyles(), className) })
   );
 </script>
 

package/dist/components/navigation/components/navigation.item.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import { CollapsiblePrimitive } from '../../collapsible/index.js';
-  import { NavigationStylesContext } from '../styles.js';
-  import { PopoverPrimitive } from '../../popover/index.js';
+  import { DropdownPrimitive } from '../../dropdown/index.js';
   import { cn, useId } from '../../../internal/utils/common.js';
   import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { navigationItemStyles } from '../styles.js';
   import type { NavigationItemProps } from '../types.js';
-  import { NavigationItemState } from './navigation.svelte.js';
+  import { NavigationItemState, NavigationSubStateCtx } from './navigation.svelte.js';
 
   const uid = $props.id();
 
@@ -18,6 +17,10 @@
     ...restProps
   }: NavigationItemProps = $props();
 
+  // Check if we're inside a Sub (SubContent context)
+  const subState = NavigationSubStateCtx.getOr(null);
+  const isInsideSub = $derived(subState !== null);
+
   const itemState = NavigationItemState.create({
     ref: boxWith(
       () => ref,
@@ -27,24 +30,23 @@
   });
 
   const mergedProps = $derived(
-    mergeProps(restProps, itemState.props, { class: cn(NavigationStylesContext.get().current.item(), className) })
+    mergeProps(restProps, itemState.props, { class: cn(navigationItemStyles(), className) })
   );
+
+  // Should use dropdown item when inside Sub in compact mode
+  const useDropdownItem = $derived(isInsideSub && itemState.root.isCompact);
 </script>
 
 {#if child}
   {@render child({ props: mergedProps })}
-{:else if itemState.root.isCompact}
+{:else if useDropdownItem}
+  <!-- Inside SubContent in compact mode: use Dropdown.Item -->
+  <DropdownPrimitive.Item {...mergedProps}>
+    {@render children?.()}
+  </DropdownPrimitive.Item>
+{:else}
+  <!-- Regular list item -->
   <li {...mergedProps}>
-    <PopoverPrimitive.Root>
-      {@render children?.()}
-    </PopoverPrimitive.Root>
+    {@render children?.()}
   </li>
-{:else}
-  <CollapsiblePrimitive.Root variant="clean">
-    {#snippet child({ props: childProps })}
-      <li {...mergedProps} {...childProps}>
-        {@render children?.()}
-      </li>
-    {/snippet}
-  </CollapsiblePrimitive.Root>
 {/if}

package/dist/components/navigation/components/navigation.root.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { NavigationStylesContext, navigationVariants } from '../styles.js';
+  import { navigationRootStyles } from '../styles.js';
   import type { NavigationRootProps } from '../types.js';
 
   import { NavigationRootState } from './navigation.svelte.js';
 
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { box, mergeProps } from 'svelte-toolbelt';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
 
   const uid = $props.id();
 
@@ -16,25 +16,23 @@
     children,
     child,
     class: className,
-    popoverProps,
+    dropdownProps,
     ...restProps
   }: NavigationRootProps = $props();
 
   const rootState = NavigationRootState.create({
-    ref: box.with(
+    ref: boxWith(
       () => ref,
       (v) => (ref = v)
     ),
-    id: box.with(() => id),
-    compact: box.with(() => compact),
-    popoverProps: box.with(() => popoverProps),
+    id: boxWith(() => id),
+    compact: boxWith(() => compact),
+    dropdownProps: boxWith(() => dropdownProps),
   });
 
-  const variants = $derived(navigationVariants({ compact }));
-
-  NavigationStylesContext.set(box.with(() => variants));
-
-  const mergedProps = $derived(mergeProps(restProps, rootState.props, { class: cn(variants.root(), className) }));
+  const mergedProps = $derived(
+    mergeProps(restProps, rootState.props, { class: cn(navigationRootStyles({ compact }), className) })
+  );
 </script>
 
 {#if child}

package/dist/components/navigation/components/navigation.sub-content.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import { boxWith, mergeProps } from 'svelte-toolbelt';
-
   import { CollapsiblePrimitive } from '../../collapsible/index.js';
-  import { NavigationStylesContext } from '../styles.js';
-  import { PopoverPrimitive } from '../../popover/index.js';
+  import { DropdownPrimitive } from '../../dropdown/index.js';
   import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
   import { cubicInOut } from 'svelte/easing';
-  import { fade, fly } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
+  import { navigationDropdownContentStyles, navigationSubContentStyles } from '../styles.js';
   import type { NavigationSubContentProps } from '../types.js';
   import { NavigationSubContentState } from './navigation.svelte.js';
 
@@ -31,39 +30,39 @@
 
   const mergedProps = $derived(
     mergeProps(restProps, subContentState.props, {
-      class: cn(NavigationStylesContext.get().current.subContent(), className),
+      class: cn(navigationSubContentStyles(), className),
     })
   );
+
+  // Safe access to dropdownProps
+  const dropdownProps = $derived(subContentState.root.opts.dropdownProps?.current);
 </script>
 
 {#if child}
   {@render child({ props: mergedProps, compact: subContentState.root.isCompact })}
 {:else if subContentState.root.isCompact}
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      side={subContentState.root.opts.popoverProps.current?.side ?? 'right'}
-      sideOffset={subContentState.root.opts.popoverProps.current?.sideOffset ?? 8}
-      alignOffset={subContentState.root.opts.popoverProps.current?.alignOffset ?? 0}
-      forceMount
+  <!-- Compact mode: Dropdown with Portal -->
+  <DropdownPrimitive.Portal>
+    <DropdownPrimitive.Content
+      side={dropdownProps?.side ?? 'right'}
+      sideOffset={dropdownProps?.sideOffset ?? 8}
+      alignOffset={dropdownProps?.alignOffset ?? 0}
+      variant="clean"
+      w="auto"
+      gap="clean"
+      rounded="clean"
+      class={cn(navigationDropdownContentStyles())}
     >
-      {#snippet child({ props: childProps, wrapperProps, open })}
-        {@const popoverProps = mergeProps(childProps, mergedProps)}
-        {#if open}
-          <div {...wrapperProps}>
-            <ol {...popoverProps} transition:fly={{ duration: 250, easing: cubicInOut, x: 10 }}>
-              {@render children?.({ compact: subContentState.root.isCompact })}
-            </ol>
-          </div>
-        {/if}
-      {/snippet}
-    </PopoverPrimitive.Content>
-  </PopoverPrimitive.Portal>
+      <ol {...mergedProps}>
+        {@render children?.({ compact: subContentState.root.isCompact })}
+      </ol>
+    </DropdownPrimitive.Content>
+  </DropdownPrimitive.Portal>
 {:else}
-  <CollapsiblePrimitive.Content {...mergedProps}>
-    {#snippet child({ props: childProps, open })}
-      {@const collapsibleProps = mergeProps(childProps, mergedProps)}
+  <CollapsiblePrimitive.Content>
+    {#snippet child({ props: collapsibleProps, open })}
       {#if open}
-        <ol {...collapsibleProps} transition:fade={{ duration: 250, easing: cubicInOut }}>
+        <ol {...collapsibleProps} {...mergedProps} transition:fade={{ duration: 250, easing: cubicInOut }}>
           {@render children?.({ compact: subContentState.root.isCompact })}
         </ol>
       {/if}

package/dist/components/navigation/components/navigation.sub-trigger.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { CollapsiblePrimitive } from '../../collapsible/index.js';
+  import { DropdownPrimitive } from '../../dropdown/index.js';
+  import ChevronDown from '../../icons/chevron-down.svelte';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { cubicInOut } from 'svelte/easing';
+  import { slide } from 'svelte/transition';
+  import { navigationSubTriggerStyles } from '../styles.js';
+  import type { NavigationSubTriggerProps } from '../types.js';
+  import { NavigationSubTriggerState } from './navigation.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    id = useId(uid),
+    child,
+    icon,
+    label,
+    class: className,
+    disabled = false,
+    ...restProps
+  }: NavigationSubTriggerProps = $props();
+
+  const subTriggerState = NavigationSubTriggerState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+    disabled: boxWith(() => disabled),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, subTriggerState.props, {
+      class: cn(navigationSubTriggerStyles(), className),
+    })
+  );
+
+  const attrs = $derived({
+    compact: subTriggerState.root.isCompact,
+    open: subTriggerState.sub.isOpen,
+  });
+</script>
+
+{#snippet content()}
+  {#if icon}
+    <span
+      data-slot="icon"
+      class={cn('cgui:inline-flex cgui:items-center cgui:justify-center cgui:shrink-0 cgui:empty:hidden')}
+    >
+      {@render icon?.()}
+    </span>
+  {/if}
+
+  {#if label}
+    {#if typeof label === 'string'}
+      {#if !subTriggerState.root.isCompact}
+        <span
+          data-slot="label"
+          class="cgui:min-w-0 cgui:text-left cgui:whitespace-nowrap cgui:overflow-hidden cgui:flex-1"
+          transition:slide={{ axis: 'x', duration: 250, easing: cubicInOut }}
+        >
+          <span class="cgui:inline-block" transition:slide={{ axis: 'x', duration: 150, easing: cubicInOut }}>
+            {label}
+          </span>
+        </span>
+      {/if}
+    {:else}
+      {@render label?.({ props: { 'data-slot': 'label' } })}
+    {/if}
+  {/if}
+{/snippet}
+
+{#snippet chevron()}
+  <span
+    data-slot="chevron"
+    class={cn(
+      'cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0',
+      'cgui:transition-transform cgui:duration-250 cgui:ease-in-out'
+    )}
+  >
+    <ChevronDown width={24} height={24} />
+  </span>
+{/snippet}
+
+{#if child}
+  {@render child({ props: mergedProps, ...attrs })}
+{:else if subTriggerState.root.isCompact}
+  <DropdownPrimitive.Trigger>
+    {#snippet child({ props: dropdownProps })}
+      <button {...dropdownProps} {...mergedProps}>
+        {@render content?.()}
+      </button>
+    {/snippet}
+  </DropdownPrimitive.Trigger>
+{:else}
+  <CollapsiblePrimitive.Trigger>
+    {#snippet child({ props: collapsibleProps })}
+      <button {...collapsibleProps} {...mergedProps}>
+        {@render content?.()}
+        {@render chevron()}
+      </button>
+    {/snippet}
+  </CollapsiblePrimitive.Trigger>
+{/if}

package/dist/components/navigation/components/navigation.sub-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavigationSubTriggerProps } from '../types.js';
+declare const Navigation: import("svelte").Component<NavigationSubTriggerProps, {}, "ref">;
+type Navigation = ReturnType<typeof Navigation>;
+export default Navigation;

package/dist/components/navigation/components/navigation.sub.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { CollapsiblePrimitive } from '../../collapsible/index.js';
+  import { DropdownPrimitive } from '../../dropdown/index.js';
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { navigationSubStyles } from '../styles.js';
+  import type { NavigationSubProps } from '../types.js';
+  import { NavigationSubState } from './navigation.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    id = useId(uid),
+    open = $bindable(false),
+    children,
+    child,
+    class: className,
+    ...restProps
+  }: NavigationSubProps = $props();
+
+  const subState = NavigationSubState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+    open: boxWith(
+      () => open,
+      (v) => (open = v)
+    ),
+  });
+
+  const mergedProps = $derived(mergeProps(restProps, subState.props, { class: cn(navigationSubStyles(), className) }));
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps, open })}
+{:else if subState.root.isCompact}
+  <!-- Compact mode: use Dropdown -->
+  <DropdownPrimitive.Root bind:open>
+    <li {...mergedProps}>
+      {@render children?.({ open })}
+    </li>
+  </DropdownPrimitive.Root>
+{:else}
+  <!-- Expanded mode: use Collapsible -->
+  <CollapsiblePrimitive.Root bind:open variant="clean">
+    {#snippet child({ props: collapsibleProps })}
+      <li {...mergedProps} {...collapsibleProps}>
+        {@render children?.({ open })}
+      </li>
+    {/snippet}
+  </CollapsiblePrimitive.Root>
+{/if}

package/dist/components/navigation/components/navigation.sub.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavigationSubProps } from '../types.js';
+declare const Navigation: import("svelte").Component<NavigationSubProps, {}, "ref" | "open">;
+type Navigation = ReturnType<typeof Navigation>;
+export default Navigation;