@altinn/altinn-components 0.37.0 → 0.38.0

package/dist/assets/DrawerOrDropdown.css

@@ -1 +1 @@
-._drawerOrDropdown_ijmwc_1{background-color:var(--ds-color-background-default);display:none}._drawerOrDropdown_ijmwc_1[data-expanded=true]{position:fixed;top:5.5rem;right:0;bottom:0;left:0;display:block;z-index:2}@media (min-width: 1024px){._header_ijmwc_18,._footer_ijmwc_19{display:none}._drawerOrDropdown_ijmwc_1[data-expanded=true]{position:absolute;top:auto;right:auto;bottom:auto;left:0;min-width:16rem;max-width:24rem;margin-top:.5rem;border-radius:.375rem;overflow:hidden}}
+._drawerOrDropdown_2swxb_1{background-color:var(--ds-color-background-default);display:none}._drawerOrDropdown_2swxb_1[data-expanded=true]{position:fixed;top:5.5rem;right:0;bottom:0;left:0;display:block;z-index:2}@media (min-width: 1024px){._header_2swxb_17,._footer_2swxb_18{display:none}._drawerOrDropdown_2swxb_1[data-expanded=true]{position:absolute;top:auto;right:auto;bottom:auto;left:0;min-width:16rem;max-width:24rem;margin-top:.5rem;border-radius:.375rem;overflow:hidden}}

package/dist/assets/Header.css

@@ -1 +1 @@
-._drawer_1vzjh_1[data-expanded=true]{display:block}._dropdown_1vzjh_5[data-expanded=true]{display:none}@media (min-width: 1024px){._dropdown_1vzjh_5[data-expanded=true]{width:320px;display:block}._drawer_1vzjh_1[data-expanded=true]{display:none}}._relative_1vzjh_19{position:relative}
+._drawer_1tael_1[data-expanded=true]{display:block;width:100%}._dropdown_1tael_6[data-expanded=true]{display:none}@media (min-width: 1024px){._dropdown_1tael_6[data-expanded=true]{width:320px;display:block}._drawer_1tael_1[data-expanded=true]{display:none}}._relative_1tael_20{position:relative}

package/dist/assets/MenuItemBase.css

@@ -1 +1 @@
-._item_1itcj_1{font:inherit;color:inherit;padding:0;border:0;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;width:100%;display:flex;align-items:center;column-gap:.25rem;margin:.5rem 0;border-radius:2px}._item_1itcj_1[aria-disabled=true]{opacity:.5;pointer-events:none}._item_1itcj_1[data-size=md]{min-height:56px}._item_1itcj_1[data-size=md]{min-height:44px}._item_1itcj_1[data-size=sm]{min-height:40px}._content_1itcj_45{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._item_1itcj_1,._item_1itcj_1[data-theme]{background-color:transparent}._item_1itcj_1{pointer-events:none}._item_1itcj_1[data-interactive=true]{pointer-events:all}[data-theme=subtle] ._item_1itcj_1:hover{background-color:var(--ds-color-surface-hover)}[data-theme=subtle] ._item_1itcj_1:active{background-color:var(--ds-color-surface-active)}[data-theme=subtle] ._item_1itcj_1[data-selected=true]{background-color:var(--ds-color-background-default)}[data-theme=default] ._item_1itcj_1:hover{background-color:var(--ds-color-surface-hover)}[data-theme=default] ._item_1itcj_1:active{background-color:var(--ds-color-surface-active)}[data-theme=default] ._item_1itcj_1[data-selected=true]{background-color:var(--ds-color-background-tinted)}._content_1itcj_45{display:flex;width:100%;align-items:center;column-gap:.5em}._item_1itcj_1:focus-visible{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline))}._item_1itcj_1:focus-visible *{--_ds--focus: }
+._item_1qmxq_1{font:inherit;color:inherit;padding:0;border:0;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;width:100%;display:flex;align-items:center;column-gap:.25rem;margin:.5rem 0;border-radius:2px}._item_1qmxq_1[aria-disabled=true]{opacity:.5;pointer-events:none}._item_1qmxq_1[data-size=md]{min-height:56px}._item_1qmxq_1[data-size=md]{min-height:44px}._item_1qmxq_1[data-size=sm]{min-height:40px}._content_1qmxq_45{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._item_1qmxq_1,._item_1qmxq_1[data-theme]{background-color:transparent}._item_1qmxq_1{pointer-events:none}._item_1qmxq_1[data-interactive=true]{pointer-events:all}[data-theme=subtle] ._item_1qmxq_1:hover{background-color:var(--ds-color-surface-hover)}[data-theme=subtle] ._item_1qmxq_1:active{background-color:var(--ds-color-surface-active)}[data-theme=subtle] ._item_1qmxq_1[data-selected=true]{background-color:var(--ds-color-background-default)}[data-theme=default] ._item_1qmxq_1:hover,[data-theme=default] [data-active=true]{background-color:var(--ds-color-surface-hover)}[data-theme=default] ._item_1qmxq_1:active{background-color:var(--ds-color-surface-active)}[data-theme=default] ._item_1qmxq_1[data-selected=true]{background-color:var(--ds-color-background-tinted)}._content_1qmxq_45{display:flex;width:100%;align-items:center;column-gap:.5em}._item_1qmxq_1:focus-visible{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline))}._item_1qmxq_1:focus-visible *{--_ds--focus: }

package/dist/components/Button/IconButton.js

@@ -1,11 +1,11 @@
 import { jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { ButtonBase as f } from "./ButtonBase.js";
-import { ButtonIcon as u } from "./ButtonIcon.js";
+import { ButtonBase as u } from "./ButtonBase.js";
+import { ButtonIcon as B } from "./ButtonIcon.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-const z = ({
+const g = ({
   variant: r = "solid",
   rounded: i = !1,
   size: m,
@@ -16,9 +16,10 @@ const z = ({
   className: n,
   selected: s,
   onClick: l,
-  dataTestId: d
+  dataTestId: d,
+  onBlurCapture: f
 }) => /* @__PURE__ */ o(
-  f,
+  u,
   {
     variant: r,
     rounded: i,
@@ -29,9 +30,10 @@ const z = ({
     selected: s,
     "data-testid": d,
     "aria-label": p,
-    children: t && /* @__PURE__ */ o(u, { icon: t, size: e })
+    onBlurCapture: f,
+    children: t && /* @__PURE__ */ o(B, { icon: t, size: e })
   }
 );
 export {
-  z as IconButton
+  g as IconButton
 };

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,68 +1,83 @@
 "use client";
-import { jsxs as v, jsx as s } from "react/jsx-runtime";
-import { c as O } from "../../index-L8X2o7IH.js";
-import * as a from "react";
-import { forwardRef as b, useRef as h, useMemo as w } from "react";
-import { IconButton as y } from "../Button/IconButton.js";
-import { useClickOutside as I } from "../../hooks/useClickOutside.js";
+import { jsxs as y, jsx as f } from "react/jsx-runtime";
+import { c as I } from "../../index-L8X2o7IH.js";
+import * as m from "react";
+import { forwardRef as w, useRef as O, useMemo as k } from "react";
+import { IconButton as E } from "../Button/IconButton.js";
+import { useClickOutside as C } from "../../hooks/useClickOutside.js";
+import { useEnterKey as M } from "../../hooks/useEnterKey.js";
 import { DropdownBase as j } from "../Dropdown/DropdownBase.js";
-import { MenuItems as C } from "../Menu/MenuItems.js";
-import { useRootContext as _ } from "../RootProvider/RootProvider.js";
+import { MenuItems as _ } from "../Menu/MenuItems.js";
+import { useRootContext as R } from "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { u as R } from "../../useId-BVFxCjkq.js";
-import '../../assets/ContextMenu.css';var E = function(e, l) {
-  var r = {};
-  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && l.indexOf(t) < 0 && (r[t] = e[t]);
+import { u as P } from "../../useId-BVFxCjkq.js";
+import '../../assets/ContextMenu.css';var T = function(e, s) {
+  var n = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && s.indexOf(t) < 0 && (n[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
     for (var o = 0, t = Object.getOwnPropertySymbols(e); o < t.length; o++)
-      l.indexOf(t[o]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[o]) && (r[t[o]] = e[t[o]]);
-  return r;
+      s.indexOf(t[o]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[o]) && (n[t[o]] = e[t[o]]);
+  return n;
 };
-const M = b((e, l) => {
-  var { title: r, titleId: t } = e, o = E(e, ["title", "titleId"]);
-  let n = R();
-  return n = r ? t || "title-" + n : void 0, a.createElement(
+const A = w((e, s) => {
+  var { title: n, titleId: t } = e, o = T(e, ["title", "titleId"]);
+  let i = P();
+  return i = n ? t || "title-" + i : void 0, m.createElement(
     "svg",
-    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: l, "aria-labelledby": n }, o),
-    r ? a.createElement("title", { id: n }, r) : null,
-    a.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M6 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m4.5 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m6 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0", clipRule: "evenodd" })
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: s, "aria-labelledby": i }, o),
+    n ? m.createElement("title", { id: i }, n) : null,
+    m.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M6 10.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m4.5 1.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m6 0a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0", clipRule: "evenodd" })
   );
-}), k = "_toggle_nol5i_1", B = {
-  toggle: k
-}, q = ({
+}), B = "_toggle_nol5i_1", S = {
+  toggle: B
+}, Q = ({
   id: e = "context-menu",
-  ariaLabel: l,
-  placement: r = "right",
+  ariaLabel: s,
+  placement: n = "right",
   groups: t = {},
   className: o,
-  items: n
+  items: i
 }) => {
-  const { currentId: p, toggleId: u, closeAll: f } = _(), m = h(null), g = () => u(e), c = p === e;
-  I(m, () => {
-    c && u(e);
+  const { currentId: v, toggleId: p, closeAll: a } = R(), d = O(null), g = "context-menu-" + e, x = () => p(e), u = v === e;
+  C(d, () => {
+    u && p(e);
   });
-  const x = w(() => n.map((i) => ({
-    ...i,
+  const b = k(() => i.map((r) => ({
+    ...r,
+    tabIndex: -1,
     onClick: () => {
-      var d;
-      (d = i.onClick) == null || d.call(i), f();
+      var c;
+      (c = r.onClick) == null || c.call(r), a();
     }
-  })), [n, f]);
-  return /* @__PURE__ */ v("div", { className: O(B.toggle, o), "data-color": "neutral", ref: m, children: [
-    /* @__PURE__ */ s(
-      y,
+  })), [i, a]);
+  M((r) => {
+    var c;
+    if (u) {
+      r.preventDefault();
+      const l = (c = d.current) == null ? void 0 : c.querySelector('[data-active="true"]');
+      l && (l.tagName === "A" && l.hasAttribute("href") ? l.click() : l.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), a();
+    }
+  });
+  const h = (r) => {
+    var l;
+    ((l = r == null ? void 0 : r.relatedTarget) == null ? void 0 : l.closest(`[data-testid="${g}"]`)) || a();
+  };
+  return /* @__PURE__ */ y("div", { className: I(S.toggle, o), "data-color": "neutral", ref: d, "data-testid": g, children: [
+    /* @__PURE__ */ f(
+      E,
       {
         size: "xs",
         rounded: !0,
-        icon: M,
+        icon: A,
         variant: "text",
-        onClick: g,
-        iconAltText: l || `Open ${e}`
+        onClick: x,
+        iconAltText: s || `Open ${e}`,
+        onBlurCapture: h
       }
     ),
-    c && /* @__PURE__ */ s(j, { placement: r, open: c, children: /* @__PURE__ */ s(C, { groups: t, items: x }) })
+    u && /* @__PURE__ */ f(j, { placement: n, open: u, children: /* @__PURE__ */ f(_, { groups: t, items: b, keyboardEvents: !0 }) })
   ] });
 };
 export {
-  q as ContextMenu
+  Q as ContextMenu
 };

package/dist/components/Dropdown/DrawerOrDropdown.js

@@ -1,4 +1,4 @@
-import { jsxs as c, Fragment as s, jsx as o } from "react/jsx-runtime";
+import { jsxs as s, Fragment as c, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
@@ -8,7 +8,7 @@ import { DrawerFooter as f } from "./DrawerFooter.js";
 import { DrawerButton as D } from "./DrawerButton.js";
 import { DrawerBody as n } from "./DrawerBody.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/DrawerOrDropdown.css';const t = "_drawerOrDropdown_ijmwc_1", _ = "_header_ijmwc_18", h = "_footer_ijmwc_19", e = {
+import '../../assets/DrawerOrDropdown.css';const t = "_drawerOrDropdown_2swxb_1", _ = "_header_2swxb_17", h = "_footer_2swxb_18", e = {
   drawerOrDropdown: t,
   header: _,
   footer: h
@@ -18,9 +18,9 @@ import '../../assets/DrawerOrDropdown.css';const t = "_drawerOrDropdown_ijmwc_1"
   drawerButton: r,
   children: a,
   drawerTitle: p
-}) => /* @__PURE__ */ c(s, { children: [
+}) => /* @__PURE__ */ s(c, { children: [
   m && /* @__PURE__ */ o(d, { onClick: i }),
-  /* @__PURE__ */ c("div", { className: e.drawerOrDropdown, "data-expanded": m, children: [
+  /* @__PURE__ */ s("div", { className: e.drawerOrDropdown, "data-expanded": m, children: [
     /* @__PURE__ */ o(l, { className: e.header, title: p, onClose: i }),
     /* @__PURE__ */ o(n, { children: a }),
     /* @__PURE__ */ o(f, { className: e.footer, children: r && /* @__PURE__ */ o(D, { onClick: r == null ? void 0 : r.onClick, children: r == null ? void 0 : r.label }) })

package/dist/components/Header/Header.js

@@ -1,88 +1,73 @@
 "use client";
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { DropdownBase as h } from "../Dropdown/DropdownBase.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { DropdownBase as C } from "../Dropdown/DropdownBase.js";
 import "../../index-L8X2o7IH.js";
-import { DrawerBase as f } from "../Dropdown/DrawerBase.js";
+import { DrawerBase as b } from "../Dropdown/DrawerBase.js";
 import "react";
-import { useRootContext as b } from "../RootProvider/RootProvider.js";
-import { GlobalMenu as w } from "../GlobalMenu/GlobalMenu.js";
-import { GlobalMenuButton as j } from "../GlobalMenu/GlobalMenuButton.js";
-import { HeaderBase as B } from "./HeaderBase.js";
-import { HeaderLogo as H } from "./HeaderLogo.js";
-import { LocaleButton as L } from "./LocaleButton.js";
-import { LocaleSwitcher as g } from "./LocaleSwitcher.js";
-import { Searchbar as u } from "../Searchbar/Searchbar.js";
+import { useRootContext as v } from "../RootProvider/RootProvider.js";
+import { GlobalMenu as h } from "../GlobalMenu/GlobalMenu.js";
+import { GlobalMenuButton as H } from "../GlobalMenu/GlobalMenuButton.js";
+import { HeaderBase as S } from "./HeaderBase.js";
+import { HeaderLogo as k } from "./HeaderLogo.js";
+import { LocaleSwitcher as B } from "./LocaleSwitcher.js";
+import { Searchbar as f } from "../Searchbar/Searchbar.js";
 import "../Snackbar/useSnackbar.js";
-import { HeaderGroup as S } from "./HeaderGroup.js";
-import { HeaderSearch as v } from "./HeaderSearch.js";
-import { useIsDesktop as D } from "../../hooks/useIsDesktop.js";
-import '../../assets/Header.css';const I = "_drawer_1vzjh_1", y = "_dropdown_1vzjh_5", z = "_relative_1vzjh_19", a = {
-  drawer: I,
-  dropdown: y,
-  relative: z
-}, Z = ({ menu: r, locale: n, search: s, currentAccount: l, logo: x = {}, badge: C }) => {
-  const { currentId: o, toggleId: t, openId: _, closeAll: d } = b(), p = () => {
+import { HeaderGroup as D } from "./HeaderGroup.js";
+import { HeaderSearch as w } from "./HeaderSearch.js";
+import { useIsDesktop as I } from "../../hooks/useIsDesktop.js";
+import '../../assets/Header.css';const N = "_drawer_1tael_1", F = "_dropdown_1tael_6", G = "_relative_1tael_20", s = {
+  drawer: N,
+  dropdown: F,
+  relative: G
+}, W = ({ menu: r, locale: d, search: a, currentAccount: t, logo: u = {}, badge: x }) => {
+  const { currentId: o, toggleId: p, openId: _, closeAll: n } = v(), i = () => {
     _("search");
-  }, i = () => {
-    t("search");
-  }, N = () => {
-    t("menu");
-  }, k = () => {
-    t("locale");
-  }, m = D();
-  return /* @__PURE__ */ c(
-    B,
+  }, c = () => {
+    p("search");
+  }, g = () => {
+    p("menu");
+  }, m = I();
+  return /* @__PURE__ */ l(
+    S,
     {
       currentId: o,
       open: o === "search" || o === "menu" || o === "locale",
-      onClose: d,
+      onClose: n,
       children: [
-        /* @__PURE__ */ e(H, { ...x, className: a.logo }),
-        s && m && /* @__PURE__ */ e(v, { expanded: o === "search", children: /* @__PURE__ */ e(u, { ...s, expanded: o === "search", onClose: i, onFocus: p }) }),
-        /* @__PURE__ */ c(S, { children: [
-          n && /* @__PURE__ */ e("div", { className: a.relative, children: /* @__PURE__ */ e(L, { onClick: k, expanded: o === "locale" }) }),
-          /* @__PURE__ */ c("div", { className: a.relative, children: [
+        /* @__PURE__ */ e(k, { ...u, className: s.logo }),
+        a && m && /* @__PURE__ */ e(w, { expanded: o === "search", children: /* @__PURE__ */ e(f, { ...a, expanded: o === "search", onClose: c, onFocus: i }) }),
+        /* @__PURE__ */ l(D, { children: [
+          d && /* @__PURE__ */ e(B, { ...d }),
+          /* @__PURE__ */ l("div", { className: s.relative, children: [
             /* @__PURE__ */ e(
-              j,
+              H,
               {
-                badge: C,
-                currentAccount: l,
-                onClick: N,
+                badge: x,
+                currentAccount: t,
+                onClick: g,
                 expanded: o === "menu",
                 label: r == null ? void 0 : r.menuLabel
               }
             ),
-            n && /* @__PURE__ */ e(
-              h,
-              {
-                layout: "desktop",
-                padding: !0,
-                placement: "right",
-                open: o === "locale",
-                className: a.dropdown,
-                children: /* @__PURE__ */ e(g, { ...n })
-              }
-            ),
             r && /* @__PURE__ */ e(
-              h,
+              C,
               {
                 layout: "desktop",
                 padding: !0,
                 placement: "right",
                 open: o === "menu",
-                className: a.dropdown,
-                children: /* @__PURE__ */ e(w, { ...r, currentAccount: l, onClose: d })
+                className: s.dropdown,
+                children: /* @__PURE__ */ e(h, { ...r, currentAccount: t, onClose: n })
               }
             )
           ] })
         ] }),
-        s && !m && /* @__PURE__ */ e(v, { expanded: o === "search", children: /* @__PURE__ */ e(u, { ...s, expanded: o === "search", onClose: i, onFocus: p }) }),
-        n && /* @__PURE__ */ e(f, { open: o === "locale", className: a.drawer, children: /* @__PURE__ */ e(g, { ...n }) }),
-        r && /* @__PURE__ */ e(f, { open: o === "menu", className: a.drawer, children: /* @__PURE__ */ e(w, { ...r, currentAccount: l, onClose: d }) })
+        a && !m && /* @__PURE__ */ e(w, { expanded: o === "search", children: /* @__PURE__ */ e(f, { ...a, expanded: o === "search", onClose: c, onFocus: i }) }),
+        r && /* @__PURE__ */ e(b, { open: o === "menu", className: s.drawer, children: /* @__PURE__ */ e(h, { ...r, currentAccount: t, onClose: n }) })
       ]
     }
   );
 };
 export {
-  Z as Header
+  W as Header
 };

package/dist/components/Header/LocaleButton.js

@@ -26,7 +26,7 @@ const d = c((e, n) => {
   );
 }), s = "_button_utwi0_1", p = {
   button: s
-}, x = ({ id: e = "language-switcher", expanded: n, onClick: o }) => /* @__PURE__ */ i(
+}, x = ({ id: e = "language-switcher", expanded: n, onClick: o, onBlurCapture: t }) => /* @__PURE__ */ i(
   m,
   {
     className: p.button,
@@ -37,7 +37,8 @@ const d = c((e, n) => {
     selected: n,
     color: "company",
     onClick: o,
-    iconAltText: `Open ${e}`
+    iconAltText: `Open ${e}`,
+    onBlurCapture: t
   }
 );
 export {

package/dist/components/Header/LocaleSwitcher.js

@@ -1,30 +1,45 @@
 "use client";
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { jsx as r, jsxs as k } from "react/jsx-runtime";
+import { useRef as h, useMemo as v } from "react";
+import { useEnterKey as b } from "../../hooks/useEnterKey.js";
+import { useIsDesktop as x } from "../../hooks/useIsDesktop.js";
+import { DropdownBase as I } from "../Dropdown/DropdownBase.js";
 import "../../index-L8X2o7IH.js";
-import "react";
-import { useRootContext as n } from "../RootProvider/RootProvider.js";
+import { DrawerBase as w } from "../Dropdown/DrawerBase.js";
+import { useRootContext as C } from "../RootProvider/RootProvider.js";
+import { MenuItems as m } from "../Menu/MenuItems.js";
+import { LocaleButton as y } from "./LocaleButton.js";
 import "../Snackbar/useSnackbar.js";
-import { MenuOption as u } from "../Menu/MenuOption.js";
-import { MenuHeader as p } from "../Menu/MenuHeader.js";
-import { MenuBase as d, MenuList as s, MenuListItem as o } from "../Menu/MenuBase.js";
-const j = ({ title: l = "Select language", options: c, onChange: r }) => {
-  const { toggleId: i } = n(), a = (e) => {
-    i("locale"), r == null || r(e);
+import { S as B } from "../../Checkmark-D17Nyv_u.js";
+const z = ({ title: d = "Select language", options: i, onSelect: o }) => {
+  const c = h(null), u = x(), { currentId: g, toggleId: f, closeAll: s } = C(), n = g === "locale", l = v(() => i.map((e) => ({
+    ...e,
+    id: String(e.value),
+    tabIndex: -1,
+    groupId: "locales",
+    icon: e.checked ? B : /* @__PURE__ */ r("span", { "aria-hidden": "true" }),
+    onClick: () => {
+      o == null || o(String(e.value)), s();
+    }
+  })), [i, o]), p = {
+    locales: { title: d || "Språk/language" }
   };
-  return /* @__PURE__ */ t(d, { theme: "default", children: /* @__PURE__ */ m(s, { children: [
-    /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(p, { title: l }) }),
-    c.map((e) => /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(
-      u,
-      {
-        onChange: a,
-        label: e.label,
-        type: "radio",
-        value: e.value,
-        checked: e.checked
-      }
-    ) }, e.value))
-  ] }) });
+  return b((e) => {
+    var a;
+    if (n) {
+      e.preventDefault();
+      const t = (a = c.current) == null ? void 0 : a.querySelector('[data-active="true"]');
+      t && (t.tagName === "A" && t.hasAttribute("href") ? t.click() : t.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), s();
+    }
+  }), /* @__PURE__ */ k("div", { ref: c, "data-testid": "locale-switcher", children: [
+    /* @__PURE__ */ r(y, { onClick: () => f("locale"), expanded: n, onBlurCapture: (e) => {
+      var t;
+      ((t = e == null ? void 0 : e.relatedTarget) == null ? void 0 : t.closest('[data-testid="locale-switcher"]')) || s();
+    } }),
+    n && u && /* @__PURE__ */ r(I, { layout: "desktop", padding: !0, placement: "right", open: !0, children: /* @__PURE__ */ r(m, { groups: p, items: l, keyboardEvents: !0 }) }),
+    n && !u && /* @__PURE__ */ r(w, { open: !0, placement: "bottom", children: /* @__PURE__ */ r(m, { groups: p, items: l, keyboardEvents: !0 }) })
+  ] });
 };
 export {
-  j as LocaleSwitcher
+  z as LocaleSwitcher
 };

package/dist/components/Layout/Layout.js

@@ -1,30 +1,41 @@
 "use client";
 import { jsxs as p, jsx as m } from "react/jsx-runtime";
-import { LayoutBase as y } from "./LayoutBase.js";
-import { LayoutBody as h } from "./LayoutBody.js";
-import { LayoutContent as L } from "./LayoutContent.js";
-import { LayoutSidebar as x } from "./LayoutSidebar.js";
-import { Footer as j } from "../Footer/Footer.js";
-import { Header as B } from "../Header/Header.js";
+import { LayoutBase as h } from "./LayoutBase.js";
+import { LayoutBody as L } from "./LayoutBody.js";
+import { LayoutContent as x } from "./LayoutContent.js";
+import { LayoutSidebar as j } from "./LayoutSidebar.js";
+import { Footer as B } from "../Footer/Footer.js";
+import { Header as C } from "../Header/Header.js";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { useRootContext as C } from "../RootProvider/RootProvider.js";
+import { useRootContext as S } from "../RootProvider/RootProvider.js";
 import { Menu as F } from "../Menu/Menu.js";
 import "../Snackbar/useSnackbar.js";
-const D = ({ color: r, theme: c = "subtle", header: u, footer: l, sidebar: o, content: t = {}, children: f }) => {
-  const { currentId: n } = C();
-  return /* @__PURE__ */ p(y, { color: r, theme: c, currentId: n, children: [
-    u && /* @__PURE__ */ m(B, { ...u }),
-    /* @__PURE__ */ p(h, { currentId: n, children: [
-      o && /* @__PURE__ */ p(x, { hidden: o == null ? void 0 : o.hidden, color: o == null ? void 0 : o.color, ...o, children: [
+import { SkipLink as H } from "../SkipLink/SkipLink.js";
+const J = ({
+  color: c,
+  theme: f = "subtle",
+  header: u,
+  footer: n,
+  sidebar: o,
+  content: t = {},
+  children: y,
+  skipLink: r
+}) => {
+  const { currentId: l } = S();
+  return /* @__PURE__ */ p(h, { color: c, theme: f, currentId: l, children: [
+    r && /* @__PURE__ */ m(H, { ...r }),
+    u && /* @__PURE__ */ m(C, { ...u }),
+    /* @__PURE__ */ p(L, { currentId: l, children: [
+      o && /* @__PURE__ */ p(j, { hidden: o == null ? void 0 : o.hidden, color: o == null ? void 0 : o.color, ...o, children: [
         (o == null ? void 0 : o.menu) && /* @__PURE__ */ m(F, { ...o == null ? void 0 : o.menu }),
         o == null ? void 0 : o.children
       ] }),
-      /* @__PURE__ */ m(L, { color: t == null ? void 0 : t.color, children: f })
+      /* @__PURE__ */ m(x, { color: t == null ? void 0 : t.color, id: "main-content", children: y })
     ] }),
-    l && /* @__PURE__ */ m(j, { ...l })
+    n && /* @__PURE__ */ m(B, { ...n })
   ] });
 };
 export {
-  D as Layout
+  J as Layout
 };

package/dist/components/Layout/LayoutContent.js

@@ -1,7 +1,7 @@
-import { jsx as o } from "react/jsx-runtime";
-import '../../assets/LayoutContent.css';const c = "_content_1wkbr_1", e = {
-  content: c
-}, r = ({ color: t, children: n }) => /* @__PURE__ */ o("main", { className: e.content, "data-color": t, children: n });
+import { jsx as c } from "react/jsx-runtime";
+import '../../assets/LayoutContent.css';const e = "_content_1wkbr_1", s = {
+  content: e
+}, r = ({ color: t, children: n, id: o = "main-content" }) => /* @__PURE__ */ c("main", { className: s.content, "data-color": t, id: o, children: n });
 export {
   r as LayoutContent
 };

package/dist/components/Menu/MenuBase.js

@@ -1,17 +1,17 @@
-import { jsx as m } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuBase.css';const u = "_menu_sxyub_1", r = "_list_sxyub_16", l = "_item_sxyub_22", c = {
-  menu: u,
-  list: r,
-  item: l
-}, C = ({ as: t = "nav", color: n, theme: e, className: o, children: s }) => /* @__PURE__ */ m(t, { className: a(c.menu, o), "data-color": n, "data-theme": e, children: s }), d = ({ as: t = "ul", role: n = "group", className: e, children: o }) => /* @__PURE__ */ m(t, { className: a(c.list, e), role: n, children: o }), y = ({
+import { jsx as a } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
+import '../../assets/MenuBase.css';const r = "_menu_sxyub_1", l = "_list_sxyub_16", p = "_item_sxyub_22", i = {
+  menu: r,
+  list: l,
+  item: p
+}, C = ({ as: t = "nav", color: n, theme: e, className: o, children: s }) => /* @__PURE__ */ a(t, { className: c(i.menu, o), "data-color": n, "data-theme": e, children: s }), d = ({ as: t = "ul", role: n = "group", className: e, children: o, ref: s, onMouseEnter: m }) => /* @__PURE__ */ a(t, { className: c(i.list, e), role: n, ref: s, onMouseEnter: m, children: o }), y = ({
   as: t = "li",
   role: n = "presentation",
   className: e,
   children: o,
   style: s,
-  dataIndex: i
-}) => /* @__PURE__ */ m(t, { className: a(c.item, e), role: n, style: s, "data-index": i, children: o });
+  dataIndex: m
+}) => /* @__PURE__ */ a(t, { className: c(i.item, e), role: n, style: s, "data-index": m, children: o });
 export {
   C as MenuBase,
   d as MenuList,

package/dist/components/Menu/MenuItemBase.js

@@ -1,43 +1,47 @@
-import { jsx as c } from "react/jsx-runtime";
-import { c as u } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuItemBase.css';const l = "_item_1itcj_1", I = "_content_1itcj_45", m = {
-  item: l,
-  content: I
-}, z = ({
+import { jsx as m } from "react/jsx-runtime";
+import { c as v } from "../../index-L8X2o7IH.js";
+import '../../assets/MenuItemBase.css';const I = "_item_1qmxq_1", N = "_content_1qmxq_45", c = {
+  item: I,
+  content: N
+}, B = ({
   interactive: o = !0,
   as: s,
-  color: r,
-  theme: d,
+  color: d,
+  theme: r,
   size: i,
   className: p,
-  href: _,
+  href: x,
   onClick: t,
-  onKeyPress: e,
-  tabIndex: x = 0,
-  hidden: f,
-  selected: h,
-  disabled: a = !1,
-  children: j
-}) => /* @__PURE__ */ c(
+  onKeyPress: a,
+  tabIndex: _ = 0,
+  hidden: q,
+  selected: f,
+  disabled: e = !1,
+  children: h,
+  active: u,
+  onMouseEnter: l
+}) => /* @__PURE__ */ m(
   s || "a",
   {
-    tabIndex: a ? "-1" : x ?? 0,
-    className: u(m.item, p),
+    tabIndex: e ? "-1" : _ ?? 0,
+    className: v(c.item, p),
     "data-interactive": o,
+    "data-active": u,
     "data-size": i,
-    "data-color": r,
-    "data-theme": d,
-    "aria-hidden": f,
-    "aria-disabled": a,
-    "data-selected": h,
-    href: _,
+    "data-color": d,
+    "data-theme": r,
+    "aria-hidden": q,
+    "aria-disabled": e,
+    "data-selected": f,
+    href: x,
     onKeyPress: (n) => {
-      n.key === "Enter" && (t == null || t()), e == null || e(n);
+      n.key === "Enter" && (t == null || t()), a == null || a(n);
     },
     onClick: t,
-    children: /* @__PURE__ */ c("span", { className: m.content, children: j })
+    onMouseEnter: l,
+    children: /* @__PURE__ */ m("span", { className: c.content, children: h })
   }
 );
 export {
-  z as MenuItemBase
+  B as MenuItemBase
 };