@public-ui/hydrate 3.0.2-ab502d4896d9763f93bb8cce1b07a1b2f8d04439.0 → 3.0.2-d721ede5369345abe032367b7d05a7c5a20dca9b.0

package/README.md

@@ -19,9 +19,9 @@ Provide an adapter for Server Side Rendering of KoliBri components.
 You can install the adapter with `npm`, `pnpm` or `yarn`:
 
 ```bash
-npm i -g @public-ui/hydrate
-pnpm i -g @public-ui/hydrate
-yarn add -g @public-ui/hydrate
+npm i @public-ui/hydrate
+pnpm i @public-ui/hydrate
+yarn add @public-ui/hydrate
 ```
 
 ## Usage
@@ -35,3 +35,5 @@ import { renderToString } from '@public-ui/hydrate';
 const inputHtml = `<kol-button _label="Hello World"_></kol-button>`;
 const { html } = await renderToString(inputHtml);
 ```
+
+Refer to the [default theme README](../../themes/default/README.md) for information on customizing the output.

package/dist/index.js

@@ -3832,6 +3832,10 @@ const validateAdjustHeight = (component, value) => {
     watchBoolean(component, '_adjustHeight', value);
 };
 
+const validateAlt = (component, value, options = {}) => {
+    watchString(component, '_alt', value, options);
+};
+
 const validateAlignment = (component, propName, value) => {
     watchValidator(component, propName, (value) => typeof value === 'string' && alignPropTypeOptions.includes(value), new Set(alignPropTypeOptions), value, {
         defaultValue: 'top',
@@ -4198,6 +4202,14 @@ const validateImageSource = (component, value, options) => {
     watchString(component, '_src', value, options);
 };
 
+const validateImageSizes = (component, value, options = {}) => {
+    watchString(component, '_sizes', value, options);
+};
+
+const validateImageSrcset = (component, value, options = {}) => {
+    watchString(component, '_srcset', value, options);
+};
+
 const validateIndeterminate = (component, value) => {
     watchBoolean(component, '_indeterminate', value);
 };
@@ -5134,13 +5146,28 @@ const AlertIcon = ({ type, label }) => {
     }
 };
 
+const vibrateOnError = () => {
+    if (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {
+        return;
+    }
+    const ua = navigator.userActivation;
+    const hasGesture = (ua === null || ua === void 0 ? void 0 : ua.isActive) || (ua === null || ua === void 0 ? void 0 : ua.hasBeenActive);
+    if (!hasGesture) {
+        return;
+    }
+    if (!matchMedia('(any-pointer: coarse)').matches) {
+        return;
+    }
+    try {
+        navigator.vibrate([100, 75, 100, 75, 100]);
+    }
+    catch (_a) {
+    }
+};
 const KolAlertFc = (props, children) => {
-    var _a, _b;
     const { class: classNames = {}, alert = false, hasCloser = false, label, level = 0, type = 'default', variant = 'msg', onAlertTimeout, onCloserClick } = props, other = __rest(props, ["class", "alert", "hasCloser", "label", "level", "type", "variant", "onAlertTimeout", "onCloserClick"]);
     if (alert) {
-        if ((_a = navigator.userActivation) === null || _a === void 0 ? void 0 : _a.hasBeenActive) {
-            (_b = navigator === null || navigator === void 0 ? void 0 : navigator.vibrate) === null || _b === void 0 ? void 0 : _b.call(navigator, [100, 75, 100, 75, 100]);
-        }
+        vibrateOnError();
         setTimeout(() => {
             onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();
         }, 10000);
@@ -5205,7 +5232,7 @@ class KolAlertWc {
             onCloserClick: this.close,
             onAlertTimeout: this.handleAlertTimeout,
         };
-        return (hAsync(KolAlertFc, Object.assign({ key: '9038051f21b86a9c83c8ac5619e723dff5ebcbeb' }, props), hAsync("slot", { key: 'cfd116176ab783db5232d9d5520f8ae890ca44db' })));
+        return (hAsync(KolAlertFc, Object.assign({ key: '2b0d74465270eef8d8d6f3da8c04377f862e8630' }, props), hAsync("slot", { key: '55e8ad62be763c26af16813e5ebfac2ce1f63b54' })));
     }
     validateAlert(value) {
         watchBoolean(this, '_alert', value);
@@ -17387,8 +17414,15 @@ const CustomSuggestionsToggleFc = ({ onClick, disabled }) => {
         hAsync(KolIconTag, { _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') })));
 };
 
-const CustomSuggestionsOptionFc = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option }) => {
-    return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: ref, "data-index": index, tabIndex: -1, role: "option", "aria-selected": selected ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: "kol-custom-suggestions-option", onKeyDown: onKeyDown }, option));
+const CustomSuggestionsOptionFc = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm }) => {
+    const highlightSearchTerm = (text, searchTerm) => {
+        if (!(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.trim()))
+            return text;
+        const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+        const parts = text.split(regex);
+        return parts.map((part, partIndex) => (regex.test(part) ? hAsync("mark", { key: partIndex }, part) : part));
+    };
+    return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: ref, "data-index": index, tabIndex: -1, role: "option", "aria-selected": selected ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: "kol-custom-suggestions-option", onKeyDown: onKeyDown }, highlightSearchTerm(String(option), searchTerm || '')));
 };
 
 const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {
@@ -17496,7 +17530,7 @@ class KolCombobox {
     render() {
         return (hAsync(FormFieldStateWrapper, Object.assign({ key: '44bc85c62caa382896b635dbc743f16d24863644' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'fd4b270034c88219b2f7f7eae2591334906ece02', state: this.state }, hAsync("div", { key: 'd4510edc466749cef9b6291afd9c282c77b88f8f', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'ddc7d75b247724e081da3b8360238e271110cdca' }, this.getInputProps())), hAsync(CustomSuggestionsToggleFc, { key: '4531ca610c2f04d45072823222cac12c49c3ab74', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'd995a87095216c4f1cf32b8e6c789dffffcf2572', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
-            this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option, ref: (el) => {
+            this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option, searchTerm: this.state._value, ref: (el) => {
                     if (el)
                         this.refSuggestions[index] = el;
                 }, selected: this.state._value === option, onClick: () => {
@@ -18330,15 +18364,13 @@ class KolImage {
         };
     }
     validateAlt(value) {
-        watchString(this, '_alt', value, {
-            required: true,
-        });
+        validateAlt(this, value, { required: true });
     }
     validateLoading(value) {
         validateLoading(this, value);
     }
     validateSizes(value) {
-        watchString(this, '_sizes', value);
+        validateImageSizes(this, value);
     }
     validateSrc(value) {
         validateImageSource(this, value, {
@@ -18346,7 +18378,7 @@ class KolImage {
         });
     }
     validateSrcset(value) {
-        watchString(this, '_srcset', value);
+        validateImageSrcset(this, value);
     }
     componentWillLoad() {
         this.validateAlt(this._alt);
@@ -18356,7 +18388,7 @@ class KolImage {
         this.validateSrcset(this._srcset);
     }
     render() {
-        return (hAsync("img", { key: '23837493ec11632608a497a0319b945b91cadb6d', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
+        return (hAsync("img", { key: 'cca1e1b65e9aab11b4c15bea394d6c54ead1a123', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
     }
     static get watchers() { return {
         "_alt": ["validateAlt"],
@@ -25903,7 +25935,7 @@ class KolSingleSelect {
                 (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
             }, class: clsx('kol-single-select__delete', {
                 'kol-single-select__delete--disabled': this.state._disabled,
-            }) })), hAsync(CustomSuggestionsToggleFc, { key: '6ed5dfdd0465c0aa15745ed3b0210eec01f769e2', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'f6caab6259e0928ecdff02385e690ff6aba9bbb4', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, ref: (el) => {
+            }) })), hAsync(CustomSuggestionsToggleFc, { key: '6ed5dfdd0465c0aa15745ed3b0210eec01f769e2', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'f6caab6259e0928ecdff02385e690ff6aba9bbb4', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
             }, selected: this._value === option.value, onClick: (event) => {
@@ -26380,6 +26412,9 @@ var KolSplitButtonDefaultStyle0 = defaultStyleCss$9;
 class KolSplitButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.catchPrimaryRef = (ref) => {
+            this.primaryButtonWcRef = ref;
+        };
         this.clickButtonHandler = {
             onClick: (event) => {
                 var _a, _b;
@@ -26387,9 +26422,6 @@ class KolSplitButton {
                 if (typeof ((_a = this._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
                     (_b = this._on) === null || _b === void 0 ? void 0 : _b.onClick(event, this._value);
                 }
-                else {
-                    this.toggleDropdown();
-                }
             },
         };
         this.clickToggleHandler = {
@@ -26404,7 +26436,9 @@ class KolSplitButton {
         this.handleOnClose = () => {
             this.state = Object.assign(Object.assign({}, this.state), { _show: false });
         };
+        this._accessKey = undefined;
         this._ariaControls = undefined;
+        this._ariaDescription = undefined;
         this._ariaExpanded = undefined;
         this._ariaSelected = undefined;
         this._customClass = undefined;
@@ -26416,6 +26450,7 @@ class KolSplitButton {
         this._name = undefined;
         this._on = undefined;
         this._role = undefined;
+        this._shortKey = undefined;
         this._syncValueBySelector = undefined;
         this._tooltipAlign = 'top';
         this._type = 'button';
@@ -26425,12 +26460,19 @@ class KolSplitButton {
             _show: false,
         };
     }
+    async getValue() {
+        return this._value;
+    }
+    async kolFocus() {
+        var _a;
+        await ((_a = this.primaryButtonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
+    }
     render() {
         const i18nDropdownLabel = 'kol-split-button-dropdown-label';
-        return (hAsync("div", { key: 'adfeb36fc1c13115648cab2c692dcf28ede4f663', class: "kol-split-button" }, hAsync("div", { key: '6ddddfa00a901d7a1c02a242384ba6478955c13b', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '73295b6c589ee559c4e301c6685568e0aa6359de', class: clsx('kol-split-button__button', {
+        return (hAsync("div", { key: '2ca0df775c2fcce89473dfeaad1fbb64235b8a3b', class: "kol-split-button" }, hAsync("div", { key: '8933d5eddbc53f3653dcba1c4bcee525cff244b4', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: 'f5a0ca81140515725acb321757a7fe36ee02ea14', class: clsx('kol-split-button__button', {
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }), _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '29f15b767934692234c76d6738696ea225488d24', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '689696759403849639ec892383aad2d055ac1482', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: 'ba4151408b5ea8295eaee3f680ccd394e081464b', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '88c02a85478c3cedae8272e2f3f4848bbf031488' }))));
+            }), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '4ee2a8564093ceaf91735a06cadb2d61477e8403', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: 'aae9e7140a3f4fe3c892a29172b33c72ef165a30', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: '032232308b826e91f2bed8dce79ce898961f5f0f', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'dc706f0a2c45e7527111af72e0bdf5b6a551ef60' }))));
     }
     async closePopup() {
         this.handleOnClose();
@@ -26444,7 +26486,9 @@ class KolSplitButton {
         "$flags$": 57,
         "$tagName$": "kol-split-button",
         "$members$": {
+            "_accessKey": [1, "_access-key"],
             "_ariaControls": [1, "_aria-controls"],
+            "_ariaDescription": [1, "_aria-description"],
             "_ariaExpanded": [4, "_aria-expanded"],
             "_ariaSelected": [4, "_aria-selected"],
             "_customClass": [1, "_custom-class"],
@@ -26456,12 +26500,15 @@ class KolSplitButton {
             "_name": [1],
             "_on": [16],
             "_role": [1],
+            "_shortKey": [1, "_short-key"],
             "_syncValueBySelector": [1, "_sync-value-by-selector"],
             "_tooltipAlign": [1, "_tooltip-align"],
             "_type": [1],
             "_value": [8],
             "_variant": [1],
             "state": [32],
+            "getValue": [64],
+            "kolFocus": [64],
             "closePopup": [64]
         },
         "$listeners$": undefined,

package/dist/index.mjs

@@ -3828,6 +3828,10 @@ const validateAdjustHeight = (component, value) => {
     watchBoolean(component, '_adjustHeight', value);
 };
 
+const validateAlt = (component, value, options = {}) => {
+    watchString(component, '_alt', value, options);
+};
+
 const validateAlignment = (component, propName, value) => {
     watchValidator(component, propName, (value) => typeof value === 'string' && alignPropTypeOptions.includes(value), new Set(alignPropTypeOptions), value, {
         defaultValue: 'top',
@@ -4194,6 +4198,14 @@ const validateImageSource = (component, value, options) => {
     watchString(component, '_src', value, options);
 };
 
+const validateImageSizes = (component, value, options = {}) => {
+    watchString(component, '_sizes', value, options);
+};
+
+const validateImageSrcset = (component, value, options = {}) => {
+    watchString(component, '_srcset', value, options);
+};
+
 const validateIndeterminate = (component, value) => {
     watchBoolean(component, '_indeterminate', value);
 };
@@ -5130,13 +5142,28 @@ const AlertIcon = ({ type, label }) => {
     }
 };
 
+const vibrateOnError = () => {
+    if (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {
+        return;
+    }
+    const ua = navigator.userActivation;
+    const hasGesture = (ua === null || ua === void 0 ? void 0 : ua.isActive) || (ua === null || ua === void 0 ? void 0 : ua.hasBeenActive);
+    if (!hasGesture) {
+        return;
+    }
+    if (!matchMedia('(any-pointer: coarse)').matches) {
+        return;
+    }
+    try {
+        navigator.vibrate([100, 75, 100, 75, 100]);
+    }
+    catch (_a) {
+    }
+};
 const KolAlertFc = (props, children) => {
-    var _a, _b;
     const { class: classNames = {}, alert = false, hasCloser = false, label, level = 0, type = 'default', variant = 'msg', onAlertTimeout, onCloserClick } = props, other = __rest(props, ["class", "alert", "hasCloser", "label", "level", "type", "variant", "onAlertTimeout", "onCloserClick"]);
     if (alert) {
-        if ((_a = navigator.userActivation) === null || _a === void 0 ? void 0 : _a.hasBeenActive) {
-            (_b = navigator === null || navigator === void 0 ? void 0 : navigator.vibrate) === null || _b === void 0 ? void 0 : _b.call(navigator, [100, 75, 100, 75, 100]);
-        }
+        vibrateOnError();
         setTimeout(() => {
             onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();
         }, 10000);
@@ -5201,7 +5228,7 @@ class KolAlertWc {
             onCloserClick: this.close,
             onAlertTimeout: this.handleAlertTimeout,
         };
-        return (hAsync(KolAlertFc, Object.assign({ key: '9038051f21b86a9c83c8ac5619e723dff5ebcbeb' }, props), hAsync("slot", { key: 'cfd116176ab783db5232d9d5520f8ae890ca44db' })));
+        return (hAsync(KolAlertFc, Object.assign({ key: '2b0d74465270eef8d8d6f3da8c04377f862e8630' }, props), hAsync("slot", { key: '55e8ad62be763c26af16813e5ebfac2ce1f63b54' })));
     }
     validateAlert(value) {
         watchBoolean(this, '_alert', value);
@@ -17383,8 +17410,15 @@ const CustomSuggestionsToggleFc = ({ onClick, disabled }) => {
         hAsync(KolIconTag, { _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') })));
 };
 
-const CustomSuggestionsOptionFc = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option }) => {
-    return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: ref, "data-index": index, tabIndex: -1, role: "option", "aria-selected": selected ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: "kol-custom-suggestions-option", onKeyDown: onKeyDown }, option));
+const CustomSuggestionsOptionFc = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm }) => {
+    const highlightSearchTerm = (text, searchTerm) => {
+        if (!(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.trim()))
+            return text;
+        const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+        const parts = text.split(regex);
+        return parts.map((part, partIndex) => (regex.test(part) ? hAsync("mark", { key: partIndex }, part) : part));
+    };
+    return (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: ref, "data-index": index, tabIndex: -1, role: "option", "aria-selected": selected ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: "kol-custom-suggestions-option", onKeyDown: onKeyDown }, highlightSearchTerm(String(option), searchTerm || '')));
 };
 
 const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {
@@ -17492,7 +17526,7 @@ class KolCombobox {
     render() {
         return (hAsync(FormFieldStateWrapper, Object.assign({ key: '44bc85c62caa382896b635dbc743f16d24863644' }, this.getFormFieldProps()), hAsync(InputContainerStateWrapperFc, { key: 'fd4b270034c88219b2f7f7eae2591334906ece02', state: this.state }, hAsync("div", { key: 'd4510edc466749cef9b6291afd9c282c77b88f8f', class: "kol-combobox__group" }, hAsync(InputStateWrapper, Object.assign({ key: 'ddc7d75b247724e081da3b8360238e271110cdca' }, this.getInputProps())), hAsync(CustomSuggestionsToggleFc, { key: '4531ca610c2f04d45072823222cac12c49c3ab74', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'd995a87095216c4f1cf32b8e6c789dffffcf2572', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
-            this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option, ref: (el) => {
+            this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option, searchTerm: this.state._value, ref: (el) => {
                     if (el)
                         this.refSuggestions[index] = el;
                 }, selected: this.state._value === option, onClick: () => {
@@ -18326,15 +18360,13 @@ class KolImage {
         };
     }
     validateAlt(value) {
-        watchString(this, '_alt', value, {
-            required: true,
-        });
+        validateAlt(this, value, { required: true });
     }
     validateLoading(value) {
         validateLoading(this, value);
     }
     validateSizes(value) {
-        watchString(this, '_sizes', value);
+        validateImageSizes(this, value);
     }
     validateSrc(value) {
         validateImageSource(this, value, {
@@ -18342,7 +18374,7 @@ class KolImage {
         });
     }
     validateSrcset(value) {
-        watchString(this, '_srcset', value);
+        validateImageSrcset(this, value);
     }
     componentWillLoad() {
         this.validateAlt(this._alt);
@@ -18352,7 +18384,7 @@ class KolImage {
         this.validateSrcset(this._srcset);
     }
     render() {
-        return (hAsync("img", { key: '23837493ec11632608a497a0319b945b91cadb6d', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
+        return (hAsync("img", { key: 'cca1e1b65e9aab11b4c15bea394d6c54ead1a123', class: "kol-image", alt: this.state._alt, loading: this.state._loading, sizes: this.state._sizes, src: this.state._src, srcset: this.state._srcset }));
     }
     static get watchers() { return {
         "_alt": ["validateAlt"],
@@ -25899,7 +25931,7 @@ class KolSingleSelect {
                 (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
             }, class: clsx('kol-single-select__delete', {
                 'kol-single-select__delete--disabled': this.state._disabled,
-            }) })), hAsync(CustomSuggestionsToggleFc, { key: '6ed5dfdd0465c0aa15745ed3b0210eec01f769e2', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'f6caab6259e0928ecdff02385e690ff6aba9bbb4', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, ref: (el) => {
+            }) })), hAsync(CustomSuggestionsToggleFc, { key: '6ed5dfdd0465c0aa15745ed3b0210eec01f769e2', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc, { key: 'f6caab6259e0928ecdff02385e690ff6aba9bbb4', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` } }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
             }, selected: this._value === option.value, onClick: (event) => {
@@ -26376,6 +26408,9 @@ var KolSplitButtonDefaultStyle0 = defaultStyleCss$9;
 class KolSplitButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.catchPrimaryRef = (ref) => {
+            this.primaryButtonWcRef = ref;
+        };
         this.clickButtonHandler = {
             onClick: (event) => {
                 var _a, _b;
@@ -26383,9 +26418,6 @@ class KolSplitButton {
                 if (typeof ((_a = this._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
                     (_b = this._on) === null || _b === void 0 ? void 0 : _b.onClick(event, this._value);
                 }
-                else {
-                    this.toggleDropdown();
-                }
             },
         };
         this.clickToggleHandler = {
@@ -26400,7 +26432,9 @@ class KolSplitButton {
         this.handleOnClose = () => {
             this.state = Object.assign(Object.assign({}, this.state), { _show: false });
         };
+        this._accessKey = undefined;
         this._ariaControls = undefined;
+        this._ariaDescription = undefined;
         this._ariaExpanded = undefined;
         this._ariaSelected = undefined;
         this._customClass = undefined;
@@ -26412,6 +26446,7 @@ class KolSplitButton {
         this._name = undefined;
         this._on = undefined;
         this._role = undefined;
+        this._shortKey = undefined;
         this._syncValueBySelector = undefined;
         this._tooltipAlign = 'top';
         this._type = 'button';
@@ -26421,12 +26456,19 @@ class KolSplitButton {
             _show: false,
         };
     }
+    async getValue() {
+        return this._value;
+    }
+    async kolFocus() {
+        var _a;
+        await ((_a = this.primaryButtonWcRef) === null || _a === void 0 ? void 0 : _a.kolFocus());
+    }
     render() {
         const i18nDropdownLabel = 'kol-split-button-dropdown-label';
-        return (hAsync("div", { key: 'adfeb36fc1c13115648cab2c692dcf28ede4f663', class: "kol-split-button" }, hAsync("div", { key: '6ddddfa00a901d7a1c02a242384ba6478955c13b', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: '73295b6c589ee559c4e301c6685568e0aa6359de', class: clsx('kol-split-button__button', {
+        return (hAsync("div", { key: '2ca0df775c2fcce89473dfeaad1fbb64235b8a3b', class: "kol-split-button" }, hAsync("div", { key: '8933d5eddbc53f3653dcba1c4bcee525cff244b4', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: 'f5a0ca81140515725acb321757a7fe36ee02ea14', class: clsx('kol-split-button__button', {
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }), _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '29f15b767934692234c76d6738696ea225488d24', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: '689696759403849639ec892383aad2d055ac1482', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: 'ba4151408b5ea8295eaee3f680ccd394e081464b', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: '88c02a85478c3cedae8272e2f3f4848bbf031488' }))));
+            }), ref: this.catchPrimaryRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _id: this._id, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _buttonVariant: this._variant }), hAsync("div", { key: '4ee2a8564093ceaf91735a06cadb2d61477e8403', class: "kol-split-button__horizontal-line" }), hAsync(KolButtonWcTag, { key: 'aae9e7140a3f4fe3c892a29172b33c72ef165a30', class: "kol-split-button__secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`), _on: this.clickToggleHandler })), hAsync(KolPopoverWcTag, { key: '032232308b826e91f2bed8dce79ce898961f5f0f', _show: this.state._show, _on: { onClose: this.handleOnClose }, _align: "bottom" }, hAsync("slot", { key: 'dc706f0a2c45e7527111af72e0bdf5b6a551ef60' }))));
     }
     async closePopup() {
         this.handleOnClose();
@@ -26440,7 +26482,9 @@ class KolSplitButton {
         "$flags$": 57,
         "$tagName$": "kol-split-button",
         "$members$": {
+            "_accessKey": [1, "_access-key"],
             "_ariaControls": [1, "_aria-controls"],
+            "_ariaDescription": [1, "_aria-description"],
             "_ariaExpanded": [4, "_aria-expanded"],
             "_ariaSelected": [4, "_aria-selected"],
             "_customClass": [1, "_custom-class"],
@@ -26452,12 +26496,15 @@ class KolSplitButton {
             "_name": [1],
             "_on": [16],
             "_role": [1],
+            "_shortKey": [1, "_short-key"],
             "_syncValueBySelector": [1, "_sync-value-by-selector"],
             "_tooltipAlign": [1, "_tooltip-align"],
             "_type": [1],
             "_value": [8],
             "_variant": [1],
             "state": [32],
+            "getValue": [64],
+            "kolFocus": [64],
             "closePopup": [64]
         },
         "$listeners$": undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "3.0.2-ab502d4896d9763f93bb8cce1b07a1b2f8d04439.0",
+  "version": "3.0.2-d721ede5369345abe032367b7d05a7c5a20dca9b.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -46,10 +46,10 @@
   ],
   "devDependencies": {
     "rimraf": "6.0.1",
-    "@public-ui/components": "3.0.2-ab502d4896d9763f93bb8cce1b07a1b2f8d04439.0"
+    "@public-ui/components": "3.0.2-d721ede5369345abe032367b7d05a7c5a20dca9b.0"
   },
   "peerDependencies": {
-    "@public-ui/components": "3.0.2-ab502d4896d9763f93bb8cce1b07a1b2f8d04439.0"
+    "@public-ui/components": "3.0.2-d721ede5369345abe032367b7d05a7c5a20dca9b.0"
   },
   "sideEffects": false,
   "type": "commonjs",