npm - @haiilo/catalyst - Versions diffs - 5.2.3 → 5.3.0 - Mend

@haiilo/catalyst 5.2.3 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/dist/collection/components/cat-tooltip/cat-tooltip.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
 import { h, Host } from '@stencil/core';
-import firstTabbable from '../../utils/first-tabbable';
 import isTouchScreen from '../../utils/is-touch-screen';
 let nextUniqueId = 0;
 export class CatTooltip {
@@ -21,24 +20,22 @@ export class CatTooltip {
     key === 'Escape' && this.hideListener();
   }
   componentDidLoad() {
-    var _a, _b, _c, _d, _e, _f, _g;
-    this.trigger = firstTabbable(this.triggerElement) || this.triggerElement;
-    if (!this.isTabbable) {
-      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '0');
-    }
-    if (this.trigger && this.tooltip) {
-      autoUpdate(this.trigger, this.tooltip, () => this.update());
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+    this.trigger = (_c = (_b = slot === null || slot === void 0 ? void 0 : slot.assignedElements) === null || _b === void 0 ? void 0 : _b.call(slot)) === null || _c === void 0 ? void 0 : _c[0];
+    if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {
+      this.trigger.setAttribute('aria-describedby', this.id);
     }
     if (isTouchScreen) {
       window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));
-      (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.addEventListener('touchstart', this.touchStartListener.bind(this));
-      (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.addEventListener('touchend', this.touchEndListener.bind(this));
+      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.addEventListener('touchstart', this.touchStartListener.bind(this));
+      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('touchend', this.touchEndListener.bind(this));
     }
     else {
-      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.addEventListener('focusin', this.showListener.bind(this));
-      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('focusout', this.hideListener.bind(this));
-      (_f = this.trigger) === null || _f === void 0 ? void 0 : _f.addEventListener('mouseenter', this.showListener.bind(this));
-      (_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('mouseleave', this.hideListener.bind(this));
+      (_f = this.trigger) === null || _f === void 0 ? void 0 : _f.addEventListener('focusin', this.showListener.bind(this));
+      (_g = this.trigger) === null || _g === void 0 ? void 0 : _g.addEventListener('focusout', this.hideListener.bind(this));
+      (_h = this.trigger) === null || _h === void 0 ? void 0 : _h.addEventListener('mouseenter', this.showListener.bind(this));
+      (_j = this.trigger) === null || _j === void 0 ? void 0 : _j.addEventListener('mouseleave', this.hideListener.bind(this));
     }
   }
   componentWillRender() {
@@ -60,16 +57,13 @@ export class CatTooltip {
     }
   }
   render() {
-    return (h(Host, null, h("div", { ref: el => (this.triggerElement = el), "aria-describedby": this.id, class: "tooltip-trigger" }, h("slot", null)), h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
+    return (h(Host, null, h("slot", null), h("div", { ref: el => (this.tooltip = el), id: this.id, "aria-hidden": this.hidden, class: {
         tooltip: true,
         'tooltip-hidden': this.hidden,
         'tooltip-round': this.round,
         [`tooltip-${this.size}`]: Boolean(this.size)
       } }, this.hasSlottedContent ? h("slot", { name: "content" }) : this.content)));
   }
-  get isTabbable() {
-    return firstTabbable(this.trigger);
-  }
   async update() {
     if (this.trigger && this.tooltip) {
       await computePosition(this.trigger, this.tooltip, {
@@ -97,6 +91,7 @@ export class CatTooltip {
     this.hideTimeout = window.setTimeout(() => {
       var _a;
       (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.remove('tooltip-show');
+      this.hideTooltip();
     }, this.hideDelay);
   }
   touchStartListener(event) {
@@ -108,6 +103,7 @@ export class CatTooltip {
   touchEndListener() {
     if (this.touchTimeout) {
       window.clearTimeout(this.touchTimeout);
+      this.hideTooltip();
     }
   }
   windowTouchStartListener() {
@@ -116,8 +112,16 @@ export class CatTooltip {
   }
   showTooltip() {
     var _a;
+    if (this.trigger && this.tooltip) {
+      this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());
+    }
     !this.hidden && ((_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.classList.add('tooltip-show'));
   }
+  hideTooltip() {
+    if (this.cleanupFloatingUi) {
+      this.cleanupFloatingUi();
+    }
+  }
   static get is() { return "cat-tooltip"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {

package/dist/collection/components/cat-tooltip/cat-tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-tooltip',\n styleUrl: 'cat-tooltip.scss',\n shadow: true\n})\nexport class CatTooltip {\n private static readonly OFFSET = 4;\n private static readonly SHIFT_PADDING = 4;\n private readonly id = `cat-tooltip-${nextUniqueId++}`;\n private tooltip?: HTMLElement;\n private triggerElement?: HTMLElement;\n private trigger?: FocusableElement;\n private showTimeout?: number;\n private hideTimeout?: number;\n private touchTimeout?: number;\n private hidden = false;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedContent = false;\n\n /*\n The content of the tooltip.\n /\n @Prop() content = '';\n\n /\n Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n * and invisible. Corresponds with the native HTML disabled attribute.\n /\n @Prop() disabled = false;\n\n /\n The placement of the tooltip.\n /\n @Prop() placement: Placement = 'top';\n\n /\n Use round tooltip edges.\n /\n @Prop() round = false;\n\n /\n The size of the tooltip.\n /\n @Prop() size: 's' \| 'm' \| 'l' = 'm';\n\n /\n The delay time for showing tooltip in ms.\n /\n @Prop() showDelay = 250;\n\n /\n The delay time for hiding tooltip in ms.\n /\n @Prop() hideDelay = 0;\n\n /\n The duration of tap to show the tooltip.\n */\n @Prop() longTouchDuration = 1000;\n\n @Listen('keydown')\n handleKeyDown({ key }: KeyboardEvent) {\n key === 'Escape' && this.hideListener();\n }\n\n componentDidLoad(): void {\n this.trigger = firstTabbable(this.triggerElement) \|\| this.triggerElement;\n if (!this.isTabbable) {\n this.trigger?.setAttribute('tabindex', '0');\n }\n\n if (this.trigger && this.tooltip) {\n autoUpdate(this.trigger, this.tooltip, () => this.update());\n }\n\n if (isTouchScreen) {\n window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n }\n }\n\n componentWillRender(): void {\n this.hasSlottedContent = !!this.hostElement.querySelector('[slot=\"content\"]');\n this.hidden = this.disabled \|\| (!this.content && !this.hasSlottedContent);\n }\n\n disconnectedCallback(): void {\n if (isTouchScreen) {\n window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n }\n }\n\n render() {\n return (\n <Host>\n <div ref={el => (this.triggerElement = el)} aria-describedby={this.id} class=\"tooltip-trigger\">\n <slot />\n </div>\n <div\n ref={el => (this.tooltip = el)}\n id={this.id}\n aria-hidden={this.hidden}\n class={{\n tooltip: true,\n 'tooltip-hidden': this.hidden,\n 'tooltip-round': this.round,\n [`tooltip-${this.size}`]: Boolean(this.size)\n }}\n >\n {this.hasSlottedContent ? <slot name=\"content\" /> : this.content}\n </div>\n </Host>\n );\n }\n\n private get isTabbable() {\n return firstTabbable(this.trigger);\n }\n\n private async update() {\n if (this.trigger && this.tooltip) {\n await computePosition(this.trigger, this.tooltip, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]\n }).then(({ x, y }) => {\n if (this.tooltip) {\n Object.assign(this.tooltip.style, {\n left: `${Math.max(0, x)}px`,\n top: `${y}px`\n });\n }\n });\n }\n }\n\n private showListener() {\n window.clearTimeout(this.hideTimeout);\n this.showTimeout = window.setTimeout(() => {\n this.showTooltip();\n }, this.showDelay);\n }\n\n private hideListener() {\n window.clearTimeout(this.showTimeout);\n this.hideTimeout = window.setTimeout(() => {\n this.tooltip?.classList.remove('tooltip-show');\n }, this.hideDelay);\n }\n\n private touchStartListener(event: Event) {\n event.stopPropagation();\n this.touchTimeout = window.setTimeout(() => {\n this.showTooltip();\n }, this.longTouchDuration);\n }\n\n private touchEndListener() {\n if (this.touchTimeout) {\n window.clearTimeout(this.touchTimeout);\n }\n }\n\n private windowTouchStartListener() {\n this.tooltip?.classList.remove('tooltip-show');\n }\n\n private showTooltip() {\n !this.hidden && this.tooltip?.classList.add('tooltip-show');\n }\n}\n"]}
1	+ {"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-tooltip',\n styleUrl: 'cat-tooltip.scss',\n shadow: true\n})\nexport class CatTooltip {\n private static readonly OFFSET = 4;\n private static readonly SHIFT_PADDING = 4;\n private readonly id = `cat-tooltip-${nextUniqueId++}`;\n private tooltip?: HTMLElement;\n private trigger?: Element;\n private showTimeout?: number;\n private hideTimeout?: number;\n private touchTimeout?: number;\n private hidden = false;\n private cleanupFloatingUi?: () => void;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedContent = false;\n\n /*\n The content of the tooltip.\n /\n @Prop() content = '';\n\n /\n Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n * and invisible. Corresponds with the native HTML disabled attribute.\n /\n @Prop() disabled = false;\n\n /\n The placement of the tooltip.\n /\n @Prop() placement: Placement = 'top';\n\n /\n Use round tooltip edges.\n /\n @Prop() round = false;\n\n /\n The size of the tooltip.\n /\n @Prop() size: 's' \| 'm' \| 'l' = 'm';\n\n /\n The delay time for showing tooltip in ms.\n /\n @Prop() showDelay = 250;\n\n /\n The delay time for hiding tooltip in ms.\n /\n @Prop() hideDelay = 0;\n\n /\n The duration of tap to show the tooltip.\n */\n @Prop() longTouchDuration = 1000;\n\n @Listen('keydown')\n handleKeyDown({ key }: KeyboardEvent) {\n key === 'Escape' && this.hideListener();\n }\n\n componentDidLoad(): void {\n const slot = this.hostElement.shadowRoot?.querySelector('slot');\n this.trigger = slot?.assignedElements?.()?.[0];\n if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n this.trigger.setAttribute('aria-describedby', this.id);\n }\n\n if (isTouchScreen) {\n window.addEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.addEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.addEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.addEventListener('focusin', this.showListener.bind(this));\n this.trigger?.addEventListener('focusout', this.hideListener.bind(this));\n this.trigger?.addEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.addEventListener('mouseleave', this.hideListener.bind(this));\n }\n }\n\n componentWillRender(): void {\n this.hasSlottedContent = !!this.hostElement.querySelector('[slot=\"content\"]');\n this.hidden = this.disabled \|\| (!this.content && !this.hasSlottedContent);\n }\n\n disconnectedCallback(): void {\n if (isTouchScreen) {\n window.removeEventListener('touchstart', this.windowTouchStartListener.bind(this));\n this.trigger?.removeEventListener('touchstart', this.touchStartListener.bind(this));\n this.trigger?.removeEventListener('touchend', this.touchEndListener.bind(this));\n } else {\n this.trigger?.removeEventListener('mouseenter', this.showListener.bind(this));\n this.trigger?.removeEventListener('mouseleave', this.hideListener.bind(this));\n this.trigger?.removeEventListener('focusin', this.showListener.bind(this));\n this.trigger?.removeEventListener('focusout', this.hideListener.bind(this));\n }\n }\n\n render() {\n return (\n <Host>\n <slot />\n <div\n ref={el => (this.tooltip = el)}\n id={this.id}\n aria-hidden={this.hidden}\n class={{\n tooltip: true,\n 'tooltip-hidden': this.hidden,\n 'tooltip-round': this.round,\n [`tooltip-${this.size}`]: Boolean(this.size)\n }}\n >\n {this.hasSlottedContent ? <slot name=\"content\" /> : this.content}\n </div>\n </Host>\n );\n }\n\n private async update() {\n if (this.trigger && this.tooltip) {\n await computePosition(this.trigger, this.tooltip, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [offset(CatTooltip.OFFSET), flip(), shift({ padding: CatTooltip.SHIFT_PADDING })]\n }).then(({ x, y }) => {\n if (this.tooltip) {\n Object.assign(this.tooltip.style, {\n left: `${Math.max(0, x)}px`,\n top: `${y}px`\n });\n }\n });\n }\n }\n\n private showListener() {\n window.clearTimeout(this.hideTimeout);\n this.showTimeout = window.setTimeout(() => {\n this.showTooltip();\n }, this.showDelay);\n }\n\n private hideListener() {\n window.clearTimeout(this.showTimeout);\n this.hideTimeout = window.setTimeout(() => {\n this.tooltip?.classList.remove('tooltip-show');\n this.hideTooltip();\n }, this.hideDelay);\n }\n\n private touchStartListener(event: Event) {\n event.stopPropagation();\n this.touchTimeout = window.setTimeout(() => {\n this.showTooltip();\n }, this.longTouchDuration);\n }\n\n private touchEndListener() {\n if (this.touchTimeout) {\n window.clearTimeout(this.touchTimeout);\n this.hideTooltip();\n }\n }\n\n private windowTouchStartListener() {\n this.tooltip?.classList.remove('tooltip-show');\n }\n\n private showTooltip() {\n if (this.trigger && this.tooltip) {\n this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n }\n !this.hidden && this.tooltip?.classList.add('tooltip-show');\n }\n\n private hideTooltip() {\n if (this.cleanupFloatingUi) {\n this.cleanupFloatingUi();\n }\n }\n}\n"]}

package/dist/collection/scss/_snippets/_form-label.scss CHANGED Viewed

@@ -47,7 +47,8 @@ $cat-input-height: 2.5rem;
 }
 .input-horizontal,
-.textarea-horizontal {
+.textarea-horizontal,
+.select-horizontal {
   .label-wrapper {
     flex-direction: column;
   }

package/dist/components/cat-button-group.d.ts ADDED Viewed

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

package/dist/components/cat-button-group.js ADDED Viewed

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+const catButtonGroupCss = ":host{position:relative;display:inline-flex;vertical-align:middle}::slotted(cat-button[variant=outlined]),::slotted(cat-button:not([variant])){margin-right:-1px}::slotted(cat-button[variant=outlined]:last-child),::slotted(cat-button:not([variant]):last-child){margin-right:0}";
+const CatButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.formElements = [];
+    this.a11yLabel = undefined;
+  }
+  render() {
+    return (h(Host, { role: "group", "aria-label": this.a11yLabel }, h("slot", { onSlotchange: this.onSlotChange.bind(this) })));
+  }
+  onSlotChange() {
+    this.formElements = Array.from(this.hostElement.querySelectorAll('cat-button'));
+    this.formElements.forEach((element, index) => {
+      element.buttonGroupPosition = index === 0 ? 'first' : index === this.formElements.length - 1 ? 'last' : 'middle';
+    });
+  }
+  get hostElement() { return this; }
+  static get style() { return catButtonGroupCss; }
+}, [1, "cat-button-group", {
+    "a11yLabel": [1, "a11y-label"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-button-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-button-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatButtonGroup$1);
+      }
+      break;
+  } });
+}
+const CatButtonGroup = CatButtonGroup$1;
+const defineCustomElement = defineCustomElement$1;
+export { CatButtonGroup, defineCustomElement };
+//# sourceMappingURL=cat-button-group.js.map

package/dist/components/cat-button-group.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"cat-button-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,qRAAqR;;MCOlSA,gBAAc;;;;;IACjB,iBAAY,GAA2B,EAAE,CAAC;;;EAUlD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,SAAS,IAC3C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,EACP;GACH;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,CAAC;IAEhF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;MACvC,OAAO,CAAC,mBAAmB,GAAG,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,QAAQ,CAAC;KAClH,CAAC,CAAC;GACJ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatButtonGroup"],"sources":["./src/components/cat-button-group/cat-button-group.scss?tag=cat-button-group&encapsulation=shadow","./src/components/cat-button-group/cat-button-group.tsx"],"sourcesContent":[":host {\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n}\n\n::slotted(cat-button[variant='outlined']),\n::slotted(cat-button:not([variant])) {\n margin-right: -1px;\n}\n\n::slotted(cat-button[variant='outlined']:last-child),\n::slotted(cat-button:not([variant]):last-child) {\n margin-right: 0;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'cat-button-group',\n styleUrl: 'cat-button-group.scss',\n shadow: true\n})\nexport class CatButtonGroup {\n private formElements: HTMLCatButtonElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * Adds an accessible label for the button group that\n * it is only shown in assistive technologies, like screen readers.\n */\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n render() {\n return (\n <Host role=\"group\" aria-label={this.a11yLabel}>\n <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n </Host>\n );\n }\n\n private onSlotChange(): void {\n this.formElements = Array.from(this.hostElement.querySelectorAll('cat-button'));\n\n this.formElements.forEach((element, index) => {\n element.buttonGroupPosition = index === 0 ? 'first' : index === this.formElements.length - 1 ? 'last' : 'middle';\n });\n }\n}\n"],"version":3}

package/dist/components/cat-button2.js CHANGED Viewed

@@ -118,7 +118,7 @@ function createEmptyStyleRule(query) {
   }
 }
-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}.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 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content{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-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight: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 rgba(var(--base), 0.2);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:rgba(var(--base), 0.05)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none)}.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){text-decoration:var(--cat-link-button-decoration-hover, none);background-color:rgba(var(--base), 0.05)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, none);background-color:rgba(var(--base), 0.1)}.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-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.25rem 0.25rem;font-size:0.875rem;line-height:1rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=xs]){margin:-0.25rem -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.25rem;margin-bottom:-0.25rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.25rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.25rem}: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;padding-left:0;padding-right: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;padding-left:0;padding-right: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.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right: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.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right: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-active:not(:hover)){--cat-primary-text:transparent}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;border-radius:0;justify-content:left;padding-left:1.25rem;padding-right:1.25rem;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}";
+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}.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 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content{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-group-button-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-group-button-middle{border-radius:0}.cat-group-button-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-group-button:hover{z-index:1}.cat-group-button:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight: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 rgba(var(--base), 0.2);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:rgba(var(--base), 0.1)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none)}.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){text-decoration:var(--cat-link-button-decoration-hover, none);background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, none);background-color:rgba(var(--base), 0.1)}.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-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.25rem 0.25rem;font-size:0.875rem;line-height:1rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host(.cat-button-pull[size=xs]){margin:-0.25rem -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.25rem;margin-bottom:-0.25rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.25rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.25rem}: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;padding-left:0;padding-right: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;padding-left:0;padding-right: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.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right: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.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right: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-active:not(:hover)){--cat-primary-text:transparent}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;border-radius:0;justify-content:left;padding-left:1.25rem;padding-right:1.25rem;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}";
 const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -150,6 +150,7 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.a11yLabel = undefined;
     this.a11yCurrent = undefined;
     this.nativeAttributes = undefined;
+    this.buttonGroupPosition = undefined;
   }
   onIconOnlyChanged(value) {
     var _a, _b;
@@ -234,7 +235,9 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           '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)
+          [`cat-button-${this.size}`]: Boolean(this.size),
+          [`cat-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),
+          'cat-group-button': Boolean(this.buttonGroupPosition)
         }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), this.content));
     }
   }
@@ -306,6 +309,7 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "a11yLabel": [1, "a11y-label"],
     "a11yCurrent": [1, "a11y-current"],
     "nativeAttributes": [16],
+    "buttonGroupPosition": [1, "button-group-position"],
     "_iconOnly": [32],
     "doFocus": [64],
     "doBlur": [64],

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

	@@ -1 +1 @@
1	- {"file":"cat-button2.js","mappings":"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","names":["log"],"sources":["./src/utils/breakpoints.ts","./src/utils/platform.ts","./src/utils/media-matcher.ts","./src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","./src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = (typeof _breakpoints)[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n xs: '(max-width: 539.98px)',\n s: '(max-width: 767.98px)',\n m: '(max-width: 991.98px)',\n l: '(max-width: 1199.98px)',\n xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n hasV8BreakIterator = false;\n}\n\nexport class Platform {\n /** Whether the current browser is Microsoft Edge. /\n EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n /* Whether the current rendering engine is Microsoft Trident. /\n TRIDENT: boolean = /(msie\|trident)/i.test(navigator.userAgent);\n\n // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n /* Whether the current rendering engine is Blink. /\n BLINK: boolean =\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n !!((window as any).chrome \|\| hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n // ensure that Webkit runs standalone and is not used as another engine's base.\n /* Whether the current rendering engine is WebKit. /\n WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n /* Whether the current platform is Apple iOS. /\n IOS: boolean = /iPad\|iPhone\|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n // them self as Gecko-like browsers and modify the userAgent's according to that.\n // Since we only cover one explicit Firefox case, we can simply check for Firefox\n // instead of having an unstable check for Gecko.\n /* Whether the current browser is Firefox. /\n FIREFOX: boolean = /(firefox\|minefield)/i.test(navigator.userAgent);\n\n /* Whether the current platform is Android. /\n // Trident on mobile adds the android platform to the userAgent to trick detections.\n ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n // Safari browser should also use Webkit as its layout engine.\n /* Whether the current browser is Safari. /\n SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/* Global registry for all dynamically-created, injected media queries. /\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/* Style tag that holds all of the dynamically-created media queries. /\nlet mediaQueryStyleNode: HTMLStyleElement \| undefined;\n\n/* A utility for calling matchMedia queries. /\nexport class MediaMatcher {\n private _platform;\n private _matchMedia: (query: string) => MediaQueryList;\n\n constructor() {\n this._platform = new Platform();\n this._matchMedia = window.matchMedia.bind(window);\n }\n\n /\n Evaluates the given media query and returns the native MediaQueryList from which results\n * can be retrieved.\n * Confirms the layout engine will trigger for the selector query provided and returns the\n * MediaQueryList for the query provided.\n /\n matchMedia(query: string): MediaQueryList {\n if (this._platform.WEBKIT \|\| this._platform.BLINK) {\n createEmptyStyleRule(query);\n }\n return this._matchMedia(query);\n }\n}\n\n/\n Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n /\nfunction createEmptyStyleRule(query: string) {\n if (mediaQueriesForWebkitCompatibility.has(query)) {\n return;\n }\n\n try {\n if (!mediaQueryStyleNode) {\n mediaQueryStyleNode = document.createElement('style');\n mediaQueryStyleNode.setAttribute('type', 'text/css');\n document.head.appendChild(mediaQueryStyleNode);\n }\n if (mediaQueryStyleNode.sheet) {\n mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n mediaQueriesForWebkitCompatibility.add(query);\n }\n } catch (e) {\n log.error(e);\n }\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.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: color cat-token('time.transition.s') linear, border-color cat-token('time.transition.s') linear,\n background-color cat-token('time.transition.s') linear, 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 @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// ----- theme\n\n.cat-button-filled {\n background-color: cat-token-wrap(var(--bg));\n color: cat-token-wrap(var(--fill));\n font-weight: 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 cat-token-wrap(var(--base), $alpha: 0.2);\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: cat-token-wrap(var(--base), $alpha: 0.05);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n}\n\n.cat-button-text {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n text-decoration: cat-token('font.decoration.linkButton');\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 background-color: rgba(var(--base), 0.05);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkButtonHover');\n background-color: rgba(var(--base), 0.1);\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('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding) {\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: 0.25rem;\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 padding-left: 0;\n padding-right: 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);\n@include size('xl', 'l', 1.25rem);\n\n// ----- tabs\n\n:host(.cat-tab-active:not(:hover)) {\n --cat-primary-text: transparent;\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n justify-content: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n width: 100%;\n\n .cat-button {\n box-shadow: none;\n border-radius: 0;\n justify-content: left;\n padding-left: $cat-nav-padding-horizontal;\n padding-right: $cat-nav-padding-horizontal;\n gap: 0.5rem;\n\n &:focus-visible {\n outline-offset: -2px;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\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: true\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 @State() _iconOnly = true;\n\n /\n The rendering style of the button.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'outlined';\n\n /\n The color palette of the button.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = '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 The SVG source of an icon to be displayed in the button. This takes\n * precenedence over the `icon` name.\n /\n @Prop() iconSrc?: 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 @Watch('iconOnly')\n onIconOnlyChanged(value: boolean \| Breakpoint): void {\n // teardown\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\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 if (this.isIconButton && !this.a11yLabel) {\n log.warn('[A11y] Missing ARIA label on icon button', this);\n }\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\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 if (this.url) {\n return (\n <a\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-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 }}\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 );\n } else {\n return (\n <button\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-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 }}\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 );\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) \|\| Boolean(this.iconSrc)) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"prefix\"></cat-icon>\n ) : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\">\n <slot></slot>\n </span>\n ),\n this.hasSuffixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"suffix\"></cat-icon>\n ) : 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}
1	+ {"file":"cat-button2.js","mappings":"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","names":["log"],"sources":["./src/utils/breakpoints.ts","./src/utils/platform.ts","./src/utils/media-matcher.ts","./src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","./src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = (typeof _breakpoints)[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n xs: '(max-width: 539.98px)',\n s: '(max-width: 767.98px)',\n m: '(max-width: 991.98px)',\n l: '(max-width: 1199.98px)',\n xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n hasV8BreakIterator = false;\n}\n\nexport class Platform {\n /** Whether the current browser is Microsoft Edge. /\n EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n /* Whether the current rendering engine is Microsoft Trident. /\n TRIDENT: boolean = /(msie\|trident)/i.test(navigator.userAgent);\n\n // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n /* Whether the current rendering engine is Blink. /\n BLINK: boolean =\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n !!((window as any).chrome \|\| hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n // ensure that Webkit runs standalone and is not used as another engine's base.\n /* Whether the current rendering engine is WebKit. /\n WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n /* Whether the current platform is Apple iOS. /\n IOS: boolean = /iPad\|iPhone\|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n // them self as Gecko-like browsers and modify the userAgent's according to that.\n // Since we only cover one explicit Firefox case, we can simply check for Firefox\n // instead of having an unstable check for Gecko.\n /* Whether the current browser is Firefox. /\n FIREFOX: boolean = /(firefox\|minefield)/i.test(navigator.userAgent);\n\n /* Whether the current platform is Android. /\n // Trident on mobile adds the android platform to the userAgent to trick detections.\n ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n // Safari browser should also use Webkit as its layout engine.\n /* Whether the current browser is Safari. /\n SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/* Global registry for all dynamically-created, injected media queries. /\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/* Style tag that holds all of the dynamically-created media queries. /\nlet mediaQueryStyleNode: HTMLStyleElement \| undefined;\n\n/* A utility for calling matchMedia queries. /\nexport class MediaMatcher {\n private _platform;\n private _matchMedia: (query: string) => MediaQueryList;\n\n constructor() {\n this._platform = new Platform();\n this._matchMedia = window.matchMedia.bind(window);\n }\n\n /\n Evaluates the given media query and returns the native MediaQueryList from which results\n * can be retrieved.\n * Confirms the layout engine will trigger for the selector query provided and returns the\n * MediaQueryList for the query provided.\n /\n matchMedia(query: string): MediaQueryList {\n if (this._platform.WEBKIT \|\| this._platform.BLINK) {\n createEmptyStyleRule(query);\n }\n return this._matchMedia(query);\n }\n}\n\n/\n Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n /\nfunction createEmptyStyleRule(query: string) {\n if (mediaQueriesForWebkitCompatibility.has(query)) {\n return;\n }\n\n try {\n if (!mediaQueryStyleNode) {\n mediaQueryStyleNode = document.createElement('style');\n mediaQueryStyleNode.setAttribute('type', 'text/css');\n document.head.appendChild(mediaQueryStyleNode);\n }\n if (mediaQueryStyleNode.sheet) {\n mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n mediaQueriesForWebkitCompatibility.add(query);\n }\n } catch (e) {\n log.error(e);\n }\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.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: color cat-token('time.transition.s') linear, border-color cat-token('time.transition.s') linear,\n background-color cat-token('time.transition.s') linear, 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 @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-group-button {\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: 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 cat-token-wrap(var(--base), $alpha: 0.2);\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: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n}\n\n.cat-button-text {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n text-decoration: cat-token('font.decoration.linkButton');\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 background-color: rgba(var(--base), 0.1);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkButtonHover');\n background-color: rgba(var(--base), 0.1);\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('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding) {\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: 0.25rem;\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 padding-left: 0;\n padding-right: 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);\n@include size('xl', 'l', 1.25rem);\n\n// ----- tabs\n\n:host(.cat-tab-active:not(:hover)) {\n --cat-primary-text: transparent;\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n justify-content: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n width: 100%;\n\n .cat-button {\n box-shadow: none;\n border-radius: 0;\n justify-content: left;\n padding-left: $cat-nav-padding-horizontal;\n padding-right: $cat-nav-padding-horizontal;\n gap: 0.5rem;\n\n &:focus-visible {\n outline-offset: -2px;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\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: true\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 @State() _iconOnly = true;\n\n /\n The rendering style of the button.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' = 'outlined';\n\n /\n The color palette of the button.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'danger' \| 'success' \| 'warning' = '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 The SVG source of an icon to be displayed in the button. This takes\n * precenedence over the `icon` name.\n /\n @Prop() iconSrc?: 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 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 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\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 if (this.isIconButton && !this.a11yLabel) {\n log.warn('[A11y] Missing ARIA label on icon button', this);\n }\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\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 if (this.url) {\n return (\n <a\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-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 }}\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 );\n } else {\n return (\n <button\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-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-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),\n 'cat-group-button': 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 );\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) \|\| Boolean(this.iconSrc)) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return (Boolean(this.icon) \|\| Boolean(this.iconSrc)) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"prefix\"></cat-icon>\n ) : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\">\n <slot></slot>\n </span>\n ),\n this.hasSuffixIcon ? (\n <cat-icon icon={this.icon} iconSrc={this.iconSrc} size={this.iconSize} part=\"suffix\"></cat-icon>\n ) : 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}