@casinogate/ui 1.10.19 → 1.11.1

package/dist/assets/css/root.css

@@ -182,6 +182,9 @@
   .cgui\:pointer-events-none {
     pointer-events: none;
   }
+  .cgui\:invisible {
+    visibility: hidden;
+  }
   .cgui\:absolute {
     position: absolute;
   }
@@ -496,6 +499,9 @@
   .cgui\:min-h-11 {
     min-height: calc(var(--cgui-spacing) * 11);
   }
+  .cgui\:min-h-\[1lh\] {
+    min-height: 1lh;
+  }
   .cgui\:w-\(--app-shell-sidebar-width\) {
     width: var(--app-shell-sidebar-width);
   }
@@ -583,6 +589,9 @@
   .cgui\:max-w-80 {
     max-width: calc(var(--cgui-spacing) * 80);
   }
+  .cgui\:max-w-84 {
+    max-width: calc(var(--cgui-spacing) * 84);
+  }
   .cgui\:max-w-100 {
     max-width: calc(var(--cgui-spacing) * 100);
   }
@@ -769,6 +778,12 @@
       margin-block-end: calc(calc(var(--cgui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .cgui\:gap-x-3 {
+    column-gap: calc(var(--cgui-spacing) * 3);
+  }
+  .cgui\:gap-x-4 {
+    column-gap: calc(var(--cgui-spacing) * 4);
+  }
   .cgui\:space-x-4 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1281,6 +1296,9 @@
   .cgui\:underline {
     text-decoration-line: underline;
   }
+  .cgui\:opacity-0 {
+    opacity: 0%;
+  }
   .cgui\:opacity-50 {
     opacity: 50%;
   }
@@ -1347,6 +1365,11 @@
     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-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
@@ -1576,6 +1599,13 @@
       }
     }
   }
+  .cgui\:hover\:text-fg-white {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--cg-ui-color-fg-white);
+      }
+    }
+  }
   .cgui\:hover\:text-primary-60 {
     &:hover {
       @media (hover: hover) {
@@ -1700,11 +1730,26 @@
       background-color: var(--cg-ui-color-surface-lightest);
     }
   }
+  .cgui\:data-highlighted\:bg-transparent {
+    &[data-highlighted] {
+      background-color: transparent;
+    }
+  }
   .cgui\:data-selected\:text-fg-primary {
     &[data-selected] {
       color: var(--cg-ui-color-fg-primary);
     }
   }
+  .cgui\:data-\[active\]\:bg-surface-dark {
+    &[data-active] {
+      background-color: var(--cg-ui-color-surface-dark);
+    }
+  }
+  .cgui\:data-\[active\]\:text-fg-white {
+    &[data-active] {
+      color: var(--cg-ui-color-fg-white);
+    }
+  }
   .cgui\:data-\[active\=\"\"\]\:bg-surface-white {
     &[data-active=""] {
       background-color: var(--cg-ui-color-surface-white);
@@ -1796,6 +1841,16 @@
       padding-inline-start: calc(var(--cgui-spacing) * 8);
     }
   }
+  .cgui\:data-\[invalid\]\:visible {
+    &[data-invalid] {
+      visibility: visible;
+    }
+  }
+  .cgui\:data-\[invalid\]\:opacity-100 {
+    &[data-invalid] {
+      opacity: 100%;
+    }
+  }
   .cgui\:data-\[orientation\=horizontal\]\:h-2 {
     &[data-orientation="horizontal"] {
       height: calc(var(--cgui-spacing) * 2);
@@ -2216,6 +2271,11 @@
       height: calc(var(--cgui-spacing) * 4);
     }
   }
+  .cgui\:\[\&_\[data-slot\=\"trigger\"\]\[data-active\]\]\:bg-transparent {
+    & [data-slot="trigger"][data-active] {
+      background-color: transparent;
+    }
+  }
   .cgui\:hover\:\[\&_\[data-slot\=icon\]\]\:text-icon-focus {
     &:hover {
       @media (hover: hover) {

package/dist/components/field/components/field.description.svelte

@@ -2,7 +2,7 @@
   import { cn, useId } from '../../../internal/utils/common.js';
 
   import { box, mergeProps } from 'svelte-toolbelt';
-  import { FieldStylesContext } from '../styles.js';
+  import { fieldDescriptionVariants } from '../styles.js';
   import type { FieldDescriptionProps } from '../types.js';
   import { FieldDescriptionState } from './field.svelte.js';
 
@@ -17,8 +17,6 @@
     ...restProps
   }: FieldDescriptionProps = $props();
 
-  const styles = FieldStylesContext.get();
-
   const descriptionState = FieldDescriptionState.create({
     ref: box.with(
       () => ref,
@@ -28,7 +26,7 @@
   });
 
   const mergedProps = $derived(
-    mergeProps(restProps, descriptionState.props, { class: cn(styles.current.description(), className) })
+    mergeProps(restProps, descriptionState.props, { class: cn(fieldDescriptionVariants({}), className) })
   );
 </script>
 

package/dist/components/field/components/field.error.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { cn, useId } from '../../../internal/utils/common.js';
-  import { FieldStylesContext } from '../styles.js';
   import type { FieldErrorProps } from '../types.js';
   import { FieldErrorState } from './field.svelte.js';
 
+  import { fieldErrorVariants } from '../styles.js';
+
   import { box, mergeProps } from 'svelte-toolbelt';
 
   const uid = $props.id();
@@ -17,8 +18,6 @@
     ...restProps
   }: FieldErrorProps = $props();
 
-  const styles = FieldStylesContext.get();
-
   const errorState = FieldErrorState.create({
     ref: box.with(
       () => ref,
@@ -28,16 +27,14 @@
   });
 
   const mergedProps = $derived(
-    mergeProps(restProps, errorState.props, { class: cn(styles.current.error(), className) })
+    mergeProps(restProps, errorState.props, { class: cn(fieldErrorVariants({}), className) })
   );
 </script>
 
-{#if errorState.root.opts.invalid.current}
-  {#if child}
-    {@render child({ props: mergedProps })}
-  {:else}
-    <span {...mergedProps}>
-      {@render children?.()}
-    </span>
-  {/if}
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
 {/if}

package/dist/components/field/components/field.label.svelte

@@ -2,7 +2,7 @@
   import type { FieldLabelProps } from '../types.js';
   import { FieldLabelState } from './field.svelte.js';
 
-  import { FieldStylesContext } from '../styles.js';
+  import { fieldLabelVariants } from '../styles.js';
 
   import { cn, useId } from '../../../internal/utils/common.js';
 
@@ -19,8 +19,6 @@
     ...restProps
   }: FieldLabelProps = $props();
 
-  const styles = FieldStylesContext.get();
-
   const labelState = FieldLabelState.create({
     ref: box.with(
       () => ref,
@@ -30,7 +28,7 @@
   });
 
   const mergedProps = $derived(
-    mergeProps(restProps, labelState.props, { class: cn(styles.current.label(), className) })
+    mergeProps(restProps, labelState.props, { class: cn(fieldLabelVariants({}), className) })
   );
 </script>
 

package/dist/components/field/components/field.root.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { cn, useId } from '../../../internal/utils/common.js';
   import { box, mergeProps } from 'svelte-toolbelt';
-  import { fieldStyles, FieldStylesContext } from '../styles.js';
+  import { fieldRootVariants } from '../styles.js';
   import type { FieldRootProps } from '../types.js';
   import { FieldRootState } from './field.svelte.js';
 
@@ -32,11 +32,7 @@
     required: box.with(() => required),
   });
 
-  const variants = $derived(fieldStyles());
-
-  FieldStylesContext.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(fieldRootVariants({}), className) }));
 
   const attrStates = $derived({
     invalid: rootState.opts.invalid.current,

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

@@ -52,6 +52,7 @@ export declare class FieldErrorState {
     constructor(opts: FieldErrorStateOpts, root: FieldRootState);
     readonly props: {
         readonly id: string;
+        readonly 'data-invalid': "" | undefined;
         readonly "data-slot": "field-error";
     };
 }

package/dist/components/field/components/field.svelte.js

@@ -1,5 +1,5 @@
 import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
-import { getDataActive, getDataDisabled } from '../../../internal/utils/attrs.js';
+import { boolAttr, getDataActive, getDataDisabled } from '../../../internal/utils/attrs.js';
 import { Context } from 'runed';
 import { untrack } from 'svelte';
 import { attachRef } from 'svelte-toolbelt';
@@ -81,6 +81,7 @@ export class FieldErrorState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
+        'data-invalid': boolAttr(this.root.opts.invalid.current),
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.error,
         ...this.attachment,
     }));

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

@@ -0,0 +1,5 @@
+export { default as Control } from './field.control.svelte';
+export { default as Description } from './field.description.svelte';
+export { default as Error } from './field.error.svelte';
+export { default as Label } from './field.label.svelte';
+export { default as Root } from './field.root.svelte';

package/dist/components/field/components/index.js

@@ -0,0 +1,5 @@
+export { default as Control } from './field.control.svelte';
+export { default as Description } from './field.description.svelte';
+export { default as Error } from './field.error.svelte';
+export { default as Label } from './field.label.svelte';
+export { default as Root } from './field.root.svelte';

package/dist/components/field/composed/basic/basic.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import * as Primitive from '../../components/index.js';
+
+  import type { FieldProps } from '../../types.js';
+
+  let {
+    label,
+    error,
+    description,
+    ref = $bindable(null),
+    children: childrenSnippet,
+    ...restProps
+  }: FieldProps = $props();
+</script>
+
+<Primitive.Root bind:ref {...restProps}>
+  {#if typeof label === 'string'}
+    <Primitive.Label>{label}</Primitive.Label>
+  {:else}
+    {@render label?.()}
+  {/if}
+
+  <Primitive.Control>
+    {#snippet children({ props })}
+      {@render childrenSnippet?.({ props })}
+    {/snippet}
+  </Primitive.Control>
+
+  {#if typeof description === 'string'}
+    <Primitive.Description>{description}</Primitive.Description>
+  {:else}
+    {@render description?.()}
+  {/if}
+
+  {#if typeof error === 'string'}
+    <Primitive.Error>{error}</Primitive.Error>
+  {:else}
+    {@render error?.()}
+  {/if}
+</Primitive.Root>

package/dist/components/field/composed/basic/basic.svelte.d.ts

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

package/dist/components/field/composed/basic/index.d.ts

@@ -0,0 +1 @@
+export { default as Basic } from './basic.svelte';

package/dist/components/field/composed/basic/index.js

@@ -0,0 +1 @@
+export { default as Basic } from './basic.svelte';

package/dist/components/field/composed/index.d.ts

@@ -0,0 +1 @@
+export * from './basic/index.js';

package/dist/components/field/composed/index.js

@@ -0,0 +1 @@
+export * from './basic/index.js';

package/dist/components/field/field.svelte

@@ -30,15 +30,15 @@
     {/snippet}
   </FieldControl>
 
-  {#if typeof error === 'string'}
-    <FieldError>{error}</FieldError>
-  {:else}
-    {@render error?.()}
-  {/if}
-
   {#if typeof description === 'string'}
     <FieldDescription>{description}</FieldDescription>
   {:else}
     {@render description?.()}
   {/if}
+
+  {#if typeof error === 'string'}
+    <FieldError>{error}</FieldError>
+  {:else}
+    {@render error?.()}
+  {/if}
 </FieldRoot>

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

@@ -1,3 +1,3 @@
-export * as FieldPrimitive from './exports-primitive.js';
-export * from './exports.js';
+export * as FieldPrimitive from './components/index.js';
+export * as Field from './composed/index.js';
 export type { FieldControlProps, FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldProps, FieldRootProps, } from './types.js';

package/dist/components/field/index.js

@@ -1,2 +1,2 @@
-export * as FieldPrimitive from './exports-primitive.js';
-export * from './exports.js';
+export * as FieldPrimitive from './components/index.js';
+export * as Field from './composed/index.js';

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

@@ -1,50 +1,9 @@
-import { Context } from 'runed';
-import type { ReadableBox } from 'svelte-toolbelt';
 import type { VariantProps } from 'tailwind-variants';
-export declare const fieldStyles: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            description?: import("tailwind-merge").ClassNameValue;
-            root?: import("tailwind-merge").ClassNameValue;
-            label?: import("tailwind-merge").ClassNameValue;
-            error?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            description?: import("tailwind-merge").ClassNameValue;
-            root?: import("tailwind-merge").ClassNameValue;
-            label?: import("tailwind-merge").ClassNameValue;
-            error?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {}, {
-    root: string;
-    label: string[];
-    error: string;
-    description: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            description?: import("tailwind-merge").ClassNameValue;
-            root?: import("tailwind-merge").ClassNameValue;
-            label?: import("tailwind-merge").ClassNameValue;
-            error?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {}, {
-    root: string;
-    label: string[];
-    error: string;
-    description: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
-    root: string;
-    label: string[];
-    error: string;
-    description: string;
-}, undefined, unknown, unknown, undefined>>;
-export type FieldVariantsProps = VariantProps<typeof fieldStyles>;
-type FieldStylesContextValues = ReadableBox<ReturnType<typeof fieldStyles>>;
-export declare const FieldStylesContext: Context<FieldStylesContextValues>;
-export {};
+export declare const fieldRootVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fieldLabelVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fieldErrorVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fieldDescriptionVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type FieldRootVariants = VariantProps<typeof fieldRootVariants>;
+export type FieldLabelVariants = VariantProps<typeof fieldLabelVariants>;
+export type FieldErrorVariants = VariantProps<typeof fieldErrorVariants>;
+export type FieldDescriptionVariants = VariantProps<typeof fieldDescriptionVariants>;

package/dist/components/field/styles.js

@@ -1,17 +1,23 @@
-import { keyWithPrefix } from '../../internal/utils/common.js';
 import { tv } from '../../internal/utils/tailwindcss.js';
-import { Context } from 'runed';
-export const fieldStyles = tv({
-    slots: {
-        root: 'cgui:flex cgui:flex-col cgui:gap-1',
-        label: [
-            'cgui:relative',
-            'cgui:w-fit',
-            'cgui:inline-flex cgui:items-center cgui:gap-0.5',
-            'cgui:text-fg-medium cgui:text-caption cgui:font-medium',
-        ],
-        error: 'cgui:text-caption  cgui:text-fg-error',
-        description: 'cgui:text-caption cgui:text-fg-medium',
-    },
+export const fieldRootVariants = tv({
+    base: ['cgui:flex cgui:flex-col cgui:gap-1'],
+});
+export const fieldLabelVariants = tv({
+    base: [
+        'cgui:relative',
+        'cgui:w-fit',
+        'cgui:inline-flex cgui:items-center cgui:gap-0.5',
+        'cgui:text-fg-medium cgui:text-caption cgui:font-medium',
+    ],
+});
+export const fieldErrorVariants = tv({
+    base: [
+        'cgui:text-caption cgui:text-fg-error',
+        'cgui:min-h-[1lh]',
+        'cgui:invisible cgui:opacity-0 cgui:transition-opacity cgui:duration-200',
+        'cgui:data-[invalid]:visible cgui:data-[invalid]:opacity-100',
+    ],
+});
+export const fieldDescriptionVariants = tv({
+    base: ['cgui:text-caption cgui:text-fg-medium'],
 });
-export const FieldStylesContext = new Context(keyWithPrefix('field-styles'));

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

@@ -1,7 +1,9 @@
+import type { WithVariants } from '../../internal/types/composition.js';
 import type { PrimitiveDivAttributes, PrimitiveLabelAttributes, PrimitiveSpanAttributes } from '../../internal/types/html-attributes.js';
 import type { Snippet } from 'svelte';
 import type { WithChild, WithElementRef, Without, WithoutChildrenOrChild } from 'svelte-toolbelt';
-type FieldRootPropsWithoutHTML = WithElementRef<WithChild<{
+import type { FieldDescriptionVariants, FieldErrorVariants, FieldLabelVariants, FieldRootVariants } from './styles.js';
+type FieldRootPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{
     invalid?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
@@ -11,7 +13,7 @@ type FieldRootPropsWithoutHTML = WithElementRef<WithChild<{
     disabled: boolean;
     readOnly: boolean;
     required: boolean;
-}>>;
+}>>, FieldRootVariants>;
 export type FieldRootProps = FieldRootPropsWithoutHTML & Without<PrimitiveDivAttributes, FieldRootPropsWithoutHTML>;
 export type FieldControlProps = {
     children?: Snippet<[{
@@ -19,11 +21,11 @@ export type FieldControlProps = {
     }]>;
     id?: string;
 };
-type FieldDescriptionPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+type FieldDescriptionPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{}>>, FieldDescriptionVariants>;
 export type FieldDescriptionProps = FieldDescriptionPropsWithoutHTML & Without<PrimitiveSpanAttributes, FieldDescriptionPropsWithoutHTML>;
-type FieldErrorPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+type FieldErrorPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{}>>, FieldErrorVariants>;
 export type FieldErrorProps = FieldErrorPropsWithoutHTML & Without<PrimitiveSpanAttributes, FieldErrorPropsWithoutHTML>;
-type FieldLabelPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+type FieldLabelPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{}>>, FieldLabelVariants>;
 export type FieldLabelProps = FieldLabelPropsWithoutHTML & Without<PrimitiveLabelAttributes, FieldLabelPropsWithoutHTML>;
 export type FieldProps = WithoutChildrenOrChild<FieldRootProps> & {
     label?: string | Snippet;

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

@@ -0,0 +1,7 @@
+export { default as Content } from './navigation.content.svelte';
+export { default as Item } from './navigation.item.svelte';
+export { default as Root } from './navigation.root.svelte';
+export { default as SubContent } from './navigation.sub-content.svelte';
+export { default as SubTrigger } from './navigation.sub-trigger.svelte';
+export { default as Sub } from './navigation.sub.svelte';
+export { default as Trigger } from './navigation.trigger.svelte';

package/dist/components/navigation/components/index.js

@@ -0,0 +1,7 @@
+export { default as Content } from './navigation.content.svelte';
+export { default as Item } from './navigation.item.svelte';
+export { default as Root } from './navigation.root.svelte';
+export { default as SubContent } from './navigation.sub-content.svelte';
+export { default as SubTrigger } from './navigation.sub-trigger.svelte';
+export { default as Sub } from './navigation.sub.svelte';
+export { default as Trigger } from './navigation.trigger.svelte';

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

@@ -20,6 +20,7 @@
     label,
     class: className,
     disabled = false,
+    active = false,
     ...restProps
   }: NavigationSubTriggerProps = $props();
 
@@ -30,6 +31,7 @@
     ),
     id: boxWith(() => id),
     disabled: boxWith(() => disabled),
+    active: boxWith(() => active),
   });
 
   const mergedProps = $derived(

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

@@ -49,6 +49,7 @@ export declare class NavigationItemState {
 }
 type NavigationTriggerStateOpts = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
+    active: boolean;
 }>>;
 export declare class NavigationTriggerState {
     static create(opts: NavigationTriggerStateOpts): NavigationTriggerState;
@@ -60,6 +61,7 @@ export declare class NavigationTriggerState {
         readonly id: string;
         readonly "data-slot": "trigger";
         readonly 'data-disabled': "" | undefined;
+        readonly 'data-active': "" | undefined;
     };
 }
 type NavigationSubStateOpts = WithRefProps<WritableBoxedValues<{
@@ -83,6 +85,7 @@ export declare class NavigationSubState {
 }
 type NavigationSubTriggerStateOpts = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
+    active: boolean;
 }>>;
 export declare class NavigationSubTriggerState {
     static create(opts: NavigationSubTriggerStateOpts): NavigationSubTriggerState;
@@ -95,6 +98,7 @@ export declare class NavigationSubTriggerState {
         readonly id: string;
         readonly "data-slot": "sub-trigger";
         readonly 'data-disabled': "" | undefined;
+        readonly 'data-active': "" | undefined;
         readonly 'data-state': "open" | "closed";
         readonly 'aria-expanded': boolean;
         readonly 'aria-haspopup': "menu";

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

@@ -89,6 +89,7 @@ export class NavigationTriggerState {
         id: this.opts.id.current,
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.trigger,
         'data-disabled': boolAttr(this.opts.disabled.current),
+        'data-active': boolAttr(this.opts.active.current),
         ...this.attachment,
     }));
 }
@@ -142,6 +143,7 @@ export class NavigationSubTriggerState {
         id: this.opts.id.current,
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.subTrigger,
         'data-disabled': boolAttr(this.opts.disabled.current),
+        'data-active': boolAttr(this.opts.active.current),
         'data-state': this.sub.isOpen ? 'open' : 'closed',
         'aria-expanded': this.sub.isOpen,
         'aria-haspopup': 'menu',

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

@@ -18,6 +18,7 @@
     class: className,
     href,
     disabled = false,
+    active = false,
     ...restProps
   }: NavigationTriggerProps = $props();
 
@@ -31,6 +32,7 @@
     ),
     id: boxWith(() => id),
     disabled: boxWith(() => disabled),
+    active: boxWith(() => active),
   });
 
   const mergedProps = $derived(

package/dist/components/navigation/{navigation.svelte → composed/basic/basic.svelte}

@@ -1,29 +1,10 @@
 <script lang="ts" module>
-  import { createListCollection } from '../../internal/index.js';
-  import type { ListCollection } from '../../internal/lib/collection/index.js';
   import type {
-    NavigationCollectionOptions,
-    NavigationItem,
     NavigationItemAction,
     NavigationItemLink,
     NavigationItemSub,
     NavigationSelectableItem,
-  } from './types.js';
-
-  export function createNavigationCollection(options: NavigationCollectionOptions): ListCollection<NavigationItem> {
-    const { items } = options;
-
-    return createListCollection({
-      items,
-      itemToValue: (item) => item.key,
-      itemToString: (item) => {
-        return item.label;
-      },
-      isItemDisabled: (item) => {
-        return !!item.disabled;
-      },
-    });
-  }
+  } from '../../types.js';
 
   function isLink(item: NavigationSelectableItem): item is NavigationItemLink {
     return item.type === 'link';
@@ -39,8 +20,8 @@
 </script>
 
 <script lang="ts">
-  import * as Primitive from './exports-primitive.js';
-  import type { NavigationProps } from './types.js';
+  import * as Primitive from '../../components/index.js';
+  import type { NavigationProps } from '../../types.js';
 
   let {
     collection,
@@ -48,6 +29,7 @@
     compact = $bindable(false),
     contentClass,
     item: itemSnippet,
+    activeKey,
     ...restProps
   }: NavigationProps = $props();
 
@@ -56,7 +38,11 @@
 
 {#snippet defaultSubRenderer(item: NavigationItemSub)}
   <Primitive.Sub>
-    <Primitive.SubTrigger label={item.label} disabled={item.disabled}>
+    <Primitive.SubTrigger
+      label={item.label}
+      disabled={item.disabled}
+      active={item.children.some((child) => child.key === activeKey)}
+    >
       {#snippet icon()}
         {#if item.icon}
           <item.icon width={24} height={24} />
@@ -74,7 +60,7 @@
 
 {#snippet defaultLinkRenderer(item: NavigationItemLink)}
   <Primitive.Item>
-    <Primitive.Trigger label={item.label} href={item.href} disabled={item.disabled}>
+    <Primitive.Trigger label={item.label} href={item.href} disabled={item.disabled} active={item.key === activeKey}>
       {#snippet icon()}
         {#if item.icon}
           <item.icon width={24} height={24} />
@@ -86,7 +72,7 @@
 
 {#snippet defaultActionRenderer(item: NavigationItemAction)}
   <Primitive.Item>
-    <Primitive.Trigger label={item.label} disabled={item.disabled}>
+    <Primitive.Trigger label={item.label} disabled={item.disabled} active={item.key === activeKey}>
       {#snippet icon()}
         {#if item.icon}
           <item.icon width={24} height={24} />

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

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

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

@@ -0,0 +1 @@
+export { default as Basic } from './basic.svelte';

package/dist/components/navigation/composed/basic/index.js

@@ -0,0 +1 @@
+export { default as Basic } from './basic.svelte';

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

@@ -0,0 +1 @@
+export * from './basic/index.js';

package/dist/components/navigation/composed/index.js

@@ -0,0 +1 @@
+export * from './basic/index.js';

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

@@ -1,4 +1,4 @@
-export * as NavigationPrimitive from './exports-primitive.js';
-export * as Navigation from './exports.js';
-export { createNavigationCollection } from './navigation.svelte';
-export type { NavigationCollection, NavigationCollectionOptions, NavigationContentProps, NavigationItem, NavigationItemAction, NavigationItemBase, NavigationItemLink, NavigationItemProps, NavigationItemSeparator, NavigationItemSub, NavigationProps, NavigationRootProps, NavigationSelectableItem, NavigationSubContentProps, NavigationSubProps, NavigationSubTriggerProps, NavigationTriggerProps, } from './types.js';
+export * as NavigationPrimitive from './components/index.js';
+export * as Navigation from './composed/index.js';
+export { createNavCollection } from './model/index.js';
+export type { NavigationCollection, NavigationCollectionOptions, NavigationContentProps, NavigationItem, NavigationItemAction, NavigationItemBase, NavigationItemLink, NavigationItemProps, NavigationItemSub, NavigationProps, NavigationRootProps, NavigationSelectableItem, NavigationSubContentProps, NavigationSubProps, NavigationSubTriggerProps, NavigationTriggerProps, } from './types.js';

package/dist/components/navigation/index.js

@@ -1,3 +1,3 @@
-export * as NavigationPrimitive from './exports-primitive.js';
-export * as Navigation from './exports.js';
-export { createNavigationCollection } from './navigation.svelte';
+export * as NavigationPrimitive from './components/index.js';
+export * as Navigation from './composed/index.js';
+export { createNavCollection } from './model/index.js';

package/dist/components/navigation/model/create-nav-collection.d.ts

@@ -0,0 +1,3 @@
+import type { ListCollection } from '@zag-js/collection';
+import type { NavigationCollectionOptions, NavigationItem } from '../types.js';
+export declare const createNavCollection: (options: NavigationCollectionOptions) => ListCollection<NavigationItem>;

package/dist/components/navigation/model/create-nav-collection.js

@@ -0,0 +1,14 @@
+import { createListCollection } from '../../../internal/index.js';
+export const createNavCollection = (options) => {
+    const { items } = options;
+    return createListCollection({
+        items,
+        itemToValue: (item) => item.key,
+        itemToString: (item) => {
+            return item.label;
+        },
+        isItemDisabled: (item) => {
+            return !!item.disabled;
+        },
+    });
+};

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

@@ -0,0 +1 @@
+export { createNavCollection } from './create-nav-collection.js';

package/dist/components/navigation/model/index.js

@@ -0,0 +1 @@
+export { createNavCollection } from './create-nav-collection.js';

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

@@ -13,7 +13,7 @@ export declare const navigationRootStyles: import("tailwind-variants").TVReturnT
     };
 }, undefined, string[], unknown, unknown, undefined>>;
 export declare const navigationContentStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
-export declare const navigationItemStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, never[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, never[], unknown, unknown, undefined>>;
+export declare const navigationItemStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 export declare const navigationTriggerStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 export declare const navigationSubStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, never[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, never[], unknown, unknown, undefined>>;
 export declare const navigationSubTriggerStyles: import("tailwind-variants").TVReturnType<{} | {} | {} | {}, undefined, string[], {} | {} | {}, undefined, import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>>;

package/dist/components/navigation/styles.js

@@ -15,18 +15,20 @@ export const navigationContentStyles = tv({
     base: [''],
 });
 export const navigationItemStyles = tv({
-    base: [],
+    base: ['cgui:data-highlighted:bg-transparent'],
 });
 export const navigationTriggerStyles = tv({
     base: [
         'cgui:flex cgui:items-center cgui:gap-2',
-        'cgui:overflow-hidden cgui:truncate',
+        'cgui:overflow-hidden cgui:truncate cgui:rounded-xs',
         'cgui:w-full cgui:px-3 cgui:py-4',
         'cgui:group-data-[compact=true]/navigation:py-3 cgui: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:[&_svg]:size-6 cgui:[&_[data-slot="icon"]]:me-auto',
+        'cgui:hover:text-fg-white',
+        'cgui:data-[active]:bg-surface-dark cgui:data-[active]:text-fg-white ',
     ],
 });
 export const navigationSubStyles = tv({
@@ -37,7 +39,11 @@ export const navigationSubTriggerStyles = tv({
     base: ['cgui:group-data-[compact=false]/navigation:data-[state=open]:[&_[data-slot="chevron"]]:rotate-180'],
 });
 export const navigationSubContentStyles = tv({
-    base: ['cgui:data-[compact=false]:pl-10', 'cgui:data-[compact=false]:[&_[data-slot="trigger"]]:pl-0'],
+    base: [
+        'cgui:data-[compact=false]:pl-10',
+        'cgui:data-[compact=false]:[&_[data-slot="trigger"]]:pl-0',
+        'cgui:[&_[data-slot="trigger"][data-active]]:bg-transparent',
+    ],
 });
 export const navigationDropdownContentStyles = tv({
     base: [

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

@@ -20,6 +20,7 @@ export type NavigationItemProps = NavigationItemPropsWithoutHTML & Without<Primi
 type NavigationTriggerPropsWithoutHTML = WithElementRef<WithoutChildren<WithChild<{
     href?: string;
     disabled?: boolean;
+    active?: boolean;
     icon?: Snippet;
     label?: string | Snippet<[{
         props: Record<string, unknown>;
@@ -36,6 +37,7 @@ type NavigationSubPropsWithoutHTML = WithElementRef<WithChild<{
 export type NavigationSubProps = NavigationSubPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationSubPropsWithoutHTML>;
 type NavigationSubTriggerPropsWithoutHTML = WithElementRef<WithoutChildren<WithChild<{
     disabled?: boolean;
+    active?: boolean;
     icon?: Snippet;
     label?: string | Snippet<[{
         props: Record<string, unknown>;
@@ -61,6 +63,7 @@ export type NavigationItemBase = {
     }>;
     /** Whether the item is disabled */
     disabled?: boolean;
+    [key: string]: unknown;
 };
 export type NavigationItemLink = NavigationItemBase & {
     type: 'link';
@@ -89,5 +92,6 @@ export type NavigationProps = WithoutChildrenOrChild<NavigationRootProps> & {
         props: Record<string, unknown>;
     }]>;
     contentClass?: string;
+    activeKey?: string;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.10.19",
+  "version": "1.11.1",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -10,7 +10,162 @@
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./styles.css": "./dist/assets/css/root.css"
+    "./styles.css": "./dist/assets/css/root.css",
+    "./app-shell": {
+      "types": "./dist/components/app-shell/index.d.ts",
+      "svelte": "./dist/components/app-shell/index.js",
+      "default": "./dist/components/app-shell/index.js"
+    },
+    "./badge": {
+      "types": "./dist/components/badge/index.d.ts",
+      "svelte": "./dist/components/badge/index.js",
+      "default": "./dist/components/badge/index.js"
+    },
+    "./breadcrumb": {
+      "types": "./dist/components/breadcrumb/index.d.ts",
+      "svelte": "./dist/components/breadcrumb/index.js",
+      "default": "./dist/components/breadcrumb/index.js"
+    },
+    "./button": {
+      "types": "./dist/components/button/index.d.ts",
+      "svelte": "./dist/components/button/index.js",
+      "default": "./dist/components/button/index.js"
+    },
+    "./button-group": {
+      "types": "./dist/components/button-group/index.d.ts",
+      "svelte": "./dist/components/button-group/index.js",
+      "default": "./dist/components/button-group/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/checkbox/index.d.ts",
+      "svelte": "./dist/components/checkbox/index.js",
+      "default": "./dist/components/checkbox/index.js"
+    },
+    "./collapsible": {
+      "types": "./dist/components/collapsible/index.d.ts",
+      "svelte": "./dist/components/collapsible/index.js",
+      "default": "./dist/components/collapsible/index.js"
+    },
+    "./combobox": {
+      "types": "./dist/components/combobox/index.d.ts",
+      "svelte": "./dist/components/combobox/index.js",
+      "default": "./dist/components/combobox/index.js"
+    },
+    "./command": {
+      "types": "./dist/components/command/index.d.ts",
+      "svelte": "./dist/components/command/index.js",
+      "default": "./dist/components/command/index.js"
+    },
+    "./data-table": {
+      "types": "./dist/components/data-table/index.d.ts",
+      "svelte": "./dist/components/data-table/index.js",
+      "default": "./dist/components/data-table/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/components/dialog/index.d.ts",
+      "svelte": "./dist/components/dialog/index.js",
+      "default": "./dist/components/dialog/index.js"
+    },
+    "./drawer": {
+      "types": "./dist/components/drawer/index.d.ts",
+      "svelte": "./dist/components/drawer/index.js",
+      "default": "./dist/components/drawer/index.js"
+    },
+    "./dropdown": {
+      "types": "./dist/components/dropdown/index.d.ts",
+      "svelte": "./dist/components/dropdown/index.js",
+      "default": "./dist/components/dropdown/index.js"
+    },
+    "./field": {
+      "types": "./dist/components/field/index.d.ts",
+      "svelte": "./dist/components/field/index.js",
+      "default": "./dist/components/field/index.js"
+    },
+    "./icons": {
+      "types": "./dist/components/icons/index.d.ts",
+      "svelte": "./dist/components/icons/index.js",
+      "default": "./dist/components/icons/index.js"
+    },
+    "./input": {
+      "types": "./dist/components/input/index.d.ts",
+      "svelte": "./dist/components/input/index.js",
+      "default": "./dist/components/input/index.js"
+    },
+    "./input-group": {
+      "types": "./dist/components/input-group/index.d.ts",
+      "svelte": "./dist/components/input-group/index.js",
+      "default": "./dist/components/input-group/index.js"
+    },
+    "./kbd": {
+      "types": "./dist/components/kbd/index.d.ts",
+      "svelte": "./dist/components/kbd/index.js",
+      "default": "./dist/components/kbd/index.js"
+    },
+    "./navigation": {
+      "types": "./dist/components/navigation/index.d.ts",
+      "svelte": "./dist/components/navigation/index.js",
+      "default": "./dist/components/navigation/index.js"
+    },
+    "./number-input": {
+      "types": "./dist/components/number-input/index.d.ts",
+      "svelte": "./dist/components/number-input/index.js",
+      "default": "./dist/components/number-input/index.js"
+    },
+    "./pagination": {
+      "types": "./dist/components/pagination/index.d.ts",
+      "svelte": "./dist/components/pagination/index.js",
+      "default": "./dist/components/pagination/index.js"
+    },
+    "./popover": {
+      "types": "./dist/components/popover/index.d.ts",
+      "svelte": "./dist/components/popover/index.js",
+      "default": "./dist/components/popover/index.js"
+    },
+    "./segment": {
+      "types": "./dist/components/segment/index.d.ts",
+      "svelte": "./dist/components/segment/index.js",
+      "default": "./dist/components/segment/index.js"
+    },
+    "./select": {
+      "types": "./dist/components/select/index.d.ts",
+      "svelte": "./dist/components/select/index.js",
+      "default": "./dist/components/select/index.js"
+    },
+    "./separator": {
+      "types": "./dist/components/separator/index.d.ts",
+      "svelte": "./dist/components/separator/index.js",
+      "default": "./dist/components/separator/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/components/skeleton/index.d.ts",
+      "svelte": "./dist/components/skeleton/index.js",
+      "default": "./dist/components/skeleton/index.js"
+    },
+    "./slider": {
+      "types": "./dist/components/slider/index.d.ts",
+      "svelte": "./dist/components/slider/index.js",
+      "default": "./dist/components/slider/index.js"
+    },
+    "./spinner": {
+      "types": "./dist/components/spinner/index.d.ts",
+      "svelte": "./dist/components/spinner/index.js",
+      "default": "./dist/components/spinner/index.js"
+    },
+    "./switch": {
+      "types": "./dist/components/switch/index.d.ts",
+      "svelte": "./dist/components/switch/index.js",
+      "default": "./dist/components/switch/index.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/textarea/index.d.ts",
+      "svelte": "./dist/components/textarea/index.js",
+      "default": "./dist/components/textarea/index.js"
+    },
+    "./toast": {
+      "types": "./dist/components/toast/index.d.ts",
+      "svelte": "./dist/components/toast/index.js",
+      "default": "./dist/components/toast/index.js"
+    }
   },
   "files": [
     "dist",

package/dist/components/field/exports-primitive.d.ts

@@ -1,5 +0,0 @@
-export { default as Control } from './components/field.control.svelte';
-export { default as Description } from './components/field.description.svelte';
-export { default as Error } from './components/field.error.svelte';
-export { default as Label } from './components/field.label.svelte';
-export { default as Root } from './components/field.root.svelte';

package/dist/components/field/exports-primitive.js

@@ -1,5 +0,0 @@
-export { default as Control } from './components/field.control.svelte';
-export { default as Description } from './components/field.description.svelte';
-export { default as Error } from './components/field.error.svelte';
-export { default as Label } from './components/field.label.svelte';
-export { default as Root } from './components/field.root.svelte';

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

@@ -1 +0,0 @@
-export { default as Field } from './field.svelte';

package/dist/components/field/exports.js

@@ -1 +0,0 @@
-export { default as Field } from './field.svelte';

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

@@ -1,7 +0,0 @@
-export { default as Content } from './components/navigation.content.svelte';
-export { default as Item } from './components/navigation.item.svelte';
-export { default as Root } from './components/navigation.root.svelte';
-export { default as SubContent } from './components/navigation.sub-content.svelte';
-export { default as SubTrigger } from './components/navigation.sub-trigger.svelte';
-export { default as Sub } from './components/navigation.sub.svelte';
-export { default as Trigger } from './components/navigation.trigger.svelte';

package/dist/components/navigation/exports-primitive.js

@@ -1,7 +0,0 @@
-export { default as Content } from './components/navigation.content.svelte';
-export { default as Item } from './components/navigation.item.svelte';
-export { default as Root } from './components/navigation.root.svelte';
-export { default as SubContent } from './components/navigation.sub-content.svelte';
-export { default as SubTrigger } from './components/navigation.sub-trigger.svelte';
-export { default as Sub } from './components/navigation.sub.svelte';
-export { default as Trigger } from './components/navigation.trigger.svelte';

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

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

package/dist/components/navigation/exports.js

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

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

@@ -1,7 +0,0 @@
-import type { ListCollection } from '../../internal/lib/collection/index.js';
-import type { NavigationCollectionOptions, NavigationItem } from './types.js';
-export declare function createNavigationCollection(options: NavigationCollectionOptions): ListCollection<NavigationItem>;
-import type { NavigationProps } from './types.js';
-declare const Navigation: import("svelte").Component<NavigationProps, {}, "ref" | "compact">;
-type Navigation = ReturnType<typeof Navigation>;
-export default Navigation;