@haiilo/catalyst 8.1.0 → 8.2.0

package/dist/components/cat-skeleton2.js

@@ -3,62 +3,62 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const catSkeletonCss = ":host{display:flex;flex-direction:column;position:relative;--background:#ebecf0;--highlight:#d7dbe0;--speed:2s}:host([variant=square]),:host([variant=circle]){display:inline-flex}:host([hidden]){display:none}:host([variant=head]:not(:last-child)){margin-bottom:1rem}:host([variant=body]:not(:last-child)){margin-bottom:2rem}.skeleton{display:block;border-radius:var(--cat-border-radius-m, 0.25rem);background:var(--background)}.skeleton-circle{border-radius:10rem}.skeleton-xs.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 1.5rem)}.skeleton-xs.skeleton-square,.skeleton-xs.skeleton-circle{width:var(--width, 1.5rem);height:var(--height, 1.5rem)}.skeleton-xs.skeleton-head,.skeleton-xs.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-xs.skeleton-head{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.skeleton-xs.skeleton-body{height:calc(0.75rem - 4px);margin:calc((1rem - 0.75rem + 4px) * 0.5) 0}.skeleton-s.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2rem)}.skeleton-s.skeleton-square,.skeleton-s.skeleton-circle{width:var(--width, 2rem);height:var(--height, 2rem)}.skeleton-s.skeleton-head,.skeleton-s.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-s.skeleton-head{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.skeleton-s.skeleton-body{height:calc(0.875rem - 4px);margin:calc((1.125rem - 0.875rem + 4px) * 0.5) 0}.skeleton-m.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2.5rem)}.skeleton-m.skeleton-square,.skeleton-m.skeleton-circle{width:var(--width, 2.5rem);height:var(--height, 2.5rem)}.skeleton-m.skeleton-head,.skeleton-m.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-m.skeleton-head{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.skeleton-m.skeleton-body{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.skeleton-l.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3rem)}.skeleton-l.skeleton-square,.skeleton-l.skeleton-circle{width:var(--width, 3rem);height:var(--height, 3rem)}.skeleton-l.skeleton-head,.skeleton-l.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-l.skeleton-head{height:calc(1.5rem - 4px);margin:calc((1.75rem - 1.5rem + 4px) * 0.5) 0}.skeleton-l.skeleton-body{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.skeleton-xl.skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3.5rem)}.skeleton-xl.skeleton-square,.skeleton-xl.skeleton-circle{width:var(--width, 3.5rem);height:var(--height, 3.5rem)}.skeleton-xl.skeleton-head,.skeleton-xl.skeleton-body{width:var(--width, var(--line-width, 100%))}.skeleton-xl.skeleton-head{height:calc(1.75rem - 4px);margin:calc((2rem - 1.75rem + 4px) * 0.5) 0}.skeleton-xl.skeleton-body{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.skeleton-sheen{background:linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%) var(--background);background-size:300% 100%;animation:sheen var(--speed) ease-in-out infinite}.skeleton-pulse{position:relative;overflow:hidden}.skeleton-pulse::before{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:var(--highlight);animation:var(--speed) ease-in-out 0.5s infinite normal none running pulse;opacity:0}@keyframes sheen{0%{background-position:right}}@keyframes pulse{50%{opacity:1}}";
 
 const CatSkeleton = /*@__PURE__*/ proxyCustomElement(class CatSkeleton extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.effect = 'sheen';
-    this.variant = 'rectangle';
-    this.size = 'm';
-    this.lines = undefined;
-  }
-  render() {
-    return (h(Host, null, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
-        skeleton: true,
-        [`skeleton-${this.effect}`]: Boolean(this.effect),
-        [`skeleton-${this.variant}`]: Boolean(this.variant),
-        [`skeleton-${this.size}`]: Boolean(this.size)
-      } })))));
-  }
-  get count() {
-    switch (this.variant) {
-      case 'head':
-        return Math.max(1, this.lines || 1);
-      case 'body':
-        return Math.max(1, this.lines || 3);
-      default:
-        return 1;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.effect = 'sheen';
+        this.variant = 'rectangle';
+        this.size = 'm';
+        this.lines = undefined;
     }
-  }
-  get style() {
-    return this.variant === 'head' || this.variant === 'body'
-      ? {
-        '--line-width': `${this.random(50, 100)}%`
-      }
-      : undefined;
-  }
-  random(min, max) {
-    return Math.floor(Math.random() * (max - min + 1) + min);
-  }
-  static get style() { return catSkeletonCss; }
+    render() {
+        return (h(Host, null, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
+                skeleton: true,
+                [`skeleton-${this.effect}`]: Boolean(this.effect),
+                [`skeleton-${this.variant}`]: Boolean(this.variant),
+                [`skeleton-${this.size}`]: Boolean(this.size)
+            } })))));
+    }
+    get count() {
+        switch (this.variant) {
+            case 'head':
+                return Math.max(1, this.lines || 1);
+            case 'body':
+                return Math.max(1, this.lines || 3);
+            default:
+                return 1;
+        }
+    }
+    get style() {
+        return this.variant === 'head' || this.variant === 'body'
+            ? {
+                '--line-width': `${this.random(50, 100)}%`
+            }
+            : undefined;
+    }
+    random(min, max) {
+        return Math.floor(Math.random() * (max - min + 1) + min);
+    }
+    static get style() { return catSkeletonCss; }
 }, [1, "cat-skeleton", {
-    "effect": [1],
-    "variant": [1],
-    "size": [1],
-    "lines": [2]
-  }]);
+        "effect": [1],
+        "variant": [1],
+        "size": [1],
+        "lines": [2]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-skeleton"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-skeleton":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatSkeleton);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-skeleton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-skeleton":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatSkeleton);
+            }
+            break;
+    } });
 }
 
 export { CatSkeleton as C, defineCustomElement as d };

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

@@ -1 +1 @@
-{"file":"cat-skeleton2.js","mappings":";;AAAA,MAAM,cAAc,GAAG,g6GAAg6G;;MCU16G,WAAW;;;;;kBAIwB,OAAO;mBAKkB,WAAW;gBAMpC,GAAG;;;EASjD,MAAM;IACJ,QACE,EAAC,IAAI,QACF,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OACjC,WACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI;QACd,CAAC,YAAY,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;QACjD,CAAC,YAAY,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACnD,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;OAC9C,GACI,CACR,CAAC,CACG,EACP;GACH;EAED,IAAY,KAAK;IACf,QAAQ,IAAI,CAAC,OAAO;MAClB,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC,KAAK,MAAM;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;MACtC;QACE,OAAO,CAAC,CAAC;KACZ;GACF;EAED,IAAY,KAAK;IACf,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;QACrD;QACE,cAAc,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG;OAC3C;QACD,SAAS,CAAC;GACf;EAEO,MAAM,CAAC,GAAW,EAAE,GAAW;IACrC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;GAC1D;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/cat-skeleton/cat-skeleton.scss?tag=cat-skeleton&encapsulation=shadow","src/components/cat-skeleton/cat-skeleton.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$skeleton-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n:host {\n  /**\n   * @prop --background: The background color of the skeleton.\n   * @prop --highlight: The highlight color of the skeleton.\n   * @prop --speed: The animation speed.\n   */\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  --background: #{cat-token('color.ui.background.skeleton')};\n  --highlight: #{cat-token('color.ui.background.skeletonHighlight')};\n  --speed: 2s;\n}\n\n:host([variant='square']),\n:host([variant='circle']) {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([variant='head']:not(:last-child)) {\n  margin-bottom: $cat-head-margin-bottom;\n}\n\n:host([variant='body']:not(:last-child)) {\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n.skeleton {\n  display: block;\n  border-radius: cat-border-radius('m');\n  background: var(--background);\n}\n\n.skeleton-circle {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n@mixin size($size, $lvl) {\n  $-text-offset: 4px;\n  .skeleton-#{$size} {\n    &.skeleton-rectangle {\n      width: var(--width, 100%);\n      height: var(--height, map.get($skeleton-sizes, $size));\n    }\n\n    &.skeleton-square,\n    &.skeleton-circle {\n      width: var(--width, map.get($skeleton-sizes, $size));\n      height: var(--height, map.get($skeleton-sizes, $size));\n    }\n\n    &.skeleton-head,\n    &.skeleton-body {\n      width: var(--width, var(--line-width, 100%));\n    }\n\n    &.skeleton-head {\n      height: calc(#{cat-head-font-size($lvl)} - #{$-text-offset});\n      margin: calc((#{cat-head-line-height($lvl)} - #{cat-head-font-size($lvl)} + #{$-text-offset}) * 0.5) 0;\n    }\n\n    &.skeleton-body {\n      height: calc(#{cat-body-font-size($size)} - #{$-text-offset});\n      margin: calc((#{cat-body-line-height($size)} - #{cat-body-font-size($size)} + #{$-text-offset}) * 0.5) 0;\n    }\n  }\n}\n\n@include size('xs', 5);\n@include size('s', 4);\n@include size('m', 3);\n@include size('l', 2);\n@include size('xl', 1);\n\n// ----- animation\n\n.skeleton-sheen {\n  background: linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%)\n    var(--background);\n  background-size: 300% 100%;\n  animation: sheen var(--speed) ease-in-out infinite;\n}\n\n.skeleton-pulse {\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--highlight);\n    animation: var(--speed) ease-in-out 0.5s infinite normal none running pulse;\n    opacity: 0;\n  }\n}\n\n@keyframes sheen {\n  0% {\n    background-position: right;\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: 1;\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n */\n@Component({\n  tag: 'cat-skeleton',\n  styleUrl: 'cat-skeleton.scss',\n  shadow: true\n})\nexport class CatSkeleton {\n  /**\n   * The animation style of the skeleton.\n   */\n  @Prop() effect: 'plain' | 'sheen' | 'pulse' = 'sheen';\n\n  /**\n   * The rendering style of the skeleton.\n   */\n  @Prop() variant: 'rectangle' | 'square' | 'circle' | 'head' | 'body' = 'rectangle';\n\n  /**\n   * The size of the skeleton. If the variant is set to \"head\", the size values\n   * \"xs\" to \"xl\" translate to the head levels `h1` to `h5`.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The number of text lines to be rendered for \"head\" and \"body\" variants.\n   * Defaults to 1 for \"head\" and 3 for \"body\". Will be ignored for other\n   * variants.\n   */\n  @Prop() lines?: number;\n\n  render() {\n    return (\n      <Host>\n        {Array.from(Array(this.count)).map(() => (\n          <div\n            style={this.style}\n            class={{\n              skeleton: true,\n              [`skeleton-${this.effect}`]: Boolean(this.effect),\n              [`skeleton-${this.variant}`]: Boolean(this.variant),\n              [`skeleton-${this.size}`]: Boolean(this.size)\n            }}\n          ></div>\n        ))}\n      </Host>\n    );\n  }\n\n  private get count() {\n    switch (this.variant) {\n      case 'head':\n        return Math.max(1, this.lines || 1);\n      case 'body':\n        return Math.max(1, this.lines || 3);\n      default:\n        return 1;\n    }\n  }\n\n  private get style() {\n    return this.variant === 'head' || this.variant === 'body'\n      ? {\n          '--line-width': `${this.random(50, 100)}%`\n        }\n      : undefined;\n  }\n\n  private random(min: number, max: number) {\n    return Math.floor(Math.random() * (max - min + 1) + min);\n  }\n}\n"],"version":3}
+{"file":"cat-skeleton2.js","mappings":";;AAAA,MAAM,cAAc,GAAG,g6GAAg6G;;MCU16G,WAAW;;;;;sBAIwB,OAAO;uBAKkB,WAAW;oBAMpC,GAAG;;;IASjD,MAAM;QACJ,QACE,EAAC,IAAI,QACF,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OACjC,WACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,CAAC,YAAY,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC;gBACjD,CAAC,YAAY,IAAI,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;gBACnD,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;aAC9C,GACI,CACR,CAAC,CACG,EACP;KACH;IAED,IAAY,KAAK;QACf,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,MAAM;gBACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;YACtC,KAAK,MAAM;gBACT,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;YACtC;gBACE,OAAO,CAAC,CAAC;SACZ;KACF;IAED,IAAY,KAAK;QACf,OAAO,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;cACrD;gBACE,cAAc,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG;aAC3C;cACD,SAAS,CAAC;KACf;IAEO,MAAM,CAAC,GAAW,EAAE,GAAW;QACrC,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;KAC1D;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/cat-skeleton/cat-skeleton.scss?tag=cat-skeleton&encapsulation=shadow","src/components/cat-skeleton/cat-skeleton.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$skeleton-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n:host {\n  /**\n   * @prop --background: The background color of the skeleton.\n   * @prop --highlight: The highlight color of the skeleton.\n   * @prop --speed: The animation speed.\n   */\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  --background: #{cat-token('color.ui.background.skeleton')};\n  --highlight: #{cat-token('color.ui.background.skeletonHighlight')};\n  --speed: 2s;\n}\n\n:host([variant='square']),\n:host([variant='circle']) {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([variant='head']:not(:last-child)) {\n  margin-bottom: $cat-head-margin-bottom;\n}\n\n:host([variant='body']:not(:last-child)) {\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n.skeleton {\n  display: block;\n  border-radius: cat-border-radius('m');\n  background: var(--background);\n}\n\n.skeleton-circle {\n  border-radius: 10rem;\n}\n\n// ----- size\n\n@mixin size($size, $lvl) {\n  $-text-offset: 4px;\n  .skeleton-#{$size} {\n    &.skeleton-rectangle {\n      width: var(--width, 100%);\n      height: var(--height, map.get($skeleton-sizes, $size));\n    }\n\n    &.skeleton-square,\n    &.skeleton-circle {\n      width: var(--width, map.get($skeleton-sizes, $size));\n      height: var(--height, map.get($skeleton-sizes, $size));\n    }\n\n    &.skeleton-head,\n    &.skeleton-body {\n      width: var(--width, var(--line-width, 100%));\n    }\n\n    &.skeleton-head {\n      height: calc(#{cat-head-font-size($lvl)} - #{$-text-offset});\n      margin: calc((#{cat-head-line-height($lvl)} - #{cat-head-font-size($lvl)} + #{$-text-offset}) * 0.5) 0;\n    }\n\n    &.skeleton-body {\n      height: calc(#{cat-body-font-size($size)} - #{$-text-offset});\n      margin: calc((#{cat-body-line-height($size)} - #{cat-body-font-size($size)} + #{$-text-offset}) * 0.5) 0;\n    }\n  }\n}\n\n@include size('xs', 5);\n@include size('s', 4);\n@include size('m', 3);\n@include size('l', 2);\n@include size('xl', 1);\n\n// ----- animation\n\n.skeleton-sheen {\n  background: linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%)\n    var(--background);\n  background-size: 300% 100%;\n  animation: sheen var(--speed) ease-in-out infinite;\n}\n\n.skeleton-pulse {\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--highlight);\n    animation: var(--speed) ease-in-out 0.5s infinite normal none running pulse;\n    opacity: 0;\n  }\n}\n\n@keyframes sheen {\n  0% {\n    background-position: right;\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: 1;\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n */\n@Component({\n  tag: 'cat-skeleton',\n  styleUrl: 'cat-skeleton.scss',\n  shadow: true\n})\nexport class CatSkeleton {\n  /**\n   * The animation style of the skeleton.\n   */\n  @Prop() effect: 'plain' | 'sheen' | 'pulse' = 'sheen';\n\n  /**\n   * The rendering style of the skeleton.\n   */\n  @Prop() variant: 'rectangle' | 'square' | 'circle' | 'head' | 'body' = 'rectangle';\n\n  /**\n   * The size of the skeleton. If the variant is set to \"head\", the size values\n   * \"xs\" to \"xl\" translate to the head levels `h1` to `h5`.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The number of text lines to be rendered for \"head\" and \"body\" variants.\n   * Defaults to 1 for \"head\" and 3 for \"body\". Will be ignored for other\n   * variants.\n   */\n  @Prop() lines?: number;\n\n  render() {\n    return (\n      <Host>\n        {Array.from(Array(this.count)).map(() => (\n          <div\n            style={this.style}\n            class={{\n              skeleton: true,\n              [`skeleton-${this.effect}`]: Boolean(this.effect),\n              [`skeleton-${this.variant}`]: Boolean(this.variant),\n              [`skeleton-${this.size}`]: Boolean(this.size)\n            }}\n          ></div>\n        ))}\n      </Host>\n    );\n  }\n\n  private get count() {\n    switch (this.variant) {\n      case 'head':\n        return Math.max(1, this.lines || 1);\n      case 'body':\n        return Math.max(1, this.lines || 3);\n      default:\n        return 1;\n    }\n  }\n\n  private get style() {\n    return this.variant === 'head' || this.variant === 'body'\n      ? {\n          '--line-width': `${this.random(50, 100)}%`\n        }\n      : undefined;\n  }\n\n  private random(min: number, max: number) {\n    return Math.floor(Math.random() * (max - min + 1) + min);\n  }\n}\n"],"version":3}

package/dist/components/cat-spinner.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CatSpinner extends Components.CatSpinner, HTMLElement {}
 export const CatSpinner: {
-  prototype: CatSpinner;
-  new (): CatSpinner;
+    prototype: CatSpinner;
+    new (): CatSpinner;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/cat-spinner2.js

@@ -3,35 +3,35 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 const catSpinnerCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host[hidden]{display:none}span{display:inline-flex}svg{fill:none;stroke:currentColor;stroke-dasharray:135px;stroke-dashoffset:95px;stroke-linecap:round;stroke-width:5px;transform-origin:center center;animation:spin 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;width:1em;height:1em}.spinner-xs svg{font-size:0.75rem}.spinner-s svg{font-size:1rem}.spinner-m svg{font-size:1.25rem}.spinner-l svg{font-size:1.5rem}.spinner-xl svg{font-size:1.75rem}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
 
 const CatSpinner = /*@__PURE__*/ proxyCustomElement(class CatSpinner extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.size = 'm';
-    this.a11yLabel = undefined;
-  }
-  render() {
-    return (h("span", { "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
-        [`spinner-${this.size}`]: this.size !== 'inline'
-      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { cx: "24", cy: "24", r: "21.5" }))));
-  }
-  static get style() { return catSpinnerCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.size = 'm';
+        this.a11yLabel = undefined;
+    }
+    render() {
+        return (h("span", { "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
+                [`spinner-${this.size}`]: this.size !== 'inline'
+            } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { cx: "24", cy: "24", r: "21.5" }))));
+    }
+    static get style() { return catSpinnerCss; }
 }, [1, "cat-spinner", {
-    "size": [1],
-    "a11yLabel": [1, "a11y-label"]
-  }]);
+        "size": [1],
+        "a11yLabel": [1, "a11y-label"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-spinner":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatSpinner);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-spinner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatSpinner);
+            }
+            break;
+    } });
 }
 
 export { CatSpinner as C, defineCustomElement as d };

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

@@ -1 +1 @@
-{"file":"cat-spinner2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6nBAA6nB;;MCUtoB,UAAU;;;;;gBAIoC,GAAG;;;EAQ5D,MAAM;IACJ,QACE,0BACc,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC3C,KAAK,EAAE;QACL,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;OACjD,IAED,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACzD,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,GAAU,CACtC,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/cat-spinner/cat-spinner.scss?tag=cat-spinner&encapsulation=shadow","src/components/cat-spinner/cat-spinner.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$spinner-sizes: (\n  'xl': 1.75rem,\n  'l': 1.5rem,\n  'm': 1.25rem,\n  's': 1rem,\n  'xs': 0.75rem\n);\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n\n  &[hidden] {\n    display: none;\n  }\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: none;\n  stroke: currentColor;\n  stroke-dasharray: 135px;\n  stroke-dashoffset: 95px;\n  stroke-linecap: round;\n  stroke-width: 5px;\n  transform-origin: center center;\n  animation: spin 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;\n  width: 1em;\n  height: 1em;\n}\n\n// ----- sizes\n\n@mixin size($size) {\n  .spinner-#{$size} svg {\n    font-size: map.get($spinner-sizes, $size);\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n\n// ----- animation\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Spinners are used to indicate users that their action is being processed.\n */\n@Component({\n  tag: 'cat-spinner',\n  styleUrl: 'cat-spinner.scss',\n  shadow: true\n})\nexport class CatSpinner {\n  /**\n   * The size of the spinner.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the spinner that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        class={{\n          [`spinner-${this.size}`]: this.size !== 'inline'\n        }}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\">\n          <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n        </svg>\n      </span>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-spinner2.js","mappings":";;AAAA,MAAM,aAAa,GAAG,6nBAA6nB;;MCUtoB,UAAU;;;;;oBAIoC,GAAG;;;IAQ5D,MAAM;QACJ,QACE,0BACc,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,GAAG,IAAI,GAAG,MAAM,EAC3C,KAAK,EAAE;gBACL,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjD,IAED,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACzD,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,MAAM,GAAU,CACtC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/cat-spinner/cat-spinner.scss?tag=cat-spinner&encapsulation=shadow","src/components/cat-spinner/cat-spinner.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$spinner-sizes: (\n  'xl': 1.75rem,\n  'l': 1.5rem,\n  'm': 1.25rem,\n  's': 1rem,\n  'xs': 0.75rem\n);\n\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n  @include cat-select(none);\n\n  &[hidden] {\n    display: none;\n  }\n}\n\nspan {\n  display: inline-flex;\n}\n\nsvg {\n  fill: none;\n  stroke: currentColor;\n  stroke-dasharray: 135px;\n  stroke-dashoffset: 95px;\n  stroke-linecap: round;\n  stroke-width: 5px;\n  transform-origin: center center;\n  animation: spin 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;\n  width: 1em;\n  height: 1em;\n}\n\n// ----- sizes\n\n@mixin size($size) {\n  .spinner-#{$size} svg {\n    font-size: map.get($spinner-sizes, $size);\n  }\n}\n\n@include size('xs');\n@include size('s');\n@include size('m');\n@include size('l');\n@include size('xl');\n\n// ----- animation\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Spinners are used to indicate users that their action is being processed.\n */\n@Component({\n  tag: 'cat-spinner',\n  styleUrl: 'cat-spinner.scss',\n  shadow: true\n})\nexport class CatSpinner {\n  /**\n   * The size of the spinner.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the spinner that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        class={{\n          [`spinner-${this.size}`]: this.size !== 'inline'\n        }}\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\">\n          <circle cx=\"24\" cy=\"24\" r=\"21.5\"></circle>\n        </svg>\n      </span>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-tab.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CatTab extends Components.CatTab, HTMLElement {}
 export const CatTab: {
-  prototype: CatTab;
-  new (): CatTab;
+    prototype: CatTab;
+    new (): CatTab;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/cat-tab.js

@@ -4,55 +4,57 @@ const catTabCss = ":host{display:block}:host([hidden]){display:none}";
 
 let nextUniqueId = 0;
 const CatTab$1 = /*@__PURE__*/ proxyCustomElement(class CatTab extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.tabClick = createEvent(this, "tabClick", 7);
-    this.label = '';
-    this.icon = undefined;
-    this.iconOnly = false;
-    this.iconRight = false;
-    this.url = undefined;
-    this.urlTarget = undefined;
-    this.deactivated = false;
-    this.nativeAttributes = undefined;
-  }
-  connectedCallback() {
-    if (!this.hostElement.id) {
-      this.hostElement.id = `cat-tab-${nextUniqueId++}`;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.catClick = createEvent(this, "catClick", 7);
+        this.label = '';
+        this.icon = undefined;
+        this.iconOnly = false;
+        this.iconRight = false;
+        this.url = undefined;
+        this.urlTarget = undefined;
+        this.deactivated = false;
+        this.error = false;
+        this.nativeAttributes = undefined;
     }
-  }
-  onClick(event) {
-    this.tabClick.emit(event);
-  }
-  render() {
-    return h(Host, null);
-  }
-  get hostElement() { return this; }
-  static get style() { return catTabCss; }
+    connectedCallback() {
+        if (!this.hostElement.id) {
+            this.hostElement.id = `cat-tab-${nextUniqueId++}`;
+        }
+    }
+    onClick(event) {
+        this.catClick.emit(event);
+    }
+    render() {
+        return h(Host, null);
+    }
+    get hostElement() { return this; }
+    static get style() { return catTabCss; }
 }, [1, "cat-tab", {
-    "label": [513],
-    "icon": [513],
-    "iconOnly": [520, "icon-only"],
-    "iconRight": [516, "icon-right"],
-    "url": [513],
-    "urlTarget": [513, "url-target"],
-    "deactivated": [516],
-    "nativeAttributes": [16]
-  }, [[0, "click", "onClick"]]]);
+        "label": [513],
+        "icon": [513],
+        "iconOnly": [520, "icon-only"],
+        "iconRight": [516, "icon-right"],
+        "url": [513],
+        "urlTarget": [513, "url-target"],
+        "deactivated": [516],
+        "error": [516],
+        "nativeAttributes": [16]
+    }, [[0, "click", "onClick"]]]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-tab"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-tab":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatTab$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-tab"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-tab":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatTab$1);
+            }
+            break;
+    } });
 }
 
 const CatTab = CatTab$1;

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

@@ -1 +1 @@
-{"file":"cat-tab.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mDAAmD;;ACGrE,IAAI,YAAY,GAAG,CAAC,CAAC;MAURA,QAAM;;;;;;iBAMgB,EAAE;;oBAUuB,KAAK;qBAK1B,KAAK;;;uBAeH,KAAK;;;EAY5C,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE;MACxB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,WAAW,YAAY,EAAE,EAAE,CAAC;KACnD;GACF;EAGD,OAAO,CAAC,KAAiB;IACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatTab"],"sources":["src/components/cat-tab/cat-tab.scss?tag=cat-tab&encapsulation=shadow","src/components/cat-tab/cat-tab.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Prop, Event, EventEmitter, Listen, Host, Element } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\nlet nextUniqueId = 0;\n\n/**\n * A single tab inside a tabs component.\n */\n@Component({\n  tag: 'cat-tab',\n  styleUrl: 'cat-tab.scss',\n  shadow: true\n})\nexport class CatTab {\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The label of the tab.\n   */\n  @Prop({ reflect: true }) label = '';\n\n  /**\n   * The name of an icon to be displayed in the tab.\n   */\n  @Prop({ reflect: true }) icon?: string;\n\n  /**\n   * Hide the actual button content and only display the tab.\n   */\n  @Prop({ reflect: true }) iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop({ reflect: true }) iconRight = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop({ reflect: true }) url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop({ reflect: true }) urlTarget?: '_blank' | '_self';\n\n  /**\n   * Specifies that the tab should be deactivated.\n   */\n  @Prop({ reflect: true }) deactivated = false;\n\n  /**\n   * Attributes that will be added to the native HTML button element\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when tab is clicked.\n   */\n  @Event() tabClick!: EventEmitter<MouseEvent>;\n\n  connectedCallback() {\n    if (!this.hostElement.id) {\n      this.hostElement.id = `cat-tab-${nextUniqueId++}`;\n    }\n  }\n\n  @Listen('click')\n  onClick(event: MouseEvent) {\n    this.tabClick.emit(event);\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}
+{"file":"cat-tab.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mDAAmD;;ACGrE,IAAI,YAAY,GAAG,CAAC,CAAC;MAURA,QAAM;;;;;;qBAMgB,EAAE;;wBAUuB,KAAK;yBAK1B,KAAK;;;2BAeH,KAAK;qBAOX,KAAK;;;IAYtC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE;YACxB,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,WAAW,YAAY,EAAE,EAAE,CAAC;SACnD;KACF;IAGD,OAAO,CAAC,KAAiB;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3B;IAED,MAAM;QACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;KACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatTab"],"sources":["src/components/cat-tab/cat-tab.scss?tag=cat-tab&encapsulation=shadow","src/components/cat-tab/cat-tab.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, h, Prop, Event, EventEmitter, Listen, Host, Element } from '@stencil/core';\nimport { Breakpoint } from '../../utils/breakpoints';\n\nlet nextUniqueId = 0;\n\n/**\n * A single tab inside a tabs component.\n */\n@Component({\n  tag: 'cat-tab',\n  styleUrl: 'cat-tab.scss',\n  shadow: true\n})\nexport class CatTab {\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The label of the tab.\n   */\n  @Prop({ reflect: true }) label = '';\n\n  /**\n   * The name of an icon to be displayed in the tab.\n   */\n  @Prop({ reflect: true }) icon?: string;\n\n  /**\n   * Hide the actual button content and only display the tab.\n   */\n  @Prop({ reflect: true }) iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop({ reflect: true }) iconRight = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop({ reflect: true }) url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop({ reflect: true }) urlTarget?: '_blank' | '_self';\n\n  /**\n   * Specifies that the tab should be deactivated.\n   */\n  @Prop({ reflect: true }) deactivated = false;\n\n  /**\n   * Specifies that the tab content pane contains an error. This will color\n   * the tab in an error state and also switch to an error icon if an icon\n   * is specified.\n   */\n  @Prop({ reflect: true }) error = false;\n\n  /**\n   * Attributes that will be added to the native HTML button element\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when tab is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  connectedCallback() {\n    if (!this.hostElement.id) {\n      this.hostElement.id = `cat-tab-${nextUniqueId++}`;\n    }\n  }\n\n  @Listen('click')\n  onClick(event: MouseEvent) {\n    this.catClick.emit(event);\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"version":3}

package/dist/components/cat-tabs.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CatTabs extends Components.CatTabs, HTMLElement {}
 export const CatTabs: {
-  prototype: CatTabs;
-  new (): CatTabs;
+    prototype: CatTabs;
+    new (): CatTabs;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/cat-tabs.js

@@ -3,125 +3,132 @@ import { d as defineCustomElement$4 } from './cat-button2.js';
 import { d as defineCustomElement$3 } from './cat-icon2.js';
 import { d as defineCustomElement$2 } from './cat-spinner2.js';
 
-const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 rgb(var(--cat-border-color, 235, 236, 240))}:host([hidden]){display:none}:host([tabs-align=center]){justify-content:center}:host([tabs-align=right]){justify-content:end}:host([tabs-align=justify]) cat-button{flex:1 0 auto}.cat-tab{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;transition:none}.cat-tab:first-of-type{margin-left:-0.75rem}.cat-tab:last-of-type{margin-right:-0.75rem}.cat-tab::after{opacity:0;content:\"\";position:absolute;background:currentColor;left:0.75rem;right:0.75rem;bottom:0;height:2px}.cat-tab:hover::after{opacity:0.25}.cat-tab.cat-tab-active{font-weight:700;color:rgb(var(--cat-primary-text-active, 2, 99, 113))}.cat-tab.cat-tab-active::after{opacity:1}";
+const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 rgb(var(--cat-border-color, 235, 236, 240))}:host([hidden]){display:none}:host([tabs-align=center]){justify-content:center}:host([tabs-align=right]){justify-content:end}:host([tabs-align=justify]) cat-button{flex:1 0 auto}.cat-tab{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;transition:none}.cat-tab:first-of-type{margin-left:-0.75rem}.cat-tab:last-of-type{margin-right:-0.75rem}.cat-tab::after{opacity:0;content:\"\";position:absolute;background:currentColor;left:0.75rem;right:0.75rem;bottom:0;height:2px}.cat-tab:hover::after{opacity:0.25}.cat-tab.cat-tab-active{font-weight:700;color:rgb(var(--cat-primary-text-active, 2, 99, 113))}.cat-tab.cat-tab-error{color:rgb(var(--cat-danger-text-active, 174, 42, 10))}.cat-tab.cat-tab-active::after{opacity:1}";
 
 const CatTabs$1 = /*@__PURE__*/ proxyCustomElement(class CatTabs extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.catChange = createEvent(this, "catChange", 7);
-    this.tabs = [];
-    this.activeTab = '';
-    this.tabsAlign = 'left';
-  }
-  componentWillLoad() {
-    this.syncTabs();
-  }
-  componentDidLoad() {
-    this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs());
-    this.mutationObserver?.observe(this.hostElement, {
-      childList: true,
-      attributes: true,
-      subtree: true
-    });
-  }
-  disconnectedCallback() {
-    this.mutationObserver?.disconnect();
-  }
-  onActiveTabChange(id) {
-    const index = this.tabs.findIndex(tab => tab.id === id);
-    this.catChange.emit({ id, index });
-  }
-  onKeydown(event) {
-    if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
-      const elements = this.hostElement.shadowRoot?.querySelectorAll('cat-button[role="tab"]');
-      const targetElements = Array.from(elements ?? []).filter(button => !button.disabled);
-      const activeElement = this.hostElement.shadowRoot?.activeElement;
-      const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
-      const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
-      const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
-      targetElements[targetIdx].doFocus();
-      event.preventDefault();
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.catChange = createEvent(this, "catChange", 7);
+        this.tabs = [];
+        this.activeTab = '';
+        this.tabsAlign = 'left';
     }
-  }
-  /**
-   * Activates the tab with the given id.
-   *
-   * @param id The tab id.
-   */
-  async setActive(id) {
-    this.activate(this.tabs.find(tab => tab.id === id));
-  }
-  /**
-   * Activates the tab with the given index.
-   *
-   * @param index The tab index.
-   */
-  async setActiveIndex(index) {
-    this.activate(this.tabs[index]);
-  }
-  render() {
-    return (h(Host, null, this.tabs.map((tab) => {
-      return (h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
-          'cat-tab': true,
-          'cat-tab-active': tab.id === this.activeTab
-        }, active: tab.id === this.activeTab, color: tab.id === this.activeTab ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => this.activate(tab), nativeAttributes: { ...tab.nativeAttributes }, nativeContentAttributes: { 'data-text': tab.label }, "data-dropdown-no-close": true }, tab.label));
-    })));
-  }
-  syncTabs() {
-    this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
-    this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab))[0]?.id;
-  }
-  canActivate(tab) {
-    return !!tab && !tab.deactivated && !tab.url && tab.id !== this.activeTab;
-  }
-  activate(tab) {
-    if (this.canActivate(tab)) {
-      this.activeTab = tab.id;
+    componentWillLoad() {
+        this.syncTabs();
     }
-  }
-  get hostElement() { return this; }
-  static get watchers() { return {
-    "activeTab": ["onActiveTabChange"]
-  }; }
-  static get style() { return catTabsCss; }
+    componentDidLoad() {
+        this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs());
+        this.mutationObserver?.observe(this.hostElement, {
+            childList: true,
+            attributes: true,
+            subtree: true
+        });
+    }
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+    }
+    onActiveTabChange(id) {
+        const index = this.tabs.findIndex(tab => tab.id === id);
+        this.catChange.emit({ id, index });
+    }
+    onKeydown(event) {
+        if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
+            const elements = this.hostElement.shadowRoot?.querySelectorAll('cat-button[role="tab"]');
+            const targetElements = Array.from(elements ?? []).filter(button => !button.disabled);
+            const activeElement = this.hostElement.shadowRoot?.activeElement;
+            const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
+            const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
+            const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
+            targetElements[targetIdx].doFocus();
+            event.preventDefault();
+        }
+    }
+    /**
+     * Activates the tab with the given id.
+     *
+     * @param id The tab id.
+     */
+    async setActive(id) {
+        this.activate(this.tabs.find(tab => tab.id === id));
+    }
+    /**
+     * Activates the tab with the given index.
+     *
+     * @param index The tab index.
+     */
+    async setActiveIndex(index) {
+        this.activate(this.tabs[index]);
+    }
+    render() {
+        return (h(Host, null, this.tabs.map((tab) => {
+            return (h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
+                    'cat-tab': true,
+                    'cat-tab-active': tab.id === this.activeTab,
+                    'cat-tab-error': tab.error
+                }, active: tab.id === this.activeTab, color: tab.error ? 'danger' : tab.id === this.activeTab ? 'primary' : 'secondary', variant: "text", icon: tab.icon ? (tab.error ? '$cat:input-error' : tab.icon) : undefined, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => this.click(tab), nativeAttributes: { ...tab.nativeAttributes }, nativeContentAttributes: { 'data-text': tab.label }, "data-dropdown-no-close": true }, tab.label));
+        })));
+    }
+    syncTabs() {
+        this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
+        this.activeTab = this.activeTab || this.tabs.filter(tab => this.canActivate(tab))[0]?.id;
+    }
+    canActivate(tab) {
+        return !!tab && !tab.deactivated && !tab.url && tab.id !== this.activeTab;
+    }
+    click(tab) {
+        if (this.canActivate(tab)) {
+            tab.click();
+            this.activate(tab);
+        }
+    }
+    activate(tab) {
+        if (this.canActivate(tab)) {
+            this.activeTab = tab.id;
+        }
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "activeTab": ["onActiveTabChange"]
+    }; }
+    static get style() { return catTabsCss; }
 }, [1, "cat-tabs", {
-    "activeTab": [1537, "active-tab"],
-    "tabsAlign": [1, "tabs-align"],
-    "tabs": [32],
-    "setActive": [64],
-    "setActiveIndex": [64]
-  }, [[0, "keydown", "onKeydown"]], {
-    "activeTab": ["onActiveTabChange"]
-  }]);
+        "activeTab": [1537, "active-tab"],
+        "tabsAlign": [1, "tabs-align"],
+        "tabs": [32],
+        "setActive": [64],
+        "setActiveIndex": [64]
+    }, [[0, "keydown", "onKeydown"]], {
+        "activeTab": ["onActiveTabChange"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-tabs", "cat-button", "cat-icon", "cat-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-tabs":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatTabs$1);
-      }
-      break;
-    case "cat-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "cat-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "cat-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-tabs", "cat-button", "cat-icon", "cat-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatTabs$1);
+            }
+            break;
+        case "cat-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "cat-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "cat-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const CatTabs = CatTabs$1;