@mystravil/hardpoint 0.2.0 → 0.3.0

package/dist/components/MenuCheckboxItem.svelte

@@ -1,119 +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>
+<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/MenuGroup.svelte

@@ -1,50 +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>
+<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/MenuItem.svelte

@@ -1,94 +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>
+<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/MenuRadioGroup.svelte

@@ -1,62 +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>
+<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>