@haiilo/catalyst 5.3.0 → 5.4.0

package/dist/collection/components/cat-pagination/cat-pagination.js

@@ -17,13 +17,13 @@ export class CatPagination {
     this.variant = 'text';
     this.round = false;
     this.compact = false;
-    this.iconPrev = 'chevron-left-outlined';
-    this.iconNext = 'chevron-right-outlined';
+    this.iconPrev = '$cat:pagination-left';
+    this.iconNext = '$cat:pagination-right';
   }
   render() {
     return (h("nav", { role: "navigation" }, h("ol", { class: {
         [`cat-pagination-${this.size}`]: Boolean(this.size)
-      } }, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: i18n.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => (this.page = this.page - 1) })), this.content, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: i18n.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => (this.page = this.page + 1) })))));
+      } }, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: i18n.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: i18n.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
   }
   get isFirst() {
     return this.page === 0;
@@ -31,6 +31,10 @@ export class CatPagination {
   get isLast() {
     return this.page === this.pageCount - 1;
   }
+  setPage(value) {
+    this.page = value;
+    this.catChange.emit(this.page);
+  }
   get pages() {
     if (!this.sidePadding && !this.activePadding) {
       return [this.page];
@@ -65,7 +69,7 @@ export class CatPagination {
     }
     return this.pages.map((page, i) => [
       i > 0 && this.pages[i - 1] !== page - 1 ? h("li", { class: "dots" }, "\u2026") : null,
-      h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: i18n.t('pagination.page', { page: page + 1 }), a11yCurrent: this.page === page ? 'step' : undefined, onClick: () => (this.page = page) }, page + 1))
+      h("li", null, h("cat-button", { variant: this.variant, size: this.size, round: this.round, color: this.page === page ? 'primary' : undefined, active: this.page === page, a11yLabel: i18n.t('pagination.page', { page: page + 1 }), a11yCurrent: this.page === page ? 'step' : undefined, onClick: () => this.setPage(page) }, page + 1))
     ]);
   }
   static get is() { return "cat-pagination"; }
@@ -242,7 +246,7 @@ export class CatPagination {
         },
         "attribute": "icon-prev",
         "reflect": false,
-        "defaultValue": "'chevron-left-outlined'"
+        "defaultValue": "'$cat:pagination-left'"
       },
       "iconNext": {
         "type": "string",
@@ -260,9 +264,27 @@ export class CatPagination {
         },
         "attribute": "icon-next",
         "reflect": false,
-        "defaultValue": "'chevron-right-outlined'"
+        "defaultValue": "'$cat:pagination-right'"
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "catChange",
+        "name": "catChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the page of the pagination has changed."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }
 //# sourceMappingURL=cat-pagination.js.map

package/dist/collection/components/cat-pagination/cat-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-pagination.js","sourceRoot":"","sources":["../../../src/components/cat-pagination/cat-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE;;;;;;GAMG;AAMH,MAAM,OAAO,aAAa;;gBAIQ,CAAC;qBAKb,CAAC;yBAKG,CAAC;uBAKH,CAAC;gBAKuB,GAAG;mBAKC,MAAM;iBAKxC,KAAK;mBAKH,KAAK;oBAKJ,uBAAuB;oBAKvB,wBAAwB;;EAE3C,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,YAAY;MACpB,UACE,KAAK,EAAE;UACL,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;SACpD;QAED;UACE,kBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,OAAO,EACtB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,QAAQ,QACR,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAC9B,CACX;QACJ,IAAI,CAAC,OAAO;QACb;UACE,kBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,MAAM,EACrB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,QAAQ,QACR,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAC9B,CACX,CACF,CACD,CACP,CAAC;EACJ,CAAC;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC;EACzB,CAAC;EAED,IAAI,MAAM;IACR,OAAO,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;EAC1C,CAAC;EAED,IAAI,KAAK;IACP,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MAC5C,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpB;IAED,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;IACjC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;IACvE,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACjG,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;IACxF,MAAM,aAAa,GAAG,OAAO;MAC3B,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC;MAChE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;IAEtC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,aAAa,CAAC,CAAC;IACtC,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;MACxB,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;KACzF;IACD,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAEnD,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC;EACrB,CAAC;EAEO,MAAM,CAAC,GAAgB,EAAE,KAAa,EAAE,GAAW;IACzD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACpD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAChD,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC;OACjB,IAAI,CAAC,CAAC,CAAC;OACP,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;EAC5C,CAAC;EAEO,KAAK,CAAC,GAAW,EAAE,GAAW,EAAE,GAAW;IACjD,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;EAC3C,CAAC;EAED,IAAY,OAAO;IACjB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,OAAO,CACL,UAAI,KAAK,EAAC,MAAM;QACb,IAAI,CAAC,IAAI,GAAG,CAAC;;QAAG,IAAI,CAAC,SAAS,CAC5B,CACN,CAAC;KACH;IAED,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;MACjC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,UAAI,KAAK,EAAC,MAAM,aAAO,CAAC,CAAC,CAAC,IAAI;MACxE;QACE,kBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjD,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,EAC1B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,EAAE,CAAC,EACxD,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAEhC,IAAI,GAAG,CAAC,CACE,CACV;KACN,CAAC,CAAC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n */\n@Component({\n  tag: 'cat-pagination',\n  styleUrl: 'cat-pagination.scss',\n  shadow: true\n})\nexport class CatPagination {\n  /**\n   * The current page.\n   */\n  @Prop({ mutable: true }) page = 0;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pageCount = 1;\n\n  /**\n   * The number of pages to be shown around the current page.\n   */\n  @Prop() activePadding = 1;\n\n  /**\n   * The number of pages to be shown at the edges.\n   */\n  @Prop() sidePadding = 1;\n\n  /**\n   * The size of the buttons.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The rendering style of the buttons.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Use compact pagination mode.\n   */\n  @Prop() compact = false;\n\n  /**\n   * The icon of the \"previous\" button.\n   */\n  @Prop() iconPrev = 'chevron-left-outlined';\n\n  /**\n   * The icon of the \"next\" button.\n   */\n  @Prop() iconNext = 'chevron-right-outlined';\n\n  render() {\n    return (\n      <nav role=\"navigation\">\n        <ol\n          class={{\n            [`cat-pagination-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isFirst}\n              a11yLabel={i18n.t('pagination.prev')}\n              icon={this.iconPrev}\n              iconOnly\n              onClick={() => (this.page = this.page - 1)}\n            ></cat-button>\n          </li>\n          {this.content}\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isLast}\n              a11yLabel={i18n.t('pagination.next')}\n              icon={this.iconNext}\n              iconOnly\n              onClick={() => (this.page = this.page + 1)}\n            ></cat-button>\n          </li>\n        </ol>\n      </nav>\n    );\n  }\n\n  get isFirst() {\n    return this.page === 0;\n  }\n\n  get isLast() {\n    return this.page === this.pageCount - 1;\n  }\n\n  get pages() {\n    if (!this.sidePadding && !this.activePadding) {\n      return [this.page];\n    }\n\n    const result = new Set<number>();\n    const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n    const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;\n    const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n    const maxActivepage = maxPage\n      ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n      : this.pageCount - this.sidePadding;\n\n    this.addSeq(result, 0, minActivepage);\n    if (!minPage && !maxPage) {\n      this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n    }\n    this.addSeq(result, maxActivepage, this.pageCount);\n\n    return [...result];\n  }\n\n  private addSeq(set: Set<number>, start: number, end: number) {\n    const _start = this.clamp(start, 0, this.pageCount);\n    const _end = this.clamp(end, 0, this.pageCount);\n    Array(_end - _start)\n      .fill(0)\n      .forEach((_, i) => set.add(_start + i));\n  }\n\n  private clamp(num: number, min: number, max: number) {\n    return Math.min(Math.max(num, min), max);\n  }\n\n  private get content() {\n    if (this.compact) {\n      return (\n        <li class=\"text\">\n          {this.page + 1}/{this.pageCount}\n        </li>\n      );\n    }\n\n    return this.pages.map((page, i) => [\n      i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n      <li>\n        <cat-button\n          variant={this.variant}\n          size={this.size}\n          round={this.round}\n          color={this.page === page ? 'primary' : undefined}\n          active={this.page === page}\n          a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n          a11yCurrent={this.page === page ? 'step' : undefined}\n          onClick={() => (this.page = page)}\n        >\n          {page + 1}\n        </cat-button>\n      </li>\n    ]);\n  }\n}\n"]}
+{"version":3,"file":"cat-pagination.js","sourceRoot":"","sources":["../../../src/components/cat-pagination/cat-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE;;;;;;GAMG;AAMH,MAAM,OAAO,aAAa;;gBAIQ,CAAC;qBAKb,CAAC;yBAKG,CAAC;uBAKH,CAAC;gBAKuB,GAAG;mBAKC,MAAM;iBAKxC,KAAK;mBAKH,KAAK;oBAKJ,sBAAsB;oBAKtB,uBAAuB;;EAO1C,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,YAAY;MACpB,UACE,KAAK,EAAE;UACL,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;SACpD;QAED;UACE,kBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,OAAO,EACtB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,QAAQ,QACR,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAC9B,CACX;QACJ,IAAI,CAAC,OAAO;QACb;UACE,kBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,MAAM,EACrB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,QAAQ,QACR,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAC9B,CACX,CACF,CACD,CACP,CAAC;EACJ,CAAC;EAED,IAAI,OAAO;IACT,OAAO,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC;EACzB,CAAC;EAED,IAAI,MAAM;IACR,OAAO,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;EAC1C,CAAC;EAEO,OAAO,CAAC,KAAa;IAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACjC,CAAC;EAED,IAAI,KAAK;IACP,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;MAC5C,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpB;IAED,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;IACjC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;IACvE,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACjG,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;IACxF,MAAM,aAAa,GAAG,OAAO;MAC3B,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC;MAChE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;IAEtC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,aAAa,CAAC,CAAC;IACtC,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;MACxB,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;KACzF;IACD,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAEnD,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC;EACrB,CAAC;EAEO,MAAM,CAAC,GAAgB,EAAE,KAAa,EAAE,GAAW;IACzD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACpD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAChD,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC;OACjB,IAAI,CAAC,CAAC,CAAC;OACP,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;EAC5C,CAAC;EAEO,KAAK,CAAC,GAAW,EAAE,GAAW,EAAE,GAAW;IACjD,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;EAC3C,CAAC;EAED,IAAY,OAAO;IACjB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,OAAO,CACL,UAAI,KAAK,EAAC,MAAM;QACb,IAAI,CAAC,IAAI,GAAG,CAAC;;QAAG,IAAI,CAAC,SAAS,CAC5B,CACN,CAAC;KACH;IAED,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;MACjC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,UAAI,KAAK,EAAC,MAAM,aAAO,CAAC,CAAC,CAAC,IAAI;MACxE;QACE,kBACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjD,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,EAC1B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,IAAI,GAAG,CAAC,EAAE,CAAC,EACxD,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAEhC,IAAI,GAAG,CAAC,CACE,CACV;KACN,CAAC,CAAC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n */\n@Component({\n  tag: 'cat-pagination',\n  styleUrl: 'cat-pagination.scss',\n  shadow: true\n})\nexport class CatPagination {\n  /**\n   * The current page.\n   */\n  @Prop({ mutable: true }) page = 0;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pageCount = 1;\n\n  /**\n   * The number of pages to be shown around the current page.\n   */\n  @Prop() activePadding = 1;\n\n  /**\n   * The number of pages to be shown at the edges.\n   */\n  @Prop() sidePadding = 1;\n\n  /**\n   * The size of the buttons.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The rendering style of the buttons.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Use compact pagination mode.\n   */\n  @Prop() compact = false;\n\n  /**\n   * The icon of the \"previous\" button.\n   */\n  @Prop() iconPrev = '$cat:pagination-left';\n\n  /**\n   * The icon of the \"next\" button.\n   */\n  @Prop() iconNext = '$cat:pagination-right';\n\n  /**\n   * Emitted when the page of the pagination has changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  render() {\n    return (\n      <nav role=\"navigation\">\n        <ol\n          class={{\n            [`cat-pagination-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isFirst}\n              a11yLabel={i18n.t('pagination.prev')}\n              icon={this.iconPrev}\n              iconOnly\n              onClick={() => this.setPage(this.page - 1)}\n            ></cat-button>\n          </li>\n          {this.content}\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isLast}\n              a11yLabel={i18n.t('pagination.next')}\n              icon={this.iconNext}\n              iconOnly\n              onClick={() => this.setPage(this.page + 1)}\n            ></cat-button>\n          </li>\n        </ol>\n      </nav>\n    );\n  }\n\n  get isFirst() {\n    return this.page === 0;\n  }\n\n  get isLast() {\n    return this.page === this.pageCount - 1;\n  }\n\n  private setPage(value: number) {\n    this.page = value;\n    this.catChange.emit(this.page);\n  }\n\n  get pages() {\n    if (!this.sidePadding && !this.activePadding) {\n      return [this.page];\n    }\n\n    const result = new Set<number>();\n    const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n    const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;\n    const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n    const maxActivepage = maxPage\n      ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n      : this.pageCount - this.sidePadding;\n\n    this.addSeq(result, 0, minActivepage);\n    if (!minPage && !maxPage) {\n      this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n    }\n    this.addSeq(result, maxActivepage, this.pageCount);\n\n    return [...result];\n  }\n\n  private addSeq(set: Set<number>, start: number, end: number) {\n    const _start = this.clamp(start, 0, this.pageCount);\n    const _end = this.clamp(end, 0, this.pageCount);\n    Array(_end - _start)\n      .fill(0)\n      .forEach((_, i) => set.add(_start + i));\n  }\n\n  private clamp(num: number, min: number, max: number) {\n    return Math.min(Math.max(num, min), max);\n  }\n\n  private get content() {\n    if (this.compact) {\n      return (\n        <li class=\"text\">\n          {this.page + 1}/{this.pageCount}\n        </li>\n      );\n    }\n\n    return this.pages.map((page, i) => [\n      i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n      <li>\n        <cat-button\n          variant={this.variant}\n          size={this.size}\n          round={this.round}\n          color={this.page === page ? 'primary' : undefined}\n          active={this.page === page}\n          a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n          a11yCurrent={this.page === page ? 'step' : undefined}\n          onClick={() => this.setPage(page)}\n        >\n          {page + 1}\n        </cat-button>\n      </li>\n    ]);\n  }\n}\n"]}

package/dist/collection/components/cat-radio/cat-radio.css

@@ -12,11 +12,30 @@
 .hint-section .input-hint,
 .hint-section ::slotted([slot=hint]) {
   font-size: 0.875rem;
-  line-height: 1rem;
+  line-height: 1.125rem;
   font-weight: var(--cat-font-weight-body, 400);
   margin: 0 !important;
 }
 
+.hint-wrapper {
+  flex: 0 1 auto;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.hint-section {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.input-hint,
+::slotted([slot=hint]) {
+  color: rgb(var(--cat-font-color-muted, 81, 92, 108));
+  line-height: 1.5;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 :host {
   display: flex;
   flex-direction: column;
@@ -47,6 +66,10 @@ label {
   align-self: flex-start;
 }
 
+.circle-placeholder {
+  width: calc(1.25rem + 1px);
+}
+
 .circle {
   position: absolute;
   width: 0.75rem;

package/dist/collection/components/cat-radio/cat-radio.js

@@ -61,7 +61,7 @@ export class CatRadio {
     this.input.click();
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) }))));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "circle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
   }
   onChange(event) {
     this.checked = true;
@@ -298,9 +298,13 @@ export class CatRadio {
           "text": "Emitted when the radio is changed."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
         }
       }, {
         "method": "catFocus",

package/dist/collection/components/cat-radio/cat-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @slot hint - Optional hint element to be displayed with the radio.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: true\n})\nexport class CatRadio {\n  private readonly _id = `cat-radio-${++nextUniqueId}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Whether this radio is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Whether this radio is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the radio that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the radio component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the radio is required.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio component.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the radio.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the radio component.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the radio is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the radio received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on radio', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the radio button. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the radio button. Use this method\n   * instead of `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the radio button.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n        >\n          <span class=\"radio\">\n            <input\n              {...this.nativeAttributes}\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.identifier || this.id}\n              type=\"radio\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              required={this.required}\n              disabled={this.disabled}\n              onInput={this.onChange.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            />\n            <span class=\"circle\"></span>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {(this.hint || this.hasSlottedHint) && (\n          <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n        )}\n      </Host>\n    );\n  }\n\n  private onChange(event: InputEvent) {\n    this.checked = true;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"]}
+{"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n *\n * @slot hint - Optional hint element to be displayed with the radio.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-radio',\n  styleUrl: 'cat-radio.scss',\n  shadow: true\n})\nexport class CatRadio {\n  private readonly _id = `cat-radio-${++nextUniqueId}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Whether this radio is checked.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Whether this radio is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the radio that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the radio component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the radio is required.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio component.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the radio.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the radio component.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the radio is changed.\n   */\n  @Event() catChange!: EventEmitter<InputEvent>;\n\n  /**\n   * Emitted when the radio received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the radio loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on radio', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the radio button. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the radio button. Use this method\n   * instead of `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the radio button.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.input.click();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n          role=\"radio\"\n          aria-checked={this.checked ? 'true' : 'false'}\n        >\n          <span class=\"radio\">\n            <input\n              {...this.nativeAttributes}\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.identifier || this.id}\n              type=\"radio\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              required={this.required}\n              disabled={this.disabled}\n              onInput={this.onChange.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            />\n            <span class=\"circle\"></span>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {(this.hint || this.hasSlottedHint) && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"circle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private onChange(event: InputEvent) {\n    this.checked = true;\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"]}

package/dist/collection/components/cat-radio-group/cat-radio-group.js

@@ -185,9 +185,13 @@ export class CatRadioGroup {
           "text": "Emitted when the value is changed."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
         }
       }, {
         "method": "catBlur",

package/dist/collection/components/cat-radio-group/cat-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * A group of radio buttons.\n */\n@Component({\n  tag: 'cat-radio-group',\n  styleUrl: 'cat-radio-group.scss',\n  shadow: true\n})\nexport class CatRadioGroup {\n  private catRadioGroup: HTMLCatRadioElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The name of the radio group component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Whether this radio group is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Adds an accessible label for the radio group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Whether the label of the radios should appear to the left of them.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the radio group loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  @Watch('name')\n  onNameChanged(newName?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n  }\n\n  @Watch('value')\n  onValueChanged(newValue?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n    this.updateTabIndex();\n  }\n\n  @Watch('disabled')\n  onDisabledChanged(disabled: boolean) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));\n  }\n\n  @Watch('labelLeft')\n  onLabelLeftChanged(labelLeft: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (labelLeft) {\n        catRadio.labelLeft = labelLeft;\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n    this.onNameChanged(this.name);\n    this.onValueChanged(this.value);\n    this.onDisabledChanged(this.disabled);\n    this.onLabelLeftChanged(this.labelLeft);\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n      const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n      const activeElement = document.activeElement as HTMLCatRadioElement;\n      const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n      targetElements[targetIdx].doFocus();\n      targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n      this.updateTabIndex();\n      event.preventDefault();\n    }\n  }\n\n  @Listen('input')\n  onInput(event: MouseEvent): void {\n    const catRadioElement = this.catRadioGroup.find(value => value === event.target);\n    this.value = catRadioElement?.value;\n    this.catChange.emit();\n  }\n\n  @Listen('blur', { capture: true })\n  onBlur(event: FocusEvent): void {\n    if (!event.relatedTarget) {\n      this.catBlur.emit(event);\n    }\n  }\n\n  render() {\n    return (\n      <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n        <slot></slot>\n      </div>\n    );\n  }\n\n  private updateTabIndex() {\n    if (this.catRadioGroup.length) {\n      this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n      const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n      this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n        ?.querySelector('input')\n        ?.setAttribute('tabindex', '0');\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-radio-group.js","sourceRoot":"","sources":["../../../src/components/cat-radio-group/cat-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * A group of radio buttons.\n */\n@Component({\n  tag: 'cat-radio-group',\n  styleUrl: 'cat-radio-group.scss',\n  shadow: true\n})\nexport class CatRadioGroup {\n  private catRadioGroup: HTMLCatRadioElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The name of the radio group component.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the radio group.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Whether this radio group is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Adds an accessible label for the radio group that\n   * it is only shown in assistive technologies, like screen readers.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Whether the label of the radios should appear to the left of them.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<InputEvent>;\n\n  /**\n   * Emitted when the radio group loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  @Watch('name')\n  onNameChanged(newName?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.name = newName));\n  }\n\n  @Watch('value')\n  onValueChanged(newValue?: string) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.checked = catRadio.value === newValue));\n    this.updateTabIndex();\n  }\n\n  @Watch('disabled')\n  onDisabledChanged(disabled: boolean) {\n    this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));\n  }\n\n  @Watch('labelLeft')\n  onLabelLeftChanged(labelLeft: boolean) {\n    this.catRadioGroup.forEach(catRadio => {\n      if (labelLeft) {\n        catRadio.labelLeft = labelLeft;\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));\n    this.onNameChanged(this.name);\n    this.onValueChanged(this.value);\n    this.onDisabledChanged(this.disabled);\n    this.onLabelLeftChanged(this.labelLeft);\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {\n      const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);\n      const activeElement = document.activeElement as HTMLCatRadioElement;\n      const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);\n      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;\n      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n      targetElements[targetIdx].doFocus();\n      targetElements[targetIdx].shadowRoot?.querySelector('input')?.click();\n      this.updateTabIndex();\n      event.preventDefault();\n    }\n  }\n\n  @Listen('input')\n  onInput(event: MouseEvent): void {\n    const catRadioElement = this.catRadioGroup.find(value => value === event.target);\n    this.value = catRadioElement?.value;\n    this.catChange.emit();\n  }\n\n  @Listen('blur', { capture: true })\n  onBlur(event: FocusEvent): void {\n    if (!event.relatedTarget) {\n      this.catBlur.emit(event);\n    }\n  }\n\n  render() {\n    return (\n      <div role=\"radiogroup\" aria-label={this.a11yLabel}>\n        <slot></slot>\n      </div>\n    );\n  }\n\n  private updateTabIndex() {\n    if (this.catRadioGroup.length) {\n      this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));\n      const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);\n      this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot\n        ?.querySelector('input')\n        ?.setAttribute('tabindex', '0');\n    }\n  }\n}\n"]}

package/dist/collection/components/cat-scrollable/cat-scrollable.css

@@ -42,10 +42,7 @@
 
 .scrollable-wrapper {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   pointer-events: none;
 }
 .scrollable-wrapper.cat-scrollable-top .shadow-top, .scrollable-wrapper.cat-scrollable-bottom .shadow-bottom, .scrollable-wrapper.cat-scrollable-left .shadow-left, .scrollable-wrapper.cat-scrollable-right .shadow-right {

package/dist/collection/components/cat-select/cat-select.css

@@ -12,7 +12,7 @@
 .hint-section .input-hint,
 .hint-section ::slotted([slot=hint]) {
   font-size: 0.875rem;
-  line-height: 1rem;
+  line-height: 1.125rem;
   font-weight: var(--cat-font-weight-body, 400);
   margin: 0 !important;
 }
@@ -382,26 +382,22 @@ label.hidden {
   align-items: flex-start;
   background: white;
   border-radius: var(--cat-border-radius-m, 0.25rem);
-  box-shadow: 0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));
+  box-shadow: inset 0 0 0 1px rgb(var(--border-color));
   transition: box-shadow 0.13s linear;
   padding: 0.25rem;
+  --border-color: var(--cat-border-color-dark, 215, 219, 224);
   /* stylelint-disable property-no-vendor-prefix */
   /* stylelint-enable property-no-vendor-prefix */
 }
 .select-wrapper:not(.select-disabled):hover {
-  box-shadow: 0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224));
-}
-.select-wrapper:not(.select-disabled):hover.select-invalid {
-  box-shadow: 0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  box-shadow: inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color));
 }
-.select-wrapper:not(.select-disabled):focus-within {
+.select-wrapper:focus-within {
   outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
-}
-.select-wrapper:not(.select-disabled):focus-within.select-invalid {
-  outline: 2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  outline-offset: -1px;
 }
 .select-wrapper.select-invalid {
-  box-shadow: 0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+  --border-color: var(--cat-danger-bg, 217, 52, 13), 0.2;
 }
 .select-wrapper:has(input:-webkit-autofill), .select-wrapper:has(input:-webkit-autofill):hover, .select-wrapper:has(input:-webkit-autofill):focus {
   background-color: #e8f0fe;
@@ -509,6 +505,7 @@ cat-spinner {
   overflow: auto;
   box-shadow: 0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);
   border-radius: var(--cat-border-radius-m, 0.25rem);
+  border: 1px solid rgb(var(--cat-border-color, 235, 236, 240));
   z-index: 100;
 }
 

package/dist/collection/components/cat-select/cat-select.js

@@ -13,6 +13,7 @@ const INIT_STATE = {
   isResolving: false,
   options: [],
   selection: [],
+  tempSelection: [],
   activeOptionIndex: -1,
   activeSelectionIndex: -1
 };
@@ -142,6 +143,7 @@ export class CatSelect {
     }
   }
   onBlur(event) {
+    var _a;
     if (!this.multiple && this.state.activeOptionIndex >= 0) {
       if (this.tags && this.state.options[this.state.activeOptionIndex].item.id === `select-${this.id}-option-tag`) {
         this.createTag(this.state.term);
@@ -151,7 +153,18 @@ export class CatSelect {
       }
     }
     this.hide();
-    this.patchState({ activeSelectionIndex: -1 });
+    if (!this.multiple && ((_a = this.state.tempSelection) === null || _a === void 0 ? void 0 : _a.length)) {
+      this.patchState({
+        activeSelectionIndex: -1,
+        selection: this.state.tempSelection,
+        tempSelection: [],
+        options: [],
+        term: this.state.tempSelection[0].render.label
+      });
+    }
+    else {
+      this.patchState({ activeSelectionIndex: -1 });
+    }
     this.catBlur.emit(event);
     if (coerceBoolean(this.errorUpdate)) {
       this.showErrors();
@@ -200,7 +213,10 @@ export class CatSelect {
         else if (this.state.selection.length) {
           const selectionClone = [...this.state.selection];
           selectionClone.pop();
-          this.patchState({ selection: selectionClone });
+          this.patchState({
+            selection: selectionClone,
+            tempSelection: this.state.term ? [...this.state.selection] : []
+          });
         }
       }
     }
@@ -287,11 +303,11 @@ export class CatSelect {
           pill: true,
           'select-no-open': true,
           'select-option-active': this.state.activeSelectionIndex === i
-        }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "16-cross", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1 }))));
-    }))) : this.state.selection.length && this.state.selection[0].render.avatar ? (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: (_a = this.state.selection[0].render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("input", Object.assign({}, this.nativeAttributes, { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_b = this.hint) === null || _b === void 0 ? void 0 : _b.length) ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving }))), this.state.isResolving && h("cat-spinner", null), this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+        }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1 }))));
+    }))) : this.state.selection.length && this.state.selection[0].render.avatar ? (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, icon: this.state.selection[0].render.avatar.icon, initials: (_a = this.state.selection[0].render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("input", Object.assign({}, this.nativeAttributes, { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_b = this.hint) === null || _b === void 0 ? void 0 : _b.length) ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving }))), this.state.isResolving && h("cat-spinner", null), this.invalid && (h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
       !this.disabled &&
       !this.state.isResolving &&
-      this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (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 ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, 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
+      this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), (this.hint || this.hasSlottedHint || !!Object.keys(this.errorMap || {}).length) && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, 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(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
       : !this.state.options.length &&
         !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : i18n.t('select.empty')))))))));
@@ -313,11 +329,11 @@ export class CatSelect {
       return (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": isOptionSelected ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: isOptionSelected, 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();
-        } }, h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
+        } }, h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))) : (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 ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_b = item.render.avatar.initials) !== null && _b !== void 0 ? _b : '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))));
+        }, 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 ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: (_b = item.render.avatar.initials) !== null && _b !== void 0 ? _b : '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))));
     });
   }
   resolve() {
@@ -360,7 +376,7 @@ export class CatSelect {
     if (!this.state.isOpen) {
       this.patchState({ isOpen: true });
       this.catOpen.emit();
-      this.term$.next(this.state.term);
+      this.term$.next('');
       (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.remove('select-input-transparent-caret');
     }
   }
@@ -413,12 +429,12 @@ export class CatSelect {
   }
   clear() {
     if (this.input && this.state.term) {
-      this.patchState({ selection: [], options: [], term: '', activeOptionIndex: -1 });
+      this.patchState({ selection: [], options: [], term: '', activeOptionIndex: -1, tempSelection: [] });
       this.term$.next('');
       this.input.value = '';
     }
     else {
-      this.patchState({ selection: [] });
+      this.patchState({ selection: [], tempSelection: [] });
     }
   }
   reset(connector) {
@@ -444,12 +460,17 @@ export class CatSelect {
     }
   }
   onInput() {
-    var _a;
+    var _a, _b;
     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 });
+    if (!this.multiple) {
+      if (this.state.selection.length) {
+        const selectionClone = [...this.state.selection];
+        selectionClone.pop();
+        this.patchState({ selection: selectionClone, tempSelection: [...this.state.selection] });
+      }
+      if (!((_b = this.input) === null || _b === void 0 ? void 0 : _b.value.trim())) {
+        this.patchState({ tempSelection: [] });
+      }
     }
     this.show();
   }
@@ -1083,9 +1104,13 @@ export class CatSelect {
           "text": "Emitted when the value is changed."
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+          "original": "InputEvent",
+          "resolved": "InputEvent",
+          "references": {
+            "InputEvent": {
+              "location": "global"
+            }
+          }
         }
       }, {
         "method": "catBlur",