@haiilo/catalyst 10.35.0 → 10.37.0

package/dist/esm/cat-alert_30.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-30afba72.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-e8c0ddf2.js';
 import { e as createErrorClass, O as Observable, f as errorContext, E as EMPTY_SUBSCRIPTION, S as Subscription, g as arrRemove, h as operate, i as createOperatorSubscriber, j as innerFrom, k as executeSchedule, l as isFunction, m as identity, n as from, p as popScheduler, q as isArrayLike, r as isScheduler, s as popNumber, t as noop, u as log, a as catI18nRegistry, c as commonjsGlobal$1, d as catIconRegistry, o as of } from './of-e4ec2eb4.js';
 
 const ObjectUnsubscribedError = createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {
@@ -1350,6 +1350,13 @@ const CatCheckbox = class {
         this.catChange = createEvent(this, "catChange", 7);
         this.catFocus = createEvent(this, "catFocus", 7);
         this.catBlur = createEvent(this, "catBlur", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
         this._id = `cat-checkbox-${nextUniqueId$a++}`;
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
@@ -1378,6 +1385,7 @@ const CatCheckbox = class {
         this.updateResolved();
     }
     componentWillRender() {
+        this.internals.setFormValue(this.checked ? (this.value ?? 'on') : (this.noValue ?? null));
         this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
         this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     }
@@ -1399,19 +1407,20 @@ const CatCheckbox = class {
         this.input.blur();
     }
     render() {
-        return (h(Host, { key: 'c6446d420b369604f4dd80549c1b14ec8a5534bf' }, h("label", { key: 'd56e412e5e1b13c88a6c38ae203b572139f363bd', htmlFor: this.id, class: {
+        return (h(Host, { key: '05b68d962533497b453115b800e3ea303158212c' }, h("label", { key: 'd15945284e20c6d58cf2df7688b036b2e5425f0f', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            } }, h("input", { key: '0b6a5475785d4dc765cd55b5718bdd234d62a6c9', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '1102aa4097d1fe8d6c301b134227a5a307a33242', class: "box", "aria-hidden": "true" }, h("svg", { key: '0a77cfbfd0a67e48d4f5cedbaca3bd449fe75219', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: '75ef61d7183e175b4de406ed3ac13664c4e51885', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: '25bd595e54be48df3d5420fe38a3f80e00784550', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: '8afc51523d4e39255c6c2434994311d31c48e4eb', points: "1.5 5 10.5 5" }))), h("span", { key: '3ce6b8c09b706068720084c85ad6cf5ed38761a2', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && h("slot", { key: '27b7301494cfafaed271b75732950441c0c34ce7', name: "label" })) || this.label, h("span", { key: 'dac83db2245ad29bd20b3904051d56cfd169aa5e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'fc144468a305d1982362232021f9222a0c41ad37', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'a08ed77111677146007d6c24571a8311aed72d10', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (h("div", { key: '9976b27a7d673daeb05dd45154c2ad341b7a521b', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '8751a6a323b05995825a563b973cc76b5ca100f8', class: "box-placeholder" }), h(CatFormHint, { key: '2d057ca07be5f2b316fb5d83ed97f560d30b1af6', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            } }, h("input", { key: 'a5d6f3093e75db63e7c300253518e42106760a52', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '0c65b6e371a36520133fd172be153df28196491d', class: "box", "aria-hidden": "true" }, h("svg", { key: '044cab34d712b243c9329922482df42694950cfc', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: 'a573d56014dc292b1f41cb1b01f28d814b4a5516', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: 'f09647dc93bfb204ce076dc77ec32ca9d024ea65', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: '9cb83216b18ba26d53936911c73e2f3de67916c3', points: "1.5 5 10.5 5" }))), h("span", { key: '84c1bee050ca233c8fdda98ceace71de343a350d', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && h("slot", { key: '61a771b1bad26a055baed80e762c0aaac09bc3f4', name: "label" })) || this.label, h("span", { key: '5a330f42046052f38bb46e149fc029daa8fb8f3e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '4579818c0b721db3e9f177c9510072eaef451dba', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'a5ca8a8bc0753aef66d36f86f6c61c31ec4a4069', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (h("div", { key: '15312bf5c2d948928fb70e6055b28ae996ffdd1b', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: 'f1bf992ec81de9aa642093aafa8bd8da73d237f8', class: "box-placeholder" }), h(CatFormHint, { key: '66354c340d274a802a21eac6d95b1e4390cfde71', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
     }
     onInput() {
         this.checked = this.input.checked;
+        this.internals.setFormValue(this.input.checked ? (this.value ?? 'on') : (this.noValue ?? null));
         this.indeterminate = this.input.indeterminate;
         this.updateResolved();
         this.catChange.emit(this.resolvedValue);
@@ -1425,6 +1434,7 @@ const CatCheckbox = class {
     updateResolved() {
         this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);
     }
+    static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
 };
 CatCheckbox.style = CatCheckboxStyle0;
@@ -8675,6 +8685,7 @@ const CatDropdown = class {
          */
         this.hasInitialFocus = false;
         this.placement = 'bottom-start';
+        this.justify = false;
         this.noAutoClose = false;
         this.arrowNavigation = 'vertical';
         this.noResize = false;
@@ -8789,7 +8800,7 @@ const CatDropdown = class {
         }, timeTransitionS);
     }
     render() {
-        return (h(Host, { key: '8dd26958b3df631a6186f54e27214690b20e7349' }, h("slot", { key: '955019546e467a7e4a91ae4f2523ca920bc9b64c', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '858ba852906f7646e69501d49eba1e8ad8964c2e', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '3a78c9967f6e38396d7bb399ecef05de74e55b78', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: '4b229c663a5ba4caee5c258b7ee8a92b7e5618d0', name: "content" }))));
+        return (h(Host, { key: 'abd5eb8eb84977f0981113b3f7958ec2a31a47bb' }, h("slot", { key: '6049c92c9b30e3fba338fb94d17543476620fe37', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '6eb5f52f222ad08b4a7f0d41d4ace943b371a6b7', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: 'e186f63a79fcc457bee344ee188fef37f2c27383', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { key: 'c0060ac95085f3794f61fd88922368c59a31b1b7', name: "content" }))));
     }
     componentDidLoad() {
         this.initAnchor();
@@ -8837,14 +8848,19 @@ const CatDropdown = class {
         }
         return trigger;
     }
-    update(anchorElement) {
+    update(anchorElement, justify = this.justify) {
         if (anchorElement) {
             const resize = this.noResize
                 ? []
                 : [
                     size({
                         padding: CatDropdown.OFFSET,
-                        apply({ availableWidth, availableHeight, elements }) {
+                        apply({ rects, availableWidth, availableHeight, elements }) {
+                            if (justify) {
+                                Object.assign(elements.floating.style, {
+                                    minWidth: `${rects.reference.width}px`
+                                });
+                            }
                             Object.assign(elements.floating.style, {
                                 maxWidth: `${availableWidth}px`,
                                 maxHeight: `${availableHeight}px`
@@ -10511,6 +10527,13 @@ const CatInput = class {
         this.catChange = createEvent(this, "catChange", 7);
         this.catFocus = createEvent(this, "catFocus", 7);
         this.catBlur = createEvent(this, "catBlur", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
         this._id = `cat-input-${nextUniqueId$7++}`;
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
@@ -10555,6 +10578,7 @@ const CatInput = class {
         this.onErrorsChanged(this.errors, undefined, false);
     }
     componentWillRender() {
+        this.internals.setFormValue(this.value ?? null);
         this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
         this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
         this.hasSlottedCounter = !!this.hostElement.querySelector('[slot="counter"]');
@@ -10610,19 +10634,19 @@ const CatInput = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h("div", { key: '65536a5d26ff0ebe45920b352cdfa4e28719efeb', class: {
+        return (h("div", { key: '72c7cf2c86831c1aca03467ec92149fa0a58b05a', class: {
                 'input-field': true,
                 'input-horizontal': this.horizontal
-            } }, h("div", { key: '1492e4f53056086c1b01d9314b368a301d36667b', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '6ced806dcfcbe1eb0f2a6ebcd31f4ff4a3280e58', htmlFor: this.id, part: "label" }, h("span", { key: '23bbe79e6af8b0869510bc43533e02b60fd345ac', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'd1ccafcf2d7f49eedf400d78b678fbafabb2c158', name: "label" })) || this.label, h("div", { key: '7ee3879f60ec33a414406e040da4f93c24ccd5ea', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '58f31ad7dc3a108f6dde1ec88c482a5a3c74fcbd', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '63d78c225748e457899f55d964bcb1d2a0da851c', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: 'b36623a31118624beca4d4005dbf0480e476cb53', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '75d9b67e7cf19f2526e1e036de0efce6b02d2fa5', class: "input-container" }, h("div", { key: '33b2d24c18c7e4b78bcaf569787f4153237f0686', class: "input-outer-wrapper" }, h("div", { key: '50f66d6a718bc66162ce93d3f3ce75b53afd193a', class: {
+            } }, h("div", { key: '7cc76563550305d886b1a18d2344bf59b27f6fc2', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '247ad3243e98e5ecf1002e59a84f8f2d1b4f17f4', htmlFor: this.id, part: "label" }, h("span", { key: '0d5f489a87735fc11c9dbacf9acded6d7523926a', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '3ade7278530f2b79a3dda8db8923392b84629feb', name: "label" })) || this.label, h("div", { key: '0c1bea5d04c65ceace3ba7a10f7d513301709f86', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '437f7c224b323514b2a4dcca8ffd6cdc83d3c384', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'cbc29c60d0f624bcceb1b5e55ba6bc38afc8d514', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: 'f00cdace4e8f842019d7ffae484aca11925e2bc2', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '8c961aaf1d0451118d9f5ae583a228be54b320eb', class: "input-container" }, h("div", { key: '6e9e98caaabea18e4a71b8b09baea5355f2eac7b', class: "input-outer-wrapper" }, h("div", { key: '38a5db004dbee08ce542dd36bf0da13156887e26', class: {
                 'input-wrapper': true,
                 'input-round': this.round,
                 'input-readonly': this.readonly,
                 'input-disabled': this.disabled,
                 'input-invalid': this.invalid
-            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: '9549568c8b7d088babf19125a063270863d545a3', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: 'fbd58b96277fc28e9de49ffd355471811fb16257', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: '9ea5b2502d1364de65b656c064124329ace8a074', class: "input-inner-wrapper" }, h("input", { key: '80f00d9abc53fbc3cd6fa261663f6c9e940ec213', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
+            }, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: '350c53ffd8b59df4aa63d23c44213425df9add95', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: '5f4794dac4ded82db99a395f1fe34fa9d393498f', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: '5514838423e9ecfed27f877edc2bedaeeebb1584', class: "input-inner-wrapper" }, h("input", { key: '2dd5de3d46df35470caf488d3f48b5339081c537', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
                 'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
                 'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
-            }, 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.isPasswordShown ? 'text' : 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": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: 'f301a2b57d36d2005e8705e07ea59dd32e54691a', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: '8a9e442e985f5654ae1a2dc4ad7e24939e2275c4', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && h("cat-spinner", { key: '50ef079a4d7a193d367817a0afa3db8be839b4a6', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: '8ceedd341d85faebb2ebbb1d60b137f9e866aa05', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '3be8071c0d5d25d6607fd40547d2405c4cd1b7bb', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: '7019774d260c7c59c33a2dc1d82c6f4fa1f45b45', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'd3882acee81f3456c1d7ab86469b12deed42debe', name: "addon" })), this.hasHint && (h(CatFormHint, { key: '3dce699be6ee391d0aee55735959ed69501e52ff', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
+            }, 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.isPasswordShown ? 'text' : 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": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: '0392b61e401ad12bcc32fe6de7f2acdf49184093', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: 'c33c6b188af0d2ccbf67b4a3527d7dc53af8a1fb', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && h("cat-spinner", { key: '3c51656392e532a3a16efcc5dbf181c40b96ed32', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: 'f3a527250b2ab0ae5bb56217366cabe00c5e7bee', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '063104b3c65eceb1260109c0f55944ca39c5c2ac', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: '0508e322d57cc28a245a8e1fe2f16e02af04679b', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'b5ea42f17934631b97c05c0ccfbadd8a1554d779', name: "addon" })), this.hasHint && (h(CatFormHint, { key: '549e082c4e1ff946d2d26ce3843db26af96333d3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -10632,6 +10656,7 @@ const CatInput = class {
     }
     onInput() {
         this.value = this.input.value;
+        this.internals.setFormValue(this.input.value);
         this.catChange.emit(this.value);
         this.showErrorsIfTimeout();
     }
@@ -10675,6 +10700,7 @@ const CatInput = class {
         return undefined;
     }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "errors": ["onErrorsChanged"]
@@ -13564,6 +13590,13 @@ const CatTextarea = class {
         this.catChange = createEvent(this, "catChange", 7);
         this.catFocus = createEvent(this, "catFocus", 7);
         this.catBlur = createEvent(this, "catBlur", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
         this._id = `cat-textarea-${nextUniqueId$2++}`;
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
@@ -13597,6 +13630,7 @@ const CatTextarea = class {
         this.onErrorsChanged(this.errors, undefined, false);
     }
     componentWillRender() {
+        this.internals.setFormValue(this.value ?? null);
         this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
         this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
         this.hasSlottedCounter = !!this.hostElement.querySelector('[slot="counter"]');
@@ -13643,15 +13677,15 @@ const CatTextarea = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: 'e2a3f362d3833daeb90de8508386d89560ee8528' }, h("div", { key: '82bda8d8819611f533a7221b2fb9008b1c372182', class: {
+        return (h(Host, { key: '15b9959f246c2252a40612928bcbbb3062f5ee33' }, h("div", { key: '559389b16d2ffbc57f220f042a8bf5406ab38c46', class: {
                 'textarea-field': true,
                 'textarea-horizontal': this.horizontal
-            } }, h("div", { key: '96ae717f2d9c20777fb324273613970a0870563c', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'a5fe918f9fd2fe91ea96cc24ead8a416ccba9c88', htmlFor: this.id, part: "label" }, h("span", { key: 'b72186d1932a21ea4f87ba8d58acff0f5b98a1f5', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'debd137e805f82b0dec034f742f8fa28f6b86ac0', name: "label" })) || this.label, h("div", { key: '5ae8fc21bf6ae73ded06fcad0dc8f28573ae7fa4', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '24ba8152d46660e2c04a5e954a2a08e27b4a0f69', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'f20e81de8bf25a4e15cae8fe05b7a551da19e931', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: '51e7747f43e037fe59ecb913500992b07a1f0bf8', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '797dc10a60ffd28a8721f8cac896c0a81dfd4a84', class: "textarea-container" }, h("div", { key: '837b1088c66a0f727c34fdf236ac71a28498c7ea', class: {
+            } }, h("div", { key: '5b02ba0adc0df7aa500f4031bbeab1b2c7ab8c12', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '3b40ff524f852b431f6e98197810503d981ee315', htmlFor: this.id, part: "label" }, h("span", { key: 'afcad9c98545e36b1d1f199bf166145114932df1', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '6846020e1fa1600ff7bbc2cabc789b7289aed021', name: "label" })) || this.label, h("div", { key: '92ea11607812b8f3892aee8c0ce4ac2ca8dd5e02', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '47ea9bca97afbfe7fa4433260311342425fbfeda', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '9c084e2bc9f2cd6c601bd43d2dc01af7ce9bfa7d', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: '1de2f7b5006f76b79b730fa75eff5829e29dc113', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: 'b06f84a61994d2648a154b50fc2b75bb440901ff', class: "textarea-container" }, h("div", { key: '7e64f6176bd76f10c20c7fc952ba1ac55ad2e401', class: {
                 'textarea-wrapper': true,
                 'textarea-readonly': this.readonly,
                 'textarea-disabled': this.disabled,
                 'textarea-invalid': this.invalid
-            } }, h("textarea", { key: '152c1f61fe00f06617691d8321ac2e9db40c15e2', "data-test": this.testId, ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, autocomplete: this.autoComplete, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, 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": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (h("cat-icon", { key: '198ba70858ab298eff9acf15fa22568182f51d4e', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: 'c7f40da034a826daf1bb83157ac6ef8c1e340b18', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
+            } }, h("textarea", { key: '04189852da504f91cb6219aefb58c1ed393996f1', "data-test": this.testId, ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, autocomplete: this.autoComplete, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, 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": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (h("cat-icon", { key: '794c3208f8a8db16c912960b643a6f5207496111', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '96a271ee88d1608283efbc5f8913586da8e787e3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint || this.invalid;
@@ -13661,6 +13695,7 @@ const CatTextarea = class {
     }
     onInput() {
         this.value = this.textarea.value;
+        this.internals.setFormValue(this.textarea.value);
         this.catChange.emit(this.value);
         this.showErrorsIfTimeout();
     }
@@ -13692,6 +13727,7 @@ const CatTextarea = class {
         }
     }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
         "errors": ["onErrorsChanged"]
@@ -13977,6 +14013,13 @@ const CatToggle = class {
         this.catChange = createEvent(this, "catChange", 7);
         this.catFocus = createEvent(this, "catFocus", 7);
         this.catBlur = createEvent(this, "catBlur", 7);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
         this._id = `cat-toggle-${nextUniqueId$1++}`;
         this.hasSlottedLabel = false;
         this.hasSlottedHint = false;
@@ -14003,6 +14046,7 @@ const CatToggle = class {
         this.updateResolved();
     }
     componentWillRender() {
+        this.internals.setFormValue(this.checked ? (this.value ?? 'on') : (this.noValue ?? null));
         this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
         this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     }
@@ -14025,19 +14069,20 @@ const CatToggle = class {
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: '328274b13868a35dc75929bba15971a1589e9ee6' }, h("label", { key: '824121864274f6e3258a26629d9caa893a44b4fe', htmlFor: this.id, class: {
+        return (h(Host, { key: '4648a8de33b6a63ba94cd5fd15b6e3e65986470d' }, h("label", { key: '063aa2a20504db693e4ae6d96733f96217dcc4b4', htmlFor: this.id, class: {
                 'is-hidden': this.labelHidden,
                 'is-disabled': this.disabled,
                 'label-left': this.labelLeft,
                 'align-center': this.alignment === 'center',
                 'align-end': this.alignment === 'bottom'
-            } }, h("input", { key: '66d14ba350b87d02c97bf27d02b14b46cff4e672', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '9c2e70feaa9117d8502df8965a9bd71a622ce98f', class: "toggle" }), h("span", { key: '663081947bb05b1ddbc7abcb47b0b223a30328d9', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '50fb69084a1254c06814002cdbd47fe1b719a114', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '78bcefa9a6979bc157adc03a8f16c04d5d4bfa92', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '99bf793f3e9f921450ead727bc348ba4d31fff00', class: "toggle-placeholder" }), h(CatFormHint, { key: '3da75a5e4f34a65f5b866829faa4f904436a3b25', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+            } }, h("input", { key: 'd7ed53b6668b5335621e92fe648f28d34e43d371', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '852f811c47488c5ee7ba5536c79c82502dd18f92', class: "toggle" }), h("span", { key: '00efe1901a1b2ad93b24362124c7d5b604ca62a9', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: '039e0fdcd80e110bb1b2ab6ac74472ff9d2e82f4', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '4c59d7a015ac1d0c9430e569244ba20bd71886e2', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '53f611eaded0a9048c79d82a444144c104589208', class: "toggle-placeholder" }), h(CatFormHint, { key: '250ebfbbbeafe28c1e47c857c6af1ee2429edcb5', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
     }
     onInput() {
         this.checked = this.input.checked;
+        this.internals.setFormValue(this.input.checked ? (this.value ?? 'on') : (this.noValue ?? null));
         this.updateResolved();
         this.catChange.emit(this.resolvedValue);
     }
@@ -14051,6 +14096,7 @@ const CatToggle = class {
         this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);
     }
     static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
 };
 CatToggle.style = CatToggleStyle0;