aeico-components 0.1.4 → 0.1.6

package/dist/chunks/tree.js

@@ -0,0 +1,469 @@
+import { S as SVG_NS, A as AeicoComponent } from "./aeico-component.js";
+import { prop, html } from "aeico";
+import { v as variables } from "./variables.js";
+const style$1 = ":host {\n  display: block;\n}\n\n.tree {\n  display: block;\n  padding: 0.25rem;\n  box-sizing: border-box;\n  user-select: none;\n}\n";
+const style = ":host {\n  display: block;\n  --ae-tree-indent: 1.25rem;\n  --tree-item-height: 2rem;\n  --tree-item-font-size: 0.9375rem;\n  --tree-item-color: var(--color-text-main, #343a40);\n  --tree-item-color-disabled: var(--color-text-disabled, #bbb);\n  --tree-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.04));\n  --tree-item-bg-selected: var(--color-primary-bg-subtle, rgba(14, 99, 156, 0.08));\n  --tree-item-color-selected: var(--color-primary, #0e639c);\n  --tree-item-line-color: var(--border-default, rgba(0, 0, 0, 0.15));\n  --tree-item-expand-size: 1rem;\n}\n\n.tree-item-content {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  height: var(--tree-item-height);\n  padding-left: calc(var(--ae-tree-indent) * var(--depth, 0) + 0.25rem);\n  padding-right: 0.5rem;\n  font-size: var(--tree-item-font-size);\n  color: var(--tree-item-color);\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--ae-radius-sm, 4px);\n  transition: background 0.1s, color 0.1s;\n  box-sizing: border-box;\n}\n\n.tree-item-content:hover {\n  background: var(--tree-item-bg-hover);\n}\n\n.expand-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--tree-item-expand-size);\n  height: var(--tree-item-expand-size);\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  border-radius: var(--ae-radius-sm, 4px);\n  transition: transform 0.18s;\n  outline: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.expand-btn:focus-visible {\n  outline: 2px solid var(--color-primary, #0e639c);\n  outline-offset: 1px;\n}\n\n.expand-btn svg,\n.expand-btn ae-icon {\n  display: block;\n  width: 0.625rem;\n  height: 0.625rem;\n  fill: currentColor;\n  transition: transform 0.18s;\n}\n\n/* ae-icon uses font-size for its internal sizing */\n.expand-btn ae-icon,\n.expand-placeholder ae-icon {\n  font-size: 0.625rem;\n}\n\n:host([expanded]) .expand-btn svg,\n:host([expanded]) .expand-btn ae-icon {\n  transform: rotate(90deg);\n}\n\n/* Leaf placeholder keeps alignment consistent */\n.expand-placeholder {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--tree-item-expand-size);\n  height: var(--tree-item-expand-size);\n}\n\n.tree-item-checkbox {\n  flex-shrink: 0;\n  width: 0.875rem;\n  height: 0.875rem;\n  margin: 0;\n  cursor: pointer;\n  accent-color: var(--color-primary, #0e639c);\n}\n\n.tree-item-label {\n  display: inline-flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  padding: 0 0.25rem;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  cursor: pointer;\n  outline: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.tree-item-label:focus-visible {\n  outline: 2px solid var(--color-primary, #0e639c);\n  outline-offset: -2px;\n  border-radius: var(--ae-radius-sm, 4px);\n}\n\n:host([selected]) .tree-item-content {\n  background: var(--tree-item-bg-selected);\n  color: var(--tree-item-color-selected);\n}\n\n:host([disabled]) .tree-item-content {\n  color: var(--tree-item-color-disabled);\n  cursor: not-allowed;\n}\n\n:host([disabled]) .tree-item-content * {\n  pointer-events: none;\n}\n\n.tree-item-children {\n  display: none;\n}\n\n:host([expanded]) .tree-item-children {\n  display: block;\n}\n\n:host([showline]) .tree-item-children {\n  margin-left: calc(var(--ae-tree-indent) * var(--depth, 0) + 0.25rem + calc(var(--tree-item-expand-size) / 2));\n  padding-left: calc(var(--ae-tree-indent) - calc(var(--tree-item-expand-size) / 2));\n  border-left: 1px dashed var(--tree-item-line-color);\n}\n";
+var __create$1 = Object.create;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decoratorStart$1 = (base) => [, , , __create$1((base == null ? void 0 : base[__knownSymbol$1("metadata")]) ?? null)];
+var __decoratorStrings$1 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn$1 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$1("Function expected") : fn;
+var __decoratorContext$1 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$1[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$1("Already initialized") : fns.push(__expectFn$1(fn || null)) });
+var __decoratorMetadata$1 = (array, target) => __defNormalProp$1(target, __knownSymbol$1("metadata"), array[3]);
+var __runInitializers$1 = (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$1 = (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$1[k + 5];
+  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
+  var desc = (target = target.prototype, __getOwnPropDesc$1({ get [name]() {
+    return __privateGet$1(this, extra);
+  }, set [name](x) {
+    return __privateSet$1(this, extra, x);
+  } }, name));
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext$1(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$1(it) && (desc[key] = it);
+    else if (typeof it !== "object" || it === null) __typeError$1("Object expected");
+    else __expectFn$1(fn = it.get) && (desc.get = fn), __expectFn$1(fn = it.set) && (desc.set = fn), __expectFn$1(fn = it.init) && initializers.unshift(fn);
+  }
+  return desc && __defProp$1(target, name, desc), target;
+};
+var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), member.get(obj));
+var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
+var _indeterminate_dec, _checked_dec, _selected_dec, _expanded_dec, _disabled_dec, _icon_dec$1, _key_dec, _a$1, _init$1, _key, _icon$1, _disabled, _expanded, _selected, _checked, _indeterminate;
+let _autoKeyCounter = 0;
+class TreeItem extends (_a$1 = AeicoComponent, _key_dec = [prop({ type: String })], _icon_dec$1 = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _expanded_dec = [prop({ type: Boolean })], _selected_dec = [prop({ type: Boolean })], _checked_dec = [prop({ type: Boolean })], _indeterminate_dec = [prop({ type: Boolean })], _a$1) {
+  constructor() {
+    super(...arguments);
+    __privateAdd$1(this, _key, __runInitializers$1(_init$1, 8, this)), __runInitializers$1(_init$1, 11, this);
+    __privateAdd$1(this, _icon$1, __runInitializers$1(_init$1, 12, this)), __runInitializers$1(_init$1, 15, this);
+    __publicField$1(this, "_autoKey", `ae-tree-item-${_autoKeyCounter++}`);
+    __privateAdd$1(this, _disabled, __runInitializers$1(_init$1, 16, this, false)), __runInitializers$1(_init$1, 19, this);
+    __privateAdd$1(this, _expanded, __runInitializers$1(_init$1, 20, this, false)), __runInitializers$1(_init$1, 23, this);
+    __privateAdd$1(this, _selected, __runInitializers$1(_init$1, 24, this, false)), __runInitializers$1(_init$1, 27, this);
+    __privateAdd$1(this, _checked, __runInitializers$1(_init$1, 28, this, false)), __runInitializers$1(_init$1, 31, this);
+    __privateAdd$1(this, _indeterminate, __runInitializers$1(_init$1, 32, this, false)), __runInitializers$1(_init$1, 35, this);
+    __publicField$1(this, "_checkboxEl", null);
+    __publicField$1(this, "_handleExpandClick", (e) => {
+      e.stopPropagation();
+      if (this.disabled) return;
+      this.dispatchEvent(
+        new CustomEvent("_tree-item-toggle-expand", {
+          bubbles: true,
+          composed: true,
+          detail: { key: this._effectiveKey }
+        })
+      );
+    });
+    __publicField$1(this, "_handleLabelClick", () => {
+      if (this.disabled) return;
+      this.dispatchEvent(
+        new CustomEvent("_tree-item-select", {
+          bubbles: true,
+          composed: true,
+          detail: { key: this._effectiveKey }
+        })
+      );
+    });
+    __publicField$1(this, "_handleCheckChange", (e) => {
+      if (this.disabled) return;
+      const input = e.target;
+      this.dispatchEvent(
+        new CustomEvent("_tree-item-check", {
+          bubbles: true,
+          composed: true,
+          detail: { key: this._effectiveKey, checked: input.checked }
+        })
+      );
+    });
+    __publicField$1(this, "_handleKeydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (e.target.classList.contains("tree-item-label")) {
+          this._handleLabelClick();
+        }
+      }
+      if (e.key === "ArrowRight" && this._hasChildren && !this.expanded) {
+        this._handleExpandClick(e);
+      }
+      if (e.key === "ArrowLeft" && this.expanded) {
+        this._handleExpandClick(e);
+      }
+    });
+  }
+  get _effectiveKey() {
+    return this.key ?? this._autoKey;
+  }
+  connectedCallback() {
+    var _a2, _b;
+    super.connectedCallback();
+    if (((_a2 = this.parentElement) == null ? void 0 : _a2.tagName.toLowerCase()) === "ae-tree-item" && !this.hasAttribute("slot")) {
+      this.setAttribute("slot", "sub");
+    }
+    let depth = 0;
+    let el = this.parentElement;
+    while (el) {
+      const tag = el.tagName.toLowerCase();
+      if (tag === "ae-tree-item") {
+        depth++;
+      } else if (tag === "ae-tree") {
+        break;
+      }
+      el = el.parentElement;
+    }
+    this.style.setProperty("--depth", String(depth));
+    if ((_b = this._parentTree) == null ? void 0 : _b.showLine) {
+      this.setAttribute("showline", "");
+    }
+  }
+  onMounted() {
+    var _a2;
+    if (((_a2 = this._parentTree) == null ? void 0 : _a2.defaultExpandAll) && this._hasChildren) {
+      this.expanded = true;
+    }
+  }
+  get _parentTree() {
+    return this.closest("ae-tree");
+  }
+  get _isCheckable() {
+    var _a2;
+    return ((_a2 = this._parentTree) == null ? void 0 : _a2.checkable) ?? false;
+  }
+  get _hasChildren() {
+    return !!this.querySelector(':scope > ae-tree-item[slot="sub"]');
+  }
+  onUpdated() {
+    if (this._checkboxEl) {
+      this._checkboxEl.checked = this.checked;
+      this._checkboxEl.indeterminate = this.indeterminate;
+    }
+  }
+  render() {
+    var _a2;
+    const hasChildren = this._hasChildren;
+    const isCheckable = this._isCheckable;
+    const expandIcon = this.icon ?? ((_a2 = this._parentTree) == null ? void 0 : _a2.icon);
+    return html(({ div, button, span, input, slot, svg, path, aeIcon }) => {
+      div(
+        {
+          className: "tree-item-content",
+          role: "treeitem",
+          "aria-expanded": hasChildren ? String(this.expanded) : void 0,
+          "aria-selected": String(this.selected),
+          "aria-disabled": this.disabled ? "true" : void 0
+        },
+        () => {
+          if (hasChildren) {
+            button(
+              {
+                type: "button",
+                className: "expand-btn",
+                tabIndex: -1,
+                "aria-hidden": "true",
+                "@click": this._handleExpandClick
+              },
+              () => {
+                if (expandIcon) {
+                  aeIcon({ className: "expand-icon", name: expandIcon });
+                } else {
+                  svg(
+                    {
+                      className: "expand-icon",
+                      viewBox: "0 0 10 10",
+                      "aria-hidden": "true",
+                      xmlns: SVG_NS
+                    },
+                    () => {
+                      path({ d: "M2 1l6 4-6 4V1z" });
+                    }
+                  );
+                }
+              }
+            );
+          } else {
+            span({ className: "expand-placeholder", "aria-hidden": "true" });
+          }
+          if (isCheckable) {
+            this._checkboxEl = input({
+              type: "checkbox",
+              className: "tree-item-checkbox",
+              checked: this.checked,
+              disabled: this.disabled,
+              tabIndex: -1,
+              "@change": this._handleCheckChange
+            });
+          }
+          button(
+            {
+              type: "button",
+              className: "tree-item-label",
+              disabled: this.disabled,
+              "@click": this._handleLabelClick,
+              "@keydown": this._handleKeydown
+            },
+            () => {
+              slot();
+            }
+          );
+        }
+      );
+      div({ className: "tree-item-children", role: "group" }, () => {
+        slot({ name: "sub" });
+      });
+    });
+  }
+}
+_init$1 = __decoratorStart$1(_a$1);
+_key = /* @__PURE__ */ new WeakMap();
+_icon$1 = /* @__PURE__ */ new WeakMap();
+_disabled = /* @__PURE__ */ new WeakMap();
+_expanded = /* @__PURE__ */ new WeakMap();
+_selected = /* @__PURE__ */ new WeakMap();
+_checked = /* @__PURE__ */ new WeakMap();
+_indeterminate = /* @__PURE__ */ new WeakMap();
+__decorateElement$1(_init$1, 4, "key", _key_dec, TreeItem, _key);
+__decorateElement$1(_init$1, 4, "icon", _icon_dec$1, TreeItem, _icon$1);
+__decorateElement$1(_init$1, 4, "disabled", _disabled_dec, TreeItem, _disabled);
+__decorateElement$1(_init$1, 4, "expanded", _expanded_dec, TreeItem, _expanded);
+__decorateElement$1(_init$1, 4, "selected", _selected_dec, TreeItem, _selected);
+__decorateElement$1(_init$1, 4, "checked", _checked_dec, TreeItem, _checked);
+__decorateElement$1(_init$1, 4, "indeterminate", _indeterminate_dec, TreeItem, _indeterminate);
+__decoratorMetadata$1(_init$1, TreeItem);
+__publicField$1(TreeItem, "tagName", "tree-item");
+__publicField$1(TreeItem, "styles", [variables, style]);
+TreeItem.register();
+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 _icon_dec, _selectedKey_dec, _defaultExpandAll_dec, _showLine_dec, _multiple_dec, _checkable_dec, _a, _init, _checkable, _multiple, _showLine, _defaultExpandAll, _selectedKey, _icon;
+class Tree extends (_a = AeicoComponent, _checkable_dec = [prop({ type: Boolean })], _multiple_dec = [prop({ type: Boolean })], _showLine_dec = [prop({ type: Boolean })], _defaultExpandAll_dec = [prop({ type: Boolean })], _selectedKey_dec = [prop({ type: String })], _icon_dec = [prop({ type: String })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _checkable, __runInitializers(_init, 8, this, false)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _multiple, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _showLine, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _defaultExpandAll, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _selectedKey, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __privateAdd(this, _icon, __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
+    __publicField(this, "selectedKeys", []);
+    __publicField(this, "checkedKeys", []);
+    __publicField(this, "expandedKeys", []);
+    __publicField(this, "_handleItemToggleExpand", (e) => {
+      const node = e.target;
+      const newExpanded = !node.expanded;
+      node.expanded = newExpanded;
+      const key = node.key ?? "";
+      if (newExpanded) {
+        if (!this.expandedKeys.includes(key)) {
+          this.expandedKeys = [...this.expandedKeys, key];
+        }
+      } else {
+        this.expandedKeys = this.expandedKeys.filter((k) => k !== key);
+      }
+      this.emit("expand", {
+        detail: {
+          key,
+          expanded: newExpanded,
+          expandedKeys: [...this.expandedKeys]
+        }
+      });
+    });
+    __publicField(this, "_handleItemSelect", (e) => {
+      const { key } = e.detail;
+      if (this.multiple) {
+        const alreadySelected = this.selectedKeys.includes(key);
+        if (alreadySelected) {
+          this.selectedKeys = this.selectedKeys.filter((k) => k !== key);
+        } else {
+          this.selectedKeys = [...this.selectedKeys, key];
+        }
+        this.selectedKey = this.selectedKeys[this.selectedKeys.length - 1];
+        this._getAllItems().forEach((item) => {
+          item.selected = this.selectedKeys.includes(item.key ?? "");
+        });
+        this.emit("select", {
+          detail: {
+            key,
+            selected: !alreadySelected,
+            selectedKeys: [...this.selectedKeys]
+          }
+        });
+      } else {
+        const alreadySelected = this.selectedKey === key;
+        this._getAllItems().forEach((item) => {
+          item.selected = !alreadySelected && item.key === key;
+        });
+        this.selectedKey = alreadySelected ? void 0 : key;
+        this.selectedKeys = this.selectedKey ? [this.selectedKey] : [];
+        this.emit("select", {
+          detail: {
+            key,
+            selected: !alreadySelected,
+            selectedKeys: [...this.selectedKeys]
+          }
+        });
+      }
+    });
+    __publicField(this, "_handleItemCheck", (e) => {
+      const { key, checked } = e.detail;
+      const sourceNode = e.target;
+      this._setCheckedRecursive(sourceNode, checked);
+      this._syncAncestors(sourceNode);
+      this.checkedKeys = this._computeCheckedKeys();
+      this.emit("check", {
+        detail: { key, checked, checkedKeys: [...this.checkedKeys] }
+      });
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen("_tree-item-toggle-expand", this._handleItemToggleExpand);
+    this.listen("_tree-item-select", this._handleItemSelect);
+    this.listen("_tree-item-check", this._handleItemCheck);
+  }
+  _getAllItems() {
+    return Array.from(this.querySelectorAll("ae-tree-item"));
+  }
+  _getDirectChildren(node) {
+    return Array.from(node.querySelectorAll(":scope > ae-tree-item"));
+  }
+  _computeCheckedKeys() {
+    const keys = [];
+    for (const item of this._getAllItems()) {
+      if (item.checked && !item.indeterminate) {
+        keys.push(item.key ?? "");
+      }
+    }
+    return keys.filter(Boolean);
+  }
+  _setCheckedRecursive(node, checked) {
+    if (node.disabled) return;
+    node.checked = checked;
+    node.indeterminate = false;
+    for (const child of this._getDirectChildren(node)) {
+      this._setCheckedRecursive(child, checked);
+    }
+  }
+  _syncAncestors(sourceNode) {
+    let el = sourceNode.parentElement;
+    while (el) {
+      const tag = el.tagName.toLowerCase();
+      if (tag === "ae-tree-item") {
+        const parent = el;
+        const children = this._getDirectChildren(parent).filter((c) => !c.disabled);
+        if (children.length === 0) break;
+        const checkedCount = children.filter((c) => c.checked && !c.indeterminate).length;
+        const indeterminateCount = children.filter((c) => c.indeterminate).length;
+        if (checkedCount === children.length) {
+          parent.checked = true;
+          parent.indeterminate = false;
+        } else if (checkedCount > 0 || indeterminateCount > 0) {
+          parent.checked = false;
+          parent.indeterminate = true;
+        } else {
+          parent.checked = false;
+          parent.indeterminate = false;
+        }
+      } else if (tag === "ae-tree") {
+        break;
+      }
+      el = el.parentElement;
+    }
+  }
+  render() {
+    return html(({ div, slot }) => {
+      div(
+        {
+          className: "tree",
+          role: "tree",
+          "aria-multiselectable": this.multiple ? "true" : "false"
+        },
+        () => {
+          slot();
+        }
+      );
+    });
+  }
+}
+_init = __decoratorStart(_a);
+_checkable = /* @__PURE__ */ new WeakMap();
+_multiple = /* @__PURE__ */ new WeakMap();
+_showLine = /* @__PURE__ */ new WeakMap();
+_defaultExpandAll = /* @__PURE__ */ new WeakMap();
+_selectedKey = /* @__PURE__ */ new WeakMap();
+_icon = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "checkable", _checkable_dec, Tree, _checkable);
+__decorateElement(_init, 4, "multiple", _multiple_dec, Tree, _multiple);
+__decorateElement(_init, 4, "showLine", _showLine_dec, Tree, _showLine);
+__decorateElement(_init, 4, "defaultExpandAll", _defaultExpandAll_dec, Tree, _defaultExpandAll);
+__decorateElement(_init, 4, "selectedKey", _selectedKey_dec, Tree, _selectedKey);
+__decorateElement(_init, 4, "icon", _icon_dec, Tree, _icon);
+__decoratorMetadata(_init, Tree);
+__publicField(Tree, "tagName", "tree");
+__publicField(Tree, "styles", [variables, style$1]);
+Tree.register();
+export {
+  Tree as T,
+  TreeItem as a
+};
+//# sourceMappingURL=tree.js.map

package/dist/chunks/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sources":["../../src/tree/tree-item.ts","../../src/tree/tree.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport style from '../styles/components/tree-item.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport type { ParentTreeLike } from './defines';\nimport { SVG_NS } from '../utils';\nimport '../icon';\n\nlet _autoKeyCounter = 0;\n\n/**\n * Tree item — used as a direct child of `<ae-tree>` or nested inside another\n * `<ae-tree-item>` to create a multi-level tree.\n *\n * - **Parent item**: nest `<ae-tree-item>` children inside; an expand toggle is shown.\n * - **Leaf item**: no `<ae-tree-item>` children; no expand toggle is shown.\n *\n * @prop {string}  key          - Unique identifier for this item.\n * @prop {string}  icon         - Icon name (uses `<ae-icon>`). Optional.\n * @prop {boolean} disabled     - Disables interaction.\n * @prop {boolean} expanded     - Whether children are visible.\n * @prop {boolean} selected     - Whether this item is visually selected.\n * @prop {boolean} checked      - Checkbox state (checkable mode).\n * @prop {boolean} indeterminate - Checkbox partial state (checkable mode, JS-only).\n *\n * @slot default - Child `<ae-tree-item>` elements.\n * @slot label   - Custom label content (falls back to the `label` attribute text).\n */\nclass TreeItem extends AeicoComponent {\n  static tagName = 'tree-item';\n\n  protected static styles = [variables, style];\n\n  @prop({ type: String })\n  accessor key: string | undefined;\n\n  @prop({ type: String })\n  accessor icon: string | undefined;\n\n  /** Stable auto-generated key used when `key` prop is not set. */\n  private readonly _autoKey = `ae-tree-item-${_autoKeyCounter++}`;\n\n  private get _effectiveKey(): string {\n    return this.key ?? this._autoKey;\n  }\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor expanded: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor selected: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor checked: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor indeterminate: boolean = false;\n\n  private _checkboxEl: HTMLInputElement | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Auto-assign slot so users don't need to write slot=\"sub\" manually\n    if (\n      this.parentElement?.tagName.toLowerCase() === 'ae-tree-item' &&\n      !this.hasAttribute('slot')\n    ) {\n      this.setAttribute('slot', 'sub');\n    }\n\n    let depth = 0;\n    let el: Element | null = this.parentElement;\n    while (el) {\n      const tag = el.tagName.toLowerCase();\n      if (tag === 'ae-tree-item') {\n        depth++;\n      } else if (tag === 'ae-tree') {\n        break;\n      }\n      el = el.parentElement;\n    }\n    this.style.setProperty('--depth', String(depth));\n\n    if (this._parentTree?.showLine) {\n      this.setAttribute('showline', '');\n    }\n  }\n\n  protected onMounted(): void {\n    if (this._parentTree?.defaultExpandAll && this._hasChildren) {\n      this.expanded = true;\n    }\n  }\n\n  private get _parentTree(): ParentTreeLike | null {\n    return this.closest<ParentTreeLike>('ae-tree');\n  }\n\n  private get _isCheckable(): boolean {\n    return this._parentTree?.checkable ?? false;\n  }\n\n  private get _hasChildren(): boolean {\n    return !!this.querySelector(':scope > ae-tree-item[slot=\"sub\"]');\n  }\n\n  private _handleExpandClick = (e: Event): void => {\n    e.stopPropagation();\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tree-item-toggle-expand', {\n        bubbles: true,\n        composed: true,\n        detail: { key: this._effectiveKey },\n      }),\n    );\n  };\n\n  private _handleLabelClick = (): void => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tree-item-select', {\n        bubbles: true,\n        composed: true,\n        detail: { key: this._effectiveKey },\n      }),\n    );\n  };\n\n  private _handleCheckChange = (e: Event): void => {\n    if (this.disabled) return;\n    const input = e.target as HTMLInputElement;\n    this.dispatchEvent(\n      new CustomEvent('_tree-item-check', {\n        bubbles: true,\n        composed: true,\n        detail: { key: this._effectiveKey, checked: input.checked },\n      }),\n    );\n  };\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if ((e.target as HTMLElement).classList.contains('tree-item-label')) {\n        this._handleLabelClick();\n      }\n    }\n    if (e.key === 'ArrowRight' && this._hasChildren && !this.expanded) {\n      this._handleExpandClick(e);\n    }\n    if (e.key === 'ArrowLeft' && this.expanded) {\n      this._handleExpandClick(e);\n    }\n  };\n\n  protected onUpdated(): void {\n    // indeterminate/checked cannot be set correctly via HTML attribute — must set via JS property\n    if (this._checkboxEl) {\n      this._checkboxEl.checked = this.checked;\n      this._checkboxEl.indeterminate = this.indeterminate;\n    }\n  }\n\n  protected render() {\n    const hasChildren = this._hasChildren;\n    const isCheckable = this._isCheckable;\n    const expandIcon = this.icon ?? this._parentTree?.icon;\n\n    return html(({ div, button, span, input, slot, svg, path, aeIcon }) => {\n      div(\n        {\n          className: 'tree-item-content',\n          role: 'treeitem',\n          'aria-expanded': hasChildren ? String(this.expanded) : undefined,\n          'aria-selected': String(this.selected),\n          'aria-disabled': this.disabled ? 'true' : undefined,\n        },\n        () => {\n          if (hasChildren) {\n            button(\n              {\n                type: 'button',\n                className: 'expand-btn',\n                tabIndex: -1,\n                'aria-hidden': 'true',\n                '@click': this._handleExpandClick,\n              },\n              () => {\n                if (expandIcon) {\n                  aeIcon({ className: 'expand-icon', name: expandIcon });\n                } else {\n                  svg(\n                    {\n                      className: 'expand-icon',\n                      viewBox: '0 0 10 10',\n                      'aria-hidden': 'true',\n                      xmlns: SVG_NS,\n                    },\n                    () => {\n                      path({ d: 'M2 1l6 4-6 4V1z' });\n                    },\n                  );\n                }\n              },\n            );\n          } else {\n            span({ className: 'expand-placeholder', 'aria-hidden': 'true' });\n          }\n\n          if (isCheckable) {\n            this._checkboxEl = input({\n              type: 'checkbox',\n              className: 'tree-item-checkbox',\n              checked: this.checked,\n              disabled: this.disabled,\n              tabIndex: -1,\n              '@change': this._handleCheckChange,\n            });\n          }\n\n          button(\n            {\n              type: 'button',\n              className: 'tree-item-label',\n              disabled: this.disabled,\n              '@click': this._handleLabelClick,\n              '@keydown': this._handleKeydown,\n            },\n            () => {\n              slot();\n            },\n          );\n        },\n      );\n\n      div({ className: 'tree-item-children', role: 'group' }, () => {\n        slot({ name: 'sub' });\n      });\n    });\n  }\n}\n\nTreeItem.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tree-item': TreeItem;\n  }\n}\n\nexport default TreeItem;\nexport type TreeItemProps = InferProps<typeof TreeItem>;\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport style from '../styles/components/tree.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport type { TreeSelectDetail, TreeExpandDetail, TreeCheckDetail } from './defines';\nimport './tree-item';\nimport type TreeItem from './tree-item';\n\n/**\n * Tree component. Renders a hierarchical tree of `<ae-tree-item>` elements.\n *\n * @prop {boolean} checkable       - Enable checkbox selection mode with parent-child sync.\n * @prop {boolean} multiple        - Allow multi-select (click to toggle). Ignored when checkable.\n * @prop {boolean} showLine        - Show dashed connecting lines between items.\n * @prop {boolean} defaultExpandAll - Expand all items on initial connect.\n * @prop {string}  selectedKey     - Currently selected key (single-select convenience prop).\n *\n * @property {string[]} selectedKeys - Currently selected keys (multi-select).\n * @property {string[]} checkedKeys  - Currently checked keys (checkable mode).\n * @property {string[]} expandedKeys - Currently expanded keys.\n *\n * @event {CustomEvent<TreeSelectDetail>} select - Fires when an item is selected/deselected.\n * @event {CustomEvent<TreeExpandDetail>} expand - Fires when an item is expanded/collapsed.\n * @event {CustomEvent<TreeCheckDetail>}  check  - Fires when an item checkbox changes.\n *\n * @example\n * ```html\n * <ae-tree>\n *   <ae-tree-item key=\"1\" label=\"Parent\">\n *     <ae-tree-item key=\"1-1\" label=\"Child A\"></ae-tree-item>\n *     <ae-tree-item key=\"1-2\" label=\"Child B\"></ae-tree-item>\n *   </ae-tree-item>\n * </ae-tree>\n * ```\n */\nclass Tree extends AeicoComponent {\n  static tagName = 'tree';\n\n  protected static styles = [variables, style];\n\n  @prop({ type: Boolean })\n  accessor checkable: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor multiple: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor showLine: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor defaultExpandAll: boolean = false;\n\n  @prop({ type: String })\n  accessor selectedKey: string | undefined;\n\n  /** Icon name used for the expand/collapse toggle on all items (overridable per item). */\n  @prop({ type: String })\n  accessor icon: string | undefined;\n\n  /** Currently selected keys (multi-select). Set programmatically. */\n  selectedKeys: string[] = [];\n\n  /** Currently checked keys (checkable mode). Set programmatically. */\n  checkedKeys: string[] = [];\n\n  /** Currently expanded keys. Set programmatically. */\n  expandedKeys: string[] = [];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('_tree-item-toggle-expand', this._handleItemToggleExpand as EventListener);\n    this.listen('_tree-item-select', this._handleItemSelect as EventListener);\n    this.listen('_tree-item-check', this._handleItemCheck as EventListener);\n  }\n\n  private _getAllItems(): TreeItem[] {\n    return Array.from(this.querySelectorAll<TreeItem>('ae-tree-item'));\n  }\n\n  private _getDirectChildren(node: Element): TreeItem[] {\n    return Array.from(node.querySelectorAll<TreeItem>(':scope > ae-tree-item'));\n  }\n\n  private _computeCheckedKeys(): string[] {\n    const keys: string[] = [];\n    for (const item of this._getAllItems()) {\n      if (item.checked && !item.indeterminate) {\n        keys.push(item.key ?? '');\n      }\n    }\n    return keys.filter(Boolean);\n  }\n\n  private _handleItemToggleExpand = (e: CustomEvent<{ key: string }>): void => {\n    const node = e.target as TreeItem;\n    const newExpanded = !node.expanded;\n    node.expanded = newExpanded;\n\n    const key = node.key ?? '';\n    if (newExpanded) {\n      if (!this.expandedKeys.includes(key)) {\n        this.expandedKeys = [...this.expandedKeys, key];\n      }\n    } else {\n      this.expandedKeys = this.expandedKeys.filter((k) => k !== key);\n    }\n\n    this.emit('expand', {\n      detail: {\n        key,\n        expanded: newExpanded,\n        expandedKeys: [...this.expandedKeys],\n      } satisfies TreeExpandDetail,\n    });\n  };\n\n  private _handleItemSelect = (e: CustomEvent<{ key: string }>): void => {\n    const { key } = e.detail;\n\n    if (this.multiple) {\n      // Toggle selection\n      const alreadySelected = this.selectedKeys.includes(key);\n      if (alreadySelected) {\n        this.selectedKeys = this.selectedKeys.filter((k) => k !== key);\n      } else {\n        this.selectedKeys = [...this.selectedKeys, key];\n      }\n      this.selectedKey = this.selectedKeys[this.selectedKeys.length - 1];\n\n      // Sync visual state\n      this._getAllItems().forEach((item) => {\n        item.selected = this.selectedKeys.includes(item.key ?? '');\n      });\n\n      this.emit('select', {\n        detail: {\n          key,\n          selected: !alreadySelected,\n          selectedKeys: [...this.selectedKeys],\n        } satisfies TreeSelectDetail,\n      });\n    } else {\n      // Single select — deselect all, select target\n      const alreadySelected = this.selectedKey === key;\n      this._getAllItems().forEach((item) => {\n        item.selected = !alreadySelected && item.key === key;\n      });\n      this.selectedKey = alreadySelected ? undefined : key;\n      this.selectedKeys = this.selectedKey ? [this.selectedKey] : [];\n\n      this.emit('select', {\n        detail: {\n          key,\n          selected: !alreadySelected,\n          selectedKeys: [...this.selectedKeys],\n        } satisfies TreeSelectDetail,\n      });\n    }\n  };\n\n  private _handleItemCheck = (e: CustomEvent<{ key: string; checked: boolean }>): void => {\n    const { key, checked } = e.detail;\n    const sourceNode = e.target as TreeItem;\n\n    this._setCheckedRecursive(sourceNode, checked);\n    this._syncAncestors(sourceNode);\n    this.checkedKeys = this._computeCheckedKeys();\n\n    this.emit('check', {\n      detail: { key, checked, checkedKeys: [...this.checkedKeys] } satisfies TreeCheckDetail,\n    });\n  };\n\n  private _setCheckedRecursive(node: TreeItem, checked: boolean): void {\n    if (node.disabled) return;\n    node.checked = checked;\n    node.indeterminate = false;\n    for (const child of this._getDirectChildren(node)) {\n      this._setCheckedRecursive(child, checked);\n    }\n  }\n\n  private _syncAncestors(sourceNode: TreeItem): void {\n    let el: Element | null = sourceNode.parentElement;\n    while (el) {\n      const tag = el.tagName.toLowerCase();\n      if (tag === 'ae-tree-item') {\n        const parent = el as TreeItem;\n        const children = this._getDirectChildren(parent).filter((c) => !c.disabled);\n        if (children.length === 0) break;\n        const checkedCount = children.filter((c) => c.checked && !c.indeterminate).length;\n        const indeterminateCount = children.filter((c) => c.indeterminate).length;\n\n        if (checkedCount === children.length) {\n          parent.checked = true;\n          parent.indeterminate = false;\n        } else if (checkedCount > 0 || indeterminateCount > 0) {\n          parent.checked = false;\n          parent.indeterminate = true;\n        } else {\n          parent.checked = false;\n          parent.indeterminate = false;\n        }\n      } else if (tag === 'ae-tree') {\n        break;\n      }\n      el = el.parentElement;\n    }\n  }\n\n  protected render() {\n    return html(({ div, slot }) => {\n      div(\n        {\n          className: 'tree',\n          role: 'tree',\n          'aria-multiselectable': this.multiple ? 'true' : 'false',\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTree.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tree': Tree;\n  }\n}\n\nexport default Tree;\nexport type TreeProps = InferProps<typeof Tree>;\n"],"names":["_icon_dec","_a","_init","_icon","__privateAdd","__runInitializers","__publicField","__decoratorStart","__decorateElement","__decoratorMetadata","style"],"mappings":"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"}

package/dist/chunks/variables.cjs

@@ -1,5 +1,5 @@
 "use strict";
-const styleVariables = `:root,
+const variables = `:root,
 :host {
   --ae-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
     "Noto Sans", "Liberation Sans", Arial, sans-serif,
@@ -368,5 +368,5 @@ const styleVariables = `:root,
   --clear-btn-color-hover:  var(--red-300);
 }
 `;
-exports.styleVariables = styleVariables;
+exports.variables = variables;
 //# sourceMappingURL=variables.cjs.map

package/dist/chunks/variables.js

@@ -1,4 +1,4 @@
-const styleVariables = `:root,
+const variables = `:root,
 :host {
   --ae-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
     "Noto Sans", "Liberation Sans", Arial, sans-serif,
@@ -368,6 +368,6 @@ const styleVariables = `:root,
 }
 `;
 export {
-  styleVariables as s
+  variables as v
 };
 //# sourceMappingURL=variables.js.map

package/dist/copy-button.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const copyButton = require("./chunks/copy-button.cjs");
+exports.CopyButton = copyButton.CopyButton;
+exports.default = copyButton.CopyButton;
+//# sourceMappingURL=copy-button.cjs.map

package/dist/copy-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/copy-button.js

@@ -0,0 +1,6 @@
+import { C, C as C2 } from "./chunks/copy-button.js";
+export {
+  C as CopyButton,
+  C2 as default
+};
+//# sourceMappingURL=copy-button.js.map

package/dist/copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/drawer.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const drawer = require("./chunks/drawer.cjs");
+exports.Drawer = drawer.Drawer;
+exports.default = drawer.Drawer;
+//# sourceMappingURL=drawer.cjs.map

package/dist/drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/drawer.js

@@ -0,0 +1,6 @@
+import { D, D as D2 } from "./chunks/drawer.js";
+export {
+  D as Drawer,
+  D2 as default
+};
+//# sourceMappingURL=drawer.js.map

package/dist/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/dropdown.js

@@ -1,7 +1,7 @@
-import { a, b, D } from "./chunks/dropdown-button.js";
+import { D, a, b } from "./chunks/dropdown-button.js";
 export {
-  a as DropdownButton,
-  b as DropdownItem,
-  D as default
+  D as DropdownButton,
+  a as DropdownItem,
+  b as default
 };
 //# sourceMappingURL=dropdown.js.map