@kayord/ui 0.19.0 → 0.19.2

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

@@ -3,17 +3,18 @@ import Root from "./menubar.svelte";
 import CheckboxItem from "./menubar-checkbox-item.svelte";
 import Content from "./menubar-content.svelte";
 import Item from "./menubar-item.svelte";
-import GroupHeading from "./menubar-group-heading.svelte";
+import Group from "./menubar-group.svelte";
 import RadioItem from "./menubar-radio-item.svelte";
 import Separator from "./menubar-separator.svelte";
 import Shortcut from "./menubar-shortcut.svelte";
 import SubContent from "./menubar-sub-content.svelte";
 import SubTrigger from "./menubar-sub-trigger.svelte";
 import Trigger from "./menubar-trigger.svelte";
+import Label from "./menubar-label.svelte";
+import GroupHeading from "./menubar-group-heading.svelte";
 const Menu = MenubarPrimitive.Menu;
-const Group = MenubarPrimitive.Group;
 const Sub = MenubarPrimitive.Sub;
 const RadioGroup = MenubarPrimitive.RadioGroup;
-export { Root, CheckboxItem, Content, Item, GroupHeading, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, 
+export { Root, CheckboxItem, Content, Item, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, Label, GroupHeading, 
 //
-Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, GroupHeading as MenubarGroupHeading, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, };
+Root as Menubar, CheckboxItem as MenubarCheckboxItem, Content as MenubarContent, Item as MenubarItem, RadioItem as MenubarRadioItem, Separator as MenubarSeparator, Shortcut as MenubarShortcut, SubContent as MenubarSubContent, SubTrigger as MenubarSubTrigger, Trigger as MenubarTrigger, Menu as MenubarMenu, Group as MenubarGroup, Sub as MenubarSub, RadioGroup as MenubarRadioGroup, Label as MenubarLabel, GroupHeading as MenubarGroupHeading, };

package/dist/components/ui/menubar/menubar-checkbox-item.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Check from "@lucide/svelte/icons/check";
-	import Minus from "@lucide/svelte/icons/minus";
-	import { cn } from "../../../utils.js";
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 	import type { Snippet } from "svelte";
 
 	let {
@@ -21,18 +21,19 @@
 	bind:ref
 	bind:checked
 	bind:indeterminate
+	data-slot="menubar-checkbox-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex 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",
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 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",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 			{#if indeterminate}
-				<Minus class="size-4" />
+				<MinusIcon class="size-4" />
 			{:else}
-				<Check class={cn("size-4", !checked && "text-transparent")} />
+				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
 			{/if}
 		</span>
 		{@render childrenProp?.()}

package/dist/components/ui/menubar/menubar-checkbox-item.svelte.d.ts

@@ -1,4 +1,5 @@
-import { Menubar as MenubarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import { Menubar as MenubarPrimitive } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
 import type { Snippet } from "svelte";
 type $$ComponentProps = WithoutChildrenOrChild<MenubarPrimitive.CheckboxItemProps> & {
     children?: Snippet;

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

@@ -19,12 +19,13 @@
 <MenubarPrimitive.Portal {...portalProps}>
 	<MenubarPrimitive.Content
 		bind:ref
+		data-slot="menubar-content"
 		{sideOffset}
 		{align}
 		{alignOffset}
 		{side}
 		class={cn(
-			"bg-popover text-popover-foreground z-50 min-w-[12rem] rounded-md border p-1 shadow-md focus:outline-hidden",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in 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 min-w-[12rem] origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/menubar/menubar-group-heading.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
+		inset,
 		class: className,
-		inset = undefined,
 		...restProps
-	}: MenubarPrimitive.GroupHeadingProps & {
+	}: ComponentProps<typeof MenubarPrimitive.GroupHeading> & {
 		inset?: boolean;
 	} = $props();
 </script>
 
 <MenubarPrimitive.GroupHeading
 	bind:ref
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	data-slot="menubar-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
 	{...restProps}
 />

package/dist/components/ui/menubar/menubar-group-heading.svelte.d.ts

@@ -1,5 +1,6 @@
 import { Menubar as MenubarPrimitive } from "bits-ui";
-type $$ComponentProps = MenubarPrimitive.GroupHeadingProps & {
+import type { ComponentProps } from "svelte";
+type $$ComponentProps = ComponentProps<typeof MenubarPrimitive.GroupHeading> & {
     inset?: boolean;
 };
 declare const MenubarGroupHeading: import("svelte").Component<$$ComponentProps, {}, "ref">;

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		...restProps
+	}: MenubarPrimitive.GroupProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<MenubarPrimitive.Group bind:ref data-slot="menubar-group" {...restProps} />

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

@@ -0,0 +1,7 @@
+import { Menubar as MenubarPrimitive } from "bits-ui";
+type $$ComponentProps = MenubarPrimitive.GroupProps & {
+    inset?: boolean;
+};
+declare const MenubarGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type MenubarGroup = ReturnType<typeof MenubarGroup>;
+export default MenubarGroup;

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

@@ -6,17 +6,21 @@
 		ref = $bindable(null),
 		class: className,
 		inset = undefined,
+		variant = "default",
 		...restProps
 	}: MenubarPrimitive.ItemProps & {
 		inset?: boolean;
+		variant?: "default" | "destructive";
 	} = $props();
 </script>
 
 <MenubarPrimitive.Item
 	bind:ref
+	data-slot="menubar-item"
+	data-inset={inset}
+	data-variant={variant}
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative 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-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}

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

@@ -1,6 +1,7 @@
 import { Menubar as MenubarPrimitive } from "bits-ui";
 type $$ComponentProps = MenubarPrimitive.ItemProps & {
     inset?: boolean;
+    variant?: "default" | "destructive";
 };
 declare const MenubarItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type MenubarItem = ReturnType<typeof MenubarItem>;

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import { type WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		inset,
+		children,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="menubar-label"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,8 @@
+import { type WithElementRef } from "bits-ui";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    inset?: boolean;
+};
+declare const MenubarLabel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type MenubarLabel = ReturnType<typeof MenubarLabel>;
+export default MenubarLabel;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Menubar as MenubarPrimitive, type WithoutChild } from "bits-ui";
-	import Circle from "@lucide/svelte/icons/circle";
-	import { cn } from "../../../utils.js";
+	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import CircleIcon from "@lucide/svelte/icons/circle";
+	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,16 +13,17 @@
 
 <MenubarPrimitive.RadioItem
 	bind:ref
+	data-slot="menubar-radio-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex 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",
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 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",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 			{#if checked}
-				<Circle class="size-2 fill-current" />
+				<CircleIcon class="size-2 fill-current" />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}

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

@@ -5,4 +5,9 @@
 	let { ref = $bindable(null), class: className, ...restProps }: MenubarPrimitive.SeparatorProps = $props();
 </script>
 
-<MenubarPrimitive.Separator bind:ref class={cn("bg-muted -mx-1 my-1 h-px", className)} {...restProps} />
+<MenubarPrimitive.Separator
+	bind:ref
+	data-slot="menubar-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>

package/dist/components/ui/menubar/menubar-shortcut.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<HTMLSpanElement>> = $props();
 </script>
 
-<span bind:this={ref} class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...restProps}>
+<span
+	bind:this={ref}
+	data-slot="menubar-shortcut"
+	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </span>

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

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

@@ -7,6 +7,10 @@
 
 <MenubarPrimitive.SubContent
 	bind:ref
-	class={cn("bg-popover text-popover-foreground z-50 min-w-max rounded-md border p-1 focus:outline-hidden", className)}
+	data-slot="menubar-sub-content"
+	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 min-w-[8rem] origin-(--bits-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+		className
+	)}
 	{...restProps}
 />

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>