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

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

@@ -0,0 +1,184 @@
+import { dispatch, 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';
+import { markRule, radioGroupDef } from './radio-group.def.js';
+/** Which way each arrow key moves through the radios. */
+const STEP = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 };
+/** A radio's value; without the attribute it is "on", like a native radio. */
+const valueOf = (radio) => radio.getAttribute('value') ?? 'on';
+export class NeuRadioGroup extends FormControlElement {
+    static def = radioGroupDef;
+    static extraProperties = ['defaultValue'];
+    /**
+     * The requested value, kept even while no radio matches it (plan decision 8); null requests
+     * nothing, so a radio whose value is "" is chosen only when asked for.
+     */
+    current;
+    dirty = false;
+    /** The radio that holds the Tab stop. */
+    stop;
+    /** The selected radio as of the last sync, which the form value and validity read. */
+    picked;
+    observer;
+    constructor() {
+        super();
+        this.current = this.getAttribute('value');
+        this.internals.role = 'radiogroup';
+        this.addEventListener('click', (event) => {
+            const radio = this.radioAt(event);
+            if (radio && !this.isDisabled && !radio.hasAttribute('disabled'))
+                this.choose(radio);
+        });
+        this.addEventListener('keydown', (event) => this.onKey(event));
+    }
+    get value() {
+        return this.selected() ? this.current : '';
+    }
+    set value(next) {
+        this.dirty = true;
+        this.current = next === null || next === undefined ? null : String(next);
+        this.sync();
+    }
+    get defaultValue() {
+        return String(this.props.value);
+    }
+    set defaultValue(next) {
+        this.setAttribute('value', String(next));
+    }
+    /** The radios of this group: those whose closest group is this one. */
+    radios() {
+        return [...this.querySelectorAll('neu-radio')].filter((radio) => radio.closest('neu-radio-group') === this);
+    }
+    /** The first radio of this group matching the requested value, if one is requested. */
+    selected(radios = this.radios()) {
+        return this.current === null
+            ? undefined
+            : radios.find((radio) => valueOf(radio) === this.current);
+    }
+    radioAt(event) {
+        const radio = event.target instanceof Element ? event.target.closest('neu-radio') : null;
+        return radio && radio.closest('neu-radio-group') === this ? radio : null;
+    }
+    onKey(event) {
+        if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const radio = this.radioAt(event);
+        // A key pressed inside a disabled radio (say, a link in its label) is not a choice.
+        if (!radio || this.isDisabled || radio.hasAttribute('disabled'))
+            return;
+        if (event.key === ' ') {
+            event.preventDefault();
+            this.choose(radio);
+            return;
+        }
+        let step = STEP[event.key];
+        if (!step)
+            return;
+        // Like native radios, the horizontal arrows follow the reading direction.
+        if ((event.key === 'ArrowLeft' || event.key === 'ArrowRight') && this.matches(':dir(rtl)')) {
+            step = -step;
+        }
+        const on = this.radios().filter((candidate) => !candidate.hasAttribute('disabled'));
+        const next = on[(on.indexOf(radio) + step + on.length) % on.length];
+        if (!next)
+            return;
+        event.preventDefault();
+        next.focus();
+        this.choose(next);
+    }
+    /** A choice by the user: no event when the value does not change. */
+    choose(radio) {
+        const next = valueOf(radio);
+        if (next === this.current && this.selected())
+            return;
+        this.dirty = true;
+        this.current = next;
+        this.sync();
+        this.markInteracted();
+        dispatch(this, 'input');
+        dispatch(this, 'change');
+    }
+    [RESYNC]() {
+        this.sync();
+    }
+    /**
+     * Brings every radio in line with the group: checked state, disabling, the one Tab stop (the
+     * selected radio, else the first enabled one), the server-visible mark, and the form value.
+     * Radios that are not upgraded yet are skipped; they ask for a resync when they connect.
+     */
+    sync() {
+        const radios = this.radios();
+        const picked = (this.picked = this.selected(radios));
+        const off = this.isDisabled;
+        const ready = radios.filter((radio) => SET_CHECKED in radio);
+        for (const radio of ready) {
+            radio[SET_GROUP_DISABLED](off);
+            radio[SET_CHECKED](radio === picked);
+        }
+        const on = off ? [] : ready.filter((radio) => !radio.disabled);
+        this.stop = on.find((radio) => radio === picked) ?? on[0];
+        for (const radio of on) {
+            const tabindex = radio === this.stop ? '0' : '-1';
+            if (radio.getAttribute('tabindex') !== tabindex)
+                radio.setAttribute('tabindex', tabindex);
+        }
+        const rule = markRule(this.current ?? '');
+        setText(this.ref('mark'), rule === '' ? '' : rule.value);
+        this.commit();
+    }
+    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;
+        }
+        if (changed.has('required'))
+            this.internals.ariaRequired = this.props.required ? 'true' : null;
+        if (changed.has('disabled'))
+            this.internals.ariaDisabled = this.isDisabled ? 'true' : null;
+        if (changed.has('value') || changed.has('required') || changed.has('disabled'))
+            this.sync();
+    }
+    connected() {
+        this.observer ??= new MutationObserver(() => this.sync());
+        this.observer.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['disabled', 'value'],
+        });
+        this.sync();
+    }
+    disconnected() {
+        this.observer?.disconnect();
+    }
+    formValue() {
+        return this.picked ? this.current : null;
+    }
+    /** Nothing selected saves nothing, so a radio whose value is "" is not chosen on restore. */
+    formState() {
+        return this.formValue();
+    }
+    validate() {
+        if (this.props.required === true && !this.picked) {
+            this.internals.setValidity({ valueMissing: true }, requiredMessage('radio', 'Please select one of these options.'), this.stop);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    resetToDefault() {
+        this.dirty = false;
+        this.current = this.getAttribute('value');
+        this.sync();
+    }
+    restoreState(state) {
+        this.dirty = true;
+        this.current = state;
+        this.sync();
+    }
+}

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

@@ -0,0 +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";

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

@@ -0,0 +1,15 @@
+import { hostTheme } from '../../core/styles.js';
+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; }
+.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; }
+:host(:state(user-invalid)) .label { color: var(--_neu-danger); }
+`;

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

@@ -0,0 +1,119 @@
+import { FormControlElement } from '../../core/form-control.js';
+export declare class NeuSelect extends FormControlElement {
+    static def: import("../../core/define.js").ComponentDef<{
+        readonly value: {
+            readonly type: "string";
+        };
+        readonly name: {
+            readonly type: "string";
+            readonly reflect: true;
+        };
+        readonly label: {
+            readonly type: "string";
+        };
+        readonly placeholder: {
+            readonly type: "string";
+        };
+        readonly helpText: {
+            readonly type: "string";
+        };
+        readonly errorText: {
+            readonly type: "string";
+        };
+        readonly required: {
+            readonly type: "boolean";
+            readonly reflect: true;
+        };
+        readonly disabled: {
+            readonly type: "boolean";
+            readonly reflect: true;
+        };
+        readonly size: {
+            readonly type: "string";
+            readonly default: "md";
+            readonly values: readonly ["sm", "md", "lg"];
+            readonly reflect: true;
+        };
+    }>;
+    static extraProperties: string[];
+    name: string;
+    label: string;
+    placeholder: string;
+    helpText: string;
+    errorText: string;
+    required: boolean;
+    disabled: boolean;
+    size: 'sm' | 'md' | 'lg';
+    /** The requested value, kept even while no option matches it (plan decision 8). */
+    private current;
+    private dirty;
+    /** The options as last read, which the listbox mirrors by index (`option-<index>`). */
+    private opts;
+    private observer;
+    private opened;
+    /** The light-DOM option behind the active one, so a rebuild keeps it active. */
+    private activeSource;
+    /** Whether the listbox was open when the pointer went down on the combobox. */
+    private pressedOpen;
+    private typed;
+    private typedTimer;
+    constructor();
+    get value(): string;
+    set value(next: string);
+    get defaultValue(): string;
+    set defaultValue(next: string);
+    /** Reads the neu-option children from their attributes and text; they need not be upgraded. */
+    private read;
+    /** The value as of the last read: the requested one while an option matches it, else ''. */
+    private chosen;
+    /**
+     * Reads the options again, then brings the display, an open listbox and the form in line.
+     * setText writes only when the text differs, so a server-rendered display is left alone.
+     */
+    private sync;
+    /** The first enabled option from `from` going `dir`, `from` included; -1 when there is none. */
+    private step;
+    /**
+     * The enabled option nearest to `from` (clamped to the list) going `dir`, else turning back:
+     * a move or jump past either end stops at the last enabled option that way.
+     */
+    private near;
+    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. */
+    private activate;
+    /** Puts the listbox under the combobox at its width, or above it when that has more room. */
+    private readonly place;
+    private open;
+    /**
+     * Focus that lands outside the select while the listbox is open. The combobox's focusout
+     * covers most moves; this covers focus set elsewhere after the window was left (the focusout
+     * then kept the listbox open, and Firefox sends no second one).
+     */
+    private readonly focusLanded;
+    /** The one way the listbox closes: by key, by choice, by light dismiss (toggle), by focus leaving or when disabled. */
+    private close;
+    /** A choice by the user: enabled options only, and events only when the value changes. */
+    private choose;
+    /**
+     * Jumps to the next option whose label starts with the characters typed within TYPEAHEAD_MS.
+     * A buffer of one letter (typed once or repeated) searches that letter from the option after
+     * the active one, so repeating it cycles; any other buffer refines the search and starts at the
+     * active option, which may still match.
+     */
+    private typeahead;
+    private onKey;
+    /** Index of the listbox option an event happened on, or -1. */
+    private optionAt;
+    protected rendered(): void;
+    protected willUpdate(changed: ReadonlySet<string>): void;
+    protected update(changed: ReadonlySet<string>): void;
+    protected connected(): void;
+    protected disconnected(): void;
+    /** Like a native select: an option whose value is "" submits name=; no option, nothing. */
+    protected formValue(): string | null;
+    protected validate(): void;
+    protected resetToDefault(): void;
+    protected restoreState(state: string): void;
+}

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

@@ -0,0 +1,38 @@
+import { type OptionData } from '../../core/define.js';
+/** The option a select shows for `value`: the first one whose value matches, as in the client. */
+export declare function pickOption<T extends OptionData>(options: readonly T[] | undefined, value: string): T | undefined;
+export declare const selectDef: import("../../core/define.js").ComponentDef<{
+    readonly value: {
+        readonly type: "string";
+    };
+    readonly name: {
+        readonly type: "string";
+        readonly reflect: true;
+    };
+    readonly label: {
+        readonly type: "string";
+    };
+    readonly placeholder: {
+        readonly type: "string";
+    };
+    readonly helpText: {
+        readonly type: "string";
+    };
+    readonly errorText: {
+        readonly type: "string";
+    };
+    readonly required: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly disabled: {
+        readonly type: "boolean";
+        readonly reflect: true;
+    };
+    readonly size: {
+        readonly type: "string";
+        readonly default: "md";
+        readonly values: readonly ["sm", "md", "lg"];
+        readonly reflect: true;
+    };
+}>;

package/dist/components/select/select.def.js

@@ -0,0 +1,59 @@
+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. */
+export function pickOption(options, value) {
+    return options?.find((option) => option.value === value);
+}
+const chevron = unsafeHTML(svgWrap(chevronDownBody));
+export const selectDef = defineComponent({
+    tag: 'neu-select',
+    props: {
+        value: { type: 'string' },
+        name: { type: 'string', reflect: true },
+        label: { type: 'string' },
+        placeholder: { type: 'string' },
+        helpText: { type: 'string' },
+        errorText: { type: 'string' },
+        required: { type: 'boolean', reflect: true },
+        disabled: { type: 'boolean', reflect: true },
+        size: { type: 'string', default: 'md', values: ['sm', 'md', 'lg'], reflect: true },
+    },
+    delegatesFocus: true,
+    form: { valueProp: 'value' },
+    optionsFrom: 'neu-option',
+    styles: selectStyles,
+    // The client renders without ctx and update() fills the display, so both roots end up the same.
+    template: (p, ctx) => {
+        const picked = pickOption(ctx?.options, p.value);
+        // 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,
+    },
+});