@mellow.io/ds 0.1.0

package/dist/components/textarea/textarea.styles.js

@@ -0,0 +1,146 @@
+import { css as e } from "lit";
+const o = e`
+  :host {
+    display: block;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mellow-space-2, 8px);
+  }
+
+  /* Label */
+  .label {
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', 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-secondary, #8a8686);
+  }
+
+  :host([error]) .label {
+    color: var(--mellow-text-danger-600, #db4933);
+  }
+
+  /* Input + Helper wrapper */
+  .textarea-helper {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    gap: var(--mellow-space-1, 4px);
+    min-height: 0;
+  }
+
+  /* Textarea container */
+  .textarea-container {
+    display: flex;
+    flex: 1 0 0;
+    min-height: 0;
+    padding: var(--mellow-space-3-5, 15px);
+    border-radius: var(--mellow-radius-2, 8px);
+    border: var(--mellow-stroke-border, 1px) solid var(--mellow-border-input, white);
+    background: var(--mellow-bg-surface-primary, white);
+    transition: border-color 150ms ease;
+    overflow: clip;
+  }
+
+  .textarea-container:hover {
+    border-color: var(--mellow-border-secondary, #ead8be);
+  }
+
+  .textarea-container.focused {
+    border-color: var(--mellow-border-brand, #ff6f23);
+  }
+
+  :host([error]) .textarea-container {
+    border-color: var(--mellow-border-danger, #db4933);
+    background: var(--mellow-bg-surface-danger, rgba(246, 132, 115, 0.16));
+  }
+
+  :host([disabled]) .textarea-container {
+    border-color: var(--mellow-border-tertiary, #f5eddf);
+    background: var(--mellow-bg-surface-tertiary, #f5eddf);
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) .textarea-container:hover {
+    border-color: var(--mellow-border-tertiary, #f5eddf);
+  }
+
+  /* Native textarea */
+  textarea {
+    flex: 1 0 0;
+    min-width: 0;
+    min-height: 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-16, 16px);
+    line-height: var(--mellow-line-height-22, 22px);
+    color: var(--mellow-text-primary, #232222);
+    padding: 0;
+  }
+
+  textarea::placeholder {
+    color: var(--mellow-text-tertiary, #d1d0d0);
+  }
+
+  :host([error]) textarea {
+    color: var(--mellow-text-danger-600, #db4933);
+  }
+
+  :host([error]) textarea::placeholder {
+    color: var(--mellow-text-danger-300, #fbb1a6);
+  }
+
+  :host([disabled]) textarea {
+    color: var(--mellow-text-secondary, #8a8686);
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) textarea::placeholder {
+    color: var(--mellow-text-secondary, #8a8686);
+  }
+
+  /* Helper / Error text + Character count */
+  .helper {
+    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-12, 12px);
+    line-height: var(--mellow-line-height-14, 14px);
+    color: var(--mellow-text-secondary, #8a8686);
+  }
+
+  :host([error]) .helper {
+    color: var(--mellow-text-danger-600, #db4933);
+  }
+
+  .helper-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--mellow-space-2, 8px);
+  }
+
+  .char-count {
+    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-12, 12px);
+    line-height: var(--mellow-line-height-14, 14px);
+    color: var(--mellow-text-secondary, #8a8686);
+    text-align: right;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  :host([error]) .char-count {
+    color: var(--mellow-text-danger-600, #db4933);
+  }
+`;
+export {
+  o as textareaStyles
+};
+//# sourceMappingURL=textarea.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.styles.js","sources":["../../../src/components/textarea/textarea.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const textareaStyles = 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  .textarea-helper {\n    display: flex;\n    flex: 1 0 0;\n    flex-direction: column;\n    gap: var(--mellow-space-1, 4px);\n    min-height: 0;\n  }\n\n  /* Textarea container */\n  .textarea-container {\n    display: flex;\n    flex: 1 0 0;\n    min-height: 0;\n    padding: var(--mellow-space-3-5, 15px);\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    overflow: clip;\n  }\n\n  .textarea-container:hover {\n    border-color: var(--mellow-border-secondary, #ead8be);\n  }\n\n  .textarea-container.focused {\n    border-color: var(--mellow-border-brand, #ff6f23);\n  }\n\n  :host([error]) .textarea-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  :host([disabled]) .textarea-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]) .textarea-container:hover {\n    border-color: var(--mellow-border-tertiary, #f5eddf);\n  }\n\n  /* Native textarea */\n  textarea {\n    flex: 1 0 0;\n    min-width: 0;\n    min-height: 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-16, 16px);\n    line-height: var(--mellow-line-height-22, 22px);\n    color: var(--mellow-text-primary, #232222);\n    padding: 0;\n  }\n\n  textarea::placeholder {\n    color: var(--mellow-text-tertiary, #d1d0d0);\n  }\n\n  :host([error]) textarea {\n    color: var(--mellow-text-danger-600, #db4933);\n  }\n\n  :host([error]) textarea::placeholder {\n    color: var(--mellow-text-danger-300, #fbb1a6);\n  }\n\n  :host([disabled]) textarea {\n    color: var(--mellow-text-secondary, #8a8686);\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) textarea::placeholder {\n    color: var(--mellow-text-secondary, #8a8686);\n  }\n\n  /* Helper / Error text + Character count */\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  .helper-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: var(--mellow-space-2, 8px);\n  }\n\n  .char-count {\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    text-align: right;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  :host([error]) .char-count {\n    color: var(--mellow-text-danger-600, #db4933);\n  }\n`\n"],"names":["textareaStyles","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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

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

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

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

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,31 @@
+import { LitElement, nothing } from 'lit';
+export type ToastVariant = 'info' | 'accent' | 'danger' | 'warning' | 'success';
+export declare class MellowToast extends LitElement {
+    static styles: import("lit").CSSResult[];
+    variant: ToastVariant;
+    message: string;
+    duration: number;
+    private _visible;
+    private _entering;
+    private _exiting;
+    private _autoTimer;
+    static show(options: {
+        message: string;
+        variant?: ToastVariant;
+        duration?: number;
+        container?: HTMLElement;
+    }): MellowToast;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _scheduleAutoDismiss;
+    private _clearAutoTimer;
+    private _dismiss;
+    private _handleClose;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-toast': MellowToast;
+    }
+}
+//# sourceMappingURL=toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAA;AAKpD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;AAgB/E,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAAgB;IAGtC,OAAO,EAAE,YAAY,CAAS;IAG9B,OAAO,SAAK;IAGZ,QAAQ,SAAO;IAGf,OAAO,CAAC,QAAQ,CAAQ;IAGxB,OAAO,CAAC,SAAS,CAAQ;IAGzB,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,UAAU,CAA2C;IAE7D,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE;QACnB,OAAO,EAAE,MAAM,CAAA;QACf,OAAO,CAAC,EAAE,YAAY,CAAA;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,SAAS,CAAC,EAAE,WAAW,CAAA;KACxB,GAAG,WAAW;IAcN,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,YAAY;IAKX,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}

package/dist/components/toast/toast.js

@@ -0,0 +1,104 @@
+import { svg as h, LitElement as m, nothing as d, html as _ } from "lit";
+import { property as c, state as u, customElement as p } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { toastStyles as g } from "./toast.styles.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (t, e, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? b(e, o) : e, a = t.length - 1, l; a >= 0; a--)
+    (l = t[a]) && (i = (n ? l(e, o, i) : l(i)) || i);
+  return n && i && f(e, o, i), i;
+};
+const w = h`
+  <svg viewBox="0 0 20 20" fill="none" width="20" height="20">
+    <circle cx="10" cy="10" r="8.5" stroke="currentColor" stroke-width="1.2"/>
+    <path d="M10 9v4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+    <circle cx="10" cy="7" r="0.75" fill="currentColor"/>
+  </svg>
+`, C = h`
+  <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+    <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+  </svg>
+`;
+let s = class extends m {
+  constructor() {
+    super(...arguments), this.variant = "info", this.message = "", this.duration = 5e3, this._visible = !1, this._entering = !1, this._exiting = !1;
+  }
+  static show(t) {
+    const e = document.createElement("mellow-toast");
+    return e.message = t.message, t.variant && (e.variant = t.variant), t.duration !== void 0 && (e.duration = t.duration), (t.container ?? document.body).appendChild(e), e;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._visible = !0, this._entering = !1, requestAnimationFrame(() => {
+      this._entering = !0;
+    }), this._scheduleAutoDismiss();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._clearAutoTimer();
+  }
+  _scheduleAutoDismiss() {
+    this._clearAutoTimer(), this.duration > 0 && (this._autoTimer = setTimeout(() => {
+      this._dismiss();
+    }, this.duration));
+  }
+  _clearAutoTimer() {
+    this._autoTimer !== void 0 && (clearTimeout(this._autoTimer), this._autoTimer = void 0);
+  }
+  _dismiss() {
+    this._exiting = !0, setTimeout(() => {
+      this._visible = !1, this.dispatchEvent(new CustomEvent("mellow-dismiss", {
+        bubbles: !0,
+        composed: !0
+      })), this.remove();
+    }, 200);
+  }
+  _handleClose() {
+    this._clearAutoTimer(), this._dismiss();
+  }
+  render() {
+    if (!this._visible)
+      return d;
+    const t = {
+      toast: !0,
+      entering: this._entering && !this._exiting,
+      exiting: this._exiting
+    };
+    return _`
+      <div class=${v(t)} role="status" aria-live="polite">
+        <div class="icon-frame">
+          <slot name="icon">${w}</slot>
+        </div>
+        <span class="message">${this.message}</span>
+        <button
+          class="close-btn"
+          aria-label="Close"
+          @click=${this._handleClose}
+        >${C}</button>
+      </div>
+    `;
+  }
+};
+s.styles = [g];
+r([
+  c({ reflect: !0 })
+], s.prototype, "variant", 2);
+r([
+  c()
+], s.prototype, "message", 2);
+r([
+  c({ type: Number })
+], s.prototype, "duration", 2);
+r([
+  u()
+], s.prototype, "_visible", 2);
+r([
+  u()
+], s.prototype, "_entering", 2);
+r([
+  u()
+], s.prototype, "_exiting", 2);
+s = r([
+  p("mellow-toast")
+], s);
+export {
+  s as MellowToast
+};
+//# sourceMappingURL=toast.js.map

package/dist/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../../../src/components/toast/toast.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 { toastStyles } from './toast.styles.js'\n\nexport type ToastVariant = 'info' | 'accent' | 'danger' | 'warning' | 'success'\n\nconst infoIcon = svg`\n  <svg viewBox=\"0 0 20 20\" fill=\"none\" width=\"20\" height=\"20\">\n    <circle cx=\"10\" cy=\"10\" r=\"8.5\" stroke=\"currentColor\" stroke-width=\"1.2\"/>\n    <path d=\"M10 9v4\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n    <circle cx=\"10\" cy=\"7\" r=\"0.75\" fill=\"currentColor\"/>\n  </svg>\n`\n\nconst closeIcon = svg`\n  <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n    <path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/>\n  </svg>\n`\n\n@customElement('mellow-toast')\nexport class MellowToast extends LitElement {\n  static override styles = [toastStyles]\n\n  @property({ reflect: true })\n  variant: ToastVariant = 'info'\n\n  @property()\n  message = ''\n\n  @property({ type: Number })\n  duration = 5000\n\n  @state()\n  private _visible = false\n\n  @state()\n  private _entering = false\n\n  @state()\n  private _exiting = false\n\n  private _autoTimer: ReturnType<typeof setTimeout> | undefined\n\n  static show(options: {\n    message: string\n    variant?: ToastVariant\n    duration?: number\n    container?: HTMLElement\n  }): MellowToast {\n    const toast = document.createElement('mellow-toast') as MellowToast\n    toast.message = options.message\n    if (options.variant) {\n      toast.variant = options.variant\n    }\n    if (options.duration !== undefined) {\n      toast.duration = options.duration\n    }\n    const container = options.container ?? document.body\n    container.appendChild(toast)\n    return toast\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this._visible = true\n    this._entering = false\n    requestAnimationFrame(() => {\n      this._entering = true\n    })\n    this._scheduleAutoDismiss()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this._clearAutoTimer()\n  }\n\n  private _scheduleAutoDismiss(): void {\n    this._clearAutoTimer()\n    if (this.duration > 0) {\n      this._autoTimer = setTimeout(() => {\n        this._dismiss()\n      }, this.duration)\n    }\n  }\n\n  private _clearAutoTimer(): void {\n    if (this._autoTimer !== undefined) {\n      clearTimeout(this._autoTimer)\n      this._autoTimer = undefined\n    }\n  }\n\n  private _dismiss(): void {\n    this._exiting = true\n    setTimeout(() => {\n      this._visible = false\n      this.dispatchEvent(new CustomEvent('mellow-dismiss', {\n        bubbles: true,\n        composed: true,\n      }))\n      this.remove()\n    }, 200)\n  }\n\n  private _handleClose(): void {\n    this._clearAutoTimer()\n    this._dismiss()\n  }\n\n  override render() {\n    if (!this._visible) {\n      return nothing\n    }\n\n    const toastClasses = {\n      'toast': true,\n      'entering': this._entering && !this._exiting,\n      'exiting': this._exiting,\n    }\n\n    return html`\n      <div class=${classMap(toastClasses)} role=\"status\" aria-live=\"polite\">\n        <div class=\"icon-frame\">\n          <slot name=\"icon\">${infoIcon}</slot>\n        </div>\n        <span class=\"message\">${this.message}</span>\n        <button\n          class=\"close-btn\"\n          aria-label=\"Close\"\n          @click=${this._handleClose}\n        >${closeIcon}</button>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-toast': MellowToast\n  }\n}\n"],"names":["infoIcon","svg","closeIcon","MellowToast","LitElement","options","toast","nothing","toastClasses","html","classMap","toastStyles","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;AAOA,MAAMA,IAAWC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQXC,IAAYD;AAAA;AAAA;AAAA;AAAA;AAOX,IAAME,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,UAAwB,QAGxB,KAAA,UAAU,IAGV,KAAA,WAAW,KAGX,KAAQ,WAAW,IAGnB,KAAQ,YAAY,IAGpB,KAAQ,WAAW;AAAA,EAAA;AAAA,EAInB,OAAO,KAAKC,GAKI;AACd,UAAMC,IAAQ,SAAS,cAAc,cAAc;AACnD,WAAAA,EAAM,UAAUD,EAAQ,SACpBA,EAAQ,YACVC,EAAM,UAAUD,EAAQ,UAEtBA,EAAQ,aAAa,WACvBC,EAAM,WAAWD,EAAQ,YAETA,EAAQ,aAAa,SAAS,MACtC,YAAYC,CAAK,GACpBA;AAAA,EACT;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,WAAW,IAChB,KAAK,YAAY,IACjB,sBAAsB,MAAM;AAC1B,WAAK,YAAY;AAAA,IACnB,CAAC,GACD,KAAK,qBAAA;AAAA,EACP;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,gBAAA;AAAA,EACP;AAAA,EAEQ,uBAA6B;AACnC,SAAK,gBAAA,GACD,KAAK,WAAW,MAClB,KAAK,aAAa,WAAW,MAAM;AACjC,WAAK,SAAA;AAAA,IACP,GAAG,KAAK,QAAQ;AAAA,EAEpB;AAAA,EAEQ,kBAAwB;AAC9B,IAAI,KAAK,eAAe,WACtB,aAAa,KAAK,UAAU,GAC5B,KAAK,aAAa;AAAA,EAEtB;AAAA,EAEQ,WAAiB;AACvB,SAAK,WAAW,IAChB,WAAW,MAAM;AACf,WAAK,WAAW,IAChB,KAAK,cAAc,IAAI,YAAY,kBAAkB;AAAA,QACnD,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX,CAAC,GACF,KAAK,OAAA;AAAA,IACP,GAAG,GAAG;AAAA,EACR;AAAA,EAEQ,eAAqB;AAC3B,SAAK,gBAAA,GACL,KAAK,SAAA;AAAA,EACP;AAAA,EAES,SAAS;AAChB,QAAI,CAAC,KAAK;AACR,aAAOC;AAGT,UAAMC,IAAe;AAAA,MACnB,OAAS;AAAA,MACT,UAAY,KAAK,aAAa,CAAC,KAAK;AAAA,MACpC,SAAW,KAAK;AAAA,IAAA;AAGlB,WAAOC;AAAA,mBACQC,EAASF,CAAY,CAAC;AAAA;AAAA,8BAEXR,CAAQ;AAAA;AAAA,gCAEN,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,mBAIzB,KAAK,YAAY;AAAA,WACzBE,CAAS;AAAA;AAAA;AAAA,EAGlB;AACF;AAnHaC,EACK,SAAS,CAACQ,CAAW;AAGrCC,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAHhBV,EAIX,WAAA,WAAA,CAAA;AAGAS,EAAA;AAAA,EADCC,EAAA;AAAS,GANCV,EAOX,WAAA,WAAA,CAAA;AAGAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfV,EAUX,WAAA,YAAA,CAAA;AAGQS,EAAA;AAAA,EADPE,EAAA;AAAM,GAZIX,EAaH,WAAA,YAAA,CAAA;AAGAS,EAAA;AAAA,EADPE,EAAA;AAAM,GAfIX,EAgBH,WAAA,aAAA,CAAA;AAGAS,EAAA;AAAA,EADPE,EAAA;AAAM,GAlBIX,EAmBH,WAAA,YAAA,CAAA;AAnBGA,IAANS,EAAA;AAAA,EADNG,EAAc,cAAc;AAAA,GAChBZ,CAAA;"}

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

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

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

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

package/dist/components/toast/toast.styles.js

@@ -0,0 +1,176 @@
+import { css as o } from "lit";
+const e = o`
+  :host {
+    display: block;
+    pointer-events: auto;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ---- Base ---- */
+
+  .toast {
+    display: flex;
+    gap: var(--mellow-space-2, 8px);
+    align-items: flex-start;
+    padding: var(--mellow-space-3-5, 15px);
+    border: var(--mellow-stroke-border, 1px) solid;
+    border-radius: var(--mellow-radii-xl, 12px);
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+    font-size: 16px;
+    font-weight: var(--mellow-typography-font-weight-regular, 400);
+    line-height: 22px;
+    box-shadow: var(--mellow-shadows-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
+    min-width: 280px;
+    max-width: 600px;
+  }
+
+  /* ---- Variant: Info (default) ---- */
+
+  :host([variant='info']) .toast,
+  .toast {
+    background: var(--mellow-colors-bg-secondary, #ede2d6);
+    border-color: var(--mellow-colors-pearl-bush-300, #d3b69e);
+    color: var(--mellow-colors-primary-shark, #232222);
+  }
+
+  /* ---- Variant: Accent ---- */
+
+  :host([variant='accent']) .toast {
+    background: var(--mellow-colors-orange-100, #f9e5d1);
+    border-color: var(--mellow-colors-primary-mellow-orange, #ff6f23);
+    color: var(--mellow-colors-primary-shark, #232222);
+  }
+
+  /* ---- Variant: Danger ---- */
+
+  :host([variant='danger']) .toast {
+    background: rgba(246, 132, 115, 0.16);
+    border-color: var(--mellow-colors-red-punch-600, #db4933);
+    color: var(--mellow-colors-red-punch-600, #db4933);
+  }
+
+  /* ---- Variant: Warning ---- */
+
+  :host([variant='warning']) .toast {
+    background: rgba(255, 202, 27, 0.16);
+    border-color: var(--mellow-colors-yellow-sea-600, #e27f00);
+    color: var(--mellow-colors-yellow-sea-600, #e27f00);
+  }
+
+  /* ---- Variant: Success ---- */
+
+  :host([variant='success']) .toast {
+    background: rgba(94, 139, 127, 0.12);
+    border-color: var(--mellow-colors-viridian-green-400, #5e8b7f);
+    color: var(--mellow-colors-viridian-green-400, #5e8b7f);
+  }
+
+  /* ---- Info & Accent text stays primary ---- */
+
+  :host([variant='info']) .message,
+  :host([variant='accent']) .message,
+  .message {
+    color: var(--mellow-colors-primary-shark, #232222);
+  }
+
+  :host([variant='danger']) .message {
+    color: var(--mellow-colors-red-punch-600, #db4933);
+  }
+
+  :host([variant='warning']) .message {
+    color: var(--mellow-colors-yellow-sea-600, #e27f00);
+  }
+
+  :host([variant='success']) .message {
+    color: var(--mellow-colors-viridian-green-400, #5e8b7f);
+  }
+
+  /* ---- Icon ---- */
+
+  .icon-frame {
+    flex-shrink: 0;
+    width: 20px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+  }
+
+  .icon-frame ::slotted(*),
+  .icon-frame svg {
+    width: 20px;
+    height: 20px;
+    color: inherit;
+  }
+
+  /* ---- Message ---- */
+
+  .message {
+    flex: 1;
+    min-width: 0;
+    align-self: stretch;
+    white-space: pre-wrap;
+  }
+
+  /* ---- Close button ---- */
+
+  .close-btn {
+    flex-shrink: 0;
+    width: 16px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    color: inherit;
+    opacity: 0.7;
+  }
+
+  .close-btn:hover {
+    opacity: 1;
+  }
+
+  .close-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* ---- Animations ---- */
+
+  @keyframes slideIn {
+    from {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  .toast.entering {
+    animation: slideIn 200ms ease;
+  }
+
+  .toast.exiting {
+    animation: fadeOut 200ms ease;
+  }
+`;
+export {
+  e as toastStyles
+};
+//# sourceMappingURL=toast.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.styles.js","sources":["../../../src/components/toast/toast.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const toastStyles = css`\n  :host {\n    display: block;\n    pointer-events: auto;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ---- Base ---- */\n\n  .toast {\n    display: flex;\n    gap: var(--mellow-space-2, 8px);\n    align-items: flex-start;\n    padding: var(--mellow-space-3-5, 15px);\n    border: var(--mellow-stroke-border, 1px) solid;\n    border-radius: var(--mellow-radii-xl, 12px);\n    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\\\'l', system-ui, sans-serif);\n    font-size: 16px;\n    font-weight: var(--mellow-typography-font-weight-regular, 400);\n    line-height: 22px;\n    box-shadow: var(--mellow-shadows-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));\n    min-width: 280px;\n    max-width: 600px;\n  }\n\n  /* ---- Variant: Info (default) ---- */\n\n  :host([variant='info']) .toast,\n  .toast {\n    background: var(--mellow-colors-bg-secondary, #ede2d6);\n    border-color: var(--mellow-colors-pearl-bush-300, #d3b69e);\n    color: var(--mellow-colors-primary-shark, #232222);\n  }\n\n  /* ---- Variant: Accent ---- */\n\n  :host([variant='accent']) .toast {\n    background: var(--mellow-colors-orange-100, #f9e5d1);\n    border-color: var(--mellow-colors-primary-mellow-orange, #ff6f23);\n    color: var(--mellow-colors-primary-shark, #232222);\n  }\n\n  /* ---- Variant: Danger ---- */\n\n  :host([variant='danger']) .toast {\n    background: rgba(246, 132, 115, 0.16);\n    border-color: var(--mellow-colors-red-punch-600, #db4933);\n    color: var(--mellow-colors-red-punch-600, #db4933);\n  }\n\n  /* ---- Variant: Warning ---- */\n\n  :host([variant='warning']) .toast {\n    background: rgba(255, 202, 27, 0.16);\n    border-color: var(--mellow-colors-yellow-sea-600, #e27f00);\n    color: var(--mellow-colors-yellow-sea-600, #e27f00);\n  }\n\n  /* ---- Variant: Success ---- */\n\n  :host([variant='success']) .toast {\n    background: rgba(94, 139, 127, 0.12);\n    border-color: var(--mellow-colors-viridian-green-400, #5e8b7f);\n    color: var(--mellow-colors-viridian-green-400, #5e8b7f);\n  }\n\n  /* ---- Info & Accent text stays primary ---- */\n\n  :host([variant='info']) .message,\n  :host([variant='accent']) .message,\n  .message {\n    color: var(--mellow-colors-primary-shark, #232222);\n  }\n\n  :host([variant='danger']) .message {\n    color: var(--mellow-colors-red-punch-600, #db4933);\n  }\n\n  :host([variant='warning']) .message {\n    color: var(--mellow-colors-yellow-sea-600, #e27f00);\n  }\n\n  :host([variant='success']) .message {\n    color: var(--mellow-colors-viridian-green-400, #5e8b7f);\n  }\n\n  /* ---- Icon ---- */\n\n  .icon-frame {\n    flex-shrink: 0;\n    width: 20px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n  }\n\n  .icon-frame ::slotted(*),\n  .icon-frame svg {\n    width: 20px;\n    height: 20px;\n    color: inherit;\n  }\n\n  /* ---- Message ---- */\n\n  .message {\n    flex: 1;\n    min-width: 0;\n    align-self: stretch;\n    white-space: pre-wrap;\n  }\n\n  /* ---- Close button ---- */\n\n  .close-btn {\n    flex-shrink: 0;\n    width: 16px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    color: inherit;\n    opacity: 0.7;\n  }\n\n  .close-btn:hover {\n    opacity: 1;\n  }\n\n  .close-btn svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  /* ---- Animations ---- */\n\n  @keyframes slideIn {\n    from {\n      transform: translateY(-100%);\n      opacity: 0;\n    }\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes fadeOut {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  .toast.entering {\n    animation: slideIn 200ms ease;\n  }\n\n  .toast.exiting {\n    animation: fadeOut 200ms ease;\n  }\n`\n"],"names":["toastStyles","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;"}

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

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

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

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

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+export declare class MellowTooltip extends LitElement {
+    static styles: import("lit").CSSResult[];
+    content: string;
+    subtitle: string;
+    placement: TooltipPlacement;
+    delay: number;
+    private _visible;
+    private _timerId;
+    private readonly _tooltipId;
+    updated(changedProperties: Map<PropertyKey, unknown>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleShow;
+    private _handleHide;
+    private _handleKeydown;
+    private _clearTimer;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-tooltip': MellowTooltip;
+    }
+}
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAK/C,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAIlE,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAAkB;IAGxC,OAAO,SAAK;IAGZ,QAAQ,SAAK;IAGb,SAAS,EAAE,gBAAgB,CAAQ;IAGnC,KAAK,SAAM;IAGX,OAAO,CAAC,QAAQ,CAAQ;IAExB,OAAO,CAAC,QAAQ,CAA6C;IAE7D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAyC;IAE3D,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAW3D,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAUrC,OAAO,CAAC,WAAW,CAKlB;IAED,OAAO,CAAC,WAAW,CAGlB;IAED,OAAO,CAAC,cAAc,CAIrB;IAED,OAAO,CAAC,WAAW;IAOV,MAAM;CAwBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAA;KAChC;CACF"}

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,78 @@
+import { LitElement as p, nothing as u, html as a } from "lit";
+import { property as r, state as _, customElement as c } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { tooltipStyles as v } from "./tooltip.styles.js";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (t, l, h, o) => {
+  for (var i = o > 1 ? void 0 : o ? f(l, h) : l, n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (i = (o ? d(l, h, i) : d(i)) || i);
+  return o && i && b(l, h, i), i;
+};
+let y = 0, e = class extends p {
+  constructor() {
+    super(...arguments), this.content = "", this.subtitle = "", this.placement = "top", this.delay = 200, this._visible = !1, this._timerId = null, this._tooltipId = `mellow-tooltip-${++y}`, this._handleShow = () => {
+      this._clearTimer(), this._timerId = setTimeout(() => {
+        this._visible = !0;
+      }, this.delay);
+    }, this._handleHide = () => {
+      this._clearTimer(), this._visible = !1;
+    }, this._handleKeydown = (t) => {
+      t.key === "Escape" && this._handleHide();
+    };
+  }
+  updated(t) {
+    super.updated(t), t.has("subtitle") && (this.subtitle ? this.setAttribute("subtitle", this.subtitle) : this.removeAttribute("subtitle"));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("aria-describedby", this._tooltipId), this.addEventListener("mouseenter", this._handleShow), this.addEventListener("focusin", this._handleShow), this.addEventListener("mouseleave", this._handleHide), this.addEventListener("focusout", this._handleHide), this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._clearTimer(), this.removeEventListener("mouseenter", this._handleShow), this.removeEventListener("focusin", this._handleShow), this.removeEventListener("mouseleave", this._handleHide), this.removeEventListener("focusout", this._handleHide), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  _clearTimer() {
+    this._timerId !== null && (clearTimeout(this._timerId), this._timerId = null);
+  }
+  render() {
+    const t = {
+      tooltip: !0,
+      visible: this._visible,
+      [this.placement]: !0
+    };
+    return a`
+      <slot></slot>
+      <div
+        id=${this._tooltipId}
+        class=${m(t)}
+        role="tooltip"
+      >
+        <div class="tooltip__body">
+          <p class="tooltip__title">${this.content}</p>
+          ${this.subtitle ? a`<p class="tooltip__subtitle">${this.subtitle}</p>` : u}
+        </div>
+        <div class="tooltip__arrow"></div>
+      </div>
+    `;
+  }
+};
+e.styles = [v];
+s([
+  r()
+], e.prototype, "content", 2);
+s([
+  r()
+], e.prototype, "subtitle", 2);
+s([
+  r({ reflect: !0 })
+], e.prototype, "placement", 2);
+s([
+  r({ type: Number })
+], e.prototype, "delay", 2);
+s([
+  _()
+], e.prototype, "_visible", 2);
+e = s([
+  c("mellow-tooltip")
+], e);
+export {
+  e as MellowTooltip
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { tooltipStyles } from './tooltip.styles.js'\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'\n\nlet tooltipIdCounter = 0\n\n@customElement('mellow-tooltip')\nexport class MellowTooltip extends LitElement {\n  static override styles = [tooltipStyles]\n\n  @property()\n  content = ''\n\n  @property()\n  subtitle = ''\n\n  @property({ reflect: true })\n  placement: TooltipPlacement = 'top'\n\n  @property({ type: Number })\n  delay = 200\n\n  @state()\n  private _visible = false\n\n  private _timerId: ReturnType<typeof setTimeout> | null = null\n\n  private readonly _tooltipId = `mellow-tooltip-${++tooltipIdCounter}`\n\n  override updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties)\n    if (changedProperties.has('subtitle')) {\n      if (this.subtitle) {\n        this.setAttribute('subtitle', this.subtitle)\n      } else {\n        this.removeAttribute('subtitle')\n      }\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('aria-describedby', this._tooltipId)\n    this.addEventListener('mouseenter', this._handleShow)\n    this.addEventListener('focusin', this._handleShow)\n    this.addEventListener('mouseleave', this._handleHide)\n    this.addEventListener('focusout', this._handleHide)\n    this.addEventListener('keydown', this._handleKeydown)\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this._clearTimer()\n    this.removeEventListener('mouseenter', this._handleShow)\n    this.removeEventListener('focusin', this._handleShow)\n    this.removeEventListener('mouseleave', this._handleHide)\n    this.removeEventListener('focusout', this._handleHide)\n    this.removeEventListener('keydown', this._handleKeydown)\n  }\n\n  private _handleShow = (): void => {\n    this._clearTimer()\n    this._timerId = setTimeout(() => {\n      this._visible = true\n    }, this.delay)\n  }\n\n  private _handleHide = (): void => {\n    this._clearTimer()\n    this._visible = false\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape') {\n      this._handleHide()\n    }\n  }\n\n  private _clearTimer(): void {\n    if (this._timerId !== null) {\n      clearTimeout(this._timerId)\n      this._timerId = null\n    }\n  }\n\n  override render() {\n    const classes = {\n      tooltip: true,\n      visible: this._visible,\n      [this.placement]: true,\n    }\n\n    return html`\n      <slot></slot>\n      <div\n        id=${this._tooltipId}\n        class=${classMap(classes)}\n        role=\"tooltip\"\n      >\n        <div class=\"tooltip__body\">\n          <p class=\"tooltip__title\">${this.content}</p>\n          ${this.subtitle\n            ? html`<p class=\"tooltip__subtitle\">${this.subtitle}</p>`\n            : nothing}\n        </div>\n        <div class=\"tooltip__arrow\"></div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-tooltip': MellowTooltip\n  }\n}\n"],"names":["tooltipIdCounter","MellowTooltip","LitElement","e","changedProperties","classes","html","classMap","nothing","tooltipStyles","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;AAOA,IAAIA,IAAmB,GAGVC,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAA,UAAU,IAGV,KAAA,WAAW,IAGX,KAAA,YAA8B,OAG9B,KAAA,QAAQ,KAGR,KAAQ,WAAW,IAEnB,KAAQ,WAAiD,MAEzD,KAAiB,aAAa,kBAAkB,EAAEF,CAAgB,IAiClE,KAAQ,cAAc,MAAY;AAChC,WAAK,YAAA,GACL,KAAK,WAAW,WAAW,MAAM;AAC/B,aAAK,WAAW;AAAA,MAClB,GAAG,KAAK,KAAK;AAAA,IACf,GAEA,KAAQ,cAAc,MAAY;AAChC,WAAK,YAAA,GACL,KAAK,WAAW;AAAA,IAClB,GAEA,KAAQ,iBAAiB,CAACG,MAA2B;AACnD,MAAIA,EAAE,QAAQ,YACZ,KAAK,YAAA;AAAA,IAET;AAAA,EAAA;AAAA,EA/CS,QAAQC,GAAoD;AACnE,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,UAAU,MAC9B,KAAK,WACP,KAAK,aAAa,YAAY,KAAK,QAAQ,IAE3C,KAAK,gBAAgB,UAAU;AAAA,EAGrC;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,aAAa,oBAAoB,KAAK,UAAU,GACrD,KAAK,iBAAiB,cAAc,KAAK,WAAW,GACpD,KAAK,iBAAiB,WAAW,KAAK,WAAW,GACjD,KAAK,iBAAiB,cAAc,KAAK,WAAW,GACpD,KAAK,iBAAiB,YAAY,KAAK,WAAW,GAClD,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EACtD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,YAAA,GACL,KAAK,oBAAoB,cAAc,KAAK,WAAW,GACvD,KAAK,oBAAoB,WAAW,KAAK,WAAW,GACpD,KAAK,oBAAoB,cAAc,KAAK,WAAW,GACvD,KAAK,oBAAoB,YAAY,KAAK,WAAW,GACrD,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA,EAoBQ,cAAoB;AAC1B,IAAI,KAAK,aAAa,SACpB,aAAa,KAAK,QAAQ,GAC1B,KAAK,WAAW;AAAA,EAEpB;AAAA,EAES,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,SAAS;AAAA,MACT,SAAS,KAAK;AAAA,MACd,CAAC,KAAK,SAAS,GAAG;AAAA,IAAA;AAGpB,WAAOC;AAAA;AAAA;AAAA,aAGE,KAAK,UAAU;AAAA,gBACZC,EAASF,CAAO,CAAC;AAAA;AAAA;AAAA;AAAA,sCAIK,KAAK,OAAO;AAAA,YACtC,KAAK,WACHC,iCAAoC,KAAK,QAAQ,SACjDE,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnB;AACF;AAtGaP,EACK,SAAS,CAACQ,CAAa;AAGvCC,EAAA;AAAA,EADCC,EAAA;AAAS,GAHCV,EAIX,WAAA,WAAA,CAAA;AAGAS,EAAA;AAAA,EADCC,EAAA;AAAS,GANCV,EAOX,WAAA,YAAA,CAAA;AAGAS,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAThBV,EAUX,WAAA,aAAA,CAAA;AAGAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAZfV,EAaX,WAAA,SAAA,CAAA;AAGQS,EAAA;AAAA,EADPE,EAAA;AAAM,GAfIX,EAgBH,WAAA,YAAA,CAAA;AAhBGA,IAANS,EAAA;AAAA,EADNG,EAAc,gBAAgB;AAAA,GAClBZ,CAAA;"}

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

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

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

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