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

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/input-password/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX, VNode } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from '../../utils/clsx';\n\nimport type {\n\tAutoCompletePropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputPasswordAPI,\n\tInputPasswordStates,\n\tInputTypeOnDefault,\n\tInternalButtonProps,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tShortKeyPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n\tVisibilityTogglePropType,\n} from '../../schema';\nimport { devHint } from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport KolIconButtonFc from '../../functional-components/IconButton';\nimport { translate } from '../../i18n';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { InputPasswordController } from './controller';\n\n/**\n * The **Password** input type creates an input field for passwords. The input is masked with dot symbols.\n *\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-input-password',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputPassword implements InputPasswordAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolInputPasswordElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLInputElement>();\n\n\tprivate readonly translateHidePassword = translate('kol-hide-password');\n\tprivate readonly translateShowPassword = translate('kol-show-password');\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 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\tprivate readonly onInput = (event: InputEvent) => {\n\t\tthis._value = (event.target as HTMLInputElement).value;\n\t\tthis.controller.onFacade.onInput(event);\n\t};\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-password', 'password', {\n\t\t\t\t'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 getInputProps(): InputStateWrapperProps {\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\t// TODO v5: remove `_variant === 'visibility-toggle'` backwards-compat fallback\n\t\t\ttype: (this.state._visibilityToggle || this.state._variant === 'visibility-toggle') && this._passwordVisible ? 'text' : 'password',\n\t\t\tstate: this.state,\n\t\t\tariaDescribedBy,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonKeyDown: this.onKeyDown,\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\tprivate getShowPasswordButton(): VNode | null {\n\t\t// TODO v5: remove `_variant === 'visibility-toggle'` backwards-compat fallback\n\t\tif (this.state._visibilityToggle || this.state._variant === 'visibility-toggle') {\n\t\t\treturn (\n\t\t\t\t<KolIconButtonFc\n\t\t\t\t\tcomponentName=\"button\"\n\t\t\t\t\tclass=\"kol-input-password__password-toggle-button kol-input-container__smart-button\"\n\t\t\t\t\tdata-testid=\"kol-input-password-toggle-button\"\n\t\t\t\t\tlabel={this._passwordVisible ? this.translateHidePassword : this.translateShowPassword}\n\t\t\t\t\tbuttonVariant=\"ghost\"\n\t\t\t\t\tonClick={(): void => {\n\t\t\t\t\t\tthis._passwordVisible = !this._passwordVisible;\n\t\t\t\t\t\tthis.ctaRef.el?.focus();\n\t\t\t\t\t}}\n\t\t\t\t\ticon={`${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`}\n\t\t\t\t\tdisabled={this._disabled}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn null;\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} endAdornment={this.getShowPasswordButton()}>\n\t\t\t\t\t<KolInputStateWrapperFc {...this.getInputProps()} />\n\t\t\t\t</KolInputContainerStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputPasswordController;\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 input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: AutoCompletePropType = 'off';\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 * 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 * 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 a validation pattern for the input field.\n\t */\n\t@Prop() public _pattern?: string;\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 * 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 * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<InternalButtonProps>;\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/**\n\t * Activates the show password button\n\t */\n\t@Prop() public _visibilityToggle?: VisibilityTogglePropType = false;\n\n\t@State() public state: InputPasswordStates = {\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('input-password'),\n\t\t_label: '', // ⚠ required\n\t\t_visibilityToggle: false,\n\t};\n\t@State() private _passwordVisible: boolean = false;\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputPasswordController(this, 'password', 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('_autoComplete')\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t\tif (value === 'on') {\n\t\t\tdevHint(`[KolInputPassword] The 'autocomplete' option should not be set to \"on\" for a password input field`);\n\t\t}\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('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(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('_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('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(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('_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('_smartButton')\n\tpublic validateSmartButton(value?: InternalButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(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('_visibilityToggle')\n\tpublic validateVisibilityToggle(value?: boolean): void {\n\t\tthis.controller.validateVisibilityToggle(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/input-password/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX, VNode } 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\tAutoCompletePropType,\n\tClickableElement,\n\tDisabledPropType,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputPasswordAPI,\n\tInputPasswordStates,\n\tInputTypeOnDefault,\n\tInternalButtonProps,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tShortKeyPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n\tVisibilityTogglePropType,\n} from '../../schema';\nimport { devHint } from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport KolIconButtonFc from '../../functional-components/IconButton';\nimport { translate } from '../../i18n';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { InputPasswordController } from './controller';\n\n/**\n * The **Password** input type creates an input field for passwords. The input is masked with dot symbols.\n *\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-input-password',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputPassword implements ClickableElement, FocusableElement, InputPasswordAPI {\n\t@Element() protected readonly host?: HTMLKolInputPasswordElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLInputElement>();\n\n\tprivate readonly translateHidePassword = translate('kol-hide-password');\n\tprivate readonly translateShowPassword = translate('kol-show-password');\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 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\tprivate readonly onInput = (event: InputEvent) => {\n\t\tthis._value = (event.target as HTMLInputElement).value;\n\t\tthis.controller.onFacade.onInput(event);\n\t};\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-password', 'password', {\n\t\t\t\t'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 getInputProps(): InputStateWrapperProps {\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\t// TODO v5: remove `_variant === 'visibility-toggle'` backwards-compat fallback\n\t\t\ttype: (this.state._visibilityToggle || this.state._variant === 'visibility-toggle') && this._passwordVisible ? 'text' : 'password',\n\t\t\tstate: this.state,\n\t\t\tariaDescribedBy,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonKeyDown: this.onKeyDown,\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\tprivate getShowPasswordButton(): VNode | null {\n\t\t// TODO v5: remove `_variant === 'visibility-toggle'` backwards-compat fallback\n\t\tif (this.state._visibilityToggle || this.state._variant === 'visibility-toggle') {\n\t\t\treturn (\n\t\t\t\t<KolIconButtonFc\n\t\t\t\t\tcomponentName=\"button\"\n\t\t\t\t\tclass=\"kol-input-password__password-toggle-button kol-input-container__smart-button\"\n\t\t\t\t\tdata-testid=\"kol-input-password-toggle-button\"\n\t\t\t\t\tlabel={this._passwordVisible ? this.translateHidePassword : this.translateShowPassword}\n\t\t\t\t\tbuttonVariant=\"ghost\"\n\t\t\t\t\tonClick={(): void => {\n\t\t\t\t\t\tthis._passwordVisible = !this._passwordVisible;\n\t\t\t\t\t\tthis.ctaRef.el?.focus();\n\t\t\t\t\t}}\n\t\t\t\t\ticon={`${this._passwordVisible ? 'kolicon-eye-closed' : 'kolicon-eye'}`}\n\t\t\t\t\tdisabled={this._disabled}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn null;\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} endAdornment={this.getShowPasswordButton()}>\n\t\t\t\t\t<KolInputStateWrapperFc {...this.getInputProps()} />\n\t\t\t\t</KolInputContainerStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputPasswordController;\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 * 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 * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: AutoCompletePropType = 'off';\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 * 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 * 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 a validation pattern for the input field.\n\t */\n\t@Prop() public _pattern?: string;\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 * 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 * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<InternalButtonProps>;\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/**\n\t * Activates the show password button\n\t */\n\t@Prop() public _visibilityToggle?: VisibilityTogglePropType = false;\n\n\t@State() public state: InputPasswordStates = {\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('input-password'),\n\t\t_label: '', // ⚠ required\n\t\t_visibilityToggle: false,\n\t};\n\t@State() private _passwordVisible: boolean = false;\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputPasswordController(this, 'password', 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('_autoComplete')\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t\tif (value === 'on') {\n\t\t\tdevHint(`[KolInputPassword] The 'autocomplete' option should not be set to \"on\" for a password input field`);\n\t\t}\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('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(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('_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('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(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('_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('_smartButton')\n\tpublic validateSmartButton(value?: InternalButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(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('_visibilityToggle')\n\tpublic validateVisibilityToggle(value?: boolean): void {\n\t\tthis.controller.validateVisibilityToggle(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\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n}\n"]}

package/dist/collection/components/input-password/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/input-radio/shadow.js

@@ -57,7 +57,7 @@ export class KolInputRadio {
         };
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '8492634fff44e29606e77b7864aebfc9b5fec7f6' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '78fdfdda4386d8d2a010ab360293587ecaa4032d' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
     }
     calculateDisabled(option) {
         return Boolean(this.state._disabled) || Boolean(option.disabled);
@@ -161,6 +161,9 @@ export class KolInputRadio {
     validateTooltipAlign(value) {
         this.controller.validateTooltipAlign(value);
     }
+    validateAriaDetails(value) {
+        this.controller.validateAriaDetails(value);
+    }
     validateDisabled(value) {
         this.controller.validateDisabled(value);
     }
@@ -208,6 +211,7 @@ export class KolInputRadio {
     }
     componentWillLoad() {
         this._touched = this._touched === true;
+        this.validateAriaDetails(this._ariaDetails);
         this.controller.componentWillLoad();
     }
     static get is() { return "kol-input-radio"; }
@@ -224,6 +228,31 @@ export class KolInputRadio {
     }
     static get properties() {
         return {
+            "_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"
+            },
             "_disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -703,6 +732,9 @@ export class KolInputRadio {
         return [{
                 "propName": "_tooltipAlign",
                 "methodName": "validateTooltipAlign"
+            }, {
+                "propName": "_ariaDetails",
+                "methodName": "validateAriaDetails"
             }, {
                 "propName": "_disabled",
                 "methodName": "validateDisabled"

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/input-radio/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\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tInputRadioAPI,\n\tInputRadioStates,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tRadioOption,\n\tRadioOptionsPropType,\n\tRequiredPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { delegateClick, setClick } from '../../utils/element-click';\nimport { delegateFocus, setFocus } from '../../utils/element-focus';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { InputRadioController } from './controller';\n\nimport KolFieldControlStateWrapperFc, {\n\ttype FieldControlStateWrapperProps,\n} from '../../functional-component-wrappers/FieldControlStateWrapper/FieldControlStateWrapper';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolRadioStateWrapperFc, { type RadioStateWrapperProps } from '../../functional-component-wrappers/RadioStateWrapper/RadioStateWrapper';\nimport type { OrientationPropType } from '../../schema/props/orientation';\n\n/**\n * The **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n *\n * @slot - The legend/heading of the radio buttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements InputRadioAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\tprivate inputRef?: HTMLInputElement;\n\tprivate inputRefs = new Map<number, HTMLInputElement>();\n\n\tprivate readonly setInputRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\tprivate readonly setInputRefByIndex = (index: number) => (ref?: HTMLInputElement) => {\n\t\tif (ref) {\n\t\t\tthis.inputRefs.set(index, ref);\n\t\t} else {\n\t\t\tthis.inputRefs.delete(index);\n\t\t}\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._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus(options?: KolFocusOptions) {\n\t\tconst input = this.getFocusableInput();\n\t\treturn delegateFocus(this.host!, () => setFocus(input, options));\n\t}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\tpublic async click(): Promise<void> {\n\t\treturn delegateClick(this.host!, async () => setClick(this.inputRef!));\n\t}\n\n\tprivate getFocusableInput(): HTMLInputElement | undefined {\n\t\tconst options = this.state._options;\n\t\tconst isComponentDisabled = Boolean(this.state._disabled);\n\n\t\t// Find the index of the selected option if it's not disabled\n\t\tconst selectedIndex = options.findIndex((option) => option.value === this.state._value && !isComponentDisabled && !option.disabled);\n\n\t\tif (selectedIndex !== -1) {\n\t\t\tconst input = this.inputRefs.get(selectedIndex);\n\t\t\tif (input) {\n\t\t\t\treturn input;\n\t\t\t}\n\t\t}\n\n\t\t// Otherwise find the first non-disabled option\n\t\tconst firstEnabledIndex = options.findIndex((option) => !isComponentDisabled && !option.disabled);\n\n\t\tif (firstEnabledIndex !== -1) {\n\t\t\treturn this.inputRefs.get(firstEnabledIndex);\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tcomponent: 'fieldset',\n\t\t\tdisabled: Boolean(this.state._disabled),\n\t\t\tclass: clsx('kol-form-field--radio'),\n\t\t\tformFieldLabelProps: {\n\t\t\t\tcomponent: 'legend',\n\t\t\t\tclass: 'kol-form-field__label--legend',\n\t\t\t},\n\t\t\tformFieldInputProps: {\n\t\t\t\tclass: `kol-form-field__input--orientation-${this.state._orientation}`,\n\t\t\t},\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t\thideLabel: false,\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{this.state._options.map((option, index) => this.renderOption(option, index))}\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate calculateDisabled(option: RadioOption<StencilUnknown>): boolean {\n\t\treturn Boolean(this.state._disabled) || Boolean(option.disabled);\n\t}\n\n\tprivate getOptionProps(option: RadioOption<StencilUnknown>, id: string): FieldControlStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tid: id,\n\t\t\thint: option.hint,\n\t\t\tlabel: option.label as string,\n\t\t\trequired: false,\n\t\t\tfieldControlLabelProps: {\n\t\t\t\tshowBadge: false,\n\t\t\t},\n\t\t\tdisabled: this.calculateDisabled(option),\n\t\t};\n\t}\n\n\tprivate getInputProps(option: RadioOption<StencilUnknown>, id: string, index: number, selected: boolean): RadioStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tinputProps: {\n\t\t\t\tid: id,\n\t\t\t\tref: (ref?: HTMLInputElement) => {\n\t\t\t\t\tthis.setInputRefByIndex(index)(ref);\n\t\t\t\t\tif (selected) {\n\t\t\t\t\t\tthis.setInputRef(ref);\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined,\n\t\t\t\ttype: 'radio',\n\t\t\t\tname: this.state._name || this.state._id,\n\t\t\t\tvalue: `-${index}`,\n\t\t\t\tchecked: selected,\n\t\t\t\tdisabled: this.calculateDisabled(option),\n\n\t\t\t\t...this.controller.onFacade,\n\t\t\t\tonChange: this.onChange,\n\t\t\t\tonClick: undefined, // onClick is not needed since onChange already triggers the correct event\n\t\t\t\tonInput: this.onInput,\n\t\t\t\tonKeyDown: this.onKeyDown.bind(this),\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\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate renderOption(option: RadioOption<StencilUnknown>, index: number): JSX.Element {\n\t\tconst customId = createRelatedUniqueId(this.state._id, String(index));\n\t\tconst selected = this.state._value === option.value;\n\n\t\treturn (\n\t\t\t<KolFieldControlStateWrapperFc key={customId} {...this.getOptionProps(option, customId)}>\n\t\t\t\t<KolRadioStateWrapperFc {...this.getInputProps(option, customId, index, selected)} />\n\t\t\t</KolFieldControlStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\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 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 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 * Options the user can choose from.\n\t */\n\t@Prop() public _options?: RadioOptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType = '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 * 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 * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value: StencilUnknown = null;\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: InputRadioStates = {\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('input-radio'),\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tthis.controller.validateTooltipAlign(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('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(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('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(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('_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('_options')\n\tpublic validateOptions(value?: RadioOptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\tthis.controller.validateOrientation(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('_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?: VariantClassNamePropType): 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\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.onFacade.onInput(event, true, option.value);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.onFacade.onChange(event, option.value);\n\n\t\t\t\tthis._value = option.value;\n\t\t\t}\n\t\t}\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.inputRef,\n\t\t\t});\n\t\t}\n\t};\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/input-radio/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\tClickableElement,\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tInputRadioAPI,\n\tInputRadioStates,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tRadioOption,\n\tRadioOptionsPropType,\n\tRequiredPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { delegateClick, setClick } from '../../utils/element-click';\nimport { delegateFocus, setFocus } from '../../utils/element-focus';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { InputRadioController } from './controller';\n\nimport KolFieldControlStateWrapperFc, {\n\ttype FieldControlStateWrapperProps,\n} from '../../functional-component-wrappers/FieldControlStateWrapper/FieldControlStateWrapper';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolRadioStateWrapperFc, { type RadioStateWrapperProps } from '../../functional-component-wrappers/RadioStateWrapper/RadioStateWrapper';\nimport type { OrientationPropType } from '../../schema/props/orientation';\n\n/**\n * The **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.\n *\n * @slot - The legend/heading of the radio buttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements ClickableElement, FocusableElement, InputRadioAPI {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\tprivate inputRef?: HTMLInputElement;\n\tprivate inputRefs = new Map<number, HTMLInputElement>();\n\n\tprivate readonly setInputRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\tprivate readonly setInputRefByIndex = (index: number) => (ref?: HTMLInputElement) => {\n\t\tif (ref) {\n\t\t\tthis.inputRefs.set(index, ref);\n\t\t} else {\n\t\t\tthis.inputRefs.delete(index);\n\t\t}\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._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\tpublic async focus(options?: KolFocusOptions) {\n\t\tconst input = this.getFocusableInput();\n\t\treturn delegateFocus(this.host!, () => setFocus(input, options));\n\t}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\tpublic async click(): Promise<void> {\n\t\treturn delegateClick(this.host!, async () => setClick(this.inputRef!));\n\t}\n\n\tprivate getFocusableInput(): HTMLInputElement | undefined {\n\t\tconst options = this.state._options;\n\t\tconst isComponentDisabled = Boolean(this.state._disabled);\n\n\t\t// Find the index of the selected option if it's not disabled\n\t\tconst selectedIndex = options.findIndex((option) => option.value === this.state._value && !isComponentDisabled && !option.disabled);\n\n\t\tif (selectedIndex !== -1) {\n\t\t\tconst input = this.inputRefs.get(selectedIndex);\n\t\t\tif (input) {\n\t\t\t\treturn input;\n\t\t\t}\n\t\t}\n\n\t\t// Otherwise find the first non-disabled option\n\t\tconst firstEnabledIndex = options.findIndex((option) => !isComponentDisabled && !option.disabled);\n\n\t\tif (firstEnabledIndex !== -1) {\n\t\t\treturn this.inputRefs.get(firstEnabledIndex);\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tcomponent: 'fieldset',\n\t\t\tdisabled: Boolean(this.state._disabled),\n\t\t\tclass: clsx('kol-form-field--radio'),\n\t\t\tformFieldLabelProps: {\n\t\t\t\tcomponent: 'legend',\n\t\t\t\tclass: 'kol-form-field__label--legend',\n\t\t\t},\n\t\t\tformFieldInputProps: {\n\t\t\t\tclass: `kol-form-field__input--orientation-${this.state._orientation}`,\n\t\t\t},\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t\thideLabel: false,\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{this.state._options.map((option, index) => this.renderOption(option, index))}\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate calculateDisabled(option: RadioOption<StencilUnknown>): boolean {\n\t\treturn Boolean(this.state._disabled) || Boolean(option.disabled);\n\t}\n\n\tprivate getOptionProps(option: RadioOption<StencilUnknown>, id: string): FieldControlStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tid: id,\n\t\t\thint: option.hint,\n\t\t\tlabel: option.label as string,\n\t\t\trequired: false,\n\t\t\tfieldControlLabelProps: {\n\t\t\t\tshowBadge: false,\n\t\t\t},\n\t\t\tdisabled: this.calculateDisabled(option),\n\t\t};\n\t}\n\n\tprivate getInputProps(option: RadioOption<StencilUnknown>, id: string, index: number, selected: boolean): RadioStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tinputProps: {\n\t\t\t\tid: id,\n\t\t\t\tref: (ref?: HTMLInputElement) => {\n\t\t\t\t\tthis.setInputRefByIndex(index)(ref);\n\t\t\t\t\tif (selected) {\n\t\t\t\t\t\tthis.setInputRef(ref);\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined,\n\t\t\t\ttype: 'radio',\n\t\t\t\tname: this.state._name || this.state._id,\n\t\t\t\tvalue: `-${index}`,\n\t\t\t\tchecked: selected,\n\t\t\t\tdisabled: this.calculateDisabled(option),\n\n\t\t\t\t...this.controller.onFacade,\n\t\t\t\tonChange: this.onChange,\n\t\t\t\tonClick: undefined, // onClick is not needed since onChange already triggers the correct event\n\t\t\t\tonInput: this.onInput,\n\t\t\t\tonKeyDown: this.onKeyDown.bind(this),\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\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate renderOption(option: RadioOption<StencilUnknown>, index: number): JSX.Element {\n\t\tconst customId = createRelatedUniqueId(this.state._id, String(index));\n\t\tconst selected = this.state._value === option.value;\n\n\t\treturn (\n\t\t\t<KolFieldControlStateWrapperFc key={customId} {...this.getOptionProps(option, customId)}>\n\t\t\t\t<KolRadioStateWrapperFc {...this.getInputProps(option, customId, index, selected)} />\n\t\t\t</KolFieldControlStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\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 * 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 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 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 * Options the user can choose from.\n\t */\n\t@Prop() public _options?: RadioOptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType = '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 * 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 * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value: StencilUnknown = null;\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: InputRadioStates = {\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('input-radio'),\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tthis.controller.validateTooltipAlign(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('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(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('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(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('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(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('_options')\n\tpublic validateOptions(value?: RadioOptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\tthis.controller.validateOrientation(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('_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?: VariantClassNamePropType): 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\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.onFacade.onInput(event, true, option.value);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.onFacade.onChange(event, option.value);\n\n\t\t\t\tthis._value = option.value;\n\t\t\t}\n\t\t}\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.inputRef,\n\t\t\t});\n\t\t}\n\t};\n}\n"]}

package/dist/collection/components/input-radio/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-"] {
@@ -463,10 +468,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-form-field {
@@ -481,7 +484,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/input-range/shadow.js

@@ -79,10 +79,11 @@ export class KolInputRange {
         }
     }
     render() {
+        var _a, _b;
         const inputsWrapperStyle = {
-            '--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
+            '--kolibri-input-range--input-number--width': `calc(${Math.max(String((_a = this.state._max) !== null && _a !== void 0 ? _a : 100).length, String((_b = this.state._min) !== null && _b !== void 0 ? _b : 0).length, 4)}ch + 2em)`,
         };
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '9d235aa31440e43482cb463b1b475aeb68a9dd94' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '78e85141f986e8e050d0b274880a9dac5e74b65f', state: this.state }, h("div", { key: 'f4f9abc28b36455d07f417c57925beda6ae0fb6b', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, h(KolInputStateWrapperFc, Object.assign({ key: 'bd3a29d4535ed31fc57604c8a62c9f6380d5b35d', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), h(KolInputStateWrapperFc, Object.assign({ key: '7da3cd0db585db871fb2b95af78be4971a7aa8ff', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && h(KolSuggestionsFc, { key: 'fbe44f4147118da156d43d4b8f98843db9325869', id: this.state._id, suggestions: this.state._suggestions }))));
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '976da4c458a376af3ae6f6f103c4d450e05d768d' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '7e5abf2bd7ea68b8c8955f825483d6624aabb9ed', state: this.state }, h("div", { key: 'cc49bcec37b1703efdb71aa74ddc536d04b37c8d', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, h(KolInputStateWrapperFc, Object.assign({ key: 'f9527d9515d9fb3f3d0e53b6885337c26b400d37', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), h(KolInputStateWrapperFc, Object.assign({ key: 'd41e09a3ace1204169e2e2594724ba12cd73f0a7', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && h(KolSuggestionsFc, { key: 'f63013002b6d2b504562630df901e7e6a94ccc89', id: this.state._id, suggestions: this.state._suggestions }))));
     }
     constructor() {
         this.ctaRef = createCtaRef();
@@ -147,6 +148,9 @@ export class KolInputRange {
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
     }
+    validateAriaDetails(value) {
+        this.controller.validateAriaDetails(value);
+    }
     validateAutoComplete(value) {
         this.controller.validateAutoComplete(value);
     }
@@ -212,6 +216,7 @@ export class KolInputRange {
             this.setInitialValueType(this._value);
         }
         this._touched = this._touched === true;
+        this.validateAriaDetails(this._ariaDetails);
         this.controller.componentWillLoad();
     }
     static get is() { return "kol-input-range"; }
@@ -247,6 +252,31 @@ export class KolInputRange {
                 "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,
@@ -827,6 +857,9 @@ export class KolInputRange {
         return [{
                 "propName": "_accessKey",
                 "methodName": "validateAccessKey"
+            }, {
+                "propName": "_ariaDetails",
+                "methodName": "validateAriaDetails"
             }, {
                 "propName": "_autoComplete",
                 "methodName": "validateAutoComplete"

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/input-range/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\tAutoCompletePropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputRangeAPI,\n\tInputRangeStates,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tNumberString,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport KolSuggestionsFc from '../../functional-components/Suggestions';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { InputRangeController } from './controller';\n\n/**\n * The **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n *\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements InputRangeAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolInputRangeElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLInputElement>();\n\tprivate refInputRange?: HTMLInputElement;\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 readonly setInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.ctaRef(element);\n\t\t\tif (!this._value && element.value) {\n\t\t\t\tthis.validateValue(parseFloat(element.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly setInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate getSanitizedFloatValue(value: string): number {\n\t\tconst floatValue = parseFloat(value);\n\t\tif (this.state._max && floatValue > this.state._max) {\n\t\t\treturn this.state._max;\n\t\t}\n\t\tif (this.state._min && floatValue < this.state._min) {\n\t\t\treturn this.state._min;\n\t\t}\n\t\treturn floatValue;\n\t}\n\n\t/**\n\t * Map the value to the initial format. E.g., if the user provided a string initially, return a string.\n\t */\n\tprivate remapValue(value: number): number | NumberString {\n\t\tif (this._initialValueType === 'NumberString') {\n\t\t\treturn String(value) as NumberString;\n\t\t}\n\t\treturn value;\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<number | NumberString | undefined> {\n\t\tif (this.ctaRef.el !== undefined) {\n\t\t\tconst value = this.ctaRef.el.value;\n\t\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\t\treturn this.remapValue(floatValue);\n\t\t}\n\t}\n\n\tprivate readonly onInput = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tthis.controller.onFacade.onInput(event, true, this.remapValue(floatValue));\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tconst remappedValue = this.remapValue(floatValue);\n\t\tthis.validateValue(remappedValue);\n\t\tthis.controller.onFacade.onChange(event, remappedValue);\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\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\n\t\t}\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-range', 'range'),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getGenericInputProps() {\n\t\treturn {\n\t\t\tstate: { ...this.state, _suggestions: [] },\n\t\t\t...this.controller.onFacade,\n\t\t\tonChange: this.onChange,\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\tprivate get hasSuggestions(): boolean {\n\t\treturn Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t}\n\n\tprivate getInputRangeProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-range` : undefined,\n\t\t\tlist: this.hasSuggestions ? createRelatedUniqueId(this.state._id, 'list') : undefined,\n\t\t\ttype: 'range',\n\t\t\ttabIndex: -1,\n\t\t\tid: undefined,\n\t\t\t'aria-hidden': 'true',\n\t\t\tref: this.setInputRangeRef,\n\t\t};\n\t}\n\n\tprivate getInputNumberProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-number` : undefined,\n\t\t\tlist: this.hasSuggestions ? createRelatedUniqueId(this.state._id, 'list') : undefined,\n\t\t\ttype: 'number',\n\t\t\tref: this.setInputNumberRef,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t};\n\t}\n\n\tprivate setInitialValueType(value?: number | NumberString) {\n\t\tif (this.controller.isNumberString(value)) {\n\t\t\tthis._initialValueType = 'NumberString';\n\t\t} else {\n\t\t\tthis._initialValueType = 'number';\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst inputsWrapperStyle = {\n\t\t\t// use number of digits in max value plus some space for the number input arrow buttons\n\t\t\t'--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,\n\t\t};\n\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<div class=\"kol-input-range__inputs-wrapper\" style={inputsWrapperStyle}>\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--range\" {...this.getInputRangeProps()} />\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--number\" {...this.getInputNumberProps()} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.hasSuggestions && <KolSuggestionsFc id={this.state._id} suggestions={this.state._suggestions} />}\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\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 input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: AutoCompletePropType = 'off';\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 value of the element.\n\t */\n\t@Prop() public _max?: number | NumberString = 100;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number | NumberString = 0;\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 * 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 the step size for value changes.\n\t */\n\t@Prop() public _step?: number | NumberString;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\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?: number | NumberString;\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: InputRangeStates = {\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('input-range'),\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_min: 0,\n\t\t_max: 100,\n\t};\n\t@State() private _initialValueType: 'number' | 'NumberString' = 'number';\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', 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('_autoComplete')\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tthis.controller.validateAutoComplete(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?: 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('_max')\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.controller.validateMin(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('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(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?: number | NumberString): void {\n\t\tthis.controller.validateValue(value);\n\t\tif (value !== undefined) {\n\t\t\tthis.setInitialValueType(value);\n\t\t}\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tif (this._value !== undefined) {\n\t\t\tthis.setInitialValueType(this._value);\n\t\t}\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/input-range/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\tAutoCompletePropType,\n\tClickableElement,\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputRangeAPI,\n\tInputRangeStates,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tNumberString,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport KolSuggestionsFc from '../../functional-components/Suggestions';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { InputRangeController } from './controller';\n\n/**\n * The **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n *\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements ClickableElement, FocusableElement, InputRangeAPI {\n\t@Element() protected readonly host?: HTMLKolInputRangeElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLInputElement>();\n\tprivate refInputRange?: HTMLInputElement;\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 readonly setInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.ctaRef(element);\n\t\t\tif (!this._value && element.value) {\n\t\t\t\tthis.validateValue(parseFloat(element.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly setInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate getSanitizedFloatValue(value: string): number {\n\t\tconst floatValue = parseFloat(value);\n\t\tif (this.state._max && floatValue > this.state._max) {\n\t\t\treturn this.state._max;\n\t\t}\n\t\tif (this.state._min && floatValue < this.state._min) {\n\t\t\treturn this.state._min;\n\t\t}\n\t\treturn floatValue;\n\t}\n\n\t/**\n\t * Map the value to the initial format. E.g., if the user provided a string initially, return a string.\n\t */\n\tprivate remapValue(value: number): number | NumberString {\n\t\tif (this._initialValueType === 'NumberString') {\n\t\t\treturn String(value) as NumberString;\n\t\t}\n\t\treturn value;\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<number | NumberString | undefined> {\n\t\tif (this.ctaRef.el !== undefined) {\n\t\t\tconst value = this.ctaRef.el.value;\n\t\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\t\treturn this.remapValue(floatValue);\n\t\t}\n\t}\n\n\tprivate readonly onInput = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tthis.controller.onFacade.onInput(event, true, this.remapValue(floatValue));\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tconst remappedValue = this.remapValue(floatValue);\n\t\tthis.validateValue(remappedValue);\n\t\tthis.controller.onFacade.onChange(event, remappedValue);\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\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\n\t\t}\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-range', 'range'),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getGenericInputProps() {\n\t\treturn {\n\t\t\tstate: { ...this.state, _suggestions: [] },\n\t\t\t...this.controller.onFacade,\n\t\t\tonChange: this.onChange,\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\tprivate get hasSuggestions(): boolean {\n\t\treturn Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t}\n\n\tprivate getInputRangeProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-range` : undefined,\n\t\t\tlist: this.hasSuggestions ? createRelatedUniqueId(this.state._id, 'list') : undefined,\n\t\t\ttype: 'range',\n\t\t\ttabIndex: -1,\n\t\t\tid: undefined,\n\t\t\t'aria-hidden': 'true',\n\t\t\tref: this.setInputRangeRef,\n\t\t};\n\t}\n\n\tprivate getInputNumberProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-number` : undefined,\n\t\t\tlist: this.hasSuggestions ? createRelatedUniqueId(this.state._id, 'list') : undefined,\n\t\t\ttype: 'number',\n\t\t\tref: this.setInputNumberRef,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t};\n\t}\n\n\tprivate setInitialValueType(value?: number | NumberString) {\n\t\tif (this.controller.isNumberString(value)) {\n\t\t\tthis._initialValueType = 'NumberString';\n\t\t} else {\n\t\t\tthis._initialValueType = 'number';\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst inputsWrapperStyle = {\n\t\t\t// use number of digits in max or min value plus some space for the number input arrow buttons; minimum 4 digits\n\t\t\t'--kolibri-input-range--input-number--width': `calc(${Math.max(String(this.state._max ?? 100).length, String(this.state._min ?? 0).length, 4)}ch + 2em)`,\n\t\t};\n\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<div class=\"kol-input-range__inputs-wrapper\" style={inputsWrapperStyle}>\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--range\" {...this.getInputRangeProps()} />\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--number\" {...this.getInputNumberProps()} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.hasSuggestions && <KolSuggestionsFc id={this.state._id} suggestions={this.state._suggestions} />}\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\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 * 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 * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: AutoCompletePropType = 'off';\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 value of the element.\n\t */\n\t@Prop() public _max?: number | NumberString = 100;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number | NumberString = 0;\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 * 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 the step size for value changes.\n\t */\n\t@Prop() public _step?: number | NumberString;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\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?: number | NumberString;\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: InputRangeStates = {\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('input-range'),\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_min: 0,\n\t\t_max: 100,\n\t};\n\t@State() private _initialValueType: 'number' | 'NumberString' = 'number';\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', 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('_autoComplete')\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tthis.controller.validateAutoComplete(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?: 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('_max')\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.controller.validateMin(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('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(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?: number | NumberString): void {\n\t\tthis.controller.validateValue(value);\n\t\tif (value !== undefined) {\n\t\t\tthis.setInitialValueType(value);\n\t\t}\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tif (this._value !== undefined) {\n\t\t\tthis.setInitialValueType(this._value);\n\t\t}\n\t\tthis._touched = this._touched === true;\n\t\tthis.validateAriaDetails(this._ariaDetails);\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"]}