@public-ui/hydrate 3.0.9-rc.0 → 3.0.9-rc.2

package/dist/index.js

@@ -146,7 +146,7 @@ function _mergeNamespaces(n, m) {
 
 const NAMESPACE = 'kolibri';
 const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
-const Env = /* kolibri */ {"kolibriVersion":"3.0.9-rc.0"};
+const Env = /* kolibri */ {"kolibriVersion":"3.0.9-rc.2"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -2340,13 +2340,13 @@ const validateIcons = (component, value, options = {}) => {
                 isString$2(value, 1) ||
                 (typeof value === 'object' &&
                     value !== null &&
-                    (isString$2(value.left, 1) ||
+                    (isString$2(value.left, 0) ||
                         isIcon(value.left) ||
-                        isString$2(value.right, 1) ||
+                        isString$2(value.right, 0) ||
                         isIcon(value.right) ||
-                        isString$2(value.top, 1) ||
+                        isString$2(value.top, 0) ||
                         isIcon(value.top) ||
-                        isString$2(value.bottom, 1) ||
+                        isString$2(value.bottom, 0) ||
                         isIcon(value.bottom))));
         }, new Set(['KoliBriIcon']), value, Object.assign(Object.assign({}, options), { defaultValue: {}, hooks: {
                 afterPatch: (_a = options.hooks) === null || _a === void 0 ? void 0 : _a.afterPatch,
@@ -9491,7 +9491,7 @@ const InputContainer$1 = (_a, children) => {
 };
 const KolFormFieldFc = (props, children) => {
     var _a;
-    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, maxLength, formFieldLabelProps, formFieldHintProps, formFieldTooltipProps, formFieldMsgProps, 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", "maxLength", "formFieldLabelProps", "formFieldHintProps", "formFieldTooltipProps", "formFieldMsgProps", "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, maxLength, ariaDescribedBy, formFieldLabelProps, formFieldHintProps, formFieldTooltipProps, formFieldMsgProps, 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", "maxLength", "ariaDescribedBy", "formFieldLabelProps", "formFieldHintProps", "formFieldTooltipProps", "formFieldMsgProps", "formFieldInputProps"]);
     const showLabel = !renderNoLabel;
     const showHint = !renderNoHint;
     const showTooltip = !renderNoTooltip;
@@ -9511,7 +9511,7 @@ const KolFormFieldFc = (props, children) => {
     if (showMsg) {
         stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [`kol-form-field--${msgType || 'error'}`]: true, [`kol-form-field--${getModifierClassNameByMsgType({ type: msgType })}`]: true });
     }
-    return (hAsync(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames) }, other), showLabel && (hAsync(KolFormFieldLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey, readOnly: readOnly }))), hAsync(InputContainer$1, Object.assign({}, formFieldInputProps), children, useTooltipInsteadOfLabel && hideLabel === true && (hAsync(FormFieldTooltipFc, Object.assign({}, (formFieldTooltipProps || {}), { id: id, label: label, align: tooltipAlign, badgeText: badgeText })))), counter ? hAsync(KolFormFieldCounterFc, Object.assign({ id: id }, counter)) : null, maxLength ? hAsync(KolFormFieldCharacterLimitHintFc, { id: id, maxLength: maxLength }) : null, showMsg && !hideMsg && hAsync(FormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && hAsync(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren));
+    return (hAsync(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames), "aria-describedby": ariaDescribedBy }, other), showLabel && (hAsync(KolFormFieldLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey, readOnly: readOnly }))), hAsync(InputContainer$1, Object.assign({}, formFieldInputProps), children, useTooltipInsteadOfLabel && hideLabel === true && (hAsync(FormFieldTooltipFc, Object.assign({}, (formFieldTooltipProps || {}), { id: id, label: label, align: tooltipAlign, badgeText: badgeText })))), counter ? hAsync(KolFormFieldCounterFc, Object.assign({ id: id }, counter)) : null, maxLength ? hAsync(KolFormFieldCharacterLimitHintFc, { id: id, maxLength: maxLength }) : null, showMsg && !hideMsg && hAsync(FormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && hAsync(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren));
 };
 
 const KolIconFc = (props) => {
@@ -18796,7 +18796,7 @@ class KolButton {
     }; }
 }
 
-const defaultStyleCss$F = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-button--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-button__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-button__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--inline {\n    min-height: unset;\n  }\n}";
+const defaultStyleCss$F = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-button--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-button__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-button__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--inline {\n    min-width: unset;\n    min-height: unset;\n  }\n}";
 
 class KolButtonLink {
     constructor(hostRef) {
@@ -19528,7 +19528,11 @@ function getFormFieldProps(state) {
 }
 const FormFieldStateWrapper = (_a, children) => {
     var { state } = _a, other = __rest(_a, ["state"]);
-    return (hAsync(KolFormFieldFc, Object.assign({}, getFormFieldProps(state), other), children));
+    const { ariaDescribedBy: ariaDescribedByArray } = getRenderStates(state);
+    const isRadioVariant = other.component === 'fieldset' || ('_options' in state && '_orientation' in state);
+    const ariaDescribedBy = isRadioVariant && ariaDescribedByArray.length > 0 ? ariaDescribedByArray.join(' ') : undefined;
+    const baseProps = getFormFieldProps(state);
+    return (hAsync(KolFormFieldFc, Object.assign({}, baseProps, other, { ariaDescribedBy: ariaDescribedBy }), children));
 };
 
 const KolButtonFc = (props) => {
@@ -21222,7 +21226,6 @@ class KolInputCheckbox {
                 [`kol-input-checkbox--label-align-${this.state._labelAlign || 'right'}`]: true,
             }),
             tooltipAlign: this._tooltipAlign,
-            'data-role': this.state._variant === 'button' ? 'button' : undefined,
             alert: this.showAsAlert(),
             renderNoTooltip: true,
         };
@@ -21260,7 +21263,7 @@ class KolInputCheckbox {
         return this.state._icons.unchecked;
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '447623044a8d0512702955f4711a4c1869f9e3c4' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: 'a5301abd11f004163d8b870ecd99050d4b8b84bb' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '3df758d2985f455f7038b3423bd74f8a63642981' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ea78897d3814398c2b65d1a345d910d874a08098' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '6b5bee7c4aa84f1a204f1ce6aafd5981e48d64b5' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '4f8275511a19f813c31ae714c448133588480339' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23277,7 +23280,6 @@ const RadioFc = (_a) => {
 };
 
 function getRadioProps(state, inputProps = {}) {
-    const { ariaDescribedBy } = getRenderStates(state);
     const props = {
         id: state._id,
         hideLabel: state._hideLabel,
@@ -23285,7 +23287,6 @@ function getRadioProps(state, inputProps = {}) {
         value: state._value,
         disabled: state._disabled,
         name: state._name,
-        ariaDescribedBy,
     };
     if ('_required' in state)
         props.required = state._required;
@@ -23308,7 +23309,23 @@ class KolInputRadio {
     }
     async kolFocus() {
         var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    getFocusableInput() {
+        const options = this.state._options;
+        const isComponentDisabled = Boolean(this.state._disabled);
+        const selectedIndex = options.findIndex((option) => option.value === this.state._value && !isComponentDisabled && !option.disabled);
+        if (selectedIndex !== -1) {
+            const input = this.inputRefs.get(selectedIndex);
+            if (input) {
+                return input;
+            }
+        }
+        const firstEnabledIndex = options.findIndex((option) => !isComponentDisabled && !option.disabled);
+        if (firstEnabledIndex !== -1) {
+            return this.inputRefs.get(firstEnabledIndex);
+        }
+        return undefined;
     }
     getFormFieldProps() {
         return {
@@ -23329,7 +23346,7 @@ class KolInputRadio {
         };
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9dc7e4569627db33b82ae9ec448e30087d87ab6f' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9e2b42643b7eec87fcef68c4e8bf471e67738689' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
     }
     calculateDisabled(option) {
         return Boolean(this.state._disabled) || Boolean(option.disabled);
@@ -23350,7 +23367,12 @@ class KolInputRadio {
     getInputProps(option, id, index, selected) {
         return {
             state: this.state,
-            inputProps: Object.assign(Object.assign({ id: id, ref: this.state._value === option.value ? this.catchRef : undefined, 'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: 'radio', name: this.state._name || this.state._id, value: `-${index}`, checked: selected, disabled: this.calculateDisabled(option) }, this.controller.onFacade), { onChange: this.onChange, onClick: undefined, onInput: this.onInput, onKeyDown: this.onKeyDown.bind(this), onFocus: (event) => {
+            inputProps: Object.assign(Object.assign({ id: id, ref: (ref) => {
+                    this.catchInputRef(index)(ref);
+                    if (selected) {
+                        this.catchRef(ref);
+                    }
+                }, 'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: 'radio', name: this.state._name || this.state._id, value: `-${index}`, checked: selected, disabled: this.calculateDisabled(option) }, this.controller.onFacade), { onChange: this.onChange, onClick: undefined, onInput: this.onInput, onKeyDown: this.onKeyDown.bind(this), onFocus: (event) => {
                     this.controller.onFacade.onFocus(event);
                     this.inputHasFocus = true;
                 }, onBlur: (event) => {
@@ -23366,9 +23388,18 @@ class KolInputRadio {
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.inputRefs = new Map();
         this.catchRef = (ref) => {
             this.inputRef = ref;
         };
+        this.catchInputRef = (index) => (ref) => {
+            if (ref) {
+                this.inputRefs.set(index, ref);
+            }
+            else {
+                this.inputRefs.delete(index);
+            }
+        };
         this._disabled = false;
         this._hideMsg = false;
         this._hideLabel = false;
@@ -24659,7 +24690,7 @@ class KolNav {
                     'kol-nav__list--horizontal': props.deep === 0 && props.orientation === 'horizontal',
                     'kol-nav__list--vertical': props.deep !== 0 || props.orientation === 'vertical',
                 }), id: props.deep > 0 ? props.id : undefined }, props.links.map((link, index) => {
-                return this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation, props.id);
+                return this.li(props.collapsible, props.deep, index, link, props.orientation, props.id);
             })));
         };
         this._collapsible = true;
@@ -24684,19 +24715,40 @@ class KolNav {
     collapseChildren(children) {
         this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children) });
     }
-    entry(collapsible, hideLabel, hasChildren, entry, expanded, ariaID) {
-        var _a;
-        const icons = {
-            left: this.state._hasIconsWhenExpanded || this.state._hideLabel
-                ? ((_a = entry._icons) === null || _a === void 0 ? void 0 : _a.toString()) || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)
-                : undefined,
-            right: collapsible && hasChildren ? 'codicon codicon-' + (expanded ? 'remove' : 'add') : undefined,
+    buildIconObject(collapsible, expanded, leftIcon) {
+        const icon = {
+            left: '',
+            right: '',
         };
+        if (this.state._hasIconsWhenExpanded && leftIcon) {
+            icon.left = leftIcon;
+        }
+        if (this.state._hideLabel) {
+            if (leftIcon) {
+                icon.left = leftIcon;
+            }
+            else {
+                icon.left = 'codicon codicon-symbol-method';
+            }
+        }
+        if (collapsible) {
+            if (expanded) {
+                icon.right = 'codicon codicon-remove';
+            }
+            else {
+                icon.right = 'codicon codicon-add';
+            }
+        }
+        return icon;
+    }
+    entry(collapsible, hasChildren, entry, expanded, ariaID) {
+        var _a;
+        const icons = this.buildIconObject(collapsible && hasChildren, expanded, (_a = entry._icons) === null || _a === void 0 ? void 0 : _a.toString());
         return (hAsync("div", { class: "kol-nav__entry-wrapper" }, entryIsLink(entry) ? (hAsync(KolLinkWcTag, Object.assign({ class: clsx('kol-nav__entry kol-nav__entry--link', {
                 'kol-nav__entry--collapsible': collapsible,
-            }) }, entry, { _hideLabel: hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined }))) : (hAsync(KolButtonWcTag, { class: clsx('kol-nav__entry kol-nav__entry--button', {
+            }) }, entry, { _hideLabel: this.state._hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined }))) : (hAsync(KolButtonWcTag, { class: clsx('kol-nav__entry kol-nav__entry--button', {
                 'kol-nav__entry--collapsible': collapsible,
-            }), _label: entry._label, _hideLabel: hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined, _on: {
+            }), _label: entry._label, _hideLabel: this.state._hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined, _on: {
                 onClick: (event, value) => {
                     if (entryIsButton(entry) && typeof entry._on.onClick === 'function') {
                         entry._on.onClick(event, value);
@@ -24705,7 +24757,7 @@ class KolNav {
                 },
             } }))));
     }
-    li(collapsible, hideLabel, deep, index, link, orientation, ariaIDparent) {
+    li(collapsible, deep, index, link, orientation, ariaIDparent) {
         const active = !!link._active;
         const hasChildren = Array.isArray(link._children) && link._children.length > 0;
         const expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));
@@ -24714,7 +24766,7 @@ class KolNav {
                 'kol-nav__list-item--active': active,
                 'kol-nav__list-item--expanded': expanded,
                 'kol-nav__list-item--has-children': hasChildren,
-            }), key: index }, this.entry(collapsible, hideLabel, hasChildren, link, expanded, ariaID), expanded && (hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: deep + 1, links: link._children || [], orientation: orientation, id: ariaID }))));
+            }), key: index }, this.entry(collapsible, hasChildren, link, expanded, ariaID), expanded && hAsync(this.linkList, { collapsible: collapsible, deep: deep + 1, links: link._children || [], orientation: orientation, id: ariaID })));
     }
     initializeExpandedChildren() {
         this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: [] });
@@ -24743,14 +24795,11 @@ class KolNav {
             hasCompactButton = false;
             devWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);
         }
-        const collapsible = this.state._collapsible === true;
-        const hideLabel = this.state._hideLabel === true;
-        const orientation = this.state._orientation;
-        return (hAsync("div", { key: '12bfebdeb71dff8a681907c30a9bdde7f0d359b3', class: clsx('kol-nav', `kol-nav--${orientation}`, {
+        return (hAsync("div", { key: 'b8db85b304f436fa5882f487f6b83a74f833c943', class: clsx('kol-nav', `kol-nav--${this.state._orientation}`, {
                 'kol-nav--is-compact': this.state._hideLabel,
-            }) }, hAsync("nav", { key: '692debc445b1cf2b3ee383ee849b396acf0bcbe9', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: 'fee81683dc4d8436173d58244eba5182bbfa5323', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation, id: this.listId })), hasCompactButton && (hAsync("div", { key: 'a583663ae21335220d492567dac63fcba31db7c3', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '291714ba69e6c4be183547a1252e0dc2b7413b4a', class: "kol-nav__toggle-button", _ariaControls: this.navId, _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: 'e10d8ebdf16027383e98ea463f20b5ee7a30617d', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: '88b5acc16bcebe287533a7f0ed06a2a3d6994a6d', collapsible: this.state._collapsible, deep: 0, links: this.state._links, orientation: this.state._orientation, id: this.listId })), hasCompactButton && (hAsync("div", { key: 'e7f4432560e5315178f182b7197da9d66f1ee901', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '23b584805e69dc1cb20204a77adae0aefb313b21', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
                 onClick: () => {
-                    this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
+                    this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
                 },
             }, _tooltipAlign: "right" })))));
     }
@@ -30523,7 +30572,7 @@ class KolTextarea {
     }; }
 }
 
-const defaultStyleCss$4 = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\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    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    flex-direction: column;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}";
+const defaultStyleCss$4 = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\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    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    max-width: 90vw;\n    flex-direction: column;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}";
 
 const TRANSITION_TIMEOUT = 300;
 class KolToastContainer {

package/dist/index.mjs

@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
 
 const NAMESPACE = 'kolibri';
 const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
-const Env = /* kolibri */ {"kolibriVersion":"3.0.9-rc.0"};
+const Env = /* kolibri */ {"kolibriVersion":"3.0.9-rc.2"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -2338,13 +2338,13 @@ const validateIcons = (component, value, options = {}) => {
                 isString$2(value, 1) ||
                 (typeof value === 'object' &&
                     value !== null &&
-                    (isString$2(value.left, 1) ||
+                    (isString$2(value.left, 0) ||
                         isIcon(value.left) ||
-                        isString$2(value.right, 1) ||
+                        isString$2(value.right, 0) ||
                         isIcon(value.right) ||
-                        isString$2(value.top, 1) ||
+                        isString$2(value.top, 0) ||
                         isIcon(value.top) ||
-                        isString$2(value.bottom, 1) ||
+                        isString$2(value.bottom, 0) ||
                         isIcon(value.bottom))));
         }, new Set(['KoliBriIcon']), value, Object.assign(Object.assign({}, options), { defaultValue: {}, hooks: {
                 afterPatch: (_a = options.hooks) === null || _a === void 0 ? void 0 : _a.afterPatch,
@@ -9489,7 +9489,7 @@ const InputContainer$1 = (_a, children) => {
 };
 const KolFormFieldFc = (props, children) => {
     var _a;
-    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, maxLength, formFieldLabelProps, formFieldHintProps, formFieldTooltipProps, formFieldMsgProps, 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", "maxLength", "formFieldLabelProps", "formFieldHintProps", "formFieldTooltipProps", "formFieldMsgProps", "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, maxLength, ariaDescribedBy, formFieldLabelProps, formFieldHintProps, formFieldTooltipProps, formFieldMsgProps, 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", "maxLength", "ariaDescribedBy", "formFieldLabelProps", "formFieldHintProps", "formFieldTooltipProps", "formFieldMsgProps", "formFieldInputProps"]);
     const showLabel = !renderNoLabel;
     const showHint = !renderNoHint;
     const showTooltip = !renderNoTooltip;
@@ -9509,7 +9509,7 @@ const KolFormFieldFc = (props, children) => {
     if (showMsg) {
         stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [`kol-form-field--${msgType || 'error'}`]: true, [`kol-form-field--${getModifierClassNameByMsgType({ type: msgType })}`]: true });
     }
-    return (hAsync(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames) }, other), showLabel && (hAsync(KolFormFieldLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey, readOnly: readOnly }))), hAsync(InputContainer$1, Object.assign({}, formFieldInputProps), children, useTooltipInsteadOfLabel && hideLabel === true && (hAsync(FormFieldTooltipFc, Object.assign({}, (formFieldTooltipProps || {}), { id: id, label: label, align: tooltipAlign, badgeText: badgeText })))), counter ? hAsync(KolFormFieldCounterFc, Object.assign({ id: id }, counter)) : null, maxLength ? hAsync(KolFormFieldCharacterLimitHintFc, { id: id, maxLength: maxLength }) : null, showMsg && !hideMsg && hAsync(FormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && hAsync(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren));
+    return (hAsync(Component, Object.assign({ class: clsx('kol-form-field', stateCssClasses, classNames), "aria-describedby": ariaDescribedBy }, other), showLabel && (hAsync(KolFormFieldLabelFc, Object.assign({}, (formFieldLabelProps || {}), { id: id, hasExpertSlot: hasExpertSlot, hideLabel: hideLabel, label: label, accessKey: accessKey, shortKey: shortKey, readOnly: readOnly }))), hAsync(InputContainer$1, Object.assign({}, formFieldInputProps), children, useTooltipInsteadOfLabel && hideLabel === true && (hAsync(FormFieldTooltipFc, Object.assign({}, (formFieldTooltipProps || {}), { id: id, label: label, align: tooltipAlign, badgeText: badgeText })))), counter ? hAsync(KolFormFieldCounterFc, Object.assign({ id: id }, counter)) : null, maxLength ? hAsync(KolFormFieldCharacterLimitHintFc, { id: id, maxLength: maxLength }) : null, showMsg && !hideMsg && hAsync(FormFieldMsgFc, Object.assign({}, (formFieldMsgProps || {}), { id: id, alert: alert, msg: msg })), showHint && hAsync(KolFormFieldHintFc, Object.assign({}, (formFieldHintProps || {}), { id: id, hint: hint })), anotherChildren));
 };
 
 const KolIconFc = (props) => {
@@ -18794,7 +18794,7 @@ class KolButton {
     }; }
 }
 
-const defaultStyleCss$F = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-button--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-button__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-button__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--inline {\n    min-height: unset;\n  }\n}";
+const defaultStyleCss$F = "/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-button--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-button__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-button__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--inline {\n    min-width: unset;\n    min-height: unset;\n  }\n}";
 
 class KolButtonLink {
     constructor(hostRef) {
@@ -19526,7 +19526,11 @@ function getFormFieldProps(state) {
 }
 const FormFieldStateWrapper = (_a, children) => {
     var { state } = _a, other = __rest(_a, ["state"]);
-    return (hAsync(KolFormFieldFc, Object.assign({}, getFormFieldProps(state), other), children));
+    const { ariaDescribedBy: ariaDescribedByArray } = getRenderStates(state);
+    const isRadioVariant = other.component === 'fieldset' || ('_options' in state && '_orientation' in state);
+    const ariaDescribedBy = isRadioVariant && ariaDescribedByArray.length > 0 ? ariaDescribedByArray.join(' ') : undefined;
+    const baseProps = getFormFieldProps(state);
+    return (hAsync(KolFormFieldFc, Object.assign({}, baseProps, other, { ariaDescribedBy: ariaDescribedBy }), children));
 };
 
 const KolButtonFc = (props) => {
@@ -21220,7 +21224,6 @@ class KolInputCheckbox {
                 [`kol-input-checkbox--label-align-${this.state._labelAlign || 'right'}`]: true,
             }),
             tooltipAlign: this._tooltipAlign,
-            'data-role': this.state._variant === 'button' ? 'button' : undefined,
             alert: this.showAsAlert(),
             renderNoTooltip: true,
         };
@@ -21258,7 +21261,7 @@ class KolInputCheckbox {
         return this.state._icons.unchecked;
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '447623044a8d0512702955f4711a4c1869f9e3c4' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: 'a5301abd11f004163d8b870ecd99050d4b8b84bb' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '3df758d2985f455f7038b3423bd74f8a63642981' }, this.getInputProps())))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'ea78897d3814398c2b65d1a345d910d874a08098' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '6b5bee7c4aa84f1a204f1ce6aafd5981e48d64b5' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '4f8275511a19f813c31ae714c448133588480339' }, this.getInputProps())))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -23275,7 +23278,6 @@ const RadioFc = (_a) => {
 };
 
 function getRadioProps(state, inputProps = {}) {
-    const { ariaDescribedBy } = getRenderStates(state);
     const props = {
         id: state._id,
         hideLabel: state._hideLabel,
@@ -23283,7 +23285,6 @@ function getRadioProps(state, inputProps = {}) {
         value: state._value,
         disabled: state._disabled,
         name: state._name,
-        ariaDescribedBy,
     };
     if ('_required' in state)
         props.required = state._required;
@@ -23306,7 +23307,23 @@ class KolInputRadio {
     }
     async kolFocus() {
         var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = this.getFocusableInput()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    getFocusableInput() {
+        const options = this.state._options;
+        const isComponentDisabled = Boolean(this.state._disabled);
+        const selectedIndex = options.findIndex((option) => option.value === this.state._value && !isComponentDisabled && !option.disabled);
+        if (selectedIndex !== -1) {
+            const input = this.inputRefs.get(selectedIndex);
+            if (input) {
+                return input;
+            }
+        }
+        const firstEnabledIndex = options.findIndex((option) => !isComponentDisabled && !option.disabled);
+        if (firstEnabledIndex !== -1) {
+            return this.inputRefs.get(firstEnabledIndex);
+        }
+        return undefined;
     }
     getFormFieldProps() {
         return {
@@ -23327,7 +23344,7 @@ class KolInputRadio {
         };
     }
     render() {
-        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9dc7e4569627db33b82ae9ec448e30087d87ab6f' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
+        return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9e2b42643b7eec87fcef68c4e8bf471e67738689' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
     }
     calculateDisabled(option) {
         return Boolean(this.state._disabled) || Boolean(option.disabled);
@@ -23348,7 +23365,12 @@ class KolInputRadio {
     getInputProps(option, id, index, selected) {
         return {
             state: this.state,
-            inputProps: Object.assign(Object.assign({ id: id, ref: this.state._value === option.value ? this.catchRef : undefined, 'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: 'radio', name: this.state._name || this.state._id, value: `-${index}`, checked: selected, disabled: this.calculateDisabled(option) }, this.controller.onFacade), { onChange: this.onChange, onClick: undefined, onInput: this.onInput, onKeyDown: this.onKeyDown.bind(this), onFocus: (event) => {
+            inputProps: Object.assign(Object.assign({ id: id, ref: (ref) => {
+                    this.catchInputRef(index)(ref);
+                    if (selected) {
+                        this.catchRef(ref);
+                    }
+                }, 'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: 'radio', name: this.state._name || this.state._id, value: `-${index}`, checked: selected, disabled: this.calculateDisabled(option) }, this.controller.onFacade), { onChange: this.onChange, onClick: undefined, onInput: this.onInput, onKeyDown: this.onKeyDown.bind(this), onFocus: (event) => {
                     this.controller.onFacade.onFocus(event);
                     this.inputHasFocus = true;
                 }, onBlur: (event) => {
@@ -23364,9 +23386,18 @@ class KolInputRadio {
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.inputRefs = new Map();
         this.catchRef = (ref) => {
             this.inputRef = ref;
         };
+        this.catchInputRef = (index) => (ref) => {
+            if (ref) {
+                this.inputRefs.set(index, ref);
+            }
+            else {
+                this.inputRefs.delete(index);
+            }
+        };
         this._disabled = false;
         this._hideMsg = false;
         this._hideLabel = false;
@@ -24657,7 +24688,7 @@ class KolNav {
                     'kol-nav__list--horizontal': props.deep === 0 && props.orientation === 'horizontal',
                     'kol-nav__list--vertical': props.deep !== 0 || props.orientation === 'vertical',
                 }), id: props.deep > 0 ? props.id : undefined }, props.links.map((link, index) => {
-                return this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation, props.id);
+                return this.li(props.collapsible, props.deep, index, link, props.orientation, props.id);
             })));
         };
         this._collapsible = true;
@@ -24682,19 +24713,40 @@ class KolNav {
     collapseChildren(children) {
         this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren !== children) });
     }
-    entry(collapsible, hideLabel, hasChildren, entry, expanded, ariaID) {
-        var _a;
-        const icons = {
-            left: this.state._hasIconsWhenExpanded || this.state._hideLabel
-                ? ((_a = entry._icons) === null || _a === void 0 ? void 0 : _a.toString()) || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)
-                : undefined,
-            right: collapsible && hasChildren ? 'codicon codicon-' + (expanded ? 'remove' : 'add') : undefined,
+    buildIconObject(collapsible, expanded, leftIcon) {
+        const icon = {
+            left: '',
+            right: '',
         };
+        if (this.state._hasIconsWhenExpanded && leftIcon) {
+            icon.left = leftIcon;
+        }
+        if (this.state._hideLabel) {
+            if (leftIcon) {
+                icon.left = leftIcon;
+            }
+            else {
+                icon.left = 'codicon codicon-symbol-method';
+            }
+        }
+        if (collapsible) {
+            if (expanded) {
+                icon.right = 'codicon codicon-remove';
+            }
+            else {
+                icon.right = 'codicon codicon-add';
+            }
+        }
+        return icon;
+    }
+    entry(collapsible, hasChildren, entry, expanded, ariaID) {
+        var _a;
+        const icons = this.buildIconObject(collapsible && hasChildren, expanded, (_a = entry._icons) === null || _a === void 0 ? void 0 : _a.toString());
         return (hAsync("div", { class: "kol-nav__entry-wrapper" }, entryIsLink(entry) ? (hAsync(KolLinkWcTag, Object.assign({ class: clsx('kol-nav__entry kol-nav__entry--link', {
                 'kol-nav__entry--collapsible': collapsible,
-            }) }, entry, { _hideLabel: hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined }))) : (hAsync(KolButtonWcTag, { class: clsx('kol-nav__entry kol-nav__entry--button', {
+            }) }, entry, { _hideLabel: this.state._hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined }))) : (hAsync(KolButtonWcTag, { class: clsx('kol-nav__entry kol-nav__entry--button', {
                 'kol-nav__entry--collapsible': collapsible,
-            }), _label: entry._label, _hideLabel: hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined, _on: {
+            }), _label: entry._label, _hideLabel: this.state._hideLabel, _icons: icons, _ariaControls: collapsible && hasChildren && expanded ? ariaID : undefined, _ariaExpanded: collapsible && hasChildren ? expanded : undefined, _on: {
                 onClick: (event, value) => {
                     if (entryIsButton(entry) && typeof entry._on.onClick === 'function') {
                         entry._on.onClick(event, value);
@@ -24703,7 +24755,7 @@ class KolNav {
                 },
             } }))));
     }
-    li(collapsible, hideLabel, deep, index, link, orientation, ariaIDparent) {
+    li(collapsible, deep, index, link, orientation, ariaIDparent) {
         const active = !!link._active;
         const hasChildren = Array.isArray(link._children) && link._children.length > 0;
         const expanded = Boolean(link._children && this.state._expandedChildren.includes(link._children));
@@ -24712,7 +24764,7 @@ class KolNav {
                 'kol-nav__list-item--active': active,
                 'kol-nav__list-item--expanded': expanded,
                 'kol-nav__list-item--has-children': hasChildren,
-            }), key: index }, this.entry(collapsible, hideLabel, hasChildren, link, expanded, ariaID), expanded && (hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: deep + 1, links: link._children || [], orientation: orientation, id: ariaID }))));
+            }), key: index }, this.entry(collapsible, hasChildren, link, expanded, ariaID), expanded && hAsync(this.linkList, { collapsible: collapsible, deep: deep + 1, links: link._children || [], orientation: orientation, id: ariaID })));
     }
     initializeExpandedChildren() {
         this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: [] });
@@ -24741,14 +24793,11 @@ class KolNav {
             hasCompactButton = false;
             devWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);
         }
-        const collapsible = this.state._collapsible === true;
-        const hideLabel = this.state._hideLabel === true;
-        const orientation = this.state._orientation;
-        return (hAsync("div", { key: '12bfebdeb71dff8a681907c30a9bdde7f0d359b3', class: clsx('kol-nav', `kol-nav--${orientation}`, {
+        return (hAsync("div", { key: 'b8db85b304f436fa5882f487f6b83a74f833c943', class: clsx('kol-nav', `kol-nav--${this.state._orientation}`, {
                 'kol-nav--is-compact': this.state._hideLabel,
-            }) }, hAsync("nav", { key: '692debc445b1cf2b3ee383ee849b396acf0bcbe9', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: 'fee81683dc4d8436173d58244eba5182bbfa5323', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation, id: this.listId })), hasCompactButton && (hAsync("div", { key: 'a583663ae21335220d492567dac63fcba31db7c3', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '291714ba69e6c4be183547a1252e0dc2b7413b4a', class: "kol-nav__toggle-button", _ariaControls: this.navId, _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: 'e10d8ebdf16027383e98ea463f20b5ee7a30617d', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: '88b5acc16bcebe287533a7f0ed06a2a3d6994a6d', collapsible: this.state._collapsible, deep: 0, links: this.state._links, orientation: this.state._orientation, id: this.listId })), hasCompactButton && (hAsync("div", { key: 'e7f4432560e5315178f182b7197da9d66f1ee901', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: '23b584805e69dc1cb20204a77adae0aefb313b21', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
                 onClick: () => {
-                    this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
+                    this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
                 },
             }, _tooltipAlign: "right" })))));
     }
@@ -30521,7 +30570,7 @@ class KolTextarea {
     }; }
 }
 
-const defaultStyleCss$4 = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\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    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    flex-direction: column;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}";
+const defaultStyleCss$4 = "/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\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    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    max-width: 90vw;\n    flex-direction: column;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}";
 
 const TRANSITION_TIMEOUT = 300;
 class KolToastContainer {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "3.0.9-rc.0",
+  "version": "3.0.9-rc.2",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -52,7 +52,7 @@
     "prettier": "3.7.4",
     "prettier-plugin-organize-imports": "4.3.0",
     "rimraf": "6.1.2",
-    "@public-ui/components": "3.0.9-rc.0"
+    "@public-ui/components": "3.0.9-rc.2"
   },
   "sideEffects": false,
   "type": "commonjs",