@rak200/ui 0.3.0 → 0.4.0

package/dist/select.js

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 import { reference } from './reference.js';
 /**
  * One arm of the caret, and the gap it keeps from the edge.
@@ -16,14 +16,131 @@ const arm = css `calc(${reference('--ui-space')} * 0.75)`;
  * right at the default space token and wrong at every other.
  */
 const clearance = css `calc(${reference('--ui-space')} * 2 + ${arm} * 2)`;
+/**
+ * The event a declaration fires when anything about it changes.
+ *
+ * **Private to this file**, and a mechanism rather than an API: a host listens to
+ * `<ui-select>`, never to this.
+ */
+// Stryker disable next-line StringLiteral: both ends of this event read the constant —
+// the declaration dispatches it and the select listens for it — so a different name, the
+// empty string included, still meets itself. Nothing outside this module names it, which
+// is what makes the mutant provably equivalent rather than merely uncaught.
+const announcement = 'ui-option-changed';
+/**
+ * What {@link UiOption} and {@link UiOptgroup} have in common, which is that they draw
+ * nothing.
+ *
+ * **A declaration rather than a control**, and the first of its kind here: every other
+ * element in this package renders something a person can see. These two exist so that the
+ * choices a host writes stay markup, while the thing the platform actually needs — real
+ * `<option>` elements inside a real `<select>` — is built from them.
+ *
+ * They announce themselves on every update, and that is the half a `MutationObserver`
+ * cannot do: `option.selected = true` is a property write, and no observer reports one.
+ * Measured on the shape this replaced, where the control simply never moved. Because these
+ * are this package's own elements the property is reactive, so the announcement is the
+ * platform's own change detection rather than a watcher over somebody else's element.
+ *
+ * **Arriving and leaving are announced from the slot rather than from a callback**, and
+ * that is measured rather than chosen: an event dispatched from `disconnectedCallback` has
+ * no path left to bubble along — the option is already out of the tree, and the removal
+ * never reached the select. A slot reports both directions, which is the thing it exists
+ * to tell you.
+ *
+ * **Each declaration carries its own slot, and that is why**: a slot reports only the
+ * nodes assigned to *it*, so `<ui-select>`'s own slot sees a choice added or removed at the
+ * top level and sees nothing at all when one moves inside an `<ui-optgroup>`. Measured, as
+ * a removal from inside a group that left the control showing a choice that was gone.
+ */
+class UiDeclaration extends LitElement {
+    static { this.styles = css `
+        :host {
+            display: none;
+        }
+    `; }
+    updated() {
+        this.#announce();
+    }
+    #announce = () => {
+        this.dispatchEvent(new Event(announcement, { bubbles: true }));
+    };
+    render() {
+        return html `<slot @slotchange=${this.#announce}></slot>`;
+    }
+}
+/**
+ * One choice in a {@link UiSelect}.
+ *
+ * The text is what the reader sees; `value` is what a form submits. `selected` is the
+ * **default** — the choice the control starts on and returns to on reset — which is what
+ * `selected` means on a native `<option>`.
+ *
+ * @example
+ * ```html
+ * <ui-option value="brl">Real</ui-option>
+ * ```
+ */
+export class UiOption extends UiDeclaration {
+    constructor() {
+        super(...arguments);
+        /**
+         * What a form submits when this is the choice made.
+         *
+         * A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
+         * gives beside its own.
+         */
+        this.value = '';
+        /** Whether this is the choice the control starts on. */
+        this.selected = false;
+        /** Whether this choice can be made at all. */
+        this.disabled = false;
+    }
+    static { this.properties = {
+        value: { type: String, reflect: true },
+        selected: { type: Boolean, reflect: true },
+        disabled: { type: Boolean, reflect: true },
+    }; }
+}
+/**
+ * A named set of choices, which the platform draws as a heading inside the list.
+ *
+ * @example
+ * ```html
+ * <ui-optgroup label="Americas">
+ *   <ui-option value="brl">Real</ui-option>
+ * </ui-optgroup>
+ * ```
+ */
+export class UiOptgroup extends UiDeclaration {
+    constructor() {
+        super(...arguments);
+        /** The heading the platform draws above the set. */
+        this.label = '';
+        /** Whether every choice in the set is unavailable. */
+        this.disabled = false;
+    }
+    static { this.properties = {
+        label: { type: String, reflect: true },
+        disabled: { type: Boolean, reflect: true },
+    }; }
+}
 /**
  * A native `<select>`, styled by the token layer rather than replaced.
  *
- * **The `<select>` is yours.** You write it and its `<option>`s, and it stays in the light
- * DOM — the same shape {@link UiInput} has, and forced by the same constraint: an ARIA
- * relationship by IDREF does not cross a shadow boundary, so a control rendered in here
- * could not be labelled by the `<label>` beside it. It reaches a form submit because it is
- * a native control inside a `<form>`.
+ * **The `<select>` is this element's**, rendered into its shadow root with its label, its
+ * help and its message, so the IDREFs resolve in one tree scope. What a host writes is the
+ * tag, its attributes, and the choices — as {@link UiOption} and {@link UiOptgroup}.
+ *
+ * **The choices could not stay as `<option>`s**, and that is measured rather than
+ * preferred: a `<slot>` inside a `<select>` assigns the nodes and the select sees none of
+ * them. `HTMLSelectElement.options` is built from its own children, not from the flattened
+ * tree — `options.length` was `0`, `value` empty and `selectedIndex` `-1`, with two options
+ * assigned. So the choices are declarations this package owns, and the `<option>` elements
+ * the platform needs are built from them.
+ *
+ * The element joins the form itself, through `ElementInternals`: a control in a shadow root
+ * has no form owner.
  *
  * **The native element is the decision, not a shortcut.** A custom listbox is an
  * accessibility project of its own, and it would have to reimplement the platform picker
@@ -48,25 +165,69 @@ const clearance = css `calc(${reference('--ui-space')} * 2 + ${arm} * 2)`;
  *
  * @example
  * ```html
- * <ui-field>
- *   <label slot="label">Currency</label>
- *   <ui-select>
- *     <select name="currency">
- *       <option value="brl">Real</option>
- *       <option value="usd">Dollar</option>
- *     </select>
- *   </ui-select>
- * </ui-field>
+ * <ui-select label="Currency" name="currency">
+ *   <ui-option value="brl">Real</ui-option>
+ *   <ui-option value="usd">Dollar</ui-option>
+ * </ui-select>
  * ```
  */
 export class UiSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The accessible name, and the text above the control.
+         *
+         * A plain field rather than the `accessor` keyword, for the reason `src/button.ts`
+         * gives beside its own — and so for every property below.
+         */
+        this.label = '';
+        /** Supporting text under the control, which survives an error rather than yielding. */
+        this.help = '';
+        /** The message, which paints the boundary and is announced with the control. */
+        this.error = '';
+        /**
+         * The name the value is submitted under.
+         *
+         * **Reflected, and that is a requirement rather than a convenience.** A form names a
+         * form-associated custom element's entry from the content attribute, so a host who set
+         * only the property would submit nothing at all — silently.
+         */
+        this.name = '';
+        /**
+         * The choice currently made.
+         *
+         * **Empty means _the declared default_ rather than _nothing_**, which is what lets an
+         * `<ui-option selected>` mean what `<option selected>` means and a reset return to it.
+         * Not reflected, the way a native control's `value` IDL attribute is not.
+         */
+        this.value = '';
+        /** Whether a form is invalid while no choice is made. */
+        this.required = false;
+        /** Whether the control refuses interaction, and submits nothing. */
+        this.disabled = false;
+        /** Whether the control is a list rather than a drop-down. */
+        this.multiple = false;
+        this.#internals = this.attachInternals();
+        this.#redraw = () => {
+            this.requestUpdate();
+        };
+        /**
+         * `change` is re-dispatched because it is non-composed and stops at the shadow
+         * boundary; `input` is composed and leaves on its own, retargeted. Measured on
+         * `<ui-checkbox>`, and the same here.
+         */
+        this.#changed = (event) => {
+            this.value = event.target.value;
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+        };
+    }
     static { this.styles = css `
         :host {
             display: block;
         }
 
         /* The box, which src/input.ts also draws and tests/select.test.ts compares. */
-        ::slotted(select) {
+        select {
             box-sizing: border-box;
             inline-size: 100%;
             font: inherit;
@@ -93,7 +254,7 @@ export class UiSelect extends LitElement {
 
            It does NOT cost the picker. appearance: none changes how the closed control
            is painted and nothing about what opens, so a phone still opens its own wheel. */
-        ::slotted(select) {
+        select {
             appearance: none;
             padding-inline-end: ${clearance};
             background-repeat: no-repeat;
@@ -107,7 +268,7 @@ export class UiSelect extends LitElement {
 
            A multiple select is a list rather than a drop-down, and a caret on a list
            points at nothing, so it is guarded rather than drawn everywhere. */
-        ::slotted(select:not([multiple])) {
+        select:not([multiple]) {
             background-image:
                 linear-gradient(45deg, transparent 50%, ${reference('--ui-color-text-muted')} 50%),
                 linear-gradient(135deg, ${reference('--ui-color-text-muted')} 50%, transparent 50%);
@@ -121,7 +282,7 @@ export class UiSelect extends LitElement {
            logical form — so the one physical thing in this sheet is mirrored explicitly.
            The padding needs no rule: padding-inline-end already follows. Measured, both
            halves. */
-        ::slotted(select:not([multiple]):dir(rtl)) {
+        select:not([multiple]):dir(rtl) {
             background-position:
                 left ${reference('--ui-space')} center,
                 left calc(${reference('--ui-space')} + ${arm}) center;
@@ -133,30 +294,220 @@ export class UiSelect extends LitElement {
            There is no [readonly] guard here and its absence is measured rather than
            forgotten: readOnly is not a property of a select at all, so the input's
            second guard would be a rule about an attribute the platform never sets. */
-        ::slotted(select:hover:not(:disabled)) {
+        select:hover:not(:disabled) {
             border-color: ${reference('--ui-color-text')};
         }
 
         /* A visible focus ring is not decoration: removing it is the single most common
            way a component stops being usable by keyboard. */
-        ::slotted(select:focus-visible) {
+        select:focus-visible {
             outline: 2px solid ${reference('--ui-color-focus')};
             outline-offset: 2px;
         }
 
-        ::slotted(select:disabled) {
+        select:disabled {
             cursor: not-allowed;
             opacity: 0.5;
         }
 
-        /* The error state is not this component's to decide: ui-field sets aria-invalid on
-           the control as part of the wiring it already owns, and this rule reads it. */
-        ::slotted(select[aria-invalid='true']) {
+        /* Read off the control's own aria-invalid, which this element now writes: it is
+           the same source a screen reader uses. Not :host([error]) — a reflected string
+           property whose default is empty puts an empty attribute on the host, and an
+           attribute-presence selector matches every element. Measured on ui-checkbox. */
+        select[aria-invalid='true'] {
             border-color: ${reference('--ui-color-danger')};
         }
+
+        /* The rhythm ui-field used to own, written out here rather than shared with
+           src/input.ts for the reason the docblock above gives about the box — and
+           compared by tests/select.test.ts on the same terms. */
+        .stack {
+            display: flex;
+            flex-direction: column;
+            gap: calc(${reference('--ui-space')} / 2);
+        }
+
+        label {
+            color: ${reference('--ui-color-text')};
+        }
+
+        :host([disabled]) label {
+            color: ${reference('--ui-color-text-muted')};
+        }
+
+        .help {
+            color: ${reference('--ui-color-text')};
+            font-size: ${reference('--ui-text-supporting')};
+        }
+
+        /* Colour is not the only cue — the message says what is wrong, and aria-invalid
+           marks the control whatever the styling does. */
+        .error {
+            color: ${reference('--ui-color-danger')};
+            font-size: ${reference('--ui-text-supporting')};
+        }
     `; }
+    static { this.formAssociated = true; }
+    /**
+     * Focus is delegated, so `focus()` and `reportValidity()` reach the control — the host
+     * is not a focusable element, and the second is what the browser calls itself when a
+     * form with an invalid control is submitted.
+     */
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    static { this.properties = {
+        label: { type: String, reflect: true },
+        help: { type: String, reflect: true },
+        error: { type: String, reflect: true },
+        name: { type: String, reflect: true },
+        // Stryker disable next-line ObjectLiteral: `{}` is what Lit's default converter
+        // already does for a string — `type` only switches the converter for Boolean,
+        // Number, Object and Array — and `reflect` defaults to false either way. The
+        // declaration is written out to say which of the two `value` is, not to change it.
+        value: { type: String },
+        required: { type: Boolean, reflect: true },
+        disabled: { type: Boolean, reflect: true },
+        multiple: { type: Boolean, reflect: true },
+    }; }
+    #internals;
+    #redraw;
+    connectedCallback() {
+        super.connectedCallback();
+        // The half a slot cannot report: a property write on a choice. It reaches here by
+        // bubbling, because the choices are this element's own light-DOM children.
+        //
+        // There is deliberately no removal in `disconnectedCallback`. A listener an
+        // element holds on *itself* cannot outlive it, so there is nothing to leak — and
+        // `#redraw` is one stable reference, so re-adding it on a reconnect is discarded
+        // by `addEventListener` rather than doubled. The override that removed it was
+        // three statements no test could tell apart from their absence.
+        this.addEventListener(announcement, this.#redraw);
+    }
+    /** Every choice a host declared, groups included, in the order they were written. */
+    #options() {
+        return [...this.querySelectorAll('ui-option')];
+    }
+    /**
+     * The choice in force: the host's `value` where it names one, the declared default
+     * otherwise.
+     *
+     * The fallback is the platform's own rule, read off the declarations — the first
+     * choice marked `selected`, and failing that the first choice at all, which is what a
+     * native `<select>` does with no `selected` option in it.
+     */
+    #chosen() {
+        const options = this.#options();
+        if (options.some((option) => option.value === this.value)) {
+            return this.value;
+        }
+        return (options.find((option) => option.selected) ?? options[0])?.value ?? '';
+    }
+    /** The validity, taken from the control that computed it. */
+    #publish(control) {
+        if (this.error !== '') {
+            this.#internals.setValidity({ customError: true }, this.error, control);
+            return;
+        }
+        this.#internals.setValidity(control.validity, control.validationMessage, control);
+    }
+    /**
+     * The value and the validity, which move together here or disagree anywhere.
+     *
+     * **Iterated rather than asserted**, and there is exactly one control to iterate —
+     * `render()` puts it there unconditionally. A query and a null check would put a branch
+     * here that no test could reach, which is a coverage hole and an immortal mutant at
+     * once rather than safety. `src/input.ts` carries the same shape for the same reason.
+     */
+    updated() {
+        this.#internals.setFormValue(this.#chosen());
+        for (const control of this.renderRoot.querySelectorAll('select')) {
+            this.#publish(control);
+        }
+    }
+    /**
+     * `change` is re-dispatched because it is non-composed and stops at the shadow
+     * boundary; `input` is composed and leaves on its own, retargeted. Measured on
+     * `<ui-checkbox>`, and the same here.
+     */
+    #changed;
+    /** A form reset, which returns to the choice the declarations name. */
+    formResetCallback() {
+        this.value = '';
+    }
+    /** A `<fieldset disabled>` above this element, which reaches it and nothing below. */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    /** Restoring after a back-navigation, where the browser hands the value back. */
+    formStateRestoreCallback(state) {
+        this.value = state ?? '';
+    }
+    /** The form this element participates in, for a host that needs it. */
+    get form() {
+        return this.#internals.form;
+    }
+    /** Whether the control currently satisfies its constraints. */
+    get validity() {
+        return this.#internals.validity;
+    }
+    /** The message a form would report for it, empty while the control is valid. */
+    get validationMessage() {
+        return this.#internals.validationMessage;
+    }
+    /** The ids describing the control, in the order a reader needs them. */
+    #described() {
+        const ids = [this.error === '' ? '' : 'error', this.help === '' ? '' : 'help'].filter((id) => id !== '');
+        return ids.length === 0 ? nothing : ids.join(' ');
+    }
+    /** One declaration, as the element the platform needs. */
+    #draw(node, chosen) {
+        if (node instanceof UiOptgroup) {
+            return html `<optgroup label=${node.label} ?disabled=${node.disabled}>
+                ${[...node.children].map((child) => this.#draw(child, chosen))}
+            </optgroup>`;
+        }
+        if (node instanceof UiOption) {
+            return html `<option
+                value=${node.value}
+                ?selected=${node.value === chosen}
+                ?disabled=${node.disabled}
+            >
+                ${node.textContent}
+            </option>`;
+        }
+        return html ``;
+    }
     render() {
-        return html `<slot></slot>`;
+        const chosen = this.#chosen();
+        return html `
+            <div class="stack" part="stack">
+                <label for="control" part="label">${this.label}</label>
+                <select
+                    id="control"
+                    part="control"
+                    name=${this.name === '' ? nothing : this.name}
+                    ?required=${this.required}
+                    ?disabled=${this.disabled}
+                    ?multiple=${this.multiple}
+                    aria-invalid=${this.error === '' ? nothing : 'true'}
+                    aria-describedby=${this.#described()}
+                    @change=${this.#changed}
+                >
+                    ${[...this.children].map((node) => this.#draw(node, chosen))}
+                </select>
+                ${this.help === ''
+            ? nothing
+            : html `<span class="help" id="help" part="help">${this.help}</span>`}
+                ${this.error === ''
+            ? nothing
+            : html `<span class="error" id="error" part="error">${this.error}</span>`}
+                <!-- The structural half, which slotchange reports and no observer has to.
+                     What it holds draws nothing: a declaration is display: none. -->
+                <slot @slotchange=${this.#redraw}></slot>
+            </div>
+        `;
     }
 }
 // Stryker disable next-line StringLiteral: the registration runs once, at import, inside
@@ -164,4 +515,8 @@ export class UiSelect extends LitElement {
 // active the element is already defined under the original name, and no test can observe
 // the change. Outside the runner's reach, not an equivalent mutant.
 customElements.define('ui-select', UiSelect);
+// Stryker disable next-line StringLiteral: the same, for the same reason.
+customElements.define('ui-option', UiOption);
+// Stryker disable next-line StringLiteral: the same, for the same reason.
+customElements.define('ui-optgroup', UiOptgroup);
 //# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../src/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuC,MAAM,KAAK,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;;;;GAMG;AACH,MAAM,GAAG,GAAG,GAAG,CAAA,QAAQ,SAAS,CAAC,YAAY,CAAC,UAAU,CAAC;AAEzD;;;;;;GAMG;AACH,MAAM,SAAS,GAAG,GAAG,CAAA,QAAQ,SAAS,CAAC,YAAY,CAAC,UAAU,GAAG,OAAO,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,OAAO,QAAS,SAAQ,UAAU;aACX,WAAM,GAAc,GAAG,CAAA;;;;;;;;;;2BAUzB,SAAS,CAAC,WAAW,CAAC;qBAC5B,SAAS,CAAC,iBAAiB,CAAC;gCACjB,SAAS,CAAC,oBAAoB,CAAC;gCAC/B,SAAS,CAAC,mBAAmB,CAAC;6BACjC,SAAS,CAAC,aAAa,CAAC;uBAC9B,SAAS,CAAC,YAAY,CAAC;;;;;;uCAMP,SAAS,CAAC,qBAAqB,CAAC;kBACrD,SAAS,CAAC,mBAAmB,CAAC;;;;;;;;;;;;;kCAad,SAAS;;;;;;;;;;;;;;0DAce,SAAS,CAAC,uBAAuB,CAAC;0CAClD,SAAS,CAAC,uBAAuB,CAAC;+BAC7C,GAAG,IAAI,GAAG;;6BAEZ,SAAS,CAAC,YAAY,CAAC,MAAM,GAAG;wBACrC,SAAS,CAAC,YAAY,CAAC;;;;;;;;;uBASxB,SAAS,CAAC,YAAY,CAAC;4BAClB,SAAS,CAAC,YAAY,CAAC,MAAM,GAAG;;;;;;;;;;4BAUhC,SAAS,CAAC,iBAAiB,CAAC;;;;;;iCAMvB,SAAS,CAAC,kBAAkB,CAAC;;;;;;;;;;;;4BAYlC,SAAS,CAAC,mBAAmB,CAAC;;KAErD,CAAC;IAEO,MAAM;QACX,OAAO,IAAI,CAAA,eAAe,CAAC;IAC/B,CAAC;;AAGL,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../src/select.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rak200/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Host-agnostic custom-element UI components for the rak200 ecosystem",
   "license": "MIT",
   "author": "rak200 <rak.ricardo@windowslive.com>",