@haiilo/catalyst 14.5.0 → 14.5.1

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

@@ -59,7 +59,7 @@ export class CatDropdown {
         this.noInitialFocus = false;
         /**
          * Trigger element will not receive focus when dropdown is closed.
-         * @deprecated the property can be removed, focus is arranged internally
+         * Please use this property carefully, consider using cat-menu over using this property
          */
         this.noReturnFocus = false;
         /**
@@ -105,14 +105,13 @@ export class CatDropdown {
         }
     }
     globalClickHandler(event) {
-        if (this.isOpen &&
-            !this.noAutoClose &&
-            // check if click was outside of the dropdown content
-            !event.composedPath().includes(this.content) &&
-            // check if click was not on an element marked with data-dropdown-no-close
-            !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
-            this.close();
-        }
+        this.handleClickOutside(event);
+    }
+    globalMouseDownHandler(event) {
+        this.handleClickOutside(event);
+    }
+    globalTouchStartHandler(event) {
+        this.handleClickOutside(event);
     }
     /**
      * Toggles the dropdown.
@@ -150,7 +149,7 @@ export class CatDropdown {
                         tabbableOptions: this.tabbableOptions,
                         allowOutsideClick: true,
                         onPostActivate: () => this.catOpen.emit(),
-                        setReturnFocus: elem => (!this.isFocusVisible ? false : this.trigger || elem),
+                        setReturnFocus: elem => (!this.isFocusVisible || this.noReturnFocus ? false : this.trigger || elem),
                         isKeyForward: event => {
                             if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||
                                 (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')) {
@@ -216,7 +215,16 @@ export class CatDropdown {
         this.cleanupFloatingUi = undefined;
     }
     render() {
-        return (h(Host, { key: '865e31b60994932637b3530afe48b2317868ecd3' }, h("slot", { key: '393e1697e6dd728bb2f3c8294370de7deaba95d1', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '2bd3a3528005bebf7dcba84e52f5b6f6786a7f50', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '74ae76bb604041881af0247002d6a383dc386f50', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '6fd6acedb2c4044edd8f09f1418916e5086465fc', name: "content" }))));
+        return (h(Host, { key: 'b3cd898551dc3e6d5396db1a4a14bc97cf4a2024' }, h("slot", { key: '6875cfad353891deb54ebcd5155d7ea466384131', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '93fdda4c49a7a956f72548699200feb309779081', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '13a68b5f706e61e87599c463e58f1bf932b2d261', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '06357a4a970241938900853d78c88427c6a9e69a', name: "content" }))));
+    }
+    handleClickOutside(event) {
+        if (!this.noAutoClose &&
+            // check if click was outside of the dropdown content
+            !event.composedPath().includes(this.content) &&
+            // check if click was not on an element marked with data-dropdown-no-close
+            !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
+            this.close();
+        }
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -518,11 +526,8 @@ export class CatDropdown {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "the property can be removed, focus is arranged internally"
-                        }],
-                    "text": "Trigger element will not receive focus when dropdown is closed."
+                    "tags": [],
+                    "text": "Trigger element will not receive focus when dropdown is closed.\nPlease use this property carefully, consider using cat-menu over using this property"
                 },
                 "getter": false,
                 "setter": false,
@@ -700,8 +705,20 @@ export class CatDropdown {
             }, {
                 "name": "click",
                 "method": "globalClickHandler",
-                "target": "window",
-                "capture": false,
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "mousedown",
+                "method": "globalMouseDownHandler",
+                "target": "document",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "touchstart",
+                "method": "globalTouchStartHandler",
+                "target": "document",
+                "capture": true,
                 "passive": false
             }];
     }

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

@@ -1 +1 @@
-{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, shift, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport findFirstTabbableIncludeHidden from '../../utils/first-tabbable-with-visibility-hidden';\n\nlet nextUniqueId = 0;\nexport type DropdownPlacement = Placement;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n  tag: 'cat-dropdown',\n  styleUrl: 'cat-dropdown.scss',\n  shadow: true\n})\nexport class CatDropdown {\n  private static readonly OFFSET = 4;\n  private readonly id = nextUniqueId++;\n  private triggerSlot!: HTMLSlotElement;\n  private trigger?: FocusableElement;\n  private anchorSlot!: HTMLSlotElement;\n  private anchor?: Element;\n  private content!: HTMLElement;\n  private trap?: focusTrap.FocusTrap;\n  private _isOpen: boolean | null = false;\n  private cleanupFloatingUi?: () => void;\n  private readonly tabbableOptions = { getShadowRoot: true };\n  /**\n   * Tracking the origin of opening the dropdown and specify if initial focus should be set.\n   * Currently we set it only when the origin is keyboard.\n   * We might not need to track this in future when focus-visible support is improved across browsers\n   */\n  private isFocusVisible = false;\n\n  /**\n   * The placement of the dropdown.\n   */\n  @Prop() placement: Placement = 'bottom-start';\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 close the dropdown on outside clicks.\n   */\n  @Prop() noAutoClose = false;\n\n  /**\n   * Do not navigate focus inside the dropdown via vertical arrow keys.\n   * @deprecated use cat-menu\n   */\n  @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\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   * No element in dropdown will receive focus when dropdown is open.\n   * By default, the first element in tab order will receive a focus.\n   * @deprecated\n   * Using noInitialFocus property would be a bad practice from a11y perspective.\n   * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.\n   * hasInitialFocus should resolve the cause of the original problem instead.\n   */\n  @Prop() noInitialFocus = false;\n\n  /**\n   * Whether the dropdown is open.\n   * @readonly\n   */\n  @Prop() get isOpen(): boolean {\n    return this._isOpen ?? false;\n  }\n\n  /**\n   * Trigger element will not receive focus when dropdown is closed.\n   * @deprecated the property can be removed, focus is arranged internally\n   */\n  @Prop() noReturnFocus = 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   * Whether the focus should be trapped inside dropdown popup.\n   * Use it only when the dropdown popup content has role dialog.\n   * @internal\n   */\n  @Prop() focusTrap = true;\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  @Listen('catClick')\n  clickHandler(event: CustomEvent<MouseEvent>) {\n    if (!this.trigger && this.delayedTriggerInit) {\n      this.isFocusVisible = this.isEventOriginFromKeyboard(event.detail);\n      this.initTrigger();\n      this.toggle();\n    }\n\n    // hide dropdown on button clicks inside the dropdown content\n    const path = event.composedPath();\n    if (\n      !this.noAutoClose &&\n      // check if click was inside of the dropdown content\n      path.includes(this.content) &&\n      // check if click was not on a trigger for a sub-dropdown\n      (event.target as Element)?.slot !== 'trigger' &&\n      // check if click was not an element marked with data-dropdown-no-close\n      !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n    ) {\n      this.close();\n    }\n  }\n\n  @Listen('keydown')\n  keydownHandler(event: KeyboardEvent) {\n    if (this.isOpen && event.key === 'Escape') {\n      this.close();\n    }\n  }\n\n  @Listen('click', { target: 'window' })\n  globalClickHandler(event: MouseEvent) {\n    if (\n      this.isOpen &&\n      !this.noAutoClose &&\n      // check if click was outside of the dropdown content\n      !event.composedPath().includes(this.content) &&\n      // check if click was not on an element marked with data-dropdown-no-close\n      !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n    ) {\n      this.close();\n    }\n  }\n\n  /**\n   * Toggles the dropdown.\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this._isOpen ? this.close() : this.open();\n  }\n\n  /**\n   * Opens the dropdown.\n   * @param isFocusVisible is dropdown should receive visible focus when it's opened.\n   */\n  @Method()\n  async open(isFocusVisible?: boolean): Promise<void> {\n    if (!this.trigger && this.delayedTriggerInit) {\n      this.initTrigger();\n    }\n\n    if (this.isOpen === null || this.isOpen) {\n      return; // busy or open\n    }\n\n    this._isOpen = null;\n    this.content.style.display = 'block';\n    this.isFocusVisible = isFocusVisible ?? this.isFocusVisible;\n\n    const trigger = this.anchor || this.trigger;\n    if (trigger) {\n      this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));\n    }\n    // give CSS transition time to apply\n    requestAnimationFrame(() => {\n      this._isOpen = true;\n      this.content.classList.add('show');\n      this.trigger?.setAttribute('aria-expanded', 'true');\n\n      if (this.focusTrap) {\n        this.trap = this.trap\n          ? this.trap.updateContainerElements(this.content)\n          : focusTrap.createFocusTrap(this.content, {\n              tabbableOptions: this.tabbableOptions,\n              allowOutsideClick: true,\n              onPostActivate: () => this.catOpen.emit(),\n              setReturnFocus: elem => (!this.isFocusVisible ? false : this.trigger || elem),\n              isKeyForward: event => {\n                if (\n                  (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n                  (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n                ) {\n                  event.preventDefault();\n                  return true;\n                }\n                return event.key === 'Tab';\n              },\n              isKeyBackward: event => {\n                if (\n                  (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n                  (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n                ) {\n                  event.preventDefault();\n                  return true;\n                }\n                return event.key === 'Tab' && event.shiftKey;\n              },\n              initialFocus: () => {\n                return this.isFocusVisible ? undefined : false;\n              }\n            });\n        this.trap.activate();\n      } else {\n        this.catOpen.emit();\n      }\n    });\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async close(shouldReturnFocus = this.isFocusVisible): Promise<void> {\n    if (!this._isOpen) {\n      return; // busy or closed\n    }\n\n    this._isOpen = null;\n    this.trap?.deactivate();\n    this.trap = undefined;\n    this.content.classList.remove('show');\n    if (shouldReturnFocus) {\n      this.trigger?.focus();\n    }\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this._isOpen = false;\n      this.content.classList.remove('show');\n      this.content.style.display = '';\n      this.trigger?.setAttribute('aria-expanded', 'false');\n      this.cleanupFloatingUi?.();\n      this.cleanupFloatingUi = undefined;\n      this.catClose.emit();\n    }, timeTransitionS);\n  }\n\n  componentDidLoad() {\n    this.initAnchor();\n    if (!this.delayedTriggerInit) {\n      this.initTrigger();\n    }\n  }\n\n  disconnectedCallback() {\n    this.trap?.deactivate();\n    this.trap = undefined;\n    this.cleanupFloatingUi?.();\n    this.cleanupFloatingUi = undefined;\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n        <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n        <div\n          id={this.contentId}\n          class={{ content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }}\n          ref={el => (this.content = el as HTMLElement)}\n        >\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get contentId() {\n    return `cat-dropdown-${this.id}`;\n  }\n\n  private initTrigger() {\n    this.trigger = this.findTrigger();\n    const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n    this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n    this.trigger.setAttribute('aria-expanded', 'false');\n    this.trigger.setAttribute('aria-controls', this.contentId);\n    this.trigger.addEventListener('click', (event: Event) => {\n      this.isFocusVisible = this.isEventOriginFromKeyboard(event as UIEvent);\n      this.toggle();\n    });\n  }\n\n  private isEventOriginFromKeyboard(event: UIEvent): boolean {\n    return event.detail === 0;\n  }\n\n  private initAnchor() {\n    this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n  }\n\n  private findTrigger() {\n    let trigger: FocusableElement | undefined;\n    let elems = this.triggerSlot?.assignedElements?.() || [];\n    while (!trigger && elems.length) {\n      const elem = elems.shift();\n      trigger = elem?.hasAttribute('data-trigger')\n        ? (elem as HTMLElement)\n        : (elem?.querySelector('[data-trigger]') ?? undefined);\n    }\n    if (!trigger) {\n      trigger = firstTabbable(this.triggerSlot);\n    }\n    // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles\n    // which stencil assigns to component in prehydration state\n    if (!trigger) {\n      elems = this.triggerSlot?.assignedElements?.() || [];\n      while (!trigger && elems.length) {\n        const elem = elems.shift();\n        trigger = findFirstTabbableIncludeHidden(elem as HTMLElement);\n      }\n    }\n    if (!trigger) {\n      throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n    }\n    return trigger;\n  }\n\n  private update(anchorElement: ReferenceElement | undefined, justify = this.justify) {\n    if (anchorElement) {\n      const resize = this.noResize\n        ? []\n        : [\n            size({\n              padding: CatDropdown.OFFSET,\n              apply({ rects, availableWidth, availableHeight, elements }) {\n                if (justify) {\n                  Object.assign(elements.floating.style, {\n                    minWidth: `${rects.reference.width}px`,\n                    maxWidth: `${rects.reference.width}px`,\n                    maxHeight: `${availableHeight}px`\n                  });\n                } else {\n                  Object.assign(elements.floating.style, {\n                    maxWidth: `${availableWidth}px`,\n                    maxHeight: `${availableHeight}px`\n                  });\n                }\n              }\n            })\n          ];\n      const middleware = [offset(CatDropdown.OFFSET)];\n      const flipMiddleware = flip({\n        // Ensure we flip to the perpendicular axis if it doesn't fit\n        // on narrow viewports.\n        crossAxis: 'alignment',\n        fallbackAxisSideDirection: 'end'\n      });\n      const shiftMiddleware = shift();\n\n      // Prioritize flip over shift for edge-aligned placements only.\n      if (this.placement.includes('-')) {\n        middleware.push(flipMiddleware, shiftMiddleware);\n      } else {\n        middleware.push(shiftMiddleware, flipMiddleware);\n      }\n      computePosition(anchorElement, this.content, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [...middleware, ...resize]\n      }).then(({ x, y, placement }) => {\n        this.content.dataset.placement = placement;\n        Object.assign(this.content.style, {\n          left: `${x}px`,\n          top: `${y}px`\n        });\n      });\n    }\n  }\n\n  private hasAttribute(elem: EventTarget, attr: string) {\n    return elem instanceof HTMLElement && elem.hasAttribute(attr);\n  }\n}\n"]}
+{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, shift, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport findFirstTabbableIncludeHidden from '../../utils/first-tabbable-with-visibility-hidden';\n\nlet nextUniqueId = 0;\nexport type DropdownPlacement = Placement;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n  tag: 'cat-dropdown',\n  styleUrl: 'cat-dropdown.scss',\n  shadow: true\n})\nexport class CatDropdown {\n  private static readonly OFFSET = 4;\n  private readonly id = nextUniqueId++;\n  private triggerSlot!: HTMLSlotElement;\n  private trigger?: FocusableElement;\n  private anchorSlot!: HTMLSlotElement;\n  private anchor?: Element;\n  private content!: HTMLElement;\n  private trap?: focusTrap.FocusTrap;\n  private _isOpen: boolean | null = false;\n  private cleanupFloatingUi?: () => void;\n  private readonly tabbableOptions = { getShadowRoot: true };\n  /**\n   * Tracking the origin of opening the dropdown and specify if initial focus should be set.\n   * Currently we set it only when the origin is keyboard.\n   * We might not need to track this in future when focus-visible support is improved across browsers\n   */\n  private isFocusVisible = false;\n\n  /**\n   * The placement of the dropdown.\n   */\n  @Prop() placement: Placement = 'bottom-start';\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 close the dropdown on outside clicks.\n   */\n  @Prop() noAutoClose = false;\n\n  /**\n   * Do not navigate focus inside the dropdown via vertical arrow keys.\n   * @deprecated use cat-menu\n   */\n  @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\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   * No element in dropdown will receive focus when dropdown is open.\n   * By default, the first element in tab order will receive a focus.\n   * @deprecated\n   * Using noInitialFocus property would be a bad practice from a11y perspective.\n   * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.\n   * hasInitialFocus should resolve the cause of the original problem instead.\n   */\n  @Prop() noInitialFocus = false;\n\n  /**\n   * Whether the dropdown is open.\n   * @readonly\n   */\n  @Prop() get isOpen(): boolean {\n    return this._isOpen ?? false;\n  }\n\n  /**\n   * Trigger element will not receive focus when dropdown is closed.\n   * Please use this property carefully, consider using cat-menu over using this property\n   */\n  @Prop() noReturnFocus = 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   * Whether the focus should be trapped inside dropdown popup.\n   * Use it only when the dropdown popup content has role dialog.\n   * @internal\n   */\n  @Prop() focusTrap = true;\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  @Listen('catClick')\n  clickHandler(event: CustomEvent<MouseEvent>) {\n    if (!this.trigger && this.delayedTriggerInit) {\n      this.isFocusVisible = this.isEventOriginFromKeyboard(event.detail);\n      this.initTrigger();\n      this.toggle();\n    }\n\n    // hide dropdown on button clicks inside the dropdown content\n    const path = event.composedPath();\n    if (\n      !this.noAutoClose &&\n      // check if click was inside of the dropdown content\n      path.includes(this.content) &&\n      // check if click was not on a trigger for a sub-dropdown\n      (event.target as Element)?.slot !== 'trigger' &&\n      // check if click was not an element marked with data-dropdown-no-close\n      !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n    ) {\n      this.close();\n    }\n  }\n\n  @Listen('keydown')\n  keydownHandler(event: KeyboardEvent) {\n    if (this.isOpen && event.key === 'Escape') {\n      this.close();\n    }\n  }\n\n  @Listen('click', { target: 'document', capture: true })\n  globalClickHandler(event: MouseEvent) {\n    this.handleClickOutside(event);\n  }\n\n  @Listen('mousedown', { target: 'document', capture: true })\n  globalMouseDownHandler(event: MouseEvent) {\n    this.handleClickOutside(event);\n  }\n\n  @Listen('touchstart', { target: 'document', capture: true, passive: false })\n  globalTouchStartHandler(event: MouseEvent) {\n    this.handleClickOutside(event);\n  }\n\n  /**\n   * Toggles the dropdown.\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this._isOpen ? this.close() : this.open();\n  }\n\n  /**\n   * Opens the dropdown.\n   * @param isFocusVisible is dropdown should receive visible focus when it's opened.\n   */\n  @Method()\n  async open(isFocusVisible?: boolean): Promise<void> {\n    if (!this.trigger && this.delayedTriggerInit) {\n      this.initTrigger();\n    }\n\n    if (this.isOpen === null || this.isOpen) {\n      return; // busy or open\n    }\n\n    this._isOpen = null;\n    this.content.style.display = 'block';\n    this.isFocusVisible = isFocusVisible ?? this.isFocusVisible;\n\n    const trigger = this.anchor || this.trigger;\n    if (trigger) {\n      this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));\n    }\n    // give CSS transition time to apply\n    requestAnimationFrame(() => {\n      this._isOpen = true;\n      this.content.classList.add('show');\n      this.trigger?.setAttribute('aria-expanded', 'true');\n\n      if (this.focusTrap) {\n        this.trap = this.trap\n          ? this.trap.updateContainerElements(this.content)\n          : focusTrap.createFocusTrap(this.content, {\n              tabbableOptions: this.tabbableOptions,\n              allowOutsideClick: true,\n              onPostActivate: () => this.catOpen.emit(),\n              setReturnFocus: elem => (!this.isFocusVisible || this.noReturnFocus ? false : this.trigger || elem),\n              isKeyForward: event => {\n                if (\n                  (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n                  (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n                ) {\n                  event.preventDefault();\n                  return true;\n                }\n                return event.key === 'Tab';\n              },\n              isKeyBackward: event => {\n                if (\n                  (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n                  (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n                ) {\n                  event.preventDefault();\n                  return true;\n                }\n                return event.key === 'Tab' && event.shiftKey;\n              },\n              initialFocus: () => {\n                return this.isFocusVisible ? undefined : false;\n              }\n            });\n        this.trap.activate();\n      } else {\n        this.catOpen.emit();\n      }\n    });\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async close(shouldReturnFocus = this.isFocusVisible): Promise<void> {\n    if (!this._isOpen) {\n      return; // busy or closed\n    }\n\n    this._isOpen = null;\n    this.trap?.deactivate();\n    this.trap = undefined;\n    this.content.classList.remove('show');\n    if (shouldReturnFocus) {\n      this.trigger?.focus();\n    }\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this._isOpen = false;\n      this.content.classList.remove('show');\n      this.content.style.display = '';\n      this.trigger?.setAttribute('aria-expanded', 'false');\n      this.cleanupFloatingUi?.();\n      this.cleanupFloatingUi = undefined;\n      this.catClose.emit();\n    }, timeTransitionS);\n  }\n\n  componentDidLoad() {\n    this.initAnchor();\n    if (!this.delayedTriggerInit) {\n      this.initTrigger();\n    }\n  }\n\n  disconnectedCallback() {\n    this.trap?.deactivate();\n    this.trap = undefined;\n    this.cleanupFloatingUi?.();\n    this.cleanupFloatingUi = undefined;\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n        <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n        <div\n          id={this.contentId}\n          class={{ content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }}\n          ref={el => (this.content = el as HTMLElement)}\n        >\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private handleClickOutside(event: MouseEvent): void {\n    if (\n      !this.noAutoClose &&\n      // check if click was outside of the dropdown content\n      !event.composedPath().includes(this.content) &&\n      // check if click was not on an element marked with data-dropdown-no-close\n      !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n    ) {\n      this.close();\n    }\n  }\n\n  private get contentId() {\n    return `cat-dropdown-${this.id}`;\n  }\n\n  private initTrigger() {\n    this.trigger = this.findTrigger();\n    const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n    this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n    this.trigger.setAttribute('aria-expanded', 'false');\n    this.trigger.setAttribute('aria-controls', this.contentId);\n    this.trigger.addEventListener('click', (event: Event) => {\n      this.isFocusVisible = this.isEventOriginFromKeyboard(event as UIEvent);\n      this.toggle();\n    });\n  }\n\n  private isEventOriginFromKeyboard(event: UIEvent): boolean {\n    return event.detail === 0;\n  }\n\n  private initAnchor() {\n    this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n  }\n\n  private findTrigger() {\n    let trigger: FocusableElement | undefined;\n    let elems = this.triggerSlot?.assignedElements?.() || [];\n    while (!trigger && elems.length) {\n      const elem = elems.shift();\n      trigger = elem?.hasAttribute('data-trigger')\n        ? (elem as HTMLElement)\n        : (elem?.querySelector('[data-trigger]') ?? undefined);\n    }\n    if (!trigger) {\n      trigger = firstTabbable(this.triggerSlot);\n    }\n    // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles\n    // which stencil assigns to component in prehydration state\n    if (!trigger) {\n      elems = this.triggerSlot?.assignedElements?.() || [];\n      while (!trigger && elems.length) {\n        const elem = elems.shift();\n        trigger = findFirstTabbableIncludeHidden(elem as HTMLElement);\n      }\n    }\n    if (!trigger) {\n      throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n    }\n    return trigger;\n  }\n\n  private update(anchorElement: ReferenceElement | undefined, justify = this.justify) {\n    if (anchorElement) {\n      const resize = this.noResize\n        ? []\n        : [\n            size({\n              padding: CatDropdown.OFFSET,\n              apply({ rects, availableWidth, availableHeight, elements }) {\n                if (justify) {\n                  Object.assign(elements.floating.style, {\n                    minWidth: `${rects.reference.width}px`,\n                    maxWidth: `${rects.reference.width}px`,\n                    maxHeight: `${availableHeight}px`\n                  });\n                } else {\n                  Object.assign(elements.floating.style, {\n                    maxWidth: `${availableWidth}px`,\n                    maxHeight: `${availableHeight}px`\n                  });\n                }\n              }\n            })\n          ];\n      const middleware = [offset(CatDropdown.OFFSET)];\n      const flipMiddleware = flip({\n        // Ensure we flip to the perpendicular axis if it doesn't fit\n        // on narrow viewports.\n        crossAxis: 'alignment',\n        fallbackAxisSideDirection: 'end'\n      });\n      const shiftMiddleware = shift();\n\n      // Prioritize flip over shift for edge-aligned placements only.\n      if (this.placement.includes('-')) {\n        middleware.push(flipMiddleware, shiftMiddleware);\n      } else {\n        middleware.push(shiftMiddleware, flipMiddleware);\n      }\n      computePosition(anchorElement, this.content, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [...middleware, ...resize]\n      }).then(({ x, y, placement }) => {\n        this.content.dataset.placement = placement;\n        Object.assign(this.content.style, {\n          left: `${x}px`,\n          top: `${y}px`\n        });\n      });\n    }\n  }\n\n  private hasAttribute(elem: EventTarget, attr: string) {\n    return elem instanceof HTMLElement && elem.hasAttribute(attr);\n  }\n}\n"]}

package/dist/components/cat-button2.js

@@ -16,7 +16,7 @@ function findClosest(selector, element) {
     return nextElement ? findClosest(selector, nextElement) : null;
 }
 
-const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button.cat-button-inline{display:inline;padding:0}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-inline .cat-button-content{display:inline}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, #fff);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none);text-underline-offset:2px;text-decoration-thickness:1px}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.5rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.75rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button),:host(.cat-tab-more-button)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}";
+const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, #fff);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none);text-underline-offset:2px;text-decoration-thickness:1px}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.5rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.75rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button),:host(.cat-tab-more-button)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-inline){display:inline}:host(.cat-inline) .cat-button{display:inline;padding:0}:host(.cat-inline) .cat-button-content{display:inline}";
 
 const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLElement {
     constructor(registerHost) {
@@ -69,10 +69,6 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLE
          * Use round button edges.
          */
         this.round = false;
-        /**
-         * Link behaves as an inline element.
-         */
-        this.inline = false;
         /**
          * Hide the actual button content and only display the icon.
          */
@@ -152,8 +148,7 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLE
                     'cat-button-round': this.round,
                     'cat-button-loading': this.loading,
                     'cat-button-disabled': this.disabled,
-                    'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton && !this.inline,
-                    'cat-button-inline': this.inline,
+                    'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
                     [`cat-button-${this.variant}`]: Boolean(this.variant),
                     [`cat-button-${this.color}`]: Boolean(this.color),
                     [`cat-button-${this.size}`]: Boolean(this.size),
@@ -239,7 +234,6 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLE
         "round": [4],
         "url": [1],
         "urlTarget": [1, "url-target"],
-        "inline": [4],
         "icon": [1],
         "iconOnly": [8, "icon-only"],
         "iconRight": [4, "icon-right"],

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

@@ -1 +1 @@
-{"file":"cat-button2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/utils/find-closest.ts","src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","src/components/cat-button/cat-button.tsx"],"sourcesContent":["/**\n * Find the closest parent element matching the given selector while traversing\n * up the DOM tree (including Shadow DOM).\n */\nexport function findClosest(selector: string, element: Element | ShadowRoot): Element | null {\n  if (element instanceof Element && element.matches(selector)) {\n    return element;\n  }\n\n  // Search in parent element or Shadow DOM host\n  const nextElement =\n    element instanceof ShadowRoot ? element.host : element.parentElement || (element.getRootNode() as ShadowRoot).host;\n  return nextElement ? findClosest(selector, nextElement) : null;\n}\n","@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  max-width: 100%;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([data-button-group='middle']),\n:host([data-button-group='last']) {\n  margin-left: -1px;\n}\n\n.cat-button {\n  position: relative;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: cat-border-radius('m');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition:\n    color cat-token('time.transition.s') linear,\n    border-color cat-token('time.transition.s') linear,\n    background-color cat-token('time.transition.s') linear,\n    box-shadow cat-token('time.transition.s') linear;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n\n  &.cat-button-inline {\n    display: inline;\n    padding: 0;\n  }\n}\n\n// ----- content\n\n.cat-button-content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n\n  .cat-button-empty & {\n    display: none;\n  }\n\n  .cat-button-inline & {\n    display: inline;\n  }\n}\n\n.cat-button-content-inner {\n  @include cat-break-word;\n\n  .cat-button-ellipsed & {\n    @include cat-ellipsis;\n  }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n  cursor: not-allowed;\n}\n\n// ----- round\n\n.cat-button-round {\n  border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n  cursor: default;\n\n  cat-spinner {\n    position: absolute;\n  }\n\n  > *:not(cat-spinner) {\n    visibility: hidden;\n  }\n}\n\n// ----- group button\n\n.cat-button-group {\n  &-first {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  &-middle {\n    border-radius: 0;\n  }\n\n  &-last {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  &:hover {\n    z-index: 1;\n  }\n\n  &:focus-visible {\n    z-index: 2;\n  }\n}\n\n// ----- theme\n\n.cat-button-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: var(--cat-font-weight-button, 600);\n  @include cat-font-smooth;\n\n  &.cat-button-disabled {\n    --bg: #{cat-token('color.ui.background.muted', $wrap: false)};\n    --fill: #{cat-token('color.ui.font.muted', $wrap: false)};\n  }\n}\n\n.cat-button-outlined {\n  background-color: cat-token('color.ui.background.surface');\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, cat-token-wrap(var(--base)) 20%, #fff);\n  color: cat-token-wrap(var(--text));\n\n  &.cat-button-disabled {\n    --base: #{cat-token('color.ui.font.muted', $wrap: false)};\n    --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n  }\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n  }\n\n  &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n  }\n\n  &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n  }\n}\n\n.cat-button-text {\n  background-color: transparent;\n  color: cat-token-wrap(var(--text));\n\n  &.cat-button-disabled {\n    --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n  }\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: rgba(var(--base), 0.1);\n  }\n\n  &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: rgba(var(--base), 0.1);\n  }\n}\n\n.cat-button-link {\n  background-color: transparent;\n  color: cat-token-wrap(var(--text));\n  text-decoration: cat-token('font.decoration.linkButton');\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n\n  &.cat-button-disabled {\n    --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n  }\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    text-decoration: cat-token('font.decoration.linkButtonHover');\n  }\n\n  &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n    text-decoration: cat-token('font.decoration.linkButtonHover');\n  }\n}\n\n@mixin theme($theme) {\n  .cat-button-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n\n    &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n    }\n\n    &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n    &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding, $gap: 0.25rem) {\n  $-line-height: cat-body-line-height($fontSize);\n\n  $-total-height: map.get($button-sizes, $size);\n  $-padding-v: ($-total-height - $-line-height) * 0.5;\n  $-padding-h: $padding;\n\n  .cat-button-#{$size} {\n    min-width: map.get($button-sizes, $size);\n    padding: $-padding-v $-padding-h;\n    @include cat-body($fontSize, null);\n    gap: $gap;\n\n    // normalize icon size for line height\n    @if $fontSize == 'm' {\n      cat-icon {\n        margin-top: -0.125rem;\n        margin-bottom: -0.125rem;\n      }\n    }\n\n    &.cat-button-icon {\n      width: $-total-height;\n      height: $-total-height;\n      padding: 0;\n    }\n  }\n\n  :host(.cat-button-pull[size='#{$size}']) {\n    margin: $-padding-v * -1 $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-h[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n    margin-right: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-v[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-t[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-l[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-b[size='#{$size}']) {\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-r[size='#{$size}']) {\n    margin-right: $-padding-h * -1;\n  }\n}\n\n:host(.cat-button-pull:not([size])) {\n  margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n  margin-top: -0.625rem;\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n  margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n  margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n  margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem, 0.5rem);\n@include size('xl', 'l', 1.25rem, 0.75rem);\n\n// ----- tabs\n\n:host(.cat-tab),\n:host(.cat-tab-more-button) {\n  &::part(button) {\n    padding: 1.125rem 0.75rem;\n    --cat-secondary-bg: transparent;\n    --cat-primary-text: transparent;\n    --cat-danger-text: transparent;\n  }\n\n  &::part(content) {\n    &::before {\n      content: attr(data-text);\n      content: attr(data-text) / '';\n      height: 0;\n      visibility: hidden;\n      overflow: hidden;\n      user-select: none;\n      pointer-events: none;\n      font-weight: 700;\n    }\n  }\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n  justify-content: left;\n  text-align: left;\n}\n\n:host(.cat-text-right) .cat-button {\n  justify-content: right;\n  text-align: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n  width: 100%;\n\n  .cat-button {\n    box-shadow: none;\n    justify-content: left;\n    gap: 0.5rem;\n\n    &:focus-visible {\n      outline-offset: -2px;\n    }\n  }\n}\n\n// ----- datepicker\n\n:host(.cat-time-format) {\n  .cat-button {\n    border-radius: 0;\n  }\n}\n\n:host(.cat-date-toggle),\n:host(.cat-time-toggle) {\n  .cat-button {\n    margin-left: -1px;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n\n:host(.cat-date-item),\n:host(.cat-date-toggle),\n:host(.cat-time-format),\n:host(.cat-time-toggle) {\n  .cat-button {\n    &:hover {\n      z-index: 1;\n    }\n\n    &:focus-visible {\n      z-index: 2;\n    }\n  }\n}\n\n:host(.cat-date-item) {\n  .cat-button {\n    padding: 0;\n    min-width: 2rem;\n    max-height: 3rem;\n    aspect-ratio: 1;\n  }\n}\n\n:host(.date-start:not(.date-end)) {\n  .cat-button {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n\n:host(.date-end:not(.date-start)) {\n  .cat-button {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\nimport { findClosest } from '../../utils/find-closest';\n\n/**\n * Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n *\n * @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n */\n@Component({\n  tag: 'cat-button',\n  styleUrl: 'cat-button.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatButton {\n  private button!: HTMLButtonElement | HTMLAnchorElement;\n  private mediaMatcher?: MediaMatcher;\n  private mediaQueryList?: MediaQueryList;\n  private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() _iconOnly = true;\n\n  @State() hasSlottedContent = false;\n\n  /**\n   * The rendering style of the button.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' | 'link' = 'outlined';\n\n  /**\n   * The color palette of the button.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'secondary';\n\n  /**\n   * Set the button into an active state.\n   */\n  @Prop() active = false;\n\n  /**\n   * The size of the button.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The name of the button, which gets paired with the button's value when\n   * submitted as part of a form. Corresponds with the native HTML name\n   * attribute.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the button, which gets paired with the button's name when\n   * submitted as part of a form. Corresponds with the native HTML value\n   * attribute.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Specifies that the button should be disabled. A disabled button is unusable\n   * and un-clickable. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays the button in a loading state with a spinner. Just like a disabled\n   * button, an inactive button is unusable and un-clickable. However, it\n   * retains the current focus state.\n   */\n  @Prop() loading = false;\n\n  /**\n   * Allows the button to submit a form.\n   */\n  @Prop() submit = false;\n\n  /**\n   * Disables ellipse overflowing button content.\n   */\n  @Prop() noEllipsis = false;\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = 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   * Link behaves as an inline element.\n   */\n  @Prop() inline = false;\n\n  /**\n   * The name of an icon to be displayed in the button.\n   */\n  @Prop() icon?: string;\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   * Adds a unique identifier for the button. Please note that with this\n   * particular component this ID is added inside the web component. If you need\n   * an ID on the HTML element, use the regular `id` attribute instead.\n   */\n  @Prop() buttonId?: string;\n\n  /**\n   * Adds accessible label for the button that is only shown for screen\n   * readers. Typically, this label text replaces the visible text on the\n   * button for users who use assistive technology.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Sets the `aria-current` attribute on the button.\n   */\n  @Prop({ attribute: 'a11y-current' }) a11yCurrent?: string;\n\n  /**\n   * Attributes that will be added to the native HTML button element\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Attributes that will be added to the native HTML button content element\n   */\n  @Prop() nativeContentAttributes?: { [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   * The index of a button that is used inside a cat-button-group component\n   */\n  @Prop() buttonGroupPosition?: 'first' | 'last' | 'middle';\n\n  @Watch('iconOnly')\n  onIconOnlyChanged(value: boolean | Breakpoint): void {\n    // teardown\n    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n    this.mediaQueryList = undefined;\n    this.mediaQueryListener = undefined;\n    // setup\n    if (isBreakpoint(value)) {\n      this.mediaMatcher ??= new MediaMatcher();\n      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n      this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n      this._iconOnly = this.mediaQueryList.matches;\n    } else {\n      this._iconOnly = value;\n    }\n  }\n\n  /**\n   * Emitted when the button is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  /**\n   * Emitted when the button received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedContent = this.hostElement.hasChildNodes();\n  }\n\n  @Listen('click')\n  haltDisabledEvents(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    } else if (this.submit) {\n      const form = findClosest('form', this.hostElement);\n      if (form && form instanceof HTMLFormElement) {\n        // we can't provide a submitter as it is hidden in the shadow DOM\n        form.requestSubmit();\n      }\n    }\n  }\n\n  /**\n   * Programmatically move focus to the button. Use this method instead of\n   * `button.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.button.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the button. Use this method instead of\n   * `button.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.button.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the button.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.button.click();\n  }\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    if (this.url) {\n      return (\n        <Host data-button-group={this.buttonGroupPosition}>\n          <a\n            data-test={this.testId}\n            {...this.nativeAttributes}\n            ref={el => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? undefined : this.url}\n            target={this.urlTarget}\n            aria-disabled={this.disabled ? 'true' : null}\n            aria-label={this.a11yLabel}\n            aria-current={this.a11yCurrent}\n            id={this.buttonId}\n            part=\"button\"\n            class={{\n              'cat-button': true,\n              'cat-button-empty': !this.hasSlottedContent,\n              'cat-button-active': this.active,\n              'cat-button-icon': this.isIconButton,\n              'cat-button-round': this.round,\n              'cat-button-loading': this.loading,\n              'cat-button-disabled': this.disabled,\n              'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton && !this.inline,\n              'cat-button-inline': this.inline,\n              [`cat-button-${this.variant}`]: Boolean(this.variant),\n              [`cat-button-${this.color}`]: Boolean(this.color),\n              [`cat-button-${this.size}`]: Boolean(this.size),\n              [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)\n            }}\n            onClick={this.onClick.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          >\n            {this.content}\n          </a>\n        </Host>\n      );\n    } else {\n      return (\n        <Host data-button-group={this.buttonGroupPosition}>\n          <button\n            data-test={this.testId}\n            {...this.nativeAttributes}\n            ref={el => (this.button = el as HTMLButtonElement)}\n            type={this.submit ? 'submit' : 'button'}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            aria-disabled={this.disabled ? 'true' : null}\n            aria-label={this.a11yLabel}\n            aria-current={this.a11yCurrent}\n            id={this.buttonId}\n            part=\"button\"\n            class={{\n              'cat-button': true,\n              'cat-button-empty': !this.hasSlottedContent,\n              'cat-button-active': this.active,\n              'cat-button-icon': this.isIconButton,\n              'cat-button-round': this.round ?? this.isIconButton,\n              'cat-button-loading': this.loading,\n              'cat-button-disabled': this.disabled,\n              'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n              [`cat-button-${this.variant}`]: Boolean(this.variant),\n              [`cat-button-${this.color}`]: Boolean(this.color),\n              [`cat-button-${this.size}`]: Boolean(this.size),\n              [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)\n            }}\n            onClick={this.onClick.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          >\n            {this.content}\n          </button>\n        </Host>\n      );\n    }\n  }\n\n  private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 's';\n      default:\n        return 'l';\n    }\n  }\n\n  private get spinnerSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 'xs';\n      default:\n        return 'm';\n    }\n  }\n\n  private get isIconButton() {\n    return Boolean(this.icon) && this._iconOnly;\n  }\n\n  private get hasPrefixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n  }\n\n  private get hasSuffixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n  }\n\n  private get content() {\n    return [\n      this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null,\n      this.isIconButton ? (\n        <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n      ) : (\n        <span class=\"cat-button-content\" part=\"content\" {...this.nativeContentAttributes}>\n          <span class=\"cat-button-content-inner\">\n            <slot></slot>\n          </span>\n        </span>\n      ),\n      this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"suffix\"></cat-icon> : null,\n      this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n    ];\n  }\n\n  private onClick(event: MouseEvent) {\n    this.catClick.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}
+{"file":"cat-button2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/utils/find-closest.ts","src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","src/components/cat-button/cat-button.tsx"],"sourcesContent":["/**\n * Find the closest parent element matching the given selector while traversing\n * up the DOM tree (including Shadow DOM).\n */\nexport function findClosest(selector: string, element: Element | ShadowRoot): Element | null {\n  if (element instanceof Element && element.matches(selector)) {\n    return element;\n  }\n\n  // Search in parent element or Shadow DOM host\n  const nextElement =\n    element instanceof ShadowRoot ? element.host : element.parentElement || (element.getRootNode() as ShadowRoot).host;\n  return nextElement ? findClosest(selector, nextElement) : null;\n}\n","@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  max-width: 100%;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([data-button-group='middle']),\n:host([data-button-group='last']) {\n  margin-left: -1px;\n}\n\n.cat-button {\n  position: relative;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: cat-border-radius('m');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition:\n    color cat-token('time.transition.s') linear,\n    border-color cat-token('time.transition.s') linear,\n    background-color cat-token('time.transition.s') linear,\n    box-shadow cat-token('time.transition.s') linear;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n// ----- content\n\n.cat-button-content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n\n  .cat-button-empty & {\n    display: none;\n  }\n}\n\n.cat-button-content-inner {\n  @include cat-break-word;\n\n  .cat-button-ellipsed & {\n    @include cat-ellipsis;\n  }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n  cursor: not-allowed;\n}\n\n// ----- round\n\n.cat-button-round {\n  border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n  cursor: default;\n\n  cat-spinner {\n    position: absolute;\n  }\n\n  > *:not(cat-spinner) {\n    visibility: hidden;\n  }\n}\n\n// ----- group button\n\n.cat-button-group {\n  &-first {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  &-middle {\n    border-radius: 0;\n  }\n\n  &-last {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  &:hover {\n    z-index: 1;\n  }\n\n  &:focus-visible {\n    z-index: 2;\n  }\n}\n\n// ----- theme\n\n.cat-button-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: var(--cat-font-weight-button, 600);\n  @include cat-font-smooth;\n\n  &.cat-button-disabled {\n    --bg: #{cat-token('color.ui.background.muted', $wrap: false)};\n    --fill: #{cat-token('color.ui.font.muted', $wrap: false)};\n  }\n}\n\n.cat-button-outlined {\n  background-color: cat-token('color.ui.background.surface');\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, cat-token-wrap(var(--base)) 20%, #fff);\n  color: cat-token-wrap(var(--text));\n\n  &.cat-button-disabled {\n    --base: #{cat-token('color.ui.font.muted', $wrap: false)};\n    --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n  }\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n  }\n\n  &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n  }\n\n  &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: color-mix(in srgb, cat-token-wrap(var(--base)) 10%, #fff);\n  }\n}\n\n.cat-button-text {\n  background-color: transparent;\n  color: cat-token-wrap(var(--text));\n\n  &.cat-button-disabled {\n    --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n  }\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: rgba(var(--base), 0.1);\n  }\n\n  &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: rgba(var(--base), 0.1);\n  }\n}\n\n.cat-button-link {\n  background-color: transparent;\n  color: cat-token-wrap(var(--text));\n  text-decoration: cat-token('font.decoration.linkButton');\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n\n  &.cat-button-disabled {\n    --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n  }\n\n  &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n    text-decoration: cat-token('font.decoration.linkButtonHover');\n  }\n\n  &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n    text-decoration: cat-token('font.decoration.linkButtonHover');\n  }\n}\n\n@mixin theme($theme) {\n  .cat-button-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n\n    &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n    }\n\n    &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n    &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding, $gap: 0.25rem) {\n  $-line-height: cat-body-line-height($fontSize);\n\n  $-total-height: map.get($button-sizes, $size);\n  $-padding-v: ($-total-height - $-line-height) * 0.5;\n  $-padding-h: $padding;\n\n  .cat-button-#{$size} {\n    min-width: map.get($button-sizes, $size);\n    padding: $-padding-v $-padding-h;\n    @include cat-body($fontSize, null);\n    gap: $gap;\n\n    // normalize icon size for line height\n    @if $fontSize == 'm' {\n      cat-icon {\n        margin-top: -0.125rem;\n        margin-bottom: -0.125rem;\n      }\n    }\n\n    &.cat-button-icon {\n      width: $-total-height;\n      height: $-total-height;\n      padding: 0;\n    }\n  }\n\n  :host(.cat-button-pull[size='#{$size}']) {\n    margin: $-padding-v * -1 $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-h[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n    margin-right: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-v[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-t[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-l[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-b[size='#{$size}']) {\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-r[size='#{$size}']) {\n    margin-right: $-padding-h * -1;\n  }\n}\n\n:host(.cat-button-pull:not([size])) {\n  margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n  margin-top: -0.625rem;\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n  margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n  margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n  margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem, 0.5rem);\n@include size('xl', 'l', 1.25rem, 0.75rem);\n\n// ----- tabs\n\n:host(.cat-tab),\n:host(.cat-tab-more-button) {\n  &::part(button) {\n    padding: 1.125rem 0.75rem;\n    --cat-secondary-bg: transparent;\n    --cat-primary-text: transparent;\n    --cat-danger-text: transparent;\n  }\n\n  &::part(content) {\n    &::before {\n      content: attr(data-text);\n      content: attr(data-text) / '';\n      height: 0;\n      visibility: hidden;\n      overflow: hidden;\n      user-select: none;\n      pointer-events: none;\n      font-weight: 700;\n    }\n  }\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n  justify-content: left;\n  text-align: left;\n}\n\n:host(.cat-text-right) .cat-button {\n  justify-content: right;\n  text-align: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n  width: 100%;\n\n  .cat-button {\n    box-shadow: none;\n    justify-content: left;\n    gap: 0.5rem;\n\n    &:focus-visible {\n      outline-offset: -2px;\n    }\n  }\n}\n\n// ----- datepicker\n\n:host(.cat-time-format) {\n  .cat-button {\n    border-radius: 0;\n  }\n}\n\n:host(.cat-date-toggle),\n:host(.cat-time-toggle) {\n  .cat-button {\n    margin-left: -1px;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n\n:host(.cat-date-item),\n:host(.cat-date-toggle),\n:host(.cat-time-format),\n:host(.cat-time-toggle) {\n  .cat-button {\n    &:hover {\n      z-index: 1;\n    }\n\n    &:focus-visible {\n      z-index: 2;\n    }\n  }\n}\n\n:host(.cat-date-item) {\n  .cat-button {\n    padding: 0;\n    min-width: 2rem;\n    max-height: 3rem;\n    aspect-ratio: 1;\n  }\n}\n\n:host(.date-start:not(.date-end)) {\n  .cat-button {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n}\n\n:host(.date-end:not(.date-start)) {\n  .cat-button {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n\n:host(.cat-inline) {\n  display: inline;\n\n  .cat-button {\n    display: inline;\n    padding: 0;\n  }\n\n  .cat-button-content {\n    display: inline;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\nimport { findClosest } from '../../utils/find-closest';\n\n/**\n * Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n *\n * @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n */\n@Component({\n  tag: 'cat-button',\n  styleUrl: 'cat-button.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatButton {\n  private button!: HTMLButtonElement | HTMLAnchorElement;\n  private mediaMatcher?: MediaMatcher;\n  private mediaQueryList?: MediaQueryList;\n  private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() _iconOnly = true;\n\n  @State() hasSlottedContent = false;\n\n  /**\n   * The rendering style of the button.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' | 'link' = 'outlined';\n\n  /**\n   * The color palette of the button.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'secondary';\n\n  /**\n   * Set the button into an active state.\n   */\n  @Prop() active = false;\n\n  /**\n   * The size of the button.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The name of the button, which gets paired with the button's value when\n   * submitted as part of a form. Corresponds with the native HTML name\n   * attribute.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the button, which gets paired with the button's name when\n   * submitted as part of a form. Corresponds with the native HTML value\n   * attribute.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Specifies that the button should be disabled. A disabled button is unusable\n   * and un-clickable. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays the button in a loading state with a spinner. Just like a disabled\n   * button, an inactive button is unusable and un-clickable. However, it\n   * retains the current focus state.\n   */\n  @Prop() loading = false;\n\n  /**\n   * Allows the button to submit a form.\n   */\n  @Prop() submit = false;\n\n  /**\n   * Disables ellipse overflowing button content.\n   */\n  @Prop() noEllipsis = false;\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = 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   * The name of an icon to be displayed in the button.\n   */\n  @Prop() icon?: string;\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   * Adds a unique identifier for the button. Please note that with this\n   * particular component this ID is added inside the web component. If you need\n   * an ID on the HTML element, use the regular `id` attribute instead.\n   */\n  @Prop() buttonId?: string;\n\n  /**\n   * Adds accessible label for the button that is only shown for screen\n   * readers. Typically, this label text replaces the visible text on the\n   * button for users who use assistive technology.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Sets the `aria-current` attribute on the button.\n   */\n  @Prop({ attribute: 'a11y-current' }) a11yCurrent?: string;\n\n  /**\n   * Attributes that will be added to the native HTML button element\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Attributes that will be added to the native HTML button content element\n   */\n  @Prop() nativeContentAttributes?: { [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   * The index of a button that is used inside a cat-button-group component\n   */\n  @Prop() buttonGroupPosition?: 'first' | 'last' | 'middle';\n\n  @Watch('iconOnly')\n  onIconOnlyChanged(value: boolean | Breakpoint): void {\n    // teardown\n    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n    this.mediaQueryList = undefined;\n    this.mediaQueryListener = undefined;\n    // setup\n    if (isBreakpoint(value)) {\n      this.mediaMatcher ??= new MediaMatcher();\n      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n      this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n      this._iconOnly = this.mediaQueryList.matches;\n    } else {\n      this._iconOnly = value;\n    }\n  }\n\n  /**\n   * Emitted when the button is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  /**\n   * Emitted when the button received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedContent = this.hostElement.hasChildNodes();\n  }\n\n  @Listen('click')\n  haltDisabledEvents(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    } else if (this.submit) {\n      const form = findClosest('form', this.hostElement);\n      if (form && form instanceof HTMLFormElement) {\n        // we can't provide a submitter as it is hidden in the shadow DOM\n        form.requestSubmit();\n      }\n    }\n  }\n\n  /**\n   * Programmatically move focus to the button. Use this method instead of\n   * `button.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.button.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the button. Use this method instead of\n   * `button.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.button.blur();\n  }\n\n  /**\n   * Programmatically simulate a click on the button.\n   */\n  @Method()\n  async doClick(): Promise<void> {\n    this.button.click();\n  }\n\n  render() {\n    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n    if (this.url) {\n      return (\n        <Host data-button-group={this.buttonGroupPosition}>\n          <a\n            data-test={this.testId}\n            {...this.nativeAttributes}\n            ref={el => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? undefined : this.url}\n            target={this.urlTarget}\n            aria-disabled={this.disabled ? 'true' : null}\n            aria-label={this.a11yLabel}\n            aria-current={this.a11yCurrent}\n            id={this.buttonId}\n            part=\"button\"\n            class={{\n              'cat-button': true,\n              'cat-button-empty': !this.hasSlottedContent,\n              'cat-button-active': this.active,\n              'cat-button-icon': this.isIconButton,\n              'cat-button-round': this.round,\n              'cat-button-loading': this.loading,\n              'cat-button-disabled': this.disabled,\n              'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n              [`cat-button-${this.variant}`]: Boolean(this.variant),\n              [`cat-button-${this.color}`]: Boolean(this.color),\n              [`cat-button-${this.size}`]: Boolean(this.size),\n              [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)\n            }}\n            onClick={this.onClick.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          >\n            {this.content}\n          </a>\n        </Host>\n      );\n    } else {\n      return (\n        <Host data-button-group={this.buttonGroupPosition}>\n          <button\n            data-test={this.testId}\n            {...this.nativeAttributes}\n            ref={el => (this.button = el as HTMLButtonElement)}\n            type={this.submit ? 'submit' : 'button'}\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled}\n            aria-disabled={this.disabled ? 'true' : null}\n            aria-label={this.a11yLabel}\n            aria-current={this.a11yCurrent}\n            id={this.buttonId}\n            part=\"button\"\n            class={{\n              'cat-button': true,\n              'cat-button-empty': !this.hasSlottedContent,\n              'cat-button-active': this.active,\n              'cat-button-icon': this.isIconButton,\n              'cat-button-round': this.round ?? this.isIconButton,\n              'cat-button-loading': this.loading,\n              'cat-button-disabled': this.disabled,\n              'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n              [`cat-button-${this.variant}`]: Boolean(this.variant),\n              [`cat-button-${this.color}`]: Boolean(this.color),\n              [`cat-button-${this.size}`]: Boolean(this.size),\n              [`cat-button-group-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition)\n            }}\n            onClick={this.onClick.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          >\n            {this.content}\n          </button>\n        </Host>\n      );\n    }\n  }\n\n  private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 's';\n      default:\n        return 'l';\n    }\n  }\n\n  private get spinnerSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 'xs';\n      default:\n        return 'm';\n    }\n  }\n\n  private get isIconButton() {\n    return Boolean(this.icon) && this._iconOnly;\n  }\n\n  private get hasPrefixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n  }\n\n  private get hasSuffixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n  }\n\n  private get content() {\n    return [\n      this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null,\n      this.isIconButton ? (\n        <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n      ) : (\n        <span class=\"cat-button-content\" part=\"content\" {...this.nativeContentAttributes}>\n          <span class=\"cat-button-content-inner\">\n            <slot></slot>\n          </span>\n        </span>\n      ),\n      this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"suffix\"></cat-icon> : null,\n      this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n    ];\n  }\n\n  private onClick(event: MouseEvent) {\n    this.catClick.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}

package/dist/components/cat-dropdown2.js

@@ -1102,7 +1102,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.noInitialFocus = false;
         /**
          * Trigger element will not receive focus when dropdown is closed.
-         * @deprecated the property can be removed, focus is arranged internally
+         * Please use this property carefully, consider using cat-menu over using this property
          */
         this.noReturnFocus = false;
         /**
@@ -1148,14 +1148,13 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         }
     }
     globalClickHandler(event) {
-        if (this.isOpen &&
-            !this.noAutoClose &&
-            // check if click was outside of the dropdown content
-            !event.composedPath().includes(this.content) &&
-            // check if click was not on an element marked with data-dropdown-no-close
-            !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
-            this.close();
-        }
+        this.handleClickOutside(event);
+    }
+    globalMouseDownHandler(event) {
+        this.handleClickOutside(event);
+    }
+    globalTouchStartHandler(event) {
+        this.handleClickOutside(event);
     }
     /**
      * Toggles the dropdown.
@@ -1193,7 +1192,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
                         tabbableOptions: this.tabbableOptions,
                         allowOutsideClick: true,
                         onPostActivate: () => this.catOpen.emit(),
-                        setReturnFocus: elem => (!this.isFocusVisible ? false : this.trigger || elem),
+                        setReturnFocus: elem => (!this.isFocusVisible || this.noReturnFocus ? false : this.trigger || elem),
                         isKeyForward: event => {
                             if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||
                                 (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')) {
@@ -1259,7 +1258,16 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         this.cleanupFloatingUi = undefined;
     }
     render() {
-        return (h(Host, { key: '865e31b60994932637b3530afe48b2317868ecd3' }, h("slot", { key: '393e1697e6dd728bb2f3c8294370de7deaba95d1', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '2bd3a3528005bebf7dcba84e52f5b6f6786a7f50', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '74ae76bb604041881af0247002d6a383dc386f50', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '6fd6acedb2c4044edd8f09f1418916e5086465fc', name: "content" }))));
+        return (h(Host, { key: 'b3cd898551dc3e6d5396db1a4a14bc97cf4a2024' }, h("slot", { key: '6875cfad353891deb54ebcd5155d7ea466384131', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '93fdda4c49a7a956f72548699200feb309779081', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '13a68b5f706e61e87599c463e58f1bf932b2d261', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '06357a4a970241938900853d78c88427c6a9e69a', name: "content" }))));
+    }
+    handleClickOutside(event) {
+        if (!this.noAutoClose &&
+            // check if click was outside of the dropdown content
+            !event.composedPath().includes(this.content) &&
+            // check if click was not on an element marked with data-dropdown-no-close
+            !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
+            this.close();
+        }
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -1378,7 +1386,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
         "toggle": [64],
         "open": [64],
         "close": [64]
-    }, [[0, "catClick", "clickHandler"], [0, "keydown", "keydownHandler"], [8, "click", "globalClickHandler"]]]);
+    }, [[0, "catClick", "clickHandler"], [0, "keydown", "keydownHandler"], [6, "click", "globalClickHandler"], [7, "mousedown", "globalMouseDownHandler"], [6, "touchstart", "globalTouchStartHandler"]]]);
 CatDropdown.OFFSET = 4;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {