@haiilo/catalyst 11.0.0 → 12.0.0

package/dist/components/cat-avatar2.js

@@ -17,22 +17,24 @@ const loadImg = (src) => {
 };
 
 const catAvatarCss = ":host{display:contents}:host([hidden]){display:none}.avatar{flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:inherit;color:var(--cat-avatar-fill, #515c6c);background-color:var(--cat-avatar-bg, #f2f4f7);background-size:cover;background-position:center;white-space:nowrap;overflow:hidden;vertical-align:middle;font-weight:600;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.avatar:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.avatar-round{border-radius:50%}.avatar-xs{width:var(--cat-avatar-size, 1.5rem);height:var(--cat-avatar-size, 1.5rem);line-height:var(--cat-avatar-size, 1.5rem);font-size:var(--cat-avatar-font-size, 0.75rem)}.avatar-s{width:var(--cat-avatar-size, 2rem);height:var(--cat-avatar-size, 2rem);line-height:var(--cat-avatar-size, 2rem);font-size:var(--cat-avatar-font-size, 0.875rem)}.avatar-m{width:var(--cat-avatar-size, 2.5rem);height:var(--cat-avatar-size, 2.5rem);line-height:var(--cat-avatar-size, 2.5rem);font-size:var(--cat-avatar-font-size, 0.9375rem)}.avatar-l{width:var(--cat-avatar-size, 3rem);height:var(--cat-avatar-size, 3rem);line-height:var(--cat-avatar-size, 3rem);font-size:var(--cat-avatar-font-size, 1.125rem)}.avatar-xl{width:var(--cat-avatar-size, 3.5rem);height:var(--cat-avatar-size, 3.5rem);line-height:var(--cat-avatar-size, 3.5rem);font-size:var(--cat-avatar-font-size, 1.25rem)}";
-const CatAvatarStyle0 = catAvatarCss;
 
 const CatAvatar = /*@__PURE__*/ proxyCustomElement(class CatAvatar extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.backgroundImage = undefined;
+        /**
+         * The size of the avatar.
+         */
         this.size = 'm';
+        /**
+         * Use round avatar edges.
+         */
         this.round = false;
+        /**
+         * The label of the avatar.
+         */
         this.label = '';
-        this.initials = undefined;
-        this.src = undefined;
-        this.icon = undefined;
-        this.url = undefined;
-        this.urlTarget = undefined;
     }
     onSrcChanged(value) {
         if (value) {
@@ -81,7 +83,7 @@ const CatAvatar = /*@__PURE__*/ proxyCustomElement(class CatAvatar extends HTMLE
     static get watchers() { return {
         "src": ["onSrcChanged"]
     }; }
-    static get style() { return CatAvatarStyle0; }
+    static get style() { return catAvatarCss; }
 }, [17, "cat-avatar", {
         "size": [1],
         "round": [4],
@@ -115,5 +117,6 @@ function defineCustomElement() {
 }
 
 export { CatAvatar as C, defineCustomElement as d };
+//# sourceMappingURL=cat-avatar2.js.map
 
 //# sourceMappingURL=cat-avatar2.js.map

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

@@ -1 +1 @@
-{"file":"cat-avatar2.js","mappings":";;;AAAA;;;;;;AAMA,MAAM,OAAO,GAAG,CAAC,GAAW;IAC1B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;QACjC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;QAC1B,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACxC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACxC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;KACjB,CAAC,CAAC;AACL,CAAC;;ACbD,MAAM,YAAY,GAAG,+8CAA+8C,CAAC;AACr+C,wBAAe,YAAY;;MCYd,SAAS;;;;;;oBAQ0B,GAAG;qBAKjC,KAAK;qBAKL,EAAE;;;;;;;IA4BlB,YAAY,CAAC,KAAc;QACzB,IAAI,KAAK,EAAE;YACT,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CACjB,OAAO,IAAI,CAAC,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,EAC9C,OAAO,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,CACzC,CAAC;SACH;aAAM;YACL,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;SAClC;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;YACnF,QACE,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IAC1G,IAAI,CAAC,OAAO,CACX,EACJ;SACH;aAAM;YACL,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IACrE,IAAI,CAAC,OAAO,CACR,EACP;SACH;KACF;IAED,IAAY,OAAO;QACjB,OAAO,CAAC,IAAI,CAAC,eAAe;cACxB,CAAC,IAAI,CAAC,IAAI,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;cAC1F,EAAE,CAAC;KACR;IAED,IAAY,QAAQ;QAClB,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;KACrD;IAED,IAAY,QAAQ;QAClB,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,cAAc,EAAE,IAAI,CAAC,KAAK;YAC1B,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;SAC5C,CAAC;KACH;IAEO,WAAW;QACjB,QACE,IAAI,CAAC,QAAQ;YACb,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;iBACd,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;iBACd,IAAI,CAAC,EAAE,CAAC,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/utils/load-img.ts","src/components/cat-avatar/cat-avatar.scss?tag=cat-avatar&encapsulation=shadow","src/components/cat-avatar/cat-avatar.tsx"],"sourcesContent":["/**\n * Loads an image and wraps the result in a promise.\n *\n * @param src the image URL\n * @returns a promise\n */\nconst loadImg = (src: string): Promise<Event> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', resolve);\n    image.addEventListener('error', reject);\n    image.src = src;\n  });\n};\n\nexport default loadImg;\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n// -----\n\n$-background-color: cat-token('color.base.neutral.100');\n$-color: cat-token('color.base.neutral.500');\n$-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n// -----\n\n:host {\n  /**\n   * @prop --cat-avatar-bg: The background color of the avatar.\n   * @prop --cat-avatar-fill: The text color of the avatar.\n   * @prop --cat-avatar-size: The size of the avatar.\n   * @prop --cat-avatar-font-size: The font size of the avatar.\n   */\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.avatar {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('m');\n  text-decoration: inherit;\n  color: var(--cat-avatar-fill, $-color);\n  background-color: var(--cat-avatar-bg, $-background-color);\n  background-size: cover;\n  background-position: center;\n  white-space: nowrap;\n  overflow: hidden;\n  vertical-align: middle;\n  font-weight: 600;\n  @include cat-select(none);\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.avatar-round {\n  border-radius: 50%;\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .avatar-#{$size} {\n    width: var(--cat-avatar-size, map.get($-sizes, $size));\n    height: var(--cat-avatar-size, map.get($-sizes, $size));\n    line-height: var(--cat-avatar-size, map.get($-sizes, $size));\n    font-size: var(--cat-avatar-font-size, cat-body-font-size($fontSize));\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 's');\n@include size('m', 'm');\n@include size('l', 'l');\n@include size('xl', 'xl');\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport loadImg from '../../utils/load-img';\n\n/**\n * Avatars are used to represent a person or object.\n */\n@Component({\n  tag: 'cat-avatar',\n  styleUrl: 'cat-avatar.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatAvatar {\n  @State() backgroundImage?: string;\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The size of the avatar.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round avatar edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The label of the avatar.\n   */\n  @Prop() label = '';\n\n  /**\n   * Custom initials for the avatar.\n   */\n  @Prop() initials?: string;\n\n  /**\n   * An optional avatar image.\n   */\n  @Prop() src?: string;\n\n  /**\n   * An icon to be used instead of the initials.\n   */\n  @Prop() icon?: string;\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  @Watch('src')\n  onSrcChanged(value?: string): void {\n    if (value) {\n      loadImg(value).then(\n        () => (this.backgroundImage = `url(${value})`),\n        () => (this.backgroundImage = undefined)\n      );\n    } else {\n      this.backgroundImage = undefined;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.onSrcChanged(this.src);\n  }\n\n  render() {\n    if (this.url) {\n      this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n      return (\n        <a href={this.url} target={this.urlTarget} style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <span style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </span>\n      );\n    }\n  }\n\n  private get content() {\n    return !this.backgroundImage\n      ? [this.icon ? <cat-icon icon={this.icon} size={this.size}></cat-icon> : this.getInitials()]\n      : [];\n  }\n\n  private get cssStyle() {\n    return { 'background-image': this.backgroundImage };\n  }\n\n  private get cssClass() {\n    return {\n      avatar: true,\n      'avatar-round': this.round,\n      [`avatar-${this.size}`]: Boolean(this.size)\n    };\n  }\n\n  private getInitials(): string {\n    return (\n      this.initials ??\n      (this.label ?? '')\n        .split(' ')\n        .map(n => n[0])\n        .join('')\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-avatar2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/utils/load-img.ts","src/components/cat-avatar/cat-avatar.scss?tag=cat-avatar&encapsulation=shadow","src/components/cat-avatar/cat-avatar.tsx"],"sourcesContent":["/**\n * Loads an image and wraps the result in a promise.\n *\n * @param src the image URL\n * @returns a promise\n */\nconst loadImg = (src: string): Promise<Event> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', resolve);\n    image.addEventListener('error', reject);\n    image.src = src;\n  });\n};\n\nexport default loadImg;\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n// -----\n\n$-background-color: cat-token('color.base.neutral.100');\n$-color: cat-token('color.base.neutral.500');\n$-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n// -----\n\n:host {\n  /**\n   * @prop --cat-avatar-bg: The background color of the avatar.\n   * @prop --cat-avatar-fill: The text color of the avatar.\n   * @prop --cat-avatar-size: The size of the avatar.\n   * @prop --cat-avatar-font-size: The font size of the avatar.\n   */\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.avatar {\n  flex: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('m');\n  text-decoration: inherit;\n  color: var(--cat-avatar-fill, $-color);\n  background-color: var(--cat-avatar-bg, $-background-color);\n  background-size: cover;\n  background-position: center;\n  white-space: nowrap;\n  overflow: hidden;\n  vertical-align: middle;\n  font-weight: 600;\n  @include cat-select(none);\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.avatar-round {\n  border-radius: 50%;\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .avatar-#{$size} {\n    width: var(--cat-avatar-size, map.get($-sizes, $size));\n    height: var(--cat-avatar-size, map.get($-sizes, $size));\n    line-height: var(--cat-avatar-size, map.get($-sizes, $size));\n    font-size: var(--cat-avatar-font-size, cat-body-font-size($fontSize));\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 's');\n@include size('m', 'm');\n@include size('l', 'l');\n@include size('xl', 'xl');\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport loadImg from '../../utils/load-img';\n\n/**\n * Avatars are used to represent a person or object.\n */\n@Component({\n  tag: 'cat-avatar',\n  styleUrl: 'cat-avatar.scss',\n  shadow: {\n    delegatesFocus: true\n  }\n})\nexport class CatAvatar {\n  @State() backgroundImage?: string;\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The size of the avatar.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round avatar edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The label of the avatar.\n   */\n  @Prop() label = '';\n\n  /**\n   * Custom initials for the avatar.\n   */\n  @Prop() initials?: string;\n\n  /**\n   * An optional avatar image.\n   */\n  @Prop() src?: string;\n\n  /**\n   * An icon to be used instead of the initials.\n   */\n  @Prop() icon?: string;\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  @Watch('src')\n  onSrcChanged(value?: string): void {\n    if (value) {\n      loadImg(value).then(\n        () => (this.backgroundImage = `url(${value})`),\n        () => (this.backgroundImage = undefined)\n      );\n    } else {\n      this.backgroundImage = undefined;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.onSrcChanged(this.src);\n  }\n\n  render() {\n    if (this.url) {\n      this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;\n      return (\n        <a href={this.url} target={this.urlTarget} style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <span style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </span>\n      );\n    }\n  }\n\n  private get content() {\n    return !this.backgroundImage\n      ? [this.icon ? <cat-icon icon={this.icon} size={this.size}></cat-icon> : this.getInitials()]\n      : [];\n  }\n\n  private get cssStyle() {\n    return { 'background-image': this.backgroundImage };\n  }\n\n  private get cssClass() {\n    return {\n      avatar: true,\n      'avatar-round': this.round,\n      [`avatar-${this.size}`]: Boolean(this.size)\n    };\n  }\n\n  private getInitials(): string {\n    return (\n      this.initials ??\n      (this.label ?? '')\n        .split(' ')\n        .map(n => n[0])\n        .join('')\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-badge.js

@@ -3,7 +3,6 @@ import { i as isBreakpoint, M as MediaMatcher, B as Breakpoints } from './media-
 import { d as defineCustomElement$2 } from './cat-icon2.js';
 
 const catBadgeCss = ":host([hidden]){display:none}:host{display:inline-flex;max-width:100%;vertical-align:baseline;align-items:center;justify-content:center;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;line-height:1.5;flex-shrink:0}:host slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}:host([round]){border-radius:10rem}:host([variant=filled]){background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}:host([variant=outlined]){background-color:white;color:rgb(var(--text));box-shadow:inset 0 0 0 1px rgba(var(--text), 0.2)}:host([color=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)}:host([color=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)}:host([color=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)}:host([color=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)}:host([color=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)}:host([color=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)}:host([size=xs]){height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem;gap:0.25rem}:host([data-icon-badge=xs]){width:1rem;height:1rem;padding:0}:host([size=s]){height:1.5rem;min-width:1.5rem;font-size:0.75rem;padding:0 0.5rem;gap:0.25rem}:host([data-icon-badge=s]){width:1.5rem;height:1.5rem;padding:0}:host([size=m]){height:2rem;min-width:2rem;font-size:0.875rem;padding:0 0.75rem;gap:0.25rem}:host([data-icon-badge=m]){width:2rem;height:2rem;padding:0}:host([size=l]){height:2.5rem;min-width:2.5rem;font-size:0.9375rem;padding:0 1rem;gap:0.25rem}:host([data-icon-badge=l]){width:2.5rem;height:2.5rem;padding:0}:host([size=xl]){height:3rem;min-width:3rem;font-size:1.125rem;padding:0 1rem;gap:0.25rem}:host([data-icon-badge=xl]){width:3rem;height:3rem;padding:0}:host([pulse][variant=filled]){animation:1.5s ease 0s infinite normal none running pulse}:host([pulse][variant=outlined]){animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--text), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--text), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--text), 0.2)}}";
-const CatBadgeStyle0 = catBadgeCss;
 
 const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class CatBadge extends HTMLElement {
     constructor() {
@@ -11,13 +10,33 @@ const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class CatBadge extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this._iconOnly = true;
+        /**
+         * The rendering style of the badge.
+         */
         this.variant = 'filled';
+        /**
+         * The color palette of the badge.
+         */
         this.color = 'primary';
+        /**
+         * The size of the badge.
+         */
         this.size = 'm';
+        /**
+         * Use round badge edges.
+         */
         this.round = false;
+        /**
+         * Draw attention to the badge with a subtle animation.
+         */
         this.pulse = false;
-        this.icon = undefined;
+        /**
+         * Hide the actual button content and only display the icon.
+         */
         this.iconOnly = false;
+        /**
+         * Display the icon on the right.
+         */
         this.iconRight = false;
     }
     onIconOnlyChanged(value) {
@@ -69,7 +88,7 @@ const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class CatBadge extends HTMLE
     static get watchers() { return {
         "iconOnly": ["onIconOnlyChanged"]
     }; }
-    static get style() { return CatBadgeStyle0; }
+    static get style() { return catBadgeCss; }
 }, [1, "cat-badge", {
         "variant": [513],
         "color": [513],
@@ -106,5 +125,6 @@ const CatBadge = CatBadge$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CatBadge, defineCustomElement };
+//# sourceMappingURL=cat-badge.js.map
 
 //# sourceMappingURL=cat-badge.js.map

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

@@ -1 +1 @@
-{"file":"cat-badge.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,w1FAAw1F,CAAC;AAC72F,uBAAe,WAAW;;MCYbA,UAAQ;;;;;yBAOE,IAAI;uBAKiC,QAAQ;qBAKoC,SAAS;oBAKhD,GAAG;qBAKjC,KAAK;qBAKL,KAAK;;wBAUG,KAAK;yBAK1B,KAAK;;IAGzB,iBAAiB,CAAC,KAA2B;;;QAG3C,IAAI,CAAC,cAAc,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAmB,CAAC,CAAC;QAC7E,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;;QAEpC,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE;YACvB,IAAI,CAAC,YAAY,KAAjB,IAAI,CAAC,YAAY,GAAK,IAAI,YAAY,EAAE,EAAC;YACzC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;YACvE,IAAI,CAAC,kBAAkB,GAAG,CAAC,KAA0B,MAAM,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;YAC3F,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YACxE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;SAC9C;aAAM;YACL,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;IAED,IAAY,WAAW;QACrB,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC;KAC7C;IAED,IAAY,aAAa;QACvB,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;KACjE;IAED,IAAY,aAAa;QACvB,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;KAChE;IAED,IAAY,QAAQ;QAClB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI,CAAC;YACV,KAAK,GAAG;gBACN,OAAO,IAAI,CAAC;YACd,KAAK,GAAG,CAAC;YACT,KAAK,IAAI;gBACP,OAAO,GAAG,CAAC;YACb;gBACE,OAAO,GAAG,CAAC;SACd;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,wEAAkB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,IACvD,IAAI,CAAC,aAAa,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,GAAY,GAAG,IAAI,EACrG,IAAI,CAAC,WAAW,IACf,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,WAAW,GAAY,KAE7E,eAAa,CACd,EACA,IAAI,CAAC,aAAa,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,GAAY,GAAG,IAAI,CACjG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatBadge"],"sources":["src/components/cat-badge/cat-badge.scss?tag=cat-badge&encapsulation=shadow","src/components/cat-badge/cat-badge.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n// -----\n\n$-sizes: (\n  'xl': 3rem,\n  'l': 2.5rem,\n  'm': 2rem,\n  's': 1.5rem,\n  'xs': 1rem\n);\n$-paddings: (\n  'xl': 0 1rem,\n  'l': 0 1rem,\n  'm': 0 0.75rem,\n  's': 0 0.5rem,\n  'xs': 0 0.25rem\n);\n\n// -----\n\n:host([hidden]) {\n  display: none;\n}\n\n:host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: baseline;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('m');\n  text-decoration: none;\n  line-height: 1.5;\n  flex-shrink: 0;\n\n  slot {\n    display: inline-block;\n    @include cat-ellipsis;\n  }\n}\n\n// ----- round\n\n:host([round]) {\n  border-radius: 10rem;\n}\n\n// ----- theme\n\n$-outline: inset 0 0 0 1px cat-token-wrap(var(--text), $alpha: 0.2);\n\n:host([variant='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\n:host([variant='outlined']) {\n  background-color: cat-token('color.ui.background.surface');\n  color: cat-token-wrap(var(--text));\n  box-shadow: $-outline;\n}\n\n@mixin theme($theme) {\n  :host([color='#{$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  }\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) {\n  $-total-height: map.get($-sizes, $size);\n  :host([size='#{$size}']) {\n    height: map.get($-sizes, $size);\n    min-width: map.get($-sizes, $size);\n    font-size: cat-body-font-size($fontSize);\n    padding: map.get($-paddings, $size);\n    gap: 0.25rem;\n  }\n  :host([data-icon-badge='#{$size}']) {\n    width: $-total-height;\n    height: $-total-height;\n    padding: 0;\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 'xs');\n@include size('m', 's');\n@include size('l', 'm');\n@include size('xl', 'l');\n\n// ----- pulse\n\n$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg));\n$-pulse-70: transparent 0 0 0 0.5rem;\n$-pulse-100: transparent 0 0 0 0;\n\n:host([pulse][variant='filled']) {\n  animation: 1.5s ease 0s infinite normal none running pulse;\n}\n\n:host([pulse][variant='outlined']) {\n  animation: 1.5s ease 0s infinite normal none running pulse-outlined;\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: $-pulse-0;\n  }\n\n  70% {\n    box-shadow: $-pulse-70;\n  }\n\n  100% {\n    box-shadow: $-pulse-100;\n  }\n}\n\n@keyframes pulse-outlined {\n  0% {\n    box-shadow: $-pulse-0, $-outline;\n  }\n\n  70% {\n    box-shadow: $-pulse-70, $-outline;\n  }\n\n  100% {\n    box-shadow: $-pulse-100, $-outline;\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/**\n * Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n */\n@Component({\n  tag: 'cat-badge',\n  styleUrl: 'cat-badge.scss',\n  shadow: true\n})\nexport class CatBadge {\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  /**\n   * The rendering style of the badge.\n   */\n  @Prop({ reflect: true }) variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * The color palette of the badge.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The size of the badge.\n   */\n  @Prop({ reflect: true }) size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round badge edges.\n   */\n  @Prop({ reflect: true }) round = false;\n\n  /**\n   * Draw attention to the badge with a subtle animation.\n   */\n  @Prop({ reflect: true }) pulse = 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  @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  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  private get isIconBadge() {\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 iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n      case 's':\n        return 'xs';\n      case 'l':\n      case 'xl':\n        return 'l';\n      default:\n        return 'm';\n    }\n  }\n\n  render() {\n    return (\n      <Host data-icon-badge={this.isIconBadge ? this.size : null}>\n        {this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null}\n        {this.isIconBadge ? (\n          <cat-icon icon={this.icon} size={this.iconSize} class=\"icon-only\"></cat-icon>\n        ) : (\n          <slot></slot>\n        )}\n        {this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-badge.js","mappings":"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","names":["CatBadge","__stencil_proxyCustomElement"],"sources":["src/components/cat-badge/cat-badge.scss?tag=cat-badge&encapsulation=shadow","src/components/cat-badge/cat-badge.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n// -----\n\n$-sizes: (\n  'xl': 3rem,\n  'l': 2.5rem,\n  'm': 2rem,\n  's': 1.5rem,\n  'xs': 1rem\n);\n$-paddings: (\n  'xl': 0 1rem,\n  'l': 0 1rem,\n  'm': 0 0.75rem,\n  's': 0 0.5rem,\n  'xs': 0 0.25rem\n);\n\n// -----\n\n:host([hidden]) {\n  display: none;\n}\n\n:host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: baseline;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('m');\n  text-decoration: none;\n  line-height: 1.5;\n  flex-shrink: 0;\n\n  slot {\n    display: inline-block;\n    @include cat-ellipsis;\n  }\n}\n\n// ----- round\n\n:host([round]) {\n  border-radius: 10rem;\n}\n\n// ----- theme\n\n$-outline: inset 0 0 0 1px cat-token-wrap(var(--text), $alpha: 0.2);\n\n:host([variant='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\n:host([variant='outlined']) {\n  background-color: cat-token('color.ui.background.surface');\n  color: cat-token-wrap(var(--text));\n  box-shadow: $-outline;\n}\n\n@mixin theme($theme) {\n  :host([color='#{$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  }\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) {\n  $-total-height: map.get($-sizes, $size);\n  :host([size='#{$size}']) {\n    height: map.get($-sizes, $size);\n    min-width: map.get($-sizes, $size);\n    font-size: cat-body-font-size($fontSize);\n    padding: map.get($-paddings, $size);\n    gap: 0.25rem;\n  }\n  :host([data-icon-badge='#{$size}']) {\n    width: $-total-height;\n    height: $-total-height;\n    padding: 0;\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 'xs');\n@include size('m', 's');\n@include size('l', 'm');\n@include size('xl', 'l');\n\n// ----- pulse\n\n$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg));\n$-pulse-70: transparent 0 0 0 0.5rem;\n$-pulse-100: transparent 0 0 0 0;\n\n:host([pulse][variant='filled']) {\n  animation: 1.5s ease 0s infinite normal none running pulse;\n}\n\n:host([pulse][variant='outlined']) {\n  animation: 1.5s ease 0s infinite normal none running pulse-outlined;\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: $-pulse-0;\n  }\n\n  70% {\n    box-shadow: $-pulse-70;\n  }\n\n  100% {\n    box-shadow: $-pulse-100;\n  }\n}\n\n@keyframes pulse-outlined {\n  0% {\n    box-shadow: $-pulse-0, $-outline;\n  }\n\n  70% {\n    box-shadow: $-pulse-70, $-outline;\n  }\n\n  100% {\n    box-shadow: $-pulse-100, $-outline;\n  }\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/**\n * Badges are used to inform users of the status of an object or of an action\n * that’s been taken.\n */\n@Component({\n  tag: 'cat-badge',\n  styleUrl: 'cat-badge.scss',\n  shadow: true\n})\nexport class CatBadge {\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  /**\n   * The rendering style of the badge.\n   */\n  @Prop({ reflect: true }) variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * The color palette of the badge.\n   */\n  @Prop({ reflect: true }) color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The size of the badge.\n   */\n  @Prop({ reflect: true }) size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round badge edges.\n   */\n  @Prop({ reflect: true }) round = false;\n\n  /**\n   * Draw attention to the badge with a subtle animation.\n   */\n  @Prop({ reflect: true }) pulse = 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  @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  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  private get isIconBadge() {\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 iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n      case 's':\n        return 'xs';\n      case 'l':\n      case 'xl':\n        return 'l';\n      default:\n        return 'm';\n    }\n  }\n\n  render() {\n    return (\n      <Host data-icon-badge={this.isIconBadge ? this.size : null}>\n        {this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null}\n        {this.isIconBadge ? (\n          <cat-icon icon={this.icon} size={this.iconSize} class=\"icon-only\"></cat-icon>\n        ) : (\n          <slot></slot>\n        )}\n        {this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const catButtonGroupCss = ":host{position:relative;display:inline-flex;vertical-align:middle}";
-const CatButtonGroupStyle0 = catButtonGroupCss;
 
 const CatButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatButtonGroup extends HTMLElement {
     constructor() {
@@ -9,7 +8,6 @@ const CatButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatButtonGroup e
         this.__registerHost();
         this.__attachShadow();
         this.buttonElements = [];
-        this.a11yLabel = undefined;
     }
     render() {
         return (h(Host, { key: '3d43547333f73560d31ca96bdba2d2b8b9976dbd', role: "group", "aria-label": this.a11yLabel }, h("slot", { key: 'd329ea90250b161862361e907427920e8866445a', onSlotchange: this.onSlotChange.bind(this) })));
@@ -22,7 +20,7 @@ const CatButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatButtonGroup e
         });
     }
     get hostElement() { return this; }
-    static get style() { return CatButtonGroupStyle0; }
+    static get style() { return catButtonGroupCss; }
 }, [1, "cat-button-group", {
         "a11yLabel": [1, "a11y-label"]
     }]);
@@ -44,5 +42,6 @@ const CatButtonGroup = CatButtonGroup$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CatButtonGroup, defineCustomElement };
+//# sourceMappingURL=cat-button-group.js.map
 
 //# sourceMappingURL=cat-button-group.js.map

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

@@ -1 +1 @@
-{"file":"cat-button-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,oEAAoE,CAAC;AAC/F,6BAAe,iBAAiB;;MCUnBA,gBAAc;;;;;QACjB,mBAAc,GAA2B,EAAE,CAAC;;;IAUpD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,SAAS,IAC3C,6DAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,EACP;KACH;IAEO,YAAY;QAClB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAC9B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,0GAA0G,CAC3G,CACF,CAAC;QACF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK;YACzC,OAAO,CAAC,mBAAmB;gBACzB,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,QAAQ,CAAC;SACxF,CAAC,CAAC;KACJ;;;;;;;;;;;;;;;;;;;;;;;;;","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","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/**\n * Button groups are designed to bring together button controls that are of a\n * similar nature. For example text formatting controls.\n */\n@Component({\n  tag: 'cat-button-group',\n  styleUrl: 'cat-button-group.scss',\n  shadow: true\n})\nexport class CatButtonGroup {\n  private buttonElements: 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.buttonElements = Array.from(\n      this.hostElement.querySelectorAll(\n        ':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot=\"trigger\"]'\n      )\n    );\n    this.buttonElements.forEach((element, index) => {\n      element.buttonGroupPosition =\n        index === 0 ? 'first' : index === this.buttonElements.length - 1 ? 'last' : 'middle';\n    });\n  }\n}\n"],"version":3}
+{"file":"cat-button-group.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,oEAAoE;;MCWjFA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;AAMU,QAAA,IAAc,CAAA,cAAA,GAA2B,EAAE;AA6BpD;IAnBC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,IAAI,CAAC,SAAS,EAAA,EAC3C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAS,CAAA,CACpD;;IAIH,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAC9B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC/B,0GAA0G,CAC3G,CACF;QACD,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,KAAI;AAC7C,YAAA,OAAO,CAAC,mBAAmB;gBACzB,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,QAAQ;AACxF,SAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatButtonGroup","__stencil_proxyCustomElement"],"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","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/**\n * Button groups are designed to bring together button controls that are of a\n * similar nature. For example text formatting controls.\n */\n@Component({\n  tag: 'cat-button-group',\n  styleUrl: 'cat-button-group.scss',\n  shadow: true\n})\nexport class CatButtonGroup {\n  private buttonElements: 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.buttonElements = Array.from(\n      this.hostElement.querySelectorAll(\n        ':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot=\"trigger\"]'\n      )\n    );\n    this.buttonElements.forEach((element, index) => {\n      element.buttonGroupPosition =\n        index === 0 ? 'first' : index === this.buttonElements.length - 1 ? 'last' : 'middle';\n    });\n  }\n}\n"],"version":3}

package/dist/components/cat-button.js

@@ -4,5 +4,6 @@ const CatButton = CatButton$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CatButton, defineCustomElement };
+//# sourceMappingURL=cat-button.js.map
 
 //# sourceMappingURL=cat-button.js.map

package/dist/components/cat-button2.js

@@ -16,8 +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-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));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){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))}.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-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-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){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::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 CatButtonStyle0 = catButtonCss;
+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));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){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))}.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-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-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 CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLElement {
     constructor() {
@@ -29,29 +28,53 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLE
         this.catBlur = createEvent(this, "catBlur", 7);
         this._iconOnly = true;
         this.hasSlottedContent = false;
+        /**
+         * The rendering style of the button.
+         */
         this.variant = 'outlined';
+        /**
+         * The color palette of the button.
+         */
         this.color = 'secondary';
+        /**
+         * Set the button into an active state.
+         */
         this.active = false;
+        /**
+         * The size of the button.
+         */
         this.size = 'm';
-        this.name = undefined;
-        this.value = undefined;
+        /**
+         * Specifies that the button should be disabled. A disabled button is unusable
+         * and un-clickable. Corresponds with the native HTML disabled attribute.
+         */
         this.disabled = false;
+        /**
+         * Displays the button in a loading state with a spinner. Just like a disabled
+         * button, an inactive button is unusable and un-clickable. However, it
+         * retains the current focus state.
+         */
         this.loading = false;
+        /**
+         * Allows the button to submit a form.
+         */
         this.submit = false;
+        /**
+         * Disables ellipse overflowing button content.
+         */
         this.noEllipsis = false;
+        /**
+         * Use round button edges.
+         */
         this.round = false;
-        this.url = undefined;
-        this.urlTarget = undefined;
-        this.icon = undefined;
+        /**
+         * Hide the actual button content and only display the icon.
+         */
         this.iconOnly = false;
+        /**
+         * Display the icon on the right.
+         */
         this.iconRight = false;
-        this.buttonId = undefined;
-        this.a11yLabel = undefined;
-        this.a11yCurrent = undefined;
-        this.nativeAttributes = undefined;
-        this.nativeContentAttributes = undefined;
-        this.testId = undefined;
-        this.buttonGroupPosition = undefined;
     }
     onIconOnlyChanged(value) {
         // teardown
@@ -195,7 +218,7 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLE
     static get watchers() { return {
         "iconOnly": ["onIconOnlyChanged"]
     }; }
-    static get style() { return CatButtonStyle0; }
+    static get style() { return catButtonCss; }
 }, [17, "cat-button", {
         "variant": [1],
         "color": [1],
@@ -216,8 +239,8 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLE
         "buttonId": [1, "button-id"],
         "a11yLabel": [1, "a11y-label"],
         "a11yCurrent": [1, "a11y-current"],
-        "nativeAttributes": [16],
-        "nativeContentAttributes": [16],
+        "nativeAttributes": [16, "native-attributes"],
+        "nativeContentAttributes": [16, "native-content-attributes"],
         "testId": [1, "test-id"],
         "buttonGroupPosition": [1, "button-group-position"],
         "_iconOnly": [32],
@@ -253,5 +276,6 @@ function defineCustomElement() {
 }
 
 export { CatButton as C, defineCustomElement as d, findClosest as f };
+//# sourceMappingURL=cat-button2.js.map
 
 //# sourceMappingURL=cat-button2.js.map

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

@@ -1 +1 @@
-{"file":"cat-button2.js","mappings":";;;;;AAAA;;;;SAIgB,WAAW,CAAC,QAAgB,EAAE,OAA6B;IACzE,IAAI,OAAO,YAAY,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAC3D,OAAO,OAAO,CAAC;KAChB;;IAGD,MAAM,WAAW,GACf,OAAO,YAAY,UAAU,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,aAAa,IAAK,OAAO,CAAC,WAAW,EAAiB,CAAC,IAAI,CAAC;IACrH,OAAO,WAAW,GAAG,WAAW,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAI,CAAC;AACjE;;ACbA,MAAM,YAAY,GAAG,kqZAAkqZ,CAAC;AACxrZ,wBAAe,YAAY;;MCoBd,SAAS;;;;;;;;yBAQC,IAAI;iCAEI,KAAK;uBAKyB,UAAU;qBAKgB,WAAW;sBAK/E,KAAK;oBAKwB,GAAG;;;wBAoB9B,KAAK;uBAON,KAAK;sBAKN,KAAK;0BAKD,KAAK;qBAKV,KAAK;;;;wBAoBoB,KAAK;yBAK1B,KAAK;;;;;;;;;IA4CzB,iBAAiB,CAAC,KAA2B;;;QAG3C,IAAI,CAAC,cAAc,EAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAmB,CAAC,CAAC;QAC7E,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;;QAEpC,IAAI,YAAY,CAAC,KAAK,CAAC,EAAE;YACvB,IAAI,CAAC,YAAY,KAAjB,IAAI,CAAC,YAAY,GAAK,IAAI,YAAY,EAAE,EAAC;YACzC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;YACvE,IAAI,CAAC,kBAAkB,GAAG,CAAC,KAA0B,MAAM,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;YAC3F,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YACxE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;SAC9C;aAAM;YACL,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;KACF;IAiBD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;IAED,mBAAmB;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC;KAC3D;IAGD,kBAAkB,CAAC,KAAY;QAC7B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;YACjC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;SAClC;aAAM,IAAI,IAAI,CAAC,MAAM,EAAE;YACtB,MAAM,IAAI,GAAG,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACnD,IAAI,IAAI,IAAI,IAAI,YAAY,eAAe,EAAE;;gBAE3C,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;SACF;KACF;;;;;;;;IAUD,MAAM,OAAO,CAAC,OAAsB;QAClC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KAC5B;;;;;IAOD,MAAM,MAAM;QACV,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;;;;IAMD,MAAM,OAAO;QACX,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;QACnF,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,QACE,EAAC,IAAI,yBAAoB,IAAI,CAAC,mBAAmB,IAC/C,sBACa,IAAI,CAAC,MAAM,KAClB,IAAI,CAAC,gBAAgB,EACzB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EAClD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,SAAS,mBACP,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,gBAChC,IAAI,CAAC,SAAS,kBACZ,IAAI,CAAC,WAAW,EAC9B,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;oBACL,YAAY,EAAE,IAAI;oBAClB,kBAAkB,EAAE,CAAC,IAAI,CAAC,iBAAiB;oBAC3C,mBAAmB,EAAE,IAAI,CAAC,MAAM;oBAChC,iBAAiB,EAAE,IAAI,CAAC,YAAY;oBACpC,kBAAkB,EAAE,IAAI,CAAC,KAAK;oBAC9B,oBAAoB,EAAE,IAAI,CAAC,OAAO;oBAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;oBACpC,qBAAqB,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY;oBAC7D,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;oBACrD,CAAC,cAAc,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;oBACjD,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;oBAC/C,CAAC,oBAAoB,IAAI,CAAC,mBAAmB,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC;iBACpF,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE7B,IAAI,CAAC,OAAO,CACX,CACC,EACP;SACH;aAAM;YACL,QACE,EAAC,IAAI,yBAAoB,IAAI,CAAC,mBAAmB,IAC/C,2BACa,IAAI,CAAC,MAAM,KAClB,IAAI,CAAC,gBAAgB,EACzB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EAClD,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,EACvC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,gBAChC,IAAI,CAAC,SAAS,kBACZ,IAAI,CAAC,WAAW,EAC9B,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;oBACL,YAAY,EAAE,IAAI;oBAClB,kBAAkB,EAAE,CAAC,IAAI,CAAC,iBAAiB;oBAC3C,mBAAmB,EAAE,IAAI,CAAC,MAAM;oBAChC,iBAAiB,EAAE,IAAI,CAAC,YAAY;oBACpC,kBAAkB,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY;oBACnD,oBAAoB,EAAE,IAAI,CAAC,OAAO;oBAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;oBACpC,qBAAqB,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,YAAY;oBAC7D,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;oBACrD,CAAC,cAAc,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;oBACjD,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;oBAC/C,CAAC,oBAAoB,IAAI,CAAC,mBAAmB,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC;iBACpF,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE7B,IAAI,CAAC,OAAO,CACN,CACJ,EACP;SACH;KACF;IAED,IAAY,QAAQ;QAClB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,GAAG,CAAC;YACb;gBACE,OAAO,GAAG,CAAC;SACd;KACF;IAED,IAAY,WAAW;QACrB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC;YACd;gBACE,OAAO,GAAG,CAAC;SACd;KACF;IAED,IAAY,YAAY;QACtB,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC;KAC7C;IAED,IAAY,aAAa;QACvB,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;KACjE;IAED,IAAY,aAAa;QACvB,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;KAChE;IAED,IAAY,OAAO;QACjB,OAAO;YACL,IAAI,CAAC,aAAa,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,GAAY,GAAG,IAAI;YACrG,IAAI,CAAC,YAAY,IACf,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,KAE3D,YAAM,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,KAAK,IAAI,CAAC,uBAAuB,IAC9E,YAAM,KAAK,EAAC,0BAA0B,IACpC,eAAa,CACR,CACF,CACR;YACD,IAAI,CAAC,aAAa,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ,GAAY,GAAG,IAAI;YACrG,IAAI,CAAC,OAAO,GAAG,mBAAa,IAAI,EAAE,IAAI,CAAC,WAAW,GAAgB,GAAG,IAAI;SAC1E,CAAC;KACH;IAEO,OAAO,CAAC,KAAiB;QAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B;IAEO,OAAO,CAAC,KAAiB;QAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B;IAEO,MAAM,CAAC,KAAiB;QAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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  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    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\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.linkHover');\n  }\n\n  &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n    text-decoration: cat-token('font.decoration.linkHover');\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  &::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   * 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    // 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    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}
+{"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  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    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\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.linkHover');\n  }\n\n  &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n    text-decoration: cat-token('font.decoration.linkHover');\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   * 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    // 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    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-card.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
 const catCardCss = ":host{display:block;border-radius:var(--cat-border-radius-l, 0.5rem);background-color:white;padding:1.25rem;box-shadow:0 0 0 1px rgb(var(--cat-border-color-card, 0, 0, 0, 0))}:host([hidden]){display:none}::slotted(:last-child){margin-bottom:0 !important}::slotted(nav),::slotted(nav:last-child){margin:-1rem -1rem !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
-const CatCardStyle0 = catCardCss;
 
 const CatCard$1 = /*@__PURE__*/ proxyCustomElement(class CatCard extends HTMLElement {
     constructor() {
@@ -16,7 +15,7 @@ const CatCard$1 = /*@__PURE__*/ proxyCustomElement(class CatCard extends HTMLEle
     componentDidLoad() {
         this.catLoad.emit();
     }
-    static get style() { return CatCardStyle0; }
+    static get style() { return catCardCss; }
 }, [1, "cat-card"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -36,5 +35,6 @@ const CatCard = CatCard$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { CatCard, defineCustomElement };
+//# sourceMappingURL=cat-card.js.map
 
 //# sourceMappingURL=cat-card.js.map

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

@@ -1 +1 @@
-{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,87BAA87B,CAAC;AACl9B,sBAAe,UAAU;;MCUZA,SAAO;;;;;;;IAMlB,MAAM;QACJ,OAAO,8DAAa,CAAC;KACtB;IAED,gBAAgB;QACd,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;KACrB;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.25rem;\n\n:host {\n  display: block;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.surface');\n  padding: $-padding;\n  @include cat-elevation-card;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n::slotted(nav),\n::slotted(nav:last-child) {\n  margin: #{0.25rem - $-padding} #{0.25rem - $-padding} !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n  margin: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n  margin-left: -$-padding !important;\n  margin-right: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n  margin-top: -$-padding !important;\n  margin-bottom: -$-padding !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n  margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n  margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n  margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n  margin-bottom: -$-padding !important;\n}\n","import { Component, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  /**\n   * Emitted when the card and all the children are fully loaded.\n   */\n  @Event() catLoad!: EventEmitter<FocusEvent>;\n\n  render() {\n    return <slot></slot>;\n  }\n\n  componentDidLoad() {\n    this.catLoad.emit();\n  }\n}\n"],"version":3}
+{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,87BAA87B;;MCWp8BA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;;;;;;;IAMlB,MAAM,GAAA;QACJ,OAAO,8DAAa;;IAGtB,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard","__stencil_proxyCustomElement"],"sources":["src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.25rem;\n\n:host {\n  display: block;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.surface');\n  padding: $-padding;\n  @include cat-elevation-card;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n::slotted(nav),\n::slotted(nav:last-child) {\n  margin: #{0.25rem - $-padding} #{0.25rem - $-padding} !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n  margin: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n  margin-left: -$-padding !important;\n  margin-right: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n  margin-top: -$-padding !important;\n  margin-bottom: -$-padding !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n  margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n  margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n  margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n  margin-bottom: -$-padding !important;\n}\n","import { Component, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  /**\n   * Emitted when the card and all the children are fully loaded.\n   */\n  @Event() catLoad!: EventEmitter<FocusEvent>;\n\n  render() {\n    return <slot></slot>;\n  }\n\n  componentDidLoad() {\n    this.catLoad.emit();\n  }\n}\n"],"version":3}