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

package/components/digi-form-fieldset.js

@@ -1,4 +1,4 @@
-import { F as FormFieldset, d as defineCustomElement$1 } from './p-e78c723f.js';
+import { F as FormFieldset, d as defineCustomElement$1 } from './p-D_-Q2l7Z.js';
 
 const DigiFormFieldset = FormFieldset;
 const defineCustomElement = defineCustomElement$1;

package/components/digi-form-file-upload.js

@@ -1,71 +1,104 @@
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-a53686b3.js';
-import { _ as _t } from './p-903a27d9.js';
-import { r as randomIdGenerator } from './p-ffe5c0e8.js';
-import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel } from './p-905ccb30.js';
-import { U as UtilBreakpointObserverBreakpoints } from './p-cdcaf0eb.js';
-import { F as FormValidationMessageVariation } from './p-7933b555.js';
-import { d as defineCustomElement$c } from './p-dab20489.js';
-import { d as defineCustomElement$b } from './p-22bcbe8a.js';
-import { d as defineCustomElement$a } from './p-e788c4e0.js';
-import { d as defineCustomElement$9 } from './p-4c4c38fd.js';
-import { d as defineCustomElement$8 } from './p-de2295b7.js';
-import { d as defineCustomElement$7 } from './p-4851d4b6.js';
-import { d as defineCustomElement$6 } from './p-db6386c7.js';
-import { d as defineCustomElement$5 } from './p-db81738c.js';
-import { d as defineCustomElement$4 } from './p-02ebe13f.js';
-import { d as defineCustomElement$3 } from './p-d2b12caf.js';
-import { d as defineCustomElement$2 } from './p-0e6a31ff.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-B6ugjiwM.js';
+import { _ as _t } from './p-DsO1BTml.js';
+import { r as randomIdGenerator } from './p-BGaIliX6.js';
+import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel } from './p-BfyJgcLA.js';
+import { U as UtilBreakpointObserverBreakpoints } from './p-DPq588Q4.js';
+import { F as FormValidationMessageVariation } from './p-B8hpiXmh.js';
+import { d as defineCustomElement$c } from './p-Cw1KRV3D.js';
+import { d as defineCustomElement$b } from './p-BNyUAR47.js';
+import { d as defineCustomElement$a } from './p-D9wdbtrJ.js';
+import { d as defineCustomElement$9 } from './p-sv31Bj2i.js';
+import { d as defineCustomElement$8 } from './p-CFrkz3rN.js';
+import { d as defineCustomElement$7 } from './p-CR8mVEoW.js';
+import { d as defineCustomElement$6 } from './p-Xfe6RWkX.js';
+import { d as defineCustomElement$5 } from './p-aZpxMui7.js';
+import { d as defineCustomElement$4 } from './p-C6y08__Y.js';
+import { d as defineCustomElement$3 } from './p-Bsazi10t.js';
+import { d as defineCustomElement$2 } from './p-DgfoVJDv.js';
 
-const formFileUploadCss = ".sc-digi-form-file-upload-h {\n  --digi--form-file-upload--color--background--small--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--small--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--medium--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--medium--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--large--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--large--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--border--small--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--small--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--color--border--medium--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--medium--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--color--border--large--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--large--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--border-width--small--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--small--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-width--medium--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--medium--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-width--large--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--large--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-style--small--default: var(--digi--global--border-style--none);\n  --digi--form-file-upload--border-style--medium--default: var(--digi--global--border-style--dashed);\n  --digi--form-file-upload--border-style--large--default: var(--digi--global--border-style--dashed);\n  --digi--form-file-upload--border-radius--small--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--border-radius--medium--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--border-radius--large--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--padding--small: var(--digi--gutter--medium) var(--digi--gutter--largest);\n  --digi--form-file-upload--padding--medium: var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);\n  --digi--form-file-upload--padding--large: var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);\n  --digi--form-file-upload--font-size--small: var(--digi--global--typography--font-size--small);\n  --digi--form-file-upload--font-size--medium: var(--digi--global--typography--font-size--base);\n  --digi--form-file-upload--font-size--large: var(--digi--global--typography--font-size--large);\n  --digi--form-file-upload--heading--font-family: var(--digi--global--typography--font-family--default);\n  --digi--form-file-upload--heading--font-weight: var(--digi--typography--heading-4--font-weight--desktop);\n  --digi--form-file-upload--heading--font-size: var(--digi--typography--heading-4--font-size--desktop);\n  --digi--form-file-upload--heading--font-size--large: var(--digi--typography--heading-4--font-size--desktop-large);\n  --digi--form-file-upload--font-family: var(--digi--global--typography--font-family--default);\n  --digi--form-file-upload--font-weight: var(--digi--typography--form-file-upload--font-weight--desktop);\n  --digi--form-file-upload--button-text--color--default: var(--digi--color--text--interactive--primary);\n  --digi--form-file-upload--button-text--color--hover: var(--digi--color--text--interactive--primary);\n  --digi--form-file-upload--padding--small--icon: var(--digi--global--spacing--smaller) var(--digi--global--spacing--smallest-2);\n  --digi--form-file-upload--padding--medium--icon: var(--digi--global--spacing--base) var(--digi--global--spacing--smallest-2);\n  --digi--form-file-upload--width--small: 132px;\n  --digi--form-file-upload--width--medium: 304px;\n  --digi--form-file-upload--width--large: inherit;\n  --digi--form-file-upload--border--error: var(--digi--global--border-style--solid) solid;\n  --digi--form-file-upload--border-color--error: var(--digi--color--border--interactive--validation--error);\n  --digi--form-file-upload--border--error--width: var(--digi--border-width--secondary);\n  --digi--form-file-upload--background--error: var(--digi--color--background--interactive--validation--error);\n  container-type: inline-size;\n  display: block;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h a.sc-digi-form-file-upload {\n  font-weight: var(--digi--global--typography--font-weight--semibold);\n  color: var(--digi--color--text--interactive--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload.sc-digi-form-file-upload {\n  font-family: var(--digi--global--typography--font-family--default);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--small.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--small--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--small--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--small--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--small--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--small--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--small--default);\n  --WIDTH: var(--digi--form-file-upload--width--small);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--small);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--small--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--medium.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--medium--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--medium--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--medium--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--medium--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--medium--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--medium--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--medium--default);\n  --WIDTH: var(--digi--form-file-upload--width--medium);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--medium);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--large.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--large--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--large--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--large--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--large--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--large--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--large--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--large--default);\n  --WIDTH: var(--digi--form-file-upload--width--large);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--large);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--has-errors.sc-digi-form-file-upload {\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border--error);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--border-color--error);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--border-color--error);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border--error--width);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--background--error);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload {\n  margin-right: 0.5rem;\n  animation: animation__rotation 3s infinite linear;\n  transform-origin: center;\n  --digi--icon--height: 1rem;\n}\n@media (prefers-reduced-motion) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload {\n    animation: none;\n  }\n}\n@keyframes animation__rotation {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__input.sc-digi-form-file-upload {\n  display: none;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload {\n  margin: 0 0 auto 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  color: var(--digi--form-file-upload--button-text--color--default);\n  display: flex;\n  align-items: center;\n  font-family: var(--digi--global--typography--font-family--default);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover {\n  color: var(--digi--form-file-upload--button-text--color--hover);\n  text-decoration: underline;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover .digi-form-file-upload__button-icon.sc-digi-form-file-upload {\n  --digi--icon--color: var(--digi--form-file-upload--button-text--color--hover);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n  text-decoration: underline;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload {\n  --digi--icon--height: 1.25rem;\n  --digi--icon--width: 1.25rem;\n  --digi--icon--color: var(--digi--color--text--interactive--primary);\n  margin-left: 5px;\n  padding: var(--ICON--PADDING);\n  padding-right: 0;\n  padding-left: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload:hover {\n  --digi--icon--color: var(--digi--form-file-upload--button-text--color--hover);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area.sc-digi-form-file-upload {\n  border-color: var(--COLOR--BORDER--DEFAULT);\n  border-radius: var(--BORDER-RADIUS--DEFAULT);\n  border-width: var(--BORDER-WIDTH--DEFAULT);\n  border-style: var(--BORDER-STYLE--DEFAULT);\n  max-width: var(--WIDTH);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--COLOR--BACKGROUND--DEFAULT);\n  align-items: center;\n  padding: var(--PADDING);\n  margin-bottom: var(--digi--gutter--medium);\n  margin-top: var(--digi--gutter--button-block-small);\n  position: relative;\n  cursor: pointer;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area--hover.sc-digi-form-file-upload {\n  border-color: var(--COLOR--BORDER--HOVER);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area-overlay.sc-digi-form-file-upload {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: var(--COLOR--BACKGROUND--HOVER);\n  opacity: 0.1;\n  top: 0;\n  left: 0;\n  z-index: 10;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload .paper-clip.sc-digi-form-file-upload {\n  padding-right: 0.5rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-list.sc-digi-form-file-upload {\n  max-width: none;\n  padding: 0;\n  margin: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files.sc-digi-form-file-upload {\n  border-radius: var(--BORDER-RADIUS--DEFAULT);\n  max-width: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--COLOR--BACKGROUND--FILE-LIST);\n  padding: var(--digi--gutter--largest-2) var(--digi--padding--large);\n  margin-bottom: var(--digi--gutter--medium);\n  margin-top: var(--digi--gutter--medium);\n  padding-bottom: var(--digi--padding--smaller);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading.sc-digi-form-file-upload {\n  font-family: var(--digi--form-file-upload--heading--font-family);\n  font-size: var(--digi--typography--label--font-size--desktop);\n  font-weight: var(--digi--form-file-upload--heading--font-weight);\n  color: var(--digi--color--text--primary);\n  margin: var(--digi--margin--small) 0 var(--digi--margin--medium) 0;\n  display: block;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading--and-errors.sc-digi-form-file-upload {\n  margin-top: var(--digi--margin--largest);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.with-files.sc-digi-form-file-upload {\n  border-bottom: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload {\n  max-height: 1.5rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload .clear-icon.sc-digi-form-file-upload {\n  padding-right: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload {\n  margin: 0;\n  padding: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload {\n  list-style: none;\n  margin-bottom: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload:last-of-type {\n  margin-bottom: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item.sc-digi-form-file-upload {\n  margin: var(--digi--margin--small) 0;\n  margin-bottom: var(--digi--margin--medium);\n  width: 100%;\n  box-sizing: border-box;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload {\n  list-style-type: none;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload:nth-child(n+2) {\n  border-top: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .info-wrapper.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  height: auto;\n  min-width: 20%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .button-wrapper.sc-digi-form-file-upload {\n  display: flex;\n  min-width: 20%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload p.sc-digi-form-file-upload {\n  margin: auto var(--digi--margin--small) !important;\n  font-weight: var(--digi--form-file-upload--font-weight);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  white-space: nowrap;\n  height: max-content;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .digi-form-file-upload__button-abort.sc-digi-form-file-upload {\n  margin: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-and-thumbnail-container.sc-digi-form-file-upload {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  min-width: 20%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload {\n  width: 1.375rem;\n  height: 1.375rem;\n  display: flex;\n  align-self: baseline;\n  position: relative;\n  top: 4px;\n  left: 0px;\n  margin-right: 4px;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload svg.sc-digi-form-file-upload {\n  --digi--icon--height: 16px;\n  --digi--icon--width: 16px;\n  --digi--icon--color: var(--digi--color--icon--validation--success);\n  background-color: var(--digi--color--background--primary);\n  border-radius: 50%;\n  align-self: flex-start;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload {\n  width: 100%;\n  margin: auto 0;\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  height: max-content;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name--thumbnail.sc-digi-form-file-upload {\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  margin: auto 0 auto var(--digi--margin--small);\n  color: var(--digi--form-file-upload--button-text--color--default);\n}\n@media (max-width: 500px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload {\n    max-width: 17.5rem;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n}\n@container (max-width: 620px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item-name {\n    max-width: 17.5rem;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  justify-content: space-between;\n  align-items: center;\n  overflow-wrap: break-word;\n  gap: 32px;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-inner.sc-digi-form-file-upload {\n  display: flex;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload {\n  margin: 0;\n  align-self: flex-start;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload::after {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E\");\n  top: -6px;\n  left: 24px;\n  width: 18px;\n  height: 18px;\n  overflow: hidden;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .thumbnail.sc-digi-form-file-upload {\n  width: 2rem;\n  height: 2rem;\n  object-fit: cover;\n  flex-grow: 0;\n  margin-right: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .hidden.sc-digi-form-file-upload {\n  margin-left: var(--digi--margin--larger);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload {\n  position: relative;\n  top: 6px;\n  left: 5px;\n  margin-right: 1.25rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload::after {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E\");\n  top: -7px;\n  left: 15px;\n  width: 18px;\n  height: 18px;\n  overflow: hidden;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-info.sc-digi-form-file-upload {\n  width: 100%;\n}\n@container (max-width: 500px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item span {\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error.sc-digi-form-file-upload {\n  color: var(--digi--color--icon--validation--error);\n}\n.sc-digi-form-file-upload-h .visually-hidden.sc-digi-form-file-upload {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n}\n@container (min-width: 500px) {\n  .sc-digi-form-file-upload-h .hidden-desktop {\n    display: none !important;\n  }\n}\n@container (max-width: 499px) {\n  .sc-digi-form-file-upload-h .hidden-mobile {\n    display: none !important;\n  }\n}";
-const DigiFormFileUploadStyle0 = formFileUploadCss;
+const formFileUploadCss = () => `.sc-digi-form-file-upload-h{--digi--form-file-upload--color--background--small--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--small--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--background--medium--default:var(--digi--color--background--interactive--default--quaternary);--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);--digi--form-file-upload--color--border--medium--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--color--border--large--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--large--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--border-width--small--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--small--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-width--medium--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--medium--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-width--large--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--large--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-style--small--default:var(--digi--global--border-style--none);--digi--form-file-upload--border-style--medium--default:var(--digi--global--border-style--dashed);--digi--form-file-upload--border-style--large--default:var(--digi--global--border-style--dashed);--digi--form-file-upload--border-radius--small--default:var(--digi--border-radius--secondary);--digi--form-file-upload--border-radius--medium--default:var(--digi--border-radius--secondary);--digi--form-file-upload--border-radius--large--default:var(--digi--border-radius--secondary);--digi--form-file-upload--padding--small:var(--digi--gutter--medium) var(--digi--gutter--largest);--digi--form-file-upload--padding--medium:var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);--digi--form-file-upload--padding--large:var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);--digi--form-file-upload--font-size--small:var(--digi--global--typography--font-size--small);--digi--form-file-upload--font-size--medium:var(--digi--global--typography--font-size--base);--digi--form-file-upload--font-size--large:var(--digi--global--typography--font-size--large);--digi--form-file-upload--heading--font-family:var(--digi--global--typography--font-family--default);--digi--form-file-upload--heading--font-weight:var(--digi--typography--heading-4--font-weight--desktop);--digi--form-file-upload--heading--font-size:var(--digi--typography--heading-4--font-size--desktop);--digi--form-file-upload--heading--font-size--large:var(--digi--typography--heading-4--font-size--desktop-large);--digi--form-file-upload--font-family:var(--digi--global--typography--font-family--default);--digi--form-file-upload--font-weight:var(--digi--typography--form-file-upload--font-weight--desktop);--digi--form-file-upload--button-text--color--default:var(--digi--color--text--interactive--primary);--digi--form-file-upload--button-text--color--hover:var(--digi--color--text--interactive--primary);--digi--form-file-upload--padding--small--icon:var(--digi--global--spacing--smaller) var(--digi--global--spacing--smallest-2);--digi--form-file-upload--padding--medium--icon:var(--digi--global--spacing--base) var(--digi--global--spacing--smallest-2);--digi--form-file-upload--width--small:132px;--digi--form-file-upload--width--medium:304px;--digi--form-file-upload--width--large:inherit;--digi--form-file-upload--border--error:var(--digi--global--border-style--solid) solid;--digi--form-file-upload--border-color--error:var(--digi--color--border--interactive--validation--error);--digi--form-file-upload--border--error--width:var(--digi--border-width--secondary);--digi--form-file-upload--background--error:var(--digi--color--background--interactive--validation--error);container-type:inline-size;display:block;width:100%}.sc-digi-form-file-upload-h a.sc-digi-form-file-upload{font-weight:var(--digi--global--typography--font-weight--semibold);color:var(--digi--color--text--interactive--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload.sc-digi-form-file-upload{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-file-upload-h .digi-form-file-upload--small.sc-digi-form-file-upload{--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);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--small--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--small--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--small--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--small--default);--WIDTH:var(--digi--form-file-upload--width--small);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--small);--ICON--PADDING:var(--digi--form-file-upload--padding--small--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--medium.sc-digi-form-file-upload{--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);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--medium--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--medium--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--medium--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--medium--default);--WIDTH:var(--digi--form-file-upload--width--medium);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--medium);--ICON--PADDING:var(--digi--form-file-upload--padding--medium--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--large.sc-digi-form-file-upload{--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);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--large--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--large--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--large--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--large--default);--WIDTH:var(--digi--form-file-upload--width--large);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--large);--ICON--PADDING:var(--digi--form-file-upload--padding--medium--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--has-errors.sc-digi-form-file-upload{--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border--error);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--border-color--error);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--border-color--error);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border--error--width);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--background--error)}.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload{margin-right:0.5rem;animation:animation__rotation 3s infinite linear;transform-origin:center;--digi--icon--height:1rem}@media (prefers-reduced-motion){.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload{animation:none}}@keyframes animation__rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.sc-digi-form-file-upload-h .digi-form-file-upload__input.sc-digi-form-file-upload{display:none}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload{margin:0 0 auto 0.5rem;text-align:center;white-space:nowrap;background:none;border:none;cursor:pointer;font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);color:var(--digi--form-file-upload--button-text--color--default);display:flex;align-items:center;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover{color:var(--digi--form-file-upload--button-text--color--hover);text-decoration:underline}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover .digi-form-file-upload__button-icon.sc-digi-form-file-upload{--digi--icon--color:var(--digi--form-file-upload--button-text--color--hover)}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white;text-decoration:underline}.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload{--digi--icon--height:1.25rem;--digi--icon--width:1.25rem;--digi--icon--color:var(--digi--color--text--interactive--primary);margin-left:5px;padding:var(--ICON--PADDING);padding-right:0;padding-left:0}.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload:hover{--digi--icon--color:var(--digi--form-file-upload--button-text--color--hover)}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area.sc-digi-form-file-upload{border-color:var(--COLOR--BORDER--DEFAULT);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);max-width:var(--WIDTH);margin:0;display:flex;flex-direction:column;background-color:var(--COLOR--BACKGROUND--DEFAULT);align-items:center;padding:var(--PADDING);margin-bottom:var(--digi--gutter--medium);margin-top:var(--digi--gutter--button-block-small);position:relative;cursor:pointer}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area--hover.sc-digi-form-file-upload{border-color:var(--COLOR--BORDER--HOVER)}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area-overlay.sc-digi-form-file-upload{position:absolute;width:100%;height:100%;background-color:var(--COLOR--BACKGROUND--HOVER);opacity:0.1;top:0;left:0;z-index:10}.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload .paper-clip.sc-digi-form-file-upload{padding-right:0.5rem}.sc-digi-form-file-upload-h .digi-form-file-upload__files-list.sc-digi-form-file-upload{max-width:none;padding:0;margin:0}.sc-digi-form-file-upload-h .digi-form-file-upload__files.sc-digi-form-file-upload{border-radius:var(--BORDER-RADIUS--DEFAULT);max-width:100%;width:100%;box-sizing:border-box;background-color:var(--COLOR--BACKGROUND--FILE-LIST);padding:var(--digi--gutter--largest-2) var(--digi--padding--large);margin-bottom:var(--digi--gutter--medium);margin-top:var(--digi--gutter--medium);padding-bottom:var(--digi--padding--smaller)}.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading.sc-digi-form-file-upload{font-family:var(--digi--form-file-upload--heading--font-family);font-size:var(--digi--typography--label--font-size--desktop);font-weight:var(--digi--form-file-upload--heading--font-weight);color:var(--digi--color--text--primary);margin:var(--digi--margin--small) 0 var(--digi--margin--medium) 0;display:block}.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading--and-errors.sc-digi-form-file-upload{margin-top:var(--digi--margin--largest)}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload{display:flex;justify-content:space-between;padding-bottom:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.with-files.sc-digi-form-file-upload{border-bottom:var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--tertiary-hypotes)}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload{max-height:1.5rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload .clear-icon.sc-digi-form-file-upload{padding-right:0}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload{margin:0;padding:0}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload{list-style:none;margin-bottom:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload:last-of-type{margin-bottom:0}.sc-digi-form-file-upload-h .digi-form-file-upload__item.sc-digi-form-file-upload{margin:var(--digi--margin--small) 0;margin-bottom:var(--digi--margin--medium);width:100%;box-sizing:border-box}.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload{list-style-type:none}.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload:nth-child(n+2){border-top:var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--tertiary-hypotes)}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload{display:flex;justify-content:space-between;align-items:center;width:100%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .info-wrapper.sc-digi-form-file-upload{display:flex;justify-content:flex-start;align-items:center;height:auto;min-width:20%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .button-wrapper.sc-digi-form-file-upload{display:flex;min-width:20%;justify-content:flex-end;align-items:center}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload p.sc-digi-form-file-upload{margin:auto var(--digi--margin--small) !important;font-weight:var(--digi--form-file-upload--font-weight);font-size:var(--digi--typography--body--font-size--desktop);white-space:nowrap;height:max-content;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .digi-form-file-upload__button-abort.sc-digi-form-file-upload{margin:0}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-and-thumbnail-container.sc-digi-form-file-upload{display:flex;align-items:center;justify-content:flex-start;width:100%;min-width:20%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload{width:1.375rem;height:1.375rem;display:flex;align-self:baseline;position:relative;top:4px;left:0px;margin-right:4px}.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check-icon.sc-digi-form-file-upload{--digi--icon--height:16px;--digi--icon--width:16px;--digi--icon--color:var(--digi--color--icon--validation--success);min-height:0;width:16px;height:16px;background-color:var(--digi--color--background--primary);border-radius:50%;align-self:flex-start}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload{width:100%;margin:auto 0;font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);height:max-content}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name--thumbnail.sc-digi-form-file-upload{font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);margin:auto 0 auto var(--digi--margin--small);color:var(--digi--form-file-upload--button-text--color--default)}@media (max-width: 500px){.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload{max-width:17.5rem}}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}@container (max-width: 620px){.sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item-name{max-width:17.5rem}}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload{position:relative;display:flex;padding:0;margin:0;justify-content:space-between;align-items:center;overflow-wrap:break-word;gap:32px}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-inner.sc-digi-form-file-upload{display:flex;width:100%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload{margin:0;align-self:flex-start}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload::after{position:absolute;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E");top:-6px;left:24px;width:18px;height:18px;overflow:hidden}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .thumbnail.sc-digi-form-file-upload{width:2rem;height:2rem;object-fit:cover;flex-grow:0;margin-right:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .hidden.sc-digi-form-file-upload{margin-left:var(--digi--margin--larger)}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload{position:relative;top:6px;left:5px;margin-right:1.25rem}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload::after{position:absolute;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E");top:-7px;left:15px;width:18px;height:18px;overflow:hidden}.sc-digi-form-file-upload-h .digi-form-file-upload__item-info.sc-digi-form-file-upload{width:100%}@container (max-width: 500px){.sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item span{margin-left:0;margin-right:auto}}.sc-digi-form-file-upload-h .digi-form-file-upload__error.sc-digi-form-file-upload{color:var(--digi--color--icon--validation--error)}.sc-digi-form-file-upload-h .visually-hidden.sc-digi-form-file-upload{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}@container (min-width: 500px){.sc-digi-form-file-upload-h .hidden-desktop{display:none !important}}@container (max-width: 499px){.sc-digi-form-file-upload-h .hidden-mobile{display:none !important}}`;
 
 const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.afOnUploadFile = createEvent(this, "afOnUploadFile", 7);
         this.afOnRemoveFile = createEvent(this, "afOnRemoveFile", 7);
         this.afOnCancelFile = createEvent(this, "afOnCancelFile", 7);
         this.afOnReady = createEvent(this, "afOnReady", 3);
         this.afShowModal = createEvent(this, "afShowModal", 7);
-        this.toBase64 = (file) => new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onload = () => {
-                const encoded = reader.result.toString().replace(/^data:(.*,)?/, '');
-                resolve(encoded);
-            };
-            reader.onerror = (error) => reject(error);
-        });
-        this._input = undefined;
-        this._fileList = undefined;
-        this._uploadButton = undefined;
-        this._srTextContainer = undefined;
         this.files = [];
         this.error = false;
         this.errorMessages = [];
         this.fileHover = false;
+        /**
+         * Texten till label-elementet. Obligatoriskt fält.
+         * @en The label text. Required field.
+         */
         this.afLabel = _t.form.file_upload;
-        this.afLabelDescription = undefined;
+        /**
+         * Sätter variant. Kan vara 'small', 'medium' eller 'large'. Oberoende på satt storlek så kommer komponenten bli 'small' på mobilskärmar.
+         * @en Set input variation 'small', 'medium' or 'large'. On a mobile screen the variation will be automatically set to 'small'.
+         */
         this.afVariation = FormFileUploadVariation.SMALL;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
         this.afId = randomIdGenerator('digi-form-file-upload');
-        this.afFileTypes = undefined;
+        /**
+         * Sätter en maximal filstorlek i MB, 10MB är standard.
+         * @en Set file max size in MB
+         */
         this.afFileMaxSize = 10;
-        this.afMaxFiles = undefined;
-        this.afName = undefined;
-        this.afUploadBtnText = undefined;
-        this.afRequired = undefined;
-        this.afRequiredText = undefined;
+        /**
+         * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+         * @en Set this to true if the form contains more required fields than optional fields.
+         */
         this.afAnnounceIfOptional = false;
+        /**
+         * Sätt rubrik för uppladdade filer.
+         * @en Set heading for uploaded files.
+         */
         this.afHeadingFiles = _t.form.file_uploaded_files;
-        this.afAnnounceIfOptionalText = undefined;
-        this.afFileMaxSizeText = undefined;
+        /**
+         * Visar miniatyrbild/ikon på uppladdade filer.
+         * @en Shows thumbnail.
+         */
         this.afShowThumbnail = false;
+        /**
+         * Aktiverar förhandsgranskning.
+         * @en Activates preview of uploaded files.
+         */
         this.afEnablePreview = false;
-        this.afValidationText = undefined;
+        /**
+         * Sätter antivirus scan status. Kan vara 'enable' eller 'disabled'.
+         * @en Set antivirus scan status. Enable is default.
+         */
         this.afValidation = FormFileUploadValidation.DISABLED;
+        /**
+         * Sätt rubrikens vikt. 'h2' är förvalt.
+         * @en Set heading level. Default is 'h2'
+         */
         this.afHeadingLevel = FormFileUploadHeadingLevel.H2;
+        /**
+         * Om värdet är true får felmeddelandet attributet role="alert".
+         * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+         * @en If the value is true, the error message gets the attribute role="alert".
+         * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+         */
         this.afErrorMessageIsAlert = true;
+        this.toBase64 = (file) => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const encoded = reader.result.toString().replace(/^data:(.*,)?/, '');
+                resolve(encoded);
+            };
+            reader.onerror = (error) => reject(error);
+        });
     }
     afValidationTextChange() {
         this.setValidationText();
@@ -523,7 +556,7 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
         return this.renderCheckmark();
     }
     renderCheckmark() {
-        return (h("span", { class: "digi-form-file-upload__item-green-check" }, h("digi-icon-check-circle-solid", null)));
+        return (h("span", { class: "digi-form-file-upload__item-green-check" }, h("digi-icon-check-circle-solid", { class: "digi-form-file-upload__item-green-check-icon" })));
     }
     renderPDFThumbnail(file) {
         if (this.afShowThumbnail) {
@@ -583,28 +616,30 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
             } }, this.renderFiles())));
     }
     render() {
-        return (h(Fragment, { key: 'bec280d44d534a720927ab737b34335600c3fe80' }, h("digi-util-breakpoint-observer", { key: '93983b718eda1869ff95f7a0abe8c6704395a1e0', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '23f30473aa0dd681c6c4ea20138d3f13391bb070', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'c42a873187b3bf30ddfdb71561d6902a8b2f98fe', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'db1082e11bafb320c13a790d639d37ca821617ac', class: {
+        return (h(Fragment, { key: 'ea0f5e831e4b91840870f13a0f765bddde7f2b3f' }, h("digi-util-breakpoint-observer", { key: 'fdba1fa892784d3bfaa437c14ca7fe4a2d6211d0', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: 'cc6ffd28d1478bd5f1205bd3dfe4fa84c19e8f55', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'e341b099dceeadda16bb1b00c9f294b32eb619fa', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'ddb216147c7463573e772bd25cd8ea1313c0be8d', class: {
                 'digi-form-file-upload__upload-area': true,
                 'digi-form-file-upload__upload-area--hover': this.fileHover
             }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'f58d5f61b5568263e9b60b255f47e6ef418c78e5', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'c58c52f7e2c8aa8d17fe510ef90435d488844237', class: "digi-form-file-upload__text-area" }, h("button", { key: '1bb7fa84e0778702d0e77008f7d468d560ac8e17', type: "button", id: this.afId + '-button', ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'b5ed1a44293012aa6bdcfc86937f04bf751fc642', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'ec86494fd7299db8e3c5e9ad9940a633fc9e73a8', class: "digi-form-file-upload__text-area" }, h("button", { key: 'adcc823a998bce77bd83f2c0ee486f55d060204b', type: "button", id: this.afId + '-button', ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
-            } }, h("digi-icon-paperclip", { key: 'a84b67ad055682b1c1b013ec948af0935c35ed0c', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, h("digi-icon-paperclip", { key: 'ae23c375fcbbbf3e4b8b105d7e30d9c8316fc5f3', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
             ? this.afUploadBtnText
-            : _t.form.file_choose), h("input", { key: 'd0babe3bcbc5d03f2436c0f4a7ee23a93ecb0474', ref: (el) => {
+            : _t.form.file_choose), h("input", { key: '5d2beb87d1565c478cfa280b9790fc25de90e958', ref: (el) => {
                 this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: '20a4158d0462ee2f871bddb57b9e168d356573ed' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: 'ade6d22fde218536ce42daff285a1605ac16bdb1', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
+            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: 'c8e9e00250ab4cb9da92bd7695fb389ddd74428a' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: 'e54f8e9d99ddd6b39833c32f3080c6f7eef840a9', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (h("div", { key: '06044ba8e2a5d7e76374af1dfa479c891554ab45', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: '5f246f4669dc97e046855e46f25792da5325051c', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     get hostElement() { return this; }
     static get watchers() { return {
-        "afValidationText": ["afValidationTextChange"]
+        "afValidationText": [{
+                "afValidationTextChange": 0
+            }]
     }; }
-    static get style() { return DigiFormFileUploadStyle0; }
+    static get style() { return formFileUploadCss(); }
 }, [2, "digi-form-file-upload", {
         "afLabel": [1, "af-label"],
         "afLabelDescription": [1, "af-label-description"],
@@ -642,7 +677,9 @@ const FormFileUpload = /*@__PURE__*/ proxyCustomElement(class FormFileUpload ext
         "afMGetFormControlElement": [64],
         "afMClearFiles": [64]
     }, [[0, "focus", "focusOnInput"]], {
-        "afValidationText": ["afValidationTextChange"]
+        "afValidationText": [{
+                "afValidationTextChange": 0
+            }]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -651,62 +688,62 @@ function defineCustomElement$1() {
     const components = ["digi-form-file-upload", "digi-form-label", "digi-form-validation-message", "digi-icon-check-circle-solid", "digi-icon-paperclip", "digi-icon-spinner", "digi-icon-trash", "digi-icon-validation-error", "digi-icon-validation-success", "digi-icon-validation-warning", "digi-icon-x-button-outline", "digi-util-breakpoint-observer"];
     components.forEach(tagName => { switch (tagName) {
         case "digi-form-file-upload":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FormFileUpload);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), FormFileUpload);
             }
             break;
         case "digi-form-label":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$c();
             }
             break;
         case "digi-form-validation-message":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$b();
             }
             break;
         case "digi-icon-check-circle-solid":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$a();
             }
             break;
         case "digi-icon-paperclip":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$9();
             }
             break;
         case "digi-icon-spinner":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$8();
             }
             break;
         case "digi-icon-trash":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$7();
             }
             break;
         case "digi-icon-validation-error":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$6();
             }
             break;
         case "digi-icon-validation-success":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$5();
             }
             break;
         case "digi-icon-validation-warning":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
         case "digi-icon-x-button-outline":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "digi-util-breakpoint-observer":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;

package/components/digi-form-filter.js

@@ -1,44 +1,51 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-a53686b3.js';
-import { r as randomIdGenerator } from './p-ffe5c0e8.js';
-import { l as logger } from './p-e3d2e899.js';
-import { d as detectClickOutside } from './p-430607cb.js';
-import { d as detectFocusOutside } from './p-ee33960b.js';
-import { _ as _t } from './p-903a27d9.js';
-import { d as defineCustomElement$4 } from './p-70fad0ea.js';
-import { d as defineCustomElement$3 } from './p-965c3fa4.js';
-import { d as defineCustomElement$2 } from './p-14119afa.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-B6ugjiwM.js';
+import { r as randomIdGenerator } from './p-BGaIliX6.js';
+import { l as logger } from './p-DdB9j8uV.js';
+import { d as detectClickOutside } from './p-CZrDWyoh.js';
+import { d as detectFocusOutside } from './p-C4cIvg7J.js';
+import { _ as _t } from './p-DsO1BTml.js';
+import { d as defineCustomElement$4 } from './p-DbsaTvkJ.js';
+import { d as defineCustomElement$3 } from './p-vPcKRawV.js';
+import { d as defineCustomElement$2 } from './p-C4ItWELQ.js';
 
-const formFilterCss = ".sc-digi-form-filter-h{--digi--form-filter--footer--background:var(--digi--color--background--secondary-accent);--digi--form-filter--scroll--max-height:18.75rem;--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--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--min-width:18.75rem;--digi--form-filter--dropdown--margin-top:var(--digi--gutter--small);--digi--form-filter--dropdown--z-index:999;--digi--form-filter--toggle-button-indicator--color--default:transparent;--digi--form-filter--toggle-button-indicator--color--active:var(--digi--color--marking--indication--primary);--digi--form-filter--toggle-button-indicator--width:0.625rem;--digi--form-filter--toggle-button-indicator--height:0.625rem;--digi--form-filter--toggle-button-indicator--margin-right:var(--digi--margin--small);--digi--form-filter--toggle-button-indicator--margin-left:calc(var(--digi--margin--smaller) * -1);--digi--form-filter--toggle-button--text--margin-right:var(--digi--margin--smaller);--digi--form-filter--toggle-icon--width:0.875rem;--digi--form-filter--toggle-icon--height:0.875rem;--digi--form-filter--legend--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--form-filter--legend--font-family:var(--digi--global--typography--font-family--default);--digi--form-filter--legend--font-size:var(--digi--typography--preamble--font-size--desktop)}.sc-digi-form-filter-h .digi-form-filter.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--default);--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height);position:relative}.sc-digi-form-filter-h .digi-form-filter--open.sc-digi-form-filter .digi-form-filter__toggle-icon.sc-digi-form-filter{transform:rotate(-180deg)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter{transition:var(--digi--form-filter--toggle-icon--transition)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter-s>[slot^=icon],.sc-digi-form-filter-h .digi-form-filter__toggle-icon .sc-digi-form-filter-s>[slot^=icon]{--digi--icon--width:var(--digi--form-filter--toggle-icon--width);--digi--icon--height:var(--digi--form-filter--toggle-icon--height)}.sc-digi-form-filter-h .digi-form-filter__legend.sc-digi-form-filter{font-weight:var(--digi--form-filter--legend--font-weight);font-family:var(--digi--form-filter--legend--font-family);font-size:var(--digi--form-filter--legend--font-size)}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{max-height:var(--SCROLL--MAX-HEIGHT);overflow-y:auto;padding:var(--digi--form-filter--scroll--padding);overflow-x:hidden}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height--large)}}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter fieldset.sc-digi-form-filter{border:none}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter legend.sc-digi-form-filter{width:100%;border-bottom:var(--digi--form-filter--legend__border-bottom);padding-bottom:0.25rem}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter .legend-hidden.sc-digi-form-filter{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-form-filter-h .digi-form-filter__footer.sc-digi-form-filter{display:flex;align-items:center;justify-content:center;background:var(--digi--form-filter--footer--background);padding:var(--digi--form-filter--scroll--padding)}.sc-digi-form-filter-h .digi-form-filter__reset-button.sc-digi-form-filter{display:inline-block;margin-left:var(--digi--form-filter--reset-button--margin-left)}.sc-digi-form-filter-h .digi-form-filter__dropdown.sc-digi-form-filter{min-width:var(--digi--form-filter--dropdown--min-width);position:absolute;z-index:var(--digi--form-filter--dropdown--z-index);background:var(--digi--form-filter--dropdown--background);border-radius:var(--digi--form-filter--dropdown--border-radius);box-shadow:var(--digi--form-filter--dropdown--box-shadow);overflow:hidden;margin-top:var(--digi--form-filter--dropdown--margin-top)}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__dropdown--right.sc-digi-form-filter{right:0}}.sc-digi-form-filter-h .digi-form-filter__dropdown--hidden.sc-digi-form-filter{display:none}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator.sc-digi-form-filter:before{content:\"\";width:var(--digi--form-filter--toggle-button-indicator--width);height:var(--digi--form-filter--toggle-button-indicator--height);background:var(--INDICATOR--BACKGROUND);display:inline-block;margin-right:var(--digi--form-filter--toggle-button-indicator--margin-right);border-radius:50% 50%;overflow:hidden;margin-left:var(--digi--form-filter--toggle-button-indicator--margin-left)}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator--active.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--active)}.sc-digi-form-filter-h .digi-form-filter__list.sc-digi-form-filter{margin:var(--digi--form-filter--list--margin);padding:var(--digi--form-filter--list--padding)}.sc-digi-form-filter-h .digi-form-filter__item.sc-digi-form-filter{display:block}.sc-digi-form-filter-h .digi-form-filter__toggle-button-text.sc-digi-form-filter{margin-right:var(--digi--form-filter--toggle-button--text--margin-right)}";
-const DigiFormFilterStyle0 = formFilterCss;
+const formFilterCss = () => `.sc-digi-form-filter-h{--digi--form-filter--footer--background:var(--digi--color--background--secondary-accent);--digi--form-filter--scroll--max-height:18.75rem;--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--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--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;--digi--form-filter--toggle-button-indicator--color--default:transparent;--digi--form-filter--toggle-button-indicator--color--active:var(--digi--color--marking--indication--primary);--digi--form-filter--toggle-button-indicator--width:0.625rem;--digi--form-filter--toggle-button-indicator--height:0.625rem;--digi--form-filter--toggle-button-indicator--margin-right:var(--digi--margin--small);--digi--form-filter--toggle-button-indicator--margin-left:calc(var(--digi--margin--smaller) * -1);--digi--form-filter--toggle-button--text--margin-right:var(--digi--margin--smaller);--digi--form-filter--toggle-icon--width:0.875rem;--digi--form-filter--toggle-icon--height:0.875rem;--digi--form-filter--legend--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--form-filter--legend--font-family:var(--digi--global--typography--font-family--default);--digi--form-filter--legend--font-size:var(--digi--typography--preamble--font-size--desktop)}.sc-digi-form-filter-h .digi-form-filter.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--default);--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height);position:relative}.sc-digi-form-filter-h .digi-form-filter--open.sc-digi-form-filter .digi-form-filter__toggle-icon.sc-digi-form-filter{transform:rotate(-180deg)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter{transition:var(--digi--form-filter--toggle-icon--transition)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter-s>[slot^=icon],.sc-digi-form-filter-h .digi-form-filter__toggle-icon .sc-digi-form-filter-s>[slot^=icon]{--digi--icon--width:var(--digi--form-filter--toggle-icon--width);--digi--icon--height:var(--digi--form-filter--toggle-icon--height)}.sc-digi-form-filter-h .digi-form-filter__legend.sc-digi-form-filter{font-weight:var(--digi--form-filter--legend--font-weight);font-family:var(--digi--form-filter--legend--font-family);font-size:var(--digi--form-filter--legend--font-size)}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{max-height:var(--SCROLL--MAX-HEIGHT);overflow-y:auto;padding:var(--digi--form-filter--scroll--padding);overflow-x:hidden}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height--large)}}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter fieldset.sc-digi-form-filter{border:none}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter legend.sc-digi-form-filter{width:100%;border-bottom:var(--digi--form-filter--legend__border-bottom);padding-bottom:0.25rem}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter .legend-hidden.sc-digi-form-filter{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-form-filter-h .digi-form-filter__footer.sc-digi-form-filter{display:flex;align-items:center;justify-content:center;background:var(--digi--form-filter--footer--background);padding:var(--digi--form-filter--scroll--padding)}.sc-digi-form-filter-h .digi-form-filter__reset-button.sc-digi-form-filter{display:inline-block;margin-left:var(--digi--form-filter--reset-button--margin-left)}.sc-digi-form-filter-h .digi-form-filter__dropdown.sc-digi-form-filter{min-width:var(--digi--form-filter--dropdown--min-width);position:absolute;z-index:var(--digi--form-filter--dropdown--z-index);background:var(--digi--form-filter--dropdown--background);border-radius:var(--digi--form-filter--dropdown--border-radius);box-shadow:var(--digi--form-filter--dropdown--box-shadow);overflow:hidden;margin-top:var(--digi--form-filter--dropdown--margin-top)}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__dropdown--right.sc-digi-form-filter{right:0}}.sc-digi-form-filter-h .digi-form-filter__dropdown--hidden.sc-digi-form-filter{display:none}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator.sc-digi-form-filter:before{content:"";width:var(--digi--form-filter--toggle-button-indicator--width);height:var(--digi--form-filter--toggle-button-indicator--height);background:var(--INDICATOR--BACKGROUND);display:inline-block;margin-right:var(--digi--form-filter--toggle-button-indicator--margin-right);border-radius:50% 50%;overflow:hidden;margin-left:var(--digi--form-filter--toggle-button-indicator--margin-left)}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator--active.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--active)}.sc-digi-form-filter-h .digi-form-filter__list.sc-digi-form-filter{margin:var(--digi--form-filter--list--margin);padding:var(--digi--form-filter--list--padding)}.sc-digi-form-filter-h .digi-form-filter__item.sc-digi-form-filter{display:block}.sc-digi-form-filter-h .digi-form-filter__toggle-button-text.sc-digi-form-filter{margin-right:var(--digi--form-filter--toggle-button--text--margin-right)}`;
 
 const FormFilter = /*@__PURE__*/ proxyCustomElement(class FormFilter extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.afBlurFilter = createEvent(this, "afBlurFilter", 7);
         this.afSubmitFilter = createEvent(this, "afSubmitFilter", 7);
         this.afCloseFilter = createEvent(this, "afCloseFilter", 7);
         this.afResetFilter = createEvent(this, "afResetFilter", 7);
         this.afChangeFilter = createEvent(this, "afChangeFilter", 7);
-        this.refs = {};
         this.listItems = [];
         this.checkedItems = [];
         this.tabItems = [];
         this.isActive = false;
         this.activeListItemIndex = 0;
+        this.refs = {};
+        /**
+         * Prefixet för alla komponentens olika interna 'id'-attribut på dropdowns, filterlistor etc. Ex. 'my-cool-id' genererar 'my-cool-id-filter-list', 'my-cool-id-dropdown-menu' och så vidare. Ges inget värde så genereras ett slumpmässigt.
+         * @en Prefix for all id attributes inside the component. Example: 'my-cool-id' generates 'my-cool-id-filter-list', 'my-cool-id-dropdown-menu' and so on. Defaults to random string.
+         */
         this.afId = randomIdGenerator('digi-form-filter');
-        this.afFilterButtonText = undefined;
-        this.afSubmitButtonText = undefined;
-        this.afSubmitButtonTextAriaLabel = undefined;
+        /**
+         * Texten i rensaknappen
+         * @en Set the reset button text
+         */
         this.afResetButtonText = _t.clear;
-        this.afResetButtonTextAriaLabel = undefined;
+        /**
+         * Döljer rensaknappen när värdet sätts till true
+         * @en Hides the reset button when set to true
+         */
         this.afHideResetButton = false;
-        this.afAlignRight = undefined;
-        this.afName = undefined;
-        this.afFilterButtonAriaLabel = undefined;
-        this.afFilterButtonAriaDescribedby = undefined;
-        this.afAutofocus = undefined;
-        this.afListItems = undefined;
+        /**
+         * Definiera vilka kryssrutor som ska vara ikryssade, förväntar sig filtrets `id`
+         * @en Defines which checkboxes are checked, expects the `id` of the filter
+         */
         this.afCheckItems = [];
     }
     syncCheckItems() {
@@ -237,12 +244,18 @@ const FormFilter = /*@__PURE__*/ proxyCustomElement(class FormFilter extends H {
     }
     get hostElement() { return this; }
     static get watchers() { return {
-        "afCheckItems": ["syncCheckItems"],
-        "afListItems": ["handleListItems"],
-        "listItems": ["setupAccessibility"]
+        "afCheckItems": [{
+                "syncCheckItems": 0
+            }],
+        "afListItems": [{
+                "handleListItems": 0
+            }],
+        "listItems": [{
+                "setupAccessibility": 0
+            }]
     }; }
-    static get style() { return DigiFormFilterStyle0; }
-}, [6, "digi-form-filter", {
+    static get style() { return formFilterCss(); }
+}, [262, "digi-form-filter", {
         "afId": [1, "af-id"],
         "afFilterButtonText": [1, "af-filter-button-text"],
         "afSubmitButtonText": [1, "af-submit-button-text"],
@@ -263,9 +276,15 @@ const FormFilter = /*@__PURE__*/ proxyCustomElement(class FormFilter extends H {
         "isActive": [32],
         "activeListItemIndex": [32]
     }, [[8, "click", "clickHandler"], [4, "focusin", "focusoutHandler"], [0, "keydown", "handleKey"]], {
-        "afCheckItems": ["syncCheckItems"],
-        "afListItems": ["handleListItems"],
-        "listItems": ["setupAccessibility"]
+        "afCheckItems": [{
+                "syncCheckItems": 0
+            }],
+        "afListItems": [{
+                "handleListItems": 0
+            }],
+        "listItems": [{
+                "setupAccessibility": 0
+            }]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -274,22 +293,22 @@ function defineCustomElement$1() {
     const components = ["digi-form-filter", "digi-button", "digi-form-checkbox", "digi-icon-chevron-down"];
     components.forEach(tagName => { switch (tagName) {
         case "digi-form-filter":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FormFilter);
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), FormFilter);
             }
             break;
         case "digi-button":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$4();
             }
             break;
         case "digi-form-checkbox":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$3();
             }
             break;
         case "digi-icon-chevron-down":
-            if (!customElements.get(tagName)) {
+            if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$2();
             }
             break;