@haiilo/catalyst 0.12.0 → 0.14.1

package/dist/cjs/{cat-alert_21.cjs.entry.js → cat-alert_22.cjs.entry.js}

@@ -2,26 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-936b777e.js');
-const loglevel = require('./loglevel-b5d158ad.js');
-const catFormHint = require('./cat-form-hint-25fdfed5.js');
-const catNotification = require('./cat-notification-c2859ed7.js');
+const index = require('./index-158dcabf.js');
+const catNotification = require('./cat-notification-6a438ad1.js');
 
-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}";
+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}";
 
 const CatAlert = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.mapIcon = new Map([
+      ['primary', 'star-circle-filled'],
+      ['secondary', 'clock-filled'],
+      ['success', 'check-circle-filled'],
+      ['warning', 'danger-filled'],
+      ['danger', 'cross-circle-filled']
+    ]);
     /**
      * The color palette of the alert.
      */
     this.color = 'primary';
+    /**
+     * Whether the icon of the alert is deactivated.
+     */
+    this.noIcon = false;
   }
   render() {
     return (index.h(index.Host, { tabindex: "0", role: this.role }, index.h("div", { part: "alert", class: {
         alert: true,
         [`alert-${this.color}`]: Boolean(this.color)
-      } }, index.h("slot", null))));
+      } }, !this.noIcon && index.h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }), index.h("div", { class: "content" }, index.h("slot", null)))));
   }
   get role() {
     switch (this.color) {
@@ -81,7 +90,7 @@ const CatAvatar = class {
   }
   componentWillRender() {
     if (!this.label) {
-      loglevel.loglevel.warn('[A11y] Missing ARIA label on avatar', this);
+      catNotification.loglevel.warn('[A11y] Missing ARIA label on avatar', this);
     }
   }
   render() {
@@ -270,7 +279,7 @@ function createEmptyStyleRule(query) {
     }
   }
   catch (e) {
-    loglevel.loglevel.error(e);
+    catNotification.loglevel.error(e);
   }
 }
 
@@ -355,7 +364,7 @@ const CatButton = class {
   }
   componentWillRender() {
     if (this.isIconButton && !this.a11yLabel) {
-      loglevel.loglevel.warn('[A11y] Missing ARIA label on icon button', this);
+      catNotification.loglevel.warn('[A11y] Missing ARIA label on icon button', this);
     }
   }
   haltDisabledEvents(event) {
@@ -463,16 +472,31 @@ const CatCard = class {
 };
 CatCard.style = catCardCss;
 
+/**
+ * CatFormHint is a functional component that represents the hint area of form elements.
+ *
+ * @param props - {@link CatFormHintProps}
+ * @return a JSX.Element
+ */
+const CatFormHint = props => {
+  const { hint, slottedHint } = props;
+  return (index.h("div", { class: "hint-section" }, [
+    hint &&
+      (Array.isArray(hint) ? hint.map(item => index.h("p", { class: "input-hint" }, item)) : index.h("p", { class: "input-hint" }, hint)),
+    slottedHint
+  ]));
+};
+
 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))}";
 
-let nextUniqueId$7 = 0;
+let nextUniqueId$8 = 0;
 const CatCheckbox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-checkbox-${nextUniqueId$7++}`;
+    this.id = `cat-checkbox-${nextUniqueId$8++}`;
     this.hasSlottedLabel = false;
     /**
      * Checked state of the checkbox
@@ -511,7 +535,7 @@ const CatCheckbox = class {
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
-      loglevel.loglevel.error('[A11y] Missing ARIA label on checkbox', this);
+      catNotification.loglevel.error('[A11y] Missing ARIA label on checkbox', this);
     }
   }
   /**
@@ -528,7 +552,7 @@ const CatCheckbox = class {
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    return ((this.hint || hasSlottedHint) && (index.h(catFormHint.CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
+    return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
   }
   onInput(event) {
     this.value = this.input.value;
@@ -570,7 +594,7 @@ CatIcon.style = catIconCss;
 
 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}";
 
-let nextUniqueId$6 = 0;
+let nextUniqueId$7 = 0;
 const CatInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -578,7 +602,7 @@ const CatInput = class {
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
     this.i18n = catNotification.CatI18nRegistry.getInstance();
-    this.id = `cat-input-${nextUniqueId$6++}`;
+    this.id = `cat-input-${nextUniqueId$7++}`;
     this.hasSlottedLabel = false;
     /**
      * Whether the input should show a clear button.
@@ -624,7 +648,7 @@ const CatInput = class {
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
-      loglevel.loglevel.error('[A11y] Missing ARIA label on input', this);
+      catNotification.loglevel.error('[A11y] Missing ARIA label on input', this);
     }
   }
   /**
@@ -649,11 +673,11 @@ const CatInput = class {
         'input-disabled': this.disabled
       }, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && index.h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), index.h("div", { class: "input-inner-wrapper" }, index.h("input", { ref: el => (this.input = el), id: this.id, class: {
         'has-clearable': this.clearable && !this.disabled
-      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.max, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.value && (index.h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.t('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && index.h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (index.h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hintSection));
+      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.value && (index.h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.t('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && index.h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (index.h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    return ((this.hint || hasSlottedHint) && (index.h(catFormHint.CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
+    return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
   }
   onInput(event) {
     this.value = this.input.value;
@@ -2904,13 +2928,13 @@ const firstTabbable = (container) => {
 
 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}";
 
-let nextUniqueId$5 = 0;
+let nextUniqueId$6 = 0;
 const CatMenu = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.catOpen = index.createEvent(this, "catOpen", 7);
     this.catClose = index.createEvent(this, "catClose", 7);
-    this.id = nextUniqueId$5++;
+    this.id = nextUniqueId$6++;
     /**
      * The placement of the menu.
      */
@@ -3026,7 +3050,7 @@ const CatModal = class {
         allowOutsideClick: true,
         clickOutsideDeactivates: event => !this.modal || !event.composedPath().includes(this.modal),
         onDeactivate: () => (this.isVisible = false),
-        setReturnFocus: previousActiveElement => previousActiveElement instanceof HTMLElement
+        setReturnFocus: previousActiveElement => previousActiveElement instanceof index.H
           ? firstTabbable(previousActiveElement)
           : previousActiveElement
       });
@@ -3071,14 +3095,14 @@ CatModal.style = catModalCss;
 
 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}";
 
-let nextUniqueId$4 = 0;
+let nextUniqueId$5 = 0;
 const CatRadio = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.catChange = index.createEvent(this, "catChange", 7);
     this.catFocus = index.createEvent(this, "catFocus", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
-    this.id = `cat-radio-${++nextUniqueId$4}`;
+    this.id = `cat-radio-${++nextUniqueId$5}`;
     this.hasSlottedLabel = false;
     /**
      * Whether this radio is checked.
@@ -3108,7 +3132,7 @@ const CatRadio = class {
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
-      loglevel.loglevel.error('[A11y] Missing ARIA label on radio', this);
+      catNotification.loglevel.error('[A11y] Missing ARIA label on radio', this);
     }
   }
   /**
@@ -3125,7 +3149,7 @@ const CatRadio = class {
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    return ((this.hint || hasSlottedHint) && (index.h(catFormHint.CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
+    return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
   }
   onChange(event) {
     this.checked = true;
@@ -4566,7 +4590,7 @@ const CatScrollable = class {
 };
 CatScrollable.style = catScrollableCss;
 
-var choices = loglevel.createCommonjsModule(function (module, exports) {
+var choices = catNotification.createCommonjsModule(function (module, exports) {
 /*! choices.js v10.1.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
 (function webpackUniversalModuleDefinition(root, factory) {
 	module.exports = factory();
@@ -12046,11 +12070,11 @@ __webpack_exports__ = __webpack_exports__["default"];
 });
 });
 
-const Choices = /*@__PURE__*/loglevel.getDefaultExportFromCjs(choices);
+const Choices = /*@__PURE__*/catNotification.getDefaultExportFromCjs(choices);
 
 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}";
 
-let nextUniqueId$3 = 0;
+let nextUniqueId$4 = 0;
 const getOptionTemplate = (data) => {
   var _a;
   if ((_a = data.customProperties) === null || _a === void 0 ? void 0 : _a.imageUrl) {
@@ -12071,7 +12095,7 @@ const CatSelect = class {
     this.catScrolledBottom = index.createEvent(this, "catScrolledBottom", 7);
     this.catBlur = index.createEvent(this, "catBlur", 7);
     this.i18n = catNotification.CatI18nRegistry.getInstance();
-    this.id = `cat-select-${nextUniqueId$3++}`;
+    this.id = `cat-select-${nextUniqueId$4++}`;
     this.resetItemsOnNextValueChange = true;
     this.hasSlottedLabel = false;
     /**
@@ -12150,7 +12174,7 @@ const CatSelect = class {
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
-      loglevel.loglevel.error('[A11y] Missing ARIA label on select', this);
+      catNotification.loglevel.error('[A11y] Missing ARIA label on select', this);
     }
   }
   componentDidLoad() {
@@ -12296,7 +12320,7 @@ const CatSelect = class {
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    return ((this.hint || hasSlottedHint) && (index.h(catFormHint.CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
+    return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
   }
   onChange() {
     var _a;
@@ -12359,8 +12383,7 @@ const CatSelect = class {
   }
   updateRemoveItemButtonVisibility() {
     var _a, _b, _c;
-    const items = Array.from((_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue());
-    if (items.length) {
+    if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) {
       (_b = this.removeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
     }
     else {
@@ -12371,7 +12394,6 @@ const CatSelect = class {
     var _a;
     event.stopPropagation();
     (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
-    this.updateRemoveItemButtonVisibility();
     this.onChange();
   }
   get hostElement() { return index.getElement(this); }
@@ -12452,7 +12474,7 @@ CatSpinner.style = catSpinnerCss;
 
 const catTabCss = ":host{display:block}:host([hidden]){display:none}";
 
-let nextUniqueId$2 = 0;
+let nextUniqueId$3 = 0;
 const CatTab = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -12476,7 +12498,7 @@ const CatTab = class {
   }
   connectedCallback() {
     if (!this.hostElement.id) {
-      this.hostElement.id = `cat-tab-${nextUniqueId$2++}`;
+      this.hostElement.id = `cat-tab-${nextUniqueId$3++}`;
     }
   }
   onClick(event) {
@@ -12494,8 +12516,8 @@ const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1p
 const CatTabs = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.tabs = [];
     this.buttons = [];
+    this.tabs = [];
     /**
      * The ID of the active tab.
      */
@@ -12510,11 +12532,24 @@ const CatTabs = class {
     activeTab === null || activeTab === void 0 ? void 0 : activeTab.click();
   }
   componentWillLoad() {
-    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+    this.syncTabs();
     if (this.tabs.length) {
       this.activeTabId = this.activeTab;
     }
   }
+  componentDidLoad() {
+    var _a;
+    this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs());
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, {
+      childList: true,
+      attributes: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   onKeydown(event) {
     var _a;
     if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
@@ -12544,6 +12579,9 @@ const CatTabs = class {
       this.buttons.push(button);
     }
   }
+  syncTabs() {
+    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+  }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {
     "activeTabId": ["onActiveTabChanged"]
@@ -12551,6 +12589,87 @@ const CatTabs = class {
 };
 CatTabs.style = catTabsCss;
 
+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;
+
+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))}";
+
+let nextUniqueId$2 = 0;
+const CatTextarea = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.catChange = index.createEvent(this, "catChange", 7);
+    this.catFocus = index.createEvent(this, "catFocus", 7);
+    this.catBlur = index.createEvent(this, "catBlur", 7);
+    this.id = `cat-textarea-${nextUniqueId$2++}`;
+    this.hasSlottedLabel = false;
+    /**
+     * Whether the textarea is disabled.
+     */
+    this.disabled = false;
+    /**
+     * The label for the textarea.
+     */
+    this.label = '';
+    /**
+     * Visually hide the label, but still show it to assistive technologies like screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * The name of the form control. Submitted with the form as part of a name/value pair.
+     */
+    this.name = '';
+    /**
+     * The value is not editable.
+     */
+    this.readonly = false;
+    /**
+     * A value is required or must be check for the form to be submittable.
+     */
+    this.required = false;
+    /**
+     * Specifies the initial number of lines in the textarea.
+     */
+    this.rows = 3;
+  }
+  componentWillRender() {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    if (!this.label && !this.hasSlottedLabel) {
+      catNotification.loglevel.error('[A11y] Missing ARIA label on textarea', this);
+    }
+  }
+  componentDidLoad() {
+    d(this.textarea);
+  }
+  /**
+   * Sets focus on the textarea. Use this method instead of `textarea.focus()`.
+   *
+   * @param options An optional object providing options to control aspects of
+   * the focusing process.
+   */
+  async setFocus(options) {
+    this.textarea.focus(options);
+  }
+  render() {
+    return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(Optional)"))))), index.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));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
+  }
+  onInput(event) {
+    this.value = this.textarea.value;
+    this.catChange.emit(event);
+  }
+  onFocus(event) {
+    this.catFocus.emit(event);
+  }
+  onBlur(event) {
+    this.catBlur.emit(event);
+  }
+  get hostElement() { return index.getElement(this); }
+};
+CatTextarea.style = catTextareaCss;
+
 const catToastDemoCss = ":host{display:block}";
 
 const CatToastDemo = class {
@@ -12562,7 +12681,8 @@ const CatToastDemo = class {
   }
   onClick() {
     const infoOptions = {
-      position: 'top-left'
+      position: 'top-left',
+      type: 'info'
     };
     const errorOptions = {
       position: 'top-center',
@@ -12583,6 +12703,16 @@ const CatToastDemo = class {
       type: 'success',
       content: template.content.firstChild
     };
+    const primaryOptions = {
+      position: 'bottom-right',
+      type: 'primary'
+    };
+    const secondaryOptions = {
+      position: 'bottom-right',
+      type: 'secondary'
+    };
+    catNotification.NotificationsService.secondary('Secondary Click', 'secondary info', secondaryOptions);
+    catNotification.NotificationsService.primary('primary Click', 'secondary info', primaryOptions);
     catNotification.NotificationsService.error('Default Click');
     catNotification.NotificationsService.error('Long default title, long default title, long default title, long default title');
     catNotification.NotificationsService.info('Info Click', 'Info message', infoOptions);
@@ -12633,7 +12763,7 @@ const CatToggle = class {
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
-      loglevel.loglevel.error('[A11y] Missing ARIA label on toggle', this);
+      catNotification.loglevel.error('[A11y] Missing ARIA label on toggle', this);
     }
   }
   /**
@@ -12650,7 +12780,7 @@ const CatToggle = class {
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    return ((this.hint || hasSlottedHint) && (index.h(catFormHint.CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
+    return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
   }
   onInput(event) {
     this.value = this.input.value;
@@ -12812,8 +12942,9 @@ exports.cat_skeleton = CatSkeleton;
 exports.cat_spinner = CatSpinner;
 exports.cat_tab = CatTab;
 exports.cat_tabs = CatTabs;
+exports.cat_textarea = CatTextarea;
 exports.cat_toast_demo = CatToastDemo;
 exports.cat_toggle = CatToggle;
 exports.cat_tooltip = CatTooltip;
 
-//# sourceMappingURL=cat-alert_21.cjs.entry.js.map
+//# sourceMappingURL=cat-alert_22.cjs.entry.js.map