@haiilo/catalyst 0.13.0 → 0.14.2

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

@@ -7,8 +7,8 @@ import { Component, h, Element, State, Watch, Listen, Host, Prop } from '@stenci
  */
 export class CatTabs {
   constructor() {
-    this.tabs = [];
     this.buttons = [];
+    this.tabs = [];
     /**
      * The ID of the active tab.
      */
@@ -23,11 +23,24 @@ export class CatTabs {
     activeTab === null || activeTab === void 0 ? void 0 : activeTab.click();
   }
   componentWillLoad() {
-    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+    this.syncTabs();
     if (this.tabs.length) {
       this.activeTabId = this.activeTab;
     }
   }
+  componentDidLoad() {
+    var _a;
+    this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs());
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, {
+      childList: true,
+      attributes: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   onKeydown(event) {
     var _a;
     if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
@@ -57,6 +70,9 @@ export class CatTabs {
       this.buttons.push(button);
     }
   }
+  syncTabs() {
+    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+  }
   static get is() { return "cat-tabs"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -104,6 +120,7 @@ export class CatTabs {
     }
   }; }
   static get states() { return {
+    "tabs": {},
     "activeTabId": {}
   }; }
   static get elementRef() { return "hostElement"; }

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

@@ -1 +1 @@
-{"version":3,"file":"cat-tabs.js","sourceRoot":"","sources":["../../../src/components/cat-tabs/cat-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State, Watch, Listen, Host, Prop } from '@stencil/core';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n */\n@Component({\n  tag: 'cat-tabs',\n  styleUrl: 'cat-tabs.scss',\n  shadow: true\n})\nexport class CatTabs {\n  private tabs: HTMLCatTabElement[] = [];\n  private buttons: HTMLCatButtonElement[] = [];\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() activeTabId?: string;\n\n  /**\n   * The ID of the active tab.\n   */\n  @Prop() activeTab = '';\n\n  /**\n   * The alignment of the tabs.\n   */\n  @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  @Watch('activeTabId')\n  onActiveTabChanged(newActiveTab: string): void {\n    const activeTab = this.tabs.find(value => value.id === newActiveTab);\n    activeTab?.click();\n  }\n\n  componentWillLoad(): void {\n    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n    if (this.tabs.length) {\n      this.activeTabId = this.activeTab;\n    }\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n      const targetElements = this.buttons.filter(button => !button.disabled);\n      const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n      const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\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].setFocus();\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.map((tab: HTMLCatTabElement) => {\n          return (\n            <cat-button\n              ref={el => el && this.updateButtonsRef(el)}\n              buttonId={tab.id}\n              role=\"tab\"\n              part=\"tab\"\n              class={{\n                tab: true,\n                'tab-active': Boolean(this.activeTabId && tab.id === this.activeTabId)\n              }}\n              color={this.activeTabId && tab.id === this.activeTabId ? 'primary' : 'secondary'}\n              variant=\"text\"\n              icon={tab.icon}\n              iconOnly={tab.iconOnly}\n              iconRight={tab.iconRight}\n              url={tab.url}\n              disabled={tab.deactivated}\n              urlTarget={tab.urlTarget}\n              onCatClick={() => (this.activeTabId = tab.id)}\n            >\n              {tab.label}\n            </cat-button>\n          );\n        })}\n      </Host>\n    );\n  }\n\n  private updateButtonsRef(button: HTMLCatButtonElement) {\n    const indexOf = this.buttons.indexOf(button);\n\n    if (indexOf >= 0) {\n      this.buttons[indexOf] = button;\n    } else {\n      this.buttons.push(button);\n    }\n  }\n}\n"]}
+{"version":3,"file":"cat-tabs.js","sourceRoot":"","sources":["../../../src/components/cat-tabs/cat-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State, Watch, Listen, Host, Prop } from '@stencil/core';\n\n/**\n * Tabs are used to display multiple panels to be contained within a single\n * window, using tabs as a navigational element.\n *\n * @part tab - The header of the tab.\n */\n@Component({\n  tag: 'cat-tabs',\n  styleUrl: 'cat-tabs.scss',\n  shadow: true\n})\nexport class CatTabs {\n  private buttons: HTMLCatButtonElement[] = [];\n  private mutationObserver?: MutationObserver;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() tabs: HTMLCatTabElement[] = [];\n\n  @State() activeTabId?: string;\n\n  /**\n   * The ID of the active tab.\n   */\n  @Prop() activeTab = '';\n\n  /**\n   * The alignment of the tabs.\n   */\n  @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  @Watch('activeTabId')\n  onActiveTabChanged(newActiveTab: string): void {\n    const activeTab = this.tabs.find(value => value.id === newActiveTab);\n    activeTab?.click();\n  }\n\n  componentWillLoad(): void {\n    this.syncTabs();\n    if (this.tabs.length) {\n      this.activeTabId = this.activeTab;\n    }\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(\n      mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\n    );\n\n    this.mutationObserver?.observe(this.hostElement, {\n      childList: true,\n      attributes: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n      const targetElements = this.buttons.filter(button => !button.disabled);\n      const activeElement = this.hostElement.shadowRoot?.activeElement as HTMLCatButtonElement;\n      const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\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].setFocus();\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.map((tab: HTMLCatTabElement) => {\n          return (\n            <cat-button\n              ref={el => el && this.updateButtonsRef(el)}\n              buttonId={tab.id}\n              role=\"tab\"\n              part=\"tab\"\n              class={{\n                tab: true,\n                'tab-active': Boolean(this.activeTabId && tab.id === this.activeTabId)\n              }}\n              color={this.activeTabId && tab.id === this.activeTabId ? 'primary' : 'secondary'}\n              variant=\"text\"\n              icon={tab.icon}\n              iconOnly={tab.iconOnly}\n              iconRight={tab.iconRight}\n              url={tab.url}\n              disabled={tab.deactivated}\n              urlTarget={tab.urlTarget}\n              onCatClick={() => (this.activeTabId = tab.id)}\n            >\n              {tab.label}\n            </cat-button>\n          );\n        })}\n      </Host>\n    );\n  }\n\n  private updateButtonsRef(button: HTMLCatButtonElement) {\n    const indexOf = this.buttons.indexOf(button);\n\n    if (indexOf >= 0) {\n      this.buttons[indexOf] = button;\n    } else {\n      this.buttons.push(button);\n    }\n  }\n\n  private syncTabs() {\n    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n  }\n}\n"]}

package/dist/collection/components/cat-toast-demo/cat-toast-demo.js

@@ -11,7 +11,8 @@ export class CatToastDemo {
   }
   onClick() {
     const infoOptions = {
-      position: 'top-left'
+      position: 'top-left',
+      type: 'info'
     };
     const errorOptions = {
       position: 'top-center',
@@ -32,6 +33,16 @@ export class CatToastDemo {
       type: 'success',
       content: template.content.firstChild
     };
+    const primaryOptions = {
+      position: 'bottom-right',
+      type: 'primary'
+    };
+    const secondaryOptions = {
+      position: 'bottom-right',
+      type: 'secondary'
+    };
+    NotificationsService.secondary('Secondary Click', 'secondary info', secondaryOptions);
+    NotificationsService.primary('primary Click', 'secondary info', primaryOptions);
     NotificationsService.error('Default Click');
     NotificationsService.error('Long default title, long default title, long default title, long default title');
     NotificationsService.info('Info Click', 'Info message', infoOptions);

package/dist/collection/components/cat-toast-demo/cat-toast-demo.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-toast-demo.js","sourceRoot":"","sources":["../../../src/components/cat-toast-demo/cat-toast-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAgB,MAAM,sCAAsC,CAAC;AAE1F;;;;GAIG;AAKH,MAAM,OAAO,YAAY;EACvB,MAAM;IACJ,OAAO,kBAAY,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAiC,CAAC;EACvF,CAAC;EAEO,OAAO;IACb,MAAM,WAAW,GAA0B;MACzC,QAAQ,EAAE,UAAU;KACrB,CAAC;IACF,MAAM,YAAY,GAA0B;MAC1C,QAAQ,EAAE,YAAY;MACtB,IAAI,EAAE,OAAO;KACd,CAAC;IACF,MAAM,aAAa,GAA0B;MAC3C,QAAQ,EAAE,aAAa;MACvB,IAAI,EAAE,OAAO;KACd,CAAC;IACF,MAAM,eAAe,GAA0B;MAC7C,QAAQ,EAAE,cAAc;MACxB,IAAI,EAAE,SAAS;KAChB,CAAC;IACF,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,SAAS,GAAG,wEAAwE,CAAC;IAC9F,MAAM,eAAe,GAA0B;MAC7C,QAAQ,EAAE,cAAc;MACxB,IAAI,EAAE,SAAS;MACf,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,UAAyB;KACpD,CAAC;IAEF,oBAAoB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC5C,oBAAoB,CAAC,KAAK,CAAC,gFAAgF,CAAC,CAAC;IAC7G,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC;IACrE,oBAAoB,CAAC,OAAO,CAAC,EAAE,EAAE,GAAG,EAAE,eAAe,CAAC,CAAC;IACvD,oBAAoB,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,YAAY,CAAC,CAAC;IAC7D,oBAAoB,CAAC,KAAK,CACxB,eAAe,EACf,8RAA8R,EAC9R,aAAa,CACd,CAAC;IACF,oBAAoB,CAAC,OAAO,CAAC,iDAAiD,EAAE,GAAG,EAAE,eAAe,CAAC,CAAC;EACxG,CAAC;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\nimport { NotificationsService, ToastOptions } from '../cat-notification/cat-notification';\n\n/**\n * Toast Component Demo\n *\n * @part toast - The content of the toast.\n */\n@Component({\n  tag: 'cat-toast-demo',\n  styleUrl: 'cat-toast-demo.scss'\n})\nexport class CatToastDemo {\n  render() {\n    return <cat-button onClick={this.onClick.bind(this)}>Show Notifications</cat-button>;\n  }\n\n  private onClick() {\n    const infoOptions: Partial<ToastOptions> = {\n      position: 'top-left'\n    };\n    const errorOptions: Partial<ToastOptions> = {\n      position: 'top-center',\n      type: 'error'\n    };\n    const errorOptions2: Partial<ToastOptions> = {\n      position: 'bottom-left',\n      type: 'error'\n    };\n    const successOptions3: Partial<ToastOptions> = {\n      position: 'bottom-right',\n      type: 'success'\n    };\n    const template = document.createElement('template');\n    template.innerHTML = `<div style=\"padding: 7px 30px 7px 10px\">Custom HTML Node Content</div>`;\n    const successOptions4: Partial<ToastOptions> = {\n      position: 'bottom-right',\n      type: 'success',\n      content: template.content.firstChild as HTMLElement\n    };\n\n    NotificationsService.error('Default Click');\n    NotificationsService.error('Long default title, long default title, long default title, long default title');\n    NotificationsService.info('Info Click', 'Info message', infoOptions);\n    NotificationsService.success('', ' ', successOptions4);\n    NotificationsService.error('Error Title', ' ', errorOptions);\n    NotificationsService.error(\n      'Error 2 Title',\n      'Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message,Very long message, Very long message, Very long message, Very long message, Very long message, ',\n      errorOptions2\n    );\n    NotificationsService.success('Success Title - very long title without message', ' ', successOptions3);\n  }\n}\n"]}
+{"version":3,"file":"cat-toast-demo.js","sourceRoot":"","sources":["../../../src/components/cat-toast-demo/cat-toast-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAgB,MAAM,sCAAsC,CAAC;AAE1F;;;;GAIG;AAKH,MAAM,OAAO,YAAY;EACvB,MAAM;IACJ,OAAO,kBAAY,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAiC,CAAC;EACvF,CAAC;EAEO,OAAO;IACb,MAAM,WAAW,GAA0B;MACzC,QAAQ,EAAE,UAAU;MACpB,IAAI,EAAE,MAAM;KACb,CAAC;IACF,MAAM,YAAY,GAA0B;MAC1C,QAAQ,EAAE,YAAY;MACtB,IAAI,EAAE,OAAO;KACd,CAAC;IACF,MAAM,aAAa,GAA0B;MAC3C,QAAQ,EAAE,aAAa;MACvB,IAAI,EAAE,OAAO;KACd,CAAC;IACF,MAAM,eAAe,GAA0B;MAC7C,QAAQ,EAAE,cAAc;MACxB,IAAI,EAAE,SAAS;KAChB,CAAC;IACF,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,SAAS,GAAG,wEAAwE,CAAC;IAC9F,MAAM,eAAe,GAA0B;MAC7C,QAAQ,EAAE,cAAc;MACxB,IAAI,EAAE,SAAS;MACf,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,UAAyB;KACpD,CAAC;IACF,MAAM,cAAc,GAA0B;MAC5C,QAAQ,EAAE,cAAc;MACxB,IAAI,EAAE,SAAS;KAChB,CAAC;IAEF,MAAM,gBAAgB,GAA0B;MAC9C,QAAQ,EAAE,cAAc;MACxB,IAAI,EAAE,WAAW;KAClB,CAAC;IAEF,oBAAoB,CAAC,SAAS,CAAC,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;IACtF,oBAAoB,CAAC,OAAO,CAAC,eAAe,EAAE,gBAAgB,EAAE,cAAc,CAAC,CAAC;IAChF,oBAAoB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC5C,oBAAoB,CAAC,KAAK,CAAC,gFAAgF,CAAC,CAAC;IAC7G,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC;IACrE,oBAAoB,CAAC,OAAO,CAAC,EAAE,EAAE,GAAG,EAAE,eAAe,CAAC,CAAC;IACvD,oBAAoB,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,YAAY,CAAC,CAAC;IAC7D,oBAAoB,CAAC,KAAK,CACxB,eAAe,EACf,8RAA8R,EAC9R,aAAa,CACd,CAAC;IACF,oBAAoB,CAAC,OAAO,CAAC,iDAAiD,EAAE,GAAG,EAAE,eAAe,CAAC,CAAC;EACxG,CAAC;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\nimport { NotificationsService, ToastOptions } from '../cat-notification/cat-notification';\n\n/**\n * Toast Component Demo\n *\n * @part toast - The content of the toast.\n */\n@Component({\n  tag: 'cat-toast-demo',\n  styleUrl: 'cat-toast-demo.scss'\n})\nexport class CatToastDemo {\n  render() {\n    return <cat-button onClick={this.onClick.bind(this)}>Show Notifications</cat-button>;\n  }\n\n  private onClick() {\n    const infoOptions: Partial<ToastOptions> = {\n      position: 'top-left',\n      type: 'info'\n    };\n    const errorOptions: Partial<ToastOptions> = {\n      position: 'top-center',\n      type: 'error'\n    };\n    const errorOptions2: Partial<ToastOptions> = {\n      position: 'bottom-left',\n      type: 'error'\n    };\n    const successOptions3: Partial<ToastOptions> = {\n      position: 'bottom-right',\n      type: 'success'\n    };\n    const template = document.createElement('template');\n    template.innerHTML = `<div style=\"padding: 7px 30px 7px 10px\">Custom HTML Node Content</div>`;\n    const successOptions4: Partial<ToastOptions> = {\n      position: 'bottom-right',\n      type: 'success',\n      content: template.content.firstChild as HTMLElement\n    };\n    const primaryOptions: Partial<ToastOptions> = {\n      position: 'bottom-right',\n      type: 'primary'\n    };\n\n    const secondaryOptions: Partial<ToastOptions> = {\n      position: 'bottom-right',\n      type: 'secondary'\n    };\n\n    NotificationsService.secondary('Secondary Click', 'secondary info', secondaryOptions);\n    NotificationsService.primary('primary Click', 'secondary info', primaryOptions);\n    NotificationsService.error('Default Click');\n    NotificationsService.error('Long default title, long default title, long default title, long default title');\n    NotificationsService.info('Info Click', 'Info message', infoOptions);\n    NotificationsService.success('', ' ', successOptions4);\n    NotificationsService.error('Error Title', ' ', errorOptions);\n    NotificationsService.error(\n      'Error 2 Title',\n      'Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message, Very long message,Very long message, Very long message, Very long message, Very long message, Very long message, ',\n      errorOptions2\n    );\n    NotificationsService.success('Success Title - very long title without message', ' ', successOptions3);\n  }\n}\n"]}

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

@@ -58,7 +58,7 @@ export class CatToggle {
   render() {
     return (h(Host, null,
       h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } },
-        h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
+        h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.value) : this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
         h("span", { class: "toggle", part: "toggle" }),
         h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)),
       this.hintSection));
@@ -68,7 +68,10 @@ export class CatToggle {
     return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onInput(event) {
-    this.value = this.input.value;
+    this.checked = this.input.checked;
+    if (!this.value || typeof this.value === 'boolean') {
+      this.value = this.checked;
+    }
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -88,7 +91,7 @@ export class CatToggle {
   static get properties() { return {
     "checked": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -194,11 +197,11 @@ export class CatToggle {
       "defaultValue": "false"
     },
     "value": {
-      "type": "string",
+      "type": "any",
       "mutable": true,
       "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
+        "original": "string | boolean",
+        "resolved": "boolean | string | undefined",
         "references": {}
       },
       "required": false,

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

@@ -1 +1 @@
-{"version":3,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;;;;;GAQG;AAMH,MAAM,OAAO,SAAS;EALtB;IAMmB,OAAE,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;IAK5C,oBAAe,GAAG,KAAK,CAAC;IAEjC;;OAEG;IACK,YAAO,GAAG,KAAK,CAAC;IAExB;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAEzB;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAEnB;;OAEG;IACK,gBAAW,GAAG,KAAK,CAAC;IAO5B;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAYzB;;OAEG;IACK,cAAS,GAAG,KAAK,CAAC;GAwF3B;EAvEC,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACxC,GAAG,CAAC,KAAK,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACxD;EACH,CAAC;EAED;;;;;KAKG;EAEH,KAAK,CAAC,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aACE,OAAO,EAAE,IAAI,CAAC,EAAE,EAChB,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;QAEpG,aACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAC9B;QACF,YAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ;QAC1C,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CAAC,IAAI,IAAI,CAAC,KAAK,CAC9D,CACD;MACP,IAAI,CAAC,WAAW,CACZ,CACR,CAAC;EACJ,CAAC;EAED,IAAY,WAAW;IACrB,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACzE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAC/B,EAAC,WAAW,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CAC3F,CACF,CAAC;EACJ,CAAC;EAEO,OAAO,CAAC,KAAY;IAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\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 toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly id = `cat-toggle-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the toggle 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 input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Sets focus on the toggle. Use this method instead of `toggle.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\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        >\n          <input\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.input.value;\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-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.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 * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\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 toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly id = `cat-toggle-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the toggle 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 input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle\n   */\n  @Prop({ mutable: true }) value?: string | boolean;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Sets focus on the toggle. Use this method instead of `toggle.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\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        >\n          <input\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value !== undefined ? String(this.value) : this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.checked = this.input.checked;\n\n    if (!this.value || typeof this.value === 'boolean') {\n      this.value = this.checked;\n    }\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/scss/core/_toast.scss

@@ -6,13 +6,16 @@ $-text-color: cat-token('color.base.neutral.900');
 $-title-border: cat-token('color.base.neutral.300');
 $-shadow: cat-token('color.ui.border.dark');
 $-error-color: cat-token('color.theme.danger.text');
-$-info-color: cat-token('color.theme.secondary.text');
+$-info-color: cat-token('color.base.orange.700');
 $-success-color: cat-token('color.theme.success.text');
+$-secondary-color: cat-token('color.base.neutral.900');
+$-primary-color: cat-token('color.base.brand.400');
 
 .cat-toastify {
   background: $-background-color;
   color: $-text-color;
   padding: 0;
+  border-radius: 0.5rem;
   @include cat-elevation(1);
 
   .toast-close {
@@ -31,12 +34,8 @@ $-success-color: cat-token('color.theme.success.text');
 
     .cat-toastify-icon-wrapper {
       position: absolute;
-      top: 6px;
-      left: 5px;
-
-      &.info {
-        color: $-info-color;
-      }
+      top: 1.1rem;
+      left: 1.125rem;
 
       &.error {
         color: $-error-color;
@@ -45,32 +44,43 @@ $-success-color: cat-token('color.theme.success.text');
       &.success {
         color: $-success-color;
       }
+
+      &.primary {
+        color: $-primary-color;
+      }
+
+      &.secondary {
+        color: $-secondary-color;
+      }
+
+      &.info {
+        color: $-info-color;
+      }
     }
 
     .cat-toastify-title-wrapper {
       width: 100%;
-      padding: 0.5rem 0.5rem 0.5rem 2rem;
+      padding: 1.2rem 1.2rem 1.2rem 3rem;
 
       &.has-message {
-        border-bottom: 1px solid $-title-border;
+        margin-bottom: -2.25rem;
       }
 
       .cat-toastify-title {
         width: 100%;
-        padding-right: 25px;
+        padding-right: 1.5rem;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         font-size: 15px;
         line-height: 20px;
-        font-weight: 600;
         color: $-text-color;
       }
     }
 
     .cat-toastify-message {
       width: 100%;
-      padding: 0.5rem;
+      padding: 1.5rem 1.5rem 1.5rem 3rem;
       color: $-text-color;
     }
   }

package/dist/components/cat-alert.js

@@ -1,22 +1,34 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './cat-icon2.js';
 
-const catAlertCss = ":host{display:block;margin-bottom:1rem}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host([hidden]){display:none}.alert{font:inherit;color:rgb(var(--text));background-color:rgba(var(--bg), 0.1);box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);border-radius:0.25rem;padding:0.75rem 1rem}::slotted(:last-child){margin-bottom:0 !important}.alert-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.alert-secondary{--bg:105, 118, 135;--text:0, 0, 0;--border:105, 118, 135}.alert-success{--bg:0, 132, 88;--text:0, 132, 88;--border:0, 132, 88}.alert-warning{--bg:255, 206, 128;--text:159, 97, 0;--border:159, 97, 0}.alert-danger{--bg:217, 52, 13;--text:217, 52, 13;--border:217, 52, 13}";
+const catAlertCss = ":host{display:block;margin-bottom:1rem}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host([hidden]){display:none}.alert{font:inherit;background-color:rgba(var(--bg), 0.1);border-radius:0.5rem;padding:1.25rem;display:flex;flex-direction:row;gap:0.5rem}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}.alert-primary{--bg:var(--cat-primary-bg, 32, 127, 138)}.alert-primary cat-icon{color:#207f8a}.alert-secondary{--bg:105, 118, 135}.alert-secondary cat-icon{color:#697687}.alert-success{--bg:0, 132, 88}.alert-success cat-icon{color:#008458}.alert-warning{--bg:255, 206, 128}.alert-warning cat-icon{color:#ebb663}.alert-danger{--bg:217, 52, 13}.alert-danger cat-icon{color:#d9340d}";
 
 const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.mapIcon = new Map([
+      ['primary', 'star-circle-filled'],
+      ['secondary', 'clock-filled'],
+      ['success', 'check-circle-filled'],
+      ['warning', 'danger-filled'],
+      ['danger', 'cross-circle-filled']
+    ]);
     /**
      * The color palette of the alert.
      */
     this.color = 'primary';
+    /**
+     * Whether the icon of the alert is deactivated.
+     */
+    this.noIcon = false;
   }
   render() {
     return (h(Host, { tabindex: "0", role: this.role }, h("div", { part: "alert", class: {
         alert: true,
         [`alert-${this.color}`]: Boolean(this.color)
-      } }, h("slot", null))));
+      } }, !this.noIcon && h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }), h("div", { class: "content" }, h("slot", null)))));
   }
   get role() {
     switch (this.color) {
@@ -29,19 +41,26 @@ const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   static get style() { return catAlertCss; }
 }, [1, "cat-alert", {
-    "color": [1]
+    "color": [1],
+    "icon": [1],
+    "noIcon": [4, "no-icon"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["cat-alert"];
+  const components = ["cat-alert", "cat-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "cat-alert":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, CatAlert$1);
       }
       break;
+    case "cat-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 

package/dist/components/cat-alert.js.map

@@ -1 +1 @@
-{"file":"cat-alert.js","mappings":";;AAAA,MAAM,WAAW,GAAG,q0BAAq0B;;MCa50BA,UAAQ;EALrB;;;;;;;IASU,UAAK,GAA+D,SAAS,CAAC;GA2BvF;EAzBC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAChC,WACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;OAC7C,IAED,eAAa,CACT,CACD,EACP;GACH;EAED,IAAY,IAAI;IACd,QAAQ,IAAI,CAAC,KAAK;MAChB,KAAK,QAAQ,CAAC;MACd,KAAK,SAAS;QACZ,OAAO,OAAO,CAAC;MACjB;QACE,OAAO,QAAQ,CAAC;KACnB;GACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["./src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","./src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.alert {\n  font: inherit;\n  color: cat-token-wrap(var(--text));\n  background-color: cat-token-wrap(var(--bg), $alpha: 0.1);\n  box-shadow: inset 0 0 0 1px cat-token-wrap(var(--border), $alpha: 0.2);\n  border-radius: cat-border-radius('m');\n  padding: 0.75rem 1rem;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  .alert-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --border: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --border: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n *\n * @part alert - The alert element.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  /**\n   * The color palette of the alert.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  render() {\n    return (\n      <Host tabindex=\"0\" role={this.role}>\n        <div\n          part=\"alert\"\n          class={{\n            alert: true,\n            [`alert-${this.color}`]: Boolean(this.color)\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get role() {\n    switch (this.color) {\n      case 'danger':\n      case 'warning':\n        return 'alert';\n      default:\n        return 'status';\n    }\n  }\n}\n"],"version":3}
+{"file":"cat-alert.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,mwBAAmwB;;MCa1wBA,UAAQ;EALrB;;;;IAMmB,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,cAAc,CAAC;MAC7B,CAAC,SAAS,EAAE,qBAAqB,CAAC;MAClC,CAAC,SAAS,EAAE,eAAe,CAAC;MAC5B,CAAC,QAAQ,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;;;;IAKK,UAAK,GAA+D,SAAS,CAAC;;;;IAU9E,WAAM,GAAG,KAAK,CAAC;GA8BxB;EA5BC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAChC,WACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;OAC7C,IAEA,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAC3G,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACF,CACD,EACP;GACH;EAED,IAAY,IAAI;IACd,QAAQ,IAAI,CAAC,KAAK;MAChB,KAAK,QAAQ,CAAC;MACd,KAAK,SAAS;QACZ,OAAO,OAAO,CAAC;MACjB;QACE,OAAO,QAAQ,CAAC;KACnB;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["./src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","./src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.alert {\n  font: inherit;\n  background-color: cat-token-wrap(var(--bg), $alpha: 0.1);\n  border-radius: cat-border-radius('l');\n  padding: 1.25rem;\n  display: flex;\n  flex-direction: row;\n  gap: 0.5rem;\n}\n\n.content {\n  align-self: center;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  .alert-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n\n    cat-icon {\n      color: cat-token('color.ui.font.alert.#{$theme}');\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n *\n * @part alert - The alert element.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', 'star-circle-filled'],\n    ['secondary', 'clock-filled'],\n    ['success', 'check-circle-filled'],\n    ['warning', 'danger-filled'],\n    ['danger', 'cross-circle-filled']\n  ]);\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  render() {\n    return (\n      <Host tabindex=\"0\" role={this.role}>\n        <div\n          part=\"alert\"\n          class={{\n            alert: true,\n            [`alert-${this.color}`]: Boolean(this.color)\n          }}\n        >\n          {!this.noIcon && <cat-icon size=\"l\" icon={this.icon ? this.icon : this.mapIcon.get(this.color)}></cat-icon>}\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  private get role() {\n    switch (this.color) {\n      case 'danger':\n      case 'warning':\n        return 'alert';\n      default:\n        return 'status';\n    }\n  }\n}\n"],"version":3}

package/dist/components/cat-checkbox.js

@@ -65,14 +65,17 @@ const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.input.focus(options);
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value !== undefined ? String(this.value) : this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onInput(event) {
-    this.value = this.input.value;
+    this.checked = this.input.checked;
+    if (!this.value || typeof this.value === 'boolean') {
+      this.value = this.checked;
+    }
     this.catChange.emit(event);
   }
   onFocus(event) {
@@ -84,14 +87,14 @@ const CatCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   get hostElement() { return this; }
   static get style() { return catCheckboxCss; }
 }, [1, "cat-checkbox", {
-    "checked": [4],
+    "checked": [1028],
     "disabled": [4],
     "indeterminate": [4],
     "label": [1],
     "labelHidden": [4, "label-hidden"],
     "name": [1],
     "required": [4],
-    "value": [1025],
+    "value": [1032],
     "hint": [1],
     "labelLeft": [4, "label-left"],
     "hasSlottedLabel": [32],

package/dist/components/cat-checkbox.js.map

@@ -1 +1 @@
-{"file":"cat-checkbox.js","mappings":"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","names":["CatCheckbox","log"],"sources":["./src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","./src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$checkbox-width: 1.25rem;\n$checkbox-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n  position: relative;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n\n  input {\n    right: 1px;\n    left: unset;\n  }\n}\n\ninput {\n  position: absolute;\n  width: $checkbox-width;\n  height: $checkbox-height;\n  margin: 0;\n  opacity: 0;\n  cursor: inherit;\n  left: 1px;\n  top: 0.5px;\n}\n\n.box {\n  flex: 0 0 auto;\n  display: flex;\n  position: relative;\n  height: $checkbox-height;\n  width: $checkbox-width;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.input');\n  border-radius: cat-border-radius(s);\n  transition: background-color cat-token('time.transition.s') ease, border-color cat-token('time.transition.s') ease;\n  pointer-events: none;\n\n  svg {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 16px;\n    stroke-dashoffset: 16px;\n    transition: all cat-token('time.transition.s') ease;\n    width: 70%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.99);\n  }\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .check {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :indeterminate + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .dash {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","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 * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @slot hint - Optional hint element to be displayed with the checkbox.\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 checkbox - The checkbox element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly id = `cat-checkbox-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop() checked = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop() indeterminate = false;\n\n  /**\n   * Label of the checkbox which is presented in the UI\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 input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the checkbox\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checkbox\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the checkbox.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the checkbox.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the checked status of the checkbox is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentDidLoad() {\n    if (this.input && this.indeterminate) {\n      this.input.indeterminate = true;\n    }\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on checkbox', this);\n    }\n  }\n\n  /**\n   * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\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        >\n          <input\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n            <svg class=\"check\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n            </svg>\n            <svg class=\"dash\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 5 10.5 5\"></polyline>\n            </svg>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.input.value;\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-checkbox.js","mappings":"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","names":["CatCheckbox","log"],"sources":["./src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","./src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$checkbox-width: 1.25rem;\n$checkbox-height: 1.25rem;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nlabel {\n  flex: 0 1 auto;\n  display: flex;\n  gap: 0.5rem;\n  @include cat-body('m');\n  @include cat-select(none);\n  cursor: pointer;\n  position: relative;\n}\n\n.label-left {\n  flex-direction: row-reverse;\n\n  input {\n    right: 1px;\n    left: unset;\n  }\n}\n\ninput {\n  position: absolute;\n  width: $checkbox-width;\n  height: $checkbox-height;\n  margin: 0;\n  opacity: 0;\n  cursor: inherit;\n  left: 1px;\n  top: 0.5px;\n}\n\n.box {\n  flex: 0 0 auto;\n  display: flex;\n  position: relative;\n  height: $checkbox-height;\n  width: $checkbox-width;\n  background-color: cat-token('color.ui.background.input');\n  border: 1px solid cat-token('color.ui.border.input');\n  border-radius: cat-border-radius(s);\n  transition: background-color cat-token('time.transition.s') ease, border-color cat-token('time.transition.s') ease;\n  pointer-events: none;\n\n  svg {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    stroke-dasharray: 16px;\n    stroke-dashoffset: 16px;\n    transition: all cat-token('time.transition.s') ease;\n    width: 70%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%) scale(0.99);\n  }\n\n  :checked + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .check {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :indeterminate + & {\n    background-color: cat-token('color.theme.primary.bg');\n    border-color: cat-token('color.theme.primary.bg');\n    stroke: cat-token('color.theme.primary.fill');\n\n    .dash {\n      stroke-dashoffset: 0;\n    }\n  }\n\n  :focus-visible + & {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.label {\n  flex: 1 1 auto;\n\n  .is-hidden & {\n    @include cat-visually-hidden;\n  }\n}\n\n.is-disabled {\n  cursor: not-allowed;\n  color: cat-token('color.ui.font.muted');\n}\n","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 * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @slot hint - Optional hint element to be displayed with the checkbox.\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 checkbox - The checkbox element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly id = `cat-checkbox-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop() indeterminate = false;\n\n  /**\n   * Label of the checkbox which is presented in the UI\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 input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the checkbox\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checkbox\n   */\n  @Prop({ mutable: true }) value?: string | boolean;\n\n  /**\n   * Optional hint text(s) to be displayed with the checkbox.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the checkbox.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the checked status of the checkbox is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentDidLoad() {\n    if (this.input && this.indeterminate) {\n      this.input.indeterminate = true;\n    }\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on checkbox', this);\n    }\n  }\n\n  /**\n   * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\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        >\n          <input\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value !== undefined ? String(this.value) : this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n            <svg class=\"check\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n            </svg>\n            <svg class=\"dash\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 5 10.5 5\"></polyline>\n            </svg>\n          </span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.checked = this.input.checked;\n\n    if (!this.value || typeof this.value === 'boolean') {\n      this.value = this.checked;\n    }\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}

package/dist/components/cat-input.js

@@ -89,7 +89,7 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         'input-disabled': this.disabled
       }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }), h("div", { class: "input-inner-wrapper" }, h("input", { ref: el => (this.input = el), id: this.id, class: {
         'has-clearable': this.clearable && !this.disabled
-      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.max, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.t('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hintSection));
+      }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": this.i18n.t('input.clear'), onClick: this.clear.bind(this) }))), this.icon && this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }), this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))), this.hintSection));
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -116,9 +116,9 @@ const CatInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "iconRight": [4, "icon-right"],
     "label": [1],
     "labelHidden": [4, "label-hidden"],
-    "max": [2],
+    "max": [8],
     "maxLength": [2, "max-length"],
-    "min": [2],
+    "min": [8],
     "minLength": [2, "min-length"],
     "name": [1],
     "placeholder": [1],

package/dist/components/cat-input.js.map

@@ -1 +1 @@
-{"file":"cat-input.js","mappings":"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","names":["CatInput","log"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  @include cat-body('m');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: 2.5rem;\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: 0 0 0 1px cat-token('color.ui.border.input');\n  transition: box-shadow cat-token('time.transition.s') linear;\n\n  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.inputDisabled');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled) {\n    &:hover {\n      box-shadow: 0 0 0 2px cat-token('color.ui.border.input');\n    }\n\n    &:focus-within {\n      outline: 2px solid cat-token('color.ui.border.focus');\n    }\n  }\n}\n\nlabel {\n  align-self: flex-start;\n\n  &.hidden {\n    @include cat-visually-hidden;\n  }\n}\n\n.input-optional {\n  margin-left: 0.25rem;\n  @include cat-body('xs');\n  color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.input');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.input');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: 1.5rem;\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - 1rem);\n  right: -0.5rem;\n}\n","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';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\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 * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly i18n = CatI18nRegistry.getInstance();\n  private readonly id = `cat-input-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * The label for the input.\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   * A maximum value for numeric values.\n   */\n  @Prop() max?: number;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for numeric values.\n   */\n  @Prop() min?: number;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name = '';\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' = 'text';\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string | number;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on input', this);\n    }\n  }\n\n  /**\n   * Sets focus on the input. Use this method instead of `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n  }\n\n  render() {\n    return (\n      <Host>\n        {(this.hasSlottedLabel || this.label) && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  ({this.i18n.t('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <div\n          class={{\n            'input-wrapper': true,\n            'input-round': this.round,\n            'input-disabled': this.disabled\n          }}\n          onClick={() => this.input.focus()}\n        >\n          {this.textPrefix && (\n            <span class=\"text-prefix\" part=\"prefix\">\n              {this.textPrefix}\n            </span>\n          )}\n          {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n          <div class=\"input-inner-wrapper\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              class={{\n                'has-clearable': this.clearable && !this.disabled\n              }}\n              autocomplete={this.autoComplete}\n              disabled={this.disabled}\n              max={this.max}\n              maxlength={this.maxLength}\n              min={this.max}\n              minlength={this.minLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readonly={this.readonly}\n              required={this.required}\n              type={this.type}\n              value={this.value}\n              onInput={this.onInput.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            ></input>\n            {this.clearable && !this.disabled && this.value && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"cross-circle-outlined\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={this.i18n.t('input.clear')}\n                onClick={this.clear.bind(this)}\n              ></cat-button>\n            )}\n          </div>\n          {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n          {this.textSuffix && (\n            <span class=\"text-suffix\" part=\"suffix\">\n              {this.textSuffix}\n            </span>\n          )}\n        </div>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.input.value;\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-input.js","mappings":"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","names":["CatInput","log"],"sources":["./src/components/cat-input/cat-input.scss?tag=cat-input&encapsulation=shadow","./src/components/cat-input/cat-input.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  @include cat-body('m');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.input-wrapper {\n  display: flex;\n  align-items: stretch;\n  gap: 0.75rem;\n  padding: 0 0.75rem;\n  height: 2.5rem;\n  overflow: hidden;\n  background: cat-token('color.ui.background.input');\n  border-radius: cat-border-radius('m');\n  box-shadow: 0 0 0 1px cat-token('color.ui.border.input');\n  transition: box-shadow cat-token('time.transition.s') linear;\n\n  &.input-round {\n    border-radius: 10rem;\n  }\n\n  &.input-disabled {\n    background: cat-token('color.ui.background.inputDisabled');\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &:not(.input-disabled) {\n    &:hover {\n      box-shadow: 0 0 0 2px cat-token('color.ui.border.input');\n    }\n\n    &:focus-within {\n      outline: 2px solid cat-token('color.ui.border.focus');\n    }\n  }\n}\n\nlabel {\n  align-self: flex-start;\n\n  &.hidden {\n    @include cat-visually-hidden;\n  }\n}\n\n.input-optional {\n  margin-left: 0.25rem;\n  @include cat-body('xs');\n  color: cat-token('color.ui.font.muted');\n}\n\n.text-prefix,\n.text-suffix {\n  display: inline-flex;\n  align-items: center;\n  @include cat-select(none);\n}\n\n.text-prefix {\n  border-right: 1px solid cat-token('color.ui.border.input');\n  padding-right: 0.75rem;\n}\n\n.text-suffix {\n  border-left: 1px solid cat-token('color.ui.border.input');\n  padding-left: 0.75rem;\n}\n\n.icon-prefix,\n.icon-suffix {\n  align-self: center;\n}\n\n.input-inner-wrapper {\n  display: flex;\n  position: relative;\n  flex: 1 1 auto;\n}\n\ninput {\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  min-width: 0;\n  border: none;\n  outline: none;\n  background: none;\n\n  .input-disabled & {\n    cursor: not-allowed;\n    color: cat-token('color.ui.font.muted');\n  }\n\n  &.has-clearable {\n    padding-right: 1.5rem;\n  }\n\n  &::placeholder {\n    color: cat-token('color.ui.font.muted');\n  }\n}\n\n.clearable {\n  position: absolute;\n  top: calc(50% - 1rem);\n  right: -0.5rem;\n}\n","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';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/**\n * Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n *\n * @slot hint - Optional hint element to be displayed with the input.\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 * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n */\n@Component({\n  tag: 'cat-input',\n  styleUrl: 'cat-input.scss',\n  shadow: true\n})\nexport class CatInput {\n  private readonly i18n = CatI18nRegistry.getInstance();\n  private readonly id = `cat-input-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Hint for form autofill feature.\n   */\n  @Prop() autoComplete?: string;\n\n  /**\n   * Whether the input should show a clear button.\n   */\n  @Prop() clearable = false;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Optional hint text(s) to be displayed with the input.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * The name of an icon to be displayed in the input.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * The label for the input.\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   * A maximum value for date, time and numeric values.\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * A maximum length (number of characters) for textual values.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * A minimum value for date, time and numeric values.\n   */\n  @Prop() min?: number | string;\n\n  /**\n   * A minimum length (number of characters) for textual values.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The name of the form control. Submitted with the form as part of a name/value pair.\n   */\n  @Prop() name = '';\n\n  /**\n   * The placeholder text to display within the input.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * A textual prefix to be displayed in the input.\n   */\n  @Prop() textPrefix?: string;\n\n  /**\n   * A textual suffix to be displayed in the input.\n   */\n  @Prop() textSuffix?: string;\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\n\n  /**\n   * Use round input edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Type of form control.\n   */\n  @Prop() type: InputType = 'text';\n\n  /**\n   * The value of the control.\n   */\n  @Prop({ mutable: true }) value?: string | number;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the input received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on input', this);\n    }\n  }\n\n  /**\n   * Sets focus on the input. Use this method instead of `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Clear the input.\n   */\n  @Method()\n  async clear(): Promise<void> {\n    this.value = '';\n  }\n\n  render() {\n    return (\n      <Host>\n        {(this.hasSlottedLabel || this.label) && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  ({this.i18n.t('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <div\n          class={{\n            'input-wrapper': true,\n            'input-round': this.round,\n            'input-disabled': this.disabled\n          }}\n          onClick={() => this.input.focus()}\n        >\n          {this.textPrefix && (\n            <span class=\"text-prefix\" part=\"prefix\">\n              {this.textPrefix}\n            </span>\n          )}\n          {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n          <div class=\"input-inner-wrapper\">\n            <input\n              ref={el => (this.input = el as HTMLInputElement)}\n              id={this.id}\n              class={{\n                'has-clearable': this.clearable && !this.disabled\n              }}\n              autocomplete={this.autoComplete}\n              disabled={this.disabled}\n              max={this.max}\n              maxlength={this.maxLength}\n              min={this.min}\n              minlength={this.minLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readonly={this.readonly}\n              required={this.required}\n              type={this.type}\n              value={this.value}\n              onInput={this.onInput.bind(this)}\n              onFocus={this.onFocus.bind(this)}\n              onBlur={this.onBlur.bind(this)}\n            ></input>\n            {this.clearable && !this.disabled && this.value && (\n              <cat-button\n                class=\"clearable\"\n                icon=\"cross-circle-outlined\"\n                icon-only=\"true\"\n                size=\"s\"\n                variant=\"text\"\n                a11y-label={this.i18n.t('input.clear')}\n                onClick={this.clear.bind(this)}\n              ></cat-button>\n            )}\n          </div>\n          {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n          {this.textSuffix && (\n            <span class=\"text-suffix\" part=\"suffix\">\n              {this.textSuffix}\n            </span>\n          )}\n        </div>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.input.value;\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}

package/dist/components/cat-tab.js

@@ -40,13 +40,13 @@ const CatTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get hostElement() { return this; }
   static get style() { return catTabCss; }
 }, [1, "cat-tab", {
-    "label": [1],
-    "icon": [1],
-    "iconOnly": [8, "icon-only"],
-    "iconRight": [4, "icon-right"],
-    "url": [1],
-    "urlTarget": [1, "url-target"],
-    "deactivated": [4]
+    "label": [513],
+    "icon": [513],
+    "iconOnly": [520, "icon-only"],
+    "iconRight": [516, "icon-right"],
+    "url": [513],
+    "urlTarget": [513, "url-target"],
+    "deactivated": [516]
   }, [[0, "click", "onClick"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {