@insymetri/styleguide 0.1.14 → 0.1.16

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-10 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-8 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-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-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"
 		/>
 		<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-10 border border-button-secondary text-small text-button-secondary hover:border-button-secondary-hover cursor-default"
+				class="px-12 py-5 rounded-8 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-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-8 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-10 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-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',
 			open ? 'border-button-secondary-hover' : 'border-button-secondary',
 			className
 		)}

package/dist/IIDropdownMenu/IIDropdownMenuStories.svelte

@@ -65,7 +65,7 @@
 				{label: 'Sign Out', value: 'signout'},
 			]}
 			onSelect={handleSelect}
-			triggerClass="inline-flex items-center gap-4 px-12 py-5 rounded-10 border border-button-secondary text-small text-button-secondary hover:border-button-secondary-hover cursor-default"
+			triggerClass="inline-flex items-center gap-4 px-12 py-5 rounded-8 border border-button-secondary text-small text-button-secondary hover:border-button-secondary-hover cursor-default"
 		>
 			{#snippet children()}
 				<IIIcon iconName="user" class="w-14 h-14" />

package/dist/IIIconButton/IIIconButton.svelte

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

package/dist/IIInput/IIInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte'
 	import type {HTMLInputAttributes} from 'svelte/elements'
+	import IIIconButton from '../IIIconButton/IIIconButton.svelte'
 	import {cn} from '../utils/cn'
 
 	type Props = Omit<HTMLInputAttributes, 'prefix'> & {
@@ -33,7 +34,9 @@
 	}: Props = $props()
 
 	const showError = $derived(error || !!errorMessage)
-	const hasAddons = $derived(!!prefix || !!suffix)
+	const isSearch = $derived(type === 'search')
+	const showClear = $derived(isSearch && !!value)
+	const hasAddons = $derived(!!prefix || !!suffix || isSearch)
 	let shouldShake = $state(false)
 	let prevShowError = $state(false)
 
@@ -58,7 +61,7 @@
 	{#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',
+				'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',
 				showError && 'border-input-border-error focus-within:border-input-border-error',
 				shouldShake && 'animate-shake',
 				disabled && 'bg-input-bg-disabled cursor-not-allowed'
@@ -74,7 +77,7 @@
 				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"
+				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 [&::-webkit-search-cancel-button]:appearance-none"
 				{...restProps}
 			/>
 			{#if suffix}
@@ -82,6 +85,19 @@
 					{@render suffix()}
 				</span>
 			{/if}
+			{#if showClear}
+				<span class="flex items-center pr-4 shrink-0">
+					<IIIconButton
+						iconName="x"
+						size="sm"
+						variant="ghost"
+						onclick={() => {
+							value = ''
+							ref?.focus()
+						}}
+					/>
+				</span>
+			{/if}
 		</div>
 	{:else}
 		<input
@@ -90,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-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',
+				'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',
 				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-10 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-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',
 			open ? 'border-button-secondary-hover' : 'border-button-secondary',
 			className
 		)}

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-10 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-8 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-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-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',
 			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-10 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-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',
 		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-10 bg-surface inline-flex">
+		<div class="flex items-center gap-4 p-4 border border-subtle rounded-8 bg-surface inline-flex">
 			<IIToggle bind:pressed={filterPressed} aria-label="Filter">
 				{#snippet children({pressed})}
 					<IIIcon iconName="funnel-fill" />

package/dist/Shadows/Shadows.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	const shadows: Array<{name: string; class: string; desc: string}> = [
+		{name: 'shadow-none', class: 'shadow-none', desc: 'No shadow'},
+		{name: 'shadow-pill', class: 'shadow-pill', desc: 'Pills, tags, small controls'},
+		{name: 'shadow-subtle', class: 'shadow-subtle', desc: 'Switch knobs, active pills'},
+		{name: 'shadow-card', class: 'shadow-card', desc: 'Cards at rest'},
+		{name: 'shadow-card-hover', class: 'shadow-card-hover', desc: 'Card hover / raised state'},
+		{name: 'shadow-dropdown', class: 'shadow-dropdown', desc: 'Dropdown menus, popovers, comboboxes'},
+		{name: 'shadow-modal', class: 'shadow-modal', desc: 'Modal dialogs'},
+		{name: 'shadow-drawer', class: 'shadow-drawer', desc: 'Side drawers / floating panels'},
+		{name: 'shadow-toast', class: 'shadow-toast', desc: 'Toast notifications'},
+		{name: 'shadow-focus-ring', class: 'shadow-focus-ring', desc: 'Input/control focus state'},
+		{name: 'shadow-selection-ring', class: 'shadow-selection-ring', desc: 'Selected item indicator'},
+		{name: 'shadow-comm-hover', class: 'shadow-comm-hover', desc: 'Communication card hover'},
+		{name: 'shadow-login-card', class: 'shadow-login-card', desc: 'Login card — deep overlay'},
+		{name: 'shadow-dialog-overlay', class: 'shadow-dialog-overlay', desc: 'Dialog overlay — elevated panel'},
+	]
+</script>
+
+<!--
+	Safelist: ensure Tailwind generates all shadow classes used dynamically above.
+	shadow-none shadow-pill shadow-subtle shadow-card shadow-card-hover shadow-dropdown
+	shadow-modal shadow-drawer shadow-toast shadow-focus-ring shadow-selection-ring
+	shadow-comm-hover shadow-login-card shadow-dialog-overlay
+-->
+
+<div class="flex flex-col gap-48 p-24 text-body">
+	<section>
+		<h2 class="text-h2 mb-16">Box Shadows</h2>
+		<div
+			style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;"
+		>
+			{#each shadows as item (item.name)}
+				<div class="flex flex-col gap-8">
+					<div
+						class="rounded-8 bg-surface-raised border border-primary {item.class}"
+						style="height: 96px;"
+					></div>
+					<span class="text-small font-mono text-secondary">{item.name}</span>
+					<span class="text-tiny text-tertiary">{item.desc}</span>
+				</div>
+			{/each}
+		</div>
+	</section>
+</div>

package/dist/Shadows/Shadows.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Shadows: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Shadows = InstanceType<typeof Shadows>;
+export default Shadows;

package/dist/Shadows/index.d.ts

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

package/dist/Shadows/index.js

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

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

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

package/dist/style/tailwind/shadows.js

@@ -1,5 +1,7 @@
 export const boxShadow = {
     none: 'none',
+    // Pill elevation (pills, tags, small controls)
+    pill: '0 3px 6px -2px rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.04)',
     // Subtle elevation (switch knobs, active pills)
     subtle: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
     // Cards at rest

package/package.json

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