@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-shell-layout.js

@@ -1,1812 +1,11 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { n as isDesktopViewport } from './utils.js';
-import { d as defineCustomElement$c } from './swirl-box2.js';
-import { d as defineCustomElement$b } from './swirl-button2.js';
-import { d as defineCustomElement$a } from './swirl-icon-arrow-back2.js';
-import { d as defineCustomElement$9 } from './swirl-icon-arrow-forward2.js';
-import { d as defineCustomElement$8 } from './swirl-icon-dock-left-collapse2.js';
-import { d as defineCustomElement$7 } from './swirl-icon-dock-left-expand2.js';
-import { d as defineCustomElement$6 } from './swirl-icon-double-arrow-left2.js';
-import { d as defineCustomElement$5 } from './swirl-separator2.js';
-import { d as defineCustomElement$4 } from './swirl-stack2.js';
-import { d as defineCustomElement$3 } from './swirl-tooltip2.js';
-import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
-
+import{proxyCustomElement as e,HTMLElement as l,createEvent as a,h as t,Host as o,transformTag as s}from"@stencil/core/internal/client";import{c as i}from"./index2.js";import{n as r}from"./utils.js";import{d as n}from"./swirl-box2.js";import{d as c}from"./swirl-button2.js";import{d}from"./swirl-icon-arrow-back2.js";import{d as u}from"./swirl-icon-arrow-forward2.js";import{d as h}from"./swirl-icon-dock-left-collapse2.js";import{d as f}from"./swirl-icon-dock-left-expand2.js";import{d as y}from"./swirl-icon-double-arrow-left2.js";import{d as v}from"./swirl-separator2.js";import{d as b}from"./swirl-stack2.js";import{d as w}from"./swirl-tooltip2.js";import{d as p}from"./swirl-visually-hidden2.js";
 /*!
 * tabbable 6.2.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
-// NOTE: separate `:not()` selectors has broader browser support than the newer
-//  `:not([inert], [inert] *)` (Feb 2023)
-// CAREFUL: JSDom does not support `:not([inert] *)` as a selector; using it causes
-//  the entire query to fail, resulting in no nodes found, which will break a lot
-//  of things... so we have to rely on JS to identify nodes inside an inert container
-var candidateSelectors = ['input:not([inert])', 'select:not([inert])', 'textarea:not([inert])', 'a[href]:not([inert])', 'button:not([inert])', '[tabindex]:not(slot):not([inert])', 'audio[controls]:not([inert])', 'video[controls]:not([inert])', '[contenteditable]:not([contenteditable="false"]):not([inert])', 'details>summary:first-of-type:not([inert])', 'details:not([inert])'];
-var candidateSelector = /* #__PURE__ */candidateSelectors.join(',');
-var NoElement = typeof Element === 'undefined';
-var matches = NoElement ? function () {} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
-var getRootNode = !NoElement && Element.prototype.getRootNode ? function (element) {
-  var _element$getRootNode;
-  return element === null || element === void 0 ? void 0 : (_element$getRootNode = element.getRootNode) === null || _element$getRootNode === void 0 ? void 0 : _element$getRootNode.call(element);
-} : function (element) {
-  return element === null || element === void 0 ? void 0 : element.ownerDocument;
-};
-
-/**
- * Determines if a node is inert or in an inert ancestor.
- * @param {Element} [node]
- * @param {boolean} [lookUp] If true and `node` is not inert, looks up at ancestors to
- *  see if any of them are inert. If false, only `node` itself is considered.
- * @returns {boolean} True if inert itself or by way of being in an inert ancestor.
- *  False if `node` is falsy.
- */
-var isInert = function isInert(node, lookUp) {
-  var _node$getAttribute;
-  if (lookUp === void 0) {
-    lookUp = true;
-  }
-  // CAREFUL: JSDom does not support inert at all, so we can't use the `HTMLElement.inert`
-  //  JS API property; we have to check the attribute, which can either be empty or 'true';
-  //  if it's `null` (not specified) or 'false', it's an active element
-  var inertAtt = node === null || node === void 0 ? void 0 : (_node$getAttribute = node.getAttribute) === null || _node$getAttribute === void 0 ? void 0 : _node$getAttribute.call(node, 'inert');
-  var inert = inertAtt === '' || inertAtt === 'true';
-
-  // NOTE: this could also be handled with `node.matches('[inert], :is([inert] *)')`
-  //  if it weren't for `matches()` not being a function on shadow roots; the following
-  //  code works for any kind of node
-  // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`
-  //  so it likely would not support `:is([inert] *)` either...
-  var result = inert || lookUp && node && isInert(node.parentNode); // recursive
-
-  return result;
-};
-
-/**
- * Determines if a node's content is editable.
- * @param {Element} [node]
- * @returns True if it's content-editable; false if it's not or `node` is falsy.
- */
-var isContentEditable = function isContentEditable(node) {
-  var _node$getAttribute2;
-  // CAREFUL: JSDom does not support the `HTMLElement.isContentEditable` API so we have
-  //  to use the attribute directly to check for this, which can either be empty or 'true';
-  //  if it's `null` (not specified) or 'false', it's a non-editable element
-  var attValue = node === null || node === void 0 ? void 0 : (_node$getAttribute2 = node.getAttribute) === null || _node$getAttribute2 === void 0 ? void 0 : _node$getAttribute2.call(node, 'contenteditable');
-  return attValue === '' || attValue === 'true';
-};
-
-/**
- * @param {Element} el container to check in
- * @param {boolean} includeContainer add container to check
- * @param {(node: Element) => boolean} filter filter candidates
- * @returns {Element[]}
- */
-var getCandidates = function getCandidates(el, includeContainer, filter) {
-  // even if `includeContainer=false`, we still have to check it for inertness because
-  //  if it's inert, all its children are inert
-  if (isInert(el)) {
-    return [];
-  }
-  var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
-  if (includeContainer && matches.call(el, candidateSelector)) {
-    candidates.unshift(el);
-  }
-  candidates = candidates.filter(filter);
-  return candidates;
-};
-
-/**
- * @callback GetShadowRoot
- * @param {Element} element to check for shadow root
- * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.
- */
-
-/**
- * @callback ShadowRootFilter
- * @param {Element} shadowHostNode the element which contains shadow content
- * @returns {boolean} true if a shadow root could potentially contain valid candidates.
- */
-
-/**
- * @typedef {Object} CandidateScope
- * @property {Element} scopeParent contains inner candidates
- * @property {Element[]} candidates list of candidates found in the scope parent
- */
-
-/**
- * @typedef {Object} IterativeOptions
- * @property {GetShadowRoot|boolean} getShadowRoot true if shadow support is enabled; falsy if not;
- *  if a function, implies shadow support is enabled and either returns the shadow root of an element
- *  or a boolean stating if it has an undisclosed shadow root
- * @property {(node: Element) => boolean} filter filter candidates
- * @property {boolean} flatten if true then result will flatten any CandidateScope into the returned list
- * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;
- */
-
-/**
- * @param {Element[]} elements list of element containers to match candidates from
- * @param {boolean} includeContainer add container list to check
- * @param {IterativeOptions} options
- * @returns {Array.<Element|CandidateScope>}
- */
-var getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {
-  var candidates = [];
-  var elementsToCheck = Array.from(elements);
-  while (elementsToCheck.length) {
-    var element = elementsToCheck.shift();
-    if (isInert(element, false)) {
-      // no need to look up since we're drilling down
-      // anything inside this container will also be inert
-      continue;
-    }
-    if (element.tagName === 'SLOT') {
-      // add shadow dom slot scope (slot itself cannot be focusable)
-      var assigned = element.assignedElements();
-      var content = assigned.length ? assigned : element.children;
-      var nestedCandidates = getCandidatesIteratively(content, true, options);
-      if (options.flatten) {
-        candidates.push.apply(candidates, nestedCandidates);
-      } else {
-        candidates.push({
-          scopeParent: element,
-          candidates: nestedCandidates
-        });
-      }
-    } else {
-      // check candidate element
-      var validCandidate = matches.call(element, candidateSelector);
-      if (validCandidate && options.filter(element) && (includeContainer || !elements.includes(element))) {
-        candidates.push(element);
-      }
-
-      // iterate over shadow content if possible
-      var shadowRoot = element.shadowRoot ||
-      // check for an undisclosed shadow
-      typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);
-
-      // no inert look up because we're already drilling down and checking for inertness
-      //  on the way down, so all containers to this root node should have already been
-      //  vetted as non-inert
-      var validShadowRoot = !isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
-      if (shadowRoot && validShadowRoot) {
-        // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
-        //  shadow exists, so look at light dom children as fallback BUT create a scope for any
-        //  child candidates found because they're likely slotted elements (elements that are
-        //  children of the web component element (which has the shadow), in the light dom, but
-        //  slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,
-        //  _after_ we return from this recursive call
-        var _nestedCandidates = getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);
-        if (options.flatten) {
-          candidates.push.apply(candidates, _nestedCandidates);
-        } else {
-          candidates.push({
-            scopeParent: element,
-            candidates: _nestedCandidates
-          });
-        }
-      } else {
-        // there's not shadow so just dig into the element's (light dom) children
-        //  __without__ giving the element special scope treatment
-        elementsToCheck.unshift.apply(elementsToCheck, element.children);
-      }
-    }
-  }
-  return candidates;
-};
-
-/**
- * @private
- * Determines if the node has an explicitly specified `tabindex` attribute.
- * @param {HTMLElement} node
- * @returns {boolean} True if so; false if not.
- */
-var hasTabIndex = function hasTabIndex(node) {
-  return !isNaN(parseInt(node.getAttribute('tabindex'), 10));
-};
-
-/**
- * Determine the tab index of a given node.
- * @param {HTMLElement} node
- * @returns {number} Tab order (negative, 0, or positive number).
- * @throws {Error} If `node` is falsy.
- */
-var getTabIndex = function getTabIndex(node) {
-  if (!node) {
-    throw new Error('No node provided');
-  }
-  if (node.tabIndex < 0) {
-    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
-    // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
-    // yet they are still part of the regular tab order; in FF, they get a default
-    // `tabIndex` of 0; since Chrome still puts those elements in the regular tab
-    // order, consider their tab index to be 0.
-    // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
-    // so if they don't have a tabindex attribute specifically set, assume it's 0.
-    if ((/^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) || isContentEditable(node)) && !hasTabIndex(node)) {
-      return 0;
-    }
-  }
-  return node.tabIndex;
-};
-
-/**
- * Determine the tab index of a given node __for sort order purposes__.
- * @param {HTMLElement} node
- * @param {boolean} [isScope] True for a custom element with shadow root or slot that, by default,
- *  has tabIndex -1, but needs to be sorted by document order in order for its content to be
- *  inserted into the correct sort position.
- * @returns {number} Tab order (negative, 0, or positive number).
- */
-var getSortOrderTabIndex = function getSortOrderTabIndex(node, isScope) {
-  var tabIndex = getTabIndex(node);
-  if (tabIndex < 0 && isScope && !hasTabIndex(node)) {
-    return 0;
-  }
-  return tabIndex;
-};
-var sortOrderedTabbables = function sortOrderedTabbables(a, b) {
-  return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex;
-};
-var isInput = function isInput(node) {
-  return node.tagName === 'INPUT';
-};
-var isHiddenInput = function isHiddenInput(node) {
-  return isInput(node) && node.type === 'hidden';
-};
-var isDetailsWithSummary = function isDetailsWithSummary(node) {
-  var r = node.tagName === 'DETAILS' && Array.prototype.slice.apply(node.children).some(function (child) {
-    return child.tagName === 'SUMMARY';
-  });
-  return r;
-};
-var getCheckedRadio = function getCheckedRadio(nodes, form) {
-  for (var i = 0; i < nodes.length; i++) {
-    if (nodes[i].checked && nodes[i].form === form) {
-      return nodes[i];
-    }
-  }
-};
-var isTabbableRadio = function isTabbableRadio(node) {
-  if (!node.name) {
-    return true;
-  }
-  var radioScope = node.form || getRootNode(node);
-  var queryRadios = function queryRadios(name) {
-    return radioScope.querySelectorAll('input[type="radio"][name="' + name + '"]');
-  };
-  var radioSet;
-  if (typeof window !== 'undefined' && typeof window.CSS !== 'undefined' && typeof window.CSS.escape === 'function') {
-    radioSet = queryRadios(window.CSS.escape(node.name));
-  } else {
-    try {
-      radioSet = queryRadios(node.name);
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error('Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s', err.message);
-      return false;
-    }
-  }
-  var checked = getCheckedRadio(radioSet, node.form);
-  return !checked || checked === node;
-};
-var isRadio = function isRadio(node) {
-  return isInput(node) && node.type === 'radio';
-};
-var isNonTabbableRadio = function isNonTabbableRadio(node) {
-  return isRadio(node) && !isTabbableRadio(node);
-};
-
-// determines if a node is ultimately attached to the window's document
-var isNodeAttached = function isNodeAttached(node) {
-  var _nodeRoot;
-  // The root node is the shadow root if the node is in a shadow DOM; some document otherwise
-  //  (but NOT _the_ document; see second 'If' comment below for more).
-  // If rootNode is shadow root, it'll have a host, which is the element to which the shadow
-  //  is attached, and the one we need to check if it's in the document or not (because the
-  //  shadow, and all nodes it contains, is never considered in the document since shadows
-  //  behave like self-contained DOMs; but if the shadow's HOST, which is part of the document,
-  //  is hidden, or is not in the document itself but is detached, it will affect the shadow's
-  //  visibility, including all the nodes it contains). The host could be any normal node,
-  //  or a custom element (i.e. web component). Either way, that's the one that is considered
-  //  part of the document, not the shadow root, nor any of its children (i.e. the node being
-  //  tested).
-  // To further complicate things, we have to look all the way up until we find a shadow HOST
-  //  that is attached (or find none) because the node might be in nested shadows...
-  // If rootNode is not a shadow root, it won't have a host, and so rootNode should be the
-  //  document (per the docs) and while it's a Document-type object, that document does not
-  //  appear to be the same as the node's `ownerDocument` for some reason, so it's safer
-  //  to ignore the rootNode at this point, and use `node.ownerDocument`. Otherwise,
-  //  using `rootNode.contains(node)` will _always_ be true we'll get false-positives when
-  //  node is actually detached.
-  // NOTE: If `nodeRootHost` or `node` happens to be the `document` itself (which is possible
-  //  if a tabbable/focusable node was quickly added to the DOM, focused, and then removed
-  //  from the DOM as in https://github.com/focus-trap/focus-trap-react/issues/905), then
-  //  `ownerDocument` will be `null`, hence the optional chaining on it.
-  var nodeRoot = node && getRootNode(node);
-  var nodeRootHost = (_nodeRoot = nodeRoot) === null || _nodeRoot === void 0 ? void 0 : _nodeRoot.host;
-
-  // in some cases, a detached node will return itself as the root instead of a document or
-  //  shadow root object, in which case, we shouldn't try to look further up the host chain
-  var attached = false;
-  if (nodeRoot && nodeRoot !== node) {
-    var _nodeRootHost, _nodeRootHost$ownerDo, _node$ownerDocument;
-    attached = !!((_nodeRootHost = nodeRootHost) !== null && _nodeRootHost !== void 0 && (_nodeRootHost$ownerDo = _nodeRootHost.ownerDocument) !== null && _nodeRootHost$ownerDo !== void 0 && _nodeRootHost$ownerDo.contains(nodeRootHost) || node !== null && node !== void 0 && (_node$ownerDocument = node.ownerDocument) !== null && _node$ownerDocument !== void 0 && _node$ownerDocument.contains(node));
-    while (!attached && nodeRootHost) {
-      var _nodeRoot2, _nodeRootHost2, _nodeRootHost2$ownerD;
-      // since it's not attached and we have a root host, the node MUST be in a nested shadow DOM,
-      //  which means we need to get the host's host and check if that parent host is contained
-      //  in (i.e. attached to) the document
-      nodeRoot = getRootNode(nodeRootHost);
-      nodeRootHost = (_nodeRoot2 = nodeRoot) === null || _nodeRoot2 === void 0 ? void 0 : _nodeRoot2.host;
-      attached = !!((_nodeRootHost2 = nodeRootHost) !== null && _nodeRootHost2 !== void 0 && (_nodeRootHost2$ownerD = _nodeRootHost2.ownerDocument) !== null && _nodeRootHost2$ownerD !== void 0 && _nodeRootHost2$ownerD.contains(nodeRootHost));
-    }
-  }
-  return attached;
-};
-var isZeroArea = function isZeroArea(node) {
-  var _node$getBoundingClie = node.getBoundingClientRect(),
-    width = _node$getBoundingClie.width,
-    height = _node$getBoundingClie.height;
-  return width === 0 && height === 0;
-};
-var isHidden = function isHidden(node, _ref) {
-  var displayCheck = _ref.displayCheck,
-    getShadowRoot = _ref.getShadowRoot;
-  // NOTE: visibility will be `undefined` if node is detached from the document
-  //  (see notes about this further down), which means we will consider it visible
-  //  (this is legacy behavior from a very long way back)
-  // NOTE: we check this regardless of `displayCheck="none"` because this is a
-  //  _visibility_ check, not a _display_ check
-  if (getComputedStyle(node).visibility === 'hidden') {
-    return true;
-  }
-  var isDirectSummary = matches.call(node, 'details>summary:first-of-type');
-  var nodeUnderDetails = isDirectSummary ? node.parentElement : node;
-  if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
-    return true;
-  }
-  if (!displayCheck || displayCheck === 'full' || displayCheck === 'legacy-full') {
-    if (typeof getShadowRoot === 'function') {
-      // figure out if we should consider the node to be in an undisclosed shadow and use the
-      //  'non-zero-area' fallback
-      var originalNode = node;
-      while (node) {
-        var parentElement = node.parentElement;
-        var rootNode = getRootNode(node);
-        if (parentElement && !parentElement.shadowRoot && getShadowRoot(parentElement) === true // check if there's an undisclosed shadow
-        ) {
-          // node has an undisclosed shadow which means we can only treat it as a black box, so we
-          //  fall back to a non-zero-area test
-          return isZeroArea(node);
-        } else if (node.assignedSlot) {
-          // iterate up slot
-          node = node.assignedSlot;
-        } else if (!parentElement && rootNode !== node.ownerDocument) {
-          // cross shadow boundary
-          node = rootNode.host;
-        } else {
-          // iterate up normal dom
-          node = parentElement;
-        }
-      }
-      node = originalNode;
-    }
-    // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
-    //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
-    //  it might be a falsy value, which means shadow DOM support is disabled
-
-    // Since we didn't find it sitting in an undisclosed shadow (or shadows are disabled)
-    //  now we can just test to see if it would normally be visible or not, provided it's
-    //  attached to the main document.
-    // NOTE: We must consider case where node is inside a shadow DOM and given directly to
-    //  `isTabbable()` or `isFocusable()` -- regardless of `getShadowRoot` option setting.
-
-    if (isNodeAttached(node)) {
-      // this works wherever the node is: if there's at least one client rect, it's
-      //  somehow displayed; it also covers the CSS 'display: contents' case where the
-      //  node itself is hidden in place of its contents; and there's no need to search
-      //  up the hierarchy either
-      return !node.getClientRects().length;
-    }
-
-    // Else, the node isn't attached to the document, which means the `getClientRects()`
-    //  API will __always__ return zero rects (this can happen, for example, if React
-    //  is used to render nodes onto a detached tree, as confirmed in this thread:
-    //  https://github.com/facebook/react/issues/9117#issuecomment-284228870)
-    //
-    // It also means that even window.getComputedStyle(node).display will return `undefined`
-    //  because styles are only computed for nodes that are in the document.
-    //
-    // NOTE: THIS HAS BEEN THE CASE FOR YEARS. It is not new, nor is it caused by tabbable
-    //  somehow. Though it was never stated officially, anyone who has ever used tabbable
-    //  APIs on nodes in detached containers has actually implicitly used tabbable in what
-    //  was later (as of v5.2.0 on Apr 9, 2021) called `displayCheck="none"` mode -- essentially
-    //  considering __everything__ to be visible because of the innability to determine styles.
-    //
-    // v6.0.0: As of this major release, the default 'full' option __no longer treats detached
-    //  nodes as visible with the 'none' fallback.__
-    if (displayCheck !== 'legacy-full') {
-      return true; // hidden
-    }
-    // else, fallback to 'none' mode and consider the node visible
-  } else if (displayCheck === 'non-zero-area') {
-    // NOTE: Even though this tests that the node's client rect is non-zero to determine
-    //  whether it's displayed, and that a detached node will __always__ have a zero-area
-    //  client rect, we don't special-case for whether the node is attached or not. In
-    //  this mode, we do want to consider nodes that have a zero area to be hidden at all
-    //  times, and that includes attached or not.
-    return isZeroArea(node);
-  }
-
-  // visible, as far as we can tell, or per current `displayCheck=none` mode, we assume
-  //  it's visible
-  return false;
-};
-
-// form fields (nested) inside a disabled fieldset are not focusable/tabbable
-//  unless they are in the _first_ <legend> element of the top-most disabled
-//  fieldset
-var isDisabledFromFieldset = function isDisabledFromFieldset(node) {
-  if (/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(node.tagName)) {
-    var parentNode = node.parentElement;
-    // check if `node` is contained in a disabled <fieldset>
-    while (parentNode) {
-      if (parentNode.tagName === 'FIELDSET' && parentNode.disabled) {
-        // look for the first <legend> among the children of the disabled <fieldset>
-        for (var i = 0; i < parentNode.children.length; i++) {
-          var child = parentNode.children.item(i);
-          // when the first <legend> (in document order) is found
-          if (child.tagName === 'LEGEND') {
-            // if its parent <fieldset> is not nested in another disabled <fieldset>,
-            // return whether `node` is a descendant of its first <legend>
-            return matches.call(parentNode, 'fieldset[disabled] *') ? true : !child.contains(node);
-          }
-        }
-        // the disabled <fieldset> containing `node` has no <legend>
-        return true;
-      }
-      parentNode = parentNode.parentElement;
-    }
-  }
-
-  // else, node's tabbable/focusable state should not be affected by a fieldset's
-  //  enabled/disabled state
-  return false;
-};
-var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(options, node) {
-  if (node.disabled ||
-  // we must do an inert look up to filter out any elements inside an inert ancestor
-  //  because we're limited in the type of selectors we can use in JSDom (see related
-  //  note related to `candidateSelectors`)
-  isInert(node) || isHiddenInput(node) || isHidden(node, options) ||
-  // For a details element with a summary, the summary element gets the focus
-  isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
-    return false;
-  }
-  return true;
-};
-var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(options, node) {
-  if (isNonTabbableRadio(node) || getTabIndex(node) < 0 || !isNodeMatchingSelectorFocusable(options, node)) {
-    return false;
-  }
-  return true;
-};
-var isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNode) {
-  var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);
-  if (isNaN(tabIndex) || tabIndex >= 0) {
-    return true;
-  }
-  // If a custom element has an explicit negative tabindex,
-  // browsers will not allow tab targeting said element's children.
-  return false;
-};
-
-/**
- * @param {Array.<Element|CandidateScope>} candidates
- * @returns Element[]
- */
-var sortByOrder = function sortByOrder(candidates) {
-  var regularTabbables = [];
-  var orderedTabbables = [];
-  candidates.forEach(function (item, i) {
-    var isScope = !!item.scopeParent;
-    var element = isScope ? item.scopeParent : item;
-    var candidateTabindex = getSortOrderTabIndex(element, isScope);
-    var elements = isScope ? sortByOrder(item.candidates) : element;
-    if (candidateTabindex === 0) {
-      isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
-    } else {
-      orderedTabbables.push({
-        documentOrder: i,
-        tabIndex: candidateTabindex,
-        item: item,
-        isScope: isScope,
-        content: elements
-      });
-    }
-  });
-  return orderedTabbables.sort(sortOrderedTabbables).reduce(function (acc, sortable) {
-    sortable.isScope ? acc.push.apply(acc, sortable.content) : acc.push(sortable.content);
-    return acc;
-  }, []).concat(regularTabbables);
-};
-var tabbable = function tabbable(container, options) {
-  options = options || {};
-  var candidates;
-  if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([container], options.includeContainer, {
-      filter: isNodeMatchingSelectorTabbable.bind(null, options),
-      flatten: false,
-      getShadowRoot: options.getShadowRoot,
-      shadowRootFilter: isValidShadowRootTabbable
-    });
-  } else {
-    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
-  }
-  return sortByOrder(candidates);
-};
-var focusable = function focusable(container, options) {
-  options = options || {};
-  var candidates;
-  if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([container], options.includeContainer, {
-      filter: isNodeMatchingSelectorFocusable.bind(null, options),
-      flatten: true,
-      getShadowRoot: options.getShadowRoot
-    });
-  } else {
-    candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorFocusable.bind(null, options));
-  }
-  return candidates;
-};
-var isTabbable = function isTabbable(node, options) {
-  options = options || {};
-  if (!node) {
-    throw new Error('No node provided');
-  }
-  if (matches.call(node, candidateSelector) === false) {
-    return false;
-  }
-  return isNodeMatchingSelectorTabbable(options, node);
-};
-var focusableCandidateSelector = /* #__PURE__ */candidateSelectors.concat('iframe').join(',');
-var isFocusable = function isFocusable(node, options) {
-  options = options || {};
-  if (!node) {
-    throw new Error('No node provided');
-  }
-  if (matches.call(node, focusableCandidateSelector) === false) {
-    return false;
-  }
-  return isNodeMatchingSelectorFocusable(options, node);
-};
-
+var m=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[href]:not([inert])","button:not([inert])","[tabindex]:not(slot):not([inert])","audio[controls]:not([inert])","video[controls]:not([inert])",'[contenteditable]:not([contenteditable="false"]):not([inert])',"details>summary:first-of-type:not([inert])","details:not([inert])"],g=m.join(","),_="undefined"==typeof Element,k=_?function(){}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,x=!_&&Element.prototype.getRootNode?function(e){var l;return null==e||null===(l=e.getRootNode)||void 0===l?void 0:l.call(e)}:function(e){return null==e?void 0:e.ownerDocument},N=function e(l,a){var t;void 0===a&&(a=!0);var o=null==l||null===(t=l.getAttribute)||void 0===t?void 0:t.call(l,"inert");return""===o||"true"===o||a&&l&&e(l.parentNode)},E=function(e,l,a){if(N(e))return[];var t=Array.prototype.slice.apply(e.querySelectorAll(g));return l&&k.call(e,g)&&t.unshift(e),t.filter(a)},S=function e(l,a,t){for(var o=[],s=Array.from(l);s.length;){var i=s.shift();if(!N(i,!1))if("SLOT"===i.tagName){var r=i.assignedElements(),n=e(r.length?r:i.children,!0,t);t.flatten?o.push.apply(o,n):o.push({scopeParent:i,candidates:n})}else{k.call(i,g)&&t.filter(i)&&(a||!l.includes(i))&&o.push(i);var c=i.shadowRoot||"function"==typeof t.getShadowRoot&&t.getShadowRoot(i),d=!N(c,!1)&&(!t.shadowRootFilter||t.shadowRootFilter(i));if(c&&d){var u=e(!0===c?i.children:c.children,!0,t);t.flatten?o.push.apply(o,u):o.push({scopeParent:i,candidates:u})}else s.unshift.apply(s,i.children)}}return o},L=function(e){return!isNaN(parseInt(e.getAttribute("tabindex"),10))},T=function(e){if(!e)throw Error("No node provided");return e.tabIndex<0&&(/^(AUDIO|VIDEO|DETAILS)$/.test(e.tagName)||function(e){var l,a=null==e||null===(l=e.getAttribute)||void 0===l?void 0:l.call(e,"contenteditable");return""===a||"true"===a}(e))&&!L(e)?0:e.tabIndex},j=function(e,l){return e.tabIndex===l.tabIndex?e.documentOrder-l.documentOrder:e.tabIndex-l.tabIndex},C=function(e){return"INPUT"===e.tagName},A=function(e){var l=e.getBoundingClientRect();return 0===l.width&&0===l.height},O=function(e,l){return!(l.disabled||N(l)||function(e){return C(e)&&"hidden"===e.type}(l)||function(e,l){var a=l.displayCheck,t=l.getShadowRoot;if("hidden"===getComputedStyle(e).visibility)return!0;var o=k.call(e,"details>summary:first-of-type");if(k.call(o?e.parentElement:e,"details:not([open]) *"))return!0;if(a&&"full"!==a&&"legacy-full"!==a){if("non-zero-area"===a)return A(e)}else{if("function"==typeof t){for(var s=e;e;){var i=e.parentElement,r=x(e);if(i&&!i.shadowRoot&&!0===t(i))return A(e);e=e.assignedSlot?e.assignedSlot:i||r===e.ownerDocument?i:r.host}e=s}if(function(e){var l,a,t,o,s=e&&x(e),i=null===(l=s)||void 0===l?void 0:l.host,r=!1;if(s&&s!==e)for(r=!!(null!==(a=i)&&void 0!==a&&null!==(t=a.ownerDocument)&&void 0!==t&&t.contains(i)||null!=e&&null!==(o=e.ownerDocument)&&void 0!==o&&o.contains(e));!r&&i;){var n,c,d;r=!(null===(c=i=null===(n=s=x(i))||void 0===n?void 0:n.host)||void 0===c||null===(d=c.ownerDocument)||void 0===d||!d.contains(i))}return r}(e))return!e.getClientRects().length;if("legacy-full"!==a)return!0}return!1}(l,e)||function(e){return"DETAILS"===e.tagName&&Array.prototype.slice.apply(e.children).some((function(e){return"SUMMARY"===e.tagName}))}(l)||function(e){if(/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(e.tagName))for(var l=e.parentElement;l;){if("FIELDSET"===l.tagName&&l.disabled){for(var a=0;a<l.children.length;a++){var t=l.children.item(a);if("LEGEND"===t.tagName)return!!k.call(l,"fieldset[disabled] *")||!t.contains(e)}return!0}l=l.parentElement}return!1}(l))},I=function(e,l){return!(function(e){return function(e){return C(e)&&"radio"===e.type}(e)&&!function(e){if(!e.name)return!0;var l,a=e.form||x(e),t=function(e){return a.querySelectorAll('input[type="radio"][name="'+e+'"]')};if("undefined"!=typeof window&&void 0!==window.CSS&&"function"==typeof window.CSS.escape)l=t(window.CSS.escape(e.name));else try{l=t(e.name)}catch(e){return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s",e.message),!1}var o=function(e,l){for(var a=0;a<e.length;a++)if(e[a].checked&&e[a].form===l)return e[a]}(l,e.form);return!o||o===e}(e)}(l)||T(l)<0||!O(e,l))},D=function(e){var l=parseInt(e.getAttribute("tabindex"),10);return!!(isNaN(l)||l>=0)},F=function e(l){var a=[],t=[];return l.forEach((function(l,o){var s=!!l.scopeParent,i=s?l.scopeParent:l,r=function(e,l){var a=T(e);return a<0&&l&&!L(e)?0:a}(i,s),n=s?e(l.candidates):i;0===r?s?a.push.apply(a,n):a.push(i):t.push({documentOrder:o,tabIndex:r,item:l,isScope:s,content:n})})),t.sort(j).reduce((function(e,l){return l.isScope?e.push.apply(e,l.content):e.push(l.content),e}),[]).concat(a)},R=function(e,l){if(l=l||{},!e)throw Error("No node provided");return!1!==k.call(e,g)&&I(l,e)},P=m.concat("iframe").join(","),z=function(e,l){if(l=l||{},!e)throw Error("No node provided");return!1!==k.call(e,P)&&O(l,e)};
 /*!
 * focus-trap 7.5.4
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
-
-function ownKeys(e, r) {
-  var t = Object.keys(e);
-  if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(e);
-    r && (o = o.filter(function (r) {
-      return Object.getOwnPropertyDescriptor(e, r).enumerable;
-    })), t.push.apply(t, o);
-  }
-  return t;
-}
-function _objectSpread2(e) {
-  for (var r = 1; r < arguments.length; r++) {
-    var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
-      _defineProperty(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
-    });
-  }
-  return e;
-}
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _toPrimitive(input, hint) {
-  if (typeof input !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint);
-    if (typeof res !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return typeof key === "symbol" ? key : String(key);
-}
-
-var activeFocusTraps = {
-  activateTrap: function activateTrap(trapStack, trap) {
-    if (trapStack.length > 0) {
-      var activeTrap = trapStack[trapStack.length - 1];
-      if (activeTrap !== trap) {
-        activeTrap.pause();
-      }
-    }
-    var trapIndex = trapStack.indexOf(trap);
-    if (trapIndex === -1) {
-      trapStack.push(trap);
-    } else {
-      // move this existing trap to the front of the queue
-      trapStack.splice(trapIndex, 1);
-      trapStack.push(trap);
-    }
-  },
-  deactivateTrap: function deactivateTrap(trapStack, trap) {
-    var trapIndex = trapStack.indexOf(trap);
-    if (trapIndex !== -1) {
-      trapStack.splice(trapIndex, 1);
-    }
-    if (trapStack.length > 0) {
-      trapStack[trapStack.length - 1].unpause();
-    }
-  }
-};
-var isSelectableInput = function isSelectableInput(node) {
-  return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function';
-};
-var isEscapeEvent = function isEscapeEvent(e) {
-  return (e === null || e === void 0 ? void 0 : e.key) === 'Escape' || (e === null || e === void 0 ? void 0 : e.key) === 'Esc' || (e === null || e === void 0 ? void 0 : e.keyCode) === 27;
-};
-var isTabEvent = function isTabEvent(e) {
-  return (e === null || e === void 0 ? void 0 : e.key) === 'Tab' || (e === null || e === void 0 ? void 0 : e.keyCode) === 9;
-};
-
-// checks for TAB by default
-var isKeyForward = function isKeyForward(e) {
-  return isTabEvent(e) && !e.shiftKey;
-};
-
-// checks for SHIFT+TAB by default
-var isKeyBackward = function isKeyBackward(e) {
-  return isTabEvent(e) && e.shiftKey;
-};
-var delay = function delay(fn) {
-  return setTimeout(fn, 0);
-};
-
-// Array.find/findIndex() are not supported on IE; this replicates enough
-//  of Array.findIndex() for our needs
-var findIndex = function findIndex(arr, fn) {
-  var idx = -1;
-  arr.every(function (value, i) {
-    if (fn(value)) {
-      idx = i;
-      return false; // break
-    }
-
-    return true; // next
-  });
-
-  return idx;
-};
-
-/**
- * Get an option's value when it could be a plain value, or a handler that provides
- *  the value.
- * @param {*} value Option's value to check.
- * @param {...*} [params] Any parameters to pass to the handler, if `value` is a function.
- * @returns {*} The `value`, or the handler's returned value.
- */
-var valueOrHandler = function valueOrHandler(value) {
-  for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    params[_key - 1] = arguments[_key];
-  }
-  return typeof value === 'function' ? value.apply(void 0, params) : value;
-};
-var getActualTarget = function getActualTarget(event) {
-  // NOTE: If the trap is _inside_ a shadow DOM, event.target will always be the
-  //  shadow host. However, event.target.composedPath() will be an array of
-  //  nodes "clicked" from inner-most (the actual element inside the shadow) to
-  //  outer-most (the host HTML document). If we have access to composedPath(),
-  //  then use its first element; otherwise, fall back to event.target (and
-  //  this only works for an _open_ shadow DOM; otherwise,
-  //  composedPath()[0] === event.target always).
-  return event.target.shadowRoot && typeof event.composedPath === 'function' ? event.composedPath()[0] : event.target;
-};
-
-// NOTE: this must be _outside_ `createFocusTrap()` to make sure all traps in this
-//  current instance use the same stack if `userOptions.trapStack` isn't specified
-var internalTrapStack = [];
-var createFocusTrap = function createFocusTrap(elements, userOptions) {
-  // SSR: a live trap shouldn't be created in this type of environment so this
-  //  should be safe code to execute if the `document` option isn't specified
-  var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document;
-  var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack;
-  var config = _objectSpread2({
-    returnFocusOnDeactivate: true,
-    escapeDeactivates: true,
-    delayInitialFocus: true,
-    isKeyForward: isKeyForward,
-    isKeyBackward: isKeyBackward
-  }, userOptions);
-  var state = {
-    // containers given to createFocusTrap()
-    // @type {Array<HTMLElement>}
-    containers: [],
-    // list of objects identifying tabbable nodes in `containers` in the trap
-    // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap
-    //  is active, but the trap should never get to a state where there isn't at least one group
-    //  with at least one tabbable node in it (that would lead to an error condition that would
-    //  result in an error being thrown)
-    // @type {Array<{
-    //   container: HTMLElement,
-    //   tabbableNodes: Array<HTMLElement>, // empty if none
-    //   focusableNodes: Array<HTMLElement>, // empty if none
-    //   posTabIndexesFound: boolean,
-    //   firstTabbableNode: HTMLElement|undefined,
-    //   lastTabbableNode: HTMLElement|undefined,
-    //   firstDomTabbableNode: HTMLElement|undefined,
-    //   lastDomTabbableNode: HTMLElement|undefined,
-    //   nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined
-    // }>}
-    containerGroups: [],
-    // same order/length as `containers` list
-
-    // references to objects in `containerGroups`, but only those that actually have
-    //  tabbable nodes in them
-    // NOTE: same order as `containers` and `containerGroups`, but __not necessarily__
-    //  the same length
-    tabbableGroups: [],
-    nodeFocusedBeforeActivation: null,
-    mostRecentlyFocusedNode: null,
-    active: false,
-    paused: false,
-    // timer ID for when delayInitialFocus is true and initial focus in this trap
-    //  has been delayed during activation
-    delayInitialFocusTimer: undefined,
-    // the most recent KeyboardEvent for the configured nav key (typically [SHIFT+]TAB), if any
-    recentNavEvent: undefined
-  };
-  var trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later
-
-  /**
-   * Gets a configuration option value.
-   * @param {Object|undefined} configOverrideOptions If true, and option is defined in this set,
-   *  value will be taken from this object. Otherwise, value will be taken from base configuration.
-   * @param {string} optionName Name of the option whose value is sought.
-   * @param {string|undefined} [configOptionName] Name of option to use __instead of__ `optionName`
-   *  IIF `configOverrideOptions` is not defined. Otherwise, `optionName` is used.
-   */
-  var getOption = function getOption(configOverrideOptions, optionName, configOptionName) {
-    return configOverrideOptions && configOverrideOptions[optionName] !== undefined ? configOverrideOptions[optionName] : config[configOptionName || optionName];
-  };
-
-  /**
-   * Finds the index of the container that contains the element.
-   * @param {HTMLElement} element
-   * @param {Event} [event] If available, and `element` isn't directly found in any container,
-   *  the event's composed path is used to see if includes any known trap containers in the
-   *  case where the element is inside a Shadow DOM.
-   * @returns {number} Index of the container in either `state.containers` or
-   *  `state.containerGroups` (the order/length of these lists are the same); -1
-   *  if the element isn't found.
-   */
-  var findContainerIndex = function findContainerIndex(element, event) {
-    var composedPath = typeof (event === null || event === void 0 ? void 0 : event.composedPath) === 'function' ? event.composedPath() : undefined;
-    // NOTE: search `containerGroups` because it's possible a group contains no tabbable
-    //  nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
-    //  and we still need to find the element in there
-    return state.containerGroups.findIndex(function (_ref) {
-      var container = _ref.container,
-        tabbableNodes = _ref.tabbableNodes;
-      return container.contains(element) || ( // fall back to explicit tabbable search which will take into consideration any
-      //  web components if the `tabbableOptions.getShadowRoot` option was used for
-      //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
-      //  look inside web components even if open)
-      composedPath === null || composedPath === void 0 ? void 0 : composedPath.includes(container)) || tabbableNodes.find(function (node) {
-        return node === element;
-      });
-    });
-  };
-
-  /**
-   * Gets the node for the given option, which is expected to be an option that
-   *  can be either a DOM node, a string that is a selector to get a node, `false`
-   *  (if a node is explicitly NOT given), or a function that returns any of these
-   *  values.
-   * @param {string} optionName
-   * @returns {undefined | false | HTMLElement | SVGElement} Returns
-   *  `undefined` if the option is not specified; `false` if the option
-   *  resolved to `false` (node explicitly not given); otherwise, the resolved
-   *  DOM node.
-   * @throws {Error} If the option is set, not `false`, and is not, or does not
-   *  resolve to a node.
-   */
-  var getNodeForOption = function getNodeForOption(optionName) {
-    var optionValue = config[optionName];
-    if (typeof optionValue === 'function') {
-      for (var _len2 = arguments.length, params = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        params[_key2 - 1] = arguments[_key2];
-      }
-      optionValue = optionValue.apply(void 0, params);
-    }
-    if (optionValue === true) {
-      optionValue = undefined; // use default value
-    }
-
-    if (!optionValue) {
-      if (optionValue === undefined || optionValue === false) {
-        return optionValue;
-      }
-      // else, empty string (invalid), null (invalid), 0 (invalid)
-
-      throw new Error("`".concat(optionName, "` was specified but was not a node, or did not return a node"));
-    }
-    var node = optionValue; // could be HTMLElement, SVGElement, or non-empty string at this point
-
-    if (typeof optionValue === 'string') {
-      node = doc.querySelector(optionValue); // resolve to node, or null if fails
-      if (!node) {
-        throw new Error("`".concat(optionName, "` as selector refers to no known node"));
-      }
-    }
-    return node;
-  };
-  var getInitialFocusNode = function getInitialFocusNode() {
-    var node = getNodeForOption('initialFocus');
-
-    // false explicitly indicates we want no initialFocus at all
-    if (node === false) {
-      return false;
-    }
-    if (node === undefined || !isFocusable(node, config.tabbableOptions)) {
-      // option not specified nor focusable: use fallback options
-      if (findContainerIndex(doc.activeElement) >= 0) {
-        node = doc.activeElement;
-      } else {
-        var firstTabbableGroup = state.tabbableGroups[0];
-        var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode;
-
-        // NOTE: `fallbackFocus` option function cannot return `false` (not supported)
-        node = firstTabbableNode || getNodeForOption('fallbackFocus');
-      }
-    }
-    if (!node) {
-      throw new Error('Your focus-trap needs to have at least one focusable element');
-    }
-    return node;
-  };
-  var updateTabbableNodes = function updateTabbableNodes() {
-    state.containerGroups = state.containers.map(function (container) {
-      var tabbableNodes = tabbable(container, config.tabbableOptions);
-
-      // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
-      //  are a superset of tabbable nodes since nodes with negative `tabindex` attributes
-      //  are focusable but not tabbable
-      var focusableNodes = focusable(container, config.tabbableOptions);
-      var firstTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[0] : undefined;
-      var lastTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : undefined;
-      var firstDomTabbableNode = focusableNodes.find(function (node) {
-        return isTabbable(node);
-      });
-      var lastDomTabbableNode = focusableNodes.slice().reverse().find(function (node) {
-        return isTabbable(node);
-      });
-      var posTabIndexesFound = !!tabbableNodes.find(function (node) {
-        return getTabIndex(node) > 0;
-      });
-      return {
-        container: container,
-        tabbableNodes: tabbableNodes,
-        focusableNodes: focusableNodes,
-        /** True if at least one node with positive `tabindex` was found in this container. */
-        posTabIndexesFound: posTabIndexesFound,
-        /** First tabbable node in container, __tabindex__ order; `undefined` if none. */
-        firstTabbableNode: firstTabbableNode,
-        /** Last tabbable node in container, __tabindex__ order; `undefined` if none. */
-        lastTabbableNode: lastTabbableNode,
-        // NOTE: DOM order is NOT NECESSARILY "document position" order, but figuring that out
-        //  would require more than just https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
-        //  because that API doesn't work with Shadow DOM as well as it should (@see
-        //  https://github.com/whatwg/dom/issues/320) and since this first/last is only needed, so far,
-        //  to address an edge case related to positive tabindex support, this seems like a much easier,
-        //  "close enough most of the time" alternative for positive tabindexes which should generally
-        //  be avoided anyway...
-        /** First tabbable node in container, __DOM__ order; `undefined` if none. */
-        firstDomTabbableNode: firstDomTabbableNode,
-        /** Last tabbable node in container, __DOM__ order; `undefined` if none. */
-        lastDomTabbableNode: lastDomTabbableNode,
-        /**
-         * Finds the __tabbable__ node that follows the given node in the specified direction,
-         *  in this container, if any.
-         * @param {HTMLElement} node
-         * @param {boolean} [forward] True if going in forward tab order; false if going
-         *  in reverse.
-         * @returns {HTMLElement|undefined} The next tabbable node, if any.
-         */
-        nextTabbableNode: function nextTabbableNode(node) {
-          var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-          var nodeIdx = tabbableNodes.indexOf(node);
-          if (nodeIdx < 0) {
-            // either not tabbable nor focusable, or was focused but not tabbable (negative tabindex):
-            //  since `node` should at least have been focusable, we assume that's the case and mimic
-            //  what browsers do, which is set focus to the next node in __document position order__,
-            //  regardless of positive tabindexes, if any -- and for reasons explained in the NOTE
-            //  above related to `firstDomTabbable` and `lastDomTabbable` properties, we fall back to
-            //  basic DOM order
-            if (forward) {
-              return focusableNodes.slice(focusableNodes.indexOf(node) + 1).find(function (el) {
-                return isTabbable(el);
-              });
-            }
-            return focusableNodes.slice(0, focusableNodes.indexOf(node)).reverse().find(function (el) {
-              return isTabbable(el);
-            });
-          }
-          return tabbableNodes[nodeIdx + (forward ? 1 : -1)];
-        }
-      };
-    });
-    state.tabbableGroups = state.containerGroups.filter(function (group) {
-      return group.tabbableNodes.length > 0;
-    });
-
-    // throw if no groups have tabbable nodes and we don't have a fallback focus node either
-    if (state.tabbableGroups.length <= 0 && !getNodeForOption('fallbackFocus') // returning false not supported for this option
-    ) {
-      throw new Error('Your focus-trap must have at least one container with at least one tabbable node in it at all times');
-    }
-
-    // NOTE: Positive tabindexes are only properly supported in single-container traps because
-    //  doing it across multiple containers where tabindexes could be all over the place
-    //  would require Tabbable to support multiple containers, would require additional
-    //  specialized Shadow DOM support, and would require Tabbable's multi-container support
-    //  to look at those containers in document position order rather than user-provided
-    //  order (as they are treated in Focus-trap, for legacy reasons). See discussion on
-    //  https://github.com/focus-trap/focus-trap/issues/375 for more details.
-    if (state.containerGroups.find(function (g) {
-      return g.posTabIndexesFound;
-    }) && state.containerGroups.length > 1) {
-      throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.");
-    }
-  };
-
-  /**
-   * Gets the current activeElement. If it's a web-component and has open shadow-root
-   * it will recursively search inside shadow roots for the "true" activeElement.
-   *
-   * @param {Document | ShadowRoot} el
-   *
-   * @returns {HTMLElement} The element that currently has the focus
-   **/
-  var getActiveElement = function getActiveElement(el) {
-    var activeElement = el.activeElement;
-    if (!activeElement) {
-      return;
-    }
-    if (activeElement.shadowRoot && activeElement.shadowRoot.activeElement !== null) {
-      return getActiveElement(activeElement.shadowRoot);
-    }
-    return activeElement;
-  };
-  var tryFocus = function tryFocus(node) {
-    if (node === false) {
-      return;
-    }
-    if (node === getActiveElement(document)) {
-      return;
-    }
-    if (!node || !node.focus) {
-      tryFocus(getInitialFocusNode());
-      return;
-    }
-    node.focus({
-      preventScroll: !!config.preventScroll
-    });
-    // NOTE: focus() API does not trigger focusIn event so set MRU node manually
-    state.mostRecentlyFocusedNode = node;
-    if (isSelectableInput(node)) {
-      node.select();
-    }
-  };
-  var getReturnFocusNode = function getReturnFocusNode(previousActiveElement) {
-    var node = getNodeForOption('setReturnFocus', previousActiveElement);
-    return node ? node : node === false ? false : previousActiveElement;
-  };
-
-  /**
-   * Finds the next node (in either direction) where focus should move according to a
-   *  keyboard focus-in event.
-   * @param {Object} params
-   * @param {Node} [params.target] Known target __from which__ to navigate, if any.
-   * @param {KeyboardEvent|FocusEvent} [params.event] Event to use if `target` isn't known (event
-   *  will be used to determine the `target`). Ignored if `target` is specified.
-   * @param {boolean} [params.isBackward] True if focus should move backward.
-   * @returns {Node|undefined} The next node, or `undefined` if a next node couldn't be
-   *  determined given the current state of the trap.
-   */
-  var findNextNavNode = function findNextNavNode(_ref2) {
-    var target = _ref2.target,
-      event = _ref2.event,
-      _ref2$isBackward = _ref2.isBackward,
-      isBackward = _ref2$isBackward === void 0 ? false : _ref2$isBackward;
-    target = target || getActualTarget(event);
-    updateTabbableNodes();
-    var destinationNode = null;
-    if (state.tabbableGroups.length > 0) {
-      // make sure the target is actually contained in a group
-      // NOTE: the target may also be the container itself if it's focusable
-      //  with tabIndex='-1' and was given initial focus
-      var containerIndex = findContainerIndex(target, event);
-      var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;
-      if (containerIndex < 0) {
-        // target not found in any group: quite possible focus has escaped the trap,
-        //  so bring it back into...
-        if (isBackward) {
-          // ...the last node in the last group
-          destinationNode = state.tabbableGroups[state.tabbableGroups.length - 1].lastTabbableNode;
-        } else {
-          // ...the first node in the first group
-          destinationNode = state.tabbableGroups[0].firstTabbableNode;
-        }
-      } else if (isBackward) {
-        // REVERSE
-
-        // is the target the first tabbable node in a group?
-        var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) {
-          var firstTabbableNode = _ref3.firstTabbableNode;
-          return target === firstTabbableNode;
-        });
-        if (startOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target, false))) {
-          // an exception case where the target is either the container itself, or
-          //  a non-tabbable node that was given focus (i.e. tabindex is negative
-          //  and user clicked on it or node was programmatically given focus)
-          //  and is not followed by any other tabbable node, in which
-          //  case, we should handle shift+tab as if focus were on the container's
-          //  first tabbable node, and go to the last tabbable node of the LAST group
-          startOfGroupIndex = containerIndex;
-        }
-        if (startOfGroupIndex >= 0) {
-          // YES: then shift+tab should go to the last tabbable node in the
-          //  previous group (and wrap around to the last tabbable node of
-          //  the LAST group if it's the first tabbable node of the FIRST group)
-          var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
-          var destinationGroup = state.tabbableGroups[destinationGroupIndex];
-          destinationNode = getTabIndex(target) >= 0 ? destinationGroup.lastTabbableNode : destinationGroup.lastDomTabbableNode;
-        } else if (!isTabEvent(event)) {
-          // user must have customized the nav keys so we have to move focus manually _within_
-          //  the active group: do this based on the order determined by tabbable()
-          destinationNode = containerGroup.nextTabbableNode(target, false);
-        }
-      } else {
-        // FORWARD
-
-        // is the target the last tabbable node in a group?
-        var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref4) {
-          var lastTabbableNode = _ref4.lastTabbableNode;
-          return target === lastTabbableNode;
-        });
-        if (lastOfGroupIndex < 0 && (containerGroup.container === target || isFocusable(target, config.tabbableOptions) && !isTabbable(target, config.tabbableOptions) && !containerGroup.nextTabbableNode(target))) {
-          // an exception case where the target is the container itself, or
-          //  a non-tabbable node that was given focus (i.e. tabindex is negative
-          //  and user clicked on it or node was programmatically given focus)
-          //  and is not followed by any other tabbable node, in which
-          //  case, we should handle tab as if focus were on the container's
-          //  last tabbable node, and go to the first tabbable node of the FIRST group
-          lastOfGroupIndex = containerIndex;
-        }
-        if (lastOfGroupIndex >= 0) {
-          // YES: then tab should go to the first tabbable node in the next
-          //  group (and wrap around to the first tabbable node of the FIRST
-          //  group if it's the last tabbable node of the LAST group)
-          var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
-          var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
-          destinationNode = getTabIndex(target) >= 0 ? _destinationGroup.firstTabbableNode : _destinationGroup.firstDomTabbableNode;
-        } else if (!isTabEvent(event)) {
-          // user must have customized the nav keys so we have to move focus manually _within_
-          //  the active group: do this based on the order determined by tabbable()
-          destinationNode = containerGroup.nextTabbableNode(target);
-        }
-      }
-    } else {
-      // no groups available
-      // NOTE: the fallbackFocus option does not support returning false to opt-out
-      destinationNode = getNodeForOption('fallbackFocus');
-    }
-    return destinationNode;
-  };
-
-  // This needs to be done on mousedown and touchstart instead of click
-  // so that it precedes the focus event.
-  var checkPointerDown = function checkPointerDown(e) {
-    var target = getActualTarget(e);
-    if (findContainerIndex(target, e) >= 0) {
-      // allow the click since it ocurred inside the trap
-      return;
-    }
-    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
-      // immediately deactivate the trap
-      trap.deactivate({
-        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,
-        //  which will result in the outside click setting focus to the node
-        //  that was clicked (and if not focusable, to "nothing"); by setting
-        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
-        //  on activation (or the configured `setReturnFocus` node), whether the
-        //  outside click was on a focusable node or not
-        returnFocus: config.returnFocusOnDeactivate
-      });
-      return;
-    }
-
-    // This is needed for mobile devices.
-    // (If we'll only let `click` events through,
-    // then on mobile they will be blocked anyways if `touchstart` is blocked.)
-    if (valueOrHandler(config.allowOutsideClick, e)) {
-      // allow the click outside the trap to take place
-      return;
-    }
-
-    // otherwise, prevent the click
-    e.preventDefault();
-  };
-
-  // In case focus escapes the trap for some strange reason, pull it back in.
-  // NOTE: the focusIn event is NOT cancelable, so if focus escapes, it may cause unexpected
-  //  scrolling if the node that got focused was out of view; there's nothing we can do to
-  //  prevent that from happening by the time we discover that focus escaped
-  var checkFocusIn = function checkFocusIn(event) {
-    var target = getActualTarget(event);
-    var targetContained = findContainerIndex(target, event) >= 0;
-
-    // In Firefox when you Tab out of an iframe the Document is briefly focused.
-    if (targetContained || target instanceof Document) {
-      if (targetContained) {
-        state.mostRecentlyFocusedNode = target;
-      }
-    } else {
-      // escaped! pull it back in to where it just left
-      event.stopImmediatePropagation();
-
-      // focus will escape if the MRU node had a positive tab index and user tried to nav forward;
-      //  it will also escape if the MRU node had a 0 tab index and user tried to nav backward
-      //  toward a node with a positive tab index
-      var nextNode; // next node to focus, if we find one
-      var navAcrossContainers = true;
-      if (state.mostRecentlyFocusedNode) {
-        if (getTabIndex(state.mostRecentlyFocusedNode) > 0) {
-          // MRU container index must be >=0 otherwise we wouldn't have it as an MRU node...
-          var mruContainerIdx = findContainerIndex(state.mostRecentlyFocusedNode);
-          // there MAY not be any tabbable nodes in the container if there are at least 2 containers
-          //  and the MRU node is focusable but not tabbable (focus-trap requires at least 1 container
-          //  with at least one tabbable node in order to function, so this could be the other container
-          //  with nothing tabbable in it)
-          var tabbableNodes = state.containerGroups[mruContainerIdx].tabbableNodes;
-          if (tabbableNodes.length > 0) {
-            // MRU tab index MAY not be found if the MRU node is focusable but not tabbable
-            var mruTabIdx = tabbableNodes.findIndex(function (node) {
-              return node === state.mostRecentlyFocusedNode;
-            });
-            if (mruTabIdx >= 0) {
-              if (config.isKeyForward(state.recentNavEvent)) {
-                if (mruTabIdx + 1 < tabbableNodes.length) {
-                  nextNode = tabbableNodes[mruTabIdx + 1];
-                  navAcrossContainers = false;
-                }
-                // else, don't wrap within the container as focus should move to next/previous
-                //  container
-              } else {
-                if (mruTabIdx - 1 >= 0) {
-                  nextNode = tabbableNodes[mruTabIdx - 1];
-                  navAcrossContainers = false;
-                }
-                // else, don't wrap within the container as focus should move to next/previous
-                //  container
-              }
-              // else, don't find in container order without considering direction too
-            }
-          }
-          // else, no tabbable nodes in that container (which means we must have at least one other
-          //  container with at least one tabbable node in it, otherwise focus-trap would've thrown
-          //  an error the last time updateTabbableNodes() was run): find next node among all known
-          //  containers
-        } else {
-          // check to see if there's at least one tabbable node with a positive tab index inside
-          //  the trap because focus seems to escape when navigating backward from a tabbable node
-          //  with tabindex=0 when this is the case (instead of wrapping to the tabbable node with
-          //  the greatest positive tab index like it should)
-          if (!state.containerGroups.some(function (g) {
-            return g.tabbableNodes.some(function (n) {
-              return getTabIndex(n) > 0;
-            });
-          })) {
-            // no containers with tabbable nodes with positive tab indexes which means the focus
-            //  escaped for some other reason and we should just execute the fallback to the
-            //  MRU node or initial focus node, if any
-            navAcrossContainers = false;
-          }
-        }
-      } else {
-        // no MRU node means we're likely in some initial condition when the trap has just
-        //  been activated and initial focus hasn't been given yet, in which case we should
-        //  fall through to trying to focus the initial focus node, which is what should
-        //  happen below at this point in the logic
-        navAcrossContainers = false;
-      }
-      if (navAcrossContainers) {
-        nextNode = findNextNavNode({
-          // move FROM the MRU node, not event-related node (which will be the node that is
-          //  outside the trap causing the focus escape we're trying to fix)
-          target: state.mostRecentlyFocusedNode,
-          isBackward: config.isKeyBackward(state.recentNavEvent)
-        });
-      }
-      if (nextNode) {
-        tryFocus(nextNode);
-      } else {
-        tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
-      }
-    }
-    state.recentNavEvent = undefined; // clear
-  };
-
-  // Hijack key nav events on the first and last focusable nodes of the trap,
-  // in order to prevent focus from escaping. If it escapes for even a
-  // moment it can end up scrolling the page and causing confusion so we
-  // kind of need to capture the action at the keydown phase.
-  var checkKeyNav = function checkKeyNav(event) {
-    var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    state.recentNavEvent = event;
-    var destinationNode = findNextNavNode({
-      event: event,
-      isBackward: isBackward
-    });
-    if (destinationNode) {
-      if (isTabEvent(event)) {
-        // since tab natively moves focus, we wouldn't have a destination node unless we
-        //  were on the edge of a container and had to move to the next/previous edge, in
-        //  which case we want to prevent default to keep the browser from moving focus
-        //  to where it normally would
-        event.preventDefault();
-      }
-      tryFocus(destinationNode);
-    }
-    // else, let the browser take care of [shift+]tab and move the focus
-  };
-
-  var checkKey = function checkKey(event) {
-    if (isEscapeEvent(event) && valueOrHandler(config.escapeDeactivates, event) !== false) {
-      event.preventDefault();
-      trap.deactivate();
-      return;
-    }
-    if (config.isKeyForward(event) || config.isKeyBackward(event)) {
-      checkKeyNav(event, config.isKeyBackward(event));
-    }
-  };
-  var checkClick = function checkClick(e) {
-    var target = getActualTarget(e);
-    if (findContainerIndex(target, e) >= 0) {
-      return;
-    }
-    if (valueOrHandler(config.clickOutsideDeactivates, e)) {
-      return;
-    }
-    if (valueOrHandler(config.allowOutsideClick, e)) {
-      return;
-    }
-    e.preventDefault();
-    e.stopImmediatePropagation();
-  };
-
-  //
-  // EVENT LISTENERS
-  //
-
-  var addListeners = function addListeners() {
-    if (!state.active) {
-      return;
-    }
-
-    // There can be only one listening focus trap at a time
-    activeFocusTraps.activateTrap(trapStack, trap);
-
-    // Delay ensures that the focused element doesn't capture the event
-    // that caused the focus trap activation.
-    state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () {
-      tryFocus(getInitialFocusNode());
-    }) : tryFocus(getInitialFocusNode());
-    doc.addEventListener('focusin', checkFocusIn, true);
-    doc.addEventListener('mousedown', checkPointerDown, {
-      capture: true,
-      passive: false
-    });
-    doc.addEventListener('touchstart', checkPointerDown, {
-      capture: true,
-      passive: false
-    });
-    doc.addEventListener('click', checkClick, {
-      capture: true,
-      passive: false
-    });
-    doc.addEventListener('keydown', checkKey, {
-      capture: true,
-      passive: false
-    });
-    return trap;
-  };
-  var removeListeners = function removeListeners() {
-    if (!state.active) {
-      return;
-    }
-    doc.removeEventListener('focusin', checkFocusIn, true);
-    doc.removeEventListener('mousedown', checkPointerDown, true);
-    doc.removeEventListener('touchstart', checkPointerDown, true);
-    doc.removeEventListener('click', checkClick, true);
-    doc.removeEventListener('keydown', checkKey, true);
-    return trap;
-  };
-
-  //
-  // MUTATION OBSERVER
-  //
-
-  var checkDomRemoval = function checkDomRemoval(mutations) {
-    var isFocusedNodeRemoved = mutations.some(function (mutation) {
-      var removedNodes = Array.from(mutation.removedNodes);
-      return removedNodes.some(function (node) {
-        return node === state.mostRecentlyFocusedNode;
-      });
-    });
-
-    // If the currently focused is removed then browsers will move focus to the
-    // <body> element. If this happens, try to move focus back into the trap.
-    if (isFocusedNodeRemoved) {
-      tryFocus(getInitialFocusNode());
-    }
-  };
-
-  // Use MutationObserver - if supported - to detect if focused node is removed
-  // from the DOM.
-  var mutationObserver = typeof window !== 'undefined' && 'MutationObserver' in window ? new MutationObserver(checkDomRemoval) : undefined;
-  var updateObservedNodes = function updateObservedNodes() {
-    if (!mutationObserver) {
-      return;
-    }
-    mutationObserver.disconnect();
-    if (state.active && !state.paused) {
-      state.containers.map(function (container) {
-        mutationObserver.observe(container, {
-          subtree: true,
-          childList: true
-        });
-      });
-    }
-  };
-
-  //
-  // TRAP DEFINITION
-  //
-
-  trap = {
-    get active() {
-      return state.active;
-    },
-    get paused() {
-      return state.paused;
-    },
-    activate: function activate(activateOptions) {
-      if (state.active) {
-        return this;
-      }
-      var onActivate = getOption(activateOptions, 'onActivate');
-      var onPostActivate = getOption(activateOptions, 'onPostActivate');
-      var checkCanFocusTrap = getOption(activateOptions, 'checkCanFocusTrap');
-      if (!checkCanFocusTrap) {
-        updateTabbableNodes();
-      }
-      state.active = true;
-      state.paused = false;
-      state.nodeFocusedBeforeActivation = doc.activeElement;
-      onActivate === null || onActivate === void 0 || onActivate();
-      var finishActivation = function finishActivation() {
-        if (checkCanFocusTrap) {
-          updateTabbableNodes();
-        }
-        addListeners();
-        updateObservedNodes();
-        onPostActivate === null || onPostActivate === void 0 || onPostActivate();
-      };
-      if (checkCanFocusTrap) {
-        checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
-        return this;
-      }
-      finishActivation();
-      return this;
-    },
-    deactivate: function deactivate(deactivateOptions) {
-      if (!state.active) {
-        return this;
-      }
-      var options = _objectSpread2({
-        onDeactivate: config.onDeactivate,
-        onPostDeactivate: config.onPostDeactivate,
-        checkCanReturnFocus: config.checkCanReturnFocus
-      }, deactivateOptions);
-      clearTimeout(state.delayInitialFocusTimer); // noop if undefined
-      state.delayInitialFocusTimer = undefined;
-      removeListeners();
-      state.active = false;
-      state.paused = false;
-      updateObservedNodes();
-      activeFocusTraps.deactivateTrap(trapStack, trap);
-      var onDeactivate = getOption(options, 'onDeactivate');
-      var onPostDeactivate = getOption(options, 'onPostDeactivate');
-      var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus');
-      var returnFocus = getOption(options, 'returnFocus', 'returnFocusOnDeactivate');
-      onDeactivate === null || onDeactivate === void 0 || onDeactivate();
-      var finishDeactivation = function finishDeactivation() {
-        delay(function () {
-          if (returnFocus) {
-            tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
-          }
-          onPostDeactivate === null || onPostDeactivate === void 0 || onPostDeactivate();
-        });
-      };
-      if (returnFocus && checkCanReturnFocus) {
-        checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation);
-        return this;
-      }
-      finishDeactivation();
-      return this;
-    },
-    pause: function pause(pauseOptions) {
-      if (state.paused || !state.active) {
-        return this;
-      }
-      var onPause = getOption(pauseOptions, 'onPause');
-      var onPostPause = getOption(pauseOptions, 'onPostPause');
-      state.paused = true;
-      onPause === null || onPause === void 0 || onPause();
-      removeListeners();
-      updateObservedNodes();
-      onPostPause === null || onPostPause === void 0 || onPostPause();
-      return this;
-    },
-    unpause: function unpause(unpauseOptions) {
-      if (!state.paused || !state.active) {
-        return this;
-      }
-      var onUnpause = getOption(unpauseOptions, 'onUnpause');
-      var onPostUnpause = getOption(unpauseOptions, 'onPostUnpause');
-      state.paused = false;
-      onUnpause === null || onUnpause === void 0 || onUnpause();
-      updateTabbableNodes();
-      addListeners();
-      updateObservedNodes();
-      onPostUnpause === null || onPostUnpause === void 0 || onPostUnpause();
-      return this;
-    },
-    updateContainerElements: function updateContainerElements(containerElements) {
-      var elementsAsArray = [].concat(containerElements).filter(Boolean);
-      state.containers = elementsAsArray.map(function (element) {
-        return typeof element === 'string' ? doc.querySelector(element) : element;
-      });
-      if (state.active) {
-        updateTabbableNodes();
-      }
-      updateObservedNodes();
-      return this;
-    }
-  };
-
-  // initialize container elements
-  trap.updateContainerElements(elements);
-  return trap;
-};
-
-const swirlShellLayoutCss = ".sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:18rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:\"header header header\"\n      \"nav main sidebar\"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.sc-swirl-shell-layout{display:none}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-sunken-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-sunken-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-2);right:var(--s-space-2);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-overlay-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-overlay-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul{row-gap:var(--s-space-16);-moz-column-gap:0;column-gap:0}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul{gap:var(--s-space-16)}.shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(50% - var(--s-space-8))}.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(100% / 3)}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}";
-
-const SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE";
-const SECONDARY_NAVIGATION_VIEW_STORAGE_KEY = "SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE";
-const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
-const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayout extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.historyBackClick = createEvent(this, "historyBackClick", 7);
-        this.historyForwardClick = createEvent(this, "historyForwardClick", 7);
-        this.skipLinkClick = createEvent(this, "skipLinkClick", 7);
-        this.browserBackButtonLabel = "Navigate back";
-        this.browserForwardButtonLabel = "Navigate forward";
-        this.collapseNavigationButtonLabel = "Collapse navigation";
-        this.enableSecondaryNavGridLayout = true;
-        this.secondaryNavGridLayoutVariant = "tiled";
-        this.expandNavigationButtonLabel = "Expand navigation";
-        this.gridNavLayoutToggleLabel = "Grid";
-        this.hideMobileNavigationButtonLabel = "Close navigation";
-        this.listNavLayoutToggleLabel = "List";
-        this.navigationLabel = "Main";
-        this.secondaryNavCollapseLabel = "Show less";
-        this.secondaryNavExpandLabel = "Show more";
-        this.skipLinkLabel = "Skip to main content";
-        this.isDesktopViewport = true;
-        this.secondaryNavView = "list";
-        this.collectNavItems = () => {
-            this.mainNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='nav'], [slot='nav'] swirl-shell-navigation-item"));
-            this.secondaryNavItems = Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item"));
-            this.toggleNavItemLabels();
-            this.setSecondaryNavItemsTiled();
-        };
-        this.toggleSecondaryNavView = (event) => {
-            event.stopPropagation();
-            if (this.secondaryNavView === "grid") {
-                this.secondaryNavView = "list";
-            }
-            else {
-                this.secondaryNavView = "grid";
-            }
-            this.setSecondaryNavItemsTiled();
-            localStorage.setItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY, String(this.secondaryNavView));
-        };
-        this.toggleSecondaryNavCollapse = (event) => {
-            event.stopPropagation();
-            this.secondaryNavCollapsed = !this.secondaryNavCollapsed;
-            localStorage.setItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.secondaryNavCollapsed));
-        };
-        this.onNavigationToggleClick = () => {
-            this.navigationCollapsed = !this.navigationCollapsed;
-        };
-        this.onNavigationClick = () => {
-            this.hideMobileNavigation();
-        };
-    }
-    componentWillLoad() {
-        this.isDesktopViewport = isDesktopViewport();
-        this.collectNavItems();
-        const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
-        this.navigationCollapsed = restoredNavigationCollapseState;
-        this.restoreSecondaryNavState();
-    }
-    componentDidLoad() {
-        this.focusTrap = createFocusTrap(this.navElement, {
-            allowOutsideClick: true,
-            tabbableOptions: {
-                getShadowRoot: (node) => {
-                    return node.shadowRoot;
-                },
-            },
-        });
-        this.collectNavItems();
-        this.navMutationObserver = new MutationObserver(() => {
-            this.collectNavItems();
-        });
-        this.navMutationObserver.observe(this.navElement, {
-            childList: true,
-            subtree: true,
-        });
-    }
-    componentDidRender() {
-        this.focusTrap?.updateContainerElements(this.navElement);
-    }
-    disconnectedCallback() {
-        this.focusTrap?.deactivate();
-        this.navMutationObserver?.disconnect();
-    }
-    onWindowKeyDown(event) {
-        if (event.key === "Escape" && this.mobileNavigationActive) {
-            this.hideMobileNavigation();
-        }
-    }
-    watchEnableSecondaryNavGridLayout() {
-        this.restoreSecondaryNavState();
-    }
-    watchMobileNavigationState() {
-        if (this.mobileNavigationActive) {
-            // wait for animation
-            setTimeout(() => {
-                this.focusTrap.activate();
-            }, 200);
-        }
-        else {
-            this.focusTrap.deactivate();
-        }
-    }
-    watchNavigationCollapsed() {
-        localStorage.setItem(NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.navigationCollapsed));
-        this.toggleNavItemLabels();
-        this.setSecondaryNavItemsTiled();
-    }
-    onWindowResize() {
-        if (this.isDesktopViewport !== isDesktopViewport()) {
-            this.isDesktopViewport = isDesktopViewport();
-            this.collectNavItems();
-        }
-    }
-    /**
-     * Opens the mobile navigation.
-     */
-    async showMobileNavigation() {
-        this.mobileNavigationActive = true;
-        this.collectNavItems();
-    }
-    /**
-     * Hides the mobile navigation.
-     */
-    async hideMobileNavigation() {
-        this.mobileNavigationActive = false;
-        this.toggleNavItemLabels();
-    }
-    toggleNavItemLabels() {
-        [...this.secondaryNavItems, ...this.mainNavItems].forEach((item) => {
-            item.hideLabel = this.navigationCollapsed && this.isDesktopViewport;
-        });
-    }
-    setSecondaryNavItemsTiled() {
-        this.secondaryNavItems.forEach((item) => {
-            item.variant =
-                this.enableSecondaryNavGridLayout &&
-                    (this.secondaryNavView === "grid" ||
-                        (this.navigationCollapsed && this.isDesktopViewport))
-                    ? this.secondaryNavGridLayoutVariant
-                    : "default";
-        });
-    }
-    restoreSecondaryNavState() {
-        if (this.enableSecondaryNavGridLayout) {
-            const restoredSecondaryNavigationCollapseState = localStorage.getItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY) ===
-                "true";
-            this.secondaryNavCollapsed = restoredSecondaryNavigationCollapseState;
-            const restoredSecondaryNavigationViewState = localStorage.getItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY);
-            this.secondaryNavView =
-                restoredSecondaryNavigationViewState;
-        }
-    }
-    render() {
-        const mainNavCollapsed = this.navigationCollapsed && this.isDesktopViewport;
-        const hasSecondaryNav = Boolean(this.el.querySelector("[slot='secondary-nav']"));
-        const className = classNames("shell-layout", {
-            "shell-layout--branded-header": this.brandedHeader,
-            "shell-layout--secondary-nav-collapsed": this.secondaryNavCollapsed,
-            "shell-layout--has-secondary-nav": hasSecondaryNav,
-            "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
-            "shell-layout--navigation-collapsed": mainNavCollapsed,
-        });
-        return (h(Host, { key: 'af4f5071d7756e432092b99a9896e9a8b8bc7eea' }, h("div", { key: '12104fafad2cfa493b84b7fc7734c3afe0d0be27', class: className }, h("header", { key: '9f45bb06f11dce944ea77ab52787abdc21c85220', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'c9085a2e9f40a7c92577e2d64f19ab9fb9685462', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '453094997ed28ff0b8371b43fbc9b7521f60ce57', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: 'baa15dec01a728d3335c5bf91e601a454f994ef6', content: this.navigationCollapsed
-                ? this.expandNavigationButtonLabel
-                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: 'cdc62b6fedcd6549999c6229a0732ff69e1e174f', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '1932f4052c0b32a12c79a701f5645b96a9e2e365' }, this.navigationCollapsed
-            ? this.expandNavigationButtonLabel
-            : this.collapseNavigationButtonLabel))), h("a", { key: 'f1257ebff793c3f3dd52180d359b2fd6c19bcf3e', class: "shell-layout__header-tool", onClick: this.historyBackClick.emit, href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '16acb8fd274813a9ca1f707c1ccd0418e0ea350a', size: 20 }), h("swirl-visually-hidden", { key: '12f6c531c97f5931ad318d1b7867c79cd639deac' }, this.browserBackButtonLabel)), h("a", { key: '5621b2ba70e33e1b067eded32283c4fbc006c848', class: "shell-layout__header-tool", onClick: this.historyForwardClick.emit, href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'aa6d71ae97378c9aa73c52c88c8781ba60308b5d', size: 20 }), h("swirl-visually-hidden", { key: '2b5b29cc9fbdadcfc13aaa3cd14de52daf42ebc4' }, this.browserForwardButtonLabel)), h("slot", { key: '54abaa4e3077d9c800f1d67352be0f6e3e47885b', name: "left-header-tools" })), h("div", { key: '6d4f3ac3ee295478db742b9a7f3e3ee0d7a7bd78', class: "shell-layout__logo" }, h("slot", { key: 'b4d1a1bbda2b83396fb64294beff985edbd08938', name: "logo" })), h("div", { key: '2207adfb6b0c90dac26b08079f65c644ab0c111e', class: "shell-layout__header-right" }, h("slot", { key: '91f05d6766e9d9cf2090658c634ebb53e9035902', name: "right-header-tools" }), h("slot", { key: 'fe06a32f419326c0502cbfe1c3ce95bb5a8a064d', name: "avatar" }))), h("div", { key: '701c3a4b53f27082a523b2a5c1d69359205d6545', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'a0b7fff0f69503bca4753f768a0e47b13e352349', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'fac7575ff65e3905f6c730b455a706bb824a1501', class: "shell-layout__mobile-header" }, h("slot", { key: 'fc956c5cb4616d1f5ed65f86d6a6036e53ceeb4d', name: "mobile-logo" }), h("div", { key: '8ee98defd84626bd41ad38ca036ac3903765bf90', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '3d0fa16607906735984e1fe41cc82e88cbabb1aa', name: "mobile-header-tools" }), h("button", { key: 'b3d19455ff6d2aa33ed9ba8685287f994ee8b04f', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'a8d777ccf0f2fc6fd5beb4eada8b9c7324e85c10', size: 20 }), h("swirl-visually-hidden", { key: 'ee2cc5340efcdf9cf9cd8753105e8f5e54413709' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '840ff1efff5ae03a837a481021e38394a6b9d602', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '69b095c3d8b3368b09f1a0c5b061df052003f753' }, h("span", { key: '1b6d36bad0e1cbc05ee32918f20a1902ede66e8d', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '4fea1699d05e6ee16a9bb44eacdb87f981842db8', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: 'e55bce658bd8f3874dbdefdd29a4ce23a2fab989', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '4d985f038eef71a0a6dc19b9ef0d7ecb1732d993', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'f266391b3ccd5a7c0ec1209803e1dd6b7c85136f', paddingBlockEnd: "16" }, h("swirl-stack", { key: '1695a938e40b7076cae9dad20fb4d71685b4757e', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '5c80fc965a01390b05d431d5bf5e0f995f765b4e', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
-                ? "<swirl-icon-expand-more></swirl-icon-expand-more>"
-                : "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
-                ? this.secondaryNavExpandLabel
-                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: 'ff65fe19685e216a34c4adf75c38a461a318517c', icon: this.secondaryNavView === "grid"
-                ? "<swirl-icon-menu></swirl-icon-menu>"
-                : "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
-                ? this.gridNavLayoutToggleLabel
-                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '3441acef0a3b9df10b386f63c1305da82c5ed223', class: {
-                [`shell-layout__secondary-nav-items--${this.secondaryNavGridLayoutVariant}`]: true,
-                "shell-layout__secondary-nav-items": true,
-                "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
-                    this.secondaryNavView === "grid",
-            } }, h("slot", { key: '264e6b5b05a6ce76056b86054f88cfaf593f6aa1', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'ee51c47822eb976d6fd5774ad5d4460141f887b4', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'c81d1bfd9c04f29637b86da51d3cd46388557159' })))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "enableSecondaryNavGridLayout": ["watchEnableSecondaryNavGridLayout"],
-        "mobileNavigationActive": ["watchMobileNavigationState"],
-        "navigationCollapsed": ["watchNavigationCollapsed"]
-    }; }
-    static get style() { return swirlShellLayoutCss; }
-}, [6, "swirl-shell-layout", {
-        "brandedHeader": [4, "branded-header"],
-        "browserBackButtonLabel": [1, "browser-back-button-label"],
-        "browserForwardButtonLabel": [1, "browser-forward-button-label"],
-        "collapseNavigationButtonLabel": [1, "collapse-navigation-button-label"],
-        "enableSecondaryNavGridLayout": [4, "enable-secondary-nav-grid-layout"],
-        "secondaryNavGridLayoutVariant": [1, "secondary-nav-grid-layout-variant"],
-        "expandNavigationButtonLabel": [1, "expand-navigation-button-label"],
-        "gridNavLayoutToggleLabel": [1, "grid-nav-layout-toggle-label"],
-        "hideMobileNavigationButtonLabel": [1, "hide-mobile-navigation-button-label"],
-        "listNavLayoutToggleLabel": [1, "list-nav-layout-toggle-label"],
-        "navigationLabel": [1, "navigation-label"],
-        "secondaryNavCollapseLabel": [1, "secondary-nav-collapse-label"],
-        "secondaryNavExpandLabel": [1, "secondary-nav-expand-label"],
-        "skipLinkLabel": [1, "skip-link-label"],
-        "isDesktopViewport": [32],
-        "mobileNavigationActive": [32],
-        "navigationCollapsed": [32],
-        "secondaryNavCollapsed": [32],
-        "secondaryNavView": [32],
-        "showMobileNavigation": [64],
-        "hideMobileNavigation": [64]
-    }, [[8, "keydown", "onWindowKeyDown"], [9, "resize", "onWindowResize"]], {
-        "enableSecondaryNavGridLayout": ["watchEnableSecondaryNavGridLayout"],
-        "mobileNavigationActive": ["watchMobileNavigationState"],
-        "navigationCollapsed": ["watchNavigationCollapsed"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-shell-layout", "swirl-box", "swirl-button", "swirl-icon-arrow-back", "swirl-icon-arrow-forward", "swirl-icon-dock-left-collapse", "swirl-icon-dock-left-expand", "swirl-icon-double-arrow-left", "swirl-separator", "swirl-stack", "swirl-tooltip", "swirl-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-shell-layout":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlShellLayout$1);
-            }
-            break;
-        case "swirl-box":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "swirl-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "swirl-icon-arrow-back":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "swirl-icon-arrow-forward":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "swirl-icon-dock-left-collapse":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "swirl-icon-dock-left-expand":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "swirl-icon-double-arrow-left":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "swirl-separator":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "swirl-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlShellLayout = SwirlShellLayout$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlShellLayout, defineCustomElement };
+function B(e,l){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);l&&(t=t.filter((function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable}))),a.push.apply(a,t)}return a}function G(e){for(var l=1;l<arguments.length;l++){var a=null!=arguments[l]?arguments[l]:{};l%2?B(Object(a),!0).forEach((function(l){M(e,l,a[l])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):B(Object(a)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(a,l))}))}return e}function M(e,l,a){return(l=function(e){var l=function(e,l){if("object"!=typeof e||null===e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var t=a.call(e,l);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return e+""}(e,"string");return"symbol"==typeof l?l:l+""}(l))in e?Object.defineProperty(e,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[l]=a,e}var W=function(e){return"Tab"===(null==e?void 0:e.key)||9===(null==e?void 0:e.keyCode)},V=function(e){return W(e)&&!e.shiftKey},U=function(e){return W(e)&&e.shiftKey},Y=function(e){return setTimeout(e,0)},H=function(e,l){var a=-1;return e.every((function(e,t){return!l(e)||(a=t,!1)})),a},K=function(e){for(var l=arguments.length,a=Array(l>1?l-1:0),t=1;t<l;t++)a[t-1]=arguments[t];return"function"==typeof e?e.apply(void 0,a):e},$=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},X=[],q=function(e,l){var a,t=(null==l?void 0:l.document)||document,o=(null==l?void 0:l.trapStack)||X,s=G({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:V,isKeyBackward:U},l),i={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0,recentNavEvent:void 0},r=function(e,l,a){return e&&void 0!==e[l]?e[l]:s[a||l]},n=function(e,l){var a="function"==typeof(null==l?void 0:l.composedPath)?l.composedPath():void 0;return i.containerGroups.findIndex((function(l){var t=l.container,o=l.tabbableNodes;return t.contains(e)||(null==a?void 0:a.includes(t))||o.find((function(l){return l===e}))}))},c=function(e){var l=s[e];if("function"==typeof l){for(var a=arguments.length,o=Array(a>1?a-1:0),i=1;i<a;i++)o[i-1]=arguments[i];l=l.apply(void 0,o)}if(!0===l&&(l=void 0),!l){if(void 0===l||!1===l)return l;throw Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var r=l;if("string"==typeof l&&!(r=t.querySelector(l)))throw Error("`".concat(e,"` as selector refers to no known node"));return r},d=function(){var e=c("initialFocus");if(!1===e)return!1;if(void 0===e||!z(e,s.tabbableOptions))if(n(t.activeElement)>=0)e=t.activeElement;else{var l=i.tabbableGroups[0];e=l&&l.firstTabbableNode||c("fallbackFocus")}if(!e)throw Error("Your focus-trap needs to have at least one focusable element");return e},u=function(){if(i.containerGroups=i.containers.map((function(e){var l=function(e,l){var a;return a=(l=l||{}).getShadowRoot?S([e],l.includeContainer,{filter:I.bind(null,l),flatten:!1,getShadowRoot:l.getShadowRoot,shadowRootFilter:D}):E(e,l.includeContainer,I.bind(null,l)),F(a)}(e,s.tabbableOptions),a=function(e,l){return(l=l||{}).getShadowRoot?S([e],l.includeContainer,{filter:O.bind(null,l),flatten:!0,getShadowRoot:l.getShadowRoot}):E(e,l.includeContainer,O.bind(null,l))}(e,s.tabbableOptions),t=l.length>0?l[0]:void 0,o=l.length>0?l[l.length-1]:void 0,i=a.find((function(e){return R(e)})),r=a.slice().reverse().find((function(e){return R(e)})),n=!!l.find((function(e){return T(e)>0}));return{container:e,tabbableNodes:l,focusableNodes:a,posTabIndexesFound:n,firstTabbableNode:t,lastTabbableNode:o,firstDomTabbableNode:i,lastDomTabbableNode:r,nextTabbableNode:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],o=l.indexOf(e);return o<0?t?a.slice(a.indexOf(e)+1).find((function(e){return R(e)})):a.slice(0,a.indexOf(e)).reverse().find((function(e){return R(e)})):l[o+(t?1:-1)]}}})),i.tabbableGroups=i.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),i.tabbableGroups.length<=0&&!c("fallbackFocus"))throw Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");if(i.containerGroups.find((function(e){return e.posTabIndexesFound}))&&i.containerGroups.length>1)throw Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.")},h=function e(l){var a=l.activeElement;if(a)return a.shadowRoot&&null!==a.shadowRoot.activeElement?e(a.shadowRoot):a},f=function e(l){!1!==l&&l!==h(document)&&(l&&l.focus?(l.focus({preventScroll:!!s.preventScroll}),i.mostRecentlyFocusedNode=l,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(l)&&l.select()):e(d()))},y=function(e){var l=c("setReturnFocus",e);return l||!1!==l&&e},v=function(e){var l=e.target,a=e.event,t=e.isBackward,o=void 0!==t&&t;l=l||$(a),u();var r=null;if(i.tabbableGroups.length>0){var d=n(l,a),h=d>=0?i.containerGroups[d]:void 0;if(d<0)r=o?i.tabbableGroups[i.tabbableGroups.length-1].lastTabbableNode:i.tabbableGroups[0].firstTabbableNode;else if(o){var f=H(i.tabbableGroups,(function(e){return l===e.firstTabbableNode}));if(f<0&&(h.container===l||z(l,s.tabbableOptions)&&!R(l,s.tabbableOptions)&&!h.nextTabbableNode(l,!1))&&(f=d),f>=0){var y=i.tabbableGroups[0===f?i.tabbableGroups.length-1:f-1];r=T(l)>=0?y.lastTabbableNode:y.lastDomTabbableNode}else W(a)||(r=h.nextTabbableNode(l,!1))}else{var v=H(i.tabbableGroups,(function(e){return l===e.lastTabbableNode}));if(v<0&&(h.container===l||z(l,s.tabbableOptions)&&!R(l,s.tabbableOptions)&&!h.nextTabbableNode(l))&&(v=d),v>=0){var b=i.tabbableGroups[v===i.tabbableGroups.length-1?0:v+1];r=T(l)>=0?b.firstTabbableNode:b.firstDomTabbableNode}else W(a)||(r=h.nextTabbableNode(l))}}else r=c("fallbackFocus");return r},b=function(e){var l=$(e);n(l,e)>=0||(K(s.clickOutsideDeactivates,e)?a.deactivate({returnFocus:s.returnFocusOnDeactivate}):K(s.allowOutsideClick,e)||e.preventDefault())},w=function(e){var l=$(e),a=n(l,e)>=0;if(a||l instanceof Document)a&&(i.mostRecentlyFocusedNode=l);else{var t;e.stopImmediatePropagation();var o=!0;if(i.mostRecentlyFocusedNode)if(T(i.mostRecentlyFocusedNode)>0){var r=n(i.mostRecentlyFocusedNode),c=i.containerGroups[r].tabbableNodes;if(c.length>0){var u=c.findIndex((function(e){return e===i.mostRecentlyFocusedNode}));u>=0&&(s.isKeyForward(i.recentNavEvent)?u+1<c.length&&(t=c[u+1],o=!1):u-1>=0&&(t=c[u-1],o=!1))}}else i.containerGroups.some((function(e){return e.tabbableNodes.some((function(e){return T(e)>0}))}))||(o=!1);else o=!1;o&&(t=v({target:i.mostRecentlyFocusedNode,isBackward:s.isKeyBackward(i.recentNavEvent)})),f(t||i.mostRecentlyFocusedNode||d())}i.recentNavEvent=void 0},p=function(e){if(function(e){return"Escape"===(null==e?void 0:e.key)||"Esc"===(null==e?void 0:e.key)||27===(null==e?void 0:e.keyCode)}(e)&&!1!==K(s.escapeDeactivates,e))return e.preventDefault(),void a.deactivate();(s.isKeyForward(e)||s.isKeyBackward(e))&&function(e){var l=arguments.length>1&&void 0!==arguments[1]&&arguments[1];i.recentNavEvent=e;var a=v({event:e,isBackward:l});a&&(W(e)&&e.preventDefault(),f(a))}(e,s.isKeyBackward(e))},m=function(e){var l=$(e);n(l,e)>=0||K(s.clickOutsideDeactivates,e)||K(s.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},g=function(){if(i.active)return function(e,l){if(e.length>0){var a=e[e.length-1];a!==l&&a.pause()}var t=e.indexOf(l);-1===t||e.splice(t,1),e.push(l)}(o,a),i.delayInitialFocusTimer=s.delayInitialFocus?Y((function(){f(d())})):f(d()),t.addEventListener("focusin",w,!0),t.addEventListener("mousedown",b,{capture:!0,passive:!1}),t.addEventListener("touchstart",b,{capture:!0,passive:!1}),t.addEventListener("click",m,{capture:!0,passive:!1}),t.addEventListener("keydown",p,{capture:!0,passive:!1}),a},_=function(){if(i.active)return t.removeEventListener("focusin",w,!0),t.removeEventListener("mousedown",b,!0),t.removeEventListener("touchstart",b,!0),t.removeEventListener("click",m,!0),t.removeEventListener("keydown",p,!0),a},k="undefined"!=typeof window&&"MutationObserver"in window?new MutationObserver((function(e){e.some((function(e){return Array.from(e.removedNodes).some((function(e){return e===i.mostRecentlyFocusedNode}))}))&&f(d())})):void 0,x=function(){k&&(k.disconnect(),i.active&&!i.paused&&i.containers.map((function(e){k.observe(e,{subtree:!0,childList:!0})})))};return(a={get active(){return i.active},get paused(){return i.paused},activate:function(e){if(i.active)return this;var l=r(e,"onActivate"),a=r(e,"onPostActivate"),o=r(e,"checkCanFocusTrap");o||u(),i.active=!0,i.paused=!1,i.nodeFocusedBeforeActivation=t.activeElement,null==l||l();var s=function(){o&&u(),g(),x(),null==a||a()};return o?(o(i.containers.concat()).then(s,s),this):(s(),this)},deactivate:function(e){if(!i.active)return this;var l=G({onDeactivate:s.onDeactivate,onPostDeactivate:s.onPostDeactivate,checkCanReturnFocus:s.checkCanReturnFocus},e);clearTimeout(i.delayInitialFocusTimer),i.delayInitialFocusTimer=void 0,_(),i.active=!1,i.paused=!1,x(),function(e,l){var a=e.indexOf(l);-1!==a&&e.splice(a,1),e.length>0&&e[e.length-1].unpause()}(o,a);var t=r(l,"onDeactivate"),n=r(l,"onPostDeactivate"),c=r(l,"checkCanReturnFocus"),d=r(l,"returnFocus","returnFocusOnDeactivate");null==t||t();var u=function(){Y((function(){d&&f(y(i.nodeFocusedBeforeActivation)),null==n||n()}))};return d&&c?(c(y(i.nodeFocusedBeforeActivation)).then(u,u),this):(u(),this)},pause:function(e){if(i.paused||!i.active)return this;var l=r(e,"onPause"),a=r(e,"onPostPause");return i.paused=!0,null==l||l(),_(),x(),null==a||a(),this},unpause:function(e){if(!i.paused||!i.active)return this;var l=r(e,"onUnpause"),a=r(e,"onPostUnpause");return i.paused=!1,null==l||l(),u(),g(),x(),null==a||a(),this},updateContainerElements:function(e){var l=[].concat(e).filter(Boolean);return i.containers=l.map((function(e){return"string"==typeof e?t.querySelector(e):e})),i.active&&u(),x(),this}}).updateContainerElements(e),a};const J="SWIRL_SHELL_SECONDARY_NAVIGATION_COLLAPSE_STATE",Q="SWIRL_SHELL_SECONDARY_NAVIGATION_VIEW_STATE",Z="SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE",ee=e(class extends l{constructor(e){super(),!1!==e&&this.__registerHost(),this.historyBackClick=a(this,"historyBackClick",7),this.historyForwardClick=a(this,"historyForwardClick",7),this.skipLinkClick=a(this,"skipLinkClick",7),this.browserBackButtonLabel="Navigate back",this.browserForwardButtonLabel="Navigate forward",this.collapseNavigationButtonLabel="Collapse navigation",this.enableSecondaryNavGridLayout=!0,this.secondaryNavGridLayoutVariant="tiled",this.expandNavigationButtonLabel="Expand navigation",this.gridNavLayoutToggleLabel="Grid",this.hideMobileNavigationButtonLabel="Close navigation",this.listNavLayoutToggleLabel="List",this.navigationLabel="Main",this.secondaryNavCollapseLabel="Show less",this.secondaryNavExpandLabel="Show more",this.skipLinkLabel="Skip to main content",this.isDesktopViewport=!0,this.secondaryNavView="list",this.collectNavItems=()=>{this.mainNavItems=Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='nav'], [slot='nav'] swirl-shell-navigation-item")),this.secondaryNavItems=Array.from(this.el.querySelectorAll("swirl-shell-navigation-item[slot='secondary-nav'], [slot='secondary-nav'] swirl-shell-navigation-item")),this.toggleNavItemLabels(),this.setSecondaryNavItemsTiled()},this.toggleSecondaryNavView=e=>{e.stopPropagation(),this.secondaryNavView="grid"===this.secondaryNavView?"list":"grid",this.setSecondaryNavItemsTiled(),localStorage.setItem(Q,this.secondaryNavView+"")},this.toggleSecondaryNavCollapse=e=>{e.stopPropagation(),this.secondaryNavCollapsed=!this.secondaryNavCollapsed,localStorage.setItem(J,this.secondaryNavCollapsed+"")},this.onNavigationToggleClick=()=>{this.navigationCollapsed=!this.navigationCollapsed},this.onNavigationClick=()=>{this.hideMobileNavigation()}}componentWillLoad(){this.isDesktopViewport=r(),this.collectNavItems();const e="true"===localStorage.getItem(Z);this.navigationCollapsed=e,this.restoreSecondaryNavState()}componentDidLoad(){this.focusTrap=q(this.navElement,{allowOutsideClick:!0,tabbableOptions:{getShadowRoot:e=>e.shadowRoot}}),this.collectNavItems(),this.navMutationObserver=new MutationObserver((()=>{this.collectNavItems()})),this.navMutationObserver.observe(this.navElement,{childList:!0,subtree:!0})}componentDidRender(){this.focusTrap?.updateContainerElements(this.navElement)}disconnectedCallback(){this.focusTrap?.deactivate(),this.navMutationObserver?.disconnect()}onWindowKeyDown(e){"Escape"===e.key&&this.mobileNavigationActive&&this.hideMobileNavigation()}watchEnableSecondaryNavGridLayout(){this.restoreSecondaryNavState()}watchMobileNavigationState(){this.mobileNavigationActive?setTimeout((()=>{this.focusTrap.activate()}),200):this.focusTrap.deactivate()}watchNavigationCollapsed(){localStorage.setItem(Z,this.navigationCollapsed+""),this.toggleNavItemLabels(),this.setSecondaryNavItemsTiled()}onWindowResize(){this.isDesktopViewport!==r()&&(this.isDesktopViewport=r(),this.collectNavItems())}async showMobileNavigation(){this.mobileNavigationActive=!0,this.collectNavItems()}async hideMobileNavigation(){this.mobileNavigationActive=!1,this.toggleNavItemLabels()}toggleNavItemLabels(){[...this.secondaryNavItems,...this.mainNavItems].forEach((e=>{e.hideLabel=this.navigationCollapsed&&this.isDesktopViewport}))}setSecondaryNavItemsTiled(){this.secondaryNavItems.forEach((e=>{e.variant=this.enableSecondaryNavGridLayout&&("grid"===this.secondaryNavView||this.navigationCollapsed&&this.isDesktopViewport)?this.secondaryNavGridLayoutVariant:"default"}))}restoreSecondaryNavState(){if(this.enableSecondaryNavGridLayout){const e="true"===localStorage.getItem(J);this.secondaryNavCollapsed=e;const l=localStorage.getItem(Q);this.secondaryNavView=l}}render(){const e=this.navigationCollapsed&&this.isDesktopViewport,l=!!this.el.querySelector("[slot='secondary-nav']"),a=i("shell-layout",{"shell-layout--branded-header":this.brandedHeader,"shell-layout--secondary-nav-collapsed":this.secondaryNavCollapsed,"shell-layout--has-secondary-nav":l,"shell-layout--mobile-navigation-active":this.mobileNavigationActive,"shell-layout--navigation-collapsed":e});return t(o,{key:"89b88e318cef0173ad1f710c3fee86d1b6088b76"},t("div",{key:"3cf38770fb9fe3af03cac0c21426c94361dbfae1",class:a},t("header",{key:"39eb797f36afdde7dbb4bbaf4ec121a0e18fa2ce",class:"shell-layout__header","data-tauri-drag-region":"true"},t("button",{key:"a3e87f59f433f855daab5562d0fe9de03989a12d",class:"shell-layout__skip-link",onClick:this.skipLinkClick.emit,type:"button"},this.skipLinkLabel),t("div",{key:"07da8a7c76be11b86e0312ed6148b722e555e926",class:"shell-layout__header-left"},t("swirl-tooltip",{key:"b4618f794979589f974ca3a67d7932cdb00055cf",content:this.navigationCollapsed?this.expandNavigationButtonLabel:this.collapseNavigationButtonLabel,delay:100,position:"right"},t("button",{key:"6634d845f9dfc4fcb03b9a145ec44a9cc77dd938",class:"shell-layout__header-tool",onClick:this.onNavigationToggleClick,type:"button"},t(this.navigationCollapsed?"swirl-icon-dock-left-expand":"swirl-icon-dock-left-collapse",{size:20}),t("swirl-visually-hidden",{key:"8a025a412d192cbf0d805918a2d87fd3b6d4f278"},this.navigationCollapsed?this.expandNavigationButtonLabel:this.collapseNavigationButtonLabel))),t("a",{key:"2d4f9f5fed061ef449464d6d688733d0f7d10a3c",class:"shell-layout__header-tool",onClick:this.historyBackClick.emit,href:"javascript:history.back()"},t("swirl-icon-arrow-back",{key:"6eafa5833dc2ed512d7d55ec236b1a9806139162",size:20}),t("swirl-visually-hidden",{key:"e80776d39b68d132f09f3eae2f401a1ff600ae78"},this.browserBackButtonLabel)),t("a",{key:"a983c50ac8640e0fa57838c926b8a3a638eecaca",class:"shell-layout__header-tool",onClick:this.historyForwardClick.emit,href:"javascript:history.forward()"},t("swirl-icon-arrow-forward",{key:"ab08bb99477b0d6fa3b166b8a5a790663ec7b974",size:20}),t("swirl-visually-hidden",{key:"fc7f683642b747e8cdacd21170487d52c49d4ec1"},this.browserForwardButtonLabel)),t("slot",{key:"13f0224bbe8976589313ebbeb434022f6b80a52c",name:"left-header-tools"})),t("div",{key:"0b8e622ebff2483d20b999ca6cf1fe315fc46ddd",class:"shell-layout__logo"},t("slot",{key:"b1db425ea3a5d32e6a3f3c58a2ebfd43bce2a302",name:"logo"})),t("div",{key:"55d1371f8a4fbb08322a49955bae60b1e1fc04b6",class:"shell-layout__header-right"},t("slot",{key:"a269f2a23339d2edbf24c527266623b86e80a76b",name:"right-header-tools"}),t("slot",{key:"5117afd1e41450656ce6e2242d1b584294fb278a",name:"avatar"}))),t("div",{key:"e6f7580cef95c989fb8b665466cef5b7aba76e06",class:"shell-layout__mobile-nav-backdrop",onClick:this.onNavigationClick}),t("nav",{key:"a6acffaf2d428ee693628ebd2c9c9c396ea645fb","aria-labelledby":"main-navigation-label",class:"shell-layout__nav",onClick:this.onNavigationClick,ref:e=>this.navElement=e},t("div",{key:"d43340c59acd77f7ac0632fdf2a2bafb034b88af",class:"shell-layout__mobile-header"},t("slot",{key:"76a34d2af46de5df388727ed62b3877d2d43eeb8",name:"mobile-logo"}),t("div",{key:"0c82e16723843144386298960ab5b84f22a07c69",class:"shell-layout__mobile-header-tools"},t("slot",{key:"b4131349a80a71cd0193c23f53fff1a5822dd3a0",name:"mobile-header-tools"}),t("button",{key:"0371fc93cd2de9135bf1fdb27cabcc13075e4c37",class:"shell-layout__header-tool",type:"button"},t("swirl-icon-double-arrow-left",{key:"a717ba4d33482f1ec0b7e6b5e36b6ea125da5991",size:20}),t("swirl-visually-hidden",{key:"c940d970f018fbb595aad350119b4d22c56c115b"},this.hideMobileNavigationButtonLabel)))),t("div",{key:"2dac6ef231e1dcdd6635b593086060cd831399ef",class:"shell-layout__nav-body"},t("swirl-visually-hidden",{key:"7281eacbee004e71d4b41bd84e28b2fc34952e36"},t("span",{key:"87a4c74a9ed0b277d4216805f1aa374a12f75f4a",id:"main-navigation-label"},this.navigationLabel)),t("slot",{key:"5395605753829736391460474bcf473311ea7dd5",name:"nav",onSlotchange:this.collectNavItems}),t("div",{key:"6182efbbee39db4cfa507145a583fcb5d23c5e07",class:"shell-layout__secondary-nav"},t("swirl-separator",{key:"16a3597c38f2bb149ce52b9e3df8370322c381a7",color:"strong",spacing:"16"}),this.enableSecondaryNavGridLayout&&t("swirl-box",{key:"f1918da03d2158ebf077ee80e9dd91bf52e1078b",paddingBlockEnd:"16"},t("swirl-stack",{key:"da232e782b82d8cc1df9e9f1748efbad7087efc6",justify:e?"center":"space-between",orientation:"horizontal"},t("swirl-button",{key:"dea73892a98cd9c5787bbef6e21ed27d41cd96fd",hideLabel:e,icon:this.secondaryNavCollapsed?"<swirl-icon-expand-more></swirl-icon-expand-more>":"<swirl-icon-expand-less></swirl-icon-expand-less>",label:this.secondaryNavCollapsed?this.secondaryNavExpandLabel:this.secondaryNavCollapseLabel,onClick:this.toggleSecondaryNavCollapse,variant:"plain"}),!e&&!this.secondaryNavCollapsed&&t("swirl-button",{key:"4bf21622e989059751a8c953ed8be81f468af41a",icon:"grid"===this.secondaryNavView?"<swirl-icon-menu></swirl-icon-menu>":"<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>",iconPosition:"end",label:"grid"===this.secondaryNavView?this.gridNavLayoutToggleLabel:this.listNavLayoutToggleLabel,onClick:this.toggleSecondaryNavView,variant:"plain"}))),t("div",{key:"72ea97edcd2717cb5530c0284d3e564304fcc337",class:{["shell-layout__secondary-nav-items--"+this.secondaryNavGridLayoutVariant]:!0,"shell-layout__secondary-nav-items":!0,"shell-layout__secondary-nav-items--grid-view":this.enableSecondaryNavGridLayout&&"grid"===this.secondaryNavView}},t("slot",{key:"099ff7d294773e7ccae6a454a4395e95fde5934e",name:"secondary-nav",onSlotchange:this.collectNavItems}))))),t("main",{key:"312d84770df35ead51597b68df8c34c61ac75ac1",class:"shell-layout__main",id:"main-content"},t("slot",{key:"ea66379740d887bfdb6691d778d91af862eb8cda"}))))}get el(){return this}static get watchers(){return{enableSecondaryNavGridLayout:[{watchEnableSecondaryNavGridLayout:0}],mobileNavigationActive:[{watchMobileNavigationState:0}],navigationCollapsed:[{watchNavigationCollapsed:0}]}}static get style(){return'.sc-swirl-shell-layout-h{--swirl-shell-background:var(--s-surface-sunken-default);--swirl-shell-text-color:var(--s-text-default);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:4rem;--swirl-shell-extended-nav-width:18rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;overflow:hidden;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.1s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:"nav main"}@media (prefers-reduced-motion){.shell-layout.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);-moz-column-gap:var(--s-space-8);column-gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:"header header header"       "nav main sidebar"}}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout{border-bottom:none;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-action-primary-hovered)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-action-primary-pressed)}.shell-layout--branded-header.sc-swirl-shell-layout .shell-layout__header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-action-primary-default)}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{scrollbar-width:none}.shell-layout--navigation-collapsed.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout::-webkit-scrollbar{width:0;background:transparent;-webkit-appearance:none}}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{max-width:100%;max-height:3rem;flex-basis:100%}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout--has-secondary-nav.sc-swirl-shell-layout .shell-layout__secondary-nav.sc-swirl-shell-layout{display:block}.shell-layout--secondary-nav-collapsed.sc-swirl-shell-layout .shell-layout__secondary-nav-items.sc-swirl-shell-layout{display:none}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;width:calc(100% + var(--s-space-8));padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;z-index:9;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;padding-left:var(--s-space-2);flex-basis:8rem;flex-shrink:0;align-items:center;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{--swirl-ghost-button-background-default:var(--s-surface-sunken-default);--swirl-ghost-button-background-hovered:var(--s-surface-sunken-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-sunken-pressed);display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>a{display:flex}.shell-layout__logo.sc-swirl-shell-layout-s>a img,.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{position:relative;width:2.25rem;height:2.25rem;padding:var(--s-space-8);flex-shrink:0;border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:var(--s-surface-sunken-default);font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-sunken-hovered)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-sunken-pressed)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__header-tool.sc-swirl-shell-layout swirl-badge.sc-swirl-shell-layout{--swirl-badge-border-color:var(--s-surface-sunken-default);position:absolute;top:var(--s-space-2);right:var(--s-space-2);padding-right:var(--s-space-2);transform:translate3d(0.1875rem, 0, 0)}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;width:100%;max-width:18.75rem;color:var(--swirl-shell-text-color);background-color:var(--s-surface-overlay-default);transition:transform 0.1s, box-shadow 0.1s, width 0.1s;transform:translate3d(-100%, 0, 0);grid-area:nav}@media (prefers-reduced-motion){.shell-layout__nav.sc-swirl-shell-layout{transition:none}}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:relative;max-width:none;padding-top:0;padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);background-color:var(--swirl-shell-background);transform:none;box-shadow:none;inset:auto}}.shell-layout__mobile-header.sc-swirl-shell-layout{display:flex;min-height:3.5rem;margin-bottom:var(--s-space-8);padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:0.0625rem solid var(--s-border-default)}.shell-layout__mobile-header.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout{background-color:var(--s-surface-overlay-default)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:var(--s-surface-overlay-hovered)}.shell-layout__mobile-header.sc-swirl-shell-layout .shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:var(--s-surface-overlay-pressed)}@media (min-width: 992px){.shell-layout__mobile-header.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-header-tools.sc-swirl-shell-layout{display:flex;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout{padding:var(--s-space-8)}.shell-layout__nav-body.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav-body.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav-body.sc-swirl-shell-layout{padding:0}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.1s;inset:0}.shell-layout__secondary-nav.sc-swirl-shell-layout{display:none}.shell-layout__secondary-nav-items.sc-swirl-shell-layout-s>ul,.shell-layout__secondary-nav-items .sc-swirl-shell-layout-s>ul{display:flex;flex-direction:column;gap:var(--s-space-2)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul{flex-wrap:wrap;flex-direction:row;gap:var(--s-space-16)}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.sc-swirl-shell-layout-s>ul>*,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view .sc-swirl-shell-layout-s>ul>*{min-width:0;max-height:none}.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul,.shell-layout:not(.shell-layout--navigation-collapsed) .shell-layout__secondary-nav-items--grid-view.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul{row-gap:var(--s-space-16);-moz-column-gap:0;column-gap:0}.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul,.shell-layout--navigation-collapsed .shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul{gap:var(--s-space-16)}.shell-layout__secondary-nav-items--tiled.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--tiled .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(50% - var(--s-space-8))}.shell-layout__secondary-nav-items--app-icon.sc-swirl-shell-layout-s>ul>*,.shell-layout__secondary-nav-items--app-icon .sc-swirl-shell-layout-s>ul>*{flex-basis:calc(100% / 3)}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;background-color:var(--s-background-default);grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{width:calc(100% + var(--s-space-8));border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm)}}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-no-overflow-after-transition{0%{overflow:initial}99%{overflow:initial}100%{overflow:hidden}}'}},[262,"swirl-shell-layout",{brandedHeader:[4,"branded-header"],browserBackButtonLabel:[1,"browser-back-button-label"],browserForwardButtonLabel:[1,"browser-forward-button-label"],collapseNavigationButtonLabel:[1,"collapse-navigation-button-label"],enableSecondaryNavGridLayout:[4,"enable-secondary-nav-grid-layout"],secondaryNavGridLayoutVariant:[1,"secondary-nav-grid-layout-variant"],expandNavigationButtonLabel:[1,"expand-navigation-button-label"],gridNavLayoutToggleLabel:[1,"grid-nav-layout-toggle-label"],hideMobileNavigationButtonLabel:[1,"hide-mobile-navigation-button-label"],listNavLayoutToggleLabel:[1,"list-nav-layout-toggle-label"],navigationLabel:[1,"navigation-label"],secondaryNavCollapseLabel:[1,"secondary-nav-collapse-label"],secondaryNavExpandLabel:[1,"secondary-nav-expand-label"],skipLinkLabel:[1,"skip-link-label"],isDesktopViewport:[32],mobileNavigationActive:[32],navigationCollapsed:[32],secondaryNavCollapsed:[32],secondaryNavView:[32],showMobileNavigation:[64],hideMobileNavigation:[64]},[[8,"keydown","onWindowKeyDown"],[9,"resize","onWindowResize"]],{enableSecondaryNavGridLayout:[{watchEnableSecondaryNavGridLayout:0}],mobileNavigationActive:[{watchMobileNavigationState:0}],navigationCollapsed:[{watchNavigationCollapsed:0}]}]),le=ee,ae=function(){"undefined"!=typeof customElements&&["swirl-shell-layout","swirl-box","swirl-button","swirl-icon-arrow-back","swirl-icon-arrow-forward","swirl-icon-dock-left-collapse","swirl-icon-dock-left-expand","swirl-icon-double-arrow-left","swirl-separator","swirl-stack","swirl-tooltip","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-shell-layout":customElements.get(s(e))||customElements.define(s(e),ee);break;case"swirl-box":customElements.get(s(e))||n();break;case"swirl-button":customElements.get(s(e))||c();break;case"swirl-icon-arrow-back":customElements.get(s(e))||d();break;case"swirl-icon-arrow-forward":customElements.get(s(e))||u();break;case"swirl-icon-dock-left-collapse":customElements.get(s(e))||h();break;case"swirl-icon-dock-left-expand":customElements.get(s(e))||f();break;case"swirl-icon-double-arrow-left":customElements.get(s(e))||y();break;case"swirl-separator":customElements.get(s(e))||v();break;case"swirl-stack":customElements.get(s(e))||b();break;case"swirl-tooltip":customElements.get(s(e))||w();break;case"swirl-visually-hidden":customElements.get(s(e))||p()}}))};export{le as SwirlShellLayout,ae as defineCustomElement}