@haiilo/catalyst 0.1.0 → 0.2.1

package/dist/cjs/{cat-icon-registry-da00f7d6.js → cat-icon-registry-909e38e7.js}

@@ -268,6 +268,31 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -730,6 +755,7 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     const endPostUpdate = createTime('postUpdate', tagName);
+    const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
@@ -737,6 +763,9 @@ const postUpdateComponent = (hostRef) => {
             // DOM WRITE!
             addHydratedFlag(elm);
         }
+        {
+            safeCall(instance, 'componentDidLoad');
+        }
         endPostUpdate();
         {
             hostRef.$onReadyResolve$(elm);
@@ -791,6 +820,29 @@ const then = (promise, thenFn) => {
 };
 const addHydratedFlag = (elm) => elm.classList.add('hydrated')
     ;
+/**
+ * Parse a new property value for a given property type.
+ *
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
+ *   1. `any`, the type given to `propValue` in the function signature
+ *   2. the type stored from `propType`.
+ *
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
+ *
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
+ * ```tsx
+ * <my-cmp prop-val={0}></my-cmp>
+ * ```
+ *
+ * HTML prop values on the other hand, will always a string
+ *
+ * @param propValue the new value to coerce to some type
+ * @param propType the type of the prop, expressed as a binary number
+ * @returns the parsed/coerced value
+ */
 const parsePropertyValue = (propValue, propType) => {
     // ensure this value is of the correct prop type
     if (propValue != null && !isComplexType(propValue)) {
@@ -799,6 +851,10 @@ const parsePropertyValue = (propValue, propType) => {
             // but we'll cheat here and say that the string "false" is the boolean false
             return propValue === 'false' ? false : propValue === '' || !!propValue;
         }
+        if (propType & 2 /* Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
         if (propType & 1 /* String */) {
             // could have been passed as a number or boolean
             // but we still want it as a string
@@ -820,7 +876,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
     const flags = hostRef.$flags$;
     const instance = hostRef.$lazyInstance$ ;
     newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]);
-    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && newVal !== oldVal) {
+    // explicitly check for NaN on both sides, as `NaN === NaN` is always false
+    const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal);
+    const didValueChange = newVal !== oldVal && !areBothNaN;
+    if ((!(flags & 8 /* isConstructingInstance */) || oldVal === undefined) && didValueChange) {
         // gadzooks! the property's value has changed!!
         // set our new value!
         hostRef.$instanceValues$.set(propName, newVal);
@@ -1081,12 +1140,16 @@ const connectedCallback = (elm) => {
 const disconnectedCallback = (elm) => {
     if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
         const hostRef = getHostRef(elm);
+        const instance = hostRef.$lazyInstance$ ;
         {
             if (hostRef.$rmListeners$) {
                 hostRef.$rmListeners$.map((rmListener) => rmListener());
                 hostRef.$rmListeners$ = undefined;
             }
         }
+        {
+            safeCall(instance, 'disconnectedCallback');
+        }
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -1314,6 +1377,7 @@ class CatIconRegistry {
 }
 
 exports.CatIconRegistry = CatIconRegistry;
+exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;
 exports.h = h;

package/dist/cjs/catalyst.cjs.js

@@ -1,128 +1,21 @@
 'use strict';
 
-const index = require('./index-083488c8.js');
-const appGlobals = require('./app-globals-fe9ff8ba.js');
-require('./cat-icon-registry-850c538c.js');
+const catIconRegistry = require('./cat-icon-registry-909e38e7.js');
+const appGlobals = require('./app-globals-814f34aa.js');
 
 /*
- Stencil Client Patch Browser v2.13.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.15.0 | MIT Licensed | https://stenciljs.com
  */
-const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
 const patchBrowser = () => {
-    // NOTE!! This fn cannot use async/await!
-    if (index.BUILD.isDev && !index.BUILD.isTesting) {
-        index.consoleDevInfo('Running in development mode.');
-    }
-    if (index.BUILD.cssVarShim) {
-        // shim css vars
-        index.plt.$cssShim$ = index.win.__cssshim;
-    }
-    if (index.BUILD.cloneNodeFix) {
-        // opted-in to polyfill cloneNode() for slot polyfilled components
-        patchCloneNodeFix(index.H.prototype);
-    }
-    if (index.BUILD.profile && !performance.mark) {
-        // not all browsers support performance.mark/measure (Safari 10)
-        performance.mark = performance.measure = () => {
-            /*noop*/
-        };
-        performance.getEntriesByName = () => [];
-    }
-    // @ts-ignore
-    const scriptElm = index.BUILD.scriptDataOpts || index.BUILD.safari10 || index.BUILD.dynamicImportShim
-        ? Array.from(index.doc.querySelectorAll('script')).find((s) => new RegExp(`\/${index.NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
-            s.getAttribute('data-stencil-namespace') === index.NAMESPACE)
-        : null;
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('catalyst.cjs.js', document.baseURI).href));
-    const opts = index.BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
-    if (index.BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
-        // Safari < v11 support: This IF is true if it's Safari below v11.
-        // This fn cannot use async/await since Safari didn't support it until v11,
-        // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
-        // so both the ESM file and nomodule file would get downloaded. Only Safari
-        // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
-        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
-        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
-        return {
-            then() {
-                /* promise noop */
-            },
-        };
-    }
-    if (!index.BUILD.safari10 && importMeta !== '') {
+    const opts = {};
+    if (importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
     }
-    else if (index.BUILD.dynamicImportShim || index.BUILD.safari10) {
-        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, index.win.location.href)).href;
-        if (index.BUILD.dynamicImportShim) {
-            patchDynamicImport(opts.resourcesUrl, scriptElm);
-        }
-        if (index.BUILD.dynamicImportShim && !index.win.customElements) {
-            // module support, but no custom elements support (Old Edge)
-            // @ts-ignore
-            return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-dom" */ './dom-8ac1ad03.js'); }).then(() => opts);
-        }
-    }
-    return index.promiseResolve(opts);
-};
-const patchDynamicImport = (base, orgScriptElm) => {
-    const importFunctionName = getDynamicImportFunction(index.NAMESPACE);
-    try {
-        // test if this browser supports dynamic imports
-        // There is a caching issue in V8, that breaks using import() in Function
-        // By generating a random string, we can workaround it
-        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
-        index.win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
-    }
-    catch (e) {
-        // this shim is specifically for browsers that do support "esm" imports
-        // however, they do NOT support "dynamic" imports
-        // basically this code is for old Edge, v18 and below
-        const moduleMap = new Map();
-        index.win[importFunctionName] = (src) => {
-            const url = new URL(src, base).href;
-            let mod = moduleMap.get(url);
-            if (!mod) {
-                const script = index.doc.createElement('script');
-                script.type = 'module';
-                script.crossOrigin = orgScriptElm.crossOrigin;
-                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {
-                    type: 'application/javascript',
-                }));
-                mod = new Promise((resolve) => {
-                    script.onload = () => {
-                        resolve(index.win[importFunctionName].m);
-                        script.remove();
-                    };
-                });
-                moduleMap.set(url, mod);
-                index.doc.head.appendChild(script);
-            }
-            return mod;
-        };
-    }
-};
-const patchCloneNodeFix = (HTMLElementPrototype) => {
-    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
-    HTMLElementPrototype.cloneNode = function (deep) {
-        if (this.nodeName === 'TEMPLATE') {
-            return nativeCloneNodeFn.call(this, deep);
-        }
-        const clonedNode = nativeCloneNodeFn.call(this, false);
-        const srcChildNodes = this.childNodes;
-        if (deep) {
-            for (let i = 0; i < srcChildNodes.length; i++) {
-                // Node.ATTRIBUTE_NODE === 2, and checking because IE11
-                if (srcChildNodes[i].nodeType !== 2) {
-                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
-                }
-            }
-        }
-        return clonedNode;
-    };
+    return catIconRegistry.promiseResolve(opts);
 };
 
 patchBrowser().then(options => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["cat-icon.cjs",[[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-spinner.cjs",[[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-button.cjs",[[1,"cat-button",{"variant":[1],"color":[1],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"ellipsed":[4],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconSuffix":[4,"icon-suffix"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]]]]], options);
+  return catIconRegistry.bootstrapLazy([["cat-alert_7.cjs",[[1,"cat-button",{"variant":[1],"color":[1],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"ellipsed":[4],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconSuffix":[4,"icon-suffix"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-alert",{"color":[1]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -2,36 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-083488c8.js');
-const appGlobals = require('./app-globals-fe9ff8ba.js');
-require('./cat-icon-registry-850c538c.js');
+const catIconRegistry = require('./cat-icon-registry-909e38e7.js');
+const appGlobals = require('./app-globals-814f34aa.js');
 
 /*
- Stencil Client Patch Esm v2.13.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.15.0 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
-    // NOTE!! This fn cannot use async/await!
-    // @ts-ignore
-    if (index.BUILD.cssVarShim && !(index.CSS && index.CSS.supports && index.CSS.supports('color', 'var(--c)'))) {
-        // @ts-ignore
-        return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-css-shim" */ './css-shim-3bfdba4f.js'); }).then(() => {
-            if ((index.plt.$cssShim$ = index.win.__cssshim)) {
-                return index.plt.$cssShim$.i();
-            }
-            else {
-                // for better minification
-                return 0;
-            }
-        });
-    }
-    return index.promiseResolve();
+    return catIconRegistry.promiseResolve();
 };
 
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["cat-icon.cjs",[[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-spinner.cjs",[[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}]]],["cat-button.cjs",[[1,"cat-button",{"variant":[1],"color":[1],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"ellipsed":[4],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconSuffix":[4,"icon-suffix"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]]]]], options);
+  return catIconRegistry.bootstrapLazy([["cat-alert_7.cjs",[[1,"cat-button",{"variant":[1],"color":[1],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"ellipsed":[4],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconSuffix":[4,"icon-suffix"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-alert",{"color":[1]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -1,13 +1,17 @@
 {
   "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-skeleton/cat-skeleton.js",
     "./components/cat-spinner/cat-spinner.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.13.0",
-    "typescriptVersion": "4.3.5"
+    "version": "2.15.0",
+    "typescriptVersion": "4.5.4"
   },
   "collections": [],
   "bundles": [],

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,49 @@
+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'"
+    }
+  }; }
+}

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 0px 0px 0px 0.5rem;
+  }
+  100% {
+    box-shadow: transparent 0px 0px 0px 0px;
+  }
+}
+@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 0px 0px 0px 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2);
+  }
+  100% {
+    box-shadow: transparent 0px 0px 0px 0px, inset 0 0 0 1px rgba(var(--border), 0.2);
+  }
+}