@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/result-card/result-field.d.ts

@@ -0,0 +1,36 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-result-field>` — a single label/value row, meant for use inside a
+ * `<lyra-result-card>` body (though it works standalone too). Renders as a
+ * dense "label: value" line by default — e.g. "Status: 200 OK" or
+ * "Duration: 340ms" — matching the compact, small-card presentation this
+ * pair exists for.
+ *
+ * @customElement lyra-result-field
+ * @slot - Rich value content (e.g. a `<lyra-chip>` status badge, or a plain
+ * text override), taking precedence over the `value` prop whenever it has
+ * any assigned content.
+ * @csspart base - The row container.
+ * @csspart label - The label text (including its trailing colon).
+ * @csspart value - The wrapper around the value — either the slotted
+ * content or the plain `value` prop text.
+ */
+export declare class LyraResultField extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The field name, e.g. "Status". Leave unset to render a value with no label. */
+    label: string;
+    /** Plain-text value, e.g. "200 OK". Ignored once the default slot carries
+     *  real content — see the `@slot` doc. */
+    value: string;
+    private hasValueSlot;
+    protected willUpdate(): void;
+    firstUpdated(): void;
+    private onSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-result-field': LyraResultField;
+    }
+}

package/dist/components/result-card/result-field.js

@@ -0,0 +1,87 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './result-field.styles.js';
+// An element always counts as real slot content, even one with no text of
+// its own (e.g. a `<lyra-chip>` status badge whose label comes from an
+// attribute, not slotted text) -- assignedElements()-only checks (as
+// lyra-widget's hasActionsSlot/lyra-source-card's hasFullSlot use) would
+// miss that case. A bare text node only counts once trimmed of whitespace,
+// matching lyra-checkbox's hasLabelSlot. Together this catches both a
+// plain-text value override (`<lyra-result-field label="Status">200 OK`)
+// and a rich slotted badge.
+function hasRealContent(nodes) {
+    return nodes.some((n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent ?? '').trim().length > 0);
+}
+/**
+ * `<lyra-result-field>` — a single label/value row, meant for use inside a
+ * `<lyra-result-card>` body (though it works standalone too). Renders as a
+ * dense "label: value" line by default — e.g. "Status: 200 OK" or
+ * "Duration: 340ms" — matching the compact, small-card presentation this
+ * pair exists for.
+ *
+ * @customElement lyra-result-field
+ * @slot - Rich value content (e.g. a `<lyra-chip>` status badge, or a plain
+ * text override), taking precedence over the `value` prop whenever it has
+ * any assigned content.
+ * @csspart base - The row container.
+ * @csspart label - The label text (including its trailing colon).
+ * @csspart value - The wrapper around the value — either the slotted
+ * content or the plain `value` prop text.
+ */
+export class LyraResultField extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The field name, e.g. "Status". Leave unset to render a value with no label. */
+        this.label = '';
+        /** Plain-text value, e.g. "200 OK". Ignored once the default slot carries
+         *  real content — see the `@slot` doc. */
+        this.value = '';
+        this.hasValueSlot = false;
+        this.onSlotChange = (e) => {
+            this.hasValueSlot = hasRealContent(e.target.assignedNodes({ flatten: true }));
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasValueSlot = hasRealContent(Array.from(this.childNodes));
+        }
+    }
+    firstUpdated() {
+        // Fallback reconciliation against the fully-resolved slot assignment,
+        // the same belt-and-suspenders pass lyra-source-card's hasFullSlot and
+        // lyra-empty's hasIcon/hasActions take -- a no-op in the common case
+        // since willUpdate already seeded the correct value above.
+        const slot = this.shadowRoot.querySelector('slot');
+        this.hasValueSlot = hasRealContent(slot.assignedNodes({ flatten: true }));
+    }
+    render() {
+        const hasLabel = this.label.length > 0;
+        return html `
+      <div part="base">
+        ${hasLabel ? html `<span part="label">${this.label}:</span>` : nothing}
+        <span part="value"
+          >${this.hasValueSlot ? nothing : this.value}<slot @slotchange=${this.onSlotChange}></slot
+        ></span>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraResultField.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraResultField.prototype, "value", void 0);
+__decorate([
+    state()
+], LyraResultField.prototype, "hasValueSlot", void 0);
+defineElement('result-field', LyraResultField);

package/dist/components/result-card/result-field.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/result-card/result-field.styles.js

@@ -0,0 +1,32 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  /* Dense "label: value" single-line row by default -- the compact
+     presentation short status/duration/count content (the kind this
+     component is meant for) reads best as, versus a stacked two-line
+     layout. A consumer that prefers stacked can override this from the
+     light DOM: :host { } / [part='base'] { flex-direction: column; }. */
+  [part='base'] {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    column-gap: var(--lyra-space-xs);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+  [part='label'] {
+    flex: 0 0 auto;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='value'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    color: var(--lyra-color-text);
+    overflow-wrap: anywhere;
+  }
+  [part='value'] ::slotted(*) {
+    vertical-align: middle;
+  }
+`;

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

@@ -1,6 +1,7 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 import '../combobox/option.js';
+export type LyraSelectSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 /**
  * `<lyra-select>` — a plain closed-list dropdown: a direct `<lyra-*>`
  * counterpart to `<wa-select>`/`<wa-option>`. Trigger is a button (not a text
@@ -20,6 +21,22 @@ import '../combobox/option.js';
  * "active" row is conveyed via `aria-activedescendant`, never actual focus),
  * matching the WAI-ARIA "select-only combobox" pattern.
  *
+ * When `autoCommitSingleOption` is set and exactly one option is enabled
+ * (regardless of how many disabled ones exist alongside it), the popup never
+ * opens at all: a click, Enter, Space, ArrowDown, or ArrowUp on the trigger
+ * commits that sole option directly, and the trigger renders as a plain
+ * `role="button"` with no chevron/`aria-haspopup`/`aria-expanded` rather than
+ * a combobox with a permanently inert popup state — opening a one-row list to
+ * pick the only available choice is pure friction with no real decision
+ * behind it. This never changes `value`/validity defaults on its own — an
+ * unselected single-option select stays unselected (and a `required` one
+ * stays invalid) exactly like the multi-option case, until the trigger is
+ * actually activated. `autoCommitSingleOption` defaults to `false`: by
+ * default a select always renders the normal combobox/listbox/chevron
+ * trigger no matter how many options are enabled, matching pre-1.3.0
+ * behavior — opt in explicitly if a narrowing-to-one option list should
+ * auto-commit.
+ *
  * @customElement lyra-select
  * @slot - `<lyra-option>` elements.
  * @slot label - Custom label content.
@@ -42,25 +59,45 @@ import '../combobox/option.js';
  * @csspart error - The error message.
  * @csspart hint - The hint message.
  */
-export type LyraSelectSize = 'xs' | 's' | 'm' | 'l' | 'xl';
 export declare class LyraSelect extends LyraElement {
     static formAssociated: boolean;
     static styles: import("lit").CSSResultGroup[];
     static properties: {
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            noAccessor: boolean;
+        };
         value: {
             noAccessor: boolean;
         };
+        name: {
+            reflect: boolean;
+            noAccessor: boolean;
+        };
     };
     placeholder: string;
-    disabled: boolean;
-    required: boolean;
-    name: string;
     label: string;
     hint: string;
     errorText: string;
     open: boolean;
     /** Visual size — same `xs`–`xl` scale as `lyra-toast-item`'s `size`. */
     size: LyraSelectSize;
+    /**
+     * Opt-in: when `true` and exactly one `<lyra-option>` is enabled, the
+     * trigger commits that option directly (click/Enter/Space/ArrowDown/
+     * ArrowUp) instead of opening the listbox, and renders as a plain
+     * `role="button"` with no chevron. Defaults to `false`, which always
+     * renders the normal combobox/listbox/chevron trigger regardless of how
+     * many options are enabled — the pre-1.3.0 behavior. See the class doc
+     * above and `onlyOption` below for the full rationale.
+     */
+    autoCommitSingleOption: boolean;
     private activeIndex;
     private options;
     private touched;
@@ -68,30 +105,73 @@ export declare class LyraSelect extends LyraElement {
     private hasErrorSlot;
     private hasLabelSlot;
     private internals;
+    private validityController;
+    private _fieldsetDisabled;
     private listId;
     private triggerId;
     private cleanup?;
     private _isFirstUpdate;
     private _selected;
+    private _disabled;
+    private _required;
     private _defaultSelected;
     private _defaultCaptured;
+    private _restoredStateActive;
     private typeAheadBuffer;
     private typeAheadTimer?;
+    private _name;
     constructor();
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
     connectedCallback(): void;
     protected willUpdate(): void;
+    get name(): string;
+    set name(next: string);
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    get required(): boolean;
+    set required(next: boolean);
     /** The selected value: a single string (empty when nothing is selected). */
     get value(): string;
     set value(next: string);
     private updateValidity;
     private syncFormValue;
+    /** Effective disabled state: this element's own `disabled` OR an ancestor
+     *  `<fieldset disabled>`'s inherited state -- mirrors native `<input>`, whose
+     *  own `disabled` IDL property/attribute is never mutated by a fieldset. */
+    get effectiveDisabled(): boolean;
     formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, _mode?: 'restore' | 'autocomplete'): void;
+    /**
+     * Called by the browser when an ancestor `<fieldset disabled>` toggles.
+     * Tracked separately from the consumer's own `disabled` (see
+     * `effectiveDisabled`) so a consumer's explicit `disabled` survives the
+     * fieldset re-enabling instead of being permanently overwritten.
+     */
     formDisabledCallback(disabled: boolean): void;
     checkValidity(): boolean;
     reportValidity(): boolean;
     disconnectedCallback(): void;
     private collectOptions;
     private reflectSelected;
+    /**
+     * The sole navigable (non-disabled) option, when `autoCommitSingleOption` is set and
+     * there's exactly one. Opening a one-row popup to pick the only available choice is pure
+     * friction with no real decision behind it, so an opted-in single-option select skips the
+     * popup entirely -- see `onTriggerClick`/`onKeyDown`, which commit this option directly on
+     * activation instead of opening the listbox, and `render()`, which drops the popup-trigger
+     * ARIA semantics (`role="combobox"`, `aria-haspopup`, `aria-expanded`, the chevron) in favor
+     * of a plain button's, since no popup can ever appear while this getter returns a value.
+     * Returns `undefined` whenever `autoCommitSingleOption` is `false` (the default), regardless
+     * of option count, so the normal combobox trigger renders unconditionally. Does not affect
+     * `value`/validity defaults in any way -- an unselected single-option select stays unselected
+     * until the trigger is actually activated, exactly like the multi-option case.
+     */
+    private get onlyOption();
+    private onOptionChange;
     private show;
     private hide;
     private onDocPointer;