@haiilo/catalyst 0.8.6 → 0.10.1

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 (103) 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-6a8a4dc0.js → p-8121572a.js} +3 -3
  6. package/dist/catalyst/p-8121572a.js.map +1 -0
  7. package/dist/catalyst/{p-74fbe829.entry.js → p-b58ac55c.entry.js} +5 -5
  8. package/dist/catalyst/p-b58ac55c.entry.js.map +1 -0
  9. package/dist/catalyst/scss/_variables.scss +1 -0
  10. package/dist/catalyst/scss/core/_typography.scss +7 -7
  11. package/dist/catalyst/scss/index.scss +1 -5
  12. package/dist/cjs/{cat-alert_20.cjs.entry.js → cat-alert_21.cjs.entry.js} +153 -26
  13. package/dist/cjs/cat-alert_21.cjs.entry.js.map +1 -0
  14. package/dist/cjs/{cat-notification-fe237312.js → cat-notification-c2859ed7.js} +121 -1
  15. package/dist/cjs/cat-notification-c2859ed7.js.map +1 -0
  16. package/dist/cjs/catalyst.cjs.js +1 -5
  17. package/dist/cjs/catalyst.cjs.js.map +1 -1
  18. package/dist/cjs/index.cjs.js +3 -4
  19. package/dist/cjs/index.cjs.js.map +1 -1
  20. package/dist/cjs/loader.cjs.js +1 -5
  21. package/dist/cjs/loader.cjs.js.map +1 -1
  22. package/dist/collection/collection-manifest.json +2 -2
  23. package/dist/collection/components/cat-button/cat-button.css +2 -1
  24. package/dist/collection/components/cat-card/cat-card.css +34 -0
  25. package/dist/collection/components/cat-checkbox/cat-checkbox.css +4 -0
  26. package/dist/collection/components/cat-checkbox/cat-checkbox.js +23 -1
  27. package/dist/collection/components/cat-checkbox/cat-checkbox.js.map +1 -1
  28. package/dist/collection/components/cat-i18n/cat-i18n-registry.js +3 -2
  29. package/dist/collection/components/cat-i18n/cat-i18n-registry.js.map +1 -1
  30. package/dist/collection/components/cat-radio/cat-radio.css +7 -0
  31. package/dist/collection/components/cat-radio/cat-radio.js +25 -2
  32. package/dist/collection/components/cat-radio/cat-radio.js.map +1 -1
  33. package/dist/collection/components/cat-radio-group/cat-radio-group.css +12 -0
  34. package/dist/collection/components/cat-radio-group/cat-radio-group.js +179 -0
  35. package/dist/collection/components/cat-radio-group/cat-radio-group.js.map +1 -0
  36. package/dist/collection/components/cat-select/cat-select.js +57 -10
  37. package/dist/collection/components/cat-select/cat-select.js.map +1 -1
  38. package/dist/collection/components/cat-toggle/cat-toggle.css +4 -0
  39. package/dist/collection/components/cat-toggle/cat-toggle.js +25 -3
  40. package/dist/collection/components/cat-toggle/cat-toggle.js.map +1 -1
  41. package/dist/collection/index.js.map +1 -1
  42. package/dist/collection/scss/_variables.scss +1 -0
  43. package/dist/collection/scss/core/_typography.scss +7 -7
  44. package/dist/collection/scss/index.scss +1 -5
  45. package/dist/components/cat-button2.js +1 -1
  46. package/dist/components/cat-button2.js.map +1 -1
  47. package/dist/components/cat-card.js +1 -1
  48. package/dist/components/cat-card.js.map +1 -1
  49. package/dist/components/cat-checkbox.js +7 -2
  50. package/dist/components/cat-checkbox.js.map +1 -1
  51. package/dist/components/cat-i18n-registry.js +3 -2
  52. package/dist/components/cat-i18n-registry.js.map +1 -1
  53. package/dist/components/cat-radio-group.d.ts +11 -0
  54. package/dist/components/cat-radio-group.js +111 -0
  55. package/dist/components/cat-radio-group.js.map +1 -0
  56. package/dist/components/cat-radio.js +9 -3
  57. package/dist/components/cat-radio.js.map +1 -1
  58. package/dist/components/cat-select.js +42 -11
  59. package/dist/components/cat-select.js.map +1 -1
  60. package/dist/components/cat-toggle.js +8 -3
  61. package/dist/components/cat-toggle.js.map +1 -1
  62. package/dist/components/index.d.ts +1 -0
  63. package/dist/components/index.js +1 -253
  64. package/dist/components/index.js.map +1 -1
  65. package/dist/esm/{cat-alert_20.entry.js → cat-alert_21.entry.js} +150 -24
  66. package/dist/esm/cat-alert_21.entry.js.map +1 -0
  67. package/dist/esm/{cat-notification-a9655c00.js → cat-notification-3da6ddb1.js} +121 -3
  68. package/dist/esm/cat-notification-3da6ddb1.js.map +1 -0
  69. package/dist/esm/catalyst.js +1 -5
  70. package/dist/esm/catalyst.js.map +1 -1
  71. package/dist/esm/index.js +1 -2
  72. package/dist/esm/index.js.map +1 -1
  73. package/dist/esm/loader.js +1 -5
  74. package/dist/esm/loader.js.map +1 -1
  75. package/dist/types/components/cat-checkbox/cat-checkbox.d.ts +4 -0
  76. package/dist/types/components/cat-radio/cat-radio.d.ts +4 -0
  77. package/dist/types/components/cat-radio-group/cat-radio-group.d.ts +29 -0
  78. package/dist/types/components/cat-select/cat-select.d.ts +7 -0
  79. package/dist/types/components/cat-toggle/cat-toggle.d.ts +5 -1
  80. package/dist/types/components.d.ts +75 -2
  81. package/dist/types/index.d.ts +1 -0
  82. package/package.json +2 -2
  83. package/dist/catalyst/p-6a8a4dc0.js.map +0 -1
  84. package/dist/catalyst/p-74fbe829.entry.js.map +0 -1
  85. package/dist/catalyst/p-decdc6f1.js +0 -2
  86. package/dist/catalyst/p-decdc6f1.js.map +0 -1
  87. package/dist/catalyst/p-f45bcfd6.js +0 -2
  88. package/dist/catalyst/p-f45bcfd6.js.map +0 -1
  89. package/dist/cjs/app-globals-79765026.js +0 -256
  90. package/dist/cjs/app-globals-79765026.js.map +0 -1
  91. package/dist/cjs/cat-alert_20.cjs.entry.js.map +0 -1
  92. package/dist/cjs/cat-icon-registry-b015a65f.js +0 -125
  93. package/dist/cjs/cat-icon-registry-b015a65f.js.map +0 -1
  94. package/dist/cjs/cat-notification-fe237312.js.map +0 -1
  95. package/dist/collection/init.js +0 -17
  96. package/dist/collection/init.js.map +0 -1
  97. package/dist/esm/app-globals-7d163b94.js +0 -254
  98. package/dist/esm/app-globals-7d163b94.js.map +0 -1
  99. package/dist/esm/cat-alert_20.entry.js.map +0 -1
  100. package/dist/esm/cat-icon-registry-dc1ef79a.js +0 -122
  101. package/dist/esm/cat-icon-registry-dc1ef79a.js.map +0 -1
  102. package/dist/esm/cat-notification-a9655c00.js.map +0 -1
  103. package/dist/types/init.d.ts +0 -1
@@ -1,8 +1,7 @@
1
1
  import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-41ceb7da.js';
2
2
  import { l as loglevel, c as createCommonjsModule, g as getDefaultExportFromCjs } from './loglevel-c8b59c3a.js';
3
3
  import { C as CatFormHint } from './cat-form-hint-790d1e46.js';
4
- import { C as CatIconRegistry, a as CatI18nRegistry } from './cat-icon-registry-dc1ef79a.js';
5
- import { N as NotificationsService } from './cat-notification-a9655c00.js';
4
+ import { a as CatIconRegistry, C as CatI18nRegistry, N as NotificationsService } from './cat-notification-3da6ddb1.js';
6
5
 
7
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}";
8
7
 
@@ -271,7 +270,7 @@ function createEmptyStyleRule(query) {
271
270
  }
272
271
  }
273
272
 
274
- 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:underline}.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:1rem;padding-right:1rem}.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:1rem;padding-right:1rem}.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:1rem;padding-right:1rem}.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:1rem;padding-right:1rem}.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:1rem;padding-right:1rem}.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}";
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:1rem;padding-right:1rem}.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:1rem;padding-right:1rem}.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:1rem;padding-right:1rem}.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:1rem;padding-right:1rem}.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:1rem;padding-right:1rem}.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}";
275
274
 
276
275
  const CatButton = class {
277
276
  constructor(hostRef) {
@@ -448,7 +447,7 @@ const CatButton = class {
448
447
  };
449
448
  CatButton.style = catButtonCss;
450
449
 
451
- const catCardCss = ":host{display:block;margin-bottom:1rem;border-radius:0.5rem;background-color:white;padding:1.5rem}:host([hidden]){display:none}::slotted(nav){margin:-1rem -1.5rem !important}::slotted(:last-child){margin-bottom:0}";
450
+ const catCardCss = ":host{display:block;margin-bottom:1rem;border-radius:0.5rem;background-color:white;padding:1.5rem}:host([hidden]){display:none}::slotted(nav){margin:-1rem -1.5rem !important}::slotted(:last-child){margin-bottom:0}::slotted(.cat-card-pull){margin:-1.5rem !important;width:calc(100% + 3rem) !important;height:calc(100% + 3rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.5rem !important;margin-right:-1.5rem !important;width:calc(100% + 3rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.5rem !important;margin-bottom:-1.5rem !important;height:calc(100% + 3rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.5rem !important}::slotted(.cat-card-pull-l){margin-left:-1.5rem !important}::slotted(.cat-card-pull-r){margin-right:-1.5rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.5rem !important}";
452
451
 
453
452
  const CatCard = class {
454
453
  constructor(hostRef) {
@@ -460,7 +459,7 @@ const CatCard = class {
460
459
  };
461
460
  CatCard.style = catCardCss;
462
461
 
463
- 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}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))}";
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))}";
464
463
 
465
464
  let nextUniqueId$7 = 0;
466
465
  const CatCheckbox = class {
@@ -495,6 +494,10 @@ const CatCheckbox = class {
495
494
  * Required state of the checkbox
496
495
  */
497
496
  this.required = false;
497
+ /**
498
+ * Whether the label should appear to the left of the checkbox.
499
+ */
500
+ this.labelLeft = false;
498
501
  }
499
502
  componentDidLoad() {
500
503
  if (this.input && this.indeterminate) {
@@ -517,7 +520,7 @@ const CatCheckbox = class {
517
520
  this.input.focus(options);
518
521
  }
519
522
  render() {
520
- return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
523
+ return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
521
524
  }
522
525
  get hintSection() {
523
526
  const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -3062,7 +3065,7 @@ const CatModal = class {
3062
3065
  };
3063
3066
  CatModal.style = catModalCss;
3064
3067
 
3065
- 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}.radio{display:flex;position:relative}.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}.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}";
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}.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}";
3066
3069
 
3067
3070
  let nextUniqueId$4 = 0;
3068
3071
  const CatRadio = class {
@@ -3093,6 +3096,10 @@ const CatRadio = class {
3093
3096
  * Whether the radio is required.
3094
3097
  */
3095
3098
  this.required = false;
3099
+ /**
3100
+ * Whether the label should appear to the left of the radio component.
3101
+ */
3102
+ this.labelLeft = false;
3096
3103
  }
3097
3104
  componentWillRender() {
3098
3105
  this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
@@ -3110,13 +3117,14 @@ const CatRadio = class {
3110
3117
  this.input.focus(options);
3111
3118
  }
3112
3119
  render() {
3113
- return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, h("span", { class: "radio" }, h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
3120
+ return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
3114
3121
  }
3115
3122
  get hintSection() {
3116
3123
  const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
3117
3124
  return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
3118
3125
  }
3119
3126
  onChange(event) {
3127
+ this.checked = true;
3120
3128
  this.value = this.input.value;
3121
3129
  this.catChange.emit(event);
3122
3130
  }
@@ -3130,6 +3138,89 @@ const CatRadio = class {
3130
3138
  };
3131
3139
  CatRadio.style = catRadioCss;
3132
3140
 
3141
+ const catRadioGroupCss = ":host{display:block}:host([hidden]){display:none}";
3142
+
3143
+ const CatRadioGroup = class {
3144
+ constructor(hostRef) {
3145
+ registerInstance(this, hostRef);
3146
+ this.catRadioGroup = [];
3147
+ /**
3148
+ * Whether this radio group is disabled.
3149
+ */
3150
+ this.disabled = false;
3151
+ /**
3152
+ * Whether the label of the radios should appear to the left of them.
3153
+ */
3154
+ this.labelLeft = false;
3155
+ }
3156
+ onNameChanged(newName) {
3157
+ this.catRadioGroup.forEach(catRadio => {
3158
+ catRadio.name = newName;
3159
+ });
3160
+ }
3161
+ onDisabledChanged(disabled) {
3162
+ this.catRadioGroup.forEach(catRadio => {
3163
+ if (disabled) {
3164
+ catRadio.disabled = disabled;
3165
+ }
3166
+ });
3167
+ }
3168
+ onLabelLeftChanged(labelLeft) {
3169
+ this.catRadioGroup.forEach(catRadio => {
3170
+ if (labelLeft) {
3171
+ catRadio.labelLeft = labelLeft;
3172
+ }
3173
+ });
3174
+ }
3175
+ componentDidLoad() {
3176
+ this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
3177
+ this.onNameChanged(this.name);
3178
+ this.onDisabledChanged(this.disabled);
3179
+ this.onLabelLeftChanged(this.labelLeft);
3180
+ this.updateTabIndex();
3181
+ }
3182
+ onKeydown(event) {
3183
+ var _a, _b;
3184
+ if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {
3185
+ const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);
3186
+ const activeElement = document.activeElement;
3187
+ const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);
3188
+ const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
3189
+ const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
3190
+ targetElements[targetIdx].setFocus();
3191
+ (_b = (_a = targetElements[targetIdx].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.click();
3192
+ this.updateTabIndex();
3193
+ event.preventDefault();
3194
+ }
3195
+ }
3196
+ onInput(event) {
3197
+ const catRadioElement = this.catRadioGroup.find(value => value === event.target);
3198
+ if (catRadioElement && catRadioElement.checked) {
3199
+ const catRadioElements = this.catRadioGroup.filter(value => value !== catRadioElement);
3200
+ catRadioElements.forEach(value => (value.checked = false));
3201
+ this.updateTabIndex();
3202
+ }
3203
+ }
3204
+ render() {
3205
+ return (h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", null)));
3206
+ }
3207
+ updateTabIndex() {
3208
+ var _a, _b;
3209
+ if (this.catRadioGroup.length) {
3210
+ this.catRadioGroup.forEach(value => { var _a, _b; return (_b = (_a = value.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '-1'); });
3211
+ const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);
3212
+ (_b = (_a = this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
3213
+ }
3214
+ }
3215
+ get hostElement() { return getElement(this); }
3216
+ static get watchers() { return {
3217
+ "name": ["onNameChanged"],
3218
+ "disabled": ["onDisabledChanged"],
3219
+ "labelLeft": ["onLabelLeftChanged"]
3220
+ }; }
3221
+ };
3222
+ CatRadioGroup.style = catRadioGroupCss;
3223
+
3133
3224
  function isFunction(value) {
3134
3225
  return typeof value === 'function';
3135
3226
  }
@@ -11963,6 +12054,7 @@ const CatSelect = class {
11963
12054
  registerInstance(this, hostRef);
11964
12055
  this.catChange = createEvent(this, "catChange", 7);
11965
12056
  this.catSearch = createEvent(this, "catSearch", 7);
12057
+ this.catScrolledBottom = createEvent(this, "catScrolledBottom", 7);
11966
12058
  this.i18n = CatI18nRegistry.getInstance();
11967
12059
  this.id = `cat-select-${nextUniqueId$3++}`;
11968
12060
  this.hasSlottedLabel = false;
@@ -12010,6 +12102,11 @@ const CatSelect = class {
12010
12102
  return;
12011
12103
  this.setChoices(choices, 'value', 'label', true);
12012
12104
  }
12105
+ setValueHandler(value) {
12106
+ if (this.multiple)
12107
+ return;
12108
+ this.setValue(value || []);
12109
+ }
12013
12110
  componentWillRender() {
12014
12111
  this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
12015
12112
  if (!this.label && !this.hasSlottedLabel) {
@@ -12017,29 +12114,36 @@ const CatSelect = class {
12017
12114
  }
12018
12115
  }
12019
12116
  componentDidLoad() {
12020
- var _a, _b, _c, _d, _e, _f, _g, _h;
12117
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
12021
12118
  this.init();
12022
- this.choiceInner = ((_c = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a).shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.choices__inner')) || undefined;
12023
- (_d = this.choiceInner) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.showDropdownHandler.bind(this));
12024
- (_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.addEventListener('addItem', this.onChange.bind(this));
12025
- (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('removeItem', this.onChange.bind(this));
12026
- (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('search', this.onSearch.bind(this));
12119
+ const attachedInternals = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a);
12120
+ if (attachedInternals) {
12121
+ this.choiceInner = ((_c = attachedInternals.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.choices__inner')) || undefined;
12122
+ this.choiceDropdown =
12123
+ ((_e = (_d = attachedInternals.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.choices__list--dropdown')) === null || _e === void 0 ? void 0 : _e.firstElementChild) || undefined;
12124
+ }
12125
+ (_f = this.choiceInner) === null || _f === void 0 ? void 0 : _f.addEventListener('click', this.showDropdownHandler.bind(this));
12126
+ (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('addItem', this.onChange.bind(this));
12127
+ (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('removeItem', this.onChange.bind(this));
12128
+ (_j = this.selectElement) === null || _j === void 0 ? void 0 : _j.addEventListener('search', this.onSearch.bind(this));
12129
+ (_k = this.choiceDropdown) === null || _k === void 0 ? void 0 : _k.addEventListener('scroll', this.onScrolledBottom.bind(this));
12027
12130
  if (this.multiple) {
12028
- (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('choice', this.onChoice.bind(this));
12131
+ (_l = this.selectElement) === null || _l === void 0 ? void 0 : _l.addEventListener('choice', this.onChoice.bind(this));
12029
12132
  this.createRemoveItemButton();
12030
12133
  }
12031
12134
  }
12032
12135
  disconnectedCallback() {
12033
- var _a, _b, _c, _d, _e, _f, _g;
12136
+ var _a, _b, _c, _d, _e, _f, _g, _h;
12034
12137
  (_a = this.choice) === null || _a === void 0 ? void 0 : _a.destroy();
12035
12138
  this.choice = undefined;
12036
12139
  (_b = this.choiceInner) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.showDropdownHandler.bind(this));
12037
12140
  (_c = this.selectElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('addItem', this.onChange.bind(this));
12038
12141
  (_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('removeItem', this.onChange.bind(this));
12039
12142
  (_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('search', this.onSearch.bind(this));
12143
+ (_f = this.choiceDropdown) === null || _f === void 0 ? void 0 : _f.removeEventListener('scroll', this.onScrolledBottom.bind(this));
12040
12144
  if (this.multiple) {
12041
- (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('choice', this.onChoice.bind(this));
12042
- (_g = this.removeElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));
12145
+ (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('choice', this.onChoice.bind(this));
12146
+ (_h = this.removeElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));
12043
12147
  }
12044
12148
  }
12045
12149
  /**
@@ -12083,6 +12187,7 @@ const CatSelect = class {
12083
12187
  }
12084
12188
  init() {
12085
12189
  const value = this.value || [];
12190
+ const removeItemText = (value) => this.i18n.t('select.removeItem', { value });
12086
12191
  const config = {
12087
12192
  allowHTML: true,
12088
12193
  items: Array.isArray(value) ? value : [value],
@@ -12118,6 +12223,10 @@ const CatSelect = class {
12118
12223
  return strToEl(`
12119
12224
  <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable} ${data.placeholder ? classNames.placeholder : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
12120
12225
  <span>${template}</span> ${data.label}
12226
+ <button type="button"
12227
+ class="${classNames.button}"
12228
+ aria-label="${removeItemText(data.label)}"
12229
+ data-button>${removeItemText(data.label)}</button>
12121
12230
  </div>
12122
12231
  `);
12123
12232
  }
@@ -12142,6 +12251,10 @@ const CatSelect = class {
12142
12251
  ${data.disabled ? 'aria-disabled="true"' : ''}>
12143
12252
  ${template}
12144
12253
  ${data.label}
12254
+ <button type="button"
12255
+ class="${classNames.button}"
12256
+ aria-label="${removeItemText(data.label)}"
12257
+ data-button>${removeItemText(data.label)}</button>
12145
12258
  </div>`);
12146
12259
  },
12147
12260
  choice: function ({ classNames }, data) {
@@ -12181,6 +12294,14 @@ const CatSelect = class {
12181
12294
  const customEvent = event;
12182
12295
  this.catSearch.emit(customEvent.detail.value);
12183
12296
  }
12297
+ onScrolledBottom() {
12298
+ var _a, _b, _c;
12299
+ const scrolledBottom = ((_a = this.choiceDropdown) === null || _a === void 0 ? void 0 : _a.scrollHeight) ===
12300
+ (((_b = this.choiceDropdown) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0) + (((_c = this.choiceDropdown) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0);
12301
+ if (scrolledBottom) {
12302
+ this.catScrolledBottom.emit();
12303
+ }
12304
+ }
12184
12305
  onChoice(event) {
12185
12306
  var _a, _b;
12186
12307
  const customEvent = event;
@@ -12223,7 +12344,8 @@ const CatSelect = class {
12223
12344
  }
12224
12345
  get hostElement() { return getElement(this); }
12225
12346
  static get watchers() { return {
12226
- "choices": ["setChoicesHandler"]
12347
+ "choices": ["setChoicesHandler"],
12348
+ "value": ["setValueHandler"]
12227
12349
  }; }
12228
12350
  };
12229
12351
  CatSelect.style = catSelectCss;
@@ -12440,7 +12562,7 @@ const CatToastDemo = class {
12440
12562
  };
12441
12563
  CatToastDemo.style = catToastDemoCss;
12442
12564
 
12443
- 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}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))}";
12565
+ 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))}";
12444
12566
 
12445
12567
  let nextUniqueId$1 = 0;
12446
12568
  const CatToggle = class {
@@ -12468,9 +12590,13 @@ const CatToggle = class {
12468
12590
  */
12469
12591
  this.labelHidden = false;
12470
12592
  /**
12471
- * Required state of the toggle
12593
+ * Required state of the toggle.
12472
12594
  */
12473
12595
  this.required = false;
12596
+ /**
12597
+ * Whether the label should appear to the left of the toggle.
12598
+ */
12599
+ this.labelLeft = false;
12474
12600
  }
12475
12601
  componentWillRender() {
12476
12602
  this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
@@ -12488,7 +12614,7 @@ const CatToggle = class {
12488
12614
  this.input.focus(options);
12489
12615
  }
12490
12616
  render() {
12491
- return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
12617
+ return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
12492
12618
  }
12493
12619
  get hintSection() {
12494
12620
  const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -12636,6 +12762,6 @@ const CatTooltip = class {
12636
12762
  CatTooltip.OFFSET = 4;
12637
12763
  CatTooltip.style = catTooltipCss;
12638
12764
 
12639
- 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, 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 };
12765
+ 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 };
12640
12766
 
12641
- //# sourceMappingURL=cat-alert_20.entry.js.map
12767
+ //# sourceMappingURL=cat-alert_21.entry.js.map