aeico-components 0.1.5 → 0.1.7

package/dist/chunks/textarea.js

@@ -0,0 +1,138 @@
+import { A as AeicoField, f as fieldLabelCSS, a as actionButtonCSS } from "./action-button.js";
+import { prop, html } from "aeico";
+import { v as variables } from "./variables.js";
+import { s as sizeCSS } from "./size.js";
+const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n\n  --textarea-font-size: 1em;\n  --textarea-padding: 0.333em 0.583em;\n  --textarea-border-width: 1px;\n  --textarea-transition: border-color 0.12s, background 0.12s;\n}\n\n.textarea-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n}\n\ntextarea {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  box-sizing: border-box;\n  font-size: var(--textarea-font-size);\n  font-family: inherit;\n  line-height: 1.5;\n  padding: var(--textarea-padding);\n  border: var(--textarea-border-width) solid var(--ae-border-subtle);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: var(--ae-surface-base);\n  color: var(--ae-color-text-muted);\n  transition: var(--textarea-transition);\n  resize: vertical;\n}\n\ntextarea::placeholder {\n  color: var(--ae-color-text-disabled);\n}\n\ntextarea:focus {\n  outline: none;\n  border-color: var(--ae-border-focus);\n  background: var(--ae-surface-raised);\n}\n\ntextarea:hover:not(:focus) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-surface-raised);\n}\n\ntextarea:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  resize: none;\n}\n\n/* Error state */\n:host([error]) textarea {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n:host([error]) textarea:hover:not(:focus),\n:host([error]) textarea:focus {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
+  var j = array.length + 1, key = __decoratorStrings[k + 5];
+  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
+  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
+      access.get = (x) => x[name];
+      access.set = (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
+    if (it === void 0) __expectFn(it) && (desc[key] = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return desc && __defProp(target, name, desc), target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _autoResize_dec, _resize_dec, _minlength_dec, _maxlength_dec, _rows_dec, _placeholder_dec, _a, _init, _placeholder, _rows, _maxlength, _minlength, _resize, _autoResize;
+class Textarea extends (_a = AeicoField, _placeholder_dec = [prop({ type: String })], _rows_dec = [prop({ type: Number })], _maxlength_dec = [prop({ type: Number })], _minlength_dec = [prop({ type: Number })], _resize_dec = [prop({ type: String })], _autoResize_dec = [prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "fieldElement", null);
+    __privateAdd(this, _placeholder, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _rows, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _maxlength, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _minlength, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _resize, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __privateAdd(this, _autoResize, __runInitializers(_init, 28, this, false)), __runInitializers(_init, 31, this);
+    __publicField(this, "_boundOnInput", () => {
+      if (this.autoResize && this.fieldElement) {
+        this._syncAutoResize(this.fieldElement);
+      }
+      this.setValue(this.getValue(), { silent: false, action: "change" });
+    });
+  }
+  render() {
+    return html(({ div, textarea }) => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: "textarea-container field-body" }, () => {
+        this.fieldElement = textarea({
+          id,
+          placeholder: this.placeholder || "",
+          rows: this.rows ?? 3,
+          required: Boolean(this.required),
+          "@input": this._boundOnInput
+        });
+        this.renderActionButtons();
+      });
+      this.renderHelperText();
+      this.renderError();
+      if (this.fieldElement) {
+        if (this.value != null) {
+          this.fieldElement.value = String(this.value);
+        }
+        if (this.maxlength != null) this.fieldElement.maxLength = this.maxlength;
+        if (this.minlength != null) this.fieldElement.minLength = this.minlength;
+        this.fieldElement.style.resize = this.autoResize ? "none" : this.resize ?? "vertical";
+        if (this.autoResize) {
+          this._syncAutoResize(this.fieldElement);
+        }
+        this._updateClearButtonVisibility();
+      }
+    });
+  }
+  _syncAutoResize(ta) {
+    ta.style.height = "auto";
+    ta.style.height = `${ta.scrollHeight}px`;
+  }
+  _updateClearButtonVisibility() {
+    if (this.clearBtn && this.fieldElement) {
+      this.clearBtn.style.display = this.fieldElement.value.length > 0 ? "" : "none";
+    }
+  }
+  writeValue(value) {
+    if (this.fieldElement) {
+      this.fieldElement.value = String(value || "");
+      if (this.autoResize) {
+        this._syncAutoResize(this.fieldElement);
+      }
+      this._updateClearButtonVisibility();
+    }
+  }
+}
+_init = __decoratorStart(_a);
+_placeholder = /* @__PURE__ */ new WeakMap();
+_rows = /* @__PURE__ */ new WeakMap();
+_maxlength = /* @__PURE__ */ new WeakMap();
+_minlength = /* @__PURE__ */ new WeakMap();
+_resize = /* @__PURE__ */ new WeakMap();
+_autoResize = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "placeholder", _placeholder_dec, Textarea, _placeholder);
+__decorateElement(_init, 4, "rows", _rows_dec, Textarea, _rows);
+__decorateElement(_init, 4, "maxlength", _maxlength_dec, Textarea, _maxlength);
+__decorateElement(_init, 4, "minlength", _minlength_dec, Textarea, _minlength);
+__decorateElement(_init, 4, "resize", _resize_dec, Textarea, _resize);
+__decorateElement(_init, 4, "autoResize", _autoResize_dec, Textarea, _autoResize);
+__decoratorMetadata(_init, Textarea);
+__publicField(Textarea, "tagName", "textarea");
+__publicField(Textarea, "styles", [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style]);
+Textarea.register();
+export {
+  Textarea as T
+};
+//# sourceMappingURL=textarea.js.map

package/dist/chunks/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sources":["../../src/textarea/textarea.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport style from '../styles/components/textarea.css?inline';\n\nexport type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';\n\nclass Textarea extends AeicoField {\n  protected fieldElement: HTMLTextAreaElement | null = null;\n\n  static tagName = 'textarea';\n\n  @prop({ type: String })\n  accessor placeholder: string | undefined;\n\n  @prop({ type: Number })\n  accessor rows: number | undefined;\n\n  @prop({ type: Number })\n  accessor maxlength: number | undefined;\n\n  @prop({ type: Number })\n  accessor minlength: number | undefined;\n\n  @prop({ type: String })\n  accessor resize: TextareaResize | undefined;\n\n  @prop({ type: Boolean })\n  accessor autoResize: boolean = false;\n\n  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];\n\n  private readonly _boundOnInput = () => {\n    if (this.autoResize && this.fieldElement) {\n      this._syncAutoResize(this.fieldElement);\n    }\n    this.setValue(this.getValue(), { silent: false, action: 'change' });\n  };\n\n  render() {\n    return html(({ div, textarea }) => {\n      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ className: 'textarea-container field-body' }, () => {\n        this.fieldElement = textarea({\n          id,\n          placeholder: this.placeholder || '',\n          rows: this.rows ?? 3,\n          required: Boolean(this.required),\n          '@input': this._boundOnInput,\n        });\n        this.renderActionButtons();\n      });\n      this.renderHelperText();\n      this.renderError();\n\n      if (this.fieldElement) {\n        if (this.value != null) {\n          this.fieldElement.value = String(this.value);\n        }\n        if (this.maxlength != null) this.fieldElement.maxLength = this.maxlength;\n        if (this.minlength != null) this.fieldElement.minLength = this.minlength;\n        this.fieldElement.style.resize = this.autoResize ? 'none' : (this.resize ?? 'vertical');\n        if (this.autoResize) {\n          this._syncAutoResize(this.fieldElement);\n        }\n        this._updateClearButtonVisibility();\n      }\n    });\n  }\n\n  private _syncAutoResize(ta: HTMLTextAreaElement): void {\n    ta.style.height = 'auto';\n    ta.style.height = `${ta.scrollHeight}px`;\n  }\n\n  private _updateClearButtonVisibility(): void {\n    if (this.clearBtn && this.fieldElement) {\n      this.clearBtn.style.display = this.fieldElement.value.length > 0 ? '' : 'none';\n    }\n  }\n\n  protected writeValue(value: string): void {\n    if (this.fieldElement) {\n      this.fieldElement.value = String(value || '');\n      if (this.autoResize) {\n        this._syncAutoResize(this.fieldElement);\n      }\n      this._updateClearButtonVisibility();\n    }\n  }\n}\n\nTextarea.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-textarea': Textarea;\n  }\n}\n\nexport default Textarea;\nexport type TextareaProps = InferProps<typeof Textarea>;\n"],"names":[],"mappings":"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"}

package/dist/chunks/tooltip.cjs

@@ -0,0 +1,292 @@
+"use strict";
+const variables = require("./variables.cjs");
+const aeicoComponent = require("./aeico-component.cjs");
+const aeico = require("aeico");
+const tooltipStyle = `:host {
+  display: inline-flex;
+  position: relative;
+  vertical-align: middle;
+
+  --ae-tooltip-z-index: 1000;
+  --ae-tooltip-bg: var(--ae-dark, #343a40);
+  --ae-tooltip-color: #fff;
+  --ae-tooltip-padding: 0.3125rem 0.625rem;
+  --ae-tooltip-font-size: 0.8125rem;
+  --ae-tooltip-arrow-size: 5px;
+  --ae-tooltip-gap: 6px;
+  --ae-tooltip-max-width: 20rem;
+}
+
+:host-context([theme="dark"]) {
+  --ae-tooltip-bg: var(--ae-light, #f8f9fa);
+  --ae-tooltip-color: var(--ae-dark, #343a40);
+}
+
+.tooltip-panel {
+  display: none;
+  position: fixed;
+  z-index: var(--ae-tooltip-z-index);
+  background: var(--ae-tooltip-bg);
+  color: var(--ae-tooltip-color);
+  padding: var(--ae-tooltip-padding);
+  font-size: var(--ae-tooltip-font-size);
+  font-family: inherit;
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
+  line-height: 1.4;
+  white-space: nowrap;
+  max-width: var(--ae-tooltip-max-width);
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+:host([open]) .tooltip-panel {
+  display: block;
+}
+
+/* Arrow */
+.tooltip-panel::after {
+  content: '';
+  position: absolute;
+  border: var(--ae-tooltip-arrow-size) solid transparent;
+  pointer-events: none;
+}
+
+.placement-top::after,
+.placement-top-start::after,
+.placement-top-end::after {
+  top: 100%;
+  border-top-color: var(--ae-tooltip-bg);
+}
+
+.placement-top::after {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.placement-top-start::after {
+  left: calc(var(--ae-tooltip-arrow-size) * 2);
+}
+
+.placement-top-end::after {
+  right: calc(var(--ae-tooltip-arrow-size) * 2);
+}
+
+.placement-bottom::after,
+.placement-bottom-start::after,
+.placement-bottom-end::after {
+  bottom: 100%;
+  border-bottom-color: var(--ae-tooltip-bg);
+}
+
+.placement-bottom::after {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.placement-bottom-start::after {
+  left: calc(var(--ae-tooltip-arrow-size) * 2);
+}
+
+.placement-bottom-end::after {
+  right: calc(var(--ae-tooltip-arrow-size) * 2);
+}
+
+.placement-left::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--ae-tooltip-bg);
+}
+
+.placement-right::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--ae-tooltip-bg);
+}
+`;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
+  var j = array.length + 1, key = __decoratorStrings[k + 5];
+  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
+  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
+      access.get = (x) => x[name];
+      access.set = (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
+    if (it === void 0) __expectFn(it) && (desc[key] = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return desc && __defProp(target, name, desc), target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _open_dec, _trigger_dec, _disabled_dec, _placement_dec, _content_dec, _a, _init, _content, _placement, _disabled, _trigger, _open;
+class Tooltip extends (_a = aeicoComponent.AeicoComponent, _content_dec = [aeico.prop({ type: String })], _placement_dec = [aeico.prop({ type: String })], _disabled_dec = [aeico.prop({ type: Boolean })], _trigger_dec = [aeico.prop({ type: String })], _open_dec = [aeico.prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _content, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _placement, __runInitializers(_init, 12, this, "top")), __runInitializers(_init, 15, this);
+    __privateAdd(this, _disabled, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _trigger, __runInitializers(_init, 20, this, "hover")), __runInitializers(_init, 23, this);
+    __privateAdd(this, _open, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
+    __publicField(this, "_outsideClickHandler", null);
+    __publicField(this, "_handleMouseEnter", () => {
+      if (this.trigger !== "hover") return;
+      if (this.disabled) return;
+      this.open = true;
+    });
+    __publicField(this, "_handleMouseLeave", () => {
+      if (this.trigger !== "hover") return;
+      this.open = false;
+    });
+    __publicField(this, "_handleFocusin", () => {
+      if (this.trigger !== "hover") return;
+      if (this.disabled) return;
+      this.open = true;
+    });
+    __publicField(this, "_handleFocusout", () => {
+      if (this.trigger !== "hover") return;
+      this.open = false;
+    });
+    __publicField(this, "_handleClick", () => {
+      if (this.trigger !== "click") return;
+      if (this.disabled) return;
+      this.open = !this.open;
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen("mouseenter", this._handleMouseEnter);
+    this.listen("mouseleave", this._handleMouseLeave);
+    this.listen("focusin", this._handleFocusin);
+    this.listen("focusout", this._handleFocusout);
+    this.listen("click", this._handleClick);
+    this._outsideClickHandler = (e) => {
+      if (!this.open) return;
+      if (!e.composedPath().includes(this)) this.open = false;
+    };
+    document.addEventListener("click", this._outsideClickHandler);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._outsideClickHandler) {
+      document.removeEventListener("click", this._outsideClickHandler);
+      this._outsideClickHandler = null;
+    }
+  }
+  _updatePosition() {
+    var _a2;
+    const panel = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(".tooltip-panel");
+    if (!panel) return;
+    const host = this.getBoundingClientRect();
+    const panelRect = panel.getBoundingClientRect();
+    const gap = 6;
+    const pw = panelRect.width;
+    const ph = panelRect.height;
+    let top;
+    let left;
+    switch (this.placement) {
+      case "top-start":
+        top = host.top - ph - gap;
+        left = host.left;
+        break;
+      case "top-end":
+        top = host.top - ph - gap;
+        left = host.right - pw;
+        break;
+      case "bottom":
+        top = host.bottom + gap;
+        left = host.left + host.width / 2 - pw / 2;
+        break;
+      case "bottom-start":
+        top = host.bottom + gap;
+        left = host.left;
+        break;
+      case "bottom-end":
+        top = host.bottom + gap;
+        left = host.right - pw;
+        break;
+      case "left":
+        top = host.top + host.height / 2 - ph / 2;
+        left = host.left - pw - gap;
+        break;
+      case "right":
+        top = host.top + host.height / 2 - ph / 2;
+        left = host.right + gap;
+        break;
+      default:
+        top = host.top - ph - gap;
+        left = host.left + host.width / 2 - pw / 2;
+    }
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+  }
+  onUpdated(changedProps) {
+    if (changedProps.has("open") && this.open) {
+      this._updatePosition();
+    }
+  }
+  render() {
+    return aeico.html(({ div, span, slot }) => {
+      slot();
+      div(
+        {
+          className: `tooltip-panel placement-${this.placement ?? "top"}`,
+          role: "tooltip",
+          "aria-hidden": String(!this.open)
+        },
+        () => {
+          slot({ name: "tooltip" }, () => {
+            span({ textContent: this.content ?? "" });
+          });
+        }
+      );
+    });
+  }
+}
+_init = __decoratorStart(_a);
+_content = /* @__PURE__ */ new WeakMap();
+_placement = /* @__PURE__ */ new WeakMap();
+_disabled = /* @__PURE__ */ new WeakMap();
+_trigger = /* @__PURE__ */ new WeakMap();
+_open = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "content", _content_dec, Tooltip, _content);
+__decorateElement(_init, 4, "placement", _placement_dec, Tooltip, _placement);
+__decorateElement(_init, 4, "disabled", _disabled_dec, Tooltip, _disabled);
+__decorateElement(_init, 4, "trigger", _trigger_dec, Tooltip, _trigger);
+__decorateElement(_init, 4, "open", _open_dec, Tooltip, _open);
+__decoratorMetadata(_init, Tooltip);
+__publicField(Tooltip, "styles", [variables.variables, tooltipStyle]);
+Tooltip.register();
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=tooltip.cjs.map

package/dist/chunks/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.cjs","sources":["../../src/tooltip/tooltip.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tooltipStyle from '../styles/components/tooltip.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html, prop } from 'aeico';\nimport type { TooltipPlacement, TooltipTrigger } from './defines';\n\n/**\n * Tooltip Component\n *\n * A floating label that appears on hover or focus around its trigger content.\n * Wrap any element in `<ae-tooltip>` and provide content via the `content`\n * attribute (plain text) or the `tooltip` named slot (rich HTML).\n *\n * @example\n * ```html\n * <ae-tooltip content=\"Save file\">\n *   <ae-button>Save</ae-button>\n * </ae-tooltip>\n *\n * <ae-tooltip placement=\"bottom-start\">\n *   <span slot=\"tooltip\"><strong>Bold</strong> tip</span>\n *   <ae-icon-button name=\"info\"></ae-icon-button>\n * </ae-tooltip>\n * ```\n */\nclass Tooltip extends AeicoComponent {\n  protected static styles = [styleVariables, tooltipStyle];\n\n  @prop({ type: String })\n  accessor content: string | undefined;\n\n  @prop({ type: String })\n  accessor placement: TooltipPlacement = 'top';\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: String })\n  accessor trigger: TooltipTrigger = 'hover';\n\n  @prop({ type: Boolean })\n  accessor open: boolean = false;\n\n  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('mouseenter', this._handleMouseEnter);\n    this.listen('mouseleave', this._handleMouseLeave);\n    this.listen('focusin', this._handleFocusin);\n    this.listen('focusout', this._handleFocusout);\n    this.listen('click', this._handleClick);\n\n    this._outsideClickHandler = (e: MouseEvent) => {\n      if (!this.open) return;\n      if (!e.composedPath().includes(this)) this.open = false;\n    };\n    document.addEventListener('click', this._outsideClickHandler);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._outsideClickHandler) {\n      document.removeEventListener('click', this._outsideClickHandler);\n      this._outsideClickHandler = null;\n    }\n  }\n\n  private _handleMouseEnter = () => {\n    if (this.trigger !== 'hover') return;\n    if (this.disabled) return;\n    this.open = true;\n  };\n\n  private _handleMouseLeave = () => {\n    if (this.trigger !== 'hover') return;\n    this.open = false;\n  };\n\n  private _handleFocusin = () => {\n    if (this.trigger !== 'hover') return;\n    if (this.disabled) return;\n    this.open = true;\n  };\n\n  private _handleFocusout = () => {\n    if (this.trigger !== 'hover') return;\n    this.open = false;\n  };\n\n  private _handleClick = () => {\n    if (this.trigger !== 'click') return;\n    if (this.disabled) return;\n    this.open = !this.open;\n  };\n\n  private _updatePosition() {\n    const panel = this.shadowRoot?.querySelector<HTMLElement>('.tooltip-panel');\n    if (!panel) return;\n\n    const host = this.getBoundingClientRect();\n    const panelRect = panel.getBoundingClientRect();\n    const gap = 6; // Match --ae-tooltip-gap: 6px\n    const pw = panelRect.width;\n    const ph = panelRect.height;\n\n    let top: number;\n    let left: number;\n\n    switch (this.placement) {\n      case 'top-start':\n        top = host.top - ph - gap;\n        left = host.left;\n        break;\n      case 'top-end':\n        top = host.top - ph - gap;\n        left = host.right - pw;\n        break;\n      case 'bottom':\n        top = host.bottom + gap;\n        left = host.left + host.width / 2 - pw / 2;\n        break;\n      case 'bottom-start':\n        top = host.bottom + gap;\n        left = host.left;\n        break;\n      case 'bottom-end':\n        top = host.bottom + gap;\n        left = host.right - pw;\n        break;\n      case 'left':\n        top = host.top + host.height / 2 - ph / 2;\n        left = host.left - pw - gap;\n        break;\n      case 'right':\n        top = host.top + host.height / 2 - ph / 2;\n        left = host.right + gap;\n        break;\n      default: // 'top'\n        top = host.top - ph - gap;\n        left = host.left + host.width / 2 - pw / 2;\n    }\n\n    panel.style.top = `${top}px`;\n    panel.style.left = `${left}px`;\n  }\n\n  protected onUpdated(changedProps: Map<string, unknown>) {\n    if (changedProps.has('open') && this.open) {\n      this._updatePosition();\n    }\n  }\n\n  protected render() {\n    return html(({ div, span, slot }) => {\n      slot();\n      div(\n        {\n          className: `tooltip-panel placement-${this.placement ?? 'top'}`,\n          role: 'tooltip',\n          'aria-hidden': String(!this.open),\n        },\n        () => {\n          slot({ name: 'tooltip' }, () => {\n            span({ textContent: this.content ?? '' });\n          });\n        },\n      );\n    });\n  }\n}\n\nTooltip.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tooltip': Tooltip;\n  }\n}\n\nexport type TooltipProps = InferProps<typeof Tooltip>;\nexport default Tooltip;\n"],"names":["AeicoComponent","prop","_a","html","styleVariables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,WAAA,cAAA,eAAA,gBAAA,cAAA,IAAA,OAAA,UAAA,YAAA,WAAA,UAAA;AA0BA,MAAM,iBAAgB,KAAAA,+BAGpB,eAAA,CAACC,WAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,iBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAQ,IAGtB,gBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,SAAS,CAAA,GAGvB,eAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAACA,WAAK,EAAE,MAAM,QAAA,CAAS,IAfH,IAAe;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,UAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,YAA8B,kBAAvC,OAAA,IAAA,MAAuC,KAAA,CAAA,GAAvC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAA0B,kBAAnC,OAAA,IAAA,MAAmC,OAAA,CAAA,GAAnC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAgB,kBAAzB,OAAA,IAAA,MAAyB,KAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAEA,kBAAA,MAAQ,wBAAyD,IAAA;AAyBjE,kBAAA,MAAQ,qBAAoB,MAAM;AAChC,UAAI,KAAK,YAAY,QAAS;AAC9B,UAAI,KAAK,SAAU;AACnB,WAAK,OAAO;AAAA,IACd,CAAA;AAEA,kBAAA,MAAQ,qBAAoB,MAAM;AAChC,UAAI,KAAK,YAAY,QAAS;AAC9B,WAAK,OAAO;AAAA,IACd,CAAA;AAEA,kBAAA,MAAQ,kBAAiB,MAAM;AAC7B,UAAI,KAAK,YAAY,QAAS;AAC9B,UAAI,KAAK,SAAU;AACnB,WAAK,OAAO;AAAA,IACd,CAAA;AAEA,kBAAA,MAAQ,mBAAkB,MAAM;AAC9B,UAAI,KAAK,YAAY,QAAS;AAC9B,WAAK,OAAO;AAAA,IACd,CAAA;AAEA,kBAAA,MAAQ,gBAAe,MAAM;AAC3B,UAAI,KAAK,YAAY,QAAS;AAC9B,UAAI,KAAK,SAAU;AACnB,WAAK,OAAO,CAAC,KAAK;AAAA,IACpB,CAAA;AAAA,EAAA;AAAA,EAjDA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,OAAO,cAAc,KAAK,iBAAiB;AAChD,SAAK,OAAO,cAAc,KAAK,iBAAiB;AAChD,SAAK,OAAO,WAAW,KAAK,cAAc;AAC1C,SAAK,OAAO,YAAY,KAAK,eAAe;AAC5C,SAAK,OAAO,SAAS,KAAK,YAAY;AAEtC,SAAK,uBAAuB,CAAC,MAAkB;AAC7C,UAAI,CAAC,KAAK,KAAM;AAChB,UAAI,CAAC,EAAE,eAAe,SAAS,IAAI,QAAQ,OAAO;AAAA,IACpD;AACA,aAAS,iBAAiB,SAAS,KAAK,oBAAoB;AAAA,EAC9D;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAA;AACN,QAAI,KAAK,sBAAsB;AAC7B,eAAS,oBAAoB,SAAS,KAAK,oBAAoB;AAC/D,WAAK,uBAAuB;AAAA,IAC9B;AAAA,EACF;AAAA,EA8BQ,kBAAkB;;AACxB,UAAM,SAAQC,MAAA,KAAK,eAAL,gBAAAA,IAAiB,cAA2B;AAC1D,QAAI,CAAC,MAAO;AAEZ,UAAM,OAAO,KAAK,sBAAA;AAClB,UAAM,YAAY,MAAM,sBAAA;AACxB,UAAM,MAAM;AACZ,UAAM,KAAK,UAAU;AACrB,UAAM,KAAK,UAAU;AAErB,QAAI;AACJ,QAAI;AAEJ,YAAQ,KAAK,WAAA;AAAA,MACX,KAAK;AACH,cAAM,KAAK,MAAM,KAAK;AACtB,eAAO,KAAK;AACZ;AAAA,MACF,KAAK;AACH,cAAM,KAAK,MAAM,KAAK;AACtB,eAAO,KAAK,QAAQ;AACpB;AAAA,MACF,KAAK;AACH,cAAM,KAAK,SAAS;AACpB,eAAO,KAAK,OAAO,KAAK,QAAQ,IAAI,KAAK;AACzC;AAAA,MACF,KAAK;AACH,cAAM,KAAK,SAAS;AACpB,eAAO,KAAK;AACZ;AAAA,MACF,KAAK;AACH,cAAM,KAAK,SAAS;AACpB,eAAO,KAAK,QAAQ;AACpB;AAAA,MACF,KAAK;AACH,cAAM,KAAK,MAAM,KAAK,SAAS,IAAI,KAAK;AACxC,eAAO,KAAK,OAAO,KAAK;AACxB;AAAA,MACF,KAAK;AACH,cAAM,KAAK,MAAM,KAAK,SAAS,IAAI,KAAK;AACxC,eAAO,KAAK,QAAQ;AACpB;AAAA,MACF;AACE,cAAM,KAAK,MAAM,KAAK;AACtB,eAAO,KAAK,OAAO,KAAK,QAAQ,IAAI,KAAK;AAAA,IAAA;AAG7C,UAAM,MAAM,MAAM,GAAG,GAAG;AACxB,UAAM,MAAM,OAAO,GAAG,IAAI;AAAA,EAC5B;AAAA,EAEU,UAAU,cAAoC;AACtD,QAAI,aAAa,IAAI,MAAM,KAAK,KAAK,MAAM;AACzC,WAAK,gBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEU,SAAS;AACjB,WAAOC,MAAAA,KAAK,CAAC,EAAE,KAAK,MAAM,WAAW;AACnC,WAAA;AACA;AAAA,QACE;AAAA,UACE,WAAW,2BAA2B,KAAK,aAAa,KAAK;AAAA,UAC7D,MAAM;AAAA,UACN,eAAe,OAAO,CAAC,KAAK,IAAI;AAAA,QAAA;AAAA,QAElC,MAAM;AACJ,eAAK,EAAE,MAAM,UAAA,GAAa,MAAM;AAC9B,iBAAK,EAAE,aAAa,KAAK,WAAW,IAAI;AAAA,UAC1C,CAAC;AAAA,QACH;AAAA,MAAA;AAAA,IAEJ,CAAC;AAAA,EACH;AACF;AAjJA,QAAA,iBAAA,EAAA;AAIW,WAAA,oBAAA,QAAA;AAGA,aAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAZT,kBAAA,OAAA,GAAS,WADT,cAHI,SAIK,QAAA;AAGT,kBAAA,OAAA,GAAS,aADT,gBANI,SAOK,UAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eATI,SAUK,SAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cAZI,SAaK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WAfI,SAgBK,KAAA;AAhBX,oBAAA,OAAM,OAAA;AACJ,cADI,SACa,UAAS,CAACC,UAAAA,WAAgB,YAAY,CAAA;AAkJzD,QAAQ,SAAA;;"}