@casinogate/ui 1.4.0 → 1.5.0

package/dist/components/icons/slash.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type { IconProps } from './types.js';
+
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
+</script>
+
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
+  <path fill={color} d="m7 21l7.9-18H17L9.1 21z" />
+</svg>

package/dist/components/icons/slash.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Slash: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
+type Slash = ReturnType<typeof Slash>;
+export default Slash;

package/dist/components/icons/sort.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 17, height = 16, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" width={width} height={height} {...props}>
   <path
     d="M11.1452 5.90609L9.92195 4.11401L9.17504 3.01419C8.85875 2.55082 8.34429 2.55082 8.028 3.01419L6.05402 5.90609C5.79489 6.28572 5.98161 6.93333 6.34364 6.93333H10.8556C11.2214 6.93333 11.4043 6.28572 11.1452 5.90609Z"
-    fill="currentColor"
+    fill={color}
   />
   <path
     d="M10.8546 9.06666H6.34429C5.97859 9.06666 5.79575 9.71427 6.05478 10.0939L8.02802 12.9858C8.3442 13.4492 8.85846 13.4492 9.17464 12.9858L11.1479 10.0939C11.4031 9.71427 11.2203 9.06666 10.8546 9.06666Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/spinner.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 16, height = 16, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {...props}>
-  <path fill="currentColor" d="M2 8a6 6 0 1 1 6 6a.5.5 0 0 0 0 1a7 7 0 1 0-7-7a.5.5 0 0 0 1 0" />
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {width} {height} {...props}>
+  <path fill={color} d="M2 8a6 6 0 1 1 6 6a.5.5 0 0 0 0 1a7 7 0 1 0-7-7a.5.5 0 0 0 1 0" />
 </svg>

package/dist/components/icons/success.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     d="M12 3.5C7.041 3.5 3 7.541 3 12.5C3 17.459 7.041 21.5 12 21.5C16.959 21.5 21 17.459 21 12.5C21 7.541 16.959 3.5 12 3.5ZM16.302 10.43L11.199 15.533C11.073 15.659 10.902 15.731 10.722 15.731C10.542 15.731 10.371 15.659 10.245 15.533L7.698 12.986C7.437 12.725 7.437 12.293 7.698 12.032C7.959 11.771 8.391 11.771 8.652 12.032L10.722 14.102L15.348 9.476C15.609 9.215 16.041 9.215 16.302 9.476C16.563 9.737 16.563 10.16 16.302 10.43Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/icons/warning.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import type { IconProps } from './types.js';
 
-  let props: IconProps = $props();
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
 </script>
 
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {width} {height} {...props}>
   <path
     d="M21.3487 15.7641L15.2184 5.20071C14.3947 3.77942 13.2548 3 12 3C10.7452 3 9.60535 3.77942 8.78159 5.20071L2.65127 15.7641C1.8754 17.1121 1.78919 18.405 2.4118 19.4228C3.03441 20.4407 4.26048 21 5.86968 21H18.1303C19.7395 21 20.9656 20.4407 21.5882 19.4228C22.2108 18.405 22.1246 17.1029 21.3487 15.7641ZM11.2816 9.41875C11.2816 9.04279 11.6073 8.73102 12 8.73102C12.3927 8.73102 12.7184 9.04279 12.7184 9.41875V14.0036C12.7184 14.3795 12.3927 14.6913 12 14.6913C11.6073 14.6913 11.2816 14.3795 11.2816 14.0036V9.41875ZM12.6801 17.4055C12.6322 17.4422 12.5843 17.4789 12.5364 17.5155C12.4789 17.5522 12.4215 17.5797 12.364 17.5981C12.3065 17.6256 12.249 17.6439 12.182 17.6531C12.1245 17.6623 12.0575 17.6714 12 17.6714C11.9425 17.6714 11.8755 17.6623 11.8084 17.6531C11.751 17.6439 11.6935 17.6256 11.636 17.5981C11.5785 17.5797 11.5211 17.5522 11.4636 17.5155C11.4157 17.4789 11.3678 17.4422 11.3199 17.4055C11.1475 17.2313 11.0421 16.9929 11.0421 16.7545C11.0421 16.516 11.1475 16.2776 11.3199 16.1034C11.3678 16.0667 11.4157 16.0301 11.4636 15.9934C11.5211 15.9567 11.5785 15.9292 11.636 15.9109C11.6935 15.8833 11.751 15.865 11.8084 15.8558C11.933 15.8283 12.067 15.8283 12.182 15.8558C12.249 15.865 12.3065 15.8833 12.364 15.9109C12.4215 15.9292 12.4789 15.9567 12.5364 15.9934C12.5843 16.0301 12.6322 16.0667 12.6801 16.1034C12.8525 16.2776 12.9579 16.516 12.9579 16.7545C12.9579 16.9929 12.8525 17.2313 12.6801 17.4055Z"
-    fill="currentColor"
+    fill={color}
   />
 </svg>

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './app-shell/index.js';
+export * from './breadcrumb/index.js';
 export * from './button-group/index.js';
 export * from './button/index.js';
 export * from './checkbox/index.js';
@@ -16,4 +17,5 @@ export * from './separator/index.js';
 export * from './skeleton/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';
+export * from './textarea/index.js';
 export * from './toast/index.js';

package/dist/components/index.js

@@ -1,4 +1,5 @@
 export * from './app-shell/index.js';
+export * from './breadcrumb/index.js';
 export * from './button-group/index.js';
 export * from './button/index.js';
 export * from './checkbox/index.js';
@@ -16,4 +17,5 @@ export * from './separator/index.js';
 export * from './skeleton/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';
+export * from './textarea/index.js';
 export * from './toast/index.js';

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

@@ -33,7 +33,7 @@
 {#if child}
   {@render child({ props: mergedProps })}
 {:else}
-  <ul {...mergedProps}>
+  <ol {...mergedProps}>
     {@render children?.()}
-  </ul>
+  </ol>
 {/if}

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

@@ -16,6 +16,7 @@
     children,
     child,
     class: className,
+    popoverProps,
     ...restProps
   }: NavigationRootProps = $props();
 
@@ -26,6 +27,7 @@
     ),
     id: box.with(() => id),
     compact: box.with(() => compact),
+    popoverProps: box.with(() => popoverProps),
   });
 
   const variants = $derived(navigationVariants({ compact }));

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

@@ -40,13 +40,19 @@
   {@render child({ props: mergedProps, compact: subContentState.root.isCompact })}
 {:else if subContentState.root.isCompact}
   <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content side="right" sideOffset={8} forceMount>
+    <PopoverPrimitive.Content
+      side={subContentState.root.opts.popoverProps.current?.side ?? 'right'}
+      sideOffset={subContentState.root.opts.popoverProps.current?.sideOffset ?? 8}
+      alignOffset={subContentState.root.opts.popoverProps.current?.alignOffset ?? 0}
+      forceMount
+    >
       {#snippet child({ props: childProps, wrapperProps, open })}
+        {@const popoverProps = mergeProps(childProps, mergedProps)}
         {#if open}
           <div {...wrapperProps}>
-            <ul {...childProps} {...mergedProps} transition:fly={{ duration: 250, easing: cubicInOut, x: 10 }}>
+            <ol {...popoverProps} transition:fly={{ duration: 250, easing: cubicInOut, x: 10 }}>
               {@render children?.({ compact: subContentState.root.isCompact })}
-            </ul>
+            </ol>
           </div>
         {/if}
       {/snippet}
@@ -55,10 +61,11 @@
 {:else}
   <CollapsiblePrimitive.Content {...mergedProps}>
     {#snippet child({ props: childProps, open })}
+      {@const collapsibleProps = mergeProps(childProps, mergedProps)}
       {#if open}
-        <ul {...childProps} {...mergedProps} transition:fade={{ duration: 250, easing: cubicInOut }}>
+        <ol {...collapsibleProps} transition:fade={{ duration: 250, easing: cubicInOut }}>
           {@render children?.({ compact: subContentState.root.isCompact })}
-        </ul>
+        </ol>
       {/if}
     {/snippet}
   </CollapsiblePrimitive.Content>

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

@@ -1,9 +1,11 @@
 import type { RefAttachment } from '../../../internal/types/common.js';
 import { Context } from 'runed';
 import { type ReadableBoxedValues, type WithRefProps } from 'svelte-toolbelt';
+import type { NavigationRootProps } from '../types.js';
 export declare const NavigationSubContentStateCtx: Context<NavigationSubContentState>;
 type NavigationRootStateOpts = WithRefProps<ReadableBoxedValues<{
     compact: boolean;
+    popoverProps: NavigationRootProps['popoverProps'];
 }>>;
 export declare class NavigationRootState {
     static create(opts: NavigationRootStateOpts): NavigationRootState;

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

@@ -30,29 +30,29 @@
   const NAVIGATION_ITEMS: NavigationItemValue[] = [
     {
       key: 1,
-      label: 'Item 1',
+      label: 'Dashboard',
       icon: Icon.Info,
       href: '#',
     },
     {
       key: 2,
-      label: 'Item 2',
+      label: 'Settings',
       icon: Icon.Info,
       href: '#',
     },
     {
       key: 3,
-      label: 'Item 3',
+      label: 'Users Management',
       icon: Icon.Info,
       children: [
         {
           key: 4,
-          label: 'Sub Item 1',
+          label: 'Users',
           href: '#',
         },
         {
           key: 5,
-          label: 'Sub Item 2',
+          label: 'Roles',
           href: '#',
         },
       ],

package/dist/components/navigation/styles.js

@@ -7,7 +7,6 @@ export const navigationVariants = tv({
             '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:bg-surface-darkest',
         ],
         content: ['cgui:overflow-hidden'],
         item: [],
@@ -18,7 +17,7 @@ export const navigationVariants = tv({
         ],
         trigger: [
             'cgui:flex cgui:items-center cgui:gap-2',
-            'cgui:overflow-hidden',
+            'cgui:overflow-hidden cgui:truncate',
             'cgui:w-full cgui:px-3 cgui:py-4',
             'cgui:group-data-[compact=true]/navigation:py-3 cgui:data-[sub-content="false"]:group-data-[compact=true]/navigation:justify-center',
             'cgui:text-fg-semilight cgui:text-body',

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

@@ -2,7 +2,13 @@ import type { PrimitiveElementAttributes } from '../../internal/types/html-attri
 import type { Component, Snippet } from 'svelte';
 import type { WithChild, WithElementRef, Without, WithoutChildren, WithoutChildrenOrChild } from 'svelte-toolbelt';
 import type { NavigationVariantsProps } from './styles.js';
-type NavigationRootPropsWithoutHTML = WithElementRef<WithChild<{}, {
+type NavigationRootPropsWithoutHTML = WithElementRef<WithChild<{
+    popoverProps?: {
+        sideOffset?: number;
+        alignOffset?: number;
+        side?: 'top' | 'bottom' | 'left' | 'right';
+    };
+}, {
     compact: boolean;
 }>> & NavigationVariantsProps;
 export type NavigationRootProps = NavigationRootPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationRootPropsWithoutHTML>;

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

@@ -10,7 +10,7 @@ export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: never[];
     trigger: string[];
-    content: never[];
+    content: string[];
 }, undefined, {
     shadow: {
         true: {
@@ -20,7 +20,7 @@ export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: never[];
     trigger: string[];
-    content: never[];
+    content: string[];
 }, import("tailwind-variants").TVReturnType<{
     shadow: {
         true: {
@@ -30,7 +30,7 @@ export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: never[];
     trigger: string[];
-    content: never[];
+    content: string[];
 }, undefined, unknown, unknown, undefined>>;
 export type PopoverVariantsProps = VariantProps<typeof popoverVariants>;
 export declare const PopoverStylesContext: Context<ReadableBox<{

package/dist/components/popover/styles.js

@@ -8,7 +8,7 @@ export const popoverVariants = tv({
             'cgui:cursor-pointer',
             'cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none cgui:disabled:opacity-50',
         ],
-        content: [],
+        content: ['cgui:z-(--cg-ui-z-index-popover)'],
     },
     variants: {
         shadow: {

package/dist/components/select/components/select.content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { SelectStylesContext } from '../styles.js';
+  import type { SelectContentProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    children,
+    side = 'bottom',
+    forceMount = false,
+    ...restProps
+  }: SelectContentProps = $props();
+
+  const variants = SelectStylesContext.get();
+
+  const attrs = $derived({
+    'data-slot': 'select-content',
+    class: cn(variants.current.content(), className),
+    sideOffset,
+    forceMount,
+    side,
+    ...restProps,
+  });
+</script>
+
+<SelectPrimitive.Content bind:ref {...attrs}>
+  {@render children?.()}
+</SelectPrimitive.Content>

package/dist/components/select/components/select.content.svelte.d.ts

@@ -1,26 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const Select: import("svelte").Component<Omit<SelectPrimitive.ContentProps, "child">, {}, "ref">;
+type Select = ReturnType<typeof Select>;
 export default Select;
-type Select = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Select: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/select/components/select.group-heading.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { SelectStylesContext } from '../styles.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SelectGroupHeadingProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: SelectGroupHeadingProps = $props();
+
+  const variants = SelectStylesContext.get();
+</script>
+
+<SelectPrimitive.GroupHeading
+  bind:ref
+  data-slot="select-group-heading"
+  class={cn(variants.current.label(), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</SelectPrimitive.GroupHeading>

package/dist/components/select/components/select.group-heading.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const Select: import("svelte").Component<SelectPrimitive.GroupHeadingProps, {}, "ref">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/select/components/select.group.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SelectGroupProps } from '../types.js';
+
+  let { ref = $bindable(null), ...restProps }: SelectGroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" bind:ref {...restProps} />

package/dist/components/select/components/select.group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const Select: import("svelte").Component<SelectPrimitive.GroupProps, {}, "ref">;
+type Select = ReturnType<typeof Select>;
+export default Select;

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Icon } from '../../icons/index.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { SelectStylesContext } from '../styles.js';
+  import type { SelectItemProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    label,
+    children: childrenProp,
+    ...restProps
+  }: SelectItemProps = $props();
+
+  const variants = SelectStylesContext.get();
+</script>
+
+<SelectPrimitive.Item
+  bind:ref
+  {value}
+  data-slot="select-item"
+  class={cn(variants.current.item(), className)}
+  {...restProps}
+>
+  {#snippet children({ selected, highlighted })}
+    {#if childrenProp}
+      {@render childrenProp({ selected, highlighted })}
+    {:else}
+      {label || value}
+
+      {#if selected}
+        <Icon.Checkmark width={16} height={16} />
+      {/if}
+    {/if}
+  {/snippet}
+</SelectPrimitive.Item>

package/dist/components/select/components/select.item.svelte.d.ts

@@ -1,26 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const Select: import("svelte").Component<Omit<SelectPrimitive.ItemProps, "child">, {}, "ref">;
+type Select = ReturnType<typeof Select>;
 export default Select;
-type Select = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Select: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/select/components/select.portal.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SelectPortalProps } from '../types.js';
+
+  let { children, ...restProps }: SelectPortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps}>
+  {@render children?.()}
+</SelectPrimitive.Portal>

package/dist/components/select/components/select.portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Select: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/select/components/select.trigger.svelte

@@ -1,43 +1,44 @@
 <script lang="ts">
-  import { getDataActive } from '../../../internal/utils/attrs.js';
-  import { cn, useId } from '../../../internal/utils/common.js';
+  import { Icon } from '../../icons/index.js';
+  import { cn } from '../../../internal/utils/common.js';
   import { Select as SelectPrimitive } from 'bits-ui';
   import { SelectStylesContext } from '../styles.js';
   import type { SelectTriggerProps } from '../types.js';
 
   let {
     ref = $bindable(null),
-    id = useId(),
     class: className,
-    startChevron,
-    endChevron,
+    child,
     children,
+    hasChevron = true,
     ...restProps
   }: SelectTriggerProps = $props();
 
   const styles = SelectStylesContext.get();
-</script>
 
-<SelectPrimitive.Trigger
-  bind:ref
-  {id}
-  data-slot="trigger"
-  data-start-chevron={getDataActive(Boolean(startChevron))}
-  data-end-chevron={getDataActive(Boolean(endChevron))}
-  class={cn(styles.current.trigger(), className)}
-  {...restProps}
->
-  {#if startChevron}
-    <span data-slot="start-chevron" class={styles.current.chevron()}>
-      {@render startChevron()}
-    </span>
-  {/if}
+  const attrs = $derived({
+    'data-slot': 'trigger',
+    class: cn(styles.current.trigger(), className),
+    ...restProps,
+  });
+</script>
 
-  {@render children?.()}
+{#if child}
+  {@render child({ props: attrs })}
+{:else}
+  <SelectPrimitive.Trigger bind:ref {...attrs}>
+    {@render children?.()}
 
-  {#if endChevron}
-    <span data-slot="end-chevron" class={styles.current.chevron()}>
-      {@render endChevron()}
-    </span>
-  {/if}
-</SelectPrimitive.Trigger>
+    {#if hasChevron}
+      <span
+        data-slot="chevron"
+        class={cn(
+          'cgui:transition-transform cgui:duration-250 cgui:ease-in-out',
+          'cgui:group-data-[state=open]/select-trigger:-rotate-180'
+        )}
+      >
+        <Icon.ChevronDown width={20} height={20} />
+      </span>
+    {/if}
+  </SelectPrimitive.Trigger>
+{/if}

package/dist/components/select/components/select.viewport.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { SelectStylesContext } from '../styles.js';
+  import type { SelectViewportProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, child, ...restProps }: SelectViewportProps = $props();
+
+  const variants = SelectStylesContext.get();
+
+  const attrs = $derived({
+    'data-slot': 'select-viewport',
+    class: cn(variants.current.viewport(), className),
+    ...restProps,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: attrs })}
+{:else}
+  <SelectPrimitive.Viewport bind:ref {...attrs}>
+    {@render children?.()}
+  </SelectPrimitive.Viewport>
+{/if}

package/dist/components/select/components/select.viewport.svelte.d.ts

@@ -1,26 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const Select: import("svelte").Component<SelectPrimitive.ViewportProps, {}, "ref">;
+type Select = ReturnType<typeof Select>;
 export default Select;
-type Select = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Select: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

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

@@ -1,2 +1,8 @@
+export { default as Content } from './components/select.content.svelte';
+export { default as GroupHeading } from './components/select.group-heading.svelte';
+export { default as Group } from './components/select.group.svelte';
+export { default as Item } from './components/select.item.svelte';
+export { default as Portal } from './components/select.portal.svelte';
 export { default as Root } from './components/select.root.svelte';
 export { default as Trigger } from './components/select.trigger.svelte';
+export { default as Viewport } from './components/select.viewport.svelte';

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

@@ -1,2 +1,8 @@
+export { default as Content } from './components/select.content.svelte';
+export { default as GroupHeading } from './components/select.group-heading.svelte';
+export { default as Group } from './components/select.group.svelte';
+export { default as Item } from './components/select.item.svelte';
+export { default as Portal } from './components/select.portal.svelte';
 export { default as Root } from './components/select.root.svelte';
 export { default as Trigger } from './components/select.trigger.svelte';
+export { default as Viewport } from './components/select.viewport.svelte';

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

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

package/dist/components/select/exports.js

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