@mellow.io/ds 0.1.0

package/dist/components/dropdown/dropdown.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+export type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+export type DropdownSize = 'xl' | 'xs';
+export declare class MellowDropdown extends LitElement {
+    static styles: import("lit").CSSResult[];
+    open: boolean;
+    placement: DropdownPlacement;
+    size: DropdownSize;
+    searchable: boolean;
+    private _searchQuery;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _getItems;
+    private _getEnabledItems;
+    private _toggle;
+    private _close;
+    private _handleTriggerClick;
+    private _handleOutsideClick;
+    private _handleItemClick;
+    private _handleSearchInput;
+    private _handleKeydown;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-dropdown': MellowDropdown;
+    }
+}
+//# sourceMappingURL=dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAA;AAMpD,MAAM,MAAM,iBAAiB,GAAG,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAA;AACvF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,CAAA;AAStC,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAmB;IAGzC,IAAI,UAAQ;IAGZ,SAAS,EAAE,iBAAiB,CAAiB;IAG7C,IAAI,EAAE,YAAY,CAAO;IAGzB,UAAU,UAAQ;IAGlB,OAAO,CAAC,YAAY,CAAK;IAEhB,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,mBAAmB,CAE1B;IAED,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,gBAAgB,CAWvB;IAED,OAAO,CAAC,kBAAkB,CAQzB;IAED,OAAO,CAAC,cAAc,CA0CrB;IAEQ,MAAM;CAiChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAA;KAClC;CACF"}

package/dist/components/dropdown/dropdown.js

@@ -0,0 +1,147 @@
+import { svg as d, LitElement as p, nothing as u, html as h } from "lit";
+import { property as c, state as m, customElement as v } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { dropdownStyles as w } from "./dropdown.styles.js";
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (t, e, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? y(e, r) : e, n = t.length - 1, a; n >= 0; n--)
+    (a = t[n]) && (o = (s ? a(e, r, o) : a(o)) || o);
+  return s && o && _(e, r, o), o;
+};
+const g = d`
+  <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 i = class extends p {
+  constructor() {
+    super(...arguments), this.open = !1, this.placement = "bottom-start", this.size = "xl", this.searchable = !1, this._searchQuery = "", this._handleTriggerClick = () => {
+      this._toggle();
+    }, this._handleItemClick = (t) => {
+      if (!this.open) return;
+      const e = t.target.closest("mellow-dropdown-item");
+      if (!e || e.disabled) return;
+      const r = e.textContent?.trim() ?? "";
+      this._close(), this.dispatchEvent(new CustomEvent("mellow-select", {
+        detail: { value: r },
+        bubbles: !0,
+        composed: !0
+      }));
+    }, this._handleSearchInput = (t) => {
+      const e = t.target;
+      this._searchQuery = e.value, this.dispatchEvent(new CustomEvent("mellow-search", {
+        detail: { query: this._searchQuery },
+        bubbles: !0,
+        composed: !0
+      }));
+    }, this._handleKeydown = (t) => {
+      if (t.key === "Escape" && this.open) {
+        t.preventDefault(), this._close();
+        return;
+      }
+      if (t.key === "ArrowDown" || t.key === "ArrowUp") {
+        if (t.preventDefault(), !this.open) {
+          this.open = !0;
+          return;
+        }
+        const e = this._getEnabledItems();
+        if (e.length === 0) return;
+        const r = e.find(
+          (n) => n.shadowRoot?.querySelector(".item") === n.shadowRoot?.activeElement
+        );
+        let s = r ? e.indexOf(r) : -1;
+        t.key === "ArrowDown" ? s = (s + 1) % e.length : s = s <= 0 ? e.length - 1 : s - 1, e[s]?.shadowRoot?.querySelector(".item")?.focus();
+        return;
+      }
+      if (t.key === "Enter") {
+        if (!this.open) return;
+        const e = this.querySelector("mellow-dropdown-item:focus-within");
+        if (e && !e.disabled) {
+          const r = e.textContent?.trim() ?? "";
+          this._close(), this.dispatchEvent(new CustomEvent("mellow-select", {
+            detail: { value: r },
+            bubbles: !0,
+            composed: !0
+          }));
+        }
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown), this._handleOutsideClick = this._handleOutsideClick.bind(this), document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown), document.removeEventListener("click", this._handleOutsideClick);
+  }
+  _getItems() {
+    return Array.from(this.querySelectorAll("mellow-dropdown-item"));
+  }
+  _getEnabledItems() {
+    return this._getItems().filter((t) => !t.disabled);
+  }
+  _toggle() {
+    this.open = !this.open, this.open || (this._searchQuery = "");
+  }
+  _close() {
+    this.open = !1, this._searchQuery = "";
+  }
+  _handleOutsideClick(t) {
+    if (!this.open) return;
+    t.composedPath().includes(this) || this._close();
+  }
+  render() {
+    const t = {
+      menu: !0,
+      open: this.open,
+      [this.placement]: !0
+    };
+    return h`
+      <div class="trigger" @click=${this._handleTriggerClick}>
+        <slot name="trigger"></slot>
+      </div>
+      <div class=${f(t)} role="menu" @click=${this._handleItemClick}>
+        ${this.searchable ? h`
+          <div class="search-row">
+            <span class="search-icon">${g}</span>
+            <input
+              class="search-input"
+              type="text"
+              placeholder="Search"
+              .value=${this._searchQuery}
+              @input=${this._handleSearchInput}
+              @click=${(e) => e.stopPropagation()}
+            />
+            <div class="search-divider"></div>
+          </div>
+        ` : u}
+        <slot name="action"></slot>
+        <div class="items">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+i.styles = [w];
+l([
+  c({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
+l([
+  c({ reflect: !0 })
+], i.prototype, "placement", 2);
+l([
+  c({ reflect: !0 })
+], i.prototype, "size", 2);
+l([
+  c({ type: Boolean })
+], i.prototype, "searchable", 2);
+l([
+  m()
+], i.prototype, "_searchQuery", 2);
+i = l([
+  v("mellow-dropdown")
+], i);
+export {
+  i as MellowDropdown
+};
+//# sourceMappingURL=dropdown.js.map

package/dist/components/dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sources":["../../../src/components/dropdown/dropdown.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 { dropdownStyles } from './dropdown.styles.js'\nimport type { MellowDropdownItem } from './dropdown-item.js'\n\nexport type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'\nexport type DropdownSize = 'xl' | 'xs'\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-dropdown')\nexport class MellowDropdown extends LitElement {\n  static override styles = [dropdownStyles]\n\n  @property({ type: Boolean, reflect: true })\n  open = false\n\n  @property({ reflect: true })\n  placement: DropdownPlacement = 'bottom-start'\n\n  @property({ reflect: true })\n  size: DropdownSize = 'xl'\n\n  @property({ type: Boolean })\n  searchable = false\n\n  @state()\n  private _searchQuery = ''\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.addEventListener('keydown', this._handleKeydown)\n    this._handleOutsideClick = this._handleOutsideClick.bind(this)\n    document.addEventListener('click', this._handleOutsideClick)\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('keydown', this._handleKeydown)\n    document.removeEventListener('click', this._handleOutsideClick)\n  }\n\n  private _getItems(): MellowDropdownItem[] {\n    return Array.from(this.querySelectorAll('mellow-dropdown-item'))\n  }\n\n  private _getEnabledItems(): MellowDropdownItem[] {\n    return this._getItems().filter(item => !item.disabled)\n  }\n\n  private _toggle(): void {\n    this.open = !this.open\n    if (!this.open) {\n      this._searchQuery = ''\n    }\n  }\n\n  private _close(): void {\n    this.open = false\n    this._searchQuery = ''\n  }\n\n  private _handleTriggerClick = (): void => {\n    this._toggle()\n  }\n\n  private _handleOutsideClick(e: Event): void {\n    if (!this.open) return\n    const path = e.composedPath()\n    if (!path.includes(this)) {\n      this._close()\n    }\n  }\n\n  private _handleItemClick = (e: Event): void => {\n    if (!this.open) return\n    const target = (e.target as Element).closest('mellow-dropdown-item') as MellowDropdownItem | null\n    if (!target || target.disabled) return\n    const value = target.textContent?.trim() ?? ''\n    this._close()\n    this.dispatchEvent(new CustomEvent('mellow-select', {\n      detail: { value },\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  private _handleSearchInput = (e: Event): void => {\n    const input = e.target as HTMLInputElement\n    this._searchQuery = input.value\n    this.dispatchEvent(new CustomEvent('mellow-search', {\n      detail: { query: this._searchQuery },\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.open) {\n      e.preventDefault()\n      this._close()\n      return\n    }\n\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      if (!this.open) {\n        this.open = true\n        return\n      }\n      const enabled = this._getEnabledItems()\n      if (enabled.length === 0) return\n      const focused = enabled.find(item =>\n        item.shadowRoot?.querySelector('.item') === item.shadowRoot?.activeElement\n      )\n      let index = focused ? enabled.indexOf(focused) : -1\n      if (e.key === 'ArrowDown') {\n        index = (index + 1) % enabled.length\n      } else {\n        index = index <= 0 ? enabled.length - 1 : index - 1\n      }\n      const target = enabled[index]?.shadowRoot?.querySelector('.item') as HTMLElement | null\n      target?.focus()\n      return\n    }\n\n    if (e.key === 'Enter') {\n      if (!this.open) return\n      const active = this.querySelector('mellow-dropdown-item:focus-within') as MellowDropdownItem | null\n      if (active && !active.disabled) {\n        const value = active.textContent?.trim() ?? ''\n        this._close()\n        this.dispatchEvent(new CustomEvent('mellow-select', {\n          detail: { value },\n          bubbles: true,\n          composed: true,\n        }))\n      }\n    }\n  }\n\n  override render() {\n    const menuClasses = {\n      'menu': true,\n      'open': this.open,\n      [this.placement]: true,\n    }\n\n    return html`\n      <div class=\"trigger\" @click=${this._handleTriggerClick}>\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div class=${classMap(menuClasses)} role=\"menu\" @click=${this._handleItemClick}>\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        <slot name=\"action\"></slot>\n        <div class=\"items\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-dropdown': MellowDropdown\n  }\n}\n"],"names":["searchIcon","svg","MellowDropdown","LitElement","e","target","value","input","enabled","focused","item","index","active","menuClasses","html","classMap","nothing","dropdownStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

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

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

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

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

package/dist/components/dropdown/dropdown.styles.js

@@ -0,0 +1,139 @@
+import { css as e } from "lit";
+const t = e`
+  :host {
+    display: inline-block;
+    position: relative;
+  }
+
+  .trigger {
+    display: inline-block;
+  }
+
+  /* ── Dropdown menu panel ── */
+
+  .menu {
+    position: absolute;
+    z-index: 20;
+    min-width: 104px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--mellow-space-0, 0px);
+    overflow: clip;
+    padding: 1px;
+
+    border-radius: var(--mellow-radius-2, 8px);
+    border: var(--mellow-stroke-border, 1px) solid var(--mellow-border-secondary, #ead8be);
+    background: var(--mellow-bg-primary, #f8f2e9);
+    box-shadow:
+      0px 10px 15px -3px rgba(35, 34, 34, 0.1),
+      0px 4px 6px 0px rgba(35, 34, 34, 0.05);
+
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 150ms ease;
+  }
+
+  .menu.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* ── Placements ── */
+
+  .menu.bottom-start {
+    top: 100%;
+    left: 0;
+    margin-top: 4px;
+  }
+
+  .menu.bottom-end {
+    top: 100%;
+    right: 0;
+    margin-top: 4px;
+  }
+
+  .menu.top-start {
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 4px;
+  }
+
+  .menu.top-end {
+    bottom: 100%;
+    right: 0;
+    margin-bottom: 4px;
+  }
+
+  /* ── Search area ── */
+
+  .search-row {
+    display: flex;
+    align-items: center;
+    gap: var(--mellow-space-3, 12px);
+    height: 48px;
+    padding: 0 var(--mellow-space-3-5, 14px);
+    background: var(--mellow-bg-surface-primary, white);
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .search-icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    color: var(--mellow-icon-secondary, #8a8686);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .search-input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    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-14, 14px);
+    line-height: var(--mellow-line-height-18, 18px);
+    color: var(--mellow-text-primary, #232222);
+    padding: 0;
+  }
+
+  .search-input::placeholder {
+    color: var(--mellow-text-tertiary, #d1d0d0);
+  }
+
+  .search-divider {
+    position: absolute;
+    bottom: 0;
+    left: 14px;
+    right: 14px;
+    height: 1px;
+    background: var(--mellow-border-secondary, #ead8be);
+  }
+
+  /* ── Action button slot ── */
+
+  .button-cell {
+    background: var(--mellow-bg-surface-primary, white);
+    flex-shrink: 0;
+    width: 100%;
+    padding: 8px;
+  }
+
+  /* ── Items wrapper (scrollable) ── */
+
+  .items {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+  }
+`;
+export {
+  t as dropdownStyles
+};
+//# sourceMappingURL=dropdown.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.styles.js","sources":["../../../src/components/dropdown/dropdown.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const dropdownStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  .trigger {\n    display: inline-block;\n  }\n\n  /* ── Dropdown menu panel ── */\n\n  .menu {\n    position: absolute;\n    z-index: 20;\n    min-width: 104px;\n    display: flex;\n    flex-direction: column;\n    gap: var(--mellow-space-0, 0px);\n    overflow: clip;\n    padding: 1px;\n\n    border-radius: var(--mellow-radius-2, 8px);\n    border: var(--mellow-stroke-border, 1px) solid var(--mellow-border-secondary, #ead8be);\n    background: var(--mellow-bg-primary, #f8f2e9);\n    box-shadow:\n      0px 10px 15px -3px rgba(35, 34, 34, 0.1),\n      0px 4px 6px 0px rgba(35, 34, 34, 0.05);\n\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 150ms ease;\n  }\n\n  .menu.open {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  /* ── Placements ── */\n\n  .menu.bottom-start {\n    top: 100%;\n    left: 0;\n    margin-top: 4px;\n  }\n\n  .menu.bottom-end {\n    top: 100%;\n    right: 0;\n    margin-top: 4px;\n  }\n\n  .menu.top-start {\n    bottom: 100%;\n    left: 0;\n    margin-bottom: 4px;\n  }\n\n  .menu.top-end {\n    bottom: 100%;\n    right: 0;\n    margin-bottom: 4px;\n  }\n\n  /* ── Search area ── */\n\n  .search-row {\n    display: flex;\n    align-items: center;\n    gap: var(--mellow-space-3, 12px);\n    height: 48px;\n    padding: 0 var(--mellow-space-3-5, 14px);\n    background: var(--mellow-bg-surface-primary, white);\n    position: relative;\n    flex-shrink: 0;\n  }\n\n  .search-icon {\n    flex-shrink: 0;\n    width: 20px;\n    height: 20px;\n    color: var(--mellow-icon-secondary, #8a8686);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .search-input {\n    flex: 1;\n    min-width: 0;\n    border: none;\n    outline: none;\n    background: transparent;\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-14, 14px);\n    line-height: var(--mellow-line-height-18, 18px);\n    color: var(--mellow-text-primary, #232222);\n    padding: 0;\n  }\n\n  .search-input::placeholder {\n    color: var(--mellow-text-tertiary, #d1d0d0);\n  }\n\n  .search-divider {\n    position: absolute;\n    bottom: 0;\n    left: 14px;\n    right: 14px;\n    height: 1px;\n    background: var(--mellow-border-secondary, #ead8be);\n  }\n\n  /* ── Action button slot ── */\n\n  .button-cell {\n    background: var(--mellow-bg-surface-primary, white);\n    flex-shrink: 0;\n    width: 100%;\n    padding: 8px;\n  }\n\n  /* ── Items wrapper (scrollable) ── */\n\n  .items {\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    flex: 1;\n    min-height: 0;\n  }\n`\n"],"names":["dropdownStyles","css"],"mappings":";AAEO,MAAMA,IAAiBC;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;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;"}

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

@@ -0,0 +1,4 @@
+export { MellowDropdown } from './dropdown.js';
+export type { DropdownPlacement, DropdownSize } from './dropdown.js';
+export { MellowDropdownItem } from './dropdown-item.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/components/form-field/form-field.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+export declare class MellowFormField extends LitElement {
+    static styles: import("lit").CSSResult[];
+    label: string;
+    error: string;
+    hint: string;
+    required: boolean;
+    private readonly _fieldId;
+    render(): import("lit-html").TemplateResult<1>;
+    get fieldId(): string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-form-field': MellowFormField;
+    }
+}
+//# sourceMappingURL=form-field.d.ts.map

package/dist/components/form-field/form-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../src/components/form-field/form-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAM/C,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAAoB;IAG1C,KAAK,SAAK;IAGV,KAAK,SAAK;IAGV,IAAI,SAAK;IAGT,QAAQ,UAAQ;IAEhB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA0B;IAE1C,MAAM;IA+Bf,IAAI,OAAO,IAAI,MAAM,CAEpB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAA;KACrC;CACF"}

package/dist/components/form-field/form-field.js

@@ -0,0 +1,55 @@
+import { LitElement as f, nothing as p, html as o } from "lit";
+import { property as a, customElement as m } from "lit/decorators.js";
+import { formFieldStyles as c } from "./form-field.styles.js";
+var u = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (i, t, l, n) => {
+  for (var e = n > 1 ? void 0 : n ? v(t, l) : t, d = i.length - 1, h; d >= 0; d--)
+    (h = i[d]) && (e = (n ? h(t, l, e) : h(e)) || e);
+  return n && e && u(t, l, e), e;
+};
+let $ = 0, r = class extends f {
+  constructor() {
+    super(...arguments), this.label = "", this.error = "", this.hint = "", this.required = !1, this._fieldId = `mellow-ff-${$++}`;
+  }
+  render() {
+    const i = !!this.error, t = !!this.hint, l = !!this.label;
+    return o`
+      <div class="wrapper">
+        ${l ? o`
+            <label class="label" for=${this._fieldId}>
+              <slot name="label">${this.label}</slot>${this.required ? o`<span class="required-indicator" aria-hidden="true">*</span>` : p}
+            </label>` : p}
+        <div class="content">
+          <slot></slot>
+        </div>
+        ${i ? o`<div class="error" id=${`${this._fieldId}-error`} role="alert">
+              <slot name="error">${this.error}</slot>
+            </div>` : t ? o`<div class="hint" id=${`${this._fieldId}-hint`}>
+                <slot name="hint">${this.hint}</slot>
+              </div>` : p}
+      </div>
+    `;
+  }
+  get fieldId() {
+    return this._fieldId;
+  }
+};
+r.styles = [c];
+s([
+  a()
+], r.prototype, "label", 2);
+s([
+  a()
+], r.prototype, "error", 2);
+s([
+  a()
+], r.prototype, "hint", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "required", 2);
+r = s([
+  m("mellow-form-field")
+], r);
+export {
+  r as MellowFormField
+};
+//# sourceMappingURL=form-field.js.map

package/dist/components/form-field/form-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.js","sources":["../../../src/components/form-field/form-field.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { formFieldStyles } from './form-field.styles.js'\n\nlet nextId = 0\n\n@customElement('mellow-form-field')\nexport class MellowFormField extends LitElement {\n  static override styles = [formFieldStyles]\n\n  @property()\n  label = ''\n\n  @property()\n  error = ''\n\n  @property()\n  hint = ''\n\n  @property({ type: Boolean, reflect: true })\n  required = false\n\n  private readonly _fieldId = `mellow-ff-${nextId++}`\n\n  override render() {\n    const hasError = Boolean(this.error)\n    const hasHint = Boolean(this.hint)\n    const hasLabel = Boolean(this.label)\n\n    return html`\n      <div class=\"wrapper\">\n        ${hasLabel\n          ? html`\n            <label class=\"label\" for=${this._fieldId}>\n              <slot name=\"label\">${this.label}</slot>${this.required\n                ? html`<span class=\"required-indicator\" aria-hidden=\"true\">*</span>`\n                : nothing}\n            </label>`\n          : nothing}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n        ${hasError\n          ? html`<div class=\"error\" id=${`${this._fieldId}-error`} role=\"alert\">\n              <slot name=\"error\">${this.error}</slot>\n            </div>`\n          : hasHint\n            ? html`<div class=\"hint\" id=${`${this._fieldId}-hint`}>\n                <slot name=\"hint\">${this.hint}</slot>\n              </div>`\n            : nothing}\n      </div>\n    `\n  }\n\n  get fieldId(): string {\n    return this._fieldId\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-form-field': MellowFormField\n  }\n}\n"],"names":["nextId","MellowFormField","LitElement","hasError","hasHint","hasLabel","html","nothing","formFieldStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAIA,IAAIA,IAAS,GAGAC,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,QAAQ,IAGR,KAAA,QAAQ,IAGR,KAAA,OAAO,IAGP,KAAA,WAAW,IAEX,KAAiB,WAAW,aAAaF,GAAQ;AAAA,EAAA;AAAA,EAExC,SAAS;AAChB,UAAMG,IAAW,EAAQ,KAAK,OACxBC,IAAU,EAAQ,KAAK,MACvBC,IAAW,EAAQ,KAAK;AAE9B,WAAOC;AAAA;AAAA,UAEDD,IACEC;AAAA,uCAC2B,KAAK,QAAQ;AAAA,mCACjB,KAAK,KAAK,UAAU,KAAK,WAC1CA,kEACAC,CAAO;AAAA,wBAEbA,CAAO;AAAA;AAAA;AAAA;AAAA,UAITJ,IACEG,0BAA6B,GAAG,KAAK,QAAQ,QAAQ;AAAA,mCAC9B,KAAK,KAAK;AAAA,sBAEjCF,IACEE,yBAA4B,GAAG,KAAK,QAAQ,OAAO;AAAA,oCAC7B,KAAK,IAAI;AAAA,wBAE/BC,CAAO;AAAA;AAAA;AAAA,EAGnB;AAAA,EAEA,IAAI,UAAkB;AACpB,WAAO,KAAK;AAAA,EACd;AACF;AAnDaN,EACK,SAAS,CAACO,CAAe;AAGzCC,EAAA;AAAA,EADCC,EAAA;AAAS,GAHCT,EAIX,WAAA,SAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAA;AAAS,GANCT,EAOX,WAAA,SAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAA;AAAS,GATCT,EAUX,WAAA,QAAA,CAAA;AAGAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BT,EAaX,WAAA,YAAA,CAAA;AAbWA,IAANQ,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBV,CAAA;"}

package/dist/components/form-field/form-field.styles.d.ts

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

package/dist/components/form-field/form-field.styles.d.ts.map

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

package/dist/components/form-field/form-field.styles.js

@@ -0,0 +1,61 @@
+import { css as e } from "lit";
+const o = e`
+  :host {
+    display: block;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mellow-space-1, 4px);
+  }
+
+  /* Label */
+  .label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--mellow-space-1, 4px);
+    font-family: var(--mellow-font-family-body, system-ui, sans-serif);
+    font-weight: var(--mellow-font-weight-medium, 500);
+    font-size: var(--mellow-font-size-14, 14px);
+    line-height: var(--mellow-line-height-18, 18px);
+    color: var(--mellow-text-primary, #232222);
+  }
+
+  :host([error]) .label {
+    color: var(--mellow-text-danger-600, #db4933);
+  }
+
+  .required-indicator {
+    color: var(--mellow-text-danger-600, #db4933);
+    font-weight: var(--mellow-font-weight-regular, 400);
+  }
+
+  /* Hint text */
+  .hint {
+    font-family: var(--mellow-font-family-body, system-ui, sans-serif);
+    font-weight: var(--mellow-font-weight-regular, 400);
+    font-size: var(--mellow-font-size-12, 12px);
+    line-height: var(--mellow-line-height-14, 14px);
+    color: var(--mellow-text-secondary, #767676);
+  }
+
+  /* Error text */
+  .error {
+    font-family: var(--mellow-font-family-body, system-ui, sans-serif);
+    font-weight: var(--mellow-font-weight-regular, 400);
+    font-size: var(--mellow-font-size-12, 12px);
+    line-height: var(--mellow-line-height-14, 14px);
+    color: var(--mellow-text-danger-600, #db4933);
+  }
+
+  /* Content slot */
+  .content {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+export {
+  o as formFieldStyles
+};
+//# sourceMappingURL=form-field.styles.js.map

package/dist/components/form-field/form-field.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.styles.js","sources":["../../../src/components/form-field/form-field.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const formFieldStyles = css`\n  :host {\n    display: block;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mellow-space-1, 4px);\n  }\n\n  /* Label */\n  .label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--mellow-space-1, 4px);\n    font-family: var(--mellow-font-family-body, system-ui, sans-serif);\n    font-weight: var(--mellow-font-weight-medium, 500);\n    font-size: var(--mellow-font-size-14, 14px);\n    line-height: var(--mellow-line-height-18, 18px);\n    color: var(--mellow-text-primary, #232222);\n  }\n\n  :host([error]) .label {\n    color: var(--mellow-text-danger-600, #db4933);\n  }\n\n  .required-indicator {\n    color: var(--mellow-text-danger-600, #db4933);\n    font-weight: var(--mellow-font-weight-regular, 400);\n  }\n\n  /* Hint text */\n  .hint {\n    font-family: var(--mellow-font-family-body, system-ui, sans-serif);\n    font-weight: var(--mellow-font-weight-regular, 400);\n    font-size: var(--mellow-font-size-12, 12px);\n    line-height: var(--mellow-line-height-14, 14px);\n    color: var(--mellow-text-secondary, #767676);\n  }\n\n  /* Error text */\n  .error {\n    font-family: var(--mellow-font-family-body, system-ui, sans-serif);\n    font-weight: var(--mellow-font-weight-regular, 400);\n    font-size: var(--mellow-font-size-12, 12px);\n    line-height: var(--mellow-line-height-14, 14px);\n    color: var(--mellow-text-danger-600, #db4933);\n  }\n\n  /* Content slot */\n  .content {\n    display: flex;\n    flex-direction: column;\n  }\n`\n"],"names":["formFieldStyles","css"],"mappings":";AAEO,MAAMA,IAAkBC;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;"}

package/dist/components/form-field/index.d.ts

@@ -0,0 +1,2 @@
+export { MellowFormField } from './form-field.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/components/grid/grid.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type GridAlign = 'start' | 'center' | 'end' | 'stretch';
+export declare class MellowGrid extends LitElement {
+    static styles: import("lit").CSSResult[];
+    columns: number | string;
+    gap: GridGap;
+    align: GridAlign;
+    private _getTemplateColumns;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-grid': MellowGrid;
+    }
+}
+//# sourceMappingURL=grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAItC,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAC/D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAA;AAE9D,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAe;IAGrC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAI;IAG5B,GAAG,EAAE,OAAO,CAAO;IAGnB,KAAK,EAAE,SAAS,CAAY;IAE5B,OAAO,CAAC,mBAAmB;IAWlB,MAAM;IAQN,OAAO;CAGjB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/grid/grid.js

@@ -0,0 +1,46 @@
+import { LitElement as i, html as c } from "lit";
+import { property as u, customElement as a } from "lit/decorators.js";
+import { gridStyles as f } from "./grid.styles.js";
+var h = Object.defineProperty, g = Object.getOwnPropertyDescriptor, o = (r, s, p, l) => {
+  for (var e = l > 1 ? void 0 : l ? g(s, p) : s, m = r.length - 1, n; m >= 0; m--)
+    (n = r[m]) && (e = (l ? n(s, p, e) : n(e)) || e);
+  return l && e && h(s, p, e), e;
+};
+let t = class extends i {
+  constructor() {
+    super(...arguments), this.columns = 1, this.gap = "md", this.align = "stretch";
+  }
+  _getTemplateColumns() {
+    if (typeof this.columns == "number")
+      return `repeat(${this.columns}, 1fr)`;
+    const r = Number(this.columns);
+    return Number.isNaN(r) ? this.columns : `repeat(${r}, 1fr)`;
+  }
+  render() {
+    return c`
+      <slot
+        style="display:contents"
+      ></slot>
+    `;
+  }
+  updated() {
+    this.style.gridTemplateColumns = this._getTemplateColumns();
+  }
+};
+t.styles = [f];
+o([
+  u()
+], t.prototype, "columns", 2);
+o([
+  u({ reflect: !0 })
+], t.prototype, "gap", 2);
+o([
+  u({ reflect: !0 })
+], t.prototype, "align", 2);
+t = o([
+  a("mellow-grid")
+], t);
+export {
+  t as MellowGrid
+};
+//# sourceMappingURL=grid.js.map

package/dist/components/grid/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sources":["../../../src/components/grid/grid.ts"],"sourcesContent":["import { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { gridStyles } from './grid.styles.js'\n\nexport type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport type GridAlign = 'start' | 'center' | 'end' | 'stretch'\n\n@customElement('mellow-grid')\nexport class MellowGrid extends LitElement {\n  static override styles = [gridStyles]\n\n  @property()\n  columns: number | string = 1\n\n  @property({ reflect: true })\n  gap: GridGap = 'md'\n\n  @property({ reflect: true })\n  align: GridAlign = 'stretch'\n\n  private _getTemplateColumns(): string {\n    if (typeof this.columns === 'number') {\n      return `repeat(${this.columns}, 1fr)`\n    }\n    const parsed = Number(this.columns)\n    if (!Number.isNaN(parsed)) {\n      return `repeat(${parsed}, 1fr)`\n    }\n    return this.columns\n  }\n\n  override render() {\n    return html`\n      <slot\n        style=\"display:contents\"\n      ></slot>\n    `\n  }\n\n  override updated() {\n    this.style.gridTemplateColumns = this._getTemplateColumns()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-grid': MellowGrid\n  }\n}\n"],"names":["MellowGrid","LitElement","parsed","html","gridStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAQO,IAAMA,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,UAA2B,GAG3B,KAAA,MAAe,MAGf,KAAA,QAAmB;AAAA,EAAA;AAAA,EAEX,sBAA8B;AACpC,QAAI,OAAO,KAAK,WAAY;AAC1B,aAAO,UAAU,KAAK,OAAO;AAE/B,UAAMC,IAAS,OAAO,KAAK,OAAO;AAClC,WAAK,OAAO,MAAMA,CAAM,IAGjB,KAAK,UAFH,UAAUA,CAAM;AAAA,EAG3B;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AAAA,EAES,UAAU;AACjB,SAAK,MAAM,sBAAsB,KAAK,oBAAA;AAAA,EACxC;AACF;AAlCaH,EACK,SAAS,CAACI,CAAU;AAGpCC,EAAA;AAAA,EADCC,EAAA;AAAS,GAHCN,EAIX,WAAA,WAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GANhBN,EAOX,WAAA,OAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAThBN,EAUX,WAAA,SAAA,CAAA;AAVWA,IAANK,EAAA;AAAA,EADNE,EAAc,aAAa;AAAA,GACfP,CAAA;"}

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

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

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

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