@insymetri/styleguide 0.1.63 → 0.1.65

package/dist/IIButton/IIButton.svelte

@@ -83,15 +83,15 @@
 	} as const
 
 	const densityClasses = {
-		compact: 'h-28 py-4 px-8 gap-4 text-tiny leading-[20px] rounded-control',
-		default: 'h-32 py-5 px-12 gap-6 text-default leading-[22px] rounded-control',
-		comfortable: 'h-40 py-8 px-12 gap-6 text-small leading-[24px] rounded-control',
-		mobile: 'h-48 py-10 px-16 gap-8 text-default leading-[28px] rounded-control',
+		compact: 'h-28 px-8 gap-4 text-tiny leading-[22px] rounded-control',
+		default: 'h-32 px-12 gap-6 text-default leading-[26px] rounded-control',
+		comfortable: 'h-40 px-12 gap-6 text-small leading-[32px] rounded-control',
+		mobile: 'h-48 px-16 gap-8 text-default leading-[40px] rounded-control',
 	} as const
 
 	const fixedSizeClasses = {
-		sm: 'py-4 px-8 gap-4 text-tiny leading-[16px] h-24 rounded-control',
-		lg: 'py-10 px-16 gap-8 text-large leading-[20px] h-40 rounded-control',
+		sm: 'h-24 px-8 gap-4 text-tiny leading-[18px] rounded-control',
+		lg: 'h-40 px-16 gap-8 text-large leading-[32px] rounded-control',
 	} as const
 
 	const iconSizeClasses = {

package/dist/IICombobox/IICombobox.svelte

@@ -66,14 +66,14 @@
 		compact: 'h-28 rounded-control text-tiny',
 		default: 'h-32 rounded-control text-small',
 		comfortable: 'h-40 rounded-control text-small',
-		mobile: 'h-48 rounded-control text-default',
+		mobile: 'h-48 rounded-control text-large',
 	} as const
 
 	const itemDensityClasses = {
 		compact: 'py-4 text-tiny',
 		default: 'py-6 text-small',
 		comfortable: 'py-8 text-small',
-		mobile: 'py-10 text-default',
+		mobile: 'py-10 text-large',
 	} as const
 
 	let inputValue = $state('')

package/dist/IIDateInput/IIDateInput.svelte

@@ -36,7 +36,7 @@
 		compact: 'h-28 rounded-control text-tiny',
 		default: 'h-32 rounded-control text-small',
 		comfortable: 'h-40 rounded-control text-small',
-		mobile: 'h-48 rounded-control text-default',
+		mobile: 'h-48 rounded-control text-large',
 	} as const
 
 	const showError = $derived(error || !!errorMessage)

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -56,14 +56,14 @@
 		compact: 'h-28 rounded-control text-tiny',
 		default: 'h-32 rounded-control text-small',
 		comfortable: 'h-40 rounded-control text-small',
-		mobile: 'h-48 rounded-control text-default',
+		mobile: 'h-48 rounded-control text-large',
 	} as const
 
 	const itemDensityClasses = {
 		compact: 'py-4 text-tiny',
 		default: 'py-6 text-small',
 		comfortable: 'py-8 text-small',
-		mobile: 'py-10 text-default',
+		mobile: 'py-10 text-large',
 	} as const
 
 	let open = $state(false)

package/dist/IIInput/IIInput.svelte

@@ -40,7 +40,7 @@
 		compact: 'h-28 rounded-control text-small',
 		default: 'h-32 rounded-control text-small',
 		comfortable: 'h-40 rounded-control text-small',
-		mobile: 'h-48 rounded-control text-default',
+		mobile: 'h-48 rounded-control text-large',
 	} as const
 
 	const showError = $derived(error || !!errorMessage)

package/dist/IISegmentedControl/IISegmentedControl.svelte

@@ -46,7 +46,7 @@
 		compact: 'px-8 text-tiny leading-[22px]',
 		default: 'px-8 text-small leading-[26px]',
 		comfortable: 'px-12 text-small leading-[32px]',
-		mobile: 'px-8 text-small leading-[40px]',
+		mobile: 'px-8 text-large leading-[40px]',
 	} as const
 
 	const thumbInset = {
@@ -119,18 +119,20 @@
 	style="padding: {thumbInset[density.value]}px; grid-template-columns: repeat({items.length}, 1fr);"
 >
 	<!-- 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>
+	{#if activeIndex >= 0}
+		<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>
+	{/if}
 
 	{#each items as item (item.value)}
 		{@const isActive = value === item.value}

package/dist/IISegmentedControl/IISegmentedControlStories.svelte

@@ -7,6 +7,9 @@
 
 	let validationMode = $state('allow')
 	let focusValidation: (() => void) | undefined = $state()
+
+	let fullWidthMode = $state('allow')
+	let fullWidthThree = $state('monthly')
 </script>
 
 <div class="flex flex-col gap-32">
@@ -89,6 +92,65 @@
 		</button>
 	</section>
 
+	<!-- Full width -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Full Width</h2>
+		<p class="text-small text-secondary mb-12">
+			When the control is given a width (e.g. <code>w-full</code> in a constrained container),
+			each segment and the thumb should grow proportionally while the text stays centered.
+		</p>
+		<div class="max-w-400 flex flex-col gap-12">
+			<IISegmentedControl
+				class="w-full"
+				items={[
+					{label: 'Allow list', value: 'allow'},
+					{label: 'Block list', value: 'block'},
+				]}
+				bind:value={fullWidthMode}
+			/>
+			<IISegmentedControl
+				class="w-full"
+				items={[
+					{label: 'Monthly', value: 'monthly'},
+					{label: 'Quarterly', value: 'quarterly'},
+					{label: 'Annual', value: 'annual'},
+				]}
+				bind:value={fullWidthThree}
+			/>
+		</div>
+	</section>
+
+	<!-- Undefined value -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Undefined Value</h2>
+		<p class="text-small text-secondary mb-12">
+			When <code>value</code> is <code>undefined</code>, no segment is active and the thumb is
+			hidden.
+		</p>
+		<IISegmentedControl
+			items={[
+				{label: 'Allow list', value: 'allow'},
+				{label: 'Block list', value: 'block'},
+			]}
+			value={undefined as unknown as string}
+		/>
+	</section>
+
+	<!-- Null value -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Null Value</h2>
+		<p class="text-small text-secondary mb-12">
+			When <code>value</code> is <code>null</code>, no segment is active and the thumb is hidden.
+		</p>
+		<IISegmentedControl
+			items={[
+				{label: 'Allow list', value: 'allow'},
+				{label: 'Block list', value: 'block'},
+			]}
+			value={null as unknown as string}
+		/>
+	</section>
+
 	<!-- Density-responsive -->
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">Density Responsive</h2>

package/dist/style/base.css

@@ -4,8 +4,8 @@
 	font-style: normal;
 	font-display: block;
 	font-weight: 100 900;
-	ascent-override: 90%;
-	descent-override: 22.5%;
+	ascent-override: 92%;
+	descent-override: 20.5%;
 	line-gap-override: 0%;
 	size-adjust: 100%;
 	src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
@@ -19,8 +19,8 @@
 	font-style: normal;
 	font-display: block;
 	font-weight: 100 900;
-	ascent-override: 90%;
-	descent-override: 22.5%;
+	ascent-override: 92%;
+	descent-override: 20.5%;
 	line-gap-override: 0%;
 	size-adjust: 100%;
 	src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');

package/package.json

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