@insymetri/styleguide 0.1.70 → 0.1.72

package/dist/IIAccordion/IIAccordion.svelte

@@ -39,7 +39,8 @@
 	>
 		<IIIcon
 			iconName="caret-right"
-			class={cn('w-14 h-14 text-secondary shrink-0 transition-transform duration-fast', expanded && 'rotate-90')}
+			variant="secondary"
+			class={cn('transition-transform duration-fast', expanded && 'rotate-90')}
 		/>
 		<div class="flex-1 min-w-0">
 			{@render trigger({expanded})}

package/dist/IIAlert/IIAlert.svelte

@@ -36,7 +36,7 @@
 
 {#if !dismissed}
 	<div class={cn('flex gap-12 p-12 rounded-8 border', config.bg, config.border, className)} role="alert">
-		<IIIcon iconName={config.icon} class={cn('size-20 shrink-0 mt-1', config.text)} />
+		<IIIcon iconName={config.icon} size="lg" class={cn('mt-1', config.text)} />
 		<div class="flex-auto min-w-0">
 			{#if title}
 				<p class={cn('text-small-emphasis m-0', config.text)}>{title}</p>
@@ -52,7 +52,7 @@
 				onclick={handleDismiss}
 				aria-label="Dismiss"
 			>
-				<IIIcon iconName="x" class="size-16" />
+				<IIIcon iconName="x" size="md" />
 			</button>
 		{/if}
 	</div>

package/dist/IIAuditTrail/IIAuditTrail.svelte

@@ -113,7 +113,7 @@
 					<div class="flex justify-between items-start mb-4">
 						<div class="flex gap-8 items-start">
 							<span class="text-secondary flex">
-								<IIIcon {iconName} class="w-20 h-20" />
+								<IIIcon {iconName} size="lg" />
 							</span>
 							<div class="flex-1">
 								<div class="text-small-emphasis text-body mb-4">{event.description}</div>

package/dist/IIButton/IIButton.svelte

@@ -107,7 +107,7 @@
 
 {#snippet iconContent()}
 	{#if iconName}
-		<IIIcon {iconName} class={cn(iconSizeClasses[size], isLoading && 'invisible')} />
+		<IIIcon {iconName} size="inherit" class={cn(iconSizeClasses[size], isLoading && 'invisible')} />
 	{/if}
 	{#if isLoading && children}
 		<span class="invisible">{@render children()}</span>

package/dist/IICheckbox/IICheckbox.svelte

@@ -52,7 +52,7 @@
 			)}
 		>
 			{#if checked}
-				<IIIcon iconName="check" class={size === 'sm' ? 'w-14 h-14 text-white' : 'w-16 h-16 text-white'} />
+				<IIIcon iconName="check" size={size === 'sm' ? 'sm' : 'md'} variant="inverse" />
 			{/if}
 		</div>
 	</Checkbox.Root>

package/dist/IICombobox/IICombobox.svelte

@@ -163,12 +163,12 @@
 			{:else if isSimpleItem(item)}
 				<span class="flex-1">{item.label}</span>
 				{#if selected}
-					<IIIcon iconName="check" class="w-18 h-18 shrink-0 ml-auto" />
+					<IIIcon iconName="check" size="inherit" class="size-18 ml-auto" />
 				{/if}
 			{:else}
 				<span class="flex-1">{getItemValue(item)}</span>
 				{#if selected}
-					<IIIcon iconName="check" class="w-18 h-18 shrink-0 ml-auto" />
+					<IIIcon iconName="check" size="inherit" class="size-18 ml-auto" />
 				{/if}
 			{/if}
 		{/snippet}

package/dist/IIContextMenu/IIContextMenu.svelte

@@ -216,7 +216,7 @@
 		}}
 	>
 		<MenuItemContent icon={entry.icon} label={entry.label} shortcut={entry.shortcut} />
-		<IIIcon iconName="caret-right" class="w-12 h-12 text-tertiary shrink-0" />
+		<IIIcon iconName="caret-right" size="xs" variant="tertiary" />
 	</div>
 	{#if isOpen}
 		{#if entry.searchable}

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -263,7 +263,7 @@
 		{:else}
 			<span>{selectedLabel}</span>
 		{/if}
-		<IIIcon iconName="caret-down" class="w-14 h-14 shrink-0" />
+		<IIIcon iconName="caret-down" />
 	</button>
 
 	{#if open}
@@ -326,7 +326,7 @@
 									{item.label}
 								</span>
 								{#if value === item.value}
-									<IIIcon iconName="check" class="w-14 h-14 text-accent shrink-0" />
+									<IIIcon iconName="check" variant="accent" />
 								{/if}
 							{/if}
 						</div>

package/dist/IIDropdownMenu/IIDropdownMenu.svelte

@@ -266,7 +266,7 @@
 		}}
 	>
 		<MenuItemContent icon={entry.icon} label={entry.label} shortcut={entry.shortcut} />
-		<IIIcon iconName="caret-right" class="w-12 h-12 text-tertiary shrink-0" />
+		<IIIcon iconName="caret-right" size="xs" variant="tertiary" />
 	</div>
 	{#if isOpen}
 		{#if entry.searchable}

package/dist/IIEditableBadges/IIEditableBadges.svelte

@@ -81,7 +81,7 @@
 					>
 						<span class="flex-1 text-left">{item.label}</span>
 						{#if isSelected}
-							<IIIcon iconName="check" class="w-11 h-11 text-accent ml-8 shrink-0" />
+							<IIIcon iconName="check" size="inherit" variant="accent" class="size-11 ml-8" />
 						{/if}
 					</button>
 				{/each}

package/dist/IIFilterChip/IIFilterChip.svelte

@@ -42,6 +42,6 @@
 		onclick={onRemove}
 		aria-label="Remove filter"
 	>
-		<IIIcon iconName="x" />
+		<IIIcon iconName="x" size="inherit" />
 	</button>
 </span>

package/dist/IIIcon/IIIcon.svelte

@@ -1,13 +1,49 @@
 <script lang="ts">
 	import {icons, type IconName} from '../icons'
+	import {cn} from '../utils/cn'
+
+	export type IconSize = 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+	export type IconVariant =
+		| 'inherit'
+		| 'secondary'
+		| 'tertiary'
+		| 'accent'
+		| 'success'
+		| 'warning'
+		| 'error'
+		| 'inverse'
 
 	interface Props {
 		iconName: IconName
+		/** Square px size. Use `inherit` to follow the surrounding font-size (1em) for inline-in-text icons. */
+		size?: IconSize
+		/** Semantic color. `inherit` (default) follows currentColor — the right choice for icons inside colored containers/buttons. */
+		variant?: IconVariant
 		class?: string
 		[key: string]: unknown
 	}
 
-	let {iconName, class: className = '', ...rest}: Props = $props()
+	let {iconName, size = 'sm', variant = 'inherit', class: className = '', ...rest}: Props = $props()
+
+	const sizeClasses: Record<IconSize, string> = {
+		inherit: '',
+		xs: 'size-12',
+		sm: 'size-14',
+		md: 'size-16',
+		lg: 'size-20',
+		xl: 'size-24',
+	}
+
+	const variantClasses: Record<IconVariant, string> = {
+		inherit: '',
+		secondary: 'text-secondary',
+		tertiary: 'text-tertiary',
+		accent: 'text-accent',
+		success: 'text-success',
+		warning: 'text-warning',
+		error: 'text-error',
+		inverse: 'text-inverse',
+	}
 </script>
 
 <svg
@@ -16,7 +52,7 @@
 	width="1em"
 	height="1em"
 	fill="currentColor"
-	class={className}
+	class={cn('shrink-0', sizeClasses[size], variantClasses[variant], className)}
 	{...rest}
 >
 	{@html icons[iconName]}

package/dist/IIIcon/IIIcon.svelte.d.ts

@@ -1,6 +1,12 @@
 import { type IconName } from '../icons';
+export type IconSize = 'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconVariant = 'inherit' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error' | 'inverse';
 interface Props {
     iconName: IconName;
+    /** Square px size. Use `inherit` to follow the surrounding font-size (1em) for inline-in-text icons. */
+    size?: IconSize;
+    /** Semantic color. `inherit` (default) follows currentColor — the right choice for icons inside colored containers/buttons. */
+    variant?: IconVariant;
     class?: string;
     [key: string]: unknown;
 }

package/dist/IIIcon/index.d.ts

@@ -1 +1,2 @@
 export { default as IIIcon } from './IIIcon.svelte';
+export type { IconSize, IconVariant } from './IIIcon.svelte';

package/dist/IIIconButton/IIIconButton.svelte

@@ -79,6 +79,6 @@
 		<span class={cn('border-2 border-current border-r-transparent rounded-full animate-spin', iconSizeClasses[size])}
 		></span>
 	{:else}
-		<IIIcon {iconName} class={iconSizeClasses[size]} />
+		<IIIcon {iconName} size="inherit" class={iconSizeClasses[size]} />
 	{/if}
 </button>

package/dist/IIMultiSelect/IIMultiSelect.svelte

@@ -103,7 +103,7 @@
 							class="inline-flex items-center justify-center w-12 h-12 rounded-full hover:bg-gray-300 transition-colors duration-fast [&_svg]:w-8 [&_svg]:h-8"
 							onclick={(e) => removeValue(chip.value, e)}
 						>
-							<IIIcon iconName="x" />
+							<IIIcon iconName="x" size="inherit" />
 						</button>
 					</span>
 				{/each}
@@ -112,7 +112,7 @@
 				{/if}
 			{/if}
 		</span>
-		<IIIcon iconName="caret-down" class="w-14 h-14 shrink-0" />
+		<IIIcon iconName="caret-down" />
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Portal>
 		<DropdownMenu.Content
@@ -139,7 +139,7 @@
 								{:else}
 									<span class="flex-1">{item.label}</span>
 									{#if values.includes(item.value)}
-										<IIIcon iconName="check" class="w-14 h-14 text-accent shrink-0" />
+										<IIIcon iconName="check" variant="accent" />
 									{/if}
 								{/if}
 							</DropdownMenu.CheckboxItem>

package/dist/IIOverflowActions/IIOverflowActions.svelte

@@ -69,7 +69,7 @@
 			<DropdownMenu.Trigger
 				class="[all:unset] 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"
 			>
-				<IIIcon iconName="dots-three-vertical" />
+				<IIIcon iconName="dots-three-vertical" size="inherit" />
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content
 				class="min-w-100 bg-surface border border-primary rounded-10 shadow-dropdown p-4 z-12"

package/dist/IIPopover/IIPopover.svelte

@@ -13,6 +13,8 @@
 		sideOffset?: number
 		class?: string
 		triggerClass?: string
+		/** Strip the default surface (background, border, radius, shadow) — for content that renders its own. */
+		unstyled?: boolean
 	}
 
 	let {
@@ -25,7 +27,12 @@
 		sideOffset = 4,
 		class: className,
 		triggerClass,
+		unstyled = false,
 	}: Props = $props()
+
+	const surfaceClasses = unstyled
+		? ''
+		: 'bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown'
 </script>
 
 <Popover.Root bind:open {onOpenChange}>
@@ -38,7 +45,8 @@
 			{align}
 			{sideOffset}
 			class={cn(
-				'bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-12 z-16 animate-slide-in motion-reduce:animate-none',
+				surfaceClasses,
+				'z-16 animate-slide-in motion-reduce:animate-none',
 				className
 			)}
 		>

package/dist/IIPopover/IIPopover.svelte.d.ts

@@ -9,6 +9,8 @@ type Props = {
     sideOffset?: number;
     class?: string;
     triggerClass?: string;
+    /** Strip the default surface (background, border, radius, shadow) — for content that renders its own. */
+    unstyled?: boolean;
 };
 declare const IIPopover: import("svelte").Component<Props, {}, "open">;
 type IIPopover = ReturnType<typeof IIPopover>;

package/dist/IIPopover/IIPopoverStories.svelte

@@ -17,7 +17,7 @@
 				<IIButton variant="secondary" size="sm">Open Popover</IIButton>
 			{/snippet}
 			{#snippet content()}
-				<div class="flex flex-col gap-8 w-200">
+				<div class="flex flex-col gap-8 w-200 p-12">
 					<p class="text-small-emphasis text-body">Popover Title</p>
 					<p class="text-small text-secondary">This is a basic popover with some content inside.</p>
 				</div>
@@ -34,7 +34,7 @@
 					<IIButton variant="secondary" size="sm">Top</IIButton>
 				{/snippet}
 				{#snippet content()}
-					<p class="text-small text-body">Popover on top</p>
+					<p class="text-small text-body p-12">Popover on top</p>
 				{/snippet}
 			</IIPopover>
 			<IIPopover side="right">
@@ -42,7 +42,7 @@
 					<IIButton variant="secondary" size="sm">Right</IIButton>
 				{/snippet}
 				{#snippet content()}
-					<p class="text-small text-body">Popover on right</p>
+					<p class="text-small text-body p-12">Popover on right</p>
 				{/snippet}
 			</IIPopover>
 			<IIPopover side="bottom">
@@ -50,7 +50,7 @@
 					<IIButton variant="secondary" size="sm">Bottom</IIButton>
 				{/snippet}
 				{#snippet content()}
-					<p class="text-small text-body">Popover on bottom</p>
+					<p class="text-small text-body p-12">Popover on bottom</p>
 				{/snippet}
 			</IIPopover>
 			<IIPopover side="left">
@@ -58,7 +58,7 @@
 					<IIButton variant="secondary" size="sm">Left</IIButton>
 				{/snippet}
 				{#snippet content()}
-					<p class="text-small text-body">Popover on left</p>
+					<p class="text-small text-body p-12">Popover on left</p>
 				{/snippet}
 			</IIPopover>
 		</div>
@@ -72,7 +72,7 @@
 				<IIIconButton iconName="magnifying-glass" variant="ghost" />
 			{/snippet}
 			{#snippet content()}
-				<div class="flex flex-col gap-8 w-200">
+				<div class="flex flex-col gap-8 w-200 p-12">
 					<p class="text-small-emphasis text-body">Settings</p>
 					<p class="text-small text-secondary">Quick settings panel triggered by an icon button.</p>
 				</div>
@@ -88,7 +88,7 @@
 				<IIButton variant="primary" size="sm">User Info</IIButton>
 			{/snippet}
 			{#snippet content()}
-				<div class="flex flex-col gap-12 w-240">
+				<div class="flex flex-col gap-12 w-240 p-12">
 					<div class="flex items-center gap-8">
 						<div class="w-32 h-32 rounded-full bg-primary flex items-center justify-center text-inverse text-small-emphasis">JD</div>
 						<div>

package/dist/IIStepper/IIStepper.svelte

@@ -55,7 +55,7 @@
 				)}
 			>
 				{#if isCompleted}
-					<IIIcon iconName="check" class="size-14" />
+					<IIIcon iconName="check" />
 				{:else}
 					{i + 1}
 				{/if}

package/dist/IITabBar/IITabBar.svelte

@@ -79,7 +79,7 @@
 					{#snippet child({props})}
 						<IIButton {...props} variant="ghost">
 							{activeLabel}
-							<IIIcon iconName="caret-down" class="w-14 h-14 shrink-0" />
+							<IIIcon iconName="caret-down" />
 						</IIButton>
 					{/snippet}
 				</DropdownMenu.Trigger>
@@ -99,7 +99,7 @@
 						>
 							<span>{tab.label}</span>
 							{#if value === tab.value}
-								<IIIcon iconName="check" class="w-14 h-14 text-accent shrink-0" />
+								<IIIcon iconName="check" variant="accent" />
 							{/if}
 						</DropdownMenu.Item>
 					{/each}

package/dist/Icons/Icons.svelte

@@ -33,7 +33,7 @@
 					onclick={() => navigator.clipboard.writeText(name)}
 					title="Copy '{name}'"
 				>
-					<IIIcon iconName={name} class="w-24 h-24 text-body" />
+					<IIIcon iconName={name} size="xl" class="text-body" />
 					<span class="text-tiny text-secondary font-mono truncate w-full text-center">{name}</span>
 				</button>
 			{/each}

package/dist/MobileOnboarding/ApplyFinancialScreen.svelte

@@ -103,7 +103,7 @@
 										class="inline-flex items-center justify-center w-20 h-20 rounded-full text-secondary hover:text-body hover:bg-hover-overlay transition-colors duration-fast"
 										aria-label="Pay frequency info"
 									>
-										<IIIcon iconName="info" class="size-14" />
+										<IIIcon iconName="info" />
 									</button>
 								{/snippet}
 								{#snippet content()}

package/dist/MobileOnboarding/current/CurrentApplyScreen.svelte

@@ -97,7 +97,7 @@
 										class="bg-transparent border-none cursor-pointer p-0 text-[var(--color-text-light)] flex items-center text-h2 font-normal hover:text-[var(--color-text)]"
 										onclick={() => (showSsn = !showSsn)}
 									>
-										<IIIcon iconName={showSsn ? 'eye-slash' : 'eye'} />
+										<IIIcon iconName={showSsn ? 'eye-slash' : 'eye'} size="inherit" />
 									</button>
 								{/snippet}
 							</IIInput>

package/dist/index.d.ts

@@ -45,6 +45,7 @@ export { IIToaster } from './IIToaster';
 export { IIViewFilterChip } from './IIViewFilterChip';
 export type { AuditEvent, AuditFilter, Severity } from './IIAuditTrail';
 export type { BadgeVariant } from './IIBadge';
+export type { IconSize, IconVariant } from './IIIcon';
 export { toast } from './toast';
 export { cn } from './utils/cn';
 export { icons } from './icons';

package/package.json

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