@mystravil/hardpoint 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 Hardpoint follows semantic versioning. Before 1.0.0, a breaking change raises the minor version.
 
+## 0.3.0 (2026-11-12)
+
+- **Added**:
+  - `TextField` with `type="search"` shows its own clear button at the end of the well while the field holds text, and hides the browser's cancel button, which Chrome on Android drew in bright blue. The button is 44 px on coarse pointers. A press empties the field, fires `input` (so `bind:value` and `oninput` see it) and leaves focus in the field; Tab reaches it, and Enter or Space clears. `clearLabel` names it (default `Clear`).
+  - `TextField` `labelHidden`: the label stays the field's accessible name but is hidden from sight, for a search in a toolbar. The well keeps its look and 16 px text.
+- **Changed**:
+  - `Menu` mounts Bits UI's portal and content on the first open instead of with the trigger, so a closed menu costs about a fifth of what it did (66 µs against 322 µs in Chromium, with its Button trigger). The trigger keeps `aria-haspopup`, `aria-expanded` and, while open, `aria-controls`; the first open plays the entrance as before.
+  - `Button` renders a plain `<button>`, or an `<a>` with `href`, without Bits UI's dynamic element, and mounts in less than half the time (10 µs against 23 µs). A disabled link still has no `href`, `role="link"`, `aria-disabled="true"` and `tabindex="-1"`. The element no longer carries Bits UI's `data-button-root`, `tabindex="0"` or `aria-disabled="false"`. `ButtonProps` is Hardpoint's own type with the same shape.
+
 ## 0.2.1 (2026-11-12)
 
 - **Changed**: the source is public at [MYSTRAVIL/hardpoint](https://github.com/MYSTRAVIL/hardpoint), and `package.json` links it. Releases publish from GitHub Actions through npm trusted publishing, so from this version on each release carries a provenance attestation that ties it to its commit and workflow run. The components did not change.

package/dist/components/Button.svelte

@@ -1,9 +1,10 @@
 <script lang="ts" module>
-	import { Button as BitsButton } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
 	export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
-	export type ButtonProps = BitsButton.RootProps & {
+	type ButtonOwnProps = {
 		/**
 		 * `primary`: solid titanium block, for the view's one group of solid
 		 * blocks. `secondary` (default): outlined. `tertiary`: caps label only.
@@ -17,7 +18,27 @@
 		 * `aria-label`.
 		 */
 		icon?: boolean;
+		/** The `<button>`, or the `<a>` when `href` is set. */
+		ref?: HTMLElement | null;
+		children?: Snippet;
 	};
+
+	/**
+	 * An `<a>` when `href` is set, a `<button>` otherwise. Attributes and
+	 * handlers not listed here go to the element.
+	 */
+	export type ButtonProps =
+		| (ButtonOwnProps &
+				Omit<HTMLButtonAttributes, 'children' | 'type' | 'href'> & {
+					type?: HTMLButtonAttributes['type'];
+					href?: never;
+				})
+		| (ButtonOwnProps &
+				Omit<HTMLAnchorAttributes, 'children' | 'type' | 'href'> & {
+					href: HTMLAnchorAttributes['href'];
+					type?: never;
+					disabled?: HTMLButtonAttributes['disabled'];
+				});
 </script>
 
 <script lang="ts">
@@ -27,30 +48,56 @@
 		icon = false,
 		class: className,
 		ref = $bindable(null),
+		href,
+		disabled,
 		children,
 		...rest
 	}: ButtonProps = $props();
+
+	// `rest` holds one element's attributes; each branch reads it as its own.
+	const asButton = (attributes: typeof rest) => attributes as HTMLButtonAttributes;
+	const asLink = (attributes: typeof rest) => attributes as HTMLAnchorAttributes;
 </script>
 
 <!--
-	An <a> when `href` is set, a <button> otherwise (Bits UI Button.Root). A
-	disabled link renders without href, with aria-disabled="true" and
-	tabindex -1; a disabled <button> is not focusable.
+	A plain <button> without `href`, an <a> with it, with no component layer
+	between: a transcript may draw hundreds. A disabled link renders without
+	href, with role="link", aria-disabled="true" and tabindex -1; a disabled
+	<button> is not focusable.
 -->
-<BitsButton.Root
-	bind:ref
-	class={['hp-button', 'hp-label', className]}
-	data-variant={variant}
-	data-opens={opens || undefined}
-	data-icon={icon || undefined}
-	{...rest}
->
-	{@render children?.()}
-</BitsButton.Root>
+{#if !href}
+	<button
+		bind:this={ref}
+		class={['hp-button', 'hp-label', className]}
+		data-variant={variant}
+		data-opens={opens || undefined}
+		data-icon={icon || undefined}
+		{disabled}
+		{...asButton(rest)}
+	>
+		{@render children?.()}
+	</button>
+{:else}
+	<a
+		bind:this={ref}
+		class={['hp-button', 'hp-label', className]}
+		data-variant={variant}
+		data-opens={opens || undefined}
+		data-icon={icon || undefined}
+		href={disabled ? undefined : href}
+		role={disabled ? 'link' : undefined}
+		aria-disabled={disabled ? 'true' : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...asLink(rest)}
+	>
+		{@render children?.()}
+	</a>
+{/if}
 
 <style>
-	/* Bits UI renders the element, so the root class reaches it from the
-	   outside: the rules are :global, keyed on .hp-button and its data-*. */
+	/* Global rules keyed on .hp-button and its data-*, at one class of
+	   specificity as when Bits UI rendered the element, so an app's rules
+	   that override them still apply. */
 	:global(.hp-button) {
 		display: inline-flex;
 		align-items: center;

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

@@ -1,6 +1,7 @@
-import { Button as BitsButton } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-export type ButtonProps = BitsButton.RootProps & {
+type ButtonOwnProps = {
     /**
      * `primary`: solid titanium block, for the view's one group of solid
      * blocks. `secondary` (default): outlined. `tertiary`: caps label only.
@@ -14,7 +15,22 @@ export type ButtonProps = BitsButton.RootProps & {
      * `aria-label`.
      */
     icon?: boolean;
+    /** The `<button>`, or the `<a>` when `href` is set. */
+    ref?: HTMLElement | null;
+    children?: Snippet;
 };
+/**
+ * An `<a>` when `href` is set, a `<button>` otherwise. Attributes and
+ * handlers not listed here go to the element.
+ */
+export type ButtonProps = (ButtonOwnProps & Omit<HTMLButtonAttributes, 'children' | 'type' | 'href'> & {
+    type?: HTMLButtonAttributes['type'];
+    href?: never;
+}) | (ButtonOwnProps & Omit<HTMLAnchorAttributes, 'children' | 'type' | 'href'> & {
+    href: HTMLAnchorAttributes['href'];
+    type?: never;
+    disabled?: HTMLButtonAttributes['disabled'];
+});
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/Menu.svelte

@@ -37,6 +37,7 @@
 </script>
 
 <script lang="ts">
+	import { tick } from 'svelte';
 	import { DropdownMenu } from 'bits-ui';
 	import { MediaQuery } from 'svelte/reactivity';
 	import { pop } from '../motion/index.js';
@@ -99,6 +100,20 @@
 	let sheetNode = $state<HTMLElement | null>(null);
 	let triggerNode = $state<HTMLElement | null>(null);
 
+	// Bits UI's content layers (the portal, positioning, focus and dismiss
+	// handling) cost about 0.3 ms a menu, and an app may draw several closed
+	// menus per view, so they mount on the first open, not with the
+	// trigger. Until then only the trigger and its ARIA exist. They mount
+	// closed, and Bits UI sees the menu open one update later, so the first
+	// entrance plays as every later one does. They stay mounted after that.
+	let layers = $state(false);
+	let ready = $state(false);
+	$effect(() => {
+		if (!open || layers) return;
+		layers = true;
+		tick().then(() => (ready = true));
+	});
+
 	function close() {
 		open = false;
 	}
@@ -150,7 +165,7 @@
 	it and return focus to the trigger. From 600px a press outside closes it
 	and leaves focus where the press put it; Tab closes it and moves on.
 -->
-<DropdownMenu.Root bind:open>
+<DropdownMenu.Root bind:open={() => open && ready, (value) => (open = value)}>
 	<DropdownMenu.Trigger
 		bind:ref={triggerNode}
 		onkeydowncapture={() => (keyboard = true)}
@@ -161,53 +176,55 @@
 		{/snippet}
 	</DropdownMenu.Trigger>
 
-	<DropdownMenu.Portal>
-		{#if wide.current}
-			<DropdownMenu.Content forceMount bind:ref {...placement} {onInteractOutside} {onCloseAutoFocus} {...rest}>
-				{#snippet child({ wrapperProps, props, open: shown })}
-					{#if shown}
-						<div {...wrapperProps}>
+	{#if layers}
+		<DropdownMenu.Portal>
+			{#if wide.current}
+				<DropdownMenu.Content forceMount bind:ref {...placement} {onInteractOutside} {onCloseAutoFocus} {...rest}>
+					{#snippet child({ wrapperProps, props, open: shown })}
+						{#if shown}
+							<div {...wrapperProps}>
+								<div
+									{...props}
+									class={['hp-menu', className]}
+									data-form="popover"
+									data-keyboard={keyboard || undefined}
+									aria-label={label}
+									transition:pop
+									{@attach trackInput}
+								>
+									{@render children()}
+								</div>
+							</div>
+						{/if}
+					{/snippet}
+				</DropdownMenu.Content>
+			{:else}
+				<DropdownMenu.ContentStatic
+					forceMount
+					bind:ref
+					{...rest}
+					preventScroll
+					onInteractOutside={insideSheet}
+					onCloseAutoFocus={returnFocus}
+				>
+					{#snippet child({ props, open: shown })}
+						<Sheet open={shown} layer="popover" title={label} {closeLabel} onclose={close} bind:ref={sheetNode}>
 							<div
 								{...props}
 								class={['hp-menu', className]}
-								data-form="popover"
+								data-form="sheet"
 								data-keyboard={keyboard || undefined}
 								aria-label={label}
-								transition:pop
 								{@attach trackInput}
 							>
 								{@render children()}
 							</div>
-						</div>
-					{/if}
-				{/snippet}
-			</DropdownMenu.Content>
-		{:else}
-			<DropdownMenu.ContentStatic
-				forceMount
-				bind:ref
-				{...rest}
-				preventScroll
-				onInteractOutside={insideSheet}
-				onCloseAutoFocus={returnFocus}
-			>
-				{#snippet child({ props, open: shown })}
-					<Sheet open={shown} layer="popover" title={label} {closeLabel} onclose={close} bind:ref={sheetNode}>
-						<div
-							{...props}
-							class={['hp-menu', className]}
-							data-form="sheet"
-							data-keyboard={keyboard || undefined}
-							aria-label={label}
-							{@attach trackInput}
-						>
-							{@render children()}
-						</div>
-					</Sheet>
-				{/snippet}
-			</DropdownMenu.ContentStatic>
-		{/if}
-	</DropdownMenu.Portal>
+						</Sheet>
+					{/snippet}
+				</DropdownMenu.ContentStatic>
+			{/if}
+		</DropdownMenu.Portal>
+	{/if}
 </DropdownMenu.Root>
 
 <style>

package/dist/components/TextField.svelte

@@ -9,7 +9,10 @@
 
 	/** Attributes and handlers not listed here go to the `<input>`. */
 	export type TextFieldProps = Omit<HTMLInputAttributes, 'type' | 'value' | 'children'> & {
-		/** The caps field label above the well. Required: a placeholder is never the only label. */
+		/**
+		 * The caps field label above the well. Required, also with
+		 * `labelHidden`: a placeholder is never the only label.
+		 */
 		label: string;
 		/** The text. Bindable. */
 		value?: string;
@@ -28,6 +31,18 @@
 		 * The hint and the error stay under the well.
 		 */
 		labelBeside?: boolean | TextFieldBreakpoint;
+		/**
+		 * Hides the label from sight; it stays the field's accessible name.
+		 * For a field whose purpose its place makes plain, such as a search in
+		 * a toolbar. The well keeps its look and its 16 px text. It overrides
+		 * `labelBeside`.
+		 */
+		labelHidden?: boolean;
+		/**
+		 * The accessible name of the clear button that `type="search"` shows
+		 * inside the well while it holds text.
+		 */
+		clearLabel?: string;
 		/** The `<input>`, for example to focus the first error on submit. */
 		ref?: HTMLInputElement | null;
 	};
@@ -47,8 +62,11 @@
 		hint,
 		error,
 		labelBeside = false,
+		labelHidden = false,
+		clearLabel = 'Clear',
 		id = uid,
 		disabled,
+		readonly,
 		ref = $bindable(null),
 		class: className,
 		'aria-describedby': describedBy,
@@ -82,37 +100,87 @@
 			if (message) fadeIn(message, '--dur-message');
 		});
 	});
+
+	// ---- Search: the clear button --------------------------------------
+
+	// The browser's own cancel button is hidden (CSS below) and this one
+	// takes its place, so every engine draws the same control. It writes
+	// the empty value and fires a bubbling `input`, as typing would, so
+	// `bind:value` and the app's `oninput` both hear it, then focus returns
+	// to the field. A mouse or a touch press never takes focus from the
+	// field, so an on-screen keyboard stays up; keys reach the button by Tab.
+	const clearable = $derived(type === 'search');
+	const showClear = $derived(clearable && !!value && !disabled && !readonly);
+
+	function clear() {
+		if (!ref) return;
+		ref.value = '';
+		ref.dispatchEvent(new Event('input', { bubbles: true }));
+		ref.focus();
+	}
 </script>
 
 <!--
 	A single-line text input in the black well, with a plain caps label above
 	it (Bits UI Label), an optional hint and an inline error below. Extra
 	attributes (`name`, `inputmode`, `autocomplete`, `enterkeyhint`,
-	`required`), handlers and `class` go to the <input>.
+	`required`), handlers and `class` go to the <input>. With
+	`type="search"` the well holds a clear button at its end while it has
+	text.
 -->
 <div
 	bind:this={root}
 	class="hp-text-field"
 	data-invalid={error ? '' : undefined}
 	data-disabled={disabled ? '' : undefined}
-	data-label-beside={labelBeside === true ? 'always' : labelBeside || undefined}
+	data-label-beside={labelHidden ? undefined : labelBeside === true ? 'always' : labelBeside || undefined}
 >
 	<Label.Root for={id}>
 		{#snippet child({ props })}
-			<label {...props} class="hp-label">{label}</label>
+			<label {...props} class={['hp-label', labelHidden && 'hp-visually-hidden']}>{label}</label>
 		{/snippet}
 	</Label.Root>
-	<input
-		{...rest}
-		bind:this={ref}
-		bind:value
-		{id}
-		{type}
-		{disabled}
-		class={['hp-well', className]}
-		aria-describedby={describedByIds}
-		aria-invalid={error ? true : ariaInvalid}
-	/>
+	{#snippet well()}
+		<input
+			{...rest}
+			bind:this={ref}
+			bind:value
+			{id}
+			{type}
+			{disabled}
+			{readonly}
+			class={['hp-well', className]}
+			aria-describedby={describedByIds}
+			aria-invalid={error ? true : ariaInvalid}
+		/>
+	{/snippet}
+	{#if clearable}
+		<div class="search">
+			{@render well()}
+			{#if showClear}
+				<button
+					type="button"
+					class="clear hp-focus-inset"
+					aria-label={clearLabel}
+					onmousedown={(e) => e.preventDefault()}
+					onclick={clear}
+				>
+					<svg
+						viewBox="0 0 16 16"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.5"
+						stroke-linecap="square"
+						aria-hidden="true"
+					>
+						<path d="M4 4l8 8M12 4l-8 8" />
+					</svg>
+				</button>
+			{/if}
+		</div>
+	{:else}
+		{@render well()}
+	{/if}
 	{#if hint}
 		<p class="hint hp-caption" id={hintId}>{hint}</p>
 	{/if}
@@ -148,6 +216,72 @@
 		opacity: 1;
 	}
 
+	/* ---- Search: the clear button replaces the browser's own --------- */
+
+	/* WebKit and Blink draw a cancel button in a search input whatever its
+	   appearance; Chrome on Android draws it bright blue. */
+	input::-webkit-search-cancel-button,
+	input::-webkit-search-decoration {
+		appearance: none;
+		display: none;
+	}
+	.search {
+		position: relative;
+		min-width: 0;
+	}
+	/* The text stops short of the button's square, whether it shows or not,
+	   so the text never moves when it appears. */
+	.search > input {
+		padding-right: var(--control-height);
+	}
+	/* A --control-height square over the end of the well: 36px on fine
+	   pointers, 44px on coarse. Its transparent border keeps a press fill
+	   inside the well's edge. The cross is smaller than a close button's,
+	   in --muted like the placeholder, so it reads as part of the well. */
+	.clear {
+		position: absolute;
+		top: 0;
+		right: 0;
+		display: grid;
+		place-items: center;
+		box-sizing: border-box;
+		width: var(--control-height);
+		height: var(--control-height);
+		padding: 0;
+		border: 1px solid transparent;
+		background: transparent;
+		background-clip: padding-box;
+		color: var(--muted);
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.clear svg {
+		display: block;
+		width: var(--space-4);
+		height: var(--space-4);
+	}
+	.clear:active {
+		background-color: var(--surface-raised);
+		color: var(--text);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.clear {
+			transition:
+				background-color var(--dur-hover) var(--settle),
+				color var(--dur-hover) var(--settle);
+		}
+		.clear:hover {
+			color: var(--text);
+		}
+		.clear:active {
+			transition-duration: var(--dur-press);
+		}
+		/* The button is part of the well, so the well keeps its hover fill. */
+		.search:has(> .clear:hover) > input {
+			background-color: var(--surface-hover);
+		}
+	}
+
 	/* Invalid: the boundary turns --danger (5.9:1 on black), never alone:
 	   the icon and the message say what is wrong. Keyed on the root's
 	   data-invalid, set by `error`, so an aria-invalid the app passes
@@ -178,7 +312,9 @@
 	/* The first message starts 8px under the well, clear of the focus
 	   contour (2px, drawn 4px outside the well). */
 	input + .hint,
-	input + .error {
+	input + .error,
+	.search + .hint,
+	.search + .error {
 		margin-top: var(--space-1);
 	}
 	/* One line box high, so the icon centres on the first line of the
@@ -205,6 +341,7 @@
 		white-space: nowrap;
 	}
 	[data-label-beside='always'] input,
+	[data-label-beside='always'] .search,
 	[data-label-beside='always'] p {
 		grid-column: 2;
 	}
@@ -219,6 +356,7 @@
 			white-space: nowrap;
 		}
 		[data-label-beside='medium'] input,
+		[data-label-beside='medium'] .search,
 		[data-label-beside='medium'] p {
 			grid-column: 2;
 		}
@@ -234,6 +372,7 @@
 			white-space: nowrap;
 		}
 		[data-label-beside='expanded'] input,
+		[data-label-beside='expanded'] .search,
 		[data-label-beside='expanded'] p {
 			grid-column: 2;
 		}
@@ -249,6 +388,7 @@
 			white-space: nowrap;
 		}
 		[data-label-beside='large'] input,
+		[data-label-beside='large'] .search,
 		[data-label-beside='large'] p {
 			grid-column: 2;
 		}

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

@@ -5,7 +5,10 @@ export type TextFieldType = 'text' | 'email' | 'password' | 'search' | 'tel' | '
 export type TextFieldBreakpoint = 'medium' | 'expanded' | 'large';
 /** Attributes and handlers not listed here go to the `<input>`. */
 export type TextFieldProps = Omit<HTMLInputAttributes, 'type' | 'value' | 'children'> & {
-    /** The caps field label above the well. Required: a placeholder is never the only label. */
+    /**
+     * The caps field label above the well. Required, also with
+     * `labelHidden`: a placeholder is never the only label.
+     */
     label: string;
     /** The text. Bindable. */
     value?: string;
@@ -24,6 +27,18 @@ export type TextFieldProps = Omit<HTMLInputAttributes, 'type' | 'value' | 'child
      * The hint and the error stay under the well.
      */
     labelBeside?: boolean | TextFieldBreakpoint;
+    /**
+     * Hides the label from sight; it stays the field's accessible name.
+     * For a field whose purpose its place makes plain, such as a search in
+     * a toolbar. The well keeps its look and its 16 px text. It overrides
+     * `labelBeside`.
+     */
+    labelHidden?: boolean;
+    /**
+     * The accessible name of the clear button that `type="search"` shows
+     * inside the well while it holds text.
+     */
+    clearLabel?: string;
     /** The `<input>`, for example to focus the first error on submit. */
     ref?: HTMLInputElement | null;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mystravil/hardpoint",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"description": "Hardpoint: a Svelte 5 design system on Bits UI. AMOLED black, titanium ink, Geist, square solid blocks, banded mono tables, opt-in expressive motion, dark and light themes.",
 	"license": "MIT",
 	"author": "MYSTRAVIL",