@broberg/app-shell 0.11.1 → 0.13.1

package/dist/preact.d.cts

@@ -16,10 +16,45 @@ interface NavItem<Icon = unknown> {
      * it is on the current path.
      */
     children?: NavItem<Icon>[];
+    /** F092.20 — a status marker before the label; "working" = a run in progress. */
+    marker?: "working";
+    /** F092.20 — shows a pin icon after the label. */
+    pinned?: boolean;
+    /** F092.21 — row actions: a «…» button opens a menu with these. */
+    actions?: NavAction[];
+}
+/**
+ * F092.21 — one row action. `submenu` switches the menu to a sub-list (with a
+ * back arrow); `input` switches it to a field + save (e.g. rename). A plain
+ * action, a submenu leaf and a saved input all call `onItemAction`.
+ */
+interface NavAction {
+    id: string;
+    label: string;
+    icon?: unknown;
+    /** A single letter that picks this action while the menu is open (e.g. "P"). */
+    kbd?: string;
+    /** Shown in the danger colour (delete). */
+    danger?: boolean;
+    submenu?: NavAction[];
+    input?: {
+        value: string;
+        placeholder?: string;
+        saveLabel?: string;
+    };
+}
+interface NavSection<Icon = unknown> {
+    /** A sub-heading inside one group, e.g. "I dag" / "I går". */
+    label: string;
+    items: NavItem<Icon>[];
 }
 interface NavGroup<Icon = unknown> {
     label: string;
     items: NavItem<Icon>[];
+    /** F092.20 — "plain": the group label in normal text (not uppercase/mono). */
+    variant?: "default" | "plain";
+    /** F092.20 — sub-headed lists inside this group, shown after `items`. */
+    sections?: NavSection<Icon>[];
 }
 /**
  * Is this item the current page? Exact match for "/", otherwise the path is the
@@ -236,6 +271,10 @@ declare const TEXT: {
         readonly openMenu: "Åbn menu";
         readonly closeMenu: "Luk menu";
         readonly home: "Forside";
+        readonly working: "Arbejder";
+        readonly moreFor: "Mere for";
+        readonly back: "Tilbage";
+        readonly pinned: "Fastgjort";
         readonly language: "Sprog";
         readonly zoom: "Zoom";
         readonly zoomOut: "Zoom ud";
@@ -307,6 +346,10 @@ declare const TEXT: {
         readonly openMenu: "Open menu";
         readonly closeMenu: "Close menu";
         readonly home: "Home";
+        readonly working: "Working";
+        readonly moreFor: "More for";
+        readonly back: "Back";
+        readonly pinned: "Pinned";
         readonly language: "Language";
         readonly zoom: "Zoom";
         readonly zoomOut: "Zoom out";
@@ -420,6 +463,8 @@ interface SidebarProps {
     lang: Lang;
     /** F092.15 — rendered at the very bottom of the sidebar (the user menu in "sidebar-footer"). */
     bottom?: ComponentChildren;
+    /** F092.21 — a row action was chosen (value: the saved text of an `input` action). */
+    onItemAction?: (navItemId: string, actionId: string, value?: string) => void;
 }
 declare function Sidebar(p: SidebarProps): JSX.Element;
 interface NotificationBellProps {
@@ -552,6 +597,8 @@ declare function PageTabs(p: {
     onNavigate?: Navigate;
 }): JSX.Element;
 interface AppShellProps {
+    /** F092.21 — passed to the sidebar: a row action was chosen. */
+    onItemAction?: SidebarProps["onItemAction"];
     brand?: ComponentChildren;
     actions?: ComponentChildren;
     groups: PreactNavGroup[];
@@ -689,4 +736,4 @@ interface ConfirmDialogProps {
 }
 declare function ConfirmDialog(p: ConfirmDialogProps): JSX.Element | null;
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavAction, type NavGroup, type NavItem, type NavSection, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.d.ts

@@ -16,10 +16,45 @@ interface NavItem<Icon = unknown> {
      * it is on the current path.
      */
     children?: NavItem<Icon>[];
+    /** F092.20 — a status marker before the label; "working" = a run in progress. */
+    marker?: "working";
+    /** F092.20 — shows a pin icon after the label. */
+    pinned?: boolean;
+    /** F092.21 — row actions: a «…» button opens a menu with these. */
+    actions?: NavAction[];
+}
+/**
+ * F092.21 — one row action. `submenu` switches the menu to a sub-list (with a
+ * back arrow); `input` switches it to a field + save (e.g. rename). A plain
+ * action, a submenu leaf and a saved input all call `onItemAction`.
+ */
+interface NavAction {
+    id: string;
+    label: string;
+    icon?: unknown;
+    /** A single letter that picks this action while the menu is open (e.g. "P"). */
+    kbd?: string;
+    /** Shown in the danger colour (delete). */
+    danger?: boolean;
+    submenu?: NavAction[];
+    input?: {
+        value: string;
+        placeholder?: string;
+        saveLabel?: string;
+    };
+}
+interface NavSection<Icon = unknown> {
+    /** A sub-heading inside one group, e.g. "I dag" / "I går". */
+    label: string;
+    items: NavItem<Icon>[];
 }
 interface NavGroup<Icon = unknown> {
     label: string;
     items: NavItem<Icon>[];
+    /** F092.20 — "plain": the group label in normal text (not uppercase/mono). */
+    variant?: "default" | "plain";
+    /** F092.20 — sub-headed lists inside this group, shown after `items`. */
+    sections?: NavSection<Icon>[];
 }
 /**
  * Is this item the current page? Exact match for "/", otherwise the path is the
@@ -236,6 +271,10 @@ declare const TEXT: {
         readonly openMenu: "Åbn menu";
         readonly closeMenu: "Luk menu";
         readonly home: "Forside";
+        readonly working: "Arbejder";
+        readonly moreFor: "Mere for";
+        readonly back: "Tilbage";
+        readonly pinned: "Fastgjort";
         readonly language: "Sprog";
         readonly zoom: "Zoom";
         readonly zoomOut: "Zoom ud";
@@ -307,6 +346,10 @@ declare const TEXT: {
         readonly openMenu: "Open menu";
         readonly closeMenu: "Close menu";
         readonly home: "Home";
+        readonly working: "Working";
+        readonly moreFor: "More for";
+        readonly back: "Back";
+        readonly pinned: "Pinned";
         readonly language: "Language";
         readonly zoom: "Zoom";
         readonly zoomOut: "Zoom out";
@@ -420,6 +463,8 @@ interface SidebarProps {
     lang: Lang;
     /** F092.15 — rendered at the very bottom of the sidebar (the user menu in "sidebar-footer"). */
     bottom?: ComponentChildren;
+    /** F092.21 — a row action was chosen (value: the saved text of an `input` action). */
+    onItemAction?: (navItemId: string, actionId: string, value?: string) => void;
 }
 declare function Sidebar(p: SidebarProps): JSX.Element;
 interface NotificationBellProps {
@@ -552,6 +597,8 @@ declare function PageTabs(p: {
     onNavigate?: Navigate;
 }): JSX.Element;
 interface AppShellProps {
+    /** F092.21 — passed to the sidebar: a row action was chosen. */
+    onItemAction?: SidebarProps["onItemAction"];
     brand?: ComponentChildren;
     actions?: ComponentChildren;
     groups: PreactNavGroup[];
@@ -689,4 +736,4 @@ interface ConfirmDialogProps {
 }
 declare function ConfirmDialog(p: ConfirmDialogProps): JSX.Element | null;
 
-export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavGroup, type NavItem, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };
+export { AVATAR_MAX_BYTES, AVATAR_TYPES, type AccountAdapter, AccountError, AccountPage, type AccountPageProps, type AccountProfile, type AnalyticsAdapter, type AnalyticsData, type AnalyticsDay, AnalyticsError, AnalyticsPage, type AnalyticsPageProps, AppShell, type AppShellProps, Avatar, ConfirmDialog, type ConfirmDialogProps, type Lang, type NavAction, type NavGroup, type NavItem, type NavSection, type Navigate, NotificationBell, type NotificationBellProps, type NotificationSource, PageHeader, type PageTab, PageTabs, type PreactNavGroup, type PreactNavItem, type ShellUser, Sidebar, type SidebarProps, TEXT, type TenantAdapter, TenantLoadError, type TenantMembershipRow, TenantSwitcher, type TenantSwitcherProps, TopBar, type TopBarProps, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuSection, accountErrorKind, activeNavLabel, analyticsErrorKind, badgeLabel, changePct, checkAvatarFile, copenhagenDay, createFetchAccountAdapter, createFetchAnalyticsAdapter, createFetchNotificationSource, createFetchTenantAdapter, createMemoryNotificationSource, defaultReauthHref, fillDays, initials, isActivePath, isExternal, readFlag, readSet, relativeTime, safeNavigate, useIsMobile, writeFlag, writeSet };

package/dist/preact.js

@@ -304,6 +304,10 @@ var TEXT = {
     openMenu: "\xC5bn menu",
     closeMenu: "Luk menu",
     home: "Forside",
+    working: "Arbejder",
+    moreFor: "Mere for",
+    back: "Tilbage",
+    pinned: "Fastgjort",
     language: "Sprog",
     zoom: "Zoom",
     zoomOut: "Zoom ud",
@@ -375,6 +379,10 @@ var TEXT = {
     openMenu: "Open menu",
     closeMenu: "Close menu",
     home: "Home",
+    working: "Working",
+    moreFor: "More for",
+    back: "Back",
+    pinned: "Pinned",
     language: "Language",
     zoom: "Zoom",
     zoomOut: "Zoom out",
@@ -493,10 +501,194 @@ var IconLogOut = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("path", { d: "m16 17 5-5-5-5" }),
   /* @__PURE__ */ jsx("path", { d: "M21 12H9" })
 ] }), 14);
+var IconPin = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 17v5" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" })
+] }), 12);
 var IconUser = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "4" }),
   /* @__PURE__ */ jsx("path", { d: "M4 21a8 8 0 0 1 16 0" })
 ] }), 14);
+function RowActions(props) {
+  const t = TEXT[props.lang];
+  const id = props.item.id;
+  const btn = useRef(null);
+  const menu = useRef(null);
+  const [stack, setStack] = useState([]);
+  const [hi, setHi] = useState(0);
+  const [value, setValue] = useState("");
+  const [pos, setPos] = useState(void 0);
+  const view = stack[stack.length - 1];
+  const open = !!view;
+  const close = (refocus = true) => {
+    setStack([]);
+    if (refocus) btn.current?.focus();
+  };
+  const show = (v) => {
+    setStack((s) => [...s, v]);
+    setHi(0);
+    if (v.kind === "input") setValue(v.action.input.value);
+  };
+  const back = () => {
+    setStack((s) => s.slice(0, -1));
+    setHi(0);
+  };
+  const pick = (a) => {
+    if (a.submenu?.length) return show({ kind: "list", actions: a.submenu, title: a.label });
+    if (a.input) return show({ kind: "input", action: a });
+    close();
+    props.onAction(a.id);
+  };
+  const save = (a) => {
+    close();
+    props.onAction(a.id, value);
+  };
+  useLayoutEffect(() => {
+    if (!open || !btn.current) return setPos(void 0);
+    const r = btn.current.getBoundingClientRect();
+    const vw = window.innerWidth, vh = window.innerHeight, m = 8;
+    const w = Math.min(240, vw - 2 * m);
+    const h = menu.current?.offsetHeight ?? 0;
+    const left = Math.max(m, Math.min(r.right - w, vw - w - m));
+    const top = r.bottom + 4 + h <= vh - m || r.top - 4 - h < m ? Math.min(r.bottom + 4, vh - m - h) : r.top - 4 - h;
+    setPos({ position: "fixed", left: `${left}px`, top: `${Math.max(m, top)}px`, width: `${w}px` });
+    if (view?.kind === "input") menu.current?.querySelector("input")?.focus();
+    else menu.current?.focus();
+  }, [open, stack.length]);
+  useEffect(() => {
+    if (!open) return;
+    const outside = (e) => {
+      const n = e.target instanceof Node ? e.target : null;
+      if (n && (menu.current?.contains(n) || btn.current?.contains(n))) return;
+      close(false);
+    };
+    document.addEventListener("mousedown", outside);
+    window.addEventListener("scroll", outside, true);
+    window.addEventListener("resize", outside);
+    return () => {
+      document.removeEventListener("mousedown", outside);
+      window.removeEventListener("scroll", outside, true);
+      window.removeEventListener("resize", outside);
+    };
+  }, [open]);
+  const onKeyDown = (e) => {
+    if (!view) return;
+    e.stopPropagation();
+    if (e.key === "Escape") {
+      e.preventDefault();
+      return close();
+    }
+    if (view.kind === "input") {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        save(view.action);
+      }
+      return;
+    }
+    if ((e.key === "ArrowLeft" || e.key === "Backspace") && stack.length > 1) {
+      e.preventDefault();
+      return back();
+    }
+    const list = view.actions;
+    const { state, intent } = selectKeyReducer({ open: true, highlighted: hi }, e.key, list.length);
+    if (intent.type === "select") {
+      e.preventDefault();
+      return pick(list[intent.index]);
+    }
+    if (state.highlighted !== hi) {
+      e.preventDefault();
+      return setHi(state.highlighted);
+    }
+    const byKbd = e.key.length === 1 ? list.find((a) => a.kbd?.toLowerCase() === e.key.toLowerCase()) : void 0;
+    if (byKbd) {
+      e.preventDefault();
+      pick(byKbd);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: btn,
+        type: "button",
+        class: "bas-item__more" + (open ? " is-open" : ""),
+        "data-testid": `sidebar-item-${id}-more`,
+        "aria-label": `${t.moreFor} ${props.item.label}`,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        onClick: () => open ? close() : show({ kind: "list", actions: props.item.actions }),
+        children: /* @__PURE__ */ jsx(IconMore, {})
+      }
+    ),
+    view ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: menu,
+        class: "bas-rowmenu",
+        role: "menu",
+        tabIndex: -1,
+        "aria-label": view.kind === "list" && view.title ? view.title : props.item.label,
+        "data-testid": `sidebar-item-${id}-menu`,
+        style: pos ?? { position: "fixed", visibility: "hidden" },
+        onKeyDown,
+        children: [
+          stack.length > 1 ? /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-rowmenu__back", "data-testid": `sidebar-item-${id}-back`, "aria-label": t.back, onClick: back, children: [
+            /* @__PURE__ */ jsx(IconChevronLeft, {}),
+            /* @__PURE__ */ jsx("span", { children: view.kind === "list" ? view.title : view.action.label })
+          ] }) : null,
+          view.kind === "list" ? view.actions.map((a, i) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              class: "bas-rowmenu__item" + (i === hi ? " is-active" : "") + (a.danger ? " is-danger" : ""),
+              "data-testid": `sidebar-item-${id}-action-${a.id}`,
+              onMouseEnter: () => setHi(i),
+              onClick: () => pick(a),
+              children: [
+                a.icon ? /* @__PURE__ */ jsx("span", { class: "bas-rowmenu__icon", children: a.icon }) : null,
+                /* @__PURE__ */ jsx("span", { class: "bas-rowmenu__label", children: a.label }),
+                a.submenu?.length ? /* @__PURE__ */ jsx(IconChevronRight, {}) : a.kbd ? /* @__PURE__ */ jsx("kbd", { class: "bas-rowmenu__kbd", children: a.kbd.toUpperCase() }) : null
+              ]
+            },
+            a.id
+          )) : /* @__PURE__ */ jsxs(
+            "form",
+            {
+              class: "bas-rowmenu__form",
+              "data-testid": `sidebar-item-${id}-form`,
+              onSubmit: (e) => {
+                e.preventDefault();
+                save(view.action);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    class: "bas-rowmenu__input",
+                    "data-testid": `sidebar-item-${id}-input`,
+                    "aria-label": view.action.label,
+                    value,
+                    placeholder: view.action.input.placeholder,
+                    onInput: (e) => setValue(e.currentTarget.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx("button", { type: "submit", class: "bas-rowmenu__save", "data-testid": `sidebar-item-${id}-save`, children: view.action.input.saveLabel ?? t.save })
+              ]
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
+var IconMore = () => svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+  /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+  /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
+] }), 16);
+var IconChevronLeft = () => svg(/* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }), 14);
+var IconChevronRight = () => svg(/* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }), 14);
 function Sidebar(p) {
   const key = p.groupsKey ?? "broberg-app-shell.groups";
   const itemsKey = p.itemsKey ?? "broberg-app-shell.items";
@@ -554,7 +746,7 @@ function Sidebar(p) {
   const leaf = (it, sub = false) => {
     const active = isActivePath(it.href, p.currentPath);
     const badge = badgeLabel(it.badge);
-    return /* @__PURE__ */ jsxs(
+    const link = /* @__PURE__ */ jsxs(
       NavLink,
       {
         href: it.href,
@@ -568,12 +760,19 @@ function Sidebar(p) {
         children: [
           active && !sub ? /* @__PURE__ */ jsx("span", { class: "bas-item__bar" }) : null,
           it.icon ? /* @__PURE__ */ jsx("span", { class: "bas-item__icon", children: it.icon }) : null,
+          it.marker === "working" ? /* @__PURE__ */ jsx("span", { class: "bas-item__marker", "data-testid": `sidebar-item-${it.id}-marker`, role: "img", "aria-label": TEXT[p.lang].working }) : null,
           /* @__PURE__ */ jsx("span", { class: "bas-item__label", children: it.label }),
+          it.pinned ? /* @__PURE__ */ jsx("span", { class: "bas-item__pin", "data-testid": `sidebar-item-${it.id}-pinned`, role: "img", "aria-label": TEXT[p.lang].pinned, children: /* @__PURE__ */ jsx(IconPin, {}) }) : null,
           badge ? /* @__PURE__ */ jsx("span", { class: "bas-item__count", "data-testid": `sidebar-badge-${it.id}`, children: badge }) : null
         ]
       },
       it.id
     );
+    if (!it.actions?.length || railed) return link;
+    return /* @__PURE__ */ jsxs("div", { class: "bas-itemrow", children: [
+      link,
+      /* @__PURE__ */ jsx(RowActions, { item: it, lang: p.lang, onAction: (a, v) => v === void 0 ? p.onItemAction?.(it.id, a) : p.onItemAction?.(it.id, a, v) })
+    ] }, it.id);
   };
   const parent = (it) => {
     const children = it.children;
@@ -654,12 +853,16 @@ function Sidebar(p) {
           /* @__PURE__ */ jsx("nav", { class: "bas-sidebar__nav", children: p.groups.map((g) => {
             const open = railed || !folded.has(g.label);
             const slug = g.label.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-            return /* @__PURE__ */ jsxs("div", { class: "bas-group", children: [
+            return /* @__PURE__ */ jsxs("div", { class: "bas-group" + (g.variant === "plain" ? " bas-group--plain" : ""), children: [
               /* @__PURE__ */ jsxs("button", { type: "button", class: "bas-group__label", "data-testid": `sidebar-group-${slug}`, "aria-expanded": open, onClick: () => toggleGroup(g.label), children: [
                 /* @__PURE__ */ jsx(IconChevron, { open }),
                 /* @__PURE__ */ jsx("span", { children: g.label })
               ] }),
-              open ? g.items.map(item) : null
+              open ? g.items.map(item) : null,
+              open ? g.sections?.map((sec) => /* @__PURE__ */ jsxs("div", { class: "bas-section", "data-testid": `sidebar-section-${slug}-${sec.label.toLowerCase().replace(/[^a-z0-9æøå]+/g, "-")}`, children: [
+                /* @__PURE__ */ jsx("div", { class: "bas-section__label", children: sec.label }),
+                sec.items.map(item)
+              ] }, sec.label)) : null
             ] }, g.label);
           }) }),
           p.footer?.length ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__foot", children: p.footer.map(item) }) : null,
@@ -1241,6 +1444,7 @@ function AppShell(p) {
         {
           groups: p.groups,
           footer: p.footer,
+          onItemAction: p.onItemAction,
           currentPath: p.currentPath,
           onNavigate: p.onNavigate,
           collapsed,