@pine-ds/core 4.5.0 → 4.7.0

package/hydrate/index.mjs

@@ -150,6 +150,109 @@ const isStencilClass = (el, name) => {
 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.
+ */
+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.
+ */
+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
+ */
+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');
@@ -160,8 +263,9 @@ const OBSERVER = Symbol.for('@pine-ds/core/keepPineHydrated');
  * 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, and one that removes it every time it
- * appears never settles: don't strip Pine's classes from a `MutationObserver`.
+ * 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.
@@ -174,14 +278,37 @@ const keepPineHydrated = () => {
     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 (oldValue == null || !el.localName.startsWith('pds-'))
+            if (!el.localName.startsWith('pds-'))
                 return;
-            const missing = classNamesOf(oldValue).filter((name) => isStencilClass(el, name) && !el.classList.contains(name));
-            if (missing.length > 0)
-                el.classList.add(...missing);
+            // 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.
@@ -5603,7 +5730,7 @@ class MockPdsModal {
             'pds-modal__backdrop': true,
             'open': this.open,
         };
-        return (hAsync("div", { key: '1211583aae06cfa7726371ba18796d7704d9e468', class: backdropClasses }, hAsync("div", { key: '8376a213a21b8f5ee78b9e58e2265d27ce957307', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: '4dfcad52e69fa2f207ed09c3ee3a225a1d789e71', class: "pds-modal__header" }, hAsync("slot", { key: '8d9710b91f6f83bc20b2f93b9e4e9fa5f59ae2ce', name: "header" })), hAsync("div", { key: 'f3291bf921619eabb6d63aa80e006f94239325fc', class: "pds-modal-content" }, hAsync("slot", { key: '19dca53455f9943e394d8ed9ea722a1a591e5de6' })), hAsync("div", { key: '835caa9692b1109649edc7d4daf308bb10ed0cd9', class: "pds-modal__footer" }, hAsync("slot", { key: 'f30033b8f842923df9780b893d05428dc14452dc', name: "footer" })))));
+        return (hAsync("div", { key: '3a526f6883d7e7df35985a145962f656621535c1', class: backdropClasses }, hAsync("div", { key: '3af0487dc8c8831903cd7c22ffbf3e708b067ad7', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: '94e6205042ee91dac0823901cc97b79e93a515f2', class: "pds-modal__header" }, hAsync("slot", { key: 'ca04b575ccceabd431e3f5c57189f17f9aae6089', name: "header" })), hAsync("div", { key: 'f8327a261e70b622add1dd4ee21b5f8e8d91e603', class: "pds-modal-content" }, hAsync("slot", { key: 'a1a9c30d0f5479b0004ace4544e3d96ae87465be' })), hAsync("div", { key: 'af5fa59922047eeec7cbf0a0e1ee4b472b16079c', class: "pds-modal__footer" }, hAsync("slot", { key: '3c469bf94bb3a26dfd8046a5eda481f9d55edca1', name: "footer" })))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalCss$1(); }
@@ -5625,7 +5752,7 @@ class MockPdsModal {
     }; }
 }
 
-/* pds-icons v10.5.1, ES Modules */
+/* pds-icons v10.6.0, ES Modules */
 
 const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
 const calendarSimple = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M8 1a1 1 0 0 1 1 1v1h6V2a1 1 0 1 1 2 0v1.002c.476.003.891.013 1.252.042.562.046 1.079.145 1.564.392a4 4 0 0 1 1.748 1.748c.247.485.346 1.002.392 1.564C22 7.29 22 7.954 22 8.758v8.483c0 .805 0 1.47-.044 2.01-.046.563-.145 1.08-.392 1.565a4 4 0 0 1-1.748 1.748c-.485.247-1.002.346-1.564.392-.541.044-1.206.044-2.01.044H7.758c-.805 0-1.47 0-2.01-.044-.563-.046-1.08-.145-1.565-.392a4 4 0 0 1-1.748-1.748c-.247-.485-.346-1.002-.392-1.564C2 18.71 2 18.046 2 17.242V8.758c0-.805 0-1.47.044-2.01.046-.563.145-1.08.392-1.565a4 4 0 0 1 1.748-1.748c.485-.247 1.002-.346 1.564-.392.361-.03.777-.04 1.252-.042V2a1 1 0 0 1 1-1M7 5.002c-.446.003-.795.012-1.089.036-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C4 7.361 4 7.943 4 8.8V9h16v-.2c0-.857 0-1.439-.038-1.889-.035-.438-.1-.663-.18-.819a2 2 0 0 0-.874-.874c-.156-.08-.38-.145-.819-.18A15 15 0 0 0 17 5.002V6a1 1 0 1 1-2 0V5H9v1a1 1 0 1 1-2 0zM20 11H4v6.2c0 .857 0 1.439.038 1.889.035.438.1.663.18.819a2 2 0 0 0 .874.874c.156.08.38.145.819.18C6.361 21 6.943 21 7.8 21h8.4c.857 0 1.439 0 1.889-.038.438-.035.663-.1.819-.18a2 2 0 0 0 .874-.874c.08-.156.145-.38.18-.819.037-.45.038-1.032.038-1.889z'/></svg>";
@@ -6070,7 +6197,7 @@ const debounce = (func, wait = 0) => {
  * @param options.semanticMap - Optional mapping of semantic names to CSS variables
  * @returns Normalized color value or undefined for invalid inputs
  */
-const normalizeColorValue = (value, options) => {
+const normalizeColorValue$1 = (value, options) => {
     if (!value)
         return undefined;
     const trimmed = value.trim();
@@ -6114,7 +6241,7 @@ const setColor = (color, customColors) => {
     // Merge defaults with any custom overrides so defaults are preserved
     const semanticMap = Object.assign(Object.assign({}, defaultColors), (customColors || {}));
     // Use the shared normalizer so components accept semantic names, raw tokens, var(...), or literals
-    const resolved = normalizeColorValue(color, { semanticMap });
+    const resolved = normalizeColorValue$1(color, { semanticMap });
     // Ensure we never return an undefined style value; if unresolved, omit the property
     if (!resolved)
         return {};
@@ -6130,10 +6257,14 @@ const setColor = (color, customColors) => {
  * @param attributes - Attribute names and the values they should have
  */
 const setAttributesIfChanged = (el, attributes) => {
+    let wrote = false;
     Object.entries(attributes).forEach(([name, value]) => {
-        if (el.getAttribute(name) !== value)
+        if (el.getAttribute(name) !== value) {
             el.setAttribute(name, value);
+            wrote = true;
+        }
     });
+    return wrote;
 };
 /**
  * Puts back any of `expected`'s classes or style properties that are missing from `el`. It only
@@ -6146,10 +6277,9 @@ const restoreHostStyling = (el, { classes, styles }) => {
     const missing = classes.filter((name) => !el.classList.contains(name));
     if (missing.length > 0)
         el.classList.add(...missing);
-    Object.entries(styles).forEach(([name, value]) => {
-        if (value && el.style.getPropertyValue(name) === '')
-            el.style.setProperty(name, value);
-    });
+    const missingStyles = Object.entries(styles).filter(([name, value]) => value && el.style.getPropertyValue(name) === '');
+    missingStyles.forEach(([name, value]) => el.style.setProperty(name, value));
+    return missing.length > 0 || missingStyles.length > 0;
 };
 /**
  * Watches a component's own host and puts back what it rendered when something strips it. A DOM
@@ -6166,16 +6296,18 @@ const restoreHostStyling = (el, { classes, styles }) => {
 const keepHostStyling = (el, expected) => {
     if (typeof MutationObserver === 'undefined')
         return null;
-    const observer = new MutationObserver((records) => {
+    const tag = el.tagName.toLowerCase();
+    const seenStencilClasses = new Set();
+    const observer = new MutationObserver(limitRestores((records) => {
         const styling = expected();
         // A strip takes Stencil's own classes too: without `hydrated` Stencil hides the component, and
         // without its scope classes a scoped component's CSS stops matching. Put back only the ones that
         // were there, so this never runs ahead of Stencil. `keepPineHydrated` does the same for every
         // component, but the custom-elements build only runs it if the consumer calls it, so keep this.
         const stencilClasses = records
-            .filter((record) => record.attributeName === 'class' && record.oldValue != null)
-            .flatMap((record) => classNamesOf(record.oldValue).filter((name) => isStencilClass(el, name)));
-        restoreHostStyling(el, Object.assign(Object.assign({}, styling), { classes: [...styling.classes, ...stencilClasses] }));
+            .filter((record) => record.attributeName === 'class')
+            .flatMap((record) => stencilClassesOf(seenStencilClasses, el, record.oldValue));
+        let wrote = restoreHostStyling(el, Object.assign(Object.assign({}, styling), { classes: [...styling.classes, ...stencilClasses] }));
         // An attribute the component still renders comes back with the value it had, which is what
         // Stencil wrote (a boolean `true` lands as an empty value). One it stopped rendering stays
         // removed, since that was Stencil's own write.
@@ -6185,8 +6317,10 @@ const keepHostStyling = (el, expected) => {
             if (oldValue == null || rendered == null || rendered === false || el.hasAttribute(name))
                 return;
             el.setAttribute(name, oldValue);
+            wrote = true;
         });
-    });
+        return wrote;
+    }, `${tag}: stopped restoring its host, as another script keeps changing it. Use props instead.`, el, HOST_RESTORE));
     observer.observe(el, { attributes: true, attributeOldValue: true });
     return observer;
 };
@@ -6444,8 +6578,8 @@ class PdsBox {
             this.sizeXl == undefined ? 'pds-box' : ''}
     `;
         // Normalize so pds-box accepts --token, var(--token), or literals (no semantic names)
-        const normalizedBackground = normalizeColorValue(this.backgroundColor);
-        const normalizedBorder = normalizeColorValue(this.borderColor);
+        const normalizedBackground = normalizeColorValue$1(this.backgroundColor);
+        const normalizedBorder = normalizeColorValue$1(this.borderColor);
         const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (normalizedBackground && { '--color-background-box': normalizedBackground })), (normalizedBorder && { '--color-border-box': normalizedBorder })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth })), (this.flex && !['none', 'grow', 'shrink'].includes(this.flex) && { 'flex': this.flex }));
         this.hostKeeper.record(boxClasses, boxInlineStyles);
         return (hAsync(Host, { key: 'dc4d939daf38b24ecbfa0eb0a95ab67b97a85665', class: boxClasses, style: boxInlineStyles }));
@@ -9233,11 +9367,11 @@ class PdsChip {
         }
         // Custom properties rather than inline colors on the dot/icon, so a
         // consumer's ::part(dot) or ::part(icon) rule still wins over the prop.
-        const dotColor = normalizeColorValue(this.dotColor, { semanticMap: SENTIMENT_DOT_COLORS });
+        const dotColor = normalizeColorValue$1(this.dotColor, { semanticMap: SENTIMENT_DOT_COLORS });
         if (dotColor !== undefined) {
             styles['--pds-chip-dot-color'] = dotColor;
         }
-        const iconColor = normalizeColorValue(this.iconColor, { semanticMap: SENTIMENT_DOT_COLORS });
+        const iconColor = normalizeColorValue$1(this.iconColor, { semanticMap: SENTIMENT_DOT_COLORS });
         if (iconColor !== undefined) {
             styles['--pds-chip-icon-color'] = iconColor;
         }
@@ -10734,7 +10868,14 @@ const PINE_ICON_NAME$1 = /^[a-z0-9-]+$/i;
  * only ever passed to `pds-icon` as `name`.
  */
 function groupIconOf(optgroup) {
-    const icon = optgroup.getAttribute('data-icon');
+    return iconOf(optgroup);
+}
+/** An option's `data-icon` when it's a Pine icon name, or null; the same check as a group's. */
+function optionIconOf(option) {
+    return iconOf(option);
+}
+function iconOf(element) {
+    const icon = element.getAttribute('data-icon');
     return icon !== null && PINE_ICON_NAME$1.test(icon) ? icon : null;
 }
 /** An option is disabled by its own `disabled` or its optgroup's, as in a native select. */
@@ -10752,8 +10893,12 @@ function isGroupDisabled(group) {
  * Groups the combobox's filtered items for the panel: each optgroup becomes one entry holding its
  * options, and ungrouped options stay where they are. Indexes count options in list order, the
  * same as the inline listbox, so `data-option-index` means the same thing in every mode.
+ *
+ * `position`, when given, orders the entries instead: an ungrouped option or an optgroup it knows
+ * goes where it reports, and the rest keep their place after those. Options from the `options` prop
+ * use it, so a row the data lists between two groups is drawn between them.
  */
-function buildPanelEntries(items) {
+function buildPanelEntries(items, position) {
     const entries = [];
     const groups = new Map();
     let index = 0;
@@ -10775,7 +10920,14 @@ function buildPanelEntries(items) {
             entries.push({ kind: 'option', option, index: index++ });
         }
     });
-    return entries;
+    if (position === undefined)
+        return entries;
+    const at = (entry) => { var _a; return (_a = position(entry.kind === 'group' ? entry.group.optgroup : entry.option)) !== null && _a !== void 0 ? _a : Infinity; };
+    // Array.prototype.sort is stable, so entries with no position keep their order.
+    return entries.sort((a, b) => {
+        const [first, second] = [at(a), at(b)];
+        return first === second ? 0 : first < second ? -1 : 1;
+    });
 }
 /** The label of the optgroup an option sits in, or null for an ungrouped option. */
 function groupLabelOf(option) {
@@ -10983,7 +11135,7 @@ class FlyoutController {
     }
 }
 
-const pdsComboboxCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in>.pds-combobox__group-back{-webkit-animation:pds-combobox-drill-from-end var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill-from-end var(--pine-motion-duration-base) var(--pine-motion-easing-out)}.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill-from-start var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill-from-start var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill-from-end{from{opacity:0;-webkit-transform:translateX(var(--pine-dimension-sm));transform:translateX(var(--pine-dimension-sm))}}@keyframes pds-combobox-drill-from-end{from{opacity:0;-webkit-transform:translateX(var(--pine-dimension-sm));transform:translateX(var(--pine-dimension-sm))}}@-webkit-keyframes pds-combobox-drill-from-start{from{opacity:0;-webkit-transform:translateX(calc(var(--pine-dimension-sm) * -1));transform:translateX(calc(var(--pine-dimension-sm) * -1))}}@keyframes pds-combobox-drill-from-start{from{opacity:0;-webkit-transform:translateX(calc(var(--pine-dimension-sm) * -1));transform:translateX(calc(var(--pine-dimension-sm) * -1))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
+const pdsComboboxCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
 
 /**
  * @slot option - Option elements for the combobox dropdown
@@ -11191,6 +11343,17 @@ class PdsCombobox {
         this.highlightedGroup = null;
         /** The keys, not the pointer, moved the highlight last; the focus ring shows only then. */
         this.keyboardNavigating = false;
+        /**
+         * A drill-in group row the first arrow showed rather than moved past. `aria-activedescendant`
+         * already pointed at it, so the status region says it instead.
+         */
+        this.revealedGroupLabel = null;
+        /**
+         * The pointer in the panel can hover: a mouse or pen, not touch. Touch browsers keep a tapped row
+         * hovered, so group rows shade on `:hover` only for a pointer that can hover. Checked on the
+         * pointer itself rather than `(hover: hover)`, which a touch-first device with a trackpad fails.
+         */
+        this.pointerCanHover = true;
         /**
          * What's typed in the dropdown's own search field (`panelSearch`).
          */
@@ -11235,6 +11398,11 @@ class PdsCombobox {
         });
         /** The groups in the flyout panel's last render, so a row's index finds its optgroup. */
         this.renderedGroups = [];
+        /**
+         * Where each ungrouped option and optgroup built from the `options` prop came in the data, so
+         * the flyout and drill-in panels draw them in that order. Slotted markup is already in order.
+         */
+        this.panelPositions = new WeakMap();
         /** Room for a flyout was checked for this open. */
         this.flyoutRoomChecked = false;
         /** The highlighted option sits in a flyout that hasn't rendered yet; focus it after the next render. */
@@ -11248,10 +11416,14 @@ class PdsCombobox {
          * the list shows every option until the user types (then normal filtering applies).
          */
         this.expandFilterListWhileOpen = false;
+        this.onPanelPointer = (event) => {
+            const canHover = event.pointerType !== 'touch';
+            if (this.pointerCanHover !== canHover)
+                this.pointerCanHover = canHover;
+        };
         this.onDrillAnimationEnd = (event) => {
-            var _a;
             // Only the slide's own end: slotted consumer content can animate inside the list too.
-            if ((_a = event.animationName) === null || _a === void 0 ? void 0 : _a.startsWith('pds-combobox-drill'))
+            if (event.animationName === 'pds-combobox-drill')
                 this.drillDirection = null;
         };
         /** `<label for>` only works on the input trigger; for a div trigger a click on the label focuses it. */
@@ -11451,6 +11623,9 @@ class PdsCombobox {
         };
         // Handler for button trigger click
         this.onButtonTriggerClick = () => {
+            // The button and chip triggers are divs, so a click reaches them even while disabled.
+            if (this.disabled)
+                return;
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
                 this.prepareExpandFilterListOnOpen();
@@ -11470,6 +11645,13 @@ class PdsCombobox {
         };
         // Handler for button trigger keyboard events
         this.onButtonTriggerKeyDown = (e) => {
+            // Disabled takes it out of the tab order, but setFocus() or a click can still focus it.
+            if (this.disabled) {
+                // Keep Space from scrolling the page, as on a native disabled button.
+                if (e.key === ' ')
+                    e.preventDefault();
+                return;
+            }
             // Escape closes an open group before the dropdown. Other keys reach the tree through handleKeyDown.
             if (this.isOpen && e.key === 'Escape' && this.handleGroupedPanelKey(e))
                 return;
@@ -11490,8 +11672,9 @@ class PdsCombobox {
                 }, 0);
             }
             else if (e.key === 'Escape') {
-                e.preventDefault();
+                // Only an open dropdown claims Escape; a closed one leaves it to a modal or popover around it.
                 if (this.isOpen) {
+                    e.preventDefault();
                     this.isOpen = false;
                     this.highlightedIndex = -1;
                     this.clearExpandFilterList();
@@ -11670,6 +11853,31 @@ class PdsCombobox {
             this.focusPanel(panelFocusEl);
         }
     }
+    /**
+     * Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
+     * panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
+     * the list's edge, `scrollIntoView` also scrolls the list horizontally to reach it, which eats most
+     * of the slide. There it keeps clear of the sticky row back, through the scroll padding set for it,
+     * but doesn't scroll the page or a scrolling ancestor.
+     */
+    scrollIntoViewNearest(el, smooth) {
+        const behavior = smooth ? 'smooth' : 'auto';
+        if (!this.showsGroupedPanel || this.effectiveGroupDisplay !== 'drill-in') {
+            el.scrollIntoView({ block: 'nearest', behavior });
+            return;
+        }
+        const list = this.usesPanelSearch ? this.panelTreeEl : this.listboxEl;
+        if (!list)
+            return;
+        const offset = el.getBoundingClientRect().top - list.getBoundingClientRect().top - list.clientTop;
+        // The padding keeps rows clear of the sticky row back; the row back itself doesn't need it.
+        const padding = el.classList.contains('pds-combobox__group-back-trigger') ? 0 : parseFloat(list.style.scrollPaddingBlockStart) || 0;
+        const top = list.scrollTop + offset - padding;
+        const bottom = list.scrollTop + offset + el.offsetHeight - list.clientHeight;
+        const target = top < list.scrollTop ? top : bottom > list.scrollTop ? bottom : null;
+        if (target !== null)
+            list.scrollTo({ top: target, behavior });
+    }
     focusPanel(el) {
         var _a, _b;
         this.panelFocusEl = el;
@@ -11690,6 +11898,7 @@ class PdsCombobox {
     }
     openGroupChanged(next, previous) {
         this.handPanelFocusToList();
+        this.revealedGroupLabel = null;
         // Only moves between the drill-in panel's views slide; search results don't.
         if (!this.isOpen || this.effectiveGroupDisplay !== 'drill-in' || !this.showsGroupedPanel)
             return;
@@ -11710,8 +11919,25 @@ class PdsCombobox {
         if (this.isOpen && this.hidesPanelSearch && this.panelTreeEl)
             this.focusPanel(this.panelTreeEl);
     }
+    disabledChanged(disabled) {
+        var _a, _b, _c, _d, _e;
+        if (!disabled || !this.isOpen)
+            return;
+        const shadowActive = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) !== null && _b !== void 0 ? _b : null;
+        const focusInDropdown = !!((_d = (_c = this.portalEl) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.activeElement) || (!!shadowActive && !!((_e = this.listboxEl) === null || _e === void 0 ? void 0 : _e.contains(shadowActive)));
+        this.isOpen = false;
+        this.highlightedIndex = -1;
+        this.isArrowKeyNavigationMode = false;
+        this.clearExpandFilterList();
+        this.updateAriaActiveDescendant();
+        // Closing removes the search field or option that held focus. A button or chip trigger can still
+        // take it (aria-disabled), so focus doesn't fall to the page; a disabled input can't, as natively.
+        if (focusInDropdown && this.trigger !== 'input')
+            this.restoreFocusToTrigger();
+    }
     isOpenChanged(isOpen) {
         if (!isOpen) {
+            this.revealedGroupLabel = null;
             this.drillDirection = null;
             this.openGroup = null;
             this.highlightedGroup = null;
@@ -11990,20 +12216,25 @@ class PdsCombobox {
         // slotted markup would be, so grouping, filtering and labels work the same either way. Each
         // group is listed where it first appears with all of its options, even when the data
         // interleaves groups, so an option never renders under another group's label. Ungrouped
-        // options come first, so none reads as part of the group above it.
+        // options come first, so none reads as part of the group above it. The flyout and drill-in
+        // panels draw groups as rows, where that can't happen, so they keep the data's order instead.
         const asyncOptions = this.options || this.internalOptions;
         const groups = new Map();
         const ungrouped = [];
         const groupEntries = [];
-        asyncOptions.forEach(opt => {
+        this.panelPositions = new WeakMap();
+        asyncOptions.forEach((opt, position) => {
             const optionEl = document.createElement('option');
             optionEl.value = String(opt.id);
             optionEl.textContent = opt.text;
             if (opt.disabled === true)
                 optionEl.setAttribute('disabled', '');
             // Only strings group an option or name an icon; anything else from JS is ignored, not coerced.
+            if (typeof opt.icon === 'string' && opt.icon !== '')
+                optionEl.setAttribute('data-icon', opt.icon);
             if (typeof opt.group !== 'string' || opt.group === '') {
                 ungrouped.push(optionEl);
+                this.panelPositions.set(optionEl, position);
                 return;
             }
             let optgroup = groups.get(opt.group);
@@ -12012,6 +12243,7 @@ class PdsCombobox {
                 optgroup.label = opt.group;
                 groups.set(opt.group, optgroup);
                 groupEntries.push(optgroup);
+                this.panelPositions.set(optgroup, position);
             }
             if (!optgroup.hasAttribute('data-icon') && typeof opt.groupIcon === 'string' && opt.groupIcon !== '') {
                 optgroup.setAttribute('data-icon', opt.groupIcon);
@@ -12476,6 +12708,7 @@ class PdsCombobox {
     handleGroupedPanelKey(e) {
         if (!this.showsGroupedPanel)
             return false;
+        const highlightShown = this.keyboardNavigating;
         this.keyboardNavigating = true;
         // In the input trigger, Left and Right still move the caret through typed text, and Space,
         // Home and End edit it, as they do in the panel's search field.
@@ -12485,23 +12718,32 @@ class PdsCombobox {
             if (e.key === ' ' || e.key === 'Home' || e.key === 'End')
                 return false;
         }
-        const entries = buildPanelEntries(this.filteredItems);
+        const entries = this.panelEntries();
         const drilledIn = this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null;
         const current = this.currentPanelItem();
         const column = panelColumn(entries, this.openGroup, current, drilledIn);
         if (column.length === 0)
             return false;
         const position = current === null ? -1 : column.indexOf(current);
+        // Drill-in doesn't shade a group row the pointer or a click-open highlighted, so the first Up or
+        // Down shows that row rather than moving past one the user never saw.
+        const unseenRow = !highlightShown && this.effectiveGroupDisplay === 'drill-in' && current !== null && typeof current !== 'number' && current !== this.openGroup;
         const moveTo = (to) => {
             e.preventDefault();
             this.highlightPanelItem(column[Math.max(0, Math.min(column.length - 1, to))]);
+            this.revealedGroupLabel = null;
+            return true;
+        };
+        const reveal = () => {
+            e.preventDefault();
+            this.revealedGroupLabel = current.label;
             return true;
         };
         switch (e.key) {
             case 'ArrowDown':
-                return moveTo(position < 0 ? 0 : position + 1);
+                return unseenRow ? reveal() : moveTo(position < 0 ? 0 : position + 1);
             case 'ArrowUp':
-                return moveTo(position < 0 ? column.length - 1 : position - 1);
+                return unseenRow ? reveal() : moveTo(position < 0 ? column.length - 1 : position - 1);
             case 'Home':
                 return moveTo(0);
             case 'End':
@@ -12634,7 +12876,7 @@ class PdsCombobox {
         // In the grouped panel, the first row with something to choose: a group stays closed until
         // it's opened.
         if (this.showsGroupedPanel) {
-            const first = buildPanelEntries(this.filteredItems).find(entry => entry.kind === 'group' ? !isGroupDisabled(entry.group) : !isOptionDisabled(entry.option));
+            const first = this.panelEntries().find(entry => entry.kind === 'group' ? !isGroupDisabled(entry.group) : !isOptionDisabled(entry.option));
             this.highlightedIndex = (first === null || first === void 0 ? void 0 : first.kind) === 'option' ? first.index : -1;
             this.highlightedGroup = (first === null || first === void 0 ? void 0 : first.kind) === 'group' ? first.group.optgroup : null;
             return;
@@ -12699,8 +12941,13 @@ class PdsCombobox {
             }
             // Matched by id, not a selector: componentId is consumer text and may not be selector-safe.
             const id = this.groupDomId(groupRow);
-            (_a = Array.from(this.listboxEl.querySelectorAll('[role="treeitem"]'))
-                .find(row => row.id === id)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+            const row = Array.from(this.listboxEl.querySelectorAll('[role="treeitem"]'))
+                .find(item => item.id === id);
+            // The row's trigger, not its item: the row back's item wraps the group's options, and showing
+            // all of a group taller than the list would scroll the row back itself out of view.
+            const trigger = Array.from((_a = row === null || row === void 0 ? void 0 : row.children) !== null && _a !== void 0 ? _a : []).find(child => child.classList.contains('pds-combobox__group-row-trigger'));
+            if (trigger)
+                this.scrollIntoViewNearest(trigger, false);
             this.updateAriaActiveDescendant();
             return;
         }
@@ -12751,7 +12998,7 @@ class PdsCombobox {
                 this.flyout.reveal(flyout, currentOption);
             }
             else {
-                currentOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                this.scrollIntoViewNearest(currentOption, true);
             }
         }
         // Always update aria-activedescendant on the trigger element
@@ -12848,6 +13095,8 @@ class PdsCombobox {
         this.highlightedIndex = -1;
         this.highlightedGroup = group;
         this.keyboardNavigating = false;
+        // So revealing this row again later is announced again.
+        this.revealedGroupLabel = null;
     }
     // Get the label of the selected option
     get selectedLabel() {
@@ -13003,7 +13252,8 @@ class PdsCombobox {
                 'pds-combobox__listbox--grouped': this.groupDisplay !== 'inline',
                 'pds-combobox__listbox--drill-in': this.drillDirection === 'in',
                 'pds-combobox__listbox--drill-out': this.drillDirection === 'out',
-            }, onAnimationEnd: this.onDrillAnimationEnd, role: this.showsGroupedPanel ? 'tree' : 'listbox', id: this.listboxId, "aria-label": this.label || 'Options', "aria-multiselectable": "false",
+                'pds-combobox__listbox--pointer-hover': this.pointerCanHover,
+            }, onAnimationEnd: this.onDrillAnimationEnd, onPointerMove: this.onPanelPointer, onPointerDown: this.onPanelPointer, role: this.showsGroupedPanel ? 'tree' : 'listbox', id: this.listboxId, "aria-label": this.label || 'Options', "aria-multiselectable": "false",
             // Focusable but out of the tab order with panel search, so it can take focus when a
             // drilled-in group hides the field. Dropping it while focused would blur the list and close.
             tabIndex: withSearch ? -1 : undefined, "aria-activedescendant": listTakesFocus ? this.activeDescendantId : undefined, onKeyDown: withSearch ? this.onPanelTreeKeyDown : undefined, ref: el => {
@@ -13169,7 +13419,21 @@ class PdsCombobox {
                 'pds-combobox__option--layout': isLayout,
                 'pds-combobox__option--chip': isChip,
                 'pds-combobox__option--disabled': isDisabled,
-            }, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.getOptionLabel(option)), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
+            }, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
+    }
+    /** An option's text, after its `data-icon` when it has one. */
+    renderOptionLabel(option) {
+        const icon = optionIconOf(option);
+        if (icon === null)
+            return this.getOptionLabel(option);
+        return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), this.getOptionLabel(option)));
+    }
+    /** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
+    panelEntries() {
+        // Slotted markup is already in order; only options from data record positions.
+        if (this.options === undefined && !this.asyncUrl)
+            return buildPanelEntries(this.filteredItems);
+        return buildPanelEntries(this.filteredItems, element => this.panelPositions.get(element));
     }
     /**
      * `flyout`: one row per group, its options in a flyout beside it. `drill-in`: the same rows, and
@@ -13177,7 +13441,7 @@ class PdsCombobox {
      * it's a tree: the rows and ungrouped options are level 1, a group's options level 2.
      */
     renderGroupedPanel() {
-        const entries = buildPanelEntries(this.filteredItems);
+        const entries = this.panelEntries();
         const setsize = entries.length;
         if (this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null) {
             const position = entries.findIndex(entry => entry.kind === 'group' && entry.group.optgroup === this.openGroup);
@@ -13208,22 +13472,26 @@ class PdsCombobox {
         return (hAsync("li", { key: "group-back", id: id, class: {
                 'pds-combobox__group-back': true,
                 'pds-combobox__group-back--disabled': disabled,
-                'pds-combobox__group-back--highlighted': this.highlightedGroupRow === group.optgroup,
+                // As the group rows: shaded for the keys, and by `:hover` for the pointer.
+                'pds-combobox__group-back--highlighted': this.keyboardNavigating && this.highlightedGroupRow === group.optgroup,
                 'pds-combobox__group-back--keyboard': this.keyboardNavigating && this.highlightedGroupRow === group.optgroup,
             }, role: "treeitem", "aria-expanded": "true", "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": `${id}-label` }, hAsync("div", { class: "pds-combobox__group-row-trigger pds-combobox__group-back-trigger", onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupBackMouseEnter, onClick: this.onGroupBackClick }, hAsync("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, hAsync("pds-icon", { name: "caret-left", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" }), hAsync("span", { class: "visually-hidden" }, this.drillInBackLabel, ": "), group.label)), hAsync("ul", { class: "pds-combobox__drill-in-options", role: "group", "aria-label": group.label }, this.renderGroupOptions(group))));
     }
     renderGroupRow(group, groupIndex, { posinset, setsize }) {
         const flyout = this.effectiveGroupDisplay === 'flyout';
         const isOpen = flyout && this.openGroup === group.optgroup;
-        const hasSelection = group.options.some(({ option }) => this.isOptionSelected(option));
+        // Drill-in shades a group row only for the keys: not for the group holding the selection, or the
+        // row the pointer or a click-open left highlighted, which read as picked. `:hover` covers the pointer.
+        const hasSelection = flyout && group.options.some(({ option }) => this.isOptionSelected(option));
+        const isCurrent = this.highlightedGroupRow === group.optgroup;
         const disabled = isGroupDisabled(group);
         const id = this.groupDomId(group.optgroup);
         return (hAsync("li", { key: `group-${groupIndex}`, id: id, class: {
                 'pds-combobox__group-row': true,
                 'pds-combobox__group-row--open': isOpen,
                 'pds-combobox__group-row--has-selection': hasSelection,
-                'pds-combobox__group-row--highlighted': this.highlightedGroupRow === group.optgroup,
-                'pds-combobox__group-row--keyboard': this.keyboardNavigating && this.highlightedGroupRow === group.optgroup,
+                'pds-combobox__group-row--highlighted': isCurrent && (flyout || this.keyboardNavigating),
+                'pds-combobox__group-row--keyboard': isCurrent && this.keyboardNavigating,
                 'pds-combobox__group-row--disabled': disabled,
             }, role: "treeitem", "aria-expanded": isOpen ? 'true' : 'false', "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": `${id}-label`, "data-group-index": groupIndex, onMouseEnter: flyout ? this.onGroupRowMouseEnter : undefined, onMouseLeave: flyout ? this.onGroupRowMouseLeave : undefined }, hAsync("div", { class: "pds-combobox__group-row-trigger", "data-group-index": groupIndex, onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupRowTriggerMouseEnter, onClick: this.onGroupRowClick }, hAsync("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, group.icon !== null && (
         // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
@@ -13239,7 +13507,23 @@ class PdsCombobox {
     }
     // Helper method to render default text content
     renderDefaultContent() {
-        return (hAsync("span", { class: { 'pds-combobox__button-trigger-label': true, 'pds-combobox__button-trigger-label--placeholder': !this.selectedLabel } }, this.selectedLabel || this.placeholder));
+        const icon = this.selectedIcon;
+        return (hAsync("span", { class: {
+                'pds-combobox__button-trigger-label': true,
+                'pds-combobox__button-trigger-label--placeholder': !this.selectedLabel,
+                'pds-combobox__button-trigger-label--with-icon': icon !== null,
+            } }, icon !== null && (
+        // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
+        hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.selectedLabel || this.placeholder));
+    }
+    /** The selection's icon for the button trigger: the option's own, or else its group's. */
+    get selectedIcon() {
+        var _a;
+        const option = this.selectedOption;
+        if (!option)
+            return null;
+        const optgroup = parentOptgroupOf(option);
+        return (_a = optionIconOf(option)) !== null && _a !== void 0 ? _a : (optgroup !== null ? groupIconOf(optgroup) : null);
     }
     // Helper method to check if we should show layout content
     shouldShowLayoutContent() {
@@ -13357,6 +13641,7 @@ class PdsCombobox {
         ];
     }
     render() {
+        var _a;
         const triggerClass = [
             'pds-combobox__button-trigger',
             `pds-combobox__button-trigger--${this.triggerVariant}`,
@@ -13364,13 +13649,18 @@ class PdsCombobox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (hAsync(Host, { key: '960558b36010eb059c98acc37439656f2f7ff657', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'b0abcd004aa98b630819cfdd0cfb85ebde2ee2f8', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: 'ae42f12fe4d0c498c99c0baae7673ff90e1be576', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
+        return (hAsync(Host, { key: 'c3bda161c67bab75f306c7f38435d279e5a88756', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '92b3f83c14a7296b3b2671eaef538a15743f695f', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '4a2dba09dd6db9893e21346b861b4c6cb891112b', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
             }, class: {
                 'pds-combobox__input': true,
                 'pds-combobox__input--invalid': this.isInvalid(),
-            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: 'ab0dba6db0a989cb2e41632cb8412062f96c38cd', style: { display: 'none' } }, hAsync("slot", { key: '337461c5ead6dda1d04911fd4b5a23b1dc6b9726', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && (hAsync("span", { key: 'd8d82d69381548b2e3266d9109c98ab0397b22e0', class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : '')))));
+            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: 'b8d358339bb26037b6c3c464bd4e13fe978f7857', style: { display: 'none' } }, hAsync("slot", { key: '4aa4c2b8f2b57e13d1e958cc745c61e39e800529', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
+            hAsync("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
+            // Its own region: sharing one, revealing a row then opening it would leave the text the
+            // same, and opening the group would go unannounced.
+            hAsync("span", { key: "reveal-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen ? (_a = this.revealedGroupLabel) !== null && _a !== void 0 ? _a : '' : ''),
+        ])));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -13384,6 +13674,9 @@ class PdsCombobox {
         "flyoutFallback": [{
                 "flyoutFallbackChanged": 0
             }],
+        "disabled": [{
+                "disabledChanged": 0
+            }],
         "isOpen": [{
                 "isOpenChanged": 0
             }],
@@ -13453,6 +13746,8 @@ class PdsCombobox {
             "drillDirection": [32],
             "highlightedGroup": [32],
             "keyboardNavigating": [32],
+            "revealedGroupLabel": [32],
+            "pointerCanHover": [32],
             "panelQuery": [32],
             "flyoutFallback": [32],
             "selectedOption": [32],
@@ -13500,7 +13795,7 @@ class PdsContainer {
             hostStyle['--pine-container-max-width'] = customSize;
         if (!this.centered)
             hostStyle['margin-inline'] = '0';
-        return (hAsync(Host, { key: '8a01369c4d1817dd083b1ac714ff7c02920f817e', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, hAsync(Tag, { key: '7428cb0040896dc11004065cf91ae9d3c3a99c49', part: "container" }, hAsync("slot", { key: '5a5b5bbc87c03afc23f1c9a0523fced8c0795efb' }))));
+        return (hAsync(Host, { key: '8a9b10b5d0e348b73f8a6bd7933083c596df10d8', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, hAsync(Tag, { key: '55fb22be49377c4cccf08381e7cf954a3f097d08', part: "container" }, hAsync("slot", { key: '4cd9c4fa74a2c6a056e076ab67a0279c395b5c79' }))));
     }
     static get style() { return pdsContainerCss(); }
     static get cmpMeta() { return {
@@ -13620,7 +13915,7 @@ class PdsCopytext {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (hAsync(Host, { key: '1c43941f808f58a53f1c445e0f5693985c793c35', class: hostClass, id: this.componentId }, hAsync("pds-button", { key: 'd771d2587a11f1b27bded17b5df5e649ea93cd90', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '0d4fd25220cac636b328fd1ee1aba40d07296265', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: '832a044c10843bb90833301cc3f3ea1f7b755f42', "aria-hidden": "true", icon: copy, size: "16px" }))));
+        return (hAsync(Host, { key: 'd9bd40af6e435d606841cb551341eab33c5983b7', class: hostClass, id: this.componentId }, hAsync("pds-button", { key: '7a42b32678fccb2cbe0d7a68a5da6d5fe5276a4a', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '732db283b8075ebad8e1daff70692bac2978aade', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: 'ebfd34b9b5a47b78783302ce97d752af09e3f3e3', "aria-hidden": "true", icon: copy, size: "16px" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15622,14 +15917,14 @@ class PdsDatepicker {
     }
     render() {
         const locale = this.resolvedLocale;
-        return (hAsync(Host, { key: 'a761f0ca6eeedcac3e4bd90760aa9781cd37dcdc', class: { 'pds-datepicker--range': this.range, 'pds-datepicker--time': this.timePicker }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, hAsync("pds-input", { key: '2eb04f9fd4e2f7a2437145d250c629c2cc8a0bf6', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (hAsync("button", {
+        return (hAsync(Host, { key: '82ffd88b7741a90edc28b66a7384178eb2a9a86c', class: { 'pds-datepicker--range': this.range, 'pds-datepicker--time': this.timePicker }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, hAsync("pds-input", { key: 'f2b9aad64d1fe8d94327cc3d4f87cd6904eb3076', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (hAsync("button", {
             // Keyed, as is the calendar button: when Clear appears after a pick, the focused
             // calendar button must stay that button rather than be reused as Clear.
             key: "clear", slot: "suffix", type: "button", class: "pds-datepicker__clear", ref: (el) => (this.clearEl = el), "aria-label": this.label ? `${this.clearLabel} ${this.label}` : this.clearLabel,
             // Out of the tab order, as a native search field's clear button is: Tab from a field
             // just emptied would land on it as the change removes it, dropping focus to the page.
             tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
-        }, hAsync("pds-icon", { key: '98c325fbba8ea78b2d409bc77099db3206738508', icon: remove, "aria-hidden": "true" }))), hAsync("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, hAsync("pds-icon", { key: 'cb8483febe1b485058b7bb4271b749981a7747a1', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
+        }, hAsync("pds-icon", { key: 'f2c784e9d6577d4900b7641ee58aa43f5922fc75', icon: remove, "aria-hidden": "true" }))), hAsync("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, hAsync("pds-icon", { key: '98b2e773240c8ea2bbd5a1acfa3c9ba74cb7917b', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -15771,7 +16066,7 @@ class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: '072cc8552bd33c4a00d216f15a5a848cfc97fd92', id: this.componentId }, this.hasLabel ? (hAsync("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, hAsync("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (hAsync("hr", { class: this.classNames() }))));
+        return (hAsync(Host, { key: 'ef2a5ee85e8f37036be5b8df490683636ffb66f0', id: this.componentId }, this.hasLabel ? (hAsync("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, hAsync("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (hAsync("hr", { class: this.classNames() }))));
     }
     static get style() { return pdsDividerCss(); }
     static get cmpMeta() { return {
@@ -15815,22 +16110,24 @@ function unwrapReconnectedContent(container, selector, contentSelector) {
     }
 }
 
-const pdsDrawerCss = () => `.pds-drawer__modal>.pds-modal__backdrop{-ms-flex-align:stretch;align-items:stretch;background-color:transparent;pointer-events:none}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-drawer__modal>.pds-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.pds-drawer__modal>.pds-modal__backdrop[aria-modal]::before{content:none}.pds-drawer__modal>.pds-modal__backdrop>.pds-modal{border-radius:0;height:100%;margin:0;max-height:100%;max-width:100%;pointer-events:auto;width:var(--pds-drawer-width, 500px)}.pds-drawer{display:contents}.pds-drawer.pds-drawer--end .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:end;justify-content:flex-end}.pds-drawer.pds-drawer--start .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:start;justify-content:flex-start}.pds-drawer.pds-drawer--sm{--pds-drawer-width:360px}.pds-drawer.pds-drawer--md{--pds-drawer-width:500px}`;
+const pdsDrawerCss = () => `.pds-drawer__modal>.pds-modal__backdrop{-ms-flex-align:stretch;align-items:stretch}.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{background-color:transparent;pointer-events:none}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.pds-drawer__modal>.pds-modal__backdrop[aria-modal]::before{content:none}.pds-drawer__modal>.pds-modal__backdrop>.pds-modal{border-radius:0;height:100%;margin:0;max-height:100%;max-width:100%;pointer-events:auto;width:var(--pds-drawer-width, 500px)}.pds-drawer{display:contents}.pds-drawer.pds-drawer--end .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:end;justify-content:flex-end}.pds-drawer.pds-drawer--start .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:start;justify-content:flex-start}.pds-drawer.pds-drawer--sm{--pds-drawer-width:360px}.pds-drawer.pds-drawer--md{--pds-drawer-width:500px}`;
 
-// Known selectors for content Pine components portal to document.body rather
-// than rendering in place — pds-popover, pds-tooltip, pds-combobox's dropdown.
+// Known selectors for content Pine components portal out of place rather than
+// rendering where they are — pds-tooltip and pds-combobox's dropdown in
+// document.body, pds-popover in the body or the open dialog it's in.
 // A pointerdown landing on one of these is not "outside" the drawer in the
 // sense light dismiss cares about: it belongs to an overlay something inside
 // the drawer opened, even though it is not a DOM descendant of the drawer.
 const PORTALED_OVERLAY_SELECTOR = '.pds-popover, .pds-tooltip, .pds-combobox-dropdown-portal';
 /**
- * A non-modal side panel composed from `pds-modal`.
+ * A side panel composed from `pds-modal`, non-modal by default.
  *
- * Unlike `pds-modal`, the page stays interactive while a drawer is open: no
- * dimming, no blur, no scroll lock, no click blocking. `pds-drawer` renders a
- * `pds-modal` internally with `disableTopLayer` always on and its backdrop
- * suppressed, and adds the edge, width and dismiss behavior a side panel
- * needs on top. It does not reimplement focus, Escape or dialog semantics —
+ * By default, unlike `pds-modal`, the page stays interactive while a drawer
+ * is open: no dimming, no blur, no scroll lock, no click blocking.
+ * `pds-drawer` renders a `pds-modal` internally with `disableTopLayer` on and
+ * its backdrop suppressed, and adds the edge, width and dismiss behavior a
+ * side panel needs on top. With `modal`, it opens that `pds-modal` in the top
+ * layer instead and keeps its backdrop. It does not reimplement focus, Escape or dialog semantics —
  * those come from `pds-modal` unchanged.
  * @lightDom renders-markup
  */
@@ -15861,8 +16158,18 @@ class PdsDrawer {
          */
         this.scrollable = true;
         /**
-         * Whether the drawer can be dismissed with a pointerdown outside it.
-         * Replaces `pds-modal`'s `backdropDismiss` — there is no backdrop to click.
+         * Whether the drawer is modal. A modal drawer dims the page behind it with a
+         * backdrop, makes the page inert, and keeps focus inside the drawer, like
+         * `pds-modal`. Use it for a task the page should wait on. Leave it off for a
+         * panel people work alongside the page. Read when the drawer opens; changing
+         * it while the drawer is open is not supported.
+         * @default false
+         */
+        this.modal = false;
+        /**
+         * Whether the drawer can be dismissed with a pointerdown outside it (in a
+         * `modal` drawer, a click on its backdrop).
+         * Replaces `pds-modal`'s `backdropDismiss`.
          * This also gates Escape, matching how `backdropDismiss` gates Escape on
          * `pds-modal` today: setting this to `false` means the close button is the
          * only way out.
@@ -15881,7 +16188,8 @@ class PdsDrawer {
          * background event while the user is mid-task elsewhere on the page —
          * moving focus there would interrupt them, and the page stays live under
          * a non-modal drawer, so it is a genuine data-entry risk, not just an
-         * annoyance.
+         * annoyance. A `modal` drawer ignores `none`: the page behind it is inert,
+         * so focus starts in the drawer.
          * @default 'auto'
          */
         this.initialFocus = 'auto';
@@ -15927,7 +16235,8 @@ class PdsDrawer {
     // page underneath stays genuinely clickable, which means a click there
     // never reaches pds-modal's backdrop element at all.
     handleOutsidePointerDown(e) {
-        if (!this.lightDismiss || !this.open)
+        // A modal drawer's backdrop takes the click instead, through pds-modal.
+        if (this.modal || !this.lightDismiss || !this.open)
             return;
         const target = e.target;
         if (!target)
@@ -15937,7 +16246,7 @@ class PdsDrawer {
         if (target.closest(PORTALED_OVERLAY_SELECTOR))
             return;
         // A datepicker's portaled calendar counts as inside only when its datepicker is in the drawer,
-        // or in an overlay portaled from it (a pds-popover in the drawer puts its content on the body).
+        // or in an overlay portaled from it (a pds-popover in the drawer puts its content beside it).
         const calendar = target.closest('.pds-datepicker-calendar-portal');
         const owner = calendar === null || calendar === void 0 ? void 0 : calendar.pdsDatepicker;
         if (owner && (containsComposed$1(this.el, owner) || closest$1(PORTALED_OVERLAY_SELECTOR, owner)))
@@ -15953,11 +16262,11 @@ class PdsDrawer {
         this.open = false;
     }
     render() {
-        return (hAsync(Host, { key: '166bc90b45d29f64f11b6840e7c6ae798bf14261', class: {
+        return (hAsync(Host, { key: '287bf043c991209488eb1b617031acffb59ff9af', class: {
                 'pds-drawer': true,
                 [`pds-drawer--${this.side}`]: true,
                 [`pds-drawer--${this.size}`]: true,
-            } }, hAsync("pds-modal", { key: '2faa1cee1f34a85e9df0cabb8e78803982414982', class: "pds-drawer__modal", ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: true, backdropDismiss: this.lightDismiss, disableInitialFocus: this.initialFocus === 'none' }, hAsync("slot", { key: '93968e612756c398f6d1faf9383f6c88c420da28' }))));
+            } }, hAsync("pds-modal", { key: 'cd86fb552353f5cc12fb36fc956033432a91847c', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, hAsync("slot", { key: '56bbe9b5c26b10b07c0f503ba147899a57a5de85' }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsDrawerCss(); }
@@ -15970,6 +16279,7 @@ class PdsDrawer {
             "side": [1],
             "size": [1],
             "scrollable": [4],
+            "modal": [4],
             "lightDismiss": [4, "light-dismiss"],
             "initialFocus": [1, "initial-focus"]
         },
@@ -15997,7 +16307,7 @@ class PdsDrawerContent {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
     }
     render() {
-        return (hAsync("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, hAsync("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
+        return (hAsync("div", { key: 'f307939ab0a94f6a0d8a3675c658def0ded68b98', class: "pds-drawer-content" }, hAsync("slot", { key: 'dadac08ac15bb8ded98ea982511e2d57bea9bdca' })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsDrawerContentCss(); }
@@ -16025,7 +16335,7 @@ class PdsDrawerFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
     }
     render() {
-        return (hAsync("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, hAsync("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
+        return (hAsync("footer", { key: 'b58c68d88b467e8baa3682d16f97076d06ea2414', class: "pds-drawer__footer" }, hAsync("slot", { key: 'ff2306202c14029b397d40b5bb3d672a8aa571c0' })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsDrawerFooterCss(); }
@@ -16053,7 +16363,7 @@ class PdsDrawerHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
     }
     render() {
-        return (hAsync("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, hAsync("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
+        return (hAsync("header", { key: '280e6ca734317d5733e4c595431c8070eff13d58', class: "pds-drawer__header" }, hAsync("slot", { key: 'cc6af6084600c4dc60d7bd99e040376abdf5ffe3' })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsDrawerHeaderCss(); }
@@ -16067,9 +16377,10 @@ class PdsDrawerHeader {
     }; }
 }
 
-const pdsDropdownMenuCss = () => `:host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-xs);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:fixed;z-index:var(--pine-z-index-overlay)}:host-context([data-theme=dark]) .pds-dropdown-menu--panel{border:var(--pine-border)}::slotted(a),::slotted(button){-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs) !important;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text) !important;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium) !important;gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px) !important;padding:var(--pine-dimension-xs) !important;text-align:start;text-decoration:none !important;width:calc(100% - (var(--pine-border-width) + 2px) * 2)}::slotted(.destructive){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]),::slotted([disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.5;pointer-events:none}`;
+const pdsDropdownMenuCss = () => `:host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-xs);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:fixed;z-index:var(--pine-z-index-overlay)}:host-context([data-theme=dark]) .pds-dropdown-menu--panel{border:var(--pine-border)}.pds-dropdown-menu__header{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border);-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs);margin-inline:calc(var(--pine-dimension-xs) * -1);-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs);padding-inline:calc(var(--pine-dimension-xs) * 2 + var(--pine-border-width) + 2px);text-align:start}.pds-dropdown-menu__items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}::slotted(a:not([slot=header])),::slotted(button:not([slot=header])){-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs) !important;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text) !important;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium) !important;gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px) !important;padding:var(--pine-dimension-xs) !important;text-align:start;text-decoration:none !important;width:calc(100% - (var(--pine-border-width) + 2px) * 2)}::slotted(.destructive:not([slot=header])){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]:not([slot=header])),::slotted([disabled]:not([disabled=false]):not([slot=header])){cursor:not-allowed;opacity:0.5;pointer-events:none}`;
 
 /**
+ * @slot header - Non-interactive content displayed above the menu items inside the dropdown panel. It renders outside the menu role, so assistive tech reads it as plain content rather than as a menu item.
  * @part menu-panel - Exposes the dropdown menu container for styling.
  */
 class PdsDropdownMenu {
@@ -16080,6 +16391,7 @@ class PdsDropdownMenu {
         this.cleanupAutoUpdate = null;
         this.triggerObserver = null;
         this.currentFocusIndex = -1;
+        this.hasHeader = false;
         /**
          * The placement of the dropdown panel relative to the trigger.
          */
@@ -16098,8 +16410,11 @@ class PdsDropdownMenu {
         // Writes the trigger's ARIA from the menu's state, so the observer's own callback doesn't loop.
         this.syncTriggerAria = () => {
             if (!this.triggerEl)
-                return;
-            setAttributesIfChanged(this.triggerEl, { 'aria-haspopup': 'menu', 'aria-expanded': String(this.isOpen) });
+                return false;
+            return setAttributesIfChanged(this.triggerEl, { 'aria-haspopup': 'menu', 'aria-expanded': String(this.isOpen) });
+        };
+        this.handleHeaderSlotChange = (event) => {
+            this.hasHeader = event.target.assignedElements().length > 0;
         };
         this.handleSlotChange = (event) => {
             this.slotEl = event.target;
@@ -16178,6 +16493,9 @@ class PdsDropdownMenu {
             this.toggleDropdown();
         };
     }
+    componentWillLoad() {
+        this.hasHeader = Array.from(this.host.children).some(el => el.getAttribute('slot') === 'header');
+    }
     componentDidRender() {
         var _a;
         this.panelEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box');
@@ -16206,7 +16524,8 @@ class PdsDropdownMenu {
         this.triggerObserver = null;
         if (!this.triggerEl || typeof MutationObserver === 'undefined')
             return;
-        this.triggerObserver = new MutationObserver(this.syncTriggerAria);
+        // Capped against a script that keeps undoing it; opening and closing still write it directly.
+        this.triggerObserver = new MutationObserver(limitRestores(this.syncTriggerAria, 'pds-dropdown-menu: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the menu opens or closes.', this.triggerEl));
         this.triggerObserver.observe(this.triggerEl, {
             attributes: true,
             attributeFilter: ['aria-haspopup', 'aria-expanded'],
@@ -16312,15 +16631,19 @@ class PdsDropdownMenu {
             this.focusItemByIndex(prevIndex);
         }
     }
+    // Escape is taken in document's capture phase, before a modal around the menu hears it on
+    // document and closes too.
+    handleEscapeKeyDown(event) {
+        if (!this.isOpen || event.key !== 'Escape' || event.defaultPrevented)
+            return;
+        event.preventDefault();
+        this.closeDropdown();
+    }
     // Handle keyboard events for the dropdown
     handleKeyDown(event) {
         if (!this.isOpen)
             return;
         switch (event.key) {
-            case 'Escape':
-                event.preventDefault();
-                this.closeDropdown();
-                break;
             case 'ArrowDown':
                 event.preventDefault();
                 this.focusNextItem();
@@ -16412,7 +16735,7 @@ class PdsDropdownMenu {
         }
     }
     render() {
-        return (hAsync(Host, { key: '9d67972cf15c22bc666c32b86dcd8f143160ee0a', id: this.componentId }, hAsync("slot", { key: 'e9cbc0612ce0e8c2bf55e1dc7930eda075fcc173', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '6fed3f11cf962a97f8ebb3cc69bd76efb425c464', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, hAsync("slot", { key: 'b8757512713b913f3ee56d9518897e7ed3c3b830', onSlotchange: this.handleSlotChange }))));
+        return (hAsync(Host, { key: '18dac4d59ea236fe171f4c16f6571cb1547059c6', id: this.componentId }, hAsync("slot", { key: '95201a75a33ccb70dbd51a5cf9d78c76ebf26f65', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '7fc588f40f607ad81ad70bf74a525d078d32a80b', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, hAsync("div", { key: '73d13d94edccb68db7b703f930b50f729334efa8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, hAsync("slot", { key: '7066f3a6f71c8961326f38f0509f1c0cc17098ae', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: '9f07ec488b688c58c6422b575015ccd364075fe8', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: 'd0aad3f9ac3b58779669411523adbb8878dec61c', onSlotchange: this.handleSlotChange })))));
     }
     get host() { return getElement(this); }
     static get style() { return pdsDropdownMenuCss(); }
@@ -16422,9 +16745,10 @@ class PdsDropdownMenu {
         "$members$": {
             "componentId": [1, "component-id"],
             "placement": [1],
-            "currentFocusIndex": [32]
+            "currentFocusIndex": [32],
+            "hasHeader": [32]
         },
-        "$listeners$": [[8, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"]],
+        "$listeners$": [[6, "keydown", "handleEscapeKeyDown"], [8, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -16507,7 +16831,7 @@ class PdsDropdownMenuItem {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
     }
     render() {
-        return (hAsync(Host, { key: 'cf22f97df3869d59820ba0deff9a21bfee2628b8', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (hAsync(Host, { key: '33bd645d7c9547e3fd07429cf795302e6a482296', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
     }
     get host() { return getElement(this); }
     static get style() { return pdsDropdownMenuItemCss(); }
@@ -16543,7 +16867,7 @@ class PdsDropdownMenuSeparator {
         this.disabled = false;
     }
     render() {
-        return (hAsync(Host, { key: '63bd5fd3112b1030d1e86b331a659ab3a92dd387', id: this.componentId }, hAsync("hr", { key: '0a8504d34a9b91db03abdddd86ce918c00534410' })));
+        return (hAsync(Host, { key: '60407a2edc8b4667d39cbd1ba9a859d09b0b8ff1', id: this.componentId }, hAsync("hr", { key: '8485d1c8508c5fe5e3635505f25e278f45f45b82' })));
     }
     static get style() { return pdsDropdownMenuSeparatorCss(); }
     static get cmpMeta() { return {
@@ -17123,7 +17447,7 @@ class PdsFilter {
         return null;
     }
     render() {
-        return (hAsync(Host, { key: '4abb55453c9ab4cd49b21a23047aa5ee4ab70056', id: this.componentId }, hAsync("button", { key: 'e6b6bd81ca3f9d23f490219cf8e81f0bdf511798', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, hAsync("span", { key: '4cea081451f50508cef36e90d4c88cbd94933287', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: '479f84087e7969fa555475b240f5e70ce5bcf136', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: '85aec3d5d7b33a0cfb3602412238830929902eb1', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: 'ede4c3866bfdce974e0d21c6e6a3ae22aee47d2c' })))));
+        return (hAsync(Host, { key: '3cae951aee1f9c75f3e207cf6c68633a23f8f6dc', id: this.componentId }, hAsync("button", { key: 'f4c644710dc936248995be9a49cef8ad13031d61', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, hAsync("span", { key: '2dd87e53f363118becc762051ea1be664258b8b6', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: '733ceb5e07198e844fbdc1af294d2046c4c571d8', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: 'beb65a21192c6f5c16703aec7ab9a92ea378ef3c', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: '5a481cc6b143b059a5fc33d377abe5ab79aefb4e' })))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsFilterCss(); }
@@ -17155,7 +17479,7 @@ class PdsFilters {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '5587c41a5ca93cc48399d7c1af0762d4a3516b4d', id: this.componentId }, hAsync("div", { key: '43ee499b9c3f49b52cf18beee8ac5cf97b8ad49a', class: "pds-filters" }, hAsync("slot", { key: '79a452042d7aa7e0492d80fd773f71fb820c2211' }))));
+        return (hAsync(Host, { key: '8688235fe7cdea1b4fc540156ff21bb9711b41b6', id: this.componentId }, hAsync("div", { key: 'e51a37977df8c31f99b28d8c7e4bedb0d63e53c6', class: "pds-filters" }, hAsync("slot", { key: '8ce936da4d3f0213408090bc3eeb011920f9aa6c' }))));
     }
     static get style() { return pdsFiltersCss(); }
     static get cmpMeta() { return {
@@ -17284,6 +17608,28 @@ const isRTL = (hostEl) => {
 const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
 const isStr = (val) => typeof val === 'string'; // eslint-disable-line @typescript-eslint/no-explicit-any
 const toLower = (val) => val.toLowerCase();
+/**
+ * Normalizes a color value for use as a CSS custom property value: a bare
+ * design token (--pine-color-foo) is wrapped in var(...), an already-wrapped
+ * var(--token) is passed through unchanged, and anything else (a literal CSS
+ * color, or currentColor) is passed through as-is. Mirrors the equivalent
+ * utility in the `pine` repo's `libs/core/src/utils/utils.ts`
+ * (`normalizeColorValue`) — duplicated here rather than imported because
+ * `@pine-ds/core` already depends on `@pine-ds/icons`, so the reverse
+ * dependency would be circular.
+ */
+const normalizeColorValue = (value) => {
+    if (!isStr(value))
+        return undefined;
+    const trimmed = value.trim();
+    if (trimmed === '')
+        return undefined;
+    if (trimmed.startsWith('var('))
+        return trimmed;
+    if (trimmed.startsWith('--'))
+        return `var(${trimmed})`;
+    return trimmed;
+};
 /**
  * Elements inside of web components sometimes need to inherit global attributes
  * set on the host. For example, the inner input in `pds-input` should inherit
@@ -17445,9 +17791,10 @@ class PdsIcon {
         this.setupInitialAriaLabel();
     }
     setCSSVariables() {
+        var _a;
         this.el.style.setProperty(`--dimension-icon-height`, this.iconSize());
         this.el.style.setProperty(`--dimension-icon-width`, this.iconSize());
-        this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');
+        this.el.style.setProperty(`--color-icon-fill`, (_a = normalizeColorValue(this.color)) !== null && _a !== void 0 ? _a : 'currentColor');
     }
     connectedCallback() {
         // Handle re-connection during client-side navigation
@@ -17492,7 +17839,7 @@ class PdsIcon {
         const shouldFlip = flipRtl || shouldIconAutoFlip;
         // Use inherited aria-label if provided, otherwise fall back to auto-generated one
         const finalAriaLabel = inheritedAttributes['aria-label'] || ariaLabel;
-        return (hAsync(Host, Object.assign({ key: '43aa73531314e6529a887468e69362430d006229', "aria-label": finalAriaLabel !== undefined && !this.hasAriaHidden() ? finalAriaLabel : null, alt: "", role: "img", class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'flip-rtl': shouldFlip, 'icon-rtl': shouldFlip && isRTL(this.el) }) }, inheritedAttributes), (hAsync("div", { class: "icon-inner" }))));
+        return (hAsync(Host, Object.assign({ key: '3af1c02235a2645bc3bb300831b19779cca78827', "aria-label": finalAriaLabel !== undefined && !this.hasAriaHidden() ? finalAriaLabel : null, alt: "", role: "img", class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'flip-rtl': shouldFlip, 'icon-rtl': shouldFlip && isRTL(this.el) }) }, inheritedAttributes), (hAsync("div", { class: "icon-inner" }))));
     }
     /*****
      * Private Methods
@@ -17628,9 +17975,9 @@ class PdsImage {
         this.loading = 'eager';
     }
     render() {
-        return (hAsync(Host, { key: 'fff1a796e59b8e666069e56390e174d7d2861f03', class: {
+        return (hAsync(Host, { key: '1e8bb3882c2a629004ce1441e85d5c5a75a84e98', class: {
                 'pds-image': true,
-            }, id: this.componentId }, hAsync("img", { key: 'dbeda9da5adca51c58ec5a807cde673d6b479d0f', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, hAsync("img", { key: 'b50b19d51431d45027c7a918a4ba4c38493741d5', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get style() { return pdsImageCss(); }
     static get cmpMeta() { return {
@@ -17950,10 +18297,10 @@ class PdsInput {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (hAsync(Host, { key: '8c0829cc3502e5fa1fe52584d84b9345fcb0f3fd', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, hAsync("div", { key: 'cf754e6fc72d2cf900e541a469a8e0ba62851538', class: "pds-input" }, label && (hAsync("div", { key: 'f55793898eb2840322ec9a79daed186420ef0d90', class: {
+        return (hAsync(Host, { key: '75eb8bc6cda5e947f8677ebefe7995688f03f947', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, hAsync("div", { key: '93d7f90b9a64daccea1533abc08a8cb18825b828', class: "pds-input" }, label && (hAsync("div", { key: '948109b3bfa1a1b8171572da9160425e3e35a7a6', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, hAsync("label", { key: '2a7deac2a9443b1a648133a799b69414b96314e3', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: '75dc7787e0132c4f62272307867a8066f9cf6ce2' }, label, this.required && hAsync("span", { key: 'c7c413addd2b3f275031596598b030c02f647969', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: 'eaf09d07c4fbc84ef835d2c7b4f00e252394f5ed', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: 'dca2390b44e430f0ab1d29daa4ce630ac3b12881', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (hAsync("p", { key: '0bd7859f44185ed0c1478833518cb5829ffea4ad', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: 'c40016f5bb03e292e01430c2940aff0ebb98abb5', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: '54985d775ddf951b50cae4796b7847e98de7434f', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
+            } }, hAsync("label", { key: 'bb0e6c6febb97ad4aa3942ac5e67ac42dc1bde0a', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: 'c6a122f829aa3b92ccb715c3f3975f6baadb3028' }, label, this.required && hAsync("span", { key: 'dce7d1a9c010a545992734bd238e9f6a4ca7b4ce', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '1b92ab5d649a4a9cf8112ea9b8a8a1095714f6d0', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: 'bc3c4b907312149d375bb78f9912e4501da59348', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (hAsync("p", { key: 'f7bcbafc17a20310d602fce14a0adad522acbcb1', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: 'bbbd6dc3203b89e5759587147de74d2ce3ce6177', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: '68a6a92c82c1756ad99f431e0cb56756e3cdf75c', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -18065,8 +18412,8 @@ class PdsLink {
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
         const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (hAsync("a", { key: '4757dc775fb132ea1fed93fed8e3cd18c77d45af', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, hAsync("slot", { key: '88e5a1ef3b0fc384f7449979029fa45c627aab99' }, this.href), showExternalIcon &&
-            hAsync("pds-icon", { key: '6f1b9cf0dab342ea09c1f52c605228ef4d04f829', icon: launch, size: this.fontSize })));
+        return (hAsync("a", { key: '3b6f9d19d7f50d0606cf5f3c3a97b85ee4aa63b0', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, hAsync("slot", { key: 'a265f1c4c9b6ff089b23906d8f650bfd65b25013' }, this.href), showExternalIcon &&
+            hAsync("pds-icon", { key: '9553a8256b6811296ea4b762e32662c1a2f4aecf', icon: launch, size: this.fontSize })));
     }
     static get style() { return pdsLinkCss(); }
     static get cmpMeta() { return {
@@ -18165,7 +18512,7 @@ class PdsLoader {
             'aria-live': 'polite',
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (hAsync(Host, Object.assign({ key: '81f97b8a6adf4d2c0e5516aa2af9054e200629e1', class: hostClass }, hostAttributes), this.variant === 'spinner' && (hAsync("div", { key: '6e25806c83d6ddeb1141acdd083654867c6ff8a2', class: "pds-loader--spinner" }, hAsync("svg", { key: '4798f27facfcf57da8d408319527fc6083489107', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: '0c64abfabc18ccd51ef41017e088f6ec10736d61' }, hAsync("linearGradient", { key: '3aa61edf6250dc827bf925938b69008860f96596', id: "spinner-secondHalf" }, hAsync("stop", { key: '2693d8a866492ef4ca98cbc4beb5f9f1a34a8b52', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: 'ae229fdc73733e4d6ab15a6663e67b574bd49b40', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '8ddbb46a1a387113d74a82cc4e3e0e9c7e12d573', id: "spinner-firstHalf" }, hAsync("stop", { key: 'd166a3c1ae37c3afa898351683b07f5c4d0ee906', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: 'e4c9790bc9a645d752aa56c238fb8708310208b5', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: '8b3897ff925d4207f9060e2fb69afa657b1b8fe3', class: "pds-loader__spinner-path" }, hAsync("path", { key: '603ef195d1fc64d2059d9fbfeb9b14e2bdb1cabe', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: 'a649ac9538248f5a22d48008377e18f4407efad9', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: '37f3772b61d1459959cc4d8c0b5c729dbd6953ff', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: 'e510c2e6498a5542ce6e6573fdc03e8770121cd7', class: "pds-loader--typing" }, hAsync("span", { key: 'bbf4f5a328175f06b221d9abc73118505a09455d' }), hAsync("span", { key: '9a7e80b28e1455ef9d0c1bdb330a6425a3037709' }), hAsync("span", { key: 'f8aa1eb4f822a6d0e2a14a982bbe99866a97815b' }))), hAsync("div", { key: '3492189495798a2ea861d0dcb460f1b25d43d565', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: 'c1a19415b513a2a5f76a53d64b0ef5fbb4a5d100', name: "label" }, "Loading..."))));
+        return (hAsync(Host, Object.assign({ key: 'c42c1aeec5c8db9a1065f35492734a8cb265f3ce', class: hostClass }, hostAttributes), this.variant === 'spinner' && (hAsync("div", { key: 'dc1b7943709d03e02467cca0817fb6a7ad5ed10a', class: "pds-loader--spinner" }, hAsync("svg", { key: 'db38e607541ac1eb91be87b2cd0240341c8fb51d', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: 'd734ef70b0039758a25881c22bb3e6453ac40012' }, hAsync("linearGradient", { key: '697627f516c5f7b4cd5351dd39de231c0cb9e429', id: "spinner-secondHalf" }, hAsync("stop", { key: '03082c0ec354685eebf7d0132202d54b083d26df', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: '181b661b36aeb44943e20dec513f7265a9487004', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '67f6c51aefe99bcbfdb741290337364501fc4fcb', id: "spinner-firstHalf" }, hAsync("stop", { key: 'cb6adf27ecb06b42ba572a702153de960491b0b6', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: 'aeebabfa1ac00391937388feefa120bd0bb4d26c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: 'f06ca75e4df171b6db426fce9bc34076cfee5bca', class: "pds-loader__spinner-path" }, hAsync("path", { key: 'a278b37de8f77a1000efecb62b89e3f751712a98', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: 'a035add4d01b60bcebf7625c8730d6a41ddf40ff', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: '1189c8299d33a2a6bb6a8345b60f22bf4ad9beee', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: '39826fae20e8826d9c73cf57ba938583d610e1ea', class: "pds-loader--typing" }, hAsync("span", { key: '8f2b837c79548a1080710a7cc30c3be3a051e1dd' }), hAsync("span", { key: '8efb1193ef51f110950861767eccc3896e90b81e' }), hAsync("span", { key: '366f2d205adbb043691c253cff17d2d29d56a2cc' }))), hAsync("div", { key: 'aeaa4aa12863b34088e84fd2791c2ce32dc05248', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: '7a8ec45aed1cd6f9e60f4db2ec5376439fa41c81', name: "label" }, "Loading..."))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18270,8 +18617,36 @@ function containsComposed(ancestor, node) {
     }
     return false;
 }
+/**
+ * Every open modal, with the order it opened in, which ranks top-layer modals and the modals
+ * inside them. Kept here rather than queried from the document, which can't see a modal inside
+ * another component's shadow root.
+ */
+const openModals = new Map();
+let openSequence = 0;
+/** Whether an open auto popover's panel sits in `root`, including inside shadow roots under it. */
+function hasOpenPopover(root) {
+    if (root.querySelector('[data-pds-popover-open]'))
+        return true;
+    return Array.from(root.querySelectorAll('*')).some(el => !!el.shadowRoot && hasOpenPopover(el.shadowRoot));
+}
+/**
+ * Whether `a` comes before `b` in the page. `compareDocumentPosition` is arbitrary across a shadow
+ * boundary, so each side climbs to its host until both are in the same tree.
+ */
+function precedesComposed(a, b) {
+    // A document has no host, which ends each climb.
+    for (let x = a; x; x = x.getRootNode().host) {
+        for (let y = b; y; y = y.getRootNode().host) {
+            if (x.getRootNode() === y.getRootNode()) {
+                return !!(x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING);
+            }
+        }
+    }
+    return false;
+}
 /** The focused element, followed down through shadow roots to the control that has focus. */
-function deepActiveElement() {
+function deepActiveElement$1() {
     var _a;
     let active = document.activeElement;
     while ((_a = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)
@@ -18288,7 +18663,8 @@ class PdsModal {
         this.pdsModalClose = createEvent(this, "pdsModalClose");
         this.focusableElements = [];
         /**
-         * Whether the modal can be dismissed by clicking the backdrop
+         * Whether the modal can be dismissed by clicking the backdrop, pressing Escape, or the browser's
+         * own close request (such as a back gesture)
          * @default true
          */
         this.backdropDismiss = true;
@@ -18336,19 +18712,33 @@ class PdsModal {
          * Stores the list of focusable elements in the modal
          */
         this.focusableElementsArray = [];
+        // The browser's own close request (an Escape nothing prevented, a back gesture) would close the
+        // dialog without updating `open`, so close it through hideModal() instead, or not at all.
+        this.handleCancel = (e) => {
+            e.preventDefault();
+            if (!this.open)
+                return;
+            // The request reaches the top-layer dialog even when a disableTopLayer modal inside it is on
+            // top; that one closes first, as it would on Escape.
+            const top = this.innermostOpenModal();
+            const target = (top && containsComposed(this.el, top) ? top : this.el);
+            if (target.backdropDismiss)
+                target.hideModal();
+        };
         this.handleBackdropClick = (e) => {
             if (!this.backdropDismiss || !this.open)
                 return;
-            if (e.target.classList.contains('pds-modal__backdrop')) {
+            // This modal's own backdrop; a nested modal's backdrop handles its own clicks.
+            if (e.target === this.modalRef) {
                 e.stopPropagation();
                 // Only close if this is the innermost modal
-                if (this.isInnermostModal()) {
+                if (this.innermostOpenModal() === this.el) {
                     this.hideModal();
                 }
             }
         };
         this.handleKeyDown = (e) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             // If the modal is not open, don't handle any keyboard events
             if (!this.open)
                 return;
@@ -18371,24 +18761,39 @@ class PdsModal {
                 if (!('__pdsActiveElementAtEscape' in eventSnapshot)) {
                     const activeAtDispatch = document.activeElement;
                     eventSnapshot.__pdsActiveElementAtEscape = activeAtDispatch;
+                    // Followed into shadow roots: for a modal inside one, document.activeElement is only the host.
+                    eventSnapshot.__pdsDeepActiveElementAtEscape = deepActiveElement$1();
                     const topLayerDialog = (_a = activeAtDispatch === null || activeAtDispatch === void 0 ? void 0 : activeAtDispatch.closest('dialog')) !== null && _a !== void 0 ? _a : null;
                     eventSnapshot.__pdsTopLayerDialogAtEscape = topLayerDialog;
                     eventSnapshot.__pdsTopLayerDialogWasModalAtEscape = !!(topLayerDialog && topLayerDialog.matches(':modal'));
+                    // A control that closed on this Escape (a combobox on its own element, a dropdown menu or
+                    // multiselect in document's capture phase) has prevented it before this bubble listener.
+                    // Read before any modal prevents it below.
+                    eventSnapshot.__pdsEscapeHandledInside = e.defaultPrevented;
+                    // Which modal is innermost is read once too: the inner one closing first would make its
+                    // outer modal the innermost by the time that modal's listener runs.
+                    eventSnapshot.__pdsInnermostModalAtEscape = this.innermostOpenModal();
                 }
+                if (eventSnapshot.__pdsEscapeHandledInside)
+                    return;
                 // Leave Escape to a genuinely stacked-above overlay (disableTopLayer's
                 // reason for existing) — not just to anything outside this modal.
                 const active = eventSnapshot.__pdsActiveElementAtEscape;
                 if (this.disableTopLayer &&
                     active &&
                     active !== document.body &&
-                    !this.el.contains(active) &&
-                    this.isStackedAboveOverlay(active, (_b = eventSnapshot.__pdsTopLayerDialogAtEscape) !== null && _b !== void 0 ? _b : null, (_c = eventSnapshot.__pdsTopLayerDialogWasModalAtEscape) !== null && _c !== void 0 ? _c : false)) {
+                    !containsComposed(this.el, (_b = eventSnapshot.__pdsDeepActiveElementAtEscape) !== null && _b !== void 0 ? _b : active) &&
+                    this.isStackedAboveOverlay(active, (_c = eventSnapshot.__pdsTopLayerDialogAtEscape) !== null && _c !== void 0 ? _c : null, (_d = eventSnapshot.__pdsTopLayerDialogWasModalAtEscape) !== null && _d !== void 0 ? _d : false)) {
                     return;
                 }
+                // An open popover inside takes Escape from its own document listener, which runs after this
+                // one, so leave the key for it. Its preventDefault() keeps the native dialog open.
+                if (this.modalRef && hasOpenPopover(this.modalRef))
+                    return;
                 // Always prevent native dialog close behavior
                 e.preventDefault();
                 // Only close if backdropDismiss is enabled and this is the innermost modal
-                if (this.backdropDismiss && this.isInnermostModal()) {
+                if (this.backdropDismiss && eventSnapshot.__pdsInnermostModalAtEscape === this.el) {
                     this.hideModal();
                 }
                 return;
@@ -18408,7 +18813,7 @@ class PdsModal {
                 // Every open modal hears this keydown. When focus is in a modal dialog opened above this one,
                 // that dialog traps Tab: this modal's list also holds its controls, so it would wrap first. A
                 // non-modal dialog inside (a disableTopLayer modal) doesn't trap, so this one still does.
-                const activeElement = deepActiveElement();
+                const activeElement = deepActiveElement$1();
                 if (!activeElement || this.modalDialogAbove(activeElement))
                     return;
                 // Content can change while the modal is open (rows fetched in, sections shown), so the
@@ -18448,8 +18853,6 @@ class PdsModal {
     }
     componentDidLoad() {
         this.modalRef = this.el.querySelector('.pds-modal__backdrop');
-        // Add keyboard event listener
-        document.addEventListener('keydown', this.handleKeyDown);
         // @Watch('open') only fires on a later change, not the prop's initial
         // value — a modal mounted with `open` already true (static markup, or a
         // framework passing it on first render) would otherwise never call
@@ -18465,9 +18868,18 @@ class PdsModal {
     componentDidRender() {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal'), 'dialog.pds-modal__backdrop', '.pds-modal');
     }
+    // Here rather than in componentDidLoad, which runs once: a modal taken out of the page and put
+    // back (a morph or a framework moving it) gets its keyboard handling, and its place among the
+    // open modals, back too. Adding the same listener twice is a no-op.
+    connectedCallback() {
+        document.addEventListener('keydown', this.handleKeyDown);
+        if (this.open && !openModals.has(this.el))
+            openModals.set(this.el, ++openSequence);
+    }
     disconnectedCallback() {
         // Clean up event listener
         document.removeEventListener('keydown', this.handleKeyDown);
+        openModals.delete(this.el);
     }
     handleOpenChange(newValue) {
         if (newValue) {
@@ -18532,6 +18944,9 @@ class PdsModal {
                     this.modalRef.showModal();
                 }
                 this.open = true;
+                // Showing an open modal again doesn't move it above one opened after it.
+                if (!openModals.has(this.el))
+                    openModals.set(this.el, ++openSequence);
                 // Update focusable elements and set initial focus
                 // Using a longer timeout to ensure all components are fully rendered
                 setTimeout(() => {
@@ -18594,6 +19009,7 @@ class PdsModal {
                 const focusAlreadyMovedElsewhere = activeElement !== null && activeElement !== document.body && !this.modalRef.contains(activeElement);
                 this.modalRef.close();
                 this.open = false;
+                openModals.delete(this.el);
                 // Restore focus to the element that was focused before the modal was opened
                 if (!focusAlreadyMovedElsewhere &&
                     this.previousActiveElement &&
@@ -18612,7 +19028,9 @@ class PdsModal {
      */
     getBackdropZIndex(modal) {
         const backdrop = modal.querySelector('.pds-modal__backdrop');
-        return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;
+        // `auto` (no z-index token loaded) parses to NaN, which no comparison can rank.
+        const zIndex = backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;
+        return Number.isNaN(zIndex) ? 0 : zIndex;
     }
     /**
      * Whether `active` sits inside a surface actually stacked above this modal.
@@ -18639,7 +19057,8 @@ class PdsModal {
      * lose that evidence depending on listener order.
      */
     isStackedAboveOverlay(active, topLayerDialog, topLayerDialogWasModal) {
-        if (topLayerDialog && topLayerDialog !== this.modalRef && topLayerDialogWasModal) {
+        // A top-layer dialog this modal sits inside is underneath it, not an overlay above.
+        if (topLayerDialog && topLayerDialog !== this.modalRef && topLayerDialogWasModal && !containsComposed(topLayerDialog, this.el)) {
             return true;
         }
         const ownZIndex = this.getBackdropZIndex(this.el);
@@ -18655,24 +19074,37 @@ class PdsModal {
         return false;
     }
     /**
-     * Checks if this modal is the innermost (highest z-index) modal
+     * The open modal that takes Escape or a backdrop click, among those with no other open modal
+     * inside them (a nested modal's backdrop can share its outer modal's z-index). A top-layer dialog
+     * (or a modal inside one) paints above anything outside it, and within the top layer the last
+     * opened is on top. Modals in the same layer (the page, or one top-layer dialog) then rank by
+     * the highest backdrop, then the one later in the page.
      */
-    isInnermostModal() {
-        // Find all open modals
-        const openModals = Array.from(document.querySelectorAll('pds-modal')).filter(modal => modal.open);
-        if (openModals.length === 0)
-            return false;
-        // Get this modal's backdrop element
-        const thisBackdrop = this.el.querySelector('.pds-modal__backdrop');
-        if (!thisBackdrop)
-            return false;
-        // Get computed z-index of all open modal backdrops
-        const modalZIndexes = openModals.map(modal => this.getBackdropZIndex(modal));
-        // Get the highest z-index
-        const maxZIndex = Math.max(...modalZIndexes);
-        // Check if this modal's backdrop has the highest z-index
-        const thisZIndex = this.getBackdropZIndex(this.el);
-        return thisZIndex === maxZIndex;
+    innermostOpenModal() {
+        const open = Array.from(openModals.keys()).filter(modal => modal.isConnected);
+        const innermost = open.filter(modal => !open.some(other => other !== modal && containsComposed(modal, other)));
+        const byDocumentOrder = [...innermost].sort((a, b) => (precedesComposed(a, b) ? -1 : 1));
+        // A modal inside a top-layer dialog paints in that dialog's place in the top layer, even when it
+        // isn't in the top layer itself (disableTopLayer), so that dialog's open order ranks it first.
+        const rank = (modal) => {
+            var _a;
+            const backdrop = modal.querySelector('.pds-modal__backdrop');
+            const topLayerDialog = backdrop ? closest$1('dialog:modal', backdrop) : null;
+            const topLayerModal = topLayerDialog === null || topLayerDialog === void 0 ? void 0 : topLayerDialog.closest('pds-modal');
+            const layer = topLayerDialog ? ((_a = (topLayerModal && openModals.get(topLayerModal))) !== null && _a !== void 0 ? _a : 0) : 0;
+            return [topLayerDialog ? 1 : 0, layer, this.getBackdropZIndex(modal), byDocumentOrder.indexOf(modal)];
+        };
+        let top = null;
+        let topRank = [-1, -1, -1, -1];
+        for (const modal of innermost) {
+            const modalRank = rank(modal);
+            const above = modalRank.findIndex((value, i) => value !== topRank[i]);
+            if (above >= 0 && modalRank[above] > topRank[above]) {
+                top = modal;
+                topRank = modalRank;
+            }
+        }
+        return top;
     }
     /** Whether a modal dialog other than this one sits between the focused element and this modal. */
     modalDialogAbove(active) {
@@ -18712,14 +19144,14 @@ class PdsModal {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (hAsync("dialog", { key: 'b6714c7e77d80bf2370f2170ffce029abe147d81', class: {
+        return (hAsync("dialog", { key: '0633d4e8a7cb81f2f9280e754564960a00a4d60b', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '8c3319f53dd8c79c9e952785277e9e82e28b651e', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: '466f8a3476cf066817554f47ec7d3a0e3ab10b89', class: {
                 'pds-modal': true,
                 [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '8c6f9cc1a20b515659344ad041512de52761800d' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '01ca45c96540416216a1082bad52b137720f0f4d' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18936,10 +19368,10 @@ class PdsModalContent {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (hAsync(Host, { key: 'f66dbdd08d6af3f87b0a6e8f30e1948b2f674e34' }, hAsync("div", { key: 'ac0469cbfe48002d5bc7f401e0dc30926cfd4421', class: {
+        return (hAsync(Host, { key: 'd41d5632eb6a2dafe921546af60f835d3545cc4f' }, hAsync("div", { key: '741ac9f28149039ecf5051142a939ab62ef26a87', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '26a8a45ab4dcd0349da68304fa3cacc64603208a' }))));
+            }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '090a52e9425d4df61c2d8216cc19f0925babdffe' }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalContentCss(); }
@@ -18970,7 +19402,7 @@ class PdsModalFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (hAsync("footer", { key: '1148892c2d6b9a461f6c04a670fceda76c1be53a', class: "pds-modal__footer" }, hAsync("slot", { key: 'ccd754674c82c415f8c056c9dda6327df35dbd03' })));
+        return (hAsync("footer", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__footer" }, hAsync("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalFooterCss(); }
@@ -18998,7 +19430,7 @@ class PdsModalHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (hAsync("header", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__header" }, hAsync("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
+        return (hAsync("header", { key: 'ee3ac5fb9b00a943aa86c3434ea07291b74d776c', class: "pds-modal__header" }, hAsync("slot", { key: '0b0f7ff257635723099c536648a826be8dcc05e7' })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalHeaderCss(); }
@@ -19552,11 +19984,12 @@ class PdsMultiselect {
     }
     /**
      * Handle global keyboard events for accessibility.
-     * Closes dropdown on Escape key press regardless of focus location.
+     * Closes dropdown on Escape key press regardless of focus location. Taken in document's capture
+     * phase, before a modal around the multiselect hears it on document and closes too.
      */
     handleWindowKeyDown(event) {
         var _a;
-        if (!this.isOpen)
+        if (!this.isOpen || event.defaultPrevented)
             return;
         if (event.key === 'Escape') {
             event.preventDefault();
@@ -20246,10 +20679,10 @@ class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (hAsync(Host, { key: '295354c218d03a512ee87a9f19d2267a59731eb1', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '8696c02fad869239fa85dcec7f92a3efb402c963', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: '2a9cc565c5dbcf78305eb65e94d795669fb0f93b', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (hAsync(Host, { key: 'fcc35a82c16d5cf35a49ce997f19618104f9cc45', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '72d1fdf759d9173f54bac80ec50aff651fd2b357', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'e28f02c2beb23dc2c0deefadbd0645b20d938d91', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), hAsync("div", { key: '9358ebffb50e74fe4ceb9ca1c13cf819cc3e96e6', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), hAsync("div", { key: '06539bf2c4b8da2889505a9f042d5cd6721b1853', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -20265,7 +20698,7 @@ class PdsMultiselect {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '722da251199792366dc72b6c7f016e24ae807b30', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '7b4da9b2e04f53f3e8f245c119135f3b664897ec', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: '95a152f6a350eee2f67dbab2930f19e583ca3b85', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '7b9cded907054757a6f054d0d325811a2199e496', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '8b07974c8e2d838d76c17c3a52ba4282fb101968', style: { display: 'none' } }, hAsync("slot", { key: '0a34d582bc4dd780072f00ac13bfdce7e297191e' })))));
+            } }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '3364fc00bc744fcd599436a9cb6dc563564d89d9', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: 'bf712c65b9acb66e2998a43686fed408fc1ff48a', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'b485db6c2c3ae312cce2b90db60e850ad6dfdcf5', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '20daf861cf9584f33f5a9574e9581acc487e7dfe', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '018d333254771695a8c191f1cea40af6e78427a2', style: { display: 'none' } }, hAsync("slot", { key: '2ef4a01fbe5d294a9ead5cc1183c28341834539b' })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20355,14 +20788,66 @@ class PdsMultiselect {
             "clear": [64],
             "refreshOptions": [64]
         },
-        "$listeners$": [[8, "keydown", "handleWindowKeyDown"]],
+        "$listeners$": [[6, "keydown", "handleWindowKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
 }
 
+/**
+ * Escapes a string so it's safe to interpolate into a CSS identifier (an id selector like `#${id}`)
+ * or into CSS text (a stylesheet rule referencing that id). Equivalent to the native `CSS.escape`,
+ * reimplemented because Stencil's unit-test DOM (`newSpecPage`'s mock-doc) doesn't provide it.
+ * @param value - The string to escape, e.g. a consumer-supplied id
+ */
+const cssEscape = (value) => {
+    const string = String(value);
+    const length = string.length;
+    const firstCodeUnit = string.charCodeAt(0);
+    let result = '';
+    for (let index = 0; index < length; index++) {
+        const codeUnit = string.charCodeAt(index);
+        if (codeUnit === 0x0000) {
+            result += '�';
+            continue;
+        }
+        if ((codeUnit >= 0x0001 && codeUnit <= 0x001f) ||
+            codeUnit === 0x007f ||
+            (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            (index === 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit === 0x002d)) {
+            result += `\\${codeUnit.toString(16)} `;
+            continue;
+        }
+        if (index === 0 && length === 1 && codeUnit === 0x002d) {
+            result += `\\${string.charAt(index)}`;
+            continue;
+        }
+        if (codeUnit >= 0x0080 ||
+            codeUnit === 0x002d ||
+            codeUnit === 0x005f ||
+            (codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            (codeUnit >= 0x0041 && codeUnit <= 0x005a) ||
+            (codeUnit >= 0x0061 && codeUnit <= 0x007a)) {
+            result += string.charAt(index);
+            continue;
+        }
+        result += `\\${string.charAt(index)}`;
+    }
+    return result;
+};
+
 const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}`;
 
+/** Open auto popovers, in the order they opened: Escape goes to the last one it applies to. */
+const openAutoPopovers = [];
+/** The focused element, followed down through shadow roots to the control that has focus. */
+function deepActiveElement() {
+    var _a;
+    let active = document.activeElement;
+    while ((_a = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)
+        active = active.shadowRoot.activeElement;
+    return active;
+}
 /**
  * @slot trigger - The trigger element for the popover
  * @slot (default) - The content to display inside the popover
@@ -20398,7 +20883,7 @@ class PdsPopover {
          */
         this.triggerObserver = null;
         /**
-         * Portal element rendered in document.body
+         * Portal element: in document.body, or in the open dialog the popover is in
          */
         this.portalEl = null;
         /**
@@ -20494,6 +20979,26 @@ class PdsPopover {
                     break;
             }
         };
+        /** The focus style copied into a shadow root the panel opened in, which `document.head` can't reach. */
+        this.shadowFocusStyle = null;
+        /** The dialog the panel was opened in, closed along with it. */
+        this.watchedDialog = null;
+        this.onDialogClose = () => {
+            this.hide();
+        };
+        /**
+         * Inside a dialog, the panel can sit in a form that wraps the dialog, which a body portal never
+         * did. A submit from the panel (a button in it, or Enter in a field in it) is stopped, so the
+         * panel behaves as it does in the body.
+         */
+        this.handleSubmitFromPanel = (event) => {
+            if (!this.portalEl || !containsComposed$1(event.target, this.portalEl))
+                return;
+            if (containsComposed$1(this.portalEl, event.submitter) || containsComposed$1(this.portalEl, deepActiveElement())) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
     }
     restorePlacementDefault(newValue) {
         this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
@@ -20530,7 +21035,8 @@ class PdsPopover {
         this.triggerObserver = null;
         if (this.triggerEl == null || typeof MutationObserver === 'undefined')
             return;
-        this.triggerObserver = new MutationObserver(() => this.linkTriggerToPortal());
+        // Capped against a script that keeps undoing it; opening and closing still write it directly.
+        this.triggerObserver = new MutationObserver(limitRestores(() => this.linkTriggerToPortal(), 'pds-popover: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the popover opens or closes.', this.triggerEl));
         this.triggerObserver.observe(this.triggerEl, {
             attributes: true,
             attributeFilter: ['aria-expanded', 'aria-controls'],
@@ -20540,9 +21046,9 @@ class PdsPopover {
     // This mirrors the native Popover API's accessibility behavior
     linkTriggerToPortal() {
         if (this.triggerEl == null || this.portalEl == null)
-            return;
+            return false;
         // Skips values already in place, so the trigger observer's own callback doesn't loop.
-        setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
+        return setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
     }
     // componentDidLoad doesn't run again when a popover comes back, so rebuild whatever
     // disconnectedCallback tore down. Each step is a no-op when nothing was.
@@ -20555,19 +21061,23 @@ class PdsPopover {
         (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTriggerClick);
         this.observeTrigger();
         this.linkTriggerToPortal();
-        // Still open after a move: the trigger moved, so the portal follows it.
+        // Still open after a move: the trigger moved, so the portal follows it, into the dialog it
+        // is in now, if any.
         if (this.active) {
+            this.placePortal();
             requestAnimationFrame(() => this.handlePopoverPositioning());
         }
     }
     disconnectedCallback() {
         var _a;
         // Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
-        // already back in the page. Its portal is in <body>, untouched, so it stays open, with focus
-        // where it was.
+        // already back in the page. Its portal is outside the popover, so it stays open, with focus
+        // where it was; connectedCallback moves it to follow the popover.
         if (this.el.isConnected)
             return;
         this.isComponentMounted = false;
+        this.unwatchDialogClose();
+        this.forgetOpen();
         // Open, the content sits in the portal; put it back before the portal goes. Only listeners on
         // the popover itself hear the close event now, but those are the ones mirroring its state.
         if (this.active) {
@@ -20588,6 +21098,7 @@ class PdsPopover {
         // Clean up all event listeners
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
+        document.removeEventListener('submit', this.handleSubmitFromPanel, true);
         // Clear any pending debounce timers
         this.clearDebounceTimers();
         // Remove portal from DOM
@@ -20632,9 +21143,6 @@ class PdsPopover {
         else {
             this.portalEl.id = `${this.componentId}-portal`;
         }
-        // Add accessibility attributes for screen readers
-        // Note: Native Popover API doesn't add a specific role, keeping semantic HTML
-        this.portalEl.setAttribute('aria-modal', 'false'); // Not a modal, can interact with rest of page
         // Append to body
         document.body.appendChild(this.portalEl);
         // Add global focus styles to match Pine design system
@@ -20649,22 +21157,25 @@ class PdsPopover {
         if (!this.portalEl)
             return;
         const portalId = this.portalEl.id;
+        // componentId comes from the consumer, so it can carry characters cssEscape needs to
+        // neutralize before the id is used as a selector or interpolated into stylesheet text.
+        const escapedPortalId = cssEscape(portalId);
         // Check if style element already exists
-        const existingStyle = document.querySelector(`style[data-pds-popover-focus="${portalId}"]`);
+        const existingStyle = document.querySelector(`style[data-pds-popover-focus="${escapedPortalId}"]`);
         if (existingStyle)
             return;
         // Create style element with Pine's focus ring styles and dark mode border
         const styleEl = document.createElement('style');
         styleEl.setAttribute('data-pds-popover-focus', portalId);
         styleEl.textContent = `
-      #${portalId}:focus {
+      #${escapedPortalId}:focus {
         outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;
         outline-offset: var(--pine-border-width, 1px);
       }
-      #${portalId}:focus:not(:focus-visible) {
+      #${escapedPortalId}:focus:not(:focus-visible) {
         outline: none;
       }
-      [data-theme="dark"] #${portalId} {
+      [data-theme="dark"] #${escapedPortalId} {
         border: var(--pine-border);
       }
     `;
@@ -20715,7 +21226,27 @@ class PdsPopover {
         // Clear tracking array
         this.movedNodes = [];
     }
+    copyFocusStylesInto(root) {
+        var _a, _b, _c;
+        // Outside a shadow root the document's own style applies, so drop a copy left in one.
+        if (!(root instanceof ShadowRoot)) {
+            (_a = this.shadowFocusStyle) === null || _a === void 0 ? void 0 : _a.remove();
+            this.shadowFocusStyle = null;
+            return;
+        }
+        if (((_b = this.shadowFocusStyle) === null || _b === void 0 ? void 0 : _b.parentNode) === root || !this.portalEl)
+            return;
+        const source = document.querySelector(`style[data-pds-popover-focus="${cssEscape(this.portalEl.id)}"]`);
+        if (!source)
+            return;
+        (_c = this.shadowFocusStyle) === null || _c === void 0 ? void 0 : _c.remove();
+        this.shadowFocusStyle = source.cloneNode(true);
+        root.appendChild(this.shadowFocusStyle);
+    }
     removePortal() {
+        var _a;
+        (_a = this.shadowFocusStyle) === null || _a === void 0 ? void 0 : _a.remove();
+        this.shadowFocusStyle = null;
         if (this.portalEl) {
             // Remove the portal element from DOM
             if (this.portalEl.parentNode) {
@@ -20723,7 +21254,7 @@ class PdsPopover {
             }
             // Remove the associated focus style element
             const portalId = this.portalEl.id;
-            const styleEl = document.querySelector(`style[data-pds-popover-focus="${portalId}"]`);
+            const styleEl = document.querySelector(`style[data-pds-popover-focus="${cssEscape(portalId)}"]`);
             if (styleEl && styleEl.parentNode) {
                 styleEl.parentNode.removeChild(styleEl);
             }
@@ -20740,9 +21271,13 @@ class PdsPopover {
         // Record open timestamp to prevent immediate close from opening click
         this.openTimestamp = Date.now();
         this.linkTriggerToPortal();
+        this.placePortal();
         // Update portal content with latest slot content
         this.updatePortalContent();
-        // Show portal
+        // Show portal. The attribute tells a modal around it that this popover takes Escape first; only
+        // an auto popover listens for Escape.
+        if (this.popoverType === 'auto')
+            this.portalEl.setAttribute('data-pds-popover-open', '');
         this.portalEl.style.display = 'block';
         this.portalEl.style.opacity = '1';
         this.portalEl.style.visibility = 'visible';
@@ -20754,8 +21289,10 @@ class PdsPopover {
         });
         // Add scroll and resize listeners for repositioning (always)
         this.addScrollAndResizeListeners();
+        document.addEventListener('submit', this.handleSubmitFromPanel, true);
         // Add document listeners for light dismiss and escape key (auto type only)
         if (this.popoverType === 'auto') {
+            openAutoPopovers.push(this);
             this.addLightDismissListeners();
         }
         // Emit open event
@@ -20771,12 +21308,16 @@ class PdsPopover {
         if (!this.active || !this.portalEl)
             return;
         this.active = false;
-        // Restoring the content drops its focus to the body, so check where focus is first.
-        const focusWasInside = this.portalEl.contains(document.activeElement);
+        this.unwatchDialogClose();
+        // Restoring the content drops its focus to the body, so check where focus is first. In a
+        // shadow root, document.activeElement is only its host.
+        const focusWasInside = containsComposed$1(this.portalEl, deepActiveElement());
         this.linkTriggerToPortal();
         // Restore content back to original slot positions
         this.restorePortalContent();
-        // Hide portal
+        // Hide portal. The dark-mode border set in a shadow root is worked out again on the next open.
+        this.portalEl.style.border = '';
+        this.portalEl.removeAttribute('data-pds-popover-open');
         this.portalEl.style.display = 'none';
         this.portalEl.style.opacity = '0';
         this.portalEl.style.visibility = 'hidden';
@@ -20786,8 +21327,10 @@ class PdsPopover {
             this.returnFocusToTrigger();
         }
         // Remove all listeners
+        this.forgetOpen();
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
+        document.removeEventListener('submit', this.handleSubmitFromPanel, true);
         // Clear any pending timers
         this.clearDebounceTimers();
         // Emit close event
@@ -20807,6 +21350,59 @@ class PdsPopover {
             this.show();
         }
     }
+    /**
+     * Puts the panel where it shows above everything around the popover. In an open dialog, it goes
+     * inside it: a modal dialog sits in the top layer above the body and makes the rest of the page
+     * inert, and a non-modal one sits above it by z-index. Right after the popover, it's next in the
+     * Tab order. In another component's slot, though, it would have no slot to render in, and in a
+     * form its buttons would submit it, so there it goes at the end of the dialog.
+     */
+    placePortal() {
+        var _a, _b;
+        if (!this.portalEl)
+            return;
+        const dialog = closest$1('dialog[open]', this.el);
+        if (!dialog) {
+            this.unwatchDialogClose();
+            this.portalEl.style.border = '';
+            if (this.portalEl.parentElement !== document.body)
+                document.body.appendChild(this.portalEl);
+            this.copyFocusStylesInto(document);
+            return;
+        }
+        const form = closest$1('form', this.el);
+        const besidePopover = !((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) && !(form && containsComposed$1(dialog, form));
+        if (besidePopover) {
+            if (this.el.nextElementSibling !== this.portalEl)
+                (_b = this.el.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(this.portalEl, this.el.nextSibling);
+        }
+        else if (this.portalEl.parentNode !== dialog) {
+            dialog.appendChild(this.portalEl);
+        }
+        this.watchDialogClose(dialog);
+        const root = this.portalEl.getRootNode();
+        this.copyFocusStylesInto(root);
+        // In a shadow root, the copied dark-mode rule can't see a [data-theme="dark"] on the page.
+        this.portalEl.style.border = root instanceof ShadowRoot && closest$1('[data-theme="dark"]', this.el) ? 'var(--pine-border)' : '';
+    }
+    forgetOpen() {
+        const index = openAutoPopovers.indexOf(this);
+        if (index >= 0)
+            openAutoPopovers.splice(index, 1);
+    }
+    /**
+     * Whether an Escape is this popover's. One from a dialog the popover isn't in belongs to that
+     * dialog when it's above it: a top-layer dialog or a pds-modal. A plain non-modal dialog inside
+     * the popover's modal doesn't close on Escape, so the popover takes it.
+     */
+    takesEscapeFrom(event) {
+        var _a, _b;
+        const origin = ((_b = (_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) !== null && _b !== void 0 ? _b : event.target);
+        const dialog = closest$1('dialog[open]', origin);
+        if (!dialog || containsComposed$1(dialog, this.portalEl))
+            return true;
+        return !(dialog.classList.contains('pds-modal__backdrop') || dialog.matches(':modal'));
+    }
     /**
      * Adds light dismiss listeners (click outside and escape key)
      */
@@ -20815,6 +21411,19 @@ class PdsPopover {
         document.addEventListener('click', this.boundClickOutsideHandler, true);
         document.addEventListener('keydown', this.boundEscapeKeyHandler);
     }
+    /** Closes the popover when the dialog it opened in closes, so it isn't left open inside. */
+    watchDialogClose(dialog) {
+        if (this.watchedDialog === dialog)
+            return;
+        this.unwatchDialogClose();
+        this.watchedDialog = dialog;
+        dialog.addEventListener('close', this.onDialogClose);
+    }
+    unwatchDialogClose() {
+        var _a;
+        (_a = this.watchedDialog) === null || _a === void 0 ? void 0 : _a.removeEventListener('close', this.onDialogClose);
+        this.watchedDialog = null;
+    }
     /**
      * Removes light dismiss listeners
      */
@@ -20840,7 +21449,7 @@ class PdsPopover {
      * Handles clicks outside the popover for light dismiss (auto type only)
      */
     handleClickOutside(event) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         // Ignore events that occurred at or before the popover opened
         // This prevents the opening click from immediately closing the popover
         // Convert event.timeStamp (DOMHighResTimeStamp from performance.now()) to epoch time
@@ -20851,16 +21460,18 @@ class PdsPopover {
         if (eventTime <= this.openTimestamp) {
             return;
         }
-        const target = event.target;
+        // In a shadow root, event.target is only its host.
+        const target = ((_b = (_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) !== null && _b !== void 0 ? _b : event.target);
         // A datepicker's calendar is portaled to the body: a click in the calendar of a datepicker
-        // inside this popover, in its content or its trigger, isn't outside it.
-        const calendar = (_b = (_a = target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.pds-datepicker-calendar-portal');
+        // inside this popover, in its content or its trigger, isn't outside it. The target can be
+        // inside the calendar's shadow root, so look up across it.
+        const calendar = closest$1('.pds-datepicker-calendar-portal', target);
         const owner = calendar === null || calendar === void 0 ? void 0 : calendar.pdsDatepicker;
         if (owner && (containsComposed$1(this.portalEl, owner) || containsComposed$1(this.triggerEl, owner)))
             return;
         // Check if click is outside both the popover portal and the trigger
-        const clickedInsidePopover = (_c = this.portalEl) === null || _c === void 0 ? void 0 : _c.contains(target);
-        const clickedInsideTrigger = (_d = this.triggerEl) === null || _d === void 0 ? void 0 : _d.contains(target);
+        const clickedInsidePopover = containsComposed$1(this.portalEl, target);
+        const clickedInsideTrigger = containsComposed$1(this.triggerEl, target);
         if (!clickedInsidePopover && !clickedInsideTrigger) {
             this.hide();
         }
@@ -20881,14 +21492,19 @@ class PdsPopover {
      * Mirrors native Popover API: Escape closes and returns focus to trigger
      */
     handleEscapeKey(event) {
-        if (event.key === 'Escape') {
-            // Prevent default Escape behavior and stop propagation
-            // This mirrors native Popover API which handles Escape exclusively
-            event.preventDefault();
-            event.stopPropagation();
-            // Close popover and return focus to trigger
-            this.hide();
-        }
+        // A control inside that closes on Escape (a datepicker, a combobox) has handled it already.
+        if (event.key !== 'Escape' || event.defaultPrevented)
+            return;
+        // Like the native Popover API, Escape closes only the top popover: the last one opened that
+        // it applies to. Every open popover hears it, so each checks whether it's that one.
+        const top = [...openAutoPopovers].reverse().find(popover => popover.takesEscapeFrom(event));
+        if (top !== this)
+            return;
+        // Take the key, so the dialog or modal around it doesn't close too.
+        event.preventDefault();
+        event.stopPropagation();
+        // Close popover and return focus to trigger
+        this.hide();
     }
     /**
      * Handles scroll events to reposition the popover (debounced for performance)
@@ -20993,13 +21609,20 @@ class PdsPopover {
         }
         this.portalEl.style.top = `${top}px`;
         this.portalEl.style.left = `${left}px`;
+        // `position: fixed` measures from the viewport unless an ancestor becomes its containing block,
+        // as a modal dialog does with its backdrop filter. Shift by however far it landed from the spot.
+        const placed = this.portalEl.getBoundingClientRect();
+        if (Math.abs(placed.top - top) > 0.5 || Math.abs(placed.left - left) > 0.5) {
+            this.portalEl.style.top = `${2 * top - placed.top}px`;
+            this.portalEl.style.left = `${2 * left - placed.left}px`;
+        }
         // Reset the repositioning guard after a short delay
         setTimeout(() => {
             this.isRepositioning = false;
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (hAsync(Host, { key: '66347d4922274d25504e5be134b36f05a3f12fdc', id: this.componentId }, hAsync("span", { key: '8f29d54d58cf0c66f86470c77c676716f1ab056f', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: '5c89b687cfc01e67d3c11835e77755de88f03584', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("div", { key: '0ca9aff3021720098d86ec29eb69cbf149ef79a9', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: 'b73c3324d3322c41c68161e9ada51499c0e49cb0', onSlotchange: this.handleContentSlotChange }))));
+        return (hAsync(Host, { key: 'da8a0c715df1199231b1265085f3f9ae0234032d', id: this.componentId }, hAsync("span", { key: 'f35023492399420829cec2e88556462f5ac1663e', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: '38ebe92eebb87665467b3f92ff94dc8095450063', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("div", { key: '8917930f4520544d14bbd68b4c7936dd60af19e3', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: '28d3f9112256edd95721a79a7072a9e35a3712bf', onSlotchange: this.handleContentSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21061,10 +21684,10 @@ class PdsProgress {
         this.hostKeeper.disconnect();
     }
     render() {
-        const normalizedFillColor = normalizeColorValue(this.fillColor);
+        const normalizedFillColor = normalizeColorValue$1(this.fillColor);
         const hostClass = this.animated ? { 'is-animated': this.animated } : '';
         this.hostKeeper.record(hostClass);
-        return (hAsync(Host, { key: '5573a5c48eee2f7968835db92afdaebb73c1b85e', class: hostClass }, hAsync("div", { key: 'bb5cf260495be798f4272673884336022c28441e', class: "pds-progress" }, hAsync("label", { key: '017efa649ada73ec724b930e06bbf1ab19a18f61', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: 'e648d910b072b7b2ca1c4a92c0832bf6e2ef5406', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '1f9f1733ff2cd6e2ec81e9a46759ff451cf158f7', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (hAsync(Host, { key: 'a224e1e9bc50433553ab8bf4b0d772f01148ee76', class: hostClass }, hAsync("div", { key: '261742044f3d68c204cbf640cc4447eb6d74df11', class: "pds-progress" }, hAsync("label", { key: 'd686bdc6ab450bf8c14dd56077525a3139593f46', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: 'c716e977a952a628aec600fa680aa9c3b8d0e996', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '44176a580b435f69993be4a60ee2e888b87e10fb', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     get el() { return getElement(this); }
     static get style() { return pdsProgressCss(); }
@@ -21099,7 +21722,7 @@ class PdsProperty {
         this.icon = 'star';
     }
     render() {
-        return (hAsync(Host, { key: '0f6195faaaf3adb11ad14f09a36c78f94e2bdf65', id: this.componentId }, hAsync("pds-box", { key: '0a9670c0e38065f5fbe035b81703e21155396ff8', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '13b497e8670bc5210a752b8c24b9fd6397b1a8c9', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: 'a9b3cf5fd830b7551f68866a62341670f8b61b34' }))));
+        return (hAsync(Host, { key: 'd599b62be4bacf1d89afcc26b14fc93bdc9bb3a4', id: this.componentId }, hAsync("pds-box", { key: 'd7f80f6598615c761d672893c8acab09bd9ea33f', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '15a6a6545c2cd2332bd830451106b7b08adc39ff', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: '4e5661563b99ec56189447faabcdd1ae631159b2' }))));
     }
     static get style() { return pdsPropertyCss(); }
     static get cmpMeta() { return {
@@ -21218,13 +21841,13 @@ class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'add893cd82f79b9398589bd5c0a72d5ae4a90475', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), hAsync("span", { key: 'b58eed8681d1932397d38ffe82515987e6486e08', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'ccd618855831bcee309e815f2cd2712fd4e8fe1f', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), hAsync("span", { key: '2e372a880c28f48fb804bac2518208082c141fad', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '7374924219e59eab46a7ced9e7062c3e674b4451', icon: danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '889d502575f6a162f450b6b58d76a6f6f1c74e4b', icon: danger, size: "small" }), this.errorMessage))
         ];
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (hAsync(Host, { key: '24269923f168d1d39ebfc1994619736f0dc8087a', class: hostClass }, this.hasImage() && (hAsync("div", { key: '74a72bef89aa012047cbf3a1744fcd33f13bb464', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: '99dbcfdac86cb7c012fd44eab607217e21304bab', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (hAsync(Host, { key: '374003032b28407581a55f1fb0a304c49acf3c16', class: hostClass }, this.hasImage() && (hAsync("div", { key: '7eeb516267de1afcfa85fc7567999db488c2f4f5', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'a312fea06f0c015bffab3bb392ff04d4913fd1c0', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     get el() { return getElement(this); }
     static get style() { return labelCss$3() + pdsRadioCss(); }
@@ -21416,13 +22039,13 @@ class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (hAsync(Host, { key: '9dc78eb36bbc1b872f4320203dbbc64e43816ebf', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (hAsync(Host, { key: 'bf8063c1a99e272bb3f6bc647998a6ef103f8a71', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (hAsync("div", { key: '7b6f95608dcf356b141ef5d590ff3070f83b5975', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: '6e1a634c9b81ca3f3bbbe9c6590bcd4efc97e6ea', class: {
+            } }, this.groupLabel && (hAsync("div", { key: '8564ed3f8f99cdc1a0e5b189aacc6960923eb5f7', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: '2309c9373790182cde030c1dbda88fa3bdcaaf12', class: {
                 'pds-radio-group__radios': true,
                 'pds-radio-group__radios--row': this.direction === 'row',
                 'pds-radio-group__radios--column': this.direction === 'column',
-            } }, hAsync("slot", { key: 'b5b16148f3c77d425a50b7ada8a822e9919ef5c5', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: 'ca6b98f926b8d7a53fda630170ac037c99f5ee85', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: '37b57e2622370364e619ea090712a7b79fe79501', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '6a362d048a67312b1b227f71cc4b8f821ae0817e', icon: danger, size: "small" }), this.errorMessage))));
+            } }, hAsync("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'd242da328731e55fa52d8e624fdfc750bfa6cce4', icon: danger, size: "small" }), this.errorMessage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21531,7 +22154,7 @@ class PdsRow {
             'min-height': this.minHeight,
         }));
         this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
-        return hAsync(Host, { key: 'ee3a32ae1376919c7c2d1fcf186a1b7c272ee085', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return hAsync(Host, { key: '78a505fef7132f9545916155d2485a6d2df8f4a5', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     get el() { return getElement(this); }
     static get style() { return pdsRowCss(); }
@@ -21803,7 +22426,7 @@ class PdsSelect {
             'has-action': hasAction && !this.hideLabel ? 'true' : null,
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (hAsync(Host, Object.assign({ key: 'c99bfc000ad351298e154554a8b22635b1abb718', class: hostClass }, hostAttributes), hAsync("div", { key: '35374b150cbef745c6a6068ba5a2fde0803c0314', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: 'a3b9bae451c5c384606790a29bf8ab5fc70427c0', class: "pds-select__label-wrapper" }, hAsync("label", { key: '80d7740a05a6d3cce6d51224169eb6c2501c4896', htmlFor: this.componentId }, hAsync("span", { key: 'a51c02d7c84f75bb168889dab50cae807271c63d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: '11444dad795bd02c008252a60e701125861e4af0', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: 'ce54fa1df287d96a7503bb19cd2ba6c74a6da638', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: '22c55e78999076a37d43fb708dabc7379dd4cee3', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: '45628074fbcdb259b8bba42299082423309a6968', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
+        return (hAsync(Host, Object.assign({ key: '343ed671e67dd1d6f9eb284b07e06d59877c64e9', class: hostClass }, hostAttributes), hAsync("div", { key: '650aed0869b02f658feb16ee99f17e1cd22e5a8e', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '74739461acbea33c92279ec8ec9042d6af1773c1', class: "pds-select__label-wrapper" }, hAsync("label", { key: '1ad96ffd243000358edfbd79054ee770e1ba97d3', htmlFor: this.componentId }, hAsync("span", { key: 'b832868db4f9cd4fd2f8313054d2e96e106189ab', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: 'e83c1a1a0a5646fc8abf9e50bc374f52b56be773', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: 'a34880120b88124b5122350856d023368f96abf7', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: 'df6abaf6a630761a32b263813181ff3453757e0d', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: 'f9197284ef9965d693242a652b583f48bc3d7097', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -24562,7 +25185,7 @@ class PdsSortable {
     render() {
         const classNames = this.classNames();
         this.hostKeeper.record(classNames);
-        return (hAsync(Host, { key: 'fb6e9a79babf01980c04ee7208d195510493a7dc', class: classNames, id: this.componentId }, hAsync("slot", { key: '5735ca3af531a736f07d1fafde8ae544d00a75bb' })));
+        return (hAsync(Host, { key: 'a0e532d31561748b4632a6be9163562f990af804', class: classNames, id: this.componentId }, hAsync("slot", { key: 'd1b0defb683f841e6708374fff4bf62eb7fd5080' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24637,7 +25260,7 @@ class PdsSortableItem {
     }
     render() {
         this.hostKeeper.record('pds-sortable-item');
-        return (hAsync(Host, { key: '3f9098a7c938bfa6443f08fb8b0a7c7217230890', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: '77718a6867ddd8bc029bb3ef995f6ee9a5999ce7', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: 'aad7f46e776ece85858798f8f1a1a50c9022b84f', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: 'afa9346ec8fd7aa6132a15dd44d3b1cae24500b9' }), this.enableActions && (hAsync("div", { key: 'c28c85391117542999c12d673879768394002c90', class: "pds-sortable-item__actions" }, hAsync("slot", { key: '88ab53f3ba4ed47715e31935b861d9ab42342b32', name: "sortable-item-actions" })))));
+        return (hAsync(Host, { key: '2065ccb474ae4b7032edc3c37aa6855f3048909d', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: '32385cc94837a3d0bc1c496615135c79274afe35', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: 'ea94e28b2867aa20622ca073dc31d3b4a11eebbb', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: 'fb18aa90be0b8fa3832a5dd2b02a7b571205341f' }), this.enableActions && (hAsync("div", { key: '4c6e59d77a7b2183552533a544f4a70ce0cc7011', class: "pds-sortable-item__actions" }, hAsync("slot", { key: '497b1ff88436175d9365a28032e109b6fa118e44', name: "sortable-item-actions" })))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsSortableItemCss(); }
@@ -24760,9 +25383,9 @@ class PdsSwitch {
         const hostClass = this.switchClassNames();
         const ariaDisabled = this.disabled ? 'true' : null;
         this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
-        return (hAsync(Host, { key: '6d4b51307f2619a99981e344f782f69871aabf0f', class: hostClass, "aria-disabled": ariaDisabled }, hAsync("label", { key: '068ef3759e2bc3d9870cff36714de0e9cf558b2b', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'aa28fb67332bb2d81c09b6c749c1cb0f079e327f', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: 'd237980a9ce2abc04d57085df022f28dfa2768e4', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: '83d0e2110cfdcd3208319302af237178dfd419a4', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            hAsync("div", { key: '137d9e5626b34ade33f68c4c24c3dcb154500dc6', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            hAsync("div", { key: '64c3b8884d0568e26953f67a95d045aa5731c41f', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'f99f8045eb33d0c60518f3b4c6a0183170a50f4a', icon: danger, size: "small" }), this.errorMessage)));
+        return (hAsync(Host, { key: 'ee8576e523348ff9eed1b6087626849bb0966608', class: hostClass, "aria-disabled": ariaDisabled }, hAsync("label", { key: '09433b5356d718be65f4f2eb61f35fff1d000e10', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'f996a0fad56119674cfb7d95e1444bf411b64396', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: '4b23305d3cc0f5b37b23c6b79a14cfba57c16816', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: '258b5ccf0d4b01518df3a37772d694cb37569ffa', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            hAsync("div", { key: 'c8196fa2ce832de3a8c6d987a78fd65d791c4c59', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            hAsync("div", { key: '948894dd2e642689af6cad545a0b31f7c4711d87', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'd4b72b49bfd38a396b8f7c0686e1b2ef92d65491', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -24804,6 +25427,7 @@ class PdsTab {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.pdsTabClick = createEvent(this, "pdsTabClick");
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * Determines the tab's disabled state.
          * @defaultValue false
@@ -24822,6 +25446,12 @@ class PdsTab {
         /** @internal */
         this.selected = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     // Unwraps a nested <a>/<button> left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
         unwrapReconnectedContent(this.el.querySelector('.pds-tab__content'), 'a.pds-tab, button.pds-tab', '.pds-tab__content');
@@ -24857,6 +25487,9 @@ class PdsTab {
         return classes.filter(Boolean).join(' ');
     }
     render() {
+        // The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
+        // that strips it leaves this tab unslotted, and pds-tabs has no default slot. Put it back.
+        this.hostKeeper.record('', {}, { slot: 'tabs' });
         const availabilityTabEdgeInlineStart = (hAsync("span", { class: "pds-tab-edge", role: "presentation" }));
         const availabilityTabEdgeInlineEnd = (hAsync("span", { class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
         const content = (hAsync(Fragment, null, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, hAsync("div", { class: "pds-tab__content" }, hAsync("slot", null))));
@@ -25176,7 +25809,7 @@ class PdsTableBody {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '0278bf4c680e9054748039dddbbb5cfcce3bb4e6', role: "rowgroup", part: "body" }, hAsync("slot", { key: '44cf68f3b0dff78312a3d31d898209544ce8131e' })));
+        return (hAsync(Host, { key: '817532e93c8f91ef64cd0f90aa6c4372c3b7d83f', role: "rowgroup", part: "body" }, hAsync("slot", { key: '296ba876c6716e85252a06008bd55d59624223e3' })));
     }
     static get style() { return pdsTableBodyCss(); }
     static get cmpMeta() { return {
@@ -25314,11 +25947,11 @@ class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: 'c32bd43c6080e9a8a98578016973de9025e5d367', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
+        return (hAsync(Host, { key: 'bedaeeb5723299656f872a760ed1dd80c7fe8793', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, hAsync("slot", { key: '5b2af30784f41dcc7a0f66187f222ec2472f207f' })));
+                : {} }, hAsync("slot", { key: '45182ee3e004097660432f552780b3d27671bd46' })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -25387,7 +26020,7 @@ class PdsTableHead {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'ca88406002f440e9b9eefa639dac056e85403bd8', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: '7c1939791a0573c6eccdec66d7b6d5de122a42c1', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (hAsync("pds-checkbox", { key: '3a8581bbf9b5fc26396937e7d0bab370f6078090', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), hAsync("slot", { key: 'a736a10378936d4e4de5b139f3f57a345483c1bb' })));
+        return (hAsync(Host, { key: 'de3faae735e90f5fde1258b5acb826f5f9dbd170', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: 'e590e57c8b37ec0ad18e96077401c4692bbd45a4', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (hAsync("pds-checkbox", { key: '44ca7eda63185672939909e121a86e6502080a7d', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), hAsync("slot", { key: '0671df85d7989cff7266bfd3d1b4d62b332d2e81' })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pdsTableHeadCss(); }
@@ -25608,11 +26241,11 @@ class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: 'de7b2fb674def0a8046e1940488d435176dc9851', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (hAsync(Host, { key: '13de42d136c5b037cd1545cd5b789b4660e23b87', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, hAsync("slot", { key: '4ada173faf7d106cca34920540703a1d04f7e5bd' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: '1b0e87d74b6fa359e901a8e66479f37a88cdcf1c', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, hAsync("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: 'cba838fa029b280561676c2b57af7f8f00055511', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pdsTableHeadCellCss(); }
@@ -25778,7 +26411,7 @@ class PdsTableRow {
         }
     }
     render() {
-        return (hAsync(Host, { key: '16ca08eefa74468559a1c084b7619836f01b27af', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '4b4d2ae15d519e08cd6710ddb6759923d478457c', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: '78b9a731113cce82c59f40713561033f563ffc5f', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: '5522f2335912f59013e9fc1e1fc6070d645cd519' })));
+        return (hAsync(Host, { key: '5323521abc5c2464299cf77520fb38ec81297866', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: 'eb94dd282f885d3466b6177b2454cbcc4f932466', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: '222eaaedd4bebddc18cebf01bf4da81004773a96', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: '010f222fa02b1809ff818f7a030c2a12fc3e3abb' })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pdsTableRowCss(); }
@@ -25805,6 +26438,7 @@ const pdsTabpanelCss = () => `:host{display:block}:host(.pds-tabpanel--stretch-a
 class PdsTabpanel {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * Keeps track of the tabpanel selected state, this property is passed by parent component
          */
@@ -25816,12 +26450,22 @@ class PdsTabpanel {
         /** @internal */
         this.stretch = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     // Unwraps a nested .pds-tabpanel left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
         unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
     }
     render() {
-        return (hAsync(Host, { key: '87b00d828c9cddbcccd5d6e89dab7541a3c5c839', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, hAsync("div", { key: 'd7058a727d010351c73b5287f45991d48ef71151', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: '97861fcd8432206a1115135fad919d75dc327112' }))));
+        const hostClass = this.stretch && this.selected ? "pds-tabpanel--stretch-active" : "";
+        // The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
+        // that strips it (and the stretch-active class) leaves this panel unslotted. Put both back.
+        this.hostKeeper.record(hostClass, {}, { slot: 'tabpanels' });
+        return (hAsync(Host, { key: '5d867e31d0f5f14e18f1c81035991c90bb5fe529', slot: "tabpanels", class: hostClass || undefined }, hAsync("div", { key: '255d37a73089904cfb170cd89f7b829756f6295f', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: '714d3d0cf0fc6173e243a2b077d9b9918ae4acf9' }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsTabpanelCss(); }
@@ -25852,6 +26496,35 @@ class PdsTabs {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.hostKeeper = new HostStylingKeeper();
+        this.slotChangeScheduled = false;
+        // The tab that most recently had focus, tracked continuously via `focusin` rather
+        // than sampled inside handleSlotChange: removing a focused element blurs it to
+        // <body> synchronously, but slotchange only fires later (a microtask checkpoint),
+        // by which point the sample would already read <body>.
+        this.lastFocusedTab = null;
+        this.handleFocusIn = (event) => {
+            var _a;
+            const tab = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('pds-tab');
+            if (tab && tab.closest('pds-tabs') === this.el) {
+                this.lastFocusedTab = tab;
+            }
+        };
+        // Focus that leaves a tab forgets it, so replacing the tab later doesn't pull focus back,
+        // including focus that moves into a panel. Focus moving to another tab is tracked again
+        // by focusin, which follows focusout. Removing a focused tab also fires focusout (with no
+        // relatedTarget), while the tab is still connected, so that case is checked a microtask
+        // later: a tab that's gone by then was removed, and is kept so its focus can be restored.
+        this.handleFocusOut = (event) => {
+            const tab = this.lastFocusedTab;
+            if (event.relatedTarget) {
+                this.lastFocusedTab = null;
+                return;
+            }
+            queueMicrotask(() => {
+                if (this.lastFocusedTab === tab && (tab === null || tab === void 0 ? void 0 : tab.isConnected))
+                    this.lastFocusedTab = null;
+            });
+        };
         /**
          * Adds a divider rule beneath the tab list.
          * @defaultValue false
@@ -25871,12 +26544,44 @@ class PdsTabs {
          * @defaultValue false
          */
         this.nav = false;
+        // The tabs and tabpanels slots fire slotchange separately, even for the same morph
+        // (both swapped together). Coalesce same-tick firings into one re-collection pass
+        // with a microtask, the way a single DOM mutation already only triggers one event.
+        this.handleSlotChange = () => {
+            if (this.slotChangeScheduled)
+                return;
+            this.slotChangeScheduled = true;
+            this.activeTabNameBeforeSlotChange = this.activeTabName;
+            queueMicrotask(() => {
+                this.slotChangeScheduled = false;
+                this.recollectAfterSlotChange();
+            });
+        };
     }
     connectedCallback() {
         this.hostKeeper.connect(this.el);
+        this.el.addEventListener('focusin', this.handleFocusIn);
+        this.el.addEventListener('focusout', this.handleFocusOut);
+        // componentDidLoad only runs once, so a reconnect (the element moved in the DOM) re-attaches
+        // the slotchange listeners disconnectedCallback removed. Before the first render the slots
+        // don't exist yet, so this is a no-op and componentDidLoad attaches them.
+        const isReconnect = this.tabsSlot != null;
+        this.setupSlotChangeListeners();
+        // Content can change while detached, with no listener to see it — re-collect now
+        // instead of waiting on a slotchange that may never come if nothing changes again.
+        if (isReconnect)
+            this.handleSlotChange();
     }
     disconnectedCallback() {
+        var _a, _b;
         this.hostKeeper.disconnect();
+        this.el.removeEventListener('focusin', this.handleFocusIn);
+        this.el.removeEventListener('focusout', this.handleFocusOut);
+        (_a = this.tabsSlot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        (_b = this.tabPanelsSlot) === null || _b === void 0 ? void 0 : _b.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    componentDidLoad() {
+        this.setupSlotChangeListeners();
     }
     tabClickHandler(event) {
         if (this.componentId === event.detail[1]) {
@@ -25904,8 +26609,8 @@ class PdsTabs {
     // Navigation mode is an explicit, single source of truth: `nav` drives both the
     // container (<nav> of links vs role=tablist of buttons) and every child tab (via
     // `navMode`), so the tabs present when the strip initializes can't mix the two.
-    // (Child discovery is load-time only, like `variant`/`id`; tabs added after load
-    // aren't managed.)
+    // Unlike child discovery (re-run on slotchange), `nav` itself isn't watched — it's
+    // a load-time mode switch, not something a consumer is expected to toggle live.
     get isNav() {
         return !!this.nav;
     }
@@ -25958,9 +26663,52 @@ class PdsTabs {
         this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);
         this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);
     }
+    // The initial collection (componentWillLoad) only sees tabs/panels present at load.
+    // A tab or panel added, removed or replaced afterwards — including by a DOM morph
+    // swapping in a fresh copy — needs to be re-collected the same way pds-dropdown-menu,
+    // pds-select and pds-multiselect already do for their own slotted content.
+    setupSlotChangeListeners() {
+        var _a, _b, _c, _d;
+        this.tabsSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="tabs"]');
+        this.tabPanelsSlot = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="tabpanels"]');
+        (_c = this.tabsSlot) === null || _c === void 0 ? void 0 : _c.addEventListener('slotchange', this.handleSlotChange);
+        (_d = this.tabPanelsSlot) === null || _d === void 0 ? void 0 : _d.addEventListener('slotchange', this.handleSlotChange);
+    }
+    recollectAfterSlotChange() {
+        const previousActiveTabName = this.activeTabNameBeforeSlotChange;
+        // A removed node stays referenced but disconnected — checked before
+        // findAllChildren() re-collects, since that doesn't affect this either way.
+        const focusedTabWasRemoved = !this.isNav && this.lastFocusedTab != null && !this.lastFocusedTab.isConnected;
+        this.findAllChildren();
+        this.warnOnNavConfig();
+        // Keep the current selection if it still exists. Otherwise clear it so
+        // passPropsToChildren() falls back to the first enabled tab, the same way
+        // it does when a consumer never set activeTabName in the first place.
+        if (previousActiveTabName != null && !this.tabs.some((tab) => tab.name === previousActiveTabName)) {
+            this.activeTabName = undefined;
+        }
+        this.passPropsToChildren();
+        // If the tab that last had focus was removed (e.g. replaced by a fresh copy),
+        // the browser already silently dropped focus to <body> — restore it to the new
+        // active tab's button so keyboard/screen-reader users don't lose their place.
+        // Deferred a frame since a freshly-created pds-tab's button doesn't exist until
+        // its own render completes; re-checked then in case focus moved on its own, to
+        // the tabs or anywhere else — only focus the removal dropped to <body> is restored.
+        if (focusedTabWasRemoved) {
+            this.lastFocusedTab = null;
+            requestAnimationFrame(() => {
+                var _a;
+                const active = document.activeElement;
+                if (active && active !== document.body)
+                    return;
+                const newActiveTab = this.tabs.find((tab) => tab.name === this.activeTabName);
+                (_a = newActiveTab === null || newActiveTab === void 0 ? void 0 : newActiveTab.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+    }
     propGeneration(child, index = 0) {
         child.parentComponentId = this.componentId.toString();
-        child.variant = this.variant.toString();
+        child.variant = this.variant;
         child.selected = (this.activeTabName === child.name) ? true : false;
         child['index'] = index;
     }
@@ -26016,7 +26764,7 @@ class PdsTabs {
         // Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
         // it is a prop change, not a strip.
         this.hostKeeper.record(hostClass);
-        return (hAsync(Host, { key: 'ea26bc4e4cadd4621511afa01ca2a353a053fd0e', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, hAsync("slot", { key: '3f920708c647920af3d0d50f74b5409d30d70af8', name: "tabpanels" })));
+        return (hAsync(Host, { key: '91a9a5cf4348b73ef5ec21430db20468fb67906c', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, hAsync("slot", { key: 'f0ec002e513f3e91956e905c23e35dae0e6328ad', name: "tabpanels" })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsTabsCss(); }
@@ -26142,7 +26890,7 @@ class PdsText {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (hAsync(Tag, { key: '98269ec5b06387f89026a4f1327688c611b25a46', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: '73b6169bdd25a73930d1a01db3a0b5359491ab67' })));
+        return (hAsync(Tag, { key: '6ae89af63963745cd4e8fa734a62f37bc27c59ac', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: '008f5852aeb4b43cff1a2fea9be9d8fbba9f7934' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26488,10 +27236,10 @@ class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (hAsync(Host, { key: '2544624ceb5a51981954b76eb7a96f8bf0a258b5', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: 'e85e356a15dd11bbea276b122e67da23342e6ceb', class: "pds-textarea" }, this.label &&
-            hAsync("div", { key: '452e96073c2045c2cb2dfa0c9ef7f7102096ab51', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '84f88bb8211120801cab8b0d7a4915a128fadbfb', htmlFor: this.componentId }, hAsync("span", { key: '43038785de0cb8c833ccd546a00bfc8879c94ecb', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '868a11635731026168c1ff75d81121ddb96ab7a6', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '80cb7da264045aba177d20f18df31b274afbf485', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            hAsync("p", { key: '493b4378b668a96c7c66cbf2435f9c9d06bd0a72', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            hAsync("p", { key: 'ae6826d389a2a92fbff8de62a0fd55811764eb15', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'e3dd638311ee2617c8b8ae5743b4e87e5a773ebd', icon: danger, size: "small" }), this.errorMessage))));
+        return (hAsync(Host, { key: '5933dab0c3cd25b1cf2f6851ece8e8064bc7f3b9', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '4f1752514d8e5b0f0e3439515cb9e5f043607da1', class: "pds-textarea" }, this.label &&
+            hAsync("div", { key: 'd4e6df0b381d781b70eeae72ff2f0e9428c0d901', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '747d82067eb571d02840cfd981865821099f288b', htmlFor: this.componentId }, hAsync("span", { key: 'bfab6e8ede66d0169dd020b7dd97e125aba417b0', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: 'a18611c03270e7491c1af69f931419c832192c06', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '868382c7b04a4e59c0daa9d98afcdc9048f6224f', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            hAsync("p", { key: 'dcb36f21443d2a782c25b7c29c4ce6215f3b212b', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            hAsync("p", { key: 'be30fb1a38453296e26b775955389c0ec569df67', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'd93dce10d9d9db5815ac5f331848940aed735ba0', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -26665,13 +27413,13 @@ class PdsToast {
         return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (hAsync(Host, { key: '250f871e3dfe412a11e8fe4c0e43c5ef7d886e9b', hidden: !this.isVisible }, hAsync("div", { key: '8c9d995cd597544a3c6ded08d18e09ff4619b364', class: {
+        return (hAsync(Host, { key: '754a4583cefca47a3d3fea7dab036c06ea8aabcd', hidden: !this.isVisible }, hAsync("div", { key: '8ac294344ca459202c0883e724e09a4218342cc4', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '83c4cad9b619ca0ad77721b7472e240719459290', class: "pds-toast__message" }, hAsync("slot", { key: 'c2420b955c89eb8e32dd4a1aa8d89bbbbf1b9ca9' })), this.dismissible && (hAsync("button", { key: '940bb9f1d235d7c31a334bec9aefdfdbd1c5ccfd', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: 'eaf615d41c138e2c73088d29bac9349f49a63ba7', class: "pds-toast__message" }, hAsync("slot", { key: '33973447154d80b016f5a7954b0473db03228379' })), this.dismissible && (hAsync("button", { key: 'e189834633e1e648282ee43633fd05e53ce38869', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'f6b68f4cf9df23b367ade351dd4f00fc6f6e6442', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '623a0e4d56e30781fb31bcd085511c17a4777edc', name: "remove" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27046,9 +27794,9 @@ class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (hAsync(Host, { key: 'e80abb11248d9bf6aec1ae738c61692594975630', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '9ff484925a1792302eee230a5c37a0268d536935', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (hAsync(Host, { key: '2e28dff93cd22fd3816d71b67e38883061a8b2bc', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '9e7ea50427587f61dcea1ea97e10d71f4d0c9d92', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '738c314a816e82fd81a0c0e9895d51af45b75eb2' })), hAsync("div", { key: '5b0477cd433cae0b53c4d5ce5767dc703be28ee0', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '51ad497357c1d1547bba69d07fd7fa1b675c021f', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '08c1ff63c91b97b4df1362eb9b2e42b6fd556b11' })), hAsync("div", { key: '5cfe25e21d1f096b76335570fbb930a7bc8c95f8', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: 'e7e8728d7c8a0c74933cef070aa38f88a1f53a32', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {