@insymetri/styleguide 0.1.23 → 0.1.24

package/dist/DensityProvider/DensityProvider.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {setContext} from 'svelte'
+	import {DENSITY_KEY, type Density} from '../density'
+
+	type Props = {
+		density?: Density
+		children: Snippet
+	}
+
+	let {density = 'default', children}: Props = $props()
+
+	setContext(DENSITY_KEY, {get current() { return density }})
+</script>
+
+{@render children()}

package/dist/DensityProvider/DensityProvider.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { type Density } from '../density';
+type Props = {
+    density?: Density;
+    children: Snippet;
+};
+declare const DensityProvider: import("svelte").Component<Props, {}, "">;
+type DensityProvider = ReturnType<typeof DensityProvider>;
+export default DensityProvider;

package/dist/IIButton/IIButton.svelte

@@ -4,6 +4,7 @@
 	import type {IconName} from '../icons'
 	import IIIcon from '../IIIcon/IIIcon.svelte'
 	import {cn} from '../utils/cn'
+	import {useDensity} from '../density'
 
 	type BaseProps = {
 		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent'
@@ -34,10 +35,11 @@
 		...restProps
 	}: Props = $props()
 
+	const density = useDensity()
 	const isDisabled = $derived(disabled || loading)
 
 	const baseClasses =
-		'inline-flex items-center justify-center gap-8 whitespace-nowrap rounded-control cursor-default transition-colors duration-base ease-in-out no-underline disabled:cursor-not-allowed'
+		'inline-flex items-center justify-center gap-8 whitespace-nowrap cursor-default transition-colors duration-base ease-in-out no-underline disabled:cursor-not-allowed'
 
 	const variantClasses = {
 		primary:
@@ -53,10 +55,16 @@
 			'bg-button-accent text-button-accent border-0 hover:bg-button-accent-hover disabled:bg-button-accent-disabled',
 	} as const
 
-	const sizeClasses = {
-		sm: 'py-4 px-8 text-tiny h-24',
-		md: 'py-5 px-12 text-small h-28',
-		lg: 'py-10 px-16 text-large h-32',
+	const densityClasses = {
+		compact: 'h-28 py-4 px-8 text-tiny rounded-control',
+		default: 'h-32 py-5 px-12 text-small rounded-control',
+		comfortable: 'h-40 py-8 px-12 text-small rounded-control',
+		mobile: 'h-48 py-10 px-16 text-default rounded-control',
+	} as const
+
+	const fixedSizeClasses = {
+		sm: 'py-4 px-8 text-tiny h-24 rounded-control',
+		lg: 'py-10 px-16 text-large h-40 rounded-control',
 	} as const
 
 	const iconSizeClasses = {
@@ -64,6 +72,10 @@
 		md: 'w-14 h-14',
 		lg: 'w-16 h-16',
 	} as const
+
+	const resolvedSizeClasses = $derived(
+		size === 'md' ? densityClasses[density.value] : fixedSizeClasses[size]
+	)
 </script>
 
 {#snippet iconContent()}
@@ -80,7 +92,7 @@
 	<a
 		bind:this={ref}
 		{href}
-		class={cn(baseClasses, variantClasses[variant], sizeClasses[size], className)}
+		class={cn(baseClasses, variantClasses[variant], resolvedSizeClasses, className)}
 		{...restProps as HTMLAnchorAttributes}
 	>
 		{@render iconContent()}
@@ -89,7 +101,7 @@
 	<button
 		bind:this={ref}
 		disabled={isDisabled}
-		class={cn(baseClasses, variantClasses[variant], sizeClasses[size], className)}
+		class={cn(baseClasses, variantClasses[variant], resolvedSizeClasses, className)}
 		{...restProps as HTMLButtonAttributes}
 	>
 		{@render iconContent()}

package/dist/IICombobox/IICombobox.svelte

@@ -3,6 +3,7 @@
 	import {Combobox} from 'bits-ui'
 	import {IIIcon} from '../IIIcon'
 	import {cn} from '../utils/cn'
+	import {useDensity} from '../density'
 
 	// Simple default item type for basic usage
 	type SimpleItem = {
@@ -57,6 +58,15 @@
 		contentClass,
 	}: Props<T> = $props()
 
+	const density = useDensity()
+
+	const densityClasses = {
+		compact: 'h-28 rounded-control text-tiny',
+		default: 'h-32 rounded-control text-small',
+		comfortable: 'h-40 rounded-control text-small',
+		mobile: 'h-48 rounded-control text-default',
+	} as const
+
 	let inputValue = $state('')
 	let open = $state(false)
 
@@ -162,7 +172,10 @@
 			{placeholder}
 			{disabled}
 			oninput={handleInput}
-			class="w-full box-border py-5 px-12 text-small text-input-text bg-input-bg border border-input-border rounded-control transition-all duration-fast outline-none placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-input-bg-disabled motion-reduce:transition-none"
+			class={cn(
+				'w-full box-border py-5 px-12 text-input-text bg-input-bg border border-input-border transition-all duration-fast outline-none placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-input-bg-disabled motion-reduce:transition-none',
+				densityClasses[density.value]
+			)}
 		/>
 		<Combobox.Portal>
 			{#if filteredItems.length > 0 || emptyContent || loading}

package/dist/IICombobox/IIComboboxStories.svelte

@@ -87,7 +87,7 @@
 				/>
 			</div>
 			<button
-				class="px-12 py-5 rounded-control border border-button-secondary text-small text-button-secondary hover:border-button-secondary-hover cursor-default"
+				class="px-12 py-5 rounded-8 border border-button-secondary text-small text-button-secondary hover:border-button-secondary-hover cursor-default"
 				onclick={simulateLoading}
 			>
 				Simulate Load

package/dist/IIDateInput/IIDateInput.svelte

@@ -4,6 +4,7 @@
 	import {IIIcon} from '../IIIcon'
 	import {IIIconButton} from '../IIIconButton'
 	import {cn} from '../utils/cn'
+	import {useDensity} from '../density'
 
 	type Props = {
 		value: DateValue | undefined
@@ -27,6 +28,15 @@
 		class: className,
 	}: Props = $props()
 
+	const density = useDensity()
+
+	const densityClasses = {
+		compact: 'h-28 rounded-control text-tiny',
+		default: 'h-32 rounded-control text-small',
+		comfortable: 'h-40 rounded-control text-small',
+		mobile: 'h-48 rounded-control text-default',
+	} as const
+
 	const showError = $derived(error || !!errorMessage)
 </script>
 
@@ -37,7 +47,8 @@
 		{/if}
 		<DatePicker.Input
 			class={cn(
-				'flex items-center gap-4 py-5 px-12 border rounded-control text-small bg-input-bg border-input-border transition-all duration-fast hover:border-input-border-hover [&:has(:focus)]:border-input-border-hover motion-reduce:transition-none',
+				'flex items-center gap-4 px-12 border bg-input-bg border-input-border transition-all duration-fast hover:border-input-border-hover [&:has(:focus)]:border-input-border-hover motion-reduce:transition-none',
+				densityClasses[density.value],
 				showError && 'border-input-border-error [&:has(:focus)]:border-input-border-error',
 				disabled && 'bg-input-bg-disabled cursor-not-allowed'
 			)}
@@ -46,7 +57,7 @@
 				{#each segments as { part, value: segValue }, i (`${part}-${i}`)}
 					<DatePicker.Segment
 						{part}
-						class="py-4 min-w-[2ch] text-center text-input-text outline-none cursor-text rounded-4 transition-all duration-fast focus:bg-primary focus:text-inverse data-[placeholder]:text-input-placeholder motion-reduce:transition-none"
+						class="min-w-[2ch] text-center text-input-text outline-none cursor-text rounded-4 transition-all duration-fast focus:bg-primary focus:text-inverse data-[placeholder]:text-input-placeholder motion-reduce:transition-none"
 					>
 						{segValue}
 					</DatePicker.Segment>

package/dist/IIDatePicker/IIDatePicker.svelte

@@ -2,6 +2,7 @@
 	import {DatePicker} from 'bits-ui'
 	import type {DateValue} from '@internationalized/date'
 	import {IIIcon} from '../IIIcon'
+	import {useDensity} from '../density'
 
 	type Props = {
 		value: DateValue | undefined
@@ -10,6 +11,15 @@
 	}
 
 	let {value = $bindable(), label, onValueChange}: Props = $props()
+
+	const density = useDensity()
+
+	const densityClasses = {
+		compact: 'rounded-control text-tiny',
+		default: 'rounded-control text-small',
+		comfortable: 'rounded-control text-small',
+		mobile: 'rounded-control text-default',
+	} as const
 </script>
 
 <DatePicker.Root bind:value {onValueChange}>
@@ -18,7 +28,7 @@
 	{/if}
 	<div class="relative">
 		<DatePicker.Input
-			class="flex items-center gap-4 py-5 px-12 border border-strong rounded-control text-small text-gray-800 bg-surface transition-all duration-fast [&:has(:focus)]:border-primary [&:has(:focus)]:ring-3 [&:has(:focus)]:ring-primary"
+			class={`flex items-center gap-4 py-5 px-12 border border-strong bg-surface transition-all duration-fast [&:has(:focus)]:border-primary [&:has(:focus)]:ring-3 [&:has(:focus)]:ring-primary ${densityClasses[density.value]} text-gray-800`}
 		>
 			{#snippet children({segments})}
 				{#each segments as { part, value: segValue }, i (`${part}-${i}`)}

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -3,6 +3,7 @@
 	import {DropdownMenu} from 'bits-ui'
 	import {IIIcon} from '../IIIcon'
 	import {cn} from '../utils/cn'
+	import {useDensity} from '../density'
 
 	type Item = {
 		label: string
@@ -35,6 +36,15 @@
 		class: className,
 	}: Props = $props()
 
+	const density = useDensity()
+
+	const densityClasses = {
+		compact: 'h-28 rounded-control text-tiny',
+		default: 'h-32 rounded-control text-small',
+		comfortable: 'h-40 rounded-control text-small',
+		mobile: 'h-48 rounded-control text-default',
+	} as const
+
 	let open = $state(false)
 	let triggerEl = $state<HTMLElement | null>(null)
 	let triggerWidth = $state<number | undefined>(undefined)
@@ -60,7 +70,8 @@
 		bind:ref={triggerEl}
 		{disabled}
 		class={cn(
-			'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border rounded-control bg-input-bg cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
+			'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border bg-input-bg cursor-default text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
+			densityClasses[density.value],
 			open ? 'border-button-secondary-hover' : 'border-button-secondary',
 			className
 		)}

package/dist/IIIconButton/IIIconButton.svelte

@@ -3,6 +3,7 @@
 	import type {IconName} from '../icons'
 	import IIIcon from '../IIIcon/IIIcon.svelte'
 	import {cn} from '../utils/cn'
+	import {useDensity} from '../density'
 
 	type Props = Omit<HTMLButtonAttributes, 'disabled'> & {
 		iconName: IconName
@@ -25,10 +26,11 @@
 		...restProps
 	}: Props = $props()
 
+	const density = useDensity()
 	const isDisabled = $derived(disabled || loading)
 
 	const baseClasses =
-		'inline-flex items-center justify-center rounded-control cursor-default transition-colors duration-base ease-in-out disabled:cursor-not-allowed'
+		'inline-flex items-center justify-center cursor-default transition-colors duration-base ease-in-out disabled:cursor-not-allowed'
 
 	const variantClasses = {
 		primary:
@@ -44,10 +46,16 @@
 			'bg-button-accent text-button-accent border-0 hover:bg-button-accent-hover disabled:bg-button-accent-disabled',
 	} as const
 
-	const sizeClasses = {
-		sm: 'w-24 h-24 p-0',
-		md: 'w-28 h-28 p-0',
-		lg: 'w-32 h-32 p-0',
+	const densityClasses = {
+		compact: 'w-28 h-28 p-0 rounded-control',
+		default: 'w-32 h-32 p-0 rounded-control',
+		comfortable: 'w-40 h-40 p-0 rounded-control',
+		mobile: 'w-48 h-48 p-0 rounded-control',
+	} as const
+
+	const fixedSizeClasses = {
+		sm: 'w-24 h-24 p-0 rounded-control',
+		lg: 'w-40 h-40 p-0 rounded-control',
 	} as const
 
 	const iconSizeClasses = {
@@ -55,12 +63,16 @@
 		md: 'w-14 h-14',
 		lg: 'w-16 h-16',
 	} as const
+
+	const resolvedSizeClasses = $derived(
+		size === 'md' ? densityClasses[density.value] : fixedSizeClasses[size]
+	)
 </script>
 
 <button
 	bind:this={ref}
 	disabled={isDisabled}
-	class={cn(baseClasses, variantClasses[variant], sizeClasses[size], className)}
+	class={cn(baseClasses, variantClasses[variant], resolvedSizeClasses, className)}
 	{...restProps}
 >
 	{#if loading}

package/dist/IIInput/IIInput.svelte

@@ -3,6 +3,7 @@
 	import type {HTMLInputAttributes} from 'svelte/elements'
 	import IIIconButton from '../IIIconButton/IIIconButton.svelte'
 	import {cn} from '../utils/cn'
+	import {useDensity} from '../density'
 
 	type Props = Omit<HTMLInputAttributes, 'prefix'> & {
 		label?: string
@@ -33,6 +34,15 @@
 		...restProps
 	}: Props = $props()
 
+	const density = useDensity()
+
+	const densityClasses = {
+		compact: 'h-28 rounded-control text-small',
+		default: 'h-32 rounded-control text-small',
+		comfortable: 'h-40 rounded-control text-small',
+		mobile: 'h-48 rounded-control text-default',
+	} as const
+
 	const showError = $derived(error || !!errorMessage)
 	const isSearch = $derived(type === 'search')
 	const showClear = $derived(isSearch && !!value)
@@ -52,16 +62,17 @@
 	})
 </script>
 
-<div class={cn('flex flex-col gap-4', className)}>
+<div class={cn('flex flex-col', className)}>
 	{#if label}
-		<label for={restProps.id} class="text-small-emphasis text-body">
+		<label for={restProps.id} class="text-small-emphasis text-secondary mb-4">
 			{label}
 		</label>
 	{/if}
 	{#if hasAddons}
 		<div
 			class={cn(
-				'flex items-center bg-input-bg border border-input-border rounded-control transition-all duration-fast hover:border-input-border-hover focus-within:border-input-border-hover motion-reduce:transition-none',
+				'flex items-center bg-input-bg border border-input-border transition-all duration-fast hover:border-input-border-hover focus-within:border-input-border-hover motion-reduce:transition-none',
+				densityClasses[density.value],
 				showError && 'border-input-border-error focus-within:border-input-border-error',
 				shouldShake && 'animate-shake',
 				disabled && 'bg-input-bg-disabled cursor-not-allowed'
@@ -77,7 +88,7 @@
 				bind:value
 				{type}
 				{disabled}
-				class="py-5 px-12 text-small font-[family-name:var(--font-family)] text-input-text bg-transparent border-0 outline-none w-full box-border placeholder:text-input-placeholder disabled:text-input-text-disabled disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none"
+				class="py-5 px-12 h-full font-[family-name:var(--font-family)] text-input-text bg-transparent border-0 outline-none w-full box-border placeholder:text-input-placeholder disabled:text-input-text-disabled disabled:cursor-not-allowed [&::-webkit-search-cancel-button]:appearance-none"
 				{...restProps}
 			/>
 			{#if suffix}
@@ -106,7 +117,8 @@
 			{type}
 			{disabled}
 			class={cn(
-				'py-5 px-12 text-small font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-input-border rounded-control transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:bg-input-bg-disabled disabled:text-input-text-disabled disabled:cursor-not-allowed motion-reduce:transition-none motion-reduce:animate-none',
+				'py-5 px-12 font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-input-border transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:bg-input-bg-disabled disabled:text-input-text-disabled disabled:cursor-not-allowed motion-reduce:transition-none motion-reduce:animate-none',
+				densityClasses[density.value],
 				showError && 'border-input-border-error focus:border-input-border-error focus:ring-error',
 				shouldShake && 'animate-shake'
 			)}
@@ -114,8 +126,8 @@
 		/>
 	{/if}
 	{#if showError && errorMessage}
-		<span class="text-tiny text-error">{errorMessage}</span>
+		<span class="text-tiny text-error mt-4">{errorMessage}</span>
 	{:else if helperText}
-		<span class="text-tiny text-secondary">{helperText}</span>
+		<span class="text-tiny text-secondary mt-4">{helperText}</span>
 	{/if}
 </div>

package/dist/IIMultiSelect/IIMultiSelect.svelte

@@ -3,6 +3,7 @@
 	import {DropdownMenu} from 'bits-ui'
 	import {IIIcon} from '../IIIcon'
 	import {cn} from '../utils/cn'
+	import {useDensity} from '../density'
 
 	type Item = {
 		label: string
@@ -34,6 +35,15 @@
 		class: className,
 	}: Props = $props()
 
+	const density = useDensity()
+
+	const densityRadius = {
+		compact: 'rounded-control',
+		default: 'rounded-control',
+		comfortable: 'rounded-control',
+		mobile: 'rounded-control',
+	} as const
+
 	let open = $state(false)
 	let triggerEl = $state<HTMLElement | null>(null)
 	let triggerWidth = $state<number | undefined>(undefined)
@@ -75,7 +85,8 @@
 		bind:ref={triggerEl}
 		{disabled}
 		class={cn(
-			'flex items-center gap-4 py-5 pl-12 pr-8 border rounded-control bg-button-secondary cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
+			'flex items-center gap-4 py-5 pl-12 pr-8 border bg-button-secondary cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
+			densityRadius[density.value],
 			open ? 'border-button-secondary-hover' : 'border-button-secondary',
 			className
 		)}

package/dist/IIPillTabs/IIPillTabs.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import {cn} from '../utils/cn'
 	import IIDropdownInput from '../IIDropdownInput/IIDropdownInput.svelte'
+	import {useDensity} from '../density'
 
 	type Tab = {
 		value: string
@@ -17,6 +18,15 @@
 
 	let {tabs, value = $bindable(), onchange, class: className}: Props = $props()
 
+	const density = useDensity()
+
+	const densityClasses = {
+		compact: 'h-28 text-tiny',
+		default: 'h-32 text-small',
+		comfortable: 'h-40 text-small',
+		mobile: 'h-48 text-default',
+	} as const
+
 	let containerEl = $state<HTMLDivElement | null>(null)
 	let measureEl = $state<HTMLDivElement | null>(null)
 	let overflow = $state(false)
@@ -55,7 +65,8 @@
 		{#each tabs as tab (tab.value)}
 			<button
 				class={cn(
-					'flex items-center h-28 px-10 rounded-full border-none outline-none text-small cursor-default whitespace-nowrap',
+					'flex items-center px-10 rounded-full border-none outline-none cursor-default whitespace-nowrap',
+					densityClasses[density.value],
 					value === tab.value
 						? 'bg-gray-100 text-gray-700'
 						: 'bg-surface text-secondary shadow-pill hover:bg-gray-100 hover:text-gray-700'

package/dist/IISegmentedControl/IISegmentedControl.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import {cn} from '../utils/cn'
+	import {useDensity} from '../density'
 
 	type Item = {
 		label: string
@@ -17,6 +18,15 @@
 
 	let {items, value = $bindable(), onValueChange, size = 'sm', class: className}: Props = $props()
 
+	const density = useDensity()
+
+	const densityRadius = {
+		compact: 'rounded-control',
+		default: 'rounded-control',
+		comfortable: 'rounded-control',
+		mobile: 'rounded-control',
+	} as const
+
 	const sizeClasses = {
 		sm: 'px-12 py-4 text-small',
 		md: 'px-16 py-6 text-default',
@@ -33,7 +43,7 @@
 	}
 </script>
 
-<div class={cn('inline-flex border border-primary rounded-control overflow-hidden', className)} role="group">
+<div class={cn('inline-flex border border-primary overflow-hidden', densityRadius[density.value], className)} role="group">
 	{#each items as item (item.value)}
 		{@const isActive = value === item.value}
 		<button

package/dist/IITabs/IITabs.svelte

@@ -3,6 +3,7 @@
 	import {DropdownMenu, Tabs, type WithoutChildrenOrChild} from 'bits-ui'
 	import {IIIcon} from '../IIIcon'
 	import {cn} from '../utils/cn'
+	import {useDensity} from '../density'
 
 	type Tab = {
 		value: string
@@ -35,6 +36,15 @@
 	let overflowing = $state(false)
 	let dropdownOpen = $state(false)
 
+	const density = useDensity()
+
+	const densityRadius = {
+		compact: 'rounded-control',
+		default: 'rounded-control',
+		comfortable: 'rounded-control',
+		mobile: 'rounded-control',
+	} as const
+
 	const activeLabel = $derived(tabs.find(t => t.value === value)?.label ?? '')
 
 	$effect(() => {
@@ -69,7 +79,10 @@
 		<div class="flex items-center border-b border-primary px-24" style="padding-left: calc(2.4rem - 1.2rem - 1px)">
 			<DropdownMenu.Root bind:open={dropdownOpen}>
 				<DropdownMenu.Trigger
-					class="[all:unset] inline-flex items-center gap-4 py-4 pr-8 pl-12 border border-primary rounded-control bg-surface cursor-default transition-all duration-fast hover:border-strong motion-reduce:transition-none"
+					class={cn(
+						'[all:unset] inline-flex items-center gap-4 py-4 pr-8 pl-12 border border-primary bg-surface cursor-default transition-all duration-fast hover:border-strong motion-reduce:transition-none',
+						densityRadius[density.value]
+					)}
 				>
 					<span class="text-small-emphasis text-body">{activeLabel}</span>
 					<IIIcon iconName="caret-down" class="w-14 h-14 text-secondary shrink-0" />

package/dist/IIToggle/IIToggle.svelte

@@ -2,6 +2,7 @@
 	import type {Snippet} from 'svelte'
 	import {Toggle} from 'bits-ui'
 	import {cn} from '../utils/cn'
+	import {useDensity} from '../density'
 
 	type Props = {
 		pressed: boolean
@@ -23,10 +24,18 @@
 		class: className,
 	}: Props = $props()
 
-	const sizeClasses = {
-		sm: 'w-24 h-24',
-		md: 'w-28 h-28',
-		lg: 'w-32 h-32',
+	const density = useDensity()
+
+	const densityClasses = {
+		compact: 'w-28 h-28 rounded-control',
+		default: 'w-32 h-32 rounded-control',
+		comfortable: 'w-40 h-40 rounded-control',
+		mobile: 'w-48 h-48 rounded-control',
+	} as const
+
+	const fixedSizeClasses = {
+		sm: 'w-24 h-24 rounded-control',
+		lg: 'w-40 h-40 rounded-control',
 	} as const
 
 	const iconSizeClasses = {
@@ -34,6 +43,10 @@
 		md: '[&_svg]:w-14 [&_svg]:h-14',
 		lg: '[&_svg]:w-16 [&_svg]:h-16',
 	} as const
+
+	const resolvedSizeClasses = $derived(
+		size === 'md' ? densityClasses[density.value] : fixedSizeClasses[size]
+	)
 </script>
 
 <Toggle.Root
@@ -42,8 +55,8 @@
 	{disabled}
 	aria-label={ariaLabel}
 	class={cn(
-		'inline-flex items-center justify-center rounded-control cursor-default transition-colors duration-base ease-in-out text-secondary hover:bg-button-ghost-hover hover:text-button-ghost-hover data-[state=on]:bg-button-ghost-hover data-[state=on]:text-body disabled:opacity-50 disabled:cursor-not-allowed',
-		sizeClasses[size],
+		'inline-flex items-center justify-center cursor-default transition-colors duration-base ease-in-out text-secondary hover:bg-button-ghost-hover hover:text-button-ghost-hover data-[state=on]:bg-button-ghost-hover data-[state=on]:text-body disabled:opacity-50 disabled:cursor-not-allowed',
+		resolvedSizeClasses,
 		iconSizeClasses[size],
 		className
 	)}

package/dist/IIToggle/IIToggleStories.svelte

@@ -47,7 +47,7 @@
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">Toolbar Example</h2>
 		<p class="text-small text-secondary mb-12">Multiple toggles used together as a formatting toolbar.</p>
-		<div class="flex items-center gap-4 p-4 border border-subtle rounded-control bg-surface inline-flex">
+		<div class="flex items-center gap-4 p-4 border border-subtle rounded-8 bg-surface inline-flex">
 			<IIToggle bind:pressed={filterPressed} aria-label="Filter">
 				{#snippet children({pressed})}
 					<IIIcon iconName="funnel-fill" />

package/dist/Icons/Icons.svelte

@@ -21,7 +21,7 @@
 			type="search"
 			placeholder="Search icons..."
 			bind:value={search}
-			class="py-5 px-12 text-small bg-surface border border-strong rounded-control w-full max-w-300 outline-none focus:border-primary"
+			class="py-5 px-12 text-small bg-surface border border-strong rounded-8 w-full max-w-300 outline-none focus:border-primary"
 			style="margin-bottom: 32px;"
 		/>
 		<div