@casinogate/ui 1.7.0 → 1.8.0

package/dist/assets/css/root.css

@@ -209,6 +209,9 @@
   .cgui\:right-0 {
     right: calc(var(--cgui-spacing) * 0);
   }
+  .cgui\:right-2 {
+    right: calc(var(--cgui-spacing) * 2);
+  }
   .cgui\:right-4 {
     right: calc(var(--cgui-spacing) * 4);
   }
@@ -251,9 +254,15 @@
   .cgui\:ms-auto {
     margin-inline-start: auto;
   }
+  .cgui\:mt-2 {
+    margin-top: calc(var(--cgui-spacing) * 2);
+  }
   .cgui\:mt-4 {
     margin-top: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:mb-2 {
+    margin-bottom: calc(var(--cgui-spacing) * 2);
+  }
   .cgui\:scrollbar-thin {
     &::-webkit-scrollbar-track {
       background-color: var(--scrollbar-track);
@@ -459,8 +468,14 @@
   .cgui\:w-48 {
     width: calc(var(--cgui-spacing) * 48);
   }
-  .cgui\:w-70 {
-    width: calc(var(--cgui-spacing) * 70);
+  .cgui\:w-56 {
+    width: calc(var(--cgui-spacing) * 56);
+  }
+  .cgui\:w-64 {
+    width: calc(var(--cgui-spacing) * 64);
+  }
+  .cgui\:w-80 {
+    width: calc(var(--cgui-spacing) * 80);
   }
   .cgui\:w-\[420px\] {
     width: 420px;
@@ -696,6 +711,9 @@
   .cgui\:overflow-y-auto {
     overflow-y: auto;
   }
+  .cgui\:scroll-smooth {
+    scroll-behavior: smooth;
+  }
   .cgui\:rounded-\[inherit\] {
     border-radius: inherit;
   }
@@ -1172,8 +1190,8 @@
   .cgui\:outline-stroke-focus {
     outline-color: var(--cg-ui-palette-primary-60);
   }
-  .cgui\:transition-\[background-color\,color\] {
-    transition-property: background-color,color;
+  .cgui\:transition-\[background-color\,color\,ring\,outline\,border-color\] {
+    transition-property: background-color,color,ring,outline,border-color;
     transition-timing-function: var(--tw-ease, var(--cgui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--cgui-default-transition-duration));
   }
@@ -1230,6 +1248,9 @@
   .cgui\:scrollbar-thumb-stroke-default {
     --scrollbar-thumb: var(--cg-ui-palette-neutral-40);
   }
+  .cgui\:scrollbar-thumb-surface-light {
+    --scrollbar-thumb: var(--cg-ui-palette-neutral-20);
+  }
   .cgui\:scrollbar-thumb-surface-regular {
     --scrollbar-thumb: var(--cg-ui-palette-neutral-50);
   }
@@ -1408,6 +1429,13 @@
       }
     }
   }
+  .cgui\:hover\:no-underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: none;
+      }
+    }
+  }
   .cgui\:focus\:ring-stroke-default {
     &:focus {
       --tw-ring-color: var(--cg-ui-palette-neutral-40);
@@ -1456,6 +1484,11 @@
       opacity: 50%;
     }
   }
+  .cgui\:has-\[data-slot\=chevron\]\:pr-3 {
+    &:has(*:is(data-slot=chevron)) {
+      padding-right: calc(var(--cgui-spacing) * 3);
+    }
+  }
   .cgui\:has-\[\>\[data-slot\=button-group\]\]\:gap-2 {
     &:has(>[data-slot=button-group]) {
       gap: calc(var(--cgui-spacing) * 2);
@@ -1869,6 +1902,12 @@
       color: var(--cg-ui-palette-neutral-50);
     }
   }
+  .cgui\:\[\&_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-4 {
+    & svg:not([class*="size-"]) {
+      width: calc(var(--cgui-spacing) * 4);
+      height: calc(var(--cgui-spacing) * 4);
+    }
+  }
   .cgui\:\[\&_svg\:not\(\[class\*\=\"size-\"\]\)\]\:size-4\.5 {
     & svg:not([class*="size-"]) {
       width: calc(var(--cgui-spacing) * 4.5);

package/dist/components/breadcrumb/breadcrumb.svelte

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

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

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

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

@@ -52,6 +52,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    fullWidth: {
+        true: {
+            root: string;
+        };
+    };
     rounded: {
         sm: {
             root: string;
@@ -128,6 +133,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    fullWidth: {
+        true: {
+            root: string;
+        };
+    };
     rounded: {
         sm: {
             root: string;
@@ -204,6 +214,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
+    fullWidth: {
+        true: {
+            root: string;
+        };
+    };
     rounded: {
         sm: {
             root: string;

package/dist/components/button/styles.js

@@ -2,7 +2,7 @@ import { tv } from '../../internal/utils/tailwindcss.js';
 export const buttonVariants = tv({
     slots: {
         root: [
-            'cgui:flex cgui:items-center cgui:justify-center cgui:gap-1.5 cgui:cursor-pointer cgui:px-2 cgui:text-center cgui:overflow-hidden',
+            'cgui:flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:cursor-pointer cgui:px-2 cgui:text-center cgui:overflow-hidden',
             'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
             'cgui:select-none cgui:font-medium',
             'cgui:disabled:cursor-not-allowed cgui:disabled:opacity-50',
@@ -49,13 +49,13 @@ export const buttonVariants = tv({
         },
         size: {
             xs: {
-                root: 'cgui:h-7.5 cgui:px-2.5 cgui:text-body',
+                root: 'cgui:h-7.5 cgui:px-2 cgui:text-body',
             },
             sm: {
-                root: 'cgui:h-8 cgui:px-3 cgui:text-body',
+                root: 'cgui:h-8 cgui:px-2.5 cgui:text-body',
             },
             md: {
-                root: 'cgui:h-9 cgui:px-4 cgui:text-body',
+                root: 'cgui:h-9 cgui:px-3 cgui:text-body',
             },
             lg: {
                 root: 'cgui:h-10.5 cgui:px-4 cgui:text-heading-2',
@@ -75,6 +75,11 @@ export const buttonVariants = tv({
                 root: '',
             },
         },
+        fullWidth: {
+            true: {
+                root: 'cgui:w-full',
+            },
+        },
         rounded: {
             sm: {
                 root: 'cgui:rounded-sm',

package/dist/components/button-group/components/button-group.root.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
   import type { ButtonGroupRootProps } from '../types.js';
   import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
-  import { cn, useId } from '../../../internal/utils/common.js';
+  import { cn } from '../../../internal/utils/common.js';
   import { box } from 'svelte-toolbelt';
   import { ButtonGroupStylesContext, buttonGroupStyles } from '../styles.js';
 
-  const uid = $props.id();
   let {
     children,
     ref = $bindable(null),
-    id = useId(uid),
     orientation = 'horizontal',
     class: className,
     ...restProps

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

@@ -1,6 +1,6 @@
-import { arraysAreEqual } from '../../../internal/utils/arrays.js';
 import { getDataDisabled } from '../../../internal/utils/attrs.js';
 import { keyWithPrefix } from '../../../internal/utils/common.js';
+import { isEqual } from '../../../internal/utils/equal.js';
 import { Context, watch } from 'runed';
 import { attachRef } from 'svelte-toolbelt';
 const CollapsibleRootContext = new Context(keyWithPrefix('collapsible-root'));
@@ -28,7 +28,7 @@ export class CollapsibleGroupState {
             newValue = [...$state.snapshot(this.opts.value.current), value];
         }
         this.opts.value.current = newValue;
-        if (arraysAreEqual(this.opts.value.current, newValue))
+        if (isEqual(this.opts.value.current, newValue))
             return;
         this.opts.onValueChange.current(newValue);
     }
@@ -40,7 +40,7 @@ export class CollapsibleGroupState {
             return;
         const newValue = this.opts.value.current.filter((v) => v !== value);
         this.opts.value.current = newValue;
-        if (arraysAreEqual(this.opts.value.current, newValue))
+        if (isEqual(this.opts.value.current, newValue))
             return;
         this.opts.onValueChange.current(newValue);
     }

package/dist/components/data-table/data-table.svelte

@@ -14,7 +14,7 @@
   import FlexRender from './components/flex-render.svelte';
   import { type DataTableProps, type RowData } from './types.js';
 
-  let { ref = $bindable(null), table, empty, loading, ...restProps }: DataTableProps<TData> = $props();
+  let { ref = $bindable(null), table, empty, ...restProps }: DataTableProps<TData> = $props();
 
   let isFirstLoaded = $state(false);
 

package/dist/components/data-table/utils/pagination-state.svelte.js

@@ -7,9 +7,9 @@ export const usePaginationState = (opts) => {
         get value() {
             return value;
         },
-        set value(value) {
-            value = value;
-            opts?.onValueChange?.(value);
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
         },
         updater: (updater) => {
             let newPaginationState;

package/dist/components/data-table/utils/resize-state.svelte.js

@@ -4,9 +4,9 @@ export const useResizeState = (opts) => {
         get value() {
             return value;
         },
-        set value(value) {
-            value = value;
-            opts?.onValueChange?.(value);
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
         },
         updater: (updater) => {
             let newColumnSizing;

package/dist/components/data-table/utils/row-selection-state.svelte.js

@@ -4,9 +4,9 @@ export const useRowSelectionState = (opts) => {
         get value() {
             return value;
         },
-        set value(value) {
-            value = value;
-            opts?.onValueChange?.(value);
+        set value(v) {
+            value = v;
+            opts?.onValueChange?.(v);
         },
         updater: (updater) => {
             let newRowSelection;

package/dist/components/dialog/components/dialog.overlay.svelte

@@ -8,13 +8,7 @@
 
   const uid = $props.id();
 
-  let {
-    children,
-    id = useId(uid),
-    ref = $bindable(null),
-    class: className,
-    ...restProps
-  }: DialogOverlayProps = $props();
+  let { id = useId(uid), ref = $bindable(null), class: className, ...restProps }: DialogOverlayProps = $props();
 
   const overlayState = DialogOverlayState.create({
     ref: boxWith(

package/dist/components/dropdown/components/dropdown.content.svelte

@@ -15,7 +15,6 @@
     shadow = true,
     w = 'default',
     gap = 'default',
-    initial = false,
     ...restProps
   }: DropdownContentProps = $props();
 </script>
@@ -29,7 +28,6 @@
       shadow,
       w,
       gap,
-      initial,
     }),
     className
   )}

package/dist/components/dropdown/dropdown.svelte

@@ -1,40 +1,79 @@
 <script lang="ts" module>
   import type {
-    DropdownGroupItemValue,
-    DropdownItemLinkValue,
-    DropdownItemSubValue,
-    DropdownItemValue,
-    DropdownSeparatorItemValue,
-    DropdownSingleItemValue,
+    DropdownCollectionOptions,
+    DropdownItem,
+    DropdownItemAction,
+    DropdownItemLink,
+    DropdownItemSeparator,
+    DropdownItemSub,
+    DropdownSelectableItem,
   } from './types.js';
 
-  export function itemCollection(items: DropdownItemValue[]): DropdownItemValue[] {
-    return items;
-  }
+  export function createDropdownCollection(options: DropdownCollectionOptions): ListCollection<DropdownItem> {
+    const { items, groups = [], groupSort } = options;
+
+    const groupOrderMap = new Map<string, number>();
+    groups.forEach((g, index) => {
+      groupOrderMap.set(g.key, g.order ?? index);
+    });
+
+    return createListCollection({
+      items,
+
+      itemToValue: (item) => item.key,
+
+      itemToString: (item) => {
+        if (item.type === 'separator') return '';
+        return item.textValue ?? item.label;
+      },
 
-  function isGroup(item: DropdownItemValue): item is DropdownGroupItemValue {
-    return item.type === 'group';
+      isItemDisabled: (item) => {
+        if (item.type === 'separator') return true;
+        return !!item.disabled;
+      },
+
+      groupBy: (item) => item.group ?? '',
+
+      groupSort:
+        groupSort ??
+        ((a, b) => {
+          const orderA = groupOrderMap.get(a) ?? Infinity;
+          const orderB = groupOrderMap.get(b) ?? Infinity;
+          if (orderA !== orderB) return orderA - orderB;
+          return a.localeCompare(b);
+        }),
+    });
   }
 
-  function isSeparator(item: DropdownItemValue): item is DropdownSeparatorItemValue {
+  function isSeparator(item: DropdownItem): item is DropdownItemSeparator {
     return item.type === 'separator';
   }
 
-  function isLink(item: DropdownSingleItemValue): item is DropdownItemLinkValue {
+  function isLink(item: DropdownSelectableItem): item is DropdownItemLink {
     return item.type === 'link';
   }
 
-  function isSub(item: DropdownSingleItemValue): item is DropdownItemSubValue {
+  function isSub(item: DropdownSelectableItem): item is DropdownItemSub {
     return item.type === 'sub';
   }
+
+  function isAction(item: DropdownSelectableItem): item is DropdownItemAction {
+    return item.type === 'action';
+  }
+
+  function isSelectable(item: DropdownItem): item is DropdownSelectableItem {
+    return item.type !== 'separator';
+  }
 </script>
 
 <script lang="ts">
+  import { createListCollection, type ListCollection } from '../../internal/index.js';
   import * as Primitive from './exports-primitive.js';
   import type { DropdownProps } from './types.js';
 
   let {
-    items,
+    collection,
+    groups = [],
     open = $bindable(false),
     trigger,
     contentProps,
@@ -42,61 +81,76 @@
     item: itemSnippet,
     ...restProps
   }: DropdownProps = $props();
+
+  const groupLabelMap = $derived(new Map(groups.map((g) => [g.key, g.label ?? g.key])));
+
+  const groupedItems = $derived(collection.group());
 </script>
 
-{#snippet defaultItemRenderer(item: DropdownSingleItemValue)}
-  {#if isSub(item)}
-    <Primitive.Sub>
-      <Primitive.SubTrigger disabled={item.disabled}>
+{#snippet defaultSubRenderer(item: DropdownItemSub)}
+  <Primitive.Sub>
+    <Primitive.SubTrigger disabled={item.disabled} textValue={item.textValue ?? item.label}>
+      {#if item.icon}
+        <item.icon width={16} height={16} />
+      {/if}
+      {item.label}
+    </Primitive.SubTrigger>
+    <Primitive.Portal>
+      <Primitive.SubContent data-value={item.key}>
+        {#each item.children as child (child.key)}
+          {#if isSelectable(child)}
+            {@render renderItem(child)}
+          {/if}
+        {/each}
+      </Primitive.SubContent>
+    </Primitive.Portal>
+  </Primitive.Sub>
+{/snippet}
+
+{#snippet defaultLinkRenderer(item: DropdownItemLink)}
+  <Primitive.Item
+    disabled={item.disabled}
+    textValue={item.textValue ?? item.label}
+    onSelect={item.onSelect}
+    data-value={item.key}
+  >
+    {#snippet child({ props })}
+      <a {...props} href={item.href} target={item.target} rel={item.rel}>
         {#if item.icon}
           <item.icon width={16} height={16} />
         {/if}
         {item.label}
-      </Primitive.SubTrigger>
-      <Primitive.Portal>
-        <Primitive.SubContent>
-          {#each item.children as child}
-            {@render renderSingleItem(child)}
-          {/each}
-        </Primitive.SubContent>
-      </Primitive.Portal>
-    </Primitive.Sub>
-  {:else if isLink(item)}
-    {@const { type: _, disabled, onSelect, ...linkProps } = item}
-    <Primitive.Item {disabled} {onSelect}>
-      {#snippet child({ props })}
-        <a {...props} {...linkProps}>
-          {#if item.icon}
-            <item.icon width={16} height={16} />
-          {/if}
-          {item.label}
-        </a>
-      {/snippet}
-    </Primitive.Item>
-  {:else}
-    {@const { type: _, disabled, onSelect, ...actionProps } = item}
-    <Primitive.Item {disabled} {onSelect}>
-      {#snippet child({ props })}
-        <button {...props} {...actionProps}>
-          {#if item.icon}
-            <item.icon width={16} height={16} />
-          {/if}
-          {item.label}
-        </button>
-      {/snippet}
-    </Primitive.Item>
-  {/if}
+      </a>
+    {/snippet}
+  </Primitive.Item>
+{/snippet}
+
+{#snippet defaultActionRenderer(item: DropdownItemAction)}
+  <Primitive.Item disabled={item.disabled} textValue={item.textValue ?? item.label} onSelect={item.onSelect}>
+    {#snippet child({ props })}
+      <button {...props}>
+        {#if item.icon}
+          <item.icon width={16} height={16} />
+        {/if}
+        {item.label}
+      </button>
+    {/snippet}
+  </Primitive.Item>
 {/snippet}
 
-{#snippet renderSingleItem(item: DropdownSingleItemValue)}
+{#snippet renderItem(item: DropdownSelectableItem)}
   {#if itemSnippet}
-    <Primitive.Item disabled={item.disabled} onSelect={item.onSelect}>
+    <Primitive.Item disabled={item.disabled} onSelect={item.onSelect} data-value={item.key}>
       {#snippet child({ props })}
         {@render itemSnippet({ item, props })}
       {/snippet}
     </Primitive.Item>
-  {:else}
-    {@render defaultItemRenderer(item)}
+  {:else if isSub(item)}
+    {@render defaultSubRenderer(item)}
+  {:else if isLink(item)}
+    {@render defaultLinkRenderer(item)}
+  {:else if isAction(item)}
+    {@render defaultActionRenderer(item)}
   {/if}
 {/snippet}
 
@@ -115,20 +169,26 @@
 
   <Primitive.Portal>
     <Primitive.Content {...contentProps} class={contentClass}>
-      {#each items as item (item.key)}
-        {#if isGroup(item)}
+      {#each groupedItems as [groupKey, items] (groupKey || '__ungrouped__')}
+        {#if groupKey}
           <Primitive.Group>
-            {#if item.heading}
-              <Primitive.GroupHeading>{item.heading}</Primitive.GroupHeading>
-            {/if}
-            {#each item.items as groupItem (groupItem.key)}
-              {@render renderSingleItem(groupItem)}
+            <Primitive.GroupHeading>{groupLabelMap.get(groupKey) ?? groupKey}</Primitive.GroupHeading>
+            {#each items as item (item.key)}
+              {#if isSeparator(item)}
+                <Primitive.Separator />
+              {:else}
+                {@render renderItem(item)}
+              {/if}
             {/each}
           </Primitive.Group>
-        {:else if isSeparator(item)}
-          <Primitive.Separator />
         {:else}
-          {@render renderSingleItem(item)}
+          {#each items as item (item.key)}
+            {#if isSeparator(item)}
+              <Primitive.Separator />
+            {:else}
+              {@render renderItem(item)}
+            {/if}
+          {/each}
         {/if}
       {/each}
     </Primitive.Content>

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

@@ -1,5 +1,6 @@
-import type { DropdownItemValue } from './types.js';
-export declare function itemCollection(items: DropdownItemValue[]): DropdownItemValue[];
+import type { DropdownCollectionOptions, DropdownItem } from './types.js';
+export declare function createDropdownCollection(options: DropdownCollectionOptions): ListCollection<DropdownItem>;
+import { type ListCollection } from '../../internal/index.js';
 import type { DropdownProps } from './types.js';
 declare const Dropdown: import("svelte").Component<DropdownProps, {}, "open">;
 type Dropdown = ReturnType<typeof Dropdown>;

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

@@ -1 +1 @@
-export { itemCollection, default as Root } from './dropdown.svelte';
+export { createDropdownCollection, default as Root } from './dropdown.svelte';

package/dist/components/dropdown/exports.js

@@ -1 +1 @@
-export { itemCollection, default as Root } from './dropdown.svelte';
+export { createDropdownCollection, default as Root } from './dropdown.svelte';

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

@@ -1,3 +1,3 @@
 export * as DropdownPrimitive from './exports-primitive.js';
 export * as Dropdown from './exports.js';
-export type { DropdownContentProps, DropdownGroupHeadingProps, DropdownGroupProps, DropdownItemProps, DropdownItemValue, DropdownPortalProps, DropdownProps, DropdownRootProps, DropdownSubContentProps, DropdownSubProps, DropdownSubTriggerProps, DropdownTriggerProps, } from './types.js';
+export type { DropdownCollection, DropdownCollectionOptions, DropdownContentProps, DropdownGroup, DropdownGroupHeadingProps, DropdownGroupProps, DropdownItem, DropdownItemAction, DropdownItemBase, DropdownItemEvents, DropdownItemLink, DropdownItemProps, DropdownItemSeparator, DropdownItemSub, DropdownPortalProps, DropdownProps, DropdownRootProps, DropdownSelectableItem, DropdownSeparatorProps, DropdownSubContentProps, DropdownSubProps, DropdownSubTriggerProps, DropdownTriggerProps, } from './types.js';

package/dist/components/dropdown/styles.js

@@ -8,6 +8,8 @@ export const dropdownTriggerStyles = tv({
 export const dropdownContentStyles = tv({
     base: [
         'cgui:max-h-(--bits-dropdown-menu-content-available-height)',
+        'cgui:scrollbar-thin  cgui:scroll-smooth',
+        'cgui:scrollbar-track-surface-lightest cgui:scrollbar-thumb-surface-light cgui:scrollbar-thumb-rounded-full cgui:scrollbar-track-rounded-full',
         'cgui:overflow-x-hidden cgui:overflow-y-auto',
         'cgui:outline-none',
         'cgui:z-(--cg-ui-z-index-dropdown) cgui:origin-(--bits-dropdown-menu-content-transform-origin)',
@@ -51,11 +53,11 @@ export const dropdownContentStyles = tv({
 });
 export const dropdownItemStyles = tv({
     base: [
-        'cgui:flex cgui:items-center cgui:gap-1.5',
+        'cgui:flex cgui:items-center cgui:gap-1.5 cgui:w-full',
         'cgui:text-body cgui:text-fg-dark cgui:font-normal cgui:select-none',
-        'cgui:overflow-hidden cgui:whitespace-nowrap',
+        '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] cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[background-color,color,ring,outline,border-color] cgui:duration-250 cgui:ease-in-out',
         'cgui:data-highlighted:bg-surface-lightest',
         'cgui:data-[disabled]:cursor-not-allowed cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50',
     ],