@haiilo/catalyst 4.1.2 → 5.0.0

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import log from 'loglevel';
 import loadImg from '../../utils/load-img';
 /**
@@ -6,18 +6,15 @@ import loadImg from '../../utils/load-img';
  */
 export class CatAvatar {
   constructor() {
-    /**
-     * The size of the avatar.
-     */
+    this.backgroundImage = undefined;
     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) {
@@ -67,159 +64,169 @@ export class CatAvatar {
   }
   static get is() { return "cat-avatar"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-avatar.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-avatar.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
-        "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the avatar."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'m'"
-    },
-    "round": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use round avatar edges."
-      },
-      "attribute": "round",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The label of the avatar."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "initials": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Custom initials for the avatar."
-      },
-      "attribute": "initials",
-      "reflect": false
-    },
-    "src": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "An optional avatar image."
-      },
-      "attribute": "src",
-      "reflect": false
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "An icon to be used instead of the initials."
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "url": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "A destination to link to, rendered in the href attribute of a link."
-      },
-      "attribute": "url",
-      "reflect": false
-    },
-    "urlTarget": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'_blank' | '_self'",
-        "resolved": "\"_blank\" | \"_self\" | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies where to open the linked document."
-      },
-      "attribute": "url-target",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "backgroundImage": {}
-  }; }
-  static get watchers() { return [{
-      "propName": "src",
-      "methodName": "onSrcChanged"
-    }]; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cat-avatar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cat-avatar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
+          "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the avatar."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'m'"
+      },
+      "round": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use round avatar edges."
+        },
+        "attribute": "round",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label of the avatar."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "initials": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Custom initials for the avatar."
+        },
+        "attribute": "initials",
+        "reflect": false
+      },
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "An optional avatar image."
+        },
+        "attribute": "src",
+        "reflect": false
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "An icon to be used instead of the initials."
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A destination to link to, rendered in the href attribute of a link."
+        },
+        "attribute": "url",
+        "reflect": false
+      },
+      "urlTarget": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_blank' | '_self'",
+          "resolved": "\"_blank\" | \"_self\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies where to open the linked document."
+        },
+        "attribute": "url-target",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "backgroundImage": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "src",
+        "methodName": "onSrcChanged"
+      }];
+  }
 }
-//# sourceMappingURL=cat-avatar.js.map
+//# sourceMappingURL=cat-avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cat-avatar.js","sourceRoot":"","sources":["../../../src/components/cat-avatar/cat-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAE3C;;GAEG;AAMH,MAAM,OAAO,SAAS;EALtB;IAQE;;OAEG;IACK,SAAI,GAAkC,GAAG,CAAC;IAElD;;OAEG;IACK,UAAK,GAAG,KAAK,CAAC;IAEtB;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;GA4FpB;EAhEC,YAAY,CAAC,KAAc;IACzB,IAAI,KAAK,EAAE;MACT,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CACjB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,EAC9C,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,CACzC,CAAC;KACH;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;KAClC;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EAC9B,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,GAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACvD;EACH,CAAC;EAED,MAAM;IACJ,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,OAAO,CACL,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,CACL,CAAC;KACH;SAAM;MACL,OAAO,CACL,YAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IACrE,IAAI,CAAC,OAAO,CACR,CACR,CAAC;KACH;EACH,CAAC;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,IAAI,CAAC,eAAe;MAC1B,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;MAC5F,CAAC,CAAC,EAAE,CAAC;EACT,CAAC;EAED,IAAY,QAAQ;IAClB,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;EACtD,CAAC;EAED,IAAY,QAAQ;IAClB,OAAO;MACL,MAAM,EAAE,IAAI;MACZ,cAAc,EAAE,IAAI,CAAC,KAAK;MAC1B,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC5C,CAAC;EACJ,CAAC;EAEO,WAAW;;IACjB,OAAO,CACL,MAAA,IAAI,CAAC,QAAQ,mCACb,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC;OACf,KAAK,CAAC,GAAG,CAAC;OACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;OACd,IAAI,CAAC,EAAE,CAAC,CACZ,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\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: true\n})\nexport class CatAvatar {\n  @State() backgroundImage?: string;\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  componentWillRender(): void {\n    if (!this.label) {\n      log.warn('[A11y] Missing ARIA label on avatar', this);\n    }\n  }\n\n  render() {\n    if (this.url) {\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-avatar.js","sourceRoot":"","sources":["../../../src/components/cat-avatar/cat-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAE3C;;GAEG;AAMH,MAAM,OAAO,SAAS;;;gBAM0B,GAAG;iBAKjC,KAAK;iBAKL,EAAE;;;;;;;EA4BlB,YAAY,CAAC,KAAc;IACzB,IAAI,KAAK,EAAE;MACT,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CACjB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,EAC9C,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,CACzC,CAAC;KACH;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;KAClC;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EAC9B,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACf,GAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACvD;EACH,CAAC;EAED,MAAM;IACJ,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,OAAO,CACL,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,CACL,CAAC;KACH;SAAM;MACL,OAAO,CACL,YAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IACrE,IAAI,CAAC,OAAO,CACR,CACR,CAAC;KACH;EACH,CAAC;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,IAAI,CAAC,eAAe;MAC1B,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;MAC5F,CAAC,CAAC,EAAE,CAAC;EACT,CAAC;EAED,IAAY,QAAQ;IAClB,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;EACtD,CAAC;EAED,IAAY,QAAQ;IAClB,OAAO;MACL,MAAM,EAAE,IAAI;MACZ,cAAc,EAAE,IAAI,CAAC,KAAK;MAC1B,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC5C,CAAC;EACJ,CAAC;EAEO,WAAW;;IACjB,OAAO,CACL,MAAA,IAAI,CAAC,QAAQ,mCACb,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC;OACf,KAAK,CAAC,GAAG,CAAC;OACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;OACd,IAAI,CAAC,EAAE,CAAC,CACZ,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\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: true\n})\nexport class CatAvatar {\n  @State() backgroundImage?: string;\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  componentWillRender(): void {\n    if (!this.label) {\n      log.warn('[A11y] Missing ARIA label on avatar', this);\n    }\n  }\n\n  render() {\n    if (this.url) {\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"]}

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

@@ -1,29 +1,14 @@
-import { Component, Element, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * Badges are used to inform users of the status of an object or of an action
  * that’s been taken.
  */
 export class CatBadge {
   constructor() {
-    /**
-     * 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;
   }
   render() {
@@ -31,104 +16,110 @@ export class CatBadge {
   }
   static get is() { return "cat-badge"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-badge.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-badge.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'filled' | 'outlined'",
-        "resolved": "\"filled\" | \"outlined\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The rendering style of the badge."
-      },
-      "attribute": "variant",
-      "reflect": true,
-      "defaultValue": "'filled'"
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'secondary' | 'danger' | 'success' | 'warning'",
-        "resolved": "\"danger\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The color palette of the badge."
-      },
-      "attribute": "color",
-      "reflect": true,
-      "defaultValue": "'primary'"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
-        "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the badge."
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'m'"
-    },
-    "round": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["cat-badge.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cat-badge.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'filled' | 'outlined'",
+          "resolved": "\"filled\" | \"outlined\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The rendering style of the badge."
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "'filled'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use round badge edges."
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary' | 'danger' | 'success' | 'warning'",
+          "resolved": "\"danger\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The color palette of the badge."
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "'primary'"
       },
-      "attribute": "round",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "pulse": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
+          "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the badge."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'m'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Draw attention to the badge with a subtle animation."
+      "round": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use round badge edges."
+        },
+        "attribute": "round",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "pulse",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
+      "pulse": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Draw attention to the badge with a subtle animation."
+        },
+        "attribute": "pulse",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
   static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=cat-badge.js.map
+//# sourceMappingURL=cat-badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cat-badge.js","sourceRoot":"","sources":["../../../src/components/cat-badge/cat-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5D;;;GAGG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAQE;;OAEG;IACsB,YAAO,GAA0B,QAAQ,CAAC;IAEnE;;OAEG;IACsB,UAAK,GAA+D,SAAS,CAAC;IAEvG;;OAEG;IACsB,SAAI,GAAkC,GAAG,CAAC;IAEnE;;OAEG;IACsB,UAAK,GAAG,KAAK,CAAC;IAEvC;;OAEG;IACsB,UAAK,GAAG,KAAK,CAAC;GAKxC;EAHC,MAAM;IACJ,OAAO,eAAa,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\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  @Element() hostElement!: HTMLElement;\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' | 'danger' | 'success' | 'warning' = '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  render() {\n    return <slot></slot>;\n  }\n}\n"]}
+{"version":3,"file":"cat-badge.js","sourceRoot":"","sources":["../../../src/components/cat-badge/cat-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5D;;;GAGG;AAMH,MAAM,OAAO,QAAQ;;mBAMuC,QAAQ;iBAK2B,SAAS;gBAKvC,GAAG;iBAKjC,KAAK;iBAKL,KAAK;;EAEtC,MAAM;IACJ,OAAO,eAAa,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\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  @Element() hostElement!: HTMLElement;\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' | 'danger' | 'success' | 'warning' = '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  render() {\n    return <slot></slot>;\n  }\n}\n"]}