@public-ui/hydrate 3.0.7-rc.0 → 4.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +110 -92
  2. package/dist/index.mjs +110 -92
  3. package/package.json +3 -3
package/dist/index.mjs CHANGED
@@ -144,7 +144,7 @@ function _mergeNamespaces(n, m) {
144
144
 
145
145
  const NAMESPACE = 'kolibri';
146
146
  const BUILD = /* kolibri */ { hydratedSelectorName: "hydrated", slotRelocation: true, updatable: true};
147
- const Env = /* kolibri */ {"kolibriVersion":"3.0.7-rc.0"};
147
+ const Env = /* kolibri */ {"kolibriVersion":"4.0.0-alpha.1"};
148
148
 
149
149
  function getDefaultExportFromCjs (x) {
150
150
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -6254,7 +6254,7 @@ function dispatchDomEvent(target, event, detail) {
6254
6254
  target.dispatchEvent(createKoliBriEvent(event, detail));
6255
6255
  }
6256
6256
 
6257
- const defaultStyleCss$L = "/*\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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__wrapper {\n /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n /**\n * The `overflow: hidden` ensures that the content is not visible during the animated\n * opening and closing. This should also cut off overlays containing content, but it\n *does not.\n */\n overflow: hidden;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n min-height: 0;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n transition: visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n visibility: visible;\n }\n .collapsible__heading-button button .kol-span {\n justify-items: start;\n }\n}";
6257
+ const defaultStyleCss$L = "/*\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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__wrapper {\n /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n min-height: 0;\n /**\n * The `overflow: hidden` ensures that the content is not visible during the animated\n * opening and closing. This should also cut off overlays containing content, but it\n *does not.\n */\n overflow: hidden;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n transition: visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n visibility: visible;\n }\n .collapsible__heading-button button .kol-span {\n justify-items: start;\n }\n}";
6258
6258
 
6259
6259
  featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
6260
6260
 
@@ -6753,8 +6753,8 @@ const KolAlertFc = (props, children) => {
6753
6753
  const BEM_CLASS__HEADING = bem$1('kol-alert', 'heading', {
6754
6754
  [`h${level}`]: true,
6755
6755
  });
6756
- const rootProps = Object.assign({ class: clsx(classNames, BEM_CLASS_ROOT), role: alert ? (type === 'error' ? 'alert' : 'status') : undefined }, other);
6757
- return (hAsync("div", Object.assign({}, rootProps, { "data-testid": "alert" }), hAsync("div", { class: "kol-alert__container" }, hAsync(AlertIcon, { label: label, type: type }), hAsync("div", { class: "kol-alert__container-content" }, label && (hAsync(KolHeadingFc, { class: BEM_CLASS__HEADING, level: level, id: "heading" }, label)), variant === 'msg' && (hAsync("span", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))), hasCloser && (hAsync(KolButtonWcTag, { class: BEM_CLASS_ALERT__CLOSER, "data-testid": "alert-close-button", _ariaDescription: (label === null || label === void 0 ? void 0 : label.trim()) || '', _hideLabel: true, _icons: {
6756
+ const rootProps = Object.assign({ class: clsx(classNames, BEM_CLASS_ROOT) }, other);
6757
+ return (hAsync("div", Object.assign({ "aria-live": alert ? 'assertive' : 'polite', role: alert ? 'alert' : 'status' }, rootProps, { "data-testid": "alert" }), hAsync("div", { class: "kol-alert__container" }, hAsync(AlertIcon, { label: label, type: type }), hAsync("div", { class: "kol-alert__container-content" }, label && (hAsync(KolHeadingFc, { class: BEM_CLASS__HEADING, level: level, id: "heading" }, label)), variant === 'msg' && (hAsync("span", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))), hasCloser && (hAsync(KolButtonWcTag, { class: BEM_CLASS_ALERT__CLOSER, "data-testid": "alert-close-button", _ariaDescription: (label === null || label === void 0 ? void 0 : label.trim()) || '', _hideLabel: true, _icons: {
6758
6758
  left: {
6759
6759
  icon: 'codicon codicon-close',
6760
6760
  },
@@ -18360,8 +18360,8 @@ const KolFormFieldCharacterLimitHintFc = ({ id, maxLength }) => {
18360
18360
  return (hAsync("span", { id: `${id}-character-limit-hint`, class: "visually-hidden" }, translate('kol-character-limit-hint', { placeholders: { limit: String(maxLength) } })));
18361
18361
  };
18362
18362
 
18363
- const FormFieldTooltipFc = ({ id, align, badgeText, hideLabel, label, class: classNames }) => {
18364
- return (hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: clsx('kol-form-field__tooltip', classNames), _badgeText: badgeText, _align: align, _id: hideLabel ? `${id}-label` : undefined, _label: label }));
18363
+ const FormFieldTooltipFc = ({ id, align, badgeText, label, class: classNames }) => {
18364
+ return (hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: clsx('kol-form-field__tooltip', classNames), _badgeText: badgeText, _align: align, _id: `${id}-label`, _label: label }));
18365
18365
  };
18366
18366
 
18367
18367
  function getModifierClassNameByMsgType(msg) {
@@ -18402,7 +18402,7 @@ const KolFormFieldFc = (props, children) => {
18402
18402
  if (showMsg) {
18403
18403
  stateCssClasses = Object.assign(Object.assign({}, stateCssClasses), { [`kol-form-field--${msgType || 'error'}`]: true, [`kol-form-field--${getModifierClassNameByMsgType({ type: msgType })}`]: true });
18404
18404
  }
18405
- 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 }))), hAsync(InputContainer$1, Object.assign({}, formFieldInputProps), children, useTooltipInsteadOfLabel && (hAsync(FormFieldTooltipFc, Object.assign({}, (formFieldTooltipProps || {}), { id: id, label: label, hideLabel: hideLabel, align: tooltipAlign, badgeText: badgeText })))), counter ? hAsync(KolFormFieldCounterFc, Object.assign({}, 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));
18405
+ 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 }))), 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({}, 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));
18406
18406
  };
18407
18407
 
18408
18408
  const InputAdornment = (_a, children) => {
@@ -18594,7 +18594,7 @@ const watchNavLinks = (className, component, value) => {
18594
18594
  uiUxHintMillerscheZahl(className, component.state._links.length);
18595
18595
  };
18596
18596
 
18597
- const defaultStyleCss$H = "/*\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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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 @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\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 visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\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}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-link__text .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n display: flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n place-items: center;\n list-style: none;\n }\n .kol-breadcrumb__icon::part(separator) {\n font-size: 0.7em;\n font-weight: 900;\n }\n .kol-breadcrumb__icon::part(separator):before {\n content: \"\\f054\";\n font-family: \"Font Awesome 6 Free\";\n }\n}";
18597
+ const defaultStyleCss$H = "/*\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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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 @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\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 visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\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}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-link {\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-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-link__text .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n display: flex;\n margin: 0;\n padding: 0;\n gap: 0.5em;\n flex-wrap: wrap;\n place-items: center;\n list-style: none;\n }\n .kol-breadcrumb__icon::part(separator) {\n font-size: 0.7em;\n font-weight: 900;\n }\n .kol-breadcrumb__icon::part(separator):before {\n content: \"\\f054\";\n font-family: \"Font Awesome 6 Free\";\n }\n}";
18598
18598
 
18599
18599
  class KolBreadcrumb {
18600
18600
  constructor(hostRef) {
@@ -18713,7 +18713,7 @@ class KolButton {
18713
18713
  }; }
18714
18714
  }
18715
18715
 
18716
- 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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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 @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\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 visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\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}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-button {\n display: inline-flex;\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__text .kol-span__label {\n text-decoration-line: underline;\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__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}";
18716
+ 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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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 @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\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 visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\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}\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__text .kol-span__label {\n text-decoration-line: underline;\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__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}";
18717
18717
 
18718
18718
  class KolButtonLink {
18719
18719
  constructor(hostRef) {
@@ -19047,23 +19047,22 @@ class KolButtonWc {
19047
19047
  void ((_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.hideTooltip());
19048
19048
  }
19049
19049
  render() {
19050
- var _a, _b;
19050
+ var _a;
19051
19051
  const hasExpertSlot = showExpertSlot(this.state._label);
19052
- const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
19052
+ const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
19053
19053
  const badgeText = this.state._accessKey || this.state._shortKey;
19054
19054
  const isDisabled = this.state._disabled === true;
19055
19055
  const hideLabel = this.state._hideLabel === true;
19056
- return (hAsync(Host, { key: '9202198cc53ca78db26cc6c7ce68da269b521f9c' }, hAsync("button", { key: '9a3d1b8f642ad673b69c5ef0d3a81822d0ec34b3', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
19056
+ return (hAsync(Host, { key: '1f6ccf2475a5590dc277f48b3eb98ea953a95426' }, hAsync("button", { key: '91d8c33f2cc1315a46484cbf0b83ff734b6c83a9', ref: (ref) => (this.buttonRef = ref), accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-haspopup": this._ariaHasPopup, "aria-keyshortcuts": this.state._shortKey, "aria-label": hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: clsx('kol-button', {
19057
19057
  'kol-button--disabled': isDisabled,
19058
19058
  [`kol-button--${this.state._buttonVariant}`]: this.state._buttonVariant !== 'custom',
19059
19059
  [`kol-button--${this.state._linkVariant}`]: this.state._linkVariant,
19060
19060
  'kol-button--hide-label': hideLabel,
19061
19061
  [this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
19062
- }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: '717fd0e277dc8d19424eb4f46a00bd8f6c087eff', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'f3ddc202d34119f33efb2dc0262e61e2c7faddb7', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: '49b4d12189968fb4011d53f0625107d1bf6a22fe', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot || !hideLabel, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }), hasAriaDescription && (hAsync("span", { key: '6ee695a8f9d45e456b1fd563ea68e1bc9d1fc647', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
19062
+ }), disabled: isDisabled, id: this.state._id, name: this.state._name, onClick: this.onClick, onMouseDown: this.onMouseDown, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }, hAsync(KolSpanFc, { key: '5ff1a30cb5c461a121c84c9f5cc56e67790ab472', class: "kol-button__text", badgeText: badgeText, icons: this.state._icons, hideLabel: hideLabel, label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: '6d28e4c9a449c8cd8beed156515f38db3a5e63ae', name: "expert", slot: "expert" }))), hideLabel && (hAsync(KolTooltipWcTag, { key: 'dafcb51bac223df027a9f40bb31216175263cb8d', ref: (ref) => (this.tooltipRef = ref), "aria-hidden": "true", hidden: hasExpertSlot, class: "kol-button__tooltip", _badgeText: badgeText, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' }))));
19063
19063
  }
19064
19064
  constructor(hostRef) {
19065
19065
  registerInstance(this, hostRef);
19066
- this.internalDescriptionById = nonce();
19067
19066
  this.onClick = (event) => {
19068
19067
  var _a, _b;
19069
19068
  if (this.state._type === 'submit') {
@@ -19273,7 +19272,7 @@ class KolCard {
19273
19272
  this._level = 0;
19274
19273
  }
19275
19274
  render() {
19276
- return (hAsync(KolCardWcTag, { key: '214de69b88f18259f7ea036d889fd6caab14a346', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, hAsync("slot", { key: '671f44467a488eb8dedd4cdb36aaeeb33b6f8aea' })));
19275
+ return (hAsync(KolCardWcTag, { key: 'db950a543bc2f41a1e0786c9ac3d4cb0fce5cf97', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, hAsync("slot", { key: 'f7ad1dd60427b5e2ae00f0e2260309a025d1ed44' })));
19277
19276
  }
19278
19277
  static get style() { return {
19279
19278
  default: defaultStyleCss$E
@@ -19318,7 +19317,7 @@ class KolCardWc {
19318
19317
  this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
19319
19318
  }
19320
19319
  render() {
19321
- return (hAsync(Host, { key: 'de517413c990072e7e7faca2916c0c5243ad9495' }, hAsync("div", { key: '01f98d52d173677f5e314e2dce9425cc19cdaadc', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: 'd2ce693140449135323ff1601af712982aae9325', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '155c2d42406dbb9ba02f6a29ec92f10d93b8c38d', class: "kol-card__content" }, hAsync("slot", { key: 'f3c23f1168273dbfbb515b1d83b7f087d9d019ca' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: '7c9ebe3b241019c157161bfb2f5562a0ce482c09', class: "kol-card__close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
19320
+ return (hAsync(Host, { key: 'e2e32f376bd12f7fc8beb4df8f76facb80f5e7a5' }, hAsync("div", { key: '0ef931bd24c643b575342f434506483f0b3ebca8', "aria-labelledby": this.nonce, class: "kol-card", role: "group" }, hAsync(KolHeadingFc, { key: 'ce924a0307338f9d6beaa3ea24051fbb3173d83e', class: "kol-card__header", id: this.nonce, level: this.state._level }, this.state._label), hAsync("div", { key: '2d004878aedb826c78acb8834d79144b05ae4d1b', class: "kol-card__content" }, hAsync("slot", { key: 'c5075d61a16c46bdf3c8c5ffea3ca70cd02c4d8c' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { key: '89d83b4fb181fb2bd43b7b5a4dfedba1660395b4', class: "kol-card__close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
19322
19321
  left: {
19323
19322
  icon: 'codicon codicon-close',
19324
19323
  },
@@ -19925,7 +19924,7 @@ class KolCombobox {
19925
19924
  }
19926
19925
  render() {
19927
19926
  const isDisabled = this.state._disabled === true;
19928
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'eb15fe58d236a7f992976c4d35e004996c1fcd4e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '80c19ad381816ef88948ac29b48fb64dc407cf29', state: this.state }, hAsync("div", { key: '96a9ea7656090a0e10024d6cc0b44e182238b217', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: '1f79a7c35437e4357b296118ce7ab45166966cb5' }, this.getInputProps())), hAsync(CustomSuggestionsToggleFc, { key: '5741846ebde26e7eb4cb7d7d557084c028193a8c', onClick: this.toggleListbox.bind(this), disabled: isDisabled })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '2e8c160d9ada3feb752d4efcdb2e3b281a6d7269', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
19927
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'b5a6f7b326f51416cc1c1c5791cef34552433327' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '801cdf53218006019828f3328f0eccfccacc1132', state: this.state }, hAsync("div", { key: '354db1547eba447cddefb456802b512efc807d54', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'd231adf62c4e893a50ab45f55dfa2b709c492e48' }, this.getInputProps())), hAsync(CustomSuggestionsToggleFc, { key: 'd61b92fad3dd59b99a2342ba9fd5091ba813bde2', onClick: this.toggleListbox.bind(this), disabled: isDisabled })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'dec96f5306ae54cc5c9561b04bf8ef09f1e2baee', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
19929
19928
  this._filteredSuggestions.length > 0 &&
19930
19929
  this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option, searchTerm: this.state._value, ref: (el) => {
19931
19930
  if (el)
@@ -20239,7 +20238,7 @@ class KolCombobox {
20239
20238
  }; }
20240
20239
  }
20241
20240
 
20242
- const defaultStyleCss$C = "/* 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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__wrapper {\n /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n /**\n * The `overflow: hidden` ensures that the content is not visible during the animated\n * opening and closing. This should also cut off overlays containing content, but it\n *does not.\n */\n overflow: hidden;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n min-height: 0;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n transition: visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n visibility: visible;\n }\n .collapsible__heading-button button .kol-span {\n justify-items: start;\n }\n}\n@layer kol-component {\n .kol-details__heading-button {\n display: flex;\n }\n .kol-details__heading-button .kol-button {\n min-height: auto;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n .collapsible--open .kol-details__heading-button .kol-icon::part(icon) {\n transform: rotate(90deg);\n }\n}";
20241
+ const defaultStyleCss$C = "/* 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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n .collapsible {\n /* @see https://github.com/public-ui/kolibri/issues/5952 */\n /*\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n */\n }\n @media (prefers-reduced-motion) {\n .collapsible__wrapper-animation, .collapsible__wrapper {\n transition-duration: 0s;\n }\n }\n @media print {\n :not(.collapsible--open) .collapsible__wrapper-animation {\n display: none;\n }\n }\n .collapsible__wrapper {\n /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n transform: translateZ(0);\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s;\n }\n .collapsible__wrapper-animation {\n min-height: 0;\n /**\n * The `overflow: hidden` ensures that the content is not visible during the animated\n * opening and closing. This should also cut off overlays containing content, but it\n *does not.\n */\n overflow: hidden;\n /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n visibility: hidden;\n transition: visibility 0.3s;\n }\n .collapsible--open .collapsible__wrapper {\n grid-template-rows: 1fr;\n }\n .collapsible--open .collapsible__wrapper-animation {\n visibility: visible;\n }\n .collapsible__heading-button button .kol-span {\n justify-items: start;\n }\n}\n@layer kol-component {\n .kol-details__heading-button {\n display: flex;\n }\n .kol-details__heading-button .kol-button {\n min-height: auto;\n }\n .kol-details__heading-button .kol-button .kol-span__label {\n border-bottom-color: grey;\n border-bottom-style: solid;\n }\n .collapsible--open .kol-details__heading-button .kol-icon::part(icon) {\n transform: rotate(90deg);\n }\n}";
20243
20242
 
20244
20243
  class KolDetails {
20245
20244
  constructor(hostRef) {
@@ -20295,7 +20294,7 @@ class KolDetails {
20295
20294
  animationClass: `${rootClass}__wrapper-animation`,
20296
20295
  },
20297
20296
  };
20298
- return (hAsync(KolCollapsibleFc, Object.assign({ key: 'e149779c3d5053267bcd2785b061c3862c1ab806' }, props), hAsync("slot", { key: 'ba4278e16e1cd27c08ecc5aef1d47d8427d94575' })));
20297
+ return (hAsync(KolCollapsibleFc, Object.assign({ key: '2723a76015e4561151328565c2eec42d99bf00a3' }, props), hAsync("slot", { key: '18e154f7788540a9e839ce25b70552a102aa7869' })));
20299
20298
  }
20300
20299
  validateDisabled(value) {
20301
20300
  validateDisabled(this, value);
@@ -20350,6 +20349,19 @@ class KolDetails {
20350
20349
  }; }
20351
20350
  }
20352
20351
 
20352
+ let openTooltips = 0;
20353
+ const tooltipOpened = () => {
20354
+ openTooltips++;
20355
+ };
20356
+ const tooltipClosed = () => {
20357
+ openTooltips = Math.max(0, openTooltips - 1);
20358
+ };
20359
+ const handleCancelOverlay = (event) => {
20360
+ if (openTooltips > 0) {
20361
+ event.preventDefault();
20362
+ }
20363
+ };
20364
+
20353
20365
  const defaultStyleCss$B = "/*\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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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 @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\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 visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\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}\n@layer kol-component {\n .kol-card {\n /* Visible with forced colors */\n outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n position: relative;\n height: 100%;\n }\n .kol-card__close-button {\n position: absolute;\n top: 0;\n right: 0;\n }\n .kol-drawer__dialog {\n padding: 0;\n border: none;\n }\n .kol-drawer__wrapper {\n position: fixed;\n overflow: auto;\n }\n .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n top: 0;\n max-width: 100vw;\n height: 100vh;\n }\n .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n height: 100%;\n }\n .kol-drawer__wrapper--left {\n left: 0;\n }\n .kol-drawer__wrapper--right {\n right: 0;\n }\n .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n left: 0;\n width: 100vw;\n max-height: 100vh;\n }\n .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n width: 100%;\n }\n .kol-drawer__wrapper--bottom {\n bottom: 0;\n }\n .kol-drawer__wrapper--top {\n top: 0;\n }\n .kol-drawer__content {\n position: relative;\n }\n}";
20354
20366
 
20355
20367
  class KolDrawer {
@@ -20396,7 +20408,7 @@ class KolDrawer {
20396
20408
  } }, hAsync("div", { class: "kol-drawer__content" }, hAsync("slot", null))));
20397
20409
  }
20398
20410
  render() {
20399
- return (hAsync(Host, { key: '789134f227ece64520110596720256d7f7a86961', class: "kol-drawer" }, hAsync("dialog", { key: '5b6e57975b4d92874647624ead38d9ff3a673626', "aria-label": this.state._label, class: "kol-drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
20411
+ return (hAsync(Host, { key: 'd50e43c9e192ab4870c9981588af1d625597636e', class: "kol-drawer" }, hAsync("dialog", { key: '0323b4add4803bffa9d6df8d3dcfc84fb16311f8', "aria-label": this.state._label, class: "kol-drawer__dialog", onCancel: handleCancelOverlay, ref: this.getRef }, this.renderDialogContent())));
20400
20412
  }
20401
20413
  validateLabel(value) {
20402
20414
  validateLabel(this, value, {
@@ -20501,7 +20513,7 @@ class KolDrawer {
20501
20513
  }; }
20502
20514
  }
20503
20515
 
20504
- const defaultStyleCss$A = "/* 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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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 @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\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 visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\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}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-link__text .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\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}";
20516
+ const defaultStyleCss$A = "/* 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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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 @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\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 visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\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}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-link {\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-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-link__text .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\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}";
20505
20517
 
20506
20518
  class KolForm {
20507
20519
  constructor(hostRef) {
@@ -20549,7 +20561,7 @@ class KolForm {
20549
20561
  }
20550
20562
  render() {
20551
20563
  const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
20552
- return (hAsync(Host, { key: '129655c9f0160c5c3eb6801253953b52c9649031' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
20564
+ return (hAsync(Host, { key: '9664175b745ee7a365e58e902f626bde0e07a99b' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
20553
20565
  }
20554
20566
  scrollToErrorList() {
20555
20567
  var _a;
@@ -20639,7 +20651,7 @@ class KolHeading {
20639
20651
  }
20640
20652
  render() {
20641
20653
  const { _secondaryHeadline, _label, _level } = this.state;
20642
- return (hAsync(KolHeadingFc, { key: 'bca6f091d8c15ebbd3cd448deb11b8c21253369c', secondaryHeadline: _secondaryHeadline, level: _level }, _label, hAsync("slot", { key: '16c1177a2937b4a31efd828e26fb316f365049a7', name: "expert", slot: "expert" })));
20654
+ return (hAsync(KolHeadingFc, { key: 'c03aefdde2e321ffde26a87c604ff919288095aa', secondaryHeadline: _secondaryHeadline, level: _level }, _label, hAsync("slot", { key: '207ac1ee227261e59056bd8385d53c14ef5646c5', name: "expert", slot: "expert" })));
20643
20655
  }
20644
20656
  static get watchers() { return {
20645
20657
  "_label": ["validateLabel"],
@@ -20688,8 +20700,8 @@ const defaultStyleCss$y = "/* forward the rem function */\n/*-------------------
20688
20700
 
20689
20701
  class KolIcon {
20690
20702
  render() {
20691
- const ariaShow = this.state._label.length > 0;
20692
- return (hAsync(Host, { key: '24357bda96cc40a273a32f5338552270e582c9a7', exportparts: "icon", class: BEM_CLASS_ICON }, hAsync("i", { key: '2970fb90c56935fbd4d227cce882de6ce30c9253', "aria-hidden": ariaShow ? undefined : 'true', "aria-label": ariaShow ? this.state._label : undefined, class: clsx(BEM_CLASS_ICON__ICON, this.state._icons), part: "icon", role: "img" })));
20703
+ const hasAriaLabel = this.state._label.length > 0;
20704
+ return (hAsync(Host, { key: 'be3cb64dfa041aa66eed0a1510efe3b62166503c', exportparts: "icon", class: BEM_CLASS_ICON }, hAsync("i", { key: 'cc3506ae0187936bf2d304a3472180d4b590d755', "aria-hidden": hasAriaLabel ? undefined : 'true', "aria-label": hasAriaLabel ? this.state._label : undefined, class: clsx(BEM_CLASS_ICON__ICON, this.state._icons), part: "icon", role: hasAriaLabel ? 'img' : 'presentation' })));
20693
20705
  }
20694
20706
  constructor(hostRef) {
20695
20707
  registerInstance(this, hostRef);
@@ -20766,7 +20778,7 @@ class KolImage {
20766
20778
  this.validateSrcset(this._srcset);
20767
20779
  }
20768
20780
  render() {
20769
- return (hAsync("img", { key: 'cca1e1b65e9aab11b4c15bea394d6c54ead1a123', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
20781
+ return (hAsync("img", { key: 'e10cbbeff8296e29b2960ffc67f5382270dfcda6', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
20770
20782
  }
20771
20783
  static get watchers() { return {
20772
20784
  "_alt": ["validateAlt"],
@@ -21004,7 +21016,7 @@ const KolFieldControlFc = (props, children) => {
21004
21016
  const badgeText = buildBadgeTextString(accessKey, shortKey);
21005
21017
  const msgType = typeof msg === 'string' ? 'error' : msg === null || msg === void 0 ? void 0 : msg._type;
21006
21018
  const components = [
21007
- hAsync(Fragment, null, hAsync(InputContainer, Object.assign({}, fieldControlInputProps), children), useTooltipInsteadOfLabel && (hAsync(FormFieldTooltipFc, Object.assign({}, (fieldControlTooltipProps || {}), { id: id, label: label, hideLabel: hideLabel, align: tooltipAlign, badgeText: badgeText })))),
21019
+ hAsync(Fragment, null, hAsync(InputContainer, Object.assign({}, fieldControlInputProps), children), useTooltipInsteadOfLabel && (hAsync(FormFieldTooltipFc, Object.assign({}, (fieldControlTooltipProps || {}), { id: id, label: label, align: tooltipAlign, badgeText: badgeText })))),
21008
21020
  hAsync(KolFormFieldLabelFc, Object.assign({}, (fieldControlLabelProps || {}), { id: id, baseClassName: "kol-field-control", class: clsx(fieldControlLabelProps === null || fieldControlLabelProps === void 0 ? void 0 : fieldControlLabelProps.class, {
21009
21021
  ['kol-field-control__label--visually-hidden']: Boolean(hideLabel),
21010
21022
  }), hasExpertSlot: hasExpertSlot, label: label, accessKey: accessKey, shortKey: shortKey })),
@@ -21117,7 +21129,7 @@ class KolInputCheckbox {
21117
21129
  return this.state._icons.unchecked;
21118
21130
  }
21119
21131
  render() {
21120
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: '5cc08875c4dade3ab178977abc40b97d48773003' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '2e293de0863f42cbfddcdd6663a6c8fce78995ca' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: '9693cfae31139644147ec96b306f6e0a9fcbd058' }, this.getInputProps())))));
21132
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'c2202b412289ea102d6d63607bedb79138ed1b4d' }, this.getFormFieldProps(), { renderNoLabel: true }), hAsync(FieldControlStateWrapper, Object.assign({ key: '513367725739179f432c741616a916ee9ab5495c' }, this.getFieldControlProps(), { renderNoHint: true }), hAsync(CheckboxStateWrapper, Object.assign({ key: 'aec8f57bfcd303eef516bf3dad6a8a93f3dd51ed' }, this.getInputProps())))));
21121
21133
  }
21122
21134
  constructor(hostRef) {
21123
21135
  registerInstance(this, hostRef);
@@ -21356,7 +21368,7 @@ class KolInputColor {
21356
21368
  return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
21357
21369
  }
21358
21370
  render() {
21359
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: '546689dff635e295b26578bb1a74a3ad0a2628ed' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '679125e5c442e5db38d50e75ab078cdecb0f0080', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: 'ec04483a34a120aad9d3a0382defa25d450d8ec4', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: '66c5523e905fd2480c99cbd8c5ca3f23c5b33ee3', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: 'c8a18f867e8551b79cf74aa99516f07b11a4e898', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
21371
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'e8d6e6297b0317c152a70cbfe7cef1e5f68103ed' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'd4ad08b365b7821948e5088d7091bd5362a77770', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: 'f4a2323aa46e415cb6a3917be66c9914fa4104f9', class: "kol-input-color__inputs-wrapper" }, hAsync(InputStateWrapper, Object.assign({ key: 'f856cae4f626b54df545e3ce789e97f2e0aa730e', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(InputStateWrapper, Object.assign({ key: 'df6689ec1e944d388ca4b837406f4563ce2e5618', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
21360
21372
  }
21361
21373
  constructor(hostRef) {
21362
21374
  registerInstance(this, hostRef);
@@ -21733,7 +21745,7 @@ class KolInputDate {
21733
21745
  return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
21734
21746
  }
21735
21747
  render() {
21736
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a37cad860460cee4d7eeaf1487a1f2e4a0a47fc2' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '9a23e22012258a2430abc8fb39180a71f4c35a77', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '9c8329c721150fa21fa86ce9ed3f35e9caa954d5' }, this.getInputProps())))));
21748
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: '7d72e54985c31ecbd89e7a395e7d0a56f746e768' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '44d6e0d4a5cd6f787654182459d6782d55ef4d5c', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'bf6ac0de69717f5f2a820133154cc88d3d8a9c20' }, this.getInputProps())))));
21737
21749
  }
21738
21750
  constructor(hostRef) {
21739
21751
  registerInstance(this, hostRef);
@@ -22101,7 +22113,7 @@ class KolInputEmail {
22101
22113
  } });
22102
22114
  }
22103
22115
  render() {
22104
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'f19a32b8c7a913d1e67715b00163722b4533e977' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'ca0b98dcd5c215e220a8eabc98a3ca1675d3bf9d', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'a3fb4a6498c19e5e3997a960c4c3fa6728125781' }, this.getInputProps())))));
22116
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'baffe19d589e95460cfc7a667c8d37ec7f28b869' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f67d993a844ea5345b50ee73f8cfc67a05d37822', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '368af02c7118f848925007bcc3ec298fdad708f0' }, this.getInputProps())))));
22105
22117
  }
22106
22118
  constructor(hostRef) {
22107
22119
  registerInstance(this, hostRef);
@@ -22364,7 +22376,7 @@ class KolInputFile {
22364
22376
  } });
22365
22377
  }
22366
22378
  render() {
22367
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'b5fbe23fc35a129f338743af03faa91d389ba9fb' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '3422d0b39f417afb43a555e7c3444ea7e93c860d', state: this.state }, hAsync("span", { key: '69e817a0f0ba2214e6fa99aeb06122210a2864aa', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: 'de648f8a6d19671b45c7a53a1c814d2a9a3ae2df' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: 'e324b2cf76507edfa9a6f266dfb827fe0a3133d0', class: "kol-input-container__button", _label: this.translateDataBrowseText, _buttonVariant: "primary", _disabled: this._disabled }))));
22379
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: '8738e92f0b999d05038113c7caa046fa90102c18' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '1b064e2ef677917fde8cdebd955dfee4bd2f6158', state: this.state }, hAsync("span", { key: 'fd08fd75d9247a2518306cb9cf8dc45554603e37', class: clsx('kol-input-container__filename', { 'kol-input-container__filename--has-file': this.hasFileSelected }) }, this.filename), hAsync(InputStateWrapper, Object.assign({ key: 'ddc43b11433cd252103555d049841b2c1a8156d1' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: '87a541cdc62877c4225dfdda7ad8d7b4c8648ff8', class: "kol-input-container__button", _label: this.translateDataBrowseText, _buttonVariant: "primary", _disabled: this._disabled }))));
22368
22380
  }
22369
22381
  constructor(hostRef) {
22370
22382
  registerInstance(this, hostRef);
@@ -22659,7 +22671,7 @@ class KolInputNumber {
22659
22671
  } });
22660
22672
  }
22661
22673
  render() {
22662
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: '4032102190ecfc2ca60bd96e9afeec6eaa9d3434' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'e4b1ef3cb5a6f6b2d04f144477e10a7e324b832d', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '12be44bce8484f547242fc852b5fd5af14b2f0df' }, this.getInputProps())))));
22674
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: '57c9721438188322c18a747aaa3bd507f2b9c7df' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'ab59888ffb499fc6b0b26e26c2cf114369563c65', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: 'b73262d350a2725c32ef00386c910633c4dec284' }, this.getInputProps())))));
22663
22675
  }
22664
22676
  constructor(hostRef) {
22665
22677
  registerInstance(this, hostRef);
@@ -22907,7 +22919,7 @@ class KolInputPassword {
22907
22919
  }, icon: `codicon codicon-eye-${this._passwordVisible ? 'closed' : 'watch'}`, disabled: this._disabled }));
22908
22920
  }
22909
22921
  render() {
22910
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: '844d0d658946f85e58c537dc3049ea34abeabe60' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '2b390c722de4b9e6f2c7c89ea469cd2970e52f54', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: 'e12ca7840b5e0d9589cce15fd4f8ddf676cf0434' }, this.getInputProps())))));
22922
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: '997f60c667db700fc52520aa61a8cb9503e7279e' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '4e114f5b187b9699eb30e7a8f8b7744c2b629a0e', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(InputStateWrapper, Object.assign({ key: '43b24bb89b526e4bf7b3c70ec8228fbe9d3cd3ad' }, this.getInputProps())))));
22911
22923
  }
22912
22924
  constructor(hostRef) {
22913
22925
  registerInstance(this, hostRef);
@@ -23184,7 +23196,7 @@ class KolInputRadio {
23184
23196
  };
23185
23197
  }
23186
23198
  render() {
23187
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: '91ce97ca53a9c7c195bcd7108992ecf4a74940a0' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
23199
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'd6a448927779793795b7df75b11f6845005230cd' }, this.getFormFieldProps()), this.state._options.map((option, index) => this.renderOption(option, index))));
23188
23200
  }
23189
23201
  calculateDisabled(option) {
23190
23202
  return Boolean(this.state._disabled) || Boolean(option.disabled);
@@ -23487,7 +23499,7 @@ class KolInputRange {
23487
23499
  const inputsWrapperStyle = {
23488
23500
  '--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
23489
23501
  };
23490
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'e3e9fb11ff4d39fa7ff026f44a7b1c5f641ce5bb' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b417e5958d7bb3c47d33da8f6ee40e608763d017', state: this.state }, hAsync("div", { key: '1aa36e21a2ae4506e5f3a88591c415aaca97a3a4', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: '437e6c12290b4720d7af01e4d8b425fdb64b2ed4', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: '7122c0a209c3a6b44ab4646531d5a7cc41b992b4', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: 'f96a8d6c596b28a40f9bc5a5c72738e9a588a45e', id: this.state._id, suggestions: this.state._suggestions }))));
23502
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: '64f282f26b8e61c4bb04b8bd2ca733b5e16a1428' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'b038df3c353f34b94ae5feacdb72a7133dca4620', state: this.state }, hAsync("div", { key: '92d565e92b34e5f37a9064e886898d9c34ae6b01', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(InputStateWrapper, Object.assign({ key: 'f3fede8d7e5335ba75b4db6bb551f56c5fbe03bc', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(InputStateWrapper, Object.assign({ key: '874ed2a49a8bb147375330f1450b4b3064c35510', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(SuggestionsFc, { key: '9853b6ec4638592cd84a4b7acc04fff9f3372cc1', id: this.state._id, suggestions: this.state._suggestions }))));
23491
23503
  }
23492
23504
  constructor(hostRef) {
23493
23505
  registerInstance(this, hostRef);
@@ -23709,7 +23721,7 @@ class KolInputText {
23709
23721
  return Object.assign(Object.assign({ ref: this.catchRef, state: this.state, ariaDescribedBy }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
23710
23722
  }
23711
23723
  render() {
23712
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: '9547164985c83e957794dc2899511b46cc885811' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'f83208a80222755d8916184fcce9231c6f9d1da1', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '001cd8f073956966954df9b0643cf8a1e9c522cd' }, this.getInputProps())))));
23724
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: '52d7898c22773ad1ead1cf59cc8a1e4be15f30ae' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '7d04465c264e7e66535a5cfd13d369070ba31921', state: this.state }, hAsync(InputStateWrapper, Object.assign({ key: '9fe374eb436f4c01dbe9a93793223a2917ad30e0' }, this.getInputProps())))));
23713
23725
  }
23714
23726
  constructor(hostRef) {
23715
23727
  registerInstance(this, hostRef);
@@ -23969,7 +23981,7 @@ class KolKolibri {
23969
23981
  }
23970
23982
  render() {
23971
23983
  const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
23972
- return (hAsync("svg", { key: '4341d576cfd65807c33d33058ce81cf8541681a1', class: "kol-kolibri", role: "img", "aria-label": this.translateKolibriLogo, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: 'f0372afcaa936cef7e7eb895d165e59758f2fe33', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '674d4025434c1cb91d202798d87bf8592984d64f', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: '77e6aa258d29ec92d0dd7db75ef7e6d31568a2ee', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: '11c7e24da5ca279c6b9842be19f369bcda4aba8a', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: 'a5c57698fed4ed533ae9887f4376c5729dba9dfe', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: '74cce58a4864153b6364b23ef4cf7f55a94ea081', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: 'b013fce237fd89ff47d5786ad92a3c5b4615fa99', class: "kol-kolibri__text", x: "250", y: "525", fill: fillColor }, "KoliBri"))));
23984
+ return (hAsync("svg", { key: '0a9addc4148377c6c7b8b45067adaf48482620b9', class: "kol-kolibri", role: "img", "aria-label": this.translateKolibriLogo, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 600 600", fill: fillColor }, hAsync("path", { key: '4e59484b6528226f367dd8fb76b05923b71ff822', d: "M353 322L213 304V434L353 322Z" }), hAsync("path", { key: '9c1d6bed09982306e957afce5801d973bee1b799', d: "M209 564V304L149 434L209 564Z" }), hAsync("path", { key: '489a22456446efe18e70981564df18ea5acc344b', d: "M357 316L417 250L361 210L275 244L357 316Z" }), hAsync("path", { key: '95de1e02577679047166b429fa77f742e181ee80', d: "M329 218L237 92L250 222L272 241L329 218Z" }), hAsync("path", { key: '3fa5ea0d882090787ffc5f4f78b1d472a972e526', d: "M353 318L35 36L213 300L353 318Z" }), hAsync("path", { key: 'ca0b1e62dbf13992b954d4893ff7424c54c8920a', d: "M391 286L565 272L421 252L391 286Z" }), this.state._labeled === true && (hAsync("text", { key: '0d90dd7a130ad1ec86a342d83a2187b6d226d5dc', class: "kol-kolibri__text", x: "250", y: "525", fill: fillColor }, "KoliBri"))));
23973
23985
  }
23974
23986
  validateColor(value) {
23975
23987
  validateColor(this, value, {
@@ -24009,7 +24021,7 @@ class KolKolibri {
24009
24021
  }; }
24010
24022
  }
24011
24023
 
24012
- const defaultStyleCss$l = "/* 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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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 @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\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 visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\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}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-link {\n display: inline-flex;\n align-items: baseline;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n .kol-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-link__text .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
24024
+ const defaultStyleCss$l = "/* 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 * {\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 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: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n 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 @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\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 visibility: hidden;\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\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}\n@layer kol-component {\n :host {\n display: inline-block;\n }\n .kol-link {\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-link--standalone {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n .kol-link__text .kol-span__label {\n text-decoration-line: underline;\n }\n .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n text-decoration-thickness: 0.2em;\n }\n .kol-link__icon {\n display: inline-flex;\n margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
24013
24025
 
24014
24026
  class KolLink {
24015
24027
  constructor(hostRef) {
@@ -24027,7 +24039,7 @@ class KolLink {
24027
24039
  await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
24028
24040
  }
24029
24041
  render() {
24030
- return (hAsync(KolLinkWcTag, { key: 'c5eb6e69486167d08be5f72fd18c71517e5cd510', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _linkVariant: this._variant, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'fb190ca8116d3bec9461ea79345d816140a15f59', name: "expert", slot: "expert" })));
24042
+ return (hAsync(KolLinkWcTag, { key: 'be0c7e4a1457d1e84d8a8e2e6cc71af6cb5673c9', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _linkVariant: this._variant, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '3ecd4a494b2caec0a044cc8d78ce9c7cec73a4fd', name: "expert", slot: "expert" })));
24031
24043
  }
24032
24044
  static get delegatesFocus() { return true; }
24033
24045
  static get style() { return {
@@ -24080,7 +24092,7 @@ class KolLinkButton {
24080
24092
  await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
24081
24093
  }
24082
24094
  render() {
24083
- return (hAsync(KolLinkWcTag, { key: '6ea1d0c984d423bb6d3cd5889a4ced387ea4af78', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _buttonVariant: this._variant }, hAsync("slot", { key: '2a2613d4dd72a2a10656896dc5a6e85171a405b7', name: "expert", slot: "expert" })));
24095
+ return (hAsync(KolLinkWcTag, { key: '5142902995cc45abea316370ddc20dcd50151b1e', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _buttonVariant: this._variant }, hAsync("slot", { key: 'd27772ba427e973a8e464997e0c8f749eea9d0a0', name: "expert", slot: "expert" })));
24084
24096
  }
24085
24097
  static get delegatesFocus() { return true; }
24086
24098
  static get style() { return {
@@ -24123,7 +24135,6 @@ const onLocationChange = (callback, eager = true) => {
24123
24135
  class KolLinkWc {
24124
24136
  constructor(hostRef) {
24125
24137
  registerInstance(this, hostRef);
24126
- this.internalDescriptionById = nonce();
24127
24138
  this.translateOpenLinkInTab = translate('kol-open-link-in-tab');
24128
24139
  this.catchRef = (ref) => {
24129
24140
  this.anchorRef = ref;
@@ -24172,11 +24183,11 @@ class KolLinkWc {
24172
24183
  (_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus();
24173
24184
  }
24174
24185
  render() {
24175
- var _a, _b;
24186
+ var _a;
24176
24187
  const { isExternal, tagAttrs } = this.getRenderValues();
24177
24188
  const hasExpertSlot = showExpertSlot(this.state._label);
24178
- const hasAriaDescription = Boolean((_b = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length);
24179
- return (hAsync(Host, { key: '5f37728ff0adf71e7fba66f1ef848046805a5f2a' }, hAsync("a", Object.assign({ key: '2ba184d05d312f30ad2e52687a8180c9838d84b2', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-describedby": hasAriaDescription ? this.internalDescriptionById : undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
24189
+ const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
24190
+ return (hAsync(Host, { key: '3a5843f8485af46600e7e82292a8f9b1c5b23256' }, hAsync("a", Object.assign({ key: 'da9d78ae81357e8cb3a52a1d3f8411062f9f1440', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
24180
24191
  ? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
24181
24192
  : undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
24182
24193
  'kol-link--disabled': this.state._disabled === true,
@@ -24185,7 +24196,7 @@ class KolLinkWc {
24185
24196
  [`kol-link--${this.state._buttonVariant}`]: this.state._buttonVariant !== 'custom',
24186
24197
  [`kol-link--${this.state._linkVariant}`]: this.state._linkVariant,
24187
24198
  [this.state._customClass]: this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
24188
- }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '91d67f8f7fc11f2d19fb992ef4899a9bcb142e3c', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '13f20a8404a98d5d9297168267a0ca6ec6e1a172', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '77393cfff4cae37b54f58f8b7889961ff7de9fb5', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: 'cd9a2c2c3f93e741ece7aa0ac1511b75b5ba9230', "aria-hidden": "true", class: "kol-link__tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }), hasAriaDescription && (hAsync("span", { key: 'b6c9d8748e9f8b8ed5d2eb424684efe6fdab0b19', class: "visually-hidden", id: this.internalDescriptionById }, this.state._ariaDescription))));
24199
+ }) }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanFc, { key: '1a18162ab35bb7ec8bc7d8462977fc38921b66c0', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'df6d40c51f841a403202da2fbd13b2c4a581cca6', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: '307a3ad63c178b5d46c78e14a1f04fd333bcb09a', class: "kol-link__icon", _label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && (hAsync(KolTooltipWcTag, { key: 'cdf08160668a289b3f101bc899cc9393d8ecd1bb', "aria-hidden": "true", class: "kol-link__tooltip", hidden: hasExpertSlot, _badgeText: this.state._accessKey || this.state._shortKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href }))));
24189
24200
  }
24190
24201
  validateAccessKey(value) {
24191
24202
  validateAccessKey(this, value);
@@ -24383,14 +24394,14 @@ class KolModal {
24383
24394
  (_b = (_a = this.refDialog) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
24384
24395
  }
24385
24396
  render() {
24386
- return (hAsync("dialog", { key: '7ff10751f7a342a9ca719c2d79fe2a0dc6d2bc06', "aria-label": this.state._label, class: clsx('kol-modal', {
24397
+ return (hAsync("dialog", { key: 'c555250f95fd95ec53b1a377d07e6071c663ece3', "aria-label": this.state._label, class: clsx('kol-modal', {
24387
24398
  'kol-modal__blank': this.state._variant === 'blank',
24388
24399
  'kol-modal__card': this.state._variant === 'card',
24389
- }), onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
24400
+ }), onCancel: handleCancelOverlay, onClose: this.handleNativeCloseEvent.bind(this), ref: (el) => {
24390
24401
  this.refDialog = el;
24391
24402
  }, style: {
24392
24403
  width: this.state._width,
24393
- } }, this.state._variant === 'blank' && hAsync("slot", { key: '4178f173aa6b0088bb2d1e5504b4c874b4fc9d36' }), this.state._variant === 'card' && (hAsync(KolCardWcTag, { key: '2fed2d9a3359409426c6a0ae7ae55bf8490017e8', _label: this.state._label, _hasCloser: true, _on: this.on }, hAsync("slot", { key: '2254882248140cc186df25ca75a06f897219211e' })))));
24404
+ } }, this.state._variant === 'blank' && hAsync("slot", { key: '3817185676d437f8cce508b7e0f8cbcacf28dd9e' }), this.state._variant === 'card' && (hAsync(KolCardWcTag, { key: '0f50757a5853159577d862f84ed3991cd1332ea8', _label: this.state._label, _hasCloser: true, _on: this.on }, hAsync("slot", { key: '4a2427341dd963e593abc8cb38657a4677cc8936' })))));
24394
24405
  }
24395
24406
  validateLabel(value) {
24396
24407
  validateLabel(this, value, {
@@ -24458,6 +24469,8 @@ const entryIsButton = (entryProps) => {
24458
24469
  class KolNav {
24459
24470
  constructor(hostRef) {
24460
24471
  registerInstance(this, hostRef);
24472
+ this.navId = 'kol-nav-' + nonce();
24473
+ this.listId = this.navId + '-list';
24461
24474
  this.handleToggleExpansionClick = (children) => {
24462
24475
  if (children) {
24463
24476
  if (this.state._expandedChildren.includes(children)) {
@@ -24473,7 +24486,7 @@ class KolNav {
24473
24486
  'kol-nav__list--nested': props.deep > 0,
24474
24487
  'kol-nav__list--horizontal': props.deep === 0 && props.orientation === 'horizontal',
24475
24488
  'kol-nav__list--vertical': props.deep !== 0 || props.orientation === 'vertical',
24476
- }), "data-deep": props.deep, id: props.id }, props.links.map((link, index) => {
24489
+ }), id: props.deep > 0 ? props.id : undefined }, props.links.map((link, index) => {
24477
24490
  return this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation, props.id);
24478
24491
  })));
24479
24492
  };
@@ -24561,14 +24574,13 @@ class KolNav {
24561
24574
  const collapsible = this.state._collapsible === true;
24562
24575
  const hideLabel = this.state._hideLabel === true;
24563
24576
  const orientation = this.state._orientation;
24564
- const id = 'kol-nav-' + nonce();
24565
- return (hAsync("div", { key: '953b90192368f67370123c89c5502209e0928be5', class: clsx('kol-nav', `kol-nav--${orientation}`, {
24577
+ return (hAsync("div", { key: 'b81a02c0f627db81710f6b326065b0c80ff49961', class: clsx('kol-nav', `kol-nav--${orientation}`, {
24566
24578
  'kol-nav--is-compact': this.state._hideLabel,
24567
- }) }, hAsync("nav", { key: '42f841544dde2ddd8340e0bb705c94f6212c6d6d', class: "kol-nav__navigation", "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: '70c345730d6e3d66bd8d05c62b87eeea26fa9d79', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation, id: id })), hasCompactButton && (hAsync("div", { key: 'd8a072335ea4b41980d0b7b556aa4e29b1cc1eda', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: 'b9e6b197b9fe311696f03b640b8c23f291cb18fc', class: "kol-nav__toggle-button", _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
24579
+ }) }, hAsync("nav", { key: '6fce5eb1c95a33db43fbb56e3c146c2e4b266949', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, hAsync(this.linkList, { key: 'bed43e2e2e1d524fba29b4c2e6bff773d9df87ee', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation, id: this.listId })), hasCompactButton && (hAsync("div", { key: '8b7ad21cf761b819ddea7c935e961637400b3d13', class: "kol-nav__compact" }, hAsync(KolButtonWcTag, { key: 'df4ea58739516abe982432ead3eb32e486562fa5', 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: {
24568
24580
  onClick: () => {
24569
24581
  this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
24570
24582
  },
24571
- }, _tooltipAlign: "right", _buttonVariant: "ghost" })))));
24583
+ }, _tooltipAlign: "right" })))));
24572
24584
  }
24573
24585
  validateCollapsible(value) {
24574
24586
  validateCollapsible(this, value);
@@ -24659,7 +24671,7 @@ class KolPagination {
24659
24671
  this._tooltipAlign = 'top';
24660
24672
  }
24661
24673
  render() {
24662
- return (hAsync(KolPaginationWcTag, { key: '14b17e953d67caaa9892271b9c19d40044558418', _boundaryCount: this._boundaryCount, _label: this._label, _customClass: this._customClass, _on: this._on, _hasButtons: this._hasButtons, _page: this._page, _pageSize: this._pageSize, _pageSizeOptions: this._pageSizeOptions, _siblingCount: this._siblingCount, _tooltipAlign: this._tooltipAlign, _max: this._max }));
24674
+ return (hAsync(KolPaginationWcTag, { key: '0b69912aa6d98d2db1a05f3ea1ae8ee6aa8f0623', _boundaryCount: this._boundaryCount, _label: this._label, _customClass: this._customClass, _on: this._on, _hasButtons: this._hasButtons, _page: this._page, _pageSize: this._pageSize, _pageSizeOptions: this._pageSizeOptions, _siblingCount: this._siblingCount, _tooltipAlign: this._tooltipAlign, _max: this._max }));
24663
24675
  }
24664
24676
  static get style() { return {
24665
24677
  default: defaultStyleCss$h
@@ -24880,14 +24892,18 @@ class KolPaginationWc {
24880
24892
  }, _value: this.state._pageSize }))));
24881
24893
  }
24882
24894
  getUnselectedPageButton(page) {
24883
- return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { exportparts: "icon", _customClass: this.state._customClass, _label: "", _on: {
24895
+ const pageText = NUMBER_FORMATTER.format(page);
24896
+ const ariaDescription = `${this.translatePage} ${pageText}`;
24897
+ return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { _ariaDescription: ariaDescription, _customClass: this.state._customClass, _label: pageText, _on: {
24884
24898
  onClick: (event) => {
24885
24899
  this.onClick(event, page);
24886
24900
  },
24887
- } }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, this.translatePage), " ", NUMBER_FORMATTER.format(page)))));
24901
+ } })));
24888
24902
  }
24889
24903
  getSelectedPageButton(page) {
24890
- return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { class: "kol-pagination__button kol-pagination__button--selected", _customClass: this.state._customClass, _disabled: true, _label: "" }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, this.translatePage), " ", NUMBER_FORMATTER.format(page)))));
24904
+ const pageText = NUMBER_FORMATTER.format(page);
24905
+ const ariaDescription = `${this.translatePage} ${pageText}`;
24906
+ return (hAsync("li", { key: nonce() }, hAsync(KolButtonWcTag, { "aria-current": "page", class: "kol-pagination__button kol-pagination__button--selected selected", _ariaDescription: ariaDescription, _customClass: this.state._customClass, _disabled: true, _label: pageText })));
24891
24907
  }
24892
24908
  validateBoundaryCount(value) {
24893
24909
  watchNumber(this, '_boundaryCount', Math.max(0, value !== null && value !== void 0 ? value : 1));
@@ -26762,7 +26778,7 @@ class KolPopover {
26762
26778
  });
26763
26779
  }
26764
26780
  render() {
26765
- return (hAsync(Host, { key: '53179ace5c0dfabbe1dd00ba8ddfe453ef55ccd5', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: 'f42aafe81aaa0a09526b4e9923a96133ee81c5d2', class: clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible }), ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: '25719436c820c214a2e3c0fac47449f842c4f68c', class: clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`), ref: this.catchArrowElement }), hAsync("slot", { key: 'fff04758761fb36389c6698b17730b604981ca66' }))));
26781
+ return (hAsync(Host, { key: '73e96ffd3bd3e790af370c6b6c04b8000abd1ce2', ref: this.catchHostAndTriggerElement, class: "kol-popover" }, hAsync("div", { key: '5ed3a18bf6b76f8d607c17352fd9956f3cb3782c', class: clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible }), ref: this.catchPopoverElement, hidden: !this.state._show }, hAsync("div", { key: 'aa1ca688f04b23b180c64b841a17ee6b3d6812b0', class: clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`), ref: this.catchArrowElement }), hAsync("slot", { key: 'd94f499e6fbbb7e855487d870cfca3ddfec7e495' }))));
26766
26782
  }
26767
26783
  validateAlign(value) {
26768
26784
  validateAlign(this, value);
@@ -26819,7 +26835,7 @@ let KolPopoverButton$1 = class KolPopoverButton {
26819
26835
  void ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.hidePopover());
26820
26836
  }
26821
26837
  render() {
26822
- return (hAsync(KolPopoverButtonWcTag, { key: '874bfd4d3738aee7db007df7f1f072a312bda82b', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _popoverAlign: this._popoverAlign, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '3e3353a2aa09a4ab53145811a9baaf69c6eb5fe7', name: "expert", slot: "expert" }), hAsync("slot", { key: 'ae349ddc431b20ba527dac3c30edf1ba9e61cb2d' })));
26838
+ return (hAsync(KolPopoverButtonWcTag, { key: '3d9ceba2ba454ac2fc535ac743b0a12faa0785e5', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _popoverAlign: this._popoverAlign, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: 'f9dd94cd3e288a23c035f82f7e551a243c6dd675', name: "expert", slot: "expert" }), hAsync("slot", { key: '04e668416cb7a3692597ec1e1035f26a728214f1' })));
26823
26839
  }
26824
26840
  static get style() { return {
26825
26841
  default: defaultStyleCss$g
@@ -26933,7 +26949,7 @@ class KolPopoverButton {
26933
26949
  (_c = this.cleanupAutoPositioning) === null || _c === void 0 ? void 0 : _c.call(this);
26934
26950
  }
26935
26951
  render() {
26936
- return (hAsync("div", { key: 'ed9bd3791a41c429effa8bba1fd4f835b26e7417', class: "kol-popover-button" }, hAsync(KolButtonWcTag, { key: '43ae7fc22399fd5d6aa526eb9c9402e877a71f3e', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element), onClick: this.handleButtonClick.bind(this) }, hAsync("slot", { key: '4e312ac4d1c7e5695d78cd48feba9b3738a540a6', name: "expert", slot: "expert" })), hAsync("div", { key: 'c5dccff4d149aa043963ed1c81ba0f2391526a18', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '36f4ed8c4df5e3c80d6706ea3bdc440c77b987fc' }))));
26952
+ return (hAsync("div", { key: '189f95dc5c7d15990e6d2903fc151bc89b850023', class: "kol-popover-button" }, hAsync(KolButtonWcTag, { key: '1f7953cbde3265b80f8ee6a6a6d86039a9b6fd61', _accessKey: this._accessKey, "_aria-controls": "popover", _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _ariaHasPopup: 'dialog', _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant, "data-testid": "popover-button", class: "kol-popover-button__button", ref: (element) => (this.refButton = element), onClick: this.handleButtonClick.bind(this) }, hAsync("slot", { key: 'be0a9094a249e64b327e19ac0086f89566c2e258', name: "expert", slot: "expert" })), hAsync("div", { key: '3de284cea084dff89ae462a286116bdc45e5c05c', ref: (element) => (this.refPopover = element), "data-testid": "popover-content", popover: "auto", id: "popover", class: "kol-popover-button__popover" }, hAsync("slot", { key: '8037d5890351fa0f66c6b9d811c6e284fb2a46d7' }))));
26937
26953
  }
26938
26954
  validatePopoverAlign(value) {
26939
26955
  validatePopoverAlign(this, value);
@@ -27016,10 +27032,10 @@ class KolProgress {
27016
27032
  const isPercentage = this.state._unit === '%';
27017
27033
  const liveProgressValue = isPercentage ? `${Math.round((this.state._liveValue / this.state._max) * 100)}` : this.state._liveValue;
27018
27034
  const displayValue = isPercentage ? Math.round((this.state._value / this.state._max) * 100) : this.state._value;
27019
- return (hAsync("div", { key: '30c2914505a2921a767ffb7b9e8e120bf2c0f371', class: "kol-progress" }, hAsync("div", { key: 'b78153292354cb734b5ce72cb024b7b05ff65ecb', "aria-hidden": "true", class: {
27035
+ return (hAsync("div", { key: '07fbfb3f4cbf32a7ad5f7cc9a721ab2c60405f66', class: "kol-progress" }, hAsync("div", { key: '9793059300b8ccd4fe00ac804a935696a2f15177', "aria-hidden": "true", class: {
27020
27036
  'kol-progress__cycle': this.state._variant === 'cycle',
27021
27037
  'kol-progress__bar': this.state._variant === 'bar',
27022
- } }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: 'd19dd3020c5e756eee36d11ed3f108d74ae2ad3b', class: "kol-progress__bar-label" }, this.state._label), createProgressSVG(this.state), this.state._variant === 'cycle' && (hAsync("div", { key: '412a00560e3d04e9eaba630bc18b1b0911a1739e', class: "kol-progress__cycle-text" }, this.state._label && hAsync("div", { key: '6c95c1357dfbfb5e9659081753c19c977ec1d307', class: "kol-progress__cycle-label" }, this.state._label), hAsync("div", { key: '654bb1038ac1202cec59740dcfb781a83e7f3b0e', class: "kol-progress__cycle-value" }, `${displayValue} ${this.state._unit}`))), this.state._variant === 'bar' && (hAsync("div", { key: '79f03f81f500e7806c470f7e862e84d923ca019a', class: "kol-progress__bar-value", style: { width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` } }, displayValue)), this.state._variant === 'bar' && hAsync("div", { key: '91e7c2d27ad4734119d125b7839d8c64ac67b089', class: "kol-progress__bar-unit" }, this.state._unit)), hAsync("progress", { key: '036f25010c9d5581020aa33c8dd2c2e562a421be', class: "visually-hidden", "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '9704c069d644b44000003e1147395f930e634dd7', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`)));
27038
+ } }, this.state._variant === 'bar' && this.state._label && hAsync("div", { key: '66efddf0c7b50e0071f7378bac16e3c29ad487c9', class: "kol-progress__bar-label" }, this.state._label), createProgressSVG(this.state), this.state._variant === 'cycle' && (hAsync("div", { key: '9c3317e954737da80a048054705896a46ddb41a4', class: "kol-progress__cycle-text" }, this.state._label && hAsync("div", { key: '3ff383a5253793f48fcccc908a0efa02db72590c', class: "kol-progress__cycle-label" }, this.state._label), hAsync("div", { key: '37728879affa27b704266f05a5d42c9a13a1c2ff', class: "kol-progress__cycle-value" }, `${displayValue} ${this.state._unit}`))), this.state._variant === 'bar' && (hAsync("div", { key: '0fdfff089fb5b9867bfceeca9e9fd3e8ccb52527', class: "kol-progress__bar-value", style: { width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` } }, displayValue)), this.state._variant === 'bar' && hAsync("div", { key: 'de6fdfc8a8afefe9c9ba9c8b8cb437fa9e644f38', class: "kol-progress__bar-unit" }, this.state._unit)), hAsync("progress", { key: '5ef01b32eb1e15038fcca69aa9dda54f7c340f19', class: "visually-hidden", "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '90a1838d38c1193e840400eca8adf0688beee983', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, isPercentage ? `${liveProgressValue} %` : `${liveProgressValue} von ${this.state._max} ${this.state._unit}`)));
27023
27039
  }
27024
27040
  validateLabel(value) {
27025
27041
  validateLabel(this, value);
@@ -27123,7 +27139,7 @@ class KolQuote {
27123
27139
  }
27124
27140
  render() {
27125
27141
  const hasExpertSlot = showExpertSlot(this.state._quote);
27126
- return (hAsync("figure", { key: '3577d4eb15e4d4fb90bb23b73b070b84af133407', class: clsx('kol-quote', `kol-quote--${this.state._variant}`) }, this.state._variant === 'block' ? (hAsync("blockquote", { class: "kol-quote__blockquote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { class: "kol-quote__quote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: '1b5f3dd6c8b687afdc02679fb0d4a2ec978c2adf', class: "kol-quote__figcaption" }, hAsync("cite", { key: 'bfe86e4a9b0e10a45973d76f68c699771f59b4be', class: "kol-quote__cite" }, hAsync(KolLinkTag, { key: '146d5d83a83a8b8a5688be828a605c65c0d703dd', _href: this.state._href, _label: this.state._label, _target: "_blank" }))))));
27142
+ return (hAsync("figure", { key: '7ac209984bade360715ca4edf77fad317687e6ea', class: clsx('kol-quote', `kol-quote--${this.state._variant}`) }, this.state._variant === 'block' ? (hAsync("blockquote", { class: "kol-quote__blockquote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { class: "kol-quote__quote", cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", { key: 'f259d9c9d6a5a9bf0f5c5a9dc234cb453c963b60', class: "kol-quote__figcaption" }, hAsync("cite", { key: '0ea0d21cab1594be38e354010606eb8799da6db6', class: "kol-quote__cite" }, hAsync(KolLinkTag, { key: '94b7de0e854ac54d75abd09e781e93111dfae101', _href: this.state._href, _label: this.state._label, _target: "_blank" }))))));
27127
27143
  }
27128
27144
  static get watchers() { return {
27129
27145
  "_label": ["validateLabel"],
@@ -27374,11 +27390,11 @@ class KolSelect {
27374
27390
  } });
27375
27391
  }
27376
27392
  render() {
27377
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'adcb9f796ccfdb4ca138c08ce006abe09cab1b2d' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '8a26ab066a1caac5ebc68d78902f71f32c1cd9e8', state: this.state }, hAsync("form", { key: '72ece646a96c4d67c19131a7559865859ce8255d', onSubmit: (event) => {
27393
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: '8da4f1e8ccf2788b6a803b5f12f934f4efb7aea9' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '866b50395d3859f859cadffd7dfebe197ec06a72', state: this.state }, hAsync("form", { key: '0d54f77ed083677fcef88da3ca291455a6ae11c8', onSubmit: (event) => {
27378
27394
  event.preventDefault();
27379
27395
  propagateSubmitEventToForm({
27380
27396
  form: this.host});
27381
- } }, hAsync("input", { key: '3135a18fd70d2c70caa6b273dc6c0d60cd5ebc16', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: '57adf44c46c1fc70b664e135ec7d9028c7cf903e' }, this.getSelectProps()))))));
27397
+ } }, hAsync("input", { key: 'cb127a25839560683f5ef32a6b6924a2033dff2e', type: "submit", hidden: true }), hAsync(SelectStateWrapper, Object.assign({ key: 'b92a71fb9409ac048cb6a91ca4f17ec7dca63930' }, this.getSelectProps()))))));
27382
27398
  }
27383
27399
  constructor(hostRef) {
27384
27400
  registerInstance(this, hostRef);
@@ -27770,13 +27786,13 @@ class KolSingleSelect {
27770
27786
  render() {
27771
27787
  var _a;
27772
27788
  const isDisabled = this.state._disabled === true;
27773
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: '2b5a713a2e92acfad9df7e92be6f9f76d50a6ec3' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '34463eb1e93d3d47ed2971c8d7ca6e2e10cf98f6', state: this.state }, hAsync("div", { key: '52e358cac067801ffbf09c826bc3ae3fe89a5822', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'c73a67a263d8a48a2e205019a03d1ad4bc4fefe4' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: 'ca9eb8dd6f20cbc0e599f65862f0e601e438ed80', _icons: "codicon codicon-close", "data-testid": "single-select-delete", _label: this.translateDeleteSelection, onClick: () => {
27789
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'e2cf3b85addd01646a534c14892c8891b800b7ce' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: '4aa11a93338d3244adbc24b2fdbeb210f6bcefc7', state: this.state }, hAsync("div", { key: 'fefbbd217a319c3755d49a4d533e000f0ff7bce5', class: "kol-single-select__group" }, hAsync(InputStateWrapper, Object.assign({ key: '1bcf38931fccff130458d6bc1ddcbdbe0a3cc182' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '32667712e9b5f58dae75aeb54f616a5d1cbcd759', _icons: "codicon codicon-close", "data-testid": "single-select-delete", _label: this.translateDeleteSelection, onClick: () => {
27774
27790
  var _a;
27775
27791
  this.clearSelection();
27776
27792
  (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
27777
27793
  }, class: clsx('kol-single-select__delete', {
27778
27794
  'kol-single-select__delete--disabled': isDisabled,
27779
- }) })), hAsync(CustomSuggestionsToggleFc, { key: '89934aae9c38683724faab14fc08ede3ac509b9e', onClick: this.toggleListbox.bind(this), disabled: isDisabled })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'cde42384d14b755bd5c73a033cb6f13038320717', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
27795
+ }) })), hAsync(CustomSuggestionsToggleFc, { key: '72a745808952b57d8a5a22edf4170e6ee6cbf57a', onClick: this.toggleListbox.bind(this), disabled: isDisabled })), this._isOpen && !isDisabled && (hAsync(CustomSuggestionsOptionsGroupFc, { key: '212d41e037edd61b5b798218172ed38104cc5111', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
27780
27796
  if (el)
27781
27797
  this.refOptions[index] = el;
27782
27798
  }, selected: this._value === option.value, onClick: (event) => {
@@ -28133,7 +28149,7 @@ class KolSkipNav {
28133
28149
  };
28134
28150
  }
28135
28151
  render() {
28136
- return (hAsync("nav", { key: '912f8ac6ce63cddd0fa738db9ef6ff987b2a2db9', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: '79991f7d918e9bbf6891d479804f2520356f2a41', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
28152
+ return (hAsync("nav", { key: 'a515409957ec96cb079350271ee28d62c99b93c3', class: "kol-skip-nav", "aria-label": this.state._label }, hAsync("ul", { key: 'de4b6fb648d18295d68eec0372b7c97cfcfb8e6a', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
28137
28153
  return (hAsync("li", { class: "kol-skip-nav__list-item", key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
28138
28154
  }))));
28139
28155
  }
@@ -28204,7 +28220,7 @@ class KolSpin {
28204
28220
  }
28205
28221
  render() {
28206
28222
  var _a, _b;
28207
- return (hAsync(Host, { key: 'c93b62db81e8d08c9758963db96b9c493913ea57', class: "kol-spin", "aria-live": "polite" }, this.state._label && (this.state._show || this.showToggled) && hAsync("span", { key: 'b4015521e2461e12607aab303be8e86482d826e6', class: "visually-hidden" }, this.state._label), this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning, class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`), role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone, "aria-busy": "false", role: "alert" }))));
28223
+ return (hAsync(Host, { key: '2d58e48797d9a826cdb22f327b6ec479e929358a', class: "kol-spin", "aria-live": "polite" }, this.state._label && (this.state._show || this.showToggled) && hAsync("span", { key: 'b944f090090b53b836b11f9bbe9062bc3b54b553', class: "visually-hidden" }, this.state._label), this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning, class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`), role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone, "aria-busy": "false", role: "alert" }))));
28208
28224
  }
28209
28225
  validateShow(value) {
28210
28226
  this.showToggled = this.state._show === true && this._show === false;
@@ -28291,10 +28307,10 @@ class KolSplitButton {
28291
28307
  }
28292
28308
  render() {
28293
28309
  const i18nDropdownLabel = 'kol-split-button-dropdown-label';
28294
- return (hAsync("div", { key: '5a243be782c854c759a1e649624435137918b698', class: "kol-split-button" }, hAsync("div", { key: '98eae8fe12b95afa454c6b788020f7a56d592425', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '94e45c0da02f8f3e2a1073779ee51d0e2a270c2a', class: clsx('kol-split-button__button', {
28310
+ return (hAsync("div", { key: 'ee9ec3be476d0b22a2a935060577d2f1f2974897', class: "kol-split-button" }, hAsync("div", { key: 'b1dedc0780bdf5530740fa2bc30f8abca89fb4d9', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '8d60a138a276ef9273d7983f98d007a5adc2f320', class: clsx('kol-split-button__button', {
28295
28311
  [this._variant]: this._variant !== 'custom',
28296
28312
  [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
28297
- }), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '09f7b0b56c1281bf1030d396a55e158d77904087', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '58798ef2211f26733b097a8ae30794a3052d8d63', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: '49bfaad22ce73bf285321031f2b797162444f660', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '6632adad72763f17e4178a3faf1e4a5d5cd49661' }))));
28313
+ }), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '8fecc2534337adb15b7b5cf1e019299bce992ee5', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '27509537a4e7988cc8c10a58ab564968da9f91cb', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: 'dbd66e892344556a84da9e314d21cb5dc1bed60a', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'd35f5f625b697582f000ac99e00051d2d0c6077a' }))));
28298
28314
  }
28299
28315
  async closePopup() {
28300
28316
  this.handleOnClose();
@@ -28401,7 +28417,7 @@ class KolTableSettings {
28401
28417
  }
28402
28418
  render() {
28403
28419
  const sortedColumns = [...this.tableSettings.columns].sort((a, b) => a.position - b.position);
28404
- return (hAsync(KolPopoverButtonWcTag, { key: 'ba6964d7d0015211d50a68536b36be024ee0f418', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "codicon codicon-settings-gear", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: 'ee4075b1511fa1bec77a7068ff91e7e6a6f26c67', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: '63f1aba0d47cfd03725a3d458f0b98d9b739022e', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: '6824b98b2b9b62260330053fe79ca0ee30bc15d7', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: '2bf2773cacaee3f90007ea3b8b1971732b67b4b5', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: '3970a3988ebb05498fda0b485282f134b2fbc513', class: "kol-table-settings__columns-container" }, hAsync("div", { key: '3e7e9f1726a3eb9a605563d8cb23966f500c4ec5', class: "kol-table-settings__columns" }, sortedColumns.map((column, index) => (hAsync("div", { key: column.key, class: "kol-table-settings__column" }, hAsync(KolInputCheckboxTag, { _checked: column.visible, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => this.handleVisibilityChange(column.key, value) } }), hAsync("span", null, column.label), hAsync(KolInputNumberTag, { _hideLabel: true, _value: column.width, _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _on: { onInput: (_, value) => this.handleWidthChange(column.key, value) } }), hAsync(KolButtonWcTag, { _icons: "codicon codicon-arrow-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _buttonVariant: "ghost", _on: { onClick: () => this.moveColumn(column.key, 'up') }, _disabled: index === 0, "data-testid": "table-settings-move-up" }), hAsync(KolButtonWcTag, { _icons: "codicon codicon-arrow-down", _label: translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _buttonVariant: "ghost", _on: { onClick: () => this.moveColumn(column.key, 'down') }, _disabled: index === sortedColumns.length - 1, "data-testid": "table-settings-move-down" })))))), hAsync("div", { key: 'f762fa692848ff9161a9a7f8db4e1d4c36d059c8', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: '42401475bdf959ddee26b8489d775bb481ce5727', _label: this.translateTableSettingsCancel, _buttonVariant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: 'c24e37a9d6a589d6a395156adfb574f70116c075', _label: this.translateTableSettingsApply, _buttonVariant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
28420
+ return (hAsync(KolPopoverButtonWcTag, { key: 'a320abde186d6157caeaa9cf108e53b7ed3a8549', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "codicon codicon-settings-gear", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, hAsync("div", { key: '63e19443ab0fc20a7ac7511416c1224f8129b7a8', class: "kol-table-settings__content" }, hAsync(KolHeadingTag, { key: '0af8b7aee2718c354173bbbf32aaaaffcad6b433', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && hAsync(KolAlertWcTag, { key: '175223ca9cd38918fd7f96941d9c4747b00e66e3', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), hAsync("form", { key: 'd1008b0f61d2b52e865bbe3ade56ba7515fc9eb0', onSubmit: this.handleSubmit.bind(this) }, hAsync("div", { key: '97e2bda0e35103d6fc542630799b4a4adf19bc96', class: "kol-table-settings__columns-container" }, hAsync("div", { key: '4ce5682b2d41b505606330ba3a8be4509872cafd', class: "kol-table-settings__columns" }, sortedColumns.map((column, index) => (hAsync("div", { key: column.key, class: "kol-table-settings__column" }, hAsync(KolInputCheckboxTag, { _checked: column.visible, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => this.handleVisibilityChange(column.key, value) } }), hAsync("span", null, column.label), hAsync(KolInputNumberTag, { _hideLabel: true, _value: column.width, _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _on: { onInput: (_, value) => this.handleWidthChange(column.key, value) } }), hAsync(KolButtonWcTag, { _icons: "codicon codicon-arrow-up", _label: translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _buttonVariant: "ghost", _on: { onClick: () => this.moveColumn(column.key, 'up') }, _disabled: index === 0, "data-testid": "table-settings-move-up" }), hAsync(KolButtonWcTag, { _icons: "codicon codicon-arrow-down", _label: translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _buttonVariant: "ghost", _on: { onClick: () => this.moveColumn(column.key, 'down') }, _disabled: index === sortedColumns.length - 1, "data-testid": "table-settings-move-down" })))))), hAsync("div", { key: '4fdab69de35f27f4e3f52d86430e20148fd4dd98', class: "kol-table-settings__actions" }, hAsync(KolButtonWcTag, { key: '0b8f5a4d0d0b4e0668c61aaeb105e50d09a84d50', _label: this.translateTableSettingsCancel, _buttonVariant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), hAsync(KolButtonWcTag, { key: '7ea9108aa5eede0c6dcedf80ed46e636358dfa2b', _label: this.translateTableSettingsApply, _buttonVariant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
28405
28421
  }
28406
28422
  get host() { return getElement(this); }
28407
28423
  static get watchers() { return {
@@ -28794,7 +28810,7 @@ class KolTableStateful {
28794
28810
  horizontal: (_d = (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) }))))) !== null && _d !== void 0 ? _d : [],
28795
28811
  vertical: (_f = (_e = this.state._headers.vertical) === null || _e === void 0 ? void 0 : _e.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) }))))) !== null && _f !== void 0 ? _f : [],
28796
28812
  };
28797
- return (hAsync(Host, { key: 'd2b36026a0c931eebdff9269a19c2e61b32ae9a2', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '9125f5790496178db69cfb865ce666dcf67acf27', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
28813
+ return (hAsync(Host, { key: 'a007e9ae8adf0dbf04181a9524d5b826c3fe219c', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '0b4912bbee2fea17c3fdc2bbc8e4c49659d0c5a9', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
28798
28814
  onSort: (_, payload) => {
28799
28815
  this.handleSort(payload);
28800
28816
  },
@@ -28853,7 +28869,7 @@ let KolTableStateless$1 = class KolTableStateless {
28853
28869
  registerInstance(this, hostRef);
28854
28870
  }
28855
28871
  render() {
28856
- return (hAsync(KolTableStatelessWcTag, { key: 'b4fcf0d4f8058f82f2ee64ffb90ae2b78ec1017e', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection, _tableSettings: this._tableSettings, _hasSettingsMenu: this._hasSettingsMenu }));
28872
+ return (hAsync(KolTableStatelessWcTag, { key: '3f600244a23f03d0dfbddb1be4006cc50b1cf46f', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection, _tableSettings: this._tableSettings, _hasSettingsMenu: this._hasSettingsMenu }));
28857
28873
  }
28858
28874
  static get style() { return {
28859
28875
  default: defaultStyleCss$7
@@ -29423,12 +29439,12 @@ class KolTableStateless {
29423
29439
  const dataField = this.createDataField(this.state._data, this.state._headerCells);
29424
29440
  this.checkboxRefs = [];
29425
29441
  const sortedHorizontalHeaders = (_a = this.state._headerCells.horizontal) === null || _a === void 0 ? void 0 : _a.map((row) => this.sortByColumnPosition(row));
29426
- return (hAsync("div", { key: 'bfc320c1ffe4967b954f1a721bee3cd35648a54c', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: 'c70c3570b89d7acb05ea4030bac7bc1a27242712', _tableSettings: this.state._tableSettings }), hAsync("div", { key: 'e823540452f410b0faaf0b1ace9197f3b31c7987', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '92d36c24de31ffdc07f3a05240013f66d33dd2e6', class: "kol-table__table", style: {
29442
+ return (hAsync("div", { key: 'c216230dd1112ce9ac2a034f364315d9ce1c3935', class: "kol-table" }, this.state._hasSettingsMenu && hAsync(KolTableSettingsWcTag, { key: '86e209a0ccd22094e0343973693bbf6cbbc7f49c', _tableSettings: this.state._tableSettings }), hAsync("div", { key: 'c5353e093cb4557f952b645518e3472da01e4edd', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '8783340c6176a151a43f80a86bb8be546e734cb7', class: "kol-table__table", style: {
29427
29443
  minWidth: this.getTableMinWidth(),
29428
- } }, hAsync("caption", { key: '3daad52523dcf77718ad906cab875b1d044041a7', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(sortedHorizontalHeaders) && (hAsync("thead", { key: 'cfefb0f9bab674fa89c2b095763b3812c35750af', class: "kol-table__head" }, [
29444
+ } }, hAsync("caption", { key: '9da3504fbfea6b9510444ecee085f82d8f8e5830', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label), Array.isArray(sortedHorizontalHeaders) && (hAsync("thead", { key: 'c20dda019839978c1cba28c529e3f8a8bca1e962', class: "kol-table__head" }, [
29429
29445
  sortedHorizontalHeaders.map((cols, rowIndex) => (hAsync("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
29430
29446
  this.renderSpacer('head', sortedHorizontalHeaders),
29431
- ])), hAsync("tbody", { key: '77cdebb2b01c11e802bb42044bed58c8d63ee06a', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
29447
+ ])), hAsync("tbody", { key: '554877dcc2d93c5a43f3af2947f7a380f6cc2cb7', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
29432
29448
  }
29433
29449
  get host() { return getElement(this); }
29434
29450
  static get watchers() { return {
@@ -29669,9 +29685,9 @@ class KolTabs {
29669
29685
  }, _icons: "codicon codicon-plus", "data-testid": "tabs-create-button" }))));
29670
29686
  }
29671
29687
  render() {
29672
- return (hAsync("div", { key: 'c90d53464702512863a3483602ed15645a6c0484', ref: (el) => {
29688
+ return (hAsync("div", { key: '651b397e4e56da8694268e5670dd12da67fb4430', ref: (el) => {
29673
29689
  this.tabPanelsElement = el;
29674
- }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '3e172f4835867233726b1ae2081e3a6729eb3b83', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
29690
+ }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), hAsync("div", { key: '2583e66740101758cdf796a45961142384bf9fdf', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
29675
29691
  }
29676
29692
  validateAlign(value) {
29677
29693
  validateAlign(this, value);
@@ -29898,7 +29914,7 @@ class KolTextarea {
29898
29914
  } });
29899
29915
  }
29900
29916
  render() {
29901
- return (hAsync(FormFieldStateWrapper, Object.assign({ key: 'a04967ea2fecb1a7c6f238600d52f2d4d4b4cc72' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'db4f3ed0dfa745c109a3a21346df79722b0f7595', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: '71376e1ff01a524c589632fff16023da5bb9774b' }, this.getTextAreaProps())))));
29917
+ return (hAsync(FormFieldStateWrapper, Object.assign({ key: '59ad033cb8e22831871f37a99c924258fd827f87' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'd0872947a090d08e0e1f63c40e861bd5ea311eea', state: this.state }, hAsync(TextAreaStateWrapper, Object.assign({ key: 'f66fb8dea2d4463ca6f8d8b80078f83e53781c8b' }, this.getTextAreaProps())))));
29902
29918
  }
29903
29919
  constructor(hostRef) {
29904
29920
  registerInstance(this, hostRef);
@@ -30122,7 +30138,7 @@ class KolToastContainer {
30122
30138
  }
30123
30139
  async enqueue(toast) {
30124
30140
  const newToastState = {
30125
- toast,
30141
+ toast: Object.assign(Object.assign({}, toast), { variant: 'card' }),
30126
30142
  status: 'adding',
30127
30143
  id: `toast-${nonce()}`,
30128
30144
  };
@@ -30171,7 +30187,7 @@ class KolToastContainer {
30171
30187
  }
30172
30188
  }
30173
30189
  render() {
30174
- return (hAsync(Host, { key: 'e6841e1a26bc8c24de441ed1d444175021f8d7b5', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: '938ab38123fd91e356eb63b4c315d1884eb37197', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
30190
+ return (hAsync(Host, { key: '59038f1cc016df1fb76b2436b4ad4598700e66a9', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { key: 'd2aea02a378c5631da3d47e8ab947e81eaa4174b', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
30175
30191
  onClick: () => {
30176
30192
  void this.closeAll();
30177
30193
  },
@@ -30225,7 +30241,7 @@ class KolToolbar {
30225
30241
  return Object.assign(Object.assign({}, rest), { _icons, _disabled });
30226
30242
  }
30227
30243
  render() {
30228
- return (hAsync("div", { key: '1cd1a068044a515fd2662a3bd67415baf927edaf', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
30244
+ return (hAsync("div", { key: '21d9f22b65a5da8bf4467287754233720e9de61d', class: `kol-toolbar kol-toolbar--orientation-${this.state._orientation}`, role: "toolbar", "aria-label": this.state._label }, this.state._items.map(this.renderItem)));
30229
30245
  }
30230
30246
  validateLabel(value) {
30231
30247
  validateLabel(this, value);
@@ -30334,6 +30350,7 @@ class KolTooltipWc {
30334
30350
  this.showTooltip = () => {
30335
30351
  if (this.previousSibling && this.tooltipElement) {
30336
30352
  showOverlay(this.tooltipElement);
30353
+ tooltipOpened();
30337
30354
  this.tooltipElement.style.setProperty('display', 'block');
30338
30355
  getDocument().addEventListener('keyup', this.hideTooltipByEscape);
30339
30356
  const target = this.previousSibling;
@@ -30410,6 +30427,7 @@ class KolTooltipWc {
30410
30427
  clearTimeout(this.showTooltipTimeout);
30411
30428
  if (this.tooltipElement) {
30412
30429
  hideOverlay(this.tooltipElement);
30430
+ tooltipClosed();
30413
30431
  this.tooltipElement.style.setProperty('display', 'none');
30414
30432
  this.tooltipElement.style.setProperty('visibility', 'hidden');
30415
30433
  if (this.cleanupAutoPositioning) {
@@ -30432,7 +30450,7 @@ class KolTooltipWc {
30432
30450
  this.hideTooltipWithDelay();
30433
30451
  }
30434
30452
  render() {
30435
- return (hAsync(Host, { key: '60be1bd258bc5ae2b0ecce9374607d11476071b1', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: '2af044756ca7d87c5b789181da84556a517c0ee4', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: '057fc2de5c87f0f82e9477568992048bf3918e77', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: '1ba456fb877c04c0dc1e93431f90db07f2e90b47', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
30453
+ return (hAsync(Host, { key: 'f6e31c6aa5dc271ada1f4096427b58a9a5d0b103', class: "kol-tooltip" }, this.state._label !== '' && (hAsync("div", { key: '96c552106c2451123f77cc3214519e992f652056', class: "kol-tooltip__floating", ref: this.catchTooltipElement }, hAsync("div", { key: 'd3e834e3c18fb563b4a521e476e221e8eb1c3964', class: "kol-tooltip__arrow", ref: this.catchArrowElement }), hAsync(KolSpanFc, { key: '18b65ec1410d49445016aa3ca0373a113b3e9510', class: "kol-tooltip__content", id: this.state._id, badgeText: this._badgeText, label: this.state._label })))));
30436
30454
  }
30437
30455
  validateBadgeText(value) {
30438
30456
  validateBadgeText(this, value);
@@ -30509,7 +30527,7 @@ class KolTree {
30509
30527
  registerInstance(this, hostRef);
30510
30528
  }
30511
30529
  render() {
30512
- return (hAsync(KolTreeWcTag, { key: '69fcda89930476d36e84516cc64cc7eebf1094db', _label: this._label }, hAsync("slot", { key: '5259ea6f1eb1fb6f3ed8b8a64e7a442f27e4abce' })));
30530
+ return (hAsync(KolTreeWcTag, { key: 'a9de70659b4ae51eb7e54067eff48641f22a51fc', _label: this._label }, hAsync("slot", { key: 'd6ee7409c81f3eee881f345d450675fe643eb64e' })));
30513
30531
  }
30514
30532
  static get style() { return {
30515
30533
  default: defaultStyleCss$2
@@ -30552,7 +30570,7 @@ class KolTreeItem {
30552
30570
  return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
30553
30571
  }
30554
30572
  render() {
30555
- return (hAsync(KolTreeItemWcTag, { key: '7bb3a408013bea8c9d87e7911df20651f5230f10', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'f7e7f98c562a887973733fd19268d7c8efdda8d8' })));
30573
+ return (hAsync(KolTreeItemWcTag, { key: '9174279e45ff6fead03a13219be9ef093b49033f', _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '1dec39096e86142021d6227ec15f043550967d58' })));
30556
30574
  }
30557
30575
  static get style() { return {
30558
30576
  default: defaultStyleCss$1
@@ -30590,12 +30608,12 @@ class KolTreeItemWc {
30590
30608
  }
30591
30609
  render() {
30592
30610
  const { _href, _active, _hasChildren, _open, _label } = this.state;
30593
- return (hAsync(Host, { key: 'e8cebee52ed0f115c3aa30e82e2e3ccf5d09e626', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: 'c4b1d56ae69f55ca57ad8d863df02fe0d7ff4f00', class: "kol-tree-item", style: {
30611
+ return (hAsync(Host, { key: '59dba82967b79373a9b3eb040bb1fafed522060b', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("li", { key: '214ebbe9b6850f2fde0f9e83bd0019feb6a62714', class: "kol-tree-item", style: {
30594
30612
  '--level': `${this.level}`,
30595
- } }, hAsync(KolLinkWcTag, { key: '8e87e00dae2d0e6dcad5602e28b5642bc31702f5', class: clsx('kol-tree-item__link', {
30613
+ } }, hAsync(KolLinkWcTag, { key: '25c19762e151a6628e6604ae656db511cf3bd2ef', class: clsx('kol-tree-item__link', {
30596
30614
  'kol-tree-item__link--first-level': this.level === 0,
30597
30615
  'kol-tree-item__link--active': _active,
30598
- }), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '2375f5ff6abe59419b5d4ef28e5e0f104034fef3', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "kol-tree-item__toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "kol-tree-item__toggle-button-placeholder" })), hAsync("span", { key: '39c07661723143bfafcc6ee8e96e51bd88daa940', class: "kol-tree-item__text" }, _label))), hAsync("ul", { key: '2bd2e3a880b4d1946f00e46784f476e69508441b', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '472cc53e288b84a99a0190a82be67e04ce851f99' })))));
30616
+ }), _href: _href, _label: "", _role: "treeitem", _tabIndex: _active ? 0 : -1, _ariaExpanded: _hasChildren ? _open : undefined, _ariaOwns: _hasChildren ? this.groupId : undefined, ref: (element) => (this.linkElement = element) }, hAsync("span", { key: '1d511401118ac91f1d23dab02a0ac21109a7cbe8', class: "kol-tree-item__link-inner", slot: "expert" }, _hasChildren ? (hAsync("span", { class: "kol-tree-item__toggle-button", onClick: (event) => (_open ? void this.handleCollapseClick(event) : void this.handleExpandClick(event)) }, hAsync(KolIconTag, { class: "kol-tree-item__toggle-button-icon", _icons: `codicon codicon-${_open ? 'chevron-down' : 'chevron-right'}`, _label: '' }))) : (hAsync("span", { class: "kol-tree-item__toggle-button-placeholder" })), hAsync("span", { key: '0b58755f14c8fff333a07c35c19b82d738512919', class: "kol-tree-item__text" }, _label))), hAsync("ul", { key: '3477fcc73f76e6b5efa35cd17cea964977980245', class: "kol-tree-item__children", hidden: !_hasChildren || !_open, role: "group", id: this.groupId }, hAsync("slot", { key: '5c0e9ca02ee1b65e277d7e9e926d92466e6322a8' })))));
30599
30617
  }
30600
30618
  validateActive(value) {
30601
30619
  validateActive(this, value || false);
@@ -30699,7 +30717,7 @@ class KolTreeWc {
30699
30717
  validateLabel(this, value);
30700
30718
  }
30701
30719
  render() {
30702
- return (hAsync(Host, { key: '774db0e9ae59f0de739b7df7777f74fa8e07be03', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: 'a7f95daedbd9e25f5b1ee82a16aa495c8ac1b7c1', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: '9a3686682fd2a7e625dba024eb0ace8caff1aee7', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'a6f63218223e1daf2f96fd2dbcf49e87742a419d' })))));
30720
+ return (hAsync(Host, { key: '6e1fc1f0d6757fec0658d28ff54fe73a58b60fa9', onSlotchange: this.handleSlotchange.bind(this) }, hAsync("nav", { key: 'dfc733503c12e36fc8e6fc958273555f4e698237', class: "kol-tree", "aria-label": this.state._label }, hAsync("ul", { key: '9c68ce61a9bfbe5ade976515eaa43e2d9fbf380d', class: "kol-tree__treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: 'db660a5bc5cb5544f2c35e9e14f2a61d6e06ac69' })))));
30703
30721
  }
30704
30722
  static isTreeItem(element) {
30705
30723
  return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
@@ -30896,7 +30914,7 @@ class KolVersion {
30896
30914
  };
30897
30915
  }
30898
30916
  render() {
30899
- return (hAsync(Host, { key: 'c2c4090511476f2b782e5ec11eeefb14e84aeef8', class: "kol-version" }, hAsync(KolBadgeTag, { key: '62fe8f491cdb15496311577d6ed55ddb6731323e', _color: "#bec5c9", _icons: {
30917
+ return (hAsync(Host, { key: '8bb2e7607ac89318676c76d90466e13d445d492a', class: "kol-version" }, hAsync(KolBadgeTag, { key: '033d28fec624afa5976153c7fe58359dd52dea2b', _color: "#bec5c9", _icons: {
30900
30918
  left: { icon: 'codicon codicon-versions', label: this.translateVersion },
30901
30919
  }, _label: this.state._label })));
30902
30920
  }