@unofficialbox/box-open-elements 0.20.0 → 0.22.0

package/dist/element-maps.d.ts

@@ -73,6 +73,9 @@ import type { FactList } from "./components/collections/fact-list.js";
 import type { Fieldset } from "./components/forms/fieldset.js";
 import type { FileRequestBuilder } from "./patterns/file-request/file-request-builder.js";
 import type { FilterBar } from "./patterns/search/filter-bar.js";
+import type { FlowBuilder } from "./patterns/flow-builder/flow-builder.js";
+import type { FlowCard } from "./patterns/flow-builder/primitives.js";
+import type { FlowSpine } from "./patterns/flow-builder/primitives.js";
 import type { FormWizard } from "./patterns/form-wizard/form-wizard.js";
 import type { FormattedDate } from "./components/output/formatted-date.js";
 import type { FormattedDuration } from "./components/output/formatted-duration.js";
@@ -86,9 +89,11 @@ import type { HelpText } from "./components/feedback/help-text.js";
 import type { IconButton } from "./components/actions/icon-button.js";
 import type { Illustration } from "./components/visuals/illustration.js";
 import type { Indicator } from "./components/feedback/indicator.js";
+import type { InsertPoint } from "./patterns/flow-builder/primitives.js";
 import type { InviteCollaboratorsModal } from "./patterns/share/invite-collaborators-modal.js";
 import type { ItemDetailsPanel } from "./patterns/item/item-details-panel.js";
 import type { ItemForm } from "./patterns/item/item-form.js";
+import type { KindPicker } from "./patterns/flow-builder/primitives.js";
 import type { LineChart } from "./patterns/insights/line-chart.js";
 import type { LineageGraph } from "./patterns/lineage/lineage-graph.js";
 import type { LinkButton } from "./components/actions/link-button.js";
@@ -233,6 +238,9 @@ declare global {
         "box-fieldset": Fieldset;
         "box-file-request-builder": FileRequestBuilder;
         "box-filter-bar": FilterBar;
+        "box-flow-builder": FlowBuilder;
+        "box-flow-card": FlowCard;
+        "box-flow-spine": FlowSpine;
         "box-form-wizard": FormWizard;
         "box-formatted-date": FormattedDate;
         "box-formatted-duration": FormattedDuration;
@@ -246,9 +254,11 @@ declare global {
         "box-icon-button": IconButton;
         "box-illustration": Illustration;
         "box-indicator": Indicator;
+        "box-insert-point": InsertPoint;
         "box-invite-collaborators-modal": InviteCollaboratorsModal;
         "box-item-details-panel": ItemDetailsPanel;
         "box-item-form": ItemForm;
+        "box-kind-picker": KindPicker;
         "box-line-chart": LineChart;
         "box-lineage-graph": LineageGraph;
         "box-link-button": LinkButton;
@@ -327,4 +337,4 @@ declare global {
     }
 }
 /** Every element tag the library registers, for host-side narrowing. */
-export type BoxElementTagName = "box-access-stats" | "box-accordion" | "box-activity-density" | "box-agent-chat" | "box-agent-workspace" | "box-alert" | "box-annotation-inspector" | "box-annotation-thread" | "box-annotation-toolbar" | "box-app-shell" | "box-audit-log" | "box-avatar" | "box-badge" | "box-badgeable" | "box-bar-chart" | "box-breadcrumb" | "box-bulk-action-bar" | "box-button" | "box-button-group" | "box-calendar" | "box-call-console" | "box-card" | "box-carousel" | "box-category-selector" | "box-chart-panel" | "box-check-list" | "box-checkbox" | "box-checkbox-group" | "box-chip" | "box-code-block" | "box-collaborator-avatars" | "box-color-picker" | "box-combobox" | "box-command-palette" | "box-comment-thread" | "box-compare-view" | "box-contact-datalist-item" | "box-content-explorer" | "box-content-picker" | "box-content-sidebar" | "box-content-uploader" | "box-context-menu" | "box-datalist-item" | "box-date-field" | "box-dialog" | "box-diff-viewer" | "box-divider" | "box-document-list" | "box-donut-chart" | "box-draggable-list" | "box-drawer" | "box-drop-zone" | "box-dropdown" | "box-dual-listbox" | "box-due-badge" | "box-empty-state" | "box-error-mask" | "box-explorer-action-menu" | "box-explorer-breadcrumbs" | "box-explorer-items" | "box-explorer-list" | "box-explorer-table" | "box-explorer-toolbar" | "box-fact-list" | "box-fieldset" | "box-file-request-builder" | "box-filter-bar" | "box-form-wizard" | "box-formatted-date" | "box-formatted-duration" | "box-formatted-file-size" | "box-formatted-number" | "box-governance-panel" | "box-grid" | "box-grid-view" | "box-guide-tooltip" | "box-help-text" | "box-icon-button" | "box-illustration" | "box-indicator" | "box-invite-collaborators-modal" | "box-item-details-panel" | "box-item-form" | "box-line-chart" | "box-lineage-graph" | "box-link-button" | "box-menu" | "box-menu-item" | "box-metadata-filter-builder" | "box-metadata-inspector" | "box-metric-card" | "box-multi-select" | "box-nav-sidebar" | "box-notification-bell" | "box-notification-inbox" | "box-nudge" | "box-number-input" | "box-pagination" | "box-path" | "box-permission-matrix" | "box-persona" | "box-pill-cloud" | "box-pill-selector-dropdown" | "box-popover" | "box-presence" | "box-preview-element" | "box-preview-header" | "box-progress-bar" | "box-progress-ring" | "box-progress-steps" | "box-provenance-strip" | "box-radio-group" | "box-range-slider" | "box-rating" | "box-relative-time" | "box-result-blocks" | "box-review-queue-item" | "box-rich-text-input" | "box-run-summary" | "box-run-trace" | "box-saved-view-picker" | "box-search-field" | "box-search-results-header" | "box-section" | "box-segmented-control" | "box-select" | "box-share-panel" | "box-shortcuts-overlay" | "box-sidebar-toggle-button" | "box-signature-ceremony" | "box-skeleton" | "box-slider" | "box-spin-button" | "box-spinner" | "box-split-view" | "box-status-icon" | "box-switch" | "box-table" | "box-tabs" | "box-tag-input" | "box-task-assignment-panel" | "box-text-area" | "box-text-field" | "box-thumbnail-card" | "box-tile-group" | "box-time-field" | "box-timeline" | "box-toast" | "box-toolbar" | "box-tooltip" | "box-tree" | "box-tree-grid" | "box-unified-share-modal" | "box-version-graph" | "box-version-list" | "box-wizard-summary" | "box-work-queue" | "box-workload-board";
+export type BoxElementTagName = "box-access-stats" | "box-accordion" | "box-activity-density" | "box-agent-chat" | "box-agent-workspace" | "box-alert" | "box-annotation-inspector" | "box-annotation-thread" | "box-annotation-toolbar" | "box-app-shell" | "box-audit-log" | "box-avatar" | "box-badge" | "box-badgeable" | "box-bar-chart" | "box-breadcrumb" | "box-bulk-action-bar" | "box-button" | "box-button-group" | "box-calendar" | "box-call-console" | "box-card" | "box-carousel" | "box-category-selector" | "box-chart-panel" | "box-check-list" | "box-checkbox" | "box-checkbox-group" | "box-chip" | "box-code-block" | "box-collaborator-avatars" | "box-color-picker" | "box-combobox" | "box-command-palette" | "box-comment-thread" | "box-compare-view" | "box-contact-datalist-item" | "box-content-explorer" | "box-content-picker" | "box-content-sidebar" | "box-content-uploader" | "box-context-menu" | "box-datalist-item" | "box-date-field" | "box-dialog" | "box-diff-viewer" | "box-divider" | "box-document-list" | "box-donut-chart" | "box-draggable-list" | "box-drawer" | "box-drop-zone" | "box-dropdown" | "box-dual-listbox" | "box-due-badge" | "box-empty-state" | "box-error-mask" | "box-explorer-action-menu" | "box-explorer-breadcrumbs" | "box-explorer-items" | "box-explorer-list" | "box-explorer-table" | "box-explorer-toolbar" | "box-fact-list" | "box-fieldset" | "box-file-request-builder" | "box-filter-bar" | "box-flow-builder" | "box-flow-card" | "box-flow-spine" | "box-form-wizard" | "box-formatted-date" | "box-formatted-duration" | "box-formatted-file-size" | "box-formatted-number" | "box-governance-panel" | "box-grid" | "box-grid-view" | "box-guide-tooltip" | "box-help-text" | "box-icon-button" | "box-illustration" | "box-indicator" | "box-insert-point" | "box-invite-collaborators-modal" | "box-item-details-panel" | "box-item-form" | "box-kind-picker" | "box-line-chart" | "box-lineage-graph" | "box-link-button" | "box-menu" | "box-menu-item" | "box-metadata-filter-builder" | "box-metadata-inspector" | "box-metric-card" | "box-multi-select" | "box-nav-sidebar" | "box-notification-bell" | "box-notification-inbox" | "box-nudge" | "box-number-input" | "box-pagination" | "box-path" | "box-permission-matrix" | "box-persona" | "box-pill-cloud" | "box-pill-selector-dropdown" | "box-popover" | "box-presence" | "box-preview-element" | "box-preview-header" | "box-progress-bar" | "box-progress-ring" | "box-progress-steps" | "box-provenance-strip" | "box-radio-group" | "box-range-slider" | "box-rating" | "box-relative-time" | "box-result-blocks" | "box-review-queue-item" | "box-rich-text-input" | "box-run-summary" | "box-run-trace" | "box-saved-view-picker" | "box-search-field" | "box-search-results-header" | "box-section" | "box-segmented-control" | "box-select" | "box-share-panel" | "box-shortcuts-overlay" | "box-sidebar-toggle-button" | "box-signature-ceremony" | "box-skeleton" | "box-slider" | "box-spin-button" | "box-spinner" | "box-split-view" | "box-status-icon" | "box-switch" | "box-table" | "box-tabs" | "box-tag-input" | "box-task-assignment-panel" | "box-text-area" | "box-text-field" | "box-thumbnail-card" | "box-tile-group" | "box-time-field" | "box-timeline" | "box-toast" | "box-toolbar" | "box-tooltip" | "box-tree" | "box-tree-grid" | "box-unified-share-modal" | "box-version-graph" | "box-version-list" | "box-wizard-summary" | "box-work-queue" | "box-workload-board";

package/dist/foundations/a11y/announcer.d.ts

@@ -0,0 +1,12 @@
+export type Politeness = "polite" | "assertive";
+/** Install once near application startup. The returned cleanup removes both regions. SSR-safe. */
+export declare function installAnnouncer(doc?: Document | undefined): () => void;
+/** Queue text, including repeated messages, into an already-mounted live region. */
+export declare function announce(message: string, politeness?: Politeness, doc?: Document | undefined): void;
+/** Coalesce synchronous property updates and avoid duplicate component announcements. */
+export declare class FeedbackAnnouncement {
+    private previous;
+    private revision;
+    update(host: HTMLElement, message: string, politeness: Politeness): void;
+    reset(): void;
+}

package/dist/foundations/a11y/announcer.js

@@ -0,0 +1,75 @@
+const instances = new WeakMap();
+/** Install once near application startup. The returned cleanup removes both regions. SSR-safe. */
+export function installAnnouncer(doc = globalThis.document) {
+    if (!doc?.body)
+        return () => { };
+    const existing = instances.get(doc);
+    if (existing?.host.isConnected)
+        return existing.dispose;
+    existing?.dispose();
+    const host = doc.createElement("div");
+    host.dataset.boeAnnouncer = "";
+    host.style.cssText = "position:fixed;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;pointer-events:none";
+    const makeChannel = (politeness) => {
+        const region = doc.createElement("div");
+        region.setAttribute("role", politeness === "assertive" ? "alert" : "status");
+        region.setAttribute("aria-live", politeness);
+        region.setAttribute("aria-atomic", "true");
+        host.append(region);
+        return { region, queue: [] };
+    };
+    const channels = { polite: makeChannel("polite"), assertive: makeChannel("assertive") };
+    const dispose = () => {
+        for (const channel of Object.values(channels))
+            clearTimeout(channel.timer);
+        host.remove();
+        if (instances.get(doc)?.host === host)
+            instances.delete(doc);
+    };
+    doc.body.append(host);
+    instances.set(doc, { host, channels, dispose });
+    return dispose;
+}
+/** Queue text, including repeated messages, into an already-mounted live region. */
+export function announce(message, politeness = "polite", doc = globalThis.document) {
+    if (!doc?.body || !message.trim())
+        return;
+    installAnnouncer(doc);
+    const channel = instances.get(doc).channels[politeness];
+    channel.queue.push(message);
+    if (channel.timer !== undefined)
+        return;
+    const next = () => {
+        channel.region.textContent = "";
+        // A separate rendering opportunity ensures an empty region exists first.
+        channel.timer = setTimeout(() => {
+            channel.region.textContent = channel.queue.shift() ?? "";
+            channel.timer = setTimeout(() => {
+                channel.timer = undefined;
+                if (channel.queue.length)
+                    next();
+            }, 100);
+        }, 20);
+    };
+    next();
+}
+/** Coalesce synchronous property updates and avoid duplicate component announcements. */
+export class FeedbackAnnouncement {
+    previous = "";
+    revision = 0;
+    update(host, message, politeness) {
+        const revision = ++this.revision;
+        if (!message) {
+            this.previous = "";
+            return;
+        }
+        queueMicrotask(() => {
+            const key = `${politeness}:${message}`;
+            if (revision !== this.revision || !host.isConnected || key === this.previous)
+                return;
+            this.previous = key;
+            announce(message, politeness, host.ownerDocument);
+        });
+    }
+    reset() { ++this.revision; this.previous = ""; }
+}

package/dist/foundations/a11y/focus.js

@@ -9,37 +9,56 @@ const TABBABLE_SELECTOR = [
     "textarea:not([disabled])",
     "[tabindex]:not([tabindex='-1'])",
 ].join(", ");
-const isDisabled = (element) => element.hasAttribute("disabled") ||
+const isDisabled = (element) => element.matches(":disabled") ||
+    element.hasAttribute("disabled") ||
     element.disabled === true ||
     element.getAttribute("aria-disabled") === "true";
 const isVisible = (element) => {
-    if (element.hidden || element.getAttribute("aria-hidden") === "true") {
-        return false;
-    }
-    // Closest [hidden] ancestor (common pattern for closed panels).
-    if (element.closest("[hidden]")) {
-        return false;
-    }
-    const style = element.ownerDocument.defaultView?.getComputedStyle(element);
-    if (!style) {
-        return true;
-    }
-    if (style.display === "none" || style.visibility === "hidden") {
-        return false;
+    for (let current = element; current;) {
+        if (current.hasAttribute("hidden") || current.hasAttribute("inert") || current.getAttribute("aria-hidden") === "true")
+            return false;
+        const style = current.ownerDocument.defaultView?.getComputedStyle(current);
+        if (style?.display === "none" || style?.visibility === "hidden")
+            return false;
+        const root = current.getRootNode();
+        current = current.assignedSlot ?? current.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
     }
     return true;
 };
+const deepActiveElement = (root) => {
+    let active = root.activeElement;
+    while (active?.shadowRoot?.activeElement)
+        active = active.shadowRoot.activeElement;
+    return active;
+};
 /** Visible, enabled tabbable controls inside `container` (light or shadow). */
 export const getTabbableElements = (container) => {
-    return Array.from(container.querySelectorAll(TABBABLE_SELECTOR)).filter(element => {
-        if (isDisabled(element)) {
-            return false;
-        }
-        if (element.tabIndex < 0) {
-            return false;
+    const result = [];
+    const visit = (node) => {
+        const children = node instanceof HTMLSlotElement
+            ? (node.assignedElements().length ? node.assignedElements() : Array.from(node.children))
+            : Array.from(node.children);
+        for (const child of children) {
+            if (!(child instanceof HTMLElement) || !isVisible(child))
+                continue;
+            const disabled = isDisabled(child);
+            // A disabled fieldset still permits controls in its first legend and
+            // non-form controls such as links. Let native :disabled filter each
+            // descendant instead of pruning the entire fieldset subtree.
+            if (disabled && (!(child instanceof HTMLFieldSetElement) || child.getAttribute("aria-disabled") === "true"))
+                continue;
+            if (!disabled && child.matches(TABBABLE_SELECTOR) && child.tabIndex >= 0)
+                result.push(child);
+            // An explicit negative tabindex removes a shadow host's entire focus
+            // scope from sequential navigation. Ordinary light-DOM containers with
+            // tabindex=-1 do not have that behavior.
+            if (child.shadowRoot && child.hasAttribute("tabindex") && child.tabIndex < 0)
+                continue;
+            visit(child.shadowRoot ?? child);
         }
-        return isVisible(element);
-    });
+    };
+    visit(container);
+    return result;
 };
 /**
  * Keep Tab / Shift+Tab cycling inside `container` while a modal is open.
@@ -57,7 +76,7 @@ export const trapTabKey = (event, container) => {
     const first = focusables[0];
     const last = focusables[focusables.length - 1];
     const root = container.getRootNode?.();
-    const active = root?.activeElement ?? document.activeElement;
+    const active = deepActiveElement(root ?? document) ?? deepActiveElement(document);
     if (event.shiftKey) {
         if (active === first || !focusables.includes(active)) {
             event.preventDefault();
@@ -74,6 +93,8 @@ export const trapTabKey = (event, container) => {
 export class FocusRestore {
     previous = null;
     capture(from = document.activeElement) {
+        while (from?.shadowRoot?.activeElement)
+            from = from.shadowRoot.activeElement;
         this.previous = from instanceof HTMLElement ? from : null;
     }
     restore() {
@@ -83,8 +104,8 @@ export class FocusRestore {
             return;
         }
         queueMicrotask(() => {
-            if (typeof target.focus === "function") {
-                target.focus();
+            if (target.isConnected && isVisible(target) && !isDisabled(target)) {
+                target.focus({ preventScroll: true });
             }
         });
     }

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

@@ -1,3 +1,5 @@
+export { announce, installAnnouncer } from "./announcer.js";
+export type { Politeness } from "./announcer.js";
 export { applyRovingTabindex, focusRovingItem, handleRovingKeydown, nextRovingIndex, } from "./keyboard.js";
 export type { RovingKeyOptions, RovingOrientation } from "./keyboard.js";
 export { FocusRestore, getTabbableElements, trapTabKey } from "./focus.js";

package/dist/foundations/a11y/index.js

@@ -1,3 +1,4 @@
+export { announce, installAnnouncer } from "./announcer.js";
 export { applyRovingTabindex, focusRovingItem, handleRovingKeydown, nextRovingIndex, } from "./keyboard.js";
 export { FocusRestore, getTabbableElements, trapTabKey } from "./focus.js";
 export { boeHeadingResetStyles, headingCloseTag, headingOpenTag, renderHeadingHtml, } from "./heading.js";