@public-ui/hydrate 2.1.4-alpha.1 → 2.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +312 -147
  2. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -4441,7 +4441,7 @@ class KolAccordion {
4441
4441
  registerInstance(this, hostRef);
4442
4442
  this.nonce = nonce();
4443
4443
  this.catchRef = (ref) => {
4444
- propagateFocus(this.host, ref);
4444
+ this.buttonWcRef = ref;
4445
4445
  };
4446
4446
  this.onClick = (event) => {
4447
4447
  this._open = !this._open;
@@ -4462,12 +4462,19 @@ class KolAccordion {
4462
4462
  _level: 1,
4463
4463
  };
4464
4464
  }
4465
+ async focus() {
4466
+ await this.kolFocus();
4467
+ }
4468
+ async kolFocus() {
4469
+ var _a;
4470
+ await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
4471
+ }
4465
4472
  render() {
4466
- return (hAsync(Host, { key: 'f1672f2cf8b9aa85b1f63ab68d00300b74638dd8', class: "kol-accordion" }, hAsync("div", { key: 'e80bb532a6f148e9608b9d5b4eca382cf8c01e8d', class: {
4473
+ return (hAsync(Host, { key: 'b2662d09c5d6ee4ba7b8775fad1abedb51d55483', class: "kol-accordion" }, hAsync("div", { key: 'c41fb13d7a5b699031edebf8aa88fe2f3e022346', class: {
4467
4474
  accordion: true,
4468
4475
  disabled: this.state._disabled === true,
4469
4476
  open: this.state._open === true,
4470
- } }, hAsync(KolHeadingWcTag, { key: 'e221fc0ccd86504a3e491a8e32c55da5fa76a365', _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync(KolButtonWcTag, { key: 'f65af86aab71ff029bba8108495477d7be05c2f3', class: "accordion-button", ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _disabled: this.state._disabled, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { key: '5435d015a21707724c7180dbb96e7a0af30f9d42', class: "wrapper" }, hAsync("div", { key: '5a9958a91c49d8b807627f7029ad975e52c6e1ea', class: "animation-wrapper" }, hAsync("div", { key: '367a024dca25373063df9ec0e679161ad26bffb8', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { key: 'dfbbf47f20297d5f5052d7df8f74bd659ce054fd' })))))));
4477
+ } }, hAsync(KolHeadingWcTag, { key: '10d86a82b4bc84278174a822edc508dd7edc3158', _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync(KolButtonWcTag, { key: '365d163277cbdddfe6e34203e31a3d0ae9a1f602', class: "accordion-button", ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _disabled: this.state._disabled, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { key: '6fca8bd22147df2e556d9cfefb09bb60c705de9a', class: "wrapper" }, hAsync("div", { key: '8fa8ba68f8c2ea8911bdb7c040c4d8bd44469fbf', class: "animation-wrapper" }, hAsync("div", { key: 'dd61af68e1eaeece1f8b5595fae6b97418563cac', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { key: '6249f6a0ccfd5ed101297d94a52a5311cc4385cf' })))))));
4471
4478
  }
4472
4479
  validateDisabled(value) {
4473
4480
  validateDisabled(this, value);
@@ -4495,7 +4502,6 @@ class KolAccordion {
4495
4502
  this.validateOn(this._on);
4496
4503
  this.validateOpen(this._open);
4497
4504
  }
4498
- get host() { return getElement(this); }
4499
4505
  static get watchers() { return {
4500
4506
  "_disabled": ["validateDisabled"],
4501
4507
  "_label": ["validateLabel"],
@@ -4515,7 +4521,9 @@ class KolAccordion {
4515
4521
  "_level": [2],
4516
4522
  "_on": [16],
4517
4523
  "_open": [1540],
4518
- "state": [32]
4524
+ "state": [32],
4525
+ "focus": [64],
4526
+ "kolFocus": [64]
4519
4527
  },
4520
4528
  "$listeners$": undefined,
4521
4529
  "$lazyBundleId$": "-",
@@ -5110,14 +5118,14 @@ class KolBreadcrumb {
5110
5118
  }; }
5111
5119
  }
5112
5120
 
5113
- const defaultStyleCss$I = "@charset \"UTF-8\";\n\n@layer kol-global {\n .sc-kol-button-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-button-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-button-default-h {\n font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n }\n :is(a, button) {\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n :is(a, button)::before {\n \n content: \"​\";\n }\n \n :is(a, button) > .kol-span-wc {\n margin: auto;\n width: 100%;\n }\n}\n/*!@**/*.sc-kol-button-default {\n color: hotpink !important;\n}";
5121
+ const defaultStyleCss$I = "@charset \"UTF-8\";\n\n@layer kol-global {\n .sc-kol-button-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-button-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-button-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-button-default-h {\n font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n display: inline-block;\n }\n :is(a, button) {\n display: inline-flex;\n place-items: center;\n text-align: center;\n text-decoration-line: none;\n }\n :is(a, button)::before {\n \n content: \"​\";\n }\n \n :is(a, button) > .kol-span-wc {\n margin: auto;\n width: 100%;\n }\n}";
5114
5122
  var KolButtonDefaultStyle0 = defaultStyleCss$I;
5115
5123
 
5116
5124
  class KolButton {
5117
5125
  constructor(hostRef) {
5118
5126
  registerInstance(this, hostRef);
5119
5127
  this.catchRef = (ref) => {
5120
- propagateFocus(this.host, ref);
5128
+ this.buttonWcRef = ref;
5121
5129
  };
5122
5130
  this._accessKey = undefined;
5123
5131
  this._ariaControls = undefined;
@@ -5142,14 +5150,20 @@ class KolButton {
5142
5150
  async getValue() {
5143
5151
  return this._value;
5144
5152
  }
5153
+ async focus() {
5154
+ await this.kolFocus();
5155
+ }
5156
+ async kolFocus() {
5157
+ var _a;
5158
+ await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
5159
+ }
5145
5160
  render() {
5146
- return (hAsync(Host, { key: 'f25b58d924abdc5215b2ec354a57427bed43b001', class: "kol-button" }, hAsync(KolButtonWcTag, { key: 'e9afcf44b454f0a2c22bc1346fe583f697621efb', ref: this.catchRef, class: {
5161
+ return (hAsync(Host, { key: '313cc4012293660ff51ed3c3791403b946cea107', class: "kol-button" }, hAsync(KolButtonWcTag, { key: '119bee20af9e0a5b486f491d73678b5f66b7b7b3', ref: this.catchRef, class: {
5147
5162
  button: true,
5148
5163
  [this._variant]: this._variant !== 'custom',
5149
5164
  [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
5150
- }, _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", { key: '5b515b5587a2c125450f6b11952ab776bbc41a62', name: "expert", slot: "expert" }))));
5165
+ }, _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", { key: 'e2ddd86fb86f7abb60f5501c593cd18eaf1f8177', name: "expert", slot: "expert" }))));
5151
5166
  }
5152
- get host() { return getElement(this); }
5153
5167
  static get style() { return {
5154
5168
  default: KolButtonDefaultStyle0
5155
5169
  }; }
@@ -5176,7 +5190,9 @@ class KolButton {
5176
5190
  "_type": [1],
5177
5191
  "_value": [8],
5178
5192
  "_variant": [1],
5179
- "getValue": [64]
5193
+ "getValue": [64],
5194
+ "focus": [64],
5195
+ "kolFocus": [64]
5180
5196
  },
5181
5197
  "$listeners$": undefined,
5182
5198
  "$lazyBundleId$": "-",
@@ -5234,7 +5250,7 @@ class KolButtonLink {
5234
5250
  constructor(hostRef) {
5235
5251
  registerInstance(this, hostRef);
5236
5252
  this.catchRef = (ref) => {
5237
- propagateFocus(this.host, ref);
5253
+ this.buttonWcRef = ref;
5238
5254
  };
5239
5255
  this._accessKey = undefined;
5240
5256
  this._ariaControls = undefined;
@@ -5257,10 +5273,16 @@ class KolButtonLink {
5257
5273
  async getValue() {
5258
5274
  return this._value;
5259
5275
  }
5276
+ async focus() {
5277
+ await this.kolFocus();
5278
+ }
5279
+ async kolFocus() {
5280
+ var _a;
5281
+ await ((_a = this.buttonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
5282
+ }
5260
5283
  render() {
5261
- return (hAsync(Host, { key: 'bcca14709dca36d36884f1bda80d249ef151cf03', class: "kol-button-link" }, hAsync(KolButtonWcTag, { key: '1601a8be9c9c8c85cb776f95aa3981ccc388d978', 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", { key: 'dd476ba7cf6a6d3b08553cc7490ee51d4f08fff0', name: "expert", slot: "expert" }))));
5284
+ return (hAsync(Host, { key: '925b960759838064aebb5519d338b0833f4c9b24', class: "kol-button-link" }, hAsync(KolButtonWcTag, { key: '2eb980bbb032ad55772f90bdfba9f94d2f8d1b73', 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", { key: '52a25c7c8be71f8286313851b3ecdaa404814557', name: "expert", slot: "expert" }))));
5262
5285
  }
5263
- get host() { return getElement(this); }
5264
5286
  static get style() { return {
5265
5287
  default: KolButtonLinkDefaultStyle0
5266
5288
  }; }
@@ -5285,7 +5307,9 @@ class KolButtonLink {
5285
5307
  "_tooltipAlign": [1, "_tooltip-align"],
5286
5308
  "_type": [1],
5287
5309
  "_value": [8],
5288
- "getValue": [64]
5310
+ "getValue": [64],
5311
+ "focus": [64],
5312
+ "kolFocus": [64]
5289
5313
  },
5290
5314
  "$listeners$": undefined,
5291
5315
  "$lazyBundleId$": "-",
@@ -5559,34 +5583,37 @@ class AssociatedInputController {
5559
5583
  }
5560
5584
 
5561
5585
  class KolButtonWc {
5586
+ async kolFocus() {
5587
+ var _a;
5588
+ (_a = this.buttonRef) === null || _a === void 0 ? void 0 : _a.focus();
5589
+ }
5562
5590
  render() {
5563
5591
  const hasExpertSlot = showExpertSlot(this.state._label);
5564
- return (hAsync(Host, { key: 'c0d16e55ccda6586451460ed73035afc5094a20c', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '6ee3c6aa4c7eb2870b69369ae303b344f9243615', 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: {
5592
+ return (hAsync(Host, { key: '72f9865e9a27e0f31ff94af66f69ab31adc22dd9', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '88b2d8ed077934acfb1707a7e0c71fc9af4789e1', 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: {
5565
5593
  button: true,
5566
5594
  disabled: this.state._disabled === true,
5567
5595
  [this.state._variant]: this.state._variant !== 'custom',
5568
5596
  [this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
5569
5597
  'hide-label': this.state._hideLabel === true,
5570
- }, 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(KolSpanWcTag, { key: '89e898b52482ab8f2b991ee630d3c01eba2c5673', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'c7f11890216223942c6adea500e5904409877564', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: '31d7ab91f54a8046442ffdb435f55cb4681d1b32', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this._accessKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
5598
+ }, 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(KolSpanWcTag, { key: '425a6e12a5197db406790410cf382bdf6f3df274', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'a70bb86e9824393e81aaddd59fa1fe6f0ef180e3', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: '6f8bc766511dd57a8b9189b1b083e12f43262a32', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this._accessKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
5571
5599
  }
5572
5600
  constructor(hostRef) {
5573
5601
  registerInstance(this, hostRef);
5574
5602
  this.catchRef = (ref) => {
5575
- this.ref = ref;
5576
- propagateFocus(this.host, this.ref);
5603
+ this.buttonRef = ref;
5577
5604
  };
5578
5605
  this.onClick = (event) => {
5579
5606
  var _a, _b;
5580
5607
  if (this.state._type === 'submit') {
5581
5608
  propagateSubmitEventToForm({
5582
5609
  form: this.host,
5583
- ref: this.ref,
5610
+ ref: this.buttonRef,
5584
5611
  });
5585
5612
  }
5586
5613
  else if (this.state._type === 'reset') {
5587
5614
  propagateResetEventToForm({
5588
5615
  form: this.host,
5589
- ref: this.ref,
5616
+ ref: this.buttonRef,
5590
5617
  });
5591
5618
  }
5592
5619
  else {
@@ -5594,7 +5621,7 @@ class KolButtonWc {
5594
5621
  tryToDispatchKoliBriEvent('click', this.host, this.state._value);
5595
5622
  this.controller.setFormAssociatedValue(this.state._value);
5596
5623
  if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
5597
- setEventTarget(event, this.ref);
5624
+ setEventTarget(event, this.buttonRef);
5598
5625
  (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onClick(event, this.state._value);
5599
5626
  }
5600
5627
  }
@@ -5753,7 +5780,8 @@ class KolButtonWc {
5753
5780
  "_type": [1],
5754
5781
  "_value": [8],
5755
5782
  "_variant": [1],
5756
- "state": [32]
5783
+ "state": [32],
5784
+ "kolFocus": [64]
5757
5785
  },
5758
5786
  "$listeners$": undefined,
5759
5787
  "$lazyBundleId$": "-",
@@ -6136,19 +6164,22 @@ var KolComboboxDefaultStyle0 = defaultStyleCss$E;
6136
6164
 
6137
6165
  class KolCombobox {
6138
6166
  async getValue() {
6139
- return this._value;
6167
+ return this.state._value;
6140
6168
  }
6141
6169
  selectOption(event, option) {
6170
+ var _a;
6142
6171
  this.controller.onFacade.onInput(event, true, option);
6143
6172
  this.controller.onFacade.onChange(event, option);
6144
6173
  this.controller.setFormAssociatedValue(option);
6145
6174
  this.state._value = option;
6175
+ (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus();
6146
6176
  }
6147
6177
  onInput(event) {
6148
6178
  const target = event.target;
6149
- this._value = target.value;
6179
+ this.state._value = target.value;
6150
6180
  this.controller.onFacade.onInput(event);
6151
6181
  this.setFilteredSuggestionsByQuery(target.value);
6182
+ this._focusedOptionIndex = -1;
6152
6183
  }
6153
6184
  handleKeyDownDropdown(event) {
6154
6185
  if (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {
@@ -6199,7 +6230,7 @@ class KolCombobox {
6199
6230
  render() {
6200
6231
  const hasExpertSlot = showExpertSlot(this.state._label);
6201
6232
  const { ariaDescribedBy } = getRenderStates(this.state);
6202
- return (hAsync(Host, { key: '6ec722d9e87bf898fb08ec7d1d41b87726d5906d', class: "kol-combobox" }, hAsync("div", { key: '469969bc4d8c1b90bebf05439d6fb1b3979cf31d', class: `combobox ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputWcTag, { key: '26f31df5cb2e7904a0b8210aecf705af57547cb4', _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _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(); }, role: `presentation` }, hAsync("span", { key: '64b9e44d46c9a8907ee3b6fd7be928f02253766f', 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", { key: 'f57ea642aca3caf12523a190d439f3fd60996d4c', slot: "input" }, hAsync("div", { key: '9201b3aeb83d656da51d525e81698f3679c61267', class: "combobox__group" }, hAsync("input", Object.assign({ key: '8a054f8e64e5a0573d4bda19a2fe6b201f7e2dec', class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, 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, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onClick: this.toggleListbox.bind(this), onChange: this.onChange.bind(this), placeholder: this.state._placeholder })), hAsync("span", { key: '2388a17109c311a0bca3c08ba12928b794f0eb7c', class: { combobox__icon: true } }, hAsync(KolIconTag, { key: 'c1161b16e198e7c4e16d267066affd78a5c7ac67', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown'), onClick: this.toggleListbox.bind(this) }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '43a849ac87f34878ded4b37e21f9836d56f53b8f', role: "listbox", "aria-label": "", class: { combobox__listbox: true }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
6233
+ return (hAsync(Host, { key: '3b6ed7846711e0f090b07b9c8d974c27e3015d6d', class: "kol-combobox" }, hAsync("div", { key: '6ded0f747452a8c066fee27194719456ab134fd6', class: `combobox ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputWcTag, { key: 'cca6b8e1a21ac3192b42dad594b23268a79b51b7', _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '5a58f8567fb84998545b011a2f9683705a26f946', 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", { key: '6531318b53534dbc7914030aab7bea88cb604fae', slot: "input" }, hAsync("div", { key: '3107f4cf1267d5184f03a9e8c085c885d086c42e', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'ebe2e9259edd9aa94e155c4e31e99163ac5f7b5d', ref: this.catchRef, class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, 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, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onClick: this.toggleListbox.bind(this), onChange: this.onChange.bind(this), placeholder: this.state._placeholder })), hAsync("span", { key: 'd5e96698996de3a055e52ca678264df8383eb46e', class: { combobox__icon: true } }, hAsync(KolIconTag, { key: 'a505c414eeb12d3cd90d8533231cd76c5006e142', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown'), onClick: this.toggleListbox.bind(this) }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '4ef259e659641ac8bd0d0ae93cd1b1e1743383aa', role: "listbox", "aria-label": "", class: { combobox__listbox: true }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
6203
6234
  this._filteredSuggestions.length > 0 &&
6204
6235
  this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
6205
6236
  if (el)
@@ -6221,9 +6252,13 @@ class KolCombobox {
6221
6252
  }
6222
6253
  handleKeyDown(event) {
6223
6254
  const handleEvent = (isOpen, callback) => {
6255
+ var _a;
6224
6256
  event.preventDefault();
6225
6257
  if (isOpen !== undefined) {
6226
6258
  this._isOpen = isOpen;
6259
+ if (!isOpen) {
6260
+ (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus();
6261
+ }
6227
6262
  }
6228
6263
  callback === null || callback === void 0 ? void 0 : callback();
6229
6264
  };
@@ -6265,11 +6300,11 @@ class KolCombobox {
6265
6300
  break;
6266
6301
  }
6267
6302
  case 'PageUp': {
6268
- handleEvent(undefined, () => this._isOpen && this.moveFocus(10));
6303
+ handleEvent(undefined, () => this._isOpen && this.moveFocus(-10));
6269
6304
  break;
6270
6305
  }
6271
6306
  case 'PageDown': {
6272
- handleEvent(undefined, () => this._isOpen && this.moveFocus(-10));
6307
+ handleEvent(undefined, () => this._isOpen && this.moveFocus(10));
6273
6308
  break;
6274
6309
  }
6275
6310
  }
@@ -6290,11 +6325,16 @@ class KolCombobox {
6290
6325
  else {
6291
6326
  this._isOpen = !this._isOpen;
6292
6327
  if (this._isOpen && Array.isArray(this._filteredSuggestions) && this._filteredSuggestions.length > 0) {
6293
- const selectedIndex = this._filteredSuggestions.findIndex((option) => option === this._value);
6294
- this.focusOption(selectedIndex >= 0 ? selectedIndex : 0);
6328
+ const selectedIndex = this._filteredSuggestions.findIndex((option) => option === this.state._value);
6329
+ this._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : 0;
6330
+ this.focusOption(this._focusedOptionIndex);
6295
6331
  }
6296
6332
  }
6297
6333
  };
6334
+ this.catchRef = (ref) => {
6335
+ this.ref = ref;
6336
+ propagateFocus(this.host, this.ref);
6337
+ };
6298
6338
  this._isOpen = false;
6299
6339
  this._filteredSuggestions = undefined;
6300
6340
  this._accessKey = undefined;
@@ -6541,7 +6581,6 @@ class KolDetails {
6541
6581
  };
6542
6582
  this.catchSummary = (ref) => {
6543
6583
  this.summaryElement = ref;
6544
- propagateFocus(this.host, this.summaryElement);
6545
6584
  };
6546
6585
  this.preventToggleIfDisabled = (event) => {
6547
6586
  if (this.state._disabled === true) {
@@ -6571,11 +6610,18 @@ class KolDetails {
6571
6610
  _on: {},
6572
6611
  };
6573
6612
  }
6613
+ async focus() {
6614
+ await this.kolFocus();
6615
+ }
6616
+ async kolFocus() {
6617
+ var _a;
6618
+ (_a = this.summaryElement) === null || _a === void 0 ? void 0 : _a.focus();
6619
+ }
6574
6620
  render() {
6575
- return (hAsync(Host, { key: '4ad8208280a549ec10c547b20ddb003e04e68f01', class: "kol-details" }, hAsync("details", { key: '229ce17a1772bed26309a249a4326152edbe4e6e', ref: this.catchDetails, class: {
6621
+ return (hAsync(Host, { key: 'c81f22ea30774221c48f71dba31670c1a227ff05', class: "kol-details" }, hAsync("details", { key: '1f638cd9c47d989195b15708096a9c2652a3b97a', ref: this.catchDetails, class: {
6576
6622
  disabled: this.state._disabled === true,
6577
6623
  open: this.state._open === true,
6578
- }, onToggle: this.handleToggle }, hAsync("summary", { key: '727bb07a088a3138ff4fc29ee6fe43bcf9543379', ref: this.catchSummary, "aria-disabled": this.state._disabled ? 'true' : undefined, onClick: this.preventToggleIfDisabled, onKeyPress: this.preventToggleIfDisabled, tabIndex: this.state._disabled ? -1 : undefined }, hAsync(KolIconTag, { key: '5ecf957e42408222a4fbd78c2a9974c6c6880bc9', _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", { key: '2efa00fd37325648edd0c430db88a1d6f73d270c' }, this.state._label)), hAsync("div", { key: '1d527e8caeb3c9458ecde81c4c779c505ed19dc4', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync(KolIndentedTextTag, { key: '6f57d85524db46b0a381e535b7e280ca92483ce7' }, hAsync("slot", { key: '518dd2d74ae80a0de06efcbd1097aa8e72de5db1' }))))));
6624
+ }, onToggle: this.handleToggle }, hAsync("summary", { key: 'b78004a89667175bf308f0a239780c15b39d313c', ref: this.catchSummary, "aria-disabled": this.state._disabled ? 'true' : undefined, onClick: this.preventToggleIfDisabled, onKeyPress: this.preventToggleIfDisabled, tabIndex: this.state._disabled ? -1 : undefined }, hAsync(KolIconTag, { key: '69310b844d6f1b5feba60fc77aec6b4b3ba3ed3f', _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", { key: 'b2cfadced810939b201c79a31051a854a276375a' }, this.state._label)), hAsync("div", { key: '3f237b2a06e1f72f11879d3d96c3557efb14810c', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync(KolIndentedTextTag, { key: '85386e4ed2bd9566df2c2cbea897fc67985b0d3f' }, hAsync("slot", { key: '06ae87dccb0fcc5833d28d56887a7f5eefb82211' }))))));
6579
6625
  }
6580
6626
  validateDisabled(value) {
6581
6627
  validateDisabled(this, value);
@@ -6625,7 +6671,9 @@ class KolDetails {
6625
6671
  "_label": [1],
6626
6672
  "_on": [16],
6627
6673
  "_open": [1540],
6628
- "state": [32]
6674
+ "state": [32],
6675
+ "focus": [64],
6676
+ "kolFocus": [64]
6629
6677
  },
6630
6678
  "$listeners$": undefined,
6631
6679
  "$lazyBundleId$": "-",
@@ -7255,21 +7303,28 @@ class KolInputCheckbox {
7255
7303
  async getValue() {
7256
7304
  return this.getModelValue();
7257
7305
  }
7306
+ async focus() {
7307
+ await this.kolFocus();
7308
+ }
7309
+ async kolFocus() {
7310
+ var _a;
7311
+ (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
7312
+ }
7258
7313
  render() {
7259
7314
  const { ariaDescribedBy } = getRenderStates(this.state);
7260
7315
  const hasExpertSlot = showExpertSlot(this.state._label);
7261
- return (hAsync(Host, { key: 'c6e77b07be323b6960575e6fbb3158f2eacbe300', class: "kol-input-checkbox" }, hAsync(KolInputWcTag, { key: 'dea203766cd16d41f80421663c0ec2d71bf2029d', class: {
7316
+ return (hAsync(Host, { key: 'dc370837af55af47703a694a130c8741c33486cb', class: "kol-input-checkbox" }, hAsync(KolInputWcTag, { key: '3ca714b19dac1f42d3e64c8476b128b972cfdca1', class: {
7262
7317
  checkbox: true,
7263
7318
  [this.state._variant]: true,
7264
7319
  'hide-label': !!this.state._hideLabel,
7265
7320
  checked: this.state._checked,
7266
7321
  indeterminate: this.state._indeterminate,
7267
- }, "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _msg: this.state._msg, _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", { key: '2020579556bed07bde3673b1276dce6cc460e2a5', 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("label", { key: '78634c64c17aa360bf778c5b1e1a1e3fca09510d', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '076dc9636b5cbc9b0565dc38872f1c9950497bd5', class: "icon", _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ key: '5266c704d458674d356b67451b16d742c085ed6a', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, 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, { onInput: this.onInput, onChange: this.onChange, onClick: undefined }))))));
7322
+ }, "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _msg: this.state._msg, _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", { key: '2bff685d8c0317cacc948f0c805fef10fb653636', 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("label", { key: '635658a3307d58a6070e1111897b8f0b283edb89', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '860eaaaa13aadbb5611270163afebe8cbb2a6781', class: "icon", _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ key: 'a5490285924abde52bfb7270b05d0cff4e4cbcbd', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, 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, { onInput: this.onInput, onChange: this.onChange, onClick: undefined }))))));
7268
7323
  }
7269
7324
  constructor(hostRef) {
7270
7325
  registerInstance(this, hostRef);
7271
7326
  this.catchRef = (ref) => {
7272
- propagateFocus(this.host, ref);
7327
+ this.inputRef = ref;
7273
7328
  };
7274
7329
  this.onInput = (event) => {
7275
7330
  var _a;
@@ -7450,7 +7505,9 @@ class KolInputCheckbox {
7450
7505
  "_value": [8],
7451
7506
  "_variant": [1],
7452
7507
  "state": [32],
7453
- "getValue": [64]
7508
+ "getValue": [64],
7509
+ "focus": [64],
7510
+ "kolFocus": [64]
7454
7511
  },
7455
7512
  "$listeners$": undefined,
7456
7513
  "$lazyBundleId$": "-",
@@ -7487,22 +7544,28 @@ var KolInputColorDefaultStyle0 = defaultStyleCss$w;
7487
7544
  class KolInputColor {
7488
7545
  async getValue() {
7489
7546
  var _a;
7490
- return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
7547
+ return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
7548
+ }
7549
+ async focus() {
7550
+ await this.kolFocus();
7551
+ }
7552
+ async kolFocus() {
7553
+ var _a;
7554
+ (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
7491
7555
  }
7492
7556
  render() {
7493
7557
  const { ariaDescribedBy } = getRenderStates(this.state);
7494
7558
  const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
7495
7559
  const hasExpertSlot = showExpertSlot(this.state._label);
7496
- return (hAsync(Host, { key: '12278adc12bc82bcf4646106d8783af67c840524', class: "kol-input-color" }, hAsync(KolInputWcTag, { key: 'b58479cd2cc206cb9da92c4c74eacdd971c70683', class: {
7560
+ return (hAsync(Host, { key: '0601ac4b0fdf10104660b9aa870d2d5a37eb4736', class: "kol-input-color" }, hAsync(KolInputWcTag, { key: 'd3978aa4d5259d0a038eb447125dcc0ed0ce36a6', class: {
7497
7561
  color: true,
7498
7562
  'hide-label': !!this.state._hideLabel,
7499
- }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _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(); }, role: `presentation` }, hAsync("span", { key: '1d221113837a1596de6e62d1f1426a3e05fd5c53', 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", { key: 'caeaa254044eb1a2e2413eaec95b0328daceff5b', slot: "input" }, hAsync("input", Object.assign({ key: '44a355b06a33f9066a662e9db5118d96cb72d09b', 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))))));
7563
+ }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _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.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '3cbb005bec96cc06d5585f1003132876742cac8d', 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", { key: '846984d2e32be62a683f385f9a1bece68c5433a9', slot: "input" }, hAsync("input", Object.assign({ key: 'd104710211564ef526169b0e8759f72fc7c3bec5', 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))))));
7500
7564
  }
7501
7565
  constructor(hostRef) {
7502
7566
  registerInstance(this, hostRef);
7503
7567
  this.catchRef = (ref) => {
7504
- this.ref = ref;
7505
- propagateFocus(this.host, this.ref);
7568
+ this.inputRef = ref;
7506
7569
  };
7507
7570
  this._accessKey = undefined;
7508
7571
  this._alert = true;
@@ -7651,7 +7714,9 @@ class KolInputColor {
7651
7714
  "_touched": [1540],
7652
7715
  "_value": [1],
7653
7716
  "state": [32],
7654
- "getValue": [64]
7717
+ "getValue": [64],
7718
+ "focus": [64],
7719
+ "kolFocus": [64]
7655
7720
  },
7656
7721
  "$listeners$": undefined,
7657
7722
  "$lazyBundleId$": "-",
@@ -7799,28 +7864,34 @@ var KolInputDateDefaultStyle0 = defaultStyleCss$v;
7799
7864
  class KolInputDate {
7800
7865
  async getValue() {
7801
7866
  var _a;
7802
- return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
7867
+ return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
7868
+ }
7869
+ async focus() {
7870
+ await this.kolFocus();
7871
+ }
7872
+ async kolFocus() {
7873
+ var _a;
7874
+ (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
7803
7875
  }
7804
7876
  render() {
7805
7877
  const { ariaDescribedBy } = getRenderStates(this.state);
7806
7878
  const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
7807
7879
  const hasExpertSlot = showExpertSlot(this.state._label);
7808
- return (hAsync(Host, { key: '72050460b3ee98b5dbf0428e53cc4efbde40bd4f', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: '2cae7d74a5099ce2be3df73e8b4e8d0ddbedb0a9', class: {
7880
+ return (hAsync(Host, { key: 'daab68fe9c408f419920ae17ceacbf4736e664f6', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: '91d0b22db597525310d4005382b6f38230dcf6cf', class: {
7809
7881
  [this.state._type]: true,
7810
7882
  'hide-label': !!this.state._hideLabel,
7811
- }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _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", { key: '2b7702c7797d2ea10765ae939e73045ee7af55c7', 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", { key: '9bc4be80064e8421beb5ce285a7e1acd598ad131', slot: "input" }, hAsync("input", Object.assign({ key: '600631feb425d57a2eae743c696ef2a394246c30', 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, { onKeyDown: this.onKeyDown }))))));
7883
+ }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _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", { key: '20cd23c9007a82222dac1cb1bae9e145c296776a', 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", { key: '13ac81690d7da38f475c2b168127787971753355', slot: "input" }, hAsync("input", Object.assign({ key: '8712bdce4139bb032ee75e199a1a27327602bd88', 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, { onKeyDown: this.onKeyDown }))))));
7812
7884
  }
7813
7885
  constructor(hostRef) {
7814
7886
  registerInstance(this, hostRef);
7815
7887
  this.catchRef = (ref) => {
7816
- this.ref = ref;
7817
- propagateFocus(this.host, this.ref);
7888
+ this.inputRef = ref;
7818
7889
  };
7819
7890
  this.onKeyDown = (event) => {
7820
7891
  if (event.code === 'Enter' || event.code === 'NumpadEnter') {
7821
7892
  propagateSubmitEventToForm({
7822
7893
  form: this.host,
7823
- ref: this.ref,
7894
+ ref: this.inputRef,
7824
7895
  });
7825
7896
  }
7826
7897
  };
@@ -7942,8 +8013,8 @@ class KolInputDate {
7942
8013
  deprecatedHint('Date type will be removed in v3. Use `Iso8601` instead.');
7943
8014
  }
7944
8015
  this.controller.validateValueEx(value, (v) => {
7945
- if (v === '' && this.ref) {
7946
- this.ref.value = '';
8016
+ if (v === '' && this.inputRef) {
8017
+ this.inputRef.value = '';
7947
8018
  }
7948
8019
  });
7949
8020
  }
@@ -8018,7 +8089,9 @@ class KolInputDate {
8018
8089
  "_type": [1],
8019
8090
  "_value": [1025],
8020
8091
  "state": [32],
8021
- "getValue": [64]
8092
+ "getValue": [64],
8093
+ "focus": [64],
8094
+ "kolFocus": [64]
8022
8095
  },
8023
8096
  "$listeners$": undefined,
8024
8097
  "$lazyBundleId$": "-",
@@ -8132,28 +8205,34 @@ var KolInputEmailDefaultStyle0 = defaultStyleCss$u;
8132
8205
  class KolInputEmail {
8133
8206
  async getValue() {
8134
8207
  var _a;
8135
- return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
8208
+ return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
8209
+ }
8210
+ async focus() {
8211
+ await this.kolFocus();
8212
+ }
8213
+ async kolFocus() {
8214
+ var _a;
8215
+ (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
8136
8216
  }
8137
8217
  render() {
8138
8218
  const { ariaDescribedBy } = getRenderStates(this.state);
8139
8219
  const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
8140
8220
  const hasExpertSlot = showExpertSlot(this.state._label);
8141
- return (hAsync(Host, { key: 'f60ec3462b131d7376943c3436695cc5f59929de', class: {
8221
+ return (hAsync(Host, { key: 'd4e3a5c2235fc4137588243b268c85bc5e7b51b2', class: {
8142
8222
  'kol-input-email': true,
8143
8223
  'has-value': this.state._hasValue,
8144
- } }, hAsync(KolInputWcTag, { key: '2819f8e7942706ef3eaa288d82f9c0e09ff340e1', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _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(); }, role: `presentation` }, hAsync("span", { key: 'e5e1918575ceb7331b3eba904418dbe77f236694', 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", { key: 'bb364ee95a539bcbf7645733943c80a9c9ac2917', slot: "input" }, hAsync("input", Object.assign({ key: '94d7e12786c8974d4e843a8cf10cbdd17b90b4eb', 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, { onKeyDown: this.onKeyDown, onInput: this.onInput }))))));
8224
+ } }, hAsync(KolInputWcTag, { key: '97c2a33930427a5327e952f2395e90f1baf6fee6', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _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.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'e9565f30fab66dcc9305563ad87d61cac7b7c4b8', 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", { key: '05509dbf1c0714c37dbe290b7f6aefe220a145a4', slot: "input" }, hAsync("input", Object.assign({ key: 'f6b839c5eda669a550bb88869e102998633b2941', 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, { onKeyDown: this.onKeyDown, onInput: this.onInput }))))));
8145
8225
  }
8146
8226
  constructor(hostRef) {
8147
8227
  registerInstance(this, hostRef);
8148
8228
  this.catchRef = (ref) => {
8149
- this.ref = ref;
8150
- propagateFocus(this.host, this.ref);
8229
+ this.inputRef = ref;
8151
8230
  };
8152
8231
  this.onKeyDown = (event) => {
8153
8232
  if (event.code === 'Enter' || event.code === 'NumpadEnter') {
8154
8233
  propagateSubmitEventToForm({
8155
8234
  form: this.host,
8156
- ref: this.ref,
8235
+ ref: this.inputRef,
8157
8236
  });
8158
8237
  }
8159
8238
  };
@@ -8354,7 +8433,9 @@ class KolInputEmail {
8354
8433
  "_touched": [1540],
8355
8434
  "_value": [1],
8356
8435
  "state": [32],
8357
- "getValue": [64]
8436
+ "getValue": [64],
8437
+ "focus": [64],
8438
+ "kolFocus": [64]
8358
8439
  },
8359
8440
  "$listeners$": undefined,
8360
8441
  "$lazyBundleId$": "-",
@@ -8395,32 +8476,38 @@ var KolInputFileDefaultStyle0 = defaultStyleCss$t;
8395
8476
  class KolInputFile {
8396
8477
  async getValue() {
8397
8478
  var _a;
8398
- return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.files;
8479
+ return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.files;
8480
+ }
8481
+ async focus() {
8482
+ await this.kolFocus();
8483
+ }
8484
+ async kolFocus() {
8485
+ var _a;
8486
+ (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
8399
8487
  }
8400
8488
  render() {
8401
8489
  const { ariaDescribedBy } = getRenderStates(this.state);
8402
8490
  const hasExpertSlot = showExpertSlot(this.state._label);
8403
- return (hAsync(Host, { key: '70527644af89e9894413ed9e6530725633dfb94f', class: "kol-input-file" }, hAsync(KolInputWcTag, { key: '1d4d28a8d35215d1f201bf1ce6e267e80af96a45', class: {
8491
+ return (hAsync(Host, { key: 'fa0f78010ec1df49894b271222ba045b5c573a95', class: "kol-input-file" }, hAsync(KolInputWcTag, { key: '154a0ec4b9cf82ee08df555b1a7525a87ace464f', class: {
8404
8492
  file: true,
8405
8493
  'hide-label': !!this.state._hideLabel,
8406
- }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _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(); }, role: `presentation` }, hAsync("span", { key: '5b94e7b33c625ff27046c09cb4991377735ee004', 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", { key: '94cb6517d3092ce9fc7af91f679a2ac4cfd67755', slot: "input" }, hAsync("input", Object.assign({ key: '44119e673f3cdd1121c905c339542b016214ede8', 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, onInput: this.onInput }))))));
8494
+ }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _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.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '2b748c9df894b193366c2cea888103ef332d63ee', 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", { key: '75d594fdcd6687fec4cbdaa0c73c47a22a8ed68c', slot: "input" }, hAsync("input", Object.assign({ key: '170d880e0d0647461c31853770fad9fa0b0931f0', 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, onInput: this.onInput }))))));
8407
8495
  }
8408
8496
  constructor(hostRef) {
8409
8497
  registerInstance(this, hostRef);
8410
8498
  this.catchRef = (ref) => {
8411
- this.ref = ref;
8412
- propagateFocus(this.host, this.ref);
8499
+ this.inputRef = ref;
8413
8500
  };
8414
8501
  this.onChange = (event) => {
8415
- if (this.ref instanceof HTMLInputElement && this.ref.type === 'file') {
8416
- const value = this.ref.files;
8502
+ if (this.inputRef instanceof HTMLInputElement && this.inputRef.type === 'file') {
8503
+ const value = this.inputRef.files;
8417
8504
  this.controller.onFacade.onChange(event, value);
8418
8505
  this.controller.setFormAssociatedValue(value);
8419
8506
  }
8420
8507
  };
8421
8508
  this.onInput = (event) => {
8422
- if (this.ref instanceof HTMLInputElement && this.ref.type === 'file') {
8423
- const value = this.ref.files;
8509
+ if (this.inputRef instanceof HTMLInputElement && this.inputRef.type === 'file') {
8510
+ const value = this.inputRef.files;
8424
8511
  this.controller.onFacade.onInput(event, false, value);
8425
8512
  }
8426
8513
  };
@@ -8575,7 +8662,9 @@ class KolInputFile {
8575
8662
  "_touched": [1540],
8576
8663
  "_value": [1],
8577
8664
  "state": [32],
8578
- "getValue": [64]
8665
+ "getValue": [64],
8666
+ "focus": [64],
8667
+ "kolFocus": [64]
8579
8668
  },
8580
8669
  "$listeners$": undefined,
8581
8670
  "$lazyBundleId$": "-",
@@ -8671,31 +8760,37 @@ var KolInputNumberDefaultStyle0 = defaultStyleCss$s;
8671
8760
  class KolInputNumber {
8672
8761
  async getValue() {
8673
8762
  var _a;
8674
- return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
8763
+ return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
8764
+ }
8765
+ async focus() {
8766
+ await this.kolFocus();
8767
+ }
8768
+ async kolFocus() {
8769
+ var _a;
8770
+ (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
8675
8771
  }
8676
8772
  render() {
8677
8773
  const { ariaDescribedBy } = getRenderStates(this.state);
8678
8774
  const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
8679
8775
  const hasExpertSlot = showExpertSlot(this.state._label);
8680
- return (hAsync(Host, { key: '7c942a16c6f0b9955a470e716b345054788dac88', class: {
8776
+ return (hAsync(Host, { key: '928e98acc94e293d83ccea1abd9ec50c5d4e9611', class: {
8681
8777
  'kol-input-number': true,
8682
8778
  'has-value': this.state._hasValue,
8683
- } }, hAsync(KolInputWcTag, { key: '49c04c405b6f4fda566fe1e95e0d733fefe001df', class: {
8779
+ } }, hAsync(KolInputWcTag, { key: '94fbd2ee29c9f9f496e4a78f34f1579cae0a5e00', class: {
8684
8780
  number: true,
8685
8781
  'hide-label': !!this.state._hideLabel,
8686
- }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _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", { key: 'd508a9a3f668a93fc5cbabfe952d7b584499026e', 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", { key: 'f70f34639c08ceb1a6302bf733ca4983236f60c4', slot: "input" }, hAsync("input", Object.assign({ key: '7d1c3578ca40fa71499021c5d56130cf48751240', 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, { onKeyDown: this.onKeyDown }))))));
8782
+ }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _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", { key: '3d47df9f65976fda204d73c224a1d1abe45f612f', 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", { key: '7193bdb324f427916f147c3b53c911bd6e30d3c9', slot: "input" }, hAsync("input", Object.assign({ key: '698465728000a66f8baba7e9a9b59b2a04279e1e', 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, { onKeyDown: this.onKeyDown }))))));
8687
8783
  }
8688
8784
  constructor(hostRef) {
8689
8785
  registerInstance(this, hostRef);
8690
8786
  this.catchRef = (ref) => {
8691
- this.ref = ref;
8692
- propagateFocus(this.host, this.ref);
8787
+ this.inputRef = ref;
8693
8788
  };
8694
8789
  this.onKeyDown = (event) => {
8695
8790
  if (event.code === 'Enter' || event.code === 'NumpadEnter') {
8696
8791
  propagateSubmitEventToForm({
8697
8792
  form: this.host,
8698
- ref: this.ref,
8793
+ ref: this.inputRef,
8699
8794
  });
8700
8795
  }
8701
8796
  };
@@ -8813,8 +8908,8 @@ class KolInputNumber {
8813
8908
  }
8814
8909
  validateValue(value) {
8815
8910
  this.controller.validateValueEx(value, (v) => {
8816
- if (v === '' && this.ref) {
8817
- this.ref.value = '';
8911
+ if (v === '' && this.inputRef) {
8912
+ this.inputRef.value = '';
8818
8913
  }
8819
8914
  });
8820
8915
  }
@@ -8889,7 +8984,9 @@ class KolInputNumber {
8889
8984
  "_touched": [1540],
8890
8985
  "_value": [1032],
8891
8986
  "state": [32],
8892
- "getValue": [64]
8987
+ "getValue": [64],
8988
+ "focus": [64],
8989
+ "kolFocus": [64]
8893
8990
  },
8894
8991
  "$listeners$": undefined,
8895
8992
  "$lazyBundleId$": "-",
@@ -8903,19 +9000,26 @@ var KolInputPasswordDefaultStyle0 = defaultStyleCss$r;
8903
9000
  class KolInputPassword {
8904
9001
  async getValue() {
8905
9002
  var _a;
8906
- return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
9003
+ return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
9004
+ }
9005
+ async focus() {
9006
+ await this.kolFocus();
9007
+ }
9008
+ async kolFocus() {
9009
+ var _a;
9010
+ (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
8907
9011
  }
8908
9012
  render() {
8909
9013
  var _a;
8910
9014
  const { ariaDescribedBy } = getRenderStates(this.state);
8911
9015
  const hasExpertSlot = showExpertSlot(this.state._label);
8912
- return (hAsync(Host, { key: 'ea5897bd368a1283a3d7d700930076c09eb11279', class: {
9016
+ return (hAsync(Host, { key: 'f42af042b4decf3ba72495b01c0bef56404bd190', class: {
8913
9017
  'kol-input-password': true,
8914
9018
  'has-value': this.state._hasValue,
8915
- } }, hAsync(KolInputWcTag, { key: '24283ff4bdde3bb0d65e9f6fd05e7f10c65dc95d', class: {
9019
+ } }, hAsync(KolInputWcTag, { key: '52b73e97081fdd53eb6ef29eba36a61c45f653b1', class: {
8916
9020
  'hide-label': !!this.state._hideLabel,
8917
9021
  password: true,
8918
- }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _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(); }, role: `presentation` }, hAsync("span", { key: '8f6584a8f778e3678ea2fcdf958dc2ccdea35bfb', 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", { key: '75ba6ee425bd6ae83af778380d295d38a5bc3883', slot: "input" }, hAsync("input", Object.assign({ key: '46311342eb97825b8c319abd73a591ec3f82711d', 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: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput })), this._variant === 'visibility-toggle' && this.ref && ((_a = this.ref.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync(KolButtonWcTag, { class: "password-toggle-button", _label: this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password'), _variant: "ghost", _on: {
9022
+ }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _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.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '5f403205a336bd8f3ae638a460c7009afacc1cd1', 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", { key: '8d34cc0ff526d6bc9b64a46ddfb64a393699a13a', slot: "input" }, hAsync("input", Object.assign({ key: 'b515bcb0625bca3c960b94cb3d7f6e24a672028a', 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: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput })), this._variant === 'visibility-toggle' && this.inputRef && ((_a = this.inputRef.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync(KolButtonWcTag, { class: "password-toggle-button", _label: this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password'), _variant: "ghost", _on: {
8919
9023
  onClick: () => {
8920
9024
  this._passwordVisible = !this._passwordVisible;
8921
9025
  },
@@ -8924,14 +9028,13 @@ class KolInputPassword {
8924
9028
  constructor(hostRef) {
8925
9029
  registerInstance(this, hostRef);
8926
9030
  this.catchRef = (ref) => {
8927
- this.ref = ref;
8928
- propagateFocus(this.host, this.ref);
9031
+ this.inputRef = ref;
8929
9032
  };
8930
9033
  this.onKeyDown = (event) => {
8931
9034
  if (event.code === 'Enter' || event.code === 'NumpadEnter') {
8932
9035
  propagateSubmitEventToForm({
8933
9036
  form: this.host,
8934
- ref: this.ref,
9037
+ ref: this.inputRef,
8935
9038
  });
8936
9039
  }
8937
9040
  };
@@ -9131,7 +9234,9 @@ class KolInputPassword {
9131
9234
  "_variant": [1],
9132
9235
  "state": [32],
9133
9236
  "_passwordVisible": [32],
9134
- "getValue": [64]
9237
+ "getValue": [64],
9238
+ "focus": [64],
9239
+ "kolFocus": [64]
9135
9240
  },
9136
9241
  "$listeners$": undefined,
9137
9242
  "$lazyBundleId$": "-",
@@ -9151,17 +9256,24 @@ class KolInputRadio {
9151
9256
  async getValue() {
9152
9257
  return this.currentValue;
9153
9258
  }
9259
+ async focus() {
9260
+ await this.kolFocus();
9261
+ }
9262
+ async kolFocus() {
9263
+ var _a;
9264
+ (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
9265
+ }
9154
9266
  render() {
9155
9267
  const { ariaDescribedBy, hasError } = getRenderStates(this.state);
9156
9268
  const hasExpertSlot = showExpertSlot(this.state._label);
9157
- return (hAsync(Host, { key: '86b677936fe9165f668334c11564698c2c18746f', class: "kol-input-radio" }, hAsync("fieldset", { key: 'f6abab7ceee78e206a3a0e45c93596530e41ffdb', class: {
9269
+ return (hAsync(Host, { key: '0f10e4e0a1357ba44f89dad147e2f208d2087207', class: "kol-input-radio" }, hAsync("fieldset", { key: '3a3d3a1e4b0074f90a9bbab43b1a647cf08c0ad1', class: {
9158
9270
  fieldset: true,
9159
9271
  disabled: this.state._disabled === true,
9160
9272
  error: hasError === true,
9161
9273
  required: this.state._required === true,
9162
9274
  'hidden-error': this._hideError === true,
9163
9275
  [this.state._orientation]: true,
9164
- } }, hAsync("legend", { key: '711fa62fdb66d0a7dfc2cb0d7d1d21bf8b2bfd7e', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '819e17c927a25b4ebad3749d13484ce5c2f9ef6e' }, hAsync("span", { key: 'dc6206a96bd67252732b89cc90da0abbba1c74b1', 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) => {
9276
+ } }, hAsync("legend", { key: '3832c99aa5f0ac8393a3f7f69cbcc6ce3a57f146', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: '417ad846060749b18ad3eb36a27f39437f457795' }, hAsync("span", { key: '9145ec26a65972f48f226f0fe50c99985517f6e7', 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) => {
9165
9277
  const customId = `${this.state._id}-${index}`;
9166
9278
  const slotName = `radio-${index}`;
9167
9279
  const selected = this.state._value === option.value;
@@ -9174,13 +9286,12 @@ class KolInputRadio {
9174
9286
  padding: this.state._hideLabel ? '0' : undefined,
9175
9287
  visibility: this.state._hideLabel ? 'hidden' : undefined,
9176
9288
  } }, hAsync("span", null, hAsync("span", { class: "radio-label-span-inner" }, option.label))))));
9177
- }), hasError && hAsync(FormFieldMsg, { key: '760ba7509479d2682c81f9708c5524a79c8d3e78', _alert: this.state._alert, _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }))));
9289
+ }), hasError && hAsync(FormFieldMsg, { key: '4154a3766b3ae6ce7b8f94a8464745c4e3a23bb1', _alert: this.state._alert, _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }))));
9178
9290
  }
9179
9291
  constructor(hostRef) {
9180
9292
  registerInstance(this, hostRef);
9181
9293
  this.catchRef = (ref) => {
9182
- this.ref = ref;
9183
- propagateFocus(this.host, ref);
9294
+ this.inputRef = ref;
9184
9295
  };
9185
9296
  this.onInput = (event) => {
9186
9297
  var _a;
@@ -9213,7 +9324,7 @@ class KolInputRadio {
9213
9324
  if (event.code === 'Enter' || event.code === 'NumpadEnter') {
9214
9325
  propagateSubmitEventToForm({
9215
9326
  form: this.host,
9216
- ref: this.ref,
9327
+ ref: this.inputRef,
9217
9328
  });
9218
9329
  }
9219
9330
  };
@@ -9363,7 +9474,9 @@ class KolInputRadio {
9363
9474
  "_touched": [1540],
9364
9475
  "_value": [8],
9365
9476
  "state": [32],
9366
- "getValue": [64]
9477
+ "getValue": [64],
9478
+ "focus": [64],
9479
+ "kolFocus": [64]
9367
9480
  },
9368
9481
  "$listeners$": undefined,
9369
9482
  "$lazyBundleId$": "-",
@@ -9410,6 +9523,13 @@ const defaultStyleCss$p = "@layer kol-global {\n .sc-kol-input-range-default-h
9410
9523
  var KolInputRangeDefaultStyle0 = defaultStyleCss$p;
9411
9524
 
9412
9525
  class KolInputRange {
9526
+ async focus() {
9527
+ await this.kolFocus();
9528
+ }
9529
+ async kolFocus() {
9530
+ var _a;
9531
+ (_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.focus();
9532
+ }
9413
9533
  getSanitizedFloatValue(value) {
9414
9534
  const floatValue = parseFloat(value);
9415
9535
  if (this.state._max && floatValue > this.state._max) {
@@ -9436,13 +9556,13 @@ class KolInputRange {
9436
9556
  const { ariaDescribedBy } = getRenderStates(this.state);
9437
9557
  const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
9438
9558
  const hasExpertSlot = showExpertSlot(this.state._label);
9439
- return (hAsync(Host, { key: '06a9a8451479014d3a2742239680bf0775bc2139', class: "kol-input-range" }, hAsync(KolInputWcTag, { key: '0beef62d205934ad3dd3adad00ea33fa736902d8', class: {
9559
+ return (hAsync(Host, { key: '6a12597433b0c41b717aa0aaa81a9f5c57d92f2f', class: "kol-input-range" }, hAsync(KolInputWcTag, { key: '3e17d575888bc78e7c04fbecac6bfc8d2a5691fd', class: {
9440
9560
  range: true,
9441
9561
  'hide-label': !!this.state._hideLabel,
9442
- }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _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", { key: '8b5721dbd67a8115eae5d8050a990c1d03782921', 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", { key: 'acb3457b3a77962b6f94fea31529ee20b0e9e49f', slot: "input" }, hAsync("div", { key: 'dd6411145181d264476a59f1c48217aa36d4604e', class: "inputs-wrapper", style: {
9562
+ }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _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", { key: '07466ef3c13f1f5dd56c5792df4abe9f000d07a2', 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", { key: '08323eed3a26469f76f22bd20e71739b4e9739cc', slot: "input" }, hAsync("div", { key: 'a5cf4ac0102cefec7876027b2afa768d14818a5b', class: "inputs-wrapper", style: {
9443
9563
  '--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
9444
- } }, hAsync("input", Object.assign({ key: '874cb60b00ec0a1d22127e3f5de492dffb78ee25', ref: this.catchInputRangeRef, 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, "aria-hidden": "true", 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({ key: 'be7b014ab1082e66a553f74c371c7915bd742817', 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, { onKeyDown: this.onKeyDown, onChange: this.onChange }))), hasSuggestions && [
9445
- hAsync("datalist", { key: 'b4156f2bbd9f3b7d3c1b6a3d7fb072fd1623368c', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
9564
+ } }, hAsync("input", Object.assign({ key: 'e30999603fa946265dffdb06777557a6e6063322', ref: this.catchInputRangeRef, 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, "aria-hidden": "true", 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({ key: '42a99192be12c94c6da5737c1e3485c4e95a8eef', 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, { onKeyDown: this.onKeyDown, onChange: this.onChange }))), hasSuggestions && [
9565
+ hAsync("datalist", { key: '7f6ded306407b8584c13a02f35da1f2cb77f522f', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
9446
9566
  ]))));
9447
9567
  }
9448
9568
  constructor(hostRef) {
@@ -9451,7 +9571,6 @@ class KolInputRange {
9451
9571
  var _a;
9452
9572
  if (element) {
9453
9573
  this.refInputNumber = element;
9454
- propagateFocus(this.host, element);
9455
9574
  if (!this._value && ((_a = this.refInputNumber) === null || _a === void 0 ? void 0 : _a.value)) {
9456
9575
  this.validateValue(parseFloat(this.refInputNumber.value));
9457
9576
  }
@@ -9638,6 +9757,8 @@ class KolInputRange {
9638
9757
  "_touched": [1540],
9639
9758
  "_value": [2],
9640
9759
  "state": [32],
9760
+ "focus": [64],
9761
+ "kolFocus": [64],
9641
9762
  "getValue": [64]
9642
9763
  },
9643
9764
  "$listeners$": undefined,
@@ -9652,30 +9773,36 @@ var KolInputTextDefaultStyle0 = defaultStyleCss$o;
9652
9773
  class KolInputText {
9653
9774
  async getValue() {
9654
9775
  var _a;
9655
- return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
9776
+ return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value;
9777
+ }
9778
+ async focus() {
9779
+ await this.kolFocus();
9780
+ }
9781
+ async kolFocus() {
9782
+ var _a;
9783
+ (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
9656
9784
  }
9657
9785
  render() {
9658
9786
  const { ariaDescribedBy } = getRenderStates(this.state);
9659
9787
  const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
9660
9788
  const hasExpertSlot = showExpertSlot(this.state._label);
9661
- return (hAsync(Host, { key: '96f4d125a686ddd2913cb7e0ce0bcc4f6bd4cbce', class: {
9789
+ return (hAsync(Host, { key: '1973f5a8a6d20c8b4c07de5fbdaf8f05fb8ddc95', class: {
9662
9790
  'has-value': this.state._hasValue,
9663
9791
  'kol-input-text': true,
9664
- } }, hAsync(KolInputWcTag, { key: '36ab21f90409094c131b92f56b85f5691fc66e84', class: {
9792
+ } }, hAsync(KolInputWcTag, { key: '642a6e78297dce3f00041f8f95204f6348271ea1', class: {
9665
9793
  [this.state._type]: true,
9666
9794
  'hide-label': !!this.state._hideLabel,
9667
- }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _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, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '92258a27bf785587a2db0b690162373d51824fae', 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", { key: 'c3b0151f4e3060753c0887d802fd55bf15ead09b', slot: "input" }, hAsync("input", Object.assign({ key: '98e90d33f10c3f5a72e585040b97fd093f785d17', 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, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown }))))));
9795
+ }, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _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, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'ab9bcd054c175f7c220bb67a8e3a195135a9afd7', 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", { key: 'e7fdb05ff787d0df9d6224f041223ea8fc86d82c', slot: "input" }, hAsync("input", Object.assign({ key: 'ce9cc2b5b1fec48eb426fce9b599638c321d6ae4', 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, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown }))))));
9668
9796
  }
9669
9797
  constructor(hostRef) {
9670
9798
  registerInstance(this, hostRef);
9671
9799
  this.catchRef = (ref) => {
9672
- this.ref = ref;
9673
- propagateFocus(this.host, this.ref);
9800
+ this.inputRef = ref;
9674
9801
  };
9675
9802
  this.onChange = (event) => {
9676
9803
  var _a, _b;
9677
- if (this.oldValue !== ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.value)) {
9678
- this.oldValue = (_b = this.ref) === null || _b === void 0 ? void 0 : _b.value;
9804
+ if (this.oldValue !== ((_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.value)) {
9805
+ this.oldValue = (_b = this.inputRef) === null || _b === void 0 ? void 0 : _b.value;
9679
9806
  this.controller.onFacade.onChange(event);
9680
9807
  }
9681
9808
  };
@@ -9687,7 +9814,7 @@ class KolInputText {
9687
9814
  if (event.code === 'Enter' || event.code === 'NumpadEnter') {
9688
9815
  propagateSubmitEventToForm({
9689
9816
  form: this.host,
9690
- ref: this.ref,
9817
+ ref: this.inputRef,
9691
9818
  });
9692
9819
  }
9693
9820
  };
@@ -9887,7 +10014,9 @@ class KolInputText {
9887
10014
  "_type": [1],
9888
10015
  "_value": [1025],
9889
10016
  "state": [32],
9890
- "getValue": [64]
10017
+ "getValue": [64],
10018
+ "focus": [64],
10019
+ "kolFocus": [64]
9891
10020
  },
9892
10021
  "$listeners$": undefined,
9893
10022
  "$lazyBundleId$": "-",
@@ -10077,7 +10206,7 @@ class KolLink {
10077
10206
  constructor(hostRef) {
10078
10207
  registerInstance(this, hostRef);
10079
10208
  this.catchRef = (ref) => {
10080
- propagateFocus(this.host, ref);
10209
+ this.linkWcRef = ref;
10081
10210
  };
10082
10211
  this._accessKey = undefined;
10083
10212
  this._ariaCurrentValue = undefined;
@@ -10093,10 +10222,16 @@ class KolLink {
10093
10222
  this._target = undefined;
10094
10223
  this._tooltipAlign = 'right';
10095
10224
  }
10225
+ async focus() {
10226
+ await this.kolFocus();
10227
+ }
10228
+ async kolFocus() {
10229
+ var _a;
10230
+ await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
10231
+ }
10096
10232
  render() {
10097
- return (hAsync(Host, { key: '4c5a3b453eb75d28f7d9f2178bf060befc388215', class: "kol-link" }, hAsync(KolLinkWcTag, { key: '4dda3e3b01076322d1b69127bdaffe2a647fb92a', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '571fc9a7565443fea650504728a1e5c56d8f2648', name: "expert", slot: "expert" }))));
10233
+ return (hAsync(Host, { key: 'a690eef605f9fc1e4a3a5e99c4ba78cb20904223', class: "kol-link" }, hAsync(KolLinkWcTag, { key: 'b9d2706ce44ba0d3ac121e771496a0ad34979629', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '52b67bd3e03adb56e85ae0bd90bff99befaa16af', name: "expert", slot: "expert" }))));
10098
10234
  }
10099
- get host() { return getElement(this); }
10100
10235
  static get style() { return {
10101
10236
  default: KolLinkDefaultStyle0
10102
10237
  }; }
@@ -10116,7 +10251,9 @@ class KolLink {
10116
10251
  "_role": [1],
10117
10252
  "_tabIndex": [2, "_tab-index"],
10118
10253
  "_target": [1],
10119
- "_tooltipAlign": [1, "_tooltip-align"]
10254
+ "_tooltipAlign": [1, "_tooltip-align"],
10255
+ "focus": [64],
10256
+ "kolFocus": [64]
10120
10257
  },
10121
10258
  "$listeners$": undefined,
10122
10259
  "$lazyBundleId$": "-",
@@ -10131,7 +10268,7 @@ class KolLinkButton {
10131
10268
  constructor(hostRef) {
10132
10269
  registerInstance(this, hostRef);
10133
10270
  this.catchRef = (ref) => {
10134
- propagateFocus(this.host, ref);
10271
+ this.linkWcRef = ref;
10135
10272
  };
10136
10273
  this._accessKey = undefined;
10137
10274
  this._ariaCurrentValue = undefined;
@@ -10149,14 +10286,20 @@ class KolLinkButton {
10149
10286
  this._tooltipAlign = 'right';
10150
10287
  this._variant = 'normal';
10151
10288
  }
10289
+ async focus() {
10290
+ await this.kolFocus();
10291
+ }
10292
+ async kolFocus() {
10293
+ var _a;
10294
+ await ((_a = this.linkWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
10295
+ }
10152
10296
  render() {
10153
- return (hAsync(Host, { key: 'd5228dea8b70b7c3ae5179ad65acc960d19bd56d', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: '2133362600a94bf784e4756b721e40071035b594', ref: this.catchRef, class: {
10297
+ return (hAsync(Host, { key: 'e6ab08377be0ad810ea3d7c0f690231663aa790d', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: 'dd6e0237ef4fa62c42f8c4ce51efa5f3dbfcd49d', ref: this.catchRef, class: {
10154
10298
  button: true,
10155
10299
  [this._variant]: this._variant !== 'custom',
10156
10300
  [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
10157
- }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'e5d63b9bb8224378685193f3b2a95fa89549699c', name: "expert", slot: "expert" }))));
10301
+ }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: 'de5b3af7fb665c288e9cffa7da4f59dcd57e9093', name: "expert", slot: "expert" }))));
10158
10302
  }
10159
- get host() { return getElement(this); }
10160
10303
  static get style() { return {
10161
10304
  default: KolLinkButtonDefaultStyle0
10162
10305
  }; }
@@ -10178,7 +10321,9 @@ class KolLinkButton {
10178
10321
  "_tabIndex": [2, "_tab-index"],
10179
10322
  "_target": [1],
10180
10323
  "_tooltipAlign": [1, "_tooltip-align"],
10181
- "_variant": [1]
10324
+ "_variant": [1],
10325
+ "focus": [64],
10326
+ "kolFocus": [64]
10182
10327
  },
10183
10328
  "$listeners$": undefined,
10184
10329
  "$lazyBundleId$": "-",
@@ -10309,8 +10454,7 @@ class KolLinkWc {
10309
10454
  constructor(hostRef) {
10310
10455
  registerInstance(this, hostRef);
10311
10456
  this.catchRef = (ref) => {
10312
- this.ref = ref;
10313
- propagateFocus(this.host, this.ref);
10457
+ this.anchorRef = ref;
10314
10458
  };
10315
10459
  this.onClick = (event) => {
10316
10460
  var _a, _b;
@@ -10320,7 +10464,7 @@ class KolLinkWc {
10320
10464
  else if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
10321
10465
  event.preventDefault();
10322
10466
  event.stopPropagation();
10323
- setEventTarget(event, this.ref);
10467
+ setEventTarget(event, this.anchorRef);
10324
10468
  (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onClick(event, this.state._href);
10325
10469
  }
10326
10470
  };
@@ -10358,16 +10502,20 @@ class KolLinkWc {
10358
10502
  _icons: {},
10359
10503
  };
10360
10504
  }
10505
+ async kolFocus() {
10506
+ var _a;
10507
+ (_a = this.anchorRef) === null || _a === void 0 ? void 0 : _a.focus();
10508
+ }
10361
10509
  render() {
10362
10510
  const { isExternal, tagAttrs } = this.getRenderValues();
10363
10511
  const hasExpertSlot = showExpertSlot(this.state._label);
10364
- return (hAsync(Host, { key: 'ba7667ded942c997fc52b057a0f9ce8e2bf79daa', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: '906dd600d85d83dd073e53393e24773f836f5612', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": this.state._ariaExpanded ? 'true' : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
10512
+ return (hAsync(Host, { key: 'bceb6e1bb9b3314ea1ed597aa5254f5dff33f350', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: '234f8304ea72e23c337c5f8049c71f6e3d1dd0e0', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": this.state._ariaExpanded ? 'true' : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
10365
10513
  ? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
10366
10514
  : undefined, class: {
10367
10515
  disabled: this.state._disabled === true,
10368
10516
  'external-link': isExternal,
10369
10517
  'hide-label': this.state._hideLabel === true,
10370
- } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '0049db400816f9fe77dec4a71b97a6e3c6d4b701', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '0f265de4576987908cca965a43bfe261e9ee70bb', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: 'ea163b0f51cdefb92edbe8382608d87ef7d20b5f', class: "external-link-icon", _label: this.state._hideLabel ? '' : translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: '8eb7db57a9866a93fd275702142a3dd20fd5cb7d', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
10518
+ } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '199d2afb7615f7654674ea33284de0e376da713c', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: '341e514c5974572683e1c29852e33e686efc85e4', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { key: 'abf9e01ab96cc7b418430cbc39746659c50bf60f', class: "external-link-icon", _label: this.state._hideLabel ? '' : translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: 'd9501a785b3f27bafd87e8b0dc622588fd17d251', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
10371
10519
  }
10372
10520
  validateAccessKey(value) {
10373
10521
  validateAccessKey(this, value);
@@ -10441,7 +10589,6 @@ class KolLinkWc {
10441
10589
  this.unsubscribeOnLocationChange();
10442
10590
  }
10443
10591
  }
10444
- get host() { return getElement(this); }
10445
10592
  static get watchers() { return {
10446
10593
  "_accessKey": ["validateAccessKey"],
10447
10594
  "_ariaCurrentValue": ["validateAriaCurrentValue"],
@@ -10478,7 +10625,8 @@ class KolLinkWc {
10478
10625
  "_tabIndex": [2, "_tab-index"],
10479
10626
  "_target": [1],
10480
10627
  "_tooltipAlign": [1, "_tooltip-align"],
10481
- "state": [32]
10628
+ "state": [32],
10629
+ "kolFocus": [64]
10482
10630
  },
10483
10631
  "$listeners$": undefined,
10484
10632
  "$lazyBundleId$": "-",
@@ -13889,6 +14037,13 @@ class KolSelect {
13889
14037
  async getValue() {
13890
14038
  return this.state._value;
13891
14039
  }
14040
+ async focus() {
14041
+ await this.kolFocus();
14042
+ }
14043
+ async kolFocus() {
14044
+ var _a;
14045
+ (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus();
14046
+ }
13892
14047
  renderOptgroup(optgroup, preKey) {
13893
14048
  var _a;
13894
14049
  return (hAsync("optgroup", { disabled: optgroup.disabled, label: optgroup.label }, (_a = optgroup.options) === null || _a === void 0 ? void 0 : _a.map((option, index) => {
@@ -13904,16 +14059,16 @@ class KolSelect {
13904
14059
  render() {
13905
14060
  const { ariaDescribedBy } = getRenderStates(this.state);
13906
14061
  const hasExpertSlot = showExpertSlot(this.state._label);
13907
- return (hAsync(Host, { key: 'fd481e56e39c3c0a0b06bb9a70cf02b90fcd3a47', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: 'ff5035b9f766a02a92f7b338e9ea2e61db9eb316', class: {
14062
+ return (hAsync(Host, { key: 'e0bca5648369f513a867c3b2020d03b688469075', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: 'da1083003cc59ed15a0bd0c0508037dacb1b335e', class: {
13908
14063
  'hide-label': !!this.state._hideLabel,
13909
14064
  select: true,
13910
- }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _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(); }, role: `presentation` }, hAsync("span", { key: '4add8d3341dc825c6169629a8bd06fbae71058dd', 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", { key: '72294f2fa2f45e737a02585c03a810e951f67faa', slot: "input" }, hAsync("form", { key: '7754b2e7fe44983ecd880ad5e46cedb75b7009f4', onSubmit: (event) => {
14065
+ }, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '6be051315c2f5bffb2ecad1746dec86614aeea62', 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", { key: '8556b2827302863bc76190e40dc559b1adf5e940', slot: "input" }, hAsync("form", { key: '3d67a53db81bb5ecc74c65d50019470908ff4298', onSubmit: (event) => {
13911
14066
  event.preventDefault();
13912
14067
  propagateSubmitEventToForm({
13913
14068
  form: this.host,
13914
- ref: this.ref,
14069
+ ref: this.selectRef,
13915
14070
  });
13916
- } }, hAsync("input", { key: 'd238ef9ac51dad83ddeac0e077e946b2b76134c8', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: 'c98e51573261bdecdc831fcf031d7f09417c7b86', 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" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this) }), this.state._options.map((option, index) => {
14071
+ } }, hAsync("input", { key: '2f48e602ebcb11cb5dd33055d3c8f75d2894244b', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: 'c68ab3da9afd5022a7f146655767f0141d591781', 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" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this) }), this.state._options.map((option, index) => {
13917
14072
  const key = `-${index}`;
13918
14073
  if (Array.isArray(option.options)) {
13919
14074
  return this.renderOptgroup(option, key);
@@ -13926,8 +14081,7 @@ class KolSelect {
13926
14081
  constructor(hostRef) {
13927
14082
  registerInstance(this, hostRef);
13928
14083
  this.catchRef = (ref) => {
13929
- this.ref = ref;
13930
- propagateFocus(this.host, this.ref);
14084
+ this.selectRef = ref;
13931
14085
  };
13932
14086
  this._accessKey = undefined;
13933
14087
  this._alert = true;
@@ -14034,7 +14188,7 @@ class KolSelect {
14034
14188
  }
14035
14189
  onInput(event) {
14036
14190
  var _a, _b, _c;
14037
- this._value = Array.from(((_a = this.ref) === null || _a === void 0 ? void 0 : _a.options) || [])
14191
+ this._value = Array.from(((_a = this.selectRef) === null || _a === void 0 ? void 0 : _a.options) || [])
14038
14192
  .filter((option) => option.selected === true)
14039
14193
  .map((option) => { var _a; return (_a = this.controller.getOptionByKey(option.value)) === null || _a === void 0 ? void 0 : _a.value; });
14040
14194
  tryToDispatchKoliBriEvent('input', this.host, this._value);
@@ -14101,7 +14255,9 @@ class KolSelect {
14101
14255
  "_touched": [1540],
14102
14256
  "_value": [1025],
14103
14257
  "state": [32],
14104
- "getValue": [64]
14258
+ "getValue": [64],
14259
+ "focus": [64],
14260
+ "kolFocus": [64]
14105
14261
  },
14106
14262
  "$listeners$": undefined,
14107
14263
  "$lazyBundleId$": "-",
@@ -24078,26 +24234,32 @@ const increaseTextareaHeight = (el) => {
24078
24234
  class KolTextarea {
24079
24235
  async getValue() {
24080
24236
  var _a;
24081
- return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
24237
+ return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.value;
24238
+ }
24239
+ async focus() {
24240
+ await this.kolFocus();
24241
+ }
24242
+ async kolFocus() {
24243
+ var _a;
24244
+ (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus();
24082
24245
  }
24083
24246
  render() {
24084
24247
  const { ariaDescribedBy } = getRenderStates(this.state);
24085
24248
  const hasExpertSlot = showExpertSlot(this.state._label);
24086
- return (hAsync(Host, { key: '24a6029ebb52ba8812c6a991809ef3cb08eb1aa2', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: 'd86ab8845597fa1475b633433b5583b16a3c40de', 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, _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, _maxLength: this.state._maxLength, _msg: this.state._msg, _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(); }, role: `presentation` }, hAsync("span", { key: '2d172fbf3d65b23d21f9c854f6773b2cc8881f06', 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", { key: '9b94ac51bca6e7e16423728fd4ad9c57c4f3f556', slot: "input" }, hAsync("textarea", Object.assign({ key: '3f1255f181f1dc35cd875aede0985de3aaec78f1', 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, { onInput: this.onInput, style: {
24249
+ return (hAsync(Host, { key: 'db199ad3fd9fae0a23f3de8b54b15a20c04a3c95', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputWcTag, { key: '2ef6815d8e956d0ff94b19e40bc754cb19223152', 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, _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, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'cdcb791763a07b2c04bd152cb02d0a3750a19420', 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", { key: '04e8f1b97df661b5fd0b7c20f48e1ae165995223', slot: "input" }, hAsync("textarea", Object.assign({ key: '0ad4e21fe58c68fb9a5007738ecc0f378cfbd08c', 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, { onInput: this.onInput, style: {
24087
24250
  resize: this.state._resize,
24088
24251
  }, value: this.state._value }))))));
24089
24252
  }
24090
24253
  constructor(hostRef) {
24091
24254
  registerInstance(this, hostRef);
24092
24255
  this.catchRef = (ref) => {
24093
- this.ref = ref;
24094
- propagateFocus(this.host, this.ref);
24256
+ this.textareaRef = ref;
24095
24257
  };
24096
24258
  this.onInput = (event) => {
24097
- if (this.ref instanceof HTMLTextAreaElement) {
24098
- setState(this, '_currentLength', this.ref.value.length);
24259
+ if (this.textareaRef instanceof HTMLTextAreaElement) {
24260
+ setState(this, '_currentLength', this.textareaRef.value.length);
24099
24261
  if (this.state._adjustHeight) {
24100
- this._rows = increaseTextareaHeight(this.ref);
24262
+ this._rows = increaseTextareaHeight(this.textareaRef);
24101
24263
  }
24102
24264
  this.controller.onFacade.onInput(event);
24103
24265
  }
@@ -24220,8 +24382,9 @@ class KolTextarea {
24220
24382
  componentDidLoad() {
24221
24383
  setTimeout(() => {
24222
24384
  var _a;
24223
- if (this._adjustHeight === true && this.ref) {
24224
- this._rows = ((_a = this.state) === null || _a === void 0 ? void 0 : _a._rows) && this.state._rows > increaseTextareaHeight(this.ref) ? this.state._rows : increaseTextareaHeight(this.ref);
24385
+ if (this._adjustHeight === true && this.textareaRef) {
24386
+ this._rows =
24387
+ ((_a = this.state) === null || _a === void 0 ? void 0 : _a._rows) && this.state._rows > increaseTextareaHeight(this.textareaRef) ? this.state._rows : increaseTextareaHeight(this.textareaRef);
24225
24388
  }
24226
24389
  else if (!this._rows) {
24227
24390
  this._rows = 1;
@@ -24297,7 +24460,9 @@ class KolTextarea {
24297
24460
  "_touched": [1540],
24298
24461
  "_value": [1],
24299
24462
  "state": [32],
24300
- "getValue": [64]
24463
+ "getValue": [64],
24464
+ "focus": [64],
24465
+ "kolFocus": [64]
24301
24466
  },
24302
24467
  "$listeners$": undefined,
24303
24468
  "$lazyBundleId$": "-",
@@ -24456,7 +24621,7 @@ class KolToolbar {
24456
24621
  if (currentIndex === nextIndex)
24457
24622
  return;
24458
24623
  this.currentIndex = nextIndex;
24459
- (_b = this.getCurrentToolbarItem(nextIndex)) === null || _b === void 0 ? void 0 : _b.focus();
24624
+ void ((_b = this.getCurrentToolbarItem(nextIndex)) === null || _b === void 0 ? void 0 : _b.kolFocus());
24460
24625
  }
24461
24626
  handleBlur(event) {
24462
24627
  if (event.target === this.host)
@@ -24842,11 +25007,11 @@ class KolTreeItemWc {
24842
25007
  this.state = Object.assign(Object.assign({}, this.state), { _hasChildren: Boolean((_b = (_a = this.host.querySelector('slot')) === null || _a === void 0 ? void 0 : _a.assignedElements) === null || _b === void 0 ? void 0 : _b.call(_a).length) });
24843
25008
  }
24844
25009
  async focusLink() {
24845
- this.linkElement.focus();
25010
+ await this.linkElement.kolFocus();
24846
25011
  }
24847
25012
  async handleExpandClick(event) {
24848
25013
  event.preventDefault();
24849
- this.linkElement.focus();
25014
+ await this.linkElement.kolFocus();
24850
25015
  await this.expand();
24851
25016
  }
24852
25017
  async expand() {