@designsystem-se/af 37.0.2-beta.0 → 37.0.2

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

@@ -14,6 +14,8 @@ export class FormCheckbox {
     constructor() {
         this.dirty = false;
         this.touched = false;
+        this.focusVisible = false;
+        this.focusMethod = null;
         this.afInputRef = undefined;
         this.afLabel = undefined;
         this.afVariation = FormCheckboxVariation.PRIMARY;
@@ -52,7 +54,16 @@ export class FormCheckbox {
      * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
      */
     focusOnInput() {
+        this.focusVisible = this.focusMethod !== 'pointer';
         this._input.focus();
+        this.focusMethod = null;
+    }
+    /**
+     * Lyssnar på pointerdown för att kunna avgöra om fokus sätts via tangentbord eller mus/pekinteraktion.
+     * @en Listens for pointerdown to determine if focus is set via keyboard or mouse/touch interaction.
+     */
+    handlePointerDown() {
+        this.focusMethod = 'pointer';
     }
     componentWillLoad() {
         this.value = this.afValue;
@@ -65,6 +76,7 @@ export class FormCheckbox {
     }
     get cssModifiers() {
         return {
+            'digi-form-checkbox--focus-visible': this.focusVisible,
             'digi-form-checkbox--error': this.afValidation === FormCheckboxValidation.ERROR,
             'digi-form-checkbox--warning': this.afValidation === FormCheckboxValidation.WARNING,
             'digi-form-checkbox--primary': this.afVariation === FormCheckboxVariation.PRIMARY,
@@ -98,7 +110,7 @@ export class FormCheckbox {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: '510236a0bc0048a6a657f366a3107de346109636', tabindex: -1 }, h("div", { key: 'cd0fa14b3b6c6f2455bc6f50a81ca42f0329c7f1', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '98053e7e641744319df5f9331f9a92badd6d3fd2', class: "digi-form-checkbox__input", ref: (el) => {
+        return (h(Host, { key: '8d6f8c5187b356f6c17794a9c154daf8f84b220b', tabindex: -1 }, h("div", { key: '7b94a1ae8f7d414393b789ef604212c1bbc09065', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, h("input", { key: '6413ab9c80d4bc22396273ef1fa200ea3c40beb8', class: "digi-form-checkbox__input", ref: (el) => {
                 var _a;
                 this._input = el;
                 (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
@@ -106,7 +118,7 @@ export class FormCheckbox {
                 ? null
                 : `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === FormCheckboxValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: 'b32b615db271a2d7bb76edc8596f0bbbf15e63c9', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '85524659643995903e06178f6085914d79fbba67', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: '4c9c218bd9fe34fe036a33853735657fea7a4d42', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: '3637760582c4a4dbc085a4e097e4e50cb1ae1ab9', htmlFor: this.afId, class: "digi-form-checkbox__label" }, h("span", { key: '197c7997b4f660eb4e4e6a537a2cc826bc62893c', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (h("p", { key: 'ed8147d1a5c3ba6c8a05c9f821aa11c5aec13d47', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
     }
     static get is() { return "digi-form-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -576,7 +588,9 @@ export class FormCheckbox {
     static get states() {
         return {
             "dirty": {},
-            "touched": {}
+            "touched": {},
+            "focusVisible": {},
+            "focusMethod": {}
         };
     }
     static get events() {
@@ -771,6 +785,12 @@ export class FormCheckbox {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "handlePointerDown",
+                "target": undefined,
+                "capture": false,
+                "passive": true
             }];
     }
 }

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

@@ -9,7 +9,6 @@ License: none (public domain)
   --digi--form-file-upload--color--background--medium--hover: var(--digi--color--background--interactive--hover--secondary);
   --digi--form-file-upload--color--background--large--default: var(--digi--color--background--interactive--default--quaternary);
   --digi--form-file-upload--color--background--large--hover: var(--digi--color--background--interactive--hover--secondary);
-  --digi--form-file-upload--color--background--uploaded-files: var(--digi--color--background--secondary-elevated);
   --digi--form-file-upload--color--border--small--default: var(--digi--color--border--interactive--default--on-input-nuance);
   --digi--form-file-upload--color--border--small--hover: var(--digi--color--border--interactive--hover--primary);
   --digi--form-file-upload--color--border--medium--default: var(--digi--color--border--interactive--default--on-input-nuance);
@@ -63,7 +62,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--uploaded-files);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
   --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);
@@ -77,7 +76,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--uploaded-files);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
   --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);
@@ -91,7 +90,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--uploaded-files);
+  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);
   --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--large--default);
   --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--large--hover);
   --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--large--default);

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 License: none (public domain)
@@ -21,6 +22,8 @@ License: none (public domain)
   --digi--form-radiobutton--padding: var(--digi--gutter--icon);
   --digi--form-radiobutton--padding--block: var(--digi--gutter--small);
   --digi--form-radiobutton--padding--inline: var(--digi--gutter--icon);
+  display: block;
+  width: fit-content;
 }
 :host .digi-form-radiobutton {
   --BACKGROUND--DEFAULT: var(--digi--form-radiobutton--background-color);
@@ -64,7 +67,7 @@ License: none (public domain)
   color: var(--digi--color--text--primary);
   font-weight: var(--digi--typography--body--font-weight--desktop);
   cursor: pointer;
-  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 
 .digi-form-radiobutton__circle {
@@ -82,13 +85,15 @@ License: none (public domain)
   transform: translateY(1px);
 }
 
+/* "Äkta" visuell fokusindikator, dvs när elementet har fokus och användaren navigerar med tangentbordet */
 .digi-form-radiobutton__input:focus-visible ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
   outline: 2px solid black;
   outline-offset: 2px;
   box-shadow: 0px 0px 0px 5px white;
 }
 
-.digi-form-radiobutton__input:focus:not(:checked) ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
+/* "Tvingad" visuell fokusindikator, används främst när fokus sätts programatiskt */
+.digi-form-radiobutton--focus-visible .digi-form-radiobutton__input:focus ~ .digi-form-radiobutton__label .digi-form-radiobutton__circle {
   outline: 2px solid black;
   outline-offset: 2px;
   box-shadow: 0px 0px 0px 5px white;

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

@@ -14,6 +14,8 @@ export class FormRadiobutton {
     constructor() {
         this.dirty = false;
         this.touched = false;
+        this.focusVisible = false;
+        this.focusMethod = null;
         this.afLabel = undefined;
         this.afVariation = FormRadiobuttonVariation.PRIMARY;
         this.afLayout = FormRadiobuttonLayout.INLINE;
@@ -50,13 +52,23 @@ export class FormRadiobutton {
      * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
      */
     focusOnInput() {
+        this.focusVisible = this.focusMethod !== 'pointer';
         this._input.focus();
+        this.focusMethod = null;
+    }
+    /**
+     * Lyssnar på pointerdown för att kunna avgöra om fokus sätts via tangentbord eller mus/pekinteraktion.
+     * @en Listens for pointerdown to determine if focus is set via keyboard or mouse/touch interaction.
+     */
+    pointerDownHandler() {
+        this.focusMethod = 'pointer';
     }
     componentDidLoad() {
         this.afOnReady.emit();
     }
     get cssModifiers() {
         return {
+            'digi-form-radiobutton--focus-visible': this.focusVisible,
             'digi-form-radiobutton--error': this.afValidation === FormRadiobuttonValidation.ERROR,
             'digi-form-radiobutton--primary': this.afVariation === FormRadiobuttonVariation.PRIMARY,
             'digi-form-radiobutton--secondary': this.afVariation === FormRadiobuttonVariation.SECONDARY,
@@ -87,9 +99,9 @@ export class FormRadiobutton {
         this.afOnInput.emit(e);
     }
     render() {
-        return (h(Host, { key: 'c219f20c710f23829a44887396b31f03860b5071', tabindex: -1 }, h("div", { key: '8a79373d73a6a2285694738d15e735dffa06f058', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: 'eaf8472603390c55b3857f1918094494b0ff38f9', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormRadiobuttonValidation.ERROR
+        return (h(Host, { key: 'f70124a9cc34980f21e1a00e0fe6ee05c9357bee', tabindex: -1 }, h("div", { key: 'fd9dcdf5855ef66bc3e3904e33ccf6465e4cf3d5', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: '4e8e9c2cf1376b2a1d50cd997ee5bc5667c189cf', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormRadiobuttonValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: 'f3049d0f425c3f756f6e157a0a9f243541dbd468', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '3114e3bc85e870e916dd642a448bd4016e7b648e', class: "digi-form-radiobutton__circle" }), this.afLabel))));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: 'ca650fef6df415c4372f6850792c39d0ed6e7bf3', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '62fde4290dd8e0ada2f538c86dfcc167e25565c1', class: "digi-form-radiobutton__circle" }), this.afLabel))));
     }
     static get is() { return "digi-form-radiobutton"; }
     static get encapsulation() { return "scoped"; }
@@ -445,7 +457,9 @@ export class FormRadiobutton {
     static get states() {
         return {
             "dirty": {},
-            "touched": {}
+            "touched": {},
+            "focusVisible": {},
+            "focusMethod": {}
         };
     }
     static get events() {
@@ -643,6 +657,12 @@ export class FormRadiobutton {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "pointerDownHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": true
             }];
     }
 }

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: fit-content;
+}

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--input-elements);
-  --digi--form-select--background--neutral: var(--digi--color--background--interactive--default--input-elements);
+  --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--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

@@ -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--primary-elevated);
+  --digi--form-select-filter--dropdown--background: var(--digi--color--background--interactive--default--input-elements);
   --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;