@designsystem-se/af 36.0.1 → 36.0.2

package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.js

@@ -8,6 +8,7 @@ import { detectClickOutside } from "../../../global/utils/detectClickOutside";
 /**
  * @swedishName Datumväljare
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
+ * @valueAccessor TextValueAccessor
  */
 export class CalendarDatepicker {
     constructor() {
@@ -371,7 +372,7 @@ export class CalendarDatepicker {
         return this.afSelectedDates;
     }
     render() {
-        return (h(Host, { key: '5e9ee0185fda2fceed01ef3a0ef9e9941327076e', tabindex: -1 }, h("div", { key: 'f29f484b2f6142edf6a227ac6247a2ba6fc1c477', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: 'bb3d5ef0b2e9e5d5527b688dba878207cd62e392', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: '3651941e78877658f4ffbd5e796d3021d0426a96', ref: (el) => (this._input = el), class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afName: this.afName, afValue: this.inputValue, afValidation: this.hasBuiltInValidationError()
+        return (h(Host, { key: 'e6dcf21e94a0cf58081b2cc351291a9489eadcb6', tabindex: -1 }, h("div", { key: '4040e430dd3c55e9ed0a0e6ed5aa69dea906e7c3', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: '823f9480cb8a77c1e3cecdc1f3982e426ab2e658', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: '454ca3d0a8d489826891da25bba8d9e0359c1df0', ref: (el) => (this._input = el), class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afName: this.afName, afValue: this.inputValue, afValidation: this.hasBuiltInValidationError()
                 ? FormInputValidation.ERROR
                 : this.afValidation, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
                 evt.stopImmediatePropagation();
@@ -388,11 +389,11 @@ export class CalendarDatepicker {
                 e.preventDefault();
                 const focusableDateButton = this.hostElement.querySelector('.digi-calendar__date[tabindex="0"]');
                 focusableDateButton === null || focusableDateButton === void 0 ? void 0 : focusableDateButton.focus();
-            } }, h("button", { key: '6da9af2e346980786f80387ff5e28324d79b98ab', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
+            } }, h("button", { key: '0ea8d3a9092c41f96a0cf24a2cdc4aa764e40bce', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
                 ? this.afCloseCalendarAriaLabel
-                : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: 'b80a484cd80858500a59466f5571ec3e8828188f', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: '3aeb7033d8e341b6099d8ec87711fd24e062ac7c', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: 'd5159315333e3958021de98759478a90115c513f', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
+                : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: '31ceefc7f2be65159840b1ba6d998a71ba0c5543', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: 'f8105569c6065a353300f87d1eabd88a10227081', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: 'b7e3556711de8ddb43a17874dada58193341ffcc', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
             ? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
-            : ''), h("digi-calendar", { key: '560cb8fc8833605f68fca26a9079274a8a51dd5a', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afYearSelect: this.afYearSelect, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, afOpenCalendarTo: this.afOpenCalendarTo, onAfOnDateSelectedChange: (evt) => {
+            : ''), h("digi-calendar", { key: '55286f75c9ff74bb5f11a5098d06aac6f5120017', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afYearSelect: this.afYearSelect, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, afOpenCalendarTo: this.afOpenCalendarTo, onAfOnDateSelectedChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseCalendar(evt);
             }, onKeyDown: (e) => {
@@ -403,7 +404,7 @@ export class CalendarDatepicker {
                     return;
                 e.preventDefault();
                 this.focusOnCalendarInput();
-            } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: '7d47148698ed15e8e98c756f0d103517df884306', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
+            } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: 'f3d56c38d789cb0874ef1510e9ddd3e618255a76', class: "digi-calendar-datepicker__selected-date-alert", role: this.errorMessageIsAlert ? 'alert' : null }, this.afSelectedDates.length > 0
             ? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
             : '')))));
     }

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

@@ -8,6 +8,7 @@ import { FormCheckboxLayout } from "./form-checkbox-layout.enum";
  * @enums FormCheckboxVariation - form-checkbox-variation.enum.ts
  * @swedishName Kryssruta
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
+ * @valueAccessor BooleanValueAccessor
  */
 export class FormCheckbox {
     constructor() {
@@ -97,7 +98,7 @@ export class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: 'd5ce6d161fa5df244c431b3690d87da9461afaa7', tabindex: -1 }, h("div", { key: '7c7f0bdab0c3efb3721373cf918f488737f62329', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '2a3640307990d9f0b23f123d3032004912c5f0a0', class: "digi-form-checkbox__input", ref: (el) => {
+        return (h(Host, { key: '119dd4d2bd465e027f4d5c79f8334b0bb9491048', tabindex: -1 }, h("div", { key: '4bb8e86d4323bfe5f079f3c082bf64b6f7eec750', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '5c780e58b7df31cd9c13563b920b5e06ea74022c', 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);
@@ -105,7 +106,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: 'd1802bf01ee6ec34e59bbc08376a70356bc83dcc', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '0bc285971edcc970d8f08fcb263b8695502ee0ec', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: 'c5e15b2070e28c9fe38d09ce7da85b59c9c0c0b5', 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: '71599f05c3436521e96f2210606ad3c71f6d341e', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '6f2ecde62ef62aa8a286aa2e64b1932d1d605e0a', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '2ca8d8ddfb9578b236712cbb761348fb1c456f18', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
     }
     static get is() { return "digi-form-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -12,6 +12,7 @@ import { FormInputVariation } from "./form-input-variation.enum";
  * @enums FormInputVariation - form-input-variation.enum.ts
  * @swedishName Inmatningsfält
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
+ * @valueAccessor NumericValueAccessor TextValueAccessor
  */
 export class FormInput {
     constructor() {
@@ -168,12 +169,12 @@ export class FormInput {
         this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
     }
     render() {
-        return (h(Host, { key: 'edfa7d318ef191105c367521ba881a2e289643d5', tabindex: -1 }, h("div", { key: 'eb370a2b2143889c40213d9ae80af72c5921003f', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '9a638bca403fc427ec22b2df46a77fbbe273574c', 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: '514ab5626cb7b727d731da43f21791e103f05426', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: 'ea37a8d6805e97a0ce7e2c28a3188412c8d173af', 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: '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
                 ? '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: 'fc3d74a5d12951182755844d8c96bc24a6168c4b', name: "button" })), h("div", { key: '7bf5e98956f79b65cca266ae14c631cd064f9459', class: "digi-form-input__footer" }, h("div", { key: '8054bea430637a7013ecf554550b37f2b29877d2', 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: '751b58df8dcdb4e1132d26125047ff72d8e74574', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
+            : { 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)))))));
     }
     static get is() { return "digi-form-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -10,6 +10,7 @@ import { FormInputButtonVariation } from "../form-input/form-input-button-variat
  * @enums FormInputSearchVariation - form-input-search-variation.enum.ts
  * @swedishName Sökfält
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet
+ * @valueAccessor TextValueAccessor
  */
 export class FormInputSearch {
     constructor() {
@@ -118,10 +119,10 @@ export class FormInputSearch {
         };
     }
     render() {
-        return (h(Host, { key: '07a9de060cd2c1c58382e7f63646a2d91a33b326', tabindex: -1 }, h("div", { key: '281ce12ec8b8eccea33ca83996fd602eca83473a', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: '0d45c83f39c22aadc9328f87bb4563d23ec3250f', class: {
+        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: {
                 '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: '534207d20f5c4e0b2e0d219f287f74a7cbec332e', 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: 'dcba3877b354dd4902d4663e7742e994d973c40a', 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: '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))))));
     }
     static get is() { return "digi-form-input-search"; }
     static get encapsulation() { return "scoped"; }

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

@@ -6,6 +6,7 @@ import { FormRadiobuttonLayout } from "./form-radiobutton-layout.enum";
 /**
  * @enums FormRadiobuttonValidation - form-radiobutton-validation.enum.ts
  * @enums FormRadiobuttonVariation - form-radiobutton-variation.enum.ts
+ * @valueAccessor RadioValueAccessor
  * @swedishName Radioknapp
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
  */
@@ -86,9 +87,9 @@ export class FormRadiobutton {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: 'eb737e11842838386c3c150b7159470340902bfd', tabindex: -1 }, h("div", { key: '6de2e2956df73b07e27a3ff47513eeb47091e46e', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: '203d3c4bee7f360d47a8a81bb5b970176839ade2', 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: '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
                 ? '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: 'fa72694ab9d81781251da78b9356ad2fceb916ac', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: 'dc9a093395165968b384fee6a8fcaf1fd5c8c142', 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: 'f3049d0f425c3f756f6e157a0a9f243541dbd468', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '3114e3bc85e870e916dd642a448bd4016e7b648e', class: "digi-form-radiobutton__circle" }), this.afLabel))));
     }
     static get is() { return "digi-form-radiobutton"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,6 +5,7 @@ import { FormRadiogroupValidation } from "./form-radiogroup-validation.enum";
  * @slot radiobuttons
  *
  * @swedishName Radiogrupp
+ * @valueAccessor TextValueAccessor
  *
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till den första radioknappen i gruppen
  */
@@ -62,9 +63,9 @@ export class FormRadiogroup {
         });
     }
     render() {
-        return (h(Host, { key: '702853b1b724d80082952fa4ae896663207d169f', tabindex: -1 }, h("div", { key: '7242ba41b2ca1eb451ca26718b490e1548410c81', id: this.afId, class: {
+        return (h(Host, { key: '0b03e0ccdc03d2f06466f9a2527f68b937637e6f', tabindex: -1 }, h("div", { key: '02b0862fc0645ba6c5b12480279078d0b796f5ef', id: this.afId, class: {
                 'digi-form-radiogroup': true
-            } }, h("digi-util-mutation-observer", { key: '29a1e29b857220be7339c3e9fa57e79502e2dd0d', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: '2009fdee569e8744fb4f7cce68a824154abef6bf' }))), h("div", { key: '28f14b57f29baee0c2f3b8ce99e68a18868b5c1f', 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: 'e39cf265b5dbdf2ecb32eeb80ec7e5de9f916f32', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
+            } }, 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)))));
     }
     static get is() { return "digi-form-radiogroup"; }
     static get encapsulation() { return "scoped"; }

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

@@ -10,6 +10,7 @@ import { FormSelectVariation } from "./form-select-variation.enum";
  * @enums FormSelectVariation - form-select-variation.enum
  * @swedishName Väljare
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva select-elementet
+ * @valueAccessor SelectValueAccessor
  */
 export class FormSelect {
     constructor() {
@@ -133,17 +134,17 @@ export class FormSelect {
             : false;
     }
     render() {
-        return (h(Host, { key: '564278041d6661785372ce699def75ecae69c1e7', tabindex: -1 }, h("div", { key: 'd406ba753d7a692dd4fef12028c6e582c0729237', class: Object.assign({ 'digi-form-select': true }, this.cssModifiers) }, h("div", { key: '57a815c752617b0189a0a451dfd9ac0b3140c4fc', class: "digi-form-select__label-group" }, h("digi-form-label", { key: 'ab54ac3e2dadbc98decb669df1b95d1a8bce6881', 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: '390f1562456c469c970e39223aaccd5d6f2e7bb8', class: "digi-form-select__select-wrapper" }, h("select", { key: '3583ca126d1aac3b4ea0b84aaf19eb2352b9dbfc', 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: '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
                 ? '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: 'b8018bae71f5a61781a3d29e76a551f5761d338c', 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: '85d60c1b04d3a48773d7a25e79d6e6896abc4334', 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: '9858368762d4c40784a2d0d41f708224d739784f', class: "digi-form-select__icon", slot: "icon" })), h("digi-util-mutation-observer", { key: '5f2a46ed7cab5279361bf7c6f5b010c23d60c79a', hidden: true, ref: (el) => (this._observer = el), onAfOnChange: (e) => {
+        })), 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) => {
                 e.stopImmediatePropagation();
                 this.getOptions();
-            } }, h("slot", { key: 'ed720f6760ffc1875712705218b6049018ef0f62' })), h("div", { key: 'fef47d914b0133b26b6a945aa7297a78a06f1ce5', class: "digi-form-select__footer" }, h("div", { key: 'b20834a4be9b1e3711f8ff9c3766ffb2eeb42a4a', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '7f13b2333b5cf62006c727648c3a22776dd44b7e', "af-variation": this.afValidation }, this.afValidationText)))))));
+            } }, 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)))))));
     }
     static get is() { return "digi-form-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -11,6 +11,7 @@ import { FormSelectFilterValidation } from "./form-select-validation.enum";
  * @slot empty-search-result - Innehåll som visas om sökningen inte ger några resultat.
  * @swedishName Väljare med sök
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till toggle-knappen
+ * @valueAccessor SelectValueAccessor
  */
 export class FormSelectFilter {
     constructor() {
@@ -457,16 +458,16 @@ export class FormSelectFilter {
             } }, h("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (h(Host, { key: '363c7880f1e2ff36d2d0d850b814a2a0d69f5c6b', tabindex: -1 }, h("div", { key: '4814a99bb25b5b9c0e8af87ba5e7bb88240c7075', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: 'd725f0f0d72400f61d83c20f4308d1cd8161c0d4', 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: 'a32cf9a3f3c090d6160ceb3baab94cd1fd395dec', onAfOnEsc: () => this.escHandler() }, h("button", { key: 'd8c6db1a0d0a92fd6018026b9f7f3a767ac8a838', 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: 'a00d3118356da4701c621c9b5d724466ff7e54a8', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: 'e9fb9100d4addd46561858bdec5146608f4cb4b1', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: 'db16c355c8fa96577afad5f1f2f93cf9e7b85728', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '3b48132e4aaa46943ab7de9ed2d7c5924e7fce7e', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '611df06915faf061c330e82900a878cb33df3ade', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+        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: {
                 '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: '24d6136fd0804266382896b2a7cf88f55b9e621d' }, h("div", { key: '673b2522e7fdccd7c33cca97f83ce0f74426beb7', class: "digi-form-select-filter__header" }, h("legend", { key: 'b5ce6937175dbdf6ad7317dac7c74bb6daa103a3', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '89e97f9ab37a581c415ea3046c819d7e8a394925', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, 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: () => {
                 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: '6a93bfc0f2e0da233706f4ddaef8b1954bf10b08', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '94216744dee9ab58d9600b27a09c4a735ffeb11d', 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: '0665d13ce2587a9db802b1f6d67ba5b8b16365fc', 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: '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
                 ? 'false'
                 : this.afValidation ===
                     FormSelectFilterValidation.ERROR
@@ -475,11 +476,11 @@ export class FormSelectFilter {
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (h("li", { key: '6d0d547803d71e989f778abf84c2e0d4c18e7341', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                    : 'false' }, this.showNeutralValue && (h("li", { key: '4d97c4be7a31dbe830181eefc37929b3bb2f9234', 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: 'ae8a6f5473128dd8a32f78d0553e4042219b0ae0', 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: 'c1af26327f9bab4456a3770698cb08e8f0b0be95', 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'
@@ -495,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: '28b8822e8cf3e8081b15b2a0fc4835181209774a', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: '4f182ff5de1010f03f2fd405bff3f8c0b8c88bc4', "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: '82d56e0e937b4da1c7deb073c7a2a904f97b1c32', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '3211daf5462987f42eceaefc211eaf24fa421556', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+            }))))), 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.setClosed(true);
-            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: 'dc5b3df62deeef8cfc9a890997effce86fa3379e', class: "digi-form-select__footer" }, h("div", { key: '490f54fb8b2a5efa32378b5715f1fc950283bd4f', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '859be3c7d2fe6c840b8a08b5b0869c85f8102b9a', "af-variation": this.afValidation }, this.afValidationText)))))));
+            }, 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)))))));
     }
     static get is() { return "digi-form-select-filter"; }
     static get encapsulation() { return "scoped"; }

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

@@ -7,6 +7,7 @@ import { FormTextareaValidation } from "./form-textarea-validation.enum";
  * @enums FormTextareaVariation - form-textarea-variation.enum.ts
  * @swedishName Textarea
  * @eventListeners focus - Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva textarea-elementet
+ * @valueAccessor TextValueAccessor
  */
 export class FormTextarea {
     constructor() {
@@ -118,10 +119,10 @@ export class FormTextarea {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: 'b031f0fc07ee06dd9eba39c1d1e86f532425c287', tabindex: -1 }, h("div", { key: 'e7936c1327b844ab758e7d0a1f7d82772ed2fb49', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: 'de9052c03a2dc4afb7ba8bc613d42e0c7d9a149a', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '14fbda0f999ffade503c5b175c3c4001612a39d0', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: 'eebaae6ee90e11fc8e9a00b5380ff7d5ad58fa84', class: "digi-form-textarea__content" }, h("textarea", { key: '7e04633f987ae49fc0fe5f0de1f4ad14a632449f', 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: '8fc80d345a10b05e22b3dcd5adb63449d50b07e1', tabindex: -1 }, h("div", { key: '049576151b60c94d55711e696af1262ac6701f34', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: 'a18d782506a20eb687bd8792a3fb0da3db159d4f', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '1574be92b63e16034a5690a9d217da8e63ca7470', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: 'c3258fb29058a14abae464e8e7f22074675e0115', class: "digi-form-textarea__content" }, h("textarea", { key: '5273fb0ea8d7c1345bfc37df0214f1ceb497f2ae', 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: '782847ff2e8b5d53fd1a0e48157c98320d953332', class: "digi-form-textarea__footer" }, h("div", { key: 'd6db43705ad5646f7f3e7119e45c0023323ec991', 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: 'd9b119ec1349df2f83e9b088dc846b3f29198f97', 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: '38ade9720142b05d65248291749635e061681bad', class: "digi-form-textarea__footer" }, h("div", { key: 'fbe8041652cc9c1bc72bffc98582c5312b9c020b', 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: 'baea13a3e9d6c7a762cce0f0296ee0dcb267ff9f', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_logo/title-logo/title-logo.js

@@ -73,7 +73,7 @@ export class TitleLogo {
         };
     }
     render() {
-        return (h("div", { key: 'f2d92667466100ff385d2918a8396c95d32cb22c', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: 'd0a0692c5386725c0ce2fca5c4a6913b8710fa1c', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("div", { key: 'a0a36fd875d4fc2d6874f53ae49ac2e9f17e273f', class: "digi-title-logo-symbol" }, h("svg", { key: '79e60164315c41ee55ca1684e6ab1c8af5215ee9', viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, h("path", { key: '7ba4435c4063372d18cd78cfe176f37e1d733018', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.0076 6.97426V0C31.0194 0 44 12.9056 44 28.8261C44 34.3951 42.4073 39.5923 39.6561 44L33.8019 40.1595C35.822 36.8551 36.9855 32.9758 36.9855 28.8261C36.9855 16.7575 27.1458 6.97426 15.0076 6.97426ZM6.99059 28.8257C6.99059 33.2284 10.5795 36.7972 15.0076 36.7972C19.4356 36.7972 23.0245 33.2284 23.0245 28.8257C23.0245 24.4235 19.4356 20.8548 15.0076 20.8548C10.5795 20.8548 6.99059 24.4235 6.99059 28.8257ZM0 28.8257C0 20.5853 6.71916 13.9047 15.0076 13.9047C23.296 13.9047 30.0151 20.5853 30.0151 28.8257C30.0151 37.0666 23.296 43.7472 15.0076 43.7472C6.71916 43.7472 0 37.0666 0 28.8257Z", class: "main-symbol" }))), h("div", { key: '3994c7a05b180b03b86341cc68bf6b3f21b069d4', class: "digi-title-logo-name-wrapper" }, h("slot", { key: 'c5dba4a1f04be3a1eb6d6914ffb636ab6422d766', name: "logo-one-row" }), h("slot", { key: 'bdca25c928462a4eab311ecc9a0142fe651fea20', name: "logo-two-rows" }))));
+        return (h("div", { key: 'f2d92667466100ff385d2918a8396c95d32cb22c', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: 'd0a0692c5386725c0ce2fca5c4a6913b8710fa1c', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("div", { key: 'a0a36fd875d4fc2d6874f53ae49ac2e9f17e273f', class: "digi-title-logo-symbol" }, h("svg", { key: '489404f99e4b411bd66cc274b60a7fc83bffa126', height: "44px", width: "44px", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, h("path", { key: '78e7bcc761c014a83be23fa3845b1564e1f89bcc', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.0076 6.97426V0C31.0194 0 44 12.9056 44 28.8261C44 34.3951 42.4073 39.5923 39.6561 44L33.8019 40.1595C35.822 36.8551 36.9855 32.9758 36.9855 28.8261C36.9855 16.7575 27.1458 6.97426 15.0076 6.97426ZM6.99059 28.8257C6.99059 33.2284 10.5795 36.7972 15.0076 36.7972C19.4356 36.7972 23.0245 33.2284 23.0245 28.8257C23.0245 24.4235 19.4356 20.8548 15.0076 20.8548C10.5795 20.8548 6.99059 24.4235 6.99059 28.8257ZM0 28.8257C0 20.5853 6.71916 13.9047 15.0076 13.9047C23.296 13.9047 30.0151 20.5853 30.0151 28.8257C30.0151 37.0666 23.296 43.7472 15.0076 43.7472C6.71916 43.7472 0 37.0666 0 28.8257Z", class: "main-symbol" }))), h("div", { key: '46a1b7b8fd35718591d29093da200d1f79fab483', class: "digi-title-logo-name-wrapper" }, h("slot", { key: 'ec09ce755fcb0bf00045c947199c7c9cda9de689', name: "logo-one-row" }), h("slot", { key: '27eca2b9520cee673f0042d729c4d20a31406a72', name: "logo-two-rows" }))));
     }
     static get is() { return "digi-title-logo"; }
     static get encapsulation() { return "scoped"; }

package/dist/digi-arbetsformedlingen/design-tokens/components/_logo.variables.scss

@@ -1,17 +1,20 @@
-@mixin digi-title-logo--variables() {
-  --digi--title-logo-text-color: var(--digi--color--text--primary);
-  --digi--title-logo-font-weight: var(--digi--global--typography--font-weight--bold);
-  --digi--title-logo-font-size: var(--digi--typography--title-logo--font-size--mobile);
-  --digi--title-logo-font-size-small: var(--digi--global--typography--font-size--large);
-  --digi--title-logo-line-height-small: 1.25rem;
-  --digi--title-logo-symbol-color: var(--digi--color--logotype-color);
-  --digi--title-logo-symbol-width: 36px;
-  --digi--title-logo-symbol-height: 36px;
-  --digi--title-logo-symbol-width-mobile: 44px;
-  --digi--title-logo-symbol-height-mobile: 44px;
-  --digi--title-logo-text-height: 40px;
-  --digi--title-logo-border-width: var(--digi--global--border-width--base);
-  --digi--title-logo-vertical-padding: 1.375rem;
-  --digi--title-logo-gap: 9px;
-}color--text--secondary);
+@use '../../../../../../styles/src/digi-styles.utils' as *;
+
+@mixin digi-logo--variables() {
+  --digi--logo--img--min-width: #{rem(256)};
+  --digi--logo--img--max-width:#{rem(292)};
+  --digi--logo--img--max-width--large: #{rem(368)};
+  --digi--logo--img--max-width--system: #{rem(44)};
+
+  --digi--logo--padding: 1.375rem;
+  --digi--logo--padding--wide: var(--digi--gutter--larger);
+  --digi--logo--padding--large: var(--digi--gutter--medium);
+  --digi--logo--padding--large--wide: var(--digi--gutter--larger);
+
+  --digi--logo--logotype-color: var(--digi--color--logotype-color);
+  --digi--logo--color--primary: var(--digi--color--text--interactive--brand-primary);
+  --digi--logo--color--secondary: var(--digi--color--text--secondary);
+
+  --digi--logo--color--border--primary: var(--digi--color--text--primary);
+  --digi--logo--color--border--secondary: var(--digi--color--text--secondary);
 }