@public-ui/hydrate 3.0.2-d721ede5369345abe032367b7d05a7c5a20dca9b.0 → 3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.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 @public-ui/hydrate
-pnpm i @public-ui/hydrate
-yarn add @public-ui/hydrate
+npm i -g @public-ui/hydrate
+pnpm i -g @public-ui/hydrate
+yarn add -g @public-ui/hydrate
 ```
 
 ## Usage
@@ -35,5 +35,3 @@ 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,10 +3832,6 @@ 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',
@@ -4202,14 +4198,6 @@ 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);
 };
@@ -5146,28 +5134,13 @@ 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) {
-        vibrateOnError();
+        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]);
+        }
         setTimeout(() => {
             onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();
         }, 10000);
@@ -5232,7 +5205,7 @@ class KolAlertWc {
             onCloserClick: this.close,
             onAlertTimeout: this.handleAlertTimeout,
         };
-        return (hAsync(KolAlertFc, Object.assign({ key: '2b0d74465270eef8d8d6f3da8c04377f862e8630' }, props), hAsync("slot", { key: '55e8ad62be763c26af16813e5ebfac2ce1f63b54' })));
+        return (hAsync(KolAlertFc, Object.assign({ key: '9038051f21b86a9c83c8ac5619e723dff5ebcbeb' }, props), hAsync("slot", { key: 'cfd116176ab783db5232d9d5520f8ae890ca44db' })));
     }
     validateAlert(value) {
         watchBoolean(this, '_alert', value);
@@ -17414,15 +17387,8 @@ 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, 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 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 CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {
@@ -17530,7 +17496,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, searchTerm: this.state._value, ref: (el) => {
+            this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option, ref: (el) => {
                     if (el)
                         this.refSuggestions[index] = el;
                 }, selected: this.state._value === option, onClick: () => {
@@ -18364,13 +18330,15 @@ class KolImage {
         };
     }
     validateAlt(value) {
-        validateAlt(this, value, { required: true });
+        watchString(this, '_alt', value, {
+            required: true,
+        });
     }
     validateLoading(value) {
         validateLoading(this, value);
     }
     validateSizes(value) {
-        validateImageSizes(this, value);
+        watchString(this, '_sizes', value);
     }
     validateSrc(value) {
         validateImageSource(this, value, {
@@ -18378,7 +18346,7 @@ class KolImage {
         });
     }
     validateSrcset(value) {
-        validateImageSrcset(this, value);
+        watchString(this, '_srcset', value);
     }
     componentWillLoad() {
         this.validateAlt(this._alt);
@@ -18388,7 +18356,7 @@ class KolImage {
         this.validateSrcset(this._srcset);
     }
     render() {
-        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 }));
+        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 }));
     }
     static get watchers() { return {
         "_alt": ["validateAlt"],
@@ -25935,7 +25903,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, searchTerm: this._inputValue, 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, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
             }, selected: this._value === option.value, onClick: (event) => {
@@ -26412,9 +26380,6 @@ var KolSplitButtonDefaultStyle0 = defaultStyleCss$9;
 class KolSplitButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.catchPrimaryRef = (ref) => {
-            this.primaryButtonWcRef = ref;
-        };
         this.clickButtonHandler = {
             onClick: (event) => {
                 var _a, _b;
@@ -26422,6 +26387,9 @@ 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 = {
@@ -26436,9 +26404,7 @@ 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;
@@ -26450,7 +26416,6 @@ class KolSplitButton {
         this._name = undefined;
         this._on = undefined;
         this._role = undefined;
-        this._shortKey = undefined;
         this._syncValueBySelector = undefined;
         this._tooltipAlign = 'top';
         this._type = 'button';
@@ -26460,19 +26425,12 @@ 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: '2ca0df775c2fcce89473dfeaad1fbb64235b8a3b', class: "kol-split-button" }, hAsync("div", { key: '8933d5eddbc53f3653dcba1c4bcee525cff244b4', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: 'f5a0ca81140515725acb321757a7fe36ee02ea14', class: clsx('kol-split-button__button', {
+        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', {
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }), 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' }))));
+            }), _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' }))));
     }
     async closePopup() {
         this.handleOnClose();
@@ -26486,9 +26444,7 @@ 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"],
@@ -26500,15 +26456,12 @@ 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,10 +3828,6 @@ 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,14 +4194,6 @@ 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);
 };
@@ -5142,28 +5130,13 @@ 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) {
-        vibrateOnError();
+        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]);
+        }
         setTimeout(() => {
             onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();
         }, 10000);
@@ -5228,7 +5201,7 @@ class KolAlertWc {
             onCloserClick: this.close,
             onAlertTimeout: this.handleAlertTimeout,
         };
-        return (hAsync(KolAlertFc, Object.assign({ key: '2b0d74465270eef8d8d6f3da8c04377f862e8630' }, props), hAsync("slot", { key: '55e8ad62be763c26af16813e5ebfac2ce1f63b54' })));
+        return (hAsync(KolAlertFc, Object.assign({ key: '9038051f21b86a9c83c8ac5619e723dff5ebcbeb' }, props), hAsync("slot", { key: 'cfd116176ab783db5232d9d5520f8ae890ca44db' })));
     }
     validateAlert(value) {
         watchBoolean(this, '_alert', value);
@@ -17410,15 +17383,8 @@ 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, 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 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 CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {
@@ -17526,7 +17492,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, searchTerm: this.state._value, ref: (el) => {
+            this._filteredSuggestions.map((option, index) => (hAsync(CustomSuggestionsOptionFc, { index: index, option: option, ref: (el) => {
                     if (el)
                         this.refSuggestions[index] = el;
                 }, selected: this.state._value === option, onClick: () => {
@@ -18360,13 +18326,15 @@ class KolImage {
         };
     }
     validateAlt(value) {
-        validateAlt(this, value, { required: true });
+        watchString(this, '_alt', value, {
+            required: true,
+        });
     }
     validateLoading(value) {
         validateLoading(this, value);
     }
     validateSizes(value) {
-        validateImageSizes(this, value);
+        watchString(this, '_sizes', value);
     }
     validateSrc(value) {
         validateImageSource(this, value, {
@@ -18374,7 +18342,7 @@ class KolImage {
         });
     }
     validateSrcset(value) {
-        validateImageSrcset(this, value);
+        watchString(this, '_srcset', value);
     }
     componentWillLoad() {
         this.validateAlt(this._alt);
@@ -18384,7 +18352,7 @@ class KolImage {
         this.validateSrcset(this._srcset);
     }
     render() {
-        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 }));
+        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 }));
     }
     static get watchers() { return {
         "_alt": ["validateAlt"],
@@ -25931,7 +25899,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, searchTerm: this._inputValue, 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, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
             }, selected: this._value === option.value, onClick: (event) => {
@@ -26408,9 +26376,6 @@ var KolSplitButtonDefaultStyle0 = defaultStyleCss$9;
 class KolSplitButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.catchPrimaryRef = (ref) => {
-            this.primaryButtonWcRef = ref;
-        };
         this.clickButtonHandler = {
             onClick: (event) => {
                 var _a, _b;
@@ -26418,6 +26383,9 @@ 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 = {
@@ -26432,9 +26400,7 @@ 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;
@@ -26446,7 +26412,6 @@ class KolSplitButton {
         this._name = undefined;
         this._on = undefined;
         this._role = undefined;
-        this._shortKey = undefined;
         this._syncValueBySelector = undefined;
         this._tooltipAlign = 'top';
         this._type = 'button';
@@ -26456,19 +26421,12 @@ 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: '2ca0df775c2fcce89473dfeaad1fbb64235b8a3b', class: "kol-split-button" }, hAsync("div", { key: '8933d5eddbc53f3653dcba1c4bcee525cff244b4', class: "kol-split-button__root" }, hAsync(KolButtonWcTag, { key: 'f5a0ca81140515725acb321757a7fe36ee02ea14', class: clsx('kol-split-button__button', {
+        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', {
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }), 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' }))));
+            }), _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' }))));
     }
     async closePopup() {
         this.handleOnClose();
@@ -26482,9 +26440,7 @@ 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"],
@@ -26496,15 +26452,12 @@ 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-d721ede5369345abe032367b7d05a7c5a20dca9b.0",
+  "version": "3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.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-d721ede5369345abe032367b7d05a7c5a20dca9b.0"
+    "@public-ui/components": "3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0"
   },
   "peerDependencies": {
-    "@public-ui/components": "3.0.2-d721ede5369345abe032367b7d05a7c5a20dca9b.0"
+    "@public-ui/components": "3.0.2-f97556ada8a20e9abe2dbb519562bad234f7191b.0"
   },
   "sideEffects": false,
   "type": "commonjs",