@dorsk/tsumikit 0.44.1 → 0.45.0

package/dist/components/atoms/Select.svelte

@@ -9,6 +9,10 @@
 		/** Muted, right-aligned secondary text (e.g. "62%"). */
 		hint?: string;
 		disabled?: boolean;
+		/** Section heading this option belongs under. Options sharing a group are
+		 *  emitted inside one `<optgroup label={group}>`, in first-seen group order.
+		 *  Ungrouped options render at the top level. */
+		group?: string;
 	};
 </script>
 
@@ -42,6 +46,7 @@
 	import type { HTMLSelectAttributes } from 'svelte/elements';
 	import Icon from './Icon.svelte';
 	import { getFieldContext, warnUnlabelled } from '../../field-context';
+	import { sectionOptions } from '../../select-options';
 
 	// `size` shadows the native option-count attribute (unused in token layouts) to
 	// expose the sm|md height scale instead.
@@ -99,14 +104,26 @@
 	const selected = $derived(options?.find((o) => o.value === value));
 	const hasFace = $derived(!!options && variant !== 'ghost');
 
+	const sections = $derived(sectionOptions(options ?? []));
+
 	const optionText = (o: SelectOption) =>
 		[o.emoji, o.label, o.hint && `· ${o.hint}`].filter(Boolean).join(' ');
 </script>
 
 {#snippet optionList()}
 	{#if options}
-		{#each options as o (o.value)}
-			<option value={o.value} disabled={o.disabled}>{optionText(o)}</option>
+		{#each sections as section, i (section.group ?? `-${i}`)}
+			{#if section.group === undefined}
+				{#each section.options as o (o.value)}
+					<option value={o.value} disabled={o.disabled}>{optionText(o)}</option>
+				{/each}
+			{:else}
+				<optgroup label={section.group}>
+					{#each section.options as o (o.value)}
+						<option value={o.value} disabled={o.disabled}>{optionText(o)}</option>
+					{/each}
+				</optgroup>
+			{/if}
 		{/each}
 	{:else}
 		{@render children?.()}
@@ -251,7 +268,8 @@
 	.select.has-face {
 		color: transparent;
 	}
-	.select.has-face option {
+	.select.has-face option,
+	.select.has-face optgroup {
 		color: var(--text);
 		background: var(--bg);
 	}

package/dist/components/atoms/Select.svelte.d.ts

@@ -7,6 +7,10 @@ export type SelectOption = {
     /** Muted, right-aligned secondary text (e.g. "62%"). */
     hint?: string;
     disabled?: boolean;
+    /** Section heading this option belongs under. Options sharing a group are
+     *  emitted inside one `<optgroup label={group}>`, in first-seen group order.
+     *  Ungrouped options render at the top level. */
+    group?: string;
 };
 import type { ControlSize } from '../../size';
 import type { Snippet } from 'svelte';

package/dist/index.d.ts

@@ -83,6 +83,7 @@ export { default as FilterSearchBar } from './components/organisms/FilterSearchB
 export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 export * as filterQuery from './query';
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, suggest, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
+export { type OptionSection, sectionOptions } from './select-options';
 export type { ControlSize } from './size';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';

package/dist/index.js

@@ -94,6 +94,7 @@ export { FIELD_KEY, getFieldContext, setFieldContext, warnUnlabelled, } from './
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
 export * as filterQuery from './query';
 export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, suggest, toSql, walk, } from './query';
+export { sectionOptions } from './select-options';
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----
 export { THEMES, theme } from './stores/theme.svelte';

package/dist/select-options.d.ts

@@ -0,0 +1,6 @@
+import type { SelectOption } from './components/atoms/Select.svelte';
+export type OptionSection = {
+    group?: string;
+    options: SelectOption[];
+};
+export declare function sectionOptions(options: SelectOption[]): OptionSection[];

package/dist/select-options.js

@@ -0,0 +1,22 @@
+export function sectionOptions(options) {
+    const sections = [];
+    const byGroup = new Map();
+    for (const option of options) {
+        if (option.group === undefined) {
+            const tail = sections.at(-1);
+            if (tail && tail.group === undefined)
+                tail.options.push(option);
+            else
+                sections.push({ options: [option] });
+            continue;
+        }
+        let section = byGroup.get(option.group);
+        if (!section) {
+            section = { group: option.group, options: [] };
+            byGroup.set(option.group, section);
+            sections.push(section);
+        }
+        section.options.push(option);
+    }
+    return sections;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.44.1",
+  "version": "0.45.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",