@dryui/ui 0.3.0 → 0.4.0

package/dist/chip/chip.svelte

@@ -1,327 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-	import { resolveAlias } from '../internal/color-aliases.js';
-	import type { ChipColor } from './index.js';
-
-	interface SharedProps {
-		selected?: boolean;
-		disabled?: boolean;
-		variant?: 'solid' | 'outline' | 'soft';
-		color?: ChipColor;
-		size?: 'sm' | 'md';
-		href?: string;
-		rel?: string;
-		target?: string;
-		download?: boolean | string;
-		type?: 'button' | 'submit' | 'reset';
-		onclick?: (event: MouseEvent) => void;
-		children: Snippet;
-	}
-
-	type RestProps = Omit<HTMLButtonAttributes, 'type' | 'disabled' | 'onclick' | 'children'> &
-		Omit<
-			HTMLAnchorAttributes,
-			'href' | 'rel' | 'target' | 'download' | 'type' | 'onclick' | 'children'
-		>;
-
-	type Props = SharedProps & RestProps;
-
-	let {
-		selected,
-		disabled,
-		variant = 'soft',
-		color = 'gray',
-		size = 'sm',
-		class: className,
-		href,
-		rel,
-		target,
-		download,
-		type = 'button',
-		onclick,
-		children,
-		...rest
-	}: Props = $props();
-
-	const resolvedColor = $derived(resolveAlias(color, 'gray'));
-
-	function handleLinkClick(event: MouseEvent) {
-		if (disabled) {
-			event.preventDefault();
-			event.stopPropagation();
-			return;
-		}
-
-		onclick?.(event);
-	}
-</script>
-
-<span data-chip-wrapper>
-	{#if href !== undefined}
-		<a
-			{...rest as Record<string, unknown>}
-			data-chip
-			data-variant={variant}
-			data-color={resolvedColor}
-			data-size={size}
-			href={disabled ? undefined : href}
-			{rel}
-			{target}
-			{download}
-			aria-disabled={disabled || undefined}
-			data-disabled={disabled || undefined}
-			data-selected={selected || undefined}
-			tabindex={disabled ? -1 : undefined}
-			class={className}
-			onclick={handleLinkClick}
-		>
-			{@render children()}
-		</a>
-	{:else}
-		<button
-			{type}
-			{disabled}
-			aria-pressed={selected || undefined}
-			data-disabled={disabled || undefined}
-			data-selected={selected || undefined}
-			data-chip
-			data-variant={variant}
-			data-color={resolvedColor}
-			data-size={size}
-			class={className}
-			{onclick}
-			{...rest as HTMLButtonAttributes}
-		>
-			{@render children()}
-		</button>
-	{/if}
-</span>
-
-<style>
-	[data-chip-wrapper] {
-		display: inline-grid;
-		min-height: var(--dry-space-12);
-		align-items: center;
-	}
-
-	[data-chip] {
-		--dry-chip-default-bg: var(--dry-color-fill);
-		--dry-chip-default-color: var(--dry-color-text-weak);
-		--dry-chip-bg: var(--dry-chip-default-bg);
-		--dry-chip-color: var(--dry-chip-default-color);
-		--dry-chip-border: transparent;
-		--dry-chip-selected-bg: var(--dry-color-fill-selected);
-		--dry-chip-selected-color: var(--dry-color-on-brand);
-		--dry-chip-selected-border: var(--dry-color-stroke-selected);
-		--dry-chip-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		--dry-chip-padding-x: var(--dry-space-3);
-		--dry-chip-padding-y: var(--dry-space-1);
-		--dry-chip-radius: var(--dry-radius-full);
-
-		display: inline-grid;
-		grid-auto-flow: column;
-		place-items: center;
-		gap: var(--dry-space-1_5);
-		padding: var(--dry-chip-padding-y) var(--dry-chip-padding-x);
-		font-size: var(--dry-chip-font-size);
-		font-family: var(--dry-font-sans);
-		font-weight: 500;
-		line-height: 1.25;
-		color: var(--dry-chip-color);
-		background: var(--dry-chip-bg);
-		border: 1px solid var(--dry-chip-border);
-		border-radius: var(--dry-chip-radius);
-		box-shadow: inset 0 0 0 1px transparent;
-		white-space: nowrap;
-		cursor: pointer;
-		user-select: none;
-		text-decoration: none;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-chip]:hover:not([data-disabled]) {
-		transform: translateY(-1px);
-	}
-
-	[data-chip]:focus-visible {
-		outline: 2px solid var(--dry-color-stroke-focus);
-		outline-offset: 2px;
-	}
-
-	[data-chip][data-disabled] {
-		--dry-chip-bg: var(--dry-color-fill-disabled);
-		--dry-chip-color: var(--dry-color-text-disabled);
-		--dry-chip-border: var(--dry-color-stroke-disabled);
-		opacity: 1;
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-
-	/* ── Sizes ────────────────────────────────────────────────────────────────── */
-
-	[data-size='sm'] {
-		--dry-chip-font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
-		--dry-chip-padding-x: var(--dry-space-2_5);
-		--dry-chip-padding-y: var(--dry-space-0_5);
-	}
-
-	[data-size='md'] {
-		--dry-chip-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		--dry-chip-padding-x: var(--dry-space-3);
-		--dry-chip-padding-y: var(--dry-space-1);
-	}
-
-	/* ── Variant: solid ──────────────────────────────────────────────────────── */
-
-	[data-variant='solid'][data-color='gray'] {
-		--dry-chip-bg: var(--dry-color-text-weak);
-		--dry-chip-color: var(--dry-color-bg-base);
-	}
-
-	[data-variant='solid'][data-color='blue'] {
-		--dry-chip-bg: var(--dry-color-fill-brand);
-		--dry-chip-color: var(--dry-color-on-brand);
-	}
-
-	[data-variant='solid'][data-color='red'] {
-		--dry-chip-bg: var(--dry-color-fill-error);
-		--dry-chip-color: var(--dry-color-on-error);
-	}
-
-	[data-variant='solid'][data-color='green'] {
-		--dry-chip-bg: var(--dry-color-fill-success);
-		--dry-chip-color: var(--dry-color-on-success);
-	}
-
-	[data-variant='solid'][data-color='yellow'] {
-		--dry-chip-bg: var(--dry-color-fill-warning);
-		--dry-chip-color: var(--dry-color-on-warning);
-	}
-
-	[data-variant='solid'][data-color='purple'] {
-		--dry-chip-bg: color-mix(in srgb, var(--dry-color-fill-brand) 80%, hsl(280, 65%, 55%));
-		--dry-chip-color: var(--dry-color-on-brand);
-	}
-
-	[data-variant='solid'][data-color='orange'] {
-		--dry-chip-bg: color-mix(
-			in srgb,
-			var(--dry-color-fill-warning) 70%,
-			var(--dry-color-fill-error)
-		);
-		--dry-chip-color: var(--dry-color-on-warning);
-	}
-
-	/* ── Variant: soft ───────────────────────────────────────────────────────── */
-
-	[data-variant='soft'][data-color='gray'] {
-		--dry-chip-bg: var(--dry-color-fill);
-		--dry-chip-color: var(--dry-color-text-weak);
-	}
-
-	[data-variant='soft'][data-color='blue'] {
-		--dry-chip-bg: var(--dry-color-fill-brand-weak);
-		--dry-chip-color: var(--dry-color-text-brand);
-	}
-
-	[data-variant='soft'][data-color='red'] {
-		--dry-chip-bg: var(--dry-color-fill-error-weak);
-		--dry-chip-color: var(--dry-color-text-error);
-	}
-
-	[data-variant='soft'][data-color='green'] {
-		--dry-chip-bg: var(--dry-color-fill-success-weak);
-		--dry-chip-color: var(--dry-color-text-success);
-	}
-
-	[data-variant='soft'][data-color='yellow'] {
-		--dry-chip-bg: var(--dry-color-fill-warning-weak);
-		--dry-chip-color: var(--dry-color-text-warning);
-	}
-
-	[data-variant='soft'][data-color='purple'] {
-		--dry-chip-bg: color-mix(
-			in srgb,
-			var(--dry-color-fill-brand-weak) 70%,
-			hsl(280, 65%, 55%, 0.1)
-		);
-		--dry-chip-color: color-mix(in srgb, var(--dry-color-text-brand) 70%, hsl(280, 65%, 40%));
-	}
-
-	[data-variant='soft'][data-color='orange'] {
-		--dry-chip-bg: color-mix(
-			in srgb,
-			var(--dry-color-fill-warning-weak) 50%,
-			var(--dry-color-fill-error-weak)
-		);
-		--dry-chip-color: color-mix(
-			in srgb,
-			var(--dry-color-text-warning) 50%,
-			var(--dry-color-text-error)
-		);
-	}
-
-	/* ── Variant: outline ────────────────────────────────────────────────────── */
-
-	[data-variant='outline'] {
-		--dry-chip-bg: var(--dry-color-bg-base);
-	}
-
-	[data-variant='outline'][data-color='gray'] {
-		--dry-chip-color: var(--dry-color-text-weak);
-		--dry-chip-border: var(--dry-color-stroke-weak);
-	}
-
-	[data-variant='outline'][data-color='blue'] {
-		--dry-chip-color: var(--dry-color-text-brand);
-		--dry-chip-border: var(--dry-color-stroke-brand);
-	}
-
-	[data-variant='outline'][data-color='red'] {
-		--dry-chip-color: var(--dry-color-text-error);
-		--dry-chip-border: var(--dry-color-stroke-error);
-	}
-
-	[data-variant='outline'][data-color='green'] {
-		--dry-chip-color: var(--dry-color-text-success);
-		--dry-chip-border: var(--dry-color-stroke-success);
-	}
-
-	[data-variant='outline'][data-color='yellow'] {
-		--dry-chip-color: var(--dry-color-text-warning);
-		--dry-chip-border: var(--dry-color-stroke-warning);
-	}
-
-	[data-variant='outline'][data-color='purple'] {
-		--dry-chip-color: color-mix(in srgb, var(--dry-color-text-brand) 70%, hsl(280, 65%, 40%));
-		--dry-chip-border: color-mix(in srgb, var(--dry-color-stroke-brand) 60%, hsl(280, 50%, 70%));
-	}
-
-	[data-variant='outline'][data-color='orange'] {
-		--dry-chip-color: color-mix(
-			in srgb,
-			var(--dry-color-text-warning) 60%,
-			var(--dry-color-text-error)
-		);
-		--dry-chip-border: color-mix(
-			in srgb,
-			var(--dry-color-stroke-warning) 60%,
-			var(--dry-color-stroke-error)
-		);
-	}
-
-	/* ── Selected state ──────────────────────────────────────────────────────── */
-
-	[data-chip][data-selected='true']:not([data-disabled]) {
-		--dry-chip-bg: var(--dry-chip-selected-bg);
-		--dry-chip-color: var(--dry-chip-selected-color);
-		--dry-chip-border: var(--dry-chip-selected-border);
-		box-shadow: inset 0 0 0 1px var(--dry-chip-selected-border);
-		font-weight: 600;
-	}
-</style>

package/dist/chip/chip.svelte.d.ts

@@ -1,26 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-import type { ChipColor } from './index.js';
-interface SharedProps {
-	selected?: boolean;
-	disabled?: boolean;
-	variant?: 'solid' | 'outline' | 'soft';
-	color?: ChipColor;
-	size?: 'sm' | 'md';
-	href?: string;
-	rel?: string;
-	target?: string;
-	download?: boolean | string;
-	type?: 'button' | 'submit' | 'reset';
-	onclick?: (event: MouseEvent) => void;
-	children: Snippet;
-}
-type RestProps = Omit<HTMLButtonAttributes, 'type' | 'disabled' | 'onclick' | 'children'> &
-	Omit<
-		HTMLAnchorAttributes,
-		'href' | 'rel' | 'target' | 'download' | 'type' | 'onclick' | 'children'
-	>;
-type Props = SharedProps & RestProps;
-declare const Chip: import('svelte').Component<Props, {}, ''>;
-type Chip = ReturnType<typeof Chip>;
-export default Chip;

package/dist/chip-group/chip-group-item.svelte

@@ -1,241 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getChipGroupCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		value: string;
-		variant?: 'solid' | 'outline' | 'soft';
-		color?: 'gray' | 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'orange';
-		disabled?: boolean;
-		children: Snippet;
-	}
-
-	let {
-		value,
-		variant = 'soft',
-		color = 'gray',
-		disabled = false,
-		onclick,
-		class: className,
-		children,
-		...rest
-	}: Props = $props();
-
-	const group = getChipGroupCtx();
-	const selected = $derived(group?.isSelected(value) ?? false);
-	const isDisabled = $derived(Boolean(disabled || group?.disabled));
-
-	const handleClick: NonNullable<Props['onclick']> = (event) => {
-		if (isDisabled || !group) return;
-		group.toggle(value);
-		onclick?.(event);
-	};
-</script>
-
-<button
-	type="button"
-	aria-pressed={selected}
-	data-chip-item
-	data-state={selected ? 'on' : 'off'}
-	data-variant={variant}
-	data-color={color}
-	data-disabled={isDisabled || undefined}
-	disabled={isDisabled}
-	class={className}
-	onclick={handleClick}
-	{...rest}
->
-	{@render children()}
-</button>
-
-<style>
-	[data-chip-item] {
-		--dry-chip-default-bg: var(--dry-color-fill);
-		--dry-chip-default-color: var(--dry-color-text-weak);
-		--dry-chip-bg: var(--dry-chip-default-bg);
-		--dry-chip-color: var(--dry-chip-default-color);
-		--dry-chip-border: transparent;
-		--dry-chip-font-size: var(
-			--dry-chip-group-font-size,
-			var(--dry-type-tiny-size, var(--dry-text-xs-size))
-		);
-		--dry-chip-padding-x: var(--dry-chip-group-padding-x, var(--dry-space-3));
-		--dry-chip-padding-y: var(--dry-chip-group-padding-y, var(--dry-space-1));
-		--dry-chip-radius: var(--dry-radius-full);
-
-		display: inline-grid;
-		grid-auto-flow: column;
-		place-items: center;
-		gap: var(--dry-space-1_5);
-		padding: var(--dry-chip-padding-y) var(--dry-chip-padding-x);
-		font-size: var(--dry-chip-font-size);
-		font-family: var(--dry-font-sans);
-		font-weight: 500;
-		line-height: 1.25;
-		color: var(--dry-chip-color);
-		background: var(--dry-chip-bg);
-		border: 1px solid var(--dry-chip-border);
-		border-radius: var(--dry-chip-radius);
-		white-space: nowrap;
-		cursor: pointer;
-		user-select: none;
-		position: relative;
-		transition:
-			background var(--dry-duration-fast) var(--dry-ease-default),
-			border-color var(--dry-duration-fast) var(--dry-ease-default),
-			color var(--dry-duration-fast) var(--dry-ease-default),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-chip-item]:hover:not([data-disabled]) {
-		transform: translateY(-1px);
-	}
-
-	[data-chip-item]:active:not([data-disabled]) {
-		transform: translateY(0);
-	}
-
-	[data-chip-item]:focus-visible {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-chip-item][data-disabled] {
-		opacity: 0.5;
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-
-	[data-chip-item][data-state='on'] {
-		--dry-chip-bg: color-mix(in srgb, var(--dry-color-fill-brand) 14%, transparent);
-		--dry-chip-color: var(--dry-color-fill-brand);
-		--dry-chip-border: var(--dry-color-fill-brand);
-	}
-
-	/* ── Variant: solid ─────────────────────────────────────────────────── */
-
-	[data-chip-item][data-variant='solid'][data-color='gray'] {
-		--dry-chip-bg: var(--dry-color-text-weak);
-		--dry-chip-color: var(--dry-color-bg-base);
-	}
-	[data-chip-item][data-variant='solid'][data-color='blue'] {
-		--dry-chip-bg: var(--dry-color-fill-brand);
-		--dry-chip-color: var(--dry-color-on-brand);
-	}
-	[data-chip-item][data-variant='solid'][data-color='red'] {
-		--dry-chip-bg: var(--dry-color-fill-error);
-		--dry-chip-color: var(--dry-color-on-error);
-	}
-	[data-chip-item][data-variant='solid'][data-color='green'] {
-		--dry-chip-bg: var(--dry-color-fill-success);
-		--dry-chip-color: var(--dry-color-on-success);
-	}
-	[data-chip-item][data-variant='solid'][data-color='yellow'] {
-		--dry-chip-bg: var(--dry-color-fill-warning);
-		--dry-chip-color: var(--dry-color-on-warning);
-	}
-	[data-chip-item][data-variant='solid'][data-color='purple'] {
-		--dry-chip-bg: color-mix(in srgb, var(--dry-color-fill-brand) 80%, hsl(280, 65%, 55%));
-		--dry-chip-color: var(--dry-color-on-brand);
-	}
-	[data-chip-item][data-variant='solid'][data-color='orange'] {
-		--dry-chip-bg: color-mix(
-			in srgb,
-			var(--dry-color-fill-warning) 70%,
-			var(--dry-color-fill-error)
-		);
-		--dry-chip-color: var(--dry-color-on-warning);
-	}
-
-	[data-chip-item][data-variant='solid'][data-state='on'] {
-		--dry-chip-bg: var(--dry-color-fill-brand);
-		--dry-chip-color: white;
-		--dry-chip-border: var(--dry-color-fill-brand);
-	}
-
-	/* ── Variant: soft ──────────────────────────────────────────────────── */
-
-	[data-chip-item][data-variant='soft'][data-color='gray'] {
-		--dry-chip-bg: var(--dry-color-fill);
-		--dry-chip-color: var(--dry-color-text-weak);
-	}
-	[data-chip-item][data-variant='soft'][data-color='blue'] {
-		--dry-chip-bg: var(--dry-color-fill-brand-weak);
-		--dry-chip-color: var(--dry-color-text-brand);
-	}
-	[data-chip-item][data-variant='soft'][data-color='red'] {
-		--dry-chip-bg: var(--dry-color-fill-error-weak);
-		--dry-chip-color: var(--dry-color-text-error);
-	}
-	[data-chip-item][data-variant='soft'][data-color='green'] {
-		--dry-chip-bg: var(--dry-color-fill-success-weak);
-		--dry-chip-color: var(--dry-color-text-success);
-	}
-	[data-chip-item][data-variant='soft'][data-color='yellow'] {
-		--dry-chip-bg: var(--dry-color-fill-warning-weak);
-		--dry-chip-color: var(--dry-color-text-warning);
-	}
-	[data-chip-item][data-variant='soft'][data-color='purple'] {
-		--dry-chip-bg: color-mix(
-			in srgb,
-			var(--dry-color-fill-brand-weak) 70%,
-			hsl(280, 65%, 55%, 0.1)
-		);
-		--dry-chip-color: color-mix(in srgb, var(--dry-color-text-brand) 70%, hsl(280, 65%, 40%));
-	}
-	[data-chip-item][data-variant='soft'][data-color='orange'] {
-		--dry-chip-bg: color-mix(
-			in srgb,
-			var(--dry-color-fill-warning-weak) 50%,
-			var(--dry-color-fill-error-weak)
-		);
-		--dry-chip-color: color-mix(
-			in srgb,
-			var(--dry-color-text-warning) 50%,
-			var(--dry-color-text-error)
-		);
-	}
-
-	/* ── Variant: outline ───────────────────────────────────────────────── */
-
-	[data-chip-item][data-variant='outline'] {
-		--dry-chip-bg: transparent;
-	}
-	[data-chip-item][data-variant='outline'][data-color='gray'] {
-		--dry-chip-color: var(--dry-color-text-weak);
-		--dry-chip-border: var(--dry-color-stroke-weak);
-	}
-	[data-chip-item][data-variant='outline'][data-color='blue'] {
-		--dry-chip-color: var(--dry-color-text-brand);
-		--dry-chip-border: var(--dry-color-stroke-brand);
-	}
-	[data-chip-item][data-variant='outline'][data-color='red'] {
-		--dry-chip-color: var(--dry-color-text-error);
-		--dry-chip-border: var(--dry-color-stroke-error);
-	}
-	[data-chip-item][data-variant='outline'][data-color='green'] {
-		--dry-chip-color: var(--dry-color-text-success);
-		--dry-chip-border: var(--dry-color-stroke-success);
-	}
-	[data-chip-item][data-variant='outline'][data-color='yellow'] {
-		--dry-chip-color: var(--dry-color-text-warning);
-		--dry-chip-border: var(--dry-color-stroke-warning);
-	}
-	[data-chip-item][data-variant='outline'][data-color='purple'] {
-		--dry-chip-color: color-mix(in srgb, var(--dry-color-text-brand) 70%, hsl(280, 65%, 40%));
-		--dry-chip-border: color-mix(in srgb, var(--dry-color-stroke-brand) 60%, hsl(280, 50%, 70%));
-	}
-	[data-chip-item][data-variant='outline'][data-color='orange'] {
-		--dry-chip-color: color-mix(
-			in srgb,
-			var(--dry-color-text-warning) 60%,
-			var(--dry-color-text-error)
-		);
-		--dry-chip-border: color-mix(
-			in srgb,
-			var(--dry-color-stroke-warning) 60%,
-			var(--dry-color-stroke-error)
-		);
-	}
-</style>

package/dist/chip-group/chip-group-item.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
-	value: string;
-	variant?: 'solid' | 'outline' | 'soft';
-	color?: 'gray' | 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'orange';
-	disabled?: boolean;
-	children: Snippet;
-}
-declare const ChipGroupItem: import('svelte').Component<Props, {}, ''>;
-type ChipGroupItem = ReturnType<typeof ChipGroupItem>;
-export default ChipGroupItem;

package/dist/code-block/code-block.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLElement> {
-	code: string;
-	language?: string;
-	showLineNumbers?: boolean;
-	showCopyButton?: boolean;
-	linkResolver?: (text: string, type: string) => string | undefined;
-	children?: Snippet;
-}
-declare const CodeBlock: import('svelte').Component<Props, {}, ''>;
-type CodeBlock = ReturnType<typeof CodeBlock>;
-export default CodeBlock;

package/dist/collapsible/collapsible-trigger.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import { getCollapsibleCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-
-	const ctx = getCollapsibleCtx();
-</script>
-
-<button
-	type="button"
-	aria-expanded={ctx.open}
-	aria-controls={ctx.contentId}
-	data-state={ctx.open ? 'open' : 'closed'}
-	data-disabled={ctx.disabled || undefined}
-	data-collapsible-trigger
-	disabled={ctx.disabled}
-	class={className}
-	onclick={() => ctx.toggle()}
-	{...rest}
->
-	{@render children()}
-	<svg
-		data-indicator
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 24 24"
-		fill="none"
-		stroke="currentColor"
-		stroke-width="2"
-		aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg
-	>
-</button>
-
-<style>
-	[data-collapsible-trigger] {
-		display: grid;
-		grid-template-columns: 1fr 1rem;
-		align-items: center;
-		gap: var(--dry-space-2);
-		padding: var(--dry-space-3) var(--dry-space-4);
-		background: none;
-		border: 1px solid var(--dry-color-stroke-weak);
-		border-radius: var(--dry-radius-md);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		font-family: var(--dry-font-sans);
-		cursor: pointer;
-		color: var(--dry-color-text-strong);
-
-		& [data-indicator] {
-			height: 1rem;
-			aspect-ratio: 1;
-			opacity: 0.5;
-			transition: transform var(--dry-duration-fast) var(--dry-ease-default);
-		}
-
-		&[data-state='open'] [data-indicator] {
-			transform: rotate(180deg);
-		}
-
-		&:hover:not([data-disabled]) {
-			background: color-mix(in srgb, var(--dry-color-fill-brand) 5%, transparent);
-		}
-
-		&:focus-visible {
-			outline: 2px solid var(--dry-color-focus-ring);
-			outline-offset: 2px;
-		}
-
-		&[data-disabled] {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-	}
-</style>