@k2b/ui 0.17.0 → 0.19.0

package/dist/browser/layout/Navigation.js

@@ -1,33 +1,46 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
-import { className as _$className } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<ul class=k2b-navigation__list>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<i>`),
   _tmpl$3 = /*#__PURE__*/_$template(`<small>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-navigation__copy><span></span><!$><!/>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<span class=k2b-navigation__color>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-navigation__badge>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<button type=button class=k2b-navigation__disclosure><i aria-hidden=true>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<i class="ti ti-dots"aria-hidden=true>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<div>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<li><div class=k2b-navigation__row><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<button type=button class=k2b-navigation__control><!$><!/><!$><!/>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<nav class=k2b-navigation>`);
+  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-navigation__status>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span class=k2b-sr-only>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<li class=k2b-navigation__section><div class=k2b-navigation__heading></div><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<button type=button class=k2b-navigation__disclosure><i aria-hidden=true>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<i class="ti ti-dots"aria-hidden=true>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<li><div class=k2b-navigation__row><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<button type=button class=k2b-navigation__control><!$><!/><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<nav class=k2b-navigation>`);
 import { documentNavigate, Link } from "@k2b/ssr/nav";
-import { createSignal, For, Show } from "solid-js";
+import { createSignal, createUniqueId, For, Show } from "solid-js";
 import { IconButton } from "../actions/Button";
 import { Dropdown } from "../actions/Dropdown";
 import { useUiMessages } from "../intl/messages";
+/** A named icon is an image screen readers announce; any other icon is decoration. */
+const iconAccessibility = label => label ? {
+  role: "img",
+  "aria-label": label
+} : {
+  "aria-hidden": true
+};
 export default function Navigation(props) {
   const messages = useUiMessages();
   const [expanded, setExpanded] = createSignal({});
@@ -44,6 +57,7 @@ export default function Navigation(props) {
       children: id => {
         const item = () => rows.items.find(entry => entry.id === id);
         const disabled = () => rows.disabled || item().disabled;
+        const headingId = `k2b-navigation-section-${createUniqueId()}`;
         // `expanded` hands disclosure to the item's owner; every other toggle stays local to this renderer.
         const open = () => item().expanded ?? expanded()[id] ?? item().defaultExpanded ?? true;
         const toggle = () => {
@@ -58,7 +72,12 @@ export default function Navigation(props) {
           },
           get children() {
             var _el$2 = _$getNextElement(_tmpl$2);
-            _$effect(() => _$className(_el$2, item().icon));
+            _$spread(_el$2, _$mergeProps({
+              get ["class"]() {
+                return item().icon;
+              }
+            }, () => iconAccessibility(item().iconLabel)), false, false);
+            _$runHydrationEvents();
             return _el$2;
           }
         }), (() => {
@@ -96,217 +115,275 @@ export default function Navigation(props) {
             _$insert(_el$9, () => item().badge);
             return _el$9;
           }
-        })];
-        return (() => {
-          var _el$0 = _$getNextElement(_tmpl$0),
-            _el$1 = _el$0.firstChild,
-            _el$13 = _el$1.firstChild,
-            [_el$14, _co$2] = _$getNextMarker(_el$13.nextSibling),
-            _el$15 = _el$14.nextSibling,
-            [_el$16, _co$3] = _$getNextMarker(_el$15.nextSibling),
-            _el$17 = _el$16.nextSibling,
-            [_el$18, _co$4] = _$getNextMarker(_el$17.nextSibling),
-            _el$19 = _el$18.nextSibling,
-            [_el$20, _co$5] = _$getNextMarker(_el$19.nextSibling),
-            _el$22 = _el$1.nextSibling,
-            [_el$23, _co$6] = _$getNextMarker(_el$22.nextSibling);
-          _$insert(_el$1, _$createComponent(Show, {
-            get when() {
-              return item().href;
-            },
-            get fallback() {
-              return (() => {
-                var _el$24 = _$getNextElement(_tmpl$1),
-                  _el$26 = _el$24.firstChild,
-                  [_el$27, _co$7] = _$getNextMarker(_el$26.nextSibling),
-                  _el$28 = _el$27.nextSibling,
-                  [_el$29, _co$8] = _$getNextMarker(_el$28.nextSibling);
-                _el$24.$$click = () => item().action ? void activate(id) : toggle();
-                _$insert(_el$24, content, _el$27, _co$7);
-                _$insert(_el$24, _$createComponent(Show, {
-                  get when() {
-                    return _$memo(() => !!!item().action)() && item().children?.length;
-                  },
-                  get children() {
-                    var _el$25 = _$getNextElement(_tmpl$2);
-                    _$effect(() => _$className(_el$25, open() ? "ti ti-chevron-down" : "ti ti-chevron-right"));
-                    return _el$25;
-                  }
-                }), _el$29, _co$8);
-                _$effect(_p$ => {
-                  var _v$5 = disabled(),
-                    _v$6 = !item().action ? open() : undefined;
-                  _v$5 !== _p$.e && _$setProperty(_el$24, "disabled", _p$.e = _v$5);
-                  _v$6 !== _p$.t && _$setAttribute(_el$24, "aria-expanded", _p$.t = _v$6);
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined
-                });
-                _$runHydrationEvents();
-                return _el$24;
-              })();
-            },
-            children: href => _$createComponent(Link, {
-              "class": "k2b-navigation__control",
-              get href() {
-                return href();
-              },
-              get ["aria-current"]() {
-                return item().active ? "page" : undefined;
-              },
-              get ["aria-disabled"]() {
-                return disabled() || undefined;
-              },
-              get tabIndex() {
-                return disabled() ? -1 : undefined;
-              },
-              get scroll() {
-                return item().scroll;
-              },
-              onNavigate: async event => {
-                if (!(await ready())) return;
-                if (item().navigation === "enhanced" && props.navigation.onNavigate) await props.navigation.onNavigate(event);else event.fallback();
-              },
-              onClick: event => {
-                if (disabled()) {
-                  event.preventDefault();
-                  return;
-                }
-                if (!item().action || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-                // Local opening can fetch before committing navigation, outside a view transition.
-                event.preventDefault();
-                void activate(id);
+        }), _$createComponent(Show, {
+          get when() {
+            return item().status !== undefined;
+          },
+          get children() {
+            var _el$0 = _$getNextElement(_tmpl$7);
+            _$insert(_el$0, _$createComponent(Show, {
+              get when() {
+                return item().status;
               },
-              get children() {
-                return content();
-              }
-            })
-          }), _el$14, _co$2);
-          _$insert(_el$1, _$createComponent(Show, {
-            get when() {
-              return _$memo(() => !!(item().href || item().action))() && item().children?.length;
-            },
-            get children() {
-              var _el$10 = _$getNextElement(_tmpl$7),
-                _el$11 = _el$10.firstChild;
-              _el$10.$$click = toggle;
-              _$effect(_p$ => {
-                var _v$ = item().label,
-                  _v$2 = open(),
-                  _v$3 = disabled(),
-                  _v$4 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
-                _v$ !== _p$.e && _$setAttribute(_el$10, "aria-label", _p$.e = _v$);
-                _v$2 !== _p$.t && _$setAttribute(_el$10, "aria-expanded", _p$.t = _v$2);
-                _v$3 !== _p$.a && _$setProperty(_el$10, "disabled", _p$.a = _v$3);
-                _v$4 !== _p$.o && _$className(_el$11, _p$.o = _v$4);
-                return _p$;
-              }, {
-                e: undefined,
-                t: undefined,
-                a: undefined,
-                o: undefined
-              });
-              _$runHydrationEvents();
-              return _el$10;
-            }
-          }), _el$16, _co$3);
-          _$insert(_el$1, _$createComponent(For, {
-            get each() {
-              return (item().inlineActions ?? []).map(action => action.id);
-            },
-            children: actionId => {
-              const action = () => item().inlineActions?.find(entry => entry.id === actionId);
-              return _$createComponent(Show, {
+              children: status => [(() => {
+                var _el$1 = _$getNextElement(_tmpl$8);
+                _$effect(() => _$className(_el$1, status().icon));
+                return _el$1;
+              })(), (() => {
+                var _el$10 = _$getNextElement(_tmpl$9);
+                _$insert(_el$10, () => status().label);
+                return _el$10;
+              })()]
+            }));
+            _$effect(_p$ => {
+              var _v$ = item().status?.tone,
+                _v$2 = item().status?.label;
+              _v$ !== _p$.e && _$setAttribute(_el$0, "data-tone", _p$.e = _v$);
+              _v$2 !== _p$.t && _$setAttribute(_el$0, "title", _p$.t = _v$2);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$0;
+          }
+        })];
+        return _$createComponent(Show, {
+          get when() {
+            return item().section;
+          },
+          get fallback() {
+            return (() => {
+              var _el$15 = _$getNextElement(_tmpl$12),
+                _el$16 = _el$15.firstChild,
+                _el$20 = _el$16.firstChild,
+                [_el$21, _co$3] = _$getNextMarker(_el$20.nextSibling),
+                _el$22 = _el$21.nextSibling,
+                [_el$23, _co$4] = _$getNextMarker(_el$22.nextSibling),
+                _el$24 = _el$23.nextSibling,
+                [_el$25, _co$5] = _$getNextMarker(_el$24.nextSibling),
+                _el$26 = _el$25.nextSibling,
+                [_el$27, _co$6] = _$getNextMarker(_el$26.nextSibling),
+                _el$29 = _el$16.nextSibling,
+                [_el$30, _co$7] = _$getNextMarker(_el$29.nextSibling);
+              _$insert(_el$16, _$createComponent(Show, {
                 get when() {
-                  return action();
+                  return item().href;
                 },
-                children: current => _$createComponent(IconButton, {
-                  "class": "k2b-navigation__inline-action",
-                  get label() {
-                    return current().label;
+                get fallback() {
+                  return (() => {
+                    var _el$31 = _$getNextElement(_tmpl$13),
+                      _el$33 = _el$31.firstChild,
+                      [_el$34, _co$8] = _$getNextMarker(_el$33.nextSibling),
+                      _el$35 = _el$34.nextSibling,
+                      [_el$36, _co$9] = _$getNextMarker(_el$35.nextSibling);
+                    _el$31.$$click = () => item().action ? void activate(id) : toggle();
+                    _$insert(_el$31, content, _el$34, _co$8);
+                    _$insert(_el$31, _$createComponent(Show, {
+                      get when() {
+                        return _$memo(() => !!!item().action)() && item().children?.length;
+                      },
+                      get children() {
+                        var _el$32 = _$getNextElement(_tmpl$8);
+                        _$effect(() => _$className(_el$32, open() ? "ti ti-chevron-down" : "ti ti-chevron-right"));
+                        return _el$32;
+                      }
+                    }), _el$36, _co$9);
+                    _$effect(_p$ => {
+                      var _v$7 = disabled(),
+                        _v$8 = !item().action ? open() : undefined;
+                      _v$7 !== _p$.e && _$setProperty(_el$31, "disabled", _p$.e = _v$7);
+                      _v$8 !== _p$.t && _$setAttribute(_el$31, "aria-expanded", _p$.t = _v$8);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined
+                    });
+                    _$runHydrationEvents();
+                    return _el$31;
+                  })();
+                },
+                children: href => _$createComponent(Link, {
+                  "class": "k2b-navigation__control",
+                  get href() {
+                    return href();
+                  },
+                  get ["aria-current"]() {
+                    return item().active ? "page" : undefined;
                   },
-                  get disabled() {
-                    return disabled() || current().disabled;
+                  get ["aria-disabled"]() {
+                    return disabled() || undefined;
+                  },
+                  get tabIndex() {
+                    return disabled() ? -1 : undefined;
+                  },
+                  get scroll() {
+                    return item().scroll;
+                  },
+                  onNavigate: async event => {
+                    if (!(await ready())) return;
+                    if (item().navigation === "enhanced" && props.navigation.onNavigate) await props.navigation.onNavigate(event);else event.fallback();
+                  },
+                  onClick: event => {
+                    if (disabled()) {
+                      event.preventDefault();
+                      return;
+                    }
+                    if (!item().action || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+                    // Local opening can fetch before committing navigation, outside a view transition.
+                    event.preventDefault();
+                    void activate(id);
                   },
-                  onClick: () => void activate(actionId),
                   get children() {
-                    var _el$30 = _$getNextElement(_tmpl$2);
-                    _$effect(() => _$className(_el$30, current().icon));
-                    return _el$30;
+                    return content();
                   }
                 })
-              });
-            }
-          }), _el$18, _co$4);
-          _$insert(_el$1, _$createComponent(Show, {
-            get when() {
-              return item().actions?.length;
-            },
-            get children() {
-              return _$createComponent(Dropdown.Root, {
-                get items() {
-                  return (item().actions ?? []).map(action => ({
-                    label: action.label,
-                    icon: action.icon,
-                    description: action.description,
-                    disabled: disabled() || action.disabled,
-                    action: () => {
-                      if (action.href) void ready().then(allowed => {
-                        if (allowed) documentNavigate(action.href);
-                      });else void activate(action.id);
-                    }
-                  }));
+              }), _el$21, _co$3);
+              _$insert(_el$16, _$createComponent(Show, {
+                get when() {
+                  return _$memo(() => !!(item().href || item().action))() && item().children?.length;
+                },
+                get children() {
+                  var _el$17 = _$getNextElement(_tmpl$1),
+                    _el$18 = _el$17.firstChild;
+                  _el$17.$$click = toggle;
+                  _$effect(_p$ => {
+                    var _v$3 = item().label,
+                      _v$4 = open(),
+                      _v$5 = disabled(),
+                      _v$6 = open() ? "ti ti-chevron-down" : "ti ti-chevron-right";
+                    _v$3 !== _p$.e && _$setAttribute(_el$17, "aria-label", _p$.e = _v$3);
+                    _v$4 !== _p$.t && _$setAttribute(_el$17, "aria-expanded", _p$.t = _v$4);
+                    _v$5 !== _p$.a && _$setProperty(_el$17, "disabled", _p$.a = _v$5);
+                    _v$6 !== _p$.o && _$className(_el$18, _p$.o = _v$6);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined,
+                    a: undefined,
+                    o: undefined
+                  });
+                  _$runHydrationEvents();
+                  return _el$17;
+                }
+              }), _el$23, _co$4);
+              _$insert(_el$16, _$createComponent(For, {
+                get each() {
+                  return (item().inlineActions ?? []).map(action => action.id);
+                },
+                children: actionId => {
+                  const action = () => item().inlineActions?.find(entry => entry.id === actionId);
+                  return _$createComponent(Show, {
+                    get when() {
+                      return action();
+                    },
+                    children: current => _$createComponent(IconButton, {
+                      "class": "k2b-navigation__inline-action",
+                      get label() {
+                        return current().label;
+                      },
+                      get disabled() {
+                        return disabled() || current().disabled;
+                      },
+                      onClick: () => void activate(actionId),
+                      get children() {
+                        var _el$37 = _$getNextElement(_tmpl$8);
+                        _$effect(() => _$className(_el$37, current().icon));
+                        return _el$37;
+                      }
+                    })
+                  });
+                }
+              }), _el$25, _co$5);
+              _$insert(_el$16, _$createComponent(Show, {
+                get when() {
+                  return item().actions?.length;
                 },
                 get children() {
-                  return _$createComponent(Dropdown.Trigger, {
-                    iconOnly: true,
-                    get label() {
-                      return `${item().label}: ${messages().rowAction}`;
+                  return _$createComponent(Dropdown.Root, {
+                    get items() {
+                      return (item().actions ?? []).map(action => ({
+                        label: action.label,
+                        icon: action.icon,
+                        description: action.description,
+                        disabled: disabled() || action.disabled,
+                        action: () => {
+                          if (action.href) void ready().then(allowed => {
+                            if (allowed) documentNavigate(action.href);
+                          });else void activate(action.id);
+                        }
+                      }));
                     },
-                    variant: "ghost",
                     get children() {
-                      return _$getNextElement(_tmpl$8);
+                      return _$createComponent(Dropdown.Trigger, {
+                        iconOnly: true,
+                        get label() {
+                          return `${item().label}: ${messages().rowAction}`;
+                        },
+                        variant: "ghost",
+                        get children() {
+                          return _$getNextElement(_tmpl$10);
+                        }
+                      });
                     }
                   });
                 }
-              });
-            }
-          }), _el$20, _co$5);
-          _$insert(_el$0, _$createComponent(Show, {
-            get when() {
-              return item().children?.length;
-            },
-            get children() {
-              var _el$21 = _$getNextElement(_tmpl$9);
-              _$insert(_el$21, _$createComponent(Rows, {
-                get items() {
-                  return item().children ?? [];
+              }), _el$27, _co$6);
+              _$insert(_el$15, _$createComponent(Show, {
+                get when() {
+                  return item().children?.length;
                 },
-                get disabled() {
-                  return disabled();
+                get children() {
+                  var _el$28 = _$getNextElement(_tmpl$11);
+                  _$insert(_el$28, _$createComponent(Rows, {
+                    get items() {
+                      return item().children ?? [];
+                    },
+                    get disabled() {
+                      return disabled();
+                    }
+                  }));
+                  _$effect(() => _$setProperty(_el$28, "hidden", !open()));
+                  return _el$28;
                 }
-              }));
-              _$effect(() => _$setProperty(_el$21, "hidden", !open()));
-              return _el$21;
-            }
-          }), _el$23, _co$6);
-          _$effect(() => _$setAttribute(_el$1, "data-active", item().active || undefined));
-          return _el$0;
-        })();
+              }), _el$30, _co$7);
+              _$effect(() => _$setAttribute(_el$16, "data-active", item().active || undefined));
+              return _el$15;
+            })();
+          },
+          get children() {
+            var _el$11 = _$getNextElement(_tmpl$0),
+              _el$12 = _el$11.firstChild,
+              _el$13 = _el$12.nextSibling,
+              [_el$14, _co$2] = _$getNextMarker(_el$13.nextSibling);
+            _$setAttribute(_el$12, "id", headingId);
+            _$insert(_el$12, () => item().label);
+            _$insert(_el$11, _$createComponent(Rows, {
+              get items() {
+                return item().children ?? [];
+              },
+              get disabled() {
+                return disabled();
+              },
+              labelledBy: headingId
+            }), _el$14, _co$2);
+            return _el$11;
+          }
+        });
       }
     }));
+    _$effect(() => _$setAttribute(_el$, "aria-labelledby", rows.labelledBy));
     return _el$;
   })();
   return (() => {
-    var _el$31 = _$getNextElement(_tmpl$10);
-    _$insert(_el$31, _$createComponent(Rows, {
+    var _el$38 = _$getNextElement(_tmpl$14);
+    _$insert(_el$38, _$createComponent(Rows, {
       get items() {
         return props.navigation.items();
       }
     }));
-    _$effect(() => _$setAttribute(_el$31, "aria-label", props.label));
-    return _el$31;
+    _$effect(() => _$setAttribute(_el$38, "aria-label", props.label));
+    return _el$38;
   })();
 }
 _$delegateEvents(["click"]);

package/dist/browser/layout/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["layout/Navigation.tsx"],"sourcesContent":["import { documentNavigate, Link } from \"@k2b/ssr/nav\";\nimport { createSignal, For, Show } from \"solid-js\";\nimport { IconButton } from \"../actions/Button\";\nimport { Dropdown } from \"../actions/Dropdown\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { NavigationController, NavigationItem } from \"./navigation-model\";\n\nexport type NavigationProps = {\n  navigation: NavigationController;\n  label: string;\n  /** A host can finish dismissing its menu before the selected operation runs. */\n  beforeSelect?: () => boolean | void | Promise<boolean | void>;\n};\n\nexport default function Navigation(props: NavigationProps) {\n  const messages = useUiMessages();\n  const [expanded, setExpanded] = createSignal<Record<string, boolean>>({});\n  const ready = async () => (await props.beforeSelect?.()) !== false;\n  const activate = async (id: string) => {\n    if (await ready()) await props.navigation.activate(id);\n  };\n  const Rows = (rows: { items: readonly NavigationItem[]; disabled?: boolean }) => (\n    <ul class=\"k2b-navigation__list\">\n      <For each={rows.items.map((item) => item.id)}>\n        {(id) => {\n          const item = () => rows.items.find((entry) => entry.id === id)!;\n          const disabled = () => rows.disabled || item().disabled;\n          // `expanded` hands disclosure to the item's owner; every other toggle stays local to this renderer.\n          const open = () => item().expanded ?? expanded()[id] ?? item().defaultExpanded ?? true;\n          const toggle = () => {\n            if (item().expanded !== undefined) props.navigation.onExpandedChange?.(id, !open());\n            else setExpanded((current) => ({ ...current, [id]: !open() }));\n          };\n          const content = () => (\n            <>\n              <Show when={item().icon}>\n                <i class={item().icon} aria-hidden=\"true\" />\n              </Show>\n              <span class=\"k2b-navigation__copy\">\n                <span>{item().label}</span>\n                <Show when={item().description}>\n                  <small>{item().description}</small>\n                </Show>\n              </span>\n              <Show when={item().color}>\n                <span class=\"k2b-navigation__color\" style={{ \"background-color\": item().color }} />\n              </Show>\n              <Show when={item().badge !== undefined}>\n                <span class=\"k2b-navigation__badge\">{item().badge}</span>\n              </Show>\n            </>\n          );\n          return (\n            <li>\n              <div class=\"k2b-navigation__row\" data-active={item().active || undefined}>\n                <Show\n                  when={item().href}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"k2b-navigation__control\"\n                      disabled={disabled()}\n                      aria-expanded={!item().action ? open() : undefined}\n                      onClick={() => (item().action ? void activate(id) : toggle())}\n                    >\n                      {content()}\n                      <Show when={!item().action && item().children?.length}>\n                        <i class={open() ? \"ti ti-chevron-down\" : \"ti ti-chevron-right\"} aria-hidden=\"true\" />\n                      </Show>\n                    </button>\n                  }\n                >\n                  {(href) => (\n                    <Link\n                      class=\"k2b-navigation__control\"\n                      href={href()}\n                      aria-current={item().active ? \"page\" : undefined}\n                      aria-disabled={disabled() || undefined}\n                      tabIndex={disabled() ? -1 : undefined}\n                      scroll={item().scroll}\n                      onNavigate={async (event) => {\n                        if (!(await ready())) return;\n                        if (item().navigation === \"enhanced\" && props.navigation.onNavigate) await props.navigation.onNavigate(event);\n                        else event.fallback();\n                      }}\n                      onClick={(event) => {\n                        if (disabled()) {\n                          event.preventDefault();\n                          return;\n                        }\n                        if (!item().action || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n                          return;\n                        // Local opening can fetch before committing navigation, outside a view transition.\n                        event.preventDefault();\n                        void activate(id);\n                      }}\n                    >\n                      {content()}\n                    </Link>\n                  )}\n                </Show>\n                <Show when={(item().href || item().action) && item().children?.length}>\n                  <button\n                    type=\"button\"\n                    class=\"k2b-navigation__disclosure\"\n                    aria-label={item().label}\n                    aria-expanded={open()}\n                    disabled={disabled()}\n                    onClick={toggle}\n                  >\n                    <i class={open() ? \"ti ti-chevron-down\" : \"ti ti-chevron-right\"} aria-hidden=\"true\" />\n                  </button>\n                </Show>\n                {/* Keyed by id like the rows, so a button keeps its identity and focus when the model updates. */}\n                <For each={(item().inlineActions ?? []).map((action) => action.id)}>\n                  {(actionId) => {\n                    const action = () => item().inlineActions?.find((entry) => entry.id === actionId);\n                    return (\n                      <Show when={action()}>\n                        {(current) => (\n                          <IconButton\n                            class=\"k2b-navigation__inline-action\"\n                            label={current().label}\n                            disabled={disabled() || current().disabled}\n                            onClick={() => void activate(actionId)}\n                          >\n                            <i class={current().icon} aria-hidden=\"true\" />\n                          </IconButton>\n                        )}\n                      </Show>\n                    );\n                  }}\n                </For>\n                <Show when={item().actions?.length}>\n                  <Dropdown.Root\n                    items={(item().actions ?? []).map((action) => ({\n                      label: action.label,\n                      icon: action.icon,\n                      description: action.description,\n                      disabled: disabled() || action.disabled,\n                      action: () => {\n                        if (action.href)\n                          void ready().then((allowed) => {\n                            if (allowed) documentNavigate(action.href!);\n                          });\n                        else void activate(action.id);\n                      },\n                    }))}\n                  >\n                    <Dropdown.Trigger iconOnly label={`${item().label}: ${messages().rowAction}`} variant=\"ghost\">\n                      <i class=\"ti ti-dots\" aria-hidden=\"true\" />\n                    </Dropdown.Trigger>\n                  </Dropdown.Root>\n                </Show>\n              </div>\n              <Show when={item().children?.length}>\n                <div hidden={!open()}>\n                  <Rows items={item().children ?? []} disabled={disabled()} />\n                </div>\n              </Show>\n            </li>\n          );\n        }}\n      </For>\n    </ul>\n  );\n  return (\n    <nav class=\"k2b-navigation\" aria-label={props.label}>\n      <Rows items={props.navigation.items()} />\n    </nav>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["layout/Navigation.tsx"],"sourcesContent":["import { documentNavigate, Link } from \"@k2b/ssr/nav\";\nimport { createSignal, createUniqueId, For, Show } from \"solid-js\";\nimport { IconButton } from \"../actions/Button\";\nimport { Dropdown } from \"../actions/Dropdown\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { NavigationController, NavigationItem } from \"./navigation-model\";\n\nexport type NavigationProps = {\n  navigation: NavigationController;\n  label: string;\n  /** A host can finish dismissing its menu before the selected operation runs. */\n  beforeSelect?: () => boolean | void | Promise<boolean | void>;\n};\n\n/** A named icon is an image screen readers announce; any other icon is decoration. */\nconst iconAccessibility = (label: string | undefined) => (label ? { role: \"img\" as const, \"aria-label\": label } : { \"aria-hidden\": true });\n\nexport default function Navigation(props: NavigationProps) {\n  const messages = useUiMessages();\n  const [expanded, setExpanded] = createSignal<Record<string, boolean>>({});\n  const ready = async () => (await props.beforeSelect?.()) !== false;\n  const activate = async (id: string) => {\n    if (await ready()) await props.navigation.activate(id);\n  };\n  const Rows = (rows: { items: readonly NavigationItem[]; disabled?: boolean; labelledBy?: string }) => (\n    <ul class=\"k2b-navigation__list\" aria-labelledby={rows.labelledBy}>\n      <For each={rows.items.map((item) => item.id)}>\n        {(id) => {\n          const item = () => rows.items.find((entry) => entry.id === id)!;\n          const disabled = () => rows.disabled || item().disabled;\n          const headingId = `k2b-navigation-section-${createUniqueId()}`;\n          // `expanded` hands disclosure to the item's owner; every other toggle stays local to this renderer.\n          const open = () => item().expanded ?? expanded()[id] ?? item().defaultExpanded ?? true;\n          const toggle = () => {\n            if (item().expanded !== undefined) props.navigation.onExpandedChange?.(id, !open());\n            else setExpanded((current) => ({ ...current, [id]: !open() }));\n          };\n          const content = () => (\n            <>\n              <Show when={item().icon}>\n                <i class={item().icon} {...iconAccessibility(item().iconLabel)} />\n              </Show>\n              <span class=\"k2b-navigation__copy\">\n                <span>{item().label}</span>\n                <Show when={item().description}>\n                  <small>{item().description}</small>\n                </Show>\n              </span>\n              <Show when={item().color}>\n                <span class=\"k2b-navigation__color\" style={{ \"background-color\": item().color }} />\n              </Show>\n              <Show when={item().badge !== undefined}>\n                <span class=\"k2b-navigation__badge\">{item().badge}</span>\n              </Show>\n              {/* `null` keeps the empty slot, so a status that appears later takes no width from the label. */}\n              <Show when={item().status !== undefined}>\n                <span class=\"k2b-navigation__status\" data-tone={item().status?.tone} title={item().status?.label}>\n                  <Show when={item().status}>\n                    {(status) => (\n                      <>\n                        <i class={status().icon} aria-hidden=\"true\" />\n                        <span class=\"k2b-sr-only\">{status().label}</span>\n                      </>\n                    )}\n                  </Show>\n                </span>\n              </Show>\n            </>\n          );\n          return (\n            <Show\n              when={item().section}\n              fallback={\n                <li>\n                  <div class=\"k2b-navigation__row\" data-active={item().active || undefined}>\n                    <Show\n                      when={item().href}\n                      fallback={\n                        <button\n                          type=\"button\"\n                          class=\"k2b-navigation__control\"\n                          disabled={disabled()}\n                          aria-expanded={!item().action ? open() : undefined}\n                          onClick={() => (item().action ? void activate(id) : toggle())}\n                        >\n                          {content()}\n                          <Show when={!item().action && item().children?.length}>\n                            <i class={open() ? \"ti ti-chevron-down\" : \"ti ti-chevron-right\"} aria-hidden=\"true\" />\n                          </Show>\n                        </button>\n                      }\n                    >\n                      {(href) => (\n                        <Link\n                          class=\"k2b-navigation__control\"\n                          href={href()}\n                          aria-current={item().active ? \"page\" : undefined}\n                          aria-disabled={disabled() || undefined}\n                          tabIndex={disabled() ? -1 : undefined}\n                          scroll={item().scroll}\n                          onNavigate={async (event) => {\n                            if (!(await ready())) return;\n                            if (item().navigation === \"enhanced\" && props.navigation.onNavigate) await props.navigation.onNavigate(event);\n                            else event.fallback();\n                          }}\n                          onClick={(event) => {\n                            if (disabled()) {\n                              event.preventDefault();\n                              return;\n                            }\n                            if (!item().action || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n                              return;\n                            // Local opening can fetch before committing navigation, outside a view transition.\n                            event.preventDefault();\n                            void activate(id);\n                          }}\n                        >\n                          {content()}\n                        </Link>\n                      )}\n                    </Show>\n                    <Show when={(item().href || item().action) && item().children?.length}>\n                      <button\n                        type=\"button\"\n                        class=\"k2b-navigation__disclosure\"\n                        aria-label={item().label}\n                        aria-expanded={open()}\n                        disabled={disabled()}\n                        onClick={toggle}\n                      >\n                        <i class={open() ? \"ti ti-chevron-down\" : \"ti ti-chevron-right\"} aria-hidden=\"true\" />\n                      </button>\n                    </Show>\n                    {/* Keyed by id like the rows, so a button keeps its identity and focus when the model updates. */}\n                    <For each={(item().inlineActions ?? []).map((action) => action.id)}>\n                      {(actionId) => {\n                        const action = () => item().inlineActions?.find((entry) => entry.id === actionId);\n                        return (\n                          <Show when={action()}>\n                            {(current) => (\n                              <IconButton\n                                class=\"k2b-navigation__inline-action\"\n                                label={current().label}\n                                disabled={disabled() || current().disabled}\n                                onClick={() => void activate(actionId)}\n                              >\n                                <i class={current().icon} aria-hidden=\"true\" />\n                              </IconButton>\n                            )}\n                          </Show>\n                        );\n                      }}\n                    </For>\n                    <Show when={item().actions?.length}>\n                      <Dropdown.Root\n                        items={(item().actions ?? []).map((action) => ({\n                          label: action.label,\n                          icon: action.icon,\n                          description: action.description,\n                          disabled: disabled() || action.disabled,\n                          action: () => {\n                            if (action.href)\n                              void ready().then((allowed) => {\n                                if (allowed) documentNavigate(action.href!);\n                              });\n                            else void activate(action.id);\n                          },\n                        }))}\n                      >\n                        <Dropdown.Trigger iconOnly label={`${item().label}: ${messages().rowAction}`} variant=\"ghost\">\n                          <i class=\"ti ti-dots\" aria-hidden=\"true\" />\n                        </Dropdown.Trigger>\n                      </Dropdown.Root>\n                    </Show>\n                  </div>\n                  <Show when={item().children?.length}>\n                    <div hidden={!open()}>\n                      <Rows items={item().children ?? []} disabled={disabled()} />\n                    </div>\n                  </Show>\n                </li>\n              }\n            >\n              <li class=\"k2b-navigation__section\">\n                <div class=\"k2b-navigation__heading\" id={headingId}>\n                  {item().label}\n                </div>\n                <Rows items={item().children ?? []} disabled={disabled()} labelledBy={headingId} />\n              </li>\n            </Show>\n          );\n        }}\n      </For>\n    </ul>\n  );\n  return (\n    <nav class=\"k2b-navigation\" aria-label={props.label}>\n      <Rows items={props.navigation.items()} />\n    </nav>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/layout/SidebarItemPreview.js

@@ -9,7 +9,7 @@ import { getNextElement as _$getNextElement } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class="k2b-app-workspace__sidebar-item-action k2b-app-workspace__sidebar-preview-trigger"data-visibility=hover aria-haspopup=dialog><i aria-hidden=true>`);
-import { createSignal, onCleanup, onMount } from "solid-js";
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
 import { createHoverPreview, HoverPreview } from "../feedback/HoverPreview";
 import { ScrollArea } from "./ScrollArea";
 
@@ -45,6 +45,10 @@ export function SidebarItemPreview(props) {
     preview.anchor(true, () => main ?? button)(row ?? button);
     onCleanup(() => main?.removeEventListener("click", toggle));
   });
+  createEffect(() => {
+    const id = props.describedBy;
+    if (id) main?.setAttribute("aria-describedby", id);else main?.removeAttribute("aria-describedby");
+  });
   return [(() => {
     var _el$ = _$getNextElement(_tmpl$),
       _el$2 = _el$.firstChild;