@krigsvold/react 0.0.0-stage → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @krigsvold/react changelog
+
+## 0.2.0 — unpublished transfer candidate
+
+Prepared standalone source, exact core dependency and independent build. This is not an approved release. Existing version 0.1.0 is published; the historical heading below records its earlier preparation state.
+
+## 0.1.0 — experimental candidate, unpublished
+
+Initial 22-component React 19 API with native form controls, modal dialog, manual-activation tabs, article compositions, table and pagination. Includes family CSS, TypeScript declarations and MIT source.
+
+Behavior and keyboard regression checks cover both families. Manual screen-reader review, RTL/localization and sustained consumer evidence remain open. See docs/components.md and docs/release-policy.md in the source repository. No prior React version requires migration.
+
+- Add explicit AppShell navigation placement, navigation label, and header color-mode composition; preserve existing defaults.
+- Add native family reference, application grammar, collection/editor consumer, and independently usable MCP/skill tooling in the workbench.
+
+- Reconcile source type, control, table, quote and index roles; remove unsupported shell/title ornament and built-in colophon. Keep published theme 2.1.0 unchanged.
+- Add TableOfContents depth and index/inline variants; separate article contents from supporting context; add DefinitionList rows/stack/grid layout choices in both families.
+- Correct invalid styling to require aria-invalid=true; preserve native control and recovery behavior.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 James P. Howard, II
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE.md

@@ -0,0 +1,7 @@
+# Third-party notices
+
+The workbench source, specifications, and React component source are copyright 2026 James P. Howard, II and distributed under MIT. Dependencies retain their own licenses and notices.
+
+The React packages consume the separately distributed @martlet/theme and @krigsvold/theme packages. Local font files come through their Fontsource dependencies. Installed metadata identifies Cambo, Cinzel, Lato, IBM Plex Mono, Roboto, and Roboto Mono as OFL-1.1, and Roboto Slab as Apache-2.0. Preserve the font packages' included copyright and license files when redistributing them. No proprietary font is bundled or required.
+
+React and React DOM retain their upstream MIT licenses. Build/test tools retain their own licenses. See each installed dependency's package and license files for the complete notices. No external UI-block code or commercial component catalogue is included.

package/README.md

@@ -1,3 +1,17 @@
-# Temporary Holding Version
+# Krigsvold React (experimental)
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+This independent repository contains the experimental `@krigsvold/react` component implementation. Existing npm releases remain available. Standalone staging is prepared in the reviewed `stage-release.yml` workflow and `react-production-release` environment; npm trust and publication authority must be verified during the coordinated workbench cutover.
+
+## Development
+
+Use Node 24: `npm ci --ignore-scripts`, then `npm test`. `npm pack --ignore-scripts` creates a local candidate archive. The public repository keeps `private:true` in its manifest to prevent accidental publication; the reviewed staging workflow creates a publishable manifest only in an isolated export.
+
+The exact published `@krigsvold/core` dependency supplies styles. Import `@krigsvold/react/styles.css`; load `@krigsvold/core/fonts.css` separately if desired. The public component API is experimental. Refer to [the historical component contracts](https://github.com/k3jph/design-workbench/blob/80a5635abe4de7a07a1983de0b3ef796b101e047/docs/components.md) for behavior and acceptance criteria.
+
+The independent reference catalog contains all 50 canonical recipes, three dashboards and the scientific workspace. Browser verification covers Chromium, Firefox and WebKit at root and `/preview/`. `npm run build:gallery` builds the static site in `examples/react-catalog/dist/krigsvold`; use the examples index at `/examples/`. `docs-delivery.json` explicitly disables the advanced remote archive pathway until live Worker isolation and independent anti-rollback authority are verified. The ordinary static documentation build is the production delivery path; it makes no administrator-immutable archive claim. Automated checks do not replace manual assistive-technology assessment. See PROVENANCE.md for the source baseline and ownership transition.
+
+Build a complete deployment from a clean committed checkout with `npm run build:reference -- /fresh/output/path`. This assembles root and `/preview` catalogs plus checksum-verified static `/docs/v/0.2.0/` snapshots using the existing documentation implementation. `version.json` records the exact source, Core integrity and explicitly disabled advanced archive mode. The output is static-only and needs no storage credentials or Worker bindings beyond assets.
+
+After npm stage approval, independently verify the exact registry archive and `npm audit signatures --json --include-attestations` output with `RELEASE_TAG=v0.2.0 APPROVED_SHA=<reviewed-main-sha> node scripts/tag-release-cli.mjs verify-stage-provenance <audit.json> <archive.tgz>`. This operation pins the standalone staging workflow, `main`, dispatch event and reviewed commit; the disabled tag workflow is a different identity.
+
+Reproduce publishable archives with npm 11.15.0: export the exact reviewed source with `git archive`, set only the exported manifest to `private:false`, install and build in that isolated export, run `node scripts/normalize-package-modes.mjs .` there, then `npm pack --ignore-scripts`. All published regular files use mode 0644 and directories 0755; the normalizer refuses a Git working tree, executable-bin package or symlink payload.

package/dist/index.d.ts

@@ -0,0 +1,123 @@
+import { type ReactNode, type ComponentPropsWithRef } from "react";
+export declare function Button({ variant, className, type, ...props }: ComponentPropsWithRef<"button"> & {
+    variant?: "primary" | "secondary" | "quiet";
+}): import("react").JSX.Element;
+export declare function TextInput({ className, ...props }: ComponentPropsWithRef<"input">): import("react").JSX.Element;
+export declare function Select({ className, ...props }: ComponentPropsWithRef<"select">): import("react").JSX.Element;
+export declare function Textarea({ className, ...props }: ComponentPropsWithRef<"textarea">): import("react").JSX.Element;
+export type FieldControl = {
+    id: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: true;
+};
+export declare function Field({ id: providedId, label, hint, error, hintId: providedHintId, errorId: providedErrorId, children, }: {
+    id?: string;
+    label: string;
+    hint?: string;
+    error?: string;
+    hintId?: string;
+    errorId?: string;
+    children: (props: FieldControl) => ReactNode;
+}): import("react").JSX.Element;
+export declare function Notice({ kind, children, }: {
+    kind?: "info" | "success" | "error";
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Badge({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function DataTable({ caption, children, className, ...props }: ComponentPropsWithRef<"table"> & {
+    caption: string;
+}): import("react").JSX.Element;
+export declare function AppShell({ brand, navigationLabel, navigationPlacement, headerMode, navigation, utilities, children, }: {
+    brand: ReactNode;
+    navigationLabel?: string;
+    navigationPlacement?: "default" | "top" | "side" | "none";
+    headerMode?: "light" | "dark";
+    navigation: ReactNode;
+    utilities: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Dialog({ open, title, onDismiss, children, }: {
+    open: boolean;
+    title: string;
+    onDismiss: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Checkbox({ label, id, className, ...props }: Omit<ComponentPropsWithRef<"input">, "type"> & {
+    label: ReactNode;
+}): import("react").JSX.Element;
+export declare function Fieldset({ legend, hint, error, children, className, ...props }: ComponentPropsWithRef<"fieldset"> & {
+    legend: ReactNode;
+    hint?: string;
+    error?: string;
+}): import("react").JSX.Element;
+export declare function Disclosure({ summary, children, className, ...props }: Omit<ComponentPropsWithRef<"details">, "children"> & {
+    summary: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export type SummaryError = {
+    message: string;
+    targetId?: string;
+};
+export declare function ErrorSummary({ title, errors, children, className, ...props }: Omit<ComponentPropsWithRef<"div">, "title"> & {
+    title: ReactNode;
+    errors?: SummaryError[];
+}): import("react").JSX.Element;
+export type ContentsItem = {
+    id: string;
+    label: ReactNode;
+    depth?: 2 | 3;
+};
+export declare function TableOfContents({ items, label, variant, className, ...props }: Omit<ComponentPropsWithRef<"nav">, "children"> & {
+    items: readonly ContentsItem[];
+    label?: string;
+    variant?: "index" | "inline";
+}): import("react").JSX.Element;
+export declare function Article({ title, titleLevel, eyebrow, summary, metadata, contents, aside, contextLabel, footer, children, className, ...props }: Omit<ComponentPropsWithRef<"article">, "title"> & {
+    title: ReactNode;
+    titleLevel?: 1 | 2;
+    eyebrow?: ReactNode;
+    summary?: ReactNode;
+    metadata?: ReactNode;
+    contents?: ReactNode;
+    aside?: ReactNode;
+    contextLabel?: string;
+    footer?: ReactNode;
+}): import("react").JSX.Element;
+export declare function FileInput({ className, ...props }: Omit<ComponentPropsWithRef<"input">, "type" | "value" | "defaultValue">): import("react").JSX.Element;
+export declare function Radio({ label, id, className, ...props }: Omit<ComponentPropsWithRef<"input">, "type"> & {
+    label: ReactNode;
+}): import("react").JSX.Element;
+export declare function Pagination({ page, pageCount, onPageChange, disabled, label, className, ...props }: Omit<ComponentPropsWithRef<"nav">, "children"> & {
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    disabled?: boolean;
+    label?: string;
+}): import("react").JSX.Element;
+export type DefinitionItem = {
+    id: string;
+    term: ReactNode;
+    description: ReactNode;
+};
+export declare function DefinitionList({ items, layout, className, ...props }: Omit<ComponentPropsWithRef<"dl">, "children"> & {
+    items: readonly DefinitionItem[];
+    layout?: "rows" | "stack" | "grid";
+}): import("react").JSX.Element;
+export declare function Switch({ label, id, className, ...props }: Omit<ComponentPropsWithRef<"input">, "type" | "role"> & {
+    label: ReactNode;
+}): import("react").JSX.Element;
+export type TabItem = {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+};
+export declare function Tabs({ items, value, onValueChange, label, orientation, className, ...props }: Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> & {
+    items: readonly TabItem[];
+    value: string;
+    onValueChange: (id: string) => void;
+    label: string;
+    orientation?: "horizontal" | "vertical";
+}): import("react").JSX.Element;

package/dist/index.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useId, useRef, useState, } from "react";
+export function Button({ variant = "primary", className = "", type = "button", ...props }) {
+    return (_jsx("button", { type: type, className: `krigsvold-button krigsvold-button--${variant} ${className}`, ...props }));
+}
+export function TextInput({ className = "", ...props }) {
+    return _jsx("input", { className: `krigsvold-input ${className}`, ...props });
+}
+export function Select({ className = "", ...props }) {
+    return _jsx("select", { className: `krigsvold-input ${className}`, ...props });
+}
+export function Textarea({ className = "", ...props }) {
+    return _jsx("textarea", { className: `krigsvold-input ${className}`, ...props });
+}
+export function Field({ id: providedId, label, hint, error, hintId: providedHintId, errorId: providedErrorId, children, }) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    // Description IDs belong to this Field, independent of a caller-supplied control ID.
+    const hintId = providedHintId ?? `${generatedId}-hint`;
+    const errorId = providedErrorId ?? `${generatedId}-error`;
+    const descriptions = [hint && hintId, error && errorId].filter(Boolean).join(" ") || undefined;
+    return (_jsxs("div", { className: "krigsvold-field", children: [_jsx("label", { htmlFor: id, children: label }), children({
+                id,
+                "aria-describedby": descriptions,
+                "aria-invalid": error ? true : undefined,
+            }), hint && (_jsx("p", { id: hintId, className: "krigsvold-hint", children: hint })), error && (_jsx("p", { id: errorId, className: "krigsvold-error", children: error }))] }));
+}
+export function Notice({ kind = "info", children, }) {
+    return (_jsx("div", { className: `krigsvold-notice krigsvold-notice--${kind}`, role: kind === "error" ? "alert" : "status", children: children }));
+}
+export function Badge({ children }) {
+    return _jsx("span", { className: "krigsvold-badge", children: children });
+}
+export function DataTable({ caption, children, className = "", ...props }) {
+    return (_jsx("div", { className: "krigsvold-table-scroll", role: "region", "aria-label": caption, tabIndex: 0, children: _jsxs("table", { className: `krigsvold-table ${className}`, ...props, children: [_jsx("caption", { children: caption }), children] }) }));
+}
+export function AppShell({ brand, navigationLabel = "Workbench", navigationPlacement = "default", headerMode, navigation, utilities, children, }) {
+    return (_jsxs("div", { className: "krigsvold-app", "data-navigation": navigationPlacement, children: [_jsx("a", { className: "krigsvold-skip", href: "#main", children: "Skip to content" }), _jsxs("header", { className: "krigsvold-app-header", "data-krigsvold": headerMode, children: [_jsx("div", { className: "krigsvold-app-brand", children: brand }), navigationPlacement !== "none" && (_jsx("nav", { "aria-label": navigationLabel, children: navigation })), _jsx("div", { className: "krigsvold-app-utilities", children: utilities })] }), _jsx("main", { id: "main", tabIndex: -1, children: children })] }));
+}
+export function Dialog({ open, title, onDismiss, children, }) {
+    const ref = useRef(null);
+    const suppressedCloseEvents = useRef(0);
+    const id = useId();
+    useLayoutEffect(() => {
+        const dialog = ref.current;
+        if (!dialog)
+            return;
+        if (open && !dialog.open)
+            dialog.showModal();
+        if (!open && dialog.open) {
+            // The close event is queued; distinguish prop-driven closes from native ones.
+            suppressedCloseEvents.current += 1;
+            dialog.close();
+        }
+    }, [open]);
+    return (_jsxs("dialog", { className: "krigsvold-dialog", ref: ref, "aria-labelledby": id, onClose: () => {
+            if (suppressedCloseEvents.current > 0) {
+                suppressedCloseEvents.current -= 1;
+            }
+            else if (open && !ref.current?.open) {
+                onDismiss();
+            }
+        }, onCancel: (event) => {
+            event.preventDefault();
+            onDismiss();
+        }, children: [_jsx("h2", { id: id, children: title }), children] }));
+}
+export function Checkbox({ label, id, className = "", ...props }) {
+    const generatedId = useId();
+    const controlId = id ?? generatedId;
+    return (_jsxs("label", { className: `krigsvold-checkbox ${className}`, htmlFor: controlId, children: [_jsx("input", { ...props, id: controlId, type: "checkbox" }), label] }));
+}
+export function Fieldset({ legend, hint, error, children, className = "", ...props }) {
+    const id = useId();
+    const describedBy = [props["aria-describedby"], hint && `${id}-hint`, error && `${id}-error`]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    return (_jsxs("fieldset", { ...props, className: `krigsvold-fieldset ${className}`, "aria-describedby": describedBy, "aria-invalid": error ? true : props["aria-invalid"], children: [_jsx("legend", { children: legend }), hint && (_jsx("p", { id: `${id}-hint`, className: "krigsvold-hint", children: hint })), children, error && (_jsx("p", { id: `${id}-error`, className: "krigsvold-error", children: error }))] }));
+}
+export function Disclosure({ summary, children, className = "", ...props }) {
+    return (_jsxs("details", { ...props, className: `krigsvold-disclosure ${className}`, children: [_jsx("summary", { children: summary }), children] }));
+}
+export function ErrorSummary({ title, errors = [], children, className = "", ...props }) {
+    const titleId = useId();
+    return (_jsxs("div", { ...props, tabIndex: -1, role: "alert", "aria-labelledby": titleId, className: `krigsvold-error-summary ${className}`, children: [_jsx("strong", { id: titleId, children: title }), errors.length > 0 && (_jsx("ul", { children: errors.map((error, index) => (_jsx("li", { children: error.targetId ? (_jsx("a", { href: `#${error.targetId}`, onClick: (event) => {
+                            if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+                                return;
+                            const owner = event.currentTarget.ownerDocument;
+                            const target = owner.getElementById(error.targetId);
+                            if (target) {
+                                target.focus();
+                                // If focus cannot move, retain the link's native fragment navigation.
+                                if (owner.activeElement === target)
+                                    event.preventDefault();
+                            }
+                        }, children: error.message })) : (error.message) }, index))) })), children] }));
+}
+export function TableOfContents({ items, label = "On this page", variant = "index", className = "", ...props }) {
+    return (_jsxs("nav", { ...props, "aria-label": label, className: `krigsvold-contents ${className}`, "data-variant": variant, children: [_jsx("strong", { children: label }), _jsx("ul", { children: items.map((item) => (_jsx("li", { "data-depth": item.depth ?? 2, children: _jsx("a", { href: `#${encodeURIComponent(item.id)}`, children: item.label }) }, item.id))) })] }));
+}
+export function Article({ title, titleLevel = 1, eyebrow, summary, metadata, contents, aside, contextLabel = "Article context", footer, children, className = "", ...props }) {
+    const titleId = useId();
+    const Heading = titleLevel === 1 ? "h1" : "h2";
+    return (_jsxs("article", { ...props, "aria-labelledby": titleId, className: `krigsvold-article ${className}`, children: [_jsxs("header", { className: "krigsvold-article-header", children: [eyebrow && _jsx("p", { className: "krigsvold-article-eyebrow", children: eyebrow }), _jsx(Heading, { id: titleId, children: title }), summary && _jsx("p", { className: "krigsvold-article-summary", children: summary }), metadata && (_jsx("div", { className: "krigsvold-article-metadata", children: metadata }))] }), _jsxs("div", { className: "krigsvold-article-layout", "data-contents": !!contents, children: [contents && _jsx("div", { className: "krigsvold-article-context", children: contents }), _jsxs("div", { className: "krigsvold-prose", children: [children, aside && _jsx("aside", { className: "krigsvold-article-support", "aria-label": contextLabel, children: aside })] })] }), footer && _jsx("footer", { className: "krigsvold-article-footer", children: footer })] }));
+}
+export function FileInput({ className = "", ...props }) {
+    return (_jsx("input", { ...props, type: "file", className: `krigsvold-file-input ${className}` }));
+}
+export function Radio({ label, id, className = "", ...props }) {
+    const generatedId = useId();
+    const controlId = id ?? generatedId;
+    return (_jsxs("label", { className: `krigsvold-radio ${className}`, htmlFor: controlId, children: [_jsx("input", { ...props, id: controlId, type: "radio" }), label] }));
+}
+export function Pagination({ page, pageCount, onPageChange, disabled = false, label = "Pagination", className = "", ...props }) {
+    const count = Number.isFinite(pageCount)
+        ? Math.max(1, Math.trunc(pageCount))
+        : 1;
+    const current = Number.isFinite(page)
+        ? Math.min(count, Math.max(1, Math.trunc(page)))
+        : 1;
+    const previousRef = useRef(null);
+    const nextRef = useRef(null);
+    const focusedControl = useRef(null);
+    useLayoutEffect(() => {
+        if (disabled || count === 1) {
+            focusedControl.current = null;
+            return;
+        }
+        const owner = previousRef.current?.ownerDocument;
+        if (!owner)
+            return;
+        const active = owner.activeElement;
+        if (active !== owner.body && active !== previousRef.current && active !== nextRef.current) {
+            focusedControl.current = null;
+            return;
+        }
+        if (focusedControl.current === "next" && current === count && current > 1)
+            previousRef.current?.focus();
+        else if (focusedControl.current === "previous" && current === 1 && count > 1)
+            nextRef.current?.focus();
+    }, [current, count, disabled]);
+    return (_jsxs("nav", { ...props, "aria-label": label, className: `krigsvold-pagination ${className}`, children: [_jsx(Button, { ref: previousRef, onFocus: () => { focusedControl.current = "previous"; }, onBlur: (event) => { if (!event.currentTarget.disabled)
+                    focusedControl.current = null; }, variant: "secondary", disabled: disabled || current === 1, onClick: () => onPageChange(current - 1), children: "Previous page" }), _jsxs("p", { "aria-live": "polite", "aria-atomic": "true", children: ["Page ", current, " of ", count] }), _jsx(Button, { ref: nextRef, onFocus: () => { focusedControl.current = "next"; }, onBlur: (event) => { if (!event.currentTarget.disabled)
+                    focusedControl.current = null; }, variant: "secondary", disabled: disabled || current === count, onClick: () => onPageChange(current + 1), children: "Next page" })] }));
+}
+export function DefinitionList({ items, layout = "rows", className = "", ...props }) {
+    return (_jsx("dl", { ...props, className: `krigsvold-definitions ${className}`, "data-layout": layout, children: items.map((item) => (_jsxs("div", { children: [_jsx("dt", { children: item.term }), _jsx("dd", { children: item.description })] }, item.id))) }));
+}
+export function Switch({ label, id, className = "", ...props }) {
+    const generatedId = useId();
+    return (_jsxs("label", { htmlFor: id ?? generatedId, className: "krigsvold-switch", children: [_jsxs("span", { className: "krigsvold-switch-control", children: [_jsx("input", { ...props, id: id ?? generatedId, type: "checkbox", role: "switch", className: className }), _jsx("span", { className: "krigsvold-switch-track", "aria-hidden": "true", children: _jsx("span", {}) })] }), _jsx("span", { children: label })] }));
+}
+export function Tabs({ items, value, onValueChange, label, orientation = "horizontal", className = "", ...props }) {
+    const generatedId = useId();
+    const buttons = useRef([]);
+    const [focusedId, setFocusedId] = useState(null);
+    const enabled = items
+        .map((item, index) => (item.disabled ? -1 : index))
+        .filter((index) => index >= 0);
+    const selected = items.findIndex((item) => item.id === value && !item.disabled);
+    const active = selected >= 0 ? selected : (enabled[0] ?? -1);
+    const focused = items.findIndex((item) => item.id === focusedId && !item.disabled);
+    const tabStop = focused >= 0 ? focused : active;
+    const lastFocusedTab = useRef(null);
+    useLayoutEffect(() => {
+        const previous = lastFocusedTab.current;
+        if (previous && (!previous.isConnected || previous.disabled)) {
+            lastFocusedTab.current = null;
+            const document = previous.ownerDocument;
+            if (document.hasFocus() && (document.activeElement === document.body || document.activeElement === previous)) {
+                buttons.current[active]?.focus();
+            }
+        }
+    });
+    return (_jsxs("div", { ...props, className: `krigsvold-tabs ${className}`, children: [_jsx("div", { role: "tablist", "aria-label": label, "aria-orientation": orientation, onBlur: (event) => {
+                    if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
+                        setFocusedId(null);
+                        const prior = lastFocusedTab.current;
+                        // Keep the last tab only when React has just disabled or removed it;
+                        // an ordinary blur, including a move to outside content, clears it.
+                        if (event.relatedTarget || !prior || (prior.isConnected && !prior.disabled))
+                            lastFocusedTab.current = null;
+                    }
+                }, onKeyDown: (event) => {
+                    const target = event.target.closest('[role="tab"]');
+                    const index = buttons.current.findIndex((button) => button === target);
+                    if (index < 0)
+                        return;
+                    const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+                    const previousKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+                    let next;
+                    if (event.key === "Home")
+                        next = enabled[0];
+                    else if (event.key === "End")
+                        next = enabled.at(-1);
+                    else if (event.key === nextKey)
+                        next = enabled[(enabled.indexOf(index) + 1) % enabled.length];
+                    else if (event.key === previousKey)
+                        next =
+                            enabled[(enabled.indexOf(index) - 1 + enabled.length) % enabled.length];
+                    if (next !== undefined) {
+                        event.preventDefault();
+                        buttons.current[next]?.focus();
+                    }
+                }, children: items.map((item, index) => (_jsx("button", { type: "button", role: "tab", ref: (element) => {
+                        buttons.current[index] = element;
+                    }, id: `${generatedId}-tab-${index}`, "aria-controls": `${generatedId}-panel-${index}`, "aria-selected": index === active, tabIndex: index === tabStop ? 0 : -1, disabled: item.disabled, onFocus: (event) => { lastFocusedTab.current = event.currentTarget; setFocusedId(item.id); }, onClick: () => onValueChange(item.id), children: item.label }, item.id))) }), items.map((item, index) => (_jsx("div", { role: "tabpanel", id: `${generatedId}-panel-${index}`, "aria-labelledby": `${generatedId}-tab-${index}`, hidden: index !== active, tabIndex: 0, children: item.content }, item.id)))] }));
+}

package/dist/styles.css

@@ -0,0 +1,240 @@
+@import "@krigsvold/core/css";
+@import "@krigsvold/core/foundation.css";
+/* Source roles: see docs/languages/krigsvold/decisions.md. Theme 2.1.0 is unchanged. */
+.krigsvold {
+  --ui-bg: var(--krigsvold-surface-canvas);
+  --ui-surface: var(--krigsvold-surface-subtle);
+  --ui-text: var(--krigsvold-text);
+  --ui-heading: var(--krigsvold-text-strong);
+  --ui-muted: var(--krigsvold-text-subtle);
+  --ui-line: var(--krigsvold-border-subtle);
+  --ui-accent: var(--krigsvold-accent);
+  --ui-action: var(--krigsvold-accent);
+  --ui-action-hover: var(--krigsvold-accent-hover);
+  --ui-on-action: var(--krigsvold-on-accent);
+  --krigsvold-field-gap: .5rem;
+  --krigsvold-group-gap: 1.5rem;
+  --krigsvold-region-gap: 3rem;
+  --krigsvold-page-gutter: var(--krigsvold-gutter);
+  background: var(--ui-bg); color: var(--ui-text);
+  font: 1rem/1.65 var(--krigsvold-font-sans);
+}
+.krigsvold[data-krigsvold="light"] {
+  --ui-text: var(--krigsvold-color-ink);
+  --ui-heading: var(--krigsvold-color-navy-950);
+  --ui-surface: var(--krigsvold-color-ice-100);
+  --ui-muted: var(--krigsvold-color-muted);
+  --ui-line: var(--krigsvold-color-rule);
+  --ui-action: var(--krigsvold-color-navy-900);
+  --ui-action-hover: var(--krigsvold-color-blue-600);
+  --ui-on-action: white;
+}
+.krigsvold *, .krigsvold *::before, .krigsvold *::after { box-sizing: border-box; }
+.krigsvold :where(img,svg,video) { max-inline-size:100%; block-size:auto; }
+.krigsvold :where(a) { color:var(--krigsvold-link); text-underline-offset:var(--krigsvold-link-underline-offset); text-decoration-thickness:.08em; }
+.krigsvold :where(a:hover) { color:var(--krigsvold-link-hover); }
+.krigsvold :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline:var(--krigsvold-focus-width) solid var(--krigsvold-focus-ring); outline-offset:var(--krigsvold-focus-gap); }
+.krigsvold :where(h1,h2,h3,h4,h5,h6,p) { margin-block:0; }
+.krigsvold :where(h1,h2,h3) { color:var(--ui-heading); font-family:var(--krigsvold-font-serif); font-weight:700; line-height:var(--krigsvold-leading-heading); text-wrap:balance; letter-spacing:var(--krigsvold-tracking-heading); }
+.krigsvold :where(h1) { font-size:var(--krigsvold-text-h1); }
+.krigsvold :where(h2) { font-size:var(--krigsvold-text-h2); }
+.krigsvold :where(h3) { font-size:var(--krigsvold-text-h3); }
+.krigsvold :where(button,input,select,textarea,table,nav) { font-family:var(--krigsvold-font-sans); }
+.krigsvold :where(code,pre,kbd,samp) { font-family:var(--krigsvold-font-mono); }
+.krigsvold-button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-block-size:var(--krigsvold-control-height); min-inline-size:var(--krigsvold-control-height); padding:var(--krigsvold-button-padding); border:1px solid var(--ui-action); border-radius:var(--krigsvold-radius-control); color:var(--ui-on-action); background:var(--ui-action); font:700 var(--krigsvold-text-button)/var(--krigsvold-leading-button) var(--krigsvold-font-sans); text-transform:uppercase; letter-spacing:var(--krigsvold-tracking-button); cursor:pointer; }
+.krigsvold-button:hover:not(:disabled) { background:var(--ui-action-hover); border-color:var(--ui-action-hover); color:var(--ui-on-action); }
+.krigsvold-button--secondary { background:transparent; border-color:var(--ui-action); color:var(--ui-action); }
+.krigsvold-button--secondary:hover:not(:disabled) { background:var(--krigsvold-button-secondary-hover); color:var(--ui-text); }
+.krigsvold-button--quiet { background:transparent; border-color:transparent; color:var(--krigsvold-link); }
+.krigsvold-button--quiet:hover:not(:disabled) { background:var(--krigsvold-hover-bg); border-color:transparent; color:var(--krigsvold-link-hover); }
+.krigsvold-button:disabled { background:var(--krigsvold-disabled-bg); color:var(--krigsvold-disabled-text); border-color:var(--krigsvold-disabled-bg); cursor:default; }
+.krigsvold-input, .krigsvold-file-input { display:block; inline-size:100%; min-inline-size:0; min-block-size:var(--krigsvold-control-height); padding:var(--krigsvold-control-padding); border:1px solid var(--krigsvold-input-border); border-radius:var(--krigsvold-radius-sm); background:var(--krigsvold-input-bg); color:var(--krigsvold-input-text); font:1rem/1.5 var(--krigsvold-font-sans); }
+.krigsvold textarea { resize:vertical; min-block-size:7rem; }
+.krigsvold-input[aria-invalid="true"], .krigsvold-file-input[aria-invalid="true"] { border-color:var(--krigsvold-danger); }
+.krigsvold-input:disabled, .krigsvold-file-input:disabled { background:var(--krigsvold-disabled-bg); color:var(--krigsvold-disabled-text); cursor:default; }
+.krigsvold-field { display:grid; gap:var(--krigsvold-field-gap); min-inline-size:0; align-content:start; font-family:var(--krigsvold-font-sans); }
+.krigsvold-field label, .krigsvold-fieldset legend { color:var(--ui-heading); font:700 .9rem/1.5 var(--krigsvold-font-sans);  }
+.krigsvold-hint { color:var(--ui-muted); font-size:.875rem; }
+.krigsvold-error { color:var(--krigsvold-danger); font-size:.875rem; }
+.krigsvold-checkbox, .krigsvold-radio { color:var(--ui-text); display:inline-flex; gap:.5rem; align-items:center; min-block-size:2.8rem; cursor:pointer; font:1rem/1.5 var(--krigsvold-font-sans); }
+.krigsvold-checkbox input, .krigsvold-radio input { inline-size:1.2rem; block-size:1.2rem; accent-color:var(--ui-action); flex:none; }
+.krigsvold-checkbox:has(input:disabled), .krigsvold-radio:has(input:disabled) { color:var(--krigsvold-disabled-text); cursor:default; }
+.krigsvold-fieldset { border:1px solid var(--ui-line); padding:var(--krigsvold-group-gap); margin:0; min-inline-size:0; }
+.krigsvold-fieldset legend { padding-inline:.3rem; }
+.krigsvold-notice { padding:1rem 1.5rem; border-inline-start:4px solid var(--krigsvold-info); background:var(--krigsvold-info-bg); color:var(--krigsvold-info-text); font-family:var(--krigsvold-font-sans); }
+.krigsvold-notice--success { border-color:var(--krigsvold-success); background:var(--krigsvold-success-bg); color:var(--krigsvold-success-text); }
+.krigsvold-notice--error { border-color:var(--krigsvold-danger); background:var(--krigsvold-danger-bg); color:var(--krigsvold-danger-text); }
+.krigsvold-badge { display:inline-block; font:.8rem/1.5 var(--krigsvold-font-sans); padding:.2rem .5rem; color:var(--ui-muted); }
+.krigsvold-error-summary { padding:1rem 1.5rem; border-inline-start:4px solid var(--krigsvold-danger); background:var(--krigsvold-danger-bg); color:var(--krigsvold-danger-text); display:grid; gap:1rem; min-inline-size:0; font-family:var(--krigsvold-font-sans); }
+.krigsvold-error-summary ul { margin:0; padding-inline-start:1.25rem; }
+.krigsvold-error-summary a { color:inherit; text-decoration:underline; }
+.krigsvold-table-scroll { overflow:auto; max-inline-size:100%; }
+.krigsvold-table { border-collapse:collapse; inline-size:100%; text-align:start; font:.95rem/1.65 var(--krigsvold-font-sans); }
+.krigsvold-table caption { text-align:start; padding-block:0 1rem; color:var(--ui-muted); font-weight:700; }
+.krigsvold-table :where(th,td) { min-inline-size:8rem; padding:.85rem .7rem; border-block-end:1px solid var(--ui-line); vertical-align:top; text-align:start; }
+.krigsvold-table thead th { color:var(--ui-heading);  }
+.krigsvold-table tr[data-selected="true"] { background:var(--krigsvold-active-bg); }
+.krigsvold-skip { position:fixed; inset-block-start:-5rem; inset-inline-start:1rem; z-index:2000; background:var(--ui-bg); color:var(--ui-text); padding:.75rem 1rem; font:700 1rem/1.5 var(--krigsvold-font-sans); }
+.krigsvold-skip:focus { inset-block-start:1rem; }
+/* Application frame extension; website navigation belongs to the host. */
+.krigsvold-app { min-block-size:100vh; font:1rem/1.65 var(--krigsvold-font-sans); }
+.krigsvold-app main { min-inline-size:0; padding:var(--krigsvold-page-gutter); }
+.krigsvold-app-header { display:flex; flex-wrap:wrap; gap:1.5rem; padding:1rem var(--krigsvold-page-gutter); border-block-end:1px solid var(--ui-line); align-items:center; }
+.krigsvold-app-brand { font:700 1.25rem/1.4 var(--krigsvold-font-serif); }
+.krigsvold-app-header nav { display:flex; gap:.5rem; flex-wrap:wrap; }
+.krigsvold-app-header nav a { display:inline-flex; align-items:center; min-block-size:2.8rem; padding:.65rem .75rem; text-decoration:none; }
+.krigsvold-app-header nav a[aria-current] { border-block-end:2px solid var(--ui-accent); font-weight:700; }
+.krigsvold-app-utilities { margin-inline-start:auto; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
+.krigsvold-app-header[data-krigsvold] { --ui-bg:var(--krigsvold-bg); --ui-text:var(--krigsvold-text); --ui-heading:var(--krigsvold-text-strong); --ui-muted:var(--krigsvold-text-subtle); --ui-line:var(--krigsvold-border-subtle); --ui-accent:var(--krigsvold-accent); --ui-action:var(--krigsvold-accent); --ui-action-hover:var(--krigsvold-accent-hover); --ui-on-action:var(--krigsvold-on-accent); color:var(--ui-text); }
+.krigsvold-app[data-navigation="side"] { display:grid; grid-template-columns:16rem minmax(0,1fr); }
+.krigsvold-app[data-navigation="side"] > .krigsvold-app-header { flex-direction:column; align-items:stretch; border-block-end:0; border-inline-end:1px solid var(--ui-line); padding:2rem 1.5rem; }
+.krigsvold-app[data-navigation="side"] > .krigsvold-app-header > nav { flex-direction:column; }
+.krigsvold-app[data-navigation="side"] > .krigsvold-app-header > .krigsvold-app-utilities { margin-inline-start:0; }
+.krigsvold-disclosure > summary { cursor:pointer; min-block-size:2.8rem; padding:.6rem .25rem; font-family:var(--krigsvold-font-sans); }
+.krigsvold-dialog { border:1px solid var(--krigsvold-border-strong); padding:1.5rem; background:var(--krigsvold-surface-overlay); color:var(--krigsvold-text); inline-size:min(32rem,calc(100vw - 2rem)); max-block-size:calc(100dvh - 2rem); font:1rem/1.65 var(--krigsvold-font-sans); }
+.krigsvold-dialog::backdrop { background:var(--krigsvold-overlay-scrim); }
+.krigsvold-dialog h2 { margin-block-end:1rem; color:inherit; }
+.krigsvold-dialog .actions { margin-block-start:1.5rem; }
+/* TOC anatomy follows the document index and inline article source objects. */
+.krigsvold-contents { min-inline-size:0; font:.88rem/1.5 var(--krigsvold-font-sans); }
+.krigsvold-contents > strong { display:block; margin-block-end:.75rem; color:var(--krigsvold-color-blue-600); font:700 .78rem/1.5 var(--krigsvold-font-sans); letter-spacing:.16em; text-transform:uppercase; }
+.krigsvold-contents ul { margin:0; padding:0; list-style:none; }
+.krigsvold-contents li { margin:.25rem 0; padding-inline-start:.85rem; }
+.krigsvold-contents li[data-depth="2"] { padding-inline-start:0; font-weight:700; margin-block-start:1.25rem; }
+.krigsvold-contents li[data-depth="2"]:first-child { margin-block-start:.5rem; }
+.krigsvold-contents a { display:block; padding-block:.35rem; text-decoration:none; }
+.krigsvold-contents a:hover { text-decoration:underline; }
+.krigsvold-contents[data-variant="index"] { position:sticky; inset-block-start:6rem; max-block-size:calc(100dvh - 8rem); overflow-y:auto; padding:1.2rem .5rem .5rem 0;  scrollbar-width:thin; }
+.krigsvold-contents[data-variant="inline"] { margin-block-end:2.5rem; padding:1.2rem 1.4rem; background:var(--ui-surface);  }
+.krigsvold-contents[data-variant="inline"] ul { columns:2 16rem; column-gap:2rem; }
+.krigsvold-contents[data-variant="inline"] li { break-inside:avoid; }
+.krigsvold-article { min-inline-size:0; container-type:inline-size; container-name:krigsvold-article; }
+.krigsvold-article-header { display:grid; gap:1rem; padding-block:1.5rem 2rem; }
+.krigsvold-article-eyebrow { color:var(--krigsvold-color-blue-600); font:700 .78rem/1.5 var(--krigsvold-font-sans); text-transform:uppercase; letter-spacing:.16em; }
+.krigsvold-article-summary { max-inline-size:var(--krigsvold-reading-width); font:1.28rem/1.65 var(--krigsvold-font-serif); }
+.krigsvold-article-metadata, .krigsvold-article-footer { font:.85rem/1.55 var(--krigsvold-font-sans); color:var(--ui-muted); }
+.krigsvold-article-metadata dl { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin:0; }
+.krigsvold-article-metadata dt { font-weight:700; }
+.krigsvold-article-metadata dd { margin:0; }
+.krigsvold-article-layout { display:grid; grid-template-columns:minmax(0,var(--krigsvold-reading-width)); justify-content:center; gap:clamp(2rem,4vw,4rem); align-items:start; padding-block:2rem; }
+.krigsvold-article-layout[data-contents="true"] { grid-template-columns:16rem minmax(0,var(--krigsvold-reading-width)); }
+.krigsvold-article-context { min-inline-size:0; font:.94rem/1.65 var(--krigsvold-font-sans); }
+.krigsvold-article-support { margin-block-start:2.5rem; display:grid; gap:1.5rem; font:.94rem/1.65 var(--krigsvold-font-sans); }
+.krigsvold-prose { min-inline-size:0; max-inline-size:var(--krigsvold-reading-width); font:1.06rem/1.65 var(--krigsvold-font-sans); }
+.krigsvold-prose > * + * { margin-block-start:1.25rem; }
+.krigsvold-prose :where(h2,h3,h4) { scroll-margin-block-start:6rem; }
+.krigsvold-prose h2 { margin-block:3.4rem 1rem; }
+.krigsvold-prose h3 { margin-block:2rem .75rem; }
+.krigsvold-prose :where(ul,ol) { padding-inline-start:1.5rem; }
+.krigsvold-prose li + li { margin-block-start:.5rem; }
+.krigsvold-prose :where(code,pre) { font-family:var(--krigsvold-font-mono); font-size:.92em; }
+.krigsvold-prose pre { padding:1.5rem; border-radius:var(--krigsvold-radius-md); max-inline-size:100%; overflow:auto; background:var(--krigsvold-code-bg); color:var(--krigsvold-code-text); }
+.krigsvold-prose :not(pre) > code { padding:.08em .3em; border:1px solid var(--ui-line); border-radius:.2rem; background:var(--ui-surface); font-size:.88em; overflow-wrap:anywhere; white-space:break-spaces; }
+.krigsvold-prose blockquote { margin:2.5rem 0; border-inline-start:4px solid var(--krigsvold-color-blue-600); padding:.25rem 0 .25rem 1.5rem; color:var(--ui-muted); font:1.15em/1.65 var(--krigsvold-font-serif); }
+.krigsvold-prose img { max-inline-size:100%; block-size:auto; }
+.krigsvold-prose figcaption { color:var(--ui-muted); font:.82rem/1.45 var(--krigsvold-font-sans); padding:.7rem .25rem; }
+.krigsvold-article-footer { border-block-start:1px solid var(--ui-line); padding-block:1.5rem; }
+.krigsvold-file-input::file-selector-button { min-block-size:2.8rem; padding:.5rem .8rem; margin-inline-end:.75rem; font:inherit; border:1px solid var(--krigsvold-border-strong); background:var(--krigsvold-button-secondary-bg); color:var(--krigsvold-button-secondary-text); cursor:pointer; }
+.krigsvold-file-input:disabled::file-selector-button { background:var(--krigsvold-disabled-bg); color:var(--krigsvold-disabled-text); cursor:default; }
+.krigsvold-pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-block-start:2.5rem; font:1rem/1.5 var(--krigsvold-font-sans); }
+.krigsvold-pagination p { margin:0; font-variant-numeric:tabular-nums; }
+.krigsvold-definitions { margin:0; font-family:var(--krigsvold-font-sans); }
+.krigsvold-definitions > div { display:grid; grid-template-columns:minmax(8rem,.35fr) minmax(0,1fr); gap:1rem; padding:1rem 0; border-block-end:1px solid var(--ui-line); min-inline-size:0; }
+.krigsvold-definitions dt { font-weight:700; }
+.krigsvold-definitions dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
+/* Shared application extensions: no invented family-opposite ornament. */
+.krigsvold-switch { display:inline-flex; gap:.75rem; align-items:center; min-block-size:2.8rem; cursor:pointer; font:1rem/1.5 var(--krigsvold-font-sans); }
+.krigsvold-switch-control { position:relative; flex:none; display:inline-flex; }
+.krigsvold-switch input { position:absolute; inset:0; inline-size:100%; block-size:100%; opacity:0; margin:0; cursor:inherit; }
+.krigsvold-switch-track { inline-size:2.6rem; block-size:1.5rem; border:2px solid var(--krigsvold-border-strong); background:var(--krigsvold-button-secondary-bg); display:flex; align-items:center; padding:.15rem; border-radius:1rem; }
+.krigsvold-switch-track > span { inline-size:.95rem; block-size:.95rem; border-radius:50%; background:var(--krigsvold-button-secondary-text); }
+.krigsvold-switch input:checked + .krigsvold-switch-track { background:var(--ui-action); border-color:var(--ui-action); justify-content:flex-end; }
+.krigsvold-switch input:checked + .krigsvold-switch-track > span { background:var(--ui-on-action); }
+.krigsvold-switch input:focus-visible + .krigsvold-switch-track { outline:3px solid var(--krigsvold-focus-ring); outline-offset:3px; }
+.krigsvold-switch:has(input:disabled) { cursor:default; color:var(--krigsvold-disabled-text); }
+.krigsvold-switch input:disabled + .krigsvold-switch-track { background:var(--krigsvold-disabled-bg); border-color:var(--krigsvold-disabled-text); }
+.krigsvold-switch input:disabled + .krigsvold-switch-track > span { background:var(--krigsvold-disabled-text); }
+.krigsvold-tabs { min-inline-size:0; font:1rem/1.5 var(--krigsvold-font-sans); }
+.krigsvold-tabs [role="tablist"] { display:flex; flex-wrap:wrap; gap:.5rem; border-block-end:1px solid var(--ui-line); }
+.krigsvold-tabs [role="tablist"][aria-orientation="vertical"] { flex-direction:column; }
+.krigsvold-tabs [role="tab"] { font:inherit; color:var(--ui-text); background:transparent; border:0; border-block-end:3px solid transparent; padding:.75rem 1rem; min-block-size:2.8rem; cursor:pointer; overflow-wrap:anywhere; }
+.krigsvold-tabs [role="tab"][aria-selected="true"] { border-block-end-color:var(--ui-action); font-weight:700; }
+.krigsvold-tabs [role="tab"]:disabled { color:var(--krigsvold-disabled-text); cursor:default; }
+.krigsvold-tabs [role="tabpanel"] { padding-block:1.5rem; outline-offset:3px; }
+.krigsvold-tabs [role="tabpanel"][hidden] { display:none; }
+@container krigsvold-article (max-width:74rem) {
+ .krigsvold-article-layout[data-contents="true"] { grid-template-columns:minmax(0,1fr); }
+ .krigsvold-contents[data-variant="index"] { position:static; max-block-size:none; overflow:visible; padding:1.2rem 1.4rem; background:var(--ui-surface); }
+ .krigsvold-contents[data-variant="index"] ul { columns:2 16rem; column-gap:2rem; }
+ .krigsvold-contents[data-variant="index"] li { break-inside:avoid; }
+}
+@media(max-width:55rem) {
+ .krigsvold-app[data-navigation="side"] { display:block; }
+ .krigsvold-app[data-navigation="side"] > .krigsvold-app-header { flex-direction:row; border-inline-end:0; border-block-end:1px solid var(--ui-line); padding:1rem; }
+ .krigsvold-app[data-navigation="side"] > .krigsvold-app-header > nav { flex-direction:row; }
+ .krigsvold-app-utilities { margin-inline-start:0; }
+ .krigsvold-definitions > div { grid-template-columns:minmax(0,1fr); gap:.5rem; }
+}
+@media(max-width:40rem) { .krigsvold-contents ul { columns:1 !important; } }
+@media(max-aspect-ratio:4/5) {
+ .krigsvold-article-layout[data-contents="true"] { grid-template-columns:minmax(0,1fr); }
+ .krigsvold-contents[data-variant="index"] { position:static; max-block-size:none; padding:1.2rem 1.4rem; background:var(--ui-surface); }
+}
+@media(prefers-reduced-motion:reduce) { .krigsvold *, .krigsvold *::before, .krigsvold *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
+@media(forced-colors:active) {
+ .krigsvold-switch-track { forced-color-adjust:none; background:Canvas; border-color:CanvasText; }
+ .krigsvold-switch-track > span { background:CanvasText; }
+ .krigsvold-switch input:checked + .krigsvold-switch-track { background:Highlight; border-color:Highlight; }
+ .krigsvold-switch input:checked + .krigsvold-switch-track > span { background:HighlightText; }
+ .krigsvold-switch input:disabled + .krigsvold-switch-track { background:Canvas; border-color:GrayText; }
+ .krigsvold-switch input:disabled + .krigsvold-switch-track > span { background:GrayText; }
+ .krigsvold-tabs [role="tab"][aria-selected="true"] { border-block-end-color:Highlight; }
+}
+@media print {
+ .krigsvold-article { background:white; color:black; }
+ .krigsvold-article-layout { display:block; }
+ .krigsvold-contents { display:none; }
+ .krigsvold-prose { max-inline-size:none; }
+ .krigsvold-prose :where(h2,h3,h4) { break-after:avoid; }
+ .krigsvold-prose :where(pre,blockquote,figure) { break-inside:avoid; }
+ .krigsvold-article :is(.krigsvold-article-context,pre) { background:white; color:black; }
+ .krigsvold-article :is(.krigsvold-article-metadata,.krigsvold-article-footer,a) { color:black; }
+}
+
+/* Existing workbench default retained; explicit placement remains available to both. */
+.krigsvold-app[data-navigation="default"] { display:grid; grid-template-columns:16rem minmax(0,1fr); }
+.krigsvold-app[data-navigation="default"] > .krigsvold-app-header { flex-direction:column; align-items:stretch; border-block-end:0; border-inline-end:1px solid var(--ui-line); padding:2rem 1.5rem; }
+.krigsvold-app[data-navigation="default"] > .krigsvold-app-header > nav { flex-direction:column; }
+.krigsvold-app[data-navigation="default"] > .krigsvold-app-header > .krigsvold-app-utilities { margin-inline-start:0; }
+.krigsvold[data-krigsvold="dark"] .krigsvold-contents > strong, .krigsvold[data-krigsvold="dark"] .krigsvold-article-eyebrow { color:var(--krigsvold-color-ice-400); }
+@media(max-width:55rem) { .krigsvold-app[data-navigation="default"] { display:block; } .krigsvold-app[data-navigation="default"] > .krigsvold-app-header { flex-direction:row; border-inline-end:0; border-block-end:1px solid var(--ui-line); padding:1rem; } .krigsvold-app[data-navigation="default"] > .krigsvold-app-header > nav { flex-direction:row; } }
+
+.krigsvold-article-context { position:sticky; inset-block-start:6rem; }
+.krigsvold-definitions[data-layout="stack"] > div { display:block; }
+.krigsvold-definitions[data-layout="stack"] dd { margin-block-start:.5rem; }
+.krigsvold-definitions[data-layout="grid"] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
+.krigsvold-definitions[data-layout="grid"] > div { display:block; }
+@container krigsvold-article (max-width:74rem) { .krigsvold-article-context { position:static; } }
+@media(max-aspect-ratio:4/5) { .krigsvold-article-context { position:static; } }
+@media(max-width:48rem) { .krigsvold-definitions[data-layout="grid"] { grid-template-columns:minmax(0,1fr); } }
+
+/* Technical identifiers may wrap locally; ordinary prose keeps natural word boundaries. */
+.krigsvold :is(h1,h2,h3,h4,h5,h6,a,dd) { overflow-wrap:break-word; }
+
+/* Bounded application labels must shrink at enlarged text sizes. Prose is separate. */
+.krigsvold-app-header > *, .krigsvold-app-utilities > * { min-inline-size:0; max-inline-size:100%; }
+.krigsvold-app-brand, .krigsvold-app-header nav a { overflow-wrap:anywhere; }
+.krigsvold-button { max-inline-size:100%; overflow-wrap:anywhere; white-space:normal; }
+.krigsvold-checkbox, .krigsvold-radio, .krigsvold-switch { max-inline-size:100%; overflow-wrap:anywhere; }
+.krigsvold-checkbox > span, .krigsvold-radio > span, .krigsvold-switch > span:not(.krigsvold-switch-control) { min-inline-size:0; }
+.krigsvold-field, .krigsvold-fieldset, .krigsvold-notice, .krigsvold-error-summary, .krigsvold-badge { overflow-wrap:anywhere; }
+.krigsvold-tabs [role="tab"] { max-inline-size:100%; min-inline-size:0; }
+
+.krigsvold-field, .krigsvold-error-summary { grid-template-columns:minmax(0,1fr); }
+.krigsvold-field > *, .krigsvold-error-summary > * { min-inline-size:0; }
+
+.krigsvold-article-header { grid-template-columns:minmax(0,1fr); }
+.krigsvold-article-header > *, .krigsvold-article-metadata dl > * { min-inline-size:0; max-inline-size:100%; }
+.krigsvold-article-metadata { overflow-wrap:anywhere; }
+
+.krigsvold-disclosure > summary { overflow-wrap:anywhere; }

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@krigsvold/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Experimental Krigsvold React components",
+  "type": "module",
+  "license": "MIT",
+  "private": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "NOTICE.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "dependencies": {
+    "@krigsvold/core": "2.2.4"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "test": "npm run build && node --test tests/*.test.mjs",
+    "test:browser": "DESIGN_FAMILY=krigsvold node tests/browser-check.mjs",
+    "build:gallery": "NIGHTJAR_FAMILY=krigsvold node examples/react-catalog/build.mjs",
+    "build:reference": "node scripts/build-reference-deployment.mjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/krigsvolddesign/react.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "next",
+    "provenance": true
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "7.0.2",
+    "@axe-core/playwright": "4.11.1",
+    "playwright": "1.64.1",
+    "esbuild": "0.27.4",
+    "vite": "8.3.5",
+    "markdown-it": "14.3.3",
+    "markdown-it-footnote": "4.0.0",
+    "sanitize-html": "2.18.1"
+  }
+}