@insymetri/styleguide 0.1.25 → 0.1.27

package/dist/IICombobox/IICombobox.svelte

@@ -36,6 +36,7 @@
 		emptyContent?: Snippet
 		// Grouped items (alternative to flat items)
 		groups?: Group<T>[]
+		openOnFocus?: boolean
 		// CSS classes
 		class?: string
 		contentClass?: string
@@ -54,6 +55,7 @@
 		renderItem,
 		emptyContent,
 		groups,
+		openOnFocus = false,
 		class: className,
 		contentClass,
 	}: Props<T> = $props()
@@ -67,6 +69,13 @@
 		mobile: 'h-48 rounded-control text-default',
 	} as const
 
+	const itemDensityClasses = {
+		compact: 'py-4 text-tiny',
+		default: 'py-6 text-small',
+		comfortable: 'py-8 text-small',
+		mobile: 'py-10 text-default',
+	} as const
+
 	let inputValue = $state('')
 	let open = $state(false)
 
@@ -128,6 +137,10 @@
 		inputValue = e.currentTarget.value
 	}
 
+	function handleFocus() {
+		open = true
+	}
+
 	// Check if item looks like a SimpleItem for default rendering
 	function isSimpleItem(item: T): item is T & SimpleItem {
 		return typeof item === 'object' && item !== null && 'label' in item && 'value' in item
@@ -139,7 +152,10 @@
 		value={getItemValue(item)}
 		label={isSimpleItem(item) ? item.label : getItemValue(item)}
 		disabled={getItemDisabled?.(item) ?? false}
-		class="flex items-center gap-8 py-6 px-12 text-small text-dropdown-item rounded-6 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed motion-reduce:transition-none"
+		class={cn(
+			'flex items-center gap-8 px-12 text-dropdown-item rounded-6 cursor-default transition-all duration-fast outline-none hover:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[selected]:bg-dropdown-item-selected data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed motion-reduce:transition-none',
+			itemDensityClasses[density.value]
+		)}
 	>
 		{#snippet children({selected})}
 			{#if renderItem}
@@ -172,6 +188,7 @@
 			{placeholder}
 			{disabled}
 			oninput={handleInput}
+			onfocus={openOnFocus ? handleFocus : undefined}
 			class={cn(
 				'w-full box-border py-5 px-12 text-input-text bg-input-bg border border-input-border 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',
 				densityClasses[density.value]

package/dist/IICombobox/IICombobox.svelte.d.ts

@@ -16,6 +16,7 @@ type Props<T> = {
     renderItem?: Snippet<[item: T, selected: boolean]>;
     emptyContent?: Snippet;
     groups?: Group<T>[];
+    openOnFocus?: boolean;
     class?: string;
     contentClass?: string;
 };

package/dist/IIDateInput/IIDateInput.svelte

@@ -43,7 +43,7 @@
 <div class={cn('flex flex-col gap-4', className)}>
 	<DatePicker.Root bind:value {onValueChange} {disabled}>
 		{#if label}
-			<DatePicker.Label class="text-small-emphasis text-body">{label}</DatePicker.Label>
+			<DatePicker.Label class="text-small-emphasis text-secondary">{label}</DatePicker.Label>
 		{/if}
 		<DatePicker.Input
 			class={cn(

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -16,6 +16,7 @@
 		items: Item[]
 		value?: string | undefined
 		placeholder?: string
+		label?: string
 		disabled?: boolean
 		onSelect?: (value: string) => void
 		matchTriggerWidth?: boolean
@@ -28,6 +29,7 @@
 		items,
 		value = $bindable(),
 		placeholder = 'Select...',
+		label,
 		disabled = false,
 		onSelect,
 		matchTriggerWidth = false,
@@ -45,6 +47,13 @@
 		mobile: 'h-48 rounded-control text-default',
 	} as const
 
+	const itemDensityClasses = {
+		compact: 'py-4 text-tiny',
+		default: 'py-6 text-small',
+		comfortable: 'py-8 text-small',
+		mobile: 'py-10 text-default',
+	} as const
+
 	let open = $state(false)
 	let triggerEl = $state<HTMLElement | null>(null)
 	let triggerWidth = $state<number | undefined>(undefined)
@@ -65,6 +74,10 @@
 	})
 </script>
 
+<div class="flex flex-col">
+	{#if label}
+		<span class="text-small-emphasis text-secondary mb-4">{label}</span>
+	{/if}
 <DropdownMenu.Root bind:open>
 	<DropdownMenu.Trigger
 		bind:ref={triggerEl}
@@ -79,7 +92,7 @@
 		{#if renderSelected && selectedItem}
 			{@render renderSelected(selectedItem)}
 		{:else}
-			<span class="text-small">{selectedLabel}</span>
+			<span>{selectedLabel}</span>
 		{/if}
 		<IIIcon iconName="caret-down" class="w-14 h-14 shrink-0" />
 	</DropdownMenu.Trigger>
@@ -98,7 +111,8 @@
 								<DropdownMenu.Item
 									disabled={item.disabled}
 									class={cn(
-										'flex items-center justify-between gap-12 px-12 py-6 rounded-6 text-small text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+										'flex items-center justify-between gap-12 px-12 rounded-6 text-dropdown-item cursor-default outline-none data-[highlighted]:bg-dropdown-item-hover data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+										itemDensityClasses[density.value],
 										value === item.value && 'text-dropdown-item-selected'
 									)}
 									onSelect={() => handleSelect(item)}
@@ -127,3 +141,4 @@
 		</DropdownMenu.Content>
 	</DropdownMenu.Portal>
 </DropdownMenu.Root>
+</div>

package/dist/IIDropdownInput/IIDropdownInput.svelte.d.ts

@@ -9,6 +9,7 @@ type Props = {
     items: Item[];
     value?: string | undefined;
     placeholder?: string;
+    label?: string;
     disabled?: boolean;
     onSelect?: (value: string) => void;
     matchTriggerWidth?: boolean;

package/package.json

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