@aceshooting/lyra-ui 0.1.0

package/dist/components/combobox/combobox.styles.js

@@ -0,0 +1,148 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='form-control-label'] {
+    display: block;
+    margin-block-end: var(--lyra-space-xs);
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  [part='form-control-label']:empty {
+    display: none;
+  }
+
+  [part='combobox'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    inline-size: 100%;
+    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);
+    cursor: text;
+  }
+  [part='combobox']:focus-within {
+    border-color: var(--lyra-color-brand);
+    outline: 2px solid transparent;
+  }
+  :host([disabled]) [part='combobox'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  [part='tag'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    padding: 0.1rem 0.4rem;
+    font-size: 0.8125rem;
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-text);
+    border-radius: var(--lyra-radius);
+  }
+  [part='tag__remove-button'] {
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: inherit;
+    padding: 0;
+    line-height: 1;
+    font-size: 1rem;
+  }
+
+  [part='combobox-input'] {
+    flex: 1 1 6ch;
+    min-inline-size: 4ch;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part='clear-button'],
+  [part='expand-icon'] {
+    flex: 0 0 auto;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--lyra-color-text-quiet);
+    padding: 0 var(--lyra-space-xs);
+    line-height: 1;
+  }
+
+  [part='listbox'] {
+    display: none;
+    position: fixed;
+    z-index: 900;
+    box-sizing: border-box;
+    max-block-size: 18rem;
+    overflow-y: auto;
+    inline-size: max-content;
+    min-inline-size: 12rem;
+    max-inline-size: min(92vw, 28rem);
+    padding: var(--lyra-space-xs);
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+  }
+  :host([open]) [part='listbox'] {
+    display: block;
+  }
+
+  [part='option'] {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    inline-size: 100%;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border: 1px solid transparent;
+    border-radius: var(--lyra-radius);
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+  [part='option']:hover,
+  [part='option'][data-active] {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='option'][aria-selected='true'] {
+    border-color: var(--lyra-color-brand);
+    color: var(--lyra-color-brand);
+    font-weight: 600;
+  }
+  [part='option'][aria-disabled='true'] {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .group-label {
+    padding: var(--lyra-space-xs) var(--lyra-space-s) 0;
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--lyra-color-text-quiet);
+  }
+  .empty {
+    padding: var(--lyra-space-m);
+    color: var(--lyra-color-text-quiet);
+    font-size: 0.875rem;
+  }
+  [part='hint'] {
+    margin-block-start: var(--lyra-space-xs);
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='hint']:empty {
+    display: none;
+  }
+`;

package/dist/components/combobox/option.d.ts

@@ -0,0 +1,32 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-option>` — a selectable option for `<lyra-combobox>`.
+ * Mirrors `<wa-option>`. Acts as the data source; the combobox renders the
+ * interactive rows in its own shadow root and filters/caps them.
+ *
+ * The label is the element's text content (or an explicit `label` attribute).
+ *
+ * @customElement lyra-option
+ */
+export declare class LyraOption extends LyraElement {
+    static styles: import("lit").CSSResult;
+    /** The selection key submitted with the form. */
+    value: string;
+    /** Disable selecting this option. */
+    disabled: boolean;
+    /** Whether this option is currently selected (reflected by the combobox). */
+    selected: boolean;
+    /** Optional section header this option belongs under. */
+    group: string;
+    /** Extra text the filter should match beyond the label. */
+    searchText: string;
+    /** Resolved label: explicit `label` attribute wins, else trimmed text content. */
+    get label(): string;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-option': LyraOption;
+    }
+}

package/dist/components/combobox/option.js

@@ -0,0 +1,62 @@
+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, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+/**
+ * `<lyra-option>` — a selectable option for `<lyra-combobox>`.
+ * Mirrors `<wa-option>`. Acts as the data source; the combobox renders the
+ * interactive rows in its own shadow root and filters/caps them.
+ *
+ * The label is the element's text content (or an explicit `label` attribute).
+ *
+ * @customElement lyra-option
+ */
+export class LyraOption extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The selection key submitted with the form. */
+        this.value = '';
+        /** Disable selecting this option. */
+        this.disabled = false;
+        /** Whether this option is currently selected (reflected by the combobox). */
+        this.selected = false;
+        /** Optional section header this option belongs under. */
+        this.group = '';
+        /** Extra text the filter should match beyond the label. */
+        this.searchText = '';
+    }
+    static { this.styles = css `
+    :host {
+      display: none;
+    }
+  `; }
+    /** Resolved label: explicit `label` attribute wins, else trimmed text content. */
+    get label() {
+        return (this.getAttribute('label') ?? this.textContent ?? '').trim();
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+__decorate([
+    property()
+], LyraOption.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraOption.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraOption.prototype, "selected", void 0);
+__decorate([
+    property()
+], LyraOption.prototype, "group", void 0);
+__decorate([
+    property({ attribute: 'search-text' })
+], LyraOption.prototype, "searchText", void 0);
+defineElement('option', LyraOption);

package/dist/components/date-picker/calendar-core.d.ts

@@ -0,0 +1,20 @@
+export type WeekdayFormat = 'narrow' | 'short' | 'long';
+/** Parse `YYYY-MM-DD` into a local Date, or null if invalid. */
+export declare function parseISO(s: string): Date | null;
+/** Format a Date as local `YYYY-MM-DD`. */
+export declare function formatISO(d: Date): string;
+export declare function isSameDay(a: Date, b: Date): boolean;
+/** First day of the month `n` months from `d`. */
+export declare function addMonths(d: Date, n: number): Date;
+export declare function clampDate(d: Date, min: Date | null, max: Date | null): Date;
+/**
+ * A 6×7 grid of Dates covering the given month, week-aligned to `firstDayOfWeek`
+ * (0=Sunday … 6=Saturday). Includes leading/trailing days from adjacent months.
+ */
+export declare function monthMatrix(year: number, month: number, firstDayOfWeek?: number): Date[][];
+/** Localized weekday header labels, ordered from `firstDayOfWeek`. */
+export declare function weekdayLabels(firstDayOfWeek?: number, format?: WeekdayFormat, locale?: string): string[];
+/** Localized "Month YYYY" title. */
+export declare function monthTitle(year: number, month: number, locale?: string): string;
+/** Resolve a `first-day-of-week` attribute (name or 'auto') to a 0–6 index. */
+export declare function resolveFirstDayOfWeek(value: string): number;

package/dist/components/date-picker/calendar-core.js

@@ -0,0 +1,71 @@
+/** Parse `YYYY-MM-DD` into a local Date, or null if invalid. */
+export function parseISO(s) {
+    if (!s)
+        return null;
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s.trim());
+    if (!m)
+        return null;
+    const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+    return isNaN(d.getTime()) ? null : d;
+}
+/** Format a Date as local `YYYY-MM-DD`. */
+export function formatISO(d) {
+    const mm = String(d.getMonth() + 1).padStart(2, '0');
+    const dd = String(d.getDate()).padStart(2, '0');
+    return `${d.getFullYear()}-${mm}-${dd}`;
+}
+export function isSameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate());
+}
+/** First day of the month `n` months from `d`. */
+export function addMonths(d, n) {
+    return new Date(d.getFullYear(), d.getMonth() + n, 1);
+}
+export function clampDate(d, min, max) {
+    if (min && d < min)
+        return min;
+    if (max && d > max)
+        return max;
+    return d;
+}
+/**
+ * A 6×7 grid of Dates covering the given month, week-aligned to `firstDayOfWeek`
+ * (0=Sunday … 6=Saturday). Includes leading/trailing days from adjacent months.
+ */
+export function monthMatrix(year, month, firstDayOfWeek = 0) {
+    const first = new Date(year, month, 1);
+    const offset = (first.getDay() - firstDayOfWeek + 7) % 7;
+    const cursor = new Date(year, month, 1 - offset);
+    const weeks = [];
+    for (let w = 0; w < 6; w++) {
+        const row = [];
+        for (let d = 0; d < 7; d++) {
+            row.push(new Date(cursor));
+            cursor.setDate(cursor.getDate() + 1);
+        }
+        weeks.push(row);
+    }
+    return weeks;
+}
+/** Localized weekday header labels, ordered from `firstDayOfWeek`. */
+export function weekdayLabels(firstDayOfWeek = 0, format = 'short', locale) {
+    const fmt = new Intl.DateTimeFormat(locale || undefined, { weekday: format });
+    const labels = [];
+    // 2021-08-01 is a Sunday, so index i maps cleanly to a weekday.
+    for (let i = 0; i < 7; i++) {
+        const day = (firstDayOfWeek + i) % 7;
+        labels.push(fmt.format(new Date(2021, 7, 1 + day)));
+    }
+    return labels;
+}
+/** Localized "Month YYYY" title. */
+export function monthTitle(year, month, locale) {
+    return new Intl.DateTimeFormat(locale || undefined, { month: 'long', year: 'numeric' }).format(new Date(year, month, 1));
+}
+const FDOW = { sun: 0, mon: 1, tue: 2, wed: 3, thu: 4, fri: 5, sat: 6 };
+/** Resolve a `first-day-of-week` attribute (name or 'auto') to a 0–6 index. */
+export function resolveFirstDayOfWeek(value) {
+    if (!value || value === 'auto')
+        return 0;
+    return FDOW[value.toLowerCase()] ?? 0;
+}

package/dist/components/date-picker/date-input.d.ts

@@ -0,0 +1,57 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { type WeekdayFormat } from './calendar-core.js';
+import './date-picker.js';
+declare const LyraDateInput_base: typeof LyraElement & (new (...args: any[]) => import("../../internal/form-associated.js").FormAssociatedInterface);
+/**
+ * `<lyra-date-input>` — a date field with an attached calendar popover.
+ * Mirrors the core `<wa-date-input>` API under `lyra-`. Value is ISO 8601
+ * (`YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` in range mode). Form-associated.
+ *
+ * v1 uses a single text field (locale-segmented spinbuttons are a future
+ * enhancement); typing accepts ISO or a locale-parseable date.
+ *
+ * @customElement lyra-date-input
+ * @event input - Fired on edits.
+ * @event change - Fired on committed date transitions.
+ * @event lyra-show / lyra-hide - Calendar popover lifecycle.
+ * @event lyra-clear - The clear button was used.
+ * @csspart form-control, form-control-label, input-wrapper, input, clear-button, expand-button, popup, date-picker, hint
+ */
+export declare class LyraDateInput extends LyraDateInput_base {
+    static styles: import("lit").CSSResultGroup[];
+    mode: 'single' | 'range';
+    min: string;
+    max: string;
+    readonly: boolean;
+    open: boolean;
+    withClear: boolean;
+    label: string;
+    hint: string;
+    placeholder: string;
+    locale: string;
+    months: 1 | 2;
+    firstDayOfWeek: string;
+    weekdayFormat: WeekdayFormat;
+    private cleanupFn?;
+    private get displayText();
+    /** Open the calendar popover. */
+    show(): void;
+    /** Close the calendar popover. */
+    hide(): void;
+    private onDocPointer;
+    /** Clear the value. */
+    clear(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private onInputChange;
+    private onInputKey;
+    private onPickerChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-date-input': LyraDateInput;
+    }
+}
+export {};

package/dist/components/date-picker/date-input.js

@@ -0,0 +1,233 @@
+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 } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { FormAssociated } from '../../internal/form-associated.js';
+import { defineElement } from '../../internal/prefix.js';
+import { place } from '../../internal/positioner.js';
+import { parseISO, formatISO } from './calendar-core.js';
+import { styles } from './date-input.styles.js';
+import { LyraDatePicker } from './date-picker.js';
+import './date-picker.js';
+/**
+ * `<lyra-date-input>` — a date field with an attached calendar popover.
+ * Mirrors the core `<wa-date-input>` API under `lyra-`. Value is ISO 8601
+ * (`YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` in range mode). Form-associated.
+ *
+ * v1 uses a single text field (locale-segmented spinbuttons are a future
+ * enhancement); typing accepts ISO or a locale-parseable date.
+ *
+ * @customElement lyra-date-input
+ * @event input - Fired on edits.
+ * @event change - Fired on committed date transitions.
+ * @event lyra-show / lyra-hide - Calendar popover lifecycle.
+ * @event lyra-clear - The clear button was used.
+ * @csspart form-control, form-control-label, input-wrapper, input, clear-button, expand-button, popup, date-picker, hint
+ */
+export class LyraDateInput extends FormAssociated(LyraElement) {
+    constructor() {
+        super(...arguments);
+        this.mode = 'single';
+        this.min = '';
+        this.max = '';
+        this.readonly = false;
+        this.open = false;
+        this.withClear = false;
+        this.label = '';
+        this.hint = '';
+        this.placeholder = '';
+        this.locale = '';
+        this.months = 1;
+        this.firstDayOfWeek = 'auto';
+        this.weekdayFormat = 'short';
+        this.onDocPointer = (e) => {
+            if (!e.composedPath().includes(this))
+                this.hide();
+        };
+        this.onInputChange = (e) => {
+            const raw = e.target.value.trim();
+            if (!raw) {
+                this.value = '';
+                this.emit('input');
+                this.emit('change');
+                return;
+            }
+            const parsed = parseISO(raw) ?? (isNaN(Date.parse(raw)) ? null : new Date(Date.parse(raw)));
+            if (parsed) {
+                this.value = formatISO(parsed);
+                this.emit('input');
+                this.emit('change');
+            }
+        };
+        this.onInputKey = (e) => {
+            if (e.altKey && e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.show();
+            }
+        };
+        this.onPickerChange = (e) => {
+            e.stopPropagation();
+            const picker = e.target;
+            this.value = picker.value;
+            this.emit('input');
+            this.emit('change');
+            if (this.mode === 'single')
+                this.hide();
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get displayText() {
+        const parts = this.value.split('/');
+        const from = parseISO(parts[0] ?? '');
+        const to = parseISO(parts[1] ?? '');
+        if (!from)
+            return '';
+        const fmt = (d) => d.toLocaleDateString(this.locale || undefined);
+        return this.mode === 'range' && to ? `${fmt(from)} – ${fmt(to)}` : fmt(from);
+    }
+    /** Open the calendar popover. */
+    show() {
+        if (this.open || this.disabled || this.readonly)
+            return;
+        this.open = true;
+        this.emit('lyra-show');
+        document.addEventListener('pointerdown', this.onDocPointer);
+    }
+    /** Close the calendar popover. */
+    hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.emit('lyra-hide');
+        document.removeEventListener('pointerdown', this.onDocPointer);
+    }
+    /** Clear the value. */
+    clear() {
+        this.value = '';
+        this.emit('input');
+        this.emit('change');
+        this.emit('lyra-clear');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupFn?.();
+        document.removeEventListener('pointerdown', this.onDocPointer);
+    }
+    updated(changed) {
+        if (changed.has('open')) {
+            this.cleanupFn?.();
+            this.cleanupFn = undefined;
+            if (this.open) {
+                const anchor = this.renderRoot.querySelector('[part="input-wrapper"]');
+                const popup = this.renderRoot.querySelector('[part="popup"]');
+                if (anchor && popup)
+                    this.cleanupFn = place(anchor, popup);
+            }
+        }
+    }
+    render() {
+        const hasValue = this.value.length > 0;
+        return html `
+      <div part="form-control">
+        <label part="form-control-label">${this.label}<slot name="label"></slot></label>
+        <div part="input-wrapper">
+          <input
+            part="input"
+            type="text"
+            aria-label=${this.label || this.placeholder || 'Date'}
+            .value=${this.displayText}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            @change=${this.onInputChange}
+            @keydown=${this.onInputKey}
+          />
+          ${this.withClear && hasValue
+            ? html `<button
+                part="clear-button"
+                type="button"
+                aria-label="Clear"
+                @click=${() => this.clear()}
+              >
+                &times;
+              </button>`
+            : ''}
+          <button
+            part="expand-button"
+            type="button"
+            aria-label="Open calendar"
+            aria-haspopup="dialog"
+            aria-expanded=${this.open ? 'true' : 'false'}
+            ?disabled=${this.disabled || this.readonly}
+            @click=${() => (this.open ? this.hide() : this.show())}
+          >
+            <span part="expand-icon" aria-hidden="true">📅</span>
+          </button>
+        </div>
+        <div part="popup" role="dialog" aria-label="Choose date">
+          <lyra-date-picker
+            part="date-picker"
+            .value=${this.value}
+            .mode=${this.mode}
+            .min=${this.min}
+            .max=${this.max}
+            .months=${this.months}
+            .locale=${this.locale}
+            first-day-of-week=${this.firstDayOfWeek}
+            weekday-format=${this.weekdayFormat}
+            @change=${this.onPickerChange}
+          ></lyra-date-picker>
+        </div>
+        <div part="hint">${this.hint}<slot name="hint"></slot></div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraDateInput.prototype, "mode", void 0);
+__decorate([
+    property()
+], LyraDateInput.prototype, "min", void 0);
+__decorate([
+    property()
+], LyraDateInput.prototype, "max", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraDateInput.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraDateInput.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'with-clear' })
+], LyraDateInput.prototype, "withClear", void 0);
+__decorate([
+    property()
+], LyraDateInput.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraDateInput.prototype, "hint", void 0);
+__decorate([
+    property()
+], LyraDateInput.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], LyraDateInput.prototype, "locale", void 0);
+__decorate([
+    property({ type: Number })
+], LyraDateInput.prototype, "months", void 0);
+__decorate([
+    property({ attribute: 'first-day-of-week' })
+], LyraDateInput.prototype, "firstDayOfWeek", void 0);
+__decorate([
+    property({ attribute: 'weekday-format' })
+], LyraDateInput.prototype, "weekdayFormat", void 0);
+__decorate([
+    state()
+], LyraDateInput.prototype, "cleanupFn", void 0);
+defineElement('date-input', LyraDateInput);

package/dist/components/date-picker/date-input.styles.d.ts

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

package/dist/components/date-picker/date-input.styles.js

@@ -0,0 +1,67 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='form-control-label'] {
+    display: block;
+    margin-block-end: var(--lyra-space-xs);
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  [part='form-control-label']:empty {
+    display: none;
+  }
+  [part='input-wrapper'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    inline-size: 100%;
+    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);
+  }
+  [part='input-wrapper']:focus-within {
+    border-color: var(--lyra-color-brand);
+  }
+  :host([disabled]) [part='input-wrapper'] {
+    opacity: 0.5;
+  }
+  [part='input'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+  [part='clear-button'],
+  [part='expand-button'] {
+    flex: 0 0 auto;
+    border: none;
+    background: none;
+    cursor: pointer;
+    color: var(--lyra-color-text-quiet);
+    padding: 0 var(--lyra-space-xs);
+    line-height: 1;
+    font-size: 1rem;
+  }
+  [part='popup'] {
+    display: none;
+    position: fixed;
+    z-index: 900;
+  }
+  :host([open]) [part='popup'] {
+    display: block;
+  }
+  [part='hint'] {
+    margin-block-start: var(--lyra-space-xs);
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='hint']:empty {
+    display: none;
+  }
+`;