@broberg/app-shell 0.14.0 → 0.16.0

package/dist/preact.d.cts

@@ -16,8 +16,11 @@ 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 — a status marker before the label; "working" = a run in progress.
+     * F092.23 — "idle" = the same ring in grey (finished), so every row lines up.
+     */
+    marker?: "working" | "idle";
     /** F092.20 — shows a pin icon after the label. */
     pinned?: boolean;
     /** F092.21 — row actions: a «…» button opens a menu with these. */
@@ -59,6 +62,12 @@ interface NavGroup<Icon = unknown> {
     variant?: "default" | "plain";
     /** F092.20 — sub-headed lists inside this group, shown after `items`. */
     sections?: NavSection<Icon>[];
+    /**
+     * F092.23 — no heading row: the items show directly, always open (it cannot be
+     * folded, so a stored fold for this label is ignored). `label` stays required —
+     * it is the group's key and its accessible name.
+     */
+    hideLabel?: boolean;
 }
 /**
  * Is this item the current page? Exact match for "/", otherwise the path is the
@@ -601,6 +610,12 @@ declare function PageTabs(p: {
     onNavigate?: Navigate;
 }): JSX.Element;
 interface AppShellProps {
+    /**
+     * F092.24 — the app's default text size: 1 = as designed, 1.2 = every shell text
+     * 20 % larger. Sets --bas-font-scale on the root. The APP's choice; the user's own
+     * Zoom (userMenu.zoom) is separate and applies on top.
+     */
+    fontScale?: number;
     /** F092.21 — passed to the sidebar: a row action was chosen. */
     onItemAction?: SidebarProps["onItemAction"];
     brand?: ComponentChildren;

package/dist/preact.d.ts

@@ -16,8 +16,11 @@ 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 — a status marker before the label; "working" = a run in progress.
+     * F092.23 — "idle" = the same ring in grey (finished), so every row lines up.
+     */
+    marker?: "working" | "idle";
     /** F092.20 — shows a pin icon after the label. */
     pinned?: boolean;
     /** F092.21 — row actions: a «…» button opens a menu with these. */
@@ -59,6 +62,12 @@ interface NavGroup<Icon = unknown> {
     variant?: "default" | "plain";
     /** F092.20 — sub-headed lists inside this group, shown after `items`. */
     sections?: NavSection<Icon>[];
+    /**
+     * F092.23 — no heading row: the items show directly, always open (it cannot be
+     * folded, so a stored fold for this label is ignored). `label` stays required —
+     * it is the group's key and its accessible name.
+     */
+    hideLabel?: boolean;
 }
 /**
  * Is this item the current page? Exact match for "/", otherwise the path is the
@@ -601,6 +610,12 @@ declare function PageTabs(p: {
     onNavigate?: Navigate;
 }): JSX.Element;
 interface AppShellProps {
+    /**
+     * F092.24 — the app's default text size: 1 = as designed, 1.2 = every shell text
+     * 20 % larger. Sets --bas-font-scale on the root. The APP's choice; the user's own
+     * Zoom (userMenu.zoom) is separate and applies on top.
+     */
+    fontScale?: number;
     /** F092.21 — passed to the sidebar: a row action was chosen. */
     onItemAction?: SidebarProps["onItemAction"];
     brand?: ComponentChildren;

package/dist/preact.js

@@ -808,7 +808,7 @@ 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,
+          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 }) : it.marker === "idle" ? /* @__PURE__ */ jsx("span", { class: "bas-item__marker bas-item__marker--idle", "data-testid": `sidebar-item-${it.id}-marker`, "aria-hidden": "true" }) : 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
@@ -899,19 +899,29 @@ function Sidebar(p) {
             ) : p.brandMark }) : null
           ] }) : null,
           /* @__PURE__ */ jsx("nav", { class: "bas-sidebar__nav", children: p.groups.map((g) => {
-            const open = railed || !folded.has(g.label);
+            const open = railed || g.hideLabel || !folded.has(g.label);
             const slug = g.label.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-            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.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);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                class: "bas-group" + (g.variant === "plain" ? " bas-group--plain" : ""),
+                role: g.hideLabel ? "group" : void 0,
+                "aria-label": g.hideLabel ? g.label : void 0,
+                "data-testid": g.hideLabel ? `sidebar-group-${slug}-unlabelled` : void 0,
+                children: [
+                  g.hideLabel ? null : /* @__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.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,
           p.bottom ? /* @__PURE__ */ jsx("div", { class: "bas-sidebar__user", "data-testid": "sidebar-user", children: p.bottom }) : null
@@ -1471,76 +1481,86 @@ function AppShell(p) {
   const heading = p.title ?? activeNavLabel(p.groups, p.footer, p.currentPath);
   const userInSidebar = p.userMenuPlacement === "sidebar-footer";
   const sidebarUser = userInSidebar && p.user ? /* @__PURE__ */ jsx(UserMenu, { user: p.user, ...p.userMenu, placement: "sidebar-footer", onNavigate: p.onNavigate, lang: p.lang }) : null;
-  return /* @__PURE__ */ jsxs("div", { class: "bas-root", "data-testid": "app-shell", "data-mobile": mode, "data-layout": layout, children: [
-    inset ? null : /* @__PURE__ */ jsx(
-      TopBar,
-      {
-        brand: p.brand,
-        homeHref: p.homeHref,
-        onHome: () => setDrawer(false),
-        actions: p.actions,
-        notifications: p.notifications,
-        user: userInSidebar ? void 0 : p.user,
-        userMenu: p.userMenu,
-        onNavigate: p.onNavigate,
-        lang: p.lang
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { class: "bas-row", children: [
-      /* @__PURE__ */ jsx(
-        Sidebar,
-        {
-          groups: p.groups,
-          footer: p.footer,
-          onItemAction: p.onItemAction,
-          currentPath: p.currentPath,
-          onNavigate: p.onNavigate,
-          collapsed,
-          collapse,
-          brandMark: p.brandMark,
-          homeHref: p.homeHref,
-          homeLabel: p.homeLabel,
-          mobileOpen: drawer,
-          onClose: () => setDrawer(false),
-          mobile: mode,
-          header: inset || mode === "drawer" ? p.brand : void 0,
-          brandTestId: inset ? "brand-home" : void 0,
-          groupsKey: `${prefix}.groups`,
-          itemsKey: `${prefix}.items`,
-          bottom: sidebarUser,
-          lang: p.lang
-        }
-      ),
-      /* @__PURE__ */ jsxs("main", { class: "bas-main", "data-testid": "app-content", children: [
-        /* @__PURE__ */ jsxs("div", { class: "bas-contenthead", "data-testid": "content-header", children: [
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      class: "bas-root",
+      "data-testid": "app-shell",
+      "data-mobile": mode,
+      "data-layout": layout,
+      style: p.fontScale !== void 0 ? { "--bas-font-scale": String(p.fontScale) } : void 0,
+      children: [
+        inset ? null : /* @__PURE__ */ jsx(
+          TopBar,
+          {
+            brand: p.brand,
+            homeHref: p.homeHref,
+            onHome: () => setDrawer(false),
+            actions: p.actions,
+            notifications: p.notifications,
+            user: userInSidebar ? void 0 : p.user,
+            userMenu: p.userMenu,
+            onNavigate: p.onNavigate,
+            lang: p.lang
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { class: "bas-row", children: [
           /* @__PURE__ */ jsx(
-            "button",
+            Sidebar,
             {
-              type: "button",
-              class: "bas-iconbtn bas-trigger",
-              "data-testid": "sidebar-trigger",
-              "aria-label": triggerLabel,
-              "aria-expanded": expanded,
-              title: triggerLabel,
-              onClick: onTrigger,
-              children: /* @__PURE__ */ jsx(IconPanelLeft, {})
+              groups: p.groups,
+              footer: p.footer,
+              onItemAction: p.onItemAction,
+              currentPath: p.currentPath,
+              onNavigate: p.onNavigate,
+              collapsed,
+              collapse,
+              brandMark: p.brandMark,
+              homeHref: p.homeHref,
+              homeLabel: p.homeLabel,
+              mobileOpen: drawer,
+              onClose: () => setDrawer(false),
+              mobile: mode,
+              header: inset || mode === "drawer" ? p.brand : void 0,
+              brandTestId: inset ? "brand-home" : void 0,
+              groupsKey: `${prefix}.groups`,
+              itemsKey: `${prefix}.items`,
+              bottom: sidebarUser,
+              lang: p.lang
             }
           ),
-          heading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { class: "bas-contenthead__sep", "data-testid": "content-header-separator", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("h1", { class: "bas-contenthead__title", "data-testid": "content-header-title", children: heading })
-          ] }) : null,
-          inset ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { class: "bas-spacer" }),
-            p.actions ? /* @__PURE__ */ jsx("div", { class: "bas-contenthead__actions", children: p.actions }) : null,
-            /* @__PURE__ */ jsx(NotificationBell, { source: p.notifications, onNavigate: p.onNavigate, lang: p.lang }),
-            p.user && !userInSidebar ? /* @__PURE__ */ jsx(UserMenu, { user: p.user, ...p.userMenu, onNavigate: p.onNavigate, lang: p.lang }) : null
-          ] }) : null
-        ] }),
-        p.children
-      ] })
-    ] })
-  ] });
+          /* @__PURE__ */ jsxs("main", { class: "bas-main", "data-testid": "app-content", children: [
+            /* @__PURE__ */ jsxs("div", { class: "bas-contenthead", "data-testid": "content-header", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  class: "bas-iconbtn bas-trigger",
+                  "data-testid": "sidebar-trigger",
+                  "aria-label": triggerLabel,
+                  "aria-expanded": expanded,
+                  title: triggerLabel,
+                  onClick: onTrigger,
+                  children: /* @__PURE__ */ jsx(IconPanelLeft, {})
+                }
+              ),
+              heading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { class: "bas-contenthead__sep", "data-testid": "content-header-separator", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("h1", { class: "bas-contenthead__title", "data-testid": "content-header-title", children: heading })
+              ] }) : null,
+              inset ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { class: "bas-spacer" }),
+                p.actions ? /* @__PURE__ */ jsx("div", { class: "bas-contenthead__actions", children: p.actions }) : null,
+                /* @__PURE__ */ jsx(NotificationBell, { source: p.notifications, onNavigate: p.onNavigate, lang: p.lang }),
+                p.user && !userInSidebar ? /* @__PURE__ */ jsx(UserMenu, { user: p.user, ...p.userMenu, onNavigate: p.onNavigate, lang: p.lang }) : null
+              ] }) : null
+            ] }),
+            p.children
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function defaultReauthHref() {
   const here = typeof location === "undefined" ? "/" : location.pathname + location.search;