@haiilo/catalyst 7.0.1 → 8.0.0

package/dist/collection/components/cat-select/connectors.js

@@ -1,20 +1,40 @@
 import { of } from "rxjs";
 /**
- * Creates a connector that resolves local string array data.
+ * Creates a connector that resolves local object array data.
  *
- * @param data the string array to connect to
- * @returns a connector that resolves local string array data
+ * @param data the object array to connect to
+ * @returns a connector that resolves local object array data
  */
-export function stringArrayConnector(data) {
-  const toItem = (id) => ({ id, name: id });
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function objectArrayConnector(data) {
   return {
-    resolve: ids => of(data.filter(id => ids.includes(id)).map(toItem)),
+    resolve: ids => of(data.filter(({ id }) => ids.includes(id))),
     retrieve: term => of({
-      content: data.filter(id => id.toLowerCase().includes(term.toLowerCase())).map(toItem),
+      content: data.filter(({ id }) => id.toLowerCase().includes(term.toLowerCase())),
       last: true,
       totalElements: data.length
     }),
-    render: item => ({ label: item.name })
+    render: ({ label }) => ({ label })
   };
 }
+/**
+ * Creates a connector that resolves local string array data.
+ *
+ * @param data the string array to connect to
+ * @returns a connector that resolves local string array data
+ */
+export function stringArrayConnector(data) {
+  const items = data.map(id => ({ id, label: id }));
+  return objectArrayConnector(items);
+}
+/**
+ * Creates a connector that resolves local string map data.
+ *
+ * @param data the string map to connect to
+ * @returns a connector that resolves local string map data
+ */
+export function stringMapConnector(data) {
+  const items = Array.from(data).map(([id, label]) => ({ id, label }));
+  return objectArrayConnector(items);
+}
 //# sourceMappingURL=connectors.js.map

package/dist/collection/components/cat-select/connectors.js.map

@@ -1 +1 @@
-{"version":3,"file":"connectors.js","sourceRoot":"","sources":["../../../src/components/cat-select/connectors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAG1B;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,IAAc;EACjD,MAAM,MAAM,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;EAClD,OAAO;IACL,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACnE,QAAQ,EAAE,IAAI,CAAC,EAAE,CACf,EAAE,CAAC;MACD,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;MACrF,IAAI,EAAE,IAAI;MACV,aAAa,EAAE,IAAI,CAAC,MAAM;KAC3B,CAAC;IACJ,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;GACvC,CAAC;AACJ,CAAC","sourcesContent":["import { of } from 'rxjs';\nimport { CatSelectConnector } from './cat-select';\n\n/**\n * Creates a connector that resolves local string array data.\n *\n * @param data the string array to connect to\n * @returns a connector that resolves local string array data\n */\nexport function stringArrayConnector(data: string[]): CatSelectConnector {\n  const toItem = (id: string) => ({ id, name: id });\n  return {\n    resolve: ids => of(data.filter(id => ids.includes(id)).map(toItem)),\n    retrieve: term =>\n      of({\n        content: data.filter(id => id.toLowerCase().includes(term.toLowerCase())).map(toItem),\n        last: true,\n        totalElements: data.length\n      }),\n    render: item => ({ label: item.name })\n  };\n}\n"]}
+{"version":3,"file":"connectors.js","sourceRoot":"","sources":["../../../src/components/cat-select/connectors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAG1B;;;;;GAKG;AACH,8DAA8D;AAC9D,MAAM,UAAU,oBAAoB,CAAgD,IAAS;EAC3F,OAAO;IACL,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;IAC7D,QAAQ,EAAE,IAAI,CAAC,EAAE,CACf,EAAE,CAAC;MACD,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;MAC/E,IAAI,EAAE,IAAI;MACV,aAAa,EAAE,IAAI,CAAC,MAAM;KAC3B,CAAC;IACJ,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;GACnC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,oBAAoB,CAAC,IAAc;EACjD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;EAClD,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;AACrC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAAyB;EAC1D,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;EACrE,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;AACrC,CAAC","sourcesContent":["import { of } from 'rxjs';\nimport { CatSelectConnector } from './cat-select';\n\n/**\n * Creates a connector that resolves local object array data.\n *\n * @param data the object array to connect to\n * @returns a connector that resolves local object array data\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function objectArrayConnector<T extends { id: string; label: string } = any>(data: T[]): CatSelectConnector<T> {\n  return {\n    resolve: ids => of(data.filter(({ id }) => ids.includes(id))),\n    retrieve: term =>\n      of({\n        content: data.filter(({ id }) => id.toLowerCase().includes(term.toLowerCase())),\n        last: true,\n        totalElements: data.length\n      }),\n    render: ({ label }) => ({ label })\n  };\n}\n\n/**\n * Creates a connector that resolves local string array data.\n *\n * @param data the string array to connect to\n * @returns a connector that resolves local string array data\n */\nexport function stringArrayConnector(data: string[]): CatSelectConnector<{ id: string; label: string }> {\n  const items = data.map(id => ({ id, label: id }));\n  return objectArrayConnector(items);\n}\n\n/**\n * Creates a connector that resolves local string map data.\n *\n * @param data the string map to connect to\n * @returns a connector that resolves local string map data\n */\nexport function stringMapConnector(data: Map<string, string>): CatSelectConnector<{ id: string; label: string }> {\n  const items = Array.from(data).map(([id, label]) => ({ id, label }));\n  return objectArrayConnector(items);\n}\n"]}

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

@@ -26,6 +26,10 @@
 .cat-bg-primary {
   background-color: rgb(var(--cat-primary-bg, 0, 129, 148)) !important;
   color: rgb(var(--cat-primary-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.primary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-primary-hover {
@@ -34,6 +38,10 @@
 .cat-bg-primary-hover:hover {
   background-color: rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;
   color: rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.primary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-primary,
@@ -57,6 +65,10 @@
 .cat-bg-primaryInverted {
   background-color: #93b4f2 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.primaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-primaryInverted-hover {
@@ -65,6 +77,10 @@
 .cat-bg-primaryInverted-hover:hover {
   background-color: #93b4f2 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.primaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.primaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.primaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-primaryInverted,
@@ -88,6 +104,10 @@
 .cat-bg-secondary {
   background-color: rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;
   color: rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.secondary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-secondary-hover {
@@ -96,6 +116,10 @@
 .cat-bg-secondary-hover:hover {
   background-color: rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;
   color: rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.secondary.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondary.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondary.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-secondary,
@@ -119,6 +143,10 @@
 .cat-bg-secondaryInverted {
   background-color: #697687 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.secondaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-secondaryInverted-hover {
@@ -127,6 +155,10 @@
 .cat-bg-secondaryInverted-hover:hover {
   background-color: #697687 !important;
   color: black !important;
+  --cat-primary-text: cat-token("color.theme.secondaryInverted.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.secondaryInverted.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.secondaryInverted.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-secondaryInverted,
@@ -147,9 +179,52 @@
   color: white !important;
 }
 
+.cat-bg-info {
+  background-color: rgb(var(--cat-success-bg, 0, 115, 230)) !important;
+  color: rgb(var(--cat-success-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.info.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.info.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.info.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
+}
+
+.cat-bg-info-hover {
+  transition: background-color 125ms, color 125ms;
+}
+.cat-bg-info-hover:hover {
+  background-color: rgb(var(--cat-success-bg-hover, 0, 107, 227)) !important;
+  color: rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.info.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.info.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.info.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
+}
+
+.cat-text-info,
+.cat-link-info {
+  color: rgb(var(--cat-success-text, 0, 115, 230)) !important;
+}
+
+.cat-link-info,
+.cat-text-info-hover {
+  transition: color 125ms;
+}
+.cat-link-info:hover,
+.cat-text-info-hover:hover {
+  color: rgb(var(--cat-success-text-hover, 0, 107, 227)) !important;
+}
+.cat-link-info:active,
+.cat-text-info-hover:active {
+  color: rgb(var(--cat-success-text-active, 0, 96, 223)) !important;
+}
+
 .cat-bg-success {
   background-color: rgb(var(--cat-success-bg, 0, 132, 88)) !important;
   color: rgb(var(--cat-success-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.success.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.success.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.success.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-success-hover {
@@ -158,6 +233,10 @@
 .cat-bg-success-hover:hover {
   background-color: rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;
   color: rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.success.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.success.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.success.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-success,
@@ -181,6 +260,10 @@
 .cat-bg-warning {
   background-color: rgb(var(--cat-warning-bg, 255, 206, 128)) !important;
   color: rgb(var(--cat-warning-fill, 0, 0, 0)) !important;
+  --cat-primary-text: cat-token("color.theme.warning.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.warning.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.warning.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-warning-hover {
@@ -189,6 +272,10 @@
 .cat-bg-warning-hover:hover {
   background-color: rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;
   color: rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;
+  --cat-primary-text: cat-token("color.theme.warning.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.warning.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.warning.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-warning,
@@ -212,6 +299,10 @@
 .cat-bg-danger {
   background-color: rgb(var(--cat-danger-bg, 217, 52, 13)) !important;
   color: rgb(var(--cat-danger-fill, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.danger.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.danger.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.danger.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-bg-danger-hover {
@@ -220,6 +311,10 @@
 .cat-bg-danger-hover:hover {
   background-color: rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;
   color: rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;
+  --cat-primary-text: cat-token("color.theme.danger.fill", $wrap: false);
+  --cat-primary-text-hover: cat-token("color.theme.danger.fill-hover", $wrap: false);
+  --cat-primary-text-active: cat-token("color.theme.danger.fill-active", $wrap: false);
+  --cat-link-decoration: underline;
 }
 
 .cat-text-danger,
@@ -257,7 +352,7 @@
 }
 
 .cat-bg-muted {
-  color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;
+  background-color: #f2f4f7 !important;
 }
 
 .cat-text-reset {

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

@@ -24,6 +24,7 @@ export class CatToggle {
     this.name = undefined;
     this.required = false;
     this.value = undefined;
+    this.noValue = undefined;
     this.resolvedValue = null;
     this.hint = undefined;
     this.labelLeft = false;
@@ -77,7 +78,7 @@ export class CatToggle {
     this.catBlur.emit(event);
   }
   updateResolved() {
-    this.resolvedValue = this.value == null ? this.checked : this.checked ? this.value : null;
+    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;
   }
   static get is() { return "cat-toggle"; }
   static get encapsulation() { return "shadow"; }
@@ -218,35 +219,52 @@ export class CatToggle {
         "defaultValue": "false"
       },
       "value": {
-        "type": "string",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The value of the toggle."
+          "text": "The value of the checked toggle."
         },
         "attribute": "value",
         "reflect": false
       },
+      "noValue": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The value of the unchecked toggle."
+        },
+        "attribute": "no-value",
+        "reflect": false
+      },
       "resolvedValue": {
         "type": "any",
         "mutable": true,
         "complexType": {
-          "original": "string | boolean | null",
-          "resolved": "boolean | null | string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The resolved value of the toggle, based on the checked state and value."
+          "text": "The resolved value of the toggle, based on the checked state, value and noValue."
         },
         "attribute": "resolved-value",
         "reflect": false,
@@ -322,8 +340,8 @@ export class CatToggle {
           "text": "Emitted when the checked status of the toggle is changed."
         },
         "complexType": {
-          "original": "boolean | string | null",
-          "resolved": "boolean | null | string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         }
       }, {

package/dist/collection/components/cat-toggle/cat-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly _id = `cat-toggle-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the toggle that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle.\n   */\n  @Prop() value?: string;\n\n  /**\n   * The resolved value of the toggle, based on the checked state and value.\n   */\n  @Prop({ mutable: true }) resolvedValue: string | boolean | null = null;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter<boolean | string | null>;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.updateResolved();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n            aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"toggle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = this.input.checked;\n    this.updateResolved();\n    this.catChange.emit(this.resolvedValue);\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  private updateResolved() {\n    this.resolvedValue = this.value == null ? this.checked : this.checked ? this.value : null;\n  }\n}\n"]}
+{"version":3,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;;;;;GAQG;AAMH,MAAM,OAAO,SAAS;;IACH,QAAG,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;2BAS3B,KAAK;0BAEN,KAAK;mBAKI,KAAK;oBAKrB,KAAK;;iBAUR,EAAE;uBAKI,KAAK;;oBAUR,KAAK;;;yBAkBsB,IAAI;;qBAU9B,KAAK;;;EAzEzB,IAAY,EAAE;IACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;EACrC,CAAC;EA8FD,iBAAiB;IACf,IAAI,CAAC,cAAc,EAAE,CAAC;EACxB,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACxE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACxC,GAAG,CAAC,IAAI,CAAC,qCAAqC,EAAE,IAAI,CAAC,CAAC;KACvD;EACH,CAAC;EAED;;;;;;KAMG;EAEH,KAAK,CAAC,OAAO,CAAC,OAAsB;IAClC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;KAGG;EAEH,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;EACpB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,aACE,OAAO,EAAE,IAAI,CAAC,EAAE,EAChB,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;QAEpG,gBACM,IAAI,CAAC,gBAAgB,EACzB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,sBACZ,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,GAC9D;QACF,YAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ;QAC1C,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,CAAC,IAAI,CAAC,eAAe,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CAAC,IAAI,IAAI,CAAC,KAAK,CAC9D,CACD;MACP,IAAI,CAAC,OAAO,IAAI,CACf,WAAK,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE;QAChE,WAAK,KAAK,EAAC,oBAAoB,GAAO;QACtC,EAAC,WAAW,IAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CACxG,CACP,CACI,CACR,CAAC;EACJ,CAAC;EAED,IAAY,OAAO;IACjB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC;EAC9C,CAAC;EAEO,OAAO;IACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;EAC1C,CAAC;EAEO,OAAO,CAAC,KAAiB;IAC/B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC5B,CAAC;EAEO,MAAM,CAAC,KAAiB;IAC9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC3B,CAAC;EAEO,cAAc;IACpB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC;EACjF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly _id = `cat-toggle-${nextUniqueId++}`;\n  private get id() {\n    return this.identifier || this._id;\n  }\n\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * The label of the toggle that is visible.\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() value?: any;\n\n  /**\n   * The value of the unchecked toggle.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() noValue?: any;\n\n  /**\n   * The resolved value of the toggle, based on the checked state, value and noValue.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop({ mutable: true }) resolvedValue: any = null;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Attributes that will be added to the native HTML input element.\n   */\n  @Prop() nativeAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Event() catChange!: EventEmitter<any>;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillLoad() {\n    this.updateResolved();\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.warn('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the toggle. Use this method instead of\n   * `input.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async doFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  /**\n   * Programmatically remove focus from the toggle. Use this method instead of\n   * `input.blur()`.\n   */\n  @Method()\n  async doBlur(): Promise<void> {\n    this.input.blur();\n  }\n\n  render() {\n    return (\n      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\n          <input\n            {...this.nativeAttributes}\n            ref={el => (this.input = el as HTMLInputElement)}\n            id={this.id}\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n            aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hasHint && (\n          <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n            <div class=\"toggle-placeholder\"></div>\n            <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  private get hasHint() {\n    return !!this.hint || !!this.hasSlottedHint;\n  }\n\n  private onInput() {\n    this.checked = this.input.checked;\n    this.updateResolved();\n    this.catChange.emit(this.resolvedValue);\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  private updateResolved() {\n    this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;\n  }\n}\n"]}

package/dist/collection/index.js

@@ -1,5 +1,5 @@
 export { CatI18nRegistry, catI18nRegistry } from './components/cat-i18n/cat-i18n-registry';
 export { CatIconRegistry, catIconRegistry } from './components/cat-icon/cat-icon-registry';
 export { CatNotificationService, catNotificationService } from './components/cat-notification/cat-notification';
-export { stringArrayConnector } from './components/cat-select/connectors';
+export { objectArrayConnector, stringArrayConnector, stringMapConnector } from './components/cat-select/connectors';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC3F,OAAO,EACL,sBAAsB,EAEtB,sBAAsB,EACvB,MAAM,gDAAgD,CAAC;AASxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport { CatI18nRegistry, catI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nexport { CatIconRegistry, catIconRegistry } from './components/cat-icon/cat-icon-registry';\nexport {\n  CatNotificationService,\n  ToastOptions,\n  catNotificationService\n} from './components/cat-notification/cat-notification';\nexport {\n  CatSelectConnector,\n  CatSelectMultipleTaggingValue,\n  CatSelectTaggingValue,\n  Item,\n  Page,\n  RenderInfo\n} from './components/cat-select/cat-select';\nexport { stringArrayConnector } from './components/cat-select/connectors';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC3F,OAAO,EACL,sBAAsB,EAEtB,sBAAsB,EACvB,MAAM,gDAAgD,CAAC;AASxD,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport { CatI18nRegistry, catI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nexport { CatIconRegistry, catIconRegistry } from './components/cat-icon/cat-icon-registry';\nexport {\n  CatNotificationService,\n  ToastOptions,\n  catNotificationService\n} from './components/cat-notification/cat-notification';\nexport {\n  CatSelectConnector,\n  CatSelectMultipleTaggingValue,\n  CatSelectTaggingValue,\n  Item,\n  Page,\n  RenderInfo\n} from './components/cat-select/cat-select';\nexport { objectArrayConnector, stringArrayConnector, stringMapConnector } from './components/cat-select/connectors';\n"]}

package/dist/collection/scss/core/_base.scss

@@ -8,6 +8,6 @@ body {
 
 body {
   @include cat-body('m');
-  font-family: cat-token('font.family.body'), $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
+  font-family: cat-token('font.family.base'), $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
   color: cat-token('color.ui.font.base');
 }

package/dist/collection/scss/core/_form.scss

@@ -12,3 +12,9 @@
     margin-bottom: 0.5rem;
   }
 }
+
+.cat-label {
+  @include cat-body('m');
+  display: block;
+  margin-bottom: 0.5rem;
+}

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

@@ -105,22 +105,11 @@ ul {
   padding-left: 2rem;
 }
 
-ol,
-ul,
-dl {
-  ol,
-  ul,
-  dl {
-    margin-bottom: 0;
-  }
-}
-
 nav ol,
 nav ul,
 ol.cat-plain,
 ul.cat-plain {
   list-style: none;
-  margin: 0;
   padding: 0;
 }
 
@@ -128,7 +117,7 @@ dt {
   font-weight: 600;
 }
 
-dd {
+dd:not(:last-child) {
   margin-bottom: 0.5rem;
   margin-left: 0;
 }
@@ -228,6 +217,7 @@ code {
   :where(h1, h2, h3),
   :is(.cat-h1, .cat-h2, .cat-h3) {
     color: $cat-font-color-head;
+    font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
     margin-bottom: calc($cat-head-margin-bottom * var(--cat-article-spacer, 1));
 
     &:has(+ h1, + h2, + h3, + h4, + h5, + h6, + .cat-h1, + .cat-h2, + .cat-h3, + .cat-h4, + .cat-h5, + .cat-h6) {
@@ -238,13 +228,24 @@ code {
   :where(h4, h5, h6),
   :is(.cat-h4, .cat-h5, .cat-h6) {
     color: $cat-font-color-head;
+    font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
     margin-bottom: calc($cat-head-margin-bottom * 0.5 * var(--cat-article-spacer, 1));
   }
 
-  :where(p, ol, ul, dl, blockquote, figure, pre, cat-alert, cat-card) {
+  :where(p, ol, ul, dl, blockquote, figure, pre, table, cat-alert, cat-card):not(:last-child) {
     margin-bottom: calc($cat-body-margin-bottom * var(--cat-article-spacer, 1));
   }
 
+  ol,
+  ul,
+  dl {
+    ol,
+    ul,
+    dl {
+      margin-bottom: 0;
+    }
+  }
+
   hr,
   .cat-hr {
     margin: calc($cat-body-margin-bottom * var(--cat-article-spacer, 1)) 0;

package/dist/collection/scss/utils/_color.scss

@@ -4,6 +4,11 @@
   .cat-bg-#{$name} {
     background-color: cat-token('color.theme.#{$name}.bg') !important;
     color: cat-token('color.theme.#{$name}.fill') !important;
+    // adjust nested links
+    --cat-primary-text: cat-token('color.theme.#{$name}.fill', $wrap: false);
+    --cat-primary-text-hover: cat-token('color.theme.#{$name}.fill-hover', $wrap: false);
+    --cat-primary-text-active: cat-token('color.theme.#{$name}.fill-active', $wrap: false);
+    --cat-link-decoration: underline;
   }
 
   .cat-bg-#{$name}-hover {
@@ -14,6 +19,11 @@
     &:hover {
       background-color: cat-token('color.theme.#{$name}.bgHover') !important;
       color: cat-token('color.theme.#{$name}.fillHover') !important;
+      // adjust nested links
+      --cat-primary-text: cat-token('color.theme.#{$name}.fill', $wrap: false);
+      --cat-primary-text-hover: cat-token('color.theme.#{$name}.fill-hover', $wrap: false);
+      --cat-primary-text-active: cat-token('color.theme.#{$name}.fill-active', $wrap: false);
+      --cat-link-decoration: underline;
     }
   }
 
@@ -55,7 +65,7 @@
 }
 
 .cat-bg-muted {
-  color: cat-token('color.ui.font.muted') !important;
+  background-color: cat-token('color.ui.background.muted') !important;
 }
 
 .cat-text-reset {

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

@@ -11,8 +11,7 @@
 }
 
 @mixin cat-head($size, $weight: cat-token('font.weight.head')) {
-  // skip color, as it is only set for editorial styles
-  font-family: $cat-font-family-head, $font-fallback-base, cat-token('font.family.emoji'), $font-fallback-emoji;
+  // skip color and family, as it is only set for editorial styles
   font-size: cat-head-font-size($size);
   line-height: cat-head-line-height($size);
   font-weight: $weight;

package/dist/components/cat-alert.js

@@ -7,7 +7,7 @@ function setAttributeDefault(host, attr, value) {
   }
 }
 
-const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}: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:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255))}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255))}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255))}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0))}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255))}";
+const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:var(--cat-border-radius-l, 0.5rem)}: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:rgb(var(--cat-primary-bg, 0, 129, 148));color:rgb(var(--cat-primary-fill, 255, 255, 255));--cat-primary-text:cat-token(\"color.theme.primary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.primary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.primary.fill-active\", $wrap: false);--cat-link-decoration:underline}:host([color=secondary]){background-color:rgb(var(--cat-secondary-bg, 105, 118, 135));color:rgb(var(--cat-secondary-fill, 255, 255, 255));--cat-primary-text:cat-token(\"color.theme.secondary.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.secondary.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.secondary.fill-active\", $wrap: false);--cat-link-decoration:underline}:host([color=info]){background-color:rgb(var(--cat-success-bg, 0, 115, 230));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:cat-token(\"color.theme.info.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.info.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.info.fill-active\", $wrap: false);--cat-link-decoration:underline}:host([color=success]){background-color:rgb(var(--cat-success-bg, 0, 132, 88));color:rgb(var(--cat-success-fill, 255, 255, 255));--cat-primary-text:cat-token(\"color.theme.success.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.success.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.success.fill-active\", $wrap: false);--cat-link-decoration:underline}:host([color=warning]){background-color:rgb(var(--cat-warning-bg, 255, 206, 128));color:rgb(var(--cat-warning-fill, 0, 0, 0));--cat-primary-text:cat-token(\"color.theme.warning.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.warning.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.warning.fill-active\", $wrap: false);--cat-link-decoration:underline}:host([color=danger]){background-color:rgb(var(--cat-danger-bg, 217, 52, 13));color:rgb(var(--cat-danger-fill, 255, 255, 255));--cat-primary-text:cat-token(\"color.theme.danger.fill\", $wrap: false);--cat-primary-text-hover:cat-token(\"color.theme.danger.fill-hover\", $wrap: false);--cat-primary-text-active:cat-token(\"color.theme.danger.fill-active\", $wrap: false);--cat-link-decoration:underline}";
 
 const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class CatAlert extends HTMLElement {
   constructor() {
@@ -17,6 +17,7 @@ const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class CatAlert extends HTMLE
     this.mapIcon = new Map([
       ['primary', '$cat:alert-primary'],
       ['secondary', '$cat:alert-secondary'],
+      ['info', '$cat:alert-info'],
       ['success', '$cat:alert-success'],
       ['warning', '$cat:alert-warning'],
       ['danger', '$cat:alert-danger']
@@ -24,6 +25,7 @@ const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class CatAlert extends HTMLE
     this.mapRole = new Map([
       ['primary', 'status'],
       ['secondary', 'status'],
+      ['info', 'status'],
       ['success', 'status'],
       ['warning', 'alert'],
       ['danger', 'alert']

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

@@ -1 +1 @@
-{"file":"cat-alert.js","mappings":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;EAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;IACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACpD;AACH;;ACRA,MAAM,WAAW,GAAG,g8BAAg8B;;MCYv8BA,UAAQ;;;;;IACF,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;MACrC,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,QAAQ,EAAE,mBAAmB,CAAC;KAChC,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;iBAO0F,SAAS;;kBAUrF,KAAK;;EAEtB,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;GACjE;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/utils/setDefault.ts","src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\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');\n    color: cat-token('color.theme.#{$theme}.fill');\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 } 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', '$cat:alert-primary'],\n    ['secondary', '$cat:alert-secondary'],\n    ['success', '$cat:alert-success'],\n    ['warning', '$cat:alert-warning'],\n    ['danger', '$cat:alert-danger']\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({ reflect: true }) 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  }\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":";;;SAAgB,mBAAmB,CACjC,IAAO,EACP,IAAY,EACZ,KAAc;EAEd,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;IACzD,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;GACpD;AACH;;ACRA,MAAM,WAAW,GAAG,urFAAurF;;MCY9rFA,UAAQ;;;;;IACF,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,WAAW,EAAE,sBAAsB,CAAC;MACrC,CAAC,MAAM,EAAE,iBAAiB,CAAC;MAC3B,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,SAAS,EAAE,oBAAoB,CAAC;MACjC,CAAC,QAAQ,EAAE,mBAAmB,CAAC;KAChC,CAAC,CAAC;IACc,YAAO,GAAwB,IAAI,GAAG,CAAC;MACtD,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,WAAW,EAAE,QAAQ,CAAC;MACvB,CAAC,MAAM,EAAE,QAAQ,CAAC;MAClB,CAAC,SAAS,EAAE,QAAQ,CAAC;MACrB,CAAC,SAAS,EAAE,OAAO,CAAC;MACpB,CAAC,QAAQ,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;iBAO0F,SAAS;;kBAUrF,KAAK;;EAEtB,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;GACjE;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/utils/setDefault.ts","src/components/cat-alert/cat-alert.scss?tag=cat-alert&encapsulation=shadow","src/components/cat-alert/cat-alert.tsx"],"sourcesContent":["export function setAttributeDefault<T extends { hostElement: HTMLElement }>(\n  host: T,\n  attr: string,\n  value: unknown\n): void {\n  if (!host.hostElement.hasAttribute(attr) && value != null) {\n    host.hostElement.setAttribute(attr, String(value));\n  }\n}\n\nexport function setAttribute<T extends { hostElement: HTMLElement }>(host: T, attr: string, value: unknown): void {\n  host.hostElement.setAttribute(attr, String(value));\n}\n","@use 'variables' as *;\n@use 'mixins' as *;\n@use 'sass:map';\n\n:host {\n  display: flex;\n  gap: 0.5rem;\n  padding: 1.25rem;\n  border-radius: cat-border-radius('l');\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');\n    color: cat-token('color.theme.#{$theme}.fill');\n    // adjust nested links\n    --cat-primary-text: cat-token('color.theme.#{$theme}.fill', $wrap: false);\n    --cat-primary-text-hover: cat-token('color.theme.#{$theme}.fill-hover', $wrap: false);\n    --cat-primary-text-active: cat-token('color.theme.#{$theme}.fill-active', $wrap: false);\n    --cat-link-decoration: underline;\n  }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { setAttributeDefault } 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', '$cat:alert-primary'],\n    ['secondary', '$cat:alert-secondary'],\n    ['info', '$cat:alert-info'],\n    ['success', '$cat:alert-success'],\n    ['warning', '$cat:alert-warning'],\n    ['danger', '$cat:alert-danger']\n  ]);\n  private readonly mapRole: Map<string, string> = new Map([\n    ['primary', 'status'],\n    ['secondary', 'status'],\n    ['info', '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({ reflect: true }) 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  }\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-badge.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-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:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}:host([variant=outlined]){background-color:white;color:rgb(var(--text));box-shadow:inset 0 0 0 1px rgba(var(--text), 0.2)}: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)}: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)}: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)}: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)}: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)}: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(--text), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--text), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--text), 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:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}:host([variant=outlined]){background-color:white;color:rgb(var(--text));box-shadow:inset 0 0 0 1px rgba(var(--text), 0.2)}: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)}: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)}:host([color=info]){--bg:var(--cat-success-bg, 0, 115, 230);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 115, 230)}: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)}: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)}: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)}: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(--text), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--text), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--text), 0.2)}}";
 
 const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class CatBadge extends HTMLElement {
   constructor() {