@haiilo/catalyst 14.5.1 → 14.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/dist/catalyst/catalyst.esm.js +1 -1
  2. package/dist/catalyst/p-0fec1fc5.entry.js +10 -0
  3. package/dist/catalyst/p-0fec1fc5.entry.js.map +1 -0
  4. package/dist/cjs/cat-alert_32.cjs.entry.js +109 -80
  5. package/dist/cjs/catalyst.cjs.js +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/collection/collection-manifest.json +1 -1
  8. package/dist/collection/components/cat-alert/cat-alert.js +1 -1
  9. package/dist/collection/components/cat-badge/cat-badge.js +1 -1
  10. package/dist/collection/components/cat-button-group/cat-button-group.js +1 -1
  11. package/dist/collection/components/cat-card/cat-card.js +1 -1
  12. package/dist/collection/components/cat-checkbox/cat-checkbox.js +2 -2
  13. package/dist/collection/components/cat-date/cat-date.js +2 -2
  14. package/dist/collection/components/cat-date-inline/cat-date-inline.js +4 -4
  15. package/dist/collection/components/cat-datepicker/cat-datepicker.js +3 -3
  16. package/dist/collection/components/cat-datepicker-inline/cat-datepicker-inline.js +2 -2
  17. package/dist/collection/components/cat-dropdown/cat-dropdown.js +29 -26
  18. package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
  19. package/dist/collection/components/cat-form-group/cat-form-group.js +1 -1
  20. package/dist/collection/components/cat-icon/cat-icon.js +1 -1
  21. package/dist/collection/components/cat-menu/cat-menu.js +5 -4
  22. package/dist/collection/components/cat-menu/cat-menu.js.map +1 -1
  23. package/dist/collection/components/cat-menu-item/cat-menu-item.js +37 -4
  24. package/dist/collection/components/cat-menu-item/cat-menu-item.js.map +1 -1
  25. package/dist/components/cat-alert.js +1 -1
  26. package/dist/components/cat-badge.js +1 -1
  27. package/dist/components/cat-button-group.js +1 -1
  28. package/dist/components/cat-card.js +1 -1
  29. package/dist/components/cat-checkbox2.js +2 -2
  30. package/dist/components/cat-date-inline2.js +4 -4
  31. package/dist/components/cat-date.js +2 -2
  32. package/dist/components/cat-datepicker-inline.js +2 -2
  33. package/dist/components/cat-datepicker.js +3 -3
  34. package/dist/components/cat-dropdown2.js +30 -9
  35. package/dist/components/cat-dropdown2.js.map +1 -1
  36. package/dist/components/cat-form-group.js +1 -1
  37. package/dist/components/cat-icon2.js +1 -1
  38. package/dist/components/cat-menu-item2.js +10 -5
  39. package/dist/components/cat-menu-item2.js.map +1 -1
  40. package/dist/components/cat-menu2.js +5 -5
  41. package/dist/components/cat-menu2.js.map +1 -1
  42. package/dist/components/floating-ui.dom.js +49 -45
  43. package/dist/components/floating-ui.dom.js.map +1 -1
  44. package/dist/esm/cat-alert_32.entry.js +109 -80
  45. package/dist/esm/catalyst.js +1 -1
  46. package/dist/esm/loader.js +1 -1
  47. package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +10 -3
  48. package/dist/types/components/cat-menu-item/cat-menu-item.d.ts +3 -1
  49. package/dist/types/components.d.ts +8 -0
  50. package/package.json +2 -4
  51. package/dist/catalyst/p-c04eb2d3.entry.js +0 -10
  52. package/dist/catalyst/p-c04eb2d3.entry.js.map +0 -1
@@ -44,7 +44,7 @@ const CatAlert = class {
44
44
  setAttributeDefault(this, 'role', this.mapRole.get(this.color));
45
45
  }
46
46
  render() {
47
- return (index.h(index.Host, { key: '69fa5ac520b7473f3e64c7aa08f1f706a0e84777' }, !this.noIcon && index.h("cat-icon", { key: '6350faf2c7748f5366040eb861b999adb094f746', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), index.h("div", { key: '566add2aa7d14f4118104a1f1ed43ae7600cd0b0', class: "content" }, index.h("slot", { key: '18cb577bd42e5386ddac4a6226426bcab9260415' }))));
47
+ return (index.h(index.Host, { key: '02844ee6d6dc5d365bee542ee873280b2b7040fc' }, !this.noIcon && index.h("cat-icon", { key: 'e3497771224d89279b9d4d1f4d83014066504ede', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), index.h("div", { key: '219d03b29ec237228366c2df596c148429685483', class: "content" }, index.h("slot", { key: '13a11b580fe9a6ac0707e49120809e97e3b05cd5' }))));
48
48
  }
49
49
  get hostElement() { return index.getElement(this); }
50
50
  };
@@ -325,7 +325,7 @@ const CatBadge = class {
325
325
  }
326
326
  }
327
327
  render() {
328
- return (index.h(index.Host, { key: 'b11c4ad289bf67783fe98e9e6b9ac0d390fc9cdb', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (index.h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (index.h("slot", null)), this.hasSuffixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
328
+ return (index.h(index.Host, { key: '5c22fb2216adbb84af5bbcbc1cdc97a4fc2e7f2a', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (index.h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (index.h("slot", null)), this.hasSuffixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
329
329
  }
330
330
  get hostElement() { return index.getElement(this); }
331
331
  static get watchers() { return {
@@ -557,7 +557,7 @@ const CatButtonGroup = class {
557
557
  this.buttonElements = [];
558
558
  }
559
559
  render() {
560
- return (index.h(index.Host, { key: '3bf39dc84ed4e47a328927f937eb956ace5f6f71', role: "group", "aria-label": this.a11yLabel }, index.h("slot", { key: '843ae7ed619e04239a405250cd83f83e694bfde9', onSlotchange: this.onSlotChange.bind(this) })));
560
+ return (index.h(index.Host, { key: 'a34efc8e64ae1322adc48696bf2c04cc2d1e429c', role: "group", "aria-label": this.a11yLabel }, index.h("slot", { key: '9149f38be769cef00801abacbb03dd0c95850f12', onSlotchange: this.onSlotChange.bind(this) })));
561
561
  }
562
562
  onSlotChange() {
563
563
  this.buttonElements = Array.from(this.hostElement.querySelectorAll(':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot="trigger"]'));
@@ -578,7 +578,7 @@ const CatCard = class {
578
578
  this.catLoad = index.createEvent(this, "catLoad");
579
579
  }
580
580
  render() {
581
- return index.h("slot", { key: '462ccb0dce9a3bb536ff1f69caf8a04c02565344' });
581
+ return index.h("slot", { key: '2ddd44a7ce4d8c664f1161710a7a65461c37875f' });
582
582
  }
583
583
  componentDidLoad() {
584
584
  this.catLoad.emit();
@@ -694,13 +694,13 @@ const CatCheckbox = class {
694
694
  this.input.blur();
695
695
  }
696
696
  render() {
697
- return (index.h(index.Host, { key: 'eb33a26363bc39edc83c1b1312c85f805e8e3894' }, index.h("label", { key: 'f8094c4c8859d30a4fe6096efad161a4503b2896', htmlFor: this.id, class: {
697
+ return (index.h(index.Host, { key: '3b747366d141c2e3c678f33841eca2983b9161c9' }, index.h("label", { key: '2ee8575df8a269ef821a980add768a668d3e208b', htmlFor: this.id, class: {
698
698
  'is-hidden': this.labelHidden,
699
699
  'is-disabled': this.disabled,
700
700
  'label-left': this.labelLeft,
701
701
  'align-center': this.alignment === 'center',
702
702
  'align-end': this.alignment === 'bottom'
703
- } }, index.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 }), index.h("span", { key: 'b4a30c339f54ab5ae1b7f9e31f6d0c409c6c2613', class: "box", "aria-hidden": "true" }, index.h("svg", { key: 'e3d0faed8b2d2d59fab9b8a2c011dd4d6aa5b338', class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { key: '7f1d041823ce9ed4c4b1496b61de9c5767979ff7', points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { key: 'dd636bd06ab6cf5918edaacb63091d9eb09ae0af', class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { key: 'b46f113aae6d0e8e3bb5cd1a2740a7d7422ea749', points: "1.5 5 10.5 5" }))), index.h("span", { key: 'c0266346a2d7b22f8e18dba57737cd098217b08a', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '2416235aa2a02df58f4d96337215725e426a729a', name: "label" })) || this.label, index.h("span", { key: '4da54bdb128f377225732f2c7d69bf205d5098c1', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '70b0dfdf0c4210394a09adb83866d6566a1df025', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'a49f720ae915fd3054748184d89fbe9c784cc730', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (index.h("div", { key: '10630551393491643e19ff001840aed935f78645', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: 'f4236a3a4c2f573bcd77311ed009e4d09ffb73af', class: "box-placeholder" }), index.h(CatFormHint, { key: '85c1227154f23e6e52a36fe7184fcb1ab999160e', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
703
+ } }, index.h("input", { key: 'aad1de3b8d7dd4eeb0e72166ba1decd79bd25f18', "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 }), index.h("span", { key: '387095d0a3fdb1820fdc7d3111c9475792865255', class: "box", "aria-hidden": "true" }, index.h("svg", { key: '94bc42f4729c8ac50d786029d1a2b4446371b1dd', class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { key: 'b6c0c742108523bafa656aad76fde132748f673d', points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { key: '51d990d4002736670ea32bf9ee10f90918ea6856', class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { key: '882eb8cf57188490f0b57a052908c52780c708a3', points: "1.5 5 10.5 5" }))), index.h("span", { key: '36df32838873f91f1b86ed93f5f20e6f7fba8e83', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '568163747405bb172ac389293d1e02eb586d2afe', name: "label" })) || this.label, index.h("span", { key: '1a95817d8a270fcfba8cdbd20832142358cf793c', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '59b897e56020aedf0dc7f5d847b16cb4059505d5', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '3482694fe72455fb0e0d96d7760cdd01044cb45c', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (index.h("div", { key: 'f4d2064c5e48dc7131838e62baa941899fa7e3fc', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '1909aa219d7476643da16e2985c5763c770ef382', class: "box-placeholder" }), index.h(CatFormHint, { key: 'bd850f88c63eadfc4f1082d71c0781db8cb558b6', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
704
704
  }
705
705
  get hasHint() {
706
706
  return !!this.hint || !!this.hasSlottedHint;
@@ -937,14 +937,14 @@ const CatDate = class {
937
937
  }
938
938
  render() {
939
939
  this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
940
- return (index.h(index.Host, { key: '664187eb3780f94f61b463088cf6a056a3107af5' }, index.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 => {
940
+ return (index.h(index.Host, { key: 'b579a4b31629206532b1a91ea9dd9b2634f0536b' }, index.h("cat-input", { key: '55c5c4dfaaa13d229e74d83569b6e99e7a5ce146', 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 => {
941
941
  this.inputFocused = e.target === this.input;
942
942
  e.stopPropagation();
943
943
  this.catFocus.emit(e.detail);
944
944
  }, onCatBlur: e => {
945
945
  e.stopPropagation();
946
946
  this.onInputBlur(e.detail);
947
- } }, index.h("span", { key: '36b14afb75c694a1559e4b5539a2bde0be1f59bc', slot: "label" }, this.label, index.h("span", { key: 'f541147e5515a679db3adcf4c93c52514b9c9cb3', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: '5a73b806ed95c3c6367a5b74d764b31cba4ded92', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: 'ae9da7387e3baf2b1989c9b5d5c9b82d30257c69', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: 'b255073bb1ce8e57def9f61c1b347880f9115533', slot: "content" }, index.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) }))))));
947
+ } }, index.h("span", { key: 'cb362f3eb82c46adb276ec16069b5f25181c342a', slot: "label" }, this.label, index.h("span", { key: '7c226f594c97ceda86dc5da3500ff78665381abc', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: '98f13bc9d41b2c3f946007bf5f2d42ac62faab9b', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: 'a801df892743f0e60f4a205fde7c62546a24625b', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: '5253067cb8500afa512d9e495610b17d08511edc', slot: "content" }, index.h("cat-date-inline", { key: '1867958d9ef4c9452a0f0ddcd8aed673f9c595b2', 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) }))))));
948
948
  }
949
949
  getTriggerA11yLabel() {
950
950
  const date = this.locale.fromLocalISO(this.value);
@@ -1768,12 +1768,12 @@ const CatDateInline = class {
1768
1768
  const [minDate, maxDate] = this.getMinMaxDate();
1769
1769
  const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
1770
1770
  const [dateStart, dateEnd] = this.getValue();
1771
- return (index.h(index.Host, { key: '0f06004b6e4a37950a8933175e66694e685a254d', "aria-label": this.label || undefined }, index.h("div", { key: '50eb04ff252b57dfaca6fcd612e3f4b6defda40d', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'f19844d5b24c2dc5de7b68d4de4988593582b6c3', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: 'c5fd299ba527527ad4025d28fa3e74f7daba201f', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'b20d1bd0440adac6f5c32e7cc11d5274882f913b', name: "label" })) || this.label, index.h("div", { key: '701a18fc68395264285e01d5bad7b111970f4f0a', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '2d82d9fa7ffca66b45f17201467b1d3ecf6ff0df', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '06094565395b6054d89cac6ce4399947387d2c88', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'd5082f212000ef6738235d32a0bc117a06074573', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: 'd085532af173d7224e8b9f12e3fe332d3aba4030', class: "picker-head" }, index.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 }), index.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 }), index.h("h3", { key: '874b1707cc80604429797ae273526d6db311619a' }, this.getHeadline()), index.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 }), index.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 })), index.h("div", { key: '7f9a940cf201568daed8b4b35e44e74f61967188', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: '750c7dc2abe47cf05b75ba21e7c13ac153b07363', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
1771
+ return (index.h(index.Host, { key: 'ca4f74e4e26b4240c2ac5a88a5ff501f6f9fbfc0', "aria-label": this.label || undefined }, index.h("div", { key: '30d452f2a08102ce54cc169fe444f83ac24521c4', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '3e5f7c62688dafcdd99cf77477b84ddcfcb262f6', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: '3c6ce82acb14c46c83d56f50dda4015b4d30874e', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '1540ccc41e02740a69023a2c5ca839320d03e70d', name: "label" })) || this.label, index.h("div", { key: '64708a81ac29b0ab9509dc2f7fc8709a7594b400', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '3f5da06e86b4c202f86c034ea74256e4f0c21dba', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'd0a77ed00b40a9f676b4dbf27101783c038fea29', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'b7f667802033e1c2fe55268b1d677789ea7ae8fc', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: '9ef0de6c6d7dd9d87c1002c63317a6ce0fc64cc4', class: "picker-head" }, index.h("cat-button", { key: '12455ccb1d3fa0f68f18e4103a84dd0542a013e1', 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 }), index.h("cat-button", { key: '313d660fb3fa61b1de67a7b6b12dae22b48a8299', 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 }), index.h("h3", { key: 'c7628a8f071cba27d3b8ee6ed9a9239d26d0ed6e' }, this.getHeadline()), index.h("cat-button", { key: '11fd72dc5bd661ac9189bb2e0cd3eba0a25ce8ab', 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 }), index.h("cat-button", { key: '56936eff41884c6e5112587843518d2031b86eda', 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 })), index.h("div", { key: 'c8de1f15b1885a396c19b24344da471336036874', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: 'fcb71d996b515d8d0cb36d69249c1737f79599be', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
1772
1772
  const day = (i + this.locale.weekInfo.firstDay) % 7;
1773
1773
  return index.h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
1774
- })), this.weeks && (index.h("div", { key: '661cecfeef5e835e2e95b267c39a8608e40789d1', class: "picker-grid-weeks" }, dateGrid
1774
+ })), this.weeks && (index.h("div", { key: '2e9f70a7a94d7f19adfe5ad1a8c5079fbd0e25fd', class: "picker-grid-weeks" }, dateGrid
1775
1775
  .filter((_, i) => i % 7 === 0)
1776
- .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '215f61a30ec58c84d549181a8c216dc847bdbfa5', class: "picker-grid-days" }, dateGrid.map(day => {
1776
+ .map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '59b9726035ea9a1ab7aa99228c841817522692c1', class: "picker-grid-days" }, dateGrid.map(day => {
1777
1777
  const isStartDate = isSameDay(dateStart, day);
1778
1778
  const isEndDate = isSameDay(dateEnd, day);
1779
1779
  const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
@@ -1790,7 +1790,7 @@ const CatDateInline = class {
1790
1790
  'date-focusable': this.canFocus(day),
1791
1791
  'date-disabled': !this.canClick(day)
1792
1792
  }, 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()));
1793
- }))), index.h("div", { key: 'cede3e1fd2319aca96f3afccbab3113f17d4229b', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: '93dd8019983d1ae458706dbc62ad13e3131c29a5', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: '4836275c3b11b58d94f31c1c1f00f5bb3e9645b5', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: '58440f20e7ecd65dd8e2f136b11cb9b5a4379b79', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: '3a3507b2e3b4c0452e35f8eb78b2dd21c31e2c9d', class: "cursor-aria", "aria-live": "polite" })));
1793
+ }))), index.h("div", { key: 'e879de98e8433a0ef17f715ff48686307f401634', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: '34c99fbd08c4ef2dab9a390c2d208f726a2d7645', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: 'd958de3864e0c29daf885af05162ed3f123c08f2', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: 'd7f3902bc982a060318fb3e51e9e2a00b43af618', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: '68f6e23f25d229b31afcfb2b1f51c8f42eb28282', class: "cursor-aria", "aria-live": "polite" })));
1794
1794
  }
1795
1795
  focus(date, focus = true) {
1796
1796
  const [minDate, maxDate] = this.getMinMaxDate();
@@ -4721,10 +4721,6 @@ const oppositeSideMap = {
4721
4721
  bottom: 'top',
4722
4722
  top: 'bottom'
4723
4723
  };
4724
- const oppositeAlignmentMap = {
4725
- start: 'end',
4726
- end: 'start'
4727
- };
4728
4724
  function clamp(start, value, end) {
4729
4725
  return max(start, min(value, end));
4730
4726
  }
@@ -4743,9 +4739,9 @@ function getOppositeAxis(axis) {
4743
4739
  function getAxisLength(axis) {
4744
4740
  return axis === 'y' ? 'height' : 'width';
4745
4741
  }
4746
- const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
4747
4742
  function getSideAxis(placement) {
4748
- return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
4743
+ const firstChar = placement[0];
4744
+ return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
4749
4745
  }
4750
4746
  function getAlignmentAxis(placement) {
4751
4747
  return getOppositeAxis(getSideAxis(placement));
@@ -4768,7 +4764,7 @@ function getExpandedPlacements(placement) {
4768
4764
  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
4769
4765
  }
4770
4766
  function getOppositeAlignmentPlacement(placement) {
4771
- return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
4767
+ return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
4772
4768
  }
4773
4769
  const lrPlacement = ['left', 'right'];
4774
4770
  const rlPlacement = ['right', 'left'];
@@ -4799,7 +4795,8 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
4799
4795
  return list;
4800
4796
  }
4801
4797
  function getOppositePlacement(placement) {
4802
- return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
4798
+ const side = getSide(placement);
4799
+ return oppositeSideMap[side] + placement.slice(side.length);
4803
4800
  }
4804
4801
  function expandPaddingObject(padding) {
4805
4802
  return {
@@ -4958,6 +4955,9 @@ async function detectOverflow(state, options) {
4958
4955
  };
4959
4956
  }
4960
4957
 
4958
+ // Maximum number of resets that can occur before bailing to avoid infinite reset loops.
4959
+ const MAX_RESET_COUNT = 50;
4960
+
4961
4961
  /**
4962
4962
  * Computes the `x` and `y` coordinates that will place the floating element
4963
4963
  * next to a given reference element.
@@ -4972,7 +4972,10 @@ const computePosition$1 = async (reference, floating, config) => {
4972
4972
  middleware = [],
4973
4973
  platform
4974
4974
  } = config;
4975
- const validMiddleware = middleware.filter(Boolean);
4975
+ const platformWithDetectOverflow = platform.detectOverflow ? platform : {
4976
+ ...platform,
4977
+ detectOverflow
4978
+ };
4976
4979
  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
4977
4980
  let rects = await platform.getElementRects({
4978
4981
  reference,
@@ -4984,14 +4987,17 @@ const computePosition$1 = async (reference, floating, config) => {
4984
4987
  y
4985
4988
  } = computeCoordsFromPlacement(rects, placement, rtl);
4986
4989
  let statefulPlacement = placement;
4987
- let middlewareData = {};
4988
4990
  let resetCount = 0;
4989
- for (let i = 0; i < validMiddleware.length; i++) {
4990
- var _platform$detectOverf;
4991
+ const middlewareData = {};
4992
+ for (let i = 0; i < middleware.length; i++) {
4993
+ const currentMiddleware = middleware[i];
4994
+ if (!currentMiddleware) {
4995
+ continue;
4996
+ }
4991
4997
  const {
4992
4998
  name,
4993
4999
  fn
4994
- } = validMiddleware[i];
5000
+ } = currentMiddleware;
4995
5001
  const {
4996
5002
  x: nextX,
4997
5003
  y: nextY,
@@ -5005,10 +5011,7 @@ const computePosition$1 = async (reference, floating, config) => {
5005
5011
  strategy,
5006
5012
  middlewareData,
5007
5013
  rects,
5008
- platform: {
5009
- ...platform,
5010
- detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
5011
- },
5014
+ platform: platformWithDetectOverflow,
5012
5015
  elements: {
5013
5016
  reference,
5014
5017
  floating
@@ -5016,14 +5019,11 @@ const computePosition$1 = async (reference, floating, config) => {
5016
5019
  });
5017
5020
  x = nextX != null ? nextX : x;
5018
5021
  y = nextY != null ? nextY : y;
5019
- middlewareData = {
5020
- ...middlewareData,
5021
- [name]: {
5022
- ...middlewareData[name],
5023
- ...data
5024
- }
5022
+ middlewareData[name] = {
5023
+ ...middlewareData[name],
5024
+ ...data
5025
5025
  };
5026
- if (reset && resetCount <= 50) {
5026
+ if (reset && resetCount < MAX_RESET_COUNT) {
5027
5027
  resetCount++;
5028
5028
  if (typeof reset === 'object') {
5029
5029
  if (reset.placement) {
@@ -5478,7 +5478,6 @@ function isShadowRoot(value) {
5478
5478
  }
5479
5479
  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
5480
5480
  }
5481
- const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
5482
5481
  function isOverflowElement(element) {
5483
5482
  const {
5484
5483
  overflow,
@@ -5486,32 +5485,35 @@ function isOverflowElement(element) {
5486
5485
  overflowY,
5487
5486
  display
5488
5487
  } = getComputedStyle$1(element);
5489
- return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
5488
+ return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
5490
5489
  }
5491
- const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
5492
5490
  function isTableElement(element) {
5493
- return tableElements.has(getNodeName(element));
5491
+ return /^(table|td|th)$/.test(getNodeName(element));
5494
5492
  }
5495
- const topLayerSelectors = [':popover-open', ':modal'];
5496
5493
  function isTopLayer(element) {
5497
- return topLayerSelectors.some(selector => {
5498
- try {
5499
- return element.matches(selector);
5500
- } catch (_e) {
5501
- return false;
5494
+ try {
5495
+ if (element.matches(':popover-open')) {
5496
+ return true;
5502
5497
  }
5503
- });
5498
+ } catch (_e) {
5499
+ // no-op
5500
+ }
5501
+ try {
5502
+ return element.matches(':modal');
5503
+ } catch (_e) {
5504
+ return false;
5505
+ }
5504
5506
  }
5505
- const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
5506
- const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
5507
- const containValues = ['paint', 'layout', 'strict', 'content'];
5507
+ const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
5508
+ const containRe = /paint|layout|strict|content/;
5509
+ const isNotNone = value => !!value && value !== 'none';
5510
+ let isWebKitValue;
5508
5511
  function isContainingBlock(elementOrCss) {
5509
- const webkit = isWebKit();
5510
5512
  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
5511
5513
 
5512
5514
  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
5513
5515
  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
5514
- return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
5516
+ return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
5515
5517
  }
5516
5518
  function getContainingBlock(element) {
5517
5519
  let currentNode = getParentNode(element);
@@ -5526,12 +5528,13 @@ function getContainingBlock(element) {
5526
5528
  return null;
5527
5529
  }
5528
5530
  function isWebKit() {
5529
- if (typeof CSS === 'undefined' || !CSS.supports) return false;
5530
- return CSS.supports('-webkit-backdrop-filter', 'none');
5531
+ if (isWebKitValue == null) {
5532
+ isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
5533
+ }
5534
+ return isWebKitValue;
5531
5535
  }
5532
- const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
5533
5536
  function isLastTraversableNode(node) {
5534
- return lastTraversableNodeNames.has(getNodeName(node));
5537
+ return /^(html|body|#document)$/.test(getNodeName(node));
5535
5538
  }
5536
5539
  function getComputedStyle$1(element) {
5537
5540
  return getWindow(element).getComputedStyle(element);
@@ -5587,8 +5590,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
5587
5590
  if (isBody) {
5588
5591
  const frameElement = getFrameElement(win);
5589
5592
  return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
5593
+ } else {
5594
+ return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
5590
5595
  }
5591
- return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
5592
5596
  }
5593
5597
  function getFrameElement(win) {
5594
5598
  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
@@ -6424,7 +6428,7 @@ const CatDatepickerFlat = class {
6424
6428
  }
6425
6429
  render() {
6426
6430
  return [
6427
- index.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 => {
6431
+ index.h("cat-input", { key: '199c9fd2a919b876106eaab58a37a6d286654c27', 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 => {
6428
6432
  e.stopPropagation();
6429
6433
  this.value = e.detail || undefined;
6430
6434
  }, onCatFocus: e => {
@@ -6433,8 +6437,8 @@ const CatDatepickerFlat = class {
6433
6437
  }, onCatBlur: e => {
6434
6438
  e.stopPropagation();
6435
6439
  this.catBlur.emit(e.detail);
6436
- } }, this.hasSlottedLabel && (index.h("span", { key: '41f0dfcbe0a7ab562a80416a109ee6283d602147', slot: "label" }, index.h("slot", { key: '4148dec98c036b3f7d604b16c05dfed648ec16a3', name: "label" }))), this.hasSlottedHint && (index.h("span", { key: '8181253f8adadc606f0d66abe5bad5a85b7a0f7f', slot: "hint" }, index.h("slot", { key: 'c6807aed385298a19d67e1f2652de82473ea6f16', name: "hint" })))),
6437
- index.h("div", { key: '8b0f02c5f6cf61ad89dccd831937649c6740035c', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
6440
+ } }, this.hasSlottedLabel && (index.h("span", { key: 'aedecd1ff7f34f8f038df57c3fb42bdd3282273e', slot: "label" }, index.h("slot", { key: 'a86b6a3bd04da7fde60ddb19df4142e9ff39c0fe', name: "label" }))), this.hasSlottedHint && (index.h("span", { key: '70f4739871308bcd4fa88e265a2ec5c8e5eeff35', slot: "hint" }, index.h("slot", { key: '8cc4b602ae9064da5816653ca2dfb918329e26d3', name: "hint" })))),
6441
+ index.h("div", { key: 'abc43645698cf1b209598f8a34432d6be0c9e519', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
6438
6442
  ];
6439
6443
  }
6440
6444
  initDatepicker(input) {
@@ -6544,11 +6548,11 @@ const CatDatepickerInline = class {
6544
6548
  this.pickr = this.initDatepicker(this.input);
6545
6549
  }
6546
6550
  render() {
6547
- return (index.h(index.Host, { key: '22ff03e4cb6c74bc944e5022764308b6d2b2fe29' }, index.h("div", { key: '1c7e6b0beab570e1357014384ab8eaf76458858f', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
6551
+ return (index.h(index.Host, { key: '3a51929cf5486122309a0949df55b414bfa83462' }, index.h("div", { key: 'ad94b1019c6013d04af429702d23d996927567a9', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
6548
6552
  'datepicker-wrapper': true,
6549
6553
  'datepicker-disabled': this.disabled,
6550
6554
  'datepicker-readonly': this.readonly
6551
- } }, index.h("input", { key: '75edfdc337ba101bd0cb9afa1ddef11571e94bf9', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
6555
+ } }, index.h("input", { key: '0edefcd24538d19c49fb57eab6cb4ed5a19f22ce', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
6552
6556
  }
6553
6557
  initDatepicker(input) {
6554
6558
  if (!input) {
@@ -7688,6 +7692,9 @@ const CatDropdown = class {
7688
7692
  * @internal
7689
7693
  */
7690
7694
  this.focusTrap = true;
7695
+ this.boundWindowClickListener = this.windowClickListener.bind(this);
7696
+ this.boundWindowMousedownListener = this.windowMousedownListener.bind(this);
7697
+ this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);
7691
7698
  }
7692
7699
  /**
7693
7700
  * Whether the dropdown is open.
@@ -7709,6 +7716,7 @@ const CatDropdown = class {
7709
7716
  path.includes(this.content) &&
7710
7717
  // check if click was not on a trigger for a sub-dropdown
7711
7718
  event.target?.slot !== 'trigger' &&
7719
+ !event.target.subMenu &&
7712
7720
  // check if click was not an element marked with data-dropdown-no-close
7713
7721
  !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
7714
7722
  this.close();
@@ -7719,13 +7727,13 @@ const CatDropdown = class {
7719
7727
  this.close();
7720
7728
  }
7721
7729
  }
7722
- globalClickHandler(event) {
7730
+ windowClickListener(event) {
7723
7731
  this.handleClickOutside(event);
7724
7732
  }
7725
- globalMouseDownHandler(event) {
7733
+ windowMousedownListener(event) {
7726
7734
  this.handleClickOutside(event);
7727
7735
  }
7728
- globalTouchStartHandler(event) {
7736
+ windowTouchStartListener(event) {
7729
7737
  this.handleClickOutside(event);
7730
7738
  }
7731
7739
  /**
@@ -7763,6 +7771,8 @@ const CatDropdown = class {
7763
7771
  : createFocusTrap(this.content, {
7764
7772
  tabbableOptions: this.tabbableOptions,
7765
7773
  allowOutsideClick: true,
7774
+ clickOutsideDeactivates: event => this.shouldCloseByClickEvent(event),
7775
+ onPostDeactivate: () => this.close(),
7766
7776
  onPostActivate: () => this.catOpen.emit(),
7767
7777
  setReturnFocus: elem => (!this.isFocusVisible || this.noReturnFocus ? false : this.trigger || elem),
7768
7778
  isKeyForward: event => {
@@ -7788,6 +7798,7 @@ const CatDropdown = class {
7788
7798
  this.trap.activate();
7789
7799
  }
7790
7800
  else {
7801
+ this.addListeners();
7791
7802
  this.catOpen.emit();
7792
7803
  }
7793
7804
  });
@@ -7806,6 +7817,7 @@ const CatDropdown = class {
7806
7817
  if (shouldReturnFocus) {
7807
7818
  this.trigger?.focus();
7808
7819
  }
7820
+ this.removeListeners();
7809
7821
  // give CSS transition time to apply
7810
7822
  setTimeout(() => {
7811
7823
  this._isOpen = false;
@@ -7830,16 +7842,29 @@ const CatDropdown = class {
7830
7842
  this.cleanupFloatingUi = undefined;
7831
7843
  }
7832
7844
  render() {
7833
- return (index.h(index.Host, { key: 'b3cd898551dc3e6d5396db1a4a14bc97cf4a2024' }, index.h("slot", { key: '6875cfad353891deb54ebcd5155d7ea466384131', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: '93fdda4c49a7a956f72548699200feb309779081', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '13a68b5f706e61e87599c463e58f1bf932b2d261', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, index.h("slot", { key: '06357a4a970241938900853d78c88427c6a9e69a', name: "content" }))));
7845
+ return (index.h(index.Host, { key: 'bd6c2271fbd5a3f9222cb9eb8c59d7113dc72c7a' }, index.h("slot", { key: '26b1d2b753fffa0f91c8ee505209c46880e9233b', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: 'ac3b213022083bdb89edf4583cc216a5308bb1d2', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: 'c4849c420a3e248bc7192db3a059e3372b7612fb', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, index.h("slot", { key: '1bbcaa8a86c2726e61aff6236e01b3f4ac6004e9', name: "content" }))));
7846
+ }
7847
+ addListeners() {
7848
+ window.addEventListener('click', this.boundWindowClickListener);
7849
+ window.addEventListener('mousedown', this.boundWindowMousedownListener);
7850
+ window.addEventListener('touchstart', this.boundWindowTouchStartListener);
7851
+ }
7852
+ removeListeners() {
7853
+ window.removeEventListener('click', this.boundWindowClickListener);
7854
+ window.removeEventListener('mousedown', this.boundWindowMousedownListener);
7855
+ window.removeEventListener('touchstart', this.boundWindowTouchStartListener);
7834
7856
  }
7835
7857
  handleClickOutside(event) {
7836
- if (!this.noAutoClose &&
7858
+ if (this.shouldCloseByClickEvent(event)) {
7859
+ this.close();
7860
+ }
7861
+ }
7862
+ shouldCloseByClickEvent(event) {
7863
+ return (!this.noAutoClose &&
7837
7864
  // check if click was outside of the dropdown content
7838
7865
  !event.composedPath().includes(this.content) &&
7839
7866
  // check if click was not on an element marked with data-dropdown-no-close
7840
- !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
7841
- this.close();
7842
- }
7867
+ !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')));
7843
7868
  }
7844
7869
  get contentId() {
7845
7870
  return `cat-dropdown-${this.id}`;
@@ -7975,7 +8000,7 @@ const CatFormGroup = class {
7975
8000
  });
7976
8001
  }
7977
8002
  render() {
7978
- return (index.h(index.Host, { key: '256d7b8493d24b515d9989f6c0bfa3d2af99ba67', style: { '--label-size': this.labelSize } }, index.h("slot", { key: '806080ce0d61ce3b64819dcb50b7bc1651b31c98', onSlotchange: this.onSlotChange.bind(this) })));
8003
+ return (index.h(index.Host, { key: 'cb3ed29df264b00c7740a97558ef5283a018c0c4', style: { '--label-size': this.labelSize } }, index.h("slot", { key: 'da29f356a770a8c5abc99719353e76ea565bf483', onSlotchange: this.onSlotChange.bind(this) })));
7979
8004
  }
7980
8005
  onSlotChange() {
7981
8006
  this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker, cat-date, cat-time'));
@@ -8006,7 +8031,7 @@ const CatIcon = class {
8006
8031
  this.size = 'm';
8007
8032
  }
8008
8033
  render() {
8009
- return (index.h("span", { key: 'b7c7a3e889ebc12349f1b8f35c227feb1992f8a8', innerHTML: this.iconSrc || (this.icon ? index$1.catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
8034
+ return (index.h("span", { key: '7d03b1a8d0443200d1daf1a77c14ed4d75a2f74e', innerHTML: this.iconSrc || (this.icon ? index$1.catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
8010
8035
  icon: true,
8011
8036
  [`icon-${this.size}`]: this.size !== 'inline'
8012
8037
  } }));
@@ -8332,10 +8357,10 @@ const CatMenu = class {
8332
8357
  }
8333
8358
  getDeepActiveElement() {
8334
8359
  let active = document.activeElement;
8335
- while (active?.shadowRoot?.activeElement && active.nodeName !== 'CAT-MENU-ITEM') {
8360
+ while (active?.shadowRoot?.activeElement) {
8336
8361
  active = active.shadowRoot.activeElement;
8337
8362
  }
8338
- return active;
8363
+ return active ? (findClosest('cat-menu-item', active) ?? active) : null;
8339
8364
  }
8340
8365
  onDocumentKeydown(event) {
8341
8366
  const navigationKeys = this.arrowNavigation === 'horizontal'
@@ -8403,10 +8428,10 @@ const CatMenu = class {
8403
8428
  this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));
8404
8429
  }
8405
8430
  render() {
8406
- return (index.h(index.Host, { key: '1659f098d4d11e61119cde4f290bb89bf450f9d9' }, index.h("cat-dropdown", { key: 'a5ca6e28245167c0f208d1846c9f93a75991dee1', ref: el => (this.dropdown = el), focusTrap: false, placement: this.placement, justify: this.justify, arrowNavigation: "none", noResize: this.noResize, overflow: this.overflow, delayedTriggerInit: this.delayedTriggerInit, onCatOpen: this.onMenuOpen, onCatClose: () => this.catClose.emit() }, index.h("cat-button", { key: '63986a7d31784fdd59de48c79a5b5777cf198b94', slot: "trigger", part: "trigger", variant: this.triggerVariant, size: this.triggerSize, icon: this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined), iconOnly: this.triggerIconOnly ?? this.triggerLabel === undefined, color: this.triggerColor, a11yLabel: this.triggerA11yLabel ?? this.triggerLabel, class: this.triggerClass, testId: this.triggerTestId, nativeAttributes: {
8431
+ return (index.h(index.Host, { key: '477d279400f05909efb6d3893ad3832383b0b1f1' }, index.h("cat-dropdown", { key: '39b1b867490e2f7f9a9f45bdf247785102e2fc73', ref: el => (this.dropdown = el), focusTrap: false, placement: this.placement, justify: this.justify, arrowNavigation: "none", noResize: this.noResize, overflow: this.overflow, delayedTriggerInit: this.delayedTriggerInit, onCatOpen: this.onMenuOpen, onCatClose: () => this.catClose.emit() }, index.h("cat-button", { key: '13c95fc31610cfe5eff4bd6ce9cad055c77ef454', slot: "trigger", part: "trigger", variant: this.triggerVariant, size: this.triggerSize, icon: this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined), iconOnly: this.triggerIconOnly ?? this.triggerLabel === undefined, color: this.triggerColor, a11yLabel: this.triggerA11yLabel ?? this.triggerLabel, class: this.triggerClass, testId: this.triggerTestId, nativeAttributes: {
8407
8432
  ...this.triggerNativeAttributes,
8408
8433
  'aria-haspopup': 'menu'
8409
- }, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && index.h("slot", { key: 'c10341a8bec971b814ec88044a89aa6752f3be23', name: "trigger-label" }, this.triggerLabel)), index.h("nav", { key: '265da5937ea993d27ccec21f9c0bc84439208d6c', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, index.h("ul", { key: '9b8edcb90028b39690be08961f25ea8c7a769752' }, index.h("slot", { key: 'f30590ff83386f30ba4539e76d621a80b0aefffd' }))))));
8434
+ }, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && index.h("slot", { key: 'f688c20ef06f986a2fec549e524a9293e40bb362', name: "trigger-label" }, this.triggerLabel)), index.h("nav", { key: 'f257a0cc30a58b63f6cc073a24fe56018d029ed8', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, index.h("ul", { key: '127a61cbf0958eb7bd6f7edcb4bec923e0f9491c' }, index.h("slot", { key: 'ec19aade8956369dc02f7f7aa08401955ed3b358' }))))));
8410
8435
  }
8411
8436
  get hostElement() { return index.getElement(this); }
8412
8437
  };
@@ -8438,10 +8463,14 @@ const CatMenuItem = class {
8438
8463
  * Specifies that the menu item should be disabled.
8439
8464
  */
8440
8465
  this.disabled = false;
8466
+ this.subMenu = false;
8441
8467
  }
8442
8468
  get id() {
8443
8469
  return this.identifier || this._id;
8444
8470
  }
8471
+ onClick(event) {
8472
+ this.catClick.emit(event);
8473
+ }
8445
8474
  /**
8446
8475
  * Programmatically move focus to the menu item.
8447
8476
  */
@@ -8455,14 +8484,14 @@ const CatMenuItem = class {
8455
8484
  this.button?.doBlur();
8456
8485
  }
8457
8486
  render() {
8458
- return (index.h(index.Host, { key: '69db1c5c6d91ea31103639a5fe3cbb96da32aa40' }, index.h("li", { key: '88569a9541369cf5dbc7f79b562ef5b68c9905a3' }, index.h("cat-button", { key: '65b6e6c3ca873a07204f36b3cae69dfffbc51a0b', ref: el => (this.button = el), class: "cat-nav-item", buttonId: this.id, part: "menu-item", variant: this.variant, icon: this.icon, iconOnly: this.iconOnly, iconRight: this.iconRight, url: this.url, disabled: this.disabled, urlTarget: this.urlTarget, loading: this.loading, color: this.color, active: this.active, testId: this.testId, nativeAttributes: {
8487
+ return (index.h(index.Host, { key: 'ff1abf6c6d74fc9d0bbc7491d64e0ad3373f6899' }, index.h("li", { key: '45089d058d664822cb67bc7bbf802b06333c351e' }, index.h("cat-button", { key: '47a83844fe837313f65115d95571f0e9b6f7591b', ref: el => (this.button = el), class: "cat-nav-item", buttonId: this.id, part: "menu-item", variant: this.variant, icon: this.icon, iconOnly: this.iconOnly, iconRight: this.iconRight, url: this.url, disabled: this.disabled, urlTarget: this.urlTarget, loading: this.loading, color: this.color, active: this.active, testId: this.testId, nativeAttributes: {
8459
8488
  ...this.nativeAttributes,
8460
8489
  role: 'menuitem',
8461
8490
  tabindex: '-1'
8462
- }, onCatClick: this.onCatClick }, index.h("slot", { key: 'c8036dabc3f0cb762d96bee7797ac50f871ac44d' })))));
8491
+ }, onCatClick: event => this.click(event) }, index.h("slot", { key: '49bc9f6cc4a5ed1293e261cefb67351342b805fb' })))));
8463
8492
  }
8464
- onCatClick(event) {
8465
- this.catClick.emit(event.detail);
8493
+ click(event) {
8494
+ event.stopPropagation();
8466
8495
  }
8467
8496
  };
8468
8497