@aurodesignsystem-dev/auro-drawer 0.0.0-pr134.0 → 0.0.0-pr136.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}.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 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 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,23 +2469,6 @@ 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() {
@@ -2498,150 +2481,15 @@ class AuroFloaterBib extends i$2 {
       "auro-floater-bib",
     );
 
-    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;
-    }
+    this.backdrop = this.shadowRoot.querySelector(".backdrop");
   }
 
   render() {
     return u$2`
-      <dialog class="container" aria-labelledby="dialogLabel">
-        <span id="dialogLabel" class="util_displayHiddenVisually" aria-hidden="true">${this.bibLabel || ""}</span>
+      <div class="container">
         <div class="backdrop" part="backdrop"></div>
         <slot></slot>
-      </dialog>
+      </div>
     `;
   }
 }
@@ -2739,10 +2587,8 @@ 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();
       }
     }
   }
@@ -2858,209 +2704,85 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
       </div>
     `}}
 
-// Selectors for focusable elements
+// Do not add auro elements to this unless absolutely necessary
 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
-      let activeElement = document.activeElement;
-      const actives =  [activeElement];
-      while (activeElement?.shadowRoot?.activeElement) {
-        actives.push(activeElement.shadowRoot.activeElement);
-        activeElement = activeElement.shadowRoot.activeElement;
-      }
+      const actives = [
+        document.activeElement,
+        ...(document.activeElement.shadowRoot && [
+          document.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]) || actives.includes(this.container)) && this.tabDirection === 'backward'
+        actives.includes(focusables[0]) && 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;
 
@@ -3072,50 +2794,100 @@ 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() {
-    // 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;
+    // 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;
   }
 
-  /**
-   * 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);
   }
 }
 
@@ -3126,7 +2898,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;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 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 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)}
@@ -3201,11 +2973,6 @@ class AuroDrawerContent extends i$2 {
       visible: {
         type: Boolean,
         reflect: true
-      },
-
-      closing: {
-        type: Boolean,
-        reflect: true
       }
     };
   }
@@ -3218,33 +2985,27 @@ 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 = 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();
-        });
+        this.prevActiveElement = document.activeElement;
+        if (this.prevActiveElement === document.body && this.triggerElement) {
+          this.prevActiveElement = this.triggerElement;
+        }
       } else {
-        // 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.prevActiveElement) {
+          this.prevActiveElement.focus();
+          this.prevActiveElement = undefined;
+        }
 
         if (this.focusTrap) {
           this.focusTrap.disconnect();
@@ -3252,13 +3013,10 @@ class AuroDrawerContent extends i$2 {
         }
       }
     }
+  }
 
-    if (changedProperties.has("closing") && this.closing) {
-      // Reset closing state after animation completes
-      setTimeout(() => {
-        this.closing = false;
-      }, 300);
-    }
+  firstUpdated() {
+    super.firstUpdated();
   }
 
   render() {
@@ -3266,7 +3024,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">
+      <div class="wrapper" tabindex="-1" part="drawer-wrapper" @transitionend=${this.handleWrapperTransitionEnd}>
         ${
           this.unformatted
             ? ""
@@ -3363,17 +3121,12 @@ const CONFIG = {
  *
  * @fires auroDrawer-toggled - Event fired when the drawer is toggled open or closed.
  *
- * @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-backdrop - to style the backdrop behind the the content wrapper.
  * @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() {
@@ -3536,33 +3289,13 @@ class AuroDrawer extends AuroFloater {
     );
 
     this.drawerBib = document.createElement("auro-drawer-content");
-    this.drawerBib.triggerElement = this.triggerElement;
-    this.drawerBib.addEventListener("close-click", () => {
-      this.bib?.hideDialog();
-      this.floater.hideBib();
-    });
+    this.drawerBib.addEventListener("close-click", () =>
+      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();
   }
 
@@ -3577,12 +3310,12 @@ class AuroDrawer extends AuroFloater {
         this.bib.getAttribute("id"),
       );
 
-      // 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();
+      this.bib.setAttribute("aria-label", this.triggerElement.textContent);
+    }
+    this.bib.setAttribute("role", "dialog");
+    if (this.modal) {
+      this.bib.setAttribute("aria-modal", "true");
     }
-    // role="dialog" and aria-modal are provided natively by the <dialog> element;
-    // do not set them manually here.
   }
 
   /**
@@ -3620,15 +3353,9 @@ 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();
     }
   }