@haiilo/catalyst 11.0.0 → 12.0.0

package/dist/components/cat-spinner2.js

@@ -1,15 +1,19 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const catSpinnerCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host[hidden]{display:none}span{display:inline-flex}svg{fill:none;stroke:currentColor;stroke-dasharray:135px;stroke-dashoffset:95px;stroke-linecap:round;stroke-width:5px;transform-origin:center center;animation:spin 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;width:1em;height:1em}.spinner-xs svg{font-size:0.75rem}.spinner-s svg{font-size:1rem}.spinner-m svg{font-size:1.25rem}.spinner-l svg{font-size:1.5rem}.spinner-xl svg{font-size:1.75rem}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
-const CatSpinnerStyle0 = catSpinnerCss;
 
 const CatSpinner = /*@__PURE__*/ proxyCustomElement(class CatSpinner extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * The size of the spinner.
+         */
         this.size = 'm';
-        this.a11yLabel = undefined;
+        /**
+         * Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow.
+         */
         this.value = 0;
     }
     render() {
@@ -17,7 +21,7 @@ const CatSpinner = /*@__PURE__*/ proxyCustomElement(class CatSpinner extends HTM
                 [`spinner-${this.size}`]: this.size !== 'inline'
             } }, h("svg", { key: '6a649c21b27b3dbad3c73a71936566e7e9648254', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { key: '3fb75a339ec6e18d0209e9da2cbf650f2dae4420', cx: "24", cy: "24", r: "21.5" }))));
     }
-    static get style() { return CatSpinnerStyle0; }
+    static get style() { return catSpinnerCss; }
 }, [1, "cat-spinner", {
         "size": [1],
         "a11yLabel": [1, "a11y-label"],
@@ -38,5 +42,6 @@ function defineCustomElement() {
 }
 
 export { CatSpinner as C, defineCustomElement as d };
+//# sourceMappingURL=cat-spinner2.js.map
 
 //# sourceMappingURL=cat-spinner2.js.map

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

@@ -1 +1 @@
-{"file":"cat-spinner2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6nBAA6nB,CAAC;AACppB,yBAAe,aAAa;;MCSf,UAAU;;;;;oBAIoC,GAAG;;qBAWd,CAAC;;IAE/C,MAAM;QACJ,QACE,6DACE,IAAI,EAAC,aAAa,EAClB,QAAQ,EAAC,IAAI,gBACD,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,mBAC5B,IAAI,CAAC,KAAK,mBACX,GAAG,mBACH,KAAK,EACnB,KAAK,EAAE;gBACL,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjD,IAED,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACzD,+DAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,GAAU,CACtC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/cat-spinner/cat-spinner.scss?tag=cat-spinner&encapsulation=shadow","src/components/cat-spinner/cat-spinner.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$spinner-sizes: (\n  'xl': 1.75rem,\n  'l': 1.5rem,\n  'm': 1.25rem,\n  's': 1rem,\n  'xs': 0.75rem\n);\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n\n  &[hidden] {\n    display: none;\n  }\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: none;\n  stroke: currentColor;\n  stroke-dasharray: 135px;\n  stroke-dashoffset: 95px;\n  stroke-linecap: round;\n  stroke-width: 5px;\n  transform-origin: center center;\n  animation: spin 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;\n  width: 1em;\n  height: 1em;\n}\n\n// ----- sizes\n\n@mixin size($size) {\n  .spinner-#{$size} svg {\n    font-size: map.get($spinner-sizes, $size);\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n\n// ----- animation\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Spinners are used to indicate users that their action is being processed.\n */\n@Component({\n  tag: 'cat-spinner',\n  styleUrl: 'cat-spinner.scss',\n  shadow: true\n})\nexport class CatSpinner {\n  /**\n   * The size of the spinner.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the spinner that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow.\n   */\n  @Prop({ attribute: 'value' }) value: number = 0;\n\n  render() {\n    return (\n      <span\n        role=\"progressbar\"\n        tabindex=\"-1\"\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        aria-valuenow={this.value}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        class={{\n          [`spinner-${this.size}`]: this.size !== 'inline'\n        }}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\">\n          <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n        </svg>\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-spinner2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6nBAA6nB;;MCUtoB,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;AAME;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAA6C,GAAG;AAQ5D;;AAEG;AAC2B,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAsBhD;IApBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,aAAa,EAClB,QAAQ,EAAC,IAAI,gBACD,IAAI,CAAC,SAAS,EAAA,aAAA,EACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC5B,eAAA,EAAA,IAAI,CAAC,KAAK,mBACX,GAAG,EAAA,eAAA,EACH,KAAK,EACnB,KAAK,EAAE;gBACL,CAAC,CAAA,QAAA,EAAW,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,CAAC,IAAI,KAAK;aACzC,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAA,EACzD,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,EAAA,CAAU,CACtC,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/cat-spinner/cat-spinner.scss?tag=cat-spinner&encapsulation=shadow","src/components/cat-spinner/cat-spinner.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$spinner-sizes: (\n  'xl': 1.75rem,\n  'l': 1.5rem,\n  'm': 1.25rem,\n  's': 1rem,\n  'xs': 0.75rem\n);\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n\n  &[hidden] {\n    display: none;\n  }\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: none;\n  stroke: currentColor;\n  stroke-dasharray: 135px;\n  stroke-dashoffset: 95px;\n  stroke-linecap: round;\n  stroke-width: 5px;\n  transform-origin: center center;\n  animation: spin 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;\n  width: 1em;\n  height: 1em;\n}\n\n// ----- sizes\n\n@mixin size($size) {\n  .spinner-#{$size} svg {\n    font-size: map.get($spinner-sizes, $size);\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n\n// ----- animation\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Spinners are used to indicate users that their action is being processed.\n */\n@Component({\n  tag: 'cat-spinner',\n  styleUrl: 'cat-spinner.scss',\n  shadow: true\n})\nexport class CatSpinner {\n  /**\n   * The size of the spinner.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the spinner that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow.\n   */\n  @Prop({ attribute: 'value' }) value: number = 0;\n\n  render() {\n    return (\n      <span\n        role=\"progressbar\"\n        tabindex=\"-1\"\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        aria-valuenow={this.value}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        class={{\n          [`spinner-${this.size}`]: this.size !== 'inline'\n        }}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\">\n          <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n        </svg>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-tab.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
 const catTabCss = ":host{display:block}:host([hidden]){display:none}";
-const CatTabStyle0 = catTabCss;
 
 let nextUniqueId = 0;
 const CatTab$1 = /*@__PURE__*/ proxyCustomElement(class CatTab extends HTMLElement {
@@ -10,17 +9,41 @@ const CatTab$1 = /*@__PURE__*/ proxyCustomElement(class CatTab extends HTMLEleme
         this.__registerHost();
         this.__attachShadow();
         this.catClick = createEvent(this, "catClick", 7);
+        /**
+         * 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) {
@@ -31,10 +54,10 @@ const CatTab$1 = /*@__PURE__*/ proxyCustomElement(class CatTab extends HTMLEleme
         this.catClick.emit(event);
     }
     render() {
-        return h(Host, { key: '7ccaa08d91c8e490f380ba2bee37342e6a1d8ceb' });
+        return h(Host, { key: 'd74edadf291560111aff4a925b4147b377a24b63' });
     }
     get hostElement() { return this; }
-    static get style() { return CatTabStyle0; }
+    static get style() { return catTabCss; }
 }, [1, "cat-tab", {
         "label": [513],
         "icon": [513],
@@ -44,8 +67,9 @@ const CatTab$1 = /*@__PURE__*/ proxyCustomElement(class CatTab extends HTMLEleme
         "urlTarget": [513, "url-target"],
         "deactivated": [516],
         "noActive": [516, "no-active"],
+        "sticky": [516],
         "error": [516],
-        "nativeAttributes": [16],
+        "nativeAttributes": [16, "native-attributes"],
         "testId": [1, "test-id"]
     }, [[0, "click", "onClick"]]]);
 function defineCustomElement$1() {
@@ -66,5 +90,6 @@ const CatTab = CatTab$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CatTab, defineCustomElement };
+//# sourceMappingURL=cat-tab.js.map
 
 //# sourceMappingURL=cat-tab.js.map

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

@@ -1 +1 @@
-{"file":"cat-tab.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mDAAmD,CAAC;AACtE,qBAAe,SAAS;;ACExB,IAAI,YAAY,GAAG,CAAC,CAAC;MAURA,QAAM;;;;;;qBAMgB,EAAE;;wBAUuB,KAAK;yBAK1B,KAAK;;;2BAeH,KAAK;wBAQR,KAAK;qBAOR,KAAK;;;;IAmBtC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE;YACxB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,WAAW,YAAY,EAAE,EAAE,CAAC;SACnD;KACF;IAGD,OAAO,CAAC,KAAiB;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B;IAED,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAQ,CAAC;KACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatTab"],"sources":["src/components/cat-tab/cat-tab.scss?tag=cat-tab&encapsulation=shadow","src/components/cat-tab/cat-tab.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","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","mappings":";;AAAA,MAAM,SAAS,GAAG,mDAAmD;;ACGrE,IAAI,YAAY,GAAG,CAAC;MAUPA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;AALnB,IAAA,WAAA,GAAA;;;;;AAQE;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;AAOnC;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAyB,KAAK;AAE/D;;AAEG;AACsB,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAY1C;;AAEG;AACsB,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE5C;;;;;AAKG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzC;;;;AAIG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEvC;;;;AAIG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAiCvC;IAdC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE;YACxB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,CAAW,QAAA,EAAA,YAAY,EAAE,CAAA,CAAE;;;AAKrD,IAAA,OAAO,CAAC,KAAiB,EAAA;AACvB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;;IAG3B,MAAM,GAAA;QACJ,OAAO,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatTab","__stencil_proxyCustomElement"],"sources":["src/components/cat-tab/cat-tab.scss?tag=cat-tab&encapsulation=shadow","src/components/cat-tab/cat-tab.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","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"],"version":3}

package/dist/components/cat-tabs.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './cat-button2.js';
+import { c as catI18nRegistry } from './cat-i18n-registry.js';
+import { d as defineCustomElement$5 } from './cat-button2.js';
+import { d as defineCustomElement$4 } from './cat-dropdown2.js';
 import { d as defineCustomElement$3 } from './cat-icon2.js';
 import { d as defineCustomElement$2 } from './cat-spinner2.js';
 
-const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 rgb(var(--cat-border-color, 235, 236, 240))}:host([hidden]){display:none}:host([tabs-align=center]){justify-content:center}:host([tabs-align=right]){justify-content:end}:host([tabs-align=justify]) cat-button{flex:1 0 auto}.cat-tab{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;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{opacity:0;content:\"\";position:absolute;background:currentColor;left:0.75rem;right:0.75rem;bottom:0;height:2px}.cat-tab:hover::after{opacity:0.25}.cat-tab.cat-tab-active{font-weight:700;color:rgb(var(--cat-primary-text-active, 2, 99, 113))}.cat-tab.cat-tab-error{color:rgb(var(--cat-danger-text-active, 174, 42, 10))}.cat-tab.cat-tab-active::after{opacity:1}";
-const CatTabsStyle0 = catTabsCss;
+const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 rgb(var(--cat-border-color, 235, 236, 240))}:host([hidden]){display:none}:host([tabs-align=center]){justify-content:center}:host([tabs-align=right]){justify-content:end}:host([tabs-align=justify]) cat-button{flex:1 0 auto}.cat-tab,.cat-tab-more-button{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;transition:none}.cat-tab::after,.cat-tab-more-button::after{opacity:0;content:\"\";position:absolute;background:currentColor;left:0.75rem;right:0.75rem;bottom:0;height:2px}.cat-tab:hover::after,.cat-tab-more-button:hover::after{opacity:0.25}.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))}nav ul{list-style:none;margin:0;padding:0}.cat-tab-list{display:flex;width:100%}";
 
 const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLElement {
     constructor() {
@@ -12,9 +13,26 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.catChange = createEvent(this, "catChange", 7);
+        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();
@@ -26,6 +44,12 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
             attributes: true,
             subtree: true
         });
+        if (this.adaptive) {
+            this.resizedObserver.observe(this.hostElement);
+            requestAnimationFrame(() => {
+                this.adjustAdaptiveTabs();
+            });
+        }
     }
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
@@ -62,19 +86,113 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
     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' }, catI18nRegistry.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)) {
@@ -91,6 +209,7 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
         else if (this.canActivate(tab)) {
             this.activeTab = tab.id;
         }
+        this.adjustAdaptiveTabs();
     }
     canActivate(tab) {
         return !tab.deactivated && !tab.url && tab.id !== this.activeTab;
@@ -100,13 +219,17 @@ const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLEle
     static get watchers() { return {
         "activeTab": ["onActiveTabChange"]
     }; }
-    static get style() { return CatTabsStyle0; }
+    static get style() { return catTabsCss; }
 }, [17, "cat-tabs", {
         "activeTab": [1537, "active-tab"],
         "tabsAlign": [1, "tabs-align"],
+        "adaptive": [4],
+        "activeTabAlwaysVisible": [4, "active-tab-always-visible"],
         "tabs": [32],
+        "hiddenTabs": [32],
         "setActive": [64],
-        "setActiveIndex": [64]
+        "setActiveIndex": [64],
+        "updateAdaptiveTabs": [64]
     }, [[0, "keydown", "onKeydown"]], {
         "activeTab": ["onActiveTabChange"]
     }]);
@@ -114,7 +237,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cat-tabs", "cat-button", "cat-icon", "cat-spinner"];
+    const components = ["cat-tabs", "cat-button", "cat-dropdown", "cat-icon", "cat-spinner"];
     components.forEach(tagName => { switch (tagName) {
         case "cat-tabs":
             if (!customElements.get(tagName)) {
@@ -122,6 +245,11 @@ function defineCustomElement$1() {
             }
             break;
         case "cat-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "cat-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
@@ -143,5 +271,6 @@ const CatTabs = CatTabs$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CatTabs, defineCustomElement };
+//# sourceMappingURL=cat-tabs.js.map
 
 //# sourceMappingURL=cat-tabs.js.map

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-error {\n    color: cat-token('color.theme.danger.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 * @part more - An optional more button to display additional tabs.\n */\n@Component({\n  tag: 'cat-tabs',\n  styleUrl: 'cat-tabs.scss',\n  shadow: {\n    delegatesFocus: true\n  }\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({ mutable: true, 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    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\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                'cat-tab-error': tab.error\n              }}\n              active={tab.id === this.activeTab}\n              color={tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary'}\n              variant=\"text\"\n              icon={tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined}\n              iconOnly={tab.iconOnly}\n              iconRight={tab.iconRight}\n              url={tab.url}\n              disabled={tab.deactivated}\n              urlTarget={tab.urlTarget}\n              onCatClick={() => this.click(tab)}\n              testId={tab.testId}\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        <slot name=\"more\"></slot>\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) && !tab.noActive)[0]?.id;\n  }\n\n  private click(tab: HTMLCatTabElement) {\n    if (this.canActivate(tab)) {\n      tab.click();\n      if (!tab.noActive) {\n        this.activate(tab);\n      }\n    }\n  }\n\n  private activate(tab?: HTMLCatTabElement) {\n    if (!tab) {\n      this.activeTab = '';\n    } else if (this.canActivate(tab)) {\n      this.activeTab = tab.id;\n    }\n  }\n\n  private canActivate(tab: HTMLCatTabElement) {\n    return !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n  }\n}\n"],"version":3}
+{"file":"cat-tabs.js","mappings":"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","names":["CatTabs","__stencil_proxyCustomElement","i18n"],"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.cat-tab-more-button {\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  &::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\n.cat-tab {\n  &:first-of-type {\n    margin-left: -0.75rem;\n  }\n\n  &:last-of-type {\n    margin-right: -0.75rem;\n  }\n\n  &.cat-tab-error {\n    color: cat-token('color.theme.danger.textActive');\n  }\n}\n\nnav {\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n}\n\n.cat-tab-list {\n  display: flex;\n  width: 100%;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\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 * @part more - An optional more button to display additional tabs.\n */\n@Component({\n  tag: 'cat-tabs',\n  styleUrl: 'cat-tabs.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatTabs {\n  private mutationObserver?: MutationObserver;\n  private moreDropdown?: HTMLCatDropdownElement;\n  private moreButton?: HTMLCatButtonElement;\n  private readonly resizedObserver = new ResizeObserver(() => this.adjustAdaptiveTabs());\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() tabs: HTMLCatTabElement[] = [];\n  @State() hiddenTabs: HTMLCatTabElement[] = [];\n\n  /**\n   * The ID of the active tab.\n   */\n  @Prop({ mutable: true, reflect: true }) activeTab = '';\n\n  /**\n   * The alignment of the tabs.\n   */\n  @Prop() tabsAlign: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  /**\n   * Whether the visible items change according to the available space. A 'More' button is used to reveal hidden items.\n   */\n  @Prop() adaptive = false;\n\n  /**\n   * Whether the active tab should always be visible. Applied when adaptive is enabled.\n   * Has less priority than sticky if there is no space to show both.\n   */\n  @Prop() activeTabAlwaysVisible = false;\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    if (this.adaptive) {\n      this.resizedObserver.observe(this.hostElement);\n      requestAnimationFrame(() => {\n        this.adjustAdaptiveTabs();\n      });\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   * Recalculates visible and hidden adaptive tabs.\n   */\n  @Method()\n  async updateAdaptiveTabs(): Promise<void> {\n    if (this.adaptive) {\n      this.adjustAdaptiveTabs();\n    }\n  }\n\n  /**\n   * Emitted when active tab is changed.\n   */\n  @Event() catChange!: EventEmitter<{ id: string; index: number }>;\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    return (\n      <Host>\n        <div role=\"tablist\" class=\"cat-tab-list\">\n          {this.tabs.map((tab: HTMLCatTabElement, index: number) => {\n            return (\n              <cat-button\n                buttonId={tab.id}\n                part=\"tab\"\n                class={{\n                  'cat-tab': true,\n                  'cat-tab-active': tab.id === this.activeTab,\n                  'cat-tab-error': tab.error,\n                  'cat-tab-sticky': tab.sticky\n                }}\n                active={tab.id === this.activeTab}\n                color={tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary'}\n                variant=\"text\"\n                icon={tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined}\n                iconOnly={tab.iconOnly}\n                iconRight={tab.iconRight}\n                url={tab.url}\n                disabled={tab.deactivated}\n                urlTarget={tab.urlTarget}\n                onCatClick={() => this.click(tab)}\n                testId={tab.testId}\n                nativeAttributes={{\n                  ...tab.nativeAttributes,\n                  role: 'tab',\n                  'aria-selected': String(tab.id === this.activeTab),\n                  'aria-setsize': String(this.tabs.length),\n                  'aria-posinset': String(index + 1)\n                }}\n                nativeContentAttributes={{ 'data-text': tab.label }}\n                data-dropdown-no-close\n              >\n                {tab.label}\n              </cat-button>\n            );\n          })}\n          {this.adaptive ? (\n            <cat-dropdown ref={el => (this.moreDropdown = el as HTMLCatDropdownElement)}>\n              <cat-button\n                ref={el => (this.moreButton = el as HTMLCatButtonElement)}\n                class={{\n                  'cat-tab-more-button': true,\n                  'cat-tab-active': !!this.hiddenTabs.find(tab => tab.id === this.activeTab)\n                }}\n                iconRight\n                icon={this.moreDropdown?.isOpen ? 'chevron-up-outlined' : 'chevron-down-outlined'}\n                slot=\"trigger\"\n                part=\"more\"\n                variant=\"text\"\n                color={this.hiddenTabs.find(tab => tab.id === this.activeTab) ? 'primary' : 'secondary'}\n              >\n                {i18n.t('tabs.more')}\n              </cat-button>\n              <nav slot=\"content\">\n                <ul>\n                  {this.hiddenTabs.map((tab: HTMLCatTabElement, index: number) => {\n                    return (\n                      <li>\n                        <cat-button\n                          class=\"cat-nav-item\"\n                          active={tab.id === this.activeTab}\n                          urlTarget={tab.urlTarget}\n                          onCatClick={() => this.click(tab)}\n                          testId={tab.testId}\n                          nativeAttributes={{\n                            ...tab.nativeAttributes,\n                            role: 'tab',\n                            'aria-selected': String(tab.id === this.activeTab),\n                            'aria-setsize': String(this.tabs.length),\n                            'aria-posinset': String(index + 1)\n                          }}\n                          nativeContentAttributes={{ 'data-text': tab.label }}\n                        >\n                          {tab.label}\n                        </cat-button>\n                      </li>\n                    );\n                  })}\n                </ul>\n              </nav>\n            </cat-dropdown>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n\n  private adjustAdaptiveTabs() {\n    const tabs = this.hostElement.shadowRoot?.querySelectorAll('.cat-tab') as NodeListOf<HTMLCatButtonElement>;\n    if (!tabs?.length) {\n      return;\n    }\n\n    // show all hidden tabs for correct calculation\n    for (const tab of tabs) {\n      tab.style.display = 'inline-flex';\n    }\n    // show hidden \"more\" button for correct calculation\n    if (this.moreButton) {\n      this.moreButton.style.display = 'inline-flex';\n    }\n\n    const MORE_WIDTH = this.moreButton?.offsetWidth || 0;\n    const visibleTabsIndexes: string[] = [];\n    let fittingWidth = 0;\n\n    const stickyTabIndex = this.tabs.findIndex(tab => tab.sticky);\n    const stickyTabWidth = tabs.item(stickyTabIndex)?.scrollWidth || 0;\n    const stickyTabIsVisible = stickyTabIndex > -1 && stickyTabWidth <= this.hostElement.offsetWidth;\n\n    const activeTabIndex = this.tabs.findIndex(tab => tab.id === this.activeTab);\n    const activeTabWidth = tabs.item(activeTabIndex)?.scrollWidth || 0;\n    const activeTabIsVisible =\n      this.activeTabAlwaysVisible &&\n      activeTabIndex > -1 &&\n      activeTabWidth + stickyTabWidth <= this.hostElement.offsetWidth;\n\n    if (stickyTabIsVisible) {\n      fittingWidth += stickyTabWidth;\n      visibleTabsIndexes.push(stickyTabIndex.toString());\n    }\n\n    if (activeTabIsVisible && stickyTabIndex !== activeTabIndex) {\n      fittingWidth += activeTabWidth;\n      visibleTabsIndexes.push(activeTabIndex.toString());\n    }\n\n    for (const [index, tab] of tabs.entries()) {\n      if ((activeTabIsVisible && index === activeTabIndex) || (stickyTabIsVisible && index === stickyTabIndex)) {\n        continue;\n      }\n\n      if (fittingWidth + tab.scrollWidth <= this.hostElement.offsetWidth) {\n        // tab fits within tabs parent\n        fittingWidth += tab.scrollWidth;\n        visibleTabsIndexes.push(index.toString());\n      } else if (fittingWidth + MORE_WIDTH <= this.hostElement.offsetWidth) {\n        // tab doesn't fit, but more button does\n        break;\n      } else {\n        // tab doesn't fit and more button doesn't fit either\n        // remove last fitting tab so that more button fits\n        visibleTabsIndexes.pop();\n        break;\n      }\n    }\n\n    this.hiddenTabs = this.tabs.filter((_, index) => !visibleTabsIndexes.includes(index.toString()));\n\n    if (this.moreButton) {\n      if (this.tabs.length > visibleTabsIndexes.length) {\n        this.moreButton.style.display = 'inline-flex';\n      } else {\n        this.moreButton.style.display = 'none';\n      }\n    }\n    for (const [index, tab] of tabs.entries()) {\n      if (!visibleTabsIndexes.includes(index.toString())) {\n        tab.style.display = 'none';\n      }\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) && !tab.noActive)[0]?.id;\n    this.adjustAdaptiveTabs();\n  }\n\n  private click(tab: HTMLCatTabElement) {\n    if (this.canActivate(tab)) {\n      tab.click();\n      if (!tab.noActive) {\n        this.activate(tab);\n      }\n    }\n  }\n\n  private activate(tab?: HTMLCatTabElement) {\n    if (!tab) {\n      this.activeTab = '';\n    } else if (this.canActivate(tab)) {\n      this.activeTab = tab.id;\n    }\n    this.adjustAdaptiveTabs();\n  }\n\n  private canActivate(tab: HTMLCatTabElement) {\n    return !tab.deactivated && !tab.url && tab.id !== this.activeTab;\n  }\n}\n"],"version":3}

package/dist/components/cat-tag.js

@@ -7,7 +7,6 @@ import { d as defineCustomElement$3 } from './cat-icon2.js';
 import { d as defineCustomElement$2 } from './cat-spinner2.js';
 
 const catTagCss = ".label{overflow:hidden;word-wrap:break-word;word-break:break-word}.input-field:not(.input-horizontal) .label-container.hidden,.textarea-field:not(.textarea-horizontal) .label-container.hidden,.select-field:not(.select-horizontal) .label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container{flex-basis:var(--label-size, 33.33%)}.label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-optional,.label-character-count{display:inline-flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem}.label-character-count{margin-left:auto}.input-horizontal .label-container.hidden label,.textarea-horizontal .label-container.hidden label,.select-horizontal .label-container.hidden label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}.hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-primary-hover{transition:background-color 125ms, color 125ms}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}button.cat-text-primary,button.cat-link-primary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primary,.cat-text-primary-hover{transition:color 125ms}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-primaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}button.cat-text-primaryInverted,button.cat-link-primaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 125ms}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-secondary-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}button.cat-text-secondary,button.cat-link-secondary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondary,.cat-text-secondary-hover{transition:color 125ms}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-secondaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}button.cat-text-secondaryInverted,button.cat-link-secondaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 125ms}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-info{background-color:rgb(var(--cat-info-bg, 0, 115, 230)) !important;color:rgb(var(--cat-info-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-info-hover{transition:background-color 125ms, color 125ms}.cat-bg-info-hover:hover{background-color:rgb(var(--cat-info-bg-hover, 0, 107, 227)) !important;color:rgb(var(--cat-info-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-info,.cat-link-info{color:rgb(var(--cat-info-text, 0, 115, 230)) !important}button.cat-text-info,button.cat-link-info{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-info:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-info:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-info,.cat-text-info-hover{transition:color 125ms}.cat-link-info:hover,.cat-text-info-hover:hover{color:rgb(var(--cat-info-text-hover, 0, 107, 227)) !important}.cat-link-info:active,.cat-text-info-hover:active{color:rgb(var(--cat-info-text-active, 0, 96, 223)) !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-success-hover{transition:background-color 125ms, color 125ms}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}button.cat-text-success,button.cat-link-success{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-success:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-success:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-success,.cat-text-success-hover{transition:color 125ms}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important;--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-bg-warning-hover{transition:background-color 125ms, color 125ms}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}button.cat-text-warning,button.cat-link-warning{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-warning:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-warning:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-warning,.cat-text-warning-hover{transition:color 125ms}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-danger-hover{transition:background-color 125ms, color 125ms}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}button.cat-text-danger,button.cat-link-danger{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-danger:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-danger:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-danger,.cat-text-danger-hover{transition:color 125ms}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-text-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-bg-muted{background-color:#f2f4f7 !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}:host{display:flex;flex-direction:column;gap:0.5rem}input{font:inherit;margin:0;min-width:20rem;padding:0.375rem 0;flex:1 1 auto;border:none;outline:none;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.input-wrapper{flex:1 1 auto;display:flex;align-items:stretch;gap:0.25rem;padding:0.25rem 0.75rem;min-height:2rem;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:inset 0 0 0 1px rgb(var(--border-color));transition:box-shadow 125ms linear;--border-color:var(--cat-border-color-dark, 215, 219, 224);flex-wrap:wrap;}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-wrapper:not(.input-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.input-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.input-wrapper:focus-within:has(.clearable:focus){outline:none}.input-wrapper.input-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.tag-pill{display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-s, 0.125rem);white-space:nowrap;min-width:0}.tag-pill>span{overflow:hidden;text-overflow:ellipsis;flex:1 1 0}.tag-pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.icon-suffix{align-self:center}.input-inner-wrapper{flex:1 1 auto;display:flex}";
-const CatTagStyle0 = catTagCss;
 
 let nextUniqueId = 0;
 const CatTag$1 = /*@__PURE__*/ proxyCustomElement(class CatTag extends HTMLElement {
@@ -22,23 +21,45 @@ const CatTag$1 = /*@__PURE__*/ proxyCustomElement(class CatTag extends HTMLEleme
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
         this.tags = [];
-        this.errorMap = undefined;
+        /**
+         * Whether the label need a marker to shown if the select is required or optional.
+         */
         this.requiredMarker = 'optional';
+        /**
+         * Whether the select is disabled.
+         */
         this.disabled = false;
-        this.placeholder = undefined;
-        this.hint = undefined;
-        this.identifier = undefined;
+        /**
+         * The label for the select.
+         */
         this.label = '';
-        this.name = undefined;
+        /**
+         * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
         this.labelHidden = false;
+        /**
+         * A value is required or must be checked for the form to be submittable.
+         */
         this.required = false;
-        this.nativeAttributes = undefined;
-        this.testId = undefined;
-        this.value = undefined;
+        /**
+         * Whether the input should show a clear button.
+         */
         this.clearable = false;
-        this.errors = undefined;
+        /**
+         * Fine-grained control over when the errors are shown. Can be `false` to
+         * never show errors, `true` to show errors on blur, or a number to show
+         * errors change with the given delay in milliseconds or immediately on blur.
+         */
         this.errorUpdate = 0;
+        /**
+         * List of characters that should create a new tag. This need to be comparable to `keydownEvent.key`.
+         * Pasted values will also be split by those chars.
+         * Defaults to `[' ']`.
+         */
         this.tagCreationChars = [' '];
+        /**
+         * Whether new tag is added when the input is blurred.
+         */
         this.addOnBlur = false;
     }
     get id() {
@@ -158,7 +179,7 @@ const CatTag$1 = /*@__PURE__*/ proxyCustomElement(class CatTag extends HTMLEleme
     static get watchers() { return {
         "errors": ["onErrorsChanged"]
     }; }
-    static get style() { return CatTagStyle0; }
+    static get style() { return catTagCss; }
 }, [17, "cat-tag", {
         "requiredMarker": [1, "required-marker"],
         "disabled": [4],
@@ -169,13 +190,13 @@ const CatTag$1 = /*@__PURE__*/ proxyCustomElement(class CatTag extends HTMLEleme
         "name": [1],
         "labelHidden": [4, "label-hidden"],
         "required": [4],
-        "nativeAttributes": [16],
+        "nativeAttributes": [16, "native-attributes"],
         "testId": [1, "test-id"],
         "value": [1040],
         "clearable": [4],
         "errors": [4],
         "errorUpdate": [8, "error-update"],
-        "tagCreationChars": [16],
+        "tagCreationChars": [16, "tag-creation-chars"],
         "addOnBlur": [4, "add-on-blur"],
         "hasSlottedLabel": [32],
         "hasSlottedHint": [32],
@@ -217,5 +238,6 @@ const CatTag = CatTag$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CatTag, defineCustomElement };
+//# sourceMappingURL=cat-tag.js.map
 
 //# sourceMappingURL=cat-tag.js.map