@casinogate/ui 1.3.7 → 1.4.0

package/dist/assets/css/root.css

@@ -372,6 +372,9 @@
   .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);
   }
@@ -429,6 +432,9 @@
   .cgui\:max-w-100 {
     max-width: calc(var(--cgui-spacing) * 100);
   }
+  .cgui\:min-w-0 {
+    min-width: calc(var(--cgui-spacing) * 0);
+  }
   .cgui\:min-w-42 {
     min-width: calc(var(--cgui-spacing) * 42);
   }
@@ -459,6 +465,9 @@
     --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);
   }
@@ -492,9 +501,6 @@
   .cgui\:items-stretch {
     align-items: stretch;
   }
-  .cgui\:justify-between {
-    justify-content: space-between;
-  }
   .cgui\:justify-center {
     justify-content: center;
   }
@@ -867,6 +873,9 @@
   .cgui\:underline {
     text-decoration-line: underline;
   }
+  .cgui\:opacity-0 {
+    opacity: 0%;
+  }
   .cgui\:opacity-50 {
     opacity: 50%;
   }
@@ -1373,6 +1382,19 @@
       border-color: var(--cg-ui-palette-primary-80);
     }
   }
+  .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\:\[\&_\[data-slot\=\"icon\"\]\]\:size-6 {
+    & [data-slot="icon"] {
+      width: calc(var(--cgui-spacing) * 6);
+      height: calc(var(--cgui-spacing) * 6);
+    }
+  }
   .cgui\:data-\[compact\=false\]\:\[\&_\[data-slot\=\"trigger\"\]\]\:pl-0 {
     &[data-compact="false"] {
       & [data-slot="trigger"] {
@@ -1611,6 +1633,9 @@
   --cg-ui-palette-system-info-100: hsla(232, 22%, 29%, 1);
   --cg-ui-palette-system-info-10: hsla(240, 12%, 93%, 1);
 }
+:root {
+  interpolate-size: allow-keywords;
+}
 @layer base {
   [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
     appearance: none;

package/dist/components/collapsible/components/collapsaible.svelte.d.ts

@@ -41,4 +41,15 @@ export declare class CollapsibleRootState {
         readonly 'data-disabled': "" | undefined;
     };
 }
+export type CollapsibleTriggerStateOpts = WithRefProps<{}>;
+export declare class CollapsibleTriggerState {
+    static create(opts: CollapsibleTriggerStateOpts): CollapsibleTriggerState;
+    readonly opts: CollapsibleTriggerStateOpts;
+    readonly attachment: RefAttachment;
+    readonly root: CollapsibleRootState;
+    constructor(opts: CollapsibleTriggerStateOpts, root: CollapsibleRootState);
+    readonly props: {
+        readonly [x: symbol]: (node: HTMLElement) => () => void;
+    };
+}
 export {};

package/dist/components/collapsible/components/collapsaible.svelte.js

@@ -90,3 +90,19 @@ export class CollapsibleRootState {
         ...this.attachment,
     }));
 }
+export class CollapsibleTriggerState {
+    static create(opts) {
+        return new CollapsibleTriggerState(opts, CollapsibleRootContext.get());
+    }
+    opts;
+    attachment;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+    }
+    props = $derived.by(() => ({
+        ...this.attachment,
+    }));
+}

package/dist/components/collapsible/components/collapsaible.trigger.svelte

@@ -5,6 +5,8 @@
   import { cn, useId } from '../../../internal/utils/common.js';
 
   import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { CollapsibleTriggerState } from './collapsaible.svelte.js';
 
   const uid = $props.id();
 
@@ -18,15 +20,25 @@
     ...restProps
   }: CollapsibleTriggerProps = $props();
 
+  const triggerState = CollapsibleTriggerState.create({
+    ref: boxWith(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: boxWith(() => id),
+  });
+
   const styles = CollapsibleStylesContext.get();
+
+  const mergedProps = $derived(mergeProps(restProps, triggerState.props));
 </script>
 
-<CollapsiblePrimitive.Trigger bind:ref {id} class={cn(styles.current.trigger(), className)} {...restProps}>
-  {#snippet child(childProps)}
+<CollapsiblePrimitive.Trigger bind:ref {id} class={cn(styles.current.trigger(), className)} {...mergedProps}>
+  {#snippet child({ props: childProps })}
     {#if childSnippet}
-      {@render childSnippet?.(childProps)}
+      {@render childSnippet?.({ props: childProps, open: triggerState.root.opts.value.current })}
     {:else}
-      <button {...childProps.props}>
+      <button {...childProps}>
         {#if iconSnippet !== null}
           <span data-slot="icon" class={styles.current.icon()}>
             {#if iconSnippet}
@@ -37,7 +49,7 @@
           </span>
         {/if}
 
-        {@render childrenSnippet?.()}
+        {@render childrenSnippet?.({ open: triggerState.root.opts.value.current })}
       </button>
     {/if}
   {/snippet}

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

@@ -1,9 +1,12 @@
 import type { CollapsibleVariantsProps } from './styles.js';
 import { type CollapsibleContentProps as CollapsibleContentPropsPrimitive, type CollapsibleRootProps as CollapsibleRootPropsPrimitive, type CollapsibleTriggerProps as CollapsibleTriggerPropsPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';
+import type { WithChild, WithoutChild } from 'svelte-toolbelt';
 export type CollapsibleOpenVariant = 'single' | 'multiple';
 export type CollapsibleRootProps = CollapsibleRootPropsPrimitive & CollapsibleVariantsProps;
 export type CollapsibleContentProps = CollapsibleContentPropsPrimitive;
-export type CollapsibleTriggerProps = CollapsibleTriggerPropsPrimitive & {
+export type CollapsibleTriggerProps = WithChild<WithoutChild<CollapsibleTriggerPropsPrimitive> & {
     icon?: Snippet | null;
-};
+}, {
+    open: boolean;
+}>;

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

@@ -12,10 +12,10 @@
   let {
     ref = $bindable(null),
     id = useId(uid),
+    compact = $bindable(false),
     children,
     child,
     class: className,
-    compact = false,
     ...restProps
   }: NavigationRootProps = $props();
 

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

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

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

@@ -1,5 +1,7 @@
 import type { RefAttachment } from '../../../internal/types/common.js';
+import { Context } from 'runed';
 import { type ReadableBoxedValues, type WithRefProps } from 'svelte-toolbelt';
+export declare const NavigationSubContentStateCtx: Context<NavigationSubContentState>;
 type NavigationRootStateOpts = WithRefProps<ReadableBoxedValues<{
     compact: boolean;
 }>>;
@@ -50,18 +52,20 @@ type NavigationTriggerStateOpts = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
 }>>;
 export declare class NavigationTriggerState {
-    static create(opts: NavigationTriggerStateOpts): NavigationTriggerState;
+    static create(opts: NavigationTriggerStateOpts, subContent: NavigationSubContentState | null): NavigationTriggerState;
     readonly opts: NavigationTriggerStateOpts;
     readonly attachment: RefAttachment;
     readonly root: NavigationRootState;
     readonly item: NavigationItemState;
-    constructor(opts: NavigationTriggerStateOpts, root: NavigationRootState, item: NavigationItemState);
+    readonly subContent: NavigationSubContentState | null;
+    constructor(opts: NavigationTriggerStateOpts, root: NavigationRootState, item: NavigationItemState, subContent: NavigationSubContentState | null);
     readonly props: {
         readonly id: string;
         readonly "data-slot": "trigger";
         readonly role: "button";
         readonly tabindex: 0;
         readonly 'data-disabled': "" | undefined;
+        readonly 'data-sub-content': boolean;
     };
 }
 type NavigationSubContentStateOpts = WithRefProps<{}>;

package/dist/components/navigation/components/navigation.svelte.js

@@ -5,6 +5,7 @@ import { Context } from 'runed';
 import { attachRef } from 'svelte-toolbelt';
 const NavigationRootStateCtx = new Context(keyWithPrefix('navigation-root'));
 const NavigationItemStateCtx = new Context(keyWithPrefix('navigation-item'));
+export const NavigationSubContentStateCtx = new Context(keyWithPrefix('navigation-sub-content'));
 const SLOT_ATTR_VALUES = {
     root: 'root',
     content: 'content',
@@ -78,17 +79,19 @@ export class NavigationItemState {
     }));
 }
 export class NavigationTriggerState {
-    static create(opts) {
-        return new NavigationTriggerState(opts, NavigationRootStateCtx.get(), NavigationItemStateCtx.get());
+    static create(opts, subContent) {
+        return new NavigationTriggerState(opts, NavigationRootStateCtx.get(), NavigationItemStateCtx.get(), subContent);
     }
     opts;
     attachment;
     root;
     item;
-    constructor(opts, root, item) {
+    subContent;
+    constructor(opts, root, item, subContent) {
         this.opts = opts;
         this.root = root;
         this.item = item;
+        this.subContent = subContent;
         this.attachment = attachRef(opts.ref);
     }
     props = $derived.by(() => ({
@@ -97,12 +100,13 @@ export class NavigationTriggerState {
         role: 'button',
         tabindex: 0,
         'data-disabled': boolAttr(this.opts.disabled.current),
+        'data-sub-content': this.subContent !== null,
         ...this.attachment,
     }));
 }
 export class NavigationSubContentState {
     static create(opts) {
-        return new NavigationSubContentState(opts, NavigationRootStateCtx.get(), NavigationItemStateCtx.get());
+        return NavigationSubContentStateCtx.set(new NavigationSubContentState(opts, NavigationRootStateCtx.get(), NavigationItemStateCtx.get()));
     }
     opts;
     attachment;

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

@@ -6,29 +6,37 @@
   import { cn, useId } from '../../../internal/utils/common.js';
   import { boxWith, mergeProps } from 'svelte-toolbelt';
   import type { NavigationTriggerProps } from '../types.js';
-  import { NavigationTriggerState } from './navigation.svelte.js';
+  import { NavigationSubContentStateCtx, NavigationTriggerState } from './navigation.svelte.js';
 
   const uid = $props.id();
 
   let {
     ref = $bindable(null),
     id = useId(uid),
-    children,
     child,
+    icon,
+    label,
     class: className,
     href,
     disabled = false,
     ...restProps
   }: NavigationTriggerProps = $props();
 
-  const triggerState = NavigationTriggerState.create({
-    ref: boxWith(
-      () => ref,
-      (v) => (ref = v)
-    ),
-    id: boxWith(() => id),
-    disabled: boxWith(() => disabled),
-  });
+  const subContent = NavigationSubContentStateCtx.getOr(null);
+
+  const isSubTrigger = $derived.by(() => subContent !== null);
+
+  const triggerState = NavigationTriggerState.create(
+    {
+      ref: boxWith(
+        () => ref,
+        (v) => (ref = v)
+      ),
+      id: boxWith(() => id),
+      disabled: boxWith(() => disabled),
+    },
+    subContent
+  );
 
   const mergedProps = $derived(
     mergeProps(restProps, triggerState.props, { class: cn(NavigationStylesContext.get().current.trigger(), className) })
@@ -39,34 +47,84 @@
   });
 </script>
 
-{#if child}
-  {@render child({ props: mergedProps, ...sharedProps })}
-{:else if href}
-  <a {href} {...mergedProps}>
-    {@render children?.(sharedProps)}
-  </a>
-{:else if triggerState.item.hasSubContent && triggerState.root.isCompact}
+{#snippet content()}
+  {#if icon}
+    <span
+      data-slot="icon"
+      class={cn('cgap:inline-flex cgap:items-center cgap:justify-center cgap:shrink-0 cgap:size-6')}
+    >
+      {@render icon?.()}
+    </span>
+  {/if}
+
+  {#if label}
+    {#if typeof label === 'string'}
+      <span
+        data-slot="label"
+        class={cn('cgui:flex-1 cgui:min-w-0 cgui:text-left cgui:transition-all cgui:duration-250 cgui:ease-in-out', {
+          'cgui:w-0 cgui:opacity-0 cgui:pointer-events-none cgui:hidden': !isSubTrigger && triggerState.root.isCompact,
+        })}
+      >
+        {label}
+      </span>
+    {:else}
+      {@render label?.({ props: { 'data-slot': 'label' } })}
+    {/if}
+  {/if}
+{/snippet}
+
+{#snippet popoverTrigger()}
   <PopoverPrimitive.Trigger>
     {#snippet child({ props: childProps })}
       <button {...childProps} {...mergedProps} data-type="popover-trigger">
-        {@render children?.(sharedProps)}
+        {@render content?.()}
       </button>
     {/snippet}
   </PopoverPrimitive.Trigger>
-{:else if triggerState.item.hasSubContent && !triggerState.root.isCompact}
+{/snippet}
+
+{#snippet collapsibleTrigger()}
   <CollapsiblePrimitive.Trigger>
-    {#snippet child({ props: childProps })}
+    {#snippet child({ props: childProps, open })}
       <button {...childProps} {...mergedProps} data-type="collapsible-trigger">
-        {@render children?.(sharedProps)}
+        {@render content?.()}
 
-        <span class="cgui:flex cgui:items-center cgui:justify-center cgui:size-5 cgui:shrink-0">
-          <ChevronDown width={20} height={20} />
+        <span
+          data-slot="icon"
+          class={cn(
+            'cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0 cgui:transition-transform cgui:duration-250 cgui:ease-in-out',
+            {
+              'cgui:rotate-180': open,
+            }
+          )}
+        >
+          <ChevronDown width={24} height={24} />
         </span>
       </button>
     {/snippet}
   </CollapsiblePrimitive.Trigger>
-{:else}
+{/snippet}
+
+{#snippet buttonTrigger()}
   <button {...mergedProps}>
-    {@render children?.(sharedProps)}
+    {@render content?.()}
   </button>
+{/snippet}
+
+{#snippet linkTrigger()}
+  <a {href} {...mergedProps}>
+    {@render content?.()}
+  </a>
+{/snippet}
+
+{#if child}
+  {@render child({ props: mergedProps, ...sharedProps })}
+{:else if href}
+  {@render linkTrigger?.()}
+{:else if triggerState.item.hasSubContent && triggerState.root.isCompact}
+  {@render popoverTrigger?.()}
+{:else if triggerState.item.hasSubContent && !triggerState.root.isCompact}
+  {@render collapsibleTrigger?.()}
+{:else}
+  {@render buttonTrigger?.()}
 {/if}

package/dist/components/navigation/exports.d.ts

@@ -1 +1 @@
-export { default as Navigation } from './navigation.svelte';
+export { default as Root } from './navigation.svelte';

package/dist/components/navigation/exports.js

@@ -1 +1 @@
-export { default as Navigation } from './navigation.svelte';
+export { default as Root } from './navigation.svelte';

package/dist/components/navigation/index.d.ts

@@ -1,3 +1,3 @@
 export * as NavigationPrimitive from './exports-primitive.js';
-export * from './exports.js';
-export type { NavigationContentProps, NavigationItemProps, NavigationRootProps, NavigationSubContentProps, NavigationTriggerProps, } from './types.js';
+export * as Navigation from './exports.js';
+export type { NavigationContentProps, NavigationItemProps, NavigationItemValue, NavigationProps, NavigationRootProps, NavigationSubContentProps, NavigationTriggerProps, } from './types.js';

package/dist/components/navigation/index.js

@@ -1,2 +1,2 @@
 export * as NavigationPrimitive from './exports-primitive.js';
-export * from './exports.js';
+export * as Navigation from './exports.js';

package/dist/components/navigation/navigation.stories.svelte

@@ -1,9 +1,10 @@
 <script lang="ts" module>
+  import { Icon } from '../icons/index.js';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import type { Parameters } from '@storybook/sveltekit';
   import type { ComponentProps } from 'svelte';
   import Root from './components/navigation.root.svelte';
-  import { NavigationPrimitive } from './index.js';
+  import { Navigation, NavigationPrimitive, type NavigationItemValue } from './index.js';
 
   const parameters: Parameters = {
     controls: {
@@ -23,35 +24,36 @@
   const args: Args = {
     compact: false,
   };
-
-  type NavigationItem = {
-    id: number;
-    label: string;
-    children?: NavigationItem[];
-  };
 </script>
 
 <script lang="ts">
-  const NAVIGATION_ITEMS = [
+  const NAVIGATION_ITEMS: NavigationItemValue[] = [
     {
-      id: 1,
+      key: 1,
       label: 'Item 1',
+      icon: Icon.Info,
+      href: '#',
     },
     {
-      id: 2,
+      key: 2,
       label: 'Item 2',
+      icon: Icon.Info,
+      href: '#',
     },
     {
-      id: 3,
+      key: 3,
       label: 'Item 3',
+      icon: Icon.Info,
       children: [
         {
-          id: 4,
+          key: 4,
           label: 'Sub Item 1',
+          href: '#',
         },
         {
-          id: 5,
+          key: 5,
           label: 'Sub Item 2',
+          href: '#',
         },
       ],
     },
@@ -65,13 +67,17 @@
         <NavigationPrimitive.Content>
           {#each NAVIGATION_ITEMS as item}
             <NavigationPrimitive.Item>
-              <NavigationPrimitive.Trigger>{item.label}</NavigationPrimitive.Trigger>
+              <NavigationPrimitive.Trigger label={item.label}>
+                {#snippet icon()}
+                  <item.icon width={24} height={24} />
+                {/snippet}
+              </NavigationPrimitive.Trigger>
 
               {#if item?.children && item.children.length > 0}
                 <NavigationPrimitive.SubContent>
                   {#each item.children as child}
                     <NavigationPrimitive.Item>
-                      <NavigationPrimitive.Trigger>{child.label}</NavigationPrimitive.Trigger>
+                      <NavigationPrimitive.Trigger label={child.label} />
                     </NavigationPrimitive.Item>
                   {/each}
                 </NavigationPrimitive.SubContent>
@@ -83,3 +89,11 @@
     </div>
   {/snippet}
 </Story>
+
+<Story name="Preset" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <div class="cgui:max-w-64 cgui:mx-auto">
+      <Navigation.Root {...args} items={NAVIGATION_ITEMS} />
+    </div>
+  {/snippet}
+</Story>

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

@@ -1,3 +1,4 @@
+import { Navigation } from './index.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/navigation/navigation.svelte

@@ -1,3 +1,36 @@
-<script lang="ts" module></script>
+<script lang="ts">
+  import Content from './components/navigation.content.svelte';
+  import Item from './components/navigation.item.svelte';
+  import Root from './components/navigation.root.svelte';
+  import SubContent from './components/navigation.sub-content.svelte';
+  import Trigger from './components/navigation.trigger.svelte';
+  import type { NavigationProps } from './types.js';
 
-<script lang="ts"></script>
+  let { items, ref = $bindable(null), compact = $bindable(false), ...restProps }: NavigationProps = $props();
+</script>
+
+<Root bind:ref bind:compact {...restProps}>
+  <Content>
+    {#each items as item (item.key)}
+      <Item>
+        <Trigger label={item.label} {...'href' in item ? { href: item.href } : {}}>
+          {#snippet icon()}
+            {#if item.icon}
+              <item.icon width={24} height={24} />
+            {/if}
+          {/snippet}
+        </Trigger>
+
+        {#if 'children' in item}
+          <SubContent>
+            {#each item.children as child (child.key)}
+              <Item>
+                <Trigger label={child.label} href={child.href} />
+              </Item>
+            {/each}
+          </SubContent>
+        {/if}
+      </Item>
+    {/each}
+  </Content>
+</Root>

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

@@ -1,18 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Navigation: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Navigation = InstanceType<typeof Navigation>;
+import type { NavigationProps } from './types.js';
+declare const Navigation: import("svelte").Component<NavigationProps, {}, "ref" | "compact">;
+type Navigation = ReturnType<typeof Navigation>;
 export default Navigation;

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

@@ -7,7 +7,7 @@ export declare const navigationVariants: import("tailwind-variants").TVReturnTyp
     };
 }, {
     root: string[];
-    content: never[];
+    content: string[];
     item: never[];
     subContent: string[];
     trigger: string[];
@@ -17,7 +17,7 @@ export declare const navigationVariants: import("tailwind-variants").TVReturnTyp
     };
 }, {
     root: string[];
-    content: never[];
+    content: string[];
     item: never[];
     subContent: string[];
     trigger: string[];
@@ -27,7 +27,7 @@ export declare const navigationVariants: import("tailwind-variants").TVReturnTyp
     };
 }, {
     root: string[];
-    content: never[];
+    content: string[];
     item: never[];
     subContent: string[];
     trigger: string[];

package/dist/components/navigation/styles.js

@@ -9,7 +9,7 @@ export const navigationVariants = tv({
             'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
             'cgui:bg-surface-darkest',
         ],
-        content: [],
+        content: ['cgui:overflow-hidden'],
         item: [],
         subContent: [
             'cgui:data-[compact=false]:pl-10',
@@ -17,12 +17,14 @@ export const navigationVariants = tv({
             'cgui:data-[popover-content]:bg-surface-darkest cgui:data-[popover-content]:rounded-md',
         ],
         trigger: [
-            'cgui:flex cgui:items-center cgui:gap-1.5 cgui:justify-between',
+            'cgui:flex cgui:items-center cgui:gap-2',
+            'cgui:overflow-hidden',
             'cgui:w-full cgui:px-3 cgui:py-4',
-            'cgui:group-data-[compact=true]/navigation:py-3',
+            'cgui:group-data-[compact=true]/navigation:py-3 cgui:data-[sub-content="false"]:group-data-[compact=true]/navigation:justify-center',
             'cgui:text-fg-semilight cgui:text-body',
             'cgui:cursor-pointer cgui:transition-all cgui:duration-250 cgui:ease-in-out',
             'cgui:[data-disabled]:cursor-not-allowed cgui:[data-disabled]:opacity-50',
+            'cgui:[&_[data-slot="icon"]]:size-6',
         ],
     },
     variants: {

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

@@ -1,5 +1,6 @@
 import type { PrimitiveElementAttributes } from '../../internal/types/html-attributes.js';
-import type { WithChild, WithElementRef, Without } from 'svelte-toolbelt';
+import type { Component, Snippet } from 'svelte';
+import type { WithChild, WithElementRef, Without, WithoutChildren, WithoutChildrenOrChild } from 'svelte-toolbelt';
 import type { NavigationVariantsProps } from './styles.js';
 type NavigationRootPropsWithoutHTML = WithElementRef<WithChild<{}, {
     compact: boolean;
@@ -13,11 +14,35 @@ type NavigationSubContentPropsWithoutHTML = WithElementRef<WithChild<{}, {
     compact: boolean;
 }>>;
 export type NavigationSubContentProps = NavigationSubContentPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationSubContentPropsWithoutHTML>;
-type NavigationTriggerPropsWithoutHTML = WithElementRef<WithChild<{
+type NavigationTriggerPropsWithoutHTML = WithElementRef<WithoutChildren<WithChild<{
     href?: string;
     disabled?: boolean;
+    icon?: Snippet;
+    label?: string | Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
 }, {
     compact: boolean;
-}>>;
+}>>>;
 export type NavigationTriggerProps = NavigationTriggerPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationTriggerPropsWithoutHTML>;
+type NavigationItemBaseValue = {
+    key: string | number;
+    label: string;
+    icon?: Component<{
+        width?: number;
+        height?: number;
+    }>;
+};
+type NavigationItemValueWithHref = NavigationItemBaseValue & {
+    href: string;
+    children?: never;
+};
+type NavigationItemValueWithChildren = NavigationItemBaseValue & {
+    children: Omit<NavigationItemValueWithHref, 'icon'>[];
+    href?: never;
+};
+export type NavigationItemValue = NavigationItemValueWithHref | NavigationItemValueWithChildren;
+export type NavigationProps = WithoutChildrenOrChild<NavigationRootProps> & {
+    items: NavigationItemValue[];
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",