@haiilo/catalyst 0.2.3 → 0.4.0

package/dist/collection/collection-manifest.json

@@ -0,0 +1,21 @@
+{
+  "entries": [
+    "./components/cat-alert/cat-alert.js",
+    "./components/cat-badge/cat-badge.js",
+    "./components/cat-button/cat-button.js",
+    "./components/cat-icon/cat-icon.js",
+    "./components/cat-menu/cat-menu.js",
+    "./components/cat-scrollable/cat-scrollable.js",
+    "./components/cat-skeleton/cat-skeleton.js",
+    "./components/cat-spinner/cat-spinner.js",
+    "./components/cat-tooltip/cat-tooltip.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.0",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": [],
+  "global": "init.js"
+}

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

@@ -0,0 +1,57 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: block;
+  margin-bottom: 1rem;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.cat-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;
+}
+
+.cat-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);
+}
+
+.cat-alert-secondary {
+  --bg: 105, 118, 135;
+  --text: 0, 0, 0;
+  --border: 105, 118, 135;
+}
+
+.cat-alert-success {
+  --bg: 0, 132, 88;
+  --text: 0, 132, 88;
+  --border: 0, 132, 88;
+}
+
+.cat-alert-warning {
+  --bg: 255, 206, 128;
+  --text: 159, 97, 0;
+  --border: 159, 97, 0;
+}
+
+.cat-alert-danger {
+  --bg: 217, 52, 13;
+  --text: 217, 52, 13;
+  --border: 217, 52, 13;
+}

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

@@ -0,0 +1,50 @@
+import { Component, h, Prop } from '@stencil/core';
+/**
+ * Alerts are used to display important messages inline.
+ *
+ * @part alert - The content of the alert.
+ */
+export class CatAlert {
+  constructor() {
+    /**
+     * The color palette of the alert.
+     */
+    this.color = 'primary';
+  }
+  render() {
+    return (h("div", { part: "alert", class: {
+        'cat-alert': true,
+        [`cat-alert-${this.color}`]: Boolean(this.color)
+      } },
+      h("slot", null)));
+  }
+  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

@@ -0,0 +1 @@
+{"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,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAME;;OAEG;IACK,UAAK,GAA+D,SAAS,CAAC;GAevF;EAbC,MAAM;IACJ,OAAO,CACL,WACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,CAAC,aAAa,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;OACjD;MAED,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Alerts are used to display important messages inline.\n *\n * @part alert - The content of the alert.\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      <div\n        part=\"alert\"\n        class={{\n          'cat-alert': true,\n          [`cat-alert-${this.color}`]: Boolean(this.color)\n        }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,154 @@
+/**
+ * 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;
+}
+
+.cat-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;
+}
+.cat-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 */
+}
+
+.cat-badge-round {
+  border-radius: 10rem;
+}
+
+.cat-badge-filled {
+  background-color: rgb(var(--bg));
+  color: rgb(var(--fill));
+  font-weight: 600;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: greyscale;
+}
+
+.cat-badge-outlined {
+  background-color: white;
+  box-shadow: inset 0 0 0 1px rgba(var(--border), 0.2);
+  color: rgb(var(--text));
+}
+
+.cat-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);
+}
+
+.cat-badge-secondary {
+  --bg: 105, 118, 135;
+  --fill: 255, 255, 255;
+  --text: 0, 0, 0;
+  --border: 105, 118, 135;
+}
+
+.cat-badge-success {
+  --bg: 0, 132, 88;
+  --fill: 255, 255, 255;
+  --text: 0, 132, 88;
+  --border: 0, 132, 88;
+}
+
+.cat-badge-warning {
+  --bg: 255, 206, 128;
+  --fill: 0, 0, 0;
+  --text: 159, 97, 0;
+  --border: 159, 97, 0;
+}
+
+.cat-badge-danger {
+  --bg: 217, 52, 13;
+  --fill: 255, 255, 255;
+  --text: 217, 52, 13;
+  --border: 217, 52, 13;
+}
+
+.cat-badge-xs {
+  height: 0.75rem;
+  min-width: 0.75rem;
+  font-size: 0.75rem;
+  padding: 0 0.1875rem;
+}
+
+.cat-badge-s {
+  height: 1rem;
+  min-width: 1rem;
+  font-size: 0.75rem;
+  padding: 0 0.25rem;
+}
+
+.cat-badge-m {
+  height: 1.25rem;
+  min-width: 1.25rem;
+  font-size: 0.75rem;
+  padding: 0 0.3125rem;
+}
+
+.cat-badge-l {
+  height: 1.5rem;
+  min-width: 1.5rem;
+  font-size: 0.875rem;
+  padding: 0 0.375rem;
+}
+
+.cat-badge-xl {
+  height: 1.75rem;
+  min-width: 1.75rem;
+  font-size: 0.9375rem;
+  padding: 0 0.4375rem;
+}
+
+.cat-badge-pulse.cat-badge-filled {
+  animation: 1.5s ease 0s infinite normal none running pulse;
+}
+.cat-badge-pulse.cat-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

@@ -0,0 +1,142 @@
+import { Component, h, Prop } from '@stencil/core';
+/**
+ * Badges are used to draw attention and display statuses or counts.
+ *
+ * @part badge - The content of the badge.
+ */
+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: {
+        'cat-badge': true,
+        'cat-badge-round': this.round,
+        'cat-badge-pulse': this.pulse,
+        [`cat-badge-${this.variant}`]: Boolean(this.variant),
+        [`cat-badge-${this.color}`]: Boolean(this.color),
+        [`cat-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

@@ -0,0 +1 @@
+{"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;;;;GAIG;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,WAAW,EAAE,IAAI;QACjB,iBAAiB,EAAE,IAAI,CAAC,KAAK;QAC7B,iBAAiB,EAAE,IAAI,CAAC,KAAK;QAC7B,CAAC,aAAa,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACpD,CAAC,aAAa,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAChD,CAAC,aAAa,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC/C;MAED,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Badges are used to draw attention and display statuses or counts.\n *\n * @part badge - The content of the badge.\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          'cat-badge': true,\n          'cat-badge-round': this.round,\n          'cat-badge-pulse': this.pulse,\n          [`cat-badge-${this.variant}`]: Boolean(this.variant),\n          [`cat-badge-${this.color}`]: Boolean(this.color),\n          [`cat-badge-${this.size}`]: Boolean(this.size)\n        }}\n      >\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"]}