@selvajs/ui 6.6.0-beta.15 → 6.6.0-beta.16

package/dist/components/primitives/tabs/tabs-list.svelte.d.ts

@@ -1,17 +1,17 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const tabsListVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: "h-9 w-fit justify-center rounded-lg bg-muted p-0.75";
+        default: "h-9 w-fit justify-center rounded-md bg-muted p-0.5";
         line: "gap-1 px-2 w-full justify-start";
     };
 }, undefined, "inline-flex items-center text-muted-foreground", {
     variant: {
-        default: "h-9 w-fit justify-center rounded-lg bg-muted p-0.75";
+        default: "h-9 w-fit justify-center rounded-md bg-muted p-0.5";
         line: "gap-1 px-2 w-full justify-start";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: "h-9 w-fit justify-center rounded-lg bg-muted p-0.75";
+        default: "h-9 w-fit justify-center rounded-md bg-muted p-0.5";
         line: "gap-1 px-2 w-full justify-start";
     };
 }, undefined>>;

package/dist/components/primitives/tabs/tabs-trigger.svelte

@@ -6,7 +6,7 @@
 		variants: {
 			variant: {
 				default:
-					'px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground',
+					'px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground',
 				line: 'px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary'
 			}
 		},

package/dist/components/primitives/tabs/tabs-trigger.svelte.d.ts

@@ -1,17 +1,17 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const tabsTriggerVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground";
+        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground";
         line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
     };
 }, undefined, "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
-        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground";
+        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground";
         line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-md border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-background dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground";
+        default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground";
         line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
     };
 }, undefined>>;

package/dist/components/primitives/textarea/textarea.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot={dataSlot}
 	class={cn(
-		'min-h-16 px-3 py-2 text-base shadow-xs md:text-sm flex field-sizing-content w-full rounded-md border border-input bg-transparent transition outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+		'min-h-16 px-3 py-2 text-base shadow-xs md:text-sm flex field-sizing-content w-full rounded-md border border-input bg-field transition outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 		className
 	)}
 	bind:value

package/dist/components/primitives/toggle/toggle.svelte

@@ -2,14 +2,17 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const toggleVariants = tv({
-		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "hover:text-foreground aria-pressed:bg-selected focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-selected gap-1 rounded-md text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-hover focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				outline: 'border-input hover:bg-muted border bg-transparent',
+				// Item inside a segmented track: the chosen value sits raised above the track.
+				segmented:
+					'rounded-inner bg-transparent text-muted-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-raised data-[state=on]:ring-1 data-[state=on]:ring-border-strong',
+				outline: 'border-input hover:bg-hover border bg-transparent',
 				// Filled accent for the active item; a bare bg-muted is too faint on a form.
 				accent:
-					'border-input hover:bg-muted border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset'
+					'border-input hover:bg-hover border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset'
 			},
 			size: {
 				default:

package/dist/components/primitives/toggle/toggle.svelte.d.ts

@@ -2,8 +2,9 @@ import { type VariantProps } from 'tailwind-variants';
 export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-transparent";
-        outline: "border-input hover:bg-muted border bg-transparent";
-        accent: "border-input hover:bg-muted border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
+        segmented: "rounded-inner bg-transparent text-muted-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-raised data-[state=on]:ring-1 data-[state=on]:ring-border-strong";
+        outline: "border-input hover:bg-hover border bg-transparent";
+        accent: "border-input hover:bg-hover border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
     };
     size: {
         default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
@@ -11,11 +12,12 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
         stacked: "min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs";
     };
-}, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+}, undefined, "hover:text-foreground aria-pressed:bg-selected focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-selected gap-1 rounded-md text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-hover focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         default: "bg-transparent";
-        outline: "border-input hover:bg-muted border bg-transparent";
-        accent: "border-input hover:bg-muted border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
+        segmented: "rounded-inner bg-transparent text-muted-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-raised data-[state=on]:ring-1 data-[state=on]:ring-border-strong";
+        outline: "border-input hover:bg-hover border bg-transparent";
+        accent: "border-input hover:bg-hover border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
     };
     size: {
         default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
@@ -26,8 +28,9 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: "bg-transparent";
-        outline: "border-input hover:bg-muted border bg-transparent";
-        accent: "border-input hover:bg-muted border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
+        segmented: "rounded-inner bg-transparent text-muted-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-raised data-[state=on]:ring-1 data-[state=on]:ring-border-strong";
+        outline: "border-input hover:bg-hover border bg-transparent";
+        accent: "border-input hover:bg-hover border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
     };
     size: {
         default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";

package/dist/components/primitives/toggle-group/toggle-group-item.svelte

@@ -23,7 +23,7 @@
 	data-size={ctx.size || size}
 	data-spacing={ctx.spacing}
 	class={cn(
-		'group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 shrink-0 group-data-[spacing=0]/toggle-group:rounded-none focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=accent]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=accent]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=accent]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=accent]:first:border-t group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+		'group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 shrink-0 group-data-[spacing=0]/toggle-group:rounded-none focus:z-10 focus-visible:z-10 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=accent]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=accent]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=accent]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=accent]:first:border-t group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
 		toggleVariants({
 			variant: ctx.variant || variant,
 			size: ctx.size || size

package/dist/components/primitives/toggle-group/toggle-group.svelte

@@ -68,7 +68,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-spacing={spacing}
 	style="--gap: calc(var(--spacing) * {spacing})"
 	class={cn(
-		'group/toggle-group flex w-fit flex-row items-center gap-(--gap) rounded-lg data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-md',
+		'group/toggle-group data-[variant=segmented]:p-0.5 flex w-fit flex-row items-center gap-(--gap) rounded-md data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[variant=segmented]:border data-[variant=segmented]:border-input data-[variant=segmented]:bg-muted',
 		className
 	)}
 	{...restProps}

package/dist/components/primitives/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+import Content from './tooltip-content.svelte';
+import Portal from './tooltip-portal.svelte';
+import Provider from './tooltip-provider.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Root from './tooltip.svelte';
+export { Root, Content, Provider, Portal, Trigger, Root as Tooltip, Content as TooltipContent, Provider as TooltipProvider, Portal as TooltipPortal, Trigger as TooltipTrigger };

package/dist/components/primitives/tooltip/index.js

@@ -0,0 +1,8 @@
+import Content from './tooltip-content.svelte';
+import Portal from './tooltip-portal.svelte';
+import Provider from './tooltip-provider.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Root from './tooltip.svelte';
+export { Root, Content, Provider, Portal, Trigger, 
+//
+Root as Tooltip, Content as TooltipContent, Provider as TooltipProvider, Portal as TooltipPortal, Trigger as TooltipTrigger };

package/dist/components/primitives/tooltip/tooltip-content.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import TooltipPortal from './tooltip-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 6,
+		side = 'top',
+		children,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			'data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=delayed-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 px-2.5 py-1.5 text-xs font-medium z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md bg-foreground text-balance text-background',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</TooltipPrimitive.Content>
+</TooltipPortal>

package/dist/components/primitives/tooltip/tooltip-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+import TooltipPortal from './tooltip-portal.svelte';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = TooltipPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+};
+declare const TooltipContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type TooltipContent = ReturnType<typeof TooltipContent>;
+export default TooltipContent;

package/dist/components/primitives/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

package/dist/components/primitives/tooltip/tooltip-portal.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipPortal: import("svelte").Component<TooltipPrimitive.PortalProps, {}, "">;
+type TooltipPortal = ReturnType<typeof TooltipPortal>;
+export default TooltipPortal;

package/dist/components/primitives/tooltip/tooltip-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />

package/dist/components/primitives/tooltip/tooltip-provider.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const TooltipProvider: import("svelte").Component<TooltipPrimitive.ProviderProps, {}, "">;
+type TooltipProvider = ReturnType<typeof TooltipProvider>;
+export default TooltipProvider;

package/dist/components/primitives/tooltip/tooltip-trigger.svelte

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

package/dist/components/primitives/tooltip/tooltip-trigger.svelte.d.ts

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

package/dist/components/primitives/tooltip/tooltip.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipPrimitive.Root bind:open {...restProps} />

package/dist/components/primitives/tooltip/tooltip.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+declare const Tooltip: import("svelte").Component<TooltipPrimitive.RootProps, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/viewer/MeshMetadataPanel.svelte

@@ -65,7 +65,7 @@
 			<table class="text-xs w-full border-collapse">
 				<tbody>
 					{#each Object.entries(filteredMetadata) as [key, value] (key)}
-						<tr class="border-b border-border/60 last:border-b-0">
+						<tr class="border-b border-border last:border-b-0">
 							<th
 								scope="row"
 								class="px-4 py-2 font-normal text-left align-top whitespace-nowrap text-muted-foreground"

package/dist/components/viewer/SceneManager.svelte

@@ -225,16 +225,16 @@
 	onmousedown={() => outliner.selection.clear()}
 >
 	<div class="px-3 py-2 gap-2 flex items-center border-b border-border">
-		<Search class="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" />
+		<Search class="h-3.5 w-3.5 shrink-0 text-faint-foreground" />
 		<input
-			class="min-w-0 text-xs flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground/50"
+			class="min-w-0 text-xs flex-1 bg-transparent text-foreground outline-none placeholder:text-faint-foreground"
 			placeholder={t.searchObjects}
 			bind:value={searchQuery}
 		/>
 		{#if searchQuery}
 			<button onclick={() => (searchQuery = '')} aria-label={t.clearSearch}>
 				<X
-					class="h-3.5 w-3.5 text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+					class="h-3.5 w-3.5 text-faint-foreground transition-colors hover:text-muted-foreground"
 				/>
 			</button>
 		{/if}
@@ -247,11 +247,11 @@
 		>
 			{#if allCollapsed}
 				<ChevronsUpDown
-					class="h-3.5 w-3.5 text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+					class="h-3.5 w-3.5 text-faint-foreground transition-colors hover:text-muted-foreground"
 				/>
 			{:else}
 				<ChevronsDownUp
-					class="h-3.5 w-3.5 text-muted-foreground/50 transition-colors hover:text-muted-foreground"
+					class="h-3.5 w-3.5 text-faint-foreground transition-colors hover:text-muted-foreground"
 				/>
 			{/if}
 		</button>
@@ -285,10 +285,10 @@
 						{@const isCollapsed = collapsed.has(row.layerName)}
 
 						<div
-							class="gap-1 pl-1 pr-2 group flex h-full items-center transition-colors hover:bg-muted"
+							class="gap-1 pl-1 pr-2 group flex h-full items-center transition-colors hover:bg-hover"
 						>
 							<button
-								class="rounded p-0.5 shrink-0 text-muted-foreground transition-colors hover:text-muted-foreground"
+								class="p-0.5 shrink-0 rounded-sm text-muted-foreground transition-colors hover:text-muted-foreground"
 								onclick={() => outliner.toggleCollapsed(row.layerName)}
 								aria-label={isCollapsed ? t.expandLayer : t.collapseLayer}
 							>
@@ -300,15 +300,15 @@
 							</button>
 
 							<button
-								class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
+								class="p-1 shrink-0 rounded-sm transition-colors hover:bg-hover"
 								onclick={() => toggleLayer(entries)}
 								title={layerHidden ? t.showLayer : t.hideLayer}
 								aria-label={layerHidden ? t.showLayer : t.hideLayer}
 							>
 								{#if layerHidden}
-									<EyeOff class="h-3.5 w-3.5 text-muted-foreground/40" />
+									<EyeOff class="h-3.5 w-3.5 text-faint-foreground" />
 								{:else if layerPartial}
-									<Eye class="h-3.5 w-3.5 text-muted-foreground/60" />
+									<Eye class="h-3.5 w-3.5 text-faint-foreground" />
 								{:else}
 									<Eye class="h-3.5 w-3.5 text-muted-foreground" />
 								{/if}
@@ -316,13 +316,13 @@
 
 							<span
 								class="min-w-0 text-xs font-medium flex-1 truncate {layerHidden
-									? 'text-muted-foreground/40 line-through'
+									? 'text-faint-foreground line-through'
 									: 'text-foreground'}"
 							>
 								{row.layerName}
 							</span>
 
-							<span class="shrink-0 text-2xs text-muted-foreground/50 tabular-nums">
+							<span class="shrink-0 text-2xs text-faint-foreground tabular-nums">
 								{entries.length}
 							</span>
 						</div>
@@ -338,7 +338,7 @@
 								aria-selected={isSelected}
 								tabindex="-1"
 								class="gap-1.5 pl-5 pr-2 flex h-full cursor-pointer items-center transition-colors
-									{isSelected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-muted'}
+									{isSelected ? 'bg-primary/10 hover:bg-primary/15' : 'hover:bg-hover'}
 									{isHidden ? 'opacity-40' : ''}"
 								onmouseenter={() => onHover?.(entry)}
 								onmouseleave={() => onHover?.(null)}
@@ -351,7 +351,7 @@
 									e.key === 'Enter' && selectObject(entry.key, e as unknown as MouseEvent)}
 							>
 								<button
-									class="rounded p-1 shrink-0 transition-colors hover:bg-muted"
+									class="p-1 shrink-0 rounded-sm transition-colors hover:bg-hover"
 									onclick={(e) => {
 										e.stopPropagation();
 										toggleEntry(entry);
@@ -360,7 +360,7 @@
 									aria-label={isHidden ? t.showObject : t.hideObject}
 								>
 									{#if isHidden}
-										<EyeOff class="h-3 w-3 text-muted-foreground/60" />
+										<EyeOff class="h-3 w-3 text-faint-foreground" />
 									{:else}
 										<Eye class="h-3 w-3 text-muted-foreground" />
 									{/if}
@@ -369,13 +369,13 @@
 								<span
 									class="min-w-0 text-xs flex-1 truncate {isHidden
 										? 'text-muted-foreground line-through'
-										: 'text-foreground/80'}"
+										: 'text-foreground'}"
 								>
 									{entry.label}
 								</span>
 
 								<span
-									class="rounded px-1 py-0.5 font-medium shrink-0 bg-muted text-2xs text-muted-foreground/70"
+									class="px-1 py-0.5 font-medium shrink-0 rounded-sm bg-muted text-2xs text-faint-foreground"
 								>
 									{getTypeLabel(entry.object)}
 								</span>
@@ -388,12 +388,12 @@
 
 		{#if sceneObjects.length === 0}
 			<div class="py-12 flex flex-col items-center justify-center text-center">
-				<EyeOff class="mb-2 h-5 w-5 text-muted-foreground/30" />
+				<EyeOff class="mb-2 h-5 w-5 text-faint-foreground" />
 				<p class="text-xs text-muted-foreground">{t.noObjects}</p>
 			</div>
 		{:else if layerGroups.size === 0}
 			<div class="py-12 flex flex-col items-center justify-center text-center">
-				<Search class="mb-2 h-5 w-5 text-muted-foreground/30" />
+				<Search class="mb-2 h-5 w-5 text-faint-foreground" />
 				<p class="text-xs text-muted-foreground">
 					{t.noResultsFor.replace('{query}', searchQuery)}
 				</p>