@haiilo/catalyst 11.0.0 → 12.0.0

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

@@ -5,17 +5,41 @@ let nextUniqueId = 0;
  */
 export class CatTab {
     constructor() {
+        /**
+         * The label of the tab.
+         */
         this.label = '';
-        this.icon = undefined;
+        /**
+         * Hide the actual button content and only display the tab.
+         */
         this.iconOnly = false;
+        /**
+         * Display the icon on the right.
+         */
         this.iconRight = false;
-        this.url = undefined;
-        this.urlTarget = undefined;
+        /**
+         * Specifies that the tab should be deactivated.
+         */
         this.deactivated = false;
+        /**
+         * Specifies that the tab does not have an active state and thus cannot be
+         * activated. This does not mean, that the tab is deactivated. The tab can
+         * still be clicked and emit the `catClick` event. This is helpful if a tab
+         * should only trigger a click action (such as opening a modal).
+         */
         this.noActive = false;
+        /**
+         * Specifies that the tab is always visible in adaptive mode.
+         * Only the first sticky tab will be taken into account.
+         * Sticky has advantage on activeTabAlwaysVisible if there is no space to show both.
+         */
+        this.sticky = false;
+        /**
+         * Specifies that the tab content pane contains an error. This will color
+         * the tab in an error state and also switch to an error icon if an icon
+         * is specified.
+         */
         this.error = false;
-        this.nativeAttributes = undefined;
-        this.testId = undefined;
     }
     connectedCallback() {
         if (!this.hostElement.id) {
@@ -26,7 +50,7 @@ export class CatTab {
         this.catClick.emit(event);
     }
     render() {
-        return h(Host, { key: '7ccaa08d91c8e490f380ba2bee37342e6a1d8ceb' });
+        return h(Host, { key: 'd74edadf291560111aff4a925b4147b377a24b63' });
     }
     static get is() { return "cat-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -44,6 +68,7 @@ export class CatTab {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -56,12 +81,14 @@ export class CatTab {
                     "tags": [],
                     "text": "The label of the tab."
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "''"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -74,11 +101,13 @@ export class CatTab {
                     "tags": [],
                     "text": "The name of an icon to be displayed in the tab."
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "iconOnly": {
                 "type": "any",
+                "attribute": "icon-only",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | Breakpoint",
@@ -97,12 +126,14 @@ export class CatTab {
                     "tags": [],
                     "text": "Hide the actual button content and only display the tab."
                 },
-                "attribute": "icon-only",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "iconRight": {
                 "type": "boolean",
+                "attribute": "icon-right",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -115,12 +146,14 @@ export class CatTab {
                     "tags": [],
                     "text": "Display the icon on the right."
                 },
-                "attribute": "icon-right",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -133,11 +166,13 @@ export class CatTab {
                     "tags": [],
                     "text": "A destination to link to, rendered in the href attribute of a link."
                 },
-                "attribute": "url",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "urlTarget": {
                 "type": "string",
+                "attribute": "url-target",
                 "mutable": false,
                 "complexType": {
                     "original": "'_blank' | '_self'",
@@ -150,11 +185,13 @@ export class CatTab {
                     "tags": [],
                     "text": "Specifies where to open the linked document."
                 },
-                "attribute": "url-target",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "deactivated": {
                 "type": "boolean",
+                "attribute": "deactivated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -167,12 +204,14 @@ export class CatTab {
                     "tags": [],
                     "text": "Specifies that the tab should be deactivated."
                 },
-                "attribute": "deactivated",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "noActive": {
                 "type": "boolean",
+                "attribute": "no-active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -185,12 +224,34 @@ export class CatTab {
                     "tags": [],
                     "text": "Specifies that the tab does not have an active state and thus cannot be\nactivated. This does not mean, that the tab is deactivated. The tab can\nstill be clicked and emit the `catClick` event. This is helpful if a tab\nshould only trigger a click action (such as opening a modal)."
                 },
-                "attribute": "no-active",
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "sticky": {
+                "type": "boolean",
+                "attribute": "sticky",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies that the tab is always visible in adaptive mode.\nOnly the first sticky tab will be taken into account.\nSticky has advantage on activeTabAlwaysVisible if there is no space to show both."
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "error": {
                 "type": "boolean",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -203,12 +264,14 @@ export class CatTab {
                     "tags": [],
                     "text": "Specifies that the tab content pane contains an error. This will color\nthe tab in an error state and also switch to an error icon if an icon\nis specified."
                 },
-                "attribute": "error",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "nativeAttributes": {
                 "type": "unknown",
+                "attribute": "native-attributes",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: string }",
@@ -220,10 +283,13 @@ export class CatTab {
                 "docs": {
                     "tags": [],
                     "text": "Attributes that will be added to the native HTML button element"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "testId": {
                 "type": "string",
+                "attribute": "test-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -236,7 +302,8 @@ export class CatTab {
                     "tags": [],
                     "text": "A unique identifier for the underlying native element that is used for\ntesting purposes. The attribute is added as `data-test` attribute and acts\nas a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`."
                 },
-                "attribute": "test-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"cat-tab.js","sourceRoot":"","sources":["../../../src/components/cat-tab/cat-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG/F,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;GAEG;AAMH,MAAM,OAAO,MAAM;;qBAMgB,EAAE;;wBAUuB,KAAK;yBAK1B,KAAK;;;2BAeH,KAAK;wBAQR,KAAK;qBAOR,KAAK;;;;IAmBtC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC;YACzB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,WAAW,YAAY,EAAE,EAAE,CAAC;QACpD,CAAC;IACH,CAAC;IAGD,OAAO,CAAC,KAAiB;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAQ,CAAC;IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Listen, Host, Element } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\nlet nextUniqueId = 0;\n\n/**\n * A single tab inside a tabs component.\n */\n@Component({\n  tag: 'cat-tab',\n  styleUrl: 'cat-tab.scss',\n  shadow: true\n})\nexport class CatTab {\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The label of the tab.\n   */\n  @Prop({ reflect: true }) label = '';\n\n  /**\n   * The name of an icon to be displayed in the tab.\n   */\n  @Prop({ reflect: true }) icon?: string;\n\n  /**\n   * Hide the actual button content and only display the tab.\n   */\n  @Prop({ reflect: true }) iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop({ reflect: true }) iconRight = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop({ reflect: true }) url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop({ reflect: true }) urlTarget?: '_blank' | '_self';\n\n  /**\n   * Specifies that the tab should be deactivated.\n   */\n  @Prop({ reflect: true }) deactivated = false;\n\n  /**\n   * Specifies that the tab does not have an active state and thus cannot be\n   * activated. This does not mean, that the tab is deactivated. The tab can\n   * still be clicked and emit the `catClick` event. This is helpful if a tab\n   * should only trigger a click action (such as opening a modal).\n   */\n  @Prop({ reflect: true }) noActive = false;\n\n  /**\n   * Specifies that the tab content pane contains an error. This will color\n   * the tab in an error state and also switch to an error icon if an icon\n   * is specified.\n   */\n  @Prop({ reflect: true }) error = false;\n\n  /**\n   * Attributes that will be added to the native HTML button element\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * A unique identifier for the underlying native element that is used for\n   * testing purposes. The attribute is added as `data-test` attribute and acts\n   * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n   */\n  @Prop() testId?: string;\n\n  /**\n   * Emitted when tab is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  connectedCallback() {\n    if (!this.hostElement.id) {\n      this.hostElement.id = `cat-tab-${nextUniqueId++}`;\n    }\n  }\n\n  @Listen('click')\n  onClick(event: MouseEvent) {\n    this.catClick.emit(event);\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}
+{"version":3,"file":"cat-tab.js","sourceRoot":"","sources":["../../../src/components/cat-tab/cat-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG/F,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;GAEG;AAMH,MAAM,OAAO,MAAM;IALnB;QAQE;;WAEG;QACsB,UAAK,GAAG,EAAE,CAAC;QAOpC;;WAEG;QACsB,aAAQ,GAAyB,KAAK,CAAC;QAEhE;;WAEG;QACsB,cAAS,GAAG,KAAK,CAAC;QAY3C;;WAEG;QACsB,gBAAW,GAAG,KAAK,CAAC;QAE7C;;;;;WAKG;QACsB,aAAQ,GAAG,KAAK,CAAC;QAE1C;;;;WAIG;QACsB,WAAM,GAAG,KAAK,CAAC;QAExC;;;;WAIG;QACsB,UAAK,GAAG,KAAK,CAAC;KAiCxC;IAdC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC;YACzB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,WAAW,YAAY,EAAE,EAAE,CAAC;QACpD,CAAC;IACH,CAAC;IAGD,OAAO,CAAC,KAAiB;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAQ,CAAC;IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Listen, Host, Element } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\nlet nextUniqueId = 0;\n\n/**\n * A single tab inside a tabs component.\n */\n@Component({\n  tag: 'cat-tab',\n  styleUrl: 'cat-tab.scss',\n  shadow: true\n})\nexport class CatTab {\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The label of the tab.\n   */\n  @Prop({ reflect: true }) label = '';\n\n  /**\n   * The name of an icon to be displayed in the tab.\n   */\n  @Prop({ reflect: true }) icon?: string;\n\n  /**\n   * Hide the actual button content and only display the tab.\n   */\n  @Prop({ reflect: true }) iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop({ reflect: true }) iconRight = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop({ reflect: true }) url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop({ reflect: true }) urlTarget?: '_blank' | '_self';\n\n  /**\n   * Specifies that the tab should be deactivated.\n   */\n  @Prop({ reflect: true }) deactivated = false;\n\n  /**\n   * Specifies that the tab does not have an active state and thus cannot be\n   * activated. This does not mean, that the tab is deactivated. The tab can\n   * still be clicked and emit the `catClick` event. This is helpful if a tab\n   * should only trigger a click action (such as opening a modal).\n   */\n  @Prop({ reflect: true }) noActive = false;\n\n  /**\n   * Specifies that the tab is always visible in adaptive mode.\n   * Only the first sticky tab will be taken into account.\n   * Sticky has advantage on activeTabAlwaysVisible if there is no space to show both.\n   */\n  @Prop({ reflect: true }) sticky = false;\n\n  /**\n   * Specifies that the tab content pane contains an error. This will color\n   * the tab in an error state and also switch to an error icon if an icon\n   * is specified.\n   */\n  @Prop({ reflect: true }) error = false;\n\n  /**\n   * Attributes that will be added to the native HTML button element\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * A unique identifier for the underlying native element that is used for\n   * testing purposes. The attribute is added as `data-test` attribute and acts\n   * as a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`.\n   */\n  @Prop() testId?: string;\n\n  /**\n   * Emitted when tab is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  connectedCallback() {\n    if (!this.hostElement.id) {\n      this.hostElement.id = `cat-tab-${nextUniqueId++}`;\n    }\n  }\n\n  @Listen('click')\n  onClick(event: MouseEvent) {\n    this.catClick.emit(event);\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}

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

@@ -25,7 +25,8 @@
   flex: 1 0 auto;
 }
 
-.cat-tab {
+.cat-tab,
+.cat-tab-more-button {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
@@ -33,13 +34,8 @@
   position: relative;
   transition: none;
 }
-.cat-tab:first-of-type {
-  margin-left: -0.75rem;
-}
-.cat-tab:last-of-type {
-  margin-right: -0.75rem;
-}
-.cat-tab::after {
+.cat-tab::after,
+.cat-tab-more-button::after {
   opacity: 0;
   content: "";
   position: absolute;
@@ -49,16 +45,37 @@
   bottom: 0;
   height: 2px;
 }
-.cat-tab:hover::after {
+.cat-tab:hover::after,
+.cat-tab-more-button:hover::after {
   opacity: 0.25;
 }
-.cat-tab.cat-tab-active {
+.cat-tab.cat-tab-active,
+.cat-tab-more-button.cat-tab-active {
   font-weight: 700;
   color: rgb(var(--cat-primary-text-active, 2, 99, 113));
 }
+.cat-tab.cat-tab-active::after,
+.cat-tab-more-button.cat-tab-active::after {
+  opacity: 1;
+}
+
+.cat-tab:first-of-type {
+  margin-left: -0.75rem;
+}
+.cat-tab:last-of-type {
+  margin-right: -0.75rem;
+}
 .cat-tab.cat-tab-error {
   color: rgb(var(--cat-danger-text-active, 174, 42, 10));
 }
-.cat-tab.cat-tab-active::after {
-  opacity: 1;
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.cat-tab-list {
+  display: flex;
+  width: 100%;
 }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { catI18nRegistry as i18n } from "../cat-i18n/cat-i18n-registry";
 /**
  * Tabs are used to display multiple panels to be contained within a single
  * window, using tabs as a navigational element.
@@ -8,9 +9,26 @@ import { Host, h } from "@stencil/core";
  */
 export class CatTabs {
     constructor() {
+        this.resizedObserver = new ResizeObserver(() => this.adjustAdaptiveTabs());
         this.tabs = [];
+        this.hiddenTabs = [];
+        /**
+         * The ID of the active tab.
+         */
         this.activeTab = '';
+        /**
+         * The alignment of the tabs.
+         */
         this.tabsAlign = 'left';
+        /**
+         * Whether the visible items change according to the available space. A 'More' button is used to reveal hidden items.
+         */
+        this.adaptive = false;
+        /**
+         * Whether the active tab should always be visible. Applied when adaptive is enabled.
+         * Has less priority than sticky if there is no space to show both.
+         */
+        this.activeTabAlwaysVisible = false;
     }
     componentWillLoad() {
         this.syncTabs();
@@ -22,6 +40,12 @@ export class CatTabs {
             attributes: true,
             subtree: true
         });
+        if (this.adaptive) {
+            this.resizedObserver.observe(this.hostElement);
+            requestAnimationFrame(() => {
+                this.adjustAdaptiveTabs();
+            });
+        }
     }
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
@@ -58,19 +82,113 @@ export class CatTabs {
     async setActiveIndex(index) {
         this.activate(this.tabs[index]);
     }
+    /**
+     * Recalculates visible and hidden adaptive tabs.
+     */
+    async updateAdaptiveTabs() {
+        if (this.adaptive) {
+            this.adjustAdaptiveTabs();
+        }
+    }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: '082aff7c37c19d3c4ac84a062067988e4f0ef889' }, this.tabs.map((tab) => {
-            return (h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
+        return (h(Host, { key: '874b547102901311b51c66aace5a2f91f4d52bbb' }, h("div", { key: 'ab2ccbf398bdb5897c71762c9befe63f383a04db', role: "tablist", class: "cat-tab-list" }, this.tabs.map((tab, index) => {
+            return (h("cat-button", { buttonId: tab.id, part: "tab", class: {
                     'cat-tab': true,
                     'cat-tab-active': tab.id === this.activeTab,
-                    'cat-tab-error': tab.error
-                }, active: tab.id === this.activeTab, color: tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary', variant: "text", icon: tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => this.click(tab), testId: tab.testId, nativeAttributes: { ...tab.nativeAttributes }, nativeContentAttributes: { 'data-text': tab.label }, "data-dropdown-no-close": true }, tab.label));
-        }), h("slot", { key: '444aad05e4a51ba0d767b194c6e4074c55106995', name: "more" })));
+                    'cat-tab-error': tab.error,
+                    'cat-tab-sticky': tab.sticky
+                }, active: tab.id === this.activeTab, color: tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary', variant: "text", icon: tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => this.click(tab), testId: tab.testId, nativeAttributes: {
+                    ...tab.nativeAttributes,
+                    role: 'tab',
+                    'aria-selected': String(tab.id === this.activeTab),
+                    'aria-setsize': String(this.tabs.length),
+                    'aria-posinset': String(index + 1)
+                }, nativeContentAttributes: { 'data-text': tab.label }, "data-dropdown-no-close": true }, tab.label));
+        }), this.adaptive ? (h("cat-dropdown", { ref: el => (this.moreDropdown = el) }, h("cat-button", { ref: el => (this.moreButton = el), class: {
+                'cat-tab-more-button': true,
+                'cat-tab-active': !!this.hiddenTabs.find(tab => tab.id === this.activeTab)
+            }, iconRight: true, icon: this.moreDropdown?.isOpen ? 'chevron-up-outlined' : 'chevron-down-outlined', slot: "trigger", part: "more", variant: "text", color: this.hiddenTabs.find(tab => tab.id === this.activeTab) ? 'primary' : 'secondary' }, i18n.t('tabs.more')), h("nav", { slot: "content" }, h("ul", null, this.hiddenTabs.map((tab, index) => {
+            return (h("li", null, h("cat-button", { class: "cat-nav-item", active: tab.id === this.activeTab, urlTarget: tab.urlTarget, onCatClick: () => this.click(tab), testId: tab.testId, nativeAttributes: {
+                    ...tab.nativeAttributes,
+                    role: 'tab',
+                    'aria-selected': String(tab.id === this.activeTab),
+                    'aria-setsize': String(this.tabs.length),
+                    'aria-posinset': String(index + 1)
+                }, nativeContentAttributes: { 'data-text': tab.label } }, tab.label)));
+        }))))) : null)));
+    }
+    adjustAdaptiveTabs() {
+        const tabs = this.hostElement.shadowRoot?.querySelectorAll('.cat-tab');
+        if (!tabs?.length) {
+            return;
+        }
+        // show all hidden tabs for correct calculation
+        for (const tab of tabs) {
+            tab.style.display = 'inline-flex';
+        }
+        // show hidden "more" button for correct calculation
+        if (this.moreButton) {
+            this.moreButton.style.display = 'inline-flex';
+        }
+        const MORE_WIDTH = this.moreButton?.offsetWidth || 0;
+        const visibleTabsIndexes = [];
+        let fittingWidth = 0;
+        const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);
+        const stickyTabWidth = tabs.item(stickyTabIndex)?.scrollWidth || 0;
+        const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth <= this.hostElement.offsetWidth;
+        const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);
+        const activeTabWidth = tabs.item(activeTabIndex)?.scrollWidth || 0;
+        const activeTabIsVisible = this.activeTabAlwaysVisible &&
+            activeTabIndex > -1 &&
+            activeTabWidth + stickyTabWidth <= this.hostElement.offsetWidth;
+        if (stickyTabIsVisible) {
+            fittingWidth += stickyTabWidth;
+            visibleTabsIndexes.push(stickyTabIndex.toString());
+        }
+        if (activeTabIsVisible && stickyTabIndex !== activeTabIndex) {
+            fittingWidth += activeTabWidth;
+            visibleTabsIndexes.push(activeTabIndex.toString());
+        }
+        for (const [index, tab] of tabs.entries()) {
+            if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {
+                continue;
+            }
+            if (fittingWidth + tab.scrollWidth <= this.hostElement.offsetWidth) {
+                // tab fits within tabs parent
+                fittingWidth += tab.scrollWidth;
+                visibleTabsIndexes.push(index.toString());
+            }
+            else if (fittingWidth + MORE_WIDTH <= this.hostElement.offsetWidth) {
+                // tab doesn't fit, but more button does
+                break;
+            }
+            else {
+                // tab doesn't fit and more button doesn't fit either
+                // remove last fitting tab so that more button fits
+                visibleTabsIndexes.pop();
+                break;
+            }
+        }
+        this.hiddenTabs = this.tabs.filter((_, index) => !visibleTabsIndexes.includes(index.toString()));
+        if (this.moreButton) {
+            if (this.tabs.length > visibleTabsIndexes.length) {
+                this.moreButton.style.display = 'inline-flex';
+            }
+            else {
+                this.moreButton.style.display = 'none';
+            }
+        }
+        for (const [index, tab] of tabs.entries()) {
+            if (!visibleTabsIndexes.includes(index.toString())) {
+                tab.style.display = 'none';
+            }
+        }
     }
     syncTabs() {
         this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
         this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab) && !tab.noActive)[0]?.id;
+        this.adjustAdaptiveTabs();
     }
     click(tab) {
         if (this.canActivate(tab)) {
@@ -87,6 +205,7 @@ export class CatTabs {
         else if (this.canActivate(tab)) {
             this.activeTab = tab.id;
         }
+        this.adjustAdaptiveTabs();
     }
     canActivate(tab) {
         return !tab.deactivated && !tab.url && tab.id !== this.activeTab;
@@ -108,6 +227,7 @@ export class CatTabs {
         return {
             "activeTab": {
                 "type": "string",
+                "attribute": "active-tab",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -120,12 +240,14 @@ export class CatTabs {
                     "tags": [],
                     "text": "The ID of the active tab."
                 },
-                "attribute": "active-tab",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "''"
             },
             "tabsAlign": {
                 "type": "string",
+                "attribute": "tabs-align",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'center' | 'right' | 'justify'",
@@ -138,15 +260,57 @@ export class CatTabs {
                     "tags": [],
                     "text": "The alignment of the tabs."
                 },
-                "attribute": "tabs-align",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'left'"
+            },
+            "adaptive": {
+                "type": "boolean",
+                "attribute": "adaptive",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the visible items change according to the available space. A 'More' button is used to reveal hidden items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "activeTabAlwaysVisible": {
+                "type": "boolean",
+                "attribute": "active-tab-always-visible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the active tab should always be visible. Applied when adaptive is enabled.\nHas less priority than sticky if there is no space to show both."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "tabs": {}
+            "tabs": {},
+            "hiddenTabs": {}
         };
     }
     static get events() {
@@ -216,6 +380,23 @@ export class CatTabs {
                             "text": "index The tab index."
                         }]
                 }
+            },
+            "updateAdaptiveTabs": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Recalculates visible and hidden adaptive tabs.",
+                    "tags": []
+                }
             }
         };
     }