@neumorphism-ui/elements 1.0.0-next.1 → 1.0.0-next.2

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,98 @@
+import { TextControlElement } from '../shared/text-control.js';
+export declare class NeuTextarea extends TextControlElement {
+    static def: import("../../ssr.js").ComponentDef<{
+        readonly value: {
+            readonly type: "string";
+        };
+        readonly name: {
+            readonly type: "string";
+            readonly reflect: true;
+        };
+        readonly label: {
+            readonly type: "string";
+        };
+        readonly placeholder: {
+            readonly type: "string";
+        };
+        readonly helpText: {
+            readonly type: "string";
+        };
+        readonly errorText: {
+            readonly type: "string";
+        };
+        readonly required: {
+            readonly type: "boolean";
+            readonly reflect: true;
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+            readonly reflect: true;
+        };
+        readonly readOnly: {
+            readonly type: "boolean";
+            readonly reflect: true;
+            readonly attribute: "readonly";
+        };
+        readonly minLength: {
+            readonly type: "number";
+            readonly default: -1;
+            readonly attribute: "minlength";
+        };
+        readonly maxLength: {
+            readonly type: "number";
+            readonly default: -1;
+            readonly attribute: "maxlength";
+        };
+        readonly autocomplete: {
+            readonly type: "string";
+        };
+        readonly enterKeyHint: {
+            readonly type: "string";
+            readonly attribute: "enterkeyhint";
+        };
+        readonly rows: {
+            readonly type: "number";
+            readonly default: 3;
+        };
+        readonly resize: {
+            readonly type: "string";
+            readonly default: "vertical";
+            readonly values: readonly ["none", "vertical", "auto"];
+            readonly reflect: true;
+        };
+        readonly size: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["sm", "md", "lg"];
+            readonly reflect: true;
+        };
+    }>;
+    static extraProperties: string[];
+    minLength: number;
+    maxLength: number;
+    rows: number;
+    resize: 'none' | 'vertical' | 'auto';
+    size: 'sm' | 'md' | 'lg';
+    protected readonly commitProps: readonly ["value", "required", "disabled", "readOnly", "minLength", "maxLength", "errorText", "autocomplete"];
+    private get tp();
+    get value(): string;
+    set value(next: string);
+    protected probe(value: string): HTMLTextAreaElement;
+    private sizeWatch;
+    private sizeFrame;
+    private lastWidth;
+    /**
+     * Re-fits when the width changes or the box first gets a layout (it was hidden, or server
+     * rendered); its own height changes keep the width, so they do not loop.
+     */
+    private watchSize;
+    private stopWatch;
+    /** resize="auto": fit the height to the content, never below the rows height. */
+    private grow;
+    protected connected(): void;
+    protected disconnected(): void;
+    protected rendered(): void;
+    protected update(changed: ReadonlySet<string>): void;
+    protected resetToDefault(): void;
+    protected restoreState(state: string): void;
+}

package/dist/components/textarea/textarea.def.d.ts

@@ -0,0 +1,139 @@
+import type { InferProps } from '../../core/props.js';
+declare const props: {
+    readonly value: {
+        readonly type: "string";
+    };
+    readonly name: {
+        readonly type: "string";
+        readonly reflect: true;
+    };
+    readonly label: {
+        readonly type: "string";
+    };
+    readonly placeholder: {
+        readonly type: "string";
+    };
+    readonly helpText: {
+        readonly type: "string";
+    };
+    readonly errorText: {
+        readonly type: "string";
+    };
+    readonly required: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly disabled: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly readOnly: {
+        readonly type: "boolean";
+        readonly reflect: true;
+        readonly attribute: "readonly";
+    };
+    readonly minLength: {
+        readonly type: "number";
+        readonly default: -1;
+        readonly attribute: "minlength";
+    };
+    readonly maxLength: {
+        readonly type: "number";
+        readonly default: -1;
+        readonly attribute: "maxlength";
+    };
+    readonly autocomplete: {
+        readonly type: "string";
+    };
+    readonly enterKeyHint: {
+        readonly type: "string";
+        readonly attribute: "enterkeyhint";
+    };
+    readonly rows: {
+        readonly type: "number";
+        readonly default: 3;
+    };
+    readonly resize: {
+        readonly type: "string";
+        readonly default: "vertical";
+        readonly values: readonly ["none", "vertical", "auto"];
+        readonly reflect: true;
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+};
+export type TextareaProps = InferProps<typeof props>;
+/** A row count the native textarea would also accept; anything else means the default of 3. */
+export declare function rowsOf(rows: number): number;
+export declare const textareaDef: import("../../core/define.js").ComponentDef<{
+    readonly value: {
+        readonly type: "string";
+    };
+    readonly name: {
+        readonly type: "string";
+        readonly reflect: true;
+    };
+    readonly label: {
+        readonly type: "string";
+    };
+    readonly placeholder: {
+        readonly type: "string";
+    };
+    readonly helpText: {
+        readonly type: "string";
+    };
+    readonly errorText: {
+        readonly type: "string";
+    };
+    readonly required: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly disabled: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly readOnly: {
+        readonly type: "boolean";
+        readonly reflect: true;
+        readonly attribute: "readonly";
+    };
+    readonly minLength: {
+        readonly type: "number";
+        readonly default: -1;
+        readonly attribute: "minlength";
+    };
+    readonly maxLength: {
+        readonly type: "number";
+        readonly default: -1;
+        readonly attribute: "maxlength";
+    };
+    readonly autocomplete: {
+        readonly type: "string";
+    };
+    readonly enterKeyHint: {
+        readonly type: "string";
+        readonly attribute: "enterkeyhint";
+    };
+    readonly rows: {
+        readonly type: "number";
+        readonly default: 3;
+    };
+    readonly resize: {
+        readonly type: "string";
+        readonly default: "vertical";
+        readonly values: readonly ["none", "vertical", "auto"];
+        readonly reflect: true;
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+}>;
+export {};

package/dist/components/textarea/textarea.def.js

@@ -0,0 +1,65 @@
+import { defineComponent } from '../../core/define.js';
+import { html } from '../../core/html.js';
+import { themeCssProperties } from '../../core/styles.js';
+import { textareaStyles } from './textarea.styles.js';
+const props = {
+    value: { type: 'string' },
+    name: { type: 'string', reflect: true },
+    label: { type: 'string' },
+    placeholder: { type: 'string' },
+    helpText: { type: 'string' },
+    errorText: { type: 'string' },
+    required: { type: 'boolean', reflect: true },
+    disabled: { type: 'boolean', reflect: true },
+    readOnly: { type: 'boolean', reflect: true, attribute: 'readonly' },
+    minLength: { type: 'number', default: -1, attribute: 'minlength' },
+    maxLength: { type: 'number', default: -1, attribute: 'maxlength' },
+    autocomplete: { type: 'string' },
+    enterKeyHint: { type: 'string', attribute: 'enterkeyhint' },
+    rows: { type: 'number', default: 3 },
+    resize: {
+        type: 'string',
+        default: 'vertical',
+        values: ['none', 'vertical', 'auto'],
+        reflect: true,
+    },
+    size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+};
+/** A row count the native textarea would also accept; anything else means the default of 3. */
+export function rowsOf(rows) {
+    return Number.isInteger(rows) && rows >= 1 ? rows : 3;
+}
+/** Attributes of the inner <textarea> that only appear when set. */
+function areaAttributes(p) {
+    return html `${p.placeholder ? html ` placeholder="${p.placeholder}"` : ''}${p.required ? html ` required` : ''}${p.disabled ? html ` disabled` : ''}${p.readOnly ? html ` readonly` : ''}${p.minLength >= 0 ? html ` minlength="${p.minLength}"` : ''}${p.maxLength >= 0 ? html ` maxlength="${p.maxLength}"` : ''}${p.autocomplete ? html ` autocomplete="${p.autocomplete}"` : ''}${p.enterKeyHint ? html ` enterkeyhint="${p.enterKeyHint}"` : ''}`;
+}
+export const textareaDef = defineComponent({
+    tag: 'neu-textarea',
+    props,
+    delegatesFocus: true,
+    form: { valueProp: 'value' },
+    styles: textareaStyles,
+    // The newline after the opening tag is dropped by the HTML parser, so a value that itself starts
+    // with a newline keeps it.
+    template: (p) => html `<div part="base" class="base"><label part="label" class="label" for="input"><slot name="label"><span class="label-text" data-ref="label-text">${p.label}</span></slot></label><div part="control" class="control"><textarea part="textarea" class="input" id="input" data-ref="input" rows="${rowsOf(p.rows)}" aria-describedby="help"${areaAttributes(p)}>
+${p.value}</textarea></div><div part="help-text" class="help" id="help"><slot name="help-text"><span class="help-text" data-ref="help-text">${p.helpText}</span></slot><span class="error-text" data-ref="error-text">${p.errorText}</span></div></div>`,
+    docs: {
+        summary: 'A multi-line text input with an inset field. The value attribute is the default value; resize="auto" grows the field with its content.',
+        events: [
+            { name: 'input', description: 'Fired on every edit (the native input event, composed).' },
+            { name: 'change', description: 'Fired when an edit is committed, usually on blur.' },
+        ],
+        slots: [
+            { name: 'label', description: 'Rich label; replaces the label attribute.' },
+            { name: 'help-text', description: 'Rich help text; replaces the help-text attribute.' },
+        ],
+        parts: [
+            { name: 'base', description: 'Outer wrapper.' },
+            { name: 'label', description: 'The <label> element.' },
+            { name: 'control', description: 'The inset field around the textarea.' },
+            { name: 'textarea', description: 'The native <textarea>.' },
+            { name: 'help-text', description: 'Help or error text area.' },
+        ],
+        cssProperties: themeCssProperties,
+    },
+});

package/dist/components/textarea/textarea.js

@@ -0,0 +1,101 @@
+import { baseCommitProps, TextControlElement } from '../shared/text-control.js';
+import { rowsOf, textareaDef } from './textarea.def.js';
+export class NeuTextarea extends TextControlElement {
+    static def = textareaDef;
+    static extraProperties = ['defaultValue'];
+    // enterKeyHint is inherited from HTMLElement with the right type.
+    commitProps = baseCommitProps;
+    get tp() {
+        return this.props;
+    }
+    // An accessor override must redefine both halves; a script-set value needs a fresh height.
+    get value() {
+        return super.value;
+    }
+    set value(next) {
+        super.value = next;
+        this.grow();
+    }
+    probe(value) {
+        const probe = document.createElement('textarea');
+        probe.value = value;
+        return probe;
+    }
+    sizeWatch;
+    sizeFrame = 0;
+    lastWidth = -1;
+    /**
+     * Re-fits when the width changes or the box first gets a layout (it was hidden, or server
+     * rendered); its own height changes keep the width, so they do not loop.
+     */
+    watchSize(area, on) {
+        if (!on) {
+            this.stopWatch();
+            return;
+        }
+        if (this.sizeWatch)
+            return;
+        this.lastWidth = -1;
+        this.sizeWatch = new ResizeObserver(([entry]) => {
+            const width = entry?.contentRect.width ?? 0;
+            if (width === this.lastWidth)
+                return;
+            this.lastWidth = width;
+            // Next frame: resizing an observed box inside its own callback reports a
+            // "ResizeObserver loop" error on window.
+            cancelAnimationFrame(this.sizeFrame);
+            this.sizeFrame = requestAnimationFrame(() => this.grow());
+        });
+        this.sizeWatch.observe(area);
+    }
+    stopWatch() {
+        cancelAnimationFrame(this.sizeFrame);
+        this.sizeWatch?.disconnect();
+        this.sizeWatch = undefined;
+    }
+    /** resize="auto": fit the height to the content, never below the rows height. */
+    grow() {
+        const area = this.input;
+        if (!area)
+            return;
+        this.watchSize(area, this.isConnected && this.tp.resize === 'auto');
+        if (this.tp.resize !== 'auto') {
+            area.style.blockSize = '';
+            return;
+        }
+        // Back to the rows height first: scrollHeight is never smaller than the box it sits in.
+        area.style.blockSize = 'auto';
+        const fit = area.scrollHeight;
+        // Not laid out (disconnected or hidden): keep the rows height.
+        if (fit)
+            area.style.blockSize = `${fit}px`;
+    }
+    connected() {
+        super.connected();
+        this.grow();
+    }
+    disconnected() {
+        super.disconnected();
+        this.stopWatch();
+    }
+    rendered() {
+        super.rendered();
+        this.input?.addEventListener('input', () => this.grow());
+    }
+    update(changed) {
+        const area = this.input;
+        if (area && changed.has('rows'))
+            area.rows = rowsOf(this.tp.rows);
+        super.update(changed);
+        if (['value', 'rows', 'resize', 'size'].some((key) => changed.has(key)))
+            this.grow();
+    }
+    resetToDefault() {
+        super.resetToDefault();
+        this.grow();
+    }
+    restoreState(state) {
+        super.restoreState(state);
+        this.grow();
+    }
+}

package/dist/components/textarea/textarea.styles.d.ts

@@ -0,0 +1 @@
+export declare const textareaStyles = "\n:host {\n  --_neu-bg: var(--neu-bg, #e0e5ec);\n  --_neu-accent-c: var(--neu-accent, #6d5dfc);\n  --_neu-d: var(--neu-distance, 6px);\n  --_neu-k: var(--neu-intensity, 1);\n  --_neu-r: var(--neu-radius, 12px);\n  --_neu-danger: var(--neu-danger, #e5484d);\n  --_neu-dur: var(--neu-duration, 150ms);\n  --_neu-sd: var(--neu-shadow-dark, color-mix(in oklab, var(--_neu-bg), black min(100%, calc(var(--_neu-shade, 18%) * var(--_neu-k)))));\n  --_neu-sl: var(--neu-shadow-light, color-mix(in oklab, var(--_neu-bg), white min(100%, calc(var(--_neu-light, 100%) * var(--_neu-k)))));\n  --_neu-fg: var(--neu-fg, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-mix, 32%)));\n  --_neu-fg-muted: var(--neu-fg-muted, color-mix(in oklab, var(--_neu-bg), var(--_neu-ink, black) var(--_neu-fg-muted-mix, 18%)));\n  --_neu-accent-soft: color-mix(in oklab, var(--_neu-accent-c) 25%, var(--_neu-bg));\n  --_neu-focus: 0 0 0 3px color-mix(in oklab, var(--_neu-accent-c) 45%, transparent);\n  --_neu-raised: var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-raised-sm: calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  --_neu-inset: inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) var(--_neu-sd), inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n  --_neu-inset-sm: inset calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) var(--_neu-sd), inset calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n  font-family: var(--neu-font);\n  color: var(--_neu-fg);\n  -webkit-tap-highlight-color: transparent;\n}\n:host(:not(:defined)) { visibility: inherit !important; min-block-size: auto !important; }\n:host([hidden]) { display: none !important; }\n:host(:focus) { outline: none; }\n*, *::before, *::after { box-sizing: border-box; }\n\n:host { display: block; }\n:host(:disabled), :host([disabled]) { cursor: not-allowed; }\n.base { display: flex; flex-direction: column; }\n.label-text, ::slotted([slot='label']) {\n  display: block; margin-block-end: 0.375rem;\n  font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted);\n}\n.label-text:empty { display: none; }\n.control {\n  display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.875rem;\n  border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-inset);\n  transition: box-shadow var(--_neu-dur) ease;\n}\n:host([size='sm']) .control { min-block-size: 2.25rem; padding-inline: 0.75rem; box-shadow: var(--_neu-inset-sm); }\n:host([size='lg']) .control { min-block-size: 3.25rem; padding-inline: 1rem; }\n:host(:focus-within) .control { box-shadow: var(--_neu-inset), var(--_neu-focus); }\n:host(:state(user-invalid)) .control {\n  box-shadow:\n    inset var(--_neu-d) var(--_neu-d) calc(var(--_neu-d) * 2) color-mix(in oklab, var(--_neu-danger) 35%, var(--_neu-sd)),\n    inset calc(var(--_neu-d) * -1) calc(var(--_neu-d) * -1) calc(var(--_neu-d) * 2) var(--_neu-sl);\n}\n:host(:disabled) .control, :host([disabled]) .control { box-shadow: var(--_neu-inset-sm); opacity: 0.6; }\n.input {\n  flex: 1; min-inline-size: 0; align-self: stretch; padding: 0; border: none; outline: none;\n  background: transparent; color: inherit; font: inherit; font-size: 0.9375rem;\n}\n.input::placeholder { color: var(--_neu-fg-muted); opacity: 1; }\n.help { font-size: 0.75rem; color: var(--_neu-fg-muted); }\n.help-text, ::slotted([slot='help-text']) { display: block; margin-block-start: 0.375rem; }\n.help-text:empty { display: none; }\n.error-text { display: none; margin-block-start: 0.375rem; color: var(--_neu-danger); }\n:host(:state(user-invalid)) slot[name='help-text'] { display: none; }\n:host(:state(user-invalid)) .error-text:not(:empty) { display: block; }\n\n.control { align-items: stretch; }\n.input {\n  display: block; box-sizing: border-box; padding-block: 0.625rem; line-height: 1.4; resize: vertical;\n}\n:host([resize='none']) .input { resize: none; }\n:host([resize='auto']) .input { resize: none; overflow: hidden; }\n";

package/dist/components/textarea/textarea.styles.js

@@ -0,0 +1,9 @@
+import { fieldStyles } from '../shared/field.styles.js';
+export const textareaStyles = `${fieldStyles}
+.control { align-items: stretch; }
+.input {
+  display: block; box-sizing: border-box; padding-block: 0.625rem; line-height: 1.4; resize: vertical;
+}
+:host([resize='none']) .input { resize: none; }
+:host([resize='auto']) .input { resize: none; overflow: hidden; }
+`;

package/dist/core/define.d.ts

@@ -15,14 +15,29 @@ export interface FormDef {
     /** The prop whose attribute holds the default value (spec §6.1). */
     readonly valueProp: 'value' | 'checked';
 }
+/** One option child as the server reads it (spec §8.2): its value, label text and disabled state. */
+export interface OptionData {
+    readonly value: string;
+    readonly label: string;
+    readonly disabled?: boolean;
+}
+/** What a server renderer knows beyond the attributes: the option children of a select (§8.3). */
+export interface TemplateContext {
+    readonly options?: readonly OptionData[];
+}
 /** The DOM-free half of a component, shared by the element, SSR, React wrappers and docs. */
 export interface ComponentDef<S extends PropsSchema = PropsSchema> {
     readonly tag: string;
     readonly props: S;
     readonly styles: string;
-    template(props: InferProps<S>): RawHtml;
+    /** The client always renders without `ctx`; only a server renderer passes one. */
+    template(props: InferProps<S>, ctx?: TemplateContext): RawHtml;
     readonly delegatesFocus?: boolean;
     readonly form?: FormDef;
+    /** Properties set only from JS (no attribute), name to TypeScript type, for wrappers and the manifest. Type-only. */
+    readonly properties?: Readonly<Record<string, string>>;
+    /** Tag of the children a server renderer reads into `TemplateContext.options`. */
+    readonly optionsFrom?: string;
     readonly docs: ComponentDocs;
 }
 export declare function defineComponent<const S extends PropsSchema>(def: ComponentDef<S>): ComponentDef<S>;

package/dist/core/form-control.js

@@ -47,7 +47,9 @@ function watchSubmitAttempts() {
         }
     }, { capture: true });
     document.addEventListener('keydown', (event) => {
-        if (event.key !== 'Enter')
+        // Only a native input submits on Enter (neu text/number fields use their inner input); Enter
+        // in a textarea, select or switch is no attempt and must not reveal untouched fields.
+        if (event.key !== 'Enter' || !(event.composedPath()[0] instanceof HTMLInputElement))
             return;
         for (const node of event.composedPath()) {
             // Not document or window: their named properties make `.form` a <form id|name="form">.

package/dist/core/validation.d.ts

@@ -1,4 +1,8 @@
-/** The browser's own, localised "please check this box" message, borrowed from a native checkbox. */
-export declare function requiredCheckboxMessage(): string;
+/**
+ * The browser's own, localised "value missing" message, borrowed once from a required native
+ * control: an input of type `kind` ("checkbox", "radio") or, for "select", a select. `fallback`
+ * covers a browser that reports none.
+ */
+export declare function requiredMessage(kind: 'checkbox' | 'radio' | 'select', fallback: string): string;
 /** Copies a native input's validity so the host can report the same errors. */
 export declare function copyValidity(validity: ValidityState): ValidityStateFlags;

package/dist/core/validation.js

@@ -1,13 +1,20 @@
-let checkboxMessage;
-/** The browser's own, localised "please check this box" message, borrowed from a native checkbox. */
-export function requiredCheckboxMessage() {
-    if (checkboxMessage === undefined) {
-        const probe = document.createElement('input');
-        probe.type = 'checkbox';
+const missing = new Map();
+/**
+ * The browser's own, localised "value missing" message, borrowed once from a required native
+ * control: an input of type `kind` ("checkbox", "radio") or, for "select", a select. `fallback`
+ * covers a browser that reports none.
+ */
+export function requiredMessage(kind, fallback) {
+    let message = missing.get(kind);
+    if (message === undefined) {
+        const probe = kind === 'select'
+            ? document.createElement('select')
+            : Object.assign(document.createElement('input'), { type: kind });
         probe.required = true;
-        checkboxMessage = probe.validationMessage || 'Please check this box if you want to proceed.';
+        message = probe.validationMessage || fallback;
+        missing.set(kind, message);
     }
-    return checkboxMessage;
+    return message;
 }
 /** Copies a native input's validity so the host can report the same errors. */
 export function copyValidity(validity) {

package/dist/number-field.d.ts

@@ -0,0 +1,3 @@
+import { NeuNumberField } from './components/number-field/number-field.js';
+export { NeuNumberField };
+export { numberFieldDef } from './components/number-field/number-field.def.js';

package/dist/number-field.js

@@ -0,0 +1,4 @@
+import { NeuNumberField } from './components/number-field/number-field.js';
+NeuNumberField.define();
+export { NeuNumberField };
+export { numberFieldDef } from './components/number-field/number-field.def.js';

package/dist/option.d.ts

@@ -0,0 +1,3 @@
+import { NeuOption } from './components/option/option.js';
+export { NeuOption };
+export { optionDef } from './components/option/option.def.js';

package/dist/option.js

@@ -0,0 +1,4 @@
+import { NeuOption } from './components/option/option.js';
+NeuOption.define();
+export { NeuOption };
+export { optionDef } from './components/option/option.def.js';

package/dist/radio-group.d.ts

@@ -0,0 +1,4 @@
+import './radio.js';
+import { NeuRadioGroup } from './components/radio-group/radio-group.js';
+export { NeuRadioGroup };
+export { radioGroupDef } from './components/radio-group/radio-group.def.js';

package/dist/radio-group.js

@@ -0,0 +1,6 @@
+// A group is unusable without its radios (tokens hide undefined neu-radio), so define both.
+import './radio.js';
+import { NeuRadioGroup } from './components/radio-group/radio-group.js';
+NeuRadioGroup.define();
+export { NeuRadioGroup };
+export { radioGroupDef } from './components/radio-group/radio-group.def.js';

package/dist/radio.d.ts

@@ -0,0 +1,3 @@
+import { NeuRadio } from './components/radio/radio.js';
+export { NeuRadio };
+export { radioDef } from './components/radio/radio.def.js';

package/dist/radio.js

@@ -0,0 +1,4 @@
+import { NeuRadio } from './components/radio/radio.js';
+NeuRadio.define();
+export { NeuRadio };
+export { radioDef } from './components/radio/radio.def.js';

package/dist/select.d.ts

@@ -0,0 +1,3 @@
+import { NeuSelect } from './components/select/select.js';
+export { NeuSelect };
+export { selectDef } from './components/select/select.def.js';

package/dist/select.js

@@ -0,0 +1,4 @@
+import { NeuSelect } from './components/select/select.js';
+NeuSelect.define();
+export { NeuSelect };
+export { selectDef } from './components/select/select.def.js';

package/dist/slider.d.ts

@@ -0,0 +1,3 @@
+import { NeuSlider } from './components/slider/slider.js';
+export { NeuSlider };
+export { sliderDef } from './components/slider/slider.def.js';

package/dist/slider.js

@@ -0,0 +1,4 @@
+import { NeuSlider } from './components/slider/slider.js';
+NeuSlider.define();
+export { NeuSlider };
+export { sliderDef } from './components/slider/slider.def.js';

package/dist/ssr.d.ts

@@ -1,11 +1,15 @@
-import type { ComponentDef } from './core/define.js';
-export type { ComponentDef, ComponentDocs, DocEntry, FormDef } from './core/define.js';
+import type { ComponentDef, TemplateContext } from './core/define.js';
+export type { ComponentDef, ComponentDocs, DocEntry, FormDef, OptionData, TemplateContext, } from './core/define.js';
 export { formDefaultProp } from './core/define.js';
+export { optionLabel } from './components/option/option-data.js';
 export type { InferProps, PropDecl, PropsSchema, PropValue } from './core/props.js';
 export { attributeName, coerceProperty, parseAttribute, parseProps, serializeAttribute, } from './core/props.js';
 /** Every component definition by tag. DOM-free: safe to import in Node. */
 export declare const definitions: ReadonlyMap<string, ComponentDef>;
 /** Inner HTML of a declarative shadow root: inline styles, then the template. */
-export declare function renderShadowContents(def: ComponentDef, attrs: Readonly<Record<string, string>>): string;
-/** The `<template shadowrootmode>` for one element, or '' for tags this library does not own. */
-export declare function renderDSD(tag: string, attrs: Readonly<Record<string, string>>): string;
+export declare function renderShadowContents(def: ComponentDef, attrs: Readonly<Record<string, string>>, ctx?: TemplateContext): string;
+/**
+ * The `<template shadowrootmode>` for one element, or '' for tags this library does not own.
+ * `ctx` carries what the attributes cannot, such as the options of a select (spec §8.2).
+ */
+export declare function renderDSD(tag: string, attrs: Readonly<Record<string, string>>, ctx?: TemplateContext): string;