@public-ui/hydrate 2.0.0-rc.4 → 2.0.0-rc.6

package/dist/index.js

@@ -7850,7 +7850,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.4
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.6
 		`, {
       forceLog: true,
     });
@@ -10069,11 +10069,17 @@ const validateLabel = (component, value, options = {}) => {
 };
 const validateLabelWithExpertSlot = validateLabel;
 
-const AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES = new Set(['"left", "right"']);
-const AVAILABLE_VERTICAL_ALIGNMENT_VALUES = new Set(['"bottom", "top"']);
-const AVAILABLE_ALIGNMENT_VALUES = new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, ...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]);
+const horizontalAlignOptions = ['left', 'right'];
+const verticalAlignOptions = ['top', 'bottom'];
+const alignPropTypeOptions = [...horizontalAlignOptions, ...verticalAlignOptions];
+const validateAlign = (component, value) => {
+  validateAlignment(component, '_align', value);
+};
+
 const validateAlignment = (component, propName, value) => {
-  watchValidator(component, propName, (value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top', AVAILABLE_ALIGNMENT_VALUES, value, { defaultValue: 'top' });
+  watchValidator(component, propName, (value) => typeof value === 'string' && alignPropTypeOptions.includes(value), new Set(alignPropTypeOptions), value, {
+    defaultValue: 'top',
+  });
 };
 
 const validateTooltipAlign = (component, value) => {
@@ -10131,10 +10137,12 @@ const validateOpen = (component, value, options) => {
   watchBoolean(component, '_open', value, options);
 };
 
+const headingLevelOptions = [0, 1, 2, 3, 4, 5, 6];
+
 const watchHeadingLevel = (component, value) => {
   watchValidator(component, '_level', (value) => {
-    return typeof value === 'number' && 0 <= value && value <= 6;
-  }, new Set(['Number {0, 1, 2, 3, 4, 5, 6}']), value, {
+    return typeof value === 'number' && headingLevelOptions.includes(value);
+  }, new Set([`Number {${headingLevelOptions.join(', ')}`]), value, {
     defaultValue: 1,
     required: true,
   });
@@ -10363,6 +10371,9 @@ const validateHasCloser = (component, value) => {
   watchBoolean(component, '_hasCloser', value);
 };
 
+const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'];
+const alertVariantOptions = ['card', 'msg'];
+
 const Icon = (props) => {
   return hAsync("kol-icon", { class: "heading-icon", _label: typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel, _icons: props.icon });
 };
@@ -10447,10 +10458,10 @@ class KolAlertWc {
     }
   }
   validateType(value) {
-    watchValidator(this, '_type', (value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'), new Set('String {success, info, warning, error}'), value);
+    watchValidator(this, '_type', (value) => typeof value === 'string' && alertTypeOptions.includes(value), new Set(`String {${alertTypeOptions.join(', ')}`), value);
   }
   validateVariant(value) {
-    watchValidator(this, '_variant', (value) => value === 'card' || value === 'msg', new Set('AlertVariant {card, msg}'), value);
+    watchValidator(this, '_variant', (value) => typeof value === 'string' && alertVariantOptions.includes(value), new Set(`AlertVariant {${alertVariantOptions.join(', ')}`), value);
   }
   componentWillLoad() {
     this.validateAlert(this._alert);
@@ -11257,7 +11268,7 @@ class KolBreadcrumb {
   }; }
 }
 
-const defaultStyleCss$C = "@layer kol-global {\n\t\n\t.sc-kol-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
+const defaultStyleCss$C = "@layer kol-global {\n\t\n\t.sc-kol-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\n\t\t&::before {\n\t\t\t\n\t\t\tcontent: '\\200B';\n\t\t}\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
 
 class KolButton {
   constructor(hostRef) {
@@ -11266,6 +11277,7 @@ class KolButton {
       this.ref = ref;
       propagateFocus(this.host, this.ref);
     };
+    this._accessKey = undefined;
     this._ariaControls = undefined;
     this._ariaExpanded = undefined;
     this._ariaSelected = undefined;
@@ -11290,7 +11302,7 @@ class KolButton {
         button: true,
         [this._variant]: this._variant !== 'custom',
         [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-      }, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { name: "expert", slot: "expert" }))));
+      }, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { name: "expert", slot: "expert" }))));
   }
   get host() { return getElement(this); }
   static get style() { return {
@@ -11300,6 +11312,7 @@ class KolButton {
     "$flags$": 41,
     "$tagName$": "kol-button",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_ariaControls": [1, "_aria-controls"],
       "_ariaExpanded": [4, "_aria-expanded"],
       "_ariaSelected": [4, "_aria-selected"],
@@ -11376,6 +11389,7 @@ class KolButtonLink {
       this.ref = ref;
       propagateFocus(this.host, this.ref);
     };
+    this._accessKey = undefined;
     this._ariaControls = undefined;
     this._ariaExpanded = undefined;
     this._ariaSelected = undefined;
@@ -11394,7 +11408,7 @@ class KolButtonLink {
     this._value = undefined;
   }
   render() {
-    return (hAsync(Host, null, hAsync("kol-button-wc", { ref: this.catchRef, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { name: "expert", slot: "expert" }))));
+    return (hAsync(Host, null, hAsync("kol-button-wc", { ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { name: "expert", slot: "expert" }))));
   }
   get host() { return getElement(this); }
   static get style() { return {
@@ -11404,6 +11418,7 @@ class KolButtonLink {
     "$flags$": 41,
     "$tagName$": "kol-button-link",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_ariaControls": [1, "_aria-controls"],
       "_ariaExpanded": [4, "_aria-expanded"],
       "_ariaSelected": [4, "_aria-selected"],
@@ -11480,12 +11495,14 @@ const validateButtonCallbacks = (component, value) => {
   watchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}']), value);
 };
 
+const buttonTypePropTypeOptions = ['button', 'reset', 'submit'];
 const validateButtonType = (component, value) => {
-  watchValidator(component, `_type`, (value) => value === 'button' || value === 'reset' || value === 'submit', new Set(['KoliBriButtonType {button, reset, submit}']), value);
+  watchValidator(component, `_type`, (value) => typeof value === 'string' && buttonTypePropTypeOptions.includes(value), new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(', ')}`]), value);
 };
 
+const buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'];
 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, {
+  watchValidator(component, `_variant`, (value) => typeof value === 'string' && buttonVariantPropTypeOptions.includes(value), new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(', ')}`]), value, {
     defaultValue: 'normal',
   });
 };
@@ -11824,16 +11841,20 @@ const validateAriaSelected = (component, value) => {
   watchBoolean(component, '_ariaSelected', value);
 };
 
+const validateAccessKey = (component, value) => {
+  watchString(component, '_accessKey', value);
+};
+
 class KolButtonWc {
   render() {
     const hasExpertSlot = showExpertSlot(this.state._label);
-    return (hAsync(Host, null, hAsync("button", Object.assign({ ref: this.catchRef, "aria-controls": this.state._ariaControls, "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: {
+    return (hAsync(Host, null, hAsync("button", Object.assign({ ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "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: {
         button: true,
         [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", { class: "button-inner", _icons: this.state._icons, _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 : '' })));
+      }, 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", { class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _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, _accessKey: this._accessKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -11865,6 +11886,7 @@ class KolButtonWc {
         }
       }
     };
+    this._accessKey = undefined;
     this._ariaControls = undefined;
     this._ariaExpanded = undefined;
     this._ariaSelected = undefined;
@@ -11892,6 +11914,9 @@ class KolButtonWc {
     };
     this.controller = new AssociatedInputController(this, 'button', this.host);
   }
+  validateAccessKey(value) {
+    validateAccessKey(this, value);
+  }
   validateAriaControls(value) {
     validateAriaControls(this, value);
   }
@@ -11951,6 +11976,7 @@ class KolButtonWc {
     validateButtonVariant(this, value);
   }
   componentWillLoad() {
+    this.validateAccessKey(this._accessKey);
     this.validateAriaControls(this._ariaControls);
     this.validateAriaExpanded(this._ariaExpanded);
     this.validateAriaSelected(this._ariaSelected);
@@ -11972,6 +11998,7 @@ class KolButtonWc {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "_accessKey": ["validateAccessKey"],
     "_ariaControls": ["validateAriaControls"],
     "_ariaExpanded": ["validateAriaExpanded"],
     "_ariaSelected": ["validateAriaSelected"],
@@ -11995,6 +12022,7 @@ class KolButtonWc {
     "$flags$": 4,
     "$tagName$": "kol-button-wc",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_ariaControls": [1, "_aria-controls"],
       "_ariaExpanded": [4, "_aria-expanded"],
       "_ariaSelected": [4, "_aria-selected"],
@@ -12465,9 +12493,9 @@ class KolIcon {
   }; }
 }
 
-const AVAILABLE_LOADING_VALUES = new Set(['"eager", "lazy"']);
+const loadingOptions = ['eager', 'lazy'];
 function validateLoading(component, value) {
-  watchValidator(component, '_loading', (value) => value === 'eager' || value === 'lazy', AVAILABLE_LOADING_VALUES, value);
+  watchValidator(component, '_loading', (value) => typeof value === 'string' && loadingOptions.includes(value), new Set(loadingOptions), value);
 }
 
 const defaultStyleCss$v = "@layer kol-component {\n\timg {\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}";
@@ -12574,6 +12602,7 @@ class KolInput {
     this.catchInputSlot = (slot) => {
       handleSlotContent(this.host, slot, this.slotName);
     };
+    this._accessKey = undefined;
     this._alert = true;
     this._currentLength = undefined;
     this._disabled = false;
@@ -12618,13 +12647,14 @@ class KolInput {
         input: true,
         'icon-left': typeof ((_a = this._icons) === null || _a === void 0 ? void 0 : _a.left) === 'object',
         'icon-right': typeof ((_b = this._icons) === null || _b === void 0 ? void 0 : _b.right) === 'object',
-      } }, ((_c = this._icons) === null || _c === void 0 ? void 0 : _c.left) && (hAsync("kol-icon", { _label: "", _icons: ((_d = this._icons) === null || _d === void 0 ? void 0 : _d.left).icon, style: this.getIconStyles((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) })), 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, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) && (hAsync("kol-icon", { _label: "", _icons: ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.right).icon, style: this.getIconStyles((_h = this._icons) === null || _h === void 0 ? void 0 : _h.right) }))), 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'))))));
+      } }, ((_c = this._icons) === null || _c === void 0 ? void 0 : _c.left) && (hAsync("kol-icon", { _label: "", _icons: ((_d = this._icons) === null || _d === void 0 ? void 0 : _d.left).icon, style: this.getIconStyles((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) })), 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, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) && (hAsync("kol-icon", { _label: "", _icons: ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.right).icon, style: this.getIconStyles((_h = this._icons) === null || _h === void 0 ? void 0 : _h.right) }))), useTooltopInsteadOfLabel && (hAsync("kol-tooltip-wc", { "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _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 {
     "$flags$": 4,
     "$tagName$": "kol-input",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_alert": [4],
       "_currentLength": [2, "_current-length"],
       "_disabled": [4],
@@ -12677,6 +12707,8 @@ const validateIndeterminate = (component, value) => {
   watchBoolean(component, '_indeterminate', value);
 };
 
+const orientationOptions = ['horizontal', 'vertical'];
+
 const validateInputSelectOptions = (option) => {
   if (typeof option === 'object' && option !== null) {
     if (typeof option.label === 'string' && option.label.length > 0) {
@@ -12936,7 +12968,7 @@ class InputRadioController extends InputCheckboxRadioController {
     this.component = component;
   }
   validateOrientation(value) {
-    watchValidator(this.component, '_orientation', (value) => value === 'horizontal' || value === 'vertical', new Set(['Orientation {horizontal, vertical}']), value, {
+    watchValidator(this.component, '_orientation', (value) => typeof value === 'string' && orientationOptions.includes(value), new Set([`Orientation {${orientationOptions.join(', ')}`]), value, {
       defaultValue: 'vertical',
     });
   }
@@ -12972,6 +13004,8 @@ class InputRadioController extends InputCheckboxRadioController {
   }
 }
 
+const inputCheckboxVariantOptions = ['button', 'default', 'switch'];
+
 class InputCheckboxController extends InputCheckboxRadioController {
   constructor(component, name, host) {
     super(component, name, host);
@@ -13019,7 +13053,7 @@ class InputCheckboxController extends InputCheckboxRadioController {
     this.setFormAssociatedCheckboxValue(this.component.state._value);
   }
   validateVariant(value) {
-    watchValidator(this.component, '_variant', (value) => typeof value === 'string' && (value === 'button' || value === 'default' || value === 'switch'), new Set(['String {button, default, switch}']), value);
+    watchValidator(this.component, '_variant', (value) => typeof value === 'string' && inputCheckboxVariantOptions.includes(value), new Set([`String {${inputCheckboxVariantOptions.join(', ')}`]), value);
   }
   componentWillLoad() {
     super.componentWillLoad();
@@ -13032,6 +13066,23 @@ class InputCheckboxController extends InputCheckboxRadioController {
   }
 }
 
+const InternalUnderlinedAccessKey = ({ accessKey, label }) => {
+  let [first, ...rest] = label.split(accessKey);
+  if (rest.length === 0) {
+    accessKey = accessKey.toUpperCase();
+    [first, ...rest] = label.split(accessKey);
+  }
+  if (rest.length === 0) {
+    accessKey = accessKey.toLowerCase();
+    [first, ...rest] = label.split(accessKey);
+  }
+  return (hAsync(Fragment, null,
+    first,
+    rest.length ? (hAsync(Fragment, null,
+      hAsync("u", null, accessKey),
+      rest.join(accessKey))) : null));
+};
+
 const defaultStyleCss$t = "@layer kol-global {\n\t\n\t.sc-kol-input-checkbox-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-checkbox-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-checkbox-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tkol-input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tjustify-items: left;\n\t}\n\n\tkol-input.default,\n\tkol-input.switch {\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\tkol-input .input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\torder: 1;\n\t}\n\n\tkol-input .input div {\n\t\tdisplay: inline-flex;\n\t}\n\n\tkol-input .input input {\n\t\tmargin: 0;\n\t}\n\n\tkol-input label {\n\t\torder: 2;\n\t}\n\n\tkol-input .hint,\n\tkol-input.error > kol-alert {\n\t\tgrid-column: span 2;\n\t}\n\n\tkol-input kol-alert.error {\n\t\torder: 3;\n\t}\n\n\tkol-input .hint {\n\t\torder: 4;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n\n\tinput {\n\t\tborder-style: solid;\n\t\tborder-width: 2px;\n\t\tline-height: 24px;\n\t}\n\n\tinput[type='checkbox'] {\n\t\tappearance: none;\n\t\tbackground-color: #fff;\n\t\tcursor: pointer;\n\t\ttransition: 0.5s;\n\t}\n\n\tinput[type='checkbox'].kol-disabled:before {\n\t\tcursor: not-allowed;\n\t}\n\n\tinput[type='checkbox']:before {\n\t\tcontent: '';\n\t\tcursor: pointer;\n\t}\n\n\t.default kol-icon {\n\t\tdisplay: none;\n\t}\n\n\tkol-input.required .tooltip-content .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.button {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: var(--a11y-min-size) auto;\n\t\tgrid-template-areas: 'error error' 'input label' 'hint hint';\n\t}\n\n\t.button[tabindex]:focus {\n\t\t\n\t\tcursor: inherit;\n\t}\n\n\t.button input {\n\t\tdisplay: none;\n\t}\n\n\t.button > .error {\n\t\tgrid-area: error;\n\t}\n\n\t.button > label {\n\t\tgrid-area: label;\n\t}\n\n\t.button > .input {\n\t\tgrid-area: input;\n\t}\n\n\t.button > .hint {\n\t\tgrid-area: hint;\n\t}\n\n\t.button .icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t}\n}\n\n@layer kol-component {\n\t.default input[type='checkbox'] {\n\t\theight: 1.5em;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:before {\n\t\tdisplay: block;\n\t\theight: 1.5em;\n\t\tposition: relative;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:checked:before {\n\t\tborder-radius: 1px;\n\t\tborder-style: solid;\n\t\tborder-width: 0 3px 3px 0;\n\t\theight: 0.75em;\n\t\tleft: calc(0.375em - 2px);\n\t\ttransform: rotate(40deg) translate(-50%, -50%);\n\t\ttop: calc(0.7125em - 2px);\n\t\twidth: 0.375em;\n\t}\n\n\t.default input[type='checkbox']:indeterminate:before {\n\t\tbackground-color: #000;\n\t\theight: 0.2em;\n\t\tleft: 0.24em;\n\t\ttop: 0.575em;\n\t\twidth: 0.8em;\n\t}\n}\n\n@layer kol-component {\n\t.switch .input {\n\t\tposition: relative;\n\t}\n\n\t.switch input[type='checkbox'] {\n\t\tdisplay: inline-block;\n\t\theight: 1.7em;\n\t\tmin-width: 3.2em;\n\t\tposition: relative;\n\t\twidth: 3.2em;\n\t}\n\n\t.switch input[type='checkbox']::before {\n\t\tbackground-color: #000;\n\t\theight: 1.2em;\n\t\tleft: calc(0.25em - 2px);\n\t\ttop: calc(0.25em - 2px);\n\t\tposition: absolute;\n\t\ttransition: 0.5s;\n\t\twidth: 1.2em;\n\t}\n\n\t.switch input[type='checkbox']:checked::before {\n\t\ttransform: translateX(1.5em);\n\t}\n\n\t.switch input[type='checkbox']:indeterminate::before {\n\t\ttransform: translateX(0.75em);\n\t}\n\n\t.switch .icon {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 1.2em;\n\t\theight: 1.2em;\n\t\tposition: absolute;\n\t\tz-index: 1;\n\t\ttop: 50%;\n\t\tleft: 4px;\n\t\ttransform: translate(0, -50%);\n\t\ttransition: 0.5s;\n\t\tcolor: #000;\n\t}\n\n\t.switch:has(input:checked) .icon {\n\t\ttransform: translate(1.5em, -50%);\n\t}\n\n\t.switch:has(input:indeterminate) .icon {\n\t\ttransform: translate(0.75em, -50%);\n\t}\n}";
 
 class KolInputCheckbox {
@@ -13043,7 +13094,7 @@ class KolInputCheckbox {
         [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, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : this.state._label), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.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 }))))));
+      }, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' ? 0 : undefined, _accessKey: this.state._accessKey, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.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);
@@ -13229,6 +13280,8 @@ class KolInputCheckbox {
   }; }
 }
 
+const inputTypeOnOffOptions = ['on', 'off'];
+
 const validateSuggestions = (component, value) => {
   watchJsonArrayString(component, '_suggestions', (item) => typeof item === 'string' || typeof item === 'number', value, undefined, {
     hooks: {
@@ -13290,7 +13343,7 @@ class InputColorController extends InputIconController {
     this.component = component;
   }
   validateAutoComplete(value) {
-    watchValidator(this.component, '_autoComplete', (value) => typeof value === 'string' && (value === 'on' || value === 'off'), new Set(['on | off']), value);
+    watchValidator(this.component, '_autoComplete', (value) => typeof value === 'string' && inputTypeOnOffOptions.includes(value), new Set(inputTypeOnOffOptions), value);
   }
   validateSuggestions(value) {
     validateSuggestions(this.component, value);
@@ -13329,7 +13382,7 @@ class KolInputColor {
     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, _icons: this.state._icons, _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", { name: "expert" }) : 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))))));
+      }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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);
@@ -13485,6 +13538,8 @@ class KolInputColor {
   }; }
 }
 
+const inputDateTypeOptions = ['date', 'datetime-local', 'month', 'time', 'week'];
+
 const validateReadOnly = (component, value) => {
   watchBoolean(component, '_readOnly', value);
 };
@@ -13603,8 +13658,7 @@ class InputDateController extends InputIconController {
     watchNumber(this.component, '_step', value);
   }
   validateType(value) {
-    watchValidator(this.component, '_type', (value) => typeof value === 'string' &&
-      (value === 'date' || value === 'datetime-local' || value === 'month' || value === 'number' || value === 'time' || value === 'week'), new Set(['String {date, datetime-local, month, number, time, week}']), value);
+    watchValidator(this.component, '_type', (value) => typeof value === 'string' && inputDateTypeOptions.includes(value), new Set([`String {${inputDateTypeOptions.join(', ')}`]), value);
   }
   validateValue(value) {
     this.validateValueEx(value);
@@ -13646,7 +13700,7 @@ class KolInputDate {
     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, _icons: this.state._icons, _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", { name: "expert" }) : 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 }))))));
+      }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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);
@@ -13861,6 +13915,8 @@ const validateMultiple = (component, value) => {
   watchBoolean(component, '_multiple', value);
 };
 
+const inputTextTypeOptions = ['text', 'search', 'url', 'tel'];
+
 const validateHasCounter = (component, value) => {
   watchBoolean(component, '_hasCounter', value);
 };
@@ -13963,7 +14019,7 @@ class InputTextController extends InputTextEmailController {
     this.component = component;
   }
   validateType(value) {
-    watchValidator(this.component, '_type', (value) => typeof value === 'string' && (value === 'text' || value === 'search' || value === 'url' || value === 'tel'), new Set(['String {text, search, url, tel}']), value);
+    watchValidator(this.component, '_type', (value) => typeof value === 'string' && inputTextTypeOptions.includes(value), new Set([`String {${inputTextTypeOptions.join(', ')}`]), value);
   }
   validateHasCounter(value) {
     validateHasCounter(this.component, value);
@@ -14011,7 +14067,7 @@ class KolInputEmail {
     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, _icons: this.state._icons, _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", { name: "expert" }) : 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, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+      } }, hAsync("kol-input", { class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _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, _icons: this.state._icons, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -14273,7 +14329,7 @@ class KolInputFile {
     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, _icons: this.state._icons, _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", { name: "expert" }) : 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 }))))));
+      }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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);
@@ -14551,7 +14607,7 @@ class KolInputNumber {
       } }, hAsync("kol-input", { class: {
         number: 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, _icons: this.state._icons, _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", { name: "expert" }) : 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: "number", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+      }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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: "number", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -14772,7 +14828,7 @@ class KolInputPassword {
       } }, 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, _icons: this.state._icons, _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", { name: "expert" }) : 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, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+      }, _accessKey: this.state._accessKey, _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, _icons: this.state._icons, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -14988,10 +15044,10 @@ class KolInputRadio {
         required: this.state._required === true,
         'hidden-error': this._hideError === true,
         [this.state._orientation]: true,
-      } }, hAsync("legend", { class: "block w-full mb-1 leading-normal" }, hAsync("span", null, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : this.state._label))), this.state._options.map((option, index) => {
+      } }, hAsync("legend", { class: "block w-full mb-1 leading-normal" }, hAsync("span", null, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this._accessKey === 'string' ? (hAsync(InternalUnderlinedAccessKey, { accessKey: this._accessKey, label: this._label })) : (this._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, _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: {
+      return (hAsync("kol-input", { class: "radio", key: customId, _accessKey: this.state._accessKey, _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,
@@ -15219,7 +15275,7 @@ class KolInputRange {
     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, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? hAsync("slot", { name: "expert" }) : this.state._label), hAsync("div", { slot: "input" }, hAsync("div", { class: "inputs-wrapper", style: {
+      }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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 }))), hasSuggestions && [
       hAsync("datalist", { id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
@@ -15437,7 +15493,7 @@ class KolInputText {
       } }, 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, _icons: this.state._icons, _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", { name: "expert" }) : 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, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
+      }, _accessKey: this.state._accessKey, _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, _icons: this.state._icons, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyUp: this.onKeyUp }))))));
   }
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -15777,6 +15833,7 @@ class KolLink {
       this.ref = ref;
       propagateFocus(this.host, this.ref);
     };
+    this._accessKey = undefined;
     this._download = undefined;
     this._hideLabel = false;
     this._href = undefined;
@@ -15791,7 +15848,7 @@ class KolLink {
     this._tooltipAlign = 'right';
   }
   render() {
-    return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
+    return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, _accessKey: this._accessKey, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
   }
   get host() { return getElement(this); }
   static get style() { return {
@@ -15801,6 +15858,7 @@ class KolLink {
     "$flags$": 41,
     "$tagName$": "kol-link",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
@@ -15820,7 +15878,7 @@ class KolLink {
   }; }
 }
 
-const defaultStyleCss$h = "@layer kol-global {\n\t\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-link-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
+const defaultStyleCss$h = "@layer kol-global {\n\t\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-link-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\n\t\t&::before {\n\t\t\t\n\t\t\tcontent: '\\200B';\n\t\t}\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
 
 class KolLinkButton {
   constructor(hostRef) {
@@ -15829,6 +15887,7 @@ class KolLinkButton {
       this.ref = ref;
       propagateFocus(this.host, this.ref);
     };
+    this._accessKey = undefined;
     this._customClass = undefined;
     this._download = undefined;
     this._hideLabel = false;
@@ -15849,7 +15908,7 @@ class KolLinkButton {
         button: true,
         [this._variant]: this._variant !== 'custom',
         [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-      }, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
+      }, _accessKey: this._accessKey, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _listenAriaCurrent: this._listenAriaCurrent, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
   }
   get host() { return getElement(this); }
   static get style() { return {
@@ -15859,6 +15918,7 @@ class KolLinkButton {
     "$flags$": 41,
     "$tagName$": "kol-link-button",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_customClass": [1, "_custom-class"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
@@ -15989,8 +16049,9 @@ class KolLinkGroup {
   }; }
 }
 
+const ariaCurrentPropTypeOptions = ['date', 'location', 'page', 'step', 'time', true, false];
 const validate = (component, propName, value) => {
-  watchValidator(component, propName, (value) => value === 'date' || value === 'location' || value === 'page' || value === 'step' || value === 'time' || value === true || value === false, new Set(['String {data, location, page, step, time}', 'boolean']), value);
+  watchValidator(component, propName, (value) => (typeof value === 'string' || typeof value === 'boolean') && ariaCurrentPropTypeOptions.includes(value), new Set([`String {${ariaCurrentPropTypeOptions.filter((option) => typeof option === 'string').join(', ')}`, 'true', 'false']), value);
 };
 const validateAriaCurrent = (component, value) => {
   validate(component, '_ariaCurrent', value);
@@ -16061,6 +16122,7 @@ class KolLinkWc {
         devWarning(`The aria-current event is not valid.`);
       }
     });
+    this._accessKey = undefined;
     this._download = undefined;
     this._hideLabel = false;
     this._href = undefined;
@@ -16081,10 +16143,13 @@ class KolLinkWc {
   render() {
     const { isExternal, tagAttrs } = this.getRenderValues();
     const hasExpertSlot = showExpertSlot(this.state._label);
-    return (hAsync(Host, null, hAsync("a", Object.assign({ ref: this.catchRef }, tagAttrs, { "aria-current": this.state._ariaCurrent, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, class: {
+    return (hAsync(Host, null, hAsync("a", Object.assign({ ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, class: {
         'external-link': isExternal,
         'hide-label': this.state._hideLabel === true,
-      } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex }), hAsync("kol-span-wc", { _icons: this.state._icons, _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, _icons: '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, role: this.state._role, tabIndex: this.state._tabIndex }), hAsync("kol-span-wc", { _accessKey: this.state._accessKey, _icons: this.state._icons, _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, _icons: 'codicon codicon-link-external' })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
+  }
+  validateAccessKey(value) {
+    validateAccessKey(this, value);
   }
   validateAriaCurrent(value) {
     validateAriaCurrent(this, value);
@@ -16126,6 +16191,7 @@ class KolLinkWc {
     validateTooltipAlign(this, value);
   }
   componentWillLoad() {
+    this.validateAccessKey(this._accessKey);
     this.validateDownload(this._download);
     this.validateHideLabel(this._hideLabel);
     this.validateHref(this._href);
@@ -16144,6 +16210,7 @@ class KolLinkWc {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "_accessKey": ["validateAccessKey"],
     "_download": ["validateDownload"],
     "_hideLabel": ["validateHideLabel"],
     "_href": ["validateHref"],
@@ -16161,6 +16228,7 @@ class KolLinkWc {
     "$flags$": 4,
     "$tagName$": "kol-link-wc",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
@@ -16527,7 +16595,7 @@ const validateHasCompactButton = (component, value) => {
   watchBoolean(component, '_hasCompactButton', value);
 };
 
-const defaultStyleCss$d = "@layer kol-global {\n\t\n\t.sc-kol-nav-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-nav-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-nav-default-h > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\tnav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.entry kol-button-wc:first-child,\n\t.entry kol-link-wc,\n\t.entry kol-span-wc {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}";
+const defaultStyleCss$d = "@layer kol-global {\n\t\n\t.sc-kol-nav-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-nav-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-nav-default-h > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\tnav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.button-link-text-switch {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}";
 
 class KolNav {
   constructor(hostRef) {
@@ -16565,7 +16633,7 @@ class KolNav {
     };
   }
   entry(collapsible, hideLabel, hasChildren, link, expanded) {
-    return (hAsync("div", { class: { entry: true, 'hide-label': hideLabel } }, hAsync("kol-button-link-text-switch", { _link: Object.assign(Object.assign({}, link), { _hideLabel: hideLabel }) }), hasChildren ? this.expandButton(collapsible, link, expanded) : ''));
+    return (hAsync("div", { class: { entry: true, 'hide-label': hideLabel } }, hAsync("kol-button-link-text-switch", { class: "button-link-text-switch", _link: Object.assign(Object.assign({}, link), { _hideLabel: hideLabel }) }), hasChildren ? this.expandButton(collapsible, link, expanded) : ''));
   }
   expandButton(collapsible, link, expanded) {
     return (hAsync("kol-button-wc", { class: "expand-button", _ariaExpanded: expanded, _disabled: !collapsible, _icons: 'codicon codicon-' + (expanded ? 'remove' : 'add'), _hideLabel: true, _label: `Untermenü zu ${link._label} ${expanded ? 'schließen' : 'öffnen'}`, _on: { onClick: () => this.onClick(link) } }));
@@ -18392,10 +18460,6 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-const validateAlign = (component, value) => {
-  validateAlignment(component, '_align', value);
-};
-
 const validateShow = (component, value, hooks) => {
   watchBoolean(component, '_show', value, hooks);
 };
@@ -18669,6 +18733,8 @@ class KolProcess {
   }; }
 }
 
+const koliBriQuoteVariantOptions = ['block', 'inline'];
+
 const defaultStyleCss$a = "@layer kol-global {\n\t\n\t.sc-kol-quote-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-quote-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}";
 
 class KolQuote {
@@ -18698,7 +18764,7 @@ class KolQuote {
     });
   }
   validateVariant(value) {
-    watchValidator(this, '_variant', (value) => value === 'block' || value === 'inline', new Set(['block', 'inline']), value);
+    watchValidator(this, '_variant', (value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value), new Set(koliBriQuoteVariantOptions), value);
   }
   componentWillLoad() {
     this.validateHref(this._href);
@@ -18859,7 +18925,7 @@ class KolSelect {
     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, _icons: this.state._icons, _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", { name: "expert" }) : 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", onClick: this.controller.onFacade.onClick,
+      }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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", onClick: this.controller.onFacade.onClick,
       onBlur: this.controller.onFacade.onBlur,
       onFocus: this.controller.onFacade.onFocus, onChange: this.onChange }, this.state._options.map((option, index) => {
       const key = `-${index}`;
@@ -19107,12 +19173,13 @@ const defaultStyleCss$7 = "@layer kol-global {\n\t\n\t.sc-kol-span-default-h {\n
 class KolSpan {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this._accessKey = undefined;
     this._hideLabel = false;
     this._icons = undefined;
     this._label = undefined;
   }
   render() {
-    return (hAsync("kol-span-wc", { _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label }, hAsync("slot", { name: "expert", slot: "expert" })));
+    return (hAsync("kol-span-wc", { _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey }, hAsync("slot", { name: "expert", slot: "expert" })));
   }
   static get style() { return {
     default: defaultStyleCss$7
@@ -19121,6 +19188,7 @@ class KolSpan {
     "$flags$": 41,
     "$tagName$": "kol-span",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_hideLabel": [4, "_hide-label"],
       "_icons": [1],
       "_label": [1]
@@ -31348,6 +31416,7 @@ const md = (str) => markdown.renderInline(str);
 class KolSpanWc {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this._accessKey = undefined;
     this._allowMarkdown = false;
     this._hideLabel = false;
     this._icons = undefined;
@@ -31364,7 +31433,10 @@ class KolSpanWc {
     const hideExpertSlot = !showExpertSlot(this.state._label);
     return (hAsync(Host, { class: {
         'hide-label': !!this.state._hideLabel,
-      } }, this.state._icons.top && hAsync("kol-icon", { class: "icon top", style: this.state._icons.top.style, _label: "", _icons: this.state._icons.top.icon }), hAsync("span", null, this.state._icons.left && hAsync("kol-icon", { class: "icon left", style: this.state._icons.left.style, _label: "", _icons: this.state._icons.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._icons.right && hAsync("kol-icon", { class: "icon right", style: this.state._icons.right.style, _label: "", _icons: this.state._icons.right.icon })), this.state._icons.bottom && hAsync("kol-icon", { class: "icon bottom", style: this.state._icons.bottom.style, _label: "", _icons: this.state._icons.bottom.icon })));
+      } }, this.state._icons.top && hAsync("kol-icon", { class: "icon top", style: this.state._icons.top.style, _label: "", _icons: this.state._icons.top.icon }), hAsync("span", null, this.state._icons.left && hAsync("kol-icon", { class: "icon left", style: this.state._icons.left.style, _label: "", _icons: this.state._icons.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" }, this.state._accessKey && this.state._label.length ? (hAsync(InternalUnderlinedAccessKey, { label: this.state._label, accessKey: this.state._accessKey })) : ((_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._accessKey && (hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && hAsync("kol-icon", { class: "icon right", style: this.state._icons.right.style, _label: "", _icons: this.state._icons.right.icon })), this.state._icons.bottom && hAsync("kol-icon", { class: "icon bottom", style: this.state._icons.bottom.style, _label: "", _icons: this.state._icons.bottom.icon })));
+  }
+  validateAccessKey(value) {
+    validateAccessKey(this, value);
   }
   validateAllowMarkdown(value) {
     watchBoolean(this, '_allowMarkdown', value, {
@@ -31381,12 +31453,14 @@ class KolSpanWc {
     validateLabelWithExpertSlot(this, value);
   }
   componentWillLoad() {
+    this.validateAccessKey(this._accessKey);
     this.validateAllowMarkdown(this._allowMarkdown);
     this.validateHideLabel(this._hideLabel);
     this.validateIcons(this._icons);
     this.validateLabel(this._label);
   }
   static get watchers() { return {
+    "_accessKey": ["validateAccessKey"],
     "_allowMarkdown": ["validateAllowMarkdown"],
     "_hideLabel": ["validateHideLabel"],
     "_icons": ["validateIcons"],
@@ -31396,6 +31470,7 @@ class KolSpanWc {
     "$flags$": 4,
     "$tagName$": "kol-span-wc",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_allowMarkdown": [4, "_allow-markdown"],
       "_hideLabel": [4, "_hide-label"],
       "_icons": [1],
@@ -31408,8 +31483,9 @@ class KolSpanWc {
   }; }
 }
 
+const spinVariantPropTypeOptions = ['cycle', 'dot', 'none'];
 const validateSpinVariant = (component, value) => {
-  watchValidator(component, '_variant', (value) => value === 'cycle' || value === 'dot' || value === 'none', new Set(['cycle', 'dot', 'none']), value);
+  watchValidator(component, '_variant', (value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value), new Set(spinVariantPropTypeOptions), value);
 };
 
 const defaultStyleCss$6 = "@layer kol-global {\n\t\n\t.sc-kol-spin-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\tfont-size: inherit;\n\t}\n\n\t* {\n\t\t\n\t\tfont-family: Verdana;\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-spin-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\tbutton,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\tfont-family: inherit;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.spin.cycle {\n\t\twidth: 3rem;\n\t\theight: 3rem;\n\t}\n\n\t.spin.cycle > .loader {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tposition: relative;\n\t\tanimation: 2s linear infinite rotate;\n\t}\n\n\t.spin.cycle > .loader::before {\n\t\tcontent: '';\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset: 0px;\n\t\tborder-radius: 50%;\n\t\tborder: 5px solid #333;\n\t\tanimation: 3s linear infinite prixClipFix;\n\t}\n\n\t@keyframes rotate {\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n\t@keyframes prixClipFix {\n\t\t0% {\n\t\t\tborder-color: #fff;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n\t\t}\n\t\t25% {\n\t\t\tborder-color: #666;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n\t\t}\n\t\t50% {\n\t\t\tborder-color: #fc0;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n\t\t}\n\t\t75% {\n\t\t\tborder-color: red;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n\t\t}\n\t\t100% {\n\t\t\tborder-color: #000;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n\t\t}\n\t} \n\t@media (prefers-reduced-motion) {\n\t\t.spin.cycle > .loader {\n\t\t\tanimation-duration: 4s;\n\t\t}\n\n\t\t.spin.cycle > .loader::before {\n\t\t\tanimation-duration: 6s;\n\t\t}\n\t}\n}\n\n@layer kol-component {\n\t.spin.dot {\n\t\theight: 1rem;\n\t\twidth: 3rem;\n\t}\n\n\t.spin.dot > span {\n\t\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\t\tborder-radius: 50%;\n\t\tborder: 0.1rem solid #fff;\n\t\theight: 0.8rem;\n\t\tposition: absolute;\n\t\ttop: 0.1rem;\n\t\twidth: 0.8rem;\n\t}\n\n\t.spin.dot > span:first-child {\n\t\tbackground-color: #fc0;\n\t\tz-index: 0;\n\t\tanimation: 1s infinite spin1;\n\t\tleft: 0.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(2) {\n\t\tbackground-color: red;\n\t\tz-index: 1;\n\t\tanimation: 1s infinite spin2;\n\t\tleft: 0.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(3) {\n\t\tbackground-color: #000;\n\t\tz-index: 1;\n\t\tanimation: 1s infinite spin2;\n\t\tleft: 1.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(4) {\n\t\tbackground-color: #666;\n\t\tz-index: 0;\n\t\tanimation: 1s infinite spin3;\n\t\tleft: 2.1rem;\n\t}\n\n\t@keyframes spin1 {\n\t\t0% {\n\t\t\ttransform: scale(0);\n\t\t}\n\t\t100% {\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n\t@keyframes spin2 {\n\t\t0% {\n\t\t\ttransform: translate(0, 0);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translate(1rem, 0);\n\t\t}\n\t}\n\t@keyframes spin3 {\n\t\t0% {\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t100% {\n\t\t\ttransform: scale(0);\n\t\t}\n\t} \n\t@media (prefers-reduced-motion) {\n\t\t.spin.dot > span:first-child,\n\t\t.spin.dot > span:nth-child(2),\n\t\t.spin.dot > span:nth-child(3),\n\t\t.spin.dot > span:nth-child(4) {\n\t\t\tanimation-duration: 2s;\n\t\t}\n\t}\n}\n\n@layer kol-component {\n\t.spin {\n\t\tdisplay: block;\n\t\tpadding: 0.125rem;\n\t\tposition: relative;\n\t}\n}";
@@ -32436,6 +32512,8 @@ class KolTabs {
   }; }
 }
 
+const cssResizeOptions = ['both', 'horizontal', 'vertical', 'none'];
+
 class TextareaController extends InputController {
   constructor(component, name, host) {
     super(component, name, host);
@@ -32479,7 +32557,7 @@ class TextareaController extends InputController {
     watchBoolean(this.component, '_readOnly', value);
   }
   validateResize(value) {
-    watchValidator(this.component, '_resize', (value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'), new Set('String {both, horizontal, vertical, none}'), value);
+    watchValidator(this.component, '_resize', (value) => typeof value === 'string' && cssResizeOptions.includes(value), new Set(`String {${cssResizeOptions.join(', ')}`), value);
   }
   validateRequired(value) {
     watchBoolean(this.component, '_required', value);
@@ -32524,7 +32602,7 @@ class KolTextarea {
   render() {
     const { ariaDescribedBy } = getRenderStates(this.state);
     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", { name: "expert" }) : 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: {
+    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 }, _accessKey: this.state._accessKey, _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", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", 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 }))))));
   }
@@ -32934,6 +33012,7 @@ class KolTooltip {
         }
       }, 250);
     };
+    this._accessKey = undefined;
     this._align = 'top';
     this._id = undefined;
     this._label = undefined;
@@ -32944,7 +33023,10 @@ class KolTooltip {
     };
   }
   render() {
-    return (hAsync(Host, null, this.state._label !== '' && (hAsync("div", { class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync("kol-span-wc", { class: "tooltip-area tooltip-content", id: this.state._id, _label: this.state._label })))));
+    return (hAsync(Host, null, this.state._label !== '' && (hAsync("div", { class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync("kol-span-wc", { class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
+  }
+  validateAccessKey(value) {
+    validateAccessKey(this, value);
   }
   validateAlign(value) {
     validateAlign(this, value);
@@ -32956,6 +33038,7 @@ class KolTooltip {
     validateLabel(this, value);
   }
   componentWillLoad() {
+    this.validateAccessKey(this._accessKey);
     this.validateAlign(this._align);
     this.validateId(this._id);
     this.validateLabel(this._label);
@@ -32987,6 +33070,7 @@ class KolTooltip {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "_accessKey": ["validateAccessKey"],
     "_align": ["validateAlign"],
     "_id": ["validateId"],
     "_label": ["validateLabel"]
@@ -32996,6 +33080,7 @@ class KolTooltip {
     "$flags$": 0,
     "$tagName$": "kol-tooltip-wc",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_align": [1],
       "_id": [1],
       "_label": [1],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "2.0.0-rc.4",
+  "version": "2.0.0-rc.6",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": "https://github.com/public-ui/kolibri",
@@ -42,11 +42,11 @@
     "hydrate"
   ],
   "devDependencies": {
-    "@public-ui/components": "2.0.0-rc.4",
+    "@public-ui/components": "2.0.0-rc.6",
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.0.0-rc.4"
+    "@public-ui/components": "2.0.0-rc.6"
   },
   "sideEffects": false,
   "type": "commonjs",