@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/utils/keep-hydrated.js

@@ -0,0 +1,188 @@
+/**
+ * Whether a class is one Stencil itself puts on a host: its default `hydratedFlag` (Pine doesn't
+ * change it), or a scoped component's own scope classes (`sc-pds-radio`, `sc-pds-radio-h`,
+ * `sc-pds-radio-s`), which its CSS needs. Only the host's own: another `sc-` class may be a
+ * consumer's (styled-components ids).
+ * @param el - Host element
+ * @param name - Class name
+ */
+export const isStencilClass = (el, name) => {
+    const scope = `sc-${el.localName}`;
+    return name === 'hydrated' || name === scope || name === `${scope}-h` || name === `${scope}-s`;
+};
+/**
+ * The class names in a rendered `class` value: a string, or Stencil's `{ name: boolean }` form.
+ */
+export const classNamesOf = (classes) => typeof classes === 'string'
+    ? classes.split(/\s+/).filter(Boolean)
+    : Object.keys(classes).filter((name) => classes[name]);
+// Each restore that writes something counts. A real strip costs one, but a script that undoes the
+// restore as soon as it lands (from a MutationObserver) keeps both going forever, all in
+// microtasks, so the page never renders or takes input. More writes than this before the next task
+// means that kind of fight. A script that undoes it from a timer or animation frame gets a fresh
+// budget each task; the page stays responsive then, so that fight isn't capped.
+const MAX_RESTORES_PER_TASK = 5;
+// Callbacks waiting for the next task, all run by one message. A MessageChannel message isn't slowed
+// down like a timer is in a background tab (or frozen by test fake timers); a timer is the fallback
+// where it's missing. One message for all of them, so a morph that strips many hosts doesn't open a
+// channel for each.
+const nextTaskCallbacks = new Set();
+const runNextTaskCallbacks = () => {
+    const callbacks = Array.from(nextTaskCallbacks);
+    nextTaskCallbacks.clear();
+    callbacks.forEach((callback) => callback());
+};
+const onNextTask = (callback) => {
+    nextTaskCallbacks.add(callback);
+    if (nextTaskCallbacks.size > 1)
+        return;
+    if (typeof MessageChannel === 'undefined') {
+        setTimeout(runNextTaskCallbacks);
+        return;
+    }
+    const channel = new MessageChannel();
+    channel.port1.onmessage = () => {
+        channel.port1.close();
+        runNextTaskCallbacks();
+    };
+    channel.port2.postMessage(null);
+};
+/**
+ * The restore kind for a host's own classes, styles and attributes, shared by a component's own
+ * host restore and `keepPineHydrated`: one fight on a host's classes stops both, and warns once.
+ */
+export const HOST_RESTORE = 'host';
+/**
+ * Remembers the Stencil classes an element has had, and returns all of them. A restore can't read
+ * them from the latest mutation alone: after a script's last strip they're gone from its old value
+ * too, and the next change would restore nothing.
+ */
+export const stencilClassesOf = (seen, el, oldValue) => {
+    [...classNamesOf(oldValue !== null && oldValue !== void 0 ? oldValue : ''), ...Array.from(el.classList)]
+        .filter((name) => isStencilClass(el, name))
+        .forEach((name) => seen.add(name));
+    return Array.from(seen);
+};
+// What each element has already been warned about, by kind of restore. A host with its own restore
+// is also watched for its Stencil classes, so one fight on its classes stops both and needs one
+// warning; a fight over a trigger's ARIA is a different kind, and warns on its own. On the global
+// object, like `OBSERVER` below, so two copies of Pine on a page share it.
+const WARNED = Symbol.for('@pine-ds/core/restoreWarnings');
+const warnedKinds = () => {
+    var _a;
+    const store = globalThis;
+    return ((_a = store[WARNED]) !== null && _a !== void 0 ? _a : (store[WARNED] = new WeakMap()));
+};
+/** Whether `el` was already warned about for `kind`; records it if not. */
+const alreadyWarned = (el, kind) => {
+    var _a;
+    const kinds = (_a = warnedKinds().get(el)) !== null && _a !== void 0 ? _a : new Set();
+    warnedKinds().set(el, kinds);
+    if (kinds.has(kind))
+        return true;
+    kinds.add(kind);
+    return false;
+};
+/**
+ * Wraps a restore callback, which returns whether it wrote anything, so that it writes at most
+ * `MAX_RESTORES_PER_TASK` times before the next task (until the message posted after its first write
+ * runs). Past that, another script is undoing every restore as soon as it lands, so it stops and
+ * lets that script win rather than hang the page. What that script left stays until something
+ * changes the element again: the count resets on the next task, so a later change is restored, but
+ * nothing is restored on its own. The first give-up warns, logging `el` so it can be found in
+ * devtools; later ones, and other restores of the same `kind` giving up on the same element, are
+ * silent.
+ * @param restore - Puts back what something removed; returns `true` if it wrote anything
+ * @param warning - What the console warning says was given up
+ * @param el - The element being restored, logged with the warning
+ * @param kind - What's being restored; one warning per element for each kind
+ */
+export const limitRestores = (restore, warning, el, kind = warning) => {
+    let writes = 0;
+    let warned = false;
+    return (...args) => {
+        if (writes >= MAX_RESTORES_PER_TASK) {
+            if (!warned) {
+                warned = true;
+                if (el && alreadyWarned(el, kind))
+                    return;
+                // The warning as an argument, not the format string: it carries the tag name, which the HTML
+                // parser lets contain `%`.
+                console.warn('%s', warning, el);
+            }
+            return;
+        }
+        if (!restore(...args))
+            return;
+        if (writes === 0)
+            onNextTask(() => (writes = 0));
+        writes += 1;
+    };
+};
+// On the global object, not in this module, so a page with two copies of Pine (the CDN build and a
+// bundled `@pine-ds/react`) still has one observer.
+const OBSERVER = Symbol.for('@pine-ds/core/keepPineHydrated');
+/**
+ * Puts Stencil's own classes back on any Pine component that loses them. Stencil hides a component
+ * until it has `hydrated`, so a DOM morph that strips a host's `class` makes it vanish, and nothing
+ * rewrites it. One observer on the whole document covers every component, including the ones with no
+ * host restore of their own. It only restores classes the element had, so it never runs ahead of
+ * Stencil. It can't see inside shadow roots, which a morph doesn't reach either.
+ *
+ * A script that removes `hydrated` on purpose sees it come back. One that removes it every time it
+ * appears (from a `MutationObserver`, say) wins after a few rounds, and the component logs a console
+ * warning. The component then stays hidden, as that script left it, until its class changes again.
+ *
+ * Pine's global script calls this, so the CDN and `dist` builds get it on load. The custom-elements
+ * build (`@pine-ds/core/components/*`, `@pine-ds/react`) has no global script: call it once yourself.
+ * Calling it again does nothing, and without `MutationObserver` (server rendering) neither does the
+ * first call.
+ */
+export const keepPineHydrated = () => {
+    if (typeof MutationObserver === 'undefined' || typeof document === 'undefined')
+        return;
+    const store = globalThis;
+    if (store[OBSERVER])
+        return;
+    // One capped restore per element, so a script fighting one component doesn't stop the others,
+    // and the Stencil classes each one has had.
+    const restores = new WeakMap();
+    const seen = new WeakMap();
+    const restoreFor = (el) => {
+        let restore = restores.get(el);
+        if (!restore) {
+            restore = limitRestores((names) => {
+                const missing = names.filter((name) => !el.classList.contains(name));
+                if (missing.length > 0)
+                    el.classList.add(...missing);
+                return missing.length > 0;
+            }, `${el.localName}: stopped putting back its hydrated and scope classes, as another script keeps removing them.`, el, HOST_RESTORE);
+            restores.set(el, restore);
+        }
+        return restore;
+    };
+    const observer = new MutationObserver((records) => {
+        records.forEach(({ target, oldValue }) => {
+            const el = target;
+            if (!el.localName.startsWith('pds-'))
+                return;
+            // No old value is a `class` being added. Stencil's first `hydrated` arrives that way, which
+            // needs nothing; for an element already seen, it's the class coming back after a removal.
+            if (oldValue == null && !seen.has(el))
+                return;
+            if (!seen.has(el))
+                seen.set(el, new Set());
+            const names = stencilClassesOf(seen.get(el), el, oldValue);
+            if (names.length > 0)
+                restoreFor(el)(names);
+        });
+    });
+    // The document rather than its root element, so replacing `<html>` doesn't end the watch.
+    observer.observe(document, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['class'],
+        attributeOldValue: true,
+    });
+    store[OBSERVER] = observer;
+};

package/dist/collection/utils/overlay.js

@@ -1,68 +1,84 @@
 export const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) => {
-    if (elem == undefined)
-        return;
+    if (elem === null || overlay === null)
+        return false;
+    if (typeof elemPlacement !== 'string' || elemPlacement.trim() === '') {
+        return false;
+    }
     const rect = elem.getBoundingClientRect();
     const contentRect = overlay.getBoundingClientRect();
-    // Exit the function if the placement is not set
-    if (!elemPlacement || elemPlacement == "")
-        return;
+    // Reset styles
+    overlay.style.top = '';
+    overlay.style.left = '';
+    overlay.style.right = '';
+    overlay.style.bottom = '';
+    overlay.style.transform = '';
+    // Use fixed positioning for portal overlays
+    overlay.style.position = 'fixed';
+    // Detect if the trigger is a span with only text or a text node
+    let isTextTrigger = false;
+    if (elem.childNodes.length === 1 && elem.childNodes[0].nodeType === Node.TEXT_NODE) {
+        isTextTrigger = true;
+    }
+    else if (elem.childNodes.length === 1 && elem.childNodes[0].nodeType === Node.ELEMENT_NODE) {
+        const child = elem.childNodes[0];
+        if (child.tagName === 'SPAN' && child.childNodes.length === 1 && child.childNodes[0].nodeType === Node.TEXT_NODE) {
+            isTextTrigger = true;
+        }
+    }
     switch (true) {
-        case elemPlacement.includes("right"):
-            overlay.style.top = '50%';
-            overlay.style.left = `calc(${rect.width}px + ${offset}px)`;
-            overlay.style.transform = 'translateY(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.top = '0';
-                overlay.style.transform = 'translateY(0)';
+        case elemPlacement.includes('right'):
+            if (isTextTrigger) {
+                // Align to the bottom of the trigger for text triggers
+                overlay.style.top = `${rect.bottom - contentRect.height / 2}px`;
+            }
+            else {
+                overlay.style.top = `${rect.top + rect.height / 2 - contentRect.height / 2}px`;
             }
-            if (elemPlacement.includes("end")) {
-                overlay.style.bottom = '0';
-                overlay.style.top = 'initial';
-                overlay.style.transform = 'translateY(0)';
+            overlay.style.left = `${rect.right + offset}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.top = `${rect.top}px`;
+            }
+            if (elemPlacement.includes('end')) {
+                overlay.style.top = `${rect.bottom - contentRect.height}px`;
             }
             break;
-        case elemPlacement.includes("left"):
-            overlay.style.top = '50%';
-            overlay.style.right = `calc(${rect.width}px + ${offset}px)`;
-            overlay.style.transform = 'translateY(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.top = '0';
-                overlay.style.transform = 'translateY(0)';
+        case elemPlacement.includes('left'):
+            if (isTextTrigger) {
+                overlay.style.top = `${rect.bottom - contentRect.height / 2}px`;
+            }
+            else {
+                overlay.style.top = `${rect.top + rect.height / 2 - contentRect.height / 2}px`;
+            }
+            overlay.style.left = `${rect.left - contentRect.width - offset}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.top = `${rect.top}px`;
             }
-            if (elemPlacement.includes("end")) {
-                overlay.style.bottom = '0';
-                overlay.style.top = 'initial';
-                overlay.style.transform = 'translateY(0)';
+            if (elemPlacement.includes('end')) {
+                overlay.style.top = `${rect.bottom - contentRect.height}px`;
             }
             break;
-        case elemPlacement.includes("bottom"):
-            overlay.style.top = `calc(${rect.height}px + ${offset}px)`;
-            overlay.style.left = '50%';
-            overlay.style.transform = 'translateX(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.left = '0';
-                overlay.style.transform = 'translateX(0)';
+        case elemPlacement.includes('bottom'):
+            overlay.style.top = `${rect.bottom + offset}px`;
+            overlay.style.left = `${rect.left + rect.width / 2 - contentRect.width / 2}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.left = `${rect.left}px`;
             }
-            if (elemPlacement.includes("end")) {
-                overlay.style.left = 'initial';
-                overlay.style.right = '0';
-                overlay.style.transform = 'translateX(0)';
+            if (elemPlacement.includes('end')) {
+                overlay.style.left = `${rect.right - contentRect.width}px`;
+                overlay.style.right = 'initial';
             }
             break;
-        case elemPlacement.includes("top"):
-            overlay.style.top = `calc((${contentRect.height}px + ${offset}px) * -1)`;
-            overlay.style.left = '50%';
-            overlay.style.transform = 'translateX(-50%)';
-            if (elemPlacement.includes("start")) {
-                overlay.style.left = '0';
-                overlay.style.transform = 'translateX(0)';
+        case elemPlacement.includes('top'):
+            overlay.style.top = `${rect.top - contentRect.height - offset}px`;
+            overlay.style.left = `${rect.left + rect.width / 2 - contentRect.width / 2}px`;
+            if (elemPlacement.includes('start')) {
+                overlay.style.left = `${rect.left}px`;
             }
-            if (elemPlacement.includes("end")) {
-                overlay.style.left = 'initial';
-                overlay.style.right = '0';
-                overlay.style.transform = 'translateX(0)';
+            if (elemPlacement.includes('end')) {
+                overlay.style.left = `${rect.right - contentRect.width}px`;
+                overlay.style.right = 'initial';
             }
             break;
     }
+    return true;
 };
-//# sourceMappingURL=overlay.js.map

package/dist/collection/utils/portal-target.js

@@ -0,0 +1,64 @@
+/**
+ * The native `<dialog>` or open `popover` (as pds-filter's) an element sits in, so a popup portaled
+ * there shares its top layer and a click in it isn't outside it; otherwise `document.body`.
+ * `closest()` stops at shadow boundaries and misses one that only wraps slotted content, so this
+ * walks assigned slots and shadow hosts, as pds-combobox does. `isHost` picks which ancestor counts.
+ */
+export function findPortalTarget(from, isHost = isOpenDialogOrPopover) {
+    const seen = new Set();
+    let current = from;
+    while (current && !seen.has(current)) {
+        seen.add(current);
+        if (current.nodeType === Node.ELEMENT_NODE && isHost(current)) {
+            return current;
+        }
+        const assigned = current.nodeType === Node.ELEMENT_NODE ? current.assignedSlot : null;
+        if (assigned) {
+            current = assigned;
+            continue;
+        }
+        const parent = current.parentNode;
+        current = parent instanceof ShadowRoot ? parent.host : parent;
+    }
+    return document.body;
+}
+/**
+ * A modal dialog or open popover, which paints in the top layer above anything in the body, that
+ * sits in the document itself: the document's stylesheets don't reach into a shadow root.
+ */
+export function isTopLayerInDocument(el) {
+    if (el.getRootNode() !== el.ownerDocument)
+        return false;
+    return matchesSafely(el, ':modal') || matchesSafely(el, ':popover-open');
+}
+/**
+ * Calls `onClose` once `host` leaves the top layer (its dialog closes or its popover hides), and
+ * returns a function that stops listening.
+ */
+export function onTopLayerClose(host, onClose) {
+    const check = () => {
+        if (!isTopLayerInDocument(host))
+            onClose();
+    };
+    host.addEventListener('close', check);
+    host.addEventListener('toggle', check);
+    return () => {
+        host.removeEventListener('close', check);
+        host.removeEventListener('toggle', check);
+    };
+}
+function isOpenDialogOrPopover(el) {
+    // Only an open dialog: inside a closed one, the popup would be hidden with it.
+    if (el.localName === 'dialog')
+        return el.open;
+    return el.hasAttribute('popover') && matchesSafely(el, ':popover-open');
+}
+function matchesSafely(el, selector) {
+    try {
+        return el.matches(selector);
+    }
+    catch (_a) {
+        // A browser without the selector (no Popover API, or no :modal): no top layer to share.
+        return false;
+    }
+}

package/dist/collection/utils/reconnected-content.js

@@ -0,0 +1,25 @@
+/**
+ * Unwraps a stale copy of a light-DOM (`shadow: false`) component's own wrapper,
+ * left behind when a page-cache (Turbo, browser bfcache) reconnect nests a
+ * component's previous render inside its freshly rendered one. Call from
+ * `componentDidRender` with the element that directly contains the rendered
+ * `<slot>` and the selector that identifies "another one of me." Unwraps in
+ * place (move-then-remove) so nested content is never lost.
+ *
+ * `contentSelector` is only needed when the wrapper itself further nests a
+ * separate content element (e.g. pds-tab's `<a class="pds-tab">` wrapping a
+ * `.pds-tab__content` div) — omit it when the wrapper's own children are the
+ * slotted content (e.g. pds-tabpanel's `.pds-tabpanel` div).
+ */
+export function unwrapReconnectedContent(container, selector, contentSelector) {
+    var _a;
+    if (container === null)
+        return;
+    let stale = container.firstElementChild;
+    while (stale === null || stale === void 0 ? void 0 : stale.matches(selector)) {
+        const source = contentSelector !== undefined ? ((_a = stale.querySelector(contentSelector)) !== null && _a !== void 0 ? _a : stale) : stale;
+        Array.from(source.childNodes).forEach((node) => container.insertBefore(node, stale));
+        stale.remove();
+        stale = container.firstElementChild;
+    }
+}

package/dist/collection/utils/reflected-attribute-default.js

@@ -0,0 +1,40 @@
+/**
+ * Restores a reflected prop's default when its attribute is removed.
+ *
+ * A reflected `@Prop` with a default writes that default onto the host as an
+ * attribute even when the author leaves it out. Removing the attribute doesn't
+ * restore the default: Stencil's `attributeChangedCallback` sets the prop to
+ * `null` (or `false` for a boolean), even when its default is `true`. A Turbo
+ * morph hits this whenever the author relied on the default, since the
+ * server's HTML never carries the attribute Pine wrote.
+ *
+ * A `null` or `undefined` falls back to the default, whether the attribute was
+ * removed or a consumer (or a framework clearing a prop) assigned it. Any other
+ * value is a real write and is kept, except a boolean's `false`: that's also
+ * what removing the attribute produces, so it's told apart by the host's actual
+ * attribute. Present, trust it; absent, fall back to the default.
+ *
+ * Falling back also writes the default back onto the host. Stencil won't: it
+ * diffs a reflected attribute against the previous render, not the live DOM,
+ * so when the removed attribute held the default (`'lg'` → `null` → `'lg'`)
+ * the values match and it skips the write. Left absent, the attribute would
+ * make a later `copytext.border = false` fall back to the default too.
+ *
+ * Wire up from a `@Watch` on the prop and reassign the prop to the result.
+ *
+ * `attr` is the HTML attribute name, not the prop name — pass the kebab-case
+ * form (e.g. `'is-loading'`) for a camelCase prop. They're the same string
+ * for every current caller (`size`, `variant`, `placement`, `border`), but
+ * `hasAttribute` would silently always return `false` for a multi-word prop
+ * if the prop name were passed instead.
+ */
+export function restoreReflectedDefault(el, attr, value, defaultValue) {
+    // Only a boolean's `false` needs the attribute to tell a write from a removal. Checking it for
+    // other values would let a `null` write strip the attribute and reset every later write.
+    if (value != null && (value !== false || el.hasAttribute(attr)))
+        return value;
+    if (defaultValue !== false && defaultValue != null) {
+        el.setAttribute(attr, defaultValue === true ? '' : String(defaultValue));
+    }
+    return defaultValue;
+}

package/dist/collection/utils/scroll.js

@@ -0,0 +1,77 @@
+let cachedRtlScrollType = null;
+/**
+ * Detects how this browser reports scrollLeft for RTL overflow containers.
+ * @see https://github.com/othree/jquery.rtl-scroll-type
+ */
+export function getRtlScrollType() {
+    if (cachedRtlScrollType) {
+        return cachedRtlScrollType;
+    }
+    if (typeof document === 'undefined') {
+        cachedRtlScrollType = 'default';
+        return cachedRtlScrollType;
+    }
+    const probe = document.createElement('div');
+    probe.style.width = '100px';
+    probe.style.height = '100px';
+    probe.style.position = 'absolute';
+    probe.style.top = '-1000px';
+    probe.style.overflow = 'scroll';
+    probe.style.direction = 'rtl';
+    const inner = document.createElement('div');
+    inner.style.width = '200px';
+    inner.style.height = '100px';
+    probe.appendChild(inner);
+    document.body.appendChild(probe);
+    if (probe.scrollLeft > 0) {
+        cachedRtlScrollType = 'reverse';
+    }
+    else {
+        probe.scrollLeft = 1;
+        cachedRtlScrollType = probe.scrollLeft === 0 ? 'negative' : 'default';
+    }
+    document.body.removeChild(probe);
+    return cachedRtlScrollType;
+}
+/** Reset cached RTL scroll type (for tests). */
+export function resetRtlScrollTypeCache() {
+    cachedRtlScrollType = null;
+}
+/** True when the element's used text direction is RTL (inherits from ancestors). */
+export function isRtlDirection(element) {
+    return getComputedStyle(element).direction === 'rtl';
+}
+/**
+ * RTL scroll offset from inline-start for a known browser scrollLeft model.
+ * @see https://github.com/othree/jquery.rtl-scroll-type#3-types-of-scrollleft-scrollwidth--100
+ */
+export function getRtlScrollOffsetFromStart(scrollLeft, maxScroll, rtlType) {
+    switch (rtlType) {
+        case 'negative':
+            return Math.max(0, -scrollLeft);
+        case 'reverse':
+            return Math.max(0, scrollLeft);
+        case 'default':
+        default:
+            return Math.max(0, maxScroll - scrollLeft);
+    }
+}
+/**
+ * Distance scrolled from the inline-start edge (LTR: left, RTL: right).
+ */
+export function getScrollOffsetFromStart(container) {
+    const { scrollLeft, scrollWidth, clientWidth } = container;
+    const maxScroll = Math.max(0, scrollWidth - clientWidth);
+    if (maxScroll <= 0) {
+        return 0;
+    }
+    const isRtl = isRtlDirection(container);
+    if (!isRtl) {
+        return scrollLeft;
+    }
+    return getRtlScrollOffsetFromStart(scrollLeft, maxScroll, getRtlScrollType());
+}
+/** True when the container is scrolled away from its inline-start edge. */
+export function isScrolledFromInlineStart(container) {
+    return getScrollOffsetFromStart(container) > 0;
+}

package/dist/collection/utils/tabbable.js

@@ -0,0 +1,82 @@
+const TABBABLE = [
+    'a[href]',
+    'area[href]',
+    'button',
+    'input:not([type="hidden"])',
+    'select',
+    'textarea',
+    'iframe',
+    'summary',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]',
+].join(',');
+/**
+ * Collects the tabbable elements under `root` in focus order, walking into open shadow roots and
+ * following slots, so a component's own controls (the input inside pds-combobox or pds-textarea)
+ * count without being registered here by tag name. Positive tabindex values are not reordered,
+ * and a closed shadow root can't be seen into.
+ */
+function collectTabbable(root, found) {
+    for (const child of Array.from(root.children))
+        visitTabbable(child, found);
+}
+// An editing host reports tabIndex -1 but is still a Tab stop; editable content inside it is not.
+const isTabStop = (el) => { var _a; return el.tabIndex >= 0 || (el.isContentEditable && !el.hasAttribute('tabindex') && !((_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.isContentEditable)); };
+function visitTabbable(el, found) {
+    var _a, _b, _c, _d;
+    // A tooltip portaled into a dialog only describes the control that has focus; it's never a stop of its own.
+    if (el.hasAttribute('inert') || el.getAttribute('role') === 'tooltip')
+        return;
+    if (el.localName === 'slot') {
+        const slot = el;
+        // Fallback content renders only when nothing at all is assigned, text included.
+        if (((_b = (_a = slot.assignedNodes) === null || _a === void 0 ? void 0 : _a.call(slot, { flatten: true })) !== null && _b !== void 0 ? _b : []).length === 0)
+            return collectTabbable(el, found);
+        for (const slotted of slot.assignedElements({ flatten: true }))
+            visitTabbable(slotted, found);
+        return;
+    }
+    // A delegatesFocus host passes focus to its first control, which the walk below finds.
+    const delegates = ((_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.delegatesFocus) === true;
+    if (el instanceof HTMLElement && !delegates && isTabStop(el) && el.matches(TABBABLE) && !el.matches(':disabled')) {
+        found.push(el);
+    }
+    // A shadow host's light children render only through its slots, which the walk reaches.
+    collectTabbable((_d = el.shadowRoot) !== null && _d !== void 0 ? _d : el, found);
+}
+/** The element as a radio in a named group, or `null`. */
+const groupedRadio = (el) => el instanceof HTMLInputElement && el.type === 'radio' && el.name !== '' ? el : null;
+/**
+ * Keeps one radio per named group, as the browser does: the checked one, or the first. The others
+ * are reached with the arrow keys, so they can't be the first or last stop of the trap.
+ */
+function oneRadioPerGroup(elements) {
+    // Radios group by name and form within one tree, so each shadow root starts its own groups.
+    const groups = [];
+    for (const el of elements) {
+        const radio = groupedRadio(el);
+        if (radio === null)
+            continue;
+        const group = groups.find(([first]) => first.name === radio.name && first.form === radio.form && first.getRootNode() === radio.getRootNode());
+        if (group)
+            group.push(radio);
+        else
+            groups.push([radio]);
+    }
+    const stops = new Set(groups.map((radios) => { var _a; return (_a = radios.find((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0]; }));
+    return elements.filter((el) => groupedRadio(el) === null || stops.has(el));
+}
+/** The controls Tab reaches in `root`, in order: visible ones, and one radio per group. */
+export function tabbableIn(root) {
+    const found = [];
+    collectTabbable(root, found);
+    // checkVisibility() also drops an element inside a hidden ancestor, whose own computed
+    // display isn't none; such an element can't take focus.
+    const visible = found.filter(el => {
+        if (typeof el.checkVisibility === 'function')
+            return el.checkVisibility({ checkVisibilityCSS: true });
+        const style = window.getComputedStyle(el);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    return oneRadioPerGroup(visible);
+}