@xaroth.nl/design 0.1.0

package/dist/components/field/field.css

@@ -0,0 +1,336 @@
+@layer x.reset, x.core, x.theme, x.utility;
+@layer x.core {
+  .x-field,
+  .x-choice-group,
+  .x-input,
+  .x-input-wrap,
+  .x-textarea,
+  .x-select,
+  .x-checkbox,
+  .x-radio,
+  .x-switch {
+    --x-field-font: var(--x-font-ui);
+    --x-field-bg: var(--x-color-bg-sunk);
+    --x-field-bg-focus: var(--x-field-bg);
+    --x-field-bg-disabled: var(--x-color-surface);
+    --x-field-bg-readonly: transparent;
+    --x-field-edge-readonly: var(--x-color-field-edge);
+    --x-field-edge-hover: var(--x-color-text-faint);
+    --x-field-glow: none;
+    --x-field-label-font: var(--x-font-ui);
+    --x-field-label-weight: 600;
+    --x-field-label-tracking: var(--x-track-label);
+    --x-field-label-case: uppercase;
+    --x-field-help-fs: var(--x-fs-label);
+    --x-field-arrow: var(--x-color-accent);
+    --x-check-size: 18px;
+    --x-check-mark: calc(var(--x-check-size) - 8px);
+    --x-check-edge: var(--x-color-field-edge);
+    --x-switch-width: 40px;
+    --x-switch-height: 22px;
+    --x-switch-knob: 14px;
+    --x-switch-knob-off: var(--x-color-text-faint);
+    --x-check-on-edge: var(--x-color-accent);
+    --x-check-on-bg: var(--x-field-bg);
+    --x-check-on-glow: none;
+    --x-check-ink: var(--x-color-accent);
+    --x-check-ink-glow: none;
+  }
+  .x-switch {
+    --x-check-on-bg: var(--x-color-accent-wash);
+  }
+  .x-field {
+    display: grid;
+    gap: var(--x-space-2);
+    align-content: start;
+    min-width: 0;
+  }
+  .x-field__label {
+    font-family: var(--x-field-label-font);
+    font-size: var(--x-fs-label);
+    font-weight: var(--x-field-label-weight);
+    line-height: 1.3;
+    letter-spacing: var(--x-field-label-tracking);
+    text-transform: var(--x-field-label-case);
+    color: var(--x-color-text-muted);
+  }
+  .x-field__required {
+    margin-left: 0.25em;
+    color: var(--x-color-accent);
+  }
+  .x-field__help, .x-field__error {
+    margin: 0;
+    font-family: var(--x-field-font);
+    font-size: var(--x-field-help-fs);
+    line-height: 1.4;
+  }
+  .x-field__help {
+    color: var(--x-color-text-faint);
+  }
+  .x-field__error {
+    font-weight: 600;
+    color: var(--x-color-danger);
+  }
+  .x-input,
+  .x-textarea,
+  .x-select {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--x-control-md);
+    padding: 0 var(--x-space-3);
+    margin: 0;
+    font-family: var(--x-field-font);
+    font-size: var(--x-fs-ui);
+    line-height: 1.4;
+    color: var(--x-color-text);
+    background-color: var(--x-field-bg);
+    border: 1px solid var(--x-color-field-edge);
+    border-radius: var(--x-radius);
+    transition: border-color var(--x-duration) var(--x-ease), box-shadow var(--x-duration) var(--x-ease), background-color var(--x-duration) var(--x-ease);
+  }
+  .x-input::placeholder,
+  .x-textarea::placeholder,
+  .x-select::placeholder {
+    color: var(--x-color-text-faint);
+    opacity: 1;
+  }
+  .x-input:hover:not(:disabled, [readonly]),
+  .x-textarea:hover:not(:disabled, [readonly]),
+  .x-select:hover:not(:disabled, [readonly]) {
+    border-color: var(--x-field-edge-hover);
+  }
+  .x-input[readonly],
+  .x-textarea[readonly],
+  .x-select[readonly] {
+    color: var(--x-color-text-muted);
+    background-color: var(--x-field-bg-readonly);
+    border-style: dashed;
+    border-color: var(--x-field-edge-readonly);
+  }
+  .x-input:focus-visible:not([readonly]),
+  .x-textarea:focus-visible:not([readonly]),
+  .x-select:focus-visible:not([readonly]) {
+    background-color: var(--x-field-bg-focus);
+  }
+  .x-input:focus-visible,
+  .x-textarea:focus-visible,
+  .x-select:focus-visible {
+    border-color: var(--x-color-accent);
+    outline: var(--x-focus-width) solid var(--x-color-focus);
+    outline-offset: var(--x-focus-offset);
+    box-shadow: var(--x-field-glow);
+  }
+  .x-input[aria-invalid=true],
+  .x-textarea[aria-invalid=true],
+  .x-select[aria-invalid=true] {
+    border-color: var(--x-color-danger);
+    box-shadow: 0 0 0 1px var(--x-color-danger);
+  }
+  .x-input:disabled,
+  .x-textarea:disabled,
+  .x-select:disabled {
+    color: var(--x-color-text-faint);
+    cursor: not-allowed;
+    background-color: var(--x-field-bg-disabled);
+    border-color: var(--x-color-line-strong);
+  }
+  .x-input {
+    height: var(--x-control-md);
+  }
+  .x-input--start {
+    padding-left: calc(var(--x-space-3) + 18px + var(--x-space-3));
+  }
+  .x-input::-webkit-search-cancel-button {
+    filter: grayscale(1);
+  }
+  .x-input-wrap {
+    position: relative;
+    display: block;
+    min-width: 0;
+  }
+  .x-input-wrap__start {
+    position: absolute;
+    top: 50%;
+    left: var(--x-space-3);
+    display: inline-flex;
+    color: var(--x-input-icon, var(--x-color-text-faint));
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
+  .x-input-wrap__start svg {
+    width: 18px;
+    height: 18px;
+  }
+  .x-textarea {
+    min-height: var(--x-textarea-min, 8rem);
+    padding-block: 10px;
+    resize: vertical;
+  }
+  .x-select {
+    height: var(--x-control-md);
+    padding-right: 40px;
+    appearance: none;
+    cursor: pointer;
+    background-image: linear-gradient(to top right, transparent calc(50% - 0.8px), var(--x-field-arrow) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)), linear-gradient(to top left, transparent calc(50% - 0.8px), var(--x-field-arrow) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px));
+    background-repeat: no-repeat;
+    background-position: right 19px center, right 14px center;
+    background-size: 5px 5px;
+  }
+  .x-select option {
+    color: var(--x-color-text);
+    background: var(--x-color-surface);
+  }
+  .x-select:disabled {
+    --x-field-arrow: var(--x-color-line-strong);
+  }
+  .x-checkbox,
+  .x-radio,
+  .x-switch {
+    display: flex;
+    gap: var(--x-space-3);
+    align-items: center;
+    min-height: var(--x-control-sm);
+    font-family: var(--x-field-font);
+    font-size: var(--x-fs-ui);
+    line-height: 1.4;
+    color: var(--x-color-text);
+    cursor: pointer;
+  }
+  .x-checkbox:has(:disabled),
+  .x-radio:has(:disabled),
+  .x-switch:has(:disabled) {
+    color: var(--x-color-text-faint);
+    cursor: not-allowed;
+  }
+  .x-checkbox__input,
+  .x-radio__input,
+  .x-switch__input {
+    position: relative;
+    display: grid;
+    flex: none;
+    place-content: center;
+    margin: 0;
+    appearance: none;
+    cursor: inherit;
+    background: var(--x-field-bg);
+    border: 1px solid var(--x-check-edge);
+    box-shadow: var(--x-check-ring, none);
+    transition: border-color var(--x-duration) var(--x-ease), background-color var(--x-duration) var(--x-ease), box-shadow var(--x-duration) var(--x-ease);
+  }
+  .x-checkbox__input::before,
+  .x-radio__input::before,
+  .x-switch__input::before {
+    content: "";
+    transition: transform var(--x-duration) var(--x-ease), opacity var(--x-duration) var(--x-ease), background-color var(--x-duration) var(--x-ease);
+  }
+  .x-checkbox__input:hover:not(:disabled),
+  .x-radio__input:hover:not(:disabled),
+  .x-switch__input:hover:not(:disabled) {
+    border-color: var(--x-check-edge-hover, var(--x-color-accent));
+  }
+  .x-checkbox__input:checked,
+  .x-radio__input:checked,
+  .x-switch__input:checked {
+    background: var(--x-check-on-bg);
+    border-color: var(--x-check-on-edge);
+    box-shadow: var(--x-check-ring, var(--x-check-on-glow));
+  }
+  .x-checkbox__input[aria-invalid=true],
+  .x-radio__input[aria-invalid=true],
+  .x-switch__input[aria-invalid=true] {
+    --x-check-edge: var(--x-color-danger);
+    --x-check-edge-hover: var(--x-color-danger);
+    --x-check-on-edge: var(--x-color-danger);
+    --x-check-on-bg: var(--x-color-danger-wash);
+    --x-check-ink: var(--x-color-danger);
+    --x-check-ink-glow: none;
+    --x-check-ring: 0 0 0 1px var(--x-color-danger);
+  }
+  .x-checkbox__input:disabled,
+  .x-radio__input:disabled,
+  .x-switch__input:disabled {
+    border-color: var(--x-color-line-strong);
+  }
+  .x-checkbox__input,
+  .x-radio__input {
+    width: var(--x-check-size);
+    height: var(--x-check-size);
+  }
+  .x-checkbox__input::before,
+  .x-radio__input::before {
+    width: var(--x-check-mark);
+    height: var(--x-check-mark);
+    background: var(--x-check-ink);
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  .x-checkbox__input:checked::before,
+  .x-radio__input:checked::before {
+    box-shadow: var(--x-check-ink-glow);
+    opacity: 1;
+    transform: none;
+  }
+  .x-checkbox__input:disabled::before,
+  .x-radio__input:disabled::before {
+    background: var(--x-color-text-faint);
+  }
+  .x-checkbox__input {
+    border-radius: var(--x-radius);
+  }
+  .x-radio__input {
+    border-radius: 50%;
+  }
+  .x-radio__input::before {
+    border-radius: 50%;
+  }
+  .x-switch__input {
+    width: var(--x-switch-width);
+    height: var(--x-switch-height);
+    place-content: center start;
+    border-radius: var(--x-radius);
+  }
+  .x-switch__input::before {
+    width: var(--x-switch-knob);
+    height: var(--x-switch-knob);
+    margin-left: calc((var(--x-switch-height) - 2px - var(--x-switch-knob)) / 2);
+    background: var(--x-switch-knob-off);
+  }
+  .x-switch__input:checked::before {
+    background: var(--x-check-ink);
+    box-shadow: var(--x-check-ink-glow);
+    transform: translateX(calc(var(--x-switch-width) - var(--x-switch-height)));
+  }
+  .x-switch__input:disabled::before {
+    background: var(--x-color-line-strong);
+  }
+  .x-choice-group {
+    display: grid;
+    gap: var(--x-space-2);
+    align-content: start;
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+  .x-choice-group__legend {
+    padding: 0;
+    margin-bottom: var(--x-space-2);
+    font-family: var(--x-field-label-font);
+    font-size: var(--x-fs-label);
+    font-weight: var(--x-field-label-weight);
+    line-height: 1.3;
+    letter-spacing: var(--x-field-label-tracking);
+    text-transform: var(--x-field-label-case);
+    color: var(--x-color-text-muted);
+  }
+  .x-choice-group__options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--x-space-1);
+  }
+  .x-choice-group--horizontal .x-choice-group__options {
+    flex-flow: row wrap;
+    gap: var(--x-space-1) var(--x-space-5);
+  }
+}

package/dist/components/field/field.d.ts

@@ -0,0 +1,47 @@
+import './field.scss';
+import { type FieldsetHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type SelectHTMLAttributes, type TextareaHTMLAttributes } from 'react';
+import { type InputType, type ChoiceGroupOrientation } from './index.ts';
+export type FieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'id'> & {
+    /** Id of the control inside. Help and error text get `${id}-help` and `${id}-error`. */
+    id: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    /** One control: Input, Textarea, Select, Checkbox, Switch or a native control. Field sets its id and aria. */
+    children: ReactElement;
+};
+export declare function Field({ id, label, description, error, required, className, children, ...rest }: FieldProps): import("react").JSX.Element;
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+    type?: InputType;
+    /** Shown inside the start of the field, usually an icon. Hidden from assistive tech. */
+    start?: ReactNode;
+};
+export declare function Input({ type, start, className, ...rest }: InputProps): import("react").JSX.Element;
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare function Textarea({ className, ...rest }: TextareaProps): import("react").JSX.Element;
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+export declare function Select({ className, children, ...rest }: SelectProps): import("react").JSX.Element;
+export type ChoiceProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role'> & {
+    /** Label text next to the control. */
+    children?: ReactNode;
+};
+export type CheckboxProps = ChoiceProps;
+export type RadioProps = ChoiceProps;
+export type SwitchProps = ChoiceProps;
+export declare const Checkbox: (props: CheckboxProps) => import("react").JSX.Element;
+export declare const Radio: (props: RadioProps) => import("react").JSX.Element;
+export declare const Switch: (props: SwitchProps) => import("react").JSX.Element;
+export type ChoiceGroupProps = Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'id' | 'role'> & {
+    /** Help and error text get `${id}-help` and `${id}-error`. */
+    id: string;
+    legend?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    orientation?: ChoiceGroupOrientation;
+};
+export type RadioGroupProps = ChoiceGroupProps;
+export type CheckboxGroupProps = ChoiceGroupProps;
+export declare const RadioGroup: (props: RadioGroupProps) => import("react").JSX.Element;
+export declare const CheckboxGroup: (props: CheckboxGroupProps) => import("react").JSX.Element;

package/dist/components/field/field.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './field.css';
+import { Children, cloneElement, isValidElement, } from 'react';
+import { defined } from "../../html.js";
+import { choiceClass, fieldClass, fieldControlAttrs, fieldIds, inputClass, mergeDescribedBy, choiceGroupAttrs, choiceGroupClass, selectClass, textareaClass, } from "./index.js";
+// Matches Astro, where an empty string prop counts as absent.
+const present = (node) => node != null && node !== false && node !== '';
+export function Field({ id, label, description, error, required, className, children, ...rest }) {
+    const hasDescription = present(description);
+    const hasError = present(error);
+    const ids = fieldIds(id);
+    const attrs = fieldControlAttrs({ id, hasDescription, hasError, required });
+    const control = Children.only(children);
+    const own = isValidElement(control) ? control.props : {};
+    const wired = cloneElement(control, {
+        id,
+        'aria-describedby': mergeDescribedBy(attrs['aria-describedby'], own['aria-describedby']),
+        'aria-invalid': attrs['aria-invalid'] ?? own['aria-invalid'],
+        required: attrs.required || own.required,
+    });
+    return (_jsxs("div", { ...rest, className: fieldClass({ invalid: hasError, className }), children: [present(label) && (_jsxs("label", { className: "x-field__label", htmlFor: id, children: [label, required && (_jsx("span", { className: "x-field__required", "aria-hidden": "true", children: "*" }))] })), wired, hasDescription && (_jsx("p", { className: "x-field__help", id: ids.help, children: description })), hasError && (_jsx("p", { className: "x-field__error", id: ids.error, children: error }))] }));
+}
+export function Input({ type = 'text', start, className, ...rest }) {
+    const hasStart = start != null;
+    const input = (_jsx("input", { ...rest, type: type, className: inputClass({ hasStart, className }) }));
+    if (!hasStart) {
+        return input;
+    }
+    return (_jsxs("span", { className: "x-input-wrap", children: [_jsx("span", { className: "x-input-wrap__start", "aria-hidden": "true", children: start }), input] }));
+}
+export function Textarea({ className, ...rest }) {
+    return (_jsx("textarea", { ...rest, className: textareaClass({ className }) }));
+}
+export function Select({ className, children, ...rest }) {
+    return (_jsx("select", { ...rest, className: selectClass({ className }), children: children }));
+}
+function Choice({ kind, className, children, ...rest }) {
+    return (_jsxs("label", { className: choiceClass(kind, { className }), children: [_jsx("input", { ...rest, type: kind === 'radio' ? 'radio' : 'checkbox', ...(kind === 'switch' && { role: 'switch' }), className: `x-${kind}__input` }), _jsx("span", { className: `x-${kind}__label`, children: children })] }));
+}
+export const Checkbox = (props) => (_jsx(Choice, { kind: "checkbox", ...props }));
+export const Radio = (props) => (_jsx(Choice, { kind: "radio", ...props }));
+export const Switch = (props) => (_jsx(Choice, { kind: "switch", ...props }));
+function ChoiceGroup({ kind, id, legend, description, error, required, orientation, className, children, ...rest }) {
+    const hasDescription = present(description);
+    const hasError = present(error);
+    const ids = fieldIds(id);
+    return (_jsxs("fieldset", { ...rest, ...defined(choiceGroupAttrs({ id, hasDescription, hasError, required, kind, describedBy: rest['aria-describedby'] })), className: choiceGroupClass({ orientation, invalid: hasError, className }), children: [present(legend) && (_jsxs("legend", { className: "x-choice-group__legend", children: [legend, required && (_jsx("span", { className: "x-field__required", "aria-hidden": "true", children: "*" }))] })), _jsx("div", { className: "x-choice-group__options", children: children }), hasDescription && (_jsx("p", { className: "x-field__help", id: ids.help, children: description })), hasError && (_jsx("p", { className: "x-field__error", id: ids.error, children: error }))] }));
+}
+export const RadioGroup = (props) => (_jsx(ChoiceGroup, { kind: "radio", ...props }));
+export const CheckboxGroup = (props) => (_jsx(ChoiceGroup, { kind: "checkbox", ...props }));

package/dist/components/field/index.d.ts

@@ -0,0 +1,53 @@
+export type InputType = 'text' | 'email' | 'search' | 'number' | 'password' | 'url' | 'tel';
+export type ChoiceGroupOrientation = 'vertical' | 'horizontal';
+export declare const fieldIds: (id: string) => {
+    help: string;
+    error: string;
+};
+export type FieldWiringInput = {
+    id: string;
+    hasDescription?: boolean;
+    hasError?: boolean;
+    required?: boolean;
+};
+export declare const fieldControlAttrs: ({ id, hasDescription, hasError, required }: FieldWiringInput) => {
+    id: string;
+    'aria-describedby': string | undefined;
+    'aria-invalid': "true" | undefined;
+    required: true | undefined;
+};
+export declare const fieldClass: ({ invalid, className }?: {
+    invalid?: boolean;
+    className?: string;
+}) => string;
+export declare const inputClass: ({ hasStart, className }?: {
+    hasStart?: boolean;
+    className?: string;
+}) => string;
+export declare const textareaClass: ({ className }?: {
+    className?: string;
+}) => string;
+export declare const selectClass: ({ className }?: {
+    className?: string;
+}) => string;
+export type ChoiceKind = 'checkbox' | 'radio' | 'switch';
+export declare const choiceClass: (kind: ChoiceKind, { className }?: {
+    className?: string;
+}) => string;
+export declare const choiceGroupClass: ({ orientation, invalid, className, }?: {
+    orientation?: ChoiceGroupOrientation;
+    invalid?: boolean;
+    className?: string;
+}) => string;
+export declare const choiceGroupAttrs: ({ id, hasDescription, hasError, required, kind, describedBy: own, }: FieldWiringInput & {
+    kind: "radio" | "checkbox";
+    describedBy?: string;
+}) => {
+    id: string;
+    role: "radiogroup" | undefined;
+    'aria-describedby': string | undefined;
+    'aria-invalid': "true" | undefined;
+    'aria-required': "true" | undefined;
+};
+export declare const wireControlHtml: (html: string, attrs: ReturnType<typeof fieldControlAttrs>) => string;
+export declare const mergeDescribedBy: (fieldIdsList: string | undefined, own: string | undefined) => string | undefined;

package/dist/components/field/index.js

@@ -0,0 +1,54 @@
+// Form field recipes. Controls are native elements; Field adds label, help and error text around one control and
+// wires the control's id and aria attributes. IDs come from props, never generated, so Astro and React match.
+import { bem } from "../../bem.js";
+import { getAttr, mergeTokens, rewriteTag } from "../../html.js";
+export const fieldIds = (id) => ({ help: `${id}-help`, error: `${id}-error` });
+// Attributes Field puts on its control. Help comes before error, matching reading order.
+export const fieldControlAttrs = ({ id, hasDescription, hasError, required }) => {
+    const ids = fieldIds(id);
+    const describedBy = mergeTokens(hasDescription && ids.help, hasError && ids.error);
+    return {
+        id,
+        'aria-describedby': describedBy || undefined,
+        'aria-invalid': hasError ? 'true' : undefined,
+        required: required || undefined,
+    };
+};
+const field = bem('x-field');
+const input = bem('x-input');
+const textarea = bem('x-textarea');
+const select = bem('x-select');
+const choiceGroup = bem('x-choice-group', { defaults: { orientation: 'vertical' } });
+export const fieldClass = ({ invalid, className } = {}) => field({ invalid }, className);
+export const inputClass = ({ hasStart, className } = {}) => input({ start: hasStart }, className);
+export const textareaClass = ({ className } = {}) => textarea({}, className);
+export const selectClass = ({ className } = {}) => select({}, className);
+export const choiceClass = (kind, { className } = {}) => bem(`x-${kind}`)({}, className);
+export const choiceGroupClass = ({ orientation = 'vertical', invalid, className, } = {}) => choiceGroup({ orientation, invalid }, className);
+// Radio groups are a radiogroup; checkbox groups stay a plain fieldset, which already groups them.
+// `describedBy` is the group's own aria-describedby, kept after the help and error ids.
+export const choiceGroupAttrs = ({ id, hasDescription, hasError, required, kind, describedBy: own, }) => {
+    const { 'aria-describedby': describedBy, 'aria-invalid': invalid } = fieldControlAttrs({
+        id,
+        hasDescription,
+        hasError,
+    });
+    const radio = kind === 'radio';
+    return {
+        id,
+        role: radio ? 'radiogroup' : undefined,
+        'aria-describedby': mergeDescribedBy(describedBy, own),
+        'aria-invalid': radio ? invalid : undefined,
+        'aria-required': radio && required ? 'true' : undefined,
+    };
+};
+const controlTags = new Set(['input', 'select', 'textarea']);
+// Field's id wins; the control's own aria-describedby, aria-invalid (without a Field error) and required are kept.
+export const wireControlHtml = (html, attrs) => rewriteTag(html, (tag) => controlTags.has(tag.name), (tag) => ({
+    id: attrs.id,
+    'aria-describedby': mergeTokens(attrs['aria-describedby'], getAttr(tag, 'aria-describedby')) || undefined,
+    'aria-invalid': attrs['aria-invalid'],
+    required: attrs.required && getAttr(tag, 'required') === undefined ? true : undefined,
+}));
+// Same merge for React, where Field clones its child with these props.
+export const mergeDescribedBy = (fieldIdsList, own) => mergeTokens(fieldIdsList, own) || undefined;

package/dist/components/field/input.astro

@@ -0,0 +1,27 @@
+---
+import './field.css'
+import type { HTMLAttributes } from 'astro/types'
+import { inputClass, type InputType } from './index.js'
+
+type Props = Omit<HTMLAttributes<'input'>, 'class' | 'type'> & {
+  type?: InputType
+  class?: string
+}
+
+const { type = 'text', class: className, ...rest } = Astro.props
+const hasStart = Astro.slots.has('start')
+const input = { ...rest, type, class: inputClass({ hasStart, className }) }
+---
+
+{
+  hasStart ? (
+    <span class="x-input-wrap">
+      <span class="x-input-wrap__start" aria-hidden="true">
+        <slot name="start" />
+      </span>
+      <input {...input} />
+    </span>
+  ) : (
+    <input {...input} />
+  )
+}

package/dist/components/field/radio-group.astro

@@ -0,0 +1,58 @@
+---
+import './field.css'
+import type { HTMLAttributes } from 'astro/types'
+import { defined } from '../../html.js'
+import { choiceGroupAttrs, choiceGroupClass, fieldIds, type ChoiceGroupOrientation } from './index.js'
+
+type Props = Omit<HTMLAttributes<'fieldset'>, 'class' | 'id' | 'role'> & {
+  /** Help and error text get `${id}-help` and `${id}-error`. */
+  id: string
+  legend?: string
+  description?: string
+  error?: string
+  required?: boolean
+  orientation?: ChoiceGroupOrientation
+  class?: string
+}
+
+const { id, legend, description, error, required, orientation, class: className, ...rest } = Astro.props
+const hasLegend = Boolean(legend) || Astro.slots.has('legend')
+const hasDescription = Boolean(description) || Astro.slots.has('description')
+const hasError = Boolean(error) || Astro.slots.has('error')
+const ids = fieldIds(id)
+const recipe = choiceGroupAttrs({
+  id,
+  hasDescription,
+  hasError,
+  required,
+  kind: 'radio',
+  describedBy: rest['aria-describedby'] ?? undefined,
+})
+const attrs = { ...rest, ...defined(recipe), class: choiceGroupClass({ orientation, invalid: hasError, className }) }
+---
+
+<fieldset {...attrs}>
+  {
+    hasLegend && (
+      <legend class="x-choice-group__legend">
+        {Astro.slots.has('legend') ? <slot name="legend" /> : legend}
+        {required && <span class="x-field__required" aria-hidden="true">*</span>}
+      </legend>
+    )
+  }
+  <div class="x-choice-group__options"><slot /></div>
+  {
+    hasDescription && (
+      <p class="x-field__help" id={ids.help}>
+        {Astro.slots.has('description') ? <slot name="description" /> : description}
+      </p>
+    )
+  }
+  {
+    hasError && (
+      <p class="x-field__error" id={ids.error}>
+        {Astro.slots.has('error') ? <slot name="error" /> : error}
+      </p>
+    )
+  }
+</fieldset>

package/dist/components/field/radio.astro

@@ -0,0 +1,17 @@
+---
+import './field.css'
+import type { HTMLAttributes } from 'astro/types'
+import { choiceClass } from './index.js'
+
+type Props = Omit<HTMLAttributes<'input'>, 'class' | 'type' | 'role'> & {
+  class?: string
+}
+
+const { class: className, ...rest } = Astro.props
+const input = { ...rest, type: 'radio' as const, class: 'x-radio__input' }
+---
+
+<label class={choiceClass('radio', { className })}>
+  <input {...input} />
+  <span class="x-radio__label"><slot /></span>
+</label>

package/dist/components/field/select.astro

@@ -0,0 +1,13 @@
+---
+import './field.css'
+import type { HTMLAttributes } from 'astro/types'
+import { selectClass } from './index.js'
+
+type Props = Omit<HTMLAttributes<'select'>, 'class'> & {
+  class?: string
+}
+
+const { class: className, ...rest } = Astro.props
+---
+
+<select {...{ ...rest, class: selectClass({ className }) }}><slot /></select>

package/dist/components/field/switch.astro

@@ -0,0 +1,17 @@
+---
+import './field.css'
+import type { HTMLAttributes } from 'astro/types'
+import { choiceClass } from './index.js'
+
+type Props = Omit<HTMLAttributes<'input'>, 'class' | 'type' | 'role'> & {
+  class?: string
+}
+
+const { class: className, ...rest } = Astro.props
+const input = { ...rest, type: 'checkbox' as const, role: 'switch' as const, class: 'x-switch__input' }
+---
+
+<label class={choiceClass('switch', { className })}>
+  <input {...input} />
+  <span class="x-switch__label"><slot /></span>
+</label>