@haiilo/catalyst 14.3.0 → 14.5.0

package/dist/components/cat-menu-item2.js

@@ -0,0 +1,111 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './cat-button2.js';
+import { d as defineCustomElement$2 } from './cat-icon2.js';
+import { d as defineCustomElement$1 } from './cat-spinner2.js';
+
+let nextUniqueId = 0;
+const CatMenuItem = /*@__PURE__*/ proxyCustomElement(class CatMenuItem extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.catClick = createEvent(this, "catClick", 7);
+        this._id = `cat-menu-item-${++nextUniqueId}`;
+        /**
+         * Whether the menu item is active.
+         */
+        this.active = false;
+        /**
+         * The variant of the menu item button.
+         */
+        this.variant = 'text';
+        /**
+         * Hide the actual button content and only display the icon.
+         */
+        this.iconOnly = false;
+        /**
+         * Display the icon on the right.
+         */
+        this.iconRight = false;
+        /**
+         * Specifies that the menu item should be disabled.
+         */
+        this.disabled = false;
+    }
+    get id() {
+        return this.identifier || this._id;
+    }
+    /**
+     * Programmatically move focus to the menu item.
+     */
+    async doFocus(options) {
+        this.button?.doFocus(options);
+    }
+    /**
+     * Programmatically remove focus from the menu item.
+     */
+    async doBlur() {
+        this.button?.doBlur();
+    }
+    render() {
+        return (h(Host, { key: '69db1c5c6d91ea31103639a5fe3cbb96da32aa40' }, h("li", { key: '88569a9541369cf5dbc7f79b562ef5b68c9905a3' }, h("cat-button", { key: '65b6e6c3ca873a07204f36b3cae69dfffbc51a0b', ref: el => (this.button = el), class: "cat-nav-item", buttonId: this.id, part: "menu-item", variant: this.variant, icon: this.icon, iconOnly: this.iconOnly, iconRight: this.iconRight, url: this.url, disabled: this.disabled, urlTarget: this.urlTarget, loading: this.loading, color: this.color, active: this.active, testId: this.testId, nativeAttributes: {
+                ...this.nativeAttributes,
+                role: 'menuitem',
+                tabindex: '-1'
+            }, onCatClick: this.onCatClick }, h("slot", { key: 'c8036dabc3f0cb762d96bee7797ac50f871ac44d' })))));
+    }
+    onCatClick(event) {
+        this.catClick.emit(event.detail);
+    }
+}, [257, "cat-menu-item", {
+        "identifier": [1],
+        "icon": [1],
+        "color": [1],
+        "active": [4],
+        "variant": [1],
+        "loading": [4],
+        "iconOnly": [8, "icon-only"],
+        "iconRight": [4, "icon-right"],
+        "url": [1],
+        "urlTarget": [1, "url-target"],
+        "disabled": [4],
+        "nativeAttributes": [16],
+        "testId": [1, "test-id"],
+        "doFocus": [64],
+        "doBlur": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-menu-item", "cat-button", "cat-icon", "cat-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatMenuItem);
+            }
+            break;
+        case "cat-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cat-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "cat-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { CatMenuItem as C, defineCustomElement as d };
+//# sourceMappingURL=cat-menu-item2.js.map
+
+//# sourceMappingURL=cat-menu-item2.js.map

package/dist/components/cat-menu-item2.js.map

@@ -0,0 +1 @@
+{"file":"cat-menu-item2.js","mappings":";;;;;AAGA,IAAI,YAAY,GAAG,CAAC;MASP,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAA,WAAA,CAAA;AAJxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAKmB,QAAA,IAAA,CAAA,GAAG,GAAG,iBAAiB,EAAE,YAAY,EAAE;AAoBxD;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEtB;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAmC,MAAM;AAOxD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAyB,KAAK;AAE9C;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAYzB;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAwEzB;AAjIC,IAAA,IAAY,EAAE,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG;;AA2EpC;;AAEG;IAEH,MAAM,OAAO,CAAC,OAAsB,EAAA;AAClC,QAAA,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,OAAO,CAAC;;AAG/B;;AAEG;AAEH,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE;;IAGvB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CACE,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC7B,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,EAAE,EACjB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,gBAAgB,EAAE;gBAChB,GAAG,IAAI,CAAC,gBAAgB;AACxB,gBAAA,IAAI,EAAE,UAAU;AAChB,gBAAA,QAAQ,EAAE;aACX,EACD,UAAU,EAAE,IAAI,CAAC,UAAU,EAAA,EAE3B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACF,CACV,CACA;;AAIH,IAAA,UAAU,CAAC,KAA8B,EAAA;QAC/C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/cat-menu-item/cat-menu-item.tsx"],"sourcesContent":["import { Component, h, Host, Prop, Method, Event, EventEmitter } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\nlet nextUniqueId = 0;\n\n/**\n * A menu item component that renders as a button with proper ARIA semantics.\n */\n@Component({\n  tag: 'cat-menu-item',\n  shadow: true\n})\nexport class CatMenuItem {\n  private readonly _id = `cat-menu-item-${++nextUniqueId}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n  private button?: HTMLCatButtonElement;\n\n  /**\n   * A unique identifier for the menu item.\n   */\n  @Prop() identifier?: string;\n  /**\n   * The name of an icon to be displayed in the menu item.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * The color of the menu item.\n   */\n  @Prop() color?: 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info';\n\n  /**\n   * Whether the menu item is active.\n   */\n  @Prop() active = false;\n\n  /**\n   * The variant of the menu item button.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n  /**\n   * The loading state of the menu item.\n   */\n  @Prop() loading?: boolean;\n\n  /**\n   * Hide the actual button content and only display the icon.\n   */\n  @Prop() iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  /**\n   * Specifies that the menu item should be disabled.\n   */\n  @Prop() disabled = 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 the trigger button is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  /**\n   * Programmatically move focus to the menu item.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.button?.doFocus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the menu item.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.button?.doBlur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <li>\n          <cat-button\n            ref={el => (this.button = el)}\n            class=\"cat-nav-item\"\n            buttonId={this.id}\n            part=\"menu-item\"\n            variant={this.variant}\n            icon={this.icon}\n            iconOnly={this.iconOnly}\n            iconRight={this.iconRight}\n            url={this.url}\n            disabled={this.disabled}\n            urlTarget={this.urlTarget}\n            loading={this.loading}\n            color={this.color}\n            active={this.active}\n            testId={this.testId}\n            nativeAttributes={{\n              ...this.nativeAttributes,\n              role: 'menuitem',\n              tabindex: '-1'\n            }}\n            onCatClick={this.onCatClick}\n          >\n            <slot></slot>\n          </cat-button>\n        </li>\n      </Host>\n    );\n  }\n\n  private onCatClick(event: CustomEvent<MouseEvent>) {\n    this.catClick.emit(event.detail);\n  }\n}\n"],"version":3}

package/dist/components/cat-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CatMenu extends Components.CatMenu, HTMLElement {}
+export const CatMenu: {
+    prototype: CatMenu;
+    new (): CatMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cat-menu.js

@@ -0,0 +1,9 @@
+import { C as CatMenu$1, d as defineCustomElement$1 } from './cat-menu2.js';
+
+const CatMenu = CatMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CatMenu, defineCustomElement };
+//# sourceMappingURL=cat-menu.js.map
+
+//# sourceMappingURL=cat-menu.js.map

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

@@ -0,0 +1 @@
+{"file":"cat-menu.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/cat-menu2.js

@@ -0,0 +1,227 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './cat-button2.js';
+import { d as defineCustomElement$3 } from './cat-dropdown2.js';
+import { d as defineCustomElement$2 } from './cat-icon2.js';
+import { d as defineCustomElement$1 } from './cat-spinner2.js';
+
+const catMenuCss = ":host(.cat-time-menu) nav{max-height:16rem}ul{list-style:none;margin:0;padding:0}";
+
+const CatMenu = /*@__PURE__*/ proxyCustomElement(class CatMenu extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.catOpen = createEvent(this, "catOpen", 7);
+        this.catClose = createEvent(this, "catClose", 7);
+        this.catTriggerClick = createEvent(this, "catTriggerClick", 7);
+        this.catMenuItems = [];
+        /**
+         * The placement of the dropdown.
+         */
+        this.placement = 'bottom-start';
+        /**
+         * The arrow key navigation direction for menu items.
+         */
+        this.arrowNavigation = 'vertical';
+        /**
+         * The trigger button variant.
+         */
+        this.triggerVariant = 'text';
+        /**
+         * The trigger button size.
+         */
+        this.triggerSize = 'm';
+        /**
+         * The color palette of the trigger button.
+         */
+        this.triggerColor = 'secondary';
+        /**
+         * Disable the menu.
+         */
+        this.disabled = false;
+        /**
+         * Make the dropdown match the width of the reference regardless of its
+         * contents. Note that this only applies to the minimum width of the
+         * dropdown. The maximum width is still limited by the viewport.
+         */
+        this.justify = false;
+        /**
+         * Do not change the size of the dropdown to ensure it isn’t too big to fit
+         * in the viewport (or more specifically, its clipping context).
+         */
+        this.noResize = false;
+        /**
+         * Allow overflow when dropdown is open.
+         */
+        this.overflow = false;
+        /**
+         * Whether the dropdown trigger should be initialized only before first opening.
+         * Can be useful when trigger is rendered dynamically.
+         */
+        this.delayedTriggerInit = false;
+        this.onTriggerClick = (event) => {
+            this.catTriggerClick.emit(event.detail);
+        };
+        this.onMenuOpen = (event) => {
+            this.catOpen.emit(event.detail);
+            // Set focus to first non-disabled menu item when menu opens
+            requestAnimationFrame(() => {
+                if (!this.isMenuItemInFocus()) {
+                    const firstEnabledItem = this.catMenuItems.find(item => !item.disabled);
+                    firstEnabledItem?.doFocus();
+                }
+            });
+        };
+    }
+    onFocusOut() {
+        if (!this.dropdown?.isOpen) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            if (!this.isMenuItemInFocus()) {
+                this.dropdown?.close(false);
+            }
+        });
+    }
+    getDeepActiveElement() {
+        let active = document.activeElement;
+        while (active?.shadowRoot?.activeElement && active.nodeName !== 'CAT-MENU-ITEM') {
+            active = active.shadowRoot.activeElement;
+        }
+        return active;
+    }
+    onDocumentKeydown(event) {
+        const navigationKeys = this.arrowNavigation === 'horizontal'
+            ? ['ArrowRight', 'ArrowLeft', 'Home', 'End']
+            : ['ArrowDown', 'ArrowUp', 'Home', 'End'];
+        if (!this.dropdown?.isOpen || !navigationKeys.includes(event.key)) {
+            return;
+        }
+        const targetElements = this.catMenuItems.filter(item => !item.disabled);
+        if (!targetElements.length) {
+            return;
+        }
+        const activeIdx = targetElements.findIndex(item => this.getDeepActiveElement() === item);
+        let targetIdx;
+        if (event.key === 'Home') {
+            targetIdx = 0;
+        }
+        else if (event.key === 'End') {
+            targetIdx = targetElements.length - 1;
+        }
+        else {
+            const forwardKey = this.arrowNavigation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+            const activeOff = event.key === forwardKey ? 1 : -1;
+            targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
+        }
+        targetElements[targetIdx].doFocus();
+        event.preventDefault();
+    }
+    componentDidLoad() {
+        this.syncMenuItems();
+        this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-MENU-ITEM') && this.syncMenuItems());
+        this.mutationObserver?.observe(this.hostElement, {
+            childList: true,
+            attributes: true,
+            subtree: true
+        });
+    }
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+    }
+    /**
+     * Opens the menu.
+     */
+    async open() {
+        await this.dropdown?.open();
+    }
+    /**
+     * Closes the menu.
+     */
+    async close() {
+        await this.dropdown?.close();
+    }
+    /**
+     * Toggles the menu.
+     */
+    async toggle() {
+        await this.dropdown?.toggle();
+    }
+    isMenuItemInFocus() {
+        const activeElement = this.getDeepActiveElement();
+        const isInMenu = activeElement && this.catMenuItems.some(item => activeElement === item);
+        return !!(activeElement && isInMenu);
+    }
+    syncMenuItems() {
+        this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));
+    }
+    render() {
+        return (h(Host, { key: '1659f098d4d11e61119cde4f290bb89bf450f9d9' }, h("cat-dropdown", { key: 'a5ca6e28245167c0f208d1846c9f93a75991dee1', ref: el => (this.dropdown = el), focusTrap: false, placement: this.placement, justify: this.justify, arrowNavigation: "none", noResize: this.noResize, overflow: this.overflow, delayedTriggerInit: this.delayedTriggerInit, onCatOpen: this.onMenuOpen, onCatClose: () => this.catClose.emit() }, h("cat-button", { key: '63986a7d31784fdd59de48c79a5b5777cf198b94', slot: "trigger", part: "trigger", variant: this.triggerVariant, size: this.triggerSize, icon: this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined), iconOnly: this.triggerIconOnly ?? this.triggerLabel === undefined, color: this.triggerColor, a11yLabel: this.triggerA11yLabel ?? this.triggerLabel, class: this.triggerClass, testId: this.triggerTestId, nativeAttributes: {
+                ...this.triggerNativeAttributes,
+                'aria-haspopup': 'menu'
+            }, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: 'c10341a8bec971b814ec88044a89aa6752f3be23', name: "trigger-label" }, this.triggerLabel)), h("nav", { key: '265da5937ea993d27ccec21f9c0bc84439208d6c', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, h("ul", { key: '9b8edcb90028b39690be08961f25ea8c7a769752' }, h("slot", { key: 'f30590ff83386f30ba4539e76d621a80b0aefffd' }))))));
+    }
+    get hostElement() { return this; }
+    static get style() { return catMenuCss; }
+}, [257, "cat-menu", {
+        "placement": [1],
+        "arrowNavigation": [1, "arrow-navigation"],
+        "triggerVariant": [1, "trigger-variant"],
+        "triggerSize": [1, "trigger-size"],
+        "triggerIcon": [1, "trigger-icon"],
+        "triggerIconOnly": [8, "trigger-icon-only"],
+        "triggerLabel": [1, "trigger-label"],
+        "triggerColor": [1, "trigger-color"],
+        "triggerA11yLabel": [1, "trigger-a-1-1y-label"],
+        "triggerClass": [1, "trigger-class"],
+        "triggerTestId": [1, "trigger-test-id"],
+        "triggerNativeAttributes": [16],
+        "disabled": [4],
+        "justify": [4],
+        "noResize": [4, "no-resize"],
+        "overflow": [4],
+        "delayedTriggerInit": [4, "delayed-trigger-init"],
+        "open": [64],
+        "close": [64],
+        "toggle": [64]
+    }, [[0, "focusout", "onFocusOut"], [4, "keydown", "onDocumentKeydown"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-menu", "cat-button", "cat-dropdown", "cat-icon", "cat-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatMenu);
+            }
+            break;
+        case "cat-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cat-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cat-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "cat-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { CatMenu as C, defineCustomElement as d };
+//# sourceMappingURL=cat-menu2.js.map
+
+//# sourceMappingURL=cat-menu2.js.map

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

@@ -0,0 +1 @@
+{"file":"cat-menu2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/cat-menu/cat-menu.scss?tag=cat-menu&encapsulation=shadow","src/components/cat-menu/cat-menu.tsx"],"sourcesContent":[":host(.cat-time-menu) {\n  nav {\n    max-height: 16rem;\n  }\n}\n\nul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n","import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\n/**\n * A menu component that provides a dropdown with a built-in configurable trigger button\n * and proper ARIA semantics and keyboard navigation for menu items.\n *\n * The trigger is always a cat-button with sensible defaults but fully configurable\n * through trigger-specific props.\n */\n@Component({\n  tag: 'cat-menu',\n  styleUrl: 'cat-menu.scss',\n  shadow: true\n})\nexport class CatMenu {\n  private dropdown?: HTMLCatDropdownElement;\n  private catMenuItems: HTMLCatMenuItemElement[] = [];\n  private mutationObserver?: MutationObserver;\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The placement of the dropdown.\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * The arrow key navigation direction for menu items.\n   */\n  @Prop() arrowNavigation: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * The trigger button variant.\n   */\n  @Prop() triggerVariant: 'filled' | 'outlined' | 'text' = 'text';\n\n  /**\n   * The trigger button size.\n   */\n  @Prop() triggerSize: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The trigger button icon.\n   */\n  @Prop() triggerIcon?: string;\n\n  /**\n   * Show only the icon in the trigger button.\n   */\n  @Prop() triggerIconOnly?: boolean | Breakpoint;\n\n  /**\n   * The trigger button label.\n   */\n  @Prop() triggerLabel?: string;\n\n  /**\n   * The color palette of the trigger button.\n   */\n  @Prop() triggerColor: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'secondary';\n\n  /**\n   * The trigger button accessibility label. If not set, falls back to triggerLabel.\n   */\n  @Prop() triggerA11yLabel?: string;\n\n  /**\n   * Additional CSS class for the trigger button.\n   */\n  @Prop() triggerClass?: string;\n\n  /**\n   * Test ID for the trigger button.\n   */\n  @Prop() triggerTestId?: string;\n\n  /**\n   * Native attributes for the trigger button.\n   */\n  @Prop() triggerNativeAttributes?: { [key: string]: string };\n\n  /**\n   * Disable the menu.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Make the dropdown match the width of the reference regardless of its\n   * contents. Note that this only applies to the minimum width of the\n   * dropdown. The maximum width is still limited by the viewport.\n   */\n  @Prop() justify = false;\n\n  /**\n   * Do not change the size of the dropdown to ensure it isn’t too big to fit\n   * in the viewport (or more specifically, its clipping context).\n   */\n  @Prop() noResize = false;\n\n  /**\n   * Allow overflow when dropdown is open.\n   */\n  @Prop() overflow = false;\n\n  /**\n   * Whether the dropdown trigger should be initialized only before first opening.\n   * Can be useful when trigger is rendered dynamically.\n   */\n  @Prop() delayedTriggerInit = false;\n\n  /**\n   * Emitted when the dropdown is opened.\n   */\n  @Event() catOpen!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the dropdown is closed.\n   */\n  @Event() catClose!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the trigger button is clicked.\n   */\n  @Event() catTriggerClick!: EventEmitter<MouseEvent>;\n\n  @Listen('focusout')\n  onFocusOut(): void {\n    if (!this.dropdown?.isOpen) {\n      return;\n    }\n\n    requestAnimationFrame(() => {\n      if (!this.isMenuItemInFocus()) {\n        this.dropdown?.close(false);\n      }\n    });\n  }\n\n  private getDeepActiveElement(): Element | null {\n    let active = document.activeElement;\n    while (active?.shadowRoot?.activeElement && active.nodeName !== 'CAT-MENU-ITEM') {\n      active = active.shadowRoot.activeElement;\n    }\n    return active;\n  }\n\n  @Listen('keydown', { target: 'document' })\n  onDocumentKeydown(event: KeyboardEvent): void {\n    const navigationKeys =\n      this.arrowNavigation === 'horizontal'\n        ? ['ArrowRight', 'ArrowLeft', 'Home', 'End']\n        : ['ArrowDown', 'ArrowUp', 'Home', 'End'];\n\n    if (!this.dropdown?.isOpen || !navigationKeys.includes(event.key)) {\n      return;\n    }\n\n    const targetElements = this.catMenuItems.filter(item => !item.disabled);\n    if (!targetElements.length) {\n      return;\n    }\n    const activeIdx = targetElements.findIndex(item => this.getDeepActiveElement() === item);\n\n    let targetIdx: number;\n    if (event.key === 'Home') {\n      targetIdx = 0;\n    } else if (event.key === 'End') {\n      targetIdx = targetElements.length - 1;\n    } else {\n      const forwardKey = this.arrowNavigation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';\n      const activeOff = event.key === forwardKey ? 1 : -1;\n      targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n    }\n\n    targetElements[targetIdx].doFocus();\n    event.preventDefault();\n  }\n\n  componentDidLoad(): void {\n    this.syncMenuItems();\n    this.mutationObserver = new MutationObserver(\n      mutations => mutations.some(value => value.target.nodeName === 'CAT-MENU-ITEM') && this.syncMenuItems()\n    );\n    this.mutationObserver?.observe(this.hostElement, {\n      childList: true,\n      attributes: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n  }\n\n  /**\n   * Opens the menu.\n   */\n  @Method()\n  async open(): Promise<void> {\n    await this.dropdown?.open();\n  }\n\n  /**\n   * Closes the menu.\n   */\n  @Method()\n  async close(): Promise<void> {\n    await this.dropdown?.close();\n  }\n\n  /**\n   * Toggles the menu.\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    await this.dropdown?.toggle();\n  }\n\n  private onTriggerClick = (event: CustomEvent<MouseEvent>) => {\n    this.catTriggerClick.emit(event.detail);\n  };\n\n  private onMenuOpen = (event: CustomEvent<FocusEvent>) => {\n    this.catOpen.emit(event.detail);\n    // Set focus to first non-disabled menu item when menu opens\n    requestAnimationFrame(() => {\n      if (!this.isMenuItemInFocus()) {\n        const firstEnabledItem = this.catMenuItems.find(item => !item.disabled);\n        firstEnabledItem?.doFocus();\n      }\n    });\n  };\n\n  private isMenuItemInFocus(): boolean {\n    const activeElement = this.getDeepActiveElement();\n    const isInMenu = activeElement && this.catMenuItems.some(item => activeElement === item);\n\n    return !!(activeElement && isInMenu);\n  }\n\n  private syncMenuItems() {\n    this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));\n  }\n\n  render() {\n    return (\n      <Host>\n        <cat-dropdown\n          ref={el => (this.dropdown = el)}\n          focusTrap={false}\n          placement={this.placement}\n          justify={this.justify}\n          arrowNavigation=\"none\"\n          noResize={this.noResize}\n          overflow={this.overflow}\n          delayedTriggerInit={this.delayedTriggerInit}\n          onCatOpen={this.onMenuOpen}\n          onCatClose={() => this.catClose.emit()}\n        >\n          <cat-button\n            slot=\"trigger\"\n            part=\"trigger\"\n            variant={this.triggerVariant}\n            size={this.triggerSize}\n            icon={this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined)}\n            iconOnly={this.triggerIconOnly ?? this.triggerLabel === undefined}\n            color={this.triggerColor}\n            a11yLabel={this.triggerA11yLabel ?? this.triggerLabel}\n            class={this.triggerClass}\n            testId={this.triggerTestId}\n            nativeAttributes={{\n              ...this.triggerNativeAttributes,\n              'aria-haspopup': 'menu'\n            }}\n            disabled={this.disabled}\n            onCatClick={this.onTriggerClick}\n          >\n            {!this.triggerIconOnly && <slot name=\"trigger-label\">{this.triggerLabel}</slot>}\n          </cat-button>\n          <nav role=\"menu\" slot=\"content\" class=\"cat-menu-list\" aria-orientation={this.arrowNavigation}>\n            <ul>\n              <slot></slot>\n            </ul>\n          </nav>\n        </cat-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-pagination.js

@@ -57,9 +57,9 @@ const CatPagination$1 = /*@__PURE__*/ proxyCustomElement(class CatPagination ext
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h("nav", { key: '92edf5d03bcf32e751e5a477280e4df4a48fe92d', role: "navigation" }, h("ol", { key: 'd3abfee45a341bd03c1f6d1e1f275f5714817539', class: {
+        return (h("nav", { key: 'ad282454abdbfd0fbc50097b0d635cbb933bb752', "aria-label": catI18nRegistry.t('pagination.ariaLabel') }, h("ol", { key: '8007380dc28cce2c6149e7eece49ec5f5fe0965b', class: {
                 [`cat-pagination-${this.size}`]: Boolean(this.size)
-            } }, h("li", { key: '7d9a267ca412d15e869321b331729810cc09253c' }, h("cat-button", { key: 'da1fb4fca4ce3e34eb269fbbd3003baad95fe5da', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: '14237910fe38dbc5d829b804ee5fd9613a68c783' }, h("cat-button", { key: '9e7ad815b7708ec9c1200bd923fa61be5c6e9552', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
+            } }, h("li", { key: 'fc6b7bd088fdfd80480e92201912ac38502b0a82' }, h("cat-button", { key: 'eff8810da8b950897f7f161186eb129f9817f4d9', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: 'f974b12f22475beb32fe5a314743fd0adec08133' }, h("cat-button", { key: '08ca8508120395e559da76b04b7375c1f1cead68', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
     }
     get isFirst() {
         return this.page === 0;

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

@@ -1 +1 @@
-{"file":"cat-pagination.js","mappings":"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","names":["CatPagination","__stencil_proxyCustomElement","i18n"],"sources":["src/components/cat-pagination/cat-pagination.scss?tag=cat-pagination&encapsulation=shadow","src/components/cat-pagination/cat-pagination.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nol {\n  display: flex;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nli {\n  display: inline-flex;\n  justify-content: center;\n\n  &.dots {\n    @include cat-select(none);\n  }\n}\n\n// ----- variant\n\n:host([variant='outlined']) {\n  ol {\n    gap: 0.75rem;\n  }\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .cat-pagination-#{$size} {\n    li.dots,\n    li.text {\n      height: map.get($button-sizes, $size);\n      line-height: map.get($button-sizes, $size);\n      font-size: cat-body-font-size($fontSize);\n    }\n\n    li.dots {\n      width: map.get($button-sizes, $size);\n    }\n  }\n\n  :host([variant='outlined']) {\n    .cat-pagination-#{$size} {\n      gap: map.get($button-sizes, $size) * 0.25;\n    }\n  }\n}\n\n@include size('xs', 's');\n@include size('s', 'm');\n@include size('m', 'm');\n@include size('l', 'm');\n@include size('xl', 'l');\n","import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n */\n@Component({\n  tag: 'cat-pagination',\n  styleUrl: 'cat-pagination.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatPagination {\n  @Element() hostElement!: HTMLElement;\n  /**\n   * The current page.\n   */\n  @Prop({ mutable: true }) page = 0;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pageCount = 1;\n\n  /**\n   * The number of pages to be shown around the current page.\n   */\n  @Prop() activePadding = 1;\n\n  /**\n   * The number of pages to be shown at the edges.\n   */\n  @Prop() sidePadding = 1;\n\n  /**\n   * The size of the buttons.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The rendering style of the buttons.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Use compact pagination mode.\n   */\n  @Prop() compact = false;\n\n  /**\n   * The icon of the \"previous\" button.\n   */\n  @Prop() iconPrev = '$cat:pagination-left';\n\n  /**\n   * The icon of the \"next\" button.\n   */\n  @Prop() iconNext = '$cat:pagination-right';\n\n  /**\n   * Emitted when the page of the pagination has changed.\n   */\n  @Event() catChange!: EventEmitter<number>;\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    return (\n      <nav role=\"navigation\">\n        <ol\n          class={{\n            [`cat-pagination-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isFirst}\n              a11yLabel={i18n.t('pagination.prev')}\n              icon={this.iconPrev}\n              iconOnly\n              onClick={() => this.setPage(this.page - 1)}\n            ></cat-button>\n          </li>\n          {this.content}\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isLast}\n              a11yLabel={i18n.t('pagination.next')}\n              icon={this.iconNext}\n              iconOnly\n              onClick={() => this.setPage(this.page + 1)}\n            ></cat-button>\n          </li>\n        </ol>\n      </nav>\n    );\n  }\n\n  get isFirst() {\n    return this.page === 0;\n  }\n\n  get isLast() {\n    return this.page === this.pageCount - 1;\n  }\n\n  private setPage(value: number) {\n    this.page = value;\n    this.catChange.emit(this.page);\n  }\n\n  get pages() {\n    if (!this.sidePadding && !this.activePadding) {\n      return [this.page];\n    }\n\n    const result = new Set<number>();\n    const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n    const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;\n    const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n    const maxActivepage = maxPage\n      ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n      : this.pageCount - this.sidePadding;\n\n    this.addSeq(result, 0, minActivepage);\n    if (!minPage && !maxPage) {\n      this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n    }\n    this.addSeq(result, maxActivepage, this.pageCount);\n\n    return [...result];\n  }\n\n  private addSeq(set: Set<number>, start: number, end: number) {\n    const _start = this.clamp(start, 0, this.pageCount);\n    const _end = this.clamp(end, 0, this.pageCount);\n    Array(_end - _start)\n      .fill(0)\n      .forEach((_, i) => set.add(_start + i));\n  }\n\n  private clamp(num: number, min: number, max: number) {\n    return Math.min(Math.max(num, min), max);\n  }\n\n  private get content() {\n    if (this.compact) {\n      return (\n        <li class=\"text\">\n          {this.page + 1}/{this.pageCount}\n        </li>\n      );\n    }\n\n    return this.pages.map((page, i) => [\n      i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n      <li>\n        <cat-button\n          variant={this.variant}\n          size={this.size}\n          round={this.round}\n          color={this.page === page ? 'primary' : undefined}\n          active={this.page === page}\n          a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n          a11yCurrent={this.page === page ? 'step' : undefined}\n          onClick={() => this.setPage(page)}\n        >\n          {page + 1}\n        </cat-button>\n      </li>\n    ]);\n  }\n}\n"],"version":3}
+{"file":"cat-pagination.js","mappings":"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","names":["CatPagination","__stencil_proxyCustomElement","i18n"],"sources":["src/components/cat-pagination/cat-pagination.scss?tag=cat-pagination&encapsulation=shadow","src/components/cat-pagination/cat-pagination.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nol {\n  display: flex;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\nli {\n  display: inline-flex;\n  justify-content: center;\n\n  &.dots {\n    @include cat-select(none);\n  }\n}\n\n// ----- variant\n\n:host([variant='outlined']) {\n  ol {\n    gap: 0.75rem;\n  }\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .cat-pagination-#{$size} {\n    li.dots,\n    li.text {\n      height: map.get($button-sizes, $size);\n      line-height: map.get($button-sizes, $size);\n      font-size: cat-body-font-size($fontSize);\n    }\n\n    li.dots {\n      width: map.get($button-sizes, $size);\n    }\n  }\n\n  :host([variant='outlined']) {\n    .cat-pagination-#{$size} {\n      gap: map.get($button-sizes, $size) * 0.25;\n    }\n  }\n}\n\n@include size('xs', 's');\n@include size('s', 'm');\n@include size('m', 'm');\n@include size('l', 'm');\n@include size('xl', 'l');\n","import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n/**\n * A navigation component to switch between different pages of paged chunks of\n * data such as a table. Pagination is built with list HTML elements and a\n * wrapping `<nav>` element to identify it as a navigation section to screen\n * readers and other assistive technologies. Furthermore, the current page is\n * correctly highlighted using `aria-current`.\n */\n@Component({\n  tag: 'cat-pagination',\n  styleUrl: 'cat-pagination.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatPagination {\n  @Element() hostElement!: HTMLElement;\n  /**\n   * The current page.\n   */\n  @Prop({ mutable: true }) page = 0;\n\n  /**\n   * The total number of pages.\n   */\n  @Prop() pageCount = 1;\n\n  /**\n   * The number of pages to be shown around the current page.\n   */\n  @Prop() activePadding = 1;\n\n  /**\n   * The number of pages to be shown at the edges.\n   */\n  @Prop() sidePadding = 1;\n\n  /**\n   * The size of the buttons.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The rendering style of the buttons.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'text';\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Use compact pagination mode.\n   */\n  @Prop() compact = false;\n\n  /**\n   * The icon of the \"previous\" button.\n   */\n  @Prop() iconPrev = '$cat:pagination-left';\n\n  /**\n   * The icon of the \"next\" button.\n   */\n  @Prop() iconNext = '$cat:pagination-right';\n\n  /**\n   * Emitted when the page of the pagination has changed.\n   */\n  @Event() catChange!: EventEmitter<number>;\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    return (\n      <nav aria-label={i18n.t('pagination.ariaLabel')}>\n        <ol\n          class={{\n            [`cat-pagination-${this.size}`]: Boolean(this.size)\n          }}\n        >\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isFirst}\n              a11yLabel={i18n.t('pagination.prev')}\n              icon={this.iconPrev}\n              iconOnly\n              onClick={() => this.setPage(this.page - 1)}\n            ></cat-button>\n          </li>\n          {this.content}\n          <li>\n            <cat-button\n              variant={this.variant}\n              size={this.size}\n              round={this.round}\n              disabled={this.isLast}\n              a11yLabel={i18n.t('pagination.next')}\n              icon={this.iconNext}\n              iconOnly\n              onClick={() => this.setPage(this.page + 1)}\n            ></cat-button>\n          </li>\n        </ol>\n      </nav>\n    );\n  }\n\n  get isFirst() {\n    return this.page === 0;\n  }\n\n  get isLast() {\n    return this.page === this.pageCount - 1;\n  }\n\n  private setPage(value: number) {\n    this.page = value;\n    this.catChange.emit(this.page);\n  }\n\n  get pages() {\n    if (!this.sidePadding && !this.activePadding) {\n      return [this.page];\n    }\n\n    const result = new Set<number>();\n    const minPage = this.page <= this.sidePadding + this.activePadding + 1;\n    const minActivepage = minPage ? this.sidePadding + 2 * this.activePadding + 2 : this.sidePadding;\n    const maxPage = this.page >= this.pageCount - this.sidePadding - this.activePadding - 2;\n    const maxActivepage = maxPage\n      ? this.pageCount - this.sidePadding - 2 * this.activePadding - 2\n      : this.pageCount - this.sidePadding;\n\n    this.addSeq(result, 0, minActivepage);\n    if (!minPage && !maxPage) {\n      this.addSeq(result, this.page - this.activePadding, this.page + this.activePadding + 1);\n    }\n    this.addSeq(result, maxActivepage, this.pageCount);\n\n    return [...result];\n  }\n\n  private addSeq(set: Set<number>, start: number, end: number) {\n    const _start = this.clamp(start, 0, this.pageCount);\n    const _end = this.clamp(end, 0, this.pageCount);\n    Array(_end - _start)\n      .fill(0)\n      .forEach((_, i) => set.add(_start + i));\n  }\n\n  private clamp(num: number, min: number, max: number) {\n    return Math.min(Math.max(num, min), max);\n  }\n\n  private get content() {\n    if (this.compact) {\n      return (\n        <li class=\"text\">\n          {this.page + 1}/{this.pageCount}\n        </li>\n      );\n    }\n\n    return this.pages.map((page, i) => [\n      i > 0 && this.pages[i - 1] !== page - 1 ? <li class=\"dots\">…</li> : null,\n      <li>\n        <cat-button\n          variant={this.variant}\n          size={this.size}\n          round={this.round}\n          color={this.page === page ? 'primary' : undefined}\n          active={this.page === page}\n          a11yLabel={i18n.t('pagination.page', { page: page + 1 })}\n          a11yCurrent={this.page === page ? 'step' : undefined}\n          onClick={() => this.setPage(page)}\n        >\n          {page + 1}\n        </cat-button>\n      </li>\n    ]);\n  }\n}\n"],"version":3}

package/dist/components/cat-radio-group.js

@@ -78,7 +78,7 @@ const CatRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatRadioGroup ext
         }
     }
     render() {
-        return (h("div", { key: 'bddb6ec500cf6153286300ae20bad8925d4dcfd1', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: '55c9ce43491b01ee35183b3ba880f62e49a58f0f' })));
+        return (h("div", { key: '092e314344de49819b981fc58295c4e6985bf03e', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: '10740a5816e614c5e3f046110b84728de398cdc4' })));
     }
     init() {
         this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));

package/dist/components/cat-radio.js

@@ -77,13 +77,13 @@ const CatRadio$1 = /*@__PURE__*/ proxyCustomElement(class CatRadio extends HTMLE
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: 'd5bdfdba836cb7f6ea32ffd9befa8e21b3681f1d' }, h("label", { key: 'a4bc5f97bc1c9313fc42ed4e6ffa4f3dcdf0b5db', htmlFor: this.id, class: {
+        return (h(Host, { key: '0049b858f753639137fc5f1868300be789583fc5' }, h("label", { key: 'd4a67cf145780cec29e6c8148bca5b9f2e4d862f', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: '26d8bda2a2d7eb9479762cde79ddcbf4ffa66c31', class: "radio" }, h("input", { key: '93aa9f8c9c6c80032806821d4a25d211351f5ae7', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'de64c16b1b208ee39173a479961c8a9c35398891', class: "circle" })), h("span", { key: '31aee49255f90b202fa24bd7e3454faef997403d', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '42fd54752399f0f598051e3b88df68111d6e5871', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'dd8ebf787f21f0b3ec2d4b3502f5ed55ffdc1828', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '2107fc47f09c98351657658066642380848711c6', class: "circle-placeholder" }), h(CatFormHint, { key: 'ff77ec0e74627dab0b823150681c8be5a3ad9d98', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { key: 'ee81c40a3fe2e10d4fc4ed1deb1f81816936a8fd', class: "radio" }, h("input", { key: 'd5c5b924ec1cffa7c7f02d8bf4faf689876802fa', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'efa28acc6827dbc2aeeae01ead830e40d5372493', class: "circle" })), h("span", { key: 'beaaf1b38e100b636e0496dda1123dff7cf93a33', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'ada26a86266f139f09353d4275b9d4b13755ad67', name: "label" })) || this.label)), this.hasHint && (h("div", { key: 'bb3fe9a5dbefc66d6a3075cefbb64deaab153f23', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '130db3e44b1102561d69538ebac20289de598183', class: "circle-placeholder" }), h(CatFormHint, { key: 'b914b9b25c658700abcc9ea932b95861f10d966d', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;

package/dist/components/cat-scrollable2.js

@@ -387,13 +387,13 @@ const CatScrollable = /*@__PURE__*/ proxyCustomElement(class CatScrollable exten
     }
     render() {
         return [
-            h("div", { key: 'a74da54b345c5d35e790a767112256623298fb45', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { key: 'c1210162912c663853d3693c1d390c11cc3fce15', class: "shadow-top" }), !this.noShadowX && h("div", { key: '7926685bbacaf7338667e507455ddb91e8fa716f', class: "shadow-left" }), !this.noShadowX && h("div", { key: '2b5c384ab9ea25f4cfc03e4fa96c494d29b220a3', class: "shadow-right" }), !this.noShadowY && h("div", { key: '9beefb53981be683f2fff1e3d199a5cc79f939b6', class: "shadow-bottom" })),
-            h("div", { key: '84440bc3d95ec0686ecc080b70ed763e5a140851', ref: el => (this.scrollElement = el), class: {
+            h("div", { key: '01170df73b6535997e71f3a35cce5edcc864969f', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { key: '26bcf225d5416926be598ada1a533119db191fb8', class: "shadow-top" }), !this.noShadowX && h("div", { key: '2809cafcf67edf778e3508907fd4500d46da185e', class: "shadow-left" }), !this.noShadowX && h("div", { key: '78d1b9d3768be4af4af9e87c04428ec59e5ffc1e', class: "shadow-right" }), !this.noShadowY && h("div", { key: '81084c2ed0a43a136d5ec46a1a2307410036cede', class: "shadow-bottom" })),
+            h("div", { key: '7ec4056d8752be30c4e97f75ff3aa905dd7ac96a', ref: el => (this.scrollElement = el), class: {
                     'scrollable-content': true,
                     'scroll-x': !this.noOverflowX,
                     'scroll-y': !this.noOverflowY,
                     'no-overscroll': this.noOverscroll
-                } }, h("slot", { key: '4f001c11db1d3c8f7d23ac8187d356abe88ef190' }))
+                } }, h("slot", { key: '1a4d1d317fc7e92160ff21fb743db8b3edad28a5' }))
         ];
     }
     attachEmitter(from, emitter) {

package/dist/components/cat-select-demo.js

@@ -155,7 +155,7 @@ const CatSelectTest = /*@__PURE__*/ proxyCustomElement(class CatSelectTest exten
         setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
     }
     render() {
-        return (h(Host, { key: 'a67d8afd350d4dd87c98af1e1811adf9421e9758', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, h("cat-select", { key: '0f408fa2737fa2d8e0bae223f73cdf9c87e1b06e', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, h("span", { key: '8ed25b6300d1078327125799241713f2af05c65d', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { key: 'a470242e781811524325e7f887b6389734d1bfec', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '6ea9ac8aed02b9f65571441a03de45c42f0a06e9', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'a2bfa381f885bd2add969045ebf3b41155200a19', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '5ac14c9554ac770b5a22cf8d0fa323465a5cd748', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), h("cat-select", { key: 'ce1dd654fb032a9e7a042627f49447621dcba078', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), h("cat-select", { key: '931e2a75552354348e8a202bc4ff3ee302dfcdc0', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), h("cat-dropdown", { key: '2a6e57f17442e18efc7cf31e29dbf108c2938467', overflow: true }, h("cat-button", { key: 'd7f34c6ee8493df2693191ad9e257a8c56731d59', slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { key: '9935750f4063e8baf6b3e0e645b52f8143234d05', slot: "content", style: { width: '400px' } }, h("cat-select", { key: '5472f568bb7826b44ed8e997b5ed1fc624d81fce', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
+        return (h(Host, { key: '0b110383eafefbb51a89f8e4ffdcf135cc295c61', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, h("cat-select", { key: '4acd0e15ca9c1cc6d4dd61c99ddafe3c68076d9d', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, h("span", { key: '4a1d2877a54109202783e74eefac9c2c1a3855c9', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { key: '223d911d289e35812d6d4c244f40e44bee1e6665', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '25efd965a37df80e7f047eaf234d53b2efc3a8e1', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'c7305a291c8671b4c949aca1f218691a450f5892', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'e0a098e370475f37eb65445bce5213b2e631fb10', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), h("cat-select", { key: 'ec16873b5ddec4aa6ef5d228edf6c6fd4c6a544b', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), h("cat-select", { key: '822aa2fa1565b4e434c1746507d71fe5e9db250c', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), h("cat-dropdown", { key: '9a72d5e8f6b732915ac8e2ba9299e4182b615037', overflow: true }, h("cat-button", { key: '37ed8862808033ef771388ee0c79e8aec2881d77', slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { key: '6399c1b3926dff5b70214edca7396c8712ee5930', slot: "content", style: { width: '400px' } }, h("cat-select", { key: 'd113eef5a77b89b531902fbef66e76e2aaf3bfb3', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
     }
     get countryConnector() {
         return {

package/dist/components/cat-select2.js

@@ -252,7 +252,7 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class CatSelect extends HTMLE
             if (!oldState.isResolving) {
                 this.valueChangedBySelection = true;
                 this.value = newValue;
-                this.catChange.emit();
+                this.catChange.emit(newValue);
             }
             this.showErrorsIfTimeout();
         }
@@ -457,18 +457,18 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class CatSelect extends HTMLE
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: '7489b4123c900ebefa06dcebde32b0a4ee52d4a3' }, h("div", { key: '9669441806e8bebc5f583957cc1a24330f06085a', class: {
+        return (h(Host, { key: 'efdb83ec9f52b391d279ece98996723fa558a87a' }, h("div", { key: 'eceeb2c9d577a78e5e0e52b1bde30706c8bb36ea', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false,
                 'select-multiple': this.multiple
-            } }, h("div", { key: 'a94a2217157c125e34802b140843d2fffd63283f', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '557e2754156cb4484972dcccca103451db00a01e', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '8d229578a218717dbe78a63e416cba36cc300c37', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'f1700687e21b73edce905bc8325479bed8c31962', name: "label" })) || this.label, h("div", { key: '109009794bab604eca5d3f690858145ac770ea81', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '5868ecd309ab485a60439fd6743be56947f9d43e', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '8e61a17e1d1b9f3fc584c08824b243b5f0c07c0f', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '9d211cd7674cda6f9bcfeebaf1252055239421ce', class: "select-container" }, h("div", { key: '878137436714dff589d4731ada14d11e443ab4a6', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: '7a268001a9bc895aa5fd1157a57f89555ad9e868', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
+            } }, h("div", { key: 'a5803daa82570587270e53b640f098f2cdb0a3e5', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '28cd43343dd2a806f612f5691bc7a1cdf0d6df72', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '0c80bc9e92fc6090231eb04ff574198da6119639', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '596fc3bceee736805d4047f879b28464ac12981e', name: "label" })) || this.label, h("div", { key: '02cbb3685b1b4d40566f67b20374309859d134e2', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'c14d1a9ca86d4693c095fdf14fea202843ce6dab', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '44678be1c8667215a4fbaba68510f8f40cd5ef1e', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: 'e899d7810102e93836309d644cf842a366c368a1', class: "select-container" }, h("div", { key: '2c3707ee5070ac8a9d4a40a3eb3325a93a5664b5', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: 'b35e65763cd13120de56eb8592dc39d459aae199', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
                 pill: true,
                 'select-no-open': true,
                 'select-option-active': this.state.activeSelectionIndex === i
-            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: 'dd9c6f767f5cfc9c2e3e0f37dd4bad075f1169c8', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: 'c3ed10971f8f29d352df71a5bb577ff3f4499ccd' }), this.invalid && (h("cat-icon", { key: 'c4788a44a097252f58c43769edec339c57ed74e4', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: 'c7eb2d1f582c83ef1f257652f302ba6cf10e8d3c', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: 'e3d92ddd13d486940dbc35743be8bd65c841160e' }), this.invalid && (h("cat-icon", { key: '943a586107b4e449cea8006819442e78a8e84c6c', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
             !this.disabled &&
             !this.state.isResolving &&
-            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: 'a1ae4dfc03feec1a556f818ea08ba8a53b10f132', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: '2557e44ce584d96cc8497cee27d8e6e8f6464fd9', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: '795de862359d06464591e32d3a410a8974a55028', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: 'b88fc1b204533e3714b8533c10b7a817fe2d4ef1', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: 'f0fe6e0c398c7682363174ec6e9f04eaa8e25073', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
+            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: '1cb61ffc8c383f964672479d710d7ffaad5c6081', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? catI18nRegistry.t('select.close') : catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: 'c231a520a632a58aec59ef56ee97f9d7e4ec5f40', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: 'd53fc5dd1b2a86a2f69d56e270e660aade45bd98', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: '979bffc2506e09806c4f0e6c467efad884254a8c', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: '8b5ceec249c36079ebbebb3fde24aa2bf340f040', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
             ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : catI18nRegistry.t('select.empty')))))))));