@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/menu/menu.styles.js

@@ -15,13 +15,13 @@ export const styles = css `
   }
   [part='popup'] {
     position: fixed;
-    z-index: 900;
+    z-index: var(--lyra-layer-dropdown);
     box-sizing: border-box;
-    min-inline-size: 10rem;
-    max-inline-size: min(92vw, 20rem, var(--lyra-positioner-available-inline-size, 100vw));
-    max-block-size: min(20rem, var(--lyra-positioner-available-block-size, 20rem));
+    min-inline-size: var(--lyra-size-10rem);
+    max-inline-size: min(92vw, var(--lyra-size-20rem), var(--lyra-positioner-available-inline-size, 100vw));
+    max-block-size: min(var(--lyra-size-20rem), var(--lyra-positioner-available-block-size, var(--lyra-size-20rem)));
     background: var(--lyra-color-surface);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     box-shadow: var(--lyra-shadow);
     /* Closed state: invisible + slightly raised -- visibility (not
@@ -32,7 +32,7 @@ export const styles = css `
        needed. Mirrors lyra-select's identical [part='listbox'] treatment. */
     visibility: hidden;
     opacity: 0;
-    transform: translateY(-0.25rem);
+    transform: translateY(var(--lyra-size-neg-0-25rem));
     transition:
       opacity var(--lyra-transition-fast),
       transform var(--lyra-transition-fast),
@@ -51,7 +51,7 @@ export const styles = css `
   [part='list'] {
     display: flex;
     flex-direction: column;
-    max-block-size: min(20rem, var(--lyra-positioner-available-block-size, 20rem));
+    max-block-size: min(var(--lyra-size-20rem), var(--lyra-positioner-available-block-size, var(--lyra-size-20rem)));
     overflow-y: auto;
     padding: var(--lyra-space-xs);
     outline: none;
@@ -61,7 +61,8 @@ export const styles = css `
      between groups of menuitem children, so no role attribute needs adding. */
   ::slotted(hr) {
     border: none;
-    border-block-start: 1px solid var(--lyra-color-border);
+    border-block-start: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     margin: var(--lyra-space-xs) var(--lyra-space-xs);
   }
 `;
+//# sourceMappingURL=menu.styles.js.map

package/dist/components/menu/menu.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.styles.js","sourceRoot":"","sources":["../../../src/components/menu/menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiExB,CAAC"}

package/dist/components/model-select/model-select.class.d.ts

@@ -0,0 +1,177 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/** A catalog row: a selectable model, keyed by `id` with a display `label`. */
+export interface LyraModelCatalogEntry {
+    id: string;
+    label: string;
+}
+/**
+ * The `catalog` shape: either every entry is a plain string (used as both id
+ * and label) or every entry is a full `{ id, label }` row — not a mix of both.
+ */
+export type LyraModelCatalog = string[] | LyraModelCatalogEntry[];
+/**
+ * `<lyra-model-select>` — a provider/model picker that renders as a closed
+ * dropdown when a fixed `catalog` is available, or as a filterable free-text
+ * combobox when it isn't (or when `allow-custom` explicitly permits typing
+ * something outside the catalog). Built directly on the shared
+ * trigger-button/aria-activedescendant listbox technique `<lyra-select>` uses
+ * and the filter-as-you-type suggestion-popup technique `<lyra-combobox>`
+ * uses — not by composing either element, since the mode switch and the
+ * stale-value handling below are specific to this control.
+ *
+ * A `value` that isn't present in `catalog` (e.g. a model id saved from a
+ * provider whose live catalog has since changed) is never silently dropped:
+ * `effectiveEntries` appends it to the rendered option list as a synthetic,
+ * visually-distinct row (dashed border, italic label, "not in catalog"
+ * badge — see `model-select.styles.ts`) computed fresh from `catalog` +
+ * `value` on every render, without ever mutating the `catalog` property
+ * itself.
+ *
+ * @customElement lyra-model-select
+ * @event lyra-change - The selected/typed value changed. `detail: { value: string; inCatalog: boolean }`.
+ * @csspart form-control-label - The `<label>` element (only rendered — and only contributes to the
+ *   accessible name — once `label` is non-empty).
+ * @csspart trigger - The trigger button (closed-dropdown mode's positioning anchor).
+ * @csspart combobox - The text-input container (free-text mode's positioning anchor).
+ * @csspart combobox-input - The free-text mode's text input.
+ * @csspart provider-badge - The optional leading `provider` label.
+ * @csspart listbox - The options popover (shared by both modes).
+ * @csspart option - An option row.
+ * @csspart option-label - An option row's label.
+ * @csspart option-badge - The "not in catalog" badge on a synthetic stale-value row.
+ * @csspart expand-icon - The dropdown indicator.
+ */
+export interface LyraModelSelectEventMap {
+    'lyra-change': CustomEvent<{
+        value: string;
+        inCatalog: boolean;
+    }>;
+}
+export declare class LyraModelSelect extends LyraElement<LyraModelSelectEventMap> {
+    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;
+        };
+    };
+    /** Informational only — e.g. `'ollama'`. Rendered as a small leading badge for display grouping. */
+    provider: string;
+    /** The full model list. Omit (or leave empty) to fall back to plain free-text entry. */
+    catalog?: LyraModelCatalog;
+    /** Let the user type/commit a value that isn't in `catalog`, even when `catalog` is non-empty. */
+    allowCustom: boolean;
+    /**
+     * Optional visible title above the control, mirroring `lyra-select`'s
+     * `label` exactly: rendered via a `part="form-control-label"` `<label>`
+     * paired with the control's id, and — once non-empty — it takes over as
+     * the accessible-name source (the `aria-label` fallback below is then only
+     * emitted when the host has an explicit `aria-label` override, same
+     * precedence as `lyra-select`). Leaving it empty (the default) keeps
+     * today's `aria-label || placeholder || 'Model'` chain untouched.
+     */
+    label: string;
+    placeholder: string;
+    open: boolean;
+    private activeIndex;
+    private query;
+    private touched;
+    private internals;
+    private validityController;
+    private listId;
+    private controlId;
+    private cleanup?;
+    private _value;
+    private _fieldsetDisabled;
+    private _name;
+    private _disabled;
+    private _required;
+    private _defaultValue;
+    constructor();
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, old: string | null, val: string | null): void;
+    /** The current model id (empty string when nothing is selected). */
+    get value(): string;
+    set value(next: string);
+    /** The form submission key, reflected synchronously for native form APIs. */
+    get name(): string;
+    set name(next: string);
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    get required(): boolean;
+    set required(next: boolean);
+    /** Whether the control is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled(): boolean;
+    private updateValidity;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | File | FormData | null, _mode?: 'restore' | 'autocomplete'): void;
+    formDisabledCallback(disabled: boolean): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    /** `catalog`, normalized to `{ id, label }[]` regardless of the plain-string-array shorthand. */
+    private get normalizedCatalog();
+    /** Closed-dropdown-with-listbox mode vs. free-text filterable mode — see class doc. */
+    private get closedMode();
+    /**
+     * `normalizedCatalog` plus, when `value` isn't one of its ids, a synthetic
+     * trailing row for it — recomputed from scratch on every access so it
+     * always reflects the *current* `catalog`/`value`, never a snapshot from
+     * whenever `value` happened to be assigned.
+     */
+    private get effectiveEntries();
+    /** `effectiveEntries` filtered by the typed `query` (free-text mode only; id or label substring, case-insensitive). */
+    private get filteredEntries();
+    private labelFor;
+    private show;
+    private hide;
+    private onDocPointer;
+    protected updated(changed: PropertyValues): void;
+    private commitValue;
+    private selectEntry;
+    /** Enter in free-text mode: commit the highlighted suggestion, else the raw typed text. */
+    private commitFreeText;
+    private onTriggerClick;
+    private onTriggerBlur;
+    private onTriggerKeyDown;
+    private onComboMouseDown;
+    private onInputFocus;
+    private onInput;
+    private onInputBlur;
+    private onInputKeyDown;
+    private onListboxMouseDown;
+    private onListboxClick;
+    private renderRows;
+    private renderListbox;
+    /** `part="form-control-label"` — see `label`'s doc comment for its precedence over `aria-label`. */
+    private renderLabel;
+    private renderClosed;
+    private renderFreeText;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-model-select': LyraModelSelect;
+    }
+}
+//# sourceMappingURL=model-select.class.d.ts.map

package/dist/components/model-select/model-select.class.d.ts.map

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