@haiilo/catalyst 0.5.1 → 0.5.3

package/dist/collection/components/cat-alert/cat-alert.css

@@ -1,62 +0,0 @@
-/**
- * Auto-generated file. Do not edit directly.
- */
-/* stylelint-disable value-keyword-case */
-/* stylelint-enable value-keyword-case */
-:host {
-  display: block;
-  margin-bottom: 1rem;
-}
-
-:host(:focus-visible) {
-  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
-  outline-offset: 1px;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-.alert {
-  font: inherit;
-  color: rgb(var(--text));
-  background-color: rgba(var(--bg), 0.1);
-  box-shadow: inset 0 0 0 1px rgba(var(--border), 0.2);
-  border-radius: 0.25rem;
-  padding: 0.75rem 1rem;
-  width: 100%;
-}
-
-::slotted(:last-child) {
-  margin-bottom: 0 !important;
-}
-
-.alert-primary {
-  --bg: var(--cat-primary-bg, 32, 127, 138);
-  --text: var(--cat-primary-text, 32, 127, 138);
-  --border: var(--cat-primary-text, 32, 127, 138);
-}
-
-.alert-secondary {
-  --bg: 105, 118, 135;
-  --text: 0, 0, 0;
-  --border: 105, 118, 135;
-}
-
-.alert-success {
-  --bg: 0, 132, 88;
-  --text: 0, 132, 88;
-  --border: 0, 132, 88;
-}
-
-.alert-warning {
-  --bg: 255, 206, 128;
-  --text: 159, 97, 0;
-  --border: 159, 97, 0;
-}
-
-.alert-danger {
-  --bg: 217, 52, 13;
-  --text: 217, 52, 13;
-  --border: 217, 52, 13;
-}

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

@@ -1,61 +0,0 @@
-import { Component, h, Host, Prop } from '@stencil/core';
-/**
- * Informs user about important changes or conditions in the interface. Use this
- * component if you need to capture user’s attention in a prominent way.
- *
- * @part alert - The alert element.
- */
-export class CatAlert {
-  constructor() {
-    /**
-     * The color palette of the alert.
-     */
-    this.color = 'primary';
-  }
-  render() {
-    return (h(Host, { tabindex: "0", role: this.role },
-      h("div", { part: "alert", class: {
-          alert: true,
-          [`alert-${this.color}`]: Boolean(this.color)
-        } },
-        h("slot", null))));
-  }
-  get role() {
-    switch (this.color) {
-      case 'danger':
-      case 'warning':
-        return 'alert';
-      default:
-        return 'status';
-    }
-  }
-  static get is() { return "cat-alert"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-alert.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-alert.css"]
-  }; }
-  static get properties() { return {
-    "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 alert."
-      },
-      "attribute": "color",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    }
-  }; }
-}
-//# sourceMappingURL=cat-alert.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cat-alert.js","sourceRoot":"","sources":["../../../src/components/cat-alert/cat-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAME;;OAEG;IACK,UAAK,GAA+D,SAAS,CAAC;GA2BvF;EAzBC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI;MAChC,WACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;UACL,KAAK,EAAE,IAAI;UACX,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;SAC7C;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;EAED,IAAY,IAAI;IACd,QAAQ,IAAI,CAAC,KAAK,EAAE;MAClB,KAAK,QAAQ,CAAC;MACd,KAAK,SAAS;QACZ,OAAO,OAAO,CAAC;MACjB;QACE,OAAO,QAAQ,CAAC;KACnB;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n *\n * @part alert - The alert element.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  /**\n   * The color palette of the alert.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  render() {\n    return (\n      <Host tabindex=\"0\" role={this.role}>\n        <div\n          part=\"alert\"\n          class={{\n            alert: true,\n            [`alert-${this.color}`]: Boolean(this.color)\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get role() {\n    switch (this.color) {\n      case 'danger':\n      case 'warning':\n        return 'alert';\n      default:\n        return 'status';\n    }\n  }\n}\n"]}

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

@@ -1,154 +0,0 @@
-/**
- * Auto-generated file. Do not edit directly.
- */
-/* stylelint-disable value-keyword-case */
-/* stylelint-enable value-keyword-case */
-:host {
-  display: inline-flex;
-  max-width: 100%;
-  vertical-align: baseline;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-.badge {
-  font: inherit;
-  flex: 1 1 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.125rem;
-  text-decoration: none;
-  width: 100%;
-  box-sizing: border-box;
-  line-height: 1;
-  white-space: nowrap;
-}
-.badge slot {
-  display: inline-block;
-  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
-}
-
-.badge-round {
-  border-radius: 10rem;
-}
-
-.badge-filled {
-  background-color: rgb(var(--bg));
-  color: rgb(var(--fill));
-  font-weight: 600;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: greyscale;
-}
-
-.badge-outlined {
-  background-color: white;
-  box-shadow: inset 0 0 0 1px rgba(var(--border), 0.2);
-  color: rgb(var(--text));
-}
-
-.badge-primary {
-  --bg: var(--cat-primary-bg, 32, 127, 138);
-  --fill: var(--cat-primary-fill, 255, 255, 255);
-  --text: var(--cat-primary-text, 32, 127, 138);
-  --border: var(--cat-primary-text, 32, 127, 138);
-}
-
-.badge-secondary {
-  --bg: 105, 118, 135;
-  --fill: 255, 255, 255;
-  --text: 0, 0, 0;
-  --border: 105, 118, 135;
-}
-
-.badge-success {
-  --bg: 0, 132, 88;
-  --fill: 255, 255, 255;
-  --text: 0, 132, 88;
-  --border: 0, 132, 88;
-}
-
-.badge-warning {
-  --bg: 255, 206, 128;
-  --fill: 0, 0, 0;
-  --text: 159, 97, 0;
-  --border: 159, 97, 0;
-}
-
-.badge-danger {
-  --bg: 217, 52, 13;
-  --fill: 255, 255, 255;
-  --text: 217, 52, 13;
-  --border: 217, 52, 13;
-}
-
-.badge-xs {
-  height: 0.75rem;
-  min-width: 0.75rem;
-  font-size: 0.75rem;
-  padding: 0 0.1875rem;
-}
-
-.badge-s {
-  height: 1rem;
-  min-width: 1rem;
-  font-size: 0.75rem;
-  padding: 0 0.25rem;
-}
-
-.badge-m {
-  height: 1.25rem;
-  min-width: 1.25rem;
-  font-size: 0.75rem;
-  padding: 0 0.3125rem;
-}
-
-.badge-l {
-  height: 1.5rem;
-  min-width: 1.5rem;
-  font-size: 0.875rem;
-  padding: 0 0.375rem;
-}
-
-.badge-xl {
-  height: 1.75rem;
-  min-width: 1.75rem;
-  font-size: 0.9375rem;
-  padding: 0 0.4375rem;
-}
-
-.badge-pulse.badge-filled {
-  animation: 1.5s ease 0s infinite normal none running pulse;
-}
-.badge-pulse.badge-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(--border), 0.2);
-  }
-  70% {
-    box-shadow: transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2);
-  }
-  100% {
-    box-shadow: transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2);
-  }
-}

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

@@ -1,143 +0,0 @@
-import { Component, h, Prop } from '@stencil/core';
-/**
- * Badges are used to inform users of the status of an object or of an action
- * that’s been taken.
- *
- * @part badge - The badge element.
- */
-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() {
-    return (h("span", { part: "badge", class: {
-        badge: true,
-        'badge-round': this.round,
-        'badge-pulse': this.pulse,
-        [`badge-${this.variant}`]: Boolean(this.variant),
-        [`badge-${this.color}`]: Boolean(this.color),
-        [`badge-${this.size}`]: Boolean(this.size)
-      } },
-      h("slot", null)));
-  }
-  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": false,
-      "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": false,
-      "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": false,
-      "defaultValue": "'m'"
-    },
-    "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": false,
-      "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": false,
-      "defaultValue": "false"
-    }
-  }; }
-}
-//# sourceMappingURL=cat-badge.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cat-badge.js","sourceRoot":"","sources":["../../../src/components/cat-badge/cat-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAME;;OAEG;IACK,YAAO,GAA0B,QAAQ,CAAC;IAElD;;OAEG;IACK,UAAK,GAA+D,SAAS,CAAC;IAEtF;;OAEG;IACK,SAAI,GAAkC,GAAG,CAAC;IAElD;;OAEG;IACK,UAAK,GAAG,KAAK,CAAC;IAEtB;;OAEG;IACK,UAAK,GAAG,KAAK,CAAC;GAmBvB;EAjBC,MAAM;IACJ,OAAO,CACL,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,aAAa,EAAE,IAAI,CAAC,KAAK;QACzB,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QAChD,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5C,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC3C;MAED,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, 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 * @part badge - The badge element.\n */\n@Component({\n  tag: 'cat-badge',\n  styleUrl: 'cat-badge.scss',\n  shadow: true\n})\nexport class CatBadge {\n  /**\n   * The rendering style of the badge.\n   */\n  @Prop() variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * The color palette of the badge.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The size of the badge.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round badge edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * Draw attention to the badge with a subtle animation.\n   */\n  @Prop() pulse = false;\n\n  render() {\n    return (\n      <span\n        part=\"badge\"\n        class={{\n          badge: true,\n          'badge-round': this.round,\n          'badge-pulse': this.pulse,\n          [`badge-${this.variant}`]: Boolean(this.variant),\n          [`badge-${this.color}`]: Boolean(this.color),\n          [`badge-${this.size}`]: Boolean(this.size)\n        }}\n      >\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"]}