@haiilo/catalyst 6.5.0 → 6.5.2

package/dist/components/cat-tabs.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$4 } from './cat-button2.js';
 import { d as defineCustomElement$3 } from './cat-icon2.js';
 import { d as defineCustomElement$2 } from './cat-spinner2.js';
@@ -10,21 +10,13 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.buttons = [];
+    this.catChange = createEvent(this, "catChange", 7);
     this.tabs = [];
-    this.activeTabId = undefined;
     this.activeTab = '';
     this.tabsAlign = 'left';
   }
-  onActiveTabIdChanged(newActiveTab) {
-    const activeTab = this.tabs.find(value => value.id === newActiveTab);
-    activeTab?.click();
-  }
   componentWillLoad() {
     this.syncTabs();
-    if (this.tabs.length) {
-      this.activeTabId = this.activeTab;
-    }
   }
   componentDidLoad() {
     this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs());
@@ -37,9 +29,14 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
   }
+  onActiveTabChange(id) {
+    const index = this.tabs.findIndex(tab => tab.id === id);
+    this.catChange.emit({ id, index });
+  }
   onKeydown(event) {
     if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
-      const targetElements = this.buttons.filter(button => !button.disabled);
+      const elements = this.hostElement.shadowRoot?.querySelectorAll('cat-button[role="tab"]');
+      const targetElements = Array.from(elements || []).filter(button => !button.disabled);
       const activeElement = this.hostElement.shadowRoot?.activeElement;
       const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
       const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
@@ -48,38 +45,55 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
       event.preventDefault();
     }
   }
+  /**
+   * Activates the tab with the given id.
+   *
+   * @param id The tab id.
+   */
+  async setActive(id) {
+    this.activate(this.tabs.find(tab => tab.id === id));
+  }
+  /**
+   * Activates the tab with the given index.
+   *
+   * @param index The tab index.
+   */
+  async setActiveIndex(index) {
+    this.activate(this.tabs[index]);
+  }
   render() {
     return (h(Host, null, this.tabs.map((tab) => {
-      return (h("cat-button", { ref: el => el && this.updateButtonsRef(el), buttonId: tab.id, role: "tab", part: "tab", class: {
+      return (h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
           'cat-tab': true,
-          'cat-tab-active': Boolean(this.activeTabId && tab.id === this.activeTabId)
-        }, active: Boolean(this.activeTabId && tab.id === this.activeTabId), color: this.activeTabId && tab.id === this.activeTabId ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => (this.activeTabId = tab.id), nativeAttributes: { ...tab.nativeAttributes }, nativeContentAttributes: { 'data-text': tab.label }, "data-dropdown-no-close": true }, tab.label));
+          'cat-tab-active': tab.id === this.activeTab
+        }, active: tab.id === this.activeTab, color: tab.id === this.activeTab ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => this.activate(tab), nativeAttributes: { ...tab.nativeAttributes }, nativeContentAttributes: { 'data-text': tab.label }, "data-dropdown-no-close": true }, tab.label));
     })));
   }
-  updateButtonsRef(button) {
-    const indexOf = this.buttons.indexOf(button);
-    if (indexOf >= 0) {
-      this.buttons[indexOf] = button;
-    }
-    else {
-      this.buttons.push(button);
-    }
-  }
   syncTabs() {
     this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+    this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab))[0]?.id;
+  }
+  canActivate(tab) {
+    return !!tab && !tab.deactivated && !tab.url && tab.id !== this.activeTab;
+  }
+  activate(tab) {
+    if (this.canActivate(tab)) {
+      this.activeTab = tab.id;
+    }
   }
   get hostElement() { return this; }
   static get watchers() { return {
-    "activeTabId": ["onActiveTabIdChanged"]
+    "activeTab": ["onActiveTabChange"]
   }; }
   static get style() { return catTabsCss; }
 }, [1, "cat-tabs", {
-    "activeTab": [1, "active-tab"],
+    "activeTab": [513, "active-tab"],
     "tabsAlign": [1, "tabs-align"],
     "tabs": [32],
-    "activeTabId": [32]
+    "setActive": [64],
+    "setActiveIndex": [64]
   }, [[0, "keydown", "onKeydown"]], {
-    "activeTabId": ["onActiveTabIdChanged"]
+    "activeTab": ["onActiveTabChange"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"cat-tabs.js","mappings":"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","names":["CatTabs"],"sources":["src/components/cat-tabs/cat-tabs.scss?tag=cat-tabs&encapsulation=shadow","src/components/cat-tabs/cat-tabs.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 -1px 0 0 cat-token('color.ui.border.default');\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([tabs-align='center']) {\n  justify-content: center;\n}\n\n:host([tabs-align='right']) {\n  justify-content: end;\n}\n\n:host([tabs-align='justify']) {\n  cat-button {\n    flex: 1 0 auto;\n  }\n}\n\n.cat-tab {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  position: relative;\n  transition: none;\n\n  &:first-of-type {\n    margin-left: -0.75rem;\n  }\n\n  &:last-of-type {\n    margin-right: -0.75rem;\n  }\n\n  &::after {\n    opacity: 0;\n    content: '';\n    position: absolute;\n    background: currentColor;\n    left: 0.75rem;\n    right: 0.75rem;\n    bottom: 0;\n    height: 2px;\n  }\n\n  &:hover::after {\n    opacity: 0.25;\n  }\n\n  &.cat-tab-active {\n    font-weight: 700;\n    color: cat-token('color.theme.primary.textActive');\n  }\n\n  &.cat-tab-active::after {\n    opacity: 1;\n  }\n}\n","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  onActiveTabIdChanged(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].doFocus();\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                'cat-tab': true,\n                'cat-tab-active': Boolean(this.activeTabId && tab.id === this.activeTabId)\n              }}\n              active={Boolean(this.activeTabId && tab.id === this.activeTabId)}\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              nativeAttributes={{ ...tab.nativeAttributes }}\n              nativeContentAttributes={{ 'data-text': tab.label }}\n              data-dropdown-no-close\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"],"version":3}
+{"file":"cat-tabs.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,0yBAA0yB;;MCahzBA,SAAO;;;;;;gBAKmB,EAAE;qBAKF,EAAE;qBAKsB,MAAM;;EAEnE,iBAAiB;IACf,IAAI,CAAC,QAAQ,EAAE,CAAC;GACjB;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAC1C,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,KAAK,SAAS,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAC7F,CAAC;IACF,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MAC/C,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,IAAI;MAChB,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,CAAC;GACrC;EAGD,iBAAiB,CAAC,EAAU;IAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACxD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;GACpC;EAGD,SAAS,CAAC,KAAoB;IAC5B,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;MAC3E,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,gBAAgB,CAAuB,wBAAwB,CAAC,CAAC;MAC/G,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;MACrF,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,aAAqC,CAAC;MACzF,MAAM,SAAS,GAAG,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;MAC7E,MAAM,SAAS,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;MAC3E,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,SAAS,GAAG,cAAc,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM,CAAC;MAC9G,cAAc,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,CAAC;MACpC,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;GACF;;;;;;EAQD,MAAM,SAAS,CAAC,EAAU;IACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;GACrD;;;;;;EAQD,MAAM,cAAc,CAAC,KAAa;IAChC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;GACjC;EAOD,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAsB;MACpC,QACE,kBACE,QAAQ,EAAE,GAAG,CAAC,EAAE,EAChB,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,KAAK,EACV,KAAK,EAAE;UACL,SAAS,EAAE,IAAI;UACf,gBAAgB,EAAE,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS;SAC5C,EACD,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,EACjC,KAAK,EAAE,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,WAAW,EAC1D,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,QAAQ,EAAE,GAAG,CAAC,QAAQ,EACtB,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,QAAQ,EAAE,GAAG,CAAC,WAAW,EACzB,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,UAAU,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EACpC,gBAAgB,EAAE,EAAE,GAAG,GAAG,CAAC,gBAAgB,EAAE,EAC7C,uBAAuB,EAAE,EAAE,WAAW,EAAE,GAAG,CAAC,KAAK,EAAE,oCAGlD,GAAG,CAAC,KAAK,CACC,EACb;KACH,CAAC,CACG,EACP;GACH;EAEO,QAAQ;IACd,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;IACrE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;GAC1F;EAEO,WAAW,CAAC,GAAuB;IACzC,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,CAAC;GAC3E;EAEO,QAAQ,CAAC,GAAuB;IACtC,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;MACzB,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC,EAAE,CAAC;KACzB;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatTabs"],"sources":["src/components/cat-tabs/cat-tabs.scss?tag=cat-tabs&encapsulation=shadow","src/components/cat-tabs/cat-tabs.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 -1px 0 0 cat-token('color.ui.border.default');\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([tabs-align='center']) {\n  justify-content: center;\n}\n\n:host([tabs-align='right']) {\n  justify-content: end;\n}\n\n:host([tabs-align='justify']) {\n  cat-button {\n    flex: 1 0 auto;\n  }\n}\n\n.cat-tab {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  position: relative;\n  transition: none;\n\n  &:first-of-type {\n    margin-left: -0.75rem;\n  }\n\n  &:last-of-type {\n    margin-right: -0.75rem;\n  }\n\n  &::after {\n    opacity: 0;\n    content: '';\n    position: absolute;\n    background: currentColor;\n    left: 0.75rem;\n    right: 0.75rem;\n    bottom: 0;\n    height: 2px;\n  }\n\n  &:hover::after {\n    opacity: 0.25;\n  }\n\n  &.cat-tab-active {\n    font-weight: 700;\n    color: cat-token('color.theme.primary.textActive');\n  }\n\n  &.cat-tab-active::after {\n    opacity: 1;\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } 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 mutationObserver?: MutationObserver;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() tabs: HTMLCatTabElement[] = [];\n\n  /**\n   * The ID of the active tab.\n   */\n  @Prop({ reflect: true }) activeTab = '';\n\n  /**\n   * The alignment of the tabs.\n   */\n  @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  componentWillLoad(): void {\n    this.syncTabs();\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = new MutationObserver(\n      mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs()\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  @Watch('activeTab')\n  onActiveTabChange(id: string) {\n    const index = this.tabs.findIndex(tab => tab.id === id);\n    this.catChange.emit({ id, index });\n  }\n\n  @Listen('keydown')\n  onKeydown(event: KeyboardEvent): void {\n    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {\n      const elements = this.hostElement.shadowRoot?.querySelectorAll<HTMLCatButtonElement>('cat-button[role=\"tab\"]');\n      const targetElements = Array.from(elements || []).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].doFocus();\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Activates the tab with the given id.\n   *\n   * @param id The tab id.\n   */\n  @Method()\n  async setActive(id: string): Promise<void> {\n    this.activate(this.tabs.find(tab => tab.id === id));\n  }\n\n  /**\n   * Activates the tab with the given index.\n   *\n   * @param index The tab index.\n   */\n  @Method()\n  async setActiveIndex(index: number): Promise<void> {\n    this.activate(this.tabs[index]);\n  }\n\n  /**\n   * Emitted when active tab is changed.\n   */\n  @Event() catChange!: EventEmitter<{ id: string; index: number }>;\n\n  render() {\n    return (\n      <Host>\n        {this.tabs.map((tab: HTMLCatTabElement) => {\n          return (\n            <cat-button\n              buttonId={tab.id}\n              role=\"tab\"\n              part=\"tab\"\n              class={{\n                'cat-tab': true,\n                'cat-tab-active': tab.id === this.activeTab\n              }}\n              active={tab.id === this.activeTab}\n              color={tab.id === this.activeTab ? '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.activate(tab)}\n              nativeAttributes={{ ...tab.nativeAttributes }}\n              nativeContentAttributes={{ 'data-text': tab.label }}\n              data-dropdown-no-close\n            >\n              {tab.label}\n            </cat-button>\n          );\n        })}\n      </Host>\n    );\n  }\n\n  private syncTabs() {\n    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));\n    this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab))[0]?.id;\n  }\n\n  private canActivate(tab?: HTMLCatTabElement): tab is HTMLCatTabElement {\n    return !!tab && !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n  }\n\n  private activate(tab?: HTMLCatTabElement) {\n    if (this.canActivate(tab)) {\n      this.activeTab = tab.id;\n    }\n  }\n}\n"],"version":3}

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

@@ -7815,21 +7815,22 @@ const CatRadioGroup = class {
     this.updateTabIndex();
   }
   onDisabledChanged(disabled) {
-    this.catRadioGroup.forEach(catRadio => (catRadio.disabled = disabled));
+    this.catRadioGroup.forEach(catRadio => (catRadio.disabled = catRadio.disabled || disabled));
   }
   onLabelLeftChanged(labelLeft) {
-    this.catRadioGroup.forEach(catRadio => {
-      if (labelLeft) {
-        catRadio.labelLeft = labelLeft;
-      }
-    });
+    this.catRadioGroup.forEach(catRadio => (catRadio.labelLeft = catRadio.labelLeft || labelLeft));
   }
   componentDidLoad() {
-    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
-    this.onNameChanged(this.name);
-    this.onValueChanged(this.value);
-    this.onDisabledChanged(this.disabled);
-    this.onLabelLeftChanged(this.labelLeft);
+    this.init();
+    this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-RADIO') && this.init());
+    this.mutationObserver?.observe(this.hostElement, {
+      childList: true,
+      attributes: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
   }
   onKeydown(event) {
     if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {
@@ -7864,6 +7865,13 @@ const CatRadioGroup = class {
   render() {
     return (h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", null)));
   }
+  init() {
+    this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
+    this.onNameChanged(this.name);
+    this.onValueChanged(this.value);
+    this.onDisabledChanged(this.disabled);
+    this.onLabelLeftChanged(this.labelLeft);
+  }
   updateTabIndex() {
     if (this.catRadioGroup.length) {
       this.catRadioGroup.forEach(value => value.shadowRoot?.querySelector('input')?.setAttribute('tabindex', '-1'));
@@ -10205,21 +10213,13 @@ const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1p
 const CatTabs = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.buttons = [];
+    this.catChange = createEvent(this, "catChange", 7);
     this.tabs = [];
-    this.activeTabId = undefined;
     this.activeTab = '';
     this.tabsAlign = 'left';
   }
-  onActiveTabIdChanged(newActiveTab) {
-    const activeTab = this.tabs.find(value => value.id === newActiveTab);
-    activeTab?.click();
-  }
   componentWillLoad() {
     this.syncTabs();
-    if (this.tabs.length) {
-      this.activeTabId = this.activeTab;
-    }
   }
   componentDidLoad() {
     this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs());
@@ -10232,9 +10232,14 @@ const CatTabs = class {
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
   }
+  onActiveTabChange(id) {
+    const index = this.tabs.findIndex(tab => tab.id === id);
+    this.catChange.emit({ id, index });
+  }
   onKeydown(event) {
     if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
-      const targetElements = this.buttons.filter(button => !button.disabled);
+      const elements = this.hostElement.shadowRoot?.querySelectorAll('cat-button[role="tab"]');
+      const targetElements = Array.from(elements || []).filter(button => !button.disabled);
       const activeElement = this.hostElement.shadowRoot?.activeElement;
       const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
       const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
@@ -10243,29 +10248,45 @@ const CatTabs = class {
       event.preventDefault();
     }
   }
+  /**
+   * Activates the tab with the given id.
+   *
+   * @param id The tab id.
+   */
+  async setActive(id) {
+    this.activate(this.tabs.find(tab => tab.id === id));
+  }
+  /**
+   * Activates the tab with the given index.
+   *
+   * @param index The tab index.
+   */
+  async setActiveIndex(index) {
+    this.activate(this.tabs[index]);
+  }
   render() {
     return (h(Host, null, this.tabs.map((tab) => {
-      return (h("cat-button", { ref: el => el && this.updateButtonsRef(el), buttonId: tab.id, role: "tab", part: "tab", class: {
+      return (h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
           'cat-tab': true,
-          'cat-tab-active': Boolean(this.activeTabId && tab.id === this.activeTabId)
-        }, active: Boolean(this.activeTabId && tab.id === this.activeTabId), color: this.activeTabId && tab.id === this.activeTabId ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => (this.activeTabId = tab.id), nativeAttributes: { ...tab.nativeAttributes }, nativeContentAttributes: { 'data-text': tab.label }, "data-dropdown-no-close": true }, tab.label));
+          'cat-tab-active': tab.id === this.activeTab
+        }, active: tab.id === this.activeTab, color: tab.id === this.activeTab ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => this.activate(tab), nativeAttributes: { ...tab.nativeAttributes }, nativeContentAttributes: { 'data-text': tab.label }, "data-dropdown-no-close": true }, tab.label));
     })));
   }
-  updateButtonsRef(button) {
-    const indexOf = this.buttons.indexOf(button);
-    if (indexOf >= 0) {
-      this.buttons[indexOf] = button;
-    }
-    else {
-      this.buttons.push(button);
-    }
-  }
   syncTabs() {
     this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+    this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab))[0]?.id;
+  }
+  canActivate(tab) {
+    return !!tab && !tab.deactivated && !tab.url && tab.id !== this.activeTab;
+  }
+  activate(tab) {
+    if (this.canActivate(tab)) {
+      this.activeTab = tab.id;
+    }
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {
-    "activeTabId": ["onActiveTabIdChanged"]
+    "activeTab": ["onActiveTabChange"]
   }; }
 };
 CatTabs.style = catTabsCss;