@designsystem-se/af 34.1.0 → 34.2.0

package/dist/cjs/{text-ca7e238b.js → text-3157012b.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 const common = {
+    locale: 'sv-SE',
     close: 'Stäng',
     loading: 'Laddar',
     show: 'Visa',
@@ -26,6 +27,7 @@ const common = {
     removeItem: (item) => `Ta bort ${item}`
 };
 const calendar = {
+    screenReaderInstructions: 'För navigering mellan månader med piltangenterna, använd inte den virtuella markören.',
     week: 'Vecka',
     weekdays: {
         mon: 'Måndag',
@@ -44,6 +46,17 @@ const calendar = {
         fri: 'Fr',
         sat: 'Lö',
         sun: 'Sö'
+    },
+    disabledDate: 'Ej valbart datum',
+    datepicker: {
+        label: 'Skriv in eller välj datum (åååå-mm-dd)',
+        description: 'Exempel: 1992-06-26',
+        validationMessage: 'Eget meddelande',
+        validationWrongFormat: 'Fel format',
+        validationDisabledDate: 'Ej valbart datum',
+        openCalendarAriaLabel: 'Visa kalender',
+        closeCalendarAriaLabel: 'Dölj kalender',
+        selectedDate: 'Valt datum'
     }
 };
 const code = {

package/dist/cjs/{tools-feedback-variation.enum-b17e8f87.js → typography-variation.enum-cc2d8aef.js}

@@ -95,6 +95,34 @@ exports.FormErrorListHeadingLevel = void 0;
     FormErrorListHeadingLevel["H6"] = "h6";
 })(exports.FormErrorListHeadingLevel || (exports.FormErrorListHeadingLevel = {}));
 
+exports.FormInputMode = void 0;
+(function (FormInputMode) {
+    FormInputMode["DEFAULT"] = "";
+    FormInputMode["NONE"] = "none";
+    FormInputMode["TEXT"] = "text";
+    FormInputMode["DECIMAL"] = "decimal";
+    FormInputMode["NUMERIC"] = "numeric";
+    FormInputMode["TEL"] = "tel";
+    FormInputMode["SEARCH"] = "search";
+    FormInputMode["EMAIL"] = "email";
+    FormInputMode["URL"] = "url";
+})(exports.FormInputMode || (exports.FormInputMode = {}));
+
+exports.FormInputValidation = void 0;
+(function (FormInputValidation) {
+    FormInputValidation["SUCCESS"] = "success";
+    FormInputValidation["ERROR"] = "error";
+    FormInputValidation["WARNING"] = "warning";
+    FormInputValidation["NEUTRAL"] = "neutral";
+})(exports.FormInputValidation || (exports.FormInputValidation = {}));
+
+exports.FormInputVariation = void 0;
+(function (FormInputVariation) {
+    FormInputVariation["SMALL"] = "small";
+    FormInputVariation["MEDIUM"] = "medium";
+    FormInputVariation["LARGE"] = "large";
+})(exports.FormInputVariation || (exports.FormInputVariation = {}));
+
 exports.FormRadiobuttonLayout = void 0;
 (function (FormRadiobuttonLayout) {
     FormRadiobuttonLayout["INLINE"] = "inline";
@@ -142,6 +170,21 @@ exports.FormSelectFilterValidation = void 0;
     FormSelectFilterValidation["NEUTRAL"] = "neutral";
 })(exports.FormSelectFilterValidation || (exports.FormSelectFilterValidation = {}));
 
+exports.FormSelectValidation = void 0;
+(function (FormSelectValidation) {
+    FormSelectValidation["SUCCESS"] = "success";
+    FormSelectValidation["ERROR"] = "error";
+    FormSelectValidation["WARNING"] = "warning";
+    FormSelectValidation["NEUTRAL"] = "neutral";
+})(exports.FormSelectValidation || (exports.FormSelectValidation = {}));
+
+exports.FormSelectVariation = void 0;
+(function (FormSelectVariation) {
+    FormSelectVariation["SMALL"] = "small";
+    FormSelectVariation["MEDIUM"] = "medium";
+    FormSelectVariation["LARGE"] = "large";
+})(exports.FormSelectVariation || (exports.FormSelectVariation = {}));
+
 exports.HeaderCenterContentWidth = void 0;
 (function (HeaderCenterContentWidth) {
     HeaderCenterContentWidth["DEFAULT"] = "none";
@@ -243,3 +286,9 @@ exports.FeedbackVariation = void 0;
     FeedbackVariation["PRIMARY"] = "primary";
     FeedbackVariation["SECONDARY"] = "secondary";
 })(exports.FeedbackVariation || (exports.FeedbackVariation = {}));
+
+exports.TypographyVariation = void 0;
+(function (TypographyVariation) {
+    TypographyVariation["SMALL"] = "small";
+    TypographyVariation["LARGE"] = "large";
+})(exports.TypographyVariation || (exports.TypographyVariation = {}));

package/dist/collection/components/_calendar/calendar/calendar.css

@@ -403,7 +403,7 @@ License: none (public domain)
 :host .digi-calendar__header--month-step .digi-calendar__month-select-button:first-child {
   border-radius: 4px 0 0 0;
 }
-:host .digi-calendar__header--month-step .digi-calendar__month-select-button:focus, :host .digi-calendar__header--month-step .digi-calendar__month-select-button:hover {
+:host .digi-calendar__header--month-step .digi-calendar__month-select-button:focus:not(.digi-calendar__date--not-selectable), :host .digi-calendar__header--month-step .digi-calendar__month-select-button:hover:not(.digi-calendar__date--not-selectable) {
   --digi--calendar--header--button--background: var(
     --digi--calendar--header--button--background--hover
   );
@@ -436,6 +436,9 @@ License: none (public domain)
 :host .digi-calendar__td-week {
   border-right: var(--digi--calendar--week--border-width) solid var(--digi--calendar--week--border-color);
 }
+:host .digi-calendar__td {
+  text-align: right;
+}
 :host .digi-calendar__date--week-number {
   font-style: var(--digi--calendar--week--font-style);
   font-size: var(--digi--calendar--week--font-size);
@@ -478,7 +481,7 @@ License: none (public domain)
   border: var(--digi--calendar--date--today--circle-border);
   border-radius: 50%;
 }
-:host .digi-calendar__date:hover {
+:host .digi-calendar__date:hover:not(.digi-calendar__date--not-selectable) {
   --digi--calendar--date--box-shadow: var(
     --digi--calendar--date--box-shadow--hover
   );
@@ -487,7 +490,7 @@ License: none (public domain)
   );
   cursor: pointer;
 }
-:host .digi-calendar__date:hover span {
+:host .digi-calendar__date:hover:not(.digi-calendar__date--not-selectable) span {
   text-decoration: underline;
 }
 :host .digi-calendar__date--selected {
@@ -511,6 +514,9 @@ License: none (public domain)
   outline-offset: -3px;
   box-shadow: 0px 0px 0px 5px inset white;
 }
+:host .digi-calendar__date--not-selectable {
+  cursor: not-allowed;
+}
 :host .digi-calendar__date--not-selectable::after {
   display: block;
   content: " ";
@@ -522,7 +528,7 @@ License: none (public domain)
   top: 0%;
   left: 50%;
 }
-:host .digi-calendar__date--focused:focus-visible:not(.digi-calendar__date--selected) {
+:host .digi-calendar__date--focused:focus-visible:not(.digi-calendar__date--selected):not(.digi-calendar__date--not-selectable) {
   --digi--calendar--date--background-color: var(
     --digi--calendar--date--focused--background-color
   );

package/dist/collection/components/_calendar/calendar/calendar.js

@@ -228,7 +228,7 @@ export class Calendar {
     dateWithoutTime(date) {
         return new Date(date.getFullYear(), date.getMonth(), date.getDate());
     }
-    isDisabledDate(date) {
+    isInAnotherMonth(date) {
         return !this.isSameMonth(date, this.focusedDate);
     }
     subtractMonth() {
@@ -258,7 +258,7 @@ export class Calendar {
         }
         else {
             return this.isSameMonth(date, new Date())
-                ? this.isSameDate(date, new Date()) && !this.isDisabledDate(date)
+                ? this.isSameDate(date, new Date()) && !this.isInAnotherMonth(date)
                     ? 0
                     : -1
                 : this.isSameMonth(date, this.focusedDate) && date.getDate() === 1
@@ -273,7 +273,8 @@ export class Calendar {
         }
         this.onDirty();
         const date = new Date(e.detail.target.dataset.date);
-        this.focusedDate = new Date(date.setDate(date.getDate() + daysToAdd));
+        const newDate = new Date(date.setDate(date.getDate() + daysToAdd));
+        this.focusedDate = newDate;
         this.afInitSelectedMonth = this.focusedDate.getMonth();
         this.resetFocus();
     }
@@ -302,15 +303,14 @@ export class Calendar {
         }, 100);
     }
     getFullDate(date) {
-        return date.toLocaleString('default', {
+        return date.toLocaleString(_t.locale, {
             day: 'numeric',
             month: 'numeric',
             year: 'numeric'
         });
     }
     getDateName(date) {
-        return date.toLocaleString('default', {
-            weekday: 'long',
+        return date.toLocaleString(_t.locale, {
             year: 'numeric',
             month: 'long',
             day: 'numeric'
@@ -322,7 +322,7 @@ export class Calendar {
         }
         else {
             return this.isSameMonth(date, new Date())
-                ? this.isSameDate(date, new Date()) && !this.isDisabledDate(date)
+                ? this.isSameDate(date, new Date()) && !this.isInAnotherMonth(date)
                 : this.isSameMonth(date, this.focusedDate) && date.getDate() === 1;
         }
     }
@@ -395,39 +395,43 @@ export class Calendar {
                 await ((_a = this === null || this === void 0 ? void 0 : this._yearSelect) === null || _a === void 0 ? void 0 : _a.afMGetFormControlElement());
     }
     cssDateModifiers(date) {
+        const shownMonth = this.focusedDate.getMonth();
         return {
-            'digi-calendar__date--today': this.isSameDate(date, new Date()) && !this.isDisabledDate(date),
-            'digi-calendar__date--disabled': this.isDisabledDate(date),
+            'digi-calendar__date--today': this.isSameDate(date, new Date()) && !this.isInAnotherMonth(date),
+            'digi-calendar__date--disabled': this.isInAnotherMonth(date),
             'digi-calendar__date--focused': this.setFocused(date),
-            'digi-calendar__date--selected': this.isDateSelected(date),
-            'digi-calendar__date--not-selectable': !this.isDisabledDate(date) && !this.isDateSelectable(date)
+            'digi-calendar__date--selected': this.isDateSelected(date) && date.getMonth() === shownMonth,
+            'digi-calendar__date--not-selectable': !this.isInAnotherMonth(date) && !this.isDateSelectable(date)
         };
     }
     render() {
-        return (h("div", { key: 'bf40fc1bac26c7a1fd36af8163ca900ad716f2ac', class: {
+        return (h("div", { key: 'dd8d041a34c874f43bc399f96c508dc170eddfc3', class: {
                 'digi-calendar': true,
                 'digi-calendar--hide': !this.afActive
-            }, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: '5c5a3d9b92e2cad5d5d0891773245199ff2f270d', class: "digi-calendar__header" }, h("div", { key: 'a8220cc1f247d952d987eebc64b66a85f9b8fa0e', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: 'e74b195443677f7e7653e159be212dc762721ddf', afLabel: "M\u00E5nad", "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
+            }, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: 'c53f38e0aef3675fa7b97e2dcb32a1bc9c19abd3', class: "digi-calendar__header" }, h("div", { key: '244d99b0652bfb7ad5c585078ab2af91548fa579', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: '765feb5cb8269d57bbdf1a400a3a3f3e01ca0413', afLabel: "M\u00E5nad", "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
                 this.selectMonth(evt);
             } }, this.months.map((month, index) => {
             return h("option", { value: index }, month);
-        })), h("digi-form-select", { key: 'f8997fd8f662111f681bfea97fa6c8da4833dbd7', afLabel: "\u00C5r", "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
+        })), h("digi-form-select", { key: 'fe3960bc47e7a5ae27a4c1bef1a9f1b0bb56a9a8', afLabel: "\u00C5r", "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
                 this.selectYear(evt);
-            }, ref: (el) => (this._yearSelect = el) }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: '6357428160019c55994d797d3d17c7155572a11e', class: "digi-calendar__header" }, h("div", { key: '8ba1925cdbf55c492a2fe0793145782ee4c1eb71', class: "digi-calendar__header--month-step" }, h("button", { key: 'c35f9f23abd8560a716e6fd45bbbe32281cdc220', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.afInitSelectedMonth - 1) +
-                ', föregående månad', onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: 'bb1685a8b70c6ba74d5ff649ac5fe15404f10433', slot: "icon", "aria-hidden": "true" }), h("span", { key: '793236bdad8c199474057adbabf3cc62509c00a2', class: "digi-calendar__month-select-name" }, this.getMonthName(this.afInitSelectedMonth - 1))), h("div", { key: '6e0fcb86956a89bdf7c18d30365b524b1679b952', class: "digi-calendar__month" }, this.getFullMonthName(this.afInitSelectedMonth)), h("button", { key: '155c99f0c5f1aacac09a15733477a5aa470f27bc', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.afInitSelectedMonth + 1) +
-                ', nästa månad', onClick: () => this.addMonth(), ref: (el) => (this._nextButton = el) }, h("span", { key: 'cb7449a1b1be88b4b9c06d8d483e7ecae59ee42c', class: "digi-calendar__month-select-name" }, this.getMonthName(this.afInitSelectedMonth + 1)), h("digi-icon-chevron-right", { key: 'b698289d59f9f934e5f936958b15d606e72df3b2', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: 'a6af325d76e3b441eb9dfa75dc7fc39d508d7393', onAfOnDown: (e) => this.navigateHandler(e, 7), onAfOnUp: (e) => this.navigateHandler(e, -7), onAfOnLeft: (e) => this.navigateHandler(e, -1), onAfOnRight: (e) => this.navigateHandler(e, 1), onAfOnShiftTab: () => this.shiftTabHandler() }, h("table", { key: 'aa61779c152a1c13ed768bc84ccc8fc05c826872', role: "grid", class: "digi-calendar__table" }, h("thead", { key: '1e653248ff572c0bcc36823a2a5a5fac0878b3bf' }, h("tr", { key: '4ab2c169027c83cb5dc4b5d1031f0c9f7b965a7f' }, this.afShowWeekNumber && (h("th", { key: 'f9a6bcd38bc852fef8f924cc2faaee108aaabcfa', role: "gridcell", abbr: _t.calendar.week, class: "digi-calendar__table-header-week" }, _t.calendar.week.toLowerCase())), Object.keys(_t.calendar.weekdays).map((day) => (h("th", { role: "gridcell", abbr: _t.calendar.weekdays[day], class: "digi-calendar__table-header" }, _t.calendar.weekdays_short[day].toLowerCase()))))), h("tbody", { key: 'feef4137f6cf96b69c996dfd83631c4086ad4a88', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
+            }, ref: (el) => (this._yearSelect = el) }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: 'e5fc63f78caf20e86e7c34264389aba72f69a802', class: "digi-calendar__header" }, h("div", { key: '1f4c4a04c7697efdf94ee01079eb4f86ba550374', class: "digi-calendar__header--month-step" }, h("button", { key: 'fd036825cd957402bef9433d9c0e4145ac5e39d8', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.afInitSelectedMonth - 1) +
+                ', föregående månad', onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: 'bb77e1335ffd12d9e56839cbfcbe1a685f884eb2', slot: "icon", "aria-hidden": "true" }), h("span", { key: '3ca7e44aeb5c5183091b07cbb19ecd6af69ec91f', class: "digi-calendar__month-select-name" }, this.getMonthName(this.afInitSelectedMonth - 1))), h("div", { key: 'c885c4c385ee57d3c8d4dc71db03c3556e3d3ec6', class: "digi-calendar__month" }, this.getFullMonthName(this.afInitSelectedMonth)), h("button", { key: 'fc31cd40cef9e10764b93d25e54e45dd83fad5ae', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.afInitSelectedMonth + 1) +
+                ', nästa månad', onClick: () => this.addMonth(), ref: (el) => (this._nextButton = el) }, h("span", { key: 'ae0f70e300888630aee53b6d63ce5dbc29766292', class: "digi-calendar__month-select-name" }, this.getMonthName(this.afInitSelectedMonth + 1)), h("digi-icon-chevron-right", { key: '46af22c36d21f41969b06415e00aaf565d14c448', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: '88aab0d648cc5b1dfb926275dad5eb0934185f2d', onAfOnDown: (e) => this.navigateHandler(e, 7), onAfOnUp: (e) => this.navigateHandler(e, -7), onAfOnLeft: (e) => this.navigateHandler(e, -1), onAfOnRight: (e) => this.navigateHandler(e, 1), onAfOnShiftTab: () => this.shiftTabHandler() }, h("table", { key: 'f55d1cc3c923bb1f39d1fc30f1e600b815521cab', role: "grid", class: "digi-calendar__table" }, h("thead", { key: 'e2b2c774fe7b1031a8aa587bc9927ab9fc5d7313' }, h("tr", { key: 'cd0770091bd86a269a29bbaa440f83c9eda7e273', role: "row" }, this.afShowWeekNumber && (h("th", { key: '0e11243cf38ea7d7ef3bfb87aab6f3641198d37c', role: "columnheader", abbr: _t.calendar.week, class: "digi-calendar__table-header-week" }, _t.calendar.week.toLowerCase())), Object.keys(_t.calendar.weekdays).map((day) => (h("th", { role: "columnheader", "aria-label": _t.calendar.weekdays[day], abbr: _t.calendar.weekdays[day], class: "digi-calendar__table-header" }, _t.calendar.weekdays_short[day].toLowerCase()))))), h("tbody", { key: 'af971b06248a9571260ec27f18472ef12c1de994', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
             return (h("tr", null, week.map((day, i) => {
                 if (this.afShowWeekNumber && i === 0) {
-                    return (h("td", { role: "gridcell", class: "digi-calendar__td-week digi-calendar__date--week-number", id: 'digi-calendar__week-' + day }, day));
+                    return (h("th", { role: "rowheader", "aria-label": _t.calendar.week + ' ' + day, class: "digi-calendar__td-week digi-calendar__date--week-number", id: 'digi-calendar__week-' + day }, day));
                 }
                 else {
-                    return (h("td", { role: "gridcell", class: "digi-calendar__td" }, h("button", { type: "button", class: Object.assign(Object.assign({}, this.cssDateModifiers(day)), { 'digi-calendar__date': true }), onClick: () => this.selectDateHandler(day), "aria-label": this.getDateName(day), "aria-disabled": this.isDisabledDate(day) ||
-                            !this.isDateSelectable(day), "aria-describedby": this.afShowWeekNumber && i === 1
-                            ? 'digi-calendar__week-' + week[0]
-                            : null, tabindex: this.setTabIndex(day), "data-date": this.getFullDate(day), "aria-pressed": this.ariaPressed(day) }, h("span", { "aria-hidden": "true" }, day.getDate()))));
+                    return this.isInAnotherMonth(day) ? (h("td", null)) : (h("td", { role: "gridcell", class: "digi-calendar__td" }, h("button", { key: this.getFullDate(day), type: "button", class: Object.assign(Object.assign({}, this.cssDateModifiers(day)), { 'digi-calendar__date': true }), onClick: () => this.selectDateHandler(day), "aria-current": this.isSameDate(day, new Date()) ? 'date' : null, "aria-label": `
+                                ${!this.isDateSelectable(day)
+                            ? _t.calendar.disabledDate
+                            : ''} ${this.getDateName(day)}
+                              `, "aria-disabled": !this.isDateSelectable(day) ? 'true' : null, tabindex: this.setTabIndex(day), "data-date": this.getFullDate(day), "aria-pressed": this.isDateSelectable(day)
+                            ? this.ariaPressed(day)
+                            : null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
                 }
             })));
-        })))), h("slot", { key: '11b292ce91704016dd1a3e214160d8bc84e28b17', name: "calendar-footer" })));
+        })))), h("slot", { key: '1d51fd6cf7c43cc0770b8e96692b8e3aa738acdf', name: "calendar-footer" })));
     }
     static get is() { return "digi-calendar"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.css

@@ -343,4 +343,30 @@ License: none (public domain)
 :host .digi-calendar-datepicker__input-component {
   --digi--form-input--padding: 0 var(--digi--datepicker--input--inline-end)
     0 var(--digi--datepicker--input--inline-start);
+}
+:host .digi-calendar-datepicker__selected-date-alert {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+:host .digi-calendar-datepicker__sr-instructions {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }

package/dist/collection/components/_calendar/calendar-datepicker/calendar-datepicker.js

@@ -1,3 +1,4 @@
+import { _t } from "../../../text";
 import { h, Host } from "@stencil/core";
 import { isAfter, isBefore, isValid, parse } from "date-fns";
 import { FormInputValidation } from "../../../enums";
@@ -10,19 +11,22 @@ import { detectClickOutside } from "../../../global/utils/detectClickOutside";
 export class CalendarDatepicker {
     constructor() {
         this.futureYears = 10;
+        this.screenReaderUpdateTrigger = false;
         this.showWrongFormatError = false;
         this.showDisabledDateError = false;
         this.showCalendar = false;
         this.userInput = '';
         this.afId = randomIdGenerator('digi-calendar-datepicker');
-        this.afLabel = 'Skriv in eller välj datum (åååå-mm-dd)';
-        this.afLabelDescription = 'Exempel: 1992-06-26';
+        this.afLabel = _t.calendar.datepicker.label;
+        this.afLabelDescription = _t.calendar.datepicker.description;
+        this.afOpenCalendarAriaLabel = _t.calendar.datepicker.openCalendarAriaLabel;
+        this.afCloseCalendarAriaLabel = _t.calendar.datepicker.closeCalendarAriaLabel;
         this.afValidation = CalendarDatepickerValidation.NEUTRAL;
         this.afValidationText = undefined;
         this.afInvalid = false;
-        this.afValidationMessage = 'Eget meddelande';
-        this.afValidationWrongFormat = 'Fel format';
-        this.afValidationDisabledDate = 'Ej valbart datum';
+        this.afValidationMessage = _t.calendar.datepicker.validationMessage;
+        this.afValidationWrongFormat = _t.calendar.datepicker.validationWrongFormat;
+        this.afValidationDisabledDate = _t.calendar.datepicker.validationDisabledDate;
         this.afRequired = undefined;
         this.afDisableValidation = undefined;
         this.afRequiredText = undefined;
@@ -93,6 +97,9 @@ export class CalendarDatepicker {
     }
     toggleCalendar() {
         this.showCalendar = !this.showCalendar;
+        if (this.showCalendar) {
+            this.screenReaderUpdateTrigger = !this.screenReaderUpdateTrigger;
+        }
     }
     parseInputString(value) {
         return value
@@ -272,15 +279,21 @@ export class CalendarDatepicker {
         return this.afSelectedDates;
     }
     render() {
-        return (h(Host, { key: '44ccd8d80d879801a47b66ac19cf9bcae4dd6087' }, h("div", { key: '2408157d090c63c33d802b5bf0b0afb6d0d15af4', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: '2f59a810b2e79132b9cf7ee51e9225f2199ab98d', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: 'ef39de9113fd8e357207fad515dd6ce43520e6f2', class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afValue: this.inputValue, afValidation: this.getShowError()
+        return (h(Host, { key: '8112725ba8c875e94cc556da8921a74390d9c31e' }, h("div", { key: '4c3df5468b902a4d26fea152ebaeaea0c9bf3dd9', class: Object.assign({ 'digi-calendar-datepicker': true }, this.cssModifiers), id: `${this.afId}-datepicker` }, h("div", { key: 'bcc79305b5bb0911e5f33f2ca8641ba1a3a5c588', class: "digi-calendar-datepicker__input-field" }, h("digi-form-input", { key: 'cfe6189b8a529db4bda725f483ec899fe66b87cc', class: 'digi-calendar-datepicker__input-component', afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afValue: this.inputValue, afValidation: this.getShowError()
                 ? FormInputValidation.ERROR
                 : FormInputValidation.NEUTRAL, afValidationText: this.getErrorText(), afId: this.afId, afAriaDescribedby: `${this.afId}--validation-message`, afRequired: this.afRequired, afRequiredText: this.afRequiredText, onAfOnChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseInput(evt);
-            } }, h("button", { key: '008b0dd4b6e9fa27256685cb8d5a070310d6fb06', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": "Visa eller d\u00F6lj kalender", "aria-expanded": this.showCalendar ? 'true' : 'false', "aria-haspopup": true, onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: '31923f874f4920e18e3b444bf75133c80674ad3b', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: '6b964e9aebddbf3e1023cc12ddeb5e8b3dd15854', class: "digi-calendar-datepicker__calendar" }, h("digi-calendar", { key: '3f7aa9676f1996188274bf4fee666ab63d72fc01', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, onAfOnDateSelectedChange: (evt) => {
+            } }, h("button", { key: '3126acc01f2f9aef0a02990ef22acbde7c3ed3c7', id: this.afId + '-button', class: "digi-calendar-datepicker__input-button", slot: "button", "aria-label": this.showCalendar
+                ? this.afCloseCalendarAriaLabel
+                : this.afOpenCalendarAriaLabel, "aria-controls": "calendar-popup", "aria-expanded": this.showCalendar ? 'true' : 'false', onClick: () => this.toggleCalendar(), type: "button" }, h("digi-icon-calendar-alt", { key: 'b48fc72cea6c3a94bd9821f2ec9416a4707e13d1', class: "digi-calendar-datepicker__button-icon", slot: "icon" })))), h("div", { key: 'd7c78a170d2d855cca3c001427d1c64ebab48fb3', class: "digi-calendar-datepicker__calendar", id: "calendar-popup" }, h("p", { key: '5651e12f6e3e06bfc879bb5c2aaf9920f9faf2e7', role: "alert", class: "digi-calendar-datepicker__sr-instructions" }, this.showCalendar
+            ? `${_t.calendar.screenReaderInstructions}${this.screenReaderUpdateTrigger ? '\u200B' : ''}`
+            : ''), h("digi-calendar", { key: 'a490205afebf723c0da4ff5d3f52ac76ec200ec8', afActive: this.showCalendar, afShowWeekNumber: this.afShowWeekNumber, afMultipleDates: this.afMultipleDates, afSelectedDates: this.getSelectedDates, afMinDate: this.afMinDate, afMaxDate: this.afMaxDate, "aria-hidden": !this.showCalendar, onAfOnDateSelectedChange: (evt) => {
                 evt.stopImmediatePropagation();
                 this.parseCalendar(evt);
-            } })))));
+            } })), this.afCloseOnSelect && !this.afMultipleDates && (h("div", { key: '9880a2b582c21823d935b4be5161e3301abdd214', class: "digi-calendar-datepicker__selected-date-alert", role: "alert" }, this.afSelectedDates.length > 0
+            ? `${_t.calendar.datepicker.selectedDate}: ${this.datesToInputString(this.afSelectedDates)}`
+            : '')))));
     }
     static get is() { return "digi-calendar-datepicker"; }
     static get encapsulation() { return "scoped"; }
@@ -340,7 +353,7 @@ export class CalendarDatepicker {
                 "setter": false,
                 "attribute": "af-label",
                 "reflect": false,
-                "defaultValue": "'Skriv in eller v\u00E4lj datum (\u00E5\u00E5\u00E5\u00E5-mm-dd)'"
+                "defaultValue": "_t.calendar.datepicker.label"
             },
             "afLabelDescription": {
                 "type": "string",
@@ -363,7 +376,53 @@ export class CalendarDatepicker {
                 "setter": false,
                 "attribute": "af-label-description",
                 "reflect": false,
-                "defaultValue": "'Exempel: 1992-06-26'"
+                "defaultValue": "_t.calendar.datepicker.description"
+            },
+            "afOpenCalendarAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Aria-label for the button that opens the calendar"
+                        }],
+                    "text": "Aria-label till knappen som \u00F6ppnar kalendern"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-open-calendar-aria-label",
+                "reflect": false,
+                "defaultValue": "_t.calendar.datepicker.openCalendarAriaLabel"
+            },
+            "afCloseCalendarAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Aria-label for the button that closes the calendar"
+                        }],
+                    "text": "Aria-label till knappen som st\u00E4nger kalendern"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-close-calendar-aria-label",
+                "reflect": false,
+                "defaultValue": "_t.calendar.datepicker.closeCalendarAriaLabel"
             },
             "afValidation": {
                 "type": "string",
@@ -460,7 +519,7 @@ export class CalendarDatepicker {
                 "setter": false,
                 "attribute": "af-validation-message",
                 "reflect": false,
-                "defaultValue": "'Eget meddelande'"
+                "defaultValue": "_t.calendar.datepicker.validationMessage"
             },
             "afValidationWrongFormat": {
                 "type": "string",
@@ -483,7 +542,7 @@ export class CalendarDatepicker {
                 "setter": false,
                 "attribute": "af-validation-wrong-format",
                 "reflect": false,
-                "defaultValue": "'Fel format'"
+                "defaultValue": "_t.calendar.datepicker.validationWrongFormat"
             },
             "afValidationDisabledDate": {
                 "type": "string",
@@ -506,7 +565,7 @@ export class CalendarDatepicker {
                 "setter": false,
                 "attribute": "af-validation-disabled-date",
                 "reflect": false,
-                "defaultValue": "'Ej valbart datum'"
+                "defaultValue": "_t.calendar.datepicker.validationDisabledDate"
             },
             "afRequired": {
                 "type": "boolean",

package/dist/collection/components/_calendar/week-view/calendar-week-view.js

@@ -110,7 +110,7 @@ export class CalendarWeekView {
                 format(new Date(lastDate), 'MMMM yyyy', { locale: svlocale });
     }
     render() {
-        return (h("div", { key: '11a5de578c2e1c023d36ec415903b0ef571b19f9', class: "digi-calendar-week-view" }, h("nav", { key: '7c46fb4d0da7662fbcdbfa99e20ef1ed1a8b550d', class: "digi-calendar-week-view__timepicker" }, h("div", { key: 'a9b2da0b8fba1e777bf21297d9513114a90c6f21', class: "digi-calendar-week-view__dates" }, h("div", { key: '2ec15c6ff7aead2bb916259f5206cbf92ef5ed46', class: "digi-calendar-week-view__flex" }, h("digi-typography", { key: 'b669579b1076c2574a1fe3eee28ea5b5d8b55e64' }, h(this.afHeadingLevel, { key: '8f7b78c5fde2ba093fc3de98b1cab9d9acd93fa2', role: "status", class: "digi-calendar-week-view__heading" }, h("span", { key: 'f915e9f139a38bf541f5e8bf5081cae8799aed1b', class: "digi-calendar-week-view__month" }, this.currentMonth), h("span", { key: '0f68b768c7ffb9f2eaa9e99313bcc64c87b1c1a3', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), h("ul", { key: '979c3538992f9d852ad70b570963fecc6cd0319f', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
+        return (h("div", { key: '967ccb9710018973a960ae36d52157ba85dacfed', class: "digi-calendar-week-view" }, h("nav", { key: '6a9137d8f8a8e652d26d099ae652cb76e5665b51', class: "digi-calendar-week-view__timepicker" }, h("div", { key: 'a2b8aaeaa93e391e65847b2ea8f9b455e86474f1', class: "digi-calendar-week-view__dates" }, h("div", { key: '0cc675c0cd67d042e5e27a38a6665ab30e516cea', class: "digi-calendar-week-view__flex" }, h("digi-typography", { key: 'd47f59955354cb435dc80895059c6e4fd6eefa8a' }, h(this.afHeadingLevel, { key: 'f01725e82afff23b8ae357b30af909b325d85279', role: "status", class: "digi-calendar-week-view__heading" }, h("span", { key: 'bbfab19eec8776e640ed235654c0fd960faf5722', class: "digi-calendar-week-view__month" }, this.currentMonth), h("span", { key: 'a3a52801083cd83351056d474e01df926d8b0117', class: "digi-calendar-week-view__week" }, ' ', "v.", this.currentWeek))), h("ul", { key: 'a3f3703318fa5400cd32ee5d3af896900a032acd', class: "digi-calendar-week-view__date-list" }, this.weekDays.map((dateItem) => {
             const date = format(new Date(dateItem), 'd', {
                 locale: svlocale
             });
@@ -130,15 +130,15 @@ export class CalendarWeekView {
                 } }, day), h("span", { class: "digi-calendar-week-view__date-button-date" }, date), h("span", { "aria-hidden": "true", class: {
                     'digi-calendar-week-view__date-button-circle': dateItem === this.todaysDate
                 } })))));
-        })))), h("digi-button", { key: '49b59c02b9eeaa1a1ff66970ce4fdd120014a1af', onClick: () => this.prevWeek(), class: {
+        })))), h("digi-button", { key: '43959210674014e4b04ed2cbc9e70732ee6846e5', onClick: () => this.prevWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--previous': true,
                 'digi-calendar-week-view__week-button--keep-left': this.currentWeek == getISOWeek(this.maxDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek > getISOWeek(this.minDate))
-            }, "af-variation": "secondary" }, h("digi-icon-chevron-left", { key: '8190530f8db9593040e854833e771593fbfddc6c', slot: "icon" }), this.prevWeekText), h("digi-button", { key: '755242f062c097aab1666ad90751dddbac1c02d7', onClick: () => this.nextWeek(), class: {
+            }, "af-variation": "secondary" }, h("digi-icon-chevron-left", { key: 'ea1b1dcf135bb712683cd3fdc7bf547213753010', slot: "icon" }), this.prevWeekText), h("digi-button", { key: 'fae29a610a67d1c14cab55f072deacaf4624eb7b', onClick: () => this.nextWeek(), class: {
                 'digi-calendar-week-view__week-button digi-calendar-week-view__week-button--next': true,
                 'digi-calendar-week-view__week-button--keep-right': this.currentWeek == getISOWeek(this.minDate),
                 'digi-calendar-week-view__week-button--hidden': !(this.currentWeek < getISOWeek(this.maxDate))
-            }, "af-variation": "secondary" }, h("digi-icon-chevron-right", { key: '9a4a59e7984faf4e7811697431111f6562e970f4', slot: "icon-secondary" }), this.nextWeekText)), h("div", { key: '32c838082370a55de6542fd08f51f0b83bb85ba1', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, h("digi-typography", { key: '014be3d1bf8872265167fbb9be34d377af8686dc' }, h("slot", { key: '3229e62f9d1b67cd0f1aa1cfe59dce65ccc707c6' })))));
+            }, "af-variation": "secondary" }, h("digi-icon-chevron-right", { key: 'b046daeb46e936e3df4a11c2d91a191d64d1da7e', slot: "icon-secondary" }), this.nextWeekText)), h("div", { key: 'be9ad09c6513830530d5ec8c8f748d16671c9a53', role: "status", "aria-live": "assertive", class: "digi-calendar-week-view__result", id: `${this.afId}-result` }, h("digi-typography", { key: '63520e0dafe2667eff3bc13dcd870022fd922a66' }, h("slot", { key: '90fc838123b2d492207c804405d9a7d3cc2f60e2' })))));
     }
     static get is() { return "digi-calendar-week-view"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_card/card/card.js

@@ -29,7 +29,7 @@ export class Card {
         };
     }
     render() {
-        return (h("digi-typography", { key: 'c3cc369b200f7d3e6ea29893c242e07f47805f0c' }, h("div", { key: 'a87f2ba87ebf5f07e4369e06f248866829392f22', class: Object.assign({ 'digi-card': true }, this.cssModifiers) }, h("div", { key: '20355f0e3594ac4502436ed05fc6757c4dfb5bc1', class: "digi-card__content" }, h("slot", { key: 'a83d0125fae8343621013ff740cc3f3dec8e6b43' })), this.hasFooter && (h("div", { key: '1448a9159741893d2b3f2dd7e37f40be94d1e3a0', class: "digi-card__footer" }, h("slot", { key: 'bae8e6b9474498ed1fc7ca1870c8884e613113d8', name: "footer" }))))));
+        return (h("digi-typography", { key: '019a9fb9ff7c896cc079c711f5ba0b3b6fb3d75f' }, h("div", { key: '18128c050e6a02b5465daae9956f40f6fff8e2b9', class: Object.assign({ 'digi-card': true }, this.cssModifiers) }, h("div", { key: '4b3f760746084b69d8895b9207dbae275ac46294', class: "digi-card__content" }, h("slot", { key: '8f665921dce35b606fd3769b077b8847c6b1aadc' })), this.hasFooter && (h("div", { key: '7862d924f7c279ab6ef0175a0030b43964b7e238', class: "digi-card__footer" }, h("slot", { key: '892ad516407da32ec89b5151565be99644909ed4', name: "footer" }))))));
     }
     static get is() { return "digi-card"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_chart/bar-chart/bar-chart.js

@@ -1399,7 +1399,7 @@ export class barChart {
                 heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}
 				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
         }
-        return (h(Host, { key: '1e65613b383c823e2612b4e3b66c2aab2b6a63ee', ref: (el) => (this._host = el) }, h("div", { key: '0722c740fe78699676bb98247d5aa9b8a2ac6ec4', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '7e318220350058798accc80bcac29764e460c854', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '37799980afd2cf93d1c924220b34a018c03d943b', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '0018a24d271ff038b42623f01b42d781538eeca1', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b52b57a35abd23e47f97ad8aadaf74847d77092c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'd644be20ea9cb15fbd8cf3308e452b9e993da833', slot: "icon" }), "Visa diagram"), h("div", { key: '8e396c518fdcf565d8295f67f9ee22b88c1aad94', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '6b95d5b67649fe88aee0fccd276d726a63490c41', class: "chartTooltip", id: this.afId }, h("div", { key: 'c1ee45d3d3e2949da0edb7f5ae7f5d824fec7149', class: "tooltipBody" }), h("digi-icon-x", { key: '34cb0be40388ae734b974201975e7ca347c34866', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: 'af236d72c75cf21e1549151c2ad8244d3ec64f8e', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '09ffd8c2a0278de23ec262ca110c629b9e6e3d01', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '510d6eb3e641d7ba0f763426a5d1bd055f1ae68f', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h(Host, { key: '2c8b9d940572234a7dc5c938daffafafceeff223', ref: (el) => (this._host = el) }, h("div", { key: 'e32aa796d9e4240a8dcd7545bfa7e7b3deb52d3b', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '11d5a8f58b850148e13a1dbac4765a8a16a683ca', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '821817bbf349c92b2b794aeb8fd51177415f2281', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '5e26dd566bb1130e56879a8bb5f0e24b9e2c5ce0', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'be035c0de80dc194a66a46774b99f92ecd91ab9e', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'b78afa29244cfdae706542359eefd801972927e4', slot: "icon" }), "Visa diagram"), h("div", { key: '3156cb49761e4f812d3ed76d0e8792ba2c26e4ca', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '86234ee60077f120884f7bed45bb11366008c7a4', class: "chartTooltip", id: this.afId }, h("div", { key: '48bdd7f13d96a5f78526a9b8737f88640c71f4c4', class: "tooltipBody" }), h("digi-icon-x", { key: '28b209567bbea81c35e321265522db6e8aa4583c', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: '8b3bd62b350068d9743ffb3c4f8bb7fc0c409c2b', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: 'c7f68d7d663d9437552a16cf4e1d63e774cf8319', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '164d06baf86db9a0447b65a225f5e3074c620740', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-bar-chart"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_chart/chart-line/chart-line.css

@@ -89,7 +89,7 @@
   padding-right: 5px;
   border-radius: 4px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: flex-start;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
   font-size: 14px;
@@ -134,10 +134,22 @@
   );
 }
 
+.tooltipHead {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+  flex-direction: row;
+}
+
 .tooltipBody {
   display: flex;
   flex-direction: column;
-  margin-right: 5px;
+  padding-right: 5px;
+  max-height: 100px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(245, 245, 245) transparent;
 }
 
 .topWrapper {