@haiilo/catalyst 1.2.1 → 1.2.2

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

@@ -17,7 +17,7 @@
 }
 
 :host-context(.cat-error) .hint-section {
-  color: #d9340d;
+  color: rgb(var(--cat-danger-text, 217, 52, 13));
 }
 
 :host {
@@ -68,7 +68,7 @@ input {
   width: 2rem;
   height: 1.25rem;
   border-radius: 10rem;
-  background-color: #d7dbe0;
+  background-color: rgb(var(--cat-border-color-focus, 215, 219, 224));
   transition: background-color 0.13s ease;
   pointer-events: none;
 }
@@ -96,13 +96,13 @@ input {
 }
 
 :host(.cat-error) .toggle {
-  background-color: rgba(217, 52, 13, 0.2);
+  background-color: rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
 }
 :host(.cat-error) :checked + .toggle {
-  background-color: #d9340d;
+  background-color: rgb(var(--cat-danger-bg, 217, 52, 13));
 }
 :host(.cat-error) :checked + .toggle::after {
-  background: white;
+  background: rgb(var(--cat-danger-fill, 255, 255, 255));
 }
 
 .label {

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

@@ -16,9 +16,9 @@
   font-size: 0.875rem;
   line-height: 1rem;
   font-weight: 500;
-  background-color: black;
-  border-radius: 0.25rem;
-  color: white;
+  background-color: rgb(var(--cat-bg-tooltip, 0, 0, 0));
+  border-radius: var(--cat-border-radius-m, 0.25rem);
+  color: rgb(var(--cat-font-color-tooltip, 255, 255, 255));
   transition: opacity 0.25s linear, visibility 0.25s linear;
   visibility: hidden;
   opacity: 0;

package/dist/collection/scss/_mixins.scss

@@ -3,7 +3,6 @@
 @forward 'utils/elevation.mixins';
 @forward 'utils/media.mixins';
 @forward 'utils/sizing.mixins';
-@forward 'utils/spacing.mixins';
 @forward 'utils/typography.mixins';
 @forward 'utils/visibility.mixins';
 @forward 'utils/ratio.mixins';

package/dist/collection/scss/_variables.scss

@@ -5,8 +5,8 @@
 // -- Spacings
 // --------
 
-$cat-head-margin-bottom: cat-token('size.spacing.s');
-$cat-body-margin-bottom: cat-token('size.spacing.m');
+$cat-head-margin-bottom: 0.5rem;
+$cat-body-margin-bottom: 1rem;
 $cat-nav-padding-horizontal: 1.25rem;
 
 // --------

package/dist/collection/scss/_variables.tokens.scss

@@ -77,8 +77,12 @@
   @if not $value {
     @error 'Unknown token "#{-cat-join($key, '.')}".';
   }
-  @if $wrap and string.index($key, 'color.') == 1 {
-    @return cat-token-wrap($value, $alpha);
+  @if string.index($key, 'color.') == 1 {
+    @if $wrap {
+      @return cat-token-wrap($value, $alpha);
+    } @else if $alpha < 1 {
+      @return $value, $alpha;
+    }
   }
   @return $value;
 }

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

@@ -163,31 +163,61 @@ dd {
 
 // ----- blockquotes & figures
 
-blockquote {
-  font-style: italic;
-  @include cat-body('l');
+:where(blockquote, figure) {
+  margin: 0 0 $cat-body-margin-bottom;
   color: cat-token('color.ui.font.quote');
+}
+
+blockquote {
+  padding: 0.5rem 0 0.5rem calc(2rem - 4px);
+  border-left: 4px solid cat-token('color.ui.border.default');
+  @include cat-body('l', null);
 
   > :last-child {
     margin-bottom: 0 !important;
   }
 }
 
+figcaption {
+  @include cat-body('s');
+
+  &::before {
+    content: '\2014\00A0'; // em dash, nbsp
+  }
+
+  a {
+    color: inherit;
+  }
+}
+
 figure {
-  figcaption {
-    margin-top: -$cat-body-margin-bottom * 0.5;
+  padding: 0.5rem 0 0.5rem calc(2rem - 4px);
+  border-left: 4px solid cat-token('color.ui.border.default');
+
+  blockquote {
     margin-bottom: 0;
-    @include cat-body('s');
-    color: cat-token('color.ui.font.muted');
+    padding: 0;
+    border: none;
+  }
 
-    &::before {
-      content: '\2014\00A0'; // em dash, nbsp
-    }
+  figcaption {
+    margin-top: $cat-body-margin-bottom;
   }
 }
 
-:where(blockquote, figure) {
-  margin: 0 0 $cat-body-margin-bottom;
+blockquote.cat-text-center,
+figure.cat-text-center {
+  padding-left: 2rem;
+  padding-right: 2rem;
+  border-left: none;
+}
+
+blockquote.cat-text-right,
+figure.cat-text-right {
+  padding-left: 0;
+  padding-right: calc(2rem - 4px);
+  border-left: none;
+  border-right: 4px solid cat-token('color.ui.border.default');
 }
 
 // ----- code

package/dist/collection/scss/utils/_disabled.mixins.scss

@@ -3,5 +3,4 @@
 @mixin cat-disabled() {
   cursor: not-allowed;
   opacity: cat-token('opacity.disabled');
-  filter: grayscale(100%);
 }

package/dist/collection/scss/utils/_spacing.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../variables' as *;
-@use 'spacing.mixins' as *;
 
 $-spacings: map.merge(
   (

package/dist/components/cat-alert.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { s as setAttributeDefault, a as setPropertyDefault } from './setDefault.js';
 import { d as defineCustomElement$2 } from './cat-icon2.js';
 
-const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius: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(105, 118, 135, 0.1)}:host([color=secondary]) cat-icon{color:#697687}:host([color=success]){background-color:rgba(0, 132, 88, 0.1)}:host([color=success]) cat-icon{color:#008458}:host([color=warning]){background-color:rgba(255, 206, 128, 0.1)}:host([color=warning]) cat-icon{color:#ebb663}:host([color=danger]){background-color:rgba(217, 52, 13, 0.1)}:host([color=danger]) cat-icon{color:#d9340d}";
+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}";
 
 const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"cat-alert.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,44BAA44B;;MCYn5BA,UAAQ;EALrB;;;;IAMmB,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,cAAc,CAAC;MAC7B,CAAC,SAAS,EAAE,qBAAqB,CAAC;MAClC,CAAC,SAAS,EAAE,eAAe,CAAC;MAC5B,CAAC,QAAQ,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACc,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;MACvB,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,SAAS,EAAE,OAAO,CAAC;MACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;;;;IAOK,UAAK,GAA+D,SAAS,CAAC;;;;IAU9E,WAAM,GAAG,KAAK,CAAC;GAkBxB;EAhBC,iBAAiB;IACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;IACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAChE,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;GACnC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAC3G,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["./src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","./src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n// -----\n\n$-icon-colors: (\n  'primary': cat-token('color.theme.primary.text'),\n  'secondary': cat-token('color.base.neutral.400'),\n  'success': cat-token('color.base.green.400'),\n  'warning': cat-token('color.base.orange.400'),\n  'danger': cat-token('color.base.red.400')\n);\n\n// -----\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg', 0.1);\n\n    cat-icon {\n      color: map.get($-icon-colors, $theme);\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault, setPropertyDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', 'star-circle-filled'],\n    ['secondary', 'clock-filled'],\n    ['success', 'check-circle-filled'],\n    ['warning', 'danger-filled'],\n    ['danger', 'cross-circle-filled']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n    setPropertyDefault(this, 'color');\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon ? this.icon : this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-alert.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,sgCAAsgC;;MCY7gCA,UAAQ;EALrB;;;;IAMmB,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,cAAc,CAAC;MAC7B,CAAC,SAAS,EAAE,qBAAqB,CAAC;MAClC,CAAC,SAAS,EAAE,eAAe,CAAC;MAC5B,CAAC,QAAQ,EAAE,qBAAqB,CAAC;KAClC,CAAC,CAAC;IACc,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;MACvB,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,SAAS,EAAE,OAAO,CAAC;MACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;;;;IAOK,UAAK,GAA+D,SAAS,CAAC;;;;IAU9E,WAAM,GAAG,KAAK,CAAC;GAkBxB;EAhBC,iBAAiB;IACf,mBAAmB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;IACzC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAChE,kBAAkB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;GACnC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,CAAC,IAAI,CAAC,MAAM,IAAI,gBAAU,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAa,EAC3G,WAAK,KAAK,EAAC,SAAS,IAClB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatAlert"],"sources":["./src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","./src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n// -----\n\n$-icon-colors: (\n  'primary': cat-token('color.theme.primary.text'),\n  'secondary': cat-token('color.base.neutral.400'),\n  'success': cat-token('color.base.green.400'),\n  'warning': cat-token('color.base.orange.400'),\n  'danger': cat-token('color.base.red.400')\n);\n\n// -----\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\n  margin-bottom: $cat-body-margin-bottom;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid cat-token('color.ui.border.focus');\n  outline-offset: 1px;\n}\n\n.content {\n  align-self: center;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// ----- theme\n\n@mixin theme($theme) {\n  :host([color='#{$theme}']) {\n    background-color: cat-token('color.theme.#{$theme}.bg', 0.1);\n\n    cat-icon {\n      color: map.get($-icon-colors, $theme);\n    }\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault, setPropertyDefault } from '../../utils/setDefault';\n\n/**\n * Informs user about important changes or conditions in the interface. Use this\n * component if you need to capture user’s attention in a prominent way.\n */\n@Component({\n  tag: 'cat-alert',\n  styleUrl: 'cat-alert.scss',\n  shadow: true\n})\nexport class CatAlert {\n  private readonly mapIcon: Map<string, string> = new Map([\n    ['primary', 'star-circle-filled'],\n    ['secondary', 'clock-filled'],\n    ['success', 'check-circle-filled'],\n    ['warning', 'danger-filled'],\n    ['danger', 'cross-circle-filled']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['success', 'status'],\n    ['warning', 'alert'],\n    ['danger', 'alert']\n  ]);\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The color palette of the alert.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'primary';\n\n  /**\n   * The name of an icon to be displayed in the alert.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the icon of the alert is deactivated.\n   */\n  @Prop() noIcon = false;\n\n  connectedCallback() {\n    setAttributeDefault(this, 'tabindex', 0);\n    setAttributeDefault(this, 'role', this.mapRole.get(this.color));\n    setPropertyDefault(this, 'color');\n  }\n\n  render() {\n    return (\n      <Host>\n        {!this.noIcon && <cat-icon size=\"l\" icon={this.icon ? this.icon : this.mapIcon.get(this.color)}></cat-icon>}\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-avatar2.js

@@ -17,7 +17,7 @@ const loadImg = (src) => {
   });
 };
 
-const catAvatarCss = ":host{display:contents}:host([hidden]){display:none}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:0.25rem;text-decoration:inherit;color:var(--cat-avatar-fill, white);background-color:var(--cat-avatar-bg, #697687);background-size:cover;background-position:center;white-space:nowrap;overflow:hidden;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.avatar:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.avatar-round{border-radius:50%}.avatar-xs{width:var(--cat-avatar-size, 1.5rem);height:var(--cat-avatar-size, 1.5rem);line-height:var(--cat-avatar-size, 1.5rem);font-size:var(--cat-avatar-font-size, 0.75rem)}.avatar-s{width:var(--cat-avatar-size, 2rem);height:var(--cat-avatar-size, 2rem);line-height:var(--cat-avatar-size, 2rem);font-size:var(--cat-avatar-font-size, 0.875rem)}.avatar-m{width:var(--cat-avatar-size, 2.5rem);height:var(--cat-avatar-size, 2.5rem);line-height:var(--cat-avatar-size, 2.5rem);font-size:var(--cat-avatar-font-size, 0.9375rem)}.avatar-l{width:var(--cat-avatar-size, 3rem);height:var(--cat-avatar-size, 3rem);line-height:var(--cat-avatar-size, 3rem);font-size:var(--cat-avatar-font-size, 1.125rem)}.avatar-xl{width:var(--cat-avatar-size, 3.5rem);height:var(--cat-avatar-size, 3.5rem);line-height:var(--cat-avatar-size, 3.5rem);font-size:var(--cat-avatar-font-size, 1.25rem)}";
+const catAvatarCss = ":host{display:contents}:host([hidden]){display:none}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:inherit;color:var(--cat-avatar-fill, white);background-color:var(--cat-avatar-bg, #697687);background-size:cover;background-position:center;white-space:nowrap;overflow:hidden;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.avatar:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.avatar-round{border-radius:50%}.avatar-xs{width:var(--cat-avatar-size, 1.5rem);height:var(--cat-avatar-size, 1.5rem);line-height:var(--cat-avatar-size, 1.5rem);font-size:var(--cat-avatar-font-size, 0.75rem)}.avatar-s{width:var(--cat-avatar-size, 2rem);height:var(--cat-avatar-size, 2rem);line-height:var(--cat-avatar-size, 2rem);font-size:var(--cat-avatar-font-size, 0.875rem)}.avatar-m{width:var(--cat-avatar-size, 2.5rem);height:var(--cat-avatar-size, 2.5rem);line-height:var(--cat-avatar-size, 2.5rem);font-size:var(--cat-avatar-font-size, 0.9375rem)}.avatar-l{width:var(--cat-avatar-size, 3rem);height:var(--cat-avatar-size, 3rem);line-height:var(--cat-avatar-size, 3rem);font-size:var(--cat-avatar-font-size, 1.125rem)}.avatar-xl{width:var(--cat-avatar-size, 3.5rem);height:var(--cat-avatar-size, 3.5rem);line-height:var(--cat-avatar-size, 3.5rem);font-size:var(--cat-avatar-font-size, 1.25rem)}";
 
 const CatAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"cat-avatar2.js","mappings":";;;;AAAA;;;;;;AAMA,MAAM,OAAO,GAAG,CAAC,GAAW;EAC1B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;IACjC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;IAC1B,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;GACjB,CAAC,CAAC;AACL,CAAC;;ACbD,MAAM,YAAY,GAAG,u5CAAu5C;;MCY/5C,SAAS;EALtB;;;;;;;IAWU,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,EAAE,CAAC;GA4FpB;EAhEC,YAAY,CAAC,KAAc;IACzB,IAAI,KAAK,EAAE;MACT,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CACjB,OAAO,IAAI,CAAC,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,EAC9C,OAAO,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,CACzC,CAAC;KACH;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;KAClC;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC7B;EAED,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACfA,QAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACvD;GACF;EAED,MAAM;IACJ,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,QACE,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IAC1G,IAAI,CAAC,OAAO,CACX,EACJ;KACH;SAAM;MACL,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IACrE,IAAI,CAAC,OAAO,CACR,EACP;KACH;GACF;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,IAAI,CAAC,eAAe;QACxB,CAAC,IAAI,CAAC,IAAI,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC1F,EAAE,CAAC;GACR;EAED,IAAY,QAAQ;IAClB,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;GACrD;EAED,IAAY,QAAQ;IAClB,OAAO;MACL,MAAM,EAAE,IAAI;MACZ,cAAc,EAAE,IAAI,CAAC,KAAK;MAC1B,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC5C,CAAC;GACH;EAEO,WAAW;;IACjB,QACE,MAAA,IAAI,CAAC,QAAQ,mCACb,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE;OACd,KAAK,CAAC,GAAG,CAAC;OACV,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;OACd,IAAI,CAAC,EAAE,CAAC,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["log"],"sources":["./src/utils/load-img.ts","./src/components/cat-avatar/cat-avatar.scss?tag=cat-avatar&encapsulation=shadow","./src/components/cat-avatar/cat-avatar.tsx"],"sourcesContent":["/**\n * Loads an image and wraps the result in a promise.\n *\n * @param src the image URL\n * @returns a promise\n */\nconst loadImg = (src: string): Promise<Event> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', resolve);\n    image.addEventListener('error', reject);\n    image.src = src;\n  });\n};\n\nexport default loadImg;\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n// -----\n\n$-background-color: cat-token('color.base.neutral.400');\n$-color: cat-token('color.base.neutral.0');\n$-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n// -----\n\n:host {\n  /**\n   * @prop --cat-avatar-bg: The background color of the avatar.\n   * @prop --cat-avatar-fill: The text color of the avatar.\n   * @prop --cat-avatar-size: The size of the avatar.\n   * @prop --cat-avatar-font-size: The font size of the avatar.\n   */\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('m');\n  text-decoration: inherit;\n  color: var(--cat-avatar-fill, $-color);\n  background-color: var(--cat-avatar-bg, $-background-color);\n  background-size: cover;\n  background-position: center;\n  white-space: nowrap;\n  overflow: hidden;\n  vertical-align: middle;\n  @include cat-select(none);\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.avatar-round {\n  border-radius: 50%;\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .avatar-#{$size} {\n    width: var(--cat-avatar-size, map.get($-sizes, $size));\n    height: var(--cat-avatar-size, map.get($-sizes, $size));\n    line-height: var(--cat-avatar-size, map.get($-sizes, $size));\n    font-size: var(--cat-avatar-font-size, cat-body-font-size($fontSize));\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 's');\n@include size('m', 'm');\n@include size('l', 'l');\n@include size('xl', 'xl');\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport loadImg from '../../utils/load-img';\n\n/**\n * Avatars are used to represent a person or object.\n */\n@Component({\n  tag: 'cat-avatar',\n  styleUrl: 'cat-avatar.scss',\n  shadow: true\n})\nexport class CatAvatar {\n  @State() backgroundImage?: string;\n\n  /**\n   * The size of the avatar.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round avatar edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The label of the avatar.\n   */\n  @Prop() label = '';\n\n  /**\n   * Custom initials for the avatar.\n   */\n  @Prop() initials?: string;\n\n  /**\n   * An optional avatar image.\n   */\n  @Prop() src?: string;\n\n  /**\n   * An icon to be used instead of the initials.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  @Watch('src')\n  onSrcChanged(value?: string): void {\n    if (value) {\n      loadImg(value).then(\n        () => (this.backgroundImage = `url(${value})`),\n        () => (this.backgroundImage = undefined)\n      );\n    } else {\n      this.backgroundImage = undefined;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.onSrcChanged(this.src);\n  }\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.warn('[A11y] Missing ARIA label on avatar', this);\n    }\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a href={this.url} target={this.urlTarget} style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <span style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </span>\n      );\n    }\n  }\n\n  private get content() {\n    return !this.backgroundImage\n      ? [this.icon ? <cat-icon icon={this.icon} size={this.size}></cat-icon> : this.getInitials()]\n      : [];\n  }\n\n  private get cssStyle() {\n    return { 'background-image': this.backgroundImage };\n  }\n\n  private get cssClass() {\n    return {\n      avatar: true,\n      'avatar-round': this.round,\n      [`avatar-${this.size}`]: Boolean(this.size)\n    };\n  }\n\n  private getInitials(): string {\n    return (\n      this.initials ??\n      (this.label ?? '')\n        .split(' ')\n        .map(n => n[0])\n        .join('')\n    );\n  }\n}\n"],"version":3}
+{"file":"cat-avatar2.js","mappings":";;;;AAAA;;;;;;AAMA,MAAM,OAAO,GAAG,CAAC,GAAW;EAC1B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;IACjC,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;IAC1B,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACxC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;GACjB,CAAC,CAAC;AACL,CAAC;;ACbD,MAAM,YAAY,GAAG,m7CAAm7C;;MCY37C,SAAS;EALtB;;;;;;;IAWU,SAAI,GAAkC,GAAG,CAAC;;;;IAK1C,UAAK,GAAG,KAAK,CAAC;;;;IAKd,UAAK,GAAG,EAAE,CAAC;GA4FpB;EAhEC,YAAY,CAAC,KAAc;IACzB,IAAI,KAAK,EAAE;MACT,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,CACjB,OAAO,IAAI,CAAC,eAAe,GAAG,OAAO,KAAK,GAAG,CAAC,EAC9C,OAAO,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC,CACzC,CAAC;KACH;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;KAClC;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC7B;EAED,mBAAmB;IACjB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACfA,QAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACvD;GACF;EAED,MAAM;IACJ,IAAI,IAAI,CAAC,GAAG,EAAE;MACZ,QACE,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IAC1G,IAAI,CAAC,OAAO,CACX,EACJ;KACH;SAAM;MACL,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,IACrE,IAAI,CAAC,OAAO,CACR,EACP;KACH;GACF;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,IAAI,CAAC,eAAe;QACxB,CAAC,IAAI,CAAC,IAAI,GAAG,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC1F,EAAE,CAAC;GACR;EAED,IAAY,QAAQ;IAClB,OAAO,EAAE,kBAAkB,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC;GACrD;EAED,IAAY,QAAQ;IAClB,OAAO;MACL,MAAM,EAAE,IAAI;MACZ,cAAc,EAAE,IAAI,CAAC,KAAK;MAC1B,CAAC,UAAU,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAC5C,CAAC;GACH;EAEO,WAAW;;IACjB,QACE,MAAA,IAAI,CAAC,QAAQ,mCACb,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE;OACd,KAAK,CAAC,GAAG,CAAC;OACV,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;OACd,IAAI,CAAC,EAAE,CAAC,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["log"],"sources":["./src/utils/load-img.ts","./src/components/cat-avatar/cat-avatar.scss?tag=cat-avatar&encapsulation=shadow","./src/components/cat-avatar/cat-avatar.tsx"],"sourcesContent":["/**\n * Loads an image and wraps the result in a promise.\n *\n * @param src the image URL\n * @returns a promise\n */\nconst loadImg = (src: string): Promise<Event> => {\n  return new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', resolve);\n    image.addEventListener('error', reject);\n    image.src = src;\n  });\n};\n\nexport default loadImg;\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n// -----\n\n$-background-color: cat-token('color.base.neutral.400');\n$-color: cat-token('color.base.neutral.0');\n$-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n// -----\n\n:host {\n  /**\n   * @prop --cat-avatar-bg: The background color of the avatar.\n   * @prop --cat-avatar-fill: The text color of the avatar.\n   * @prop --cat-avatar-size: The size of the avatar.\n   * @prop --cat-avatar-font-size: The font size of the avatar.\n   */\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: cat-border-radius('m');\n  text-decoration: inherit;\n  color: var(--cat-avatar-fill, $-color);\n  background-color: var(--cat-avatar-bg, $-background-color);\n  background-size: cover;\n  background-position: center;\n  white-space: nowrap;\n  overflow: hidden;\n  vertical-align: middle;\n  @include cat-select(none);\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n.avatar-round {\n  border-radius: 50%;\n}\n\n// ----- size\n\n@mixin size($size, $fontSize) {\n  .avatar-#{$size} {\n    width: var(--cat-avatar-size, map.get($-sizes, $size));\n    height: var(--cat-avatar-size, map.get($-sizes, $size));\n    line-height: var(--cat-avatar-size, map.get($-sizes, $size));\n    font-size: var(--cat-avatar-font-size, cat-body-font-size($fontSize));\n  }\n}\n\n@include size('xs', 'xs');\n@include size('s', 's');\n@include size('m', 'm');\n@include size('l', 'l');\n@include size('xl', 'xl');\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport loadImg from '../../utils/load-img';\n\n/**\n * Avatars are used to represent a person or object.\n */\n@Component({\n  tag: 'cat-avatar',\n  styleUrl: 'cat-avatar.scss',\n  shadow: true\n})\nexport class CatAvatar {\n  @State() backgroundImage?: string;\n\n  /**\n   * The size of the avatar.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * Use round avatar edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * The label of the avatar.\n   */\n  @Prop() label = '';\n\n  /**\n   * Custom initials for the avatar.\n   */\n  @Prop() initials?: string;\n\n  /**\n   * An optional avatar image.\n   */\n  @Prop() src?: string;\n\n  /**\n   * An icon to be used instead of the initials.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  @Watch('src')\n  onSrcChanged(value?: string): void {\n    if (value) {\n      loadImg(value).then(\n        () => (this.backgroundImage = `url(${value})`),\n        () => (this.backgroundImage = undefined)\n      );\n    } else {\n      this.backgroundImage = undefined;\n    }\n  }\n\n  componentWillLoad(): void {\n    this.onSrcChanged(this.src);\n  }\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.warn('[A11y] Missing ARIA label on avatar', this);\n    }\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a href={this.url} target={this.urlTarget} style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <span style={this.cssStyle} class={this.cssClass} aria-label={this.label}>\n          {this.content}\n        </span>\n      );\n    }\n  }\n\n  private get content() {\n    return !this.backgroundImage\n      ? [this.icon ? <cat-icon icon={this.icon} size={this.size}></cat-icon> : this.getInitials()]\n      : [];\n  }\n\n  private get cssStyle() {\n    return { 'background-image': this.backgroundImage };\n  }\n\n  private get cssClass() {\n    return {\n      avatar: true,\n      'avatar-round': this.round,\n      [`avatar-${this.size}`]: Boolean(this.size)\n    };\n  }\n\n  private getInitials(): string {\n    return (\n      this.initials ??\n      (this.label ?? '')\n        .split(' ')\n        .map(n => n[0])\n        .join('')\n    );\n  }\n}\n"],"version":3}

package/dist/components/cat-badge.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { a as setPropertyDefault } 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: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:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}:host([color=success]){--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}:host([color=warning]){--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}:host([color=danger]){--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border: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)}}";
+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)}}";
 
 const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"cat-badge.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,wpEAAwpE;;MCY/pEA,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;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}

package/dist/components/cat-button2.js

@@ -118,7 +118,7 @@ function createEmptyStyleRule(query) {
   }
 }
 
-const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-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);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 83, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 83, 113)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xs]){margin:-0.25rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.25rem;margin-bottom:-0.25rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.25rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.25rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
+const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:var(--cat-opacity-disabled, 0.65)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:235, 236, 240;--fill:var(--cat-font-color-muted, 105, 118, 135)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 105, 118, 135);--text:var(--cat-font-color-muted, 105, 118, 135)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 105, 118, 135)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-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);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 83, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 83, 113)}.cat-button-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);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-catsecondary-text-active, 0, 0, 0)}.cat-button-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);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-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);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-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);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-catdanger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xs]){margin:-0.25rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.25rem;margin-bottom:-0.25rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.25rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.25rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
 
 const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"cat-button2.js","mappings":"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","names":["log"],"sources":["./src/utils/breakpoints.ts","./src/utils/platform.ts","./src/utils/media-matcher.ts","./src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","./src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = typeof _breakpoints[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n  xs: '(max-width: 539.98px)',\n  s: '(max-width: 767.98px)',\n  m: '(max-width: 991.98px)',\n  l: '(max-width: 1199.98px)',\n  xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n  return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n  hasV8BreakIterator = false;\n}\n\nexport class Platform {\n  /** Whether the current browser is Microsoft Edge. */\n  EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n  /** Whether the current rendering engine is Microsoft Trident. */\n  TRIDENT: boolean = /(msie|trident)/i.test(navigator.userAgent);\n\n  // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n  /** Whether the current rendering engine is Blink. */\n  BLINK: boolean =\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    !!((window as any).chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n  // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n  // ensure that Webkit runs standalone and is not used as another engine's base.\n  /** Whether the current rendering engine is WebKit. */\n  WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n  /** Whether the current platform is Apple iOS. */\n  IOS: boolean = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n  // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n  // them self as Gecko-like browsers and modify the userAgent's according to that.\n  // Since we only cover one explicit Firefox case, we can simply check for Firefox\n  // instead of having an unstable check for Gecko.\n  /** Whether the current browser is Firefox. */\n  FIREFOX: boolean = /(firefox|minefield)/i.test(navigator.userAgent);\n\n  /** Whether the current platform is Android. */\n  // Trident on mobile adds the android platform to the userAgent to trick detections.\n  ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n  // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n  // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n  // Safari browser should also use Webkit as its layout engine.\n  /** Whether the current browser is Safari. */\n  SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/** Global registry for all dynamically-created, injected media queries. */\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/** Style tag that holds all of the dynamically-created media queries. */\nlet mediaQueryStyleNode: HTMLStyleElement | undefined;\n\n/** A utility for calling matchMedia queries. */\nexport class MediaMatcher {\n  private _platform;\n  private _matchMedia: (query: string) => MediaQueryList;\n\n  constructor() {\n    this._platform = new Platform();\n    this._matchMedia = window.matchMedia.bind(window);\n  }\n\n  /**\n   * Evaluates the given media query and returns the native MediaQueryList from which results\n   * can be retrieved.\n   * Confirms the layout engine will trigger for the selector query provided and returns the\n   * MediaQueryList for the query provided.\n   */\n  matchMedia(query: string): MediaQueryList {\n    if (this._platform.WEBKIT || this._platform.BLINK) {\n      createEmptyStyleRule(query);\n    }\n    return this._matchMedia(query);\n  }\n}\n\n/**\n * Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n */\nfunction createEmptyStyleRule(query: string) {\n  if (mediaQueriesForWebkitCompatibility.has(query)) {\n    return;\n  }\n\n  try {\n    if (!mediaQueryStyleNode) {\n      mediaQueryStyleNode = document.createElement('style');\n      mediaQueryStyleNode.setAttribute('type', 'text/css');\n      document.head.appendChild(mediaQueryStyleNode);\n    }\n    if (mediaQueryStyleNode.sheet) {\n      mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n      mediaQueriesForWebkitCompatibility.add(query);\n    }\n  } catch (e) {\n    log.error(e);\n  }\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.cat-button {\n  position: relative;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: cat-border-radius('m');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: color cat-token('time.transition.s') linear, border-color cat-token('time.transition.s') linear,\n    background-color cat-token('time.transition.s') linear, box-shadow cat-token('time.transition.s') linear;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n// ----- content\n\n.cat-button-content {\n  @include cat-break-word;\n\n  .cat-button-ellipsed & {\n    @include cat-ellipsis;\n  }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n  @include cat-disabled;\n}\n\n// ----- round\n\n.cat-button-round {\n  border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n  cursor: default;\n\n  cat-spinner {\n    position: absolute;\n  }\n\n  > *:not(cat-spinner) {\n    visibility: hidden;\n  }\n}\n\n// ----- theme\n\n.cat-button-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: 600;\n  @include cat-font-smooth;\n}\n\n.cat-button-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);\n  color: cat-token-wrap(var(--text));\n\n  &:hover,\n  &.cat-button-active {\n    &:not(.cat-button-disabled):not(.cat-button-loading) {\n      background-color: cat-token-wrap(var(--base), $alpha: 0.05);\n    }\n  }\n\n  &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n  }\n}\n\n.cat-button-text {\n  background-color: transparent;\n  color: cat-token-wrap(var(--text));\n  text-decoration: $cat-link-text-decoration;\n\n  &:hover,\n  &.cat-button-active {\n    &:not(.cat-button-disabled):not(.cat-button-loading) {\n      text-decoration: $cat-button-text-decoration-hover;\n      background-color: rgba(var(--base), 0.05);\n    }\n  }\n}\n\n@mixin theme($theme) {\n  .cat-button-#{$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      --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n\n    &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n    }\n\n    &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n    &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textActive', $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, $padding) {\n  $-line-height: cat-body-line-height($fontSize);\n\n  $-total-height: map.get($button-sizes, $size);\n  $-padding-v: ($-total-height - $-line-height) * 0.5;\n  $-padding-h: $padding;\n\n  .cat-button-#{$size} {\n    min-width: map.get($button-sizes, $size);\n    padding: $-padding-v $-padding-h;\n    @include cat-body($fontSize, null);\n\n    .cat-button-prefix {\n      margin-right: 0.25rem;\n    }\n\n    .cat-button-suffix {\n      margin-left: 0.25rem;\n    }\n\n    // normalize icon size for line height\n    @if $fontSize == 'm' {\n      cat-icon {\n        margin-top: -0.125rem;\n        margin-bottom: -0.125rem;\n      }\n    }\n\n    &.cat-button-icon {\n      width: $-total-height;\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    :host-context(nav) & {\n      padding-left: $cat-nav-padding-horizontal;\n      padding-right: $cat-nav-padding-horizontal;\n    }\n  }\n\n  :host(.cat-button-pull[size='#{$size}']) {\n    margin: $-padding-v * -1 $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-h[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n    margin-right: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-v[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-t[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-l[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-b[size='#{$size}']) {\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-r[size='#{$size}']) {\n    margin-right: $-padding-h * -1;\n  }\n}\n\n:host(.cat-button-pull:not([size])) {\n  margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n  margin-top: -0.625rem;\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n  margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n  margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n  margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem);\n@include size('xl', 'l', 1.25rem);\n\n// ----- context\n\n:host-context(nav) {\n  width: 100%;\n\n  .cat-button {\n    box-shadow: none;\n    border-radius: 0;\n    justify-content: left;\n\n    &:focus-visible {\n      outline-offset: -2px;\n    }\n  }\n}\n\n:host(.cat-text-left) .cat-button {\n  justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n  justify-content: right;\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/**\n * Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n *\n * @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n */\n@Component({\n  tag: 'cat-button',\n  styleUrl: 'cat-button.scss',\n  shadow: true\n})\nexport class CatButton {\n  private button!: HTMLButtonElement | HTMLAnchorElement;\n  private mediaMatcher?: MediaMatcher;\n  private mediaQueryList?: MediaQueryList;\n  private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n  @State() _iconOnly = true;\n\n  /**\n   * The rendering style of the button.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'outlined';\n\n  /**\n   * The color palette of the button.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'secondary';\n\n  /**\n   * Set the button into an active state.\n   */\n  @Prop() active = false;\n\n  /**\n   * The size of the button.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The name of the button, which gets paired with the button's value when\n   * submitted as part of a form. Corresponds with the native HTML name\n   * attribute.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the button, which gets paired with the button's name when\n   * submitted as part of a form. Corresponds with the native HTML value\n   * attribute.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Specifies that the button should be disabled. A disabled button is unusable\n   * and un-clickable. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays the button in a loading state with a spinner. Just like a disabled\n   * button, an inactive button is unusable and un-clickable. However, it\n   * retains the current focus state.\n   */\n  @Prop() loading = false;\n\n  /**\n   * Allows the button to submit a form.\n   */\n  @Prop() submit = false;\n\n  /**\n   * Disables ellipse overflowing button content.\n   */\n  @Prop() noEllipsis = false;\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  /**\n   * The name of an icon to be displayed in the button.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Hide the actual button content and only display the icon.\n   */\n  @Prop() iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * Adds a unique identifier for the button. Please note that with this\n   * particular component this ID is added inside the web component. If you need\n   * an ID on the HTML element, use the regular `id` attribute instead.\n   */\n  @Prop() buttonId?: string;\n\n  /**\n   * Adds accessible label for the button that is only shown for screen\n   * readers. Typically, this label text replaces the visible text on the\n   * button for users who use assistive technology.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  @Watch('iconOnly')\n  onIconOnlyChanged(value: boolean | Breakpoint): void {\n    // teardown\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n    this.mediaQueryList = undefined;\n    this.mediaQueryListener = undefined;\n    // setup\n    if (isBreakpoint(value)) {\n      this.mediaMatcher ??= new MediaMatcher();\n      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n      this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n      this._iconOnly = this.mediaQueryList.matches;\n    } else {\n      this._iconOnly = value;\n    }\n  }\n\n  /**\n   * Emitted when the button is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  /**\n   * Emitted when the button received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  componentWillRender(): void {\n    if (this.isIconButton && !this.a11yLabel) {\n      log.warn('[A11y] Missing ARIA label on icon button', this);\n    }\n  }\n\n  @Listen('click')\n  haltDisabledEvents(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  /**\n   * Sets focus on the button. Use this method instead of `button.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.button.focus(options);\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a\n          ref={el => (this.button = el as HTMLAnchorElement)}\n          href={this.disabled ? undefined : this.url}\n          target={this.urlTarget}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <button\n          ref={el => (this.button = el as HTMLButtonElement)}\n          type={this.submit ? 'submit' : 'button'}\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-active': this.active,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round ?? this.isIconButton,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </button>\n      );\n    }\n  }\n\n  private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 's';\n      default:\n        return 'l';\n    }\n  }\n\n  private get spinnerSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 'xs';\n      default:\n        return 'm';\n    }\n  }\n\n  private get isIconButton() {\n    return Boolean(this.icon) && this._iconOnly;\n  }\n\n  private get hasPrefixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n  }\n\n  private get hasSuffixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n  }\n\n  private get content() {\n    return [\n      this.hasPrefixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-prefix\" part=\"prefix\"></cat-icon>\n      ) : null,\n      this.isIconButton ? (\n        <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n      ) : (\n        <span class=\"cat-button-content\" part=\"content\">\n          <slot></slot>\n        </span>\n      ),\n      this.hasSuffixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-suffix\" part=\"suffix\"></cat-icon>\n      ) : null,\n      this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n    ];\n  }\n\n  private onClick(event: MouseEvent) {\n    this.catClick.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}
+{"file":"cat-button2.js","mappings":"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","names":["log"],"sources":["./src/utils/breakpoints.ts","./src/utils/platform.ts","./src/utils/media-matcher.ts","./src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","./src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = typeof _breakpoints[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n  xs: '(max-width: 539.98px)',\n  s: '(max-width: 767.98px)',\n  m: '(max-width: 991.98px)',\n  l: '(max-width: 1199.98px)',\n  xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n  return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n  hasV8BreakIterator = false;\n}\n\nexport class Platform {\n  /** Whether the current browser is Microsoft Edge. */\n  EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n  /** Whether the current rendering engine is Microsoft Trident. */\n  TRIDENT: boolean = /(msie|trident)/i.test(navigator.userAgent);\n\n  // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n  /** Whether the current rendering engine is Blink. */\n  BLINK: boolean =\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    !!((window as any).chrome || hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n  // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n  // ensure that Webkit runs standalone and is not used as another engine's base.\n  /** Whether the current rendering engine is WebKit. */\n  WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n  /** Whether the current platform is Apple iOS. */\n  IOS: boolean = /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n  // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n  // them self as Gecko-like browsers and modify the userAgent's according to that.\n  // Since we only cover one explicit Firefox case, we can simply check for Firefox\n  // instead of having an unstable check for Gecko.\n  /** Whether the current browser is Firefox. */\n  FIREFOX: boolean = /(firefox|minefield)/i.test(navigator.userAgent);\n\n  /** Whether the current platform is Android. */\n  // Trident on mobile adds the android platform to the userAgent to trick detections.\n  ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n  // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n  // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n  // Safari browser should also use Webkit as its layout engine.\n  /** Whether the current browser is Safari. */\n  SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/** Global registry for all dynamically-created, injected media queries. */\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/** Style tag that holds all of the dynamically-created media queries. */\nlet mediaQueryStyleNode: HTMLStyleElement | undefined;\n\n/** A utility for calling matchMedia queries. */\nexport class MediaMatcher {\n  private _platform;\n  private _matchMedia: (query: string) => MediaQueryList;\n\n  constructor() {\n    this._platform = new Platform();\n    this._matchMedia = window.matchMedia.bind(window);\n  }\n\n  /**\n   * Evaluates the given media query and returns the native MediaQueryList from which results\n   * can be retrieved.\n   * Confirms the layout engine will trigger for the selector query provided and returns the\n   * MediaQueryList for the query provided.\n   */\n  matchMedia(query: string): MediaQueryList {\n    if (this._platform.WEBKIT || this._platform.BLINK) {\n      createEmptyStyleRule(query);\n    }\n    return this._matchMedia(query);\n  }\n}\n\n/**\n * Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n */\nfunction createEmptyStyleRule(query: string) {\n  if (mediaQueriesForWebkitCompatibility.has(query)) {\n    return;\n  }\n\n  try {\n    if (!mediaQueryStyleNode) {\n      mediaQueryStyleNode = document.createElement('style');\n      mediaQueryStyleNode.setAttribute('type', 'text/css');\n      document.head.appendChild(mediaQueryStyleNode);\n    }\n    if (mediaQueryStyleNode.sheet) {\n      mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n      mediaQueriesForWebkitCompatibility.add(query);\n    }\n  } catch (e) {\n    log.error(e);\n  }\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n$button-sizes: (\n  'xl': 3.5rem,\n  'l': 3rem,\n  'm': 2.5rem,\n  's': 2rem,\n  'xs': 1.5rem\n);\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n  @include cat-select(none);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.cat-button {\n  position: relative;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: cat-border-radius('m');\n  text-decoration: none;\n  width: 100%;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: color cat-token('time.transition.s') linear, border-color cat-token('time.transition.s') linear,\n    background-color cat-token('time.transition.s') linear, box-shadow cat-token('time.transition.s') linear;\n\n  &:focus-visible {\n    outline: 2px solid cat-token('color.ui.border.focus');\n    outline-offset: 1px;\n  }\n}\n\n// ----- content\n\n.cat-button-content {\n  @include cat-break-word;\n\n  .cat-button-ellipsed & {\n    @include cat-ellipsis;\n  }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n  @include cat-disabled;\n}\n\n// ----- round\n\n.cat-button-round {\n  border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n  cursor: default;\n\n  cat-spinner {\n    position: absolute;\n  }\n\n  > *:not(cat-spinner) {\n    visibility: hidden;\n  }\n}\n\n// ----- theme\n\n.cat-button-filled {\n  background-color: cat-token-wrap(var(--bg));\n  color: cat-token-wrap(var(--fill));\n  font-weight: 600;\n  @include cat-font-smooth;\n\n  &.cat-button-disabled {\n    --bg: #{cat-token('color.ui.background.muted', $wrap: false)};\n    --fill: #{cat-token('color.ui.font.muted', $wrap: false)};\n  }\n}\n\n.cat-button-outlined {\n  background-color: cat-token('color.ui.background.body');\n  box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);\n  color: cat-token-wrap(var(--text));\n\n  &.cat-button-disabled {\n    --base: #{cat-token('color.ui.font.muted', $wrap: false)};\n    --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n  }\n\n  &:hover,\n  &.cat-button-active {\n    &:not(.cat-button-disabled):not(.cat-button-loading) {\n      background-color: cat-token-wrap(var(--base), $alpha: 0.05);\n    }\n  }\n\n  &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n    background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n  }\n}\n\n.cat-button-text {\n  background-color: transparent;\n  color: cat-token-wrap(var(--text));\n  text-decoration: $cat-link-text-decoration;\n\n  &.cat-button-disabled {\n    --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n  }\n\n  &:hover,\n  &.cat-button-active {\n    &:not(.cat-button-disabled):not(.cat-button-loading) {\n      text-decoration: $cat-button-text-decoration-hover;\n      background-color: rgba(var(--base), 0.05);\n    }\n  }\n}\n\n@mixin theme($theme) {\n  .cat-button-#{$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      --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n    } @else {\n      --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n    }\n\n    &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n    }\n\n    &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n    &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n      --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n      --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n      --text: #{cat-token('color.theme.#{$theme}.textActive', $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, $padding) {\n  $-line-height: cat-body-line-height($fontSize);\n\n  $-total-height: map.get($button-sizes, $size);\n  $-padding-v: ($-total-height - $-line-height) * 0.5;\n  $-padding-h: $padding;\n\n  .cat-button-#{$size} {\n    min-width: map.get($button-sizes, $size);\n    padding: $-padding-v $-padding-h;\n    @include cat-body($fontSize, null);\n\n    .cat-button-prefix {\n      margin-right: 0.25rem;\n    }\n\n    .cat-button-suffix {\n      margin-left: 0.25rem;\n    }\n\n    // normalize icon size for line height\n    @if $fontSize == 'm' {\n      cat-icon {\n        margin-top: -0.125rem;\n        margin-bottom: -0.125rem;\n      }\n    }\n\n    &.cat-button-icon {\n      width: $-total-height;\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    :host-context(nav) & {\n      padding-left: $cat-nav-padding-horizontal;\n      padding-right: $cat-nav-padding-horizontal;\n    }\n  }\n\n  :host(.cat-button-pull[size='#{$size}']) {\n    margin: $-padding-v * -1 $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-h[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n    margin-right: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-v[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-t[size='#{$size}']) {\n    margin-top: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-l[size='#{$size}']) {\n    margin-left: $-padding-h * -1;\n  }\n\n  :host(.cat-button-pull-b[size='#{$size}']) {\n    margin-bottom: $-padding-v * -1;\n  }\n\n  :host(.cat-button-pull-r[size='#{$size}']) {\n    margin-right: $-padding-h * -1;\n  }\n}\n\n:host(.cat-button-pull:not([size])) {\n  margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n  margin-left: -0.75rem;\n  margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n  margin-top: -0.625rem;\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n  margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n  margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n  margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n  margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem);\n@include size('xl', 'l', 1.25rem);\n\n// ----- context\n\n:host-context(nav) {\n  width: 100%;\n\n  .cat-button {\n    box-shadow: none;\n    border-radius: 0;\n    justify-content: left;\n\n    &:focus-visible {\n      outline-offset: -2px;\n    }\n  }\n}\n\n:host(.cat-text-left) .cat-button {\n  justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n  justify-content: right;\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/**\n * Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n *\n * @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n */\n@Component({\n  tag: 'cat-button',\n  styleUrl: 'cat-button.scss',\n  shadow: true\n})\nexport class CatButton {\n  private button!: HTMLButtonElement | HTMLAnchorElement;\n  private mediaMatcher?: MediaMatcher;\n  private mediaQueryList?: MediaQueryList;\n  private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n  @State() _iconOnly = true;\n\n  /**\n   * The rendering style of the button.\n   */\n  @Prop() variant: 'filled' | 'outlined' | 'text' = 'outlined';\n\n  /**\n   * The color palette of the button.\n   */\n  @Prop() color: 'primary' | 'secondary' | 'danger' | 'success' | 'warning' = 'secondary';\n\n  /**\n   * Set the button into an active state.\n   */\n  @Prop() active = false;\n\n  /**\n   * The size of the button.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' = 'm';\n\n  /**\n   * The name of the button, which gets paired with the button's value when\n   * submitted as part of a form. Corresponds with the native HTML name\n   * attribute.\n   */\n  @Prop() name?: string;\n\n  /**\n   * The value of the button, which gets paired with the button's name when\n   * submitted as part of a form. Corresponds with the native HTML value\n   * attribute.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Specifies that the button should be disabled. A disabled button is unusable\n   * and un-clickable. Corresponds with the native HTML disabled attribute.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays the button in a loading state with a spinner. Just like a disabled\n   * button, an inactive button is unusable and un-clickable. However, it\n   * retains the current focus state.\n   */\n  @Prop() loading = false;\n\n  /**\n   * Allows the button to submit a form.\n   */\n  @Prop() submit = false;\n\n  /**\n   * Disables ellipse overflowing button content.\n   */\n  @Prop() noEllipsis = false;\n\n  /**\n   * Use round button edges.\n   */\n  @Prop() round = false;\n\n  /**\n   * A destination to link to, rendered in the href attribute of a link.\n   */\n  @Prop() url?: string;\n\n  /**\n   * Specifies where to open the linked document.\n   */\n  @Prop() urlTarget?: '_blank' | '_self';\n\n  /**\n   * The name of an icon to be displayed in the button.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Hide the actual button content and only display the icon.\n   */\n  @Prop() iconOnly: boolean | Breakpoint = false;\n\n  /**\n   * Display the icon on the right.\n   */\n  @Prop() iconRight = false;\n\n  /**\n   * Adds a unique identifier for the button. Please note that with this\n   * particular component this ID is added inside the web component. If you need\n   * an ID on the HTML element, use the regular `id` attribute instead.\n   */\n  @Prop() buttonId?: string;\n\n  /**\n   * Adds accessible label for the button that is only shown for screen\n   * readers. Typically, this label text replaces the visible text on the\n   * button for users who use assistive technology.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  @Watch('iconOnly')\n  onIconOnlyChanged(value: boolean | Breakpoint): void {\n    // teardown\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n    this.mediaQueryList = undefined;\n    this.mediaQueryListener = undefined;\n    // setup\n    if (isBreakpoint(value)) {\n      this.mediaMatcher ??= new MediaMatcher();\n      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n      this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n      this._iconOnly = this.mediaQueryList.matches;\n    } else {\n      this._iconOnly = value;\n    }\n  }\n\n  /**\n   * Emitted when the button is clicked.\n   */\n  @Event() catClick!: EventEmitter<MouseEvent>;\n\n  /**\n   * Emitted when the button received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the button loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad(): void {\n    this.onIconOnlyChanged(this.iconOnly);\n  }\n\n  componentWillRender(): void {\n    if (this.isIconButton && !this.a11yLabel) {\n      log.warn('[A11y] Missing ARIA label on icon button', this);\n    }\n  }\n\n  @Listen('click')\n  haltDisabledEvents(event: Event): void {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  /**\n   * Sets focus on the button. Use this method instead of `button.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.button.focus(options);\n  }\n\n  render() {\n    if (this.url) {\n      return (\n        <a\n          ref={el => (this.button = el as HTMLAnchorElement)}\n          href={this.disabled ? undefined : this.url}\n          target={this.urlTarget}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </a>\n      );\n    } else {\n      return (\n        <button\n          ref={el => (this.button = el as HTMLButtonElement)}\n          type={this.submit ? 'submit' : 'button'}\n          name={this.name}\n          value={this.value}\n          disabled={this.disabled}\n          aria-disabled={this.disabled ? 'true' : null}\n          aria-label={this.a11yLabel}\n          id={this.buttonId}\n          part=\"button\"\n          class={{\n            'cat-button': true,\n            'cat-button-active': this.active,\n            'cat-button-icon': this.isIconButton,\n            'cat-button-round': this.round ?? this.isIconButton,\n            'cat-button-loading': this.loading,\n            'cat-button-disabled': this.disabled,\n            'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n            [`cat-button-${this.variant}`]: Boolean(this.variant),\n            [`cat-button-${this.color}`]: Boolean(this.color),\n            [`cat-button-${this.size}`]: Boolean(this.size)\n          }}\n          onClick={this.onClick.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        >\n          {this.content}\n        </button>\n      );\n    }\n  }\n\n  private get iconSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 's';\n      default:\n        return 'l';\n    }\n  }\n\n  private get spinnerSize(): 'xs' | 's' | 'm' | 'l' | 'xl' {\n    switch (this.size) {\n      case 'xs':\n        return 'xs';\n      default:\n        return 'm';\n    }\n  }\n\n  private get isIconButton() {\n    return Boolean(this.icon) && this._iconOnly;\n  }\n\n  private get hasPrefixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n  }\n\n  private get hasSuffixIcon() {\n    return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n  }\n\n  private get content() {\n    return [\n      this.hasPrefixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-prefix\" part=\"prefix\"></cat-icon>\n      ) : null,\n      this.isIconButton ? (\n        <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n      ) : (\n        <span class=\"cat-button-content\" part=\"content\">\n          <slot></slot>\n        </span>\n      ),\n      this.hasSuffixIcon ? (\n        <cat-icon icon={this.icon} size={this.iconSize} class=\"cat-button-suffix\" part=\"suffix\"></cat-icon>\n      ) : null,\n      this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n    ];\n  }\n\n  private onClick(event: MouseEvent) {\n    this.catClick.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"],"version":3}

package/dist/components/cat-card.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const catCardCss = ":host{display:block;margin-bottom:1rem;border-radius:0.5rem;background-color:white;padding:1.25rem}:host([hidden]){display:none}::slotted(nav){margin:-0.75rem -1.25rem !important}::slotted(:last-child){margin-bottom:0 !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
+const catCardCss = ":host{display:block;margin-bottom:1rem;border-radius:var(--cat-border-radius-l, 0.5rem);background-color:white;padding:1.25rem}:host([hidden]){display:none}::slotted(nav){margin:-0.75rem -1.25rem !important}::slotted(:last-child){margin-bottom:0 !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
 
 const CatCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -1 +1 @@
-{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,81BAA81B;;MCWp2BA,SAAO;;;;;;EAClB,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["./src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","./src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.25rem;\n\n:host {\n  display: block;\n  margin-bottom: $cat-body-margin-bottom;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.body');\n  padding: $-padding;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(nav) {\n  margin: #{$cat-body-margin-bottom * 0.5 - $-padding} #{-$-padding} !important;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n  margin: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n  margin-left: -$-padding !important;\n  margin-right: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n  margin-top: -$-padding !important;\n  margin-bottom: -$-padding !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n  margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n  margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n  margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n  margin-bottom: -$-padding !important;\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}
+{"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,03BAA03B;;MCWh4BA,SAAO;;;;;;EAClB,MAAM;IACJ,OAAO,eAAa,CAAC;GACtB;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["./src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","./src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n$-padding: 1.25rem;\n\n:host {\n  display: block;\n  margin-bottom: $cat-body-margin-bottom;\n  border-radius: cat-border-radius('l');\n  background-color: cat-token('color.ui.background.body');\n  padding: $-padding;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n::slotted(nav) {\n  margin: #{$cat-body-margin-bottom * 0.5 - $-padding} #{-$-padding} !important;\n}\n\n::slotted(:last-child) {\n  margin-bottom: 0 !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n  margin: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n  margin-left: -$-padding !important;\n  margin-right: -$-padding !important;\n  width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n  margin-top: -$-padding !important;\n  margin-bottom: -$-padding !important;\n  height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n  margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n  margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n  margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n  margin-bottom: -$-padding !important;\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n  tag: 'cat-card',\n  styleUrl: 'cat-card.scss',\n  shadow: true\n})\nexport class CatCard {\n  render() {\n    return <slot></slot>;\n  }\n}\n"],"version":3}

package/dist/components/cat-checkbox2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { l as loglevel } from './loglevel.js';
 import { C as CatFormHint } from './cat-form-hint.js';
 
-const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:#d9340d}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) .box{border:1px solid #d9340d}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:#d9340d;border-color:#d9340d;stroke:white}.label{flex:1 1 auto;min-width:0}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
+const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:rgb(var(--cat-danger-text, 217, 52, 13))}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid rgb(var(--cat-border-color-focus, 215, 219, 224));border-radius:var(--cat-border-radius-s, 0.125rem);transition:background-color 0.13s ease, border-color 0.13s ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) .box{border:1px solid rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:rgb(var(--cat-danger-bg, 217, 52, 13));border-color:rgb(var(--cat-danger-bg, 217, 52, 13));stroke:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto;min-width:0}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
 
 let nextUniqueId = 0;
 const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {