@dryui/ui 0.4.1 → 0.5.0

package/dist/button/button.svelte

@@ -351,8 +351,12 @@
 		}
 
 		&[aria-expanded='true'] {
-			--_dry-btn-bg: var(--dry-btn-bg, var(--dry-color-fill));
-			--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-brand));
+			--_dry-btn-bg: var(--dry-btn-trigger-open-bg, var(--dry-btn-bg, var(--dry-color-fill)));
+			--_dry-btn-color: var(
+				--dry-btn-trigger-open-color,
+				var(--dry-btn-color, var(--dry-color-text-brand))
+			);
+			--_dry-btn-border: var(--dry-btn-trigger-open-border, var(--dry-btn-border, transparent));
 		}
 	}
 

package/dist/index.d.ts

@@ -56,6 +56,8 @@ export { InputGroup } from './input-group/index.js';
 export type { InputGroupRootProps, InputGroupPrefixProps, InputGroupInputProps, InputGroupSuffixProps, InputGroupSelectProps, InputGroupSeparatorProps, InputGroupActionProps } from './input-group/index.js';
 export { OptionSwatchGroup } from './option-swatch-group/index.js';
 export type { OptionSwatchGroupRootProps, OptionSwatchGroupItemProps, OptionSwatchGroupSwatchProps, OptionSwatchGroupLabelProps, OptionSwatchGroupMetaProps } from './option-swatch-group/index.js';
+export { OptionPicker } from './option-picker/index.js';
+export type { OptionPickerRootProps, OptionPickerItemProps, OptionPickerPreviewProps, OptionPickerLabelProps, OptionPickerDescriptionProps, OptionPickerMetaProps } from './option-picker/index.js';
 export { Container } from './container/index.js';
 export type { ContainerProps } from './container/index.js';
 export { Separator } from './separator/index.js';

package/dist/index.js

@@ -28,6 +28,7 @@ export { Toggle } from './toggle/index.js';
 export { ToggleGroup } from './toggle-group/index.js';
 export { InputGroup } from './input-group/index.js';
 export { OptionSwatchGroup } from './option-swatch-group/index.js';
+export { OptionPicker } from './option-picker/index.js';
 // Phase 4 — Layout Primitives
 export { Container } from './container/index.js';
 export { Separator } from './separator/index.js';

package/dist/mega-menu/mega-menu-link.svelte

@@ -58,12 +58,11 @@
 <style>
 	[data-mega-menu-link] {
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
+		grid-template-columns: max-content minmax(0, 1fr);
 		align-items: start;
 		gap: var(--dry-space-3, 0.75rem);
 		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
-		border: 0;
+		border: 1px solid var(--dry-mega-menu-link-border, transparent);
 		border-radius: var(--dry-radius-md, 0.375rem);
 		background: none;
 		font: inherit;
@@ -72,26 +71,67 @@
 		color: inherit;
 		cursor: pointer;
 		appearance: none;
-		transition: background var(--dry-duration-fast, 100ms) ease;
+		box-shadow: var(--dry-mega-menu-link-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;
 	}
 
-	[data-mega-menu-link]:hover {
-		background: var(--dry-color-bg-overlay, #f3f4f6);
+	[data-mega-menu-link]:hover,
+	[data-mega-menu-link]:focus-visible {
+		background: var(--dry-mega-menu-link-hover-bg, var(--dry-color-bg-overlay, #f3f4f6));
+		border-color: var(--dry-mega-menu-link-hover-border, var(--dry-color-stroke-weak, #e2e8f0));
+		box-shadow: var(--dry-mega-menu-link-hover-shadow, none);
+	}
+
+	[data-mega-menu-link][data-selected],
+	[data-mega-menu-link][aria-pressed='true'],
+	[data-mega-menu-link][aria-current='true'] {
+		background: var(
+			--dry-mega-menu-link-selected-bg,
+			var(--dry-mega-menu-link-hover-bg, var(--dry-color-bg-overlay, #f3f4f6))
+		);
+		border-color: var(
+			--dry-mega-menu-link-selected-border,
+			var(--dry-mega-menu-link-hover-border, var(--dry-color-stroke-weak, #e2e8f0))
+		);
+		box-shadow: var(
+			--dry-mega-menu-link-selected-shadow,
+			var(--dry-mega-menu-link-hover-shadow, none)
+		);
 	}
 
 	[data-mega-menu-link] [data-part='link-icon'] {
 		color: var(--dry-color-text-weak);
 	}
 
+	[data-mega-menu-link][data-selected] [data-part='link-icon'],
+	[data-mega-menu-link][aria-pressed='true'] [data-part='link-icon'],
+	[data-mega-menu-link][aria-current='true'] [data-part='link-icon'] {
+		color: var(--dry-color-text-strong, #1a1a2e);
+	}
+
+	[data-mega-menu-link] [data-part='link-content'] {
+		display: grid;
+		gap: var(--dry-space-0_5, 0.125rem);
+	}
+
 	[data-mega-menu-link] [data-part='link-text'] {
 		font-size: var(--dry-type-ui-control-size, var(--dry-text-sm-size, 0.875rem));
 		font-weight: 500;
 		color: var(--dry-color-text-strong, #1a1a2e);
 	}
 
+	[data-mega-menu-link][data-selected] [data-part='link-text'],
+	[data-mega-menu-link][aria-pressed='true'] [data-part='link-text'],
+	[data-mega-menu-link][aria-current='true'] [data-part='link-text'] {
+		font-weight: 600;
+	}
+
 	[data-mega-menu-link] [data-part='link-description'] {
+		display: block;
 		font-size: var(--dry-type-ui-caption-size, var(--dry-text-xs-size, 0.75rem));
 		color: var(--dry-color-text-weak, #64748b);
-		margin-top: var(--dry-space-0_5, 0.125rem);
 	}
 </style>

package/dist/mega-menu/mega-menu-panel.svelte

@@ -78,7 +78,7 @@
 		inset: unset;
 		margin: 0;
 		z-index: var(--dry-layer-overlay, 50);
-		background: var(--dry-color-bg-overlay, white);
+		background: var(--dry-mega-menu-panel-bg, var(--dry-color-bg-overlay, white));
 		border: 1px solid var(--dry-color-stroke-weak, #e2e8f0);
 		border-radius: var(--dry-radius-lg, 0.5rem);
 		box-shadow: var(--dry-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));

package/dist/option-picker/index.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { SelectableTileGroupDescriptionProps, SelectableTileGroupItemProps as PrimitiveOptionPickerItemProps, SelectableTileGroupLabelProps as OptionPickerLabelProps, SelectableTileGroupMetaProps as OptionPickerMetaProps, SelectableTileGroupRootProps as PrimitiveOptionPickerRootProps } from '@dryui/primitives';
+export interface OptionPickerRootProps extends PrimitiveOptionPickerRootProps {
+    columns?: 1 | 2 | 3 | 4;
+}
+export interface OptionPickerItemProps extends PrimitiveOptionPickerItemProps {
+    layout?: 'inline' | 'stacked';
+    size?: 'default' | 'compact' | 'visual';
+    unavailable?: boolean;
+}
+export interface OptionPickerPreviewProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: string;
+    shape?: 'circle' | 'rounded' | 'square' | 'pill';
+    variant?: 'default' | 'preset' | 'font' | 'shape';
+    children?: Snippet;
+}
+export type { OptionPickerLabelProps, OptionPickerMetaProps };
+export type { SelectableTileGroupDescriptionProps as OptionPickerDescriptionProps };
+import OptionPickerRoot from './option-picker-root.svelte';
+import OptionPickerItem from './option-picker-item.svelte';
+import OptionPickerPreview from './option-picker-preview.svelte';
+import OptionPickerLabel from './option-picker-label.svelte';
+import OptionPickerDescription from './option-picker-description.svelte';
+import OptionPickerMeta from './option-picker-meta.svelte';
+export declare const OptionPicker: {
+    Root: typeof OptionPickerRoot;
+    Item: typeof OptionPickerItem;
+    Preview: typeof OptionPickerPreview;
+    Label: typeof OptionPickerLabel;
+    Description: typeof OptionPickerDescription;
+    Meta: typeof OptionPickerMeta;
+};

package/dist/option-picker/index.js

@@ -0,0 +1,14 @@
+import OptionPickerRoot from './option-picker-root.svelte';
+import OptionPickerItem from './option-picker-item.svelte';
+import OptionPickerPreview from './option-picker-preview.svelte';
+import OptionPickerLabel from './option-picker-label.svelte';
+import OptionPickerDescription from './option-picker-description.svelte';
+import OptionPickerMeta from './option-picker-meta.svelte';
+export const OptionPicker = {
+    Root: OptionPickerRoot,
+    Item: OptionPickerItem,
+    Preview: OptionPickerPreview,
+    Label: OptionPickerLabel,
+    Description: OptionPickerDescription,
+    Meta: OptionPickerMeta
+};

package/dist/option-picker/option-picker-description.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children?: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div data-part="description" data-option-picker-description class={className} {...rest}>
+	{@render children?.()}
+</div>
+
+<style>
+	[data-option-picker-description] {
+		grid-column: var(--dry-option-picker-description-column, 2);
+		grid-row: var(--dry-option-picker-description-row, 2);
+		font-size: var(--dry-type-small-size);
+		line-height: 1.35;
+		color: var(--dry-color-text-weak);
+		text-wrap: pretty;
+	}
+</style>

package/dist/option-picker/option-picker-description.svelte.d.ts

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

package/dist/option-picker/option-picker-item.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getSelectableTileGroupCtx } from '../option-swatch-group/context.svelte.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'value'> {
+		value: string;
+		disabled?: boolean;
+		unavailable?: boolean;
+		layout?: 'inline' | 'stacked';
+		size?: 'default' | 'compact' | 'visual';
+		children: Snippet;
+	}
+
+	let {
+		value,
+		disabled = false,
+		unavailable = false,
+		layout = 'inline',
+		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-layout={layout}
+	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-picker-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 {
+		--_option-picker-selected-bg: var(
+			--dry-option-picker-selected-bg,
+			color-mix(in srgb, var(--dry-color-fill-selected) 12%, var(--dry-color-bg-raised) 88%)
+		);
+		--_option-picker-selected-bg-hover: var(
+			--dry-option-picker-selected-bg-hover,
+			color-mix(in srgb, var(--dry-color-fill-selected) 16%, var(--dry-color-bg-raised) 84%)
+		);
+		--_option-picker-selected-border: var(
+			--dry-option-picker-selected-border,
+			var(--dry-color-stroke-selected)
+		);
+
+		display: grid;
+		background: var(--dry-option-picker-bg, var(--dry-color-bg-base));
+		border: 1px solid var(--dry-option-picker-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-option-picker-radius, var(--dry-radius-lg));
+		box-shadow: var(--dry-option-picker-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-picker-color, var(--dry-color-text-strong));
+		--dry-btn-padding-x: 0;
+		--dry-btn-padding-y: 0;
+		--dry-btn-radius: var(--dry-option-picker-radius, var(--dry-radius-lg));
+		--dry-btn-justify: stretch;
+		--dry-btn-align: stretch;
+		--dry-btn-min-height: 0;
+
+		--dry-option-picker-preview-size: 2.25rem;
+		--dry-option-picker-preview-radius: var(--dry-radius-md);
+		--dry-option-picker-preview-column: 1;
+		--dry-option-picker-preview-row: 1 / span 3;
+		--dry-option-picker-label-column: 2;
+		--dry-option-picker-label-row: 1;
+		--dry-option-picker-description-column: 2;
+		--dry-option-picker-description-row: 2;
+		--dry-option-picker-meta-column: 2;
+		--dry-option-picker-meta-row: 3;
+	}
+
+	.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-picker-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(--_option-picker-selected-border);
+		background: var(--_option-picker-selected-bg);
+	}
+
+	.root[data-state='checked']:hover:not([data-disabled]) {
+		background: var(--_option-picker-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-picker-item-gap, var(--dry-space-3));
+		padding: var(--dry-option-picker-padding-y, var(--dry-space-3))
+			var(--dry-option-picker-padding-x, var(--dry-space-3));
+		min-block-size: var(--dry-option-picker-min-block-size, 3.5rem);
+		text-align: left;
+	}
+
+	.root[data-layout='stacked'] .content {
+		grid-template-columns: 1fr;
+		justify-items: center;
+		text-align: center;
+		--dry-option-picker-preview-size: 3rem;
+		--dry-option-picker-preview-column: 1;
+		--dry-option-picker-preview-row: 1;
+		--dry-option-picker-label-column: 1;
+		--dry-option-picker-label-row: 2;
+		--dry-option-picker-description-column: 1;
+		--dry-option-picker-description-row: 3;
+		--dry-option-picker-meta-column: 1;
+		--dry-option-picker-meta-row: 4;
+	}
+
+	.root[data-size='compact'] .content {
+		min-block-size: 2.75rem;
+	}
+
+	.root[data-size='visual'] .content {
+		min-block-size: var(--dry-option-picker-visual-min-block-size, 5.5rem);
+	}
+
+	.root[data-disabled] {
+		opacity: 0.6;
+		border-color: var(--dry-color-stroke-disabled);
+		box-shadow: none;
+	}
+</style>

package/dist/option-picker/option-picker-item.svelte.d.ts

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

package/dist/option-picker/option-picker-label.svelte

@@ -0,0 +1,24 @@
+<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 data-part="label" data-option-picker-label class={className} {...rest}>
+	{@render children?.()}
+</span>
+
+<style>
+	[data-option-picker-label] {
+		grid-column: var(--dry-option-picker-label-column, 2);
+		grid-row: var(--dry-option-picker-label-row, 1);
+		font-size: var(--dry-type-small-size);
+		font-weight: 600;
+		line-height: 1.2;
+	}
+</style>

package/dist/option-picker/option-picker-label.svelte.d.ts

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

package/dist/option-picker/option-picker-meta.svelte

@@ -0,0 +1,24 @@
+<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 data-part="meta" data-option-picker-meta class={className} {...rest}>
+	{@render children?.()}
+</span>
+
+<style>
+	[data-option-picker-meta] {
+		grid-column: var(--dry-option-picker-meta-column, 2);
+		grid-row: var(--dry-option-picker-meta-row, 3);
+		font-size: var(--dry-type-tiny-size);
+		line-height: 1.2;
+		color: var(--dry-color-text-weaker, var(--dry-color-text-weak));
+	}
+</style>

package/dist/option-picker/option-picker-meta.svelte.d.ts

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

package/dist/option-picker/option-picker-preview.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		color?: string;
+		shape?: 'circle' | 'rounded' | 'square' | 'pill';
+		variant?: 'default' | 'preset' | 'font' | 'shape';
+		children?: Snippet;
+	}
+
+	let { color, shape = 'rounded', variant = 'default', children, ...rest }: Props = $props();
+
+	function attachPreviewVars(previewColor: string | undefined) {
+		return (node: HTMLSpanElement) => {
+			if (previewColor) {
+				node.style.setProperty('--dry-option-picker-preview-bg', previewColor);
+			} else {
+				node.style.removeProperty('--dry-option-picker-preview-bg');
+			}
+		};
+	}
+</script>
+
+<span
+	{@attach attachPreviewVars(color)}
+	data-option-picker-preview
+	data-option-picker-preview-shape={shape}
+	data-variant={variant !== 'default' ? variant : undefined}
+	{...rest}
+>
+	{@render children?.()}
+</span>
+
+<style>
+	[data-option-picker-preview] {
+		display: inline-grid;
+		grid-column: var(--dry-option-picker-preview-column, 1);
+		grid-row: var(--dry-option-picker-preview-row, 1 / span 3);
+		place-items: center;
+		align-self: center;
+		block-size: var(--dry-option-picker-preview-size, 2.25rem);
+		aspect-ratio: 1;
+		padding: var(--dry-option-picker-preview-padding, 0);
+		border: 1px solid var(--dry-option-picker-preview-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-option-picker-preview-radius, var(--dry-radius-md));
+		background: var(
+			--dry-option-picker-preview-bg,
+			color-mix(in srgb, var(--dry-color-fill-weak) 72%, var(--dry-color-bg-base) 28%)
+		);
+		color: var(--dry-option-picker-preview-color, var(--dry-color-text-strong));
+		box-shadow: var(--dry-option-picker-preview-shadow, none);
+		overflow: hidden;
+	}
+
+	[data-option-picker-preview-shape='circle'] {
+		border-radius: 999px;
+	}
+
+	[data-option-picker-preview-shape='square'] {
+		border-radius: var(--dry-radius-sm);
+	}
+
+	[data-option-picker-preview-shape='pill'] {
+		border-radius: 999px;
+		padding-inline: var(--dry-space-3);
+		aspect-ratio: auto;
+	}
+
+	[data-option-picker-preview][data-variant='preset'] {
+		--dry-option-picker-preview-color: white;
+		--dry-option-picker-preview-border: color-mix(
+			in srgb,
+			var(--_preset-color) 46%,
+			var(--dry-color-stroke-weak) 54%
+		);
+		--dry-option-picker-preview-size: 2.75rem;
+		background: linear-gradient(
+			155deg,
+			color-mix(in srgb, white 18%, var(--_preset-color) 82%) 0%,
+			var(--_preset-color) 58%,
+			color-mix(in srgb, black 12%, var(--_preset-color) 88%) 100%
+		);
+		box-shadow:
+			inset 0 1px 0 color-mix(in srgb, white 22%, transparent),
+			inset 0 -1px 0 color-mix(in srgb, black 10%, transparent);
+		transition: border-radius var(--dry-duration-fast, 100ms) ease;
+	}
+
+	[data-option-picker-preview][data-variant='font'] {
+		--dry-option-picker-preview-size: 2.75rem;
+		--dry-option-picker-preview-bg: color-mix(
+			in srgb,
+			var(--dry-color-fill-weak) 58%,
+			var(--dry-color-bg-base) 42%
+		);
+		--dry-option-picker-preview-border: color-mix(
+			in srgb,
+			var(--dry-color-stroke-weak) 72%,
+			transparent
+		);
+	}
+
+	[data-option-picker-preview][data-variant='shape'] {
+		--dry-option-picker-preview-bg: var(--dry-color-bg-base);
+		--dry-option-picker-preview-border: color-mix(
+			in srgb,
+			var(--dry-color-stroke-strong) 82%,
+			transparent
+		);
+		--dry-option-picker-preview-size: 2rem;
+		transition: border-radius var(--dry-duration-fast, 100ms) ease;
+	}
+
+	[data-option-picker-preview][data-variant='preset'][data-shape='sharp'],
+	[data-option-picker-preview][data-variant='shape'][data-shape='sharp'] {
+		--dry-option-picker-preview-radius: 2px;
+	}
+
+	[data-option-picker-preview][data-variant='preset'][data-shape='soft'],
+	[data-option-picker-preview][data-variant='shape'][data-shape='soft'] {
+		--dry-option-picker-preview-radius: 6px;
+	}
+
+	[data-option-picker-preview][data-variant='preset'][data-shape='rounded'] {
+		--dry-option-picker-preview-radius: 10px;
+	}
+
+	[data-option-picker-preview][data-variant='shape'][data-shape='rounded'] {
+		--dry-option-picker-preview-radius: 16px;
+	}
+
+	[data-option-picker-preview][data-variant='preset'][data-shape='pill'],
+	[data-option-picker-preview][data-variant='shape'][data-shape='pill'] {
+		--dry-option-picker-preview-radius: 9999px;
+	}
+</style>

package/dist/option-picker/option-picker-preview.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    color?: string;
+    shape?: 'circle' | 'rounded' | 'square' | 'pill';
+    variant?: 'default' | 'preset' | 'font' | 'shape';
+    children?: Snippet;
+}
+declare const OptionPickerPreview: import("svelte").Component<Props, {}, "">;
+type OptionPickerPreview = ReturnType<typeof OptionPickerPreview>;
+export default OptionPickerPreview;

package/dist/option-picker/option-picker-root.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setSelectableTileGroupCtx } from '../option-swatch-group/context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		value?: string;
+		disabled?: boolean;
+		orientation?: 'horizontal' | 'vertical';
+		columns?: 1 | 2 | 3 | 4;
+		children: Snippet;
+	}
+
+	let {
+		value = $bindable(''),
+		disabled = false,
+		orientation = 'horizontal',
+		columns,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	setSelectableTileGroupCtx({
+		get value() {
+			return value;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get orientation() {
+			return orientation;
+		},
+		select(nextValue: string) {
+			value = nextValue;
+		},
+		isSelected(itemValue: string) {
+			return value === itemValue;
+		}
+	});
+</script>
+
+<div
+	role="radiogroup"
+	aria-orientation={orientation}
+	data-orientation={orientation}
+	data-disabled={disabled || undefined}
+	data-columns={columns}
+	data-option-picker-root
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-option-picker-root] {
+		display: grid;
+		grid-template-columns: repeat(
+			auto-fit,
+			minmax(var(--dry-option-picker-min-column, 10rem), 1fr)
+		);
+		gap: var(--dry-option-picker-gap, var(--dry-space-3));
+		align-items: stretch;
+	}
+
+	[data-option-picker-root][data-orientation='vertical'] {
+		grid-template-columns: 1fr;
+	}
+
+	[data-option-picker-root][data-columns='2'] {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	[data-option-picker-root][data-columns='3'] {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
+	[data-option-picker-root][data-columns='4'] {
+		grid-template-columns: repeat(4, minmax(0, 1fr));
+	}
+</style>

package/dist/option-picker/option-picker-root.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    disabled?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    columns?: 1 | 2 | 3 | 4;
+    children: Snippet;
+}
+declare const OptionPickerRoot: import("svelte").Component<Props, {}, "value">;
+type OptionPickerRoot = ReturnType<typeof OptionPickerRoot>;
+export default OptionPickerRoot;

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

@@ -1,9 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-export type { SelectableTileGroupRootProps as OptionSwatchGroupRootProps } from '@dryui/primitives';
-export type { SelectableTileGroupItemProps as OptionSwatchGroupItemProps } from '@dryui/primitives';
+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';

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

@@ -8,10 +8,18 @@
 		value: string;
 		disabled?: boolean;
 		unavailable?: boolean;
+		size?: 'default' | 'compact';
 		children: Snippet;
 	}
 
-	let { value, disabled = false, unavailable = false, children, ...rest }: Props = $props();
+	let {
+		value,
+		disabled = false,
+		unavailable = false,
+		size = 'default',
+		children,
+		...rest
+	}: Props = $props();
 
 	const ctx = getSelectableTileGroupCtx();
 	const isDisabled = $derived(disabled || unavailable || ctx.disabled);
@@ -55,22 +63,152 @@
 	}
 </script>
 
-<Button
-	variant="outline"
-	type="button"
-	role="radio"
-	aria-checked={isSelected}
-	disabled={isDisabled}
-	data-option-swatch-group-item
+<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}
-	data-value={value}
-	tabindex={isSelected ? 0 : -1}
-	{...rest}
-	onclick={() => {
-		if (!isDisabled) ctx.select(value);
-	}}
-	onkeydown={handleKeydown}
 >
-	{@render children()}
-</Button>
+	<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

@@ -4,6 +4,7 @@ interface Props extends Omit<HTMLButtonAttributes, 'value'> {
     value: string;
     disabled?: boolean;
     unavailable?: boolean;
+    size?: 'default' | 'compact';
     children: Snippet;
 }
 declare const OptionSwatchGroupItemButton: import("svelte").Component<Props, {}, "">;

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

@@ -7,6 +7,7 @@
 		value?: string;
 		disabled?: boolean;
 		orientation?: 'horizontal' | 'vertical';
+		columns?: 1 | 2 | 3 | 4;
 		children: Snippet;
 	}
 
@@ -14,6 +15,7 @@
 		value = $bindable(''),
 		disabled = false,
 		orientation = 'horizontal',
+		columns,
 		class: className,
 		children,
 		...rest
@@ -43,6 +45,7 @@
 	aria-orientation={orientation}
 	data-orientation={orientation}
 	data-disabled={disabled || undefined}
+	data-columns={columns}
 	data-option-swatch-group-root
 	class={className}
 	{...rest}
@@ -53,11 +56,26 @@
 <style>
 	[data-option-swatch-group-root] {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(7.5rem, max-content));
-		gap: var(--dry-space-3);
+		grid-template-columns: repeat(
+			auto-fit,
+			minmax(var(--dry-option-swatch-group-min-column, 4rem), max-content)
+		);
+		gap: var(--dry-option-swatch-group-gap, var(--dry-space-3));
 	}
 
 	[data-option-swatch-group-root][data-orientation='vertical'] {
 		grid-template-columns: 1fr;
 	}
+
+	[data-option-swatch-group-root][data-columns='2'] {
+		grid-template-columns: repeat(2, max-content);
+	}
+
+	[data-option-swatch-group-root][data-columns='3'] {
+		grid-template-columns: repeat(3, max-content);
+	}
+
+	[data-option-swatch-group-root][data-columns='4'] {
+		grid-template-columns: repeat(4, max-content);
+	}
 </style>

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

@@ -4,6 +4,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
     value?: string;
     disabled?: boolean;
     orientation?: 'horizontal' | 'vertical';
+    columns?: 1 | 2 | 3 | 4;
     children: Snippet;
 }
 declare const OptionSwatchGroupRoot: import("svelte").Component<Props, {}, "value">;

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

@@ -8,17 +8,21 @@
 		children?: Snippet;
 	}
 
-	let { color, shape = 'circle', class: className, style, children, ...rest }: Props = $props();
+	let { color, shape = 'circle', class: className, children, ...rest }: Props = $props();
 
-	function setSwatchChip(node: HTMLSpanElement) {
-		$effect(() => {
-			node.style.cssText = `${style ?? ''}${color ? `; --dry-option-swatch-chip: ${color};` : ''}`;
-		});
+	function setSwatchChip(swatchColor: string | undefined) {
+		return (node: HTMLSpanElement) => {
+			if (swatchColor) {
+				node.style.setProperty('--dry-option-swatch-chip', swatchColor);
+			} else {
+				node.style.removeProperty('--dry-option-swatch-chip');
+			}
+		};
 	}
 </script>
 
 <span
-	{@attach setSwatchChip}
+	{@attach setSwatchChip(color)}
 	data-option-swatch-group-swatch
 	data-option-swatch-group-rounded={shape === 'rounded' || undefined}
 	class={className}
@@ -36,13 +40,10 @@
 		grid-row: 1 / span 2;
 		align-self: center;
 		aspect-ratio: 1;
-		height: 1.5rem;
+		height: var(--dry-option-swatch-group-swatch-size, 1.5rem);
 		border-radius: 999px;
-		border: 1px solid color-mix(in srgb, black 16%, transparent);
+		border: 1px solid var(--dry-option-swatch-group-swatch-border, var(--dry-color-stroke-weak));
 		background: var(--dry-option-swatch-chip);
-		box-shadow:
-			inset 0 0 0 1px rgb(255 255 255 / 0.24),
-			0 1px 3px rgb(15 23 42 / 0.15);
 	}
 
 	[data-option-swatch-group-rounded] {

package/dist/sidebar/sidebar-item.svelte

@@ -18,8 +18,7 @@
 	[data-sidebar-item] {
 		position: relative;
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
+		grid-template-columns: max-content minmax(0, 1fr) max-content;
 		align-items: center;
 		gap: var(--dry-space-3);
 		min-height: var(--dry-sidebar-item-height, var(--dry-space-12));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {