@insymetri/styleguide 0.1.26 → 0.1.28

package/dist/IIButton/IIButton.svelte

@@ -39,7 +39,7 @@
 	const isDisabled = $derived(disabled || loading)
 
 	const baseClasses =
-		'inline-flex items-center justify-center gap-8 whitespace-nowrap cursor-default transition-colors duration-base ease-in-out no-underline disabled:cursor-not-allowed'
+		'inline-flex items-center justify-center gap-8 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'
 
 	const variantClasses = {
 		primary:

package/dist/IICombobox/IICombobox.svelte

@@ -36,6 +36,7 @@
 		emptyContent?: Snippet
 		// Grouped items (alternative to flat items)
 		groups?: Group<T>[]
+		openOnFocus?: boolean
 		// CSS classes
 		class?: string
 		contentClass?: string
@@ -54,6 +55,7 @@
 		renderItem,
 		emptyContent,
 		groups,
+		openOnFocus = false,
 		class: className,
 		contentClass,
 	}: Props<T> = $props()
@@ -135,6 +137,10 @@
 		inputValue = e.currentTarget.value
 	}
 
+	function handleFocus() {
+		open = true
+	}
+
 	// Check if item looks like a SimpleItem for default rendering
 	function isSimpleItem(item: T): item is T & SimpleItem {
 		return typeof item === 'object' && item !== null && 'label' in item && 'value' in item
@@ -182,6 +188,7 @@
 			{placeholder}
 			{disabled}
 			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',
 				densityClasses[density.value]

package/dist/IICombobox/IICombobox.svelte.d.ts

@@ -16,6 +16,7 @@ type Props<T> = {
     renderItem?: Snippet<[item: T, selected: boolean]>;
     emptyContent?: Snippet;
     groups?: Group<T>[];
+    openOnFocus?: boolean;
     class?: string;
     contentClass?: string;
 };

package/dist/IIDateInput/IIDateInput.svelte

@@ -47,9 +47,9 @@
 		{/if}
 		<DatePicker.Input
 			class={cn(
-				'flex items-center gap-4 px-12 border bg-input-bg border-input-border transition-all duration-fast hover:border-input-border-hover [&:has(:focus)]:border-input-border-hover motion-reduce:transition-none',
+				'flex items-center gap-4 px-12 border bg-input-bg border-input-border transition-all duration-fast hover:border-input-border-hover [&:has(:focus)]:border-accent [&:has(:focus)]:ring-3 [&:has(:focus)]:ring-primary motion-reduce:transition-none',
 				densityClasses[density.value],
-				showError && 'border-input-border-error [&:has(:focus)]:border-input-border-error',
+				showError && 'border-input-border-error [&:has(:focus)]:border-input-border-error [&:has(:focus)]:ring-error',
 				disabled && 'bg-input-bg-disabled cursor-not-allowed'
 			)}
 		>

package/dist/IIIconButton/IIIconButton.svelte

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

package/dist/IIInput/IIInput.svelte

@@ -71,7 +71,7 @@
 	{#if hasAddons}
 		<div
 			class={cn(
-				'flex items-center bg-input-bg border border-input-border transition-all duration-fast hover:border-input-border-hover focus-within:border-input-border-hover motion-reduce:transition-none',
+				'flex items-center bg-input-bg border border-button-secondary transition-all duration-fast hover:border-button-secondary-hover focus-within:border-button-secondary-hover motion-reduce:transition-none',
 				densityClasses[density.value],
 				showError && 'border-input-border-error focus-within:border-input-border-error',
 				shouldShake && 'animate-shake',
@@ -117,7 +117,7 @@
 			{type}
 			{disabled}
 			class={cn(
-				'py-5 px-12 font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-input-border transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder hover:border-input-border-hover focus:border-input-border-hover disabled:bg-input-bg-disabled disabled:text-input-text-disabled disabled:cursor-not-allowed motion-reduce:transition-none motion-reduce:animate-none',
+				'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 hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:bg-input-bg-disabled disabled:text-input-text-disabled disabled:cursor-not-allowed motion-reduce:transition-none motion-reduce:animate-none',
 				densityClasses[density.value],
 				showError && 'border-input-border-error focus:border-input-border-error focus:ring-error',
 				shouldShake && 'animate-shake'

package/dist/IISegmentedControl/IISegmentedControl.svelte

@@ -12,49 +12,103 @@
 		items: Item[]
 		value: string
 		onValueChange?: (value: string) => void
-		size?: 'sm' | 'md'
 		class?: string
 	}
 
-	let {items, value = $bindable(), onValueChange, size = 'sm', class: className}: Props = $props()
+	let {items, value = $bindable(), onValueChange, class: className}: Props = $props()
 
 	const density = useDensity()
 
-	const densityRadius = {
-		compact: 'rounded-control',
-		default: 'rounded-control',
-		comfortable: 'rounded-control',
-		mobile: 'rounded-control',
+	const densityHeight = {
+		compact: 'h-28',
+		default: 'h-32',
+		comfortable: 'h-40',
+		mobile: 'h-48',
 	} as const
 
-	const sizeClasses = {
-		sm: 'px-12 py-4 text-small',
-		md: 'px-16 py-6 text-default',
+	const densityClasses = {
+		compact: 'px-8 text-tiny',
+		default: 'px-8 text-small',
+		comfortable: 'px-12 text-small',
+		mobile: 'px-8 text-small',
 	} as const
 
+	const thumbInset = {
+		compact: 2,
+		default: 2,
+		comfortable: 3,
+		mobile: 3,
+	} as const
+
+	const activeIndex = $derived(items.findIndex((item) => item.value === value))
+
 	function select(v: string) {
 		value = v
 		onValueChange?.(v)
 	}
 
-	function getActiveClass(item: Item): string {
-		if (item.variant === 'danger') return 'bg-error text-inverse'
-		return 'bg-primary text-inverse'
+	function cycle(direction: 1 | -1) {
+		const nextIndex = (activeIndex + direction + items.length) % items.length
+		select(items[nextIndex].value)
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault()
+			cycle(1)
+		} else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+			e.preventDefault()
+			cycle(1)
+		} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+			e.preventDefault()
+			cycle(-1)
+		}
+	}
+
+	function getThumbColor(item: Item | undefined): string {
+		if (item?.variant === 'danger') return 'var(--color-error, #ef4444)'
+		return 'var(--ii-primary-15, rgba(17, 115, 212, 0.15))'
 	}
 </script>
 
-<div class={cn('inline-flex border border-primary overflow-hidden', densityRadius[density.value], className)} role="group">
+<div
+	class={cn(
+		'relative inline-flex bg-input-bg border border-button-secondary rounded-control outline-none focus-visible:ring-3 focus-visible:ring-primary cursor-default',
+		densityHeight[density.value],
+		className
+	)}
+	role="radiogroup"
+	tabindex="0"
+	onkeydown={handleKeydown}
+	style="padding: {thumbInset[density.value]}px;"
+>
+	<!-- Sliding thumb -->
+	<div
+		class="absolute"
+		style:border-radius="calc(var(--ii-radius-control) - {thumbInset[density.value]}px)"
+		style="
+			top: {thumbInset[density.value]}px;
+			bottom: {thumbInset[density.value]}px;
+			left: calc({thumbInset[density.value]}px + {activeIndex} * (100% - {thumbInset[density.value] * 2}px) / {items.length});
+			width: calc((100% - {thumbInset[density.value] * 2}px) / {items.length});
+			background: {getThumbColor(items[activeIndex])};
+			transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1);
+		"
+	></div>
+
 	{#each items as item (item.value)}
 		{@const isActive = value === item.value}
 		<button
 			type="button"
+			tabindex="-1"
 			class={cn(
-				'border-none font-medium cursor-default whitespace-nowrap text-center not-first:border-l not-first:border-primary',
-				sizeClasses[size],
-				isActive ? getActiveClass(item) : 'bg-surface text-secondary hover:bg-background'
+				'relative z-10 flex-1 border-none font-medium cursor-default whitespace-nowrap text-center outline-none bg-transparent',
+				densityClasses[density.value],
+				isActive ? 'text-primary' : 'text-secondary hover:text-body'
 			)}
-			style="transition: all var(--transition-fast)"
-			aria-pressed={isActive}
+			style="transition: color var(--transition-fast)"
+			role="radio"
+			aria-checked={isActive}
 			onclick={() => select(item.value)}
 		>
 			{item.label}

package/dist/IISegmentedControl/IISegmentedControl.svelte.d.ts

@@ -7,7 +7,6 @@ type Props = {
     items: Item[];
     value: string;
     onValueChange?: (value: string) => void;
-    size?: 'sm' | 'md';
     class?: string;
 };
 declare const IISegmentedControl: import("svelte").Component<Props, {}, "value">;

package/dist/IISegmentedControl/IISegmentedControlStories.svelte

@@ -62,32 +62,16 @@
 		/>
 	</section>
 
-	<!-- Sizes -->
+	<!-- Density-responsive -->
 	<section>
-		<h2 class="text-default-emphasis text-primary mb-8">Sizes</h2>
-		<div class="flex items-center gap-16">
-			<div class="flex flex-col items-start gap-4">
-				<span class="text-tiny text-secondary">sm (default)</span>
-				<IISegmentedControl
-					size="sm"
-					items={[
-						{label: 'On', value: 'on'},
-						{label: 'Off', value: 'off'},
-					]}
-					value="on"
-				/>
-			</div>
-			<div class="flex flex-col items-start gap-4">
-				<span class="text-tiny text-secondary">md</span>
-				<IISegmentedControl
-					size="md"
-					items={[
-						{label: 'On', value: 'on'},
-						{label: 'Off', value: 'off'},
-					]}
-					value="on"
-				/>
-			</div>
-		</div>
+		<h2 class="text-default-emphasis text-primary mb-8">Density Responsive</h2>
+		<p class="text-small text-secondary mb-12">Sizing follows the density provider context.</p>
+		<IISegmentedControl
+			items={[
+				{label: 'On', value: 'on'},
+				{label: 'Off', value: 'off'},
+			]}
+			value="on"
+		/>
 	</section>
 </div>

package/dist/IISwitch/IISwitch.svelte

@@ -42,7 +42,7 @@
 		</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 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]:cursor-not-allowed data-[disabled]:opacity-50 motion-reduce:transition-none"
 		{checked}
 		onCheckedChange={newChecked => {
 			checked = newChecked

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 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 disabled:cursor-not-allowed',
 		resolvedSizeClasses,
 		iconSizeClasses[size],
 		className

package/dist/MobileOnboarding/LoginFlowBare.svelte

@@ -4,16 +4,27 @@
 	import StepIndicator from './StepIndicator.svelte'
 
 	let step: 'email' | 'otp' = $state('email')
+	let transitioning = $state(false)
+
+	const FADE_DURATION = 200
+
+	function transitionTo(newStep: 'email' | 'otp') {
+		transitioning = true
+		setTimeout(() => {
+			step = newStep
+			transitioning = false
+		}, FADE_DURATION)
+	}
 </script>
 
 {#if step === 'email'}
-	<LoginScreenBare onContinue={() => (step = 'otp')} hideStepIndicator>
+	<LoginScreenBare onContinue={() => transitionTo('otp')} hideStepIndicator {transitioning}>
 		{#snippet stepIndicator()}
 			<StepIndicator current={step === 'email' ? 0 : 1} total={2} />
 		{/snippet}
 	</LoginScreenBare>
 {:else}
-	<OTPScreenBare onBack={() => (step = 'email')} hideStepIndicator>
+	<OTPScreenBare onBack={() => transitionTo('email')} hideStepIndicator {transitioning}>
 		{#snippet stepIndicator()}
 			<StepIndicator current={step === 'email' ? 0 : 1} total={2} />
 		{/snippet}