@xtyle/core 0.5.0

package/dist/manifest/field.manifest.js

@@ -0,0 +1,380 @@
+const htmlExample = `<xtyle-field label="Email" name="email" type="email" placeholder="you@example.com" required></xtyle-field>
+
+<xtyle-field
+	label="Password"
+	name="password"
+	type="password"
+	description="At least 12 characters."
+	required
+></xtyle-field>
+
+<xtyle-field
+	label="Search"
+	name="q"
+	placeholder="Search…"
+	clearable
+>
+	<svg slot="prefix" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+		<path fill="currentColor" d="M10 4a6 6 0 1 0 3.5 10.9l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4Zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z" />
+	</svg>
+</xtyle-field>
+
+<xtyle-field label="Amount" name="amount" type="number" invalid error="Must be greater than zero.">
+	<span slot="prefix">$</span>
+</xtyle-field>`;
+const htmlOptionsExample = `<xtyle-field id="branch" label="Branch" name="branch" placeholder="Type to filter…"></xtyle-field>
+<script>
+	document.getElementById("branch").options = ["main", "develop", "release/1.0", "hotfix"];
+</script>`;
+const svelteOptionsExample = `<script lang="ts">
+	import { Field } from "@xtyle/svelte";
+	const branches = ["main", "develop", "release/1.0", "hotfix"];
+</script>
+
+<Field label="Branch" name="branch" placeholder="Type to filter…" options={branches} />`;
+const astroOptionsExample = `---
+import { Field } from "@xtyle/astro";
+const branches = ["main", "develop", "release/1.0", "hotfix"];
+---
+
+<Field label="Branch" name="branch" placeholder="Type to filter…" options={branches} />`;
+const svelteExample = `<script lang="ts">
+	import { Field } from "@xtyle/svelte";
+	let email = $state("");
+</script>
+
+<Field label="Email" name="email" type="email" placeholder="you@example.com" required bind:value={email} />
+
+<Field
+	label="Password"
+	name="password"
+	type="password"
+	description="At least 12 characters."
+	required
+/>
+
+<Field label="Search" name="q" placeholder="Search…" clearable>
+	{#snippet prefix()}
+		<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+			<path fill="currentColor" d="M10 4a6 6 0 1 0 3.5 10.9l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4Zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z" />
+		</svg>
+	{/snippet}
+</Field>
+
+<Field label="Amount" name="amount" type="number" invalid error="Must be greater than zero.">
+	{#snippet prefix()}<span>$</span>{/snippet}
+</Field>`;
+const astroExample = `---
+import { Field } from "@xtyle/astro";
+---
+
+<Field label="Email" name="email" type="email" placeholder="you@example.com" required />
+
+<Field
+	label="Password"
+	name="password"
+	type="password"
+	description="At least 12 characters."
+	required
+/>
+
+<Field label="Search" name="q" placeholder="Search…">
+	<svg slot="prefix" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+		<path fill="currentColor" d="M10 4a6 6 0 1 0 3.5 10.9l4.3 4.3 1.4-1.4-4.3-4.3A6 6 0 0 0 10 4Zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z" />
+	</svg>
+</Field>
+
+<Field label="Amount" name="amount" type="number" invalid error="Must be greater than zero.">
+	<span slot="prefix">$</span>
+</Field>`;
+export const fieldManifest = {
+    id: "field",
+    name: "Field",
+    category: "form",
+    summary: "A labelled text input with helper text, validation, adornments, and built-in clear and reveal actions.",
+    description: "Field is the complete single-line text input: a label, an input, a persistent description, and an error message wired together with the right accessibility relationships out of the box. The input inherits the shared `.xtyle-control` chrome and adds field-specific layout: a unified control box that holds leading and trailing adornment slots (icons, currency prefixes, unit suffixes) alongside the input. It generates a stable `id` and links it to the label, builds `aria-describedby` from both the description and the error, and ships two optional built-in actions: a clear button and a password reveal toggle. In the HTML and Svelte bindings the element is form-associated, participating in native form submission and constraint validation. Sizes (sm / md / lg) match the Button padding scale, and `readonly`, `required`, `disabled`, and `invalid` are all first-class.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "field",
+            description: "The outer column wrapper carrying the size and state modifiers.",
+            selector: ".xtyle-field",
+            tokens: ["--font-sans", "--space-1"],
+        },
+        {
+            name: "label",
+            description: "The field label, linked to the input via `for`; carries the required indicator.",
+            selector: ".xtyle-field__label",
+            tokens: ["--text-sm", "--weight-medium", "--fg-1", "--leading-normal", "--space-1"],
+        },
+        {
+            name: "control",
+            description: "The bordered box that wraps the input and its adornments; paints the focus-within ring.",
+            selector: ".xtyle-field__control",
+            tokens: ["--field-bg", "--field-border", "--border-thin", "--radius-md", "--accent", "--ring", "--border-normal"],
+        },
+        {
+            name: "input",
+            description: "The native input, styled by `.xtyle-control` with its own chrome neutralized so the control box owns the border.",
+            selector: ".xtyle-field__input",
+        },
+        {
+            name: "adornment",
+            description: "A leading (prefix) or trailing (suffix) slot for icons, currency symbols, or units.",
+            selector: ".xtyle-field__adornment",
+            tokens: ["--space-3", "--fg-2", "--text-sm", "--leading-tight"],
+        },
+        {
+            name: "description",
+            description: "Persistent helper text below the control, linked via `aria-describedby`.",
+            selector: ".xtyle-field__description",
+            tokens: ["--text-sm", "--leading-normal", "--fg-2"],
+        },
+        {
+            name: "error",
+            description: "The validation message shown when invalid, linked via `aria-describedby`.",
+            selector: ".xtyle-field__error",
+            tokens: ["--text-sm", "--leading-normal", "--danger"],
+        },
+    ],
+    props: [
+        {
+            name: "label",
+            type: "string",
+            description: "The visible label text, linked to the input. When omitted, falls back to an `aria-label` from the placeholder.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "name",
+            type: "string",
+            description: "The form field name. Drives form submission and the form-associated value.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "value",
+            type: "string",
+            default: "",
+            description: "The input value. Two-way bindable in Svelte (`bind:value`).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "type",
+            type: "string",
+            default: "text",
+            description: "The native input type (text, email, password, number, …). `password` enables the reveal toggle.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "placeholder",
+            type: "string",
+            description: "Placeholder text shown when empty.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Control size; matches the Button padding scale.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "description",
+            type: "string",
+            description: "Persistent helper text below the control, linked via `aria-describedby`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "error",
+            type: "string",
+            description: "Validation message; shown (and linked via `aria-describedby`) only while `invalid`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "invalid",
+            type: "boolean",
+            default: "false",
+            description: "Marks the field invalid: danger border, error message, `aria-invalid`, and a custom validity in form-associated mode.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "required",
+            type: "boolean",
+            default: "false",
+            description: "Marks the field required: a `*` indicator, `required` + `aria-required`, and a valueMissing validity.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "readonly",
+            type: "boolean",
+            default: "false",
+            description: "Renders the input read-only with a muted background; the value still submits.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            default: "false",
+            description: "Disables the input and dims the field.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "clearable",
+            type: "boolean",
+            default: "false",
+            description: "Shows a built-in clear button when the field has a value. (html / svelte: needs JS.)",
+            bindings: ["html", "svelte"],
+        },
+        {
+            name: "options",
+            type: "string[] | { value: string; label?: string }[]",
+            description: "Type-ahead suggestions. Field renders them into a `<datalist>` it owns inside the input's own root and wires the input's `list` to it, so suggestions work even though the input lives in a shadow root (where a page-level `<datalist>` could never reach it). Set the JS property in html / svelte; the Astro binding takes a JSON array attribute. Needs the runtime. (html / svelte / astro on hydrate.)",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "mono",
+            type: "boolean",
+            default: "false",
+            description: "Renders the input in the monospace stack (`--font-mono`) for code-shaped values: identifiers, paths, hex colors, expressions, env values. A presentational swap on an existing token, so it bakes into the zero-JS Astro markup too.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "default",
+            description: "The standard field: neutral border, accent focus ring.",
+            className: "xtyle-field",
+            tokens: ["--field-border", "--accent"],
+        },
+        {
+            name: "invalid",
+            description: "Error treatment: danger border, a danger-tinted focus ring, and the error message shown.",
+            className: "xtyle-field--invalid",
+            tokens: ["--danger", "--danger-bg"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact.", className: "xtyle-field--sm" },
+        { name: "md", description: "Default.", className: "xtyle-field", isDefault: true },
+        { name: "lg", description: "Large.", className: "xtyle-field--lg" },
+    ],
+    states: [
+        {
+            name: "focus-visible",
+            description: "Keyboard focus inside the control: accent border and a token-colored ring via `:focus-within`.",
+            selector: ".xtyle-field__control:focus-within",
+            tokens: ["--accent", "--ring", "--border-normal"],
+        },
+        {
+            name: "invalid",
+            description: "Invalid: danger border; the focus-within ring shifts to a danger tint.",
+            selector: ".xtyle-field--invalid .xtyle-field__control",
+            tokens: ["--danger", "--danger-bg"],
+        },
+        {
+            name: "disabled",
+            description: "Non-interactive: muted ink and a disabled-tinted control.",
+            selector: ".xtyle-field--disabled .xtyle-field__control",
+            tokens: ["--fg-disabled", "--state-disabled"],
+        },
+        {
+            name: "readonly",
+            description: "Read-only: a subtly recessed background; the value still submits.",
+            selector: ".xtyle-field--readonly .xtyle-field__control",
+            tokens: ["--bg-1"],
+        },
+        {
+            name: "required",
+            description: "Required: a danger-colored `*` indicator on the label.",
+            selector: ".xtyle-field__required",
+            tokens: ["--danger", "--weight-semibold"],
+        },
+    ],
+    slots: [
+        {
+            name: "prefix",
+            description: "A leading adornment: icon, currency symbol, or unit.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "suffix",
+            description: "A trailing adornment: icon, unit, or status marker.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "clear-icon",
+            description: "Overrides the built-in clear-button glyph.",
+            bindings: ["html"],
+        },
+        {
+            name: "reveal-icon",
+            description: "Overrides the built-in password-reveal glyph.",
+            bindings: ["html"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--font-mono",
+        "--text-sm",
+        "--text-lg",
+        "--weight-medium",
+        "--weight-semibold",
+        "--leading-normal",
+        "--leading-tight",
+        "--border-thin",
+        "--border-normal",
+        "--radius-md",
+        "--radius-sm",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--duration-fast",
+        "--ease-standard",
+        "--ring",
+        "--state-hover",
+        "--state-press",
+        "--state-disabled",
+        "--fg-0",
+        "--fg-1",
+        "--fg-2",
+        "--fg-disabled",
+        "--field-bg",
+        "--field-border",
+        "--bg-1",
+        "--accent",
+        "--danger",
+        "--danger-text",
+        "--danger-bg",
+    ],
+    composition: [
+        "Pair with Button (`type=\"submit\"`) inside a native `<form>`; the form-associated element submits its value by `name`.",
+        "Use the `prefix` / `suffix` slots with any inline SVG or text node; they'll take an Icon component directly when one ships.",
+        "The clear button and password reveal are JS-driven, so they appear in the html and svelte bindings; the Astro binding is zero-JS and omits them.",
+        "For type-ahead, pass `options` rather than a hand-authored `<datalist>`; a page-level datalist can't reach the input across the shadow boundary, so Field owns the list itself.",
+        "Native input attributes (`spellcheck`, `inputmode`, `autocomplete`, `autocapitalize`, `autocorrect`, `enterkeyhint`) set on the host are forwarded to the inner input, so `spellcheck=\"false\"` on a code field works without reaching through `::part`.",
+    ],
+    a11y: [
+        "Always generates a stable input `id` and links the label with `for`, so clicking the label focuses the input.",
+        "`aria-describedby` is built from both the description and the error, so assistive tech announces helper text and validation together.",
+        "`invalid` sets `aria-invalid`; `required` sets `aria-required` and a non-color `*` indicator so requirement is not conveyed by color alone.",
+        "When no label is given, the placeholder (or an explicit `aria-label`) becomes the accessible name; the binding warns when none of the three is present.",
+        "Focus is shown on the control via `:focus-within` with a token ring plus the transparent-outline pattern that forced-colors mode promotes to a real outline.",
+        "Form-associated (html / svelte): participates in native submission and constraint validation via `setFormValue` and `setValidity`.",
+    ],
+    examples: [
+        {
+            id: "labels-validation-adornments",
+            title: "Labels, validation, and adornments",
+            description: "A required email, a password with helper text, a clearable search with a leading icon, and an invalid amount with a currency prefix.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "type-ahead",
+            title: "Type-ahead suggestions",
+            description: "Pass `options` and Field renders a `<datalist>` in the input's own root, so suggestions work across the shadow boundary where a page-level datalist can't reach.",
+            source: { html: htmlOptionsExample, svelte: svelteOptionsExample, astro: astroOptionsExample },
+        },
+    ],
+};
+//# sourceMappingURL=field.manifest.js.map

package/dist/manifest/field.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.manifest.js","sourceRoot":"","sources":["../../src/manifest/field.manifest.ts"],"names":[],"mappings":"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"}

package/dist/manifest/form-group.manifest.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from "./types.js";
+export declare const formGroupManifest: ComponentManifest;
+//# sourceMappingURL=form-group.manifest.d.ts.map

package/dist/manifest/form-group.manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-group.manifest.d.ts","sourceRoot":"","sources":["../../src/manifest/form-group.manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAmDpD,eAAO,MAAM,iBAAiB,EAAE,iBA2K/B,CAAC"}

package/dist/manifest/form-group.manifest.js

@@ -0,0 +1,218 @@
+const htmlExample = `<xtyle-form-group label="Theme" description="Applies across the whole workspace." for="theme">
+	<xtyle-select id="theme" name="theme">
+		<option value="auto">Match system</option>
+		<option value="light">Light</option>
+		<option value="dark">Dark</option>
+	</xtyle-select>
+</xtyle-form-group>
+
+<xtyle-form-group label="Bio" description="A short line shown on your profile.">
+	<textarea rows="3"></textarea>
+</xtyle-form-group>
+
+<xtyle-form-group label="Email" required invalid error="That address is already in use." for="email">
+	<input type="email" id="email" name="email" />
+</xtyle-form-group>`;
+const svelteExample = `<script lang="ts">
+	import { FormGroup, Select } from "@xtyle/svelte";
+	let theme = $state("auto");
+</script>
+
+<FormGroup label="Theme" description="Applies across the whole workspace." for="theme">
+	<Select id="theme" name="theme" bind:value={theme}>
+		<option value="auto">Match system</option>
+		<option value="light">Light</option>
+		<option value="dark">Dark</option>
+	</Select>
+</FormGroup>
+
+<FormGroup label="Email" required invalid error="That address is already in use." for="email">
+	<input type="email" id="email" name="email" />
+</FormGroup>`;
+const astroExample = `---
+import { FormGroup, Select } from "@xtyle/astro";
+---
+
+<FormGroup label="Theme" description="Applies across the whole workspace." for="theme">
+	<Select id="theme" name="theme">
+		<option value="auto">Match system</option>
+		<option value="light">Light</option>
+		<option value="dark">Dark</option>
+	</Select>
+</FormGroup>
+
+<FormGroup label="Email" required invalid error="That address is already in use." for="email">
+	<input type="email" id="email" name="email" />
+</FormGroup>`;
+export const formGroupManifest = {
+    id: "form-group",
+    name: "FormGroup",
+    category: "form",
+    summary: "A label / description / error scaffold that wraps any slotted control and wires the accessibility plumbing.",
+    description: "FormGroup is the presentational scaffolding around a form control you bring yourself: a Select, Textarea, Checkbox, Radio, or a bare native input. It renders the `label`, an optional `description`, and an `error` region, and wires the accessibility plumbing: it associates the label with the slotted control, builds `aria-describedby` from whichever of the description and error are showing, and reflects `invalid` / `required` onto the control as `aria-invalid` / `aria-required`. Unlike Field, it owns no input of its own; it is the reusable wrapper that gives every other control the same labelled, described, error-aware shell. Two variants (default, invalid) and the shared three-step size scale keep it in lockstep with the rest of the form family.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "group",
+            description: "The vertical stack wrapping the label, description, control, and error.",
+            selector: ".xtyle-form-group",
+            tokens: ["--font-sans", "--space-1"],
+        },
+        {
+            name: "label",
+            description: "The control's label, associated with the slotted control via `for` / `aria-labelledby`.",
+            selector: ".xtyle-form-group__label",
+            tokens: ["--text-sm", "--weight-medium", "--fg-1", "--leading-normal", "--space-1"],
+        },
+        {
+            name: "required-indicator",
+            description: "The asterisk appended to the label when the group is required.",
+            selector: ".xtyle-form-group__required",
+            tokens: ["--danger", "--weight-semibold"],
+        },
+        {
+            name: "description",
+            description: "Optional helper text below the label, referenced by the control's `aria-describedby`.",
+            selector: ".xtyle-form-group__description",
+            tokens: ["--text-sm", "--leading-normal", "--fg-2"],
+        },
+        {
+            name: "control",
+            description: "The slot region that holds whatever control the author drops in.",
+            selector: ".xtyle-form-group__control",
+            tokens: ["--space-1"],
+        },
+        {
+            name: "error",
+            description: "The validation message shown when invalid, also referenced by `aria-describedby`.",
+            selector: ".xtyle-form-group__error",
+            tokens: ["--text-sm", "--leading-normal", "--danger", "--space-1"],
+        },
+    ],
+    props: [
+        {
+            name: "label",
+            type: "string",
+            description: "The control's label. When absent, the binding warns and falls back to labelling the control via `aria-labelledby`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "description",
+            type: "string",
+            description: "Helper text rendered below the label and linked into the control's `aria-describedby`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "error",
+            type: "string",
+            description: "Validation message shown only while `invalid`; linked into the control's `aria-describedby`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Tightens or relaxes the stack spacing and label / helper text size.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "invalid",
+            type: "boolean",
+            default: "false",
+            description: "Marks the group invalid: reveals the error, tints the label, and sets `aria-invalid` on the control.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "required",
+            type: "boolean",
+            default: "false",
+            description: "Appends the required indicator and sets `aria-required` on the control.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "for",
+            type: "string",
+            description: "The id of the slotted control to associate. When omitted, the group assigns the control an id automatically.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "default",
+            description: "The resting scaffold: label, optional description, control, no error.",
+            className: "xtyle-form-group",
+        },
+        {
+            name: "invalid",
+            description: "The error message is shown, the label takes the danger ink, and the control is marked `aria-invalid`.",
+            className: "xtyle-form-group--invalid",
+            tokens: ["--danger-text", "--danger"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact stack and smaller helper text.", className: "xtyle-form-group--sm" },
+        { name: "md", description: "Default.", className: "xtyle-form-group", isDefault: true },
+        { name: "lg", description: "Roomier stack and larger helper text.", className: "xtyle-form-group--lg" },
+    ],
+    states: [
+        {
+            name: "invalid",
+            description: "Error region revealed, label tinted danger, control flagged `aria-invalid`.",
+            selector: ".xtyle-form-group--invalid",
+            tokens: ["--danger-text"],
+        },
+        {
+            name: "required",
+            description: "Required indicator appended to the label, control flagged `aria-required`.",
+            selector: ".xtyle-form-group__required",
+            tokens: ["--danger", "--weight-semibold"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The form control to scaffold: a Select, Textarea, Checkbox, Radio, or native input.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-body",
+        "--text-sm",
+        "--text-xs",
+        "--weight-medium",
+        "--weight-semibold",
+        "--leading-normal",
+        "--space-0",
+        "--space-1",
+        "--space-2",
+        "--fg-1",
+        "--fg-2",
+        "--danger",
+        "--danger-text",
+    ],
+    composition: [
+        "Wrap a Select, Textarea, Checkbox, or Radio to give it the same labelled, described, error-aware shell; FormGroup owns no input itself.",
+        "For a single-line text input that wants prefix/suffix adornments and a clear button, reach for Field instead; FormGroup is the generic wrapper for everything else.",
+        "Pass `for` with the slotted control's id for explicit wiring, or omit it and let the group assign an id automatically.",
+        "Drive `invalid` / `error` from your form library's per-field validation state.",
+    ],
+    a11y: [
+        "Associates the rendered `<label>` with the slotted control via `for` (or `aria-labelledby` when the control has no id of its own).",
+        "Builds the control's `aria-describedby` from whichever of the description and error are currently showing.",
+        "Reflects `invalid` as `aria-invalid` and `required` as `aria-required` onto the slotted control.",
+        "The error region is an `role=\"alert\"` live region so a newly-shown validation message is announced.",
+        "Warns at runtime when no `label` is provided, since the slotted control may then lack an accessible name.",
+        "Purely presentational chrome; all semantics live on the native control you slot in, never on the wrapper.",
+    ],
+    examples: [
+        {
+            id: "scaffolding-controls",
+            title: "Scaffolding controls",
+            description: "FormGroup wraps a Select, a textarea, and a native input, labelling, describing, and error-wiring each.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=form-group.manifest.js.map

package/dist/manifest/form-group.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-group.manifest.js","sourceRoot":"","sources":["../../src/manifest/form-group.manifest.ts"],"names":[],"mappings":"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"}

package/dist/manifest/grid.manifest.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from "./types.js";
+export declare const gridManifest: ComponentManifest;
+//# sourceMappingURL=grid.manifest.d.ts.map

package/dist/manifest/grid.manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.manifest.d.ts","sourceRoot":"","sources":["../../src/manifest/grid.manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA0DpD,eAAO,MAAM,YAAY,EAAE,iBAwF1B,CAAC"}