@casinogate/ui 2.0.8 → 2.0.10

package/dist/primitives/checkbox/components/checkbox.root.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import { Icon } from '../../../atomic/icons/index.js';
   import { useId } from '../../../internal/utils/common.js';
+  import { motion } from '../../../internal/utils/motion.js';
   import { cn } from '../../../internal/utils/tailwindcss.js';
   import { Checkbox } from 'bits-ui';
-  import { cubicInOut } from 'svelte/easing';
-  import { fly } from 'svelte/transition';
+  import { prefersReducedMotion } from 'svelte/motion';
+  import { scale } from 'svelte/transition';
   import {
     checkboxCheckedIndicatorVariants,
     checkboxIndeterminateIndicatorVariants,
@@ -25,6 +26,18 @@
     rounded = 'xs',
     ...props
   }: CheckboxRootProps = $props();
+
+  const indicatorStart = $derived(prefersReducedMotion.current ? 1 : 0.85);
+  const indicatorIn = $derived({
+    start: indicatorStart,
+    duration: motion.duration.fast,
+    easing: motion.easeOut,
+  });
+  const indicatorOut = $derived({
+    start: indicatorStart,
+    duration: motion.duration.instant,
+    easing: motion.easeOut,
+  });
 </script>
 
 <Checkbox.Root
@@ -42,16 +55,16 @@
       <span
         data-slot="indeterminate-indicator"
         data-state="indeterminate"
-        in:fly={{ duration: 250, y: 4, easing: cubicInOut }}
-        out:fly={{ duration: 250, y: -4, easing: cubicInOut }}
+        in:scale={indicatorIn}
+        out:scale={indicatorOut}
         class={checkboxIndeterminateIndicatorVariants({ size, rounded })}
       ></span>
     {:else if childrenProps.checked}
       <span
         data-slot="checked-indicator"
         data-state="checked"
-        in:fly={{ duration: 250, y: 4, easing: cubicInOut }}
-        out:fly={{ duration: 250, y: -4, easing: cubicInOut }}
+        in:scale={indicatorIn}
+        out:scale={indicatorOut}
         class={checkboxCheckedIndicatorVariants({ size, rounded })}
       >
         <Icon.Check />

package/dist/primitives/checkbox/styles.js

@@ -5,7 +5,7 @@ export const checkboxRootVariants = tv({
         'cgui:flex cgui:items-center cgui:justify-center',
         'cgui:border cgui:border-surface-regular cgui:outline-none',
         'cgui:cursor-pointer cgui:select-none',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[background-color,border-color,transform] cgui:duration-(--cg-ui-duration-fast) cgui:ease-out',
         'cgui:active:scale-95',
         'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed',
         'cgui:data-[state=indeterminate]:border-surface-primary',

package/dist/primitives/chip/styles.js

@@ -7,7 +7,7 @@ export const chipGroupVariants = tv({
 export const chipVariants = tv({
     base: [
         'cgui:inline-flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:text-center cgui:overflow-hidden cgui:shrink-0 cgui:w-fit cgui:whitespace-nowrap',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:select-none cgui:font-normal cgui:text-caption-2',
         'cgui:cursor-pointer cgui:outline-none',
         'cgui:focus-visible:ring-2 cgui:focus-visible:ring-stroke-primary cgui:focus-visible:ring-offset-2',

package/dist/primitives/collapsible/components/collapsaible.content.svelte

@@ -3,6 +3,7 @@
   import { cn } from '../../../internal/utils/tailwindcss.js';
 
   import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+  import { motion } from '../../../internal/utils/motion.js';
   import { fade } from 'svelte/transition';
   import { collapsibleContentVariants } from '../styles.js';
   import type { CollapsibleContentProps } from '../types.js';
@@ -31,7 +32,7 @@
     {#if childSnippet}
       {@render childSnippet?.(childProps)}
     {:else if childProps.open}
-      <div {...childProps.props} transition:fade={{ duration: 250 }}>
+      <div {...childProps.props} transition:fade={{ duration: motion.duration.base, easing: motion.easeOut }}>
         {@render children?.()}
       </div>
     {/if}

package/dist/primitives/collapsible/styles.js

@@ -5,7 +5,7 @@ export const collapsibleRootVariants = tv({
     base: [
         'cgui:relative cgui:overflow-hidden',
         'cgui:w-full',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:data-[disabled]:opacity-50 cgui:data-[disabled]:cursor-not-allowed cgui:data-[disabled]:pointer-events-none',
     ],
     variants: {
@@ -39,7 +39,7 @@ export const collapsibleTriggerVariants = tv({
 export const collapsibleIconVariants = tv({
     base: [
         'cgui:relative cgui:inline-flex cgui:ml-auto cgui:size-6 cgui:items-center cgui:justify-center cgui:shrink-0',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-transform cgui:duration-(--cg-ui-duration-fast) cgui:ease-out',
         'cgui:[&>svg]:size-5',
     ],
     variants: {

package/dist/primitives/combobox/styles.js

@@ -4,7 +4,7 @@ export const comboboxTriggerVariants = tv({
         'cgui:group/combobox-trigger ',
         'cgui:relative cgui:flex cgui:items-center cgui:gap-1 cgui:flex-wrap',
         'cgui:text-body cgui:outline-none cgui:bg-clip-padding',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color,box-shadow,transform] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4',
         'cgui:has-[data-slot=chevron]:pr-3',
         'cgui:data-[state=open]:ring-stroke-primary/50 cgui:data-[state=open]:ring-1',

package/dist/primitives/command/styles.js

@@ -37,7 +37,7 @@ export const commandInputVariants = tv({
         'cgui:placeholder:text-fg-regular/70',
         'cgui:focus-visible:ring-0 cgui:focus-visible:ring-offset-0',
         'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-colors cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
     ],
 });
 export const commandListVariants = tv({
@@ -58,7 +58,7 @@ export const commandItemVariants = tv({
         'cgui:aria-selected:bg-surface-lightest cgui:aria-selected:text-fg-primary',
         'cgui:data-selected:text-fg-primary',
         'cgui:cursor-default  cgui:text-body cgui:select-none cgui:outline-hidden cgui:rounded-xs',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:[&_svg:not([class*="text-"])]:text-muted-foreground cgui:relative',
         'cgui:[&_kbd]:ml-auto',
         'cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:shrink-0 cgui:[&_svg:not([class*="size-"])]:size-4',

package/dist/primitives/date-picker/styles.js

@@ -6,7 +6,7 @@ export const datePickerTriggerVariants = tv({
         'cgui:group/date-picker-trigger',
         'cgui:relative cgui:inline-flex cgui:items-center cgui:gap-1',
         'cgui:text-body cgui:outline-none',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color,box-shadow,transform] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4',
         'cgui:has-[data-slot=chevron]:pr-3',
         'cgui:data-[state=open]:ring-stroke-primary/50 cgui:data-[state=open]:ring-1',
@@ -71,6 +71,7 @@ export const datePickerContentVariants = tv({
         'cgui:origin-(--bits-popover-content-transform-origin) cgui:outline-hidden',
         'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0 cgui:data-[state=closed]:zoom-out-95 cgui:data-[state=open]:zoom-in-95',
         'cgui:data-[side=bottom]:slide-in-from-top-2 cgui:data-[side=left]:slide-in-from-end-2 cgui:data-[side=right]:slide-in-from-start-2 cgui:data-[side=top]:slide-in-from-bottom-2',
+        'cgui:transition-[opacity,transform] cgui:duration-(--cg-ui-duration-fast) cgui:ease-out',
     ],
     variants: {
         rounded: {
@@ -93,7 +94,7 @@ export const datePickerInputVariants = tv({
         'cgui:group/date-picker-input',
         'cgui:relative cgui:inline-flex cgui:items-center cgui:gap-0.5 cgui:w-full',
         'cgui:text-body',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color,box-shadow] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:data-invalid:border-stroke-error cgui:data-invalid:ring-stroke-error',
         'cgui:data-disabled:opacity-50 cgui:data-disabled:cursor-not-allowed',
     ],
@@ -135,7 +136,7 @@ export const datePickerSegmentVariants = tv({
         'cgui:inline-flex cgui:items-center cgui:justify-center',
         'cgui:rounded-xs cgui:px-0.5',
         'cgui:outline-none',
-        'cgui:transition-colors cgui:duration-150 cgui:ease-in-out',
+        'cgui:transition-colors cgui:duration-(--cg-ui-duration-fast) cgui:ease-out',
         'cgui:focus:bg-surface-primary cgui:focus:text-fg-white',
         'cgui:data-invalid:text-fg-error',
         'cgui:data-disabled:text-fg-semilight/40 cgui:data-disabled:pointer-events-none',

package/dist/primitives/dialog/styles.js

@@ -19,6 +19,7 @@ export const dialogOverlayStyles = tv({
         'cgui:size-full',
         'cgui:bg-neutral-100/50',
         'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0',
+        'cgui:transition-opacity cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
     ],
 });
 export const dialogContentStyles = tv({
@@ -26,6 +27,7 @@ export const dialogContentStyles = tv({
         'cgui:relative cgui:z-(--cg-ui-z-index-dialog) cgui:outline-none cgui:overflow-hidden',
         'cgui:data-[state=open]:animate-in cgui:data-[state=open]:fade-in-0 cgui:data-[state=open]:slide-in-from-bottom-20',
         'cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=closed]:slide-out-to-bottom-20',
+        'cgui:transition-[opacity,transform] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
     ],
     variants: {
         variant: {

package/dist/primitives/drawer/styles.js

@@ -1,10 +1,10 @@
-import { buttonVariants } from '../button/styles.js';
 import { tv } from '../../internal/utils/tailwindcss.js';
+import { buttonVariants } from '../button/styles.js';
 export const drawerOverlayStyles = tv({
     base: [
         'cgui:fixed cgui:inset-0 cgui:z-(--cg-ui-z-index-dialog)',
         'cgui:bg-neutral-100/50',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-opacity cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out',
         'cgui:data-[state=open]:fade-in-0 cgui:data-[state=closed]:fade-out-0',
     ],

package/dist/primitives/dropdown/styles.js

@@ -16,6 +16,7 @@ export const dropdownContentStyles = tv({
         'cgui:data-[state=open]:animate-in cgui:data-[state=open]:fade-in-0  cgui:data-[state=open]:zoom-in-95',
         'cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=closed]:zoom-out-95',
         'cgui:data-[side=bottom]:slide-in-from-top-2 cgui:data-[side=left]:slide-in-from-end-2 cgui:data-[side=right]:slide-in-from-start-2 cgui:data-[side=top]:slide-in-from-bottom-2',
+        'cgui:transition-[opacity,transform] cgui:duration-(--cg-ui-duration-fast) cgui:ease-out',
     ],
     variants: {
         variant: {
@@ -57,7 +58,7 @@ export const dropdownItemStyles = tv({
         'cgui:text-body cgui:text-fg-dark cgui:font-normal cgui:select-none',
         'cgui:overflow-hidden cgui:whitespace-nowrap cgui:outline-none',
         'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4.5',
-        'cgui:transition-[background-color,color,ring,outline,border-color] cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color,box-shadow] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:data-highlighted:bg-surface-lightest',
         'cgui:data-[disabled]:cursor-not-allowed cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50',
     ],

package/dist/primitives/field/styles.js

@@ -14,7 +14,7 @@ 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:invisible cgui:opacity-0 cgui:transition-opacity cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:data-[invalid]:visible cgui:data-[invalid]:opacity-100',
     ],
 });

package/dist/primitives/file-upload/styles.js

@@ -12,7 +12,7 @@ export const fileUploadDropzoneVariants = tv({
         'cgui:flex cgui:flex-col cgui:items-center cgui:justify-center cgui:gap-2 cgui:p-4',
         'cgui:rounded-md cgui:border cgui:border-dashed cgui:border-stroke-default',
         'cgui:cursor-pointer',
-        'cgui:transition-colors cgui:duration-200',
+        'cgui:transition-colors cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
     ],
     variants: {
         dragging: {
@@ -60,7 +60,7 @@ export const fileUploadItemDeleteTriggerVariants = tv({
         'cgui:shrink-0 cgui:size-6 cgui:flex cgui:items-center cgui:justify-center',
         'cgui:rounded-xs cgui:cursor-pointer',
         'cgui:text-fg-regular cgui:hover:text-fg-darkest',
-        'cgui:transition-colors cgui:duration-200',
+        'cgui:transition-colors cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:[&>svg]:size-4 cgui:text-icon-regular',
     ],
 });

package/dist/primitives/input/styles.js

@@ -12,7 +12,7 @@ export const inputStyles = tv({
 export const inputVariants = tv({
     base: [
         'cgui:outline-none cgui:py-0',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color,box-shadow] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:text-body',
         'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed',
     ],

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { cn, useId } from '../../../internal/utils/common.js';
+  import { useId } from '../../../internal/utils/common.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
   import { boxWith, mergeProps } from 'svelte-toolbelt';
   import { navigationContentStyles } from '../styles.js';
   import type { NavigationContentProps } from '../types.js';

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

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { Dropdown as DropdownPrimitive } from '../../dropdown/index.js';
-  import { cn, useId } from '../../../internal/utils/common.js';
+  import { useId } from '../../../internal/utils/common.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
   import { boxWith, mergeProps } from 'svelte-toolbelt';
+  import { Dropdown as DropdownPrimitive } from '../../dropdown/index.js';
   import { navigationItemStyles } from '../styles.js';
   import type { NavigationItemProps } from '../types.js';
   import { NavigationItemState, NavigationSubStateCtx } from './navigation.svelte.js';

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

@@ -4,7 +4,8 @@
 
   import { NavigationRootState } from './navigation.svelte.js';
 
-  import { cn, useId } from '../../../internal/utils/common.js';
+  import { useId } from '../../../internal/utils/common.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
   import { boxWith, mergeProps } from 'svelte-toolbelt';
 
   const uid = $props.id();

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

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { Collapsible as CollapsiblePrimitive } from '../../collapsible/index.js';
-  import { Dropdown as DropdownPrimitive } from '../../dropdown/index.js';
-  import { cn, useId } from '../../../internal/utils/common.js';
+  import { useId } from '../../../internal/utils/common.js';
+  import { motion } from '../../../internal/utils/motion.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
   import { boxWith, mergeProps } from 'svelte-toolbelt';
-  import { cubicInOut } from 'svelte/easing';
   import { fade } from 'svelte/transition';
+  import { Collapsible as CollapsiblePrimitive } from '../../collapsible/index.js';
+  import { Dropdown as DropdownPrimitive } from '../../dropdown/index.js';
   import { navigationDropdownContentStyles, navigationSubContentStyles } from '../styles.js';
   import type { NavigationSubContentProps } from '../types.js';
   import { NavigationSubContentState } from './navigation.svelte.js';
@@ -62,7 +63,11 @@
   <CollapsiblePrimitive.Content>
     {#snippet child({ props: collapsibleProps, open })}
       {#if open}
-        <ol {...collapsibleProps} {...mergedProps} transition:fade={{ duration: 250, easing: cubicInOut }}>
+        <ol
+          {...collapsibleProps}
+          {...mergedProps}
+          transition:fade={{ duration: motion.duration.base, easing: motion.easeOut }}
+        >
           {@render children?.({ compact: subContentState.root.isCompact })}
         </ol>
       {/if}

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

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { Collapsible as CollapsiblePrimitive } from '../../collapsible/index.js';
-  import { Dropdown as DropdownPrimitive } from '../../dropdown/index.js';
   import ChevronDown from '../../../atomic/icons/chevron-down.svelte';
-  import { cn, useId } from '../../../internal/utils/common.js';
+  import { useId } from '../../../internal/utils/common.js';
+  import { motion } from '../../../internal/utils/motion.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
   import { boxWith, mergeProps } from 'svelte-toolbelt';
-  import { cubicInOut } from 'svelte/easing';
-  import { slide } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
+  import { Collapsible as CollapsiblePrimitive } from '../../collapsible/index.js';
+  import { Dropdown as DropdownPrimitive } from '../../dropdown/index.js';
   import { navigationSubTriggerStyles } from '../styles.js';
   import type { NavigationSubTriggerProps } from '../types.js';
   import { NavigationSubTriggerState } from './navigation.svelte.js';
@@ -48,10 +49,7 @@
 
 {#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')}
-    >
+    <span data-slot="nav-trigger-icon">
       {@render icon?.()}
     </span>
   {/if}
@@ -60,30 +58,28 @@
     {#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 }}
+          data-slot="nav-trigger-label"
+          in:fade={{ delay: 120, duration: motion.duration.slow, easing: motion.easeOut }}
+          out:fade={{ duration: motion.duration.instant, easing: motion.easeOut }}
         >
-          <span class="cgui:inline-block" transition:slide={{ axis: 'x', duration: 150, easing: cubicInOut }}>
+          <span>
             {label}
           </span>
         </span>
       {/if}
     {:else}
-      {@render label?.({ props: { 'data-slot': 'label' } })}
+      {@render label?.({ props: { 'data-slot': 'nav-trigger-label' } })}
     {/if}
   {/if}
 {/snippet}
 
+<!-- class={cn(
+  'cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0',
+  'cgui:transition-transform cgui:duration-(--cg-ui-duration-base) cgui:ease-in-out'
+)} -->
 {#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 data-slot="nav-trigger-chevron">
+    <ChevronDown />
   </span>
 {/snippet}
 

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

@@ -1,8 +1,9 @@
 <script lang="ts">
+  import { useId } from '../../../internal/utils/common.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { boxWith, mergeProps } from 'svelte-toolbelt';
   import { Collapsible as CollapsiblePrimitive } from '../../collapsible/index.js';
   import { Dropdown as 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';

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

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { cn, useId } from '../../../internal/utils/common.js';
+  import { useId } from '../../../internal/utils/common.js';
+  import { motion } from '../../../internal/utils/motion.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
   import { boxWith, mergeProps } from 'svelte-toolbelt';
-  import { cubicInOut } from 'svelte/easing';
-  import { slide } from 'svelte/transition';
+  import { fade } from 'svelte/transition';
   import { navigationTriggerStyles } from '../styles.js';
   import type { NavigationTriggerProps } from '../types.js';
   import { NavigationSubStateCtx, NavigationTriggerState } from './navigation.svelte.js';
@@ -48,10 +49,7 @@
 
 {#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')}
-    >
+    <span data-slot="nav-trigger-icon">
       {@render icon?.()}
     </span>
   {/if}
@@ -60,11 +58,11 @@
     {#if typeof label === 'string'}
       {#if shouldShowLabel}
         <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 }}
+          data-slot="nav-trigger-label"
+          in:fade={{ delay: 120, duration: motion.duration.slow, easing: motion.easeOut }}
+          out:fade={{ duration: motion.duration.instant, easing: motion.easeOut }}
         >
-          <span class="cgui:inline-block" transition:slide={{ axis: 'x', duration: 150, easing: cubicInOut }}>
+          <span>
             {label}
           </span>
         </span>

package/dist/primitives/navigation/styles.js

@@ -3,7 +3,7 @@ export const navigationRootStyles = tv({
     base: [
         'cgui:group/navigation',
         'cgui:data-[compact=true]:w-fit cgui:min-w-px cgui:w-full',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[width] cgui:duration-(--cg-ui-duration-slow) cgui:ease-out',
     ],
     variants: {
         compact: {
@@ -15,20 +15,33 @@ export const navigationContentStyles = tv({
     base: [''],
 });
 export const navigationItemStyles = tv({
-    base: ['cgui:data-highlighted:bg-transparent'],
+    base: [
+        'cgui:data-highlighted:bg-transparent',
+        'cgui:transition-[background-color,color] cgui:duration-(--cg-ui-duration-base) cgui:ease-hover',
+    ],
 });
 export const navigationTriggerStyles = tv({
     base: [
-        'cgui:flex cgui:items-center cgui:gap-2',
-        '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:grid cgui:grid-cols-[1.5rem_minmax(0,1fr)]',
+        'cgui:items-center cgui:gap-2 cgui:justify-center',
+        'cgui:w-full cgui:px-3 cgui:py-4 cgui:rounded-sm',
+        'cgui:[&_[data-slot="nav-trigger-icon"]]:me-auto cgui:[&_[data-slot="nav-trigger-icon"]]:pointer-events-none',
+        'cgui:[&_[data-slot="nav-trigger-icon"]_svg:not([class*="size-"])]:size-6',
+        'cgui:data-[active]:bg-surface-dark cgui:data-[active]:text-fg-white',
+        'cgui:text-fg-semilight cgui:text-body cgui:hover:text-fg-white',
         '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 ',
+        'cgui:cursor-pointer',
+        'cgui:group-data-[compact=true]/navigation:grid-cols-[1.5rem_minmax(0,0fr)]',
+        'cgui:group-data-[compact=true]/navigation:gap-0',
+        'cgui:group-data-[compact=true]/navigation:py-3',
+        'cgui:[&_[data-slot="nav-trigger-icon"]]:shrink-0',
+        'cgui:[&_[data-slot="nav-trigger-label"]]:min-w-0 cgui:[&_[data-slot="nav-trigger-label"]]:overflow-hidden cgui:[&_[data-slot="nav-trigger-label"]]:whitespace-nowrap cgui:[&_[data-slot="nav-trigger-label"]]:text-left',
+        'cgui:[&_[data-slot="nav-trigger-label"]>*]:min-w-0',
+        'cgui:[&_[data-slot="nav-trigger-label"]>*]:overflow-hidden',
+        'cgui:[&_[data-slot="nav-trigger-label"]>*]:whitespace-nowrap',
+        'cgui:[transition:grid-template-columns_var(--cg-ui-duration-slow)_var(--ease-out),padding_var(--cg-ui-duration-slow)_var(--ease-out),gap_var(--cg-ui-duration-slow)_var(--ease-out),border-radius_var(--cg-ui-duration-slow)_var(--ease-out),background-color_var(--cg-ui-duration-base)_var(--ease-hover),color_var(--cg-ui-duration-base)_var(--ease-hover),transform_var(--cg-ui-duration-instant)_var(--ease-out)]',
+        'cgui:data-[state=closed]:delay-[120ms] cgui:data-[state=open]:delay-0',
+        'cgui:not-data-[disabled]:active:scale-[0.98]',
     ],
 });
 export const navigationSubStyles = tv({
@@ -36,7 +49,13 @@ export const navigationSubStyles = tv({
 });
 export const navigationSubTriggerStyles = tv({
     extend: navigationTriggerStyles,
-    base: ['cgui:group-data-[compact=false]/navigation:data-[state=open]:[&_[data-slot="chevron"]]:rotate-180'],
+    base: [
+        'cgui:grid-cols-[1.5rem_minmax(0,1fr)_auto]',
+        'cgui:[&_[data-slot="nav-trigger-chevron"]]:inline-grid cgui:[&_[data-slot="nav-trigger-chevron"]]:place-items-center',
+        'cgui:[&_[data-slot="nav-trigger-chevron"]]:shrink-0',
+        'cgui:[&_[data-slot="nav-trigger-chevron"]_svg]:size-5',
+        'cgui:group-data-[compact=false]/navigation:data-[state=open]:[&_[data-slot="nav-trigger-chevron"]]:rotate-180',
+    ],
 });
 export const navigationSubContentStyles = tv({
     base: [

package/dist/primitives/pagination/styles.js

@@ -21,7 +21,7 @@ export const paginationItemStyles = tv({
         'cgui:flex cgui:items-center cgui:justify-center',
         'cgui:text-fg-dark cgui:text-body-2 cgui:font-normal',
         'cgui:border cgui:border-transparent',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:cursor-pointer cgui:select-none cgui:rounded-full',
         'cgui:data-[selected=""]:text-fg-primary cgui:data-[selected=""]:border-stroke-primary',
         'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none',
@@ -38,7 +38,7 @@ export const paginationButtonStyles = tv({
     base: [
         'cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0 cgui:size-6 cgui:text-icon-regular',
         'cgui:select-none cgui:cursor-pointer',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-colors cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none',
     ],
 });

package/dist/primitives/pill/styles.js

@@ -7,7 +7,7 @@ export const pillGroupVariants = tv({
 export const pillItemVariants = tv({
     base: [
         'cgui:inline-flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:text-center cgui:overflow-hidden cgui:shrink-0 cgui:w-fit cgui:whitespace-nowrap cgui:max-w-full',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:select-none cgui:font-normal cgui:text-caption-2',
         'cgui:[&>svg]:pointer-events-none',
     ],
@@ -165,7 +165,7 @@ export const pillRemoveVariants = tv({
     base: [
         'cgui:inline-flex cgui:items-center cgui:justify-center cgui:shrink-0',
         'cgui:rounded-full cgui:cursor-pointer cgui:outline-none',
-        'cgui:transition-colors cgui:duration-150 cgui:ease-in-out',
+        'cgui:transition-colors cgui:duration-(--cg-ui-duration-fast) cgui:ease-out',
         'cgui:bg-transparent cgui:text-inherit',
         'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed cgui:disabled:hover:bg-transparent',
         'cgui:[&>svg]:pointer-events-none cgui:[&>svg:not([class*="size"])]:size-[80%]',

package/dist/primitives/popover/styles.js

@@ -8,6 +8,7 @@ export const popoverContentVariants = tv({
         'cgui:origin-(--bits-popover-content-transform-origin) cgui:outline-hidden',
         'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0 cgui:data-[state=closed]:zoom-out-95 cgui:data-[state=open]:zoom-in-95',
         'cgui:data-[side=bottom]:slide-in-from-top-2 cgui:data-[side=left]:slide-in-from-end-2 cgui:data-[side=right]:slide-in-from-start-2 cgui:data-[side=top]:slide-in-from-bottom-2',
+        'cgui:transition-[opacity,transform] cgui:duration-(--cg-ui-duration-fast) cgui:ease-out',
     ],
     variants: {
         variant: {

package/dist/primitives/segment/styles.js

@@ -4,8 +4,8 @@ import { Context } from 'runed';
 export const segmentRootVariants = tv({
     base: [
         'cgui:flex cgui:items-center cgui:p-1 cgui:w-fit',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
-        'cgui:data-[disabled=""]:opacity-50 cgui:data-[disabled=""]:cursor-not-allowed cgui:data-[disabled=""]:pointer-events-none',
+        'cgui:transition-[background-color,border-color,opacity] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
+        'cgui:data-disabled:opacity-50 cgui:data-disabled:cursor-not-allowed cgui:data-disabled:pointer-events-none',
     ],
     variants: {
         variant: {
@@ -28,7 +28,7 @@ export const segmentItemVariants = tv({
         'cgui:font-medium cgui:text-body-2',
         'cgui:rounded-[inherit]',
         'cgui:cursor-pointer cgui:overflow-hidden cgui:select-none',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color,opacity] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
     ],
     variants: {
         variant: {
@@ -58,7 +58,7 @@ export const segmentThumbVariants = tv({
     base: [
         'cgui:rounded-[inherit] cgui:pointer-events-none',
         'cgui:shadow-segment-thumb',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[background-color] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
     ],
     variants: {
         variant: {

package/dist/primitives/select/components/select.item.svelte

@@ -23,7 +23,7 @@
       {label || value}
 
       {#if selected}
-        <Icon.Checkmark width={16} height={16} />
+        <Icon.Checkmark class="cgui:ms-auto" />
       {/if}
     {/if}
   {/snippet}