@tanglemedia/svelte-starter-ui-shadcn 0.1.0 → 0.2.0

package/src/lib/components/ui/item/index.ts

@@ -1,13 +1,13 @@
-import Root from "./item.svelte";
-import Group from "./item-group.svelte";
-import Separator from "./item-separator.svelte";
-import Header from "./item-header.svelte";
-import Footer from "./item-footer.svelte";
+import Actions from "./item-actions.svelte";
 import Content from "./item-content.svelte";
-import Title from "./item-title.svelte";
 import Description from "./item-description.svelte";
-import Actions from "./item-actions.svelte";
+import Footer from "./item-footer.svelte";
+import Group from "./item-group.svelte";
+import Header from "./item-header.svelte";
 import Media from "./item-media.svelte";
+import Separator from "./item-separator.svelte";
+import Title from "./item-title.svelte";
+import Root from "./item.svelte";
 
 export {
 	Root,

package/src/lib/components/ui/item/item-actions.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-actions"
-	class={cn("flex items-center gap-2", className)}
+	class={cn("gap-2 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/item/item-content.svelte

@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="item-content"
-	class={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
+	class={cn(
+		"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/item/item-description.svelte

@@ -14,8 +14,7 @@
 	bind:this={ref}
 	data-slot="item-description"
 	class={cn(
-		"text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
-		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+		"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/item/item-footer.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-footer"
-	class={cn("flex basis-full items-center justify-between gap-2", className)}
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/item/item-group.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	role="list"
 	data-slot="item-group"
-	class={cn("group/item-group flex flex-col", className)}
+	class={cn("gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/item/item-header.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-header"
-	class={cn("flex basis-full items-center justify-between gap-2", className)}
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/item/item-media.svelte

@@ -2,12 +2,12 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const itemMediaVariants = tv({
-		base: "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+		base: "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
 		variants: {
 			variant: {
 				default: "bg-transparent",
-				icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
-				image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+				icon: "[&_svg:not([class*='size-'])]:size-4",
+				image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
 			},
 		},
 		defaultVariants: {

package/src/lib/components/ui/item/item-separator.svelte

@@ -14,6 +14,6 @@
 	bind:ref
 	data-slot="item-separator"
 	orientation="horizontal"
-	class={cn("my-0", className)}
+	class={cn("my-2", className)}
 	{...restProps}
 />

package/src/lib/components/ui/item/item-title.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="item-title"
-	class={cn("flex w-fit items-center gap-2 text-sm font-medium leading-snug", className)}
+	class={cn("gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/item/item.svelte

@@ -2,16 +2,17 @@
 	import { tv, type VariantProps } from "tailwind-variants";
 
 	export const itemVariants = tv({
-		base: "group/item [a]:hover:bg-accent/50 [a]:transition-colors focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+		base: "[a]:hover:bg-muted rounded-lg border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors",
 		variants: {
 			variant: {
-				default: "bg-transparent",
+				default: "border-transparent",
 				outline: "border-border",
-				muted: "bg-muted/50",
+				muted: "bg-muted/50 border-transparent",
 			},
 			size: {
-				default: "gap-4 p-4",
-				sm: "gap-2.5 px-4 py-3",
+				default: "gap-2.5 px-3 py-2.5",
+				sm: "gap-2.5 px-3 py-2.5",
+				xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
 			},
 		},
 		defaultVariants: {
@@ -26,8 +27,8 @@
 
 <script lang="ts">
 	import { cn, type WithElementRef } from "$lib/components/utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

package/src/lib/components/ui/kbd/index.ts

@@ -1,5 +1,5 @@
-import Root from "./kbd.svelte";
 import Group from "./kbd-group.svelte";
+import Root from "./kbd.svelte";
 
 export {
 	Root,

package/src/lib/components/ui/kbd/kbd-group.svelte

@@ -13,7 +13,7 @@
 <kbd
 	bind:this={ref}
 	data-slot="kbd-group"
-	class={cn("inline-flex items-center gap-1", className)}
+	class={cn("gap-1 inline-flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/kbd/kbd.svelte

@@ -14,9 +14,7 @@
 	bind:this={ref}
 	data-slot="kbd"
 	class={cn(
-		"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
-		"[&_svg:not([class*='size-'])]:size-3",
-		"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+		"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/label/label.svelte

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

package/src/lib/components/ui/marker/index.ts

@@ -0,0 +1,15 @@
+import Content from "./marker-content.svelte";
+import Icon from "./marker-icon.svelte";
+import Root, { markerVariants, type MarkerVariant } from "./marker.svelte";
+
+export {
+	Root,
+	Icon,
+	Content,
+	markerVariants,
+	type MarkerVariant,
+	//
+	Root as Marker,
+	Icon as MarkerIcon,
+	Content as MarkerContent,
+};

package/src/lib/components/ui/marker/marker-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="marker-content"
+	class={cn("group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground min-w-0 wrap-break-word", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/lib/components/ui/marker/marker-icon.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="marker-icon"
+	aria-hidden="true"
+	class={cn("size-4 [&_svg:not([class*='size-'])]:size-4 shrink-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/lib/components/ui/marker/marker.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const markerVariants = tv({
+		base: "min-h-4 gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground group/marker relative flex w-full items-center",
+		variants: {
+			variant: {
+				default: "cn-marker-variant-default",
+				separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+				border: "border-b border-border pb-2",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type MarkerVariant = VariantProps<typeof markerVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		child,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: MarkerVariant;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(markerVariants({ variant }), className),
+		"data-slot": "marker",
+		"data-variant": variant,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

package/src/lib/components/ui/menubar/index.ts

@@ -1,20 +1,20 @@
-import Root from "./menubar.svelte";
-import Menu from "./menubar-menu.svelte";
-import Sub from "./menubar-sub.svelte";
-import RadioGroup from "./menubar-radio-group.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 Item from "./menubar-item.svelte";
+import Label from "./menubar-label.svelte";
+import Menu from "./menubar-menu.svelte";
+import Portal from "./menubar-portal.svelte";
+import RadioGroup from "./menubar-radio-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 Sub from "./menubar-sub.svelte";
 import Trigger from "./menubar-trigger.svelte";
-import Label from "./menubar-label.svelte";
-import GroupHeading from "./menubar-group-heading.svelte";
-import Portal from "./menubar-portal.svelte";
+import Root from "./menubar.svelte";
 
 export {
 	Root,

package/src/lib/components/ui/menubar/menubar-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import CheckIcon from "@lucide/svelte/icons/check";
-	import MinusIcon from "@lucide/svelte/icons/minus";
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
 	import type { Snippet } from "svelte";
 
@@ -10,32 +10,37 @@
 		class: className,
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
+		inset,
 		children: childrenProp,
+		closeOnSelect = false,
 		...restProps
 	}: WithoutChildrenOrChild<MenubarPrimitive.CheckboxItemProps> & {
+		inset?: boolean;
 		children?: Snippet;
 	} = $props();
 </script>
 
 <MenubarPrimitive.CheckboxItem
 	bind:ref
+	{closeOnSelect}
 	bind:checked
 	bind:indeterminate
 	data-slot="menubar-checkbox-item"
+	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground rounded-xs outline-hidden relative flex cursor-default select-none items-center gap-2 py-1.5 pe-2 ps-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-inset:pl-7 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
-	{#snippet children({ checked, indeterminate })}
+	{#snippet children({ checked: checked, indeterminate: indeterminate })}
 		<span
-			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+			class="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center"
 		>
 			{#if indeterminate}
-				<MinusIcon class="size-4" />
-			{:else}
-				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+				<MinusIcon  />
+			{:else if checked}
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.()}

package/src/lib/components/ui/menubar/menubar-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import MenubarPortal from "./menubar-portal.svelte";
 	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
+	import MenubarPortal from "./menubar-portal.svelte";
 	import type { ComponentProps } from "svelte";
 
 	let {
@@ -22,12 +22,12 @@
 	<MenubarPrimitive.Content
 		bind:ref
 		data-slot="menubar-content"
-		{sideOffset}
 		{align}
 		{alignOffset}
 		{side}
+		{sideOffset}
 		class={cn(
-			"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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-menubar-content-transform-origin) z-50 min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-md",
+			"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-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 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 origin-(--bits-menubar-content-transform-origin) overflow-hidden",
 			className
 		)}
 		{...restProps}

package/src/lib/components/ui/menubar/menubar-group-heading.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { cn } from "$lib/components/utils.js";
 	import { Menubar as MenubarPrimitive } from "bits-ui";
+	import { cn } from "$lib/components/utils.js";
 	import type { ComponentProps } from "svelte";
 
 	let {
@@ -17,6 +17,6 @@
 	bind:ref
 	data-slot="menubar-group-heading"
 	data-inset={inset}
-	class={cn("px-2 py-1.5 text-sm font-medium data-[inset]:ps-8", className)}
+	class={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className)}
 	{...restProps}
 />

package/src/lib/components/ui/menubar/menubar-item.svelte

@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"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 outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:ps-8 data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"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! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}

package/src/lib/components/ui/menubar/menubar-label.svelte

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

package/src/lib/components/ui/menubar/menubar-radio-item.svelte

@@ -1,31 +1,37 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
+	import CheckIcon from '@lucide/svelte/icons/check';
 	import { cn, type WithoutChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		inset,
 		children: childrenProp,
+		closeOnSelect = false,
 		...restProps
-	}: WithoutChild<MenubarPrimitive.RadioItemProps> = $props();
+	}: WithoutChild<MenubarPrimitive.RadioItemProps> & {
+		inset?: boolean;
+	} = $props();
 </script>
 
 <MenubarPrimitive.RadioItem
 	bind:ref
+	{closeOnSelect}
 	data-slot="menubar-radio-item"
+	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground rounded-xs outline-hidden relative flex cursor-default select-none items-center gap-2 py-1.5 pe-2 ps-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
 		<span
-			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+			class="left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center"
 		>
 			{#if checked}
-				<CircleIcon class="size-2 fill-current" />
+				<CheckIcon  />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}

package/src/lib/components/ui/menubar/menubar-shortcut.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="menubar-shortcut"
-	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	class={cn("text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/lib/components/ui/menubar/menubar-sub-content.svelte

@@ -1,20 +1,31 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "$lib/components/utils.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
+	import MenubarPortal from "./menubar-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		align = "start",
+		alignOffset = -3,
+		portalProps,
 		...restProps
-	}: MenubarPrimitive.SubContentProps = $props();
+	}: MenubarPrimitive.SubContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof MenubarPortal>>;
+	} = $props();
 </script>
 
-<MenubarPrimitive.SubContent
-	bind:ref
-	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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-menubar-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
-		className
-	)}
-	{...restProps}
-/>
+<MenubarPortal {...portalProps}>
+	<MenubarPrimitive.SubContent
+		bind:ref
+		data-slot="menubar-sub-content"
+		{align}
+		{alignOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100 z-50 origin-(--bits-menubar-content-transform-origin) overflow-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</MenubarPortal>

package/src/lib/components/ui/menubar/menubar-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { cn, type WithoutChild } from "$lib/components/utils.js";
 
 	let {
@@ -19,11 +19,11 @@
 	data-slot="menubar-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[inset]:ps-8",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRightIcon class="ms-auto size-4" />
+	<ChevronRightIcon class="cn-rtl-flip ml-auto size-4" />
 </MenubarPrimitive.SubTrigger>

package/src/lib/components/ui/menubar/menubar-trigger.svelte

@@ -12,9 +12,6 @@
 <MenubarPrimitive.Trigger
 	bind:ref
 	data-slot="menubar-trigger"
-	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex select-none items-center rounded-sm px-2 py-1 text-sm font-medium",
-		className
-	)}
+	class={cn("hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none", className)}
 	{...restProps}
 />

package/src/lib/components/ui/menubar/menubar.svelte

@@ -12,9 +12,6 @@
 <MenubarPrimitive.Root
 	bind:ref
 	data-slot="menubar"
-	class={cn(
-		"bg-background shadow-xs flex h-9 items-center gap-1 rounded-md border p-1",
-		className
-	)}
+	class={cn("h-8 gap-0.5 rounded-lg border p-[3px] flex items-center", className)}
 	{...restProps}
 />

package/src/lib/components/ui/message/index.ts

@@ -0,0 +1,22 @@
+import Avatar from "./message-avatar.svelte";
+import Content from "./message-content.svelte";
+import Footer from "./message-footer.svelte";
+import Group from "./message-group.svelte";
+import Header from "./message-header.svelte";
+import Root from "./message.svelte";
+
+export {
+	Root,
+	Group,
+	Avatar,
+	Content,
+	Header,
+	Footer,
+	//
+	Root as Message,
+	Group as MessageGroup,
+	Avatar as MessageAvatar,
+	Content as MessageContent,
+	Header as MessageHeader,
+	Footer as MessageFooter,
+};