@selvajs/ui 6.5.1-beta.0 → 6.6.0-beta.11

package/dist/components/primitives/input-group/input-group-button.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	const inputGroupButtonVariants = tv({
+		base: 'gap-2 text-sm flex items-center shadow-none',
+		variants: {
+			size: {
+				xs: "h-6 gap-1 rounded-md px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: '',
+				'icon-xs': 'size-6 rounded-md p-0 has-[>svg]:p-0',
+				'icon-sm': 'size-8 p-0 has-[>svg]:p-0'
+			}
+		},
+		defaultVariants: {
+			size: 'xs'
+		}
+	});
+
+	export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+</script>
+
+<script lang="ts">
+	import { Button } from '../button/index.js';
+	import { cn } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		type = 'button',
+		variant = 'ghost',
+		size = 'xs',
+		...restProps
+	}: Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+		size?: InputGroupButtonSize;
+	} = $props();
+</script>
+
+<Button
+	bind:ref
+	{type}
+	data-size={size}
+	{variant}
+	class={cn(inputGroupButtonVariants({ size }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</Button>

package/dist/components/primitives/input-group/input-group-button.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+declare const inputGroupButtonVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: "h-6 gap-1 rounded-md px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        'icon-xs': "size-6 rounded-md p-0 has-[>svg]:p-0";
+        'icon-sm': "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined, "gap-2 text-sm flex items-center shadow-none", {
+    size: {
+        xs: "h-6 gap-1 rounded-md px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        'icon-xs': "size-6 rounded-md p-0 has-[>svg]:p-0";
+        'icon-sm': "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: "h-6 gap-1 rounded-md px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        'icon-xs': "size-6 rounded-md p-0 has-[>svg]:p-0";
+        'icon-sm': "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined>>;
+export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+import { Button } from '../button/index.js';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+    size?: InputGroupButtonSize;
+};
+declare const InputGroupButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupButton = ReturnType<typeof InputGroupButton>;
+export default InputGroupButton;

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Input } from '../input/index.js';
+	import { cn } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
+		// The group's other controls (a slider, a stepper) set the value, so the spinner is noise.
+		props.type === 'number' && 'no-spinner tabular-nums',
+		className
+	)}
+	bind:value
+	{...props}
+/>

package/dist/components/primitives/input-group/input-group-input.svelte.d.ts

@@ -0,0 +1,11 @@
+declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
+    type: "file";
+    files?: FileList;
+} | {
+    type?: "number" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "hidden" | "color" | "date" | "time" | "datetime-local" | "image" | "month" | "password" | "range" | "week";
+    files?: undefined;
+})) & {
+    ref?: HTMLElement | null | undefined;
+}, {}, "ref" | "value">;
+type InputGroupInput = ReturnType<typeof InputGroupInput>;
+export default InputGroupInput;

package/dist/components/primitives/input-group/input-group-text.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../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}
+	class={cn(
+		"gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center text-muted-foreground [&_svg]:pointer-events-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/components/primitives/input-group/input-group-text.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const InputGroupText: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type InputGroupText = ReturnType<typeof InputGroupText>;
+export default InputGroupText;

package/dist/components/primitives/input-group/input-group-textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Textarea } from '../textarea/index.js';
+	import { cn } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Textarea> = $props();
+</script>
+
+<Textarea
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'py-2 flex-1 resize-none rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
+		className
+	)}
+	bind:value
+	{...props}
+/>

package/dist/components/primitives/input-group/input-group-textarea.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const InputGroupTextarea: import("svelte").Component<Omit<import("../../../utils.js").WithElementRef<import("svelte/elements").HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
+type InputGroupTextarea = ReturnType<typeof InputGroupTextarea>;
+export default InputGroupTextarea;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...props
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-group"
+	role="group"
+	class={cn(
+		'group/input-group h-9 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 min-w-0 shadow-xs relative flex w-full items-center rounded-md border border-input bg-background transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+		className
+	)}
+	{...props}
+>
+	{@render children?.()}
+</div>

package/dist/components/primitives/{alert/alert-title.svelte.d.ts → input-group/input-group.svelte.d.ts}

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../../../utils.js';
-declare const AlertTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
-type AlertTitle = ReturnType<typeof AlertTitle>;
-export default AlertTitle;
+import type { HTMLAttributes } from 'svelte/elements';
+declare const InputGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;

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

@@ -3,14 +3,13 @@
 	import Moon from '@lucide/svelte/icons/moon';
 	import { toggleMode } from 'mode-watcher';
 	import { Button } from '../button';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
 </script>
 
 <Button onclick={toggleMode} variant="outline" size="icon">
-	<Sun
-		class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
-	/>
-	<Moon
-		class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
-	/>
-	<span class="sr-only">Toggle theme</span>
+	<Sun class="size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+	<Moon class="size-5 absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+	<span class="sr-only">{locale.messages.toggleTheme}</span>
 </Button>

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

@@ -0,0 +1,9 @@
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Description from './popover-description.svelte';
+import Header from './popover-header.svelte';
+import Portal from './popover-portal.svelte';
+import Title from './popover-title.svelte';
+import Trigger from './popover-trigger.svelte';
+import Root from './popover.svelte';
+export { Root, Content, Description, Header, Title, Trigger, Close, Portal, Root as Popover, Content as PopoverContent, Description as PopoverDescription, Header as PopoverHeader, Title as PopoverTitle, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal };

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

@@ -0,0 +1,11 @@
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Description from './popover-description.svelte';
+import Header from './popover-header.svelte';
+import Portal from './popover-portal.svelte';
+import Title from './popover-title.svelte';
+import Trigger from './popover-trigger.svelte';
+import Root from './popover.svelte';
+export { Root, Content, Description, Header, Title, Trigger, Close, Portal, 
+//
+Root as Popover, Content as PopoverContent, Description as PopoverDescription, Header as PopoverHeader, Title as PopoverTitle, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal };

package/dist/components/primitives/popover/popover-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />

package/dist/components/primitives/popover/popover-close.svelte.d.ts

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

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import PopoverPortal from './popover-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = 'center',
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+	} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			'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 gap-2.5 p-2.5 text-sm shadow-md w-72 z-50 flex origin-(--bits-popover-content-transform-origin) flex-col rounded-lg bg-popover text-popover-foreground ring-1 ring-foreground/10 outline-hidden duration-100',
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>

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

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

package/dist/components/primitives/popover/popover-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-description"
+	class={cn('text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/primitives/popover/popover-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const PopoverDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverDescription = ReturnType<typeof PopoverDescription>;
+export default PopoverDescription;

package/dist/components/primitives/popover/popover-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-header"
+	class={cn('gap-0.5 text-sm flex flex-col', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/primitives/popover/popover-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const PopoverHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverHeader = ReturnType<typeof PopoverHeader>;
+export default PopoverHeader;

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

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

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

@@ -0,0 +1,3 @@
+declare const PopoverPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type PopoverPortal = ReturnType<typeof PopoverPortal>;
+export default PopoverPortal;

package/dist/components/primitives/popover/popover-title.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="popover-title" class={cn('font-medium', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/primitives/popover/popover-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const PopoverTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverTitle = ReturnType<typeof PopoverTitle>;
+export default PopoverTitle;

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	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/primitives/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/primitives/popover/popover.svelte

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

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

@@ -0,0 +1,3 @@
+declare const Popover: import("svelte").Component<import("bits-ui").PopoverRootPropsWithoutHTML, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

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

@@ -6,9 +6,12 @@
 		ref = $bindable(null),
 		class: className,
 		withHandle = false,
+		line = true,
 		...restProps
 	}: WithoutChildrenOrChild<ResizablePrimitive.PaneResizerProps> & {
 		withHandle?: boolean;
+		/** Draw the divider line. Off leaves only the grip, for panes that already have edges. */
+		line?: boolean;
 	} = $props();
 </script>
 
@@ -16,14 +19,15 @@
 	bind:ref
 	data-slot="resizable-handle"
 	class={cn(
-		'cn-resizable-handle group/handle after:inset-y-0 after:w-1 data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:translate-x-0 relative flex w-px items-center justify-center bg-border after:absolute after:left-1/2 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90',
+		'group/handle after:inset-y-0 after:w-1 data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:translate-x-0 relative flex w-px items-center justify-center after:absolute after:left-1/2 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90',
+		line ? 'bg-border' : 'bg-transparent',
 		className
 	)}
 	{...restProps}
 >
 	{#if withHandle}
 		<div
-			class="h-10 w-1 z-10 flex shrink-0 rounded-lg bg-border transition-[background-color,transform] duration-150 group-hover/handle:scale-y-110 group-hover/handle:bg-foreground/40 group-active/handle:bg-foreground/60"
+			class="h-10 w-1 z-10 flex shrink-0 rounded-lg bg-border transition duration-150 group-hover/handle:scale-y-110 group-hover/handle:bg-foreground/40 group-active/handle:bg-foreground/60"
 		></div>
 	{/if}
 </ResizablePrimitive.PaneResizer>

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

@@ -2,6 +2,8 @@ import * as ResizablePrimitive from 'paneforge';
 import { type WithoutChildrenOrChild } from '../../../utils.js';
 type $$ComponentProps = WithoutChildrenOrChild<ResizablePrimitive.PaneResizerProps> & {
     withHandle?: boolean;
+    /** Draw the divider line. Off leaves only the grip, for panes that already have edges. */
+    line?: boolean;
 };
 declare const ResizableHandle: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type ResizableHandle = ReturnType<typeof ResizableHandle>;

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

@@ -16,9 +16,6 @@
 	bind:ref
 	bind:this={paneGroup}
 	data-slot="resizable-pane-group"
-	class={cn(
-		'cn-resizable-panel-group flex h-full w-full data-[direction=vertical]:flex-col',
-		className
-	)}
+	class={cn('flex h-full w-full data-[direction=vertical]:flex-col', className)}
 	{...restProps}
 />

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

@@ -29,7 +29,7 @@
 	<ScrollAreaPrimitive.Viewport
 		bind:ref={viewportRef}
 		data-slot="scroll-area-viewport"
-		class="size-full rounded-[inherit] ring-ring/10 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 dark:ring-ring/20 dark:outline-ring/40"
+		class="size-full rounded-inherit ring-ring/10 outline-ring transition focus-visible:ring-4 focus-visible:outline-1 dark:ring-ring/20"
 	>
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>

package/dist/components/primitives/search/search.svelte

@@ -45,8 +45,8 @@
 		{placeholder}
 		data-slot="input"
 		class={cn(
-			'h-9 min-w-0 px-3 py-1 text-base shadow-xs md:text-sm flex w-full rounded-md border border-input bg-background ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
-			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'h-9 min-w-0 px-3 py-1 text-base shadow-xs md:text-sm flex w-full rounded-md border border-input bg-background ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+			'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring',
 			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			'pl-9 pr-12',
 			className
@@ -65,7 +65,7 @@
 	{:else if badge !== undefined}
 		<span
 			class={cn(
-				'right-3 font-mono absolute top-1/2 -translate-y-1/2 text-[12px] text-muted-foreground',
+				'right-3 font-mono text-xs absolute top-1/2 -translate-y-1/2 text-muted-foreground',
 				badgeClass
 			)}
 		>

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

@@ -22,7 +22,7 @@
 		{sideOffset}
 		data-slot="select-content"
 		class={cn(
-			'shadow-md data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground',
+			'shadow-md data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 min-w-32 relative z-50 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground',
 			className
 		)}
 		{...restProps}

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

@@ -19,7 +19,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"gap-2 px-3 py-2 text-sm shadow-xs data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between rounded-md border border-input bg-transparent whitespace-nowrap transition-[color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		"gap-2 px-3 py-2 text-sm shadow-xs data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between rounded-md border border-input bg-transparent whitespace-nowrap transition outline-none select-none 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 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
 		className
 	)}
 	{...restProps}

package/dist/components/primitives/severity.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'svelte';
+/** How serious a message is. Every status icon, callout and issue row takes its look from here. */
+export type Severity = 'error' | 'warning' | 'info' | 'success' | 'note';
+export declare const SEVERITY_ICON: Record<Severity, Component>;
+export declare const SEVERITY_TEXT: Record<Severity, string>;
+/** Most severe first, for sorting mixed lists. */
+export declare const SEVERITY_ORDER: readonly Severity[];

package/dist/components/primitives/severity.js

@@ -0,0 +1,19 @@
+import { CircleAlert, CircleCheck, Info, Lightbulb, TriangleAlert } from '@lucide/svelte';
+export const SEVERITY_ICON = {
+    error: CircleAlert,
+    warning: TriangleAlert,
+    info: Info,
+    success: CircleCheck,
+    note: Lightbulb
+};
+// Written out, never built from the key: Tailwind scans source text, so a constructed class
+// name is never emitted and the icon would render colourless.
+export const SEVERITY_TEXT = {
+    error: 'text-destructive',
+    warning: 'text-warning',
+    info: 'text-info',
+    success: 'text-success',
+    note: 'text-muted-foreground'
+};
+/** Most severe first, for sorting mixed lists. */
+export const SEVERITY_ORDER = ['error', 'warning', 'info', 'success', 'note'];

package/dist/components/primitives/slider/slider.svelte

@@ -7,8 +7,12 @@
 		value = $bindable(),
 		orientation = 'horizontal',
 		class: className,
+		thumbLabelledby,
 		...restProps
-	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<SliderPrimitive.RootProps> & {
+		/** Id of the element naming the thumbs, which carry the slider role. */
+		thumbLabelledby?: string;
+	} = $props();
 </script>
 
 <!--
@@ -31,7 +35,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 			data-orientation={orientation}
 			data-slot="slider-track"
 			class={cn(
-				'bg-neutral-200 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 relative grow overflow-hidden rounded-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full dark:bg-muted'
+				'data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 relative grow overflow-hidden rounded-full bg-input data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full dark:bg-foreground/15'
 			)}
 		>
 			<SliderPrimitive.Range
@@ -45,7 +49,8 @@ get along, so we shut typescript up by casting `value` to `never`.
 			<SliderPrimitive.Thumb
 				data-slot="slider-thumb"
 				index={thumb}
-				class="size-4 shadow-sm block shrink-0 rounded-full border border-primary bg-background ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+				aria-labelledby={thumbLabelledby}
+				class="size-4 shadow-sm block shrink-0 rounded-full border border-primary bg-background ring-ring/50 transition hover:ring-4 focus-visible:ring-4 focus-visible:ring-ring focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}