@haiilo/catalyst 2.5.0 → 3.0.0

package/dist/esm/cat-modal.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-c2a28ebb.js';
 import { c as createFocusTrap, f as firstTabbable } from './first-tabbable-4a00de61.js';
 
-const catModalCss = ":host{display:block}:host([hidden]){display:none}.modal-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgb(rgb(var(--cat-bg-backdrop, 0, 0, 0)), var(--cat-opacity-backdrop, 0.6));z-index:2;display:flex}.modal-wrapper[aria-hidden=true]{display:none}.modal{margin:auto;z-index:2;position:relative;background-color:white;border-radius:var(--cat-border-radius-l, 0.5rem);max-width:100%;padding:32px}.modal-header{display:flex;justify-content:end;align-self:stretch}.modal-header .close-button::part(button){box-shadow:unset}.modal-content{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;margin:16px 0}.modal-s{width:400px}.modal-m{width:600px}.modal-l{width:800px}";
+const catModalCss = ":host{display:block}:host([hidden]){display:none}.modal-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgb(rgb(var(--cat-bg-backdrop, 27, 31, 38)), var(--cat-opacity-backdrop, 0.4));z-index:2;display:flex}.modal-wrapper[aria-hidden=true]{display:none}.modal{margin:auto;z-index:2;position:relative;background-color:white;border-radius:var(--cat-border-radius-l, 0.5rem);max-width:100%;padding:32px}.modal-header{display:flex;justify-content:end;align-self:stretch}.modal-header .close-button::part(button){box-shadow:unset}.modal-content{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;margin:16px 0}.modal-s{width:400px}.modal-m{width:600px}.modal-l{width:800px}";
 
 const CatModal = class {
   constructor(hostRef) {

package/dist/esm/cat-modal.entry.js.map

@@ -1 +1 @@
-{"file":"cat-modal.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,0sBAA0sB;;MCSjtB,QAAQ;EALrB;;IAYW,cAAS,GAAG,KAAK,CAAC;;;;IAKnB,SAAI,GAAoB,GAAG,CAAC;GA2ErC;EAzEC,gBAAgB;IACd,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,IAAI,GAAGA,eAAyB,CAAC,IAAI,CAAC,KAAK,EAAE;QAChD,eAAe,EAAE;UACf,aAAa,EAAE,IAAI;SACpB;QACD,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;QAC7C,iBAAiB,EAAE,IAAI;QACvB,uBAAuB,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;QAC3F,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAC5C,cAAc,EAAE,qBAAqB,IACnC,qBAAqB,YAAY,WAAW;YACvC,aAAa,CAAC,qBAAqB,CAAiB;YACrD,qBAAqB;OAC5B,CAAC,CAAC;KACJ;GACF;EAED,kBAAkB;;IAChB,IAAI,IAAI,CAAC,SAAS;MAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,EAAE,CAAC;IAC1C,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC5C;;;;EAMD,MAAM,IAAI;IACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAED,MAAM;IACJ,QACE,+BAAgB,IAAI,EAAC,QAAQ,iBAAc,CAAC,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,OAAO,EAAE,KAAK,EAAC,eAAe,IAClG,WAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IACnG,WAAK,KAAK,EAAC,cAAc,IACvB,kBACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,GAAG,EACR,QAAQ,QACR,SAAS,EAAC,OAAO,EACjB,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GACvB,CACV,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,eAAa,CACT,CACF,CACF,EACN;GACH;EAEO,OAAO;;IACb,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,EAAE,CAAC;GACzB;EAEO,mBAAmB,CAAC,OAAoB;IAC9C,IAAI,OAAO,CAAC,aAAa,EAAE;MACzB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,cAAc;QAC/D,IAAI,cAAc,KAAK,OAAO,EAAE;UAC9B,IAAI,CAAC,SAAS;cACV,cAAc,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;cAClD,cAAc,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACnD;OACF,CAAC,CAAC;MAEH,IAAI,OAAO,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,EAAE;QAC3C,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;OACjD;KACF;GACF;;;;;;;","names":["focusTrap.createFocusTrap"],"sources":["./src/components/cat-modal/cat-modal.scss?tag=cat-modal&encapsulation=shadow","./src/components/cat-modal/cat-modal.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.modal-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgb(cat-token('color.ui.background.backdrop'), cat-token('opacity.backdrop'));\n  z-index: 2;\n  display: flex;\n\n  &[aria-hidden='true'] {\n    display: none;\n  }\n}\n\n.modal {\n  margin: auto;\n  z-index: 2;\n  position: relative;\n  background-color: cat-token('color.ui.background.body');\n  border-radius: cat-border-radius('l');\n  max-width: 100%;\n  padding: 32px;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: end;\n  align-self: stretch;\n\n  .close-button::part(button) {\n    box-shadow: unset;\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n  margin: 16px 0;\n}\n\n@mixin size($size) {\n  .modal-#{$size} {\n    width: cat-token('size.modal.#{$size}');\n  }\n}\n\n@include size('s');\n@include size('m');\n@include size('l');\n","import { Component, Element, h, Method, Prop, State } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport firstTabbable from '../../utils/first-tabbable';\n\n@Component({\n  tag: 'cat-modal',\n  styleUrl: 'cat-modal.scss',\n  shadow: true\n})\nexport class CatModal {\n  private trap?: focusTrap.FocusTrap;\n  private modal?: HTMLElement;\n  private closeButton?: HTMLElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() isVisible = false;\n\n  /**\n   * The size of the modal.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  componentDidLoad(): void {\n    if (this.modal) {\n      this.trap = focusTrap.createFocusTrap(this.modal, {\n        tabbableOptions: {\n          getShadowRoot: true\n        },\n        initialFocus: firstTabbable(this.closeButton),\n        allowOutsideClick: true,\n        clickOutsideDeactivates: event => !this.modal || !event.composedPath().includes(this.modal),\n        onDeactivate: () => (this.isVisible = false),\n        setReturnFocus: previousActiveElement =>\n          previousActiveElement instanceof HTMLElement\n            ? (firstTabbable(previousActiveElement) as HTMLElement)\n            : previousActiveElement\n      });\n    }\n  }\n\n  componentDidUpdate(): void {\n    if (this.isVisible) this.trap?.activate();\n    this.updateAccessibility(this.hostElement);\n  }\n\n  /**\n   * Shows the modal.\n   */\n  @Method()\n  async show(): Promise<void> {\n    this.isVisible = true;\n  }\n\n  render() {\n    return (\n      <div aria-modal role=\"dialog\" aria-hidden={!this.isVisible ? 'true' : 'false'} class=\"modal-wrapper\">\n        <div ref={el => (this.modal = el)} class={{ modal: true, [`modal-${this.size}`]: Boolean(this.size) }}>\n          <div class=\"modal-header\">\n            <cat-button\n              ref={el => (this.closeButton = el)}\n              icon=\"cross-outlined\"\n              class=\"close-button\"\n              size=\"s\"\n              iconOnly\n              a11yLabel=\"close\"\n              onCatClick={this.onClick.bind(this)}\n            ></cat-button>\n          </div>\n          <div class=\"modal-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private onClick() {\n    this.trap?.deactivate();\n  }\n\n  private updateAccessibility(element: HTMLElement) {\n    if (element.parentElement) {\n      Array.from(element.parentElement.children).forEach(elementSibling => {\n        if (elementSibling !== element) {\n          this.isVisible\n            ? elementSibling.setAttribute('aria-hidden', 'true')\n            : elementSibling.removeAttribute('aria-hidden');\n        }\n      });\n\n      if (element.parentElement !== document.body) {\n        this.updateAccessibility(element.parentElement);\n      }\n    }\n  }\n}\n"],"version":3}
+{"file":"cat-modal.entry.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,6sBAA6sB;;MCSptB,QAAQ;EALrB;;IAYW,cAAS,GAAG,KAAK,CAAC;;;;IAKnB,SAAI,GAAoB,GAAG,CAAC;GA2ErC;EAzEC,gBAAgB;IACd,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,IAAI,GAAGA,eAAyB,CAAC,IAAI,CAAC,KAAK,EAAE;QAChD,eAAe,EAAE;UACf,aAAa,EAAE,IAAI;SACpB;QACD,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;QAC7C,iBAAiB,EAAE,IAAI;QACvB,uBAAuB,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;QAC3F,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAC5C,cAAc,EAAE,qBAAqB,IACnC,qBAAqB,YAAY,WAAW;YACvC,aAAa,CAAC,qBAAqB,CAAiB;YACrD,qBAAqB;OAC5B,CAAC,CAAC;KACJ;GACF;EAED,kBAAkB;;IAChB,IAAI,IAAI,CAAC,SAAS;MAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,EAAE,CAAC;IAC1C,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC5C;;;;EAMD,MAAM,IAAI;IACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAED,MAAM;IACJ,QACE,+BAAgB,IAAI,EAAC,QAAQ,iBAAc,CAAC,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,OAAO,EAAE,KAAK,EAAC,eAAe,IAClG,WAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IACnG,WAAK,KAAK,EAAC,cAAc,IACvB,kBACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,GAAG,EACR,QAAQ,QACR,SAAS,EAAC,OAAO,EACjB,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GACvB,CACV,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,eAAa,CACT,CACF,CACF,EACN;GACH;EAEO,OAAO;;IACb,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,EAAE,CAAC;GACzB;EAEO,mBAAmB,CAAC,OAAoB;IAC9C,IAAI,OAAO,CAAC,aAAa,EAAE;MACzB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,cAAc;QAC/D,IAAI,cAAc,KAAK,OAAO,EAAE;UAC9B,IAAI,CAAC,SAAS;cACV,cAAc,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;cAClD,cAAc,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACnD;OACF,CAAC,CAAC;MAEH,IAAI,OAAO,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,EAAE;QAC3C,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;OACjD;KACF;GACF;;;;;;;","names":["focusTrap.createFocusTrap"],"sources":["./src/components/cat-modal/cat-modal.scss?tag=cat-modal&encapsulation=shadow","./src/components/cat-modal/cat-modal.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.modal-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgb(cat-token('color.ui.background.backdrop'), cat-token('opacity.backdrop'));\n  z-index: 2;\n  display: flex;\n\n  &[aria-hidden='true'] {\n    display: none;\n  }\n}\n\n.modal {\n  margin: auto;\n  z-index: 2;\n  position: relative;\n  background-color: cat-token('color.ui.background.body');\n  border-radius: cat-border-radius('l');\n  max-width: 100%;\n  padding: 32px;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: end;\n  align-self: stretch;\n\n  .close-button::part(button) {\n    box-shadow: unset;\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n  margin: 16px 0;\n}\n\n@mixin size($size) {\n  .modal-#{$size} {\n    width: cat-token('size.modal.#{$size}');\n  }\n}\n\n@include size('s');\n@include size('m');\n@include size('l');\n","import { Component, Element, h, Method, Prop, State } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport firstTabbable from '../../utils/first-tabbable';\n\n@Component({\n  tag: 'cat-modal',\n  styleUrl: 'cat-modal.scss',\n  shadow: true\n})\nexport class CatModal {\n  private trap?: focusTrap.FocusTrap;\n  private modal?: HTMLElement;\n  private closeButton?: HTMLElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() isVisible = false;\n\n  /**\n   * The size of the modal.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  componentDidLoad(): void {\n    if (this.modal) {\n      this.trap = focusTrap.createFocusTrap(this.modal, {\n        tabbableOptions: {\n          getShadowRoot: true\n        },\n        initialFocus: firstTabbable(this.closeButton),\n        allowOutsideClick: true,\n        clickOutsideDeactivates: event => !this.modal || !event.composedPath().includes(this.modal),\n        onDeactivate: () => (this.isVisible = false),\n        setReturnFocus: previousActiveElement =>\n          previousActiveElement instanceof HTMLElement\n            ? (firstTabbable(previousActiveElement) as HTMLElement)\n            : previousActiveElement\n      });\n    }\n  }\n\n  componentDidUpdate(): void {\n    if (this.isVisible) this.trap?.activate();\n    this.updateAccessibility(this.hostElement);\n  }\n\n  /**\n   * Shows the modal.\n   */\n  @Method()\n  async show(): Promise<void> {\n    this.isVisible = true;\n  }\n\n  render() {\n    return (\n      <div aria-modal role=\"dialog\" aria-hidden={!this.isVisible ? 'true' : 'false'} class=\"modal-wrapper\">\n        <div ref={el => (this.modal = el)} class={{ modal: true, [`modal-${this.size}`]: Boolean(this.size) }}>\n          <div class=\"modal-header\">\n            <cat-button\n              ref={el => (this.closeButton = el)}\n              icon=\"cross-outlined\"\n              class=\"close-button\"\n              size=\"s\"\n              iconOnly\n              a11yLabel=\"close\"\n              onCatClick={this.onClick.bind(this)}\n            ></cat-button>\n          </div>\n          <div class=\"modal-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private onClick() {\n    this.trap?.deactivate();\n  }\n\n  private updateAccessibility(element: HTMLElement) {\n    if (element.parentElement) {\n      Array.from(element.parentElement.children).forEach(elementSibling => {\n        if (elementSibling !== element) {\n          this.isVisible\n            ? elementSibling.setAttribute('aria-hidden', 'true')\n            : elementSibling.removeAttribute('aria-hidden');\n        }\n      });\n\n      if (element.parentElement !== document.body) {\n        this.updateAccessibility(element.parentElement);\n      }\n    }\n  }\n}\n"],"version":3}

package/dist/esm/catalyst.js

@@ -13,7 +13,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["cat-alert_24",[[1,"cat-select-demo"],[1,"cat-input",{"requiredMarker":[1,"required-marker"],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64],"clear":[64]}],[1,"cat-pagination",{"page":[1026],"pageCount":[2,"page-count"],"activePadding":[2,"active-padding"],"sidePadding":[2,"side-padding"],"size":[1],"variant":[1],"round":[4],"compact":[4],"iconPrev":[1,"icon-prev"],"iconNext":[1,"icon-next"]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[1,"cat-alert",{"color":[513],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-badge",{"variant":[513],"color":[513],"size":[513],"round":[516],"pulse":[516]}],[1,"cat-card"],[1,"cat-form-group",{"requiredMarker":[1,"required-marker"]}],[1,"cat-label",{"requiredMarker":[1,"required-marker"],"for":[1],"required":[4]}],[1,"cat-radio",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"requiredMarker":[1,"required-marker"],"disabled":[4],"hint":[1],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"requiredMarker":[1,"required-marker"],"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"noItems":[1,"no-items"],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"identifier":[1],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"_iconOnly":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-modal",[[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}]]]], options);
+  return bootstrapLazy([["cat-alert_24",[[1,"cat-select-demo"],[1,"cat-input",{"requiredMarker":[1,"required-marker"],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64],"clear":[64]}],[1,"cat-pagination",{"page":[1026],"pageCount":[2,"page-count"],"activePadding":[2,"active-padding"],"sidePadding":[2,"side-padding"],"size":[1],"variant":[1],"round":[4],"compact":[4],"iconPrev":[1,"icon-prev"],"iconNext":[1,"icon-next"]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[1,"cat-alert",{"color":[513],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-badge",{"variant":[513],"color":[513],"size":[513],"round":[516],"pulse":[516]}],[1,"cat-card"],[1,"cat-form-group",{"requiredMarker":[1,"required-marker"]}],[1,"cat-label",{"requiredMarker":[1,"required-marker"],"for":[1],"required":[4]}],[1,"cat-radio",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"requiredMarker":[1,"required-marker"],"disabled":[4],"hint":[1],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"requiredMarker":[1,"required-marker"],"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"noItems":[1,"no-items"],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"identifier":[1],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconSrc":[1,"icon-src"],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"_iconOnly":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"iconSrc":[1,"icon-src"],"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-modal",[[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}]]]], options);
 });
 
 //# sourceMappingURL=catalyst.js.map

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["cat-alert_24",[[1,"cat-select-demo"],[1,"cat-input",{"requiredMarker":[1,"required-marker"],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64],"clear":[64]}],[1,"cat-pagination",{"page":[1026],"pageCount":[2,"page-count"],"activePadding":[2,"active-padding"],"sidePadding":[2,"side-padding"],"size":[1],"variant":[1],"round":[4],"compact":[4],"iconPrev":[1,"icon-prev"],"iconNext":[1,"icon-next"]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[1,"cat-alert",{"color":[513],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-badge",{"variant":[513],"color":[513],"size":[513],"round":[516],"pulse":[516]}],[1,"cat-card"],[1,"cat-form-group",{"requiredMarker":[1,"required-marker"]}],[1,"cat-label",{"requiredMarker":[1,"required-marker"],"for":[1],"required":[4]}],[1,"cat-radio",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"requiredMarker":[1,"required-marker"],"disabled":[4],"hint":[1],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"requiredMarker":[1,"required-marker"],"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"noItems":[1,"no-items"],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"identifier":[1],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"_iconOnly":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-modal",[[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}]]]], options);
+  return bootstrapLazy([["cat-alert_24",[[1,"cat-select-demo"],[1,"cat-input",{"requiredMarker":[1,"required-marker"],"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64],"clear":[64]}],[1,"cat-pagination",{"page":[1026],"pageCount":[2,"page-count"],"activePadding":[2,"active-padding"],"sidePadding":[2,"side-padding"],"size":[1],"variant":[1],"round":[4],"compact":[4],"iconPrev":[1,"icon-prev"],"iconNext":[1,"icon-next"]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[1,"cat-alert",{"color":[513],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-badge",{"variant":[513],"color":[513],"size":[513],"round":[516],"pulse":[516]}],[1,"cat-card"],[1,"cat-form-group",{"requiredMarker":[1,"required-marker"]}],[1,"cat-label",{"requiredMarker":[1,"required-marker"],"for":[1],"required":[4]}],[1,"cat-radio",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"requiredMarker":[1,"required-marker"],"disabled":[4],"hint":[1],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"round":[4],"size":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select",{"requiredMarker":[1,"required-marker"],"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"identifier":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"tags":[4],"tagHint":[1,"tag-hint"],"noItems":[1,"no-items"],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-dropdown",{"placement":[1],"noAutoClose":[4,"no-auto-close"],"overflow":[4],"close":[64]},[[0,"catClick","clickHandler"]]],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"identifier":[1],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconSrc":[1,"icon-src"],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"a11yCurrent":[1,"a11y-current"],"_iconOnly":[32],"doFocus":[64],"doBlur":[64],"doClick":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"iconSrc":[1,"icon-src"],"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-modal",[[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}]]]], options);
   });
 };
 

package/dist/types/components/cat-button/cat-button.d.ts

@@ -78,6 +78,11 @@ export declare class CatButton {
    * The name of an icon to be displayed in the button.
    */
   icon?: string;
+  /**
+   * The SVG source of an icon to be displayed in the button. This takes
+   * precenedence over the `icon` name.
+   */
+  iconSrc?: string;
   /**
    * Hide the actual button content and only display the icon.
    */

package/dist/types/components/cat-icon/cat-icon.d.ts

@@ -8,7 +8,11 @@ export declare class CatIcon {
   /**
    * The name of the icon.
    */
-  icon: string;
+  icon?: string;
+  /**
+   * The SVG source of the icon. This takes precenedence over the `icon` name.
+   */
+  iconSrc?: string;
   /**
    * The size of the icon.
    */

package/dist/types/components.d.ts

@@ -131,6 +131,10 @@ export namespace Components {
           * Display the icon on the right.
          */
         "iconRight": boolean;
+        /**
+          * The SVG source of an icon to be displayed in the button. This takes precenedence over the `icon` name.
+         */
+        "iconSrc"?: string;
         /**
           * Displays the button in a loading state with a spinner. Just like a disabled button, an inactive button is unusable and un-clickable. However, it retains the current focus state.
          */
@@ -265,7 +269,11 @@ export namespace Components {
         /**
           * The name of the icon.
          */
-        "icon": string;
+        "icon"?: string;
+        /**
+          * The SVG source of the icon. This takes precenedence over the `icon` name.
+         */
+        "iconSrc"?: string;
         /**
           * The size of the icon.
          */
@@ -1192,6 +1200,10 @@ declare namespace LocalJSX {
           * Display the icon on the right.
          */
         "iconRight"?: boolean;
+        /**
+          * The SVG source of an icon to be displayed in the button. This takes precenedence over the `icon` name.
+         */
+        "iconSrc"?: string;
         /**
           * Displays the button in a loading state with a spinner. Just like a disabled button, an inactive button is unusable and un-clickable. However, it retains the current focus state.
          */
@@ -1342,6 +1354,10 @@ declare namespace LocalJSX {
           * The name of the icon.
          */
         "icon"?: string;
+        /**
+          * The SVG source of the icon. This takes precenedence over the `icon` name.
+         */
+        "iconSrc"?: string;
         /**
           * The size of the icon.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "2.5.0",
+  "version": "3.0.0",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.0.3",
-    "@haiilo/catalyst-tokens": "2.5.0",
+    "@haiilo/catalyst-tokens": "3.0.0",
     "@stencil/core": "2.17.4",
     "autosize": "5.0.1",
     "autosize-input": "1.0.2",