@insymetri/styleguide 0.1.89 → 0.1.91

package/dist/IIPillTabs/IIPillTabs.svelte

@@ -58,6 +58,10 @@
 </script>
 
 <div bind:this={containerEl} class={cn('min-w-0 relative', className)}>
+	<!-- Edges come from `shadow-pill` / `shadow-selected-pill` rather than borders: a shadow
+	     takes no layout space, so the row doesn't reflow as the selection moves. Uniform font
+	     weight for the same reason. Selected is a step DOWN from white under a darker
+	     hairline, so it reads pressed in while its neighbours read raised. -->
 	{#snippet pill(tab: Tab)}
 		<button
 			class={cn(
@@ -66,8 +70,8 @@
 				tab.disabled
 					? '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'
+						? 'bg-background-alt text-body shadow-selected-pill'
+						: 'bg-surface text-secondary shadow-pill hover:bg-background-alt hover:text-secondary-strong'
 			)}
 			style="transition: all var(--transition-fast)"
 			disabled={tab.disabled}

package/dist/IISwitch/IISwitch.svelte

@@ -37,7 +37,7 @@
 		</span>
 	{/if}
 	<Switch.Root
-		class="group relative w-32 h-18 bg-strong 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-success data-[disabled]:opacity-50 motion-reduce:transition-none"
+		class="group relative w-32 h-18 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-success data-[disabled]:opacity-50 motion-reduce:transition-none"
 		{checked}
 		onCheckedChange={newChecked => {
 			checked = newChecked

package/dist/style/colors.css

@@ -54,6 +54,9 @@
 	/* Text */
 	--ii-text-primary: #111827;
 	--ii-text-accent: #111827;
+	/* Between secondary and body. Off the ramp, not a literal, so it follows a
+	   consuming app's own neutrals. */
+	--ii-text-secondary-strong: var(--ii-gray-700);
 	--ii-text-secondary: #6b7280;
 	--ii-text-tertiary: #9ca3af;
 	--ii-text-inverse: white;

package/dist/style/dark.css

@@ -48,6 +48,8 @@
 	/* Text — neutral gray, brightest step softened so it doesn't glare on charcoal */
 	--ii-text-primary: #dcdce0;
 	--ii-text-accent: #ececee;
+	/* Ramp inverts here, so gray-700 again lands between secondary and primary. */
+	--ii-text-secondary-strong: var(--ii-gray-700);
 	--ii-text-secondary: #9a9a9f;
 	--ii-text-tertiary: #737377;
 	--ii-text-inverse: #17171a;

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

@@ -125,6 +125,7 @@ export declare const textColor: {
     'dropdown-item-selected': string;
     body: string;
     secondary: string;
+    'secondary-strong': string;
     tertiary: string;
     inverse: string;
     'on-primary': string;

package/dist/style/tailwind/colors.js

@@ -158,6 +158,7 @@ export const textColor = {
     // Text hierarchy
     body: 'var(--ii-text-primary)',
     secondary: 'var(--ii-text-secondary)',
+    'secondary-strong': 'var(--ii-text-secondary-strong)',
     tertiary: 'var(--ii-text-tertiary)',
     inverse: 'var(--ii-text-inverse)',
     'on-primary': 'var(--ii-text-on-primary)',

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

@@ -128,6 +128,7 @@ declare const _default: {
             'dropdown-item-selected': string;
             body: string;
             secondary: string;
+            'secondary-strong': string;
             tertiary: string;
             inverse: string;
             'on-primary': string;
@@ -405,6 +406,7 @@ declare const _default: {
         boxShadow: {
             none: string;
             pill: string;
+            'selected-pill': string;
             subtle: string;
             card: string;
             'comm-hover': string;

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

@@ -1,6 +1,7 @@
 export declare const boxShadow: {
     none: string;
     pill: string;
+    'selected-pill': string;
     subtle: string;
     card: string;
     'comm-hover': string;

package/dist/style/tailwind/shadows.js

@@ -11,7 +11,11 @@ const T3 = 'var(--ii-shadow-3)';
 export const boxShadow = {
     none: 'none',
     // Tier 1 — at rest
-    pill: T1,
+    // Inset hairline + the lift. T1 alone has no spread, so it only darkens the bottom edge;
+    // an outset ring would sit in that same band and paint over the glow.
+    pill: `inset 0 0 0 1px var(--ii-border), ${T1}`,
+    // Selected: same hairline, stronger tone, no lift. Ring-for-ring keeps widths stable.
+    'selected-pill': 'inset 0 0 0 1px var(--ii-border-strong)',
     subtle: T1,
     card: T1,
     'comm-hover': T1,

package/package.json

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