@haiilo/catalyst 14.3.0 → 14.5.0

package/dist/components/cat-checkbox2.js

@@ -90,13 +90,13 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class CatCheckbox extends H
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: '64f3d1f023c2e8ec2d3c0a23b1f1f0c19241f41f' }, h("label", { key: 'e54c1e60a1d3aa0ce78d218b036b87d04e1a1842', htmlFor: this.id, class: {
+        return (h(Host, { key: 'eb33a26363bc39edc83c1b1312c85f805e8e3894' }, h("label", { key: 'f8094c4c8859d30a4fe6096efad161a4503b2896', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            } }, h("input", { key: 'd28a1d799457139337ba0c782d913ade4e74fb07', "data-test": this.testId, ...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, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '96d80b03df081c19d36ca9d2d56b1542637855bd', class: "box", "aria-hidden": "true" }, h("svg", { key: '268e26a8db34695467583106349ceed890168e1c', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: 'ed1ba34e9839d1e80806ca52e94f4e7a3c6b720b', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: '21eef5470b82b17868a4a591dacce708d04fb048', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: '35d61e299c39c578069e05bb4f5982b33de8ac57', points: "1.5 5 10.5 5" }))), h("span", { key: 'b78cc985ede85e0174ab7d6fd851e9bc9348fdaf', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'bcdb0ed764451d3c7c11c00b68db3b48564bc73d', name: "label" })) || this.label, h("span", { key: '0ed579dadbdb3b4c92af29b670528ca253c49f37', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '03e1b787954ba280b670b86c2cfeda5a3635bed7', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '6264f8d9517ca500c36dc75bbda936a407c5429c', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (h("div", { key: 'e149380c00369d71c02da2dabd78447c515c52d3', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '86e662bf29c81eaf8db818500cb3aebc98fe939b', class: "box-placeholder" }), h(CatFormHint, { key: '3de67315be28edc3357bad66bcf0f1cdb64ee518', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            } }, h("input", { key: '02c15b7985af4252f45ff04ebd977e3c09883949', "data-test": this.testId, ...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, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'b4a30c339f54ab5ae1b7f9e31f6d0c409c6c2613', class: "box", "aria-hidden": "true" }, h("svg", { key: 'e3d0faed8b2d2d59fab9b8a2c011dd4d6aa5b338', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: '7f1d041823ce9ed4c4b1496b61de9c5767979ff7', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: 'dd636bd06ab6cf5918edaacb63091d9eb09ae0af', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: 'b46f113aae6d0e8e3bb5cd1a2740a7d7422ea749', points: "1.5 5 10.5 5" }))), h("span", { key: 'c0266346a2d7b22f8e18dba57737cd098217b08a', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && h("slot", { key: '2416235aa2a02df58f4d96337215725e426a729a', name: "label" })) || this.label, h("span", { key: '4da54bdb128f377225732f2c7d69bf205d5098c1', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '70b0dfdf0c4210394a09adb83866d6566a1df025', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'a49f720ae915fd3054748184d89fbe9c784cc730', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (h("div", { key: '10630551393491643e19ff001840aed935f78645', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: 'f4236a3a4c2f573bcd77311ed009e4d09ffb73af', class: "box-placeholder" }), h(CatFormHint, { key: '85c1227154f23e6e52a36fe7184fcb1ab999160e', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;

package/dist/components/cat-date-inline2.js

@@ -281,12 +281,12 @@ const CatDateInline = /*@__PURE__*/ proxyCustomElement(class CatDateInline exten
         const [minDate, maxDate] = this.getMinMaxDate();
         const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
         const [dateStart, dateEnd] = this.getValue();
-        return (h(Host, { key: '4f88a5e30d1f61645d5aa8282216db5edaa556d0', "aria-label": this.label || undefined }, h("div", { key: '9200c341cb79bdedc0735191f4ecfda4f117b047', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '02611e74ccbabd435b93aad59f3d1fff0726a27b', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { key: '115d1d26624922d8395fb2df8f745aa32f9cf2a9', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'eb833b75fa0e338644f72cbcb1fc5a548eb7dfc1', name: "label" })) || this.label, h("div", { key: '96c32106a48d3190bda2f4c8812c42e8c8d0fc49', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '8db39d017daa88f96ba29ca1633c0509aff20346', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'e553ac1bc15cfe07302954a54d00905b2c5bc742', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '8f7a7b2518113c00d12329ae0ca06bf98c334866', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: 'b7b0862916bdeb23d4be2438db325440f3fb0b58', class: "picker-head" }, h("cat-button", { key: '7904e2ef258bb24b6f1279dd6145295ae7db6cea', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), h("cat-button", { key: '178f7126e01234f503f4906259f69a622e0b9d18', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), h("h3", { key: '1b622bc415fa5e937bcfd2b1640b12e4e873e93f' }, this.getHeadline()), h("cat-button", { key: '033fc4f73a3e5b9588a50689dad07b8b43ef3a0f', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), h("cat-button", { key: '38a355bb323254c67fe5ed7d7d33a5ad214a1004', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), h("div", { key: 'd297630ebf2533932d7135aecb3d2166a8a2f151', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: 'ed47ea8d491e56c7907df646d742bba281750820', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
+        return (h(Host, { key: '0f06004b6e4a37950a8933175e66694e685a254d', "aria-label": this.label || undefined }, h("div", { key: '50eb04ff252b57dfaca6fcd612e3f4b6defda40d', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'f19844d5b24c2dc5de7b68d4de4988593582b6c3', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { key: 'c5fd299ba527527ad4025d28fa3e74f7daba201f', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'b20d1bd0440adac6f5c32e7cc11d5274882f913b', name: "label" })) || this.label, h("div", { key: '701a18fc68395264285e01d5bad7b111970f4f0a', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '2d82d9fa7ffca66b45f17201467b1d3ecf6ff0df', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '06094565395b6054d89cac6ce4399947387d2c88', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: 'd5082f212000ef6738235d32a0bc117a06074573', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: 'd085532af173d7224e8b9f12e3fe332d3aba4030', class: "picker-head" }, h("cat-button", { key: '162d251a5a27bd2b14cb7e4a0dc1365ee55da01f', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), h("cat-button", { key: 'eddfec3c6484b63c4292b688112966f23e0db900', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), h("h3", { key: '874b1707cc80604429797ae273526d6db311619a' }, this.getHeadline()), h("cat-button", { key: '738f739252c1bd6e036aad7bfddbb76a86db3a17', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), h("cat-button", { key: '935f968b3a1ea7879a5aa38163d8edc4fcdaea64', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), h("div", { key: '7f9a940cf201568daed8b4b35e44e74f61967188', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: '750c7dc2abe47cf05b75ba21e7c13ac153b07363', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
             const day = (i + this.locale.weekInfo.firstDay) % 7;
             return h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
-        })), this.weeks && (h("div", { key: 'b374554582d393c05beb6702ce04ad8077bc7f47', class: "picker-grid-weeks" }, dateGrid
+        })), this.weeks && (h("div", { key: '661cecfeef5e835e2e95b267c39a8608e40789d1', class: "picker-grid-weeks" }, dateGrid
             .filter((_, i) => i % 7 === 0)
-            .map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '99373d659fe800751f7a9e15ad36ae39900325b0', class: "picker-grid-days" }, dateGrid.map(day => {
+            .map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '215f61a30ec58c84d549181a8c216dc847bdbfa5', class: "picker-grid-days" }, dateGrid.map(day => {
             const isStartDate = isSameDay(dateStart, day);
             const isEndDate = isSameDay(dateEnd, day);
             const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
@@ -303,7 +303,7 @@ const CatDateInline = /*@__PURE__*/ proxyCustomElement(class CatDateInline exten
                     'date-focusable': this.canFocus(day),
                     'date-disabled': !this.canClick(day)
                 }, nativeAttributes: !this.canFocus(day) ? { tabindex: '-1' } : {}, variant: isStartDate || isEndDate ? 'filled' : isToday ? 'outlined' : 'text', a11yLabel: this.locale.toLocalStr(day), active: isStartDate || isEndDate || isRange, color: isStartDate || isEndDate || isToday ? 'primary' : 'secondary', disabled: !this.canClick(day), onClick: () => this.select(day), "data-date": this.locale.toLocalISO(day) }, day.getDate()));
-        }))), h("div", { key: '20b7927695e94d38b2d3ca98357234ca349efe44', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { key: 'a23f374f39e146922f0ef26245f0ad3ddef92b52', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { key: '897142aae96af3f1dbf8faa388546a750da32790', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { key: 'c1bfa1f3f46f56caeea23b39bd63e7c42ff6ed07', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: '5a892650df531633253d7495cd19800c3f07d572', class: "cursor-aria", "aria-live": "polite" })));
+        }))), h("div", { key: 'cede3e1fd2319aca96f3afccbab3113f17d4229b', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { key: '93dd8019983d1ae458706dbc62ad13e3131c29a5', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { key: '4836275c3b11b58d94f31c1c1f00f5bb3e9645b5', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { key: '58440f20e7ecd65dd8e2f136b11cb9b5a4379b79', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: '3a3507b2e3b4c0452e35f8eb78b2dd21c31e2c9d', class: "cursor-aria", "aria-live": "polite" })));
     }
     focus(date, focus = true) {
         const [minDate, maxDate] = this.getMinMaxDate();

package/dist/components/cat-date.js

@@ -123,14 +123,14 @@ const CatDate$1 = /*@__PURE__*/ proxyCustomElement(class CatDate extends HTMLEle
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: '8e61bf32ad23785d71d3d406c5233b67fd97d013' }, h("cat-input", { key: '88d0e2e74b85897d635720c38d20abde5b6c2a00', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, value: this.inputValue, dateMaskOptions: this.dateMaskOptions, onCatFocus: e => {
+        return (h(Host, { key: '664187eb3780f94f61b463088cf6a056a3107af5' }, h("cat-input", { key: '42e6d9c9edff8a699c81d98873164eb755aeaeab', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, value: this.inputValue, dateMaskOptions: this.dateMaskOptions, onCatFocus: e => {
                 this.inputFocused = e.target === this.input;
                 e.stopPropagation();
                 this.catFocus.emit(e.detail);
             }, onCatBlur: e => {
                 e.stopPropagation();
                 this.onInputBlur(e.detail);
-            } }, h("span", { key: 'ab9f44e69986f3181b34e49b30797f73cda4a76f', slot: "label" }, this.label, h("span", { key: 'd972e719de11e561a6dfc5b0d5ea04bee717df64', class: "label-aria" }, " (", this.locale.formatStr, ")")), h("cat-dropdown", { key: '8d11ecde79aab1b62b395bc6d6bed4a41e64189f', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, h("cat-button", { key: '67e4877caa735a95e6547ffc07ff7c3e91b7f5a7', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), h("div", { key: '587e5c57b4035a84658843483898a78631a822af', slot: "content" }, h("cat-date-inline", { key: '081dd6e2bf191b2a3b19b13c0d1933f8c7b1086b', ref: el => (this.dateInline = el), min: this.min, max: this.max, value: this.value, hint: true, weeks: true, noClear: true, onCatChange: this.onDateChange.bind(this) }))))));
+            } }, h("span", { key: '36b14afb75c694a1559e4b5539a2bde0be1f59bc', slot: "label" }, this.label, h("span", { key: 'f541147e5515a679db3adcf4c93c52514b9c9cb3', class: "label-aria" }, " (", this.locale.formatStr, ")")), h("cat-dropdown", { key: '5a73b806ed95c3c6367a5b74d764b31cba4ded92', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, h("cat-button", { key: 'ae9da7387e3baf2b1989c9b5d5c9b82d30257c69', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), h("div", { key: 'b255073bb1ce8e57def9f61c1b347880f9115533', slot: "content" }, h("cat-date-inline", { key: '07e019b2872994198e8cb56a54e12e24b2cb81a4', ref: el => (this.dateInline = el), min: this.min, max: this.max, value: this.value, hint: true, weeks: true, noClear: true, onCatChange: this.onDateChange.bind(this) }))))));
     }
     getTriggerA11yLabel() {
         const date = this.locale.fromLocalISO(this.value);

package/dist/components/cat-datepicker-inline.js

@@ -51,11 +51,11 @@ const CatDatepickerInline$1 = /*@__PURE__*/ proxyCustomElement(class CatDatepick
         this.pickr = this.initDatepicker(this.input);
     }
     render() {
-        return (h(Host, { key: '5877c910a861b8c82e32a8b636260bfccab1c57e' }, h("div", { key: '151936c5d8db28c6c7f6f602cc867c51762217aa', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
+        return (h(Host, { key: '22ff03e4cb6c74bc944e5022764308b6d2b2fe29' }, h("div", { key: '1c7e6b0beab570e1357014384ab8eaf76458858f', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
                 'datepicker-wrapper': true,
                 'datepicker-disabled': this.disabled,
                 'datepicker-readonly': this.readonly
-            } }, h("input", { key: 'edb97330b0b6146cc6cbdefe904b59681d0296b9', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
+            } }, h("input", { key: '75edfdc337ba101bd0cb9afa1ddef11571e94bf9', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
     }
     initDatepicker(input) {
         if (!input) {

package/dist/components/cat-datepicker.js

@@ -139,7 +139,7 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
     }
     render() {
         return [
-            h("cat-input", { key: 'ef465dc2e84455154dde17a4ebd1e742a5c3cd83', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, 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.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
+            h("cat-input", { key: 'd81f695ecf9eb3dd175a14070811b8ca99e13f67', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, 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.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
                     e.stopPropagation();
                     this.value = e.detail || undefined;
                 }, onCatFocus: e => {
@@ -148,8 +148,8 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
                 }, onCatBlur: e => {
                     e.stopPropagation();
                     this.catBlur.emit(e.detail);
-                } }, this.hasSlottedLabel && (h("span", { key: '99fdcacd96958d6f8f991a5fa539ee10d93918cd', slot: "label" }, h("slot", { key: '361f7fcd45fe913f1187aea3886831681272198a', name: "label" }))), this.hasSlottedHint && (h("span", { key: 'd063e6c5064c6e35781965c6fdfe792adcaf45cd', slot: "hint" }, h("slot", { key: '6f0bfa21a7c8fab7520edca8daa116376dbc2d30', name: "hint" })))),
-            h("div", { key: '1806da8cb2acf11efd58d94d24b963d69ab08923', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
+                } }, this.hasSlottedLabel && (h("span", { key: '41f0dfcbe0a7ab562a80416a109ee6283d602147', slot: "label" }, h("slot", { key: '4148dec98c036b3f7d604b16c05dfed648ec16a3', name: "label" }))), this.hasSlottedHint && (h("span", { key: '8181253f8adadc606f0d66abe5bad5a85b7a0f7f', slot: "hint" }, h("slot", { key: 'c6807aed385298a19d67e1f2652de82473ea6f16', name: "hint" })))),
+            h("div", { key: '8b0f02c5f6cf61ad89dccd831937649c6740035c', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
         ];
     }
     initDatepicker(input) {

package/dist/components/cat-dropdown2.js

@@ -1056,12 +1056,13 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.catClose = createEvent(this, "catClose", 7);
         this.id = nextUniqueId++;
         this._isOpen = false;
+        this.tabbableOptions = { getShadowRoot: true };
         /**
          * Tracking the origin of opening the dropdown and specify if initial focus should be set.
          * Currently we set it only when the origin is keyboard.
          * We might not need to track this in future when focus-visible support is improved across browsers
          */
-        this.hasInitialFocus = false;
+        this.isFocusVisible = false;
         /**
          * The placement of the dropdown.
          */
@@ -1078,6 +1079,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.noAutoClose = false;
         /**
          * Do not navigate focus inside the dropdown via vertical arrow keys.
+         * @deprecated use cat-menu
          */
         this.arrowNavigation = 'vertical';
         /**
@@ -1100,6 +1102,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.noInitialFocus = false;
         /**
          * Trigger element will not receive focus when dropdown is closed.
+         * @deprecated the property can be removed, focus is arranged internally
          */
         this.noReturnFocus = false;
         /**
@@ -1107,6 +1110,12 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
          * Can be useful when trigger is rendered dynamically.
          */
         this.delayedTriggerInit = false;
+        /**
+         * Whether the focus should be trapped inside dropdown popup.
+         * Use it only when the dropdown popup content has role dialog.
+         * @internal
+         */
+        this.focusTrap = true;
     }
     /**
      * Whether the dropdown is open.
@@ -1117,7 +1126,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
     }
     clickHandler(event) {
         if (!this.trigger && this.delayedTriggerInit) {
-            this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);
+            this.isFocusVisible = this.isEventOriginFromKeyboard(event.detail);
             this.initTrigger();
             this.toggle();
         }
@@ -1133,6 +1142,21 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
             this.close();
         }
     }
+    keydownHandler(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            this.close();
+        }
+    }
+    globalClickHandler(event) {
+        if (this.isOpen &&
+            !this.noAutoClose &&
+            // check if click was outside of the dropdown content
+            !event.composedPath().includes(this.content) &&
+            // check if click was not on an element marked with data-dropdown-no-close
+            !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
+            this.close();
+        }
+    }
     /**
      * Toggles the dropdown.
      */
@@ -1152,58 +1176,55 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         }
         this._isOpen = null;
         this.content.style.display = 'block';
-        this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;
+        this.isFocusVisible = isFocusVisible ?? this.isFocusVisible;
         const trigger = this.anchor || this.trigger;
         if (trigger) {
             this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));
         }
         // give CSS transition time to apply
-        setTimeout(() => {
+        requestAnimationFrame(() => {
             this._isOpen = true;
             this.content.classList.add('show');
             this.trigger?.setAttribute('aria-expanded', 'true');
-            this.trap = this.trap
-                ? this.trap.updateContainerElements(this.content)
-                : createFocusTrap(this.content, {
-                    tabbableOptions: {
-                        getShadowRoot: true
-                    },
-                    allowOutsideClick: true,
-                    clickOutsideDeactivates: event => !this.noAutoClose &&
-                        // check if click was outside of the dropdown content
-                        !event.composedPath().includes(this.content) &&
-                        // check if click was not on an element marked with data-dropdown-no-close
-                        !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),
-                    onPostDeactivate: () => this.close(),
-                    onPostActivate: () => this.catOpen.emit(),
-                    setReturnFocus: elem => (this.noReturnFocus ? false : this.trigger || elem),
-                    isKeyForward: event => {
-                        if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||
-                            (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')) {
-                            event.preventDefault();
-                            return true;
-                        }
-                        return event.key === 'Tab';
-                    },
-                    isKeyBackward: event => {
-                        if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||
-                            (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')) {
-                            event.preventDefault();
-                            return true;
+            if (this.focusTrap) {
+                this.trap = this.trap
+                    ? this.trap.updateContainerElements(this.content)
+                    : createFocusTrap(this.content, {
+                        tabbableOptions: this.tabbableOptions,
+                        allowOutsideClick: true,
+                        onPostActivate: () => this.catOpen.emit(),
+                        setReturnFocus: elem => (!this.isFocusVisible ? false : this.trigger || elem),
+                        isKeyForward: event => {
+                            if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||
+                                (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')) {
+                                event.preventDefault();
+                                return true;
+                            }
+                            return event.key === 'Tab';
+                        },
+                        isKeyBackward: event => {
+                            if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||
+                                (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')) {
+                                event.preventDefault();
+                                return true;
+                            }
+                            return event.key === 'Tab' && event.shiftKey;
+                        },
+                        initialFocus: () => {
+                            return this.isFocusVisible ? undefined : false;
                         }
-                        return event.key === 'Tab' && event.shiftKey;
-                    },
-                    initialFocus: () => {
-                        return this.hasInitialFocus && !this.noInitialFocus ? undefined : false;
-                    }
-                });
-            this.trap.activate();
+                    });
+                this.trap.activate();
+            }
+            else {
+                this.catOpen.emit();
+            }
         });
     }
     /**
      * Closes the dropdown.
      */
-    async close() {
+    async close(shouldReturnFocus = this.isFocusVisible) {
         if (!this._isOpen) {
             return; // busy or closed
         }
@@ -1211,6 +1232,9 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.trap?.deactivate();
         this.trap = undefined;
         this.content.classList.remove('show');
+        if (shouldReturnFocus) {
+            this.trigger?.focus();
+        }
         // give CSS transition time to apply
         setTimeout(() => {
             this._isOpen = false;
@@ -1235,7 +1259,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.cleanupFloatingUi = undefined;
     }
     render() {
-        return (h(Host, { key: '0b02719eae82077fd11262620f260c86f6ef5854' }, h("slot", { key: '809f803bad06e9b9dfab850809709191f8a3bc2e', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'b6e32999e3cb4e4e4e9a4c534a22a17ae7708486', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '47592ef2faeb4a5ba26185a98952c56c3b0804f6', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '8b6ba45f55abf7983a66550f161652e5a40205d7', name: "content" }))));
+        return (h(Host, { key: '865e31b60994932637b3530afe48b2317868ecd3' }, h("slot", { key: '393e1697e6dd728bb2f3c8294370de7deaba95d1', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '2bd3a3528005bebf7dcba84e52f5b6f6786a7f50', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '74ae76bb604041881af0247002d6a383dc386f50', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '6fd6acedb2c4044edd8f09f1418916e5086465fc', name: "content" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -1247,7 +1271,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.trigger.setAttribute('aria-expanded', 'false');
         this.trigger.setAttribute('aria-controls', this.contentId);
         this.trigger.addEventListener('click', (event) => {
-            this.hasInitialFocus = this.isEventOriginFromKeyboard(event);
+            this.isFocusVisible = this.isEventOriginFromKeyboard(event);
             this.toggle();
         });
     }
@@ -1325,7 +1349,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
             computePosition(anchorElement, this.content, {
                 strategy: 'fixed',
                 placement: this.placement,
-                middleware: [offset(CatDropdown.OFFSET), ...middleware, ...resize]
+                middleware: [...middleware, ...resize]
             }).then(({ x, y, placement }) => {
                 this.content.dataset.placement = placement;
                 Object.assign(this.content.style, {
@@ -1350,10 +1374,11 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         "isOpen": [2052, "is-open"],
         "noReturnFocus": [4, "no-return-focus"],
         "delayedTriggerInit": [4, "delayed-trigger-init"],
+        "focusTrap": [4, "focus-trap"],
         "toggle": [64],
         "open": [64],
         "close": [64]
-    }, [[0, "catClick", "clickHandler"]]]);
+    }, [[0, "catClick", "clickHandler"], [0, "keydown", "keydownHandler"], [8, "click", "globalClickHandler"]]]);
 CatDropdown.OFFSET = 4;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {