@haiilo/catalyst 2.4.9 → 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_23",[[1,"cat-select-demo"],[1,"cat-input",{"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-label",{"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",{"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",{"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"],"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_23",[[1,"cat-select-demo"],[1,"cat-input",{"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-label",{"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",{"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",{"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"],"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-form-group/cat-form-group.d.ts

@@ -0,0 +1,16 @@
+export declare class CatFormGroup {
+  private formElements;
+  hostElement: HTMLElement;
+  /**
+   * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />
+   * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />
+   * - If there are more required, the optional will be marked.<br />
+   * - If there are less required, it will mark the required.<br /><br />
+   * If a form field had "!", the requiredMarked of the field would not change.
+   */
+  requiredMarker: 'none' | 'required' | 'optional' | 'auto';
+  onRequiredMarker(newRequiredMarker: 'none' | 'required' | 'optional' | 'auto'): void;
+  render(): any;
+  private onSlotChange;
+  private calculate;
+}

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/cat-input/cat-input.d.ts

@@ -17,6 +17,10 @@ export declare class CatInput {
   private input;
   hostElement: HTMLElement;
   hasSlottedLabel: boolean;
+  /**
+   * Whether the label need a marker to shown if the input is required or optional.
+   */
+  requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
   /**
    * Hint for form autofill feature.
    */

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

@@ -3,6 +3,10 @@
  */
 export declare class CatLabel {
   private static readonly SHADOW_TARGETS;
+  /**
+   * Whether the label need a marker to shown if the input is required or optional.
+   */
+  requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
   /**
    * The unique identifier for a referenced input.
    */

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

@@ -79,6 +79,10 @@ export declare class CatSelect {
   connector?: CatSelectConnector;
   state: CatSelectState;
   hasSlottedLabel: boolean;
+  /**
+   * Whether the label need a marker to shown if the select is required or optional.
+   */
+  requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
   /**
    * Enable multiple selection.
    */
@@ -92,11 +96,11 @@ export declare class CatSelect {
    */
   placement: Placement;
   /**
-   * The value of the select.
-   *
-   * The value of the select depends on whether it is allowed to choose a single item or several items.
-   * When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items.
-   *
+   * The value of the select. <br />
+   * <br />
+   * The value of the select depends on whether it is allowed to choose a single item or several items. <br />
+   * When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br />
+   * <br />
    * In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item,
    * in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created
    */
@@ -145,6 +149,10 @@ export declare class CatSelect {
    * Optional hint text to be displayed on the new item to be added.
    */
   tagHint?: string;
+  /**
+   * The text to display in the dropdown if no results are found.
+   */
+  noItems?: string;
   onConnectorChange(connector: CatSelectConnector): void;
   onValueChange(): void;
   onStateChange(newState: CatSelectState, oldState: CatSelectState): void;

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

@@ -14,6 +14,10 @@ export declare class CatTextarea {
   private textarea;
   hostElement: HTMLElement;
   hasSlottedLabel: boolean;
+  /**
+   * Whether the label need a marker to shown if the textarea is required or optional.
+   */
+  requiredMarker: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
   /**
    * Whether the textarea is disabled.
    */

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.
          */
@@ -251,6 +255,12 @@ export namespace Components {
          */
         "placement": Placement;
     }
+    interface CatFormGroup {
+        /**
+          * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br /> By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br /> - If there are more required, the optional will be marked.<br /> - If there are less required, it will mark the required.<br /><br /> If a form field had "!", the requiredMarked of the field would not change.
+         */
+        "requiredMarker": 'none' | 'required' | 'optional' | 'auto';
+    }
     interface CatIcon {
         /**
           * Adds accessible label for the icon that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
@@ -259,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.
          */
@@ -351,6 +365,10 @@ export namespace Components {
           * A value is required or must be check for the form to be submittable.
          */
         "required": boolean;
+        /**
+          * Whether the label need a marker to shown if the input is required or optional.
+         */
+        "requiredMarker": 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
         /**
           * Use round input edges.
          */
@@ -381,6 +399,10 @@ export namespace Components {
           * A value is required or must be check for the form to be submittable.
          */
         "required": boolean;
+        /**
+          * Whether the label need a marker to shown if the input is required or optional.
+         */
+        "requiredMarker": 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
     }
     interface CatModal {
         /**
@@ -583,6 +605,10 @@ export namespace Components {
           * The name of the form control. Submitted with the form as part of a name/value pair.
          */
         "name"?: string;
+        /**
+          * The text to display in the dropdown if no results are found.
+         */
+        "noItems"?: string;
         /**
           * The placeholder text to display within the select.
          */
@@ -595,6 +621,10 @@ export namespace Components {
           * A value is required or must be checked for the form to be submittable.
          */
         "required": boolean;
+        /**
+          * Whether the label need a marker to shown if the select is required or optional.
+         */
+        "requiredMarker": 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
         /**
           * Optional hint text to be displayed on the new item to be added.
          */
@@ -604,7 +634,7 @@ export namespace Components {
          */
         "tags": boolean;
         /**
-          * The value of the select.  The value of the select depends on whether it is allowed to choose a single item or several items. When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items.  In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item, in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created
+          * The value of the select. <br /> <br /> The value of the select depends on whether it is allowed to choose a single item or several items. <br /> When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br /> <br /> In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item, in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created
          */
         "value"?: string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue;
     }
@@ -736,6 +766,10 @@ export namespace Components {
           * A value is required or must be check for the form to be submittable.
          */
         "required": boolean;
+        /**
+          * Whether the label need a marker to shown if the textarea is required or optional.
+         */
+        "requiredMarker": 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
         /**
           * Specifies the initial number of lines in the textarea.
          */
@@ -922,6 +956,12 @@ declare global {
         prototype: HTMLCatDropdownElement;
         new (): HTMLCatDropdownElement;
     };
+    interface HTMLCatFormGroupElement extends Components.CatFormGroup, HTMLStencilElement {
+    }
+    var HTMLCatFormGroupElement: {
+        prototype: HTMLCatFormGroupElement;
+        new (): HTMLCatFormGroupElement;
+    };
     interface HTMLCatIconElement extends Components.CatIcon, HTMLStencilElement {
     }
     var HTMLCatIconElement: {
@@ -1032,6 +1072,7 @@ declare global {
         "cat-card": HTMLCatCardElement;
         "cat-checkbox": HTMLCatCheckboxElement;
         "cat-dropdown": HTMLCatDropdownElement;
+        "cat-form-group": HTMLCatFormGroupElement;
         "cat-icon": HTMLCatIconElement;
         "cat-input": HTMLCatInputElement;
         "cat-label": HTMLCatLabelElement;
@@ -1159,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.
          */
@@ -1294,6 +1339,12 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
     }
+    interface CatFormGroup {
+        /**
+          * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br /> By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br /> - If there are more required, the optional will be marked.<br /> - If there are less required, it will mark the required.<br /><br /> If a form field had "!", the requiredMarked of the field would not change.
+         */
+        "requiredMarker"?: 'none' | 'required' | 'optional' | 'auto';
+    }
     interface CatIcon {
         /**
           * Adds accessible label for the icon that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
@@ -1303,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.
          */
@@ -1389,6 +1444,10 @@ declare namespace LocalJSX {
           * A value is required or must be check for the form to be submittable.
          */
         "required"?: boolean;
+        /**
+          * Whether the label need a marker to shown if the input is required or optional.
+         */
+        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
         /**
           * Use round input edges.
          */
@@ -1419,6 +1478,10 @@ declare namespace LocalJSX {
           * A value is required or must be check for the form to be submittable.
          */
         "required"?: boolean;
+        /**
+          * Whether the label need a marker to shown if the input is required or optional.
+         */
+        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
     }
     interface CatModal {
         /**
@@ -1635,6 +1698,10 @@ declare namespace LocalJSX {
           * The name of the form control. Submitted with the form as part of a name/value pair.
          */
         "name"?: string;
+        /**
+          * The text to display in the dropdown if no results are found.
+         */
+        "noItems"?: string;
         /**
           * Emitted when the select loses the focus.
          */
@@ -1663,6 +1730,10 @@ declare namespace LocalJSX {
           * A value is required or must be checked for the form to be submittable.
          */
         "required"?: boolean;
+        /**
+          * Whether the label need a marker to shown if the select is required or optional.
+         */
+        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
         /**
           * Optional hint text to be displayed on the new item to be added.
          */
@@ -1672,7 +1743,7 @@ declare namespace LocalJSX {
          */
         "tags"?: boolean;
         /**
-          * The value of the select.  The value of the select depends on whether it is allowed to choose a single item or several items. When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items.  In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item, in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created
+          * The value of the select. <br /> <br /> The value of the select depends on whether it is allowed to choose a single item or several items. <br /> When only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items. <br /> <br /> In case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item, in the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created
          */
         "value"?: string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue;
     }
@@ -1807,6 +1878,10 @@ declare namespace LocalJSX {
           * A value is required or must be check for the form to be submittable.
          */
         "required"?: boolean;
+        /**
+          * Whether the label need a marker to shown if the textarea is required or optional.
+         */
+        "requiredMarker"?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!';
         /**
           * Specifies the initial number of lines in the textarea.
          */
@@ -1912,6 +1987,7 @@ declare namespace LocalJSX {
         "cat-card": CatCard;
         "cat-checkbox": CatCheckbox;
         "cat-dropdown": CatDropdown;
+        "cat-form-group": CatFormGroup;
         "cat-icon": CatIcon;
         "cat-input": CatInput;
         "cat-label": CatLabel;
@@ -1942,6 +2018,7 @@ declare module "@stencil/core" {
             "cat-card": LocalJSX.CatCard & JSXBase.HTMLAttributes<HTMLCatCardElement>;
             "cat-checkbox": LocalJSX.CatCheckbox & JSXBase.HTMLAttributes<HTMLCatCheckboxElement>;
             "cat-dropdown": LocalJSX.CatDropdown & JSXBase.HTMLAttributes<HTMLCatDropdownElement>;
+            "cat-form-group": LocalJSX.CatFormGroup & JSXBase.HTMLAttributes<HTMLCatFormGroupElement>;
             "cat-icon": LocalJSX.CatIcon & JSXBase.HTMLAttributes<HTMLCatIconElement>;
             "cat-input": LocalJSX.CatInput & JSXBase.HTMLAttributes<HTMLCatInputElement>;
             "cat-label": LocalJSX.CatLabel & JSXBase.HTMLAttributes<HTMLCatLabelElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "2.4.9",
+  "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.4.9",
+    "@haiilo/catalyst-tokens": "3.0.0",
     "@stencil/core": "2.17.4",
     "autosize": "5.0.1",
     "autosize-input": "1.0.2",

package/dist/catalyst/p-5bfc70e3.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,g as a}from"./p-53a1db22.js";import{c as o,f as s}from"./p-60a20ebe.js";const e=":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 d=class{constructor(i){t(this,i);this.isVisible=false;this.size="m"}componentDidLoad(){if(this.modal){this.trap=o(this.modal,{tabbableOptions:{getShadowRoot:true},initialFocus:s(this.closeButton),allowOutsideClick:true,clickOutsideDeactivates:t=>!this.modal||!t.composedPath().includes(this.modal),onDeactivate:()=>this.isVisible=false,setReturnFocus:t=>t instanceof HTMLElement?s(t):t})}}componentDidUpdate(){var t;if(this.isVisible)(t=this.trap)===null||t===void 0?void 0:t.activate();this.updateAccessibility(this.hostElement)}async show(){this.isVisible=true}render(){return i("div",{"aria-modal":true,role:"dialog","aria-hidden":!this.isVisible?"true":"false",class:"modal-wrapper"},i("div",{ref:t=>this.modal=t,class:{modal:true,[`modal-${this.size}`]:Boolean(this.size)}},i("div",{class:"modal-header"},i("cat-button",{ref:t=>this.closeButton=t,icon:"cross-outlined",class:"close-button",size:"s",iconOnly:true,a11yLabel:"close",onCatClick:this.onClick.bind(this)})),i("div",{class:"modal-content"},i("slot",null))))}onClick(){var t;(t=this.trap)===null||t===void 0?void 0:t.deactivate()}updateAccessibility(t){if(t.parentElement){Array.from(t.parentElement.children).forEach((i=>{if(i!==t){this.isVisible?i.setAttribute("aria-hidden","true"):i.removeAttribute("aria-hidden")}}));if(t.parentElement!==document.body){this.updateAccessibility(t.parentElement)}}}get hostElement(){return a(this)}};d.style=e;export{d as cat_modal};
-//# sourceMappingURL=p-5bfc70e3.entry.js.map