@designsystem-se/af 35.2.1-beta.1 → 35.3.1

package/dist/esm/digi-form-file-upload.entry.js

@@ -1,8 +1,9 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-bfea2cc5.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-148a7577.js';
 import { _ as _t } from './text-26e02c8d.js';
 import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel, c as FormValidationMessageVariation } from './form-validation-message-variation.enum-f7835fc5.js';
+import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel } from './form-file-upload-variation.enum-9c49ec5e.js';
 import { U as UtilBreakpointObserverBreakpoints } from './util-breakpoint-observer-breakpoints.enum-6d004731.js';
+import { F as FormValidationMessageVariation } from './form-validation-message-variation.enum-bcef8a9d.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;
@@ -488,7 +489,7 @@ const FormFileUpload = class {
     }
     renderPDFThumbnail(file) {
         if (this.afShowThumbnail) {
-            return (h("span", { class: `${this.afShowThumbnail ? 'digi-form-file-upload__item-pdf-preview-bis' : null}`, "aria-label": file.name }, h("svg", { style: { scale: '1' }, width: "23.76", height: "32", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M22.888 6.124 17.696.88A2.955 2.955 0 0 0 15.6 0H2.97C1.33.006 0 1.35 0 3.006V29C0 30.657 1.33 32 2.97 32h17.82c1.64 0 2.97-1.343 2.97-3V8.249a3.03 3.03 0 0 0-.872-2.124Zm-2.34 1.88H15.84V3.25l4.709 4.756ZM2.97 29.002V3.006h9.9v6.498c0 .831.662 1.5 1.485 1.5h6.435v17.997H2.97Zm15.481-8.98c-.755-.75-2.908-.544-3.985-.406-1.064-.656-1.775-1.562-2.277-2.893.242-1.006.625-2.537.335-3.5-.26-1.637-2.34-1.474-2.636-.368-.273 1.006-.025 2.406.433 4.193-.619 1.493-1.54 3.499-2.19 4.649-1.238.643-2.909 1.637-3.156 2.887-.204.987 1.609 3.449 4.708-1.95 1.386-.462 2.896-1.031 4.233-1.256 1.17.637 2.537 1.062 3.452 1.062 1.578 0 1.733-1.762 1.083-2.418ZM6.194 24.883c.315-.856 1.516-1.844 1.88-2.187-1.175 1.893-1.88 2.23-1.88 2.187Zm5.049-11.91c.458 0 .414 2.005.111 2.549-.272-.869-.266-2.55-.111-2.55Zm-1.51 8.535c.6-1.056 1.114-2.312 1.528-3.418.514.944 1.17 1.7 1.863 2.219-1.287.268-2.407.818-3.391 1.2Zm8.143-.312s-.31.375-2.308-.488c2.172-.162 2.53.338 2.308.488Z", fill: "#1616B2", "fill-rule": "evenodd" }))));
+            return (h("span", { class: `${this.afShowThumbnail ? 'digi-form-file-upload__item-pdf-preview-bis' : null}`, "aria-label": file.name }, h("svg", { style: { scale: '1' }, width: "23.76", height: "32", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M22.888 6.124 17.696.88A2.955 2.955 0 0 0 15.6 0H2.97C1.33.006 0 1.35 0 3.006V29C0 30.657 1.33 32 2.97 32h17.82c1.64 0 2.97-1.343 2.97-3V8.249a3.03 3.03 0 0 0-.872-2.124Zm-2.34 1.88H15.84V3.25l4.709 4.756ZM2.97 29.002V3.006h9.9v6.498c0 .831.662 1.5 1.485 1.5h6.435v17.997H2.97Zm15.481-8.98c-.755-.75-2.908-.544-3.985-.406-1.064-.656-1.775-1.562-2.277-2.893.242-1.006.625-2.537.335-3.5-.26-1.637-2.34-1.474-2.636-.368-.273 1.006-.025 2.406.433 4.193-.619 1.493-1.54 3.499-2.19 4.649-1.238.643-2.909 1.637-3.156 2.887-.204.987 1.609 3.449 4.708-1.95 1.386-.462 2.896-1.031 4.233-1.256 1.17.637 2.537 1.062 3.452 1.062 1.578 0 1.733-1.762 1.083-2.418ZM6.194 24.883c.315-.856 1.516-1.844 1.88-2.187-1.175 1.893-1.88 2.23-1.88 2.187Zm5.049-11.91c.458 0 .414 2.005.111 2.549-.272-.869-.266-2.55-.111-2.55Zm-1.51 8.535c.6-1.056 1.114-2.312 1.528-3.418.514.944 1.17 1.7 1.863 2.219-1.287.268-2.407.818-3.391 1.2Zm8.143-.312s-.31.375-2.308-.488c2.172-.162 2.53.338 2.308.488Z", fill: "var(--digi--color--icon--cta)", "fill-rule": "evenodd" }))));
         }
         return this.renderCheckmark();
     }
@@ -544,22 +545,22 @@ const FormFileUpload = class {
             } }, this.renderFiles())));
     }
     render() {
-        return (h(Fragment, { key: '029c26599c9c80723c3ea8272f6fbd89e6fbcadf' }, h("digi-util-breakpoint-observer", { key: '1c68ba6b251ef4472c44720667675394100e7d16', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '081c0f618a8335c27323cb9f44f9dd8d04d08ca2', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: '2784f4e91f7a26fa19c29cc7cb060c0b97ea3fd0', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: '557351483aa421876dea979d9d68a2195a45bf22', class: {
+        return (h(Fragment, { key: '9d6a24f2f19c019f7407af204ab5dc3e66079724' }, h("digi-util-breakpoint-observer", { key: 'a748998bb71bd4707ac78d1a95e25b890f946dd8', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '41f8cbc00e194d1ddb05ceca5efa448333f2ad43', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: '890b3bc2dd89d70d1313bacd2d02fe75e3be445d', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'bda9a9122d9eac9572d278bfd40930b96a55e66a', 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: '252d8551475a8efeafcb5422e3bc9a39ab766ee0', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'e04056de0ca60a999f38e7fc2ee3dddb14f3352e', class: "digi-form-file-upload__text-area" }, h("button", { key: '1068e450b48ab821622eb193016c330edb05fc67', type: "button", ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'dcdf9b2933e80cdc28da4f687149e3342654336b', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'a3dcac52d26c381417b578555e5355e7654ea709', class: "digi-form-file-upload__text-area" }, h("button", { key: '77752f082b7581eafcfeef04cc2cc6faed3ff7ef', type: "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: 'a439e424f83e4ea197215a3812459882c322678b', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, h("digi-icon-paperclip", { key: '62a4abf7e10740a3a6ff049a4a8e91c48bdb94ac', "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: 'd194bb6becbe173f833634a4484a4542c5dfabb1', ref: (el) => {
+            : _t.form.file_choose), h("input", { key: '39a5e7b5a1998c3e1e82d74ccf8a02edeea0fd8b', 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: 'b317ecd9f780111c20a529cd7d203ef5a765bb2c' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: '85f16b73106ab1221a98591d01ee0157081d3778', class: "visually-hidden", role: "alert", "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: '42447d4024cbd6b4abfbff0d9a51b7dd7538c167' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: '8240114263559f6a7da5c42e94d5d6cb8f07921f', class: "visually-hidden", role: "alert", "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (h("div", { key: 'eff456a01f0c09f4f6c1a80c76f3537e487d3fb2', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: '60c80571d84300d4a9151f142beb06194af9ead7', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/digi-form-filter.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bfea2cc5.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-148a7577.js';
 import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
 import { l as logger } from './logger.util-ede3c48a.js';
 import { d as detectClickOutside } from './detectClickOutside.util-72594957.js';
@@ -213,24 +213,24 @@ const FormFilter = class {
         });
     }
     render() {
-        return (h(Host, { key: '19c6d5872aab85c626c5ea241312a03a8541bfe7' }, h("div", { key: 'b103033c1b4abd2d7473e708de6736d3f81bd217', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
+        return (h(Host, { key: '646d9b749fe3c2570287a3dbd5e64c77d87eecd8' }, h("div", { key: '9a673a0a8adbeb379c406959e384601b48b21f7f', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
                 'digi-form-filter': true,
                 'digi-form-filter--open': this.isActive
-            } }, h("digi-button", { key: '37d6ba0916d8a5a602e7c5f9bad823c9fa2df385', id: `${this.afId}-toggle-button`, afInputRef: (el) => (this.refs.toggle = el), class: "digi-form-filter__toggle-button", onAfOnClick: () => this.handleToggle(), "af-aria-haspopup": "true", "af-variation": "secondary", "af-aria-label": this.afFilterButtonAriaLabel, "af-aria-labelledby": this.afFilterButtonAriaDescribedby, "af-aria-controls": `${this.afId}-dropdown-menu`, "af-aria-expanded": this.isActive, "af-autofocus": this.afAutofocus ? this.afAutofocus : null }, h("i", { key: '5af4806cc67c4bd3a66e419abd293e9f6fd9824c', class: {
+            } }, h("digi-button", { key: '6085eeff90de431282ed24927f511ec0b8a6c6f4', id: `${this.afId}-toggle-button`, afInputRef: (el) => (this.refs.toggle = el), class: "digi-form-filter__toggle-button", onAfOnClick: () => this.handleToggle(), "af-aria-haspopup": "true", "af-variation": "secondary", "af-aria-label": this.afFilterButtonAriaLabel, "af-aria-labelledby": this.afFilterButtonAriaDescribedby, "af-aria-controls": `${this.afId}-dropdown-menu`, "af-aria-expanded": this.isActive, "af-autofocus": this.afAutofocus ? this.afAutofocus : null }, h("i", { key: 'eaf984f868ae861076315cfa146ba72d718cab00', class: {
                 'digi-form-filter__toggle-button-indicator': true,
                 'digi-form-filter__toggle-button-indicator--active': this.checkedItems.length > 0
-            } }), h("span", { key: '1a666627a9de2b671ecaf5008121faa589a2db2b', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), h("digi-icon-chevron-down", { key: '2973005a25e6f51e0e8fb9ebe9eef1a46b73f478', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), h("div", { key: 'ff4a9946138e38c1a9c394b63c471e78c45c012f', id: `${this.afId}-dropdown-menu`, ref: (el) => (this.refs.menu = el), class: {
+            } }), h("span", { key: 'acec48c3455aec603fe519ee065a221dceeab68c', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), h("digi-icon-chevron-down", { key: 'a38d54d4904e705d4478cdef2be278deff90412e', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), h("div", { key: '2730936fa2ec6a547695f0244724bfbf27b657e4', id: `${this.afId}-dropdown-menu`, ref: (el) => (this.refs.menu = el), class: {
                 'digi-form-filter__dropdown': true,
                 'digi-form-filter__dropdown--right': this.afAlignRight,
                 'digi-form-filter__dropdown--hidden': !this.isActive
-            } }, h("div", { key: '896bb5cc2d47758576842fcf240fa1f9e59c600f', class: "digi-form-filter__scroll" }, h("fieldset", { key: 'f4261cb2917d29592136e32b53baecc642f2c30a' }, this.afName ? (h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), h("ul", { key: 'd7d7d4b110d6e6640a844e3641a4db8998c0dad8', class: "digi-form-filter__list", "aria-label": this.afFilterButtonAriaLabel, id: `${this.afId}-filter-list` }, this.listItems.map((item) => {
+            } }, h("div", { key: '7c09f7b7910b32c6c8d2e7695ea1715db6cdfa1a', class: "digi-form-filter__scroll" }, h("fieldset", { key: '58ab965e30a6f1eb2f3c3aff80108722c5eeb430' }, this.afName ? (h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), h("ul", { key: 'a201b73af93dc5ccd71140b7b936417092019197', class: "digi-form-filter__list", "aria-label": this.afFilterButtonAriaLabel, id: `${this.afId}-filter-list` }, this.listItems.map((item) => {
             const isChecked = this.checkedItems.includes(item.id);
             const isTabbable = this.tabItems.includes(item.id);
             return (h("li", { class: "digi-form-filter__item", key: item.id }, h("digi-form-checkbox", { afInputRef: (ref) => (this.refs.filter = Object.assign(Object.assign({}, this.refs.filter), { [item.id]: ref })), afTabIndex: isTabbable ? 0 : -1, afLabel: item.label, afValue: item.id, afChecked: isChecked, onClick: (e) => {
                     e.preventDefault();
                     this.handleCheckItem(item);
                 } })));
-        })))), h("div", { key: 'cc7ac2522788b2f94430fd4a64366694fa67296f', class: "digi-form-filter__footer" }, h("digi-button", { key: 'd2aaacf7b5834d629a3af1d4dea1458795857b48', class: "digi-form-filter__submit-button", "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => this.handleSubmit(), afInputRef: (ref) => (this.refs.submit = ref) }, this.afSubmitButtonText), !this.afHideResetButton && (h("digi-button", { key: '240dd00d306d89c8e3357b490e2a63acff73b804', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.handleReset(), class: "digi-form-filter__reset-button", afInputRef: (ref) => (this.refs.reset = ref) }, this.afResetButtonText))))), h("div", { key: '22ae00caa559c9d0736b9ee88a4438241e0bfc97', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, h("slot", { key: 'c57fe2071e9a2705662ba181422b6dfc74c5a2cc' }))));
+        })))), h("div", { key: 'ef8cfb3de86adc3efdc319e494a27916bdfb4302', class: "digi-form-filter__footer" }, h("digi-button", { key: '0adac0061143ad1057f5927b853b619e40656de0', class: "digi-form-filter__submit-button", "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => this.handleSubmit(), afInputRef: (ref) => (this.refs.submit = ref) }, this.afSubmitButtonText), !this.afHideResetButton && (h("digi-button", { key: 'e9afa7196ac9bdf58da4545fc8c8f5559af9c690', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.handleReset(), class: "digi-form-filter__reset-button", afInputRef: (ref) => (this.refs.reset = ref) }, this.afResetButtonText))))), h("div", { key: '4f19a18f80d1088a618b96e8419801e62d38f98c', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, h("slot", { key: 'b5332c6c15fc4033f4672500807bbce900eaef55' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/digi-form-input-search.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-bfea2cc5.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-148a7577.js';
 import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { b as FormInputType, a as FormInputButtonVariation, F as FormInputSearchVariation, B as ButtonType } from './form-input-type.enum-a6bba983.js';
+import { F as FormInputSearchVariation, B as ButtonType } from './form-input-search-variation.enum-6d8dc10a.js';
+import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-3da3db27.js';
 import { d as detectClickOutside } from './detectClickOutside.util-72594957.js';
 import { d as detectFocusOutside } from './detectFocusOutside.util-a8676bee.js';
 import './detectClosest.util-58a7504f.js';
@@ -122,10 +123,10 @@ const FormInputSearch = class {
         };
     }
     render() {
-        return (h("div", { key: '0d571ec27d3c657aef091fbe0faa7b5d50a9aab3', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: '8434e42f85ce1a641d663fc8890888a8c3b234a1', class: {
+        return (h("div", { key: 'e4c602d4ad9ae6a543dd5168abc02d29bedfc8a8', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, h("digi-form-input", { key: '0d2de6133e17ada9cc621ac3cb7f6e75f4842b73', class: {
                 'digi-form-input-search__input': true,
                 'digi-form-input-search__input--no-button': this.afHideButton
-            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: '899a5bb61c8a9dd8d92fa831f9f436b29a43e3aa', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: '80a0757d3c732121adff725a190a49ab9aa6050e', slot: "icon" }), this.afButtonText)))));
+            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (h("digi-button", { key: '5a744b0ab75651a61731ce504ebf5426d546b18a', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, h("digi-icon-search", { key: 'b68f9b8f7d4a648f609d70620406f484894f8592', slot: "icon" }), this.afButtonText)))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/digi-form-input.entry.js

@@ -0,0 +1,173 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-148a7577.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
+import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-3da3db27.js';
+import { F as FormInputMode, b as FormInputVariation, a as FormInputValidation } from './form-input-variation.enum-64d9450f.js';
+
+const formInputCss = ".sc-digi-form-input-h{--digi--form-input--height--small:var(--digi--input-height--small);--digi--form-input--height--medium:var(--digi--input-height--medium);--digi--form-input--height--large:var(--digi--input-height--large);--digi--form-input--border-radius:var(--digi--border-radius--input);--digi--form-input--padding:0 var(--digi--gutter--medium);--digi--form-input--background--empty:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-input--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-input--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-input--border--neutral:var(--digi--border-width--input-regular) solid;--digi--form-input--border--error:var(--digi--border-width--input-validation) solid;--digi--form-input--border--success:var(--digi--border-width--input-validation) solid;--digi--form-input--border--warning:var(--digi--border-width--input-validation) solid;--digi--form-input--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-input--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-input--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-input--border-color--error:var(--digi--color--border--interactive--validation--error)}.sc-digi-form-input-h .digi-form-input.sc-digi-form-input{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-input-h .digi-form-input--small.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--small)}.sc-digi-form-input-h .digi-form-input--medium.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--medium)}.sc-digi-form-input-h .digi-form-input--large.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--large)}.sc-digi-form-input-h .digi-form-input--neutral.sc-digi-form-input{--BORDER:var(--digi--form-input--border--neutral);--BORDER-COLOR:var(--digi--form-input--border-color--neutral);--BACKGROUND:var(--digi--form-input--background--neutral)}.sc-digi-form-input-h .digi-form-input--empty.sc-digi-form-input:not(:focus-within){--BACKGROUND:var(--digi--form-input--background--empty)}.sc-digi-form-input-h .digi-form-input--success.sc-digi-form-input{--BORDER:var(--digi--form-input--border--success);--BORDER-COLOR:var(--digi--form-input--border-color--success);--BACKGROUND:var(--digi--form-input--background--success)}.sc-digi-form-input-h .digi-form-input--warning.sc-digi-form-input{--BORDER:var(--digi--form-input--border--warning);--BORDER-COLOR:var(--digi--form-input--border-color--warning);--BACKGROUND:var(--digi--form-input--background--warning)}.sc-digi-form-input-h .digi-form-input--error.sc-digi-form-input{--BORDER:var(--digi--form-input--border--error);--BORDER-COLOR:var(--digi--form-input--border-color--error);--BACKGROUND:var(--digi--form-input--background--error)}.digi-form-input__input-wrapper.sc-digi-form-input{position:relative;display:flex}.digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{--MIN-HEIGHT:100%}.digi-form-input--button-variation-primary .digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{border-start-start-radius:0;border-end-start-radius:0}.digi-form-input--button-variation-secondary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input-wrapper.sc-digi-form-input{gap:var(--digi--gutter--medium);flex-wrap:wrap}.digi-form-input__input.sc-digi-form-input{flex:1;height:var(--HEIGHT);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);padding:var(--digi--form-input--padding);color:var(--digi--color--text--primary);background:var(--BACKGROUND);border:var(--BORDER);border-color:var(--BORDER-COLOR);border-radius:var(--digi--form-input--border-radius);box-sizing:border-box}.digi-form-input__input.sc-digi-form-input:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-input--button-variation-primary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input.sc-digi-form-input{border-end-end-radius:0;border-start-end-radius:0}";
+const DigiFormInputStyle0 = formInputCss;
+
+const FormInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afOnChange = createEvent(this, "afOnChange", 7);
+        this.afOnBlur = createEvent(this, "afOnBlur", 7);
+        this.afOnKeyup = createEvent(this, "afOnKeyup", 7);
+        this.afOnFocus = createEvent(this, "afOnFocus", 7);
+        this.afOnFocusout = createEvent(this, "afOnFocusout", 7);
+        this.afOnInput = createEvent(this, "afOnInput", 7);
+        this.afOnDirty = createEvent(this, "afOnDirty", 7);
+        this.afOnTouched = createEvent(this, "afOnTouched", 7);
+        this.afOnReady = createEvent(this, "afOnReady", 3);
+        this.hasActiveValidationMessage = false;
+        this.hasButton = undefined;
+        this.dirty = false;
+        this.touched = false;
+        this.afLabel = undefined;
+        this.afLabelDescription = undefined;
+        this.afType = FormInputType.TEXT;
+        this.afInputmode = FormInputMode.DEFAULT;
+        this.afButtonVariation = FormInputButtonVariation.PRIMARY;
+        this.afAutofocus = undefined;
+        this.afVariation = FormInputVariation.MEDIUM;
+        this.afName = undefined;
+        this.afId = randomIdGenerator('digi-form-input');
+        this.afMaxlength = undefined;
+        this.afMinlength = undefined;
+        this.afRequired = undefined;
+        this.afRequiredText = undefined;
+        this.afAnnounceIfOptional = false;
+        this.afAnnounceIfOptionalText = undefined;
+        this.value = undefined;
+        this.afValue = undefined;
+        this.afValidation = FormInputValidation.NEUTRAL;
+        this.afValidationText = undefined;
+        this.afRole = undefined;
+        this.afAutocomplete = undefined;
+        this.afMin = undefined;
+        this.afMax = undefined;
+        this.afList = undefined;
+        this.afStep = undefined;
+        this.afDirname = undefined;
+        this.afAriaAutocomplete = undefined;
+        this.afAriaActivedescendant = undefined;
+        this.afAriaLabelledby = undefined;
+        this.afAriaDescribedby = undefined;
+        this.afAriaControls = undefined;
+        this.afTrimValue = undefined;
+    }
+    onValueChanged(value) {
+        this.afValue = value;
+    }
+    onAfValueChanged(value) {
+        this.value = value;
+    }
+    afValidationTextWatch() {
+        this.setActiveValidationMessage();
+    }
+    /**
+     * Hämtar en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
+     * @en Returns a reference to the input element. Handy for setting focus programmatically.
+     */
+    async afMGetFormControlElement() {
+        return this._input;
+    }
+    componentWillLoad() {
+        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
+        this.setActiveValidationMessage();
+        this.setHasButton();
+    }
+    componentWillUpdate() {
+        this.setHasButton();
+    }
+    componentDidLoad() {
+        this.afOnReady.emit();
+    }
+    setActiveValidationMessage() {
+        this.hasActiveValidationMessage = !!this.afValidationText;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-input--small': this.afVariation === FormInputVariation.SMALL,
+            'digi-form-input--medium': this.afVariation === FormInputVariation.MEDIUM,
+            'digi-form-input--large': this.afVariation === FormInputVariation.LARGE,
+            'digi-form-input--neutral': this.afValidation === FormInputValidation.NEUTRAL,
+            'digi-form-input--success': this.afValidation === FormInputValidation.SUCCESS,
+            'digi-form-input--error': this.afValidation === FormInputValidation.ERROR,
+            'digi-form-input--warning': this.afValidation === FormInputValidation.WARNING,
+            [`digi-form-input--button-variation-${this.afButtonVariation}`]: !!this.afButtonVariation,
+            [`digi-form-input--has-button-${this.hasButton}`]: true,
+            'digi-form-input--empty': !this.afValue &&
+                (!this.afValidation ||
+                    this.afValidation === FormInputValidation.NEUTRAL)
+        };
+    }
+    blurHandler(e) {
+        const trimableTypes = [
+            FormInputType.TEXT,
+            FormInputType.EMAIL,
+            FormInputType.SEARCH,
+            FormInputType.TEL,
+            FormInputType.URL
+        ];
+        const shouldTrim = this.afTrimValue && trimableTypes.includes(this.afType);
+        if (shouldTrim && typeof e.target.value === 'string') {
+            const trimmedValue = e.target.value.trim();
+            if (trimmedValue !== e.target.value) {
+                this.afValue = this.value = trimmedValue;
+                if (this._input) {
+                    this._input.value = trimmedValue;
+                }
+                // Emittar afOnInput så Angulars value accessor får det trimmade värdet
+                this.afOnInput.emit(e);
+            }
+        }
+        if (!this.touched) {
+            this.afOnTouched.emit(e);
+            this.touched = true;
+        }
+        this.afOnBlur.emit(e);
+    }
+    changeHandler(e) {
+        this.setActiveValidationMessage();
+        this.afOnChange.emit(e);
+    }
+    focusHandler(e) {
+        this.afOnFocus.emit(e);
+    }
+    focusoutHandler(e) {
+        this.afOnFocusout.emit(e);
+    }
+    keyupHandler(e) {
+        this.afOnKeyup.emit(e);
+    }
+    inputHandler(e) {
+        this.afValue = this.value =
+            this.afType === FormInputType.NUMBER
+                ? parseFloat(e.target.value)
+                : e.target.value;
+        if (!this.dirty) {
+            this.afOnDirty.emit(e);
+            this.dirty = true;
+        }
+        this.setActiveValidationMessage();
+        this.afOnInput.emit(e);
+    }
+    setHasButton() {
+        this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
+    }
+    render() {
+        return (h("div", { key: 'd0e85adc1807f2f6f2394e1a12b782777e6aa89c', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, h("digi-form-label", { key: '88b48495e153480f9bda8c01c7cf155fe3e9fbef', 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: '39059177675274d24d2b65a0860738391d4c3f03', class: "digi-form-input__input-wrapper" }, h("input", Object.assign({ key: '36d316651f066e47755d2e95473b411d2afee06a', 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, "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: '2617f968ed106137599810138ca7f1ee2eef3b12', name: "button" })), h("div", { key: '646bea838a14ff6e661baf43b2c245a216f2d0b8', class: "digi-form-input__footer" }, h("div", { key: '4af424df92bd97281609977dd98d957337258c2a', class: "digi-form-input__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormInputValidation.NEUTRAL && (h("digi-form-validation-message", { key: '6ea6c6e76718f096371f43e9e3b2b7cc940a7093', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["onValueChanged"],
+        "afValue": ["onAfValueChanged"],
+        "afValidationText": ["afValidationTextWatch"]
+    }; }
+};
+FormInput.style = DigiFormInputStyle0;
+
+export { FormInput as digi_form_input };

package/dist/esm/digi-form-label_5.entry.js

@@ -0,0 +1,167 @@
+import { r as registerInstance, h, g as getElement } from './index-148a7577.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
+import { l as logger } from './logger.util-ede3c48a.js';
+import { _ as _t } from './text-26e02c8d.js';
+import { F as FormValidationMessageVariation } from './form-validation-message-variation.enum-bcef8a9d.js';
+
+const formLabelCss = ".sc-digi-form-label-h .digi-form-label.sc-digi-form-label{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);color:var(--digi--color--text--primary);display:flex;flex-direction:column}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label{font-weight:var(--digi--typography--label--font-weight--desktop)}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label,.sc-digi-form-label-h .digi-form-label__label--description.sc-digi-form-label{line-height:var(--digi--typography--label--line-height--desktop);cursor:pointer;display:block}.sc-digi-form-label-h .digi-form-label__label-group.sc-digi-form-label{display:inline-flex;align-items:center;gap:var(--digi--gutter--icon)}.sc-digi-form-label-h .digi-form-label__description.sc-digi-form-label{max-width:var(--digi--paragraph-width--medium);line-height:var(--digi--typography--label-description--line-height--desktop);font-size:var(--digi--typography--label-description--font-size--desktop)}";
+const DigiFormLabelStyle0 = formLabelCss;
+
+const FormLabel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.labelText = undefined;
+        this.hasActionSlot = undefined;
+        this.afLabel = undefined;
+        this.afId = randomIdGenerator('digi-form-label');
+        this.afFor = undefined;
+        this.afDescription = undefined;
+        this.afRequired = undefined;
+        this.afAnnounceIfOptional = false;
+        this.afRequiredText = _t.required.toLowerCase();
+        this.afAnnounceIfOptionalText = _t.optional.toLowerCase();
+    }
+    componentWillLoad() {
+        this.setLabelText();
+        this.validateFor();
+        this.handleSlotVisibility();
+    }
+    validateFor() {
+        if (this.afFor == null) {
+            logger.warn(`digi-form-label must have a for attribute. Please add a for attribute using af-for`, this.hostElement);
+        }
+    }
+    setLabelText() {
+        this.labelText = `${this.afLabel} ${this.requiredText}`;
+        if (!this.afLabel) {
+            logger.warn(`digi-form-label must have a label. Please add a label using af-label`, this.hostElement);
+        }
+    }
+    handleSlotVisibility() {
+        this.hasActionSlot = !!this.hostElement.querySelector('[slot="actions"]');
+    }
+    get requiredText() {
+        if (this.afRequired && !this.afAnnounceIfOptional) {
+            return this.afRequiredText ? ` (${this.afRequiredText})` : '';
+        }
+        else if (!this.afRequired && this.afAnnounceIfOptional) {
+            return this.afAnnounceIfOptionalText
+                ? ` (${this.afAnnounceIfOptionalText})`
+                : '';
+        }
+        else {
+            return '';
+        }
+    }
+    render() {
+        return (h("div", { key: '8f855dd566d5e00e8d6a89e294182efb21b7ed51', class: "digi-form-label" }, h("div", { key: 'eb1a357c89c6ffdd262913a57daeb4b4ceb068f9', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '3a52faadc25dbea8cf5030ec74e78bfc4fc0b9b5', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: '7ff3fbf1d49cfe5951232ffb55b2a8ab91662d2d', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: 'be5e46615b0828367970d5d5ee0ac1b8b2abec12', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: 'aa5d21eaeba3127cea1b0c29dfa7283f20f2b041', class: "digi-form-label__actions" }, h("slot", { key: '5f8aeffc53b0ee98aa6c14134ebedc4c9ea242b9', name: "actions" }))))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "afFor": ["validateFor"],
+        "afLabel": ["setLabelText"],
+        "afRequired": ["setLabelText"],
+        "afAnnounceIfOptional": ["setLabelText"]
+    }; }
+};
+FormLabel.style = DigiFormLabelStyle0;
+
+const formValidationMessageCss = ".sc-digi-form-validation-message-h{--digi--form-validation-message--icon-color--success:var(--digi--color--icon--validation--success);--digi--form-validation-message--icon-color--warning:var(--digi--color--icon--validation--warning);--digi--form-validation-message--icon-color--error:var(--digi--color--icon--validation--error)}.sc-digi-form-validation-message-h .digi-form-validation-message.sc-digi-form-validation-message{display:flex;flex-wrap:wrap;align-items:center}.sc-digi-form-validation-message-h .digi-form-validation-message--success.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--success)}.sc-digi-form-validation-message-h .digi-form-validation-message--warning.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--warning)}.sc-digi-form-validation-message-h .digi-form-validation-message--error.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--error)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message{color:var(--ICON-COLOR);margin-inline-end:var(--digi--gutter--icon)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message>*.sc-digi-form-validation-message{--digi--icon--width:1.25em;--digi--icon--height:1.25em;--digi--icon--color:var(--ICON-COLOR);display:flex}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message .warning.sc-digi-form-validation-message{top:3px;position:relative}.sc-digi-form-validation-message-h .digi-form-validation-message__text.sc-digi-form-validation-message{flex:1;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--tag--font-size--desktop);color:var(--digi--color--text--primary)}";
+const DigiFormValidationMessageStyle0 = formValidationMessageCss;
+
+const FormValidationMessage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afVariation = FormValidationMessageVariation.SUCCESS;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-validation-message--success': this.afVariation === FormValidationMessageVariation.SUCCESS,
+            'digi-form-validation-message--error': this.afVariation === FormValidationMessageVariation.ERROR,
+            'digi-form-validation-message--warning': this.afVariation === FormValidationMessageVariation.WARNING
+        };
+    }
+    get icon() {
+        switch (this.afVariation) {
+            case FormValidationMessageVariation.SUCCESS:
+                return h("digi-icon-validation-success", null);
+            case FormValidationMessageVariation.ERROR:
+                return h("digi-icon-validation-error", null);
+            case FormValidationMessageVariation.WARNING:
+                return h("digi-icon-validation-warning", { class: "warning" });
+        }
+    }
+    render() {
+        return (h("div", { key: '1660f54f79665b4ff25d961a2cce8afa445347c9', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, h("div", { key: '077ab407a8b939ba9799f9378ae1bf5256623b0a', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), h("span", { key: '2d5b27ca89af093f5ef02ac4c5d889630891556f', class: "digi-form-validation-message__text" }, h("slot", { key: 'd30cc6c30ef04cf3362c37ca94ea83eb88dd436e' }))));
+    }
+    get hostElement() { return getElement(this); }
+};
+FormValidationMessage.style = DigiFormValidationMessageStyle0;
+
+const iconValidationErrorCss = ".sc-digi-icon-validation-error-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-error-h svg.sc-digi-icon-validation-error{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconValidationErrorStyle0 = iconValidationErrorCss;
+
+const IconValidationError = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator('icontitle');
+    }
+    render() {
+        return (h("svg", { key: 'ce18433c0400295efa2834b5ff92daeda1b2f3f8', class: "digi-icon-validation-error", width: "48", height: "48", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined }, this.afTitle && h("title", { key: 'b2d54f52d7163e8b7d5a15cd5269333ccd47aac5', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '5151583d1c0e9a9dad0a283b0b828bd09d424fdc' }, this.afDesc), h("path", { key: '2211e4564ed719da792f9021db575784c426c5ac', class: "digi-icon-validation-error__shape", d: "M34.4328058,0 C35.5494848,0 36.5900526,0.609146757 37.1483921,1.58958113 L47.5812454,19.9104189 C48.1395849,20.8909496 48.1395849,22.1090504 47.5812454,23.0895811 L37.1483921,41.4104189 C36.5900526,42.3908532 35.5494848,43 34.4328058,43 L13.5671942,43 C12.4505152,43 11.4099474,42.3908532 10.8516079,41.4104189 L0.41875464,23.0895811 C-0.13958488,22.1090504 -0.13958488,20.8909496 0.41875464,19.9104189 L10.8516079,1.58958113 C11.4099474,0.609146757 12.4505152,0 13.5671942,0 Z M18.6736823,12.3728178 C18.2711762,11.964729 17.6203819,11.964729 17.2178757,12.3728178 L15.2825964,14.334939 C14.8800903,14.7430278 14.8800903,15.4028485 15.2825964,15.8109373 L20.6089616,21.2111779 L15.2825964,26.6114185 C14.8800903,27.0195074 14.8800903,27.6793281 15.2825964,28.0874169 L17.2178757,30.049538 C17.6203819,30.4576269 18.2711762,30.4576269 18.6736823,30.049538 L24.0000475,24.6492974 L29.3264127,30.049538 C29.7289188,30.4576269 30.3797132,30.4576269 30.7822193,30.049538 L32.7174986,28.0874169 C33.1200048,27.6793281 33.1200048,27.0195074 32.7174986,26.6114185 L27.3911334,21.2111779 L32.7174986,15.8109373 C33.1200048,15.4028485 33.1200048,14.7430278 32.7174986,14.334939 L30.7822193,12.3728178 C30.3797132,11.964729 29.7289188,11.964729 29.3264127,12.3728178 L24.0000475,17.7730584 Z", fill: "currentColor", "fill-rule": "nonzero" })));
+    }
+};
+IconValidationError.style = DigiIconValidationErrorStyle0;
+
+const iconValidationSuccessCss = ".sc-digi-icon-validation-success-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-success-h svg.sc-digi-icon-validation-success{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconValidationSuccessStyle0 = iconValidationSuccessCss;
+
+const IconCheckCircle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator('icontitle');
+    }
+    render() {
+        return (h("svg", { key: '876342c6bc47accd65078fe87e58db0067061586', class: "digi-icon-validation-success", width: "25", height: "25", viewBox: "0 0 25 25", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && h("title", { key: '8580e54cf5767dfb0d0416c785733efe9e3d6334', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: 'c918ead955941e7035295e2237e8e2cdec8428f1' }, this.afDesc), h("path", { key: '8c0d830f87d9eec84b937a9ae73d410f1f21f431', class: "digi-icon-validation-success__shape", d: "M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z", fill: "currentColor", "fill-rule": "nonzero" })));
+    }
+};
+IconCheckCircle.style = DigiIconValidationSuccessStyle0;
+
+const iconValidationWarningCss = ".sc-digi-icon-validation-warning-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-warning-h svg.sc-digi-icon-validation-warning{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}";
+const DigiIconValidationWarningStyle0 = iconValidationWarningCss;
+
+const IconValidationWarning = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator('icontitle');
+    }
+    render() {
+        return (h("div", { key: '6b2909c3dedf8e0aa3cbdf2f773e7c5aafc234ea' }, h("svg", { key: 'a0632d885e43f7e526f311b0d3dad70fcc33865a', class: "digi-icon-validation-warning", width: "18", height: "18", viewBox: "0 0 18 18", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined }, this.afTitle && h("title", { key: 'bd6ff248d06a84801f57ca29cb78b7ffa13814fc', id: this.titleId }, this.afTitle), this.afDesc && h("desc", { key: '7e588f46f51a1d7eb17b7a2bf8bc08d578d03c5a' }, this.afDesc), h("g", { key: 'e3843b8530efbae9c3f35b0e2dac63d7f9b8c971', fill: "none", "fill-rule": "evenodd" }, h("circle", { key: '5cd01901273eccd5d6a64d3d425e01093fa6a3ee', cx: "9", cy: "9", r: "6.75", fill: "#333" }), h("path", { key: 'f5c419157593d64fe111332cc3c2788e608b2029', d: "m18 9c0 4.9717-4.0298 9-9 9-4.9702 0-9-4.0283-9-9 0-4.9688 4.0298-9 9-9 4.9702 0 9 4.0312 9 9zm-9 1.8145c-0.92196 0-1.6694 0.7474-1.6694 1.6694 0 0.92196 0.7474 1.6694 1.6694 1.6694s1.6694-0.7474 1.6694-1.6694c0-0.92196-0.7474-1.6694-1.6694-1.6694zm-1.3157-1.065c0.012593 0.23095 0.20355 0.41175 0.43483 0.41175h1.7618c0.23128 0 0.42224-0.1808 0.43483-0.41175l0.2692-4.9355c0.013609-0.24946-0.18501-0.45922-0.43483-0.45922h-2.3002c-0.24982 0-0.4484 0.20976-0.43479 0.45922l0.2692 4.9355z", fill: "#FFE200" })))));
+    }
+};
+IconValidationWarning.style = DigiIconValidationWarningStyle0;
+
+export { FormLabel as digi_form_label, FormValidationMessage as digi_form_validation_message, IconValidationError as digi_icon_validation_error, IconCheckCircle as digi_icon_validation_success, IconValidationWarning as digi_icon_validation_warning };

package/dist/esm/digi-form-radiogroup.entry.js

@@ -1,6 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-bfea2cc5.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-148a7577.js';
 import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { F as FormRadiogroupValidation } from './form-radiogroup-validation.enum-d790fc66.js';
 
 const formRadiogroupCss = "";
 const DigiFormRadiogroupStyle0 = formRadiogroupCss;
@@ -10,12 +9,9 @@ const FormRadiogroup = class {
         registerInstance(this, hostRef);
         this.afOnGroupChange = createEvent(this, "afOnGroupChange", 7);
         this.radiobuttons = undefined;
-        this.afId = randomIdGenerator('digi-form-radiogroup');
         this.afValue = undefined;
         this.value = undefined;
         this.afName = randomIdGenerator('digi-form-radiogroup');
-        this.afValidation = FormRadiogroupValidation.NEUTRAL;
-        this.afValidationText = undefined;
     }
     OnAfValueChange(value) {
         this.value = value;
@@ -46,9 +42,9 @@ const FormRadiogroup = class {
         });
     }
     render() {
-        return (h(Host, { key: 'b8fdb2fce803f2ea1ab71244a74c7ef9d2903911' }, h("div", { key: 'de0f874c666b3154cb7ca150b1e91689fd257877', id: this.afId, class: {
+        return (h(Host, { key: '87664130d894a0a76cafb15b184ba1bc970f2c09' }, h("div", { key: '5ad880fd119a958646af1395de884533c19cb677', class: {
                 'digi-form-radiogroup': true
-            } }, h("digi-util-mutation-observer", { key: '5e0fd143bfcc7f00b0c96726871813d38fb09ce5', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: '2f38b87f888cfea9458b81dc1d821ca0cd6ab169' }))), h("div", { key: '8af4d3bff07ec0d0a4de40e028d5f69b42685f76', class: "digi-form-input__validation", "aria-atomic": "true", role: "alert", id: `${this.afId}--validation-message` }, this.afValidation != FormRadiogroupValidation.NEUTRAL && (h("digi-form-validation-message", { key: '2d491974c2b3d455aee7fe4d2c3ebfcdf2404ff3', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
+            } }, h("digi-util-mutation-observer", { key: '87ca289dca9a3ef8a95ee32c149594ab08d58399', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, h("slot", { key: 'e4da7e705be3248e7edc088969031d1dc671cf35' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {