entasis 0.11.0 → 0.13.0

package/dist/components/Form/Select/Select.svelte

@@ -1,55 +1,85 @@
-<script lang="ts">
+<script lang="ts" generics="Multiple extends boolean = false">
 	import { useI18n } from '../../../i18n/context.svelte.js';
 	import { untrack } from 'svelte';
+	import { on } from 'svelte/events';
 	import Field from '../Field/Field.svelte';
-	import { createFieldState } from '../Field/field.state.svelte.js';
-	import type { SelectProps } from './select.props.js';
+	import FieldActionButton from '../Field/FieldActionButton.svelte';
+	import FieldHiddenInputs from '../Field/FieldHiddenInputs.svelte';
+	import { createFieldState, type FieldValidatorResult } from '../Field/field.state.svelte.js';
+	import type { FieldValue } from '../Field/field.js';
+	import type { SelectOption, SelectProps, SelectValue } from './select.props.js';
 	import { useSelectTheme } from './select.theme.js';
 	import { SelectState } from './select.state.svelte.js';
+	import SelectOptionRow from './SelectOptionRow.svelte';
 	import Popover from '../../Popover/Popover.svelte';
+	import { popupOpenClaim } from '../../Popover/popover.claims.js';
 	import ScrollArea from '../../ScrollArea/ScrollArea.svelte';
-	import MenuOption from '../../MenuOption/MenuOption.svelte';
 	import { caretDownIcon } from '../../Icons/caretDown.js';
 	import { checkIcon } from '../../Icons/check.js';
+	import { xIcon } from '../../Icons/x.js';
+	import { createBindableValue } from '../../../utils/state.svelte.js';
+	import { presence } from '../../../utils/stateAttributes.js';
 
 	let {
 		defaultValue = null,
 		value = $bindable(),
 		errors = $bindable([]),
 		focused = $bindable(false),
+		open = $bindable(),
+		defaultOpen = false,
+		onOpenChange,
+		onAfterOpen,
+		onAfterClose,
 		required = false,
 		placeholder,
 		i18n,
 		theme,
 		disabled,
+		readOnly,
+		messages,
 		name,
+		id: idProp,
 		size = 'normal',
 		density = 'normal',
 		onValidate,
 		onValueChange,
 		visible,
 		items,
+		multiple = false as Multiple,
+		formatValue,
+		clearable = false,
+		autocomplete,
 		separators = true,
 		alignItemWithTrigger = true,
 		triggerAttrs,
 		label,
 		...rest
-	}: SelectProps = $props();
+	}: SelectProps<Multiple> = $props();
 	if (value === undefined) value = untrack(() => defaultValue);
 
-	const id = $props.id();
+	const generatedId = $props.id();
+	const id = untrack(() => idProp) ?? generatedId;
 	let valueEl = $state<HTMLElement | null>(null);
 	let listEl = $state<HTMLDivElement | null>(null);
 	let viewportEl = $state<HTMLDivElement | null>(null);
+	let contentEl = $state<HTMLDivElement | null>(null);
 	const t = $derived(useI18n(i18n));
+	const openState = createBindableValue(
+		() => open,
+		(next) => {
+			open = next;
+		},
+		() => defaultOpen
+	);
 
-	const field = createFieldState({
+	type Value = FieldValue<'select' | 'select-multiple'>;
+	const field = createFieldState<'select' | 'select-multiple'>({
 		id,
 		get value() {
-			return value;
+			return value as Value | null | undefined;
 		},
 		set value(v) {
-			value = v;
+			value = v as SelectValue<Multiple> | undefined;
 		},
 		get errors() {
 			return errors;
@@ -64,7 +94,7 @@
 			focused = v;
 		},
 		get onValueChange() {
-			return onValueChange;
+			return onValueChange as ((value: Value | null) => void) | undefined;
 		},
 		get disabled() {
 			return disabled;
@@ -72,6 +102,12 @@
 		set disabled(v: boolean | undefined) {
 			disabled = v;
 		},
+		get readOnly() {
+			return readOnly;
+		},
+		get messages() {
+			return messages;
+		},
 		get required() {
 			return required;
 		},
@@ -82,12 +118,13 @@
 			name = v;
 		},
 		get onValidate() {
-			return onValidate;
+			return onValidate as ((value: Value) => FieldValidatorResult) | undefined;
 		},
 		get visible() {
 			return visible;
 		},
-		type: 'select'
+		// Fixed for the life of the field: a Select does not change what it holds.
+		type: untrack(() => multiple) ? 'select-multiple' : 'select'
 	});
 
 	const select = new SelectState({
@@ -99,11 +136,17 @@
 			return field.value;
 		},
 		set value(v) {
-			field.value = v;
+			field.value = v as Value | null;
+		},
+		get multiple() {
+			return multiple;
 		},
 		get disabled() {
 			return field.disabled;
 		},
+		get readOnly() {
+			return field.readOnly;
+		},
 		get triggerEl() {
 			return field.node;
 		},
@@ -121,10 +164,57 @@
 		},
 		get viewportEl() {
 			return viewportEl;
+		},
+		get contentEl() {
+			return contentEl;
+		},
+		openState: {
+			get: () => openState.value,
+			set: (next) => {
+				openState.value = next;
+			}
+		},
+		get onOpenChange() {
+			return onOpenChange;
 		}
 	});
 
 	const classes = $derived(useSelectTheme(theme));
+
+	// What the trigger shows for the selection: the option's label, or `formatValue` of the
+	// selected options (the default lists two labels and counts the rest).
+	const defaultFormat = (options: SelectOption[]) =>
+		options
+			.slice(0, 2)
+			.map((option) => option.label)
+			.join(', ') + (options.length > 2 ? ` +${options.length - 2}` : '');
+	const hasValue = $derived(select.selectedOptions.length > 0);
+	const valueText = $derived(
+		!hasValue
+			? undefined
+			: multiple
+				? (formatValue ?? defaultFormat)(select.selectedOptions)
+				: select.selectedOption?.label
+	);
+
+	// A `<label for>` elsewhere on the page names the trigger (see `id`): the placeholder fallback
+	// below must not override it, and a click on it focuses the trigger without opening the list.
+	// Only an unlabelled Select looks: `labels` scans the document.
+	let externallyLabelled = $state(false);
+	$effect(() => {
+		const node = field.node as HTMLButtonElement | null;
+		if (label || triggerAttrs?.['aria-labelledby'] || !node) {
+			externallyLabelled = false;
+			return;
+		}
+		const labels = Array.from(node.labels ?? []);
+		externallyLabelled = labels.length > 0;
+		const stops = labels.map((element) => on(element, 'click', () => select.noteLabelClick()));
+		return () => stops.forEach((stop) => stop());
+	});
+
+	// What a browser autofill can name: the options that can be chosen.
+	const autofillOptions = $derived(select.flatOptions.filter((option) => !option.disabled));
 </script>
 
 {#snippet checkMark()}
@@ -132,6 +222,7 @@
 {/snippet}
 
 <Popover
+	haspopup="listbox"
 	closeOnClickOutside={false}
 	closeOnEscape={false}
 	fitTrigger
@@ -144,14 +235,15 @@
 		out: { scale: 1, opacity: 0 }
 	}}
 	open={select.isOpen}
+	onAfterOpen={() => onAfterOpen?.()}
+	onAfterClose={() => onAfterClose?.()}
 >
-	<!-- Virtual focus: DOM focus stays on the combobox trigger; tabindex=-1 keeps the
-	     listbox out of the tab order while remaining a valid programmatic target. -->
+	<!-- Virtual focus: DOM focus stays on the combobox trigger; the listbox is a programmatic
+	     target only (tabindex=-1), and focus that a screen reader moves into the panel keeps it
+	     open. -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		id={select.listboxId}
-		role="listbox"
-		aria-label={t.options}
-		tabindex={-1}
+		bind:this={contentEl}
 		class={classes.content({ size })}
 		onmousedown={(event) => {
 			// Keep DOM focus on the trigger for ANY press inside the panel (group labels,
@@ -159,46 +251,65 @@
 			// closes before the click lands.
 			event.preventDefault();
 		}}
+		onfocusout={select.onPanelFocusOut}
+		onkeydown={select.onPanelKeydown}
 	>
+		<!-- The scroll viewport is the listbox: it owns the scrolling and its options are the nodes
+		     the accessibility tree lists under it (groups only for labelled sets). The trigger's
+		     active-descendant navigation scrolls the highlighted option into view, so the viewport
+		     takes no tab stop of its own. -->
 		<ScrollArea
 			bind:ref={listEl}
 			bind:viewportRef={viewportEl}
+			viewportAttrs={{
+				id: select.listboxId,
+				role: 'listbox',
+				'aria-label': t.options,
+				'aria-multiselectable': multiple ? true : undefined,
+				tabindex: -1,
+				class: classes.listbox()
+			}}
 			scrollOnEdges
 			type="auto"
-			class="flex max-h-[240px] flex-col"
+			class={classes.list({ dropdown: select.dropdown })}
 		>
 			{#each select.renderGroups as group, groupIndex (groupIndex)}
 				{#if separators && groupIndex > 0}
-					<div role="separator" class={classes.separator({ size })}></div>
+					<!-- Decorative divider between groups: the groups already convey the structure. -->
+					<div role="presentation" class={classes.separator({ size })}></div>
 				{/if}
-				<div role="group" aria-label={group.label} class={classes.group({ size })}>
+				<!-- Only a labelled set is a group; bare options sit directly under the listbox. -->
+				<div
+					role={group.label ? 'group' : undefined}
+					aria-label={group.label}
+					class={classes.group({ size })}
+				>
 					{#if group.label}
 						<div aria-hidden="true" class={classes.groupLabel({ size })}>{group.label}</div>
 					{/if}
 					{#each group.items as option (option.value)}
-						<MenuOption
-							as="button"
-							role="option"
+						<SelectOptionRow
+							id={select.optionId(option.value)}
+							label={option.label}
 							{size}
 							{density}
-							title={option.label}
 							highlighted={select.nav.highlighted === option.value}
-							selected={field.value === option.value}
+							selected={select.isSelected(option.value)}
 							disabled={!!option.disabled}
-							suffix={field.value === option.value ? checkMark : undefined}
-							onclick={() => select.selectValue(option.value)}
-							attrs={{
-								id: select.optionId(option.value),
-								tabindex: -1,
-								onpointermove: () => {
-									if (!option.disabled) select.nav.setHighlighted(option.value);
-								}
+							check={checkMark}
+							onactivate={(event) => select.activate(option.value, event)}
+							onhover={(event) => {
+								if (!option.disabled) select.nav.pointerHighlight(option.value, event);
 							}}
 						/>
 					{/each}
 				</div>
 			{/each}
 		</ScrollArea>
+		<!-- For touch screen-reader users, who have no Escape key and reach the panel by swiping. -->
+		<button type="button" tabindex="-1" class="sr-only" onclick={select.onCloseButton}>
+			{t.close}
+		</button>
 	</div>
 	{#snippet trigger()}
 		<Field
@@ -206,6 +317,7 @@
 			{label}
 			{size}
 			{density}
+			labelFor={false}
 			theme={{
 				...(theme || {}),
 				inputContainer: {
@@ -231,15 +343,24 @@
 				aria-activedescendant={select.isOpen ? select.nav.activeDescendant : undefined}
 				aria-required={required || undefined}
 				aria-label={triggerAttrs?.['aria-label'] ??
-					(label || triggerAttrs?.['aria-labelledby']
+					(label || triggerAttrs?.['aria-labelledby'] || externallyLabelled
 						? undefined
 						: (placeholder ?? t.selectOption))}
-				data-placeholder={select.selectedOption ? undefined : ''}
+				data-placeholder={hasValue ? undefined : ''}
+				data-readonly={presence(field.readOnly)}
+				data-disabled={presence(field.disabled)}
+				{@attach popupOpenClaim(select.isOpen)}
 				disabled={field.disabled}
 				class={classes.input({ size, disabled: field.disabled })}
+				onpointerdown={(event) => {
+					triggerAttrs?.onpointerdown?.(event);
+					select.onTriggerPointerDown(event);
+				}}
 				onclick={(event) => {
 					triggerAttrs?.onclick?.(event);
-					if (!event.defaultPrevented) select.toggle();
+					if (event.defaultPrevented) return;
+					if (select.consumeLabelClick()) field.node?.focus();
+					else select.toggle({ reason: 'trigger-press', event });
 				}}
 				onkeydown={(event) => {
 					triggerAttrs?.onkeydown?.(event);
@@ -251,22 +372,39 @@
 				}}
 				onblur={(event) => {
 					field.focused = false;
-					select.close();
+					select.onTriggerBlur(event);
 					triggerAttrs?.onblur?.(event);
 				}}
 			>
-				<span
-					bind:this={valueEl}
-					class={classes.value({ size, placeholder: !select.selectedOption })}
-				>
-					{select.selectedOption?.label ?? placeholder ?? t.selectOption}
+				<span bind:this={valueEl} class={classes.value({ size, placeholder: !hasValue })}>
+					{valueText ?? placeholder ?? t.selectOption}
 				</span>
 				{@render caretDownIcon({ class: classes.triggerIcon({ size }) })}
 			</button>
+			{#if name || required || (autocomplete && !multiple)}
+				<!-- Beside the trigger, not in it: what a native form submits (one input per value), what a
+				     browser autofills, and the stand-in that blocks a native submit while a required Select
+				     is empty. -->
+				<FieldHiddenInputs
+					{field}
+					value={field.value}
+					autocomplete={multiple ? undefined : autocomplete}
+					options={autofillOptions}
+				/>
+			{/if}
+			{#if clearable && hasValue && !field.readOnly && !field.disabled}
+				<FieldActionButton
+					{size}
+					color="danger"
+					class="relative"
+					label={`${t.clear} ${t.selection}`}
+					prefix={xIcon}
+					onclick={() => {
+						select.clear();
+						field.node?.focus();
+					}}
+				/>
+			{/if}
 		</Field>
 	{/snippet}
 </Popover>
-
-{#if name}
-	<input type="hidden" {name} value={field.value ?? ''} />
-{/if}

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

@@ -1,4 +1,25 @@
 import type { SelectProps } from './select.props.js';
-declare const Select: import("svelte").Component<SelectProps, {}, "value" | "errors" | "focused">;
-type Select = ReturnType<typeof Select>;
+declare function $$render<Multiple extends boolean = false>(): {
+    props: SelectProps<Multiple>;
+    exports: {};
+    bindings: "value" | "errors" | "focused" | "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Multiple extends boolean = false> {
+    props(): ReturnType<typeof $$render<Multiple>>['props'];
+    events(): ReturnType<typeof $$render<Multiple>>['events'];
+    slots(): ReturnType<typeof $$render<Multiple>>['slots'];
+    bindings(): "value" | "errors" | "focused" | "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Multiple extends boolean = false>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Multiple>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Multiple>['props']>, ReturnType<__sveltets_Render<Multiple>['events']>, ReturnType<__sveltets_Render<Multiple>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Multiple>['bindings']>;
+    } & ReturnType<__sveltets_Render<Multiple>['exports']>;
+    <Multiple extends boolean = false>(internal: unknown, props: ReturnType<__sveltets_Render<Multiple>['props']> & {}): ReturnType<__sveltets_Render<Multiple>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<Multiple extends boolean = false> = InstanceType<typeof Select<Multiple>>;
 export default Select;

package/dist/components/Form/Select/SelectOptionRow.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	// One option row of a Select. It is the markup MenuOption renders for a titled listbox option,
+	// without the Slot wrappers MenuOption builds for the parts a Select never uses (prefix,
+	// description, custom children): a list of a thousand options mounts about half the nodes and
+	// components. It reads MenuOption's theme, so rows look the same as every other listbox row.
+	import type { Snippet } from 'svelte';
+	import type { Density, Sizes } from '../../../types/theme.js';
+	import { useMenuOptionTheme } from '../../MenuOption/menuOption.theme.js';
+
+	let {
+		id,
+		label,
+		size,
+		density,
+		highlighted,
+		selected,
+		disabled,
+		check,
+		onactivate,
+		onhover
+	}: {
+		id: string;
+		label: string;
+		size: Sizes;
+		density: Density;
+		highlighted: boolean;
+		selected: boolean;
+		disabled: boolean;
+		/** The selected-state indicator, shown in the row's suffix while selected. */
+		check: Snippet;
+		onactivate: (event: MouseEvent) => void;
+		onhover: (event: PointerEvent) => void;
+	} = $props();
+
+	const classes = useMenuOptionTheme();
+</script>
+
+<button
+	type="button"
+	role="option"
+	{id}
+	tabindex={-1}
+	data-color="neutral"
+	data-size={size}
+	data-density={density}
+	data-highlighted={highlighted ? 'true' : undefined}
+	data-selected={selected ? 'true' : undefined}
+	data-disabled={disabled ? '' : undefined}
+	aria-selected={selected}
+	aria-disabled={disabled ? true : undefined}
+	{disabled}
+	class={classes.root({
+		color: 'neutral',
+		size,
+		density,
+		disabled,
+		highlighted,
+		active: false
+	})}
+	onclick={onactivate}
+	onpointermove={disabled ? undefined : onhover}
+>
+	<div class={classes.content({ density })}>
+		<div class="{classes.title({ size })} leading-none">{label}</div>
+	</div>
+	{#if selected}
+		<div class={classes.suffix({ size })}>{@render check()}</div>
+	{/if}
+</button>

package/dist/components/Form/Select/SelectOptionRow.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { Density, Sizes } from '../../../types/theme.js';
+type $$ComponentProps = {
+    id: string;
+    label: string;
+    size: Sizes;
+    density: Density;
+    highlighted: boolean;
+    selected: boolean;
+    disabled: boolean;
+    /** The selected-state indicator, shown in the row's suffix while selected. */
+    check: Snippet;
+    onactivate: (event: MouseEvent) => void;
+    onhover: (event: PointerEvent) => void;
+};
+declare const SelectOptionRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectOptionRow = ReturnType<typeof SelectOptionRow>;
+export default SelectOptionRow;

package/dist/components/Form/Select/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Select } from './Select.svelte';
-export type { SelectProps, SelectOption, SelectOptionGroup, SelectItems, SelectTriggerAttributes } from './select.props.js';
+export type { SelectProps, SelectOption, SelectOptionGroup, SelectItems, SelectValue, SelectTriggerAttributes } from './select.props.js';
 export { SelectState } from './select.state.svelte.js';
 export { selectTheme, setSelectTheme, useSelectTheme, type SelectTheme, type SelectThemeProps } from './select.theme.js';
+export { selectDataAttributes, selectCssVariables, type SelectDataAttribute, type SelectCssVariable } from './select.attributes.js';

package/dist/components/Form/Select/index.js

@@ -1,3 +1,4 @@
 export { default as Select } from './Select.svelte';
 export { SelectState } from './select.state.svelte.js';
 export { selectTheme, setSelectTheme, useSelectTheme } from './select.theme.js';
+export { selectDataAttributes, selectCssVariables } from './select.attributes.js';

package/dist/components/Form/Select/select.align.d.ts

@@ -35,6 +35,11 @@ export type SelectAlignMetrics = {
         textStart: number;
     };
     rtl: boolean;
+    /**
+     * The tallest the option list may be, in px: a `max-height` the theme or consumer put on it.
+     * Absent (or `Infinity`) when it is only limited by the viewport.
+     */
+    maxListHeight?: number;
 };
 export type SelectAlignment = {
     /** Panel position, viewport coordinates. */

package/dist/components/Form/Select/select.align.js

@@ -34,15 +34,29 @@ export function alignItemWithTrigger(m) {
         height = minHeight;
         y = Math.max(top, Math.min(y, bottom - height));
     }
-    const listHeight = Math.max(0, height - chromeAbove - chromeBelow);
+    let listHeight = Math.max(0, height - chromeAbove - chromeBelow);
     scrollTop = clamp(scrollTop, 0, m.list.height - listHeight);
+    // A cap on the list shortens the window. The option keeps its place on the trigger: when the
+    // shorter window would end above it, the list scrolls by the shortfall and the panel moves down
+    // by the same amount, so the row does not move on screen.
+    const cap = m.maxListHeight ?? Infinity;
+    if (listHeight > cap) {
+        const itemMiddleInWindow = m.item.top + m.item.height / 2 - m.list.top - scrollTop;
+        const shortfall = Math.max(0, itemMiddleInWindow - (cap - m.item.height / 2));
+        const shift = Math.min(shortfall, Math.max(0, m.list.height - cap - scrollTop));
+        listHeight = cap;
+        scrollTop += shift;
+        y = Math.min(y + shift, Math.max(top, bottom - chromeAbove - chromeBelow - cap));
+    }
     // Line the option's text up with the value's: the panel moves by the gap between them.
     const textOffset = m.rtl ? m.panel.right - m.item.textStart : m.item.textStart - m.panel.left;
     const x = m.rtl ? m.valueTextStart + textOffset - m.panel.width : m.valueTextStart - textOffset;
+    // Fractional measurements come from browser zoom and fractional layout: positions snap to whole
+    // pixels, and the list rounds up so a list that fits is never cut by a fraction of a pixel.
     return {
-        x: clamp(x, SELECT_ALIGN_MARGIN, m.viewport.width - SELECT_ALIGN_MARGIN - m.panel.width),
-        y,
-        listHeight,
-        scrollTop
+        x: Math.round(clamp(x, SELECT_ALIGN_MARGIN, m.viewport.width - SELECT_ALIGN_MARGIN - m.panel.width)),
+        y: Math.round(y),
+        listHeight: Math.ceil(listHeight),
+        scrollTop: Math.round(scrollTop)
     };
 }

package/dist/components/Form/Select/select.attributes.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The styling hooks a Select exposes. Attributes are presence attributes (set while the state
+ * holds, omitted otherwise) unless the description says they carry a value. The list sits in a
+ * Popover panel, whose `data-open`, `data-closed`, `data-entering` and `data-exiting` it also
+ * carries, and whose CSS variables are `selectCssVariables`.
+ */
+export declare const selectDataAttributes: {
+    readonly 'data-popup-open': "On the trigger button and the field container around it: present while the list is open.";
+    readonly 'data-placeholder': "On the trigger: present while no value is chosen and the placeholder shows.";
+    readonly 'data-disabled': "On the trigger: present while disabled. On an option: present while it is disabled.";
+    readonly 'data-readonly': "On the trigger: present while `readOnly`.";
+    readonly 'data-popup-side': "On the field container: `none` while the list is placed over the trigger, otherwise the side it sits on.";
+    readonly 'data-highlighted': "On an option: present while the keyboard or the pointer highlights it.";
+    readonly 'data-selected': "On an option: present while it is selected.";
+    readonly 'data-open': "On the list panel: present while open.";
+    readonly 'data-closed': "On the list panel: present while its exit transition plays.";
+    readonly 'data-entering': "On the list panel: present while the enter transition plays.";
+    readonly 'data-exiting': "On the list panel: present while the exit transition plays.";
+    readonly 'data-side': "On the list panel: `none` while it is placed over the trigger (aligned on the selected option), otherwise the side of the trigger it sits on.";
+};
+/** The name of a Select data attribute. */
+export type SelectDataAttribute = keyof typeof selectDataAttributes;
+/**
+ * The CSS variables a placement writes on the list panel's positioned wrapper, inherited by the
+ * list: the Popover set (`popoverCssVariables`). The dropdown list caps its height with
+ * `--available-height`; the mobile sheet has none.
+ */
+export declare const selectCssVariables: {
+    readonly '--available-width': "The width in px the panel can take before it reaches the viewport edges, minus 20px.";
+    readonly '--available-height': "The room in px between the trigger and the viewport edge on the panel's side, minus 20px. Cap a scrolling list with `max-height: min(240px, var(--available-height))`.";
+    readonly '--anchor-width': "The trigger's width in px, snapped to the device pixel grid.";
+    readonly '--anchor-height': "The trigger's height in px, snapped to the device pixel grid.";
+    readonly '--transform-origin': "The panel corner facing the trigger, mirrored in right-to-left documents; the point the panel scales from.";
+};
+/** The name of a Select CSS variable. */
+export type SelectCssVariable = keyof typeof selectCssVariables;

package/dist/components/Form/Select/select.attributes.js

@@ -0,0 +1,27 @@
+import { popoverCssVariables } from '../../Popover/popover.attributes.js';
+/**
+ * The styling hooks a Select exposes. Attributes are presence attributes (set while the state
+ * holds, omitted otherwise) unless the description says they carry a value. The list sits in a
+ * Popover panel, whose `data-open`, `data-closed`, `data-entering` and `data-exiting` it also
+ * carries, and whose CSS variables are `selectCssVariables`.
+ */
+export const selectDataAttributes = {
+    'data-popup-open': 'On the trigger button and the field container around it: present while the list is open.',
+    'data-placeholder': 'On the trigger: present while no value is chosen and the placeholder shows.',
+    'data-disabled': 'On the trigger: present while disabled. On an option: present while it is disabled.',
+    'data-readonly': 'On the trigger: present while `readOnly`.',
+    'data-popup-side': 'On the field container: `none` while the list is placed over the trigger, otherwise the side it sits on.',
+    'data-highlighted': 'On an option: present while the keyboard or the pointer highlights it.',
+    'data-selected': 'On an option: present while it is selected.',
+    'data-open': 'On the list panel: present while open.',
+    'data-closed': 'On the list panel: present while its exit transition plays.',
+    'data-entering': 'On the list panel: present while the enter transition plays.',
+    'data-exiting': 'On the list panel: present while the exit transition plays.',
+    'data-side': 'On the list panel: `none` while it is placed over the trigger (aligned on the selected option), otherwise the side of the trigger it sits on.'
+};
+/**
+ * The CSS variables a placement writes on the list panel's positioned wrapper, inherited by the
+ * list: the Popover set (`popoverCssVariables`). The dropdown list caps its height with
+ * `--available-height`; the mobile sheet has none.
+ */
+export const selectCssVariables = popoverCssVariables;