@mellow.io/ds 0.1.0

package/dist/components/checkbox/checkbox.styles.js

@@ -0,0 +1,118 @@
+import { css as e } from "lit";
+const t = 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) .box {
+    outline: 2px solid var(--mellow-colors-primary-mellow-orange, #ff6f23);
+    outline-offset: 2px;
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+    opacity: 0.48;
+  }
+
+  /* Visual checkbox box */
+  .box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border-radius: 4px;
+    background: var(--mellow-bg-fill-control-default, rgba(193, 148, 118, 0.24));
+    overflow: clip;
+    transition: background-color 150ms ease;
+  }
+
+  :host(:hover:not([disabled])) .box {
+    background: var(--mellow-bg-fill-control-default-hovered, #e4d3c4);
+  }
+
+  .box.checked,
+  .box.indeterminate {
+    background: var(--mellow-bg-fill-control-active, #ff6f23);
+  }
+
+  :host(:hover:not([disabled])) .box.checked,
+  :host(:hover:not([disabled])) .box.indeterminate {
+    background: var(--mellow-bg-fill-control-active-hovered, #f04706);
+  }
+
+  /* Size: lg (24px) — default */
+  .box {
+    width: 24px;
+    height: 24px;
+  }
+
+  :host([size='md']) .box {
+    width: 20px;
+    height: 20px;
+  }
+
+  :host([size='sm']) .box {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+  }
+
+  /* Icons inside the box */
+  .check-icon,
+  .indeterminate-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+  }
+
+  .check-icon svg,
+  .indeterminate-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  :host([size='md']) .check-icon svg,
+  :host([size='md']) .indeterminate-icon svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  :host([size='sm']) .check-icon svg,
+  :host([size='sm']) .indeterminate-icon svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* 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);
+  }
+`;
+export {
+  t as checkboxStyles
+};
+//# sourceMappingURL=checkbox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.js","sources":["../../../src/components/checkbox/checkbox.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const checkboxStyles = 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) .box {\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 checkbox box */\n  .box {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border-radius: 4px;\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])) .box {\n    background: var(--mellow-bg-fill-control-default-hovered, #e4d3c4);\n  }\n\n  .box.checked,\n  .box.indeterminate {\n    background: var(--mellow-bg-fill-control-active, #ff6f23);\n  }\n\n  :host(:hover:not([disabled])) .box.checked,\n  :host(:hover:not([disabled])) .box.indeterminate {\n    background: var(--mellow-bg-fill-control-active-hovered, #f04706);\n  }\n\n  /* Size: lg (24px) — default */\n  .box {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([size='md']) .box {\n    width: 20px;\n    height: 20px;\n  }\n\n  :host([size='sm']) .box {\n    width: 16px;\n    height: 16px;\n    border-radius: 2px;\n  }\n\n  /* Icons inside the box */\n  .check-icon,\n  .indeterminate-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n  }\n\n  .check-icon svg,\n  .indeterminate-icon svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  :host([size='md']) .check-icon svg,\n  :host([size='md']) .indeterminate-icon svg {\n    width: 14px;\n    height: 14px;\n  }\n\n  :host([size='sm']) .check-icon svg,\n  :host([size='sm']) .indeterminate-icon svg {\n    width: 12px;\n    height: 12px;\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"],"names":["checkboxStyles","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;"}

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

@@ -0,0 +1,3 @@
+export { MellowCheckbox } from './checkbox.js';
+export type { CheckboxSize } from './checkbox.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+export type DialogSize = 'sm' | 'md' | 'lg' | 'full';
+export declare class MellowDialog extends LitElement {
+    static styles: import("lit").CSSResult[];
+    open: boolean;
+    size: DialogSize;
+    dismissible: boolean;
+    private _dialog;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _handleKeydown;
+    private _handleDialogClose;
+    private _handleDismissClick;
+    private _close;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-dialog': MellowDialog;
+    }
+}
+//# sourceMappingURL=dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAI3C,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;AAQpD,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAAiB;IAGvC,IAAI,UAAQ;IAGZ,IAAI,EAAE,UAAU,CAAO;IAGvB,WAAW,UAAO;IAGlB,OAAO,CAAC,OAAO,CAAoB;IAE1B,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAc/D,OAAO,CAAC,cAAc,CAOrB;IAED,OAAO,CAAC,kBAAkB,CAIzB;IAED,OAAO,CAAC,mBAAmB,CAE1B;IAED,OAAO,CAAC,MAAM;IAQL,MAAM;CAuBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAA;KAC9B;CACF"}

package/dist/components/dialog/dialog.js

@@ -0,0 +1,74 @@
+import { svg as p, LitElement as c, html as h } from "lit";
+import { property as n, query as m, customElement as f } from "lit/decorators.js";
+import { dialogStyles as u } from "./dialog.styles.js";
+var _ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, t = (e, l, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? g(l, r) : l, a = e.length - 1, d; a >= 0; a--)
+    (d = e[a]) && (s = (i ? d(l, r, s) : d(s)) || s);
+  return i && s && _(l, r, s), s;
+};
+const v = p`
+  <svg viewBox="0 0 20 20" fill="none" width="20" height="20">
+    <path d="M6 6l8 8M14 6l-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+  </svg>
+`;
+let o = class extends c {
+  constructor() {
+    super(...arguments), this.open = !1, this.size = "md", this.dismissible = !0, this._handleKeydown = (e) => {
+      e.key === "Escape" && (e.preventDefault(), this.dismissible && this._close());
+    }, this._handleDialogClose = () => {
+      this.open && this._close();
+    }, this._handleDismissClick = () => {
+      this._close();
+    };
+  }
+  updated(e) {
+    e.has("open") && (this.open ? this._dialog.open || this._dialog.showModal() : this._dialog.open && this._dialog.close());
+  }
+  _close() {
+    this.open = !1, this.dispatchEvent(new CustomEvent("mellow-close", {
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return h`
+      <dialog
+        aria-modal="true"
+        role="dialog"
+        @keydown=${this._handleKeydown}
+        @close=${this._handleDialogClose}
+      >
+        <div class="header">
+          <slot name="header"></slot>
+          ${this.dismissible ? h`<button class="close-btn" aria-label="Close" @click=${this._handleDismissClick}>${v}</button>` : ""}
+        </div>
+        <div class="body">
+          <slot></slot>
+        </div>
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>
+      </dialog>
+    `;
+  }
+};
+o.styles = [u];
+t([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+t([
+  n({ reflect: !0 })
+], o.prototype, "size", 2);
+t([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "dismissible", 2);
+t([
+  m("dialog")
+], o.prototype, "_dialog", 2);
+o = t([
+  f("mellow-dialog")
+], o);
+export {
+  o as MellowDialog
+};
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.ts"],"sourcesContent":["import { LitElement, html, svg } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { dialogStyles } from './dialog.styles.js'\n\nexport type DialogSize = 'sm' | 'md' | 'lg' | 'full'\n\nconst closeIcon = svg`\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" width=\"20\" height=\"20\">\n    <path d=\"M6 6l8 8M14 6l-8 8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"/>\n  </svg>\n`\n\n@customElement('mellow-dialog')\nexport class MellowDialog extends LitElement {\n  static override styles = [dialogStyles]\n\n  @property({ type: Boolean, reflect: true })\n  open = false\n\n  @property({ reflect: true })\n  size: DialogSize = 'md'\n\n  @property({ type: Boolean, reflect: true })\n  dismissible = true\n\n  @query('dialog')\n  private _dialog!: HTMLDialogElement\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        if (!this._dialog.open) {\n          this._dialog.showModal()\n        }\n      } else {\n        if (this._dialog.open) {\n          this._dialog.close()\n        }\n      }\n    }\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      if (this.dismissible) {\n        this._close()\n      }\n    }\n  }\n\n  private _handleDialogClose = (): void => {\n    if (this.open) {\n      this._close()\n    }\n  }\n\n  private _handleDismissClick = (): void => {\n    this._close()\n  }\n\n  private _close(): void {\n    this.open = false\n    this.dispatchEvent(new CustomEvent('mellow-close', {\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  override render() {\n    return html`\n      <dialog\n        aria-modal=\"true\"\n        role=\"dialog\"\n        @keydown=${this._handleKeydown}\n        @close=${this._handleDialogClose}\n      >\n        <div class=\"header\">\n          <slot name=\"header\"></slot>\n          ${this.dismissible\n            ? html`<button class=\"close-btn\" aria-label=\"Close\" @click=${this._handleDismissClick}>${closeIcon}</button>`\n            : ''}\n        </div>\n        <div class=\"body\">\n          <slot></slot>\n        </div>\n        <div class=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </dialog>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-dialog': MellowDialog\n  }\n}\n"],"names":["closeIcon","svg","MellowDialog","LitElement","changedProperties","html","dialogStyles","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;AAMA,MAAMA,IAAYC;AAAA;AAAA;AAAA;AAAA;AAOX,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,OAAO,IAGP,KAAA,OAAmB,MAGnB,KAAA,cAAc,IAmBd,KAAQ,iBAAiB,CAAC,MAA2B;AACnD,MAAI,EAAE,QAAQ,aACZ,EAAE,eAAA,GACE,KAAK,eACP,KAAK,OAAA;AAAA,IAGX,GAEA,KAAQ,qBAAqB,MAAY;AACvC,MAAI,KAAK,QACP,KAAK,OAAA;AAAA,IAET,GAEA,KAAQ,sBAAsB,MAAY;AACxC,WAAK,OAAA;AAAA,IACP;AAAA,EAAA;AAAA,EA/BS,QAAQC,GAA+C;AAC9D,IAAIA,EAAkB,IAAI,MAAM,MAC1B,KAAK,OACF,KAAK,QAAQ,QAChB,KAAK,QAAQ,UAAA,IAGX,KAAK,QAAQ,QACf,KAAK,QAAQ,MAAA;AAAA,EAIrB;AAAA,EAqBQ,SAAe;AACrB,SAAK,OAAO,IACZ,KAAK,cAAc,IAAI,YAAY,gBAAgB;AAAA,MACjD,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA,mBAIQ,KAAK,cAAc;AAAA,iBACrB,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA,YAI5B,KAAK,cACHA,wDAA2D,KAAK,mBAAmB,IAAIL,CAAS,cAChG,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUd;AACF;AA/EaE,EACK,SAAS,CAACI,CAAY;AAGtCC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAH/BN,EAIX,WAAA,QAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GANhBN,EAOX,WAAA,QAAA,CAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAT/BN,EAUX,WAAA,eAAA,CAAA;AAGQK,EAAA;AAAA,EADPE,EAAM,QAAQ;AAAA,GAZJP,EAaH,WAAA,WAAA,CAAA;AAbGA,IAANK,EAAA;AAAA,EADNG,EAAc,eAAe;AAAA,GACjBR,CAAA;"}

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

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

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

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

package/dist/components/dialog/dialog.styles.js

@@ -0,0 +1,81 @@
+import { css as o } from "lit";
+const d = o`
+  :host {
+    display: contents;
+  }
+
+  dialog {
+    padding: 0;
+    border: none;
+    border-radius: 12px;
+    background: white;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+    max-height: 85vh;
+    overflow: auto;
+    font-family: system-ui, sans-serif;
+  }
+
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  /* ---- Sizes ---- */
+
+  :host([size='sm']) dialog {
+    max-width: 400px;
+  }
+
+  dialog,
+  :host([size='md']) dialog {
+    max-width: 560px;
+  }
+
+  :host([size='lg']) dialog {
+    max-width: 720px;
+  }
+
+  :host([size='full']) dialog {
+    max-width: 90vw;
+    max-height: 90vh;
+  }
+
+  /* ---- Sections ---- */
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    border-bottom: 1px solid #f5eddf;
+    font-weight: 500;
+    font-size: 18px;
+  }
+
+  .body {
+    padding: 24px;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px 24px;
+    border-top: 1px solid #f5eddf;
+  }
+
+  .close-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    color: #767676;
+  }
+
+  .close-btn:hover {
+    color: #232222;
+  }
+`;
+export {
+  d as dialogStyles
+};
+//# sourceMappingURL=dialog.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.styles.js","sources":["../../../src/components/dialog/dialog.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const dialogStyles = css`\n  :host {\n    display: contents;\n  }\n\n  dialog {\n    padding: 0;\n    border: none;\n    border-radius: 12px;\n    background: white;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n    max-height: 85vh;\n    overflow: auto;\n    font-family: system-ui, sans-serif;\n  }\n\n  dialog::backdrop {\n    background: rgba(0, 0, 0, 0.4);\n  }\n\n  /* ---- Sizes ---- */\n\n  :host([size='sm']) dialog {\n    max-width: 400px;\n  }\n\n  dialog,\n  :host([size='md']) dialog {\n    max-width: 560px;\n  }\n\n  :host([size='lg']) dialog {\n    max-width: 720px;\n  }\n\n  :host([size='full']) dialog {\n    max-width: 90vw;\n    max-height: 90vh;\n  }\n\n  /* ---- Sections ---- */\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    border-bottom: 1px solid #f5eddf;\n    font-weight: 500;\n    font-size: 18px;\n  }\n\n  .body {\n    padding: 24px;\n  }\n\n  .footer {\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    padding: 16px 24px;\n    border-top: 1px solid #f5eddf;\n  }\n\n  .close-btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 4px;\n    color: #767676;\n  }\n\n  .close-btn:hover {\n    color: #232222;\n  }\n`\n"],"names":["dialogStyles","css"],"mappings":";AAEO,MAAMA,IAAeC;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/dialog/index.d.ts

@@ -0,0 +1,3 @@
+export { MellowDialog } from './dialog.js';
+export type { DialogSize } from './dialog.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
+export declare class MellowDivider extends LitElement {
+    static styles: import("lit").CSSResult[];
+    orientation: DividerOrientation;
+    spacing: DividerSpacing;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-divider': MellowDivider;
+    }
+}
+//# sourceMappingURL=divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/components/divider/divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAItC,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAA;AAC1D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAExD,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAAkB;IAGxC,WAAW,EAAE,kBAAkB,CAAe;IAG9C,OAAO,EAAE,cAAc,CAAS;IAEvB,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

package/dist/components/divider/divider.js

@@ -0,0 +1,36 @@
+import { LitElement as m, html as v } from "lit";
+import { property as a, customElement as c } from "lit/decorators.js";
+import { dividerStyles as f } from "./divider.styles.js";
+var d = Object.defineProperty, u = Object.getOwnPropertyDescriptor, l = (p, t, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? u(t, i) : t, n = p.length - 1, s; n >= 0; n--)
+    (s = p[n]) && (e = (o ? s(t, i, e) : s(e)) || e);
+  return o && e && d(t, i, e), e;
+};
+let r = class extends m {
+  constructor() {
+    super(...arguments), this.orientation = "horizontal", this.spacing = "none";
+  }
+  render() {
+    return v`
+      <div
+        class="divider"
+        role="separator"
+        aria-orientation=${this.orientation}
+      ></div>
+    `;
+  }
+};
+r.styles = [f];
+l([
+  a({ reflect: !0 })
+], r.prototype, "orientation", 2);
+l([
+  a({ reflect: !0 })
+], r.prototype, "spacing", 2);
+r = l([
+  c("mellow-divider")
+], r);
+export {
+  r as MellowDivider
+};
+//# sourceMappingURL=divider.js.map

package/dist/components/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sources":["../../../src/components/divider/divider.ts"],"sourcesContent":["import { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { dividerStyles } from './divider.styles.js'\n\nexport type DividerOrientation = 'horizontal' | 'vertical'\nexport type DividerSpacing = 'none' | 'sm' | 'md' | 'lg'\n\n@customElement('mellow-divider')\nexport class MellowDivider extends LitElement {\n  static override styles = [dividerStyles]\n\n  @property({ reflect: true })\n  orientation: DividerOrientation = 'horizontal'\n\n  @property({ reflect: true })\n  spacing: DividerSpacing = 'none'\n\n  override render() {\n    return html`\n      <div\n        class=\"divider\"\n        role=\"separator\"\n        aria-orientation=${this.orientation}\n      ></div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-divider': MellowDivider\n  }\n}\n"],"names":["MellowDivider","LitElement","html","dividerStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAQO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,cAAkC,cAGlC,KAAA,UAA0B;AAAA,EAAA;AAAA,EAEjB,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA,2BAIgB,KAAK,WAAW;AAAA;AAAA;AAAA,EAGzC;AACF;AAlBaF,EACK,SAAS,CAACG,CAAa;AAGvCC,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAHhBL,EAIX,WAAA,eAAA,CAAA;AAGAI,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GANhBL,EAOX,WAAA,WAAA,CAAA;AAPWA,IAANI,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBN,CAAA;"}

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

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

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

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

package/dist/components/divider/divider.styles.js

@@ -0,0 +1,64 @@
+import { css as i } from "lit";
+const r = i`
+  :host {
+    display: block;
+  }
+
+  :host([orientation='vertical']) {
+    display: inline-block;
+    height: 100%;
+    width: auto;
+  }
+
+  .divider {
+    background: var(--mellow-border-tertiary, #f5eddf);
+  }
+
+  /* ---- Orientation ---- */
+
+  :host(:not([orientation='vertical'])) .divider {
+    height: 1px;
+    width: 100%;
+  }
+
+  :host([orientation='vertical']) .divider {
+    width: 1px;
+    height: 100%;
+  }
+
+  /* ---- Spacing ---- */
+
+  :host([spacing='sm']:not([orientation='vertical'])) .divider {
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+
+  :host([spacing='md']:not([orientation='vertical'])) .divider {
+    margin-top: 16px;
+    margin-bottom: 16px;
+  }
+
+  :host([spacing='lg']:not([orientation='vertical'])) .divider {
+    margin-top: 24px;
+    margin-bottom: 24px;
+  }
+
+  :host([spacing='sm'][orientation='vertical']) .divider {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+
+  :host([spacing='md'][orientation='vertical']) .divider {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+
+  :host([spacing='lg'][orientation='vertical']) .divider {
+    margin-left: 24px;
+    margin-right: 24px;
+  }
+`;
+export {
+  r as dividerStyles
+};
+//# sourceMappingURL=divider.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.styles.js","sources":["../../../src/components/divider/divider.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const dividerStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([orientation='vertical']) {\n    display: inline-block;\n    height: 100%;\n    width: auto;\n  }\n\n  .divider {\n    background: var(--mellow-border-tertiary, #f5eddf);\n  }\n\n  /* ---- Orientation ---- */\n\n  :host(:not([orientation='vertical'])) .divider {\n    height: 1px;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .divider {\n    width: 1px;\n    height: 100%;\n  }\n\n  /* ---- Spacing ---- */\n\n  :host([spacing='sm']:not([orientation='vertical'])) .divider {\n    margin-top: 8px;\n    margin-bottom: 8px;\n  }\n\n  :host([spacing='md']:not([orientation='vertical'])) .divider {\n    margin-top: 16px;\n    margin-bottom: 16px;\n  }\n\n  :host([spacing='lg']:not([orientation='vertical'])) .divider {\n    margin-top: 24px;\n    margin-bottom: 24px;\n  }\n\n  :host([spacing='sm'][orientation='vertical']) .divider {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n\n  :host([spacing='md'][orientation='vertical']) .divider {\n    margin-left: 16px;\n    margin-right: 16px;\n  }\n\n  :host([spacing='lg'][orientation='vertical']) .divider {\n    margin-left: 24px;\n    margin-right: 24px;\n  }\n`\n"],"names":["dividerStyles","css"],"mappings":";AAEO,MAAMA,IAAgBC;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/divider/index.d.ts

@@ -0,0 +1,3 @@
+export { MellowDivider } from './divider.js';
+export type { DividerOrientation, DividerSpacing } from './divider.js';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export declare class MellowDropdownItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    disabled: boolean;
+    selected: boolean;
+    highlighted: boolean;
+    size: 'xl' | 'xs';
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-dropdown-item': MellowDropdownItem;
+    }
+}
+//# sourceMappingURL=dropdown-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAI3C,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,0BAgErB;IAGD,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,WAAW,UAAQ;IAGnB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAO;IAEf,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAA;KAC3C;CACF"}

package/dist/components/dropdown/dropdown-item.js

@@ -0,0 +1,113 @@
+import { css as m, LitElement as d, html as h } from "lit";
+import { property as o, customElement as c } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, l = (r, s, a, i) => {
+  for (var e = i > 1 ? void 0 : i ? u(s, a) : s, p = r.length - 1, n; p >= 0; p--)
+    (n = r[p]) && (e = (i ? n(s, a, e) : n(e)) || e);
+  return i && e && g(s, a, e), e;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.selected = !1, this.highlighted = !1, this.size = "xl";
+  }
+  render() {
+    const r = {
+      item: !0,
+      selected: this.selected,
+      highlighted: this.highlighted
+    };
+    return h`
+      <div class=${f(r)} role="menuitem" aria-disabled=${this.disabled ? "true" : "false"}>
+        <slot name="prefix"></slot>
+        <div class="text">
+          <slot></slot>
+        </div>
+        <slot name="suffix"></slot>
+      </div>
+    `;
+  }
+};
+t.styles = m`
+    :host {
+      display: block;
+      flex-shrink: 0;
+      width: 100%;
+    }
+
+    .item {
+      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);
+      cursor: pointer;
+      transition: background-color 100ms ease;
+
+      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);
+    }
+
+    /* Size XS variant */
+
+    :host([size='xs']) .item {
+      height: auto;
+      padding: 10px 12px;
+      gap: 8px;
+    }
+
+    /* States */
+
+    .item:hover,
+    .item.highlighted {
+      background: var(--mellow-bg-surface-secondary, #faf6f2);
+    }
+
+    .item.selected {
+      background: var(--mellow-bg-surface-brand, #fcf2e8);
+    }
+
+    :host([disabled]) .item {
+      opacity: 0.48;
+      cursor: not-allowed;
+      background: var(--mellow-bg-surface-primary, white);
+    }
+
+    :host([disabled]) .item:hover {
+      background: var(--mellow-bg-surface-primary, white);
+    }
+
+    /* Text slot wrapper */
+
+    .text {
+      flex: 1 0 0;
+      min-width: 0;
+      min-height: 1px;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+    }
+  `;
+l([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+l([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "selected", 2);
+l([
+  o({ type: Boolean })
+], t.prototype, "highlighted", 2);
+l([
+  o({ reflect: !0 })
+], t.prototype, "size", 2);
+t = l([
+  c("mellow-dropdown-item")
+], t);
+export {
+  t as MellowDropdownItem
+};
+//# sourceMappingURL=dropdown-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.js","sources":["../../../src/components/dropdown/dropdown-item.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\n@customElement('mellow-dropdown-item')\nexport class MellowDropdownItem extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n      flex-shrink: 0;\n      width: 100%;\n    }\n\n    .item {\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      cursor: pointer;\n      transition: background-color 100ms ease;\n\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    }\n\n    /* Size XS variant */\n\n    :host([size='xs']) .item {\n      height: auto;\n      padding: 10px 12px;\n      gap: 8px;\n    }\n\n    /* States */\n\n    .item:hover,\n    .item.highlighted {\n      background: var(--mellow-bg-surface-secondary, #faf6f2);\n    }\n\n    .item.selected {\n      background: var(--mellow-bg-surface-brand, #fcf2e8);\n    }\n\n    :host([disabled]) .item {\n      opacity: 0.48;\n      cursor: not-allowed;\n      background: var(--mellow-bg-surface-primary, white);\n    }\n\n    :host([disabled]) .item:hover {\n      background: var(--mellow-bg-surface-primary, white);\n    }\n\n    /* Text slot wrapper */\n\n    .text {\n      flex: 1 0 0;\n      min-width: 0;\n      min-height: 1px;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      justify-content: center;\n    }\n  `\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  @property({ type: Boolean, reflect: true })\n  selected = false\n\n  @property({ type: Boolean })\n  highlighted = false\n\n  @property({ reflect: true })\n  size: 'xl' | 'xs' = 'xl'\n\n  override render() {\n    const classes = {\n      item: true,\n      selected: this.selected,\n      highlighted: this.highlighted,\n    }\n\n    return html`\n      <div class=${classMap(classes)} role=\"menuitem\" aria-disabled=${this.disabled ? 'true' : 'false'}>\n        <slot name=\"prefix\"></slot>\n        <div class=\"text\">\n          <slot></slot>\n        </div>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-dropdown-item': MellowDropdownItem\n  }\n}\n"],"names":["MellowDropdownItem","LitElement","classes","html","classMap","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAKO,IAAMA,IAAN,cAAiCC,EAAW;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAoEL,KAAA,WAAW,IAGX,KAAA,WAAW,IAGX,KAAA,cAAc,IAGd,KAAA,OAAoB;AAAA,EAAA;AAAA,EAEX,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,MAAM;AAAA,MACN,UAAU,KAAK;AAAA,MACf,aAAa,KAAK;AAAA,IAAA;AAGpB,WAAOC;AAAA,mBACQC,EAASF,CAAO,CAAC,kCAAkC,KAAK,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpG;AACF;AAhGaF,EACK,SAASK;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;AAmEzBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnE/BP,EAoEX,WAAA,YAAA,CAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtE/BP,EAuEX,WAAA,YAAA,CAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzEhBP,EA0EX,WAAA,eAAA,CAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA5EhBP,EA6EX,WAAA,QAAA,CAAA;AA7EWA,IAANM,EAAA;AAAA,EADNE,EAAc,sBAAsB;AAAA,GACxBR,CAAA;"}