@vit-foundation/ui 0.26.0 → 0.27.0

package/README.md

@@ -25,7 +25,7 @@ Everything exports flat from the root, and again grouped by role:
 | Entry point                                                     | What lives there                                                                                                                                                                                                                                                                  |
 | --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [`/primitives`](./docs/components/primitives.md)                | Button, GhostButton, Link, CardMedia, CardTitle, CopyIntro, DateText, DecorShapes, FilterChips, Pagination, RichText, SearchInput, ShareRow                                                                                                                                       |
-| [`/forms`](./docs/forms.md)                                     | Field, FormFeedback, FormErrorFeedback, FormResultSlot, Honeypot, LocaleField, NewsletterIntentField — plus the remote-form seam: structural types, transport constants, field bounds                                                                                             |
+| [`/forms`](./docs/forms.md)                                     | Field, SelectField, TextField, FormFeedback, FormErrorFeedback, FormResultSlot, Honeypot, LocaleField, NewsletterIntentField — plus the remote-form seam: structural types, transport constants, field bounds                                                                     |
 | [`/chrome`](./docs/components/chrome.md)                        | PageShell, Nav, Footer                                                                                                                                                                                                                                                            |
 | [`/content`](./docs/components/content.md)                      | WeeklieCard, ProjectCard, Timeline, TimelineMilestone, TeamMemberCard, CollaboratorList, JobList, SortSelect, the nine page modules (HomePage … WeeklyPage) — plus the data shapes, the page-copy vocabulary, helpers and the two list rules (createWeeklyList, createUrlFilters) |
 | [`/community`](./docs/components/community.md)                  | AuthPageShell, LoginForm, SignupForm, GoogleAuthForm, AccountPanel, NewsletterSignup, CommentSection, ReactionBar, ContactForm                                                                                                                                                    |

package/dist/components/ui/Icon.svelte

@@ -10,6 +10,10 @@
 			'M5 7h14M10 7V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2m3 0v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7m3 4v6m4-6v6',
 		duplicate: 'M9 9h10v12H9zM5 15V3h10',
 		plus: 'M12 5v14M5 12h14',
+		/* A month sheet: body, its two hanging tabs, and the rule under the
+		   weekday row. One subpath list, like `trash` and `logout`. */
+		calendar:
+			'M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM4 10.5h16M8.5 3.5V6M15.5 3.5V6',
 		'chevron-right': 'M9 5l7 7-7 7',
 		'chevron-left': 'M15 5l-7 7 7 7',
 		close: 'M6 6l12 12M18 6L6 18',

package/dist/components/ui/Icon.svelte.d.ts

@@ -8,6 +8,7 @@ declare const PATHS: {
     readonly trash: "M5 7h14M10 7V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2m3 0v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7m3 4v6m4-6v6";
     readonly duplicate: "M9 9h10v12H9zM5 15V3h10";
     readonly plus: "M12 5v14M5 12h14";
+    readonly calendar: "M5 6h14a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zM4 10.5h16M8.5 3.5V6M15.5 3.5V6";
     readonly 'chevron-right': "M9 5l7 7-7 7";
     readonly 'chevron-left': "M15 5l-7 7 7 7";
     readonly close: "M6 6l12 12M18 6L6 18";

package/dist/components/ui/SelectField.svelte

@@ -0,0 +1,207 @@
+<script lang="ts" module>
+	/** One option row. `value` is what the control carries: a string, always. */
+	export interface SelectOption {
+		value: string;
+		label: string;
+		disabled?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLSelectAttributes } from 'svelte/elements';
+
+	/**
+	 * A labelled `<select>` — `TextField`'s sibling for a choice out of a list.
+	 *
+	 * The package had none, so eleven call sites across the two hosts each grew
+	 * their own. That produced four spellings of ONE navy pill, a second box
+	 * skin whose corner radius was hard-coded past `--radius` because the admin
+	 * theme sets that token to `999px`, and two incompatible ways of reporting
+	 * the same refusal: the user editor wires `aria-invalid` and
+	 * `aria-describedby`, while the record field one module over announced its
+	 * rejection with a bare `role="alert()"` and left the control unmarked. A
+	 * control that cannot be rendered unwired is the point here, the way
+	 * `Field`'s snippet is.
+	 *
+	 * The value is a STRING and stays one. Both hosts had already converged on
+	 * that independently — a `<select>` binds a string, and a year, a row id or
+	 * a boolean flag becomes itself again in the one adapter that reads it — so
+	 * a value type here would fork the component per caller.
+	 */
+	interface Props {
+		label: string;
+		id: string;
+		/**
+		 * How it presents itself. Three, which is what the call sites were:
+		 *
+		 * - `field` — labelled box, the default.
+		 * - `pill` — filled navy, for a toolbar beside a heading.
+		 * - `bare` — box, label to the screen reader only, for inline chrome
+		 *   that already reads as labelled by what surrounds it.
+		 */
+		variant?: 'field' | 'pill' | 'bare';
+		/** Label beside the control rather than above it — a toolbar row. */
+		inline?: boolean;
+		value?: string;
+		required?: boolean;
+		disabled?: boolean;
+		/**
+		 * The leading option. `disabled` makes it a placeholder the reader must
+		 * choose past; without it the empty value is selectable and MEANS
+		 * something — "No manager", "every table".
+		 */
+		placeholder?: { label: string; disabled?: boolean };
+		/** Options whose labels are data. Use `children` when a label is computed. */
+		options?: readonly SelectOption[];
+		children?: Snippet;
+		error?: string | null;
+		/** Standing help. Described alongside an error rather than replaced by it. */
+		hint?: string | null;
+		/**
+		 * Beside the binding, not instead of it: the callers that need one are
+		 * coercing the string (a year to a number) or acting on the choice (a
+		 * template applied, a draft committed).
+		 */
+		onchange?: (value: string) => void;
+		/**
+		 * A remote field's `.as('select')` attachment, spread instead of bound —
+		 * the same branch `TextField` takes, so a remote form does not route
+		 * around this module and re-declare the skin.
+		 */
+		attributes?: HTMLSelectAttributes;
+		/** Native form submit: the browser posts under this name. */
+		name?: string;
+	}
+
+	let {
+		label,
+		id,
+		variant = 'field',
+		inline = false,
+		value = $bindable(''),
+		required = false,
+		disabled = false,
+		placeholder,
+		options,
+		children,
+		error = null,
+		hint = null,
+		onchange,
+		attributes,
+		name
+	}: Props = $props();
+
+	/** Both ids when both are showing: an error does not hide standing help. */
+	const describedBy = $derived(
+		[error ? `${id}-error` : null, hint ? `${id}-hint` : null].filter(Boolean).join(' ') ||
+			undefined
+	);
+
+	const shared = $derived({
+		id,
+		name,
+		required,
+		disabled,
+		'aria-invalid': error ? true : undefined,
+		'aria-describedby': describedBy
+	});
+</script>
+
+{#snippet body()}
+	{#if placeholder}
+		<option value="" disabled={placeholder.disabled}>{placeholder.label}</option>
+	{/if}
+	{#each options ?? [] as option (option.value)}
+		<option value={option.value} disabled={option.disabled}>{option.label}</option>
+	{/each}
+	{@render children?.()}
+{/snippet}
+
+<div class="select-field" class:inline class:pill={variant === 'pill'}>
+	<label for={id} class:visually-hidden={variant === 'bare'}>{label}</label>
+	{#if attributes}
+		<!-- The form owns the value and its name. -->
+		<select {...shared} {...attributes}>{@render body()}</select>
+	{:else}
+		<select {...shared} bind:value onchange={(event) => onchange?.(event.currentTarget.value)}>
+			{@render body()}
+		</select>
+	{/if}
+	{#if hint}
+		<p class="hint" id="{id}-hint">{hint}</p>
+	{/if}
+	{#if error}
+		<p class="error" id="{id}-error">{error}</p>
+	{/if}
+</div>
+
+<style>
+	.select-field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-1);
+	}
+
+	.select-field.inline {
+		flex-direction: row;
+		align-items: center;
+		gap: var(--space-2);
+	}
+
+	label {
+		font-size: var(--text-sm);
+		font-weight: 500;
+	}
+
+	select {
+		border: 1px solid var(--color-axis);
+		/* Not `--radius`: the admin theme sets that to 999px for its pill
+		   buttons, which is why both of that host's boxed selects hard-coded a
+		   corner past it. `--radius-control` is the input corner in both. */
+		border-radius: var(--radius-control);
+		background: var(--color-surface);
+		padding: 0.35rem 0.6rem;
+		font-family: var(--font-sans);
+		font-size: var(--text-base);
+		color: var(--color-ink);
+	}
+
+	select:focus-visible {
+		outline: none;
+		border-color: var(--color-navy);
+	}
+
+	select:disabled {
+		opacity: 0.5;
+	}
+
+	/* The filled toolbar control: a heading's neighbour, not a form field. It
+	   takes its content's width — a form field stretches, a pill does not. */
+	.pill select {
+		align-self: flex-start;
+		border-color: var(--color-navy);
+		border-radius: 999px;
+		background: var(--color-navy);
+		color: var(--color-surface);
+		padding: 0.3rem 0.8rem;
+		font-size: var(--text-sm);
+	}
+
+	.pill select:focus-visible {
+		outline: 2px solid var(--color-navy);
+		outline-offset: 2px;
+	}
+
+	.hint {
+		color: var(--color-ink-muted);
+		font-size: 0.8rem;
+		margin: 0;
+	}
+
+	.error {
+		color: var(--series-8);
+		font-size: 0.8rem;
+		margin: 0;
+	}
+</style>

package/dist/components/ui/SelectField.svelte.d.ts

@@ -0,0 +1,76 @@
+/** One option row. `value` is what the control carries: a string, always. */
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+/**
+ * A labelled `<select>` — `TextField`'s sibling for a choice out of a list.
+ *
+ * The package had none, so eleven call sites across the two hosts each grew
+ * their own. That produced four spellings of ONE navy pill, a second box
+ * skin whose corner radius was hard-coded past `--radius` because the admin
+ * theme sets that token to `999px`, and two incompatible ways of reporting
+ * the same refusal: the user editor wires `aria-invalid` and
+ * `aria-describedby`, while the record field one module over announced its
+ * rejection with a bare `role="alert()"` and left the control unmarked. A
+ * control that cannot be rendered unwired is the point here, the way
+ * `Field`'s snippet is.
+ *
+ * The value is a STRING and stays one. Both hosts had already converged on
+ * that independently — a `<select>` binds a string, and a year, a row id or
+ * a boolean flag becomes itself again in the one adapter that reads it — so
+ * a value type here would fork the component per caller.
+ */
+interface Props {
+    label: string;
+    id: string;
+    /**
+     * How it presents itself. Three, which is what the call sites were:
+     *
+     * - `field` — labelled box, the default.
+     * - `pill` — filled navy, for a toolbar beside a heading.
+     * - `bare` — box, label to the screen reader only, for inline chrome
+     *   that already reads as labelled by what surrounds it.
+     */
+    variant?: 'field' | 'pill' | 'bare';
+    /** Label beside the control rather than above it — a toolbar row. */
+    inline?: boolean;
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * The leading option. `disabled` makes it a placeholder the reader must
+     * choose past; without it the empty value is selectable and MEANS
+     * something — "No manager", "every table".
+     */
+    placeholder?: {
+        label: string;
+        disabled?: boolean;
+    };
+    /** Options whose labels are data. Use `children` when a label is computed. */
+    options?: readonly SelectOption[];
+    children?: Snippet;
+    error?: string | null;
+    /** Standing help. Described alongside an error rather than replaced by it. */
+    hint?: string | null;
+    /**
+     * Beside the binding, not instead of it: the callers that need one are
+     * coercing the string (a year to a number) or acting on the choice (a
+     * template applied, a draft committed).
+     */
+    onchange?: (value: string) => void;
+    /**
+     * A remote field's `.as('select')` attachment, spread instead of bound —
+     * the same branch `TextField` takes, so a remote form does not route
+     * around this module and re-declare the skin.
+     */
+    attributes?: HTMLSelectAttributes;
+    /** Native form submit: the browser posts under this name. */
+    name?: string;
+}
+declare const SelectField: import("svelte").Component<Props, {}, "value">;
+type SelectField = ReturnType<typeof SelectField>;
+export default SelectField;

package/dist/forms/index.d.ts

@@ -5,6 +5,7 @@ export { default as FormResultSlot } from '../components/ui/FormResultSlot.svelt
 export { default as Honeypot } from '../components/ui/Honeypot.svelte';
 export { default as LocaleField } from '../components/ui/LocaleField.svelte';
 export { default as NewsletterIntentField } from '../components/ui/NewsletterIntentField.svelte';
+export { default as SelectField, type SelectOption } from '../components/ui/SelectField.svelte';
 export { default as TextField } from '../components/ui/TextField.svelte';
 export { COMMENT_BODY, CONTACT_MESSAGE, CONTACT_NAME, DISPLAY_NAME, EMAIL, LOGIN_PASSWORD, PASSWORD } from './constraints.js';
 export { hasNewsletterIntent, HONEYPOT_FIELD, isNewsletterIntent, NEWSLETTER_INTENT_PARAM, NEWSLETTER_INTENT_VALUE, withNewsletterIntent } from './transport.js';

package/dist/forms/index.js

@@ -5,6 +5,7 @@ export { default as FormResultSlot } from '../components/ui/FormResultSlot.svelt
 export { default as Honeypot } from '../components/ui/Honeypot.svelte';
 export { default as LocaleField } from '../components/ui/LocaleField.svelte';
 export { default as NewsletterIntentField } from '../components/ui/NewsletterIntentField.svelte';
+export { default as SelectField } from '../components/ui/SelectField.svelte';
 export { default as TextField } from '../components/ui/TextField.svelte';
 export { COMMENT_BODY, CONTACT_MESSAGE, CONTACT_NAME, DISPLAY_NAME, EMAIL, LOGIN_PASSWORD, PASSWORD } from './constraints.js';
 export { hasNewsletterIntent, HONEYPOT_FIELD, isNewsletterIntent, NEWSLETTER_INTENT_PARAM, NEWSLETTER_INTENT_VALUE, withNewsletterIntent } from './transport.js';

package/dist/styles/base.css

@@ -40,7 +40,7 @@
  * Sizing (padding, widths) stays with the component that adds the class. */
 .control {
 	border: 1px solid var(--color-axis);
-	border-radius: var(--radius);
+	border-radius: var(--radius-control);
 	background: var(--color-surface);
 }
 

package/dist/styles/tokens.css

@@ -50,6 +50,10 @@
 
 	/* Shape & layout */
 	--radius: 8px;
+	/* The corner of an input, a select, a textarea — the `.control` skin.
+	   Separate from `--radius` because a theme that makes its buttons pills
+	   (the admin app sets `--radius: 999px`) still wants a boxed field. */
+	--radius-control: 8px;
 	--radius-lg: 16px;
 	--content-max: 1200px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vit-foundation/ui",
-	"version": "0.26.0",
+	"version": "0.27.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",