@vit-foundation/ui 0.7.0 → 0.10.0

package/dist/components/ui/TextField.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
+
+	interface Props {
+		label: string;
+		type?: 'text' | 'email' | 'password' | 'time' | 'date';
+		id: string;
+		value?: string;
+		required?: boolean;
+		autocomplete?: FullAutoFill;
+		/**
+		 * How the field presents itself. Three, which is what the call sites
+		 * always were:
+		 *
+		 * - `field` — the labelled form field, the default.
+		 * - `cell` — a table or modal cell. Smaller, and the label goes to the
+		 *   screen reader only.
+		 * - `bare` — full size, label for the screen reader only, wording
+		 *   carried by the placeholder.
+		 *
+		 * It replaces two booleans that encoded three variants between them: no
+		 * call site ever passed both, one of the four combinations meant
+		 * nothing, and the compact one quietly did THREE things.
+		 */
+		variant?: 'field' | 'cell' | 'bare';
+		/** Overrides the label-derived default ('user' rather than 'email'). */
+		placeholder?: string;
+		error?: string | null;
+		/**
+		 * A remote form field's attachment (`login.fields.email.as('email')`),
+		 * spread onto the input instead of binding — without it every remote
+		 * form routes around this module and re-declares the underline styling.
+		 */
+		attributes?: HTMLInputAttributes;
+	}
+
+	let {
+		label,
+		type = 'text',
+		id,
+		value = $bindable(''),
+		required = false,
+		autocomplete,
+		variant = 'field',
+		placeholder,
+		error = null,
+		attributes
+	}: Props = $props();
+
+	const shared = $derived({
+		id,
+		type,
+		required,
+		autocomplete,
+		placeholder: placeholder ?? (variant === 'field' ? label.toLowerCase() : undefined),
+		'aria-invalid': error ? true : undefined,
+		'aria-describedby': error ? `${id}-error` : undefined
+	});
+</script>
+
+<div class="field" class:cell={variant === 'cell'}>
+	<label for={id} class:visually-hidden={variant !== 'field'}>{label}</label>
+	{#if attributes}
+		<!-- The form owns the value and its name; `type` comes from `as(...)`. -->
+		<input {...shared} {...attributes} />
+	{:else}
+		<input {...shared} bind:value />
+	{/if}
+	{#if error}
+		<p class="error" id="{id}-error">{error}</p>
+	{/if}
+</div>
+
+<style>
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-1);
+	}
+
+	label {
+		font-size: var(--text-sm);
+		font-weight: 500;
+	}
+
+	input {
+		border: none;
+		border-bottom: 1.5px solid var(--color-brand);
+		background: transparent;
+		padding: 0.4rem 0.1rem;
+		font-family: var(--font-sans);
+		font-size: var(--text-base);
+		color: var(--color-ink);
+	}
+
+	input::placeholder {
+		font-style: italic;
+		color: var(--color-ink-muted);
+	}
+
+	input:focus-visible {
+		outline: none;
+		border-bottom-color: var(--color-navy);
+	}
+
+	.cell input {
+		font-size: 0.9rem;
+		padding: 0.2rem 0.1rem;
+	}
+
+	.error {
+		color: var(--series-8);
+		font-size: 0.8rem;
+		margin: 0;
+	}
+</style>

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

@@ -0,0 +1,36 @@
+import type { FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
+interface Props {
+    label: string;
+    type?: 'text' | 'email' | 'password' | 'time' | 'date';
+    id: string;
+    value?: string;
+    required?: boolean;
+    autocomplete?: FullAutoFill;
+    /**
+     * How the field presents itself. Three, which is what the call sites
+     * always were:
+     *
+     * - `field` — the labelled form field, the default.
+     * - `cell` — a table or modal cell. Smaller, and the label goes to the
+     *   screen reader only.
+     * - `bare` — full size, label for the screen reader only, wording
+     *   carried by the placeholder.
+     *
+     * It replaces two booleans that encoded three variants between them: no
+     * call site ever passed both, one of the four combinations meant
+     * nothing, and the compact one quietly did THREE things.
+     */
+    variant?: 'field' | 'cell' | 'bare';
+    /** Overrides the label-derived default ('user' rather than 'email'). */
+    placeholder?: string;
+    error?: string | null;
+    /**
+     * A remote form field's attachment (`login.fields.email.as('email')`),
+     * spread onto the input instead of binding — without it every remote
+     * form routes around this module and re-declares the underline styling.
+     */
+    attributes?: HTMLInputAttributes;
+}
+declare const TextField: import("svelte").Component<Props, {}, "value">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/dist/components/weeklies/SortSelect.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getUiConfig } from '../../config/context.js';
 	import type { SortDirection } from '../../content/types.js';
+	import ActionLabel from '../../edit/ActionLabel.svelte';
 
 	interface Props {
 		value: SortDirection;
@@ -18,13 +19,17 @@
 	}
 </script>
 
-<label>
-	<span>{msg.weeklies_sortLabel()}</span>
-	<select class="control" {value} onchange={handleChange}>
-		<option value="desc">{msg.weeklies_sortDesc()}</option>
-		<option value="asc">{msg.weeklies_sortAsc()}</option>
-	</select>
-</label>
+<ActionLabel edit={config.messageEdit?.('weeklies_sortLabel')} value={msg.weeklies_sortLabel()}>
+	{#snippet control()}
+		<label>
+			<span>{msg.weeklies_sortLabel()}</span>
+			<select class="control" {value} onchange={handleChange}>
+				<option value="desc">{msg.weeklies_sortDesc()}</option>
+				<option value="asc">{msg.weeklies_sortAsc()}</option>
+			</select>
+		</label>
+	{/snippet}
+</ActionLabel>
 
 <style>
 	label {

package/dist/edit/types.d.ts

@@ -15,7 +15,7 @@ export declare function localize(value: LocalizedText, locale: Locale): string;
  * The entities whose fields the components can mark editable. Names match
  * the content tables so an adapter can route a save without a mapping layer.
  */
-export type EditableEntity = 'weeklies' | 'projects' | 'milestones' | 'team_members' | 'job_openings';
+export type EditableEntity = 'weeklies' | 'projects' | 'milestones' | 'team_members' | 'job_openings' | 'themes';
 /**
  * The identity of one editable string in the content model: a page copy
  * block (`page_content` row), one localized field of a domain entity, or one

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 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';
 export type { FormFail, FormFieldIssue, FormResultLike, FormResultOf, KeyedRemoteForms, RemoteField, RemoteFormAttributes, RemoteFormInstance } from './types.js';

package/dist/forms/index.js

@@ -5,5 +5,6 @@ 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 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/index.d.ts

@@ -2,6 +2,7 @@ export * from './primitives.js';
 export * from './chrome.js';
 export * from './content-components.js';
 export * from './community.js';
+export * from './admin.js';
 export * from './forms/index.js';
 export * from './config/index.js';
 export * from './edit/index.js';

package/dist/index.js

@@ -1,10 +1,11 @@
 // The whole surface, flat — importable piecemeal through the semantic
 // subpaths: ./primitives, ./forms, ./chrome, ./content, ./community,
-// ./edit, ./config, ./testing.
+// ./edit, ./config, ./admin, ./testing.
 export * from './primitives.js';
 export * from './chrome.js';
 export * from './content-components.js';
 export * from './community.js';
+export * from './admin.js';
 // The form seam: form components, structural remote-form types, transport
 // constants, field bounds.
 export * from './forms/index.js';

package/dist/primitives.d.ts

@@ -10,7 +10,11 @@ export { default as DateText } from './components/ui/DateText.svelte';
 export { default as DecorShapes } from './components/ui/DecorShapes.svelte';
 export { default as FilterChips } from './components/ui/FilterChips.svelte';
 export { default as GhostButton } from './components/ui/GhostButton.svelte';
+export { default as Icon, type IconName } from './components/ui/Icon.svelte';
+export { default as IconButton } from './components/ui/IconButton.svelte';
 export { default as Link } from './components/ui/Link.svelte';
+export { default as Logo } from './components/ui/Logo.svelte';
+export { default as Modal } from './components/ui/Modal.svelte';
 export { default as Pagination } from './components/ui/Pagination.svelte';
 export { default as RichText } from './components/ui/RichText.svelte';
 export { default as SearchInput } from './components/ui/SearchInput.svelte';

package/dist/primitives.js

@@ -10,7 +10,11 @@ export { default as DateText } from './components/ui/DateText.svelte';
 export { default as DecorShapes } from './components/ui/DecorShapes.svelte';
 export { default as FilterChips } from './components/ui/FilterChips.svelte';
 export { default as GhostButton } from './components/ui/GhostButton.svelte';
+export { default as Icon } from './components/ui/Icon.svelte';
+export { default as IconButton } from './components/ui/IconButton.svelte';
 export { default as Link } from './components/ui/Link.svelte';
+export { default as Logo } from './components/ui/Logo.svelte';
+export { default as Modal } from './components/ui/Modal.svelte';
 export { default as Pagination } from './components/ui/Pagination.svelte';
 export { default as RichText } from './components/ui/RichText.svelte';
 export { default as SearchInput } from './components/ui/SearchInput.svelte';

package/dist/styles/tokens.css

@@ -30,6 +30,7 @@
 
 	/* Typography */
 	--font-sans: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+	--font-serif: Georgia, 'Times New Roman', serif;
 	--text-sm: 0.875rem;
 	--text-base: 1rem;
 	--text-lg: 1.25rem;
@@ -52,6 +53,12 @@
 	--radius-lg: 16px;
 	--content-max: 1200px;
 
+	/* Elevation & layering */
+	--shadow-1: 0 2px 10px rgb(16 20 24 / 10%);
+	--shadow-2: 0 12px 40px rgb(16 20 24 / 20%);
+	--z-raised: 10;
+	--z-overlay: 100;
+
 	/* Motion */
 	--transition-fast: 150ms ease;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vit-foundation/ui",
-	"version": "0.7.0",
+	"version": "0.10.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -72,6 +72,11 @@
 			"svelte": "./dist/config/index.js",
 			"default": "./dist/config/index.js"
 		},
+		"./admin": {
+			"types": "./dist/admin.d.ts",
+			"svelte": "./dist/admin.js",
+			"default": "./dist/admin.js"
+		},
 		"./testing": {
 			"types": "./dist/testing/remote-form.d.ts",
 			"svelte": "./dist/testing/remote-form.js",