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

package/dist/cjs/{typography-variation.enum-d803f3a6.js → typography-variation.enum-c6bb12f2.js}

@@ -51,33 +51,6 @@ exports.DialogVariation = void 0;
     DialogVariation["SECONDARY"] = "secondary";
 })(exports.DialogVariation || (exports.DialogVariation = {}));
 
-exports.ExpandableAccordionHeaderLevel = void 0;
-(function (ExpandableAccordionHeaderLevel) {
-    ExpandableAccordionHeaderLevel["H1"] = "h1";
-    ExpandableAccordionHeaderLevel["H2"] = "h2";
-    ExpandableAccordionHeaderLevel["H3"] = "h3";
-    ExpandableAccordionHeaderLevel["H4"] = "h4";
-    ExpandableAccordionHeaderLevel["H5"] = "h5";
-    ExpandableAccordionHeaderLevel["H6"] = "h6";
-})(exports.ExpandableAccordionHeaderLevel || (exports.ExpandableAccordionHeaderLevel = {}));
-
-exports.ExpandableFaqItemHeadingLevel = void 0;
-(function (ExpandableFaqItemHeadingLevel) {
-    ExpandableFaqItemHeadingLevel["H1"] = "h1";
-    ExpandableFaqItemHeadingLevel["H2"] = "h2";
-    ExpandableFaqItemHeadingLevel["H3"] = "h3";
-    ExpandableFaqItemHeadingLevel["H4"] = "h4";
-    ExpandableFaqItemHeadingLevel["H5"] = "h5";
-    ExpandableFaqItemHeadingLevel["H6"] = "h6";
-})(exports.ExpandableFaqItemHeadingLevel || (exports.ExpandableFaqItemHeadingLevel = {}));
-
-exports.ExpandableFaqItemVariation = void 0;
-(function (ExpandableFaqItemVariation) {
-    ExpandableFaqItemVariation["PRIMARY"] = "primary";
-    ExpandableFaqItemVariation["SECONDARY"] = "secondary";
-    ExpandableFaqItemVariation["TERTIARY"] = "tertiary";
-})(exports.ExpandableFaqItemVariation || (exports.ExpandableFaqItemVariation = {}));
-
 exports.FooterVariation = void 0;
 (function (FooterVariation) {
     FooterVariation["LARGE"] = "large";
@@ -94,6 +67,42 @@ 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.FormFieldsetValidation = void 0;
+(function (FormFieldsetValidation) {
+    FormFieldsetValidation["SUCCESS"] = "success";
+    FormFieldsetValidation["ERROR"] = "error";
+    FormFieldsetValidation["WARNING"] = "warning";
+    FormFieldsetValidation["NEUTRAL"] = "neutral";
+})(exports.FormFieldsetValidation || (exports.FormFieldsetValidation = {}));
+
 exports.FormRadiobuttonLayout = void 0;
 (function (FormRadiobuttonLayout) {
     FormRadiobuttonLayout["INLINE"] = "inline";
@@ -141,6 +150,37 @@ 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.FormTextareaValidation = void 0;
+(function (FormTextareaValidation) {
+    FormTextareaValidation["SUCCESS"] = "success";
+    FormTextareaValidation["ERROR"] = "error";
+    FormTextareaValidation["WARNING"] = "warning";
+    FormTextareaValidation["NEUTRAL"] = "neutral";
+})(exports.FormTextareaValidation || (exports.FormTextareaValidation = {}));
+
+exports.FormTextareaVariation = void 0;
+(function (FormTextareaVariation) {
+    FormTextareaVariation["SMALL"] = "small";
+    FormTextareaVariation["MEDIUM"] = "medium";
+    FormTextareaVariation["LARGE"] = "large";
+    FormTextareaVariation["AUTO"] = "auto";
+})(exports.FormTextareaVariation || (exports.FormTextareaVariation = {}));
+
 exports.HeaderCenterContentWidth = void 0;
 (function (HeaderCenterContentWidth) {
     HeaderCenterContentWidth["DEFAULT"] = "none";
@@ -184,38 +224,6 @@ exports.InfoCardHeadingLevel = void 0;
     InfoCardHeadingLevel["H6"] = "h6";
 })(exports.InfoCardHeadingLevel || (exports.InfoCardHeadingLevel = {}));
 
-exports.LayoutBlockContainer = void 0;
-(function (LayoutBlockContainer) {
-    LayoutBlockContainer["STATIC"] = "static";
-    LayoutBlockContainer["FLUID"] = "fluid";
-    LayoutBlockContainer["NONE"] = "none";
-})(exports.LayoutBlockContainer || (exports.LayoutBlockContainer = {}));
-
-exports.LayoutContainerVariation = void 0;
-(function (LayoutContainerVariation) {
-    LayoutContainerVariation["STATIC"] = "static";
-    LayoutContainerVariation["FLUID"] = "fluid";
-    LayoutContainerVariation["NONE"] = "none";
-})(exports.LayoutContainerVariation || (exports.LayoutContainerVariation = {}));
-
-exports.LayoutContainerMaxWidth = void 0;
-(function (LayoutContainerMaxWidth) {
-    LayoutContainerMaxWidth["WIDTH_1200"] = "1200";
-    LayoutContainerMaxWidth["WIDTH_1400"] = "1400";
-})(exports.LayoutContainerMaxWidth || (exports.LayoutContainerMaxWidth = {}));
-
-exports.LogoColor = void 0;
-(function (LogoColor) {
-    LogoColor["PRIMARY"] = "primary";
-    LogoColor["SECONDARY"] = "secondary";
-})(exports.LogoColor || (exports.LogoColor = {}));
-
-exports.LogoVariation = void 0;
-(function (LogoVariation) {
-    LogoVariation["SMALL"] = "small";
-    LogoVariation["LARGE"] = "large";
-})(exports.LogoVariation || (exports.LogoVariation = {}));
-
 exports.NotificationAlertHeadingLevel = void 0;
 (function (NotificationAlertHeadingLevel) {
     NotificationAlertHeadingLevel["H1"] = "h1";
@@ -275,22 +283,6 @@ exports.FeedbackVariation = void 0;
     FeedbackVariation["SECONDARY"] = "secondary";
 })(exports.FeedbackVariation || (exports.FeedbackVariation = {}));
 
-exports.TypographyHeadingJumboLevel = void 0;
-(function (TypographyHeadingJumboLevel) {
-    TypographyHeadingJumboLevel["H1"] = "h1";
-    TypographyHeadingJumboLevel["H2"] = "h2";
-    TypographyHeadingJumboLevel["H3"] = "h3";
-    TypographyHeadingJumboLevel["H4"] = "h4";
-    TypographyHeadingJumboLevel["H5"] = "h5";
-    TypographyHeadingJumboLevel["H6"] = "h6";
-})(exports.TypographyHeadingJumboLevel || (exports.TypographyHeadingJumboLevel = {}));
-
-exports.TypographyHeadingJumboVariation = void 0;
-(function (TypographyHeadingJumboVariation) {
-    TypographyHeadingJumboVariation["PRIMARY"] = "primary";
-    TypographyHeadingJumboVariation["SECONDARY"] = "secondary";
-})(exports.TypographyHeadingJumboVariation || (exports.TypographyHeadingJumboVariation = {}));
-
 exports.TypographyVariation = void 0;
 (function (TypographyVariation) {
     TypographyVariation["SMALL"] = "small";

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

@@ -183,6 +183,9 @@ License: none (public domain)
   border: var(--digi--calendar--date--today--circle-border);
   border-radius: 50%;
 }
+:host .digi-calendar__date--today.digi-calendar__date--selected::after {
+  border-color: var(--digi--color--icon--secondary);
+}
 @media (any-hover: hover) {
   :host .digi-calendar__date:hover:not(.digi-calendar__date--not-selectable) {
     cursor: pointer;

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

@@ -10,14 +10,15 @@ import { _t } from "../../../text";
  */
 export class Calendar {
     constructor() {
+        var _a;
+        this.locale = ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.lang) || 'sv-SE';
         this.activeCalendar = [];
         this.months = [];
         this.selectedDates = [];
         this.focusedDate = undefined;
         this.dirty = false;
         this.afId = randomIdGenerator('digi-calendar');
-        this.afInitSelectedMonth = new Date().getMonth();
-        this.afInitSelectedDate = new Date();
+        this.afInitFocusDate = undefined;
         this.afShowWeekNumber = false;
         this.afSelectedDate = undefined;
         this.afSelectedDates = [];
@@ -28,12 +29,9 @@ export class Calendar {
         this.afYearSelect = false;
     }
     afSelectedDateChangeHandler() {
-        if (isValid(this.afSelectedDate)) {
-            this.selectedDates = [this.afSelectedDate];
-        }
-        else {
-            this.selectedDates = [];
-        }
+        this.afSelectedDates = isValid(this.afSelectedDate)
+            ? [this.afSelectedDate]
+            : [];
     }
     afSelectedDatesChangeHandler() {
         if (this.afSelectedDates.length > 0) {
@@ -41,10 +39,24 @@ export class Calendar {
                 const invalidDate = this.afSelectedDates.find((date) => !isValid(date));
                 if (invalidDate === undefined) {
                     this.selectedDates = this.afSelectedDates;
+                    if (this.afInitFocusDate && isValid(this.afInitFocusDate)) {
+                        this.focusedDate = this.afInitFocusDate;
+                    }
+                    else {
+                        this.focusedDate = new Date(this.afSelectedDates
+                            .slice()
+                            .sort((a, b) => a.getTime() - b.getTime())[0]);
+                    }
                 }
             }
             else if (isValid(this.afSelectedDates[0])) {
                 this.selectedDates = [this.afSelectedDates[0]];
+                if (this.afInitFocusDate && isValid(this.afInitFocusDate)) {
+                    this.focusedDate = this.afInitFocusDate;
+                }
+                else {
+                    this.focusedDate = new Date(this.afSelectedDates[0]);
+                }
             }
         }
         else {
@@ -172,13 +184,13 @@ export class Calendar {
     }
     getMonthName(monthNumber) {
         return new Date(1992, monthNumber, 1)
-            .toLocaleDateString('default', {
+            .toLocaleDateString(this.locale, {
             month: 'short'
         })
             .replace('.', '');
     }
     getFullMonthName(monthNumber) {
-        return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString('default', {
+        return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString(this.locale, {
             month: 'long',
             year: 'numeric'
         });
@@ -232,39 +244,28 @@ export class Calendar {
         return !this.isSameMonth(date, this.focusedDate);
     }
     subtractMonth() {
+        this.onDirty();
         const month = new Date(this.focusedDate);
         const currentDay = month.getDate();
         month.setMonth(month.getMonth() - 1, 1);
         const lastDayOfPrevMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
         month.setDate(Math.min(currentDay, lastDayOfPrevMonth));
-        this.afInitSelectedMonth = month.getMonth();
         this.focusedDate = month;
     }
     addMonth() {
+        this.onDirty();
         const month = new Date(this.focusedDate);
         const currentDay = month.getDate();
         month.setMonth(month.getMonth() + 1, 1);
         const lastDayOfNextMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
         month.setDate(Math.min(currentDay, lastDayOfNextMonth));
-        this.afInitSelectedMonth = month.getMonth();
         this.focusedDate = month;
     }
     getCurrent(date) {
         return this.isSameDate(date, new Date()) ? 'date' : null;
     }
     setTabIndex(date) {
-        if (this.dirty) {
-            return this.isSameDate(date, this.focusedDate) ? 0 : -1;
-        }
-        else {
-            return this.isSameMonth(date, new Date())
-                ? this.isSameDate(date, new Date()) && !this.isInAnotherMonth(date)
-                    ? 0
-                    : -1
-                : this.isSameMonth(date, this.focusedDate) && date.getDate() === 1
-                    ? 0
-                    : -1;
-        }
+        return this.isFocused(date) ? 0 : -1;
     }
     navigateHandler(e, daysToAdd) {
         !!e.detail && e.detail.preventDefault();
@@ -275,7 +276,6 @@ export class Calendar {
         const date = new Date(e.detail.target.dataset.date);
         const newDate = new Date(date.setDate(date.getDate() + daysToAdd));
         this.focusedDate = newDate;
-        this.afInitSelectedMonth = this.focusedDate.getMonth();
         this.resetFocus();
     }
     resetFocus() {
@@ -311,15 +311,16 @@ export class Calendar {
             day: 'numeric'
         });
     }
-    setFocused(date) {
+    isFocused(date) {
         if (this.dirty) {
             return this.isSameDate(date, this.focusedDate);
         }
-        else {
-            return this.isSameMonth(date, new Date())
-                ? this.isSameDate(date, new Date()) && !this.isInAnotherMonth(date)
-                : this.isSameMonth(date, this.focusedDate) && date.getDate() === 1;
+        if (this.afInitFocusDate) {
+            return this.isSameDate(date, this.afInitFocusDate);
         }
+        return this.isSameMonth(date, new Date())
+            ? this.isSameDate(date, new Date())
+            : this.isSameMonth(date, this.focusedDate) && date.getDate() === 1;
     }
     ariaPressed(date) {
         return this.selectedDates.length > 0 &&
@@ -328,20 +329,20 @@ export class Calendar {
             : 'false';
     }
     selectMonth(evt) {
+        this.onDirty();
         const tempDate = new Date(this.focusedDate);
         const selectedMonth = parseInt(evt.target.value, 10);
         const currentDay = tempDate.getDate();
         tempDate.setMonth(selectedMonth, 1);
         const lastDayOfSelectedMonth = new Date(tempDate.getFullYear(), selectedMonth + 1, 0).getDate();
         tempDate.setDate(Math.min(currentDay, lastDayOfSelectedMonth));
-        this.afInitSelectedMonth = selectedMonth;
         this.focusedDate = tempDate;
         this.drawCalendar(this.focusedDate);
     }
     selectYear(evt) {
+        this.onDirty();
         const tempDate = this.focusedDate;
         tempDate.setFullYear(evt.target.value);
-        this.afInitSelectedDate = evt.target.value;
         this.focusedDate = tempDate;
         this.drawCalendar(this.focusedDate);
     }
@@ -364,16 +365,27 @@ export class Calendar {
         return allYears;
     }
     componentWillLoad() {
-        if (this.afInitSelectedDate) {
-            this.afInitSelectedMonth = this.afInitSelectedDate.getMonth();
-            this.focusedDate = this.afInitSelectedDate;
-            this.drawCalendar(this.afInitSelectedDate);
+        var _a;
+        if (isValid(this.afSelectedDate)) {
+            this.selectedDates = [this.afSelectedDate];
+        }
+        else if (((_a = this.afSelectedDates) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            const valid = this.afSelectedDates.filter((d) => isValid(d));
+            if (valid.length > 0)
+                this.selectedDates = valid;
+        }
+        if (this.afInitFocusDate && isValid(this.afInitFocusDate)) {
+            this.focusedDate = this.afInitFocusDate;
+        }
+        else if (this.selectedDates.length > 0) {
+            this.focusedDate = this.selectedDates
+                .slice()
+                .sort((a, b) => a.getTime() - b.getTime())[0];
         }
         else {
-            const startSelectedMonth = new Date(new Date().getFullYear(), this.afInitSelectedMonth);
-            this.focusedDate = startSelectedMonth;
-            this.drawCalendar(startSelectedMonth);
+            this.focusedDate = new Date();
         }
+        this.drawCalendar(this.focusedDate);
     }
     componentWillUpdate() {
         this.drawCalendar(this.focusedDate);
@@ -390,24 +402,24 @@ export class Calendar {
         return {
             '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--focused': this.isFocused(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: 'f2d44d7100e9aec3a91c56663360624f83745c0f', class: {
+        return (h("div", { key: 'a65aa1b63553ff82c432a81fa9fd9821b88a39ab', class: {
                 'digi-calendar': true,
                 'digi-calendar--hide': !this.afActive
-            }, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: 'fbc3332a363201be4ece13ce849fa10ab324ac13', class: "digi-calendar__header" }, h("div", { key: '88de6a25891a17617d6d59cc79ff40a16c1f8467', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: 'bf76a067c841709388f5d8d9dc7ce572f370ca49', afLabel: "M\u00E5nad", "af-variation": "small", afValue: this.focusedDate.getMonth().toString(), onAfOnSelect: (evt) => {
+            }, id: `${this.afId}-calendar` }, this.afYearSelect && (h("div", { key: '9cdea2a354a094a7dbe68bc7dd796143ed21acb6', class: "digi-calendar__header" }, h("div", { key: '3731070e6c432b2bed6985034db41b141a27214e', class: "digi-calendar__header--year-select" }, h("digi-form-select", { key: '06e3d06b3ef6d7ad262f9eeb927a12167ca8a48b', 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: '8f822faced5e7dff2aa72a0ce678ea1013d9e299', afLabel: "\u00C5r", "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
+        })), h("digi-form-select", { key: '60bde04287db50b5d887ddcb31839f1fe159b09a', afLabel: "\u00C5r", "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
                 this.selectYear(evt);
-            } }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: 'f51013760c858eb00656e8596fb04adb619cc0eb', class: "digi-calendar__header" }, h("div", { key: 'a37f3fd65b74345d4c8bfeaa64185a0ba046317d', class: "digi-calendar__header--month-step" }, h("button", { key: 'da8f4803fc250194a567bcc7df6582adb35f8510', 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: '6019efab7ae1dc1fa643459d7c2b5feb977cf6aa', slot: "icon", "aria-hidden": "true" }), h("span", { key: 'f5e14ed6c5e6cbf31bceeed46bf78454a30e76d5', class: "digi-calendar__month-select-name" }, this.getMonthName(this.afInitSelectedMonth - 1))), h("div", { key: '5426dea9943af11f1e537318b44450c4504f63a4', class: "digi-calendar__month" }, this.getFullMonthName(this.afInitSelectedMonth)), h("button", { key: '8c836f8ed0b7027569fdb9b2fec5d295d0fc417e', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.afInitSelectedMonth + 1) +
-                ', nästa månad', onClick: () => this.addMonth() }, h("span", { key: '9403efa5fa67432f7f23f885d8f99ebc54473516', class: "digi-calendar__month-select-name" }, this.getMonthName(this.afInitSelectedMonth + 1)), h("digi-icon-chevron-right", { key: '02eafcde2c6327a23e8ffe82682430af43eb4d02', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: '233fc35cb48bf86f84fb8c781a5bdf1e53c153c5', onAfOnDown: (e) => this.navigateHandler(e, 7), onAfOnUp: (e) => this.navigateHandler(e, -7), onAfOnLeft: (e) => this.navigateHandler(e, -1), onAfOnRight: (e) => this.navigateHandler(e, 1) }, h("table", { key: 'ea2e505e70411a3d07119130b0788dafbbbeef07', role: "grid", class: "digi-calendar__table" }, h("thead", { key: 'eace14b22601d0f85cf6f8c276716491140389fb' }, h("tr", { key: 'f6678cdfa52220c5e19729fc7bc567ba8c5e06c6', role: "row" }, this.afShowWeekNumber && (h("th", { key: '7fa670bd34fd0186c8f154ed6cac0481c30b90cd', 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: '7ecdf08d9a497dfe74f7e95b3d89566ea8789489', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
+            } }, this.allSelectableYears().map((year) => (h("option", { value: year.toString() }, year))))))), !this.afYearSelect && (h("div", { key: '75b68570a03ee6f921a4b36f3fa08d6c7b52c277', class: "digi-calendar__header" }, h("div", { key: 'c4a4f28576b93368e1eca7a0fab5f88866b98cf7', class: "digi-calendar__header--month-step" }, h("button", { key: '69058f8bd1eff3d2e54a6436c36e5c4b8441422e', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() - 1) +
+                ', föregående månad', onClick: () => this.subtractMonth() }, h("digi-icon-chevron-left", { key: 'af76697caee12f4f88920cd0fdb869b02f2b9ce5', slot: "icon", "aria-hidden": "true" }), h("span", { key: '6a0692868882f344f0a32f9d73c0c0a0ddd2b826', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() - 1))), h("div", { key: '9224acc84fc325ff9d15dbfc8a9dd6592f11e9f8', class: "digi-calendar__month" }, this.getFullMonthName(this.focusedDate.getMonth())), h("button", { key: '15346caa9359c8eed3c14315b7fd862ed4786bf6', class: "digi-calendar__month-select-button", type: "button", "aria-label": this.getFullMonthName(this.focusedDate.getMonth() + 1) +
+                ', nästa månad', onClick: () => this.addMonth() }, h("span", { key: '69046c2421fc47d7e840ce79a30ea201846872b1', class: "digi-calendar__month-select-name" }, this.getMonthName(this.focusedDate.getMonth() + 1)), h("digi-icon-chevron-right", { key: '0c08338d76c0137d4a001cef22d2eff8d8b347ea', slot: "icon", "aria-hidden": "true" }))))), h("digi-util-keydown-handler", { key: 'f49051c6fe7d5f9aa922988a681c6fc6ed981ff8', onAfOnDown: (e) => this.navigateHandler(e, 7), onAfOnUp: (e) => this.navigateHandler(e, -7), onAfOnLeft: (e) => this.navigateHandler(e, -1), onAfOnRight: (e) => this.navigateHandler(e, 1) }, h("table", { key: 'e1b09f2fb0c93c46804dfce34ac2e9e367a9d79d', role: "grid", class: "digi-calendar__table" }, h("thead", { key: 'bc8915a5cbf3093cab17fb2778f892e1fd099d9a' }, h("tr", { key: '1b72c4136c864d3af56b1ab9db8b2963a7b0fbca', role: "row" }, this.afShowWeekNumber && (h("th", { key: 'ab422d5c5e5a23b9debdb9225a53430d4f8ec302', 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: 'af2273dae429b8d3d67f5df853d49f6508fe8f41', ref: (el) => (this._tbody = el) }, this.activeCalendar.map((week) => {
             return (h("tr", null, week.map((day, i) => {
                 if (this.afShowWeekNumber && i === 0) {
                     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));
@@ -422,7 +434,7 @@ export class Calendar {
                             : null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
                 }
             })));
-        })))), h("slot", { key: 'ed2cf3c305f6db73a00e838beb786fc088045634', name: "calendar-footer" })));
+        })))), h("slot", { key: '081dffb3256ce8febd43fc0842bed7bee26cd228', name: "calendar-footer" })));
     }
     static get is() { return "digi-calendar"; }
     static get encapsulation() { return "scoped"; }
@@ -451,9 +463,9 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Prefix for all id attributes inside the component. Example: 'my-cool-id' generates 'my-cool-id-calendar' and so on. Defaults to random string."
+                            "text": "Prefix for the component's 'id' attribute. Example: 'my-cool-id' generates 'my-cool-id-calendar'. Defaults to random string."
                         }],
-                    "text": "Prefix f\u00F6r komponentens alla olika interna 'id'-attribut p\u00E5 kalendern etc. Ex. 'my-cool-id' genererar 'my-cool-id-calendar' osv. Ges inget v\u00E4rde genereras ett slumpm\u00E4ssigt."
+                    "text": "Prefix f\u00F6r komponentens 'id'-attribut. Ex. 'my-cool-id' genererar 'my-cool-id-calendar'. Ges inget v\u00E4rde genereras ett slumpm\u00E4ssigt."
                 },
                 "getter": false,
                 "setter": false,
@@ -461,30 +473,7 @@ export class Calendar {
                 "reflect": false,
                 "defaultValue": "randomIdGenerator('digi-calendar')"
             },
-            "afInitSelectedMonth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "en",
-                            "text": "Selected month to display from start. Defaults to the month of todays month. (Januray = 0, December = 11)"
-                        }],
-                    "text": "Vald m\u00E5nad att visa fr\u00E5n start. F\u00F6rvalt \u00E4r den m\u00E5nad som dagens datum har. (Januari = 0, December = 11)"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "af-init-selected-month",
-                "reflect": false,
-                "defaultValue": "new Date().getMonth()"
-            },
-            "afInitSelectedDate": {
+            "afInitFocusDate": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -502,13 +491,12 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Selected month and year to display from start. Defaults to todays month and year."
+                            "text": "Controls which month is shown from start, and which date button is the entry point for keyboard navigation. If not provided, selected date, today's date or the first day of the month is used."
                         }],
-                    "text": "Valt m\u00E5ndad och \u00E5r fr\u00E5n start. F\u00F6rvalt \u00E4r dagens m\u00E5nad och \u00E5r."
+                    "text": "Styr vilken m\u00E5nad som visas fr\u00E5n start, samt vilken datumknapp som \u00E4r ing\u00E5ngspunkt f\u00F6r tangentbordsnavigering. Om inte angiven anv\u00E4nds valt datum, dagens datum eller m\u00E5nadens f\u00F6rsta dag."
                 },
                 "getter": false,
-                "setter": false,
-                "defaultValue": "new Date()"
+                "setter": false
             },
             "afShowWeekNumber": {
                 "type": "boolean",
@@ -597,9 +585,9 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Toggle calendar hide/show. Defaults to true"
+                            "text": "Toggle calendar hide/show."
                         }],
-                    "text": "Visar d\u00F6ljer kalendern. Visas som f\u00F6rvalt"
+                    "text": "Visar eller d\u00F6ljer kalendern."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -736,30 +736,29 @@ body {
   --digi--datepicker--calendar--show-week--max-width: 23.375rem;
   --digi--datepicker--calendar-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);
   --digi--datepicker--calendar--background-color: var(--digi--color--background--interactive--default--secondary);
-  --digi--datepicker--input-icon--width: 1.125rem;
-  --digi--datepicker--input-icon--horizontal-padding: 1.25rem;
+  --digi--datepicker--input-icon--width: 0.875rem;
+  --digi--datepicker--input-icon--horizontal-padding: 0.75rem;
   --digi--datepicker--input-icon--vertical-padding: var(--digi--global--spacing--smallest-2);
   --digi--datepicker--input--inline-start: var(--digi--gutter--medium);
   --digi--datepicker--input--inline-end: calc(var(--digi--datepicker--input-icon--width) + var(--digi--datepicker--input-icon--horizontal-padding) * 2);
   box-sizing: content-box;
 }
+:host .digi-calendar-datepicker {
+  position: relative;
+}
 :host .digi-calendar-datepicker__input-field {
   position: relative;
   max-width: var(--digi--datepicker--max-width);
 }
 :host .digi-calendar-datepicker__input-field .digi-calendar-datepicker__inactive {
-  --digi--form-input--background--empty: var(
-    --digi--datepicker--input--inactive-background
-  );
+  --digi--form-input--background--empty: var(--digi--datepicker--input--inactive-background);
 }
 :host .digi-calendar-datepicker__input-field .digi-calendar-datepicker__input-button {
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  right: 0px;
-  background: none;
+  background: var(--digi--color--background--primary);
+  height: var(--digi--form-input--height--medium);
   color: inherit;
-  border: none;
+  border: 1px solid var(--digi--color--border--interactive--default--on-input);
+  border-left: none;
   padding: 0;
   font: inherit;
   outline: inherit;
@@ -770,11 +769,17 @@ body {
   width: var(--digi--datepicker--input-icon--width);
   padding: var(--digi--datepicker--input-icon--vertical-padding) var(--digi--datepicker--input-icon--horizontal-padding);
 }
+:host .digi-calendar-datepicker__input-field .digi-calendar-datepicker__input-button svg {
+  color: var(--digi--color--icon--brand-primary);
+}
 :host .digi-calendar-datepicker__input-field .digi-calendar-datepicker__input-button:focus-visible {
   outline: 2px solid black;
   outline-offset: 2px;
   box-shadow: 0px 0px 0px 5px white;
 }
+:host .digi-calendar-datepicker__input-field .digi-calendar-datepicker__input-button:hover {
+  background: var(--digi--color--background--interactive--hover--secondary);
+}
 :host .digi-calendar-datepicker__calendar {
   max-width: var(--digi--datepicker--calendar--max-width);
   height: 0px;
@@ -785,18 +790,16 @@ body {
 :host .digi-calendar-datepicker__show-week-numbers .digi-calendar-datepicker__calendar {
   max-width: var(--digi--datepicker--calendar--show-week--max-width);
 }
-:host .digi-calendar-datepicker__show-error .digi-calendar-datepicker__calendar {
-  margin-top: var(--digi--gutter--medium);
-}
 :host .digi-calendar-datepicker__show-calendar .digi-calendar-datepicker__calendar {
   height: auto;
   background-color: var(--digi--datepicker--calendar--background-color);
   box-shadow: var(--digi--datepicker--calendar-shadow);
   position: absolute;
+  top: var(--digi--datepicker--calendar--popup-top);
+  left: 0;
 }
 :host .digi-calendar-datepicker__input-component {
-  --digi--form-input--padding: 0 var(--digi--datepicker--input--inline-end)
-    0 var(--digi--datepicker--input--inline-start);
+  --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;