aeico-components 0.1.6 → 0.1.7

package/dist/chunks/text-input.cjs

@@ -6,7 +6,7 @@ const actionButton = require("./action-button.cjs");
 const aeico = require("aeico");
 const variables = require("./variables.cjs");
 const size = require("./size.cjs");
-const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n  --input-field-gap: 4px;\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-border-radius: 2px;\n  --input-border-color: var(--border-subtle);\n  --input-border-color-hover: var(--border-default);\n  --input-border-color-focus: var(--border-focus);\n  --input-bg: var(--surface-base);\n  --input-bg-hover: var(--surface-raised);\n  --input-bg-focus: var(--surface-raised);\n  --input-color: var(--color-text-muted);\n  --input-placeholder-color: var(--color-text-disabled);\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: var(--input-border-radius);\n  background: var(--input-bg);\n  color: var(--input-color);\n  transition: var(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--input-placeholder-color);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--input-border-color-focus);\n  background: var(--input-bg-focus);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--input-border-color-hover);\n  background: var(--input-bg-hover);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--red));\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n";
+const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n  --input-field-gap: 4px;\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-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(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--ae-color-text-disabled);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--ae-border-focus);\n  background: var(--ae-surface-raised);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-surface-raised);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n";
 class TextInput extends actionButton.AeicoField {
   constructor() {
     super(...arguments);

package/dist/chunks/text-input.js

@@ -5,7 +5,7 @@ import { A as AeicoField, f as fieldLabelCSS, a as actionButtonCSS } from "./act
 import { 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(--size-base);\n  --input-field-gap: 4px;\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-border-radius: 2px;\n  --input-border-color: var(--border-subtle);\n  --input-border-color-hover: var(--border-default);\n  --input-border-color-focus: var(--border-focus);\n  --input-bg: var(--surface-base);\n  --input-bg-hover: var(--surface-raised);\n  --input-bg-focus: var(--surface-raised);\n  --input-color: var(--color-text-muted);\n  --input-placeholder-color: var(--color-text-disabled);\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: var(--input-border-radius);\n  background: var(--input-bg);\n  color: var(--input-color);\n  transition: var(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--input-placeholder-color);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--input-border-color-focus);\n  background: var(--input-bg-focus);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--input-border-color-hover);\n  background: var(--input-bg-hover);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--red));\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n";
+const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n  --input-field-gap: 4px;\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-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(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--ae-color-text-disabled);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--ae-border-focus);\n  background: var(--ae-surface-raised);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-surface-raised);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n";
 class TextInput extends AeicoField {
   constructor() {
     super(...arguments);

package/dist/chunks/textarea.cjs

@@ -3,7 +3,7 @@ const actionButton = require("./action-button.cjs");
 const aeico = require("aeico");
 const variables = require("./variables.cjs");
 const size = require("./size.cjs");
-const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  --textarea-font-size: 1em;\n  --textarea-padding: 0.333em 0.583em;\n  --textarea-border-width: 1px;\n  --textarea-border-radius: 2px;\n  --textarea-border-color: var(--border-subtle);\n  --textarea-border-color-hover: var(--border-default);\n  --textarea-border-color-focus: var(--border-focus);\n  --textarea-bg: var(--surface-base);\n  --textarea-bg-hover: var(--surface-raised);\n  --textarea-bg-focus: var(--surface-raised);\n  --textarea-color: var(--color-text-muted);\n  --textarea-placeholder-color: var(--color-text-disabled);\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(--textarea-border-color);\n  border-radius: var(--textarea-border-radius);\n  background: var(--textarea-bg);\n  color: var(--textarea-color);\n  transition: var(--textarea-transition);\n  resize: vertical;\n}\n\ntextarea::placeholder {\n  color: var(--textarea-placeholder-color);\n}\n\ntextarea:focus {\n  outline: none;\n  border-color: var(--textarea-border-color-focus);\n  background: var(--textarea-bg-focus);\n}\n\ntextarea:hover:not(:focus) {\n  border-color: var(--textarea-border-color-hover);\n  background: var(--textarea-bg-hover);\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(--red));\n}\n\n:host([error]) textarea:hover:not(:focus),\n:host([error]) textarea:focus {\n  border-color: var(--field-error-color, var(--red));\n}\n";
+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;

package/dist/chunks/textarea.js

@@ -2,7 +2,7 @@ import { A as AeicoField, f as fieldLabelCSS, a as actionButtonCSS } from "./act
 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(--size-base);\n\n  --textarea-font-size: 1em;\n  --textarea-padding: 0.333em 0.583em;\n  --textarea-border-width: 1px;\n  --textarea-border-radius: 2px;\n  --textarea-border-color: var(--border-subtle);\n  --textarea-border-color-hover: var(--border-default);\n  --textarea-border-color-focus: var(--border-focus);\n  --textarea-bg: var(--surface-base);\n  --textarea-bg-hover: var(--surface-raised);\n  --textarea-bg-focus: var(--surface-raised);\n  --textarea-color: var(--color-text-muted);\n  --textarea-placeholder-color: var(--color-text-disabled);\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(--textarea-border-color);\n  border-radius: var(--textarea-border-radius);\n  background: var(--textarea-bg);\n  color: var(--textarea-color);\n  transition: var(--textarea-transition);\n  resize: vertical;\n}\n\ntextarea::placeholder {\n  color: var(--textarea-placeholder-color);\n}\n\ntextarea:focus {\n  outline: none;\n  border-color: var(--textarea-border-color-focus);\n  background: var(--textarea-bg-focus);\n}\n\ntextarea:hover:not(:focus) {\n  border-color: var(--textarea-border-color-hover);\n  background: var(--textarea-bg-hover);\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(--red));\n}\n\n:host([error]) textarea:hover:not(:focus),\n:host([error]) textarea:focus {\n  border-color: var(--field-error-color, var(--red));\n}\n";
+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;

package/dist/chunks/tooltip.cjs

@@ -8,19 +8,18 @@ const tooltipStyle = `:host {
   vertical-align: middle;
 
   --ae-tooltip-z-index: 1000;
-  --ae-tooltip-bg: var(--dark, #343a40);
+  --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-border-radius: 4px;
   --ae-tooltip-arrow-size: 5px;
   --ae-tooltip-gap: 6px;
   --ae-tooltip-max-width: 20rem;
 }
 
 :host-context([theme="dark"]) {
-  --ae-tooltip-bg: var(--light, #f8f9fa);
-  --ae-tooltip-color: var(--dark, #343a40);
+  --ae-tooltip-bg: var(--ae-light, #f8f9fa);
+  --ae-tooltip-color: var(--ae-dark, #343a40);
 }
 
 .tooltip-panel {
@@ -32,7 +31,7 @@ const tooltipStyle = `:host {
   padding: var(--ae-tooltip-padding);
   font-size: var(--ae-tooltip-font-size);
   font-family: inherit;
-  border-radius: var(--ae-tooltip-border-radius);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   line-height: 1.4;
   white-space: nowrap;
   max-width: var(--ae-tooltip-max-width);

package/dist/chunks/tooltip.cjs.map

@@ -1 +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":"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"}
+{"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":"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"}

package/dist/chunks/tooltip.js

@@ -7,19 +7,18 @@ const tooltipStyle = `:host {
   vertical-align: middle;
 
   --ae-tooltip-z-index: 1000;
-  --ae-tooltip-bg: var(--dark, #343a40);
+  --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-border-radius: 4px;
   --ae-tooltip-arrow-size: 5px;
   --ae-tooltip-gap: 6px;
   --ae-tooltip-max-width: 20rem;
 }
 
 :host-context([theme="dark"]) {
-  --ae-tooltip-bg: var(--light, #f8f9fa);
-  --ae-tooltip-color: var(--dark, #343a40);
+  --ae-tooltip-bg: var(--ae-light, #f8f9fa);
+  --ae-tooltip-color: var(--ae-dark, #343a40);
 }
 
 .tooltip-panel {
@@ -31,7 +30,7 @@ const tooltipStyle = `:host {
   padding: var(--ae-tooltip-padding);
   font-size: var(--ae-tooltip-font-size);
   font-family: inherit;
-  border-radius: var(--ae-tooltip-border-radius);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   line-height: 1.4;
   white-space: nowrap;
   max-width: var(--ae-tooltip-max-width);

package/dist/chunks/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","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":["_a","styleVariables"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","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":["_a","styleVariables"],"mappings":"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"}

package/dist/chunks/tree.cjs

@@ -3,7 +3,7 @@ const aeicoComponent = require("./aeico-component.cjs");
 const aeico = require("aeico");
 const variables = require("./variables.cjs");
 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";
+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(--ae-color-text-main, #343a40);\n  --tree-item-color-disabled: var(--ae-color-text-disabled, #bbb);\n  --tree-item-bg-hover: var(--ae-surface-raised, rgba(0, 0, 0, 0.04));\n  --tree-item-bg-selected: var(--ae-color-primary-bg-subtle, rgba(14, 99, 156, 0.08));\n  --tree-item-color-selected: var(--ae-color-primary, #0e639c);\n  --tree-item-line-color: var(--ae-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-border-radius, var(--ae-radius-sm));\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-border-radius, var(--ae-radius-sm));\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(--ae-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(--ae-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(--ae-color-primary, #0e639c);\n  outline-offset: -2px;\n  border-radius: var(--ae-border-radius, var(--ae-radius-sm));\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;

package/dist/chunks/tree.js

@@ -2,7 +2,7 @@ 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";
+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(--ae-color-text-main, #343a40);\n  --tree-item-color-disabled: var(--ae-color-text-disabled, #bbb);\n  --tree-item-bg-hover: var(--ae-surface-raised, rgba(0, 0, 0, 0.04));\n  --tree-item-bg-selected: var(--ae-color-primary-bg-subtle, rgba(14, 99, 156, 0.08));\n  --tree-item-color-selected: var(--ae-color-primary, #0e639c);\n  --tree-item-line-color: var(--ae-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-border-radius, var(--ae-radius-sm));\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-border-radius, var(--ae-radius-sm));\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(--ae-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(--ae-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(--ae-color-primary, #0e639c);\n  outline-offset: -2px;\n  border-radius: var(--ae-border-radius, var(--ae-radius-sm));\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;