@poodle64/ui 2026.8.15 → 2026.9.0

package/dist/components/ui/form/form-element-field.svelte.d.ts

@@ -0,0 +1,28 @@
+import * as FormPrimitive from 'formsnap';
+import type { FormPathLeaves } from 'sveltekit-superforms';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils.js';
+declare function $$render<T extends Record<string, unknown>, U extends FormPathLeaves<T>>(): {
+    props: Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children"> & FormPrimitive.ElementFieldProps<T, U, any>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPathLeaves<T>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPathLeaves<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPathLeaves<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FormElementField: $$IsomorphicComponent;
+type FormElementField<T extends Record<string, unknown>, U extends FormPathLeaves<T>> = InstanceType<typeof FormElementField<T, U>>;
+export default FormElementField;

package/dist/components/ui/form/form-field-errors.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import * as FormPrimitive from 'formsnap';
+	import { cn } from '../../../utils.js';
+	import type { WithoutChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		errorClasses,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<FormPrimitive.FieldErrorsProps> & {
+		errorClasses?: string | undefined | null;
+	} = $props();
+</script>
+
+<FormPrimitive.FieldErrors
+	bind:ref
+	class={cn('text-destructive text-sm font-medium', className)}
+	{...restProps}
+>
+	{#snippet children({ errors, errorProps })}
+		{#if childrenProp}
+			{@render childrenProp({ errors, errorProps })}
+		{:else}
+			{#each errors as error (error)}
+				<div {...errorProps} class={cn(errorClasses)}>{error}</div>
+			{/each}
+		{/if}
+	{/snippet}
+</FormPrimitive.FieldErrors>

package/dist/components/ui/form/form-field-errors.svelte.d.ts

@@ -0,0 +1,8 @@
+import * as FormPrimitive from 'formsnap';
+import type { WithoutChild } from '../../../utils.js';
+type $$ComponentProps = WithoutChild<FormPrimitive.FieldErrorsProps> & {
+    errorClasses?: string | undefined | null;
+};
+declare const FormFieldErrors: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type FormFieldErrors = ReturnType<typeof FormFieldErrors>;
+export default FormFieldErrors;

package/dist/components/ui/form/form-field.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+	import * as FormPrimitive from 'formsnap';
+	import type { FormPath } from 'sveltekit-superforms';
+	import { cn } from '../../../utils.js';
+	import type { WithElementRef, WithoutChildren } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		children: childrenProp,
+		...restProps
+	}: FormPrimitive.FieldProps<T, U> &
+		WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<FormPrimitive.Field {form} {name}>
+	{#snippet children({ constraints, errors, tainted, value })}
+		<div bind:this={ref} data-slot="form-item" class={cn('space-y-2', className)} {...restProps}>
+			{@render childrenProp?.({ constraints, errors, tainted, value: value as T[U] })}
+		</div>
+	{/snippet}
+</FormPrimitive.Field>

package/dist/components/ui/form/form-field.svelte.d.ts

@@ -0,0 +1,28 @@
+import * as FormPrimitive from 'formsnap';
+import type { FormPath } from 'sveltekit-superforms';
+import type { WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>>(): {
+    props: FormPrimitive.FieldProps<T, U, any> & Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children">;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FormField: $$IsomorphicComponent;
+type FormField<T extends Record<string, unknown>, U extends FormPath<T>> = InstanceType<typeof FormField<T, U>>;
+export default FormField;

package/dist/components/ui/form/form-fieldset.svelte

@@ -0,0 +1,16 @@
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
+	import * as FormPrimitive from 'formsnap';
+	import type { FormPath } from 'sveltekit-superforms';
+	import { cn } from '../../../utils.js';
+	import type { WithoutChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		form,
+		name,
+		...restProps
+	}: WithoutChild<FormPrimitive.FieldsetProps<T, U>> = $props();
+</script>
+
+<FormPrimitive.Fieldset bind:ref {form} {name} class={cn('space-y-2', className)} {...restProps} />

package/dist/components/ui/form/form-fieldset.svelte.d.ts

@@ -0,0 +1,27 @@
+import * as FormPrimitive from 'formsnap';
+import type { FormPath } from 'sveltekit-superforms';
+import type { WithoutChild } from '../../../utils.js';
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>>(): {
+    props: WithoutChild<FormPrimitive.FieldsetProps<T, U>>;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
+    props(): ReturnType<typeof $$render<T, U>>['props'];
+    events(): ReturnType<typeof $$render<T, U>>['events'];
+    slots(): ReturnType<typeof $$render<T, U>>['slots'];
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const FormFieldset: $$IsomorphicComponent;
+type FormFieldset<T extends Record<string, unknown>, U extends FormPath<T>> = InstanceType<typeof FormFieldset<T, U>>;
+export default FormFieldset;

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import * as FormPrimitive from 'formsnap';
+	import { Label } from '../label/index.js';
+	import { cn } from '../../../utils.js';
+	import type { WithoutChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.LabelProps> = $props();
+</script>
+
+<FormPrimitive.Label {...restProps} bind:ref>
+	{#snippet child({ props })}
+		<Label
+			{...props}
+			data-slot="form-label"
+			class={cn('data-[fs-error]:text-destructive', className)}
+		>
+			{@render children?.()}
+		</Label>
+	{/snippet}
+</FormPrimitive.Label>

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

@@ -0,0 +1,4 @@
+import * as FormPrimitive from 'formsnap';
+declare const FormLabel: import("svelte").Component<Omit<FormPrimitive.LabelProps, "child">, {}, "ref">;
+type FormLabel = ReturnType<typeof FormLabel>;
+export default FormLabel;

package/dist/components/ui/form/form-legend.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import * as FormPrimitive from 'formsnap';
+	import { cn } from '../../../utils.js';
+	import type { WithoutChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<FormPrimitive.LegendProps> = $props();
+</script>
+
+<FormPrimitive.Legend
+	bind:ref
+	class={cn('data-[fs-error]:text-destructive text-sm leading-none font-medium', className)}
+	{...restProps}
+/>

package/dist/components/ui/form/form-legend.svelte.d.ts

@@ -0,0 +1,4 @@
+import * as FormPrimitive from 'formsnap';
+declare const FormLegend: import("svelte").Component<Omit<FormPrimitive.LegendProps, "child">, {}, "ref">;
+type FormLegend = ReturnType<typeof FormLegend>;
+export default FormLegend;

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

@@ -0,0 +1,11 @@
+import * as FormPrimitive from 'formsnap';
+import Description from './form-description.svelte';
+import Label from './form-label.svelte';
+import FieldErrors from './form-field-errors.svelte';
+import Field from './form-field.svelte';
+import Fieldset from './form-fieldset.svelte';
+import Legend from './form-legend.svelte';
+import ElementField from './form-element-field.svelte';
+import Button from './form-button.svelte';
+declare const Control: import("svelte").Component<FormPrimitive.ControlProps, {}, "">;
+export { Field, Control, Label, Button, FieldErrors, Description, Fieldset, Legend, ElementField, Field as FormField, Control as FormControl, Description as FormDescription, Label as FormLabel, FieldErrors as FormFieldErrors, Fieldset as FormFieldset, Legend as FormLegend, ElementField as FormElementField, Button as FormButton };

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

@@ -0,0 +1,13 @@
+import * as FormPrimitive from 'formsnap';
+import Description from './form-description.svelte';
+import Label from './form-label.svelte';
+import FieldErrors from './form-field-errors.svelte';
+import Field from './form-field.svelte';
+import Fieldset from './form-fieldset.svelte';
+import Legend from './form-legend.svelte';
+import ElementField from './form-element-field.svelte';
+import Button from './form-button.svelte';
+const Control = FormPrimitive.Control;
+export { Field, Control, Label, Button, FieldErrors, Description, Fieldset, Legend, ElementField, 
+//
+Field as FormField, Control as FormControl, Description as FormDescription, Label as FormLabel, FieldErrors as FormFieldErrors, Fieldset as FormFieldset, Legend as FormLegend, ElementField as FormElementField, Button as FormButton };

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

@@ -2,7 +2,7 @@ declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/e
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "hidden" | "color" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "image" | "datetime-local" | "month" | "password" | "range" | "week";
+    type?: "number" | "month" | "hidden" | "color" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "date" | "time" | "image" | "datetime-local" | "password" | "range" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;

package/dist/components/ui/page-header/page-header.svelte

@@ -27,13 +27,22 @@
 	 * of routed links, and a package with no SvelteKit runtime of its own cannot
 	 * own those (the same reasoning that makes AppShell take `currentPath` as a
 	 * prop rather than importing `$app/state`).
+	 *
+	 * `icon` and `meta` are snippets for the same reason and earn their place the
+	 * same way `breadcrumbs` did: three apps had hand-rolled the meta row and two
+	 * the icon square, one of them across 38 of its 49 page headers in a full
+	 * local reimplementation of this component. The app supplies the GLYPH and
+	 * the ITEMS; the package owns the treatment — the tinted square, its size,
+	 * and the row's spacing — because the treatment is the half that drifts.
 	 */
 	let {
 		eyebrow,
 		breadcrumbs,
+		icon,
 		title,
 		subtitle,
 		info,
+		meta,
 		actions,
 		ref = $bindable(null),
 		class: className,
@@ -43,10 +52,14 @@
 		eyebrow?: string;
 		/** The trail above the title — the app's own routed links. */
 		breadcrumbs?: Snippet;
+		/** The glyph alone. The tinted square around it is this component's. */
+		icon?: Snippet;
 		/** Omit for a header that is a breadcrumb bar with actions. */
 		title?: string;
 		subtitle?: string;
 		info?: string;
+		/** Facts about the page, under the title: badges, dates, a status. */
+		meta?: Snippet;
 		actions?: Snippet;
 	} = $props();
 </script>
@@ -56,43 +69,67 @@
 	class={cn('mb-6 flex flex-wrap items-start justify-between gap-4', className)}
 	{...restProps}
 >
-	<div class="min-w-0">
-		{#if breadcrumbs}
-			<div class="text-muted-foreground mb-1.5 flex min-w-0 items-center text-sm">
-				{@render breadcrumbs()}
-			</div>
-		{/if}
-		{#if eyebrow}
-			<div class="text-primary text-2xs tracking-eyebrow mb-1 font-medium uppercase">
-				{eyebrow}
-			</div>
+	<div class="flex min-w-0 items-start gap-3">
+		{#if icon}
+			<!-- aria-hidden: the glyph restates the title beside it, so a reader
+			     already has the fact. `shrink-0` so it never collapses when the
+			     title is long, and the square is the package's rather than the
+			     app's precisely so two apps cannot pick two sizes for it. -->
+			<span
+				class="bg-primary/10 text-primary mt-0.5 inline-flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg]:size-5"
+				aria-hidden="true"
+			>
+				{@render icon()}
+			</span>
 		{/if}
-		{#if title}
-			<div class="flex items-center gap-2">
-				<h1 class="font-display text-display leading-tight font-semibold tracking-[-0.02em]">
-					{title}
-				</h1>
-				{#if info}
+		<div class="min-w-0">
+			{#if breadcrumbs}
+				<div class="text-muted-foreground mb-1.5 flex min-w-0 items-center text-sm">
+					{@render breadcrumbs()}
+				</div>
+			{/if}
+			{#if eyebrow}
+				<div class="text-primary text-2xs tracking-eyebrow mb-1 font-medium uppercase">
+					{eyebrow}
+				</div>
+			{/if}
+			{#if title}
+				<div class="flex items-center gap-2">
+					<h1 class="font-display text-display leading-tight font-semibold tracking-[-0.02em]">
+						{title}
+					</h1>
+					{#if info}
+						<InfoTip
+							text={info}
+							class="text-muted-foreground/50 hover:text-muted-foreground mt-0.5 size-4 transition-colors"
+						/>
+					{/if}
+				</div>
+			{:else if info}
+				<!-- Title-less, but the page still has something to explain. The tip
+				     keeps a row of its own rather than being dropped along with the
+				     heading it usually sits beside. -->
+				<div class="flex items-center gap-2">
 					<InfoTip
 						text={info}
-						class="text-muted-foreground/50 hover:text-muted-foreground mt-0.5 size-4 transition-colors"
+						class="text-muted-foreground/50 hover:text-muted-foreground size-4 transition-colors"
 					/>
-				{/if}
-			</div>
-		{:else if info}
-			<!-- Title-less, but the page still has something to explain. The tip
-			     keeps a row of its own rather than being dropped along with the
-			     heading it usually sits beside. -->
-			<div class="flex items-center gap-2">
-				<InfoTip
-					text={info}
-					class="text-muted-foreground/50 hover:text-muted-foreground size-4 transition-colors"
-				/>
-			</div>
-		{/if}
-		{#if subtitle}
-			<p class="text-muted-foreground mt-1.5 line-clamp-1 max-w-4xl text-sm">{subtitle}</p>
-		{/if}
+				</div>
+			{/if}
+			{#if subtitle}
+				<p class="text-muted-foreground mt-1.5 line-clamp-1 max-w-4xl text-sm">{subtitle}</p>
+			{/if}
+			{#if meta}
+				<!-- `min-w-0` for the reason the actions row carries it: this is a flex
+				     item and would otherwise floor at its own min-content width, which
+				     wrapping cannot get below. -->
+				<div
+					class="text-muted-foreground mt-2 flex min-w-0 flex-wrap items-center gap-x-4 gap-y-1.5 text-xs"
+				>
+					{@render meta()}
+				</div>
+			{/if}
+		</div>
 	</div>
 	{#if actions}
 		<!--

package/dist/components/ui/page-header/page-header.svelte.d.ts

@@ -6,10 +6,14 @@ type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     eyebrow?: string;
     /** The trail above the title — the app's own routed links. */
     breadcrumbs?: Snippet;
+    /** The glyph alone. The tinted square around it is this component's. */
+    icon?: Snippet;
     /** Omit for a header that is a breadcrumb bar with actions. */
     title?: string;
     subtitle?: string;
     info?: string;
+    /** Facts about the page, under the title: badges, dates, a status. */
+    meta?: Snippet;
     actions?: Snippet;
 };
 declare const PageHeader: import("svelte").Component<$$ComponentProps, {}, "ref">;

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

@@ -1,2 +1,2 @@
-import Root from './switch.svelte';
-export { Root, Root as Switch };
+import Root, { type SwitchSize } from './switch.svelte';
+export { Root, Root as Switch, type SwitchSize };

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

@@ -1,4 +1,4 @@
-import Root from './switch.svelte';
+import Root, {} from './switch.svelte';
 export { Root, 
 //
 Root as Switch };

package/dist/components/ui/switch/switch.svelte

@@ -1,3 +1,8 @@
+<script lang="ts" module>
+	/** The two track sizes. `sm` lines up with a `size="sm"` control row. */
+	export type SwitchSize = 'default' | 'sm';
+</script>
+
 <script lang="ts">
 	import { Switch as SwitchPrimitive } from 'bits-ui';
 	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
@@ -5,9 +10,23 @@
 	let {
 		ref = $bindable(null),
 		checked = $bindable(false),
+		size = 'default',
 		class: className,
 		...restProps
-	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & { size?: SwitchSize } = $props();
+
+	// Track, thumb and travel are one decision, so they are one table rather
+	// than three prop reads at three call sites. The travel is not a picked
+	// number: the track carries a 2px transparent border, so the thumb's run is
+	// (width - 4) - thumb, which is 16px on the default and 12px on `sm`.
+	const TRACK = {
+		default: 'h-5 w-9',
+		sm: 'h-4 w-7'
+	} as const;
+	const THUMB = {
+		default: 'size-4 data-checked:translate-x-4',
+		sm: 'size-3 data-checked:translate-x-3'
+	} as const;
 </script>
 
 <!--
@@ -17,23 +36,37 @@
   ball stays light on the dark-first theme. The track colour comes from the
   project tokens. An app with a non-standard root font-size (a dense console
   running an 18px root, say) compensates in its own override layer, not here.
+
+  The track is 20px tall (16px at `sm`), under WCAG 2.5.8's 24px minimum, so a
+  transparent `::after` skirt lifts the pointer target over it. It grows the
+  BLOCK axis only: the track is already 36px wide, so there is nothing to win
+  horizontally and an inline skirt would reach into the label beside it.
+
+  The skirt is inset from the PADDING box, and this track carries a 2px
+  transparent border, so its real reach is the inset minus 2 on each side —
+  which is why the number here is not the number in the target. The target is
+  measured in `harness/drive.mjs`, not calculated.
 -->
 <SwitchPrimitive.Root
 	bind:ref
 	bind:checked
 	class={cn(
-		'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
+		'peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
+		'after:absolute after:inset-x-0 after:-inset-y-2',
 		'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+		'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:ring-3',
 		'disabled:cursor-not-allowed disabled:opacity-50',
-		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+		'data-checked:bg-primary data-unchecked:bg-input',
+		TRACK[size],
 		className
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		class={cn(
-			'bg-background dark:bg-foreground pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform',
-			'data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+			'bg-background dark:bg-foreground pointer-events-none block rounded-full shadow-lg ring-0 transition-transform',
+			'data-unchecked:translate-x-0',
+			THUMB[size]
 		)}
 	/>
 </SwitchPrimitive.Root>

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

@@ -1,4 +1,10 @@
+/** The two track sizes. `sm` lines up with a `size="sm"` control row. */
+export type SwitchSize = 'default' | 'sm';
 import { Switch as SwitchPrimitive } from 'bits-ui';
-declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked">;
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+type $$ComponentProps = WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+    size?: SwitchSize;
+};
+declare const Switch: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

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

@@ -9,7 +9,7 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"data-active:bg-background dark:data-active:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:data-active:border-input dark:data-active:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-active:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}