@broberg/app-shell 0.21.0 → 0.22.0

package/dist/preact.d.cts

@@ -49,6 +49,10 @@ interface NavAction {
     confirm?: {
         label: string;
     };
+    /** F092.32 — a dimmed value right-aligned before the chevron («Type …… All ›»). */
+    value?: string;
+    /** F092.32 — a divider line before this item, to separate groups. */
+    separator?: boolean;
 }
 interface NavSection<Icon = unknown> {
     /** A sub-heading inside one group, e.g. "I dag" / "I går". */

package/dist/preact.d.ts

@@ -49,6 +49,10 @@ interface NavAction {
     confirm?: {
         label: string;
     };
+    /** F092.32 — a dimmed value right-aligned before the chevron («Type …… All ›»). */
+    value?: string;
+    /** F092.32 — a divider line before this item, to separate groups. */
+    separator?: boolean;
 }
 interface NavSection<Icon = unknown> {
     /** A sub-heading inside one group, e.g. "I dag" / "I går". */

package/dist/preact.js

@@ -544,6 +544,7 @@ function ItemActionsMenu(props) {
   const [pos, setPos] = useState(void 0);
   const view = stack[stack.length - 1];
   const closed = useRef(false);
+  const [kbd, setKbd] = useState(() => props.anchor.matches(":focus-visible"));
   const close = (refocus = true) => {
     if (closed.current) return;
     closed.current = true;
@@ -619,6 +620,7 @@ function ItemActionsMenu(props) {
     const view2 = stack2[stack2.length - 1];
     if (!view2) return;
     e.stopPropagation();
+    setKbd(true);
     if (e.key === "Escape") {
       e.preventDefault();
       return close();
@@ -661,7 +663,7 @@ function ItemActionsMenu(props) {
     "div",
     {
       ref: menu,
-      class: "bas-rowmenu",
+      class: "bas-rowmenu" + (kbd ? " is-kbd" : ""),
       role: "menu",
       tabIndex: -1,
       "aria-label": view.kind === "list" && view.title ? view.title : props.label,
@@ -673,28 +675,32 @@ function ItemActionsMenu(props) {
           /* @__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",
-            ref: (el) => {
-              items.current[i] = el;
+        view.kind === "list" ? view.actions.map((a, i) => [
+          a.separator ? /* @__PURE__ */ jsx("div", { class: "bas-rowmenu__sep", role: "separator" }, `${a.id}-sep`) : null,
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              ref: (el) => {
+                items.current[i] = el;
+              },
+              tabIndex: i === hi ? 0 : -1,
+              class: "bas-rowmenu__item" + (i === hi ? " is-active" : "") + (a.danger ? " is-danger" : "") + (armed === a.id ? " is-armed" : ""),
+              "data-testid": `${pre}-action-${a.id}`,
+              onMouseEnter: () => setHi(i),
+              onFocus: () => 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: armed === a.id && a.confirm ? a.confirm.label : a.label }),
+                a.value ? /* @__PURE__ */ jsx("span", { class: "bas-rowmenu__value", "data-testid": `${pre}-action-${a.id}-value`, children: a.value }) : null,
+                a.submenu?.length ? /* @__PURE__ */ jsx(IconChevronRight, {}) : a.kbd ? /* @__PURE__ */ jsx("kbd", { class: "bas-rowmenu__kbd", children: a.kbd.toUpperCase() }) : null
+              ]
             },
-            tabIndex: i === hi ? 0 : -1,
-            class: "bas-rowmenu__item" + (i === hi ? " is-active" : "") + (a.danger ? " is-danger" : "") + (armed === a.id ? " is-armed" : ""),
-            "data-testid": `${pre}-action-${a.id}`,
-            onMouseEnter: () => setHi(i),
-            onFocus: () => 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: armed === a.id && a.confirm ? a.confirm.label : 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(
+            a.id
+          )
+        ]) : /* @__PURE__ */ jsxs(
           "form",
           {
             class: "bas-rowmenu__form",