@designsystem-se/af 39.2.1-beta.1 → 39.2.1-beta.darkmode.0

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-input-search/form-input-search.js

@@ -30,7 +30,8 @@ export class FormInputSearch {
          */
         this.afId = randomIdGenerator('digi-form-input-search');
         /**
-         * Sätter variant. Kan vara 'small', 'medium' eller 'large'
+         * Sätter variant. Kan vara 'small' eller 'medium'.
+         * @deprecated Obs, varianten 'large' kommer att utgå i december 2026.
          * @en Set input variation.
          */
         this.afVariation = FormInputSearchVariation.MEDIUM;
@@ -124,10 +125,10 @@ export class FormInputSearch {
         };
     }
     render() {
-        return (h(Host, { key: 'dc9d3a86eca58598cf266f6d90c2bede6e7b7cb0', tabindex: -1 }, h("div", { key: '814b4c00f2d9b765236723be6da34c8ef37e1d30', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: 'f278bedff0b115154175432e5ddc3b84e7f3a951', class: {
+        return (h(Host, { key: '479760a36173d0a06d88a6c407c87543a6b13125', tabindex: -1 }, h("div", { key: '4e49bfd22f8191c07418f4e11b6328c53efbf8d8', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: 'e4fdc40206a1bb9423b852e1f7e683ea8676a924', 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: 'f8cec04842f49c3ec42949ea5e74720a0795e72f', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: 'cebf2e4bdef7b2c87d858b9ae1127991691f3b06', slot: "icon" }), this.afButtonText))))));
+            }, 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: '3cd29d50fde3ddeb6b731969a51609688554cf75', 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: '26f2f3fbcd23a4e8ac3646f6f7d1cafd75126345', slot: "icon" }), this.afButtonText))))));
     }
     static get is() { return "digi-form-input-search"; }
     static get encapsulation() { return "scoped"; }
@@ -468,10 +469,13 @@ export class FormInputSearch {
                 "optional": false,
                 "docs": {
                     "tags": [{
+                            "name": "deprecated",
+                            "text": "Obs, varianten 'large' kommer att utg\u00E5 i december 2026."
+                        }, {
                             "name": "en",
                             "text": "Set input variation."
                         }],
-                    "text": "S\u00E4tter variant. Kan vara 'small', 'medium' eller 'large'"
+                    "text": "S\u00E4tter variant. Kan vara 'small' eller 'medium'."
                 },
                 "getter": false,
                 "setter": false,

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

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

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

@@ -3,8 +3,8 @@ v2.0 | 20110126
 License: none (public domain)
 */
 :host {
-  --digi--form-select--background--empty: var(--digi--color--background--interactive--default--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/_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
@@ -56,7 +56,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: '39fda33a8f16ff6b1f3d65331e9d90fbb9bc7335', "aria-label": this.afAriaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: 'ead665097072a0853d27f85aa72bc104d6af9c49', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '1b360b35ade13061ae477304d34da8f387a63a1e', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '6e949a03eb7c2332e2b4b7a5ac80df0906d2a82d', class: "digi-header__border" }), h("slot", { key: '7c147f8795238074425518e663610f2da2b71183', name: "header-navigation" }))));
+        return (h("header", { key: '9667c69145f910befbaefed822913c7adc569319', "aria-label": this.afAriaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '5c63e16530e9d98ce16df74eaeb2150af2971a5f', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '8e7050d3399652f6c94b6883f53e0a2fb8bd7be9', 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: '985bf8adcdcbdac550f442b4940e9cf77941a70e', class: "digi-header__border" }), h("slot", { key: '8c2d072829af6f678b0a9708fcbe969668e03ce5', name: "header-navigation" }))));
     }
     static get is() { return "digi-header"; }
     static get encapsulation() { return "scoped"; }