@francofantomius/material-components 1.1.1 → 1.2.0

package/dist/chunks/tooltip-Ds3lNowS.js

@@ -0,0 +1,380 @@
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o, query as s } from "lit/decorators.js";
+//#region src/components/tooltip/tooltip.css.ts
+var c = n`
+  :host {
+    display: inline-block;
+    position: relative;
+  }
+
+  .tooltip {
+    box-sizing: border-box;
+    position: fixed;
+    z-index: 1000;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.92);
+    transition:
+      opacity 150ms cubic-bezier(0, 0, 0.2, 1),
+      transform 150ms cubic-bezier(0, 0, 0.2, 1),
+      visibility 150ms linear;
+    word-wrap: break-word;
+    font-family: var(--md-sys-typescale-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif);
+  }
+
+  :host([open]) .tooltip {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+  }
+
+  /* Plain Tooltip */
+  :host(:not([rich])) .tooltip {
+    background-color: var(--md-sys-color-inverse-surface, #313033);
+    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);
+    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+    padding: 4px 8px;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    letter-spacing: 0.4px;
+    min-height: 24px;
+    max-width: 240px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--md-sys-elevation-level1, 0 1px 3px rgba(0, 0, 0, 0.2));
+    user-select: none;
+    text-align: center;
+  }
+
+  /* Rich Tooltip */
+  :host([rich]) .tooltip {
+    background-color: var(--md-sys-color-surface-container, #EDE7EE);
+    color: var(--md-sys-color-on-surface-variant, #49454E);
+    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
+    border-radius: var(--md-sys-shape-corner-medium, 12px);
+    padding: 12px 16px;
+    min-width: 180px;
+    max-width: 320px;
+    box-shadow: var(--md-sys-elevation-level2, 0 2px 6px 2px rgba(0, 0, 0, 0.15));
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    text-align: left;
+  }
+
+  :host([rich][open]) .tooltip {
+    pointer-events: auto;
+  }
+
+  .subhead,
+  .headline {
+    color: var(--md-sys-color-on-surface, #1D1B20);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    margin: 0;
+  }
+
+  .supporting-text {
+    color: var(--md-sys-color-on-surface-variant, #49454E);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  .content {
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+
+  .actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 6px;
+  }
+
+  .action-button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--md-sys-color-primary, #6750A4);
+    padding: 4px 8px;
+    border-radius: var(--md-sys-shape-corner-extra-small, 4px);
+    transition: background-color 150ms ease;
+  }
+
+  .action-button:hover {
+    background-color: rgba(103, 80, 164, 0.08);
+  }
+
+  .action-button:focus-visible {
+    outline: 2px solid var(--md-sys-color-primary, #6750A4);
+    outline-offset: 1px;
+  }
+
+  /* Caret Arrow */
+  .caret {
+    display: none;
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  :host([has-caret]) .caret {
+    display: block;
+  }
+
+  :host([position='top'][has-caret]) .caret {
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid var(--md-sys-color-inverse-surface, #313033);
+  }
+
+  :host([rich][position='top'][has-caret]) .caret {
+    border-top-color: var(--md-sys-color-surface-container, #EDE7EE);
+  }
+
+  :host([position='bottom'][has-caret]) .caret {
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid var(--md-sys-color-inverse-surface, #313033);
+  }
+
+  :host([rich][position='bottom'][has-caret]) .caret {
+    border-bottom-color: var(--md-sys-color-surface-container, #EDE7EE);
+  }
+
+  :host([position='left'][has-caret]) .caret {
+    right: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 6px solid var(--md-sys-color-inverse-surface, #313033);
+  }
+
+  :host([rich][position='left'][has-caret]) .caret {
+    border-left-color: var(--md-sys-color-surface-container, #EDE7EE);
+  }
+
+  :host([position='right'][has-caret]) .caret {
+    left: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-right: 6px solid var(--md-sys-color-inverse-surface, #313033);
+  }
+
+  :host([rich][position='right'][has-caret]) .caret {
+    border-right-color: var(--md-sys-color-surface-container, #EDE7EE);
+  }
+`, l = class extends e {
+	constructor(...e) {
+		super(...e), this.open = !1, this.position = "bottom", this.rich = !1, this.for = "", this.value = "", this.text = "", this.headline = "", this.actionText = "", this.showDelay = 500, this.hideDelay = 150, this.persistent = !1, this.hasCaret = !1, this.disabled = !1, this._anchorElement = null, this._boundAnchor = null, this._showTimer = null, this._hideTimer = null, this.handleAnchorMouseEnter = () => {
+			this.disabled || (this.clearTimers(), this.showDelay > 0 ? this._showTimer = setTimeout(() => {
+				this.show();
+			}, this.showDelay) : this.show());
+		}, this.handleAnchorMouseLeave = () => {
+			this.disabled || this.persistent || (this._showTimer !== null && (clearTimeout(this._showTimer), this._showTimer = null), this.hideDelay > 0 ? this._hideTimer = setTimeout(() => {
+				this.hide();
+			}, this.hideDelay) : this.hide());
+		}, this.handleAnchorFocus = () => {
+			this.disabled || (this.clearTimers(), this.show());
+		}, this.handleAnchorBlur = () => {
+			this.disabled || this.persistent || (this.clearTimers(), this.hide());
+		}, this.handleTooltipMouseEnter = () => {
+			this.rich && this.open && this._hideTimer !== null && (clearTimeout(this._hideTimer), this._hideTimer = null);
+		}, this.handleTooltipMouseLeave = () => {
+			this.rich && this.open && !this.persistent && this.handleAnchorMouseLeave();
+		}, this.handleKeyDown = (e) => {
+			e.key === "Escape" && this.open && this.hide();
+		}, this.handleWindowChange = () => {
+			this.open && this.updatePosition();
+		}, this.handleDocumentClick = (e) => {
+			if (!this.open || !this.rich) return;
+			let t = e.composedPath(), n = this.resolveAnchorElement();
+			!t.includes(this) && (!n || !t.includes(n)) && this.hide();
+		}, this.handleActionClick = () => {
+			this.emitEvent("action", { target: this }), this.persistent || this.hide();
+		};
+	}
+	static {
+		this.styles = [e.styles, c];
+	}
+	get delay() {
+		return this.showDelay;
+	}
+	set delay(e) {
+		this.showDelay = e;
+	}
+	get anchor() {
+		return this._anchorElement || this.resolveAnchorElement();
+	}
+	set anchor(e) {
+		this._anchorElement = e, this.bindAnchorEvents();
+	}
+	get target() {
+		return this.anchor;
+	}
+	set target(e) {
+		this.anchor = e;
+	}
+	connectedCallback() {
+		super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown), window.addEventListener("resize", this.handleWindowChange), window.addEventListener("scroll", this.handleWindowChange, !0), document.addEventListener("pointerdown", this.handleDocumentClick), this.bindAnchorEvents();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", this.handleWindowChange), window.removeEventListener("scroll", this.handleWindowChange, !0), document.removeEventListener("pointerdown", this.handleDocumentClick), this.unbindAnchorEvents(), this.clearTimers();
+	}
+	firstUpdated() {
+		this.bindAnchorEvents();
+	}
+	updated(e) {
+		super.updated(e), e.has("for") && this.bindAnchorEvents(), e.has("open") && (this.open ? (this.updatePosition(), this.emitEvent("open", { target: this })) : this.emitEvent("close", { target: this })), e.has("position") && this.open && this.updatePosition();
+	}
+	resolveAnchorElement() {
+		if (this._anchorElement) return this._anchorElement;
+		if (this.for) {
+			let e = this.getRootNode(), t = e?.getElementById ? e.getElementById(this.for) : document.getElementById(this.for);
+			if (t) return t;
+		}
+		return this.querySelector("[slot=\"anchor\"]") || (this.previousElementSibling instanceof HTMLElement ? this.previousElementSibling : this.parentElement && this.parentElement !== document.body && this.parentElement !== document.documentElement ? this.parentElement : null);
+	}
+	bindAnchorEvents() {
+		let e = this.resolveAnchorElement();
+		e !== this._boundAnchor && (this.unbindAnchorEvents(), this._boundAnchor = e, this._boundAnchor && (this._boundAnchor.addEventListener("mouseenter", this.handleAnchorMouseEnter), this._boundAnchor.addEventListener("mouseleave", this.handleAnchorMouseLeave), this._boundAnchor.addEventListener("focusin", this.handleAnchorFocus), this._boundAnchor.addEventListener("focusout", this.handleAnchorBlur)));
+	}
+	unbindAnchorEvents() {
+		this._boundAnchor &&= (this._boundAnchor.removeEventListener("mouseenter", this.handleAnchorMouseEnter), this._boundAnchor.removeEventListener("mouseleave", this.handleAnchorMouseLeave), this._boundAnchor.removeEventListener("focusin", this.handleAnchorFocus), this._boundAnchor.removeEventListener("focusout", this.handleAnchorBlur), null);
+	}
+	clearTimers() {
+		this._showTimer !== null && (clearTimeout(this._showTimer), this._showTimer = null), this._hideTimer !== null && (clearTimeout(this._hideTimer), this._hideTimer = null);
+	}
+	show() {
+		this.disabled || this.open || (this.open = !0, this.updatePosition());
+	}
+	hide() {
+		this.open &&= !1;
+	}
+	close() {
+		this.hide();
+	}
+	toggle() {
+		this.open ? this.hide() : this.show();
+	}
+	updatePosition() {
+		if (!this.tooltipPanel) return;
+		let e = this.resolveAnchorElement();
+		if (!e) return;
+		let t = e.getBoundingClientRect(), n = this.tooltipPanel.getBoundingClientRect(), r = n.width || (this.rich ? 220 : 80), i = n.height || (this.rich ? 80 : 24), a = this.rich ? 8 : 4, o = 0, s = 0;
+		switch (this.position) {
+			case "top":
+				o = t.top - i - a, s = t.left + (t.width - r) / 2;
+				break;
+			case "bottom":
+				o = t.bottom + a, s = t.left + (t.width - r) / 2;
+				break;
+			case "left":
+				o = t.top + (t.height - i) / 2, s = t.left - r - a;
+				break;
+			case "right": o = t.top + (t.height - i) / 2, s = t.right + a;
+		}
+		let c = typeof window < "u" ? window.innerWidth : 1024, l = typeof window < "u" ? window.innerHeight : 768;
+		s = Math.max(8, Math.min(s, c - r - 8)), o = Math.max(8, Math.min(o, l - i - 8)), this.tooltipPanel.style.top = `${o}px`, this.tooltipPanel.style.left = `${s}px`;
+	}
+	render() {
+		let e = this.value || this.text;
+		return r`
+      <slot name="anchor"></slot>
+
+      <div
+        class="tooltip"
+        role="tooltip"
+        aria-hidden=${this.open ? "false" : "true"}
+        @mouseenter=${this.handleTooltipMouseEnter}
+        @mouseleave=${this.handleTooltipMouseLeave}
+      >
+        <span class="caret" aria-hidden="true"></span>
+
+        ${this.rich ? r`
+              ${this.headline ? r`<h3 class="headline"><slot name="headline">${this.headline}</slot></h3>` : r`<slot name="headline"></slot>`}
+              <div class="supporting-text">
+                <slot>${e}</slot>
+              </div>
+              ${this.actionText || this.querySelector("[slot=\"actions\"]") ? r`
+                    <div class="actions">
+                      <slot name="actions">
+                        ${this.actionText ? r`
+                              <button
+                                type="button"
+                                class="action-button"
+                                @click=${this.handleActionClick}
+                              >
+                                ${this.actionText}
+                              </button>
+                            ` : i}
+                      </slot>
+                    </div>
+                  ` : i}
+            ` : r`
+              <span class="content">
+                <slot>${e}</slot>
+              </span>
+            `}
+      </div>
+    `;
+	}
+};
+t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "open", void 0), t([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "position", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "rich", void 0), t([o({
+	type: String,
+	reflect: !0
+})], l.prototype, "for", void 0), t([o({ type: String })], l.prototype, "value", void 0), t([o({ type: String })], l.prototype, "text", void 0), t([o({ type: String })], l.prototype, "headline", void 0), t([o({
+	type: String,
+	attribute: "action-text"
+})], l.prototype, "actionText", void 0), t([o({
+	type: Number,
+	attribute: "show-delay"
+})], l.prototype, "showDelay", void 0), t([o({
+	type: Number,
+	attribute: "hide-delay"
+})], l.prototype, "hideDelay", void 0), t([o({ type: Number })], l.prototype, "delay", null), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "persistent", void 0), t([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "has-caret"
+})], l.prototype, "hasCaret", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), t([s(".tooltip")], l.prototype, "tooltipPanel", void 0), l = t([a("md-tooltip")], l);
+//#endregion
+export { l as t };
+
+//# sourceMappingURL=tooltip-Ds3lNowS.js.map

package/dist/chunks/{tooltip-CE7JMHMu.js.map → tooltip-Ds3lNowS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tooltip-CE7JMHMu.js","names":[],"sources":["../../src/components/tooltip/tooltip.css.ts","../../src/components/tooltip/tooltip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tooltipStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  .tooltip {\n    box-sizing: border-box;\n    position: fixed;\n    z-index: 1000;\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(0.92);\n    transition:\n      opacity 150ms cubic-bezier(0, 0, 0.2, 1),\n      transform 150ms cubic-bezier(0, 0, 0.2, 1),\n      visibility 150ms linear;\n    word-wrap: break-word;\n    font-family: var(--md-sys-typescale-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif);\n  }\n\n  :host([open]) .tooltip {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n  }\n\n  /* Plain Tooltip */\n  :host(:not([rich])) .tooltip {\n    background-color: var(--md-sys-color-inverse-surface, #313033);\n    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n    padding: 4px 8px;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 16px;\n    letter-spacing: 0.4px;\n    min-height: 24px;\n    max-width: 240px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: var(--md-sys-elevation-level1, 0 1px 3px rgba(0, 0, 0, 0.2));\n    user-select: none;\n    text-align: center;\n  }\n\n  /* Rich Tooltip */\n  :host([rich]) .tooltip {\n    background-color: var(--md-sys-color-surface-container, #EDE7EE);\n    color: var(--md-sys-color-on-surface-variant, #49454E);\n    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n    padding: 12px 16px;\n    min-width: 180px;\n    max-width: 320px;\n    box-shadow: var(--md-sys-elevation-level2, 0 2px 6px 2px rgba(0, 0, 0, 0.15));\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    text-align: left;\n  }\n\n  :host([rich][open]) .tooltip {\n    pointer-events: auto;\n  }\n\n  .subhead,\n  .headline {\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    margin: 0;\n  }\n\n  .supporting-text {\n    color: var(--md-sys-color-on-surface-variant, #49454E);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n\n  .content {\n    color: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n\n  .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    margin-top: 6px;\n  }\n\n  .action-button {\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--md-sys-color-primary, #6750A4);\n    padding: 4px 8px;\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n    transition: background-color 150ms ease;\n  }\n\n  .action-button:hover {\n    background-color: rgba(103, 80, 164, 0.08);\n  }\n\n  .action-button:focus-visible {\n    outline: 2px solid var(--md-sys-color-primary, #6750A4);\n    outline-offset: 1px;\n  }\n\n  /* Caret Arrow */\n  .caret {\n    display: none;\n    position: absolute;\n    width: 0;\n    height: 0;\n  }\n\n  :host([has-caret]) .caret {\n    display: block;\n  }\n\n  :host([position='top'][has-caret]) .caret {\n    bottom: -6px;\n    left: 50%;\n    transform: translateX(-50%);\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-top: 6px solid var(--md-sys-color-inverse-surface, #313033);\n  }\n\n  :host([rich][position='top'][has-caret]) .caret {\n    border-top-color: var(--md-sys-color-surface-container, #EDE7EE);\n  }\n\n  :host([position='bottom'][has-caret]) .caret {\n    top: -6px;\n    left: 50%;\n    transform: translateX(-50%);\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-bottom: 6px solid var(--md-sys-color-inverse-surface, #313033);\n  }\n\n  :host([rich][position='bottom'][has-caret]) .caret {\n    border-bottom-color: var(--md-sys-color-surface-container, #EDE7EE);\n  }\n\n  :host([position='left'][has-caret]) .caret {\n    right: -6px;\n    top: 50%;\n    transform: translateY(-50%);\n    border-top: 6px solid transparent;\n    border-bottom: 6px solid transparent;\n    border-left: 6px solid var(--md-sys-color-inverse-surface, #313033);\n  }\n\n  :host([rich][position='left'][has-caret]) .caret {\n    border-left-color: var(--md-sys-color-surface-container, #EDE7EE);\n  }\n\n  :host([position='right'][has-caret]) .caret {\n    left: -6px;\n    top: 50%;\n    transform: translateY(-50%);\n    border-top: 6px solid transparent;\n    border-bottom: 6px solid transparent;\n    border-right: 6px solid var(--md-sys-color-inverse-surface, #313033);\n  }\n\n  :host([rich][position='right'][has-caret]) .caret {\n    border-right-color: var(--md-sys-color-surface-container, #EDE7EE);\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { tooltipStyles } from './tooltip.css.js';\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * Material Design 3 Tooltip component.\n * Plain and rich tooltips providing contextual descriptions or interactive details.\n *\n * @element md-tooltip\n *\n * @slot - Default slot for tooltip text or supporting content.\n * @slot headline - Custom headline/subhead element for rich tooltips.\n * @slot actions - Custom action buttons for rich tooltips.\n * @slot anchor - Slotted anchor element (optional).\n *\n * @fires open - Dispatched when the tooltip becomes visible.\n * @fires close - Dispatched when the tooltip is hidden.\n * @fires action - Dispatched when the rich tooltip action button is clicked.\n */\n@customElement('md-tooltip')\nexport class MdTooltip extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tooltipStyles];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, reflect: true })\n  position: TooltipPosition = 'bottom';\n\n  @property({ type: Boolean, reflect: true })\n  rich = false;\n\n  @property({ type: String, reflect: true })\n  for = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  text = '';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String, attribute: 'action-text' })\n  actionText = '';\n\n  @property({ type: Number, attribute: 'show-delay' })\n  showDelay = 500;\n\n  @property({ type: Number, attribute: 'hide-delay' })\n  hideDelay = 150;\n\n  @property({ type: Number })\n  get delay(): number {\n    return this.showDelay;\n  }\n\n  set delay(val: number) {\n    this.showDelay = val;\n  }\n\n  @property({ type: Boolean, reflect: true })\n  persistent = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'has-caret' })\n  hasCaret = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @query('.tooltip')\n  tooltipPanel!: HTMLElement;\n\n  private _anchorElement: HTMLElement | null = null;\n  private _boundAnchor: HTMLElement | null = null;\n  private _showTimer: ReturnType<typeof setTimeout> | null = null;\n  private _hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  get anchor(): HTMLElement | null {\n    return this._anchorElement || this.resolveAnchorElement();\n  }\n\n  set anchor(element: HTMLElement | null) {\n    this._anchorElement = element;\n    this.bindAnchorEvents();\n  }\n\n  get target(): HTMLElement | null {\n    return this.anchor;\n  }\n\n  set target(element: HTMLElement | null) {\n    this.anchor = element;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('keydown', this.handleKeyDown);\n    window.addEventListener('resize', this.handleWindowChange);\n    window.addEventListener('scroll', this.handleWindowChange, true);\n    document.addEventListener('pointerdown', this.handleDocumentClick);\n    this.bindAnchorEvents();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('keydown', this.handleKeyDown);\n    window.removeEventListener('resize', this.handleWindowChange);\n    window.removeEventListener('scroll', this.handleWindowChange, true);\n    document.removeEventListener('pointerdown', this.handleDocumentClick);\n    this.unbindAnchorEvents();\n    this.clearTimers();\n  }\n\n  override firstUpdated() {\n    this.bindAnchorEvents();\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('for')) {\n      this.bindAnchorEvents();\n    }\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.updatePosition();\n        this.emitEvent('open', { target: this });\n      } else {\n        this.emitEvent('close', { target: this });\n      }\n    }\n\n    if (changedProperties.has('position') && this.open) {\n      this.updatePosition();\n    }\n  }\n\n  private resolveAnchorElement(): HTMLElement | null {\n    if (this._anchorElement) {\n      return this._anchorElement;\n    }\n\n    if (this.for) {\n      const root = this.getRootNode() as Document | ShadowRoot;\n      const el = root?.getElementById\n        ? root.getElementById(this.for)\n        : document.getElementById(this.for);\n      if (el) return el;\n    }\n\n    // Check slotted anchor\n    const slottedAnchor = this.querySelector('[slot=\"anchor\"]') as HTMLElement;\n    if (slottedAnchor) return slottedAnchor;\n\n    // Check previous sibling\n    if (this.previousElementSibling instanceof HTMLElement) {\n      return this.previousElementSibling;\n    }\n\n    // Check parent element if not body / html\n    if (\n      this.parentElement &&\n      this.parentElement !== document.body &&\n      this.parentElement !== document.documentElement\n    ) {\n      return this.parentElement;\n    }\n\n    return null;\n  }\n\n  private bindAnchorEvents() {\n    const anchor = this.resolveAnchorElement();\n    if (anchor === this._boundAnchor) return;\n\n    this.unbindAnchorEvents();\n    this._boundAnchor = anchor;\n\n    if (this._boundAnchor) {\n      this._boundAnchor.addEventListener('mouseenter', this.handleAnchorMouseEnter);\n      this._boundAnchor.addEventListener('mouseleave', this.handleAnchorMouseLeave);\n      this._boundAnchor.addEventListener('focusin', this.handleAnchorFocus);\n      this._boundAnchor.addEventListener('focusout', this.handleAnchorBlur);\n    }\n  }\n\n  private unbindAnchorEvents() {\n    if (this._boundAnchor) {\n      this._boundAnchor.removeEventListener('mouseenter', this.handleAnchorMouseEnter);\n      this._boundAnchor.removeEventListener('mouseleave', this.handleAnchorMouseLeave);\n      this._boundAnchor.removeEventListener('focusin', this.handleAnchorFocus);\n      this._boundAnchor.removeEventListener('focusout', this.handleAnchorBlur);\n      this._boundAnchor = null;\n    }\n  }\n\n  private clearTimers() {\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this._hideTimer !== null) {\n      clearTimeout(this._hideTimer);\n      this._hideTimer = null;\n    }\n  }\n\n  private handleAnchorMouseEnter = () => {\n    if (this.disabled) return;\n    this.clearTimers();\n    if (this.showDelay > 0) {\n      this._showTimer = setTimeout(() => {\n        this.show();\n      }, this.showDelay);\n    } else {\n      this.show();\n    }\n  };\n\n  private handleAnchorMouseLeave = () => {\n    if (this.disabled || this.persistent) return;\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this.hideDelay > 0) {\n      this._hideTimer = setTimeout(() => {\n        this.hide();\n      }, this.hideDelay);\n    } else {\n      this.hide();\n    }\n  };\n\n  private handleAnchorFocus = () => {\n    if (this.disabled) return;\n    this.clearTimers();\n    this.show();\n  };\n\n  private handleAnchorBlur = () => {\n    if (this.disabled || this.persistent) return;\n    this.clearTimers();\n    this.hide();\n  };\n\n  private handleTooltipMouseEnter = () => {\n    if (this.rich && this.open) {\n      if (this._hideTimer !== null) {\n        clearTimeout(this._hideTimer);\n        this._hideTimer = null;\n      }\n    }\n  };\n\n  private handleTooltipMouseLeave = () => {\n    if (this.rich && this.open && !this.persistent) {\n      this.handleAnchorMouseLeave();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.open) {\n      this.hide();\n    }\n  };\n\n  private handleWindowChange = () => {\n    if (this.open) {\n      this.updatePosition();\n    }\n  };\n\n  private handleDocumentClick = (event: PointerEvent | MouseEvent) => {\n    if (!this.open || !this.rich) return;\n    const path = event.composedPath();\n    const anchor = this.resolveAnchorElement();\n\n    if (!path.includes(this) && (!anchor || !path.includes(anchor))) {\n      this.hide();\n    }\n  };\n\n  private handleActionClick = () => {\n    this.emitEvent('action', { target: this });\n    if (!this.persistent) {\n      this.hide();\n    }\n  };\n\n  /**\n   * Shows the tooltip.\n   */\n  show() {\n    if (this.disabled || this.open) return;\n    this.open = true;\n    this.updatePosition();\n  }\n\n  /**\n   * Hides the tooltip.\n   */\n  hide() {\n    if (!this.open) return;\n    this.open = false;\n  }\n\n  /**\n   * Alias for hide().\n   */\n  close() {\n    this.hide();\n  }\n\n  /**\n   * Toggles visibility of the tooltip.\n   */\n  toggle() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Updates coordinates of the floating tooltip relative to the anchor.\n   */\n  updatePosition() {\n    if (!this.tooltipPanel) return;\n\n    const anchor = this.resolveAnchorElement();\n    if (!anchor) return;\n\n    const anchorRect = anchor.getBoundingClientRect();\n    const tooltipRect = this.tooltipPanel.getBoundingClientRect();\n\n    // If dimensions are not yet available (e.g. initial render / Happy DOM)\n    const tWidth = tooltipRect.width || (this.rich ? 220 : 80);\n    const tHeight = tooltipRect.height || (this.rich ? 80 : 24);\n\n    const offset = this.rich ? 8 : 4;\n    let top = 0;\n    let left = 0;\n\n    switch (this.position) {\n      case 'top':\n        top = anchorRect.top - tHeight - offset;\n        left = anchorRect.left + (anchorRect.width - tWidth) / 2;\n        break;\n      case 'bottom':\n        top = anchorRect.bottom + offset;\n        left = anchorRect.left + (anchorRect.width - tWidth) / 2;\n        break;\n      case 'left':\n        top = anchorRect.top + (anchorRect.height - tHeight) / 2;\n        left = anchorRect.left - tWidth - offset;\n        break;\n      case 'right':\n        top = anchorRect.top + (anchorRect.height - tHeight) / 2;\n        left = anchorRect.right + offset;\n        break;\n    }\n\n    // Viewport boundaries clamping\n    const padding = 8;\n    const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 1024;\n    const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 768;\n\n    left = Math.max(padding, Math.min(left, viewportWidth - tWidth - padding));\n    top = Math.max(padding, Math.min(top, viewportHeight - tHeight - padding));\n\n    this.tooltipPanel.style.top = `${top}px`;\n    this.tooltipPanel.style.left = `${left}px`;\n  }\n\n  override render() {\n    const displayText = this.value || this.text;\n\n    return html`\n      <slot name=\"anchor\"></slot>\n\n      <div\n        class=\"tooltip\"\n        role=\"tooltip\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mouseenter=${this.handleTooltipMouseEnter}\n        @mouseleave=${this.handleTooltipMouseLeave}\n      >\n        <span class=\"caret\" aria-hidden=\"true\"></span>\n\n        ${this.rich\n          ? html`\n              ${this.headline\n                ? html`<h3 class=\"headline\"><slot name=\"headline\">${this.headline}</slot></h3>`\n                : html`<slot name=\"headline\"></slot>`}\n              <div class=\"supporting-text\">\n                <slot>${displayText}</slot>\n              </div>\n              ${this.actionText || this.querySelector('[slot=\"actions\"]')\n                ? html`\n                    <div class=\"actions\">\n                      <slot name=\"actions\">\n                        ${this.actionText\n                          ? html`\n                              <button\n                                type=\"button\"\n                                class=\"action-button\"\n                                @click=${this.handleActionClick}\n                              >\n                                ${this.actionText}\n                              </button>\n                            `\n                          : nothing}\n                      </slot>\n                    </div>\n                  `\n                : nothing}\n            `\n          : html`\n              <span class=\"content\">\n                <slot>${displayText}</slot>\n              </span>\n            `}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tooltip': MdTooltip;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"tooltip-Ds3lNowS.js","names":[],"sources":["../../src/components/tooltip/tooltip.css.ts","../../src/components/tooltip/tooltip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tooltipStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  .tooltip {\n    box-sizing: border-box;\n    position: fixed;\n    z-index: 1000;\n    pointer-events: none;\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(0.92);\n    transition:\n      opacity 150ms cubic-bezier(0, 0, 0.2, 1),\n      transform 150ms cubic-bezier(0, 0, 0.2, 1),\n      visibility 150ms linear;\n    word-wrap: break-word;\n    font-family: var(--md-sys-typescale-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif);\n  }\n\n  :host([open]) .tooltip {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1);\n  }\n\n  /* Plain Tooltip */\n  :host(:not([rich])) .tooltip {\n    background-color: var(--md-sys-color-inverse-surface, #313033);\n    color: var(--md-sys-color-inverse-on-surface, #F4EFF4);\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n    padding: 4px 8px;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 16px;\n    letter-spacing: 0.4px;\n    min-height: 24px;\n    max-width: 240px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: var(--md-sys-elevation-level1, 0 1px 3px rgba(0, 0, 0, 0.2));\n    user-select: none;\n    text-align: center;\n  }\n\n  /* Rich Tooltip */\n  :host([rich]) .tooltip {\n    background-color: var(--md-sys-color-surface-container, #EDE7EE);\n    color: var(--md-sys-color-on-surface-variant, #49454E);\n    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n    padding: 12px 16px;\n    min-width: 180px;\n    max-width: 320px;\n    box-shadow: var(--md-sys-elevation-level2, 0 2px 6px 2px rgba(0, 0, 0, 0.15));\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    text-align: left;\n  }\n\n  :host([rich][open]) .tooltip {\n    pointer-events: auto;\n  }\n\n  .subhead,\n  .headline {\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 20px;\n    margin: 0;\n  }\n\n  .supporting-text {\n    color: var(--md-sys-color-on-surface-variant, #49454E);\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n  }\n\n  .content {\n    color: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n\n  .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: 8px;\n    margin-top: 6px;\n  }\n\n  .action-button {\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--md-sys-color-primary, #6750A4);\n    padding: 4px 8px;\n    border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n    transition: background-color 150ms ease;\n  }\n\n  .action-button:hover {\n    background-color: rgba(103, 80, 164, 0.08);\n  }\n\n  .action-button:focus-visible {\n    outline: 2px solid var(--md-sys-color-primary, #6750A4);\n    outline-offset: 1px;\n  }\n\n  /* Caret Arrow */\n  .caret {\n    display: none;\n    position: absolute;\n    width: 0;\n    height: 0;\n  }\n\n  :host([has-caret]) .caret {\n    display: block;\n  }\n\n  :host([position='top'][has-caret]) .caret {\n    bottom: -6px;\n    left: 50%;\n    transform: translateX(-50%);\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-top: 6px solid var(--md-sys-color-inverse-surface, #313033);\n  }\n\n  :host([rich][position='top'][has-caret]) .caret {\n    border-top-color: var(--md-sys-color-surface-container, #EDE7EE);\n  }\n\n  :host([position='bottom'][has-caret]) .caret {\n    top: -6px;\n    left: 50%;\n    transform: translateX(-50%);\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-bottom: 6px solid var(--md-sys-color-inverse-surface, #313033);\n  }\n\n  :host([rich][position='bottom'][has-caret]) .caret {\n    border-bottom-color: var(--md-sys-color-surface-container, #EDE7EE);\n  }\n\n  :host([position='left'][has-caret]) .caret {\n    right: -6px;\n    top: 50%;\n    transform: translateY(-50%);\n    border-top: 6px solid transparent;\n    border-bottom: 6px solid transparent;\n    border-left: 6px solid var(--md-sys-color-inverse-surface, #313033);\n  }\n\n  :host([rich][position='left'][has-caret]) .caret {\n    border-left-color: var(--md-sys-color-surface-container, #EDE7EE);\n  }\n\n  :host([position='right'][has-caret]) .caret {\n    left: -6px;\n    top: 50%;\n    transform: translateY(-50%);\n    border-top: 6px solid transparent;\n    border-bottom: 6px solid transparent;\n    border-right: 6px solid var(--md-sys-color-inverse-surface, #313033);\n  }\n\n  :host([rich][position='right'][has-caret]) .caret {\n    border-right-color: var(--md-sys-color-surface-container, #EDE7EE);\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { tooltipStyles } from './tooltip.css.js';\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * Material Design 3 Tooltip component.\n * Plain and rich tooltips providing contextual descriptions or interactive details.\n *\n * @element md-tooltip\n *\n * @slot - Default slot for tooltip text or supporting content.\n * @slot headline - Custom headline/subhead element for rich tooltips.\n * @slot actions - Custom action buttons for rich tooltips.\n * @slot anchor - Slotted anchor element (optional).\n *\n * @fires open - Dispatched when the tooltip becomes visible.\n * @fires close - Dispatched when the tooltip is hidden.\n * @fires action - Dispatched when the rich tooltip action button is clicked.\n */\n@customElement('md-tooltip')\nexport class MdTooltip extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, tooltipStyles];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, reflect: true })\n  position: TooltipPosition = 'bottom';\n\n  @property({ type: Boolean, reflect: true })\n  rich = false;\n\n  @property({ type: String, reflect: true })\n  for = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  text = '';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String, attribute: 'action-text' })\n  actionText = '';\n\n  @property({ type: Number, attribute: 'show-delay' })\n  showDelay = 500;\n\n  @property({ type: Number, attribute: 'hide-delay' })\n  hideDelay = 150;\n\n  @property({ type: Number })\n  get delay(): number {\n    return this.showDelay;\n  }\n\n  set delay(val: number) {\n    this.showDelay = val;\n  }\n\n  @property({ type: Boolean, reflect: true })\n  persistent = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'has-caret' })\n  hasCaret = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @query('.tooltip')\n  tooltipPanel!: HTMLElement;\n\n  private _anchorElement: HTMLElement | null = null;\n  private _boundAnchor: HTMLElement | null = null;\n  private _showTimer: ReturnType<typeof setTimeout> | null = null;\n  private _hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n  get anchor(): HTMLElement | null {\n    return this._anchorElement || this.resolveAnchorElement();\n  }\n\n  set anchor(element: HTMLElement | null) {\n    this._anchorElement = element;\n    this.bindAnchorEvents();\n  }\n\n  get target(): HTMLElement | null {\n    return this.anchor;\n  }\n\n  set target(element: HTMLElement | null) {\n    this.anchor = element;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('keydown', this.handleKeyDown);\n    window.addEventListener('resize', this.handleWindowChange);\n    window.addEventListener('scroll', this.handleWindowChange, true);\n    document.addEventListener('pointerdown', this.handleDocumentClick);\n    this.bindAnchorEvents();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('keydown', this.handleKeyDown);\n    window.removeEventListener('resize', this.handleWindowChange);\n    window.removeEventListener('scroll', this.handleWindowChange, true);\n    document.removeEventListener('pointerdown', this.handleDocumentClick);\n    this.unbindAnchorEvents();\n    this.clearTimers();\n  }\n\n  override firstUpdated() {\n    this.bindAnchorEvents();\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('for')) {\n      this.bindAnchorEvents();\n    }\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.updatePosition();\n        this.emitEvent('open', { target: this });\n      } else {\n        this.emitEvent('close', { target: this });\n      }\n    }\n\n    if (changedProperties.has('position') && this.open) {\n      this.updatePosition();\n    }\n  }\n\n  private resolveAnchorElement(): HTMLElement | null {\n    if (this._anchorElement) {\n      return this._anchorElement;\n    }\n\n    if (this.for) {\n      const root = this.getRootNode() as Document | ShadowRoot;\n      const el = root?.getElementById\n        ? root.getElementById(this.for)\n        : document.getElementById(this.for);\n      if (el) return el;\n    }\n\n    // Check slotted anchor\n    const slottedAnchor = this.querySelector('[slot=\"anchor\"]') as HTMLElement;\n    if (slottedAnchor) return slottedAnchor;\n\n    // Check previous sibling\n    if (this.previousElementSibling instanceof HTMLElement) {\n      return this.previousElementSibling;\n    }\n\n    // Check parent element if not body / html\n    if (\n      this.parentElement &&\n      this.parentElement !== document.body &&\n      this.parentElement !== document.documentElement\n    ) {\n      return this.parentElement;\n    }\n\n    return null;\n  }\n\n  private bindAnchorEvents() {\n    const anchor = this.resolveAnchorElement();\n    if (anchor === this._boundAnchor) return;\n\n    this.unbindAnchorEvents();\n    this._boundAnchor = anchor;\n\n    if (this._boundAnchor) {\n      this._boundAnchor.addEventListener('mouseenter', this.handleAnchorMouseEnter);\n      this._boundAnchor.addEventListener('mouseleave', this.handleAnchorMouseLeave);\n      this._boundAnchor.addEventListener('focusin', this.handleAnchorFocus);\n      this._boundAnchor.addEventListener('focusout', this.handleAnchorBlur);\n    }\n  }\n\n  private unbindAnchorEvents() {\n    if (this._boundAnchor) {\n      this._boundAnchor.removeEventListener('mouseenter', this.handleAnchorMouseEnter);\n      this._boundAnchor.removeEventListener('mouseleave', this.handleAnchorMouseLeave);\n      this._boundAnchor.removeEventListener('focusin', this.handleAnchorFocus);\n      this._boundAnchor.removeEventListener('focusout', this.handleAnchorBlur);\n      this._boundAnchor = null;\n    }\n  }\n\n  private clearTimers() {\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this._hideTimer !== null) {\n      clearTimeout(this._hideTimer);\n      this._hideTimer = null;\n    }\n  }\n\n  private handleAnchorMouseEnter = () => {\n    if (this.disabled) return;\n    this.clearTimers();\n    if (this.showDelay > 0) {\n      this._showTimer = setTimeout(() => {\n        this.show();\n      }, this.showDelay);\n    } else {\n      this.show();\n    }\n  };\n\n  private handleAnchorMouseLeave = () => {\n    if (this.disabled || this.persistent) return;\n    if (this._showTimer !== null) {\n      clearTimeout(this._showTimer);\n      this._showTimer = null;\n    }\n    if (this.hideDelay > 0) {\n      this._hideTimer = setTimeout(() => {\n        this.hide();\n      }, this.hideDelay);\n    } else {\n      this.hide();\n    }\n  };\n\n  private handleAnchorFocus = () => {\n    if (this.disabled) return;\n    this.clearTimers();\n    this.show();\n  };\n\n  private handleAnchorBlur = () => {\n    if (this.disabled || this.persistent) return;\n    this.clearTimers();\n    this.hide();\n  };\n\n  private handleTooltipMouseEnter = () => {\n    if (this.rich && this.open) {\n      if (this._hideTimer !== null) {\n        clearTimeout(this._hideTimer);\n        this._hideTimer = null;\n      }\n    }\n  };\n\n  private handleTooltipMouseLeave = () => {\n    if (this.rich && this.open && !this.persistent) {\n      this.handleAnchorMouseLeave();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.open) {\n      this.hide();\n    }\n  };\n\n  private handleWindowChange = () => {\n    if (this.open) {\n      this.updatePosition();\n    }\n  };\n\n  private handleDocumentClick = (event: PointerEvent | MouseEvent) => {\n    if (!this.open || !this.rich) return;\n    const path = event.composedPath();\n    const anchor = this.resolveAnchorElement();\n\n    if (!path.includes(this) && (!anchor || !path.includes(anchor))) {\n      this.hide();\n    }\n  };\n\n  private handleActionClick = () => {\n    this.emitEvent('action', { target: this });\n    if (!this.persistent) {\n      this.hide();\n    }\n  };\n\n  /**\n   * Shows the tooltip.\n   */\n  show() {\n    if (this.disabled || this.open) return;\n    this.open = true;\n    this.updatePosition();\n  }\n\n  /**\n   * Hides the tooltip.\n   */\n  hide() {\n    if (!this.open) return;\n    this.open = false;\n  }\n\n  /**\n   * Alias for hide().\n   */\n  close() {\n    this.hide();\n  }\n\n  /**\n   * Toggles visibility of the tooltip.\n   */\n  toggle() {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Updates coordinates of the floating tooltip relative to the anchor.\n   */\n  updatePosition() {\n    if (!this.tooltipPanel) return;\n\n    const anchor = this.resolveAnchorElement();\n    if (!anchor) return;\n\n    const anchorRect = anchor.getBoundingClientRect();\n    const tooltipRect = this.tooltipPanel.getBoundingClientRect();\n\n    // If dimensions are not yet available (e.g. initial render / Happy DOM)\n    const tWidth = tooltipRect.width || (this.rich ? 220 : 80);\n    const tHeight = tooltipRect.height || (this.rich ? 80 : 24);\n\n    const offset = this.rich ? 8 : 4;\n    let top = 0;\n    let left = 0;\n\n    switch (this.position) {\n      case 'top':\n        top = anchorRect.top - tHeight - offset;\n        left = anchorRect.left + (anchorRect.width - tWidth) / 2;\n        break;\n      case 'bottom':\n        top = anchorRect.bottom + offset;\n        left = anchorRect.left + (anchorRect.width - tWidth) / 2;\n        break;\n      case 'left':\n        top = anchorRect.top + (anchorRect.height - tHeight) / 2;\n        left = anchorRect.left - tWidth - offset;\n        break;\n      case 'right':\n        top = anchorRect.top + (anchorRect.height - tHeight) / 2;\n        left = anchorRect.right + offset;\n        break;\n    }\n\n    // Viewport boundaries clamping\n    const padding = 8;\n    const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 1024;\n    const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 768;\n\n    left = Math.max(padding, Math.min(left, viewportWidth - tWidth - padding));\n    top = Math.max(padding, Math.min(top, viewportHeight - tHeight - padding));\n\n    this.tooltipPanel.style.top = `${top}px`;\n    this.tooltipPanel.style.left = `${left}px`;\n  }\n\n  override render() {\n    const displayText = this.value || this.text;\n\n    return html`\n      <slot name=\"anchor\"></slot>\n\n      <div\n        class=\"tooltip\"\n        role=\"tooltip\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mouseenter=${this.handleTooltipMouseEnter}\n        @mouseleave=${this.handleTooltipMouseLeave}\n      >\n        <span class=\"caret\" aria-hidden=\"true\"></span>\n\n        ${this.rich\n          ? html`\n              ${this.headline\n                ? html`<h3 class=\"headline\"><slot name=\"headline\">${this.headline}</slot></h3>`\n                : html`<slot name=\"headline\"></slot>`}\n              <div class=\"supporting-text\">\n                <slot>${displayText}</slot>\n              </div>\n              ${this.actionText || this.querySelector('[slot=\"actions\"]')\n                ? html`\n                    <div class=\"actions\">\n                      <slot name=\"actions\">\n                        ${this.actionText\n                          ? html`\n                              <button\n                                type=\"button\"\n                                class=\"action-button\"\n                                @click=${this.handleActionClick}\n                              >\n                                ${this.actionText}\n                              </button>\n                            `\n                          : nothing}\n                      </slot>\n                    </div>\n                  `\n                : nothing}\n            `\n          : html`\n              <span class=\"content\">\n                <slot>${displayText}</slot>\n              </span>\n            `}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-tooltip': MdTooltip;\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/{top-app-bar-Dgbp6CFv.js → top-app-bar-TrnjKzOX.js}

@@ -1,7 +1,8 @@
-import { n as d, t as i } from "./decorate-DXuynaiA.js";
-import { css as x, html as e, nothing as p } from "lit";
-import { customElement as h, property as o } from "lit/decorators.js";
-var v = x`
+import { n as e, t } from "./decorate-DknOJ8FJ.js";
+import { css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/top-app-bar/top-app-bar.css.ts
+var s = n`
   :host {
     display: block;
     box-sizing: border-box;
@@ -136,15 +137,21 @@ var v = x`
     line-height: 36px;
     font-weight: 400;
   }
-`, t = class extends d {
-  constructor(...a) {
-    super(...a), this.variant = "center-aligned", this.headline = "", this.subtitle = "", this.elevated = !1, this.fixed = !1;
-  }
-  static {
-    this.styles = [d.styles, v];
-  }
-  render() {
-    const a = this.variant === "medium" || this.variant === "large", n = e`
+
+  ::slotted(md-search-bar),
+  ::slotted(md-search) {
+    --md-search-bar-height: var(--md-top-app-bar-search-bar-height, 44px);
+    align-self: center;
+  }
+`, c = class extends e {
+	constructor(...e) {
+		super(...e), this.variant = "center-aligned", this.headline = "", this.subtitle = "", this.elevated = !1, this.fixed = !1;
+	}
+	static {
+		this.styles = [e.styles, s];
+	}
+	render() {
+		let e = this.variant === "medium" || this.variant === "large", t = r`
       <div class="leading">
         <slot name="navigation">
           <slot name="leading-icon">
@@ -152,7 +159,7 @@ var v = x`
           </slot>
         </slot>
       </div>
-    `, l = e`
+    `, n = r`
       <div class="trailing">
         <slot name="actions">
           <slot name="trailing-icon">
@@ -160,69 +167,61 @@ var v = x`
           </slot>
         </slot>
       </div>
-    `, s = e`
+    `, a = r`
       <slot name="headline">
         <slot name="title">
-          ${this.headline ? e`<span class="headline">${this.headline}</span>` : p}
+          ${this.headline ? r`<span class="headline">${this.headline}</span>` : i}
         </slot>
       </slot>
-    `, r = e`
+    `, o = r`
       <slot name="subtitle">
         <slot name="supporting-text">
-          ${this.subtitle ? e`<span class="subtitle">${this.subtitle}</span>` : p}
+          ${this.subtitle ? r`<span class="subtitle">${this.subtitle}</span>` : i}
         </slot>
       </slot>
     `;
-    return a ? e`
+		return e ? r`
         <header class="top-app-bar" role="banner">
           <div class="row">
-            ${n}
+            ${t}
             <slot></slot>
-            ${l}
+            ${n}
           </div>
           <div class="headline-row">
             <div class="title-container">
-              ${s}
-              ${r}
+              ${a}
+              ${o}
             </div>
           </div>
         </header>
-      ` : e`
+      ` : r`
       <header class="top-app-bar" role="banner">
         <div class="row">
-          ${n}
+          ${t}
           <div class="title-container">
-            ${s}
-            ${r}
+            ${a}
+            ${o}
           </div>
           <slot></slot>
-          ${l}
+          ${n}
         </div>
       </header>
     `;
-  }
-};
-i([o({
-  type: String,
-  reflect: !0
-})], t.prototype, "variant", void 0);
-i([o({ type: String })], t.prototype, "headline", void 0);
-i([o({ type: String })], t.prototype, "subtitle", void 0);
-i([o({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "elevated", void 0);
-i([o({
-  type: Boolean,
-  reflect: !0
-})], t.prototype, "fixed", void 0);
-t = i([h("md-top-app-bar")], t);
-var c = class extends t {
+	}
 };
-c = i([h("md-top-bar")], c);
-export {
-  c as n,
-  t
-};
-
-//# sourceMappingURL=top-app-bar-Dgbp6CFv.js.map
+t([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), t([o({ type: String })], c.prototype, "headline", void 0), t([o({ type: String })], c.prototype, "subtitle", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "elevated", void 0), t([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "fixed", void 0), c = t([a("md-top-app-bar")], c);
+var l = class extends c {};
+l = t([a("md-top-bar")], l);
+//#endregion
+export { l as n, c as t };
+
+//# sourceMappingURL=top-app-bar-TrnjKzOX.js.map