@mystravil/hardpoint 0.0.0-stage → 0.1.0

package/dist/components/MenuCheckboxItem.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+
+	/**
+	 * Attributes and handlers not listed here go to the item element (Bits UI
+	 * `DropdownMenu.CheckboxItem`), among them `disabled`, `onCheckedChange`,
+	 * `onSelect` and `closeOnSelect` (default true; pass false to keep the
+	 * menu open, so the change shows).
+	 */
+	export type MenuCheckboxItemProps = Omit<
+		BitsDropdownMenu.CheckboxItemProps,
+		'child' | 'children' | 'indeterminate' | 'onIndeterminateChange' | 'value'
+	> & {
+		/** The label, as written (never caps). */
+		children: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+
+	let {
+		checked = $bindable(false),
+		ref = $bindable(null),
+		class: className,
+		children,
+		...rest
+	}: MenuCheckboxItemProps = $props();
+</script>
+
+<!--
+	A Bits UI checkbox item, role="menuitemcheckbox", with aria-checked and
+	data-state (checked, unchecked). A press, Enter or Space toggles it.
+-->
+<DropdownMenu.CheckboxItem bind:checked bind:ref {...rest}>
+	{#snippet child({ props })}
+		<div {...props} class={['hp-menu-checkbox-item', className]}>
+			<span class="hp-menu-box" aria-hidden="true">
+				<svg class="hp-menu-check" viewBox="0 0 12 12"><path d="M1.5 6.5l3 3 6-6" /></svg>
+			</span>
+			<span class="hp-menu-item-label">{@render children()}</span>
+		</div>
+	{/snippet}
+</DropdownMenu.CheckboxItem>
+
+<style>
+	/* The row: the same as MenuItem's. Only the mark fades (below). */
+	.hp-menu-checkbox-item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+		box-sizing: border-box;
+		min-height: var(--control-height);
+		padding: var(--space-1) var(--menu-inset, var(--space-3));
+		font: var(--type-body) / 24px var(--sans);
+		overflow-wrap: anywhere;
+		cursor: pointer;
+		user-select: none;
+		touch-action: manipulation;
+		-webkit-tap-highlight-color: transparent;
+		outline: none;
+	}
+	.hp-menu-item-label {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.hp-menu-checkbox-item[data-highlighted] {
+		background: var(--surface-hover);
+		outline: var(--menu-contour, none);
+		outline-offset: -2px;
+	}
+	.hp-menu-checkbox-item:active:not([data-disabled]) {
+		background: var(--surface-raised);
+	}
+	.hp-menu-checkbox-item[data-disabled] {
+		color: var(--muted);
+		cursor: not-allowed;
+	}
+
+	/* Checkbox's black box with a 3:1 boundary. Checked, the edge and the
+	   mark turn titanium and the box stays black: selection is never a fill.
+	   The row's tint is the hover feedback. */
+	.hp-menu-box {
+		flex: none;
+		display: grid;
+		place-items: center;
+		box-sizing: border-box;
+		width: 20px;
+		height: 20px;
+		border: 1px solid var(--border-control);
+		background: var(--canvas);
+		color: var(--accent);
+	}
+	.hp-menu-checkbox-item[data-state='checked'] .hp-menu-box {
+		border-color: var(--accent);
+	}
+	.hp-menu-checkbox-item[data-disabled] .hp-menu-box {
+		border-color: var(--border);
+		color: var(--muted);
+	}
+	/* The check is always there, at opacity 0 until the item is checked.
+	   Checking fades it in from 0 over --dur-mark (BRIEF, short motion);
+	   unchecking takes it away at once. A CSS transition never runs on an
+	   element's first style, so a menu that opens shows its marks at once.
+	   0ms is a snap. Opacity only, so reduced motion keeps it. */
+	.hp-menu-check {
+		width: 12px;
+		height: 12px;
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 2px;
+		opacity: 0;
+	}
+	.hp-menu-checkbox-item[data-state='checked'] .hp-menu-check {
+		opacity: 1;
+		transition: opacity var(--dur-mark) var(--settle);
+	}
+</style>

package/dist/components/MenuCheckboxItem.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+/**
+ * Attributes and handlers not listed here go to the item element (Bits UI
+ * `DropdownMenu.CheckboxItem`), among them `disabled`, `onCheckedChange`,
+ * `onSelect` and `closeOnSelect` (default true; pass false to keep the
+ * menu open, so the change shows).
+ */
+export type MenuCheckboxItemProps = Omit<BitsDropdownMenu.CheckboxItemProps, 'child' | 'children' | 'indeterminate' | 'onIndeterminateChange' | 'value'> & {
+    /** The label, as written (never caps). */
+    children: Snippet;
+};
+declare const MenuCheckboxItem: import("svelte").Component<MenuCheckboxItemProps, {}, "ref" | "checked">;
+type MenuCheckboxItem = ReturnType<typeof MenuCheckboxItem>;
+export default MenuCheckboxItem;

package/dist/components/MenuGroup.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+
+	/** Attributes not listed here go to the group element (Bits UI `DropdownMenu.Group`). */
+	export type MenuGroupProps = Omit<BitsDropdownMenu.GroupProps, 'child' | 'children'> & {
+		/**
+		 * The caps heading over the items, and the group's accessible name. A
+		 * fixed string the app defines, set in caps; never user data.
+		 */
+		label?: string;
+		/** The items. */
+		children: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+
+	let { label, ref = $bindable(null), class: className, children, ...rest }: MenuGroupProps = $props();
+</script>
+
+<!--
+	A Bits UI group, role="group", named by its heading through
+	aria-labelledby. Separate groups with a MenuSeparator.
+-->
+<DropdownMenu.Group bind:ref {...rest}>
+	{#snippet child({ props })}
+		<div {...props} class={['hp-menu-group', className]}>
+			{#if label}
+				<DropdownMenu.GroupHeading>
+					{#snippet child({ props: headingProps })}
+						<div {...headingProps} class="hp-menu-group-heading hp-label">{label}</div>
+					{/snippet}
+				</DropdownMenu.GroupHeading>
+			{/if}
+			{@render children()}
+		</div>
+	{/snippet}
+</DropdownMenu.Group>
+
+<style>
+	/* A muted caps label over the items, its text on the items' text edge.
+	   The same heading as MenuRadioGroup's. */
+	.hp-menu-group-heading {
+		padding: var(--space-2) var(--menu-inset, var(--space-3)) var(--space-1);
+		color: var(--muted);
+		user-select: none;
+	}
+</style>

package/dist/components/MenuGroup.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+/** Attributes not listed here go to the group element (Bits UI `DropdownMenu.Group`). */
+export type MenuGroupProps = Omit<BitsDropdownMenu.GroupProps, 'child' | 'children'> & {
+    /**
+     * The caps heading over the items, and the group's accessible name. A
+     * fixed string the app defines, set in caps; never user data.
+     */
+    label?: string;
+    /** The items. */
+    children: Snippet;
+};
+declare const MenuGroup: import("svelte").Component<MenuGroupProps, {}, "ref">;
+type MenuGroup = ReturnType<typeof MenuGroup>;
+export default MenuGroup;

package/dist/components/MenuItem.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+
+	export type MenuItemVariant = 'default' | 'danger';
+
+	/**
+	 * Attributes and handlers not listed here go to the item element (Bits UI
+	 * `DropdownMenu.Item`), among them `disabled`, `onSelect` (call
+	 * `preventDefault()` on its event to keep the menu open), `closeOnSelect`
+	 * (default true) and `textValue`. Typeahead matches the label's text:
+	 * Bits UI 2.20.6 declares `textValue` but does not read it yet.
+	 */
+	export type MenuItemProps = Omit<BitsDropdownMenu.ItemProps, 'child' | 'children'> & {
+		/** `danger` (status red) for an action that destroys or removes something. */
+		variant?: MenuItemVariant;
+		/** The label, as written (never caps). */
+		children: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+
+	let {
+		variant = 'default',
+		ref = $bindable(null),
+		class: className,
+		children,
+		...rest
+	}: MenuItemProps = $props();
+</script>
+
+<!--
+	A Bits UI menu item, role="menuitem", with Bits UI's data-highlighted,
+	data-disabled and aria-disabled. A press, Enter or Space runs `onSelect`
+	and closes the menu.
+-->
+<DropdownMenu.Item bind:ref {...rest}>
+	{#snippet child({ props })}
+		<div {...props} class={['hp-menu-item', className]} data-variant={variant}>
+			<span class="hp-menu-item-label">{@render children()}</span>
+		</div>
+	{/snippet}
+</DropdownMenu.Item>
+
+<style>
+	/* A Geist row, sentence case: 36px on fine pointers, 44px on coarse.
+	   The label is one flex item, so inline markup inside it stays inline.
+	   Highlight moves snap, so nothing on a row transitions (BRIEF, motion
+	   rule 3). Same row as MenuCheckboxItem and MenuRadioItem. */
+	.hp-menu-item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+		box-sizing: border-box;
+		min-height: var(--control-height);
+		padding: var(--space-1) var(--menu-inset, var(--space-3));
+		font: var(--type-body) / 24px var(--sans);
+		overflow-wrap: anywhere;
+		cursor: pointer;
+		user-select: none;
+		touch-action: manipulation;
+		-webkit-tap-highlight-color: transparent;
+		outline: none;
+	}
+	.hp-menu-item-label {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	/* Highlighted, by keys or a pointer: the hover tint. A highlight the keys
+	   moved also draws the focus contour inside the row (Menu sets
+	   --menu-contour). */
+	.hp-menu-item[data-highlighted] {
+		background: var(--surface-hover);
+		outline: var(--menu-contour, none);
+		outline-offset: -2px;
+	}
+	/* Press: one step past the tint, so it reads on a phone too. */
+	.hp-menu-item:active:not([data-disabled]) {
+		background: var(--surface-raised);
+	}
+
+	.hp-menu-item[data-variant='danger'] {
+		color: var(--danger);
+	}
+	/* Disabled: muted, even a danger item; keys skip it and a pointer does
+	   not highlight it. */
+	.hp-menu-item[data-disabled] {
+		color: var(--muted);
+		cursor: not-allowed;
+	}
+</style>

package/dist/components/MenuItem.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+export type MenuItemVariant = 'default' | 'danger';
+/**
+ * Attributes and handlers not listed here go to the item element (Bits UI
+ * `DropdownMenu.Item`), among them `disabled`, `onSelect` (call
+ * `preventDefault()` on its event to keep the menu open), `closeOnSelect`
+ * (default true) and `textValue`. Typeahead matches the label's text:
+ * Bits UI 2.20.6 declares `textValue` but does not read it yet.
+ */
+export type MenuItemProps = Omit<BitsDropdownMenu.ItemProps, 'child' | 'children'> & {
+    /** `danger` (status red) for an action that destroys or removes something. */
+    variant?: MenuItemVariant;
+    /** The label, as written (never caps). */
+    children: Snippet;
+};
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "ref">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/components/MenuRadioGroup.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+
+	/**
+	 * Attributes and handlers not listed here go to the group element (Bits
+	 * UI `DropdownMenu.RadioGroup`), among them `onValueChange`.
+	 */
+	export type MenuRadioGroupProps = Omit<BitsDropdownMenu.RadioGroupProps, 'child' | 'children'> & {
+		/** The chosen MenuRadioItem's `value`; `''` for none. */
+		value?: string;
+		/**
+		 * The caps heading over the items, and the group's accessible name. A
+		 * fixed string the app defines, set in caps; never user data.
+		 */
+		label?: string;
+		/** The MenuRadioItems. */
+		children: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+
+	let {
+		value = $bindable(''),
+		label,
+		ref = $bindable(null),
+		class: className,
+		children,
+		...rest
+	}: MenuRadioGroupProps = $props();
+</script>
+
+<!--
+	A Bits UI radio group, role="group", named by its heading through
+	aria-labelledby. One of its MenuRadioItems is chosen at a time.
+-->
+<DropdownMenu.RadioGroup bind:value bind:ref {...rest}>
+	{#snippet child({ props })}
+		<div {...props} class={['hp-menu-radio-group', className]}>
+			{#if label}
+				<DropdownMenu.GroupHeading>
+					{#snippet child({ props: headingProps })}
+						<div {...headingProps} class="hp-menu-group-heading hp-label">{label}</div>
+					{/snippet}
+				</DropdownMenu.GroupHeading>
+			{/if}
+			{@render children()}
+		</div>
+	{/snippet}
+</DropdownMenu.RadioGroup>
+
+<style>
+	/* MenuGroup's heading: a muted caps label over the items, its text on
+	   the items' text edge. */
+	.hp-menu-group-heading {
+		padding: var(--space-2) var(--menu-inset, var(--space-3)) var(--space-1);
+		color: var(--muted);
+		user-select: none;
+	}
+</style>

package/dist/components/MenuRadioGroup.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+/**
+ * Attributes and handlers not listed here go to the group element (Bits
+ * UI `DropdownMenu.RadioGroup`), among them `onValueChange`.
+ */
+export type MenuRadioGroupProps = Omit<BitsDropdownMenu.RadioGroupProps, 'child' | 'children'> & {
+    /** The chosen MenuRadioItem's `value`; `''` for none. */
+    value?: string;
+    /**
+     * The caps heading over the items, and the group's accessible name. A
+     * fixed string the app defines, set in caps; never user data.
+     */
+    label?: string;
+    /** The MenuRadioItems. */
+    children: Snippet;
+};
+declare const MenuRadioGroup: import("svelte").Component<MenuRadioGroupProps, {}, "value" | "ref">;
+type MenuRadioGroup = ReturnType<typeof MenuRadioGroup>;
+export default MenuRadioGroup;

package/dist/components/MenuRadioItem.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+
+	/**
+	 * Attributes and handlers not listed here go to the item element (Bits UI
+	 * `DropdownMenu.RadioItem`), among them `disabled`, `onSelect` and
+	 * `closeOnSelect` (default true; pass false to keep the menu open, so the
+	 * change shows). Place it inside a MenuRadioGroup.
+	 */
+	export type MenuRadioItemProps = Omit<BitsDropdownMenu.RadioItemProps, 'child' | 'children'> & {
+		/** Chosen when the group's `value` equals it. */
+		value: string;
+		/** The label, as written (never caps). */
+		children: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, children, ...rest }: MenuRadioItemProps = $props();
+</script>
+
+<!--
+	A Bits UI radio item, role="menuitemradio", with aria-checked and
+	data-state (checked, unchecked). A press, Enter or Space chooses it.
+-->
+<DropdownMenu.RadioItem bind:ref {...rest}>
+	{#snippet child({ props })}
+		<div {...props} class={['hp-menu-radio-item', className]}>
+			<span class="hp-menu-box" aria-hidden="true">
+				<span class="hp-menu-radio-mark"></span>
+			</span>
+			<span class="hp-menu-item-label">{@render children()}</span>
+		</div>
+	{/snippet}
+</DropdownMenu.RadioItem>
+
+<style>
+	/* The row: the same as MenuItem's. Only the mark fades (below). */
+	.hp-menu-radio-item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-3);
+		box-sizing: border-box;
+		min-height: var(--control-height);
+		padding: var(--space-1) var(--menu-inset, var(--space-3));
+		font: var(--type-body) / 24px var(--sans);
+		overflow-wrap: anywhere;
+		cursor: pointer;
+		user-select: none;
+		touch-action: manipulation;
+		-webkit-tap-highlight-color: transparent;
+		outline: none;
+	}
+	.hp-menu-item-label {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.hp-menu-radio-item[data-highlighted] {
+		background: var(--surface-hover);
+		outline: var(--menu-contour, none);
+		outline-offset: -2px;
+	}
+	.hp-menu-radio-item:active:not([data-disabled]) {
+		background: var(--surface-raised);
+	}
+	.hp-menu-radio-item[data-disabled] {
+		color: var(--muted);
+		cursor: not-allowed;
+	}
+
+	/* The checkbox item's black box; chosen, a titanium edge and a solid
+	   8px titanium square, square like every other mark. */
+	.hp-menu-box {
+		flex: none;
+		display: grid;
+		place-items: center;
+		box-sizing: border-box;
+		width: 20px;
+		height: 20px;
+		border: 1px solid var(--border-control);
+		background: var(--canvas);
+		color: var(--accent);
+	}
+	.hp-menu-radio-item[data-state='checked'] .hp-menu-box {
+		border-color: var(--accent);
+	}
+	.hp-menu-radio-item[data-disabled] .hp-menu-box {
+		border-color: var(--border);
+		color: var(--muted);
+	}
+	/* The mark is always there, at opacity 0 until the item is chosen.
+	   Choosing fades it in from 0 over --dur-mark (BRIEF, short motion);
+	   the item that loses the choice drops its mark at once. A CSS
+	   transition never runs on an element's first style, so a menu that
+	   opens shows its mark at once. 0ms is a snap. Opacity only, so reduced
+	   motion keeps it. */
+	.hp-menu-radio-mark {
+		width: 8px;
+		height: 8px;
+		background: currentColor;
+		opacity: 0;
+	}
+	.hp-menu-radio-item[data-state='checked'] .hp-menu-radio-mark {
+		opacity: 1;
+		transition: opacity var(--dur-mark) var(--settle);
+	}
+</style>

package/dist/components/MenuRadioItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+/**
+ * Attributes and handlers not listed here go to the item element (Bits UI
+ * `DropdownMenu.RadioItem`), among them `disabled`, `onSelect` and
+ * `closeOnSelect` (default true; pass false to keep the menu open, so the
+ * change shows). Place it inside a MenuRadioGroup.
+ */
+export type MenuRadioItemProps = Omit<BitsDropdownMenu.RadioItemProps, 'child' | 'children'> & {
+    /** Chosen when the group's `value` equals it. */
+    value: string;
+    /** The label, as written (never caps). */
+    children: Snippet;
+};
+declare const MenuRadioItem: import("svelte").Component<MenuRadioItemProps, {}, "ref">;
+type MenuRadioItem = ReturnType<typeof MenuRadioItem>;
+export default MenuRadioItem;

package/dist/components/MenuSeparator.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+	import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+
+	/** Attributes go to the separator element (Bits UI `DropdownMenu.Separator`). */
+	export type MenuSeparatorProps = Omit<BitsDropdownMenu.SeparatorProps, 'child' | 'children'>;
+</script>
+
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+
+	let { ref = $bindable(null), class: className, ...rest }: MenuSeparatorProps = $props();
+</script>
+
+<!-- A Bits UI separator, role="separator", between groups of items. -->
+<DropdownMenu.Separator bind:ref {...rest}>
+	{#snippet child({ props })}
+		<div {...props} class={['hp-menu-separator', className]}></div>
+	{/snippet}
+</DropdownMenu.Separator>
+
+<style>
+	/* A 1px divider across the whole menu, in the decorative line colour. */
+	.hp-menu-separator {
+		height: 1px;
+		margin-block: var(--space-1);
+		background: var(--border);
+	}
+</style>

package/dist/components/MenuSeparator.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { DropdownMenu as BitsDropdownMenu } from 'bits-ui';
+/** Attributes go to the separator element (Bits UI `DropdownMenu.Separator`). */
+export type MenuSeparatorProps = Omit<BitsDropdownMenu.SeparatorProps, 'child' | 'children'>;
+declare const MenuSeparator: import("svelte").Component<MenuSeparatorProps, {}, "ref">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;

package/dist/components/NativeSelect.svelte

@@ -0,0 +1,119 @@
+<script lang="ts" module>
+	import type { HTMLSelectAttributes } from 'svelte/elements';
+
+	export type NativeSelectOption<V = string> = {
+		value: V;
+		label: string;
+		disabled?: boolean;
+	};
+
+	/** From which width the label sits beside the well: 600px, 900px or 1200px. */
+	export type NativeSelectBreakpoint = 'medium' | 'expanded' | 'large';
+</script>
+
+<script lang="ts" generics="V = string">
+	import type { Snippet } from 'svelte';
+
+	const uid = $props.id();
+
+	let {
+		label,
+		value = $bindable(),
+		options,
+		labelBeside = false,
+		id = uid,
+		class: className,
+		children,
+		...rest
+	}: Omit<HTMLSelectAttributes, 'value' | 'multiple' | 'children'> & {
+		/** The caps field label. */
+		label: string;
+		/** The chosen option's value. Bindable. */
+		value?: V;
+		/** The choices. Without it, pass `<option>` elements as children. */
+		options?: NativeSelectOption<V>[];
+		/**
+		 * The label sits above the well by default. `true` puts it beside the
+		 * well at every width; a breakpoint puts it beside from that width up.
+		 */
+		labelBeside?: boolean | NativeSelectBreakpoint;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<!--
+	A single choice from a short fixed list. A native <select>, so phones keep
+	their own picker (BRIEF, Apps and phones). Extra attributes, handlers and
+	`class` go to the <select>.
+-->
+<div
+	class="hp-native-select"
+	data-label-beside={labelBeside === true ? 'always' : labelBeside || undefined}
+>
+	<label class="hp-label" for={id}>{label}</label>
+	<span class="hp-well-chevron">
+		<select {...rest} {id} class={['hp-well', className]} bind:value>
+			{#if options}
+				{#each options as option (option.value)}
+					<option value={option.value} disabled={option.disabled}>{option.label}</option>
+				{/each}
+			{:else}
+				{@render children?.()}
+			{/if}
+		</select>
+	</span>
+</div>
+
+<style>
+	.hp-native-select {
+		display: grid;
+		gap: var(--space-1);
+		min-width: 0;
+	}
+	label {
+		color: var(--muted);
+	}
+	/* The well fills its column, never narrower than a short choice and the
+	   chevron. The wrapper is the grid or flex item, so it holds the minimum;
+	   a select's own minimum would be its longest option. */
+	.hp-well-chevron {
+		width: 100%;
+		min-width: 136px;
+	}
+	select {
+		display: block;
+		width: 100%;
+	}
+
+	/* Beside the well, the label keeps its one line and the well gives way. */
+	[data-label-beside] label {
+		flex: none;
+	}
+
+	[data-label-beside='always'] {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+	}
+	@media (min-width: 600px) {
+		[data-label-beside='medium'] {
+			display: flex;
+			align-items: center;
+			gap: var(--space-2);
+		}
+	}
+	@media (min-width: 900px) {
+		[data-label-beside='expanded'] {
+			display: flex;
+			align-items: center;
+			gap: var(--space-2);
+		}
+	}
+	@media (min-width: 1200px) {
+		[data-label-beside='large'] {
+			display: flex;
+			align-items: center;
+			gap: var(--space-2);
+		}
+	}
+</style>