@designsystem-se/af 38.2.1-beta.0 → 38.2.1-beta.dark-mode

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

@@ -9,6 +9,7 @@ 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);
@@ -62,7 +63,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--small--default);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
   --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);
@@ -76,7 +77,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--small--default);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
   --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);
@@ -90,7 +91,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--small--default);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
   --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);
@@ -244,7 +245,7 @@ License: none (public domain)
   padding-bottom: 0.75rem;
 }
 :host .digi-form-file-upload__error-list-container.with-files {
-  border-bottom: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);
+  border-bottom: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--tertiary-hypotes);
 }
 :host .digi-form-file-upload__error-list-container .clear-button {
   max-height: 1.5rem;
@@ -273,7 +274,7 @@ License: none (public domain)
   list-style-type: none;
 }
 :host .digi-form-file-upload__item-container:nth-child(n+2) {
-  border-top: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);
+  border-top: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--tertiary-hypotes);
 }
 :host .digi-form-file-upload__item-pending-container {
   display: flex;

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

@@ -8,14 +8,14 @@ License: none (public domain)
   --digi--form-filter--scroll--max-height--large: 23.4275rem;
   --digi--form-filter--scroll--padding: var(--digi--padding--small);
   --digi--form-filter--reset-button--margin-left: var(--digi--padding--small);
-  --digi--form-filter--legend__border-bottom: var(--digi--border-width--primary) solid var(--digi--color--divider--primary);
+  --digi--form-filter--legend__border-bottom: var(--digi--border-width--primary) solid var(--digi--color--divider--tertiary-hypotes);
   --digi--form-filter--list--margin: 0;
   --digi--form-filter--list--padding: var(--digi--gutter--small) 0 0 0;
   --digi--form-filter--item--margin: var(--digi--gutter--small) 0;
   --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--primary);
+  --digi--form-filter--dropdown--background: var(--digi--color--background--dropdown);
   --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-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--secondary);
-  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--secondary);
+  --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--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-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);
+  --digi--form-select-filter--footer--background: var(--digi--color--background--secondary-accent);
   --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--interactive--default--input-elements);
+  --digi--form-select-filter--dropdown--background: var(--digi--color--background--dropdown);
   --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;
@@ -32,7 +32,7 @@ License: none (public domain)
   --digi--form-select-filter--dropdown--item--margin-bottom: 0px;
   --digi--form-select-filter--dropdown--item--border-width: var(--digi--border-width--primary);
   --digi--form-select-filter--dropdown--item--border-type: var(--digi--border-style--primary);
-  --digi--form-select-filter--dropdown--item--border-color: var(--digi--color--divider--primary);
+  --digi--form-select-filter--dropdown--item--border-color: var(--digi--color--divider--tertiary-hypotes);
   --digi--form-select-filter--dropdown--item--padding-y: var(--digi--margin--small);
   --digi--form-select-filter--dropdown--item--padding-x: var(--digi--margin--largest);
   --digi--form-select-filter--dropdown--item--multiple--padding-y: var(--digi--margin--small);

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

@@ -16,10 +16,6 @@ import { FormSelectFilterValidation } from "./form-select-validation.enum";
 export class FormSelectFilter {
     constructor() {
         this._searchQuery = '';
-        /** True when `value` was set from outside (e.g. Angular CVA) — then value is selection master. */
-        this._valueIsMaster = false;
-        /** Guards internal `value` writes so they don't flip `_valueIsMaster`. */
-        this._updatingValueInternally = false;
         this.isOpen = false;
         this.focusListItemIndex = 0;
         this.focusInList = false;
@@ -53,19 +49,17 @@ export class FormSelectFilter {
         this.afFilterButtonAriaDescribedby = undefined;
         this.afErrorMessageIsAlert = true;
     }
-    onValueChanged(newValue) {
-        let parsedValue;
-        if (typeof newValue === 'string') {
-            parsedValue = newValue ? JSON.parse(newValue) : [];
-        }
-        else {
-            parsedValue = newValue || [];
-        }
-        if (!this._updatingValueInternally) {
-            this._valueIsMaster = true;
+    onValueChanged(value) {
+        const joinedArray = [...value, ...this._selectedItems];
+        const noDuplicates = joinedArray.filter((item, pos) => joinedArray.indexOf(item) === pos);
+        if (noDuplicates && noDuplicates.length > 0) {
+            if (this.afMultipleItems) {
+                this._selectedItems = [...noDuplicates];
+            }
+            else {
+                this._selectedItems = [noDuplicates[0]];
+            }
         }
-        this.value = parsedValue;
-        this.syncValueAndSelectedListItems('valueChange');
     }
     handleListItems() {
         if (this.afListItems) {
@@ -81,7 +75,15 @@ export class FormSelectFilter {
                 }
                 this.giveItemsValueIfNoneExist();
                 this.sortListAlphabetically();
-                this.syncValueAndSelectedListItems('afListItemsChange');
+                const selectedListItems = this._afListItems.filter((item) => item.selected);
+                if (selectedListItems && selectedListItems.length > 0) {
+                    this._selectedItems = [...selectedListItems];
+                    this.afOnSelect.emit(this._selectedItems);
+                    this.value = this._selectedItems;
+                }
+                else if (this.value && this.value.length > 0) {
+                    this._selectedItems = [...this.value];
+                }
                 this.filterResults();
             }
             catch (e) {
@@ -133,58 +135,14 @@ export class FormSelectFilter {
     focusOnElement() {
         this._toggleButton.focus();
     }
-    componentWillLoad() {
-        /* Stencil @Watch does not run for the initial prop value.
-         * Given that Angular Control Value Accessors writeValue often sets `value` before willLoad —
-         * we need to force a value check here with bootstrapInitialValue .*/
-        this.bootstrapInitialValue();
-        this.handleListItems();
-    }
-    bootstrapInitialValue() {
-        if (typeof this.value === 'string') {
-            const parsed = this.value ? JSON.parse(this.value) : [];
-            this._updatingValueInternally = true;
-            this.value = parsed;
-            this._updatingValueInternally = false;
-        }
-        if (Array.isArray(this.value) && this.value.length > 0) {
-            this._valueIsMaster = true;
-        }
-    }
-    /**
-     * Keep `value` and `afListItems[].selected` in sync.
-     * - If `value` was set externally (`_valueIsMaster`), value wins on list updates.
-     * - Otherwise selection is seeded from `afListItems[].selected` (React/vanilla data-as-master).
-     * Does not emit `afOnSelect` — that is reserved for user interaction so Angular Control Value Accessors
-     * does not get feedback loops on prop sync.
-     */
-    syncValueAndSelectedListItems(whereDidTheChangeComeFrom) {
-        if (!this._afListItems) {
-            return;
-        }
-        if (whereDidTheChangeComeFrom === 'afListItemsChange') {
-            if (this._valueIsMaster) {
-                this.applyValueToListItems(this.value);
-            }
-            else {
-                this._selectedItems = this._afListItems.filter((item) => item.selected);
-                this.setValueInternally([...this._selectedItems]);
-            }
-            return;
-        }
-        this.applyValueToListItems(this.value);
-    }
-    applyValueToListItems(value) {
-        const selectedValues = new Set((value !== null && value !== void 0 ? value : []).map((item) => item.value));
-        this._afListItems.forEach((item) => {
-            item.selected = selectedValues.has(item.value);
-        });
-        this._selectedItems = this._afListItems.filter((item) => selectedValues.has(item.value));
-    }
-    setValueInternally(nextValue) {
-        this._updatingValueInternally = true;
-        this.value = nextValue;
-        this._updatingValueInternally = false;
+    debounce(func, timeout = 300) {
+        let timer;
+        return (...args) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                func.apply(this, args);
+            }, timeout);
+        };
     }
     setClosed(focusToggleButton = false) {
         this.isOpen = false;
@@ -243,6 +201,9 @@ export class FormSelectFilter {
         this.setClosed(true);
         this.afOnFilterClosed.emit();
     }
+    componentWillLoad() {
+        this.handleListItems();
+    }
     setFocusItem() {
         const element = this.inputItem(`${this.afId}-select-filter-list`, this.focusListItemIndex);
         if (element) {
@@ -347,14 +308,16 @@ export class FormSelectFilter {
     }
     filterResults() {
         if (this._searchQuery && this._searchQuery.length > 0) {
-            this._filteredResult = this._afListItems.filter((item) => {
-                return item.label
-                    .toLowerCase()
-                    .includes(this._searchQuery.toLowerCase());
-            });
+            this._filteredResult = [
+                ...this._afListItems.filter((item) => {
+                    return item.label
+                        .toLowerCase()
+                        .includes(this._searchQuery.toLowerCase());
+                })
+            ];
         }
         else {
-            this._filteredResult = this._afListItems;
+            this._filteredResult = [...this._afListItems];
         }
     }
     inputSearchKeyboardHandler(e) {
@@ -374,7 +337,7 @@ export class FormSelectFilter {
     }
     resetSelectItems(close = false) {
         this._selectedItems = [];
-        this.setValueInternally([]);
+        this.value = [];
         this.afOnSelect.emit([]);
         this._searchQuery = '';
         this.filterResults();
@@ -404,7 +367,7 @@ export class FormSelectFilter {
             this._selectedItems = [item];
             this.emitFilterClosedEvent();
         }
-        this.setValueInternally([...this._selectedItems]);
+        this.value = this._selectedItems;
         this.afOnSelect.emit(this._selectedItems);
         this.filterResults();
     }
@@ -495,16 +458,16 @@ export class FormSelectFilter {
             } }, h("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (h(Host, { key: '1a07fd41c8f9ccc1fbd0ca768fd3f87fc719dec4', tabindex: -1 }, h("div", { key: '6492705706e717048243892a3f8b269fa26dc6b9', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: '99d0e29f7dad712882c0a3c5fd3f468af7dd5c55', 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: 'a53d9d63b71557554da9442511af10870e345263', onAfOnEsc: () => this.escHandler() }, h("button", { key: '260c22654935d7422d5fc30a47fbd0c37ec00f0c', 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: 'b92a13d75d3e320a39ca99128354178c01c1ff0d', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: '37ab06f299d37c36516a7b809472bb300d244c18', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: 'ca373143f83ab3da2e6579b3a0e1e145a10d2235', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '1a62747454653ceafa650e329301a8975179d75d', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: 'b0cafd4ce8ad8017f60e8fab88417512a6698f20', 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: 'f98295e8e804f93428489daf5844df9854ed6053' }, h("div", { key: 'c614d142260b6eaa0b6ea643b34f135551aaf1ec', class: "digi-form-select-filter__header" }, h("legend", { key: 'f1c94bf0ea6e3745d8965fbe5bfdf0a298d7b4f0', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '6def27fd94b52e666c3e8dac4385ddf874f85bd1', 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: 'bcfc446573bb4b8f88aabdde1a8b6da1a6ac51f7', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '656253e1dba64d2906ae9b195063300fe5cbd900', 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: '4a42a8ee02e3921710aa00826b31558ed1f9a485', 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
@@ -513,11 +476,11 @@ export class FormSelectFilter {
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (h("li", { key: '40d30a579a332fec15b5c3f38865eacce0a8c2ee', 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: '43f446e70c707681dd1de50e11af511e8c4d060e', 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'
@@ -533,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: 'f94a71fb292baf936c9358e33316f1ee93ce37f3', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: '305beb8e5f817d46d5f7b5364e4125c101cbaed5', "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: '3bf7f1f1bcd2a4e07fd900ba4b6377decc617cd7', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: 'eaa1389239c8b5e93ecac2ed2f6ed09fcda81863', 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: '213a685ba0d080e873721d526c1517e62f1779be', class: "digi-form-select__footer" }, h("div", { key: '81b470b19af8e472e50a789a6116448b8204359e', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '457f29208d032eb29e7bb94c9db9fb9634866524', "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"; }
@@ -777,7 +740,7 @@ export class FormSelectFilter {
                 "docs": {
                     "tags": [{
                             "name": "ignore",
-                            "text": "Propertyn `value` finns inte dokumenterad p\u00E5 komponentens sida p\u00E5 dokumentationswebben, utan\n\u00E4r endast till f\u00F6r att anv\u00E4ndas tillsammans med Angulars Control Value Accessors (CVA).\nAnv\u00E4nds CVA f\u00F6r att hantera komponentens v\u00E4rden s\u00E5 ska inte afListItems anv\u00E4ndas f\u00F6r att\np\u00E5verka vilka val som \u00E4r gjorda eller ej.\nExempel p\u00E5 b\u00E5da s\u00E4tten att hantera datat finns i Angular Playground."
+                            "text": undefined
                         }],
                     "text": ""
                 },

package/dist/collection/components/_header/header/header.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { HeaderCenterContentWidth, LayoutBlockContainer, UtilBreakpointObserverBreakpoints } from "../../../enums";
+import { HeaderCenterContentWidth, LayoutBlockContainer, LayoutBlockVariation, UtilBreakpointObserverBreakpoints, } from "../../../enums";
 /**
  * @enums HeaderCenterContentWidth - header-center-content-width.enum.ts
  * @enums LayoutBlockContainer - layout-block-container.enum.ts
@@ -57,7 +57,7 @@ export class Header {
         return (h("div", { class: "digi-header__wrapper" }, h("slot", { name: "header-logo" }), h("slot", { name: "header-content" }), this.hasNavigation && this.isMobile && (h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))));
     }
     render() {
-        return (h("header", { key: '35b1b75534609c95cf188dee68dc65756b60cf6e', "aria-label": this.afAriaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '6eee8b721fdf80e41db49d6983d1d5bfd8c27632', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '4caa83ed4b792ceaae5da6517241e2d09962fb9f', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: 'd4bf22ad37c16accd0073ce6f286298146b04e33', class: "digi-header__border" }), h("slot", { key: '33f07a226d4e07f6bf83c019e7ea46f91d28596a', name: "header-navigation" }))));
+        return (h("header", { key: '685004eea469ef37ba670db6e868f86fcd07b7b8', "aria-label": this.afAriaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '1f832aa84bd40757b46e51d71a642c42ebf42396', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: 'a76771fec898f419712e0521da415e6ba06e8e97', afContainer: LayoutBlockContainer.NONE, afVariation: LayoutBlockVariation.TRANSPARENT }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '34b9d5755b9a168e8c4cddd44e0802ab2f34e4fc', class: "digi-header__border" }), h("slot", { key: '2aac1569efdc328863ab94e52563ede14d8c2742', name: "header-navigation" }))));
     }
     static get is() { return "digi-header"; }
     static get encapsulation() { return "scoped"; }