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

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

@@ -51,6 +51,13 @@ exports.DialogVariation = void 0;
     DialogVariation["SECONDARY"] = "secondary";
 })(exports.DialogVariation || (exports.DialogVariation = {}));
 
+exports.FooterCardVariation = void 0;
+(function (FooterCardVariation) {
+    FooterCardVariation["NONE"] = "none";
+    FooterCardVariation["ICON"] = "icon";
+    FooterCardVariation["BORDER"] = "border";
+})(exports.FooterCardVariation || (exports.FooterCardVariation = {}));
+
 exports.FooterVariation = void 0;
 (function (FooterVariation) {
     FooterVariation["LARGE"] = "large";
@@ -67,59 +74,6 @@ 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";
-    FormRadiobuttonLayout["BLOCK"] = "block";
-})(exports.FormRadiobuttonLayout || (exports.FormRadiobuttonLayout = {}));
-
-exports.FormRadiobuttonValidation = void 0;
-(function (FormRadiobuttonValidation) {
-    FormRadiobuttonValidation["ERROR"] = "error";
-})(exports.FormRadiobuttonValidation || (exports.FormRadiobuttonValidation = {}));
-
-exports.FormRadiobuttonVariation = void 0;
-(function (FormRadiobuttonVariation) {
-    FormRadiobuttonVariation["PRIMARY"] = "primary";
-    FormRadiobuttonVariation["SECONDARY"] = "secondary";
-})(exports.FormRadiobuttonVariation || (exports.FormRadiobuttonVariation = {}));
-
 exports.FormReceiptHeadingLevel = void 0;
 (function (FormReceiptHeadingLevel) {
     FormReceiptHeadingLevel["H1"] = "h1";
@@ -150,37 +104,6 @@ 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";
@@ -188,6 +111,13 @@ exports.HeaderCenterContentWidth = void 0;
     HeaderCenterContentWidth["WIDTH_1400"] = "1400";
 })(exports.HeaderCenterContentWidth || (exports.HeaderCenterContentWidth = {}));
 
+exports.TitleLogoVariation = void 0;
+(function (TitleLogoVariation) {
+    TitleLogoVariation["MOBILE"] = "mobile";
+    TitleLogoVariation["ONE_ROW"] = "one-row";
+    TitleLogoVariation["TWO_ROWS"] = "two-rows";
+})(exports.TitleLogoVariation || (exports.TitleLogoVariation = {}));
+
 exports.InfoCardMultiContainerHeadingLevel = void 0;
 (function (InfoCardMultiContainerHeadingLevel) {
     InfoCardMultiContainerHeadingLevel["H1"] = "h1";
@@ -224,6 +154,38 @@ 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";
@@ -283,6 +245,22 @@ 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/collection-manifest.json

@@ -243,6 +243,7 @@
     "components/_loader/loader-skeleton/loader-skeleton.js",
     "components/_loader/loader-spinner/loader-spinner.js",
     "components/_logo/logo/logo.js",
+    "components/_logo/title-logo/title-logo.js",
     "components/_media/media-figure/media-figure.js",
     "components/_media/media-image/media-image.js",
     "components/_navigation/navigation-breadcrumbs/navigation-breadcrumbs.js",

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

@@ -183,9 +183,6 @@ 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,15 +10,14 @@ 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.afInitFocusDate = undefined;
+        this.afInitSelectedMonth = new Date().getMonth();
+        this.afInitSelectedDate = new Date();
         this.afShowWeekNumber = false;
         this.afSelectedDate = undefined;
         this.afSelectedDates = [];
@@ -29,9 +28,12 @@ export class Calendar {
         this.afYearSelect = false;
     }
     afSelectedDateChangeHandler() {
-        this.afSelectedDates = isValid(this.afSelectedDate)
-            ? [this.afSelectedDate]
-            : [];
+        if (isValid(this.afSelectedDate)) {
+            this.selectedDates = [this.afSelectedDate];
+        }
+        else {
+            this.selectedDates = [];
+        }
     }
     afSelectedDatesChangeHandler() {
         if (this.afSelectedDates.length > 0) {
@@ -39,24 +41,10 @@ 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 {
@@ -184,13 +172,13 @@ export class Calendar {
     }
     getMonthName(monthNumber) {
         return new Date(1992, monthNumber, 1)
-            .toLocaleDateString(this.locale, {
+            .toLocaleDateString('default', {
             month: 'short'
         })
             .replace('.', '');
     }
     getFullMonthName(monthNumber) {
-        return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString(this.locale, {
+        return new Date(this.focusedDate.getFullYear(), monthNumber, 1).toLocaleDateString('default', {
             month: 'long',
             year: 'numeric'
         });
@@ -244,28 +232,39 @@ 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) {
-        return this.isFocused(date) ? 0 : -1;
+        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;
+        }
     }
     navigateHandler(e, daysToAdd) {
         !!e.detail && e.detail.preventDefault();
@@ -276,6 +275,7 @@ 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,16 +311,15 @@ export class Calendar {
             day: 'numeric'
         });
     }
-    isFocused(date) {
+    setFocused(date) {
         if (this.dirty) {
             return this.isSameDate(date, this.focusedDate);
         }
-        if (this.afInitFocusDate) {
-            return this.isSameDate(date, this.afInitFocusDate);
+        else {
+            return this.isSameMonth(date, new Date())
+                ? this.isSameDate(date, new Date()) && !this.isInAnotherMonth(date)
+                : this.isSameMonth(date, this.focusedDate) && date.getDate() === 1;
         }
-        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 &&
@@ -329,20 +328,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);
     }
@@ -365,27 +364,16 @@ export class Calendar {
         return allYears;
     }
     componentWillLoad() {
-        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];
+        if (this.afInitSelectedDate) {
+            this.afInitSelectedMonth = this.afInitSelectedDate.getMonth();
+            this.focusedDate = this.afInitSelectedDate;
+            this.drawCalendar(this.afInitSelectedDate);
         }
         else {
-            this.focusedDate = new Date();
+            const startSelectedMonth = new Date(new Date().getFullYear(), this.afInitSelectedMonth);
+            this.focusedDate = startSelectedMonth;
+            this.drawCalendar(startSelectedMonth);
         }
-        this.drawCalendar(this.focusedDate);
     }
     componentWillUpdate() {
         this.drawCalendar(this.focusedDate);
@@ -402,24 +390,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.isFocused(date),
+            'digi-calendar__date--focused': this.setFocused(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: 'a65aa1b63553ff82c432a81fa9fd9821b88a39ab', class: {
+        return (h("div", { key: 'f2d44d7100e9aec3a91c56663360624f83745c0f', class: {
                 'digi-calendar': true,
                 'digi-calendar--hide': !this.afActive
-            }, 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) => {
+            }, 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) => {
                 this.selectMonth(evt);
             } }, this.months.map((month, index) => {
             return h("option", { value: index }, month);
-        })), h("digi-form-select", { key: '60bde04287db50b5d887ddcb31839f1fe159b09a', afLabel: "\u00C5r", "af-variation": "small", afValue: this.focusedDate.getFullYear().toString(), onAfOnSelect: (evt) => {
+        })), h("digi-form-select", { key: '8f822faced5e7dff2aa72a0ce678ea1013d9e299', 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: '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) => {
+            } }, 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) => {
             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));
@@ -434,7 +422,7 @@ export class Calendar {
                             : null }, h("span", { "aria-hidden": "true" }, day.getDate()))));
                 }
             })));
-        })))), h("slot", { key: '081dffb3256ce8febd43fc0842bed7bee26cd228', name: "calendar-footer" })));
+        })))), h("slot", { key: 'ed2cf3c305f6db73a00e838beb786fc088045634', name: "calendar-footer" })));
     }
     static get is() { return "digi-calendar"; }
     static get encapsulation() { return "scoped"; }
@@ -463,9 +451,9 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Prefix for the component's 'id' attribute. Example: 'my-cool-id' generates 'my-cool-id-calendar'. Defaults to random string."
+                            "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 f\u00F6r komponentens 'id'-attribut. Ex. 'my-cool-id' genererar 'my-cool-id-calendar'. Ges inget v\u00E4rde genereras ett slumpm\u00E4ssigt."
+                    "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -473,7 +461,30 @@ export class Calendar {
                 "reflect": false,
                 "defaultValue": "randomIdGenerator('digi-calendar')"
             },
-            "afInitFocusDate": {
+            "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": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -491,12 +502,13 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "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": "Selected month and year to display from start. Defaults to todays month and year."
                         }],
-                    "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."
+                    "text": "Valt m\u00E5ndad och \u00E5r fr\u00E5n start. F\u00F6rvalt \u00E4r dagens m\u00E5nad och \u00E5r."
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "new Date()"
             },
             "afShowWeekNumber": {
                 "type": "boolean",
@@ -585,9 +597,9 @@ export class Calendar {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Toggle calendar hide/show."
+                            "text": "Toggle calendar hide/show. Defaults to true"
                         }],
-                    "text": "Visar eller d\u00F6ljer kalendern."
+                    "text": "Visar d\u00F6ljer kalendern. Visas som f\u00F6rvalt"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -736,29 +736,30 @@ 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: 0.875rem;
-  --digi--datepicker--input-icon--horizontal-padding: 0.75rem;
+  --digi--datepicker--input-icon--width: 1.125rem;
+  --digi--datepicker--input-icon--horizontal-padding: 1.25rem;
   --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 {
-  background: var(--digi--color--background--primary);
-  height: var(--digi--form-input--height--medium);
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  background: none;
   color: inherit;
-  border: 1px solid var(--digi--color--border--interactive--default--on-input);
-  border-left: none;
+  border: none;
   padding: 0;
   font: inherit;
   outline: inherit;
@@ -769,17 +770,11 @@ 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;
@@ -790,16 +785,18 @@ 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;