npm - @qualified-salesforce/web - Versions diffs - 0.0.1-oidc-bootstrap - Mend

@qualified-salesforce/web 0.0.1-oidc-bootstrap

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (560) hide show

package/packs/widget/api/docking/viewport_resize.js ADDED Viewed

@@ -0,0 +1,1203 @@
+import { BoundingBoxObserver } from "../../../../src/bounding_box_observer.js";
+import { getProbeIframe, getDockingShadowRoot } from "./docking_host.js";
+import { DOCKED_TOP_OFFSET_CSS_VARIABLE, isQualifiedOwnedShadowRoot, tryGet, measureScrollbarWidth, dispatchResizeEvent, MOBILE_BREAKPOINT, whenBodyAvailable, DOCKING_PROXY_MARKER, DOCKED_TARGET_ATTRIBUTE, applyOnce, DOCKED_DOCUMENT_ATTRIBUTE } from "./shared.js";
+import { _tagged_template_literal_loose } from "../../../../js/4101.js";
+import { queryAllAcrossRoots } from "../../../../src/dom_roots.js";
+import { applyProxy, originalOf } from "../../../../src/proxy.js";
+function viewport_resize_templateObject() {
+    const data = _tagged_template_literal_loose([
+        "(?:^|[^a-z-])(?:",
+        ")s*(?::|<=|>=|<|>)"
+    ], [
+        "(?:^|[^a-z-])(?:",
+        ")\\s*(?::|<=|>=|<|>)"
+    ]);
+    viewport_resize_templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    const data = _tagged_template_literal_loose([
+        "|"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    const data = _tagged_template_literal_loose([
+        "(?:<=|>=|<|>)s*(?:",
+        ")(?:[^a-z-]|$)"
+    ], [
+        "(?:<=|>=|<|>)\\s*(?:",
+        ")(?:[^a-z-]|$)"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+/* eslint-disable rulesdir/css-units */
+// ============================================================================
+// Constants
+// ============================================================================
+/**
+ * Selector used to locate the host page's header: the semantic `<header>`
+ * element or the `banner` landmark role.
+ */ const PINNED_HEADER_SELECTOR = ":is(header, [role='banner']):not(main *)";
+/**
+ * Width of the docked panel in pixels. The value is exposed via the
+ * `--q-docked-width` custom property and animates between this and 0 when
+ * docking is toggled.
+ */ const DOCKED_WIDTH_PX = 400;
+/**
+ * Custom property that holds the active docked panel width. Set to 0 by default
+ * and to {@link DOCKED_WIDTH_PX} when `html[q-docked]` is present.
+ */ const DOCKED_WIDTH_CSS_VARIABLE = "--q-docked-width";
+/**
+ * Horizontal offset eaten by the docked panel plus the host page's scrollbar.
+ * Internal: shrinks `<html>` and feeds
+ * {@link DOCKED_RIGHT_OFFSET_CSS_VARIABLE}.
+ */ const DOCKED_VIEWPORT_OFFSET_CSS_VARIABLE = "--q-docked-viewport-offset";
+/**
+ * How far right of its containing block's edge the real viewport edge sits, for
+ * anything overlaying the page. Consume as `right: var(..., 0px)`, the fallback
+ * covering docking not being loaded.
+ *
+ * Always declared, so no consumer rebuilds it from parts. Non-zero only where
+ * docking shrank `<html>` and a fixed child's containing block stops at the
+ * gutter's inner edge.
+ */ const DOCKED_RIGHT_OFFSET_CSS_VARIABLE = "--q-docked-right-offset";
+/**
+ * Container name applied to `<html>` so the responsive @container rules
+ * generated from the host's @media rules target the correct container.
+ */ const DOCKED_DOCUMENT_CONTAINER_NAME = "q-docked-container";
+// Host page's main/footer regions that shrink to form the gutter in
+// `dockUnderHeader` mode (semantic elements + their ARIA landmarks).
+const DOCKED_UNDER_HEADER_TARGET_SELECTOR = "main, [role='main'], footer, [role='contentinfo']";
+function createViewportResize(options) {
+    if (options === void 0) options = {};
+    var _options_dockUnderHeader, _options_skipCrossOriginStylesheets;
+    const dockUnderHeader = (_options_dockUnderHeader = options.dockUnderHeader) != null ? _options_dockUnderHeader : false;
+    const state = {
+        processedSheets: new WeakSet(),
+        scrollbarWidth: 0,
+        rootObserver: null,
+        linkRelObserver: null,
+        mqlByMedia: new Map(),
+        linksByMql: new WeakMap(),
+        attrsByMql: new WeakMap(),
+        linkOriginalMedia: new WeakMap(),
+        headerObserver: null
+    };
+    const transform = (sheet)=>{
+        transformStylesheet(sheet, transformContext);
+    };
+    const transformLinkMedia = (link)=>{
+        // WeakMap miss = first time we've touched this element. A reconnected
+        // link hits the WeakMap and skips the dimension gate (its current
+        // `link.media` has already been rewritten and no longer parses as one).
+        let originalMedia = state.linkOriginalMedia.get(link);
+        if (!originalMedia) {
+            if (!link.media) return;
+            if (!extractDimensionConditions(link.media)) return;
+            originalMedia = link.media;
+            state.linkOriginalMedia.set(link, originalMedia);
+        }
+        registerMqlConsumer(state, state.linksByMql, originalMedia, link, (live, matches)=>{
+            var _state_linkOriginalMedia_get;
+            if (!live.isConnected) {
+                // Lazily prune detached links; the WeakMap entry survives so a
+                // future re-attach can re-register against the original query.
+                return false;
+            }
+            const recoveredOriginal = (_state_linkOriginalMedia_get = state.linkOriginalMedia.get(live)) != null ? _state_linkOriginalMedia_get : originalMedia;
+            live.media = computeMediaForLink(recoveredOriginal, matches);
+            return true;
+        });
+    };
+    const registerHtmlAttrForMedia = (mediaCondition, attr)=>{
+        registerMqlConsumer(state, state.attrsByMql, mediaCondition, attr, (name, matches)=>{
+            document.documentElement.toggleAttribute(name, matches);
+            return true;
+        });
+    };
+    // Bundle the per-instance dependencies that the file-scope transform
+    // helpers need. Avoids growing parameter lists every time we add a new
+    // hook (e.g. registerHtmlAttrForMedia for the html-self side channel).
+    const transformContext = {
+        processedSheets: state.processedSheets,
+        registerHtmlAttrForMedia,
+        skipCrossOriginStylesheets: (_options_skipCrossOriginStylesheets = options.skipCrossOriginStylesheets) != null ? _options_skipCrossOriginStylesheets : false
+    };
+    // Unified node handler used by every entry point (initial scan, mutation
+    // observer, link rel observer). Closure capture lets it pull from the
+    // shared `state` without file-scope helpers needing to know about it.
+    const handleNewStyleNode = (node)=>{
+        if (node instanceof HTMLStyleElement && node.sheet) {
+            transform(node.sheet);
+        } else if (node instanceof HTMLLinkElement && linkAppliesStylesheet(node)) {
+            transformLinkMedia(node);
+            if (node.sheet) {
+                transform(node.sheet);
+            } else {
+                node.addEventListener("load", ()=>{
+                    if (node.sheet) {
+                        transform(node.sheet);
+                    }
+                });
+            }
+        } else if (node instanceof HTMLLinkElement && linkIsPreloadStyle(node)) {
+            var // Async CSS pattern (HubSpot hs-async-css, loadCSS, ...): the link is
+            // injected as rel="preload" and the inline onload flips it to include
+            // "stylesheet" once the resource fetches. Watch the rel attribute so we
+            // re-enter the stylesheet branch above the moment that happens. Ordered
+            // after the stylesheet branch so a link that is already applied
+            // (rel="preload stylesheet") is transformed now rather than merely
+            // observed.
+            _state_linkRelObserver;
+            (_state_linkRelObserver = state.linkRelObserver) == null ? void 0 : _state_linkRelObserver.observe(node, {
+                attributes: true,
+                attributeFilter: [
+                    "rel"
+                ]
+            });
+        }
+    };
+    const handleNewRootNode = (root)=>{
+        var _root_adoptedStyleSheets;
+        if (isQualifiedOwnedShadowRoot(root)) return;
+        if (root === document) {
+            var _state_rootObserver;
+            (_state_rootObserver = state.rootObserver) == null ? void 0 : _state_rootObserver.observe(root.head, {
+                childList: true,
+                subtree: true
+            });
+            whenBodyAvailable((body)=>{
+                var _state_rootObserver;
+                (_state_rootObserver = state.rootObserver) == null ? void 0 : _state_rootObserver.observe(body, {
+                    childList: true,
+                    subtree: true
+                });
+            });
+        } else {
+            var _state_rootObserver1;
+            (_state_rootObserver1 = state.rootObserver) == null ? void 0 : _state_rootObserver1.observe(root, {
+                childList: true,
+                subtree: true
+            });
+        }
+        for (const sheet of tryGet(()=>root.styleSheets, [])){
+            transform(sheet);
+        }
+        for (const sheet of (_root_adoptedStyleSheets = root.adoptedStyleSheets) != null ? _root_adoptedStyleSheets : []){
+            transform(sheet);
+        }
+        handlePendingLinkStylesheets(root, handleNewStyleNode);
+    };
+    const handleNewElements = ()=>{
+        var _state_headerObserver;
+        if (!dockUnderHeader) {
+            document.documentElement.setAttribute(DOCKED_TARGET_ATTRIBUTE, "true");
+            return;
+        }
+        for (const el of queryAllAcrossRoots(DOCKED_UNDER_HEADER_TARGET_SELECTOR, isQualifiedOwnedShadowRoot)){
+            el.setAttribute(DOCKED_TARGET_ATTRIBUTE, "true");
+            // The light-DOM `[q-docked-target]` rule can't reach into shadow roots, so
+            // mirror the shrink as inline styles there (inherited vars cross the boundary).
+            if (el.getRootNode() instanceof ShadowRoot) applyInlineShrink(el);
+        }
+        (_state_headerObserver = state.headerObserver) == null ? void 0 : _state_headerObserver.start();
+    };
+    return {
+        init () {
+            state.scrollbarWidth = measureScrollbarWidth();
+            if (dockUnderHeader) {
+                state.headerObserver = createHeaderObserver();
+            }
+            registerCssAnimationProperty();
+            installResizeProxy();
+            installIframeProxies();
+            installAdoptedStyleSheetProxy(transform);
+            installAttachShadowProxy(handleNewRootNode);
+        },
+        reEvaluate () {
+            var _state_rootObserver, _state_linkRelObserver;
+            (_state_rootObserver = state.rootObserver) == null ? void 0 : _state_rootObserver.disconnect();
+            (_state_linkRelObserver = state.linkRelObserver) == null ? void 0 : _state_linkRelObserver.disconnect();
+            state.rootObserver = createRootObserver(handleNewStyleNode, handleNewRootNode, handleNewElements);
+            state.linkRelObserver = createLinkRelObserver(handleNewStyleNode);
+            handleNewRootNode(document);
+            for (const root of findShadowRoots()){
+                handleNewRootNode(root);
+            }
+            handleNewElements();
+        },
+        getStyles () {
+            // Keys off which element is the docked target, so one stylesheet serves both
+            // modes: <html> absorbs widget width + scrollbar; non-<html> targets shrink
+            // by widget width only while <html> clips just the scrollbar.
+            return /* css */ "\n        html {\n          " + DOCKED_WIDTH_CSS_VARIABLE + ": 0px;\n          " + DOCKED_VIEWPORT_OFFSET_CSS_VARIABLE + ": var(" + DOCKED_WIDTH_CSS_VARIABLE + ");\n          " + (/* inlined export .DOCKED_VIEWPORT_WIDTH_CSS_VARIABLE */"--qdvw") + ": calc(100dvw - var(" + DOCKED_VIEWPORT_OFFSET_CSS_VARIABLE + "));\n          " + DOCKED_RIGHT_OFFSET_CSS_VARIABLE + ": 0px;\n          transition: " + DOCKED_WIDTH_CSS_VARIABLE + " 300ms ease-out;\n          container-type: inline-size !important;\n          container-name: " + DOCKED_DOCUMENT_CONTAINER_NAME + " !important;\n        }\n        html[" + DOCKED_TARGET_ATTRIBUTE + "] {\n          " + DOCKED_VIEWPORT_OFFSET_CSS_VARIABLE + ": calc(var(" + DOCKED_WIDTH_CSS_VARIABLE + ") + " + state.scrollbarWidth + "px);\n          " + DOCKED_RIGHT_OFFSET_CSS_VARIABLE + ": calc(-1 * var(" + DOCKED_VIEWPORT_OFFSET_CSS_VARIABLE + "));\n          min-width: var(" + (/* inlined export .DOCKED_VIEWPORT_WIDTH_CSS_VARIABLE */"--qdvw") + ") !important;\n          max-width: var(" + (/* inlined export .DOCKED_VIEWPORT_WIDTH_CSS_VARIABLE */"--qdvw") + ") !important;\n          width: var(" + (/* inlined export .DOCKED_VIEWPORT_WIDTH_CSS_VARIABLE */"--qdvw") + ") !important;\n          margin-right: var(" + DOCKED_VIEWPORT_OFFSET_CSS_VARIABLE + ") !important;\n        }\n        html[" + DOCKED_DOCUMENT_ATTRIBUTE + "] {\n          " + DOCKED_WIDTH_CSS_VARIABLE + ": " + DOCKED_WIDTH_PX + "px;\n        }\n        [" + DOCKED_TARGET_ATTRIBUTE + "]:not(html) {\n          min-width: calc(100% - var(" + DOCKED_WIDTH_CSS_VARIABLE + ")) !important;\n          max-width: calc(100% - var(" + DOCKED_WIDTH_CSS_VARIABLE + ")) !important;\n          width: calc(100% - var(" + DOCKED_WIDTH_CSS_VARIABLE + ")) !important;\n          margin-right: var(" + DOCKED_WIDTH_CSS_VARIABLE + ") !important;\n          container-type: inline-size !important;\n          container-name: " + DOCKED_DOCUMENT_CONTAINER_NAME + " !important;\n        }\n        @media (" + MOBILE_BREAKPOINT + ") {\n          html[" + DOCKED_DOCUMENT_ATTRIBUTE + "] {\n            " + DOCKED_WIDTH_CSS_VARIABLE + ": 0px;\n            " + DOCKED_VIEWPORT_OFFSET_CSS_VARIABLE + ": 0px;\n          }\n        }\n      ";
+        }
+    };
+}
+/**
+ * Applies the docked-gutter shrink as inline styles for under-header targets
+ * inside shadow roots, where the light-DOM `[q-docked-target]` rule can't reach.
+ */ function applyInlineShrink(el) {
+    const w = "calc(100% - var(" + DOCKED_WIDTH_CSS_VARIABLE + "))";
+    el.style.setProperty("min-width", w, "important");
+    el.style.setProperty("max-width", w, "important");
+    el.style.setProperty("width", w, "important");
+    el.style.setProperty("margin-right", "var(" + DOCKED_WIDTH_CSS_VARIABLE + ")", "important");
+    el.style.setProperty("container-type", "inline-size", "important");
+    el.style.setProperty("container-name", DOCKED_DOCUMENT_CONTAINER_NAME, "important");
+}
+// ============================================================================
+// Init Helpers
+// ============================================================================
+/**
+ * Registers `--q-docked-width` as a typed `<length>` so the value is
+ * interpolatable, which is what makes the docked panel slide smoothly between
+ * 0 and {@link DOCKED_WIDTH_PX} instead of snapping.
+ */ function registerCssAnimationProperty() {
+    try {
+        if ("registerProperty" in window.CSS) {
+            window.CSS.registerProperty({
+                name: DOCKED_WIDTH_CSS_VARIABLE,
+                syntax: "<length>",
+                inherits: true,
+                initialValue: "0px"
+            });
+        }
+    } catch (unused) {
+    // Already registered, ignore
+    }
+}
+/**
+ * Uses a ResizeObserver on `<html>` to forward size changes as window
+ * resize events. The effective viewport width changes when the docked
+ * panel opens/closes (via the CSS variable transition), and customer
+ * code listening for `window.resize` needs to be notified.
+ */ function installResizeProxy() {
+    applyOnce(document.documentElement, "" + DOCKING_PROXY_MARKER + "_resize", (el)=>{
+        new ResizeObserver(()=>dispatchResizeEvent()).observe(el);
+    });
+}
+/**
+ * Points every viewport reading the host page can take — `window.innerWidth`
+ * / `innerHeight`, `document.documentElement.clientWidth` / `clientHeight`
+ * and `window.matchMedia` — at the hidden probe iframe, whose own viewport is
+ * sized to the constrained content area by CSS.
+ *
+ * When docking is active, `<html>` is shrunk to `100dvw - 400px`. Customer code
+ * that measures the viewport directly would otherwise see the full width and
+ * make wrong layout decisions (e.g. showing a desktop nav when the content area
+ * is at a mobile breakpoint). `clientWidth/Height` need proxying too because
+ * the browser reports the initial containing block for those regardless of any
+ * CSS applied to `<html>`.
+ *
+ * Sourcing all of them from one iframe keeps the numbers mutually consistent —
+ * a `(max-width: 767px)` query flips at exactly the width `innerWidth` reports
+ * — and media queries get native behavior (`change` events included) with no
+ * manual parsing or evaluation.
+ *
+ * The iframe is resolved per read rather than captured once, so a host page
+ * that replaces `<html>`'s children (detaching ours) recovers on the next read
+ * via the rebuilt `<q-docking>` singleton. Until a fresh iframe has laid out,
+ * each proxy falls back to the closest same-axis measurement.
+ *
+ * Every patch goes through {@link applyProxy}, so our own code can still reach
+ * the browser's real values with `originalOf(window)` — which the liveview
+ * shipper needs, since its receiver applies the docked shrink itself.
+ */ function installIframeProxies() {
+    // Touch the iframe now rather than on the first read, so the browser has laid
+    // it out (and `--qdvw` has landed) before anything measures it.
+    probeIframeWindow();
+    applyOnce(window, "" + DOCKING_PROXY_MARKER + "_innerSize", (win)=>{
+        const { documentElement } = document;
+        applyProxy(win, "innerWidth", {
+            get () {
+                return measureInProbeIframe((probe)=>probe.innerWidth, ()=>documentElement.offsetWidth);
+            }
+        });
+        applyProxy(win, "innerHeight", {
+            get () {
+                return measureInProbeIframe((probe)=>probe.innerHeight, ()=>documentElement.offsetHeight);
+            }
+        });
+    });
+    applyOnce(document.documentElement, "" + DOCKING_PROXY_MARKER + "_clientSize", (el)=>{
+        applyProxy(el, "clientWidth", {
+            get () {
+                return measureInProbeIframe((probe)=>probe.document.documentElement.clientWidth, ()=>el.offsetWidth);
+            }
+        });
+        applyProxy(el, "clientHeight", {
+            get () {
+                return measureInProbeIframe((probe)=>probe.document.documentElement.clientHeight, ()=>el.offsetHeight);
+            }
+        });
+    });
+    applyOnce(window, "" + DOCKING_PROXY_MARKER + "_matchMedia", (win)=>{
+        // Captured through the raw view so a re-entrant install can't wrap our own
+        // proxy; consumers that need the host viewport read it the same way.
+        const { matchMedia } = originalOf(win);
+        applyProxy(win, "matchMedia", {
+            enumerable: true,
+            writable: true,
+            value: (query)=>{
+                const probe = probeIframeWindow();
+                // Feature-detected rather than assumed: not every browsing context
+                // exposes matchMedia (jsdom's iframes don't).
+                return typeof (probe == null ? void 0 : probe.matchMedia) === "function" ? probe.matchMedia(query) : matchMedia.call(win, query);
+            }
+        });
+    });
+}
+/** The probe iframe's window, or null while it has no browsing context. */ function probeIframeWindow() {
+    return tryGet(()=>getProbeIframe().contentWindow, null);
+}
+/**
+ * Reads a dimension from the probe iframe, falling back to `fallback()` when
+ * the iframe has no browsing context or reports a non-positive size (detached,
+ * still initialising, or hidden by the host page). A zero reading is never
+ * useful — it would tell customer code the content area has collapsed — and the
+ * fallback is a thunk so the healthy path never forces an extra layout.
+ */ function measureInProbeIframe(read, fallback) {
+    const probe = probeIframeWindow();
+    const measured = probe ? tryGet(()=>read(probe)) : undefined;
+    return typeof measured === "number" && measured > 0 ? measured : fallback();
+}
+// ============================================================================
+// MQL Consumer Registry
+// ============================================================================
+/**
+ * Subscribes a consumer to a media query against the iframe-backed
+ * `window.matchMedia` (so the query evaluates the docked container, not the
+ * host viewport). MQLs are deduplicated by media string in `state.mqlByMedia`,
+ * shared across consumer types — link rewriting and html-attribute toggling
+ * both subscribe through here, and they share the same MQL instance when the
+ * conditions match. The first registration for a given (mql, consumersByMql)
+ * pair installs the change listener that fans out to every consumer.
+ *
+ * `apply` is invoked once at registration with the current matches state and
+ * again on every subsequent change. Returning `false` removes the consumer
+ * from the set, which the link path uses to lazily prune detached elements
+ * (the closure would otherwise keep them alive).
+ */ function registerMqlConsumer(state, consumersByMql, media, consumer, apply) {
+    let mql = state.mqlByMedia.get(media);
+    if (!mql) {
+        mql = window.matchMedia(media);
+        state.mqlByMedia.set(media, mql);
+    }
+    let consumers = consumersByMql.get(mql);
+    if (!consumers) {
+        consumers = new Set();
+        consumersByMql.set(mql, consumers);
+        // Capture locals so the listener doesn't depend on the outer let-bindings.
+        const targetMql = mql;
+        const targetConsumers = consumers;
+        targetMql.addEventListener("change", ()=>{
+            for (const c of targetConsumers){
+                if (!apply(c, targetMql.matches)) {
+                    targetConsumers.delete(c);
+                }
+            }
+        });
+    }
+    consumers.add(consumer);
+    apply(consumer, mql.matches);
+    return mql;
+}
+/**
+ * Patches `Document.prototype` and `ShadowRoot.prototype` so that any
+ * future assignment or in-place mutation of `adoptedStyleSheets`
+ * automatically transforms newly added stylesheets.
+ *
+ * Per-instance proxy caching is handled via a WeakMap so each root
+ * (document or shadow root) gets its own cached proxy.
+ */ function installAdoptedStyleSheetProxy(transform) {
+    const proxyFor = new WeakMap();
+    for (const proto of [
+        Document.prototype,
+        ShadowRoot.prototype
+    ]){
+        applyOnce(proto, "" + DOCKING_PROXY_MARKER + "_adopted", ()=>{
+            const desc = Object.getOwnPropertyDescriptor(proto, "adoptedStyleSheets");
+            if (!(desc == null ? void 0 : desc.get) || !(desc == null ? void 0 : desc.set)) return;
+            const originalGet = desc.get;
+            const originalSet = desc.set;
+            Object.defineProperty(proto, "adoptedStyleSheets", {
+                get () {
+                    const sheets = originalGet.call(this);
+                    const cached = proxyFor.get(sheets);
+                    if (cached) return cached;
+                    const proxy = createAdoptedSheetsProxy(this, sheets, transform);
+                    proxyFor.set(sheets, proxy);
+                    return proxy;
+                },
+                set (sheets) {
+                    originalSet.call(this, sheets);
+                    if (isQualifiedOwnedShadowRoot(this)) return;
+                    for (const sheet of sheets){
+                        transform(sheet);
+                    }
+                },
+                configurable: true
+            });
+        });
+    }
+}
+/**
+ * Wraps an adopted stylesheet array in a Proxy whose `set` trap
+ * intercepts element additions (index assignment, push, splice, etc.)
+ * and transforms any newly added CSSStyleSheet.
+ */ function createAdoptedSheetsProxy(root, sheets, transform) {
+    if (isQualifiedOwnedShadowRoot(root)) return sheets;
+    return new Proxy(sheets, {
+        set (target, prop, value) {
+            const result = Reflect.set(target, prop, value);
+            if (value instanceof CSSStyleSheet) {
+                transform(value);
+            }
+            return result;
+        }
+    });
+}
+/**
+ * Patches `Element.prototype.attachShadow` so that every newly created
+ * shadow root is automatically processed (stylesheets transformed and
+ * mutation observer attached). This catches shadow roots created by
+ * customer code or third-party libraries after the initial DOM scan.
+ */ function installAttachShadowProxy(observe) {
+    applyOnce(Element.prototype, "" + DOCKING_PROXY_MARKER + "_shadow", (proto)=>{
+        const original = proto.attachShadow;
+        proto.attachShadow = function() {
+            for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                args[_key] = arguments[_key];
+            }
+            const root = original.call(this, ...args);
+            observe(root);
+            return root;
+        };
+    });
+}
+// ============================================================================
+// Document Observer
+// ============================================================================
+/**
+ * Creates a single MutationObserver that handles stylesheet additions and
+ * shadow root discovery. Initially observes the document; shadow roots are
+ * added via additional `.observe()` calls (a single observer can watch
+ * multiple roots — `.disconnect()` detaches them all at once).
+ *
+ * The selector includes `link[rel~='preload'][as='style']` so we also catch
+ * async CSS patterns (HubSpot, loadCSS, ...) where the link starts as a
+ * preload and only becomes a real stylesheet once `rel` flips. `~=` matches
+ * a single whitespace-separated token, so multi-token values like
+ * `rel="preload stylesheet"` are recognised too. The link rel observer is
+ * what actually drives the rel-flip transition; this selector just makes
+ * sure we register those links in the first place.
+ */ function createRootObserver(handleNewStyleNode, handleNewRootNode, handleNewElements) {
+    const observer = new MutationObserver((mutations)=>{
+        let elementAdded = false;
+        for (const mutation of mutations){
+            for (const node of mutation.addedNodes){
+                if (node instanceof HTMLStyleElement || node instanceof HTMLLinkElement) {
+                    handleNewStyleNode(node);
+                } else if (node instanceof Element) {
+                    elementAdded = true;
+                    handleDeclarativeShadowRoots(node, handleNewRootNode);
+                    for (const child of node.querySelectorAll("style, " + STYLESHEET_LINK_SELECTOR)){
+                        handleNewStyleNode(child);
+                    }
+                }
+            }
+        }
+        if (elementAdded) handleNewElements();
+    });
+    return observer;
+}
+/**
+ * Creates a single MutationObserver that detects when a `<link>` element's
+ * `rel` attribute changes. The async CSS pattern (HubSpot's `hs-async-css`,
+ * filamentgroup's `loadCSS`, etc.) injects links as `rel="preload"` and an
+ * inline `onload="this.rel='stylesheet'"` flips them once the resource has
+ * been fetched.
+ *
+ * The observer is shared across every candidate link; we call `.observe()`
+ * on each link individually with `attributeFilter: ["rel"]` so we never
+ * watch head/body subtrees. On a rel mutation we just re-run the unified
+ * node handler, which dispatches to the regular `rel="stylesheet"` branch
+ * (the WeakSet of processed sheets prevents double-transformation).
+ */ function createLinkRelObserver(processStyleNode) {
+    return new MutationObserver((mutations)=>{
+        for (const mutation of mutations){
+            if (mutation.target instanceof HTMLLinkElement) {
+                processStyleNode(mutation.target);
+            }
+        }
+    });
+}
+/**
+ * Handles declarative shadow DOM (`<template shadowrootmode="open">`).
+ * The browser creates these shadow roots during HTML parsing without
+ * calling `attachShadow`, so the prototype proxy cannot intercept them.
+ * This function checks a newly added element — and its subtree — for
+ * any `.shadowRoot` that needs stylesheet transformation.
+ */ function handleDeclarativeShadowRoots(el, observe) {
+    if (el.shadowRoot) {
+        observe(el.shadowRoot);
+        for (const root of findShadowRoots(el.shadowRoot)){
+            observe(root);
+        }
+    }
+    for (const root of findShadowRoots(el)){
+        observe(root);
+    }
+}
+/**
+ * Finds `<link>` elements that are in the DOM but haven't been processed
+ * yet — either still loading (`.sheet` is null) or staged as
+ * `rel="preload"` waiting to flip to `rel="stylesheet"` (HubSpot async CSS).
+ * These are missed by both the `styleSheets` iteration (not yet loaded)
+ * and the MutationObserver (already in the DOM before the observer
+ * started). Routes them through `processStyleNode`, which attaches load
+ * listeners for pending stylesheet links and a rel-flip observer for
+ * preload links.
+ *
+ * Two passes are needed to cover all timing scenarios:
+ *
+ * 1. Immediate pass — handles the late-init case (docking initialised after
+ *    the page is fully parsed). Queries the full document so body links
+ *    (e.g. AEM clientlibs injected via `<span class="header-injector">`) are
+ *    also found, not just `<head>` links.
+ *
+ * 2. Deferred body pass — handles the early-init case (snippet running in
+ *    `<head>` before `<body>` is parsed). At that point `document.body` does
+ *    not yet exist so the immediate `querySelectorAll` finds nothing in the
+ *    body. Once the body is available we rescan it to pick up any server-
+ *    rendered `<link>` elements that the MutationObserver never saw.
+ */ function handlePendingLinkStylesheets(root, processStyleNode) {
+    const scanLinks = (container)=>{
+        for (const link of container.querySelectorAll(STYLESHEET_LINK_SELECTOR)){
+            processStyleNode(link);
+        }
+    };
+    scanLinks(root);
+    // When the snippet runs in <head>, document.body doesn't exist yet so the
+    // scan above finds no body links. Re-scan once the body is available to
+    // catch server-rendered <link> elements (e.g. AEM clientlibs) that the
+    // MutationObserver never saw. whenBodyAvailable fires synchronously if the
+    // body already exists, so there is no double-processing risk.
+    if (root === document) whenBodyAvailable(scanLinks);
+}
+function findShadowRoots(root) {
+    if (root === void 0) root = document.body;
+    if (!root) return [];
+    const roots = [];
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+    let node;
+    while(node = walker.nextNode()){
+        if (node instanceof Element && node.shadowRoot) {
+            roots.push(node.shadowRoot, ...findShadowRoots(node.shadowRoot));
+        }
+    }
+    return roots;
+}
+// ============================================================================
+// Stylesheet Transformation
+// ============================================================================
+/**
+ * Transforms a single stylesheet in place.
+ */ function transformStylesheet(sheet, ctx) {
+    if (!canProcessStylesheet(sheet, ctx)) return;
+    ctx.processedSheets.add(sheet);
+    try {
+        transformRules(sheet, sheet.cssRules, ctx);
+    } catch (unused) {
+        // Cross-origin stylesheets throw SecurityError; retry via crossorigin
+        // clone unless the caller has opted out.
+        if (!ctx.skipCrossOriginStylesheets) {
+            handleCrossOriginStylesheet(sheet);
+        }
+    }
+}
+/**
+ * Detects whether a stylesheet was loaded from a different origin. Inline
+ * `<style>` and `adoptedStyleSheets` have null href and are always
+ * same-origin; unparseable hrefs are treated as same-origin so we still
+ * attempt to read them.
+ */ function isCrossOriginStylesheet(sheet) {
+    if (!sheet.href) return false;
+    try {
+        return new URL(sheet.href, document.baseURI).origin !== window.location.origin;
+    } catch (unused) {
+        return false;
+    }
+}
+/**
+ * Loads a `crossorigin="anonymous"` clone of `<link>` inside the singleton
+ * `<q-docking>` shadow root, then atomically `replaceChild`s it into the
+ * main DOM once it has CORS-loaded. The regular pipeline then picks it up
+ * and rewrites its rules with full `cssRules` access.
+ *
+ * Loading inside the shadow root isolates the clone from the host page's
+ * named-access lookups (`window[id]` / bare-identifier resolution): a
+ * matching `id` or `name` would otherwise resolve to an `HTMLCollection`
+ * of two elements during the in-flight load, breaking host code that
+ * tests `... .indexOf(stylesheet.ownerNode) !== -1`. The swap preserves
+ * every cloned attribute on the main-DOM element so host code keeps
+ * resolving correctly afterwards.
+ *
+ * If the retry fails we remove the failed clone — the original `<link>`
+ * is never touched. The `crossorigin` attribute check prevents infinite
+ * retry loops once the swap has happened.
+ */ function handleCrossOriginStylesheet(sheet) {
+    const { ownerNode } = sheet;
+    if (!(ownerNode instanceof HTMLLinkElement)) return;
+    if (ownerNode.hasAttribute("crossorigin")) return;
+    const newLink = ownerNode.cloneNode();
+    let url;
+    try {
+        url = new URL(newLink.href);
+    } catch (unused) {
+        return;
+    }
+    // Append a query param to ensure the browser doesn't return a cached response of the original link
+    url.searchParams.append("q_docked", "true");
+    newLink.href = url.toString();
+    newLink.crossOrigin = "anonymous";
+    getDockingShadowRoot().appendChild(newLink);
+    let swapped = false;
+    newLink.addEventListener("load", ()=>{
+        if (swapped) return;
+        swapped = true;
+        const parent = ownerNode.parentNode;
+        if (!parent) {
+            newLink.remove();
+            return;
+        }
+        parent.replaceChild(newLink, ownerNode);
+        // Mirror `disabled` onto the replacement. `cloneNode` doesn't copy it
+        // (IDL property delegating to `sheet.disabled`, not a reflected
+        // attribute), so host code that flipped it during the load would
+        // otherwise be silently dropped.
+        if (ownerNode.disabled) newLink.disabled = true;
+    });
+    newLink.addEventListener("error", ()=>{
+        if (swapped) return;
+        newLink.remove();
+    });
+}
+/**
+ * Transforms rules within a stylesheet or grouping rule.
+ * Iterates backwards to handle index shifts when replacing rules.
+ */ function transformRules(sheet, rules, ctx, parentRule) {
+    for(let i = rules.length - 1; i >= 0; i--){
+        const rule = rules[i];
+        try {
+            // Recursively transform inner rules first (covers CSSGroupingRule and CSS Nesting in CSSStyleRule)
+            if (isCSSRuleParent(rule)) {
+                transformRules(sheet, rule.cssRules, ctx, rule);
+            }
+            // Handle case by case rules here
+            if (rule instanceof CSSMediaRule) {
+                transformMediaRule(rule, i, parentRule != null ? parentRule : sheet, ctx);
+            } else if (rule instanceof CSSStyleRule) {
+                transformStyleRule(rule, i, parentRule != null ? parentRule : sheet);
+            }
+        } catch (unused) {
+        // Transforming a rule should not break the entire stylesheet processing.
+        // Cross-origin or malformed rules may throw - we skip them gracefully.
+        }
+    }
+}
+/**
+ * Transforms a media rule - converts dimension conditions to container queries.
+ *
+ * Comma-separated query lists are split into segments, each emitted as its own
+ * @container rule. The CSSOM's insertRule() does not support comma-separated
+ * @container queries, so one rule per segment is the only viable approach.
+ * Segments without dimension conditions are skipped (no container equivalent).
+ *
+ * Multiple rules are inserted at consecutive indices — safe because transformRules
+ * iterates backwards, so already-processed indices are not revisited.
+ *
+ * Examples:
+ *   @media (max-width: 599px), (min-width: 600px) and (max-width: 999px) { }
+ *   → @container name (max-width: 599px) { }
+ *      @container name (min-width: 600px) and (max-width: 999px) { }
+ *
+ *   @media screen and (max-width: 768px) { }
+ *   → @media screen { @container name (max-width: 768px) { } }
+ *
+ *   @media not (min-width: 80rem) { }              (CSS MQ Level 4 form)
+ *   @media not all and (min-width: 80rem) { }      (CSS MQ Level 3 form)
+ *   → @container name not (min-width: 80rem) { }
+ */ function transformMediaRule(rule, index, parent, ctx) {
+    const segments = splitTopLevelCommas(rule.conditionText);
+    const innerCSS = collectRulesCssText(rule.cssRules);
+    const containerRules = [];
+    const passthroughRules = [];
+    // Side-channel registrations are deferred until after the rule swap
+    // succeeds so a rolled-back transform doesn't leak MQL listeners for
+    // styles we never actually emitted.
+    const attrRegistrations = [];
+    for (const seg of segments){
+        const dimensions = extractDimensionConditions(seg);
+        if (dimensions !== null) {
+            const remaining = removeDimensionConditions(seg);
+            // `@media not (X)` / `@media not all and (X)` both negate the whole
+            // query. After dimension extraction the negation is all that's left,
+            // and wrapping the @container in `@media not { ... }` would serialize
+            // as `@media not all` (CSS-false). Fold the negation into the
+            // @container itself instead via `not <container-in-parens>`.
+            const negated = isNegationOnlyRemainder(remaining);
+            // Single dim is already paren-wrapped; multi-dim is "(A) and (B)" so
+            // re-wrap to keep `not` binding over the full conjunction.
+            const containerCondition = negated ? dimensions.includes(" and ") ? "not (" + dimensions + ")" : "not " + dimensions : dimensions;
+            const mediaWrapper = negated ? null : remaining;
+            const containerQuery = "@container " + DOCKED_DOCUMENT_CONTAINER_NAME + " " + containerCondition + " { " + innerCSS + " }";
+            containerRules.push(mediaWrapper ? "@media " + mediaWrapper + " { " + containerQuery + " }" : containerQuery);
+            // Container queries never match the container as a subject, so any
+            // rule whose subject is `<html>` (e.g. `html { ... }`, `:root.dark { ... }`)
+            // silently no-ops inside the @container block above. Mirror those rules
+            // at top level via a synthetic data-attribute we toggle on `<html>` from
+            // the same MQL. `:where()` keeps the original specificity, and inserting
+            // at the same index preserves cascade order with anything below.
+            const attr = attrNameForCondition(seg);
+            const htmlSubjectRules = collectHtmlSubjectInnerCss(rule.cssRules, attr);
+            if (htmlSubjectRules.length > 0) {
+                if (mediaWrapper) {
+                    // Multiple rules inside one @media wrapper parse as a single
+                    // CSSMediaRule, so we can hand the whole thing to insertRule.
+                    containerRules.push("@media " + mediaWrapper + " { " + htmlSubjectRules.join(" ") + " }");
+                } else {
+                    // No wrapper — insertRule() only accepts one top-level rule per
+                    // call, so emit each html-subject rule as its own entry.
+                    for (const r of htmlSubjectRules)containerRules.push(r);
+                }
+                attrRegistrations.push({
+                    media: seg,
+                    attr
+                });
+            }
+        } else {
+            // No dimension conditions — re-emit as a plain @media rule so the styles are not lost.
+            // This only runs when at least one sibling segment does have dimensions (checked below),
+            // preventing a no-op delete+reinsert for fully non-dimension rules like @media print { }.
+            passthroughRules.push("@media " + seg + " { " + innerCSS + " }");
+        }
+    }
+    // Only transform when at least one segment has dimension conditions.
+    // Fully non-dimension queries (e.g. @media print { }) are left untouched.
+    if (containerRules.length === 0) return;
+    const newRules = [
+        ...containerRules,
+        ...passthroughRules
+    ];
+    // Atomic swap: insert the rewrites *after* the original (index + 1, +2, …)
+    // so the original is still at `index` if any insert throws, then delete it
+    // once every insert has succeeded. Earlier code deleted first and inserted
+    // after, which meant a single malformed rewrite (e.g. an unbalanced
+    // dimension extraction) would leave the cascade short a rule because
+    // transformRules() swallows the throw. On failure we roll the inserts back
+    // in reverse order so the original cascade is preserved exactly.
+    let inserted = 0;
+    try {
+        for(; inserted < newRules.length; inserted++){
+            parent.insertRule(newRules[inserted], index + inserted + 1);
+        }
+    } catch (err) {
+        for(let j = inserted; j > 0; j--){
+            try {
+                parent.deleteRule(index + j);
+            } catch (unused) {
+            // Best-effort rollback — if the cascade is already in a bad state
+            // there's nothing more we can do, but bailing here would leave the
+            // remaining successful inserts orphaned in the sheet.
+            }
+        }
+        throw err;
+    }
+    parent.deleteRule(index);
+    for (const { media, attr } of attrRegistrations){
+        ctx.registerHtmlAttrForMedia(media, attr);
+    }
+}
+/**
+ * Transforms a style rule - converts vw units to calc expressions.
+ *
+ * Modifies individual property values in-place rather than re-serializing
+ * the entire rule, which avoids losing CSS shorthand properties that use
+ * variables (e.g. `inset: var(--spacing)`) due to CSSOM pending-substitution
+ * semantics.
+ */ function transformStyleRule(rule, _index, _parent) {
+    const { style } = rule;
+    if (!containsVwUnit(style.cssText)) return;
+    for(let i = 0; i < style.length; i++){
+        const property = style[i];
+        if (property) {
+            const value = style.getPropertyValue(property);
+            if (containsVwUnit(value)) {
+                style.setProperty(property, convertVwUnitsIfPresent(value), style.getPropertyPriority(property));
+            }
+        }
+    }
+}
+/**
+ * Checks if a stylesheet should be processed.
+ */ function canProcessStylesheet(sheet, ctx) {
+    if (ctx.processedSheets.has(sheet)) return false;
+    // Bail before touching `sheet.cssRules` for cross-origin sheets when opted
+    // out, so we don't trigger the SecurityError throw path at all.
+    if (ctx.skipCrossOriginStylesheets && isCrossOriginStylesheet(sheet)) {
+        return false;
+    }
+    const { ownerNode } = sheet;
+    if (!(ownerNode instanceof HTMLStyleElement)) return true;
+    // Skip our own base styles and qualified offer styles
+    return ownerNode.id !== "q-docked-base-styles" && ownerNode.id !== "qualified-offer-style-element";
+}
+// ============================================================================
+// Helpers
+// ============================================================================
+/**
+ * Selector for `<link>` elements that carry — or will apply — a stylesheet.
+ *
+ * `rel` is a space-separated token list, so we match with the `~=`
+ * (whitespace-token) attribute operator rather than `=` (exact string). This
+ * recognises multi-token values like `rel="preload stylesheet"` (AEM
+ * clientlibs' self-applying async pattern) that exact-match selectors miss,
+ * alongside plain `rel="stylesheet"` and the `rel="preload" as="style"`
+ * async-CSS staging form.
+ */ const STYLESHEET_LINK_SELECTOR = "link[rel~='stylesheet'], link[rel~='preload'][as='style']";
+/**
+ * True when a `<link>`'s `rel` token list includes `stylesheet` — i.e. it is
+ * (or will apply as) a real stylesheet. Token-aware so `rel="preload stylesheet"`
+ * counts, which `rel === "stylesheet"` would not.
+ */ function linkAppliesStylesheet(node) {
+    return node.relList.contains("stylesheet");
+}
+/**
+ * True for an async-CSS staging link (`rel="preload" as="style"`) that has not
+ * yet flipped to a stylesheet. Token-aware on `rel` so multi-token preload
+ * values are still recognised, but excludes links whose `rel` already contains
+ * `stylesheet` (e.g. `rel="preload stylesheet"`): those apply now and belong to
+ * {@link linkAppliesStylesheet}, not the observe-and-wait path. Keeping the
+ * exclusion here — rather than relying on callers testing
+ * {@link linkAppliesStylesheet} first — makes the helper self-consistent for
+ * independent use.
+ */ function linkIsPreloadStyle(node) {
+    // Read the `as` content attribute (rather than the `.as` IDL property) so
+    // the check agrees with the `[as="style"]` attribute selector used to find
+    // these links, and stays deterministic across DOM implementations.
+    return node.relList.contains("preload") && node.getAttribute("as") === "style" && !node.relList.contains("stylesheet");
+}
+/**
+ * Collects CSS text from all rules in a rule list.
+ */ function collectRulesCssText(rules) {
+    const parts = [];
+    for (const rule of rules){
+        parts.push(rule.cssText);
+    }
+    return parts.join(" ");
+}
+// ============================================================================
+// Media Query Utilities
+// ============================================================================
+/**
+ * Splits a comma-separated CSS list at the top level, tracking parenthesis
+ * and bracket depth so we don't split inside condition expressions
+ * (`(min-width: 600px)`), functional pseudo-classes (`:is(a, b)`), or
+ * attribute selectors (`[data-x="a,b"]`).
+ *
+ *   "(max-width: 599px), (min-width: 600px) and (max-width: 999px)"
+ *     → ["(max-width: 599px)", "(min-width: 600px) and (max-width: 999px)"]
+ *
+ *   "html, :is(.a, .b) > .c"
+ *     → ["html", ":is(.a, .b) > .c"]
+ */ function splitTopLevelCommas(text) {
+    const segments = [];
+    let depth = 0;
+    let start = 0;
+    for(let i = 0; i < text.length; i++){
+        const c = text[i];
+        if (c === "(" || c === "[") depth++;
+        else if (c === ")" || c === "]") depth--;
+        else if (c === "," && depth === 0) {
+            segments.push(text.slice(start, i).trim());
+            start = i + 1;
+        }
+    }
+    segments.push(text.slice(start).trim());
+    return segments.filter(Boolean);
+}
+const DIMENSION_PROPERTIES = [
+    "width",
+    "min-width",
+    "max-width"
+];
+const DIMENSION_PROPERTIES_PATTERN = DIMENSION_PROPERTIES.join("|");
+/**
+ * Tests whether a parenthesized media condition's *body* (the text between
+ * the outer parens) is a width-related dimension condition. Covers both
+ * the colon form (`max-width: 768px`, `width: calc(-1px + 75rem)`) and the
+ * range form (`768px <= width`, `width >= 600px`). The `[^a-z-]` boundaries
+ * avoid matching inside hyphenated identifiers like `device-width`, so we
+ * preserve the existing pass-through behavior for non-targeted features.
+ */ const DIMENSION_BODY_PATTERN = new RegExp(String.raw(viewport_resize_templateObject(), DIMENSION_PROPERTIES_PATTERN) + String.raw(_templateObject1()) + String.raw(_templateObject2(), DIMENSION_PROPERTIES_PATTERN), "i");
+/**
+ * Walks a media condition string and yields every paren group whose opening
+ * `(` is at depth 0, tracking nested parens so the matching `)` of the outer
+ * group is correctly identified even when the body contains functional
+ * values like `calc(-1px + 75rem)`, `min(...)`, `max(...)`, `clamp(...)`,
+ * `env(...)`, or `var(...)`.
+ *
+ * The previous regex used `[^)]+` for the value, which stopped at the first
+ * inner `)`. For `(max-width: calc(-1px + 75rem))` it produced an unbalanced
+ * match `(max-width: calc(-1px + 75rem)` (missing the outer `)`), which then
+ * generated invalid `@container` CSS that `insertRule` rejected — and because
+ * the original rule had already been deleted, the customer's media query
+ * silently stopped applying.
+ *
+ *   "(max-width: calc(-1px + 75rem)) and (orientation: portrait)"
+ *     → [
+ *         { start:  0, end: 31, body: "max-width: calc(-1px + 75rem)" },
+ *         { start: 36, end: 59, body: "orientation: portrait"          },
+ *       ]
+ */ function* topLevelParenGroups(condition) {
+    let depth = 0;
+    let start = -1;
+    for(let i = 0; i < condition.length; i++){
+        const c = condition[i];
+        if (c === "(") {
+            if (depth === 0) start = i;
+            depth++;
+        } else if (c === ")") {
+            depth--;
+            if (depth === 0 && start >= 0) {
+                yield {
+                    start,
+                    end: i + 1,
+                    body: condition.slice(start + 1, i)
+                };
+                start = -1;
+            }
+        }
+    }
+}
+/**
+ * Extracts dimension-related conditions from a media query, joined by
+ * " and " for emission inside an `@container` rule. Returns null when no
+ * dimension condition is present so callers can leave the original rule
+ * untouched.
+ */ function extractDimensionConditions(condition) {
+    const matches = [];
+    for (const { start, end, body } of topLevelParenGroups(condition)){
+        if (DIMENSION_BODY_PATTERN.test(body)) {
+            matches.push(condition.slice(start, end));
+        }
+    }
+    return matches.length ? matches.join(" and ") : null;
+}
+/**
+ * Removes dimension-related conditions from a media query, leaving any
+ * remaining non-dimension parts (`screen`, `(orientation: portrait)`,
+ * `not`, `and` connectors) so the surrounding @media wrapper can be
+ * preserved. Returns null when nothing meaningful remains.
+ */ function removeDimensionConditions(condition) {
+    let result = "";
+    let lastEnd = 0;
+    for (const { start, end, body } of topLevelParenGroups(condition)){
+        if (DIMENSION_BODY_PATTERN.test(body)) {
+            result += condition.slice(lastEnd, start);
+            lastEnd = end;
+        }
+    }
+    result += condition.slice(lastEnd);
+    let previous;
+    do {
+        previous = result;
+        result = result.replace(/\s+and\s+and\s+/gi, " and ").replace(/^\s*and\s+/gi, "").replace(/\s+and\s*$/gi, "").replace(/\(\s*and\s+/gi, "(").replace(/\s+and\s*\)/gi, ")");
+    }while (result !== previous);
+    result = result.trim();
+    return !result || result === "all" || result === "screen" ? null : result;
+}
+/**
+ * Recognizes a remainder of the form `not` (bare), `not all`, or `not screen`
+ * — i.e. the negations whose original query, in screen context, is equivalent
+ * to `not (<dimensions>)`. Both `@media not (X)` (CSS MQ Level 4) and
+ * `@media not all and (X)` (Level 3) negate the entire query, so once
+ * dimensions are extracted the remainder is the signal that the original
+ * was negating dimensions wholesale and can fold into a negated `@container`.
+ *
+ * Intentionally narrow on two axes:
+ *
+ * - `not <other media-type>` (e.g. `not print and (X)`) is rejected. The
+ *   spec evaluates that as `!(other && X)`, which in screen reduces to
+ *   `true` regardless of width — folding to `@container ... not (X)`
+ *   would incorrectly reintroduce a width gate the original never had,
+ *   so we let it fall through to the legacy path.
+ * - Mixed remainders combining a negation with a non-dimension feature
+ *   cannot be expressed as a single negated `@container` by De Morgan,
+ *   so they also fall through.
+ */ const NEGATION_ONLY_REMAINDER = /^\s*not(?:\s+(?:all|screen))?\s*$/i;
+function isNegationOnlyRemainder(remaining) {
+    return remaining !== null && NEGATION_ONLY_REMAINDER.test(remaining);
+}
+/**
+ * Per-segment toggle: non-dimension segments are kept verbatim (so `print`,
+ * `(orientation: portrait)` etc. still gate the sheet), dimension segments
+ * collapse to `"all"` / `"not all"` based on the MQL, and mixed segments
+ * (e.g. `print and (min-width: 768px)`) keep just their non-dimension
+ * remainder when matched.
+ */ function computeMediaForLink(originalMedia, matches) {
+    return splitTopLevelCommas(originalMedia).map((seg)=>{
+        var _removeDimensionConditions;
+        if (extractDimensionConditions(seg) === null) return seg;
+        if (!matches) return "not all";
+        return (_removeDimensionConditions = removeDimensionConditions(seg)) != null ? _removeDimensionConditions : "all";
+    }).join(", ");
+}
+// ============================================================================
+// Selector Utilities
+// ============================================================================
+/**
+ * Returns the rightmost compound selector — i.e. the subject that the rule
+ * actually styles. Walks backwards skipping over parens and brackets so
+ * combinators inside `:is(...)`, `:has(...)`, `[attr="x > y"]` etc. are
+ * ignored. CSSOM serializes combinators with a single surrounding space,
+ * but we still treat raw `>`, `+`, `~` as combinators for safety.
+ *
+ *   "html > body .foo"     → ".foo"
+ *   ":is(div, p) > .bar"   → ".bar"
+ *   "html.dark"            → "html.dark"
+ */ function getRightmostCompound(selector) {
+    let depth = 0;
+    for(let i = selector.length - 1; i >= 0; i--){
+        const c = selector[i];
+        if (c === ")" || c === "]") depth++;
+        else if (c === "(" || c === "[") depth--;
+        else if (depth === 0 && (c === " " || c === "\t" || c === "\n" || c === ">" || c === "+" || c === "~")) {
+            return selector.slice(i + 1).trim();
+        }
+    }
+    return selector.trim();
+}
+/**
+ * True when the selector's subject is the document root — `html`, `:root`,
+ * or one of those followed by classes/ids/attributes/pseudo-classes
+ * (`html.dark`, `:root[data-theme="x"]`, `html:focus-within`). These are
+ * exactly the selectors that container queries can't match because the
+ * container *is* the subject.
+ */ function isHtmlSubjectSelector(selector) {
+    const compound = getRightmostCompound(selector);
+    return /^(?:html|:root)(?:[.#:[]|$)/.test(compound);
+}
+/**
+ * Stable 32-bit FNV-1a hash of a media condition, formatted as a `data-q-bp-*`
+ * attribute name. Determinism guarantees that identical conditions across
+ * different stylesheets resolve to the same attribute (and therefore share
+ * the same MQL via the upstream `mqlByMedia` dedupe).
+ */ function attrNameForCondition(condition) {
+    let hash = 2166136261;
+    for(let i = 0; i < condition.length; i++){
+        hash ^= condition.charCodeAt(i);
+        hash = Math.imul(hash, 16777619);
+    }
+    return "data-q-bp-" + (hash >>> 0).toString(36);
+}
+/**
+ * Builds the list of html-subject style rules from `rules`, with
+ * `:where([attr])` appended to each html-subject selector. Returns one
+ * fully-formed style rule per entry — the caller decides whether to wrap
+ * them in a shared `@media` or insert them individually, since
+ * `insertRule()` only accepts a single top-level rule per call.
+ *
+ * Rules with mixed selector lists are split — only the html-subject half is
+ * emitted here; the descendant half is already covered by the surrounding
+ * @container block. `:where()` contributes 0 specificity.
+ *
+ * Nested grouping rules (e.g. an inner `@supports`) are intentionally not
+ * walked: the original CSS is re-emitted verbatim inside the @container, so
+ * html-subject rules in nested groups still no-op acceptably and a deeper
+ * walk would risk double-applying styles.
+ */ function collectHtmlSubjectInnerCss(rules, attr) {
+    const parts = [];
+    for (const rule of rules){
+        if (rule instanceof CSSStyleRule) {
+            const htmlSelectors = splitTopLevelCommas(rule.selectorText).filter(isHtmlSubjectSelector).map((s)=>s + ":where([" + attr + "])");
+            if (htmlSelectors.length > 0) {
+                parts.push(htmlSelectors.join(", ") + " { " + rule.style.cssText + " }");
+            }
+        }
+    }
+    return parts;
+}
+// ============================================================================
+// VW Unit Utilities
+// ============================================================================
+const VW_UNIT_PATTERN = /(-?\d+(?:\.\d+)?)\s*[dsl]?vw/gi;
+/**
+ * Checks if CSS text contains vw units.
+ */ function containsVwUnit(cssText) {
+    VW_UNIT_PATTERN.lastIndex = 0;
+    return VW_UNIT_PATTERN.test(cssText);
+}
+/**
+ * Converts vw units to calc expressions if present.
+ * Returns the original value if no vw units are found.
+ */ function convertVwUnitsIfPresent(cssText) {
+    let hasMatch = false;
+    const result = cssText.replace(VW_UNIT_PATTERN, (_match, value)=>{
+        hasMatch = true;
+        const decimalValue = parseFloat(value) / 100;
+        return "calc(" + decimalValue + " * var(" + (/* inlined export .DOCKED_VIEWPORT_WIDTH_CSS_VARIABLE */"--qdvw") + "))";
+    });
+    return hasMatch ? result : cssText;
+}
+function isCSSRuleParent(rule) {
+    return !!rule && "cssRules" in rule;
+}
+/**
+ * True when `el` is anchored near the top of the viewport (so bottom-anchored
+ * sticky bars/CTAs are ignored) AND is not so tall that treating it as a header
+ * would shove the widget off-screen (guards full-height hero banners that happen
+ * to use `<header>`/`role="banner"`). Used as the `isValid` predicate for the
+ * header-tracking {@link BoundingBoxObserver}.
+ */ function isPinnedToTop(el) {
+    const { top, height } = el.getBoundingClientRect();
+    return top <= window.innerHeight * 0.25 && height <= window.innerHeight * 0.5;
+}
+function createHeaderObserver() {
+    return new BoundingBoxObserver({
+        selector: PINNED_HEADER_SELECTOR,
+        property: "bottom",
+        isValid: isPinnedToTop,
+        skipShadowRoot: isQualifiedOwnedShadowRoot,
+        onBBoxChange: (rect)=>{
+            const root = document.documentElement;
+            if (rect === null) {
+                root.style.removeProperty(DOCKED_TOP_OFFSET_CSS_VARIABLE);
+                return;
+            }
+            root.style.setProperty(DOCKED_TOP_OFFSET_CSS_VARIABLE, "" + Math.max(0, Math.round(rect.bottom)) + "px");
+        }
+    });
+}
+var viewport_resize_STYLESHEET_LINK_SELECTOR = /* unused export */ undefined;
+var viewport_resize_linkAppliesStylesheet = /* unused export */ undefined;
+var viewport_resize_linkIsPreloadStyle = /* unused export */ undefined;
+export { DOCKED_RIGHT_OFFSET_CSS_VARIABLE, DOCKED_WIDTH_PX, createViewportResize, viewport_resize_STYLESHEET_LINK_SELECTOR as STYLESHEET_LINK_SELECTOR, viewport_resize_linkAppliesStylesheet as linkAppliesStylesheet, viewport_resize_linkIsPreloadStyle as linkIsPreloadStyle };