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

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

@@ -133,7 +133,6 @@ export class KolTabs {
                 div.setAttribute('id', `tabpanel-${i}`);
                 div.setAttribute('role', 'tabpanel');
                 div.setAttribute('hidden', '');
-                div.setAttribute('tabindex', '0');
                 const slot = document.createElement('slot');
                 slot.setAttribute('name', `tabpanel-slot-${i}`);
                 div.appendChild(slot);
@@ -212,9 +211,9 @@ export class KolTabs {
             }, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
     }
     render() {
-        return (h("div", { key: 'cbac3f2cf4f389e4bdcd4a83c463a339a4f587c4', ref: (el) => {
+        return (h("div", { key: '0122ff1b3c1cd55bcc3f2f692d1f0e691458dedc', ref: (el) => {
                 this.tabPanelsElement = el;
-            }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), h("div", { key: 'cd0aa9f1a4e1e5dc5facdf0d1d6e58013bf4bc40', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
+            }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), h("div", { key: '67d6ed1262de72a3954176170c8359d7658af5c8', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
     }
     validateAlign(value) {
         validateAlign(this, value);

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/tabs/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tFocusableElement,\n\tKolFocusOptions,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\n\tTabBehaviorPropType,\n\tTabButtonProps,\n\tTabsAPI,\n\tTabsStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\tkoliBriQuerySelector,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\tvalidateTabBehavior,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '../../schema';\n\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport { KeyboardKey } from '../../schema/enums';\nimport type { HasCreateButtonPropType } from '../../schema/props/has-create-button';\nimport { validateHasCreateButton } from '../../schema/props/has-create-button';\nimport clsx from '../../utils/clsx';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n/**\n * The **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users.\n */\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements TabsAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate currentFocusIndex: number | undefined;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset + step;\n\n\t\tif (nextOffset < tabs.length) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate prevPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset - step;\n\n\t\tif (nextOffset >= 0) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.prevPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tswitch (event.key as KeyboardKey) {\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tthis.goToNextTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tthis.goToPreviousTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.Space:\n\t\t\tcase KeyboardKey.Enter:\n\t\t\t\tthis.activateFocusedTab(event);\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tprivate getCurrentFocusIndex(): number {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\treturn this.currentFocusIndex;\n\t\t}\n\n\t\treturn this.state._selected;\n\t}\n\n\tprivate getKeyboardTabChangeMode(): 'selectFocusOnly' | 'activateCompletely' {\n\t\tif (this._behavior === 'select-manual') {\n\t\t\treturn 'selectFocusOnly';\n\t\t}\n\n\t\treturn 'activateCompletely';\n\t}\n\n\tprivate goToNextTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.nextPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate goToPreviousTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.prevPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate activateFocusedTab(event: KeyboardEvent) {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\tthis.onSelect(event, this.currentFocusIndex);\n\t\t}\n\t}\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.selectNextTabEvent(event, index);\n\t};\n\n\tprivate selectNextTabEvent(\n\t\tevent: KeyboardEvent | MouseEvent,\n\t\tnextTabIndex: number,\n\t\tchangeMode: 'selectFocusOnly' | 'activateCompletely' = 'activateCompletely',\n\t): void {\n\t\tthis.currentFocusIndex = nextTabIndex;\n\n\t\tthis.focusTabById(nextTabIndex);\n\n\t\tif (changeMode === 'activateCompletely') {\n\t\t\tthis._selected = nextTabIndex;\n\n\t\t\tconst tab = this.state._tabs[nextTabIndex];\n\t\t\ttab._on?.onSelect?.(event, nextTabIndex);\n\n\t\t\tthis.onSelect(event, nextTabIndex);\n\t\t}\n\t}\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\t/**\n\t * Sets focus on the current tab button.\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\t/**\n\t * Triggers a click on the currently selected tab.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t// Rule is disabled, because KolButtonWc is focusable.\n\t\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus\n\t\t\t<div aria-label={this.state._label} class=\"kol-tabs__button-group\" role=\"tablist\" onKeyDown={this.onKeyDown} onBlur={this.onBlur}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tref={this.state._selected === index ? this.ctaRef : undefined}\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : ''}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.state._hasCreateButton && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-tabs__button-create\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_icons=\"kolicon-plus\"\n\t\t\t\t\t\tdata-testid=\"tabs-create-button\"\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.tabPanelsElement = el;\n\t\t\t\t}}\n\t\t\t\tclass={clsx('kol-tabs', `kol-tabs--align-${this.state._align}`)}\n\t\t\t>\n\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t<div class=\"kol-tabs__content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visual orientation of the component.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines which behavior is active.\n\t */\n\t@Prop() public _behavior?: TabBehaviorPropType;\n\n\t/**\n\t * Defines whether the element has a create button.\n\t */\n\t@Prop() public _hasCreateButton?: HasCreateButtonPropType = false;\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() public _label!: LabelPropType;\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t@State() public state: TabsStates = {\n\t\t_align: 'top',\n\t\t_label: '', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_behavior')\n\tpublic validateBehavior(value?: TabBehaviorPropType) {\n\t\tvalidateTabBehavior(this, value);\n\t}\n\n\t@Watch('_hasCreateButton')\n\tpublic validateHasCreateButton(value?: HasCreateButtonPropType) {\n\t\tvalidateHasCreateButton(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function') {\n\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t\tafterPatch: this.refreshTabPanels,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateBehavior(this._behavior);\n\t\tthis.validateHasCreateButton(this._hasCreateButton);\n\t}\n\n\tprivate refreshTabPanels = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\t// Clear existing panels\n\t\twhile (this.tabPanelHost.firstChild) {\n\t\t\tthis.tabPanelHost.removeChild(this.tabPanelHost.firstChild);\n\t\t}\n\t\tfor (let i = 0; i < this.state._tabs?.length; i++) {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\tdiv.setAttribute('hidden', '');\n\t\t\tdiv.setAttribute('tabindex', '0');\n\t\t\tconst slot = document.createElement('slot');\n\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\tdiv.appendChild(slot);\n\t\t\tthis.tabPanelHost?.appendChild(div);\n\n\t\t\tif (typeof HTMLCollection !== 'undefined' && this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t}\n\t\t}\n\t\tthis.updateVisiblePanel();\n\t};\n\n\tprivate updateVisiblePanel = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\tArray.from(this.tabPanelHost.children).forEach((child, i) => {\n\t\t\tif (i === this.state._selected) {\n\t\t\t\tchild.removeAttribute('hidden');\n\t\t\t} else {\n\t\t\t\tchild.setAttribute('hidden', '');\n\t\t\t}\n\t\t});\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.refreshTabPanels();\n\t}\n\n\tprivate focusTabById(index: number): void {\n\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._on?.onSelect?.(event, index);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.select, index);\n\t\t}\n\n\t\tthis.focusTabById(index);\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tthis.state._on?.onCreate?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.create);\n\t\t}\n\t};\n\n\tprivate onBlur = () => {\n\t\tthis.currentFocusIndex = undefined;\n\t};\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/tabs/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tClickableElement,\n\tFocusableElement,\n\tKolFocusOptions,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\n\tTabBehaviorPropType,\n\tTabButtonProps,\n\tTabsAPI,\n\tTabsStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\tkoliBriQuerySelector,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\tvalidateTabBehavior,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '../../schema';\n\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport { KeyboardKey } from '../../schema/enums';\nimport type { HasCreateButtonPropType } from '../../schema/props/has-create-button';\nimport { validateHasCreateButton } from '../../schema/props/has-create-button';\nimport clsx from '../../utils/clsx';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n/**\n * The **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users.\n */\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements ClickableElement, FocusableElement, TabsAPI {\n\t@Element() protected readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate currentFocusIndex: number | undefined;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset + step;\n\n\t\tif (nextOffset < tabs.length) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate prevPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset - step;\n\n\t\tif (nextOffset >= 0) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.prevPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tswitch (event.key as KeyboardKey) {\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tthis.goToNextTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tthis.goToPreviousTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.Space:\n\t\t\tcase KeyboardKey.Enter:\n\t\t\t\tthis.activateFocusedTab(event);\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tprivate getCurrentFocusIndex(): number {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\treturn this.currentFocusIndex;\n\t\t}\n\n\t\treturn this.state._selected;\n\t}\n\n\tprivate getKeyboardTabChangeMode(): 'selectFocusOnly' | 'activateCompletely' {\n\t\tif (this._behavior === 'select-manual') {\n\t\t\treturn 'selectFocusOnly';\n\t\t}\n\n\t\treturn 'activateCompletely';\n\t}\n\n\tprivate goToNextTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.nextPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate goToPreviousTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.prevPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate activateFocusedTab(event: KeyboardEvent) {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\tthis.onSelect(event, this.currentFocusIndex);\n\t\t}\n\t}\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.selectNextTabEvent(event, index);\n\t};\n\n\tprivate selectNextTabEvent(\n\t\tevent: KeyboardEvent | MouseEvent,\n\t\tnextTabIndex: number,\n\t\tchangeMode: 'selectFocusOnly' | 'activateCompletely' = 'activateCompletely',\n\t): void {\n\t\tthis.currentFocusIndex = nextTabIndex;\n\n\t\tthis.focusTabById(nextTabIndex);\n\n\t\tif (changeMode === 'activateCompletely') {\n\t\t\tthis._selected = nextTabIndex;\n\n\t\t\tconst tab = this.state._tabs[nextTabIndex];\n\t\t\ttab._on?.onSelect?.(event, nextTabIndex);\n\n\t\t\tthis.onSelect(event, nextTabIndex);\n\t\t}\n\t}\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\t/**\n\t * Sets focus on the current tab button.\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\t/**\n\t * Triggers a click on the currently selected tab.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t// Rule is disabled, because KolButtonWc is focusable.\n\t\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus\n\t\t\t<div aria-label={this.state._label} class=\"kol-tabs__button-group\" role=\"tablist\" onKeyDown={this.onKeyDown} onBlur={this.onBlur}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tref={this.state._selected === index ? this.ctaRef : undefined}\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : ''}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.state._hasCreateButton && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-tabs__button-create\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_icons=\"kolicon-plus\"\n\t\t\t\t\t\tdata-testid=\"tabs-create-button\"\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.tabPanelsElement = el;\n\t\t\t\t}}\n\t\t\t\tclass={clsx('kol-tabs', `kol-tabs--align-${this.state._align}`)}\n\t\t\t>\n\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t<div class=\"kol-tabs__content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visual orientation of the component.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines which behavior is active.\n\t */\n\t@Prop() public _behavior?: TabBehaviorPropType;\n\n\t/**\n\t * Defines whether the element has a create button.\n\t */\n\t@Prop() public _hasCreateButton?: HasCreateButtonPropType = false;\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() public _label!: LabelPropType;\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t@State() public state: TabsStates = {\n\t\t_align: 'top',\n\t\t_label: '', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_behavior')\n\tpublic validateBehavior(value?: TabBehaviorPropType) {\n\t\tvalidateTabBehavior(this, value);\n\t}\n\n\t@Watch('_hasCreateButton')\n\tpublic validateHasCreateButton(value?: HasCreateButtonPropType) {\n\t\tvalidateHasCreateButton(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function') {\n\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t\tafterPatch: this.refreshTabPanels,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateBehavior(this._behavior);\n\t\tthis.validateHasCreateButton(this._hasCreateButton);\n\t}\n\n\tprivate refreshTabPanels = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\t// Clear existing panels\n\t\twhile (this.tabPanelHost.firstChild) {\n\t\t\tthis.tabPanelHost.removeChild(this.tabPanelHost.firstChild);\n\t\t}\n\t\tfor (let i = 0; i < this.state._tabs?.length; i++) {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t// div.setAttribute('tabindex', '0'); Panel soll nicht tabbar sein; siehe https://github.com/public-ui/kolibri/issues/10082\n\t\t\tconst slot = document.createElement('slot');\n\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\tdiv.appendChild(slot);\n\t\t\tthis.tabPanelHost?.appendChild(div);\n\n\t\t\tif (typeof HTMLCollection !== 'undefined' && this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t}\n\t\t}\n\t\tthis.updateVisiblePanel();\n\t};\n\n\tprivate updateVisiblePanel = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\tArray.from(this.tabPanelHost.children).forEach((child, i) => {\n\t\t\tif (i === this.state._selected) {\n\t\t\t\tchild.removeAttribute('hidden');\n\t\t\t} else {\n\t\t\t\tchild.setAttribute('hidden', '');\n\t\t\t}\n\t\t});\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.refreshTabPanels();\n\t}\n\n\tprivate focusTabById(index: number): void {\n\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._on?.onSelect?.(event, index);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.select, index);\n\t\t}\n\n\t\tthis.focusTabById(index);\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tthis.state._on?.onCreate?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.create);\n\t\t}\n\t};\n\n\tprivate onBlur = () => {\n\t\tthis.currentFocusIndex = undefined;\n\t};\n}\n"]}

package/dist/collection/components/tabs/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* forward the rem function */
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
@@ -17,9 +18,14 @@
 @layer kol-a11y {
   :host {
     /*
-                   * Minimum size of interactive elements.
-                   */
-    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
+     * Minimum size of interactive elements.
+     *
+     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:
+     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose
+     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's
+     * rounding, dropping just below the required minimum.
+     */
+    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
      * By initially setting the background color to white and the font color to black,
@@ -206,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  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- */
+  src: url("kolicons.eot?t=1783496448056"); /* IE9*/
+  src: url("kolicons.eot?t=1783496448056#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783496448056") format("woff2"), url("kolicons.woff?t=1783496448056") format("woff"), url("kolicons.ttf?t=1783496448056") format("truetype"), url("kolicons.svg?t=1783496448056#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -50,7 +50,10 @@ export class KolTextarea {
             } });
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: 'c82369a69d4ce7d08ee0a63642623afceb4b007b' }, this.getFormFieldProps()), h(KolInputContainerStateWrapperFc, { key: 'ef1f50a4f3bc366cddf7b999a11fc9e34b6e9581', state: this.state }, h(KolTextAreaStateWrapperFc, Object.assign({ key: '9b89da329cee83168237b2e803e5c386376d89ae' }, this.getTextAreaProps())))));
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '24e29e18b88fe756f4cb2bd44044c95194042fad' }, this.getFormFieldProps()), h(KolInputContainerStateWrapperFc, { key: '510945913640229aeff1d513917f74c3f69ccb78', state: this.state }, h(KolTextAreaStateWrapperFc, Object.assign({ key: '2a712ce4f0865675d9ca762f1bf43be486952810' }, this.getTextAreaProps())))));
+    }
+    validateAriaDetails(value) {
+        this.controller.validateAriaDetails(value);
     }
     constructor() {
         this.ctaRef = createCtaRef();
@@ -178,6 +181,7 @@ export class KolTextarea {
         });
     }
     componentWillLoad() {
+        this.validateAriaDetails(this._ariaDetails);
         this._touched = this._touched === true;
         this.controller.componentWillLoad();
         this.state._hasValue = !!this.state._value;
@@ -239,6 +243,31 @@ export class KolTextarea {
                 "attribute": "_adjust-height",
                 "defaultValue": "false"
             },
+            "_ariaDetails": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AriaDetailsPropType",
+                    "resolved": "string | undefined",
+                    "references": {
+                        "AriaDetailsPropType": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::AriaDetailsPropType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "References an external element by ID that provides accessible details for this textarea."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_aria-details"
+            },
             "_disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -883,6 +912,9 @@ export class KolTextarea {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "_ariaDetails",
+                "methodName": "validateAriaDetails"
+            }, {
                 "propName": "_accessKey",
                 "methodName": "validateAccessKey"
             }, {

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/textarea/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from '../../utils/clsx';\n\nimport type {\n\tAdjustHeightPropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaResizePropType,\n\tTextareaStates,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolTextAreaStateWrapperFc, { type TextAreaStateWrapperProps } from '../../functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { TextareaController } from './controller';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\n *\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements TextareaAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolTextareaElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLTextAreaElement>();\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.ctaRef.el?.value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\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\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-textarea', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t\t'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() || this.controller.hasCounter(),\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getTextAreaProps(): TextAreaStateWrapperProps {\n\t\tconst ariaDescribedBy = typeof this.state._maxLength === 'number' ? [createRelatedUniqueId(this.state._id, 'character-limit-hint')] : undefined; // When a character limit is defined, we provide an additional hint referenced by aria-describedby.\n\n\t\treturn {\n\t\t\tref: this.ctaRef,\n\t\t\tstate: this.state,\n\t\t\tstyle: {\n\t\t\t\tresize: this.state._resize,\n\t\t\t},\n\t\t\tariaDescribedBy,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerStateWrapperFc state={this.state}>\n\t\t\t\t\t<KolTextAreaStateWrapperFc {...this.getTextAreaProps()} />\n\t\t\t\t</KolInputContainerStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Shows a character counter for the input element.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.\n\t */\n\t@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t * In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.\n\t */\n\t@Prop() public _resize?: TextareaResizePropType = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Maximum number of visible rows of the element.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines whether the browser should check the spelling and grammar.\n\t */\n\t@Prop() public _spellCheck?: SpellCheckPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_currentLengthDebounced: 0,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('textarea'),\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_maxLengthBehavior')\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tthis.controller.validateMaxLengthBehavior(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tsetTimeout(() => {\n\t\t\tif (this._adjustHeight === true && this.ctaRef.el /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows = this.state?._rows && this.state._rows > increaseTextareaHeight(this.ctaRef.el) ? this.state._rows : increaseTextareaHeight(this.ctaRef.el);\n\t\t\t} else if (!this._rows) {\n\t\t\t\tthis._rows = 1;\n\t\t\t}\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.ctaRef.el instanceof HTMLTextAreaElement) {\n\t\t\tthis._value = this.ctaRef.el.value;\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ctaRef.el);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/textarea/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from '../../utils/clsx';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolTextAreaStateWrapperFc, { type TextAreaStateWrapperProps } from '../../functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper';\nimport type {\n\tAdjustHeightPropType,\n\tAriaDetailsPropType,\n\tClickableElement,\n\tDisabledPropType,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaResizePropType,\n\tTextareaStates,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { TextareaController } from './controller';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.\n *\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements ClickableElement, FocusableElement, TextareaAPI {\n\t@Element() protected readonly host?: HTMLKolTextareaElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLTextAreaElement>();\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.ctaRef.el?.value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\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\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-textarea', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t\t'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() || this.controller.hasCounter(),\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getTextAreaProps(): TextAreaStateWrapperProps {\n\t\tconst ariaDescribedBy = typeof this.state._maxLength === 'number' ? [createRelatedUniqueId(this.state._id, 'character-limit-hint')] : undefined; // When a character limit is defined, we provide an additional hint referenced by aria-describedby.\n\n\t\treturn {\n\t\t\tref: this.ctaRef,\n\t\t\tstate: this.state,\n\t\t\tstyle: {\n\t\t\t\tresize: this.state._resize,\n\t\t\t},\n\t\t\tariaDescribedBy,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonFocus: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerStateWrapperFc state={this.state}>\n\t\t\t\t\t<KolTextAreaStateWrapperFc {...this.getTextAreaProps()} />\n\t\t\t\t</KolInputContainerStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * References an external element by ID that provides accessible details for this textarea.\n\t */\n\t@Prop() public _ariaDetails?: AriaDetailsPropType;\n\n\t@Watch('_ariaDetails')\n\tpublic validateAriaDetails(value?: AriaDetailsPropType): void {\n\t\tthis.controller.validateAriaDetails(value);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Shows a character counter for the input element.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.\n\t */\n\t@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t * In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.\n\t */\n\t@Prop() public _resize?: TextareaResizePropType = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Maximum number of visible rows of the element.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines whether the browser should check the spelling and grammar.\n\t */\n\t@Prop() public _spellCheck?: SpellCheckPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_currentLengthDebounced: 0,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('textarea'),\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_maxLengthBehavior')\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tthis.controller.validateMaxLengthBehavior(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tsetTimeout(() => {\n\t\t\tif (this._adjustHeight === true && this.ctaRef.el /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows = this.state?._rows && this.state._rows > increaseTextareaHeight(this.ctaRef.el) ? this.state._rows : increaseTextareaHeight(this.ctaRef.el);\n\t\t\t} else if (!this._rows) {\n\t\t\t\tthis._rows = 1;\n\t\t\t}\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaDetails(this._ariaDetails);\n\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.ctaRef.el instanceof HTMLTextAreaElement) {\n\t\t\tthis._value = this.ctaRef.el.value;\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ctaRef.el);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"]}

package/dist/collection/components/textarea/style.css

@@ -18,9 +18,14 @@
 @layer kol-a11y {
   :host {
     /*
-                   * Minimum size of interactive elements.
-                   */
-    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
+     * Minimum size of interactive elements.
+     *
+     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:
+     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose
+     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's
+     * rounding, dropping just below the required minimum.
+     */
+    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
      * By initially setting the background color to white and the font color to black,
@@ -207,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  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- */
+  src: url("kolicons.eot?t=1783496448056"); /* IE9*/
+  src: url("kolicons.eot?t=1783496448056#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783496448056") format("woff2"), url("kolicons.woff?t=1783496448056") format("woff"), url("kolicons.ttf?t=1783496448056") format("truetype"), url("kolicons.svg?t=1783496448056#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -420,7 +425,7 @@
     justify-content: flex-start;
   }
   .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden])::after,
-  .kol-form-field--required .kol-tooltip__content .kol-span__label::after {
+  .kol-form-field--required .kol-form-field .kol-tooltip__content .kol-span__label::after {
     content: "*"/"";
   }
   .kol-input-container {

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

@@ -76,7 +76,7 @@ export class KolToastContainer {
         }
     }
     render() {
-        return (h(Host, { key: 'cf0e0e8cf3bc1561e28130d2deb7249d0c8f03b3', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (h(KolButtonTag, { key: '7028da8c47841524c340a67e3eee6a55c0965b7d', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
+        return (h(Host, { key: '41ab46ff3582bcf5059887ddff7b4e74efe22aed', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (h(KolButtonTag, { key: '67638c26d8d0c8a9b1255069aec40f90ab32ff0e', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
                 onClick: () => {
                     void this.closeAll();
                 },

package/dist/collection/components/toaster/style.css

@@ -18,9 +18,14 @@
 @layer kol-a11y {
   :host {
     /*
-                   * Minimum size of interactive elements.
-                   */
-    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
+     * Minimum size of interactive elements.
+     *
+     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:
+     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose
+     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's
+     * rounding, dropping just below the required minimum.
+     */
+    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
      * By initially setting the background color to white and the font color to black,
@@ -207,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  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- */
+  src: url("kolicons.eot?t=1783496448056"); /* IE9*/
+  src: url("kolicons.eot?t=1783496448056#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783496448056") format("woff2"), url("kolicons.woff?t=1783496448056") format("woff"), url("kolicons.ttf?t=1783496448056") format("truetype"), url("kolicons.svg?t=1783496448056#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -50,7 +50,7 @@ export class KolToolbar {
         return Object.assign(Object.assign({}, rest), { _icons, _disabled });
     }
     render() {
-        return (h("div", { key: '8f602796128e3c4135044a18d7663a950655404d', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
+        return (h("div", { key: '620bd0c219c8e3425d7fc04be129c7ef9e993a84', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
     }
     validateLabel(value) {
         validateLabel(this, value);

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/toolbar/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type { FocusableElement, KolFocusOptions, LabelPropType, ToolbarAPI, ToolbarItemPropType, ToolbarItemsPropType, ToolbarStates } from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KeyboardKey } from '../../schema/enums';\nimport type { OrientationPropType } from '../../schema/props/orientation';\nimport { validateOrientation } from '../../schema/props/orientation';\nimport { delegateClick, setClick } from '../../utils/element-click';\nimport { delegateFocus, setFocus } from '../../utils/element-focus';\n\n@Component({\n\ttag: 'kol-toolbar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToolbar implements ToolbarAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLElement;\n\n\t@State() public state: ToolbarStates = {\n\t\t_label: '',\n\t\t_items: [],\n\t};\n\n\t@State() private currentIndex: number = 0;\n\n\tprivate indexToElement = new Map<number, HTMLKolLinkWcElement | HTMLKolButtonWcElement>();\n\n\t/**\n\t * Sets focus on the currently active toolbar item.\n\t */\n\t@Method()\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {\n\t\tconst firstEnabledItem = this.indexToElement.get(this.currentIndex);\n\t\tif (firstEnabledItem) {\n\t\t\treturn delegateFocus(this.host!, () => setFocus(firstEnabledItem, options));\n\t\t}\n\t}\n\n\t/**\n\t * Triggers a click on the currently active toolbar item.\n\t */\n\t@Method()\n\tpublic async click(): Promise<void> {\n\t\tconst currentItem = this.indexToElement.get(this.currentIndex);\n\t\tif (currentItem) {\n\t\t\treturn delegateClick(this.host!, async () => setClick(currentItem));\n\t\t}\n\t}\n\n\tprivate normalizeItem(item: ToolbarItemPropType): ToolbarItemPropType {\n\t\tconst { _icons, _disabled, ...rest } = item;\n\t\treturn { ...rest, _icons, _disabled };\n\t}\n\tprivate renderItem = (raw: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst element = this.normalizeItem(raw);\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\n\n\t\tconst props = {\n\t\t\tkey: index,\n\t\t\tclass: 'button normal kol-toolbar__item',\n\t\t\t_tabIndex: tabIndex,\n\t\t\t_variant: 'normal',\n\t\t};\n\t\tconst catchRef = (el?: HTMLKolLinkWcElement | HTMLKolButtonWcElement) => {\n\t\t\tif (el) this.indexToElement.set(index, el);\n\t\t};\n\t\treturn element.type === 'link' ? (\n\t\t\t<KolLinkWcTag {...props} {...element} ref={catchRef}></KolLinkWcTag>\n\t\t) : (\n\t\t\t<KolButtonWcTag {...props} {...element} ref={catchRef}></KolButtonWcTag>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`} role=\"toolbar\" aria-label={this.state._label}>\n\t\t\t\t{this.state._items.map(this.renderItem)}\n\t\t\t</div>\n\t\t);\n\t}\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() public _label!: string;\n\n\t/**\n\t * Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).\n\t */\n\t@Prop() public _items!: ToolbarItemsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_items')\n\tpublic validateItems(value?: ToolbarItemsPropType): void {\n\t\tvalidateToolbarItems(this, value);\n\t\tthis.indexToElement.clear();\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\tvalidateOrientation(this, value);\n\t}\n\n\t/**\n\t * Retrieves the toolbar item by index if defined.\n\t * If not it use the current index of state.\n\t *\n\t * @returns An array of HTMLElements representing the toolbar items.\n\t */\n\tprivate getCurrentToolbarItem(index?: number): HTMLKolLinkWcElement | HTMLKolButtonWcElement | undefined {\n\t\treturn typeof index === 'number' ? this.indexToElement.get(index) : undefined;\n\t}\n\n\t/**\n\t * Sets the index of the first enabled toolbar item.\n\t */\n\tprivate setFirstEnabledItemIndex() {\n\t\tthis.currentIndex = this.state._items?.findIndex((item) => !item._disabled);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst pressedKey = event.code as KeyboardKey;\n\t\tconst isArrowKey = [KeyboardKey.ArrowUp, KeyboardKey.ArrowDown, KeyboardKey.ArrowRight, KeyboardKey.ArrowLeft].includes(pressedKey);\n\t\tif (!isArrowKey) return;\n\t\tevent.preventDefault();\n\n\t\tconst lastItemIndex = (this._items?.length ?? 0) - 1;\n\t\tif (lastItemIndex < 0) return;\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = currentIndex;\n\n\t\tswitch (pressedKey) {\n\t\t\tcase KeyboardKey.ArrowUp:\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tnextIndex = currentIndex > 0 ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowDown:\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tnextIndex = currentIndex < lastItemIndex ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif (currentIndex === nextIndex) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.state._items?.[nextIndex]?._disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.currentIndex = nextIndex;\n\t\tconst item = this.getCurrentToolbarItem(nextIndex);\n\t\tif (this.host) {\n\t\t\tvoid item?.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Resets the tabIndexes of the toolbar to default.\n\t */\n\t@Listen('focusout', { capture: true })\n\tpublic handleFocusout(event: FocusEvent) {\n\t\tif (event.target === this.host) this.setFirstEnabledItemIndex();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateItems(this._items);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/toolbar/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';\nimport type {\n\tClickableElement,\n\tFocusableElement,\n\tKolFocusOptions,\n\tLabelPropType,\n\tToolbarAPI,\n\tToolbarItemPropType,\n\tToolbarItemsPropType,\n\tToolbarStates,\n} from '../../schema';\nimport { validateLabel, validateToolbarItems } from '../../schema';\nimport { KeyboardKey } from '../../schema/enums';\nimport type { OrientationPropType } from '../../schema/props/orientation';\nimport { validateOrientation } from '../../schema/props/orientation';\nimport { delegateClick, setClick } from '../../utils/element-click';\nimport { delegateFocus, setFocus } from '../../utils/element-focus';\n\n@Component({\n\ttag: 'kol-toolbar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToolbar implements ClickableElement, FocusableElement, ToolbarAPI {\n\t@Element() private readonly host?: HTMLElement;\n\n\t@State() public state: ToolbarStates = {\n\t\t_label: '',\n\t\t_items: [],\n\t};\n\n\t@State() private currentIndex: number = 0;\n\n\tprivate indexToElement = new Map<number, HTMLKolLinkWcElement | HTMLKolButtonWcElement>();\n\n\t/**\n\t * Sets focus on the currently active toolbar item.\n\t */\n\t@Method()\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {\n\t\tconst firstEnabledItem = this.indexToElement.get(this.currentIndex);\n\t\tif (firstEnabledItem) {\n\t\t\treturn delegateFocus(this.host!, () => setFocus(firstEnabledItem, options));\n\t\t}\n\t}\n\n\t/**\n\t * Triggers a click on the currently active toolbar item.\n\t */\n\t@Method()\n\tpublic async click(): Promise<void> {\n\t\tconst currentItem = this.indexToElement.get(this.currentIndex);\n\t\tif (currentItem) {\n\t\t\treturn delegateClick(this.host!, async () => setClick(currentItem));\n\t\t}\n\t}\n\n\tprivate normalizeItem(item: ToolbarItemPropType): ToolbarItemPropType {\n\t\tconst { _icons, _disabled, ...rest } = item;\n\t\treturn { ...rest, _icons, _disabled };\n\t}\n\tprivate renderItem = (raw: ToolbarItemPropType, index: number): JSX.Element => {\n\t\tconst element = this.normalizeItem(raw);\n\t\tconst tabIndex = index === this.currentIndex && !element?._disabled ? 0 : -1;\n\n\t\tconst props = {\n\t\t\tkey: index,\n\t\t\tclass: 'button normal kol-toolbar__item',\n\t\t\t_tabIndex: tabIndex,\n\t\t\t_variant: 'normal',\n\t\t};\n\t\tconst catchRef = (el?: HTMLKolLinkWcElement | HTMLKolButtonWcElement) => {\n\t\t\tif (el) this.indexToElement.set(index, el);\n\t\t};\n\t\treturn element.type === 'link' ? (\n\t\t\t<KolLinkWcTag {...props} {...element} ref={catchRef}></KolLinkWcTag>\n\t\t) : (\n\t\t\t<KolButtonWcTag {...props} {...element} ref={catchRef}></KolButtonWcTag>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div class={`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`} role=\"toolbar\" aria-label={this.state._label}>\n\t\t\t\t{this.state._items.map(this.renderItem)}\n\t\t\t</div>\n\t\t);\n\t}\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() public _label!: string;\n\n\t/**\n\t * Defines the functional elements of toolbar to render (e.g. kol-link, kol-button).\n\t */\n\t@Prop() public _items!: ToolbarItemsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_items')\n\tpublic validateItems(value?: ToolbarItemsPropType): void {\n\t\tvalidateToolbarItems(this, value);\n\t\tthis.indexToElement.clear();\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\tvalidateOrientation(this, value);\n\t}\n\n\t/**\n\t * Retrieves the toolbar item by index if defined.\n\t * If not it use the current index of state.\n\t *\n\t * @returns An array of HTMLElements representing the toolbar items.\n\t */\n\tprivate getCurrentToolbarItem(index?: number): HTMLKolLinkWcElement | HTMLKolButtonWcElement | undefined {\n\t\treturn typeof index === 'number' ? this.indexToElement.get(index) : undefined;\n\t}\n\n\t/**\n\t * Sets the index of the first enabled toolbar item.\n\t */\n\tprivate setFirstEnabledItemIndex() {\n\t\tthis.currentIndex = this.state._items?.findIndex((item) => !item._disabled);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst pressedKey = event.code as KeyboardKey;\n\t\tconst isArrowKey = [KeyboardKey.ArrowUp, KeyboardKey.ArrowDown, KeyboardKey.ArrowRight, KeyboardKey.ArrowLeft].includes(pressedKey);\n\t\tif (!isArrowKey) return;\n\t\tevent.preventDefault();\n\n\t\tconst lastItemIndex = (this._items?.length ?? 0) - 1;\n\t\tif (lastItemIndex < 0) return;\n\t\tconst currentIndex = this.currentIndex;\n\t\tlet nextIndex = currentIndex;\n\n\t\tswitch (pressedKey) {\n\t\t\tcase KeyboardKey.ArrowUp:\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tnextIndex = currentIndex > 0 ? currentIndex - 1 : lastItemIndex;\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowDown:\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tnextIndex = currentIndex < lastItemIndex ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif (currentIndex === nextIndex) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.state._items?.[nextIndex]?._disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.currentIndex = nextIndex;\n\t\tconst item = this.getCurrentToolbarItem(nextIndex);\n\t\tif (this.host) {\n\t\t\tvoid item?.focus();\n\t\t}\n\t}\n\n\t/**\n\t * Resets the tabIndexes of the toolbar to default.\n\t */\n\t@Listen('focusout', { capture: true })\n\tpublic handleFocusout(event: FocusEvent) {\n\t\tif (event.target === this.host) this.setFirstEnabledItemIndex();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateItems(this._items);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.setFirstEnabledItemIndex();\n\t}\n}\n"]}

package/dist/collection/components/toolbar/style.css

@@ -18,9 +18,14 @@
 @layer kol-a11y {
   :host {
     /*
-                   * Minimum size of interactive elements.
-                   */
-    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
+     * Minimum size of interactive elements.
+     *
+     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:
+     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose
+     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's
+     * rounding, dropping just below the required minimum.
+     */
+    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
      * By initially setting the background color to white and the font color to black,
@@ -202,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  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- */
+  src: url("kolicons.eot?t=1783496448056"); /* IE9*/
+  src: url("kolicons.eot?t=1783496448056#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783496448056") format("woff2"), url("kolicons.woff?t=1783496448056") format("woff"), url("kolicons.ttf?t=1783496448056") format("truetype"), url("kolicons.svg?t=1783496448056#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -49,7 +49,7 @@ export class KolTooltipWc {
         (_a = this.controller) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
-        return (h(Host, { key: 'f677d58b886cdb9f1aab620608155ee412e0ef7d', class: "kol-tooltip" }, h(TooltipFC, { key: 'd86d1adc81a94fbb1116532e9f2529d96362834d', label: this.controller.getRenderProp('label'), badgeText: this._badgeText, id: this.controller.getRenderProp('id'), refFloating: (el) => { var _a; return (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setTooltipElementRef(el); } })));
+        return (h(Host, { key: 'a53a016bddcefab710ae6f44221a0e4ffe44b84a', class: "kol-tooltip" }, h(TooltipFC, { key: 'edd70a17cc202deae7ecbbc9b8ba9ebf63c1db6f', label: this.controller.getRenderProp('label'), badgeText: this._badgeText, id: this.controller.getRenderProp('id'), refFloating: (el) => { var _a; return (_a = this.controller) === null || _a === void 0 ? void 0 : _a.setTooltipElementRef(el); } })));
     }
     static get is() { return "kol-tooltip-wc"; }
     static get properties() {

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

@@ -23,7 +23,7 @@ export class KolTreeWc {
         await Promise.resolve((this.cacheValid = false));
     }
     render() {
-        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' })))));
+        return (h(Host, { key: 'ee07abb3b748443010336d2d6b2cf99e6ad10d64', onSlotchange: this.handleSlotchange.bind(this) }, h("nav", { key: 'aeb88ca3da07336fa1aa164723246bd7b69da7f3', class: "kol-tree", "aria-label": this.state._label }, h("ul", { key: '108e2ede70e08f5e77ada9961b47e57fcad50a3a', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, h("slot", { key: '0b67541fbb1e2f5eab04837fe1478296256baed2' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();