@mellow.io/ds 0.1.0

package/dist/components/radio/radio.styles.js

@@ -0,0 +1,117 @@
+import { css as e } from "lit";
+const l = e`
+  :host {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--mellow-space-2, 8px);
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+  }
+
+  :host(:focus-visible) .radio-circle {
+    outline: 2px solid var(--mellow-colors-primary-mellow-orange, #ff6f23);
+    outline-offset: 2px;
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+    opacity: 0.48;
+  }
+
+  /* Visual radio circle */
+  .radio-circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: var(--mellow-bg-fill-control-default, rgba(193, 148, 118, 0.24));
+    overflow: clip;
+    transition: background-color 150ms ease;
+  }
+
+  :host(:hover:not([disabled])) .radio-circle {
+    background: var(--mellow-bg-fill-control-default-hovered, #e4d3c4);
+  }
+
+  .radio-circle.checked {
+    background: var(--mellow-bg-fill-control-active, #ff6f23);
+  }
+
+  :host(:hover:not([disabled])) .radio-circle.checked {
+    background: var(--mellow-bg-fill-control-active-hovered, #f04706);
+  }
+
+  /* Size: lg (24px) — default */
+  .radio-circle {
+    width: 24px;
+    height: 24px;
+  }
+
+  :host([size='md']) .radio-circle {
+    width: 20px;
+    height: 20px;
+  }
+
+  :host([size='sm']) .radio-circle {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Inner dot */
+  .radio-dot {
+    border-radius: 50%;
+    background: var(--mellow-bg-fill-control-indicator, white);
+  }
+
+  .radio-dot {
+    width: 12px;
+    height: 12px;
+  }
+
+  :host([size='md']) .radio-dot {
+    width: 10px;
+    height: 10px;
+  }
+
+  :host([size='sm']) .radio-dot {
+    width: 8px;
+    height: 8px;
+  }
+
+  /* Label */
+  .label-text {
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+    font-weight: var(--mellow-font-weight-regular, 400);
+    font-size: var(--mellow-font-size-18, 18px);
+    line-height: var(--mellow-line-height-24, 24px);
+    color: var(--mellow-text-primary, #232222);
+  }
+
+  :host([size='md']) .label-text {
+    font-size: var(--mellow-font-size-16, 16px);
+    line-height: var(--mellow-line-height-22, 22px);
+  }
+
+  :host([size='sm']) .label-text {
+    font-size: var(--mellow-font-size-14, 14px);
+    line-height: var(--mellow-line-height-18, 18px);
+  }
+
+  :host([disabled]) .label-text {
+    color: var(--mellow-text-secondary, #8a8686);
+  }
+`, i = e`
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mellow-space-2, 8px);
+    outline: none;
+  }
+`;
+export {
+  i as radioGroupStyles,
+  l as radioStyles
+};
+//# sourceMappingURL=radio.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.styles.js","sources":["../../../src/components/radio/radio.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const radioStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--mellow-space-2, 8px);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n\n  :host(:focus-visible) .radio-circle {\n    outline: 2px solid var(--mellow-colors-primary-mellow-orange, #ff6f23);\n    outline-offset: 2px;\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n    opacity: 0.48;\n  }\n\n  /* Visual radio circle */\n  .radio-circle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border-radius: 50%;\n    background: var(--mellow-bg-fill-control-default, rgba(193, 148, 118, 0.24));\n    overflow: clip;\n    transition: background-color 150ms ease;\n  }\n\n  :host(:hover:not([disabled])) .radio-circle {\n    background: var(--mellow-bg-fill-control-default-hovered, #e4d3c4);\n  }\n\n  .radio-circle.checked {\n    background: var(--mellow-bg-fill-control-active, #ff6f23);\n  }\n\n  :host(:hover:not([disabled])) .radio-circle.checked {\n    background: var(--mellow-bg-fill-control-active-hovered, #f04706);\n  }\n\n  /* Size: lg (24px) — default */\n  .radio-circle {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([size='md']) .radio-circle {\n    width: 20px;\n    height: 20px;\n  }\n\n  :host([size='sm']) .radio-circle {\n    width: 16px;\n    height: 16px;\n  }\n\n  /* Inner dot */\n  .radio-dot {\n    border-radius: 50%;\n    background: var(--mellow-bg-fill-control-indicator, white);\n  }\n\n  .radio-dot {\n    width: 12px;\n    height: 12px;\n  }\n\n  :host([size='md']) .radio-dot {\n    width: 10px;\n    height: 10px;\n  }\n\n  :host([size='sm']) .radio-dot {\n    width: 8px;\n    height: 8px;\n  }\n\n  /* Label */\n  .label-text {\n    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\\\'l', system-ui, sans-serif);\n    font-weight: var(--mellow-font-weight-regular, 400);\n    font-size: var(--mellow-font-size-18, 18px);\n    line-height: var(--mellow-line-height-24, 24px);\n    color: var(--mellow-text-primary, #232222);\n  }\n\n  :host([size='md']) .label-text {\n    font-size: var(--mellow-font-size-16, 16px);\n    line-height: var(--mellow-line-height-22, 22px);\n  }\n\n  :host([size='sm']) .label-text {\n    font-size: var(--mellow-font-size-14, 14px);\n    line-height: var(--mellow-line-height-18, 18px);\n  }\n\n  :host([disabled]) .label-text {\n    color: var(--mellow-text-secondary, #8a8686);\n  }\n`\n\nexport const radioGroupStyles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mellow-space-2, 8px);\n    outline: none;\n  }\n`\n"],"names":["radioStyles","css","radioGroupStyles"],"mappings":";AAEO,MAAMA,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyGdC,IAAmBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/select/index.d.ts

@@ -0,0 +1,3 @@
+export { MellowSelect } from './select.js';
+export { MellowOption } from './option.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA"}

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export declare class MellowOption extends LitElement {
+    static styles: import("lit").CSSResult;
+    value: string;
+    label: string;
+    disabled: boolean;
+    get displayLabel(): string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-option': MellowOption;
+    }
+}
+//# sourceMappingURL=option.d.ts.map

package/dist/components/select/option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../../src/components/select/option.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAG3C,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAIrB;IAGD,KAAK,SAAK;IAGV,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAEhB,IAAI,YAAY,IAAI,MAAM,CAEzB;IAEQ,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}

package/dist/components/select/option.js

@@ -0,0 +1,39 @@
+import { css as u, LitElement as m, html as b } from "lit";
+import { property as i, customElement as c } from "lit/decorators.js";
+var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, o = (n, l, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? h(l, s) : l, p = n.length - 1, a; p >= 0; p--)
+    (a = n[p]) && (e = (r ? a(l, s, e) : a(e)) || e);
+  return r && e && f(l, s, e), e;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.value = "", this.label = "", this.disabled = !1;
+  }
+  get displayLabel() {
+    return this.label || this.textContent?.trim() || this.value;
+  }
+  render() {
+    return b`<slot></slot>`;
+  }
+};
+t.styles = u`
+    :host {
+      display: block;
+    }
+  `;
+o([
+  i()
+], t.prototype, "value", 2);
+o([
+  i()
+], t.prototype, "label", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+t = o([
+  c("mellow-option")
+], t);
+export {
+  t as MellowOption
+};
+//# sourceMappingURL=option.js.map

package/dist/components/select/option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.js","sources":["../../../src/components/select/option.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('mellow-option')\nexport class MellowOption extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n    }\n  `\n\n  @property()\n  value = ''\n\n  @property()\n  label = ''\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  get displayLabel(): string {\n    return this.label || this.textContent?.trim() || this.value\n  }\n\n  override render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-option': MellowOption\n  }\n}\n"],"names":["MellowOption","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,QAAQ,IAGR,KAAA,QAAQ,IAGR,KAAA,WAAW;AAAA,EAAA;AAAA,EAEX,IAAI,eAAuB;AACzB,WAAO,KAAK,SAAS,KAAK,aAAa,KAAA,KAAU,KAAK;AAAA,EACxD;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AAvBaF,EACK,SAASG;AAAA;AAAA;AAAA;AAAA;AAOzBC,EAAA;AAAA,EADCC,EAAA;AAAS,GAPCL,EAQX,WAAA,SAAA,CAAA;AAGAI,EAAA;AAAA,EADCC,EAAA;AAAS,GAVCL,EAWX,WAAA,SAAA,CAAA;AAGAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAb/BL,EAcX,WAAA,YAAA,CAAA;AAdWA,IAANI,EAAA;AAAA,EADNE,EAAc,eAAe;AAAA,GACjBN,CAAA;"}

package/dist/components/select/select.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+export declare class MellowSelect extends LitElement {
+    static styles: import("lit").CSSResult[];
+    value: string;
+    placeholder: string;
+    label: string;
+    error: string;
+    disabled: boolean;
+    searchable: boolean;
+    private _open;
+    private _highlightedIndex;
+    private _searchQuery;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _getOptions;
+    private _getEnabledOptions;
+    private _getFilteredOptions;
+    private _getSelectedLabel;
+    private _toggleOpen;
+    private _close;
+    private _selectValue;
+    private _handleOptionClick;
+    private _handleSearchInput;
+    private _handleKeydown;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-select': MellowSelect;
+    }
+}
+//# sourceMappingURL=select.d.ts.map

package/dist/components/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAA;AAmBpD,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAAiB;IAGvC,KAAK,SAAK;IAGV,WAAW,SAAK;IAGhB,KAAK,SAAK;IAGV,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,UAAU,UAAQ;IAGlB,OAAO,CAAC,KAAK,CAAQ;IAGrB,OAAO,CAAC,iBAAiB,CAAK;IAG9B,OAAO,CAAC,YAAY,CAAK;IAEhB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,kBAAkB,CAKzB;IAED,OAAO,CAAC,kBAAkB,CAIzB;IAED,OAAO,CAAC,cAAc,CA4CrB;IAEQ,MAAM;CAwFhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}

package/dist/components/select/select.js

@@ -0,0 +1,202 @@
+import { svg as _, LitElement as b, nothing as c, html as a } from "lit";
+import { property as o, state as u, customElement as f } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { selectStyles as y } from "./select.styles.js";
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, h = (e, t, i, r) => {
+  for (var n = r > 1 ? void 0 : r ? x(t, i) : t, d = e.length - 1, s; d >= 0; d--)
+    (s = e[d]) && (n = (r ? s(t, i, n) : s(n)) || n);
+  return r && n && w(t, i, n), n;
+};
+const k = _`
+  <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+    <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`, m = _`
+  <svg viewBox="0 0 20 20" fill="none" width="20" height="20">
+    <circle cx="9" cy="9" r="6" stroke="currentColor" stroke-width="1.5"/>
+    <path d="M13.5 13.5L17 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  </svg>
+`;
+let l = class extends b {
+  constructor() {
+    super(...arguments), this.value = "", this.placeholder = "", this.label = "", this.error = "", this.disabled = !1, this.searchable = !1, this._open = !1, this._highlightedIndex = -1, this._searchQuery = "", this._handleOptionClick = (e) => {
+      if (!this._open) return;
+      const t = e.target.closest("mellow-option");
+      !t || t.disabled || this._selectValue(t.value);
+    }, this._handleSearchInput = (e) => {
+      const t = e.target;
+      this._searchQuery = t.value, this._highlightedIndex = -1;
+    }, this._handleKeydown = (e) => {
+      if (!this.disabled) {
+        if (e.key === "Escape" && this._open) {
+          e.preventDefault(), this._close();
+          return;
+        }
+        if (e.key === "Enter" || e.key === " ") {
+          if (e.key === " " && this.searchable && this._open) return;
+          if (e.preventDefault(), !this._open) {
+            this._toggleOpen();
+            return;
+          }
+          if (this._highlightedIndex >= 0) {
+            const i = this._getFilteredOptions().filter((r) => !r.disabled);
+            i[this._highlightedIndex] && this._selectValue(i[this._highlightedIndex].value);
+          }
+          return;
+        }
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          if (e.preventDefault(), !this._open) {
+            this._toggleOpen();
+            return;
+          }
+          const i = this._getFilteredOptions().filter((r) => !r.disabled);
+          if (i.length === 0) return;
+          e.key === "ArrowDown" ? this._highlightedIndex = (this._highlightedIndex + 1) % i.length : this._highlightedIndex = this._highlightedIndex <= 0 ? i.length - 1 : this._highlightedIndex - 1;
+        }
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown), this.addEventListener("click", this._handleOptionClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown), this.removeEventListener("click", this._handleOptionClick);
+  }
+  _getOptions() {
+    return Array.from(this.querySelectorAll("mellow-option"));
+  }
+  _getEnabledOptions() {
+    return this._getOptions().filter((e) => !e.disabled);
+  }
+  _getFilteredOptions() {
+    const e = this._getOptions();
+    if (!this._searchQuery) return e;
+    const t = this._searchQuery.toLowerCase();
+    return e.filter((i) => i.displayLabel.toLowerCase().includes(t));
+  }
+  _getSelectedLabel() {
+    return this.value ? this._getOptions().find((t) => t.value === this.value)?.displayLabel ?? "" : "";
+  }
+  _toggleOpen() {
+    this.disabled || (this._open = !this._open, this._open && (this._highlightedIndex = -1, this._searchQuery = ""));
+  }
+  _close() {
+    this._open = !1, this._highlightedIndex = -1, this._searchQuery = "";
+  }
+  _selectValue(e) {
+    this.value = e, this._close(), this.dispatchEvent(new CustomEvent("mellow-change", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const e = this._getSelectedLabel(), t = this._getFilteredOptions(), i = t.filter((s) => !s.disabled), r = {
+      trigger: !0,
+      open: this._open
+    }, n = {
+      chevron: !0,
+      open: this._open
+    }, d = {
+      "display-text": !0,
+      placeholder: !e
+    };
+    return a`
+      <div class="wrapper">
+        ${this.label ? a`<label class="label" id="select-label">${this.label}</label>` : c}
+        <div
+          class=${p(r)}
+          role="combobox"
+          aria-expanded=${this._open ? "true" : "false"}
+          aria-haspopup="listbox"
+          aria-labelledby=${this.label ? "select-label" : c}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this._toggleOpen}
+        >
+          <span class=${p(d)}>
+            ${e || this.placeholder || " "}
+          </span>
+          <span class=${p(n)}>${k}</span>
+        </div>
+        ${this._open ? a`
+          <div class="dropdown" role="listbox">
+            ${this.searchable ? a`
+              <div class="search-row">
+                <span class="search-icon">${m}</span>
+                <input
+                  class="search-input"
+                  type="text"
+                  placeholder="Search"
+                  .value=${this._searchQuery}
+                  @input=${this._handleSearchInput}
+                  @click=${(s) => s.stopPropagation()}
+                />
+                <div class="search-divider"></div>
+              </div>
+            ` : c}
+            <div class="options-list">
+              ${t.map((s) => {
+      const g = i.indexOf(s), v = {
+        "option-item": !0,
+        selected: s.value === this.value,
+        highlighted: g === this._highlightedIndex,
+        disabled: s.disabled
+      };
+      return a`
+                  <div
+                    class=${p(v)}
+                    role="option"
+                    aria-selected=${s.value === this.value ? "true" : "false"}
+                    aria-disabled=${s.disabled ? "true" : "false"}
+                    @click=${() => {
+        s.disabled || this._selectValue(s.value);
+      }}
+                  >
+                    <span class="option-text">${s.displayLabel}</span>
+                  </div>
+                `;
+    })}
+            </div>
+          </div>
+        ` : c}
+        ${this.error ? a`<div class="helper" id="helper-text" role="alert">${this.error}</div>` : c}
+      </div>
+      <div class="hidden-slot"><slot></slot></div>
+    `;
+  }
+};
+l.styles = [y];
+h([
+  o()
+], l.prototype, "value", 2);
+h([
+  o()
+], l.prototype, "placeholder", 2);
+h([
+  o()
+], l.prototype, "label", 2);
+h([
+  o()
+], l.prototype, "error", 2);
+h([
+  o({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+h([
+  o({ type: Boolean })
+], l.prototype, "searchable", 2);
+h([
+  u()
+], l.prototype, "_open", 2);
+h([
+  u()
+], l.prototype, "_highlightedIndex", 2);
+h([
+  u()
+], l.prototype, "_searchQuery", 2);
+l = h([
+  f("mellow-select")
+], l);
+export {
+  l as MellowSelect
+};
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../../../src/components/select/select.ts"],"sourcesContent":["import { LitElement, html, svg, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { selectStyles } from './select.styles.js'\nimport type { MellowOption } from './option.js'\n\nconst chevronIcon = svg`\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n    <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n`\n\nconst searchIcon = svg`\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" width=\"20\" height=\"20\">\n    <circle cx=\"9\" cy=\"9\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n    <path d=\"M13.5 13.5L17 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n  </svg>\n`\n\n@customElement('mellow-select')\nexport class MellowSelect extends LitElement {\n  static override styles = [selectStyles]\n\n  @property()\n  value = ''\n\n  @property()\n  placeholder = ''\n\n  @property()\n  label = ''\n\n  @property()\n  error = ''\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  @property({ type: Boolean })\n  searchable = false\n\n  @state()\n  private _open = false\n\n  @state()\n  private _highlightedIndex = -1\n\n  @state()\n  private _searchQuery = ''\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.addEventListener('keydown', this._handleKeydown)\n    this.addEventListener('click', this._handleOptionClick)\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('keydown', this._handleKeydown)\n    this.removeEventListener('click', this._handleOptionClick)\n  }\n\n  private _getOptions(): MellowOption[] {\n    return Array.from(this.querySelectorAll('mellow-option'))\n  }\n\n  private _getEnabledOptions(): MellowOption[] {\n    return this._getOptions().filter(o => !o.disabled)\n  }\n\n  private _getFilteredOptions(): MellowOption[] {\n    const allOptions = this._getOptions()\n    if (!this._searchQuery) return allOptions\n    const query = this._searchQuery.toLowerCase()\n    return allOptions.filter(o => o.displayLabel.toLowerCase().includes(query))\n  }\n\n  private _getSelectedLabel(): string {\n    if (!this.value) return ''\n    const option = this._getOptions().find(o => o.value === this.value)\n    return option?.displayLabel ?? ''\n  }\n\n  private _toggleOpen(): void {\n    if (this.disabled) return\n    this._open = !this._open\n    if (this._open) {\n      this._highlightedIndex = -1\n      this._searchQuery = ''\n    }\n  }\n\n  private _close(): void {\n    this._open = false\n    this._highlightedIndex = -1\n    this._searchQuery = ''\n  }\n\n  private _selectValue(value: string): void {\n    this.value = value\n    this._close()\n    this.dispatchEvent(new CustomEvent('mellow-change', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  private _handleOptionClick = (e: Event): void => {\n    if (!this._open) return\n    const target = (e.target as Element).closest('mellow-option') as MellowOption | null\n    if (!target || target.disabled) return\n    this._selectValue(target.value)\n  }\n\n  private _handleSearchInput = (e: Event): void => {\n    const input = e.target as HTMLInputElement\n    this._searchQuery = input.value\n    this._highlightedIndex = -1\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (this.disabled) return\n\n    if (e.key === 'Escape' && this._open) {\n      e.preventDefault()\n      this._close()\n      return\n    }\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      if (e.key === ' ' && this.searchable && this._open) return\n      e.preventDefault()\n      if (!this._open) {\n        this._toggleOpen()\n        return\n      }\n      if (this._highlightedIndex >= 0) {\n        const filtered = this._getFilteredOptions()\n        const enabled = filtered.filter(o => !o.disabled)\n        if (enabled[this._highlightedIndex]) {\n          this._selectValue(enabled[this._highlightedIndex].value)\n        }\n      }\n      return\n    }\n\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      if (!this._open) {\n        this._toggleOpen()\n        return\n      }\n      const filtered = this._getFilteredOptions()\n      const enabled = filtered.filter(o => !o.disabled)\n      if (enabled.length === 0) return\n\n      if (e.key === 'ArrowDown') {\n        this._highlightedIndex = (this._highlightedIndex + 1) % enabled.length\n      } else {\n        this._highlightedIndex = this._highlightedIndex <= 0\n          ? enabled.length - 1\n          : this._highlightedIndex - 1\n      }\n    }\n  }\n\n  override render() {\n    const selectedLabel = this._getSelectedLabel()\n    const filteredOptions = this._getFilteredOptions()\n    const enabledFiltered = filteredOptions.filter(o => !o.disabled)\n\n    const triggerClasses = {\n      'trigger': true,\n      'open': this._open,\n    }\n\n    const chevronClasses = {\n      'chevron': true,\n      'open': this._open,\n    }\n\n    const displayClasses = {\n      'display-text': true,\n      'placeholder': !selectedLabel,\n    }\n\n    return html`\n      <div class=\"wrapper\">\n        ${this.label\n          ? html`<label class=\"label\" id=\"select-label\">${this.label}</label>`\n          : nothing}\n        <div\n          class=${classMap(triggerClasses)}\n          role=\"combobox\"\n          aria-expanded=${this._open ? 'true' : 'false'}\n          aria-haspopup=\"listbox\"\n          aria-labelledby=${this.label ? 'select-label' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @click=${this._toggleOpen}\n        >\n          <span class=${classMap(displayClasses)}>\n            ${selectedLabel || this.placeholder || '\\u00A0'}\n          </span>\n          <span class=${classMap(chevronClasses)}>${chevronIcon}</span>\n        </div>\n        ${this._open ? html`\n          <div class=\"dropdown\" role=\"listbox\">\n            ${this.searchable ? html`\n              <div class=\"search-row\">\n                <span class=\"search-icon\">${searchIcon}</span>\n                <input\n                  class=\"search-input\"\n                  type=\"text\"\n                  placeholder=\"Search\"\n                  .value=${this._searchQuery}\n                  @input=${this._handleSearchInput}\n                  @click=${(e: Event) => e.stopPropagation()}\n                />\n                <div class=\"search-divider\"></div>\n              </div>\n            ` : nothing}\n            <div class=\"options-list\">\n              ${filteredOptions.map(option => {\n                const enabledIndex = enabledFiltered.indexOf(option)\n                const optionClasses = {\n                  'option-item': true,\n                  'selected': option.value === this.value,\n                  'highlighted': enabledIndex === this._highlightedIndex,\n                  'disabled': option.disabled,\n                }\n                return html`\n                  <div\n                    class=${classMap(optionClasses)}\n                    role=\"option\"\n                    aria-selected=${option.value === this.value ? 'true' : 'false'}\n                    aria-disabled=${option.disabled ? 'true' : 'false'}\n                    @click=${() => {\n                      if (!option.disabled) this._selectValue(option.value)\n                    }}\n                  >\n                    <span class=\"option-text\">${option.displayLabel}</span>\n                  </div>\n                `\n              })}\n            </div>\n          </div>\n        ` : nothing}\n        ${this.error\n          ? html`<div class=\"helper\" id=\"helper-text\" role=\"alert\">${this.error}</div>`\n          : nothing}\n      </div>\n      <div class=\"hidden-slot\"><slot></slot></div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-select': MellowSelect\n  }\n}\n"],"names":["chevronIcon","svg","searchIcon","MellowSelect","LitElement","target","input","enabled","o","allOptions","query","value","selectedLabel","filteredOptions","enabledFiltered","triggerClasses","chevronClasses","displayClasses","html","nothing","classMap","e","option","enabledIndex","optionClasses","selectStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export declare const selectStyles: import("lit").CSSResult;
+//# sourceMappingURL=select.styles.d.ts.map

package/dist/components/select/select.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA2PxB,CAAA"}