fds-vue-core 6.2.11 → 7.0.1

package/dist/fds-vue-core.cjs.js

@@ -36,6 +36,84 @@ function useHasSlot(name = "default") {
     return vnodes.some((vnode) => vnode.type !== vue.Comment);
   });
 }
+const en = {
+  "FdsBlockAlert.close": "Close",
+  "FdsBlockAlert.showLess": "Show less",
+  "FdsBlockAlert.showMore": "Show more",
+  "FdsInput.clearInput": "Clear input",
+  "FdsInput.hidePassword": "Hide",
+  "FdsInput.openDatePicker": "Open date picker",
+  "FdsInput.showPassword": "Show",
+  "FdsListHeading.loading": "Loading...",
+  "FdsListHeading.separator": "of",
+  "FdsModal.closeModal": "Close modal window",
+  "FdsPagination.currentPage": "Current page",
+  "FdsPagination.firstPage": "Go to first page",
+  "FdsPagination.lastPage": "Go to last page",
+  "FdsPagination.nextPage": "Go to next page",
+  "FdsPagination.previousPage": "Go to previous page",
+  "FdsSearchSelectPro.loadingMore": "Loading more...",
+  "FdsSearchSelectPro.showMore": "Show more",
+  "FdsSearchSelectPro.unspecified": "Unspecified",
+  "FdsWeekCalendar.nextWeek": "Next week",
+  "FdsWeekCalendar.previousWeek": "Previous week",
+  "FdsWeekCalendar.today": "Today",
+  "FdsWeekCalendar.week": "week"
+};
+const sv = {
+  "FdsBlockAlert.close": "Stäng",
+  "FdsBlockAlert.showLess": "Visa mindre",
+  "FdsBlockAlert.showMore": "Visa mer",
+  "FdsInput.clearInput": "Rensa input",
+  "FdsInput.hidePassword": "Dölj",
+  "FdsInput.openDatePicker": "Öppna datumväljare",
+  "FdsInput.showPassword": "Visa",
+  "FdsListHeading.loading": "Laddar...",
+  "FdsListHeading.separator": "av",
+  "FdsModal.closeModal": "Stäng dialogruta",
+  "FdsPagination.currentPage": "Aktuell sida",
+  "FdsPagination.firstPage": "Gå till första sidan",
+  "FdsPagination.lastPage": "Gå till sista sidan",
+  "FdsPagination.nextPage": "Gå till nästa sida",
+  "FdsPagination.previousPage": "Gå till föregående sida",
+  "FdsSearchSelectPro.loadingMore": "Hämtar fler...",
+  "FdsSearchSelectPro.showMore": "Visa fler",
+  "FdsSearchSelectPro.unspecified": "Ospecificerat",
+  "FdsWeekCalendar.nextWeek": "Nästa vecka",
+  "FdsWeekCalendar.previousWeek": "Föregående vecka",
+  "FdsWeekCalendar.today": "Idag",
+  "FdsWeekCalendar.week": "vecka"
+};
+const FDS_VUE_CORE_I18N_KEY = /* @__PURE__ */ Symbol("fds-vue-core:i18n");
+const translations = {
+  en,
+  sv
+};
+const useFdsI18n = () => {
+  const i18n = vue.inject(FDS_VUE_CORE_I18N_KEY, void 0);
+  const locale = vue.computed(() => {
+    const locale2 = i18n?.global?.locale ?? i18n?.locale;
+    if (typeof locale2 === "string") return locale2;
+    if (locale2 && typeof locale2 === "object" && "value" in locale2 && typeof locale2.value === "string") {
+      return locale2.value;
+    }
+    return "sv-SE";
+  });
+  const activeLanguage = vue.computed(() => locale.value.toLowerCase().split("-")[0]);
+  const dictionary = vue.computed(() => {
+    const currentDictionary = translations[activeLanguage.value];
+    return currentDictionary ?? translations.sv;
+  });
+  const t = (key) => {
+    const value = dictionary.value[key];
+    return typeof value === "string" ? value : "";
+  };
+  return {
+    i18n,
+    locale,
+    t
+  };
+};
 const icons = {
   addCircle: () => `
     <svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
@@ -654,7 +732,6 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     collapsable: { type: Boolean, default: false },
     expanded: { type: Boolean, default: false },
     heading: { default: void 0 },
-    locale: { default: "sv" },
     icon: {},
     dataTestid: { default: void 0 }
   },
@@ -662,12 +739,13 @@ const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const { id } = useAttrsWithDefaults(props);
+    const { t } = useFdsI18n();
     const emit = __emit;
     const isExpanded = vue.ref(props.expanded);
     const isVisible = vue.ref(props.visible);
-    const expandLabel = vue.computed(() => props.locale === "sv" ? "Visa mer" : "Show more");
-    const collapseLabel = vue.computed(() => props.locale === "sv" ? "Visa mindre" : "Show less");
-    const closeLabel = vue.computed(() => props.locale === "sv" ? "Stäng" : "Close");
+    const expandLabel = vue.computed(() => t("FdsBlockAlert.showMore"));
+    const collapseLabel = vue.computed(() => t("FdsBlockAlert.showLess"));
+    const closeLabel = vue.computed(() => t("FdsBlockAlert.close"));
     const hasSlot = useHasSlot();
     vue.watch(
       () => props.visible,
@@ -1016,7 +1094,7 @@ const _hoisted_10$3 = { class: "flex items-start justify-between gap-4" };
 const _hoisted_11$3 = { class: "flex items-center gap-3" };
 const _hoisted_12$2 = { class: "m-0 text-base font-main font-bold tracking-wide" };
 const _hoisted_13$2 = { class: "flex items-start gap-3" };
-const _hoisted_14$1 = { class: "mb-0-last-child" };
+const _hoisted_14$2 = { class: "mb-0-last-child" };
 const smallIconSize = 24;
 const largeIconSize = 48;
 const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
@@ -1090,7 +1168,7 @@ const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
               ])
             ])
           ], 2)) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_14$1, [
+          vue.createElementVNode("div", _hoisted_14$2, [
             vue.renderSlot(_ctx.$slots, "default")
           ])
         ]))
@@ -4928,7 +5006,6 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     movable: { type: Boolean, default: false },
     resizable: { type: Boolean, default: false },
     info: { default: void 0 },
-    locale: { default: "sv" },
     dataTestid: { default: void 0 },
     onClose: {}
   },
@@ -4940,6 +5017,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     let cleanupFocusTrap = null;
     const previouslyFocusedElement = vue.ref(null);
     const hasFooterSlot = useHasSlot("modal-footer");
+    const { t } = useFdsI18n();
     const modalInnerRef = vue.ref(null);
     const {
       isCustomPositioned,
@@ -4993,7 +5071,7 @@ const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
         "fill-yellow-600": props.info === "warning"
       }
     ]);
-    const closeLabel = vue.computed(() => props.locale === "sv" ? "Stäng dialogruta" : "Close modal window");
+    const closeLabel = vue.computed(() => t("FdsModal.closeModal"));
     const footerClasses = vue.computed(() => [
       "mt-6 flex flex-col gap-4 left-0 right-0",
       {
@@ -8484,7 +8562,6 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     invalidMessage: {},
     labelLeft: { type: Boolean, default: false },
     clearButton: { type: Boolean, default: false },
-    locale: { default: "sv" },
     mask: { default: void 0 },
     modelValue: {},
     value: { default: void 0 },
@@ -8526,6 +8603,7 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emit = __emit;
     const { id, type, maxlength, attrs } = useAttrsWithDefaults(props);
+    const { t } = useFdsI18n();
     const inputType = vue.computed(() => type.value ?? props.type ?? "text");
     const autoId = `fds-input-${Math.random().toString(36).slice(2, 9)}`;
     const inputId = vue.computed(() => id.value ?? autoId);
@@ -8554,10 +8632,10 @@ const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
         "data-testid": props.dataTestid ?? void 0
       };
     });
-    const clearButtonLabel = vue.computed(() => props.locale === "sv" ? "Rensa input" : "Clear input");
-    const passwordButtonShowLabel = vue.computed(() => props.locale === "sv" ? "Visa" : "Show");
-    const passwordButtonHideLabel = vue.computed(() => props.locale === "sv" ? "Dölj" : "Hide");
-    const dateButtonLabel = vue.computed(() => props.locale === "sv" ? "Öppna datumväljare" : "Open date picker");
+    const clearButtonLabel = vue.computed(() => t("FdsInput.clearInput"));
+    const passwordButtonShowLabel = vue.computed(() => t("FdsInput.showPassword"));
+    const passwordButtonHideLabel = vue.computed(() => t("FdsInput.hidePassword"));
+    const dateButtonLabel = vue.computed(() => t("FdsInput.openDatePicker"));
     const showInvalidMessage = vue.computed(() => props.valid === false && !props.optional && props.invalidMessage);
     const isInvalid = vue.computed(() => props.valid === false && !props.optional && !props.disabled);
     const isValid2 = vue.computed(() => props.valid === true);
@@ -9002,7 +9080,7 @@ const _hoisted_13$1 = {
   key: 1,
   class: "max-h-72 overflow-auto border border-gray-200 rounded-md"
 };
-const _hoisted_14 = { class: "w-full text-left text-xs border-collapse" };
+const _hoisted_14$1 = { class: "w-full text-left text-xs border-collapse" };
 const _hoisted_15 = ["onClick"];
 const _hoisted_16 = { class: "py-1.5 px-3 font-mono break-all" };
 const _hoisted_17 = { class: "py-1.5 px-3 font-mono whitespace-pre-wrap break-all" };
@@ -9344,7 +9422,7 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
             }, {
               default: vue.withCtx(() => [
                 !sessionStorageEntries.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, "Inga värden i sessionStorage.")) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, [
-                  vue.createElementVNode("table", _hoisted_14, [
+                  vue.createElementVNode("table", _hoisted_14$1, [
                     _cache[15] || (_cache[15] = vue.createElementVNode("thead", { class: "bg-gray-50" }, [
                       vue.createElementVNode("tr", null, [
                         vue.createElementVNode("th", { class: "py-2 px-3 font-semibold" }, "Nyckel"),
@@ -9690,7 +9768,6 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     current: {},
     max: {},
     loading: { type: Boolean, default: false },
-    locale: { default: "sv" },
     dataTestid: { default: void 0 },
     onPaginate: {}
   },
@@ -9698,6 +9775,7 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const { id } = useAttrsWithDefaults(props);
+    const { t } = useFdsI18n();
     const emit = __emit;
     const loadingIndicator = vue.ref("");
     const internalValue = vue.ref(props.current);
@@ -9711,11 +9789,11 @@ const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
       return attrs;
     });
     const inputValue = vue.computed(() => String(internalValue.value));
-    const nextPageLabel = vue.computed(() => props.locale === "sv" ? "Gå till nästa sida" : "Go to next page");
-    const prevPageLabel = vue.computed(() => props.locale === "sv" ? "Gå till föregående sida" : "Go to previous page");
-    const firstPageLabel = vue.computed(() => props.locale === "sv" ? "Gå till första sidan" : "Go to first page");
-    const lastPageLabel = vue.computed(() => props.locale === "sv" ? "Gå till sista sidan" : "Go to last page");
-    const inputAriaLabel = vue.computed(() => props.locale === "sv" ? "Aktuell sida" : "Current page");
+    const nextPageLabel = vue.computed(() => t("FdsPagination.nextPage"));
+    const prevPageLabel = vue.computed(() => t("FdsPagination.previousPage"));
+    const firstPageLabel = vue.computed(() => t("FdsPagination.firstPage"));
+    const lastPageLabel = vue.computed(() => t("FdsPagination.lastPage"));
+    const inputAriaLabel = vue.computed(() => t("FdsPagination.currentPage"));
     vue.watch(
       () => props.current,
       (newValue) => {
@@ -10131,7 +10209,6 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     borderless: { type: Boolean, default: false },
     marginless: { type: Boolean, default: false },
     maxListHeight: { default: void 0 },
-    locale: { default: "sv" },
     clearTrigger: { type: Boolean, default: false },
     dataTestid: { default: void 0 },
     onChange: {},
@@ -10532,7 +10609,6 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
                 valid: valid.value,
                 invalidMessage: __props.invalidMessage,
                 disabled: __props.disabled,
-                locale: __props.locale,
                 type: "search",
                 value: searchTerm.value,
                 id: inputId,
@@ -10543,7 +10619,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
                 searchIcon: !__props.disabled && !hasInputValue.value,
                 onInput: handleInput,
                 onClearInput: handleClear
-              }), null, 16, ["label", "meta", "labelLeft", "valid", "invalidMessage", "disabled", "locale", "value", "clearButton", "mask", "searchIcon"])
+              }), null, 16, ["label", "meta", "labelLeft", "valid", "invalidMessage", "disabled", "value", "clearButton", "mask", "searchIcon"])
             ])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$7, [
             vue.createElementVNode("div", _hoisted_5$7, vue.toDisplayString(__props.singleItemLabel), 1),
@@ -10943,9 +11019,11 @@ const useSearchSelectProItems = ({
   isMultiple,
   isPid
 }) => {
+  const { locale: activeLocale, t } = useFdsI18n();
   const matchingItems = vue.ref([]);
   const displayedItems = vue.ref([]);
   const visibleItemsLimit = vue.ref(props.maxItems && props.maxItems > 0 ? props.maxItems : null);
+  const resolvedLocale = vue.computed(() => activeLocale.value.toLowerCase().startsWith("en") ? "en" : "sv");
   const toStableValue = (value) => {
     if (Array.isArray(value)) {
       return value.map((item) => toStableValue(item));
@@ -11021,7 +11099,7 @@ const useSearchSelectProItems = ({
   const reorderExplicitDividerGroups = (items, locale) => {
     const dividerLabelField = searchFields.value[0] ?? "label";
     const unspecifiedGroupKey = "__UNSPECIFIED__";
-    const defaultUnspecifiedLabel = locale === "sv" ? "Ospecificerat" : "Unspecified";
+    const defaultUnspecifiedLabel = t("FdsSearchSelectPro.unspecified");
     const unspecifiedLabel = String(props.unspecifiedLabel ?? "").trim() || defaultUnspecifiedLabel;
     const isUnspecifiedDividerLabel = (raw) => {
       const trimmed = raw.trim();
@@ -11029,7 +11107,7 @@ const useSearchSelectProItems = ({
       const lower = trimmed.toLowerCase();
       if (lower === unspecifiedGroupKey.toLowerCase()) return true;
       const candidates = new Set(
-        [unspecifiedLabel, defaultUnspecifiedLabel, "Ospecificerat", "Unspecified"].map((s) => s.trim().toLowerCase()).filter(Boolean)
+        [unspecifiedLabel, defaultUnspecifiedLabel].map((s) => s.trim().toLowerCase()).filter(Boolean)
       );
       return candidates.has(lower);
     };
@@ -11075,13 +11153,13 @@ const useSearchSelectProItems = ({
       const dividerField2 = props.dividerField ?? "isDivider";
       const hasExplicitDividers = baseItems.some((item) => item[dividerField2] === true || item.type === "divider");
       if (!hasExplicitDividers) return baseItems;
-      const locale2 = props.locale === "sv" ? "sv" : "en";
+      const locale2 = resolvedLocale.value;
       return reorderExplicitDividerGroups(baseItems, locale2);
     }
     const dividerField = props.dividerField ?? "isDivider";
     const levelField = props.levelField ?? "level";
-    const locale = props.locale === "sv" ? "sv" : "en";
-    const defaultUnspecifiedLabel = locale === "sv" ? "Ospecificerat" : "Unspecified";
+    const locale = resolvedLocale.value;
+    const defaultUnspecifiedLabel = t("FdsSearchSelectPro.unspecified");
     const unspecifiedLabel = String(props.unspecifiedLabel ?? "").trim() || defaultUnspecifiedLabel;
     const grouped = /* @__PURE__ */ new Map();
     const groupLabels = /* @__PURE__ */ new Map();
@@ -11266,10 +11344,7 @@ const useSearchSelectProItems = ({
 const _hoisted_1$a = { class: "relative block" };
 const _hoisted_2$7 = { class: "relative" };
 const _hoisted_3$7 = { class: "relative" };
-const _hoisted_4$6 = {
-  key: 0,
-  class: "flex justify-center p-4"
-};
+const _hoisted_4$6 = { class: "flex items-center gap-2" };
 const _hoisted_5$6 = ["id", "role", "onMouseup"];
 const _hoisted_6$4 = ["innerHTML"];
 const _hoisted_7$4 = ["onClick"];
@@ -11281,10 +11356,11 @@ const _hoisted_10 = {
 };
 const _hoisted_11 = ["aria-disabled"];
 const _hoisted_12 = {
-  key: 2,
+  key: 1,
   class: "block m-0 list-none p-0"
 };
-const _hoisted_13 = { class: "p-3" };
+const _hoisted_13 = { class: "p-3 flex items-center gap-2" };
+const _hoisted_14 = { key: 0 };
 const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   __name: "FdsSearchSelectPro",
   props: {
@@ -11328,7 +11404,6 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     invalidMessage: { default: "" },
     noResultPrompt: { default: "" },
     maxListHeight: { default: void 0 },
-    locale: { default: "sv" },
     unspecifiedLabel: { default: void 0 },
     dataTestid: { default: void 0 },
     onChange: {},
@@ -11343,6 +11418,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const searchFields = vue.computed(() => props.searchFields ?? []);
+    const { t } = useFdsI18n();
     const emit = __emit;
     const dropdownVisible = vue.ref(false);
     const searchTerm = vue.ref("");
@@ -11441,17 +11517,17 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       if (!dropdownRef.value) return [];
       return Array.from(dropdownRef.value.querySelectorAll('input[id^="search-select-radio-"]'));
     };
-    const focusFirstRadio = () => {
+    const focusSelectedRadioOrFirst = () => {
       vue.nextTick(() => {
-        const firstRadioButton = getSelectableInputs()[0];
-        if (firstRadioButton) {
-          firstRadioButton.focus();
-        }
+        const selectableInputs = getSelectableInputs();
+        if (!selectableInputs.length) return;
+        const checkedRadio = selectableInputs.find((input) => input.checked);
+        (checkedRadio ?? selectableInputs[0])?.focus();
       });
     };
     const hasInputValue = vue.computed(() => searchTerm.value.length > 0);
-    const resolvedLoadMoreLabel = vue.computed(() => props.locale === "sv" ? "Visa fler" : "Show more");
-    const resolvedLoadingMoreLabel = vue.computed(() => props.locale === "sv" ? "Hämtar fler..." : "Loading more...");
+    const resolvedLoadMoreLabel = vue.computed(() => t("FdsSearchSelectPro.showMore"));
+    const resolvedLoadingMoreLabel = vue.computed(() => t("FdsSearchSelectPro.loadingMore"));
     const displayInputValue = vue.computed(() => {
       if (!inputHasFocus.value && !hasSelection.value && !searchTerm.value.length && props.displayValue) {
         return props.displayValue;
@@ -11526,12 +11602,16 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     };
     let changeTimeout = null;
     let inputTimeout = null;
+    const isDebouncingChange = vue.ref(false);
+    const isSearching = vue.computed(() => isDebouncingChange.value || props.loading);
     const debouncedEmitChange = (value) => {
       if (changeTimeout) clearTimeout(changeTimeout);
       const delay = Math.max(0, props.debounceMs ?? 500);
+      isDebouncingChange.value = true;
       changeTimeout = setTimeout(() => {
         const formattedValue = formatPidWithDash(value);
         emit("change", formattedValue);
+        isDebouncingChange.value = false;
       }, delay);
     };
     const debouncedEmitInput = (ev) => {
@@ -11835,13 +11915,13 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
         if (!dropdownVisible.value) {
           dropdownVisible.value = true;
         }
-        focusFirstRadio();
+        focusSelectedRadioOrFirst();
         return;
       }
       if (e.key === "Enter" && !dropdownVisible.value && displayedItems.value.length > 0) {
         e.preventDefault();
         dropdownVisible.value = true;
-        focusFirstRadio();
+        focusSelectedRadioOrFirst();
         return;
       }
       if (e.key === "Escape" && dropdownVisible.value) {
@@ -11875,6 +11955,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
       window.removeEventListener("mouseup", onClickOutside);
       if (changeTimeout) clearTimeout(changeTimeout);
       if (inputTimeout) clearTimeout(inputTimeout);
+      isDebouncingChange.value = false;
       const input = getInputElement();
       if (input) {
         input.removeEventListener("keydown", handleInputKeyDown);
@@ -11936,7 +12017,6 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                 valid: valid.value,
                 invalidMessage: __props.invalidMessage,
                 disabled: __props.disabled,
-                locale: __props.locale,
                 type: "search",
                 value: displayInputValue.value,
                 id: inputId,
@@ -11947,7 +12027,7 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                 searchIcon: !__props.disabled && inputHasFocus.value && !hasInputValue.value && !hasSelection.value,
                 onInput: handleInput,
                 onClearInput: handleClear
-              }), null, 16, ["label", "meta", "labelLeft", "valid", "invalidMessage", "disabled", "locale", "value", "clearButton", "mask", "searchIcon"])
+              }), null, 16, ["label", "meta", "labelLeft", "valid", "invalidMessage", "disabled", "value", "clearButton", "mask", "searchIcon"])
             ])
           ]),
           dropdownVisible.value && !__props.disabled ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -11958,26 +12038,27 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
             style: vue.normalizeStyle(listWrapperStyle.value),
             onScrollPassive: handleDropdownScroll
           }, [
-            __props.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$6, [
-              vue.createVNode(_sfc_main$B, {
-                color: "blue",
-                size: "48px"
-              })
-            ])) : vue.unref(displayedItems) && vue.unref(displayedItems).length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+            vue.unref(displayedItems) && vue.unref(displayedItems).length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
               vue.createElementVNode("div", {
                 class: vue.normalizeClass([headerClasses.value, "flex items-center justify-between gap-3 min-h-[53px]"])
               }, [
-                vue.createVNode(_sfc_main$t, null, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode(vue.toDisplayString(searchTerm.value && searchTerm.value.length ? `${totalMatchingItems.value} ${__props.searchContext.linkWord} ${totalCount.value} ${__props.searchContext.context}` : `${totalCount.value} ${__props.searchContext.context}`), 1)
-                  ]),
-                  _: 1
-                }),
+                vue.createElementVNode("div", _hoisted_4$6, [
+                  vue.createVNode(_sfc_main$t, null, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString(searchTerm.value && searchTerm.value.length ? `${totalMatchingItems.value} ${__props.searchContext.linkWord} ${totalCount.value} ${__props.searchContext.context}` : `${totalCount.value} ${__props.searchContext.context}`), 1)
+                    ]),
+                    _: 1
+                  }),
+                  isSearching.value ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+                    key: 0,
+                    color: "blue",
+                    size: "20px"
+                  })) : vue.createCommentVNode("", true)
+                ]),
                 __props.multiple && __props.showSelectedToggle && selectedItems.value.length > 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$j, {
                   key: 0,
                   label: `${__props.selectedToggleLabel} (${selectedItems.value.length})`,
                   checked: showSelectedOnly.value,
-                  disablePseudoStates: true,
                   onChange: handleToggleSelectedOnly
                 }, null, 8, ["label", "checked"])) : vue.createCommentVNode("", true)
               ], 2),
@@ -12072,9 +12153,16 @@ const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
                   ], 42, _hoisted_11)
                 ])) : vue.createCommentVNode("", true)
               ], 32)
-            ], 64)) : !__props.loading ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_12, [
-              vue.createElementVNode("li", _hoisted_13, vue.toDisplayString(__props.noResultPrompt), 1)
-            ])) : vue.createCommentVNode("", true)
+            ], 64)) : (vue.openBlock(), vue.createElementBlock("ul", _hoisted_12, [
+              vue.createElementVNode("li", _hoisted_13, [
+                !isSearching.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, vue.toDisplayString(__props.noResultPrompt), 1)) : vue.createCommentVNode("", true),
+                isSearching.value ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
+                  key: 1,
+                  color: "blue",
+                  size: "20px"
+                })) : vue.createCommentVNode("", true)
+              ])
+            ]))
           ], 38)) : vue.createCommentVNode("", true)
         ])
       ], 16);
@@ -14625,48 +14713,6 @@ function subDays(date, amount, options) {
 function subWeeks(date, amount, options) {
   return addWeeks(date, -1, options);
 }
-const en = {
-  "FdsWeekCalendar.nextWeek": "Next week",
-  "FdsWeekCalendar.previousWeek": "Previous week",
-  "FdsWeekCalendar.today": "Today",
-  "FdsWeekCalendar.week": "week"
-};
-const sv = {
-  "FdsWeekCalendar.nextWeek": "Nästa vecka",
-  "FdsWeekCalendar.previousWeek": "Föregående vecka",
-  "FdsWeekCalendar.today": "Idag",
-  "FdsWeekCalendar.week": "vecka"
-};
-const FDS_VUE_CORE_I18N_KEY = /* @__PURE__ */ Symbol("fds-vue-core:i18n");
-const translations = {
-  en,
-  sv
-};
-const useFdsI18n = () => {
-  const i18n = vue.inject(FDS_VUE_CORE_I18N_KEY, void 0);
-  const locale = vue.computed(() => {
-    const locale2 = i18n?.global?.locale ?? i18n?.locale;
-    if (typeof locale2 === "string") return locale2;
-    if (locale2 && typeof locale2 === "object" && "value" in locale2 && typeof locale2.value === "string") {
-      return locale2.value;
-    }
-    return "sv-SE";
-  });
-  const activeLanguage = vue.computed(() => locale.value.toLowerCase().split("-")[0]);
-  const dictionary = vue.computed(() => {
-    const currentDictionary = translations[activeLanguage.value];
-    return currentDictionary ?? translations.sv;
-  });
-  const t = (key) => {
-    const value = dictionary.value[key];
-    return typeof value === "string" ? value : "";
-  };
-  return {
-    i18n,
-    locale,
-    t
-  };
-};
 const capitalizeFirstLetter$1 = (value) => {
   if (!value) return value;
   return value.charAt(0).toUpperCase() + value.slice(1);
@@ -16059,12 +16105,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     total: {},
     unfiltered: {},
     text: {},
-    language: { default: "sv" },
     dataTestid: { default: void 0 }
   },
   setup(__props) {
     const props = __props;
     const attrs = vue.useAttrs();
+    const { t } = useFdsI18n();
     const consumerClass = vue.computed(() => classValueToString(attrs.class));
     const rootAttrs = vue.computed(() => {
       const result = { ...attrs };
@@ -16074,7 +16120,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
       return result;
     });
-    const separatorText = () => props.language === "sv" ? "av" : "of";
+    const separatorText = () => t("FdsListHeading.separator");
     const headingText = vue.computed(() => {
       if (!props.total) {
         let result = "0";
@@ -16096,7 +16142,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (props.loadingText && props.loadingText.length > 0) {
         return props.loadingText;
       }
-      return props.language === "sv" ? "Laddar..." : "Loading...";
+      return t("FdsListHeading.loading");
     };
     const wrapperClasses = vue.computed(() => {
       const baseClasses = "inline-block mb-3 h-7 font-bold text-xl";