@haiilo/catalyst 0.3.1 → 0.5.0

package/dist/components/cat-alert.js

@@ -1,6 +1,6 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const catAlertCss = ":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}";
+const catAlertCss = ":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}";
 
 const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -13,10 +13,19 @@ const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.color = 'primary';
   }
   render() {
-    return (h("div", { part: "alert", class: {
-        'cat-alert': true,
-        [`cat-alert-${this.color}`]: Boolean(this.color)
-      } }, h("slot", null)));
+    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 style() { return catAlertCss; }
 }, [1, "cat-alert", {

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

@@ -1 +1 @@
-{"file":"cat-alert.js","mappings":";;AAAA,MAAM,WAAW,GAAG,6vBAA6vB;;MCYpwBA,UAAQ;EALrB;;;;;;;IASU,UAAK,GAA+D,SAAS,CAAC;GAevF;EAbC,MAAM;IACJ,QACE,WACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,CAAC,aAAa,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;OACjD,IAED,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["./src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","./src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.cat-alert {\n  font: inherit;\n  color: cat-token-wrap(var(--text));\n  background-color: cat-token-wrap(var(--bg), $alpha: 0.1);\n  box-shadow: inset 0 0 0 1px cat-token-wrap(var(--border), $alpha: 0.2);\n  border-radius: cat-border-radius('m');\n  padding: cat-size('xs') * 0.5 cat-size('s') * 0.5;\n  width: 100%;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  .cat-alert-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --border: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --border: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","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"],"version":3}
+{"file":"cat-alert.js","mappings":";;AAAA,MAAM,WAAW,GAAG,g1BAAg1B;;MCav1BA,UAAQ;EALrB;;;;;;;IASU,UAAK,GAA+D,SAAS,CAAC;GA2BvF;EAzBC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAChC,WACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;OAC7C,IAED,eAAa,CACT,CACD,EACP;GACH;EAED,IAAY,IAAI;IACd,QAAQ,IAAI,CAAC,KAAK;MAChB,KAAK,QAAQ,CAAC;MACd,KAAK,SAAS;QACZ,OAAO,OAAO,CAAC;MACjB;QACE,OAAO,QAAQ,CAAC;KACnB;GACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["./src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","./src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.alert {\n  font: inherit;\n  color: cat-token-wrap(var(--text));\n  background-color: cat-token-wrap(var(--bg), $alpha: 0.1);\n  box-shadow: inset 0 0 0 1px cat-token-wrap(var(--border), $alpha: 0.2);\n  border-radius: cat-border-radius('m');\n  padding: 0.75rem 1rem;\n  width: 100%;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  .alert-#{$theme} {\n    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    @if $theme == 'secondary' {\n      --border: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --border: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","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"],"version":3}

package/dist/components/cat-badge.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const catBadgeCss = ":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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.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)}}";
+const catBadgeCss = ":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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.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)}}";
 
 const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -30,12 +30,12 @@ const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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)
+        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 style() { return catBadgeCss; }

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

@@ -1 +1 @@
-{"file":"cat-badge.js","mappings":";;AAAA,MAAM,WAAW,GAAG,2vEAA2vE;;MCYlwEA,UAAQ;EALrB;;;;;;;IASU,YAAO,GAA0B,QAAQ,CAAC;;;;IAK1C,UAAK,GAA+D,SAAS,CAAC;;;;IAK9E,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,KAAK,CAAC;GAmBvB;EAjBC,MAAM;IACJ,QACE,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,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACpD,CAAC,aAAa,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAChD,CAAC,aAAa,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC/C,IAED,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\n:host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: baseline;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.cat-badge {\n  font: inherit;\n  flex: 1 1 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('s');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  line-height: 1;\n  white-space: nowrap;\n\n  slot {\n    display: inline-block;\n    @include cat-ellipsis;\n  }\n}\n\n// ----- round\n\n.cat-badge-round {\n  border-radius: 10rem;\n}\n\n// ----- theme\n\n.cat-badge-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$-outline: inset 0 0 0 1px cat-token-wrap(var(--border), $alpha: 0.2);\n\n.cat-badge-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: $-outline;\n  color: cat-token-wrap(var(--text));\n}\n\n@mixin theme($theme) {\n  .cat-badge-#{$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      --border: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --border: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .cat-badge-#{$size} {\n    height: cat-size($size) * 0.5;\n    min-width: cat-size($size) * 0.5;\n    font-size: cat-body-font-size($fontSize);\n    padding: 0 cat-size($size) * 0.125;\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 'xs');\n@include size('m', 'xs');\n@include size('l', 's');\n@include size('xl', 'm');\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.cat-badge-pulse {\n  &.cat-badge-filled {\n    animation: 1.5s ease 0s infinite normal none running pulse;\n  }\n\n  &.cat-badge-outlined {\n    animation: 1.5s ease 0s infinite normal none running pulse-outlined;\n  }\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, 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"],"version":3}
+{"file":"cat-badge.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+qEAA+qE;;MCatrEA,UAAQ;EALrB;;;;;;;IASU,YAAO,GAA0B,QAAQ,CAAC;;;;IAK1C,UAAK,GAA+D,SAAS,CAAC;;;;IAK9E,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,KAAK,CAAC;GAmBvB;EAjBC,MAAM;IACJ,QACE,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,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QAChD,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5C,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC3C,IAED,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\n:host {\n  display: inline-flex;\n  max-width: 100%;\n  vertical-align: baseline;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.badge {\n  font: inherit;\n  flex: 1 1 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('s');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  line-height: 1;\n  white-space: nowrap;\n\n  slot {\n    display: inline-block;\n    @include cat-ellipsis;\n  }\n}\n\n// ----- round\n\n.badge-round {\n  border-radius: 10rem;\n}\n\n// ----- theme\n\n.badge-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$-outline: inset 0 0 0 1px cat-token-wrap(var(--border), $alpha: 0.2);\n\n.badge-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: $-outline;\n  color: cat-token-wrap(var(--text));\n}\n\n@mixin theme($theme) {\n  .badge-#{$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      --border: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --border: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .badge-#{$size} {\n    height: cat-size($size) * 0.5;\n    min-width: cat-size($size) * 0.5;\n    font-size: cat-body-font-size($fontSize);\n    padding: 0 cat-size($size) * 0.125;\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 'xs');\n@include size('m', 'xs');\n@include size('l', 's');\n@include size('xl', 'm');\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.badge-pulse {\n  &.badge-filled {\n    animation: 1.5s ease 0s infinite normal none running pulse;\n  }\n\n  &.badge-outlined {\n    animation: 1.5s ease 0s infinite normal none running pulse-outlined;\n  }\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, 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"],"version":3}