@insymetri/styleguide 0.1.5 → 0.1.7

package/dist/IIAlert/IIAlert.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {cn} from '../utils/cn'
+	import {IIIcon} from '../IIIcon'
+	import type {IconName} from '../icons'
+
+	type Variant = 'error' | 'warning' | 'success' | 'info'
+
+	type Props = {
+		variant?: Variant
+		title?: string
+		children: Snippet
+		dismissible?: boolean
+		onDismiss?: () => void
+		class?: string
+	}
+
+	let {
+		variant = 'info',
+		title,
+		children,
+		dismissible = false,
+		onDismiss,
+		class: className,
+	}: Props = $props()
+
+	let dismissed = $state(false)
+
+	const variantConfig: Record<Variant, {bg: string; border: string; text: string; icon: IconName}> = {
+		error: {bg: 'bg-error-bg', border: 'border-error', text: 'text-error', icon: 'warning-circle'},
+		warning: {bg: 'bg-warning-bg', border: 'border-warning', text: 'text-warning', icon: 'warning'},
+		success: {bg: 'bg-success-bg', border: 'border-success', text: 'text-success', icon: 'check-circle'},
+		info: {bg: 'bg-info-bg', border: 'border-info', text: 'text-info', icon: 'info'},
+	}
+
+	const config = $derived(variantConfig[variant])
+
+	function handleDismiss() {
+		dismissed = true
+		onDismiss?.()
+	}
+</script>
+
+{#if !dismissed}
+	<div
+		class={cn(
+			'flex gap-12 p-12 rounded-8 border',
+			config.bg,
+			config.border,
+			className
+		)}
+		role="alert"
+	>
+		<IIIcon icon={config.icon} class={cn('size-20 shrink-0 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>
+			{/if}
+			<div class={cn('text-small text-body', title && 'mt-4')}>
+				{@render children()}
+			</div>
+		</div>
+		{#if dismissible}
+			<button
+				type="button"
+				class="shrink-0 p-4 rounded-4 text-secondary hover:bg-hover-overlay transition-colors duration-fast cursor-default"
+				onclick={handleDismiss}
+				aria-label="Dismiss"
+			>
+				<IIIcon icon="x" class="size-16" />
+			</button>
+		{/if}
+	</div>
+{/if}

package/dist/IIAlert/IIAlert.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Variant = 'error' | 'warning' | 'success' | 'info';
+type Props = {
+    variant?: Variant;
+    title?: string;
+    children: Snippet;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    class?: string;
+};
+declare const IIAlert: import("svelte").Component<Props, {}, "">;
+type IIAlert = ReturnType<typeof IIAlert>;
+export default IIAlert;

package/dist/IIAlert/index.d.ts

@@ -0,0 +1 @@
+export { default as IIAlert } from './IIAlert.svelte';

package/dist/IIAlert/index.js

@@ -0,0 +1 @@
+export { default as IIAlert } from './IIAlert.svelte';

package/dist/IIButton/IIButton.svelte

@@ -4,7 +4,7 @@
 	import {cn} from '../utils/cn'
 
 	type BaseProps = {
-		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success'
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent'
 		size?: 'sm' | 'md' | 'lg'
 		iconOnly?: boolean
 		loading?: boolean
@@ -47,11 +47,12 @@
 		ghost: 'bg-transparent text-secondary border-0 hover:bg-button-ghost-hover disabled:opacity-50',
 		danger: 'bg-error text-inverse border-0 hover:bg-error-hover disabled:bg-disabled',
 		success: 'bg-success text-inverse border-0 hover:bg-success-hover disabled:bg-disabled',
+		accent: 'bg-accent text-on-accent border-0 hover:bg-accent-hover disabled:bg-disabled',
 	} as const
 
 	const sizeClasses = {
 		sm: 'py-4 px-8 text-tiny-emphasis h-20',
-		md: 'py-6 px-16 text-small h-28',
+		md: 'py-5 px-16 text-small h-28',
 		lg: 'py-10 px-24 text-large h-36',
 	} as const
 

package/dist/IIButton/IIButton.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 type BaseProps = {
-    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'accent';
     size?: 'sm' | 'md' | 'lg';
     iconOnly?: boolean;
     loading?: boolean;

package/dist/IICard/IICard.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte'
+	import {cn} from '../utils/cn'
+
+	type Props = {
+		variant?: 'default' | 'outlined' | 'elevated'
+		padding?: 'none' | 'sm' | 'md' | 'lg'
+		hoverable?: boolean
+		children: Snippet
+		header?: Snippet
+		footer?: Snippet
+		class?: string
+	}
+
+	let {
+		variant = 'default',
+		padding = 'md',
+		hoverable = false,
+		children,
+		header,
+		footer,
+		class: className,
+	}: Props = $props()
+
+	const variantClasses = {
+		default: 'bg-surface border border-primary',
+		outlined: 'bg-transparent border border-strong',
+		elevated: 'bg-surface shadow-card',
+	} as const
+
+	const paddingClasses = {
+		none: '',
+		sm: 'p-12',
+		md: 'p-16',
+		lg: 'p-24',
+	} as const
+</script>
+
+<div
+	class={cn(
+		'rounded-12',
+		variantClasses[variant],
+		hoverable && 'transition-shadow duration-fast hover:shadow-card-hover cursor-default',
+		className
+	)}
+>
+	{#if header}
+		<div class={cn('border-b border-primary', paddingClasses[padding])}>
+			{@render header()}
+		</div>
+	{/if}
+	<div class={paddingClasses[padding]}>
+		{@render children()}
+	</div>
+	{#if footer}
+		<div class={cn('border-t border-primary', paddingClasses[padding])}>
+			{@render footer()}
+		</div>
+	{/if}
+</div>

package/dist/IICard/IICard.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    variant?: 'default' | 'outlined' | 'elevated';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+    hoverable?: boolean;
+    children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    class?: string;
+};
+declare const IICard: import("svelte").Component<Props, {}, "">;
+type IICard = ReturnType<typeof IICard>;
+export default IICard;

package/dist/IICard/index.d.ts

@@ -0,0 +1 @@
+export { default as IICard } from './IICard.svelte';

package/dist/IICard/index.js

@@ -0,0 +1 @@
+export { default as IICard } from './IICard.svelte';

package/dist/IICombobox/IICombobox.svelte

@@ -111,13 +111,13 @@
 			{placeholder}
 			{disabled}
 			oninput={handleInput}
-			class="w-full box-border py-6 px-12 text-small text-input-text bg-input-bg border border-input-border rounded-10 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="w-full box-border py-5 px-12 text-small text-input-text bg-input-bg border border-input-border rounded-10 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"
 		/>
 		<Combobox.Portal>
 			{#if filteredItems.length > 0 || emptyContent}
 				<Combobox.Content
 					class={cn(
-						'bg-surface border border-primary rounded-b-6 border-t-0 shadow-dropdown p-4 max-h-300 overflow-y-auto z-12',
+						'bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 max-h-300 overflow-y-auto z-16',
 						contentClass
 					)}
 					style="width: calc(var(--bits-floating-anchor-width) - 4px)"
@@ -129,7 +129,7 @@
 							value={getItemValue(item)}
 							label=""
 							disabled={getItemDisabled?.(item) ?? false}
-							class="flex items-center gap-8 py-6 px-12 text-small text-dropdown-item rounded-4 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"
+							class="flex items-center gap-8 py-6 px-12 text-small 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"
 						>
 							{#snippet children({selected})}
 								{#if renderItem}

package/dist/IIDatePicker/IIDatePicker.svelte

@@ -18,7 +18,7 @@
 	{/if}
 	<div class="relative">
 		<DatePicker.Input
-			class="flex items-center gap-4 py-6 px-12 border border-strong rounded-10 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 rounded-10 text-small text-gray-800 bg-surface transition-all duration-fast [&:has(:focus)]:border-primary [&:has(:focus)]:ring-3 [&:has(:focus)]:ring-primary"
 		>
 			{#snippet children({segments})}
 				{#each segments as { part, value: segValue }, i (`${part}-${i}`)}

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -14,6 +14,7 @@
 		placeholder?: string
 		disabled?: boolean
 		onSelect?: (value: string) => void
+		matchTriggerWidth?: boolean
 		class?: string
 	}
 
@@ -23,10 +24,13 @@
 		placeholder = 'Select...',
 		disabled = false,
 		onSelect,
+		matchTriggerWidth = false,
 		class: className,
 	}: Props = $props()
 
 	let open = $state(false)
+	let triggerEl = $state<HTMLElement | null>(null)
+	let triggerWidth = $state<number | undefined>(undefined)
 
 	const selectedLabel = $derived(items.find(i => i.value === value)?.label ?? placeholder)
 
@@ -35,13 +39,20 @@
 		open = false
 		onSelect?.(item.value)
 	}
+
+	$effect(() => {
+		if (matchTriggerWidth && open && triggerEl) {
+			triggerWidth = triggerEl.offsetWidth
+		}
+	})
 </script>
 
 <DropdownMenu.Root bind:open>
 	<DropdownMenu.Trigger
+		bind:ref={triggerEl}
 		{disabled}
 		class={cn(
-			'inline-flex items-center gap-4 py-6 pl-12 pr-8 border rounded-10 bg-input-bg cursor-default text-small text-input-text box-border appearance-none font-inherit outline-none 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 rounded-10 bg-input-bg cursor-default text-small text-input-text box-border appearance-none font-inherit outline-none focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
 			open ? 'border-input-border-hover' : 'border-input-border hover:border-input-border-hover',
 			value === undefined && 'text-input-placeholder',
 			className
@@ -52,25 +63,36 @@
 		>
 		<IIIcon icon="caret-down" class="w-14 h-14 text-secondary shrink-0" />
 	</DropdownMenu.Trigger>
-	<DropdownMenu.Content
-		class="min-w-100 bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 outline-none"
-		sideOffset={2}
-		side="bottom"
-		align="start"
-	>
-		{#each items as item (item.value)}
-			<DropdownMenu.Item
-				class={cn(
-					'flex items-center justify-between gap-12 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover',
-					value === item.value && 'text-dropdown-item-selected'
-				)}
-				onSelect={() => handleSelect(item)}
-			>
-				<span>{item.label}</span>
-				{#if value === item.value}
-					<IIIcon icon="check" class="w-14 h-14 text-accent shrink-0" />
-				{/if}
-			</DropdownMenu.Item>
-		{/each}
-	</DropdownMenu.Content>
+	<DropdownMenu.Portal>
+		<DropdownMenu.Content
+			class="min-w-100 bg-dropdown-bg border border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 outline-none"
+			sideOffset={2}
+			side="bottom"
+			align="start"
+		>
+			{#snippet child({ props, wrapperProps })}
+				<div
+					{...wrapperProps}
+					style:min-width={matchTriggerWidth && triggerWidth ? `${triggerWidth}px` : undefined}
+				>
+					<div {...props}>
+						{#each items as item (item.value)}
+							<DropdownMenu.Item
+								class={cn(
+									'flex items-center justify-between gap-12 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover',
+									value === item.value && 'text-dropdown-item-selected'
+								)}
+								onSelect={() => handleSelect(item)}
+							>
+								<span>{item.label}</span>
+								{#if value === item.value}
+									<IIIcon icon="check" class="w-14 h-14 text-accent shrink-0" />
+								{/if}
+							</DropdownMenu.Item>
+						{/each}
+					</div>
+				</div>
+			{/snippet}
+		</DropdownMenu.Content>
+	</DropdownMenu.Portal>
 </DropdownMenu.Root>

package/dist/IIDropdownInput/IIDropdownInput.svelte.d.ts

@@ -8,6 +8,7 @@ type Props = {
     placeholder?: string;
     disabled?: boolean;
     onSelect?: (value: string) => void;
+    matchTriggerWidth?: boolean;
     class?: string;
 };
 declare const IIDropdownInput: import("svelte").Component<Props, {}, "value">;

package/dist/IIDropdownMenu/IIDropdownMenu.svelte

@@ -62,7 +62,7 @@
 					onSelect={() => handleSelect(item.value)}
 				>
 					{#if item.icon}
-						<div class="w-11 h-11 flex items-center justify-center shrink-0">
+						<div class="w-16 h-16 flex items-center justify-center shrink-0 [&_svg]:w-16 [&_svg]:h-16">
 							{@render item.icon()}
 						</div>
 					{/if}

package/dist/IIInput/IIInput.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+	import type {Snippet} from 'svelte'
 	import type {HTMLInputAttributes} from 'svelte/elements'
 	import {cn} from '../utils/cn'
 
-	type Props = HTMLInputAttributes & {
+	type Props = Omit<HTMLInputAttributes, 'prefix'> & {
 		label?: string
 		errorMessage?: string
 		helperText?: string
@@ -12,6 +13,8 @@
 		value?: string | number
 		ref?: HTMLInputElement
 		class?: string
+		prefix?: Snippet
+		suffix?: Snippet
 	}
 
 	let {
@@ -24,10 +27,13 @@
 		value = $bindable(),
 		ref = $bindable(),
 		class: className,
+		prefix,
+		suffix,
 		...restProps
 	}: Props = $props()
 
 	const showError = $derived(error || !!errorMessage)
+	const hasAddons = $derived(!!prefix || !!suffix)
 	let shouldShake = $state(false)
 	let prevShowError = $state(false)
 
@@ -49,18 +55,48 @@
 			{label}
 		</label>
 	{/if}
-	<input
-		bind:this={ref}
-		bind:value
-		{type}
-		{disabled}
-		class={cn(
-			'py-6 px-12 text-small font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-input-border rounded-10 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',
-			showError && 'border-input-border-error focus:border-input-border-error focus:ring-error',
-			shouldShake && 'animate-shake'
-		)}
-		{...restProps}
-	/>
+	{#if hasAddons}
+		<div
+			class={cn(
+				'flex items-center bg-input-bg border border-input-border rounded-10 transition-all duration-fast hover:border-input-border-hover focus-within:border-input-border-hover motion-reduce:transition-none',
+				showError && 'border-input-border-error focus-within:border-input-border-error',
+				shouldShake && 'animate-shake',
+				disabled && 'bg-input-bg-disabled cursor-not-allowed'
+			)}
+		>
+			{#if prefix}
+				<span class="flex items-center pl-12 text-secondary shrink-0">
+					{@render prefix()}
+				</span>
+			{/if}
+			<input
+				bind:this={ref}
+				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"
+				{...restProps}
+			/>
+			{#if suffix}
+				<span class="flex items-center pr-12 text-secondary shrink-0">
+					{@render suffix()}
+				</span>
+			{/if}
+		</div>
+	{:else}
+		<input
+			bind:this={ref}
+			bind:value
+			{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-10 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',
+				showError && 'border-input-border-error focus:border-input-border-error focus:ring-error',
+				shouldShake && 'animate-shake'
+			)}
+			{...restProps}
+		/>
+	{/if}
 	{#if showError && errorMessage}
 		<span class="text-tiny text-error">{errorMessage}</span>
 	{:else if helperText}

package/dist/IIInput/IIInput.svelte.d.ts

@@ -1,5 +1,6 @@
+import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-type Props = HTMLInputAttributes & {
+type Props = Omit<HTMLInputAttributes, 'prefix'> & {
     label?: string;
     errorMessage?: string;
     helperText?: string;
@@ -9,6 +10,8 @@ type Props = HTMLInputAttributes & {
     value?: string | number;
     ref?: HTMLInputElement;
     class?: string;
+    prefix?: Snippet;
+    suffix?: Snippet;
 };
 declare const IIInput: import("svelte").Component<Props, {}, "value" | "ref">;
 type IIInput = ReturnType<typeof IIInput>;

package/dist/IISpinner/IISpinner.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import {cn} from '../utils/cn'
+
+	type Props = {
+		size?: 'sm' | 'md' | 'lg'
+		class?: string
+	}
+
+	let {size = 'md', class: className}: Props = $props()
+
+	const sizeClasses = {
+		sm: 'w-16 h-16 border-2',
+		md: 'w-24 h-24 border-2',
+		lg: 'w-36 h-36 border-3',
+	} as const
+</script>
+
+<span
+	class={cn(
+		'inline-block rounded-full border-primary border-r-transparent animate-spin motion-reduce:animate-none',
+		sizeClasses[size],
+		className
+	)}
+	role="status"
+	aria-label="Loading"
+></span>

package/dist/IISpinner/IISpinner.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+};
+declare const IISpinner: import("svelte").Component<Props, {}, "">;
+type IISpinner = ReturnType<typeof IISpinner>;
+export default IISpinner;

package/dist/IISpinner/index.d.ts

@@ -0,0 +1 @@
+export { default as IISpinner } from './IISpinner.svelte';

package/dist/IISpinner/index.js

@@ -0,0 +1 @@
+export { default as IISpinner } from './IISpinner.svelte';

package/dist/IIStepper/IIStepper.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import {cn} from '../utils/cn'
+	import {IIIcon} from '../IIIcon'
+
+	type Step = {
+		label: string
+		description?: string
+	}
+
+	type Props = {
+		steps: Step[]
+		currentStep: number
+		onStepClick?: (index: number) => void
+		class?: string
+	}
+
+	let {steps, currentStep, onStepClick, class: className}: Props = $props()
+</script>
+
+<nav class={cn('flex items-center w-full', className)} aria-label="Progress">
+	{#each steps as step, i}
+		{@const isCompleted = i < currentStep}
+		{@const isActive = i === currentStep}
+		{@const isClickable = !!onStepClick && (isCompleted || isActive)}
+
+		{#if i > 0}
+			<div
+				class={cn(
+					'flex-auto h-[2px] mx-8',
+					isCompleted ? 'bg-primary' : 'bg-muted'
+				)}
+			></div>
+		{/if}
+
+		<button
+			type="button"
+			class={cn(
+				'flex items-center gap-8 shrink-0',
+				isClickable ? 'cursor-default' : 'cursor-default pointer-events-none'
+			)}
+			disabled={!isClickable}
+			onclick={() => onStepClick?.(i)}
+			aria-current={isActive ? 'step' : undefined}
+		>
+			<span
+				class={cn(
+					'flex items-center justify-center w-28 h-28 rounded-full text-tiny-emphasis transition-colors duration-fast',
+					isCompleted && 'bg-primary text-inverse',
+					isActive && 'bg-primary text-inverse',
+					!isCompleted && !isActive && 'bg-muted text-secondary'
+				)}
+			>
+				{#if isCompleted}
+					<IIIcon icon="check" class="size-14" />
+				{:else}
+					{i + 1}
+				{/if}
+			</span>
+			<span
+				class={cn(
+					'text-small hidden sm:block',
+					isActive && 'text-body font-medium',
+					isCompleted && 'text-body',
+					!isCompleted && !isActive && 'text-secondary'
+				)}
+			>
+				{step.label}
+			</span>
+		</button>
+	{/each}
+</nav>

package/dist/IIStepper/IIStepper.svelte.d.ts

@@ -0,0 +1,13 @@
+type Step = {
+    label: string;
+    description?: string;
+};
+type Props = {
+    steps: Step[];
+    currentStep: number;
+    onStepClick?: (index: number) => void;
+    class?: string;
+};
+declare const IIStepper: import("svelte").Component<Props, {}, "">;
+type IIStepper = ReturnType<typeof IIStepper>;
+export default IIStepper;

package/dist/IIStepper/index.d.ts

@@ -0,0 +1 @@
+export { default as IIStepper } from './IIStepper.svelte';

package/dist/IIStepper/index.js

@@ -0,0 +1 @@
+export { default as IIStepper } from './IIStepper.svelte';

package/dist/IITextarea/IITextarea.svelte

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

package/dist/icons.d.ts

@@ -66,6 +66,7 @@ export declare const icons: {
     readonly 'dots-three-vertical': "<path fill=\"currentColor\" d=\"M140 128a12 12 0 1 1-12-12a12 12 0 0 1 12 12m-12-56a12 12 0 1 0-12-12a12 12 0 0 0 12 12m0 112a12 12 0 1 0 12 12a12 12 0 0 0-12-12\"/>";
     readonly trash: "<path fill=\"currentColor\" d=\"M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0\"/>";
     readonly circle: "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88\"/>";
+    readonly info: "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a8 8 0 0 1-8-8v-40a8 8 0 0 1 0-16a8 8 0 0 1 8 8v40a8 8 0 0 1 8 8M116 84a12 12 0 1 1 12 12a12 12 0 0 1-12-12\"/>";
     readonly 'warning-circle': "<path fill=\"currentColor\" d=\"M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m-8-80V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12\"/>";
     readonly warning: "<path fill=\"currentColor\" d=\"M236.8 188.09L149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19a23.51 23.51 0 0 0 .02-23.72m-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2a7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72M120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12\"/>";
     readonly gavel: "<path fill=\"currentColor\" d=\"m243.32 116.69l-16-16a16 16 0 0 0-20.84-1.53l-49.64-49.64a16 16 0 0 0-1.52-20.84l-16-16a16 16 0 0 0-22.63 0l-64 64a16 16 0 0 0 0 22.63l16 16a16 16 0 0 0 20.83 1.52l7.17 7.17l-65.38 65.38a25 25 0 0 0 35.32 35.32L132 159.32l7.17 7.16a16 16 0 0 0 1.52 20.84l16 16a16 16 0 0 0 22.63 0l64-64a16 16 0 0 0 0-22.63M80 104L64 88l64-64l16 16ZM55.32 213.38a9 9 0 0 1-12.69 0a9 9 0 0 1 0-12.68L108 135.32L120.69 148ZM101 105.66L145.66 61L195 110.34L150.35 155ZM168 192l-16-16l4-4l56-56l4-4l16 16Z\"/>";

package/dist/icons.js

@@ -74,6 +74,7 @@ export const icons = {
     'trash': `<path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M96 40a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8v8H96Zm96 168H64V64h128Zm-80-104v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0m48 0v64a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0"/>`,
     'circle': `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88"/>`,
     // Status & Feedback
+    'info': `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m16-40a8 8 0 0 1-8 8a8 8 0 0 1-8-8v-40a8 8 0 0 1 0-16a8 8 0 0 1 8 8v40a8 8 0 0 1 8 8M116 84a12 12 0 1 1 12 12a12 12 0 0 1-12-12"/>`,
     'warning-circle': `<path fill="currentColor" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m0 192a88 88 0 1 1 88-88a88.1 88.1 0 0 1-88 88m-8-80V80a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12"/>`,
     'warning': `<path fill="currentColor" d="M236.8 188.09L149.35 36.22a24.76 24.76 0 0 0-42.7 0L19.2 188.09a23.51 23.51 0 0 0 0 23.72A24.35 24.35 0 0 0 40.55 224h174.9a24.35 24.35 0 0 0 21.33-12.19a23.51 23.51 0 0 0 .02-23.72m-13.87 15.71a8.5 8.5 0 0 1-7.48 4.2H40.55a8.5 8.5 0 0 1-7.48-4.2a7.59 7.59 0 0 1 0-7.72l87.45-151.87a8.75 8.75 0 0 1 15 0l87.45 151.87a7.59 7.59 0 0 1-.04 7.72M120 144v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-16 0m20 36a12 12 0 1 1-12-12a12 12 0 0 1 12 12"/>`,
     // Legal & Auth

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 export { IIActionGroup } from './IIActionGroup';
+export { IIAlert } from './IIAlert';
 export { IIAsyncState } from './IIAsyncState';
 export { IIAuditTrail } from './IIAuditTrail';
 export { IIBadge } from './IIBadge';
 export { IIButton } from './IIButton';
+export { IICard } from './IICard';
 export { IICheckbox } from './IICheckbox';
 export { IICheckboxList } from './IICheckboxList';
 export { IICombobox } from './IICombobox';
@@ -18,7 +20,9 @@ export { IIIcon } from './IIIcon';
 export { IIInput } from './IIInput';
 export { IIModal } from './IIModal';
 export { IIOverflowActions } from './IIOverflowActions';
+export { IISpinner } from './IISpinner';
 export { IIStatusBadge } from './IIStatusBadge';
+export { IIStepper } from './IIStepper';
 export { IISwitch } from './IISwitch';
 export { IITable } from './IITable';
 export { IITableSkeleton } from './IITableSkeleton';

package/dist/index.js

@@ -1,10 +1,12 @@
 // @insymetri/styleguide
 // Components
 export { IIActionGroup } from './IIActionGroup';
+export { IIAlert } from './IIAlert';
 export { IIAsyncState } from './IIAsyncState';
 export { IIAuditTrail } from './IIAuditTrail';
 export { IIBadge } from './IIBadge';
 export { IIButton } from './IIButton';
+export { IICard } from './IICard';
 export { IICheckbox } from './IICheckbox';
 export { IICheckboxList } from './IICheckboxList';
 export { IICombobox } from './IICombobox';
@@ -20,7 +22,9 @@ export { IIIcon } from './IIIcon';
 export { IIInput } from './IIInput';
 export { IIModal } from './IIModal';
 export { IIOverflowActions } from './IIOverflowActions';
+export { IISpinner } from './IISpinner';
 export { IIStatusBadge } from './IIStatusBadge';
+export { IIStepper } from './IIStepper';
 export { IISwitch } from './IISwitch';
 export { IITable } from './IITable';
 export { IITableSkeleton } from './IITableSkeleton';

package/dist/style/colors.css

@@ -5,6 +5,11 @@
 	/* Brand */
 	--ii-primary: #1173d4;
 	--ii-primary-hover: #0f5bb6;
+	--ii-accent: #ee7034;
+	--ii-accent-hover: #d4632e;
+	--ii-secondary: #0891b2;
+	--ii-text-on-primary: #ffffff;
+	--ii-text-on-accent: #ffffff;
 
 	/* Grayscale */
 	--ii-gray-50: #f9fafb;
@@ -54,6 +59,7 @@
 	--ii-text-inverse: white;
 
 	/* Borders */
+	--ii-border-subtle: #ebebeb;
 	--ii-border: #e5e7eb;
 	--ii-border-strong: #d1d5db;
 

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

@@ -1,6 +1,9 @@
 export declare const backgroundColor: {
     primary: string;
     'primary-hover': string;
+    accent: string;
+    'accent-hover': string;
+    secondary: string;
     'primary-2': string;
     'primary-5': string;
     'primary-8': string;
@@ -107,6 +110,8 @@ export declare const textColor: {
     secondary: string;
     tertiary: string;
     inverse: string;
+    'on-primary': string;
+    'on-accent': string;
     surface: string;
     muted: string;
     'muted-strong': string;

package/dist/style/tailwind/colors.js

@@ -23,6 +23,9 @@ export const backgroundColor = {
     // Brand
     primary: 'var(--ii-primary)',
     'primary-hover': 'var(--ii-primary-hover)',
+    accent: 'var(--ii-accent)',
+    'accent-hover': 'var(--ii-accent-hover)',
+    secondary: 'var(--ii-secondary)',
     'primary-2': 'var(--ii-primary-2)',
     'primary-5': 'var(--ii-primary-5)',
     'primary-8': 'var(--ii-primary-8)',
@@ -135,6 +138,8 @@ export const textColor = {
     secondary: 'var(--ii-text-secondary)',
     tertiary: 'var(--ii-text-tertiary)',
     inverse: 'var(--ii-text-inverse)',
+    'on-primary': 'var(--ii-text-on-primary)',
+    'on-accent': 'var(--ii-text-on-accent)',
     surface: 'var(--ii-surface)', // white text on dark backgrounds
     muted: 'var(--ii-border)', // very light gray (decorative separators, bullets)
     'muted-strong': 'var(--ii-border-strong)', // slightly darker muted text
@@ -183,7 +188,7 @@ export const borderColor = {
     // Border hierarchy
     primary: 'var(--ii-border)',
     strong: 'var(--ii-border-strong)',
-    subtle: 'var(--ii-background-alt)', // very subtle divider (lighter than primary)
+    subtle: 'var(--ii-border-subtle)',
     // Input
     'input-border': 'var(--color-input-border)',
     'input-border-hover': 'var(--color-input-border-hover)',

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

@@ -51,27 +51,27 @@ export declare const fontSize: {
         readonly lineHeight: "2.0rem";
         readonly fontWeight: "500";
     }];
-    readonly default: readonly ["1.4rem", {
+    readonly default: readonly ["1.3rem", {
         readonly lineHeight: "1.6rem";
         readonly fontWeight: "400";
     }];
-    readonly emphasis: readonly ["1.4rem", {
+    readonly emphasis: readonly ["1.3rem", {
         readonly lineHeight: "1.6rem";
         readonly fontWeight: "500";
     }];
-    readonly strong: readonly ["1.4rem", {
+    readonly strong: readonly ["1.3rem", {
         readonly lineHeight: "1.6rem";
         readonly fontWeight: "600";
     }];
-    readonly small: readonly ["1.3rem", {
+    readonly small: readonly ["1.2rem", {
         readonly lineHeight: "1.6rem";
         readonly fontWeight: "400";
     }];
-    readonly 'small-emphasis': readonly ["1.3rem", {
+    readonly 'small-emphasis': readonly ["1.2rem", {
         readonly lineHeight: "1.6rem";
         readonly fontWeight: "500";
     }];
-    readonly 'small-strong': readonly ["1.3rem", {
+    readonly 'small-strong': readonly ["1.2rem", {
         readonly lineHeight: "1.6rem";
         readonly fontWeight: "600";
     }];

package/dist/style/tailwind/typography.js

@@ -19,14 +19,14 @@ export const fontSize = {
     // Body — large (16px)
     large: ['1.6rem', { lineHeight: '2.0rem', fontWeight: '400' }],
     'large-emphasis': ['1.6rem', { lineHeight: '2.0rem', fontWeight: '500' }],
-    // Body — default (14px)
-    default: ['1.4rem', { lineHeight: '1.6rem', fontWeight: '400' }],
-    emphasis: ['1.4rem', { lineHeight: '1.6rem', fontWeight: '500' }],
-    strong: ['1.4rem', { lineHeight: '1.6rem', fontWeight: '600' }],
-    // Body — small (13px)
-    small: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '400' }],
-    'small-emphasis': ['1.3rem', { lineHeight: '1.6rem', fontWeight: '500' }],
-    'small-strong': ['1.3rem', { lineHeight: '1.6rem', fontWeight: '600' }],
+    // Body — default (13px)
+    default: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '400' }],
+    emphasis: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '500' }],
+    strong: ['1.3rem', { lineHeight: '1.6rem', fontWeight: '600' }],
+    // Body — small (12px)
+    small: ['1.2rem', { lineHeight: '1.6rem', fontWeight: '400' }],
+    'small-emphasis': ['1.2rem', { lineHeight: '1.6rem', fontWeight: '500' }],
+    'small-strong': ['1.2rem', { lineHeight: '1.6rem', fontWeight: '600' }],
     // Body — tiny (11px)
     tiny: ['1.1rem', { lineHeight: '1.2rem', fontWeight: '400' }],
     'tiny-emphasis': ['1.1rem', { lineHeight: '1.2rem', fontWeight: '500' }],

package/package.json

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