@dorsk/tsumikit 0.44.0 → 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/components/molecules/Popover.svelte

@@ -64,8 +64,10 @@
 		variant?: TriggerVariant;
 		tone?: TriggerTone;
 		size?: TriggerSize;
-		/** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger;
-		 *  the default trigger is the `md` 2.25rem box. */
+		/** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger,
+		 *  pinning the square exactly. The default trigger floors at the `sm` box
+		 *  and grows with its content; override that floor from `triggerClass`
+		 *  with `--pop-box`. */
 		box?: 'xs' | 'sm' | 'md' | 'lg';
 		/** Use the shared `--control-height` toolbar/composer contract. */
 		control?: boolean;
@@ -184,13 +186,16 @@
 	/* Default trigger chrome. Zero specificity (`:where`) so any consumer class
 	   (triggerClass) overrides it; `:not(.bare)` keeps it off bare triggers such
 	   as the Timestamp <time>, which stay plain inline text. */
+	/* The square is one knob, `--pop-box`: the `box` prop sets it inline, and a
+	   consumer's `triggerClass` can set it too (`--pop-box: var(--box-xs)`) — a
+	   plain width/height there would not have beaten a `min-*` floor. */
 	:where(.pop-trigger:not(.bare)) {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-height: var(--box-md);
-		min-width: var(--box-md);
-		padding: var(--sp-2);
+		min-height: var(--pop-box, var(--box-sm));
+		min-width: var(--pop-box, var(--box-sm));
+		padding: var(--sp-1);
 		border: 1px solid transparent;
 		border-radius: var(--r-md);
 		background: transparent;

package/dist/components/molecules/Popover.svelte.d.ts

@@ -28,8 +28,10 @@ type $$ComponentProps = {
     variant?: TriggerVariant;
     tone?: TriggerTone;
     size?: TriggerSize;
-    /** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger;
-     *  the default trigger is the `md` 2.25rem box. */
+    /** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger,
+     *  pinning the square exactly. The default trigger floors at the `sm` box
+     *  and grows with its content; override that floor from `triggerClass`
+     *  with `--pop-box`. */
     box?: 'xs' | 'sm' | 'md' | 'lg';
     /** Use the shared `--control-height` toolbar/composer contract. */
     control?: boolean;

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.0",
+  "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",