@public-ui/hydrate 1.7.0-rc.13 → 1.7.0-rc.14

package/dist/index.js

@@ -7715,6 +7715,7 @@ const handleSlotContent = (hostRef, slotRef, slotName) => {
     }
   }
 };
+const showExpertSlot = (label) => label === '';
 
 const getWindow$1 = () => (typeof window === 'undefined' ? null : window);
 const getDocument = () => (typeof getWindow$1().document === 'undefined' ? null : getWindow$1().document);
@@ -7809,7 +7810,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 1.7.0-rc.13
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 1.7.0-rc.14
 		`, {
       forceLog: true,
     });
@@ -10059,13 +10060,7 @@ const LABEL_VALUES = new Set(['string']);
 const validateLabel = (component, value, options = {}) => {
   watchValidator(component, '_label', (value) => typeof value === 'string', LABEL_VALUES, value, getValidationOptions(options));
 };
-const LABEL_WITH_EXPERT_SLOT_VALUES = new Set(['string', 'false']);
-const validateLabelWithExpertSlot = (component, value, options = {}) => {
-  if (value === '' || value === 'false') {
-    value = false;
-  }
-  watchValidator(component, '_label', (value) => value === false || typeof value === 'string', LABEL_WITH_EXPERT_SLOT_VALUES, value, getValidationOptions(options));
-};
+const validateLabelWithExpertSlot = validateLabel;
 
 const AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES = new Set(['"left", "right"']);
 const AVAILABLE_VERTICAL_ALIGNMENT_VALUES = new Set(['"bottom", "top"']);
@@ -10075,7 +10070,7 @@ const validateAlignment = (component, propName, value) => {
 };
 
 const validateTooltipAlign = (component, value) => {
-  validateAlignment(component, '_align', value);
+  validateAlignment(component, '_tooltipAlign', value);
 };
 
 const defaultStyleCss$J = "/*!@:host*/.sc-kol-abbr-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-abbr-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-abbr-default,button.sc-kol-abbr-default:not([role='link']),kol-input.sc-kol-abbr-default .input.sc-kol-abbr-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-abbr-default,button.sc-kol-abbr-default,h1.sc-kol-abbr-default,h2.sc-kol-abbr-default,h3.sc-kol-abbr-default,h4.sc-kol-abbr-default,h5.sc-kol-abbr-default,h6.sc-kol-abbr-default,input.sc-kol-abbr-default,option.sc-kol-abbr-default,select.sc-kol-abbr-default,textarea.sc-kol-abbr-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-abbr-default:is(a,button).sc-kol-abbr-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-abbr-default-h{max-width:100%}/*!@**/*.sc-kol-abbr-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-abbr-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-abbr-default>span.sc-kol-abbr-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-abbr-default,button.sc-kol-abbr-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-abbr-default,input.sc-kol-abbr-default,option.sc-kol-abbr-default,select.sc-kol-abbr-default,textarea.sc-kol-abbr-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-abbr-default>kol-span-wc.sc-kol-abbr-default>span.sc-kol-abbr-default>span.sc-kol-abbr-default{display:none}/*!@:host > abbr*/.sc-kol-abbr-default-h>abbr.sc-kol-abbr-default{cursor:help}";
@@ -11212,11 +11207,6 @@ class KolBadge {
   }; }
 }
 
-const watchNavLinks = (className, component, value) => {
-  watchJsonArrayString(component, '_links', (link) => typeof link === 'object' && (typeof link._href === 'string' || typeof link._label === 'string'), value);
-  uiUxHintMillerscheZahl(className, component.state._links.length);
-};
-
 const UNIQUE_LABELS = new Set();
 function addNavLabel(ariaLabel) {
   if (UNIQUE_LABELS.has(ariaLabel)) {
@@ -11230,6 +11220,11 @@ function removeNavLabel(ariaLabel) {
   UNIQUE_LABELS.delete(ariaLabel);
 }
 
+const watchNavLinks = (className, component, value) => {
+  watchJsonArrayString(component, '_links', (link) => typeof link === 'object' && (typeof link._href === 'string' || typeof link._label === 'string'), value);
+  uiUxHintMillerscheZahl(className, component.state._links.length);
+};
+
 const defaultStyleCss$E = "/*!@:host*/.sc-kol-breadcrumb-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-breadcrumb-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-breadcrumb-default,button.sc-kol-breadcrumb-default:not([role='link']),kol-input.sc-kol-breadcrumb-default .input.sc-kol-breadcrumb-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-breadcrumb-default,button.sc-kol-breadcrumb-default,h1.sc-kol-breadcrumb-default,h2.sc-kol-breadcrumb-default,h3.sc-kol-breadcrumb-default,h4.sc-kol-breadcrumb-default,h5.sc-kol-breadcrumb-default,h6.sc-kol-breadcrumb-default,input.sc-kol-breadcrumb-default,option.sc-kol-breadcrumb-default,select.sc-kol-breadcrumb-default,textarea.sc-kol-breadcrumb-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-breadcrumb-default:is(a,button).sc-kol-breadcrumb-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-breadcrumb-default-h{max-width:100%}/*!@**/*.sc-kol-breadcrumb-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-breadcrumb-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-breadcrumb-default>span.sc-kol-breadcrumb-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-breadcrumb-default,button.sc-kol-breadcrumb-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-breadcrumb-default,input.sc-kol-breadcrumb-default,option.sc-kol-breadcrumb-default,select.sc-kol-breadcrumb-default,textarea.sc-kol-breadcrumb-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-breadcrumb-default>kol-span-wc.sc-kol-breadcrumb-default>span.sc-kol-breadcrumb-default>span.sc-kol-breadcrumb-default{display:none}/*!@li,\nul*/li.sc-kol-breadcrumb-default,ul.sc-kol-breadcrumb-default{margin:0;padding:0;list-style:none;display:flex;gap:0.5em;flex-wrap:wrap;place-items:center}/*!@kol-icon::part(separator)*/kol-icon.sc-kol-breadcrumb-default::part(separator){font-weight:900;font-size:0.7em}/*!@kol-icon::part(separator):before*/kol-icon.sc-kol-breadcrumb-default::part(separator):before{content:'\\f054';font-family:'Font Awesome 6 Free'}";
 
 class KolBreadcrumb {
@@ -11356,7 +11351,7 @@ class KolButton {
       "_iconAlign": [1, "_icon-align"],
       "_iconOnly": [4, "_icon-only"],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_name": [1],
       "_on": [16],
       "_role": [1],
@@ -11467,7 +11462,7 @@ class KolButtonLink {
       "_icon": [1],
       "_iconOnly": [4, "_icon-only"],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_name": [1],
       "_on": [16],
       "_role": [1],
@@ -11520,6 +11515,10 @@ class KolButtonLinkTextSwitch {
   }; }
 }
 
+const validateAlternativeButtonLinkRole = (component, value) => {
+  watchString(component, '_role', value);
+};
+
 const validateAriaControls = (component, value) => {
   watchString(component, '_ariaControls', value);
 };
@@ -11538,6 +11537,26 @@ const validateAriaExpanded = (component, value) => {
   watchBoolean(component, '_ariaExpanded', value);
 };
 
+const validateButtonCallbacks = (component, value) => {
+  watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']), value);
+};
+
+const validateButtonType = (component, value) => {
+  watchValidator(component, `_type`, (value) => value === 'button' || value === 'reset' || value === 'submit', new Set(['KoliBriButtonType {button, reset, submit}']), value);
+};
+
+const validateButtonVariant = (component, value) => {
+  watchValidator(component, `_variant`, (value) => value === 'primary' || value === 'secondary' || value === 'normal' || value === 'danger' || value === 'ghost' || value === 'custom', new Set(['KoliBriButtonVariant {primary, secondary, normal, danger, ghost, custom}']), value, {
+    defaultValue: 'normal',
+  });
+};
+
+const validateCustomClass = (component, value) => {
+  watchString(component, '_customClass', value, {
+    defaultValue: undefined,
+  });
+};
+
 const validateDisabled = (component, value) => {
   watchBoolean(component, '_disabled', value);
 };
@@ -11886,39 +11905,15 @@ class AssociatedInputController {
   }
 }
 
-const validateCustomClass = (component, value) => {
-  watchString(component, '_customClass', value, {
-    defaultValue: undefined,
-  });
-};
-
-const validateButtonCallbacks = (component, value) => {
-  watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']), value);
-};
-
-const validateAlternativeButtonLinkRole = (component, value) => {
-  watchString(component, '_role', value);
-};
-
-const validateButtonType = (component, value) => {
-  watchValidator(component, `_type`, (value) => value === 'button' || value === 'reset' || value === 'submit', new Set(['KoliBriButtonType {button, reset, submit}']), value);
-};
-
-const validateButtonVariant = (component, value) => {
-  watchValidator(component, `_variant`, (value) => value === 'primary' || value === 'secondary' || value === 'normal' || value === 'danger' || value === 'ghost' || value === 'custom', new Set(['KoliBriButtonVariant {primary, secondary, normal, danger, ghost, custom}']), value, {
-    defaultValue: 'normal',
-  });
-};
-
 class KolButtonWc {
   render() {
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, null, hAsync("button", Object.assign({ ref: this.catchRef, accessKey: this.state._accessKey, "aria-controls": this.state._ariaControls, "aria-current": mapStringOrBoolean2String(this.state._ariaCurrent), "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: {
         [this.state._variant]: this.state._variant !== 'custom',
         [this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
         'icon-only': this.state._hideLabel === true,
         'hide-label': this.state._hideLabel === true,
-      }, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync("kol-span-wc", { _icon: this.state._icon, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? false : this.state._label }, hAsync("slot", { name: "expert", slot: "expert" }))), hAsync("kol-tooltip-wc", { "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
+      }, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync("kol-span-wc", { _icon: this.state._icon, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { name: "expert", slot: "expert" }))), hAsync("kol-tooltip-wc", { "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -11975,7 +11970,7 @@ class KolButtonWc {
     this._variant = 'normal';
     this.state = {
       _icon: {},
-      _label: false,
+      _label: '',
       _on: {},
       _type: 'button',
       _variant: 'normal',
@@ -12121,7 +12116,7 @@ class KolButtonWc {
       "_iconAlign": [1, "_icon-align"],
       "_iconOnly": [4, "_icon-only"],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_name": [1],
       "_on": [16],
       "_role": [1],
@@ -12471,7 +12466,7 @@ class KolHeading {
     "$flags$": 41,
     "$tagName$": "kol-heading",
     "$members$": {
-      "_label": [8],
+      "_label": [1],
       "_level": [2],
       "_secondaryHeadline": [1, "_secondary-headline"]
     },
@@ -12524,7 +12519,7 @@ class KolHeadingWc {
     this._level = 1;
     this._secondaryHeadline = undefined;
     this.state = {
-      _label: false,
+      _label: '',
       _level: 1,
     };
   }
@@ -12554,7 +12549,7 @@ class KolHeadingWc {
     "$flags$": 4,
     "$tagName$": "kol-heading-wc",
     "$members$": {
-      "_label": [8],
+      "_label": [1],
       "_level": [2],
       "_secondaryHeadline": [1, "_secondary-headline"],
       "state": [32]
@@ -12795,6 +12790,7 @@ class KolInput {
     this._hint = '';
     this._icon = undefined;
     this._id = undefined;
+    this._label = undefined;
     this._maxLength = undefined;
     this._readOnly = false;
     this._renderNoLabel = false;
@@ -12802,6 +12798,7 @@ class KolInput {
     this._slotName = undefined;
     this._suggestions = undefined;
     this._smartButton = undefined;
+    this._tooltipAlign = 'top';
     this._touched = false;
   }
   componentWillRender() {
@@ -12810,7 +12807,9 @@ class KolInput {
   render() {
     var _a, _b, _c, _d;
     const hasError = typeof this._error === 'string' && this._error.length > 0 && this._touched === true;
+    const hasExpertSlot = showExpertSlot(this._label);
     const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
+    const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
     return (hAsync(Host, { class: {
         disabled: this._disabled === true,
         error: hasError === true,
@@ -12818,11 +12817,11 @@ class KolInput {
         required: this._required === true,
         touched: this._touched === true,
         'hidden-error': this._hideError === true,
-      } }, this._renderNoLabel === false && (hAsync("label", { id: `${this._id}-label`, hidden: this._hideLabel, htmlFor: this._id }, hAsync("span", null, hAsync("slot", { name: "label" })))), hasHint && (hAsync("span", { class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { class: {
+      } }, hAsync("label", { id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", null, hAsync("slot", { name: "label" }))), hasHint && (hAsync("span", { class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { class: {
         input: true,
         'icon-left': typeof ((_a = this._icon) === null || _a === void 0 ? void 0 : _a.left) === 'object',
         'icon-right': typeof ((_b = this._icon) === null || _b === void 0 ? void 0 : _b.right) === 'object',
-      } }, ((_c = this._icon) === null || _c === void 0 ? void 0 : _c.left) && hAsync("kol-icon", { _ariaLabel: "", _icon: this._icon.left.icon }), hAsync("div", { ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync("kol-button-wc", { _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icon: this._smartButton._icon, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_d = this._icon) === null || _d === void 0 ? void 0 : _d.right) && hAsync("kol-icon", { _ariaLabel: "", _icon: this._icon.right.icon })), hasError && (hAsync("kol-alert", { _alert: this._alert, _type: "error", _variant: "msg", "aria-hidden": this._hideError, class: `error${this._hideError ? ' hidden' : ''}`, id: `${this._id}-error` }, this._error)), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", null, translate('kol-characters'))))));
+      } }, ((_c = this._icon) === null || _c === void 0 ? void 0 : _c.left) && hAsync("kol-icon", { _ariaLabel: "", _icon: this._icon.left.icon }), hAsync("div", { ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync("kol-button-wc", { _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icon: this._smartButton._icon, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_d = this._icon) === null || _d === void 0 ? void 0 : _d.right) && hAsync("kol-icon", { _ariaLabel: "", _icon: this._icon.right.icon })), useTooltopInsteadOfLabel && (hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), hasError && (hAsync("kol-alert", { _alert: this._alert, _type: "error", _variant: "msg", "aria-hidden": this._hideError, class: `error${this._hideError ? ' hidden' : ''}`, id: `${this._id}-error` }, this._error)), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", null, translate('kol-characters'))))));
   }
   get host() { return getElement(this); }
   static get cmpMeta() { return {
@@ -12839,6 +12838,7 @@ class KolInput {
       "_hint": [1],
       "_icon": [16],
       "_id": [1],
+      "_label": [1],
       "_maxLength": [2, "_max-length"],
       "_readOnly": [4, "_read-only"],
       "_renderNoLabel": [4, "_render-no-label"],
@@ -12846,6 +12846,7 @@ class KolInput {
       "_slotName": [1, "_slot-name"],
       "_suggestions": [1],
       "_smartButton": [1, "_smart-button"],
+      "_tooltipAlign": [1, "_tooltip-align"],
       "_touched": [4]
     },
     "$listeners$": undefined,
@@ -12891,6 +12892,10 @@ const validateChecked = (component, value) => {
   watchBoolean(component, '_checked', value);
 };
 
+const validateHideError = (component, value, options) => {
+  watchBoolean(component, '_hideError', value, options);
+};
+
 const validateIndeterminate = (component, value) => {
   watchBoolean(component, '_indeterminate', value);
 };
@@ -13093,10 +13098,6 @@ class InputController extends ControlledInputController {
   }
 }
 
-const validateHideError = (component, value, options) => {
-  watchBoolean(component, '_hideError', value, options);
-};
-
 const fillKeyOptionMap = (keyOptionMap, options, preKey = '') => {
   options.forEach((option, index) => {
     const key = `${preKey}-${index}`;
@@ -13262,18 +13263,18 @@ class InputCheckboxController extends InputCheckboxRadioController {
   }
 }
 
-const defaultStyleCss$u = "/*!@:host*/.sc-kol-input-checkbox-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-checkbox-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-checkbox-default,button.sc-kol-input-checkbox-default:not([role='link']),kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-checkbox-default,button.sc-kol-input-checkbox-default,h1.sc-kol-input-checkbox-default,h2.sc-kol-input-checkbox-default,h3.sc-kol-input-checkbox-default,h4.sc-kol-input-checkbox-default,h5.sc-kol-input-checkbox-default,h6.sc-kol-input-checkbox-default,input.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-checkbox-default:is(a,button).sc-kol-input-checkbox-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-checkbox-default-h{max-width:100%}/*!@**/*.sc-kol-input-checkbox-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-checkbox-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-checkbox-default,button.sc-kol-input-checkbox-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-checkbox-default,input.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-checkbox-default>kol-span-wc.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-checkbox-default label.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default::after,.required.sc-kol-input-checkbox-default legend.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default::after{content:'*'}/*!@:host*/.sc-kol-input-checkbox-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-checkbox-default,input[type='color'].sc-kol-input-checkbox-default,input[type='file'].sc-kol-input-checkbox-default,input[type='radio'].sc-kol-input-checkbox-default,input[type='range'].sc-kol-input-checkbox-default,label.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-checkbox-default,input[type='date'].sc-kol-input-checkbox-default,input[type='datetime-local'].sc-kol-input-checkbox-default,input[type='email'].sc-kol-input-checkbox-default,input[type='file'].sc-kol-input-checkbox-default,input[type='month'].sc-kol-input-checkbox-default,input[type='number'].sc-kol-input-checkbox-default,input[type='password'].sc-kol-input-checkbox-default,input[type='search'].sc-kol-input-checkbox-default,input[type='tel'].sc-kol-input-checkbox-default,input[type='text'].sc-kol-input-checkbox-default,input[type='time'].sc-kol-input-checkbox-default,input[type='url'].sc-kol-input-checkbox-default,input[type='week'].sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,select[multiple].sc-kol-input-checkbox-default option.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-checkbox-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-checkbox-default option.sc-kol-input-checkbox-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-checkbox-default .sc-kol-input-checkbox-default:is(button,input.sc-kol-input-checkbox-default,label.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,textarea).sc-kol-input-checkbox-default{cursor:not-allowed;opacity:0.5}/*!@label*/label.sc-kol-input-checkbox-default{cursor:pointer}/*!@kol-input*/kol-input.sc-kol-input-checkbox-default{align-items:center;display:grid;justify-items:left}/*!@kol-input.default,\nkol-input.switch*/kol-input.default.sc-kol-input-checkbox-default,kol-input.switch.sc-kol-input-checkbox-default{grid-template-columns:auto 1fr}/*!@kol-input .input*/kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default{align-items:center;display:grid;order:1}/*!@kol-input .input div*/kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default div.sc-kol-input-checkbox-default{display:inline-flex}/*!@kol-input .input input*/kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default input.sc-kol-input-checkbox-default{margin:0}/*!@kol-input label*/kol-input.sc-kol-input-checkbox-default label.sc-kol-input-checkbox-default{order:2}/*!@kol-input .hint,\nkol-input.error > kol-alert*/kol-input.sc-kol-input-checkbox-default .hint.sc-kol-input-checkbox-default,kol-input.error.sc-kol-input-checkbox-default>kol-alert.sc-kol-input-checkbox-default{grid-column:span 2}/*!@kol-input kol-alert.error*/kol-input.sc-kol-input-checkbox-default kol-alert.error.sc-kol-input-checkbox-default{order:3}/*!@kol-input .hint*/kol-input.sc-kol-input-checkbox-default .hint.sc-kol-input-checkbox-default{order:4}/*!@.error.hidden*/.error.hidden.sc-kol-input-checkbox-default{display:none}/*!@input*/input.sc-kol-input-checkbox-default{border-style:solid;border-width:2px;line-height:24px}/*!@input[type='checkbox']*/input[type='checkbox'].sc-kol-input-checkbox-default{appearance:none;background-color:#fff;cursor:pointer;transition:0.5s}/*!@input[type='checkbox'].kol-disabled:before*/input[type='checkbox'].kol-disabled.sc-kol-input-checkbox-default:before{cursor:not-allowed}/*!@input[type='checkbox']:before*/input[type='checkbox'].sc-kol-input-checkbox-default:before{content:'';cursor:pointer}/*!@.default kol-icon*/.default.sc-kol-input-checkbox-default kol-icon.sc-kol-input-checkbox-default{display:none}/*!@kol-input.required .tooltip-content .span-label::after*/kol-input.required.sc-kol-input-checkbox-default .tooltip-content.sc-kol-input-checkbox-default .span-label.sc-kol-input-checkbox-default::after{content:'*'}/*!@.button*/.button.sc-kol-input-checkbox-default{cursor:pointer;display:inline-flex;width:auto}/*!@.button input*/.button.sc-kol-input-checkbox-default input.sc-kol-input-checkbox-default{display:none}/*!@.default input[type='checkbox']*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default{height:1.5em;width:1.5em}/*!@.default input[type='checkbox']:before*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:before{display:block;height:1.5em;position:relative;width:1.5em}/*!@.default input[type='checkbox']:checked:before*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:checked:before{border-radius:1px;border-style:solid;border-width:0 3px 3px 0;height:0.75em;left:calc(0.375em - 2px);transform:rotate(40deg) translate(-50%, -50%);top:calc(0.7125em - 2px);width:0.375em}/*!@.default input[type='checkbox']:indeterminate:before*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:indeterminate:before{background-color:#000;height:0.2em;left:0.24em;top:0.575em;width:0.8em}/*!@.switch .input*/.switch.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default{position:relative}/*!@.switch input[type='checkbox']*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default{display:inline-block;height:1.7em;min-width:3.2em;position:relative;width:3.2em}/*!@.switch input[type='checkbox']::before*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default::before{background-color:#000;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);position:absolute;transition:0.5s;width:1.2em}/*!@.switch input[type='checkbox']:checked::before*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:checked::before{transform:translateX(1.5em)}/*!@.switch input[type='checkbox']:indeterminate::before*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:indeterminate::before{transform:translateX(0.75em)}/*!@.switch .icon*/.switch.sc-kol-input-checkbox-default .icon.sc-kol-input-checkbox-default{cursor:pointer;display:flex;align-items:center;justify-content:center;width:1.2em;height:1.2em;position:absolute;z-index:1;top:50%;transition:0.5s;color:#000;left:0;transform:translate(0.15em, -48%)}/*!@.switch:has(input:checked) .icon*/.switch.sc-kol-input-checkbox-default:has(input:checked) .icon.sc-kol-input-checkbox-default{transform:translate(2.15em, -48%)}/*!@.switch:has(input:indeterminate) .icon*/.switch.sc-kol-input-checkbox-default:has(input:indeterminate) .icon.sc-kol-input-checkbox-default{transform:translate(1.15em, -48%)}";
+const defaultStyleCss$u = "/*!@:host*/.sc-kol-input-checkbox-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-input-checkbox-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-input-checkbox-default,button.sc-kol-input-checkbox-default:not([role='link']),kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-input-checkbox-default,button.sc-kol-input-checkbox-default,h1.sc-kol-input-checkbox-default,h2.sc-kol-input-checkbox-default,h3.sc-kol-input-checkbox-default,h4.sc-kol-input-checkbox-default,h5.sc-kol-input-checkbox-default,h6.sc-kol-input-checkbox-default,input.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-input-checkbox-default:is(a,button).sc-kol-input-checkbox-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-input-checkbox-default-h{max-width:100%}/*!@**/*.sc-kol-input-checkbox-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-input-checkbox-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-input-checkbox-default,button.sc-kol-input-checkbox-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-input-checkbox-default,input.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-input-checkbox-default>kol-span-wc.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default{display:none}/*!@.required label > span::after,\n.required legend > span::after*/.required.sc-kol-input-checkbox-default label.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default::after,.required.sc-kol-input-checkbox-default legend.sc-kol-input-checkbox-default>span.sc-kol-input-checkbox-default::after{content:'*'}/*!@:host*/.sc-kol-input-checkbox-default-h{display:block}/*!@input,\ntextarea*/input.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{cursor:text}/*!@input[type='checkbox'],\ninput[type='color'],\ninput[type='file'],\ninput[type='radio'],\ninput[type='range'],\nlabel,\noption,\nselect*/input[type='checkbox'].sc-kol-input-checkbox-default,input[type='color'].sc-kol-input-checkbox-default,input[type='file'].sc-kol-input-checkbox-default,input[type='radio'].sc-kol-input-checkbox-default,input[type='range'].sc-kol-input-checkbox-default,label.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default{cursor:pointer}/*!@input[type='color'],\ninput[type='date'],\ninput[type='datetime-local'],\ninput[type='email'],\ninput[type='file'],\ninput[type='month'],\ninput[type='number'],\ninput[type='password'],\ninput[type='search'],\ninput[type='tel'],\ninput[type='text'],\ninput[type='time'],\ninput[type='url'],\ninput[type='week'],\nselect,\nselect[multiple] option,\ntextarea*/input[type='color'].sc-kol-input-checkbox-default,input[type='date'].sc-kol-input-checkbox-default,input[type='datetime-local'].sc-kol-input-checkbox-default,input[type='email'].sc-kol-input-checkbox-default,input[type='file'].sc-kol-input-checkbox-default,input[type='month'].sc-kol-input-checkbox-default,input[type='number'].sc-kol-input-checkbox-default,input[type='password'].sc-kol-input-checkbox-default,input[type='search'].sc-kol-input-checkbox-default,input[type='tel'].sc-kol-input-checkbox-default,input[type='text'].sc-kol-input-checkbox-default,input[type='time'].sc-kol-input-checkbox-default,input[type='url'].sc-kol-input-checkbox-default,input[type='week'].sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,select[multiple].sc-kol-input-checkbox-default option.sc-kol-input-checkbox-default,textarea.sc-kol-input-checkbox-default{font-size:1rem;width:100%}/*!@input[type='file']*/input[type='file'].sc-kol-input-checkbox-default{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}/*!@select[multiple] option*/select[multiple].sc-kol-input-checkbox-default option.sc-kol-input-checkbox-default{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}/*!@kol-input.disabled :is(button, input, label, option, select, textarea)*/kol-input.disabled.sc-kol-input-checkbox-default .sc-kol-input-checkbox-default:is(button,input.sc-kol-input-checkbox-default,label.sc-kol-input-checkbox-default,option.sc-kol-input-checkbox-default,select.sc-kol-input-checkbox-default,textarea).sc-kol-input-checkbox-default{cursor:not-allowed;opacity:0.5}/*!@label*/label.sc-kol-input-checkbox-default{cursor:pointer}/*!@kol-input*/kol-input.sc-kol-input-checkbox-default{align-items:center;display:grid;justify-items:left}/*!@kol-input.default,\nkol-input.switch*/kol-input.default.sc-kol-input-checkbox-default,kol-input.switch.sc-kol-input-checkbox-default{grid-template-columns:auto 1fr}/*!@kol-input .input*/kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default{align-items:center;display:grid;order:1}/*!@kol-input .input div*/kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default div.sc-kol-input-checkbox-default{display:inline-flex}/*!@kol-input .input input*/kol-input.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default input.sc-kol-input-checkbox-default{margin:0}/*!@kol-input label*/kol-input.sc-kol-input-checkbox-default label.sc-kol-input-checkbox-default{order:2}/*!@kol-input .hint,\nkol-input.error > kol-alert*/kol-input.sc-kol-input-checkbox-default .hint.sc-kol-input-checkbox-default,kol-input.error.sc-kol-input-checkbox-default>kol-alert.sc-kol-input-checkbox-default{grid-column:span 2}/*!@kol-input kol-alert.error*/kol-input.sc-kol-input-checkbox-default kol-alert.error.sc-kol-input-checkbox-default{order:3}/*!@kol-input .hint*/kol-input.sc-kol-input-checkbox-default .hint.sc-kol-input-checkbox-default{order:4}/*!@.error.hidden*/.error.hidden.sc-kol-input-checkbox-default{display:none}/*!@input*/input.sc-kol-input-checkbox-default{border-style:solid;border-width:2px;line-height:24px}/*!@input[type='checkbox']*/input[type='checkbox'].sc-kol-input-checkbox-default{appearance:none;background-color:#fff;cursor:pointer;transition:0.5s}/*!@input[type='checkbox'].kol-disabled:before*/input[type='checkbox'].kol-disabled.sc-kol-input-checkbox-default:before{cursor:not-allowed}/*!@input[type='checkbox']:before*/input[type='checkbox'].sc-kol-input-checkbox-default:before{content:'';cursor:pointer}/*!@.default kol-icon*/.default.sc-kol-input-checkbox-default kol-icon.sc-kol-input-checkbox-default{display:none}/*!@kol-input.required .tooltip-content .span-label::after*/kol-input.required.sc-kol-input-checkbox-default .tooltip-content.sc-kol-input-checkbox-default .span-label.sc-kol-input-checkbox-default::after{content:'*'}/*!@.button*/.button.sc-kol-input-checkbox-default{display:grid;grid-template-columns:var(--a11y-min-size) auto;grid-template-areas:'error error' 'input label' 'hint hint'}/*!@.button[tabindex]:focus*/.button[tabindex].sc-kol-input-checkbox-default:focus{cursor:inherit}/*!@.button input*/.button.sc-kol-input-checkbox-default input.sc-kol-input-checkbox-default{display:none}/*!@.button > .error*/.button.sc-kol-input-checkbox-default>.error.sc-kol-input-checkbox-default{grid-area:error}/*!@.button > label*/.button.sc-kol-input-checkbox-default>label.sc-kol-input-checkbox-default{grid-area:label}/*!@.button > .input*/.button.sc-kol-input-checkbox-default>.input.sc-kol-input-checkbox-default{grid-area:input}/*!@.button > .hint*/.button.sc-kol-input-checkbox-default>.hint.sc-kol-input-checkbox-default{grid-area:hint}/*!@.button .icon*/.button.sc-kol-input-checkbox-default .icon.sc-kol-input-checkbox-default{display:flex;align-items:center;justify-content:center;width:var(--a11y-min-size);height:var(--a11y-min-size)}/*!@.default input[type='checkbox']*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default{height:1.5em;width:1.5em}/*!@.default input[type='checkbox']:before*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:before{display:block;height:1.5em;position:relative;width:1.5em}/*!@.default input[type='checkbox']:checked:before*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:checked:before{border-radius:1px;border-style:solid;border-width:0 3px 3px 0;height:0.75em;left:calc(0.375em - 2px);transform:rotate(40deg) translate(-50%, -50%);top:calc(0.7125em - 2px);width:0.375em}/*!@.default input[type='checkbox']:indeterminate:before*/.default.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:indeterminate:before{background-color:#000;height:0.2em;left:0.24em;top:0.575em;width:0.8em}/*!@.switch .input*/.switch.sc-kol-input-checkbox-default .input.sc-kol-input-checkbox-default{position:relative}/*!@.switch input[type='checkbox']*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default{display:inline-block;height:1.7em;min-width:3.2em;position:relative;width:3.2em}/*!@.switch input[type='checkbox']::before*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default::before{background-color:#000;height:1.2em;left:calc(0.25em - 2px);top:calc(0.25em - 2px);position:absolute;transition:0.5s;width:1.2em}/*!@.switch input[type='checkbox']:checked::before*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:checked::before{transform:translateX(1.5em)}/*!@.switch input[type='checkbox']:indeterminate::before*/.switch.sc-kol-input-checkbox-default input[type='checkbox'].sc-kol-input-checkbox-default:indeterminate::before{transform:translateX(0.75em)}/*!@.switch .icon*/.switch.sc-kol-input-checkbox-default .icon.sc-kol-input-checkbox-default{cursor:pointer;display:flex;align-items:center;justify-content:center;width:1.2em;height:1.2em;position:absolute;z-index:1;top:50%;left:4px;transform:translate(0, -50%);transition:0.5s;color:#000}/*!@.switch:has(input:checked) .icon*/.switch.sc-kol-input-checkbox-default:has(input:checked) .icon.sc-kol-input-checkbox-default{transform:translate(1.5em, -50%)}/*!@.switch:has(input:indeterminate) .icon*/.switch.sc-kol-input-checkbox-default:has(input:indeterminate) .icon.sc-kol-input-checkbox-default{transform:translate(0.75em, -50%)}";
 
 class KolInputCheckbox {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, null, hAsync("kol-input", { class: {
         checkbox: true,
         [this.state._variant]: true,
         'hide-label': !!this.state._hideLabel,
         checked: this.state._checked,
-      }, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' ? 0 : undefined, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _required: this.state._required, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icon: this.state._indeterminate ? this.state._icon.indeterminate : this.state._checked ? this.state._icon.checked : this.state._icon.unchecked, _label: "" }), hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _align: this._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })))));
+      }, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' ? 0 : undefined, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icon: this.state._indeterminate ? this.state._icon.indeterminate : this.state._checked ? this.state._icon.checked : this.state._icon.unchecked, _label: "" }), hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -13325,7 +13326,7 @@ class KolInputCheckbox {
       },
       _id: `id-${nonce()}`,
       _indeterminate: false,
-      _label: false,
+      _label: '',
       _value: true,
       _variant: 'default',
     };
@@ -13446,7 +13447,7 @@ class KolInputCheckbox {
       "_icon": [1],
       "_id": [1],
       "_indeterminate": [1540],
-      "_label": [8],
+      "_label": [1],
       "_name": [1],
       "_on": [16],
       "_required": [4],
@@ -13559,11 +13560,11 @@ class KolInputColor {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, null, hAsync("kol-input", { class: {
         color: true,
         'hide-label': !!this.state._hideLabel,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _hideError: this.state._hideError, _id: this.state._id, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade)), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _align: this._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })))));
+      }, _disabled: this.state._disabled, _error: this.state._error, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -13596,7 +13597,7 @@ class KolInputColor {
       _autoComplete: 'off',
       _hideError: false,
       _id: `id-${nonce()}`,
-      _label: false,
+      _label: '',
       _suggestions: [],
     };
     this.controller = new InputColorController(this, 'input-color', this.host);
@@ -13706,7 +13707,7 @@ class KolInputColor {
       "_hint": [1],
       "_icon": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_list": [1],
       "_name": [1],
       "_on": [16],
@@ -13883,11 +13884,11 @@ class KolInputDate {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: {
         [this.state._type]: true,
         'hide-label': !!this.state._hideLabel,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _align: this._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })))));
+      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -13938,7 +13939,7 @@ class KolInputDate {
       _hasValue: false,
       _hideError: false,
       _id: `id-${nonce()}`,
-      _label: false,
+      _label: '',
       _suggestions: [],
       _type: 'datetime-local',
     };
@@ -14079,7 +14080,7 @@ class KolInputDate {
       "_hint": [1],
       "_icon": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_list": [1],
       "_max": [1],
       "_min": [1],
@@ -14262,10 +14263,10 @@ class KolInputEmail {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, { class: {
         'has-value': this.state._hasValue,
-      } }, hAsync("kol-input", { class: { email: true, 'hide-label': !!this.state._hideLabel }, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, size: this.state._size, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _align: this._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })))));
+      } }, hAsync("kol-input", { class: { email: true, 'hide-label': !!this.state._hideLabel }, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, size: this.state._size, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -14320,7 +14321,7 @@ class KolInputEmail {
       _hasValue: false,
       _hideError: false,
       _id: `id-${nonce()}`,
-      _label: false,
+      _label: '',
       _suggestions: [],
     };
     this.controller = new InputEmailController(this, 'input-email', this.host);
@@ -14465,7 +14466,7 @@ class KolInputEmail {
       "_hint": [1],
       "_icon": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_list": [1],
       "_maxLength": [2, "_max-length"],
       "_multiple": [4],
@@ -14535,11 +14536,11 @@ const defaultStyleCss$q = "/*!@:host*/.sc-kol-input-file-default-h{--a11y-min-si
 class KolInputFile {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, null, hAsync("kol-input", { class: {
         file: true,
         'hide-label': !!this.state._hideLabel,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _required: this.state._required, _smartButton: this.state._smartButton, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _align: this._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })))));
+      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -14583,7 +14584,7 @@ class KolInputFile {
     this.state = {
       _hideError: false,
       _id: `id-${nonce()}`,
-      _label: false,
+      _label: '',
     };
     this.controller = new InputFileController(this, 'input-file', this.host);
   }
@@ -14692,7 +14693,7 @@ class KolInputFile {
       "_hint": [1],
       "_icon": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_multiple": [4],
       "_name": [1],
       "_on": [16],
@@ -14817,13 +14818,13 @@ class KolInputNumber {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, { class: {
         'has-value': this.state._hasValue,
       } }, hAsync("kol-input", { class: {
         [this.state._type]: true,
         'hide-label': !!this.state._hideLabel,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _align: this._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })))));
+      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -14875,7 +14876,7 @@ class KolInputNumber {
       _hasValue: false,
       _hideError: false,
       _id: `id-${nonce()}`,
-      _label: false,
+      _label: '',
       _suggestions: [],
       _type: 'number',
     };
@@ -15020,7 +15021,7 @@ class KolInputNumber {
       "_hint": [1],
       "_icon": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_list": [1],
       "_max": [8],
       "_min": [8],
@@ -15051,13 +15052,13 @@ const defaultStyleCss$o = "/*!@:host*/.sc-kol-input-password-default-h{--a11y-mi
 class KolInputPassword {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, { class: {
         'has-value': this.state._hasValue,
       } }, hAsync("kol-input", { class: {
         'hide-label': !!this.state._hideLabel,
         password: true,
-      }, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, size: this.state._size, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _align: this._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })))));
+      }, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, size: this.state._size, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -15109,7 +15110,7 @@ class KolInputPassword {
       _hasValue: false,
       _hideError: false,
       _id: `id-${nonce()}`,
-      _label: false,
+      _label: '',
     };
     this.controller = new InputPasswordController(this, 'input-password', this.host);
   }
@@ -15244,7 +15245,7 @@ class KolInputPassword {
       "_hint": [1],
       "_icon": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_maxLength": [2, "_max-length"],
       "_name": [1],
       "_on": [16],
@@ -15272,7 +15273,7 @@ const defaultStyleCss$n = "/*!@:host*/.sc-kol-input-radio-default-h{--a11y-min-s
 class KolInputRadio {
   render() {
     const { ariaDescribedBy, hasError } = getRenderStates(this.state);
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, null, hAsync("fieldset", { class: {
         disabled: this.state._disabled === true,
         error: hasError === true,
@@ -15282,11 +15283,11 @@ class KolInputRadio {
       } }, hAsync("legend", { class: "block w-full mb-1 leading-normal" }, hAsync("span", null, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label))), this.state._options.map((option, index) => {
       const customId = `${this.state._id}-${index}`;
       const slotName = `radio-${index}`;
-      return (hAsync("kol-input", { class: "radio", key: customId, _disabled: this.state._disabled || option.disabled, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: customId, _renderNoLabel: true, _required: this.state._required, _slotName: slotName, _touched: this.state._touched }, hAsync("div", { slot: slotName }, hAsync("input", Object.assign({ ref: this.state._value === option.value ? this.catchRef : undefined, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: "radio", id: customId, checked: this.state._value === option.value, name: this.state._name || this.state._id, disabled: this.state._disabled || option.disabled, required: this.state._required, tabIndex: this.state._tabIndex, value: `-${index}` }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _label: typeof this.state._label === 'string' ? this.state._label : '' }), hAsync("label", { htmlFor: `${customId}`, style: {
-          height: this.state._hideLabel && this.state._required !== true ? '0' : undefined,
-          margin: this.state._hideLabel && this.state._required !== true ? '0' : undefined,
-          padding: this.state._hideLabel && this.state._required !== true ? '0' : undefined,
-          visibility: this.state._hideLabel && this.state._required !== true ? 'hidden' : undefined,
+      return (hAsync("kol-input", { class: "radio", key: customId, _disabled: this.state._disabled || option.disabled, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: customId, _label: option.label, _renderNoLabel: true, _required: this.state._required, _slotName: slotName, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("div", { slot: slotName, class: "radio-input-wrapper" }, hAsync("input", Object.assign({ ref: this.state._value === option.value ? this.catchRef : undefined, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: "radio", id: customId, checked: this.state._value === option.value, name: this.state._name || this.state._id, disabled: this.state._disabled || option.disabled, required: this.state._required, tabIndex: this.state._tabIndex, value: `-${index}` }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined })), hAsync("label", { class: "radio-label", htmlFor: `${customId}`, style: {
+          height: this.state._hideLabel ? '0' : undefined,
+          margin: this.state._hideLabel ? '0' : undefined,
+          padding: this.state._hideLabel ? '0' : undefined,
+          visibility: this.state._hideLabel ? 'hidden' : undefined,
         } }, hAsync("span", null, hAsync("span", null, option.label))))));
     }), hasError && (hAsync("kol-alert", { id: "error", _alert: true, _type: "error", _variant: "msg", "aria-hidden": this._hideError, class: `error${this._hideError ? ' hidden' : ''}` }, this.state._error)))));
   }
@@ -15334,7 +15335,7 @@ class KolInputRadio {
     this.state = {
       _hideError: false,
       _id: `id-${nonce()}`,
-      _label: false,
+      _label: '',
       _options: [],
       _orientation: 'vertical',
     };
@@ -15439,7 +15440,7 @@ class KolInputRadio {
       "_hideLabel": [4, "_hide-label"],
       "_hint": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_list": [1],
       "_name": [1],
       "_on": [16],
@@ -15496,7 +15497,7 @@ Mit der Version 1.1 wird die Komponente KolInputRadioGroup aus der Bibliothek en
       "_hideLabel": [4, "_hide-label"],
       "_hint": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_list": [1],
       "_name": [1],
       "_on": [16],
@@ -15571,13 +15572,13 @@ class KolInputRange {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, null, hAsync("kol-input", { class: {
         range: true,
         'hide-label': !!this.state._hideLabel,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("div", { class: "inputs-wrapper", style: {
+      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("div", { class: "inputs-wrapper", style: {
         '--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
-      } }, hAsync("input", Object.assign({ title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("input", Object.assign({ ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp, onChange: this.onChange })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _align: this._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })), hasSuggestions && [
+      } }, hAsync("input", Object.assign({ title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("input", Object.assign({ ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp, onChange: this.onChange }))), hasSuggestions && [
       hAsync("datalist", { id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
     ]))));
   }
@@ -15643,7 +15644,7 @@ class KolInputRange {
       _autoComplete: 'off',
       _hideError: false,
       _id: `id-${nonce()}`,
-      _label: false,
+      _label: '',
       _suggestions: [],
     };
     this.controller = new InputRangeController(this, 'input-range', this.host);
@@ -15761,7 +15762,7 @@ class KolInputRange {
       "_hint": [1],
       "_icon": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_list": [1],
       "_max": [2],
       "_min": [2],
@@ -15793,13 +15794,13 @@ class KolInputText {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, { class: {
         'has-value': this.state._hasValue,
       } }, hAsync("kol-input", { class: {
         [this.state._type]: true,
         'hide-label': !!this.state._hideLabel,
-      }, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, size: this.state._size, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _align: this._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })))));
+      }, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, size: this.state._size, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -15864,7 +15865,7 @@ class KolInputText {
       _hasValue: false,
       _hideError: false,
       _id: `id-${nonce()}`,
-      _label: false,
+      _label: '',
       _suggestions: [],
       _type: 'text',
     };
@@ -16015,7 +16016,7 @@ class KolInputText {
       "_hint": [1],
       "_icon": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_list": [1],
       "_maxLength": [2, "_max-length"],
       "_name": [1],
@@ -16041,7 +16042,7 @@ class KolInputText {
   }; }
 }
 
-const defaultStyleCss$k = "/*!@:host*/.sc-kol-kolibri-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-kolibri-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-kolibri-default,button.sc-kol-kolibri-default:not([role='link']),kol-input.sc-kol-kolibri-default .input.sc-kol-kolibri-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-kolibri-default,button.sc-kol-kolibri-default,h1.sc-kol-kolibri-default,h2.sc-kol-kolibri-default,h3.sc-kol-kolibri-default,h4.sc-kol-kolibri-default,h5.sc-kol-kolibri-default,h6.sc-kol-kolibri-default,input.sc-kol-kolibri-default,option.sc-kol-kolibri-default,select.sc-kol-kolibri-default,textarea.sc-kol-kolibri-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-kolibri-default:is(a,button).sc-kol-kolibri-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-kolibri-default-h{max-width:100%}/*!@**/*.sc-kol-kolibri-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-kolibri-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-kolibri-default>span.sc-kol-kolibri-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-kolibri-default,button.sc-kol-kolibri-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-kolibri-default,input.sc-kol-kolibri-default,option.sc-kol-kolibri-default,select.sc-kol-kolibri-default,textarea.sc-kol-kolibri-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-kolibri-default>kol-span-wc.sc-kol-kolibri-default>span.sc-kol-kolibri-default>span.sc-kol-kolibri-default{display:none}/*!@text*/text.sc-kol-kolibri-default{font-size:90px;letter-spacing:normal;word-spacing:normal}/*!@svg*/svg.sc-kol-kolibri-default{max-height:100%}";
+const defaultStyleCss$k = "/*!@:host*/.sc-kol-kolibri-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-kolibri-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-kolibri-default,button.sc-kol-kolibri-default:not([role='link']),kol-input.sc-kol-kolibri-default .input.sc-kol-kolibri-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-kolibri-default,button.sc-kol-kolibri-default,h1.sc-kol-kolibri-default,h2.sc-kol-kolibri-default,h3.sc-kol-kolibri-default,h4.sc-kol-kolibri-default,h5.sc-kol-kolibri-default,h6.sc-kol-kolibri-default,input.sc-kol-kolibri-default,option.sc-kol-kolibri-default,select.sc-kol-kolibri-default,textarea.sc-kol-kolibri-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-kolibri-default:is(a,button).sc-kol-kolibri-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-kolibri-default-h{max-width:100%}/*!@**/*.sc-kol-kolibri-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-kolibri-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-kolibri-default>span.sc-kol-kolibri-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-kolibri-default,button.sc-kol-kolibri-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-kolibri-default,input.sc-kol-kolibri-default,option.sc-kol-kolibri-default,select.sc-kol-kolibri-default,textarea.sc-kol-kolibri-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-kolibri-default>kol-span-wc.sc-kol-kolibri-default>span.sc-kol-kolibri-default>span.sc-kol-kolibri-default{display:none}/*!@:host*/.sc-kol-kolibri-default-h{display:inline-block}/*!@text*/text.sc-kol-kolibri-default{font-size:90px;letter-spacing:normal;word-spacing:normal}/*!@svg*/svg.sc-kol-kolibri-default{max-height:100%}";
 
 const max$1 = 360;
 function degreeToRadians(degree) {
@@ -16157,7 +16158,7 @@ class KolLink {
     this._ariaLabel = undefined;
     this._ariaSelected = undefined;
     this._disabled = false;
-    this._download = false;
+    this._download = undefined;
     this._hideLabel = false;
     this._href = undefined;
     this._icon = undefined;
@@ -16192,13 +16193,13 @@ class KolLink {
       "_ariaLabel": [1, "_aria-label"],
       "_ariaSelected": [4, "_aria-selected"],
       "_disabled": [4],
-      "_download": [8],
+      "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
       "_icon": [1],
       "_iconAlign": [1, "_icon-align"],
       "_iconOnly": [4, "_icon-only"],
-      "_label": [8],
+      "_label": [1],
       "_listenAriaCurrent": [8, "_listen-aria-current"],
       "_on": [16],
       "_role": [1],
@@ -16232,7 +16233,7 @@ class KolLinkButton {
     this._ariaSelected = undefined;
     this._customClass = undefined;
     this._disabled = false;
-    this._download = false;
+    this._download = undefined;
     this._hideLabel = false;
     this._href = undefined;
     this._icon = undefined;
@@ -16269,12 +16270,12 @@ class KolLinkButton {
       "_ariaSelected": [4, "_aria-selected"],
       "_customClass": [1, "_custom-class"],
       "_disabled": [4],
-      "_download": [8],
+      "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
       "_icon": [1],
       "_iconOnly": [4, "_icon-only"],
-      "_label": [8],
+      "_label": [1],
       "_listenAriaCurrent": [8, "_listen-aria-current"],
       "_on": [16],
       "_role": [1],
@@ -16431,10 +16432,7 @@ const validateAriaSelected = (component, value) => {
 };
 
 const validateDownload = (component, value) => {
-  if (typeof value === 'boolean')
-    watchBoolean(component, '_download', value);
-  else
-    watchString(component, '_download', value);
+  watchString(component, '_download', value);
 };
 
 const validateHref = (component, value, options = {}) => {
@@ -16490,7 +16488,7 @@ class KolLinkWc {
         href: typeof this.state._href === 'string' && this.state._href.length > 0 ? this.state._href : 'javascript:void(0);',
         target: typeof this.state._target === 'string' && this.state._target.length > 0 ? this.state._target : undefined,
         rel: isExternal ? 'noopener' : undefined,
-        download: (typeof this.state._download === 'string' && this.state._download === 'true') || this.state._download === true ? true : undefined,
+        download: typeof this.state._download === 'string' ? this.state._download : undefined,
       };
       if ((this.state._useCase === 'image' || this.state._hideLabel === true) && !this.state._label) {
         devHint(`[KolLink] Es muss ein Aria-Label gesetzt werden, wenn eine Grafik verlinkt oder der _hide-label gesetzt ist.`);
@@ -16518,7 +16516,7 @@ class KolLinkWc {
     this._ariaLabel = undefined;
     this._ariaSelected = undefined;
     this._disabled = false;
-    this._download = false;
+    this._download = undefined;
     this._hideLabel = false;
     this._href = undefined;
     this._icon = undefined;
@@ -16538,19 +16536,18 @@ class KolLinkWc {
     this.state = {
       _href: '…',
       _icon: {},
-      _label: false,
     };
   }
   render() {
     const { isExternal, tagAttrs, goToProps } = this.getRenderValues();
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, null, hAsync("a", Object.assign({ ref: this.catchRef }, tagAttrs, { "aria-controls": this.state._ariaControls, "aria-current": this.state._ariaCurrent, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapBoolean2String(this.state._ariaSelected), class: {
         disabled: this.state._disabled === true,
         'skip ': this.state._stealth !== false,
         'icon-only': this.state._hideLabel === true,
         'hide-label': this.state._hideLabel === true,
         'external-link': isExternal,
-      } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick }, goToProps, { role: this.state._role, tabIndex: this.state._tabIndex }), hAsync("kol-span-wc", { _icon: this.state._icon, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? false : this.state._label || this.state._href }, hAsync("slot", { name: "expert", slot: "expert" })), isExternal && hAsync("kol-icon", { class: "external-link-icon", _label: this.state._targetDescription, _icon: 'codicon codicon-link-external' })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
+      } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick }, goToProps, { role: this.state._role, tabIndex: this.state._tabIndex }), hAsync("kol-span-wc", { _icon: this.state._icon, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { name: "expert", slot: "expert" })), isExternal && hAsync("kol-icon", { class: "external-link-icon", _label: this.state._targetDescription, _icon: 'codicon codicon-link-external' })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
   }
   validateAriaControls(value) {
     validateAriaControls(this, value);
@@ -16688,13 +16685,13 @@ class KolLinkWc {
       "_ariaLabel": [1, "_aria-label"],
       "_ariaSelected": [4, "_aria-selected"],
       "_disabled": [4],
-      "_download": [8],
+      "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
       "_icon": [1],
       "_iconAlign": [1, "_icon-align"],
       "_iconOnly": [4, "_icon-only"],
-      "_label": [8],
+      "_label": [1],
       "_listenAriaCurrent": [8, "_listen-aria-current"],
       "_on": [16],
       "_role": [1],
@@ -16880,7 +16877,7 @@ BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Mediz
 BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
 BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
 
-const defaultStyleCss$g = "/*!@:host*/.sc-kol-logo-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-logo-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-logo-default,button.sc-kol-logo-default:not([role='link']),kol-input.sc-kol-logo-default .input.sc-kol-logo-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-logo-default,button.sc-kol-logo-default,h1.sc-kol-logo-default,h2.sc-kol-logo-default,h3.sc-kol-logo-default,h4.sc-kol-logo-default,h5.sc-kol-logo-default,h6.sc-kol-logo-default,input.sc-kol-logo-default,option.sc-kol-logo-default,select.sc-kol-logo-default,textarea.sc-kol-logo-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-logo-default:is(a,button).sc-kol-logo-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-logo-default-h{max-width:100%}/*!@**/*.sc-kol-logo-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-logo-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-logo-default>span.sc-kol-logo-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-logo-default,button.sc-kol-logo-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-logo-default,input.sc-kol-logo-default,option.sc-kol-logo-default,select.sc-kol-logo-default,textarea.sc-kol-logo-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-logo-default>kol-span-wc.sc-kol-logo-default>span.sc-kol-logo-default>span.sc-kol-logo-default{display:none}/*!@text*/text.sc-kol-logo-default{font-size:16px;letter-spacing:normal;word-spacing:normal}/*!@svg*/svg.sc-kol-logo-default{max-height:100%}";
+const defaultStyleCss$g = "/*!@:host*/.sc-kol-logo-default-h{--a11y-min-size:44px;font-size:inherit}/*!@**/*.sc-kol-logo-default{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}/*!@[role='button'],\nbutton:not([role='link']),\nkol-input .input*/[role='button'].sc-kol-logo-default,button.sc-kol-logo-default:not([role='link']),kol-input.sc-kol-logo-default .input.sc-kol-logo-default{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}/*!@a,\nbutton,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\ninput,\noption,\nselect,\ntextarea*/a.sc-kol-logo-default,button.sc-kol-logo-default,h1.sc-kol-logo-default,h2.sc-kol-logo-default,h3.sc-kol-logo-default,h4.sc-kol-logo-default,h5.sc-kol-logo-default,h6.sc-kol-logo-default,input.sc-kol-logo-default,option.sc-kol-logo-default,select.sc-kol-logo-default,textarea.sc-kol-logo-default{font-family:inherit;font-size:inherit}/*!@:is(a, button)*/.sc-kol-logo-default:is(a,button).sc-kol-logo-default{background-color:transparent;border:none;margin:0;padding:0;width:100%}/*!@:host*/.sc-kol-logo-default-h{max-width:100%}/*!@**/*.sc-kol-logo-default{box-sizing:border-box}/*!@kol-span-wc*/kol-span-wc.sc-kol-logo-default{display:grid;place-items:center}/*!@kol-span-wc > span*/kol-span-wc.sc-kol-logo-default>span.sc-kol-logo-default{display:flex;place-items:center}/*!@a,\nbutton*/a.sc-kol-logo-default,button.sc-kol-logo-default{cursor:pointer}/*!@button,\ninput,\noption,\nselect,\ntextarea*/button.sc-kol-logo-default,input.sc-kol-logo-default,option.sc-kol-logo-default,select.sc-kol-logo-default,textarea.sc-kol-logo-default{font-family:inherit}/*!@.icon-only > kol-span-wc > span > span*/.icon-only.sc-kol-logo-default>kol-span-wc.sc-kol-logo-default>span.sc-kol-logo-default>span.sc-kol-logo-default{display:none}/*!@:host*/.sc-kol-logo-default-h{display:inline-block}/*!@text*/text.sc-kol-logo-default{font-size:16px;letter-spacing:normal;word-spacing:normal}/*!@svg*/svg.sc-kol-logo-default{max-height:100%}";
 
 function enumToArray(enumeration, enumAsMap = new Map()) {
   Object.entries(enumeration).map(([key, value]) => {
@@ -17133,7 +17130,7 @@ class KolNav {
     return (hAsync(Host, null, hAsync("div", { class: {
         [orientation]: true,
         [this.state._variant]: true,
-      } }, hAsync("nav", { "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { class: "mt-2 w-full compact" }, hAsync("kol-button", { _ariaControls: "nav", _ariaExpanded: !hideLabel, _icon: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
+      } }, hAsync("nav", { "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { class: "compact" }, hAsync("kol-button", { _ariaControls: "nav", _ariaExpanded: !hideLabel, _icon: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
         onClick: () => {
           this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
         },
@@ -19292,10 +19289,10 @@ class KolQuote {
     this.validateVariant(this._variant);
   }
   render() {
-    const hideExpertSlot = this.state._quote !== '';
+    const hasExpertSlot = showExpertSlot(this.state._quote);
     return (hAsync(Host, null, hAsync("figure", { class: {
         [this.state._variant]: true,
-      } }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": hideExpertSlot ? 'true' : undefined, hidden: hideExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": hideExpertSlot ? 'true' : undefined, hidden: hideExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", null, hAsync("cite", null, hAsync("kol-link", { _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
+      } }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { 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", null, hAsync("cite", null, hAsync("kol-link", { _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
   }
   static get watchers() { return {
     "_caption": ["validateCaption"],
@@ -19446,11 +19443,11 @@ class KolSelect {
   }
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
-    const hasExpertSlot = this.state._label === false;
+    const hasExpertSlot = showExpertSlot(this.state._label);
     return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: {
         'hide-label': !!this.state._hideLabel,
         select: true,
-      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _required: this.state._required, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("select", { ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false", style: {
+      }, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icon: this.state._icon, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("select", { ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false", style: {
         height: this.state._height,
       }, onClick: this.controller.onFacade.onClick,
       onBlur: this.controller.onFacade.onBlur,
@@ -19462,7 +19459,7 @@ class KolSelect {
       else {
         return (hAsync("option", { disabled: option.disabled, key: key, selected: isSelected(this.state._value, option.value), value: key }, option.label));
       }
-    })))), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _align: this._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
+    }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -19511,7 +19508,7 @@ class KolSelect {
       _height: '',
       _hideError: false,
       _id: `id-${nonce()}`,
-      _label: false,
+      _label: '',
       _multiple: false,
       _options: [],
       _value: [],
@@ -19637,7 +19634,7 @@ class KolSelect {
       "_hint": [1],
       "_icon": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_list": [1],
       "_multiple": [4],
       "_name": [1],
@@ -19743,7 +19740,7 @@ class KolSpan {
       "_hideLabel": [4, "_hide-label"],
       "_icon": [1],
       "_iconOnly": [4, "_icon-only"],
-      "_label": [8]
+      "_label": [1]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -32020,15 +32017,16 @@ class KolSpanWc {
       _allowMarkdown: false,
       _hideLabel: false,
       _icon: {},
-      _label: false,
+      _label: '',
     };
   }
   render() {
-    const hideExpertSlot = typeof this.state._label === 'string';
+    var _a;
+    const hideExpertSlot = !showExpertSlot(this.state._label);
     return (hAsync(Host, { class: {
         'icon-only': !!this.state._hideLabel,
         'hide-label': !!this.state._hideLabel,
-      } }, this.state._icon.top && hAsync("kol-icon", { class: "icon top", style: this.state._icon.top.style, _label: "", _icon: this.state._icon.top.icon }), hAsync("span", null, this.state._icon.left && hAsync("kol-icon", { class: "icon left", style: this.state._icon.left.style, _label: "", _icon: this.state._icon.left.icon }), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && this.state._label ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._label))) : (''), hAsync("span", { "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { name: "expert" })), this.state._icon.right && hAsync("kol-icon", { class: "icon right", style: this.state._icon.right.style, _label: "", _icon: this.state._icon.right.icon })), this.state._icon.bottom && hAsync("kol-icon", { class: "icon bottom", style: this.state._icon.bottom.style, _label: "", _icon: this.state._icon.bottom.icon })));
+      } }, this.state._icon.top && hAsync("kol-icon", { class: "icon top", style: this.state._icon.top.style, _label: "", _icon: this.state._icon.top.icon }), hAsync("span", null, this.state._icon.left && hAsync("kol-icon", { class: "icon left", style: this.state._icon.left.style, _label: "", _icon: this.state._icon.left.icon }), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, (_a = this.state._label) !== null && _a !== void 0 ? _a : ''))) : (''), hAsync("span", { "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { name: "expert" })), this.state._icon.right && hAsync("kol-icon", { class: "icon right", style: this.state._icon.right.style, _label: "", _icon: this.state._icon.right.icon })), this.state._icon.bottom && hAsync("kol-icon", { class: "icon bottom", style: this.state._icon.bottom.style, _label: "", _icon: this.state._icon.bottom.icon })));
   }
   validateAllowMarkdown(value) {
     watchBoolean(this, '_allowMarkdown', value, {
@@ -32068,7 +32066,7 @@ class KolSpanWc {
       "_hideLabel": [4, "_hide-label"],
       "_icon": [1],
       "_iconOnly": [4, "_icon-only"],
-      "_label": [8],
+      "_label": [1],
       "state": [32]
     },
     "$listeners$": undefined,
@@ -33255,10 +33253,10 @@ const increaseTextareaHeight = (el) => {
 class KolTextarea {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
-    const hasExpertSlot = this.state._label === false;
-    return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("textarea", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: "false" }, this.controller.onFacade, { onKeyUp: this.onKeyUp, style: {
+    const hasExpertSlot = showExpertSlot(this.state._label);
+    return (hAsync(Host, { class: { 'has-value': this.state._hasValue } }, hAsync("kol-input", { class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); } }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", null) : this.state._label), hAsync("div", { slot: "input" }, hAsync("textarea", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: "false" }, this.controller.onFacade, { onKeyUp: this.onKeyUp, style: {
         resize: this.state._resize,
-      }, value: this.state._value })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", hidden: hasExpertSlot || !this.state._hideLabel, _align: this._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })))));
+      }, value: this.state._value }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -33304,7 +33302,7 @@ class KolTextarea {
       _hasValue: false,
       _hideError: false,
       _id: `id-${nonce()}`,
-      _label: false,
+      _label: '',
       _resize: 'vertical',
     };
     this.controller = new TextareaController(this, 'textarea', this.host);
@@ -33428,7 +33426,7 @@ class KolTextarea {
       "_hideLabel": [4, "_hide-label"],
       "_hint": [1],
       "_id": [1],
-      "_label": [8],
+      "_label": [1],
       "_maxLength": [2, "_max-length"],
       "_name": [1],
       "_on": [16],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/hydrate",
-	"version": "1.7.0-rc.13",
+	"version": "1.7.0-rc.14",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": "https://github.com/public-ui/kolibri",
@@ -46,11 +46,11 @@
 		"prepack": "npm run build"
 	},
 	"devDependencies": {
-		"@public-ui/components": "1.7.0-rc.13",
+		"@public-ui/components": "1.7.0-rc.14",
 		"rimraf": "3.0.2"
 	},
 	"peerDependencies": {
-		"@public-ui/components": "1.7.0-rc.13"
+		"@public-ui/components": "1.7.0-rc.14"
 	},
 	"sideEffects": false,
 	"type": "commonjs",