@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/model-select/model-select.js

@@ -0,0 +1,490 @@
+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 { defineElement } from '../../internal/prefix.js';
+import { place } from '../../internal/positioner.js';
+import { nextId } from '../../internal/a11y.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { styles } from './model-select.styles.js';
+/**
+ * `<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 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 class LyraModelSelect extends LyraElement {
+    static { this.formAssociated = true; }
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        value: { noAccessor: true },
+    }; }
+    constructor() {
+        super();
+        /** Informational only — e.g. `'ollama'`. Rendered as a small leading badge for display grouping. */
+        this.provider = '';
+        /** Let the user type/commit a value that isn't in `catalog`, even when `catalog` is non-empty. */
+        this.allowCustom = false;
+        this.placeholder = '';
+        this.name = '';
+        this.disabled = false;
+        this.required = false;
+        this.open = false;
+        this.activeIndex = -1;
+        // Free-text mode's live input text. Only meaningful while `open` — the
+        // input is otherwise controlled by the committed value's label (see
+        // `renderFreeText`), so this never needs resetting on commit/hide.
+        this.query = '';
+        // Set on first blur; gates the `data-invalid` reflection below so
+        // validity styling never flashes on first render (matches lyra-select).
+        this.touched = false;
+        this.listId = nextId('model-select-list');
+        this.controlId = nextId('model-select-control');
+        this._value = '';
+        // What `form.reset()` restores to — captured from the `value` *content
+        // attribute* only, mirroring native `<input>`/`FormAssociated`'s
+        // `_defaultValue` (see internal/form-associated.ts). There's no child
+        // markup here to seed a declarative default from (unlike lyra-select's
+        // `<lyra-option selected>`), so the initial attribute is the only source.
+        this._defaultValue = '';
+        this.onDocPointer = (e) => {
+            if (!e.composedPath().includes(this))
+                this.hide();
+        };
+        // -- Closed-dropdown mode (trigger button) --------------------------------
+        this.onTriggerClick = () => {
+            if (this.disabled)
+                return;
+            this.open ? this.hide() : this.show();
+        };
+        this.onTriggerBlur = () => {
+            this.touched = true;
+            this.hide();
+        };
+        this.onTriggerKeyDown = (e) => {
+            const rows = this.effectiveEntries;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.min(rows.length - 1, this.activeIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.max(0, this.activeIndex - 1);
+                    break;
+                case 'Enter':
+                case ' ':
+                    if (this.open) {
+                        e.preventDefault();
+                        if (this.activeIndex >= 0 && rows[this.activeIndex]) {
+                            this.selectEntry(rows[this.activeIndex]);
+                        }
+                        else {
+                            this.hide();
+                        }
+                    }
+                    break;
+                case 'Escape':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.hide();
+                    }
+                    break;
+                case 'Home':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = 0;
+                    }
+                    break;
+                case 'End':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = rows.length - 1;
+                    }
+                    break;
+            }
+        };
+        // -- Free-text mode (text input) ------------------------------------------
+        this.onComboMouseDown = (e) => {
+            if (this.disabled)
+                return;
+            e.preventDefault();
+            this.renderRoot.querySelector('[part="combobox-input"]')?.focus();
+        };
+        this.onInputFocus = () => {
+            // Seed the editable text from the *current* value each time a fresh
+            // editing session starts, not on every keystroke (onInput overwrites
+            // `query` directly) — otherwise a same-session reopen via ArrowDown
+            // after Escape would clobber the just-reverted text right back to
+            // whatever the user had typed before Escape.
+            if (!this.open)
+                this.query = this.labelFor(this.value);
+            this.show();
+        };
+        this.onInput = (e) => {
+            this.query = e.target.value;
+            this.activeIndex = -1;
+            this.show();
+        };
+        this.onInputBlur = () => {
+            this.touched = true;
+            this.hide();
+        };
+        this.onInputKeyDown = (e) => {
+            const rows = this.filteredEntries;
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.min(rows.length - 1, this.activeIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.max(0, this.activeIndex - 1);
+                    break;
+                case 'Enter':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.commitFreeText();
+                    }
+                    break;
+                case 'Escape':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.query = this.labelFor(this.value);
+                        this.hide();
+                    }
+                    break;
+                case 'Home':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = 0;
+                    }
+                    break;
+                case 'End':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = rows.length - 1;
+                    }
+                    break;
+            }
+        };
+        // -- Shared listbox ---------------------------------------------------
+        // Delegated onto [part="listbox"] rather than one closure pair allocated
+        // per row per render — resolves the target row via closest('[part="option"]')
+        // + a data-value lookup, mirroring lyra-select/lyra-combobox.
+        this.onListboxMouseDown = (e) => {
+            if (e.target.closest('[part="option"]'))
+                e.preventDefault();
+        };
+        this.onListboxClick = (e) => {
+            const optionEl = e.target.closest('[part="option"]');
+            const value = optionEl?.dataset.value;
+            if (value === undefined)
+                return;
+            const entry = (this.closedMode ? this.effectiveEntries : this.filteredEntries).find((e2) => e2.id === value);
+            if (entry)
+                this.selectEntry(entry);
+        };
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateValidity();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanup?.();
+        document.removeEventListener('pointerdown', this.onDocPointer);
+    }
+    attributeChangedCallback(name, old, val) {
+        super.attributeChangedCallback(name, old, val);
+        if (name === 'value')
+            this._defaultValue = this._value;
+    }
+    /** The current model id (empty string when nothing is selected). */
+    get value() {
+        return this._value;
+    }
+    set value(next) {
+        const old = this._value;
+        this._value = next ?? '';
+        this.internals.setFormValue(this._value);
+        this.updateValidity();
+        this.requestUpdate('value', old);
+    }
+    updateValidity() {
+        if (this.required && !this._value) {
+            this.internals.setValidity({ valueMissing: true }, 'Please choose a model.');
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    formResetCallback() {
+        this.value = this._defaultValue;
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    /** `catalog`, normalized to `{ id, label }[]` regardless of the plain-string-array shorthand. */
+    get normalizedCatalog() {
+        const raw = this.catalog;
+        if (!raw || raw.length === 0)
+            return [];
+        return raw.map((item) => (typeof item === 'string' ? { id: item, label: item } : item));
+    }
+    /** Closed-dropdown-with-listbox mode vs. free-text filterable mode — see class doc. */
+    get closedMode() {
+        return this.normalizedCatalog.length > 0 && !this.allowCustom;
+    }
+    /**
+     * `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.
+     */
+    get effectiveEntries() {
+        const catalog = this.normalizedCatalog;
+        const entries = catalog.map((e) => ({ ...e, synthetic: false }));
+        if (catalog.length > 0 && this._value && !catalog.some((e) => e.id === this._value)) {
+            entries.push({ id: this._value, label: this._value, synthetic: true });
+        }
+        return entries;
+    }
+    /** `effectiveEntries` filtered by the typed `query` (free-text mode only; id or label substring, case-insensitive). */
+    get filteredEntries() {
+        const q = this.query.trim().toLowerCase();
+        if (!q)
+            return this.effectiveEntries;
+        return this.effectiveEntries.filter((e) => e.id.toLowerCase().includes(q) || e.label.toLowerCase().includes(q));
+    }
+    labelFor(id) {
+        if (!id)
+            return '';
+        return this.effectiveEntries.find((e) => e.id === id)?.label ?? id;
+    }
+    show() {
+        if (this.open || this.disabled)
+            return;
+        this.open = true;
+    }
+    hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.activeIndex = -1;
+    }
+    updated(changed) {
+        const reposition = changed.has('open') || (this.open && (changed.has('catalog') || changed.has('allowCustom')));
+        if (reposition) {
+            this.cleanup?.();
+            this.cleanup = undefined;
+            if (this.open) {
+                document.addEventListener('pointerdown', this.onDocPointer);
+                const anchor = this.renderRoot.querySelector(this.closedMode ? '[part="trigger"]' : '[part="combobox"]');
+                const listbox = this.renderRoot.querySelector('[part="listbox"]');
+                if (anchor && listbox)
+                    this.cleanup = place(anchor, listbox);
+            }
+            else {
+                document.removeEventListener('pointerdown', this.onDocPointer);
+            }
+        }
+        if (changed.has('required') || changed.has('touched') || changed.has('value')) {
+            this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
+        }
+    }
+    commitValue(next) {
+        const inCatalog = this.normalizedCatalog.some((e) => e.id === next);
+        this.value = next;
+        this.hide();
+        this.emit('lyra-change', { value: next, inCatalog });
+    }
+    selectEntry(entry) {
+        this.commitValue(entry.id);
+    }
+    /** Enter in free-text mode: commit the highlighted suggestion, else the raw typed text. */
+    commitFreeText() {
+        const rows = this.filteredEntries;
+        if (this.activeIndex >= 0 && rows[this.activeIndex]) {
+            this.commitValue(rows[this.activeIndex].id);
+            return;
+        }
+        this.commitValue(this.query.trim());
+    }
+    renderRows(rows, activeId) {
+        return rows.map((entry, i) => {
+            const id = `${this.listId}-opt-${i}`;
+            const selected = entry.id === this._value;
+            return html `<div
+        part="option"
+        id=${id}
+        role="option"
+        data-value=${entry.id}
+        ?data-synthetic=${entry.synthetic}
+        aria-selected=${selected ? 'true' : 'false'}
+        ?data-active=${id === activeId}
+      >
+        <span part="option-label">${entry.label}</span>
+        ${entry.synthetic ? html `<span part="option-badge">not in catalog</span>` : ''}
+      </div>`;
+        });
+    }
+    renderListbox(rows, activeId, emptyText) {
+        return html `
+      <div
+        part="listbox"
+        id=${this.listId}
+        role="listbox"
+        @mousedown=${this.onListboxMouseDown}
+        @click=${this.onListboxClick}
+      >
+        ${rows.length === 0
+            ? html `<div class="empty" role="option" aria-selected="false" aria-disabled="true">${emptyText}</div>`
+            : this.renderRows(rows, activeId)}
+      </div>
+    `;
+    }
+    renderClosed() {
+        const rows = this.effectiveEntries;
+        const activeId = this.activeIndex >= 0 && rows[this.activeIndex] ? `${this.listId}-opt-${this.activeIndex}` : '';
+        const hasValue = this._value.length > 0;
+        return html `
+      <button
+        id=${this.controlId}
+        part="trigger"
+        type="button"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-controls=${this.listId}
+        aria-activedescendant=${activeId}
+        aria-label=${this.getAttribute('aria-label') || this.placeholder || 'Model'}
+        aria-required=${this.required ? 'true' : 'false'}
+        aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
+        ?disabled=${this.disabled}
+        @click=${this.onTriggerClick}
+        @keydown=${this.onTriggerKeyDown}
+        @blur=${this.onTriggerBlur}
+      >
+        ${this.provider ? html `<span part="provider-badge">${this.provider}</span>` : ''}
+        <span class="trigger-label" ?data-placeholder=${!hasValue}
+          >${hasValue ? this.labelFor(this._value) : this.placeholder}</span
+        >
+        <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
+      </button>
+      ${this.renderListbox(rows, activeId, 'No models')}
+    `;
+    }
+    renderFreeText() {
+        const rows = this.filteredEntries;
+        const activeId = this.activeIndex >= 0 && rows[this.activeIndex] ? `${this.listId}-opt-${this.activeIndex}` : '';
+        return html `
+      <div part="combobox" @mousedown=${this.onComboMouseDown}>
+        ${this.provider ? html `<span part="provider-badge">${this.provider}</span>` : ''}
+        <input
+          id=${this.controlId}
+          part="combobox-input"
+          role="combobox"
+          aria-label=${this.getAttribute('aria-label') || this.placeholder || 'Model'}
+          aria-expanded=${this.open ? 'true' : 'false'}
+          aria-controls=${this.listId}
+          aria-activedescendant=${activeId}
+          aria-autocomplete="list"
+          aria-required=${this.required ? 'true' : 'false'}
+          aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
+          autocomplete="off"
+          .value=${this.open ? this.query : this.labelFor(this._value)}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          @input=${this.onInput}
+          @keydown=${this.onInputKeyDown}
+          @focus=${this.onInputFocus}
+          @blur=${this.onInputBlur}
+        />
+        <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
+      </div>
+      ${this.renderListbox(rows, activeId, 'No matches')}
+    `;
+    }
+    render() {
+        return this.closedMode ? this.renderClosed() : this.renderFreeText();
+    }
+}
+__decorate([
+    property()
+], LyraModelSelect.prototype, "provider", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraModelSelect.prototype, "catalog", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'allow-custom' })
+], LyraModelSelect.prototype, "allowCustom", void 0);
+__decorate([
+    property()
+], LyraModelSelect.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], LyraModelSelect.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraModelSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraModelSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraModelSelect.prototype, "open", void 0);
+__decorate([
+    state()
+], LyraModelSelect.prototype, "activeIndex", void 0);
+__decorate([
+    state()
+], LyraModelSelect.prototype, "query", void 0);
+__decorate([
+    state()
+], LyraModelSelect.prototype, "touched", void 0);
+defineElement('model-select', LyraModelSelect);

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

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

package/dist/components/model-select/model-select.styles.js

@@ -0,0 +1,189 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    position: relative;
+    display: inline-block;
+    inline-size: 100%;
+    max-inline-size: 24rem;
+  }
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  [part='trigger'],
+  [part='combobox'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    inline-size: 100%;
+    min-block-size: 2.5rem;
+    box-sizing: border-box;
+    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;
+  }
+  [part='trigger'] {
+    cursor: pointer;
+    text-align: start;
+  }
+  [part='combobox'] {
+    cursor: text;
+  }
+  [part='trigger']:focus-visible,
+  [part='combobox']:focus-within {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  :host([open]) [part='trigger'] {
+    border-color: var(--lyra-color-brand);
+  }
+  :host([disabled]) [part='trigger'],
+  :host([disabled]) [part='combobox'] {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  [part='provider-badge'] {
+    flex: 0 0 auto;
+    padding-inline-end: var(--lyra-space-xs);
+    margin-inline-end: var(--lyra-space-xs);
+    border-inline-end: 1px solid var(--lyra-color-border);
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--lyra-color-text-quiet);
+    white-space: nowrap;
+  }
+
+  .trigger-label {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .trigger-label[data-placeholder] {
+    color: var(--lyra-color-text-quiet);
+  }
+
+  [part='combobox-input'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part='expand-icon'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--lyra-color-text-quiet);
+    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
+    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
+    line-height: 1;
+  }
+  [part='expand-icon'] svg {
+    transform: rotate(90deg);
+  }
+
+  [part='listbox'] {
+    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);
+    /* Closed state: invisible + slightly raised. visibility (not
+       display:none) so opacity/transform can actually transition; hit-testing
+       and a11y exposure stay off since this part is already position:fixed. */
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-0.25rem);
+    transition:
+      opacity var(--lyra-transition-fast),
+      transform var(--lyra-transition-fast),
+      visibility var(--lyra-transition-fast);
+  }
+  :host([open]) [part='listbox'] {
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='listbox'] {
+      transition: none !important;
+    }
+  }
+
+  [part='option'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    inline-size: 100%;
+    box-sizing: border-box;
+    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-label'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /* Stale-value row: a previously-saved value that no longer appears in the
+     catalog. Marked with a dashed border + italic label (instead of the
+     solid border every real row uses) so it visually reads as "remembered,
+     not offered" rather than a normal selectable catalog entry. */
+  [part='option'][data-synthetic] {
+    border-style: dashed;
+    border-color: var(--lyra-color-border);
+  }
+  [part='option'][data-synthetic] [part='option-label'] {
+    font-style: italic;
+  }
+  [part='option-badge'] {
+    flex: 0 0 auto;
+    font-size: 0.6875rem;
+    font-style: normal;
+    font-weight: 400;
+    color: var(--lyra-color-text-quiet);
+    white-space: nowrap;
+  }
+
+  .empty {
+    padding: var(--lyra-space-m);
+    color: var(--lyra-color-text-quiet);
+    font-size: 0.875rem;
+  }
+`;