@haiilo/catalyst 10.14.1 → 10.15.0

package/dist/cjs/cat-alert_29.cjs.entry.js

@@ -8477,6 +8477,9 @@ const CatDropdown = class {
      * Opens the dropdown.
      */
     async open() {
+        // we need to delay the initialization of the trigger until first
+        // interaction because the element might still be hidden (and thus not
+        // tabbable) if contained in another Stencil web component
         if (!this.trigger) {
             this.initTrigger();
         }
@@ -8546,7 +8549,10 @@ const CatDropdown = class {
         }, timeTransitionS);
     }
     render() {
-        return (index.h(index.Host, { key: 'ecbe6c25380b7e553dd81932af3faf7871e60650' }, index.h("slot", { key: '2c067a4bcbcb5491b1eb9c939b9f4ca1e13f4bf9', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '74c96accb106aba04746eb200ca2a57642828b2b', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: '064f79e0d0c636f087b0185f0813cfb263fc7832', name: "content" }))));
+        return (index.h(index.Host, { key: '7e36594a07f06a29d6360a275ac2aeff94c15a6e' }, index.h("slot", { key: '4eca46c3ef78b8dc33861b53b4c24fea7e55934b', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: '63cf5ee478ac0f4472525bf7af87b951f190c1a6', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '7721f06ff6ad699d11775edbb56b428ba3f2fcdd', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: 'a3019a04b20c6e0d18af8aa690ae6ff71bd30ae6', name: "content" }))));
+    }
+    componentDidLoad() {
+        this.initAnchor();
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -8557,7 +8563,15 @@ const CatDropdown = class {
         this.trigger.setAttribute('aria-expanded', 'false');
         this.trigger.setAttribute('aria-controls', this.contentId);
         this.trigger.addEventListener('click', () => this.toggle());
-        autoUpdate(this.trigger, this.content, () => this.update());
+        if (!this.anchor) {
+            autoUpdate(this.trigger, this.content, () => this.update(this.trigger));
+        }
+    }
+    initAnchor() {
+        this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];
+        if (this.anchor) {
+            autoUpdate(this.anchor, this.content, () => this.update(this.anchor));
+        }
     }
     findTrigger() {
         let trigger;
@@ -8576,8 +8590,8 @@ const CatDropdown = class {
         }
         return trigger;
     }
-    update() {
-        if (this.trigger) {
+    update(anchorElement) {
+        if (anchorElement) {
             const resize = this.noResize
                 ? []
                 : [
@@ -8591,7 +8605,7 @@ const CatDropdown = class {
                         }
                     })
                 ];
-            computePosition(this.trigger, this.content, {
+            computePosition(anchorElement, this.content, {
                 strategy: 'fixed',
                 placement: this.placement,
                 middleware: [offset(CatDropdown.OFFSET), flip(), ...resize]
@@ -8632,7 +8646,7 @@ const CatFormGroup = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '89edc92669abb1c9a1f4c5ed47830371a5f315bd', style: { '--label-size': this.labelSize } }, index.h("slot", { key: '451878b08d2ca7cfece502b00b14f2da3c274d88', onSlotchange: this.onSlotChange.bind(this) })));
+        return (index.h(index.Host, { key: '9dd41737f5494414b9d512ed96574d601354e30f', style: { '--label-size': this.labelSize } }, index.h("slot", { key: '59eb8e44f63bdb5530ff4abe9171997cbe4a315d', onSlotchange: this.onSlotChange.bind(this) })));
     }
     onSlotChange() {
         this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker'));
@@ -8664,7 +8678,7 @@ const CatIcon = class {
         this.a11yLabel = undefined;
     }
     render() {
-        return (index.h("span", { key: '03076f9f5e7335d8c42b1802e78ad24afa459c2e', innerHTML: this.iconSrc || (this.icon ? of.catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+        return (index.h("span", { key: '83b5dc326310880529e5edc274e2a3196a0e6234', innerHTML: this.iconSrc || (this.icon ? of.catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
                 icon: true,
                 [`icon-${this.size}`]: this.size !== 'inline'
             } }));
@@ -10432,9 +10446,9 @@ const CatPagination = class {
         this.iconNext = '$cat:pagination-right';
     }
     render() {
-        return (index.h("nav", { key: '1929458d04848122f7b5b5fa806b347c32d562a5', role: "navigation" }, index.h("ol", { key: 'e93478ef96a8a8ca0b11f238c168194934848f1b', class: {
+        return (index.h("nav", { key: 'e0afa5efde129998d5899191374849c2538d5656', role: "navigation" }, index.h("ol", { key: '3b6d1838f508a3323d0ff11b95318eee5cfe5c89', class: {
                 [`cat-pagination-${this.size}`]: Boolean(this.size)
-            } }, index.h("li", { key: '116feebfe0d10971ffce4a8ff7f9ecd1d293c3cc' }, index.h("cat-button", { key: '22b12534bac787dc91ac969e30e4dce6ce3c8b87', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: of.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, index.h("li", { key: '1b17792a3ce126cedbfc832ee98c203bdc479057' }, index.h("cat-button", { key: 'b697f56af43022877c3822a0b584a7c0b433fb0d', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: of.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
+            } }, index.h("li", { key: 'fffae2ea8d502b03c01841f2cdf281150d6b62b5' }, index.h("cat-button", { key: '8f320c285b322ca8ae618143b70fdf85b227c232', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: of.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, index.h("li", { key: '77d3aa0acb4a27cd8c65d7396dab318dcce7825c' }, index.h("cat-button", { key: 'fe70cf4c908cbc7ac2bd2167f778f42fa3b49025', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: of.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
     }
     get isFirst() {
         return this.page === 0;
@@ -10536,7 +10550,7 @@ const CatRadio = class {
         this.input.blur();
     }
     render() {
-        return (index.h(index.Host, { key: '4a49b7834c01dc4327944c53f3b822d8775eee01' }, index.h("label", { key: '81dbf8a09db266eaba01a2f3a374b73254795a86', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { key: '87b922e8bc26e68835fcd4ea6ed126012d11e50a', class: "radio" }, index.h("input", { key: '61d1cd9e9081ee11d3b712517a181ab6102496bb', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: 'bbe1950285fc2a9e9723bcb8cd92d28cdda29e65', class: "circle" })), index.h("span", { key: '1d88e32b17d00de877ee850d7d454c42f1dbe297', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '4075a46bee01b98327e8a0989114a35102283486', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '8e16fc09d52dd0635fb1025a28b248617cc90dfb', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '88f943828f89127bc64b740dfe05ad9385c95312', class: "circle-placeholder" }), index.h(CatFormHint, { key: 'f20f806b22a50ccdccee130da835f4702d28f719', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
+        return (index.h(index.Host, { key: 'ac195620510636c4a00252872b925c26b7e40809' }, index.h("label", { key: 'bdca13538284884a2e8b66365d32c951b84e19e9', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { key: 'e1c58b79ee19209fafb8120e4ce560c6df260454', class: "radio" }, index.h("input", { key: 'b847d19afa147207a7a21586f941ce38da8bc11f', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: '9872df04798ec57660c35cd4b0cad8e179668022', class: "circle" })), index.h("span", { key: '89d6e1dc470e6db8c94ecc7567392eeaae636f67', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: 'ff6c945b79f690771e3751c95685cdf9df91c9cf', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '24b4f214a0c3d1c5d27f3517f4a57edde61a73dd', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '3e37c759d11347654c86d522189f82b6509fc680', class: "circle-placeholder" }), index.h(CatFormHint, { key: 'a236040feaa1f77d9e3bbf326f7cf2cac3ab5031', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -10627,7 +10641,7 @@ const CatRadioGroup = class {
         }
     }
     render() {
-        return (index.h("div", { key: '700491e3e68675725272b877296df47e8d538af3', role: "radiogroup", "aria-label": this.a11yLabel }, index.h("slot", { key: '3a03df80cac82f5530f5e1317b226d6d120b52ba' })));
+        return (index.h("div", { key: '597881a52c2314f3cc6e159473d8dc83e5944900', role: "radiogroup", "aria-label": this.a11yLabel }, index.h("slot", { key: 'ca1d499d74100334a86bf75362bd61f3674d31fa' })));
     }
     init() {
         this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
@@ -10716,13 +10730,13 @@ const CatScrollable = class {
     }
     render() {
         return [
-            index.h("div", { key: 'b9e809dfdeafaba07bf5e6b6fee92b256c5dc7ec', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && index.h("div", { key: '2a1fd0f1de1abbbba912e571197cb3bec51d458f', class: "shadow-top" }), !this.noShadowX && index.h("div", { key: '7d45944d3e77653c57bac6f40a2903a00bbe07d3', class: "shadow-left" }), !this.noShadowX && index.h("div", { key: '4b556dbb3cec3f34fce448721a8b0f1a8fa2e2c3', class: "shadow-right" }), !this.noShadowY && index.h("div", { key: 'dcbcf18521b4cbfd0f9b50e2a0090fff1e230571', class: "shadow-bottom" })),
-            index.h("div", { key: '0847d6934ff533528636f27b6e2ca41af71f6538', ref: el => (this.scrollElement = el), class: {
+            index.h("div", { key: '3fa7e90419b11118694def5d300036b1062fb685', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && index.h("div", { key: '3f7a3b2aa4a8b434ab66fc676e02771e056dfc95', class: "shadow-top" }), !this.noShadowX && index.h("div", { key: '450547a0b1a08a15903e605f2bd12c1eb2637089', class: "shadow-left" }), !this.noShadowX && index.h("div", { key: '69fe8dc3f0282d9d8bf1ccd65add30c0046789c4', class: "shadow-right" }), !this.noShadowY && index.h("div", { key: 'b2f1df225d3653cd778b28f2f94724ff1f7a7729', class: "shadow-bottom" })),
+            index.h("div", { key: '56833efe4ee21f847c2321e89e0b3e2fa9a7240b', ref: el => (this.scrollElement = el), class: {
                     'scrollable-content': true,
                     'scroll-x': !this.noOverflowX,
                     'scroll-y': !this.noOverflowY,
                     'no-overscroll': this.noOverscroll
-                } }, index.h("slot", { key: 'f1e5dd010c1e4fe9f875046096d313b76a55b062' }))
+                } }, index.h("slot", { key: 'c959b7cbbd06a0233ad773738ef925b05bd76be3' }))
         ];
     }
     attachEmitter(from, emitter) {
@@ -11663,7 +11677,7 @@ const CatSelectTest = class {
         setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
     }
     render() {
-        return (index.h(index.Host, { key: '6dee38053268c2d945c195cfd4dd39109ed22021', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, index.h("cat-select", { key: 'fa571970ee14e63d95567ed847af36d2da7e96ae', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, index.h("span", { key: 'a222dd43988c0e088903c8f260a7bcb2a074c73e', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { key: '34314fa05e1dc159594d12a242b720276449e35d', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: 'ac72d824efb07f6012fee35725c9e5fd6e16b9f8', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: 'e4965ee7c2c0d2452bf907fcc51809b45f590219', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: '62b13c5e38165dbcf6c4b98376d65183e45b6b02', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), index.h("cat-select", { key: '6417bfc737cb4fab8fbbcd777c9f522f084f375f', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), index.h("cat-select", { key: '9e530aad5e9cd9add1fcfaf8fc00651091c267c4', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), index.h("cat-dropdown", { key: '5cc4e92952af134af6fabc5fe6555ba7e8f5d3f2', overflow: true }, index.h("cat-button", { key: '5916378b87e75d58bdc3b253e7731f9a0a7a5350', slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { key: '9efbc90e07ffba870869de8682f4e57a7611550c', slot: "content", style: { width: '400px' } }, index.h("cat-select", { key: 'd45765d2243918ef11b8ec63438347dd8421fe6d', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
+        return (index.h(index.Host, { key: '745d55bbd0e1c38377f5f7ed138dc78213b47960', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, index.h("cat-select", { key: '7c201ebc18e36a8551899b7e5276a63ded6bb6c8', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, index.h("span", { key: 'a0c9f9514070e2101c84839292bbc749a7969eab', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { key: 'b648ecf10f825cb33a11da79b6528caf78b7b07c', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: '23e6ab45009463f2d703d8913b232ade2f1abfa3', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: '18f247000136a32e7ec202c7be7f01e625a4a40d', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: '445e29437d8af225222a9af1e2cd87e730d23b8f', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), index.h("cat-select", { key: '781b635fbe75a7cc9f8bfb840b0614b65f53b7f6', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), index.h("cat-select", { key: '2078bf8f1778a21c1b6a4180292b244a8b11eb62', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), index.h("cat-dropdown", { key: '42a8847c8e88d349f4919794ca93e067a25ecf36', overflow: true }, index.h("cat-button", { key: '55f407b6d3316311faa138169f1eb8725757f588', slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { key: 'c68ad1b486b5985bb550d026ba2969a786995c48', slot: "content", style: { width: '400px' } }, index.h("cat-select", { key: '2a32550e0f87e8aa3f90abbe819c7ceab0d9c773', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
     }
     get countryConnector() {
         return {
@@ -12919,7 +12933,7 @@ const CatSkeleton = class {
         this.lines = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '9039e34e1c03c573e07e1fc9f0041bbb5bc9369e' }, Array.from(Array(this.count)).map(() => (index.h("div", { style: this.style, class: {
+        return (index.h(index.Host, { key: 'aac4684f2816b1be2367866041d15e9fac0de7ac' }, Array.from(Array(this.count)).map(() => (index.h("div", { style: this.style, class: {
                 skeleton: true,
                 [`skeleton-${this.effect}`]: Boolean(this.effect),
                 [`skeleton-${this.variant}`]: Boolean(this.variant),
@@ -12959,9 +12973,9 @@ const CatSpinner = class {
         this.a11yLabel = undefined;
     }
     render() {
-        return (index.h("span", { key: '5dc8097429f1b606c187ae3e5adc2871680f05f4', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
+        return (index.h("span", { key: '6e6fe85607e6f6b00fd095c176604aecc05ea75a', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
                 [`spinner-${this.size}`]: this.size !== 'inline'
-            } }, index.h("svg", { key: '2daf677665ac8f5089d33414acde28e1d7bf630d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, index.h("circle", { key: '7c38b0547d2aaa78921072917306765d866d4d97', cx: "24", cy: "24", r: "21.5" }))));
+            } }, index.h("svg", { key: '9c5823b8f4ab7796a34342901e1d1278a3c34537', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, index.h("circle", { key: '386e29a6dd880ae337f20ba1c4074edb7484c8f6', cx: "24", cy: "24", r: "21.5" }))));
     }
 };
 CatSpinner.style = CatSpinnerStyle0;
@@ -12993,7 +13007,7 @@ const CatTab = class {
         this.catClick.emit(event);
     }
     render() {
-        return index.h(index.Host, { key: '454f82a9ffacf27abd207c7e06af0c2a888cc201' });
+        return index.h(index.Host, { key: '423a9d58be83b8acccdbe72ffb0f75733dc91cc7' });
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -13057,7 +13071,7 @@ const CatTabs = class {
         this.activate(this.tabs[index]);
     }
     render() {
-        return (index.h(index.Host, { key: '19c67fc838c4dd854168d398b3dd6c9e0e522ff0' }, this.tabs.map((tab) => {
+        return (index.h(index.Host, { key: 'b3119423d8f6cae90991af25bd6d7d6ef94b5609' }, this.tabs.map((tab) => {
             return (index.h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
                     'cat-tab': true,
                     'cat-tab-active': tab.id === this.activeTab,
@@ -13174,15 +13188,15 @@ const CatTextarea = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '070f00143aba6158c8722cf6d56d5da6e74a1355' }, index.h("div", { key: 'f72ab3bece3d9b260e0d9619ed86d94be3fcfcc1', class: {
+        return (index.h(index.Host, { key: '75665cdb53070b131971482ec39853e07d2f4ca9' }, index.h("div", { key: 'a2439d68f9e7314a9f970ff10f900c4c04e23e4a', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, index.h("div", { key: 'fc861702a03fd6104ce7e09eecc666b043323e05', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '2406d6aaad8d1b468ec1b3c3256e0b9c816eb813', htmlFor: this.id, part: "label" }, index.h("span", { key: '48596c3e9fae64c6ed94e3cf9d7faf82a4f8c5ce', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '413d2987f8211e9ee6c4a64c1364665dc8d16301', name: "label" })) || this.label, index.h("div", { key: '161a8717ff84623558e9a911a9fd5df2692f66ff', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'b7023d75088999709ba43fefe3e96d1f155f9d60', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '4f0e5c76b51eeb5313da62aecd0058a2511116ca', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: '65a934a9c376e38ba4f152499141bb43e0b1471a', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), index.h("div", { key: 'd8fe7aaa5410b3f84d0813a338e3dce6ea94d102', class: "textarea-container" }, index.h("div", { key: '60c23259f0fb3e225215351e04bc07702ecd2a23', class: {
+            } }, index.h("div", { key: 'fc3556d42d3b02cf31d83cccf03b0226d53c9517', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '1e7a169e766a4a349a080fab967aa6c678b27ede', htmlFor: this.id, part: "label" }, index.h("span", { key: '3658d2fc258162a3c1c635fa1b5148005d1e1bac', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '2ce32b2a5984547d09aa8921f9ee33b918e1aab2', name: "label" })) || this.label, index.h("div", { key: '36ef608cdee7550adc0be30270db64f3dcd4ea2e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '4a7480181592a16d39db92273dd9a32fe338388a', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'de54a7e25c78c6cdc1f8683c8e5c1773714323ce', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), this.maxLength && (index.h("div", { key: '05a49aeae9c47c22c5ee0c95a5d4d1708f8aeff1', class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), index.h("div", { key: 'b2a6bc4d2f61b4a5683fd7fdf39123c8c0c4c39e', class: "textarea-container" }, index.h("div", { key: '79a4291af19da695a14b80539cfc6d6e9313ccaf', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, index.h("textarea", { key: 'c12a26593be4eb72081163cf0d341dda47293b20', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (index.h("cat-icon", { key: '5f865aa68764fd24b0101158237fa3645e4e2579', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { key: '7cb20d364b1c19d074175380c358f26bdaaf0293', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, index.h("textarea", { key: '3e06a6c68119338adf15b93d717da4a3dbc4e8cb', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (index.h("cat-icon", { key: '3845c0f84764b5f382b8e36ff90571548c057087', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { key: '564729eaa387e7b08c35415dd9ac16ad6e2c806a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -13400,14 +13414,14 @@ const CatTime = class {
         this.input?.clear();
     }
     render() {
-        return (index.h(index.Host, { key: 'f27248f07e9dee2b129f3ffd651f3fbc40ec9c60' }, index.h("cat-input", { key: '8031cdca279be78f7af36e62c961aeb74641ad6e', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '658e7782b963294d9c48443b98e47841e96276ca', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: 'a773fa33d7dcc51cbdad72ae4bbfff3158e0b1e8', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: 'e6b75349897b779521da75541dcd6467bd57af62', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: 'e6ca724256eacbaa48d0aa4a4dfcd3eeba8adfec', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: 'c60bd2a02b5f7a0e12fb397e7d4230e648b815e9', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: '80fcef2872af257486240ea8c3447b38d55f13a5', slot: "addon", placement: this.placement }, index.h("cat-button", { key: '8ff466440e2a2631770509500a40c9cae5d7d549', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: '8ba70ebb9ab84e28712df787b7402a7e2fbd7b59', slot: "content", class: "cat-nav" }, index.h("ul", { key: '50c2e92dc053177bc0b5a99bb77468e906f58f9e' }, this.timeArray().map(time => {
+        return (index.h(index.Host, { key: '4f78a1c5d3dd09a6f7476a4fed55ba1241305b4b' }, index.h("cat-input", { key: 'e783cd952c5a9bfc1b205eabf62b4b7e42684695', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '945c465de003a32f67c6cab827afe8667c3d8436', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: '801d55325c6ec485c8519586a1fe03751b7ea4a2', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: '0dacef4090d789d0a600b5db2881bd9598e38a18', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '209dfdb875dbb40a0865dde72fd4aaa217a2592f', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: 'd3b901214820efebe32769996a8aa188d3a1e3e2', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: 'b25d55512fc792bcb159e016ea71547032856aca', slot: "addon", placement: this.placement }, index.h("cat-button", { key: '5b6d1cf64a4c561b7d56ddbbaecf4e035e1ec3d4', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: 'b24b73a4374c5304b600c07c8c5f6c01e478f990', slot: "content", class: "cat-nav" }, index.h("ul", { key: '386fda017f42a0152b0095f3a107f892c425f844' }, this.timeArray().map(time => {
             const isoTime = formatIso(time);
             const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
             return (index.h("li", null, index.h("cat-button", { class: {
                     'cat-nav-item': true,
                     'time-disabled': disabled
                 }, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
-        }))))), this.hasSlottedHint && (index.h("span", { key: '5d9cb046f0aa9e692578353ac6e07533670c9429', slot: "hint" }, index.h("slot", { key: '109e5477d55a9a90701a9d83aa2d79cf434ebbc0', name: "hint" }))))));
+        }))))), this.hasSlottedHint && (index.h("span", { key: 'e563a161e00cc919f39ecf663cc93065ca078f9a', slot: "hint" }, index.h("slot", { key: 'c302e5d24d005b43fe035865488318d03389d7cb', name: "hint" }))))));
     }
     timeArray() {
         const result = [];
@@ -13525,7 +13539,7 @@ const CatToggle = class {
         this.input.blur();
     }
     render() {
-        return (index.h(index.Host, { key: '082c75c6860aac2fea848a631486c7db7d9f7cda' }, index.h("label", { key: '4526f5ce9dc8c03b8756ac5b8fae64cd2a261dc7', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, index.h("input", { key: 'ada0e0e3532a4e15b75e5a5cfd29e41967636c64', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: '5c798c5d9fb4a527e6b4f27175492597398565eb', class: "toggle" }), index.h("span", { key: '5c69e3ab3d372807b61ec3eb6eb7b71dd7c48430', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '0774821337d69d482e2086febe75d15d9fc3bbea', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: 'eac22e3e1874765b300df6b1e304b1eb37844335', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: 'c1c2954851706feded0c17c7b261ec144927aafb', class: "toggle-placeholder" }), index.h(CatFormHint, { key: 'd5308787a63d44e3f3a54bfeeff6d50cdd95670f', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
+        return (index.h(index.Host, { key: 'e41e7a93c56caf528e912f498da751e9a5710ba4' }, index.h("label", { key: '85521c6e6d45dc66625ba22eb3580b66544afc9c', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, index.h("input", { key: 'a3dac924a5139b0574cbc61ae884dc59bb17e2be', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: 'be56569d133a4ee3d2177209bb72db2f23414748', class: "toggle" }), index.h("span", { key: '83696bea618f5b68f5ecbf1e04e27cdad09cb7da', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '05affd31e735cbf00d1e273bef672911d8b7ac42', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '9f60cdd92373eff8d40926d5d23c359ec1aa65d6', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '1df00fec9243519ad820a34ddf0ff282874af215', class: "toggle-placeholder" }), index.h(CatFormHint, { key: '6bf5540c16adf497f33c51783bd624d71f18343f', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -13612,12 +13626,12 @@ const CatTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '38a9782f607e32cd7c6af0603a32f0880691cd64' }, index.h("slot", { key: '960baa37b44020a8032b5f90d2eaa8d90ee212ff' }), index.h("div", { key: 'f5a14f7a0e887c0e0b7879e44cee099b090cf913', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
+        return (index.h(index.Host, { key: '22e95841f5029e24e0ae9b08e0843fd8b8d360df' }, index.h("slot", { key: 'b9fc1e2472dc4610fe61ffc16274fa7b49510ecf' }), index.h("div", { key: 'e2971ec2746574a27b066ae9b3cece3236aa1bd9', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
                 tooltip: true,
                 'tooltip-hidden': this.inactive,
                 'tooltip-round': this.round,
                 [`tooltip-${this.size}`]: Boolean(this.size)
-            } }, index.h("slot", { key: '205c5d7b2f65120aa3d0f46a4539c1c5c6d888c8', name: "content" }, index.h("p", { key: 'e88757f1e19d4de60e1b1ca295d9e7fc74e88fee' }, this.content)))));
+            } }, index.h("slot", { key: 'afbcad951679fb8d139c8415a7305f498072276c', name: "content" }, index.h("p", { key: '6e10ef094c479288a02f8b874d48206158dece38' }, this.content)))));
     }
     async update() {
         if (this.trigger && this.tooltip) {