@haiilo/catalyst 7.0.1 → 8.0.0

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

@@ -25,6 +25,7 @@ export class CatCheckbox {
     this.name = undefined;
     this.required = false;
     this.value = undefined;
+    this.noValue = undefined;
     this.resolvedValue = null;
     this.hint = undefined;
     this.labelLeft = false;
@@ -79,7 +80,7 @@ export class CatCheckbox {
     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-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -238,28 +239,45 @@ export class CatCheckbox {
         "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 checkbox."
+          "text": "The value of the checked checkbox."
         },
         "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 checkbox."
+        },
+        "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,
@@ -342,8 +360,8 @@ export class CatCheckbox {
           "text": "Emitted when the checked status of the checkbox is changed."
         },
         "complexType": {
-          "original": "boolean | string | null",
-          "resolved": "boolean | null | string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         }
       }, {

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

@@ -1 +1 @@
-{"version":3,"file":"cat-checkbox.js","sourceRoot":"","sources":["../../../src/components/cat-checkbox/cat-checkbox.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 * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @slot hint - Optional hint element to be displayed with the checkbox.\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 checkbox - The checkbox element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly _id = `cat-checkbox-${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  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop({ mutable: true }) indeterminate = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * Label of the checkbox which is presented in the UI\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 checkbox.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checkbox.\n   */\n  @Prop() value?: string;\n\n  /**\n   * The resolved value of the checkbox, 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 checkbox.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the checkbox.\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 checkbox is changed.\n   */\n  @Event() catChange!: EventEmitter<boolean | string | null>;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox 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 checkbox', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the checkbox. 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 checkbox. 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            indeterminate={this.indeterminate}\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=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n            <svg class=\"check\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n            </svg>\n            <svg class=\"dash\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 5 10.5 5\"></polyline>\n            </svg>\n          </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=\"box-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.indeterminate = this.input.indeterminate;\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-checkbox.js","sourceRoot":"","sources":["../../../src/components/cat-checkbox/cat-checkbox.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 * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @slot hint - Optional hint element to be displayed with the checkbox.\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 checkbox - The checkbox element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly _id = `cat-checkbox-${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  @State() hasSlottedHint = false;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop({ mutable: true }) checked = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop({ mutable: true }) indeterminate = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A unique identifier for the input.\n   */\n  @Prop() identifier?: string;\n\n  /**\n   * Label of the checkbox which is presented in the UI\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 checkbox.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checked checkbox.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() value?: any;\n\n  /**\n   * The value of the unchecked checkbox.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Prop() noValue?: any;\n\n  /**\n   * The resolved value of the checkbox, based on the checked state and value.\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 checkbox.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the checkbox.\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 checkbox is changed.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @Event() catChange!: EventEmitter<any>;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox 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 checkbox', this);\n    }\n  }\n\n  /**\n   * Programmatically move focus to the checkbox. 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 checkbox. 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            indeterminate={this.indeterminate}\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=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n            <svg class=\"check\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n            </svg>\n            <svg class=\"dash\" viewBox=\"0 0 12 10\">\n              <polyline points=\"1.5 5 10.5 5\"></polyline>\n            </svg>\n          </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=\"box-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.indeterminate = this.input.indeterminate;\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/components/cat-datepicker-inline/cat-datepicker-inline.css

@@ -854,7 +854,6 @@ span.flatpickr-weekday {
 }
 
 .flatpickr-current-month {
-  font-family: var(--cat-font-family-head), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, var(--cat-font-family-emoji, ""), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1.125rem;
   line-height: 1.5rem;
   font-weight: var(--cat-font-weight-head, 600);
@@ -1047,7 +1046,6 @@ span.flatpickr-weekday {
 .flatpickr-time .flatpickr-time-separator,
 .flatpickr-time .flatpickr-am-pm {
   margin: 0 0.25rem;
-  font-family: var(--cat-font-family-head), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, var(--cat-font-family-emoji, ""), "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1.125rem;
   line-height: 1.5rem;
   font-weight: 400;

package/dist/collection/components/cat-icon/cat-icon-registry.js

@@ -9,6 +9,7 @@ import crossCircleFilled from "@haiilo/catalyst-icons/tmp/assets/cross-circle-fi
 import crossCircleOutlined from "@haiilo/catalyst-icons/tmp/assets/cross-circle-outlined.svg";
 import crossOutlined from "@haiilo/catalyst-icons/tmp/assets/cross-outlined.svg";
 import dangerFilled from "@haiilo/catalyst-icons/tmp/assets/danger-filled.svg";
+import infoCircleFilled from "@haiilo/catalyst-icons/tmp/assets/info-circle-filled.svg";
 import starCircleFilled from "@haiilo/catalyst-icons/tmp/assets/star-circle-filled.svg";
 import log from "loglevel";
 export class CatIconRegistry {
@@ -18,11 +19,12 @@ export class CatIconRegistry {
     this.icons = new Map();
     // register default icons that are used in the framework by other components
     this.addIcons({
-      'alert-danger': crossCircleFilled,
       'alert-primary': starCircleFilled,
       'alert-secondary': clockFilled,
+      'alert-info': infoCircleFilled,
       'alert-success': checkCircleFilled,
       'alert-warning': dangerFilled,
+      'alert-danger': crossCircleFilled,
       'dialog-close': crossOutlined,
       'input-close': crossCircleOutlined,
       'input-error': alertCircleOutlined,

package/dist/collection/components/cat-icon/cat-icon-registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-icon-registry.js","sourceRoot":"","sources":["../../../src/components/cat-icon/cat-icon-registry.ts"],"names":[],"mappings":"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","sourcesContent":["import cross16 from '@haiilo/catalyst-icons/tmp/assets/16-cross.svg';\nimport alertCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/alert-circle-outlined.svg';\nimport checkCircleFilled from '@haiilo/catalyst-icons/tmp/assets/check-circle-filled.svg';\nimport chevronDownOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-down-outlined.svg';\nimport chevronLeftOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-left-outlined.svg';\nimport chevronRightOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-right-outlined.svg';\nimport clockFilled from '@haiilo/catalyst-icons/tmp/assets/clock-filled.svg';\nimport crossCircleFilled from '@haiilo/catalyst-icons/tmp/assets/cross-circle-filled.svg';\nimport crossCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-circle-outlined.svg';\nimport crossOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-outlined.svg';\nimport dangerFilled from '@haiilo/catalyst-icons/tmp/assets/danger-filled.svg';\nimport starCircleFilled from '@haiilo/catalyst-icons/tmp/assets/star-circle-filled.svg';\nimport log from 'loglevel';\n\nexport class CatIconRegistry {\n  private static instance: CatIconRegistry;\n\n  private readonly id = (Math.random() + 1).toString(36).substring(2);\n  private readonly icons: Map<string, string> = new Map();\n\n  private constructor() {\n    // hide constructor\n\n    // register default icons that are used in the framework by other components\n    this.addIcons(\n      {\n        'alert-danger': crossCircleFilled,\n        'alert-primary': starCircleFilled,\n        'alert-secondary': clockFilled,\n        'alert-success': checkCircleFilled,\n        'alert-warning': dangerFilled,\n        'dialog-close': crossOutlined,\n        'input-close': crossCircleOutlined,\n        'input-error': alertCircleOutlined,\n        'notification-close': crossCircleOutlined,\n        'pagination-left': chevronLeftOutlined,\n        'pagination-right': chevronRightOutlined,\n        'select-clear': cross16,\n        'select-open': chevronDownOutlined\n      },\n      '$cat',\n      true\n    );\n\n    // In rare cases, the registry can be initialized twice. This can happen in\n    // a micro frontend architecture where the registry is initialized in the\n    // host application and in the micro frontend. To prevent the registry in\n    // one application from overwriting the registry in the other, we listen for\n    // events that are dispatched when icons are added or removed in other\n    // applications and add or remove icons if the event was not dispatched by\n    // this registry.\n    window.addEventListener('cat-icons-added', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.addIcons(detail.icons, detail.setName, true);\n      }\n    });\n    window.addEventListener('cat-icons-removed', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.removeIcons(detail.names, detail.setName, true);\n      }\n    });\n  }\n\n  static getInstance(): CatIconRegistry {\n    if (!CatIconRegistry.instance) {\n      CatIconRegistry.instance = new CatIconRegistry();\n    }\n    return CatIconRegistry.instance;\n  }\n\n  getIcon(name: string, setName?: string): string | undefined {\n    const icon = this.icons.get(this.buildName(name, setName));\n    if (!icon) {\n      log.error(`[CatIconRegistry] Unknown icon${setName ? ` in set ${setName}` : ''}: ${name}`);\n    }\n    return icon;\n  }\n\n  addIcons(icons: { [name: string]: string }, setName?: string, silent = false): CatIconRegistry {\n    const iconEntries = Object.entries(icons);\n    const iconSize = iconEntries.length;\n    iconEntries.forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));\n    log.info(`[CatIconRegistry] Added ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` to set ${setName}` : ''}`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-icons-added', { id: this.id, icons, setName }));\n    return this;\n  }\n\n  removeIcons(names: string[], setName?: string, silent = false): CatIconRegistry {\n    const iconSize = names.length;\n    names.forEach(name => this.icons.delete(this.buildName(name, setName)));\n    log.info(`[CatIconRegistry] Removed ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` from set ${setName}` : ''}`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-icons-removed', { id: this.id, names, setName }));\n    return this;\n  }\n\n  private buildName(name: string, setName?: string) {\n    return setName ? `${setName}:${name}` : name;\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n}\n\nexport const catIconRegistry = CatIconRegistry.getInstance();\n"]}
+{"version":3,"file":"cat-icon-registry.js","sourceRoot":"","sources":["../../../src/components/cat-icon/cat-icon-registry.ts"],"names":[],"mappings":"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","sourcesContent":["import cross16 from '@haiilo/catalyst-icons/tmp/assets/16-cross.svg';\nimport alertCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/alert-circle-outlined.svg';\nimport checkCircleFilled from '@haiilo/catalyst-icons/tmp/assets/check-circle-filled.svg';\nimport chevronDownOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-down-outlined.svg';\nimport chevronLeftOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-left-outlined.svg';\nimport chevronRightOutlined from '@haiilo/catalyst-icons/tmp/assets/chevron-right-outlined.svg';\nimport clockFilled from '@haiilo/catalyst-icons/tmp/assets/clock-filled.svg';\nimport crossCircleFilled from '@haiilo/catalyst-icons/tmp/assets/cross-circle-filled.svg';\nimport crossCircleOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-circle-outlined.svg';\nimport crossOutlined from '@haiilo/catalyst-icons/tmp/assets/cross-outlined.svg';\nimport dangerFilled from '@haiilo/catalyst-icons/tmp/assets/danger-filled.svg';\nimport infoCircleFilled from '@haiilo/catalyst-icons/tmp/assets/info-circle-filled.svg';\nimport starCircleFilled from '@haiilo/catalyst-icons/tmp/assets/star-circle-filled.svg';\nimport log from 'loglevel';\n\nexport class CatIconRegistry {\n  private static instance: CatIconRegistry;\n\n  private readonly id = (Math.random() + 1).toString(36).substring(2);\n  private readonly icons: Map<string, string> = new Map();\n\n  private constructor() {\n    // hide constructor\n\n    // register default icons that are used in the framework by other components\n    this.addIcons(\n      {\n        'alert-primary': starCircleFilled,\n        'alert-secondary': clockFilled,\n        'alert-info': infoCircleFilled,\n        'alert-success': checkCircleFilled,\n        'alert-warning': dangerFilled,\n        'alert-danger': crossCircleFilled,\n        'dialog-close': crossOutlined,\n        'input-close': crossCircleOutlined,\n        'input-error': alertCircleOutlined,\n        'notification-close': crossCircleOutlined,\n        'pagination-left': chevronLeftOutlined,\n        'pagination-right': chevronRightOutlined,\n        'select-clear': cross16,\n        'select-open': chevronDownOutlined\n      },\n      '$cat',\n      true\n    );\n\n    // In rare cases, the registry can be initialized twice. This can happen in\n    // a micro frontend architecture where the registry is initialized in the\n    // host application and in the micro frontend. To prevent the registry in\n    // one application from overwriting the registry in the other, we listen for\n    // events that are dispatched when icons are added or removed in other\n    // applications and add or remove icons if the event was not dispatched by\n    // this registry.\n    window.addEventListener('cat-icons-added', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.addIcons(detail.icons, detail.setName, true);\n      }\n    });\n    window.addEventListener('cat-icons-removed', event => {\n      const { detail } = (event as CustomEvent) || {};\n      if (detail && detail.id !== this.id) {\n        this.removeIcons(detail.names, detail.setName, true);\n      }\n    });\n  }\n\n  static getInstance(): CatIconRegistry {\n    if (!CatIconRegistry.instance) {\n      CatIconRegistry.instance = new CatIconRegistry();\n    }\n    return CatIconRegistry.instance;\n  }\n\n  getIcon(name: string, setName?: string): string | undefined {\n    const icon = this.icons.get(this.buildName(name, setName));\n    if (!icon) {\n      log.error(`[CatIconRegistry] Unknown icon${setName ? ` in set ${setName}` : ''}: ${name}`);\n    }\n    return icon;\n  }\n\n  addIcons(icons: { [name: string]: string }, setName?: string, silent = false): CatIconRegistry {\n    const iconEntries = Object.entries(icons);\n    const iconSize = iconEntries.length;\n    iconEntries.forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));\n    log.info(`[CatIconRegistry] Added ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` to set ${setName}` : ''}`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-icons-added', { id: this.id, icons, setName }));\n    return this;\n  }\n\n  removeIcons(names: string[], setName?: string, silent = false): CatIconRegistry {\n    const iconSize = names.length;\n    names.forEach(name => this.icons.delete(this.buildName(name, setName)));\n    log.info(`[CatIconRegistry] Removed ${iconSize !== 1 ? 'icons' : 'icon'}${setName ? ` from set ${setName}` : ''}`);\n    !silent && window.dispatchEvent(this.buildEvent('cat-icons-removed', { id: this.id, names, setName }));\n    return this;\n  }\n\n  private buildName(name: string, setName?: string) {\n    return setName ? `${setName}:${name}` : name;\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n}\n\nexport const catIconRegistry = CatIconRegistry.getInstance();\n"]}

package/dist/collection/components/cat-input/cat-input.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 {
@@ -421,7 +516,8 @@
 .text-prefix,
 .text-suffix {
   display: inline-flex;
-  align-items: center; /* stylelint-disable property-no-vendor-prefix */
+  align-items: center;
+  /* stylelint-disable property-no-vendor-prefix */
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;

package/dist/collection/components/cat-select/cat-select.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-select/cat-select.js

@@ -770,12 +770,12 @@ export class CatSelect {
           "references": {
             "CatSelectTaggingValue": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
               "id": "src/components/cat-select/cat-select.tsx::CatSelectTaggingValue"
             },
             "CatSelectMultipleTaggingValue": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
               "id": "src/components/cat-select/cat-select.tsx::CatSelectMultipleTaggingValue"
             }
           }
@@ -1168,7 +1168,7 @@ export class CatSelect {
             },
             "CatSelectConnector": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
               "id": "src/components/cat-select/cat-select.tsx::CatSelectConnector"
             },
             "Observable": {
@@ -1178,7 +1178,7 @@ export class CatSelect {
             },
             "Item": {
               "location": "local",
-              "path": "/Users/fynn/Workspace/catalyst/core/src/components/cat-select/cat-select.tsx",
+              "path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
               "id": "src/components/cat-select/cat-select.tsx::Item"
             }
           },