@insymetri/styleguide 0.1.17 → 0.1.18

package/dist/IIButton/IIButton.svelte

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

package/dist/IICombobox/IICombobox.svelte

@@ -162,7 +162,7 @@
 			{placeholder}
 			{disabled}
 			oninput={handleInput}
-			class="w-full box-border py-5 px-12 text-small text-input-text bg-input-bg border border-input-border rounded-8 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-control 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 || loading}

package/dist/IICombobox/IIComboboxStories.svelte

@@ -87,7 +87,7 @@
 				/>
 			</div>
 			<button
-				class="px-12 py-5 rounded-8 border border-button-secondary text-small text-button-secondary hover:border-button-secondary-hover cursor-default"
+				class="px-12 py-5 rounded-control border border-button-secondary text-small text-button-secondary hover:border-button-secondary-hover cursor-default"
 				onclick={simulateLoading}
 			>
 				Simulate Load

package/dist/IIDatePicker/IIDatePicker.svelte

@@ -18,7 +18,7 @@
 	{/if}
 	<div class="relative">
 		<DatePicker.Input
-			class="flex items-center gap-4 py-5 px-12 border border-strong rounded-8 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-control 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

@@ -60,7 +60,7 @@
 		bind:ref={triggerEl}
 		{disabled}
 		class={cn(
-			'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border rounded-8 bg-button-secondary cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover 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-control bg-button-secondary cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
 			open ? 'border-button-secondary-hover' : 'border-button-secondary',
 			className
 		)}

package/dist/IIIconButton/IIIconButton.svelte

@@ -28,7 +28,7 @@
 	const isDisabled = $derived(disabled || loading)
 
 	const baseClasses =
-		'inline-flex items-center justify-center rounded-8 cursor-default transition-colors duration-base ease-in-out disabled:cursor-not-allowed'
+		'inline-flex items-center justify-center rounded-control cursor-default transition-colors duration-base ease-in-out disabled:cursor-not-allowed'
 
 	const variantClasses = {
 		primary:

package/dist/IIInput/IIInput.svelte

@@ -61,7 +61,7 @@
 	{#if hasAddons}
 		<div
 			class={cn(
-				'flex items-center bg-input-bg border border-input-border rounded-8 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-input-border rounded-control 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'
@@ -106,7 +106,7 @@
 			{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-8 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 text-small font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-input-border rounded-control 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'
 			)}

package/dist/IIMultiSelect/IIMultiSelect.svelte

@@ -75,7 +75,7 @@
 		bind:ref={triggerEl}
 		{disabled}
 		class={cn(
-			'flex items-center gap-4 py-5 pl-12 pr-8 border rounded-8 bg-button-secondary cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
+			'flex items-center gap-4 py-5 pl-12 pr-8 border rounded-control bg-button-secondary cursor-default text-small text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
 			open ? 'border-button-secondary-hover' : 'border-button-secondary',
 			className
 		)}

package/dist/IIPillTabs/IIPillTabs.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import {cn} from '../utils/cn'
+	import IIDropdownInput from '../IIDropdownInput/IIDropdownInput.svelte'
+
+	type Tab = {
+		value: string
+		label: string
+		count?: number
+	}
+
+	type Props = {
+		tabs: Tab[]
+		value: string
+		onchange?: (value: string) => void
+		class?: string
+	}
+
+	let {tabs, value = $bindable(), onchange, class: className}: Props = $props()
+
+	let containerEl = $state<HTMLDivElement | null>(null)
+	let measureEl = $state<HTMLDivElement | null>(null)
+	let overflow = $state(false)
+
+	function checkOverflow() {
+		if (!containerEl || !measureEl) return
+		overflow = measureEl.scrollWidth > containerEl.clientWidth
+	}
+
+	$effect(() => {
+		if (!containerEl) return
+		const ro = new ResizeObserver(() => checkOverflow())
+		ro.observe(containerEl)
+		return () => ro.disconnect()
+	})
+
+	$effect(() => {
+		tabs
+		requestAnimationFrame(() => checkOverflow())
+	})
+
+	function select(v: string) {
+		value = v
+		onchange?.(v)
+	}
+</script>
+
+<div bind:this={containerEl} class={cn('min-w-0 relative', className)}>
+	<!-- Hidden measure element — always rendered to detect when pills fit again -->
+	<div
+		bind:this={measureEl}
+		class="flex items-center gap-4 w-max"
+		aria-hidden={overflow ? 'true' : undefined}
+		style={overflow ? 'position: absolute; visibility: hidden; height: 0; overflow: hidden; pointer-events: none;' : ''}
+	>
+		{#each tabs as tab (tab.value)}
+			<button
+				class={cn(
+					'flex items-center h-28 px-10 rounded-full border-none outline-none text-small cursor-default whitespace-nowrap',
+					value === tab.value
+						? 'bg-gray-100 text-gray-700'
+						: 'bg-surface text-secondary shadow-pill hover:bg-gray-100 hover:text-gray-700'
+				)}
+				style="transition: all var(--transition-fast)"
+				onclick={() => select(tab.value)}
+				tabindex={overflow ? -1 : 0}
+			>
+				{tab.label}
+				{#if tab.count != null}
+					<span class="ml-2 text-tiny opacity-70">({tab.count})</span>
+				{/if}
+			</button>
+		{/each}
+	</div>
+
+	{#if overflow}
+		<IIDropdownInput
+			items={tabs.map(t => ({label: t.count != null ? `${t.label} (${t.count})` : t.label, value: t.value}))}
+			{value}
+			onSelect={v => select(v)}
+		/>
+	{/if}
+</div>

package/dist/IIPillTabs/IIPillTabs.svelte.d.ts

@@ -0,0 +1,14 @@
+type Tab = {
+    value: string;
+    label: string;
+    count?: number;
+};
+type Props = {
+    tabs: Tab[];
+    value: string;
+    onchange?: (value: string) => void;
+    class?: string;
+};
+declare const IIPillTabs: import("svelte").Component<Props, {}, "value">;
+type IIPillTabs = ReturnType<typeof IIPillTabs>;
+export default IIPillTabs;

package/dist/IIPillTabs/index.d.ts

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

package/dist/IIPillTabs/index.js

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

package/dist/IITabs/IITabs.svelte

@@ -69,7 +69,7 @@
 		<div class="flex items-center border-b border-primary px-24" style="padding-left: calc(2.4rem - 1.2rem - 1px)">
 			<DropdownMenu.Root bind:open={dropdownOpen}>
 				<DropdownMenu.Trigger
-					class="[all:unset] inline-flex items-center gap-4 py-4 pr-8 pl-12 border border-primary rounded-8 bg-surface cursor-default transition-all duration-fast hover:border-strong motion-reduce:transition-none"
+					class="[all:unset] inline-flex items-center gap-4 py-4 pr-8 pl-12 border border-primary rounded-control bg-surface cursor-default transition-all duration-fast hover:border-strong motion-reduce:transition-none"
 				>
 					<span class="text-small-emphasis text-body">{activeLabel}</span>
 					<IIIcon iconName="caret-down" class="w-14 h-14 text-secondary shrink-0" />

package/dist/IITextarea/IITextarea.svelte

@@ -65,7 +65,7 @@
 		{disabled}
 		{rows}
 		class={cn(
-			'py-5 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-strong rounded-8 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-control 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/IIToggle/IIToggle.svelte

@@ -42,7 +42,7 @@
 	{disabled}
 	aria-label={ariaLabel}
 	class={cn(
-		'inline-flex items-center justify-center rounded-8 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 rounded-control 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',
 		sizeClasses[size],
 		iconSizeClasses[size],
 		className

package/dist/IIToggle/IIToggleStories.svelte

@@ -47,7 +47,7 @@
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">Toolbar Example</h2>
 		<p class="text-small text-secondary mb-12">Multiple toggles used together as a formatting toolbar.</p>
-		<div class="flex items-center gap-4 p-4 border border-subtle rounded-8 bg-surface inline-flex">
+		<div class="flex items-center gap-4 p-4 border border-subtle rounded-control bg-surface inline-flex">
 			<IIToggle bind:pressed={filterPressed} aria-label="Filter">
 				{#snippet children({pressed})}
 					<IIIcon iconName="funnel-fill" />

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { IIInput } from './IIInput';
 export { IIModal } from './IIModal';
 export { IIMultiSelect } from './IIMultiSelect';
 export { IIOverflowActions } from './IIOverflowActions';
+export { IIPillTabs } from './IIPillTabs';
 export { IIPopover } from './IIPopover';
 export { IISpinner } from './IISpinner';
 export { IIStatusBadge } from './IIStatusBadge';

package/dist/index.js

@@ -25,6 +25,7 @@ export { IIInput } from './IIInput';
 export { IIModal } from './IIModal';
 export { IIMultiSelect } from './IIMultiSelect';
 export { IIOverflowActions } from './IIOverflowActions';
+export { IIPillTabs } from './IIPillTabs';
 export { IIPopover } from './IIPopover';
 export { IISpinner } from './IISpinner';
 export { IIStatusBadge } from './IIStatusBadge';

package/dist/style/colors.css

@@ -211,6 +211,9 @@
 	--ii-inspector-header: #2d2d2d;
 	--ii-inspector-keyword: #569cd6;
 
+	/* Radius */
+	--ii-radius-control: 9999px;
+
 	/* Misc */
 	--ii-error-dark: #dc2626;
 	--ii-success-dark-alt: #059669;

package/dist/style/tailwind/radius.js

@@ -1,5 +1,6 @@
 import { spacing } from './spacing';
 export const borderRadius = {
     ...spacing,
+    control: 'var(--ii-radius-control)',
     full: '9999px',
 };

package/package.json

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