@haiilo/catalyst 2.1.2 → 2.3.0

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

@@ -1,5 +1,5 @@
-import { Component, Element, h, Prop } from '@stencil/core';
-import { setPropertyDefault } from '../../utils/setDefault';
+import { Component, Element, Prop, Watch, h } from '@stencil/core';
+import { setProperty, setPropertyDefault } from '../../utils/setDefault';
 /**
  * Badges are used to inform users of the status of an object or of an action
  * that’s been taken.
@@ -35,6 +35,15 @@ export class CatBadge {
   render() {
     return h("slot", null);
   }
+  onColorChanged() {
+    setProperty(this, 'color');
+  }
+  onSizeChanged() {
+    setProperty(this, 'size');
+  }
+  onVariantChanged() {
+    setProperty(this, 'variant');
+  }
   static get is() { return "cat-badge"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -136,5 +145,15 @@ export class CatBadge {
     }
   }; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "color",
+      "methodName": "onColorChanged"
+    }, {
+      "propName": "size",
+      "methodName": "onSizeChanged"
+    }, {
+      "propName": "variant",
+      "methodName": "onVariantChanged"
+    }]; }
 }
 //# 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;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;;GAGG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAQE;;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;GAWvB;EATC,iBAAiB;IACf,kBAAkB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACpC,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClC,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;EACnC,CAAC;EAED,MAAM;IACJ,OAAO,eAAa,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { setPropertyDefault } from '../../utils/setDefault';\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() 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  connectedCallback() {\n    setPropertyDefault(this, 'variant');\n    setPropertyDefault(this, 'color');\n    setPropertyDefault(this, 'size');\n  }\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,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAEzE;;;GAGG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAQE;;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;GA0BvB;EAxBC,iBAAiB;IACf,kBAAkB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACpC,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClC,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;EACnC,CAAC;EAED,MAAM;IACJ,OAAO,eAAa,CAAC;EACvB,CAAC;EAGD,cAAc;IACZ,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;EAC7B,CAAC;EAGD,aAAa;IACX,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;EAC5B,CAAC;EAGD,gBAAgB;IACd,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;EAC/B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Prop, Watch, h } from '@stencil/core';\nimport { setProperty, setPropertyDefault } from '../../utils/setDefault';\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() 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  connectedCallback() {\n    setPropertyDefault(this, 'variant');\n    setPropertyDefault(this, 'color');\n    setPropertyDefault(this, 'size');\n  }\n\n  render() {\n    return <slot></slot>;\n  }\n\n  @Watch('color')\n  onColorChanged() {\n    setProperty(this, 'color');\n  }\n\n  @Watch('size')\n  onSizeChanged() {\n    setProperty(this, 'size');\n  }\n\n  @Watch('variant')\n  onVariantChanged() {\n    setProperty(this, 'variant');\n  }\n}\n"]}

package/dist/collection/scss/core/_typography.scss

@@ -2,7 +2,12 @@
 @use '../mixins' as *;
 
 :where(h1, h2, h3, h4, h5, h6),
-.cat-h1, .cat-h2, .cat-h3, .cat-h4, .cat-h5, .cat-h6 {
+.cat-h1,
+.cat-h2,
+.cat-h3,
+.cat-h4,
+.cat-h5,
+.cat-h6 {
   margin-top: 0;
   margin-bottom: $cat-head-margin-bottom;
 }

package/dist/collection/scss/index.scss

@@ -1,6 +1,5 @@
 // -- Reset
 @import '~sanitize.css/sanitize.css';
-@import '~sanitize.css/assets.css';
 @import '~sanitize.css/reduce-motion.css';
 
 // -- Vendor

package/dist/collection/utils/setDefault.js

@@ -6,4 +6,10 @@ export function setAttributeDefault(host, attr, value) {
 export function setPropertyDefault(host, prop) {
   setAttributeDefault(host, String(prop), host[prop]);
 }
+export function setAttribute(host, attr, value) {
+  host.hostElement.setAttribute(attr, String(value));
+}
+export function setProperty(host, prop) {
+  setAttribute(host, String(prop), host[prop]);
+}
 //# sourceMappingURL=setDefault.js.map

package/dist/collection/utils/setDefault.js.map

@@ -1 +1 @@
-{"version":3,"file":"setDefault.js","sourceRoot":"","sources":["../../src/utils/setDefault.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;EAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;IACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACpD;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAyC,IAAO,EAAE,IAAa;EAC/F,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACtD,CAAC","sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setPropertyDefault<T extends { hostElement: HTMLElement }>(host: T, prop: keyof T): void {\n  setAttributeDefault(host, String(prop), host[prop]);\n}\n"]}
+{"version":3,"file":"setDefault.js","sourceRoot":"","sources":["../../src/utils/setDefault.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;EAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;IACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACpD;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAyC,IAAO,EAAE,IAAa;EAC/F,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACtD,CAAC;AAED,MAAM,UAAU,YAAY,CAAyC,IAAO,EAAE,IAAY,EAAE,KAAc;EACxG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AACrD,CAAC;AAED,MAAM,UAAU,WAAW,CAAyC,IAAO,EAAE,IAAa;EACxF,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/C,CAAC","sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setPropertyDefault<T extends { hostElement: HTMLElement }>(host: T, prop: keyof T): void {\n  setAttributeDefault(host, String(prop), host[prop]);\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n\nexport function setProperty<T extends { hostElement: HTMLElement }>(host: T, prop: keyof T): void {\n  setAttribute(host, String(prop), host[prop]);\n}\n"]}

package/dist/components/cat-badge.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { a as setPropertyDefault } from './setDefault.js';
+import { a as setPropertyDefault, b as setProperty } from './setDefault.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}:host slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}:host([round]){border-radius:10rem}:host([variant=filled]){background-color:rgba(var(--bg), 0.1);color:rgb(var(--text));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}:host([variant=outlined]){background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}: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);--border: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);--border:var(--cat-secondary-bg, 105, 118, 135)}: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);--border: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);--border: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);--border:var(--cat-danger-text, 217, 52, 13)}:host([size=xs]){height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}:host([size=s]){height:1.5rem;min-width:1.5rem;font-size:0.75rem;padding:0 0.5rem}:host([size=m]){height:2rem;min-width:2rem;font-size:0.875rem;padding:0 0.75rem}:host([size=l]){height:2.5rem;min-width:2.5rem;font-size:0.9375rem;padding:0 1rem}:host([size=xl]){height:3rem;min-width:3rem;font-size:1.125rem;padding:0 1rem}: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(--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)}}";
 
@@ -37,7 +37,21 @@ const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     return h("slot", null);
   }
+  onColorChanged() {
+    setProperty(this, 'color');
+  }
+  onSizeChanged() {
+    setProperty(this, 'size');
+  }
+  onVariantChanged() {
+    setProperty(this, 'variant');
+  }
   get hostElement() { return this; }
+  static get watchers() { return {
+    "color": ["onColorChanged"],
+    "size": ["onSizeChanged"],
+    "variant": ["onVariantChanged"]
+  }; }
   static get style() { return catBadgeCss; }
 }, [1, "cat-badge", {
     "variant": [1],

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

@@ -1 +1 @@
-{"file":"cat-badge.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,+jFAA+jF;;MCYtkFA,UAAQ;EALrB;;;;;;;IAWU,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;GAWvB;EATC,iBAAiB;IACf,kBAAkB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACpC,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClC,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;GAClC;EAED,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\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:host([variant='filled']) {\n  background-color: cat-token-wrap(var(--bg), 0.1);\n  color: cat-token-wrap(var(--text));\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:host([variant='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  :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    @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  :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  }\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, Prop } from '@stencil/core';\nimport { setPropertyDefault } from '../../utils/setDefault';\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() 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  connectedCallback() {\n    setPropertyDefault(this, 'variant');\n    setPropertyDefault(this, 'color');\n    setPropertyDefault(this, 'size');\n  }\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}
+{"file":"cat-badge.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,+jFAA+jF;;MCYtkFA,UAAQ;EALrB;;;;;;;IAWU,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;GA0BvB;EAxBC,iBAAiB;IACf,kBAAkB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACpC,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAClC,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;GAClC;EAED,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;EAGD,cAAc;IACZ,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;GAC5B;EAGD,aAAa;IACX,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;GAC3B;EAGD,gBAAgB;IACd,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;GAC9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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\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:host([variant='filled']) {\n  background-color: cat-token-wrap(var(--bg), 0.1);\n  color: cat-token-wrap(var(--text));\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:host([variant='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  :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    @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  :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  }\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, Prop, Watch, h } from '@stencil/core';\nimport { setProperty, setPropertyDefault } from '../../utils/setDefault';\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() 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  connectedCallback() {\n    setPropertyDefault(this, 'variant');\n    setPropertyDefault(this, 'color');\n    setPropertyDefault(this, 'size');\n  }\n\n  render() {\n    return <slot></slot>;\n  }\n\n  @Watch('color')\n  onColorChanged() {\n    setProperty(this, 'color');\n  }\n\n  @Watch('size')\n  onSizeChanged() {\n    setProperty(this, 'size');\n  }\n\n  @Watch('variant')\n  onVariantChanged() {\n    setProperty(this, 'variant');\n  }\n}\n"],"version":3}

package/dist/components/setDefault.js

@@ -6,7 +6,13 @@ function setAttributeDefault(host, attr, value) {
 function setPropertyDefault(host, prop) {
   setAttributeDefault(host, String(prop), host[prop]);
 }
+function setAttribute(host, attr, value) {
+  host.hostElement.setAttribute(attr, String(value));
+}
+function setProperty(host, prop) {
+  setAttribute(host, String(prop), host[prop]);
+}
 
-export { setPropertyDefault as a, setAttributeDefault as s };
+export { setPropertyDefault as a, setProperty as b, setAttributeDefault as s };
 
 //# sourceMappingURL=setDefault.js.map

package/dist/components/setDefault.js.map

@@ -1 +1 @@
-{"file":"setDefault.js","mappings":"SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;EAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;IACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACpD;AACH,CAAC;SAEe,kBAAkB,CAAyC,IAAO,EAAE,IAAa;EAC/F,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACtD;;;;","names":[],"sources":["./src/utils/setDefault.ts"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setPropertyDefault<T extends { hostElement: HTMLElement }>(host: T, prop: keyof T): void {\n  setAttributeDefault(host, String(prop), host[prop]);\n}\n"],"version":3}
+{"file":"setDefault.js","mappings":"SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;EAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;IACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACpD;AACH,CAAC;SAEe,kBAAkB,CAAyC,IAAO,EAAE,IAAa;EAC/F,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACtD,CAAC;SAEe,YAAY,CAAyC,IAAO,EAAE,IAAY,EAAE,KAAc;EACxG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AACrD,CAAC;SAEe,WAAW,CAAyC,IAAO,EAAE,IAAa;EACxF,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/C;;;;","names":[],"sources":["./src/utils/setDefault.ts"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setPropertyDefault<T extends { hostElement: HTMLElement }>(host: T, prop: keyof T): void {\n  setAttributeDefault(host, String(prop), host[prop]);\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n\nexport function setProperty<T extends { hostElement: HTMLElement }>(host: T, prop: keyof T): void {\n  setAttribute(host, String(prop), host[prop]);\n}\n"],"version":3}

package/dist/esm/cat-alert_22.entry.js

@@ -10,6 +10,12 @@ function setAttributeDefault(host, attr, value) {
 function setPropertyDefault(host, prop) {
   setAttributeDefault(host, String(prop), host[prop]);
 }
+function setAttribute(host, attr, value) {
+  host.hostElement.setAttribute(attr, String(value));
+}
+function setProperty(host, prop) {
+  setAttribute(host, String(prop), host[prop]);
+}
 
 const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem);margin-bottom:1rem}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.1)}:host([color=primary]) cat-icon{color:rgb(var(--cat-primary-text, 0, 129, 148))}:host([color=secondary]){background-color:rgba(var(--cat-secondary-bg, 105, 118, 135), 0.1)}:host([color=secondary]) cat-icon{color:#697687}:host([color=success]){background-color:rgba(var(--cat-success-bg-, 0, 132, 88), 0.1)}:host([color=success]) cat-icon{color:#008458}:host([color=warning]){background-color:rgba(var(--cat-warning-bg, 255, 206, 128), 0.1)}:host([color=warning]) cat-icon{color:#ebb663}:host([color=danger]){background-color:rgba(var(--cat-danger-bg, 217, 52, 13), 0.1)}:host([color=danger]) cat-icon{color:#d9340d}";
 
@@ -170,7 +176,21 @@ const CatBadge = class {
   render() {
     return h("slot", null);
   }
+  onColorChanged() {
+    setProperty(this, 'color');
+  }
+  onSizeChanged() {
+    setProperty(this, 'size');
+  }
+  onVariantChanged() {
+    setProperty(this, 'variant');
+  }
   get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "color": ["onColorChanged"],
+    "size": ["onSizeChanged"],
+    "variant": ["onVariantChanged"]
+  }; }
 };
 CatBadge.style = catBadgeCss;