@designsystem-se/af 36.0.2-beta.1 → 36.0.3-beta.0

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

@@ -5,15 +5,22 @@ License: none (public domain)
 :root {
   --digi--grayscale--0: #ffffff;
   --digi--grayscale--50: #fbfbfb;
+  --digi--grayscale--75: #f5f5f5;
   --digi--grayscale--100: #f4f4f4;
   --digi--grayscale--200: #ededed;
   --digi--grayscale--300: #e4e4e4;
   --digi--grayscale--400: #dddddd;
   --digi--grayscale--500: #cacaca;
+  --digi--grayscale--550: #c5c5c5;
   --digi--grayscale--600: #acacac;
+  --digi--grayscale--650: #9c9c9c;
   --digi--grayscale--700: #757575;
   --digi--grayscale--800: #5c5c5c;
+  --digi--grayscale--850: #515151;
+  --digi--grayscale--875: #414141;
   --digi--grayscale--900: #333333;
+  --digi--grayscale--950: #212121;
+  --digi--grayscale--975: #2c2c2c;
   --digi--grayscale--1000: #000000;
   --digi--sentiment--informative--200: #e9e9ff;
   --digi--sentiment--informative--500: #0A4DD1;
@@ -350,107 +357,6 @@ License: none (public domain)
   --digi--typography--button--font-size--desktop: var(--digi--global--typography--font-size--base);
   --digi--typography--button--font-size--desktop-large: var(--digi--global--typography--font-size--large);
   --digi--typography--button--font-weight--desktop: var(--digi--global--typography--font-weight--semibold);
-  --digi--color--logotype-color: var(--digi--color--logotype-color--light);
-  --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--light);
-  --digi--color--infographic--background: var(--digi--color--infographic--background--light);
-  --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--light);
-  --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--light);
-  --digi--color--infographic--brand--tertiary: var(--digi--color--infographic--brand--tertiary--light);
-  --digi--color--text--primary: var(--digi--color--text--primary--light);
-  --digi--color--text--secondary: var(--digi--color--text--secondary--light);
-  --digi--color--text--description: var(--digi--color--text--description--light);
-  --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--light);
-  --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--light);
-  --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--light);
-  --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--light);
-  --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--light);
-  --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--light);
-  --digi--color--background--primary: var(--digi--color--background--primary--light);
-  --digi--color--background--secondary: var(--digi--color--background--secondary--light);
-  --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--light);
-  --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--light);
-  --digi--color--background--pop-out: var(--digi--color--background--pop-out--light);
-  --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--light);
-  --digi--color--background--transparent: var(--digi--color--background--transparent--light);
-  --digi--color--background--notification: var(--digi--color--background--notification--light);
-  --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--light);
-  --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--light);
-  --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--light);
-  --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--light);
-  --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--light);
-  --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--light);
-  --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--light);
-  --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--light);
-  --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--light);
-  --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--light);
-  --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--light);
-  --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--light);
-  --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--light);
-  --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--light);
-  --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--light);
-  --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--light);
-  --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--light);
-  --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--light);
-  --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--light);
-  --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--light);
-  --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--light);
-  --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--light);
-  --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--light);
-  --digi--color--background--sentiment--success--primary: var(--digi--color--background--sentiment--success--primary--light);
-  --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--light);
-  --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--light);
-  --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--light);
-  --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--light);
-  --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--light);
-  --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--light);
-  --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--light);
-  --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--light);
-  --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--light);
-  --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--light);
-  --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--light);
-  --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--light);
-  --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--light);
-  --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--light);
-  --digi--color--border--notification: var(--digi--color--border--notification--light);
-  --digi--color--border--transparent: var(--digi--color--border--transparent--light);
-  --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--light);
-  --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--light);
-  --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--light);
-  --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--light);
-  --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--light);
-  --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--light);
-  --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--light);
-  --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--light);
-  --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--light);
-  --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--light);
-  --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--light);
-  --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--light);
-  --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--light);
-  --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--light);
-  --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--light);
-  --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--light);
-  --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--light);
-  --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--light);
-  --digi--color--marking--navigation--selected: var(--digi--color--marking--navigation--selected--light);
-  --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--light);
-  --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--light);
-  --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--light);
-  --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--light);
-  --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--light);
-  --digi--color--divider--primary: var(--digi--color--divider--primary--light);
-  --digi--color--divider--secondary: var(--digi--color--divider--secondary--light);
-  --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--light);
-  --digi--color--divider--cta: var(--digi--color--divider--cta--light);
-  --digi--color--icon--primary: var(--digi--color--icon--primary--light);
-  --digi--color--icon--secondary: var(--digi--color--icon--secondary--light);
-  --digi--color--icon--cta: var(--digi--color--icon--cta--light);
-  --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--light);
-  --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--light);
-  --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--light);
-  --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--light);
-  --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--light);
-  --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light);
-  --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--light);
   --digi--amethyst--500: #822998;
   --digi--granskott--150: #f2faf2;
   --digi--granskott--200: #ebf8eb;
@@ -473,6 +379,113 @@ License: none (public domain)
   --digi--rallarros--300: #f8ddf5;
   --digi--rallarros--500: #ce1cbd;
   --digi--sapphire--500: #1616b2;
+  --digi--color--logotype-color--dark: var(--digi--granskott--700);
+  --digi--color--infographic--lineart--dark: var(--digi--grayscale--900);
+  --digi--color--infographic--background--dark: var(--digi--grayscale--0);
+  --digi--color--infographic--brand--primary--dark: var(--digi--granskott--700);
+  --digi--color--infographic--brand--secondary--dark: var(--digi--granskott--250);
+  --digi--color--infographic--brand--tertiary--dark: var(--digi--rallarros--500);
+  --digi--color--text--primary--dark: var(--digi--grayscale--75);
+  --digi--color--text--primary-stay--dark: var(--digi--grayscale--850);
+  --digi--color--text--secondary--dark: var(--digi--grayscale--75);
+  --digi--color--text--secondary-stay--dark: var(--digi--grayscale--0);
+  --digi--color--text--description--dark: var(--digi--grayscale--100);
+  --digi--color--text--interactive--primary--dark: var(--digi--norrsken--500);
+  --digi--color--text--interactive--secondary--dark: var(--digi--grayscale--900);
+  --digi--color--text--interactive--tertiary--dark: var(--digi--grayscale--75);
+  --digi--color--text--interactive--brand-primary--dark: var(--digi--natthimmel--75);
+  --digi--color--text--interactive--brand-secondary--dark: var(--digi--norrsken--500);
+  --digi--color--text--interactive--visited--dark: #CB6DE3;
+  --digi--color--background--primary--dark: var(--digi--grayscale--975);
+  --digi--color--background--primary-elevated--dark: var(--digi--grayscale--850);
+  --digi--color--background--secondary--dark: var(--digi--grayscale--950);
+  --digi--color--background--secondary-elevated--dark: var(--digi--grayscale--875);
+  --digi--color--background--secondary-muted--dark: var(--digi--grayscale--900);
+  --digi--color--background--secondary-accent--dark: var(--digi--grayscale--850);
+  --digi--color--background--pop-out--dark: var(--digi--grayscale--850);
+  --digi--color--background--brand-primary--dark: var(--digi--grayscale--900);
+  --digi--color--background--transparent--dark: var(--digi--misc--transparent);
+  --digi--color--background--notification--dark: var(--digi--sentiment--error--500);
+  --digi--color--background--interactive--default--primary--dark: var(--digi--grayscale--50);
+  --digi--color--background--interactive--default--primary-inverted--dark: var(--digi--norrsken--500);
+  --digi--color--background--interactive--default--secondary--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--default--secondary-inverted--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--default--tertiary--dark: var(--digi--grayscale--875);
+  --digi--color--background--interactive--default--quaternary--dark: var(--digi--grayscale--850);
+  --digi--color--background--interactive--default--input-elements--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--default--pop-out--dark: var(--digi--grayscale--650);
+  --digi--color--background--interactive--hover--primary--dark: var(--digi--grayscale--650);
+  --digi--color--background--interactive--hover--secondary--dark: var(--digi--grayscale--875);
+  --digi--color--background--interactive--hover--tertiary--dark: var(--digi--grayscale--850);
+  --digi--color--background--interactive--hover--quarternary--dark: var(--digi--grayscale--875);
+  --digi--color--background--interactive--hover--inverted--dark: var(--digi--norrsken--400);
+  --digi--color--background--interactive--hover--quinary--dark: var(--digi--grayscale--850);
+  --digi--color--background--interactive--selected--primary--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--selected--secondary--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--selected--tertiary--dark: var(--digi--grayscale--875);
+  --digi--color--background--interactive--selected--on-menu-minus-button--dark: var(--digi--grayscale--650);
+  --digi--color--background--interactive--validation--success--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--validation--warning--dark: var(--digi--misc--transparent);
+  --digi--color--background--interactive--validation--error--dark: var(--digi--misc--transparent);
+  --digi--color--background--sentiment--error--primary--dark: var(--digi--sentiment--error--500);
+  --digi--color--background--sentiment--error--secondary--dark: var(--digi--sentiment--error--700);
+  --digi--color--background--sentiment--error--tertiary--dark: var(--digi--sentiment--error--200);
+  --digi--color--background--sentiment--error--tertiary-discreet--dark: var(--digi--grayscale--850);
+  --digi--color--background--sentiment--success--primary--dark: var(--digi--sentiment--success--500);
+  --digi--color--background--sentiment--success--secondary--dark: var(--digi--sentiment--success--700);
+  --digi--color--background--sentiment--success--tertiary--dark: var(--digi--sentiment--success--200);
+  --digi--color--background--sentiment--warning--primary--dark: var(--digi--sentiment--warning--500);
+  --digi--color--background--sentiment--warning--secondary--dark: var(--digi--sentiment--warning--700);
+  --digi--color--background--sentiment--warning--tertiary--dark: var(--digi--sentiment--warning--200);
+  --digi--color--background--sentiment--warning--quarternary--dark: var(--digi--grayscale--850);
+  --digi--color--background--sentiment--info--primary--dark: var(--digi--sentiment--informative--500);
+  --digi--color--background--sentiment--info--secondary--dark: var(--digi--sentiment--informative--700);
+  --digi--color--background--sentiment--info--tertiary--dark: var(--digi--sentiment--informative--200);
+  --digi--color--background--sentiment--neutral--primary--dark: var(--digi--grayscale--700);
+  --digi--color--background--sentiment--neutral--secondary--dark: var(--digi--grayscale--400);
+  --digi--color--background--sentiment--neutral--tertiary--dark: var(--digi--grayscale--900);
+  --digi--color--background--sentiment--beta--primary--dark: var(--digi--rallarros--500);
+  --digi--color--background--sentiment--beta--secondary--dark: var(--digi--rallarros--300);
+  --digi--color--border--notification--dark: var(--digi--grayscale--0);
+  --digi--color--border--transparent--dark: var(--digi--misc--transparent);
+  --digi--color--border--interactive--default--primary--dark: var(--digi--grayscale--75);
+  --digi--color--border--interactive--default--on-input--dark: var(--digi--grayscale--75);
+  --digi--color--border--interactive--default--on-input-nuance--dark: var(--digi--grayscale--650);
+  --digi--color--border--interactive--default--inverted--dark: var(--digi--norrsken--500);
+  --digi--color--border--interactive--hover--primary--dark: var(--digi--grayscale--75);
+  --digi--color--border--interactive--hover--secondary--dark: var(--digi--grayscale--75);
+  --digi--color--border--interactive--hover--inverted--dark: var(--digi--norrsken--400);
+  --digi--color--border--interactive--validation--success--dark: var(--digi--sentiment--success--500);
+  --digi--color--border--interactive--validation--warning--dark: var(--digi--sentiment--warning--900);
+  --digi--color--border--interactive--validation--error--dark: var(--digi--sentiment--error--500);
+  --digi--color--border--interactive--selected--primary--dark: var(--digi--grayscale--75);
+  --digi--color--border--interactive--selected--secondary--dark: var(--digi--grayscale--75);
+  --digi--color--border--sentiment--error--dark: var(--digi--sentiment--error--500);
+  --digi--color--border--sentiment--success--dark: var(--digi--sentiment--success--500);
+  --digi--color--border--sentiment--warning--dark: var(--digi--sentiment--warning--500);
+  --digi--color--border--sentiment--info--dark: var(--digi--sentiment--informative--500);
+  --digi--color--border--accent--primary--dark: var(--digi--grayscale--650);
+  --digi--color--border--accent--secondary--dark: var(--digi--granskott--700);
+  --digi--color--marking--navigation--selected--dark: var(--digi--granskott--700);
+  --digi--color--marking--navigation--level-active--dark: var(--digi--granskott--250);
+  --digi--color--marking--navigation--level-inactive--dark: var(--digi--grayscale--100);
+  --digi--color--marking--indication--primary--dark: var(--digi--sentiment--success--500);
+  --digi--color--marking--indication--secondary--dark: var(--digi--natthimmel--800);
+  --digi--color--marking--indication--tertiary--dark: var(--digi--grayscale--700);
+  --digi--color--divider--primary--dark: var(--digi--grayscale--400);
+  --digi--color--divider--secondary--dark: var(--digi--grayscale--200);
+  --digi--color--divider--on-brand-primary--dark: var(--digi--grayscale--650);
+  --digi--color--divider--cta--dark: var(--digi--norrsken--500);
+  --digi--color--icon--primary--dark: var(--digi--grayscale--75);
+  --digi--color--icon--secondary--dark: var(--digi--grayscale--75);
+  --digi--color--icon--cta--dark: var(--digi--norrsken--500);
+  --digi--color--icon--brand-primary--dark: var(--digi--grayscale--75);
+  --digi--color--icon--brand-secondary--dark: var(--digi--norrsken--500);
+  --digi--color--icon--validation--success--dark: var(--digi--sentiment--success--500);
+  --digi--color--icon--validation--warning--dark: var(--digi--sentiment--warning--500);
+  --digi--color--icon--validation--error--dark: var(--digi--sentiment--error--500);
+  --digi--color--misc--spinner-path--dark: var(--digi--grayscale--400);
+  --digi--color--misc--skeleton--dark: var(--digi--grayscale--400);
   --digi--color--logotype-color--light: var(--digi--granskott--700);
   --digi--color--infographic--lineart--light: var(--digi--grayscale--900);
   --digi--color--infographic--background--light: var(--digi--grayscale--0);
@@ -489,7 +502,9 @@ License: none (public domain)
   --digi--color--text--interactive--brand-secondary--light: var(--digi--norrsken--500);
   --digi--color--text--interactive--visited--light: var(--digi--amethyst--500);
   --digi--color--background--primary--light: var(--digi--grayscale--0);
+  --digi--color--background--primary-elevated--light: var(--digi--grayscale--0);
   --digi--color--background--secondary--light: var(--digi--grayscale--100);
+  --digi--color--background--secondary-elevated--light: var(--digi--grayscale--100);
   --digi--color--background--secondary-muted--light: var(--digi--grayscale--50);
   --digi--color--background--secondary-accent--light: var(--digi--grayscale--400);
   --digi--color--background--pop-out--light: var(--digi--granskott--200);
@@ -509,6 +524,7 @@ License: none (public domain)
   --digi--color--background--interactive--hover--tertiary--light: var(--digi--sapphire--500);
   --digi--color--background--interactive--hover--quarternary--light: var(--digi--grayscale--200);
   --digi--color--background--interactive--hover--inverted--light: var(--digi--norrsken--400);
+  --digi--color--background--interactive--hover--quinary--light: var(--digi--misc--transparent);
   --digi--color--background--interactive--selected--primary--light: var(--digi--sentiment--success--500);
   --digi--color--background--interactive--selected--secondary--light: var(--digi--natthimmel--800);
   --digi--color--background--interactive--selected--tertiary--light: var(--digi--grayscale--200);
@@ -519,6 +535,7 @@ License: none (public domain)
   --digi--color--background--sentiment--error--primary--light: var(--digi--sentiment--error--500);
   --digi--color--background--sentiment--error--secondary--light: var(--digi--sentiment--error--700);
   --digi--color--background--sentiment--error--tertiary--light: var(--digi--sentiment--error--200);
+  --digi--color--background--sentiment--error--tertiary-discreet--light: var(--digi--sentiment--error--200);
   --digi--color--background--sentiment--success--primary--light: var(--digi--sentiment--success--500);
   --digi--color--background--sentiment--success--secondary--light: var(--digi--sentiment--success--700);
   --digi--color--background--sentiment--success--tertiary--light: var(--digi--sentiment--success--200);
@@ -723,6 +740,226 @@ License: none (public domain)
   --digi--color--misc--spinner-path--light--af18: var(--digi--grayscale--400);
   --digi--color--misc--skeleton--light--af18: var(--digi--grayscale--400);
 }
+@media (prefers-color-scheme: light) {
+  :root {
+    --digi--color--logotype-color: var(--digi--color--logotype-color--light);
+    --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--light);
+    --digi--color--infographic--background: var(--digi--color--infographic--background--light);
+    --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--light);
+    --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--light);
+    --digi--color--infographic--brand--tertiary: var(--digi--color--infographic--brand--tertiary--light);
+    --digi--color--text--primary: var(--digi--color--text--primary--light);
+    --digi--color--text--secondary: var(--digi--color--text--secondary--light);
+    --digi--color--text--description: var(--digi--color--text--description--light);
+    --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--light);
+    --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--light);
+    --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--light);
+    --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--light);
+    --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--light);
+    --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--light);
+    --digi--color--background--primary: var(--digi--color--background--primary--light);
+    --digi--color--background--primary-elevated: var(--digi--color--background--primary-elevated--light);
+    --digi--color--background--secondary: var(--digi--color--background--secondary--light);
+    --digi--color--background--secondary-elevated: var(--digi--color--background--secondary-elevated--light);
+    --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--light);
+    --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--light);
+    --digi--color--background--pop-out: var(--digi--color--background--pop-out--light);
+    --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--light);
+    --digi--color--background--transparent: var(--digi--color--background--transparent--light);
+    --digi--color--background--notification: var(--digi--color--background--notification--light);
+    --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--light);
+    --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--light);
+    --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--light);
+    --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--light);
+    --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--light);
+    --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--light);
+    --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--light);
+    --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--light);
+    --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--light);
+    --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--light);
+    --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--light);
+    --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--light);
+    --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--light);
+    --digi--color--background--interactive--hover--quinary: var(--digi--color--background--interactive--hover--quinary--light);
+    --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--light);
+    --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--light);
+    --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--light);
+    --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--light);
+    --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--light);
+    --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--light);
+    --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--light);
+    --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--light);
+    --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--light);
+    --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--light);
+    --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--light);
+    --digi--color--background--sentiment--success--primary: var(--digi--color--background--sentiment--success--primary--light);
+    --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--light);
+    --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--light);
+    --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--light);
+    --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--light);
+    --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--light);
+    --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--light);
+    --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--light);
+    --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--light);
+    --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--light);
+    --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--light);
+    --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--light);
+    --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--light);
+    --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--light);
+    --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--light);
+    --digi--color--border--notification: var(--digi--color--border--notification--light);
+    --digi--color--border--transparent: var(--digi--color--border--transparent--light);
+    --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--light);
+    --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--light);
+    --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--light);
+    --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--light);
+    --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--light);
+    --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--light);
+    --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--light);
+    --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--light);
+    --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--light);
+    --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--light);
+    --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--light);
+    --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--light);
+    --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--light);
+    --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--light);
+    --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--light);
+    --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--light);
+    --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--light);
+    --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--light);
+    --digi--color--marking--navigation--selected: var(--digi--color--marking--navigation--selected--light);
+    --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--light);
+    --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--light);
+    --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--light);
+    --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--light);
+    --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--light);
+    --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--light);
+    --digi--color--divider--primary: var(--digi--color--divider--primary--light);
+    --digi--color--divider--secondary: var(--digi--color--divider--secondary--light);
+    --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--light);
+    --digi--color--divider--cta: var(--digi--color--divider--cta--light);
+    --digi--color--icon--primary: var(--digi--color--icon--primary--light);
+    --digi--color--icon--secondary: var(--digi--color--icon--secondary--light);
+    --digi--color--icon--cta: var(--digi--color--icon--cta--light);
+    --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--light);
+    --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--light);
+    --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--light);
+    --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--light);
+    --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--light);
+    --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--light);
+    --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--light);
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --digi--color--logotype-color: var(--digi--color--logotype-color--dark);
+    --digi--color--infographic--lineart: var(--digi--color--infographic--lineart--dark);
+    --digi--color--infographic--background: var(--digi--color--infographic--background--dark);
+    --digi--color--infographic--brand--primary: var(--digi--color--infographic--brand--primary--dark);
+    --digi--color--infographic--brand--secondary: var(--digi--color--infographic--brand--secondary--dark);
+    --digi--color--infographic--brand--tertiary: var(--digi--color--infographic--brand--tertiary--dark);
+    --digi--color--text--primary: var(--digi--color--text--primary--dark);
+    --digi--color--text--secondary: var(--digi--color--text--secondary--dark);
+    --digi--color--text--description: var(--digi--color--text--description--dark);
+    --digi--color--text--interactive--primary: var(--digi--color--text--interactive--primary--dark);
+    --digi--color--text--interactive--secondary: var(--digi--color--text--interactive--secondary--dark);
+    --digi--color--text--interactive--tertiary: var(--digi--color--text--interactive--tertiary--dark);
+    --digi--color--text--interactive--brand-primary: var(--digi--color--text--interactive--brand-primary--dark);
+    --digi--color--text--interactive--brand-secondary: var(--digi--color--text--interactive--brand-secondary--dark);
+    --digi--color--text--interactive--visited: var(--digi--color--text--interactive--visited--dark);
+    --digi--color--background--primary: var(--digi--color--background--primary--dark);
+    --digi--color--background--primary-elevated: var(--digi--color--background--primary-elevated--dark);
+    --digi--color--background--secondary: var(--digi--color--background--secondary--dark);
+    --digi--color--background--secondary-elevated: var(--digi--color--background--secondary--dark);
+    --digi--color--background--secondary-muted: var(--digi--color--background--secondary-muted--dark);
+    --digi--color--background--secondary-accent: var(--digi--color--background--secondary-accent--dark);
+    --digi--color--background--pop-out: var(--digi--color--background--pop-out--dark);
+    --digi--color--background--brand-primary: var(--digi--color--background--brand-primary--dark);
+    --digi--color--background--transparent: var(--digi--color--background--transparent--dark);
+    --digi--color--background--notification: var(--digi--color--background--notification--dark);
+    --digi--color--background--interactive--default--primary: var(--digi--color--background--interactive--default--primary--dark);
+    --digi--color--background--interactive--default--primary-inverted: var(--digi--color--background--interactive--default--primary-inverted--dark);
+    --digi--color--background--interactive--default--secondary: var(--digi--color--background--interactive--default--secondary--dark);
+    --digi--color--background--interactive--default--secondary-inverted: var(--digi--color--background--interactive--default--secondary-inverted--dark);
+    --digi--color--background--interactive--default--tertiary: var(--digi--color--background--interactive--default--tertiary--dark);
+    --digi--color--background--interactive--default--quaternary: var(--digi--color--background--interactive--default--quaternary--dark);
+    --digi--color--background--interactive--default--input-elements: var(--digi--color--background--interactive--default--input-elements--dark);
+    --digi--color--background--interactive--default--pop-out: var(--digi--color--background--interactive--default--pop-out--dark);
+    --digi--color--background--interactive--hover--primary: var(--digi--color--background--interactive--hover--primary--dark);
+    --digi--color--background--interactive--hover--secondary: var(--digi--color--background--interactive--hover--secondary--dark);
+    --digi--color--background--interactive--hover--tertiary: var(--digi--color--background--interactive--hover--tertiary--dark);
+    --digi--color--background--interactive--hover--quarternary: var(--digi--color--background--interactive--hover--quarternary--dark);
+    --digi--color--background--interactive--hover--inverted: var(--digi--color--background--interactive--hover--inverted--dark);
+    --digi--color--background--interactive--hover--quinary: var(--digi--color--background--interactive--hover--quinary--dark);
+    --digi--color--background--interactive--selected--primary: var(--digi--color--background--interactive--selected--primary--dark);
+    --digi--color--background--interactive--selected--secondary: var(--digi--color--background--interactive--selected--secondary--dark);
+    --digi--color--background--interactive--selected--tertiary: var(--digi--color--background--interactive--selected--tertiary--dark);
+    --digi--color--background--interactive--selected--on-menu-minus-button: var(--digi--color--background--interactive--selected--on-menu-minus-button--dark);
+    --digi--color--background--interactive--validation--success: var(--digi--color--background--interactive--validation--success--dark);
+    --digi--color--background--interactive--validation--warning: var(--digi--color--background--interactive--validation--warning--dark);
+    --digi--color--background--interactive--validation--error: var(--digi--color--background--interactive--validation--error--dark);
+    --digi--color--background--sentiment--error--primary: var(--digi--color--background--sentiment--error--primary--dark);
+    --digi--color--background--sentiment--error--secondary: var(--digi--color--background--sentiment--error--secondary--dark);
+    --digi--color--background--sentiment--error--tertiary: var(--digi--color--background--sentiment--error--tertiary--dark);
+    --digi--color--background--sentiment--error--tertiary-discreet: var(--digi--color--background--sentiment--error--tertiary-discreet--dark);
+    --digi--color--background--sentiment--success--primary: var(--digi--color--background--sentiment--success--primary--dark);
+    --digi--color--background--sentiment--success--secondary: var(--digi--color--background--sentiment--success--secondary--dark);
+    --digi--color--background--sentiment--success--tertiary: var(--digi--color--background--sentiment--success--tertiary--dark);
+    --digi--color--background--sentiment--warning--primary: var(--digi--color--background--sentiment--warning--primary--dark);
+    --digi--color--background--sentiment--warning--secondary: var(--digi--color--background--sentiment--warning--secondary--dark);
+    --digi--color--background--sentiment--warning--tertiary: var(--digi--color--background--sentiment--warning--tertiary--dark);
+    --digi--color--background--sentiment--warning--quarternary: var(--digi--color--background--sentiment--warning--quarternary--dark);
+    --digi--color--background--sentiment--info--primary: var(--digi--color--background--sentiment--info--primary--dark);
+    --digi--color--background--sentiment--info--secondary: var(--digi--color--background--sentiment--info--secondary--dark);
+    --digi--color--background--sentiment--info--tertiary: var(--digi--color--background--sentiment--info--tertiary--dark);
+    --digi--color--background--sentiment--neutral--primary: var(--digi--color--background--sentiment--neutral--primary--dark);
+    --digi--color--background--sentiment--neutral--secondary: var(--digi--color--background--sentiment--neutral--secondary--dark);
+    --digi--color--background--sentiment--neutral--tertiary: var(--digi--color--background--sentiment--neutral--tertiary--dark);
+    --digi--color--background--sentiment--beta--primary: var(--digi--color--background--sentiment--beta--primary--dark);
+    --digi--color--background--sentiment--beta--secondary: var(--digi--color--background--sentiment--beta--secondary--dark);
+    --digi--color--border--notification: var(--digi--color--border--notification--dark);
+    --digi--color--border--transparent: var(--digi--color--border--transparent--dark);
+    --digi--color--border--interactive--default--primary: var(--digi--color--border--interactive--default--primary--dark);
+    --digi--color--border--interactive--default--on-input: var(--digi--color--border--interactive--default--on-input--dark);
+    --digi--color--border--interactive--default--on-input-nuance: var(--digi--color--border--interactive--default--on-input-nuance--dark);
+    --digi--color--border--interactive--default--inverted: var(--digi--color--border--interactive--default--inverted--dark);
+    --digi--color--border--interactive--hover--primary: var(--digi--color--border--interactive--hover--primary--dark);
+    --digi--color--border--interactive--hover--secondary: var(--digi--color--border--interactive--hover--secondary--dark);
+    --digi--color--border--interactive--hover--inverted: var(--digi--color--border--interactive--hover--inverted--dark);
+    --digi--color--border--interactive--validation--success: var(--digi--color--border--interactive--validation--success--dark);
+    --digi--color--border--interactive--validation--warning: var(--digi--color--border--interactive--validation--warning--dark);
+    --digi--color--border--interactive--validation--error: var(--digi--color--border--interactive--validation--error--dark);
+    --digi--color--border--interactive--selected--primary: var(--digi--color--border--interactive--selected--primary--dark);
+    --digi--color--border--interactive--selected--secondary: var(--digi--color--border--interactive--selected--secondary--dark);
+    --digi--color--border--sentiment--error: var(--digi--color--border--sentiment--error--dark);
+    --digi--color--border--sentiment--success: var(--digi--color--border--sentiment--success--dark);
+    --digi--color--border--sentiment--warning: var(--digi--color--border--sentiment--warning--dark);
+    --digi--color--border--sentiment--info: var(--digi--color--border--sentiment--info--dark);
+    --digi--color--border--accent--primary: var(--digi--color--border--accent--primary--dark);
+    --digi--color--border--accent--secondary: var(--digi--color--border--accent--secondary--dark);
+    --digi--color--marking--navigation--selected: var(--digi--color--marking--navigation--selected--dark);
+    --digi--color--marking--navigation--level-active: var(--digi--color--marking--navigation--level-active--dark);
+    --digi--color--marking--navigation--level-inactive: var(--digi--color--marking--navigation--level-inactive--dark);
+    --digi--color--marking--indication--primary: var(--digi--color--marking--indication--primary--dark);
+    --digi--color--marking--indication--secondary: var(--digi--color--marking--indication--secondary--dark);
+    --digi--color--marking--indication--tertiary: var(--digi--color--marking--indication--tertiary--dark);
+    --digi--color--marking--indication--marker: var(--digi--color--marking--indication--marker--dark);
+    --digi--color--divider--primary: var(--digi--color--divider--primary--dark);
+    --digi--color--divider--secondary: var(--digi--color--divider--secondary--dark);
+    --digi--color--divider--on-brand-primary: var(--digi--color--divider--on-brand-primary--dark);
+    --digi--color--divider--cta: var(--digi--color--divider--cta--dark);
+    --digi--color--icon--primary: var(--digi--color--icon--primary--dark);
+    --digi--color--icon--secondary: var(--digi--color--icon--secondary--dark);
+    --digi--color--icon--cta: var(--digi--color--icon--cta--dark);
+    --digi--color--icon--brand-primary: var(--digi--color--icon--brand-primary--dark);
+    --digi--color--icon--brand-secondary: var(--digi--color--icon--brand-secondary--dark);
+    --digi--color--icon--validation--success: var(--digi--color--icon--validation--success--dark);
+    --digi--color--icon--validation--warning: var(--digi--color--icon--validation--warning--dark);
+    --digi--color--icon--validation--error: var(--digi--color--icon--validation--error--dark);
+    --digi--color--misc--spinner-path: var(--digi--color--misc--spinner-path--dark);
+    --digi--color--misc--skeleton: var(--digi--color--misc--skeleton--dark);
+  }
+}
 
 body {
   font-size: 1rem;
@@ -742,7 +979,7 @@ body {
   --digi--form-checkbox--border-color--warning: var(--digi--color--border--interactive--validation--warning);
   --digi--form-checkbox--box-shadow--error: var(--digi--color--border--interactive--validation--error);
   --digi--form-checkbox--box-shadow--warning: var(--digi--color--border--interactive--validation--warning);
-  --digi--form-checkbox--background-color: var(--digi--color--background--primary);
+  --digi--form-checkbox--background-color: var(--digi--color--background--interactive--default--input-elements);
   --digi--form-checkbox--background-color--primary: var(--digi--color--background--interactive--selected--primary);
   --digi--form-checkbox--background-color--secondary: var(--digi--color--background--interactive--selected--secondary);
   --digi--form-checkbox--background-color--error: var(--digi--color--background--interactive--validation--error);

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

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