@insymetri/styleguide 0.1.85 → 0.1.86

package/dist/IIAlert/IIAlert.svelte

@@ -35,7 +35,7 @@
 </script>
 
 {#if !dismissed}
-	<div class={cn('flex gap-12 p-12 rounded-8 border', config.bg, config.border, className)} role="alert">
+	<div class={cn('flex gap-12 p-12 rounded-10 border', config.bg, config.border, className)} role="alert">
 		<IIIcon iconName={config.icon} size="lg" class={cn('mt-1', config.text)} />
 		<div class="flex-auto min-w-0">
 			{#if title}
@@ -48,7 +48,7 @@
 		{#if dismissible}
 			<button
 				type="button"
-				class="shrink-0 p-4 rounded-4 text-secondary hover:bg-hover-overlay transition-colors duration-fast cursor-default"
+				class="shrink-0 p-4 rounded-6 text-secondary hover:bg-hover-overlay transition-colors duration-fast cursor-default"
 				onclick={handleDismiss}
 				aria-label="Dismiss"
 			>

package/dist/IIBadge/IIBadge.svelte

@@ -15,17 +15,17 @@
 	let {variant = 'grey', size = 'md', children, class: className}: Props = $props()
 
 	const variantClasses: Record<string, string> = {
-		grey: 'bg-badge-grey text-badge-grey',
-		blue: 'bg-badge-blue text-badge-blue',
-		red: 'bg-badge-red text-badge-red',
-		purple: 'bg-badge-purple text-badge-purple',
-		green: 'bg-badge-green text-badge-green',
-		orange: 'bg-badge-orange text-badge-orange',
-		cyan: 'bg-badge-cyan text-badge-cyan',
-		pink: 'bg-badge-pink text-badge-pink',
-		teal: 'bg-badge-teal text-badge-teal',
-		amber: 'bg-badge-amber text-badge-amber',
-		yellow: 'bg-badge-yellow text-badge-yellow',
+		grey: 'bg-badge-grey border-badge-grey text-badge-grey',
+		blue: 'bg-badge-blue border-badge-blue text-badge-blue',
+		red: 'bg-badge-red border-badge-red text-badge-red',
+		purple: 'bg-badge-purple border-badge-purple text-badge-purple',
+		green: 'bg-badge-green border-badge-green text-badge-green',
+		orange: 'bg-badge-orange border-badge-orange text-badge-orange',
+		cyan: 'bg-badge-cyan border-badge-cyan text-badge-cyan',
+		pink: 'bg-badge-pink border-badge-pink text-badge-pink',
+		teal: 'bg-badge-teal border-badge-teal text-badge-teal',
+		amber: 'bg-badge-amber border-badge-amber text-badge-amber',
+		yellow: 'bg-badge-yellow border-badge-yellow text-badge-yellow',
 	}
 
 	const sizeClasses: Record<string, string> = {
@@ -36,7 +36,7 @@
 
 <span
 	class={cn(
-		'inline-flex items-center rounded-4 font-medium whitespace-nowrap',
+		'inline-flex items-center rounded-full border font-medium whitespace-nowrap',
 		sizeClasses[size],
 		variantClasses[variant],
 		className

package/dist/IIBadge/IIBadgeStories.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import IIBadge from './IIBadge.svelte'
+	import type {BadgeVariant} from './IIBadge.types'
+
+	const variants: BadgeVariant[] = [
+		'grey',
+		'blue',
+		'red',
+		'purple',
+		'green',
+		'orange',
+		'cyan',
+		'pink',
+		'teal',
+		'amber',
+		'yellow',
+	]
+	const sizes = ['sm', 'md'] as const
+
+	// Representative labels so the gallery reads like real usage.
+	const labels: Record<BadgeVariant, string> = {
+		grey: 'Draft',
+		blue: 'Active',
+		red: 'Overdue',
+		purple: 'In Review',
+		green: 'Approved',
+		orange: 'Pending',
+		cyan: 'Info',
+		pink: 'Highlight',
+		teal: 'Verified',
+		amber: 'Warning',
+		yellow: 'Note',
+	}
+</script>
+
+<div class="flex flex-col gap-32">
+	<!-- Variants × Sizes matrix -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Variants × Sizes</h2>
+		<table class="border-collapse">
+			<thead>
+				<tr>
+					<th class="text-left text-tiny text-secondary pr-16 pb-8"></th>
+					{#each sizes as size}
+						<th class="text-left text-tiny text-secondary px-8 pb-8">{size}</th>
+					{/each}
+				</tr>
+			</thead>
+			<tbody>
+				{#each variants as variant}
+					<tr>
+						<td class="text-tiny text-secondary pr-16 py-8 align-middle">{variant}</td>
+						{#each sizes as size}
+							<td class="px-8 py-8">
+								<IIBadge {variant} {size}>{labels[variant]}</IIBadge>
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</section>
+
+	<!-- All variants inline -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">All Variants</h2>
+		<div class="flex items-center gap-8 flex-wrap">
+			{#each variants as variant}
+				<IIBadge {variant}>{labels[variant]}</IIBadge>
+			{/each}
+		</div>
+	</section>
+
+	<!-- On a tinted surface — confirms the hairline border reads on non-white backgrounds -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">On a tinted surface</h2>
+		<div class="flex items-center gap-8 flex-wrap bg-background p-16 rounded-8">
+			{#each variants as variant}
+				<IIBadge {variant}>{labels[variant]}</IIBadge>
+			{/each}
+		</div>
+	</section>
+</div>

package/dist/IIBadge/IIBadgeStories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const IIBadgeStories: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IIBadgeStories = InstanceType<typeof IIBadgeStories>;
+export default IIBadgeStories;

package/dist/IIButton/IIButton.svelte

@@ -67,7 +67,7 @@
 	}
 
 	const baseClasses =
-		'relative inline-flex items-center justify-center whitespace-nowrap cursor-default transition-colors duration-base ease-in-out no-underline outline-none focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-primary disabled:cursor-not-allowed'
+		'relative inline-flex items-center justify-center whitespace-nowrap cursor-default transition-colors duration-base ease-in-out no-underline outline-none focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-primary'
 
 	const variantClasses = {
 		primary:

package/dist/IICalendar/IICalendarGrid.svelte

@@ -159,7 +159,7 @@
 						{#each weekDates as date (date.toString())}
 							<Calendar.Cell {date} month={month.value} class="flex-1 p-3">
 								<Calendar.Day
-									class="flex items-center justify-center aspect-square w-full rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover data-[selected]:bg-primary data-[selected]:text-inverse data-[selected]:font-semibold data-[selected]:hover:bg-primary data-[today]:shadow-[inset_0_0_0_1px_var(--ii-gray-300)] data-[outside-month]:text-tertiary data-[outside-month]:opacity-50 data-[outside-month]:pointer-events-none data-[disabled]:text-tertiary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-30 data-[disabled]:pointer-events-none focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none"
+									class="flex items-center justify-center aspect-square w-full rounded-4 text-small text-body cursor-default transition-colors duration-fast hover:bg-dropdown-item-hover data-[selected]:bg-primary data-[selected]:text-inverse data-[selected]:font-semibold data-[selected]:hover:bg-primary data-[today]:shadow-[inset_0_0_0_1px_var(--ii-gray-300)] data-[outside-month]:text-tertiary data-[outside-month]:opacity-50 data-[outside-month]:pointer-events-none data-[disabled]:text-tertiary data-[disabled]:opacity-30 data-[disabled]:pointer-events-none focus-visible:shadow-focus-ring focus-visible:outline-none motion-reduce:transition-none"
 								>
 									{date.day}
 								</Calendar.Day>

package/dist/IICheckbox/IICheckbox.svelte

@@ -34,7 +34,7 @@
 
 <label class={cn('flex items-center gap-8', className)}>
 	<Checkbox.Root
-		class={cn('peer', buttonReset, 'cursor-default shrink-0 inline-block data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50')}
+		class={cn('peer', buttonReset, 'cursor-default shrink-0 inline-block data-[disabled]:opacity-50')}
 		bind:checked
 		{onCheckedChange}
 		{disabled}
@@ -58,11 +58,11 @@
 		</div>
 	</Checkbox.Root>
 	{#if label}
-		<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50 cursor-not-allowed')}
+		<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50')}
 			>{label}</span
 		>
 	{:else if children}
-		<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50 cursor-not-allowed')}>
+		<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50')}>
 			{@render children()}
 		</span>
 	{/if}

package/dist/IICheckboxList/IICheckboxList.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <div
-	class="flex flex-col gap-8 overflow-y-auto p-8 border border-primary rounded-4 bg-background"
+	class="flex flex-col gap-8 overflow-y-auto p-8 border border-primary rounded-8 bg-background"
 	style:max-height={maxHeight}
 >
 	{@render children?.()}

package/dist/IICombobox/IICombobox.svelte

@@ -153,7 +153,7 @@
 		label={isSimpleItem(item) ? item.label : getItemValue(item)}
 		disabled={getItemDisabled?.(item) ?? false}
 		class={cn(
-			'flex items-center gap-8 px-12 text-dropdown-item rounded-6 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed motion-reduce:transition-none',
+			'flex items-center gap-8 px-12 text-dropdown-item rounded-6 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50 motion-reduce:transition-none',
 			itemDensityClasses[density.value]
 		)}
 	>
@@ -190,7 +190,7 @@
 			oninput={handleInput}
 			onfocus={openOnFocus ? handleFocus : undefined}
 			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',
+				'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:bg-input-bg-disabled motion-reduce:transition-none',
 				densityClasses[density.value]
 			)}
 		/>

package/dist/IIDateInput/IIDateInput.svelte

@@ -98,7 +98,7 @@
 				showError
 					? 'border-input-border-error hover:border-input-border-error [&:has(:focus)]:border-input-border-error [&:has(:focus)]:ring-error'
 					: 'hover:[&:not(:has(:focus))]:border-button-secondary-hover [&:has(:focus)]:border-accent [&:has(:focus)]:ring-primary',
-				disabled && 'bg-input-bg-disabled cursor-not-allowed'
+				disabled && 'bg-input-bg-disabled'
 			)}
 		>
 			{#snippet children({segments})}

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -296,7 +296,7 @@
 		aria-expanded={open}
 		{disabled}
 		class={cn(
-			'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 focus-visible:ring-3 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 focus-visible:ring-3 disabled:opacity-50',
 			densityClasses[density.value],
 			showError
 				? 'border-input-border-error hover:border-input-border-error focus-visible:border-input-border-error focus-visible:ring-error'

package/dist/IIEditableBadges/IIEditableBadges.svelte

@@ -23,20 +23,6 @@
 
 	let {items, selectedValues, onToggle, emptyText = 'None', disabled = false}: Props = $props()
 
-	const optionVariantClasses: Record<string, string> = {
-		grey: 'bg-badge-grey border-badge-grey text-badge-grey',
-		blue: 'bg-badge-blue border-badge-blue text-badge-blue',
-		red: 'bg-badge-red border-badge-red text-badge-red',
-		purple: 'bg-badge-purple border-badge-purple text-badge-purple',
-		green: 'bg-badge-green border-badge-green text-badge-green',
-		orange: 'bg-badge-orange border-badge-orange text-badge-orange',
-		cyan: 'bg-badge-cyan border-badge-cyan text-badge-cyan',
-		pink: 'bg-badge-pink border-badge-pink text-badge-pink',
-		teal: 'bg-badge-teal border-badge-teal text-badge-teal',
-		amber: 'bg-badge-amber border-badge-amber text-badge-amber',
-		yellow: 'bg-badge-yellow border-badge-yellow text-badge-yellow',
-	}
-
 	function getVariantForItem(item: Item): BadgeVariant {
 		return item.variant ?? 'grey'
 	}
@@ -74,16 +60,14 @@
 						type="button"
 						class={cn(
 							buttonReset,
-							'flex items-center justify-between px-12 py-8 border rounded-4 bg-background cursor-default transition-all duration-fast text-small text-body hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed',
-							isSelected && 'border-2',
-							optionVariantClasses[variant]
+							'flex items-center justify-between gap-8 px-8 py-6 rounded-6 text-left cursor-default transition-colors duration-fast hover:bg-background disabled:opacity-50'
 						)}
 						onclick={() => handleItemClick(item.value)}
 						{disabled}
 					>
-						<span class="flex-1 text-left">{item.label}</span>
+						<IIBadge {variant}>{item.label}</IIBadge>
 						{#if isSelected}
-							<IIIcon iconName="check" size="inherit" variant="accent" class="size-11 ml-8" />
+							<IIIcon iconName="check" size="inherit" variant="accent" class="size-12 shrink-0" />
 						{/if}
 					</button>
 				{/each}

package/dist/IIEditableText/IIEditableText.svelte

@@ -135,7 +135,7 @@
 		class={cn(
 			buttonReset,
 			'cursor-text block w-full py-4 border-b-2 border-transparent transition-all duration-fast text-left hover:border-b-primary focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 focus-visible:rounded-4',
-			disabled && 'cursor-not-allowed opacity-60'
+			disabled && 'opacity-60'
 		)}
 		onclick={startEditing}
 		{disabled}

package/dist/IIIconButton/IIIconButton.svelte

@@ -32,7 +32,7 @@
 	const isDisabled = $derived(disabled || loading)
 
 	const baseClasses =
-		'inline-flex items-center justify-center cursor-default transition-colors duration-base ease-in-out outline-none focus-visible:ring-3 focus-visible:ring-primary disabled:cursor-not-allowed'
+		'inline-flex items-center justify-center cursor-default transition-colors duration-base ease-in-out outline-none focus-visible:ring-3 focus-visible:ring-primary'
 
 	const variantClasses = {
 		primary:

package/dist/IIInput/IIInput.svelte

@@ -63,7 +63,7 @@
 				showError
 					? 'border-input-border-error hover:border-input-border-error focus-within:border-input-border-error focus-within:ring-error'
 					: 'hover:not-focus-within:border-button-secondary-hover focus-within:border-accent focus-within:ring-primary',
-					disabled && 'bg-input-bg-disabled cursor-not-allowed'
+					disabled && 'bg-input-bg-disabled'
 			)}
 		>
 			{#if prefix}
@@ -76,7 +76,7 @@
 				bind:value
 				{type}
 				{disabled}
-				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"
+				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 [&::-webkit-search-cancel-button]:appearance-none"
 				{...restProps}
 			/>
 			{#if suffix}
@@ -105,7 +105,7 @@
 			{type}
 			{disabled}
 			class={cn(
-				'py-5 px-12 font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-button-secondary transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder focus:ring-3 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-button-secondary transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder focus:ring-3 disabled:bg-input-bg-disabled disabled:text-input-text-disabled motion-reduce:transition-none motion-reduce:animate-none',
 				densityClasses[density.value],
 				showError
 					? 'border-input-border-error hover:border-input-border-error focus:border-input-border-error focus:ring-error'

package/dist/IIMenu/IIMenu.svelte

@@ -287,7 +287,7 @@
 	// Children triggers own their content layout; default to an inline-flex row so a
 	// value + caret sit on one line even when the consumer passes no display class.
 	const childrenTriggerClass = `${buttonReset} inline-flex items-center text-left cursor-default`
-	const defaultTriggerClass = `${buttonReset} inline-flex items-center justify-center p-4 rounded-4 text-secondary cursor-default transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none`
+	const defaultTriggerClass = `${buttonReset} inline-flex items-center justify-center p-4 rounded-6 text-secondary cursor-default transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none`
 </script>
 
 {#snippet itemContent(item: MenuItem)}

package/dist/IIMultiSelect/IIMultiSelect.svelte

@@ -85,7 +85,7 @@
 		bind:ref={triggerEl}
 		{disabled}
 		class={cn(
-			'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',
+			'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',
 			densityRadius[density.value],
 			open ? 'border-button-secondary-hover' : 'border-button-secondary',
 			className
@@ -130,7 +130,7 @@
 								onCheckedChange={() => toggleValue(item.value)}
 								disabled={item.disabled}
 								class={cn(
-									'flex items-center gap-8 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+									'flex items-center gap-8 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover data-[disabled]:opacity-50',
 									values.includes(item.value) && 'text-dropdown-item-selected'
 								)}
 							>

package/dist/IIOverflowActions/IIOverflowActions.svelte

@@ -68,7 +68,7 @@
 	{#if overflowing}
 		<DropdownMenu.Root bind:open={kebabOpen}>
 			<DropdownMenu.Trigger
-				class={cn(buttonReset, 'cursor-default inline-flex items-center justify-center p-4 rounded-4 text-secondary text-h3 transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none')}
+				class={cn(buttonReset, 'cursor-default inline-flex items-center justify-center p-4 rounded-6 text-secondary text-h3 transition-all duration-fast hover:bg-background hover:text-body data-[state=open]:bg-background data-[state=open]:text-body motion-reduce:transition-none')}
 			>
 				<IIIcon iconName="dots-three-vertical" size="inherit" />
 			</DropdownMenu.Trigger>
@@ -80,7 +80,7 @@
 				{#each actions as action (action.label)}
 					<DropdownMenu.Item
 						disabled={action.disabled}
-						class="flex items-center gap-8 px-12 py-8 rounded-4 text-small-emphasis text-body cursor-default outline-none transition-all duration-fast hover:bg-background data-[highlighted]:bg-background data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none"
+						class="flex items-center gap-8 px-12 py-8 rounded-6 text-small-emphasis text-body cursor-default outline-none transition-all duration-fast hover:bg-background data-[highlighted]:bg-background data-[disabled]:opacity-50 data-[disabled]:pointer-events-none motion-reduce:transition-none"
 						onSelect={action.onclick}
 					>
 						<span>{action.label}</span>

package/dist/IIPillTabs/IIPillTabs.svelte

@@ -61,10 +61,10 @@
 	{#snippet pill(tab: Tab)}
 		<button
 			class={cn(
-				'flex items-center rounded-control border-none outline-none cursor-default whitespace-nowrap',
+				'flex items-center rounded-full border-none outline-none cursor-default whitespace-nowrap',
 				densityClasses[density.value],
 				tab.disabled
-					? 'bg-surface text-tertiary opacity-50 cursor-not-allowed'
+					? 'bg-surface text-tertiary opacity-50'
 					: 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/IIStatusBadge/IIStatusBadge.svelte

@@ -12,15 +12,15 @@
 	let {level, label, tooltip}: Props = $props()
 
 	const levelClasses: Record<string, string> = {
-		current: 'bg-success-bg text-success',
-		attention: 'bg-warning-bg text-warning',
-		'at-risk': 'bg-error-bg text-error',
+		current: 'bg-success-bg border-success text-success',
+		attention: 'bg-warning-bg border-warning text-warning',
+		'at-risk': 'bg-error-bg border-error text-error',
 	}
 </script>
 
 <span
 	class={cn(
-		'inline-flex items-center px-12 py-4 rounded-full text-tiny-strong whitespace-nowrap transition-all duration-base motion-reduce:transition-none',
+		'inline-flex items-center px-12 py-4 rounded-full border text-tiny-strong whitespace-nowrap transition-all duration-base motion-reduce:transition-none',
 		levelClasses[level]
 	)}
 	title={tooltip}

package/dist/IISwitch/IISwitch.svelte

@@ -31,18 +31,18 @@
 <label class={cn('flex items-center gap-12', className)}>
 	{#if label}
 		<span
-			class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50 cursor-not-allowed')}
+			class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}
 			>{label}</span
 		>
 	{:else if children}
 		<span
-			class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50 cursor-not-allowed')}
+			class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}
 		>
 			{@render children()}
 		</span>
 	{/if}
 	<Switch.Root
-		class="group relative w-44 h-24 bg-muted rounded-full cursor-default transition-all duration-fast shrink-0 appearance-none border-none outline-none focus-visible:ring-3 focus-visible:ring-primary data-[state=checked]:bg-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 motion-reduce:transition-none"
+		class="group relative w-44 h-24 bg-muted rounded-full cursor-default transition-all duration-fast shrink-0 appearance-none border-none outline-none focus-visible:ring-3 focus-visible:ring-primary data-[state=checked]:bg-primary data-[disabled]:opacity-50 motion-reduce:transition-none"
 		{checked}
 		onCheckedChange={newChecked => {
 			checked = newChecked

package/dist/IITabBar/IITabBar.svelte

@@ -63,7 +63,7 @@
 			<Tabs.Trigger
 				value={tab.value}
 				disabled={tab.disabled}
-				class="appearance-none border-none bg-transparent outline-none inline-flex items-center gap-8 p-0 h-full text-small font-normal text-tertiary cursor-default -mb-px whitespace-nowrap relative shrink-0 hover:text-secondary data-[state=active]:text-body data-[disabled]:text-tertiary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 motion-reduce:[transition:none] [transition:color_0.15s_ease] after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-0 after:-translate-x-1/2 after:[height:1.5px] after:[transition:width_0.15s_ease,background-color_0.15s_ease] data-[state=active]:after:w-full data-[state=active]:after:bg-dark [&:hover:not([data-disabled]):not([data-state=active])]:after:w-3/5 [&:hover:not([data-disabled]):not([data-state=active])]:after:bg-dark-secondary"
+				class="appearance-none border-none bg-transparent outline-none inline-flex items-center gap-8 p-0 h-full text-small font-normal text-tertiary cursor-default -mb-px whitespace-nowrap relative shrink-0 hover:text-secondary data-[state=active]:text-body data-[disabled]:text-tertiary data-[disabled]:opacity-50 motion-reduce:[transition:none] [transition:color_0.15s_ease] after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-0 after:-translate-x-1/2 after:[height:1.5px] after:[transition:width_0.15s_ease,background-color_0.15s_ease] data-[state=active]:after:w-full data-[state=active]:after:bg-dark [&:hover:not([data-disabled]):not([data-state=active])]:after:w-3/5 [&:hover:not([data-disabled]):not([data-state=active])]:after:bg-dark-secondary"
 			>
 				{#if tab.icon}
 					<div class="w-[1.25em] h-[1.25em] flex items-center justify-center">
@@ -98,7 +98,7 @@
 						<DropdownMenu.Item
 							disabled={tab.disabled}
 							class={cn(
-								'flex items-center justify-between gap-12 px-12 py-8 rounded-4 text-small-emphasis text-secondary cursor-default outline-none transition-all duration-fast hover:bg-background hover:text-body data-[highlighted]:bg-background data-[highlighted]:text-body data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none',
+								'flex items-center justify-between gap-12 px-12 py-8 rounded-6 text-small-emphasis text-secondary cursor-default outline-none transition-all duration-fast hover:bg-background hover:text-body data-[highlighted]:bg-background data-[highlighted]:text-body data-[disabled]:opacity-50 data-[disabled]:pointer-events-none motion-reduce:transition-none',
 								value === tab.value && 'text-body'
 							)}
 							onSelect={() => handleSelect(tab)}

package/dist/IITextarea/IITextarea.svelte

@@ -65,7 +65,7 @@
 		{disabled}
 		{rows}
 		class={cn(
-			'pt-8 pb-5 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-button-secondary rounded-[10px] transition-all duration-fast outline-none w-full box-border resize-none overflow-hidden min-h-16 placeholder:text-tertiary hover:not-focus:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:bg-gray-100 disabled:text-secondary disabled:cursor-not-allowed motion-reduce:transition-none',
+			'pt-8 pb-5 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-button-secondary rounded-[10px] transition-all duration-fast outline-none w-full box-border resize-none overflow-hidden min-h-16 placeholder:text-tertiary hover:not-focus:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:bg-gray-100 disabled:text-secondary motion-reduce:transition-none',
 			showError && 'border-input-border-error hover:border-input-border-error focus:border-input-border-error focus:ring-error'
 		)}
 		oninput={handleInput}

package/dist/IIToggle/IIToggle.svelte

@@ -55,7 +55,7 @@
 	{disabled}
 	aria-label={ariaLabel}
 	class={cn(
-		'inline-flex items-center justify-center cursor-default transition-colors duration-base ease-in-out outline-none focus-visible:ring-3 focus-visible:ring-primary 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',
+		'inline-flex items-center justify-center cursor-default transition-colors duration-base ease-in-out outline-none focus-visible:ring-3 focus-visible:ring-primary 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',
 		resolvedSizeClasses,
 		iconSizeClasses[size],
 		className

package/dist/IITooltip/IITooltip.svelte

@@ -38,7 +38,7 @@
 				<B.Content
 					{side}
 					sideOffset={6}
-					class="z-19 rounded-4 bg-gray-900 text-white text-tiny leading-tight font-medium px-8 py-4 shadow-dropdown data-[state=delayed-open]:animate-fade-in data-[state=instant-open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none"
+					class="z-19 rounded-6 bg-gray-900 text-white text-tiny leading-tight font-medium px-8 py-4 shadow-dropdown data-[state=delayed-open]:animate-fade-in data-[state=instant-open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none"
 				>
 					{text}
 				</B.Content>

package/dist/IIViewFilterChip/IIViewFilterChip.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <span
-	class="inline-flex items-center gap-4 px-8 h-24 bg-gray-50 border border-gray-200 rounded-control text-tiny text-secondary cursor-default"
+	class="inline-flex items-center gap-4 px-8 h-24 bg-gray-50 border border-gray-200 rounded-full text-tiny text-secondary cursor-default"
 >
 	<span class="flex items-center gap-4">
 		<span class="font-medium">{fieldLabel}</span>

package/dist/style/colors.css

@@ -124,40 +124,40 @@
 	--color-button-accent-text: var(--ii-text-on-accent);
 	--color-button-accent-text-disabled: var(--ii-text-tertiary);
 
-	/* Badge variants */
-	--ii-badge-grey-bg: rgba(107, 114, 128, 0.1);
-	--ii-badge-grey-text: rgb(75, 85, 99);
-	--ii-badge-grey-border: rgba(107, 114, 128, 0.3);
-	--ii-badge-blue-bg: rgba(17, 115, 212, 0.1);
-	--ii-badge-blue-text: rgb(17, 115, 212);
-	--ii-badge-blue-border: rgba(17, 115, 212, 0.3);
-	--ii-badge-red-bg: rgba(220, 38, 38, 0.1);
-	--ii-badge-red-text: rgb(185, 28, 28);
-	--ii-badge-red-border: rgba(220, 38, 38, 0.3);
-	--ii-badge-purple-bg: rgba(79, 70, 229, 0.1);
-	--ii-badge-purple-text: rgb(79, 70, 229);
-	--ii-badge-purple-border: rgba(79, 70, 229, 0.3);
-	--ii-badge-green-bg: rgba(34, 197, 94, 0.1);
-	--ii-badge-green-text: rgb(22, 163, 74);
-	--ii-badge-green-border: rgba(34, 197, 94, 0.3);
-	--ii-badge-orange-bg: rgba(249, 115, 22, 0.1);
-	--ii-badge-orange-text: rgb(194, 65, 12);
-	--ii-badge-orange-border: rgba(249, 115, 22, 0.3);
-	--ii-badge-cyan-bg: rgba(6, 182, 212, 0.1);
-	--ii-badge-cyan-text: rgb(14, 116, 144);
-	--ii-badge-cyan-border: rgba(6, 182, 212, 0.3);
-	--ii-badge-pink-bg: rgba(236, 72, 153, 0.1);
-	--ii-badge-pink-text: rgb(190, 24, 93);
-	--ii-badge-pink-border: rgba(236, 72, 153, 0.3);
-	--ii-badge-teal-bg: rgba(20, 184, 166, 0.1);
-	--ii-badge-teal-text: rgb(13, 148, 136);
-	--ii-badge-teal-border: rgba(20, 184, 166, 0.3);
-	--ii-badge-amber-bg: rgba(245, 158, 11, 0.1);
-	--ii-badge-amber-text: rgb(180, 83, 9);
-	--ii-badge-amber-border: rgba(245, 158, 11, 0.3);
-	--ii-badge-yellow-bg: rgba(234, 179, 8, 0.1);
-	--ii-badge-yellow-text: rgb(161, 98, 7);
-	--ii-badge-yellow-border: rgba(234, 179, 8, 0.3);
+	/* Badges — follows the --color-{component}-{variant}-{property} convention */
+	--color-badge-grey-bg: rgba(107, 114, 128, 0.1);
+	--color-badge-grey-text: rgb(75, 85, 99);
+	--color-badge-grey-border: rgba(107, 114, 128, 0.3);
+	--color-badge-blue-bg: rgba(17, 115, 212, 0.1);
+	--color-badge-blue-text: rgb(17, 115, 212);
+	--color-badge-blue-border: rgba(17, 115, 212, 0.3);
+	--color-badge-red-bg: rgba(220, 38, 38, 0.1);
+	--color-badge-red-text: rgb(185, 28, 28);
+	--color-badge-red-border: rgba(220, 38, 38, 0.3);
+	--color-badge-purple-bg: rgba(79, 70, 229, 0.1);
+	--color-badge-purple-text: rgb(79, 70, 229);
+	--color-badge-purple-border: rgba(79, 70, 229, 0.3);
+	--color-badge-green-bg: rgba(34, 197, 94, 0.1);
+	--color-badge-green-text: rgb(22, 163, 74);
+	--color-badge-green-border: rgba(34, 197, 94, 0.3);
+	--color-badge-orange-bg: rgba(249, 115, 22, 0.1);
+	--color-badge-orange-text: rgb(194, 65, 12);
+	--color-badge-orange-border: rgba(249, 115, 22, 0.3);
+	--color-badge-cyan-bg: rgba(6, 182, 212, 0.1);
+	--color-badge-cyan-text: rgb(14, 116, 144);
+	--color-badge-cyan-border: rgba(6, 182, 212, 0.3);
+	--color-badge-pink-bg: rgba(236, 72, 153, 0.1);
+	--color-badge-pink-text: rgb(190, 24, 93);
+	--color-badge-pink-border: rgba(236, 72, 153, 0.3);
+	--color-badge-teal-bg: rgba(20, 184, 166, 0.1);
+	--color-badge-teal-text: rgb(13, 148, 136);
+	--color-badge-teal-border: rgba(20, 184, 166, 0.3);
+	--color-badge-amber-bg: rgba(245, 158, 11, 0.1);
+	--color-badge-amber-text: rgb(180, 83, 9);
+	--color-badge-amber-border: rgba(245, 158, 11, 0.3);
+	--color-badge-yellow-bg: rgba(234, 179, 8, 0.1);
+	--color-badge-yellow-text: rgb(161, 98, 7);
+	--color-badge-yellow-border: rgba(234, 179, 8, 0.3);
 
 	/* Focus ring */
 	--ii-focus-primary: rgba(17, 115, 212, 0.1);
@@ -168,13 +168,13 @@
 	--ii-hover-overlay: rgba(0, 0, 0, 0.1);
 
 	/* Filter chips */
-	--ii-filter-bg: #eff6ff;
-	--ii-filter-border: #bfdbfe;
-	--ii-filter-text: #1d4ed8;
-	--ii-filter-operator: #3b82f6;
-	--ii-filter-remove-bg: #dbeafe;
-	--ii-filter-remove-hover: #bfdbfe;
-	--ii-filter-remove-icon: #2563eb;
+	--color-filter-bg: #eff6ff;
+	--color-filter-border: #bfdbfe;
+	--color-filter-text: #1d4ed8;
+	--color-filter-operator: #3b82f6;
+	--color-filter-remove-bg: #dbeafe;
+	--color-filter-remove-hover: #bfdbfe;
+	--color-filter-remove-icon: #2563eb;
 
 	/* Tab (TaskBar) */
 	--ii-tab-bg: #f6f7f8;

package/dist/style/tailwind/colors.d.ts

@@ -54,7 +54,6 @@ export declare const backgroundColor: {
     'badge-teal': string;
     'badge-amber': string;
     'badge-yellow': string;
-    'badge-green-border': string;
     'input-bg': string;
     'input-bg-disabled': string;
     'dropdown-bg': string;

package/dist/style/tailwind/colors.js

@@ -70,18 +70,17 @@ export const backgroundColor = {
     applicant: 'var(--ii-applicant)',
     'applicant-light': 'var(--ii-applicant-light)',
     // Badges
-    'badge-grey': 'var(--ii-badge-grey-bg)',
-    'badge-blue': 'var(--ii-badge-blue-bg)',
-    'badge-red': 'var(--ii-badge-red-bg)',
-    'badge-purple': 'var(--ii-badge-purple-bg)',
-    'badge-green': 'var(--ii-badge-green-bg)',
-    'badge-orange': 'var(--ii-badge-orange-bg)',
-    'badge-cyan': 'var(--ii-badge-cyan-bg)',
-    'badge-pink': 'var(--ii-badge-pink-bg)',
-    'badge-teal': 'var(--ii-badge-teal-bg)',
-    'badge-amber': 'var(--ii-badge-amber-bg)',
-    'badge-yellow': 'var(--ii-badge-yellow-bg)',
-    'badge-green-border': 'var(--ii-badge-green-border)',
+    'badge-grey': 'var(--color-badge-grey-bg)',
+    'badge-blue': 'var(--color-badge-blue-bg)',
+    'badge-red': 'var(--color-badge-red-bg)',
+    'badge-purple': 'var(--color-badge-purple-bg)',
+    'badge-green': 'var(--color-badge-green-bg)',
+    'badge-orange': 'var(--color-badge-orange-bg)',
+    'badge-cyan': 'var(--color-badge-cyan-bg)',
+    'badge-pink': 'var(--color-badge-pink-bg)',
+    'badge-teal': 'var(--color-badge-teal-bg)',
+    'badge-amber': 'var(--color-badge-amber-bg)',
+    'badge-yellow': 'var(--color-badge-yellow-bg)',
     // Input
     'input-bg': 'var(--color-input-bg)',
     'input-bg-disabled': 'var(--color-input-bg-disabled)',
@@ -111,9 +110,9 @@ export const backgroundColor = {
     'hover-overlay': 'var(--ii-hover-overlay)',
     'subtle-bg': 'var(--ii-subtle-bg)',
     // Filter chips
-    'filter-bg': 'var(--ii-filter-bg)',
-    'filter-remove': 'var(--ii-filter-remove-bg)',
-    'filter-remove-hover': 'var(--ii-filter-remove-hover)',
+    'filter-bg': 'var(--color-filter-bg)',
+    'filter-remove': 'var(--color-filter-remove-bg)',
+    'filter-remove-hover': 'var(--color-filter-remove-hover)',
     // Tabs
     'tab-bg': 'var(--ii-tab-bg)',
     'tab-active': 'var(--ii-tab-active)',
@@ -186,21 +185,21 @@ export const textColor = {
     client: 'var(--ii-client)',
     applicant: 'var(--ii-applicant)',
     // Badges
-    'badge-grey': 'var(--ii-badge-grey-text)',
-    'badge-blue': 'var(--ii-badge-blue-text)',
-    'badge-red': 'var(--ii-badge-red-text)',
-    'badge-purple': 'var(--ii-badge-purple-text)',
-    'badge-green': 'var(--ii-badge-green-text)',
-    'badge-orange': 'var(--ii-badge-orange-text)',
-    'badge-cyan': 'var(--ii-badge-cyan-text)',
-    'badge-pink': 'var(--ii-badge-pink-text)',
-    'badge-teal': 'var(--ii-badge-teal-text)',
-    'badge-amber': 'var(--ii-badge-amber-text)',
-    'badge-yellow': 'var(--ii-badge-yellow-text)',
+    'badge-grey': 'var(--color-badge-grey-text)',
+    'badge-blue': 'var(--color-badge-blue-text)',
+    'badge-red': 'var(--color-badge-red-text)',
+    'badge-purple': 'var(--color-badge-purple-text)',
+    'badge-green': 'var(--color-badge-green-text)',
+    'badge-orange': 'var(--color-badge-orange-text)',
+    'badge-cyan': 'var(--color-badge-cyan-text)',
+    'badge-pink': 'var(--color-badge-pink-text)',
+    'badge-teal': 'var(--color-badge-teal-text)',
+    'badge-amber': 'var(--color-badge-amber-text)',
+    'badge-yellow': 'var(--color-badge-yellow-text)',
     // Filter chips
-    'filter-text': 'var(--ii-filter-text)',
-    'filter-operator': 'var(--ii-filter-operator)',
-    'filter-remove-icon': 'var(--ii-filter-remove-icon)',
+    'filter-text': 'var(--color-filter-text)',
+    'filter-operator': 'var(--color-filter-operator)',
+    'filter-remove-icon': 'var(--color-filter-remove-icon)',
     // Page-specific
     'email-text': 'var(--ii-email-text)',
     'manual-text': 'var(--ii-manual-text)',
@@ -240,19 +239,19 @@ export const borderColor = {
     client: 'var(--ii-client-border)',
     applicant: 'var(--ii-applicant-border)',
     // Badges
-    'badge-grey': 'var(--ii-badge-grey-border)',
-    'badge-blue': 'var(--ii-badge-blue-border)',
-    'badge-red': 'var(--ii-badge-red-border)',
-    'badge-purple': 'var(--ii-badge-purple-border)',
-    'badge-green': 'var(--ii-badge-green-border)',
-    'badge-orange': 'var(--ii-badge-orange-border)',
-    'badge-cyan': 'var(--ii-badge-cyan-border)',
-    'badge-pink': 'var(--ii-badge-pink-border)',
-    'badge-teal': 'var(--ii-badge-teal-border)',
-    'badge-amber': 'var(--ii-badge-amber-border)',
-    'badge-yellow': 'var(--ii-badge-yellow-border)',
+    'badge-grey': 'var(--color-badge-grey-border)',
+    'badge-blue': 'var(--color-badge-blue-border)',
+    'badge-red': 'var(--color-badge-red-border)',
+    'badge-purple': 'var(--color-badge-purple-border)',
+    'badge-green': 'var(--color-badge-green-border)',
+    'badge-orange': 'var(--color-badge-orange-border)',
+    'badge-cyan': 'var(--color-badge-cyan-border)',
+    'badge-pink': 'var(--color-badge-pink-border)',
+    'badge-teal': 'var(--color-badge-teal-border)',
+    'badge-amber': 'var(--color-badge-amber-border)',
+    'badge-yellow': 'var(--color-badge-yellow-border)',
     // Filter chips
-    'filter-border': 'var(--ii-filter-border)',
+    'filter-border': 'var(--color-filter-border)',
     // Focus ring
     'focus-primary': 'var(--ii-focus-primary)',
     'focus-error': 'var(--ii-focus-error)',

package/dist/style/tailwind/preset.d.ts

@@ -57,7 +57,6 @@ declare const _default: {
             'badge-teal': string;
             'badge-amber': string;
             'badge-yellow': string;
-            'badge-green-border': string;
             'input-bg': string;
             'input-bg-disabled': string;
             'dropdown-bg': string;

package/dist/style/themes.css

@@ -31,13 +31,13 @@
 	--color-button-accent-text: var(--ii-text-on-accent);
 
 	/* Filter chips */
-	--ii-filter-bg: #e8eef6;
-	--ii-filter-border: #a8c4e0;
-	--ii-filter-text: #1e3a5f;
-	--ii-filter-operator: #4a6fa5;
-	--ii-filter-remove-bg: #d1dfef;
-	--ii-filter-remove-hover: #a8c4e0;
-	--ii-filter-remove-icon: #1e3a5f;
+	--color-filter-bg: #e8eef6;
+	--color-filter-border: #a8c4e0;
+	--color-filter-text: #1e3a5f;
+	--color-filter-operator: #4a6fa5;
+	--color-filter-remove-bg: #d1dfef;
+	--color-filter-remove-hover: #a8c4e0;
+	--color-filter-remove-icon: #1e3a5f;
 
 	/* Login */
 	--ii-login-gradient-start: #e8eef6;
@@ -77,13 +77,13 @@
 	--color-button-accent-text: var(--ii-text-on-accent);
 
 	/* Filter chips */
-	--ii-filter-bg: #e8f5ea;
-	--ii-filter-border: #a8d5b0;
-	--ii-filter-text: #2d7a3a;
-	--ii-filter-operator: #5a9e68;
-	--ii-filter-remove-bg: #d1ecd6;
-	--ii-filter-remove-hover: #a8d5b0;
-	--ii-filter-remove-icon: #2d7a3a;
+	--color-filter-bg: #e8f5ea;
+	--color-filter-border: #a8d5b0;
+	--color-filter-text: #2d7a3a;
+	--color-filter-operator: #5a9e68;
+	--color-filter-remove-bg: #d1ecd6;
+	--color-filter-remove-hover: #a8d5b0;
+	--color-filter-remove-icon: #2d7a3a;
 
 	/* Login */
 	--ii-login-gradient-start: #e8f5ea;
@@ -126,13 +126,13 @@
 	--color-button-accent-text: var(--ii-text-on-accent);
 
 	/* Filter chips */
-	--ii-filter-bg: #f3e8ff;
-	--ii-filter-border: #d8b4fe;
-	--ii-filter-text: #7c3aed;
-	--ii-filter-operator: #8b5cf6;
-	--ii-filter-remove-bg: #e9d5ff;
-	--ii-filter-remove-hover: #d8b4fe;
-	--ii-filter-remove-icon: #7c3aed;
+	--color-filter-bg: #f3e8ff;
+	--color-filter-border: #d8b4fe;
+	--color-filter-text: #7c3aed;
+	--color-filter-operator: #8b5cf6;
+	--color-filter-remove-bg: #e9d5ff;
+	--color-filter-remove-hover: #d8b4fe;
+	--color-filter-remove-icon: #7c3aed;
 
 	/* Login */
 	--ii-login-gradient-start: #f3e8ff;

package/dist/utils/menu/menu-styles.d.ts

@@ -1,5 +1,5 @@
 export declare const menuStyles: {
-    readonly item: "flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 motion-reduce:transition-none";
+    readonly item: "flex items-center gap-8 px-12 py-8 rounded-6 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 motion-reduce:transition-none";
     readonly itemDefault: "text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent";
     readonly itemDestructive: "text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent";
     readonly content: "ii-menu-scroll min-w-48 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none";

package/dist/utils/menu/menu-styles.js

@@ -1,6 +1,6 @@
 import { cn } from '../cn';
 export const menuStyles = {
-    item: 'flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 motion-reduce:transition-none',
+    item: 'flex items-center gap-8 px-12 py-8 rounded-6 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 motion-reduce:transition-none',
     itemDefault: 'text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent',
     itemDestructive: 'text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent',
     // content: no fixed max-height — IIMenu passes constrainHeight to

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.85",
+	"version": "0.1.86",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {