@designsystem-se/af 39.2.3 → 39.3.0-beta.darkmode.1

package/dist/collection/components/_form/form-file-upload/form-file-upload.css

@@ -3,12 +3,13 @@ v2.0 | 20110126
 License: none (public domain)
 */
 :host {
-  --digi--form-file-upload--color--background--small--default: var(--digi--color--background--interactive--default--quaternary);
+  --digi--form-file-upload--color--background--small--default: var(--digi--color--background--interactive--default--tertiary);
   --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--default: var(--digi--color--background--interactive--default--tertiary);
   --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--default: var(--digi--color--background--interactive--default--tertiary);
   --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);
   --digi--form-file-upload--color--border--small--default: var(--digi--color--border--interactive--default--on-input-nuance);
   --digi--form-file-upload--color--border--small--hover: var(--digi--color--border--interactive--hover--primary);
   --digi--form-file-upload--color--border--medium--default: var(--digi--color--border--interactive--default--on-input-nuance);
@@ -62,7 +63,7 @@ License: none (public domain)
   font-family: var(--digi--global--typography--font-family--default);
 }
 :host .digi-form-file-upload--small {
-  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
   --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--small--default);
   --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--small--hover);
   --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--small--default);
@@ -76,7 +77,7 @@ License: none (public domain)
   --ICON--PADDING: var(--digi--form-file-upload--padding--small--icon);
 }
 :host .digi-form-file-upload--medium {
-  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
   --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--medium--default);
   --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--medium--hover);
   --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--medium--default);
@@ -90,7 +91,7 @@ License: none (public domain)
   --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);
 }
 :host .digi-form-file-upload--large {
-  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--uploaded-files);
   --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--large--default);
   --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--large--hover);
   --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--large--default);
@@ -244,7 +245,7 @@ License: none (public domain)
   padding-bottom: 0.75rem;
 }
 :host .digi-form-file-upload__error-list-container.with-files {
-  border-bottom: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);
+  border-bottom: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--tertiary-hypotes);
 }
 :host .digi-form-file-upload__error-list-container .clear-button {
   max-height: 1.5rem;
@@ -273,7 +274,7 @@ License: none (public domain)
   list-style-type: none;
 }
 :host .digi-form-file-upload__item-container:nth-child(n+2) {
-  border-top: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);
+  border-top: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--tertiary-hypotes);
 }
 :host .digi-form-file-upload__item-pending-container {
   display: flex;

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

@@ -8,14 +8,13 @@ License: none (public domain)
   --digi--form-filter--scroll--max-height--large: 23.4275rem;
   --digi--form-filter--scroll--padding: var(--digi--padding--small);
   --digi--form-filter--reset-button--margin-left: var(--digi--padding--small);
-  --digi--form-filter--legend__border-bottom: var(--digi--border-width--primary) solid var(--digi--color--divider--primary);
+  --digi--form-filter--legend__border-bottom: var(--digi--border-width--primary) solid var(--digi--color--divider--tertiary-hypotes);
   --digi--form-filter--list--margin: 0;
   --digi--form-filter--list--padding: var(--digi--gutter--small) 0 0 0;
   --digi--form-filter--item--margin: var(--digi--gutter--small) 0;
   --digi--form-filter--toggle-icon--transition: ease-in-out 0.2s all;
-  --digi--form-filter--dropdown--box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);
   --digi--form-filter--dropdown--border-radius: var(--digi--border--radius--primary);
-  --digi--form-filter--dropdown--background: var(--digi--color--background--primary);
+  --digi--form-filter--dropdown--background: var(--digi--color--background--dropdown);
   --digi--form-filter--dropdown--min-width: 18.75rem;
   --digi--form-filter--dropdown--margin-top: var(--digi--gutter--small);
   --digi--form-filter--dropdown--z-index: 999;
@@ -101,7 +100,7 @@ License: none (public domain)
   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);
+  box-shadow: 0 2px 6px 0 var(--digi--color--misc--dropshadow);
   overflow: hidden;
   margin-top: var(--digi--form-filter--dropdown--margin-top);
 }

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

@@ -5,21 +5,18 @@
   display: flex;
   flex-direction: column;
 }
-:host .digi-form-label__label--label {
-  font-weight: var(--digi--typography--label--font-weight--desktop);
-}
 :host .digi-form-label__label--label, :host .digi-form-label__label--description {
-  line-height: var(--digi--typography--label--line-height--desktop);
-  cursor: pointer;
-  display: block;
-}
-:host .digi-form-label__label-group {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--digi--gutter--icon);
-}
-:host .digi-form-label__description {
   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);
+  display: block;
+  user-select: text;
+  --webkit-user-select: text;
+}
+:host .digi-form-label__label--label {
+  font-weight: var(--digi--typography--label--font-weight--desktop);
+  cursor: pointer;
+}
+:host .digi-form-label__label--description {
+  cursor: text;
 }

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

@@ -62,7 +62,7 @@ export class FormLabel {
         }
     }
     render() {
-        return (h("div", { key: 'ac9aec4d1d20cc37694af578a97a16a17291c9f3', class: "digi-form-label" }, h("div", { key: 'bf27c3012d1973798095e6b832572fc20863c5f1', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '75435e49548e4fa27330a35b033689a0ed9e99a7', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: '0527ddcebbd2a1b215f42eaed06ba7fc28633d43', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: '8a3b3e6a0ec0a97adb0760b390f0ddb34b3e0b87', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: 'f2e6ad691a5cbc57b990416097454a393da35c01', class: "digi-form-label__actions" }, h("slot", { key: '1fab5cca94da7ad0f2b617db7f713d3b4d17c52d', name: "actions" }))))));
+        return (h("div", { key: 'ac9aec4d1d20cc37694af578a97a16a17291c9f3', class: "digi-form-label" }, h("div", { key: 'bf27c3012d1973798095e6b832572fc20863c5f1', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (h("label", { key: '75435e49548e4fa27330a35b033689a0ed9e99a7', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, h("span", { key: '113f2d2002676bd1066084f88f99f1ce85b97e76', tabindex: "-1", class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (h("span", { key: '8ef326712ecce745b5b45bb34d848debb5833327', tabindex: "-1", class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (h("div", { key: '954df6c9e3e386e43ebb963277ab7e33f3806832', class: "digi-form-label__actions" }, h("slot", { key: '52bc7668a2679c5fde4d3b45afbc2e5c7768be68', name: "actions" }))))));
     }
     static get is() { return "digi-form-label"; }
     static get encapsulation() { return "scoped"; }

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

@@ -47,6 +47,12 @@ License: none (public domain)
   border-color: var(--BORDER-COLOR--CHECKED);
   box-shadow: 0 0 0 var(--digi--border-width--primary) var(--digi--form-radiobutton--box-shadow--error);
 }
+:host .digi-form-radiobutton--error .digi-form-radiobutton__input:not(:checked):focus-visible ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
+  box-shadow: inset 0 0 0 var(--digi--border-width--primary) var(--digi--form-radiobutton--box-shadow--error), 0 0 0 5px white;
+}
+:host .digi-form-radiobutton--error .digi-form-radiobutton__input:checked:focus-visible ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
+  box-shadow: inset 0 0 0 var(--digi--border-width--primary) var(--digi--form-radiobutton--box-shadow--error), 0 0 0 5px white;
+}
 
 .digi-form-radiobutton__input {
   position: absolute;

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

@@ -3,8 +3,8 @@ v2.0 | 20110126
 License: none (public domain)
 */
 :host {
-  --digi--form-select--background--empty: var(--digi--color--background--interactive--default--secondary);
-  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--secondary);
+  --digi--form-select--background--empty: var(--digi--color--background--interactive--default--input-elements);
+  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--input-elements);
   --digi--form-select--background--success: var(--digi--color--background--interactive--validation--success);
   --digi--form-select--background--warning: var(--digi--color--background--interactive--validation--warning);
   --digi--form-select--background--error: var(--digi--color--background--interactive--validation--error);

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

@@ -3,7 +3,7 @@ v2.0 | 20110126
 License: none (public domain)
 */
 :host {
-  --digi--form-select-filter--footer--background: var(--digi--color--background--secondary);
+  --digi--form-select-filter--footer--background: var(--digi--color--background--secondary-accent);
   --digi--form-select-filter--scroll--max-height: 10.625rem;
   --digi--form-select-filter--scroll--padding: var(--digi--padding--small);
   --digi--form-select-filter--reset-button--margin-right: var(--digi--padding--small);
@@ -13,7 +13,7 @@ License: none (public domain)
   --digi--form-select-filter--item--margin: var(--digi--gutter--small) 0;
   --digi--form-select-filter--toggle-icon--transition: ease-in-out 0.2s all;
   --digi--form-select-filter--dropdown--border-radius: var(--digi--border-radius--input);
-  --digi--form-select-filter--dropdown--background: var(--digi--color--background--interactive--default--input-elements);
+  --digi--form-select-filter--dropdown--background: var(--digi--color--background--dropdown);
   --digi--form-select-filter--dropdown--min-width: 18.75rem;
   --digi--form-select-filter--dropdown--margin-top: var(--digi--gutter--small);
   --digi--form-select-filter--dropdown--z-index: 999;
@@ -32,7 +32,7 @@ License: none (public domain)
   --digi--form-select-filter--dropdown--item--margin-bottom: 0px;
   --digi--form-select-filter--dropdown--item--border-width: var(--digi--border-width--primary);
   --digi--form-select-filter--dropdown--item--border-type: var(--digi--border-style--primary);
-  --digi--form-select-filter--dropdown--item--border-color: var(--digi--color--divider--primary);
+  --digi--form-select-filter--dropdown--item--border-color: var(--digi--color--divider--tertiary-hypotes);
   --digi--form-select-filter--dropdown--item--padding-y: var(--digi--margin--small);
   --digi--form-select-filter--dropdown--item--padding-x: var(--digi--margin--largest);
   --digi--form-select-filter--dropdown--item--multiple--padding-y: var(--digi--margin--small);
@@ -230,7 +230,7 @@ License: none (public domain)
   margin-right: var(--digi--form-select-filter--reset-button--margin-right);
 }
 :host .digi-form-select-filter__dropdown {
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.7);
+  box-shadow: 0 2px 6px 0 var(--digi--color--misc--dropshadow);
   min-width: var(--digi--form-select-filter--dropdown--min-width);
   width: 100%;
   position: absolute;

package/dist/collection/components/_form/form-select-filter/form-select-filter.js

@@ -538,16 +538,19 @@ export class FormSelectFilter {
             } }, h("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (h(Host, { key: '2e7276930637366cbcb14168102afb82393708f5', tabindex: -1 }, h("div", { key: 'a5620907d2399c0561b6b3b604220c3bf82ded6b', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: '151c3656f03d8b8b7639daf0e26631722a1f6878', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("digi-util-keydown-handler", { key: '035ffc46a22218d42d892c89592993a7694b2be2', onAfOnEsc: () => this.escHandler() }, h("button", { key: 'b8fedc87ecf0b1cf26e2b123c97fcd7ff6287e0b', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: '8bb88747afac881b3667ecb60c4adbe36c1325f8', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: 'a809c5fa00dd4d2a50662aeed3d673cda0289d80', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: 'a5e7f4b998d38a7d912a25b2d7fb0b852b920dc3', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: 'ef852d8060bacbdef9707dcb23ed3ae1f98cc33f', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: '5c5e41376cf7264e837bed3905c971dd0adee156', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+        const descriptionId = this.afDescription
+            ? this.afId + '--label--description'
+            : '';
+        return (h(Host, { key: '36f885eb0d406344333d0d3fdc878580b9772384', tabindex: -1 }, h("div", { key: 'bbe35192214230cd9ddd8c2790671867c53cd7c4', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), id: `${this.afId}-identifier` }, h("digi-form-label", { key: '51ba3fafec5ec7a4c9c798a8d56de416800fc8c3', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), this.afDescription && (h("span", { key: '81f3177a5752cf0e9970c234100a348a416d9f8d', id: descriptionId, class: "digi--a11y--sr-only" }, this.afDescription)), h("digi-util-keydown-handler", { key: '27c70393aeae25a2cdc3f77f085f73d227f688ea', onAfOnEsc: () => this.escHandler() }, h("button", { key: 'fc9bc7fec170402401068b64cb1387eab3ef408a', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${descriptionId} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: '7456eb294d9cf7e013425af1fed83fb721da2ddf', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: 'de7ffcae637f59666b5b735689da8539c105e9c8', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: '9fe988f42321c510776a4a03850b2c67e5bf4df2', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '1064178874edc53546e06a8a134890e6db1574fa', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: 'c559d98f934e23554f1976de6b8a855e95cacff1', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
                 'digi-form-select-filter__dropdown': true,
                 'digi-form-select-filter__dropdown--right': this.afAlignRight,
                 'digi-form-select-filter__dropdown--hidden': !this.isOpen
-            } }, h("fieldset", { key: 'daa4e02e97f5907fc89aeb7a337bd97ceba1c148' }, h("div", { key: '99cd8af83d9b1410610f4e49a6759fac20c6955f', class: "digi-form-select-filter__header" }, h("legend", { key: '0ed1e17842e0795194c4b74d9600f17c3d2e63b0', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: 'c35f93cb680c6f6e902f281ff597108a9106b016', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, h("fieldset", { key: 'af54f742fb7c0bb0c641acf05d8dd17883b753c9' }, h("div", { key: 'ac9e8f4e1185ced872ec62268c3cb1f64b3d75ed', class: "digi-form-select-filter__header" }, h("legend", { key: 'd625e52f8c849da2b4cdc7575e1851e4412a21f3', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '22897c421223ba66e439e6c38085ed6239685b47', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
                 this.focusListItemIndex = 0;
                 99;
             }, onAfOnKeyup: (e) => {
                 this.inputSearchKeyboardHandler(e.detail);
-            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: '4e2c4a6e6039f8f3efe8cfc75bb302214704073e', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '751ad128164783be9f7d32d5418d8b99a2be24e3', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: '2879b7c081ea2097bd17a9c0f0967b78b9a5d665', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
+            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: '5fb9ef3d14be10bbdac05219efa1ef6c7d068953', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '63a57b0e380b33c6c7078338b22ec033ac6aca92', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: '7039d415e7e8fa20c58b802668b79f70a3f39f24', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
                 ? 'false'
                 : this.afValidation ===
                     FormSelectFilterValidation.ERROR
@@ -556,11 +559,11 @@ export class FormSelectFilter {
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (h("li", { key: '0d51a466af769e3b687805b4cb8027bcac8b5112', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                    : 'false' }, this.showNeutralValue && (h("li", { key: '3493dac442bc02bfcabbd11db246e89ec97f9f0c', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
                 ? 'false'
                 : this.afRequired
                     ? 'true'
-                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: '84264b690e6a8b4cd792f6543f00a7f5e559fe06', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
+                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: '62d5f8f20828b47310cab7e3c4938c445f5e6842', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
             this._filteredResult.map((item, index) => {
                 return (h("li", { class: "digi-form-select-filter__item", key: index, dir: item.dir, lang: item.lang, "aria-checked": this.isSelected(item.value) ? 'true' : 'false', role: this.afMultipleItems ? 'checkbox' : 'radio', "aria-required": this.afMultipleItems
                         ? 'false'
@@ -576,9 +579,9 @@ export class FormSelectFilter {
                         : index === 0
                             ? 0
                             : -1 }, this.isSelected(item.value) && (h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
-            }))))), this.afMultipleItems && (h("div", { key: '79def162604c33d3c6acffd7464f2d44f4cf6229', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: '3ee850fa06c38590c50dcfba11251bd6a4ed5626', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: '0fe5d9f9d899d3ddeaf6447485bf5f655e6270ff', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '0c14fea74bd16712355a8fafdc17408674ae0489', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+            }))))), this.afMultipleItems && (h("div", { key: 'fc12aee0445ed158c701bb49f977cad3acdf0971', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: 'd36b63d60c6ce9bd3f482dea7c77065b87d27f3d', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: '24d63a13101c1fe08eca5f1126cabb77971bb66f', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '9e58cc30297d701e75c93445626fbb647d17989e', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
                 this.setClosed(true);
-            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: 'eb9dd0d0150b043458211e89c1311d9c7103d46f', class: "digi-form-select__footer" }, h("div", { key: 'f7aca001f6b2580600c1e823e307a4352811bb66', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '5802021f469405694a75378fc8830720a9275d41', "af-variation": this.afValidation }, this.afValidationText)))))));
+            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: '367a06a00ce4418ccfc7b81040ccd01191394469', class: "digi-form-select__footer" }, h("div", { key: 'aad246e7c5251edf1348ce3359e326ebca149fb0', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '0fb9a3f887670fcf9157bcf7395cccf97555b9c5', "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-select-filter"; }
     static get encapsulation() { return "scoped"; }

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

@@ -135,10 +135,10 @@ export class FormTextarea {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: '9d441e6a449175263fbf4e0023b7f5c66fcf0ba4', tabindex: -1 }, h("div", { key: '678a0ae1ba33d7066babcdd2781d29e68c279a25', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: 'f4e16f3e8522d91e55d3df26d0bdcf6aa6e95c9d', class: "digi-form-textarea__label" }, h("digi-form-label", { key: 'cebc069113aa246838caf62e5275303b991449b6', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: 'cc09746b82107eefa2d8db300cf202471b460b14', class: "digi-form-textarea__content" }, h("textarea", { key: '8acbb95c541add4d9bc66b827468ae0637174224', class: "digi-form-textarea__textarea", ref: (el) => (this._textarea = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormTextareaValidation.ERROR
+        return (h(Host, { key: 'f97d22d2c9a3e6344fe27bd79b9b163241a0c871', tabindex: -1 }, h("div", { key: '2755702541c871f4cc864256f5ed5bf4e4062188', class: Object.assign({ 'digi-form-textarea': true }, this.cssModifiers) }, h("div", { key: 'd62b792ec482966f92fc63167c04f0a3324b9761', class: "digi-form-textarea__label" }, h("digi-form-label", { key: '54d4c7653137366d5f6123dde8f4dc6a3b0ae4d0', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText })), h("div", { key: '0d629cda55f0f95c77a86686a6e3257b85abe63c', class: "digi-form-textarea__content" }, h("textarea", { key: 'da55ccc8672f8646cd55c06fb8fad817743737c4', class: "digi-form-textarea__textarea", ref: (el) => (this._textarea = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormTextareaValidation.ERROR
                 ? 'true'
-                : 'false', maxLength: this.afMaxlength, minLength: this.afMinlength, role: this.afRole, required: this.afRequired, id: this.afId, name: this.afName, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null })), h("div", { key: 'a6ffb01a8ccad600a566e42ab7dd4164c2740951', class: "digi-form-textarea__footer" }, h("div", { key: '432b75f936c76e46f5c052c05cac2646c11c9c70', class: "digi-form-textarea__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
-            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: '5d8f004f14d036a5400d0bbb03c1e26795b9e77d', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
+                : 'false', maxLength: this.afMaxlength, minLength: this.afMinlength, role: this.afRole, required: this.afRequired, id: this.afId, name: this.afName, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null })), h("div", { key: 'f3f04efd0ac2f7375612b32ebb0603e7767e4088', class: "digi-form-textarea__footer" }, h("div", { key: '51f4c475f9e98bb87ab9f7cf595463dc178bfbc3', class: "digi-form-textarea__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != FormTextareaValidation.NEUTRAL && (h("digi-form-validation-message", { key: '7894f68da8e5b44ba1d22d0d6f20d531ba4a26a2', class: "digi-form-textarea__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     static get is() { return "digi-form-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-validation-message/form-validation-message.js

@@ -32,7 +32,7 @@ export class FormValidationMessage {
         }
     }
     render() {
-        return (h("div", { key: '5c89cb2cfe7085ec0203814f2c7a43c9fe518db4', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, h("div", { key: 'cb85b6a6e02b081710f80ad7bbbe96e182d8c353', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), h("span", { key: '9b1689dcad19fd3f033c679f496a1c94348f393b', class: "digi-form-validation-message__text" }, h("slot", { key: '794c1b1c0771cae8c0b19bd7123f7f5bc28e99b7' }))));
+        return (h("div", { key: 'e19f49d6e49b2d928b3c80053fd413d6f86056e0', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, h("div", { key: 'ea2cce02d7c3c98c761cfa9abc1e39428c515063', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), h("span", { key: 'd732a6a477a88fc3ca2e18a2199f8f1f528c8a0a', class: "digi-form-validation-message__text" }, h("slot", { key: '8d62d0fc0d2f3290227289b59c975b92133df852' }))));
     }
     static get is() { return "digi-form-validation-message"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_header/header/header.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { HeaderCenterContentWidth, LayoutBlockContainer, UtilBreakpointObserverBreakpoints } from "../../../enums";
+import { HeaderCenterContentWidth, LayoutBlockContainer, LayoutBlockVariation, UtilBreakpointObserverBreakpoints, } from "../../../enums";
 /**
  * @enums HeaderCenterContentWidth - header-center-content-width.enum.ts
  * @enums LayoutBlockContainer - layout-block-container.enum.ts
@@ -56,7 +56,7 @@ export class Header {
         return (h("div", { class: "digi-header__wrapper" }, h("slot", { name: "header-logo" }), h("slot", { name: "header-content" }), this.hasNavigation && this.isMobile && (h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))));
     }
     render() {
-        return (h("header", { key: '39fda33a8f16ff6b1f3d65331e9d90fbb9bc7335', "aria-label": this.afAriaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: 'ead665097072a0853d27f85aa72bc104d6af9c49', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '1b360b35ade13061ae477304d34da8f387a63a1e', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '6e949a03eb7c2332e2b4b7a5ac80df0906d2a82d', class: "digi-header__border" }), h("slot", { key: '7c147f8795238074425518e663610f2da2b71183', name: "header-navigation" }))));
+        return (h("header", { key: '685004eea469ef37ba670db6e868f86fcd07b7b8', "aria-label": this.afAriaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '1f832aa84bd40757b46e51d71a642c42ebf42396', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: 'a76771fec898f419712e0521da415e6ba06e8e97', afContainer: LayoutBlockContainer.NONE, afVariation: LayoutBlockVariation.TRANSPARENT }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '34b9d5755b9a168e8c4cddd44e0802ab2f34e4fc', class: "digi-header__border" }), h("slot", { key: '2aac1569efdc328863ab94e52563ede14d8c2742', name: "header-navigation" }))));
     }
     static get is() { return "digi-header"; }
     static get encapsulation() { return "scoped"; }