@dryui/ui 0.5.2 → 1.0.0

package/skills/dryui/SKILL.md

@@ -33,9 +33,9 @@ Most DryUI components are compound — they require `<Card.Root>`, not `<Card>`.
 <Card.Root>content</Card.Root>
 ```
 
-Compound components include Accordion, Alert, AlertDialog, Breadcrumb, Calendar, Card, Carousel, Chart, ChipGroup, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, DataGrid, DateField, DatePicker, DateRangePicker, DescriptionList, Dialog, DragAndDrop, Drawer, DropdownMenu, Field, Fieldset, FileSelect, FileUpload, FlipCard, FloatButton, HoverCard, InputGroup, LinkPreview, List, Listbox, Map, MegaMenu, Menubar, MultiSelectCombobox, NavigationMenu, NotificationCenter, OptionSwatchGroup, Pagination, PinInput, Popover, RadioGroup, RangeCalendar, RichTextEditor, SegmentedControl, Select, Sidebar, Splitter, StarRating, Stepper, Table, TableOfContents, Tabs, TagsInput, Timeline, Toast, ToggleGroup, Toolbar, Tooltip, Tour, Transfer, Tree and Typography.
+Compound components are tracked in the manifest at `packages/mcp/src/component-catalog.ts`. Verify with `info` before you assume a bare name works, then use `.Root` and wrap the parts inside it.
 
-The test: every compound component in your markup uses `.Root`, and its parts are wrapped inside it. See `rules/compound-components.md` for the full list and parts reference.
+The test: every compound component in your markup uses `.Root`, and its parts are wrapped inside it. See `rules/compound-components.md` for the parts reference.
 
 ## 3. Let the Theme Do Its Job
 
@@ -126,20 +126,23 @@ The test: search your markup for raw `<input`, `<select>`, `<dialog>`, `<button>
 - Codex: public install today is `$skill-installer install https://github.com/rob-balfre/dryui/tree/main/packages/ui/skills/dryui` then `codex mcp add dryui -- npx -y @dryui/mcp`. If you're working inside the DryUI repo itself, install the repo-local plugin from `/plugins` via `.agents/plugins/marketplace.json`.
 - Copilot/Cursor/Windsurf: `npx degit rob-balfre/dryui/packages/ui/skills/dryui .agents/skills/dryui` + add MCP config (see https://dryui.dev/tools)
 
-**3. Bootstrap the project** — `init` detects your project state and applies whatever is missing:
+**3. Install the CLI** so every subsequent command is short and fast:
 
-```
-npx -y @dryui/cli init
+```bash
+bun install -g @dryui/cli   # or: npm install -g @dryui/cli
 ```
 
-**New project from scratch?** Pass a directory name to scaffold SvelteKit + DryUI in one step:
+**4. Bootstrap the project** — `init` detects your project state and applies whatever is missing:
 
+```bash
+dryui init             # existing project
+dryui init my-app      # new project — scaffolds SvelteKit + DryUI in one step
+cd my-app && bun run dev
 ```
-npx -y @dryui/cli init my-app
-cd my-app && npm run dev
-```
 
-This works for greenfield (empty directory), brownfield (existing non-SvelteKit project), and existing SvelteKit projects. Verify: `npx -y @dryui/cli detect --toon` — output should show `project: ready`.
+This works for greenfield (empty directory), brownfield (existing non-SvelteKit project), and existing SvelteKit projects. Verify: `dryui detect` should show `project: ready`.
+
+> **No global install?** `bunx @dryui/cli <cmd>` and `npx -y @dryui/cli <cmd>` work anywhere without installing — same commands, just slower (re-fetches on each call).
 
 ### Manual setup
 
@@ -185,21 +188,23 @@ Use these to look up APIs, discover components, plan setup, and validate code.
 
 ### CLI fallback
 
-All commands support `--toon` for token-optimized agent output and `--full` to disable truncation.
+Install once with `bun install -g @dryui/cli` (or `npm install -g @dryui/cli`), then use the short form below. Every command outputs TOON (token-optimized, agent-friendly) by default. Pass `--text` for human-readable plain text, `--json` where supported, or `--full` to disable truncation.
 
 ```bash
-bunx @dryui/cli init [path] [--pm bun]   # Bootstrap SvelteKit + DryUI project
-bunx @dryui/cli info <component> --toon  # Look up component API
-bunx @dryui/cli compose "date input" --toon  # Composition guidance
-bunx @dryui/cli detect [path] --toon     # Check project setup
-bunx @dryui/cli install [path] --toon    # Print install plan
-bunx @dryui/cli review <file.svelte> --toon  # Validate component
-bunx @dryui/cli diagnose <file.css> --toon   # Validate theme CSS
-bunx @dryui/cli doctor [path] --toon     # Audit workspace
-bunx @dryui/cli lint [path] --toon       # Deterministic findings
-bunx @dryui/cli list --toon              # List components
+dryui init [path] [--pm bun]    # Bootstrap SvelteKit + DryUI project
+dryui info <component>          # Look up component API
+dryui compose "date input"      # Composition guidance
+dryui detect [path]             # Check project setup
+dryui install [path]            # Print install plan
+dryui review <file.svelte>      # Validate component
+dryui diagnose <file.css>       # Validate theme CSS
+dryui doctor [path]             # Audit workspace
+dryui lint [path]               # Deterministic findings
+dryui list                      # List components
 ```
 
+Without a global install, prefix any command with `bunx @dryui/cli …` or `npx -y @dryui/cli …` — same behaviour, just slower (re-fetches on each call).
+
 Categories: action, input, form, layout, navigation, overlay, display, feedback, interaction, utility
 
 ## Rule Files

package/skills/dryui/rules/compound-components.md

@@ -18,7 +18,7 @@ Every compound component uses `.Root` as the container. Never use the bare name.
 
 ## Parts Reference
 
-Below are the parts for the most commonly used compound components. Always run `bunx @dryui/cli info <name>` for the full, up-to-date parts list.
+Below are the parts for the most commonly used compound components. Always run `dryui info <name>` for the full, up-to-date parts list.
 
 ### Card
 
@@ -311,6 +311,6 @@ Parts: Root, Input, Content, Item, Empty
 
 ## Full Compound Component List
 
-Run `bunx @dryui/cli info <name>` for any component's complete parts list:
+Run `dryui info <name>` for any component's complete parts list:
 
-Accordion, Alert, AlertDialog, Breadcrumb, Card, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, DataGrid, DatePicker, Dialog, DragAndDrop, Drawer, DropdownMenu, EmptyState, Field, FileUpload, FloatButton, Pagination, Popover, RadioGroup, RichTextEditor, Select, Splitter, Stepper, Table, Tabs, TagsInput, Toast, ToggleGroup, Toolbar, Tooltip, Tour, Transfer
+Accordion, AlertDialog, Breadcrumb, Card, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, DataGrid, DatePicker, Dialog, DragAndDrop, Drawer, DropdownMenu, EmptyState, Field, FileUpload, FloatButton, Pagination, Popover, RadioGroup, RichTextEditor, Select, Splitter, Stepper, Table, Tabs, TagsInput, Toast, ToggleGroup, Toolbar, Tooltip, Tour, Transfer

package/skills/dryui/rules/theming.md

@@ -271,7 +271,7 @@ Ensure sufficient contrast between text and background.
 Run the CLI diagnose command to catch theme issues:
 
 ```bash
-bunx @dryui/cli diagnose src/styles/global.css
+dryui diagnose src/styles/global.css
 ```
 
 Common diagnostic codes:

package/dist/alert/alert-button-close.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import CloseButtonBase from '../internal/close-button-base.svelte';
-	import { getAlertCtx } from './context.svelte.js';
-
-	interface Props extends HTMLButtonAttributes {
-		children?: Snippet;
-	}
-
-	let { children, ...rest }: Props = $props();
-
-	const ctx = getAlertCtx();
-</script>
-
-<span class="alert-close-slot">
-	<CloseButtonBase aria-label="Dismiss alert" {...rest} onclick={() => ctx.dismiss()}>
-		{#if children}{@render children()}{/if}
-	</CloseButtonBase>
-</span>
-
-<style>
-	.alert-close-slot {
-		display: inline-grid;
-		grid-column: -2 / -1;
-		grid-row: 1 / 3;
-		align-self: start;
-	}
-</style>

package/dist/alert/alert-button-close.svelte.d.ts

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

package/dist/alert/alert-description.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { markDirectChild } from './context.svelte.js';
-
-	interface Props extends HTMLAttributes<HTMLParagraphElement> {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<p data-alert-description {@attach markDirectChild} class={className} {...rest}>
-	{@render children()}
-</p>
-
-<style>
-	[data-alert-description][data-alert-direct-child] {
-		grid-column: 2;
-	}
-
-	[data-alert-description] {
-		font-size: var(--dry-type-small-size);
-		line-height: var(--dry-type-small-leading);
-		color: var(--dry-color-text-weak);
-		margin: 0;
-	}
-</style>

package/dist/alert/alert-description.svelte.d.ts

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

package/dist/alert/alert-icon.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLAttributes<HTMLSpanElement> {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<span aria-hidden="true" data-alert-icon class={className} {...rest}>
-	{@render children()}
-</span>
-
-<style>
-	[data-alert-icon] {
-		grid-column: 1;
-		grid-row: 1 / 3;
-		color: var(--dry-alert-icon-color);
-		display: grid;
-		align-items: center;
-		margin-top: var(--dry-space-0_5);
-		padding-inline-end: var(--dry-alert-gap, var(--dry-space-3));
-	}
-</style>

package/dist/alert/alert-icon.svelte.d.ts

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

package/dist/alert/alert-root.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import { type AlertVariant } from './context.svelte.js';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    variant?: AlertVariant;
-    dismissible?: boolean;
-    onDismiss?: () => void;
-    children: Snippet;
-}
-declare const AlertRoot: import("svelte").Component<Props, {}, "">;
-type AlertRoot = ReturnType<typeof AlertRoot>;
-export default AlertRoot;

package/dist/alert/alert-title.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { markDirectChild } from './context.svelte.js';
-
-	interface Props extends HTMLAttributes<HTMLHeadingElement> {
-		children: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<h5 data-alert-title {@attach markDirectChild} class={className} {...rest}>
-	{@render children()}
-</h5>
-
-<style>
-	[data-alert-title][data-alert-direct-child] {
-		grid-column: 2;
-	}
-
-	[data-alert-title] {
-		font-size: var(--dry-type-heading-4-size);
-		font-weight: 600;
-		line-height: var(--dry-type-small-leading);
-		color: var(--dry-color-text-strong);
-		margin: 0;
-	}
-</style>

package/dist/alert/alert-title.svelte.d.ts

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

package/dist/alert/context.svelte.d.ts

@@ -1,9 +0,0 @@
-export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
-interface AlertContext {
-    readonly variant: AlertVariant;
-    readonly isDismissed: boolean;
-    dismiss: () => void;
-}
-export declare const setAlertCtx: (ctx: AlertContext) => AlertContext, getAlertCtx: () => AlertContext;
-export declare function markDirectChild(node: HTMLElement): () => void;
-export {};

package/dist/alert/context.svelte.js

@@ -1,10 +0,0 @@
-import { createContext } from '@dryui/primitives';
-export const [setAlertCtx, getAlertCtx] = createContext('alert');
-export function markDirectChild(node) {
-    if (node.parentElement?.hasAttribute('data-alert')) {
-        node.setAttribute('data-alert-direct-child', '');
-    }
-    return () => {
-        node.removeAttribute('data-alert-direct-child');
-    };
-}

package/dist/option-swatch-group/context.svelte.d.ts

@@ -1,9 +0,0 @@
-interface SelectableTileGroupContext {
-    readonly value: string;
-    readonly disabled: boolean;
-    readonly orientation: 'horizontal' | 'vertical';
-    select: (value: string) => void;
-    isSelected: (value: string) => boolean;
-}
-export declare const setSelectableTileGroupCtx: (ctx: SelectableTileGroupContext) => SelectableTileGroupContext, getSelectableTileGroupCtx: () => SelectableTileGroupContext;
-export {};

package/dist/option-swatch-group/context.svelte.js

@@ -1,2 +0,0 @@
-import { createContext } from '@dryui/primitives';
-export const [setSelectableTileGroupCtx, getSelectableTileGroupCtx] = createContext('selectable-tile-group');

package/dist/option-swatch-group/index.d.ts

@@ -1,29 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import type { SelectableTileGroupItemProps as PrimitiveOptionSwatchGroupItemProps, SelectableTileGroupRootProps as PrimitiveOptionSwatchGroupRootProps } from '@dryui/primitives';
-export type { SelectableTileGroupLabelProps as OptionSwatchGroupLabelProps } from '@dryui/primitives';
-export type { SelectableTileGroupMetaProps as OptionSwatchGroupMetaProps } from '@dryui/primitives';
-export interface OptionSwatchGroupRootProps extends PrimitiveOptionSwatchGroupRootProps {
-    columns?: 1 | 2 | 3 | 4;
-}
-export interface OptionSwatchGroupItemProps extends PrimitiveOptionSwatchGroupItemProps {
-    size?: 'default' | 'compact';
-    unavailable?: boolean;
-}
-export interface OptionSwatchGroupSwatchProps extends HTMLAttributes<HTMLSpanElement> {
-    color?: string;
-    shape?: 'circle' | 'rounded';
-    children?: Snippet;
-}
-import OptionSwatchGroupRoot from './option-swatch-group-root.svelte';
-import OptionSwatchGroupItem from './option-swatch-group-item-button.svelte';
-import OptionSwatchGroupSwatch from './option-swatch-group-swatch.svelte';
-import OptionSwatchGroupLabel from './option-swatch-group-label.svelte';
-import OptionSwatchGroupMeta from './option-swatch-group-meta.svelte';
-export declare const OptionSwatchGroup: {
-    Root: typeof OptionSwatchGroupRoot;
-    Item: typeof OptionSwatchGroupItem;
-    Swatch: typeof OptionSwatchGroupSwatch;
-    Label: typeof OptionSwatchGroupLabel;
-    Meta: typeof OptionSwatchGroupMeta;
-};

package/dist/option-swatch-group/index.js

@@ -1,12 +0,0 @@
-import OptionSwatchGroupRoot from './option-swatch-group-root.svelte';
-import OptionSwatchGroupItem from './option-swatch-group-item-button.svelte';
-import OptionSwatchGroupSwatch from './option-swatch-group-swatch.svelte';
-import OptionSwatchGroupLabel from './option-swatch-group-label.svelte';
-import OptionSwatchGroupMeta from './option-swatch-group-meta.svelte';
-export const OptionSwatchGroup = {
-    Root: OptionSwatchGroupRoot,
-    Item: OptionSwatchGroupItem,
-    Swatch: OptionSwatchGroupSwatch,
-    Label: OptionSwatchGroupLabel,
-    Meta: OptionSwatchGroupMeta
-};

package/dist/option-swatch-group/option-swatch-group-item-button.svelte

@@ -1,214 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-	import Button from '../button/button.svelte';
-	import { getSelectableTileGroupCtx } from './context.svelte.js';
-
-	interface Props extends Omit<HTMLButtonAttributes, 'value'> {
-		value: string;
-		disabled?: boolean;
-		unavailable?: boolean;
-		size?: 'default' | 'compact';
-		children: Snippet;
-	}
-
-	let {
-		value,
-		disabled = false,
-		unavailable = false,
-		size = 'default',
-		children,
-		...rest
-	}: Props = $props();
-
-	const ctx = getSelectableTileGroupCtx();
-	const isDisabled = $derived(disabled || unavailable || ctx.disabled);
-	const isSelected = $derived(ctx.isSelected(value));
-
-	function moveFocus(current: HTMLButtonElement, direction: -1 | 1) {
-		const group = current.closest('[role="radiogroup"]');
-		if (!(group instanceof HTMLElement)) return;
-
-		const items = Array.from(
-			group.querySelectorAll<HTMLButtonElement>('[role="radio"]:not([disabled])')
-		);
-		const index = items.indexOf(current);
-		if (index === -1) return;
-
-		const target = items[(index + direction + items.length) % items.length];
-		target?.focus();
-		const nextValue = target?.dataset.value;
-		if (nextValue) ctx.select(nextValue);
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		if (isDisabled || !(event.currentTarget instanceof HTMLButtonElement)) return;
-
-		const isHorizontal = ctx.orientation === 'horizontal';
-		if (
-			(isHorizontal && event.key === 'ArrowRight') ||
-			(!isHorizontal && event.key === 'ArrowDown')
-		) {
-			event.preventDefault();
-			moveFocus(event.currentTarget, 1);
-		}
-		if ((isHorizontal && event.key === 'ArrowLeft') || (!isHorizontal && event.key === 'ArrowUp')) {
-			event.preventDefault();
-			moveFocus(event.currentTarget, -1);
-		}
-		if (event.key === ' ' || event.key === 'Enter') {
-			event.preventDefault();
-			ctx.select(value);
-		}
-	}
-</script>
-
-<span
-	class="root"
-	data-size={size !== 'default' ? size : undefined}
-	data-state={isSelected ? 'checked' : 'unchecked'}
-	data-selected={isSelected ? '' : undefined}
-	data-disabled={isDisabled || undefined}
-	data-unavailable={unavailable || undefined}
->
-	<Button
-		variant="bare"
-		type="button"
-		role="radio"
-		aria-checked={isSelected}
-		disabled={isDisabled}
-		data-option-swatch-group-item
-		data-state={isSelected ? 'checked' : 'unchecked'}
-		data-selected={isSelected ? '' : undefined}
-		data-unavailable={unavailable || undefined}
-		data-value={value}
-		tabindex={isSelected ? 0 : -1}
-		{...rest}
-		onclick={() => {
-			if (!isDisabled) ctx.select(value);
-		}}
-		onkeydown={handleKeydown}
-	>
-		<span class="content">
-			{@render children()}
-		</span>
-	</Button>
-</span>
-
-<style>
-	.root {
-		--_swatch-item-selected-bg: var(
-			--dry-option-swatch-group-selected-bg,
-			color-mix(in srgb, var(--dry-color-fill-selected) 12%, var(--dry-color-bg-raised) 88%)
-		);
-		--_swatch-item-selected-bg-hover: var(
-			--dry-option-swatch-group-selected-bg-hover,
-			color-mix(in srgb, var(--dry-color-fill-selected) 16%, var(--dry-color-bg-raised) 84%)
-		);
-		--_swatch-item-selected-border: var(
-			--dry-option-swatch-group-selected-border,
-			var(--dry-color-stroke-selected)
-		);
-
-		display: grid;
-		background: var(--dry-option-swatch-group-bg, var(--dry-color-bg-base));
-		border: 1px solid var(--dry-option-swatch-group-border, var(--dry-color-stroke-weak));
-		border-radius: var(--dry-option-swatch-group-radius, var(--dry-radius-lg));
-		box-shadow: var(--dry-option-swatch-group-shadow, none);
-		transition:
-			background var(--dry-duration-fast, 100ms) ease,
-			border-color var(--dry-duration-fast, 100ms) ease,
-			box-shadow var(--dry-duration-fast, 100ms) ease,
-			transform var(--dry-duration-fast, 100ms) ease;
-
-		--dry-btn-bg: transparent;
-		--dry-btn-border: transparent;
-		--dry-btn-color: var(--dry-option-swatch-group-color, var(--dry-color-text-strong));
-		--dry-btn-padding-x: 0;
-		--dry-btn-padding-y: 0;
-		--dry-btn-radius: var(--dry-option-swatch-group-radius, var(--dry-radius-lg));
-		--dry-btn-justify: stretch;
-		--dry-btn-align: stretch;
-		--dry-btn-min-height: 0;
-	}
-
-	.root:hover:not([data-disabled]) {
-		border-color: color-mix(
-			in srgb,
-			var(--dry-color-stroke-strong) 72%,
-			var(--dry-color-stroke-weak) 28%
-		);
-		background: var(
-			--dry-option-swatch-group-bg-hover,
-			color-mix(in srgb, var(--dry-color-bg-raised) 92%, var(--dry-color-fill-selected) 8%)
-		);
-	}
-
-	.root[data-state='checked'] {
-		border-color: var(--_swatch-item-selected-border);
-		background: var(--_swatch-item-selected-bg);
-	}
-
-	.root[data-state='checked']:hover:not([data-disabled]) {
-		background: var(--_swatch-item-selected-bg-hover);
-	}
-
-	.root:focus-within {
-		outline: 2px solid var(--dry-color-focus-ring);
-		outline-offset: 2px;
-	}
-
-	.content {
-		display: grid;
-		grid-template-columns: auto minmax(0, 1fr);
-		align-items: center;
-		justify-items: start;
-		gap: var(--dry-option-swatch-group-item-gap, var(--dry-space-2_5));
-		padding: var(--dry-option-swatch-group-padding-y, var(--dry-space-2))
-			var(--dry-option-swatch-group-padding-x, var(--dry-space-2_5));
-		min-block-size: var(--dry-option-swatch-group-min-block-size, 3rem);
-		text-align: left;
-	}
-
-	.root[data-size='compact'] .content {
-		grid-template-columns: auto;
-		justify-items: center;
-		gap: 0;
-		min-block-size: 0;
-		padding: var(--dry-option-swatch-group-compact-padding, var(--dry-space-0_5));
-	}
-
-	.root[data-size='compact'] {
-		background: transparent;
-		border-color: transparent;
-		border-radius: 999px;
-		box-shadow: none;
-	}
-
-	.root[data-size='compact']:hover:not([data-disabled]) {
-		background: color-mix(in srgb, var(--dry-color-fill-selected) 6%, transparent);
-		border-color: transparent;
-	}
-
-	.root[data-size='compact'][data-state='checked'] {
-		--dry-option-swatch-group-swatch-border: color-mix(
-			in srgb,
-			var(--_swatch-item-selected-border) 34%,
-			var(--dry-color-stroke-weak) 66%
-		);
-
-		background: color-mix(in srgb, var(--dry-color-fill-selected) 6%, transparent);
-		border-color: transparent;
-		box-shadow: 0 0 0 1px var(--_swatch-item-selected-border);
-	}
-
-	.root[data-size='compact'][data-state='checked']:hover:not([data-disabled]) {
-		background: color-mix(in srgb, var(--dry-color-fill-selected) 8%, transparent);
-	}
-
-	.root[data-disabled] {
-		opacity: 0.6;
-		border-color: var(--dry-color-stroke-disabled);
-		box-shadow: none;
-	}
-</style>

package/dist/option-swatch-group/option-swatch-group-item-button.svelte.d.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLButtonAttributes, 'value'> {
-    value: string;
-    disabled?: boolean;
-    unavailable?: boolean;
-    size?: 'default' | 'compact';
-    children: Snippet;
-}
-declare const OptionSwatchGroupItemButton: import("svelte").Component<Props, {}, "">;
-type OptionSwatchGroupItemButton = ReturnType<typeof OptionSwatchGroupItemButton>;
-export default OptionSwatchGroupItemButton;

package/dist/option-swatch-group/option-swatch-group-label.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
-
-	interface Props extends HTMLAttributes<HTMLSpanElement> {
-		children?: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<span data-part="label" data-option-swatch-group-label class={className} {...rest}
-	>{@render children?.()}</span
->
-
-<style>
-	[data-option-swatch-group-label] {
-		grid-column: 2;
-		grid-row: 1;
-		font-size: var(--dry-type-small-size);
-		font-weight: 600;
-		line-height: 1.2;
-	}
-</style>

package/dist/option-swatch-group/option-swatch-group-label.svelte.d.ts

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

package/dist/option-swatch-group/option-swatch-group-meta.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
-
-	interface Props extends HTMLAttributes<HTMLSpanElement> {
-		children?: Snippet;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<span data-part="meta" data-option-swatch-group-meta class={className} {...rest}
-	>{@render children?.()}</span
->
-
-<style>
-	[data-option-swatch-group-meta] {
-		grid-column: 2;
-		grid-row: 2;
-		color: var(--dry-option-swatch-muted);
-		font-size: var(--dry-type-tiny-size);
-		line-height: 1.2;
-	}
-</style>

package/dist/option-swatch-group/option-swatch-group-meta.svelte.d.ts

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