@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/tool-param-form/tool-param-form.js

@@ -0,0 +1,610 @@
+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 { state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { nextId } from '../../internal/a11y.js';
+import { AnchoredValidityController, resolveValidityAnchor, VALIDITY_ANCHOR, } from '../../internal/anchored-validity.js';
+import { styles } from './tool-param-form.styles.js';
+import '../select/select.js';
+import '../combobox/option.js';
+import '../checkbox/checkbox.js';
+const EMPTY_SCHEMA = { type: 'object', properties: {} };
+/**
+ * `<lyra-tool-param-form>` — renders one form control per top-level property
+ * of a JSON Schema object, for ad hoc tool invocation or approval-editing UIs
+ * (e.g. "the agent wants to call `create_event(title, attendees, allDay)` —
+ * let the user tweak the arguments before running it").
+ *
+ * **Scope limitation (intentional, not accidental):** this phase only
+ * understands a *flat* object schema — every `properties` entry must be
+ * `'string'`, `'number'`, `'integer'`, `'boolean'`, or a string `enum`;
+ * primitive `const` is also enforced. Nested objects, arrays,
+ * `oneOf`/`anyOf`/`allOf`, `$ref`, constraints such as `minLength`/`minimum`,
+ * and schema-valued `additionalProperties` are not read. A full
+ * JSON-Schema-to-form renderer is
+ * out of scope for this component; a property whose `type` isn't one of the
+ * four above renders a visible "Unsupported field type" note and marks the
+ * form invalid instead of silently dropping it or throwing.
+ *
+ * Fields render in `Object.keys(schema.properties)` order (insertion order,
+ * which is reliable for a plain object's string keys). A field's label is
+ * `title ?? ` the property key; `description` renders as helper text below
+ * the control; a key listed in `required` gets a visible `*`. The outer
+ * component owns validation because JSON Schema `required` means property
+ * presence, unlike HTML controls' nonempty/must-check semantics.
+ *
+ * This component owns no Submit/Cancel/Approve chrome — a consumer composes
+ * it inside their own dialog (e.g. a tool-approval dialog) and reads
+ * `.value`/`.errors`/`checkValidity()` (or calls `reportValidity()` right
+ * before acting, which also reveals any inline errors that user interaction
+ * hasn't surfaced yet).
+ *
+ * `value` is exactly what the consumer last set it to — a field with no
+ * entry in `value` but a schema `default` displays (and is *emitted*, via
+ * `lyra-input`) as that default, but the `value` *property* itself is left
+ * alone until the user actually edits that field. This mirrors an
+ * uncontrolled `<input placeholder>` not writing to `.value`, and means the
+ * very first `lyra-input` a consumer receives already carries every default
+ * resolved, so round-tripping `e.detail.value` back into `.value` converges
+ * after one edit. JSON Schema defines `default` as an annotation; this form
+ * renderer deliberately materializes it before validation and submission,
+ * so a valid default can satisfy `required` here.
+ *
+ * Optional native `<form>` participation is implemented via `ElementInternals`
+ * attached directly (this component's value is a whole object, not a plain
+ * string, so the `FormAssociated` string-value mixin doesn't fit — same
+ * shape as `<lyra-combobox>`'s array-valued case). This is a nice-to-have
+ * layered on top of the primary integration contract (`value` +
+ * `lyra-input`/`lyra-validity-change`), not a requirement: a consumer that
+ * never puts this inside a `<form>` loses nothing.
+ *
+ * @customElement lyra-tool-param-form
+ * @event lyra-input - A field's value changed. `detail: { value }` — the
+ * full current value object (every property, defaults resolved), not just
+ * the field that changed.
+ * @event lyra-validity-change - Overall validity or field errors changed.
+ * `detail: { valid: boolean; errors: Record<string, string> }`.
+ * @csspart base - The outer wrapper around all fields.
+ * @csspart field - One property's wrapper (label + control + description + error).
+ * @csspart label - A field's label.
+ * @csspart description - A field's helper text, from `schema.description`.
+ * @csspart error - A field-level or form-level validation message.
+ */
+export class LyraToolParamForm extends LyraElement {
+    static { this.formAssociated = true; }
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        name: { reflect: true, noAccessor: true },
+        schema: { attribute: false, noAccessor: true },
+        value: { attribute: false, noAccessor: true },
+        disabled: { type: Boolean, reflect: true, noAccessor: true },
+    }; }
+    constructor() {
+        super();
+        // The true (touched-independent) per-field error set, recomputed by the
+        // synchronous schema/value accessors so native validity APIs and the next
+        // render observe the same state. Exposed publicly (read-only) via the
+        // `errors` getter below, under a leading underscore so the getter itself
+        // can be named plain `errors` without a collision.
+        this._errors = {};
+        this._formError = '';
+        this.showFormError = false;
+        // Which fields have been visited (focusout'd) at least once — gates only
+        // the *visual* error/aria-invalid presentation, matching every other
+        // form control in this library (lyra-select/lyra-combobox/lyra-model-select
+        // all avoid flashing red before the user has touched anything).
+        this.touchedFields = new Set();
+        this.baseId = nextId('tool-param-form');
+        this._fieldsetDisabled = false;
+        this._name = '';
+        this._schema = EMPTY_SCHEMA;
+        this._value = {};
+        this._effectiveValue = {};
+        this._validityFlags = {};
+        this._disabled = false;
+        this.internals = this.attachInternals();
+        this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
+        this.syncFormState();
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get labels() {
+        return this.internals.labels;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    /** @internal */
+    [VALIDITY_ANCHOR]() {
+        const field = this.firstInvalidField();
+        if (!field)
+            return undefined;
+        const input = field.querySelector('input.control');
+        if (input)
+            return input;
+        for (const child of field.children) {
+            const anchor = resolveValidityAnchor(child);
+            if (anchor)
+                return anchor;
+        }
+        return undefined;
+    }
+    firstInvalidField() {
+        const firstInvalidKey = Object.keys(this._errors)[0];
+        if (!firstInvalidKey || !this.renderRoot)
+            return undefined;
+        return Array.from(this.renderRoot.querySelectorAll('[part="field"]')).find((candidate) => candidate.dataset.key === firstInvalidKey);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Seed `errors`/`internals` validity synchronously at connect time —
+        // `checkValidity()`/a wrapping `<form>`'s own `reportValidity()` must
+        // see the correct answer even if called before Lit's first (async)
+        // update has run, mirroring lyra-select's/lyra-checkbox's identical
+        // connectedCallback -> updateValidity() call.
+        this.syncFormState();
+    }
+    /** `value`, with any property missing from it filled in from `schema`'s own `default` — see the class doc. */
+    get effectiveValue() {
+        return { ...this._effectiveValue };
+    }
+    get schemaProperties() {
+        const properties = this.schema?.properties;
+        return properties !== null && typeof properties === 'object' && !Array.isArray(properties)
+            ? properties
+            : {};
+    }
+    get requiredKeys() {
+        const required = this.schema?.required;
+        return Array.isArray(required) ? required.filter((key) => typeof key === 'string') : [];
+    }
+    resolveEffectiveValue() {
+        const props = this.schemaProperties;
+        const out = { ...this.value };
+        for (const key of Object.keys(props)) {
+            // `hasOwnProperty`, not `out[key] === undefined` — a number field the
+            // user has explicitly cleared is `{ days: undefined }` (a real own
+            // property, via the `{...this.value, [key]: val}` spread in
+            // setFieldValue()), and must stay cleared rather than silently
+            // snapping back to its default just because its current value also
+            // happens to be `undefined`. Only a key genuinely absent from `value`
+            // (never touched, or reset back to `{}`) falls back to the default.
+            if (!Object.prototype.hasOwnProperty.call(this.value, key) && props[key].default !== undefined) {
+                Object.defineProperty(out, key, {
+                    configurable: true,
+                    enumerable: true,
+                    writable: true,
+                    value: props[key].default,
+                });
+            }
+        }
+        return out;
+    }
+    get schema() {
+        return this._schema;
+    }
+    set schema(next) {
+        const old = this._schema;
+        this._schema = next ?? EMPTY_SCHEMA;
+        this.syncFormState();
+        this.requestUpdate('schema', old);
+    }
+    get value() {
+        return this._value;
+    }
+    set value(next) {
+        const old = this._value;
+        this._value = next ?? {};
+        this.syncFormState();
+        this.requestUpdate('value', old);
+    }
+    /** Submission key for the optional native `<form>` participation, reflected synchronously. */
+    get name() {
+        return this._name;
+    }
+    set name(next) {
+        const old = this._name;
+        this._name = next ?? '';
+        if (this._name) {
+            this.setAttribute('name', this._name);
+        }
+        else {
+            this.removeAttribute('name');
+        }
+        this.requestUpdate('name', old);
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(next) {
+        const old = this._disabled;
+        this._disabled = Boolean(next);
+        this.toggleAttribute('disabled', this._disabled);
+        this.requestUpdate('disabled', old);
+    }
+    /** Whether the form is disabled explicitly or by an ancestor fieldset. */
+    get effectiveDisabled() {
+        return this.disabled || this._fieldsetDisabled;
+    }
+    /**
+     * The current per-field validation errors (`{ [propertyKey]: message }`) —
+     * required presence, primitive type, integer, enum, const, or unsupported
+     * type — mirrors the last `lyra-validity-change` event's `errors`.
+     * Independent of which fields have been visited; a consumer wanting the
+     * visited-only, screen-reader-announced subset should read the rendered
+     * `[part="error"]` elements instead.
+     */
+    get errors() {
+        return { ...this._errors };
+    }
+    /** A schema-wide or JSON-serialization error that cannot be assigned to one field. */
+    get formError() {
+        return this._formError;
+    }
+    /**
+     * Computes the supported flat JSON Schema subset against the exact value
+     * that will be submitted. Defaults are already materialized in `effective`.
+     */
+    computeValidation(effective) {
+        const props = this.schemaProperties;
+        const required = new Set(this.requiredKeys);
+        const out = {};
+        const flags = {};
+        const addError = (key, message) => {
+            Object.defineProperty(out, key, {
+                configurable: true,
+                enumerable: true,
+                writable: true,
+                value: message,
+            });
+        };
+        for (const key of Object.keys(props)) {
+            const prop = props[key];
+            const type = prop?.type;
+            if (type !== 'string' && type !== 'number' && type !== 'integer' && type !== 'boolean') {
+                addError(key, `Unsupported field type "${String(type)}".`);
+                flags.customError = true;
+                continue;
+            }
+            const present = Object.prototype.hasOwnProperty.call(effective, key) && effective[key] !== undefined;
+            if (!present) {
+                if (required.has(key)) {
+                    addError(key, 'This field is required.');
+                    flags.valueMissing = true;
+                }
+                continue;
+            }
+            const v = effective[key];
+            if (type === 'string' && typeof v !== 'string') {
+                addError(key, 'Must be a string.');
+                flags.typeMismatch = true;
+                continue;
+            }
+            if (type === 'number' && (typeof v !== 'number' || !Number.isFinite(v))) {
+                addError(key, 'Must be a finite number.');
+                flags.typeMismatch = true;
+                continue;
+            }
+            if (type === 'integer' && (typeof v !== 'number' || !Number.isFinite(v))) {
+                addError(key, 'Must be a whole number.');
+                flags.typeMismatch = true;
+                continue;
+            }
+            if (type === 'integer' && !Number.isInteger(v)) {
+                addError(key, 'Must be a whole number.');
+                flags.stepMismatch = true;
+                continue;
+            }
+            if (type === 'boolean' && typeof v !== 'boolean') {
+                addError(key, 'Must be a boolean.');
+                flags.typeMismatch = true;
+                continue;
+            }
+            if (type === 'string' && Array.isArray(prop.enum) && !prop.enum.includes(v)) {
+                addError(key, `Must be one of: ${prop.enum.join(', ')}.`);
+                flags.customError = true;
+                continue;
+            }
+            if (prop.const !== undefined && v !== prop.const) {
+                addError(key, `Must equal ${JSON.stringify(prop.const)}.`);
+                flags.customError = true;
+            }
+        }
+        for (const key of required) {
+            if (Object.prototype.hasOwnProperty.call(props, key))
+                continue;
+            if (!Object.prototype.hasOwnProperty.call(effective, key) || effective[key] === undefined) {
+                addError(key, 'This field is required.');
+                flags.valueMissing = true;
+            }
+        }
+        return { errors: out, flags };
+    }
+    /** Resynchronizes validity without revealing inline errors. */
+    checkValidity() {
+        this.syncFormState();
+        return this.internals.checkValidity();
+    }
+    /**
+     * Reveals every current field/root error (as if each field had been
+     * visited) and returns overall validity — the hook a
+     * consumer's own Submit/Approve button should call right before acting,
+     * mirroring a native `<form>`'s `reportValidity()`.
+     */
+    reportValidity() {
+        this.syncFormState();
+        if (Object.keys(this._errors).length > 0) {
+            this.touchedFields = new Set([...this.touchedFields, ...Object.keys(this._errors)]);
+        }
+        if (this._formError)
+            this.showFormError = true;
+        return this.internals.reportValidity();
+    }
+    formResetCallback() {
+        this.value = {};
+        this.touchedFields = new Set();
+        this.showFormError = false;
+    }
+    formStateRestoreCallback(state, _mode) {
+        let restored = {};
+        if (typeof state === 'string') {
+            try {
+                const parsed = JSON.parse(state);
+                if (parsed !== null && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                    restored = parsed;
+                }
+            }
+            catch {
+                // Invalid persisted state restores the safe empty object.
+            }
+        }
+        this.value = restored;
+    }
+    formDisabledCallback(disabled) {
+        this._fieldsetDisabled = disabled;
+        this.requestUpdate();
+    }
+    schemaShapeError() {
+        const schema = this.schema;
+        if (schema === null || typeof schema !== 'object' || schema.type !== 'object') {
+            return 'Schema must describe an object.';
+        }
+        const properties = schema.properties;
+        if (properties === null || typeof properties !== 'object' || Array.isArray(properties)) {
+            return 'Schema properties must be a flat object.';
+        }
+        return '';
+    }
+    serializeEffectiveValue(effective) {
+        const serialized = JSON.stringify(effective, (_key, value) => {
+            if (typeof value === 'number' && !Number.isFinite(value)) {
+                throw new TypeError('Non-finite numbers are not JSON values.');
+            }
+            return value;
+        });
+        if (typeof serialized !== 'string')
+            throw new TypeError('Value did not serialize to JSON.');
+        return serialized;
+    }
+    /** Pushes the already-computed snapshot into `ElementInternals`. */
+    syncInternals(formValue) {
+        this.internals.setFormValue(formValue, formValue);
+        if (Object.keys(this._validityFlags).length === 0) {
+            this.validityController.setValidity({});
+        }
+        else {
+            const firstMessage = Object.values(this._errors)[0] ?? this._formError ?? 'The value is invalid.';
+            this.validityController.setValidity(this._validityFlags, firstMessage);
+        }
+    }
+    syncFormState() {
+        let effective = {};
+        let errors = {};
+        let flags = {};
+        let formError = '';
+        let formValue = null;
+        try {
+            formError = this.schemaShapeError();
+            effective = this.resolveEffectiveValue();
+            const validation = this.computeValidation(effective);
+            errors = validation.errors;
+            flags = validation.flags;
+            formValue = this.serializeEffectiveValue(effective);
+        }
+        catch {
+            formError = 'Value must be JSON-serializable.';
+            formValue = null;
+        }
+        if (formError) {
+            flags.customError = true;
+            formValue = null;
+        }
+        this._effectiveValue = effective;
+        if (JSON.stringify(this._errors) !== JSON.stringify(errors))
+            this._errors = errors;
+        this._formError = formError;
+        this._validityFlags = flags;
+        this.syncInternals(formValue);
+    }
+    updated(changed) {
+        if (changed.has('value') || changed.has('schema') || changed.has('_errors') || changed.has('_formError')) {
+            const valid = Object.keys(this._errors).length === 0 && this._formError === '';
+            const key = JSON.stringify({ valid, errors: this._errors, formError: this._formError });
+            if (key !== this.lastValidityKey) {
+                this.lastValidityKey = key;
+                this.emit('lyra-validity-change', { valid, errors: { ...this._errors } });
+            }
+            const nestedUpdates = Array.from(this.firstInvalidField()?.children ?? [])
+                .filter((element) => typeof element[VALIDITY_ANCHOR] === 'function')
+                .map((element) => element.updateComplete)
+                .filter((update) => update !== undefined);
+            if (nestedUpdates.length > 0) {
+                void Promise.all(nestedUpdates).then(() => this.validityController.refreshAnchor());
+            }
+        }
+    }
+    setFieldValue(key, val) {
+        if (this.effectiveDisabled)
+            return;
+        this.value = { ...this.value, [key]: val };
+        this.emit('lyra-input', { value: this.effectiveValue });
+    }
+    markTouched(key) {
+        if (this.touchedFields.has(key))
+            return;
+        this.touchedFields = new Set(this.touchedFields).add(key);
+    }
+    onTextInput(key, e) {
+        this.setFieldValue(key, e.target.value);
+    }
+    onNumberInput(key, e) {
+        const raw = e.target;
+        const n = raw.valueAsNumber;
+        this.setFieldValue(key, Number.isNaN(n) ? undefined : n);
+    }
+    onSelectChange(key, e) {
+        this.setFieldValue(key, e.target.value);
+    }
+    onCheckboxChange(key, e) {
+        this.setFieldValue(key, e.detail.checked);
+    }
+    renderControl(key, prop, fieldId, label, required, describedBy, errorMessage, effective) {
+        if (prop.type === 'string' && prop.enum && prop.enum.length > 0) {
+            // <lyra-select>/<lyra-checkbox> don't forward a host-level
+            // aria-describedby to their internal focusable element (neither
+            // reads it — and this component doesn't own either file to add that),
+            // so a plain aria-describedby here would silently do nothing for
+            // assistive tech. Fold the error into aria-label instead, which both
+            // select.ts and checkbox.ts *do* read from the host and thread
+            // through -- the description text still reads fine from its adjacent,
+            // DOM-order-following <p part="description"> even without a formal
+            // aria-describedby association.
+            return html `<lyra-select
+        id=${fieldId}
+        aria-label=${errorMessage ? `${label}. ${errorMessage}` : label}
+        aria-required=${required ? 'true' : nothing}
+        .value=${typeof effective === 'string' ? effective : ''}
+        ?disabled=${this.effectiveDisabled}
+        @change=${(e) => this.onSelectChange(key, e)}
+      >
+        ${prop.enum.map((v) => html `<lyra-option value=${v}>${v}</lyra-option>`)}
+      </lyra-select>`;
+        }
+        if (prop.type === 'string') {
+            return html `<input
+        class="control"
+        type="text"
+        id=${fieldId}
+        aria-describedby=${describedBy || nothing}
+        aria-required=${required ? 'true' : nothing}
+        aria-invalid=${errorMessage ? 'true' : nothing}
+        .value=${typeof effective === 'string' ? effective : ''}
+        ?disabled=${this.effectiveDisabled}
+        @input=${(e) => this.onTextInput(key, e)}
+      />`;
+        }
+        if (prop.type === 'number' || prop.type === 'integer') {
+            const numValue = typeof effective === 'number' && !Number.isNaN(effective) ? String(effective) : '';
+            return html `<input
+        class="control"
+        type="number"
+        id=${fieldId}
+        step=${prop.type === 'integer' ? '1' : 'any'}
+        aria-describedby=${describedBy || nothing}
+        aria-required=${required ? 'true' : nothing}
+        aria-invalid=${errorMessage ? 'true' : nothing}
+        .value=${numValue}
+        ?disabled=${this.effectiveDisabled}
+        @input=${(e) => this.onNumberInput(key, e)}
+      />`;
+        }
+        if (prop.type === 'boolean') {
+            // The label lives inside the slot rather than as a sibling <label> --
+            // that slot *is* lyra-checkbox's documented way to give it an
+            // accessible name (see checkbox.ts's own @slot doc), and unlike
+            // aria-describedby, this genuinely works since it's real slotted
+            // content, not an inert host attribute. Once there's an error, fold it
+            // into aria-label the same way the enum/select branch above does --
+            // an explicit aria-label overrides the slotted accessible name, so the
+            // normal (no error) case is left alone to keep deriving its name from
+            // the slot per lyra-checkbox's own documented contract.
+            return html `<lyra-checkbox
+        id=${fieldId}
+        aria-label=${errorMessage ? `${label}. ${errorMessage}` : nothing}
+        ?checked=${effective === true}
+        ?disabled=${this.effectiveDisabled}
+        @lyra-change=${(e) => this.onCheckboxChange(key, e)}
+      >
+        <span part="label">${label}</span>
+      </lyra-checkbox>`;
+        }
+        // Defensive fallback for a schema property outside this phase's scope
+        // (see the class doc) — render a visible note instead of silently
+        // dropping the field or throwing. Still carries id=fieldId like every
+        // other control-slot render, since renderField's shared, non-boolean
+        // branch above always renders a <label for=fieldId> pointing at it.
+        return html `<p class="unsupported" id=${fieldId}>Unsupported field type "${prop.type}".</p>`;
+    }
+    renderField(key, prop, index) {
+        const required = this.requiredKeys.includes(key);
+        const label = prop.title ?? key;
+        const fieldId = `${this.baseId}-f${index}`;
+        const descId = prop.description ? `${fieldId}-desc` : '';
+        const errId = this._errors[key] ? `${fieldId}-err` : '';
+        const describedBy = [descId, this.touchedFields.has(key) ? errId : ''].filter(Boolean).join(' ');
+        const hasError = this.touchedFields.has(key) && Boolean(this._errors[key]);
+        const errorMessage = hasError ? this._errors[key] : '';
+        const effective = this._effectiveValue[key];
+        const isBoolean = prop.type === 'boolean';
+        return html `
+      <div part="field" class="field" data-key=${key} data-type=${prop.type} ?data-required=${required}
+        @focusout=${() => this.markTouched(key)}
+      >
+        ${isBoolean
+            ? nothing
+            : html `<label part="label" for=${fieldId}>${label}</label>`}
+        ${this.renderControl(key, prop, fieldId, label, required, describedBy, errorMessage, effective)}
+        ${prop.description
+            ? html `<p part="description" id=${descId}>${prop.description}</p>`
+            : nothing}
+        ${hasError ? html `<p part="error" id=${errId} role="alert">${this._errors[key]}</p>` : nothing}
+      </div>
+    `;
+    }
+    render() {
+        const props = this.schemaProperties;
+        const keys = Object.keys(props);
+        return html `<div part="base">
+      ${keys.map((key, i) => this.renderField(key, props[key], i))}
+      ${this.showFormError && this._formError
+            ? html `<p part="error" class="form-error" role="alert">${this._formError}</p>`
+            : nothing}
+    </div>`;
+    }
+}
+__decorate([
+    state()
+], LyraToolParamForm.prototype, "_errors", void 0);
+__decorate([
+    state()
+], LyraToolParamForm.prototype, "_formError", void 0);
+__decorate([
+    state()
+], LyraToolParamForm.prototype, "showFormError", void 0);
+__decorate([
+    state()
+], LyraToolParamForm.prototype, "touchedFields", void 0);
+defineElement('tool-param-form', LyraToolParamForm);

package/dist/components/tool-param-form/tool-param-form.styles.d.ts

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

package/dist/components/tool-param-form/tool-param-form.styles.js

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-l);
+  }
+  [part='field'] {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--lyra-space-xs);
+  }
+  [part='label'] {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  /* Applies to a boolean field's slotted <span part="label"> (inside
+     <lyra-checkbox>) too -- see tool-param-form.ts's class doc for why that
+     span still belongs to *this* component's shadow tree for CSS purposes
+     even though it's visually projected into a child element's template. */
+  [part='field'][data-required] [part='label']::after {
+    content: ' *';
+    color: var(--lyra-color-danger);
+  }
+
+  [part='field'] > lyra-select,
+  [part='field'] > input.control {
+    inline-size: 100%;
+  }
+
+  input.control {
+    box-sizing: border-box;
+    min-block-size: 2.5rem;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: inherit;
+    font: inherit;
+    font-size: 1rem;
+  }
+  input.control:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  input.control[aria-invalid='true'] {
+    border-color: var(--lyra-color-danger);
+  }
+  input.control:disabled {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  [part='description'] {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='error'] {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--lyra-color-danger);
+  }
+  .unsupported {
+    margin: 0;
+    font-size: 0.8125rem;
+    font-style: italic;
+    color: var(--lyra-color-text-quiet);
+  }
+`;