@haiilo/catalyst 14.4.0 → 14.5.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"cat-menu.js","sourceRoot":"","sources":["../../../src/components/cat-menu/cat-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/cat-menu-item/cat-menu-item.js

@@ -0,0 +1,387 @@
+import { h, Host } from "@stencil/core";
+let nextUniqueId = 0;
+/**
+ * A menu item component that renders as a button with proper ARIA semantics.
+ */
+export class CatMenuItem {
+    constructor() {
+        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);
+    }
+    static get is() { return "cat-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for the menu item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "identifier"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of an icon to be displayed in the menu item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info'",
+                    "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The color of the menu item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the menu item is active."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'filled' | 'outlined' | 'text'",
+                    "resolved": "\"filled\" | \"outlined\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the menu item button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'text'"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The loading state of the menu item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading"
+            },
+            "iconOnly": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | Breakpoint",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\" | boolean",
+                    "references": {
+                        "Breakpoint": {
+                            "location": "import",
+                            "path": "../../utils/breakpoints",
+                            "id": "src/utils/breakpoints.ts::Breakpoint"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the actual button content and only display the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-only",
+                "defaultValue": "false"
+            },
+            "iconRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the icon on the right."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-right",
+                "defaultValue": "false"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A destination to link to, rendered in the href attribute of a link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "url"
+            },
+            "urlTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self'",
+                    "resolved": "\"_blank\" | \"_self\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies where to open the linked document."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "url-target"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies that the menu item should be disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "nativeAttributes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "undefined | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributes that will be added to the native HTML button element"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "testId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for the underlying native element that is used for\ntesting purposes. The attribute is added as `data-test` attribute and acts\nas a shorthand for `nativeAttributes={ 'data-test': 'test-Id' }`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "test-id"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "catClick",
+                "name": "catClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the trigger button is clicked."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "doFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically move focus to the menu item.",
+                    "tags": []
+                }
+            },
+            "doBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically remove focus from the menu item.",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=cat-menu-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cat-menu-item.js","sourceRoot":"","sources":["../../../src/components/cat-menu-item/cat-menu-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAGtF,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;GAEG;AAKH,MAAM,OAAO,WAAW;IAJxB;QAKmB,QAAG,GAAG,iBAAiB,EAAE,YAAY,EAAE,CAAC;QAoBzD;;WAEG;QACK,WAAM,GAAG,KAAK,CAAC;QAEvB;;WAEG;QACK,YAAO,GAAmC,MAAM,CAAC;QAOzD;;WAEG;QACK,aAAQ,GAAyB,KAAK,CAAC;QAE/C;;WAEG;QACK,cAAS,GAAG,KAAK,CAAC;QAY1B;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;KAwE1B;IAjIC,IAAY,EAAE;QACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;IACrC,CAAC;IA0ED;;OAEG;IAEH,KAAK,CAAC,OAAO,CAAC,OAAsB;QAClC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH;gBACE,mEACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,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;wBAChB,GAAG,IAAI,CAAC,gBAAgB;wBACxB,IAAI,EAAE,UAAU;wBAChB,QAAQ,EAAE,IAAI;qBACf,EACD,UAAU,EAAE,IAAI,CAAC,UAAU;oBAE3B,8DAAa,CACF,CACV,CACA,CACR,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,KAA8B;QAC/C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}

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

@@ -52,9 +52,9 @@ export class CatPagination {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h("nav", { key: '4410f21a10719ef11bfe049f02812efa5a5aedb5', "aria-label": i18n.t('pagination.ariaLabel') }, h("ol", { key: 'c4c0074f823ac1c71e9e2f665fcecc5d0c4dc296', class: {
+        return (h("nav", { key: 'ad282454abdbfd0fbc50097b0d635cbb933bb752', "aria-label": i18n.t('pagination.ariaLabel') }, h("ol", { key: '8007380dc28cce2c6149e7eece49ec5f5fe0965b', class: {
                 [`cat-pagination-${this.size}`]: Boolean(this.size)
-            } }, h("li", { key: '0c64e83850c9cf111d37bf7df6cd41b7d892ef95' }, h("cat-button", { key: 'f24fd006684a4e067a054c685d10a42620ca3723', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: i18n.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: 'fd9db7231f5d720da01c78eca64a46251896a0f2' }, h("cat-button", { key: '909bc30138261010bc6cf2a23b8b804dade0db66', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: i18n.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: i18n.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: i18n.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
     }
     get isFirst() {
         return this.page === 0;

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

@@ -75,13 +75,13 @@ export class CatRadio {
     }
     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/collection/components/cat-radio-group/cat-radio-group.js

@@ -70,7 +70,7 @@ export class CatRadioGroup {
         }
     }
     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/collection/components/cat-scrollable/cat-scrollable.js

@@ -69,13 +69,13 @@ export class CatScrollable {
     }
     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/collection/components/cat-select/cat-select.js

@@ -147,7 +147,7 @@ export class CatSelect {
             if (!oldState.isResolving) {
                 this.valueChangedBySelection = true;
                 this.value = newValue;
-                this.catChange.emit();
+                this.catChange.emit(newValue);
             }
             this.showErrorsIfTimeout();
         }
@@ -352,18 +352,18 @@ export class CatSelect {
     }
     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" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '8e61a17e1d1b9f3fc584c08824b243b5f0c07c0f', class: "label-optional", "aria-hidden": "true" }, "(", i18n.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" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '44678be1c8667215a4fbaba68510f8f40cd5ef1e', class: "label-optional", "aria-hidden": "true" }, "(", i18n.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: i18n.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: i18n.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: i18n.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 ? i18n.t('select.close') : i18n.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: i18n.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 ? i18n.t('select.close') : i18n.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 : i18n.t('select.empty')))))))));
@@ -859,18 +859,13 @@ export class CatSelect {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue",
+                    "original": "CatSelectValue",
                     "resolved": "CatSelectMultipleTaggingValue | CatSelectTaggingValue | string | string[] | undefined",
                     "references": {
-                        "CatSelectTaggingValue": {
+                        "CatSelectValue": {
                             "location": "local",
                             "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
-                            "id": "src/components/cat-select/cat-select.tsx::CatSelectTaggingValue"
-                        },
-                        "CatSelectMultipleTaggingValue": {
-                            "location": "local",
-                            "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
-                            "id": "src/components/cat-select/cat-select.tsx::CatSelectMultipleTaggingValue"
+                            "id": "src/components/cat-select/cat-select.tsx::CatSelectValue"
                         }
                     }
                 },
@@ -1263,12 +1258,13 @@ export class CatSelect {
                     "text": "Emitted when the value is changed."
                 },
                 "complexType": {
-                    "original": "InputEvent",
-                    "resolved": "InputEvent",
+                    "original": "CatSelectValue",
+                    "resolved": "CatSelectMultipleTaggingValue | CatSelectTaggingValue | string | string[]",
                     "references": {
-                        "InputEvent": {
-                            "location": "global",
-                            "id": "global::InputEvent"
+                        "CatSelectValue": {
+                            "location": "local",
+                            "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
+                            "id": "src/components/cat-select/cat-select.tsx::CatSelectValue"
                         }
                     }
                 }