@public-ui/hydrate 3.0.0-rc.3 → 3.0.0-rc.5

package/dist/index.js

@@ -4064,8 +4064,8 @@ const validateHeadingVariant = (component, value) => {
     watchValidator(component, `_variant`, (value) => typeof value === 'string' && headingVariantPropTypeOptions.includes(value), new Set([`KoliBriHeadingVariant {${headingVariantPropTypeOptions.join(', ')}`]), value);
 };
 
-const validateHideError = (component, value, options) => {
-    watchBoolean(component, '_hideError', value, options);
+const validateHideMsg = (component, value, options) => {
+    watchBoolean(component, '_hideMsg', value, options);
 };
 
 const validateHideLabel = (component, value, options = {}) => {
@@ -4388,7 +4388,12 @@ const validateTableHeaderCells = (component, value) => {
             }
             catch (e) {
             }
-            watchValidator(component, '_headerCells', (value) => typeof value === 'object' && value !== null, new Set(['TableHeaderCellsPropType']), value);
+            watchValidator(component, '_headerCells', (value) => typeof value === 'object' &&
+                value !== null &&
+                (value.horizontal === undefined ||
+                    (Array.isArray(value.horizontal) && value.horizontal.find((headerRow) => !Array.isArray(headerRow)) === undefined)) &&
+                (value.vertical === undefined || (Array.isArray(value.vertical) && value.vertical.find((headerCol) => !Array.isArray(headerCol)) === undefined)) &&
+                true, new Set(['TableHeaderCellsPropType']), value);
         });
     });
 };
@@ -4552,7 +4557,6 @@ let KolButtonTag = 'kol-button';
 let KolButtonWcTag = 'kol-button-wc';
 let KolFormTag = 'kol-form';
 let KolIconTag = 'kol-icon';
-let KolInputTag = 'kol-input';
 let KolLinkTag = 'kol-link';
 let KolLinkWcTag = 'kol-link-wc';
 let KolPaginationTag = 'kol-pagination';
@@ -4674,12 +4678,12 @@ class KolAccordion {
         };
         this._disabled = false;
         this._label = undefined;
-        this._level = 1;
+        this._level = 0;
         this._on = undefined;
         this._open = false;
         this.state = {
             _label: '',
-            _level: 1,
+            _level: 0,
             _on: {},
         };
     }
@@ -4773,12 +4777,12 @@ class KolAlert {
         this._alert = false;
         this._hasCloser = false;
         this._label = undefined;
-        this._level = 1;
+        this._level = 0;
         this._on = undefined;
         this._type = 'default';
         this._variant = 'msg';
         this.state = {
-            _level: 1,
+            _level: 0,
         };
     }
     render() {
@@ -5047,12 +5051,12 @@ class KolAlertWc {
         this._alert = false;
         this._hasCloser = false;
         this._label = undefined;
-        this._level = 1;
+        this._level = 0;
         this._on = undefined;
         this._type = 'default';
         this._variant = 'msg';
         this.state = {
-            _level: 1,
+            _level: 0,
         };
     }
     render() {
@@ -5220,8 +5224,8 @@ class KolAvatarWc {
 }
 
 const FormFieldMsgFc = (_a) => {
-    var { alert, msg, hideError, id, class: classNames } = _a, other = __rest(_a, ["alert", "msg", "hideError", "id", "class"]);
-    return (hAsync(KolAlertFc$1, Object.assign({ id: `${id}-msg`, alert: alert, type: "error", class: clsx('kol-form-field__msg', { 'visually-hidden': hideError === true }, classNames) }, msg, other, { "aria-hidden": "true" }), (msg === null || msg === void 0 ? void 0 : msg.description) || undefined));
+    var { alert, msg, hideMsg, id, class: classNames } = _a, other = __rest(_a, ["alert", "msg", "hideMsg", "id", "class"]);
+    return (hAsync(KolAlertFc$1, Object.assign({ id: `${id}-msg`, alert: alert, type: "error", class: clsx('kol-form-field__msg', { 'visually-hidden': hideMsg === true }, classNames) }, msg, other, { "aria-hidden": "true" }), (msg === null || msg === void 0 ? void 0 : msg.description) || undefined));
 };
 var KolFormFieldMsgFc = FormFieldMsgFc;
 
@@ -13918,7 +13922,7 @@ const InputContainer$1 = (_a, children) => {
     return (hAsync("div", Object.assign({ class: clsx('kol-form-field__input', classNames) }, other), children));
 };
 const KolFormFieldFc = (props, children) => {
-    const { component: Component = 'div', renderNoLabel, renderNoTooltip, renderNoHint, anotherChildren, id, required, alert, disabled, class: classNames, msg, hideError, hideLabel, label, hint, accessKey, shortKey, tooltipAlign, counter, readOnly, touched, formFieldLabelProps, formFieldHintProps, formFieldTooltipProps, formFieldMsgProps, formFieldCounterProps, formFieldInputProps } = props, other = __rest(props, ["component", "renderNoLabel", "renderNoTooltip", "renderNoHint", "anotherChildren", "id", "required", "alert", "disabled", "class", "msg", "hideError", "hideLabel", "label", "hint", "accessKey", "shortKey", "tooltipAlign", "counter", "readOnly", "touched", "formFieldLabelProps", "formFieldHintProps", "formFieldTooltipProps", "formFieldMsgProps", "formFieldCounterProps", "formFieldInputProps"]);
+    const { component: Component = 'div', renderNoLabel, renderNoTooltip, renderNoHint, anotherChildren, id, required, alert, disabled, class: classNames, msg, hideMsg, hideLabel, label, hint, accessKey, shortKey, tooltipAlign, counter, readOnly, touched, formFieldLabelProps, formFieldHintProps, formFieldTooltipProps, formFieldMsgProps, formFieldCounterProps, formFieldInputProps } = props, other = __rest(props, ["component", "renderNoLabel", "renderNoTooltip", "renderNoHint", "anotherChildren", "id", "required", "alert", "disabled", "class", "msg", "hideMsg", "hideLabel", "label", "hint", "accessKey", "shortKey", "tooltipAlign", "counter", "readOnly", "touched", "formFieldLabelProps", "formFieldHintProps", "formFieldTooltipProps", "formFieldMsgProps", "formFieldCounterProps", "formFieldInputProps"]);
     const showLabel = !renderNoLabel;
     const showHint = !renderNoHint;
     const showTooltip = !renderNoTooltip;
@@ -13932,7 +13936,7 @@ const KolFormFieldFc = (props, children) => {
         ['kol-form-field--touched']: Boolean(touched),
         ['kol-form-field--hide-label']: Boolean(hideLabel),
         ['kol-form-field--read-only']: Boolean(readOnly),
-        ['kol-form-field--hidden-error']: Boolean(hideError),
+        ['kol-form-field--hidden-msg']: Boolean(hideMsg),
     };
     if (showMsg) {
         stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [`kol-form-field--${(msg === null || msg === void 0 ? void 0 : msg.type) || 'error'}`]: true, [`kol-form-field--${getModifierClassNameByMsgType(msg)}`]: true });
@@ -13943,7 +13947,7 @@ const KolFormFieldFc = (props, children) => {
             children,
             useTooltipInsteadOfLabel && (hAsync(KolFieldControlTooltipFc, Object.assign({}, (formFieldTooltipProps || {}), { id: id, label: label, hideLabel: hideLabel, align: tooltipAlign, badgeText: badgeText })))),
         counter ? hAsync(KolFormFieldCounterFc$1, Object.assign({}, (formFieldCounterProps || {}), counter)) : null,
-        showMsg && hAsync(KolFormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg, hideError: hideError })),
+        showMsg && hAsync(KolFormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg, hideMsg: hideMsg })),
         showHint && hAsync(KolFieldControlHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })),
         anotherChildren));
 };
@@ -14873,7 +14877,7 @@ class KolCard {
         this._on = undefined;
         this._hasCloser = false;
         this._label = undefined;
-        this._level = 1;
+        this._level = 0;
         this.state = {
             _label: '',
         };
@@ -14935,6 +14939,39 @@ class KolCard {
     }; }
 }
 
+function getFormFieldProps(state) {
+    const props = {
+        id: state._id,
+        disabled: state._disabled,
+        msg: convertMsgToInternMsg(state._msg),
+        hint: state._hint,
+        label: state._label,
+        hideLabel: state._hideLabel,
+        hideMsg: state._hideMsg,
+        touched: state._touched,
+        accessKey: state._accessKey,
+        shortKey: state._shortKey,
+    };
+    if ('_required' in state) {
+        props.required = state._required;
+    }
+    if ('_readOnly' in state) {
+        props.readOnly = state._readOnly;
+    }
+    if ('_hasCounter' in state && '_currentLength' in state) {
+        props.counter = state._hasCounter ? { currentLength: state._currentLength } : undefined;
+        if (props.counter && '_maxLength' in state) {
+            props.counter.maxLength = state._maxLength;
+        }
+    }
+    return props;
+}
+const FormFieldStateWrapper = (_a, children) => {
+    var { state } = _a, other = __rest(_a, ["state"]);
+    return (hAsync(KolFormFieldFc$1, Object.assign({}, getFormFieldProps(state), other), children));
+};
+var KolFormFieldStateWrapperFc = FormFieldStateWrapper;
+
 class ControlledInputController extends AssociatedInputController {
     constructor(component, name, host) {
         super(component, name, host);
@@ -14978,12 +15015,12 @@ class InputController extends ControlledInputController {
     validateTooltipAlign(value) {
         validateTooltipAlign(this.component, value);
     }
-    validateHideError(value) {
-        validateHideError(this.component, value, {
+    validateHideMsg(value) {
+        validateHideMsg(this.component, value, {
             hooks: {
                 afterPatch: () => {
-                    if (this.component.state._hideError) {
-                        a11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');
+                    if (this.component.state._hideMsg) {
+                        a11yHint('Property _hideMsg for inputs: Only use when the error message is shown outside of the input component.');
                     }
                 },
             },
@@ -15045,7 +15082,7 @@ class InputController extends ControlledInputController {
         this.validateAdjustHeight(this.component._adjustHeight);
         this.validateMsg(this.component._msg);
         this.validateDisabled(this.component._disabled);
-        this.validateHideError(this.component._hideError);
+        this.validateHideMsg(this.component._hideMsg);
         this.validateHideLabel(this.component._hideLabel);
         this.validateHint(this.component._hint);
         this.validateId(this.component._id);
@@ -15193,7 +15230,163 @@ const getRenderStates$1 = (state) => {
     return { hasError, hasHint, ariaDescribedBy };
 };
 
-const defaultStyleCss$C = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox--disabled, .combobox--disabled * {\n    cursor: not-allowed !important;\n  }\n  .combobox--disabled {\n    opacity: 0.5;\n    outline: none;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .combobox__input {\n    flex-grow: 1;\n  }\n  .combobox__input:focus {\n    outline: none;\n  }\n  .combobox__icon {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .combobox__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    cursor: pointer;\n  }\n  .combobox__listbox--cursor-hidden .combobox__item {\n    cursor: none !important;\n  }\n  .kol-input {\n    display: grid;\n  }\n}";
+const getRenderStates = (state) => {
+    var _a, _b, _c;
+    const hasMessage = Boolean(((_a = state === null || state === void 0 ? void 0 : state._msg) === null || _a === void 0 ? void 0 : _a._description) && ((_b = state._msg._description) === null || _b === void 0 ? void 0 : _b.length) > 0);
+    const isMessageValidError = ((_c = state._msg) === null || _c === void 0 ? void 0 : _c._type) === 'error' && hasMessage;
+    const hasError = isMessageValidError && state._touched === true;
+    const hasHint = typeof state._hint === 'string' && state._hint.length > 0;
+    const ariaDescribedBy = [];
+    if (hasMessage) {
+        ariaDescribedBy.push(`${state._id}-msg`);
+    }
+    if (hasHint) {
+        ariaDescribedBy.push(`${state._id}-hint`);
+    }
+    return { hasError, hasHint, ariaDescribedBy };
+};
+
+function getInputProps(state, customSuggestions) {
+    const { ariaDescribedBy } = getRenderStates(state);
+    const props = {
+        id: state._id,
+        hideLabel: state._hideLabel,
+        label: state._label,
+        accessKey: state._accessKey,
+        disabled: state._disabled,
+        name: state._name,
+        ariaDescribedBy: ariaDescribedBy,
+    };
+    if ('_type' in state)
+        props.type = state._type;
+    if ('_value' in state)
+        props.value = state._value;
+    if ('_required' in state)
+        props.required = state._required;
+    if ('_maxLength' in state)
+        props.maxlength = state._maxLength;
+    if ('_placeholder' in state)
+        props.placeholder = state._placeholder;
+    if ('_autoComplete' in state)
+        props.autoComplete = state._autoComplete;
+    if ('_spellCheck' in state)
+        props.spellcheck = state._spellCheck;
+    if ('_pattern' in state)
+        props.pattern = state._pattern;
+    if ('_readOnly' in state)
+        props.readonly = state._readOnly;
+    if ('_min' in state)
+        props.min = state._min;
+    if ('_max' in state)
+        props.max = state._max;
+    if ('_step' in state)
+        props.step = state._step;
+    if ('_multiple' in state)
+        props.multiple = state._multiple;
+    if ('_checked' in state)
+        props.checked = state._checked;
+    if ('_indeterminate' in state)
+        props.indeterminate = state._indeterminate;
+    if ('_touched' in state)
+        props.touched = state._touched;
+    if ('_msg' in state)
+        props.msg = convertMsgToInternMsg(state._msg);
+    if ('_suggestions' in state && !customSuggestions) {
+        const hasSuggestions = Array.isArray(state._suggestions) && state._suggestions.length > 0;
+        if (hasSuggestions) {
+            props.suggestions = (hAsync(KolSuggestionsFc, { id: state._id, suggestions: state._suggestions }));
+        }
+    }
+    return props;
+}
+const InputStateWrapper = (_a) => {
+    var { state, customSuggestions } = _a, other = __rest(_a, ["state", "customSuggestions"]);
+    return hAsync(KolInputFc, Object.assign({}, getInputProps(state, customSuggestions), other));
+};
+var KolInputStateWrapperFc = InputStateWrapper;
+
+const KolButtonFc = (props) => {
+    const { label, icons, hideLabel, disabled, onClick } = props, other = __rest(props, ["label", "icons", "hideLabel", "disabled", "onClick"]);
+    return hAsync(KolButtonWcTag, Object.assign({ tabindex: 0, _label: label, _disabled: disabled, _icons: icons, _hideLabel: hideLabel, _on: { onClick } }, other));
+};
+var KolButtonFc$1 = KolButtonFc;
+
+const KolIconButtonFc = (props) => {
+    const { componentName = 'button', label, icon, onClick } = props, other = __rest(props, ["componentName", "label", "icon", "onClick"]);
+    const Component = componentName === 'button' ? KolButtonFc$1 : KolIconFc$1;
+    return hAsync(Component, Object.assign({ label: label || '', hideLabel: true, icons: `codicon codicon-${icon}`, onClick: onClick }, other));
+};
+var KolIconButtonFc$1 = KolIconButtonFc;
+
+function getInputContainerProps(state) {
+    let icons = undefined;
+    let smartButton;
+    if ('_icons' in state) {
+        icons = state._icons;
+    }
+    if ('_smartButton' in state) {
+        smartButton = state._smartButton;
+    }
+    return {
+        icons,
+        smartButton,
+        disabled: state._disabled,
+        msg: convertMsgToInternMsg(state._msg),
+        touched: state._touched,
+    };
+}
+const InputContainerStateWrapperFc = ({ state, endAdornment: defaultEndAdornment }, children) => {
+    const { icons, smartButton, disabled, msg, touched } = getInputContainerProps(state);
+    let leftIconProps = icons === null || icons === void 0 ? void 0 : icons.left;
+    if (isString$2(leftIconProps)) {
+        leftIconProps = { icon: leftIconProps };
+    }
+    let rightIconProps = icons === null || icons === void 0 ? void 0 : icons.right;
+    if (isString$2(rightIconProps)) {
+        rightIconProps = { icon: rightIconProps };
+    }
+    const startAdornment = [];
+    const endAdornment = [];
+    if (defaultEndAdornment) {
+        if (Array.isArray(defaultEndAdornment)) {
+            endAdornment.push(...defaultEndAdornment);
+        }
+        else {
+            endAdornment.push(defaultEndAdornment);
+        }
+    }
+    if (leftIconProps) {
+        startAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "icon" }, (isObject$1(leftIconProps) ? leftIconProps : {}))));
+    }
+    if (isObject$1(smartButton)) {
+        endAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "button" }, smartButton, { hideLabel: true, disabled: disabled })));
+    }
+    if (rightIconProps) {
+        endAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "icon" }, (isObject$1(rightIconProps) ? rightIconProps : {}))));
+    }
+    return (hAsync(KolInputContainerFc$1, { disabled: disabled, msg: msg, touched: touched, startAdornment: startAdornment, endAdornment: endAdornment }, children));
+};
+var KolInputContainerStateWrapperFc = InputContainerStateWrapperFc;
+
+const CustomSuggestionsToggleFc = ({ onClick, disabled }) => {
+    return (hAsync("button", { tabindex: "-1", class: "kol-custom-suggestions-toggle", onClick: onClick, disabled: disabled },
+        hAsync(KolIconTag, { _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') })));
+};
+var CustomSuggestionsToggleFc$1 = CustomSuggestionsToggleFc;
+
+const CustomSuggestionsOptionFc = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option }) => {
+    return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: ref, "data-index": index, tabIndex: -1, role: "option", "aria-selected": selected ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: "kol-custom-suggestions-option", onKeyDown: onKeyDown }, option));
+};
+var CustomSuggestionsOptionFc$1 = CustomSuggestionsOptionFc;
+
+const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown }, children) => {
+    return (hAsync("ul", { role: "listbox", class: clsx('kol-custom-suggestions-options-group', {
+            'kol-custom-suggestions-options-group--cursor-hidden': blockSuggestionMouseOver,
+        }), onKeyDown: onKeyDown }, children));
+};
+var CustomSuggestionsOptionsGroupFc$1 = CustomSuggestionsOptionsGroupFc;
+
+const defaultStyleCss$C = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-option {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-options-group {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-toggle {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
 var KolComboboxDefaultStyle0 = defaultStyleCss$C;
 
 class KolCombobox {
@@ -15268,21 +15461,34 @@ class KolCombobox {
             this.focusOption(index);
         }
     }
-    render() {
-        const hasExpertSlot = showExpertSlot(this.state._label);
+    getFormFieldProps() {
+        return {
+            state: this.state,
+            class: clsx('kol-combobox', {
+                'has-value': this.state._hasValue,
+            }),
+            tooltipAlign: this._tooltipAlign,
+            onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); },
+            alert: this.showAsAlert(),
+        };
+    }
+    getInputProps() {
         const { ariaDescribedBy } = getRenderStates$1(this.state);
-        return (hAsync(Host, { key: '45ed80937ea2a5cb1ebad2f4f2b6d90e88cf94ba', class: "kol-combobox" }, hAsync("div", { key: '86c9bb19776ecc41ab6dea755dbb763467a1735c', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: 'd6bee96d1fd56a5d9ba487782861b3634a87bc9b', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '826b84fec7e9e24a090f4fc37c5005c1b1bbecc5', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '4fd63595eaca0311492e79ca7daf772ba3256395', slot: "input" }, hAsync("div", { key: 'f557349467e2b68e61f2754fa80cfe3897726d20', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'b17af6bb7adb5e4131d53106c5056447a25b33e1', ref: this.catchRef, class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onFocus: (event) => {
+        return Object.assign(Object.assign({ ref: this.catchRef, state: this.state, class: 'kol-combobox__input', type: 'text', role: 'combobox', 'aria-autocomplete': 'both', 'aria-expanded': this._isOpen ? 'true' : 'false', 'aria-controls': 'listbox', 'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, 'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, 'aria-labelledby': this.state._id, 'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, value: this.state._value, accessKey: this.state._accessKey, autocapitalize: 'off', autocorrect: 'off', disabled: this.state._disabled, customSuggestions: true, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade), { onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            }, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: 'a8a8620ca806533ef623105ead545f51542d82a7', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: 'dd5d72e7d98b36331da7850a05724102e0cf8dc5', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '71d7ce8d277c2e455c07cdd7f2b1e8ea5d7cb667', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
+            }, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder });
+    }
+    render() {
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '4a5847a07661537d4af1651d63cc02213f8faba4' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'f5f23700d41e0f08b5e4d042f29cfc3fcd2e2edc', state: this.state }, hAsync("div", { key: '422e81dc9ae35f1b3ac2bb77525eaa7ce23011ea', class: "kol-combobox__group" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'b0a5a69ffaafe1443f24692a0cec9cb368b329ad' }, this.getInputProps())), hAsync(CustomSuggestionsToggleFc$1, { key: '6a5ab0dc9ba9c4fc0aa2e06b06bbaed5558efb10', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc$1, { key: '65a14c8a44817ab31d4fca050df4b70fdb0ecb69', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
-            this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
+            this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc$1, { index: index, option: option, ref: (el) => {
                     if (el)
                         this.refSuggestions[index] = el;
-                }, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option ? 'true' : undefined, onClick: (e) => {
+                }, selected: this.state._value === option, onClick: (e) => {
                     this.selectOption(e, option);
                     this.toggleListbox();
                 }, onMouseOver: () => {
@@ -15291,13 +15497,13 @@ class KolCombobox {
                     }
                 }, onFocus: () => {
                     this.focusOption(index);
-                }, class: "combobox__item", onKeyDown: (e) => {
+                }, onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === 'NumpadEnter') {
                         this.selectOption(e, option);
                         this.toggleListbox();
                         e.preventDefault();
                     }
-                } }, option))))))))));
+                } }))))))));
     }
     handleKeyDown(event) {
         var _a, _b;
@@ -15405,7 +15611,7 @@ class KolCombobox {
         this._accessKey = undefined;
         this._placeholder = undefined;
         this._disabled = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -15424,7 +15630,7 @@ class KolCombobox {
         this._value = undefined;
         this.state = {
             _hasValue: false,
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _suggestions: [],
@@ -15446,8 +15652,8 @@ class KolCombobox {
     validateDisabled(value) {
         this.controller.validateDisabled(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -15535,7 +15741,7 @@ class KolCombobox {
         "_placeholder": ["validatePlaceholder"],
         "_accessKey": ["validateAccessKey"],
         "_disabled": ["validateDisabled"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -15562,7 +15768,7 @@ class KolCombobox {
             "_accessKey": [1, "_access-key"],
             "_placeholder": [1],
             "_disabled": [4],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
@@ -15589,7 +15795,7 @@ class KolCombobox {
         },
         "$listeners$": [[0, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"], [1, "mousemove", "handleMouseEvent"], [8, "focusout", "handleFocusOut"], [8, "blur", "handleWindowBlur"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
@@ -15616,12 +15822,12 @@ class KolDetails {
         };
         this._disabled = false;
         this._label = undefined;
-        this._level = 1;
+        this._level = 0;
         this._on = undefined;
         this._open = false;
         this.state = {
             _label: '',
-            _level: 1,
+            _level: 0,
             _on: {},
         };
     }
@@ -15630,8 +15836,7 @@ class KolDetails {
         await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
     }
     render() {
-        const { _open, _label, _disabled } = this.state;
-        const _level = 1;
+        const { _open, _label, _disabled, _level } = this.state;
         const rootClass = 'kol-details';
         const props = {
             id: this.nonce,
@@ -15653,7 +15858,7 @@ class KolDetails {
                 animationClass: `${rootClass}__wrapper-animation`,
             },
         };
-        return (hAsync(KolCollapsibleFc$1, Object.assign({ key: 'e1c3a4f3a8facafe1ddf9d83b86fdf9bb6fe996e' }, props), hAsync("slot", { key: '88c56bcae7937a82227357c39d3bc133723b5006' })));
+        return (hAsync(KolCollapsibleFc$1, Object.assign({ key: '7ea8720203ee440b779c90a4d6f4042e3ebdeb6d' }, props), hAsync("slot", { key: '8ff437abe8ffb838fb30b67121ce22b5c69d7f5c' })));
     }
     validateDisabled(value) {
         validateDisabled(this, value);
@@ -15886,27 +16091,22 @@ class KolForm {
                 targetElement.focus();
             }
         };
+        this.setBlockElement = (el) => (this.errorListBlock = el);
+        this.setFirstLinkElement = (el) => (this.errorListFirstLink = el);
         this._on = undefined;
         this._requiredText = true;
         this._errorList = undefined;
         this.state = {};
     }
     renderErrorList(errorList) {
-        return (hAsync(KolAlertFc$1, { class: "kol-form__alert", ref: (el) => {
-                this.errorListBlock = el;
-            }, type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { class: "kol-form__link", _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: (el) => {
-                if (index === 0) {
-                    this.errorListFirstLink = el;
-                    this.scrollToErrorList();
-                }
-            } }))))))));
+        return (hAsync(KolAlertFc$1, { class: "kol-form__alert", ref: this.setBlockElement, type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { class: "kol-form__link", _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: index === 0 ? this.setFirstLinkElement : undefined }))))))));
     }
     renderFormElement() {
         return (hAsync("form", { class: "kol-form", method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync("div", { class: "kol-form__mandatory-fields-hint" }, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync("div", { class: "kol-form__mandatory-fields-hint" }, this.state._requiredText))) : null, hAsync("slot", null)));
     }
     render() {
         const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
-        return (hAsync(Host, { key: '370eff3268094906d68b26969e67b9770fa01473' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
+        return (hAsync(Host, { key: 'c2a136366ecf4670db6d7a53e176738fdb472016' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
     }
     scrollToErrorList() {
         var _a;
@@ -15976,12 +16176,12 @@ class KolHeading {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this._label = undefined;
-        this._level = 1;
+        this._level = 0;
         this._secondaryHeadline = undefined;
         this._variant = undefined;
         this.state = {
             _label: '',
-            _level: 1,
+            _level: 0,
         };
     }
     validateLabel(value) {
@@ -16282,39 +16482,6 @@ class InputCheckboxController extends InputCheckboxRadioController {
     }
 }
 
-function getFormFieldProps(state) {
-    const props = {
-        id: state._id,
-        disabled: state._disabled,
-        msg: convertMsgToInternMsg(state._msg),
-        hint: state._hint,
-        label: state._label,
-        hideLabel: state._hideLabel,
-        hideError: state._hideError,
-        touched: state._touched,
-        accessKey: state._accessKey,
-        shortKey: state._shortKey,
-    };
-    if ('_required' in state) {
-        props.required = state._required;
-    }
-    if ('_readOnly' in state) {
-        props.readOnly = state._readOnly;
-    }
-    if ('_hasCounter' in state && '_currentLength' in state) {
-        props.counter = state._hasCounter ? { currentLength: state._currentLength } : undefined;
-        if (props.counter && '_maxLength' in state) {
-            props.counter.maxLength = state._maxLength;
-        }
-    }
-    return props;
-}
-const FormFieldStateWrapper = (_a, children) => {
-    var { state } = _a, other = __rest(_a, ["state"]);
-    return (hAsync(KolFormFieldFc$1, Object.assign({}, getFormFieldProps(state), other), children));
-};
-var KolFormFieldStateWrapperFc = FormFieldStateWrapper;
-
 const InputContainer = (_a, children) => {
     var { class: classNames } = _a, other = __rest(_a, ["class"]);
     return (hAsync("div", Object.assign({ class: clsx('kol-field-control__input', classNames) }, other), children));
@@ -16409,22 +16576,6 @@ const CheckboxFc = (_a) => {
 };
 var KolCheckboxFc = CheckboxFc;
 
-const getRenderStates = (state) => {
-    var _a, _b, _c;
-    const hasMessage = Boolean(((_a = state === null || state === void 0 ? void 0 : state._msg) === null || _a === void 0 ? void 0 : _a._description) && ((_b = state._msg._description) === null || _b === void 0 ? void 0 : _b.length) > 0);
-    const isMessageValidError = ((_c = state._msg) === null || _c === void 0 ? void 0 : _c._type) === 'error' && hasMessage;
-    const hasError = isMessageValidError && state._touched === true;
-    const hasHint = typeof state._hint === 'string' && state._hint.length > 0;
-    const ariaDescribedBy = [];
-    if (hasMessage) {
-        ariaDescribedBy.push(`${state._id}-msg`);
-    }
-    if (hasHint) {
-        ariaDescribedBy.push(`${state._id}-hint`);
-    }
-    return { hasError, hasHint, ariaDescribedBy };
-};
-
 function getCheckboxProps(state, inputProps = {}) {
     const { ariaDescribedBy } = getRenderStates(state);
     const props = {
@@ -16518,7 +16669,7 @@ class KolInputCheckbox {
         return this.state._icons.unchecked;
     }
     render() {
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '311e4f24c632de203d94e683ebd825965665a236' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(KolFieldControlStateWrapperFc, Object.assign({ key: 'feb0374872558e832ad215a67854b86363c065a4' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(KolCheckboxStateWrapperFc, Object.assign({ key: '45259357734650ebd6b87ffeba676a33966fd284' }, this.getInputProps())))));
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '6a0a46a18a7de19b8379ffbcefcf8e7eb346f5e6' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(KolFieldControlStateWrapperFc, Object.assign({ key: '827396232275bb9e76fcba42e9bdaabc4238e09a' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(KolCheckboxStateWrapperFc, Object.assign({ key: '5cc4790a0e8fb58964741c78047c9d0b2d46e80d' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -16537,7 +16688,7 @@ class KolInputCheckbox {
         };
         this._accessKey = undefined;
         this._checked = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._disabled = false;
         this._hideLabel = false;
         this._hint = '';
@@ -16559,7 +16710,7 @@ class KolInputCheckbox {
         this._variant = 'default';
         this.state = {
             _checked: false,
-            _hideError: false,
+            _hideMsg: false,
             _icons: {
                 checked: 'codicon codicon-check',
                 indeterminate: 'codicon codicon-remove',
@@ -16587,8 +16738,8 @@ class KolInputCheckbox {
     validateDisabled(value) {
         this.controller.validateDisabled(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -16651,7 +16802,7 @@ class KolInputCheckbox {
         "_accessKey": ["validateAccessKey"],
         "_checked": ["validateChecked"],
         "_disabled": ["validateDisabled"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -16679,7 +16830,7 @@ class KolInputCheckbox {
         "$members$": {
             "_accessKey": [1, "_access-key"],
             "_checked": [1540],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_disabled": [4],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
@@ -16706,132 +16857,10 @@ class KolInputCheckbox {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_checked", "_checked"], ["_hideError", "_hide-error"], ["_indeterminate", "_indeterminate"], ["_touched", "_touched"]]
+        "$attrsToReflect$": [["_checked", "_checked"], ["_hideMsg", "_hide-msg"], ["_indeterminate", "_indeterminate"], ["_touched", "_touched"]]
     }; }
 }
 
-function getInputProps(state) {
-    const { ariaDescribedBy } = getRenderStates(state);
-    const props = {
-        id: state._id,
-        hideLabel: state._hideLabel,
-        label: state._label,
-        accessKey: state._accessKey,
-        disabled: state._disabled,
-        name: state._name,
-        ariaDescribedBy: ariaDescribedBy,
-    };
-    if ('_type' in state)
-        props.type = state._type;
-    if ('_value' in state)
-        props.value = state._value;
-    if ('_required' in state)
-        props.required = state._required;
-    if ('_maxLength' in state)
-        props.maxlength = state._maxLength;
-    if ('_placeholder' in state)
-        props.placeholder = state._placeholder;
-    if ('_autoComplete' in state)
-        props.autoComplete = state._autoComplete;
-    if ('_spellCheck' in state)
-        props.spellcheck = state._spellCheck;
-    if ('_pattern' in state)
-        props.pattern = state._pattern;
-    if ('_readOnly' in state)
-        props.readonly = state._readOnly;
-    if ('_min' in state)
-        props.min = state._min;
-    if ('_max' in state)
-        props.max = state._max;
-    if ('_step' in state)
-        props.step = state._step;
-    if ('_multiple' in state)
-        props.multiple = state._multiple;
-    if ('_checked' in state)
-        props.checked = state._checked;
-    if ('_indeterminate' in state)
-        props.indeterminate = state._indeterminate;
-    if ('_touched' in state)
-        props.touched = state._touched;
-    if ('_msg' in state)
-        props.msg = convertMsgToInternMsg(state._msg);
-    if ('_suggestions' in state) {
-        const hasSuggestions = Array.isArray(state._suggestions) && state._suggestions.length > 0;
-        if (hasSuggestions) {
-            props.suggestions = (hAsync(KolSuggestionsFc, { id: state._id, suggestions: state._suggestions }));
-        }
-    }
-    return props;
-}
-const InputStateWrapper = (_a) => {
-    var { state } = _a, other = __rest(_a, ["state"]);
-    return hAsync(KolInputFc, Object.assign({}, getInputProps(state), other));
-};
-var KolInputStateWrapperFc = InputStateWrapper;
-
-const KolButtonFc = (props) => {
-    const { label, icons, hideLabel, disabled, onClick } = props, other = __rest(props, ["label", "icons", "hideLabel", "disabled", "onClick"]);
-    return hAsync(KolButtonWcTag, Object.assign({ tabindex: 0, _label: label, _disabled: disabled, _icons: icons, _hideLabel: hideLabel, _on: { onClick } }, other));
-};
-var KolButtonFc$1 = KolButtonFc;
-
-const KolIconButtonFc = (props) => {
-    const { componentName = 'button', label, icon, onClick } = props, other = __rest(props, ["componentName", "label", "icon", "onClick"]);
-    const Component = componentName === 'button' ? KolButtonFc$1 : KolIconFc$1;
-    return hAsync(Component, Object.assign({ label: label || '', hideLabel: true, icons: `codicon codicon-${icon}`, onClick: onClick }, other));
-};
-var KolIconButtonFc$1 = KolIconButtonFc;
-
-function getInputContainerProps(state) {
-    let icons = undefined;
-    let smartButton;
-    if ('_icons' in state) {
-        icons = state._icons;
-    }
-    if ('_smartButton' in state) {
-        smartButton = state._smartButton;
-    }
-    return {
-        icons,
-        smartButton,
-        disabled: state._disabled,
-        msg: convertMsgToInternMsg(state._msg),
-        touched: state._touched,
-    };
-}
-const InputContainerStateWrapperFc = ({ state, endAdornment: defaultEndAdornment }, children) => {
-    const { icons, smartButton, disabled, msg, touched } = getInputContainerProps(state);
-    let leftIconProps = icons === null || icons === void 0 ? void 0 : icons.left;
-    if (isString$2(leftIconProps)) {
-        leftIconProps = { icon: leftIconProps };
-    }
-    let rightIconProps = icons === null || icons === void 0 ? void 0 : icons.right;
-    if (isString$2(rightIconProps)) {
-        rightIconProps = { icon: rightIconProps };
-    }
-    const startAdornment = [];
-    const endAdornment = [];
-    if (defaultEndAdornment) {
-        if (Array.isArray(defaultEndAdornment)) {
-            endAdornment.push(...defaultEndAdornment);
-        }
-        else {
-            endAdornment.push(defaultEndAdornment);
-        }
-    }
-    if (leftIconProps) {
-        startAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "icon" }, (isObject$1(leftIconProps) ? leftIconProps : {}))));
-    }
-    if (isObject$1(smartButton)) {
-        endAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "button" }, smartButton, { hideLabel: true, disabled: disabled })));
-    }
-    if (rightIconProps) {
-        endAdornment.push(hAsync(KolIconButtonFc$1, Object.assign({ componentName: "icon" }, (isObject$1(rightIconProps) ? rightIconProps : {}))));
-    }
-    return (hAsync(KolInputContainerFc$1, { disabled: disabled, msg: msg, touched: touched, startAdornment: startAdornment, endAdornment: endAdornment }, children));
-};
-var KolInputContainerStateWrapperFc = InputContainerStateWrapperFc;
-
 class InputColorController extends InputIconController {
     constructor(component, name, host) {
         super(component, name, host);
@@ -16855,7 +16884,7 @@ class InputColorController extends InputIconController {
     }
 }
 
-const defaultStyleCss$u = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
+const defaultStyleCss$u = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
 var KolInputColorDefaultStyle0 = defaultStyleCss$u;
 
 class KolInputColor {
@@ -16880,7 +16909,7 @@ class KolInputColor {
         return Object.assign(Object.assign({ ref: this.catchRef, type: 'color', slot: 'input', state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput });
     }
     render() {
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '9685b88440ba4fb5fa56d14dd3a60e6ec071e54b' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'e237de181840ff7a8c03782d06b26792bf434355', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '163688653e2b4d90a9336696486185c027dd84ed' }, this.getInputProps())))));
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '2cc074d267724a8844cb3a74173a4158d5085dec' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '97ab0641e442efdf1cae0db8b98ddc495dcbbb83', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '04f39017c2a6c0056d7c72d2dbc868f6af0eb495' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -16903,7 +16932,7 @@ class KolInputColor {
         this._accessKey = undefined;
         this._autoComplete = undefined;
         this._disabled = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -16922,7 +16951,7 @@ class KolInputColor {
         this._value = undefined;
         this.state = {
             _autoComplete: 'off',
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _suggestions: [],
@@ -16942,8 +16971,8 @@ class KolInputColor {
     validateDisabled(value) {
         this.controller.validateDisabled(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -17000,7 +17029,7 @@ class KolInputColor {
         "_accessKey": ["validateAccessKey"],
         "_autoComplete": ["validateAutoComplete"],
         "_disabled": ["validateDisabled"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -17027,7 +17056,7 @@ class KolInputColor {
             "_accessKey": [1, "_access-key"],
             "_autoComplete": [1, "_auto-complete"],
             "_disabled": [4],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
@@ -17051,7 +17080,7 @@ class KolInputColor {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
@@ -17204,7 +17233,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
 InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
 InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
 
-const defaultStyleCss$t = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
+const defaultStyleCss$t = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
 var KolInputDateDefaultStyle0 = defaultStyleCss$t;
 
 class KolInputDate {
@@ -17252,7 +17281,7 @@ class KolInputDate {
         return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
     }
     render() {
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'f94b1ce9669ad1c09b4e308ab97f7b18f0e0a5e8' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '872fa4ecc38c4f89a68949dd6968ea3009d67eb0', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '90f90a5ad5e1cc82fb0b177e9dbabf9f54b72877' }, this.getInputProps())))));
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '7e3a749df34a7a6475d0b84c2203a3d3c784a84d' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '51ec81dc553db4bc3293877dab6c47dcb697bbdd', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'd4662d1832990c06d4327c10eb24866e4d3235df' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -17290,7 +17319,7 @@ class KolInputDate {
         this._accessKey = undefined;
         this._autoComplete = undefined;
         this._disabled = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -17316,7 +17345,7 @@ class KolInputDate {
         this.state = {
             _autoComplete: 'off',
             _hasValue: false,
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _suggestions: [],
@@ -17337,8 +17366,8 @@ class KolInputDate {
     validateDisabled(value) {
         this.controller.validateDisabled(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -17422,7 +17451,7 @@ class KolInputDate {
         "_accessKey": ["validateAccessKey"],
         "_autoComplete": ["validateAutoComplete"],
         "_disabled": ["validateDisabled"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -17455,7 +17484,7 @@ class KolInputDate {
             "_accessKey": [1, "_access-key"],
             "_autoComplete": [1, "_auto-complete"],
             "_disabled": [4],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
@@ -17487,7 +17516,7 @@ class KolInputDate {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
@@ -17607,7 +17636,7 @@ class InputEmailController extends InputTextEmailController {
     }
 }
 
-const defaultStyleCss$s = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
+const defaultStyleCss$s = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
 var KolInputEmailDefaultStyle0 = defaultStyleCss$s;
 
 class KolInputEmail {
@@ -17640,7 +17669,7 @@ class KolInputEmail {
             } });
     }
     render() {
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '3be7be530b947f873a12a5e709d6566af1f8d634' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '40be1658fd7da6e647e6165e34653d4e7a3d9122', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'fbd27a670f47acf6fb594ed89019acb7eb2b7866' }, this.getInputProps())))));
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '1da21bd08b98eaa5d1fd8b0570a5305b753fb3d8' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'e4a2763de575dd266cd0367a5221d2f301b09bc8', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '6ca6d3beed387300f7ed049a3d32f4bff1d3a2eb' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -17665,7 +17694,7 @@ class KolInputEmail {
         this._autoComplete = undefined;
         this._disabled = false;
         this._hasCounter = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -17692,7 +17721,7 @@ class KolInputEmail {
             _autoComplete: 'off',
             _currentLength: 0,
             _hasValue: false,
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _suggestions: [],
@@ -17715,8 +17744,8 @@ class KolInputEmail {
     validateHasCounter(value) {
         this.controller.validateHasCounter(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -17794,7 +17823,7 @@ class KolInputEmail {
         "_autoComplete": ["validateAutoComplete"],
         "_disabled": ["validateDisabled"],
         "_hasCounter": ["validateHasCounter"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -17828,7 +17857,7 @@ class KolInputEmail {
             "_autoComplete": [1, "_auto-complete"],
             "_disabled": [4],
             "_hasCounter": [4, "_has-counter"],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
@@ -17858,7 +17887,7 @@ class KolInputEmail {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
@@ -17884,7 +17913,7 @@ class InputFileController extends InputIconController {
     }
 }
 
-const defaultStyleCss$r = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n}";
+const defaultStyleCss$r = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n}";
 var KolInputFileDefaultStyle0 = defaultStyleCss$r;
 
 class KolInputFile {
@@ -17915,7 +17944,7 @@ class KolInputFile {
             } });
     }
     render() {
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '774da71f9d5ccca55974d83094375760754fbac9' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'b36298bca849732dc75f597be932125683d13e46', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '6f427984e8d4461886a8421fc8e77670c260074b' }, this.getInputProps())))));
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '3c2a19696312a817df72cf8aba4e02ed60eb6768' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '783aaf2dac305d6715be4e6d6cef68543d07b9b8', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'e9c64850b8109420d3bb513ccacd19f77cde2f24' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -17938,7 +17967,7 @@ class KolInputFile {
         this._accept = undefined;
         this._accessKey = undefined;
         this._disabled = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -17956,7 +17985,7 @@ class KolInputFile {
         this._tooltipAlign = 'top';
         this._touched = false;
         this.state = {
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
         };
@@ -17975,8 +18004,8 @@ class KolInputFile {
     validateDisabled(value) {
         this.controller.validateDisabled(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -18033,7 +18062,7 @@ class KolInputFile {
         "_accept": ["validateAccept"],
         "_accessKey": ["validateAccessKey"],
         "_disabled": ["validateDisabled"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -18060,7 +18089,7 @@ class KolInputFile {
             "_accept": [1],
             "_accessKey": [1, "_access-key"],
             "_disabled": [4],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
@@ -18084,7 +18113,7 @@ class KolInputFile {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"]]
     }; }
 }
 
@@ -18128,7 +18157,7 @@ class InputNumberController extends InputIconController {
     onChange(event) {
         super.onChange(event);
         if (!!event.target.value !== !!this.component._value) {
-            this.component._value = event.target.value;
+            this.component._value = parseFloat(event.target.value);
         }
     }
     validateMax(value) {
@@ -18170,7 +18199,7 @@ class InputNumberController extends InputIconController {
     }
 }
 
-const defaultStyleCss$q = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
+const defaultStyleCss$q = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
 var KolInputNumberDefaultStyle0 = defaultStyleCss$q;
 
 class KolInputNumber {
@@ -18203,7 +18232,7 @@ class KolInputNumber {
             } });
     }
     render() {
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '3469ee8b4786c7797006439e24f51336e51c5d5d' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'b25682a7189213ac263daded3d146c4e7a729f2f', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'aaafffefa9b4bbf6d06170532885dbc332b238ce' }, this.getInputProps())))));
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '6a2b442199bca0bde5330fe6c8752669d5f4e934' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '1b8bbc0f5b79acc5c479a07e5273bf560de6959f', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'dcf8e4c7d7907c1f87a7fa9bde93df0c2a1ff1dd' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -18226,7 +18255,7 @@ class KolInputNumber {
         this._accessKey = undefined;
         this._autoComplete = undefined;
         this._disabled = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -18252,7 +18281,7 @@ class KolInputNumber {
         this.state = {
             _autoComplete: 'off',
             _hasValue: false,
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _suggestions: [],
@@ -18272,8 +18301,8 @@ class KolInputNumber {
     validateDisabled(value) {
         this.controller.validateDisabled(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -18350,7 +18379,7 @@ class KolInputNumber {
         "_accessKey": ["validateAccessKey"],
         "_autoComplete": ["validateAutoComplete"],
         "_disabled": ["validateDisabled"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -18383,14 +18412,14 @@ class KolInputNumber {
             "_accessKey": [1, "_access-key"],
             "_autoComplete": [1, "_auto-complete"],
             "_disabled": [4],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
             "_id": [1],
             "_label": [1],
-            "_max": [8],
-            "_min": [8],
+            "_max": [2],
+            "_min": [2],
             "_msg": [1],
             "_name": [1],
             "_on": [16],
@@ -18405,7 +18434,7 @@ class KolInputNumber {
             "_tabIndex": [2, "_tab-index"],
             "_tooltipAlign": [1, "_tooltip-align"],
             "_touched": [1540],
-            "_value": [1544],
+            "_value": [1538],
             "state": [32],
             "inputHasFocus": [32],
             "getValue": [64],
@@ -18413,11 +18442,11 @@ class KolInputNumber {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
-const defaultStyleCss$p = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input-password {\n    --kol-tooltip-width: calc(160rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+const defaultStyleCss$p = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input-password {\n    --kol-tooltip-width: calc(160rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 var KolInputPasswordDefaultStyle0 = defaultStyleCss$p;
 
 class KolInputPassword {
@@ -18460,7 +18489,7 @@ class KolInputPassword {
             }, icon: `codicon codicon-eye-${this._passwordVisible ? 'closed' : 'watch'}`, disabled: this._disabled }));
     }
     render() {
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'a03296949849caeef395af68b13cb62d71c4b48c' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '370dd454ba0cd89fa375ca9afc16e5434b98682f', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '5daf8d50da7ac2abc6dc1d198691acc3fa13647b' }, this.getInputProps())))));
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '19c7942b0bcbefd79949c6363eaef0f7132b4715' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '665dd89045b1d2e21531faf926ea6ffa954d62d8', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '5f2b33f1dc95198727b1d573727c64dfb1bc93d4' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -18485,7 +18514,7 @@ class KolInputPassword {
         this._autoComplete = undefined;
         this._disabled = false;
         this._hasCounter = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -18511,7 +18540,7 @@ class KolInputPassword {
             _autoComplete: 'off',
             _currentLength: 0,
             _hasValue: false,
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _variant: 'default',
@@ -18541,8 +18570,8 @@ class KolInputPassword {
     validateHasCounter(value) {
         this.controller.validateHasCounter(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -18615,7 +18644,7 @@ class KolInputPassword {
         "_disabled": ["validateDisabled"],
         "_variant": ["validateVariant"],
         "_hasCounter": ["validateHasCounter"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -18647,7 +18676,7 @@ class KolInputPassword {
             "_autoComplete": [1, "_auto-complete"],
             "_disabled": [4],
             "_hasCounter": [4, "_has-counter"],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
@@ -18677,11 +18706,11 @@ class KolInputPassword {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
-const defaultStyleCss$o = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-field-control {\n    min-height: var(--a11y-min-size);\n    display: grid;\n    grid-template-columns: auto 1fr;\n    grid-template-areas: \"input label\";\n    grid-template-rows: auto;\n    align-items: center;\n    justify-content: left;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-columns: auto 1fr;\n    grid-template-areas: \"input label\" \"hint hint\";\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"label input\";\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"label input\" \"hint hint\";\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    grid-area: input;\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n  }\n  .kol-field-control__label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex-grow: 1;\n    grid-area: label;\n    min-height: var(--a11y-min-size);\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__label-text::after {\n    content: \"\";\n  }\n  .kol-field-control__tooltip .span-label::after {\n    content: \"\";\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: \"*\";\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    --border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    --input-size: 1.5em;\n  }\n  .kol-form-field__label {\n    display: contents;\n  }\n  .kol-form-field__input {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-form-field__input--orientation-horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: flex-start;\n  }\n  .kol-form-field--disabled {\n    opacity: unset;\n  }\n  .kol-input-radio {\n    appearance: none;\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: 100%;\n    cursor: pointer;\n    display: flex;\n    height: var(--input-size);\n    margin: 0;\n    min-height: var(--input-size);\n    min-width: var(--input-size);\n    padding: 0;\n    width: var(--input-size);\n  }\n  .kol-input-radio:before {\n    border-radius: 100%;\n    content: \"\";\n    margin: auto;\n    height: calc(var(--input-size) / 2);\n    width: calc(var(--input-size) / 2);\n  }\n  .kol-input-radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-input-radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-input-radio:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}";
+const defaultStyleCss$o = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-field-control {\n    min-height: var(--a11y-min-size);\n    display: grid;\n    grid-template-columns: auto 1fr;\n    grid-template-areas: \"input label\";\n    grid-template-rows: auto;\n    align-items: center;\n    justify-content: left;\n  }\n  .kol-field-control:has(.kol-field-control__hint) {\n    grid-template-columns: auto 1fr;\n    grid-template-areas: \"input label\" \"hint hint\";\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label) {\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"label input\";\n    grid-template-rows: auto;\n  }\n  .kol-field-control--label-align-left:not(.kol-field-control--hide-label):has(.kol-field-control__hint) {\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"label input\" \"hint hint\";\n    grid-template-rows: auto auto;\n  }\n  .kol-field-control__input {\n    grid-area: input;\n    display: flex;\n    min-height: var(--a11y-min-size);\n    align-items: center;\n  }\n  .kol-field-control__label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex-grow: 1;\n    grid-area: label;\n    min-height: var(--a11y-min-size);\n  }\n  .kol-field-control__label--visually-hidden {\n    height: 0;\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n  }\n  .kol-field-control__label-text::after {\n    content: \"\";\n  }\n  .kol-field-control__tooltip .span-label::after {\n    content: \"\";\n  }\n  .kol-field-control__hint {\n    grid-area: hint;\n  }\n  .kol-field-control--disabled .kol-field-control__label {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    content: \"*\";\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    --border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    --input-size: 1.5em;\n  }\n  .kol-form-field__label {\n    display: contents;\n  }\n  .kol-form-field__input {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-form-field__input--orientation-horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: flex-start;\n  }\n  .kol-form-field--disabled {\n    opacity: unset;\n  }\n  .kol-input-radio {\n    appearance: none;\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: 100%;\n    cursor: pointer;\n    display: flex;\n    height: var(--input-size);\n    margin: 0;\n    min-height: var(--input-size);\n    min-width: var(--input-size);\n    padding: 0;\n    width: var(--input-size);\n  }\n  .kol-input-radio:before {\n    border-radius: 100%;\n    content: \"\";\n    margin: auto;\n    height: calc(var(--input-size) / 2);\n    width: calc(var(--input-size) / 2);\n  }\n  .kol-input-radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-input-radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-input-radio:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}";
 var KolInputRadioDefaultStyle0 = defaultStyleCss$o;
 
 class KolInputRadio {
@@ -18705,13 +18734,12 @@ class KolInputRadio {
                 class: `kol-form-field__input--orientation-${this.state._orientation}`,
             },
             tooltipAlign: this._tooltipAlign,
-            onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); },
             alert: this.showAsAlert(),
             hideLabel: false,
         };
     }
     render() {
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '62c57750d74dc7319ee01a22be3dbfa9d16ffe85' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'd0a65a6642e9adc5ac017d8d42f1e867fa2ba0f6' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
     }
     getOptionProps(option, id) {
         const obj = {
@@ -18781,7 +18809,7 @@ class KolInputRadio {
         };
         this._accessKey = undefined;
         this._disabled = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._id = undefined;
@@ -18799,7 +18827,7 @@ class KolInputRadio {
         this._touched = false;
         this._value = undefined;
         this.state = {
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _options: [],
@@ -18823,8 +18851,8 @@ class KolInputRadio {
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHint(value) {
         this.controller.validateHint(value);
@@ -18879,7 +18907,7 @@ class KolInputRadio {
         "_tooltipAlign": ["validateTooltipAlign"],
         "_disabled": ["validateDisabled"],
         "_hideLabel": ["validateHideLabel"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hint": ["validateHint"],
         "_id": ["validateId"],
         "_label": ["validateLabel"],
@@ -18904,7 +18932,7 @@ class KolInputRadio {
         "$members$": {
             "_accessKey": [1, "_access-key"],
             "_disabled": [4],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_id": [1],
@@ -18928,7 +18956,7 @@ class KolInputRadio {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
@@ -18968,7 +18996,7 @@ class InputRangeController extends InputIconController {
     }
 }
 
-const defaultStyleCss$n = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input-range__inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--range {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    padding: 0;\n    margin: 0;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: calc(1rem / var(--kolibri-root-font-size, 16)) solid currentColor;\n    }\n  }\n  .kol-input-range__input--range::-moz-range-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -moz-appearance: none;\n  }\n}";
+const defaultStyleCss$n = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input-range__inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--range {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    padding: 0;\n    margin: 0;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -webkit-appearance: none;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: calc(1rem / var(--kolibri-root-font-size, 16)) solid currentColor;\n    }\n  }\n  .kol-input-range__input--range::-moz-range-thumb {\n    box-sizing: border-box;\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    -moz-appearance: none;\n  }\n}";
 var KolInputRangeDefaultStyle0 = defaultStyleCss$n;
 
 class KolInputRange {
@@ -19031,7 +19059,7 @@ class KolInputRange {
         const inputsWrapperStyle = {
             '--kolibri-input-range--input-number--width': `calc(${String((_a = this.state._max) !== null && _a !== void 0 ? _a : 1000).length}ch + 1.5em)`,
         };
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '3e71c9c9c4c88e01e3ace3fcbcc50d82b85727c5' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '872c479554fd47887c27ca3077405371dfcb5e48', state: this.state }, hAsync("div", { key: 'a7e97f808c3c760405fd837ea2608512b402696e', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '9cc5bcb002a5fecdf74dcb4b33bf36afb31da68b', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(KolInputStateWrapperFc, Object.assign({ key: '088b68e34a821fde1f71774894099e0f38a491a1', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(KolSuggestionsFc, { key: '7fefce85616e2399bf26a5c8cf33a2ee11c1aab2', id: this.state._id, suggestions: this.state._suggestions }))));
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'e3e7627159a0e18e30e701a45c4b3ab01d7d2e2b' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'e4e46a99e464f80d46914f05786fbb7c8c2bebc1', state: this.state }, hAsync("div", { key: '1b8e0d82edec1936a5942389ec2d867a6ea10d8e', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '3ce9b5705d25c03ac18910656b7f0700b7e89b83', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(KolInputStateWrapperFc, Object.assign({ key: '235b9bf93e39cc78b91044da2addaba0e9bd78a3', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(KolSuggestionsFc, { key: '1681fc5c7b9f9fe1a320a649d66d305bffe22e8a', id: this.state._id, suggestions: this.state._suggestions }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -19066,7 +19094,7 @@ class KolInputRange {
         this._accessKey = undefined;
         this._autoComplete = undefined;
         this._disabled = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -19087,7 +19115,7 @@ class KolInputRange {
         this._value = undefined;
         this.state = {
             _autoComplete: 'off',
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _suggestions: [],
@@ -19107,8 +19135,8 @@ class KolInputRange {
     validateDisabled(value) {
         this.controller.validateDisabled(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -19171,7 +19199,7 @@ class KolInputRange {
         "_accessKey": ["validateAccessKey"],
         "_autoComplete": ["validateAutoComplete"],
         "_disabled": ["validateDisabled"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -19200,7 +19228,7 @@ class KolInputRange {
             "_accessKey": [1, "_access-key"],
             "_autoComplete": [1, "_auto-complete"],
             "_disabled": [4],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
@@ -19226,11 +19254,11 @@ class KolInputRange {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
-const defaultStyleCss$m = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
+const defaultStyleCss$m = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
 var KolInputTextDefaultStyle0 = defaultStyleCss$m;
 
 class KolInputText {
@@ -19257,7 +19285,7 @@ class KolInputText {
         return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
     }
     render() {
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '95f124fe00f71be430a527b89d641445560e54da' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '128677df31f5c02c02346ee918bcc0754d8af32d', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '3c763eb3751140d2b13cbda9815c962a6fa4feda' }, this.getInputProps())))));
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '7e0045c8690d06ab4709e09e137741cca78c92b7' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '1038617b73ed6ac787797378cef828d7c89b732d', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'bc1386bd9b425a2dc5d91e5823d1c9c72a0dfdf1' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -19299,7 +19327,7 @@ class KolInputText {
         this._autoComplete = undefined;
         this._disabled = false;
         this._hasCounter = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -19327,7 +19355,7 @@ class KolInputText {
             _autoComplete: 'off',
             _currentLength: 0,
             _hasValue: false,
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _suggestions: [],
@@ -19351,8 +19379,8 @@ class KolInputText {
     validateHasCounter(value) {
         this.controller.validateHasCounter(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -19435,7 +19463,7 @@ class KolInputText {
         "_autoComplete": ["validateAutoComplete"],
         "_disabled": ["validateDisabled"],
         "_hasCounter": ["validateHasCounter"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -19470,7 +19498,7 @@ class KolInputText {
             "_autoComplete": [1, "_auto-complete"],
             "_disabled": [4],
             "_hasCounter": [4, "_has-counter"],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
@@ -19501,7 +19529,7 @@ class KolInputText {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
@@ -19517,7 +19545,7 @@ class KolInputWc {
         this._currentLength = undefined;
         this._disabled = false;
         this._hasCounter = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -19548,18 +19576,18 @@ class KolInputWc {
         const hasExpertSlot = showExpertSlot(this._label);
         const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
         const useTooltipInsteadOfLabel = !hasExpertSlot && this._hideLabel;
-        return (hAsync(Host, { key: '47d48cb3391d5125ad056746e169e802b03fe19e', class: clsx('kol-input', this.getModifierClassNameByMsgType(showMsg), {
+        return (hAsync(Host, { key: 'cfd9957fb1257b093d42a0066c080d282f33fe9e', class: clsx('kol-input', this.getModifierClassNameByMsgType(showMsg), {
                 disabled: this._disabled === true,
                 [((_d = this._msg) === null || _d === void 0 ? void 0 : _d._type) || 'error']: showMsg === true,
                 'read-only': this._readOnly === true,
                 required: this._required === true,
                 touched: this._touched === true,
-                'hidden-error': this._hideError === true,
-            }) }, hAsync("label", { key: '360ba9fd8926df14b3656f727a54af744760a96b', class: "input-label", id: !useTooltipInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltipInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: '199a8b0f85f362e84c55bf9f341e280ffc3d4a7c', class: "input-label-span" }, hAsync("slot", { key: '00ea0a09585e0ed5dcfddeff0f373f5b26714af7', name: "label" }))), hasHint && (hAsync("span", { key: '6c8e4a79e294519ec03a68d9c9b6b374eead09da', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '95def369e9fbc92359cb323aa1dc8928c059f0a9', class: {
+                'hidden-msg': this._hideMsg === true,
+            }) }, hAsync("label", { key: '102823f929a7cad84ee12ddacd7bb6f9782537b8', class: "input-label", id: !useTooltipInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltipInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'b2ac9d0717998fee3300addc9ab39e7dbab48eef', class: "input-label-span" }, hAsync("slot", { key: '8b56ca6a6fea3cbb75c73a7bef18593a5e8e9cb9', name: "label" }))), hasHint && (hAsync("span", { key: '5452317626e66003189a15f34b09a8e19bb33f59', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: 'abd919e1a330a7d8ac02c2ea9e28e7c98988a57f', class: {
                 input: true,
                 'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
                 'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
-            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '4a20a8a6bec113062795cf4683fa060c296c15d3', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: 'a6cdca63bd77ea17fcfe4b79702c44737ec41666', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '96030cc3f13a0fb94a8ff727960fdbac9a086867', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '611697e04653bd185102e256ac8196c810f29ba2', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltipInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '611163b1225ad2e4e604835a9de0d689d4c9784b', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(KolFormFieldMsgFc, { key: 'edfc09226329f6081b3cd18a0704f81dca4e5eb0', alert: this._alert, hideError: this._hideError, msg: convertMsgToInternMsg(this._msg), id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '65c4f35c52bd46d9b6c789d7dd6e331d8611f63a', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: '2b535d700016345e60d09137b3458e2f92a0022a', class: "counter", "aria-atomic": "true", "aria-live": "polite", "data-testid": "input-counter" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '0c16f20c7ab46a7cd1a858de19ea401bbcd9a8da', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: '612a81784c2e4d56ea800e3521dd9cfcf620ca7a' }, translate('kol-characters'))))));
+            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '0ebc2e86f6234e1f3266b6fcec60996a1b21b578', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '40fca3a7748e5de1000aef706672f2fc63407cb1', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '321f1feb6f4187365fd536a0b5c0d305f98613c7', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '3f335bb610f0c3359c75b467aaf8d9419428f237', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltipInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '8ccbab744fe667c4b689cf4b0649371d7dd6de58', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(KolFormFieldMsgFc, { key: '4351c438daf4927a556809fc9cb8af6f54425256', alert: this._alert, hideMsg: this._hideMsg, msg: convertMsgToInternMsg(this._msg), id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '2669a99b02803c5c26a00e9e8f88cef20784ea5e', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: '078089228f083c2815c39a3db63c35ee82673bd9', class: "counter", "aria-atomic": "true", "aria-live": "polite", "data-testid": "input-counter" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: 'bcd923ae79e3eeb81c4df0aa0fef564b1352b3c6', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: '14c8efa8d7c1f8c4266e1c91b955fcadf803835c' }, translate('kol-characters'))))));
     }
     getModifierClassNameByMsgType(showMsg) {
         var _a, _b;
@@ -19583,7 +19611,7 @@ class KolInputWc {
             "_currentLength": [2, "_current-length"],
             "_disabled": [4],
             "_hasCounter": [4, "_has-counter"],
-            "_hideError": [4, "_hide-error"],
+            "_hideMsg": [4, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [16],
@@ -20043,15 +20071,26 @@ class KolLinkWc {
     }; }
 }
 
-const defaultStyleCss$i = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-modal {\n    border: 0;\n    padding: 0;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.33);\n  }\n}";
+const ModalVariantPropTypeOptions = ['blank', 'card'];
+const validateModalVariant = (component, value) => {
+    watchValidator(component, '_variant', (value) => typeof value === 'string' && ModalVariantPropTypeOptions.includes(value), new Set(ModalVariantPropTypeOptions), value);
+};
+
+const defaultStyleCss$i = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-modal {\n    border: 0;\n    padding: 0;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.33);\n  }\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}";
 var KolModalDefaultStyle0 = defaultStyleCss$i;
 
 class KolModal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.on = {
+            onClick: async () => {
+                await this.closeModal();
+            },
+        };
         this._label = undefined;
         this._on = undefined;
         this._width = '100%';
+        this._variant = 'blank';
         this.state = {
             _label: '',
             _width: '100%',
@@ -20076,11 +20115,15 @@ class KolModal {
         (_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
     render() {
-        return (hAsync("dialog", { key: '6ed0460585f2e234eb8884f0bab78db164cf77a6', class: "kol-modal", ref: (el) => {
+        return (hAsync("dialog", { key: 'c5b2a309c6f2439231206b400deb6dfb7f09e233', class: clsx('kol-modal', { 'kol-modal__card': this.state._variant === 'card' }), ref: (el) => {
                 this.refDialog = el;
             }, style: {
                 width: this.state._width,
-            }, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: 'f011dad359d94c7a002e0280189b759b018085ed' }, hAsync("slot", { key: '357048c98ae2225aede805cade35ce5e25794488' }))));
+            }, "aria-label": this.state._label, onClose: this.handleNativeCloseEvent.bind(this) }, hAsync("div", { key: '6cac7e41355946eb4630bb990e9ba91fbcc606b0', tabindex: "-1" }, hAsync("slot", { key: '630a8462624d9287c1f0bf1ebb0db526a5bf73cb' })), this.state._variant === 'card' && (hAsync(KolButtonWcTag, { key: '31f574b47b9cf7d580dba8c588361f20cc3aed67', class: "kol-modal__close-button", "data-testid": "modal-close-button", _hideLabel: true, _icons: {
+                left: {
+                    icon: 'codicon codicon-close',
+                },
+            }, _label: translate('kol-close'), _on: this.on, _tooltipAlign: "left" }))));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -20101,16 +20144,21 @@ class KolModal {
             defaultValue: '100%',
         });
     }
+    validateVariant(value) {
+        validateModalVariant(this, value);
+    }
     componentWillLoad() {
         this.validateLabel(this._label);
         this.validateOn(this._on);
         this.validateWidth(this._width);
+        this.validateVariant(this._variant);
     }
     get host() { return getElement(this); }
     static get watchers() { return {
         "_label": ["validateLabel"],
         "_on": ["validateOn"],
-        "_width": ["validateWidth"]
+        "_width": ["validateWidth"],
+        "_variant": ["validateVariant"]
     }; }
     static get style() { return {
         default: KolModalDefaultStyle0
@@ -20122,6 +20170,7 @@ class KolModal {
             "_label": [1],
             "_on": [16],
             "_width": [1],
+            "_variant": [1],
             "state": [32],
             "openModal": [64],
             "closeModal": [64]
@@ -20247,9 +20296,9 @@ class KolNav {
         const collapsible = this.state._collapsible === true;
         const hideLabel = this.state._hideLabel === true;
         const orientation = this.state._orientation;
-        return (hAsync("div", { key: 'bc99b22fa7adac3e10fca27f621ac22b1a6db98e', class: clsx('kol-nav', `kol-nav--${orientation}`, {
+        return (hAsync("div", { key: 'cfbe64daec9896d7ff1c5f56fd867e2adab579d5', class: clsx('kol-nav', `kol-nav--${orientation}`, {
                 'kol-nav--is-compact': this.state._hideLabel,
-            }) }, hAsync("nav", { key: '3bbde852f7c77e977bf7049b09fcf2bffdec79bd', class: "kol-nav__navigation", "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: 'c28673f4549d949a5bbc51a1f73b5124b42881c7', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: 'a774aeb0ad91dec485ea9d6653a77e7840614362', class: "kol-nav__compact" }, hAsync(KolButtonTag, { key: '7cc3f3ee8fe77274de9b809ec49f6a9df39eb465', _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
+            }) }, hAsync("nav", { key: '82c17d35f3424eb239176fae6da4090a647f8fe4', class: "kol-nav__navigation", "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: 'da5b3a23c215608d7f391ebfde2f24f8a86e6d72', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { key: '57e94f3af9250c43d340a9657cac977842c3b49b', class: "kol-nav__compact" }, hAsync(KolButtonTag, { key: '001bf20dee912e10e3236d3ba85690118588a015', _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
                 onClick: () => {
                     this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
                 },
@@ -22858,7 +22907,7 @@ class KolPopover {
         });
     }
     render() {
-        return (hAsync(Host, { key: '7e723ccf521ba1906d8669bf0ecfaf2653f05a3e', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: 'bd1a69b8f9d77b0d4f3a6ef5b1f65eadc16826de', class: clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible }), ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: '08fdd34f3be95ebb68ed88aaacc2ce7f54fe5e0c', class: clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`), ref: this.catchArrowElement }), hAsync("slot", { key: '41640394533329aa1756117c3b521e428b2a85f9' }))));
+        return (hAsync(Host, { key: '6e414db89865e4faced8091f9f4484077f903033', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: '64a38574bf8ca2878f871846f9985eef4f0b3394', class: clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible }), ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: 'e2fe3722133cc1bc20be4a7ccfc45e0622442892', class: clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`), ref: this.catchArrowElement }), hAsync("slot", { key: '9fba7bbfd2879e01da7c15f026227671bfb4c171' }))));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -22938,7 +22987,7 @@ class KolProcess {
         };
     }
     render() {
-        return (hAsync("div", { key: 'd9785ed35b0b5d6e0503d872b13ab0d2175a2e46', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: '8e31ea2369ad26c59d1516388373baa8df781dff', class: "visually-hidden", "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: 'c4da69aaaf244ab486cee3e6d076265bf6fdba47', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
+        return (hAsync("div", { key: 'cc2c7a43ba0100f71f04669b0df3a8721e22b8a9', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: 'acd76a45d181c4e6899ef316ef04d2c159197e0b', class: "visually-hidden", "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: 'b73035f03d88014db6fcaa032a0671df7d52a848', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -23047,7 +23096,7 @@ class KolQuote {
     }
     render() {
         const hasExpertSlot = showExpertSlot(this.state._quote);
-        return (hAsync("figure", { key: '013ab5c5134f4418832805f930e99cddd21344bb', class: clsx('kol-quote', `kol-quote--${this.state._variant}`) }, this.state._variant === 'block' ? (hAsync("blockquote", { class: "kol-quote__blockquote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { class: "kol-quote__quote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: 'b8fc3f8be26e9010817b4339bfa414a5c7fcc6ec', class: "kol-quote__figcaption" }, hAsync("cite", { key: '4bf8f0bc78504a522219cc6b54d21d43b1c582f5', class: "kol-quote__cite" }, hAsync(KolLinkTag, { key: 'c9ce58048601e9e147a08bfc376438b09f813a68', _href: this.state._href, _label: this.state._label, _target: "_blank" }))))));
+        return (hAsync("figure", { key: '78d631f0d5dd0dad6b89eae8b0dc4dbaf4ead851', class: clsx('kol-quote', `kol-quote--${this.state._variant}`) }, this.state._variant === 'block' ? (hAsync("blockquote", { class: "kol-quote__blockquote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { class: "kol-quote__quote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: 'c4d64d8ac6593ac6dcd153c2f4fbb18b7c327278', class: "kol-quote__figcaption" }, hAsync("cite", { key: 'a7d71571245e7110e97cf9e37bd0560ed5f67a88', class: "kol-quote__cite" }, hAsync(KolLinkTag, { key: '295878eecc876a4e9864dd87e779318f30a0dd63', _href: this.state._href, _label: this.state._label, _target: "_blank" }))))));
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
@@ -23232,7 +23281,7 @@ const SelectStateWrapper = (_a) => {
 };
 var KolSelectStateWrapperFc = SelectStateWrapper;
 
-const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-select {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    width: 100%;\n    /* needed hack for vertical alignment */\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}";
+const defaultStyleCss$d = "@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-select {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    width: 100%;\n    /* needed hack for vertical alignment */\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: \"✓ \";\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}";
 var KolSelectDefaultStyle0 = defaultStyleCss$d;
 
 class KolSelect {
@@ -23264,13 +23313,13 @@ class KolSelect {
             } });
     }
     render() {
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '22e085eb00690ae0f4689534f2a5642fb82b9f01' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'bd11e43aeda3abf320d1cb6b85958b5c7b9c1c34', state: this.state }, hAsync("form", { key: '1cd5b0e7b6ae50157c98e06d542e7eb84e47d15e', onSubmit: (event) => {
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'ee17395a6e4c6739788a55963b94371d694c5170' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'b39687b04e0e072ca8558a7ae50e010cf90a654c', state: this.state }, hAsync("form", { key: '23f28fee6175c9f1cc19236dd7c24aa38e7a1515', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host,
                     ref: this.selectRef,
                 });
-            } }, hAsync("input", { key: '2abb84f53cdb0a591b9b137c5237d7facde9d8b8', type: "submit", hidden: true }), hAsync(KolSelectStateWrapperFc, Object.assign({ key: '03b6cbd8e015e8a20529a2fa3dba07d4f9f7fe83' }, this.getSelectProps()))))));
+            } }, hAsync("input", { key: '38cce424bf172f0c235bf68878b6d2ac9c704ba9', type: "submit", hidden: true }), hAsync(KolSelectStateWrapperFc, Object.assign({ key: '958a3dd3848c598ecc38d2f4b3be72b75750d1d6' }, this.getSelectProps()))))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23279,7 +23328,7 @@ class KolSelect {
         };
         this._accessKey = undefined;
         this._disabled = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -23300,7 +23349,7 @@ class KolSelect {
         this._value = undefined;
         this.state = {
             _hasValue: false,
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _multiple: false,
@@ -23319,8 +23368,8 @@ class KolSelect {
     validateDisabled(value) {
         this.controller.validateDisabled(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -23393,7 +23442,7 @@ class KolSelect {
     static get watchers() { return {
         "_accessKey": ["validateAccessKey"],
         "_disabled": ["validateDisabled"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -23421,7 +23470,7 @@ class KolSelect {
         "$members$": {
             "_accessKey": [1, "_access-key"],
             "_disabled": [4],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
@@ -23447,7 +23496,7 @@ class KolSelect {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
@@ -23495,7 +23544,7 @@ class SingleSelectController extends InputIconController {
     }
 }
 
-const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select {\n    position: relative;\n  }\n  .single-select.disabled, .single-select.disabled * {\n    cursor: not-allowed !important;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .single-select__input {\n    flex-grow: 1;\n  }\n  .single-select__input:focus {\n    outline: none;\n  }\n  .single-select__button {\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .single-select__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__item.highlighted {\n    background-color: #f0f0f0;\n  }\n  .single-select__listbox--cursor-hidden .single-select__item {\n    cursor: none !important;\n  }\n  .single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    display: grid;\n  }\n}";
+const defaultStyleCss$c = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-option {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-options-group {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-custom-suggestions-toggle {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 var KolSingleSelectDefaultStyle0 = defaultStyleCss$c;
 
 class KolSingleSelect {
@@ -23587,23 +23636,34 @@ class KolSingleSelect {
             this.focusOption(index);
         }
     }
-    render() {
-        const hasExpertSlot = showExpertSlot(this.state._label);
+    getFormFieldProps() {
+        return {
+            state: this.state,
+            class: 'kol-single-select',
+            tooltipAlign: this._tooltipAlign,
+            onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); },
+            alert: this.showAsAlert(),
+        };
+    }
+    getInputProps() {
         const { ariaDescribedBy } = getRenderStates$1(this.state);
-        return (hAsync(Host, { key: 'f1e00a542b68c2d7837719e9bcf007b7f63834de', class: "kol-single-select" }, hAsync("div", { key: 'd1553f3031f74695d83b314c85d7756e06485e14', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: '87376d3427f2b4eed0e19b739bf2c3b0e772e845', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '0b0310c632477b854118310f68faec8cb6de8f37', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '268a30c6d65dd025f76818a5cb5ac98ced3ccc68', slot: "input" }, hAsync("div", { key: '65130d2d9961d710312e9e53213ae867e6314961', class: "single-select__group" }, hAsync("input", Object.assign({ key: '31afa94da904f32d7c24bc9596f5e7396a544317', ref: this.catchRef, class: "single-select__input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.onClick.bind(this), onFocus: (event) => {
+        return Object.assign(Object.assign({ 'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, 'aria-autocomplete': 'both', 'aria-controls': 'listbox', 'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, 'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, accessKey: this.state._accessKey, autocapitalize: 'off', autocorrect: 'off', class: 'kol-single-select__input', disabled: this.state._disabled, name: this.state._name, placeholder: this.state._placeholder, ref: this.catchRef, required: this.state._required, state: this.state, type: 'text', value: this._inputValue }, this.controller.onFacade), { onChange: this.onChange.bind(this), onClick: this.onClick.bind(this), onInput: this.onInput.bind(this), onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            }, placeholder: this.state._placeholder })), this._inputValue && (hAsync(KolIconTag, { key: '9322563cc1fc5ce8a6e9279db242482c4eee13cf', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
+            } });
+    }
+    render() {
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'a8337d95ef18c12894dc607ff24bfb137b4fc293' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'ca146a5bde07e23d8798ce590426176ec0df463a', state: this.state }, hAsync("div", { key: '43e0cef9fef3d9b72dd4b11c9441e3cd69b7b76e', class: "kol-single-select__group" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '2825c0ac997cc509f39e8da4c8b818edd0842155' }, this.getInputProps())), this._inputValue && (hAsync(KolIconTag, { key: '5b7e670f970674f35e903cc473a520f7e9be4a18', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
                 var _a;
                 this.clearSelection();
                 (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
-            }, class: "single-select__delete" })), hAsync("button", { key: '4f363a7421b0cd4b0786f99c1b9ffa321139ca46', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '55735bd35e8720d8a52938df08da15e17b0d4daf', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'f7a9f2479ee66046346ab654282f3439748c5f40', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
+            }, class: "kol-single-select__delete" })), hAsync(CustomSuggestionsToggleFc$1, { key: '2ff836ca1dc8c67711416091d7d8b0119c91871e', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc$1, { key: 'd3038c42215c8bb71745d9aa4f9f8a124541d7b6', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc$1, { index: index, option: option.label, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
-            }, tabIndex: -1, role: "option", "aria-selected": this._value === option.value ? 'true' : undefined, onClick: (event) => {
+            }, selected: this._value === option.value, onClick: (event) => {
                 var _a;
                 this.selectOption(event, option);
                 (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
@@ -23616,7 +23676,7 @@ class KolSingleSelect {
             }, onFocus: () => {
                 this._focusedOptionIndex = index;
                 this.focusOption(index);
-            }, class: "single-select__item", onKeyDown: (e) => {
+            }, onKeyDown: (e) => {
                 var _a;
                 if (e.key === 'Enter' || e.key === 'NumpadEnter') {
                     this.selectOption(e, option);
@@ -23624,7 +23684,7 @@ class KolSingleSelect {
                     this.toggleListbox(e);
                     e.preventDefault();
                 }
-            } }, hAsync("input", { class: "visually-hidden", type: "radio", name: "options", id: `option-radio-${index}`, value: option.value, checked: this._value === option.value || index === this._focusedOptionIndex }), hAsync("label", { htmlFor: `option-radio-${index}`, class: "radio-label" }, option.label))))) : (hAsync("li", { class: "single-select__no-results-message" }, translate('kol-no-results-message'), " ")))))))));
+            } })))) : (hAsync("li", { class: "kol-single-select__no-results-message" }, translate('kol-no-results-message'), " ")))))));
     }
     handleFocusOut() {
         setTimeout(() => {
@@ -23754,7 +23814,7 @@ class KolSingleSelect {
         this._accessKey = undefined;
         this._placeholder = undefined;
         this._disabled = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -23772,7 +23832,7 @@ class KolSingleSelect {
         this._touched = false;
         this._value = undefined;
         this.state = {
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _options: [],
@@ -23792,8 +23852,8 @@ class KolSingleSelect {
     validateDisabled(value) {
         this.controller.validateDisabled(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -23880,7 +23940,7 @@ class KolSingleSelect {
         "_placeholder": ["validatePlaceholder"],
         "_accessKey": ["validateAccessKey"],
         "_disabled": ["validateDisabled"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -23907,7 +23967,7 @@ class KolSingleSelect {
             "_accessKey": [1, "_access-key"],
             "_placeholder": [1],
             "_disabled": [4],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [1],
@@ -23935,7 +23995,7 @@ class KolSingleSelect {
         },
         "$listeners$": [[8, "focusout", "handleFocusOut"], [8, "blur", "handleWindowBlur"], [0, "keydown", "handleKeyDown"], [1, "mousemove", "handleMouseEvent"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
@@ -23953,7 +24013,7 @@ class KolSkipNav {
         };
     }
     render() {
-        return (hAsync("nav", { key: 'fde4d42a89a584d33ca5133c349016f8b49cb5d9', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: '8da0652567609e705d2f072c2b991c0ff2d1ce9c', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
+        return (hAsync("nav", { key: 'bdb9b836ec6c9f4bb0d2e72a2e3779be9013f069', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: 'a29040214a801b13f3e6ad81b6c42d7ad685e38e', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
             return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
         }))));
     }
@@ -24021,7 +24081,7 @@ class KolSpin {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'a9401254fe20503b0130fe2d1bacccde52d9812c', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`), role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
+        return (hAsync(Host, { key: '78146272c08f10d0bde3450838cf18acc290fdc6', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`), role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
     }
     validateShow(value) {
         this.showToggled = this.state._show === true && this._show === false;
@@ -24109,10 +24169,10 @@ class KolSplitButton {
     }
     render() {
         const i18nDropdownLabel = 'kol-split-button-dropdown-label';
-        return (hAsync("div", { key: 'd51241347c67ce3ce55d5baa75debcc1871cd335', class: "kol-split-button" }, hAsync("div", { key: 'b381f8337a15f71626f4630ad22b40dc6ca54a9b', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '36ec337fddcaa8f9c155d29376fdb1762f58d2e7', class: clsx('kol-split-button__button', {
+        return (hAsync("div", { key: 'adfeb36fc1c13115648cab2c692dcf28ede4f663', class: "kol-split-button" }, hAsync("div", { key: '6ddddfa00a901d7a1c02a242384ba6478955c13b', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '8d5545244b2cff5ae573bdd2cb9ec9d7343df844', class: clsx('kol-split-button__button', {
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }), _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: 'e9635c1d2cca6efd5f45261cadccaeec7684c7fc', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '7d0e3381a3cb0fb626426a3f3e093547349bd5be', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: 'e097a43cd139afe1d11629428f53facf788a3f18', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'db7418d346bdb02e131dda105df182cebbbac198' }))));
+            }), _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '541dc194c17523c5cf68f484bfaee3efb534b879', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: 'f3736a72068960bfe628f6b9734ce12c1fbaa3d2', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: '596a0e240cd9bbd6707a314a21387c767fed614a', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '7be4e75220049796535a7267791066a5bf923bc4' }))));
     }
     async closePopup() {
         this.handleOnClose();
@@ -24153,51 +24213,6 @@ class KolSplitButton {
     }; }
 }
 
-class KolSymbol {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this._label = undefined;
-        this._symbol = undefined;
-        this.state = {
-            _label: translate('kol-warning'),
-            _symbol: '',
-        };
-    }
-    render() {
-        return (hAsync(Host, { key: '2aeed4aecded7debd64cec5622e9ff5875a41fe7', class: "kol-symbol" }, hAsync("span", { key: 'f8fd7c4233896ade7b659b47ed5ea4832c839e3f', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
-    }
-    validateLabel(value) {
-        validateLabel(this, value, {
-            required: true,
-        });
-    }
-    validateSymbol(value) {
-        watchString(this, '_symbol', value, {
-            required: true,
-        });
-    }
-    componentWillLoad() {
-        this.validateLabel(this._label);
-        this.validateSymbol(this._symbol);
-    }
-    static get watchers() { return {
-        "_label": ["validateLabel"],
-        "_symbol": ["validateSymbol"]
-    }; }
-    static get cmpMeta() { return {
-        "$flags$": 0,
-        "$tagName$": "kol-symbol",
-        "$members$": {
-            "_label": [1],
-            "_symbol": [1],
-            "state": [32]
-        },
-        "$listeners$": undefined,
-        "$lazyBundleId$": "-",
-        "$attrsToReflect$": []
-    }; }
-}
-
 var Callback;
 (function (Callback) {
     Callback["onBlur"] = "onBlur";
@@ -24317,6 +24332,7 @@ class KolTableStateful {
                 vertical: [],
             },
             _label: '',
+            _minWidth: 'auto',
             _pagination: {
                 _page: 1,
                 _pageSize: 10,
@@ -24560,7 +24576,7 @@ class KolTableStateful {
             horizontal: (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
             vertical: (_d = this.state._headers.vertical) === null || _d === void 0 ? void 0 : _d.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
         };
-        return (hAsync(Host, { key: '50cc31d7951cd8e33c1952074db650d3afeae4c4', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '08bb5ac20de6c9de759b9d0e158dd72c3850000b', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
+        return (hAsync(Host, { key: 'e060a717d5efd96fb63fdc4f4de37fc34ed0c710', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'a415e591ec24f4cc1793205689d90e6366b4a654', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },
@@ -24623,7 +24639,7 @@ class KolTableStateless$1 {
         this._selection = undefined;
     }
     render() {
-        return (hAsync(KolTableStatelessWcTag, { key: 'c1f0e2f14d6802f5a4f446e208cd239af3643f59', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection }));
+        return (hAsync(KolTableStatelessWcTag, { key: '048855cd40a5b65261de66ea0ef42be89f37557e', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection }));
     }
     static get style() { return {
         default: KolTableStatelessDefaultStyle0
@@ -24646,6 +24662,11 @@ class KolTableStateless$1 {
     }; }
 }
 
+const HEADER_CELL_WIDTH_VALIDATOR = /^\d+(\.\d+)?([a-z]+|%)?$/;
+const validateMinWidth = (component, value, options) => {
+    watchValidator(component, '_minWidth', (v) => typeof v === 'string' && HEADER_CELL_WIDTH_VALIDATOR.test(v), new Set(['String', '/^\\d+(\\.\\d+)?([a-z]+|%)?$/']), value, options);
+};
+
 class KolTableStateless {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -24670,7 +24691,7 @@ class KolTableStateless {
                 const dataKey = this.getDataKey(cell.data);
                 key = dataKey ? `${dataKey}-${this.horizontal ? colIndex : rowIndex}` : key;
             }
-            if (cell.asTd === false) {
+            if (cell.headerCell) {
                 return this.renderHeadingCell(cell, rowIndex, colIndex, isVertical);
             }
             else {
@@ -24688,11 +24709,12 @@ class KolTableStateless {
         };
         this.state = {
             _data: [],
-            _label: '',
             _headerCells: {
                 horizontal: [],
                 vertical: [],
             },
+            _label: '',
+            _minWidth: 'auto',
         };
         this.tableDivElementHasScrollbar = false;
         this._data = undefined;
@@ -24722,9 +24744,7 @@ class KolTableStateless {
         });
     }
     validateMinWidth(value) {
-        watchString(this, '_minWidth', value, {
-            defaultValue: undefined,
-        });
+        validateMinWidth(this, value);
     }
     validateOn(value) {
         validateTableCallbacks(this, value);
@@ -24879,7 +24899,7 @@ class KolTableStateless {
                 if (rowsTotal <= i) {
                     const rows = headerCells[i - rowsTotal + rowCount[index]];
                     if (typeof rows === 'object') {
-                        dataRow.push(Object.assign(Object.assign({}, rows), { asTd: false, data: {} }));
+                        dataRow.push(Object.assign(Object.assign({}, rows), { headerCell: true, data: {} }));
                         let rowSpan = 1;
                         if (typeof rows.rowSpan === 'number' && rows.rowSpan > 1) {
                             rowSpan = rows.rowSpan;
@@ -25085,29 +25105,12 @@ class KolTableStateless {
     render() {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
         this.checkboxRefs = [];
-        return (hAsync("div", { key: 'e54d4913ba204c37820b1410e29dd49434836c42', ref: (element) => (this.tableDivElement = element), class: "kol-table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '9b938fee0aa20a126f4d034204b823666da2519f', class: "kol-table__table", style: {
+        return (hAsync("div", { key: '3a3e95a3993c3a10dc7342da4534249ee014979f', ref: (element) => (this.tableDivElement = element), class: "kol-table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'a576fe89e8549a7686cec0af5cc9f9d064870768', class: "kol-table__table", style: {
                 minWidth: this.state._minWidth,
-            } }, hAsync("div", { key: '43ddd7b7fc461041de838739675ebbc8cb81573a', class: "kol-table__focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: '152eed3b8707b4468b01832f66d3765fed729511', class: "kol-table__caption", id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: 'ab7556f7e7ced55730c900240aba7f1112d31449', class: "kol-table__head" }, [
-            this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) &&
-                cols.map((cell, colIndex) => {
-                    if (cell.asTd === true) {
-                        return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: clsx({
-                                [`kol-table__head--${cell.textAlign}`]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
-                            }), colSpan: cell.colSpan, rowSpan: cell.rowSpan, style: {
-                                textAlign: cell.textAlign,
-                                width: cell.width,
-                            }, ref: typeof cell.render === 'function'
-                                ? (el) => {
-                                    this.cellRender(cell, el);
-                                }
-                                : undefined }, typeof cell.render !== 'function' ? cell.label : ''));
-                    }
-                    else {
-                        return this.renderHeadingCell(cell, rowIndex, colIndex, false);
-                    }
-                })))),
+            } }, hAsync("div", { key: '1440b0c066cbff9b3e007d0a3a29f908e498c7b5', class: "kol-table__focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: '0e0ed2a572adf7576f854f0aa524cf5184d8c089', class: "kol-table__caption", id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: 'ca8178d06124396db66ec7acb990152e4cd64976', class: "kol-table__head" }, [
+            this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
             this.renderSpacer('head', this.state._headerCells.horizontal),
-        ])), hAsync("tbody", { key: '9618e888d7c3395b89981f223deab8e91459da47', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot())));
+        ])), hAsync("tbody", { key: '945142452f85ef86c130b3cc7863a2532eb40f6f', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot())));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -25328,9 +25331,9 @@ class KolTabs {
             } }))));
     }
     render() {
-        return (hAsync("div", { key: '536925b9b7b5b4b533e40979c6336c1244846be5', ref: (el) => {
+        return (hAsync("div", { key: '592fb62ac9fe48dbf63d7dfef9ce4e75406a2acf', ref: (el) => {
                 this.tabPanelsElement = el;
-            }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '29aacb950fa25e38b2480b03c1b1cb3d6d554036', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
+            }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '5102f215e596aabaa44212a86ca29b0224d58bf5', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
     }
     validateAlign(value) {
         validateAlign(this, value);
@@ -25557,7 +25560,7 @@ class TextareaController extends InputIconController {
     }
 }
 
-const defaultStyleCss$5 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}";
+const defaultStyleCss$5 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}";
 var KolTextareaDefaultStyle0 = defaultStyleCss$5;
 
 const increaseTextareaHeight = (el) => {
@@ -25602,7 +25605,7 @@ class KolTextarea {
             } });
     }
     render() {
-        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '47de879477c9440c0845a8dae2594d3456bd3eb2' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '366ef8c117cef16adeb8106521d316040f351357', state: this.state }, hAsync(KolTextAreaStateWrapperFc, Object.assign({ key: '55a0e5b8566b0577f5e33f8e5575938737da711c' }, this.getTextAreaProps())))));
+        return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '872d9e86581bcaa2f890bc1922f51e150e719dcc' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'd606938ceeb96ddd460e0da945a41de58201ed8a', state: this.state }, hAsync(KolTextAreaStateWrapperFc, Object.assign({ key: 'e1fff4989bfb2c73e5b33ee6c81be446de2b1994' }, this.getTextAreaProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -25624,7 +25627,7 @@ class KolTextarea {
         this._adjustHeight = false;
         this._disabled = false;
         this._hasCounter = false;
-        this._hideError = false;
+        this._hideMsg = false;
         this._hideLabel = false;
         this._hint = '';
         this._icons = undefined;
@@ -25650,7 +25653,7 @@ class KolTextarea {
             _adjustHeight: false,
             _currentLength: 0,
             _hasValue: false,
-            _hideError: false,
+            _hideMsg: false,
             _id: `id-${nonce()}`,
             _label: '',
             _resize: 'vertical',
@@ -25673,8 +25676,8 @@ class KolTextarea {
     validateHasCounter(value) {
         this.controller.validateHasCounter(value);
     }
-    validateHideError(value) {
-        this.controller.validateHideError(value);
+    validateHideMsg(value) {
+        this.controller.validateHideMsg(value);
     }
     validateHideLabel(value) {
         this.controller.validateHideLabel(value);
@@ -25761,7 +25764,7 @@ class KolTextarea {
         "_adjustHeight": ["validateAdjustHeight"],
         "_disabled": ["validateDisabled"],
         "_hasCounter": ["validateHasCounter"],
-        "_hideError": ["validateHideError"],
+        "_hideMsg": ["validateHideMsg"],
         "_hideLabel": ["validateHideLabel"],
         "_hint": ["validateHint"],
         "_icons": ["validateIcons"],
@@ -25794,7 +25797,7 @@ class KolTextarea {
             "_adjustHeight": [4, "_adjust-height"],
             "_disabled": [4],
             "_hasCounter": [4, "_has-counter"],
-            "_hideError": [1540, "_hide-error"],
+            "_hideMsg": [1540, "_hide-msg"],
             "_hideLabel": [4, "_hide-label"],
             "_hint": [1],
             "_icons": [16],
@@ -25823,7 +25826,7 @@ class KolTextarea {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["_hideError", "_hide-error"], ["_touched", "_touched"], ["_value", "_value"]]
+        "$attrsToReflect$": [["_hideMsg", "_hide-msg"], ["_touched", "_touched"], ["_value", "_value"]]
     }; }
 }
 
@@ -25884,7 +25887,7 @@ class KolToastContainer {
         }
     }
     render() {
-        return (hAsync(Host, { key: '603050406b54aa7d5f2a48bb3ab477365474ecf8', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: '56c9bb464828a2052f1d6b9f2cd7920fe7e12a01', _label: translate('kol-toast-close-all'), class: "kol-toast-container__button-close-all", _on: {
+        return (hAsync(Host, { key: '4446bc4544f05d74ee8afd3757d8c0b7ce58d6c4', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: '923a3ae7f4463e710bebbe94ffb7d55812510f70', _label: translate('kol-toast-close-all'), class: "kol-toast-container__button-close-all", _on: {
                 onClick: () => {
                     void this.closeAll();
                 },
@@ -25935,7 +25938,7 @@ class KolToolbar {
         this._items = undefined;
     }
     render() {
-        return (hAsync("div", { key: '331cd672022cf5f69c9286f34112d30e6e2a90b2', class: "kol-toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
+        return (hAsync("div", { key: '303cfe01af1a3776d1a3161bfd6253449c4101c1', class: "kol-toolbar", role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -26133,7 +26136,7 @@ class KolTooltipWc {
         this.showOrHideTooltip();
     }
     render() {
-        return (hAsync(Host, { key: '1969c359f2791bbc692e20f22853d6a31ddf56c9', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: 'df0bbf5fbdcc5d786c89d646dfcc0265d830ba9d', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: 'bec8e74abb0c95a3571b384127a9c8f8a6849e15', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc$1, { key: '067231f75c0fc5f26f4c6d6f6ca8088be4ea0473', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
+        return (hAsync(Host, { key: '6b03bbbae8b6a083bcdb3b304e9985101a5be022', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: '75fa23644f41ba3fde4e1be656ed89fe2bd5be9d', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: '74d99d02b5d7557e4dc9c8d81880d76fbc23aa2d', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc$1, { key: '7a6b461ff6da4a292fabd08ab8a6bd90412a85fc', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
     }
     validateBadgeText(value) {
         validateBadgeText(this, value);
@@ -26211,7 +26214,7 @@ class KolTree {
         this._label = undefined;
     }
     render() {
-        return (hAsync(KolTreeWcTag, { key: '33e5fbffe519e9536aec0c0bacc50582ce9d5993', _label: this._label }, hAsync("slot", { key: 'e0ba6b54f2984151fedfd68f26243ebb62057202' })));
+        return (hAsync(KolTreeWcTag, { key: '69fcda89930476d36e84516cc64cc7eebf1094db', _label: this._label }, hAsync("slot", { key: '5259ea6f1eb1fb6f3ed8b8a64e7a442f27e4abce' })));
     }
     static get style() { return {
         default: KolTreeDefaultStyle0
@@ -26259,7 +26262,7 @@ class KolTreeItem {
         return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
     }
     render() {
-        return (hAsync(KolTreeItemWcTag, { key: 'a1fc5ed83f513f6b2f6f47d767de2abbdeb4aa3f', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '83b79ada8d5ac5d6c99fbb9c057f1ca9eeec3de4' })));
+        return (hAsync(KolTreeItemWcTag, { key: '59e322059558664a9ca5d03a7a98bafa9b84cb98', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '728328010d981a229607662273528d35587ef1e4' })));
     }
     static get style() { return {
         default: KolTreeItemDefaultStyle0
@@ -26302,12 +26305,12 @@ class KolTreeItemWc {
     }
     render() {
         const { _href, _active, _hasChildren, _open, _label } = this.state;
-        return (hAsync(Host, { key: 'f8c9e515206db04afb8151d1271885110e40e1a4', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'cd86323cb26384ee0f3a3b5c23bd7fec512db1e1', class: "kol-tree-item", style: {
+        return (hAsync(Host, { key: 'e8cebee52ed0f115c3aa30e82e2e3ccf5d09e626', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'c4b1d56ae69f55ca57ad8d863df02fe0d7ff4f00', class: "kol-tree-item", style: {
                 '--level': `${this.level}`,
-            } }, hAsync(KolLinkWcTag, { key: 'bbfb74e6ab60543cdb30efca235f99ed78ea95d2', class: clsx('kol-tree-item__link', {
+            } }, hAsync(KolLinkWcTag, { key: '8e87e00dae2d0e6dcad5602e28b5642bc31702f5', class: clsx('kol-tree-item__link', {
                 'kol-tree-item__link--first-level': this.level === 0,
                 'kol-tree-item__link--active': _active,
-            }), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '0faba8ad9946ac707790f4134298477682719215', slot: "expert" }, _hasChildren && (hAsync("span", { key: '5a51f2f3bbb8596758ecad1da3966671212e405b', class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { key: '42f50dee8ccdcb764f90c1685241d9aaa7e4fce7', class: "kol-tree-item__toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))), ' ', _label)), hAsync("ul", { key: 'b0df6b5e84aa152a74b5f17014e360330d19afee', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '1ce889bfd13e6357325249da2eef8fbe18840609' })))));
+            }), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: 'f037767f3e0142ec622d5e3dc03f303b30831abf', slot: "expert" }, _hasChildren && (hAsync("span", { key: 'a344ded5e01b484b686aeb71b4370fe37f3fd8b1', class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { key: 'd84793747ce43c28fca27abde4c76f4a5feb060b', class: "kol-tree-item__toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))), ' ', _label)), hAsync("ul", { key: '828ff0900dc3f9018e939ef0d519cdcabbab652b', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '7fd8f3b71eb060d42835e3d1b311ab4bb7930f99' })))));
     }
     validateActive(value) {
         validateActive(this, value || false);
@@ -26412,7 +26415,7 @@ class KolTreeWc {
         validateLabel(this, value);
     }
     render() {
-        return (hAsync(Host, { key: '960093f8beb0bea1ba3008c55baf02f2a07133a9', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: 'e6ec07ca70acd45f3187ca3cf8399a3632a36844', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: 'a32fb943679019b96215b9a5269264f79d434430', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'f378d0f96902cf57b2b364e1961b7fed66b87168' })))));
+        return (hAsync(Host, { key: '7ed304596f8d9f4ab353c881aa3e7a058d23b1cc', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: '53d283e8c52792eb96d540a364cd13f6e504a433', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: 'c2ce2459919900ee430507a5599ff09d54638376', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'cba291c46b0bbfe699b154b0333932a1829ff03e' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
@@ -26607,7 +26610,7 @@ class KolVersion {
         };
     }
     render() {
-        return (hAsync(Host, { key: 'f358398c259ebbc881e50fec99ba8b8bf8b662f4', class: "kol-version" }, hAsync(KolBadgeTag, { key: '7351a9900477ed5e31f610ef5a02eeae9995def9', _color: "#bec5c9", _icons: {
+        return (hAsync(Host, { key: 'd243221867a53ea02e895c0ce390bfea16f7ec4c', class: "kol-version" }, hAsync(KolBadgeTag, { key: '7cf5abc0ad77a88aa4404efbe769b860041040fa', _color: "#bec5c9", _icons: {
                 left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
             }, _label: this.state._label })));
     }
@@ -26698,7 +26701,6 @@ registerComponents([
   KolSkipNav,
   KolSpin,
   KolSplitButton,
-  KolSymbol,
   KolTableStateful,
   KolTableStateless$1,
   KolTableStateless,