@insymetri/styleguide 0.1.15 → 0.1.17

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)
 
@@ -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

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 {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), inset 0 0 0 0.5px rgba(0, 0, 0, 0.08)',
     // Subtle elevation (switch knobs, active pills)
     subtle: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
     // Cards at rest
@@ -19,7 +21,7 @@ export const boxShadow = {
     // Selection ring — selected item indicator
     'selection-ring': '0 0 0 2px var(--ii-primary-20)',
     // Communication card hover
-    'comm-hover': '0 2px 8px var(--ii-shadow-subtle)',
+    'comm-hover': '0 2px 8px var(--ii-shadow-subtle-color)',
     // Login card — deep overlay shadow
     'login-card': '0 20px 60px var(--ii-overlay), 0 0 1px var(--ii-hover-overlay)',
     // Dialog overlay — elevated panel

package/package.json

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