@martlet/react 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# @martlet/react changelog
+
+## 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,58 @@
-# Temporary Holding Version
+# @martlet/react
 
-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.
+Experimental 0.1.0. MIT licensed. Source package in the [design workbench](https://github.com/howardjp/design-workbench). Intended for experimental publication under npm’s `next` tag; it is not a stable public API. Check registry availability before installing.
+
+```tsx
+import { Button, Field, TextInput } from '@martlet/react';
+import '@martlet/react/styles.css';
+import '@martlet/theme/fonts.css'; // optional local fonts
+
+<div className="martlet" data-martlet="light">
+  <Field label="Component name" hint="Use the exported API name.">
+    {props => <TextInput {...props} name="name" required />}
+  </Field>
+  <Button type="submit">Save component</Button>
+</div>
+```
+
+```sh
+npm install @martlet/react@0.1.0 react@19 react-dom@19
+```
+
+Exports: AppShell, Button, TextInput, Select, Textarea, Field, Notice, Badge, DataTable, Dialog, Checkbox, Fieldset, Disclosure, ErrorSummary, Article, TableOfContents, FileInput, Radio, Pagination, DefinitionList, Switch, Tabs, and FieldControl/SummaryError/ContentsItem/DefinitionItem (types). Native attributes and refs on native controls follow React 19 conventions. Button defaults to `type="button"`. Field supplies a stable id and associated hint/error descriptions through a render function. Dialog uses the native modal top layer; keep it mounted and control `open`. Escape calls `onDismiss`; provide visible dismissal buttons. DataTable wraps a semantic table in a named, focusable overflow region. Notice announces success/info politely and errors assertively.
+
+Use one AppShell per document; its skip link targets main. Styles are scoped to `.martlet` and require the matching data attribute for light/dark colors. Both families can coexist in a document. Application spacing roles are experimental. No app persistence or registry state is embedded in the components.
+
+Build with `npm run build` at the workspace root. `npm run pack:react` produces installable tarballs for testing without publishing. React 19 and the theme package are required. Build artifacts include JavaScript, declarations, and CSS. The workbench exercises editing, validation, saving, server failures, conflicts, empty results, modal dismissal, light/dark rendering, responsive layout, and automated accessibility checks. Manual assistive-technology review and sustained use remain required before stability.
+
+See the [component contracts](../../docs/components.md) for properties, states, keyboard behavior, and acceptance criteria for every export. Checkbox is binary; mixed state is not yet a public contract. Fieldset keeps the native legend and disabled-group behavior. Disclosure uses native details/summary toggling.
+
+ErrorSummary accepts a title, message/targetId error entries, native div ref, and optional recovery children. Focus it after a failed operation; its links focus explicit Field IDs or focusable fieldsets. Field now accepts an optional explicit id, retaining generated IDs by default. ErrorSummary does not manage application drafts or trigger focus itself.
+
+
+Article composes an accessible title, optional inline summary/metadata/contents/aside, body, and footer. It accepts native article props/ref and titleLevel 1 (default) or 2; use coherent headings inside. TableOfContents accepts readonly id/label items, native nav props/ref, and a label defaulting to On this page. Its native fragment anchors target caller-supplied unique IDs; use tabIndex={-1} on target headings for keyboard focus. The components also render as static HTML. An application loading content asynchronously owns initial fragment restoration. Neither component parses Markdown or raw HTML, fetches records, or manages routing.
+
+Both support light/dark modes, long text, a bounded reading measure, narrow single-column reflow, and print styles. Article keeps supporting material while TableOfContents is omitted from print. The workbench reading room is the current consumer. Print-media checks do not replace manual printer/PDF pagination, screen-reader, forced-colors, RTL, and non-Chromium review. All twenty-two components remain experimental.
+
+FileInput forwards native uncontrolled input props and ref, fixes type=file, and excludes value/defaultValue from its TypeScript surface. Use it inside Field, with accept/multiple/name/disabled as needed. The consumer reads the native FileList, validates content/size, manages upload or import state, and may clear via ref.current.value="". The workbench consumes it for reviewed local JSON specification import; no transport, drag/drop, or file-security claim is embedded. Native chooser wording varies by operating system. Keyboard chooser activation, disabled/invalid/description semantics, long-content reflow, light/dark modes, and isolated-package rendering are checked; manual assistive technology and non-Chromium/mobile chooser review remain open.
+
+Radio uses a native radio input with a required visible label, optional id, and forwarded native attributes/ref. className applies to its label wrapper. Give exclusive options the same name and distinct values, with a separate name per group; compose them inside Fieldset/legend. Native Tab, arrow keys, and Space retain browser behavior. The caller manages checked state, observations, validation, and disabled groups. The readiness-review consumer checks native navigation, group/error links, disabled controls, persistence, failures/conflicts, and responsive light/dark rendering. No custom ARIA radio model or promotion/release logic is embedded.
+
+Pagination accepts controlled one-based page, pageCount, onPageChange, disabled, label (default Pagination), and native nav attributes/ref. Previous/next are native secondary buttons; first/last boundaries and disabled lock movement. Position is announced politely. Finite numbers are truncated and clamped; invalid counts/pages become one. The caller owns fetching, page-size, result count, URL state, loading/error recovery, and focus decisions. Labels currently use English. Buttons retain native Tab/Enter/Space behavior; no custom arrow model or embedded routing is supplied. The real review queue is its first consumer.
+
+DefinitionList accepts readonly items containing stable unique id, term and description React nodes, plus native dl attributes/ref (children are composed from items). Each entry renders a native div/dt/dd group. It adds no landmark, heading, fetching, parsing, selection, or fake table role. Give a standalone list accessible context using a nearby heading or native ARIA attributes. Empty arrays produce an empty dl; consumer empty-state text remains separate. Long/multiline text wraps. Martlet stacks terms and descriptions with generous rhythm; Krigsvold aligns leading term columns and values, collapsing at narrow widths. The real specification-conflict comparison composes it into independent family layouts.
+
+
+
+Switch adds a native binary checkbox with role=switch and fixed visible label. It accepts checked/defaultChecked, change, name/value, disabled and native attributes/ref; the visual track is decorative. ClassName passes to the input. Space and label activation remain native. The settings consumer controls future browser draft protection, with ordinary Save committing the preference.
+
+Tabs provides labelled, controlled, manually activated panels. Supply unique item IDs, labels, content and optional disabled flags, plus value/onValueChange and a label. Horizontal arrows (vertical Up/Down when configured) and Home/End move focus among enabled tabs; Enter/Space select. Panels remain mounted, linked by generated IDs, and hidden when inactive. The first enabled item is the fallback for invalid/disabled selection; provide at least one enabled item. Root div props/ref pass through. Routing, persistence, right-to-left arrow adaptation and automatic activation are not supplied.
+
+Both are experimental and consumed by the workbench Settings workflow. The package now exposes 22 components. See [release preparation](../../docs/release-policy.md) and [independent documentation-site direction](../../docs/react-sites.md).
+
+
+AppShell supports `navigationPlacement="default" | "top" | "side" | "none"`, an explicit `navigationLabel`, and optional `headerMode="light" | "dark"`. Existing defaults remain compatible. Placement is a task composition choice in both languages; none omits primary navigation while retaining the brand, utilities and single main landmark. See [the UI grammar](../../docs/languages/martlet/grammar.md) and [MCP and builder skills](../../docs/mcp.md).
+
+## Source reconciliation
+
+The October 23 origin audit is reconciled in this experimental release. TableOfContents accepts optional depth 2/3 per item and variant index/inline; DefinitionList accepts layout rows/stack/grid. Article contents precede body while supporting aside content follows it. AppShell carries neither a decorative top stripe nor a built-in colophon. Existing AppShell navigation defaults are retained for compatibility, with top/side/none available in both families. See docs/languages/martlet/decisions.md for source roles and explicit application extensions. The complete grammar remains experimental; theme 2.1.0 is unchanged.

package/dist/index.d.ts

@@ -0,0 +1,121 @@
+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, children, }: {
+    id?: string;
+    label: string;
+    hint?: string;
+    error?: 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,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useId, useRef, } from "react";
+export function Button({ variant = "primary", className = "", type = "button", ...props }) {
+    return (_jsx("button", { type: type, className: `martlet-button martlet-button--${variant} ${className}`, ...props }));
+}
+export function TextInput({ className = "", ...props }) {
+    return _jsx("input", { className: `martlet-input ${className}`, ...props });
+}
+export function Select({ className = "", ...props }) {
+    return _jsx("select", { className: `martlet-input ${className}`, ...props });
+}
+export function Textarea({ className = "", ...props }) {
+    return _jsx("textarea", { className: `martlet-input ${className}`, ...props });
+}
+export function Field({ id: providedId, label, hint, error, children, }) {
+    const generatedId = useId();
+    const id = providedId ?? generatedId;
+    const descriptions = [hint && `${id}-hint`, error && `${id}-error`].filter(Boolean).join(" ") ||
+        undefined;
+    return (_jsxs("div", { className: "martlet-field", children: [_jsx("label", { htmlFor: id, children: label }), children({
+                id,
+                "aria-describedby": descriptions,
+                "aria-invalid": error ? true : undefined,
+            }), hint && (_jsx("p", { id: `${id}-hint`, className: "martlet-hint", children: hint })), error && (_jsx("p", { id: `${id}-error`, className: "martlet-error", children: error }))] }));
+}
+export function Notice({ kind = "info", children, }) {
+    return (_jsx("div", { className: `martlet-notice martlet-notice--${kind}`, role: kind === "error" ? "alert" : "status", children: children }));
+}
+export function Badge({ children }) {
+    return _jsx("span", { className: "martlet-badge", children: children });
+}
+export function DataTable({ caption, children, className = "", ...props }) {
+    return (_jsx("div", { className: "martlet-table-scroll", role: "region", "aria-label": caption, tabIndex: 0, children: _jsxs("table", { className: `martlet-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: "martlet-app", "data-navigation": navigationPlacement, children: [_jsx("a", { className: "martlet-skip", href: "#main", children: "Skip to content" }), _jsxs("header", { className: "martlet-app-header", "data-martlet": headerMode, children: [_jsx("div", { className: "martlet-app-brand", children: brand }), navigationPlacement !== "none" && (_jsx("nav", { "aria-label": navigationLabel, children: navigation })), _jsx("div", { className: "martlet-app-utilities", children: utilities })] }), _jsx("main", { id: "main", tabIndex: -1, children: children })] }));
+}
+export function Dialog({ open, title, onDismiss, children, }) {
+    const ref = useRef(null);
+    const id = useId();
+    useLayoutEffect(() => {
+        const dialog = ref.current;
+        if (!dialog)
+            return;
+        if (open && !dialog.open)
+            dialog.showModal();
+        if (!open && dialog.open)
+            dialog.close();
+    }, [open]);
+    return (_jsxs("dialog", { className: "martlet-dialog", ref: ref, "aria-labelledby": id, 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: `martlet-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: `martlet-fieldset ${className}`, "aria-describedby": describedBy, "aria-invalid": error ? true : props["aria-invalid"], children: [_jsx("legend", { children: legend }), hint && (_jsx("p", { id: `${id}-hint`, className: "martlet-hint", children: hint })), children, error && (_jsx("p", { id: `${id}-error`, className: "martlet-error", children: error }))] }));
+}
+export function Disclosure({ summary, children, className = "", ...props }) {
+    return (_jsxs("details", { ...props, className: `martlet-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: `martlet-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) => {
+                            const target = document.getElementById(error.targetId);
+                            if (target) {
+                                event.preventDefault();
+                                target.focus();
+                            }
+                        }, 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: `martlet-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: `martlet-article ${className}`, children: [_jsxs("header", { className: "martlet-article-header", children: [eyebrow && _jsx("p", { className: "martlet-article-eyebrow", children: eyebrow }), _jsx(Heading, { id: titleId, children: title }), summary && _jsx("p", { className: "martlet-article-summary", children: summary }), metadata && _jsx("div", { className: "martlet-article-metadata", children: metadata })] }), _jsxs("div", { className: "martlet-article-layout", "data-contents": !!contents, children: [contents && _jsx("div", { className: "martlet-article-context", children: contents }), _jsxs("div", { className: "martlet-prose", children: [children, aside && _jsx("aside", { className: "martlet-article-support", "aria-label": contextLabel, children: aside })] })] }), footer && _jsx("footer", { className: "martlet-article-footer", children: footer })] }));
+}
+export function FileInput({ className = "", ...props }) {
+    return (_jsx("input", { ...props, type: "file", className: `martlet-file-input ${className}` }));
+}
+export function Radio({ label, id, className = "", ...props }) {
+    const generatedId = useId();
+    const controlId = id ?? generatedId;
+    return (_jsxs("label", { className: `martlet-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;
+    return (_jsxs("nav", { ...props, "aria-label": label, className: `martlet-pagination ${className}`, children: [_jsx(Button, { 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, { 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: `martlet-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: "martlet-switch", children: [_jsxs("span", { className: "martlet-switch-control", children: [_jsx("input", { ...props, id: id ?? generatedId, type: "checkbox", role: "switch", className: className }), _jsx("span", { className: "martlet-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 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);
+    return (_jsxs("div", { ...props, className: `martlet-tabs ${className}`, children: [_jsx("div", { role: "tablist", "aria-label": label, "aria-orientation": orientation, 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 === active ? 0 : -1, disabled: item.disabled, 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,243 @@
+@import "@martlet/theme/css";
+@import "@martlet/theme/foundation.css";
+/* Source roles: see docs/languages/martlet/decisions.md. Theme 2.1.0 is unchanged. */
+.martlet {
+  --ui-bg: var(--martlet-surface-canvas);
+  --ui-surface: var(--martlet-surface-subtle);
+  --ui-text: var(--martlet-text);
+  --ui-heading: var(--martlet-text-strong);
+  --ui-muted: var(--martlet-text-subtle);
+  --ui-line: var(--martlet-border-subtle);
+  --ui-accent: var(--martlet-accent);
+  --ui-action: var(--martlet-accent);
+  --ui-action-hover: var(--martlet-accent-hover);
+  --ui-on-action: var(--martlet-on-accent);
+  --martlet-field-gap: .5rem;
+  --martlet-group-gap: 1.5rem;
+  --martlet-region-gap: 2.5rem;
+  --martlet-page-gutter: var(--martlet-gutter);
+  background: var(--ui-bg); color: var(--ui-text);
+  font: 1.075rem/1.72 var(--martlet-font-serif);
+}
+.martlet[data-martlet="light"] {
+  --ui-text: var(--martlet-color-ink);
+  --ui-heading: var(--martlet-color-navy-900);
+  --ui-surface: var(--martlet-color-cream);
+  --ui-muted: var(--martlet-color-slate-700);
+  --ui-line: var(--martlet-color-slate-300);
+  --ui-action: var(--martlet-color-blue-600);
+  --ui-action-hover: var(--martlet-color-navy-900);
+  --ui-on-action: white;
+}
+.martlet *, .martlet *::before, .martlet *::after { box-sizing: border-box; }
+.martlet :where(img,svg,video) { max-inline-size:100%; block-size:auto; }
+.martlet :where(a) { color:var(--martlet-link); text-underline-offset:var(--martlet-link-underline-offset); text-decoration-thickness:.08em; }
+.martlet :where(a:hover) { color:var(--martlet-link-hover); }
+.martlet :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline:var(--martlet-focus-width) solid var(--martlet-focus-ring); outline-offset:var(--martlet-focus-gap); }
+.martlet :where(h1,h2,h3,h4,h5,h6,p) { margin-block:0; }
+.martlet :where(h1,h2,h3) { color:var(--ui-heading); font-family:var(--martlet-font-serif); font-weight:400; line-height:var(--martlet-leading-heading); text-wrap:balance;  }
+.martlet :where(h1) { font-size:var(--martlet-text-h1); }
+.martlet :where(h2) { font-size:var(--martlet-text-h2); }
+.martlet :where(h3) { font-size:var(--martlet-text-h3); }
+.martlet :where(button,input,select,textarea,table,nav) { font-family:var(--martlet-font-sans); }
+.martlet :where(code,pre,kbd,samp) { font-family:var(--martlet-font-mono); }
+.martlet-button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-block-size:var(--martlet-control-height); min-inline-size:var(--martlet-control-height); padding:var(--martlet-button-padding); border:1px solid var(--ui-action); border-radius:var(--martlet-radius-control); color:var(--ui-on-action); background:var(--ui-action); font:700 1rem/1.5 var(--martlet-font-sans);  cursor:pointer; }
+.martlet-button:hover:not(:disabled) { background:var(--ui-action-hover); border-color:var(--ui-action-hover); color:var(--ui-on-action); }
+.martlet-button--secondary { background:transparent; border-color:var(--ui-action); color:var(--ui-action); }
+.martlet-button--secondary:hover:not(:disabled) { background:var(--martlet-button-secondary-hover); color:var(--ui-text); }
+.martlet-button--quiet { background:transparent; border-color:transparent; color:var(--martlet-link); }
+.martlet-button--quiet:hover:not(:disabled) { background:var(--martlet-hover-bg); border-color:transparent; color:var(--martlet-link-hover); }
+.martlet-button:disabled { background:var(--martlet-disabled-bg); color:var(--martlet-disabled-text); border-color:var(--martlet-disabled-bg); cursor:default; }
+.martlet-input, .martlet-file-input { display:block; inline-size:100%; min-inline-size:0; min-block-size:var(--martlet-control-height); padding:.65rem .8rem; border:1px solid var(--martlet-input-border); border-radius:var(--martlet-radius-sm); background:var(--martlet-input-bg); color:var(--martlet-input-text); font:1rem/1.5 var(--martlet-font-sans); }
+.martlet textarea { resize:vertical; min-block-size:7rem; }
+.martlet-input[aria-invalid="true"], .martlet-file-input[aria-invalid="true"] { border-color:var(--martlet-danger); }
+.martlet-input:disabled, .martlet-file-input:disabled { background:var(--martlet-disabled-bg); color:var(--martlet-disabled-text); cursor:default; }
+.martlet-field { display:grid; gap:var(--martlet-field-gap); min-inline-size:0; align-content:start; font-family:var(--martlet-font-sans); }
+.martlet-field label, .martlet-fieldset legend { color:var(--ui-heading); font:700 .86rem/1.5 var(--martlet-font-sans); letter-spacing:.02em; }
+.martlet-hint { color:var(--ui-muted); font-size:.875rem; }
+.martlet-error { color:var(--martlet-danger); font-size:.875rem; }
+.martlet-checkbox, .martlet-radio { display:inline-flex; gap:.5rem; align-items:center; min-block-size:2.8rem; cursor:pointer; font:1rem/1.5 var(--martlet-font-sans); }
+.martlet-checkbox input, .martlet-radio input { inline-size:1.2rem; block-size:1.2rem; accent-color:var(--ui-action); flex:none; }
+.martlet-checkbox:has(input:disabled), .martlet-radio:has(input:disabled) { color:var(--martlet-disabled-text); cursor:default; }
+.martlet-fieldset { border:1px solid var(--ui-line); padding:var(--martlet-group-gap); margin:0; min-inline-size:0; }
+.martlet-fieldset legend { padding-inline:.3rem; }
+.martlet-notice { padding:1rem 1.5rem; border-inline-start:4px solid var(--martlet-info); background:var(--martlet-info-bg); color:var(--martlet-info-text); font-family:var(--martlet-font-sans); }
+.martlet-notice--success { border-color:var(--martlet-success); background:var(--martlet-success-bg); color:var(--martlet-success-text); }
+.martlet-notice--error { border-color:var(--martlet-danger); background:var(--martlet-danger-bg); color:var(--martlet-danger-text); }
+.martlet-badge { display:inline-block; font:.8rem/1.5 var(--martlet-font-sans); padding:.2rem .5rem; color:var(--ui-muted); }
+.martlet-error-summary { padding:1rem 1.5rem; border-inline-start:4px solid var(--martlet-danger); background:var(--martlet-danger-bg); color:var(--martlet-danger-text); display:grid; gap:1rem; min-inline-size:0; font-family:var(--martlet-font-sans); }
+.martlet-error-summary ul { margin:0; padding-inline-start:1.25rem; }
+.martlet-error-summary a { color:inherit; text-decoration:underline; }
+.martlet-table-scroll { overflow:auto; max-inline-size:100%; }
+.martlet-table { border-collapse:collapse; inline-size:100%; text-align:start; font:.94rem/1.5 var(--martlet-font-sans); }
+.martlet-table caption { text-align:start; padding-block:0 1rem; color:var(--ui-muted); font-weight:700; }
+.martlet-table :where(th,td) { padding:.8rem .9rem; border-block-end:1px solid var(--ui-line); vertical-align:top; text-align:start; }
+.martlet-table thead th { color:var(--ui-heading); background:var(--ui-surface); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
+.martlet-table tr[data-selected="true"] { background:var(--martlet-active-bg); }
+.martlet-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(--martlet-font-sans); }
+.martlet-skip:focus { inset-block-start:1rem; }
+/* Application frame extension; website navigation belongs to the host. */
+.martlet-app { min-block-size:100vh; font:1rem/1.65 var(--martlet-font-sans); }
+.martlet-app main { min-inline-size:0; padding:var(--martlet-page-gutter); }
+.martlet-app-header { display:flex; flex-wrap:wrap; gap:1.5rem; padding:1rem var(--martlet-page-gutter); border-block-end:1px solid var(--ui-line); align-items:center; }
+.martlet-app-brand { font:700 1.25rem/1.4 var(--martlet-font-serif); }
+.martlet-app-header nav { display:flex; gap:.5rem; flex-wrap:wrap; }
+.martlet-app-header nav a { display:inline-flex; align-items:center; min-block-size:2.8rem; padding:.65rem .75rem; text-decoration:none; }
+.martlet-app-header nav a[aria-current] { border-block-end:2px solid var(--ui-accent); font-weight:700; }
+.martlet-app-utilities { margin-inline-start:auto; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
+.martlet-app-header[data-martlet] { --ui-bg:var(--martlet-bg); --ui-text:var(--martlet-text); --ui-heading:var(--martlet-text-strong); --ui-muted:var(--martlet-text-subtle); --ui-line:var(--martlet-border-subtle); --ui-accent:var(--martlet-accent); --ui-action:var(--martlet-accent); --ui-action-hover:var(--martlet-accent-hover); --ui-on-action:var(--martlet-on-accent); color:var(--ui-text); }
+.martlet-app[data-navigation="side"] { display:grid; grid-template-columns:16rem minmax(0,1fr); }
+.martlet-app[data-navigation="side"] > .martlet-app-header { flex-direction:column; align-items:stretch; border-block-end:0; border-inline-end:1px solid var(--ui-line); padding:2rem 1.5rem; }
+.martlet-app[data-navigation="side"] > .martlet-app-header > nav { flex-direction:column; }
+.martlet-app[data-navigation="side"] > .martlet-app-header > .martlet-app-utilities { margin-inline-start:0; }
+.martlet-disclosure > summary { cursor:pointer; min-block-size:2.8rem; padding:.6rem .25rem; font-family:var(--martlet-font-sans); }
+.martlet-dialog { border:1px solid var(--martlet-border-strong); padding:1.5rem; background:var(--martlet-surface-overlay); color:var(--martlet-text); inline-size:min(32rem,calc(100vw - 2rem)); max-block-size:calc(100dvh - 2rem); font:1rem/1.65 var(--martlet-font-sans); }
+.martlet-dialog::backdrop { background:var(--martlet-overlay-scrim); }
+.martlet-dialog h2 { margin-block-end:1rem; color:inherit; }
+.martlet-dialog .actions { margin-block-start:1.5rem; }
+/* TOC anatomy follows the document index and inline article source objects. */
+.martlet-contents { min-inline-size:0; font:.88rem/1.5 var(--martlet-font-sans); }
+.martlet-contents > strong { display:block; margin-block-end:.75rem; color:var(--martlet-color-gold-600); font:700 .78rem/1.5 var(--martlet-font-sans); letter-spacing:.1em; text-transform:uppercase; }
+.martlet-contents ul { margin:0; padding:0; list-style:none; }
+.martlet-contents li { margin:.25rem 0; padding-inline-start:.85rem; }
+.martlet-contents li[data-depth="2"] { padding-inline-start:0; font-weight:700; margin-block-start:1.25rem; }
+.martlet-contents li[data-depth="2"]:first-child { margin-block-start:.5rem; }
+.martlet-contents a { display:block; padding-block:.35rem; text-decoration:none; }
+.martlet-contents a:hover { text-decoration:underline; }
+.martlet-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; border-block-start:2px solid var(--martlet-color-gold-500); scrollbar-width:thin; }
+.martlet-contents[data-variant="inline"] { margin-block-end:2.5rem; padding:1.2rem 1.4rem; background:var(--ui-surface); border-block-start:2px solid var(--martlet-color-gold-500); }
+.martlet-contents[data-variant="inline"] ul { columns:2 16rem; column-gap:2rem; }
+.martlet-contents[data-variant="inline"] li { break-inside:avoid; }
+.martlet-article { min-inline-size:0; container-type:inline-size; container-name:martlet-article; }
+.martlet-article-header { display:grid; gap:1rem; padding-block:1.5rem 2rem; }
+.martlet-article-eyebrow { color:var(--martlet-color-gold-600); font:700 .78rem/1.5 var(--martlet-font-sans); text-transform:uppercase; letter-spacing:.1em; }
+.martlet-article-summary { max-inline-size:var(--martlet-reading-width); font:1.2rem/1.6 var(--martlet-font-serif); }
+.martlet-article-metadata, .martlet-article-footer { font:.85rem/1.55 var(--martlet-font-sans); color:var(--ui-muted); }
+.martlet-article-metadata dl { display:flex; flex-wrap:wrap; gap:1rem 2rem; margin:0; }
+.martlet-article-metadata dt { font-weight:700; }
+.martlet-article-metadata dd { margin:0; }
+.martlet-article-layout { display:grid; grid-template-columns:minmax(0,var(--martlet-reading-width)); justify-content:center; gap:clamp(2rem,4vw,4rem); align-items:start; padding-block:2rem; }
+.martlet-article-layout[data-contents="true"] { grid-template-columns:16rem minmax(0,var(--martlet-reading-width)); }
+.martlet-article-context { min-inline-size:0; font:.94rem/1.65 var(--martlet-font-sans); }
+.martlet-article-support { margin-block-start:2.5rem; display:grid; gap:1.5rem; font:.94rem/1.65 var(--martlet-font-sans); }
+.martlet-prose { min-inline-size:0; max-inline-size:var(--martlet-reading-width); font:1.075rem/1.72 var(--martlet-font-serif); }
+.martlet-prose > * + * { margin-block-start:1.25rem; }
+.martlet-prose :where(h2,h3,h4) { scroll-margin-block-start:6rem; }
+.martlet-prose h2 { margin-block:2.2em 1rem; }
+.martlet-prose h3 { margin-block:2rem .75rem; }
+.martlet-prose :where(ul,ol) { padding-inline-start:1.5rem; }
+.martlet-prose li + li { margin-block-start:.5rem; }
+.martlet-prose :where(code,pre) { font-family:var(--martlet-font-mono); font-size:.92em; }
+.martlet-prose pre { padding:1.5rem; border-radius:var(--martlet-radius-md); max-inline-size:100%; overflow:auto; background:var(--martlet-code-bg); color:var(--martlet-code-text); }
+.martlet-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; }
+.martlet-prose blockquote { margin:2.5rem 0; border-inline-start:4px solid var(--martlet-color-gold-500); padding:.25rem 0 .25rem 1.5rem; color:var(--ui-muted); font:1.15em/1.65 var(--martlet-font-serif); }
+.martlet-prose img { max-inline-size:100%; block-size:auto; }
+.martlet-prose figcaption { color:var(--ui-muted); font:.82rem/1.45 var(--martlet-font-sans); padding:.7rem .25rem; }
+.martlet-article-footer { border-block-start:1px solid var(--ui-line); padding-block:1.5rem; }
+.martlet-file-input::file-selector-button { min-block-size:2.8rem; padding:.5rem .8rem; margin-inline-end:.75rem; font:inherit; border:1px solid var(--martlet-border-strong); background:var(--martlet-button-secondary-bg); color:var(--martlet-button-secondary-text); cursor:pointer; }
+.martlet-file-input:disabled::file-selector-button { background:var(--martlet-disabled-bg); color:var(--martlet-disabled-text); cursor:default; }
+.martlet-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(--martlet-font-sans); }
+.martlet-pagination p { margin:0; font-variant-numeric:tabular-nums; }
+.martlet-definitions { margin:0; font-family:var(--martlet-font-sans); }
+.martlet-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; }
+.martlet-definitions dt { font-weight:700; }
+.martlet-definitions dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
+/* Shared application extensions: no invented family-opposite ornament. */
+.martlet-switch { display:inline-flex; gap:.75rem; align-items:center; min-block-size:2.8rem; cursor:pointer; font:1rem/1.5 var(--martlet-font-sans); }
+.martlet-switch-control { position:relative; flex:none; display:inline-flex; }
+.martlet-switch input { position:absolute; inset:0; inline-size:100%; block-size:100%; opacity:0; margin:0; cursor:inherit; }
+.martlet-switch-track { inline-size:2.6rem; block-size:1.5rem; border:2px solid var(--martlet-border-strong); background:var(--martlet-button-secondary-bg); display:flex; align-items:center; padding:.15rem; border-radius:1rem; }
+.martlet-switch-track > span { inline-size:.95rem; block-size:.95rem; border-radius:50%; background:var(--martlet-button-secondary-text); }
+.martlet-switch input:checked + .martlet-switch-track { background:var(--ui-action); border-color:var(--ui-action); justify-content:flex-end; }
+.martlet-switch input:checked + .martlet-switch-track > span { background:var(--ui-on-action); }
+.martlet-switch input:focus-visible + .martlet-switch-track { outline:3px solid var(--martlet-focus-ring); outline-offset:3px; }
+.martlet-switch:has(input:disabled) { cursor:default; color:var(--martlet-disabled-text); }
+.martlet-switch input:disabled + .martlet-switch-track { background:var(--martlet-disabled-bg); border-color:var(--martlet-disabled-text); }
+.martlet-switch input:disabled + .martlet-switch-track > span { background:var(--martlet-disabled-text); }
+.martlet-tabs { min-inline-size:0; font:1rem/1.5 var(--martlet-font-sans); }
+.martlet-tabs [role="tablist"] { display:flex; flex-wrap:wrap; gap:.5rem; border-block-end:1px solid var(--ui-line); }
+.martlet-tabs [role="tablist"][aria-orientation="vertical"] { flex-direction:column; }
+.martlet-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; }
+.martlet-tabs [role="tab"][aria-selected="true"] { border-block-end-color:var(--ui-action); font-weight:700; }
+.martlet-tabs [role="tab"]:disabled { color:var(--martlet-disabled-text); cursor:default; }
+.martlet-tabs [role="tabpanel"] { padding-block:1.5rem; outline-offset:3px; }
+.martlet-tabs [role="tabpanel"][hidden] { display:none; }
+@container martlet-article (max-width:74rem) {
+ .martlet-article-layout[data-contents="true"] { grid-template-columns:minmax(0,1fr); }
+ .martlet-contents[data-variant="index"] { position:static; max-block-size:none; overflow:visible; padding:1.2rem 1.4rem; background:var(--ui-surface); }
+ .martlet-contents[data-variant="index"] ul { columns:2 16rem; column-gap:2rem; }
+ .martlet-contents[data-variant="index"] li { break-inside:avoid; }
+}
+@media(max-width:55rem) {
+ .martlet-app[data-navigation="side"] { display:block; }
+ .martlet-app[data-navigation="side"] > .martlet-app-header { flex-direction:row; border-inline-end:0; border-block-end:1px solid var(--ui-line); padding:1rem; }
+ .martlet-app[data-navigation="side"] > .martlet-app-header > nav { flex-direction:row; }
+ .martlet-app-utilities { margin-inline-start:0; }
+ .martlet-definitions > div { grid-template-columns:minmax(0,1fr); gap:.5rem; }
+}
+@media(max-width:40rem) { .martlet-contents ul { columns:1 !important; } }
+@media(max-aspect-ratio:4/5) {
+ .martlet-article-layout[data-contents="true"] { grid-template-columns:minmax(0,1fr); }
+ .martlet-contents[data-variant="index"] { position:static; max-block-size:none; padding:1.2rem 1.4rem; background:var(--ui-surface); }
+}
+@media(prefers-reduced-motion:reduce) { .martlet *, .martlet *::before, .martlet *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
+@media(forced-colors:active) {
+ .martlet-switch-track { forced-color-adjust:none; background:Canvas; border-color:CanvasText; }
+ .martlet-switch-track > span { background:CanvasText; }
+ .martlet-switch input:checked + .martlet-switch-track { background:Highlight; border-color:Highlight; }
+ .martlet-switch input:checked + .martlet-switch-track > span { background:HighlightText; }
+ .martlet-switch input:disabled + .martlet-switch-track { background:Canvas; border-color:GrayText; }
+ .martlet-switch input:disabled + .martlet-switch-track > span { background:GrayText; }
+ .martlet-tabs [role="tab"][aria-selected="true"] { border-block-end-color:Highlight; }
+}
+@media print {
+ .martlet-article { background:white; color:black; }
+ .martlet-article-layout { display:block; }
+ .martlet-contents { display:none; }
+ .martlet-prose { max-inline-size:none; }
+ .martlet-prose :where(h2,h3,h4) { break-after:avoid; }
+ .martlet-prose :where(pre,blockquote,figure) { break-inside:avoid; }
+ .martlet-article :is(.martlet-article-context,pre) { background:white; color:black; }
+ .martlet-article :is(.martlet-article-metadata,.martlet-article-footer,a) { color:black; }
+}
+
+/* J-G focus treatment and J-C short section rule. */
+.martlet :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline:3px solid white; outline-offset:3px; box-shadow:0 0 0 6px var(--martlet-color-navy-900); }
+.martlet-prose h2::after { content:""; display:block; inline-size:3rem; block-size:2px; margin-block-start:.6rem; background:var(--martlet-color-gold-500); }
+.martlet[data-martlet="dark"] .martlet-contents > strong, .martlet[data-martlet="dark"] .martlet-article-eyebrow { color:var(--martlet-color-gold-300); }
+
+.martlet-article-context { position:sticky; inset-block-start:6rem; }
+.martlet-definitions[data-layout="stack"] > div { display:block; }
+.martlet-definitions[data-layout="stack"] dd { margin-block-start:.5rem; }
+.martlet-definitions[data-layout="grid"] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
+.martlet-definitions[data-layout="grid"] > div { display:block; }
+@container martlet-article (max-width:74rem) { .martlet-article-context { position:static; } }
+@media(max-aspect-ratio:4/5) { .martlet-article-context { position:static; } }
+@media(max-width:48rem) { .martlet-definitions[data-layout="grid"] { grid-template-columns:minmax(0,1fr); } }
+
+/* Technical identifiers may wrap locally; ordinary prose keeps natural word boundaries. */
+.martlet :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. */
+.martlet-app-header > *, .martlet-app-utilities > * { min-inline-size:0; max-inline-size:100%; }
+.martlet-app-brand, .martlet-app-header nav a { overflow-wrap:anywhere; }
+.martlet-button { max-inline-size:100%; overflow-wrap:anywhere; white-space:normal; }
+.martlet-checkbox, .martlet-radio, .martlet-switch { max-inline-size:100%; overflow-wrap:anywhere; }
+.martlet-checkbox > span, .martlet-radio > span, .martlet-switch > span:not(.martlet-switch-control) { min-inline-size:0; }
+.martlet-field, .martlet-fieldset, .martlet-notice, .martlet-error-summary, .martlet-badge { overflow-wrap:anywhere; }
+.martlet-tabs [role="tab"] { max-inline-size:100%; min-inline-size:0; }
+
+.martlet-field, .martlet-error-summary { grid-template-columns:minmax(0,1fr); }
+.martlet-field > *, .martlet-error-summary > * { min-inline-size:0; }
+
+/* Existing darker gold improves small-label contrast on the source cream inset. */
+.martlet-contents[data-variant="inline"] > strong { color:var(--martlet-color-gold-700); }
+@container martlet-article (max-width:74rem) { .martlet-contents[data-variant="index"] > strong { color:var(--martlet-color-gold-700); } }
+@media(max-aspect-ratio:4/5) { .martlet-contents[data-variant="index"] > strong { color:var(--martlet-color-gold-700); } }
+.martlet[data-martlet="dark"] .martlet-contents > strong { color:var(--martlet-color-gold-300); }
+
+.martlet-article-header { grid-template-columns:minmax(0,1fr); }
+.martlet-article-header > *, .martlet-article-metadata dl > * { min-inline-size:0; max-inline-size:100%; }
+.martlet-article-metadata { overflow-wrap:anywhere; }
+
+.martlet-disclosure > summary { overflow-wrap:anywhere; }

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "@martlet/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Martlet experimental React components, developed in a working component registry",
+  "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": {
+    "@martlet/theme": "2.1.0"
+  },
+  "scripts": {
+    "build": "node ../../scripts/clean-package.mjs martlet && tsc -p tsconfig.json && node ../../scripts/copy-styles.mjs martlet"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/howardjp/design-workbench.git",
+    "directory": "packages/martlet-react"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "next",
+    "provenance": true
+  }
+}