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

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

@@ -18,23 +18,19 @@ export declare const radioGroupDef: import("../../core/define.js").ComponentDef<
     };
     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;
     };
 }>;

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

@@ -1,6 +1,5 @@
 import { defineComponent } from '../../core/define.js';
 import { html } from '../../core/html.js';
-import { themeCssProperties } from '../../core/styles.js';
 import { radioGroupStyles } from './radio-group.styles.js';
 /**
  * Escapes a value for a double-quoted CSS string. Besides the characters that end the string,
@@ -25,31 +24,17 @@ export const radioGroupDef = defineComponent({
     tag: 'neu-radio-group',
     props: {
         label: { type: 'string' },
-        name: { type: 'string', reflect: true },
+        name: { type: 'string' },
         value: { type: 'string' },
-        required: { type: 'boolean', reflect: true },
-        disabled: { type: 'boolean', reflect: true },
+        required: { type: 'boolean' },
+        disabled: { type: 'boolean' },
         orientation: {
             type: 'string',
             default: 'vertical',
             values: ['vertical', 'horizontal'],
-            reflect: true,
         },
     },
     form: { valueProp: 'value' },
     styles: radioGroupStyles,
-    template: (p) => html `<div part="base" class="base"><span part="label" class="label" data-ref="label">${p.label}</span><span class="items"><slot></slot></span><style data-ref="mark">${markRule(p.value)}</style></div>`,
-    docs: {
-        summary: 'A group of neu-radio elements with one selected value, arrow-key navigation and form support. The value attribute is the default value.',
-        events: [
-            { name: 'input', description: 'Fired when the user selects a radio.' },
-            { name: 'change', description: 'Fired after input when the user selects a radio.' },
-        ],
-        slots: [{ name: '', description: 'neu-radio elements.' }],
-        parts: [
-            { name: 'base', description: 'Outer wrapper.' },
-            { name: 'label', description: 'The group label.' },
-        ],
-        cssProperties: themeCssProperties,
-    },
+    template: (p) => html `<div part="base" class="base"><span part="label" class="label"><slot name="label"><span class="label-text" data-ref="label-text">${p.label}</span></slot></span><span class="items"><slot></slot></span><style data-ref="mark">${markRule(p.value)}</style></div>`,
 });

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

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

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

@@ -0,0 +1,37 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const radioGroupDocs = {
+    summary: 'A group of neu-radio elements with one selected value, arrow-key navigation and form support. The value attribute is the default value.',
+    descriptions: {
+        label: 'Visible label that names the group.',
+        name: 'The name under which the selected value is submitted with a form.',
+        value: 'The value of the currently selected radio.',
+        required: 'Makes the form invalid until a radio is selected.',
+        disabled: 'Prevents interaction with every radio in the group.',
+        orientation: 'The direction the radios are laid out in.',
+        defaultValue: 'The value selected at the start, which a form reset restores; set by the value attribute.',
+    },
+    events: [
+        { name: 'input', description: 'Fired when the user selects a radio.' },
+        { name: 'change', description: 'Fired after input when the user selects a radio.' },
+    ],
+    slots: [
+        { name: '', description: 'neu-radio elements.' },
+        { name: 'label', description: 'Rich label; replaces the label attribute.' },
+    ],
+    parts: [
+        { name: 'base', description: 'Outer wrapper.' },
+        { name: 'label', description: 'The group label.' },
+    ],
+    cssProperties: themeCssProperties,
+    keyboard: [
+        {
+            name: 'ArrowDown / ArrowRight',
+            description: 'Moves to the next radio and selects it, wrapping and skipping disabled radios; ArrowLeft and ArrowRight swap in right-to-left text.',
+        },
+        {
+            name: 'ArrowUp / ArrowLeft',
+            description: 'Moves to the previous radio and selects it, wrapping and skipping disabled radios; ArrowLeft and ArrowRight swap in right-to-left text.',
+        },
+        { name: 'Space', description: 'Selects the focused radio.' },
+    ],
+};

package/dist/components/radio-group/radio-group.js

@@ -1,4 +1,4 @@
-import { dispatch, setText } from '../../core/dom.js';
+import { dispatch, inSlotted, setText } from '../../core/dom.js';
 import { FormControlElement } from '../../core/form-control.js';
 import { requiredMessage } from '../../core/validation.js';
 import { RESYNC, SET_CHECKED, SET_GROUP_DISABLED } from '../radio/radio-link.js';
@@ -127,14 +127,27 @@ export class NeuRadioGroup extends FormControlElement {
         setText(this.ref('mark'), rule === '' ? '' : rule.value);
         this.commit();
     }
+    /** The group's name: the slotted label's text when there is one, else the label attribute. */
+    nameGroup() {
+        const slot = this.shadowRoot?.querySelector('slot[name="label"]');
+        const text = (slot?.assignedNodes() ?? [])
+            .map((node) => node.textContent)
+            .join('')
+            .replace(/\s+/g, ' ')
+            .trim();
+        this.internals.ariaLabel = text || String(this.props.label) || null;
+    }
+    rendered() {
+        this.shadowRoot.querySelector('slot[name="label"]').addEventListener('slotchange', () => this.nameGroup());
+    }
     willUpdate(changed) {
         if (changed.has('value') && !this.dirty)
             this.current = this.getAttribute('value');
     }
     update(changed) {
         if (changed.has('label')) {
-            setText(this.ref('label'), String(this.props.label));
-            this.internals.ariaLabel = String(this.props.label) || null;
+            setText(this.ref('label-text'), String(this.props.label));
+            this.nameGroup();
         }
         if (changed.has('required'))
             this.internals.ariaRequired = this.props.required ? 'true' : null;
@@ -144,13 +157,24 @@ export class NeuRadioGroup extends FormControlElement {
             this.sync();
     }
     connected() {
-        this.observer ??= new MutationObserver(() => this.sync());
+        // Radios coming, going or changing value or disabled resync the group. Frameworks rewrite the
+        // slotted label's text in place, which fires no slotchange; that renames the group only.
+        this.observer ??= new MutationObserver((records) => {
+            const label = records.filter((record) => inSlotted(this, record.target));
+            if (label.length)
+                this.nameGroup();
+            if (records.some((r) => r.type !== 'characterData' && !label.includes(r)))
+                this.sync();
+        });
         this.observer.observe(this, {
             childList: true,
             subtree: true,
+            characterData: true,
             attributes: true,
             attributeFilter: ['disabled', 'value'],
         });
+        // The label may have changed while the group was detached and nothing was observing.
+        this.nameGroup();
         this.sync();
     }
     disconnected() {

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

@@ -1 +1 @@
-export declare const radioGroupStyles = "\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 {\n  display: block; margin-block-end: 0.5rem;\n  font-size: 0.8125rem; font-weight: 600; color: var(--_neu-fg-muted);\n}\n.label:empty { display: none; }\n.items { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }\n:host([orientation='horizontal']) .items { flex-direction: row; flex-wrap: wrap; align-items: center; }\n:host(:disabled) .items, :host([disabled]) .items { opacity: 0.55; cursor: not-allowed; }\n:host(:state(user-invalid)) .label { color: var(--_neu-danger); }\n";
+export declare const radioGroupStyles = "\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 { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--_neu-fg-muted); }\n.label-text, ::slotted([slot='label']) { display: block; margin-block-end: 0.5rem; }\n.label-text:empty { display: none; }\n.items { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }\n:host([orientation='horizontal']) .items { flex-direction: row; flex-wrap: wrap; align-items: center; }\n:host(:disabled) .items, :host([disabled]) .items { opacity: 0.55; cursor: not-allowed; }\n:host(:state(user-invalid)) .label { color: var(--_neu-danger); }\n";

package/dist/components/radio-group/radio-group.styles.js

@@ -3,11 +3,9 @@ export const radioGroupStyles = `${hostTheme}
 :host { display: block; }
 :host(:disabled), :host([disabled]) { cursor: not-allowed; }
 .base { display: flex; flex-direction: column; }
-.label {
-  display: block; margin-block-end: 0.5rem;
-  font-size: 0.8125rem; font-weight: 600; color: var(--_neu-fg-muted);
-}
-.label:empty { display: none; }
+.label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--_neu-fg-muted); }
+.label-text, ::slotted([slot='label']) { display: block; margin-block-end: 0.5rem; }
+.label-text:empty { display: none; }
 .items { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
 :host([orientation='horizontal']) .items { flex-direction: row; flex-wrap: wrap; align-items: center; }
 :host(:disabled) .items, :host([disabled]) .items { opacity: 0.55; cursor: not-allowed; }

package/dist/components/select/select.d.ts

@@ -6,7 +6,6 @@ export declare class NeuSelect extends FormControlElement {
         };
         readonly name: {
             readonly type: "string";
-            readonly reflect: true;
         };
         readonly label: {
             readonly type: "string";
@@ -22,17 +21,14 @@ export declare class NeuSelect extends FormControlElement {
         };
         readonly required: {
             readonly type: "boolean";
-            readonly reflect: true;
         };
         readonly disabled: {
             readonly type: "boolean";
-            readonly reflect: true;
         };
         readonly size: {
             readonly type: "string";
             readonly default: "md";
             readonly values: readonly ["sm", "md", "lg"];
-            readonly reflect: true;
         };
     }>;
     static extraProperties: string[];
@@ -81,7 +77,7 @@ export declare class NeuSelect extends FormControlElement {
     private activeIndex;
     /** Builds the listbox from the options and places it; the active option stays if it can. */
     private render;
-    /** Makes option `i` the active one (none for -1) and scrolls it into view. */
+    /** Makes option `i` the active one (none for -1); `scroll` brings it into view. */
     private activate;
     /** Puts the listbox under the combobox at its width, or above it when that has more room. */
     private readonly place;

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

@@ -7,7 +7,6 @@ export declare const selectDef: import("../../core/define.js").ComponentDef<{
     };
     readonly name: {
         readonly type: "string";
-        readonly reflect: true;
     };
     readonly label: {
         readonly type: "string";
@@ -23,16 +22,13 @@ export declare const selectDef: import("../../core/define.js").ComponentDef<{
     };
     readonly required: {
         readonly type: "boolean";
-        readonly reflect: true;
     };
     readonly disabled: {
         readonly type: "boolean";
-        readonly reflect: true;
     };
     readonly size: {
         readonly type: "string";
         readonly default: "md";
         readonly values: readonly ["sm", "md", "lg"];
-        readonly reflect: true;
     };
 }>;

package/dist/components/select/select.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 { chevronDownBody, svgWrap } from '../icon/system-icons.js';
 import { selectStyles } from './select.styles.js';
 /** The option a select shows for `value`: the first one whose value matches, as in the client. */
@@ -12,14 +11,14 @@ export const selectDef = defineComponent({
     tag: 'neu-select',
     props: {
         value: { type: 'string' },
-        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 },
-        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+        required: { type: 'boolean' },
+        disabled: { type: 'boolean' },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'] },
     },
     delegatesFocus: true,
     form: { valueProp: 'value' },
@@ -31,29 +30,6 @@ export const selectDef = defineComponent({
         // Options the server could not read (e.g. a custom component's children) leave a set value's
         // display empty rather than showing the placeholder; update() fills it after hydration.
         const unread = !picked && p.value !== '' && ctx?.options?.length === 0;
-        return html `<div part="base" class="base"><span part="label" class="label" id="label" data-ref="label">${p.label}</span><div part="combobox" class="combobox" id="combobox" role="combobox"${p.disabled ? html ` aria-disabled="true"` : html ` tabindex="0"`} aria-haspopup="listbox" aria-expanded="false" aria-controls="listbox" aria-labelledby="label" aria-describedby="help"${p.required ? html ` aria-required="true"` : ''} data-ref="combobox"><span part="display" class="display${picked || unread ? '' : ' placeholder'}" data-ref="display">${picked ? picked.label : unread ? '' : p.placeholder}</span><span part="chevron" class="chevron">${chevron}</span></div><div part="listbox" class="listbox" id="listbox" role="listbox" aria-labelledby="label" popover="auto" data-ref="listbox"></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 single-value select (the APG select-only combobox): a raised trigger and a popover listbox built from the neu-option children, which are data only. The value attribute is the default value.',
-        events: [
-            { name: 'input', description: 'Fired when the user chooses an option with a new value.' },
-            { name: 'change', description: 'Fired after input when the user chooses a new value.' },
-            { name: 'neu-open', description: 'Fired when the listbox opens.' },
-            { name: 'neu-close', description: 'Fired when the listbox closes.' },
-        ],
-        slots: [
-            { name: 'help-text', description: 'Rich help text; replaces the help-text attribute.' },
-        ],
-        parts: [
-            { name: 'base', description: 'Outer wrapper.' },
-            { name: 'label', description: 'The label text.' },
-            { name: 'combobox', description: 'The raised trigger that holds focus.' },
-            { name: 'display', description: 'The selected label, or the placeholder.' },
-            { name: 'chevron', description: 'The chevron icon.' },
-            { name: 'listbox', description: 'The popover list of options.' },
-            { name: 'option', description: 'One option in the listbox.' },
-            { name: 'help-text', description: 'Help or error text area.' },
-        ],
-        cssProperties: themeCssProperties,
+        return html `<div part="base" class="base"><span part="label" class="label" id="label" data-ref="label"><slot name="label"><span class="label-text" data-ref="label-text">${p.label}</span></slot></span><div part="combobox" class="combobox" id="combobox" role="combobox"${p.disabled ? html ` aria-disabled="true"` : html ` tabindex="0"`} aria-haspopup="listbox" aria-expanded="false" aria-controls="listbox" aria-labelledby="label" aria-describedby="help"${p.required ? html ` aria-required="true"` : ''} data-ref="combobox"><span part="display" class="display${picked || unread ? '' : ' placeholder'}" data-ref="display">${picked ? picked.label : unread ? '' : p.placeholder}</span><span part="chevron" class="chevron">${chevron}</span></div><div part="listbox" class="listbox" id="listbox" role="listbox" aria-labelledby="label" popover="auto" data-ref="listbox"></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>`;
     },
 });

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

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

package/dist/components/select/select.docs.js

@@ -0,0 +1,65 @@
+import { themeCssProperties } from '../theme-docs.js';
+export const selectDocs = {
+    summary: 'A single-value select (the APG select-only combobox): a raised trigger and a popover listbox built from the neu-option children, which are data only. The value attribute is the default value.',
+    descriptions: {
+        value: 'The value of the currently chosen option.',
+        name: 'The name under which the value is submitted with a form.',
+        label: 'Visible label text that names the select.',
+        placeholder: 'Text shown while no option is chosen.',
+        helpText: 'Guidance shown below the select; the help-text slot replaces it.',
+        errorText: "Shown in place of the browser's validation message once the select is invalid after user interaction; does not itself make the select invalid.",
+        required: 'Makes the form invalid until an option is chosen.',
+        disabled: 'Prevents interaction and leaves the select out of form submission.',
+        size: 'The select size.',
+        defaultValue: 'The value chosen at the start, which a form reset restores; set by the value attribute.',
+    },
+    events: [
+        { name: 'input', description: 'Fired when the user chooses an option with a new value.' },
+        { name: 'change', description: 'Fired after input when the user chooses a new value.' },
+        { name: 'neu-open', description: 'Fired when the listbox opens.' },
+        { name: 'neu-close', description: 'Fired when the listbox closes.' },
+    ],
+    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 text.' },
+        { name: 'combobox', description: 'The raised trigger that holds focus.' },
+        { name: 'display', description: 'The selected label, or the placeholder.' },
+        { name: 'chevron', description: 'The chevron icon.' },
+        { name: 'listbox', description: 'The popover list of options.' },
+        { name: 'option', description: 'One option in the listbox.' },
+        { name: 'help-text', description: 'Help or error text area.' },
+    ],
+    cssProperties: themeCssProperties,
+    keyboard: [
+        { name: 'ArrowDown / ArrowUp / Enter / Space', description: 'When closed: opens the listbox.' },
+        {
+            name: 'Home / End',
+            description: 'When closed: opens the listbox on the first or last option.',
+        },
+        {
+            name: 'Printable characters',
+            description: 'When closed: opens the listbox on the first matching option.',
+        },
+        {
+            name: 'ArrowDown / ArrowUp',
+            description: 'When open: moves to the next or previous option.',
+        },
+        { name: 'Home / End', description: 'When open: moves to the first or last option.' },
+        { name: 'PageDown / PageUp', description: 'When open: moves ten options.' },
+        { name: 'Enter / Space', description: 'When open: chooses the active option and closes.' },
+        { name: 'Escape', description: 'When open: closes without changing the value.' },
+        {
+            name: 'Tab',
+            description: 'When open: chooses the active option, closes and moves focus on.',
+        },
+        { name: 'Alt+ArrowUp', description: 'When open: chooses the active option and closes.' },
+        {
+            name: 'Printable characters',
+            description: 'When open: moves to the matching option; characters typed within 500 ms add up.',
+        },
+    ],
+};

package/dist/components/select/select.js

@@ -1,4 +1,4 @@
-import { dispatch, setOptionalAttribute, setText } from '../../core/dom.js';
+import { dispatch, inSlotted, setOptionalAttribute, setText } from '../../core/dom.js';
 import { FormControlElement } from '../../core/form-control.js';
 import { requiredMessage } from '../../core/validation.js';
 import { readOption } from '../option/option-data.js';
@@ -107,15 +107,15 @@ export class NeuSelect extends FormControlElement {
         const selected = picked ? this.opts.indexOf(picked) : -1;
         this.activate(kept >= 0 && !this.opts[kept].disabled ? kept : selected >= 0 ? selected : this.step(0, 1));
     }
-    /** Makes option `i` the active one (none for -1) and scrolls it into view. */
-    activate(i) {
+    /** Makes option `i` the active one (none for -1); `scroll` brings it into view. */
+    activate(i, scroll = true) {
         const listbox = this.ref('listbox');
         this.activeSource = this.opts[i]?.source;
         const items = [...listbox.children];
         items.forEach((item, n) => item.classList.toggle('active', n === i));
         const item = items[i];
         setOptionalAttribute(this.ref('combobox'), 'aria-activedescendant', item ? item.id : '');
-        if (!item)
+        if (!item || !scroll)
             return;
         // Keep the listbox padding in view too, so Home and End scroll to the very top and bottom.
         const pad = items[0].offsetTop;
@@ -225,10 +225,12 @@ export class NeuSelect extends FormControlElement {
             this.activate(found);
     }
     onKey(event) {
-        if (this.isDisabled || event.ctrlKey || event.metaKey)
+        const { key, altKey, ctrlKey } = event;
+        const printable = key.length === 1 && key !== ' ' && (!altKey || ctrlKey);
+        // Ctrl+Alt is AltGr on many layouts: a character it types is not a shortcut. Other Ctrl+Alt
+        // chords (assistive tech, the OS) are.
+        if (this.isDisabled || event.metaKey || (ctrlKey && !(altKey && printable)))
             return;
-        const { key, altKey } = event;
-        const printable = key.length === 1 && key !== ' ' && !altKey;
         const active = this.activeIndex();
         const last = this.opts.length - 1;
         const moves = {
@@ -297,7 +299,7 @@ export class NeuSelect extends FormControlElement {
         listbox.addEventListener('pointermove', (event) => {
             const i = this.optionAt(event);
             if (i >= 0 && i !== this.activeIndex() && !this.opts[i]?.disabled)
-                this.activate(i);
+                this.activate(i, false);
         });
         listbox.addEventListener('click', (event) => {
             const i = this.optionAt(event);
@@ -326,7 +328,7 @@ export class NeuSelect extends FormControlElement {
     update(changed) {
         const combobox = this.ref('combobox');
         if (changed.has('label'))
-            setText(this.ref('label'), String(this.props.label));
+            setText(this.ref('label-text'), String(this.props.label));
         if (changed.has('helpText'))
             setText(this.ref('help-text'), String(this.props.helpText));
         if (changed.has('required')) {
@@ -345,7 +347,11 @@ export class NeuSelect extends FormControlElement {
             this.commit();
     }
     connected() {
-        this.observer ??= new MutationObserver(() => this.sync());
+        // A rich label or help text holds no options: rewriting it needs no re-read.
+        this.observer ??= new MutationObserver((records) => {
+            if (records.some((record) => !inSlotted(this, record.target)))
+                this.sync();
+        });
         this.observer.observe(this, {
             childList: true,
             subtree: true,

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

@@ -1 +1 @@
-export declare const selectStyles = "\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.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:empty { display: none; }\n.combobox {\n  display: flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding-inline: 0.875rem 0.75rem;\n  border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm);\n  font-size: 0.9375rem; cursor: pointer; user-select: none; outline: none;\n  transition: box-shadow var(--_neu-dur) ease;\n}\n:host([size='sm']) .combobox { min-block-size: 2.25rem; padding-inline: 0.75rem 0.625rem; font-size: 0.875rem; }\n:host([size='lg']) .combobox { min-block-size: 3.25rem; padding-inline: 1rem 0.875rem; font-size: 1rem; }\n.combobox[aria-expanded='true'] { box-shadow: var(--_neu-inset-sm); }\n.combobox:focus-visible { box-shadow: var(--_neu-raised-sm), var(--_neu-focus); }\n.combobox[aria-expanded='true']:focus-visible { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }\n:host(:state(user-invalid)) .combobox {\n  box-shadow:\n    calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) color-mix(in oklab, var(--_neu-danger) 45%, var(--_neu-sd)),\n    calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n}\n:host(:disabled) .combobox, :host([disabled]) .combobox { opacity: 0.6; cursor: not-allowed; }\n.display { flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.placeholder { color: var(--_neu-fg-muted); }\n.chevron { display: inline-flex; flex: none; color: var(--_neu-fg-muted); transition: transform var(--_neu-dur) ease; }\n.chevron svg { inline-size: 1rem; block-size: 1rem; }\n.combobox[aria-expanded='true'] .chevron { transform: rotate(180deg); }\n.listbox {\n  position: fixed; inset: auto; margin: 0; max-block-size: 16rem; overflow: auto;\n  padding: 0.375rem; border: none; border-radius: var(--_neu-r);\n  background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-raised); font-size: 0.9375rem;\n}\n.option { padding: 0.5rem 0.625rem; border-radius: calc(var(--_neu-r) * 0.75); cursor: pointer; user-select: none; }\n.option.active { box-shadow: var(--_neu-inset-sm); }\n.option[aria-selected='true'] { color: var(--_neu-accent-c); font-weight: 600; }\n.option[aria-disabled='true'] { color: var(--_neu-fg-muted); cursor: not-allowed; }\n";
+export declare const selectStyles = "\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.label { display: block; }\n.combobox {\n  display: flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding-inline: 0.875rem 0.75rem;\n  border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm);\n  font-size: 0.9375rem; cursor: pointer; user-select: none; outline: none;\n  transition: box-shadow var(--_neu-dur) ease;\n}\n:host([size='sm']) .combobox { min-block-size: 2.25rem; padding-inline: 0.75rem 0.625rem; font-size: 0.875rem; }\n:host([size='lg']) .combobox { min-block-size: 3.25rem; padding-inline: 1rem 0.875rem; font-size: 1rem; }\n.combobox[aria-expanded='true'] { box-shadow: var(--_neu-inset-sm); }\n.combobox:focus-visible { box-shadow: var(--_neu-raised-sm), var(--_neu-focus); }\n.combobox[aria-expanded='true']:focus-visible { box-shadow: var(--_neu-inset-sm), var(--_neu-focus); }\n:host(:state(user-invalid)) .combobox {\n  box-shadow:\n    calc(var(--_neu-d) * 0.5) calc(var(--_neu-d) * 0.5) var(--_neu-d) color-mix(in oklab, var(--_neu-danger) 45%, var(--_neu-sd)),\n    calc(var(--_neu-d) * -0.5) calc(var(--_neu-d) * -0.5) var(--_neu-d) var(--_neu-sl);\n}\n:host(:disabled) .combobox, :host([disabled]) .combobox { opacity: 0.6; cursor: not-allowed; }\n.display { flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }\n.placeholder { color: var(--_neu-fg-muted); }\n.chevron { display: inline-flex; flex: none; color: var(--_neu-fg-muted); transition: transform var(--_neu-dur) ease; }\n.chevron svg { inline-size: 1rem; block-size: 1rem; }\n.combobox[aria-expanded='true'] .chevron { transform: rotate(180deg); }\n.listbox {\n  position: fixed; inset: auto; margin: 0; max-block-size: 16rem; overflow: auto;\n  padding: 0.375rem; border: none; border-radius: var(--_neu-r);\n  background: var(--_neu-bg); color: var(--_neu-fg); box-shadow: var(--_neu-raised); font-size: 0.9375rem;\n}\n.option { padding: 0.5rem 0.625rem; border-radius: calc(var(--_neu-r) * 0.75); cursor: pointer; user-select: none; }\n.option.active { box-shadow: var(--_neu-inset-sm); }\n.option[aria-selected='true'] { color: var(--_neu-accent-c); font-weight: 600; }\n.option[aria-disabled='true'] { color: var(--_neu-fg-muted); cursor: not-allowed; }\n";

package/dist/components/select/select.styles.js

@@ -1,10 +1,6 @@
 import { fieldStyles } from '../shared/field.styles.js';
 export const selectStyles = `${fieldStyles}
-.label {
-  display: block; margin-block-end: 0.375rem;
-  font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted);
-}
-.label:empty { display: none; }
+.label { display: block; }
 .combobox {
   display: flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; padding-inline: 0.875rem 0.75rem;
   border-radius: var(--_neu-r); background: var(--_neu-bg); box-shadow: var(--_neu-raised-sm);

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

@@ -1 +1 @@
-export declare const fieldStyles = "\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";
+export declare const fieldStyles = "\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";

package/dist/components/shared/field.styles.js

@@ -3,10 +3,8 @@ export const fieldStyles = `${hostTheme}
 :host { display: block; }
 :host(:disabled), :host([disabled]) { cursor: not-allowed; }
 .base { display: flex; flex-direction: column; }
-.label-text, ::slotted([slot='label']) {
-  display: block; margin-block-end: 0.375rem;
-  font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted);
-}
+.label { font-size: 0.8125rem; font-weight: 600; line-height: 1rem; color: var(--_neu-fg-muted); }
+.label-text, ::slotted([slot='label']) { display: block; margin-block-end: 0.375rem; }
 .label-text:empty { display: none; }
 .control {
   display: flex; align-items: center; min-block-size: 2.75rem; padding-inline: 0.875rem;

package/dist/components/slider/slider.d.ts

@@ -19,14 +19,12 @@ export declare class NeuSlider extends FormControlElement {
         };
         readonly name: {
             readonly type: "string";
-            readonly reflect: true;
         };
         readonly label: {
             readonly type: "string";
         };
         readonly disabled: {
             readonly type: "boolean";
-            readonly reflect: true;
         };
     }>;
     static extraProperties: string[];

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

@@ -27,13 +27,11 @@ export declare const sliderDef: import("../../core/define.js").ComponentDef<{
     };
     readonly name: {
         readonly type: "string";
-        readonly reflect: true;
     };
     readonly label: {
         readonly type: "string";
     };
     readonly disabled: {
         readonly type: "boolean";
-        readonly reflect: true;
     };
 }>;

package/dist/components/slider/slider.def.js

@@ -1,6 +1,5 @@
 import { defineComponent } from '../../core/define.js';
 import { html } from '../../core/html.js';
-import { themeCssProperties } from '../../core/styles.js';
 import { stepUnit } from '../shared/step.js';
 import { sliderStyles } from './slider.styles.js';
 /** Decimal places of a number as written, exponent notation included. */
@@ -44,33 +43,12 @@ export const sliderDef = defineComponent({
         min: { type: 'number', default: 0 },
         max: { type: 'number', default: 100 },
         step: { type: 'number', default: 1 },
-        name: { type: 'string', reflect: true },
+        name: { type: 'string' },
         label: { type: 'string' },
-        disabled: { type: 'boolean', reflect: true },
+        disabled: { type: 'boolean' },
     },
     form: { valueProp: 'value' },
     properties: { valueFormatter: '(value: number) => string' },
     styles: sliderStyles,
     template: (p) => html `<span part="base" class="base" data-ref="base" style="${sliderStyle(sliderValue(p.value, p.min, p.max, p.step), p.min, p.max)}"><span part="track" class="track" data-ref="track"><span part="fill" class="fill"></span><span part="thumb" class="thumb"></span></span></span>`,
-    docs: {
-        summary: 'A horizontal slider for a number. The value attribute is the default; the value property is the current value. The valueFormatter property turns the value into the text a screen reader announces.',
-        events: [
-            {
-                name: 'input',
-                description: 'Fired on every change while the user drags or presses a key.',
-            },
-            {
-                name: 'change',
-                description: 'Fired after the user commits a change: on release, or per key.',
-            },
-        ],
-        slots: [],
-        parts: [
-            { name: 'base', description: 'Wrapper around the track.' },
-            { name: 'track', description: 'The inset groove.' },
-            { name: 'fill', description: 'The part of the track up to the thumb.' },
-            { name: 'thumb', description: 'The raised handle.' },
-        ],
-        cssProperties: themeCssProperties,
-    },
 });

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

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