@unofficialbox/box-open-elements 0.19.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/motion/behaviors.d.ts

@@ -0,0 +1,8 @@
+export declare const boeMotionStagger = "var(--boe-profile-motion-stagger, 50ms)";
+export declare const boeEntranceKeyframes = "\n@keyframes boe-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n@keyframes boe-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }\n@keyframes boe-fade-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes boe-status-check { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }\n@keyframes boe-status-spin { to { transform: rotate(360deg); } }\n";
+export declare const boeEntrance: (name?: "rise" | "pop" | "fade-in") => string;
+export declare const boeStaggerStyles = "animation-delay: calc(var(--i, 0) * var(--boe-profile-motion-stagger, 50ms));";
+/** Put padding on a grandchild, not the collapsible child. Pair with inert. */
+export declare const boeDisclosureStyles: (selector?: string) => string;
+/** Include in document and shadow styles: media rules do not cross shadow roots. */
+export declare const boeReducedMotionPolicy = "\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;\n    animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }\n}\n";

package/dist/foundations/motion/behaviors.js

@@ -0,0 +1,24 @@
+import { boeMotionDuration, boeMotionEasing } from "./tokens.js";
+export const boeMotionStagger = "var(--boe-profile-motion-stagger, 50ms)";
+export const boeEntranceKeyframes = `
+@keyframes boe-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+@keyframes boe-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
+@keyframes boe-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes boe-status-check { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
+@keyframes boe-status-spin { to { transform: rotate(360deg); } }
+`;
+export const boeEntrance = (name = "rise") => `animation: boe-${name} ${boeMotionDuration.arrival} ${boeMotionEasing.enter} both;`;
+export const boeStaggerStyles = `animation-delay: calc(var(--i, 0) * ${boeMotionStagger});`;
+/** Put padding on a grandchild, not the collapsible child. Pair with inert. */
+export const boeDisclosureStyles = (selector = ".boe-disclosure") => `
+${selector} { display: grid; grid-template-rows: 0fr; transition: grid-template-rows ${boeMotionDuration.panel} ${boeMotionEasing.enter}; }
+${selector}[data-open] { grid-template-rows: 1fr; }
+${selector} > * { min-height: 0; overflow: hidden; padding-block: 0; }
+`;
+/** Include in document and shadow styles: media rules do not cross shadow roots. */
+export const boeReducedMotionPolicy = `
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;
+    animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
+}
+`;

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

@@ -1,2 +1,4 @@
 export { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, boeTransition, } from "./tokens.js";
 export type { BoeMotionDuration, BoeMotionEasing } from "./tokens.js";
+export * from "./behaviors.js";
+export * from "./scroll-pin.js";

package/dist/foundations/motion/index.js

@@ -1 +1,3 @@
 export { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, boeTransition, } from "./tokens.js";
+export * from "./behaviors.js";
+export * from "./scroll-pin.js";

package/dist/foundations/motion/scroll-pin.d.ts

@@ -0,0 +1,19 @@
+/** Scroll following is changed by user intent, never by resize-induced scroll events. */
+export declare class ScrollPinController {
+    private readonly viewport;
+    private readonly onChange;
+    pinned: boolean;
+    private cleanup;
+    private observer?;
+    private pointer;
+    private lastTop;
+    private touchY;
+    constructor(viewport: HTMLElement, onChange?: (showJump: boolean) => void);
+    connect(content?: Element): void;
+    private atBottom;
+    private notify;
+    unpin(): void;
+    contentChanged(newMessage?: boolean): void;
+    jump(): void;
+    disconnect(): void;
+}

package/dist/foundations/motion/scroll-pin.js

@@ -0,0 +1,60 @@
+/** Scroll following is changed by user intent, never by resize-induced scroll events. */
+export class ScrollPinController {
+    viewport;
+    onChange;
+    pinned = true;
+    cleanup = [];
+    observer;
+    pointer = false;
+    lastTop = 0;
+    touchY = 0;
+    constructor(viewport, onChange = () => { }) {
+        this.viewport = viewport;
+        this.onChange = onChange;
+    }
+    connect(content = this.viewport) {
+        this.disconnect();
+        const on = (kind, fn) => {
+            this.viewport.addEventListener(kind, fn);
+            this.cleanup.push(() => this.viewport.removeEventListener(kind, fn));
+        };
+        on("wheel", e => { if (e.deltaY < 0)
+            this.unpin(); });
+        on("keydown", e => { if (["ArrowUp", "PageUp", "Home"].includes(e.key))
+            this.unpin(); });
+        on("touchstart", e => { this.touchY = e.touches[0]?.clientY ?? 0; });
+        on("touchmove", e => { const y = e.touches[0]?.clientY ?? this.touchY; if (y > this.touchY)
+            this.unpin(); this.touchY = y; });
+        on("pointerdown", () => { this.pointer = true; this.lastTop = this.viewport.scrollTop; });
+        const release = () => { this.pointer = false; };
+        this.viewport.ownerDocument.addEventListener("pointerup", release);
+        this.cleanup.push(() => this.viewport.ownerDocument.removeEventListener("pointerup", release));
+        on("scroll", () => {
+            if (this.pointer && this.viewport.scrollTop < this.lastTop)
+                this.unpin();
+            this.lastTop = this.viewport.scrollTop;
+            if (this.atBottom())
+                this.pinned = true;
+            this.notify();
+        });
+        if (typeof ResizeObserver !== "undefined") {
+            this.observer = new ResizeObserver(() => this.contentChanged());
+            this.observer.observe(this.viewport);
+            if (content !== this.viewport)
+                this.observer.observe(content);
+        }
+    }
+    atBottom() { return this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop < 40; }
+    notify() { this.onChange(!this.pinned && !this.atBottom()); }
+    unpin() { this.pinned = false; this.notify(); }
+    contentChanged(newMessage = false) { if (newMessage)
+        this.pinned = true; if (this.pinned)
+        this.viewport.scrollTop = this.viewport.scrollHeight; this.notify(); }
+    jump() {
+        this.pinned = true;
+        const reduced = this.viewport.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        this.viewport.scrollTo?.({ top: this.viewport.scrollHeight, behavior: reduced ? "instant" : "smooth" });
+        this.onChange(false);
+    }
+    disconnect() { this.cleanup.forEach(fn => fn()); this.cleanup = []; this.observer?.disconnect(); }
+}

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

@@ -6,6 +6,8 @@
  * prefers-reduced-motion policy is one place to update.
  */
 export declare const boeMotionDuration: {
+    readonly arrival: "var(--boe-profile-motion-arrival, 200ms)";
+    readonly panel: "var(--boe-profile-motion-panel, 320ms)";
     /** Quick accent transitions (charts, micro-feedback) */
     readonly fast: "var(--boe-profile-motion-fast, 120ms)";
     /**

package/dist/foundations/motion/tokens.js

@@ -6,6 +6,8 @@
  * prefers-reduced-motion policy is one place to update.
  */
 export const boeMotionDuration = {
+    arrival: "var(--boe-profile-motion-arrival, 200ms)",
+    panel: "var(--boe-profile-motion-panel, 320ms)",
     /** Quick accent transitions (charts, micro-feedback) */
     fast: "var(--boe-profile-motion-fast, 120ms)",
     /**

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/profiles/registry.d.ts

@@ -52,6 +52,9 @@ export declare const DESIGN_PROFILE_VARIABLES: {
         readonly primaryFocus: "--boe-profile-shadow-primary-focus";
     };
     readonly motion: {
+        readonly arrival: "--boe-profile-motion-arrival";
+        readonly panel: "--boe-profile-motion-panel";
+        readonly stagger: "--boe-profile-motion-stagger";
         readonly fast: "--boe-profile-motion-fast";
         readonly interactive: "--boe-profile-motion-interactive";
         readonly medium: "--boe-profile-motion-medium";

package/dist/foundations/profiles/registry.js

@@ -51,6 +51,9 @@ export const DESIGN_PROFILE_VARIABLES = {
         primaryFocus: "--boe-profile-shadow-primary-focus",
     },
     motion: {
+        arrival: "--boe-profile-motion-arrival",
+        panel: "--boe-profile-motion-panel",
+        stagger: "--boe-profile-motion-stagger",
         fast: "--boe-profile-motion-fast",
         interactive: "--boe-profile-motion-interactive",
         medium: "--boe-profile-motion-medium",

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

@@ -50,6 +50,9 @@ export interface DesignProfileElevation {
     primaryFocus?: string;
 }
 export interface DesignProfileMotion {
+    arrival?: string;
+    panel?: string;
+    stagger?: string;
     fast?: string;
     interactive?: string;
     medium?: string;

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

@@ -0,0 +1,6 @@
+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. */
+export declare const boeStatusGlyph: (kind: StatusKind) => string;
+export declare const boeStatusStyles = "\n.boe-status { flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; }\n.boe-status[data-kind=\"active\"] { color: var(--boe-token-surface-surface-brand, #0061d5); animation: boe-status-spin .8s linear infinite; }\n.boe-status[data-kind=\"active\"] circle { opacity: .25; }\n.boe-status[data-kind=\"done\"] { color: var(--boe-token-text-status-text-success, #187657); }\n.boe-status[data-kind=\"warning\"] { color: var(--boe-token-text-status-text-warning, #946400); }\n.boe-status[data-kind=\"failed\"] { color: var(--boe-token-text-status-text-error, #c52a46); }\n.boe-status[data-kind=\"skipped\"] circle { stroke-dasharray: 2 2; }\n.boe-status:is([data-kind=\"done\"], [data-kind=\"warning\"], [data-kind=\"failed\"]) circle { fill: currentColor; }\n.boe-status:is([data-kind=\"done\"], [data-kind=\"warning\"], [data-kind=\"failed\"]) path { stroke: var(--boe-token-surface-surface, #fff); stroke-linecap: round; }\n.boe-status[data-kind=\"done\"] { animation: boe-pop 200ms ease-out both; }\n.boe-status[data-kind=\"done\"] path { stroke-dasharray: 20; animation: boe-status-check 200ms ease-out both; }\n";

package/dist/foundations/status/index.js

@@ -0,0 +1,35 @@
+const mappings = {
+    pending: "pending", info: "pending", active: "active", running: "active", in_progress: "active",
+    done: "done", succeeded: "done", completed: "done", pass: "done", approved: "approved",
+    warning: "warning", warn: "warning", failed: "failed", fail: "failed", error: "failed",
+    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" || 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 = `
+.boe-status { flex: none; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; }
+.boe-status[data-kind="active"] { color: var(--boe-token-surface-surface-brand, #0061d5); animation: boe-status-spin .8s linear infinite; }
+.boe-status[data-kind="active"] circle { opacity: .25; }
+.boe-status[data-kind="done"] { color: var(--boe-token-text-status-text-success, #187657); }
+.boe-status[data-kind="warning"] { color: var(--boe-token-text-status-text-warning, #946400); }
+.boe-status[data-kind="failed"] { color: var(--boe-token-text-status-text-error, #c52a46); }
+.boe-status[data-kind="skipped"] circle { stroke-dasharray: 2 2; }
+.boe-status:is([data-kind="done"], [data-kind="warning"], [data-kind="failed"]) circle { fill: currentColor; }
+.boe-status:is([data-kind="done"], [data-kind="warning"], [data-kind="failed"]) path { stroke: var(--boe-token-surface-surface, #fff); stroke-linecap: round; }
+.boe-status[data-kind="done"] { animation: boe-pop 200ms ease-out both; }
+.boe-status[data-kind="done"] path { stroke-dasharray: 20; animation: boe-status-check 200ms ease-out both; }
+`;

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

@@ -134,3 +134,15 @@ export * from "./patterns/task/index.js";
 export * from "./patterns/governance/index.js";
 export * from "./patterns/insights/index.js";
 export * from "./element-maps.js";
+export * from "./components/feedback/status-icon.js";
+export * from "./components/collections/fact-list.js";
+export * from "./components/collections/check-list.js";
+export * from "./components/collections/document-list.js";
+export * from "./components/collections/result-blocks.js";
+export * from "./patterns/run/run-summary.js";
+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

@@ -148,3 +148,15 @@ export * from "./patterns/task/index.js";
 export * from "./patterns/governance/index.js";
 export * from "./patterns/insights/index.js";
 export * from "./element-maps.js";
+export * from "./components/feedback/status-icon.js";
+export * from "./components/collections/fact-list.js";
+export * from "./components/collections/check-list.js";
+export * from "./components/collections/document-list.js";
+export * from "./components/collections/result-blocks.js";
+export * from "./patterns/run/run-summary.js";
+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.d.ts

@@ -16,6 +16,15 @@ export declare class AgentChat extends BaseElement {
     static readonly tagName: string;
     static get observedAttributes(): string[];
     private controller;
+    private readonly scope;
+    private composing;
+    private scrollPin?;
+    private resizeObserver?;
+    private messageCount;
+    private jumpEl;
+    focusComposer(): void;
+    proposalAnchor(messageId: string, proposalId: string): string;
+    focusProposal(messageId: string, proposalId: string): void;
     private ownsController;
     private pendingStart;
     private unsubscribeFns;