@kayord/ui 0.18.5 → 0.19.2

package/dist/components/ui/menubar/menubar-sub-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive, type WithoutChild } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
-	import { cn } from "../../../utils.js";
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,13 +16,14 @@
 
 <MenubarPrimitive.SubTrigger
 	bind:ref
+	data-slot="menubar-sub-trigger"
+	data-inset={inset}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		inset && "pl-8",
+		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ml-auto size-4" />
+	<ChevronRightIcon class="ml-auto size-4" />
 </MenubarPrimitive.SubTrigger>

package/dist/components/ui/menubar/menubar-sub-trigger.svelte.d.ts

@@ -1,4 +1,5 @@
-import { Menubar as MenubarPrimitive, type WithoutChild } from "bits-ui";
+import { Menubar as MenubarPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChild<MenubarPrimitive.SubTriggerProps> & {
     inset?: boolean;
 };

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

@@ -7,8 +7,9 @@
 
 <MenubarPrimitive.Trigger
 	bind:ref
+	data-slot="menubar-trigger"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-hidden select-none",
+		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/menubar/menubar.svelte

@@ -7,6 +7,7 @@
 
 <MenubarPrimitive.Root
 	bind:ref
-	class={cn("bg-background flex h-10 items-center space-x-1 rounded-md border p-1", className)}
+	data-slot="menubar"
+	class={cn("bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs", className)}
 	{...restProps}
 />

package/dist/components/ui/pagination/pagination-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),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
 </script>
 
-<ul bind:this={ref} class={cn("flex flex-row items-center gap-1", className)} {...restProps}>
+<ul
+	bind:this={ref}
+	data-slot="pagination-content"
+	class={cn("flex flex-row items-center gap-1", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </ul>

package/dist/components/ui/pagination/pagination-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 PaginationContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLUListElement>>, {}, "ref">;
 type PaginationContent = ReturnType<typeof PaginationContent>;
 export default PaginationContent;

package/dist/components/ui/pagination/pagination-ellipsis.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import Ellipsis from "@lucide/svelte/icons/ellipsis";
-	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,9 +13,10 @@
 <span
 	bind:this={ref}
 	aria-hidden="true"
+	data-slot="pagination-ellipsis"
 	class={cn("flex size-9 items-center justify-center", className)}
 	{...restProps}
 >
-	<Ellipsis class="size-4" />
+	<EllipsisIcon class="size-4" />
 	<span class="sr-only">More pages</span>
 </span>

package/dist/components/ui/pagination/pagination-ellipsis.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 PaginationEllipsis: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLSpanElement>>, "children">, {}, "ref">;
 type PaginationEllipsis = ReturnType<typeof PaginationEllipsis>;

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { HTMLLiAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
+	import type { WithElementRef } from "../../../utils.js";
 
 	let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
-<li bind:this={ref} {...restProps}>
+<li bind:this={ref} data-slot="pagination-item" {...restProps}>
 	{@render children?.()}
 </li>

package/dist/components/ui/pagination/pagination-item.svelte.d.ts

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

package/dist/components/ui/pagination/pagination-link.svelte

@@ -24,6 +24,9 @@
 <PaginationPrimitive.Page
 	bind:ref
 	{page}
+	aria-current={isActive ? "page" : undefined}
+	data-slot="pagination-link"
+	data-active={isActive}
 	class={cn(
 		buttonVariants({
 			variant: isActive ? "outline" : "ghost",

package/dist/components/ui/pagination/pagination-next-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -14,15 +14,17 @@
 
 {#snippet Fallback()}
 	<span>Next</span>
-	<ChevronRight class="size-4" />
+	<ChevronRightIcon class="size-4" />
 {/snippet}
 
 <PaginationPrimitive.NextButton
 	bind:ref
+	aria-label="Go to next page"
 	class={cn(
 		buttonVariants({
+			size: "default",
 			variant: "ghost",
-			class: "gap-1 pr-2.5",
+			class: "gap-1 px-2.5 sm:pr-2.5",
 		}),
 		className
 	)}

package/dist/components/ui/pagination/pagination-prev-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Pagination as PaginationPrimitive } from "bits-ui";
-	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -13,16 +13,18 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeft class="size-4" />
+	<ChevronLeftIcon class="size-4" />
 	<span>Previous</span>
 {/snippet}
 
 <PaginationPrimitive.PrevButton
 	bind:ref
+	aria-label="Go to previous page"
 	class={cn(
 		buttonVariants({
+			size: "default",
 			variant: "ghost",
-			class: "gap-1 pl-2.5",
+			class: "gap-1 px-2.5 sm:pl-2.5",
 		}),
 		className
 	)}

package/dist/components/ui/pagination/pagination.svelte

@@ -16,10 +16,13 @@
 
 <PaginationPrimitive.Root
 	bind:ref
-	class={cn("mx-auto flex w-full flex-col items-center", className)}
+	bind:page
+	role="navigation"
+	aria-label="pagination"
+	data-slot="pagination"
+	class={cn("mx-auto flex w-full justify-center", className)}
 	{count}
 	{perPage}
 	{siblingCount}
-	bind:page
 	{...restProps}
 />

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

@@ -1,6 +1,6 @@
 import { Popover as PopoverPrimitive } from "bits-ui";
 import Content from "./popover-content.svelte";
+import Trigger from "./popover-trigger.svelte";
 declare const Root: import("svelte").Component<import("bits-ui").PopoverRootPropsWithoutHTML, {}, "open">;
-declare const Trigger: import("svelte").Component<PopoverPrimitive.TriggerProps, {}, "ref">;
 declare const Close: import("svelte").Component<PopoverPrimitive.CloseProps, {}, "ref">;
 export { Root, Content, Trigger, Close, Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose, };

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

@@ -1,7 +1,7 @@
 import { Popover as PopoverPrimitive } from "bits-ui";
 import Content from "./popover-content.svelte";
+import Trigger from "./popover-trigger.svelte";
 const Root = PopoverPrimitive.Root;
-const Trigger = PopoverPrimitive.Trigger;
 const Close = PopoverPrimitive.Close;
 export { Root, Content, Trigger, Close, 
 //

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

@@ -17,10 +17,11 @@
 <PopoverPrimitive.Portal {...portalProps}>
 	<PopoverPrimitive.Content
 		bind:ref
+		data-slot="popover-content"
 		{sideOffset}
 		{align}
 		class={cn(
-			"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 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
+			"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 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
 			className
 		)}
 		{...restProps}

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), class: className, ...restProps }: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger bind:ref data-slot="popover-trigger" class={cn("", className)} {...restProps} />

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

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

package/dist/components/ui/progress/progress.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Progress as ProgressPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { Progress as ProgressPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,13 +13,15 @@
 
 <ProgressPrimitive.Root
 	bind:ref
-	class={cn("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)}
+	data-slot="progress"
+	class={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
 	{value}
 	{max}
 	{...restProps}
 >
 	<div
+		data-slot="progress-indicator"
 		class="bg-primary h-full w-full flex-1 transition-all"
-		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
 	></div>
 </ProgressPrimitive.Root>

package/dist/components/ui/radio-group/radio-group-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Circle from "@lucide/svelte/icons/circle";
-	import { cn } from "../../../utils.js";
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import CircleIcon from "@lucide/svelte/icons/circle";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,16 +12,17 @@
 
 <RadioGroupPrimitive.Item
 	bind:ref
+	data-slot="radio-group-item"
 	class={cn(
-		"border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input text-primary 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<div class="flex items-center justify-center">
+		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
 			{#if checked}
-				<Circle class="size-2.5 fill-current text-current" />
+				<CircleIcon class="fill-primary text-primary-foreground size-2.5" />
 			{/if}
 		</div>
 	{/snippet}

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

@@ -10,4 +10,10 @@
 	}: RadioGroupPrimitive.RootProps = $props();
 </script>
 
-<RadioGroupPrimitive.Root bind:ref bind:value class={cn("grid gap-2", className)} {...restProps} />
+<RadioGroupPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="radio-group"
+	class={cn("grid gap-3", className)}
+	{...restProps}
+/>

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

@@ -1,4 +1,4 @@
 import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-declare const RadioGroup: import("svelte").Component<RadioGroupPrimitive.RootProps, {}, "ref" | "value">;
+declare const RadioGroup: import("svelte").Component<RadioGroupPrimitive.RootProps, {}, "value" | "ref">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;

package/dist/components/ui/range-calendar/range-calendar-cell.svelte

@@ -8,7 +8,7 @@
 <RangeCalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md",
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 data-highlighted:rounded-r-md first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/range-calendar/range-calendar-day.svelte

@@ -12,12 +12,12 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant: "ghost" }),
-		"size-9 p-0 font-normal data-[selected]:opacity-100",
+		"size-8 p-0 font-normal select-none data-[selected]:opacity-100",
 		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
 		// Selection Start
-		"data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground",
+		"data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground dark:data-[selection-start]:hover:bg-primary dark:data-[selection-start]:focus:bg-primary",
 		// Selection End
-		"data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground",
+		"data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground dark:data-[selection-end]:hover:bg-primary dark:data-[selection-end]:focus:bg-primary",
 		// Outside months
 		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
 		// Disabled

package/dist/components/ui/range-calendar/range-calendar-head-cell.svelte

@@ -7,6 +7,6 @@
 
 <RangeCalendarPrimitive.HeadCell
 	bind:ref
-	class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
+	class={cn("text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal", className)}
 	{...restProps}
 />

package/dist/components/ui/range-calendar/range-calendar-months.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),

package/dist/components/ui/range-calendar/range-calendar-months.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 RangeCalendarMonths: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type RangeCalendarMonths = ReturnType<typeof RangeCalendarMonths>;

package/dist/components/ui/range-calendar/range-calendar-next-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -13,7 +13,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronRight class="size-4" />
+	<ChevronRightIcon class="size-4" />
 {/snippet}
 
 <RangeCalendarPrimitive.NextButton

package/dist/components/ui/range-calendar/range-calendar-prev-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -13,7 +13,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeft class="size-4" />
+	<ChevronLeftIcon class="size-4" />
 {/snippet}
 
 <RangeCalendarPrimitive.PrevButton

package/dist/components/ui/range-calendar/range-calendar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 	import * as RangeCalendar from "./index.js";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),

package/dist/components/ui/range-calendar/range-calendar.svelte.d.ts

@@ -1,5 +1,5 @@
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
 import * as RangeCalendar from "./index.js";
-declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "placeholder" | "ref" | "value">;
+declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "value" | "placeholder" | "ref">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

package/dist/components/ui/resizable/resizable-handle.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import GripVertical from "@lucide/svelte/icons/grip-vertical";
+	import GripVerticalIcon from "@lucide/svelte/icons/grip-vertical";
 	import * as ResizablePrimitive from "paneforge";
-	import type { WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,6 +15,7 @@
 
 <ResizablePrimitive.PaneResizer
 	bind:ref
+	data-slot="resizable-handle"
 	class={cn(
 		"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90",
 		className
@@ -23,8 +23,8 @@
 	{...restProps}
 >
 	{#if withHandle}
-		<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
-			<GripVertical class="size-2.5" />
+		<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+			<GripVerticalIcon class="size-2.5" />
 		</div>
 	{/if}
 </ResizablePrimitive.PaneResizer>

package/dist/components/ui/resizable/resizable-handle.svelte.d.ts

@@ -1,5 +1,5 @@
 import * as ResizablePrimitive from "paneforge";
-import type { WithoutChildrenOrChild } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChildrenOrChild<ResizablePrimitive.PaneResizerProps> & {
     withHandle?: boolean;
 };

package/dist/components/ui/resizable/resizable-pane-group.svelte

@@ -14,6 +14,7 @@
 
 <ResizablePrimitive.PaneGroup
 	bind:this={paneGroup}
+	data-slot="resizable-pane-group"
 	class={cn("flex h-full w-full data-[direction=vertical]:flex-col", className)}
 	{...restProps}
 />

package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,15 +13,16 @@
 
 <ScrollAreaPrimitive.Scrollbar
 	bind:ref
+	data-slot="scroll-area-scrollbar"
 	{orientation}
 	class={cn(
-		"flex touch-none transition-colors select-none",
-		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
-		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		"flex touch-none p-px transition-colors select-none",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+		orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ScrollAreaPrimitive.Thumb class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")} />
+	<ScrollAreaPrimitive.Thumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
 </ScrollAreaPrimitive.Scrollbar>

package/dist/components/ui/scroll-area/scroll-area.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
 	import { Scrollbar } from "./index.js";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -18,8 +18,11 @@
 	} = $props();
 </script>
 
-<ScrollAreaPrimitive.Root bind:ref {...restProps} class={cn("relative overflow-hidden", className)}>
-	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+<ScrollAreaPrimitive.Root bind:ref data-slot="scroll-area" class={cn("relative", className)} {...restProps}>
+	<ScrollAreaPrimitive.Viewport
+		data-slot="scroll-area-viewport"
+		class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+	>
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === "vertical" || orientation === "both"}

package/dist/components/ui/scroll-area/scroll-area.svelte.d.ts

@@ -1,4 +1,5 @@
-import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
+import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../../utils.js";
 type $$ComponentProps = WithoutChild<ScrollAreaPrimitive.RootProps> & {
     orientation?: "vertical" | "horizontal" | "both" | undefined;
     scrollbarXClasses?: string | undefined;

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

@@ -1,5 +1,5 @@
-import { Select as SelectPrimitive } from "bits-ui";
-import GroupHeading from "./select-group-heading.svelte";
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
 import Item from "./select-item.svelte";
 import Content from "./select-content.svelte";
 import Trigger from "./select-trigger.svelte";
@@ -7,5 +7,4 @@ import Separator from "./select-separator.svelte";
 import ScrollDownButton from "./select-scroll-down-button.svelte";
 import ScrollUpButton from "./select-scroll-up-button.svelte";
 declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
-declare const Group: import("svelte").Component<SelectPrimitive.GroupProps, {}, "ref">;
-export { Root, Group, GroupHeading, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, Root as Select, Group as SelectGroup, GroupHeading as SelectGroupHeading, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, };
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, };

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

@@ -1,5 +1,6 @@
 import { Select as SelectPrimitive } from "bits-ui";
-import GroupHeading from "./select-group-heading.svelte";
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
 import Item from "./select-item.svelte";
 import Content from "./select-content.svelte";
 import Trigger from "./select-trigger.svelte";
@@ -7,7 +8,6 @@ import Separator from "./select-separator.svelte";
 import ScrollDownButton from "./select-scroll-down-button.svelte";
 import ScrollUpButton from "./select-scroll-up-button.svelte";
 const Root = SelectPrimitive.Root;
-const Group = SelectPrimitive.Group;
-export { Root, Group, GroupHeading, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, 
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, 
 //
-Root as Select, Group as SelectGroup, GroupHeading as SelectGroupHeading, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, };
+Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, };