@kayord/ui 0.18.5 → 0.19.2

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+	import { Select as SelectPrimitive } from "bits-ui";
 	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
 	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -20,15 +20,16 @@
 	<SelectPrimitive.Content
 		bind:ref
 		{sideOffset}
+		data-slot="select-content"
 		class={cn(
-			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 			className
 		)}
 		{...restProps}
 	>
 		<SelectScrollUpButton />
 		<SelectPrimitive.Viewport
-			class={cn("h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) p-1")}
+			class={cn("h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1 p-1")}
 		>
 			{@render children?.()}
 		</SelectPrimitive.Viewport>

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

@@ -1,4 +1,5 @@
-import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+import { Select as SelectPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChild<SelectPrimitive.ContentProps> & {
     portalProps?: SelectPrimitive.PortalProps;
 };

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

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

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

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

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import Check from "@lucide/svelte/icons/check";
-	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,16 +16,17 @@
 <SelectPrimitive.Item
 	bind:ref
 	{value}
+	data-slot="select-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ selected, highlighted })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
 			{#if selected}
-				<Check class="size-4" />
+				<CheckIcon class="size-4" />
 			{/if}
 		</span>
 		{#if childrenProp}

package/dist/components/ui/select/select-label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/select/select-label.svelte.d.ts

@@ -0,0 +1,6 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {};
+declare const SelectLabel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SelectLabel = ReturnType<typeof SelectLabel>;
+export default SelectLabel;

package/dist/components/ui/select/select-scroll-down-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronDown from "@lucide/svelte/icons/chevron-down";
-	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,8 +12,9 @@
 
 <SelectPrimitive.ScrollDownButton
 	bind:ref
+	data-slot="select-scroll-down-button"
 	class={cn("flex cursor-default items-center justify-center py-1", className)}
 	{...restProps}
 >
-	<ChevronDown class="size-4" />
+	<ChevronDownIcon class="size-4" />
 </SelectPrimitive.ScrollDownButton>

package/dist/components/ui/select/select-scroll-up-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronUp from "@lucide/svelte/icons/chevron-up";
-	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,8 +12,9 @@
 
 <SelectPrimitive.ScrollUpButton
 	bind:ref
+	data-slot="select-scroll-up-button"
 	class={cn("flex cursor-default items-center justify-center py-1", className)}
 	{...restProps}
 >
-	<ChevronUp class="size-4" />
+	<ChevronUpIcon class="size-4" />
 </SelectPrimitive.ScrollUpButton>

package/dist/components/ui/select/select-separator.svelte

@@ -6,4 +6,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: SeparatorPrimitive.RootProps = $props();
 </script>
 
-<Separator bind:ref class={cn("bg-muted -mx-1 my-1 h-px", className)} {...restProps} />
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>

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

@@ -1,24 +1,29 @@
 <script lang="ts">
-	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronDown from "@lucide/svelte/icons/chevron-down";
-	import { cn } from "../../../utils.js";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		size = "default",
 		...restProps
-	}: WithoutChild<SelectPrimitive.TriggerProps> = $props();
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: "sm" | "default";
+	} = $props();
 </script>
 
 <SelectPrimitive.Trigger
 	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
 	class={cn(
-		"border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-4 opacity-50" />
+	<ChevronDownIcon class="size-4 opacity-50" />
 </SelectPrimitive.Trigger>

package/dist/components/ui/select/select-trigger.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Select as SelectPrimitive } from "bits-ui";
-declare const SelectTrigger: import("svelte").Component<Omit<SelectPrimitive.TriggerProps, "child">, {}, "ref">;
+import { type WithoutChild } from "../../../utils.js";
+type $$ComponentProps = WithoutChild<SelectPrimitive.TriggerProps> & {
+    size?: "sm" | "default";
+};
+declare const SelectTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type SelectTrigger = ReturnType<typeof SelectTrigger>;
 export default SelectTrigger;

package/dist/components/ui/separator/separator.svelte

@@ -2,17 +2,15 @@
 	import { Separator as SeparatorPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		orientation = "horizontal",
-		...restProps
-	}: SeparatorPrimitive.RootProps = $props();
+	let { ref = $bindable(null), class: className, ...restProps }: SeparatorPrimitive.RootProps = $props();
 </script>
 
 <SeparatorPrimitive.Root
 	bind:ref
-	class={cn("bg-border shrink-0", orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]", className)}
-	{orientation}
+	data-slot="separator-root"
+	class={cn(
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+		className
+	)}
 	{...restProps}
 />

package/dist/components/ui/sheet/index.d.ts

@@ -1,4 +1,5 @@
-import { Dialog as SheetPrimitive } from "bits-ui";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
 import Overlay from "./sheet-overlay.svelte";
 import Content from "./sheet-content.svelte";
 import Header from "./sheet-header.svelte";
@@ -6,7 +7,5 @@ import Footer from "./sheet-footer.svelte";
 import Title from "./sheet-title.svelte";
 import Description from "./sheet-description.svelte";
 declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
-declare const Close: import("svelte").Component<SheetPrimitive.TriggerProps, {}, "ref">;
-declare const Trigger: import("svelte").Component<SheetPrimitive.TriggerProps, {}, "ref">;
 declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
 export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, Root as Sheet, Close as SheetClose, Trigger as SheetTrigger, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription, };

package/dist/components/ui/sheet/index.js

@@ -1,4 +1,6 @@
 import { Dialog as SheetPrimitive } from "bits-ui";
+import Trigger from "./sheet-trigger.svelte";
+import Close from "./sheet-close.svelte";
 import Overlay from "./sheet-overlay.svelte";
 import Content from "./sheet-content.svelte";
 import Header from "./sheet-header.svelte";
@@ -6,8 +8,6 @@ import Footer from "./sheet-footer.svelte";
 import Title from "./sheet-title.svelte";
 import Description from "./sheet-description.svelte";
 const Root = SheetPrimitive.Root;
-const Close = SheetPrimitive.Close;
-const Trigger = SheetPrimitive.Trigger;
 const Portal = SheetPrimitive.Portal;
 export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, 
 //

package/dist/components/ui/sheet/sheet-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.CloseProps = $props();
+</script>
+
+<SheetPrimitive.Close bind:ref data-slot="sheet-close" {...restProps} />

package/dist/components/ui/sheet/sheet-close.svelte.d.ts

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

package/dist/components/ui/sheet/sheet-content.svelte

@@ -1,12 +1,12 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from "tailwind-variants";
 	export const sheetVariants = tv({
-		base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+		base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 		variants: {
 			side: {
-				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
+				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
 				bottom:
-					"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
+					"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
 				left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
 				right:
 					"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
@@ -21,11 +21,11 @@
 </script>
 
 <script lang="ts">
-	import { Dialog as SheetPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import X from "@lucide/svelte/icons/x";
+	import { Dialog as SheetPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
 	import type { Snippet } from "svelte";
 	import SheetOverlay from "./sheet-overlay.svelte";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -43,12 +43,17 @@
 
 <SheetPrimitive.Portal {...portalProps}>
 	<SheetOverlay />
-	<SheetPrimitive.Content bind:ref class={cn(sheetVariants({ side }), className)} {...restProps}>
+	<SheetPrimitive.Content
+		bind:ref
+		data-slot="sheet-content"
+		class={cn(sheetVariants({ side }), className)}
+		{...restProps}
+	>
 		{@render children?.()}
 		<SheetPrimitive.Close
-			class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+			class="ring-offset-background focus-visible:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
 		>
-			<X class="size-4" />
+			<XIcon class="size-4" />
 			<span class="sr-only">Close</span>
 		</SheetPrimitive.Close>
 	</SheetPrimitive.Content>

package/dist/components/ui/sheet/sheet-content.svelte.d.ts

@@ -6,7 +6,7 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
         left: string;
         right: string;
     };
-}, undefined, "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", {
+}, undefined, "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", {
     side: {
         top: string;
         bottom: string;
@@ -20,10 +20,11 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
         left: string;
         right: string;
     };
-}, undefined, "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", unknown, unknown, undefined>>;
+}, undefined, "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", unknown, unknown, undefined>>;
 export type Side = VariantProps<typeof sheetVariants>["side"];
-import { Dialog as SheetPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import { Dialog as SheetPrimitive } from "bits-ui";
 import type { Snippet } from "svelte";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
     portalProps?: SheetPrimitive.PortalProps;
     side?: Side;

package/dist/components/ui/sheet/sheet-description.svelte

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.DescriptionProps = $props();
 </script>
 
-<SheetPrimitive.Description bind:ref class={cn("text-muted-foreground text-sm", className)} {...restProps} />
+<SheetPrimitive.Description
+	bind:ref
+	data-slot="sheet-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/dist/components/ui/sheet/sheet-footer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,10 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div
-	bind:this={ref}
-	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-	{...restProps}
->
+<div bind:this={ref} data-slot="sheet-footer" class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/sheet/sheet-footer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const SheetFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type SheetFooter = ReturnType<typeof SheetFooter>;

package/dist/components/ui/sheet/sheet-header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...restProps}>
+<div bind:this={ref} data-slot="sheet-header" class={cn("flex flex-col gap-1.5 p-4", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/sheet/sheet-header.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 declare const SheetHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type SheetHeader = ReturnType<typeof SheetHeader>;
 export default SheetHeader;

package/dist/components/ui/sheet/sheet-overlay.svelte

@@ -9,8 +9,9 @@
 
 <SheetPrimitive.Overlay
 	bind:ref
+	data-slot="sheet-overlay"
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/sheet/sheet-title.svelte

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: SheetPrimitive.TitleProps = $props();
 </script>
 
-<SheetPrimitive.Title bind:ref class={cn("text-foreground text-lg font-semibold", className)} {...restProps} />
+<SheetPrimitive.Title
+	bind:ref
+	data-slot="sheet-title"
+	class={cn("text-foreground font-semibold", className)}
+	{...restProps}
+/>

package/dist/components/ui/sheet/sheet-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props();
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />

package/dist/components/ui/sheet/sheet-trigger.svelte.d.ts

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

package/dist/components/ui/sidebar/sidebar-content.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,6 +12,7 @@
 
 <div
 	bind:this={ref}
+	data-slot="sidebar-content"
 	data-sidebar="content"
 	class={cn(
 		"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",

package/dist/components/ui/sidebar/sidebar-content.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 declare const SidebarContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
 type SidebarContent = ReturnType<typeof SidebarContent>;
 export default SidebarContent;

package/dist/components/ui/sidebar/sidebar-footer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,12 @@
 	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
 </script>
 
-<div bind:this={ref} data-sidebar="footer" class={cn("flex flex-col gap-2 p-2", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="sidebar-footer"
+	data-sidebar="footer"
+	class={cn("flex flex-col gap-2 p-2", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/components/ui/sidebar/sidebar-footer.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 declare const SidebarFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
 type SidebarFooter = ReturnType<typeof SidebarFooter>;
 export default SidebarFooter;

package/dist/components/ui/sidebar/sidebar-group-action.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
@@ -14,23 +13,24 @@
 		child?: Snippet<[{ props: Record<string, unknown> }]>;
 	} = $props();
 
-	const propObj = $derived({
+	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
 			// Increases the hit area of the button on mobile.
-			"after:absolute after:-inset-2 after:md:hidden",
+			"after:absolute after:-inset-2 md:after:hidden",
 			"group-data-[collapsible=icon]:hidden",
 			className
 		),
+		"data-slot": "sidebar-group-action",
 		"data-sidebar": "group-action",
 		...restProps,
 	});
 </script>
 
 {#if child}
-	{@render child({ props: propObj })}
+	{@render child({ props: mergedProps })}
 {:else}
-	<button bind:this={ref} {...propObj}>
+	<button bind:this={ref} {...mergedProps}>
 		{@render children?.()}
 	</button>
 {/if}

package/dist/components/ui/sidebar/sidebar-group-action.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLButtonAttributes> & {

package/dist/components/ui/sidebar/sidebar-group-content.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
@@ -11,6 +10,12 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-sidebar="group-content" class={cn("w-full text-sm", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="sidebar-group-content"
+	data-sidebar="group-content"
+	class={cn("w-full text-sm", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/components/ui/sidebar/sidebar-group-content.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const SidebarGroupContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type SidebarGroupContent = ReturnType<typeof SidebarGroupContent>;