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

package/dist/esm/pds-combobox.entry.js

@@ -0,0 +1,4498 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
+import { i as isSpecTest, m as messageId, a as assignDescription } from './form-BuRbS7Hp.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as size, h as hide } from './floating-ui.dom-Cuc0DYlm.js';
+import { c as cancelDebouncedEvent, d as debounceEvent, f as flushDebouncedEvent } from './utils-OYK5-nwe.js';
+import { a as closest } from './closest-DHPzKMVS.js';
+import './keep-hydrated-BgNaWLoS.js';
+
+/*! @license DOMPurify 3.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.3/LICENSE */
+
+const {
+  entries,
+  setPrototypeOf,
+  isFrozen,
+  getPrototypeOf,
+  getOwnPropertyDescriptor
+} = Object;
+let {
+  freeze,
+  seal,
+  create
+} = Object; // eslint-disable-line import/no-mutable-exports
+let {
+  apply,
+  construct
+} = typeof Reflect !== 'undefined' && Reflect;
+if (!freeze) {
+  freeze = function freeze(x) {
+    return x;
+  };
+}
+if (!seal) {
+  seal = function seal(x) {
+    return x;
+  };
+}
+if (!apply) {
+  apply = function apply(func, thisArg) {
+    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      args[_key - 2] = arguments[_key];
+    }
+    return func.apply(thisArg, args);
+  };
+}
+if (!construct) {
+  construct = function construct(Func) {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+    return new Func(...args);
+  };
+}
+const arrayForEach = unapply(Array.prototype.forEach);
+const arrayLastIndexOf = unapply(Array.prototype.lastIndexOf);
+const arrayPop = unapply(Array.prototype.pop);
+const arrayPush = unapply(Array.prototype.push);
+const arraySplice = unapply(Array.prototype.splice);
+const stringToLowerCase = unapply(String.prototype.toLowerCase);
+const stringToString = unapply(String.prototype.toString);
+const stringMatch = unapply(String.prototype.match);
+const stringReplace = unapply(String.prototype.replace);
+const stringIndexOf = unapply(String.prototype.indexOf);
+const stringTrim = unapply(String.prototype.trim);
+const objectHasOwnProperty = unapply(Object.prototype.hasOwnProperty);
+const regExpTest = unapply(RegExp.prototype.test);
+const typeErrorCreate = unconstruct(TypeError);
+/**
+ * Creates a new function that calls the given function with a specified thisArg and arguments.
+ *
+ * @param func - The function to be wrapped and called.
+ * @returns A new function that calls the given function with a specified thisArg and arguments.
+ */
+function unapply(func) {
+  return function (thisArg) {
+    if (thisArg instanceof RegExp) {
+      thisArg.lastIndex = 0;
+    }
+    for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+      args[_key3 - 1] = arguments[_key3];
+    }
+    return apply(func, thisArg, args);
+  };
+}
+/**
+ * Creates a new function that constructs an instance of the given constructor function with the provided arguments.
+ *
+ * @param func - The constructor function to be wrapped and called.
+ * @returns A new function that constructs an instance of the given constructor function with the provided arguments.
+ */
+function unconstruct(Func) {
+  return function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+    return construct(Func, args);
+  };
+}
+/**
+ * Add properties to a lookup table
+ *
+ * @param set - The set to which elements will be added.
+ * @param array - The array containing elements to be added to the set.
+ * @param transformCaseFunc - An optional function to transform the case of each element before adding to the set.
+ * @returns The modified set with added elements.
+ */
+function addToSet(set, array) {
+  let transformCaseFunc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : stringToLowerCase;
+  if (setPrototypeOf) {
+    // Make 'in' and truthy checks like Boolean(set.constructor)
+    // independent of any properties defined on Object.prototype.
+    // Prevent prototype setters from intercepting set as a this value.
+    setPrototypeOf(set, null);
+  }
+  let l = array.length;
+  while (l--) {
+    let element = array[l];
+    if (typeof element === 'string') {
+      const lcElement = transformCaseFunc(element);
+      if (lcElement !== element) {
+        // Config presets (e.g. tags.js, attrs.js) are immutable.
+        if (!isFrozen(array)) {
+          array[l] = lcElement;
+        }
+        element = lcElement;
+      }
+    }
+    set[element] = true;
+  }
+  return set;
+}
+/**
+ * Clean up an array to harden against CSPP
+ *
+ * @param array - The array to be cleaned.
+ * @returns The cleaned version of the array
+ */
+function cleanArray(array) {
+  for (let index = 0; index < array.length; index++) {
+    const isPropertyExist = objectHasOwnProperty(array, index);
+    if (!isPropertyExist) {
+      array[index] = null;
+    }
+  }
+  return array;
+}
+/**
+ * Shallow clone an object
+ *
+ * @param object - The object to be cloned.
+ * @returns A new object that copies the original.
+ */
+function clone(object) {
+  const newObject = create(null);
+  for (const [property, value] of entries(object)) {
+    const isPropertyExist = objectHasOwnProperty(object, property);
+    if (isPropertyExist) {
+      if (Array.isArray(value)) {
+        newObject[property] = cleanArray(value);
+      } else if (value && typeof value === 'object' && value.constructor === Object) {
+        newObject[property] = clone(value);
+      } else {
+        newObject[property] = value;
+      }
+    }
+  }
+  return newObject;
+}
+/**
+ * This method automatically checks if the prop is function or getter and behaves accordingly.
+ *
+ * @param object - The object to look up the getter function in its prototype chain.
+ * @param prop - The property name for which to find the getter function.
+ * @returns The getter function found in the prototype chain or a fallback function.
+ */
+function lookupGetter(object, prop) {
+  while (object !== null) {
+    const desc = getOwnPropertyDescriptor(object, prop);
+    if (desc) {
+      if (desc.get) {
+        return unapply(desc.get);
+      }
+      if (typeof desc.value === 'function') {
+        return unapply(desc.value);
+      }
+    }
+    object = getPrototypeOf(object);
+  }
+  function fallbackValue() {
+    return null;
+  }
+  return fallbackValue;
+}
+
+const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'search', 'section', 'select', 'shadow', 'slot', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);
+const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'enterkeyhint', 'exportparts', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'inputmode', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'part', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
+const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']);
+// List of SVG elements that are disallowed by default.
+// We still need to know them so that we can do namespace
+// checks properly in case one wants to add them to
+// allow-list.
+const svgDisallowed = freeze(['animate', 'color-profile', 'cursor', 'discard', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use']);
+const mathMl$1 = freeze(['math', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'mprescripts']);
+// Similarly to SVG, we want to know all MathML elements,
+// even those that we disallow by default.
+const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);
+const text = freeze(['#text']);
+
+const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'exportparts', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inert', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'part', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'slot', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);
+const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'mask-type', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);
+const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);
+const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);
+
+// eslint-disable-next-line unicorn/better-regex
+const MUSTACHE_EXPR = seal(/\{\{[\w\W]*|[\w\W]*\}\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode
+const ERB_EXPR = seal(/<%[\w\W]*|[\w\W]*%>/gm);
+const TMPLIT_EXPR = seal(/\$\{[\w\W]*/gm); // eslint-disable-line unicorn/better-regex
+const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]+$/); // eslint-disable-line no-useless-escape
+const ARIA_ATTR = seal(/^aria-[\-\w]+$/); // eslint-disable-line no-useless-escape
+const IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i // eslint-disable-line no-useless-escape
+);
+const IS_SCRIPT_OR_DATA = seal(/^(?:\w+script|data):/i);
+const ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g // eslint-disable-line no-control-regex
+);
+const DOCTYPE_NAME = seal(/^html$/i);
+const CUSTOM_ELEMENT = seal(/^[a-z][.\w]*(-[.\w]+)+$/i);
+
+var EXPRESSIONS = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ARIA_ATTR: ARIA_ATTR,
+  ATTR_WHITESPACE: ATTR_WHITESPACE,
+  CUSTOM_ELEMENT: CUSTOM_ELEMENT,
+  DATA_ATTR: DATA_ATTR,
+  DOCTYPE_NAME: DOCTYPE_NAME,
+  ERB_EXPR: ERB_EXPR,
+  IS_ALLOWED_URI: IS_ALLOWED_URI,
+  IS_SCRIPT_OR_DATA: IS_SCRIPT_OR_DATA,
+  MUSTACHE_EXPR: MUSTACHE_EXPR,
+  TMPLIT_EXPR: TMPLIT_EXPR
+});
+
+/* eslint-disable @typescript-eslint/indent */
+// https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+const NODE_TYPE = {
+  element: 1,
+  text: 3,
+  // Deprecated
+  progressingInstruction: 7,
+  comment: 8,
+  document: 9};
+const getGlobal = function getGlobal() {
+  return typeof window === 'undefined' ? null : window;
+};
+/**
+ * Creates a no-op policy for internal use only.
+ * Don't export this function outside this module!
+ * @param trustedTypes The policy factory.
+ * @param purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix).
+ * @return The policy created (or null, if Trusted Types
+ * are not supported or creating the policy failed).
+ */
+const _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) {
+  if (typeof trustedTypes !== 'object' || typeof trustedTypes.createPolicy !== 'function') {
+    return null;
+  }
+  // Allow the callers to control the unique policy name
+  // by adding a data-tt-policy-suffix to the script element with the DOMPurify.
+  // Policy creation with duplicate names throws in Trusted Types.
+  let suffix = null;
+  const ATTR_NAME = 'data-tt-policy-suffix';
+  if (purifyHostElement && purifyHostElement.hasAttribute(ATTR_NAME)) {
+    suffix = purifyHostElement.getAttribute(ATTR_NAME);
+  }
+  const policyName = 'dompurify' + (suffix ? '#' + suffix : '');
+  try {
+    return trustedTypes.createPolicy(policyName, {
+      createHTML(html) {
+        return html;
+      },
+      createScriptURL(scriptUrl) {
+        return scriptUrl;
+      }
+    });
+  } catch (_) {
+    // Policy creation failed (most likely another DOMPurify script has
+    // already run). Skip creating the policy, as this will only cause errors
+    // if TT are enforced.
+    console.warn('TrustedTypes policy ' + policyName + ' could not be created.');
+    return null;
+  }
+};
+const _createHooksMap = function _createHooksMap() {
+  return {
+    afterSanitizeAttributes: [],
+    afterSanitizeElements: [],
+    afterSanitizeShadowDOM: [],
+    beforeSanitizeAttributes: [],
+    beforeSanitizeElements: [],
+    beforeSanitizeShadowDOM: [],
+    uponSanitizeAttribute: [],
+    uponSanitizeElement: [],
+    uponSanitizeShadowNode: []
+  };
+};
+function createDOMPurify() {
+  let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
+  const DOMPurify = root => createDOMPurify(root);
+  DOMPurify.version = '3.3.3';
+  DOMPurify.removed = [];
+  if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {
+    // Not running in a browser, provide a factory function
+    // so that you can pass your own Window
+    DOMPurify.isSupported = false;
+    return DOMPurify;
+  }
+  let {
+    document
+  } = window;
+  const originalDocument = document;
+  const currentScript = originalDocument.currentScript;
+  const {
+    DocumentFragment,
+    HTMLTemplateElement,
+    Node,
+    Element,
+    NodeFilter,
+    NamedNodeMap = window.NamedNodeMap || window.MozNamedAttrMap,
+    HTMLFormElement,
+    DOMParser,
+    trustedTypes
+  } = window;
+  const ElementPrototype = Element.prototype;
+  const cloneNode = lookupGetter(ElementPrototype, 'cloneNode');
+  const remove = lookupGetter(ElementPrototype, 'remove');
+  const getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');
+  const getChildNodes = lookupGetter(ElementPrototype, 'childNodes');
+  const getParentNode = lookupGetter(ElementPrototype, 'parentNode');
+  // As per issue #47, the web-components registry is inherited by a
+  // new document created via createHTMLDocument. As per the spec
+  // (http://w3c.github.io/webcomponents/spec/custom/#creating-and-passing-registries)
+  // a new empty registry is used when creating a template contents owner
+  // document, so we use that as our parent document to ensure nothing
+  // is inherited.
+  if (typeof HTMLTemplateElement === 'function') {
+    const template = document.createElement('template');
+    if (template.content && template.content.ownerDocument) {
+      document = template.content.ownerDocument;
+    }
+  }
+  let trustedTypesPolicy;
+  let emptyHTML = '';
+  const {
+    implementation,
+    createNodeIterator,
+    createDocumentFragment,
+    getElementsByTagName
+  } = document;
+  const {
+    importNode
+  } = originalDocument;
+  let hooks = _createHooksMap();
+  /**
+   * Expose whether this browser supports running the full DOMPurify.
+   */
+  DOMPurify.isSupported = typeof entries === 'function' && typeof getParentNode === 'function' && implementation && implementation.createHTMLDocument !== undefined;
+  const {
+    MUSTACHE_EXPR,
+    ERB_EXPR,
+    TMPLIT_EXPR,
+    DATA_ATTR,
+    ARIA_ATTR,
+    IS_SCRIPT_OR_DATA,
+    ATTR_WHITESPACE,
+    CUSTOM_ELEMENT
+  } = EXPRESSIONS;
+  let {
+    IS_ALLOWED_URI: IS_ALLOWED_URI$1
+  } = EXPRESSIONS;
+  /**
+   * We consider the elements and attributes below to be safe. Ideally
+   * don't add any new ones but feel free to remove unwanted ones.
+   */
+  /* allowed element names */
+  let ALLOWED_TAGS = null;
+  const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text]);
+  /* Allowed attribute names */
+  let ALLOWED_ATTR = null;
+  const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]);
+  /*
+   * Configure how DOMPurify should handle custom elements and their attributes as well as customized built-in elements.
+   * @property {RegExp|Function|null} tagNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any custom elements)
+   * @property {RegExp|Function|null} attributeNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any attributes not on the allow list)
+   * @property {boolean} allowCustomizedBuiltInElements allow custom elements derived from built-ins if they pass CUSTOM_ELEMENT_HANDLING.tagNameCheck. Default: `false`.
+   */
+  let CUSTOM_ELEMENT_HANDLING = Object.seal(create(null, {
+    tagNameCheck: {
+      writable: true,
+      configurable: false,
+      enumerable: true,
+      value: null
+    },
+    attributeNameCheck: {
+      writable: true,
+      configurable: false,
+      enumerable: true,
+      value: null
+    },
+    allowCustomizedBuiltInElements: {
+      writable: true,
+      configurable: false,
+      enumerable: true,
+      value: false
+    }
+  }));
+  /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */
+  let FORBID_TAGS = null;
+  /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */
+  let FORBID_ATTR = null;
+  /* Config object to store ADD_TAGS/ADD_ATTR functions (when used as functions) */
+  const EXTRA_ELEMENT_HANDLING = Object.seal(create(null, {
+    tagCheck: {
+      writable: true,
+      configurable: false,
+      enumerable: true,
+      value: null
+    },
+    attributeCheck: {
+      writable: true,
+      configurable: false,
+      enumerable: true,
+      value: null
+    }
+  }));
+  /* Decide if ARIA attributes are okay */
+  let ALLOW_ARIA_ATTR = true;
+  /* Decide if custom data attributes are okay */
+  let ALLOW_DATA_ATTR = true;
+  /* Decide if unknown protocols are okay */
+  let ALLOW_UNKNOWN_PROTOCOLS = false;
+  /* Decide if self-closing tags in attributes are allowed.
+   * Usually removed due to a mXSS issue in jQuery 3.0 */
+  let ALLOW_SELF_CLOSE_IN_ATTR = true;
+  /* Output should be safe for common template engines.
+   * This means, DOMPurify removes data attributes, mustaches and ERB
+   */
+  let SAFE_FOR_TEMPLATES = false;
+  /* Output should be safe even for XML used within HTML and alike.
+   * This means, DOMPurify removes comments when containing risky content.
+   */
+  let SAFE_FOR_XML = true;
+  /* Decide if document with <html>... should be returned */
+  let WHOLE_DOCUMENT = false;
+  /* Track whether config is already set on this instance of DOMPurify. */
+  let SET_CONFIG = false;
+  /* Decide if all elements (e.g. style, script) must be children of
+   * document.body. By default, browsers might move them to document.head */
+  let FORCE_BODY = false;
+  /* Decide if a DOM `HTMLBodyElement` should be returned, instead of a html
+   * string (or a TrustedHTML object if Trusted Types are supported).
+   * If `WHOLE_DOCUMENT` is enabled a `HTMLHtmlElement` will be returned instead
+   */
+  let RETURN_DOM = false;
+  /* Decide if a DOM `DocumentFragment` should be returned, instead of a html
+   * string  (or a TrustedHTML object if Trusted Types are supported) */
+  let RETURN_DOM_FRAGMENT = false;
+  /* Try to return a Trusted Type object instead of a string, return a string in
+   * case Trusted Types are not supported  */
+  let RETURN_TRUSTED_TYPE = false;
+  /* Output should be free from DOM clobbering attacks?
+   * This sanitizes markups named with colliding, clobberable built-in DOM APIs.
+   */
+  let SANITIZE_DOM = true;
+  /* Achieve full DOM Clobbering protection by isolating the namespace of named
+   * properties and JS variables, mitigating attacks that abuse the HTML/DOM spec rules.
+   *
+   * HTML/DOM spec rules that enable DOM Clobbering:
+   *   - Named Access on Window (§7.3.3)
+   *   - DOM Tree Accessors (§3.1.5)
+   *   - Form Element Parent-Child Relations (§4.10.3)
+   *   - Iframe srcdoc / Nested WindowProxies (§4.8.5)
+   *   - HTMLCollection (§4.2.10.2)
+   *
+   * Namespace isolation is implemented by prefixing `id` and `name` attributes
+   * with a constant string, i.e., `user-content-`
+   */
+  let SANITIZE_NAMED_PROPS = false;
+  const SANITIZE_NAMED_PROPS_PREFIX = 'user-content-';
+  /* Keep element content when removing element? */
+  let KEEP_CONTENT = true;
+  /* If a `Node` is passed to sanitize(), then performs sanitization in-place instead
+   * of importing it into a new Document and returning a sanitized copy */
+  let IN_PLACE = false;
+  /* Allow usage of profiles like html, svg and mathMl */
+  let USE_PROFILES = {};
+  /* Tags to ignore content of when KEEP_CONTENT is true */
+  let FORBID_CONTENTS = null;
+  const DEFAULT_FORBID_CONTENTS = addToSet({}, ['annotation-xml', 'audio', 'colgroup', 'desc', 'foreignobject', 'head', 'iframe', 'math', 'mi', 'mn', 'mo', 'ms', 'mtext', 'noembed', 'noframes', 'noscript', 'plaintext', 'script', 'style', 'svg', 'template', 'thead', 'title', 'video', 'xmp']);
+  /* Tags that are safe for data: URIs */
+  let DATA_URI_TAGS = null;
+  const DEFAULT_DATA_URI_TAGS = addToSet({}, ['audio', 'video', 'img', 'source', 'image', 'track']);
+  /* Attributes safe for values like "javascript:" */
+  let URI_SAFE_ATTRIBUTES = null;
+  const DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ['alt', 'class', 'for', 'id', 'label', 'name', 'pattern', 'placeholder', 'role', 'summary', 'title', 'value', 'style', 'xmlns']);
+  const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
+  const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+  const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
+  /* Document namespace */
+  let NAMESPACE = HTML_NAMESPACE;
+  let IS_EMPTY_INPUT = false;
+  /* Allowed XHTML+XML namespaces */
+  let ALLOWED_NAMESPACES = null;
+  const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString);
+  let MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);
+  let HTML_INTEGRATION_POINTS = addToSet({}, ['annotation-xml']);
+  // Certain elements are allowed in both SVG and HTML
+  // namespace. We need to specify them explicitly
+  // so that they don't get erroneously deleted from
+  // HTML namespace.
+  const COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, ['title', 'style', 'font', 'a', 'script']);
+  /* Parsing of strict XHTML documents */
+  let PARSER_MEDIA_TYPE = null;
+  const SUPPORTED_PARSER_MEDIA_TYPES = ['application/xhtml+xml', 'text/html'];
+  const DEFAULT_PARSER_MEDIA_TYPE = 'text/html';
+  let transformCaseFunc = null;
+  /* Keep a reference to config to pass to hooks */
+  let CONFIG = null;
+  /* Ideally, do not touch anything below this line */
+  /* ______________________________________________ */
+  const formElement = document.createElement('form');
+  const isRegexOrFunction = function isRegexOrFunction(testValue) {
+    return testValue instanceof RegExp || testValue instanceof Function;
+  };
+  /**
+   * _parseConfig
+   *
+   * @param cfg optional config literal
+   */
+  // eslint-disable-next-line complexity
+  const _parseConfig = function _parseConfig() {
+    let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (CONFIG && CONFIG === cfg) {
+      return;
+    }
+    /* Shield configuration object from tampering */
+    if (!cfg || typeof cfg !== 'object') {
+      cfg = {};
+    }
+    /* Shield configuration object from prototype pollution */
+    cfg = clone(cfg);
+    PARSER_MEDIA_TYPE =
+    // eslint-disable-next-line unicorn/prefer-includes
+    SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? DEFAULT_PARSER_MEDIA_TYPE : cfg.PARSER_MEDIA_TYPE;
+    // HTML tags and attributes are not case-sensitive, converting to lowercase. Keeping XHTML as is.
+    transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? stringToString : stringToLowerCase;
+    /* Set configuration parameters */
+    ALLOWED_TAGS = objectHasOwnProperty(cfg, 'ALLOWED_TAGS') ? addToSet({}, cfg.ALLOWED_TAGS, transformCaseFunc) : DEFAULT_ALLOWED_TAGS;
+    ALLOWED_ATTR = objectHasOwnProperty(cfg, 'ALLOWED_ATTR') ? addToSet({}, cfg.ALLOWED_ATTR, transformCaseFunc) : DEFAULT_ALLOWED_ATTR;
+    ALLOWED_NAMESPACES = objectHasOwnProperty(cfg, 'ALLOWED_NAMESPACES') ? addToSet({}, cfg.ALLOWED_NAMESPACES, stringToString) : DEFAULT_ALLOWED_NAMESPACES;
+    URI_SAFE_ATTRIBUTES = objectHasOwnProperty(cfg, 'ADD_URI_SAFE_ATTR') ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR, transformCaseFunc) : DEFAULT_URI_SAFE_ATTRIBUTES;
+    DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS, transformCaseFunc) : DEFAULT_DATA_URI_TAGS;
+    FORBID_CONTENTS = objectHasOwnProperty(cfg, 'FORBID_CONTENTS') ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS;
+    FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : clone({});
+    FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : clone({});
+    USE_PROFILES = objectHasOwnProperty(cfg, 'USE_PROFILES') ? cfg.USE_PROFILES : false;
+    ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true
+    ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true
+    ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false; // Default false
+    ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false; // Default true
+    SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false; // Default false
+    SAFE_FOR_XML = cfg.SAFE_FOR_XML !== false; // Default true
+    WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false; // Default false
+    RETURN_DOM = cfg.RETURN_DOM || false; // Default false
+    RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false; // Default false
+    RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false; // Default false
+    FORCE_BODY = cfg.FORCE_BODY || false; // Default false
+    SANITIZE_DOM = cfg.SANITIZE_DOM !== false; // Default true
+    SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS || false; // Default false
+    KEEP_CONTENT = cfg.KEEP_CONTENT !== false; // Default true
+    IN_PLACE = cfg.IN_PLACE || false; // Default false
+    IS_ALLOWED_URI$1 = cfg.ALLOWED_URI_REGEXP || IS_ALLOWED_URI;
+    NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;
+    MATHML_TEXT_INTEGRATION_POINTS = cfg.MATHML_TEXT_INTEGRATION_POINTS || MATHML_TEXT_INTEGRATION_POINTS;
+    HTML_INTEGRATION_POINTS = cfg.HTML_INTEGRATION_POINTS || HTML_INTEGRATION_POINTS;
+    CUSTOM_ELEMENT_HANDLING = cfg.CUSTOM_ELEMENT_HANDLING || {};
+    if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck)) {
+      CUSTOM_ELEMENT_HANDLING.tagNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck;
+    }
+    if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)) {
+      CUSTOM_ELEMENT_HANDLING.attributeNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck;
+    }
+    if (cfg.CUSTOM_ELEMENT_HANDLING && typeof cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements === 'boolean') {
+      CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements = cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements;
+    }
+    if (SAFE_FOR_TEMPLATES) {
+      ALLOW_DATA_ATTR = false;
+    }
+    if (RETURN_DOM_FRAGMENT) {
+      RETURN_DOM = true;
+    }
+    /* Parse profile info */
+    if (USE_PROFILES) {
+      ALLOWED_TAGS = addToSet({}, text);
+      ALLOWED_ATTR = create(null);
+      if (USE_PROFILES.html === true) {
+        addToSet(ALLOWED_TAGS, html$1);
+        addToSet(ALLOWED_ATTR, html);
+      }
+      if (USE_PROFILES.svg === true) {
+        addToSet(ALLOWED_TAGS, svg$1);
+        addToSet(ALLOWED_ATTR, svg);
+        addToSet(ALLOWED_ATTR, xml);
+      }
+      if (USE_PROFILES.svgFilters === true) {
+        addToSet(ALLOWED_TAGS, svgFilters);
+        addToSet(ALLOWED_ATTR, svg);
+        addToSet(ALLOWED_ATTR, xml);
+      }
+      if (USE_PROFILES.mathMl === true) {
+        addToSet(ALLOWED_TAGS, mathMl$1);
+        addToSet(ALLOWED_ATTR, mathMl);
+        addToSet(ALLOWED_ATTR, xml);
+      }
+    }
+    /* Prevent function-based ADD_ATTR / ADD_TAGS from leaking across calls */
+    if (!objectHasOwnProperty(cfg, 'ADD_TAGS')) {
+      EXTRA_ELEMENT_HANDLING.tagCheck = null;
+    }
+    if (!objectHasOwnProperty(cfg, 'ADD_ATTR')) {
+      EXTRA_ELEMENT_HANDLING.attributeCheck = null;
+    }
+    /* Merge configuration parameters */
+    if (cfg.ADD_TAGS) {
+      if (typeof cfg.ADD_TAGS === 'function') {
+        EXTRA_ELEMENT_HANDLING.tagCheck = cfg.ADD_TAGS;
+      } else {
+        if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {
+          ALLOWED_TAGS = clone(ALLOWED_TAGS);
+        }
+        addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);
+      }
+    }
+    if (cfg.ADD_ATTR) {
+      if (typeof cfg.ADD_ATTR === 'function') {
+        EXTRA_ELEMENT_HANDLING.attributeCheck = cfg.ADD_ATTR;
+      } else {
+        if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {
+          ALLOWED_ATTR = clone(ALLOWED_ATTR);
+        }
+        addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc);
+      }
+    }
+    if (cfg.ADD_URI_SAFE_ATTR) {
+      addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc);
+    }
+    if (cfg.FORBID_CONTENTS) {
+      if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {
+        FORBID_CONTENTS = clone(FORBID_CONTENTS);
+      }
+      addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc);
+    }
+    if (cfg.ADD_FORBID_CONTENTS) {
+      if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {
+        FORBID_CONTENTS = clone(FORBID_CONTENTS);
+      }
+      addToSet(FORBID_CONTENTS, cfg.ADD_FORBID_CONTENTS, transformCaseFunc);
+    }
+    /* Add #text in case KEEP_CONTENT is set to true */
+    if (KEEP_CONTENT) {
+      ALLOWED_TAGS['#text'] = true;
+    }
+    /* Add html, head and body to ALLOWED_TAGS in case WHOLE_DOCUMENT is true */
+    if (WHOLE_DOCUMENT) {
+      addToSet(ALLOWED_TAGS, ['html', 'head', 'body']);
+    }
+    /* Add tbody to ALLOWED_TAGS in case tables are permitted, see #286, #365 */
+    if (ALLOWED_TAGS.table) {
+      addToSet(ALLOWED_TAGS, ['tbody']);
+      delete FORBID_TAGS.tbody;
+    }
+    if (cfg.TRUSTED_TYPES_POLICY) {
+      if (typeof cfg.TRUSTED_TYPES_POLICY.createHTML !== 'function') {
+        throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');
+      }
+      if (typeof cfg.TRUSTED_TYPES_POLICY.createScriptURL !== 'function') {
+        throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');
+      }
+      // Overwrite existing TrustedTypes policy.
+      trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY;
+      // Sign local variables required by `sanitize`.
+      emptyHTML = trustedTypesPolicy.createHTML('');
+    } else {
+      // Uninitialized policy, attempt to initialize the internal dompurify policy.
+      if (trustedTypesPolicy === undefined) {
+        trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, currentScript);
+      }
+      // If creating the internal policy succeeded sign internal variables.
+      if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') {
+        emptyHTML = trustedTypesPolicy.createHTML('');
+      }
+    }
+    // Prevent further manipulation of configuration.
+    // Not available in IE8, Safari 5, etc.
+    if (freeze) {
+      freeze(cfg);
+    }
+    CONFIG = cfg;
+  };
+  /* Keep track of all possible SVG and MathML tags
+   * so that we can perform the namespace checks
+   * correctly. */
+  const ALL_SVG_TAGS = addToSet({}, [...svg$1, ...svgFilters, ...svgDisallowed]);
+  const ALL_MATHML_TAGS = addToSet({}, [...mathMl$1, ...mathMlDisallowed]);
+  /**
+   * @param element a DOM element whose namespace is being checked
+   * @returns Return false if the element has a
+   *  namespace that a spec-compliant parser would never
+   *  return. Return true otherwise.
+   */
+  const _checkValidNamespace = function _checkValidNamespace(element) {
+    let parent = getParentNode(element);
+    // In JSDOM, if we're inside shadow DOM, then parentNode
+    // can be null. We just simulate parent in this case.
+    if (!parent || !parent.tagName) {
+      parent = {
+        namespaceURI: NAMESPACE,
+        tagName: 'template'
+      };
+    }
+    const tagName = stringToLowerCase(element.tagName);
+    const parentTagName = stringToLowerCase(parent.tagName);
+    if (!ALLOWED_NAMESPACES[element.namespaceURI]) {
+      return false;
+    }
+    if (element.namespaceURI === SVG_NAMESPACE) {
+      // The only way to switch from HTML namespace to SVG
+      // is via <svg>. If it happens via any other tag, then
+      // it should be killed.
+      if (parent.namespaceURI === HTML_NAMESPACE) {
+        return tagName === 'svg';
+      }
+      // The only way to switch from MathML to SVG is via`
+      // svg if parent is either <annotation-xml> or MathML
+      // text integration points.
+      if (parent.namespaceURI === MATHML_NAMESPACE) {
+        return tagName === 'svg' && (parentTagName === 'annotation-xml' || MATHML_TEXT_INTEGRATION_POINTS[parentTagName]);
+      }
+      // We only allow elements that are defined in SVG
+      // spec. All others are disallowed in SVG namespace.
+      return Boolean(ALL_SVG_TAGS[tagName]);
+    }
+    if (element.namespaceURI === MATHML_NAMESPACE) {
+      // The only way to switch from HTML namespace to MathML
+      // is via <math>. If it happens via any other tag, then
+      // it should be killed.
+      if (parent.namespaceURI === HTML_NAMESPACE) {
+        return tagName === 'math';
+      }
+      // The only way to switch from SVG to MathML is via
+      // <math> and HTML integration points
+      if (parent.namespaceURI === SVG_NAMESPACE) {
+        return tagName === 'math' && HTML_INTEGRATION_POINTS[parentTagName];
+      }
+      // We only allow elements that are defined in MathML
+      // spec. All others are disallowed in MathML namespace.
+      return Boolean(ALL_MATHML_TAGS[tagName]);
+    }
+    if (element.namespaceURI === HTML_NAMESPACE) {
+      // The only way to switch from SVG to HTML is via
+      // HTML integration points, and from MathML to HTML
+      // is via MathML text integration points
+      if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) {
+        return false;
+      }
+      if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) {
+        return false;
+      }
+      // We disallow tags that are specific for MathML
+      // or SVG and should never appear in HTML namespace
+      return !ALL_MATHML_TAGS[tagName] && (COMMON_SVG_AND_HTML_ELEMENTS[tagName] || !ALL_SVG_TAGS[tagName]);
+    }
+    // For XHTML and XML documents that support custom namespaces
+    if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && ALLOWED_NAMESPACES[element.namespaceURI]) {
+      return true;
+    }
+    // The code should never reach this place (this means
+    // that the element somehow got namespace that is not
+    // HTML, SVG, MathML or allowed via ALLOWED_NAMESPACES).
+    // Return false just in case.
+    return false;
+  };
+  /**
+   * _forceRemove
+   *
+   * @param node a DOM node
+   */
+  const _forceRemove = function _forceRemove(node) {
+    arrayPush(DOMPurify.removed, {
+      element: node
+    });
+    try {
+      // eslint-disable-next-line unicorn/prefer-dom-node-remove
+      getParentNode(node).removeChild(node);
+    } catch (_) {
+      remove(node);
+    }
+  };
+  /**
+   * _removeAttribute
+   *
+   * @param name an Attribute name
+   * @param element a DOM node
+   */
+  const _removeAttribute = function _removeAttribute(name, element) {
+    try {
+      arrayPush(DOMPurify.removed, {
+        attribute: element.getAttributeNode(name),
+        from: element
+      });
+    } catch (_) {
+      arrayPush(DOMPurify.removed, {
+        attribute: null,
+        from: element
+      });
+    }
+    element.removeAttribute(name);
+    // We void attribute values for unremovable "is" attributes
+    if (name === 'is') {
+      if (RETURN_DOM || RETURN_DOM_FRAGMENT) {
+        try {
+          _forceRemove(element);
+        } catch (_) {}
+      } else {
+        try {
+          element.setAttribute(name, '');
+        } catch (_) {}
+      }
+    }
+  };
+  /**
+   * _initDocument
+   *
+   * @param dirty - a string of dirty markup
+   * @return a DOM, filled with the dirty markup
+   */
+  const _initDocument = function _initDocument(dirty) {
+    /* Create a HTML document */
+    let doc = null;
+    let leadingWhitespace = null;
+    if (FORCE_BODY) {
+      dirty = '<remove></remove>' + dirty;
+    } else {
+      /* If FORCE_BODY isn't used, leading whitespace needs to be preserved manually */
+      const matches = stringMatch(dirty, /^[\r\n\t ]+/);
+      leadingWhitespace = matches && matches[0];
+    }
+    if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && NAMESPACE === HTML_NAMESPACE) {
+      // Root of XHTML doc must contain xmlns declaration (see https://www.w3.org/TR/xhtml1/normative.html#strict)
+      dirty = '<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>' + dirty + '</body></html>';
+    }
+    const dirtyPayload = trustedTypesPolicy ? trustedTypesPolicy.createHTML(dirty) : dirty;
+    /*
+     * Use the DOMParser API by default, fallback later if needs be
+     * DOMParser not work for svg when has multiple root element.
+     */
+    if (NAMESPACE === HTML_NAMESPACE) {
+      try {
+        doc = new DOMParser().parseFromString(dirtyPayload, PARSER_MEDIA_TYPE);
+      } catch (_) {}
+    }
+    /* Use createHTMLDocument in case DOMParser is not available */
+    if (!doc || !doc.documentElement) {
+      doc = implementation.createDocument(NAMESPACE, 'template', null);
+      try {
+        doc.documentElement.innerHTML = IS_EMPTY_INPUT ? emptyHTML : dirtyPayload;
+      } catch (_) {
+        // Syntax error if dirtyPayload is invalid xml
+      }
+    }
+    const body = doc.body || doc.documentElement;
+    if (dirty && leadingWhitespace) {
+      body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] || null);
+    }
+    /* Work on whole document or just its body */
+    if (NAMESPACE === HTML_NAMESPACE) {
+      return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? 'html' : 'body')[0];
+    }
+    return WHOLE_DOCUMENT ? doc.documentElement : body;
+  };
+  /**
+   * Creates a NodeIterator object that you can use to traverse filtered lists of nodes or elements in a document.
+   *
+   * @param root The root element or node to start traversing on.
+   * @return The created NodeIterator
+   */
+  const _createNodeIterator = function _createNodeIterator(root) {
+    return createNodeIterator.call(root.ownerDocument || root, root,
+    // eslint-disable-next-line no-bitwise
+    NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_PROCESSING_INSTRUCTION | NodeFilter.SHOW_CDATA_SECTION, null);
+  };
+  /**
+   * _isClobbered
+   *
+   * @param element element to check for clobbering attacks
+   * @return true if clobbered, false if safe
+   */
+  const _isClobbered = function _isClobbered(element) {
+    return element instanceof HTMLFormElement && (typeof element.nodeName !== 'string' || typeof element.textContent !== 'string' || typeof element.removeChild !== 'function' || !(element.attributes instanceof NamedNodeMap) || typeof element.removeAttribute !== 'function' || typeof element.setAttribute !== 'function' || typeof element.namespaceURI !== 'string' || typeof element.insertBefore !== 'function' || typeof element.hasChildNodes !== 'function');
+  };
+  /**
+   * Checks whether the given object is a DOM node.
+   *
+   * @param value object to check whether it's a DOM node
+   * @return true is object is a DOM node
+   */
+  const _isNode = function _isNode(value) {
+    return typeof Node === 'function' && value instanceof Node;
+  };
+  function _executeHooks(hooks, currentNode, data) {
+    arrayForEach(hooks, hook => {
+      hook.call(DOMPurify, currentNode, data, CONFIG);
+    });
+  }
+  /**
+   * _sanitizeElements
+   *
+   * @protect nodeName
+   * @protect textContent
+   * @protect removeChild
+   * @param currentNode to check for permission to exist
+   * @return true if node was killed, false if left alive
+   */
+  const _sanitizeElements = function _sanitizeElements(currentNode) {
+    let content = null;
+    /* Execute a hook if present */
+    _executeHooks(hooks.beforeSanitizeElements, currentNode, null);
+    /* Check if element is clobbered or can clobber */
+    if (_isClobbered(currentNode)) {
+      _forceRemove(currentNode);
+      return true;
+    }
+    /* Now let's check the element's type and name */
+    const tagName = transformCaseFunc(currentNode.nodeName);
+    /* Execute a hook if present */
+    _executeHooks(hooks.uponSanitizeElement, currentNode, {
+      tagName,
+      allowedTags: ALLOWED_TAGS
+    });
+    /* Detect mXSS attempts abusing namespace confusion */
+    if (SAFE_FOR_XML && currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w!]/g, currentNode.innerHTML) && regExpTest(/<[/\w!]/g, currentNode.textContent)) {
+      _forceRemove(currentNode);
+      return true;
+    }
+    /* Remove any occurrence of processing instructions */
+    if (currentNode.nodeType === NODE_TYPE.progressingInstruction) {
+      _forceRemove(currentNode);
+      return true;
+    }
+    /* Remove any kind of possibly harmful comments */
+    if (SAFE_FOR_XML && currentNode.nodeType === NODE_TYPE.comment && regExpTest(/<[/\w]/g, currentNode.data)) {
+      _forceRemove(currentNode);
+      return true;
+    }
+    /* Remove element if anything forbids its presence */
+    if (!(EXTRA_ELEMENT_HANDLING.tagCheck instanceof Function && EXTRA_ELEMENT_HANDLING.tagCheck(tagName)) && (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName])) {
+      /* Check if we have a custom element to handle */
+      if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) {
+        if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) {
+          return false;
+        }
+        if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(tagName)) {
+          return false;
+        }
+      }
+      /* Keep content except for bad-listed elements */
+      if (KEEP_CONTENT && !FORBID_CONTENTS[tagName]) {
+        const parentNode = getParentNode(currentNode) || currentNode.parentNode;
+        const childNodes = getChildNodes(currentNode) || currentNode.childNodes;
+        if (childNodes && parentNode) {
+          const childCount = childNodes.length;
+          for (let i = childCount - 1; i >= 0; --i) {
+            const childClone = cloneNode(childNodes[i], true);
+            childClone.__removalCount = (currentNode.__removalCount || 0) + 1;
+            parentNode.insertBefore(childClone, getNextSibling(currentNode));
+          }
+        }
+      }
+      _forceRemove(currentNode);
+      return true;
+    }
+    /* Check whether element has a valid namespace */
+    if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {
+      _forceRemove(currentNode);
+      return true;
+    }
+    /* Make sure that older browsers don't get fallback-tag mXSS */
+    if ((tagName === 'noscript' || tagName === 'noembed' || tagName === 'noframes') && regExpTest(/<\/no(script|embed|frames)/i, currentNode.innerHTML)) {
+      _forceRemove(currentNode);
+      return true;
+    }
+    /* Sanitize element content to be template-safe */
+    if (SAFE_FOR_TEMPLATES && currentNode.nodeType === NODE_TYPE.text) {
+      /* Get the element's text content */
+      content = currentNode.textContent;
+      arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {
+        content = stringReplace(content, expr, ' ');
+      });
+      if (currentNode.textContent !== content) {
+        arrayPush(DOMPurify.removed, {
+          element: currentNode.cloneNode()
+        });
+        currentNode.textContent = content;
+      }
+    }
+    /* Execute a hook if present */
+    _executeHooks(hooks.afterSanitizeElements, currentNode, null);
+    return false;
+  };
+  /**
+   * _isValidAttribute
+   *
+   * @param lcTag Lowercase tag name of containing element.
+   * @param lcName Lowercase attribute name.
+   * @param value Attribute value.
+   * @return Returns true if `value` is valid, otherwise false.
+   */
+  // eslint-disable-next-line complexity
+  const _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) {
+    /* FORBID_ATTR must always win, even if ADD_ATTR predicate would allow it */
+    if (FORBID_ATTR[lcName]) {
+      return false;
+    }
+    /* Make sure attribute cannot clobber */
+    if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) {
+      return false;
+    }
+    /* Allow valid data-* attributes: At least one character after "-"
+        (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes)
+        XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804)
+        We don't need to check the value; it's always URI safe. */
+    if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (EXTRA_ELEMENT_HANDLING.attributeCheck instanceof Function && EXTRA_ELEMENT_HANDLING.attributeCheck(lcName, lcTag)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {
+      if (
+      // First condition does a very basic check if a) it's basically a valid custom element tagname AND
+      // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
+      // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck
+      _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName, lcTag)) ||
+      // Alternative, second condition checks if it's an `is`-attribute, AND
+      // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
+      lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else {
+        return false;
+      }
+      /* Check value is safe. First, is attr inert? If so, is safe */
+    } else if (URI_SAFE_ATTRIBUTES[lcName]) ; else if (regExpTest(IS_ALLOWED_URI$1, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if ((lcName === 'src' || lcName === 'xlink:href' || lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]) ; else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if (value) {
+      return false;
+    } else ;
+    return true;
+  };
+  /**
+   * _isBasicCustomElement
+   * checks if at least one dash is included in tagName, and it's not the first char
+   * for more sophisticated checking see https://github.com/sindresorhus/validate-element-name
+   *
+   * @param tagName name of the tag of the node to sanitize
+   * @returns Returns true if the tag name meets the basic criteria for a custom element, otherwise false.
+   */
+  const _isBasicCustomElement = function _isBasicCustomElement(tagName) {
+    return tagName !== 'annotation-xml' && stringMatch(tagName, CUSTOM_ELEMENT);
+  };
+  /**
+   * _sanitizeAttributes
+   *
+   * @protect attributes
+   * @protect nodeName
+   * @protect removeAttribute
+   * @protect setAttribute
+   *
+   * @param currentNode to sanitize
+   */
+  const _sanitizeAttributes = function _sanitizeAttributes(currentNode) {
+    /* Execute a hook if present */
+    _executeHooks(hooks.beforeSanitizeAttributes, currentNode, null);
+    const {
+      attributes
+    } = currentNode;
+    /* Check if we have attributes; if not we might have a text node */
+    if (!attributes || _isClobbered(currentNode)) {
+      return;
+    }
+    const hookEvent = {
+      attrName: '',
+      attrValue: '',
+      keepAttr: true,
+      allowedAttributes: ALLOWED_ATTR,
+      forceKeepAttr: undefined
+    };
+    let l = attributes.length;
+    /* Go backwards over all attributes; safely remove bad ones */
+    while (l--) {
+      const attr = attributes[l];
+      const {
+        name,
+        namespaceURI,
+        value: attrValue
+      } = attr;
+      const lcName = transformCaseFunc(name);
+      const initValue = attrValue;
+      let value = name === 'value' ? initValue : stringTrim(initValue);
+      /* Execute a hook if present */
+      hookEvent.attrName = lcName;
+      hookEvent.attrValue = value;
+      hookEvent.keepAttr = true;
+      hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set
+      _executeHooks(hooks.uponSanitizeAttribute, currentNode, hookEvent);
+      value = hookEvent.attrValue;
+      /* Full DOM Clobbering protection via namespace isolation,
+       * Prefix id and name attributes with `user-content-`
+       */
+      if (SANITIZE_NAMED_PROPS && (lcName === 'id' || lcName === 'name')) {
+        // Remove the attribute with this value
+        _removeAttribute(name, currentNode);
+        // Prefix the value and later re-create the attribute with the sanitized value
+        value = SANITIZE_NAMED_PROPS_PREFIX + value;
+      }
+      /* Work around a security issue with comments inside attributes */
+      if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|script|title|xmp|textarea|noscript|iframe|noembed|noframes)/i, value)) {
+        _removeAttribute(name, currentNode);
+        continue;
+      }
+      /* Make sure we cannot easily use animated hrefs, even if animations are allowed */
+      if (lcName === 'attributename' && stringMatch(value, 'href')) {
+        _removeAttribute(name, currentNode);
+        continue;
+      }
+      /* Did the hooks approve of the attribute? */
+      if (hookEvent.forceKeepAttr) {
+        continue;
+      }
+      /* Did the hooks approve of the attribute? */
+      if (!hookEvent.keepAttr) {
+        _removeAttribute(name, currentNode);
+        continue;
+      }
+      /* Work around a security issue in jQuery 3.0 */
+      if (!ALLOW_SELF_CLOSE_IN_ATTR && regExpTest(/\/>/i, value)) {
+        _removeAttribute(name, currentNode);
+        continue;
+      }
+      /* Sanitize attribute content to be template-safe */
+      if (SAFE_FOR_TEMPLATES) {
+        arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {
+          value = stringReplace(value, expr, ' ');
+        });
+      }
+      /* Is `value` valid for this attribute? */
+      const lcTag = transformCaseFunc(currentNode.nodeName);
+      if (!_isValidAttribute(lcTag, lcName, value)) {
+        _removeAttribute(name, currentNode);
+        continue;
+      }
+      /* Handle attributes that require Trusted Types */
+      if (trustedTypesPolicy && typeof trustedTypes === 'object' && typeof trustedTypes.getAttributeType === 'function') {
+        if (namespaceURI) ; else {
+          switch (trustedTypes.getAttributeType(lcTag, lcName)) {
+            case 'TrustedHTML':
+              {
+                value = trustedTypesPolicy.createHTML(value);
+                break;
+              }
+            case 'TrustedScriptURL':
+              {
+                value = trustedTypesPolicy.createScriptURL(value);
+                break;
+              }
+          }
+        }
+      }
+      /* Handle invalid data-* attribute set by try-catching it */
+      if (value !== initValue) {
+        try {
+          if (namespaceURI) {
+            currentNode.setAttributeNS(namespaceURI, name, value);
+          } else {
+            /* Fallback to setAttribute() for browser-unrecognized namespaces e.g. "x-schema". */
+            currentNode.setAttribute(name, value);
+          }
+          if (_isClobbered(currentNode)) {
+            _forceRemove(currentNode);
+          } else {
+            arrayPop(DOMPurify.removed);
+          }
+        } catch (_) {
+          _removeAttribute(name, currentNode);
+        }
+      }
+    }
+    /* Execute a hook if present */
+    _executeHooks(hooks.afterSanitizeAttributes, currentNode, null);
+  };
+  /**
+   * _sanitizeShadowDOM
+   *
+   * @param fragment to iterate over recursively
+   */
+  const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {
+    let shadowNode = null;
+    const shadowIterator = _createNodeIterator(fragment);
+    /* Execute a hook if present */
+    _executeHooks(hooks.beforeSanitizeShadowDOM, fragment, null);
+    while (shadowNode = shadowIterator.nextNode()) {
+      /* Execute a hook if present */
+      _executeHooks(hooks.uponSanitizeShadowNode, shadowNode, null);
+      /* Sanitize tags and elements */
+      _sanitizeElements(shadowNode);
+      /* Check attributes next */
+      _sanitizeAttributes(shadowNode);
+      /* Deep shadow DOM detected */
+      if (shadowNode.content instanceof DocumentFragment) {
+        _sanitizeShadowDOM(shadowNode.content);
+      }
+    }
+    /* Execute a hook if present */
+    _executeHooks(hooks.afterSanitizeShadowDOM, fragment, null);
+  };
+  // eslint-disable-next-line complexity
+  DOMPurify.sanitize = function (dirty) {
+    let cfg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    let body = null;
+    let importedNode = null;
+    let currentNode = null;
+    let returnNode = null;
+    /* Make sure we have a string to sanitize.
+      DO NOT return early, as this will return the wrong type if
+      the user has requested a DOM object rather than a string */
+    IS_EMPTY_INPUT = !dirty;
+    if (IS_EMPTY_INPUT) {
+      dirty = '<!-->';
+    }
+    /* Stringify, in case dirty is an object */
+    if (typeof dirty !== 'string' && !_isNode(dirty)) {
+      if (typeof dirty.toString === 'function') {
+        dirty = dirty.toString();
+        if (typeof dirty !== 'string') {
+          throw typeErrorCreate('dirty is not a string, aborting');
+        }
+      } else {
+        throw typeErrorCreate('toString is not a function');
+      }
+    }
+    /* Return dirty HTML if DOMPurify cannot run */
+    if (!DOMPurify.isSupported) {
+      return dirty;
+    }
+    /* Assign config vars */
+    if (!SET_CONFIG) {
+      _parseConfig(cfg);
+    }
+    /* Clean up removed elements */
+    DOMPurify.removed = [];
+    /* Check if dirty is correctly typed for IN_PLACE */
+    if (typeof dirty === 'string') {
+      IN_PLACE = false;
+    }
+    if (IN_PLACE) {
+      /* Do some early pre-sanitization to avoid unsafe root nodes */
+      if (dirty.nodeName) {
+        const tagName = transformCaseFunc(dirty.nodeName);
+        if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {
+          throw typeErrorCreate('root node is forbidden and cannot be sanitized in-place');
+        }
+      }
+    } else if (dirty instanceof Node) {
+      /* If dirty is a DOM element, append to an empty document to avoid
+         elements being stripped by the parser */
+      body = _initDocument('<!---->');
+      importedNode = body.ownerDocument.importNode(dirty, true);
+      if (importedNode.nodeType === NODE_TYPE.element && importedNode.nodeName === 'BODY') {
+        /* Node is already a body, use as is */
+        body = importedNode;
+      } else if (importedNode.nodeName === 'HTML') {
+        body = importedNode;
+      } else {
+        // eslint-disable-next-line unicorn/prefer-dom-node-append
+        body.appendChild(importedNode);
+      }
+    } else {
+      /* Exit directly if we have nothing to do */
+      if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT &&
+      // eslint-disable-next-line unicorn/prefer-includes
+      dirty.indexOf('<') === -1) {
+        return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(dirty) : dirty;
+      }
+      /* Initialize the document to work on */
+      body = _initDocument(dirty);
+      /* Check we have a DOM node from the data */
+      if (!body) {
+        return RETURN_DOM ? null : RETURN_TRUSTED_TYPE ? emptyHTML : '';
+      }
+    }
+    /* Remove first element node (ours) if FORCE_BODY is set */
+    if (body && FORCE_BODY) {
+      _forceRemove(body.firstChild);
+    }
+    /* Get node iterator */
+    const nodeIterator = _createNodeIterator(IN_PLACE ? dirty : body);
+    /* Now start iterating over the created document */
+    while (currentNode = nodeIterator.nextNode()) {
+      /* Sanitize tags and elements */
+      _sanitizeElements(currentNode);
+      /* Check attributes next */
+      _sanitizeAttributes(currentNode);
+      /* Shadow DOM detected, sanitize it */
+      if (currentNode.content instanceof DocumentFragment) {
+        _sanitizeShadowDOM(currentNode.content);
+      }
+    }
+    /* If we sanitized `dirty` in-place, return it. */
+    if (IN_PLACE) {
+      return dirty;
+    }
+    /* Return sanitized string or DOM */
+    if (RETURN_DOM) {
+      if (RETURN_DOM_FRAGMENT) {
+        returnNode = createDocumentFragment.call(body.ownerDocument);
+        while (body.firstChild) {
+          // eslint-disable-next-line unicorn/prefer-dom-node-append
+          returnNode.appendChild(body.firstChild);
+        }
+      } else {
+        returnNode = body;
+      }
+      if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.shadowrootmode) {
+        /*
+          AdoptNode() is not used because internal state is not reset
+          (e.g. the past names map of a HTMLFormElement), this is safe
+          in theory but we would rather not risk another attack vector.
+          The state that is cloned by importNode() is explicitly defined
+          by the specs.
+        */
+        returnNode = importNode.call(originalDocument, returnNode, true);
+      }
+      return returnNode;
+    }
+    let serializedHTML = WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML;
+    /* Serialize doctype if allowed */
+    if (WHOLE_DOCUMENT && ALLOWED_TAGS['!doctype'] && body.ownerDocument && body.ownerDocument.doctype && body.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, body.ownerDocument.doctype.name)) {
+      serializedHTML = '<!DOCTYPE ' + body.ownerDocument.doctype.name + '>\n' + serializedHTML;
+    }
+    /* Sanitize final string template-safe */
+    if (SAFE_FOR_TEMPLATES) {
+      arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {
+        serializedHTML = stringReplace(serializedHTML, expr, ' ');
+      });
+    }
+    return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(serializedHTML) : serializedHTML;
+  };
+  DOMPurify.setConfig = function () {
+    let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _parseConfig(cfg);
+    SET_CONFIG = true;
+  };
+  DOMPurify.clearConfig = function () {
+    CONFIG = null;
+    SET_CONFIG = false;
+  };
+  DOMPurify.isValidAttribute = function (tag, attr, value) {
+    /* Initialize shared config vars if necessary. */
+    if (!CONFIG) {
+      _parseConfig({});
+    }
+    const lcTag = transformCaseFunc(tag);
+    const lcName = transformCaseFunc(attr);
+    return _isValidAttribute(lcTag, lcName, value);
+  };
+  DOMPurify.addHook = function (entryPoint, hookFunction) {
+    if (typeof hookFunction !== 'function') {
+      return;
+    }
+    arrayPush(hooks[entryPoint], hookFunction);
+  };
+  DOMPurify.removeHook = function (entryPoint, hookFunction) {
+    if (hookFunction !== undefined) {
+      const index = arrayLastIndexOf(hooks[entryPoint], hookFunction);
+      return index === -1 ? undefined : arraySplice(hooks[entryPoint], index, 1)[0];
+    }
+    return arrayPop(hooks[entryPoint]);
+  };
+  DOMPurify.removeHooks = function (entryPoint) {
+    hooks[entryPoint] = [];
+  };
+  DOMPurify.removeAllHooks = function () {
+    hooks = _createHooksMap();
+  };
+  return DOMPurify;
+}
+var purify = createDOMPurify();
+
+/** The optgroup an option sits in, or null for an ungrouped option. */
+function parentOptgroupOf(option) {
+    const parent = option === null || option === void 0 ? void 0 : option.parentElement;
+    return parent !== null && parent !== undefined && parent.tagName === 'OPTGROUP' ? parent : null;
+}
+/** A Pine icon name: letters, digits and hyphens, such as `hashtag`. Never a URL or file path. */
+const PINE_ICON_NAME = /^[a-z0-9-]+$/i;
+/**
+ * An optgroup's `data-icon` when it's a Pine icon name, or null. One definition of a usable group
+ * icon for every mode, checked here rather than trusting `pds-icon` to reject anything else; it is
+ * only ever passed to `pds-icon` as `name`.
+ */
+function groupIconOf(optgroup) {
+    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);
+}
+/** Every `pds-chip` sentiment: a sentiment added to `ChipSentimentType` fails to compile until it's listed. */
+const BADGE_SENTIMENTS = {
+    accent: true,
+    brand: true,
+    danger: true,
+    info: true,
+    neutral: true,
+    solid: true,
+    subtle: true,
+    success: true,
+    warning: true,
+};
+const isBadgeSentiment = (value) => value !== null && Object.prototype.hasOwnProperty.call(BADGE_SENTIMENTS, value);
+/**
+ * An option's badge from its `data-badge*` attributes, or null without a label. An unknown
+ * sentiment falls back to `neutral`, and an icon that isn't a Pine icon name is dropped: the
+ * badge is a `pds-chip`, whose `icon` also loads URLs.
+ */
+function optionBadgeOf(option) {
+    return badgeOf(option);
+}
+/** An optgroup's badge from its `data-badge*` attributes, or null; the same check as an option's. */
+function groupBadgeOf(optgroup) {
+    return badgeOf(optgroup);
+}
+function badgeOf(element) {
+    var _a;
+    const label = (_a = element.getAttribute('data-badge')) === null || _a === void 0 ? void 0 : _a.trim();
+    if (label === undefined || label === '')
+        return null;
+    const sentiment = element.getAttribute('data-badge-sentiment');
+    const icon = element.getAttribute('data-badge-icon');
+    return {
+        label,
+        sentiment: isBadgeSentiment(sentiment) ? sentiment : 'neutral',
+        icon: icon !== null && PINE_ICON_NAME.test(icon) ? icon : null,
+    };
+}
+function iconOf(element) {
+    const icon = element.getAttribute('data-icon');
+    return icon !== null && PINE_ICON_NAME.test(icon) ? icon : null;
+}
+/** An option is disabled by its own `disabled` or its optgroup's, as in a native select. */
+function isOptionDisabled(option) {
+    var _a;
+    if (option === null || option === undefined)
+        return false;
+    return option.hasAttribute('disabled') || ((_a = parentOptgroupOf(option)) === null || _a === void 0 ? void 0 : _a.hasAttribute('disabled')) === true;
+}
+/** A group with no option left to choose. It still opens, so its options can be seen. */
+function isGroupDisabled(group) {
+    return group.options.every(({ option }) => isOptionDisabled(option));
+}
+/**
+ * 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, position) {
+    const entries = [];
+    const groups = new Map();
+    let index = 0;
+    items.forEach(item => {
+        if (item.tagName !== 'OPTION')
+            return;
+        const option = item;
+        const optgroup = parentOptgroupOf(option);
+        if (optgroup !== null) {
+            let group = groups.get(optgroup);
+            if (!group) {
+                group = { optgroup, label: optgroup.label, icon: groupIconOf(optgroup), badge: groupBadgeOf(optgroup), options: [] };
+                groups.set(optgroup, group);
+                entries.push({ kind: 'group', group });
+            }
+            group.options.push({ option, index: index++ });
+        }
+        else {
+            entries.push({ kind: 'option', option, index: index++ });
+        }
+    });
+    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) {
+    var _a, _b;
+    return (_b = (_a = parentOptgroupOf(option)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : null;
+}
+/**
+ * The items Up and Down move through from `current`, one tree level at a time: the panel's rows
+ * (groups and ungrouped options), or the open group's options. Drilled into a group, its row
+ * (drawn as the row back) comes first, above its options, as a tree draws a parent above its children.
+ * Disabled options and groups stay in it, as the APG listbox and tree patterns advise, so they're
+ * announced as unavailable rather than hidden from the keyboard.
+ */
+function panelColumn(entries, openGroup, current, drilledIn) {
+    const open = openGroup === null ? undefined : findGroup(entries, openGroup);
+    if (open !== undefined) {
+        const options = open.options.map(({ index }) => index);
+        if (drilledIn)
+            return [open.optgroup, ...options];
+        if (typeof current === 'number' && options.includes(current))
+            return options;
+    }
+    return entries.map(entry => (entry.kind === 'group' ? entry.group.optgroup : entry.index));
+}
+/** The panel's group for an optgroup, if it's showing. */
+function findGroup(entries, optgroup) {
+    for (const entry of entries) {
+        if (entry.kind === 'group' && entry.group.optgroup === optgroup)
+            return entry.group;
+    }
+    return undefined;
+}
+/** Moving from one group row to another waits this long, so a diagonal trip into the flyout doesn't switch groups. */
+const SWITCH_DELAY_MS = 120;
+/** Leaving a group (into the gap beside its flyout, say) waits this long before closing it. */
+const CLOSE_DELAY_MS = 200;
+/** Space between the panel's edge and the flyout: --pine-dimension-050 (4px), per the Figma frames. */
+const FLYOUT_GAP_PX = 4;
+/** How close the flyout may come to the viewport edge: --pine-dimension-100 (8px). */
+const VIEWPORT_PADDING_PX = 8;
+/** A flyout never shrinks below roughly three rows, even when little space is left. */
+const MIN_FLYOUT_HEIGHT_PX = 120;
+/**
+ * Opens and closes a group's flyout with hover intent, and keeps the open flyout positioned beside
+ * its group row. The flyout renders inside the row, so moving the pointer into it never leaves
+ * the row; the delays cover the gap between panel and flyout and diagonal moves across rows.
+ */
+/**
+ * Scrolls `el` into view inside `container` only. A flyout option needs this: the flyout is `fixed`
+ * beside the panel but sits inside it in the DOM, so `scrollIntoView` would also scroll the panel
+ * and the page, moving the flyout's row out from under it.
+ */
+function scrollIntoViewWithin(container, el) {
+    const bounds = container.getBoundingClientRect();
+    const rect = el.getBoundingClientRect();
+    if (rect.top < bounds.top) {
+        container.scrollTop -= bounds.top - rect.top;
+    }
+    else if (rect.bottom > bounds.bottom) {
+        container.scrollTop += rect.bottom - bounds.bottom;
+    }
+}
+class FlyoutController {
+    constructor(getOpenGroup, setOpenGroup) {
+        this.getOpenGroup = getOpenGroup;
+        this.setOpenGroup = setOpenGroup;
+    }
+    /** Pointer entered a group row (or its flyout, which sits inside it). */
+    enter(label) {
+        this.clearClose();
+        const open = this.getOpenGroup();
+        if (open === label) {
+            this.clearSwitch();
+            return;
+        }
+        if (open === null) {
+            this.setOpenGroup(label);
+            return;
+        }
+        this.clearSwitch();
+        this.switchTimer = setTimeout(() => {
+            this.switchTimer = undefined;
+            this.setOpenGroup(label);
+        }, SWITCH_DELAY_MS);
+    }
+    /** Pointer left a group row and its flyout. */
+    leave(label) {
+        this.clearSwitch();
+        if (this.getOpenGroup() !== label)
+            return;
+        this.clearClose();
+        this.closeTimer = setTimeout(() => {
+            this.closeTimer = undefined;
+            if (this.getOpenGroup() === label)
+                this.setOpenGroup(null);
+        }, CLOSE_DELAY_MS);
+    }
+    /**
+     * A click or tap on a group row opens it. It never closes it: on desktop the hover that preceded
+     * the click has already opened it, and touch browsers fire an emulated mouseenter and then click
+     * in the same tap. Closing happens on leaving the row or closing the panel.
+     */
+    open(label) {
+        this.clearTimers();
+        this.setOpenGroup(label);
+    }
+    /**
+     * Keeps `flyout` beside `row`: horizontally against the panel's edge, vertically so its first
+     * option lines up with the row. `fixed` positioning so the panel's scrolling can't clip it,
+     * including when the panel is portaled into a dialog.
+     */
+    position(row, panel, flyout) {
+        if (this.positionedFlyout === flyout && this.stopAutoUpdate)
+            return;
+        this.stopPositioning();
+        this.positionedFlyout = flyout;
+        const reference = {
+            getBoundingClientRect: () => {
+                const panelRect = panel.getBoundingClientRect();
+                const rowRect = row.getBoundingClientRect();
+                return {
+                    x: panelRect.x,
+                    y: rowRect.y,
+                    left: panelRect.left,
+                    right: panelRect.right,
+                    top: rowRect.top,
+                    bottom: rowRect.bottom,
+                    width: panelRect.width,
+                    height: rowRect.height,
+                };
+            },
+            contextElement: row,
+        };
+        // The flyout's own top padding, so its first option, not its edge, lines up with the row.
+        const flyoutPaddingTop = parseFloat(getComputedStyle(flyout).paddingTop) || 0;
+        const update = () => computePosition(reference, flyout, {
+            placement: 'right-start',
+            strategy: 'fixed',
+            middleware: [
+                offset({ mainAxis: FLYOUT_GAP_PX, crossAxis: -flyoutPaddingTop }),
+                flip({ fallbackPlacements: ['left-start'] }),
+                shift({ padding: VIEWPORT_PADDING_PX }),
+                // A long group scrolls inside the flyout instead of running off the viewport.
+                size({
+                    padding: VIEWPORT_PADDING_PX,
+                    apply({ availableHeight }) {
+                        flyout.style.maxHeight = `${Math.max(availableHeight, MIN_FLYOUT_HEIGHT_PX)}px`;
+                    },
+                }),
+                // Hidden with its row when the panel scrolls the row out of view.
+                hide({ strategy: 'referenceHidden' }),
+            ],
+        }).then(({ x, y, middlewareData }) => {
+            var _a;
+            // It starts hidden (see the stylesheet) so it never flashes in the row before it's placed.
+            Object.assign(flyout.style, {
+                position: 'fixed',
+                left: `${x}px`,
+                top: `${y}px`,
+                visibility: ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) === true ? 'hidden' : 'visible',
+            });
+            const reveal = this.pendingReveal;
+            this.pendingReveal = undefined;
+            if (reveal !== undefined && flyout.contains(reveal))
+                scrollIntoViewWithin(flyout, reveal);
+        });
+        this.stopAutoUpdate = autoUpdate(reference, flyout, () => {
+            void update();
+        });
+    }
+    /**
+     * Scrolls `option` into view inside its flyout. Before the flyout's first placement its height
+     * isn't capped yet, so the option looks visible; it's revealed again once the placement lands.
+     */
+    reveal(flyout, option) {
+        scrollIntoViewWithin(flyout, option);
+        if (flyout.style.maxHeight === '')
+            this.pendingReveal = option;
+    }
+    stopPositioning() {
+        var _a;
+        (_a = this.stopAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.stopAutoUpdate = undefined;
+        this.positionedFlyout = undefined;
+        this.pendingReveal = undefined;
+    }
+    /** The panel closed or the component left the page. */
+    reset() {
+        this.clearTimers();
+        this.stopPositioning();
+    }
+    clearTimers() {
+        this.clearSwitch();
+        this.clearClose();
+    }
+    clearSwitch() {
+        if (this.switchTimer !== undefined)
+            clearTimeout(this.switchTimer);
+        this.switchTimer = undefined;
+    }
+    clearClose() {
+        if (this.closeTimer !== undefined)
+            clearTimeout(this.closeTimer);
+        this.closeTimer = undefined;
+    }
+}
+
+const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}: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);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{--pds-combobox-open-from:calc(var(--pine-dimension-2xs) * -1);-webkit-animation:pds-combobox-open var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-open var(--pine-motion-duration-base) var(--pine-motion-easing-out);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);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:0;min-width:calc(220px + var(--pine-dimension-xs) * 2);overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;width:calc(236px + var(--pine-dimension-xs) * 2);z-index:var(--pine-z-index-raised)}.pds-combobox__listbox[data-placement^=top]{--pds-combobox-open-from:var(--pine-dimension-2xs)}@-webkit-keyframes pds-combobox-open{0%{-webkit-margin-before:var(--pds-combobox-open-from);margin-block-start:var(--pds-combobox-open-from);opacity:0}40%{opacity:1}}@keyframes pds-combobox-open{0%{-webkit-margin-before:var(--pds-combobox-open-from);margin-block-start:var(--pds-combobox-open-from);opacity:0}40%{opacity:1}}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-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: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:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted{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,.pds-combobox__option--disabled .pds-combobox__option-badge,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger>.pds-combobox__group-badge,.pds-combobox__group--disabled>.pds-combobox__group-label>.pds-combobox__group-badge{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-chip{min-width:0;overflow-wrap:anywhere}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option--with-badge{-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs)}.pds-combobox__option-badge,.pds-combobox__group-badge{-ms-flex-negative:0;flex-shrink:0;isolation:isolate;margin-block:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:auto;margin-inline-start:auto}.pds-combobox__option--with-badge .pds-combobox__option-check{-webkit-margin-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs));margin-inline-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs))}.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}.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-label--with-badge{-ms-flex-align:center;align-items:center;-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex}.pds-combobox__group-label-text{min-width:0;overflow-wrap:anywhere}.pds-combobox__group-label>.pds-combobox__group-badge{margin-block:calc(var(--pine-dimension-xs) * -1);text-transform:none}.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-xs);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.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__panel-search--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__panel-search--drill-out{--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,.pds-combobox__panel-search--drill-out>*{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-slow) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-slow) 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__listbox--height-glide{-webkit-animation:pds-combobox-open var(--pine-motion-duration-base) var(--pine-motion-easing-out), pds-combobox-height-glide var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-open var(--pine-motion-duration-base) var(--pine-motion-easing-out), pds-combobox-height-glide var(--pine-motion-duration-base) var(--pine-motion-easing-out)}.pds-combobox__listbox--height-glide,.pds-combobox__listbox--height-glide .pds-combobox__listbox-options,.pds-combobox__listbox--height-glide .pds-combobox__drill-in-options,.pds-combobox__listbox--height-hold,.pds-combobox__listbox--height-hold .pds-combobox__listbox-options,.pds-combobox__listbox--height-hold .pds-combobox__drill-in-options{overflow-y:hidden}@-webkit-keyframes pds-combobox-height-glide{from{height:var(--pds-combobox-glide-from)}to{height:var(--pds-combobox-glide-to)}}@keyframes pds-combobox-height-glide{from{height:var(--pds-combobox-glide-from)}to{height:var(--pds-combobox-glide-to)}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__option.pds-combobox__option--keyboard{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;overflow-wrap:anywhere}.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;padding:var(--pine-dimension-2xs)}.pds-combobox__listbox--grouped .pds-combobox__option,.pds-combobox__listbox--grouped .pds-combobox__group-label{padding-inline:var(--pine-dimension-150)}.pds-combobox__listbox--grouped .pds-combobox__group-label{font:var(--pine-typography-body-sm);margin-block:0;padding-block:var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:none}.pds-combobox__listbox--grouped .pds-combobox__group{-webkit-margin-before:0;margin-block-start:0}.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);-webkit-box-sizing:border-box;box-sizing:border-box;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.pds-combobox__listbox--grouped{min-width:calc(220px + var(--pine-dimension-2xs) * 2);width:calc(236px + var(--pine-dimension-2xs) * 2)}.pds-combobox__listbox.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:220px;overflow:hidden;padding:0;width:236px}.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-active);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-150) 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-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__listbox--grouped.pds-combobox__listbox--grouped:has(>.pds-combobox__group-back){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:0}.pds-combobox__listbox.pds-combobox__listbox--grouped:has(>.pds-combobox__group-back){min-width:220px;width:236px}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;list-style:none;min-height:0}.pds-combobox__group-back-trigger{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in:focus{outline:none}:where(.pds-combobox__listbox--grouped) .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-active);border-radius:0;color:var(--pine-color-text-secondary);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-150) var(--pine-dimension-sm);position:relative}:where(.pds-combobox__listbox--grouped) .pds-combobox__group-back-trigger .pds-combobox__group-row-caret{margin-inline:calc(var(--pine-dimension-2xs) * -1) var(--pine-dimension-2xs)}.pds-combobox__listbox--grouped .pds-combobox__group-back>.pds-combobox__group-back-trigger{isolation:isolate}.pds-combobox__listbox--grouped .pds-combobox__group-back>.pds-combobox__group-back-trigger::before{border-radius:var(--pine-dimension-xs);content:"";inset:var(--pine-dimension-2xs);position:absolute;-webkit-transition:background 0.15s;transition:background 0.15s;z-index:-1}.pds-combobox__listbox--pointer-hover.pds-combobox__listbox--grouped .pds-combobox__group-back>.pds-combobox__group-back-trigger:hover,.pds-combobox__listbox--grouped .pds-combobox__group-back--highlighted>.pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay)}.pds-combobox__listbox--pointer-hover.pds-combobox__listbox--grouped .pds-combobox__group-back>.pds-combobox__group-back-trigger:hover::before,.pds-combobox__listbox--grouped .pds-combobox__group-back--highlighted>.pds-combobox__group-back-trigger::before{background:var(--pine-color-background-muted)}.pds-combobox__listbox--grouped .pds-combobox__group-back--keyboard>.pds-combobox__group-back-trigger{outline:none}.pds-combobox__listbox--grouped .pds-combobox__group-back--keyboard>.pds-combobox__group-back-trigger::before{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:0;min-height:0;overflow-x:hidden;overflow-y:auto;padding:var(--pine-dimension-2xs)}.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);-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-label--value-in{-webkit-animation:pds-combobox-value-in var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-value-in var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-value-in{from{opacity:0}}@keyframes pds-combobox-value-in{from{opacity:0}}.pds-combobox__button-trigger-icon{block-size:var(--pine-dimension-sm);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-sm)}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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{--color-background-hover:var(--pine-color-secondary)}.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 PdsCombobox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pdsComboboxChange = createEvent(this, "pdsComboboxChange");
+        this.pdsComboboxSearch = createEvent(this, "pdsComboboxSearch");
+        this.pdsComboboxLoadOptions = createEvent(this, "pdsComboboxLoadOptions");
+        /**
+         * Enable custom layout content for options. Options with data-layout attribute will render their HTML content.
+         * ⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.
+         * @default false
+         */
+        this.customOptionLayouts = false;
+        /**
+         * Enable custom layout content for the button trigger via the trigger-content slot.
+         * When true, uses slot content for initial state but updates dynamically with selected option layout.
+         * ⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.
+         * @default false
+         */
+        this.customTriggerContent = false;
+        /**
+         * If true, the combobox is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Placement of the dropdown relative to the trigger.
+         * @default 'bottom-start'
+         */
+        this.dropdownPlacement = 'bottom-start';
+        /**
+         * Where to mount the dropdown listbox (`host` or `body`, sometimes called “append to body”).
+         * Use `body` inside scrollable containers (for example modals) so the list is not clipped by
+         * `overflow: hidden` ancestors. The portal is appended to the nearest `<dialog>` when present
+         * (including `pds-modal` / `showModal()`), using a composed ascent so shadow DOM and slot
+         * boundaries do not hide the dialog from discovery; otherwise it is appended to `document.body`.
+         * Keyboard focus stays on the trigger, or moves to the panel's own search field, so modal focus
+         * traps keep working. The mounted dropdown renders in its own shadow root with the combobox's
+         * styles, so it needs no global CSS and page CSS can't reach it: customize it with custom
+         * properties on `pds-combobox`. Its reading direction, language, theme and custom properties are
+         * taken from the combobox when it opens. Custom `empty` and `loading` slots are not supported when
+         * `body` is used; the default empty and loading content is shown instead.
+         * @default 'host'
+         */
+        this.dropdownMount = 'host';
+        /**
+         * Accessible prefix for the row that returns to the group list when `group-display` is
+         * `drill-in`, read before the open group's label. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Back'
+         */
+        this.drillInBackLabel = 'Back';
+        /**
+         * Text shown when no options match the search. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'No options found'
+         */
+        this.noOptionsFoundLabel = 'No options found';
+        /**
+         * Maximum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width
+         * value, including its padding.
+         * @default '388px'
+         */
+        this.flyoutMaxWidth = '388px';
+        /**
+         * Minimum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width
+         * value, including its padding. The flyout is as wide as its options, between this and
+         * `flyout-max-width`.
+         * @default '288px'
+         */
+        this.flyoutMinWidth = '288px';
+        /**
+         * How option groups (`<optgroup>`, or the `group` field of `options`) are shown in the dropdown.
+         * `inline` lists each group's label above its options. `flyout` lists the groups, and opens a
+         * group's options in a panel beside it on hover or click; while searching, the matching options
+         * are listed under their group labels, and search also matches group labels. `flyout` groups
+         * by `<optgroup>` (or `group`) only: options under a `<pds-text>` heading are listed ungrouped.
+         * `drill-in` lists the groups too, but a click replaces the list with that group's options and a
+         * row back to the groups; use it where nothing can open beside the dropdown, such as a side
+         * panel. `flyout` falls back to `drill-in` when there is no room for a flyout on either side.
+         * @default 'inline'
+         */
+        this.groupDisplay = 'inline';
+        /**
+         * Visually hides the label text for instances where only the combobox should be displayed.
+         * The visible `<label>` is omitted (same pattern as `pds-select`) so label spacing does not reserve layout;
+         * the trigger uses `aria-label` so the name stays available to assistive technology.
+         */
+        this.hideLabel = false;
+        /**
+         * Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options).
+         * In filter mode, reopening the menu while the input still shows the label of the selected option temporarily lists
+         * all options until you type (so you can switch to a different choice without clearing the field first).
+         * @default 'filter'
+         */
+        this.mode = 'filter';
+        /**
+         * Shows a search field at the top of the dropdown for the `button` and `chip` triggers, which
+         * can't be typed into. Search filters the options the same way typing in the `input` trigger
+         * does; in a grouped display it also matches group labels.
+         * @default false
+         */
+        this.panelSearch = false;
+        /**
+         * Accessible label for the search input inside the dropdown panel (`panel-search`). Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Search options'
+         */
+        this.searchOptionsLabel = 'Search options';
+        /**
+         * Placeholder text for the search input inside the dropdown panel (`panel-search`). Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Find...'
+         */
+        this.searchPlaceholder = 'Find...';
+        /**
+         * Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).
+         * @default 'input'
+         */
+        this.trigger = 'input';
+        /**
+         * Width of the trigger (button or input). Any valid CSS width value.
+         * @default 'fit-content'
+         */
+        this.triggerWidth = 'fit-content';
+        /**
+         * The visual variant for the button trigger. Matches Pine button variants.
+         * @default 'secondary'
+         */
+        this.triggerVariant = 'secondary';
+        /**
+         * The shape of the button trigger. Use 'input' to render the trigger with input-like styling
+         * (subtle border radius, input height) for use in form or filter rows alongside PdsSelect and PdsMultiselect.
+         * @default 'pill'
+         */
+        this.triggerShape = 'pill';
+        /**
+         * Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis.
+         * When a label overflows, a `title` showing the full label will appear on hover.
+         * Chip options, custom layouts and group rows aren't affected.
+         * @defaultValue false
+         */
+        this.truncate = false;
+        /**
+         * The sentiment for the chip trigger. Matches Pine chip sentiments.
+         * @default 'neutral'
+         */
+        this.chipSentiment = 'neutral';
+        /**
+         * Whether the chip trigger should be displayed in a larger size.
+         * @default false
+         */
+        this.chipLarge = false;
+        /**
+         * Whether a dot should be displayed on the chip trigger.
+         * @default false
+         */
+        this.chipDot = false;
+        /**
+         * The `value` of the selected option.
+         */
+        this.value = '';
+        /**
+         * HTTP method for async requests.
+         */
+        this.asyncMethod = 'GET';
+        /**
+         * Debounce delay in milliseconds for search/fetch.
+         */
+        this.debounce = 300;
+        /**
+         * Timeout in milliseconds for async fetch requests.
+         */
+        this.fetchTimeout = 30000;
+        /**
+         * Whether the component is currently loading async options.
+         */
+        this.loading = false;
+        /**
+         * Internal state for the display text shown in the input/trigger
+         */
+        this.displayText = '';
+        /**
+         * Internal state for filtered options and group labels
+         */
+        this.filteredItems = [];
+        /**
+         * Internal state for the currently highlighted option index
+         */
+        this.highlightedIndex = -1;
+        /**
+         * Internal state for dropdown open/close
+         */
+        this.isOpen = false;
+        /**
+         * The optgroup whose flyout is open, when `groupDisplay` is `flyout`.
+         */
+        this.openGroup = null;
+        /**
+         * Which way drill-in just moved, so the list slides that way: `in` to a group, `out` back to the
+         * groups. Cleared once the slide ends, so later renders don't animate.
+         */
+        this.drillDirection = null;
+        /**
+         * The group row highlighted in the grouped panel. It counts only while no option is
+         * highlighted (`highlightedIndex` is -1); see `highlightedGroupRow`.
+         */
+        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`).
+         */
+        this.panelQuery = '';
+        /**
+         * `groupDisplay` is `flyout` but there's no room beside the dropdown, so groups drill in instead.
+         */
+        this.flyoutFallback = false;
+        /**
+         * Internal state for the currently selected option
+         */
+        this.selectedOption = null;
+        /**
+         * Internal state for the sanitized layout content of the selected option
+         */
+        this.selectedOptionLayoutContent = '';
+        /**
+         * Internal state to track chip properties for automatic rendering
+         */
+        this.selectedOptionChipProps = null;
+        /**
+         * Internal state for async options.
+         */
+        this.internalOptions = [];
+        /**
+         * Internal state for current page (pagination).
+         */
+        this.currentPage = 1;
+        /**
+         * Internal state for hasMore (pagination).
+         */
+        this.hasMore = false;
+        this.optionEls = [];
+        this.allItems = [];
+        this.portalEl = null;
+        /** The portal's shadow root, which holds the dropdown and a copy of the combobox's styles. */
+        this.portalRoot = null;
+        this.bodyPortalAutoUpdateActive = false;
+        this.isUpdatingFromSelection = false;
+        this.flyout = new FlyoutController(() => this.openGroup, group => {
+            this.openGroup = group;
+        });
+        /** 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. */
+        this.pendingOptionFocus = false;
+        /** Group rows' DOM ids, stable across renders so `aria-activedescendant` can point at a row. */
+        this.groupIds = new WeakMap();
+        this.groupIdCount = 0;
+        /**
+         * In filter mode, after choosing an option the input still shows the label and would
+         * otherwise filter the list to matching substrings only. While this flag is true,
+         * the list shows every option until the user types (then normal filtering applies).
+         */
+        this.expandFilterListWhileOpen = false;
+        this.onHeightGlideCancel = (event) => {
+            const panel = this.listboxEl;
+            if (event.animationName !== 'pds-combobox-height-glide' || event.target !== panel)
+                return;
+            // Turning around mid-glide cancels the old glide as the new one starts; only a glide with none
+            // left running cleans up.
+            const running = panel.getAnimations().some(a => a.animationName === 'pds-combobox-height-glide');
+            // A drill waiting to render glides from here next; it cleans up then.
+            if (!running && this.drillFromHeight === undefined)
+                this.endHeightGlide();
+        };
+        this.onPanelPointer = (event) => {
+            const canHover = event.pointerType !== 'touch';
+            if (this.pointerCanHover !== canHover)
+                this.pointerCanHover = canHover;
+        };
+        this.onDrillAnimationEnd = (event) => {
+            // Only the component's own ends (the slide by name, the glide by its target): slotted consumer
+            // content can animate inside the list too.
+            if (event.animationName === 'pds-combobox-drill')
+                this.drillDirection = null;
+            if (event.animationName === 'pds-combobox-height-glide' && event.target === this.listboxEl && this.drillFromHeight === undefined) {
+                this.endHeightGlide();
+            }
+        };
+        /** `<label for>` only works on the input trigger; for a div trigger a click on the label focuses it. */
+        this.onLabelClick = () => {
+            var _a;
+            if (this.trigger !== 'input' && !this.disabled) {
+                (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        /** The query behind the options loaded from `async-url`. */
+        this.lastFetchedQuery = '';
+        this.handleInput = (e) => {
+            const target = e.target;
+            this.clearExpandFilterList();
+            this.displayText = target.value;
+            this.isOpen = true;
+            this.filterOptions();
+            // Emit search event for consumer-managed async
+            this.pdsComboboxSearch.emit({ query: this.displayText });
+            // Fetch from async URL if configured
+            if (this.asyncUrl) {
+                this.debouncedFetchAsyncOptions(this.displayText, 1);
+            }
+            setTimeout(() => this.openDropdownPositioning(), 0);
+        };
+        this.handleInputClick = () => {
+            // Open dropdown when input is clicked (but not when tabbed into)
+            if (!this.isOpen) {
+                this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
+                this.filterOptions();
+                // Trigger initial fetch if async and no options loaded yet
+                if (this.asyncUrl && this.internalOptions.length === 0) {
+                    this.debouncedFetchAsyncOptions(this.displayText, 1);
+                }
+                this.setInitialHighlightedIndex();
+                setTimeout(() => {
+                    this.openDropdownPositioning();
+                    if (this.trigger === 'input' && this.expandFilterListWhileOpen && this.inputEl) {
+                        this.inputEl.select();
+                    }
+                }, 0);
+            }
+        };
+        this.handleKeyDown = (e) => {
+            if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (e.altKey && e.key === 'ArrowDown'))) {
+                e.preventDefault();
+                this.keyboardNavigating = true;
+                this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
+                this.filterOptions();
+                // Set highlighted index immediately for testing
+                this.setInitialHighlightedIndex();
+                setTimeout(() => {
+                    this.openDropdownPositioning();
+                    // For input trigger, keep focus on input and use aria-activedescendant
+                    // For button trigger, move focus to first option for keyboard navigation
+                    if (this.trigger === 'input') {
+                        this.focusFirstOption();
+                    }
+                    else {
+                        this.focusFirstOptionForArrowKeys();
+                    }
+                }, 0);
+                return;
+            }
+            if (!this.isOpen) {
+                return;
+            }
+            if (this.handleGroupedPanelKey(e))
+                return;
+            // The input trigger's text keeps Space, Home and End while the grouped panel shows.
+            if (this.showsGroupedPanel && this.trigger === 'input' && (e.key === ' ' || e.key === 'Home' || e.key === 'End'))
+                return;
+            // Get only the option elements (skip group labels) for navigation
+            const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    // If no option is highlighted, start at the first
+                    this.highlightOptionAt(selectableOptions, this.highlightedIndex < 0 ? 0 : this.highlightedIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    // If no option is highlighted, start at the last
+                    this.highlightOptionAt(selectableOptions, this.highlightedIndex < 0 ? selectableOptions.length - 1 : this.highlightedIndex - 1);
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    this.highlightOptionAt(selectableOptions, 0);
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    this.highlightOptionAt(selectableOptions, selectableOptions.length - 1);
+                    break;
+                case 'PageDown':
+                    e.preventDefault();
+                    this.highlightOptionAt(selectableOptions, this.highlightedIndex + 10);
+                    break;
+                case 'PageUp':
+                    e.preventDefault();
+                    this.highlightOptionAt(selectableOptions, this.highlightedIndex - 10);
+                    break;
+                case 'Enter':
+                case ' ': {
+                    e.preventDefault();
+                    // An option in a flyout the pointer has since closed isn't on screen; don't choose it.
+                    if (this.showsGroupedPanel && this.activeDescendantId === undefined)
+                        break;
+                    const option = selectableOptions[this.highlightedIndex];
+                    if (option !== undefined && !isOptionDisabled(option)) {
+                        this.handleOptionClick(option);
+                        this.restoreFocusToTrigger();
+                    }
+                    break;
+                }
+                case 'Escape':
+                    e.preventDefault();
+                    this.isOpen = false;
+                    this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
+                    this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
+                    this.restoreFocusToTrigger();
+                    break;
+                case 'Tab':
+                    // Allow normal tab behavior to close dropdown and move focus
+                    this.isOpen = false;
+                    this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
+                    this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
+                    break;
+            }
+        };
+        // Track if we're in arrow-key navigation mode (focus should move between options)
+        this.isArrowKeyNavigationMode = false;
+        // Event handler for option click
+        this.onOptionClick = (event) => {
+            const idx = Number(event.currentTarget.getAttribute('data-option-index'));
+            const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            const option = selectableOptions[idx];
+            if (isOptionDisabled(option))
+                return;
+            this.handleOptionClick(option);
+            // The search field closes with the panel; send focus back to the trigger instead of losing it.
+            // (Enter and Space already restore focus in the key handler.)
+            if (this.usesPanelSearch)
+                this.restoreFocusToTrigger();
+        };
+        this.onButtonTriggerMouseEnter = (event) => {
+            this.syncTitle(event.currentTarget, '.pds-combobox__button-trigger-text');
+        };
+        // Event handler for mouse enter on option
+        this.onOptionMouseEnter = (event) => {
+            const row = event.currentTarget;
+            if (this.truncate)
+                this.syncTitle(row, '.pds-combobox__option-text');
+            this.highlightedIndex = Number(row.getAttribute('data-option-index'));
+            this.keyboardNavigating = false;
+        };
+        this.onGroupRowMouseEnter = (event) => {
+            const group = this.groupFromEvent(event);
+            if (group !== null)
+                this.flyout.enter(group);
+        };
+        this.onGroupRowMouseLeave = (event) => {
+            const group = this.groupFromEvent(event);
+            if (group !== null)
+                this.flyout.leave(group);
+        };
+        // The pointer highlights a group's row as it does an option, so the keys carry on from there.
+        this.onGroupRowTriggerMouseEnter = (event) => {
+            const group = this.groupFromEvent(event);
+            if (group !== null)
+                this.highlightGroupRowByPointer(group);
+        };
+        this.onGroupBackMouseEnter = () => {
+            if (this.openGroup !== null)
+                this.highlightGroupRowByPointer(this.openGroup);
+        };
+        this.onGroupRowClick = (event) => {
+            var _a;
+            const group = this.groupFromEvent(event);
+            if (group === null)
+                return;
+            this.flyout.open(group);
+            // Highlight the group's first option, so the arrow keys carry on from the group just opened
+            // rather than from wherever the highlight was before.
+            const first = (_a = this.renderedGroups.find(entry => entry.optgroup === group)) === null || _a === void 0 ? void 0 : _a.options[0];
+            if (first !== undefined) {
+                this.highlightedIndex = first.index;
+                this.updateAriaActiveDescendant();
+            }
+        };
+        // Prevent blur on mousedown
+        this.onOptionMouseDown = (event) => {
+            event.preventDefault();
+        };
+        // Event handler for option keyboard events
+        this.onOptionKeyDown = (event) => {
+            // Delegate to main keyboard handler
+            this.handleKeyDown(event);
+        };
+        // 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();
+                this.filterOptions();
+                this.fetchAsyncOptionsOnOpen();
+                // Set highlighted index and prepare for keyboard navigation
+                this.setInitialHighlightedIndex();
+                // For button trigger, prepare for arrow-key navigation mode
+                this.isArrowKeyNavigationMode = true;
+                setTimeout(() => this.openDropdownPositioning(), 0);
+            }
+            else {
+                // Reset navigation mode when closing
+                this.clearExpandFilterList();
+                this.isArrowKeyNavigationMode = false;
+            }
+        };
+        // 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;
+            if ((e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown' || e.key === 'ArrowUp') && !this.isOpen) {
+                e.preventDefault();
+                e.stopPropagation(); // Prevent the event from bubbling and triggering click
+                this.keyboardNavigating = true;
+                this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
+                this.filterOptions();
+                this.fetchAsyncOptionsOnOpen();
+                // Set highlighted index immediately
+                this.setInitialHighlightedIndex();
+                setTimeout(() => {
+                    this.openDropdownPositioning();
+                    // For all button trigger keyboard opening, focus the first option so subsequent navigation works
+                    this.focusFirstOptionForArrowKeys();
+                }, 0);
+            }
+            else if (e.key === 'Escape') {
+                // 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();
+                    this.updateAriaActiveDescendant(); // Clear aria-activedescendant
+                    this.restoreFocusToTrigger();
+                }
+            }
+            else if (this.isOpen) {
+                // Delegate other keys to main keyboard handler when dropdown is open
+                this.handleKeyDown(e);
+            }
+        };
+        // Handler for button trigger keyup events - prevents space key from triggering synthetic click
+        this.onButtonTriggerKeyUp = (e) => {
+            if (e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        // Close dropdown when focus leaves the combobox
+        this.onComboboxFocusOut = (event) => {
+            var _a, _b, _c;
+            const relatedTarget = event.relatedTarget;
+            const isRelatedTargetInListbox = relatedTarget &&
+                (((_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) || ((_b = this.portalEl) === null || _b === void 0 ? void 0 : _b.contains(relatedTarget)));
+            // `contains` doesn't cross into the shadow root, where the trigger lives; with panel search,
+            // focus leaves the search field for the trigger whenever it's clicked to close.
+            const isRelatedTargetInCombobox = relatedTarget !== null && (this.el.contains(relatedTarget) || !!((_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.contains(relatedTarget)));
+            // Don't close if focus is moving to an option in the listbox or staying within the combobox
+            if (!isRelatedTargetInCombobox && !isRelatedTargetInListbox) {
+                this.isOpen = false;
+                this.highlightedIndex = -1;
+                this.clearExpandFilterList();
+                this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
+                this.updateAriaActiveDescendant(); // Clear aria-activedescendant
+                // If there's a selected option but the display text doesn't match, restore the selected option's display text
+                if (this.selectedOption && this.displayText !== this.getOptionLabel(this.selectedOption)) {
+                    this.displayText = this.getOptionLabel(this.selectedOption);
+                    // The @Watch('selectedOption') will handle value and form internals if needed
+                }
+            }
+        };
+        /** A pick that fills the field from its placeholder fades in; a value it loads with doesn't. */
+        this.fadesValueIn = false;
+        this.handleScroll = (e) => {
+            if (!this.asyncUrl || !this.hasMore || this.loading)
+                return;
+            const target = e.target;
+            const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+            // Load more when near bottom (within 50px)
+            if (scrollBottom < 50) {
+                this.pdsComboboxLoadOptions.emit({
+                    query: this.activeQuery,
+                    page: this.currentPage + 1,
+                });
+                this.debouncedFetchAsyncOptions(this.activeQuery, this.currentPage + 1);
+            }
+        };
+        // A press on the panel's padding, captions or status rows keeps focus in the search field;
+        // otherwise it would blur the field, closing a portaled panel or stranding the keys.
+        this.onPanelMouseDown = (event) => {
+            if (event.target !== this.panelSearchEl)
+                event.preventDefault();
+        };
+        this.onPanelSearchInput = (event) => {
+            this.setPanelQuery(event.target.value);
+        };
+        // Space, Home and End edit the search text rather than moving through the options.
+        this.onPanelSearchKeyDown = (event) => {
+            if (event.key === ' ' || event.key === 'Home' || event.key === 'End')
+                return;
+            if (this.handlePanelTab(event))
+                return;
+            this.handleKeyDown(event);
+        };
+        /**
+         * Keys in the list while a drilled-in group hides the search field. Backspace, like ArrowLeft,
+         * steps back to the groups; a character starts a search of the whole list. Characters typed
+         * before the search field renders and takes focus still land on the list, so they add to the
+         * query rather than starting it again.
+         */
+        this.onPanelTreeKeyDown = (event) => {
+            if (this.handlePanelTab(event))
+                return;
+            if (event.key === 'Backspace') {
+                event.preventDefault();
+                if (!this.leaveDrilledInGroup() && this.panelQuery !== '')
+                    this.setPanelQuery(this.panelQuery.slice(0, -1));
+                return;
+            }
+            // AltGr (Ctrl+Alt on Windows) and Option on macOS type characters too; Meta and Ctrl alone are
+            // shortcuts.
+            if (event.key.length === 1 && event.key !== ' ' && !event.metaKey && (!event.ctrlKey || event.altKey)) {
+                event.preventDefault();
+                this.flyout.reset();
+                // The query first, so leaving the group reads as search results, not a slide back.
+                this.setPanelQuery(this.panelQuery + event.key);
+                this.openGroup = null;
+                return;
+            }
+            this.handleKeyDown(event);
+        };
+        this.onGroupBackClick = () => {
+            this.leaveDrilledInGroup();
+        };
+    }
+    connectedCallback() {
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        // Also fires when this element's own `disabled` attribute is merely present, even as the
+        // literal string "false" (a consumer's or React's attribute serialization can write that) —
+        // the platform treats any value as disabled, independent of fieldset state. A real disabled
+        // fieldset ancestor confirms this is genuinely that, not this element's own attribute.
+        if (disabled && !this.el.closest('fieldset[disabled]'))
+            return;
+        this.disabled = disabled;
+    }
+    componentWillLoad() {
+        this.originalSearchEmitter = this.pdsComboboxSearch;
+        this.updateOptions();
+    }
+    componentDidLoad() {
+        var _a, _b, _c;
+        this.setupDebounce();
+        // Check for value-based preselection if no option is selected yet
+        if (!this.selectedOption && this.value && this.optionEls.length > 0) {
+            const matchingOption = this.optionEls.find(opt => opt.value === this.value);
+            if (matchingOption) {
+                this.setSelectedOption(matchingOption);
+                // Update the display text to show the option's text content
+                this.displayText = this.getOptionLabel(matchingOption);
+                // Keep this.value as the actual option value
+                // this.value remains unchanged (already matches matchingOption.value)
+            }
+        }
+        // Initialize form value with current value
+        this.updateFormValue((_c = (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : '');
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.deferredPortalTeardownId !== undefined) {
+            clearTimeout(this.deferredPortalTeardownId);
+            this.deferredPortalTeardownId = undefined;
+        }
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        cancelDebouncedEvent(this.pdsComboboxSearch);
+        this.clearAsyncFetchState();
+        this.removeBodyPortal();
+        this.flyout.reset();
+    }
+    componentDidRender() {
+        var _a;
+        if (this.usesBodyPortal && this.isOpen) {
+            this.syncBodyPortal();
+        }
+        // Opening places the dropdown a tick later, which can run before the dropdown has rendered and
+        // then skips it, leaving it without its dropdown-width and max-height. Place a newly rendered
+        // dropdown here too.
+        if (this.isOpen && this.triggerEl && this.listboxEl && this.listboxEl !== this.placedListboxEl) {
+            this.placedListboxEl = this.listboxEl;
+            void this.positionDropdown();
+        }
+        this.glideDrillHeight();
+        const row = (_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-combobox__group-row--open');
+        const flyoutEl = row === null || row === void 0 ? void 0 : row.querySelector('.pds-combobox__flyout');
+        if (this.isOpen && this.listboxEl && row && flyoutEl) {
+            this.flyout.position(row, this.listboxEl, flyoutEl);
+        }
+        else {
+            this.flyout.stopPositioning();
+        }
+        if (this.pendingOptionFocus) {
+            this.pendingOptionFocus = false;
+            this.updateOptionFocus();
+        }
+        // Panel search keeps focus in the search field, or in the list while a group hides the field.
+        const panelFocusEl = this.hidesPanelSearch ? this.panelTreeEl : this.panelSearchEl;
+        if (this.isOpen && this.usesPanelSearch && panelFocusEl && panelFocusEl !== this.panelFocusEl) {
+            this.focusPanel(panelFocusEl);
+        }
+    }
+    // A `title` only while the text is cut, measured on hover. On the span, not the option or trigger,
+    // so it isn't read again as their description.
+    syncTitle(el, selector) {
+        const text = el.querySelector(selector);
+        if (!text)
+            return;
+        if (text.scrollWidth > text.clientWidth) {
+            text.title = text.textContent || '';
+        }
+        else {
+            text.removeAttribute('title');
+        }
+    }
+    /**
+     * 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. It 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;
+        }
+        // The row back is the drilled-in header, above the scrolling options: always in view.
+        if (el.classList.contains('pds-combobox__group-back-trigger'))
+            return;
+        const list = this.scrollListEl;
+        if (!list)
+            return;
+        const offset = el.getBoundingClientRect().top - list.getBoundingClientRect().top - list.clientTop;
+        const top = list.scrollTop + offset;
+        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 });
+    }
+    /**
+     * The element that scrolls the panel's rows. Every layer is a header (the search field, or a
+     * drilled-in group's row back) above the rows that scroll: drilled in, the group's options;
+     * otherwise the list under the search field, or the panel itself.
+     */
+    get scrollListEl() {
+        var _a;
+        const list = this.usesPanelSearch ? this.panelTreeEl : this.listboxEl;
+        return (_a = list === null || list === void 0 ? void 0 : list.querySelector('.pds-combobox__group-back > .pds-combobox__drill-in-options')) !== null && _a !== void 0 ? _a : list;
+    }
+    focusPanel(el) {
+        var _a, _b;
+        this.panelFocusEl = el;
+        // Before the dropdown is positioned it sits in the page's flow; don't scroll to it.
+        el.focus({ preventScroll: true });
+        // A search started by typing in the list carries its first character; type on after it.
+        if (el === this.panelSearchEl && this.panelQuery !== '') {
+            (_b = (_a = this.panelSearchEl).setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(_a, this.panelQuery.length, this.panelQuery.length);
+        }
+        this.updateAriaActiveDescendant();
+    }
+    /** Switching display mode leaves no flyout or hover timer from the last one. */
+    groupDisplayChanged() {
+        this.flyout.reset();
+        this.openGroup = null;
+        // The reset isn't a drill-out, so it doesn't slide either.
+        this.drillDirection = null;
+        this.endHeightGlide();
+    }
+    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;
+        if (next !== null && previous === null)
+            this.drillDirection = 'in';
+        else if (next === null && previous !== null)
+            this.drillDirection = 'out';
+        else
+            return;
+        // The views differ in height; measured now, before the next one renders, so it can glide.
+        const panel = this.listboxEl;
+        if (!panel)
+            return;
+        const from = panel.getBoundingClientRect().height;
+        this.drillFromHeight = from;
+        // Pinned there until componentDidRender measures the new view, however late: a child component
+        // that renders late could otherwise let the browser paint the new view at its full height first.
+        panel.style.height = `${from}px`;
+        panel.classList.add('pds-combobox__listbox--height-hold');
+        this.syncPanelOverflow();
+    }
+    releaseHeightHold() {
+        const panel = this.listboxEl;
+        panel === null || panel === void 0 ? void 0 : panel.style.removeProperty('height');
+        panel === null || panel === void 0 ? void 0 : panel.classList.remove('pds-combobox__listbox--height-hold');
+    }
+    /**
+     * Hands the dropdown's height before and after a drill to the SCSS glide. Neither is known ahead,
+     * so they're measured: CSS can't animate to the height its content turns out to be.
+     */
+    glideDrillHeight() {
+        const from = this.drillFromHeight;
+        this.drillFromHeight = undefined;
+        const panel = this.listboxEl;
+        if (from === undefined || !panel)
+            return;
+        // A drill back mid-glide starts from where the last one is now, then measures the real height.
+        this.releaseHeightHold();
+        panel.classList.remove('pds-combobox__listbox--height-glide');
+        this.syncPanelOverflow();
+        const to = panel.getBoundingClientRect().height;
+        if (Math.abs(to - from) < 1) {
+            this.endHeightGlide();
+            return;
+        }
+        panel.style.setProperty('--pds-combobox-glide-from', `${from}px`);
+        panel.style.setProperty('--pds-combobox-glide-to', `${to}px`);
+        panel.classList.add('pds-combobox__listbox--height-glide');
+        this.syncPanelOverflow();
+        // A glide cut short without ending (the panel hidden mid-way) still cleans up. JSX has no
+        // `onAnimationCancel`; adding the same listener again is a no-op.
+        panel.addEventListener('animationcancel', this.onHeightGlideCancel);
+    }
+    /** Ends a glide, and a drill still waiting to glide, so nothing starts once it renders. */
+    endHeightGlide() {
+        this.drillFromHeight = undefined;
+        this.releaseHeightHold();
+        const panel = this.listboxEl;
+        panel === null || panel === void 0 ? void 0 : panel.classList.remove('pds-combobox__listbox--height-glide');
+        this.syncPanelOverflow();
+        panel === null || panel === void 0 ? void 0 : panel.style.removeProperty('--pds-combobox-glide-from');
+        panel === null || panel === void 0 ? void 0 : panel.style.removeProperty('--pds-combobox-glide-to');
+        panel === null || panel === void 0 ? void 0 : panel.removeEventListener('animationcancel', this.onHeightGlideCancel);
+    }
+    /**
+     * With `max-height`, the panel's own scroll, set inline so it outranks the stylesheet: hidden under a
+     * fixed search field, and while the height glides (so no scrollbar flashes), otherwise auto.
+     */
+    syncPanelOverflow() {
+        var _a;
+        if (((_a = this.maxHeight) !== null && _a !== void 0 ? _a : '') === '' || !this.listboxEl)
+            return;
+        const gliding = this.listboxEl.classList.contains('pds-combobox__listbox--height-glide') ||
+            this.listboxEl.classList.contains('pds-combobox__listbox--height-hold');
+        this.listboxEl.style.overflowY = this.usesPanelSearch || gliding ? 'hidden' : 'auto';
+    }
+    /** A flyout with no room beside the dropdown drills in, which can hide the focused search field too. */
+    flyoutFallbackChanged() {
+        this.handPanelFocusToList();
+    }
+    /**
+     * Drilling into a group hides the search field, so focus moves to the list before the field
+     * unmounts: focus lost with it would leave the combobox and close the dropdown.
+     */
+    handPanelFocusToList() {
+        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.endHeightGlide();
+            this.revealedGroupLabel = null;
+            this.drillDirection = null;
+            this.openGroup = null;
+            this.highlightedGroup = null;
+            this.keyboardNavigating = false;
+            this.flyout.reset();
+            if (this.panelQuery !== '') {
+                // The field reopens empty, so tell consumers who filter `options` from this event.
+                this.panelQuery = '';
+                this.pdsComboboxSearch.emit({ query: '' });
+            }
+            // And with `async-url`, start loading the unsearched list now, so it's ready by the reopen.
+            if (this.usesPanelSearch && this.asyncUrl && this.lastFetchedQuery !== '') {
+                this.debouncedFetchAsyncOptions('', 1);
+            }
+            this.panelFocusEl = undefined;
+            this.flyoutRoomChecked = false;
+            this.flyoutFallback = false;
+        }
+        if (isOpen && this.deferredPortalTeardownId !== undefined) {
+            clearTimeout(this.deferredPortalTeardownId);
+            this.deferredPortalTeardownId = undefined;
+        }
+        if (isOpen && this.usesBodyPortal) {
+            // Rapid reopen can cancel deferred teardown while the portal still holds the previous
+            // listbox node; clear portal state before the next render attaches the new listbox, and
+            // reset Floating UI autoUpdate bookkeeping.
+            this.removeBodyPortal();
+        }
+        if (!isOpen && this.usesBodyPortal) {
+            if (this.deferredPortalTeardownId !== undefined) {
+                clearTimeout(this.deferredPortalTeardownId);
+            }
+            this.deferredPortalTeardownId = setTimeout(() => {
+                this.deferredPortalTeardownId = undefined;
+                if (!this.el.isConnected) {
+                    return;
+                }
+                if (!this.isOpen) {
+                    this.removeBodyPortal();
+                }
+            }, 0);
+            return;
+        }
+        if (!isOpen) {
+            this.removeBodyPortal();
+        }
+    }
+    get usesBodyPortal() {
+        return this.dropdownMount === 'body';
+    }
+    get labelId() {
+        return `${this.componentId}-label`;
+    }
+    /** One check for "the `<label>` is rendered", so the label and the reference to it can't disagree. */
+    get hasVisibleLabel() {
+        return Boolean(this.label) && !this.hideLabel;
+    }
+    /**
+     * The button and chip triggers are `div`s, which `<label for>` can't name, so they point at the
+     * visible label instead. With `hide-label` there is no visible label and `aria-label` names them.
+     * With panel search the trigger is a button, which has no value, so its own text (the selection
+     * or placeholder) joins the label in its name.
+     */
+    get triggerLabelledBy() {
+        if (!this.hasVisibleLabel)
+            return undefined;
+        return this.usesPanelSearch ? `${this.labelId} ${this.componentId}` : this.labelId;
+    }
+    /** The div triggers' `aria-label` when the label is hidden; with panel search it names the selection too. */
+    get triggerAriaLabel() {
+        if (!this.hideLabel)
+            return undefined;
+        const shown = this.selectedLabel || this.placeholder;
+        return this.usesPanelSearch && shown ? `${this.label}, ${shown}` : this.label;
+    }
+    get listboxId() {
+        return `${this.componentId}-listbox`;
+    }
+    optionDomId(optionIndex) {
+        return `${this.componentId}-option-${optionIndex}`;
+    }
+    groupDomId(optgroup) {
+        let id = this.groupIds.get(optgroup);
+        if (id === undefined) {
+            id = `${this.componentId}-group-${this.groupIdCount++}`;
+            this.groupIds.set(optgroup, id);
+        }
+        return id;
+    }
+    setupDebounce() {
+        const { pdsComboboxSearch, debounce, originalSearchEmitter } = this;
+        this.pdsComboboxSearch = debounce === undefined
+            ? originalSearchEmitter !== null && originalSearchEmitter !== void 0 ? originalSearchEmitter : pdsComboboxSearch
+            : debounceEvent(pdsComboboxSearch, debounce);
+        // After the swap, so an emit made while flushing goes to the new emitter, not the old one.
+        flushDebouncedEvent(pdsComboboxSearch);
+    }
+    optionsChanged() {
+        if (this.options) {
+            this.internalOptions = [...this.options];
+            this.updateOptionsFromAsync();
+        }
+    }
+    handleValueChange() {
+        this.filterOptions();
+        // Sync with form internals for form association
+        this.updateFormValue(this.value);
+        // Find and select option that matches the value (for external value changes)
+        // Only do this if we're not already updating from a selection
+        if (!this.isUpdatingFromSelection && this.value && this.optionEls.length > 0) {
+            const currentSelectedValue = this.selectedOption ? this.selectedOption.value : null;
+            // If the value doesn't match the currently selected option's value, we need to update
+            if (this.value !== currentSelectedValue) {
+                const matchingOption = this.optionEls.find(opt => opt.value === this.value);
+                if (matchingOption) {
+                    this.isUpdatingFromSelection = true;
+                    this.setSelectedOption(matchingOption);
+                    // Update the display text to show the option's text content
+                    this.displayText = this.getOptionLabel(matchingOption);
+                    // Keep this.value as the actual option value (already correct)
+                    this.isUpdatingFromSelection = false;
+                }
+            }
+        }
+    }
+    handleSelectedOptionChange() {
+        // Update the layout content when selected option changes
+        this.selectedOptionLayoutContent = this.selectedOption && this.isOptionLayout(this.selectedOption)
+            ? this.getOptionLayoutContent(this.selectedOption)
+            : '';
+        // Update chip properties for automatic rendering when selected option changes
+        this.selectedOptionChipProps = this.selectedOption && this.isOptionChip(this.selectedOption)
+            ? this.getOptionChipProps(this.selectedOption)
+            : null;
+        // Update display text when selected option changes
+        if (this.selectedOption) {
+            this.displayText = this.getOptionLabel(this.selectedOption);
+            this.value = this.selectedOption.value;
+            // Update form internals with the actual option value
+            this.updateFormValue(this.selectedOption.value);
+        }
+        else {
+            this.displayText = '';
+            this.value = '';
+            this.updateFormValue('');
+        }
+    }
+    updateFormValue(value) {
+        if (isSpecTest())
+            return;
+        if (this.internals && this.internals.setFormValue) {
+            this.internals.setFormValue(value);
+        }
+    }
+    clearAsyncFetchState() {
+        var _a;
+        if (this.fetchDebounceTimer !== undefined) {
+            window.clearTimeout(this.fetchDebounceTimer);
+            this.fetchDebounceTimer = undefined;
+        }
+        if (this.fetchTimeoutTimer !== undefined) {
+            window.clearTimeout(this.fetchTimeoutTimer);
+            this.fetchTimeoutTimer = undefined;
+        }
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        this.abortController = undefined;
+    }
+    debouncedFetchAsyncOptions(query, page = 1) {
+        var _a;
+        if (!this.asyncUrl)
+            return;
+        if (this.fetchDebounceTimer !== undefined) {
+            window.clearTimeout(this.fetchDebounceTimer);
+        }
+        const delay = Math.max(0, (_a = this.debounce) !== null && _a !== void 0 ? _a : 0);
+        this.fetchDebounceTimer = window.setTimeout(() => {
+            this.fetchDebounceTimer = undefined;
+            this.fetchOptions(query, page);
+        }, delay);
+    }
+    async fetchOptions(query, page = 1) {
+        var _a;
+        if (!this.asyncUrl)
+            return;
+        // Abort any pending request and clear existing timeout
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        if (this.fetchTimeoutTimer !== undefined) {
+            window.clearTimeout(this.fetchTimeoutTimer);
+            this.fetchTimeoutTimer = undefined;
+        }
+        this.abortController = new AbortController();
+        this.loading = true;
+        // Set up timeout for fetch request
+        this.fetchTimeoutTimer = window.setTimeout(() => {
+            var _a;
+            (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+            this.fetchTimeoutTimer = undefined;
+        }, this.fetchTimeout);
+        try {
+            // Guard against malformed asyncUrl
+            let url;
+            try {
+                url = new URL(this.asyncUrl, window.location.origin);
+            }
+            catch (urlError) {
+                throw new TypeError(`Invalid asyncUrl: ${this.asyncUrl}`);
+            }
+            if (this.asyncMethod === 'GET') {
+                url.searchParams.set('search', query);
+                url.searchParams.set('page', String(page));
+            }
+            const response = await fetch(url.toString(), Object.assign({ method: this.asyncMethod, signal: this.abortController.signal, headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                } }, (this.asyncMethod === 'POST' && {
+                body: JSON.stringify({ search: query, page }),
+            })));
+            // Clear timeout on successful response
+            if (this.fetchTimeoutTimer !== undefined) {
+                window.clearTimeout(this.fetchTimeoutTimer);
+                this.fetchTimeoutTimer = undefined;
+            }
+            if (!response.ok)
+                throw new Error('Failed to fetch options');
+            const data = await response.json();
+            const formattedResults = data.results.map(item => {
+                // If formatResult is provided, use it
+                if (this.formatResult) {
+                    return this.formatResult(item);
+                }
+                // Defensive check: ensure item is an object before spreading
+                if (typeof item === 'object' && item !== null) {
+                    return Object.assign({ id: item.id, text: item.text }, item);
+                }
+                // Handle primitives by converting to safe shape
+                return {
+                    id: String(item),
+                    text: String(item),
+                };
+            });
+            if (page === 1) {
+                this.internalOptions = formattedResults;
+                // Only once its results have loaded: a failed or aborted fetch leaves the last query's.
+                this.lastFetchedQuery = query;
+            }
+            else {
+                this.internalOptions = [...this.internalOptions, ...formattedResults];
+            }
+            this.hasMore = data.totalCount ? this.internalOptions.length < data.totalCount : false;
+            this.currentPage = page;
+            // Update DOM options from async data
+            this.updateOptionsFromAsync();
+        }
+        catch (error) {
+            // Clear timeout on error
+            if (this.fetchTimeoutTimer !== undefined) {
+                window.clearTimeout(this.fetchTimeoutTimer);
+                this.fetchTimeoutTimer = undefined;
+            }
+            if (error.name !== 'AbortError') {
+                console.error('PdsCombobox: Failed to fetch options', error);
+            }
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    updateOptionsFromAsync() {
+        var _a;
+        if (!this.asyncUrl && !this.options)
+            return;
+        // Clear existing slot-based options when using async
+        this.optionEls = [];
+        this.allItems = [];
+        // Create option elements from async data. Grouped options are nested in an optgroup, as
+        // 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. 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 = [];
+        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);
+            this.setBadgeAttributes(optionEl, opt.badge);
+            if (typeof opt.group !== 'string' || opt.group === '') {
+                ungrouped.push(optionEl);
+                this.panelPositions.set(optionEl, position);
+                return;
+            }
+            let optgroup = groups.get(opt.group);
+            if (!optgroup) {
+                optgroup = document.createElement('optgroup');
+                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);
+            }
+            if (!optgroup.hasAttribute('data-badge'))
+                this.setBadgeAttributes(optgroup, opt.groupBadge);
+            optgroup.appendChild(optionEl);
+        });
+        [...ungrouped, ...groupEntries].forEach(entry => {
+            if (entry.tagName === 'OPTGROUP') {
+                this.allItems.push(entry);
+                Array.from(entry.children).forEach(child => {
+                    this.optionEls.push(child);
+                    this.allItems.push(child);
+                });
+            }
+            else {
+                this.optionEls.push(entry);
+                this.allItems.push(entry);
+            }
+        });
+        // A rebuild replaces every optgroup. Follow the open group to its new element by label, so the
+        // flyout stays open across reloads and pagination, or close it if the group is gone. The hover
+        // timers still hold the old element, so they're cleared either way. filterOptions, below,
+        // resets the highlight.
+        if (this.openGroup !== null && !groupEntries.includes(this.openGroup)) {
+            this.flyout.reset();
+            this.openGroup = (_a = groups.get(this.openGroup.label)) !== null && _a !== void 0 ? _a : null;
+        }
+        // Re-apply the selection to the rebuilt options: when `value` is set before async options have
+        // loaded, and after any rebuild, which detaches the previously selected option element.
+        if (this.value && (!this.selectedOption || !this.optionEls.includes(this.selectedOption))) {
+            const matchingOption = this.optionEls.find(opt => opt.value === this.value);
+            if (matchingOption) {
+                // Relinking a selection keeps the same value, so it keeps any text being typed too, which
+                // the selectedOption watcher would otherwise reset to the label.
+                const typed = this.selectedOption ? this.displayText : undefined;
+                this.setSelectedOption(matchingOption);
+                if (typed !== undefined)
+                    this.displayText = typed;
+            }
+        }
+        this.filterOptions();
+    }
+    updateOptions() {
+        var _a;
+        // Skip slot-based options if using async
+        if (this.asyncUrl || this.options) {
+            this.updateOptionsFromAsync();
+            return;
+        }
+        // Get all elements from the slot. Before the first render there's no slot yet, so read the
+        // host's own children that it will hold (through any slot passing options on): otherwise a
+        // combobox created with a `value`, such as a form re-rendered after a pick, paints its
+        // placeholder for a frame, until `slotchange` finds the selected option.
+        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="option"], slot:not([name])');
+        const allElements = slot
+            ? slot.assignedElements({ flatten: true })
+            : Array.from(this.el.children)
+                .filter(el => !el.getAttribute('slot'))
+                .flatMap(el => (el.tagName === 'SLOT' ? el.assignedElements({ flatten: true }) : [el]));
+        // Separate options from group labels and flatten optgroups
+        this.allItems = [];
+        this.optionEls = [];
+        allElements.forEach(el => {
+            if (el.tagName === 'OPTION') {
+                this.optionEls.push(el);
+                this.allItems.push(el);
+            }
+            else if (el.tagName === 'OPTGROUP') {
+                const optgroup = el;
+                this.allItems.push(optgroup);
+                // Add optgroup children (options)
+                Array.from(optgroup.children).forEach(child => {
+                    if (child.tagName === 'OPTION') {
+                        this.optionEls.push(child);
+                        this.allItems.push(child);
+                    }
+                });
+            }
+            else if (el.tagName === 'PDS-TEXT') {
+                this.allItems.push(el);
+            }
+        });
+        // Set initial selected option based on value property
+        let initialSelected = null;
+        // Check if value property matches any option
+        if (this.value) {
+            initialSelected = this.optionEls.find(opt => opt.value === this.value) || null;
+            if (initialSelected) {
+                // Update the display text to show the option's text content
+                this.displayText = this.getOptionLabel(initialSelected);
+                // Keep this.value as the actual option value (already correct)
+            }
+        }
+        // For chip triggers, ensure we always have a selected option
+        const firstEnabled = this.optionEls.find(opt => !isOptionDisabled(opt));
+        if (initialSelected === null && this.trigger === 'chip' && firstEnabled !== undefined) {
+            initialSelected = firstEnabled;
+            this.value = initialSelected.value;
+            this.displayText = this.getOptionLabel(initialSelected);
+            console.warn('PDS Combobox: Chip triggers should always have a selected option. Automatically selected the first enabled option.');
+        }
+        // Update selection if we found a different selected option or if we don't have one
+        if (initialSelected && initialSelected !== this.selectedOption) {
+            this.setSelectedOption(initialSelected);
+        }
+        else if (!this.selectedOption && initialSelected) {
+            this.setSelectedOption(initialSelected);
+        }
+        this.filterOptions();
+    }
+    // Helper method to get option label, falling back to text content if no label attribute
+    getOptionLabel(option) {
+        return option.label || option.textContent || '';
+    }
+    // Helper method to get option layout content
+    getOptionLayoutContent(option) {
+        return this.sanitizeHtml(option.innerHTML || '');
+    }
+    // HTML sanitization using DOMPurify library to prevent XSS attacks
+    sanitizeHtml(html) {
+        // Configure DOMPurify to allow Pine Design System components while removing dangerous content
+        const config = {
+            // Allow all custom elements (including pds-* components)
+            CUSTOM_ELEMENT_HANDLING: {
+                tagNameCheck: (tagName) => {
+                    // Allow all pds-* tags and standard safe HTML tags
+                    return tagName.startsWith('pds-') || /^[a-z]+$/i.test(tagName);
+                },
+                attributeNameCheck: (attr) => {
+                    // Allow standard HTML attributes, data-* attributes, and Pine component attributes
+                    return /^[a-zA-Z][a-zA-Z0-9-]*$/.test(attr) || attr.startsWith('data-') || attr.startsWith('aria-');
+                },
+                allowCustomizedBuiltInElements: false,
+            },
+            // Allow standard safe attributes
+            ALLOW_DATA_ATTR: true,
+            ALLOW_ARIA_ATTR: true,
+            // Specifically forbid dangerous tags
+            FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'textarea', 'select', 'button', 'style'],
+            // Forbid all event handler attributes
+            FORBID_ATTR: [
+                'onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout', 'onmousemove',
+                'onfocus', 'onblur', 'onchange', 'onsubmit', 'onkeydown', 'onkeyup', 'onkeypress',
+                'onmousedown', 'onmouseup', 'ondblclick', 'oncontextmenu', 'onscroll'
+            ],
+            // Safe protocol whitelist
+            ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp|data):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
+        };
+        return purify.sanitize(html, config);
+    }
+    // Helper method to check if option should render as layout
+    isOptionLayout(option) {
+        return this.customOptionLayouts && option.hasAttribute('data-layout');
+    }
+    // Helper method to check if option has chip attributes (new automatic approach)
+    isOptionChip(option) {
+        return option.hasAttribute('chip-sentiment') ||
+            option.hasAttribute('chip-large') ||
+            option.hasAttribute('chip-icon') ||
+            option.hasAttribute('chip-dot');
+    }
+    // Helper method to get chip properties from option attributes
+    getOptionChipProps(option) {
+        return {
+            sentiment: option.getAttribute('chip-sentiment') || 'neutral',
+            large: option.hasAttribute('chip-large'),
+            icon: option.getAttribute('chip-icon') || undefined,
+            dot: option.hasAttribute('chip-dot')
+        };
+    }
+    // Helper method to check if option is selected (single source of truth)
+    isOptionSelected(option) {
+        return this.selectedOption === option;
+    }
+    // Helper method to set selected option (centralized state management)
+    setSelectedOption(option) {
+        this.selectedOption = option;
+        // Immediately update chip properties for automatic rendering to ensure reactivity
+        if (option && this.isOptionChip(option)) {
+            this.selectedOptionChipProps = this.getOptionChipProps(option);
+        }
+        else {
+            this.selectedOptionChipProps = null;
+        }
+        // Immediately update layout content too, the same way: the @Watch('selectedOption') below
+        // isn't active yet the first time this runs, during componentWillLoad's initial selection,
+        // so a preselected layout option would otherwise show its plain label until some later change
+        // triggers the watcher.
+        this.selectedOptionLayoutContent = option && this.isOptionLayout(option)
+            ? this.getOptionLayoutContent(option)
+            : '';
+    }
+    filterOptions() {
+        // A new list replaces the rows a slide or height glide was animating, so their end events may
+        // never come.
+        this.drillDirection = null;
+        this.endHeightGlide();
+        // Ensure allItems includes optionEls if not already populated (for edge cases)
+        if (this.allItems.length === 0 && this.optionEls.length > 0) {
+            this.allItems = [...this.optionEls];
+        }
+        const searchesPanel = this.usesPanelSearch;
+        if ((this.mode === 'select-only' && !searchesPanel) || this.expandFilterListWhileOpen || (searchesPanel && this.panelQuery === '')) {
+            this.filteredItems = [...this.allItems];
+        }
+        else {
+            const val = (searchesPanel ? this.panelQuery : this.displayText).toLowerCase();
+            const filteredOptions = this.optionEls.filter(option => {
+                // Outside inline mode a group's label is part of what search matches, so "tag" finds
+                // every option in the Tag group.
+                if (this.groupDisplay !== 'inline') {
+                    const groupLabel = groupLabelOf(option);
+                    if (groupLabel !== null && groupLabel.toLowerCase().includes(val))
+                        return true;
+                }
+                // `data-search-text`, when set, is what search matches, so an option can be found by more
+                // than its label without a custom layout. A layout option otherwise matches its text.
+                const searchText = option.getAttribute('data-search-text');
+                if (searchText)
+                    return searchText.toLowerCase().includes(val);
+                if (this.isOptionLayout(option))
+                    return (option.textContent || '').toLowerCase().includes(val);
+                return this.getOptionLabel(option).toLowerCase().includes(val);
+            });
+            // Rebuild filtered items maintaining group structure - simplified approach
+            this.filteredItems = [];
+            let currentGroupLabel = null;
+            this.allItems.forEach(item => {
+                if (item.tagName === 'OPTGROUP' || item.tagName === 'PDS-TEXT') {
+                    currentGroupLabel = item;
+                }
+                else if (item.tagName === 'OPTION' && filteredOptions.includes(item)) {
+                    const optionEl = item;
+                    const parent = optionEl.parentElement;
+                    let labelToUse = null;
+                    if (parent && parent.tagName === 'OPTGROUP') {
+                        // Only use the actual parent optgroup as label
+                        labelToUse = parent;
+                    }
+                    else if (currentGroupLabel && currentGroupLabel.tagName === 'PDS-TEXT') {
+                        // Allow pds-text to label subsequent top-level options until another label appears
+                        labelToUse = currentGroupLabel;
+                    }
+                    if (labelToUse && !this.filteredItems.includes(labelToUse)) {
+                        this.filteredItems.push(labelToUse);
+                    }
+                    this.filteredItems.push(optionEl);
+                }
+            });
+        }
+        this.highlightedIndex = -1;
+        this.highlightedGroup = null;
+    }
+    clearExpandFilterList() {
+        this.expandFilterListWhileOpen = false;
+    }
+    /**
+     * When reopening the dropdown in filter mode with the input still showing the
+     * committed selection label, show the full option list until the user edits the query.
+     */
+    prepareExpandFilterListOnOpen() {
+        if (this.mode === 'filter' &&
+            this.selectedOption &&
+            this.displayText === this.getOptionLabel(this.selectedOption)) {
+            this.expandFilterListWhileOpen = true;
+        }
+        else {
+            this.expandFilterListWhileOpen = false;
+        }
+    }
+    positionDropdown() {
+        var _a;
+        if (!this.triggerEl || !this.listboxEl) {
+            return;
+        }
+        const strategy = this.usesBodyPortal ? 'fixed' : 'absolute';
+        const zIndex = this.usesBodyPortal
+            ? 'var(--pine-z-index-priority)'
+            : 'var(--pine-z-index-raised)';
+        // Unset, the panel's own width applies, which differs with its padding (see the dropdown panel styles).
+        this.listboxEl.style.width = (_a = this.dropdownWidth) !== null && _a !== void 0 ? _a : '';
+        if (this.maxHeight) {
+            this.listboxEl.style.maxHeight = this.maxHeight;
+            // With panel search, the options list scrolls under a fixed search field.
+            this.syncPanelOverflow();
+        }
+        return computePosition(this.triggerEl, this.listboxEl, {
+            placement: this.dropdownPlacement,
+            strategy,
+            middleware: [offset(8), flip(), shift({ padding: 5 })],
+        }).then(({ x, y, placement }) => {
+            if (!this.listboxEl) {
+                return;
+            }
+            // Where it landed after flipping, so the opening motion moves away from the field.
+            this.listboxEl.dataset.placement = placement;
+            Object.assign(this.listboxEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+                position: strategy,
+                zIndex,
+            });
+            this.checkFlyoutRoom();
+        });
+    }
+    /**
+     * Once per open, after the dropdown is placed: with no room for a flyout on either side of it,
+     * `flyout` drills in instead. `flyout-min-width` is resolved through CSS, so any length works.
+     */
+    checkFlyoutRoom() {
+        if (!this.isOpen || this.groupDisplay !== 'flyout' || this.flyoutRoomChecked || !this.listboxEl)
+            return;
+        this.flyoutRoomChecked = true;
+        const probe = document.createElement('div');
+        // Fixed, like the flyout, so a percentage resolves against the viewport as the flyout's does.
+        probe.style.cssText = 'position:fixed;visibility:hidden;width:0;';
+        probe.style.minWidth = this.flyoutMinWidth;
+        this.listboxEl.appendChild(probe);
+        const needed = parseFloat(getComputedStyle(probe).minWidth);
+        probe.remove();
+        const rect = this.listboxEl.getBoundingClientRect();
+        const room = Math.max(window.innerWidth - rect.right, rect.left);
+        const fallback = Number.isFinite(needed) && needed > 0 && rect.width > 0 && room < needed;
+        if (fallback !== this.flyoutFallback)
+            this.flyoutFallback = fallback;
+    }
+    openDropdownPositioning() {
+        if (!this.triggerEl || !this.listboxEl) {
+            return;
+        }
+        void this.positionDropdown();
+    }
+    startBodyPortalAutoUpdate() {
+        if (this.bodyPortalAutoUpdateActive || !this.triggerEl || !this.listboxEl) {
+            return;
+        }
+        this.cleanupPositionAutoUpdate = autoUpdate(this.triggerEl, this.listboxEl, () => {
+            void this.positionDropdown();
+        });
+        this.bodyPortalAutoUpdateActive = true;
+    }
+    stopBodyPortalAutoUpdate() {
+        var _a;
+        (_a = this.cleanupPositionAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanupPositionAutoUpdate = undefined;
+        this.bodyPortalAutoUpdateActive = false;
+    }
+    getPortalMountRoot() {
+        var _a;
+        return (_a = this.findNearestDialogForPortal(this.el)) !== null && _a !== void 0 ? _a : document.body;
+    }
+    /**
+     * Resolves the native `<dialog>` to host the portaled listbox so it stays in the same top layer
+     * as `showModal()`. `Element.closest('dialog')` stops at shadow boundaries and can miss a
+     * dialog that only wraps slotted content; this walks assigned slots and shadow hosts, and
+     * falls back to `pds-modal`'s dialog when the combobox lives inside that subtree.
+     */
+    findNearestDialogForPortal(from) {
+        const seen = new Set();
+        let current = from;
+        while (current && !seen.has(current)) {
+            seen.add(current);
+            if (current.nodeType === Node.ELEMENT_NODE && current.localName === 'dialog') {
+                return current;
+            }
+            if (current.nodeType === Node.ELEMENT_NODE) {
+                const assigned = current.assignedSlot;
+                if (assigned) {
+                    current = assigned;
+                    continue;
+                }
+            }
+            const parent = current.parentNode;
+            if (parent) {
+                current = parent instanceof ShadowRoot ? parent.host : parent;
+                continue;
+            }
+            break;
+        }
+        const pineModal = from.closest('pds-modal');
+        if (pineModal) {
+            const pineDialog = pineModal.querySelector('dialog');
+            if (pineDialog) {
+                return pineDialog;
+            }
+        }
+        return null;
+    }
+    ensureBodyPortal() {
+        if (this.portalEl !== null) {
+            const target = this.getPortalMountRoot();
+            if (this.portalEl.parentElement !== target) {
+                target.appendChild(this.portalEl);
+                // What differs from the new parent may not be what differed from the old one.
+                this.copyPortalContext();
+            }
+            return this.portalEl;
+        }
+        this.portalEl = document.createElement('div');
+        this.portalEl.className = 'pds-combobox-dropdown-portal';
+        // The copied stylesheet's `:host` rules match this div too; keep it out of layout. It still
+        // passes `dir` and the theme down.
+        this.portalEl.style.display = 'contents';
+        this.portalRoot = this.portalEl.attachShadow({ mode: 'open' });
+        this.getPortalMountRoot().appendChild(this.portalEl);
+        this.copyPortalContext();
+        return this.portalEl;
+    }
+    /**
+     * Gives the portal what the dropdown would otherwise get inside the combobox: its styles (so it
+     * needs no global CSS), the reading direction and language, a theme set on an ancestor, and
+     * custom properties set between the combobox and where the portal mounts. A snapshot: the portal
+     * is rebuilt on every open, so a theme switched while it's open applies from the next open.
+     */
+    copyPortalContext() {
+        var _a, _b, _c;
+        const portal = this.portalEl;
+        const root = this.portalRoot;
+        const source = this.el.shadowRoot;
+        if (!portal || !root)
+            return;
+        if ((_a = source === null || source === void 0 ? void 0 : source.adoptedStyleSheets) === null || _a === void 0 ? void 0 : _a.length) {
+            root.adoptedStyleSheets = source.adoptedStyleSheets;
+        }
+        else if (source && !root.querySelector('style')) {
+            source.querySelectorAll('style').forEach(style => root.appendChild(style.cloneNode(true)));
+        }
+        const computed = getComputedStyle(this.el);
+        portal.dir = computed.direction || 'ltr';
+        const lang = (_b = closest('[lang]', this.el)) === null || _b === void 0 ? void 0 : _b.getAttribute('lang');
+        if (lang)
+            portal.lang = lang;
+        const theme = (_c = closest('[data-theme]', this.el)) === null || _c === void 0 ? void 0 : _c.getAttribute('data-theme');
+        if (theme)
+            portal.setAttribute('data-theme', theme);
+        const outside = portal.parentElement ? getComputedStyle(portal.parentElement) : null;
+        for (let i = 0; i < computed.length; i++) {
+            const property = computed[i];
+            if (!property.startsWith('--'))
+                continue;
+            const value = computed.getPropertyValue(property);
+            if (outside && value === outside.getPropertyValue(property))
+                continue;
+            portal.style.setProperty(property, value.trim());
+        }
+    }
+    syncBodyPortal() {
+        if (!this.listboxEl) {
+            return;
+        }
+        this.ensureBodyPortal();
+        const root = this.portalRoot;
+        for (const stale of Array.from(root.children)) {
+            if (stale !== this.listboxEl && stale.tagName !== 'STYLE') {
+                stale.remove();
+            }
+        }
+        if (this.listboxEl.parentNode !== root) {
+            root.appendChild(this.listboxEl);
+            void this.positionDropdown();
+            this.startBodyPortalAutoUpdate();
+        }
+    }
+    removeBodyPortal() {
+        var _a;
+        this.stopBodyPortalAutoUpdate();
+        if ((_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.parentNode) {
+            this.portalEl.parentNode.removeChild(this.portalEl);
+        }
+        this.portalEl = null;
+        this.portalRoot = null;
+        if (this.listboxEl && !this.listboxEl.isConnected) {
+            this.listboxEl = undefined;
+        }
+    }
+    /**
+     * The tree keys in the grouped panel. Up, Down, Home, End, PageUp and PageDown move within one
+     * level; Right, Enter or Space opens a group at its first option; Left, or Escape, closes the
+     * open group back to its row. Returns false for keys the listbox handling covers, such as
+     * Enter on an option.
+     */
+    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.
+        if (this.trigger === 'input') {
+            if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && this.displayText !== '')
+                return false;
+            if (e.key === ' ' || e.key === 'Home' || e.key === 'End')
+                return false;
+        }
+        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();
+            // The row's name, badge and all, as the row itself is named.
+            const optgroup = current;
+            const badge = groupBadgeOf(optgroup);
+            this.revealedGroupLabel = badge === null ? optgroup.label : `${optgroup.label}, ${badge.label}`;
+            return true;
+        };
+        switch (e.key) {
+            case 'ArrowDown':
+                return unseenRow ? reveal() : moveTo(position < 0 ? 0 : position + 1);
+            case 'ArrowUp':
+                return unseenRow ? reveal() : moveTo(position < 0 ? column.length - 1 : position - 1);
+            case 'Home':
+                return moveTo(0);
+            case 'End':
+                return moveTo(column.length - 1);
+            case 'PageDown':
+                return moveTo(position < 0 ? 0 : position + 10);
+            case 'PageUp':
+                return moveTo(position < 0 ? column.length - 1 : position - 10);
+            case 'ArrowRight':
+            case 'Enter':
+            case ' ': {
+                if (current === null || typeof current === 'number')
+                    return false;
+                e.preventDefault();
+                if (!drilledIn || current !== this.openGroup) {
+                    this.expandGroup(entries, current);
+                }
+                else if (e.key === 'ArrowRight') {
+                    // On the row back of a drilled-in group: down into its options.
+                    if (column.length > 1)
+                        this.highlightPanelItem(column[1]);
+                }
+                else {
+                    this.leaveDrilledInGroup();
+                }
+                return true;
+            }
+            case 'ArrowLeft':
+            case 'Escape': {
+                // Escape with no group open closes the panel, through the listbox handling.
+                if (this.openGroup === null)
+                    return false;
+                e.preventDefault();
+                this.collapseToGroup(this.openGroup);
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Where the keyboard is in the grouped panel. An option highlighted in a group that has since
+     * closed (the pointer left its flyout) counts as its group's row, so the keys carry on from
+     * what's showing rather than from an option that isn't.
+     */
+    currentPanelItem() {
+        if (this.highlightedIndex < 0)
+            return this.highlightedGroup;
+        const selectable = this.filteredItems.filter(item => item.tagName === 'OPTION');
+        const group = parentOptgroupOf(selectable[this.highlightedIndex]);
+        return group !== null && group !== this.openGroup ? group : this.highlightedIndex;
+    }
+    /**
+     * Highlights the option at `index`, kept within the list. Disabled options can be highlighted,
+     * so assistive tech announces them as unavailable, but not chosen.
+     */
+    highlightOptionAt(options, index) {
+        if (options.length === 0)
+            return;
+        // Only the keys move it, so it shows the keyboard's ring, as in the grouped panel.
+        this.keyboardNavigating = true;
+        this.highlightedIndex = Math.max(0, Math.min(options.length - 1, index));
+        this.updateOptionFocus();
+    }
+    /** Highlights a group row or an option, opening or closing flyouts to match. */
+    highlightPanelItem(item) {
+        if (typeof item === 'number') {
+            this.highlightedIndex = item;
+        }
+        else {
+            this.highlightedIndex = -1;
+            this.highlightedGroup = item;
+        }
+        this.updateOptionFocus();
+    }
+    expandGroup(entries, optgroup) {
+        var _a;
+        this.flyout.open(optgroup);
+        const first = (_a = findGroup(entries, optgroup)) === null || _a === void 0 ? void 0 : _a.options[0];
+        if (first !== undefined)
+            this.highlightPanelItem(first.index);
+        // Its options render after this change; scroll to the first one then.
+        this.pendingOptionFocus = true;
+    }
+    /** Closes the open group and highlights its row, as a tree's Left does from a child. */
+    collapseToGroup(optgroup) {
+        this.flyout.reset();
+        this.openGroup = null;
+        this.highlightPanelItem(optgroup);
+        // The row renders after this change (in drill-in it replaces the row back); scroll to it then.
+        this.pendingOptionFocus = true;
+    }
+    /**
+     * Sets focus on the native input element.
+     */
+    async setFocus() {
+        var _a;
+        if (this.inputEl) {
+            this.inputEl.focus();
+        }
+        else {
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    /**
+     * Sets the initial highlighted index when dropdown opens. Highlights the selected option unless
+     * it's disabled. Otherwise highlights the first enabled option, or, in the grouped panel, the
+     * first row with something to choose, or nothing when every option is disabled.
+     */
+    setInitialHighlightedIndex() {
+        const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+        if (selectableOptions.length === 0) {
+            this.highlightedIndex = -1;
+            return;
+        }
+        // If there's a selected option, find its index in the filtered options. A disabled one can be
+        // the value, as in a native select, but it isn't highlighted.
+        if (this.selectedOption && !isOptionDisabled(this.selectedOption)) {
+            const selectedIndex = selectableOptions.findIndex(option => option === this.selectedOption);
+            if (selectedIndex >= 0) {
+                this.highlightedIndex = selectedIndex;
+                // In the grouped panel, open on the selection's group, however the dropdown was opened, and
+                // scroll the selection into view once its group has rendered.
+                if (this.showsGroupedPanel) {
+                    this.openGroup = parentOptgroupOf(this.selectedOption);
+                    // Opening on the selection isn't drilling in, so it doesn't slide.
+                    this.drillDirection = null;
+                    this.pendingOptionFocus = true;
+                }
+                return;
+            }
+        }
+        // In the grouped panel, the first row with something to choose: a group stays closed until
+        // it's opened.
+        if (this.showsGroupedPanel) {
+            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;
+        }
+        // No selected option or selected option not in filtered results, highlight the first enabled option
+        this.highlightedIndex = selectableOptions.findIndex(option => !isOptionDisabled(option));
+    }
+    /**
+     * Focus management helper - moves focus to the first option when dropdown opens
+     */
+    focusFirstOption() {
+        if (this.isOpen) {
+            const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            if (selectableOptions.length > 0) {
+                this.setInitialHighlightedIndex();
+                // DON'T focus the option elements - keep focus on trigger and use aria-activedescendant
+                // This prevents the focusout event that was closing the dropdown
+                // But still call updateOptionFocus for scrolling
+                if (this.listboxEl) {
+                    this.updateOptionFocus();
+                }
+            }
+        }
+    }
+    /**
+     * Focus management helper - actually focuses the first option when opened via arrow keys
+     */
+    focusFirstOptionForArrowKeys() {
+        if (!this.isOpen) {
+            return;
+        }
+        // Body-mounted listboxes stay outside modal focus traps; keep focus on the trigger.
+        if (this.usesBodyPortal) {
+            this.isArrowKeyNavigationMode = true;
+            this.focusFirstOption();
+            return;
+        }
+        this.isArrowKeyNavigationMode = true;
+        const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+        if (selectableOptions.length > 0) {
+            this.setInitialHighlightedIndex();
+            // By index, through the same path as arrowing: it opens the option's flyout group first
+            // when it isn't rendered, and highlights it once it is.
+            this.updateOptionFocus();
+        }
+    }
+    /**
+     * Focus management helper - updates visual state and scrolling for the currently highlighted option
+     * Note: We don't actually focus the option to prevent focusout events that close the dropdown
+     */
+    updateOptionFocus() {
+        var _a;
+        if (this.listboxEl === undefined || this.listboxEl === null)
+            return;
+        // A row highlighted outright; an option highlighted in a closed group opens it below instead.
+        const groupRow = this.showsGroupedPanel && this.highlightedIndex < 0 ? this.highlightedGroup : null;
+        if (groupRow !== null) {
+            // Arrowing onto another row closes a flyout that hover left open.
+            if (this.effectiveGroupDisplay === 'flyout' && this.openGroup !== null && this.openGroup !== groupRow) {
+                this.flyout.reset();
+                this.openGroup = null;
+            }
+            // Matched by id, not a selector: componentId is consumer text and may not be selector-safe.
+            const id = this.groupDomId(groupRow);
+            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;
+        }
+        if (this.highlightedIndex < 0)
+            return;
+        // In the flyout panel only the open group's options are rendered: open the highlighted
+        // option's group, and finish once it has rendered. Through the controller, so a hover timer
+        // left running by the pointer can't close or switch the group the keys just moved into.
+        if (this.showsGroupedPanel) {
+            const selectable = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            const group = parentOptgroupOf(selectable[this.highlightedIndex]);
+            const changed = group !== this.openGroup;
+            if (group !== null) {
+                this.flyout.open(group);
+            }
+            else {
+                this.flyout.reset();
+                this.openGroup = null;
+            }
+            if (changed) {
+                this.pendingOptionFocus = true;
+                return;
+            }
+        }
+        const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
+        // By index, not position: the flyout panel renders only some options.
+        const currentOption = this.listboxEl.querySelector(`[data-option-index="${this.highlightedIndex}"]`);
+        if (currentOption) {
+            // Check if any option currently has focus OR if we're in arrow-key navigation mode
+            const hasOptionFocus = Array.from(optionElements).some(el => el === document.activeElement);
+            // The panel's search field keeps focus and points at the option with aria-activedescendant,
+            // and so does the trigger over the grouped panel, whose group rows can't take focus and
+            // whose options are hidden while a flyout is placed.
+            const shouldFocusOption = !this.usesBodyPortal &&
+                !this.usesPanelSearch &&
+                !this.showsGroupedPanel &&
+                (hasOptionFocus || this.isArrowKeyNavigationMode);
+            if (shouldFocusOption) {
+                optionElements.forEach(option => {
+                    option.setAttribute('tabindex', '-1');
+                });
+                currentOption.setAttribute('tabindex', '0');
+                currentOption.focus();
+            }
+            // Always scroll the option into view; in a flyout, by scrolling the flyout alone.
+            const flyout = currentOption.closest('.pds-combobox__flyout');
+            if (flyout) {
+                this.flyout.reveal(flyout, currentOption);
+            }
+            else {
+                this.scrollIntoViewNearest(currentOption, true);
+            }
+        }
+        // Always update aria-activedescendant on the trigger element
+        this.updateAriaActiveDescendant();
+    }
+    /** The highlighted group row in the grouped panel, or null while an option is highlighted. */
+    get highlightedGroupRow() {
+        if (!this.showsGroupedPanel)
+            return null;
+        if (this.highlightedIndex < 0)
+            return this.highlightedGroup;
+        // An option left highlighted in a flyout that has since closed shows as its group's row.
+        const current = this.currentPanelItem();
+        return typeof current === 'number' ? null : current;
+    }
+    /**
+     * The id of the highlighted option or group row, only while it's rendered. In the flyout panel
+     * an option in a closed group isn't in the DOM, and drilled into a group the other groups' rows
+     * aren't; `aria-activedescendant` must not point at a missing element.
+     */
+    get activeDescendantId() {
+        if (!this.isOpen)
+            return undefined;
+        const groupRow = this.highlightedGroupRow;
+        if (groupRow !== null) {
+            const drilledIntoAnother = this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null && this.openGroup !== groupRow;
+            return drilledIntoAnother ? undefined : this.groupDomId(groupRow);
+        }
+        if (this.highlightedIndex < 0)
+            return undefined;
+        if (this.showsGroupedPanel) {
+            const selectable = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            const group = parentOptgroupOf(selectable[this.highlightedIndex]);
+            if (group !== null && group !== this.openGroup)
+                return undefined;
+        }
+        return this.optionDomId(this.highlightedIndex);
+    }
+    /** Points the focused element's aria-activedescendant at the highlighted option, or clears it. */
+    updateAriaActiveDescendant() {
+        // With panel search, the element with focus owns it, not the trigger: the search field, or
+        // the list while a drilled-in group hides the field.
+        const target = this.usesPanelSearch ? (this.hidesPanelSearch ? this.panelTreeEl : this.panelSearchEl) : this.triggerEl;
+        if (!target)
+            return;
+        const id = this.activeDescendantId;
+        if (id !== undefined) {
+            target.setAttribute('aria-activedescendant', id);
+        }
+        else {
+            target.removeAttribute('aria-activedescendant');
+        }
+    }
+    /**
+     * Focus management helper - restores focus to the trigger element
+     */
+    restoreFocusToTrigger() {
+        setTimeout(() => {
+            if (this.inputEl) {
+                this.inputEl.focus();
+            }
+            else if (this.triggerEl) {
+                this.triggerEl.focus();
+            }
+        }, 0);
+    }
+    /**
+     * Gets the value of the currently selected option.
+     */
+    async getSelectedValue() {
+        return this.selectedOption ? this.selectedOption.value : null;
+    }
+    /**
+     * Clears the selected value and resets the component. Works while disabled too, as setting a
+     * native control's value from script does.
+     */
+    async clear() {
+        const hadValue = this.value !== '' || this.displayText !== '';
+        this.displayText = '';
+        this.setSelectedOption(null);
+        this.value = '';
+        this.filterOptions();
+        this.updateFormValue('');
+        if (hadValue) {
+            this.pdsComboboxChange.emit({ value: '' });
+        }
+    }
+    // Group rows in the flyout panel carry their group's index, as options carry theirs.
+    groupFromEvent(event) {
+        var _a, _b;
+        const index = Number(event.currentTarget.getAttribute('data-group-index'));
+        return (_b = (_a = this.renderedGroups[index]) === null || _a === void 0 ? void 0 : _a.optgroup) !== null && _b !== void 0 ? _b : null;
+    }
+    highlightGroupRowByPointer(group) {
+        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() {
+        return this.displayText || '';
+    }
+    // Get the layout content of the selected option for button trigger
+    get selectedLayoutContent() {
+        return this.selectedOptionLayoutContent;
+    }
+    // Check if selected option has layout
+    get selectedHasLayout() {
+        return this.selectedOption ? this.isOptionLayout(this.selectedOption) : false;
+    }
+    // Extract chip sentiment from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipSentiment() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            const sentiment = this.selectedOption.getAttribute('chip-sentiment');
+            if (sentiment)
+                return sentiment;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            const sentiment = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('sentiment');
+            if (sentiment)
+                return sentiment;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip) {
+                const sentiment = slottedChip.getAttribute('sentiment');
+                if (sentiment)
+                    return sentiment;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipSentiment;
+    }
+    // Extract chip large from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipLarge() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            if (this.selectedOption.hasAttribute('chip-large'))
+                return true;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            if ((chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('size')) === 'lg')
+                return true;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip && slottedChip.getAttribute('size') === 'lg') {
+                return true;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipLarge;
+    }
+    // Extract chip icon from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipIcon() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            const icon = this.selectedOption.getAttribute('chip-icon');
+            if (icon)
+                return icon;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            const icon = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('icon');
+            if (icon)
+                return icon;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip) {
+                const icon = slottedChip.getAttribute('icon');
+                if (icon)
+                    return icon;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipIcon;
+    }
+    // Extract chip dot from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipDot() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            if (this.selectedOption.hasAttribute('chip-dot'))
+                return true;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            if (chipElement === null || chipElement === void 0 ? void 0 : chipElement.hasAttribute('dot'))
+                return true;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip && slottedChip.hasAttribute('dot')) {
+                return true;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipDot;
+    }
+    /**
+     * With `async-url`, fetches when the button trigger opens: the first page if nothing has loaded.
+     * The panel's search field opens empty, so results left from the last search are refetched for
+     * an empty query.
+     */
+    fetchAsyncOptionsOnOpen() {
+        if (!this.asyncUrl)
+            return;
+        if (this.usesPanelSearch && (this.internalOptions.length === 0 || this.lastFetchedQuery !== '')) {
+            this.debouncedFetchAsyncOptions('', 1);
+        }
+        else if (this.internalOptions.length === 0) {
+            this.debouncedFetchAsyncOptions(this.displayText, 1);
+        }
+    }
+    handleOptionClick(option) {
+        if (isOptionDisabled(option))
+            return;
+        if (this.selectedIcon === null)
+            this.fadesValueIn = true;
+        // Update reactive state - single source of truth
+        // The @Watch('selectedOption') will handle displayText, value, and form internals
+        this.setSelectedOption(option);
+        this.isOpen = false;
+        this.clearExpandFilterList();
+        this.pdsComboboxChange.emit({ value: option.value });
+    }
+    /** The row shown while options load: at the top of the list, or of a drilled-in group's options. */
+    renderLoadingRow() {
+        if (!this.loading)
+            return null;
+        const hasSlottedLoading = !this.usesBodyPortal && !!this.el.querySelector('[slot="loading"]');
+        return (h("li", { class: "pds-combobox__loading", role: "presentation" }, hasSlottedLoading ? h("slot", { name: "loading" }) : h("pds-loader", { size: "small" })));
+    }
+    /** The row after the last option while more can load, inside whatever scrolls them. */
+    renderLoadMoreRow() {
+        if (!this.hasMore || this.loading)
+            return null;
+        return (h("li", { class: "pds-combobox__load-more", role: "presentation" }, h("pds-loader", { size: "small" })));
+    }
+    /** Drilled into a group: the group and its place among the panel's entries; otherwise null. */
+    drilledInEntry(entries) {
+        if (this.effectiveGroupDisplay !== 'drill-in' || this.openGroup === null)
+            return null;
+        const position = entries.findIndex(entry => entry.kind === 'group' && entry.group.optgroup === this.openGroup);
+        const open = entries[position];
+        return (open === null || open === void 0 ? void 0 : open.kind) === 'group' ? { group: open.group, position } : null;
+    }
+    renderDropdown() {
+        if (!this.isOpen) {
+            return null;
+        }
+        const hasSlottedEmpty = !this.usesBodyPortal && !!this.el.querySelector('[slot="empty"]');
+        // Drilled in, the group's options scroll under the row back, so their loading rows go with them.
+        const drilledIn = this.showsGroupedPanel && this.drilledInEntry(this.panelEntries()) !== null;
+        const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+        const withSearch = this.usesPanelSearch;
+        // While a drilled-in group hides the search field, the list takes focus in its place.
+        const listTakesFocus = this.hidesPanelSearch;
+        const list = (h("ul", { key: "panel-list", class: {
+                'pds-combobox__listbox': !withSearch,
+                'pds-combobox__listbox-options': withSearch,
+                'pds-combobox__listbox-options--drilled-in': listTakesFocus,
+                'pds-combobox__listbox--grouped': this.groupDisplay !== 'inline',
+                'pds-combobox__listbox--drill-in': this.drillDirection === 'in',
+                'pds-combobox__listbox--drill-out': this.drillDirection === 'out',
+                'pds-combobox__listbox--pointer-hover': this.pointerCanHover,
+                'pds-combobox__listbox--truncate': this.truncate,
+            }, 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 => {
+                if (withSearch)
+                    this.panelTreeEl = el;
+                else
+                    this.listboxEl = el;
+            }, onScroll: this.handleScroll }, !drilledIn && this.renderLoadingRow(), !this.loading && this.filteredItems.length === 0 && (h("li", { class: "pds-combobox__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, this.noOptionsFoundLabel)))), this.showsGroupedPanel ? this.renderGroupedPanel() : this.renderListboxItems(selectableOptions.length), !drilledIn && this.renderLoadMoreRow()));
+        if (!withSearch)
+            return list;
+        // The search field sits above the list; the wrapper is what's positioned and portaled.
+        return (h("div", { class: "pds-combobox__listbox pds-combobox__listbox--with-search", ref: el => (this.listboxEl = el), onAnimationEnd: this.onDrillAnimationEnd, onMouseDown: this.onPanelMouseDown,
+            // Portaled, the panel sits outside .pds-combobox, so its focusout wouldn't reach that handler.
+            onFocusout: this.usesBodyPortal ? this.onComboboxFocusOut : undefined }, !listTakesFocus && this.renderPanelSearch(), list));
+    }
+    /**
+     * The listbox's items. Each optgroup's options sit in a `group` named for it, as in
+     * `pds-multiselect`, so assistive tech announces the group on entering it; a `pds-text` label
+     * stays a caption above the options that follow it.
+     */
+    renderListboxItems(setSize) {
+        const rendered = [];
+        let optionIndex = 0;
+        let group = null;
+        const closeGroup = () => {
+            if (group === null)
+                return;
+            const { optgroup, key, options, members } = group;
+            const groupIcon = groupIconOf(optgroup);
+            const badge = groupBadgeOf(optgroup);
+            // As in the grouped displays: disabled when there's nothing left in it to choose.
+            const disabled = members.length > 0 && members.every(member => isOptionDisabled(member));
+            rendered.push(h("li", { key: key, class: { 'pds-combobox__group': true, 'pds-combobox__group--disabled': disabled }, role: "group", "aria-label": badge === null ? optgroup.label : `${optgroup.label}, ${badge.label}`, "aria-disabled": disabled ? 'true' : undefined }, h("div", { class: {
+                    'pds-combobox__group-label': true,
+                    'pds-combobox__group-label--with-icon': groupIcon !== null,
+                    'pds-combobox__group-label--with-badge': badge !== null,
+                }, "aria-hidden": "true" }, groupIcon !== null && (
+            // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
+            h("pds-icon", { name: groupIcon, size: "small", "aria-hidden": "true", class: "pds-combobox__group-icon" })), badge === null ? optgroup.label : h("span", { class: "pds-combobox__group-label-text" }, optgroup.label), this.renderBadge(badge, 'pds-combobox__group-badge')), h("ul", { class: "pds-combobox__group-list", role: "presentation" }, options)));
+            group = null;
+        };
+        this.filteredItems.forEach((item, itemIdx) => {
+            if (item.tagName === 'OPTGROUP') {
+                closeGroup();
+                group = { optgroup: item, key: `optgroup-${itemIdx}`, options: [], members: [] };
+            }
+            else if (item.tagName === 'PDS-TEXT') {
+                closeGroup();
+                rendered.push(h("li", { key: `pds-text-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation" }, item.textContent));
+            }
+            else if (item.tagName === 'OPTION') {
+                const option = item;
+                if (group !== null && parentOptgroupOf(option) !== group.optgroup)
+                    closeGroup();
+                const rendering = this.renderOption(option, optionIndex, { posinset: optionIndex + 1, setsize: setSize });
+                optionIndex++;
+                if (group !== null) {
+                    group.options.push(rendering);
+                    group.members.push(option);
+                }
+                else {
+                    rendered.push(rendering);
+                }
+            }
+        });
+        closeGroup();
+        return rendered;
+    }
+    /** `panelSearch` applies to the triggers that can't be typed into. */
+    get usesPanelSearch() {
+        return this.panelSearch && this.trigger !== 'input';
+    }
+    /** `groupDisplay`, with `flyout` drilling in when there's no room beside the dropdown. */
+    get effectiveGroupDisplay() {
+        return this.groupDisplay === 'flyout' && this.flyoutFallback ? 'drill-in' : this.groupDisplay;
+    }
+    /**
+     * The popup's role, for the triggers' `aria-haspopup`: a `tree` while the grouped panel shows
+     * groups, and a `listbox` of options otherwise, search results included.
+     */
+    get popupRole() {
+        return this.showsGroupedPanel ? 'tree' : 'listbox';
+    }
+    /**
+     * The input trigger's `aria-haspopup`. While closed it names what opening shows: the full list,
+     * so the grouped panel in a grouped display, even though the input still holds the selection's
+     * label.
+     */
+    get inputPopupRole() {
+        if (this.isOpen)
+            return this.popupRole;
+        return this.effectiveGroupDisplay === 'inline' ? 'listbox' : 'tree';
+    }
+    /**
+     * The button and chip triggers' `aria-haspopup`. With panel search the trigger opens the panel,
+     * which starts as a tree in a grouped display, so typing in the panel doesn't change it.
+     */
+    get triggerPopupRole() {
+        if (!this.usesPanelSearch)
+            return this.popupRole;
+        return this.groupDisplay === 'inline' ? 'listbox' : 'tree';
+    }
+    /**
+     * Drilled into a group with panel search: the group's row back takes the search field's place,
+     * since one group's options don't need searching. Typing searches the whole list again.
+     */
+    get hidesPanelSearch() {
+        return this.usesPanelSearch && this.showsGroupedPanel && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null;
+    }
+    /** The grouped panel is showing groups rather than search results. */
+    get showsGroupedPanel() {
+        if (this.effectiveGroupDisplay === 'inline')
+            return false;
+        const searching = this.usesPanelSearch
+            ? this.panelQuery !== ''
+            : this.mode === 'filter' && !this.expandFilterListWhileOpen && this.displayText !== '';
+        return !searching;
+    }
+    setPanelQuery(query) {
+        this.panelQuery = query;
+        this.clearExpandFilterList();
+        this.filterOptions();
+        this.pdsComboboxSearch.emit({ query: this.panelQuery });
+        if (this.asyncUrl !== undefined && this.asyncUrl !== '') {
+            this.debouncedFetchAsyncOptions(this.panelQuery, 1);
+        }
+        // The list changes size, so place the dropdown again, as typing in the input trigger does.
+        setTimeout(() => this.openDropdownPositioning(), 0);
+    }
+    /** What's being searched: the panel's field, or the input trigger's text. */
+    get activeQuery() {
+        return this.usesPanelSearch ? this.panelQuery : this.displayText;
+    }
+    // Tab closes the dropdown and lands on the trigger, as Escape does: the focused field or list is
+    // about to unmount, so the browser can't tab on from it. The next Tab continues from the trigger.
+    handlePanelTab(event) {
+        if (event.key !== 'Tab')
+            return false;
+        event.preventDefault();
+        this.handleKeyDown(event);
+        this.restoreFocusToTrigger();
+        return true;
+    }
+    /** Returns from a drilled-in group to the group list; false when not drilled in. */
+    leaveDrilledInGroup() {
+        if (!this.showsGroupedPanel || this.effectiveGroupDisplay !== 'drill-in' || this.openGroup === null)
+            return false;
+        this.collapseToGroup(this.openGroup);
+        return true;
+    }
+    renderPanelSearch() {
+        return (h("div", { key: "panel-search", class: {
+                'pds-combobox__panel-search': true,
+                // Coming back from a group, the search field slides in with the groups.
+                'pds-combobox__panel-search--drill-out': this.drillDirection === 'out',
+            } }, h("pds-icon", { name: "search", size: "regular", "aria-hidden": "true" }), h("input", { ref: el => (this.panelSearchEl = el), type: "text", class: "pds-combobox__panel-search-input", placeholder: this.searchPlaceholder, value: this.panelQuery, role: "combobox", "aria-label": this.searchOptionsLabel, "aria-haspopup": this.popupRole, "aria-controls": this.listboxId, "aria-autocomplete": "list", "aria-expanded": "true", "aria-activedescendant": this.activeDescendantId, autocomplete: "off", onInput: this.onPanelSearchInput, onKeyDown: this.onPanelSearchKeyDown })));
+    }
+    /**
+     * An option, as a listbox `option` or, given a tree `level`, a `treeitem`. `posinset` and
+     * `setsize` place it among its siblings.
+     */
+    renderOption(option, index, { posinset, setsize, level }) {
+        const isSelected = this.isOptionSelected(option);
+        const isHighlighted = this.highlightedIndex === index;
+        const isLayout = this.isOptionLayout(option);
+        const isChip = this.isOptionChip(option);
+        const isDisabled = isOptionDisabled(option);
+        const tree = level !== undefined;
+        const badge = isLayout || isChip ? null : optionBadgeOf(option);
+        return (h("li", { key: option.value, id: this.optionDomId(index), role: tree ? 'treeitem' : 'option', "aria-selected": isSelected ? 'true' : tree ? undefined : 'false', "aria-disabled": isDisabled ? 'true' : undefined, "aria-level": level, "aria-setsize": setsize, "aria-posinset": posinset, "aria-label": isLayout || isChip
+                ? option.getAttribute('aria-label') || this.getOptionLabel(option)
+                : badge && `${this.getOptionLabel(option)}, ${badge.label}`, tabindex: this.usesBodyPortal || this.usesPanelSearch || tree ? '-1' : isHighlighted ? '0' : '-1', class: {
+                'pds-combobox__option': true,
+                'pds-combobox__option--highlighted': isHighlighted,
+                // The keyboard's place, as on the group rows (`--keyboard`).
+                'pds-combobox__option--keyboard': isHighlighted && this.keyboardNavigating,
+                'pds-combobox__option--layout': isLayout,
+                'pds-combobox__option--chip': isChip,
+                'pds-combobox__option--disabled': isDisabled,
+                'pds-combobox__option--with-badge': badge !== null,
+            }, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : ([this.renderOptionLabel(option), this.renderOptionBadge(option)]), isSelected && h("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
+    }
+    /** Copies an `options` badge to an option's or optgroup's `data-badge*` attributes; only strings count. */
+    setBadgeAttributes(element, badge) {
+        if (typeof badge !== 'object' || badge === null)
+            return;
+        const { label, sentiment, icon } = badge;
+        if (typeof label !== 'string' || label.trim() === '')
+            return;
+        element.setAttribute('data-badge', label);
+        if (typeof sentiment === 'string')
+            element.setAttribute('data-badge-sentiment', sentiment);
+        if (typeof icon === 'string')
+            element.setAttribute('data-badge-icon', icon);
+    }
+    /** An option's badge, after its text. */
+    renderOptionBadge(option) {
+        return this.renderBadge(optionBadgeOf(option), 'pds-combobox__option-badge');
+    }
+    /** A badge as a `pds-chip`: after an option's text, or a group's label. */
+    renderBadge(badge, className) {
+        var _a;
+        if (badge === null)
+            return null;
+        return (h("pds-chip", { size: "sm", sentiment: badge.sentiment,
+            // A Pine icon name only, checked by optionBadgeOf; pds-chip's `icon` also loads URLs.
+            icon: (_a = badge.icon) !== null && _a !== void 0 ? _a : undefined,
+            // A long label, often a translated one, truncates rather than squeezing the option's text.
+            maxWidth: "50%", class: className }, badge.label));
+    }
+    /**
+     * An option's text, after its `data-icon` when it has one. Beside a badge the text is always
+     * wrapped, so it can shrink and wrap rather than push the badge out of the row.
+     */
+    renderOptionLabel(option) {
+        const icon = optionIconOf(option);
+        const label = this.truncate ? (h("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
+        if (icon === null) {
+            return optionBadgeOf(option) === null ? label : h("span", { class: "pds-combobox__option-label" }, label);
+        }
+        return (h("span", { class: "pds-combobox__option-label" }, h("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
+    }
+    /** 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
+     * an opened group replaces them with its row, drawn as a row back, above its options. Either way
+     * it's a tree: the rows and ungrouped options are level 1, a group's options level 2.
+     */
+    renderGroupedPanel() {
+        const entries = this.panelEntries();
+        const setsize = entries.length;
+        const drilled = this.drilledInEntry(entries);
+        if (drilled)
+            return this.renderGroupBackRow(drilled.group, { posinset: drilled.position + 1, setsize });
+        this.renderedGroups = [];
+        return entries.map((entry, position) => {
+            const placement = { posinset: position + 1, setsize };
+            if (entry.kind === 'option')
+                return this.renderOption(entry.option, entry.index, Object.assign(Object.assign({}, placement), { level: 1 }));
+            this.renderedGroups.push(entry.group);
+            return this.renderGroupRow(entry.group, this.renderedGroups.length - 1, placement);
+        });
+    }
+    /** A group's options, as its children in the tree. */
+    renderGroupOptions(group) {
+        return group.options.map(({ option, index }, position) => this.renderOption(option, index, { posinset: position + 1, setsize: group.options.length, level: 2 }));
+    }
+    /**
+     * Drilled into a group: its treeitem, expanded. Its row reads as a way back ("Back: Tag") and
+     * leads its options. It leaves out the group's badge: the row is a way back, not a group to
+     * choose, and the badge was on the row that opened it. An option's own badge still shows.
+     */
+    renderGroupBackRow(group, { posinset, setsize }) {
+        const id = this.groupDomId(group.optgroup);
+        const disabled = isGroupDisabled(group);
+        return (h("li", { key: "group-back", id: id, class: {
+                'pds-combobox__group-back': true,
+                'pds-combobox__group-back--disabled': disabled,
+                // 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` }, h("div", { class: "pds-combobox__group-row-trigger pds-combobox__group-back-trigger", onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupBackMouseEnter, onClick: this.onGroupBackClick }, h("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, h("pds-icon", { name: "caret-left", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" }), h("span", { class: "visually-hidden" }, this.drillInBackLabel, ": "), group.label)), h("ul", { class: "pds-combobox__drill-in-options", role: "group", "aria-label": group.label, onScroll: this.handleScroll }, this.renderLoadingRow(), this.renderGroupOptions(group), this.renderLoadMoreRow())));
+    }
+    renderGroupRow(group, groupIndex, { posinset, setsize }) {
+        const flyout = this.effectiveGroupDisplay === 'flyout';
+        const isOpen = flyout && this.openGroup === group.optgroup;
+        // `--has-selection` is a state hook only (tests read it), not styled. The fill follows
+        // `--highlighted` (always in flyout, in drill-in only for the keys) and a flyout's `--open` row.
+        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 (h("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': 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": group.badge === null ? `${id}-label` : undefined, "aria-label": group.badge === null ? undefined : `${group.label}, ${group.badge.label}`, "data-group-index": groupIndex, onMouseEnter: flyout ? this.onGroupRowMouseEnter : undefined, onMouseLeave: flyout ? this.onGroupRowMouseLeave : undefined }, h("div", { class: "pds-combobox__group-row-trigger", "data-group-index": groupIndex, onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupRowTriggerMouseEnter, onClick: this.onGroupRowClick }, h("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, group.icon !== null && (
+        // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
+        h("pds-icon", { name: group.icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__group-icon" })), group.label), this.renderBadge(group.badge, 'pds-combobox__group-badge'), h("pds-icon", { name: "caret-right", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" })), isOpen && (h("ul", { class: "pds-combobox__flyout", role: "group", "aria-label": group.label, style: { minWidth: this.flyoutMinWidth, maxWidth: this.flyoutMaxWidth } }, this.renderGroupOptions(group)))));
+    }
+    // Helper method to render the caret icon
+    renderCaretIcon() {
+        return h("pds-icon", { icon: "caret-down", "aria-hidden": "true", class: "pds-combobox__button-trigger-chevron" });
+    }
+    // Helper method to render layout content
+    renderLayoutContent() {
+        return (h("div", { class: "pds-combobox__button-trigger-layout-wrapper", innerHTML: this.selectedLayoutContent }));
+    }
+    // Helper method to render default text content
+    renderDefaultContent() {
+        const icon = this.selectedIcon;
+        return (h("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,
+                'pds-combobox__button-trigger-label--value-in': icon !== null && this.fadesValueIn,
+            } }, icon !== null && (
+        // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
+        h("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.truncate ? (
+        // Keyed so a new label drops a stale `title`.
+        h("span", { key: this.selectedLabel || this.placeholder, class: "pds-combobox__button-trigger-text" }, this.selectedLabel || this.placeholder)) : (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() {
+        return this.selectedHasLayout && !!this.selectedLayoutContent;
+    }
+    // Helper method to build chip trigger CSS classes
+    getChipTriggerClass() {
+        const classes = ['pds-combobox__chip-trigger'];
+        // Add sentiment class
+        classes.push(`pds-combobox__chip-trigger--${this.selectedChipSentiment}`);
+        // Always use dropdown variant for chip triggers
+        classes.push('pds-combobox__chip-trigger--dropdown');
+        // Add large class if needed
+        if (this.selectedChipLarge) {
+            classes.push('pds-combobox__chip-trigger--large');
+        }
+        // Add dot class if needed
+        if (this.selectedChipDot) {
+            classes.push('pds-combobox__chip-trigger--dot');
+        }
+        return classes.join(' ');
+    }
+    renderButtonTriggerContent() {
+        // Case 1: Custom trigger content with layout priority
+        if (this.customTriggerContent) {
+            if (this.shouldShowLayoutContent()) {
+                return [this.renderLayoutContent(), this.renderCaretIcon()];
+            }
+            // Fall back to slot content when no layout is available
+            return h("slot", { name: "trigger-content" });
+        }
+        // Case 2: Standard mode with layout content
+        if (this.shouldShowLayoutContent()) {
+            return [this.renderLayoutContent(), this.renderCaretIcon()];
+        }
+        // Case 3: Standard mode with default text content
+        return [this.renderDefaultContent(), this.renderCaretIcon()];
+    }
+    renderChipTriggerContent() {
+        // Case 1: Custom trigger content with layout priority
+        if (this.customTriggerContent) {
+            if (this.shouldShowLayoutContent()) {
+                // When using custom layouts, the chip handles its own dropdown arrow
+                return this.renderChipTriggerLayoutContent();
+            }
+            // Fall back to slot content when no layout is available - chip handles its own dropdown arrow
+            return h("slot", { name: "trigger-content" });
+        }
+        // Case 2: Standard mode with layout content
+        if (this.shouldShowLayoutContent()) {
+            // When using custom layouts, the chip handles its own dropdown arrow
+            return this.renderChipTriggerLayoutContent();
+        }
+        // Case 3: Automatic chip mode - selected option has chip attributes
+        if (this.selectedOption && this.selectedOptionChipProps) {
+            // Render as chip automatically - chip handles its own dropdown arrow
+            return this.renderSelectedOptionAsChip();
+        }
+        // Case 4: Standard mode with default text content
+        return [
+            this.renderChipTriggerDefaultContent(),
+            this.renderCaretIcon()
+        ];
+    }
+    // Helper method to render selected option as chip for trigger (automatic approach)
+    renderSelectedOptionAsChip() {
+        if (!this.selectedOption || !this.selectedOptionChipProps)
+            return null;
+        return (h("pds-chip", { sentiment: this.selectedOptionChipProps.sentiment, variant: "dropdown" // Always use dropdown variant for triggers
+            ,
+            size: this.selectedOptionChipProps.large ? 'lg' : undefined, icon: this.selectedOptionChipProps.icon, dot: this.selectedOptionChipProps.dot, class: "pds-combobox__chip-trigger-auto" }, this.getOptionLabel(this.selectedOption)));
+    }
+    // Helper method to render chip trigger layout content
+    renderChipTriggerLayoutContent() {
+        return (h("div", { class: "pds-combobox__chip-trigger-layout-wrapper", innerHTML: this.getModifiedLayoutContentForTrigger() }));
+    }
+    // Helper method to modify layout content for trigger use (ensure dropdown variant)
+    getModifiedLayoutContentForTrigger() {
+        let content = this.selectedLayoutContent;
+        // If the content contains a pds-chip, ensure it has variant="dropdown"
+        if (content.includes('<pds-chip')) {
+            // Use a temporary div to parse and modify the HTML
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = content;
+            const chipElement = tempDiv.querySelector('pds-chip');
+            if (chipElement) {
+                chipElement.setAttribute('variant', 'dropdown');
+                content = tempDiv.innerHTML;
+            }
+        }
+        return content;
+    }
+    // Helper method to render chip trigger default content
+    renderChipTriggerDefaultContent() {
+        return (h("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && h("pds-icon", { icon: this.selectedChipIcon, "aria-hidden": "true", class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
+    }
+    // Helper method to render option as chip (new automatic approach)
+    renderOptionChip(option) {
+        const chipProps = this.getOptionChipProps(option);
+        return (h("pds-chip", { sentiment: chipProps.sentiment, variant: "text" // Dropdown options use text variant, not dropdown
+            ,
+            size: chipProps.large ? 'lg' : undefined, icon: chipProps.icon, dot: chipProps.dot, class: "pds-combobox__option-chip" }, this.getOptionLabel(option)));
+    }
+    // Mirrors pds-multiselect and pds-select: an error message on its own puts the
+    // field in an invalid state, so assistive tech agrees with the visual treatment.
+    isInvalid() {
+        return Boolean(this.invalid) || Boolean(this.errorMessage);
+    }
+    renderMessages() {
+        const hasErrorMessage = Boolean(this.errorMessage);
+        const showHelperMessage = Boolean(this.helperMessage) && !hasErrorMessage;
+        return [
+            showHelperMessage && (h("p", { class: "pds-combobox__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)),
+            hasErrorMessage && (h("p", { class: "pds-combobox__error", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { icon: "danger", size: "small", "aria-hidden": "true" }), this.errorMessage)),
+        ];
+    }
+    render() {
+        var _a;
+        const triggerClass = [
+            'pds-combobox__button-trigger',
+            `pds-combobox__button-trigger--${this.triggerVariant}`,
+            this.triggerShape === 'input' && 'pds-combobox__button-trigger--input-shape',
+            this.truncate && 'pds-combobox__button-trigger--truncate',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (h(Host, { key: '3a7f09752d2dff0fbf653852cd9ea474a44c61d5', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '56d3bf86655abfd945228ee0bc3a556a6ad766b3', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: 'a07f37d62bca1b15df3aa258d94c0df4609b93b3', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("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" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("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())) : (h("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, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), h("div", { key: '0c0accd76b79aba9fa3072eb68800102d458d0a7', style: { display: 'none' } }, h("slot", { key: 'be9cc4c897788342bbc96321f033ed4fd97e80ff', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
+            h("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.
+            h("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); }
+    static get watchers() { return {
+        "groupDisplay": [{
+                "groupDisplayChanged": 0
+            }],
+        "openGroup": [{
+                "openGroupChanged": 0
+            }],
+        "flyoutFallback": [{
+                "flyoutFallbackChanged": 0
+            }],
+        "disabled": [{
+                "disabledChanged": 0
+            }],
+        "isOpen": [{
+                "isOpenChanged": 0
+            }],
+        "debounce": [{
+                "setupDebounce": 0
+            }],
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "value": [{
+                "handleValueChange": 0
+            }],
+        "selectedOption": [{
+                "handleSelectedOptionChange": 0
+            }]
+    }; }
+};
+PdsCombobox.style = pdsComboboxCss();
+
+export { PdsCombobox as pds_combobox };