npm - @haiilo/catalyst - Versions diffs - 3.0.2 → 4.1.0 - Mend

@haiilo/catalyst 3.0.2 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

package/dist/collection/components/cat-input/cat-input.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
+import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import log from 'loglevel';
-import { CatFormHint } from '../cat-form-hint/cat-form-hint';
+import { buildHintSection } from '../cat-form-hint/cat-form-hint-utils';
 import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
 let nextUniqueId = 0;
 /**
@@ -58,11 +58,18 @@ export class CatInput {
      * Type of form control.
      */
     this.type = 'text';
+    /**
+     * Fine-grained control over when the errors are shown. Can be `false` to
+     * never show errors, `true` to show errors on blur, or a number to show
+     * errors on change with the given delay in milliseconds.
+     */
+    this.errorUpdate = 0;
   }
   get id() {
     return this.identifier || this._id;
   }
   componentWillRender() {
+    this.watchErrorsHandler(this.errors);
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
     if (!this.label && !this.hasSlottedLabel) {
       log.warn('[A11y] Missing ARIA label on input', this);
@@ -97,48 +104,69 @@ export class CatInput {
   async clear() {
     this.value = '';
   }
+  watchErrorsHandler(value) {
+    if (this.errorUpdate === false) {
+      this.errorMap = undefined;
+    }
+    else {
+      this.errorMapSrc = Array.isArray(value)
+        ? value.map(error => ({ [error]: undefined }))
+        : value === true
+          ? {}
+          : value || undefined;
+    }
+  }
   render() {
+    var _a;
     return (h(Host, null,
       (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } },
         h("span", { part: "label" },
           (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label,
-          !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "input-optional", "aria-hidden": "true" },
+          !this.required && this.requiredMarker.startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" },
             "(",
             i18n.t('input.optional'),
             ")")),
-          this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "input-optional", "aria-hidden": "true" },
+          this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" },
             "(",
             i18n.t('input.required'),
             ")"))))),
       h("div", { class: {
           'input-wrapper': true,
           'input-round': this.round,
-          'input-disabled': this.disabled
+          'input-disabled': this.disabled,
+          'input-invalid': this.invalid
         }, onClick: () => this.input.focus() },
         this.textPrefix && (h("span", { class: "text-prefix", part: "prefix" }, this.textPrefix)),
         this.icon && !this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-prefix", size: "l" }),
         h("div", { class: "input-inner-wrapper" },
-          h("input", { ref: el => (this.input = el), id: this.id, class: {
+          h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.id, class: {
               'has-clearable': this.clearable && !this.disabled
-            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
+            }, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": ((_a = this.hint) === null || _a === void 0 ? void 0 : _a.length) ? this.id + '-hint' : undefined })),
           this.clearable && !this.disabled && this.value && (h("cat-button", { class: "clearable", icon: "cross-circle-outlined", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this) }))),
-        this.icon && this.iconRight && h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" }),
+        !this.invalid && this.icon && this.iconRight && (h("cat-icon", { icon: this.icon, class: "icon-suffix", size: "l" })),
+        this.invalid && (h("cat-icon", { icon: "alert-circle-outlined", class: "icon-suffix cat-text-danger", size: "l" })),
         this.textSuffix && (h("span", { class: "text-suffix", part: "suffix" }, this.textSuffix))),
-      this.hintSection));
+      buildHintSection(this.hostElement, this.id, this.hint, this.errorMap)));
   }
-  get hintSection() {
-    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
-    return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
+  get invalid() {
+    return !!this.errorMap;
   }
   onInput(event) {
     this.value = this.input.value;
     this.catChange.emit(event);
+    if (typeof this.errorUpdate === 'number') {
+      typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
+      this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);
+    }
   }
   onFocus(event) {
     this.catFocus.emit(event);
   }
   onBlur(event) {
     this.catBlur.emit(event);
+    if (this.errorUpdate !== false) {
+      this.errorMap = this.errorMapSrc;
+    }
   }
   static get is() { return "cat-input"; }
   static get encapsulation() { return "shadow"; }
@@ -554,10 +582,66 @@ export class CatInput {
       },
       "attribute": "value",
       "reflect": false
+    },
+    "errors": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean | string[] | ErrorMap",
+        "resolved": "boolean | string[] | undefined | { [key: string]: any; }",
+        "references": {
+          "ErrorMap": {
+            "location": "import",
+            "path": "../cat-form-hint/cat-form-hint-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The validation errors for this input. Will render a hint under the input\nwith the translated error message(s) `error.${key}`. If an object is\npassed, the keys will be used as error keys and the values translation\nparameters.\nIf the value is `true`, the input will be marked as invalid without any\nhints under the input."
+      },
+      "attribute": "errors",
+      "reflect": false
+    },
+    "errorUpdate": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean | number",
+        "resolved": "boolean | number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Fine-grained control over when the errors are shown. Can be `false` to\nnever show errors, `true` to show errors on blur, or a number to show\nerrors on change with the given delay in milliseconds."
+      },
+      "attribute": "error-update",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "nativeAttributes": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ [key: string]: string }",
+        "resolved": "undefined | { [key: string]: string; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Attributes that will be added to the native HTML input element."
+      }
     }
   }; }
   static get states() { return {
-    "hasSlottedLabel": {}
+    "hasSlottedLabel": {},
+    "errorMap": {}
   }; }
   static get events() { return [{
       "method": "catChange",
@@ -692,5 +776,9 @@ export class CatInput {
     }
   }; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "errors",
+      "methodName": "watchErrorsHandler"
+    }]; }
 }
 //# sourceMappingURL=cat-input.js.map

package/dist/collection/components/cat-input/cat-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.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';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/*\n Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n \n @slot hint - Optional hint element to be displayed with the input.\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 label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n /\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: true\n})\nexport class CatInput {\n private readonly _id = `cat-input-${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 /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Optional hint text(s) to be displayed with the input.\n /\n @Prop() hint?: string \| string[];\n\n /\n The name of an icon to be displayed in the input.\n /\n @Prop() icon?: string;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the input.\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 A maximum value for date, time and numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for date, time and numeric values.\n /\n @Prop() min?: number \| string;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n A textual prefix to be displayed in the input.\n /\n @Prop() textPrefix?: string;\n\n /\n A textual suffix to be displayed in the input.\n /\n @Prop() textSuffix?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Use round input edges.\n /\n @Prop() round = false;\n\n /\n Type of form control.\n /\n @Prop() type: InputType = 'text';\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string \| number;\n\n /\n Emitted when the value is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the input received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /\n Programmatically move focus to the input. 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 input. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the input.\n /\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\n }\n\n /\n Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n }\n\n render() {\n return (\n <Host>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"input-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </span>\n </label>\n )}\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n <div class=\"input-inner-wrapper\">\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.min}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"cross-circle-outlined\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n ></cat-button>\n )}\n </div>\n {this.icon && this.iconRight && <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint \|\| hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onInput(event: Event) {\n this.value = this.input.value;\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}
1	+ {"version":3,"file":"cat-input.js","sourceRoot":"","sources":["../../../src/components/cat-input/cat-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { buildHintSection, ErrorMap } from '../cat-form-hint/cat-form-hint-utils';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { InputType } from './input-type';\n\nlet nextUniqueId = 0;\n\n/*\n Inputs are used to allow users to provide text input when the expected input\n * is short. As well as plain text, Input supports various types of text,\n * including passwords and numbers.\n \n @slot hint - Optional hint element to be displayed with the input.\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 label - The label content.\n * @part prefix - The text prefix.\n * @part suffix - The text suffix.\n /\n@Component({\n tag: 'cat-input',\n styleUrl: 'cat-input.scss',\n shadow: true\n})\nexport class CatInput {\n private readonly _id = `cat-input-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n private errorMapSrc?: ErrorMap;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() errorMap?: ErrorMap;\n\n /\n Whether the label need a marker to shown if the input is required or optional.\n /\n @Prop() requiredMarker: 'none' \| 'required' \| 'optional' \| 'none!' \| 'optional!' \| 'required!' = 'optional';\n\n /\n Hint for form autofill feature.\n /\n @Prop() autoComplete?: string;\n\n /\n Whether the input should show a clear button.\n /\n @Prop() clearable = false;\n\n /\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n Optional hint text(s) to be displayed with the input.\n /\n @Prop() hint?: string \| string[];\n\n /\n The name of an icon to be displayed in the input.\n /\n @Prop() icon?: string;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n The label for the input.\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 A maximum value for date, time and numeric values.\n /\n @Prop() max?: number \| string;\n\n /\n A maximum length (number of characters) for textual values.\n /\n @Prop() maxLength?: number;\n\n /\n A minimum value for date, time and numeric values.\n /\n @Prop() min?: number \| string;\n\n /\n A minimum length (number of characters) for textual values.\n /\n @Prop() minLength?: number;\n\n /\n The name of the form control. Submitted with the form as part of a name/value pair.\n /\n @Prop() name?: string;\n\n /\n The placeholder text to display within the input.\n /\n @Prop() placeholder?: string;\n\n /\n A textual prefix to be displayed in the input.\n /\n @Prop() textPrefix?: string;\n\n /\n A textual suffix to be displayed in the input.\n /\n @Prop() textSuffix?: string;\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n A value is required or must be check for the form to be submittable.\n /\n @Prop() required = false;\n\n /\n Use round input edges.\n /\n @Prop() round = false;\n\n /\n Type of form control.\n /\n @Prop() type: InputType = 'text';\n\n /\n The value of the control.\n /\n @Prop({ mutable: true }) value?: string \| number;\n\n /\n The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n /\n @Prop() errors?: boolean \| string[] \| ErrorMap;\n\n /\n Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors on change with the given delay in milliseconds.\n /\n @Prop() errorUpdate: boolean \| number = 0;\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 value is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the input received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the input loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.watchErrorsHandler(this.errors);\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on input', this);\n }\n }\n\n /\n Programmatically move focus to the input. 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 input. Use this method instead of\n * `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the input.\n /\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\n }\n\n /\n Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.value = '';\n }\n\n @Watch('errors')\n watchErrorsHandler(value?: boolean \| string[] \| ErrorMap) {\n if (this.errorUpdate === false) {\n this.errorMap = undefined;\n } else {\n this.errorMapSrc = Array.isArray(value)\n ? value.map(error => ({ [error]: undefined }))\n : value === true\n ? {}\n : value \|\| undefined;\n }\n }\n\n render() {\n return (\n <Host>\n {(this.hasSlottedLabel \|\| this.label) && (\n <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n <span part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n {!this.required && this.requiredMarker.startsWith('optional') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.optional')})\n </span>\n )}\n {this.required && this.requiredMarker.startsWith('required') && (\n <span class=\"label-optional\" aria-hidden=\"true\">\n ({i18n.t('input.required')})\n </span>\n )}\n </span>\n </label>\n )}\n <div\n class={{\n 'input-wrapper': true,\n 'input-round': this.round,\n 'input-disabled': this.disabled,\n 'input-invalid': this.invalid\n }}\n onClick={() => this.input.focus()}\n >\n {this.textPrefix && (\n <span class=\"text-prefix\" part=\"prefix\">\n {this.textPrefix}\n </span>\n )}\n {this.icon && !this.iconRight && <cat-icon icon={this.icon} class=\"icon-prefix\" size=\"l\"></cat-icon>}\n <div class=\"input-inner-wrapper\">\n <input\n {...this.nativeAttributes}\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n class={{\n 'has-clearable': this.clearable && !this.disabled\n }}\n autocomplete={this.autoComplete}\n disabled={this.disabled}\n max={this.max}\n maxlength={this.maxLength}\n min={this.min}\n minlength={this.minLength}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.readonly}\n required={this.required}\n type={this.type}\n value={this.value}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-invalid={this.invalid ? 'true' : undefined}\n aria-describedby={this.hint?.length ? this.id + '-hint' : undefined}\n ></input>\n {this.clearable && !this.disabled && this.value && (\n <cat-button\n class=\"clearable\"\n icon=\"cross-circle-outlined\"\n icon-only=\"true\"\n size=\"s\"\n variant=\"text\"\n a11y-label={i18n.t('input.clear')}\n onClick={this.clear.bind(this)}\n ></cat-button>\n )}\n </div>\n {!this.invalid && this.icon && this.iconRight && (\n <cat-icon icon={this.icon} class=\"icon-suffix\" size=\"l\"></cat-icon>\n )}\n {this.invalid && (\n <cat-icon icon=\"alert-circle-outlined\" class=\"icon-suffix cat-text-danger\" size=\"l\"></cat-icon>\n )}\n {this.textSuffix && (\n <span class=\"text-suffix\" part=\"suffix\">\n {this.textSuffix}\n </span>\n )}\n </div>\n {buildHintSection(this.hostElement, this.id, this.hint, this.errorMap)}\n </Host>\n );\n }\n\n private get invalid() {\n return !!this.errorMap;\n }\n\n private errorUpdateTimeoutId?: number;\n private onInput(event: Event) {\n this.value = this.input.value;\n this.catChange.emit(event);\n if (typeof this.errorUpdate === 'number') {\n typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);\n this.errorUpdateTimeoutId = window.setTimeout(() => (this.errorMap = this.errorMapSrc), this.errorUpdate);\n }\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 if (this.errorUpdate !== false) {\n this.errorMap = this.errorMapSrc;\n }\n }\n}\n"]}

package/dist/collection/components/cat-radio/cat-radio.js CHANGED Viewed

@@ -75,7 +75,7 @@ export class CatRadio {
     return (h(Host, null,
       h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' },
         h("span", { class: "radio" },
-          h("input", { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
+          h("input", Object.assign({}, this.nativeAttributes, { ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) })),
           h("span", { class: "circle" })),
         h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)),
       this.hintSection));
@@ -278,6 +278,21 @@ export class CatRadio {
       "attribute": "label-left",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "nativeAttributes": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ [key: string]: string }",
+        "resolved": "undefined | { [key: string]: string; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Attributes that will be added to the native HTML input element."
+      }
     }
   }; }
   static get states() { return {

package/dist/collection/components/cat-radio/cat-radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.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;;;;;;;GAOG;AAMH,MAAM,OAAO,QAAQ;EALrB;IAMmB,QAAG,GAAG,aAAa,EAAE,YAAY,EAAE,CAAC;IAS5C,oBAAe,GAAG,KAAK,CAAC;IAEjC;;OAEG;IACsB,YAAO,GAAG,KAAK,CAAC;IAEzC;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAOzB;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAEnB;;OAEG;IACK,gBAAW,GAAG,KAAK,CAAC;IAO5B;;OAEG;IACK,aAAQ,GAAG,KAAK,CAAC;IAYzB;;OAEG;IACK,cAAS,GAAG,KAAK,CAAC;~~GA4G3B~~;~~EAtKC~~,IAAY,EAAE;IACZ,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,GAAG,CAAC;EACrC,CAAC;~~EAyED~~,mBAAmB;IACjB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC1E,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;MACxC,GAAG,CAAC,IAAI,CAAC,oCAAoC,EAAE,IAAI,CAAC,CAAC;KACtD;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;;KAEG;EAEH,KAAK,CAAC,OAAO;IACX,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;EACrB,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,EACpG,IAAI,EAAC,OAAO,kBACE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QAE7C,YAAM,KAAK,EAAC,OAAO;UACjB,~~aACE~~,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAChD,EAAE,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,EAAE,EAC9B,IAAI,EAAC,OAAO,EACZ,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,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,~~GAC9B~~;UACF,YAAM,KAAK,EAAC,QAAQ,GAAQ,CACvB;QACP,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,WAAW,CACZ,CACR,CAAC;EACJ,CAAC;EAED,IAAY,WAAW;IACrB,MAAM,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACzE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAC/B,EAAC,WAAW,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,cAAc,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,GAAI,CAC3F,CACF,CAAC;EACJ,CAAC;EAEO,QAAQ,CAAC,KAAY;IAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EAC7B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n \n @slot hint - Optional hint element to be displayed with the radio.\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 label - The label content.\n /\n@Component({\n tag: 'cat-radio',\n styleUrl: 'cat-radio.scss',\n shadow: true\n})\nexport class CatRadio {\n private readonly _id = `cat-radio-${++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 /\n Whether this radio is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Whether this radio is disabled.\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 radio 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 radio component.\n /\n @Prop() name?: string;\n\n /\n Whether the radio is required.\n /\n @Prop() required = false;\n\n /\n The value of the radio component.\n /\n @Prop() value?: string;\n\n /\n Optional hint text(s) to be displayed with the radio.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the radio component.\n /\n @Prop() labelLeft = false;\n\n /\n Emitted when the radio is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the radio received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on radio', this);\n }\n }\n\n /\n Programmatically move focus to the radio button. 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 radio button. Use this method\n * instead of `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the radio button.\n */\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\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 role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n >\n <span class=\"radio\">\n <input\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.identifier \|\| this.id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onChange.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n />\n <span class=\"circle\"></span>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint \|\| hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onChange(event: Event) {\n this.checked = true;\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}
1	+ {"version":3,"file":"cat-radio.js","sourceRoot":"","sources":["../../../src/components/cat-radio/cat-radio.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 Radio Buttons are graphical interface elements that allow user to choose\n * only one of a predefined set of mutually exclusive options.\n \n @slot hint - Optional hint element to be displayed with the radio.\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 label - The label content.\n /\n@Component({\n tag: 'cat-radio',\n styleUrl: 'cat-radio.scss',\n shadow: true\n})\nexport class CatRadio {\n private readonly _id = `cat-radio-${++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 /\n Whether this radio is checked.\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Whether this radio is disabled.\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 radio 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 radio component.\n /\n @Prop() name?: string;\n\n /\n Whether the radio is required.\n /\n @Prop() required = false;\n\n /\n The value of the radio component.\n /\n @Prop() value?: string;\n\n /\n Optional hint text(s) to be displayed with the radio.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the radio component.\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 radio is changed.\n /\n @Event() catChange!: EventEmitter;\n\n /\n Emitted when the radio received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the radio loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on radio', this);\n }\n }\n\n /\n Programmatically move focus to the radio button. 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 radio button. Use this method\n * instead of `input.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n /\n Programmatically simulate a click on the radio button.\n */\n @Method()\n async doClick(): Promise<void> {\n this.input.click();\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 role=\"radio\"\n aria-checked={this.checked ? 'true' : 'false'}\n >\n <span class=\"radio\">\n <input\n {...this.nativeAttributes}\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.identifier \|\| this.id}\n type=\"radio\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n onInput={this.onChange.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n />\n <span class=\"circle\"></span>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hintSection}\n </Host>\n );\n }\n\n private get hintSection() {\n const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n return (\n (this.hint \|\| hasSlottedHint) && (\n <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n )\n );\n }\n\n private onChange(event: Event) {\n this.checked = true;\n this.catChange.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"]}

package/dist/collection/components/cat-select/cat-select.css CHANGED Viewed

@@ -17,6 +17,240 @@
   margin: 0 !important;
 }
+.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-bg-primary-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.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-text-primary,
+.cat-link-primary {
+  color: rgb(var(--cat-primary-text, 0, 129, 148)) !important;
+}
+.cat-link-primary,
+.cat-text-primary-hover {
+  transition: color 0.13s;
+}
+.cat-link-primary:hover,
+.cat-text-primary-hover:hover {
+  color: rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important;
+}
+.cat-link-primary:active,
+.cat-text-primary-hover:active {
+  color: rgb(var(--cat-primary-text-active, 2, 99, 113)) !important;
+}
+.cat-bg-primaryInverted {
+  background-color: #93b4f2 !important;
+  color: black !important;
+}
+.cat-bg-primaryInverted-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.cat-bg-primaryInverted-hover:hover {
+  background-color: #93b4f2 !important;
+  color: black !important;
+}
+.cat-text-primaryInverted,
+.cat-link-primaryInverted {
+  color: #93b4f2 !important;
+}
+.cat-link-primaryInverted,
+.cat-text-primaryInverted-hover {
+  transition: color 0.13s;
+}
+.cat-link-primaryInverted:hover,
+.cat-text-primaryInverted-hover:hover {
+  color: #93b4f2 !important;
+}
+.cat-link-primaryInverted:active,
+.cat-text-primaryInverted-hover:active {
+  color: #93b4f2 !important;
+}
+.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-bg-secondary-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.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-text-secondary,
+.cat-link-secondary {
+  color: rgb(var(--cat-secondary-text, 0, 0, 0)) !important;
+}
+.cat-link-secondary,
+.cat-text-secondary-hover {
+  transition: color 0.13s;
+}
+.cat-link-secondary:hover,
+.cat-text-secondary-hover:hover {
+  color: rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important;
+}
+.cat-link-secondary:active,
+.cat-text-secondary-hover:active {
+  color: rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important;
+}
+.cat-bg-secondaryInverted {
+  background-color: #697687 !important;
+  color: black !important;
+}
+.cat-bg-secondaryInverted-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.cat-bg-secondaryInverted-hover:hover {
+  background-color: #697687 !important;
+  color: black !important;
+}
+.cat-text-secondaryInverted,
+.cat-link-secondaryInverted {
+  color: white !important;
+}
+.cat-link-secondaryInverted,
+.cat-text-secondaryInverted-hover {
+  transition: color 0.13s;
+}
+.cat-link-secondaryInverted:hover,
+.cat-text-secondaryInverted-hover:hover {
+  color: white !important;
+}
+.cat-link-secondaryInverted:active,
+.cat-text-secondaryInverted-hover:active {
+  color: white !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-bg-success-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.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-text-success,
+.cat-link-success {
+  color: rgb(var(--cat-success-text, 0, 132, 88)) !important;
+}
+.cat-link-success,
+.cat-text-success-hover {
+  transition: color 0.13s;
+}
+.cat-link-success:hover,
+.cat-text-success-hover:hover {
+  color: rgb(var(--cat-success-text-hover, 0, 117, 78)) !important;
+}
+.cat-link-success:active,
+.cat-text-success-hover:active {
+  color: rgb(var(--cat-success-text-active, 0, 105, 70)) !important;
+}
+.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-bg-warning-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.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-text-warning,
+.cat-link-warning {
+  color: rgb(var(--cat-warning-text, 159, 97, 0)) !important;
+}
+.cat-link-warning,
+.cat-text-warning-hover {
+  transition: color 0.13s;
+}
+.cat-link-warning:hover,
+.cat-text-warning-hover:hover {
+  color: rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important;
+}
+.cat-link-warning:active,
+.cat-text-warning-hover:active {
+  color: rgb(var(--cat-warning-text-active, 159, 97, 0)) !important;
+}
+.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-bg-danger-hover {
+  transition: background-color 0.13s, color 0.13s;
+}
+.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-text-danger,
+.cat-link-danger {
+  color: rgb(var(--cat-danger-text, 217, 52, 13)) !important;
+}
+.cat-link-danger,
+.cat-text-danger-hover {
+  transition: color 0.13s;
+}
+.cat-link-danger:hover,
+.cat-text-danger-hover:hover {
+  color: rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important;
+}
+.cat-link-danger:active,
+.cat-text-danger-hover:active {
+  color: rgb(var(--cat-danger-text-active, 174, 42, 10)) !important;
+}
+.cat-active {
+  color: rgb(var(--cat-primary-text, 0, 129, 148)) !important;
+}
+.cat-muted {
+  color: rgb(var(--cat-font-color-muted, 105, 118, 135)) !important;
+}
+.cat-text-reset {
+  color: inherit !important;
+}
+.cat-link-reset {
+  color: inherit !important;
+  text-decoration: inherit !important;
+}
 :host {
   display: flex;
   flex-direction: column;
@@ -61,13 +295,27 @@ label.hidden {
   box-shadow: 0 0 0 1px rgb(var(--cat-border-color-dark, 215, 219, 224));
   transition: box-shadow 0.13s linear;
   padding: 0.25rem;
+  /* stylelint-disable property-no-vendor-prefix */
+  /* stylelint-enable property-no-vendor-prefix */
 }
 .select-wrapper:not(.select-disabled):hover {
   box-shadow: 0 0 0 2px rgb(var(--cat-border-color-dark, 215, 219, 224));
 }
+.select-wrapper:not(.select-disabled):hover.select-invalid {
+  box-shadow: 0 0 0 2px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+}
 .select-wrapper:not(.select-disabled):focus-within {
   outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
 }
+.select-wrapper:not(.select-disabled):focus-within.select-invalid {
+  outline: 2px solid rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+}
+.select-wrapper.select-invalid {
+  box-shadow: 0 0 0 1px rgba(var(--cat-danger-bg, 217, 52, 13), 0.2);
+}
+.select-wrapper:has(input:-webkit-autofill), .select-wrapper:has(input:-webkit-autofill):hover, .select-wrapper:has(input:-webkit-autofill):focus {
+  background-color: #e8f0fe;
+}
 :host(.cat-error) .select-wrapper {
   box-shadow: 0 0 0 1px rgb(var(--cat-danger-bg, 217, 52, 13));
@@ -150,6 +398,10 @@ cat-spinner {
   padding: 0.375rem;
 }
+.icon-suffix {
+  padding: 0.25rem;
+}
 .select-btn-open {
   transform: rotate(180deg);
 }