@designsystem-se/af 36.0.1 → 36.0.3

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/collection/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);
 }

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);
 }