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

package/dist/components/icon/icon.def.js

@@ -5,20 +5,13 @@ import { systemIconSvg } from './system-icons.js';
 export const iconDef = defineComponent({
     tag: 'neu-icon',
     props: {
-        name: { type: 'string', reflect: true },
-        library: { type: 'string', default: 'system', reflect: true },
-        label: { type: 'string', reflect: true },
+        name: { type: 'string' },
+        library: { type: 'string', default: 'system' },
+        label: { type: 'string' },
     },
     styles: iconStyles,
     template: (p) => {
         const svg = p.library === 'system' ? systemIconSvg(p.name) : undefined;
         return html `<span class="box" data-ref="box">${svg === undefined ? '' : unsafeHTML(svg)}</span>`;
     },
-    docs: {
-        summary: 'A vector icon from the built-in set or a registered icon library.',
-        events: [],
-        slots: [],
-        parts: [{ name: 'svg', description: 'The rendered SVG element.' }],
-        cssProperties: [],
-    },
 });

package/dist/components/icon/icon.docs.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDocs } from '../../core/define.js';
+export declare const iconDocs: ComponentDocs;

package/dist/components/icon/icon.docs.js

@@ -0,0 +1,13 @@
+export const iconDocs = {
+    summary: 'A vector icon from the built-in set or a registered icon library.',
+    descriptions: {
+        name: 'The name of the icon to show.',
+        library: 'The icon library to take the icon from; defaults to the built-in system set.',
+        label: 'Accessible name that turns the icon into an image; without it the icon is decorative.',
+    },
+    events: [],
+    slots: [],
+    parts: [{ name: 'svg', description: 'The rendered SVG element.' }],
+    cssProperties: [],
+    keyboard: [],
+};

package/dist/components/icon/system-icons.d.ts

@@ -7,6 +7,6 @@ export declare const xBody = "<path d=\"M6 6l12 12M18 6L6 18\"/>";
 export declare const alertCircleBody = "<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 7.5v5.5M12 16.5h.01\"/>";
 export declare const userBody = "<circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 20c0-4 3.6-6 8-6s8 2 8 6\"/>";
 /** The SVG element around an icon body. DOM-free. */
-export declare function svgWrap(body: string): string;
+export declare function svgWrap(body: string, part?: string): string;
 /** The built-in icon as an SVG string, or undefined for an unknown name. DOM-free. */
 export declare function systemIconSvg(name: string): string | undefined;

package/dist/components/icon/system-icons.js

@@ -18,11 +18,11 @@ const BODIES = {
     user: userBody,
 };
 /** The SVG element around an icon body. DOM-free. */
-export function svgWrap(body) {
-    return `<svg part="svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${body}</svg>`;
+export function svgWrap(body, part) {
+    return `<svg${part ? ` part="${part}"` : ''} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${body}</svg>`;
 }
 /** The built-in icon as an SVG string, or undefined for an unknown name. DOM-free. */
 export function systemIconSvg(name) {
     const body = Object.hasOwn(BODIES, name) ? BODIES[name] : undefined;
-    return body === undefined ? undefined : svgWrap(body);
+    return body === undefined ? undefined : svgWrap(body, 'svg');
 }

package/dist/components/icon-button/icon-button.d.ts

@@ -15,29 +15,24 @@ export declare class NeuIconButton extends NeuButton {
             readonly type: "string";
             readonly default: "circle";
             readonly values: readonly ["circle", "square"];
-            readonly reflect: true;
         };
         readonly variant: {
             readonly type: "string";
             readonly default: "default";
             readonly values: readonly ["default", "primary", "flat"];
-            readonly reflect: true;
         };
         readonly size: {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["sm", "md", "lg"];
-            readonly reflect: true;
         };
         readonly disabled: {
             readonly type: "boolean";
-            readonly reflect: true;
         };
         readonly type: {
             readonly type: "string";
             readonly default: "button";
             readonly values: readonly ["button", "submit", "reset"];
-            readonly reflect: true;
         };
     }>;
     icon: string;

package/dist/components/icon-button/icon-button.def.d.ts

@@ -13,28 +13,23 @@ export declare const iconButtonDef: import("../../core/define.js").ComponentDef<
         readonly type: "string";
         readonly default: "circle";
         readonly values: readonly ["circle", "square"];
-        readonly reflect: true;
     };
     readonly variant: {
         readonly type: "string";
         readonly default: "default";
         readonly values: readonly ["default", "primary", "flat"];
-        readonly reflect: true;
     };
     readonly size: {
         readonly type: "string";
         readonly default: "md";
         readonly values: readonly ["sm", "md", "lg"];
-        readonly reflect: true;
     };
     readonly disabled: {
         readonly type: "boolean";
-        readonly reflect: true;
     };
     readonly type: {
         readonly type: "string";
         readonly default: "button";
         readonly values: readonly ["button", "submit", "reset"];
-        readonly reflect: true;
     };
 }>;

package/dist/components/icon-button/icon-button.def.js

@@ -1,6 +1,5 @@
 import { defineComponent } from '../../core/define.js';
 import { html, unsafeHTML } from '../../core/html.js';
-import { themeCssProperties } from '../../core/styles.js';
 import { systemIconSvg } from '../icon/system-icons.js';
 import { iconButtonStyles } from './icon-button.styles.js';
 export const iconButtonDef = defineComponent({
@@ -9,20 +8,18 @@ export const iconButtonDef = defineComponent({
         icon: { type: 'string' },
         library: { type: 'string', default: 'system' },
         label: { type: 'string' },
-        shape: { type: 'string', default: 'circle', values: ['circle', 'square'], reflect: true },
+        shape: { type: 'string', default: 'circle', values: ['circle', 'square'] },
         variant: {
             type: 'string',
             default: 'default',
             values: ['default', 'primary', 'flat'],
-            reflect: true,
         },
-        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
-        disabled: { type: 'boolean', reflect: true },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
+        disabled: { type: 'boolean' },
         type: {
             type: 'string',
             default: 'button',
             values: ['button', 'submit', 'reset'],
-            reflect: true,
         },
     },
     styles: iconButtonStyles,
@@ -30,15 +27,4 @@ export const iconButtonDef = defineComponent({
         const svg = p.library === 'system' ? systemIconSvg(p.icon) : undefined;
         return html `<span part="base" class="base"><span part="icon" class="icon" data-ref="icon">${svg === undefined ? '' : unsafeHTML(svg)}</span></span>`;
     },
-    docs: {
-        summary: 'A raised button that shows an icon instead of a label. Name it with label.',
-        events: [{ name: 'click', description: 'Fired on activation; never while disabled.' }],
-        slots: [],
-        parts: [
-            { name: 'base', description: 'The raised surface.' },
-            { name: 'icon', description: 'Wrapper around the icon.' },
-            { name: 'svg', description: 'The rendered SVG element.' },
-        ],
-        cssProperties: themeCssProperties,
-    },
 });

package/dist/components/icon-button/icon-button.docs.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDocs } from '../../core/define.js';
+export declare const iconButtonDocs: ComponentDocs;

package/dist/components/icon-button/icon-button.docs.js

@@ -0,0 +1,26 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const iconButtonDocs = {
+    summary: 'A raised button that shows an icon instead of a label. Name it with label.',
+    descriptions: {
+        icon: 'The name of the icon to show.',
+        library: 'The icon library to take the icon from; defaults to the built-in system set.',
+        label: 'Accessible name of the button, since it has no visible text.',
+        shape: 'The outline of the button.',
+        variant: 'The visual emphasis of the button.',
+        size: 'The button size.',
+        disabled: 'Prevents interaction and dims the button.',
+        type: 'What the button does inside a form; defaults to "button", which does nothing.',
+    },
+    events: [{ name: 'click', description: 'Fired on activation; never while disabled.' }],
+    slots: [],
+    parts: [
+        { name: 'base', description: 'The raised surface.' },
+        { name: 'icon', description: 'Wrapper around the icon.' },
+        { name: 'svg', description: 'The rendered SVG element.' },
+    ],
+    cssProperties: themeCssProperties,
+    keyboard: [
+        { name: 'Enter', description: 'Activates the button on keydown.' },
+        { name: 'Space', description: 'Activates the button on keyup, like a native button.' },
+    ],
+};

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

@@ -19,7 +19,6 @@ export declare class NeuNumberField extends TextControlElement {
         };
         readonly name: {
             readonly type: "string";
-            readonly reflect: true;
         };
         readonly label: {
             readonly type: "string";
@@ -35,22 +34,18 @@ export declare class NeuNumberField extends TextControlElement {
         };
         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 size: {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["sm", "md", "lg"];
-            readonly reflect: true;
         };
         readonly incrementLabel: {
             readonly type: "string";

package/dist/components/number-field/number-field.def.d.ts

@@ -17,7 +17,6 @@ declare const props: {
     };
     readonly name: {
         readonly type: "string";
-        readonly reflect: true;
     };
     readonly label: {
         readonly type: "string";
@@ -33,22 +32,18 @@ declare const props: {
     };
     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 size: {
         readonly type: "string";
         readonly default: "md";
         readonly values: readonly ["sm", "md", "lg"];
-        readonly reflect: true;
     };
     readonly incrementLabel: {
         readonly type: "string";
@@ -80,7 +75,6 @@ export declare const numberFieldDef: import("../../core/define.js").ComponentDef
     };
     readonly name: {
         readonly type: "string";
-        readonly reflect: true;
     };
     readonly label: {
         readonly type: "string";
@@ -96,22 +90,18 @@ export declare const numberFieldDef: import("../../core/define.js").ComponentDef
     };
     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 size: {
         readonly type: "string";
         readonly default: "md";
         readonly values: readonly ["sm", "md", "lg"];
-        readonly reflect: true;
     };
     readonly incrementLabel: {
         readonly type: "string";

package/dist/components/number-field/number-field.def.js

@@ -1,6 +1,5 @@
 import { defineComponent } from '../../core/define.js';
 import { html, unsafeHTML } from '../../core/html.js';
-import { themeCssProperties } from '../../core/styles.js';
 import { minusBody, plusBody, svgWrap } from '../icon/system-icons.js';
 import { stepUnit } from '../shared/step.js';
 import { numberFieldStyles } from './number-field.styles.js';
@@ -9,15 +8,15 @@ const props = {
     min: { type: 'number', default: Number.NaN },
     max: { type: 'number', default: Number.NaN },
     step: { type: 'number', default: 1 },
-    name: { type: 'string', reflect: true },
+    name: { type: 'string' },
     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' },
-    size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+    required: { type: 'boolean' },
+    disabled: { type: 'boolean' },
+    readOnly: { type: 'boolean', attribute: 'readonly' },
+    size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
     incrementLabel: { type: 'string', default: 'Increase' },
     decrementLabel: { type: 'string', default: 'Decrease' },
 };
@@ -38,25 +37,4 @@ export const numberFieldDef = defineComponent({
         const off = p.disabled || p.readOnly ? html ` disabled` : '';
         return 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"><button part="decrement" class="step" type="button" tabindex="-1" aria-label="${p.decrementLabel}" data-ref="decrement"${off}>${icon(minusBody)}</button><input part="input" class="input" id="input" data-ref="input" type="number" value="${p.value}" step="${stepUnit(p.step)}" aria-describedby="help"${inputAttributes(p)}><button part="increment" class="step" type="button" tabindex="-1" aria-label="${p.incrementLabel}" data-ref="increment"${off}>${icon(plusBody)}</button></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 numeric input with an inset field and stepper buttons. The value attribute is the default value.',
-        events: [
-            { name: 'input', description: 'Fired on every edit and every step (composed).' },
-            { name: 'change', description: 'Fired when an edit is committed, or after each step.' },
-        ],
-        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 input and buttons.' },
-            { name: 'input', description: 'The native <input type="number">.' },
-            { name: 'decrement', description: 'The button that lowers the value.' },
-            { name: 'increment', description: 'The button that raises the value.' },
-            { name: 'help-text', description: 'Help or error text area.' },
-        ],
-        cssProperties: themeCssProperties,
-    },
 });

package/dist/components/number-field/number-field.docs.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDocs } from '../../core/define.js';
+export declare const numberFieldDocs: ComponentDocs;

package/dist/components/number-field/number-field.docs.js

@@ -0,0 +1,45 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const numberFieldDocs = {
+    summary: 'A numeric input with an inset field and stepper buttons. The value attribute is the default value.',
+    descriptions: {
+        value: 'The current number as typed or set by script, as a string.',
+        min: 'The lowest accepted value, also the target of the Home key.',
+        max: 'The highest accepted value, also the target of the End key.',
+        step: 'The amount one step changes the value by, and the granularity values must match.',
+        name: 'The name under which the value is submitted with a form.',
+        label: 'Visible label text; the label slot replaces it.',
+        placeholder: 'Hint shown while the field is empty.',
+        helpText: 'Guidance shown below the field; the help-text slot replaces it.',
+        errorText: "Shown in place of the browser's validation message once the field is invalid after user interaction; does not itself make the field invalid.",
+        required: 'Makes the form invalid while the field is empty.',
+        disabled: 'Prevents interaction and leaves the field out of form submission.',
+        readOnly: 'Keeps the value visible and submitted but not editable.',
+        size: 'The field size.',
+        incrementLabel: 'Accessible name of the button that raises the value; defaults to "Increase".',
+        decrementLabel: 'Accessible name of the button that lowers the value; defaults to "Decrease".',
+        defaultValue: 'The value the field starts with, which a form reset restores; set by the value attribute.',
+    },
+    events: [
+        { name: 'input', description: 'Fired on every edit and every step (composed).' },
+        { name: 'change', description: 'Fired when an edit is committed, or after each step.' },
+    ],
+    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 input and buttons.' },
+        { name: 'input', description: 'The native <input type="number">.' },
+        { name: 'decrement', description: 'The button that lowers the value.' },
+        { name: 'increment', description: 'The button that raises the value.' },
+        { name: 'help-text', description: 'Help or error text area.' },
+    ],
+    cssProperties: themeCssProperties,
+    keyboard: [
+        { name: 'ArrowUp / ArrowDown', description: 'Steps the value up or down by step.' },
+        { name: 'PageUp / PageDown', description: 'Steps the value up or down by ten times step.' },
+        { name: 'Home / End', description: 'Sets the value to min or max, when set.' },
+    ],
+};

package/dist/components/number-field/number-field.js

@@ -1,4 +1,4 @@
-import { afterDispatch, setOptionalAttribute } from '../../core/dom.js';
+import { afterDispatch, composing, setOptionalAttribute } from '../../core/dom.js';
 import { baseCommitProps, TextControlElement } from '../shared/text-control.js';
 import { BLOCKS_IMPLICIT_SUBMIT, implicitSubmit } from '../text-field/implicit-submit.js';
 import { stepUnit } from '../shared/step.js';
@@ -69,7 +69,7 @@ export class NeuNumberField extends TextControlElement {
         }
     }
     controlKeyDown(event) {
-        if (event.isComposing)
+        if (composing(event))
             return;
         if (event.key === 'Enter') {
             // Like a native input: submit once the keydown has finished dispatching, unless cancelled.

package/dist/components/number-field/number-field.styles.d.ts

@@ -1 +1 @@
-export declare const numberFieldStyles = "\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.input { appearance: textfield; text-align: center; }\n.input::-webkit-inner-spin-button, .input::-webkit-outer-spin-button { appearance: none; margin: 0; }\n.step {\n  display: inline-flex; flex: none; align-items: center; justify-content: center;\n  inline-size: 1.75rem; block-size: 1.75rem; padding: 0; border: none; border-radius: 50%;\n  background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-raised-sm);\n  font: inherit; cursor: pointer;\n  transition: box-shadow var(--_neu-dur) ease;\n}\n.step:active:not(:disabled) { box-shadow: var(--_neu-inset-sm); }\n.step:disabled { box-shadow: none; color: var(--_neu-fg-muted); cursor: not-allowed; }\n.step svg { inline-size: 1rem; block-size: 1rem; }\n";
+export declare const numberFieldStyles = "\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 { font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted); }\n.label-text, ::slotted([slot='label']) { display: block; margin-block-end: 0.375rem; }\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.input { appearance: textfield; text-align: center; }\n.input::-webkit-inner-spin-button, .input::-webkit-outer-spin-button { appearance: none; margin: 0; }\n.step {\n  display: inline-flex; flex: none; align-items: center; justify-content: center;\n  inline-size: 1.75rem; block-size: 1.75rem; padding: 0; border: none; border-radius: 50%;\n  background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-raised-sm);\n  font: inherit; cursor: pointer;\n  transition: box-shadow var(--_neu-dur) ease;\n}\n.step:active:not(:disabled) { box-shadow: var(--_neu-inset-sm); }\n.step:disabled { box-shadow: none; color: var(--_neu-fg-muted); cursor: not-allowed; }\n.step svg { inline-size: 1rem; block-size: 1rem; }\n";

package/dist/components/option/option.d.ts

@@ -3,11 +3,9 @@ export declare class NeuOption extends NeuElement {
     static def: import("../../ssr.js").ComponentDef<{
         readonly value: {
             readonly type: "string";
-            readonly reflect: true;
         };
         readonly disabled: {
             readonly type: "boolean";
-            readonly reflect: true;
         };
     }>;
     disabled: boolean;

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

@@ -1,10 +1,8 @@
 export declare const optionDef: import("../../core/define.js").ComponentDef<{
     readonly value: {
         readonly type: "string";
-        readonly reflect: true;
     };
     readonly disabled: {
         readonly type: "boolean";
-        readonly reflect: true;
     };
 }>;

package/dist/components/option/option.def.js

@@ -4,16 +4,9 @@ import { optionStyles } from './option.styles.js';
 export const optionDef = defineComponent({
     tag: 'neu-option',
     props: {
-        value: { type: 'string', reflect: true },
-        disabled: { type: 'boolean', reflect: true },
+        value: { type: 'string' },
+        disabled: { type: 'boolean' },
     },
     styles: optionStyles,
     template: () => html `<slot></slot>`,
-    docs: {
-        summary: 'One choice of a neu-select. It is data only and never rendered: the select reads its value (the value attribute, or the label when there is none), its text as the label, and disabled.',
-        events: [],
-        slots: [{ name: '', description: 'The label, as plain text.' }],
-        parts: [],
-        cssProperties: [],
-    },
 });

package/dist/components/option/option.docs.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDocs } from '../../core/define.js';
+export declare const optionDocs: ComponentDocs;

package/dist/components/option/option.docs.js

@@ -0,0 +1,12 @@
+export const optionDocs = {
+    summary: 'One choice of a neu-select. It is data only and never rendered: the select reads its value (the value attribute, or the label when there is none), its text as the label, and disabled.',
+    descriptions: {
+        value: 'The value the select takes when this option is chosen; the label is used when it is missing.',
+        disabled: 'Keeps the option visible but not selectable.',
+    },
+    events: [],
+    slots: [{ name: '', description: 'The label, as plain text.' }],
+    parts: [],
+    cssProperties: [],
+    keyboard: [],
+};

package/dist/components/radio/radio.d.ts

@@ -6,11 +6,9 @@ export declare class NeuRadio extends NeuElement {
         readonly value: {
             readonly type: "string";
             readonly default: "on";
-            readonly reflect: true;
         };
         readonly disabled: {
             readonly type: "boolean";
-            readonly reflect: true;
         };
     }>;
     value: string;

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

@@ -2,10 +2,8 @@ export declare const radioDef: import("../../core/define.js").ComponentDef<{
     readonly value: {
         readonly type: "string";
         readonly default: "on";
-        readonly reflect: true;
     };
     readonly disabled: {
         readonly type: "boolean";
-        readonly reflect: true;
     };
 }>;

package/dist/components/radio/radio.def.js

@@ -1,25 +1,12 @@
 import { defineComponent } from '../../core/define.js';
 import { html } from '../../core/html.js';
-import { themeCssProperties } from '../../core/styles.js';
 import { radioStyles } from './radio.styles.js';
 export const radioDef = defineComponent({
     tag: 'neu-radio',
     props: {
-        value: { type: 'string', default: 'on', reflect: true },
-        disabled: { type: 'boolean', reflect: true },
+        value: { type: 'string', default: 'on' },
+        disabled: { type: 'boolean' },
     },
     styles: radioStyles,
     template: () => html `<span part="base" class="base"><span part="control" class="control"><span part="indicator" class="indicator"></span></span><span part="label" class="label"><slot></slot></span></span>`,
-    docs: {
-        summary: 'One choice inside a neu-radio-group, which owns the value, the keyboard and the form. On its own it does nothing.',
-        events: [],
-        slots: [{ name: '', description: 'Label; also the accessible name.' }],
-        parts: [
-            { name: 'base', description: 'Wrapper around control and label.' },
-            { name: 'control', description: 'The inset ring.' },
-            { name: 'indicator', description: 'The dot shown when selected.' },
-            { name: 'label', description: 'Wrapper around the default slot.' },
-        ],
-        cssProperties: themeCssProperties,
-    },
 });

package/dist/components/radio/radio.docs.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentDocs } from '../../core/define.js';
+export declare const radioDocs: ComponentDocs;

package/dist/components/radio/radio.docs.js

@@ -0,0 +1,18 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const radioDocs = {
+    summary: 'One choice inside a neu-radio-group, which owns the value, the keyboard and the form. On its own it does nothing.',
+    descriptions: {
+        value: 'The value the group takes when this radio is selected; defaults to "on".',
+        disabled: 'Prevents this radio from being selected or focused by arrow keys.',
+    },
+    events: [],
+    slots: [{ name: '', description: 'Label; also the accessible name.' }],
+    parts: [
+        { name: 'base', description: 'Wrapper around control and label.' },
+        { name: 'control', description: 'The inset ring.' },
+        { name: 'indicator', description: 'The dot shown when selected.' },
+        { name: 'label', description: 'Wrapper around the default slot.' },
+    ],
+    cssProperties: themeCssProperties,
+    keyboard: [],
+};

package/dist/components/radio-group/radio-group.d.ts

@@ -7,24 +7,20 @@ export declare class NeuRadioGroup extends FormControlElement {
         };
         readonly name: {
             readonly type: "string";
-            readonly reflect: true;
         };
         readonly value: {
             readonly type: "string";
         };
         readonly required: {
             readonly type: "boolean";
-            readonly reflect: true;
         };
         readonly disabled: {
             readonly type: "boolean";
-            readonly reflect: true;
         };
         readonly orientation: {
             readonly type: "string";
             readonly default: "vertical";
             readonly values: readonly ["vertical", "horizontal"];
-            readonly reflect: true;
         };
     }>;
     static extraProperties: string[];
@@ -64,6 +60,9 @@ export declare class NeuRadioGroup extends FormControlElement {
      * Radios that are not upgraded yet are skipped; they ask for a resync when they connect.
      */
     private sync;
+    /** The group's name: the slotted label's text when there is one, else the label attribute. */
+    private nameGroup;
+    protected rendered(): void;
     protected willUpdate(changed: ReadonlySet<string>): void;
     protected update(changed: ReadonlySet<string>): void;
     protected connected(): void;