@unofficialbox/box-open-elements 0.20.0 → 0.21.0

package/dist/foundations/icons/glyphs/index.d.ts

@@ -0,0 +1 @@
+export { icon2Chat, icon2ChatQuestion, icon2OverlaySquares, icon3OverlaySquares, icon3SquareCircle, icon3Tier, icon4Squares, icon4Squares2, icon6Dots, iconAddSmall, iconAddSquares, iconAddToCart, iconAid, iconAppCloud, iconArrowDown, iconArrowRight, iconAttachment, iconAudio, iconAward, iconBadge, iconBag, iconBank, iconBattery, iconBell, iconBinders, iconBolt, iconBoltBubble, iconBrain, iconBriefcase, iconBroadcast, iconBrowser, iconBrush, iconCalendar, iconCalendar2, iconCalendarAdded, iconCart, iconCart2, iconCash, iconCautionFile, iconCautionPhone, iconCautionTriangle, iconCenter, iconChatBubble, iconChatQuestion, iconCheck, iconCheckmark, iconClipboard, iconClock1, iconClock2, iconClock3, iconCloud, iconCloudServer, iconCode, iconCodeBrowser, iconCompass, iconComputer, iconComputerBadge, iconComputerDownload, iconComputerUpoad, iconConnectedDots, iconConnectedTogether, iconContainerLines, iconContainerLines2, iconCubeDotLine, iconCubeLine, iconCycle, iconDesktopLaptop, iconDevices, iconDistribute, iconDistribute2, iconDna, iconDollarSign, iconDonutCoffee, iconDownload, iconDrop, iconEnterpriseBuilding, iconEnvelope, iconEnvelopeBug, iconEnvelopeDoc, iconEnvelopeShred, iconExclamationMark, iconEye, iconFileApproved, iconFileBlank, iconFileBug, iconFileCheck, iconFileCloud, iconFileCopy, iconFileDocument, iconFileImage, iconFileInfographic, iconFileInsights, iconFileMove, iconFileMusic, iconFilePlus, iconFilePresentations, iconFileSpeed, iconFileSpreadsheet, iconFileText, iconFileVideo, iconFingerPrint, iconFlight, iconFolder, iconFolderUp, iconFolderUpload, iconFtpFolder, iconFunnel, iconGear, iconGears, iconGraduationCap, iconGraphIncrease, iconGraphMeasure, iconGroupCall, iconHeart, iconHome, iconImage, iconKeySafe, iconLeavesGrowing, iconLight, iconLineGraphV2, iconLineGraph, iconLink, iconLock, iconMagnifyingGlass, iconMartini, iconMaze, iconMedTool, iconMegaphone, iconMetadata, iconMicrophone, iconMinus, iconMixedMediaDownload, iconMusicNote, iconNotePad, iconNumber0, iconNumber1, iconNumber2, iconNumber3, iconNumber4, iconNumber5, iconNumber6, iconNumber7, iconNumber8, iconNumber9, iconOMaru, iconOverlay, iconPaper, iconPen, iconPerson, iconPhone, iconPhone2, iconPhoneBrowser, iconPieChart, iconPieChart3, iconPin, iconPin2, iconPlane, iconPlay, iconPlus, iconPodium, iconPoint, iconPointCenter, iconQuestionMark, iconRaft, iconRetailTag, iconRightToForget, iconRing, iconRocket, iconScale, iconScale2, iconScan, iconServer, iconShakeLove, iconSharedUsers, iconShield2Tone, iconShieldCheck, iconShieldVarified, iconSlice, iconSlider, iconSmbBuilding, iconSolidArrowDown, iconSolidArrowRight, iconSolidCheck, iconSolidCheckmark, iconSolidClock1, iconSolidClock2, iconSolidCompass, iconSolidDollarSign, iconSolidExclamationMark, iconSolidMinus, iconSolidOMaru, iconSolidPlay, iconSolidPlus, iconSolidQuestionMark, iconSolidXBatsu, iconSpeachBubble, iconSpotlight, iconSprayBottle, iconSquaresScale, iconSquaresScaleTop, iconSquaresTogether, iconStar, iconStopHand, iconStorage, iconStorageCloud, iconStorageKey, iconSun, iconTarget, iconTeam, iconTeamAdd, iconThumb, iconToggle, iconTools, iconTrophy, iconTruck, iconTwoFiles, iconTyping, iconTypingNow, iconUpDown, iconUpload, iconUploadCloud, iconUsb, iconUserAlert, iconUserVerified, iconUserVerifiedUnknown, iconUserBadge, iconUserPrimary, iconUserTimed, iconVideo, iconVideoCamera, iconVideoCamera2, iconWriting, iconXBatsu, iconZones, icon2Chat2, icon2ChatQuestion2, icon2OverlaySquares2, icon3OverlaySquares2, icon3SquareCircle2, icon3Tier2, icon4Squares3, icon4Squares1, icon6Dots2, iconAddSmall2, iconAddSquares2, iconAddToCart2, iconAid2, iconAppCloud2, iconArrowDown2, iconArrowRight2, iconAttachment2, iconAudio2, iconAward2, iconBadge2, iconBag2, iconBank2, iconBattery2, iconBell2, iconBinders2, iconBolt2, iconBoltBubble2, iconBrain2, iconBriefcase2, iconBroadcast2, iconBrowser2, iconBrush2, iconCalendar3, iconCalendar1, iconCalendarAdded2, iconCart3, iconCart1, iconCash2, iconCautionFile2, iconCautionPhone2, iconCautionTriangle2, iconCenter2, iconChatBubble2, iconChatQuestion2, iconCheck2, iconCheckmark2, iconClipboard2, iconClock12, iconClock22, iconClock32, iconCloud2, iconCloudServer2, iconCode2, iconCodeBrowser2, iconCompass2, iconComputer2, iconComputerBadge2, iconComputerDownload2, iconComputerUpoad2, iconConnectedDots2, iconConnectedTogether2, iconContainerLines3, iconContainerLines22, iconCubeDotLine2, iconCubeLine2, iconCycle2, iconDesktopLaptop2, iconDevices2, iconDistribute3, iconDistribute1, iconDna2, iconDollarSign2, iconDonutCoffee2, iconDownload2, iconDrop2, iconEnterpriseBuilding2, iconEnvelope2, iconEnvelopeBug2, iconEnvelopeDoc2, iconEnvelopeShred2, iconExclamationMark2, iconEye2, iconFileApproved2, iconFileBlank2, iconFileBug2, iconFileCheck2, iconFileCloud2, iconFileCopy2, iconFileDocument2, iconFileImage2, iconFileInfographic2, iconFileInsights2, iconFileMove2, iconFileMusic2, iconFilePlus2, iconFilePresentations2, iconFileSpeed2, iconFileSpreadsheet2, iconFileText2, iconFileVideo2, iconFingerPrint2, iconFlight2, iconFolder2, iconFolderUp2, iconFolderUpload2, iconFtpFolder2, iconFunnel2, iconGear2, iconGears2, iconGraduationCap2, iconGraphIncrease2, iconGraphMeasure2, iconGroupCall2, iconHeart2, iconHome2, iconImage2, iconKeySafe2, iconLeavesGrowing2, iconLight2, iconLineGraphV22, iconLineGraph2, iconLink2, iconLock2, iconMagnifyingGlass2, iconMartini2, iconMaze2, iconMedTool2, iconMegaphone2, iconMetadata2, iconMicrophone2, iconMinus2, iconMixedMediaDownload2, iconMusicNote2, iconNotePad2, iconNumber02, iconNumber12, iconNumber22, iconNumber32, iconNumber42, iconNumber52, iconNumber62, iconNumber72, iconNumber82, iconNumber92, iconOMaru2, iconOverlay2, iconPaper2, iconPen2, iconPerson2, iconPhone3, iconPhone1, iconPhoneBrowser2, iconPieChart2, iconPieChart32, iconPin3, iconPin1, iconPlane2, iconPlay2, iconPlus2, iconPodium2, iconPoint2, iconPointCenter2, iconQuestionMark2, iconRaft2, iconRetailTag2, iconRightToForget2, iconRing2, iconRocket2, iconScale3, iconScale1, iconScan2, iconServer2, iconShakeLove2, iconSharedUsers2, iconShield2Tone2, iconShieldCheck2, iconShieldVarified2, iconSlice2, iconSlider2, iconSmbBuilding2, iconSolidArrowDown2, iconSolidArrowRight2, iconSolidCheck2, iconSolidCheckmark2, iconSolidClock12, iconSolidClock22, iconSolidCompass2, iconSolidDollarSign2, iconSolidExclamationMark2, iconSolidMinus2, iconSolidOMaru2, iconSolidPlay2, iconSolidPlus2, iconSolidQuestionMark2, iconSolidXBatsu2, iconSpeachBubble2, iconSpotlight2, iconSprayBottle2, iconSquaresScale2, iconSquaresScaleTop2, iconSquaresTogether2, iconStar2, iconStopHand2, iconStorage2, iconStorageCloud2, iconStorageKey2, iconSun2, iconTarget2, iconTeam2, iconTeamAdd2, iconThumb2, iconToggle2, iconTools2, iconTrophy2, iconTruck2, iconTwoFiles2, iconTyping2, iconTypingNow2, iconUpDown2, iconUpload2, iconUploadCloud2, iconUsb2, iconUserAlert2, iconUserVerifiedUnknown2, iconUserVerified2, iconUserBadge2, iconUserPrimary2, iconUserTimed2, iconVideo2, iconVideoCamera3, iconVideoCamera1, iconWhiteArrowRight, iconWhiteCheck, iconWhitePlus, iconWhiteStop, iconWriting2, iconXBatsu2, iconZones2, } from "../box-iconography.generated.js";

package/dist/foundations/icons/glyphs/index.js

@@ -0,0 +1,2 @@
+/* auto-generated by tools/iconography/generate-box-iconography.ts */
+export { icon2Chat, icon2ChatQuestion, icon2OverlaySquares, icon3OverlaySquares, icon3SquareCircle, icon3Tier, icon4Squares, icon4Squares2, icon6Dots, iconAddSmall, iconAddSquares, iconAddToCart, iconAid, iconAppCloud, iconArrowDown, iconArrowRight, iconAttachment, iconAudio, iconAward, iconBadge, iconBag, iconBank, iconBattery, iconBell, iconBinders, iconBolt, iconBoltBubble, iconBrain, iconBriefcase, iconBroadcast, iconBrowser, iconBrush, iconCalendar, iconCalendar2, iconCalendarAdded, iconCart, iconCart2, iconCash, iconCautionFile, iconCautionPhone, iconCautionTriangle, iconCenter, iconChatBubble, iconChatQuestion, iconCheck, iconCheckmark, iconClipboard, iconClock1, iconClock2, iconClock3, iconCloud, iconCloudServer, iconCode, iconCodeBrowser, iconCompass, iconComputer, iconComputerBadge, iconComputerDownload, iconComputerUpoad, iconConnectedDots, iconConnectedTogether, iconContainerLines, iconContainerLines2, iconCubeDotLine, iconCubeLine, iconCycle, iconDesktopLaptop, iconDevices, iconDistribute, iconDistribute2, iconDna, iconDollarSign, iconDonutCoffee, iconDownload, iconDrop, iconEnterpriseBuilding, iconEnvelope, iconEnvelopeBug, iconEnvelopeDoc, iconEnvelopeShred, iconExclamationMark, iconEye, iconFileApproved, iconFileBlank, iconFileBug, iconFileCheck, iconFileCloud, iconFileCopy, iconFileDocument, iconFileImage, iconFileInfographic, iconFileInsights, iconFileMove, iconFileMusic, iconFilePlus, iconFilePresentations, iconFileSpeed, iconFileSpreadsheet, iconFileText, iconFileVideo, iconFingerPrint, iconFlight, iconFolder, iconFolderUp, iconFolderUpload, iconFtpFolder, iconFunnel, iconGear, iconGears, iconGraduationCap, iconGraphIncrease, iconGraphMeasure, iconGroupCall, iconHeart, iconHome, iconImage, iconKeySafe, iconLeavesGrowing, iconLight, iconLineGraphV2, iconLineGraph, iconLink, iconLock, iconMagnifyingGlass, iconMartini, iconMaze, iconMedTool, iconMegaphone, iconMetadata, iconMicrophone, iconMinus, iconMixedMediaDownload, iconMusicNote, iconNotePad, iconNumber0, iconNumber1, iconNumber2, iconNumber3, iconNumber4, iconNumber5, iconNumber6, iconNumber7, iconNumber8, iconNumber9, iconOMaru, iconOverlay, iconPaper, iconPen, iconPerson, iconPhone, iconPhone2, iconPhoneBrowser, iconPieChart, iconPieChart3, iconPin, iconPin2, iconPlane, iconPlay, iconPlus, iconPodium, iconPoint, iconPointCenter, iconQuestionMark, iconRaft, iconRetailTag, iconRightToForget, iconRing, iconRocket, iconScale, iconScale2, iconScan, iconServer, iconShakeLove, iconSharedUsers, iconShield2Tone, iconShieldCheck, iconShieldVarified, iconSlice, iconSlider, iconSmbBuilding, iconSolidArrowDown, iconSolidArrowRight, iconSolidCheck, iconSolidCheckmark, iconSolidClock1, iconSolidClock2, iconSolidCompass, iconSolidDollarSign, iconSolidExclamationMark, iconSolidMinus, iconSolidOMaru, iconSolidPlay, iconSolidPlus, iconSolidQuestionMark, iconSolidXBatsu, iconSpeachBubble, iconSpotlight, iconSprayBottle, iconSquaresScale, iconSquaresScaleTop, iconSquaresTogether, iconStar, iconStopHand, iconStorage, iconStorageCloud, iconStorageKey, iconSun, iconTarget, iconTeam, iconTeamAdd, iconThumb, iconToggle, iconTools, iconTrophy, iconTruck, iconTwoFiles, iconTyping, iconTypingNow, iconUpDown, iconUpload, iconUploadCloud, iconUsb, iconUserAlert, iconUserVerified, iconUserVerifiedUnknown, iconUserBadge, iconUserPrimary, iconUserTimed, iconVideo, iconVideoCamera, iconVideoCamera2, iconWriting, iconXBatsu, iconZones, icon2Chat2, icon2ChatQuestion2, icon2OverlaySquares2, icon3OverlaySquares2, icon3SquareCircle2, icon3Tier2, icon4Squares3, icon4Squares1, icon6Dots2, iconAddSmall2, iconAddSquares2, iconAddToCart2, iconAid2, iconAppCloud2, iconArrowDown2, iconArrowRight2, iconAttachment2, iconAudio2, iconAward2, iconBadge2, iconBag2, iconBank2, iconBattery2, iconBell2, iconBinders2, iconBolt2, iconBoltBubble2, iconBrain2, iconBriefcase2, iconBroadcast2, iconBrowser2, iconBrush2, iconCalendar3, iconCalendar1, iconCalendarAdded2, iconCart3, iconCart1, iconCash2, iconCautionFile2, iconCautionPhone2, iconCautionTriangle2, iconCenter2, iconChatBubble2, iconChatQuestion2, iconCheck2, iconCheckmark2, iconClipboard2, iconClock12, iconClock22, iconClock32, iconCloud2, iconCloudServer2, iconCode2, iconCodeBrowser2, iconCompass2, iconComputer2, iconComputerBadge2, iconComputerDownload2, iconComputerUpoad2, iconConnectedDots2, iconConnectedTogether2, iconContainerLines3, iconContainerLines22, iconCubeDotLine2, iconCubeLine2, iconCycle2, iconDesktopLaptop2, iconDevices2, iconDistribute3, iconDistribute1, iconDna2, iconDollarSign2, iconDonutCoffee2, iconDownload2, iconDrop2, iconEnterpriseBuilding2, iconEnvelope2, iconEnvelopeBug2, iconEnvelopeDoc2, iconEnvelopeShred2, iconExclamationMark2, iconEye2, iconFileApproved2, iconFileBlank2, iconFileBug2, iconFileCheck2, iconFileCloud2, iconFileCopy2, iconFileDocument2, iconFileImage2, iconFileInfographic2, iconFileInsights2, iconFileMove2, iconFileMusic2, iconFilePlus2, iconFilePresentations2, iconFileSpeed2, iconFileSpreadsheet2, iconFileText2, iconFileVideo2, iconFingerPrint2, iconFlight2, iconFolder2, iconFolderUp2, iconFolderUpload2, iconFtpFolder2, iconFunnel2, iconGear2, iconGears2, iconGraduationCap2, iconGraphIncrease2, iconGraphMeasure2, iconGroupCall2, iconHeart2, iconHome2, iconImage2, iconKeySafe2, iconLeavesGrowing2, iconLight2, iconLineGraphV22, iconLineGraph2, iconLink2, iconLock2, iconMagnifyingGlass2, iconMartini2, iconMaze2, iconMedTool2, iconMegaphone2, iconMetadata2, iconMicrophone2, iconMinus2, iconMixedMediaDownload2, iconMusicNote2, iconNotePad2, iconNumber02, iconNumber12, iconNumber22, iconNumber32, iconNumber42, iconNumber52, iconNumber62, iconNumber72, iconNumber82, iconNumber92, iconOMaru2, iconOverlay2, iconPaper2, iconPen2, iconPerson2, iconPhone3, iconPhone1, iconPhoneBrowser2, iconPieChart2, iconPieChart32, iconPin3, iconPin1, iconPlane2, iconPlay2, iconPlus2, iconPodium2, iconPoint2, iconPointCenter2, iconQuestionMark2, iconRaft2, iconRetailTag2, iconRightToForget2, iconRing2, iconRocket2, iconScale3, iconScale1, iconScan2, iconServer2, iconShakeLove2, iconSharedUsers2, iconShield2Tone2, iconShieldCheck2, iconShieldVarified2, iconSlice2, iconSlider2, iconSmbBuilding2, iconSolidArrowDown2, iconSolidArrowRight2, iconSolidCheck2, iconSolidCheckmark2, iconSolidClock12, iconSolidClock22, iconSolidCompass2, iconSolidDollarSign2, iconSolidExclamationMark2, iconSolidMinus2, iconSolidOMaru2, iconSolidPlay2, iconSolidPlus2, iconSolidQuestionMark2, iconSolidXBatsu2, iconSpeachBubble2, iconSpotlight2, iconSprayBottle2, iconSquaresScale2, iconSquaresScaleTop2, iconSquaresTogether2, iconStar2, iconStopHand2, iconStorage2, iconStorageCloud2, iconStorageKey2, iconSun2, iconTarget2, iconTeam2, iconTeamAdd2, iconThumb2, iconToggle2, iconTools2, iconTrophy2, iconTruck2, iconTwoFiles2, iconTyping2, iconTypingNow2, iconUpDown2, iconUpload2, iconUploadCloud2, iconUsb2, iconUserAlert2, iconUserVerifiedUnknown2, iconUserVerified2, iconUserBadge2, iconUserPrimary2, iconUserTimed2, iconVideo2, iconVideoCamera3, iconVideoCamera1, iconWhiteArrowRight, iconWhiteCheck, iconWhitePlus, iconWhiteStop, iconWriting2, iconXBatsu2, iconZones2, } from "../box-iconography.generated.js";

package/dist/foundations/icons/glyphs/package.json

@@ -0,0 +1 @@
+{"type":"module","sideEffects":false}

package/dist/foundations/overlay/positioning.js

@@ -91,6 +91,13 @@ export const resolvePosition = (anchor, floating, viewport, options = {}) => {
         if (shift)
             y = clamp(y, padding, viewport.height - floating.height - padding);
     }
+    // On a narrow viewport neither side may fit (a right popover can flip to a
+    // still-offscreen left position). Keep the surface reachable after flipping.
+    // Explicit flip/shift opt-outs retain the requested overflow behavior.
+    if (flip && shift) {
+        x = clamp(x, padding, viewport.width - floating.width - padding);
+        y = clamp(y, padding, viewport.height - floating.height - padding);
+    }
     return { x, y, side, align };
 };
 /** Parse a placement string like `"bottom-start"` / `"top"` / `"right-center"`. */

package/dist/foundations/status/index.d.ts

@@ -1,4 +1,4 @@
-export type StatusKind = "pending" | "active" | "done" | "warning" | "failed" | "skipped";
+export type StatusKind = "pending" | "active" | "done" | "warning" | "failed" | "skipped" | "approved" | "rejected";
 export declare const toStatusKind: (status: string) => StatusKind;
 export declare const statusLabel: (kind: StatusKind) => string;
 /** Decorative markup. Pair with visible words or the StatusIcon component. */

package/dist/foundations/status/index.js

@@ -1,21 +1,23 @@
 const mappings = {
     pending: "pending", info: "pending", active: "active", running: "active", in_progress: "active",
-    done: "done", succeeded: "done", completed: "done", pass: "done", approved: "done",
+    done: "done", succeeded: "done", completed: "done", pass: "done", approved: "approved",
     warning: "warning", warn: "warning", failed: "failed", fail: "failed", error: "failed",
-    skipped: "skipped", rejected: "skipped",
+    skipped: "skipped", rejected: "rejected",
 };
 export const toStatusKind = (status) => mappings[status] ?? "pending";
 export const statusLabel = (kind) => ({
     pending: "Pending", active: "In progress", done: "Done", warning: "Done with a warning",
     failed: "Failed", skipped: "Skipped",
+    approved: "Approved", rejected: "Rejected",
 })[kind];
 /** Decorative markup. Pair with visible words or the StatusIcon component. */
 export const boeStatusGlyph = (kind) => {
     const state = toStatusKind(kind);
-    const path = state === "done" ? '<path d="m4 8 3 3 5-6"/>'
-        : state === "failed" ? '<path d="m5 5 6 6m0-6-6 6"/>'
-            : state === "warning" ? '<path d="M5 8h6"/>'
-                : state === "active" ? '<path d="M8 1a7 7 0 0 1 7 7"/>' : "";
+    const path = state === "done" || state === "approved" ? '<path d="m4 8 3 3 5-6"/>'
+        : state === "rejected" ? '<path d="M4 12 12 4"/>'
+            : state === "failed" ? '<path d="m5 5 6 6m0-6-6 6"/>'
+                : state === "warning" ? '<path d="M5 8h6"/>'
+                    : state === "active" ? '<path d="M8 1a7 7 0 0 1 7 7"/>' : "";
     return `<svg class="boe-status" data-kind="${state}" aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><circle cx="8" cy="8" r="7"/>${path}</svg>`;
 };
 export const boeStatusStyles = `

package/dist/foundations/tokens/box-dark.js

@@ -36,7 +36,10 @@ export const boxDarkDesignSystem = {
         TextTextDanger: "#ff8a9b",
         TextTextSecondary: "#bcbcbc",
         TextTextPlaceholder: "#909090",
-        TextTextOnBrand: "#ffffff",
+        TextTextOnBrand: "#101010",
+        TextStatusTextSuccess: "#2ed58f",
+        TextStatusTextWarning: "#ffc447",
+        TextStatusTextError: "#ff8a9b",
         StrokeStroke: "#3a3a3a",
         StrokeStrokeHover: "#4e4e4e",
     },

package/dist/foundations/tokens/box-defaults.js

@@ -34,6 +34,9 @@ export const boxDefaultDesignSystem = {
         TextTextPlaceholder: "#909090",
         TextTextOnBrand: "#ffffff",
         TextTextDanger: "#d5324e",
+        TextStatusTextSuccess: "#187657",
+        TextStatusTextWarning: "#805600",
+        TextStatusTextError: "#b92340",
         StrokeStroke: "#e8e8e8",
         StrokeStrokeHover: "#bcbcbc",
     },

package/dist/foundations/tokens/registry.d.ts

@@ -26,6 +26,9 @@ export declare const SEMANTIC_TOKEN_ALIASES: {
     readonly textPlaceholder: "TextTextPlaceholder";
     readonly textOnBrand: "TextTextOnBrand";
     readonly textDanger: "TextTextDanger";
+    readonly textStatusSuccess: "TextStatusTextSuccess";
+    readonly textStatusWarning: "TextStatusTextWarning";
+    readonly textStatusError: "TextStatusTextError";
     readonly borderDefault: "StrokeStroke";
     readonly borderHover: "StrokeStrokeHover";
 };

package/dist/foundations/tokens/registry.js

@@ -28,6 +28,9 @@ export const SEMANTIC_TOKEN_ALIASES = {
     textPlaceholder: "TextTextPlaceholder",
     textOnBrand: "TextTextOnBrand",
     textDanger: "TextTextDanger",
+    textStatusSuccess: "TextStatusTextSuccess",
+    textStatusWarning: "TextStatusTextWarning",
+    textStatusError: "TextStatusTextError",
     borderDefault: "StrokeStroke",
     borderHover: "StrokeStrokeHover",
 };

package/dist/foundations/tokens/types.d.ts

@@ -29,6 +29,9 @@ export interface SemanticDesignTokenMap {
     textPlaceholder?: string;
     textOnBrand?: string;
     textDanger?: string;
+    textStatusSuccess?: string;
+    textStatusWarning?: string;
+    textStatusError?: string;
     borderDefault?: string;
     borderHover?: string;
 }

package/dist/index.d.ts

@@ -144,3 +144,5 @@ export * from "./patterns/agent-workspace/index.js";
 export * from "./patterns/call-console/index.js";
 export * from "./foundations/status/index.js";
 export * from "./patterns/run/progress.js";
+export * from "./patterns/undo/index.js";
+export * from "./patterns/flow-builder/index.js";

package/dist/index.js

@@ -158,3 +158,5 @@ export * from "./patterns/agent-workspace/index.js";
 export * from "./patterns/call-console/index.js";
 export * from "./foundations/status/index.js";
 export * from "./patterns/run/progress.js";
+export * from "./patterns/undo/index.js";
+export * from "./patterns/flow-builder/index.js";

package/dist/patterns/agent-chat/agent-chat.js

@@ -1,6 +1,7 @@
 import { AgentChatController } from "./controller.js";
 import { isSafeHref } from "../internal/safe-href.js";
 import { BaseElement } from "../../core/index.js";
+import { announce } from "../../foundations/a11y/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
 import { ScrollPinController, boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
@@ -242,7 +243,7 @@ const elementStyles = `
           gap: 0.4rem;
         }
 
-        [part="proposal-action"] {
+        [part="proposal-action"], [part="option"], [part="retry"] {
           appearance: none;
           font: inherit;
           font-size: 0.78rem;
@@ -256,7 +257,9 @@ const elementStyles = `
           transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
         }
 
-        [part="proposal-action"]:hover {
+        [part="option"], [part="retry"] { justify-self: start; min-height: 32px; text-align: left; }
+
+        [part="proposal-action"]:hover, [part="option"]:hover, [part="retry"]:hover {
           background: var(--boe-token-surface-surface-hover, #f4f4f4);
         }
 
@@ -270,7 +273,7 @@ const elementStyles = `
           color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 74%, black 26%);
         }
 
-        [part="proposal-action"]:focus-visible {
+        [part="proposal-action"]:focus-visible, [part="option"]:focus-visible, [part="retry"]:focus-visible {
           outline: none;
           box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
         }
@@ -563,6 +566,11 @@ export class AgentChat extends BaseElement {
             ["actionResolved", "action-resolved"],
         ];
         this.unsubscribeFns = events.map(([eventName, domEventName]) => controller.subscribe(eventName, payload => {
+            if (eventName === "actionResolved") {
+                const { proposal, decision } = payload;
+                const failed = proposal.outcome === "failed";
+                announce(`${proposal.title}: ${failed ? "Approved, but did not complete" : decision === "approved" ? "Approved" : "Rejected"}${proposal.note ? `. ${proposal.note}` : ""}`, failed ? "assertive" : "polite", this.ownerDocument);
+            }
             this.dispatchEvent(new CustomEvent(domEventName, {
                 bubbles: true,
                 composed: true,
@@ -598,7 +606,7 @@ export class AgentChat extends BaseElement {
             .map(proposal => {
             if (proposal.decision) {
                 const failed = proposal.outcome === "failed";
-                return `<div part="proposal" tabindex="-1" id="${this.proposalAnchor(message.id, proposal.id)}" data-proposal-id="${escapeHtml(proposal.id)}" data-decision="${escapeHtml(proposal.decision)}" ${failed ? 'role="alert"' : ""}>
+                return `<div part="proposal" aria-live="off" tabindex="-1" id="${this.proposalAnchor(message.id, proposal.id)}" data-proposal-id="${escapeHtml(proposal.id)}" data-decision="${escapeHtml(proposal.decision)}" ${failed ? 'role="alert"' : ""}>
           <span part="decision">${boeStatusGlyph(failed ? "failed" : proposal.decision === "approved" ? "done" : "skipped")}${proposal.decision === "approved" ? failed ? "Approved · didn't complete" : "Approved" : "Rejected"} · <span part="proposal-title">${escapeHtml(proposal.title)}</span></span>
           ${proposal.note ? `<p part="proposal-note">${escapeHtml(proposal.note)}</p>` : ""}
           ${failed ? `<button part="retry" data-message-id="${escapeHtml(message.id)}">Try again</button>` : ""}</div>`;

package/dist/patterns/call-console/call-console.d.ts

@@ -6,6 +6,8 @@ export declare class CallConsole extends BaseElement {
     private model;
     private unsubscribe?;
     private selected;
+    private clearing;
+    private rowSignatures;
     get callController(): CallConsoleController | null;
     set callController(value: CallConsoleController | null);
     private listen;
@@ -13,5 +15,6 @@ export declare class CallConsole extends BaseElement {
     disconnectedCallback(): void;
     protected renderTemplate(): void;
     protected setupListeners(): void;
+    private get filters();
     protected update(): void;
 }

package/dist/patterns/call-console/call-console.js

@@ -1,5 +1,9 @@
 import { BaseElement } from "../../core/element.js";
 import { SplitView } from "../../components/layout/split-view.js";
+import { Button } from "../../components/actions/button.js";
+import { CodeBlock } from "../../components/output/code-block.js";
+import { boeControl, boeRadius } from "../../foundations/geometry/index.js";
+import { boeStatusGlyph, boeStatusStyles } from "../../foundations/status/index.js";
 import { boeEntrance, boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
 import { callFailed, callStatus, formatCallHttp } from "./types.js";
 const DEFAULT_TAG_NAME = "box-call-console";
@@ -29,6 +33,8 @@ export class CallConsole extends BaseElement {
     model = null;
     unsubscribe;
     selected = "";
+    clearing = false;
+    rowSignatures = new WeakMap();
     get callController() { return this.model; }
     set callController(value) { this.unsubscribe?.(); this.model = value; if (this.isConnected)
         this.listen(); if (this.isRendered)
@@ -38,21 +44,73 @@ export class CallConsole extends BaseElement {
     disconnectedCallback() { this.unsubscribe?.(); }
     renderTemplate() {
         SplitView.register();
+        Button.register();
+        CodeBlock.register();
         this.shadowRoot.innerHTML = `<style>:host{display:block;min-width:0;color:var(--boe-token-text-text,#222);font:inherit}:host([hidden]){display:none !important}
-    header{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center} pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;max-height:30rem;overflow:auto}
-    button,select{font:inherit;color:inherit;background:var(--boe-token-surface-surface,#fff);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:5px;padding:.4rem;cursor:pointer}
-    [part="call"]{width:100%;display:grid;grid-template-columns:5rem 5rem minmax(0,1fr) 4rem;text-align:left;gap:.5rem;margin:.4rem 0;${boeEntrance()}}
-    #list{container-type:inline-size} [part="call"] span{min-width:0;overflow-wrap:anywhere}
-    @container(max-width:420px){[part="call"]{grid-template-columns:minmax(0,1fr) auto}[part="call"] span:nth-child(even){text-align:right}}
-    [aria-current="true"]{background:var(--boe-token-surface-surface-secondary,#f5f5f5)} [part="skeleton"]{height:2rem;margin:.5rem;background:var(--boe-token-surface-surface-secondary,#eee)}
-    ${boeEntranceKeyframes}${boeReducedMotionPolicy}</style>
-    <header><span id="connection" role="status"></span><label>Service <select id="service"><option value="">All</option></select></label><label><input type="checkbox" id="errors"> Errors only</label><button id="clear">Clear</button><span id="copy-status" role="status"></span></header>
-    <box-split-view resizable ratio="0.4"><div slot="primary" id="list"></div><div><button data-copy="request">Copy request</button><button data-copy="response">Copy response</button><button data-copy="both">Copy both</button><h3>Request <button data-copy="request" aria-label="Copy request code">⧉</button></h3><pre id="request"></pre><h3>Response <button data-copy="response" aria-label="Copy response code">⧉</button></h3><pre id="response"></pre></div></box-split-view>`;
+    :host{container-type:inline-size;font-size:14px;line-height:1.5}
+    *{box-sizing:border-box} [hidden]{display:none!important}
+    [part="console"]{border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:${boeRadius.large};background:var(--boe-token-surface-surface,#fff);overflow:hidden}
+    header,.filters,.pane-heading{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;padding:1rem}
+    header{justify-content:space-between} h2,h3,p{margin:0} h2{font-size:16px} h3{font-size:14px} small,.muted{color:var(--boe-token-text-text-secondary,#666);font-size:12px}
+    #connection{display:inline-flex;align-items:center;gap:.4rem;font-size:12px}
+    .filters{border-block:1px solid var(--boe-token-stroke-stroke,#ddd);background:var(--boe-token-surface-surface-secondary,#f7f7f7);padding:.75rem 1rem}
+    label{display:flex;align-items:center;gap:.5rem;font-size:13px} .search{flex:1;min-width:10rem} .search input{width:100%}
+    input[type="search"],select{min-height:${boeControl.height};border:1px solid var(--boe-token-stroke-stroke,#ccc);border-radius:${boeRadius.control};background:var(--boe-token-surface-surface,#fff);color:inherit;font:inherit;padding:.35rem .65rem;min-width:0}
+    input[type="checkbox"]{accent-color:var(--boe-token-surface-surface-brand,#0061d5)}
+    button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--boe-token-surface-surface-brand,#0061d5);outline-offset:-2px}
+    .pane-heading{justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--boe-token-stroke-stroke,#ddd)}
+    #list{overflow:auto;max-height:34rem;min-height:20rem;padding:.35rem}
+    [part="call"]{font:inherit;color:inherit;border:1px solid transparent;background:transparent;border-radius:${boeRadius.med};width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;text-align:left;gap:.3rem .75rem;padding:.75rem;cursor:pointer;${boeEntrance()}}
+    [part="call"]:hover{background:var(--boe-token-surface-surface-secondary,#f5f5f5)}
+    [part="call"][aria-current="true"]{background:var(--boe-token-surface-item-surface-selected,#eaf3ff);border-color:var(--boe-token-surface-surface-brand,#0061d5)}
+    [part="call"] span{min-width:0;overflow-wrap:anywhere} [part="call"] .state{display:flex;gap:.4rem;align-items:center;font-size:12px} [part="call"] .summary{font-weight:600} [part="call"] .duration{text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
+    #inspector{padding:1rem;min-width:0;max-height:38rem;overflow:auto} #summary{font-size:15px;overflow-wrap:anywhere} #metadata{margin:.25rem 0 1rem;overflow-wrap:anywhere} .code-heading{margin:1rem 0 .5rem}
+    #outcome{padding:.6rem .75rem;margin:.75rem 0;border-radius:${boeRadius.med};background:var(--boe-token-surface-surface-secondary,#f5f5f5);overflow-wrap:anywhere}
+    #copy-status{font-size:12px;color:var(--boe-token-text-text-secondary,#666)}
+    #list-empty,#detail-empty{padding:2.5rem 1rem;text-align:center;color:var(--boe-token-text-text-secondary,#666)}
+    [part="skeleton"]{height:3rem;margin:.5rem;background:var(--boe-token-surface-surface-secondary,#eee);border-radius:${boeRadius.med}}
+    box-code-block::part(pre){max-height:18rem;overflow:auto}
+    @container(max-width:640px){box-split-view::part(split-view){grid-template-columns:minmax(0,1fr)!important}box-split-view::part(separator){display:none}#list{min-height:0;max-height:17rem}#inspector{border-top:1px solid var(--boe-token-stroke-stroke,#ddd)}.search{flex-basis:100%}}
+    ${boeEntranceKeyframes}${boeStatusStyles}${boeReducedMotionPolicy}</style>
+    <section part="console" aria-label="API call console">
+    <header><div><h2>API calls</h2><small>Inspect requests, responses, and tool outcomes</small></div><span id="connection" role="status"></span><box-button id="retry" label="Reconnect" tone="neutral" hidden></box-button></header>
+    <div class="filters"><label class="search">Search <input id="search" type="search" placeholder="Method, URL, or summary"></label><label>Service <select id="service" aria-label="Service"><option value="">All services</option></select></label><label><input type="checkbox" id="errors"> Errors only</label><box-button id="clear" label="Clear calls" tone="neutral"></box-button></div>
+    <box-split-view resizable ratio="0.42" label="Calls and request inspector"><section slot="primary" aria-label="Calls"><div class="pane-heading"><h3>Requests</h3><span id="count" class="muted" role="status"></span></div><div id="list"></div><p id="list-empty" role="status" hidden></p></section><section aria-label="Request inspector"><div class="pane-heading"><h3>Inspector</h3><box-button data-copy="both" label="Copy both" tone="neutral"></box-button><span id="copy-status" role="status"></span></div><p id="detail-empty">Select a request to inspect its details.</p><div id="inspector" hidden><h3 id="summary"></h3><p id="metadata" class="muted"></p><p id="outcome" role="status" hidden></p><h3 class="code-heading">Request</h3><box-code-block id="request" copy-label="Copy request" wrap></box-code-block><h3 class="code-heading">Response</h3><box-code-block id="response" copy-label="Copy response" wrap></box-code-block></div></section></box-split-view></section>`;
     }
     setupListeners() {
-        this.shadowRoot.querySelector("#service").addEventListener("change", () => this.update());
-        this.shadowRoot.querySelector("#errors").addEventListener("change", () => this.update());
-        this.shadowRoot.querySelector("#clear").addEventListener("click", () => { void this.model?.clear().catch(() => { this.shadowRoot.querySelector("#copy-status").textContent = "Unable to clear calls"; }); });
+        this.shadowRoot.querySelector("#list").addEventListener("keydown", event => {
+            const e = event;
+            const rows = Array.from(this.shadowRoot.querySelectorAll('[part="call"]'));
+            const current = rows.indexOf(e.target);
+            if (current < 0 || !["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key))
+                return;
+            e.preventDefault();
+            const next = e.key === "Home" ? 0 : e.key === "End" ? rows.length - 1 : (current + (e.key === "ArrowDown" ? 1 : -1) + rows.length) % rows.length;
+            rows[next].focus();
+            rows[next].click();
+        });
+        const filter = () => { this.update(); this.dispatchEvent(new CustomEvent("filters-changed", { bubbles: true, composed: true, detail: this.filters })); };
+        this.shadowRoot.querySelector("#service").addEventListener("change", filter);
+        this.shadowRoot.querySelector("#errors").addEventListener("change", filter);
+        this.shadowRoot.querySelector("#search").addEventListener("input", filter);
+        this.shadowRoot.querySelector("#retry").addEventListener("click", () => { void this.model?.connect(); });
+        this.shadowRoot.querySelector("#clear").addEventListener("click", async () => {
+            if (!this.model || this.clearing)
+                return;
+            this.clearing = true;
+            this.update();
+            try {
+                await this.model.clear();
+                this.dispatchEvent(new CustomEvent("calls-cleared", { bubbles: true, composed: true }));
+            }
+            catch {
+                this.shadowRoot.querySelector("#copy-status").textContent = "Unable to clear calls. Try again.";
+            }
+            finally {
+                this.clearing = false;
+                this.update();
+            }
+        });
         this.shadowRoot.querySelectorAll("[data-copy]").forEach(b => b.addEventListener("click", async () => {
             const entry = this.model?.entries.find(e => e.id === this.selected);
             if (!entry)
@@ -61,9 +119,19 @@ export class CallConsole extends BaseElement {
             this.shadowRoot.querySelector("#copy-status").textContent = ok ? "Copied" : "Copy unavailable; select the text to copy";
         }));
     }
+    get filters() {
+        return { service: this.shadowRoot.querySelector("#service").value, errorsOnly: this.shadowRoot.querySelector("#errors").checked, query: this.shadowRoot.querySelector("#search").value };
+    }
     update() {
+        if (!this.isRendered)
+            return;
         const state = this.model?.connection ?? "connecting";
-        this.shadowRoot.querySelector("#connection").textContent = state === "unavailable" ? "Restart the agent: /calls is unavailable" : state;
+        const connection = this.shadowRoot.querySelector("#connection");
+        connection.textContent = this.model ? ({ live: "Live", connecting: "Connecting…", reconnecting: "Reconnecting…", unavailable: "Endpoint unavailable" }[state]) : "Not connected";
+        this.shadowRoot.querySelector("#retry").hidden = !this.model || state === "live" || state === "connecting";
+        const clear = this.shadowRoot.querySelector("#clear");
+        clear.disabled = this.clearing || !this.model?.entries.length;
+        clear.label = this.clearing ? "Clearing…" : "Clear calls";
         const service = this.shadowRoot.querySelector("#service");
         const services = [...new Set(this.model?.entries.map(e => e.service) ?? [])];
         for (const name of services)
@@ -75,33 +143,59 @@ export class CallConsole extends BaseElement {
             }
         const errors = this.shadowRoot.querySelector("#errors").checked;
         const entries = this.model?.entries.filter(e => (!service.value || e.service === service.value) && (!errors || callFailed(e))) ?? [];
+        const query = this.filters.query.trim().toLowerCase();
+        const filtered = entries.filter(e => `${e.method} ${e.url} ${e.summary} ${e.service}`.toLowerCase().includes(query));
+        entries.splice(0, entries.length, ...filtered);
         if (!entries.some(e => e.id === this.selected))
             this.selected = entries[0]?.id ?? "";
         const list = this.shadowRoot.querySelector("#list");
         const focused = this.shadowRoot.activeElement?.getAttribute("data-call-id");
         list.querySelectorAll('[part="skeleton"]').forEach(el => el.remove());
         const existing = new Map(Array.from(list.children).map(el => [el.getAttribute("data-call-id"), el]));
-        for (const entry of entries) {
+        for (const [index, entry] of entries.entries()) {
             let button = existing.get(entry.id);
             existing.delete(entry.id);
             if (!button) {
                 button = document.createElement("button");
+                button.type = "button";
                 button.setAttribute("part", "call");
                 button.dataset.callId = entry.id;
-                button.addEventListener("click", () => { this.selected = entry.id; this.update(); });
+                button.addEventListener("click", () => { this.selected = entry.id; this.update(); this.dispatchEvent(new CustomEvent("call-selected", { bubbles: true, composed: true, detail: { id: entry.id } })); });
             }
             button.setAttribute("aria-current", String(entry.id === this.selected));
-            button.replaceChildren(...[callStatus(entry), entry.service, entry.summary, `${Math.round(entry.durationMs)} ms`].map(text => { const span = document.createElement("span"); span.textContent = text; return span; }));
-            list.append(button);
+            const labels = [callStatus(entry), entry.service, entry.summary, entry.pending ? "In progress" : `${Math.round(entry.durationMs)} ms`];
+            const signature = JSON.stringify(labels);
+            if (this.rowSignatures.get(button) !== signature) {
+                button.replaceChildren(...labels.map((text, index) => { const span = document.createElement("span"); span.textContent = text; span.className = ["state", "muted", "summary", "duration"][index]; if (index === 0) {
+                    const icon = document.createElement("span");
+                    icon.innerHTML = boeStatusGlyph(entry.pending ? "active" : callFailed(entry) ? "failed" : entry.expected ? "skipped" : "done");
+                    span.prepend(icon);
+                } return span; }));
+                this.rowSignatures.set(button, signature);
+            }
+            if (list.children[index] !== button)
+                list.insertBefore(button, list.children[index] ?? null);
             if (entry.id === focused)
                 button.focus({ preventScroll: true });
         }
         existing.forEach(el => el.remove());
-        if (!entries.length && state === "connecting")
+        if (!entries.length && state === "connecting" && this.model)
             list.innerHTML = '<div part="skeleton"></div><div part="skeleton"></div><div part="skeleton"></div>';
+        this.shadowRoot.querySelector("#count").textContent = `${entries.length} of ${this.model?.entries.length ?? 0}`;
+        const empty = this.shadowRoot.querySelector("#list-empty");
+        empty.hidden = entries.length > 0 || !!this.model && state === "connecting";
+        empty.textContent = !this.model ? "Connect a call controller to inspect requests." : state === "unavailable" ? "The /calls endpoint is unavailable. Start the agent, then reconnect." : state === "reconnecting" ? "Connection interrupted. Reconnect to load calls." : this.model.entries.length ? "No requests match these filters." : "No calls yet. New requests will appear here.";
         const entry = entries.find(e => e.id === this.selected);
-        this.shadowRoot.querySelector("#request").textContent = entry ? formatCallHttp(entry, "request") : "Select a call";
-        this.shadowRoot.querySelector("#response").textContent = entry ? formatCallHttp(entry, "response") : "";
+        this.shadowRoot.querySelector('[data-copy="both"]').disabled = !entry;
+        this.shadowRoot.querySelector("#inspector").hidden = !entry;
+        this.shadowRoot.querySelector("#detail-empty").hidden = !!entry;
+        this.shadowRoot.querySelector("#summary").textContent = entry?.summary ?? "";
+        this.shadowRoot.querySelector("#metadata").textContent = entry ? `${entry.service} · ${entry.method} · ${entry.pending ? "In progress" : `${entry.durationMs} ms`} · ${new Date(entry.startedAt).toLocaleTimeString()}` : "";
+        const outcome = this.shadowRoot.querySelector("#outcome");
+        outcome.hidden = !entry || !(entry.error || entry.rpcError || entry.expected || entry.pending);
+        outcome.textContent = entry?.rpcError ? `Tool failed despite HTTP ${entry.status}: ${entry.rpcError}` : entry?.error ?? entry?.expected ?? (entry?.pending ? "Waiting for the response…" : "");
+        this.shadowRoot.querySelector("#request").code = entry ? formatCallHttp(entry, "request") : "";
+        this.shadowRoot.querySelector("#response").code = entry ? entry.pending ? "Response pending" : formatCallHttp(entry, "response") : "";
     }
 }
 CallConsole.register();

package/dist/patterns/content-explorer/adapters/action-menu.js

@@ -206,6 +206,8 @@ export class ExplorerActionMenu extends BaseElement {
                 if (this.itemIdValue && actionId) {
                     const item = this.controllerValue?.getState().items.find(entry => entry.id === this.itemIdValue) ?? null;
                     const action = this.controllerValue?.getItemActions(this.itemIdValue).find(entry => entry.id === actionId) ?? null;
+                    if (!action || action.disabled)
+                        return;
                     this.controllerValue?.invokeItemAction(this.itemIdValue, actionId);
                     if (item && action) {
                         this.dispatchEvent(new CustomEvent(toKebabCase("itemActionInvoked"), {
@@ -249,7 +251,7 @@ export class ExplorerActionMenu extends BaseElement {
                 });
                 return;
             }
-            const menuItems = Array.from(this.shadowRoot.querySelectorAll('[part="menu-item"]'));
+            const menuItems = Array.from(this.shadowRoot.querySelectorAll('[part="menu-item"]:not(:disabled)'));
             handleRovingKeydown(keyboardEvent, menuItems, { orientation: "vertical" });
         });
     }
@@ -269,7 +271,7 @@ export class ExplorerActionMenu extends BaseElement {
         }
         const menuMarkup = this.open
             ? `<div id="${this.menuId}" part="menu" role="menu">${actions
-                .map(action => `<button type="button" part="menu-item" role="menuitem" data-action-id="${escapeHtml(action.id)}">${escapeHtml(action.label)}</button>`)
+                .map(action => `<button type="button" part="menu-item" role="menuitem" data-action-id="${escapeHtml(action.id)}" ${action.disabled ? 'disabled aria-disabled="true" tabindex="-1"' : ''}>${escapeHtml(action.label)}</button>`)
                 .join("")}</div>`
             : "";
         this.hostEl.innerHTML = `
@@ -286,12 +288,12 @@ export class ExplorerActionMenu extends BaseElement {
       </div>
     `;
         if (this.open) {
-            const menuItems = Array.from(this.shadowRoot?.querySelectorAll('[part="menu-item"]') ?? []);
+            const menuItems = Array.from(this.shadowRoot?.querySelectorAll('[part="menu-item"]:not(:disabled)') ?? []);
             applyRovingTabindex(menuItems, 0);
         }
         if (justOpened) {
             queueMicrotask(() => {
-                this.shadowRoot?.querySelector('[part="menu-item"]')?.focus();
+                this.shadowRoot?.querySelector('[part="menu-item"]:not(:disabled)')?.focus();
             });
             return;
         }
@@ -302,7 +304,7 @@ export class ExplorerActionMenu extends BaseElement {
             });
             return;
         }
-        if (focusedTrigger) {
+        if (focusedTrigger || (focusedActionId && !this.open)) {
             queueMicrotask(() => {
                 this.shadowRoot?.querySelector('[part="trigger"]')?.focus();
             });

package/dist/patterns/content-explorer/adapters/toolbar.js

@@ -9,6 +9,7 @@ const toKebabCase = (value) => value.replace(/[A-Z]/g, letter => `-${letter.toLo
 const elementStyles = `
         :host {
           display: block;
+          min-inline-size: 0;
           color: inherit;
           font: inherit;
         }
@@ -33,14 +34,15 @@ const elementStyles = `
 
         [part="search"] {
           flex: 1 1 14rem;
-          min-width: 12rem;
+          min-width: 0;
+          max-width: 100%;
         }
 
         [part="status"],
         [part="selection-count"] {
           color: var(--boe-token-text-text-secondary, #6f6f6f);
           font-size: 0.85rem;
-          white-space: nowrap;
+          overflow-wrap: anywhere;
           padding-bottom: 0.45rem;
         }
 
@@ -54,6 +56,8 @@ const elementStyles = `
 
         [part="refresh"],
         [part="clear-selection"] {
+          max-inline-size: 100%;
+          overflow-wrap: anywhere;
           appearance: none;
           font: inherit;
           font-size: 0.88rem;

package/dist/patterns/file-request/file-request-builder.js

@@ -302,6 +302,7 @@ export class FileRequestBuilder extends BaseElement {
         if (!host) {
             return;
         }
+        const focusedSetting = this.shadowRoot.activeElement?.getAttribute("data-setting-id");
         host.innerHTML = `
       <section part="builder">
         <header part="header">
@@ -318,6 +319,8 @@ export class FileRequestBuilder extends BaseElement {
       </section>
     `;
         this.shadowRoot.querySelectorAll("[data-setting-id]").forEach(input => {
+            if (focusedSetting === input.dataset.settingId)
+                input.focus({ preventScroll: true });
             input.addEventListener("change", () => {
                 const settingId = input.dataset.settingId;
                 if (!settingId) {

package/dist/patterns/flow-builder/flow-builder.d.ts

@@ -0,0 +1,48 @@
+import { BaseElement } from "../../core/index.js";
+import { type FlowKind, type FlowNode, type NodePath } from "./model.js";
+export type InspectorRenderer = (node: FlowNode, container: HTMLElement) => void | (() => void);
+/** Host-owned document editing with accessible navigation and responsive inspection. */
+export declare class FlowBuilder extends BaseElement {
+    static readonly tagName = "box-flow-builder";
+    private nodesValue;
+    private catalogValue;
+    private selectedValue;
+    private invalidValue;
+    private renderer?;
+    private cleanupInspector?;
+    private inspected;
+    private renderedRenderer?;
+    private observer?;
+    private narrow;
+    private insertion?;
+    private invoker?;
+    private spine;
+    private palette;
+    private picker;
+    private popup;
+    private aside;
+    private inspector;
+    private drawer;
+    private error;
+    get nodes(): FlowNode[];
+    set nodes(value: FlowNode[]);
+    get catalog(): readonly FlowKind[];
+    set catalog(value: readonly FlowKind[]);
+    get selected(): FlowNode | null;
+    set selected(node: FlowNode | null);
+    get renderInspector(): InspectorRenderer | undefined;
+    set renderInspector(renderer: InspectorRenderer | undefined);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setNarrow;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private closePicker;
+    private insert;
+    select(node: FlowNode | null): void;
+    /** Mark validation without opening a sheet over the error on a narrow screen. */
+    setValidation(message: string, path?: NodePath, document?: unknown): void;
+    refresh(): void;
+    protected update(): void;
+    private updateInspector;
+}