@birdycom/omniaui-react 0.11.2 → 0.12.1

package/dist/index.d.ts

@@ -713,7 +713,7 @@ interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
     triggerProps?: ButtonProps;
 }
 /**
- * Trigger button + `<div class="oc-dropdown-menu" popover>`, wired with `popovertarget`
+ * Trigger button + `<div class="oc-dropdown-menu" popover>`, wired with `popoverTarget`
  * (native popover and anchor positioning, no state needed).
  */
 declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLDivElement>>;
@@ -1977,8 +1977,14 @@ interface ToggleFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
 declare const ToggleField: react.ForwardRefExoticComponent<ToggleFieldProps & react.RefAttributes<HTMLInputElement>>;
 
 interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "content"> {
-    /** Tooltip text (`data-tooltip`). */
+    /** Tooltip text (`data-tooltip`); with `heading`, the lines under the title. */
     content: string;
+    /** Keep the line breaks of `content` (`oc-tooltip--multiline`). */
+    multiline?: boolean;
+    /** Title above `content` (`.oc-tooltip__title`: larger, capital first letter); renders `.oc-tooltip__content`. */
+    heading?: string;
+    /** Preferred side (default top); with anchor positioning it moves to the other side when there is no room. */
+    side?: "top" | "bottom" | "left" | "right";
     children: ReactNode;
 }
 /** `<span class="oc-tooltip" data-tooltip>`: CSS-only tooltip around its children. */

package/dist/index.js

@@ -770,7 +770,7 @@ var ColumnMenu = forwardRef26(function ColumnMenu2({ columns, children, triggerL
   return /* @__PURE__ */ jsxs19("div", { ref, className: cx("oc-column-menu-scope", className), ...rest, children: [
     /* @__PURE__ */ jsxs19("div", { className: "oc-table-toolbar", children: [
       /* @__PURE__ */ jsx26("span", { className: "oc-table-toolbar-spacer" }),
-      /* @__PURE__ */ jsx26("button", { className: "oc-btn oc-btn--outline oc-btn--sm", type: "button", ...attrs({ popovertarget: menuId }), children: triggerLabel })
+      /* @__PURE__ */ jsx26("button", { className: "oc-btn oc-btn--outline oc-btn--sm", type: "button", popoverTarget: menuId, children: triggerLabel })
     ] }),
     /* @__PURE__ */ jsxs19("div", { className: "oc-column-menu", id: menuId, ...attrs({ popover: "" }), children: [
       /* @__PURE__ */ jsx26("p", { className: "oc-column-menu-title", children: title }),
@@ -1811,7 +1811,7 @@ var Dropdown = forwardRef35(function Dropdown2({ trigger, triggerProps, classNam
   const auto = useId12();
   const menuId = id ?? `oc-menu-${auto.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxs28(Fragment7, { children: [
-    /* @__PURE__ */ jsx36(Button, { variant: "outline", ...triggerProps, ...attrs({ popovertarget: menuId }), children: trigger }),
+    /* @__PURE__ */ jsx36(Button, { variant: "outline", ...triggerProps, popoverTarget: menuId, children: trigger }),
     /* @__PURE__ */ jsx36("div", { ref, className: cx("oc-dropdown-menu", className), id: menuId, ...attrs({ popover: "" }), ...rest, children })
   ] });
 });
@@ -1892,7 +1892,7 @@ var EmojiPicker = forwardRef37(function EmojiPicker2({ groups = defaultGroups, o
   );
   if (inline) return panel;
   return /* @__PURE__ */ jsxs30(Fragment8, { children: [
-    /* @__PURE__ */ jsx38("button", { type: "button", className: "oc-emoji-picker__trigger", "aria-label": triggerLabel, ...attrs({ popovertarget: panelId }), children: trigger }),
+    /* @__PURE__ */ jsx38("button", { type: "button", className: "oc-emoji-picker__trigger", "aria-label": triggerLabel, popoverTarget: panelId, children: trigger }),
     panel
   ] });
 });
@@ -2198,6 +2198,17 @@ var Lightbox = forwardRef51(function Lightbox2({ images, title, thumbnails = tru
   const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
   const single = images.length === 1;
   const slideId = (i) => `${base}-${(i % images.length + images.length) % images.length + 1}`;
+  const go = (i) => (e) => {
+    const slide = document.getElementById(slideId(i));
+    if (!slide) return;
+    e.preventDefault();
+    slide.scrollIntoView?.({ behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth", block: "nearest", inline: "center" });
+  };
+  const onClose = (...args) => {
+    const slide = location.hash && document.getElementById(decodeURIComponent(location.hash.slice(1)));
+    if (slide && inner.current?.contains(slide)) history.replaceState(history.state, "", location.pathname + location.search);
+    return dlg.onClose(...args);
+  };
   useEffect6(() => {
     if (dlg.open) document.getElementById(slideId(start))?.scrollIntoView?.({ behavior: "instant", block: "nearest", inline: "center" });
   }, [dlg.open, start]);
@@ -2206,15 +2217,15 @@ var Lightbox = forwardRef51(function Lightbox2({ images, title, thumbnails = tru
       setStart(i);
       dlg.setOpen(true);
     }, children: media2(img, img.thumb ?? img.src) }, i)) }),
-    /* @__PURE__ */ jsxs43("dialog", { ref, className: cx("oc-lightbox", single && "oc-lightbox--single", className), "aria-label": label, ...attrs({ closedby: "any" }), ...rest, onClose: dlg.onClose, children: [
+    /* @__PURE__ */ jsxs43("dialog", { ref, className: cx("oc-lightbox", single && "oc-lightbox--single", className), "aria-label": label, ...attrs({ closedby: "any" }), ...rest, onClose, children: [
       /* @__PURE__ */ jsxs43("div", { className: "oc-lightbox__bar", children: [
         title != null ? /* @__PURE__ */ jsx53("h2", { className: "oc-lightbox__title", children: title }) : /* @__PURE__ */ jsx53("span", {}),
         /* @__PURE__ */ jsx53("button", { type: "button", className: "oc-lightbox__close", "aria-label": "Close", onClick: dlg.close, children: "\u2715" })
       ] }),
       /* @__PURE__ */ jsx53("div", { className: "oc-lightbox__track", tabIndex: 0, "aria-label": "Photos, use the arrow keys", children: images.map((img, i) => /* @__PURE__ */ jsxs43("figure", { className: "oc-lightbox__slide", id: slideId(i), children: [
         /* @__PURE__ */ jsx53("div", { className: "oc-lightbox__media", children: media2(img, img.src) }),
-        !single && /* @__PURE__ */ jsx53("a", { className: "oc-lightbox__nav oc-lightbox__nav--prev", href: `#${slideId(i - 1)}`, "aria-label": "Previous photo", children: "\u2190" }),
-        !single && /* @__PURE__ */ jsx53("a", { className: "oc-lightbox__nav oc-lightbox__nav--next", href: `#${slideId(i + 1)}`, "aria-label": "Next photo", children: "\u2192" }),
+        !single && /* @__PURE__ */ jsx53("a", { className: "oc-lightbox__nav oc-lightbox__nav--prev", href: `#${slideId(i - 1)}`, onClick: go(i - 1), "aria-label": "Previous photo", children: "\u2190" }),
+        !single && /* @__PURE__ */ jsx53("a", { className: "oc-lightbox__nav oc-lightbox__nav--next", href: `#${slideId(i + 1)}`, onClick: go(i + 1), "aria-label": "Next photo", children: "\u2192" }),
         /* @__PURE__ */ jsxs43("figcaption", { className: "oc-lightbox__caption", children: [
           !single && /* @__PURE__ */ jsxs43("span", { className: "oc-lightbox__counter", children: [
             i + 1,
@@ -2331,7 +2342,7 @@ var MediaCard = forwardRef56(function MediaCard2({ title, href, meta, avatar, th
         /* @__PURE__ */ jsx58("h3", { className: "oc-media-card__title", children: /* @__PURE__ */ jsx58("a", { href, children: title }) }),
         meta != null && /* @__PURE__ */ jsx58("p", { className: "oc-media-card__meta", children: meta })
       ] }),
-      menu != null && /* @__PURE__ */ jsx58("button", { type: "button", className: "oc-media-card__menu", "aria-label": "More actions", ...attrs({ popovertarget: menuId }), children: "\u22EE" })
+      menu != null && /* @__PURE__ */ jsx58("button", { type: "button", className: "oc-media-card__menu", "aria-label": "More actions", popoverTarget: menuId, children: "\u22EE" })
     ] }),
     menu != null && /* @__PURE__ */ jsx58("div", { className: "oc-dropdown-menu", id: menuId, ...attrs({ popover: "" }), children: menu })
   ] });
@@ -2353,7 +2364,7 @@ var MediaRow = forwardRef57(function MediaRow2({ title, href, meta, thumb, curre
       meta != null && /* @__PURE__ */ jsx59("p", { className: "oc-media-row__meta", children: meta })
     ] }),
     menu != null && /* @__PURE__ */ jsxs48(Fragment13, { children: [
-      /* @__PURE__ */ jsx59("button", { type: "button", className: "oc-media-row__menu", "aria-label": "More actions", ...attrs({ popovertarget: menuId }), children: "\u22EE" }),
+      /* @__PURE__ */ jsx59("button", { type: "button", className: "oc-media-row__menu", "aria-label": "More actions", popoverTarget: menuId, children: "\u22EE" }),
       /* @__PURE__ */ jsx59("div", { className: "oc-dropdown-menu", id: menuId, ...attrs({ popover: "" }), children: menu })
     ] })
   ] });
@@ -2582,7 +2593,7 @@ var MessageThread = forwardRef59(function MessageThread2({
       (status || menu) && /* @__PURE__ */ jsxs50("div", { className: "oc-message-thread__actions", children: [
         status && /* @__PURE__ */ jsx61("span", { className: cx("oc-badge", status.variant && `oc-badge--${status.variant}`), children: status.label }),
         menu && /* @__PURE__ */ jsxs50(Fragment15, { children: [
-          /* @__PURE__ */ jsx61("button", { type: "button", className: "oc-message-thread__icon-btn", ...attrs({ popovertarget: `${base}-menu` }), "aria-label": "Conversation actions", children: /* @__PURE__ */ jsxs50("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx61("button", { type: "button", className: "oc-message-thread__icon-btn", popoverTarget: `${base}-menu`, "aria-label": "Conversation actions", children: /* @__PURE__ */ jsxs50("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx61("circle", { cx: "12", cy: "5", r: "1.8" }),
             /* @__PURE__ */ jsx61("circle", { cx: "12", cy: "12", r: "1.8" }),
             /* @__PURE__ */ jsx61("circle", { cx: "12", cy: "19", r: "1.8" })
@@ -2677,7 +2688,7 @@ var NavmenuDropdown = forwardRef61(function NavmenuDropdown2({ label, className,
   const auto = useId24();
   const menuId = id ?? `oc-navmenu-${auto.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxs52("li", { children: [
-    /* @__PURE__ */ jsx63("button", { className: "oc-navmenu-link oc-navmenu-link--caret", type: "button", ...attrs({ popovertarget: menuId }), children: label }),
+    /* @__PURE__ */ jsx63("button", { className: "oc-navmenu-link oc-navmenu-link--caret", type: "button", popoverTarget: menuId, children: label }),
     /* @__PURE__ */ jsx63("div", { ref, className: cx("oc-dropdown-menu", className), id: menuId, ...attrs({ popover: "" }), ...rest, children })
   ] });
 });
@@ -2886,7 +2897,7 @@ var Popover = forwardRef70(function Popover2({ trigger, triggerProps, size = "md
   const auto = useId25();
   const panelId = id ?? `oc-popover-${auto.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxs58(Fragment16, { children: [
-    /* @__PURE__ */ jsx72(Button, { variant: "outline", type: "button", ...triggerProps, ...attrs({ popovertarget: panelId }), children: trigger }),
+    /* @__PURE__ */ jsx72(Button, { variant: "outline", type: "button", ...triggerProps, popoverTarget: panelId, children: trigger }),
     /* @__PURE__ */ jsxs58("div", { ref, className: cx("oc-popover", size !== "md" && `oc-popover--${size}`, className), id: panelId, ...attrs({ popover: "" }), ...rest, children: [
       title != null && /* @__PURE__ */ jsx72("h3", { className: "oc-popover-title", children: title }),
       text != null && /* @__PURE__ */ jsx72("p", { className: "oc-popover-text", children: text }),
@@ -3456,7 +3467,7 @@ var TableActionsMenu = forwardRef89(function TableActionsMenu2({ label, id, clas
   const auto = useId29();
   const menuId = id ?? `oc-table-actions-menu-${auto.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxs75(Fragment21, { children: [
-    /* @__PURE__ */ jsx91("button", { className: "oc-table-actions-more", type: "button", "aria-label": label, ...attrs({ popovertarget: menuId }) }),
+    /* @__PURE__ */ jsx91("button", { className: "oc-table-actions-more", type: "button", "aria-label": label, popoverTarget: menuId }),
     /* @__PURE__ */ jsx91("div", { ref, id: menuId, className: cx("oc-dropdown-menu", className), ...attrs({ popover: "" }), ...rest, children })
   ] });
 });
@@ -3741,9 +3752,17 @@ var ToggleField = forwardRef99(function ToggleField2({ label, description, card,
 
 // src/components/Tooltip.tsx
 import { forwardRef as forwardRef100 } from "react";
-import { jsx as jsx102 } from "react/jsx-runtime";
-var Tooltip = forwardRef100(function Tooltip2({ content, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx102("span", { ref, className: cx("oc-tooltip", className), "data-tooltip": content, ...rest });
+import { jsx as jsx102, jsxs as jsxs85 } from "react/jsx-runtime";
+var Tooltip = forwardRef100(function Tooltip2({ content, multiline, heading, side, className, children, ...rest }, ref) {
+  const classes = cx("oc-tooltip", multiline && !heading && "oc-tooltip--multiline", side && side !== "top" && `oc-tooltip--${side}`, className);
+  if (!heading) return /* @__PURE__ */ jsx102("span", { ref, className: classes, "data-tooltip": content, ...rest, children });
+  return /* @__PURE__ */ jsxs85("span", { ref, className: classes, ...rest, children: [
+    children,
+    /* @__PURE__ */ jsxs85("span", { className: "oc-tooltip__content", role: "tooltip", children: [
+      /* @__PURE__ */ jsx102("span", { className: "oc-tooltip__title", children: heading }),
+      content
+    ] })
+  ] });
 });
 
 // src/components/TopProgress.tsx
@@ -3773,10 +3792,10 @@ var TopProgress = forwardRef101(function TopProgress2({ active = true, tone = "d
 
 // src/components/Tree.tsx
 import { forwardRef as forwardRef102 } from "react";
-import { Fragment as Fragment24, jsx as jsx104, jsxs as jsxs85 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx104, jsxs as jsxs86 } from "react/jsx-runtime";
 function RowContent({ item }) {
   const isLink = item.href !== void 0;
-  return /* @__PURE__ */ jsxs85(Fragment24, { children: [
+  return /* @__PURE__ */ jsxs86(Fragment24, { children: [
     item.icon != null && /* @__PURE__ */ jsx104("span", { className: "oc-tree-icon", "aria-hidden": "true", children: item.icon }),
     isLink ? /* @__PURE__ */ jsx104("a", { className: "oc-tree-label", href: item.href, "aria-current": item.current ? "true" : void 0, children: item.label }) : /* @__PURE__ */ jsx104("span", { className: "oc-tree-label", children: item.label }),
     item.count != null && /* @__PURE__ */ jsx104("span", { className: "oc-tree-count", children: item.count }),
@@ -3789,7 +3808,7 @@ function TreeNode({ item }) {
   if (!item.children?.length) {
     return /* @__PURE__ */ jsx104("li", { children: /* @__PURE__ */ jsx104("div", { className: rowCls, "aria-current": rowCurrent, children: /* @__PURE__ */ jsx104(RowContent, { item }) }) });
   }
-  return /* @__PURE__ */ jsx104("li", { children: /* @__PURE__ */ jsxs85("details", { className: "oc-tree-node", open: item.open, children: [
+  return /* @__PURE__ */ jsx104("li", { children: /* @__PURE__ */ jsxs86("details", { className: "oc-tree-node", open: item.open, children: [
     /* @__PURE__ */ jsx104("summary", { className: rowCls, "aria-current": rowCurrent, children: /* @__PURE__ */ jsx104(RowContent, { item }) }),
     /* @__PURE__ */ jsx104(TreeList, { items: item.children })
   ] }) });
@@ -3798,8 +3817,8 @@ function TreeList({ items }) {
   return /* @__PURE__ */ jsx104("ul", { className: "oc-tree-list", children: items.map((item, i) => /* @__PURE__ */ jsx104(TreeNode, { item }, i)) });
 }
 var Tree = forwardRef102(function Tree2({ items, head, headActions, quiet, flush, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs85("div", { ref, className: cx("oc-tree", quiet && "oc-tree--quiet", flush && "oc-tree--flush", className), ...rest, children: [
-    head != null && /* @__PURE__ */ jsxs85("div", { className: "oc-tree-row oc-tree-head", children: [
+  return /* @__PURE__ */ jsxs86("div", { ref, className: cx("oc-tree", quiet && "oc-tree--quiet", flush && "oc-tree--flush", className), ...rest, children: [
+    head != null && /* @__PURE__ */ jsxs86("div", { className: "oc-tree-row oc-tree-head", children: [
       /* @__PURE__ */ jsx104("span", { className: "oc-tree-label", children: head }),
       headActions != null && /* @__PURE__ */ jsx104("span", { className: "oc-tree-actions", children: headActions })
     ] }),
@@ -3809,29 +3828,29 @@ var Tree = forwardRef102(function Tree2({ items, head, headActions, quiet, flush
 
 // src/components/UpgradeBanner.tsx
 import { forwardRef as forwardRef103 } from "react";
-import { Fragment as Fragment25, jsx as jsx105, jsxs as jsxs86 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx105, jsxs as jsxs87 } from "react/jsx-runtime";
 var UpgradeBanner = forwardRef103(function UpgradeBanner2({ title, plan, text, usage, icon, actions, premium, compact, onDismiss, dismissLabel = "Dismiss", className, children, ...rest }, ref) {
   const cls = cx("oc-upgrade-banner", premium && "oc-upgrade-banner--premium", compact && "oc-upgrade-banner--compact", className);
   const body = text ?? children;
-  return /* @__PURE__ */ jsxs86("aside", { ref, className: cls, ...rest, children: [
+  return /* @__PURE__ */ jsxs87("aside", { ref, className: cls, ...rest, children: [
     icon != null && /* @__PURE__ */ jsx105("span", { className: "oc-upgrade-banner-icon", "aria-hidden": "true", children: icon }),
-    /* @__PURE__ */ jsxs86("div", { className: "oc-upgrade-banner-body", children: [
-      /* @__PURE__ */ jsxs86("p", { className: "oc-upgrade-banner-title", children: [
+    /* @__PURE__ */ jsxs87("div", { className: "oc-upgrade-banner-body", children: [
+      /* @__PURE__ */ jsxs87("p", { className: "oc-upgrade-banner-title", children: [
         title,
-        plan != null && /* @__PURE__ */ jsxs86(Fragment25, { children: [
+        plan != null && /* @__PURE__ */ jsxs87(Fragment25, { children: [
           " ",
           /* @__PURE__ */ jsx105("span", { className: "oc-upgrade-banner-plan", children: plan })
         ] })
       ] }),
       body != null && /* @__PURE__ */ jsx105("p", { className: "oc-upgrade-banner-text", children: body }),
-      usage && /* @__PURE__ */ jsxs86("div", { className: "oc-upgrade-banner-usage", children: [
+      usage && /* @__PURE__ */ jsxs87("div", { className: "oc-upgrade-banner-usage", children: [
         /* @__PURE__ */ jsx105("span", { children: usage.label }),
-        /* @__PURE__ */ jsxs86("meter", { className: "oc-upgrade-banner-meter", min: 0, max: usage.max, low: usage.max * 0.6, high: usage.max * 0.8, optimum: 0, value: usage.value, children: [
+        /* @__PURE__ */ jsxs87("meter", { className: "oc-upgrade-banner-meter", min: 0, max: usage.max, low: usage.max * 0.6, high: usage.max * 0.8, optimum: 0, value: usage.value, children: [
           usage.value,
           " of ",
           usage.max
         ] }),
-        /* @__PURE__ */ jsxs86("span", { children: [
+        /* @__PURE__ */ jsxs87("span", { children: [
           usage.value,
           " / ",
           usage.max
@@ -3845,11 +3864,11 @@ var UpgradeBanner = forwardRef103(function UpgradeBanner2({ title, plan, text, u
 
 // src/components/User.tsx
 import { forwardRef as forwardRef104 } from "react";
-import { jsx as jsx106, jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs88 } from "react/jsx-runtime";
 var User = forwardRef104(function User2({ name, email, initials, avatarSrc, avatarSize = "md", className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs87("div", { ref, className: cx("oc-user", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs88("div", { ref, className: cx("oc-user", className), ...rest, children: [
     /* @__PURE__ */ jsx106(Avatar, { size: avatarSize, src: avatarSrc, children: initials }),
-    /* @__PURE__ */ jsxs87("span", { className: "oc-user-text", children: [
+    /* @__PURE__ */ jsxs88("span", { className: "oc-user-text", children: [
       /* @__PURE__ */ jsx106("span", { className: "oc-user-name", children: name }),
       email != null && /* @__PURE__ */ jsx106("span", { className: "oc-user-email", children: email })
     ] })
@@ -3858,11 +3877,11 @@ var User = forwardRef104(function User2({ name, email, initials, avatarSrc, avat
 
 // src/components/VersionBanner.tsx
 import { forwardRef as forwardRef105 } from "react";
-import { jsx as jsx107, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs89 } from "react/jsx-runtime";
 var VersionBanner = forwardRef105(function VersionBanner2({ version, text, short = "New version", actionLabel = "Reload", onReload, tone = "warning", floating, className, ...rest }, ref) {
   if (!version) return null;
   const cls = cx("oc-version-banner", tone !== "warning" && `oc-version-banner--${tone}`, floating && "oc-version-banner--floating", className);
-  return /* @__PURE__ */ jsxs88("div", { ref, className: cls, role: "status", ...rest, children: [
+  return /* @__PURE__ */ jsxs89("div", { ref, className: cls, role: "status", ...rest, children: [
     /* @__PURE__ */ jsx107("span", { className: "oc-version-banner-dot", "aria-hidden": "true" }),
     /* @__PURE__ */ jsx107("span", { className: "oc-version-banner-text", children: text ?? `New version (${version}) available - reload the page` }),
     /* @__PURE__ */ jsx107("span", { className: "oc-version-banner-short", children: short }),
@@ -3872,15 +3891,15 @@ var VersionBanner = forwardRef105(function VersionBanner2({ version, text, short
 
 // src/blocks/BlockAboutTimeline.tsx
 import { forwardRef as forwardRef106, useId as useId34 } from "react";
-import { jsx as jsx108, jsxs as jsxs89 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs90 } from "react/jsx-runtime";
 var BlockAboutTimeline = forwardRef106(function BlockAboutTimeline2({ eyebrow, title, children, timeline = [], image, imageAlt = "", badge, reverse = false, className, ...rest }, ref) {
   const titleId = `oc-about-title-${useId34().replace(/[^\w-]/g, "")}`;
-  return /* @__PURE__ */ jsx108("section", { ref, className: cx("oc-block-about", reverse && "oc-block-about--reverse", className), "aria-labelledby": titleId, ...rest, children: /* @__PURE__ */ jsxs89("div", { className: "oc-block-about-inner", children: [
-    /* @__PURE__ */ jsxs89("figure", { className: "oc-block-about-media", "aria-hidden": image ? void 0 : true, children: [
+  return /* @__PURE__ */ jsx108("section", { ref, className: cx("oc-block-about", reverse && "oc-block-about--reverse", className), "aria-labelledby": titleId, ...rest, children: /* @__PURE__ */ jsxs90("div", { className: "oc-block-about-inner", children: [
+    /* @__PURE__ */ jsxs90("figure", { className: "oc-block-about-media", "aria-hidden": image ? void 0 : true, children: [
       image && /* @__PURE__ */ jsx108("img", { src: image, alt: imageAlt, loading: "lazy" }),
       badge != null && /* @__PURE__ */ jsx108("span", { className: "oc-block-about-badge", children: badge })
     ] }),
-    /* @__PURE__ */ jsxs89("div", { className: "oc-block-about-copy", children: [
+    /* @__PURE__ */ jsxs90("div", { className: "oc-block-about-copy", children: [
       eyebrow != null && /* @__PURE__ */ jsx108("p", { className: "oc-eyebrow", children: eyebrow }),
       /* @__PURE__ */ jsx108("h2", { className: "oc-block-about-title", id: titleId, children: title }),
       children,
@@ -3891,10 +3910,10 @@ var BlockAboutTimeline = forwardRef106(function BlockAboutTimeline2({ eyebrow, t
 
 // src/blocks/BlockAppHeader.tsx
 import { forwardRef as forwardRef107 } from "react";
-import { jsx as jsx109, jsxs as jsxs90 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs91 } from "react/jsx-runtime";
 var BlockAppHeader = forwardRef107(function BlockAppHeader2({ toggleFor, toggleLabel = "Toggle sidebar", nav, navLabel = "Module navigation", actions, title, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs90("header", { ref, className: cx("oc-block-appbar", className), ...rest, children: [
-    toggleFor && /* @__PURE__ */ jsxs90("label", { className: "oc-btn oc-btn--ghost oc-btn--icon", htmlFor: toggleFor, title: toggleLabel, children: [
+  return /* @__PURE__ */ jsxs91("header", { ref, className: cx("oc-block-appbar", className), ...rest, children: [
+    toggleFor && /* @__PURE__ */ jsxs91("label", { className: "oc-btn oc-btn--ghost oc-btn--icon", htmlFor: toggleFor, title: toggleLabel, children: [
       /* @__PURE__ */ jsx109(Icon, { d: "M4 6h16M4 12h16M4 18h16" }),
       /* @__PURE__ */ jsx109("span", { className: "oc-visually-hidden", children: toggleLabel })
     ] }),
@@ -3906,11 +3925,11 @@ var BlockAppHeader = forwardRef107(function BlockAppHeader2({ toggleFor, toggleL
 
 // src/blocks/BlockAppShell.tsx
 import { forwardRef as forwardRef108, useId as useId35 } from "react";
-import { jsx as jsx110, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx110, jsxs as jsxs92 } from "react/jsx-runtime";
 var BlockAppShell = forwardRef108(function BlockAppShell2({ sidebar, header, breadcrumbs, toggleId, height, className, style, children, ...rest }, ref) {
   const auto = useId35();
   const id = toggleId ?? `oc-shell-toggle-${auto.replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsxs91(
+  return /* @__PURE__ */ jsxs92(
     "div",
     {
       ref,
@@ -3920,7 +3939,7 @@ var BlockAppShell = forwardRef108(function BlockAppShell2({ sidebar, header, bre
       children: [
         /* @__PURE__ */ jsx110("input", { className: "oc-block-shell-toggle", type: "checkbox", id, "aria-label": "Collapse sidebar" }),
         sidebar,
-        /* @__PURE__ */ jsxs91("div", { className: "oc-block-shell-main", children: [
+        /* @__PURE__ */ jsxs92("div", { className: "oc-block-shell-main", children: [
           header,
           breadcrumbs && /* @__PURE__ */ jsx110("div", { className: "oc-block-shell-breadcrumbs", children: /* @__PURE__ */ jsx110("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx110("ol", { className: "oc-breadcrumb", children: breadcrumbs.map(
             (item, i) => item.href && i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx110("li", { className: "oc-breadcrumb-item", children: /* @__PURE__ */ jsx110("a", { href: item.href, children: item.label }) }, i) : /* @__PURE__ */ jsx110("li", { className: "oc-breadcrumb-item", "aria-current": "page", children: item.label }, i)
@@ -3934,7 +3953,7 @@ var BlockAppShell = forwardRef108(function BlockAppShell2({ sidebar, header, bre
 
 // src/blocks/BlockAuth.tsx
 import { forwardRef as forwardRef109, useId as useId36 } from "react";
-import { Fragment as Fragment26, jsx as jsx111, jsxs as jsxs92 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx111, jsxs as jsxs93 } from "react/jsx-runtime";
 var BlockAuth = forwardRef109(function BlockAuth2({ title = "Sign in", subtitle, submitLabel = "Sign in", socialLabel, dividerLabel = "or continue with", footer, onSubmit, onSocial, className, ...rest }, ref) {
   const id = useId36().replace(/:/g, "");
   const submit = (e) => {
@@ -3942,20 +3961,20 @@ var BlockAuth = forwardRef109(function BlockAuth2({ title = "Sign in", subtitle,
     const data = new FormData(e.currentTarget);
     onSubmit?.({ email: String(data.get("email") ?? ""), password: String(data.get("password") ?? "") });
   };
-  return /* @__PURE__ */ jsxs92("div", { ref, className: cx("oc-block-auth", className), ...rest, children: [
-    /* @__PURE__ */ jsxs92("form", { className: "oc-block-auth-card", onSubmit: submit, children: [
+  return /* @__PURE__ */ jsxs93("div", { ref, className: cx("oc-block-auth", className), ...rest, children: [
+    /* @__PURE__ */ jsxs93("form", { className: "oc-block-auth-card", onSubmit: submit, children: [
       /* @__PURE__ */ jsx111("h2", { children: title }),
       subtitle != null && /* @__PURE__ */ jsx111("p", { className: "oc-block-subtitle", children: subtitle }),
-      /* @__PURE__ */ jsxs92("div", { className: "oc-form-group", children: [
+      /* @__PURE__ */ jsxs93("div", { className: "oc-form-group", children: [
         /* @__PURE__ */ jsx111("label", { className: "oc-label", htmlFor: `${id}-email`, children: "Email" }),
         /* @__PURE__ */ jsx111("input", { className: "oc-input", id: `${id}-email`, name: "email", type: "email", placeholder: "name@company.com" })
       ] }),
-      /* @__PURE__ */ jsxs92("div", { className: "oc-form-group", children: [
+      /* @__PURE__ */ jsxs93("div", { className: "oc-form-group", children: [
         /* @__PURE__ */ jsx111("label", { className: "oc-label", htmlFor: `${id}-password`, children: "Password" }),
         /* @__PURE__ */ jsx111("input", { className: "oc-input", id: `${id}-password`, name: "password", type: "password", placeholder: "********" })
       ] }),
       /* @__PURE__ */ jsx111("button", { className: "oc-btn", type: "submit", style: { width: "100%" }, children: submitLabel }),
-      socialLabel != null && /* @__PURE__ */ jsxs92(Fragment26, { children: [
+      socialLabel != null && /* @__PURE__ */ jsxs93(Fragment26, { children: [
         /* @__PURE__ */ jsx111("div", { className: "oc-block-auth-divider", children: dividerLabel }),
         /* @__PURE__ */ jsx111("button", { className: "oc-btn oc-btn--outline", type: "button", style: { width: "100%" }, onClick: onSocial, children: socialLabel })
       ] })
@@ -3966,7 +3985,7 @@ var BlockAuth = forwardRef109(function BlockAuth2({ title = "Sign in", subtitle,
 
 // src/blocks/BlockAuthSplit.tsx
 import { forwardRef as forwardRef110, useId as useId37 } from "react";
-import { jsx as jsx112, jsxs as jsxs93 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs94 } from "react/jsx-runtime";
 var BlockAuthSplit = forwardRef110(function BlockAuthSplit2({
   logo,
   logoHref = "#",
@@ -3992,28 +4011,28 @@ var BlockAuthSplit = forwardRef110(function BlockAuthSplit2({
       remember: data.get("remember") != null
     });
   };
-  return /* @__PURE__ */ jsxs93("div", { ref, className: cx("oc-block-authsplit", className), ...rest, children: [
-    /* @__PURE__ */ jsxs93("aside", { className: "oc-block-authsplit-brand", children: [
+  return /* @__PURE__ */ jsxs94("div", { ref, className: cx("oc-block-authsplit", className), ...rest, children: [
+    /* @__PURE__ */ jsxs94("aside", { className: "oc-block-authsplit-brand", children: [
       logo != null && /* @__PURE__ */ jsx112("a", { className: "oc-block-authsplit-logo", href: logoHref, children: logo }),
-      quote != null && /* @__PURE__ */ jsxs93("blockquote", { className: "oc-block-authsplit-quote", children: [
+      quote != null && /* @__PURE__ */ jsxs94("blockquote", { className: "oc-block-authsplit-quote", children: [
         /* @__PURE__ */ jsx112("p", { children: quote }),
         quoteAuthor != null && /* @__PURE__ */ jsx112("footer", { children: quoteAuthor })
       ] })
     ] }),
-    /* @__PURE__ */ jsx112("div", { className: "oc-block-authsplit-form", children: /* @__PURE__ */ jsxs93("form", { className: "oc-block-authsplit-card", onSubmit: submit, children: [
+    /* @__PURE__ */ jsx112("div", { className: "oc-block-authsplit-form", children: /* @__PURE__ */ jsxs94("form", { className: "oc-block-authsplit-card", onSubmit: submit, children: [
       /* @__PURE__ */ jsx112("h1", { className: "oc-block-authsplit-title", children: title }),
       subtitle != null && /* @__PURE__ */ jsx112("p", { className: "oc-block-authsplit-subtitle", children: subtitle }),
-      /* @__PURE__ */ jsxs93("div", { className: "oc-block-authsplit-fields", children: [
-        /* @__PURE__ */ jsxs93("div", { className: "oc-field", children: [
+      /* @__PURE__ */ jsxs94("div", { className: "oc-block-authsplit-fields", children: [
+        /* @__PURE__ */ jsxs94("div", { className: "oc-field", children: [
           /* @__PURE__ */ jsx112("label", { className: "oc-field-label", htmlFor: `${id}-email`, children: "E-mail" }),
           /* @__PURE__ */ jsx112("input", { className: "oc-input", id: `${id}-email`, name: "email", type: "email", autoComplete: "username", placeholder: "name@company.com", required: true })
         ] }),
-        /* @__PURE__ */ jsxs93("div", { className: "oc-field", children: [
+        /* @__PURE__ */ jsxs94("div", { className: "oc-field", children: [
           /* @__PURE__ */ jsx112("label", { className: "oc-field-label", htmlFor: `${id}-password`, children: "Password" }),
           /* @__PURE__ */ jsx112(PasswordInput, { id: `${id}-password`, name: "password", required: true })
         ] }),
-        /* @__PURE__ */ jsxs93("div", { className: "oc-block-authsplit-row", children: [
-          /* @__PURE__ */ jsxs93("label", { children: [
+        /* @__PURE__ */ jsxs94("div", { className: "oc-block-authsplit-row", children: [
+          /* @__PURE__ */ jsxs94("label", { children: [
             /* @__PURE__ */ jsx112("input", { className: "oc-checkbox", type: "checkbox", name: "remember" }),
             " ",
             rememberLabel
@@ -4028,11 +4047,11 @@ var BlockAuthSplit = forwardRef110(function BlockAuthSplit2({
 
 // src/blocks/BlockContactGrid.tsx
 import { forwardRef as forwardRef111, useId as useId38 } from "react";
-import { jsx as jsx113, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx113, jsxs as jsxs95 } from "react/jsx-runtime";
 var BlockContactGrid = forwardRef111(function BlockContactGrid2({ eyebrow, title, lead, cards, plain = false, className, ...rest }, ref) {
   const titleId = `oc-contact-title-${useId38().replace(/[^\w-]/g, "")}`;
-  return /* @__PURE__ */ jsxs94("section", { ref, className: cx("oc-block-contact", plain && "oc-block-contact--plain", className), "aria-labelledby": title != null ? titleId : void 0, ...rest, children: [
-    (eyebrow != null || title != null || lead != null) && /* @__PURE__ */ jsxs94("div", { className: "oc-block-contact-head", children: [
+  return /* @__PURE__ */ jsxs95("section", { ref, className: cx("oc-block-contact", plain && "oc-block-contact--plain", className), "aria-labelledby": title != null ? titleId : void 0, ...rest, children: [
+    (eyebrow != null || title != null || lead != null) && /* @__PURE__ */ jsxs95("div", { className: "oc-block-contact-head", children: [
       eyebrow != null && /* @__PURE__ */ jsx113("p", { className: "oc-eyebrow", children: eyebrow }),
       title != null && /* @__PURE__ */ jsx113("h2", { className: "oc-block-contact-heading", id: titleId, children: title }),
       lead != null && /* @__PURE__ */ jsx113("p", { className: "oc-block-contact-lead", children: lead })
@@ -4041,7 +4060,7 @@ var BlockContactGrid = forwardRef111(function BlockContactGrid2({ eyebrow, title
       const Card2 = card.address ? "address" : "article";
       const Title = card.address ? "span" : "h3";
       const Line = card.address ? "span" : "p";
-      return /* @__PURE__ */ jsxs94(Card2, { className: "oc-block-contact-card", children: [
+      return /* @__PURE__ */ jsxs95(Card2, { className: "oc-block-contact-card", children: [
         card.icon != null && /* @__PURE__ */ jsx113("span", { className: cx("oc-product-mark oc-product-mark--sm oc-product-mark--soft", card.accent && `oc-accent--${card.accent}`), "aria-hidden": "true", children: card.icon }),
         /* @__PURE__ */ jsx113(Title, { className: "oc-block-contact-title", children: card.title }),
         card.lines.map(
@@ -4054,9 +4073,9 @@ var BlockContactGrid = forwardRef111(function BlockContactGrid2({ eyebrow, title
 
 // src/blocks/BlockCta.tsx
 import { forwardRef as forwardRef112 } from "react";
-import { jsx as jsx114, jsxs as jsxs95 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs96 } from "react/jsx-runtime";
 var BlockCta = forwardRef112(function BlockCta2({ title, description, actions, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs95("div", { ref, className: cx("oc-block-cta", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs96("div", { ref, className: cx("oc-block-cta", className), ...rest, children: [
     /* @__PURE__ */ jsx114("h2", { children: title }),
     description != null && /* @__PURE__ */ jsx114("p", { children: description }),
     actions != null && /* @__PURE__ */ jsx114("div", { className: "oc-block-hero-actions", children: actions })
@@ -4065,17 +4084,17 @@ var BlockCta = forwardRef112(function BlockCta2({ title, description, actions, c
 
 // src/blocks/BlockDataTable.tsx
 import { forwardRef as forwardRef113 } from "react";
-import { jsx as jsx115, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs97 } from "react/jsx-runtime";
 var BlockDataTable = forwardRef113(function BlockDataTable2({ title, description, actions, toolbar, bulk, footer, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs96("section", { ref, className: cx("oc-card oc-block-datatable", className), ...rest, children: [
-    /* @__PURE__ */ jsxs96("header", { className: "oc-block-datatable-head", children: [
-      /* @__PURE__ */ jsxs96("div", { children: [
+  return /* @__PURE__ */ jsxs97("section", { ref, className: cx("oc-card oc-block-datatable", className), ...rest, children: [
+    /* @__PURE__ */ jsxs97("header", { className: "oc-block-datatable-head", children: [
+      /* @__PURE__ */ jsxs97("div", { children: [
         title != null && /* @__PURE__ */ jsx115("h2", { className: "oc-block-datatable-title", children: title }),
         description != null && /* @__PURE__ */ jsx115("p", { className: "oc-block-datatable-description", children: description })
       ] }),
       actions != null && /* @__PURE__ */ jsx115("div", { children: actions })
     ] }),
-    /* @__PURE__ */ jsxs96("div", { className: "oc-block-datatable-body", children: [
+    /* @__PURE__ */ jsxs97("div", { className: "oc-block-datatable-body", children: [
       toolbar != null && /* @__PURE__ */ jsx115("div", { className: "oc-table-toolbar", children: toolbar }),
       bulk != null && /* @__PURE__ */ jsx115("div", { className: "oc-block-datatable-bulk", children: bulk }),
       children,
@@ -4095,20 +4114,20 @@ function FilterPill({ current, className, ...rest }) {
 
 // src/blocks/BlockFaq.tsx
 import { forwardRef as forwardRef114, useId as useId39 } from "react";
-import { jsx as jsx116, jsxs as jsxs97 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs98 } from "react/jsx-runtime";
 var BlockFaq = forwardRef114(function BlockFaq2({ eyebrow, title, lead, items, openIndex = 0, more, split = false, name, className, ...rest }, ref) {
   const auto = useId39().replace(/[^\w-]/g, "");
   const group = name ?? `oc-faq-${auto}`;
   const titleId = `oc-faq-title-${auto}`;
-  return /* @__PURE__ */ jsx116("section", { ref, className: cx("oc-block-faq", split && "oc-block-faq--split", className), "aria-labelledby": titleId, ...rest, children: /* @__PURE__ */ jsxs97("div", { className: "oc-block-faq-inner", children: [
-    /* @__PURE__ */ jsxs97("div", { className: "oc-block-faq-head", children: [
+  return /* @__PURE__ */ jsx116("section", { ref, className: cx("oc-block-faq", split && "oc-block-faq--split", className), "aria-labelledby": titleId, ...rest, children: /* @__PURE__ */ jsxs98("div", { className: "oc-block-faq-inner", children: [
+    /* @__PURE__ */ jsxs98("div", { className: "oc-block-faq-head", children: [
       eyebrow != null && /* @__PURE__ */ jsx116("p", { className: "oc-eyebrow", children: eyebrow }),
       /* @__PURE__ */ jsx116("h2", { className: "oc-block-faq-title", id: titleId, children: title }),
       lead != null && /* @__PURE__ */ jsx116("p", { className: "oc-block-faq-lead", children: lead })
     ] }),
     /* @__PURE__ */ jsx116("div", { className: "oc-accordion oc-block-faq-list", children: items.map((item, i) => (
       // "name" groups the items; React 19 passes it through, older versions too (unknown attribute on details).
-      /* @__PURE__ */ jsxs97("details", { className: "oc-accordion-item", ...{ name: group }, open: i === openIndex || void 0, children: [
+      /* @__PURE__ */ jsxs98("details", { className: "oc-accordion-item", ...{ name: group }, open: i === openIndex || void 0, children: [
         /* @__PURE__ */ jsx116("summary", { className: "oc-accordion-trigger", children: item.question }),
         /* @__PURE__ */ jsx116("div", { className: "oc-accordion-content", children: item.answer })
       ] }, i)
@@ -4119,12 +4138,12 @@ var BlockFaq = forwardRef114(function BlockFaq2({ eyebrow, title, lead, items, o
 
 // src/blocks/BlockFeatures.tsx
 import { forwardRef as forwardRef115 } from "react";
-import { jsx as jsx117, jsxs as jsxs98 } from "react/jsx-runtime";
+import { jsx as jsx117, jsxs as jsxs99 } from "react/jsx-runtime";
 var BlockFeatures = forwardRef115(function BlockFeatures2({ title, description, features, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs98("div", { ref, className: cx("oc-block-features", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs99("div", { ref, className: cx("oc-block-features", className), ...rest, children: [
     title != null && /* @__PURE__ */ jsx117("h2", { children: title }),
     description != null && /* @__PURE__ */ jsx117("p", { children: description }),
-    /* @__PURE__ */ jsx117("div", { className: "oc-block-features-grid", children: features.map((f, i) => /* @__PURE__ */ jsxs98("div", { className: "oc-block-feature-card", children: [
+    /* @__PURE__ */ jsx117("div", { className: "oc-block-features-grid", children: features.map((f, i) => /* @__PURE__ */ jsxs99("div", { className: "oc-block-feature-card", children: [
       f.icon != null && /* @__PURE__ */ jsx117("div", { className: "oc-block-feature-icon", children: f.icon }),
       /* @__PURE__ */ jsx117("h3", { children: f.title }),
       f.description != null && /* @__PURE__ */ jsx117("p", { children: f.description })
@@ -4134,14 +4153,14 @@ var BlockFeatures = forwardRef115(function BlockFeatures2({ title, description,
 
 // src/blocks/BlockFooter.tsx
 import { forwardRef as forwardRef116 } from "react";
-import { jsx as jsx118, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx118, jsxs as jsxs100 } from "react/jsx-runtime";
 var BlockFooter = forwardRef116(function BlockFooter2({ columns, copyright, credit, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs99("div", { ref, className: cx("oc-block-footer", className), ...rest, children: [
-    /* @__PURE__ */ jsx118("div", { className: "oc-block-footer-grid", children: columns.map((col, i) => /* @__PURE__ */ jsxs99("div", { className: "oc-block-footer-col", children: [
+  return /* @__PURE__ */ jsxs100("div", { ref, className: cx("oc-block-footer", className), ...rest, children: [
+    /* @__PURE__ */ jsx118("div", { className: "oc-block-footer-grid", children: columns.map((col, i) => /* @__PURE__ */ jsxs100("div", { className: "oc-block-footer-col", children: [
       /* @__PURE__ */ jsx118("h4", { children: col.title }),
       /* @__PURE__ */ jsx118("ul", { children: col.links.map((l, j) => /* @__PURE__ */ jsx118("li", { children: /* @__PURE__ */ jsx118("a", { href: l.href, children: l.label }) }, j)) })
     ] }, i)) }),
-    (copyright != null || credit != null) && /* @__PURE__ */ jsxs99("div", { className: "oc-block-footer-bottom", children: [
+    (copyright != null || credit != null) && /* @__PURE__ */ jsxs100("div", { className: "oc-block-footer-bottom", children: [
       /* @__PURE__ */ jsx118("span", { children: copyright }),
       /* @__PURE__ */ jsx118("span", { children: credit })
     ] })
@@ -4150,9 +4169,9 @@ var BlockFooter = forwardRef116(function BlockFooter2({ columns, copyright, cred
 
 // src/blocks/BlockFormPage.tsx
 import { forwardRef as forwardRef117 } from "react";
-import { jsx as jsx119, jsxs as jsxs100 } from "react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs101 } from "react/jsx-runtime";
 var BlockFormPage = forwardRef117(function BlockFormPage2({ actions, className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs100("form", { ref, className: cx("oc-block-formpage", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs101("form", { ref, className: cx("oc-block-formpage", className), ...rest, children: [
     children,
     actions != null && /* @__PURE__ */ jsx119("div", { className: "oc-block-formpage-actions", children: actions })
   ] });
@@ -4163,9 +4182,9 @@ function BlockFormPageGrid({ className, ...rest }) {
 
 // src/blocks/BlockHero.tsx
 import { forwardRef as forwardRef118 } from "react";
-import { jsx as jsx120, jsxs as jsxs101 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs102 } from "react/jsx-runtime";
 var BlockHero = forwardRef118(function BlockHero2({ badge, title, description, actions, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs101("div", { ref, className: cx("oc-block-hero", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs102("div", { ref, className: cx("oc-block-hero", className), ...rest, children: [
     badge != null && /* @__PURE__ */ jsx120("span", { className: "oc-block-hero-badge", children: badge }),
     /* @__PURE__ */ jsx120("h1", { children: title }),
     description != null && /* @__PURE__ */ jsx120("p", { children: description }),
@@ -4175,24 +4194,24 @@ var BlockHero = forwardRef118(function BlockHero2({ badge, title, description, a
 
 // src/blocks/BlockHeroCode.tsx
 import { forwardRef as forwardRef119 } from "react";
-import { jsx as jsx121, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx121, jsxs as jsxs103 } from "react/jsx-runtime";
 var DEFAULT_TILES = [
   { glyph: "\u25C6", accent: "green", style: { inset: "-0.5rem auto auto 8%" } },
   { glyph: "\u25C9", accent: "violet", style: { inset: "0 6% auto auto", animationDelay: "-2s" } },
   { glyph: "\u25B2", accent: "orange", style: { inset: "auto 10% -0.5rem auto", animationDelay: "-4s" } }
 ];
 var BlockHeroCode = forwardRef119(function BlockHeroCode2({ eyebrow, title, lead, actions, codeTitle, code, tiles = DEFAULT_TILES, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx121("section", { ref, className: cx("oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsxs102("div", { className: "oc-container oc-split", children: [
-    /* @__PURE__ */ jsxs102("div", { children: [
+  return /* @__PURE__ */ jsx121("section", { ref, className: cx("oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsxs103("div", { className: "oc-container oc-split", children: [
+    /* @__PURE__ */ jsxs103("div", { children: [
       eyebrow != null && /* @__PURE__ */ jsx121("p", { className: "oc-eyebrow", children: eyebrow }),
       /* @__PURE__ */ jsx121("h1", { className: "oc-display", children: title }),
       lead != null && /* @__PURE__ */ jsx121("p", { className: "oc-lead", children: lead }),
       actions != null && /* @__PURE__ */ jsx121("div", { className: "flex flex-wrap gap-1 mt-2", children: actions })
     ] }),
-    /* @__PURE__ */ jsxs102("div", { className: "relative p-2", children: [
+    /* @__PURE__ */ jsxs103("div", { className: "relative p-2", children: [
       tiles.map((tile, i) => /* @__PURE__ */ jsx121("span", { className: `oc-icon-tile oc-icon-tile--float oc-accent--${tile.accent} absolute`, style: tile.style, "aria-hidden": "true", children: tile.glyph }, i)),
-      /* @__PURE__ */ jsxs102("div", { className: "oc-code-window", children: [
-        /* @__PURE__ */ jsxs102("div", { className: "oc-code-window__bar", children: [
+      /* @__PURE__ */ jsxs103("div", { className: "oc-code-window", children: [
+        /* @__PURE__ */ jsxs103("div", { className: "oc-code-window__bar", children: [
           /* @__PURE__ */ jsx121("i", {}),
           /* @__PURE__ */ jsx121("i", {}),
           /* @__PURE__ */ jsx121("i", {}),
@@ -4206,7 +4225,7 @@ var BlockHeroCode = forwardRef119(function BlockHeroCode2({ eyebrow, title, lead
 
 // src/blocks/BlockHeroOrbit.tsx
 import { forwardRef as forwardRef120 } from "react";
-import { jsx as jsx122, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx122, jsxs as jsxs104 } from "react/jsx-runtime";
 var DEFAULT_MARKS = [
   { glyph: "\u25C6", accent: "green" },
   { glyph: "\u25C9", accent: "violet" },
@@ -4217,17 +4236,17 @@ var DEFAULT_MARKS = [
 ];
 var BlockHeroOrbit = forwardRef120(function BlockHeroOrbit2({ eyebrow, title, lead, actions, marks = DEFAULT_MARKS, codeTitle, code = "", center, duration, className, ...rest }, ref) {
   const visualStyle = duration ? { "--oc-orbit-duration": duration } : void 0;
-  return /* @__PURE__ */ jsx122("section", { ref, className: cx("oc-block-orbit oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsxs103("div", { className: "oc-container oc-split", children: [
-    /* @__PURE__ */ jsxs103("div", { children: [
+  return /* @__PURE__ */ jsx122("section", { ref, className: cx("oc-block-orbit oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsxs104("div", { className: "oc-container oc-split", children: [
+    /* @__PURE__ */ jsxs104("div", { children: [
       eyebrow != null && /* @__PURE__ */ jsx122("p", { className: "oc-eyebrow", children: eyebrow }),
       /* @__PURE__ */ jsx122("h1", { className: "oc-display", children: title }),
       lead != null && /* @__PURE__ */ jsx122("p", { className: "oc-lead", children: lead }),
       actions != null && /* @__PURE__ */ jsx122("div", { className: "flex flex-wrap gap-1 mt-2", children: actions })
     ] }),
-    /* @__PURE__ */ jsxs103("div", { className: "oc-block-orbit-visual", style: visualStyle, children: [
+    /* @__PURE__ */ jsxs104("div", { className: "oc-block-orbit-visual", style: visualStyle, children: [
       /* @__PURE__ */ jsx122("div", { className: "oc-block-orbit-ring", "aria-hidden": "true", children: marks.map((mark, i) => /* @__PURE__ */ jsx122("span", { className: "oc-block-orbit-mark", style: { "--oc-orbit-angle": `${360 / marks.length * i}deg` }, children: /* @__PURE__ */ jsx122("span", { className: `oc-product-mark oc-product-mark--sm oc-accent--${mark.accent}`, children: mark.glyph }) }, i)) }),
-      center ?? /* @__PURE__ */ jsxs103("div", { className: "oc-code-window oc-block-orbit-center", children: [
-        /* @__PURE__ */ jsxs103("div", { className: "oc-code-window__bar", children: [
+      center ?? /* @__PURE__ */ jsxs104("div", { className: "oc-code-window oc-block-orbit-center", children: [
+        /* @__PURE__ */ jsxs104("div", { className: "oc-code-window__bar", children: [
           /* @__PURE__ */ jsx122("i", {}),
           /* @__PURE__ */ jsx122("i", {}),
           /* @__PURE__ */ jsx122("i", {}),
@@ -4241,10 +4260,10 @@ var BlockHeroOrbit = forwardRef120(function BlockHeroOrbit2({ eyebrow, title, le
 
 // src/blocks/BlockHeroSplit.tsx
 import { forwardRef as forwardRef121 } from "react";
-import { jsx as jsx123, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx123, jsxs as jsxs105 } from "react/jsx-runtime";
 var BlockHeroSplit = forwardRef121(function BlockHeroSplit2({ title, description, actions, visual, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs104("div", { ref, className: cx("oc-block-hero-split", className), ...rest, children: [
-    /* @__PURE__ */ jsxs104("div", { children: [
+  return /* @__PURE__ */ jsxs105("div", { ref, className: cx("oc-block-hero-split", className), ...rest, children: [
+    /* @__PURE__ */ jsxs105("div", { children: [
       /* @__PURE__ */ jsx123("h1", { children: title }),
       description != null && /* @__PURE__ */ jsx123("p", { children: description }),
       actions != null && /* @__PURE__ */ jsx123("div", { className: "oc-block-hero-actions justify-start", children: actions })
@@ -4255,12 +4274,12 @@ var BlockHeroSplit = forwardRef121(function BlockHeroSplit2({ title, description
 
 // src/blocks/BlockModuleHeader.tsx
 import { forwardRef as forwardRef122 } from "react";
-import { jsx as jsx124, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs106 } from "react/jsx-runtime";
 var BlockModuleHeader = forwardRef122(function BlockModuleHeader2({ icon, title, intro, meta, actions, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs105("header", { ref, className: cx("oc-block-modulehead", className), ...rest, children: [
-    /* @__PURE__ */ jsxs105("div", { className: "oc-block-modulehead-band", children: [
+  return /* @__PURE__ */ jsxs106("header", { ref, className: cx("oc-block-modulehead", className), ...rest, children: [
+    /* @__PURE__ */ jsxs106("div", { className: "oc-block-modulehead-band", children: [
       icon != null && /* @__PURE__ */ jsx124("span", { className: "oc-block-modulehead-icon", "aria-hidden": "true", children: icon }),
-      /* @__PURE__ */ jsxs105("div", { className: "oc-block-modulehead-body", children: [
+      /* @__PURE__ */ jsxs106("div", { className: "oc-block-modulehead-body", children: [
         /* @__PURE__ */ jsx124("h1", { className: "oc-block-modulehead-title", children: title }),
         intro != null && /* @__PURE__ */ jsx124("p", { className: "oc-block-modulehead-intro", children: intro }),
         meta != null && /* @__PURE__ */ jsx124("div", { className: "oc-block-modulehead-meta", children: meta })
@@ -4272,9 +4291,9 @@ var BlockModuleHeader = forwardRef122(function BlockModuleHeader2({ icon, title,
 
 // src/blocks/BlockPageHero.tsx
 import { forwardRef as forwardRef123 } from "react";
-import { jsx as jsx125, jsxs as jsxs106 } from "react/jsx-runtime";
+import { jsx as jsx125, jsxs as jsxs107 } from "react/jsx-runtime";
 var BlockPageHero = forwardRef123(function BlockPageHero2({ eyebrow, title, description, actions, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs106("section", { ref, className: cx("oc-hero", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs107("section", { ref, className: cx("oc-hero", className), ...rest, children: [
     eyebrow != null && /* @__PURE__ */ jsx125("span", { className: "oc-hero-eyebrow", children: eyebrow }),
     /* @__PURE__ */ jsx125("h1", { className: "oc-hero-title", children: title }),
     description != null && /* @__PURE__ */ jsx125("p", { className: "oc-hero-text", children: description }),
@@ -4284,12 +4303,12 @@ var BlockPageHero = forwardRef123(function BlockPageHero2({ eyebrow, title, desc
 
 // src/blocks/BlockPortfolioGrid.tsx
 import { forwardRef as forwardRef124, useId as useId40 } from "react";
-import { jsx as jsx126, jsxs as jsxs107 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs108 } from "react/jsx-runtime";
 var BlockPortfolioGrid = forwardRef124(function BlockPortfolioGrid2({ eyebrow, title, lead, link, projects, two = false, className, ...rest }, ref) {
   const titleId = `oc-portfolio-title-${useId40().replace(/[^\w-]/g, "")}`;
-  return /* @__PURE__ */ jsx126("section", { ref, className: cx("oc-block-portfolio oc-section-pad", two && "oc-block-portfolio--two", className), "aria-labelledby": titleId, ...rest, children: /* @__PURE__ */ jsxs107("div", { className: "oc-container", children: [
-    /* @__PURE__ */ jsxs107("div", { className: "oc-block-portfolio-head", children: [
-      /* @__PURE__ */ jsxs107("div", { children: [
+  return /* @__PURE__ */ jsx126("section", { ref, className: cx("oc-block-portfolio oc-section-pad", two && "oc-block-portfolio--two", className), "aria-labelledby": titleId, ...rest, children: /* @__PURE__ */ jsxs108("div", { className: "oc-container", children: [
+    /* @__PURE__ */ jsxs108("div", { className: "oc-block-portfolio-head", children: [
+      /* @__PURE__ */ jsxs108("div", { children: [
         eyebrow != null && /* @__PURE__ */ jsx126("p", { className: "oc-eyebrow", children: eyebrow }),
         /* @__PURE__ */ jsx126("h2", { className: "oc-display oc-display--md", id: titleId, children: title }),
         lead != null && /* @__PURE__ */ jsx126("p", { className: "oc-block-portfolio-lead", children: lead })
@@ -4302,19 +4321,19 @@ var BlockPortfolioGrid = forwardRef124(function BlockPortfolioGrid2({ eyebrow, t
 
 // src/blocks/BlockPricing.tsx
 import { forwardRef as forwardRef125 } from "react";
-import { Fragment as Fragment27, jsx as jsx127, jsxs as jsxs108 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx127, jsxs as jsxs109 } from "react/jsx-runtime";
 var BlockPricing = forwardRef125(function BlockPricing2({ title, description, plans, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsxs108("div", { ref, className: cx("oc-block-pricing", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs109("div", { ref, className: cx("oc-block-pricing", className), ...rest, children: [
     title != null && /* @__PURE__ */ jsx127("h2", { children: title }),
     description != null && /* @__PURE__ */ jsx127("p", { children: description }),
     /* @__PURE__ */ jsx127("div", { className: "oc-block-pricing-grid", children: plans.map((plan, i) => {
       const variant = plan.featured ? "default" : "outline";
-      return /* @__PURE__ */ jsxs108("div", { className: cx("oc-block-pricing-card", plan.featured && "oc-block-pricing-card--featured"), children: [
+      return /* @__PURE__ */ jsxs109("div", { className: cx("oc-block-pricing-card", plan.featured && "oc-block-pricing-card--featured"), children: [
         /* @__PURE__ */ jsx127("p", { className: "oc-block-pricing-name", children: plan.name }),
         plan.description != null && /* @__PURE__ */ jsx127("p", { className: "oc-block-pricing-desc", children: plan.description }),
-        /* @__PURE__ */ jsxs108("p", { className: "oc-block-pricing-price", children: [
+        /* @__PURE__ */ jsxs109("p", { className: "oc-block-pricing-price", children: [
           plan.price,
-          plan.period != null && /* @__PURE__ */ jsxs108(Fragment27, { children: [
+          plan.period != null && /* @__PURE__ */ jsxs109(Fragment27, { children: [
             " ",
             /* @__PURE__ */ jsx127("span", { children: plan.period })
           ] })
@@ -4328,16 +4347,16 @@ var BlockPricing = forwardRef125(function BlockPricing2({ title, description, pl
 
 // src/blocks/BlockProcess.tsx
 import { forwardRef as forwardRef126 } from "react";
-import { jsx as jsx128, jsxs as jsxs109 } from "react/jsx-runtime";
+import { jsx as jsx128, jsxs as jsxs110 } from "react/jsx-runtime";
 var BlockProcess = forwardRef126(function BlockProcess2({ eyebrow, title, steps, marquee, marqueeLabel = "Technologies", className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx128("section", { ref, className: cx("oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsxs109("div", { className: "oc-container", children: [
+  return /* @__PURE__ */ jsx128("section", { ref, className: cx("oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsxs110("div", { className: "oc-container", children: [
     eyebrow != null && /* @__PURE__ */ jsx128("p", { className: "oc-eyebrow", children: eyebrow }),
     /* @__PURE__ */ jsx128("h2", { className: "oc-display oc-display--md", children: title }),
-    /* @__PURE__ */ jsx128("ol", { className: "oc-steps", children: steps.map((s, i) => /* @__PURE__ */ jsxs109("li", { children: [
+    /* @__PURE__ */ jsx128("ol", { className: "oc-steps", children: steps.map((s, i) => /* @__PURE__ */ jsxs110("li", { children: [
       /* @__PURE__ */ jsx128("h3", { children: s.title }),
       s.text != null && /* @__PURE__ */ jsx128("p", { children: s.text })
     ] }, i)) }),
-    marquee && marquee.length > 0 && /* @__PURE__ */ jsx128("div", { className: "oc-marquee mt-4", "aria-label": marqueeLabel, children: /* @__PURE__ */ jsxs109("div", { className: "oc-marquee__track", children: [
+    marquee && marquee.length > 0 && /* @__PURE__ */ jsx128("div", { className: "oc-marquee mt-4", "aria-label": marqueeLabel, children: /* @__PURE__ */ jsxs110("div", { className: "oc-marquee__track", children: [
       marquee.map((m) => /* @__PURE__ */ jsx128("span", { className: "oc-marquee__item", children: m }, m)),
       marquee.map((m) => /* @__PURE__ */ jsx128("span", { className: "oc-marquee__item", "aria-hidden": "true", children: m }, `dup-${m}`))
     ] }) })
@@ -4346,13 +4365,13 @@ var BlockProcess = forwardRef126(function BlockProcess2({ eyebrow, title, steps,
 
 // src/blocks/BlockProductGrid.tsx
 import { forwardRef as forwardRef127 } from "react";
-import { jsx as jsx129, jsxs as jsxs110 } from "react/jsx-runtime";
+import { jsx as jsx129, jsxs as jsxs111 } from "react/jsx-runtime";
 var BlockProductGrid = forwardRef127(function BlockProductGrid2({ eyebrow, title, products, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx129("section", { ref, className: cx("oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsxs110("div", { className: "oc-container", children: [
+  return /* @__PURE__ */ jsx129("section", { ref, className: cx("oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsxs111("div", { className: "oc-container", children: [
     eyebrow != null && /* @__PURE__ */ jsx129("p", { className: "oc-eyebrow", children: eyebrow }),
     /* @__PURE__ */ jsx129("h2", { className: "oc-display oc-display--md", children: title }),
-    /* @__PURE__ */ jsx129("div", { className: "oc-card-grid", children: products.map((p, i) => /* @__PURE__ */ jsxs110("a", { className: cx("oc-product-card", p.accent && `oc-accent--${p.accent}`), href: p.href, children: [
-      /* @__PURE__ */ jsxs110("div", { className: "oc-product-card__top", children: [
+    /* @__PURE__ */ jsx129("div", { className: "oc-card-grid", children: products.map((p, i) => /* @__PURE__ */ jsxs111("a", { className: cx("oc-product-card", p.accent && `oc-accent--${p.accent}`), href: p.href, children: [
+      /* @__PURE__ */ jsxs111("div", { className: "oc-product-card__top", children: [
         p.icon != null && /* @__PURE__ */ jsx129("span", { className: "oc-icon-tile", "aria-hidden": "true", children: p.icon }),
         p.pill != null && /* @__PURE__ */ jsx129("span", { className: "oc-pill", children: p.pill })
       ] }),
@@ -4366,16 +4385,16 @@ var BlockProductGrid = forwardRef127(function BlockProductGrid2({ eyebrow, title
 
 // src/blocks/BlockProfileHeader.tsx
 import { forwardRef as forwardRef128, useId as useId41 } from "react";
-import { jsx as jsx130, jsxs as jsxs111 } from "react/jsx-runtime";
+import { jsx as jsx130, jsxs as jsxs112 } from "react/jsx-runtime";
 var BlockProfileHeader = forwardRef128(function BlockProfileHeader2({ name, meta, bio, avatar, banner, actions, tabs = [], tabsLabel = "Profile sections", compact = false, headingLevel = 1, className, ...rest }, ref) {
   const nameId = `oc-profile-name-${useId41().replace(/[^\w-]/g, "")}`;
   const Heading3 = headingLevel === 1 ? "h1" : "h2";
   const bannerStyle = banner ? { "--oc-profile-banner": `url("${banner}")` } : void 0;
-  return /* @__PURE__ */ jsxs111("section", { ref, className: cx("oc-block-profile", compact && "oc-block-profile--compact", className), "aria-labelledby": nameId, ...rest, children: [
+  return /* @__PURE__ */ jsxs112("section", { ref, className: cx("oc-block-profile", compact && "oc-block-profile--compact", className), "aria-labelledby": nameId, ...rest, children: [
     /* @__PURE__ */ jsx130("div", { className: "oc-block-profile-banner", style: bannerStyle, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs111("div", { className: "oc-block-profile-bar", children: [
+    /* @__PURE__ */ jsxs112("div", { className: "oc-block-profile-bar", children: [
       /* @__PURE__ */ jsx130("span", { className: "oc-avatar oc-block-profile-avatar", "aria-hidden": "true", children: avatar }),
-      /* @__PURE__ */ jsxs111("div", { className: "oc-block-profile-info", children: [
+      /* @__PURE__ */ jsxs112("div", { className: "oc-block-profile-info", children: [
         /* @__PURE__ */ jsx130(Heading3, { className: "oc-block-profile-name", id: nameId, children: name }),
         meta != null && /* @__PURE__ */ jsx130("p", { className: "oc-block-profile-meta", children: meta }),
         bio != null && /* @__PURE__ */ jsx130("p", { className: "oc-block-profile-bio", children: bio })
@@ -4388,21 +4407,21 @@ var BlockProfileHeader = forwardRef128(function BlockProfileHeader2({ name, meta
 
 // src/blocks/BlockShowcase.tsx
 import { forwardRef as forwardRef129 } from "react";
-import { jsx as jsx131, jsxs as jsxs112 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs113 } from "react/jsx-runtime";
 var BlockShowcase = forwardRef129(function BlockShowcase2({ eyebrow, title, projects, cardMin = "26rem", className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx131("section", { ref, className: cx("oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsxs112("div", { className: "oc-container", children: [
+  return /* @__PURE__ */ jsx131("section", { ref, className: cx("oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsxs113("div", { className: "oc-container", children: [
     eyebrow != null && /* @__PURE__ */ jsx131("p", { className: "oc-eyebrow", children: eyebrow }),
     /* @__PURE__ */ jsx131("h2", { className: "oc-display oc-display--md", children: title }),
-    /* @__PURE__ */ jsx131("div", { className: "oc-card-grid", style: { "--oc-card-min": cardMin }, children: projects.map((p, i) => /* @__PURE__ */ jsxs112("a", { className: cx("oc-product-card", p.accent && `oc-accent--${p.accent}`, "p-0 overflow-hidden"), href: p.href, children: [
-      /* @__PURE__ */ jsxs112("span", { className: "oc-browser-frame m-1", children: [
-        /* @__PURE__ */ jsxs112("span", { className: "oc-browser-frame__bar", children: [
+    /* @__PURE__ */ jsx131("div", { className: "oc-card-grid", style: { "--oc-card-min": cardMin }, children: projects.map((p, i) => /* @__PURE__ */ jsxs113("a", { className: cx("oc-product-card", p.accent && `oc-accent--${p.accent}`, "p-0 overflow-hidden"), href: p.href, children: [
+      /* @__PURE__ */ jsxs113("span", { className: "oc-browser-frame m-1", children: [
+        /* @__PURE__ */ jsxs113("span", { className: "oc-browser-frame__bar", children: [
           /* @__PURE__ */ jsx131("i", {}),
           /* @__PURE__ */ jsx131("i", {}),
           /* @__PURE__ */ jsx131("i", {})
         ] }),
         /* @__PURE__ */ jsx131("span", { className: "oc-browser-frame__body", style: p.background ? { background: p.background } : void 0, children: p.image && /* @__PURE__ */ jsx131("img", { src: p.image, alt: p.imageAlt ?? "" }) })
       ] }),
-      /* @__PURE__ */ jsxs112("span", { className: "grid gap-0.5 p-1.5 pt-0", children: [
+      /* @__PURE__ */ jsxs113("span", { className: "grid gap-0.5 p-1.5 pt-0", children: [
         p.pill != null && /* @__PURE__ */ jsx131("span", { className: "oc-pill oc-pill--accent", children: p.pill }),
         /* @__PURE__ */ jsx131("span", { className: "oc-product-card__name", children: p.name }),
         p.summary != null && /* @__PURE__ */ jsx131("span", { className: "oc-product-card__summary", children: p.summary }),
@@ -4414,21 +4433,21 @@ var BlockShowcase = forwardRef129(function BlockShowcase2({ eyebrow, title, proj
 
 // src/blocks/BlockSiteFooter.tsx
 import { forwardRef as forwardRef130 } from "react";
-import { jsx as jsx132, jsxs as jsxs113 } from "react/jsx-runtime";
+import { jsx as jsx132, jsxs as jsxs114 } from "react/jsx-runtime";
 var BlockSiteFooter = forwardRef130(function BlockSiteFooter2({ brand, brandHref = "/", about, columns, copyright, credit, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx132("footer", { ref, className: cx("oc-site-footer", className), ...rest, children: /* @__PURE__ */ jsxs113("div", { className: "oc-container", children: [
-    /* @__PURE__ */ jsxs113("div", { className: "oc-site-footer__grid", children: [
-      /* @__PURE__ */ jsxs113("div", { className: "oc-site-footer__about", children: [
+  return /* @__PURE__ */ jsx132("footer", { ref, className: cx("oc-site-footer", className), ...rest, children: /* @__PURE__ */ jsxs114("div", { className: "oc-container", children: [
+    /* @__PURE__ */ jsxs114("div", { className: "oc-site-footer__grid", children: [
+      /* @__PURE__ */ jsxs114("div", { className: "oc-site-footer__about", children: [
         /* @__PURE__ */ jsx132("a", { className: "oc-site-header__brand", href: brandHref, children: brand }),
         about != null && /* @__PURE__ */ jsx132("p", { children: about })
       ] }),
-      columns.map((col, i) => /* @__PURE__ */ jsxs113("div", { children: [
+      columns.map((col, i) => /* @__PURE__ */ jsxs114("div", { children: [
         /* @__PURE__ */ jsx132("h2", { className: "oc-site-footer__title", children: col.title }),
         col.links && /* @__PURE__ */ jsx132("ul", { className: "oc-site-footer__list", children: col.links.map((l, j) => /* @__PURE__ */ jsx132("li", { children: /* @__PURE__ */ jsx132("a", { href: l.href, children: l.label }) }, j)) }),
         col.address != null && /* @__PURE__ */ jsx132("address", { className: "oc-site-footer__list", children: col.address })
       ] }, i))
     ] }),
-    (copyright != null || credit != null) && /* @__PURE__ */ jsxs113("div", { className: "oc-site-footer__bottom", children: [
+    (copyright != null || credit != null) && /* @__PURE__ */ jsxs114("div", { className: "oc-site-footer__bottom", children: [
       /* @__PURE__ */ jsx132("span", { children: copyright }),
       /* @__PURE__ */ jsx132("span", { children: credit })
     ] })
@@ -4437,13 +4456,13 @@ var BlockSiteFooter = forwardRef130(function BlockSiteFooter2({ brand, brandHref
 
 // src/blocks/BlockSiteHeader.tsx
 import { forwardRef as forwardRef131, useId as useId42 } from "react";
-import { jsx as jsx133, jsxs as jsxs114 } from "react/jsx-runtime";
+import { jsx as jsx133, jsxs as jsxs115 } from "react/jsx-runtime";
 var BlockSiteHeader = forwardRef131(function BlockSiteHeader2({ brand, brandHref = "/", links, cta, menuLabel = "Menu", className, ...rest }, ref) {
   const navId = `oc-site-nav-${useId42().replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsx133("header", { ref, className: cx("oc-site-header", className), ...rest, children: /* @__PURE__ */ jsxs114("div", { className: "oc-container oc-site-header__inner", children: [
+  return /* @__PURE__ */ jsx133("header", { ref, className: cx("oc-site-header", className), ...rest, children: /* @__PURE__ */ jsxs115("div", { className: "oc-container oc-site-header__inner", children: [
     /* @__PURE__ */ jsx133("a", { className: "oc-site-header__brand", href: brandHref, children: brand }),
-    /* @__PURE__ */ jsx133("button", { className: "oc-site-header__toggle", type: "button", "aria-label": menuLabel, ...attrs({ popovertarget: navId }), children: "\u2630" }),
-    /* @__PURE__ */ jsxs114("nav", { className: "oc-site-header__nav", id: navId, "aria-label": "Main", ...attrs({ popover: "" }), children: [
+    /* @__PURE__ */ jsx133("button", { className: "oc-site-header__toggle", type: "button", "aria-label": menuLabel, popoverTarget: navId, children: "\u2630" }),
+    /* @__PURE__ */ jsxs115("nav", { className: "oc-site-header__nav", id: navId, "aria-label": "Main", ...attrs({ popover: "" }), children: [
       links.map((l, i) => /* @__PURE__ */ jsx133("a", { href: l.href, "aria-current": l.current ? "page" : void 0, children: l.label }, i)),
       cta
     ] })
@@ -4452,15 +4471,15 @@ var BlockSiteHeader = forwardRef131(function BlockSiteHeader2({ brand, brandHref
 
 // src/blocks/BlockSpotlight.tsx
 import { forwardRef as forwardRef132 } from "react";
-import { jsx as jsx134, jsxs as jsxs115 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs116 } from "react/jsx-runtime";
 var BlockSpotlight = forwardRef132(function BlockSpotlight2({ accent, badge, icon, title, tagline, lead, action, modules, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx134("section", { ref, className: cx("oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsx134("div", { className: "oc-container", children: /* @__PURE__ */ jsxs115("div", { className: cx("oc-spotlight", accent && `oc-accent--${accent}`), children: [
-    /* @__PURE__ */ jsxs115("div", { children: [
-      badge != null && /* @__PURE__ */ jsxs115("span", { className: "oc-pill oc-pill--accent", children: [
+  return /* @__PURE__ */ jsx134("section", { ref, className: cx("oc-section-pad", className), ...rest, children: /* @__PURE__ */ jsx134("div", { className: "oc-container", children: /* @__PURE__ */ jsxs116("div", { className: cx("oc-spotlight", accent && `oc-accent--${accent}`), children: [
+    /* @__PURE__ */ jsxs116("div", { children: [
+      badge != null && /* @__PURE__ */ jsxs116("span", { className: "oc-pill oc-pill--accent", children: [
         /* @__PURE__ */ jsx134("span", { className: "oc-status-dot" }),
         badge
       ] }),
-      /* @__PURE__ */ jsxs115("h2", { className: "oc-spotlight__title", children: [
+      /* @__PURE__ */ jsxs116("h2", { className: "oc-spotlight__title", children: [
         icon != null && /* @__PURE__ */ jsx134("span", { className: "oc-icon-tile oc-icon-tile--lg", "aria-hidden": "true", children: icon }),
         title
       ] }),
@@ -4468,7 +4487,7 @@ var BlockSpotlight = forwardRef132(function BlockSpotlight2({ accent, badge, ico
       lead != null && /* @__PURE__ */ jsx134("p", { className: "oc-lead", children: lead }),
       action
     ] }),
-    modules && /* @__PURE__ */ jsx134("ul", { className: "oc-spotlight__modules", children: modules.map((m, i) => /* @__PURE__ */ jsxs115("li", { children: [
+    modules && /* @__PURE__ */ jsx134("ul", { className: "oc-spotlight__modules", children: modules.map((m, i) => /* @__PURE__ */ jsxs116("li", { children: [
       m.icon != null && /* @__PURE__ */ jsx134("span", { className: "oc-icon-tile oc-icon-tile--sm", "aria-hidden": "true", children: m.icon }),
       m.label
     ] }, i)) })
@@ -4477,9 +4496,9 @@ var BlockSpotlight = forwardRef132(function BlockSpotlight2({ accent, badge, ico
 
 // src/blocks/BlockStats.tsx
 import { forwardRef as forwardRef133 } from "react";
-import { jsx as jsx135, jsxs as jsxs116 } from "react/jsx-runtime";
+import { jsx as jsx135, jsxs as jsxs117 } from "react/jsx-runtime";
 var BlockStats = forwardRef133(function BlockStats2({ stats, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx135("div", { ref, className: cx("oc-block-stats", className), ...rest, children: stats.map((s, i) => /* @__PURE__ */ jsxs116("div", { className: "oc-block-stat", children: [
+  return /* @__PURE__ */ jsx135("div", { ref, className: cx("oc-block-stats", className), ...rest, children: stats.map((s, i) => /* @__PURE__ */ jsxs117("div", { className: "oc-block-stat", children: [
     /* @__PURE__ */ jsx135("div", { className: "oc-block-stat-value", children: s.value }),
     /* @__PURE__ */ jsx135("div", { className: "oc-block-stat-label", children: s.label })
   ] }, i)) });
@@ -4487,9 +4506,9 @@ var BlockStats = forwardRef133(function BlockStats2({ stats, className, ...rest
 
 // src/blocks/BlockStatsCounter.tsx
 import { forwardRef as forwardRef134 } from "react";
-import { jsx as jsx136, jsxs as jsxs117 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs118 } from "react/jsx-runtime";
 var BlockStatsCounter = forwardRef134(function BlockStatsCounter2({ stats, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx136("div", { ref, className: cx("oc-block-stats", className), ...rest, children: stats.map((s, i) => /* @__PURE__ */ jsxs117("div", { className: "oc-block-stat", children: [
+  return /* @__PURE__ */ jsx136("div", { ref, className: cx("oc-block-stats", className), ...rest, children: stats.map((s, i) => /* @__PURE__ */ jsxs118("div", { className: "oc-block-stat", children: [
     /* @__PURE__ */ jsx136(Counter, { className: "oc-block-stat-value", to: s.to, suffix: s.suffix }),
     /* @__PURE__ */ jsx136("span", { className: "oc-block-stat-label", children: s.label })
   ] }, i)) });
@@ -4497,11 +4516,11 @@ var BlockStatsCounter = forwardRef134(function BlockStatsCounter2({ stats, class
 
 // src/blocks/BlockTeamList.tsx
 import { forwardRef as forwardRef135 } from "react";
-import { Fragment as Fragment28, jsx as jsx137, jsxs as jsxs118 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx137, jsxs as jsxs119 } from "react/jsx-runtime";
 var BlockTeamList = forwardRef135(function BlockTeamList2({ members, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx137("div", { ref, className: cx("oc-block-team", className), ...rest, children: members.map((m, i) => /* @__PURE__ */ jsxs118("div", { className: "oc-block-team-row", children: [
+  return /* @__PURE__ */ jsx137("div", { ref, className: cx("oc-block-team", className), ...rest, children: members.map((m, i) => /* @__PURE__ */ jsxs119("div", { className: "oc-block-team-row", children: [
     /* @__PURE__ */ jsx137(User, { name: m.name, email: m.email, initials: m.initials, avatarSrc: m.avatarSrc }),
-    /* @__PURE__ */ jsxs118("div", { className: "oc-block-team-meta", children: [
+    /* @__PURE__ */ jsxs119("div", { className: "oc-block-team-meta", children: [
       m.role != null && /* @__PURE__ */ jsx137(Badge, { variant: m.roleVariant, children: m.role }),
       m.menu != null && /* @__PURE__ */ jsx137(Dropdown, { trigger: /* @__PURE__ */ jsx137(Fragment28, { children: "\u2026" }), triggerProps: { variant: "ghost", icon: true, size: "sm", type: "button", "aria-label": m.menuLabel ?? "Member actions" }, children: m.menu })
     ] })
@@ -4510,7 +4529,7 @@ var BlockTeamList = forwardRef135(function BlockTeamList2({ members, className,
 
 // src/blocks/BlockTwoFactor.tsx
 import { forwardRef as forwardRef136, useId as useId43, useState as useState15 } from "react";
-import { jsx as jsx138, jsxs as jsxs119 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs120 } from "react/jsx-runtime";
 var BlockTwoFactor = forwardRef136(function BlockTwoFactor2({ qr, setupKey, recoveryCodes, codeLength = 6, onSubmit, submitLabel = "Enable two-factor", className, ...rest }, ref) {
   const id = `oc-twofactor-${useId43().replace(/:/g, "")}`;
   const [code, setCode] = useState15("");
@@ -4518,17 +4537,17 @@ var BlockTwoFactor = forwardRef136(function BlockTwoFactor2({ qr, setupKey, reco
     e.preventDefault();
     onSubmit?.(code);
   };
-  return /* @__PURE__ */ jsxs119("div", { ref, className: cx("oc-block-twofactor", className), ...rest, children: [
-    /* @__PURE__ */ jsxs119("section", { className: "oc-block-twofactor-step", children: [
+  return /* @__PURE__ */ jsxs120("div", { ref, className: cx("oc-block-twofactor", className), ...rest, children: [
+    /* @__PURE__ */ jsxs120("section", { className: "oc-block-twofactor-step", children: [
       /* @__PURE__ */ jsx138(Heading, { size: "sm", title: "1. Scan the QR code", description: "Use an authenticator app, or enter the key manually." }),
-      /* @__PURE__ */ jsxs119("div", { className: "oc-block-twofactor-center", children: [
+      /* @__PURE__ */ jsxs120("div", { className: "oc-block-twofactor-center", children: [
         qr ?? /* @__PURE__ */ jsx138("div", { className: "oc-block-twofactor-qr", role: "img", "aria-label": "QR code", children: "QR code" }),
         /* @__PURE__ */ jsx138(CopyField, { value: setupKey, label: "Setup key" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs119("form", { className: "oc-block-twofactor-step", onSubmit: submit, children: [
+    /* @__PURE__ */ jsxs120("form", { className: "oc-block-twofactor-step", onSubmit: submit, children: [
       /* @__PURE__ */ jsx138(Heading, { size: "sm", title: "2. Confirm with a code" }),
-      /* @__PURE__ */ jsxs119("div", { className: "oc-field", children: [
+      /* @__PURE__ */ jsxs120("div", { className: "oc-field", children: [
         /* @__PURE__ */ jsx138("label", { className: "oc-field-label", htmlFor: id, children: "Authentication code" }),
         /* @__PURE__ */ jsx138(OtpInput, { id, name: "code", length: codeLength, value: code, onChange: setCode })
       ] }),
@@ -4540,7 +4559,7 @@ var BlockTwoFactor = forwardRef136(function BlockTwoFactor2({ qr, setupKey, reco
 
 // src/blocks/BlockWizardDialog.tsx
 import { forwardRef as forwardRef137, useId as useId44, useRef as useRef13 } from "react";
-import { jsx as jsx139, jsxs as jsxs120 } from "react/jsx-runtime";
+import { jsx as jsx139, jsxs as jsxs121 } from "react/jsx-runtime";
 var BlockWizardDialog = forwardRef137(function BlockWizardDialog2({
   open,
   defaultOpen,
@@ -4574,15 +4593,15 @@ var BlockWizardDialog = forwardRef137(function BlockWizardDialog2({
       ...attrs({ closedby: "closerequest" }),
       ...rest,
       onClose: dlg.onClose,
-      children: /* @__PURE__ */ jsx139(DialogContext.Provider, { value: { close: dlg.close }, children: /* @__PURE__ */ jsx139("div", { className: "oc-modal-content oc-modal-content--xl", children: /* @__PURE__ */ jsxs120("div", { className: "oc-block-wizard", children: [
+      children: /* @__PURE__ */ jsx139(DialogContext.Provider, { value: { close: dlg.close }, children: /* @__PURE__ */ jsx139("div", { className: "oc-modal-content oc-modal-content--xl", children: /* @__PURE__ */ jsxs121("div", { className: "oc-block-wizard", children: [
         /* @__PURE__ */ jsx139("div", { className: "oc-block-wizard-rail", children: /* @__PURE__ */ jsx139(Stepper, { steps: steps.map((s) => ({ label: s.label })), current, onStepChange: setCurrent, "aria-label": stepperLabel }) }),
-        /* @__PURE__ */ jsxs120("div", { className: "oc-block-wizard-main", children: [
-          /* @__PURE__ */ jsxs120("div", { className: "oc-modal-header", children: [
+        /* @__PURE__ */ jsxs121("div", { className: "oc-block-wizard-main", children: [
+          /* @__PURE__ */ jsxs121("div", { className: "oc-modal-header", children: [
             /* @__PURE__ */ jsx139("h2", { className: "oc-modal-title", id: titleId, children: active?.label }),
             /* @__PURE__ */ jsx139("p", { className: "oc-modal-description", children: description ?? `Step ${current + 1} of ${steps.length}` })
           ] }),
           /* @__PURE__ */ jsx139("div", { className: "oc-block-wizard-step", children: active?.content }),
-          /* @__PURE__ */ jsxs120("div", { className: "oc-modal-footer", children: [
+          /* @__PURE__ */ jsxs121("div", { className: "oc-modal-footer", children: [
             /* @__PURE__ */ jsx139("button", { className: "oc-btn oc-btn--outline", type: "button", disabled: current === 0, onClick: () => setCurrent(current - 1), children: backLabel }),
             /* @__PURE__ */ jsx139(
               "button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-react",
-  "version": "0.11.2",
+  "version": "0.12.1",
   "description": "OmniaUI for React: typed function components and page blocks that render the exact @birdycom/omniaui and @birdycom/omniaui-blocks markup.",
   "type": "module",
   "license": "MIT",

package/src/blocks/BlockSiteHeader.tsx

@@ -29,7 +29,7 @@ export const BlockSiteHeader = forwardRef<HTMLElement, BlockSiteHeaderProps>(fun
     <header ref={ref} className={cx("oc-site-header", className)} {...rest}>
       <div className="oc-container oc-site-header__inner">
         <a className="oc-site-header__brand" href={brandHref}>{brand}</a>
-        <button className="oc-site-header__toggle" type="button" aria-label={menuLabel} {...attrs({ popovertarget: navId })}>&#9776;</button>
+        <button className="oc-site-header__toggle" type="button" aria-label={menuLabel} popoverTarget={navId}>&#9776;</button>
         <nav className="oc-site-header__nav" id={navId} aria-label="Main" {...attrs({ popover: "" })}>
           {links.map((l, i) => (
             <a key={i} href={l.href} aria-current={l.current ? "page" : undefined}>{l.label}</a>

package/src/components/ColumnMenu.tsx

@@ -36,7 +36,7 @@ export const ColumnMenu = forwardRef<HTMLDivElement, ColumnMenuProps>(function C
     <div ref={ref} className={cx("oc-column-menu-scope", className)} {...rest}>
       <div className="oc-table-toolbar">
         <span className="oc-table-toolbar-spacer" />
-        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" {...attrs({ popovertarget: menuId })}>
+        <button className="oc-btn oc-btn--outline oc-btn--sm" type="button" popoverTarget={menuId}>
           {triggerLabel}
         </button>
       </div>

package/src/components/Dropdown.tsx

@@ -12,7 +12,7 @@ export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 /**
- * Trigger button + `<div class="oc-dropdown-menu" popover>`, wired with `popovertarget`
+ * Trigger button + `<div class="oc-dropdown-menu" popover>`, wired with `popoverTarget`
  * (native popover and anchor positioning, no state needed).
  */
 export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(function Dropdown(
@@ -23,7 +23,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(function Dropd
   const menuId = id ?? `oc-menu-${auto.replace(/:/g, "")}`;
   return (
     <>
-      <Button variant="outline" {...triggerProps} {...attrs({ popovertarget: menuId })}>{trigger}</Button>
+      <Button variant="outline" {...triggerProps} popoverTarget={menuId}>{trigger}</Button>
       <div ref={ref} className={cx("oc-dropdown-menu", className)} id={menuId} {...attrs({ popover: "" })} {...rest}>
         {children}
       </div>

package/src/components/EmojiPicker.tsx

@@ -65,7 +65,7 @@ export const EmojiPicker = forwardRef<HTMLDivElement, EmojiPickerProps>(function
   if (inline) return panel;
   return (
     <>
-      <button type="button" className="oc-emoji-picker__trigger" aria-label={triggerLabel} {...attrs({ popovertarget: panelId })}>{trigger}</button>
+      <button type="button" className="oc-emoji-picker__trigger" aria-label={triggerLabel} popoverTarget={panelId}>{trigger}</button>
       {panel}
     </>
   );

package/src/components/Lightbox.tsx

@@ -43,6 +43,20 @@ export const Lightbox = forwardRef<HTMLDialogElement, LightboxProps>(function Li
   const single = images.length === 1;
   const slideId = (i: number) => `${base}-${((i % images.length) + images.length) % images.length + 1}`;
 
+  // Prev / next stay links (they work without JavaScript), but scroll without putting #slide in the address and the
+  // history; on close a slide hash of this viewer is removed (it was there when the links were followed natively).
+  const go = (i: number) => (e: { preventDefault(): void }) => {
+    const slide = document.getElementById(slideId(i));
+    if (!slide) return;
+    e.preventDefault();
+    slide.scrollIntoView?.({ behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" as ScrollBehavior : "smooth", block: "nearest", inline: "center" });
+  };
+  const onClose: typeof dlg.onClose = (...args) => {
+    const slide = location.hash && document.getElementById(decodeURIComponent(location.hash.slice(1)));
+    if (slide && inner.current?.contains(slide)) history.replaceState(history.state, "", location.pathname + location.search);
+    return dlg.onClose(...args);
+  };
+
   // After opening: jump (without animation) to the photo that was clicked.
   useEffect(() => {
     if (dlg.open) document.getElementById(slideId(start))?.scrollIntoView?.({ behavior: "instant" as ScrollBehavior, block: "nearest", inline: "center" });
@@ -60,7 +74,7 @@ export const Lightbox = forwardRef<HTMLDialogElement, LightboxProps>(function Li
           ))}
         </div>
       )}
-      <dialog ref={ref} className={cx("oc-lightbox", single && "oc-lightbox--single", className)} aria-label={label} {...attrs({ closedby: "any" })} {...rest} onClose={dlg.onClose}>
+      <dialog ref={ref} className={cx("oc-lightbox", single && "oc-lightbox--single", className)} aria-label={label} {...attrs({ closedby: "any" })} {...rest} onClose={onClose}>
         <div className="oc-lightbox__bar">
           {title != null ? <h2 className="oc-lightbox__title">{title}</h2> : <span />}
           <button type="button" className="oc-lightbox__close" aria-label="Close" onClick={dlg.close}>&#10005;</button>
@@ -69,8 +83,8 @@ export const Lightbox = forwardRef<HTMLDialogElement, LightboxProps>(function Li
           {images.map((img, i) => (
             <figure key={i} className="oc-lightbox__slide" id={slideId(i)}>
               <div className="oc-lightbox__media">{media(img, img.src)}</div>
-              {!single && <a className="oc-lightbox__nav oc-lightbox__nav--prev" href={`#${slideId(i - 1)}`} aria-label="Previous photo">&#8592;</a>}
-              {!single && <a className="oc-lightbox__nav oc-lightbox__nav--next" href={`#${slideId(i + 1)}`} aria-label="Next photo">&#8594;</a>}
+              {!single && <a className="oc-lightbox__nav oc-lightbox__nav--prev" href={`#${slideId(i - 1)}`} onClick={go(i - 1)} aria-label="Previous photo">&#8592;</a>}
+              {!single && <a className="oc-lightbox__nav oc-lightbox__nav--next" href={`#${slideId(i + 1)}`} onClick={go(i + 1)} aria-label="Next photo">&#8594;</a>}
               <figcaption className="oc-lightbox__caption">
                 {!single && <span className="oc-lightbox__counter">{i + 1} / {images.length}</span>} {img.caption ?? img.alt}
               </figcaption>

package/src/components/MediaCard.tsx

@@ -38,7 +38,7 @@ export const MediaCard = forwardRef<HTMLElement, MediaCardProps>(function MediaC
           {meta != null && <p className="oc-media-card__meta">{meta}</p>}
         </div>
         {menu != null && (
-          <button type="button" className="oc-media-card__menu" aria-label="More actions" {...attrs({ popovertarget: menuId })}>&#8942;</button>
+          <button type="button" className="oc-media-card__menu" aria-label="More actions" popoverTarget={menuId}>&#8942;</button>
         )}
       </div>
       {menu != null && <div className="oc-dropdown-menu" id={menuId} {...attrs({ popover: "" })}>{menu}</div>}

package/src/components/MediaRow.tsx

@@ -44,7 +44,7 @@ export const MediaRow = forwardRef<HTMLLIElement, MediaRowProps>(function MediaR
       </div>
       {menu != null && (
         <>
-          <button type="button" className="oc-media-row__menu" aria-label="More actions" {...attrs({ popovertarget: menuId })}>&#8942;</button>
+          <button type="button" className="oc-media-row__menu" aria-label="More actions" popoverTarget={menuId}>&#8942;</button>
           <div className="oc-dropdown-menu" id={menuId} {...attrs({ popover: "" })}>{menu}</div>
         </>
       )}

package/src/components/MessageThread.tsx

@@ -131,7 +131,7 @@ export const MessageThread = forwardRef<HTMLElement, MessageThreadProps>(functio
             {status && <span className={cx("oc-badge", status.variant && `oc-badge--${status.variant}`)}>{status.label}</span>}
             {menu && (
               <>
-                <button type="button" className="oc-message-thread__icon-btn" {...attrs({ popovertarget: `${base}-menu` })} aria-label="Conversation actions">
+                <button type="button" className="oc-message-thread__icon-btn" popoverTarget={`${base}-menu`} aria-label="Conversation actions">
                   <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="12" cy="19" r="1.8" /></svg>
                 </button>
                 <div className="oc-dropdown-menu" id={`${base}-menu`} {...attrs({ popover: "" })} role="menu">

package/src/components/Navmenu.tsx

@@ -53,7 +53,7 @@ export const NavmenuDropdown = forwardRef<HTMLDivElement, NavmenuDropdownProps>(
   const menuId = id ?? `oc-navmenu-${auto.replace(/:/g, "")}`;
   return (
     <li>
-      <button className="oc-navmenu-link oc-navmenu-link--caret" type="button" {...attrs({ popovertarget: menuId })}>{label}</button>
+      <button className="oc-navmenu-link oc-navmenu-link--caret" type="button" popoverTarget={menuId}>{label}</button>
       <div ref={ref} className={cx("oc-dropdown-menu", className)} id={menuId} {...attrs({ popover: "" })} {...rest}>
         {children}
       </div>

package/src/components/Popover.tsx

@@ -23,7 +23,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(function Popover
   const panelId = id ?? `oc-popover-${auto.replace(/:/g, "")}`;
   return (
     <>
-      <Button variant="outline" type="button" {...triggerProps} {...attrs({ popovertarget: panelId })}>{trigger}</Button>
+      <Button variant="outline" type="button" {...triggerProps} popoverTarget={panelId}>{trigger}</Button>
       <div ref={ref} className={cx("oc-popover", size !== "md" && `oc-popover--${size}`, className)} id={panelId} {...attrs({ popover: "" })} {...rest}>
         {title != null && <h3 className="oc-popover-title">{title}</h3>}
         {text != null && <p className="oc-popover-text">{text}</p>}

package/src/components/TableActions.tsx

@@ -45,7 +45,7 @@ export const TableActionsMenu = forwardRef<HTMLDivElement, TableActionsMenuProps
   const menuId = id ?? `oc-table-actions-menu-${auto.replace(/:/g, "")}`;
   return (
     <>
-      <button className="oc-table-actions-more" type="button" aria-label={label} {...attrs({ popovertarget: menuId })} />
+      <button className="oc-table-actions-more" type="button" aria-label={label} popoverTarget={menuId} />
       <div ref={ref} id={menuId} className={cx("oc-dropdown-menu", className)} {...attrs({ popover: "" })} {...rest}>
         {children}
       </div>

package/src/components/Tooltip.tsx

@@ -3,12 +3,28 @@ import type { HTMLAttributes, ReactNode } from "react";
 import { cx } from "../utils";
 
 export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "content"> {
-  /** Tooltip text (`data-tooltip`). */
+  /** Tooltip text (`data-tooltip`); with `heading`, the lines under the title. */
   content: string;
+  /** Keep the line breaks of `content` (`oc-tooltip--multiline`). */
+  multiline?: boolean;
+  /** Title above `content` (`.oc-tooltip__title`: larger, capital first letter); renders `.oc-tooltip__content`. */
+  heading?: string;
+  /** Preferred side (default top); with anchor positioning it moves to the other side when there is no room. */
+  side?: "top" | "bottom" | "left" | "right";
   children: ReactNode;
 }
 
 /** `<span class="oc-tooltip" data-tooltip>`: CSS-only tooltip around its children. */
-export const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(function Tooltip({ content, className, ...rest }, ref) {
-  return <span ref={ref} className={cx("oc-tooltip", className)} data-tooltip={content} {...rest} />;
+export const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(function Tooltip({ content, multiline, heading, side, className, children, ...rest }, ref) {
+  const classes = cx("oc-tooltip", multiline && !heading && "oc-tooltip--multiline", side && side !== "top" && `oc-tooltip--${side}`, className);
+  if (!heading) return <span ref={ref} className={classes} data-tooltip={content} {...rest}>{children}</span>;
+  return (
+    <span ref={ref} className={classes} {...rest}>
+      {children}
+      <span className="oc-tooltip__content" role="tooltip">
+        <span className="oc-tooltip__title">{heading}</span>
+        {content}
+      </span>
+    </span>
+  );
 });