@designsystem-se/af 37.0.2-beta.1 → 38.0.0

package/dist/collection/components/_form/form-checkbox/form-checkbox.js

@@ -14,6 +14,8 @@ export class FormCheckbox {
     constructor() {
         this.dirty = false;
         this.touched = false;
+        this.focusVisible = false;
+        this.focusMethod = null;
         this.afInputRef = undefined;
         this.afLabel = undefined;
         this.afVariation = FormCheckboxVariation.PRIMARY;
@@ -52,7 +54,16 @@ export class FormCheckbox {
      * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
      */
     focusOnInput() {
+        this.focusVisible = this.focusMethod !== 'pointer';
         this._input.focus();
+        this.focusMethod = null;
+    }
+    /**
+     * Lyssnar på pointerdown för att kunna avgöra om fokus sätts via tangentbord eller mus/pekinteraktion.
+     * @en Listens for pointerdown to determine if focus is set via keyboard or mouse/touch interaction.
+     */
+    handlePointerDown() {
+        this.focusMethod = 'pointer';
     }
     componentWillLoad() {
         this.value = this.afValue;
@@ -65,6 +76,7 @@ export class FormCheckbox {
     }
     get cssModifiers() {
         return {
+            'digi-form-checkbox--focus-visible': this.focusVisible,
             'digi-form-checkbox--error': this.afValidation === FormCheckboxValidation.ERROR,
             'digi-form-checkbox--warning': this.afValidation === FormCheckboxValidation.WARNING,
             'digi-form-checkbox--primary': this.afVariation === FormCheckboxVariation.PRIMARY,
@@ -98,7 +110,7 @@ export class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: '510236a0bc0048a6a657f366a3107de346109636', tabindex: -1 }, h("div", { key: 'cd0fa14b3b6c6f2455bc6f50a81ca42f0329c7f1', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '98053e7e641744319df5f9331f9a92badd6d3fd2', class: "digi-form-checkbox__input", ref: (el) => {
+        return (h(Host, { key: 'd7e12f0914eb5fc16e1209e0750a73efd66fca33', tabindex: -1 }, h("div", { key: 'b33d1c998d5ae378bb8696252532856b13725e9f', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '727323a21a37e0261e0a977d156973299348e624', class: "digi-form-checkbox__input", ref: (el) => {
                 var _a;
                 this._input = el;
                 (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
@@ -106,7 +118,7 @@ export class FormCheckbox {
                 ? null
                 : `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormCheckboxValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: 'b32b615db271a2d7bb76edc8596f0bbbf15e63c9', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '85524659643995903e06178f6085914d79fbba67', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '4c9c218bd9fe34fe036a33853735657fea7a4d42', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '233961330af245e0aa18ad7dd5ac15ee904f7fee', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '92dfa2221b06f2103bcb1790c78a9eca5f75bda0', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '6de87be41c6794767c89fa239a85785e56f1d25f', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
     }
     static get is() { return "digi-form-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -576,7 +588,9 @@ export class FormCheckbox {
     static get states() {
         return {
             "dirty": {},
-            "touched": {}
+            "touched": {},
+            "focusVisible": {},
+            "focusMethod": {}
         };
     }
     static get events() {
@@ -771,6 +785,12 @@ export class FormCheckbox {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "handlePointerDown",
+                "target": undefined,
+                "capture": false,
+                "passive": true
             }];
     }
 }

package/dist/collection/components/_form/form-error-list/form-error-list.js

@@ -50,7 +50,7 @@ export class FormErrorList {
         this.afOnClickLink.emit({ id });
     }
     render() {
-        return (h("div", { key: '20c0abb4ab980259a7df09361582ca810f3c7e49', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: '963c583b7a4b48aad78244ee152f3e667fa5a84b', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: '64683c5c4291245db96757ecc62dc7611f440f46', "af-variation": TypographyVariation.SMALL }, h("p", { key: '56aecfbaf54858ce376c121061745364c445e72c', class: "digi-form-error-list__description" }, this.afDescription))), h("slot", { key: 'f09680d52c7895a1a888456e5b8e1f605fdf173b' }))));
+        return (h("div", { key: 'fc8938c08154c626d2adaabf937d9dbe2a8e5081', class: "digi-form-error-list", id: this.afId }, h("digi-notification-alert", { key: '5b40a2ad599aa762aa7e99c53a800036a6a13803', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": NotificationAlertVariation.DANGER }, this.afDescription && (h("digi-typography", { key: 'd572fbb4b86f28bd4691cb794ea3a4d0178bb6d1', "af-variation": TypographyVariation.SMALL }, h("p", { key: '021b86a736414bacad64f235b17b80d991564cf0', class: "digi-form-error-list__description" }, this.afDescription))), h("slot", { key: 'acc3bc00c90958b753ae608e40383aa0cb725350' }))));
     }
     static get is() { return "digi-form-error-list"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-fieldset/form-fieldset.js

@@ -20,7 +20,7 @@ export class FormFieldset {
             this.afErrorMessageIsAlert !== 'false');
     }
     render() {
-        return (h("fieldset", { key: '2a3aeddb712d49ff99f788867ac270f563f34454', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (h("legend", { key: 'a2e44584d821be6b1fd71a04d9313fdb572b8390', class: "digi-form-fieldset__legend" }, this.afLegend)), h("slot", { key: '072437bb8dd5064642f96c605388957016423360' }), h("div", { key: '57859d430e16c47b4fd70174f13b04b9dec61561', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormFieldsetValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'b74841c651c2a9c0822b2eaeb3d21be617b279a8', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
+        return (h("fieldset", { key: '29ecbd04ee5123d1b3acf9ee3e842564c2d50367', class: "digi-form-fieldset", name: this.afName, form: this.afForm, id: this.afId }, this.afLegend && (h("legend", { key: '1571695ba1c78ed305ad0f3ee66e0026cdf0dcd3', class: "digi-form-fieldset__legend" }, this.afLegend)), h("slot", { key: 'c32976dfc7b74adb2b693b73e969d28d15848302' }), h("div", { key: '2753776b8376b6adaec15c619422c51305eca8ac', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormFieldsetValidation.NEUTRAL && (h("digi-form-validation-message", { key: '480e90b969af570cee1fd8c50d72214480f9bb48', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
     }
     static get is() { return "digi-form-fieldset"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-file-upload/form-file-upload.css

@@ -9,7 +9,6 @@ License: none (public domain)
   --digi--form-file-upload--color--background--medium--hover: var(--digi--color--background--interactive--hover--secondary);
   --digi--form-file-upload--color--background--large--default: var(--digi--color--background--interactive--default--quaternary);
   --digi--form-file-upload--color--background--large--hover: var(--digi--color--background--interactive--hover--secondary);
-  --digi--form-file-upload--color--background--uploaded-files: var(--digi--color--background--secondary-elevated);
   --digi--form-file-upload--color--border--small--default: var(--digi--color--border--interactive--default--on-input-nuance);
   --digi--form-file-upload--color--border--small--hover: var(--digi--color--border--interactive--hover--primary);
   --digi--form-file-upload--color--border--medium--default: var(--digi--color--border--interactive--default--on-input-nuance);
@@ -63,7 +62,7 @@ License: none (public domain)
   font-family: var(--digi--global--typography--font-family--default);
 }
 :host .digi-form-file-upload--small {
-  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
   --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--small--default);
   --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--small--hover);
   --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--small--default);
@@ -77,7 +76,7 @@ License: none (public domain)
   --ICON--PADDING: var(--digi--form-file-upload--padding--small--icon);
 }
 :host .digi-form-file-upload--medium {
-  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
   --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--medium--default);
   --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--medium--hover);
   --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--medium--default);
@@ -91,7 +90,7 @@ License: none (public domain)
   --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);
 }
 :host .digi-form-file-upload--large {
-  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
   --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--large--default);
   --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--large--hover);
   --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--large--default);

package/dist/collection/components/_form/form-file-upload/form-file-upload.js

@@ -557,22 +557,22 @@ export class FormFileUpload {
             } }, this.renderFiles())));
     }
     render() {
-        return (h(Fragment, { key: 'fa66e9f8a9cc1ab9c0e850aaa7091612a40e3179' }, h("digi-util-breakpoint-observer", { key: 'e31966e4a3ac5ee7d17236d55b2fcba3a5e5b217', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '7def9fd833ee627f46af20ce59982e372c758289', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'b7d36f50ec9a5fa413784ac31a7ef77771be2626', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '15afcf3f1321dc6454094b6f7a5f1e6cf66758bd', class: {
+        return (h(Fragment, { key: '1104991979216e10bd2e137de392134a9dd970f3' }, h("digi-util-breakpoint-observer", { key: '645a8f2849a39c068b77fa7c6ddfd726e834b3b2', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: 'c6b2785961f0e0b0cb2b2ccb7da42d663b9e9e3b', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'd51e788ee53461e075b0f73b600608646c70032f', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '9df4b7deaca899f1c06bf615065a2fce7eea4bc0', class: {
                 'digi-form-file-upload__upload-area': true,
                 'digi-form-file-upload__upload-area--hover': this.fileHover
             }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: '563d428c64e909dd45331c6dd3c20fd4196dd41b', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: '1ebec5c26501773a1104f878380fcc0377a33010', class: "digi-form-file-upload__text-area" }, h("button", { key: '8a1c7c8bf8ccacb620a95ba0221742a6c436cf3c', type: "button", id: this.afId + '-button', ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: '8c35b4e2523db4f4f892d2f615caedb8bb3a9ebe', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: '096b05c159ce7722687cdc0b1a0ff4889a5485e2', class: "digi-form-file-upload__text-area" }, h("button", { key: '97504d954e2f3a0e76d99fb4d5049ddea108a32f', type: "button", id: this.afId + '-button', ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
-            } }, h("digi-icon-paperclip", { key: '1ae48109c0df78f412fd6c07742baaf6ef2d616c', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, h("digi-icon-paperclip", { key: 'e47597d6988db6a71c22fb9ab4cfa877be4a48fa', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
             ? this.afUploadBtnText
-            : _t.form.file_choose), h("input", { key: '3370708299eb4f53f38cb15ae4fb9cb97b993bb9', ref: (el) => {
+            : _t.form.file_choose), h("input", { key: 'b21162f7873e21a8b3ed2d286ef154b66b95c8ec', ref: (el) => {
                 this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: 'c4deee14a4318dc38368eeec5f5a3b51e0e79e27' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: '6553b8226f080d825eb276ce3f684a95ebeeb649', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
+            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: 'c8e448ef96e9d4f292ec88606526e06935192308' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: '8c6f1b6190eb4f87bbcd9d50f4c4929cdcf4c026', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (h("div", { key: 'c514dfcf95137b192fa490d6cb61e1b68ae82768', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: '7faefe886463ce493824665375b3b4ab0aec5753', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     static get is() { return "digi-form-file-upload"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-filter/form-filter.css

@@ -15,7 +15,7 @@ License: none (public domain)
   --digi--form-filter--toggle-icon--transition: ease-in-out 0.2s all;
   --digi--form-filter--dropdown--box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);
   --digi--form-filter--dropdown--border-radius: var(--digi--border--radius--primary);
-  --digi--form-filter--dropdown--background: var(--digi--color--background--dropdown);
+  --digi--form-filter--dropdown--background: var(--digi--color--background--primary);
   --digi--form-filter--dropdown--min-width: 18.75rem;
   --digi--form-filter--dropdown--margin-top: var(--digi--gutter--small);
   --digi--form-filter--dropdown--z-index: 999;

package/dist/collection/components/_form/form-filter/form-filter.js

@@ -206,24 +206,24 @@ export class FormFilter {
         });
     }
     render() {
-        return (h(Host, { key: '646d9b749fe3c2570287a3dbd5e64c77d87eecd8' }, h("div", { key: '9a673a0a8adbeb379c406959e384601b48b21f7f', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
+        return (h(Host, { key: 'dfd9336afc099665b35c08b47467d68320279469' }, h("div", { key: 'a329b82ecd5905e1792021a16dd1c12b3b7b00a0', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
                 'digi-form-filter': true,
                 'digi-form-filter--open': this.isActive
-            } }, h("digi-button", { key: '6085eeff90de431282ed24927f511ec0b8a6c6f4', id: `${this.afId}-toggle-button`, afInputRef: (el) => (this.refs.toggle = el), class: "digi-form-filter__toggle-button", onAfOnClick: () => this.handleToggle(), "af-aria-haspopup": "true", "af-variation": "secondary", "af-aria-label": this.afFilterButtonAriaLabel, "af-aria-labelledby": this.afFilterButtonAriaDescribedby, "af-aria-controls": `${this.afId}-dropdown-menu`, "af-aria-expanded": this.isActive, "af-autofocus": this.afAutofocus ? this.afAutofocus : null }, h("i", { key: 'eaf984f868ae861076315cfa146ba72d718cab00', class: {
+            } }, h("digi-button", { key: 'b5a6b2aca44be78743d9f0df213b801395f09ae4', id: `${this.afId}-toggle-button`, afInputRef: (el) => (this.refs.toggle = el), class: "digi-form-filter__toggle-button", onAfOnClick: () => this.handleToggle(), "af-aria-haspopup": "true", "af-variation": "secondary", "af-aria-label": this.afFilterButtonAriaLabel, "af-aria-labelledby": this.afFilterButtonAriaDescribedby, "af-aria-controls": `${this.afId}-dropdown-menu`, "af-aria-expanded": this.isActive, "af-autofocus": this.afAutofocus ? this.afAutofocus : null }, h("i", { key: '38753316b8e1cdc24a977c835da398ff344b3d68', class: {
                 'digi-form-filter__toggle-button-indicator': true,
                 'digi-form-filter__toggle-button-indicator--active': this.checkedItems.length > 0
-            } }), h("span", { key: 'acec48c3455aec603fe519ee065a221dceeab68c', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), h("digi-icon-chevron-down", { key: 'a38d54d4904e705d4478cdef2be278deff90412e', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), h("div", { key: '2730936fa2ec6a547695f0244724bfbf27b657e4', id: `${this.afId}-dropdown-menu`, ref: (el) => (this.refs.menu = el), class: {
+            } }), h("span", { key: 'bef6dc84b8439cb5bd45229f5e77b0a2bd6a97ad', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), h("digi-icon-chevron-down", { key: '9572d1ec8bc6f8ac50252be491131544fbb2c151', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), h("div", { key: 'f2071068664d89a5510f2840a7d8912b654c56f4', id: `${this.afId}-dropdown-menu`, ref: (el) => (this.refs.menu = el), class: {
                 'digi-form-filter__dropdown': true,
                 'digi-form-filter__dropdown--right': this.afAlignRight,
                 'digi-form-filter__dropdown--hidden': !this.isActive
-            } }, h("div", { key: '7c09f7b7910b32c6c8d2e7695ea1715db6cdfa1a', class: "digi-form-filter__scroll" }, h("fieldset", { key: '58ab965e30a6f1eb2f3c3aff80108722c5eeb430' }, this.afName ? (h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), h("ul", { key: 'a201b73af93dc5ccd71140b7b936417092019197', class: "digi-form-filter__list", "aria-label": this.afFilterButtonAriaLabel, id: `${this.afId}-filter-list` }, this.listItems.map((item) => {
+            } }, h("div", { key: '3574702676988b2a0777564b343fdf6dc271177c', class: "digi-form-filter__scroll" }, h("fieldset", { key: '03098521d312f77170041c7240c1bfd1f9831107' }, this.afName ? (h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), h("ul", { key: '532094b7579a8c7f60e87e4ee973f66b16cb7487', class: "digi-form-filter__list", "aria-label": this.afFilterButtonAriaLabel, id: `${this.afId}-filter-list` }, this.listItems.map((item) => {
             const isChecked = this.checkedItems.includes(item.id);
             const isTabbable = this.tabItems.includes(item.id);
             return (h("li", { class: "digi-form-filter__item", key: item.id }, h("digi-form-checkbox", { afInputRef: (ref) => (this.refs.filter = Object.assign(Object.assign({}, this.refs.filter), { [item.id]: ref })), afTabIndex: isTabbable ? 0 : -1, afLabel: item.label, afValue: item.id, afChecked: isChecked, onClick: (e) => {
                     e.preventDefault();
                     this.handleCheckItem(item);
                 } })));
-        })))), h("div", { key: 'ef8cfb3de86adc3efdc319e494a27916bdfb4302', class: "digi-form-filter__footer" }, h("digi-button", { key: '0adac0061143ad1057f5927b853b619e40656de0', class: "digi-form-filter__submit-button", "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => this.handleSubmit(), afInputRef: (ref) => (this.refs.submit = ref) }, this.afSubmitButtonText), !this.afHideResetButton && (h("digi-button", { key: 'e9afa7196ac9bdf58da4545fc8c8f5559af9c690', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.handleReset(), class: "digi-form-filter__reset-button", afInputRef: (ref) => (this.refs.reset = ref) }, this.afResetButtonText))))), h("div", { key: '4f19a18f80d1088a618b96e8419801e62d38f98c', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, h("slot", { key: 'b5332c6c15fc4033f4672500807bbce900eaef55' }))));
+        })))), h("div", { key: 'c7985ef9aec4f29899fc4ff829867fd43fa85c08', class: "digi-form-filter__footer" }, h("digi-button", { key: '06dca89dd7498a070c1046a97cdda36986bebded', class: "digi-form-filter__submit-button", "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => this.handleSubmit(), afInputRef: (ref) => (this.refs.submit = ref) }, this.afSubmitButtonText), !this.afHideResetButton && (h("digi-button", { key: '863114cc93fd93a5fea02d114d60c64c86d29d8f', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.handleReset(), class: "digi-form-filter__reset-button", afInputRef: (ref) => (this.refs.reset = ref) }, this.afResetButtonText))))), h("div", { key: 'ac372d9c7e3a82886b6b692493bfcb536b52b5be', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, h("slot", { key: '5c1fc764d95c7928a84a13cfb57f9299e620e510' }))));
     }
     static get is() { return "digi-form-filter"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-input/form-input.js

@@ -169,12 +169,12 @@ export class FormInput {
         this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
     }
     render() {
-        return (h(Host, { key: 'bd32d602a4fa625394c8bcf3b7a8916092c91aae', tabindex: -1 }, h("div", { key: '25ded0f93bd3078bec0aab16242c960487fd657f', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '0fa8b13f155a3acd0bf23691c156f34e8a0aa214', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '4b001af998878a6dadbaada1e56d4ef64f71da9a', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: 'b0082240f8d3b59ed36ad1d9ed8bec6aab536b54', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === FormInputValidation.ERROR
+        return (h(Host, { key: '2739bdd7385125581d7ea9c25a3610f5950c6a74', tabindex: -1 }, h("div", { key: '7e261c1e2fc4f37f4ddda861872a470c89181e16', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '7e8fd283dedf0a851c714331ae640f7c74176bde', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '68d715181c180ebaf957dfb46afb63b19b8a8188', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: 'e25ab871e988f9e8bd0837f75403e85f7423805f', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === FormInputValidation.ERROR
                 ? 'true'
                 : 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == FormInputMode.DEFAULT
             ? {}
-            : { inputmode: this.afInputmode }))), h("slot", { key: '46eef3d0ba7c02517ef3824410a1c0cfc74baaa7', name: "button" })), h("div", { key: '4024a3bcab31173d947bfe70e9064e31b2a23a8f', class: "digi-form-input__footer" }, h("div", { key: '55455e4bd8de053c35f1ca727b5e41f71f47a295', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
-            this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: 'c8c0c2d8468b09076a513c70e068c956386c64a5', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
+            : { inputmode: this.afInputmode }))), h("slot", { key: 'c14ae079a53099fc3928bcf3ac7f5517c20b0f36', name: "button" })), h("div", { key: '75d6afa176cd8620e31c384e169b3c84a3bb584d', class: "digi-form-input__footer" }, h("div", { key: '81029d425aae06e3c72c08afe982f2ff1a7bb81d', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: '9a8fec12db8c78a037a9b70194b32814d7641dad', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-input-search/form-input-search.js

@@ -119,10 +119,10 @@ export class FormInputSearch {
         };
     }
     render() {
-        return (h(Host, { key: '5502afd53a378b67ffaed787a84ffd0e154c6a75', tabindex: -1 }, h("div", { key: '9d76ceba2e057efe2029cb600ce43e3e2d39ebfb', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: 'fbee883f2df35b697093aa7fcdd134704583b350', class: {
+        return (h(Host, { key: 'dc9d3a86eca58598cf266f6d90c2bede6e7b7cb0', tabindex: -1 }, h("div", { key: '814b4c00f2d9b765236723be6da34c8ef37e1d30', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: 'f278bedff0b115154175432e5ddc3b84e7f3a951', class: {
                 'digi-form-input-search__input': true,
                 'digi-form-input-search__input--no-button': this.afHideButton
-            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: '45ca4cd2086bf49f53781bd11919ea8cbee9d9fa', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: '1860c4ec6f386c16552d959c0b8091e4e88060cb', slot: "icon" }), this.afButtonText))))));
+            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: 'f8cec04842f49c3ec42949ea5e74720a0795e72f', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: 'cebf2e4bdef7b2c87d858b9ae1127991691f3b06', slot: "icon" }), this.afButtonText))))));
     }
     static get is() { return "digi-form-input-search"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-label/form-label.js

@@ -52,7 +52,7 @@ export class FormLabel {
         }
     }
     render() {
-        return (h("div", { key: '24ae333ab5edc928ce4d26e6e4da0f642617792a', class: "digi-form-label" }, h("div", { key: 'b1a5073a7c9883b13a86f741b865c3b368c1d02b', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '4dd98d11699d82e0e6b5f1127ca0e97382dc45d1', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: 'a8c1b2cf89d24625e3c13a93bac5fd144d95a3cb', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: '4a82c714e6b4f3189772d44bd5748c830252a8d5', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: 'd07f90e8e0a8ba9061686bf7cc331480091fbb33', class: "digi-form-label__actions" }, h("slot", { key: '7c5f1750217d9666a6543044e6dbb29ee4839940', name: "actions" }))))));
+        return (h("div", { key: 'ac9aec4d1d20cc37694af578a97a16a17291c9f3', class: "digi-form-label" }, h("div", { key: 'bf27c3012d1973798095e6b832572fc20863c5f1', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '75435e49548e4fa27330a35b033689a0ed9e99a7', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: '0527ddcebbd2a1b215f42eaed06ba7fc28633d43', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: '8a3b3e6a0ec0a97adb0760b390f0ddb34b3e0b87', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: 'f2e6ad691a5cbc57b990416097454a393da35c01', class: "digi-form-label__actions" }, h("slot", { key: '1fab5cca94da7ad0f2b617db7f713d3b4d17c52d', name: "actions" }))))));
     }
     static get is() { return "digi-form-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-radiobutton/form-radiobutton.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 License: none (public domain)
@@ -21,6 +22,8 @@ License: none (public domain)
   --digi--form-radiobutton--padding: var(--digi--gutter--icon);
   --digi--form-radiobutton--padding--block: var(--digi--gutter--small);
   --digi--form-radiobutton--padding--inline: var(--digi--gutter--icon);
+  display: block;
+  width: fit-content;
 }
 :host .digi-form-radiobutton {
   --BACKGROUND--DEFAULT: var(--digi--form-radiobutton--background-color);
@@ -64,7 +67,7 @@ License: none (public domain)
   color: var(--digi--color--text--primary);
   font-weight: var(--digi--typography--body--font-weight--desktop);
   cursor: pointer;
-  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 
 .digi-form-radiobutton__circle {
@@ -82,13 +85,15 @@ License: none (public domain)
   transform: translateY(1px);
 }
 
+/* "Äkta" visuell fokusindikator, dvs när elementet har fokus och användaren navigerar med tangentbordet */
 .digi-form-radiobutton__input:focus-visible ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
   outline: 2px solid black;
   outline-offset: 2px;
   box-shadow: 0px 0px 0px 5px white;
 }
 
-.digi-form-radiobutton__input:focus:not(:checked) ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
+/* "Tvingad" visuell fokusindikator, används främst när fokus sätts programatiskt */
+.digi-form-radiobutton--focus-visible .digi-form-radiobutton__input:focus ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
   outline: 2px solid black;
   outline-offset: 2px;
   box-shadow: 0px 0px 0px 5px white;

package/dist/collection/components/_form/form-radiobutton/form-radiobutton.js

@@ -14,6 +14,8 @@ export class FormRadiobutton {
     constructor() {
         this.dirty = false;
         this.touched = false;
+        this.focusVisible = false;
+        this.focusMethod = null;
         this.afLabel = undefined;
         this.afVariation = FormRadiobuttonVariation.PRIMARY;
         this.afLayout = FormRadiobuttonLayout.INLINE;
@@ -50,13 +52,23 @@ export class FormRadiobutton {
      * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
      */
     focusOnInput() {
+        this.focusVisible = this.focusMethod !== 'pointer';
         this._input.focus();
+        this.focusMethod = null;
+    }
+    /**
+     * Lyssnar på pointerdown för att kunna avgöra om fokus sätts via tangentbord eller mus/pekinteraktion.
+     * @en Listens for pointerdown to determine if focus is set via keyboard or mouse/touch interaction.
+     */
+    pointerDownHandler() {
+        this.focusMethod = 'pointer';
     }
     componentDidLoad() {
         this.afOnReady.emit();
     }
     get cssModifiers() {
         return {
+            'digi-form-radiobutton--focus-visible': this.focusVisible,
             'digi-form-radiobutton--error': this.afValidation === FormRadiobuttonValidation.ERROR,
             'digi-form-radiobutton--primary': this.afVariation === FormRadiobuttonVariation.PRIMARY,
             'digi-form-radiobutton--secondary': this.afVariation === FormRadiobuttonVariation.SECONDARY,
@@ -87,9 +99,9 @@ export class FormRadiobutton {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: 'c219f20c710f23829a44887396b31f03860b5071', tabindex: -1 }, h("div", { key: '8a79373d73a6a2285694738d15e735dffa06f058', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: 'eaf8472603390c55b3857f1918094494b0ff38f9', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormRadiobuttonValidation.ERROR
+        return (h(Host, { key: 'ec217535e0b0c596d9823eaa069a821d3dace97a', tabindex: -1 }, h("div", { key: '04976fd86d7aaa1bcbfff4b95692b397fd628955', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: '5241250e0afc92eea48123accd45ed6944f51ed0', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormRadiobuttonValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: 'f3049d0f425c3f756f6e157a0a9f243541dbd468', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '3114e3bc85e870e916dd642a448bd4016e7b648e', class: "digi-form-radiobutton__circle" }), this.afLabel))));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '9a0c06e2e514422bdbbc39df05996c9e445dc093', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '1e5ef984c274330cc155d8f9a41e32c861c63d14', class: "digi-form-radiobutton__circle" }), this.afLabel))));
     }
     static get is() { return "digi-form-radiobutton"; }
     static get encapsulation() { return "scoped"; }
@@ -445,7 +457,9 @@ export class FormRadiobutton {
     static get states() {
         return {
             "dirty": {},
-            "touched": {}
+            "touched": {},
+            "focusVisible": {},
+            "focusMethod": {}
         };
     }
     static get events() {
@@ -643,6 +657,12 @@ export class FormRadiobutton {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "pointerDownHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": true
             }];
     }
 }

package/dist/collection/components/_form/form-radiogroup/form-radiogroup.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: fit-content;
+}

package/dist/collection/components/_form/form-radiogroup/form-radiogroup.js

@@ -63,9 +63,9 @@ export class FormRadiogroup {
         });
     }
     render() {
-        return (h(Host, { key: '0b03e0ccdc03d2f06466f9a2527f68b937637e6f', tabindex: -1 }, h("div", { key: '02b0862fc0645ba6c5b12480279078d0b796f5ef', id: this.afId, class: {
+        return (h(Host, { key: '7aa6f6bb84566148fa042a558bb0ba267e691df9', tabindex: -1 }, h("div", { key: '4b1002650100ea8f1bbbb043779a08dda374a25b', id: this.afId, class: {
                 'digi-form-radiogroup': true
-            } }, h("digi-util-mutation-observer", { key: 'ed9e1a034e5d5221c4c004e12db780077277876e', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: '5572449dc6ad235472c92e8524d26688d56e1b10' }))), h("div", { key: 'b0696ddf7c218434fded2380f41bca17e407a797', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormRadiogroupValidation.NEUTRAL && (h("digi-form-validation-message", { key: '63cde6f36e3064bd421c7d162e72ab414f5584cf', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
+            } }, h("digi-util-mutation-observer", { key: '497eb4a70127e75bc2e44a955efdf880ce2c9465', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: '82294fd122f1ef6439fb961d86fe1fae88af2f7b' }))), h("div", { key: '2e23ee3a7e77cfe441a500088106631a8e998948', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != FormRadiogroupValidation.NEUTRAL && (h("digi-form-validation-message", { key: '8b7d829da48f9e33765586cccf2ddb449e52d2e5', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
     }
     static get is() { return "digi-form-radiogroup"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-receipt/form-receipt.js

@@ -58,7 +58,7 @@ export class FormReceipt {
         return (h("div", { class: "digi-form-receipt__content" }, h("svg", { class: "digi-form-receipt__icon", "aria-hidden": "true", version: "1.1", viewBox: "0 0 35 29" }, h("title", null, "Check mark"), h("g", { fill: "none", "fill-rule": "evenodd" }, h("g", { transform: "translate(-170 -32)" }, h("g", { transform: "translate(170 32.325)" }, h("g", { transform: "translate(0 .77495)" }, h("mask", { id: "b", fill: "white" }, h("polygon", { points: "0 0 26.685 0 26.685 27.689 0 27.689" })), h("path", { d: "m13.711 27.689c-7.5602 0-13.711-6.2103-13.711-13.844 0-7.6345 6.151-13.845 13.711-13.845 3.1693 0 6.2611 1.1179 8.7048 3.1478l-1.5894 1.9509c-1.9972-1.6592-4.5241-2.5724-7.1155-2.5724-6.181 0-11.209 5.0773-11.209 11.319 0 6.2406 5.0283 11.318 11.209 11.318 4.7924 0 9.0551-3.0733 10.607-7.6478l2.3668 0.81853c-1.8983 5.5958-7.1124 9.3556-12.974 9.3556", fill: "#333", mask: "url(#b)" })), h("g", { transform: "translate(4.2177)" }, h("mask", { id: "a", fill: "white" }, h("polygon", { points: "0 0 30.425 0 30.425 23.496 0 23.496" })), h("path", { class: "digi-form-receipt__infographic-primary", d: "m30.191 3.2545-19.95 20.007c-0.31227 0.31253-0.81758 0.31253-1.1292 0l-8.878-8.9033c-0.31164-0.31316-0.31164-0.81992 0-1.1324l1.8818-1.8878c0.31164-0.31253 0.81758-0.31253 1.1292 0l6.4315 6.4499 17.504-17.553c0.31164-0.31316 0.81695-0.31316 1.1292 0l1.8818 1.8872c0.31164 0.31253 0.31164 0.81929 0 1.1324", fill: "#95C13E", mask: "url(#a)" })))))), h(this.afHeadingLevel, { class: "digi-form-receipt__heading", tabIndex: -1 }, this.afText), this.slotContent));
     }
     render() {
-        return (h("div", { key: '5ab71f38768ce25bee9fbd1f9b0ad0e7a08d1f84', class: Object.assign({ 'digi-form-receipt': true }, this.cssModifiers) }, this.afVariation === FormReceiptVariation.FULLWIDTH ? (h("digi-layout-block", { afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)) : (this.content)));
+        return (h("div", { key: 'a657922108a6318f7abfc6a3b942dea48ec77b33', class: Object.assign({ 'digi-form-receipt': true }, this.cssModifiers) }, this.afVariation === FormReceiptVariation.FULLWIDTH ? (h("digi-layout-block", { afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)) : (this.content)));
     }
     static get is() { return "digi-form-receipt"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-select/form-select.css

@@ -3,8 +3,8 @@ v2.0 | 20110126
 License: none (public domain)
 */
 :host {
-  --digi--form-select--background--empty: var(--digi--color--background--interactive--default--input-elements);
-  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--input-elements);
+  --digi--form-select--background--empty: var(--digi--color--background--interactive--default--secondary);
+  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--secondary);
   --digi--form-select--background--success: var(--digi--color--background--interactive--validation--success);
   --digi--form-select--background--warning: var(--digi--color--background--interactive--validation--warning);
   --digi--form-select--background--error: var(--digi--color--background--interactive--validation--error);

package/dist/collection/components/_form/form-select/form-select.js

@@ -134,17 +134,17 @@ export class FormSelect {
             : false;
     }
     render() {
-        return (h(Host, { key: 'd0422f1a779704cd2e9192f81199c58738c6f4db', tabindex: -1 }, h("div", { key: 'f6a49628a7d5d3d2d633e816aaf260242478fc4c', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '755b1b576bb8847570426d982d1a3445fb44edff', class: "digi-form-select__label-group" }, h("digi-form-label", { key: 'eda13cccb65792193b318bf9c21bd0b52384dbc5', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '0ae5338fd5aa2b7fffe60935ddae9fec0cbaf379', class: "digi-form-select__select-wrapper" }, h("select", { key: 'bd758e92e3fb977be5bad8530062d9b5c71f7e11', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
+        return (h(Host, { key: '10fd76d4aa8b005a3a330dcb40b0e4505b9cd2c3', tabindex: -1 }, h("div", { key: 'f53a7189610bb0669858e870956db8822787326d', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: 'ce5c2491b5491d1720e2b80b7f18a3a663a99e06', class: "digi-form-select__label-group" }, h("digi-form-label", { key: '6cf4208abc2a6fe864d085be6f006bc8a7a7ba95', afFor: this.afId, afLabel: this.afLabel, afId: `${this.afId}-label`, afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '3d53f0f13e458f1084ed80f3245d36de50ef9f7e', class: "digi-form-select__select-wrapper" }, h("select", { key: 'aa2b099c89944f188100e05c7d5a82993c2c3ed4', class: "digi-form-select__select", name: this.afName, id: this.afId, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormSelectValidation.ERROR
                 ? 'true'
-                : 'false', "aria-describedby": `${this.afId}--validation-message`, ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: '85d60c1b04d3a48773d7a25e79d6e6896abc4334', class: {
+                : 'false', "aria-describedby": `${this.afId}--validation-message`, ref: (el) => (this._select = el), required: this.afRequired ? this.afRequired : null, onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onInput: (e) => this.selectHandler(e), autoFocus: this.afAutofocus ? this.afAutofocus : null }, this.hasPlaceholder && (h("option", { key: 'b1134743aface98ecc37d176183b7c9e309f399f', class: {
                 'digi-form-select__select-option': true,
                 'digi-form-select__select-option--initial-value': true
             }, disabled: true, selected: !this.afValue, value: "" }, this.afPlaceholder)), this.optionItems.map((option, index) => {
             return (h("option", { key: index, class: "digi-form-select__select-option", value: option.value, selected: this.getSelectedItem(option) }, option.text));
-        })), h("digi-icon-input-select-marker", { key: 'e9ab4ef12562679223aaa7f60e20936d2a1e078e', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '188b27eb0a27f9bb81eb8211e67df8d8c54b7485', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
+        })), h("digi-icon-input-select-marker", { key: '75727398d4ee1fcc67bbb7d8f4f175dff8c51167', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: 'b0324b2920d3d6d807843cf7824bbf92b79ab836', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
                 e.stopImmediatePropagation();
                 this.getOptions();
-            } }, h("slot", { key: '70b2eeb015a08bfc2379f30eb4cf7e6281066d56' })), h("div", { key: 'd8aa1c5d5de3e847136d29b14a236d6cf73ecad4', class: "digi-form-select__footer" }, h("div", { key: '27f8450662d599b55aa22a3a82f268de8ecd7cbc', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'e7f512be5ea01c8bb2c6a1e20bacafd43acf2770', "af-variation": this.afValidation }, this.afValidationText)))))));
+            } }, h("slot", { key: '8634b840632a01018e646a389642d1608db8cfa2' })), h("div", { key: '5e1c5df56e42fc0a84b574e6d8b413a040aad587', class: "digi-form-select__footer" }, h("div", { key: '283beb087e05dad914da75b8c6bd905c1cc3a2d8', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'e7e803033c1d90dcf52e57c3ce15c129caad68e4', "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-select-filter/form-select-filter.css

@@ -3,7 +3,7 @@ v2.0 | 20110126
 License: none (public domain)
 */
 :host {
-  --digi--form-select-filter--footer--background: var(--digi--color--background--secondary-accent);
+  --digi--form-select-filter--footer--background: var(--digi--color--background--secondary);
   --digi--form-select-filter--scroll--max-height: 10.625rem;
   --digi--form-select-filter--scroll--padding: var(--digi--padding--small);
   --digi--form-select-filter--reset-button--margin-right: var(--digi--padding--small);
@@ -13,7 +13,7 @@ License: none (public domain)
   --digi--form-select-filter--item--margin: var(--digi--gutter--small) 0;
   --digi--form-select-filter--toggle-icon--transition: ease-in-out 0.2s all;
   --digi--form-select-filter--dropdown--border-radius: var(--digi--border-radius--input);
-  --digi--form-select-filter--dropdown--background: var(--digi--color--background--dropdown);
+  --digi--form-select-filter--dropdown--background: var(--digi--color--background--interactive--default--input-elements);
   --digi--form-select-filter--dropdown--min-width: 18.75rem;
   --digi--form-select-filter--dropdown--margin-top: var(--digi--gutter--small);
   --digi--form-select-filter--dropdown--z-index: 999;

package/dist/collection/components/_form/form-select-filter/form-select-filter.js

@@ -458,16 +458,16 @@ export class FormSelectFilter {
             } }, h("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (h(Host, { key: '232ad0fdb8164fb6ed04d1d2fdcdc778a197ae43', tabindex: -1 }, h("div", { key: 'bd384c56a99f54deef5cb2e325bae1e65c53696c', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: 'af3ad60e123ffe072af3590230975d6cb4b08db9', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("digi-util-keydown-handler", { key: '06cb88227494648eb5e9861022830562b20fbbb2', onAfOnEsc: () => this.escHandler() }, h("button", { key: '8f829b158f487b9b671066f18b6948d24bd7724c', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: '6b28930875126efeea6e011d17567b2de4bf7635', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: 'afde185a6027a96c0fd75a80bfbf9a462839cd32', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: '8b846d513be35ffec07b6f1073b24c4fad8b09d0', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '795ac4c5d2cf7e7ddff801cc8224215b8c0f4492', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '1952bcb6c880cc79263c348067c8e76ee4b2c54d', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+        return (h(Host, { key: '62acc267c182d80703024115c50dddec8413ad3c', tabindex: -1 }, h("div", { key: 'feea697aee9107e7b90792251c7661ff0ada1a98', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: '90a45c8dc587e1d236f27b03c0e2f71dc8477b7f', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("digi-util-keydown-handler", { key: '703080c3a43d0d8ccd233560b2287d9127a87a8b', onAfOnEsc: () => this.escHandler() }, h("button", { key: '54498ff1eb5b930a8173c4dfdb950b8a94ba590e', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: '4b913f6134090cb598f7dbc331c290ef655f687e', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: 'ccb42c85db8f9bf3d39fd3864b8c02aacb98c6d9', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: '704782f9bc33016df16c8492b29721723ed591fb', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '83211db95b19280716ee81611a183816fa00b1d0', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: 'a88f7aa3f0923e34b0f8866a936261ecbb0701e6', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
                 'digi-form-select-filter__dropdown': true,
                 'digi-form-select-filter__dropdown--right': this.afAlignRight,
                 'digi-form-select-filter__dropdown--hidden': !this.isOpen
-            } }, h("fieldset", { key: '67c787d57885455dc6018b14ee77c5cf8f889269' }, h("div", { key: 'f04990f47e0c842447503c0c669fad9f075e1800', class: "digi-form-select-filter__header" }, h("legend", { key: 'a555f7e77fd3fc35badec8261676746ad0d07a96', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: 'dbbe1895e3f36e9103429510bdaa669839c1509b', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, h("fieldset", { key: 'b79878e2277511c2543663776189ba0a42047894' }, h("div", { key: 'a0d832fe7834a55eb92bf48a9182057886d5e82e', class: "digi-form-select-filter__header" }, h("legend", { key: '59acc3f35f85559e958656e00216ad9439448344', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: 'ed1ba547b5c69791779d0127a58dff9c86a48976', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
                 this.focusListItemIndex = 0;
                 99;
             }, onAfOnKeyup: (e) => {
                 this.inputSearchKeyboardHandler(e.detail);
-            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: '7a1b963b624783f76d6b938aef4b54b5539a8b19', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '210bdb0e2937132b68378a770edfb6c93e7b831e', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: 'bdf8431ce2a39cdb9c23c8419eb12518ca20e3dd', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
+            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: '793751dc225d514f42af1a9ec017b7faa9d363c5', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '57007b01069dee8bfa0154cbe6d35d91f20894fd', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: '45d0622dc2e50e8dcba11d21696faa0a6b230516', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
                 ? 'false'
                 : this.afValidation ===
                     FormSelectFilterValidation.ERROR
@@ -476,11 +476,11 @@ export class FormSelectFilter {
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (h("li", { key: '4d97c4be7a31dbe830181eefc37929b3bb2f9234', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                    : 'false' }, this.showNeutralValue && (h("li", { key: '1d1a778273c5ac8f3d30b65048162e47b19f00cd', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
                 ? 'false'
                 : this.afRequired
                     ? 'true'
-                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: 'c1af26327f9bab4456a3770698cb08e8f0b0be95', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
+                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: 'aa7ea145f0ad6f125f9df0ba11aaf90d0113c20c', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
             this._filteredResult.map((item, index) => {
                 return (h("li", { class: "digi-form-select-filter__item", key: index, dir: item.dir, lang: item.lang, "aria-checked": this.isSelected(item.value) ? 'true' : 'false', role: this.afMultipleItems ? 'checkbox' : 'radio', "aria-required": this.afMultipleItems
                         ? 'false'
@@ -496,9 +496,9 @@ export class FormSelectFilter {
                         : index === 0
                             ? 0
                             : -1 }, this.isSelected(item.value) && (h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
-            }))))), this.afMultipleItems && (h("div", { key: 'e9617bc3097f670582c1ad9fe9dcc3cdd5a56f5b', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: 'b4899966b541b5d67a32f07a01631509075a7106', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: '5662e817b03fb9d04b5a01d726863dca84e23f88', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: 'bc7cb5ef64aa7a5f0e3ce29f416fa9995ef2f7c8', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+            }))))), this.afMultipleItems && (h("div", { key: '428fecfda65ca5dab87d15049010462f38bf49f3', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: 'e8ed222dada0ef4e78d3d66062c7d432e5231671', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: 'd151b5df0a4002633e0966d44d0482183b7ecfe5', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '207d29e920ec9db9aa2f2ba29bd650453210e8b3', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
                 this.setClosed(true);
-            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: '724a4171df75af688ddc34312db71d8c0ddc882e', class: "digi-form-select__footer" }, h("div", { key: 'e6e83f72fa04ff87cc30868dc7b125ad1289e6f2', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'ed8426f025854a09aa445734e239dae8574daec4', "af-variation": this.afValidation }, this.afValidationText)))))));
+            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: '514a8e6c957b4293f095b0718139ac47e64648ab', class: "digi-form-select__footer" }, h("div", { key: '3b5ceffdcbf3f1fd4671bc73fdea48a573cd0379', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'faab034ee053826ebd82fda81273d0f815b648ec', "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-select-filter"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-textarea/form-textarea.js

@@ -130,10 +130,10 @@ export class FormTextarea {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: '98f682ee8195c12379e2423c3539404e1830e695', tabindex: -1 }, h("div", { key: '6481b13c2551958ebde492a5a6cc2b708b26e2d8', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: '0ee19bc6a14361ae3b22b56034d08492e0170a9e', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '178f9fedcf69b0cbf52057021a757a1f8c2e8e3d', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: 'be556535265c322c7be065aa2e3335bcaef95fbc', class: "digi-form-textarea__content" }, h("textarea", { key: '302bf34c94a161971dc809d7e5ef9d7b4ec71ede', class: "digi-form-textarea__textarea", ref: (el) => (this._textarea = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormTextareaValidation.ERROR
+        return (h(Host, { key: 'f97d22d2c9a3e6344fe27bd79b9b163241a0c871', tabindex: -1 }, h("div", { key: '2755702541c871f4cc864256f5ed5bf4e4062188', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: 'd62b792ec482966f92fc63167c04f0a3324b9761', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '54d4c7653137366d5f6123dde8f4dc6a3b0ae4d0', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '0d629cda55f0f95c77a86686a6e3257b85abe63c', class: "digi-form-textarea__content" }, h("textarea", { key: 'da55ccc8672f8646cd55c06fb8fad817743737c4', class: "digi-form-textarea__textarea", ref: (el) => (this._textarea = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormTextareaValidation.ERROR
                 ? 'true'
-                : 'false', maxLength: this.afMaxlength, minLength: this.afMinlength, role: this.afRole, required: this.afRequired, id: this.afId, name: this.afName, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null })), h("div", { key: '3ab685a78e1a4e7a8cf526e79ad5cc26de8c2447', class: "digi-form-textarea__footer" }, h("div", { key: '6b15817472e36252aeed5c2531b6ad14ab6e4f1c', class: "digi-form-textarea__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
-            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: '92726ac010661ed5bce7ba9065f9b4105dd43f3c', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
+                : 'false', maxLength: this.afMaxlength, minLength: this.afMinlength, role: this.afRole, required: this.afRequired, id: this.afId, name: this.afName, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null })), h("div", { key: 'f3f04efd0ac2f7375612b32ebb0603e7767e4088', class: "digi-form-textarea__footer" }, h("div", { key: '51f4c475f9e98bb87ab9f7cf595463dc178bfbc3', class: "digi-form-textarea__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: '7894f68da8e5b44ba1d22d0d6f20d531ba4a26a2', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-textarea"; }
     static get encapsulation() { return "scoped"; }