@public-ui/components 4.2.1 → 4.3.0-rc.1

package/dist/collection/components/tree/component.js

@@ -14,16 +14,16 @@ export class KolTreeWc {
     validateLabel(value) {
         validateLabel(this, value);
     }
-    async focus() {
+    async focus(options) {
         var _a;
         const openItems = await this.getOpenTreeItemElements();
-        await ((_a = openItems === null || openItems === void 0 ? void 0 : openItems[0]) === null || _a === void 0 ? void 0 : _a.focus());
+        await ((_a = openItems === null || openItems === void 0 ? void 0 : openItems[0]) === null || _a === void 0 ? void 0 : _a.focus(options));
     }
     async invalidateOpenItemsCache() {
         await Promise.resolve((this.cacheValid = false));
     }
     render() {
-        return (h(Host, { key: 'a788072549f6998bb11036a8d4b6fdb86ecc589b', onSlotchange: this.handleSlotchange.bind(this) }, h("nav", { key: '655f5ab41e487c1351df3526e8cfe9880787247a', class: "kol-tree", "aria-label": this.state._label }, h("ul", { key: 'a11bb5d15793e011bb53df02a6ee9627d6060b4e', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, h("slot", { key: 'c861df068ff6bfff14c5a5262d3f718db3b7da85' })))));
+        return (h(Host, { key: 'e959e7567723280a3d2b977fd517a8a244da4f1d', onSlotchange: this.handleSlotchange.bind(this) }, h("nav", { key: 'b52775ce12c956296121529050946f6df7ba4297', class: "kol-tree", "aria-label": this.state._label }, h("ul", { key: '009f17ecffc6cc4548c61a16592fa72d9f6b82ec', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, h("slot", { key: '4c929606aa81ed19511e29f31c002343083114b9' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
@@ -265,12 +265,21 @@ export class KolTreeWc {
         return {
             "focus": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: KolFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "KolFocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::KolFocusOptions"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/components/tree/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/tree/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { KolTreeItemTag, KolTreeTag } from '../../core/component-names';\nimport type { FocusableElement, LabelPropType, TreeAPI, TreeStates } from '../../schema';\nimport { validateLabel } from '../../schema';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolTreeWcElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\n\tprivate cachedOpenItems?: HTMLKolTreeItemElement[] | undefined;\n\tprivate cacheValid = false;\n\tprivate rafHandle?: number;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t/**\n\t * Sets focus on the first focusable tree item.\n\t */\n\t@Method()\n\tpublic async focus(): Promise<void> {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tawait openItems?.[0]?.focus();\n\t}\n\n\t/**\n\t * Invalidates the cache for open tree items.\n\t * Called by tree-item when expand/collapse occurs.\n\t * @internal\n\t */\n\t@Method()\n\tpublic async invalidateOpenItemsCache(): Promise<void> {\n\t\tawait Promise.resolve((this.cacheValid = false));\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<nav class=\"kol-tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"kol-tree__treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === KolTreeItemTag.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t\tif (this.rafHandle !== undefined) {\n\t\t\tcancelAnimationFrame(this.rafHandle);\n\t\t\tthis.rafHandle = undefined;\n\t\t}\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(() => this.scheduleTreeChange());\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.scheduleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems()?.forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate scheduleTreeChange() {\n\t\tif (this.rafHandle) cancelAnimationFrame(this.rafHandle);\n\t\tthis.rafHandle = requestAnimationFrame(() => {\n\t\t\tthis.handleTreeChange();\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host?.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tthis.cacheValid = false;\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems()?.reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(KolTreeItemTag);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Cache-Hit: Return cached result\n\t\tif (this.cacheValid && this.cachedOpenItems) {\n\t\t\treturn this.cachedOpenItems;\n\t\t}\n\n\t\tconst areAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tlet parent = element.parentElement as HTMLKolTreeItemElement | null;\n\t\t\twhile (parent && KolTreeWc.isTreeItem(parent)) {\n\t\t\t\tif (!(await parent.isOpen())) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\tparent = parent.parentElement as HTMLKolTreeItemElement | null;\n\t\t\t}\n\t\t\treturn true;\n\t\t};\n\n\t\t// Cache the result\n\t\tthis.cachedOpenItems = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (item) => ({\n\t\t\t\titem,\n\t\t\t\tisOpen: await areAllParentsOpen(item),\n\t\t\t})),\n\t\t).then((results) => results.filter(({ isOpen }) => isOpen).map(({ item }) => item));\n\t\tthis.cacheValid = true;\n\n\t\treturn this.cachedOpenItems;\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(KolTreeItemTag);\n\t\tconst hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Right':\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait openItems[currentIndex + 1]?.focus();\n\t\t\t\t} else {\n\t\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Left':\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\tconst parentItem = currentTreeItem.parentElement as HTMLKolTreeItemElement | null;\n\t\t\t\t\tconst parentIndex = parentItem ? openItems.indexOf(parentItem) : -1;\n\t\t\t\t\tif (parentIndex !== -1) {\n\t\t\t\t\t\tawait openItems[parentIndex]?.focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tawait openItems[0]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tawait openItems[openItems.length - 1]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase event.key.match(/^[a-zA-Z0-9]$/)?.input: {\n\t\t\t\t/* Ignore events with any modifier key to avoid breaking native browser or OS shortcuts such as ⌘+L */\n\t\t\t\tif (!hasModifierKeyPressed) {\n\t\t\t\t\tconst char = event.key.toLowerCase();\n\t\t\t\t\tconst startIndex = openItems.indexOf(currentTreeItem) + 1;\n\n\t\t\t\t\t// Search from startIndex to end\n\t\t\t\t\tlet matchIndex = openItems.slice(startIndex).findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\n\t\t\t\t\t// If not found, wrap around to beginning\n\t\t\t\t\tif (matchIndex === -1) {\n\t\t\t\t\t\tmatchIndex = openItems.slice(0, startIndex).findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\t\t\t\t\t\t// Adjust matchIndex if found in wrap-around\n\t\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\t\t// matchIndex is already correct (0-based from slice(0, startIndex))\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// matchIndex is from slice(startIndex), so add startIndex to get actual index\n\t\t\t\t\t\tmatchIndex += startIndex;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\tawait openItems[matchIndex]?.focus();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(KolTreeItemTag);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusin')\n\tpublic handleFocusIn(event: FocusEvent) {\n\t\t// Only delegate if no tree item is already focused\n\t\tif (event.target === this.host && !document.activeElement?.closest(KolTreeItemTag)) {\n\t\t\t// Defer to next frame to ensure tree is fully ready\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tvoid this.focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest(KolTreeTag)) {\n\t\t\t/* Tree lost focus */\n\t\t\tthis.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\tprivate ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host?.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active=\"true\"]`);\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/tree/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { KolTreeItemTag, KolTreeTag } from '../../core/component-names';\nimport type { FocusableElement, KolFocusOptions, LabelPropType, TreeAPI, TreeStates } from '../../schema';\nimport { validateLabel } from '../../schema';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolTreeWcElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\n\tprivate cachedOpenItems?: HTMLKolTreeItemElement[] | undefined;\n\tprivate cacheValid = false;\n\tprivate rafHandle?: number;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t/**\n\t * Sets focus on the first focusable tree item.\n\t */\n\t@Method()\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tawait openItems?.[0]?.focus(options);\n\t}\n\n\t/**\n\t * Invalidates the cache for open tree items.\n\t * Called by tree-item when expand/collapse occurs.\n\t * @internal\n\t */\n\t@Method()\n\tpublic async invalidateOpenItemsCache(): Promise<void> {\n\t\tawait Promise.resolve((this.cacheValid = false));\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<nav class=\"kol-tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"kol-tree__treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === KolTreeItemTag.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t\tif (this.rafHandle !== undefined) {\n\t\t\tcancelAnimationFrame(this.rafHandle);\n\t\t\tthis.rafHandle = undefined;\n\t\t}\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(() => this.scheduleTreeChange());\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.scheduleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems()?.forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate scheduleTreeChange() {\n\t\tif (this.rafHandle) cancelAnimationFrame(this.rafHandle);\n\t\tthis.rafHandle = requestAnimationFrame(() => {\n\t\t\tthis.handleTreeChange();\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host?.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tthis.cacheValid = false;\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems()?.reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(KolTreeItemTag);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Cache-Hit: Return cached result\n\t\tif (this.cacheValid && this.cachedOpenItems) {\n\t\t\treturn this.cachedOpenItems;\n\t\t}\n\n\t\tconst areAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tlet parent = element.parentElement as HTMLKolTreeItemElement | null;\n\t\t\twhile (parent && KolTreeWc.isTreeItem(parent)) {\n\t\t\t\tif (!(await parent.isOpen())) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\tparent = parent.parentElement as HTMLKolTreeItemElement | null;\n\t\t\t}\n\t\t\treturn true;\n\t\t};\n\n\t\t// Cache the result\n\t\tthis.cachedOpenItems = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (item) => ({\n\t\t\t\titem,\n\t\t\t\tisOpen: await areAllParentsOpen(item),\n\t\t\t})),\n\t\t).then((results) => results.filter(({ isOpen }) => isOpen).map(({ item }) => item));\n\t\tthis.cacheValid = true;\n\n\t\treturn this.cachedOpenItems;\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(KolTreeItemTag);\n\t\tconst hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Right':\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait openItems[currentIndex + 1]?.focus();\n\t\t\t\t} else {\n\t\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Left':\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\tconst parentItem = currentTreeItem.parentElement as HTMLKolTreeItemElement | null;\n\t\t\t\t\tconst parentIndex = parentItem ? openItems.indexOf(parentItem) : -1;\n\t\t\t\t\tif (parentIndex !== -1) {\n\t\t\t\t\t\tawait openItems[parentIndex]?.focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tawait openItems[0]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tawait openItems[openItems.length - 1]?.focus();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase event.key.match(/^[a-zA-Z0-9]$/)?.input: {\n\t\t\t\t/* Ignore events with any modifier key to avoid breaking native browser or OS shortcuts such as ⌘+L */\n\t\t\t\tif (!hasModifierKeyPressed) {\n\t\t\t\t\tconst char = event.key.toLowerCase();\n\t\t\t\t\tconst startIndex = openItems.indexOf(currentTreeItem) + 1;\n\n\t\t\t\t\t// Search from startIndex to end\n\t\t\t\t\tlet matchIndex = openItems.slice(startIndex).findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\n\t\t\t\t\t// If not found, wrap around to beginning\n\t\t\t\t\tif (matchIndex === -1) {\n\t\t\t\t\t\tmatchIndex = openItems.slice(0, startIndex).findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\t\t\t\t\t\t// Adjust matchIndex if found in wrap-around\n\t\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\t\t// matchIndex is already correct (0-based from slice(0, startIndex))\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// matchIndex is from slice(startIndex), so add startIndex to get actual index\n\t\t\t\t\t\tmatchIndex += startIndex;\n\t\t\t\t\t}\n\n\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\tawait openItems[matchIndex]?.focus();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(KolTreeItemTag);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusin')\n\tpublic handleFocusIn(event: FocusEvent) {\n\t\t// Only delegate if no tree item is already focused\n\t\tif (event.target === this.host && !document.activeElement?.closest(KolTreeItemTag)) {\n\t\t\t// Defer to next frame to ensure tree is fully ready\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tvoid this.focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest(KolTreeTag)) {\n\t\t\t/* Tree lost focus */\n\t\t\tthis.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\tprivate ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host?.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active=\"true\"]`);\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"]}

package/dist/collection/components/tree/shadow.js

@@ -9,9 +9,9 @@ export class KolTree {
     constructor() {
         this.ctaRef = createCtaRef();
     }
-    async focus() { }
+    async focus(options) { }
     render() {
-        return (h(KolTreeWcTag, { key: '9a4684dd43d2276042dd7506c7a39ad7d5c70890', _label: this._label, ref: this.ctaRef }, h("slot", { key: '84571550e5f8250bc7b1e75bd4122409e583c14a' })));
+        return (h(KolTreeWcTag, { key: 'e040898cbd1832f69a365dbcbc59b269e1ac55f7', _label: this._label, ref: this.ctaRef }, h("slot", { key: '3d3213f69ce43f884b3ef31677d69473be02bed7' })));
     }
     static get is() { return "kol-tree"; }
     static get encapsulation() { return "shadow"; }
@@ -58,12 +58,21 @@ export class KolTree {
         return {
             "focus": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: KolFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "KolFocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::KolFocusOptions"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/components/tree/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/tree/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAS9E,MAAM,OAAO,OAAO;IAPpB;QASoB,WAAM,GAAG,YAAY,EAAwB,CAAC;KAqBjE;IATa,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAE/B,MAAM;QACZ,OAAO,CACN,EAAC,YAAY,qDAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM;YAClD,8DAAQ,CACM,CACf,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD;AATa;IADZ,aAAa,CAAC,QAAQ,CAAC;oCACc","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\n\nimport { KolTreeWcTag } from '../../core/component-names';\nimport type { FocusableElement, LabelPropType, TreeProps } from '../../schema';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\n\n@Component({\n\ttag: 'kol-tree',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTree implements TreeProps, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolTreeElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolTreeWcElement>();\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Sets focus on the first focusable tree item.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\tpublic async focus(): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeWcTag _label={this._label} ref={this.ctaRef}>\n\t\t\t\t<slot />\n\t\t\t</KolTreeWcTag>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/tree/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAS9E,MAAM,OAAO,OAAO;IAPpB;QASoB,WAAM,GAAG,YAAY,EAAwB,CAAC;KAuBjE;IATa,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAExD,MAAM;QACZ,OAAO,CACN,EAAC,YAAY,qDAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM;YAClD,8DAAQ,CACM,CACf,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD;AATa;IAHZ,aAAa,CAAC,QAAQ,CAAC;oCAGuC","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\n\nimport { KolTreeWcTag } from '../../core/component-names';\nimport type { FocusableElement, KolFocusOptions, LabelPropType, TreeProps } from '../../schema';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\n\n@Component({\n\ttag: 'kol-tree',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTree implements TreeProps, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolTreeElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolTreeWcElement>();\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Sets focus on the first focusable tree item.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeWcTag _label={this._label} ref={this.ctaRef}>\n\t\t\t\t<slot />\n\t\t\t</KolTreeWcTag>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/tree-item/component.js

@@ -20,12 +20,12 @@ export class KolTreeItemWc {
     }
     render() {
         const { _href, _active, _hasChildren, _open, _label } = this.state;
-        return (h(Host, { key: '0e8dace9d24995b94398cda4155f9cc026704b1f', onSlotchange: this.handleSlotchange.bind(this) }, h("li", { key: '5e7cad99348e4230718731a8ccd42edc7cde0e5c', class: "kol-tree-item", style: {
+        return (h(Host, { key: '5dafc8516e71c4908d468b8844b0e765d1cba71a', onSlotchange: this.handleSlotchange.bind(this) }, h("li", { key: 'b050361b08edf953c60cda62bce3c716528d19ca', class: "kol-tree-item", style: {
                 '--level': `${this.level}`,
-            } }, h(KolLinkWcTag, { key: 'c36dd466d9c4a46528628459fbfedf88cd100c60', class: clsx('kol-tree-item__link', {
+            } }, h(KolLinkWcTag, { key: '5575f3158d9adbb566f75ec7687d83f1b84a8935', class: clsx('kol-tree-item__link', {
                 'kol-tree-item__link--first-level': this.level === 0,
                 'kol-tree-item__link--active': _active,
-            }), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, h("span", { key: 'd1119a0de39c5c6ccb63c3c767d947a9babd5f9c', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (h("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, h(IconFC, { class: "kol-tree-item__toggle-button-icon", icons: `kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`, label: '' }))) : (h("span", { class: "kol-tree-item__toggle-button-placeholder" })), h("span", { key: '4ec3c0df36f1d428b2ebcd472aa5e2c54598dd0b', class: "kol-tree-item__text" }, _label))), h("ul", { key: '0dae6860fca3e03e5363bef3ee080542c5152f0d', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, h("slot", { key: '0a7af9ff0c81e4555d3e28fd4fd95b6c219b527a' })))));
+            }), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, h("span", { key: 'f64170d2888e773e1649252efac509108c92ebe6', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (h("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, h(IconFC, { class: "kol-tree-item__toggle-button-icon", icons: `kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`, label: '' }))) : (h("span", { class: "kol-tree-item__toggle-button-placeholder" })), h("span", { key: '02eeae533f9c27fb1d34856ef83dc54b0472abb4', class: "kol-tree-item__text" }, _label))), h("ul", { key: 'fdfad19b37792ed8efed76b6e9b7bf977ee7d6cb', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, h("slot", { key: 'eba7b5f9a6ee173a12d67238195d5c5fd34f38b4' })))));
     }
     validateActive(value) {
         validateActive(this, value || false);
@@ -84,9 +84,9 @@ export class KolTreeItemWc {
         }
         return undefined;
     }
-    async focus() {
+    async focus(options) {
         if (this.host && this.linkElement) {
-            return Promise.resolve(this.linkElement.focus());
+            return this.linkElement.focus(options);
         }
     }
     async handleExpandClick(event) {
@@ -236,12 +236,21 @@ export class KolTreeItemWc {
         return {
             "focus": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: KolFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "KolFocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::KolFocusOptions"
                         }
                     },
                     "return": "Promise<void>"

package/dist/collection/components/tree-item/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/tree-item/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { KolLinkWcTag, KolTreeTag } from '../../core/component-names';\nimport { IconFC } from '../../internal/functional-components/icon/component';\nimport type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '../../schema';\nimport { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { createUniqueId } from '../../utils/dev.utils';\n\n/**\n * @internal\n */\n@Component({\n\ttag: `kol-tree-item-wc`,\n\tshadow: false,\n})\nexport class KolTreeItemWc implements TreeItemAPI {\n\t@Element() private readonly host?: HTMLKolTreeItemWcElement;\n\n\tprivate linkElement?: HTMLKolLinkWcElement;\n\tprivate groupId = createUniqueId('tree-group');\n\n\t@State() private level?: number;\n\n\tpublic render(): JSX.Element {\n\t\tconst { _href, _active, _hasChildren, _open, _label } = this.state;\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<li\n\t\t\t\t\tclass=\"kol-tree-item\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t'--level': `${this.level}`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-tree-item__link', {\n\t\t\t\t\t\t\t'kol-tree-item__link--first-level': this.level === 0,\n\t\t\t\t\t\t\t'kol-tree-item__link--active': _active,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_href={_href}\n\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t_role=\"treeitem\"\n\t\t\t\t\t\t_tabIndex={_active ? 0 : -1}\n\t\t\t\t\t\t_ariaExpanded={_hasChildren ? _open : undefined}\n\t\t\t\t\t\t_ariaOwns={_hasChildren ? this.groupId : undefined}\n\t\t\t\t\t\tref={(element?: HTMLKolLinkWcElement) => (this.linkElement = element!)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"kol-tree-item__link-inner\" slot=\"expert\">\n\t\t\t\t\t\t\t{_hasChildren ? (\n\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button\"\n\t\t\t\t\t\t\t\t\tonClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<IconFC\n\t\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button-icon\"\n\t\t\t\t\t\t\t\t\t\ticons={`kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`}\n\t\t\t\t\t\t\t\t\t\tlabel={'' /* Label deliberately left empty */}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"kol-tree-item__toggle-button-placeholder\"></span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class=\"kol-tree-item__text\">{_label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</KolLinkWcTag>\n\t\t\t\t\t<ul class=\"kol-tree-item__children\" hidden={!_hasChildren || !_open} role=\"group\" id={this.groupId}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: TreeItemStates = {\n\t\t_active: false,\n\t\t_hasChildren: false,\n\t\t_href: '',\n\t\t_label: '',\n\t\t_open: false,\n\t};\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Watch('_active') validateActive(value?: ActivePropType): void {\n\t\tvalidateActive(this, value || false);\n\t}\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open') validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_href') validateHref(value?: HrefPropType): void {\n\t\tvalidateHref(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActive(this._active);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateHref(this._href);\n\n\t\tthis.checkForChildren();\n\t\tthis.determineTreeItemDepth();\n\t}\n\n\tprivate determineTreeItemDepth() {\n\t\tlet level = 0;\n\t\tlet traverseItem: HTMLElement | null = (this.host?.parentNode as unknown as ShadowRoot)?.host.parentNode as HTMLElement;\n\t\twhile (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {\n\t\t\ttraverseItem = traverseItem.parentElement;\n\t\t\tlevel += 1;\n\t\t}\n\t\tthis.level = level;\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate checkForChildren() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_hasChildren: Boolean(this.host?.querySelector('slot')?.assignedElements?.().length),\n\t\t};\n\t}\n\n\tprivate getTreeParent(): (HTMLKolTreeWcElement & { invalidateOpenItemsCache(): void }) | undefined {\n\t\t// Traverse up through shadow boundaries manually\n\t\tlet element: Element | null | undefined = this.host;\n\t\twhile (element) {\n\t\t\t// Try closest in current DOM tree\n\t\t\tconst parent = element.closest(KolTreeTag);\n\t\t\tif (parent) {\n\t\t\t\t// Found kol-tree (shadow wrapper), now find kol-tree-wc in its shadow DOM\n\t\t\t\tconst treeWc = parent.shadowRoot?.querySelector('kol-tree-wc');\n\t\t\t\tif (treeWc) {\n\t\t\t\t\treturn treeWc as HTMLKolTreeWcElement & { invalidateOpenItemsCache(): void };\n\t\t\t\t}\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\t// Cross shadow boundary: go to shadow host, then to its parent\n\t\t\tconst shadowHost: Element | undefined = (element.getRootNode() as ShadowRoot)?.host;\n\t\t\tif (!shadowHost || shadowHost === document.body) {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\telement = shadowHost.parentElement;\n\t\t}\n\t\treturn undefined;\n\t}\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focus() {\n\t\tif (this.host && this.linkElement) {\n\t\t\treturn Promise.resolve(this.linkElement.focus());\n\t\t}\n\t}\n\n\tprivate async handleExpandClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tif (this.host && this.linkElement) {\n\t\t\tawait this.linkElement.focus();\n\t\t}\n\t\tawait this.expand();\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async expand() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: true,\n\t\t\t};\n\t\t\t// Invalidate the tree's cache of open items\n\t\t\tvoid this.getTreeParent()?.invalidateOpenItemsCache?.();\n\t\t}\n\t}\n\n\tprivate async handleCollapseClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tif (this.host && this.linkElement) {\n\t\t\tawait this.linkElement.focus();\n\t\t}\n\t\tawait this.collapse();\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async collapse() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: false,\n\t\t\t};\n\t\t\t// Invalidate the tree's cache of open items\n\t\t\tvoid this.getTreeParent()?.invalidateOpenItemsCache?.();\n\t\t}\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async isOpen() {\n\t\treturn this.state._open ?? false;\n\t}\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/tree-item/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { KolLinkWcTag, KolTreeTag } from '../../core/component-names';\nimport { IconFC } from '../../internal/functional-components/icon/component';\nimport type { ActivePropType, HrefPropType, KolFocusOptions, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '../../schema';\nimport { validateActive, validateHref, validateLabel, validateOpen } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { createUniqueId } from '../../utils/dev.utils';\n\n/**\n * @internal\n */\n@Component({\n\ttag: `kol-tree-item-wc`,\n\tshadow: false,\n})\nexport class KolTreeItemWc implements TreeItemAPI {\n\t@Element() private readonly host?: HTMLKolTreeItemWcElement;\n\n\tprivate linkElement?: HTMLKolLinkWcElement;\n\tprivate groupId = createUniqueId('tree-group');\n\n\t@State() private level?: number;\n\n\tpublic render(): JSX.Element {\n\t\tconst { _href, _active, _hasChildren, _open, _label } = this.state;\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<li\n\t\t\t\t\tclass=\"kol-tree-item\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t'--level': `${this.level}`,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\tclass={clsx('kol-tree-item__link', {\n\t\t\t\t\t\t\t'kol-tree-item__link--first-level': this.level === 0,\n\t\t\t\t\t\t\t'kol-tree-item__link--active': _active,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t_href={_href}\n\t\t\t\t\t\t_label=\"\"\n\t\t\t\t\t\t_role=\"treeitem\"\n\t\t\t\t\t\t_tabIndex={_active ? 0 : -1}\n\t\t\t\t\t\t_ariaExpanded={_hasChildren ? _open : undefined}\n\t\t\t\t\t\t_ariaOwns={_hasChildren ? this.groupId : undefined}\n\t\t\t\t\t\tref={(element?: HTMLKolLinkWcElement) => (this.linkElement = element!)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span class=\"kol-tree-item__link-inner\" slot=\"expert\">\n\t\t\t\t\t\t\t{_hasChildren ? (\n\t\t\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button\"\n\t\t\t\t\t\t\t\t\tonClick={(event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event))}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<IconFC\n\t\t\t\t\t\t\t\t\t\tclass=\"kol-tree-item__toggle-button-icon\"\n\t\t\t\t\t\t\t\t\t\ticons={`kolicon kolicon-${_open ? 'chevron-down' : 'chevron-right'}`}\n\t\t\t\t\t\t\t\t\t\tlabel={'' /* Label deliberately left empty */}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"kol-tree-item__toggle-button-placeholder\"></span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<span class=\"kol-tree-item__text\">{_label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</KolLinkWcTag>\n\t\t\t\t\t<ul class=\"kol-tree-item__children\" hidden={!_hasChildren || !_open} role=\"group\" id={this.groupId}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</li>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: TreeItemStates = {\n\t\t_active: false,\n\t\t_hasChildren: false,\n\t\t_href: '',\n\t\t_label: '',\n\t\t_open: false,\n\t};\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Watch('_active') validateActive(value?: ActivePropType): void {\n\t\tvalidateActive(this, value || false);\n\t}\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_open') validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\t@Watch('_href') validateHref(value?: HrefPropType): void {\n\t\tvalidateHref(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActive(this._active);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateHref(this._href);\n\n\t\tthis.checkForChildren();\n\t\tthis.determineTreeItemDepth();\n\t}\n\n\tprivate determineTreeItemDepth() {\n\t\tlet level = 0;\n\t\tlet traverseItem: HTMLElement | null = (this.host?.parentNode as unknown as ShadowRoot)?.host.parentNode as HTMLElement;\n\t\twhile (traverseItem !== null && traverseItem.tagName.toLowerCase() !== KolTreeTag && traverseItem !== document.body) {\n\t\t\ttraverseItem = traverseItem.parentElement;\n\t\t\tlevel += 1;\n\t\t}\n\t\tthis.level = level;\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.checkForChildren();\n\t}\n\n\tprivate checkForChildren() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_hasChildren: Boolean(this.host?.querySelector('slot')?.assignedElements?.().length),\n\t\t};\n\t}\n\n\tprivate getTreeParent(): (HTMLKolTreeWcElement & { invalidateOpenItemsCache(): void }) | undefined {\n\t\t// Traverse up through shadow boundaries manually\n\t\tlet element: Element | null | undefined = this.host;\n\t\twhile (element) {\n\t\t\t// Try closest in current DOM tree\n\t\t\tconst parent = element.closest(KolTreeTag);\n\t\t\tif (parent) {\n\t\t\t\t// Found kol-tree (shadow wrapper), now find kol-tree-wc in its shadow DOM\n\t\t\t\tconst treeWc = parent.shadowRoot?.querySelector('kol-tree-wc');\n\t\t\t\tif (treeWc) {\n\t\t\t\t\treturn treeWc as HTMLKolTreeWcElement & { invalidateOpenItemsCache(): void };\n\t\t\t\t}\n\t\t\t\treturn undefined;\n\t\t\t}\n\t\t\t// Cross shadow boundary: go to shadow host, then to its parent\n\t\t\tconst shadowHost: Element | undefined = (element.getRootNode() as ShadowRoot)?.host;\n\t\t\tif (!shadowHost || shadowHost === document.body) {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\telement = shadowHost.parentElement;\n\t\t}\n\t\treturn undefined;\n\t}\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focus(options?: KolFocusOptions) {\n\t\tif (this.host && this.linkElement) {\n\t\t\treturn this.linkElement.focus(options);\n\t\t}\n\t}\n\n\tprivate async handleExpandClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tif (this.host && this.linkElement) {\n\t\t\tawait this.linkElement.focus();\n\t\t}\n\t\tawait this.expand();\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async expand() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: true,\n\t\t\t};\n\t\t\t// Invalidate the tree's cache of open items\n\t\t\tvoid this.getTreeParent()?.invalidateOpenItemsCache?.();\n\t\t}\n\t}\n\n\tprivate async handleCollapseClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tif (this.host && this.linkElement) {\n\t\t\tawait this.linkElement.focus();\n\t\t}\n\t\tawait this.collapse();\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async collapse() {\n\t\tif (this.state._hasChildren) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_open: false,\n\t\t\t};\n\t\t\t// Invalidate the tree's cache of open items\n\t\t\tvoid this.getTreeParent()?.invalidateOpenItemsCache?.();\n\t\t}\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async isOpen() {\n\t\treturn this.state._open ?? false;\n\t}\n}\n"]}

package/dist/collection/components/tree-item/shadow.js

@@ -4,9 +4,9 @@
 import { h } from "@stencil/core";
 import { KolTreeItemWcTag } from "../../core/component-names";
 export class KolTreeItem {
-    async focus() {
+    async focus(options) {
         var _a;
-        return Promise.resolve((_a = this.element) === null || _a === void 0 ? void 0 : _a.focus());
+        return (_a = this.element) === null || _a === void 0 ? void 0 : _a.focus(options);
     }
     async expand() {
         var _a;
@@ -21,7 +21,7 @@ export class KolTreeItem {
         return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
     }
     render() {
-        return (h(KolTreeItemWcTag, { key: '6b16bce6aa837018f8b321f84134e7f7c9e8262b', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, h("slot", { key: '93f4a2498abbbb3c2ab1494314de3200cea827d4' })));
+        return (h(KolTreeItemWcTag, { key: '25b3875f49f3f7356796ff41376b5fffda1a0231', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, h("slot", { key: '00007ca55b586bdfa89bc54585c20f2c4d89ecec' })));
     }
     static get is() { return "kol-tree-item"; }
     static get encapsulation() { return "shadow"; }
@@ -143,12 +143,21 @@ export class KolTreeItem {
         return {
             "focus": {
                 "complexType": {
-                    "signature": "() => Promise<any>",
-                    "parameters": [],
+                    "signature": "(options?: KolFocusOptions) => Promise<any>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "KolFocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::KolFocusOptions"
                         }
                     },
                     "return": "Promise<any>"

package/dist/collection/components/tree-item/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/tree-item/shadow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAU9D,MAAM,OAAO,WAAW;IA0Bb,KAAK,CAAC,KAAK;;QACpB,OAAO,OAAO,CAAC,OAAO,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC,CAAC;IAC/C,CAAC;IAKS,KAAK,CAAC,MAAM;;QACrB,OAAO,OAAO,CAAC,OAAO,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC,CAAC;IAChD,CAAC;IAKS,KAAK,CAAC,QAAQ;;QACvB,OAAO,OAAO,CAAC,OAAO,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,EAAE,CAAC,CAAC;IAClD,CAAC;IAKS,KAAK,CAAC,MAAM;;QACrB,OAAO,MAAA,CAAC,MAAM,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAA,CAAC,mCAAI,KAAK,CAAC;IAChD,CAAC;IAEM,MAAM;QACZ,OAAO,CACN,EAAC,gBAAgB,qDAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,OAAkC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;YAErE,8DAAQ,CACU,CACnB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport { KolTreeItemWcTag } from '../../core/component-names';\nimport type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focus() {\n\t\treturn Promise.resolve(this.element?.focus());\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method() async expand() {\n\t\treturn Promise.resolve(this.element?.expand());\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method() async collapse() {\n\t\treturn Promise.resolve(this.element?.collapse());\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/tree-item/shadow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAY,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAU9D,MAAM,OAAO,WAAW;IA0Bb,KAAK,CAAC,KAAK,CAAC,OAAyB;;QAC9C,OAAO,MAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAKS,KAAK,CAAC,MAAM;;QACrB,OAAO,OAAO,CAAC,OAAO,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC,CAAC;IAChD,CAAC;IAKS,KAAK,CAAC,QAAQ;;QACvB,OAAO,OAAO,CAAC,OAAO,CAAC,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,EAAE,CAAC,CAAC;IAClD,CAAC;IAKS,KAAK,CAAC,MAAM;;QACrB,OAAO,MAAA,CAAC,MAAM,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAA,CAAC,mCAAI,KAAK,CAAC;IAChD,CAAC;IAEM,MAAM;QACZ,OAAO,CACN,EAAC,gBAAgB,qDAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,OAAkC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;YAErE,8DAAQ,CACU,CACnB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport { KolTreeItemWcTag } from '../../core/component-names';\nimport type { HrefPropType, KolFocusOptions, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focus(options?: KolFocusOptions) {\n\t\treturn this.element?.focus(options);\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method() async expand() {\n\t\treturn Promise.resolve(this.element?.expand());\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method() async collapse() {\n\t\treturn Promise.resolve(this.element?.collapse());\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/tree-item/style.css

@@ -201,8 +201,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1780571516250"); /* IE9*/
-  src: url("kolicons.eot?t=1780571516250#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780571516250") format("woff2"), url("kolicons.woff?t=1780571516250") format("woff"), url("kolicons.ttf?t=1780571516250") format("truetype"), url("kolicons.svg?t=1780571516250#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1780919027063"); /* IE9*/
+  src: url("kolicons.eot?t=1780919027063#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780919027063") format("woff2"), url("kolicons.woff?t=1780919027063") format("woff"), url("kolicons.ttf?t=1780919027063") format("truetype"), url("kolicons.svg?t=1780919027063#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/internal/functional-components/click-button/controller.js

@@ -8,10 +8,7 @@ export class ClickButtonController extends BaseController {
     constructor(stateAccess) {
         super(stateAccess, clickButtonPropsConfig);
         this.handleClick = () => {
-            console.log(this, this.buttonRef, 'button clicked');
-        };
-        this.setButtonRef = (element) => {
-            this.buttonRef = element;
+            console.log(this, 'button clicked');
         };
     }
     componentWillLoad(props) {
@@ -23,9 +20,5 @@ export class ClickButtonController extends BaseController {
             this.setRenderProp('label', v);
         });
     }
-    focus() {
-        var _a;
-        (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
-    }
 }
 //# sourceMappingURL=controller.js.map

package/dist/collection/internal/functional-components/click-button/controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"controller.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/click-button/controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,OAAO,qBAAsB,SAAQ,cAA8B;IAGxE,YAAmB,WAAwC;QAC1D,KAAK,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAC;QAcrC,gBAAW,GAAG,GAAS,EAAE;YAE/B,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;QACrD,CAAC,CAAC;QAMK,iBAAY,GAAG,CAAC,OAA2B,EAAQ,EAAE;YAC3D,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;QAC1B,CAAC,CAAC;IAxBF,CAAC;IAEM,iBAAiB,CAAC,KAAyC;QACjE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAEM,UAAU,CAAC,KAAc;QAC/B,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE;YAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;IACJ,CAAC;IAOM,KAAK;;QACX,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;IACzB,CAAC;CAKD","sourcesContent":["import { labelProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { ClickButtonApi } from './api';\nimport { clickButtonPropsConfig } from './api';\n\nexport class ClickButtonController extends BaseController<ClickButtonApi> implements ControllerInterface<ClickButtonApi> {\n\tprivate buttonRef?: HTMLButtonElement;\n\n\tpublic constructor(stateAccess: StateAccess<ClickButtonApi>) {\n\t\tsuper(stateAccess, clickButtonPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<ClickButtonApi>): void {\n\t\tconst { label } = props;\n\t\tthis.watchLabel(label);\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic handleClick = (): void => {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.log(this, this.buttonRef, 'button clicked');\n\t};\n\n\tpublic focus(): void {\n\t\tthis.buttonRef?.focus();\n\t}\n\n\tpublic setButtonRef = (element?: HTMLButtonElement): void => {\n\t\tthis.buttonRef = element;\n\t};\n}\n"]}
+{"version":3,"file":"controller.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/click-button/controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,OAAO,qBAAsB,SAAQ,cAA8B;IACxE,YAAmB,WAAwC;QAC1D,KAAK,CAAC,WAAW,EAAE,sBAAsB,CAAC,CAAC;QAcrC,gBAAW,GAAG,GAAS,EAAE;YAE/B,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;QACrC,CAAC,CAAC;IAhBF,CAAC;IAEM,iBAAiB,CAAC,KAAyC;QACjE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAEM,UAAU,CAAC,KAAc;QAC/B,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE;YAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;IACJ,CAAC;CAMD","sourcesContent":["import { labelProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { ClickButtonApi } from './api';\nimport { clickButtonPropsConfig } from './api';\n\nexport class ClickButtonController extends BaseController<ClickButtonApi> implements ControllerInterface<ClickButtonApi> {\n\tpublic constructor(stateAccess: StateAccess<ClickButtonApi>) {\n\t\tsuper(stateAccess, clickButtonPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<ClickButtonApi>): void {\n\t\tconst { label } = props;\n\t\tthis.watchLabel(label);\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic handleClick = (): void => {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.log(this, 'button clicked');\n\t};\n}\n"]}

package/dist/collection/internal/functional-components/generic-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"generic-types.js","sourceRoot":"","sources":["../../../src/internal/functional-components/generic-types.ts"],"names":[],"mappings":"","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\n\nimport type { Prop } from '../props';\n\n// ============================================================================\n// Utility Types\n// ============================================================================\n\ntype Callback<T> = (value?: T) => void;\n\n/** Makes all fields required and non-nullable. */\nexport type StrictFields<T> = {\n\t[K in keyof T]-?: NonNullable<T[K]>;\n};\n\ntype UnionToIntersection<U> = (U extends unknown ? (arg: U) => void : never) extends (arg: infer I) => void ? I : never;\n\n// ============================================================================\n// Phantom Key Mapping (__input_* convention)\n// ============================================================================\n\n/**\n * Extracts the internal (normalized) property types by filtering out __input_* and __propInternal__ phantom keys.\n */\nexport type InternalOf<P> = {\n\t[K in keyof P as K extends `__input_${string}` | '__propInternal__' ? never : K]: P[K];\n};\n\n/**\n * Extracts the external (input) property types.\n * For each real key K, uses the __input_K type if present, otherwise falls back to the internal type.\n */\ntype ExternalOf<P> = {\n\t[K in keyof P as K extends `__input_${string}` | '__propInternal__' ? never : K]: `__input_${K & string}` extends keyof P\n\t\t? NonNullable<P[`__input_${K & string}`]>\n\t\t: P[K];\n};\n\n// ============================================================================\n// Component API Definition\n// ============================================================================\n\ntype PropsDefinition = {\n\tOptional?: Record<string, unknown>;\n\tRequired?: Record<string, unknown>;\n};\n\nexport interface ComponentApi {\n\tCallbacks?: Record<string, () => unknown>;\n\tEmitters?: Record<string, unknown>;\n\tListeners?: Record<string, unknown>;\n\tMethods?: Record<string, (...args: never[]) => unknown>;\n\tProps?: PropsDefinition;\n\tRefs?: Record<string, HTMLElement>;\n\tStates: Record<never, never>;\n}\n\n// ============================================================================\n// Props Config (Single Source of Truth)\n// ============================================================================\n\n/** Any prop definition that carries a phantom Prop type, a propName and a getDefaultValue method. */\ntype AnyPropDef = {\n\treadonly __phantomProp__?: Prop<string, unknown, unknown>;\n\treadonly propName: string;\n\tgetDefaultValue(): unknown;\n};\n\n/** Extracts the phantom Prop type from a PropDefinition or DependentPropDefinition. */\ntype ExtractPhantomProp<D> = D extends { readonly __phantomProp__?: infer P extends Prop<string, unknown, unknown> } ? P : never;\n\n/** Merges an array of prop definitions into a single intersection of their phantom Prop types. */\ntype MergePropsFromArray<A extends readonly AnyPropDef[]> = UnionToIntersection<ExtractPhantomProp<A[number]>>;\n\n/** Shape for a props config object with arrays of runtime prop definitions. */\nexport type PropsConfigShape = {\n\toptional?: readonly AnyPropDef[];\n\trequired?: readonly AnyPropDef[];\n};\n\n/**\n * Derives a full ComponentApi type from a runtime props config and optional extra fields.\n *\n * Usage:\n * ```ts\n * const config = {\n *   required: [maxProp, clampedNumberValueProp],\n *   optional: [labelProp],\n * } as const satisfies PropsConfigShape;\n *\n * type MyApi = ApiFromConfig<typeof config, { States: { liveValue: number } }>;\n * ```\n */\nexport type ApiFromConfig<Config extends PropsConfigShape, Extra extends Partial<Omit<ComponentApi, 'Props'>> = Record<never, never>> = {\n\tProps: {\n\t\tOptional: Config['optional'] extends readonly AnyPropDef[] ? MergePropsFromArray<Config['optional']> : Record<never, never>;\n\t\tRequired: Config['required'] extends readonly AnyPropDef[] ? MergePropsFromArray<Config['required']> : Record<never, never>;\n\t};\n\tStates: Extra extends { States: infer S extends Record<string, unknown> } ? S : Record<never, never>;\n} & Omit<Extra, 'Props' | 'States'>;\n\n// ============================================================================\n// Props Extraction\n// ============================================================================\n\n/** Safely extracts a sub-record from a ComponentApi's Props definition, defaulting to an empty record. */\ntype PropsEntry<T extends ComponentApi, K extends keyof PropsDefinition> = T['Props'] extends PropsDefinition\n\t? T['Props'][K] extends Record<string, unknown>\n\t\t? T['Props'][K]\n\t\t: Record<never, never>\n\t: Record<never, never>;\n\ntype RequiredProps<T extends ComponentApi> = PropsEntry<T, 'Required'>;\ntype OptionalProps<T extends ComponentApi> = PropsEntry<T, 'Optional'>;\ntype AllProps<T extends ComponentApi> = RequiredProps<T> & OptionalProps<T>;\n\n/**\n * Resolved internal prop types (normalized).\n * Required props are mandatory, optional props are Partial.\n */\nexport type ResolvedProps<T extends ComponentApi> = InternalOf<RequiredProps<T>> & Partial<InternalOf<OptionalProps<T>>>;\n\n/**\n * Resolved external/input prop types (before normalization).\n * Used for componentWillLoad and watchers.\n */\nexport type ResolvedInputProps<T extends ComponentApi> = ExternalOf<RequiredProps<T>> & Partial<ExternalOf<OptionalProps<T>>>;\n\n// ============================================================================\n// API Field Extraction\n// ============================================================================\n\n/** Safely extracts a top-level field from a ComponentApi, defaulting to an empty record. */\ntype ApiField<T extends ComponentApi, K extends keyof ComponentApi> = T[K] extends Record<string, unknown> ? T[K] : Record<never, never>;\n\ntype ExtractCallbacks<T extends ComponentApi> = ApiField<T, 'Callbacks'>;\ntype ExtractEmitters<T extends ComponentApi> = ApiField<T, 'Emitters'>;\ntype ExtractListeners<T extends ComponentApi> = ApiField<T, 'Listeners'>;\ntype ExtractMethods<T extends ComponentApi> = ApiField<T, 'Methods'>;\ntype ExtractRefs<T extends ComponentApi> = ApiField<T, 'Refs'>;\ntype ExtractStates<T extends ComponentApi> = InternalOf<ApiField<T, 'States'>>;\n\ntype InternalProps<T extends ComponentApi> = InternalOf<AllProps<T>>;\ntype ExternalProps<T extends ComponentApi> = ExternalOf<AllProps<T>>;\n\n// ============================================================================\n// State Access Functions\n// ============================================================================\n\n/**\n * Function signature for setting component state in a type-safe manner.\n * Used by controllers to update reactive @State fields with generic type safety.\n */\nexport type SetStateFn<Api extends ComponentApi> = <K extends keyof InternalOf<NonNullable<Api['States']>>>(\n\tkey: K,\n\tvalue: InternalOf<NonNullable<Api['States']>>[K],\n) => void;\n\n/**\n * Function signature for reading component state in a type-safe manner.\n * Used by controllers to access reactive @State fields with generic type safety.\n */\nexport type GetStateFn<Api extends ComponentApi> = <K extends keyof InternalOf<NonNullable<Api['States']>>>(\n\tkey: K,\n) => InternalOf<NonNullable<Api['States']>>[K];\n\n/**\n * Bundles setState and getState as a single unit.\n * Controllers receive this as their state access mechanism — either a real\n * implementation from a web component or `BaseController.stateLess` for\n * controllers that manage state purely via render props.\n */\nexport type StateAccess<Api extends ComponentApi> = {\n\tsetState: SetStateFn<Api>;\n\tgetState: GetStateFn<Api>;\n};\n\n// ============================================================================\n// Method Promise Wrapping\n// ============================================================================\n\n/**\n * Wraps the return type of each method in a Promise.\n * API definitions use simple return types (e.g., `() => void`)\n * and the resolved type becomes `() => Promise<void>`.\n * Uses `Awaited<R>` for idempotency — `() => Promise<void>` stays `Promise<void>`, not `Promise<Promise<void>>`.\n */\ntype PromiseMethod<Methods> = {\n\t[K in keyof Methods]: Methods[K] extends (...args: infer A) => infer R ? (...args: A) => Promise<Awaited<R>> : Methods[K];\n};\n\n// ============================================================================\n// Web Component Types\n// ============================================================================\n\ntype ComponentPropsRequired<Props> = {\n\t[K in keyof Props as `_${Lowercase<string & K>}`]: Props[K];\n};\n\ntype ComponentPropsOptional<Props> = {\n\t[K in keyof Props as `_${Lowercase<string & K>}`]?: Props[K];\n};\n\ntype ComponentProps<T extends ComponentApi> = ComponentPropsRequired<ExternalOf<RequiredProps<T>>> & ComponentPropsOptional<ExternalOf<OptionalProps<T>>>;\n\ntype ComponentWatchers<Props> = {\n\t[K in keyof Props as `watch${Capitalize<string & K>}`]: Callback<Props[K]>;\n};\n\ntype ComponentEmitters<Emitters> = {\n\t[K in keyof Emitters as `${Lowercase<string & K>}`]: EventEmitter<Emitters[K]>;\n};\n\ntype ComponentListeners<Listeners> = {\n\t[K in keyof Listeners as `on${Capitalize<string & K>}`]: (event: Listeners[K]) => void;\n};\n\nexport type WebComponentInterface<T extends ComponentApi> = {\n\tcomponentWillLoad(): void;\n} & ComponentProps<T> &\n\tStrictFields<ExtractStates<T>> &\n\tComponentWatchers<ExternalProps<T>> &\n\tComponentEmitters<ExtractEmitters<T>> &\n\tPromiseMethod<ExtractMethods<T>> &\n\tComponentListeners<ExtractListeners<T>>;\n\n// ============================================================================\n// Functional Component Types\n// ============================================================================\n\ntype ComponentCallbacks<Callbacks> = {\n\t[K in keyof Callbacks as `handle${Capitalize<string & K>}`]: Callbacks[K];\n};\n\ntype ComponentRefs<Refs> = {\n\t[K in keyof Refs as `ref${Capitalize<string & K>}`]: (element?: Refs[K]) => void;\n};\n\ntype FunctionalComponentEmitters<Emitters> = {\n\t[K in keyof Emitters as `on${Capitalize<string & K>}`]: EventEmitter<Emitters[K]>;\n};\n\nexport type FunctionalComponentProps<T extends ComponentApi> = StrictFields<InternalProps<T>> &\n\tStrictFields<ExtractStates<T>> &\n\tComponentCallbacks<ExtractCallbacks<T>> &\n\tComponentRefs<ExtractRefs<T>> &\n\tFunctionalComponentEmitters<ExtractEmitters<T>> &\n\tPartial<Omit<JSXBase.HTMLAttributes<HTMLElement>, keyof InternalProps<T> | keyof ExtractStates<T>>>;\n\n// ============================================================================\n// Controller Types\n// ============================================================================\n\ntype ControllerCallbackHandlers<Callbacks> = {\n\t[K in keyof Callbacks as `handle${Capitalize<string & K>}`]: (element?: Callbacks[K]) => void;\n};\n\ntype ControllerListeners<Listeners> = {\n\t[K in keyof Listeners as `on${Capitalize<string & K>}`]: (event: Listeners[K]) => void;\n};\n\ntype ControllerRefSetters<Refs> = {\n\t[K in keyof Refs as `set${Capitalize<string & K>}Ref`]: (element?: Refs[K]) => void;\n};\n\nexport type ControllerInterface<T extends ComponentApi = ComponentApi> = {\n\tcomponentWillLoad(props: ResolvedInputProps<T>): void;\n\tgetRenderProp<K extends keyof InternalProps<T>>(key: K): StrictFields<InternalProps<T>>[K];\n} & ComponentWatchers<ExternalProps<T>> &\n\tControllerCallbackHandlers<ExtractCallbacks<T>> &\n\tControllerListeners<ExtractListeners<T>> &\n\tExtractMethods<T> &\n\tControllerRefSetters<ExtractRefs<T>>;\n"]}
+{"version":3,"file":"generic-types.js","sourceRoot":"","sources":["../../../src/internal/functional-components/generic-types.ts"],"names":[],"mappings":"","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\n\nimport type { Prop } from '../props';\n\n// ============================================================================\n// Utility Types\n// ============================================================================\n\ntype Callback<T> = (value?: T) => void;\n\n/** Makes all fields required and non-nullable. */\nexport type StrictFields<T> = {\n\t[K in keyof T]-?: NonNullable<T[K]>;\n};\n\ntype UnionToIntersection<U> = (U extends unknown ? (arg: U) => void : never) extends (arg: infer I) => void ? I : never;\n\n// ============================================================================\n// Phantom Key Mapping (__input_* convention)\n// ============================================================================\n\n/**\n * Extracts the internal (normalized) property types by filtering out __input_* and __propInternal__ phantom keys.\n */\nexport type InternalOf<P> = {\n\t[K in keyof P as K extends `__input_${string}` | '__propInternal__' ? never : K]: P[K];\n};\n\n/**\n * Extracts the external (input) property types.\n * For each real key K, uses the __input_K type if present, otherwise falls back to the internal type.\n */\ntype ExternalOf<P> = {\n\t[K in keyof P as K extends `__input_${string}` | '__propInternal__' ? never : K]: `__input_${K & string}` extends keyof P\n\t\t? NonNullable<P[`__input_${K & string}`]>\n\t\t: P[K];\n};\n\n// ============================================================================\n// Component API Definition\n// ============================================================================\n\ntype PropsDefinition = {\n\tOptional?: Record<string, unknown>;\n\tRequired?: Record<string, unknown>;\n};\n\nexport interface ComponentApi {\n\tCallbacks?: Record<string, () => unknown>;\n\tEmitters?: Record<string, unknown>;\n\tListeners?: Record<string, unknown>;\n\tMethods?: Record<string, (...args: never[]) => unknown>;\n\tProps?: PropsDefinition;\n\tRefs?: Record<string, HTMLElement>;\n\tStates: Record<never, never>;\n}\n\n// ============================================================================\n// Props Config (Single Source of Truth)\n// ============================================================================\n\n/** Any prop definition that carries a phantom Prop type, a propName and a getDefaultValue method. */\ntype AnyPropDef = {\n\treadonly __phantomProp__?: Prop<string, unknown, unknown>;\n\treadonly propName: string;\n\tgetDefaultValue(): unknown;\n};\n\n/** Extracts the phantom Prop type from a PropDefinition or DependentPropDefinition. */\ntype ExtractPhantomProp<D> = D extends { readonly __phantomProp__?: infer P extends Prop<string, unknown, unknown> } ? P : never;\n\n/** Merges an array of prop definitions into a single intersection of their phantom Prop types. */\ntype MergePropsFromArray<A extends readonly AnyPropDef[]> = UnionToIntersection<ExtractPhantomProp<A[number]>>;\n\n/** Shape for a props config object with arrays of runtime prop definitions. */\nexport type PropsConfigShape = {\n\toptional?: readonly AnyPropDef[];\n\trequired?: readonly AnyPropDef[];\n};\n\n/**\n * Derives a full ComponentApi type from a runtime props config and optional extra fields.\n *\n * Usage:\n * ```ts\n * const config = {\n *   required: [maxProp, clampedNumberValueProp],\n *   optional: [labelProp],\n * } as const satisfies PropsConfigShape;\n *\n * type MyApi = ApiFromConfig<typeof config, { States: { liveValue: number } }>;\n * ```\n */\nexport type ApiFromConfig<Config extends PropsConfigShape, Extra extends Partial<Omit<ComponentApi, 'Props'>> = Record<never, never>> = {\n\tProps: {\n\t\tOptional: Config['optional'] extends readonly AnyPropDef[] ? MergePropsFromArray<Config['optional']> : Record<never, never>;\n\t\tRequired: Config['required'] extends readonly AnyPropDef[] ? MergePropsFromArray<Config['required']> : Record<never, never>;\n\t};\n\tStates: Extra extends { States: infer S extends Record<string, unknown> } ? S : Record<never, never>;\n} & Omit<Extra, 'Props' | 'States'>;\n\n// ============================================================================\n// Props Extraction\n// ============================================================================\n\n/** Safely extracts a sub-record from a ComponentApi's Props definition, defaulting to an empty record. */\ntype PropsEntry<T extends ComponentApi, K extends keyof PropsDefinition> = T['Props'] extends PropsDefinition\n\t? T['Props'][K] extends Record<string, unknown>\n\t\t? T['Props'][K]\n\t\t: Record<never, never>\n\t: Record<never, never>;\n\ntype RequiredProps<T extends ComponentApi> = PropsEntry<T, 'Required'>;\ntype OptionalProps<T extends ComponentApi> = PropsEntry<T, 'Optional'>;\ntype AllProps<T extends ComponentApi> = RequiredProps<T> & OptionalProps<T>;\n\n/**\n * Resolved internal prop types (normalized).\n * Required props are mandatory, optional props are Partial.\n */\nexport type ResolvedProps<T extends ComponentApi> = InternalOf<RequiredProps<T>> & Partial<InternalOf<OptionalProps<T>>>;\n\n/**\n * Resolved external/input prop types (before normalization).\n * Used for componentWillLoad and watchers.\n */\nexport type ResolvedInputProps<T extends ComponentApi> = ExternalOf<RequiredProps<T>> & Partial<ExternalOf<OptionalProps<T>>>;\n\n// ============================================================================\n// API Field Extraction\n// ============================================================================\n\n/** Safely extracts a top-level field from a ComponentApi, defaulting to an empty record. */\ntype ApiField<T extends ComponentApi, K extends keyof ComponentApi> = T[K] extends Record<string, unknown> ? T[K] : Record<never, never>;\n\ntype ExtractCallbacks<T extends ComponentApi> = ApiField<T, 'Callbacks'>;\ntype ExtractEmitters<T extends ComponentApi> = ApiField<T, 'Emitters'>;\ntype ExtractListeners<T extends ComponentApi> = ApiField<T, 'Listeners'>;\ntype ExtractMethods<T extends ComponentApi> = ApiField<T, 'Methods'>;\ntype ExtractRefs<T extends ComponentApi> = ApiField<T, 'Refs'>;\ntype ExtractStates<T extends ComponentApi> = InternalOf<ApiField<T, 'States'>>;\n\ntype InternalProps<T extends ComponentApi> = InternalOf<AllProps<T>>;\ntype ExternalProps<T extends ComponentApi> = ExternalOf<AllProps<T>>;\n\n// ============================================================================\n// State Access Functions\n// ============================================================================\n\n/**\n * Function signature for setting component state in a type-safe manner.\n * Used by controllers to update reactive @State fields with generic type safety.\n */\nexport type SetStateFn<Api extends ComponentApi> = <K extends keyof InternalOf<NonNullable<Api['States']>>>(\n\tkey: K,\n\tvalue: InternalOf<NonNullable<Api['States']>>[K],\n) => void;\n\n/**\n * Function signature for reading component state in a type-safe manner.\n * Used by controllers to access reactive @State fields with generic type safety.\n */\nexport type GetStateFn<Api extends ComponentApi> = <K extends keyof InternalOf<NonNullable<Api['States']>>>(\n\tkey: K,\n) => InternalOf<NonNullable<Api['States']>>[K];\n\n/**\n * Bundles setState and getState as a single unit.\n * Controllers receive this as their state access mechanism — either a real\n * implementation from a web component or `BaseController.stateLess` for\n * controllers that manage state purely via render props.\n */\nexport type StateAccess<Api extends ComponentApi> = {\n\tsetState: SetStateFn<Api>;\n\tgetState: GetStateFn<Api>;\n};\n\n// ============================================================================\n// Method Promise Wrapping\n// ============================================================================\n\n/**\n * Wraps the return type of each method in a Promise.\n * API definitions use simple return types (e.g., `() => void`)\n * and the resolved type becomes `() => Promise<void>`.\n * Uses `Awaited<R>` for idempotency — `() => Promise<void>` stays `Promise<void>`, not `Promise<Promise<void>>`.\n */\ntype PromiseMethod<Methods> = {\n\t[K in keyof Methods]: Methods[K] extends (...args: infer A) => infer R ? (...args: A) => Promise<Awaited<R>> : Methods[K];\n};\n\n// ============================================================================\n// Web Component Types\n// ============================================================================\n\ntype ComponentPropsRequired<Props> = {\n\t[K in keyof Props as `_${Lowercase<string & K>}`]: Props[K];\n};\n\ntype ComponentPropsOptional<Props> = {\n\t[K in keyof Props as `_${Lowercase<string & K>}`]?: Props[K];\n};\n\ntype ComponentProps<T extends ComponentApi> = ComponentPropsRequired<ExternalOf<RequiredProps<T>>> & ComponentPropsOptional<ExternalOf<OptionalProps<T>>>;\n\ntype ComponentWatchers<Props> = {\n\t[K in keyof Props as `watch${Capitalize<string & K>}`]: Callback<Props[K]>;\n};\n\ntype ComponentEmitters<Emitters> = {\n\t[K in keyof Emitters as `${Lowercase<string & K>}`]: EventEmitter<Emitters[K]>;\n};\n\ntype ComponentListeners<Listeners> = {\n\t[K in keyof Listeners as `on${Capitalize<string & K>}`]: (event: Listeners[K]) => void;\n};\n\nexport type WebComponentInterface<T extends ComponentApi> = {\n\tcomponentWillLoad(): void;\n} & ComponentProps<T> &\n\tStrictFields<ExtractStates<T>> &\n\tComponentWatchers<ExternalProps<T>> &\n\tComponentEmitters<ExtractEmitters<T>> &\n\tPromiseMethod<ExtractMethods<T>> &\n\tComponentListeners<ExtractListeners<T>>;\n\n// ============================================================================\n// Functional Component Types\n// ============================================================================\n\ntype ComponentCallbacks<Callbacks> = {\n\t[K in keyof Callbacks as `handle${Capitalize<string & K>}`]: Callbacks[K];\n};\n\ntype ComponentRefs<Refs> = {\n\t[K in keyof Refs as `ref${Capitalize<string & K>}`]: (element?: Refs[K]) => void;\n};\n\ntype FunctionalComponentEmitters<Emitters> = {\n\t[K in keyof Emitters as `on${Capitalize<string & K>}`]: EventEmitter<Emitters[K]>;\n};\n\nexport type FunctionalComponentProps<T extends ComponentApi> = StrictFields<InternalProps<T>> &\n\tStrictFields<ExtractStates<T>> &\n\tComponentCallbacks<ExtractCallbacks<T>> &\n\tComponentRefs<ExtractRefs<T>> &\n\tFunctionalComponentEmitters<ExtractEmitters<T>> &\n\tPartial<Omit<JSXBase.HTMLAttributes<HTMLElement>, keyof InternalProps<T> | keyof ExtractStates<T>>>;\n\n// ============================================================================\n// Controller Types\n// ============================================================================\n\ntype ControllerCallbackHandlers<Callbacks> = {\n\t[K in keyof Callbacks as `handle${Capitalize<string & K>}`]: (element?: Callbacks[K]) => void;\n};\n\ntype ControllerListeners<Listeners> = {\n\t[K in keyof Listeners as `on${Capitalize<string & K>}`]: (event: Listeners[K]) => void;\n};\n\nexport type ControllerInterface<T extends ComponentApi = ComponentApi> = {\n\tcomponentWillLoad(props: ResolvedInputProps<T>): void;\n\tgetRenderProp<K extends keyof InternalProps<T>>(key: K): StrictFields<InternalProps<T>>[K];\n} & ComponentWatchers<ExternalProps<T>> &\n\tControllerCallbackHandlers<ExtractCallbacks<T>> &\n\tControllerListeners<ExtractListeners<T>>;\n"]}

package/dist/collection/internal/functional-components/image/component.js

@@ -3,7 +3,7 @@
  */
 import { h } from "@stencil/core";
 export const ImageFC = (props) => {
-    const { alt, loading, sizes, src, srcset } = props;
-    return h("img", { class: "kol-image", alt: alt, loading: loading, sizes: sizes || undefined, src: src, srcset: srcset || undefined });
+    const { alt, loading, sizes, src, srcset, handleError, handleLoad } = props;
+    return (h("img", { class: "kol-image", alt: alt, loading: loading, sizes: sizes || undefined, src: src, srcset: srcset || undefined, onError: (e) => handleError(e), onLoad: (e) => handleLoad(e) }));
 };
 //# sourceMappingURL=component.js.map

package/dist/collection/internal/functional-components/image/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/image/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAKlC,MAAM,CAAC,MAAM,OAAO,GAA2C,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEnD,OAAO,WAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,IAAI,SAAS,GAAI,CAAC;AAChI,CAAC,CAAC","sourcesContent":["import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { ImageApi } from './api';\n\nexport const ImageFC: FC<FunctionalComponentProps<ImageApi>> = (props) => {\n\tconst { alt, loading, sizes, src, srcset } = props;\n\n\treturn <img class=\"kol-image\" alt={alt} loading={loading} sizes={sizes || undefined} src={src} srcset={srcset || undefined} />;\n};\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/image/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAclC,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,KAAK,EAAE,EAAE;IAClD,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAE5E,OAAO,CACN,WACC,KAAK,EAAC,WAAW,EACjB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,IAAI,SAAS,EACzB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,IAAI,SAAS,EAC3B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAC9B,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,GAC3B,CACF,CAAC;AACH,CAAC,CAAC","sourcesContent":["import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport type { LoadingType } from '../../props';\n\ntype ImageFCProps = {\n\talt: string;\n\tloading?: LoadingType;\n\tsizes?: string;\n\tsrc: string;\n\tsrcset?: string;\n\thandleError: (event: Event) => void;\n\thandleLoad: (event: Event) => void;\n};\n\nexport const ImageFC: FC<ImageFCProps> = (props) => {\n\tconst { alt, loading, sizes, src, srcset, handleError, handleLoad } = props;\n\n\treturn (\n\t\t<img\n\t\t\tclass=\"kol-image\"\n\t\t\talt={alt}\n\t\t\tloading={loading}\n\t\t\tsizes={sizes || undefined}\n\t\t\tsrc={src}\n\t\t\tsrcset={srcset || undefined}\n\t\t\tonError={(e) => handleError(e)}\n\t\t\tonLoad={(e) => handleLoad(e)}\n\t\t/>\n\t);\n};\n"]}

package/dist/collection/internal/functional-components/meter/api.js.map

@@ -1 +1 @@
-{"version":3,"file":"api.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/meter/api.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAetG,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,CAAC;IAC9C,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,CAAC;CACX,CAAC","sourcesContent":["import type { HighProp, LabelProp, LowProp, MaxProp, MinProp, NumberValueProp, OptimumProp, OrientationProp, UnitProp } from '../../props';\nimport { labelProp, maxProp, minProp, numberValueProp, orientationProp, unitProp } from '../../props';\nimport type { ComponentApi, PropsConfigShape } from '../generic-types';\n\n/**\n * Meter Props configuration for renderProps pipeline.\n *\n * Note: `high`, `low`, and `optimum` are intentionally omitted from this config.\n * These optional numeric props must remain nullable (undefined when not set),\n * but the renderProps pipeline enforces StrictFields (non-nullable).\n * Solution: these three props are managed separately in the Controller's `meterData` object\n * via the `getMeterData()` getter, allowing them to be undefined while the renderProps\n * pipeline handles required props.\n *\n * See MeterApi.Props.Optional for the complete prop interface.\n */\nexport const meterPropsConfig = {\n\toptional: [minProp, orientationProp, unitProp],\n\trequired: [labelProp, maxProp, numberValueProp],\n} as const satisfies PropsConfigShape;\n\nexport interface MeterApi extends ComponentApi {\n\tProps: {\n\t\tOptional: HighProp & LowProp & MinProp & OptimumProp & OrientationProp & UnitProp;\n\t\tRequired: LabelProp & MaxProp & NumberValueProp;\n\t};\n\tStates: {\n\t\tliveValue: number;\n\t};\n}\n"]}
+{"version":3,"file":"api.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/meter/api.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAetG,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,CAAC;IAC9C,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,CAAC;CACX,CAAC","sourcesContent":["import type { HighProp, LabelProp, LowProp, MaxProp, MinProp, NumberValueProp, OptimumProp, OrientationProp, UnitProp } from '../../props';\nimport { labelProp, maxProp, minProp, numberValueProp, orientationProp, unitProp } from '../../props';\nimport type { ComponentApi, PropsConfigShape } from '../generic-types';\n\n/**\n * Meter Props configuration for renderProps pipeline.\n *\n * Note: `high`, `low`, and `optimum` are intentionally omitted from this config.\n * These optional numeric props must remain nullable (undefined when not set),\n * but the renderProps pipeline enforces StrictFields (non-nullable).\n * Solution: these three props are managed separately in the Controller's `meterData` object\n * via the `getMeterData()` getter, allowing them to be undefined while the renderProps\n * pipeline handles required props.\n *\n * See MeterApi.Props.Optional for the complete prop interface.\n */\nexport const meterPropsConfig = {\n\toptional: [minProp, orientationProp, unitProp],\n\trequired: [labelProp, maxProp, numberValueProp],\n} as const satisfies PropsConfigShape;\n\nexport interface MeterApi extends ComponentApi {\n\tProps: {\n\t\tOptional: HighProp & LowProp & MinProp & OptimumProp & OrientationProp & UnitProp;\n\t\tRequired: LabelProp & MaxProp & NumberValueProp;\n\t};\n}\n"]}

package/dist/collection/internal/functional-components/meter/component.js

@@ -36,19 +36,14 @@ function getMeterState(value, min, max, low, high, optimum) {
     }
 }
 export const MeterFC = (props) => {
-    const { high, label, low, liveValue, max, min, optimum, orientation, unit, value } = props;
+    const { high, label, low, max, min, optimum, orientation, unit, value } = props;
     const isVertical = orientation === 'vertical';
     const isPercentage = unit === '%';
     const displayValue = isPercentage ? Math.round(((value - min) / (max - min)) * 100) : value;
-    const liveMeterValue = isPercentage ? `${Math.round(((liveValue - min) / (max - min)) * 100)}` : liveValue;
     const state = getMeterState(value, min, max, low, high, optimum);
     const hasStateClassification = low !== undefined || high !== undefined;
     const stateLabel = hasStateClassification ? translate(`kol-meter-state-${state}`) : '';
-    const liveValueText = isPercentage
-        ? translate('kol-live-value', { placeholders: { value: String(liveMeterValue), unit } })
-        : translate('kol-live-value-bounded', { placeholders: { value: String(liveMeterValue), max: String(max), unit } });
-    const liveValueWithState = hasStateClassification ? `${liveValueText} – ${stateLabel}` : liveValueText;
     const charCount = max.toString().length > min.toString().length ? max.toString().length + 'ch' : min.toString().length + 'ch';
-    return (h("div", { class: { 'kol-meter': true, 'kol-meter--vertical': isVertical } }, h("div", { class: "kol-meter__bar" }, h("div", { class: "kol-meter__bar-label" }, label, hasStateClassification && (h("span", { class: `kol-meter__bar-state kol-meter__bar-state--${state}` }, ' – ', stateLabel))), h("div", { class: "kol-meter__bar-track" }, h("meter", { "aria-label": label, high: high, low: low, max: max, min: min, optimum: optimum, value: value })), h("span", { class: "kol-meter__value-unit" }, h("span", { class: "kol-meter__value", style: { 'min-width': charCount } }, displayValue), h("span", { class: "kol-meter__unit" }, unit))), h("span", { "aria-live": "polite", "aria-relevant": "additions text", class: "visually-hidden" }, liveValueWithState)));
+    return (h("div", { class: { 'kol-meter': true, 'kol-meter--vertical': isVertical } }, h("div", { class: "kol-meter__bar" }, h("div", { class: "kol-meter__bar-label" }, label, hasStateClassification && (h("span", { class: `kol-meter__bar-state kol-meter__bar-state--${state}` }, ' – ', stateLabel))), h("div", { class: "kol-meter__bar-track" }, h("meter", { "aria-label": label, high: high, low: low, max: max, min: min, optimum: optimum, value: value })), h("span", { class: "kol-meter__value-unit" }, h("span", { class: "kol-meter__value", style: { 'min-width': charCount } }, displayValue), h("span", { class: "kol-meter__unit" }, unit)))));
 };
 //# sourceMappingURL=component.js.map

package/dist/collection/internal/functional-components/meter/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/meter/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAO1C,SAAS,aAAa,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAE,GAAuB,EAAE,IAAwB,EAAE,OAA2B;IAC7I,MAAM,YAAY,GAAG,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,GAAG,CAAC;IAChC,MAAM,aAAa,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,GAAG,CAAC;IAElC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC3B,MAAM,WAAW,GAAG,KAAK,IAAI,YAAY,IAAI,KAAK,IAAI,aAAa,CAAC;QACpE,OAAO,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC;IAC/C,CAAC;IAED,MAAM,WAAW,GAAG,KAAK,GAAG,YAAY,CAAC;IACzC,MAAM,YAAY,GAAG,KAAK,GAAG,aAAa,CAAC;IAC3C,MAAM,WAAW,GAAG,CAAC,WAAW,IAAI,CAAC,YAAY,CAAC;IAElD,MAAM,YAAY,GAAG,OAAO,GAAG,YAAY,CAAC;IAC5C,MAAM,aAAa,GAAG,OAAO,GAAG,aAAa,CAAC;IAE9C,IAAI,YAAY,EAAE,CAAC;QAClB,IAAI,WAAW;YAAE,OAAO,SAAS,CAAC;QAClC,IAAI,WAAW;YAAE,OAAO,YAAY,CAAC;QACrC,OAAO,UAAU,CAAC;IACnB,CAAC;SAAM,IAAI,aAAa,EAAE,CAAC;QAC1B,IAAI,YAAY;YAAE,OAAO,SAAS,CAAC;QACnC,IAAI,WAAW;YAAE,OAAO,YAAY,CAAC;QACrC,OAAO,UAAU,CAAC;IACnB,CAAC;SAAM,CAAC;QACP,IAAI,WAAW;YAAE,OAAO,SAAS,CAAC;QAClC,OAAO,YAAY,CAAC;IACrB,CAAC;AACF,CAAC;AAQD,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,KAAK,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE3F,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAC9C,MAAM,YAAY,GAAG,IAAI,KAAK,GAAG,CAAC;IAClC,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5F,MAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3G,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;IAGjE,MAAM,sBAAsB,GAAG,GAAG,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,CAAC;IACvE,MAAM,UAAU,GAAG,sBAAsB,CAAC,CAAC,CAAC,SAAS,CAAC,mBAAmB,KAAK,EAAoB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzG,MAAM,aAAa,GAAG,YAAY;QACjC,CAAC,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC;QACxF,CAAC,CAAC,SAAS,CAAC,wBAAwB,EAAE,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,cAAc,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;IACpH,MAAM,kBAAkB,GAAG,sBAAsB,CAAC,CAAC,CAAC,GAAG,aAAa,MAAM,UAAU,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC;IAEvG,MAAM,SAAS,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC;IAE9H,OAAO,CACN,WAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,qBAAqB,EAAE,UAAU,EAAE;QACnE,WAAK,KAAK,EAAC,gBAAgB;YAC1B,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,KAAK;gBACL,sBAAsB,IAAI,CAC1B,YAAM,KAAK,EAAE,8CAA8C,KAAK,EAAE;oBAChE,KAAK;oBACL,UAAU,CACL,CACP,CACI;YAEN,WAAK,KAAK,EAAC,sBAAsB;gBAChC,2BAAmB,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAU,CACvG;YACN,YAAM,KAAK,EAAC,uBAAuB;gBAClC,YAAM,KAAK,EAAC,kBAAkB,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,IAC9D,YAAY,CACP;gBACP,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAQ,CACrC,CACF;QAEN,yBAAgB,QAAQ,mBAAe,gBAAgB,EAAC,KAAK,EAAC,iBAAiB,IAC7E,kBAAkB,CACb,CACF,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport type { TranslationKey } from '../../../i18n';\nimport { translate } from '../../../i18n';\n\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { MeterApi } from './api';\n\ntype MeterState = 'optimum' | 'suboptimal' | 'critical';\n\nfunction getMeterState(value: number, min: number, max: number, low: number | undefined, high: number | undefined, optimum: number | undefined): MeterState {\n\tconst effectiveLow = low ?? min;\n\tconst effectiveHigh = high ?? max;\n\n\tif (optimum === undefined) {\n\t\tconst inMidRegion = value >= effectiveLow && value <= effectiveHigh;\n\t\treturn inMidRegion ? 'optimum' : 'suboptimal';\n\t}\n\n\tconst inLowRegion = value < effectiveLow;\n\tconst inHighRegion = value > effectiveHigh;\n\tconst inMidRegion = !inLowRegion && !inHighRegion;\n\n\tconst optimumInLow = optimum < effectiveLow;\n\tconst optimumInHigh = optimum > effectiveHigh;\n\n\tif (optimumInLow) {\n\t\tif (inLowRegion) return 'optimum';\n\t\tif (inMidRegion) return 'suboptimal';\n\t\treturn 'critical';\n\t} else if (optimumInHigh) {\n\t\tif (inHighRegion) return 'optimum';\n\t\tif (inMidRegion) return 'suboptimal';\n\t\treturn 'critical';\n\t} else {\n\t\tif (inMidRegion) return 'optimum';\n\t\treturn 'suboptimal';\n\t}\n}\n\ntype MeterFCProps = Omit<FunctionalComponentProps<MeterApi>, 'high' | 'low' | 'optimum'> & {\n\thigh: number | undefined;\n\tlow: number | undefined;\n\toptimum: number | undefined;\n};\n\nexport const MeterFC: FC<MeterFCProps> = (props) => {\n\tconst { high, label, low, liveValue, max, min, optimum, orientation, unit, value } = props;\n\n\tconst isVertical = orientation === 'vertical';\n\tconst isPercentage = unit === '%';\n\tconst displayValue = isPercentage ? Math.round(((value - min) / (max - min)) * 100) : value;\n\tconst liveMeterValue = isPercentage ? `${Math.round(((liveValue - min) / (max - min)) * 100)}` : liveValue;\n\tconst state = getMeterState(value, min, max, low, high, optimum);\n\n\t// State classification is only meaningful when low or high boundaries are defined\n\tconst hasStateClassification = low !== undefined || high !== undefined;\n\tconst stateLabel = hasStateClassification ? translate(`kol-meter-state-${state}` as TranslationKey) : '';\n\n\tconst liveValueText = isPercentage\n\t\t? translate('kol-live-value', { placeholders: { value: String(liveMeterValue), unit } })\n\t\t: translate('kol-live-value-bounded', { placeholders: { value: String(liveMeterValue), max: String(max), unit } });\n\tconst liveValueWithState = hasStateClassification ? `${liveValueText} – ${stateLabel}` : liveValueText;\n\n\tconst charCount = max.toString().length > min.toString().length ? max.toString().length + 'ch' : min.toString().length + 'ch';\n\n\treturn (\n\t\t<div class={{ 'kol-meter': true, 'kol-meter--vertical': isVertical }}>\n\t\t\t<div class=\"kol-meter__bar\">\n\t\t\t\t<div class=\"kol-meter__bar-label\">\n\t\t\t\t\t{label}\n\t\t\t\t\t{hasStateClassification && (\n\t\t\t\t\t\t<span class={`kol-meter__bar-state kol-meter__bar-state--${state}`}>\n\t\t\t\t\t\t\t{' – '}\n\t\t\t\t\t\t\t{stateLabel}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"kol-meter__bar-track\">\n\t\t\t\t\t<meter aria-label={label} high={high} low={low} max={max} min={min} optimum={optimum} value={value}></meter>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"kol-meter__value-unit\">\n\t\t\t\t\t<span class=\"kol-meter__value\" style={{ 'min-width': charCount }}>\n\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"kol-meter__unit\">{unit}</span>\n\t\t\t\t</span>\n\t\t\t</div>\n\n\t\t\t<span aria-live=\"polite\" aria-relevant=\"additions text\" class=\"visually-hidden\">\n\t\t\t\t{liveValueWithState}\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/meter/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAO1C,SAAS,aAAa,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,EAAE,GAAuB,EAAE,IAAwB,EAAE,OAA2B;IAC7I,MAAM,YAAY,GAAG,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,GAAG,CAAC;IAChC,MAAM,aAAa,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,GAAG,CAAC;IAElC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC3B,MAAM,WAAW,GAAG,KAAK,IAAI,YAAY,IAAI,KAAK,IAAI,aAAa,CAAC;QACpE,OAAO,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC;IAC/C,CAAC;IAED,MAAM,WAAW,GAAG,KAAK,GAAG,YAAY,CAAC;IACzC,MAAM,YAAY,GAAG,KAAK,GAAG,aAAa,CAAC;IAC3C,MAAM,WAAW,GAAG,CAAC,WAAW,IAAI,CAAC,YAAY,CAAC;IAElD,MAAM,YAAY,GAAG,OAAO,GAAG,YAAY,CAAC;IAC5C,MAAM,aAAa,GAAG,OAAO,GAAG,aAAa,CAAC;IAE9C,IAAI,YAAY,EAAE,CAAC;QAClB,IAAI,WAAW;YAAE,OAAO,SAAS,CAAC;QAClC,IAAI,WAAW;YAAE,OAAO,YAAY,CAAC;QACrC,OAAO,UAAU,CAAC;IACnB,CAAC;SAAM,IAAI,aAAa,EAAE,CAAC;QAC1B,IAAI,YAAY;YAAE,OAAO,SAAS,CAAC;QACnC,IAAI,WAAW;YAAE,OAAO,YAAY,CAAC;QACrC,OAAO,UAAU,CAAC;IACnB,CAAC;SAAM,CAAC;QACP,IAAI,WAAW;YAAE,OAAO,SAAS,CAAC;QAClC,OAAO,YAAY,CAAC;IACrB,CAAC;AACF,CAAC;AAQD,MAAM,CAAC,MAAM,OAAO,GAAqB,CAAC,KAAK,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAEhF,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAC9C,MAAM,YAAY,GAAG,IAAI,KAAK,GAAG,CAAC;IAClC,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5F,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;IAGjE,MAAM,sBAAsB,GAAG,GAAG,KAAK,SAAS,IAAI,IAAI,KAAK,SAAS,CAAC;IACvE,MAAM,UAAU,GAAG,sBAAsB,CAAC,CAAC,CAAC,SAAS,CAAC,mBAAmB,KAAK,EAAoB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzG,MAAM,SAAS,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC;IAE9H,OAAO,CACN,WAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,qBAAqB,EAAE,UAAU,EAAE;QACnE,WAAK,KAAK,EAAC,gBAAgB;YAC1B,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,KAAK;gBACL,sBAAsB,IAAI,CAC1B,YAAM,KAAK,EAAE,8CAA8C,KAAK,EAAE;oBAChE,KAAK;oBACL,UAAU,CACL,CACP,CACI;YAEN,WAAK,KAAK,EAAC,sBAAsB;gBAChC,2BAAmB,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAU,CACvG;YACN,YAAM,KAAK,EAAC,uBAAuB;gBAClC,YAAM,KAAK,EAAC,kBAAkB,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,IAC9D,YAAY,CACP;gBACP,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAQ,CACrC,CACF,CACD,CACN,CAAC;AACH,CAAC,CAAC","sourcesContent":["import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport type { TranslationKey } from '../../../i18n';\nimport { translate } from '../../../i18n';\n\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { MeterApi } from './api';\n\ntype MeterState = 'optimum' | 'suboptimal' | 'critical';\n\nfunction getMeterState(value: number, min: number, max: number, low: number | undefined, high: number | undefined, optimum: number | undefined): MeterState {\n\tconst effectiveLow = low ?? min;\n\tconst effectiveHigh = high ?? max;\n\n\tif (optimum === undefined) {\n\t\tconst inMidRegion = value >= effectiveLow && value <= effectiveHigh;\n\t\treturn inMidRegion ? 'optimum' : 'suboptimal';\n\t}\n\n\tconst inLowRegion = value < effectiveLow;\n\tconst inHighRegion = value > effectiveHigh;\n\tconst inMidRegion = !inLowRegion && !inHighRegion;\n\n\tconst optimumInLow = optimum < effectiveLow;\n\tconst optimumInHigh = optimum > effectiveHigh;\n\n\tif (optimumInLow) {\n\t\tif (inLowRegion) return 'optimum';\n\t\tif (inMidRegion) return 'suboptimal';\n\t\treturn 'critical';\n\t} else if (optimumInHigh) {\n\t\tif (inHighRegion) return 'optimum';\n\t\tif (inMidRegion) return 'suboptimal';\n\t\treturn 'critical';\n\t} else {\n\t\tif (inMidRegion) return 'optimum';\n\t\treturn 'suboptimal';\n\t}\n}\n\ntype MeterFCProps = Omit<FunctionalComponentProps<MeterApi>, 'high' | 'low' | 'optimum'> & {\n\thigh: number | undefined;\n\tlow: number | undefined;\n\toptimum: number | undefined;\n};\n\nexport const MeterFC: FC<MeterFCProps> = (props) => {\n\tconst { high, label, low, max, min, optimum, orientation, unit, value } = props;\n\n\tconst isVertical = orientation === 'vertical';\n\tconst isPercentage = unit === '%';\n\tconst displayValue = isPercentage ? Math.round(((value - min) / (max - min)) * 100) : value;\n\tconst state = getMeterState(value, min, max, low, high, optimum);\n\n\t// State classification is only meaningful when low or high boundaries are defined\n\tconst hasStateClassification = low !== undefined || high !== undefined;\n\tconst stateLabel = hasStateClassification ? translate(`kol-meter-state-${state}` as TranslationKey) : '';\n\n\tconst charCount = max.toString().length > min.toString().length ? max.toString().length + 'ch' : min.toString().length + 'ch';\n\n\treturn (\n\t\t<div class={{ 'kol-meter': true, 'kol-meter--vertical': isVertical }}>\n\t\t\t<div class=\"kol-meter__bar\">\n\t\t\t\t<div class=\"kol-meter__bar-label\">\n\t\t\t\t\t{label}\n\t\t\t\t\t{hasStateClassification && (\n\t\t\t\t\t\t<span class={`kol-meter__bar-state kol-meter__bar-state--${state}`}>\n\t\t\t\t\t\t\t{' – '}\n\t\t\t\t\t\t\t{stateLabel}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"kol-meter__bar-track\">\n\t\t\t\t\t<meter aria-label={label} high={high} low={low} max={max} min={min} optimum={optimum} value={value}></meter>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"kol-meter__value-unit\">\n\t\t\t\t\t<span class=\"kol-meter__value\" style={{ 'min-width': charCount }}>\n\t\t\t\t\t\t{displayValue}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"kol-meter__unit\">{unit}</span>\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"]}