@kayord/ui 0.18.5 → 0.19.2

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

@@ -4,11 +4,12 @@ export * as AlertDialog from "./alert-dialog/index.js";
 export { AspectRatio } from "./aspect-ratio/index.js";
 export * as Avatar from "./avatar/index.js";
 export { Badge, badgeVariants, type BadgeVariant } from "./badge/index.js";
-export { Button, type ButtonProps, buttonVariants } from "./button/index.js";
 export * as Breadcrumb from "./breadcrumb/index.js";
+export { Button, type ButtonProps, buttonVariants } from "./button/index.js";
 export { Calendar } from "./calendar/index.js";
 export * as Card from "./card/index.js";
 export * as Carousel from "./carousel/index.js";
+export * as Chart from "./chart/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as Command from "./command/index.js";
@@ -20,6 +21,7 @@ export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as Form from "./form/index.js";
 export * as HoverCard from "./hover-card/index.js";
 export { Input } from "./input/index.js";
+export * as InputOTP from "./input-otp/index.js";
 export { Label } from "./label/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as Pagination from "./pagination/index.js";
@@ -28,15 +30,15 @@ export { Progress } from "./progress/index.js";
 export * as RadioGroup from "./radio-group/index.js";
 export * as RangeCalendar from "./range-calendar/index.js";
 export * as Resizable from "./resizable/index.js";
+export { ScrollArea } from "./scroll-area/index.js";
 export * as Select from "./select/index.js";
-export * as Sidebar from "./sidebar/index.js";
 export { Separator } from "./separator/index.js";
 export * as Sheet from "./sheet/index.js";
+export * as Sidebar from "./sidebar/index.js";
 export { Skeleton } from "./skeleton/index.js";
 export { Slider } from "./slider/index.js";
 export { Toaster } from "./sonner/index.js";
 export { toast } from "svelte-sonner";
-export { ScrollArea } from "./scroll-area/index.js";
 export { Switch } from "./switch/index.js";
 export * as Table from "./table/index.js";
 export * as Tabs from "./tabs/index.js";

package/dist/components/ui/index.js

@@ -4,11 +4,12 @@ export * as AlertDialog from "./alert-dialog/index.js";
 export { AspectRatio } from "./aspect-ratio/index.js";
 export * as Avatar from "./avatar/index.js";
 export { Badge, badgeVariants } from "./badge/index.js";
-export { Button, buttonVariants } from "./button/index.js";
 export * as Breadcrumb from "./breadcrumb/index.js";
+export { Button, buttonVariants } from "./button/index.js";
 export { Calendar } from "./calendar/index.js";
 export * as Card from "./card/index.js";
 export * as Carousel from "./carousel/index.js";
+export * as Chart from "./chart/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as Command from "./command/index.js";
@@ -20,6 +21,7 @@ export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as Form from "./form/index.js";
 export * as HoverCard from "./hover-card/index.js";
 export { Input } from "./input/index.js";
+export * as InputOTP from "./input-otp/index.js";
 export { Label } from "./label/index.js";
 export * as Menubar from "./menubar/index.js";
 export * as Pagination from "./pagination/index.js";
@@ -28,15 +30,15 @@ export { Progress } from "./progress/index.js";
 export * as RadioGroup from "./radio-group/index.js";
 export * as RangeCalendar from "./range-calendar/index.js";
 export * as Resizable from "./resizable/index.js";
+export { ScrollArea } from "./scroll-area/index.js";
 export * as Select from "./select/index.js";
-export * as Sidebar from "./sidebar/index.js";
 export { Separator } from "./separator/index.js";
 export * as Sheet from "./sheet/index.js";
+export * as Sidebar from "./sidebar/index.js";
 export { Skeleton } from "./skeleton/index.js";
 export { Slider } from "./slider/index.js";
 export { Toaster } from "./sonner/index.js";
 export { toast } from "svelte-sonner";
-export { ScrollArea } from "./scroll-area/index.js";
 export { Switch } from "./switch/index.js";
 export * as Table from "./table/index.js";
 export * as Tabs from "./tabs/index.js";

package/dist/components/ui/input/input.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 
@@ -22,8 +21,11 @@
 {#if type === "file"}
 	<input
 		bind:this={ref}
+		data-slot="input"
 		class={cn(
-			"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className
 		)}
 		type="file"
@@ -34,8 +36,11 @@
 {:else}
 	<input
 		bind:this={ref}
+		data-slot="input"
 		class={cn(
-			"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className
 		)}
 		{type}

package/dist/components/ui/input/input.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type: "file";
@@ -8,6 +8,6 @@ type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type?: InputType;
     files?: undefined;
 })>;
-declare const Input: import("svelte").Component<Props, {}, "ref" | "value" | "files">;
+declare const Input: import("svelte").Component<Props, {}, "value" | "ref" | "files">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/ui/input-otp/input-otp-group.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 items-center", className)} {...restProps}>
+<div bind:this={ref} data-slot="input-otp-group" class={cn("flex items-center", className)} {...restProps}>
 	{@render children?.()}
 </div>

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

package/dist/components/ui/input-otp/input-otp-separator.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { WithElementRef } from "bits-ui";
-	import Dot from "@lucide/svelte/icons/dot";
+	import type { WithElementRef } from "../../../utils.js";
+	import DotIcon from "@lucide/svelte/icons/dot";
 
 	let { ref = $bindable(null), children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} role="separator" {...restProps}>
+<div bind:this={ref} data-slot="input-otp-separator" role="separator" {...restProps}>
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<Dot />
+		<DotIcon />
 	{/if}
 </div>

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

package/dist/components/ui/input-otp/input-otp-slot.svelte

@@ -1,22 +1,18 @@
 <script lang="ts">
 	import { PinInput as InputOTPPrimitive } from "bits-ui";
-	import type { ComponentProps } from "svelte";
 	import { cn } from "../../../utils.js";
 
-	let {
-		ref = $bindable(null),
-		cell,
-		class: className,
-		...restProps
-	}: ComponentProps<typeof InputOTPPrimitive.Cell> = $props();
+	let { ref = $bindable(null), cell, class: className, ...restProps }: InputOTPPrimitive.CellProps = $props();
 </script>
 
 <InputOTPPrimitive.Cell
 	{cell}
 	bind:ref
+	data-slot="input-otp-slot"
 	class={cn(
-		"border-input relative flex h-10 w-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-		cell.isActive && "ring-ring ring-offset-background z-10 ring-2",
+		"border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-10 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md",
+		cell.isActive &&
+			"border-ring ring-ring/50 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 ring-offset-background z-10 ring-[3px]",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/input-otp/input-otp-slot.svelte.d.ts

@@ -1,12 +1,4 @@
-declare const InputOtpSlot: import("svelte").Component<Omit<{
-    cell: import("bits-ui").PinInputCell;
-}, "child" | "children"> & {
-    child?: import("svelte").Snippet<[{
-        props: Record<string, unknown>;
-    }]> | undefined;
-    children?: import("svelte").Snippet<[]> | undefined;
-    style?: import("bits-ui").StyleProperties | string | null | undefined;
-    ref?: HTMLElement | null | undefined;
-} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").PinInputCellPropsWithoutHTML>, {}, "ref">;
+import { PinInput as InputOTPPrimitive } from "bits-ui";
+declare const InputOtpSlot: import("svelte").Component<InputOTPPrimitive.CellProps, {}, "ref">;
 type InputOtpSlot = ReturnType<typeof InputOtpSlot>;
 export default InputOtpSlot;

package/dist/components/ui/input-otp/input-otp.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { PinInput as InputOTPPrimitive } from "bits-ui";
-	import type { ComponentProps } from "svelte";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -8,12 +7,13 @@
 		class: className,
 		value = $bindable(""),
 		...restProps
-	}: ComponentProps<typeof InputOTPPrimitive.Root> = $props();
+	}: InputOTPPrimitive.RootProps = $props();
 </script>
 
 <InputOTPPrimitive.Root
 	bind:ref
 	bind:value
-	class={cn("flex items-center gap-2 has-[:disabled]:opacity-50 [&_input]:disabled:cursor-not-allowed", className)}
+	data-slot="input-otp"
+	class={cn("flex items-center gap-2 has-disabled:opacity-50 [&_input]:disabled:cursor-not-allowed", className)}
 	{...restProps}
 />

package/dist/components/ui/input-otp/input-otp.svelte.d.ts

@@ -1,3 +1,4 @@
-declare const InputOtp: import("svelte").Component<import("bits-ui").PinInputRootPropsWithoutHTML & import("bits-ui").Without<import("bits-ui").BitsPrimitiveInputAttributes, import("bits-ui").PinInputRootPropsWithoutHTML>, {}, "ref" | "value">;
+import { PinInput as InputOTPPrimitive } from "bits-ui";
+declare const InputOtp: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "value" | "ref">;
 type InputOtp = ReturnType<typeof InputOtp>;
 export default InputOtp;

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

@@ -7,6 +7,10 @@
 
 <LabelPrimitive.Root
 	bind:ref
-	class={cn("text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className)}
+	data-slot="label"
+	class={cn(
+		"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+		className
+	)}
 	{...restProps}
 />

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

@@ -3,15 +3,16 @@ 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";
 declare const Menu: import("svelte").Component<import("bits-ui").MenubarMenuPropsWithoutHTML, {}, "">;
-declare const Group: import("svelte").Component<MenubarPrimitive.GroupProps, {}, "ref">;
 declare const Sub: import("svelte").Component<MenubarPrimitive.SubProps, {}, "open">;
-declare const RadioGroup: import("svelte").Component<MenubarPrimitive.RadioGroupProps, {}, "ref" | "value">;
-export { Root, CheckboxItem, Content, Item, GroupHeading, RadioItem, Separator, Shortcut, SubContent, SubTrigger, Trigger, Menu, Group, Sub, RadioGroup, 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, };
+declare const RadioGroup: import("svelte").Component<MenubarPrimitive.RadioGroupProps, {}, "value" | "ref">;
+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, 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/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}
 />