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

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.5
 		`, {
       forceLog: true,
     });
@@ -11266,6 +11266,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 +11291,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 +11301,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 +11378,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 +11397,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 +11407,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"],
@@ -11824,16 +11828,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 +11873,7 @@ class KolButtonWc {
         }
       }
     };
+    this._accessKey = undefined;
     this._ariaControls = undefined;
     this._ariaExpanded = undefined;
     this._ariaSelected = undefined;
@@ -11892,6 +11901,9 @@ class KolButtonWc {
     };
     this.controller = new AssociatedInputController(this, 'button', this.host);
   }
+  validateAccessKey(value) {
+    validateAccessKey(this, value);
+  }
   validateAriaControls(value) {
     validateAriaControls(this, value);
   }
@@ -11951,6 +11963,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 +11985,7 @@ class KolButtonWc {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "_accessKey": ["validateAccessKey"],
     "_ariaControls": ["validateAriaControls"],
     "_ariaExpanded": ["validateAriaExpanded"],
     "_ariaSelected": ["validateAriaSelected"],
@@ -11995,6 +12009,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"],
@@ -12574,6 +12589,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 +12634,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],
@@ -13032,6 +13049,22 @@ 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("span", null,
+    first,
+    rest.length ? hAsync("u", null, accessKey) : null,
+    rest.length ? 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 +13076,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("span", 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);
@@ -13329,7 +13362,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("span", 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);
@@ -13646,7 +13679,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("span", 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);
@@ -14011,7 +14044,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("span", 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 +14306,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("span", 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 +14584,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("span", 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 +14805,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("span", 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 +15021,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 +15252,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("span", 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 +15470,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("span", 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 +15810,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 +15825,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 +15835,7 @@ class KolLink {
     "$flags$": 41,
     "$tagName$": "kol-link",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
@@ -15829,6 +15864,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 +15885,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 +15895,7 @@ class KolLinkButton {
     "$flags$": 41,
     "$tagName$": "kol-link-button",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_customClass": [1, "_custom-class"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
@@ -16061,6 +16098,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 +16119,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 +16167,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 +16186,7 @@ class KolLinkWc {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "_accessKey": ["validateAccessKey"],
     "_download": ["validateDownload"],
     "_hideLabel": ["validateHideLabel"],
     "_href": ["validateHref"],
@@ -16161,6 +16204,7 @@ class KolLinkWc {
     "$flags$": 4,
     "$tagName$": "kol-link-wc",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_download": [1],
       "_hideLabel": [4, "_hide-label"],
       "_href": [1],
@@ -16527,7 +16571,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 +16609,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) } }));
@@ -18859,7 +18903,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("span", 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 +19151,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 +19166,7 @@ class KolSpan {
     "$flags$": 41,
     "$tagName$": "kol-span",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_hideLabel": [4, "_hide-label"],
       "_icons": [1],
       "_label": [1]
@@ -31348,6 +31394,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 +31411,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 +31431,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 +31448,7 @@ class KolSpanWc {
     "$flags$": 4,
     "$tagName$": "kol-span-wc",
     "$members$": {
+      "_accessKey": [1, "_access-key"],
       "_allowMarkdown": [4, "_allow-markdown"],
       "_hideLabel": [4, "_hide-label"],
       "_icons": [1],
@@ -32524,7 +32577,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("span", 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 +32987,7 @@ class KolTooltip {
         }
       }, 250);
     };
+    this._accessKey = undefined;
     this._align = 'top';
     this._id = undefined;
     this._label = undefined;
@@ -32944,7 +32998,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 +33013,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 +33045,7 @@ class KolTooltip {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "_accessKey": ["validateAccessKey"],
     "_align": ["validateAlign"],
     "_id": ["validateId"],
     "_label": ["validateLabel"]
@@ -32996,6 +33055,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.5",
   "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.5",
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.0.0-rc.4"
+    "@public-ui/components": "2.0.0-rc.5"
   },
   "sideEffects": false,
   "type": "commonjs",