aeico-components 0.1.7 → 0.1.8

package/dist/tree.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"tree.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{
+  "version": 3,
+  "sources": ["../src/aeico-component.ts", "../src/utils.ts", "../src/tree/tree.ts", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tree.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "../src/tree/tree-item.ts", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tree-item.css", "../src/icon/icon.ts", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/size.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/color.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/icon.css", "../src/icon/defines.ts", "../src/icon/registry.ts", "../src/icon/built-in-icons.ts"],
+  "sourcesContent": ["\uFEFFimport { AeicoElement } from 'aeico';\nimport { toKebab } from './utils';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n  static register(name?: string) {\n    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;\n\n    super.register(tagName);\n  }\n}\n\nexport default AeicoComponent;\n", "export const SVG_NS = 'http://www.w3.org/2000/svg';\n\nexport function toKebab(str: string): string {\n  const cleaned = str.replace(/^[_\\d]+/, '');\n\n  return cleaned.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n", "import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport style from '../styles/components/tree.css';\nimport variables from '../styles/variables.css';\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 \u2014 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", "export default \":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\"", "export default \":root,\\n:host {\\n  --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n    \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n    \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n    \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  font-family: var(--ae-font-sans-serif);\\n  --ae-blue:   #0e639c;\\n  --ae-green:  #28a745;\\n  --ae-red:    #dc3545;\\n  --ae-yellow: #ffc107;\\n  --ae-cyan:   #17a2b8;\\n  --ae-gray:   #6e6e6e;\\n  --ae-slate:  #64748b;\\n  --ae-dark:   #343a40;\\n  --ae-light:  #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n  /* Blue */\\n  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n  --ae-blue-500: var(--ae-blue);\\n  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n  /* Green */\\n  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n  --ae-green-500: var(--ae-green);\\n  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n  /* Red */\\n  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n  --ae-red-500: var(--ae-red);\\n  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n  /* Yellow */\\n  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n  --ae-yellow-500: var(--ae-yellow);\\n  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n  /* Cyan */\\n  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n  --ae-cyan-500: var(--ae-cyan);\\n  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n  /* Gray  (neutral \u2014 base #6e6e6e) */\\n  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n  --ae-gray-500: var(--ae-gray);\\n  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */\\n  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n  --ae-slate-500: var(--ae-slate);\\n  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n  /* Dark  (base #343a40) */\\n  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n  --ae-dark-500: var(--ae-dark);\\n  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n  /* Light  (base #f8f9fa) */\\n  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n  --ae-light-500: var(--ae-light);\\n  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n  /* Hover / active mix (light default \u2014 overridden in \u00A7 6 dark) */\\n  --ae-color-mix-hover:  black 10%;\\n  --ae-color-mix-active: black 20%;\\n\\n  /* Primary (Blue) */\\n  --ae-color-primary:          var(--ae-blue-500);\\n  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n  /* Success (Green) */\\n  --ae-color-success:          var(--ae-green-500);\\n  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n  /* Danger (Red) */\\n  --ae-color-danger:           var(--ae-red-500);\\n  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n  /* Warning (Yellow) */\\n  --ae-color-warning:          var(--ae-yellow-500);\\n  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n  /* Info (Cyan) */\\n  --ae-color-info:             var(--ae-cyan-500);\\n  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n  /* Secondary (Slate) \u2014 base differs per theme, overridden in \u00A7 6 dark */\\n  --ae-color-secondary:        var(--ae-slate-500);\\n  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n  --ae-color-secondary-text:   var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n  color-scheme: light;\\n\\n  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */\\n  --ae-color-gray-dark:     var(--ae-gray-400);\\n  --ae-color-gray:          var(--ae-gray-300);\\n  --ae-color-gray-light:    var(--ae-gray-200);\\n  --ae-color-gray-lighter:  var(--ae-gray-100);\\n  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n  /* Text */\\n  --ae-color-text-main:       var(--ae-dark-700);\\n  --ae-color-text-muted:      var(--ae-gray-600);\\n  --ae-color-text-disabled:   var(--ae-gray-300);\\n  --ae-color-text-link:       var(--ae-blue-500);\\n  --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-light-500);\\n  --ae-surface-base:    white;\\n  --ae-surface-raised:  var(--ae-light-500);\\n  --ae-surface-overlay: white;\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.4);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(0, 0, 0, 0.08);\\n  --ae-border-default:  rgba(0, 0, 0, 0.15);\\n  --ae-border-hover:    rgba(0, 0, 0, 0.25);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n  /* Subtle intent tokens \u2014 light context */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-700);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);\\n  --ae-color-success-text-emphasis:   var(--ae-green-700);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-700);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-700);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */\\n  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */\\n\\n  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */\\n  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */\\n\\n  /* Component tokens \u2014 light defaults */\\n  --ae-action-btn-bg:          var(--ae-gray-200);\\n  --ae-action-btn-bg-hover:    var(--ae-color-primary);\\n  --ae-action-btn-color:       var(--ae-gray-600);\\n  --ae-action-btn-color-hover: white;\\n\\n  --ae-clear-btn-bg-hover:     var(--ae-color-danger);\\n  --ae-clear-btn-color-hover:  white;\\n\\n  --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n  --ae-reset-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);\\n  --ae-reset-btn-color:         var(--ae-action-btn-color);\\n  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);\\n  --ae-reset-btn-transition:    all 0.12s;\\n\\n  --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n  --ae-clear-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-clear-btn-color:         var(--ae-action-btn-color);\\n  --ae-clear-btn-transition:    all 0.12s;\\n}\\n\\n:root,\\n:host {\\n  --ae-size-scale: 1;\\n  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */\\n  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */\\n  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */\\n  --ae-size-m:     var(--ae-size-base);                                  /* 16px */\\n  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */\\n  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */\\n  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */\\n  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */\\n}\\n\\n/* Border-radius tokens \u2014 shared across all components */\\n:root,\\n:host {\\n  /**\\n   * Unified border-radius hook for all components.\\n   *\\n   * Not set by default \u2014 each component falls back to its own --ae-radius-*\\n   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).\\n   *\\n   * Usage:\\n   *   :root { --ae-border-radius: 0; }       // global: all components square\\n   *   :root { --ae-border-radius: 999px; }   // global: all components pill\\n   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar\\n   *\\n   * To restore a component to its own default:\\n   *   ae-card { --ae-border-radius: initial; }\\n   */\\n\\n  --ae-radius-square:  0;\\n  --ae-radius-xs:      2px;\\n  --ae-radius-sm:      4px;\\n  --ae-radius-md:      6px;\\n  --ae-radius-lg:      8px;\\n  --ae-radius-xl:      12px;\\n  --ae-radius-pill:    999px;\\n  --ae-radius-circle:  50%;\\n}\\n\\n/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n  --container-max-width: 1280px;\\n  --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n  color-scheme: dark;\\n\\n  /* Hover / active \u2014 slightly gentler on dark backgrounds */\\n  --ae-color-mix-hover:  black 8%;\\n  --ae-color-mix-active: black 16%;\\n\\n  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */\\n  --ae-color-gray-dark:     var(--ae-gray-800);\\n  --ae-color-gray:          var(--ae-gray-700);\\n  --ae-color-gray-light:    var(--ae-gray-600);\\n  --ae-color-gray-lighter:  var(--ae-gray-500);\\n  --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n  /* Secondary \u2014 deeper base on dark background */\\n  --ae-color-secondary:      var(--ae-slate-700);\\n  --ae-color-secondary-text: var(--ae-slate-300);\\n\\n  /* Text */\\n  --ae-color-text-main:       white;\\n  --ae-color-text-muted:      var(--ae-gray-200);\\n  --ae-color-text-disabled:   var(--ae-gray-500);\\n  --ae-color-text-link:       var(--ae-blue-300);\\n  --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-gray-900);\\n  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);\\n  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);\\n  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.6);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(255, 255, 255, 0.08);\\n  --ae-border-default:  rgba(255, 255, 255, 0.12);\\n  --ae-border-hover:    rgba(255, 255, 255, 0.20);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-300);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);\\n  --ae-color-success-text-emphasis:   var(--ae-green-300);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-300);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-300);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);\\n  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);\\n\\n  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);\\n  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);\\n\\n  /* Component tokens \u2014 dark overrides */\\n  --ae-action-btn-bg:          var(--ae-color-gray);\\n  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n  --ae-action-btn-color:       var(--ae-gray-400);\\n  --ae-action-btn-color-hover: var(--ae-cyan-300);\\n  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n  --ae-clear-btn-color-hover:  var(--ae-red-300);\\n}\\n\"", "import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport style from '../styles/components/tree-item.css';\nimport variables from '../styles/variables.css';\nimport type { ParentTreeLike } from './defines';\nimport { SVG_NS } from '../utils';\nimport '../icon';\n\nlet _autoKeyCounter = 0;\n\n/**\n * Tree item \u2014 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 \u2014 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", "export default \":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\"", "\uFEFFimport type { InferProps, Props } from 'aeico';\nimport { SVG_NS } from '../utils';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport sizeCSS from '../styles/size.css';\nimport colorCSS from '../styles/color.css';\nimport style from '../styles/components/icon.css';\nimport type { IconSize, IconColor } from './defines';\nimport { defaultViewBox } from './defines';\nimport IconRegistry from './registry';\nimport './built-in-icons';\n\nclass Icon extends AeicoComponent {\n  static tagName = 'icon';\n\n  static props: Props = {\n    name: { type: String },\n    size: { type: String },\n    color: { type: String },\n    stroke: { type: Boolean },\n    strokeWidth: { type: Number },\n  };\n\n  declare name?: string;\n  declare size?: IconSize;\n  declare color?: IconColor;\n  declare stroke?: boolean;\n  declare strokeWidth?: number;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n  protected render() {\n    const def = this.name ? IconRegistry.get(this.name) : undefined;\n\n    // Numeric size: set font-size directly (string sizes are handled by size.css)\n    const numericSize = Number(this.size);\n    if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {\n      this.style.setProperty('font-size', `${numericSize}px`);\n    } else {\n      this.style.removeProperty('font-size');\n    }\n\n    if (!def) return;\n\n    const { paths } = def;\n    const isMultiPath = Array.isArray(paths);\n\n    // Stroke CSS variables only apply in single-path mode (component props)\n    if (!isMultiPath) {\n      const useStroke =\n        this.stroke ?? (this.strokeWidth !== undefined ? true : (def.stroke ?? false));\n      const useStrokeWidth = this.strokeWidth ?? def.strokeWidth ?? 2;\n\n      if (useStroke) {\n        this.style.setProperty('--icon-fill', 'none');\n        this.style.setProperty('--icon-stroke', 'currentColor');\n        this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));\n      } else {\n        this.style.removeProperty('--icon-fill');\n        this.style.removeProperty('--icon-stroke');\n        this.style.removeProperty('--icon-stroke-width');\n      }\n    } else {\n      this.style.removeProperty('--icon-fill');\n      this.style.removeProperty('--icon-stroke');\n      this.style.removeProperty('--icon-stroke-width');\n    }\n\n    return html(({ svg, path }) => {\n      svg(\n        {\n          className: 'icon-svg',\n          viewBox: def.viewBox ?? defaultViewBox,\n          'aria-hidden': 'true',\n          xmlns: SVG_NS,\n        },\n        () => {\n          if (typeof paths === 'string') {\n            path({ d: paths });\n          } else {\n            for (const p of paths) {\n              const attrs: Record<string, unknown> = { d: p.d };\n              if (p.fill) attrs.style = { fill: p.fill };\n              path(attrs);\n            }\n          }\n        },\n      );\n    });\n  }\n}\n\nIcon.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-icon': Icon;\n  }\n}\n\nexport default Icon;\nexport type IconProps = InferProps<typeof Icon>;\n", "export default \":host([size=\\\"xs\\\"]) { font-size: var(--ae-size-xs); }\\n:host([size=\\\"sm\\\"]) { font-size: var(--ae-size-s); }\\n:host([size=\\\"md\\\"]) { font-size: var(--ae-size-m); }\\n:host([size=\\\"lg\\\"]) { font-size: var(--ae-size-l); }\\n:host([size=\\\"xl\\\"]) { font-size: var(--ae-size-xl); }\\n:host([size=\\\"3xs\\\"]) { font-size: var(--ae-size-3xs); }\\n:host([size=\\\"2xs\\\"]) { font-size: var(--ae-size-2xs); }\\n\"", "export default \":host {\\n  --ae-color-solid:           var(--ae-color-gray);\\n  --ae-color-solid-hover:     color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n  --ae-color-solid-active:    color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n  --ae-color-on-solid:        var(--ae-color-text-main);\\n  --ae-color-border:          var(--ae-color-gray);\\n  --ae-color-border-hover:    color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n  --ae-color-accent:          var(--ae-color-text-muted);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          var(--ae-border-subtle);\\n  --ae-color-subtle-hover:    var(--ae-border-default);\\n  --ae-color-bg-subtle:       var(--ae-border-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\\n  --ae-color-border-subtle:   var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n  --ae-color-solid:           var(--ae-color-primary);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-primary);\\n  --ae-color-accent:          var(--ae-color-text-link);\\n  --ae-color-accent-hover:    var(--ae-color-text-link-hover);\\n  --ae-color-subtle:          var(--ae-color-primary-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-blue) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n  --ae-color-solid:           var(--ae-color-secondary);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-secondary-hover);\\n  --ae-color-accent:          var(--ae-color-secondary-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          rgb(from var(--ae-slate) r g b / 0.06);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-slate) r g b / 0.12);\\n  --ae-color-bg-subtle:       var(--ae-color-secondary-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-secondary-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n  --ae-color-solid:           var(--ae-color-success);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-success);\\n  --ae-color-accent:          var(--ae-color-success-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-success-hover);\\n  --ae-color-subtle:          var(--ae-color-success-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-green) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-success-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-success-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n  --ae-color-solid:           var(--ae-color-danger);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-danger);\\n  --ae-color-accent:          var(--ae-color-danger-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-danger-hover);\\n  --ae-color-subtle:          var(--ae-color-danger-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-red) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-danger-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-danger-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n  --ae-color-solid:           var(--ae-color-warning);\\n  --ae-color-on-solid:        var(--ae-gray-900);\\n  --ae-color-border:          var(--ae-color-warning);\\n  --ae-color-accent:          var(--ae-color-warning-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-warning-hover);\\n  --ae-color-subtle:          var(--ae-color-warning-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-yellow) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-warning-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-warning-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n  --ae-color-solid:           var(--ae-color-info);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-info);\\n  --ae-color-accent:          var(--ae-color-info-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-info-hover);\\n  --ae-color-subtle:          var(--ae-color-info-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-cyan) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-info-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-info-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n  --ae-color-solid:           var(--ae-light);\\n  --ae-color-on-solid:        var(--ae-gray-900);\\n  --ae-color-border:          var(--ae-border-hover);\\n  --ae-color-subtle:          var(--ae-color-light-bg-subtle);\\n  --ae-color-subtle-hover:    var(--ae-color-light-border-subtle);\\n  --ae-color-bg-subtle:       var(--ae-color-light-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\\n  --ae-color-border-subtle:   var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n  --ae-color-solid:           var(--ae-dark-500);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-dark-500);\\n  --ae-color-accent:          var(--ae-color-text-main);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          var(--ae-color-dark-bg-subtle);\\n  --ae-color-subtle-hover:    var(--ae-color-dark-border-subtle);\\n  --ae-color-bg-subtle:       var(--ae-color-dark-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-main);\\n  --ae-color-border-subtle:   var(--ae-color-dark-border-subtle);\\n}\\n\"", "export default \":host {\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n  font-size: 20px;\\n  width:  1em;\\n  height: 1em;\\n  color: inherit;\\n  flex-shrink: 0;\\n  line-height: 0;\\n  vertical-align: middle;\\n}\\n\\n:host([color]) {\\n  color: var(--ae-color-solid);\\n}\\n\\n.icon-svg {\\n  display: block;\\n  width: 100%;\\n  height: 100%;\\n  fill: var(--icon-fill, currentColor);\\n  stroke: var(--icon-stroke, none);\\n  stroke-width: var(--icon-stroke-width, 2);\\n  stroke-linecap: var(--icon-stroke-linecap, round);\\n  stroke-linejoin: var(--icon-stroke-linejoin, round);\\n  pointer-events: none;\\n  overflow: visible;\\n}\\n\"", "export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport type IconColor =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\nexport interface IconPathDef {\n  d: string;\n  fill?: string;\n  stroke?: boolean;\n  strokeWidth?: number;\n}\n\nexport interface IconDefinition {\n  paths: string | IconPathDef[];\n  viewBox?: string;\n  stroke?: boolean;\n  strokeWidth?: number;\n}\n\nexport const defaultViewBox = '0 0 24 24';\n\nexport type IconRegistryData = Record<string, string | IconDefinition>;\n", "import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';\n\nclass IconRegistry {\n  private static _icons: Map<string, IconDefinition> = new Map();\n  /** Names registered via addBuiltIn \u2014 can be overridden by user add() calls */\n  private static _builtInKeys: Set<string> = new Set();\n\n  /** Register user icons. Always takes priority over built-in icons. */\n  static add(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      if (typeof data === 'string') {\n        this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n      // Mark as user-defined (removes built-in status)\n      this._builtInKeys.delete(name);\n    }\n  }\n\n  /**\n   * Register built-in icons provided by the library.\n   * A built-in icon will NOT overwrite an icon already registered by the user.\n   */\n  static addBuiltIn(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      // Skip if the user has already registered this icon\n      if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;\n      if (typeof data === 'string') {\n        this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n      this._builtInKeys.add(name);\n    }\n  }\n\n  static get(name: string): IconDefinition | undefined {\n    return this._icons.get(name);\n  }\n\n  static has(name: string): boolean {\n    return this._icons.has(name);\n  }\n}\n\nexport default IconRegistry;\n", "/**\n * Built-in system icons used internally by aeico components.\n * These are pre-registered so components work out of the box.\n * Users can override any of them by calling IconRegistry.add({ 'name': '...' }).\n *\n * All paths use the Material Design 24\u00D724 viewBox.\n */\nimport IconRegistry from './registry';\n\nIconRegistry.addBuiltIn({\n  copy: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',\n  check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',\n  'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z',\n  'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z',\n  'chevron-up': 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z',\n  'chevron-down': 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z',\n  'chevrons-left': 'M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z',\n  'chevrons-right': 'M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z',\n  close:\n    'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',\n});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAC,SAAS,oBAAoB;;;ACAvB,IAAM,SAAS;AAEf,SAAS,QAAQ,KAAqB;AAC3C,QAAM,UAAU,IAAI,QAAQ,WAAW,EAAE;AAEzC,SAAO,QAAQ,QAAQ,mBAAmB,OAAO,EAAE,YAAY;AACjE;;;ADHA,IAAM,kBAAkB;AAKxB,IAAM,iBAAN,cAA6B,aAAa;AAAA,EACxC,OAAO,SAAS,MAAe;AAC7B,UAAM,UAAU,QAAQ,GAAG,eAAe,IAAI,KAAK,WAAW,QAAQ,KAAK,IAAI,CAAC;AAEhF,UAAM,SAAS,OAAO;AAAA,EACxB;AACF;AAEA,IAAO,0BAAQ;;;AEdf,SAAS,QAAAA,OAAM,QAAAC,aAAY;;;ACF3B,IAAO,eAAQ;;;ACAf,IAAO,oBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A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",
+  "names": ["html", "prop", "html", "html", "tree_item_default", "_icon_dec", "_a", "_init", "_icon", "prop", "html", "tree_default"]
+}

package/dist/types/dialog/dialog.d.ts

@@ -1,5 +1,6 @@
 import type { InferProps, Props } from 'aeico';
 import AeicoComponent from '../aeico-component';
+import '../icon/icon';
 declare class Dialog extends AeicoComponent {
     static props: Props;
     label?: string;

package/dist/types/drawer/drawer.d.ts

@@ -1,6 +1,7 @@
 import type { InferProps } from 'aeico';
 import AeicoComponent from '../aeico-component';
 import type { DrawerPlacement } from './defines';
+import '../icon/icon';
 declare class Drawer extends AeicoComponent {
     protected static styles: string[];
     accessor label: string | undefined;
@@ -17,6 +18,7 @@ declare class Drawer extends AeicoComponent {
     private _handlePanelClick;
     private _handleKeydown;
     private _handleFooterSlotChange;
+    private _closeTimeout;
     open(): void;
     close(): void;
     isOpen(): boolean;

package/dist/types/icon/defines.d.ts

@@ -3,6 +3,8 @@ export type IconColor = 'default' | 'primary' | 'secondary' | 'success' | 'dange
 export interface IconPathDef {
     d: string;
     fill?: string;
+    stroke?: boolean;
+    strokeWidth?: number;
 }
 export interface IconDefinition {
     paths: string | IconPathDef[];

package/dist/types/menu/defines.d.ts

@@ -7,6 +7,7 @@ export interface ParentMenuLike extends Element {
     mode?: MenuMode;
     orientation?: MenuOrientation;
     trigger?: MenuTrigger;
+    wrapText?: boolean;
 }
 export interface MenuSelectDetail {
     key: string;

package/dist/types/menu/menu-item.d.ts

@@ -40,6 +40,7 @@ declare class MenuItem extends AeicoComponent {
     private get _mode();
     private get _orientation();
     private get _trigger();
+    private get _wrapText();
     private get _isParent();
     /** Compute flyout panel placement based on depth and parent orientation. */
     private get _panelPlacement();

package/dist/types/menu/menu.d.ts

@@ -21,6 +21,7 @@ declare class Menu extends AeicoComponent {
     accessor orientation: MenuOrientation;
     accessor trigger: MenuTrigger;
     accessor selectedKey: string | undefined;
+    accessor wrapText: boolean;
     connectedCallback(): void;
     private _handleItemSelect;
     protected render(): import("aeico-view").RenderResult;

package/dist/types/styles/layout.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string
+export default _default

package/dist/types/styles/radius.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string
+export default _default

package/dist/types/styles/variables.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string
+export default _default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aeico-components",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Built-in UI components for the Aeico Web Components framework",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -12,6 +12,24 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./styles/variables.css": "./src/styles/variables.css",
+    "./styles/layout.css": "./src/styles/layout.css",
+    "./styles/radius.css": "./src/styles/radius.css",
+    "./styles/variables": {
+      "types": "./dist/types/styles/variables.d.ts",
+      "import": "./dist/styles/variables.js",
+      "require": "./dist/styles/variables.cjs"
+    },
+    "./styles/layout": {
+      "types": "./dist/types/styles/layout.d.ts",
+      "import": "./dist/styles/layout.js",
+      "require": "./dist/styles/layout.cjs"
+    },
+    "./styles/radius": {
+      "types": "./dist/types/styles/radius.d.ts",
+      "import": "./dist/styles/radius.js",
+      "require": "./dist/styles/radius.cjs"
+    },
     "./*": {
       "types": "./dist/types/*/index.d.ts",
       "import": "./dist/*.js",
@@ -24,15 +42,20 @@
     "src"
   ],
   "sideEffects": [
-    "./src/icon/built-in-icons.ts",
+    "./src/**/*.ts",
+    "./src/styles/variables.css",
+    "./src/styles/layout.css",
+    "./src/styles/radius.css",
     "./dist/*.js",
     "./dist/*.cjs",
     "./dist/chunks/*.js",
-    "./dist/chunks/*.cjs"
+    "./dist/chunks/*.cjs",
+    "./dist/styles/*.js",
+    "./dist/styles/*.cjs"
   ],
   "scripts": {
-    "build": "vite build && tsc --declaration --emitDeclarationOnly --outDir dist/types -p tsconfig.json",
-    "dev": "vite build --watch",
+    "build": "node scripts/build.mjs && node scripts/build-cjs.mjs && node scripts/build-styles.mjs && tsc --declaration --emitDeclarationOnly --outDir dist/types -p tsconfig.json",
+    "dev": "node scripts/build.mjs --watch",
     "dev:example": "vite --config vite.example.config.ts",
     "type-check": "tsc --noEmit",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
@@ -56,14 +79,15 @@
     "aeico": "^0.1.5"
   },
   "devDependencies": {
-    "aeico": "^0.1.5",
-    "aeico-localize": "^0.1.1",
     "@eslint/js": "^10.0.1",
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.5",
     "@web/test-runner": "^0.20.2",
     "@web/test-runner-playwright": "^0.11.1",
+    "aeico": "^0.1.5",
+    "aeico-localize": "^0.1.1",
+    "esbuild": "^0.28.1",
     "eslint": "^10.1.0",
     "eslint-config-prettier": "^10.1.8",
     "globals": "^16.0.0",

package/src/alert/alert.ts

@@ -1,7 +1,7 @@
 import type { InferProps, Props } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import colorCSS from '../styles/color.css?inline';
-import alertStyle from '../styles/components/alert.css?inline';
+import styleVariables from '../styles/variables.css';
+import colorCSS from '../styles/color.css';
+import alertStyle from '../styles/components/alert.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import type { AlertColor, AlertSize, AlertVariant } from './defines';

package/src/badge/badge.ts

@@ -1,8 +1,8 @@
 import type { InferProps } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import sizeCSS from '../styles/size.css?inline';
-import colorCSS from '../styles/color.css?inline';
-import badgeStyle from '../styles/components/badge.css?inline';
+import styleVariables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import colorCSS from '../styles/color.css';
+import badgeStyle from '../styles/components/badge.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import type { BadgeColor, BadgeSize, BadgeVariant } from './defines';

package/src/breadcrumb/breadcrumb-item.ts

@@ -1,6 +1,6 @@
 import type { InferProps } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import style from '../styles/components/breadcrumb-item.css?inline';
+import styleVariables from '../styles/variables.css';
+import style from '../styles/components/breadcrumb-item.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import { prop } from 'aeico';

package/src/breadcrumb/breadcrumb.ts

@@ -1,7 +1,7 @@
 import type { InferProps } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import colorCSS from '../styles/color.css?inline';
-import style from '../styles/components/breadcrumb.css?inline';
+import styleVariables from '../styles/variables.css';
+import colorCSS from '../styles/color.css';
+import style from '../styles/components/breadcrumb.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import { prop } from 'aeico';

package/src/button/button.ts

@@ -1,8 +1,8 @@
 import type { InferProps } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import sizeCSS from '../styles/size.css?inline';
-import colorCSS from '../styles/color.css?inline';
-import buttonStyle from '../styles/components/button.css?inline';
+import styleVariables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import colorCSS from '../styles/color.css';
+import buttonStyle from '../styles/components/button.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import { ButtonColor, ButtonSize, ButtonVariant } from './defines';

package/src/button-group/button-group.ts

@@ -1,6 +1,6 @@
 import type { InferProps, Props } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import buttonGroupStyle from '../styles/components/button-group.css?inline';
+import styleVariables from '../styles/variables.css';
+import buttonGroupStyle from '../styles/components/button-group.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import type { ButtonColor, ButtonVariant, ButtonSize } from '../button';
@@ -88,7 +88,8 @@ class ButtonGroup extends AeicoComponent {
 
   private _syncChildren() {
     const buttons = this._getButtons();
-    const r = this.size === 'xs' || this.size === 'sm' ? 3 : 4;
+    const isSmall = this.size === 'xs' || this.size === 'sm';
+    const r = isSmall ? 'var(--ae-radius-xs)' : 'var(--ae-radius-sm)';
 
     buttons.forEach((btn: Button | DropdownButton, i) => {
       btn.variant = this.variant;
@@ -105,14 +106,12 @@ class ButtonGroup extends AeicoComponent {
         const isFirst = i === 0;
         const isLast = i === buttons.length - 1;
 
-        // Overlap adjacent borders by pulling non-first buttons left 1px
         btn.style.marginLeft = isFirst ? '' : '-1px';
 
-        // Shape corners: only the outer edges of the strip keep radius
-        btn.style.setProperty('--_btn-r-tl', isFirst ? `${r}px` : '0');
-        btn.style.setProperty('--_btn-r-bl', isFirst ? `${r}px` : '0');
-        btn.style.setProperty('--_btn-r-tr', isLast ? `${r}px` : '0');
-        btn.style.setProperty('--_btn-r-br', isLast ? `${r}px` : '0');
+        btn.style.setProperty('--_btn-r-tl', isFirst ? r : '0');
+        btn.style.setProperty('--_btn-r-bl', isFirst ? r : '0');
+        btn.style.setProperty('--_btn-r-tr', isLast ? r : '0');
+        btn.style.setProperty('--_btn-r-br', isLast ? r : '0');
       } else {
         btn.style.marginLeft = '';
         this._clearRadius(btn);

package/src/card/card.ts

@@ -1,7 +1,7 @@
 import type { InferProps } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import colorCSS from '../styles/color.css?inline';
-import cardStyle from '../styles/components/card.css?inline';
+import styleVariables from '../styles/variables.css';
+import colorCSS from '../styles/color.css';
+import cardStyle from '../styles/components/card.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import type { CardVariant, CardColor } from './defines';

package/src/checkbox/checkbox.ts

@@ -1,12 +1,12 @@
 import AeicoField, { type FieldAction } from '../aeico-field';
 import type { InferProps, Props } from 'aeico';
 import { html } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import sizeCSS from '../styles/size.css?inline';
-import colorCSS from '../styles/color.css?inline';
-import fieldLabelCSS from '../styles/components/field-label.css?inline';
-import actionButtonCSS from '../styles/components/action-button.css?inline';
-import styles from '../styles/components/checkbox.css?inline';
+import styleVariables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import colorCSS from '../styles/color.css';
+import fieldLabelCSS from '../styles/components/field-label.css';
+import actionButtonCSS from '../styles/components/action-button.css';
+import styles from '../styles/components/checkbox.css';
 import { CheckboxVariant } from './defines';
 
 class Checkbox extends AeicoField<boolean> {

package/src/copy-button/copy-button.ts

@@ -1,8 +1,8 @@
 import type { InferProps } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import sizeCSS from '../styles/size.css?inline';
-import colorCSS from '../styles/color.css?inline';
-import copyButtonStyle from '../styles/components/copy-button.css?inline';
+import styleVariables from '../styles/variables.css';
+import sizeCSS from '../styles/size.css';
+import colorCSS from '../styles/color.css';
+import copyButtonStyle from '../styles/components/copy-button.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import { prop } from 'aeico';

package/src/detail/detail.ts

@@ -1,7 +1,7 @@
 import type { InferProps } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import colorCSS from '../styles/color.css?inline';
-import detailStyle from '../styles/components/detail.css?inline';
+import styleVariables from '../styles/variables.css';
+import colorCSS from '../styles/color.css';
+import detailStyle from '../styles/components/detail.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import { prop } from 'aeico';

package/src/detail-group/detail-group.ts

@@ -1,6 +1,6 @@
 import type { InferProps, Props } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import detailGroupStyle from '../styles/components/detail-group.css?inline';
+import styleVariables from '../styles/variables.css';
+import detailGroupStyle from '../styles/components/detail-group.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import type Detail from '../detail/detail';

package/src/dialog/dialog.ts

@@ -1,8 +1,9 @@
 import type { InferProps, Props } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import style from '../styles/components/dialog.css?inline';
+import styleVariables from '../styles/variables.css';
+import style from '../styles/components/dialog.css';
 import AeicoComponent from '../aeico-component';
-import { html } from 'aeico';
+import { html, tags } from 'aeico';
+import '../icon/icon';
 
 class Dialog extends AeicoComponent {
   static props: Props = {
@@ -40,28 +41,31 @@ class Dialog extends AeicoComponent {
           },
         },
         () => {
-          // Header
           if (this.header !== false) {
             header({}, () => {
               slot({ name: 'header' }, () => {
                 span({ className: 'label', textContent: this.label || '' });
               });
               if (this.closable !== false) {
-                button({
-                  className: 'close-btn',
-                  textContent: '×',
-                  '@click': () => this.close(),
-                });
+                const { aeIcon } = tags;
+                button(
+                  {
+                    className: 'close-btn',
+                    'aria-label': 'close',
+                    '@click': () => this.close(),
+                  },
+                  () => {
+                    aeIcon({ name: 'close' });
+                  },
+                );
               }
             });
           }
 
-          // Body
           div({ className: 'body' }, () => {
             slot();
           });
 
-          // Footer — always rendered to capture slotchange, hidden when empty
           footer(
             {
               style: { display: this._hasFooter ? '' : 'none' },
@@ -79,7 +83,6 @@ class Dialog extends AeicoComponent {
     const mouseEvent = e as MouseEvent;
     const path = mouseEvent.composedPath();
 
-    // data-close: any slotted element with [data-close] closes the dialog
     for (const el of path) {
       if (el instanceof Element && el.hasAttribute('data-close')) {
         this.close();
@@ -88,7 +91,6 @@ class Dialog extends AeicoComponent {
       if (el === this._dialogEl) break;
     }
 
-    // Backdrop click (modal mode only)
     if (this.modal !== false && this.closeOnOverlayClick !== false) {
       if (mouseEvent.target === this._dialogEl) {
         const rect = this._dialogEl!.getBoundingClientRect();
@@ -129,7 +131,6 @@ class Dialog extends AeicoComponent {
 
   close() {
     this._dialogEl?.close();
-    // emit('close') is handled by _handleNativeClose via the native 'close' event
   }
 
   isOpen(): boolean {

package/src/divider/divider.ts

@@ -1,8 +1,8 @@
 import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
-import styleVariables from '../styles/variables.css?inline';
-import colorCSS from '../styles/color.css?inline';
-import style from '../styles/components/divider.css?inline';
+import styleVariables from '../styles/variables.css';
+import colorCSS from '../styles/color.css';
+import style from '../styles/components/divider.css';
 import { prop } from 'aeico';
 /**
  * A simple divider component that can be used to separate content. It supports both horizontal and vertical orientations, as well as customizable thickness and color.