@haiilo/catalyst 0.11.0 → 0.14.0

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 (138) hide show
  1. package/dist/catalyst/catalyst.css +1 -1
  2. package/dist/catalyst/catalyst.esm.js +1 -1
  3. package/dist/catalyst/catalyst.esm.js.map +1 -1
  4. package/dist/catalyst/index.esm.js +1 -1
  5. package/dist/catalyst/p-5f9b3485.entry.js +12 -0
  6. package/dist/catalyst/p-5f9b3485.entry.js.map +1 -0
  7. package/dist/catalyst/p-933b6a7a.js +10 -0
  8. package/dist/catalyst/p-933b6a7a.js.map +1 -0
  9. package/dist/catalyst/{p-659073b5.js → p-a255bd64.js} +2 -2
  10. package/dist/catalyst/p-a255bd64.js.map +1 -0
  11. package/dist/catalyst/scss/core/_base.scss +0 -1
  12. package/dist/catalyst/scss/core/_toast.scss +22 -12
  13. package/dist/catalyst/scss/utils/_layout.scss +4 -4
  14. package/dist/catalyst/scss/utils/_sizing.mixins.scss +0 -4
  15. package/dist/catalyst/scss/utils/_typography.mixins.scss +3 -3
  16. package/dist/cjs/{cat-alert_21.cjs.entry.js → cat-alert_22.cjs.entry.js} +234 -63
  17. package/dist/cjs/cat-alert_22.cjs.entry.js.map +1 -0
  18. package/dist/cjs/{cat-notification-c2859ed7.js → cat-notification-6a438ad1.js} +374 -58
  19. package/dist/cjs/cat-notification-6a438ad1.js.map +1 -0
  20. package/dist/cjs/catalyst.cjs.js +2 -2
  21. package/dist/cjs/{index-936b777e.js → index-c7955116.js} +12 -1
  22. package/dist/cjs/index-c7955116.js.map +1 -0
  23. package/dist/cjs/index.cjs.js +1 -2
  24. package/dist/cjs/index.cjs.js.map +1 -1
  25. package/dist/cjs/loader.cjs.js +2 -2
  26. package/dist/collection/components/cat-alert/cat-alert.css +24 -14
  27. package/dist/collection/components/cat-alert/cat-alert.js +49 -1
  28. package/dist/collection/components/cat-alert/cat-alert.js.map +1 -1
  29. package/dist/collection/components/cat-button/cat-button.css +185 -0
  30. package/dist/collection/components/cat-checkbox/cat-checkbox.css +16 -9
  31. package/dist/collection/components/cat-input/cat-input.css +3 -0
  32. package/dist/collection/components/cat-input/cat-input.js +8 -3
  33. package/dist/collection/components/cat-input/cat-input.js.map +1 -1
  34. package/dist/collection/components/cat-input/input-type.js +2 -0
  35. package/dist/collection/components/cat-input/input-type.js.map +1 -0
  36. package/dist/collection/components/cat-notification/cat-notification.js +43 -44
  37. package/dist/collection/components/cat-notification/cat-notification.js.map +1 -1
  38. package/dist/collection/components/cat-radio/cat-radio.css +3 -0
  39. package/dist/collection/components/cat-radio-group/cat-radio-group.js +30 -0
  40. package/dist/collection/components/cat-radio-group/cat-radio-group.js.map +1 -1
  41. package/dist/collection/components/cat-select/cat-select.css +4 -2
  42. package/dist/collection/components/cat-select/cat-select.js +77 -20
  43. package/dist/collection/components/cat-select/cat-select.js.map +1 -1
  44. package/dist/collection/components/cat-tab/cat-tab.js +7 -7
  45. package/dist/collection/components/cat-tab/cat-tab.js.map +1 -1
  46. package/dist/collection/components/cat-tabs/cat-tabs.js +19 -2
  47. package/dist/collection/components/cat-tabs/cat-tabs.js.map +1 -1
  48. package/dist/collection/components/cat-textarea/cat-textarea.css +3 -0
  49. package/dist/collection/components/cat-toast-demo/cat-toast-demo.js +12 -1
  50. package/dist/collection/components/cat-toast-demo/cat-toast-demo.js.map +1 -1
  51. package/dist/collection/components/cat-toggle/cat-toggle.css +9 -9
  52. package/dist/collection/components/cat-tooltip/cat-tooltip.css +2 -3
  53. package/dist/collection/index.js.map +1 -1
  54. package/dist/collection/scss/core/_base.scss +0 -1
  55. package/dist/collection/scss/core/_toast.scss +22 -12
  56. package/dist/collection/scss/utils/_layout.scss +4 -4
  57. package/dist/collection/scss/utils/_sizing.mixins.scss +0 -4
  58. package/dist/collection/scss/utils/_typography.mixins.scss +3 -3
  59. package/dist/components/cat-alert.js +23 -4
  60. package/dist/components/cat-alert.js.map +1 -1
  61. package/dist/components/cat-avatar.js.map +1 -1
  62. package/dist/components/cat-badge.js.map +1 -1
  63. package/dist/components/cat-button2.js +1 -1
  64. package/dist/components/cat-button2.js.map +1 -1
  65. package/dist/components/cat-checkbox.js +1 -1
  66. package/dist/components/cat-checkbox.js.map +1 -1
  67. package/dist/components/cat-icon2.js.map +1 -1
  68. package/dist/components/cat-input.js +1 -1
  69. package/dist/components/cat-input.js.map +1 -1
  70. package/dist/components/cat-radio-group.js +7 -1
  71. package/dist/components/cat-radio-group.js.map +1 -1
  72. package/dist/components/cat-radio.js +1 -1
  73. package/dist/components/cat-radio.js.map +1 -1
  74. package/dist/components/cat-select.js +53 -21
  75. package/dist/components/cat-select.js.map +1 -1
  76. package/dist/components/cat-skeleton.js.map +1 -1
  77. package/dist/components/cat-spinner2.js.map +1 -1
  78. package/dist/components/cat-tab.js +7 -7
  79. package/dist/components/cat-tab.js.map +1 -1
  80. package/dist/components/cat-tabs.js +19 -2
  81. package/dist/components/cat-tabs.js.map +1 -1
  82. package/dist/components/cat-textarea.js +1 -1
  83. package/dist/components/cat-textarea.js.map +1 -1
  84. package/dist/components/cat-toast-demo.js +55 -45
  85. package/dist/components/cat-toast-demo.js.map +1 -1
  86. package/dist/components/cat-toggle.js +1 -1
  87. package/dist/components/cat-toggle.js.map +1 -1
  88. package/dist/components/cat-tooltip.js +1 -1
  89. package/dist/components/cat-tooltip.js.map +1 -1
  90. package/dist/esm/{cat-alert_21.entry.js → cat-alert_22.entry.js} +219 -49
  91. package/dist/esm/cat-alert_22.entry.js.map +1 -0
  92. package/dist/esm/{cat-notification-3da6ddb1.js → cat-notification-5b6a2cd9.js} +360 -47
  93. package/dist/esm/cat-notification-5b6a2cd9.js.map +1 -0
  94. package/dist/esm/catalyst.js +2 -2
  95. package/dist/esm/{index-41ceb7da.js → index-17d2bcf3.js} +12 -1
  96. package/dist/esm/index-17d2bcf3.js.map +1 -0
  97. package/dist/esm/index.js +1 -2
  98. package/dist/esm/index.js.map +1 -1
  99. package/dist/esm/loader.js +2 -2
  100. package/dist/types/components/cat-alert/cat-alert.d.ts +9 -0
  101. package/dist/types/components/cat-input/cat-input.d.ts +2 -1
  102. package/dist/types/components/cat-input/input-type.d.ts +1 -0
  103. package/dist/types/components/cat-notification/cat-notification.d.ts +9 -4
  104. package/dist/types/components/cat-radio-group/cat-radio-group.d.ts +5 -0
  105. package/dist/types/components/cat-select/cat-select.d.ts +9 -0
  106. package/dist/types/components/cat-tabs/cat-tabs.d.ts +5 -1
  107. package/dist/types/components.d.ts +27 -2
  108. package/dist/types/index.d.ts +1 -1
  109. package/package.json +4 -4
  110. package/dist/catalyst/p-2ad6f8d8.js +0 -2
  111. package/dist/catalyst/p-2ad6f8d8.js.map +0 -1
  112. package/dist/catalyst/p-659073b5.js.map +0 -1
  113. package/dist/catalyst/p-6fce43dd.js +0 -2
  114. package/dist/catalyst/p-6fce43dd.js.map +0 -1
  115. package/dist/catalyst/p-8121572a.js +0 -10
  116. package/dist/catalyst/p-8121572a.js.map +0 -1
  117. package/dist/catalyst/p-aa382647.entry.js +0 -12
  118. package/dist/catalyst/p-aa382647.entry.js.map +0 -1
  119. package/dist/catalyst/p-c0b4200d.entry.js +0 -2
  120. package/dist/catalyst/p-c0b4200d.entry.js.map +0 -1
  121. package/dist/cjs/cat-alert_21.cjs.entry.js.map +0 -1
  122. package/dist/cjs/cat-form-hint-25fdfed5.js +0 -22
  123. package/dist/cjs/cat-form-hint-25fdfed5.js.map +0 -1
  124. package/dist/cjs/cat-notification-c2859ed7.js.map +0 -1
  125. package/dist/cjs/cat-textarea.cjs.entry.js +0 -92
  126. package/dist/cjs/cat-textarea.cjs.entry.js.map +0 -1
  127. package/dist/cjs/index-936b777e.js.map +0 -1
  128. package/dist/cjs/loglevel-b5d158ad.js +0 -324
  129. package/dist/cjs/loglevel-b5d158ad.js.map +0 -1
  130. package/dist/esm/cat-alert_21.entry.js.map +0 -1
  131. package/dist/esm/cat-form-hint-790d1e46.js +0 -20
  132. package/dist/esm/cat-form-hint-790d1e46.js.map +0 -1
  133. package/dist/esm/cat-notification-3da6ddb1.js.map +0 -1
  134. package/dist/esm/cat-textarea.entry.js +0 -88
  135. package/dist/esm/cat-textarea.entry.js.map +0 -1
  136. package/dist/esm/index-41ceb7da.js.map +0 -1
  137. package/dist/esm/loglevel-c8b59c3a.js +0 -319
  138. package/dist/esm/loglevel-c8b59c3a.js.map +0 -1
@@ -1,23 +1,32 @@
1
- import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-41ceb7da.js';
2
- import { l as loglevel, c as createCommonjsModule, g as getDefaultExportFromCjs } from './loglevel-c8b59c3a.js';
3
- import { C as CatFormHint } from './cat-form-hint-790d1e46.js';
4
- import { a as CatIconRegistry, C as CatI18nRegistry, N as NotificationsService } from './cat-notification-3da6ddb1.js';
1
+ import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-17d2bcf3.js';
2
+ import { l as loglevel, a as CatIconRegistry, C as CatI18nRegistry, c as createCommonjsModule, g as getDefaultExportFromCjs, N as NotificationsService } from './cat-notification-5b6a2cd9.js';
5
3
 
6
- const catAlertCss = ":host{display:block;margin-bottom:1rem}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host([hidden]){display:none}.alert{font:inherit;color:rgb(var(--text));background-color:rgba(var(--bg), 0.1);box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);border-radius:0.25rem;padding:0.75rem 1rem}::slotted(:last-child){margin-bottom:0 !important}.alert-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.alert-secondary{--bg:105, 118, 135;--text:0, 0, 0;--border:105, 118, 135}.alert-success{--bg:0, 132, 88;--text:0, 132, 88;--border:0, 132, 88}.alert-warning{--bg:255, 206, 128;--text:159, 97, 0;--border:159, 97, 0}.alert-danger{--bg:217, 52, 13;--text:217, 52, 13;--border:217, 52, 13}";
4
+ const catAlertCss = ":host{display:block;margin-bottom:1rem}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host([hidden]){display:none}.alert{font:inherit;background-color:rgba(var(--bg), 0.1);border-radius:0.5rem;padding:1.25rem;display:flex;flex-direction:row;gap:0.5rem}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}.alert-primary{--bg:var(--cat-primary-bg, 32, 127, 138)}.alert-primary cat-icon{color:#207f8a}.alert-secondary{--bg:105, 118, 135}.alert-secondary cat-icon{color:#697687}.alert-success{--bg:0, 132, 88}.alert-success cat-icon{color:#008458}.alert-warning{--bg:255, 206, 128}.alert-warning cat-icon{color:#ebb663}.alert-danger{--bg:217, 52, 13}.alert-danger cat-icon{color:#d9340d}";
7
5
 
8
6
  const CatAlert = class {
9
7
  constructor(hostRef) {
10
8
  registerInstance(this, hostRef);
9
+ this.mapIcon = new Map([
10
+ ['primary', 'star-circle-filled'],
11
+ ['secondary', 'clock-filled'],
12
+ ['success', 'check-circle-filled'],
13
+ ['warning', 'danger-filled'],
14
+ ['danger', 'cross-circle-filled']
15
+ ]);
11
16
  /**
12
17
  * The color palette of the alert.
13
18
  */
14
19
  this.color = 'primary';
20
+ /**
21
+ * Whether the icon of the alert is deactivated.
22
+ */
23
+ this.noIcon = false;
15
24
  }
16
25
  render() {
17
26
  return (h(Host, { tabindex: "0", role: this.role }, h("div", { part: "alert", class: {
18
27
  alert: true,
19
28
  [`alert-${this.color}`]: Boolean(this.color)
20
- } }, h("slot", null))));
29
+ } }, !this.noIcon && h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }), h("div", { class: "content" }, h("slot", null)))));
21
30
  }
22
31
  get role() {
23
32
  switch (this.color) {
@@ -270,7 +279,7 @@ function createEmptyStyleRule(query) {
270
279
  }
271
280
  }
272
281
 
273
- const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
282
+ const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xs]){margin:-0.25rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.25rem;margin-bottom:-0.25rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.25rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.25rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
274
283
 
275
284
  const CatButton = class {
276
285
  constructor(hostRef) {
@@ -459,16 +468,31 @@ const CatCard = class {
459
468
  };
460
469
  CatCard.style = catCardCss;
461
470
 
462
- const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
471
+ /**
472
+ * CatFormHint is a functional component that represents the hint area of form elements.
473
+ *
474
+ * @param props - {@link CatFormHintProps}
475
+ * @return a JSX.Element
476
+ */
477
+ const CatFormHint = props => {
478
+ const { hint, slottedHint } = props;
479
+ return (h("div", { class: "hint-section" }, [
480
+ hint &&
481
+ (Array.isArray(hint) ? hint.map(item => h("p", { class: "input-hint" }, item)) : h("p", { class: "input-hint" }, hint)),
482
+ slottedHint
483
+ ]));
484
+ };
485
+
486
+ const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
463
487
 
464
- let nextUniqueId$7 = 0;
488
+ let nextUniqueId$8 = 0;
465
489
  const CatCheckbox = class {
466
490
  constructor(hostRef) {
467
491
  registerInstance(this, hostRef);
468
492
  this.catChange = createEvent(this, "catChange", 7);
469
493
  this.catFocus = createEvent(this, "catFocus", 7);
470
494
  this.catBlur = createEvent(this, "catBlur", 7);
471
- this.id = `cat-checkbox-${nextUniqueId$7++}`;
495
+ this.id = `cat-checkbox-${nextUniqueId$8++}`;
472
496
  this.hasSlottedLabel = false;
473
497
  /**
474
498
  * Checked state of the checkbox
@@ -564,9 +588,9 @@ const CatIcon = class {
564
588
  };
565
589
  CatIcon.style = catIconCss;
566
590
 
567
- const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid #d7dbe0;padding-right:0.75rem}.text-suffix{border-left:1px solid #d7dbe0;padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
591
+ const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid #d7dbe0;padding-right:0.75rem}.text-suffix{border-left:1px solid #d7dbe0;padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
568
592
 
569
- let nextUniqueId$6 = 0;
593
+ let nextUniqueId$7 = 0;
570
594
  const CatInput = class {
571
595
  constructor(hostRef) {
572
596
  registerInstance(this, hostRef);
@@ -574,7 +598,7 @@ const CatInput = class {
574
598
  this.catFocus = createEvent(this, "catFocus", 7);
575
599
  this.catBlur = createEvent(this, "catBlur", 7);
576
600
  this.i18n = CatI18nRegistry.getInstance();
577
- this.id = `cat-input-${nextUniqueId$6++}`;
601
+ this.id = `cat-input-${nextUniqueId$7++}`;
578
602
  this.hasSlottedLabel = false;
579
603
  /**
580
604
  * Whether the input should show a clear button.
@@ -2900,13 +2924,13 @@ const firstTabbable = (container) => {
2900
2924
 
2901
2925
  const catMenuCss = ":host{display:contents}:host([hidden]){display:none}.content{padding-top:0.5rem;padding-bottom:0.5rem;position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-width:8rem;max-width:16rem;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem;z-index:100}";
2902
2926
 
2903
- let nextUniqueId$5 = 0;
2927
+ let nextUniqueId$6 = 0;
2904
2928
  const CatMenu = class {
2905
2929
  constructor(hostRef) {
2906
2930
  registerInstance(this, hostRef);
2907
2931
  this.catOpen = createEvent(this, "catOpen", 7);
2908
2932
  this.catClose = createEvent(this, "catClose", 7);
2909
- this.id = nextUniqueId$5++;
2933
+ this.id = nextUniqueId$6++;
2910
2934
  /**
2911
2935
  * The placement of the menu.
2912
2936
  */
@@ -3065,16 +3089,16 @@ const CatModal = class {
3065
3089
  };
3066
3090
  CatModal.style = catModalCss;
3067
3091
 
3068
- const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
3092
+ const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden;pointer-events:none}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
3069
3093
 
3070
- let nextUniqueId$4 = 0;
3094
+ let nextUniqueId$5 = 0;
3071
3095
  const CatRadio = class {
3072
3096
  constructor(hostRef) {
3073
3097
  registerInstance(this, hostRef);
3074
3098
  this.catChange = createEvent(this, "catChange", 7);
3075
3099
  this.catFocus = createEvent(this, "catFocus", 7);
3076
3100
  this.catBlur = createEvent(this, "catBlur", 7);
3077
- this.id = `cat-radio-${++nextUniqueId$4}`;
3101
+ this.id = `cat-radio-${++nextUniqueId$5}`;
3078
3102
  this.hasSlottedLabel = false;
3079
3103
  /**
3080
3104
  * Whether this radio is checked.
@@ -3143,6 +3167,7 @@ const CatRadioGroup = class {
3143
3167
  constructor(hostRef) {
3144
3168
  registerInstance(this, hostRef);
3145
3169
  this.catChange = createEvent(this, "catChange", 7);
3170
+ this.catBlur = createEvent(this, "catBlur", 7);
3146
3171
  this.catRadioGroup = [];
3147
3172
  /**
3148
3173
  * Whether this radio group is disabled.
@@ -3204,6 +3229,11 @@ const CatRadioGroup = class {
3204
3229
  this.value = catRadioElement === null || catRadioElement === void 0 ? void 0 : catRadioElement.value;
3205
3230
  this.catChange.emit();
3206
3231
  }
3232
+ onBlur(event) {
3233
+ if (!event.relatedTarget) {
3234
+ this.catBlur.emit(event);
3235
+ }
3236
+ }
3207
3237
  render() {
3208
3238
  return (h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", null)));
3209
3239
  }
@@ -12038,9 +12068,9 @@ __webpack_exports__ = __webpack_exports__["default"];
12038
12068
 
12039
12069
  const Choices = /*@__PURE__*/getDefaultExportFromCjs(choices);
12040
12070
 
12041
- const catSelectCss = "*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*::before,*::after{box-sizing:border-box}html,body{position:relative;margin:0;width:100%;height:100%}body{font-family:\"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0;margin-bottom:8px}hr{display:block;margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:visited,a:focus{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;appearance:none;margin-bottom:24px}h1,.h1{font-size:32px}h2,.h2{font-size:24px}h3,.h3{font-size:20px}h4,.h4{font-size:18px}h5,.h5{font-size:16px}h6,.h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width: 620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:visited,.section a:focus{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}.hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start;font-size:inherit;font-weight:inherit;margin:0}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.choices{position:relative;overflow:hidden;font-size:16px}.choices:focus{outline:none;box-shadow:0 1px 4px 0 #101d3033}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible;box-shadow:0 1px 4px 0 #101d3033}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices [hidden]{display:none !important}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__list--dropdown .choices__list{padding-top:0.5rem}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:12px 16px 12px 40px;border-bottom:1px solid #d7dbe0;margin:0;color:#000;background:#fff url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjUgMC4yNUMzLjk0MzY1IDAuMjUgMC4yNSAzLjk0MzY1IDAuMjUgOC41QzAuMjUgMTMuMDU2MyAzLjk0MzY1IDE2Ljc1IDguNSAxNi43NUMxMC41MjU1IDE2Ljc1IDEyLjM4MDUgMTYuMDIwMSAxMy44MTYzIDE0LjgwODlDMTMuODUyNiAxNC44ODkyIDEzLjkwMzcgMTQuOTY0NCAxMy45Njk3IDE1LjAzMDNMMTYuNDY5NyAxNy41MzAzQzE2Ljc2MjYgMTcuODIzMiAxNy4yMzc0IDE3LjgyMzIgMTcuNTMwMyAxNy41MzAzQzE3LjgyMzIgMTcuMjM3NCAxNy44MjMyIDE2Ljc2MjYgMTcuNTMwMyAxNi40Njk3TDE1LjAzMDMgMTMuOTY5N0MxNC45NjQ0IDEzLjkwMzcgMTQuODg5MiAxMy44NTI2IDE0LjgwODkgMTMuODE2M0MxNi4wMjAxIDEyLjM4MDUgMTYuNzUgMTAuNTI1NSAxNi43NSA4LjVDMTYuNzUgMy45NDM2NSAxMy4wNTYzIDAuMjUgOC41IDAuMjVaTTEuNzUgOC41QzEuNzUgNC43NzIwOCA0Ljc3MjA4IDEuNzUgOC41IDEuNzVDMTIuMjI3OSAxLjc1IDE1LjI1IDQuNzcyMDggMTUuMjUgOC41QzE1LjI1IDEyLjIyNzkgMTIuMjI3OSAxNS4yNSA4LjUgMTUuMjVDNC43NzIwOCAxNS4yNSAxLjc1IDEyLjIyNzkgMS43NSA4LjVaIiBmaWxsPSIjNjk3Njg3Ii8+Cjwvc3ZnPgo=\") no-repeat left 12px center}.choices[data-type*=select-one] .choices__input::before{content:\"abc\"}.choices[data-type*=select-one] .choices__button{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNDY5NjcgNi40Njk2N0M2Ljc2MjU2IDYuMTc2NzggNy4yMzc0NCA2LjE3Njc4IDcuNTMwMzMgNi40Njk2N0wxMCA4LjkzOTM0TDEyLjQ2OTcgNi40Njk2N0MxMi43NjI2IDYuMTc2NzggMTMuMjM3NCA2LjE3Njc4IDEzLjUzMDMgNi40Njk2N0MxMy44MjMyIDYuNzYyNTYgMTMuODIzMiA3LjIzNzQ0IDEzLjUzMDMgNy41MzAzM0wxMS4wNjA3IDEwTDEzLjUzMDMgMTIuNDY5N0MxMy44MjMyIDEyLjc2MjYgMTMuODIzMiAxMy4yMzc0IDEzLjUzMDMgMTMuNTMwM0MxMy4yMzc0IDEzLjgyMzIgMTIuNzYyNiAxMy44MjMyIDEyLjQ2OTcgMTMuNTMwM0wxMCAxMS4wNjA3TDcuNTMwMzMgMTMuNTMwM0M3LjIzNzQ0IDEzLjgyMzIgNi43NjI1NiAxMy44MjMyIDYuNDY5NjcgMTMuNTMwM0M2LjE3Njc4IDEzLjIzNzQgNi4xNzY3OCAxMi43NjI2IDYuNDY5NjcgMTIuNDY5N0w4LjkzOTM0IDEwTDYuNDY5NjcgNy41MzAzM0M2LjE3Njc4IDcuMjM3NDQgNi4xNzY3OCA2Ljc2MjU2IDYuNDY5NjcgNi40Njk2N1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMC4yNUM0LjYxNTIyIDAuMjUgMC4yNSA0LjYxNTIyIDAuMjUgMTBDMC4yNSAxNS4zODQ4IDQuNjE1MjIgMTkuNzUgMTAgMTkuNzVDMTUuMzg0OCAxOS43NSAxOS43NSAxNS4zODQ4IDE5Ljc1IDEwQzE5Ljc1IDQuNjE1MjIgMTUuMzg0OCAwLjI1IDEwIDAuMjVaTTEuNzUgMTBDMS43NSA1LjQ0MzY1IDUuNDQzNjUgMS43NSAxMCAxLjc1QzE0LjU1NjMgMS43NSAxOC4yNSA1LjQ0MzY1IDE4LjI1IDEwQzE4LjI1IDE0LjU1NjMgMTQuNTU2MyAxOC4yNSAxMCAxOC4yNUM1LjQ0MzY1IDE4LjI1IDEuNzUgMTQuNTU2MyAxLjc1IDEwWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\");padding:0;background-size:20px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:35px;height:20px;width:20px}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px rgba(105, 118, 135, 0.1)}.choices[data-type*=select-one] .choices__item[data-value=\"\"] .choices__button{display:none}.choices[data-type*=select-one] .choices__item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.choices[data-type*=select-one][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:35px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text;display:flex;flex-flow:row wrap;align-items:center;padding:4px 60px 4px 4px;gap:4px}.choices[data-type*=select-multiple] .choices__item cat-checkbox,.choices[data-type*=text] .choices__item cat-checkbox{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}.choices[data-type*=select-multiple] .choices__item cat-checkbox::part(label),.choices[data-type*=text] .choices__item cat-checkbox::part(label){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.choices[data-type*=select-multiple] .choices__input,.choices[data-type*=text] .choices__input{min-width:1ch;width:1ch}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;padding-left:24px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuMjc1MzIgMC4zOTEzNzFDMS4wMzEyNCAwLjE0NzI5NCAwLjYzNTUxIDAuMTQ3Mjk0IDAuMzkxNDMyIDAuMzkxMzcxQzAuMTQ3MzU1IDAuNjM1NDQ5IDAuMTQ3MzU1IDEuMDMxMTggMC4zOTE0MzIgMS4yNzUyNUw0LjExNjE2IDQuOTk5OThMMC4zOTE0MzIgOC43MjQ3QzAuMTQ3MzU1IDguOTY4NzggMC4xNDczNTUgOS4zNjQ1MSAwLjM5MTQzMiA5LjYwODU5QzAuNjM1NTEgOS44NTI2NyAxLjAzMTI0IDkuODUyNjcgMS4yNzUzMiA5LjYwODU5TDUuMDAwMDQgNS44ODM4Nkw4LjcyNDc3IDkuNjA4NTlDOC45Njg4NCA5Ljg1MjY3IDkuMzY0NTcgOS44NTI2NyA5LjYwODY1IDkuNjA4NTlDOS44NTI3MyA5LjM2NDUxIDkuODUyNzMgOC45Njg3OCA5LjYwODY1IDguNzI0N0w1Ljg4MzkyIDQuOTk5OThMOS42MDg2NSAxLjI3NTI1QzkuODUyNzMgMS4wMzExOCA5Ljg1MjczIDAuNjM1NDQ5IDkuNjA4NjUgMC4zOTEzNzFDOS4zNjQ1NyAwLjE0NzI5NCA4Ljk2ODg0IDAuMTQ3Mjk0IDguNzI0NzcgMC4zOTEzNzFMNS4wMDAwNCA0LjExNjFMMS4yNzUzMiAwLjM5MTM3MVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=\");background-size:10px;width:10px;line-height:1;opacity:0.75;border-radius:0}.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=text] .choices__button:hover,.choices[data-type*=text] .choices__button:focus{opacity:1}.choices[data-type*=select-multiple] cat-button,.choices[data-type*=text] cat-button{position:absolute;top:50%;right:0;margin-top:-20px;margin-right:25px}.choices[data-type*=select-multiple] cat-button::part(button),.choices[data-type*=text] cat-button::part(button){box-shadow:unset;background-color:transparent}.choices[data-type*=select-multiple][dir=rtl] .choices__inner,.choices[data-type*=text][dir=rtl] .choices__inner{padding-right:4px;padding-left:60px}.choices[data-type*=select-multiple][dir=rtl] cat-button,.choices[data-type*=text][dir=rtl] cat-button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-one]::after,.choices[data-type*=select-multiple]::after{content:\"\";width:12px;height:6.5px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40Njk2NyAwLjQ2OTY3QzAuNzYyNTYzIDAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMS41MzAzMyAwLjQ2OTY3TDYgNC45MzkzNEwxMC40Njk3IDAuNDY5NjcxQzEwLjc2MjYgMC4xNzY3NzggMTEuMjM3NCAwLjE3Njc3OCAxMS41MzAzIDAuNDY5NjcxQzExLjgyMzIgMC43NjI1NjQgMTEuODIzMiAxLjIzNzQ0IDExLjUzMDMgMS41MzAzM0w2LjUzMDMzIDYuNTMwMzNDNi4yMzc0NCA2LjgyMzIyIDUuNzYyNTYgNi44MjMyMiA1LjQ2OTY3IDYuNTMwMzNMMC40Njk2NyAxLjUzMDMzQzAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMC43NjI1NjMgMC40Njk2NyAwLjQ2OTY3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\");position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none;transition:transform 0.25s linear}.choices[data-type*=select-one][dir=rtl]::after,.choices[data-type*=select-multiple][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one].is-open::after,.choices[data-type*=select-multiple].is-open::after{transform:rotate(180deg);transition:transform 0.25s linear}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#fff;border:1px solid #d7dbe0;border-radius:4px;font-size:15px;min-height:40px;overflow:hidden}.is-open .choices__inner{border-radius:4px 4px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 4px 4px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:flex;padding:9px 50px 9px 12px;width:100%}[dir=rtl] .choices__list--single{padding-right:12px;padding-left:50px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:contents}.choices__list--multiple .choices__item{font-size:0.9375rem;line-height:1.25rem;font-weight:600;display:inline-flex;align-items:center;justify-content:space-between;border-radius:2px;padding:5px 8px 5px 4px;background-color:rgba(105, 118, 135, 0.1);color:#000;word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:rgba(94, 105, 121, 0.1)}.is-disabled .choices__list--multiple .choices__item{background-color:#aaaaaa}.choices__list--dropdown,.choices__list[aria-expanded]{visibility:hidden;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #d7dbe0;top:100%;margin-top:-1px;overflow:hidden;word-break:break-all;will-change:visibility;box-shadow:0 2px 4px 0 #101d3033;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{visibility:visible}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:0.25rem 0.25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;padding:8px 0;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{font-size:0.9375rem;line-height:1.25rem;font-weight:500;position:relative;padding:10px;min-height:40px}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width: 640px){.choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]),.choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]){padding-right:100px}[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]),[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]){padding-right:10px}.choices__list--dropdown .choices__item--selectable::after,.choices__list[aria-expanded] .choices__item--selectable::after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable{text-align:right;padding-left:100px}[dir=rtl] .choices__list--dropdown .choices__item--selectable::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:rgba(105, 118, 135, 0.05)}.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after{opacity:0.5}.choices__item{cursor:default;border-left:3px solid transparent;transition:0.25s linear}.choices__item--selectable{cursor:pointer}.choices__item--selected{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}.choices__item--disabled{cursor:not-allowed;user-select:none;opacity:0.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f4f5f6;color:gray}.choices__button{text-indent:-9999px;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus{outline:none}.choices__input{display:inline-block;vertical-align:baseline;background-color:white;font-size:15px;font-family:var(--cat-font-family-body, \"Lato\"), system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";border:0;border-radius:0;max-width:100%;padding:7px 0 4px 2px}.choices__input:focus{outline:0}.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:0.5}.choices__group{padding:8px 16px;height:34px}.choices__group .choices__heading{font-style:normal;font-weight:700;font-size:14px;line-height:18px;padding:unset;border-bottom:0;color:#697687}.choices__group:not(:first-child){border-top:1px solid #f4f5f6;margin-top:8px}.d-flex{display:flex}.align-items-center{align-items:center}.choices-option-icon{width:20px;aspect-ratio:1;border-radius:0.125rem}";
12071
+ const catSelectCss = "*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*::before,*::after{box-sizing:border-box}html,body{position:relative;margin:0;width:100%;height:100%}body{font-family:\"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0;margin-bottom:8px}hr{display:block;margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:visited,a:focus{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;appearance:none;margin-bottom:24px}h1,.h1{font-size:32px}h2,.h2{font-size:24px}h3,.h3{font-size:20px}h4,.h4{font-size:18px}h5,.h5{font-size:16px}h6,.h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width: 620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:visited,.section a:focus{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}.hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start;font-size:inherit;font-weight:inherit;margin:0}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.choices{position:relative;overflow:hidden;font-size:16px}.choices.is-focused,.choices:focus{outline:none;box-shadow:0 1px 4px 0 #101d3033}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices [hidden]{display:none !important}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__list--dropdown .choices__list{padding-top:0.5rem}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:12px 16px 12px 40px;border-bottom:1px solid #d7dbe0;margin:0;color:#000;background:#fff url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjUgMC4yNUMzLjk0MzY1IDAuMjUgMC4yNSAzLjk0MzY1IDAuMjUgOC41QzAuMjUgMTMuMDU2MyAzLjk0MzY1IDE2Ljc1IDguNSAxNi43NUMxMC41MjU1IDE2Ljc1IDEyLjM4MDUgMTYuMDIwMSAxMy44MTYzIDE0LjgwODlDMTMuODUyNiAxNC44ODkyIDEzLjkwMzcgMTQuOTY0NCAxMy45Njk3IDE1LjAzMDNMMTYuNDY5NyAxNy41MzAzQzE2Ljc2MjYgMTcuODIzMiAxNy4yMzc0IDE3LjgyMzIgMTcuNTMwMyAxNy41MzAzQzE3LjgyMzIgMTcuMjM3NCAxNy44MjMyIDE2Ljc2MjYgMTcuNTMwMyAxNi40Njk3TDE1LjAzMDMgMTMuOTY5N0MxNC45NjQ0IDEzLjkwMzcgMTQuODg5MiAxMy44NTI2IDE0LjgwODkgMTMuODE2M0MxNi4wMjAxIDEyLjM4MDUgMTYuNzUgMTAuNTI1NSAxNi43NSA4LjVDMTYuNzUgMy45NDM2NSAxMy4wNTYzIDAuMjUgOC41IDAuMjVaTTEuNzUgOC41QzEuNzUgNC43NzIwOCA0Ljc3MjA4IDEuNzUgOC41IDEuNzVDMTIuMjI3OSAxLjc1IDE1LjI1IDQuNzcyMDggMTUuMjUgOC41QzE1LjI1IDEyLjIyNzkgMTIuMjI3OSAxNS4yNSA4LjUgMTUuMjVDNC43NzIwOCAxNS4yNSAxLjc1IDEyLjIyNzkgMS43NSA4LjVaIiBmaWxsPSIjNjk3Njg3Ii8+Cjwvc3ZnPgo=\") no-repeat left 12px center}.choices[data-type*=select-one] .choices__input::before{content:\"abc\"}.choices[data-type*=select-one] .choices__button{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNDY5NjcgNi40Njk2N0M2Ljc2MjU2IDYuMTc2NzggNy4yMzc0NCA2LjE3Njc4IDcuNTMwMzMgNi40Njk2N0wxMCA4LjkzOTM0TDEyLjQ2OTcgNi40Njk2N0MxMi43NjI2IDYuMTc2NzggMTMuMjM3NCA2LjE3Njc4IDEzLjUzMDMgNi40Njk2N0MxMy44MjMyIDYuNzYyNTYgMTMuODIzMiA3LjIzNzQ0IDEzLjUzMDMgNy41MzAzM0wxMS4wNjA3IDEwTDEzLjUzMDMgMTIuNDY5N0MxMy44MjMyIDEyLjc2MjYgMTMuODIzMiAxMy4yMzc0IDEzLjUzMDMgMTMuNTMwM0MxMy4yMzc0IDEzLjgyMzIgMTIuNzYyNiAxMy44MjMyIDEyLjQ2OTcgMTMuNTMwM0wxMCAxMS4wNjA3TDcuNTMwMzMgMTMuNTMwM0M3LjIzNzQ0IDEzLjgyMzIgNi43NjI1NiAxMy44MjMyIDYuNDY5NjcgMTMuNTMwM0M2LjE3Njc4IDEzLjIzNzQgNi4xNzY3OCAxMi43NjI2IDYuNDY5NjcgMTIuNDY5N0w4LjkzOTM0IDEwTDYuNDY5NjcgNy41MzAzM0M2LjE3Njc4IDcuMjM3NDQgNi4xNzY3OCA2Ljc2MjU2IDYuNDY5NjcgNi40Njk2N1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMC4yNUM0LjYxNTIyIDAuMjUgMC4yNSA0LjYxNTIyIDAuMjUgMTBDMC4yNSAxNS4zODQ4IDQuNjE1MjIgMTkuNzUgMTAgMTkuNzVDMTUuMzg0OCAxOS43NSAxOS43NSAxNS4zODQ4IDE5Ljc1IDEwQzE5Ljc1IDQuNjE1MjIgMTUuMzg0OCAwLjI1IDEwIDAuMjVaTTEuNzUgMTBDMS43NSA1LjQ0MzY1IDUuNDQzNjUgMS43NSAxMCAxLjc1QzE0LjU1NjMgMS43NSAxOC4yNSA1LjQ0MzY1IDE4LjI1IDEwQzE4LjI1IDE0LjU1NjMgMTQuNTU2MyAxOC4yNSAxMCAxOC4yNUM1LjQ0MzY1IDE4LjI1IDEuNzUgMTQuNTU2MyAxLjc1IDEwWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\");padding:0;background-size:20px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:35px;height:20px;width:20px}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px rgba(105, 118, 135, 0.1)}.choices[data-type*=select-one] .choices__item[data-value=\"\"] .choices__button{display:none}.choices[data-type*=select-one] .choices__item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.choices[data-type*=select-one][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:35px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text;display:flex;flex-flow:row wrap;align-items:center;padding:4px 60px 4px 4px;gap:4px}.choices[data-type*=select-multiple] .choices__item cat-checkbox,.choices[data-type*=text] .choices__item cat-checkbox{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}.choices[data-type*=select-multiple] .choices__item cat-checkbox::part(label),.choices[data-type*=text] .choices__item cat-checkbox::part(label){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.choices[data-type*=select-multiple] .choices__input,.choices[data-type*=text] .choices__input{min-width:1ch;width:1ch}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;padding-left:24px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuMjc1MzIgMC4zOTEzNzFDMS4wMzEyNCAwLjE0NzI5NCAwLjYzNTUxIDAuMTQ3Mjk0IDAuMzkxNDMyIDAuMzkxMzcxQzAuMTQ3MzU1IDAuNjM1NDQ5IDAuMTQ3MzU1IDEuMDMxMTggMC4zOTE0MzIgMS4yNzUyNUw0LjExNjE2IDQuOTk5OThMMC4zOTE0MzIgOC43MjQ3QzAuMTQ3MzU1IDguOTY4NzggMC4xNDczNTUgOS4zNjQ1MSAwLjM5MTQzMiA5LjYwODU5QzAuNjM1NTEgOS44NTI2NyAxLjAzMTI0IDkuODUyNjcgMS4yNzUzMiA5LjYwODU5TDUuMDAwMDQgNS44ODM4Nkw4LjcyNDc3IDkuNjA4NTlDOC45Njg4NCA5Ljg1MjY3IDkuMzY0NTcgOS44NTI2NyA5LjYwODY1IDkuNjA4NTlDOS44NTI3MyA5LjM2NDUxIDkuODUyNzMgOC45Njg3OCA5LjYwODY1IDguNzI0N0w1Ljg4MzkyIDQuOTk5OThMOS42MDg2NSAxLjI3NTI1QzkuODUyNzMgMS4wMzExOCA5Ljg1MjczIDAuNjM1NDQ5IDkuNjA4NjUgMC4zOTEzNzFDOS4zNjQ1NyAwLjE0NzI5NCA4Ljk2ODg0IDAuMTQ3Mjk0IDguNzI0NzcgMC4zOTEzNzFMNS4wMDAwNCA0LjExNjFMMS4yNzUzMiAwLjM5MTM3MVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=\");background-size:10px;width:10px;line-height:1;opacity:0.75;border-radius:0}.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=text] .choices__button:hover,.choices[data-type*=text] .choices__button:focus{opacity:1}.choices[data-type*=select-multiple] cat-button,.choices[data-type*=text] cat-button{position:absolute;top:50%;right:0;margin-top:-20px;margin-right:25px}.choices[data-type*=select-multiple] cat-button::part(button),.choices[data-type*=text] cat-button::part(button){box-shadow:unset;background-color:transparent}.choices[data-type*=select-multiple][dir=rtl] .choices__inner,.choices[data-type*=text][dir=rtl] .choices__inner{padding-right:4px;padding-left:60px}.choices[data-type*=select-multiple][dir=rtl] cat-button,.choices[data-type*=text][dir=rtl] cat-button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-one]::after,.choices[data-type*=select-multiple]::after{content:\"\";width:12px;height:6.5px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40Njk2NyAwLjQ2OTY3QzAuNzYyNTYzIDAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMS41MzAzMyAwLjQ2OTY3TDYgNC45MzkzNEwxMC40Njk3IDAuNDY5NjcxQzEwLjc2MjYgMC4xNzY3NzggMTEuMjM3NCAwLjE3Njc3OCAxMS41MzAzIDAuNDY5NjcxQzExLjgyMzIgMC43NjI1NjQgMTEuODIzMiAxLjIzNzQ0IDExLjUzMDMgMS41MzAzM0w2LjUzMDMzIDYuNTMwMzNDNi4yMzc0NCA2LjgyMzIyIDUuNzYyNTYgNi44MjMyMiA1LjQ2OTY3IDYuNTMwMzNMMC40Njk2NyAxLjUzMDMzQzAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMC43NjI1NjMgMC40Njk2NyAwLjQ2OTY3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\");position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none;transition:transform 0.25s linear}.choices[data-type*=select-one][dir=rtl]::after,.choices[data-type*=select-multiple][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one].is-open::after,.choices[data-type*=select-multiple].is-open::after{transform:rotate(180deg);transition:transform 0.25s linear}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#fff;border:1px solid #d7dbe0;border-radius:4px;font-size:15px;min-height:40px;overflow:hidden}.is-open .choices__inner{border-radius:4px 4px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 4px 4px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:flex;padding:9px 50px 9px 12px;width:100%}[dir=rtl] .choices__list--single{padding-right:12px;padding-left:50px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:contents}.choices__list--multiple .choices__item{font-size:0.9375rem;line-height:1.25rem;font-weight:600;display:inline-flex;align-items:center;justify-content:space-between;border-radius:2px;padding:5px 8px 5px 4px;background-color:rgba(105, 118, 135, 0.1);color:#000;word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:rgba(94, 105, 121, 0.1)}.is-disabled .choices__list--multiple .choices__item{background-color:#aaaaaa}.choices__list--dropdown,.choices__list[aria-expanded]{visibility:hidden;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #d7dbe0;top:100%;margin-top:-1px;overflow:hidden;word-break:break-all;will-change:visibility;box-shadow:0 2px 4px 0 #101d3033;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{visibility:visible}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:0.25rem 0.25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;padding:8px 0;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{font-size:0.9375rem;line-height:1.25rem;font-weight:500;position:relative;padding:10px;min-height:40px}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width: 640px){.choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]),.choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]){padding-right:100px}[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]),[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]){padding-right:10px}.choices__list--dropdown .choices__item--selectable::after,.choices__list[aria-expanded] .choices__item--selectable::after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable{text-align:right;padding-left:100px}[dir=rtl] .choices__list--dropdown .choices__item--selectable::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:rgba(105, 118, 135, 0.05)}.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after{opacity:0.5}.choices__item{cursor:default;border-left:3px solid transparent;transition:0.25s linear}.choices__item--selectable{cursor:pointer}.choices__item--selected{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}.choices__item--disabled{cursor:not-allowed;user-select:none;opacity:0.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f4f5f6;color:gray}.choices__button{text-indent:-9999px;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus{outline:none}.choices__input{display:inline-block;vertical-align:baseline;background-color:white;font-size:15px;font-family:var(--cat-font-family-body, \"Lato\"), system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";border:0;border-radius:0;max-width:100%;padding:7px 0 4px 2px}.choices__input:focus{outline:0}.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:0.5}.choices__group{padding:8px 16px;height:34px}.choices__group .choices__heading{font-style:normal;font-weight:700;font-size:14px;line-height:18px;padding:unset;border-bottom:0;color:#697687}.choices__group:not(:first-child){border-top:1px solid #f4f5f6;margin-top:8px}.d-flex{display:flex}.align-items-center{align-items:center}.choices-option-icon{width:20px;aspect-ratio:1;border-radius:0.125rem}";
12042
12072
 
12043
- let nextUniqueId$3 = 0;
12073
+ let nextUniqueId$4 = 0;
12044
12074
  const getOptionTemplate = (data) => {
12045
12075
  var _a;
12046
12076
  if ((_a = data.customProperties) === null || _a === void 0 ? void 0 : _a.imageUrl) {
@@ -12059,8 +12089,9 @@ const CatSelect = class {
12059
12089
  this.catChange = createEvent(this, "catChange", 7);
12060
12090
  this.catSearch = createEvent(this, "catSearch", 7);
12061
12091
  this.catScrolledBottom = createEvent(this, "catScrolledBottom", 7);
12092
+ this.catBlur = createEvent(this, "catBlur", 7);
12062
12093
  this.i18n = CatI18nRegistry.getInstance();
12063
- this.id = `cat-select-${nextUniqueId$3++}`;
12094
+ this.id = `cat-select-${nextUniqueId$4++}`;
12064
12095
  this.resetItemsOnNextValueChange = true;
12065
12096
  this.hasSlottedLabel = false;
12066
12097
  /**
@@ -12109,7 +12140,8 @@ const CatSelect = class {
12109
12140
  (_a = this.choice) === null || _a === void 0 ? void 0 : _a.setChoices(choices, 'value', 'label', true);
12110
12141
  const vItems = ((_b = this.choice) === null || _b === void 0 ? void 0 : _b.getValue()) || [];
12111
12142
  const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]);
12112
- const vItemValues = [...this.value];
12143
+ const value = this.value || [];
12144
+ const vItemValues = [...value];
12113
12145
  // remove duplicate items
12114
12146
  (_c = this.choice) === null || _c === void 0 ? void 0 : _c.unhighlightAll();
12115
12147
  vItemsArray.forEach(vItem => {
@@ -12125,6 +12157,7 @@ const CatSelect = class {
12125
12157
  });
12126
12158
  (_d = this.choice) === null || _d === void 0 ? void 0 : _d.removeHighlightedItems(false);
12127
12159
  }
12160
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
12128
12161
  setValueHandler(value) {
12129
12162
  var _a, _b;
12130
12163
  if (this.resetItemsOnNextValueChange) {
@@ -12141,35 +12174,47 @@ const CatSelect = class {
12141
12174
  }
12142
12175
  }
12143
12176
  componentDidLoad() {
12144
- var _a, _b, _c, _d, _e, _f, _g, _h;
12177
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
12145
12178
  this.init();
12146
12179
  const attachedInternals = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a);
12147
12180
  if (attachedInternals) {
12148
12181
  const root = attachedInternals.shadowRoot;
12182
+ this.choicesElement = (root === null || root === void 0 ? void 0 : root.querySelector('.choices')) || undefined;
12149
12183
  this.choiceInner = (root === null || root === void 0 ? void 0 : root.querySelector('.choices__inner')) || undefined;
12150
12184
  this.choiceDropdown = ((_c = root === null || root === void 0 ? void 0 : root.querySelector('.choices__list--dropdown')) === null || _c === void 0 ? void 0 : _c.firstElementChild) || undefined;
12151
12185
  }
12152
- (_d = this.choiceInner) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.showDropdownHandler.bind(this));
12153
- (_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.addEventListener('change', this.onChange.bind(this));
12154
- (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('search', this.onSearch.bind(this));
12155
- (_g = this.choiceDropdown) === null || _g === void 0 ? void 0 : _g.addEventListener('scroll', this.onScrolledBottom.bind(this));
12186
+ (_d = this.choicesElement) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.resetFocus.bind(this));
12187
+ (_e = this.choiceInner) === null || _e === void 0 ? void 0 : _e.addEventListener('click', this.showDropdownHandler.bind(this));
12188
+ (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('hideDropdown', this.showMultipleFocus.bind(this));
12189
+ (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('showDropdown', this.showMultipleFocus.bind(this));
12190
+ (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('removeItem', this.resetFocus.bind(this));
12191
+ (_j = this.selectElement) === null || _j === void 0 ? void 0 : _j.addEventListener('change', this.onChange.bind(this));
12192
+ (_k = this.selectElement) === null || _k === void 0 ? void 0 : _k.addEventListener('search', this.onSearch.bind(this));
12193
+ (_l = this.choiceDropdown) === null || _l === void 0 ? void 0 : _l.addEventListener('scroll', this.onScrolledBottom.bind(this));
12156
12194
  if (this.multiple) {
12157
- (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('choice', this.onChoice.bind(this));
12195
+ (_m = this.selectElement) === null || _m === void 0 ? void 0 : _m.addEventListener('choice', this.onChoice.bind(this));
12158
12196
  this.createRemoveItemButton();
12159
12197
  }
12160
12198
  }
12161
12199
  disconnectedCallback() {
12162
- var _a, _b, _c, _d, _e, _f;
12200
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
12163
12201
  (_a = this.choice) === null || _a === void 0 ? void 0 : _a.destroy();
12164
12202
  this.choice = undefined;
12165
- (_b = this.choiceInner) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.showDropdownHandler.bind(this));
12166
- (_c = this.selectElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('change', this.onChange.bind(this));
12167
- (_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('search', this.onSearch.bind(this));
12168
- (_e = this.choiceDropdown) === null || _e === void 0 ? void 0 : _e.removeEventListener('scroll', this.onScrolledBottom.bind(this));
12203
+ (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.resetFocus.bind(this));
12204
+ (_c = this.choiceInner) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.showDropdownHandler.bind(this));
12205
+ (_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('hideDropdown', this.showMultipleFocus.bind(this));
12206
+ (_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('showDropdown', this.showMultipleFocus.bind(this));
12207
+ (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('removeItem', this.resetFocus.bind(this));
12208
+ (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('change', this.onChange.bind(this));
12209
+ (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('search', this.onSearch.bind(this));
12210
+ (_j = this.choiceDropdown) === null || _j === void 0 ? void 0 : _j.removeEventListener('scroll', this.onScrolledBottom.bind(this));
12169
12211
  if (this.multiple) {
12170
- (_f = this.removeElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('choice', this.onChoice.bind(this));
12212
+ (_k = this.removeElement) === null || _k === void 0 ? void 0 : _k.removeEventListener('choice', this.onChoice.bind(this));
12171
12213
  }
12172
12214
  }
12215
+ onBlur(event) {
12216
+ this.catBlur.emit(event);
12217
+ }
12173
12218
  render() {
12174
12219
  return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.t('input.optional'), ")"))))), h("select", { id: this.id, ref: el => (this.selectElement = el), multiple: this.multiple, disabled: this.disabled }), this.hintSection));
12175
12220
  }
@@ -12279,12 +12324,30 @@ const CatSelect = class {
12279
12324
  this.value = (_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue(true);
12280
12325
  this.catChange.emit(this.value);
12281
12326
  }
12327
+ showMultipleFocus() {
12328
+ var _a, _b;
12329
+ if (this.multiple && this.isFocused() && !((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.classList.contains('is-focused'))) {
12330
+ (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.classList.add('is-focused');
12331
+ }
12332
+ }
12333
+ resetFocus() {
12334
+ var _a, _b, _c;
12335
+ if (!this.isFocused()) {
12336
+ if (!((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('tabindex'))) {
12337
+ (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
12338
+ }
12339
+ (_c = this.choicesElement) === null || _c === void 0 ? void 0 : _c.focus();
12340
+ }
12341
+ }
12342
+ isFocused() {
12343
+ return document.activeElement === this.hostElement;
12344
+ }
12282
12345
  onChoice(event) {
12283
12346
  var _a;
12284
12347
  const customEvent = event;
12285
- const coice = customEvent.detail.choice;
12286
- if (coice.selected) {
12287
- (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(coice.value);
12348
+ const choice = customEvent.detail.choice;
12349
+ if (choice.selected) {
12350
+ (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(choice.value);
12288
12351
  this.onChange();
12289
12352
  }
12290
12353
  }
@@ -12316,8 +12379,7 @@ const CatSelect = class {
12316
12379
  }
12317
12380
  updateRemoveItemButtonVisibility() {
12318
12381
  var _a, _b, _c;
12319
- const items = Array.from((_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue());
12320
- if (items.length) {
12382
+ if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) {
12321
12383
  (_b = this.removeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
12322
12384
  }
12323
12385
  else {
@@ -12328,7 +12390,7 @@ const CatSelect = class {
12328
12390
  var _a;
12329
12391
  event.stopPropagation();
12330
12392
  (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
12331
- this.updateRemoveItemButtonVisibility();
12393
+ this.onChange();
12332
12394
  }
12333
12395
  get hostElement() { return getElement(this); }
12334
12396
  static get watchers() { return {
@@ -12408,7 +12470,7 @@ CatSpinner.style = catSpinnerCss;
12408
12470
 
12409
12471
  const catTabCss = ":host{display:block}:host([hidden]){display:none}";
12410
12472
 
12411
- let nextUniqueId$2 = 0;
12473
+ let nextUniqueId$3 = 0;
12412
12474
  const CatTab = class {
12413
12475
  constructor(hostRef) {
12414
12476
  registerInstance(this, hostRef);
@@ -12432,7 +12494,7 @@ const CatTab = class {
12432
12494
  }
12433
12495
  connectedCallback() {
12434
12496
  if (!this.hostElement.id) {
12435
- this.hostElement.id = `cat-tab-${nextUniqueId$2++}`;
12497
+ this.hostElement.id = `cat-tab-${nextUniqueId$3++}`;
12436
12498
  }
12437
12499
  }
12438
12500
  onClick(event) {
@@ -12450,8 +12512,8 @@ const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1p
12450
12512
  const CatTabs = class {
12451
12513
  constructor(hostRef) {
12452
12514
  registerInstance(this, hostRef);
12453
- this.tabs = [];
12454
12515
  this.buttons = [];
12516
+ this.tabs = [];
12455
12517
  /**
12456
12518
  * The ID of the active tab.
12457
12519
  */
@@ -12466,11 +12528,24 @@ const CatTabs = class {
12466
12528
  activeTab === null || activeTab === void 0 ? void 0 : activeTab.click();
12467
12529
  }
12468
12530
  componentWillLoad() {
12469
- this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
12531
+ this.syncTabs();
12470
12532
  if (this.tabs.length) {
12471
12533
  this.activeTabId = this.activeTab;
12472
12534
  }
12473
12535
  }
12536
+ componentDidLoad() {
12537
+ var _a;
12538
+ this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs());
12539
+ (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, {
12540
+ childList: true,
12541
+ attributes: true,
12542
+ subtree: true
12543
+ });
12544
+ }
12545
+ disconnectedCallback() {
12546
+ var _a;
12547
+ (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
12548
+ }
12474
12549
  onKeydown(event) {
12475
12550
  var _a;
12476
12551
  if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
@@ -12500,6 +12575,9 @@ const CatTabs = class {
12500
12575
  this.buttons.push(button);
12501
12576
  }
12502
12577
  }
12578
+ syncTabs() {
12579
+ this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
12580
+ }
12503
12581
  get hostElement() { return getElement(this); }
12504
12582
  static get watchers() { return {
12505
12583
  "activeTabId": ["onActiveTabChanged"]
@@ -12507,6 +12585,87 @@ const CatTabs = class {
12507
12585
  };
12508
12586
  CatTabs.style = catTabsCss;
12509
12587
 
12588
+ var e,t,n="function"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o));},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1));}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event("test");}catch(e){o=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t};}function r(e){var t=n.get(e);t&&t.destroy();}function i(e){var t=n.get(e);t&&t.update();}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return function(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,d=function(){e.clientWidth!==i&&c();},a=function(t){window.removeEventListener("resize",d,!1),e.removeEventListener("input",c,!1),e.removeEventListener("keyup",c,!1),e.removeEventListener("autosize:destroy",a,!1),e.removeEventListener("autosize:update",c,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n];}),n.delete(e);}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",a,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",c,!1),window.addEventListener("resize",d,!1),e.addEventListener("input",c,!1),e.addEventListener("autosize:update",c,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",n.set(e,{destroy:a,update:c}),"vertical"===(t=window.getComputedStyle(e,null)).resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),r="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),c();}function u(t){var n=e.style.width;e.style.width="0px",e.style.width=n,e.style.overflowY=t;}function s(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(e),n=document.documentElement&&document.documentElement.scrollTop;e.style.height="",e.style.height=e.scrollHeight+r+"px",i=e.clientWidth,t.forEach(function(e){e.node.scrollTop=e.scrollTop;}),n&&(document.documentElement.scrollTop=n);}}function c(){s();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r="content-box"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r<t?"hidden"===n.overflowY&&(u("scroll"),s(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight):"hidden"!==n.overflowY&&(u("hidden"),s(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight),l!==r){l=r;var i=o("autosize:resized");try{e.dispatchEvent(i);}catch(e){}}}}(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e});var d=l;
12589
+
12590
+ const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:0.25rem;border:none;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}textarea:disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}textarea:hover:not(:disabled){box-shadow:0 0 0 2px #d7dbe0}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
12591
+
12592
+ let nextUniqueId$2 = 0;
12593
+ const CatTextarea = class {
12594
+ constructor(hostRef) {
12595
+ registerInstance(this, hostRef);
12596
+ this.catChange = createEvent(this, "catChange", 7);
12597
+ this.catFocus = createEvent(this, "catFocus", 7);
12598
+ this.catBlur = createEvent(this, "catBlur", 7);
12599
+ this.id = `cat-textarea-${nextUniqueId$2++}`;
12600
+ this.hasSlottedLabel = false;
12601
+ /**
12602
+ * Whether the textarea is disabled.
12603
+ */
12604
+ this.disabled = false;
12605
+ /**
12606
+ * The label for the textarea.
12607
+ */
12608
+ this.label = '';
12609
+ /**
12610
+ * Visually hide the label, but still show it to assistive technologies like screen readers.
12611
+ */
12612
+ this.labelHidden = false;
12613
+ /**
12614
+ * The name of the form control. Submitted with the form as part of a name/value pair.
12615
+ */
12616
+ this.name = '';
12617
+ /**
12618
+ * The value is not editable.
12619
+ */
12620
+ this.readonly = false;
12621
+ /**
12622
+ * A value is required or must be check for the form to be submittable.
12623
+ */
12624
+ this.required = false;
12625
+ /**
12626
+ * Specifies the initial number of lines in the textarea.
12627
+ */
12628
+ this.rows = 3;
12629
+ }
12630
+ componentWillRender() {
12631
+ this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
12632
+ if (!this.label && !this.hasSlottedLabel) {
12633
+ loglevel.error('[A11y] Missing ARIA label on textarea', this);
12634
+ }
12635
+ }
12636
+ componentDidLoad() {
12637
+ d(this.textarea);
12638
+ }
12639
+ /**
12640
+ * Sets focus on the textarea. Use this method instead of `textarea.focus()`.
12641
+ *
12642
+ * @param options An optional object providing options to control aspects of
12643
+ * the focusing process.
12644
+ */
12645
+ async setFocus(options) {
12646
+ this.textarea.focus(options);
12647
+ }
12648
+ render() {
12649
+ return (h(Host, null, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(Optional)"))))), h("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) }), this.hintSection));
12650
+ }
12651
+ get hintSection() {
12652
+ const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
12653
+ return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
12654
+ }
12655
+ onInput(event) {
12656
+ this.value = this.textarea.value;
12657
+ this.catChange.emit(event);
12658
+ }
12659
+ onFocus(event) {
12660
+ this.catFocus.emit(event);
12661
+ }
12662
+ onBlur(event) {
12663
+ this.catBlur.emit(event);
12664
+ }
12665
+ get hostElement() { return getElement(this); }
12666
+ };
12667
+ CatTextarea.style = catTextareaCss;
12668
+
12510
12669
  const catToastDemoCss = ":host{display:block}";
12511
12670
 
12512
12671
  const CatToastDemo = class {
@@ -12518,7 +12677,8 @@ const CatToastDemo = class {
12518
12677
  }
12519
12678
  onClick() {
12520
12679
  const infoOptions = {
12521
- position: 'top-left'
12680
+ position: 'top-left',
12681
+ type: 'info'
12522
12682
  };
12523
12683
  const errorOptions = {
12524
12684
  position: 'top-center',
@@ -12539,6 +12699,16 @@ const CatToastDemo = class {
12539
12699
  type: 'success',
12540
12700
  content: template.content.firstChild
12541
12701
  };
12702
+ const primaryOptions = {
12703
+ position: 'bottom-right',
12704
+ type: 'primary'
12705
+ };
12706
+ const secondaryOptions = {
12707
+ position: 'bottom-right',
12708
+ type: 'secondary'
12709
+ };
12710
+ NotificationsService.secondary('Secondary Click', 'secondary info', secondaryOptions);
12711
+ NotificationsService.primary('primary Click', 'secondary info', primaryOptions);
12542
12712
  NotificationsService.error('Default Click');
12543
12713
  NotificationsService.error('Long default title, long default title, long default title, long default title');
12544
12714
  NotificationsService.info('Info Click', 'Info message', infoOptions);
@@ -12550,7 +12720,7 @@ const CatToastDemo = class {
12550
12720
  };
12551
12721
  CatToastDemo.style = catToastDemoCss;
12552
12722
 
12553
- const catToggleCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:#d7dbe0;transition:background-color 0.13s ease}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 32, 127, 138))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 0.13s linear;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
12723
+ const catToggleCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute;margin:0;width:2rem;height:1.25rem;opacity:0;cursor:inherit}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:#d7dbe0;transition:background-color 0.13s ease;pointer-events:none}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 32, 127, 138))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 0.13s linear;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
12554
12724
 
12555
12725
  let nextUniqueId$1 = 0;
12556
12726
  const CatToggle = class {
@@ -12624,7 +12794,7 @@ CatToggle.style = catToggleCss;
12624
12794
 
12625
12795
  const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
12626
12796
 
12627
- const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;padding:0.75rem;background-color:white;border-radius:0.25rem;color:black;transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;border:1px solid #ebecf0;z-index:200;max-width:16rem}.tooltip-show{opacity:1;visibility:visible}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
12797
+ const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;padding:0.75rem;background-color:black;border-radius:0.25rem;color:white;transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:16rem}.tooltip-show{opacity:1;visibility:visible}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
12628
12798
 
12629
12799
  let nextUniqueId = 0;
12630
12800
  const CatTooltip = class {
@@ -12750,6 +12920,6 @@ const CatTooltip = class {
12750
12920
  CatTooltip.OFFSET = 4;
12751
12921
  CatTooltip.style = catTooltipCss;
12752
12922
 
12753
- export { CatAlert as cat_alert, CatAvatar as cat_avatar, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatIcon as cat_icon, CatInput as cat_input, CatMenu as cat_menu, CatModal as cat_modal, CatRadio as cat_radio, CatRadioGroup as cat_radio_group, CatScrollable as cat_scrollable, CatSelect as cat_select, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatTab as cat_tab, CatTabs as cat_tabs, CatToastDemo as cat_toast_demo, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
12923
+ export { CatAlert as cat_alert, CatAvatar as cat_avatar, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatIcon as cat_icon, CatInput as cat_input, CatMenu as cat_menu, CatModal as cat_modal, CatRadio as cat_radio, CatRadioGroup as cat_radio_group, CatScrollable as cat_scrollable, CatSelect as cat_select, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatTab as cat_tab, CatTabs as cat_tabs, CatTextarea as cat_textarea, CatToastDemo as cat_toast_demo, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
12754
12924
 
12755
- //# sourceMappingURL=cat-alert_21.entry.js.map
12925
+ //# sourceMappingURL=cat-alert_22.entry.js.map