@aurodesignsystem-dev/auro-drawer 0.0.0-pr132.0 → 0.0.0-pr134.0

package/demo/auro-drawer.min.js

@@ -2452,7 +2452,7 @@ class AuroFloatingUI {
 var colorCss$1 = i$5`:host([onbackdrop]) .backdrop{background:var(--ds-auro-floater-backdrop-modal-background-color)}::slotted(*){background:var(--ds-auro-floater-container-background-color);color:var(--ds-auro-floater-container-text-color)}
 `;
 
-var styleCss$1 = i$5`:host{position:absolute;z-index:var(--ds-depth-overlay, 200);display:none;flex-direction:column;opacity:0;transition:opacity .3s ease-in-out,display .3s;transition-behavior:allow-discrete;will-change:opacity}.container{display:inline-block;width:100%;height:100%}.container ::slotted(:only-child){z-index:var(--ds-depth-modal, 300);box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15))}:host([onbackdrop]){overflow:hidden}:host([onbackdrop]) .backdrop{position:absolute;inset:0}:host([data-show]){display:block;opacity:1}@starting-style{:host([data-show]){opacity:0}}:host([data-show][modal]){pointer-events:initial}:host([isfullscreen]){width:100%;height:100%}:host([isfullscreen]) .container{overflow:auto;width:100%;height:100%}
+var styleCss$1 = i$5`:host{position:absolute;z-index:var(--ds-depth-overlay, 200);display:none;flex-direction:column;opacity:0;transition:opacity .3s ease-in-out,display .3s;transition-behavior:allow-discrete;will-change:opacity}.util_displayHiddenVisually{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog.container{background-color:transparent;max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0);display:inline-block;width:100%;height:100%}dialog.container::backdrop{background:var(--auro-drawer-backdrop-background, transparent);backdrop-filter:var(--auro-drawer-backdrop-filter, none);opacity:var(--auro-drawer-backdrop-opacity, 1);transition:var(--auro-drawer-backdrop-transition, opacity .3s ease)}dialog.container .backdrop{position:fixed;inset:0;pointer-events:none}dialog.container ::slotted(:only-child){z-index:var(--ds-depth-modal, 300);box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15))}:host([data-show]){display:block;opacity:1}@starting-style{:host([data-show]){opacity:0}}:host([data-show][modal]){pointer-events:initial}:host([isfullscreen]){width:100%;height:100%}:host([isfullscreen]) dialog.container{overflow:auto;width:100%;height:100%}
 `;
 
 var tokensCss$1 = i$5`:host{--ds-auro-floater-backdrop-modal-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-floater-container-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-floater-container-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
@@ -2469,6 +2469,23 @@ class AuroFloaterBib extends i$2 {
      * @private
      */
     this._mobileBreakpointValue = undefined;
+
+    /**
+     * @private
+     * Bound reference to the touchmove handler so it can be removed later.
+     */
+    this._boundTouchMoveHandler = undefined;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Text used to label the dialog for screen readers via aria-labelledby.
+       */
+      bibLabel: {
+        type: String,
+      },
+    };
   }
 
   static get styles() {
@@ -2481,15 +2498,150 @@ class AuroFloaterBib extends i$2 {
       "auro-floater-bib",
     );
 
-    this.backdrop = this.shadowRoot.querySelector(".backdrop");
+    this.dialog = this.shadowRoot.querySelector("dialog");
+
+    // Always prevent native dialog close on Escape; re-dispatch as a composed
+    // event so AuroDrawer can decide whether to honour it based on `modal`.
+    this.dialog.addEventListener("cancel", (e) => {
+      e.preventDefault();
+      this.dispatchEvent(
+        new Event("dialog-cancel", { bubbles: true, composed: true }),
+      );
+    });
+
+    // Re-dispatch keydown events that stopped at the dialog boundary so that
+    // slotted consumer keyboard handlers outside the shadow DOM still receive them.
+    this.dialog.addEventListener("keydown", (e) => {
+      if (e.target !== this.dialog) {
+        return;
+      }
+      this.dialog.dispatchEvent(
+        new KeyboardEvent(e.type, { ...e, bubbles: true, composed: true }),
+      );
+    });
+
+    // Clicks on the empty dialog area (outside the drawer panel) target the
+    // dialog element directly; clicks inside the panel bubble up from a child.
+    this.dialog.addEventListener("click", (e) => {
+      if (e.target === this.dialog) {
+        this.dispatchEvent(new Event("dialog-backdrop-click", { bubbles: true, composed: true }));
+      }
+    });
+  }
+
+  /**
+   * Opens the dialog.
+   * Uses showModal() for standard/modal drawers (native focus containment, top-layer).
+   * Uses setAttribute('open') for nested drawers to keep positional CSS intact.
+   * @param {{ nested?: boolean }} [options]
+   */
+  async showDialog({ nested = false } = {}) {
+    // firstUpdated() may not have run yet on initial render — wait for it.
+    if (!this.dialog) {
+      await this.updateComplete;
+    }
+    if (!this.dialog) {
+      return;
+    }
+
+    if (nested) {
+      this.dialog.setAttribute("open", "");
+    } else {
+      // Lock page scroll for the entire duration the dialog is open.
+      // Using position:fixed on <body> is the only reliable way to prevent
+      // ALL scroll vectors — including VoiceOver three-finger swipe, which
+      // bypasses both overflow:hidden and touchmove preventDefault.
+      // We capture the current scrollY so we can restore position on close.
+      this._savedScrollY = window.scrollY;
+      document.body.style.position = 'fixed';
+      document.body.style.top = `-${this._savedScrollY}px`;
+      document.body.style.width = '100%';
+      document.body.style.overflow = 'hidden';
+      document.documentElement.style.overflow = 'hidden';
+      this._scrollLocked = true;
+
+      this.dialog.showModal();
+
+      this._lockTouchScroll();
+    }
+  }
+
+  /**
+   * Closes the dialog and releases touch-scroll lock.
+   */
+  hideDialog() {
+    // Restore scroll immediately — don't wait for dialog.close().
+    this._restorePageScroll();
+    this._unlockTouchScroll();
+
+    if (this.dialog?.open) {
+      setTimeout(() => {
+        this.dialog.close();
+      }, 300);
+    }
+  }
+
+  /**
+   * Restores page scroll that was locked during showDialog().
+   * Safe to call multiple times — only acts when a lock is active.
+   * @private
+   */
+  _restorePageScroll() {
+    if (this._scrollLocked) {
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.width = '';
+      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
+      window.scrollTo(0, this._savedScrollY || 0);
+      this._savedScrollY = undefined;
+      this._scrollLocked = false;
+    }
+  }
+
+  /**
+   * Locks page-level touch scroll while the drawer is open.
+   * Walks composedPath() so scrollable children inside the dialog still scroll.
+   * @private
+   */
+  _lockTouchScroll() {
+    if (this._boundTouchMoveHandler) {
+      return;
+    }
+    this._boundTouchMoveHandler = (e) => {
+      const path = e.composedPath();
+      const insideScrollable = path.some(
+        (el) => el !== document && el.scrollHeight > el.clientHeight,
+      );
+      if (!insideScrollable) {
+        e.preventDefault();
+      }
+    };
+    document.addEventListener("touchmove", this._boundTouchMoveHandler, {
+      passive: false,
+    });
+  }
+
+  /**
+   * Removes the touch-scroll lock.
+   * @private
+   */
+  _unlockTouchScroll() {
+    if (this._boundTouchMoveHandler) {
+      document.removeEventListener("touchmove", this._boundTouchMoveHandler, {
+        passive: false,
+      });
+      this._boundTouchMoveHandler = undefined;
+    }
   }
 
   render() {
     return u$2`
-      <div class="container">
+      <dialog class="container" aria-labelledby="dialogLabel">
+        <span id="dialogLabel" class="util_displayHiddenVisually" aria-hidden="true">${this.bibLabel || ""}</span>
         <div class="backdrop" part="backdrop"></div>
         <slot></slot>
-      </div>
+      </dialog>
     `;
   }
 }
@@ -2587,8 +2739,10 @@ class AuroFloater extends i$2 {
     if (changedProperties.has("isPopoverVisible")) {
       if (this.isPopoverVisible) {
         this.floater.showBib();
+        this.bib?.showDialog({ nested: this.nested });
       } else {
         this.floater.hideBib();
+        this.bib?.hideDialog();
       }
     }
   }
@@ -2704,85 +2858,209 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
       </div>
     `}}
 
-// Do not add auro elements to this unless absolutely necessary
+// Selectors for focusable elements
 const FOCUSABLE_SELECTORS = [
-  "a[href]",
-  "button:not([disabled])",
-  "textarea:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
   '[role="tab"]:not([disabled])',
   '[role="link"]:not([disabled])',
   '[role="button"]:not([disabled])',
   '[tabindex]:not([tabindex="-1"])',
-  '[contenteditable]:not([contenteditable="false"])',
+  '[contenteditable]:not([contenteditable="false"])'
 ];
 
+// List of custom components that are known to be focusable
 const FOCUSABLE_COMPONENTS = [
-  "auro-checkbox",
-  "auro-radio",
-  "auro-dropdown",
-  "auro-button",
-  "auro-combobox",
-  "auro-input",
-  "auro-counter",
-  "auro-menu",
-  "auro-select",
-  "auro-datepicker",
-  "auro-hyperlink",
-  "auro-accordion",
+  'auro-checkbox',
+  'auro-radio',
+  'auro-dropdown',
+  'auro-button',
+  'auro-combobox',
+  'auro-input',
+  'auro-counter',
+  'auro-menu',
+  'auro-select',
+  'auro-datepicker',
+  'auro-hyperlink',
+  'auro-accordion',
 ];
 
+/**
+ * Determines if a given element is a custom focusable component.
+ * Returns true if the element matches a known focusable component and is not disabled.
+ *
+ * @param {HTMLElement} element The element to check for focusability.
+ * @returns {boolean} True if the element is a focusable custom component, false otherwise.
+ */
+function isFocusableComponent(element) {
+  const componentName = element.tagName.toLowerCase();
+
+  // Guard Clause: Element is a focusable component
+  if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
+
+  // Guard Clause: Element is not disabled
+  if (element.hasAttribute('disabled')) return false;
+
+  // Guard Clause: The element is a hyperlink and has no href attribute
+  if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
+
+  // If all guard clauses pass, the element is a focusable component
+  return true;
+}
+
+/**
+ * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
+ * Returns a unique, ordered array of elements that can receive focus.
+ *
+ * @param {HTMLElement} container The container to search within
+ * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+ */
+function getFocusableElements(container) {
+  // Get elements in DOM order by walking the tree
+  const orderedFocusableElements = [];
+
+  // Define a recursive function to collect focusable elements in DOM order
+  const collectFocusableElements = (root) => {
+    // Check if current element is focusable
+    if (root.nodeType === Node.ELEMENT_NODE) {
+      // Check if this is a custom component that is focusable
+      const isComponentFocusable = isFocusableComponent(root);
+
+      if (isComponentFocusable) {
+        // Add the component itself as a focusable element and don't traverse its shadow DOM
+        orderedFocusableElements.push(root);
+        return; // Skip traversing inside this component
+      }
+
+      // Check if the element itself matches any selector
+      for (const selector of FOCUSABLE_SELECTORS) {
+        if (root.matches?.(selector)) {
+          orderedFocusableElements.push(root);
+          break; // Once we know it's focusable, no need to check other selectors
+        }
+      }
+
+      // Process shadow DOM only for non-Auro components
+      if (root.shadowRoot) {
+        // Process shadow DOM children in order
+        if (root.shadowRoot.children) {
+          Array.from(root.shadowRoot.children).forEach(child => {
+            collectFocusableElements(child);
+          });
+        }
+      }
+
+      // Process slots and their assigned nodes in order
+      if (root.tagName === 'SLOT') {
+        const assignedNodes = root.assignedNodes({ flatten: true });
+        for (const node of assignedNodes) {
+          collectFocusableElements(node);
+        }
+      } else {
+        // Process light DOM children in order
+        if (root.children) {
+          Array.from(root.children).forEach(child => {
+            collectFocusableElements(child);
+          });
+        }
+      }
+    }
+  };
+
+  // Start the traversal from the container
+  collectFocusableElements(container);
+
+  // Remove duplicates that might have been collected through different paths
+  // while preserving order
+  const uniqueElements = [];
+  const seen = new Set();
+
+  for (const element of orderedFocusableElements) {
+    if (!seen.has(element)) {
+      seen.add(element);
+      uniqueElements.push(element);
+    }
+  }
+
+  return uniqueElements;
+}
+
+/**
+ * FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
+ * It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
+ */
 class FocusTrap {
+  /**
+   * Creates a new FocusTrap instance for the given container element.
+   * Initializes event listeners and prepares the container for focus management.
+   *
+   * @param {HTMLElement} container The DOM element to trap focus within.
+   * @throws {Error} If the provided container is not a valid HTMLElement.
+   */
   constructor(container) {
     if (!container || !(container instanceof HTMLElement)) {
       throw new Error("FocusTrap requires a valid HTMLElement.");
     }
 
     this.container = container;
-    this.tabDirection = "forward"; // or 'backward'
+    this.tabDirection = 'forward'; // or 'backward'
 
     this._init();
   }
 
+  /**
+   * Initializes the focus trap by setting up event listeners and attributes on the container.
+   * Prepares the container for focus management, including support for shadow DOM and inert attributes.
+   *
+   * @private
+   */
   _init() {
-    // Support for shadow DOM / web components
-    this.container.shadowRoot || this.container;
 
     // Add inert attribute to prevent focusing programmatically as well (if supported)
-    if ("inert" in HTMLElement.prototype) {
+    if ('inert' in HTMLElement.prototype) {
       this.container.inert = false; // Ensure the container isn't inert
-      this.container.setAttribute("data-focus-trap-container", true); // Mark for identification
+      this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
     }
 
     // Track tab direction
-    this.container.addEventListener("keydown", this._onKeydown);
+    this.container.addEventListener('keydown', this._onKeydown);
   }
 
+  /**
+   * Handles keydown events to manage tab navigation within the container.
+   * Ensures that focus wraps around when reaching the first or last focusable element.
+   *
+   * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
+   * @private
+   */
   _onKeydown = (e) => {
-    if (e.key === "Tab") {
+    
+    if (e.key === 'Tab') {
+
       // Set the tab direction based on the key pressed
-      this.tabDirection = e.shiftKey ? "backward" : "forward";
+      this.tabDirection = e.shiftKey ? 'backward' : 'forward';
 
       // Get the active element(s) in the document and shadow root
       // This will include the active element in the shadow DOM if it exists
       // Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
-      const actives = [
-        document.activeElement,
-        ...(document.activeElement.shadowRoot && [
-          document.activeElement.shadowRoot.activeElement,
-        ]),
-      ];
+      let activeElement = document.activeElement;
+      const actives =  [activeElement];
+      while (activeElement?.shadowRoot?.activeElement) {
+        actives.push(activeElement.shadowRoot.activeElement);
+        activeElement = activeElement.shadowRoot.activeElement;
+      }
 
       // Update the focusable elements
       const focusables = this._getFocusableElements();
 
       // If we're at either end of the focusable elements, wrap around to the other end
       const focusIndex =
-        actives.includes(focusables[0]) && this.tabDirection === "backward"
+        (actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
           ? focusables.length - 1
-          : actives.includes(focusables[focusables.length - 1]) &&
-              this.tabDirection === "forward"
+          : actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
             ? 0
             : null;
 
@@ -2794,100 +3072,50 @@ class FocusTrap {
     }
   };
 
+  /**
+   * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
+   * Returns a unique, ordered array of elements that can receive focus.
+   *
+   * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+   * @private
+   */
   _getFocusableElements() {
-    // Get elements in DOM order by walking the tree
-    const orderedFocusableElements = [];
-
-    // Define a recursive function to collect focusable elements in DOM order
-    const collectFocusableElements = (root) => {
-      // Check if current element is focusable
-      if (root.nodeType === Node.ELEMENT_NODE) {
-        // Check if this is one of our special Auro components
-        const isAuroComponent = FOCUSABLE_COMPONENTS.some((component) =>
-          root.tagName.toLowerCase()?.match(component),
-        );
-
-        if (isAuroComponent) {
-          // Add the component itself as a focusable element and don't traverse its shadow DOM
-          orderedFocusableElements.push(root);
-          return; // Skip traversing inside this component
-        }
-
-        // Check if the element itself matches any selector
-        for (const selector of FOCUSABLE_SELECTORS) {
-          if (
-            root.matches?.(selector) &&
-            !root.classList.contains("focus-bookend")
-          ) {
-            orderedFocusableElements.push(root);
-            break; // Once we know it's focusable, no need to check other selectors
-          }
-        }
-
-        // Process shadow DOM only for non-Auro components
-        if (root.shadowRoot) {
-          // Process shadow DOM children in order
-          if (root.shadowRoot.children) {
-            Array.from(root.shadowRoot.children).forEach((child) => {
-              collectFocusableElements(child);
-            });
-          }
-        }
-
-        // Process slots and their assigned nodes in order
-        if (root.tagName === "SLOT") {
-          const assignedNodes = root.assignedNodes({ flatten: true });
-          for (const node of assignedNodes) {
-            collectFocusableElements(node);
-          }
-        } else {
-          // Process light DOM children in order
-          if (root.children) {
-            Array.from(root.children).forEach((child) => {
-              collectFocusableElements(child);
-            });
-          }
-        }
-      }
-    };
-
-    // Start the traversal from the container
-    collectFocusableElements(this.container);
-
-    // Remove duplicates that might have been collected through different paths
-    // while preserving order
-    const uniqueElements = [];
-    const seen = new Set();
-
-    for (const element of orderedFocusableElements) {
-      if (!seen.has(element)) {
-        seen.add(element);
-        uniqueElements.push(element);
-      }
-    }
-
-    return uniqueElements;
+    // Use the imported utility function to get focusable elements
+    const elements = getFocusableElements(this.container);
+    
+    // Filter out any elements with the 'focus-bookend' class
+    return elements;
   }
 
+  /**
+   * Moves focus to the first focusable element within the container.
+   * Useful for setting initial focus when activating the focus trap.
+   */
   focusFirstElement() {
     const focusables = this._getFocusableElements();
     if (focusables.length) focusables[0].focus();
   }
 
+  /**
+   * Moves focus to the last focusable element within the container.
+   * Useful for setting focus when deactivating or cycling focus in reverse.
+   */
   focusLastElement() {
     const focusables = this._getFocusableElements();
     if (focusables.length) focusables[focusables.length - 1].focus();
   }
 
+  /**
+   * Removes event listeners and attributes added by the focus trap.
+   * Call this method to clean up when the focus trap is no longer needed.
+   */
   disconnect() {
-    // Remove the tabIndex we set
-    this.container.removeAttribute("tabIndex");
 
-    if (this.container.hasAttribute("data-focus-trap-container")) {
-      this.container.removeAttribute("data-focus-trap-container");
+    if (this.container.hasAttribute('data-focus-trap-container')) {
+      this.container.removeAttribute('data-focus-trap-container');
     }
 
-    this.container.removeEventListener("keydown", this._onKeydown);
+    this.container.removeEventListener('keydown', this._onKeydown);
   }
 }
 
@@ -2898,7 +3126,7 @@ var iconVersion = '9.1.1';
 var colorCss = i$5`.wrapper{background:var(--ds-auro-drawer-container-color)}::slotted(*){color:var(--ds-auro-drawer-text-color)}
 `;
 
-var styleCss = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:contents;--insetPaddingXl: var(--ds-size-400, 2rem);--insetPaddingXxl: var(--ds-size-600, 3rem);--insetPaddingXxxl: var(--ds-size-800, 4rem)}:host .wrapper{position:absolute;overflow:auto;width:100%;height:100%;box-sizing:border-box;box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15));transition:transform .3s ease-in-out,display .3s;transition-behavior:allow-discrete;will-change:transform}:host .header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ds-size-200, 1rem)}:host .footer{display:flex;align-items:flex-start;justify-content:flex-end;margin-top:var(--insetPaddingXl)}:host .heading{margin-block-start:0}:host(:not([unformatted])) .wrapper{padding:var(--insetPaddingXl)}@media screen and (min-width: 1024px){:host(:not([unformatted])) .wrapper{padding:var(--insetPaddingXxxl)}}#closeButton{margin-left:auto}#closeButton:hover{cursor:pointer}#closeButton .util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}:host([placement=right]) .wrapper,:host([placement=left]) .wrapper{max-width:90%}:host([placement=right]),:host([placement=left]){overflow-x:hidden}:host([placement=top]),:host([placement=bottom]){width:100%}:host([placement=top]) .wrapper,:host([placement=bottom]) .wrapper{max-height:90%}:host([placement=right]) .wrapper{right:0;transform:translate3d(100%,0,0)}:host([placement=left]) .wrapper{transform:translate(-100%)}:host([placement=top]) .wrapper{transform:translateY(-100%)}:host([placement=bottom]) .wrapper{bottom:0;transform:translate3d(0,100%,0)}:host([visible]) .wrapper{transform:translateZ(0)}@starting-style{:host([visible][placement=right]) .wrapper{transform:translate(100%)}:host([visible][placement=left]) .wrapper{transform:translate(-100%)}:host([visible][placement=top]) .wrapper{transform:translateY(-100%)}:host([visible][placement=bottom]) .wrapper{transform:translate3d(0,100%,0)}}@media screen and (min-width: 768px){:host([size=sm][placement=left]) .wrapper,:host([size=sm][placement=right]) .wrapper{max-width:40%}}@media screen and (min-width: 1024px){:host([size=sm][placement=left]) .drawer,:host([size=sm][placement=right]) .drawer{max-width:740px}}@media screen and (min-width: 768px){:host([size=md][placement=left]) .wrapper,:host([size=md][placement=right]) .wrapper{max-width:70%}}@media screen and (min-width: 1024px){:host([size=md][placement=left]) .wrapper,:host([size=md][placement=right]) .wrapper{max-width:986px}}:host([size=sm][placement=top]:not([stretch])) .wrapper,:host([size=sm][placement=bottom]:not([stretch])) .wrapper{max-height:30%}:host([size=md][placement=top]:not([stretch])) .wrapper,:host([size=md][placement=bottom]:not([stretch])) .wrapper{max-height:50%}:host([stretch]) .wrapper{max-width:100%;max-height:100%}
+var styleCss = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:contents;--insetPaddingXl: var(--ds-size-400, 2rem);--insetPaddingXxl: var(--ds-size-600, 3rem);--insetPaddingXxxl: var(--ds-size-800, 4rem)}:host .wrapper{position:absolute;overflow:auto;width:100%;height:100%;box-sizing:border-box;transition:transform;box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15));will-change:transform}:host .header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ds-size-200, 1rem)}:host .footer{display:flex;align-items:flex-start;justify-content:flex-end;margin-top:var(--insetPaddingXl)}:host .heading{margin-block-start:0}:host(:not([unformatted])) .wrapper{padding:var(--insetPaddingXl)}@media screen and (min-width: 1024px){:host(:not([unformatted])) .wrapper{padding:var(--insetPaddingXxxl)}}#closeButton{margin-left:auto}#closeButton:hover{cursor:pointer}#closeButton .util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}:host([placement=right]) .wrapper,:host([placement=left]) .wrapper{max-width:90%}:host([placement=right]),:host([placement=left]){overflow-x:hidden}:host([placement=top]),:host([placement=bottom]){width:100%}:host([placement=top]) .wrapper,:host([placement=bottom]) .wrapper{max-height:90%}:host([placement=right]) .wrapper{right:100%}:host([visible][placement=right]) .wrapper{animation:slideInFromRight .3s forwards;animation-delay:.05s}:host([closing][placement=right]) .wrapper{animation:slideOutToRight .3s forwards}@keyframes slideInFromRight{0%{transform:translate(100%);right:0}to{transform:translateZ(0);right:0}}@keyframes slideOutToRight{0%{transform:translateZ(0);right:0}to{transform:translate(100%);right:0}}:host([placement=left]) .wrapper{left:-100%}:host([visible][placement=left]) .wrapper{animation:slideInFromLeft .3s forwards;animation-delay:.05s}:host([closing][placement=left]) .wrapper{animation:slideOutToLeft .3s forwards}@keyframes slideInFromLeft{0%{transform:translate(-100%);left:0}to{transform:translateZ(0);left:0}}@keyframes slideOutToLeft{0%{transform:translateZ(0);left:0}to{transform:translate(-100%);left:0}}:host([placement=top]) .wrapper{top:-100%}:host([visible][placement=top]) .wrapper{animation:slideInFromTop .3s forwards;animation-delay:.05s}:host([closing][placement=top]) .wrapper{animation:slideOutToTop .3s forwards}@keyframes slideInFromTop{0%{transform:translateY(-100%);top:0}to{transform:translateZ(0);top:0}}@keyframes slideOutToTop{0%{transform:translateZ(0);top:0}to{transform:translateY(-100%);top:0}}:host([placement=bottom]) .wrapper{bottom:100%}:host([visible][placement=bottom]) .wrapper{animation:slideInFromBottom .3s forwards;animation-delay:.05s}:host([closing][placement=bottom]) .wrapper{animation:slideOutToBottom .3s forwards}@keyframes slideInFromBottom{0%{transform:translateY(100%);bottom:0}to{transform:translateZ(0);bottom:0}}@keyframes slideOutToBottom{0%{transform:translateZ(0);bottom:0}to{transform:translateY(100%);bottom:0}}@media screen and (min-width: 768px){:host([size=sm][placement=left]) .wrapper,:host([size=sm][placement=right]) .wrapper{max-width:40%}}@media screen and (min-width: 1024px){:host([size=sm][placement=left]) .drawer,:host([size=sm][placement=right]) .drawer{max-width:740px}}@media screen and (min-width: 768px){:host([size=md][placement=left]) .wrapper,:host([size=md][placement=right]) .wrapper{max-width:70%}}@media screen and (min-width: 1024px){:host([size=md][placement=left]) .wrapper,:host([size=md][placement=right]) .wrapper{max-width:986px}}:host([size=sm][placement=top]:not([stretch])) .wrapper,:host([size=sm][placement=bottom]:not([stretch])) .wrapper{max-height:30%}:host([size=md][placement=top]:not([stretch])) .wrapper,:host([size=md][placement=bottom]:not([stretch])) .wrapper{max-height:50%}:host([stretch]) .wrapper{max-width:100%;max-height:100%}
 `;
 
 var tokensCss = i$5`:host{--ds-auro-drawer-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-drawer-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
@@ -2973,6 +3201,11 @@ class AuroDrawerContent extends i$2 {
       visible: {
         type: Boolean,
         reflect: true
+      },
+
+      closing: {
+        type: Boolean,
+        reflect: true
       }
     };
   }
@@ -2985,27 +3218,33 @@ class AuroDrawerContent extends i$2 {
     this.dispatchEvent(new CustomEvent("close-click"));
   }
 
-  handleWrapperTransitionEnd() {
-    if (!this.visible) return;
-    if (!this.focusTrap) return;
-    this.focusTrap.focusFirstElement();
-  }
-
   updated(changedProperties) {
     if (changedProperties.has("visible")) {
       if (this.visible) {
+        // Reset CSS animation so it replays each time the drawer opens
+        const wrapper = this.shadowRoot.querySelector('.wrapper');
+        if (wrapper) {
+          wrapper.style.animation = 'none';
+          // Force reflow to restart the animation
+          void wrapper.offsetHeight; // eslint-disable-line no-void
+          wrapper.style.animation = '';
+        }
+
         if (!this.focusTrap) {
           this.focusTrap = new FocusTrap(this);
         }
-        this.prevActiveElement = document.activeElement;
-        if (this.prevActiveElement === document.body && this.triggerElement) {
-          this.prevActiveElement = this.triggerElement;
-        }
+        this.prevActiveElement = this.triggerElement || document.activeElement;
+        // Move focus to the first focusable element inside the drawer.
+        // rAF lets showModal()'s native focus assignment settle before we override.
+        requestAnimationFrame(() => {
+          this.focusTrap?.focusFirstElement();
+        });
       } else {
-        if (this.prevActiveElement) {
-          this.prevActiveElement.focus();
-          this.prevActiveElement = undefined;
-        }
+        // Native dialog.close() fires after a 300ms delay (see auro-floater-bib hideDialog).
+        // Defer focus restoration so it runs after the dialog releases focus.
+        const target = this.prevActiveElement;
+        this.prevActiveElement = undefined;
+        setTimeout(() => target?.focus(), 350);
 
         if (this.focusTrap) {
           this.focusTrap.disconnect();
@@ -3013,10 +3252,13 @@ class AuroDrawerContent extends i$2 {
         }
       }
     }
-  }
 
-  firstUpdated() {
-    super.firstUpdated();
+    if (changedProperties.has("closing") && this.closing) {
+      // Reset closing state after animation completes
+      setTimeout(() => {
+        this.closing = false;
+      }, 300);
+    }
   }
 
   render() {
@@ -3024,7 +3266,7 @@ class AuroDrawerContent extends i$2 {
       <!-- Hidden slot for close button aria-label -->
       <slot name="ariaLabel.drawer.close" hidden @slotchange=${this.requestUpdate}></slot>
 
-      <div class="wrapper" tabindex="-1" part="drawer-wrapper" @transitionend=${this.handleWrapperTransitionEnd}>
+      <div class="wrapper" tabindex="-1" part="drawer-wrapper">
         ${
           this.unformatted
             ? ""
@@ -3121,12 +3363,17 @@ const CONFIG = {
  *
  * @fires auroDrawer-toggled - Event fired when the drawer is toggled open or closed.
  *
- * @csspart drawer-backdrop - to style the backdrop behind the the content wrapper.
+ * @csspart {deprecated} drawer-backdrop - DEPRECATED - To migrate to the token approach, set `display: none` on this part and use the `--auro-drawer-backdrop-*` CSS custom properties instead.
  * @csspart drawer-wrapper - to style the content wrapper.
  * @csspart drawer-header - to style the header.
  * @csspart drawer-content - to style the container of the drawer content.
  * @csspart drawer-footer - to style the footer.
  * @csspart close-button - to style the close button.
+ *
+ * @cssprop [--auro-drawer-backdrop-background=transparent] - Background of the `::backdrop` pseudo-element. In modal/backdrop mode the component sets this to the design-system scrim token; consumers can override it.
+ * @cssprop [--auro-drawer-backdrop-filter=none] - `backdrop-filter` applied to the `::backdrop` pseudo-element (e.g. `blur(4px)`).
+ * @cssprop [--auro-drawer-backdrop-opacity=1] - Opacity of the `::backdrop` pseudo-element.
+ * @cssprop [--auro-drawer-backdrop-transition=opacity 0.3s ease] - Transition applied to the `::backdrop` pseudo-element (e.g. `opacity 0.3s ease`).
  */
 class AuroDrawer extends AuroFloater {
   constructor() {
@@ -3289,13 +3536,33 @@ class AuroDrawer extends AuroFloater {
     );
 
     this.drawerBib = document.createElement("auro-drawer-content");
-    this.drawerBib.addEventListener("close-click", () =>
-      this.floater.hideBib(),
-    );
+    this.drawerBib.triggerElement = this.triggerElement;
+    this.drawerBib.addEventListener("close-click", () => {
+      this.bib?.hideDialog();
+      this.floater.hideBib();
+    });
     this.append(this.drawerBib);
 
     this.bib.setAttribute("exportparts", "backdrop:drawer-backdrop");
 
+    // Handle Escape key via native dialog cancel event.
+    // Always preventDefault in the bib; here we decide whether to actually close.
+    this.bib.addEventListener("dialog-cancel", () => {
+      if (this.modal) {
+        return; // Modal drawers ignore Escape.
+      }
+      this.floater.hideBib();
+    });
+
+    // Handle backdrop clicks — close unless this is a modal drawer.
+    this.bib.addEventListener("dialog-backdrop-click", () => {
+      if (this.modal) {
+        return; // Modal drawers require an explicit action to close.
+      }
+      this.bib?.hideDialog();
+      this.floater.hideBib();
+    });
+
     this.setupAria();
   }
 
@@ -3310,12 +3577,12 @@ class AuroDrawer extends AuroFloater {
         this.bib.getAttribute("id"),
       );
 
-      this.bib.setAttribute("aria-label", this.triggerElement.textContent);
-    }
-    this.bib.setAttribute("role", "dialog");
-    if (this.modal) {
-      this.bib.setAttribute("aria-modal", "true");
+      // Use bibLabel + aria-labelledby on the <dialog> instead of aria-label
+      // directly — iOS VoiceOver does not reliably read aria-label on <dialog>.
+      this.bib.bibLabel = this.triggerElement.textContent.trim();
     }
+    // role="dialog" and aria-modal are provided natively by the <dialog> element;
+    // do not set them manually here.
   }
 
   /**
@@ -3353,9 +3620,15 @@ class AuroDrawer extends AuroFloater {
 
     if (changedProperties.has("isPopoverVisible")) {
       this.drawerBib.visible = this.isPopoverVisible;
+      if (!this.isPopoverVisible) {
+        this.drawerBib.closing = true;
+      }
     }
 
     if (changedProperties.has("triggerElement")) {
+      if (this.drawerBib) {
+        this.drawerBib.triggerElement = this.triggerElement;
+      }
       this.setupAria();
     }
   }