@pipelex/mthds-form 0.22.0 → 0.23.0

package/dist/{chunk-5IZWP2X4.js → chunk-NOSHTDID.js}

@@ -566,20 +566,12 @@ function FieldShell({
   ] });
 }
 
-// src/react/brand-ink.ts
-var brandInkClass = "text-[color:var(--brand,var(--primary,hsl(240_5.9%_10%)))]";
-var brandFillInkClass = "text-[color:var(--brand-muted-foreground,var(--brand,var(--primary,hsl(240_5.9%_10%))))]";
-var brandFillClass = "bg-[color:var(--brand-muted,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
-var brandFillSelectedClass = "data-[state=on]:bg-[color:var(--brand-muted,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
-var brandFillStrongClass = "bg-[color:var(--brand-muted,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_15%,transparent))]";
-var brandFocusClass = "focus-visible:border-[color:var(--brand,var(--primary,hsl(240_5.9%_10%)))] focus-visible:ring-[color:color-mix(in_oklab,var(--brand,var(--primary,hsl(240_5.9%_10%)))_40%,transparent)]";
-
 // src/react/field-styles.ts
 var fieldControlClass = cn(
   "w-full rounded-md border border-border bg-input text-sm text-foreground",
   "placeholder:text-muted-foreground/70 transition-colors",
   "focus-visible:outline-hidden focus-visible:ring-1",
-  brandFocusClass,
+  "focus-visible:border-ring focus-visible:ring-ring/40",
   "disabled:cursor-not-allowed disabled:opacity-50",
   "aria-invalid:border-destructive aria-invalid:ring-destructive/30"
 );
@@ -612,6 +604,20 @@ function DateField({ field, value, onChange, id, error, disabled }) {
   );
 }
 
+// src/react/role-tokens.ts
+var linkTextClass = "text-[color:var(--link,var(--primary,hsl(240_5.9%_10%)))]";
+var selectedFillClass = "bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
+var selectedStateFillClass = "data-[state=on]:bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
+var selectedCheckedFillClass = "aria-checked:bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_10%,transparent))]";
+var selectedFillStrongClass = "bg-[color:var(--selected,color-mix(in_oklab,var(--primary,hsl(240_5.9%_10%))_15%,transparent))]";
+var selectedBorderClass = "border-[color:color-mix(in_oklab,var(--link,var(--primary,hsl(240_5.9%_10%)))_40%,transparent)]";
+var selectedStateBorderClass = "data-[state=on]:border-[color:color-mix(in_oklab,var(--link,var(--primary,hsl(240_5.9%_10%)))_40%,transparent)]";
+var selectedHoverBorderClass = "hover:border-[color:color-mix(in_oklab,var(--link,var(--primary,hsl(240_5.9%_10%)))_40%,transparent)]";
+var checkedAccentClass = "accent-[color:var(--link,var(--primary,hsl(240_5.9%_10%)))]";
+var focusOutlineClass = "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring";
+var focusOutlineInsetClass = "focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring";
+var frameFocusOutlineClass = "data-focus-visible:outline-solid data-focus-visible:outline-2 data-focus-visible:-outline-offset-2 data-focus-visible:outline-ring";
+
 // src/react/encoded-file.ts
 function encodedFileSummary(url, strings) {
   const view = readDataUrl(url);
@@ -748,6 +754,7 @@ function ListAction({
       onClick,
       className: cn(
         "inline-flex min-h-11 items-center justify-center rounded-md border border-border px-4 text-[14px] text-foreground transition-colors hover:bg-muted sm:min-h-9",
+        focusOutlineClass,
         className
       ),
       children
@@ -838,12 +845,15 @@ var DialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 var toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+  [
+    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
+    selectedStateFillClass
+  ],
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"
+        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground"
       },
       size: {
         default: "h-10 px-3 min-w-10",
@@ -913,7 +923,10 @@ function FilePickerEntry({ onOpen, label, disabled, ref, id }) {
       disabled,
       "aria-haspopup": "dialog",
       "aria-label": s.chooseFromSourceAria(label),
-      className: "flex min-h-11 w-full items-center justify-center gap-2 rounded-md border border-border px-3 text-[14px] text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-9",
+      className: cn(
+        "flex min-h-11 w-full items-center justify-center gap-2 rounded-md border border-border px-3 text-[14px] text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-9",
+        focusOutlineClass
+      ),
       children: [
         /* @__PURE__ */ jsx(Folder, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
         s.chooseFromSource
@@ -1025,7 +1038,10 @@ function FilePickerBody({
             },
             placeholder: s.filePickerSearchPlaceholder,
             autoComplete: "off",
-            className: "h-11 w-full rounded-md border border-border bg-input pr-3 pl-9 text-[16px] text-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
+            className: cn(
+              "h-11 w-full rounded-md border border-border bg-input pr-3 pl-9 text-[16px] text-foreground placeholder:text-muted-foreground",
+              focusOutlineClass
+            )
           }
         )
       ] }),
@@ -1091,7 +1107,10 @@ function FilePickerBody({
         type: "button",
         onClick: use6,
         disabled: choices.length === 0,
-        className: "flex h-12 w-full items-center justify-center rounded-md bg-primary px-4 text-[16px] font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",
+        className: cn(
+          "flex h-12 w-full items-center justify-center rounded-md bg-primary px-4 text-[16px] font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50",
+          focusOutlineClass
+        ),
         children: /* @__PURE__ */ jsx("span", { className: "truncate", children: s.filePickerUse(choices.length, choices[0]?.name) })
       }
     ) })
@@ -1155,7 +1174,10 @@ function SheetHeader({
             DialogClose,
             {
               "aria-label": s.close,
-              className: "flex size-11 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+              className: cn(
+                "flex size-11 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                focusOutlineClass
+              ),
               children: /* @__PURE__ */ jsx(X, { className: "size-5", "aria-hidden": "true" })
             }
           )
@@ -1201,9 +1223,9 @@ function FileRow({
       disabled,
       onClick: onToggle,
       className: cn(
-        "flex min-h-16 w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-muted/60 disabled:cursor-not-allowed disabled:opacity-50",
-        "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
-        chosen && "bg-muted"
+        "group flex min-h-16 w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-muted/60 disabled:cursor-not-allowed disabled:opacity-50",
+        focusOutlineInsetClass,
+        selectedCheckedFillClass
       ),
       children: [
         /* @__PURE__ */ jsx(
@@ -1216,7 +1238,7 @@ function FileRow({
         ),
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx("span", { className: "block truncate text-[16px] font-medium text-foreground", children: file.name }),
-          (file.kind === "test" || meta) && /* @__PURE__ */ jsxs("span", { className: "block truncate text-[13px] text-muted-foreground", children: [
+          (file.kind === "test" || meta) && /* @__PURE__ */ jsxs("span", { className: "block truncate text-[13px] text-muted-foreground group-aria-checked:text-foreground", children: [
             file.kind === "test" && /* @__PURE__ */ jsxs("span", { className: "text-foreground", children: [
               s.testFile,
               meta && " \xB7 "
@@ -1227,7 +1249,7 @@ function FileRow({
         /* @__PURE__ */ jsx(
           Check,
           {
-            className: cn("size-5 shrink-0 text-foreground", !chosen && "invisible"),
+            className: "invisible size-5 shrink-0 text-foreground group-aria-checked:visible",
             "aria-hidden": "true"
           }
         )
@@ -1599,7 +1621,11 @@ function FileField({
             type: "button",
             disabled: busy,
             onClick: () => setShowUrl(true),
-            className: "flex w-fit items-center gap-1 font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50 max-sm:min-h-11",
+            className: cn(
+              "flex w-fit items-center gap-1 rounded-sm font-mono text-[11px] text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50 max-sm:min-h-11",
+              focusOutlineClass,
+              "focus-visible:outline-offset-2"
+            ),
             children: [
               /* @__PURE__ */ jsx(Link2, { className: "h-3 w-3" }),
               s.pasteUrlInstead
@@ -1709,7 +1735,10 @@ function FileChip({
         {
           type: "button",
           onClick: onTogglePreview,
-          className: "inline-flex h-7 shrink-0 items-center gap-1 rounded-md border border-border px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground max-sm:h-11 max-sm:px-3",
+          className: cn(
+            "inline-flex h-7 shrink-0 items-center gap-1 rounded-md border border-border px-2 text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground max-sm:h-11 max-sm:px-3",
+            focusOutlineClass
+          ),
           children: [
             previewOpen ? /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5" }),
             s.preview
@@ -1729,7 +1758,10 @@ function ClearButton({ disabled, onClick }) {
       onClick,
       disabled,
       "aria-label": s.removeFileAria,
-      className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 max-sm:size-11",
+      className: cn(
+        "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 max-sm:size-11",
+        focusOutlineClass
+      ),
       children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
     }
   );
@@ -1874,14 +1906,14 @@ function EnumField({ field, value, onChange, id, error, disabled }) {
                 value: option,
                 variant: "outline",
                 className: cn(
-                  "h-9 min-w-0 gap-1.5 border-border bg-input px-3 text-[13px] text-muted-foreground hover:bg-muted hover:text-foreground data-[state=on]:border-primary/40 data-[state=on]:font-medium data-[state=on]:text-foreground",
-                  brandFillSelectedClass
+                  "h-9 min-w-0 gap-1.5 border-border bg-input px-3 text-[13px] text-muted-foreground hover:bg-muted hover:text-foreground data-[state=on]:font-medium",
+                  selectedStateBorderClass
                 ),
                 children: [
                   value === option && /* @__PURE__ */ jsx(
                     Check,
                     {
-                      className: cn("size-3.5", brandFillInkClass),
+                      className: cn("size-3.5", linkTextClass),
                       strokeWidth: 2.5,
                       "aria-hidden": "true"
                     }
@@ -1976,7 +2008,8 @@ function StepButton({
       "aria-label": label,
       className: cn(
         "flex h-11 w-11 shrink-0 items-center justify-center rounded-md border border-border bg-input text-muted-foreground transition-colors",
-        "hover:border-border hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+        "hover:border-border hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        focusOutlineClass
       ),
       children
     }
@@ -2053,7 +2086,11 @@ function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
       type: "button",
       onClick: onToggle,
       "aria-expanded": expanded,
-      className: "flex w-fit items-center gap-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground max-sm:min-h-11",
+      className: cn(
+        "flex w-fit items-center gap-1.5 rounded-sm text-[11px] text-muted-foreground transition-colors hover:text-foreground max-sm:min-h-11",
+        focusOutlineClass,
+        "focus-visible:outline-offset-2"
+      ),
       children: [
         expanded ? /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3" }),
         expanded ? noun === "field" ? s.hideOptionalFields : s.hideOptionalInputs : noun === "field" ? s.optionalFieldsCount(count) : s.optionalInputsCount(count)
@@ -2277,7 +2314,10 @@ function ListField({ field, value, onChange, id, error, env }) {
                 onClick: () => removeItem(index),
                 disabled: env?.disabled || busy,
                 "aria-label": s.removeItemAria(index + 1),
-                className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-destructive disabled:opacity-50 max-sm:mt-0 max-sm:size-11",
+                className: cn(
+                  "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-destructive disabled:opacity-50 max-sm:mt-0 max-sm:size-11",
+                  focusOutlineClass
+                ),
                 children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
               }
             )
@@ -2293,7 +2333,11 @@ function ListField({ field, value, onChange, id, error, env }) {
           disabled: env?.disabled || isFull,
           className: cn(
             "inline-flex h-9 w-full items-center justify-center gap-1.5 rounded-md border border-dashed border-border text-[13px] text-muted-foreground transition-colors max-sm:h-11",
-            "hover:border-primary/40 hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            // The edge under the pointer is the accent's, as a selected pill's
+            // is; the fill under it stays neutral.
+            "hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            selectedHoverBorderClass,
+            focusOutlineClass
           ),
           children: [
             /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
@@ -2670,7 +2714,10 @@ var DropdownMenuItem = React5.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var buttonClass = "inline-flex min-h-11 items-center justify-center gap-2 rounded-md px-4 text-[14px] transition-colors disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-9";
+var buttonClass = cn(
+  "inline-flex min-h-11 items-center justify-center gap-2 rounded-md px-4 text-[14px] transition-colors disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-9",
+  focusOutlineClass
+);
 var secondaryClass = cn(buttonClass, "border border-border text-foreground hover:bg-muted");
 var primaryClass = cn(
   buttonClass,
@@ -2798,7 +2845,10 @@ function FillWithExample({
                   {
                     ref: closeButton,
                     "aria-label": s.close,
-                    className: "flex size-11 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                    className: cn(
+                      "flex size-11 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                      focusOutlineClass
+                    ),
                     children: /* @__PURE__ */ jsx(X, { className: "size-5", "aria-hidden": "true" })
                   }
                 )
@@ -2812,7 +2862,10 @@ function FillWithExample({
                       ref: register(rows.current, example.id),
                       type: "button",
                       onClick: () => choose(example),
-                      className: "flex min-h-16 min-w-0 flex-1 items-center px-4 py-2.5 text-left transition-colors hover:bg-muted/60 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring",
+                      className: cn(
+                        "flex min-h-16 min-w-0 flex-1 items-center px-4 py-2.5 text-left transition-colors hover:bg-muted/60",
+                        focusOutlineInsetClass
+                      ),
                       children: /* @__PURE__ */ jsx("span", { className: "truncate text-[16px] font-medium text-foreground", children: example.name })
                     }
                   ),
@@ -2824,7 +2877,10 @@ function FillWithExample({
                       {
                         ref: register(menus.current, example.id),
                         "aria-label": s.exampleActions(example.name),
-                        className: "flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                        className: cn(
+                          "flex size-11 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                          focusOutlineInsetClass
+                        ),
                         children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-5", "aria-hidden": "true" })
                       }
                     ),
@@ -2968,7 +3024,10 @@ function RenameExampleDialog({
               onKeyDown,
               disabled: state === "busy",
               autoComplete: "off",
-              className: "h-11 w-full rounded-md border border-border bg-input px-3 text-[16px] text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring"
+              className: cn(
+                "h-11 w-full rounded-md border border-border bg-input px-3 text-[16px] text-foreground",
+                focusOutlineClass
+              )
             }
           )
         ] }),
@@ -3929,6 +3988,83 @@ function ResultAt({ segment, children }) {
   );
   return /* @__PURE__ */ jsx(ResultLocationContext, { value: location, children });
 }
+function FocusFrame({ ref, className, ...props }) {
+  const [frame, setFrame] = useState(null);
+  const focused = useFrameFocus(frame);
+  const attach = useCallback(
+    (node) => {
+      setFrame(node);
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ...props,
+      ref: attach,
+      ...focused ? { "data-focus-visible": "" } : {},
+      className: cn(className, frameFocusOutlineClass)
+    }
+  );
+}
+var frames = /* @__PURE__ */ new Set();
+var settling;
+var refresh = () => {
+  for (const check of frames) check();
+};
+var onBlur = () => {
+  refresh();
+  clearTimeout(settling);
+  settling = setTimeout(refresh, 0);
+};
+function listen(win) {
+  win.addEventListener("blur", onBlur);
+  win.addEventListener("focus", refresh);
+}
+function unlisten(win) {
+  win.removeEventListener("blur", onBlur);
+  win.removeEventListener("focus", refresh);
+}
+function useFrameFocus(frame) {
+  const [focused, setFocused] = useState(false);
+  useEffect(() => {
+    if (!frame) return;
+    const check = () => setFocused(document.hasFocus() && document.activeElement === frame);
+    if (frames.size === 0) {
+      listen(window);
+      document.addEventListener("focusin", refresh);
+    }
+    frames.add(check);
+    let own = null;
+    const attachOwn = () => {
+      try {
+        own = frame.contentWindow;
+        if (own) listen(own);
+      } catch {
+        own = null;
+      }
+    };
+    attachOwn();
+    frame.addEventListener("load", attachOwn);
+    return () => {
+      frame.removeEventListener("load", attachOwn);
+      try {
+        if (own) unlisten(own);
+      } catch {
+      }
+      frames.delete(check);
+      if (frames.size === 0) {
+        unlisten(window);
+        document.removeEventListener("focusin", refresh);
+        clearTimeout(settling);
+        settling = void 0;
+      }
+    };
+  }, [frame]);
+  return focused;
+}
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -4070,7 +4206,10 @@ function FileNameDialog({ stem: stem2, extension, onConfirm, onCancel }) {
                 {
                   type: "button",
                   onClick: onCancel,
-                  className: "rounded-md border border-border px-3 py-1 text-[12px] text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+                  className: cn(
+                    "rounded-md border border-border px-3 py-1 text-[12px] text-muted-foreground hover:text-foreground",
+                    focusOutlineClass
+                  ),
                   children: s.fileNameCancel
                 }
               ),
@@ -4079,7 +4218,10 @@ function FileNameDialog({ stem: stem2, extension, onConfirm, onCancel }) {
                 {
                   type: "button",
                   onClick: () => onConfirm(value),
-                  className: "rounded-md bg-primary px-3 py-1 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+                  className: cn(
+                    "rounded-md bg-primary px-3 py-1 text-[12px] font-medium text-primary-foreground hover:bg-primary/90",
+                    focusOutlineClass
+                  ),
                   children: s.fileNameConfirm
                 }
               )
@@ -4714,7 +4856,8 @@ function PdfDownloadButton({
         title: failed ? s.downloadPdfFailed : name,
         ...failed ? { "aria-describedby": statusId } : {},
         className: cn(
-          "inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[12px] font-medium focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-70",
+          "inline-flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[12px] font-medium disabled:opacity-70",
+          focusOutlineClass,
           primary ? "bg-primary text-primary-foreground hover:bg-primary/90" : "border border-border text-muted-foreground hover:text-foreground",
           failed && (primary ? "bg-destructive text-white hover:bg-destructive/90" : "text-destructive"),
           className
@@ -4832,28 +4975,31 @@ function HtmlPreview({
             ]
           }
         )
-      ) : doc === null ? null : /* @__PURE__ */ jsx(
-        "iframe",
-        {
-          ref: frameRef,
-          title: content.cssClass ? `HTML result (${content.cssClass})` : "HTML result",
-          srcDoc: doc,
-          onLoad,
-          sandbox: "allow-same-origin",
-          style: {
-            display: "block",
-            width: "100%",
-            border: 0,
-            height: height === 0 ? void 0 : limit === void 0 ? height : Math.min(height, limit),
-            ...limit === void 0 ? {} : { maxHeight: limit },
-            // Its height is the page's, as a flex basis: in a bounded flex
-            // column it shrinks to what is left (never below the floor) and the
-            // page scrolls inside the frame; anywhere else it is the page's.
-            // `minHeight` is explicit because a replaced element's automatic
-            // minimum is its own height, which would forbid the shrink.
-            ...filling && height > 0 ? { flex: "0 1 auto", minHeight: Math.min(height, FILL_MIN_HEIGHT) } : {}
+      ) : doc === null ? null : (
+        // A tab stop, whose keyboard focus `FocusFrame` draws.
+        /* @__PURE__ */ jsx(
+          FocusFrame,
+          {
+            ref: frameRef,
+            title: content.cssClass ? `HTML result (${content.cssClass})` : "HTML result",
+            srcDoc: doc,
+            onLoad,
+            sandbox: "allow-same-origin",
+            style: {
+              display: "block",
+              width: "100%",
+              border: 0,
+              height: height === 0 ? void 0 : limit === void 0 ? height : Math.min(height, limit),
+              ...limit === void 0 ? {} : { maxHeight: limit },
+              // Its height is the page's, as a flex basis: in a bounded flex
+              // column it shrinks to what is left (never below the floor) and the
+              // page scrolls inside the frame; anywhere else it is the page's.
+              // `minHeight` is explicit because a replaced element's automatic
+              // minimum is its own height, which would forbid the shrink.
+              ...filling && height > 0 ? { flex: "0 1 auto", minHeight: Math.min(height, FILL_MIN_HEIGHT) } : {}
+            }
           }
-        }
+        )
       )
     }
   );
@@ -5063,7 +5209,7 @@ function InlineToken({ token }) {
             href,
             target: "_blank",
             rel: "noreferrer noopener",
-            className: "underline underline-offset-2",
+            className: cn("rounded-sm underline underline-offset-2", focusOutlineClass),
             children: /* @__PURE__ */ jsx(Inline, { tokens: link.tokens })
           }
         ) })
@@ -5098,7 +5244,7 @@ function ProseImage({ token }) {
       href: src,
       target: "_blank",
       rel: "noreferrer noopener",
-      className: "underline underline-offset-2",
+      className: cn("rounded-sm underline underline-offset-2", focusOutlineClass),
       children: token.text || src
     }
   );
@@ -5287,7 +5433,8 @@ function CopyButton({
       ...title ? { title } : {},
       "aria-label": label,
       className: cn(
-        "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+        "shrink-0 rounded p-0.5 text-muted-foreground hover:bg-card hover:text-foreground",
+        focusOutlineClass,
         FILE_BUTTON_ON_A_PHONE
       ),
       children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
@@ -5327,7 +5474,10 @@ function FileRef({
         target: "_blank",
         rel: "noreferrer",
         title,
-        className: "min-w-0 truncate font-mono text-[12px] text-foreground underline underline-offset-2 max-sm:min-w-11 max-sm:leading-11",
+        className: cn(
+          "min-w-0 truncate rounded-sm font-mono text-[12px] text-foreground underline underline-offset-2 max-sm:min-w-11 max-sm:leading-11",
+          focusOutlineClass
+        ),
         children: label
       }
     ) : /* @__PURE__ */ jsx(
@@ -5408,7 +5558,8 @@ ${planned.url ?? planned.text}`;
         title: failed ? s.downloadFileFailed : label,
         ...failed ? { "aria-describedby": statusId } : {},
         className: cn(
-          "shrink-0 rounded p-0.5 hover:bg-card focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-60",
+          "shrink-0 rounded p-0.5 hover:bg-card disabled:opacity-60",
+          focusOutlineClass,
           FILE_BUTTON_ON_A_PHONE,
           failed ? "text-destructive" : "text-muted-foreground hover:text-foreground"
         ),
@@ -5444,7 +5595,7 @@ function previewableUrl(content, resolve) {
 }
 function DocumentPreview({ url, name }) {
   return /* @__PURE__ */ jsx(
-    "iframe",
+    FocusFrame,
     {
       src: url,
       title: name,
@@ -5486,7 +5637,10 @@ function DocumentValue({ value }) {
           type: "button",
           onClick: () => setOpen((current) => !current),
           "aria-expanded": open,
-          className: "flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 max-sm:min-h-11 max-sm:px-3",
+          className: cn(
+            "flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:bg-card hover:text-foreground max-sm:min-h-11 max-sm:px-3",
+            focusOutlineClass
+          ),
           children: [
             open ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": true, className: "size-3.5" }),
             s.preview
@@ -5522,7 +5676,10 @@ function ImageValue({
           target: "_blank",
           rel: "noreferrer",
           title: content.url,
-          className: inGallery || compact ? "inline-block" : "block w-full",
+          className: cn(
+            inGallery || compact ? "inline-block" : "block w-full",
+            focusOutlineInsetClass
+          ),
           children: /* @__PURE__ */ jsx(
             LoadingImage,
             {
@@ -5707,7 +5864,10 @@ function isInlineColumn(field) {
 var CELL_LENGTH_LIMIT = 80;
 var EXPAND_COLUMN = "var(--expand-column,2rem)";
 var EXPAND_COLUMN_WIDTH = "[--expand-column:2rem] max-sm:[--expand-column:3.25rem]";
-var TOGGLE = "mt-0.5 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-card hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 max-sm:mt-0 max-sm:size-11";
+var TOGGLE = cn(
+  "mt-0.5 flex size-6 items-center justify-center rounded text-muted-foreground hover:bg-card hover:text-foreground max-sm:mt-0 max-sm:size-11",
+  focusOutlineClass
+);
 var STACK_NEVER_UP_TO = 3;
 var STACK_ALWAYS_BEYOND = 6;
 function stackingFor(columns) {
@@ -5851,6 +6011,7 @@ function ObjectTable({
         ...fits ? {} : { tabIndex: 0 },
         className: cn(
           "overflow-x-auto rounded-lg border border-border",
+          focusOutlineInsetClass,
           EXPAND_COLUMN_WIDTH,
           fits && "@container"
         ),
@@ -6278,7 +6439,10 @@ function JsonView({ value }) {
           void navigator.clipboard.writeText(text).then(() => setCopied(true));
         },
         "aria-label": s.copyJson,
-        className: "absolute right-2 top-2 rounded border border-border bg-card p-1 text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+        className: cn(
+          "absolute right-2 top-2 rounded border border-border bg-card p-1 text-muted-foreground hover:text-foreground",
+          focusOutlineClass
+        ),
         children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "size-3.5" })
       }
     ),
@@ -6408,7 +6572,10 @@ function StuffPanel({
                 onClick: () => void handleDownload(),
                 disabled: savingShown,
                 "aria-label": page ? s.downloadHtml : s.download,
-                className: "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 disabled:opacity-60",
+                className: cn(
+                  "inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-[12px] text-muted-foreground hover:text-foreground disabled:opacity-60",
+                  focusOutlineClass
+                ),
                 children: [
                   savingShown ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" }),
                   savingShown ? s.downloading : page ? s.downloadHtml : s.download
@@ -6429,7 +6596,8 @@ function StuffPanel({
                     onClick: () => setView(id),
                     "aria-pressed": view === id,
                     className: cn(
-                      "rounded px-2 py-0.5 text-[12px] focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1",
+                      "rounded px-2 py-0.5 text-[12px]",
+                      focusOutlineClass,
                       view === id ? "bg-card font-medium text-foreground" : "text-muted-foreground hover:text-foreground"
                     ),
                     children: labels[id]
@@ -6467,6 +6635,6 @@ function pdfFileName(field, value, baseName) {
   return name === void 0 ? "" : name.replace(/\.[^.]+$/, "");
 }
 
-export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EN_FIELD_STRINGS, EnumField, FIELD_STRINGS_BY_LOCALE, FR_FIELD_STRINGS, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, FilePicker, FilePickerEntry, FillWithExample, HtmlPreview, ImageField, JsonView, ListField, Markdown, MethodForm, NumberField, ObjectField, OptionalToggle, PdfDownloadButton, ProseField, ResultEnvProvider, ResultField, ResultRoot, SUPPORTED_LOCALES, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, brandFillClass, brandFillInkClass, brandFillStrongClass, brandInkClass, cn, fieldControlClass, fieldStringsFor, humanizeFieldName, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
-//# sourceMappingURL=chunk-5IZWP2X4.js.map
-//# sourceMappingURL=chunk-5IZWP2X4.js.map
+export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EN_FIELD_STRINGS, EnumField, FIELD_STRINGS_BY_LOCALE, FR_FIELD_STRINGS, FieldDomIdProvider, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, FilePicker, FilePickerEntry, FillWithExample, HtmlPreview, ImageField, JsonView, ListField, Markdown, MethodForm, NumberField, ObjectField, OptionalToggle, PdfDownloadButton, ProseField, ResultEnvProvider, ResultField, ResultRoot, SUPPORTED_LOCALES, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, StuffViewer, Switch, TextField, ToggleGroup, ToggleGroupItem, UnknownField, checkedAccentClass, cn, fieldControlClass, fieldStringsFor, focusOutlineClass, humanizeFieldName, linkTextClass, renderHtmlPdf, resolveHtmlStorageUrls, saveInBrowser, selectedBorderClass, selectedFillClass, selectedFillStrongClass, useFieldDomId, useFieldPresentation, useFieldStrings, useMethodForm, useProseImages, useResolveShareUrl, useResolveUrl, useResolvedUrl };
+//# sourceMappingURL=chunk-NOSHTDID.js.map
+//# sourceMappingURL=chunk-NOSHTDID.js.map