@dryui/ui 0.3.0 → 0.4.0

package/dist/combobox/combobox-item.svelte

@@ -28,17 +28,9 @@
 	const isSelected = $derived(ctx.value === value);
 	const isHighlighted = $derived(ctx.activeIndex === index);
 
-	let el = $state<HTMLDivElement>();
-
-	$effect(() => {
-		if (isHighlighted && el) {
-			el.scrollIntoView({ block: 'nearest' });
-		}
-	});
-
 	function handleClick(e: MouseEvent & { currentTarget: HTMLDivElement }) {
 		if (disabled) return;
-		const text = el?.textContent?.trim() ?? '';
+		const text = e.currentTarget.textContent?.trim() ?? '';
 		ctx.select(value, text);
 		ctx.close();
 		ctx.inputEl?.focus();
@@ -49,17 +41,21 @@
 		if (disabled) return;
 		if (e.key === 'Enter' || e.key === ' ') {
 			e.preventDefault();
-			const text = el?.textContent?.trim() ?? '';
+			const text = e.currentTarget.textContent?.trim() ?? '';
 			ctx.select(value, text);
 			ctx.close();
 			ctx.inputEl?.focus();
 		}
 		if (onkeydown) (onkeydown as (e: KeyboardEvent & { currentTarget: HTMLDivElement }) => void)(e);
 	}
+
+	function keepHighlightedItemVisible(node: HTMLDivElement) {
+		node.scrollIntoView({ block: 'nearest' });
+	}
 </script>
 
 <div
-	bind:this={el}
+	{@attach isHighlighted && keepHighlightedItemVisible}
 	role="option"
 	id={`${ctx.contentId}-item-${index}`}
 	tabindex={disabled ? undefined : -1}
@@ -82,12 +78,17 @@
 
 <style>
 	[data-combobox-item] {
+		--dry-combobox-item-radius: min(
+			var(--dry-control-radius, var(--dry-radius-sm)),
+			var(--dry-space-4)
+		);
+
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
 		align-items: center;
 		padding: var(--dry-space-2) var(--dry-space-3);
-		border-radius: var(--dry-radius-sm);
+		border-radius: var(--dry-combobox-item-radius);
 		font-size: var(--dry-type-small-size);
 		cursor: pointer;
 		user-select: none;

package/dist/combobox/combobox-item.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	value: string;
-	index: number;
-	disabled?: boolean;
-	icon?: Snippet;
-	children: Snippet;
+    value: string;
+    index: number;
+    disabled?: boolean;
+    icon?: Snippet;
+    children: Snippet;
 }
-declare const ComboboxItem: import('svelte').Component<Props, {}, ''>;
+declare const ComboboxItem: import("svelte").Component<Props, {}, "">;
 type ComboboxItem = ReturnType<typeof ComboboxItem>;
 export default ComboboxItem;

package/dist/combobox/index.d.ts

@@ -9,7 +9,7 @@ export interface ComboboxGroupProps extends HTMLAttributes<HTMLDivElement> {
     label: string;
     children: Snippet;
 }
-import ComboboxRoot from './combobox-root.svelte';
+import ComboboxRoot from './combobox-input-root.svelte';
 import ComboboxInput from './combobox-input.svelte';
 import ComboboxContent from './combobox-content.svelte';
 import ComboboxItem from './combobox-item.svelte';

package/dist/combobox/index.js

@@ -1,4 +1,4 @@
-import ComboboxRoot from './combobox-root.svelte';
+import ComboboxRoot from './combobox-input-root.svelte';
 import ComboboxInput from './combobox-input.svelte';
 import ComboboxContent from './combobox-content.svelte';
 import ComboboxItem from './combobox-item.svelte';

package/dist/command-palette/command-palette-dialog-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDialogElement> {
+    open?: boolean;
+    children: Snippet;
+}
+declare const CommandPaletteDialogRoot: import("svelte").Component<Props, {}, "open">;
+type CommandPaletteDialogRoot = ReturnType<typeof CommandPaletteDialogRoot>;
+export default CommandPaletteDialogRoot;

package/dist/command-palette/command-palette-empty.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const CommandPaletteEmpty: import('svelte').Component<Props, {}, ''>;
+declare const CommandPaletteEmpty: import("svelte").Component<Props, {}, "">;
 type CommandPaletteEmpty = ReturnType<typeof CommandPaletteEmpty>;
 export default CommandPaletteEmpty;

package/dist/command-palette/command-palette-group.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	heading?: string;
-	children: Snippet;
+    heading?: string;
+    children: Snippet;
 }
-declare const CommandPaletteGroup: import('svelte').Component<Props, {}, ''>;
+declare const CommandPaletteGroup: import("svelte").Component<Props, {}, "">;
 type CommandPaletteGroup = ReturnType<typeof CommandPaletteGroup>;
 export default CommandPaletteGroup;

package/dist/command-palette/command-palette-input.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends HTMLInputAttributes {
-	placeholder?: string;
+    placeholder?: string;
 }
-declare const CommandPaletteInput: import('svelte').Component<Props, {}, ''>;
+declare const CommandPaletteInput: import("svelte").Component<Props, {}, "">;
 type CommandPaletteInput = ReturnType<typeof CommandPaletteInput>;
 export default CommandPaletteInput;

package/dist/command-palette/command-palette-item.svelte

@@ -16,25 +16,21 @@
 	const ctx = getCommandPaletteCtx();
 	const id = generateFormId('cmd-item');
 
-	let el = $state<HTMLElement>();
-
 	let visible = $derived.by(() => {
 		const q = ctx.query.toLowerCase().trim();
 		if (!q) return true;
 		return value.toLowerCase().includes(q);
 	});
 
-	$effect(() => {
-		if (el) {
-			ctx.registerItem(id, el);
-			return () => ctx.unregisterItem(id);
-		}
-	});
+	function attachItem(node: HTMLDivElement) {
+		ctx.registerItem(id, node);
+		return () => ctx.unregisterItem(id);
+	}
 </script>
 
 {#if visible}
 	<div
-		bind:this={el}
+		{@attach attachItem}
 		{id}
 		role="option"
 		data-command-palette-item
@@ -62,13 +58,15 @@
 
 <style>
 	[data-command-palette-item] {
+		--dry-cmd-item-radius: min(var(--dry-control-radius, var(--dry-radius-sm)), var(--dry-space-4));
+
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: max-content;
 		align-items: center;
 		gap: var(--dry-space-2);
 		padding: var(--dry-space-2_5) var(--dry-space-2);
-		border-radius: var(--dry-radius-sm);
+		border-radius: var(--dry-cmd-item-radius);
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		cursor: pointer;
 		color: var(--dry-color-text-strong);

package/dist/command-palette/command-palette-item.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	value: string;
-	disabled?: boolean;
-	onSelect?: () => void;
-	children: Snippet;
+    value: string;
+    disabled?: boolean;
+    onSelect?: () => void;
+    children: Snippet;
 }
-declare const CommandPaletteItem: import('svelte').Component<Props, {}, ''>;
+declare const CommandPaletteItem: import("svelte").Component<Props, {}, "">;
 type CommandPaletteItem = ReturnType<typeof CommandPaletteItem>;
 export default CommandPaletteItem;

package/dist/command-palette/command-palette-list.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const CommandPaletteList: import('svelte').Component<Props, {}, ''>;
+declare const CommandPaletteList: import("svelte").Component<Props, {}, "">;
 type CommandPaletteList = ReturnType<typeof CommandPaletteList>;
 export default CommandPaletteList;

package/dist/command-palette/command-palette-separator.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {}
-declare const CommandPaletteSeparator: import('svelte').Component<Props, {}, ''>;
+interface Props extends HTMLAttributes<HTMLDivElement> {
+}
+declare const CommandPaletteSeparator: import("svelte").Component<Props, {}, "">;
 type CommandPaletteSeparator = ReturnType<typeof CommandPaletteSeparator>;
 export default CommandPaletteSeparator;

package/dist/command-palette/index.d.ts

@@ -1,5 +1,5 @@
 export type { CommandPaletteRootProps, CommandPaletteInputProps, CommandPaletteListProps, CommandPaletteGroupProps, CommandPaletteItemProps, CommandPaletteEmptyProps, CommandPaletteSeparatorProps } from '@dryui/primitives';
-import CommandPaletteRoot from './command-palette-root.svelte';
+import CommandPaletteRoot from './command-palette-dialog-root.svelte';
 import CommandPaletteInput from './command-palette-input.svelte';
 import CommandPaletteList from './command-palette-list.svelte';
 import CommandPaletteGroup from './command-palette-group.svelte';

package/dist/command-palette/index.js

@@ -1,4 +1,4 @@
-import CommandPaletteRoot from './command-palette-root.svelte';
+import CommandPaletteRoot from './command-palette-dialog-root.svelte';
 import CommandPaletteInput from './command-palette-input.svelte';
 import CommandPaletteList from './command-palette-list.svelte';
 import CommandPaletteGroup from './command-palette-group.svelte';

package/dist/container/container.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
-	padding?: boolean;
-	children: Snippet;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    padding?: boolean;
+    children: Snippet;
 }
-declare const Container: import('svelte').Component<Props, {}, ''>;
+declare const Container: import("svelte").Component<Props, {}, "">;
 type Container = ReturnType<typeof Container>;
 export default Container;

package/dist/context-menu/context-menu-content.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const ContextMenuContent: import('svelte').Component<Props, {}, ''>;
+declare const ContextMenuContent: import("svelte").Component<Props, {}, "">;
 type ContextMenuContent = ReturnType<typeof ContextMenuContent>;
 export default ContextMenuContent;

package/dist/context-menu/context-menu-group.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const ContextMenuGroup: import('svelte').Component<Props, {}, ''>;
+declare const ContextMenuGroup: import("svelte").Component<Props, {}, "">;
 type ContextMenuGroup = ReturnType<typeof ContextMenuGroup>;
 export default ContextMenuGroup;

package/dist/context-menu/context-menu-item.svelte

@@ -50,7 +50,10 @@
 		align-items: center;
 		gap: var(--dry-space-2);
 		padding: var(--dry-menu-item-padding, var(--dry-space-2_5) var(--dry-space-2));
-		border-radius: var(--dry-radius-sm);
+		border-radius: var(
+			--dry-menu-item-radius,
+			min(var(--dry-control-radius, var(--dry-radius-sm)), var(--dry-space-4))
+		);
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		cursor: pointer;
 		user-select: none;

package/dist/context-menu/context-menu-item.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	disabled?: boolean;
-	children: Snippet;
+    disabled?: boolean;
+    children: Snippet;
 }
-declare const ContextMenuItem: import('svelte').Component<Props, {}, ''>;
+declare const ContextMenuItem: import("svelte").Component<Props, {}, "">;
 type ContextMenuItem = ReturnType<typeof ContextMenuItem>;
 export default ContextMenuItem;

package/dist/context-menu/context-menu-label.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const ContextMenuLabel: import('svelte').Component<Props, {}, ''>;
+declare const ContextMenuLabel: import("svelte").Component<Props, {}, "">;
 type ContextMenuLabel = ReturnType<typeof ContextMenuLabel>;
 export default ContextMenuLabel;

package/dist/context-menu/context-menu-root.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 interface Props {
-	open?: boolean;
-	children: Snippet;
+    open?: boolean;
+    children: Snippet;
 }
-declare const ContextMenuRoot: import('svelte').Component<Props, {}, 'open'>;
+declare const ContextMenuRoot: import("svelte").Component<Props, {}, "open">;
 type ContextMenuRoot = ReturnType<typeof ContextMenuRoot>;
 export default ContextMenuRoot;

package/dist/context-menu/context-menu-separator.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {}
-declare const ContextMenuSeparator: import('svelte').Component<Props, {}, ''>;
+interface Props extends HTMLAttributes<HTMLDivElement> {
+}
+declare const ContextMenuSeparator: import("svelte").Component<Props, {}, "">;
 type ContextMenuSeparator = ReturnType<typeof ContextMenuSeparator>;
 export default ContextMenuSeparator;

package/dist/context-menu/context-menu-trigger.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
-	children: Snippet;
+    children: Snippet;
 }
-declare const ContextMenuTrigger: import('svelte').Component<Props, {}, ''>;
+declare const ContextMenuTrigger: import("svelte").Component<Props, {}, "">;
 type ContextMenuTrigger = ReturnType<typeof ContextMenuTrigger>;
 export default ContextMenuTrigger;

package/dist/country-select/{country-select.svelte → country-select-button-input.svelte}

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
 
 	interface CountryOption {
 		code: string;
@@ -214,7 +215,8 @@
 
 <span data-country-select-wrapper class={className}>
 	<div data-part="country-select" {...rest}>
-		<button
+		<Button
+			variant="outline"
 			type="button"
 			data-part="trigger"
 			{disabled}
@@ -233,7 +235,7 @@
 			{:else}
 				<span data-part="placeholder">{placeholder}</span>
 			{/if}
-		</button>
+		</Button>
 
 		{#if open}
 			<div data-part="dropdown" role="listbox" aria-label="Countries">
@@ -245,7 +247,8 @@
 					aria-label="Search countries"
 				/>
 				{#each searchResults as country (country.code)}
-					<button
+					<Button
+						variant="trigger"
 						type="button"
 						role="option"
 						data-part="option"
@@ -258,7 +261,7 @@
 						{#if showDialCode}
 							<span data-part="dial-code">{country.dialCode}</span>
 						{/if}
-					</button>
+					</Button>
 				{/each}
 			</div>
 		{/if}
@@ -276,44 +279,6 @@
 		grid-template-columns: minmax(12rem, max-content);
 	}
 
-	[data-country-select-wrapper] [data-part='trigger'] {
-		all: unset;
-		display: grid;
-		grid-template-columns: auto 1fr auto;
-		align-items: center;
-		gap: var(--dry-space-2, 0.5rem);
-		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
-		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
-		border-radius: var(--dry-radius-md, 0.375rem);
-		background: var(--dry-color-bg-raised, #ffffff);
-		font-size: var(--dry-type-ui-control-size, var(--dry-text-sm-size, 0.875rem));
-		cursor: pointer;
-		transition:
-			border-color var(--dry-duration-fast, 100ms) ease,
-			box-shadow var(--dry-duration-fast, 100ms) ease;
-	}
-
-	[data-country-select-wrapper] [data-part='trigger']:hover {
-		border-color: var(--dry-color-stroke-strong, #cbd5e1);
-	}
-
-	[data-country-select-wrapper] [data-part='trigger']:focus-visible {
-		border-color: var(--dry-color-stroke-focus);
-		box-shadow: 0 0 0 2px var(--dry-color-stroke-focus);
-	}
-
-	[data-country-select-wrapper] [data-part='flag'] {
-		line-height: 1;
-	}
-
-	[data-country-select-wrapper] [data-part='dial-code'] {
-		color: var(--dry-color-text-weak, #64748b);
-	}
-
-	[data-country-select-wrapper] [data-part='placeholder'] {
-		color: var(--dry-color-text-weak, #94a3b8);
-	}
-
 	[data-country-select-wrapper] [data-part='dropdown'] {
 		position: absolute;
 		top: 100%;
@@ -322,44 +287,23 @@
 		z-index: 50;
 		display: grid;
 		margin-top: var(--dry-space-1, 0.25rem);
-		background: var(--dry-color-bg-raised, #ffffff);
-		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
-		border-radius: var(--dry-radius-md, 0.375rem);
+		background: var(--dry-color-bg-raised);
+		border: 1px solid var(--dry-color-stroke-weak);
+		border-radius: var(--dry-radius-md);
 		box-shadow: var(--dry-shadow-lg);
 		max-height: 16rem;
 		overflow-y: auto;
 	}
 
 	[data-country-select-wrapper] [data-part='search'] {
-		all: unset;
-		display: grid;
-		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
-		font-size: var(--dry-type-ui-control-size, var(--dry-text-sm-size, 0.875rem));
-		border-bottom: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
+		padding: var(--dry-space-2) var(--dry-space-3);
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size);
+		background: transparent;
+		color: var(--dry-color-text-strong);
+		border: none;
+		border-bottom: 1px solid var(--dry-color-stroke-weak);
+		outline: none;
 		box-sizing: border-box;
 	}
-
-	[data-country-select-wrapper] [data-part='option'] {
-		all: unset;
-		display: grid;
-		grid-template-columns: auto 1fr auto;
-		align-items: center;
-		gap: var(--dry-space-2, 0.5rem);
-		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
-		font-size: var(--dry-type-ui-control-size, var(--dry-text-sm-size, 0.875rem));
-		cursor: pointer;
-		box-sizing: border-box;
-		transition: background var(--dry-duration-fast, 100ms) ease;
-	}
-
-	[data-country-select-wrapper] [data-part='option']:hover {
-		background: var(--dry-color-fill);
-	}
-
-	[data-country-select-wrapper] [data-part='option'][data-selected] {
-		background: var(--dry-color-fill-brand-weak);
-		color: var(--dry-color-text-brand);
-		box-shadow: inset 0 0 0 1px var(--dry-color-stroke-selected);
-		font-weight: 500;
-	}
 </style>

package/dist/country-select/country-select-button-input.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
+    value?: string;
+    regions?: string[];
+    showDialCode?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    name?: string;
+    onchange?: (code: string) => void;
+    children?: Snippet;
+}
+declare const CountrySelectButtonInput: import("svelte").Component<Props, {}, "value">;
+type CountrySelectButtonInput = ReturnType<typeof CountrySelectButtonInput>;
+export default CountrySelectButtonInput;

package/dist/country-select/index.d.ts

@@ -1,2 +1,2 @@
 export type { CountrySelectProps } from '@dryui/primitives';
-export { default as CountrySelect } from './country-select.svelte';
+export { default as CountrySelect } from './country-select-button-input.svelte';

package/dist/country-select/index.js

@@ -1 +1 @@
-export { default as CountrySelect } from './country-select.svelte';
+export { default as CountrySelect } from './country-select-button-input.svelte';

package/dist/data-grid/data-grid-body.svelte.d.ts

@@ -1,43 +1,30 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 declare function $$render<T = unknown>(): {
-	props: Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
-		children: Snippet<
-			[
-				{
-					items: T[];
-					page: number;
-				}
-			]
-		>;
-	};
-	exports: {};
-	bindings: '';
-	slots: {};
-	events: {};
+    props: Omit<HTMLAttributes<HTMLTableSectionElement>, "children"> & {
+        children: Snippet<[{
+            items: T[];
+            page: number;
+        }]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
 };
 declare class __sveltets_Render<T = unknown> {
-	props(): ReturnType<typeof $$render<T>>['props'];
-	events(): ReturnType<typeof $$render<T>>['events'];
-	slots(): ReturnType<typeof $$render<T>>['slots'];
-	bindings(): '';
-	exports(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
 interface $$IsomorphicComponent {
-	new <T = unknown>(
-		options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>
-	): import('svelte').SvelteComponent<
-		ReturnType<__sveltets_Render<T>['props']>,
-		ReturnType<__sveltets_Render<T>['events']>,
-		ReturnType<__sveltets_Render<T>['slots']>
-	> & {
-		$$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-	} & ReturnType<__sveltets_Render<T>['exports']>;
-	<T = unknown>(
-		internal: unknown,
-		props: ReturnType<__sveltets_Render<T>['props']> & {}
-	): ReturnType<__sveltets_Render<T>['exports']>;
-	z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DataGridBody: $$IsomorphicComponent;
 type DataGridBody<T = unknown> = InstanceType<typeof DataGridBody<T>>;

package/dist/data-grid/data-grid-button-expand-trigger.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getDataGridCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLButtonElement> {
+		rowId: string;
+		children?: Snippet;
+	}
+
+	let { rowId, children, ...rest }: Props = $props();
+
+	const ctx = getDataGridCtx();
+
+	let expanded = $derived(ctx.isExpanded(rowId));
+</script>
+
+<Button
+	variant="trigger"
+	size="icon-sm"
+	type="button"
+	data-expanded={expanded ? '' : undefined}
+	aria-expanded={expanded}
+	aria-label={expanded ? 'Collapse row' : 'Expand row'}
+	onclick={() => ctx.toggleExpand(rowId)}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<span class="chevron" class:open={expanded} aria-hidden="true">&#9654;</span>
+	{/if}
+</Button>
+
+<style>
+	.chevron {
+		display: inline-grid;
+		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	.chevron.open {
+		transform: rotate(90deg);
+	}
+</style>