@aceshooting/lyra-ui 5.1.0 → 6.0.0

package/dist/components/forms/combobox/combobox.class.d.ts

@@ -3,7 +3,7 @@ import { LyraElement } from '../../../internal/lyra-element.js';
 import { LyraOption } from './option.class.js';
 import './option.class.js';
 export type OptionFilter = (option: LyraOption, query: string) => boolean;
-export type LyraComboboxSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+export type LyraComboboxSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl';
 export interface ComboboxSourceRow {
     value: string;
     label: string;
@@ -48,6 +48,11 @@ export interface LyraComboboxEventMap {
  * @slot label - Custom label content.
  * @slot hint - Custom hint content.
  * @slot error - Custom error content.
+ * @slot start - Adornment at the inline-start of the trigger row, before the selected-value tags
+ *   and the filter input. Slotted content is decorative chrome, not an option: `collectOptions()`
+ *   only ever collects `<lr-option>` elements from the default slot.
+ * @slot end - Adornment after the filter input and the built-in clear action, and before the
+ *   expand icon — so consumer content never sits outboard of the dropdown chevron.
  * @event {Event} change - The selection changed through user interaction. A bubbling,
  * composed, non-cancelable Event.
  * @event {InputEvent | Event} input - The user typed in the filter or changed the selection. Text
@@ -58,15 +63,18 @@ export interface LyraComboboxEventMap {
  * @event lr-clear - The value was cleared.
  * @event {CustomEvent<ComboboxFilterDetail>} lr-filter - The in-progress filter text changed
  * through user input. `detail.value` is the live filter string, which is not the same thing as the
- * host's `value` (the committed selection). User-input only: the programmatic paths that blank the
- * filter — picking a row, the clear button, `form.reset()`, dismissing the listbox, a `value`
- * write, `setRangeText()` — are all silent, mirroring `<lr-input>`'s `lr-input`.
+ * host's `value` (the committed selection). User-input only: typing and the clear button announce
+ * it, while the programmatic paths that blank the filter — picking a row, `form.reset()`,
+ * dismissing the listbox, a `value` write, `setRangeText()` — are all silent, mirroring
+ * `<lr-input>`'s `lr-input`.
  * @event blur - Re-dispatched from the internal native input as a bubbling, composed event.
  * @event focus - Re-dispatched from the internal native input as a bubbling, composed event.
  * @csspart form-control - The outer wrapper around label, combobox, listbox, error and hint.
  * @csspart form-control-label - The `<label>` element.
  * @csspart combobox - The input container (positioning anchor).
  * @csspart combobox-input - The text input.
+ * @csspart start - Wrapper around the `start` adornment slot; `hidden` while nothing is slotted.
+ * @csspart end - Wrapper around the `end` adornment slot; `hidden` while nothing is slotted.
  * @csspart listbox - The options popover.
  * @csspart option - An option row.
  * @csspart option-dot - An option row's leading status dot (when `dot-color` is set).
@@ -83,11 +91,20 @@ export interface LyraComboboxEventMap {
  * @csspart error - The error message.
  * @csspart hint - The hint message.
  * @cssprop --lr-combobox-trigger-padding - Padding inside the input container.
- * @cssprop --lr-combobox-trigger-min-height - Minimum input-container block size.
+ * @cssprop --lr-combobox-trigger-min-height - Minimum input-container block size, scaled by `size`.
+ * @cssprop --lr-combobox-trigger-height - Exact input-container height. Unset by default, which
+ *   leaves `--lr-combobox-trigger-min-height` as a floor only; set it to a length to both floor and
+ *   cap the row (e.g. to pixel-match `<lr-input>`/`<lr-select>` in the same toolbar). Because it is
+ *   never declared by the component itself, it can be set from an ancestor or an outer-tree rule as
+ *   well as inline on the element. Intended for a single-row combobox: in `multiple` mode a tag row
+ *   long enough to wrap overflows the pinned box visibly (nothing is clipped or made unreachable),
+ *   so leave it unset there.
  * @cssprop --lr-combobox-font-size - Input text size.
  * @cssprop --lr-combobox-tag-padding - Selected-tag padding.
  * @cssprop --lr-combobox-tag-font-size - Selected-tag text size.
  * @cssprop --lr-combobox-expand-size - Decorative expand-icon box size, scaled by `size`.
+ * @cssprop [--lr-combobox-option-active-bg=var(--lr-color-brand-quiet)] - Background of a hovered
+ *   or keyboard-active option row.
  */
 export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     static formAssociated: boolean;
@@ -131,9 +148,14 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     hint: string;
     errorText: string;
     open: boolean;
-    /** Visual size — same `xs`–`xl` scale as `lr-select`'s `size`. */
+    /** Visual size — same `2xs`–`xl` scale as `lr-select`'s `size`. */
     size: LyraComboboxSize;
-    /** Show a clear button while the combobox has a value. Mirrors `wa-combobox`'s public name. */
+    /** Show a clear button while the combobox has something to clear on either axis: a committed
+     *  selection, or visible filter text (the open listbox in single-select, any time in `multiple`
+     *  mode — a closed single-select shows the selected label, not the query, so a stale query alone
+     *  never surfaces the button). Clearing a selection emits `input`/`change`/`lr-clear`; clearing
+     *  filter text emits `lr-filter` with an empty `value`; each fires only for the axis that
+     *  actually changed. Mirrors `wa-combobox`'s public name. */
     clearable: boolean;
     /** @deprecated Use `clearable`. Retained as a compatibility alias. */
     withClear: boolean;
@@ -159,6 +181,8 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     private hasHintSlot;
     private hasErrorSlot;
     private hasLabelSlot;
+    private hasStartSlot;
+    private hasEndSlot;
     private loading;
     private asyncRows;
     private inputEl?;
@@ -201,12 +225,19 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     set selectionDirection(value: LyraComboboxSelectionDirection | null);
     focus(options?: FocusOptions): void;
     blur(): void;
+    /** Activates the trigger the same way a real mouse click on `[part='combobox']` would --
+     *  focuses the filter input and opens the listbox (mirrors `onComboMouseDown` below). Without
+     *  this override, `HTMLElement.prototype.click()` on the host is a no-op: a custom element has
+     *  no native click activation behavior of its own, so a generic form-submit helper, test
+     *  utility, or automation script calling `.click()` on `<lr-combobox>` directly (rather than on
+     *  its shadow-internal parts) would otherwise silently do nothing. */
+    click(): void;
     select(): void;
     setSelectionRange(start: number | null, end: number | null, direction?: LyraComboboxSelectionDirection): void;
     setRangeText(replacement: string): void;
     setRangeText(replacement: string, start: number, end: number, selectMode?: SelectionMode): void;
     connectedCallback(): void;
-    protected willUpdate(): void;
+    protected willUpdate(changed: PropertyValues): void;
     get name(): string;
     set name(next: string);
     get multiple(): boolean;
@@ -267,6 +298,13 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     private emitValueEvents;
     private pickRow;
     private removeValue;
+    /**
+     * The clear button clears both axes the control owns — the committed selection and the
+     * in-progress filter text — but each announces only its own change. A query-only clear must stay
+     * silent on `input`/`change`/`lr-clear` (there is no selection transition to report; that early
+     * return is why the button used to be gated on the selection alone), while a selection-only clear
+     * must stay silent on `lr-filter` (the filter text never moved).
+     */
     private clear;
     private onInput;
     private runSource;
@@ -275,6 +313,8 @@ export declare class LyraCombobox extends LyraElement<LyraComboboxEventMap> {
     private onHintSlotChange;
     private onErrorSlotChange;
     private onLabelSlotChange;
+    private onStartSlotChange;
+    private onEndSlotChange;
     private onKeyDown;
     private onComboMouseDown;
     private onListboxMouseDown;

package/dist/components/forms/combobox/combobox.class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.class.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/combobox/combobox.class.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox.class.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/combobox/combobox.class.ts"],"names":[],"mappings":"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"}

package/dist/components/forms/combobox/combobox.class.js

@@ -15,6 +15,41 @@ import { finiteCount } from '../../../internal/numbers.js';
 import { styles } from './combobox.styles.js';
 import { LyraOption } from './option.class.js';
 import './option.class.js';
+/** A no-op stand-in for `ElementInternals`, used only when the host environment has no real
+ *  implementation of it (e.g. a downstream consumer's Vitest + happy-dom test suite) --
+ *  `attachInternals()` is browser-only, and calling it unconditionally in the constructor would
+ *  otherwise throw before any test assertion runs, merely from constructing or importing this
+ *  component. Every member here is either an inert value or a no-op: native `<form>`
+ *  participation is unavailable in that environment, but that's an acceptable degradation rather
+ *  than a hard failure -- same fix as `<lr-model-select>`'s/`<lr-tool-param-form>`'s identical
+ *  `createInternalsSafely`/`createNoopInternals` pair. */
+function createInternalsSafely(host) {
+    if (typeof host.attachInternals !== 'function')
+        return createNoopInternals();
+    try {
+        return host.attachInternals();
+    }
+    catch {
+        return createNoopInternals();
+    }
+}
+function createNoopInternals() {
+    return {
+        form: null,
+        labels: [],
+        validity: {},
+        validationMessage: '',
+        willValidate: false,
+        setFormValue() { },
+        setValidity() { },
+        checkValidity() {
+            return true;
+        },
+        reportValidity() {
+            return true;
+        },
+    };
+}
 const spellcheckConverter = {
     fromAttribute: (value) => value !== 'false',
     toAttribute: (value) => (value ? 'true' : 'false'),
@@ -33,6 +68,11 @@ const spellcheckConverter = {
  * @slot label - Custom label content.
  * @slot hint - Custom hint content.
  * @slot error - Custom error content.
+ * @slot start - Adornment at the inline-start of the trigger row, before the selected-value tags
+ *   and the filter input. Slotted content is decorative chrome, not an option: `collectOptions()`
+ *   only ever collects `<lr-option>` elements from the default slot.
+ * @slot end - Adornment after the filter input and the built-in clear action, and before the
+ *   expand icon — so consumer content never sits outboard of the dropdown chevron.
  * @event {Event} change - The selection changed through user interaction. A bubbling,
  * composed, non-cancelable Event.
  * @event {InputEvent | Event} input - The user typed in the filter or changed the selection. Text
@@ -43,15 +83,18 @@ const spellcheckConverter = {
  * @event lr-clear - The value was cleared.
  * @event {CustomEvent<ComboboxFilterDetail>} lr-filter - The in-progress filter text changed
  * through user input. `detail.value` is the live filter string, which is not the same thing as the
- * host's `value` (the committed selection). User-input only: the programmatic paths that blank the
- * filter — picking a row, the clear button, `form.reset()`, dismissing the listbox, a `value`
- * write, `setRangeText()` — are all silent, mirroring `<lr-input>`'s `lr-input`.
+ * host's `value` (the committed selection). User-input only: typing and the clear button announce
+ * it, while the programmatic paths that blank the filter — picking a row, `form.reset()`,
+ * dismissing the listbox, a `value` write, `setRangeText()` — are all silent, mirroring
+ * `<lr-input>`'s `lr-input`.
  * @event blur - Re-dispatched from the internal native input as a bubbling, composed event.
  * @event focus - Re-dispatched from the internal native input as a bubbling, composed event.
  * @csspart form-control - The outer wrapper around label, combobox, listbox, error and hint.
  * @csspart form-control-label - The `<label>` element.
  * @csspart combobox - The input container (positioning anchor).
  * @csspart combobox-input - The text input.
+ * @csspart start - Wrapper around the `start` adornment slot; `hidden` while nothing is slotted.
+ * @csspart end - Wrapper around the `end` adornment slot; `hidden` while nothing is slotted.
  * @csspart listbox - The options popover.
  * @csspart option - An option row.
  * @csspart option-dot - An option row's leading status dot (when `dot-color` is set).
@@ -68,11 +111,20 @@ const spellcheckConverter = {
  * @csspart error - The error message.
  * @csspart hint - The hint message.
  * @cssprop --lr-combobox-trigger-padding - Padding inside the input container.
- * @cssprop --lr-combobox-trigger-min-height - Minimum input-container block size.
+ * @cssprop --lr-combobox-trigger-min-height - Minimum input-container block size, scaled by `size`.
+ * @cssprop --lr-combobox-trigger-height - Exact input-container height. Unset by default, which
+ *   leaves `--lr-combobox-trigger-min-height` as a floor only; set it to a length to both floor and
+ *   cap the row (e.g. to pixel-match `<lr-input>`/`<lr-select>` in the same toolbar). Because it is
+ *   never declared by the component itself, it can be set from an ancestor or an outer-tree rule as
+ *   well as inline on the element. Intended for a single-row combobox: in `multiple` mode a tag row
+ *   long enough to wrap overflows the pinned box visibly (nothing is clipped or made unreachable),
+ *   so leave it unset there.
  * @cssprop --lr-combobox-font-size - Input text size.
  * @cssprop --lr-combobox-tag-padding - Selected-tag padding.
  * @cssprop --lr-combobox-tag-font-size - Selected-tag text size.
  * @cssprop --lr-combobox-expand-size - Decorative expand-icon box size, scaled by `size`.
+ * @cssprop [--lr-combobox-option-active-bg=var(--lr-color-brand-quiet)] - Background of a hovered
+ *   or keyboard-active option row.
  */
 export class LyraCombobox extends LyraElement {
     static { this.formAssociated = true; }
@@ -93,9 +145,14 @@ export class LyraCombobox extends LyraElement {
         this.hint = '';
         this.errorText = '';
         this.open = false;
-        /** Visual size — same `xs`–`xl` scale as `lr-select`'s `size`. */
+        /** Visual size — same `2xs`–`xl` scale as `lr-select`'s `size`. */
         this.size = 'm';
-        /** Show a clear button while the combobox has a value. Mirrors `wa-combobox`'s public name. */
+        /** Show a clear button while the combobox has something to clear on either axis: a committed
+         *  selection, or visible filter text (the open listbox in single-select, any time in `multiple`
+         *  mode — a closed single-select shows the selected label, not the query, so a stale query alone
+         *  never surfaces the button). Clearing a selection emits `input`/`change`/`lr-clear`; clearing
+         *  filter text emits `lr-filter` with an empty `value`; each fires only for the axis that
+         *  actually changed. Mirrors `wa-combobox`'s public name. */
         this.clearable = false;
         /** @deprecated Use `clearable`. Retained as a compatibility alias. */
         this.withClear = false;
@@ -116,12 +173,14 @@ export class LyraCombobox extends LyraElement {
         this.source = null;
         // The in-progress filter text. Public read access is the `lr-filter` event
         // rather than a property, so consumers never have to reach into the shadow
-        // input for it. Exactly one writer is user-driven and therefore emits:
-        // `onInput()`. Every other assignment below -- `setRangeText()` (a
-        // programmatic editing API; native `<input>.setRangeText()` likewise fires
-        // no `input` event), `formResetCallback()`, `hide()`, `pickRow()`'s two
-        // commit resets, and `clear()` -- is the component blanking its own filter,
-        // never the user typing, so none of them emit.
+        // input for it. Exactly two writers are user-driven and therefore emit:
+        // `onInput()` (typing) and `clear()` (the clear button, but only when the
+        // query it blanks was actually non-empty). Every other assignment below --
+        // `setRangeText()` (a programmatic editing API; native
+        // `<input>.setRangeText()` likewise fires no `input` event),
+        // `formResetCallback()`, `hide()`, and `pickRow()`'s two commit resets -- is
+        // the component blanking its own filter, never the user driving it, so none
+        // of them emit.
         this.query = '';
         this.activeIndex = -1;
         this.options = [];
@@ -138,6 +197,8 @@ export class LyraCombobox extends LyraElement {
         this.hasHintSlot = false;
         this.hasErrorSlot = false;
         this.hasLabelSlot = false;
+        this.hasStartSlot = false;
+        this.hasEndSlot = false;
         this.loading = false;
         this.asyncRows = [];
         this.sourceToken = 0;
@@ -249,8 +310,8 @@ export class LyraCombobox extends LyraElement {
             this.show();
             if (this.source)
                 this.runSource(this.query);
-            // The only user-driven `query` writer, so the only one that announces the
-            // new filter text (see the `query` declaration above).
+            // One of the two user-driven `query` writers that announce the new filter text (the other is
+            // the clear button, via `clear()`) -- see the `query` declaration above.
             this.emit('lr-filter', { value: this.query });
         };
         this.onInputBlur = () => {
@@ -276,6 +337,12 @@ export class LyraCombobox extends LyraElement {
         this.onLabelSlotChange = (e) => {
             this.hasLabelSlot = e.target.assignedElements({ flatten: true }).length > 0;
         };
+        this.onStartSlotChange = (e) => {
+            this.hasStartSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onEndSlotChange = (e) => {
+            this.hasEndSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
         this.onKeyDown = (e) => {
             const navigable = this.renderedRows.rows.filter((r) => !r.disabled);
             switch (e.key) {
@@ -354,7 +421,7 @@ export class LyraCombobox extends LyraElement {
             if (row)
                 this.pickRow(row);
         };
-        this.internals = this.attachInternals();
+        this.internals = createInternalsSafely(this);
         this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
     }
     get form() {
@@ -403,6 +470,18 @@ export class LyraCombobox extends LyraElement {
     blur() {
         this.inputEl?.blur();
     }
+    /** Activates the trigger the same way a real mouse click on `[part='combobox']` would --
+     *  focuses the filter input and opens the listbox (mirrors `onComboMouseDown` below). Without
+     *  this override, `HTMLElement.prototype.click()` on the host is a no-op: a custom element has
+     *  no native click activation behavior of its own, so a generic form-submit helper, test
+     *  utility, or automation script calling `.click()` on `<lr-combobox>` directly (rather than on
+     *  its shadow-internal parts) would otherwise silently do nothing. */
+    click() {
+        if (this.effectiveDisabled)
+            return;
+        this.inputEl?.focus();
+        this.show();
+    }
     select() {
         this.inputEl?.select();
     }
@@ -432,7 +511,9 @@ export class LyraCombobox extends LyraElement {
         super.connectedCallback();
         this.updateValidity();
     }
-    willUpdate() {
+    willUpdate(changed) {
+        super.willUpdate(changed); // no-op in LyraElement/ReactiveElement today, but a future mixin's
+        // willUpdate() layered under this class must still run.
         // `hasUpdated` flips to `true` before `updated()` even sees its first
         // call, so it can't distinguish "just mounted" from "just changed" there
         // -- capture that distinction here, while it's still reliable, for
@@ -442,6 +523,8 @@ export class LyraCombobox extends LyraElement {
             this.hasHintSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'hint');
             this.hasErrorSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'error');
             this.hasLabelSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'label');
+            this.hasStartSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'start');
+            this.hasEndSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'end');
         }
         // In source (async) mode, `labelFor()` can only resolve a programmatically
         // -set value's label from `asyncRows` -- and nothing normally populates
@@ -747,6 +830,8 @@ export class LyraCombobox extends LyraElement {
             this.query = '';
     }
     updated(changed) {
+        super.updated(changed); // no-op in LyraElement/ReactiveElement today, but a future mixin's
+        // updated() layered under this class must still run.
         if (changed.has('open')) {
             this.cleanup?.();
             this.cleanup = undefined;
@@ -842,15 +927,29 @@ export class LyraCombobox extends LyraElement {
         this.value = next;
         this.emitValueEvents();
     }
+    /**
+     * The clear button clears both axes the control owns — the committed selection and the
+     * in-progress filter text — but each announces only its own change. A query-only clear must stay
+     * silent on `input`/`change`/`lr-clear` (there is no selection transition to report; that early
+     * return is why the button used to be gated on the selection alone), while a selection-only clear
+     * must stay silent on `lr-filter` (the filter text never moved).
+     */
     clear() {
-        if (this._selected.length === 0)
+        const hadSelection = this._selected.length > 0;
+        const queryChanged = this.query !== '';
+        if (!hadSelection && !queryChanged)
             return;
-        this.value = [];
+        if (hadSelection)
+            this.value = [];
         this.query = '';
         if (this.source)
             this.runSource(this.query);
-        this.emitValueEvents();
-        this.emit('lr-clear');
+        if (hadSelection) {
+            this.emitValueEvents();
+            this.emit('lr-clear');
+        }
+        if (queryChanged)
+            this.emit('lr-filter', { value: this.query });
     }
     runSource(query) {
         if (!this.source)
@@ -929,6 +1028,11 @@ export class LyraCombobox extends LyraElement {
         const shownTags = this.multiple ? this._selected.slice(0, this.maxOptionsVisible) : [];
         const extra = this.multiple ? this._selected.length - shownTags.length : 0;
         const hasValue = this._selected.length > 0;
+        // The clear button covers both axes, so it also has to render for a filter-only state.
+        // `displayValue` only surfaces `query` while the listbox is open (single-select) or in
+        // `multiple` mode -- outside those, a closed single-select shows the *selected label*, so a
+        // button gated on the bare `query !== ''` would offer to clear text the user cannot see.
+        const hasVisibleQuery = this.query !== '' && (this.open || this.multiple);
         const hasHint = this.hasHintSlot || this.hint.length > 0;
         const hasError = this.hasErrorSlot || this.errorText.length > 0;
         const hasLabel = this.hasLabelSlot || this.label.length > 0;
@@ -939,6 +1043,9 @@ export class LyraCombobox extends LyraElement {
           ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
         </label>
         <div part="combobox" @mousedown=${this.onComboMouseDown}>
+          <span part="start" ?hidden=${!this.hasStartSlot}>
+            <slot name="start" @slotchange=${this.onStartSlotChange}></slot>
+          </span>
           <div part="tags">
             ${shownTags.map((v) => html `<span part="tag"
                 >${this.labelFor(v)}<button
@@ -983,7 +1090,7 @@ export class LyraCombobox extends LyraElement {
             @focus=${this.onInputFocus}
             @blur=${this.onInputBlur}
           />
-          ${(this.clearable || this.withClear) && hasValue
+          ${(this.clearable || this.withClear) && (hasValue || hasVisibleQuery)
             ? html `<button
                 part="clear-button"
                 type="button"
@@ -997,6 +1104,9 @@ export class LyraCombobox extends LyraElement {
                 ${closeIcon()}
               </button>`
             : ''}
+          <span part="end" ?hidden=${!this.hasEndSlot}>
+            <slot name="end" @slotchange=${this.onEndSlotChange}></slot>
+          </span>
           <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
         </div>
         <div
@@ -1105,6 +1215,12 @@ __decorate([
 __decorate([
     state()
 ], LyraCombobox.prototype, "hasLabelSlot", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "hasStartSlot", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "hasEndSlot", void 0);
 __decorate([
     state()
 ], LyraCombobox.prototype, "loading", void 0);