@haiilo/catalyst 1.0.2 → 1.1.1

package/dist/cjs/cat-alert_23.cjs.entry.js

@@ -5,7 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8ab22379.js');
 const catNotification = require('./cat-notification-bcb9fb86.js');
 
-const catAlertCss = ":host{display:block;border-radius:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.alert{font:inherit;display:flex;gap:0.5rem;padding:1.25rem;border-radius:0.5rem}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}.alert-primary{background-color:rgba(var(--cat-primary-bg, 32, 127, 138), 0.1)}.alert-primary cat-icon{color:#207f8a}.alert-secondary{background-color:rgba(105, 118, 135, 0.1)}.alert-secondary cat-icon{color:#697687}.alert-success{background-color:rgba(0, 132, 88, 0.1)}.alert-success cat-icon{color:#008458}.alert-warning{background-color:rgba(255, 206, 128, 0.1)}.alert-warning cat-icon{color:#ebb663}.alert-danger{background-color:rgba(217, 52, 13, 0.1)}.alert-danger cat-icon{color:#d9340d}";
+function setAttributeDefault(host, attr, value) {
+  if (!host.hostElement.hasAttribute(attr) && value != null) {
+    host.hostElement.setAttribute(attr, String(value));
+  }
+}
+function setPropertyDefault(host, prop) {
+  setAttributeDefault(host, String(prop), host[prop]);
+}
+
+const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgba(var(--cat-primary-bg, 32, 127, 138), 0.1)}:host([color=primary]) cat-icon{color:#207f8a}:host([color=secondary]){background-color:rgba(105, 118, 135, 0.1)}:host([color=secondary]) cat-icon{color:#697687}:host([color=success]){background-color:rgba(0, 132, 88, 0.1)}:host([color=success]) cat-icon{color:#008458}:host([color=warning]){background-color:rgba(255, 206, 128, 0.1)}:host([color=warning]) cat-icon{color:#ebb663}:host([color=danger]){background-color:rgba(217, 52, 13, 0.1)}:host([color=danger]) cat-icon{color:#d9340d}";
 
 const CatAlert = class {
   constructor(hostRef) {
@@ -17,6 +26,13 @@ const CatAlert = class {
       ['warning', 'danger-filled'],
       ['danger', 'cross-circle-filled']
     ]);
+    this.mapRole = new Map([
+      ['primary', 'status'],
+      ['secondary', 'status'],
+      ['success', 'status'],
+      ['warning', 'alert'],
+      ['danger', 'alert']
+    ]);
     /**
      * The color palette of the alert.
      */
@@ -26,21 +42,15 @@ const CatAlert = class {
      */
     this.noIcon = false;
   }
+  connectedCallback() {
+    setAttributeDefault(this, 'tabindex', 0);
+    setAttributeDefault(this, 'role', this.mapRole.get(this.color));
+    setPropertyDefault(this, 'color');
+  }
   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)
-      } }, !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) {
-      case 'danger':
-      case 'warning':
-        return 'alert';
-      default:
-        return 'status';
-    }
+    return (index.h(index.Host, 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 hostElement() { return index.getElement(this); }
 };
 CatAlert.style = catAlertCss;
 
@@ -59,7 +69,7 @@ const loadImg = (src) => {
   });
 };
 
-const catAvatarCss = ":host{display:inline-block;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.avatar{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;text-decoration:inherit;color:var(--cat-avatar-fill, white);background-color:var(--cat-avatar-bg, #697687);background-size:cover;background-position:center;white-space:nowrap;overflow:hidden}.avatar:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.avatar-round{border-radius:50%}.avatar-xs{width:var(--cat-avatar-size, 1.5rem);height:var(--cat-avatar-size, 1.5rem);line-height:var(--cat-avatar-size, 1.5rem);font-size:var(--cat-avatar-font-size, 0.75rem)}.avatar-s{width:var(--cat-avatar-size, 2rem);height:var(--cat-avatar-size, 2rem);line-height:var(--cat-avatar-size, 2rem);font-size:var(--cat-avatar-font-size, 0.875rem)}.avatar-m{width:var(--cat-avatar-size, 2.5rem);height:var(--cat-avatar-size, 2.5rem);line-height:var(--cat-avatar-size, 2.5rem);font-size:var(--cat-avatar-font-size, 0.9375rem)}.avatar-l{width:var(--cat-avatar-size, 3rem);height:var(--cat-avatar-size, 3rem);line-height:var(--cat-avatar-size, 3rem);font-size:var(--cat-avatar-font-size, 1.125rem)}.avatar-xl{width:var(--cat-avatar-size, 3.5rem);height:var(--cat-avatar-size, 3.5rem);line-height:var(--cat-avatar-size, 3.5rem);font-size:var(--cat-avatar-font-size, 1.25rem)}";
+const catAvatarCss = ":host{display:contents}:host([hidden]){display:none}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:0.25rem;text-decoration:inherit;color:var(--cat-avatar-fill, white);background-color:var(--cat-avatar-bg, #697687);background-size:cover;background-position:center;white-space:nowrap;overflow:hidden;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.avatar:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.avatar-round{border-radius:50%}.avatar-xs{width:var(--cat-avatar-size, 1.5rem);height:var(--cat-avatar-size, 1.5rem);line-height:var(--cat-avatar-size, 1.5rem);font-size:var(--cat-avatar-font-size, 0.75rem)}.avatar-s{width:var(--cat-avatar-size, 2rem);height:var(--cat-avatar-size, 2rem);line-height:var(--cat-avatar-size, 2rem);font-size:var(--cat-avatar-font-size, 0.875rem)}.avatar-m{width:var(--cat-avatar-size, 2.5rem);height:var(--cat-avatar-size, 2.5rem);line-height:var(--cat-avatar-size, 2.5rem);font-size:var(--cat-avatar-font-size, 0.9375rem)}.avatar-l{width:var(--cat-avatar-size, 3rem);height:var(--cat-avatar-size, 3rem);line-height:var(--cat-avatar-size, 3rem);font-size:var(--cat-avatar-font-size, 1.125rem)}.avatar-xl{width:var(--cat-avatar-size, 3.5rem);height:var(--cat-avatar-size, 3.5rem);line-height:var(--cat-avatar-size, 3.5rem);font-size:var(--cat-avatar-font-size, 1.25rem)}";
 
 const CatAvatar = class {
   constructor(hostRef) {
@@ -129,7 +139,7 @@ const CatAvatar = class {
 };
 CatAvatar.style = catAvatarCss;
 
-const catBadgeCss = ":host{display:inline-block;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;box-sizing:border-box;width:100%;line-height:1}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-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);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}.badge-s{height:1.5rem;min-width:1.5rem;font-size:0.75rem;padding:0 0.5rem}.badge-m{height:2rem;min-width:2rem;font-size:0.875rem;padding:0 0.75rem}.badge-l{height:2.5rem;min-width:2.5rem;font-size:0.9375rem;padding:0 1rem}.badge-xl{height:3rem;min-width:3rem;font-size:1.125rem;padding:0 1rem}.badge-pulse.badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.badge-pulse.badge-outlined{animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
+const catBadgeCss = ":host([hidden]){display:none}:host{display:inline-flex;max-width:100%;vertical-align:baseline;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;line-height:1}:host slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}:host([round]){border-radius:10rem}:host([variant=filled]){background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}:host([variant=outlined]){background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}:host([color=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);--border:var(--cat-primary-text, 32, 127, 138)}:host([color=secondary]){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}:host([color=success]){--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}:host([color=warning]){--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}:host([color=danger]){--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}:host([size=xs]){height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}:host([size=s]){height:1.5rem;min-width:1.5rem;font-size:0.75rem;padding:0 0.5rem}:host([size=m]){height:2rem;min-width:2rem;font-size:0.875rem;padding:0 0.75rem}:host([size=l]){height:2.5rem;min-width:2.5rem;font-size:0.9375rem;padding:0 1rem}:host([size=xl]){height:3rem;min-width:3rem;font-size:1.125rem;padding:0 1rem}:host([pulse][variant=filled]){animation:1.5s ease 0s infinite normal none running pulse}:host([pulse][variant=outlined]){animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
 
 const CatBadge = class {
   constructor(hostRef) {
@@ -155,16 +165,15 @@ const CatBadge = class {
      */
     this.pulse = false;
   }
+  connectedCallback() {
+    setPropertyDefault(this, 'variant');
+    setPropertyDefault(this, 'color');
+    setPropertyDefault(this, 'size');
+  }
   render() {
-    return (index.h("span", { part: "badge", class: {
-        badge: true,
-        'badge-round': this.round,
-        'badge-pulse': this.pulse,
-        [`badge-${this.variant}`]: Boolean(this.variant),
-        [`badge-${this.color}`]: Boolean(this.color),
-        [`badge-${this.size}`]: Boolean(this.size)
-      } }, index.h("slot", null)));
+    return index.h("slot", null);
   }
+  get hostElement() { return index.getElement(this); }
 };
 CatBadge.style = catBadgeCss;
 
@@ -467,7 +476,7 @@ const CatCard = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
+    return index.h("slot", null);
   }
 };
 CatCard.style = catCardCss;
@@ -487,7 +496,7 @@ const CatFormHint = props => {
   ]));
 };
 
-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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}: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}:host(.cat-error) .box{border:1px solid #d9340d}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:#d9340d;border-color:#d9340d;stroke:white}.label{flex:1 1 auto;min-width:0}.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))}";
+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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}: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:50%;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}:host(.cat-error) .box{border:1px solid #d9340d}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:#d9340d;border-color:#d9340d;stroke:white}.label{flex:1 1 auto;min-width:0}.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$8 = 0;
 const CatCheckbox = class {
@@ -5223,7 +5232,7 @@ var autosizeInput = function (element, options) {
   }
 };
 
-const catSelectCss = ".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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}:host{display:flex;flex-direction:column;gap:0.5rem;position:relative;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))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear;padding:0.25rem}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px #d9340d}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d9340d}.select-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#ebecf0;border-radius:0.125rem;white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem;z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem;--cat-avatar-size:1.25rem}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(105, 118, 135, 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
+const catSelectCss = ".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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}:host{display:flex;flex-direction:column;gap:0.5rem;position:relative;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))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear;padding:0.25rem}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px #d9340d}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d9340d}.select-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:0.125rem;white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis;flex:1 1 0%}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem;z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem;--cat-avatar-size:1.25rem}.select-option-text{flex:1 1 0%}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(105, 118, 135, 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
 
 const INIT_STATE = {
   term: '',
@@ -5285,6 +5294,10 @@ const CatSelect = class {
      * Whether the select should show a clear button.
      */
     this.clearable = false;
+    /**
+     * Whether the select should add new items.
+     */
+    this.tags = false;
   }
   onConnectorChange(connector) {
     this.reset(connector);
@@ -5304,11 +5317,25 @@ const CatSelect = class {
         this.hide();
       }
       const idsSelected = this.state.selection.map(item => item.item.id);
-      if (this.multiple) {
-        this.value = idsSelected;
+      if (!this.tags) {
+        if (this.multiple) {
+          this.value = idsSelected;
+        }
+        else {
+          this.value = idsSelected.length ? idsSelected[0] : '';
+        }
       }
       else {
-        this.value = idsSelected.length ? idsSelected[0] : '';
+        const ids = idsSelected.filter(id => !id.startsWith(`select-${this.id}-tag`));
+        const tags = this.state.selection
+          .filter(item => item.item.id.startsWith(`select-${this.id}-tag`))
+          .map(item => item.render.label);
+        if (this.multiple) {
+          this.value = { ids, tags };
+        }
+        else {
+          this.value = { id: ids.length ? ids[0] : '', tag: tags.length ? tags[0] : '' };
+        }
       }
       this.catChange.emit();
     }
@@ -5329,7 +5356,12 @@ const CatSelect = class {
   }
   onBlur(event) {
     if (!this.multiple && this.state.activeOptionIndex >= 0) {
-      this.select(this.state.options[this.state.activeOptionIndex]);
+      if (this.tags && this.state.options[this.state.activeOptionIndex].item.id === `select-${this.id}-option-tag`) {
+        this.createTag(this.state.term);
+      }
+      else {
+        this.select(this.state.options[this.state.activeOptionIndex]);
+      }
     }
     this.hide();
     this.patchState({ activeSelectionIndex: -1 });
@@ -5341,8 +5373,19 @@ const CatSelect = class {
     if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       this.onArrowKeyDown(event);
     }
-    else if (['Enter', ' '].includes(event.key)) {
-      if (isInputFocused && this.state.activeOptionIndex >= 0) {
+    else if (['Enter', ' '].includes(event.key) && isInputFocused) {
+      if (this.tags &&
+        this.state.activeOptionIndex === 0 &&
+        this.state.options[0].item.id === `select-${this.id}-option-tag`) {
+        event.preventDefault();
+        if (this.multiple) {
+          this.toggleTag(this.state.options[0]);
+        }
+        else {
+          this.createTag(this.state.options[0].render.label);
+        }
+      }
+      else if (this.state.activeOptionIndex >= 0) {
         event.preventDefault();
         if (this.multiple) {
           this.toggle(this.state.options[this.state.activeOptionIndex]);
@@ -5351,6 +5394,9 @@ const CatSelect = class {
           this.select(this.state.options[this.state.activeOptionIndex]);
         }
       }
+      else if (this.tags && event.key === 'Enter' && this.state.activeOptionIndex < 0) {
+        this.createTag(this.state.term);
+      }
     }
     else if (event.key === 'Escape') {
       this.hide();
@@ -5374,7 +5420,12 @@ const CatSelect = class {
         this.patchState({ activeSelectionIndex: -1, activeOptionIndex: -1 });
       }
       else if (this.state.activeOptionIndex >= 0) {
-        this.select(this.state.options[this.state.activeOptionIndex]);
+        if (this.tags && this.state.options[this.state.activeOptionIndex].item.id === `select-${this.id}-option-tag`) {
+          this.createTag(this.state.term);
+        }
+        else {
+          this.select(this.state.options[this.state.activeOptionIndex]);
+        }
       }
     }
     else if (event.key.length === 1) {
@@ -5412,12 +5463,28 @@ const CatSelect = class {
     this.subscription = this.term$
       .asObservable()
       .pipe(debounce(term => (term ? timer(this.debounce) : of(0))), distinctUntilChanged(), tap(() => (number$ = this.more$.pipe(filter(() => !this.state.isLoading), scan(n => n + 1, 0), startWith(0)))), tap(() => this.patchState({ options: [] })), switchMap(term => number$.pipe(tap(() => this.patchState({ isLoading: true })), switchMap(number => this.connectorSafe.retrieve(term, number)), tap(page => this.patchState({ isLoading: false, totalElements: page.totalElements })), takeWhile(page => !page.last, true), scan((items, page) => [...items, ...page.content], []))))
-      .subscribe(items => this.patchState({
-      options: items === null || items === void 0 ? void 0 : items.map(item => ({
-        item,
+      .subscribe(items => {
+      var _a;
+      const options = items === null || items === void 0 ? void 0 : items.map(item => ({
+        item: Object.assign(Object.assign({}, item), { id: this.connectorSafe.customId ? this.connectorSafe.customId(item) : item.id }),
         render: this.connectorSafe.render(item)
-      }))
-    }));
+      }));
+      if (this.tags &&
+        this.state.term.trim().length &&
+        !options.find(value1 => value1.render.label.toLowerCase() === this.state.term.toLowerCase())) {
+        let label;
+        if (this.isAlreadyCreated(this.state.term)) {
+          label = (_a = this.state.selection.find(item => item.render.label.toLowerCase() === this.state.term.toLowerCase())) === null || _a === void 0 ? void 0 : _a.render.label;
+        }
+        options.unshift({
+          item: { id: `select-${this.id}-option-tag` },
+          render: { label: label ? label : this.state.term }
+        });
+      }
+      this.patchState({
+        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" }, "(", this.i18n.t('input.optional'), ")"))))), index.h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
@@ -5427,16 +5494,35 @@ const CatSelect = class {
       }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "16-cross", iconOnly: true, a11yLabel: this.i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1 }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, initials: '' })) : null, index.h("input", { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, onInput: () => this.onInput(), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && index.h("cat-spinner", null), (this.state.selection.length || this.state.term.length) &&
       !this.disabled &&
       !this.state.isResolving &&
-      this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: this.i18n.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (index.h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? this.i18n.t('select.close') : this.i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), this.hintSection, index.h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.state.options.map((item, i) => (index.h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": this.isSelected(item.item.id) ? 'true' : 'false' }, this.multiple ? (index.h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: this.isSelected(item.item.id), tabIndex: -1, labelLeft: true, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onCatChange: e => {
-        this.toggle(item);
-        e.stopPropagation();
-      } }, index.h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: '' })) : null, index.h("span", { class: "select-option-text" }, index.h("span", { class: "select-option-label" }, item.render.label), index.h("span", { class: "select-option-description" }, item.render.description))))) : (index.h("div", { class: {
-        'select-option-inner': true,
-        'select-option-single': true,
-        'select-option-active': this.state.activeOptionIndex === i
-      }, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onClick: () => this.select(item), tabIndex: -1 }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: '' })) : null, index.h("span", { class: "select-option-text" }, index.h("span", { class: "select-option-label" }, item.render.label), index.h("span", { class: "select-option-description" }, item.render.description))))))), this.state.isLoading
+      this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: this.i18n.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (index.h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? this.i18n.t('select.close') : this.i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), this.hintSection, index.h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isLoading
       ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (index.h("li", { class: "select-option-loading" }, index.h("cat-skeleton", { variant: "body", lines: 1 }), index.h("cat-skeleton", { variant: "body", lines: 1 }))))
-      : !this.state.options.length && index.h("li", { class: "select-option-empty" }, this.i18n.t('select.empty'))))))));
+      : !this.state.options.length &&
+        !this.tags && index.h("li", { class: "select-option-empty" }, this.i18n.t('select.empty'))))))));
+  }
+  get optionsList() {
+    return this.state.options.map((item, i) => {
+      const isTagOption = this.tags && item.item.id === `select-${this.id}-option-tag`;
+      const getAriaSelected = () => {
+        if (isTagOption) {
+          return this.isAlreadyCreated(item.render.label) ? 'true' : 'false';
+        }
+        return this.isSelected(item.item.id) ? 'true' : 'false';
+      };
+      const getLabel = () => {
+        if (isTagOption) {
+          return item.render.label + this.tagTextHelp;
+        }
+        return item.render.label;
+      };
+      return (index.h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": getAriaSelected() }, this.multiple ? (index.h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: !isTagOption ? this.isSelected(item.item.id) : this.isAlreadyCreated(item.render.label), tabIndex: -1, labelLeft: true, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onCatChange: e => {
+          !isTagOption ? this.toggle(item) : this.toggleTag(item);
+          e.stopPropagation();
+        } }, index.h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: '' })) : null, index.h("span", { class: "select-option-text" }, index.h("span", { class: "select-option-label" }, getLabel()), index.h("span", { class: "select-option-description" }, item.render.description))))) : (index.h("div", { class: {
+          'select-option-inner': true,
+          'select-option-single': true,
+          'select-option-active': this.state.activeOptionIndex === i
+        }, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onClick: () => (isTagOption ? this.createTag(item.render.label) : this.select(item)), tabIndex: -1 }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: '' })) : null, index.h("span", { class: "select-option-text" }, index.h("span", { class: "select-option-label" }, getLabel()), index.h("span", { class: "select-option-description" }, item.render.description))))));
+    });
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -5449,21 +5535,27 @@ const CatSelect = class {
     throw new Error('CatSelectConnector not set');
   }
   resolve() {
-    var _a;
     this.patchState({ isResolving: true });
-    let ids;
-    if (this.multiple) {
-      ids = this.value;
-    }
-    else {
-      ids = [this.value];
-    }
-    const data$ = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.connectorSafe.resolve(ids).pipe(first()) : of([]);
-    data$.pipe(catchError(() => of([]))).subscribe(items => this.patchState({
-      isResolving: false,
-      selection: items === null || items === void 0 ? void 0 : items.map(item => ({ item, render: this.connectorSafe.render(item) })),
-      term: !this.multiple && items.length ? this.connectorSafe.render(items[0]).label : ''
-    }));
+    const ids = this.initIds();
+    let tags;
+    if (this.tags) {
+      tags = this.initTags();
+    }
+    const data$ = ids.length ? this.connectorSafe.resolve(ids).pipe(first()) : of([]);
+    data$.pipe(catchError(() => of([]))).subscribe(items => {
+      const selection = items.length ? items === null || items === void 0 ? void 0 : items.map(item => ({ item, render: this.connectorSafe.render(item) })) : [];
+      if (this.tags) {
+        tags === null || tags === void 0 ? void 0 : tags.forEach((tag, index) => {
+          const item = { id: `select-${this.id}-tag-${index}`, name: tag };
+          selection.push({ item, render: { label: item.name } });
+        });
+      }
+      this.patchState({
+        isResolving: false,
+        selection,
+        term: !this.multiple && selection.length ? selection[0].render.label : ''
+      });
+    });
   }
   show() {
     var _a;
@@ -5488,7 +5580,6 @@ const CatSelect = class {
     return this.state.selection.findIndex(s => s.item.id === id) >= 0;
   }
   select(item) {
-    var _a;
     if (!this.isSelected(item.item.id)) {
       let newSelection;
       if (this.multiple) {
@@ -5499,11 +5590,13 @@ const CatSelect = class {
         this.search(item.render.label);
       }
       this.patchState({ selection: newSelection });
+      if (this.multiple && this.state.term.trim() && this.input) {
+        this.patchState({ term: '', activeOptionIndex: -1 });
+        this.term$.next('');
+        this.input.value = '';
+      }
     }
-    if (!this.multiple) {
-      this.hide();
-      (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.add('select-input-transparent-caret');
-    }
+    this.setTransparentCaret();
   }
   deselect(id) {
     if (this.isSelected(id)) {
@@ -5550,7 +5643,12 @@ const CatSelect = class {
   }
   onInput() {
     var _a;
-    this.search(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || '');
+    this.search(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value.trim()) || '');
+    if (!this.multiple && this.state.selection.length) {
+      const selectionClone = [...this.state.selection];
+      selectionClone.pop();
+      this.patchState({ selection: selectionClone });
+    }
     this.show();
   }
   update() {
@@ -5588,52 +5686,122 @@ const CatSelect = class {
     var _a, _b;
     let preventDefault = false;
     (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
-    if (event.key === 'ArrowDown') {
-      preventDefault = true;
-      this.state.isOpen
-        ? this.patchState({
-          activeOptionIndex: Math.min(this.state.activeOptionIndex + 1, this.state.options.length - 1),
-          activeSelectionIndex: -1
-        })
-        : this.show();
-    }
-    else if (event.key === 'ArrowUp') {
-      preventDefault = true;
-      this.state.activeOptionIndex >= 0
-        ? this.patchState({
-          activeOptionIndex: Math.max(this.state.activeOptionIndex - 1, -1),
-          activeSelectionIndex: -1
-        })
-        : this.hide();
-    }
-    else if (event.key === 'ArrowLeft') {
-      if (((_b = this.input) === null || _b === void 0 ? void 0 : _b.selectionStart) === 0) {
+    switch (event.key) {
+      case 'ArrowDown':
         preventDefault = true;
-        let index;
-        this.state.activeSelectionIndex > 0
-          ? (index = Math.max(this.state.activeSelectionIndex - 1, -1))
-          : (index = this.state.selection.length - 1);
-        this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
-      }
-    }
-    else if (event.key === 'ArrowRight') {
-      if (this.state.activeSelectionIndex >= 0) {
+        this.state.isOpen
+          ? this.patchState({
+            activeOptionIndex: Math.min(this.state.activeOptionIndex + 1, this.state.options.length - 1),
+            activeSelectionIndex: -1
+          })
+          : this.show();
+        break;
+      case 'ArrowUp':
         preventDefault = true;
-        let index = -1;
-        if (this.state.activeSelectionIndex < this.state.selection.length - 1) {
-          index = Math.min(this.state.activeSelectionIndex + 1, this.state.selection.length - 1);
+        this.state.activeOptionIndex >= 0
+          ? this.patchState({
+            activeOptionIndex: Math.max(this.state.activeOptionIndex - 1, -1),
+            activeSelectionIndex: -1
+          })
+          : this.hide();
+        break;
+      case 'ArrowLeft':
+        if (((_b = this.input) === null || _b === void 0 ? void 0 : _b.selectionStart) === 0) {
+          preventDefault = true;
+          let index;
+          this.state.activeSelectionIndex > 0
+            ? (index = Math.max(this.state.activeSelectionIndex - 1, -1))
+            : (index = this.state.selection.length - 1);
+          this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
         }
-        else if (!this.state.term) {
-          index = 0;
+        break;
+      case 'ArrowRight':
+        if (this.state.activeSelectionIndex >= 0) {
+          preventDefault = true;
+          let index = -1;
+          if (this.state.activeSelectionIndex < this.state.selection.length - 1) {
+            index = Math.min(this.state.activeSelectionIndex + 1, this.state.selection.length - 1);
+          }
+          else if (!this.state.term) {
+            index = 0;
+          }
+          this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
         }
-        this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
-      }
     }
     if (preventDefault) {
       event.preventDefault();
       event.stopPropagation();
     }
   }
+  get tagTextHelp() {
+    return this.tagHint && !this.isAlreadyCreated(this.state.term) ? ' (' + this.tagHint + ')' : '';
+  }
+  isAlreadyCreated(term) {
+    return this.state.selection.findIndex(item => item.render.label.toLowerCase() === term.toLowerCase()) >= 0;
+  }
+  createTag(term) {
+    if (term.trim().length && !this.isAlreadyCreated(term)) {
+      const value = this.value;
+      const tags = value === null || value === void 0 ? void 0 : value.tags;
+      const tag = { id: `select-${this.id}-tag-${tags ? tags.length : 0}`, name: term };
+      this.select({ item: tag, render: { label: tag.name } });
+    }
+    this.setTransparentCaret();
+  }
+  initIds() {
+    let ids = [];
+    if (this.value) {
+      if (!this.tags) {
+        if (this.multiple) {
+          ids = this.value;
+        }
+        else {
+          ids = [this.value];
+        }
+      }
+      else {
+        if (this.multiple) {
+          const value = this.value;
+          ids = value.ids ? value.ids : [];
+        }
+        else {
+          const value = this.value;
+          ids = value.id ? [value.id] : [];
+        }
+      }
+    }
+    return ids;
+  }
+  initTags() {
+    let tags = [];
+    if (this.value) {
+      if (this.multiple) {
+        const value = this.value;
+        tags = value.tags ? value.tags : [];
+      }
+      else {
+        const value = this.value;
+        tags = value.tag ? [value.tag] : [];
+      }
+    }
+    return tags;
+  }
+  toggleTag(item) {
+    this.isAlreadyCreated(item.render.label) ? this.removeTag(item.render.label) : this.createTag(item.render.label);
+  }
+  removeTag(label) {
+    if (this.isAlreadyCreated(label)) {
+      const item = this.state.selection.find(item => item.render.label.toLowerCase() === label.toLowerCase());
+      item && this.deselect(item.item.id);
+    }
+  }
+  setTransparentCaret() {
+    var _a;
+    if (!this.multiple) {
+      this.hide();
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.add('select-input-transparent-caret');
+    }
+  }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {
     "connector": ["onConnectorChange"],
@@ -5649,7 +5817,7 @@ const CatSelectTest = class {
     index.registerInstance(this, hostRef);
   }
   componentDidLoad() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     (_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.connect({
       resolve: (ids) => {
         console.info(`Resolving data... (${ids.join(', ')})`);
@@ -5714,31 +5882,45 @@ const CatSelectTest = class {
         }
       })
     });
-    (_c = this.singleSelect) === null || _c === void 0 ? void 0 : _c.connect({
+    (_c = this.multipleSelectTagging) === null || _c === void 0 ? void 0 : _c.connect(Object.assign(Object.assign({}, this.countryConnector), { customId: (item) => item.country }));
+    (_d = this.singleSelect) === null || _d === void 0 ? void 0 : _d.connect({
       resolve: (ids) => {
         console.info(`Resolving data... (${ids.join(', ')})`);
-        return of(ids.map(id => countries.find(value => value.id === id))).pipe(delay(500));
+        return of(ids.map(id => ({
+          id,
+          firstName: 'John',
+          lastName: `Doe (${id})`,
+          desc: 'resolved'
+        }))).pipe(delay(500));
       },
       retrieve: (term, page) => {
         console.info(`Retrieving data... ("${term}", ${page})`);
-        const filter = countries.filter(value => {
-          var _a;
-          return value.country.toLowerCase().indexOf(term.toLowerCase()) === 0 ||
-            ((_a = value.capital) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf(term.toLowerCase())) === 0;
-        });
-        const slice = filter.slice(page * 10, page * 10 + 10);
-        return of({
-          last: slice.length < 10,
-          totalElements: filter.length,
-          content: slice
-        }).pipe(delay(500));
+        return term === 'no'
+          ? of({ last: true, content: [], totalElements: 0 })
+          : of({
+            last: false,
+            totalElements: 10000,
+            content: Array.from({ length: 10 }, (_, i) => ({
+              id: '' + (i + page * 10),
+              firstName: 'John',
+              lastName: `Doe (${i + page * 10})`,
+              desc: `"${term}": page ${page}`
+            }))
+          }).pipe(delay(500));
       },
-      render: (country) => ({
-        label: country.country,
-        description: country.capital || 'No capital'
+      render: (user) => ({
+        label: `${user.firstName} ${user.lastName}`,
+        description: user.desc
       })
     });
-    (_d = this.singleSelectAvatar) === null || _d === void 0 ? void 0 : _d.connect({
+    (_e = this.singleSelectAvatar) === null || _e === void 0 ? void 0 : _e.connect(Object.assign(Object.assign({}, this.countryConnector), { customId: (item) => item.country }));
+    (_f = this.singleSelectTagging) === null || _f === void 0 ? void 0 : _f.connect(this.countryConnector);
+  }
+  render() {
+    return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '1', tag: '' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true })));
+  }
+  get countryConnector() {
+    return {
       resolve: (ids) => {
         console.info(`Resolving data... (${ids.join(', ')})`);
         return of(ids.map(id => countries.find(value => value.id === id))).pipe(delay(500));
@@ -5765,10 +5947,7 @@ const CatSelectTest = class {
           round: true
         }
       })
-    });
-  }
-  render() {
-    return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: e => console.log('Multiple', e), onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), value: '1', placeholder: "Search for a country or capital", onCatChange: e => console.log('Single', e), onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true })));
+    };
   }
 };
 const countries = [
@@ -7384,7 +7563,7 @@ CatToggle.style = catToggleCss;
 
 const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 
-const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;padding:0.75rem;background-color:black;border-radius:0.25rem;color:white;transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:16rem}.tooltip-show{opacity:1;visibility:visible}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
+const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;background-color:black;border-radius:0.25rem;color:white;transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:20rem}.tooltip-show{opacity:1;visibility:visible}.tooltip-round{border-radius:10rem}.tooltip-s{padding:0.375rem 0.5rem}.tooltip-s.tooltip-round{padding:0.375rem 0.75rem}.tooltip-m{padding:0.75rem}.tooltip-m.tooltip-round{padding:0.75rem 1rem}.tooltip-l{padding:1rem}.tooltip-l.tooltip-round{padding:1rem 1.5rem}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
 
 let nextUniqueId = 0;
 const CatTooltip = class {
@@ -7404,10 +7583,18 @@ const CatTooltip = class {
      * The placement of the tooltip.
      */
     this.placement = 'top';
+    /**
+     * Use round tooltip edges.
+     */
+    this.round = false;
+    /**
+     * The size of the tooltip.
+     */
+    this.size = 'm';
     /**
      * The delay time for showing tooltip in ms.
      */
-    this.showDelay = 500;
+    this.showDelay = 250;
     /**
      * The delay time for hiding tooltip in ms.
      */
@@ -7456,7 +7643,11 @@ const CatTooltip = class {
     }
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, index.h("slot", null)), this.content && !this.disabled && (index.h("div", { ref: el => (this.tooltip = el), id: this.id, class: "tooltip" }, this.content))));
+    return (index.h(index.Host, null, index.h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, index.h("slot", null)), this.content && !this.disabled && (index.h("div", { ref: el => (this.tooltip = el), id: this.id, class: {
+        tooltip: true,
+        'tooltip-round': this.round,
+        [`tooltip-${this.size}`]: Boolean(this.size)
+      } }, this.content))));
   }
   get isTabbable() {
     return firstTabbable(this.trigger);