@mellow.io/ds 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.js","sources":["../../../src/components/input/input.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const inputStyles = css`\n  :host {\n    display: block;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mellow-space-2, 8px);\n  }\n\n  /* Label */\n  .label {\n    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\\\'l', 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-secondary, #8a8686);\n  }\n\n  :host([error]) .label {\n    color: var(--mellow-text-danger-600, #db4933);\n  }\n\n  /* Input + Helper wrapper */\n  .input-helper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mellow-space-1, 4px);\n  }\n\n  /* Input container */\n  .input-container {\n    display: flex;\n    align-items: center;\n    border-radius: var(--mellow-radius-2, 8px);\n    border: var(--mellow-stroke-border, 1px) solid var(--mellow-border-input, white);\n    background: var(--mellow-bg-surface-primary, white);\n    transition: border-color 150ms ease;\n  }\n\n  /* ---- Size: sm (32px) ---- */\n  .input-container {\n    height: 32px;\n    padding: 1px var(--mellow-space-2-5, 11px);\n    gap: var(--mellow-space-2, 8px);\n  }\n\n  :host([size='sm']) .input-container {\n    height: 32px;\n    padding: 1px var(--mellow-space-2-5, 11px);\n    gap: var(--mellow-space-2, 8px);\n  }\n\n  :host([size='sm']) input {\n    font-size: var(--mellow-font-size-14, 14px);\n    line-height: var(--mellow-line-height-18, 18px);\n  }\n\n  :host([size='sm']) ::slotted([slot='icon-start']) {\n    width: 16px;\n    height: 16px;\n  }\n\n  /* ---- Size: md (42px) ---- */\n  :host([size='md']) .input-container {\n    height: 42px;\n    padding: 1px var(--mellow-space-3, 13px);\n    gap: var(--mellow-space-2-5, 10px);\n  }\n\n  :host([size='md']) input {\n    font-size: var(--mellow-font-size-16, 16px);\n    line-height: var(--mellow-line-height-22, 22px);\n  }\n\n  :host([size='md']) ::slotted([slot='icon-start']) {\n    width: 20px;\n    height: 20px;\n  }\n\n  /* ---- Size: xl (52px) ---- */\n  :host([size='xl']) .input-container {\n    height: 52px;\n    padding: 1px var(--mellow-space-3-5, 15px);\n    gap: var(--mellow-space-3, 12px);\n  }\n\n  :host([size='xl']) input {\n    font-size: var(--mellow-font-size-16, 16px);\n    line-height: var(--mellow-line-height-22, 22px);\n  }\n\n  :host([size='xl']) ::slotted([slot='icon-start']) {\n    width: 24px;\n    height: 24px;\n  }\n\n  /* ---- State: hover ---- */\n  .input-container:hover {\n    border-color: var(--mellow-border-secondary, #ead8be);\n  }\n\n  /* ---- State: focused ---- */\n  .input-container.focused {\n    border-color: var(--mellow-border-brand, #ff6f23);\n  }\n\n  /* ---- State: error ---- */\n  :host([error]) .input-container {\n    border-color: var(--mellow-border-danger, #db4933);\n    background: var(--mellow-bg-surface-danger, rgba(246, 132, 115, 0.16));\n  }\n\n  /* ---- State: disabled ---- */\n  :host([disabled]) .input-container {\n    border-color: var(--mellow-border-tertiary, #f5eddf);\n    background: var(--mellow-bg-surface-tertiary, #f5eddf);\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) .input-container:hover {\n    border-color: var(--mellow-border-tertiary, #f5eddf);\n  }\n\n  /* Native input */\n  input {\n    flex: 1 0 0;\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  input::placeholder {\n    color: var(--mellow-text-tertiary, #d1d0d0);\n  }\n\n  :host([error]) input {\n    color: var(--mellow-text-danger-600, #db4933);\n  }\n\n  :host([error]) input::placeholder {\n    color: var(--mellow-text-danger-300, #fbb1a6);\n  }\n\n  :host([disabled]) input {\n    color: var(--mellow-text-secondary, #8a8686);\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) input::placeholder {\n    color: var(--mellow-text-secondary, #8a8686);\n  }\n\n  /* Helper / Error text */\n  .helper {\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-12, 12px);\n    line-height: var(--mellow-line-height-14, 14px);\n    color: var(--mellow-text-secondary, #8a8686);\n  }\n\n  :host([error]) .helper {\n    color: var(--mellow-text-danger-600, #db4933);\n  }\n\n  /* Icon slots */\n  ::slotted([slot='icon-start']) {\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n  }\n\n  ::slotted([slot='icon-end']) {\n    flex-shrink: 0;\n    width: 24px;\n    height: 24px;\n  }\n\n  /* Clear button */\n  .clear-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 16px;\n    height: 16px;\n    flex-shrink: 0;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    padding: 0;\n    color: var(--mellow-text-secondary, #8a8686);\n  }\n\n  .clear-btn:hover {\n    color: var(--mellow-text-primary, #232222);\n  }\n`\n"],"names":["inputStyles","css"],"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/link/index.d.ts

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

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

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

package/dist/components/link/link.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export type LinkVariant = 'default' | 'subtle';
+export declare class MellowLink extends LitElement {
+    static styles: import("lit").CSSResult[];
+    href: string;
+    target: string;
+    variant: LinkVariant;
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-link': MellowLink;
+    }
+}
+//# sourceMappingURL=link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAA;AAIpD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAA;AAQ9C,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAe;IAGrC,IAAI,SAAK;IAGT,MAAM,SAAK;IAGX,OAAO,EAAE,WAAW,CAAY;IAGhC,QAAQ,UAAQ;IAEP,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/link/link.js

@@ -0,0 +1,53 @@
+import { svg as d, LitElement as f, nothing as h, html as c } from "lit";
+import { property as n, customElement as u } from "lit/decorators.js";
+import { linkStyles as v } from "./link.styles.js";
+var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, s = (o, r, i, l) => {
+  for (var e = l > 1 ? void 0 : l ? g(r, i) : r, a = o.length - 1, p; a >= 0; a--)
+    (p = o[a]) && (e = (l ? p(r, i, e) : p(e)) || e);
+  return l && e && m(r, i, e), e;
+};
+const b = d`
+  <svg class="external-icon" viewBox="0 0 12 12" fill="none" width="12" height="12" aria-hidden="true">
+    <path d="M3.5 1.5h7v7M10.5 1.5L1.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
+let t = class extends f {
+  constructor() {
+    super(...arguments), this.href = "", this.target = "", this.variant = "default", this.disabled = !1;
+  }
+  render() {
+    const o = this.target === "_blank", r = o ? "noopener noreferrer" : void 0;
+    return c`
+      <a
+        href=${this.href}
+        target=${this.target || h}
+        rel=${r ?? h}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        tabindex=${this.disabled ? "-1" : "0"}
+        part="anchor"
+      >
+        <slot></slot>${o ? b : ""}
+      </a>
+    `;
+  }
+};
+t.styles = [v];
+s([
+  n()
+], t.prototype, "href", 2);
+s([
+  n()
+], t.prototype, "target", 2);
+s([
+  n({ reflect: !0 })
+], t.prototype, "variant", 2);
+s([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+t = s([
+  u("mellow-link")
+], t);
+export {
+  t as MellowLink
+};
+//# sourceMappingURL=link.js.map

package/dist/components/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sources":["../../../src/components/link/link.ts"],"sourcesContent":["import { LitElement, html, svg, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { linkStyles } from './link.styles.js'\n\nexport type LinkVariant = 'default' | 'subtle'\n\nconst externalIcon = svg`\n  <svg class=\"external-icon\" viewBox=\"0 0 12 12\" fill=\"none\" width=\"12\" height=\"12\" aria-hidden=\"true\">\n    <path d=\"M3.5 1.5h7v7M10.5 1.5L1.5 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n`\n\n@customElement('mellow-link')\nexport class MellowLink extends LitElement {\n  static override styles = [linkStyles]\n\n  @property()\n  href = ''\n\n  @property()\n  target = ''\n\n  @property({ reflect: true })\n  variant: LinkVariant = 'default'\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  override render() {\n    const isExternal = this.target === '_blank'\n    const rel = isExternal ? 'noopener noreferrer' : undefined\n\n    return html`\n      <a\n        href=${this.href}\n        target=${this.target || nothing}\n        rel=${rel ?? nothing}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        part=\"anchor\"\n      >\n        <slot></slot>${isExternal ? externalIcon : ''}\n      </a>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-link': MellowLink\n  }\n}\n"],"names":["externalIcon","svg","MellowLink","LitElement","isExternal","rel","html","nothing","linkStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAMA,MAAMA,IAAeC;AAAA;AAAA;AAAA;AAAA;AAOd,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,OAAO,IAGP,KAAA,SAAS,IAGT,KAAA,UAAuB,WAGvB,KAAA,WAAW;AAAA,EAAA;AAAA,EAEF,SAAS;AAChB,UAAMC,IAAa,KAAK,WAAW,UAC7BC,IAAMD,IAAa,wBAAwB;AAEjD,WAAOE;AAAA;AAAA,eAEI,KAAK,IAAI;AAAA,iBACP,KAAK,UAAUC,CAAO;AAAA,cACzBF,KAAOE,CAAO;AAAA,wBACJ,KAAK,WAAW,SAAS,OAAO;AAAA,mBACrC,KAAK,WAAW,OAAO,GAAG;AAAA;AAAA;AAAA,uBAGtBH,IAAaJ,IAAe,EAAE;AAAA;AAAA;AAAA,EAGnD;AACF;AAhCaE,EACK,SAAS,CAACM,CAAU;AAGpCC,EAAA;AAAA,EADCC,EAAA;AAAS,GAHCR,EAIX,WAAA,QAAA,CAAA;AAGAO,EAAA;AAAA,EADCC,EAAA;AAAS,GANCR,EAOX,WAAA,UAAA,CAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAThBR,EAUX,WAAA,WAAA,CAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BR,EAaX,WAAA,YAAA,CAAA;AAbWA,IAANO,EAAA;AAAA,EADNE,EAAc,aAAa;AAAA,GACfT,CAAA;"}

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

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

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

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

package/dist/components/link/link.styles.js

@@ -0,0 +1,57 @@
+import { css as e } from "lit";
+const i = e`
+  :host {
+    display: inline;
+  }
+
+  a {
+    font-family: system-ui, sans-serif;
+    font-size: inherit;
+    line-height: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+    transition: color 150ms ease;
+  }
+
+  /* ---- Variants ---- */
+
+  /* Default */
+  :host([variant='default']) a,
+  a {
+    color: #ff6f23;
+  }
+  :host([variant='default']) a:hover,
+  a:hover {
+    color: #e55f17;
+  }
+
+  /* Subtle */
+  :host([variant='subtle']) a {
+    color: #767676;
+  }
+  :host([variant='subtle']) a:hover {
+    color: #232222;
+  }
+
+  /* ---- Disabled ---- */
+
+  :host([disabled]) a {
+    color: #d1d0d0;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ---- External icon ---- */
+
+  .external-icon {
+    display: inline-flex;
+    margin-left: 2px;
+    width: 12px;
+    height: 12px;
+    vertical-align: middle;
+  }
+`;
+export {
+  i as linkStyles
+};
+//# sourceMappingURL=link.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.styles.js","sources":["../../../src/components/link/link.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const linkStyles = css`\n  :host {\n    display: inline;\n  }\n\n  a {\n    font-family: system-ui, sans-serif;\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: underline;\n    cursor: pointer;\n    transition: color 150ms ease;\n  }\n\n  /* ---- Variants ---- */\n\n  /* Default */\n  :host([variant='default']) a,\n  a {\n    color: #ff6f23;\n  }\n  :host([variant='default']) a:hover,\n  a:hover {\n    color: #e55f17;\n  }\n\n  /* Subtle */\n  :host([variant='subtle']) a {\n    color: #767676;\n  }\n  :host([variant='subtle']) a:hover {\n    color: #232222;\n  }\n\n  /* ---- Disabled ---- */\n\n  :host([disabled]) a {\n    color: #d1d0d0;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ---- External icon ---- */\n\n  .external-icon {\n    display: inline-flex;\n    margin-left: 2px;\n    width: 12px;\n    height: 12px;\n    vertical-align: middle;\n  }\n`\n"],"names":["linkStyles","css"],"mappings":";AAEO,MAAMA,IAAaC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/pagination/index.d.ts

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

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

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

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, nothing } from 'lit';
+export type PaginationType = 'default' | 'icons' | 'prev-next';
+export declare class MellowPagination extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Total number of items across all pages */
+    total: number;
+    /** Currently active page (1-based) */
+    page: number;
+    /** Number of items per page */
+    pageSize: number;
+    /** Number of sibling pages to show on each side of the current page */
+    siblingCount: number;
+    /** Display type: default (text labels), icons (chevron arrows), prev-next (only prev/next, no pages) */
+    type: PaginationType;
+    private get _totalPages();
+    private _buildPageRange;
+    private _handlePageClick;
+    private _renderPrevButton;
+    private _renderNextButton;
+    private _renderPageItems;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-pagination': MellowPagination;
+    }
+}
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAA;AAiBpD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,CAAA;AAM9D,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAAqB;IAE3C,6CAA6C;IAE7C,KAAK,SAAI;IAET,sCAAsC;IAEtC,IAAI,SAAI;IAER,+BAA+B;IAE/B,QAAQ,SAAK;IAEb,uEAAuE;IAEvE,YAAY,SAAI;IAEhB,wGAAwG;IAExG,IAAI,EAAE,cAAc,CAAY;IAEhC,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,eAAe;IAyCvB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,gBAAgB;IAgCf,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAA;KACtC;CACF"}

package/dist/components/pagination/pagination.js

@@ -0,0 +1,139 @@
+import { svg as v, LitElement as d, html as l, nothing as h } from "lit";
+import { property as u, customElement as b } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { paginationStyles as y } from "./pagination.styles.js";
+var P = Object.defineProperty, f = Object.getOwnPropertyDescriptor, p = (t, e, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? f(e, s) : e, o = t.length - 1, r; o >= 0; o--)
+    (r = t[o]) && (a = (i ? r(e, s, a) : r(a)) || a);
+  return i && a && P(e, s, a), a;
+};
+const _ = v`
+  <svg class="chevron-icon" viewBox="0 0 16 16" fill="none" width="16" height="16">
+    <path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`, $ = v`
+  <svg class="chevron-icon" viewBox="0 0 16 16" fill="none" width="16" height="16">
+    <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
+let n = class extends d {
+  constructor() {
+    super(...arguments), this.total = 0, this.page = 1, this.pageSize = 10, this.siblingCount = 1, this.type = "default";
+  }
+  get _totalPages() {
+    return Math.ceil(this.total / this.pageSize);
+  }
+  _buildPageRange() {
+    const t = this._totalPages;
+    if (t <= 0) return [];
+    const e = this.siblingCount * 2 + 3;
+    if (t <= e)
+      return Array.from({ length: t }, (g, m) => ({
+        type: "page",
+        value: m + 1
+      }));
+    const s = this.page, i = this.siblingCount, a = Math.max(2, s - i), o = Math.min(t - 1, s + i), r = [];
+    r.push({ type: "page", value: 1 }), a > 2 && r.push({ type: "ellipsis", key: "left" });
+    for (let g = a; g <= o; g++)
+      r.push({ type: "page", value: g });
+    return o < t - 1 && r.push({ type: "ellipsis", key: "right" }), t > 1 && r.push({ type: "page", value: t }), r;
+  }
+  _handlePageClick(t) {
+    t < 1 || t > this._totalPages || t === this.page || (this.page = t, this.dispatchEvent(new CustomEvent("mellow-page-change", {
+      detail: { page: this.page },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  _renderPrevButton() {
+    const t = this.page === 1, e = this.type === "icons";
+    return l`
+      <button
+        class=${c({
+      "page-item": !0,
+      "page-item--nav": !0,
+      "page-item--icon": e
+    })}
+        aria-label="Previous page"
+        ?disabled=${t}
+        @click=${() => this._handlePageClick(this.page - 1)}
+      >${e ? _ : "Previous"}</button>
+    `;
+  }
+  _renderNextButton() {
+    const t = this._totalPages, e = this.page === t, s = this.type === "icons";
+    return l`
+      <button
+        class=${c({
+      "page-item": !0,
+      "page-item--nav": !0,
+      "page-item--icon": s
+    })}
+        aria-label="Next page"
+        ?disabled=${e}
+        @click=${() => this._handlePageClick(this.page + 1)}
+      >${s ? $ : "Next"}</button>
+    `;
+  }
+  _renderPageItems() {
+    return this._buildPageRange().map((e) => {
+      if (e.type === "ellipsis")
+        return l`
+          <span
+            class="page-item page-item--ellipsis"
+            aria-hidden="true"
+          >&hellip;</span>
+        `;
+      const s = e.value === this.page, i = {
+        "page-item": !0,
+        "page-item--active": s,
+        "page-item--current": !s && e.value === this.page
+      };
+      return l`
+        <button
+          class=${c(i)}
+          aria-label="Page ${e.value}"
+          aria-current=${s ? "page" : h}
+          @click=${() => this._handlePageClick(e.value)}
+        >${e.value}</button>
+      `;
+    });
+  }
+  render() {
+    return this._totalPages <= 0 ? h : this.type === "prev-next" ? l`
+        <nav aria-label="Pagination">
+          ${this._renderPrevButton()}
+          ${this._renderNextButton()}
+        </nav>
+      ` : l`
+      <nav aria-label="Pagination">
+        ${this._renderPrevButton()}
+        ${this._renderPageItems()}
+        ${this._renderNextButton()}
+      </nav>
+    `;
+  }
+};
+n.styles = [y];
+p([
+  u({ type: Number })
+], n.prototype, "total", 2);
+p([
+  u({ type: Number })
+], n.prototype, "page", 2);
+p([
+  u({ type: Number, attribute: "page-size" })
+], n.prototype, "pageSize", 2);
+p([
+  u({ type: Number, attribute: "sibling-count" })
+], n.prototype, "siblingCount", 2);
+p([
+  u({ type: String, reflect: !0 })
+], n.prototype, "type", 2);
+n = p([
+  b("mellow-pagination")
+], n);
+export {
+  n as MellowPagination
+};
+//# sourceMappingURL=pagination.js.map

package/dist/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.ts"],"sourcesContent":["import { LitElement, html, svg, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { paginationStyles } from './pagination.styles.js'\n\nconst chevronLeft = svg`\n  <svg class=\"chevron-icon\" viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n    <path d=\"M10 12L6 8l4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n`\n\nconst chevronRight = svg`\n  <svg class=\"chevron-icon\" viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n    <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg>\n`\n\nexport type PaginationType = 'default' | 'icons' | 'prev-next'\n\ntype PageItem =\n  | { type: 'page'; value: number }\n  | { type: 'ellipsis'; key: string }\n\n@customElement('mellow-pagination')\nexport class MellowPagination extends LitElement {\n  static override styles = [paginationStyles]\n\n  /** Total number of items across all pages */\n  @property({ type: Number })\n  total = 0\n\n  /** Currently active page (1-based) */\n  @property({ type: Number })\n  page = 1\n\n  /** Number of items per page */\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 10\n\n  /** Number of sibling pages to show on each side of the current page */\n  @property({ type: Number, attribute: 'sibling-count' })\n  siblingCount = 1\n\n  /** Display type: default (text labels), icons (chevron arrows), prev-next (only prev/next, no pages) */\n  @property({ type: String, reflect: true })\n  type: PaginationType = 'default'\n\n  private get _totalPages(): number {\n    return Math.ceil(this.total / this.pageSize)\n  }\n\n  private _buildPageRange(): PageItem[] {\n    const totalPages = this._totalPages\n    if (totalPages <= 0) return []\n\n    const maxVisibleWithoutEllipsis = this.siblingCount * 2 + 3\n    if (totalPages <= maxVisibleWithoutEllipsis) {\n      return Array.from({ length: totalPages }, (_, i) => ({\n        type: 'page' as const,\n        value: i + 1,\n      }))\n    }\n\n    const current = this.page\n    const sibling = this.siblingCount\n\n    const rangeStart = Math.max(2, current - sibling)\n    const rangeEnd = Math.min(totalPages - 1, current + sibling)\n\n    const items: PageItem[] = []\n\n    items.push({ type: 'page', value: 1 })\n\n    if (rangeStart > 2) {\n      items.push({ type: 'ellipsis', key: 'left' })\n    }\n\n    for (let i = rangeStart; i <= rangeEnd; i++) {\n      items.push({ type: 'page', value: i })\n    }\n\n    if (rangeEnd < totalPages - 1) {\n      items.push({ type: 'ellipsis', key: 'right' })\n    }\n\n    if (totalPages > 1) {\n      items.push({ type: 'page', value: totalPages })\n    }\n\n    return items\n  }\n\n  private _handlePageClick(newPage: number): void {\n    if (newPage < 1 || newPage > this._totalPages || newPage === this.page) return\n\n    this.page = newPage\n    this.dispatchEvent(new CustomEvent('mellow-page-change', {\n      detail: { page: this.page },\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  private _renderPrevButton() {\n    const isFirst = this.page === 1\n    const useIcon = this.type === 'icons'\n\n    const classes = {\n      'page-item': true,\n      'page-item--nav': true,\n      'page-item--icon': useIcon,\n    }\n\n    return html`\n      <button\n        class=${classMap(classes)}\n        aria-label=\"Previous page\"\n        ?disabled=${isFirst}\n        @click=${() => this._handlePageClick(this.page - 1)}\n      >${useIcon ? chevronLeft : 'Previous'}</button>\n    `\n  }\n\n  private _renderNextButton() {\n    const totalPages = this._totalPages\n    const isLast = this.page === totalPages\n    const useIcon = this.type === 'icons'\n\n    const classes = {\n      'page-item': true,\n      'page-item--nav': true,\n      'page-item--icon': useIcon,\n    }\n\n    return html`\n      <button\n        class=${classMap(classes)}\n        aria-label=\"Next page\"\n        ?disabled=${isLast}\n        @click=${() => this._handlePageClick(this.page + 1)}\n      >${useIcon ? chevronRight : 'Next'}</button>\n    `\n  }\n\n  private _renderPageItems() {\n    const items = this._buildPageRange()\n\n    return items.map(item => {\n      if (item.type === 'ellipsis') {\n        return html`\n          <span\n            class=\"page-item page-item--ellipsis\"\n            aria-hidden=\"true\"\n          >&hellip;</span>\n        `\n      }\n\n      const isActive = item.value === this.page\n\n      const classes = {\n        'page-item': true,\n        'page-item--active': isActive,\n        'page-item--current': !isActive && item.value === this.page,\n      }\n\n      return html`\n        <button\n          class=${classMap(classes)}\n          aria-label=\"Page ${item.value}\"\n          aria-current=${isActive ? 'page' : nothing}\n          @click=${() => this._handlePageClick(item.value)}\n        >${item.value}</button>\n      `\n    })\n  }\n\n  override render() {\n    const totalPages = this._totalPages\n    if (totalPages <= 0) return nothing\n\n    if (this.type === 'prev-next') {\n      return html`\n        <nav aria-label=\"Pagination\">\n          ${this._renderPrevButton()}\n          ${this._renderNextButton()}\n        </nav>\n      `\n    }\n\n    return html`\n      <nav aria-label=\"Pagination\">\n        ${this._renderPrevButton()}\n        ${this._renderPageItems()}\n        ${this._renderNextButton()}\n      </nav>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-pagination': MellowPagination\n  }\n}\n"],"names":["chevronLeft","svg","chevronRight","MellowPagination","LitElement","totalPages","maxVisibleWithoutEllipsis","_","i","current","sibling","rangeStart","rangeEnd","items","newPage","isFirst","useIcon","html","classMap","isLast","item","isActive","classes","nothing","paginationStyles","__decorateClass","property","customElement"],"mappings":"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"}

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

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

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

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

package/dist/components/pagination/pagination.styles.js

@@ -0,0 +1,86 @@
+import { css as e } from "lit";
+const l = e`
+  :host {
+    display: inline-block;
+  }
+
+  nav {
+    display: flex;
+    align-items: center;
+    height: var(--mellow-space-8, 32px);
+    border-radius: var(--mellow-radius-1-5, 6px);
+    overflow: clip;
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+  }
+
+  .page-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 6px var(--mellow-space-3, 12px);
+    background: var(--mellow-bg-secondary, #ede2d6);
+    border: none;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--mellow-font-size-14, 14px);
+    font-weight: var(--mellow-font-weight-regular, 400);
+    line-height: var(--mellow-line-height-18, 18px);
+    letter-spacing: 0;
+    text-align: center;
+    white-space: nowrap;
+    color: var(--mellow-text-secondary, #8a8686);
+    transition: background-color 150ms ease, color 150ms ease;
+    flex-shrink: 0;
+  }
+
+  .page-item--nav {
+    color: var(--mellow-text-primary, #232222);
+  }
+
+  .page-item--icon {
+    padding: 6px var(--mellow-space-2, 8px);
+  }
+
+  .page-item--current {
+    color: var(--mellow-text-primary, #232222);
+  }
+
+  .page-item--ellipsis {
+    color: var(--mellow-text-secondary, #8a8686);
+    cursor: default;
+  }
+
+  .page-item:hover:not(:disabled):not(.page-item--active):not(.page-item--ellipsis) {
+    background: var(--mellow-bg-surface-secondary, #faf6f2);
+  }
+
+  .page-item--active {
+    background: var(--mellow-bg-surface-brand-2, #f6d8ba);
+    color: var(--mellow-text-brand, #ff6f23);
+  }
+
+  .page-item:disabled {
+    opacity: 0.48;
+    cursor: not-allowed;
+  }
+
+  .page-item:focus-visible {
+    outline: 2px solid var(--mellow-colors-primary-mellow-orange, #ff6f23);
+    outline-offset: -2px;
+    z-index: 1;
+  }
+
+  .chevron-icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+    overflow: clip;
+    flex-shrink: 0;
+  }
+`;
+export {
+  l as paginationStyles
+};
+//# sourceMappingURL=pagination.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.styles.js","sources":["../../../src/components/pagination/pagination.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const paginationStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  nav {\n    display: flex;\n    align-items: center;\n    height: var(--mellow-space-8, 32px);\n    border-radius: var(--mellow-radius-1-5, 6px);\n    overflow: clip;\n    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\\\'l', system-ui, sans-serif);\n  }\n\n  .page-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 6px var(--mellow-space-3, 12px);\n    background: var(--mellow-bg-secondary, #ede2d6);\n    border: none;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: var(--mellow-font-size-14, 14px);\n    font-weight: var(--mellow-font-weight-regular, 400);\n    line-height: var(--mellow-line-height-18, 18px);\n    letter-spacing: 0;\n    text-align: center;\n    white-space: nowrap;\n    color: var(--mellow-text-secondary, #8a8686);\n    transition: background-color 150ms ease, color 150ms ease;\n    flex-shrink: 0;\n  }\n\n  .page-item--nav {\n    color: var(--mellow-text-primary, #232222);\n  }\n\n  .page-item--icon {\n    padding: 6px var(--mellow-space-2, 8px);\n  }\n\n  .page-item--current {\n    color: var(--mellow-text-primary, #232222);\n  }\n\n  .page-item--ellipsis {\n    color: var(--mellow-text-secondary, #8a8686);\n    cursor: default;\n  }\n\n  .page-item:hover:not(:disabled):not(.page-item--active):not(.page-item--ellipsis) {\n    background: var(--mellow-bg-surface-secondary, #faf6f2);\n  }\n\n  .page-item--active {\n    background: var(--mellow-bg-surface-brand-2, #f6d8ba);\n    color: var(--mellow-text-brand, #ff6f23);\n  }\n\n  .page-item:disabled {\n    opacity: 0.48;\n    cursor: not-allowed;\n  }\n\n  .page-item:focus-visible {\n    outline: 2px solid var(--mellow-colors-primary-mellow-orange, #ff6f23);\n    outline-offset: -2px;\n    z-index: 1;\n  }\n\n  .chevron-icon {\n    display: block;\n    width: 16px;\n    height: 16px;\n    overflow: clip;\n    flex-shrink: 0;\n  }\n`\n"],"names":["paginationStyles","css"],"mappings":";AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/popover/index.d.ts

@@ -0,0 +1,3 @@
+export { MellowPopover } from './popover.js';
+export type { PopoverPlacement, PopoverTrigger } from './popover.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type PopoverTrigger = 'click' | 'hover';
+export declare class MellowPopover extends LitElement {
+    static styles: import("lit").CSSResult[];
+    open: boolean;
+    placement: PopoverPlacement;
+    trigger: PopoverTrigger;
+    private readonly _onDocumentClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<PropertyKey, unknown>): void;
+    private _toggle;
+    private _open;
+    private _close;
+    private _handleTriggerClick;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-popover': MellowPopover;
+    }
+}
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAKtC,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAClE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,OAAO,CAAA;AAE9C,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAAkB;IAGxC,IAAI,UAAQ;IAGZ,SAAS,EAAE,gBAAgB,CAAW;IAGtC,OAAO,EAAE,cAAc,CAAU;IAEjC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAIhC;IAEQ,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAU1D,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,iBAAiB;IAMhB,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

package/dist/components/popover/popover.js

@@ -0,0 +1,88 @@
+import { LitElement as a, html as h } from "lit";
+import { property as p, customElement as u } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { popoverStyles as d } from "./popover.styles.js";
+var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, r = (e, s, l, i) => {
+  for (var t = i > 1 ? void 0 : i ? g(s, l) : s, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (t = (i ? c(s, l, t) : c(t)) || t);
+  return i && t && v(s, l, t), t;
+};
+let o = class extends a {
+  constructor() {
+    super(...arguments), this.open = !1, this.placement = "bottom", this.trigger = "click", this._onDocumentClick = (e) => {
+      this.contains(e.target) || this._close();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.open && document.addEventListener("click", this._onDocumentClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._onDocumentClick);
+  }
+  updated(e) {
+    e.has("open") && (this.open ? document.addEventListener("click", this._onDocumentClick) : document.removeEventListener("click", this._onDocumentClick));
+  }
+  _toggle() {
+    this.open ? this._close() : this._open();
+  }
+  _open() {
+    this.open = !0, this.dispatchEvent(new CustomEvent("mellow-toggle", {
+      bubbles: !0,
+      composed: !0,
+      detail: { open: !0 }
+    }));
+  }
+  _close() {
+    this.open = !1, this.dispatchEvent(new CustomEvent("mellow-toggle", {
+      bubbles: !0,
+      composed: !0,
+      detail: { open: !1 }
+    }));
+  }
+  _handleTriggerClick() {
+    this.trigger === "click" && this._toggle();
+  }
+  _handleMouseEnter() {
+    this.trigger === "hover" && this._open();
+  }
+  _handleMouseLeave() {
+    this.trigger === "hover" && this._close();
+  }
+  render() {
+    const e = {
+      "popover-content": !0,
+      open: this.open,
+      [this.placement]: !0
+    };
+    return h`
+      <div
+        class="trigger"
+        @click=${this._handleTriggerClick}
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+      >
+        <slot name="trigger"></slot>
+      </div>
+      <div class=${m(e)} role="tooltip">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+o.styles = [d];
+r([
+  p({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+r([
+  p({ reflect: !0 })
+], o.prototype, "placement", 2);
+r([
+  p({ reflect: !0 })
+], o.prototype, "trigger", 2);
+o = r([
+  u("mellow-popover")
+], o);
+export {
+  o as MellowPopover
+};
+//# sourceMappingURL=popover.js.map

package/dist/components/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.ts"],"sourcesContent":["import { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { popoverStyles } from './popover.styles.js'\n\nexport type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right'\nexport type PopoverTrigger = 'click' | 'hover'\n\n@customElement('mellow-popover')\nexport class MellowPopover extends LitElement {\n  static override styles = [popoverStyles]\n\n  @property({ type: Boolean, reflect: true })\n  open = false\n\n  @property({ reflect: true })\n  placement: PopoverPlacement = 'bottom'\n\n  @property({ reflect: true })\n  trigger: PopoverTrigger = 'click'\n\n  private readonly _onDocumentClick = (e: MouseEvent): void => {\n    if (!this.contains(e.target as Node)) {\n      this._close()\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (this.open) {\n      document.addEventListener('click', this._onDocumentClick)\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this._onDocumentClick)\n  }\n\n  override updated(changed: Map<PropertyKey, unknown>): void {\n    if (changed.has('open')) {\n      if (this.open) {\n        document.addEventListener('click', this._onDocumentClick)\n      } else {\n        document.removeEventListener('click', this._onDocumentClick)\n      }\n    }\n  }\n\n  private _toggle(): void {\n    if (this.open) {\n      this._close()\n    } else {\n      this._open()\n    }\n  }\n\n  private _open(): void {\n    this.open = true\n    this.dispatchEvent(new CustomEvent('mellow-toggle', {\n      bubbles: true,\n      composed: true,\n      detail: { open: true },\n    }))\n  }\n\n  private _close(): void {\n    this.open = false\n    this.dispatchEvent(new CustomEvent('mellow-toggle', {\n      bubbles: true,\n      composed: true,\n      detail: { open: false },\n    }))\n  }\n\n  private _handleTriggerClick(): void {\n    if (this.trigger === 'click') {\n      this._toggle()\n    }\n  }\n\n  private _handleMouseEnter(): void {\n    if (this.trigger === 'hover') {\n      this._open()\n    }\n  }\n\n  private _handleMouseLeave(): void {\n    if (this.trigger === 'hover') {\n      this._close()\n    }\n  }\n\n  override render() {\n    const contentClasses = {\n      'popover-content': true,\n      'open': this.open,\n      [this.placement]: true,\n    }\n\n    return html`\n      <div\n        class=\"trigger\"\n        @click=${this._handleTriggerClick}\n        @mouseenter=${this._handleMouseEnter}\n        @mouseleave=${this._handleMouseLeave}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div class=${classMap(contentClasses)} role=\"tooltip\">\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-popover': MellowPopover\n  }\n}\n"],"names":["MellowPopover","LitElement","changed","contentClasses","html","classMap","popoverStyles","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AASO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,OAAO,IAGP,KAAA,YAA8B,UAG9B,KAAA,UAA0B,SAE1B,KAAiB,mBAAmB,CAAC,MAAwB;AAC3D,MAAK,KAAK,SAAS,EAAE,MAAc,KACjC,KAAK,OAAA;AAAA,IAET;AAAA,EAAA;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACF,KAAK,QACP,SAAS,iBAAiB,SAAS,KAAK,gBAAgB;AAAA,EAE5D;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,SAAS,oBAAoB,SAAS,KAAK,gBAAgB;AAAA,EAC7D;AAAA,EAES,QAAQC,GAA0C;AACzD,IAAIA,EAAQ,IAAI,MAAM,MAChB,KAAK,OACP,SAAS,iBAAiB,SAAS,KAAK,gBAAgB,IAExD,SAAS,oBAAoB,SAAS,KAAK,gBAAgB;AAAA,EAGjE;AAAA,EAEQ,UAAgB;AACtB,IAAI,KAAK,OACP,KAAK,OAAA,IAEL,KAAK,MAAA;AAAA,EAET;AAAA,EAEQ,QAAc;AACpB,SAAK,OAAO,IACZ,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ,EAAE,MAAM,GAAA;AAAA,IAAK,CACtB,CAAC;AAAA,EACJ;AAAA,EAEQ,SAAe;AACrB,SAAK,OAAO,IACZ,KAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,MAClD,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ,EAAE,MAAM,GAAA;AAAA,IAAM,CACvB,CAAC;AAAA,EACJ;AAAA,EAEQ,sBAA4B;AAClC,IAAI,KAAK,YAAY,WACnB,KAAK,QAAA;AAAA,EAET;AAAA,EAEQ,oBAA0B;AAChC,IAAI,KAAK,YAAY,WACnB,KAAK,MAAA;AAAA,EAET;AAAA,EAEQ,oBAA0B;AAChC,IAAI,KAAK,YAAY,WACnB,KAAK,OAAA;AAAA,EAET;AAAA,EAES,SAAS;AAChB,UAAMC,IAAiB;AAAA,MACrB,mBAAmB;AAAA,MACnB,MAAQ,KAAK;AAAA,MACb,CAAC,KAAK,SAAS,GAAG;AAAA,IAAA;AAGpB,WAAOC;AAAA;AAAA;AAAA,iBAGM,KAAK,mBAAmB;AAAA,sBACnB,KAAK,iBAAiB;AAAA,sBACtB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,mBAIzBC,EAASF,CAAc,CAAC;AAAA;AAAA;AAAA;AAAA,EAIzC;AACF;AAzGaH,EACK,SAAS,CAACM,CAAa;AAGvCC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAH/BR,EAIX,WAAA,QAAA,CAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GANhBR,EAOX,WAAA,aAAA,CAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAThBR,EAUX,WAAA,WAAA,CAAA;AAVWA,IAANO,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBT,CAAA;"}

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

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

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

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