@f-ewald/components 0.4.0 → 0.6.0

package/dist/editable-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-text.js","sourceRoot":"","sources":["../src/editable-text.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Jira/GitHub-style click-to-edit text: a display span that turns into an\n * `<input>` (or auto-growing `<textarea>` when `multiline`) on click. The\n * input/textarea inherits the host's font, so a title wrapped in an `<h1>`\n * edits at title size.\n *\n * @element editable-text\n * @fires change - Fired with `{ value: string }` when the committed value differs from the previous one.\n */\n@customElement(\"editable-text\")\nexport class EditableText extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: inherit;\n        font-size: inherit;\n        font-weight: inherit;\n        line-height: inherit;\n      }\n      .display {\n        cursor: text;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.1rem 0.3rem;\n        margin: -0.1rem -0.3rem;\n      }\n      .display.multiline {\n        white-space: pre-wrap;\n      }\n      .display:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .display.empty {\n        color: var(--ui-text-muted, #64748b);\n      }\n      .display.readonly {\n        cursor: inherit;\n      }\n      .display.readonly:hover {\n        background: none;\n      }\n      input,\n      textarea {\n        display: block;\n        width: 100%;\n        box-sizing: border-box;\n        font: inherit;\n        color: inherit;\n        background: var(--ui-surface, #fff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.1rem 0.3rem;\n        margin: -0.1rem -0.3rem;\n        outline: none;\n      }\n      input:focus,\n      textarea:focus {\n        border-color: var(--ui-primary, #4f46e5);\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      textarea {\n        resize: none;\n        overflow: hidden;\n      }\n    `,\n  ];\n\n  /** Current text. */\n  @property() value = \"\";\n  /** `false` renders an `<input>`, `true` an auto-growing `<textarea>`. */\n  @property({ type: Boolean }) multiline = false;\n  /** Muted placeholder text shown when `value` is empty, and as the input's placeholder. */\n  @property() placeholder = \"\";\n  /** Disables entering edit mode. */\n  @property({ type: Boolean }) readonly = false;\n  /** `aria-label` applied to the input/textarea. */\n  @property() label = \"\";\n\n  @state() private _editing = false;\n  @state() private _draft = \"\";\n\n  @query(\"input, textarea\") private _field?: HTMLInputElement | HTMLTextAreaElement;\n\n  /** Enters edit mode, seeding the draft from the current value. */\n  private _startEdit() {\n    if (this.readonly) return;\n    this._draft = this.value;\n    this._editing = true;\n  }\n\n  /** Commits the draft (reverting an empty single-line commit) and exits edit mode.\n   *\n   * Guarded on `_editing`: removing the focused input/textarea from the DOM\n   * (which happens as soon as `_editing` flips to false) makes the browser\n   * fire a native `blur` on it, re-invoking this handler a second time after\n   * a cancel already ran — the guard makes that second call a no-op instead\n   * of re-committing the stale draft.\n   */\n  private _commit() {\n    if (!this._editing) return;\n    const next = this._draft;\n    this._editing = false;\n    if (!this.multiline && next.trim() === \"\") return;\n    if (next === this.value) return;\n    this.value = next;\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: { value: next } }));\n  }\n\n  /** Discards the draft and exits edit mode without committing. */\n  private _cancel() {\n    this._editing = false;\n  }\n\n  private _onInput(e: Event) {\n    this._draft = (e.target as HTMLInputElement | HTMLTextAreaElement).value;\n    if (this.multiline) this._resize();\n  }\n\n  private _onSingleLineKeydown(e: KeyboardEvent) {\n    if (e.key === \"Enter\") {\n      e.preventDefault();\n      this._commit();\n    } else if (e.key === \"Escape\") {\n      e.preventDefault();\n      this._cancel();\n    }\n  }\n\n  private _onMultilineKeydown(e: KeyboardEvent) {\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      this._cancel();\n    } else if (e.key === \"Enter\" && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault();\n      this._commit();\n    }\n  }\n\n  /** Grows the textarea's height to fit its content. */\n  private _resize() {\n    const field = this._field;\n    if (!field) return;\n    field.style.height = \"auto\";\n    field.style.height = `${field.scrollHeight}px`;\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    if (changed.has(\"_editing\") && this._editing) {\n      const field = this._field;\n      if (!field) return;\n      field.focus();\n      const end = field.value.length;\n      field.setSelectionRange(end, end);\n      if (this.multiline) this._resize();\n    }\n  }\n\n  override render() {\n    if (this._editing) {\n      return this.multiline\n        ? html`<textarea\n            rows=\"3\"\n            .value=${this._draft}\n            placeholder=${this.placeholder}\n            aria-label=${this.label || nothing}\n            @input=${this._onInput}\n            @keydown=${this._onMultilineKeydown}\n            @blur=${this._commit}\n          ></textarea>`\n        : html`<input\n            type=\"text\"\n            .value=${this._draft}\n            placeholder=${this.placeholder}\n            aria-label=${this.label || nothing}\n            @input=${this._onInput}\n            @keydown=${this._onSingleLineKeydown}\n            @blur=${this._commit}\n          />`;\n    }\n\n    const isEmpty = this.value.trim() === \"\";\n    const classes = `display ${this.multiline ? \"multiline\" : \"\"} ${isEmpty ? \"empty\" : \"\"} ${this.readonly ? \"readonly\" : \"\"}`;\n    return html`<span class=${classes} @click=${this._startEdit}\n      >${isEmpty ? this.placeholder : this.value}</span\n    >`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"editable-text\": EditableText;\n  }\n}\n"]}

package/dist/form-select.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, type PropertyValues } from "lit";
+/** A single selectable option. */
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * A styled dropdown select: a trigger button showing the current option's
+ * label, opening a listbox popover on click. Drop-in generic replacement for
+ * a native `<select>` wherever consistent cross-browser styling and a
+ * `change` event carrying `{ value }` are wanted (e.g. a task's status
+ * picker).
+ *
+ * @element form-select
+ * @fires change - Fired with `{ value: string }` when a different option is picked.
+ */
+export declare class FormSelect extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** The full list of selectable options. */
+    options: SelectOption[];
+    /** Currently selected value; must match one of `options[].value`. */
+    value: string;
+    /** `aria-label` applied to the trigger button. */
+    label: string;
+    /** Disables the trigger, preventing the popover from opening. */
+    disabled: boolean;
+    private _open;
+    private _activeIndex;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private renderListbox;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "form-select": FormSelect;
+    }
+}
+//# sourceMappingURL=form-select.d.ts.map

package/dist/form-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-select.d.ts","sourceRoot":"","sources":["../src/form-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1E,kCAAkC;AAClC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,qBACa,UAAW,SAAQ,UAAU;;IACxC,OAAgB,MAAM,4BAwEpB;IAEF,2CAA2C;IACX,OAAO,EAAE,YAAY,EAAE,CAAM;IAC7D,qEAAqE;IACzD,KAAK,SAAM;IACvB,kDAAkD;IACtC,KAAK,SAAM;IACvB,iEAAiE;IACpC,QAAQ,UAAS;IAErC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,YAAY,CAAM;IAE1B,oBAAoB,IAAI,IAAI,CAGpC;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAQxD;IAmDD,OAAO,CAAC,aAAa;IAuBZ,MAAM,yCAkBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/form-select.js

@@ -0,0 +1,236 @@
+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 { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { iconChevronRight } from "./icons.js";
+import { tokens } from "./tokens.js";
+/**
+ * A styled dropdown select: a trigger button showing the current option's
+ * label, opening a listbox popover on click. Drop-in generic replacement for
+ * a native `<select>` wherever consistent cross-browser styling and a
+ * `change` event carrying `{ value }` are wanted (e.g. a task's status
+ * picker).
+ *
+ * @element form-select
+ * @fires change - Fired with `{ value: string }` when a different option is picked.
+ */
+let FormSelect = class FormSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The full list of selectable options. */
+        this.options = [];
+        /** Currently selected value; must match one of `options[].value`. */
+        this.value = "";
+        /** `aria-label` applied to the trigger button. */
+        this.label = "";
+        /** Disables the trigger, preventing the popover from opening. */
+        this.disabled = false;
+        this._open = false;
+        this._activeIndex = -1;
+        this.#onWindowMousedown = (e) => {
+            if (!e.composedPath().includes(this))
+                this._open = false;
+        };
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-block;
+        position: relative;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size-sm, 0.75rem);
+      }
+      button.trigger {
+        display: flex;
+        align-items: center;
+        gap: 0.35rem;
+        font: inherit;
+        color: var(--ui-text, #0f172a);
+        background: var(--ui-surface, #fff);
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.3rem 0.5rem;
+        cursor: pointer;
+      }
+      button.trigger:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      button.trigger:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      button.trigger:focus-visible {
+        outline: none;
+        border-color: var(--ui-primary, #4f46e5);
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      .chevron {
+        display: flex;
+        color: var(--ui-text-muted, #64748b);
+        transform: rotate(90deg);
+        transition: transform 0.1s ease;
+      }
+      :host([open]) .chevron {
+        transform: rotate(-90deg);
+      }
+      ul.options {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        min-width: 100%;
+        max-height: 40vh;
+        overflow-y: auto;
+        margin: 2px 0 0;
+        padding: 4px 0;
+        list-style: none;
+        white-space: nowrap;
+        background: var(--ui-surface, #fff);
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+      }
+      li {
+        padding: 0.35rem 0.6rem;
+        cursor: pointer;
+      }
+      li.active,
+      li:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      li[aria-selected="true"] {
+        font-weight: 600;
+        color: var(--ui-primary, #4f46e5);
+      }
+    `,
+    ]; }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("mousedown", this.#onWindowMousedown, true);
+    }
+    updated(changed) {
+        if (!changed.has("_open"))
+            return;
+        this.toggleAttribute("open", this._open);
+        if (this._open) {
+            window.addEventListener("mousedown", this.#onWindowMousedown, true);
+        }
+        else {
+            window.removeEventListener("mousedown", this.#onWindowMousedown, true);
+        }
+    }
+    #onWindowMousedown;
+    #toggle() {
+        if (this.disabled)
+            return;
+        this._open = !this._open;
+        if (this._open) {
+            this._activeIndex = Math.max(0, this.options.findIndex((o) => o.value === this.value));
+        }
+    }
+    #select(option) {
+        this._open = false;
+        if (option.value === this.value)
+            return;
+        this.value = option.value;
+        this.dispatchEvent(new CustomEvent("change", { detail: { value: option.value } }));
+    }
+    #onTriggerKeydown(e) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (!this._open) {
+                this.#toggle();
+                return;
+            }
+            if (e.key === "ArrowDown")
+                this.#moveActive(1);
+            else if (e.key === "ArrowUp")
+                this.#moveActive(-1);
+            else
+                this.#confirmActive();
+        }
+        else if (e.key === "Escape" && this._open) {
+            e.preventDefault();
+            this._open = false;
+        }
+    }
+    #moveActive(delta) {
+        if (this.options.length === 0)
+            return;
+        const n = this.options.length;
+        this._activeIndex = (this._activeIndex + delta + n) % n;
+    }
+    #confirmActive() {
+        const option = this.options[this._activeIndex];
+        if (option)
+            this.#select(option);
+    }
+    renderListbox() {
+        if (!this._open)
+            return nothing;
+        return html `
+      <ul class="options" role="listbox">
+        ${this.options.map((o, i) => html `
+            <li
+              role="option"
+              aria-selected=${o.value === this.value}
+              class=${i === this._activeIndex ? "active" : ""}
+              @mousedown=${(e) => {
+            e.preventDefault();
+            this.#select(o);
+        }}
+            >
+              ${o.label}
+            </li>
+          `)}
+      </ul>
+    `;
+    }
+    render() {
+        const current = this.options.find((o) => o.value === this.value);
+        return html `
+      <button
+        type="button"
+        class="trigger"
+        aria-haspopup="listbox"
+        aria-expanded=${this._open}
+        aria-label=${this.label || nothing}
+        ?disabled=${this.disabled}
+        @click=${() => this.#toggle()}
+        @keydown=${(e) => this.#onTriggerKeydown(e)}
+      >
+        <span>${current?.label ?? this.value}</span>
+        <span class="chevron">${iconChevronRight(14)}</span>
+      </button>
+      ${this.renderListbox()}
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], FormSelect.prototype, "options", void 0);
+__decorate([
+    property()
+], FormSelect.prototype, "value", void 0);
+__decorate([
+    property()
+], FormSelect.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], FormSelect.prototype, "disabled", void 0);
+__decorate([
+    state()
+], FormSelect.prototype, "_open", void 0);
+__decorate([
+    state()
+], FormSelect.prototype, "_activeIndex", void 0);
+FormSelect = __decorate([
+    customElement("form-select")
+], FormSelect);
+export { FormSelect };
+//# sourceMappingURL=form-select.js.map

package/dist/form-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-select.js","sourceRoot":"","sources":["../src/form-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { iconChevronRight } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** A single selectable option. */\nexport interface SelectOption {\n  value: string;\n  label: string;\n}\n\n/**\n * A styled dropdown select: a trigger button showing the current option's\n * label, opening a listbox popover on click. Drop-in generic replacement for\n * a native `<select>` wherever consistent cross-browser styling and a\n * `change` event carrying `{ value }` are wanted (e.g. a task's status\n * picker).\n *\n * @element form-select\n * @fires change - Fired with `{ value: string }` when a different option is picked.\n */\n@customElement(\"form-select\")\nexport class FormSelect extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      button.trigger {\n        display: flex;\n        align-items: center;\n        gap: 0.35rem;\n        font: inherit;\n        color: var(--ui-text, #0f172a);\n        background: var(--ui-surface, #fff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.3rem 0.5rem;\n        cursor: pointer;\n      }\n      button.trigger:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      button.trigger:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      button.trigger:focus-visible {\n        outline: none;\n        border-color: var(--ui-primary, #4f46e5);\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .chevron {\n        display: flex;\n        color: var(--ui-text-muted, #64748b);\n        transform: rotate(90deg);\n        transition: transform 0.1s ease;\n      }\n      :host([open]) .chevron {\n        transform: rotate(-90deg);\n      }\n      ul.options {\n        position: absolute;\n        top: 100%;\n        left: 0;\n        z-index: 10;\n        min-width: 100%;\n        max-height: 40vh;\n        overflow-y: auto;\n        margin: 2px 0 0;\n        padding: 4px 0;\n        list-style: none;\n        white-space: nowrap;\n        background: var(--ui-surface, #fff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n      }\n      li {\n        padding: 0.35rem 0.6rem;\n        cursor: pointer;\n      }\n      li.active,\n      li:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      li[aria-selected=\"true\"] {\n        font-weight: 600;\n        color: var(--ui-primary, #4f46e5);\n      }\n    `,\n  ];\n\n  /** The full list of selectable options. */\n  @property({ attribute: false }) options: SelectOption[] = [];\n  /** Currently selected value; must match one of `options[].value`. */\n  @property() value = \"\";\n  /** `aria-label` applied to the trigger button. */\n  @property() label = \"\";\n  /** Disables the trigger, preventing the popover from opening. */\n  @property({ type: Boolean }) disabled = false;\n\n  @state() private _open = false;\n  @state() private _activeIndex = -1;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (!changed.has(\"_open\")) return;\n    this.toggleAttribute(\"open\", this._open);\n    if (this._open) {\n      window.addEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    } else {\n      window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    }\n  }\n\n  #onWindowMousedown = (e: MouseEvent): void => {\n    if (!e.composedPath().includes(this)) this._open = false;\n  };\n\n  #toggle(): void {\n    if (this.disabled) return;\n    this._open = !this._open;\n    if (this._open) {\n      this._activeIndex = Math.max(\n        0,\n        this.options.findIndex((o) => o.value === this.value),\n      );\n    }\n  }\n\n  #select(option: SelectOption): void {\n    this._open = false;\n    if (option.value === this.value) return;\n    this.value = option.value;\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: { value: option.value } }));\n  }\n\n  #onTriggerKeydown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\" || e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      if (!this._open) {\n        this.#toggle();\n        return;\n      }\n      if (e.key === \"ArrowDown\") this.#moveActive(1);\n      else if (e.key === \"ArrowUp\") this.#moveActive(-1);\n      else this.#confirmActive();\n    } else if (e.key === \"Escape\" && this._open) {\n      e.preventDefault();\n      this._open = false;\n    }\n  }\n\n  #moveActive(delta: number): void {\n    if (this.options.length === 0) return;\n    const n = this.options.length;\n    this._activeIndex = (this._activeIndex + delta + n) % n;\n  }\n\n  #confirmActive(): void {\n    const option = this.options[this._activeIndex];\n    if (option) this.#select(option);\n  }\n\n  private renderListbox() {\n    if (!this._open) return nothing;\n    return html`\n      <ul class=\"options\" role=\"listbox\">\n        ${this.options.map(\n          (o, i) => html`\n            <li\n              role=\"option\"\n              aria-selected=${o.value === this.value}\n              class=${i === this._activeIndex ? \"active\" : \"\"}\n              @mousedown=${(e: MouseEvent) => {\n                e.preventDefault();\n                this.#select(o);\n              }}\n            >\n              ${o.label}\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  override render() {\n    const current = this.options.find((o) => o.value === this.value);\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        aria-haspopup=\"listbox\"\n        aria-expanded=${this._open}\n        aria-label=${this.label || nothing}\n        ?disabled=${this.disabled}\n        @click=${() => this.#toggle()}\n        @keydown=${(e: KeyboardEvent) => this.#onTriggerKeydown(e)}\n      >\n        <span>${current?.label ?? this.value}</span>\n        <span class=\"chevron\">${iconChevronRight(14)}</span>\n      </button>\n      ${this.renderListbox()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"form-select\": FormSelect;\n  }\n}\n"]}

package/dist/gallery-item-variant.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from "lit";
+/**
+ * Responsive image source metadata for a parent `gallery-item`.
+ *
+ * @element gallery-item-variant
+ */
+export declare class GalleryItemVariant extends LitElement {
+    /** Optional media query that controls when this source is selected. */
+    media?: string;
+    /** Responsive image candidate string passed to a generated `<source>`. */
+    srcset: string;
+    static styles: import("lit").CSSResult[];
+    /** Keeps this metadata element non-visual. */
+    protected render(): symbol;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "gallery-item-variant": GalleryItemVariant;
+    }
+}
+//# sourceMappingURL=gallery-item-variant.d.ts.map

package/dist/gallery-item-variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-item-variant.d.ts","sourceRoot":"","sources":["../src/gallery-item-variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAgB,MAAM,KAAK,CAAC;AAI/C;;;;GAIG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,uEAAuE;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IAE5C,0EAA0E;IAC7C,MAAM,SAAM;IAEzC,OAAgB,MAAM,4BAOpB;IAEF,8CAA8C;IAC9C,UAAmB,MAAM,WAExB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/dist/gallery-item-variant.js

@@ -0,0 +1,44 @@
+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 { LitElement, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * Responsive image source metadata for a parent `gallery-item`.
+ *
+ * @element gallery-item-variant
+ */
+let GalleryItemVariant = class GalleryItemVariant extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Responsive image candidate string passed to a generated `<source>`. */
+        this.srcset = "";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: none;
+      }
+    `,
+    ]; }
+    /** Keeps this metadata element non-visual. */
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], GalleryItemVariant.prototype, "media", void 0);
+__decorate([
+    property({ reflect: true })
+], GalleryItemVariant.prototype, "srcset", void 0);
+GalleryItemVariant = __decorate([
+    customElement("gallery-item-variant")
+], GalleryItemVariant);
+export { GalleryItemVariant };
+//# sourceMappingURL=gallery-item-variant.js.map

package/dist/gallery-item-variant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-item-variant.js","sourceRoot":"","sources":["../src/gallery-item-variant.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;GAIG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAIL,0EAA0E;QAC7C,WAAM,GAAG,EAAE,CAAC;IAe3C,CAAC;aAbiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;KAIF;KACF,AAPqB,CAOpB;IAEF,8CAA8C;IAC3B,MAAM;QACvB,OAAO,OAAO,CAAC;IACjB,CAAC;CACF,CAAA;AAlB8B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAgB;AAGf;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAa;AAL9B,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAoB9B","sourcesContent":["import { LitElement, css, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Responsive image source metadata for a parent `gallery-item`.\n *\n * @element gallery-item-variant\n */\n@customElement(\"gallery-item-variant\")\nexport class GalleryItemVariant extends LitElement {\n  /** Optional media query that controls when this source is selected. */\n  @property({ reflect: true }) media?: string;\n\n  /** Responsive image candidate string passed to a generated `<source>`. */\n  @property({ reflect: true }) srcset = \"\";\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: none;\n      }\n    `,\n  ];\n\n  /** Keeps this metadata element non-visual. */\n  protected override render() {\n    return nothing;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"gallery-item-variant\": GalleryItemVariant;\n  }\n}\n"]}

package/dist/gallery-item.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from "lit";
+import "./gallery-item-variant.js";
+import type { GalleryItemVariant } from "./gallery-item-variant.js";
+/**
+ * Declarative image metadata consumed by a parent `photo-gallery`.
+ *
+ * @element gallery-item
+ * @slot - Optional `gallery-item-variant` elements for responsive sources.
+ */
+export declare class GalleryItem extends LitElement {
+    /** URL of the fallback image. */
+    src: string;
+    /** Required alternative text for the image. */
+    alt: string;
+    /** Optional visible caption rendered below the image. */
+    caption?: string;
+    /** Responsive source variants declared inside this item. */
+    readonly variants: GalleryItemVariant[];
+    static styles: import("lit").CSSResult[];
+    /** Retains declarative variants while keeping the metadata host hidden. */
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "gallery-item": GalleryItem;
+    }
+}
+//# sourceMappingURL=gallery-item.d.ts.map

package/dist/gallery-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-item.d.ts","sourceRoot":"","sources":["../src/gallery-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGpE;;;;;GAKG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,iCAAiC;IACJ,GAAG,SAAM;IAEtC,+CAA+C;IAClB,GAAG,SAAM;IAEtC,yDAAyD;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IAE9C,4DAA4D;IAE5D,QAAQ,CAAC,QAAQ,EAAG,kBAAkB,EAAE,CAAC;IAEzC,OAAgB,MAAM,4BAOpB;IAEF,2EAA2E;IAC3E,UAAmB,MAAM,yCAExB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/gallery-item.js

@@ -0,0 +1,54 @@
+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 { LitElement, css, html } from "lit";
+import { customElement, property, queryAssignedElements } from "lit/decorators.js";
+import "./gallery-item-variant.js";
+import { tokens } from "./tokens.js";
+/**
+ * Declarative image metadata consumed by a parent `photo-gallery`.
+ *
+ * @element gallery-item
+ * @slot - Optional `gallery-item-variant` elements for responsive sources.
+ */
+let GalleryItem = class GalleryItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** URL of the fallback image. */
+        this.src = "";
+        /** Required alternative text for the image. */
+        this.alt = "";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: none;
+      }
+    `,
+    ]; }
+    /** Retains declarative variants while keeping the metadata host hidden. */
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], GalleryItem.prototype, "src", void 0);
+__decorate([
+    property({ reflect: true })
+], GalleryItem.prototype, "alt", void 0);
+__decorate([
+    property({ reflect: true })
+], GalleryItem.prototype, "caption", void 0);
+__decorate([
+    queryAssignedElements({ selector: "gallery-item-variant" })
+], GalleryItem.prototype, "variants", void 0);
+GalleryItem = __decorate([
+    customElement("gallery-item")
+], GalleryItem);
+export { GalleryItem };
+//# sourceMappingURL=gallery-item.js.map

package/dist/gallery-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-item.js","sourceRoot":"","sources":["../src/gallery-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACL,iCAAiC;QACJ,QAAG,GAAG,EAAE,CAAC;QAEtC,+CAA+C;QAClB,QAAG,GAAG,EAAE,CAAC;IAsBxC,CAAC;aAbiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;KAIF;KACF,AAPqB,CAOpB;IAEF,2EAA2E;IACxD,MAAM;QACvB,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAzB8B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAU;AAGT;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAU;AAGT;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AAIrC;IADR,qBAAqB,CAAC,EAAE,QAAQ,EAAE,sBAAsB,EAAE,CAAC;6CACnB;AAZ9B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA2BvB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property, queryAssignedElements } from \"lit/decorators.js\";\nimport \"./gallery-item-variant.js\";\nimport type { GalleryItemVariant } from \"./gallery-item-variant.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Declarative image metadata consumed by a parent `photo-gallery`.\n *\n * @element gallery-item\n * @slot - Optional `gallery-item-variant` elements for responsive sources.\n */\n@customElement(\"gallery-item\")\nexport class GalleryItem extends LitElement {\n  /** URL of the fallback image. */\n  @property({ reflect: true }) src = \"\";\n\n  /** Required alternative text for the image. */\n  @property({ reflect: true }) alt = \"\";\n\n  /** Optional visible caption rendered below the image. */\n  @property({ reflect: true }) caption?: string;\n\n  /** Responsive source variants declared inside this item. */\n  @queryAssignedElements({ selector: \"gallery-item-variant\" })\n  readonly variants!: GalleryItemVariant[];\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: none;\n      }\n    `,\n  ];\n\n  /** Retains declarative variants while keeping the metadata host hidden. */\n  protected override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"gallery-item\": GalleryItem;\n  }\n}\n"]}

package/dist/icons.d.ts

@@ -29,4 +29,11 @@ export declare const iconEye: (size?: number) => import("lit-html").TemplateResu
 export declare const iconEyeSlash: (size?: number) => import("lit-html").TemplateResult<2>;
 export declare const iconShieldCheck: (size?: number) => import("lit-html").TemplateResult<2>;
 export declare const iconUserCircle: (size?: number) => import("lit-html").TemplateResult<2>;
+export declare const iconClipboardDocumentList: (size?: number) => import("lit-html").TemplateResult<2>;
+export declare const iconCpuChip: (size?: number) => import("lit-html").TemplateResult<2>;
+export declare const iconFolder: (size?: number) => import("lit-html").TemplateResult<2>;
+export declare const iconChevronDown: (size?: number) => import("lit-html").TemplateResult<2>;
+export declare const iconDocument: (size?: number) => import("lit-html").TemplateResult<2>;
+export declare const iconSquares2x2: (size?: number) => import("lit-html").TemplateResult<2>;
+export declare const iconChatBubbleLeftRight: (size?: number) => import("lit-html").TemplateResult<2>;
 //# sourceMappingURL=icons.d.ts.map

package/dist/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK,yDAC2O,CAAC;AAE9P,eAAO,MAAM,SAAS,yDAC+P,CAAC;AAEtR,eAAO,MAAM,eAAe,yDACwO,CAAC;AAErQ,eAAO,MAAM,gBAAgB,yDACqO,CAAC;AAEnQ,eAAO,MAAM,OAAO,yDAC2xC,CAAC;AAEhzC,eAAO,MAAM,QAAQ,yDAC4W,CAAC;AAElY,eAAO,MAAM,sBAAsB,yDAC6Y,CAAC;AAEjb,eAAO,MAAM,UAAU,yDACqX,CAAC;AAE7Y,eAAO,MAAM,SAAS,yDACgnB,CAAC;AAEvoB,eAAO,MAAM,QAAQ,yDAC0O,CAAC;AAEhQ,eAAO,MAAM,cAAc,yDACme,CAAC;AAE/f,eAAO,MAAM,kBAAkB,yDACob,CAAC;AAEpd,eAAO,MAAM,QAAQ,yDAC8b,CAAC;AAEpd,eAAO,MAAM,UAAU,yDACiY,CAAC;AAEzZ,eAAO,MAAM,SAAS,yDACmQ,CAAC;AAE1R,eAAO,MAAM,OAAO,yDACif,CAAC;AAEtgB,eAAO,MAAM,YAAY,yDACib,CAAC;AAE3c,eAAO,MAAM,qBAAqB,yDAC4V,CAAC;AAE/X,eAAO,MAAM,OAAO,yDACyhB,CAAC;AAE9iB,eAAO,MAAM,eAAe,yDAC2Q,CAAC;AAExS,eAAO,MAAM,OAAO,yDACsZ,CAAC;AAE3a,eAAO,MAAM,qBAAqB,yDACma,CAAC;AAEtc,eAAO,MAAM,aAAa,yDACsX,CAAC;AAEjZ,eAAO,MAAM,cAAc,yDACiP,CAAC;AAE7Q,eAAO,MAAM,QAAQ,yDAC6X,CAAC;AAEnZ,eAAO,MAAM,SAAS,yDACgX,CAAC;AAEvY,eAAO,MAAM,cAAc,yDAC8f,CAAC;AAE1hB,eAAO,MAAM,OAAO,yDAC4e,CAAC;AAEjgB,eAAO,MAAM,YAAY,yDAC4hB,CAAC;AAEtjB,eAAO,MAAM,eAAe,yDAC+Z,CAAC;AAE5b,eAAO,MAAM,cAAc,yDACqZ,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK,yDAC2O,CAAC;AAE9P,eAAO,MAAM,SAAS,yDAC+P,CAAC;AAEtR,eAAO,MAAM,eAAe,yDACwO,CAAC;AAErQ,eAAO,MAAM,gBAAgB,yDACqO,CAAC;AAEnQ,eAAO,MAAM,OAAO,yDAC2xC,CAAC;AAEhzC,eAAO,MAAM,QAAQ,yDAC4W,CAAC;AAElY,eAAO,MAAM,sBAAsB,yDAC6Y,CAAC;AAEjb,eAAO,MAAM,UAAU,yDACqX,CAAC;AAE7Y,eAAO,MAAM,SAAS,yDACgnB,CAAC;AAEvoB,eAAO,MAAM,QAAQ,yDAC0O,CAAC;AAEhQ,eAAO,MAAM,cAAc,yDACme,CAAC;AAE/f,eAAO,MAAM,kBAAkB,yDACob,CAAC;AAEpd,eAAO,MAAM,QAAQ,yDAC8b,CAAC;AAEpd,eAAO,MAAM,UAAU,yDACiY,CAAC;AAEzZ,eAAO,MAAM,SAAS,yDACmQ,CAAC;AAE1R,eAAO,MAAM,OAAO,yDACif,CAAC;AAEtgB,eAAO,MAAM,YAAY,yDACib,CAAC;AAE3c,eAAO,MAAM,qBAAqB,yDAC4V,CAAC;AAE/X,eAAO,MAAM,OAAO,yDACyhB,CAAC;AAE9iB,eAAO,MAAM,eAAe,yDAC2Q,CAAC;AAExS,eAAO,MAAM,OAAO,yDACsZ,CAAC;AAE3a,eAAO,MAAM,qBAAqB,yDACma,CAAC;AAEtc,eAAO,MAAM,aAAa,yDACsX,CAAC;AAEjZ,eAAO,MAAM,cAAc,yDACiP,CAAC;AAE7Q,eAAO,MAAM,QAAQ,yDAC6X,CAAC;AAEnZ,eAAO,MAAM,SAAS,yDACgX,CAAC;AAEvY,eAAO,MAAM,cAAc,yDAC8f,CAAC;AAE1hB,eAAO,MAAM,OAAO,yDAC4e,CAAC;AAEjgB,eAAO,MAAM,YAAY,yDAC4hB,CAAC;AAEtjB,eAAO,MAAM,eAAe,yDAC+Z,CAAC;AAE5b,eAAO,MAAM,cAAc,yDACqZ,CAAC;AAEjb,eAAO,MAAM,yBAAyB,yDACuxB,CAAC;AAE9zB,eAAO,MAAM,WAAW,yDACge,CAAC;AAEzf,eAAO,MAAM,UAAU,yDACqd,CAAC;AAE7e,eAAO,MAAM,eAAe,yDACuO,CAAC;AAEpQ,eAAO,MAAM,YAAY,yDACid,CAAC;AAE3e,eAAO,MAAM,cAAc,yDACosB,CAAC;AAEhuB,eAAO,MAAM,uBAAuB,yDAC2sB,CAAC"}

package/dist/icons.js

@@ -32,4 +32,11 @@ export const iconEye = (size = 16) => svg `<svg xmlns="http://www.w3.org/2000/sv
 export const iconEyeSlash = (size = 16) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>`;
 export const iconShieldCheck = (size = 16) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/></svg>`;
 export const iconUserCircle = (size = 20) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>`;
+export const iconClipboardDocumentList = (size = 18) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"/></svg>`;
+export const iconCpuChip = (size = 18) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"/></svg>`;
+export const iconFolder = (size = 18) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"/></svg>`;
+export const iconChevronDown = (size = 16) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>`;
+export const iconDocument = (size = 18) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>`;
+export const iconSquares2x2 = (size = 18) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z"/></svg>`;
+export const iconChatBubbleLeftRight = (size = 18) => svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" width=${size} height=${size} aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"/></svg>`;
 //# sourceMappingURL=icons.js.map