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

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/form/shadow.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAchE,MAAM,OAAO,OAAO;IAPpB;QAWkB,8BAAyB,GAAG,SAAS,CAAC,wBAAwB,CAAC,CAAC;QAChE,uBAAkB,GAAG,SAAS,CAAC,gBAAgB,CAAC,CAAC;QACjD,6BAAwB,GAAG,SAAS,CAAC,sBAAsB,CAAC,CAAC;QAG7D,aAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;;YAC5C,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,IAAI,OAAO,CAAA,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAA,KAAK,UAAU,EAAE,CAAC;gBACpD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,QAAQ,CAAC,KAAoB,CAAC,CAAC;YAChD,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACf,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;YAC9C,CAAC;QACF,CAAC,CAAC;QAEe,YAAO,GAAG,CAAC,KAAY,EAAE,EAAE;;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,OAAO,CAAA,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE,CAAC;gBACnD,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACf,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;YAC7C,CAAC;QACF,CAAC,CAAC;QAEe,oBAAe,GAAG,CAAC,QAAgB,EAAE,EAAE;YACvD,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAc,QAAQ,CAAC,CAAC;YACpE,IAAI,aAAa,IAAI,OAAO,aAAa,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;gBAChE,aAAa,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;gBACrD,aAAa,CAAC,KAAK,EAAE,CAAC;YACvB,CAAC;QACF,CAAC,CAAC;QAEe,oBAAe,GAAG,CAAC,EAAgB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,CAAC;QAEnE,wBAAmB,GAAG,CAAC,EAAyB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAiB,CAAC,CAAC;QA+ErG,kBAAa,GAA0B,IAAI,CAAC;QAO3C,UAAK,GAAe,EAAE,CAAC;KA+BvC;IAnHQ,eAAe,CAAC,SAA+B;QACtD,OAAO,CACN,EAAC,UAAU,IAAC,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,yBAAyB;YAC/H,yBAAiB,IAAI,CAAC,kBAAkB;gBACvC,cACE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,UAAI,GAAG,EAAE,KAAK;oBACb,EAAC,YAAY,IACZ,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAC,EAAE,EACR,MAAM,EAAE,KAAK,CAAC,OAAO,EACrB,GAAG,EAAE,EAAE,OAAO,EAAE,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,EAC1H,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,GACtD,CACE,CACL,CAAC,CACE,CACA,CACM,CACb,CAAC;IACH,CAAC;IAEO,iBAAiB;QACxB,OAAO,CACN,YAAM,KAAK,EAAC,UAAU,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,UAAU;YAC7F,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,CAAC,CAAC,CACpC;gBACC,WAAK,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,wBAAwB,CAAO,CAC/E,CACJ,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACzF;gBACC,WAAK,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAO,CAC1E,CACJ,CAAC,CAAC,CAAC,IAAI;YACR,eAAQ,CACF,CACP,CAAC;IACH,CAAC;IAEM,MAAM;QACZ,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QAElF,OAAO,CACN,EAAC,IAAI;YACH,YAAY,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC;YACrD,IAAI,CAAC,iBAAiB,EAAE,CACnB,CACP,CAAC;IACH,CAAC;IAEO,iBAAiB;;QACxB,MAAA,IAAI,CAAC,cAAc,0CAAE,cAAc,CAAC;YACnC,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,OAAO;SACd,CAAC,CAAC;QACH,UAAU,CAAC,GAAG,EAAE;;YACf,MAAA,MAAA,IAAI,CAAC,kBAAkB,0CAAE,aAAa,CAAC,GAAG,CAAC,0CAAE,KAAK,EAAE,CAAC;QACtD,CAAC,EAAE,GAAG,CAAC,CAAC;IACT,CAAC;IAMD,KAAK,CAAC,cAAc;QACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC1B,CAAC;IAoBM,UAAU,CAAC,KAA4B;QAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACjD,IAAI,CAAC,KAAK,mCACN,IAAI,CAAC,KAAK,KACb,GAAG,EAAE,KAAK,GACV,CAAC;QACH,CAAC;IACF,CAAC;IAGM,oBAAoB,CAAC,KAA4B;QACvD,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;YAChC,YAAY,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACP,WAAW,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;QAC3C,CAAC;IACF,CAAC;IAGM,iBAAiB,CAAC,KAA2B;QACnD,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChC,CAAC;IAEM,iBAAiB;QACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { validateErrorList, watchBoolean, watchString } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport { KolLinkWcTag } from '../../core/component-names';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.\n *\n * @slot - The content of the form.\n */\n@Component({\n\ttag: 'kol-form',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolForm implements FormAPI {\n\t@Element() private readonly host?: HTMLKolFormElement;\n\terrorListBlock?: HTMLElement;\n\terrorListFirstLink?: HTMLElement;\n\tprivate readonly translateErrorListMessage = translate('kol-error-list-message');\n\tprivate readonly translateErrorList = translate('kol-error-list');\n\tprivate readonly translateFormDescription = translate('kol-form-description');\n\n\t/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.submit);\n\t\t}\n\t};\n\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.reset);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (selector: string) => {\n\t\tconst targetElement = document.querySelector<HTMLElement>(selector);\n\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\ttargetElement.scrollIntoView({ behavior: 'smooth' });\n\t\t\ttargetElement.focus();\n\t\t}\n\t};\n\n\tprivate readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);\n\n\tprivate readonly setFirstLinkElement = (el?: HTMLKolLinkWcElement) => (this.errorListFirstLink = el as HTMLElement);\n\n\tprivate renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertFc class=\"kol-form__alert\" ref={this.setBlockElement} type=\"error\" variant=\"card\" label={this.translateErrorListMessage}>\n\t\t\t\t<nav aria-label={this.translateErrorList}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{errorList?.map((error, index) => (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-form__link\"\n\t\t\t\t\t\t\t\t\t_href=\"\"\n\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }}\n\t\t\t\t\t\t\t\t\tref={index === 0 ? this.setFirstLinkElement : undefined}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</KolAlertFc>\n\t\t);\n\t}\n\n\tprivate renderFormElement(): JSX.Element {\n\t\treturn (\n\t\t\t<form class=\"kol-form\" method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.translateFormDescription}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.state._requiredText}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{hasErrorList && this.renderErrorList(this._errorList)}\n\t\t\t\t{this.renderFormElement()}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate scrollToErrorList(): void {\n\t\tthis.errorListBlock?.scrollIntoView({\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'start',\n\t\t});\n\t\tsetTimeout(() => {\n\t\t\tthis.errorListFirstLink?.querySelector('a')?.focus();\n\t\t}, 250);\n\t}\n\n\t/**\n\t * Scrolls to the error list and focuses the first link.\n\t */\n\t@Method()\n\tasync focusErrorList(): Promise<void> {\n\t\tthis.scrollToErrorList();\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: FormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/form/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { validateErrorList, watchBoolean, watchString } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport { KolLinkWcTag } from '../../core/component-names';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ErrorListPropType, FormAPI, FormStates, KolFocusOptions, KoliBriFormCallbacks, Stringified } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.\n *\n * @slot - The content of the form.\n */\n@Component({\n\ttag: 'kol-form',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolForm implements FormAPI {\n\t@Element() private readonly host?: HTMLKolFormElement;\n\terrorListBlock?: HTMLElement;\n\terrorListFirstLink?: HTMLElement;\n\tscrollOptionsFallback: KolFocusOptions = {\n\t\tbehavior: 'smooth',\n\t\tblock: 'nearest',\n\t};\n\tprivate readonly translateErrorListMessage = translate('kol-error-list-message');\n\tprivate readonly translateErrorList = translate('kol-error-list');\n\tprivate readonly translateFormDescription = translate('kol-form-description');\n\n\t/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.submit);\n\t\t}\n\t};\n\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.reset);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (selector: string, options?: KolFocusOptions) => {\n\t\tconst targetElement = document.querySelector<HTMLElement>(selector);\n\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\ttargetElement.focus(options ? options : this.scrollOptionsFallback);\n\t\t}\n\t};\n\n\tprivate readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);\n\n\tprivate readonly setFirstLinkElement = (el?: HTMLKolLinkWcElement) => (this.errorListFirstLink = el as HTMLElement);\n\n\tprivate renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertFc class=\"kol-form__alert\" ref={this.setBlockElement} type=\"error\" variant=\"card\" label={this.translateErrorListMessage}>\n\t\t\t\t<nav aria-label={this.translateErrorList}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{errorList?.map((error, index) => (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-form__link\"\n\t\t\t\t\t\t\t\t\t_href=\"\"\n\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector), error.options) : error.selector }}\n\t\t\t\t\t\t\t\t\tref={index === 0 ? this.setFirstLinkElement : undefined}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</KolAlertFc>\n\t\t);\n\t}\n\n\tprivate renderFormElement(): JSX.Element {\n\t\treturn (\n\t\t\t<form class=\"kol-form\" method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.translateFormDescription}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.state._requiredText}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{hasErrorList && this.renderErrorList(this._errorList)}\n\t\t\t\t{this.renderFormElement()}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate scrollToErrorList(options?: KolFocusOptions): void {\n\t\tsetTimeout(() => {\n\t\t\tthis.errorListFirstLink?.querySelector('a')?.focus(options ? options : this.scrollOptionsFallback);\n\t\t}, 250);\n\t}\n\n\t/**\n\t * Scrolls to the error list and focuses the first link.\n\t */\n\t@Method()\n\tasync focusErrorList(options?: KolFocusOptions): Promise<void> {\n\t\tthis.scrollToErrorList(options);\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: FormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"]}

package/dist/collection/components/form/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/heading/component.js

@@ -27,7 +27,7 @@ export class KolHeading {
         });
     }
     render() {
-        return (h(Host, { key: '5879d577d6dfb5d0716b5f201a9b9a094f4b36e9' }, h(HeadingFC, { key: '85896384df9a2a200e7a196ec3d52a5282da0639', label: this.ctrl.getRenderProp('label'), level: this.ctrl.getRenderProp('level'), secondaryHeadline: this.ctrl.getRenderProp('secondaryHeadline') })));
+        return (h(Host, { key: '5d87ccb29dc05fdbd165bf482d18e80fbaa62b7d' }, h(HeadingFC, { key: '3d4d078165c93bc620c850644b4fcced6e4390ca', label: this.ctrl.getRenderProp('label'), level: this.ctrl.getRenderProp('level'), secondaryHeadline: this.ctrl.getRenderProp('secondaryHeadline') })));
     }
     static get is() { return "kol-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
 * The order is important as it determines the cascade priority.
@@ -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,

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

@@ -22,7 +22,7 @@ export class KolIcon {
         });
     }
     render() {
-        return (h(Host, { key: '0127f2d35f4164f440a30fec825e10158fc833a5' }, h(IconFC, { key: '6fa23897706337c29bc4ef2551904436b2a65785', icons: this.ctrl.getRenderProp('icons'), label: this.ctrl.getRenderProp('label') })));
+        return (h(Host, { key: 'af39984255995f183c5dce6bc5a6433b84940131' }, h(IconFC, { key: '1a03c1c01121ec2cc03ade18bc299a00bee5f0cd', icons: this.ctrl.getRenderProp('icons'), label: this.ctrl.getRenderProp('label') })));
     }
     static get is() { return "kol-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 @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/image/component.js

@@ -49,7 +49,7 @@ export class KolImage {
         });
     }
     render() {
-        return (h(Host, { key: '94e7aed9e787f996ddb733a9e398018ae618d948' }, h(ImageFC, { key: 'dd81b84b4048db6d9367efcb48ce5ca0f00afb5b', alt: this.ctrl.getRenderProp('alt'), loading: this.ctrl.getRenderProp('loading'), sizes: this.ctrl.getRenderProp('sizes'), src: this.ctrl.getRenderProp('src'), srcset: this.ctrl.getRenderProp('srcset'), handleError: this.handleError, handleLoad: this.handleLoad })));
+        return (h(Host, { key: '3b39257fa87e6d0961ded3dba73922ebf8834626' }, h(ImageFC, { key: '648ddf0d233b1b0896c5cdf43ee8ba50f95b2ea8', alt: this.ctrl.getRenderProp('alt'), loading: this.ctrl.getRenderProp('loading'), sizes: this.ctrl.getRenderProp('sizes'), src: this.ctrl.getRenderProp('src'), srcset: this.ctrl.getRenderProp('srcset'), handleError: this.handleError, handleLoad: this.handleLoad })));
     }
     static get is() { return "kol-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
 * The order is important as it determines the cascade priority.
@@ -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,

package/dist/collection/components/input-adapter-leanup/associated.controller.js

@@ -3,6 +3,8 @@
  */
 import { devHint, devWarning, getExperimentalMode, validateName } from "../../schema";
 import { getOptions } from "../../core/bootstrap";
+import { validateAriaDetails } from "../../schema/props/aria-details";
+import { attachInternals } from "../../utils/aria-labelledby";
 const isAssociatedTagName = (name) => name === 'KOL-BUTTON' ||
     name === 'KOL-COMBOBOX' ||
     name === 'KOL-INPUT-CHECKBOX' ||
@@ -35,6 +37,7 @@ export class AssociatedInputController {
         this.component = component;
         this.host = this.findHostWithShadowRoot(host);
         this.type = type;
+        this.internals = attachInternals(this.host);
         if (((_a = getOptions()) === null || _a === void 0 ? void 0 : _a.reflectInputValues) && isAssociatedTagName((_b = this.host) === null || _b === void 0 ? void 0 : _b.tagName) && component._name) {
             (_c = this.host) === null || _c === void 0 ? void 0 : _c.querySelectorAll('input,select,textarea').forEach((el) => {
                 var _a;
@@ -171,6 +174,9 @@ export class AssociatedInputController {
             }
         }
     }
+    validateAriaDetails(value) {
+        validateAriaDetails(this.component, this.host, this.internals, value);
+    }
     componentWillLoad() {
         this.validateName(this.component._name);
         this.validateSyncValueBySelector(this.component._syncValueBySelector);

package/dist/collection/components/input-adapter-leanup/associated.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"associated.controller.js","sourceRoot":"","sources":["../../../src/components/input-adapter-leanup/associated.controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { NamePropType, PropSyncValueBySelector, StencilUnknown, SyncValueBySelectorPropType } from '../../schema';\nimport { devHint, devWarning, getExperimentalMode, validateName } from '../../schema';\n\nimport type { Generic } from 'adopted-style-sheets';\nimport { getOptions } from '../../core/bootstrap';\n\ntype RequiredProps = NonNullable<unknown>;\ntype OptionalProps = {\n\tname: string;\n} & PropSyncValueBySelector;\ntype Props = Generic.Element.Members<RequiredProps, OptionalProps>;\ntype Watches = Generic.Element.Watchers<RequiredProps, OptionalProps>;\n\ntype HTMLInputFileElement = HTMLInputElement & {\n\tfiles: FileList;\n};\n\nconst isAssociatedTagName = (name?: string): boolean =>\n\tname === 'KOL-BUTTON' ||\n\tname === 'KOL-COMBOBOX' ||\n\tname === 'KOL-INPUT-CHECKBOX' ||\n\tname === 'KOL-INPUT-COLOR' ||\n\tname === 'KOL-INPUT-DATE' ||\n\tname === 'KOL-INPUT-EMAIL' ||\n\tname === 'KOL-INPUT-FILE' ||\n\tname === 'KOL-INPUT-NUMBER' ||\n\tname === 'KOL-INPUT-PASSWORD' ||\n\tname === 'KOL-INPUT-RADIO' ||\n\tname === 'KOL-INPUT-RANGE' ||\n\tname === 'KOL-INPUT-TEXT' ||\n\tname === 'KOL-SELECT' ||\n\tname === 'KOL-SINGLE-SELECT' ||\n\tname === 'KOL-TEXTAREA';\n\nexport class AssociatedInputController implements Watches {\n\tprivate readonly experimentalMode = getExperimentalMode();\n\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprotected readonly type: string;\n\tprotected readonly host?: Element;\n\n\tpublic readonly formAssociated?: HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\tpublic syncToOwnInput?: HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\n\tpublic constructor(component: Generic.Element.Component & Props, type: string, host?: Element) {\n\t\tthis.component = component;\n\t\tthis.host = this.findHostWithShadowRoot(host);\n\t\tthis.type = type;\n\n\t\tif (getOptions()?.reflectInputValues && isAssociatedTagName(this.host?.tagName) && component._name) {\n\t\t\tthis.host?.querySelectorAll('input,select,textarea').forEach((el) => {\n\t\t\t\tthis.host?.removeChild(el);\n\t\t\t});\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'button':\n\t\t\t\tcase 'color':\n\t\t\t\tcase 'date':\n\t\t\t\tcase 'email':\n\t\t\t\tcase 'file':\n\t\t\t\tcase 'number':\n\t\t\t\tcase 'password':\n\t\t\t\tcase 'radio':\n\t\t\t\tcase 'range':\n\t\t\t\tcase 'text':\n\t\t\t\t\tthis.formAssociated = document.createElement('input');\n\t\t\t\t\tthis.formAssociated.setAttribute('type', this.type);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'select':\n\t\t\t\t\tthis.formAssociated = document.createElement('select');\n\t\t\t\t\tthis.formAssociated.setAttribute('multiple', '');\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'textarea':\n\t\t\t\t\tthis.formAssociated = document.createElement('textarea');\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'checkbox': // Checkbox uses default case\n\t\t\t\tcase 'single-select': // SingleSelect uses default case\n\t\t\t\tcase 'combobox': // Combobox uses default case\n\t\t\t\tdefault:\n\t\t\t\t\tthis.formAssociated = document.createElement('input');\n\t\t\t\t\tthis.formAssociated.setAttribute('type', 'hidden');\n\t\t\t}\n\t\t\tthis.formAssociated.setAttribute('data-form-associated', '');\n\t\t\tthis.formAssociated.setAttribute('hidden', '');\n\t\t\tthis.host?.appendChild(this.formAssociated);\n\t\t}\n\t}\n\n\t/**\n\t * The associated elements must not reside within the ShadowRoot and must\n\t * reside as children in the host to be recognized by native forms.\n\t */\n\tprivate findHostWithShadowRoot(host?: Element): Element | undefined {\n\t\twhile (host?.shadowRoot === null && host !== document.body) {\n\t\t\tconst parent = host?.parentNode;\n\t\t\tif (parent instanceof ShadowRoot) {\n\t\t\t\thost = parent.host;\n\t\t\t} else {\n\t\t\t\thost = parent instanceof Element ? parent : undefined;\n\t\t\t}\n\t\t}\n\t\treturn host;\n\t}\n\n\tprotected setAttribute(qualifiedName: string, element?: HTMLElement, value?: string | number | boolean) {\n\t\tif (this.experimentalMode) {\n\t\t\ttry {\n\t\t\t\tvalue = typeof value === 'object' && value !== null ? JSON.stringify(value) : value;\n\t\t\t\tif (typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string') {\n\t\t\t\t\telement?.setAttribute(qualifiedName, `${value as string}`);\n\t\t\t\t} else {\n\t\t\t\t\tthrow new Error(`Invalid value type: ${typeof value}`);\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\telement?.removeAttribute(qualifiedName);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * We need to stringify the value, for the setAttribute method.\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes#value\n\t *\n\t * TODO: It is possible that the value are a cyclic object value. So we need a custom\n\t *       JSON.stringify method from outside to convert it to string.\n\t */\n\tprivate tryToStringifyValue(value: StencilUnknown): string | null {\n\t\ttry {\n\t\t\treturn typeof value === 'object' && value !== null ? JSON.stringify(value).toString() : value === null || value === undefined ? null : value.toString();\n\t\t} catch (e) {\n\t\t\tdevWarning(`The form field raw value is not able to stringify! ${e as string}`);\n\t\t\treturn '';\n\t\t}\n\t}\n\n\t/**\n\t * We try to support native form-associated custom elements.\n\t *\n\t * @see https://github.com/public-ui/kolibri/discussions/2821\n\t */\n\tpublic readonly setFormAssociatedValue = (rawValue: StencilUnknown) => {\n\t\tconst name = this.formAssociated?.getAttribute('name');\n\t\tif (name === null || name === '') {\n\t\t\tdevHint(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);\n\t\t}\n\t\tconst strValue = this.tryToStringifyValue(rawValue);\n\t\tthis.syncValue(rawValue, strValue, this.formAssociated);\n\t\tthis.syncValue(rawValue, strValue, this.syncToOwnInput);\n\t};\n\n\tprivate syncValue(\n\t\trawValue: StencilUnknown,\n\t\tstrValue: string | null,\n\t\tassociatedElement?: HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n\t) {\n\t\tif (associatedElement) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'file':\n\t\t\t\t\t(associatedElement as HTMLInputFileElement).files = rawValue as FileList;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'select':\n\t\t\t\t\t(associatedElement as HTMLSelectElement).querySelectorAll('option').forEach((el) => {\n\t\t\t\t\t\t(associatedElement as HTMLSelectElement).removeChild(el);\n\t\t\t\t\t});\n\t\t\t\t\tif (Array.isArray(rawValue)) {\n\t\t\t\t\t\trawValue.forEach((rawValueItem) => {\n\t\t\t\t\t\t\tconst strValueItem = this.tryToStringifyValue(rawValueItem as string);\n\t\t\t\t\t\t\tif (typeof strValueItem === 'string') {\n\t\t\t\t\t\t\t\tconst option = document.createElement('option');\n\t\t\t\t\t\t\t\toption.setAttribute('value', strValueItem);\n\t\t\t\t\t\t\t\toption.setAttribute('selected', '');\n\t\t\t\t\t\t\t\t(associatedElement as HTMLSelectElement).appendChild(option);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'radio':\n\t\t\t\t\tif (typeof strValue === 'string') {\n\t\t\t\t\t\tassociatedElement.setAttribute('value', strValue);\n\t\t\t\t\t\tassociatedElement.setAttribute('checked', '');\n\t\t\t\t\t\tassociatedElement.value = strValue;\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tif (typeof strValue === 'string') {\n\t\t\t\t\t\tassociatedElement.setAttribute('value', strValue);\n\t\t\t\t\t\tassociatedElement.value = strValue;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tassociatedElement.removeAttribute('value');\n\t\t\t\t\t\tassociatedElement.value = '';\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic validateName(value?: NamePropType): void {\n\t\tvalidateName(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tthis.setAttribute('name', this.formAssociated, this.component.state._name as string);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t\tif (typeof value === 'undefined') {\n\t\t\tdevHint(\n\t\t\t\t`A name on input fields or switches is not strictly required, but it might be relevant for the autocomplete function and for the static submission of the input field.`,\n\t\t\t);\n\t\t}\n\t}\n\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tif (this.experimentalMode && typeof value === 'string') {\n\t\t\tconst input = document.querySelector(value) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\t\t\tif (input /* SSR instanceof HTMLInputElement */) {\n\t\t\t\tthis.syncToOwnInput = input;\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateName(this.component._name);\n\t\tthis.validateSyncValueBySelector(this.component._syncValueBySelector);\n\t}\n}\n"]}
+{"version":3,"file":"associated.controller.js","sourceRoot":"","sources":["../../../src/components/input-adapter-leanup/associated.controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { NamePropType, PropSyncValueBySelector, StencilUnknown, SyncValueBySelectorPropType } from '../../schema';\nimport { devHint, devWarning, getExperimentalMode, validateName } from '../../schema';\n\nimport type { Generic } from 'adopted-style-sheets';\nimport { getOptions } from '../../core/bootstrap';\nimport { validateAriaDetails } from '../../schema/props/aria-details';\nimport { attachInternals, type HostInternals } from '../../utils/aria-labelledby';\n\ntype RequiredProps = NonNullable<unknown>;\ntype OptionalProps = {\n\tname: string;\n} & PropSyncValueBySelector;\ntype Props = Generic.Element.Members<RequiredProps, OptionalProps>;\ntype Watches = Generic.Element.Watchers<RequiredProps, OptionalProps>;\n\ntype HTMLInputFileElement = HTMLInputElement & {\n\tfiles: FileList;\n};\n\nconst isAssociatedTagName = (name?: string): boolean =>\n\tname === 'KOL-BUTTON' ||\n\tname === 'KOL-COMBOBOX' ||\n\tname === 'KOL-INPUT-CHECKBOX' ||\n\tname === 'KOL-INPUT-COLOR' ||\n\tname === 'KOL-INPUT-DATE' ||\n\tname === 'KOL-INPUT-EMAIL' ||\n\tname === 'KOL-INPUT-FILE' ||\n\tname === 'KOL-INPUT-NUMBER' ||\n\tname === 'KOL-INPUT-PASSWORD' ||\n\tname === 'KOL-INPUT-RADIO' ||\n\tname === 'KOL-INPUT-RANGE' ||\n\tname === 'KOL-INPUT-TEXT' ||\n\tname === 'KOL-SELECT' ||\n\tname === 'KOL-SINGLE-SELECT' ||\n\tname === 'KOL-TEXTAREA';\n\nexport class AssociatedInputController implements Watches {\n\tprivate readonly experimentalMode = getExperimentalMode();\n\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprotected readonly type: string;\n\tprotected readonly host?: Element;\n\tpublic internals?: HostInternals;\n\n\tpublic readonly formAssociated?: HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\tpublic syncToOwnInput?: HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\n\tpublic constructor(component: Generic.Element.Component & Props, type: string, host?: Element) {\n\t\tthis.component = component;\n\t\tthis.host = this.findHostWithShadowRoot(host);\n\t\tthis.type = type;\n\t\tthis.internals = attachInternals(this.host);\n\n\t\tif (getOptions()?.reflectInputValues && isAssociatedTagName(this.host?.tagName) && component._name) {\n\t\t\tthis.host?.querySelectorAll('input,select,textarea').forEach((el) => {\n\t\t\t\tthis.host?.removeChild(el);\n\t\t\t});\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'button':\n\t\t\t\tcase 'color':\n\t\t\t\tcase 'date':\n\t\t\t\tcase 'email':\n\t\t\t\tcase 'file':\n\t\t\t\tcase 'number':\n\t\t\t\tcase 'password':\n\t\t\t\tcase 'radio':\n\t\t\t\tcase 'range':\n\t\t\t\tcase 'text':\n\t\t\t\t\tthis.formAssociated = document.createElement('input');\n\t\t\t\t\tthis.formAssociated.setAttribute('type', this.type);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'select':\n\t\t\t\t\tthis.formAssociated = document.createElement('select');\n\t\t\t\t\tthis.formAssociated.setAttribute('multiple', '');\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'textarea':\n\t\t\t\t\tthis.formAssociated = document.createElement('textarea');\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'checkbox': // Checkbox uses default case\n\t\t\t\tcase 'single-select': // SingleSelect uses default case\n\t\t\t\tcase 'combobox': // Combobox uses default case\n\t\t\t\tdefault:\n\t\t\t\t\tthis.formAssociated = document.createElement('input');\n\t\t\t\t\tthis.formAssociated.setAttribute('type', 'hidden');\n\t\t\t}\n\t\t\tthis.formAssociated.setAttribute('data-form-associated', '');\n\t\t\tthis.formAssociated.setAttribute('hidden', '');\n\t\t\tthis.host?.appendChild(this.formAssociated);\n\t\t}\n\t}\n\n\t/**\n\t * The associated elements must not reside within the ShadowRoot and must\n\t * reside as children in the host to be recognized by native forms.\n\t */\n\tprivate findHostWithShadowRoot(host?: Element): Element | undefined {\n\t\twhile (host?.shadowRoot === null && host !== document.body) {\n\t\t\tconst parent = host?.parentNode;\n\t\t\tif (parent instanceof ShadowRoot) {\n\t\t\t\thost = parent.host;\n\t\t\t} else {\n\t\t\t\thost = parent instanceof Element ? parent : undefined;\n\t\t\t}\n\t\t}\n\t\treturn host;\n\t}\n\n\tprotected setAttribute(qualifiedName: string, element?: HTMLElement, value?: string | number | boolean) {\n\t\tif (this.experimentalMode) {\n\t\t\ttry {\n\t\t\t\tvalue = typeof value === 'object' && value !== null ? JSON.stringify(value) : value;\n\t\t\t\tif (typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string') {\n\t\t\t\t\telement?.setAttribute(qualifiedName, `${value as string}`);\n\t\t\t\t} else {\n\t\t\t\t\tthrow new Error(`Invalid value type: ${typeof value}`);\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\telement?.removeAttribute(qualifiedName);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * We need to stringify the value, for the setAttribute method.\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes\n\t * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes#value\n\t *\n\t * TODO: It is possible that the value are a cyclic object value. So we need a custom\n\t *       JSON.stringify method from outside to convert it to string.\n\t */\n\tprivate tryToStringifyValue(value: StencilUnknown): string | null {\n\t\ttry {\n\t\t\treturn typeof value === 'object' && value !== null ? JSON.stringify(value).toString() : value === null || value === undefined ? null : value.toString();\n\t\t} catch (e) {\n\t\t\tdevWarning(`The form field raw value is not able to stringify! ${e as string}`);\n\t\t\treturn '';\n\t\t}\n\t}\n\n\t/**\n\t * We try to support native form-associated custom elements.\n\t *\n\t * @see https://github.com/public-ui/kolibri/discussions/2821\n\t */\n\tpublic readonly setFormAssociatedValue = (rawValue: StencilUnknown) => {\n\t\tconst name = this.formAssociated?.getAttribute('name');\n\t\tif (name === null || name === '') {\n\t\t\tdevHint(` The form field (${this.type}) must have a name attribute to be form-associated. Please define the _name attribute.`);\n\t\t}\n\t\tconst strValue = this.tryToStringifyValue(rawValue);\n\t\tthis.syncValue(rawValue, strValue, this.formAssociated);\n\t\tthis.syncValue(rawValue, strValue, this.syncToOwnInput);\n\t};\n\n\tprivate syncValue(\n\t\trawValue: StencilUnknown,\n\t\tstrValue: string | null,\n\t\tassociatedElement?: HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,\n\t) {\n\t\tif (associatedElement) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'file':\n\t\t\t\t\t(associatedElement as HTMLInputFileElement).files = rawValue as FileList;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'select':\n\t\t\t\t\t(associatedElement as HTMLSelectElement).querySelectorAll('option').forEach((el) => {\n\t\t\t\t\t\t(associatedElement as HTMLSelectElement).removeChild(el);\n\t\t\t\t\t});\n\t\t\t\t\tif (Array.isArray(rawValue)) {\n\t\t\t\t\t\trawValue.forEach((rawValueItem) => {\n\t\t\t\t\t\t\tconst strValueItem = this.tryToStringifyValue(rawValueItem as string);\n\t\t\t\t\t\t\tif (typeof strValueItem === 'string') {\n\t\t\t\t\t\t\t\tconst option = document.createElement('option');\n\t\t\t\t\t\t\t\toption.setAttribute('value', strValueItem);\n\t\t\t\t\t\t\t\toption.setAttribute('selected', '');\n\t\t\t\t\t\t\t\t(associatedElement as HTMLSelectElement).appendChild(option);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'radio':\n\t\t\t\t\tif (typeof strValue === 'string') {\n\t\t\t\t\t\tassociatedElement.setAttribute('value', strValue);\n\t\t\t\t\t\tassociatedElement.setAttribute('checked', '');\n\t\t\t\t\t\tassociatedElement.value = strValue;\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tdefault:\n\t\t\t\t\tif (typeof strValue === 'string') {\n\t\t\t\t\t\tassociatedElement.setAttribute('value', strValue);\n\t\t\t\t\t\tassociatedElement.value = strValue;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tassociatedElement.removeAttribute('value');\n\t\t\t\t\t\tassociatedElement.value = '';\n\t\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic validateName(value?: NamePropType): void {\n\t\tvalidateName(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tthis.setAttribute('name', this.formAssociated, this.component.state._name as string);\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t\tif (typeof value === 'undefined') {\n\t\t\tdevHint(\n\t\t\t\t`A name on input fields or switches is not strictly required, but it might be relevant for the autocomplete function and for the static submission of the input field.`,\n\t\t\t);\n\t\t}\n\t}\n\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tif (this.experimentalMode && typeof value === 'string') {\n\t\t\tconst input = document.querySelector(value) as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n\t\t\tif (input /* SSR instanceof HTMLInputElement */) {\n\t\t\t\tthis.syncToOwnInput = input;\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic validateAriaDetails(value?: string): void {\n\t\tvalidateAriaDetails(this.component, this.host, this.internals, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateName(this.component._name);\n\t\tthis.validateSyncValueBySelector(this.component._syncValueBySelector);\n\t}\n}\n"]}

package/dist/collection/components/input-checkbox/shadow.js

@@ -82,7 +82,7 @@ export class KolInputCheckbox {
         return this.state._icons.unchecked;
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '74de9542fe9b5be704548f3c7971ced0dbe8eb42' }, this.getFormFieldProps(), { renderNoLabel: true }), h(KolFieldControlStateWrapperFc, Object.assign({ key: '46309834b643f14d8af0a8f4dc31ca5c37323c28' }, this.getFieldControlProps(), { renderNoHint: true }), h(KolCheckboxStateWrapperFc, Object.assign({ key: 'a70bbc3a81265ad7e94503fa29d8b09747205761' }, this.getInputProps())))));
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '18b0444342bea59b5816806b7a8d92e94e3a8d62' }, this.getFormFieldProps(), { renderNoLabel: true }), h(KolFieldControlStateWrapperFc, Object.assign({ key: '10d2b816d41571778d6e053f5494505a014a3130' }, this.getFieldControlProps(), { renderNoHint: true }), h(KolCheckboxStateWrapperFc, Object.assign({ key: '331f086f4bbf5d136857d117d98215e3e09c2fa1' }, this.getInputProps())))));
     }
     constructor() {
         this.ctaRef = createCtaRef();
@@ -140,6 +140,9 @@ export class KolInputCheckbox {
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
     }
+    validateAriaDetails(value) {
+        this.controller.validateAriaDetails(value);
+    }
     validateChecked(value) {
         this.controller.validateChecked(value);
     }
@@ -196,6 +199,7 @@ export class KolInputCheckbox {
     }
     componentWillLoad() {
         this._touched = this._touched === true;
+        this.validateAriaDetails(this._ariaDetails);
         this.controller.componentWillLoad();
     }
     static get is() { return "kol-input-checkbox"; }
@@ -547,6 +551,31 @@ export class KolInputCheckbox {
                 "attribute": "_required",
                 "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 input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_aria-details"
+            },
             "_shortKey": {
                 "type": "string",
                 "mutable": false,
@@ -783,6 +812,9 @@ export class KolInputCheckbox {
         return [{
                 "propName": "_accessKey",
                 "methodName": "validateAccessKey"
+            }, {
+                "propName": "_ariaDetails",
+                "methodName": "validateAriaDetails"
             }, {
                 "propName": "_checked",
                 "methodName": "validateChecked"

package/dist/collection/components/input-checkbox/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/input-checkbox/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\tCheckedPropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIndeterminatePropType,\n\tInputCheckboxAPI,\n\tInputCheckboxIconsProp,\n\tInputCheckboxStates,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelAlignPropType,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tRequiredPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { InputCheckboxController } from './controller';\n\nimport KolCheckboxStateWrapperFc, { type CheckboxStateWrapperProps } from '../../functional-component-wrappers/CheckboxStateWrapper/CheckboxStateWrapper';\nimport KolFieldControlStateWrapperFc, {\n\ttype FieldControlStateWrapperProps,\n} from '../../functional-component-wrappers/FieldControlStateWrapper/FieldControlStateWrapper';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport type { InputCheckboxVariantPropType } from '../../schema/props/variant-input-checkbox';\nimport { propagateSubmitEventToForm } from '../form/controller';\n\n/**\n * The **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\n *\n * @slot expert - Checkbox description.\n */\n@Component({\n\ttag: 'kol-input-checkbox',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolInputCheckboxElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLInputElement>();\n\n\tprivate getModelValue(): StencilUnknown {\n\t\treturn this._checked ? this.state._value : null;\n\t}\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<StencilUnknown> {\n\t\treturn this.getModelValue();\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-input-checkbox', {\n\t\t\t\t[`kol-input-checkbox--checked`]: this.state._checked,\n\t\t\t\t[`kol-input-checkbox--indeterminate`]: this.state._indeterminate,\n\t\t\t\t[`kol-input-checkbox--variant-${this.state._variant || 'default'}`]: true,\n\t\t\t\t[`kol-input-checkbox--label-align-${this.state._labelAlign || 'right'}`]: true,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t\trenderNoTooltip: true,\n\t\t};\n\t}\n\n\tprivate getFieldControlProps(): FieldControlStateWrapperProps {\n\t\treturn {\n\t\t\tclass: clsx('kol-input-checkbox__field-control', {\n\t\t\t\t[`kol-input-checkbox__field-control--checked`]: this.state._checked,\n\t\t\t\t[`kol-input-checkbox__field-control--indeterminate`]: this.state._indeterminate,\n\t\t\t\t[`kol-input-checkbox__field-control--variant-${this.state._variant || 'default'}`]: true,\n\t\t\t}),\n\t\t\tstate: this.state,\n\t\t\t// Prevent blur/focus cycling when clicking the visible text label while\n\t\t\t// the checkbox is already focused (Shadow DOM htmlFor-label quirk).\n\t\t\tfieldControlLabelProps: {\n\t\t\t\tonMouseDown: (e: Event) => {\n\t\t\t\t\tif (this.inputHasFocus) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate getInputProps(): CheckboxStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\ticon: this.getIcon(),\n\t\t\t// Prevent blur/focus cycling when clicking the icon area while the checkbox\n\t\t\t// is already focused. Text-label clicks are handled via fieldControlLabelProps.\n\t\t\tonMouseDown: (e: Event) => {\n\t\t\t\tif (this.inputHasFocus && !(e.target instanceof HTMLInputElement)) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t}\n\t\t\t},\n\t\t\tinputProps: {\n\t\t\t\tclass: clsx({\n\t\t\t\t\t'visually-hidden': this.state._variant === 'button',\n\t\t\t\t}),\n\t\t\t\tref: this.ctaRef,\n\t\t\t\t...this.controller.onFacade,\n\t\t\t\tonInput: this.onInput,\n\t\t\t\tonChange: this.onChange,\n\t\t\t\tonKeyDown: this.onKeyDown,\n\t\t\t\tonFocus: (event: Event) => {\n\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t},\n\t\t\t\tonBlur: (event: Event) => {\n\t\t\t\t\tif (this._disabled) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t},\n\t\t\t\tonClick: undefined, // onClick is not needed since onChange already triggers the correct event\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate getIcon(): string {\n\t\tif (this.state._indeterminate) return this.state._icons.indeterminate;\n\t\tif (this.state._checked) return this.state._icons.checked;\n\t\treturn this.state._icons.unchecked;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()} renderNoLabel>\n\t\t\t\t<KolFieldControlStateWrapperFc {...this.getFieldControlProps()} renderNoHint>\n\t\t\t\t\t<KolCheckboxStateWrapperFc {...this.getInputProps()} />\n\t\t\t\t</KolFieldControlStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputCheckboxController;\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 * Defines whether the checkbox is checked or not. Can be read and written.\n\t * @TODO: Change type back to `CheckedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _checked?: 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 * 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 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?: Stringified<InputCheckboxIconsProp>;\n\n\t/**\n\t * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n\t * @TODO: Change type back to `IndeterminatePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _indeterminate?: boolean;\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 which alignment should be used for presentation.\n\t */\n\t@Prop() public _labelAlign?: LabelAlignPropType = 'right';\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 * 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 * 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 * 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() public _value: StencilUnknown = true;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: InputCheckboxVariantPropType = 'default';\n\n\t@State() public state: InputCheckboxStates = {\n\t\t_checked: false,\n\t\t_hideMsg: false,\n\t\t_icons: {\n\t\t\tchecked: 'kolicon-check',\n\t\t\tindeterminate: 'kolicon-minus',\n\t\t\tunchecked: 'kolicon-cross',\n\t\t},\n\t\t_id: createUniqueId('input-checkbox'),\n\t\t_indeterminate: false,\n\t\t_label: '', // ⚠ required\n\t\t_value: true,\n\t\t_variant: 'default',\n\t\t_labelAlign: 'right',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputCheckboxController(this, 'checkbox', 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('_checked')\n\tpublic validateChecked(value?: CheckedPropType): void {\n\t\tthis.controller.validateChecked(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('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<InputCheckboxIconsProp>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_indeterminate')\n\tpublic validateIndeterminate(value?: IndeterminatePropType): void {\n\t\tthis.controller.validateIndeterminate(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('_labelAlign')\n\tpublic validateLabelAlign(value?: LabelAlignPropType): void {\n\t\tthis.controller.validateLabelAlign(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('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(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('_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: StencilUnknown): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: InputCheckboxVariantPropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate onInput = (event: Event): void => {\n\t\tthis._checked = !this._checked;\n\t\tthis._indeterminate = false;\n\t\tconst value = this.getModelValue();\n\t\tthis.controller.onFacade.onInput(event, false, value);\n\t\tthis.controller.setFormAssociatedCheckboxValue(value);\n\t};\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis.controller.onFacade.onChange(event, this.getModelValue());\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tthis.controller.onFacade.onKeyDown(event);\n\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ctaRef.el,\n\t\t\t});\n\t\t}\n\t};\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/input-checkbox/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\tAriaDetailsPropType,\n\tCheckedPropType,\n\tClickableElement,\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIndeterminatePropType,\n\tInputCheckboxAPI,\n\tInputCheckboxIconsProp,\n\tInputCheckboxStates,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelAlignPropType,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tRequiredPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { InputCheckboxController } from './controller';\n\nimport KolCheckboxStateWrapperFc, { type CheckboxStateWrapperProps } from '../../functional-component-wrappers/CheckboxStateWrapper/CheckboxStateWrapper';\nimport KolFieldControlStateWrapperFc, {\n\ttype FieldControlStateWrapperProps,\n} from '../../functional-component-wrappers/FieldControlStateWrapper/FieldControlStateWrapper';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport type { InputCheckboxVariantPropType } from '../../schema/props/variant-input-checkbox';\nimport { propagateSubmitEventToForm } from '../form/controller';\n\n/**\n * The **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.\n *\n * @slot expert - Checkbox description.\n */\n@Component({\n\ttag: 'kol-input-checkbox',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputCheckbox implements ClickableElement, FocusableElement, InputCheckboxAPI {\n\t@Element() protected readonly host?: HTMLKolInputCheckboxElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLInputElement>();\n\n\tprivate getModelValue(): StencilUnknown {\n\t\treturn this._checked ? this.state._value : null;\n\t}\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<StencilUnknown> {\n\t\treturn this.getModelValue();\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-input-checkbox', {\n\t\t\t\t[`kol-input-checkbox--checked`]: this.state._checked,\n\t\t\t\t[`kol-input-checkbox--indeterminate`]: this.state._indeterminate,\n\t\t\t\t[`kol-input-checkbox--variant-${this.state._variant || 'default'}`]: true,\n\t\t\t\t[`kol-input-checkbox--label-align-${this.state._labelAlign || 'right'}`]: true,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t\trenderNoTooltip: true,\n\t\t};\n\t}\n\n\tprivate getFieldControlProps(): FieldControlStateWrapperProps {\n\t\treturn {\n\t\t\tclass: clsx('kol-input-checkbox__field-control', {\n\t\t\t\t[`kol-input-checkbox__field-control--checked`]: this.state._checked,\n\t\t\t\t[`kol-input-checkbox__field-control--indeterminate`]: this.state._indeterminate,\n\t\t\t\t[`kol-input-checkbox__field-control--variant-${this.state._variant || 'default'}`]: true,\n\t\t\t}),\n\t\t\tstate: this.state,\n\t\t\t// Prevent blur/focus cycling when clicking the visible text label while\n\t\t\t// the checkbox is already focused (Shadow DOM htmlFor-label quirk).\n\t\t\tfieldControlLabelProps: {\n\t\t\t\tonMouseDown: (e: Event) => {\n\t\t\t\t\tif (this.inputHasFocus) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate getInputProps(): CheckboxStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\ticon: this.getIcon(),\n\t\t\t// Prevent blur/focus cycling when clicking the icon area while the checkbox\n\t\t\t// is already focused. Text-label clicks are handled via fieldControlLabelProps.\n\t\t\tonMouseDown: (e: Event) => {\n\t\t\t\tif (this.inputHasFocus && !(e.target instanceof HTMLInputElement)) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t}\n\t\t\t},\n\t\t\tinputProps: {\n\t\t\t\tclass: clsx({\n\t\t\t\t\t'visually-hidden': this.state._variant === 'button',\n\t\t\t\t}),\n\t\t\t\tref: this.ctaRef,\n\t\t\t\t...this.controller.onFacade,\n\t\t\t\tonInput: this.onInput,\n\t\t\t\tonChange: this.onChange,\n\t\t\t\tonKeyDown: this.onKeyDown,\n\t\t\t\tonFocus: (event: FocusEvent) => {\n\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t},\n\t\t\t\tonBlur: (event: FocusEvent) => {\n\t\t\t\t\tif (this._disabled) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t},\n\t\t\t\tonClick: undefined, // onClick is not needed since onChange already triggers the correct event\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate getIcon(): string {\n\t\tif (this.state._indeterminate) return this.state._icons.indeterminate;\n\t\tif (this.state._checked) return this.state._icons.checked;\n\t\treturn this.state._icons.unchecked;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()} renderNoLabel>\n\t\t\t\t<KolFieldControlStateWrapperFc {...this.getFieldControlProps()} renderNoHint>\n\t\t\t\t\t<KolCheckboxStateWrapperFc {...this.getInputProps()} />\n\t\t\t\t</KolFieldControlStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputCheckboxController;\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 * Defines whether the checkbox is checked or not. Can be read and written.\n\t * @TODO: Change type back to `CheckedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _checked?: 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 * 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 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?: Stringified<InputCheckboxIconsProp>;\n\n\t/**\n\t * Puts the checkbox in the indeterminate state, does not change the value of _checked.\n\t * @TODO: Change type back to `IndeterminatePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _indeterminate?: boolean;\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 which alignment should be used for presentation.\n\t */\n\t@Prop() public _labelAlign?: LabelAlignPropType = 'right';\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 * 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 * References an external element by ID that provides accessible details for this input.\n\t * Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\n\t * Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\n\t * Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS).\n\t */\n\t@Prop() public _ariaDetails?: AriaDetailsPropType;\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 * 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() public _value: StencilUnknown = true;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: InputCheckboxVariantPropType = 'default';\n\n\t@State() public state: InputCheckboxStates = {\n\t\t_checked: false,\n\t\t_hideMsg: false,\n\t\t_icons: {\n\t\t\tchecked: 'kolicon-check',\n\t\t\tindeterminate: 'kolicon-minus',\n\t\t\tunchecked: 'kolicon-cross',\n\t\t},\n\t\t_id: createUniqueId('input-checkbox'),\n\t\t_indeterminate: false,\n\t\t_label: '', // ⚠ required\n\t\t_value: true,\n\t\t_variant: 'default',\n\t\t_labelAlign: 'right',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputCheckboxController(this, 'checkbox', 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('_ariaDetails')\n\tpublic validateAriaDetails(value?: AriaDetailsPropType): void {\n\t\tthis.controller.validateAriaDetails(value);\n\t}\n\n\t@Watch('_checked')\n\tpublic validateChecked(value?: CheckedPropType): void {\n\t\tthis.controller.validateChecked(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('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<InputCheckboxIconsProp>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_indeterminate')\n\tpublic validateIndeterminate(value?: IndeterminatePropType): void {\n\t\tthis.controller.validateIndeterminate(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('_labelAlign')\n\tpublic validateLabelAlign(value?: LabelAlignPropType): void {\n\t\tthis.controller.validateLabelAlign(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('_required')\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tthis.controller.validateRequired(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('_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: StencilUnknown): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: InputCheckboxVariantPropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.validateAriaDetails(this._ariaDetails);\n\t\tthis.controller.componentWillLoad();\n\t}\n\n\tprivate onInput = (event: Event): void => {\n\t\tthis._checked = !this._checked;\n\t\tthis._indeterminate = false;\n\t\tconst value = this.getModelValue();\n\t\tthis.controller.onFacade.onInput(event, false, value);\n\t\tthis.controller.setFormAssociatedCheckboxValue(value);\n\t};\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis.controller.onFacade.onChange(event, this.getModelValue());\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tthis.controller.onFacade.onKeyDown(event);\n\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ctaRef.el,\n\t\t\t});\n\t\t}\n\t};\n}\n"]}

package/dist/collection/components/input-checkbox/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-field-control {
@@ -478,10 +483,8 @@
   .kol-field-control--disabled .kol-field-control__label {
     cursor: not-allowed;
   }
-  .kol-field-control--required .kol-field-control__label-text::after {
-    content: "*"/"";
-  }
-  .kol-field-control--required .kol-tooltip .kol-span__label::after {
+  .kol-field-control--required .kol-field-control__label-text:has(.kol-span__slot[hidden])::after,
+  .kol-field-control--required .kol-field-control .kol-tooltip__content .kol-span__label::after {
     content: "*"/"";
   }
   .kol-icon {

package/dist/collection/components/input-color/shadow.js

@@ -37,7 +37,7 @@ export class KolInputColor {
         return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, this.state), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: 'adb97997a69b95b95f6d557f8ea2a2ff9e70b7c5' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: 'c7f33567319db068d7a70a6995874b152d710710', state: this.state, class: "kol-input-color__inputs-wrapper" }, h("div", { key: '49ac20fe8a0b14a2725033fc617cb33599111acd', class: "kol-input-color__inputs-wrapper" }, h(KolInputStateWrapperFc, Object.assign({ key: 'afb898f5689dcd503307d38d9b648a9469136478', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), h(KolInputStateWrapperFc, Object.assign({ key: 'dda7c8a3e9ad30741fc0e5f8122be124acf476a0', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '1820310cf40b91e5a8e0c6ef843a5df1b2f2f491' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '4f2ebd57878fe5754b6ec99a08c749ba36f97bb5', state: this.state, class: "kol-input-color__inputs-wrapper" }, h("div", { key: '6769fd4c2e758a5fc27736abbfb5dc8f2a18d368', class: "kol-input-color__inputs-wrapper" }, h(KolInputStateWrapperFc, Object.assign({ key: '4625bea3279a0c4e35da9080b92e9ef2077f69bf', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), h(KolInputStateWrapperFc, Object.assign({ key: '60d489cdd2c0bbfb29a56a25ecea2dc7d5fb3bcf', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
     }
     constructor() {
         this.ctaRef = createCtaRef();
@@ -93,6 +93,9 @@ export class KolInputColor {
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
     }
+    validateAriaDetails(value) {
+        this.controller.validateAriaDetails(value);
+    }
     validateAutoComplete(value) {
         this.controller.validateAutoComplete(value);
     }
@@ -151,6 +154,7 @@ export class KolInputColor {
     }
     componentWillLoad() {
         this._touched = this._touched === true;
+        this.validateAriaDetails(this._ariaDetails);
         this.controller.componentWillLoad();
     }
     static get is() { return "kol-input-color"; }
@@ -186,6 +190,31 @@ export class KolInputColor {
                 "reflect": false,
                 "attribute": "_access-key"
             },
+            "_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 input.\nUses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\nSupported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\nNot yet supported by mobile screen readers (TalkBack, VoiceOver iOS)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_aria-details"
+            },
             "_autoComplete": {
                 "type": "string",
                 "mutable": false,
@@ -707,6 +736,9 @@ export class KolInputColor {
         return [{
                 "propName": "_accessKey",
                 "methodName": "validateAccessKey"
+            }, {
+                "propName": "_ariaDetails",
+                "methodName": "validateAriaDetails"
             }, {
                 "propName": "_autoComplete",
                 "methodName": "validateAutoComplete"