@editora/ui-core 0.1.9 → 0.1.10

package/dist/drawer.cjs.js

@@ -0,0 +1,538 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const A=require("./ElementBase-1b301e7f.js"),d=require("./overlayManager-ece06517.js");require("./scroll-lock-48793569.js");const x='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',O=`
+  :host {
+    position: fixed;
+    inset: 0;
+    display: block;
+    pointer-events: none;
+    isolation: isolate;
+    z-index: 1200;
+    color-scheme: light dark;
+
+    --ui-drawer-overlay: color-mix(in srgb, #020617 56%, transparent);
+    --ui-drawer-bg: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-color-surface, #ffffff) 98%, transparent) 0%,
+      color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 20%, var(--ui-color-surface, #ffffff)) 100%
+    );
+    --ui-drawer-color: var(--ui-color-text, #0f172a);
+    --ui-drawer-muted: var(--ui-color-muted, #64748b);
+    --ui-drawer-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-drawer-border: 1px solid var(--ui-drawer-border-color);
+    --ui-drawer-shadow: none;
+    --ui-drawer-focus-ring: var(--ui-color-focus-ring, #2563eb);
+    --ui-drawer-control-bg: color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 90%, transparent);
+    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-primary, #2563eb) 10%, var(--ui-drawer-control-bg));
+    --ui-drawer-panel-backdrop: none;
+    --ui-drawer-inset: 0px;
+    --ui-drawer-width: min(420px, 94vw);
+    --ui-drawer-height: min(520px, 80vh);
+    --ui-drawer-radius: 16px;
+    --ui-drawer-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    --ui-drawer-header-padding: 16px 20px;
+    --ui-drawer-body-padding: 20px;
+    --ui-drawer-footer-padding: 14px 20px;
+    --ui-drawer-close-size: 32px;
+  }
+
+  :host([open]) {
+    pointer-events: auto;
+  }
+
+  .overlay {
+    position: absolute;
+    inset: 0;
+    background: var(--ui-drawer-overlay);
+    backdrop-filter: blur(4px) saturate(1.06);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--ui-drawer-transition);
+  }
+
+  :host([open]) .overlay {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .panel {
+    position: absolute;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    overflow: hidden;
+    background: var(--ui-drawer-bg);
+    backdrop-filter: var(--ui-drawer-panel-backdrop);
+    color: var(--ui-drawer-color);
+    border: var(--ui-drawer-border);
+    box-shadow: var(--ui-drawer-shadow);
+    outline: none;
+    opacity: 0;
+    transition:
+      transform var(--ui-drawer-transition),
+      opacity var(--ui-drawer-transition),
+      border-color var(--ui-drawer-transition),
+      box-shadow var(--ui-drawer-transition);
+  }
+
+  .panel::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 44%, transparent);
+    opacity: 0.72;
+  }
+
+  :host([open]) .panel {
+    opacity: 1;
+  }
+
+  .panel:focus-visible,
+  .close-btn:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--ui-drawer-focus-ring) 66%, transparent);
+    outline-offset: 2px;
+  }
+
+  .panel.side-left {
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: min(var(--ui-drawer-width), calc(100vw - (var(--ui-drawer-inset) * 2)));
+    border-left: none;
+    border-radius: 0 var(--ui-drawer-radius) var(--ui-drawer-radius) 0;
+    transform: translateX(-102%);
+  }
+
+  :host([open]) .panel.side-left {
+    transform: translateX(0);
+  }
+
+  .panel.side-right {
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: min(var(--ui-drawer-width), calc(100vw - (var(--ui-drawer-inset) * 2)));
+    border-right: none;
+    border-radius: var(--ui-drawer-radius) 0 0 var(--ui-drawer-radius);
+    transform: translateX(102%);
+  }
+
+  :host([open]) .panel.side-right {
+    transform: translateX(0);
+  }
+
+  .panel.side-top {
+    left: 0;
+    right: 0;
+    top: 0;
+    height: min(var(--ui-drawer-height), calc(100vh - (var(--ui-drawer-inset) * 2)));
+    border-top: none;
+    border-radius: 0 0 var(--ui-drawer-radius) var(--ui-drawer-radius);
+    transform: translateY(-102%);
+  }
+
+  :host([open]) .panel.side-top {
+    transform: translateY(0);
+  }
+
+  .panel.side-bottom {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: min(var(--ui-drawer-height), calc(100vh - (var(--ui-drawer-inset) * 2)));
+    border-bottom: none;
+    border-radius: var(--ui-drawer-radius) var(--ui-drawer-radius) 0 0;
+    transform: translateY(102%);
+  }
+
+  :host([open]) .panel.side-bottom {
+    transform: translateY(0);
+  }
+
+  .header,
+  .footer {
+    min-height: 56px;
+    display: grid;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .header {
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 12px;
+    padding: var(--ui-drawer-header-padding);
+    border-bottom: 1px solid color-mix(in srgb, var(--ui-drawer-border-color) 84%, transparent);
+    background: color-mix(in srgb, var(--ui-drawer-bg) 95%, #ffffff 5%);
+  }
+
+  .header.empty,
+  .footer.empty {
+    display: none;
+  }
+
+  .header-main {
+    min-width: 0;
+    display: grid;
+    gap: 6px;
+  }
+
+  .title {
+    margin: 0;
+    font-size: 18px;
+    line-height: 1.35;
+    font-weight: 680;
+    letter-spacing: -0.01em;
+    color: color-mix(in srgb, var(--ui-drawer-color) 96%, transparent);
+  }
+
+  .subtitle {
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--ui-drawer-muted);
+  }
+
+  .footer {
+    padding: var(--ui-drawer-footer-padding);
+    border-top: 1px solid color-mix(in srgb, var(--ui-drawer-border-color) 84%, transparent);
+    background: color-mix(in srgb, var(--ui-drawer-bg) 96%, #ffffff 4%);
+  }
+
+  .body {
+    min-height: 0;
+    overflow: auto;
+    padding: var(--ui-drawer-body-padding);
+    box-sizing: border-box;
+    background: color-mix(in srgb, var(--ui-drawer-bg) 99%, transparent);
+  }
+
+  .close-btn {
+    width: var(--ui-drawer-close-size);
+    height: var(--ui-drawer-close-size);
+    border-radius: 10px;
+    border: 1px solid color-mix(in srgb, var(--ui-drawer-border-color) 86%, transparent);
+    background: var(--ui-drawer-control-bg);
+    color: inherit;
+    display: inline-grid;
+    place-items: center;
+    cursor: pointer;
+    transition:
+      background-color 130ms ease,
+      transform 120ms ease,
+      border-color 130ms ease,
+      opacity 130ms ease;
+  }
+
+  .close-btn:hover {
+    background: var(--ui-drawer-control-bg-hover);
+    border-color: color-mix(in srgb, var(--ui-drawer-focus-ring) 32%, var(--ui-drawer-border-color));
+  }
+
+  .close-btn:active {
+    transform: translateY(1px);
+  }
+
+  .close-btn[hidden] {
+    display: none;
+  }
+
+  .close-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.56;
+    transform: none;
+  }
+
+  .close-icon {
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+  }
+
+  ::slotted([slot='header']) {
+    font: 650 15px/1.3 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    letter-spacing: -0.01em;
+    color: color-mix(in srgb, var(--ui-drawer-color) 95%, transparent);
+  }
+
+  ::slotted([slot='footer']) {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  :host([headless]) .overlay,
+  :host([headless]) .panel {
+    display: none;
+  }
+
+  :host([shape='square']) {
+    --ui-drawer-radius: 4px;
+  }
+
+  :host([shape='soft']) {
+    --ui-drawer-radius: 24px;
+  }
+
+  :host([density='compact']) {
+    --ui-drawer-header-padding: 12px 14px;
+    --ui-drawer-body-padding: 14px;
+    --ui-drawer-footer-padding: 12px 14px;
+    --ui-drawer-close-size: 30px;
+  }
+
+  :host([density='comfortable']) {
+    --ui-drawer-header-padding: 20px 22px;
+    --ui-drawer-body-padding: 22px;
+    --ui-drawer-footer-padding: 18px 22px;
+    --ui-drawer-close-size: 34px;
+  }
+
+  :host([size='sm']) {
+    --ui-drawer-width: min(340px, 92vw);
+    --ui-drawer-height: min(420px, 70vh);
+  }
+
+  :host([size='lg']) {
+    --ui-drawer-width: min(560px, 98vw);
+    --ui-drawer-height: min(640px, 90vh);
+  }
+
+  :host([elevation='none']) {
+    --ui-drawer-shadow: none;
+  }
+
+  :host([elevation='low']) {
+    --ui-drawer-shadow: 0 1px 2px rgba(2, 6, 23, 0.06), 0 16px 36px rgba(2, 6, 23, 0.18);
+  }
+
+  :host([elevation='high']) {
+    --ui-drawer-shadow: 0 2px 4px rgba(2, 6, 23, 0.1), 0 42px 96px rgba(2, 6, 23, 0.34);
+  }
+
+  :host([variant='solid']) .panel {
+    background: color-mix(in srgb, var(--ui-color-surface, #ffffff) 100%, transparent);
+    --ui-drawer-panel-backdrop: none;
+  }
+
+  :host([variant='solid']) .panel::before,
+  :host([variant='flat']) .panel::before,
+  :host([variant='line']) .panel::before {
+    display: none;
+  }
+
+  :host([variant='flat']) {
+    --ui-drawer-shadow: none;
+  }
+
+  :host([variant='line']) {
+    --ui-drawer-shadow: none;
+    --ui-drawer-border-color: color-mix(in srgb, var(--ui-drawer-color, #0f172a) 34%, transparent);
+  }
+
+  :host([variant='line']) .header,
+  :host([variant='line']) .footer,
+  :host([variant='line']) .body {
+    background: transparent;
+  }
+
+  :host([variant='glass']) {
+    --ui-drawer-panel-backdrop: blur(16px) saturate(1.1);
+  }
+
+  :host([variant='glass']) .panel {
+    background:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--ui-color-surface, #ffffff) 86%, #ffffff 14%),
+        color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 88%, transparent)
+      ),
+      var(--ui-color-surface, #ffffff);
+  }
+
+  :host([variant='glass']) .overlay {
+    backdrop-filter: blur(8px) saturate(1.12);
+  }
+
+  :host([variant='contrast']) {
+    --ui-drawer-bg: linear-gradient(180deg, #111827 0%, #0f172a 100%);
+    --ui-drawer-color: #e2e8f0;
+    --ui-drawer-muted: #94a3b8;
+    --ui-drawer-border-color: #334155;
+    --ui-drawer-overlay: rgba(2, 6, 23, 0.78);
+    --ui-drawer-focus-ring: #93c5fd;
+    --ui-drawer-control-bg: #111827;
+    --ui-drawer-control-bg-hover: color-mix(in srgb, #ffffff 14%, transparent);
+  }
+
+  :host([tone='danger']) {
+    --ui-drawer-focus-ring: var(--ui-color-danger, #dc2626);
+    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-danger, #dc2626) 12%, transparent);
+  }
+
+  :host([tone='success']) {
+    --ui-drawer-focus-ring: var(--ui-color-success, #16a34a);
+    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-success, #16a34a) 12%, transparent);
+  }
+
+  :host([tone='warning']) {
+    --ui-drawer-focus-ring: var(--ui-color-warning, #d97706);
+    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-warning, #d97706) 16%, transparent);
+  }
+
+  :host([state='error']) .panel {
+    border-color: color-mix(in srgb, var(--ui-color-danger, #dc2626) 40%, var(--ui-drawer-border-color));
+  }
+
+  :host([state='success']) .panel {
+    border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 40%, var(--ui-drawer-border-color));
+  }
+
+  :host([state='loading']) .body {
+    cursor: progress;
+  }
+
+  :host([inset]) {
+    --ui-drawer-inset: clamp(8px, 2vw, 22px);
+  }
+
+  :host([inset]) .panel.side-left,
+  :host([inset]) .panel.side-right,
+  :host([inset]) .panel.side-top,
+  :host([inset]) .panel.side-bottom {
+    border: var(--ui-drawer-border);
+    border-radius: var(--ui-drawer-radius);
+  }
+
+  :host([inset]) .panel.side-left {
+    left: var(--ui-drawer-inset);
+    top: var(--ui-drawer-inset);
+    bottom: var(--ui-drawer-inset);
+  }
+
+  :host([inset]) .panel.side-right {
+    right: var(--ui-drawer-inset);
+    top: var(--ui-drawer-inset);
+    bottom: var(--ui-drawer-inset);
+  }
+
+  :host([inset]) .panel.side-top {
+    left: var(--ui-drawer-inset);
+    right: var(--ui-drawer-inset);
+    top: var(--ui-drawer-inset);
+  }
+
+  :host([inset]) .panel.side-bottom {
+    left: var(--ui-drawer-inset);
+    right: var(--ui-drawer-inset);
+    bottom: var(--ui-drawer-inset);
+  }
+
+  @media (max-width: 768px) {
+    :host {
+      --ui-drawer-width: min(100vw, var(--ui-drawer-width));
+      --ui-drawer-height: min(88vh, var(--ui-drawer-height));
+      --ui-drawer-header-padding: 14px 16px;
+      --ui-drawer-body-padding: 16px;
+      --ui-drawer-footer-padding: 12px 16px;
+    }
+
+    .panel.side-left,
+    .panel.side-right {
+      width: min(100vw, var(--ui-drawer-width));
+      border-radius: 0;
+    }
+
+    :host([inset]) .panel.side-left,
+    :host([inset]) .panel.side-right {
+      border-radius: 14px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .overlay,
+    .panel,
+    .close-btn {
+      transition: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    :host {
+      --ui-drawer-border: 2px solid var(--ui-drawer-border-color);
+      --ui-drawer-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-drawer-overlay: color-mix(in srgb, CanvasText 44%, transparent);
+      --ui-drawer-bg: Canvas;
+      --ui-drawer-color: CanvasText;
+      --ui-drawer-muted: CanvasText;
+      --ui-drawer-border-color: CanvasText;
+      --ui-drawer-shadow: none;
+      --ui-drawer-control-bg: ButtonFace;
+      --ui-drawer-control-bg-hover: Highlight;
+      --ui-drawer-focus-ring: Highlight;
+    }
+
+    .panel,
+    .close-btn {
+      forced-color-adjust: none;
+      box-shadow: none;
+    }
+
+    .close-btn {
+      color: CanvasText;
+      border-color: CanvasText;
+    }
+
+    .close-btn:hover,
+    .close-btn:focus-visible {
+      color: HighlightText;
+      background: Highlight;
+      border-color: Highlight;
+    }
+
+    .panel::before {
+      display: none;
+    }
+  }
+`;function u(i,e){if(i==null)return e;const r=i.trim().toLowerCase();return r!=="false"&&r!=="0"&&r!=="off"}function c(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function L(i,e){return i==="top"||i==="bottom"||i==="left"||i==="right"?i:i==="start"?e==="rtl"?"right":"left":i==="end"?e==="rtl"?"left":"right":"left"}function y(i,e){var t;const r=i.querySelector(`[slot="${e}"]`);return r?((t=r.textContent)==null?void 0:t.trim().length)!==0||r.children.length>0:!1}function _(){return typeof window<"u"&&typeof document<"u"}class k extends A.ElementBase{constructor(){super(),this._uid=Math.random().toString(36).slice(2,10),this._isOpen=!1,this._restoreFocusEl=null,this._globalListenersBound=!1,this._closeReason="programmatic",this._onRootClick=this._onRootClick.bind(this),this._onDocumentKeyDown=this._onDocumentKeyDown.bind(this),this._onDocumentFocusIn=this._onDocumentFocusIn.bind(this)}static get observedAttributes(){return["open","side","dismissible","headless","variant","density","shape","elevation","tone","size","inset","close-on-overlay","close-on-esc","lock-while-loading","show-close","state","title","description","aria-label","aria-labelledby","aria-describedby","initial-focus"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this._syncOpenState()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this._unbindGlobalListeners(),this._releaseOpenResources(),this._restoreFocusEl=null,this._isOpen=!1,super.disconnectedCallback()}attributeChangedCallback(e,r,t){if(r!==t){if(e==="open"){this._syncOpenState();return}this.isConnected&&this.requestRender(),this._isOpen&&(e==="initial-focus"||e==="dismissible"||e==="show-close")&&queueMicrotask(()=>this._ensureFocusTrap())}}open(){this.setAttribute("open","")}close(e="programmatic"){this._closeReason=e,this.removeAttribute("open")}closeDrawer(e="programmatic"){if(this.hasAttribute("open")){if(e==="programmatic"){this.close("programmatic");return}this._requestClose(e)}}toggle(){this.hasAttribute("open")?this.close("programmatic"):this.open()}get dismissible(){const e=this.getAttribute("dismissible");return e==null?!1:u(e,!0)}set dismissible(e){e?this.setAttribute("dismissible",""):this.removeAttribute("dismissible")}get closeOnOverlay(){return u(this.getAttribute("close-on-overlay"),!0)}set closeOnOverlay(e){this.setAttribute("close-on-overlay",String(e))}get closeOnEsc(){return u(this.getAttribute("close-on-esc"),!0)}set closeOnEsc(e){this.setAttribute("close-on-esc",String(e))}get lockWhileLoading(){return u(this.getAttribute("lock-while-loading"),!0)}set lockWhileLoading(e){this.setAttribute("lock-while-loading",String(e))}get showClose(){return this.hasAttribute("show-close")?u(this.getAttribute("show-close"),!0):this.dismissible}set showClose(e){this.setAttribute("show-close",String(e))}get state(){const e=this.getAttribute("state");return e==="loading"||e==="error"||e==="success"?e:"idle"}set state(e){if(e==="idle"){this.removeAttribute("state");return}this.setAttribute("state",e)}get inset(){return this.hasAttribute("inset")}set inset(e){e?this.setAttribute("inset",""):this.removeAttribute("inset")}_getPanel(){return this.root.querySelector(".panel")}_isTopMost(){const e=d.OverlayManager.top();return e?e===this:!0}_isInteractionLocked(){return this.state==="loading"&&this.lockWhileLoading}_isNodeInsideDrawer(e){if(!e)return!1;const r=this._getPanel();return r&&r.contains(e)?!0:this.contains(e)}_isFocusable(e){if(!e||!e.isConnected||e.disabled||e.matches('[inert], [aria-hidden="true"]')||e.closest('[inert], [aria-hidden="true"]'))return!1;if(!_())return!0;const r=window.getComputedStyle(e);return r.display!=="none"&&r.visibility!=="hidden"}_collectFocusable(){const e=this._getPanel(),r=[],t=o=>{this._isFocusable(o)&&(r.includes(o)||r.push(o))};return this.querySelectorAll(x).forEach(t),e&&e.querySelectorAll(x).forEach(t),r}_focusInitial(){if(!this._isOpen)return;const e=this._getPanel();if(!e)return;const r=this.getAttribute("initial-focus")||"";if(r){const s=this.querySelector(r)||e.querySelector(r);if(s&&this._isFocusable(s))try{s.focus();return}catch{}}const t=this._collectFocusable(),a=t.find(s=>s.hasAttribute("autofocus"))||t[0]||e;a===e&&!a.hasAttribute("tabindex")&&a.setAttribute("tabindex","-1");try{a.focus()}catch{}}_ensureFocusTrap(){if(!this._isOpen||!this._isTopMost())return;const e=document.activeElement;this._isNodeInsideDrawer(e)||this._focusInitial()}_releaseOpenResources(){try{d.OverlayManager.unregister(this),d.OverlayManager.releaseLock()}catch{}}_canRestoreFocus(e){if(!e||!e.isConnected||e.disabled)return!1;if(!_())return!0;const r=window.getComputedStyle(e);return r.display!=="none"&&r.visibility!=="hidden"}_syncOpenState(){const e=this.hasAttribute("open");if(e===this._isOpen){e?(this._bindGlobalListeners(),queueMicrotask(()=>this._ensureFocusTrap())):this._unbindGlobalListeners();return}if(this._isOpen=e,e){this._bindGlobalListeners(),this._restoreFocusEl=document.activeElement||null,this._closeReason="programmatic";try{d.OverlayManager.register(this),d.OverlayManager.acquireLock()}catch{}this._focusInitial(),queueMicrotask(()=>this._ensureFocusTrap()),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("show",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!0,reason:"programmatic"}}));return}this._unbindGlobalListeners(),this._releaseOpenResources();const r=this._closeReason;this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{reason:r}})),this.dispatchEvent(new CustomEvent("hide",{bubbles:!0,composed:!0,detail:{reason:r}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!1,reason:r}}));const t=this._restoreFocusEl;if(this._restoreFocusEl=null,this._closeReason="programmatic",t&&this._canRestoreFocus(t))try{this._canRestoreFocus(t)&&t.focus()}catch{}}_requestClose(e){if(!this._isOpen||this._isInteractionLocked())return;const r=new CustomEvent("request-close",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(r);const t=new CustomEvent("ui-request-close",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(t),!(r.defaultPrevented||t.defaultPrevented)&&this.close(e)}_onRootClick(e){const r=e.target;if(!r||!this._isOpen)return;if(r.closest(".close-btn")){this._requestClose("button");return}r.closest(".overlay")&&(!this.dismissible||!this.closeOnOverlay||this._isTopMost()&&this._requestClose("overlay"))}_handleTab(e){const r=this._getPanel();if(!r)return;const t=this._collectFocusable();if(!t.length){e.preventDefault(),r.focus();return}const o=t[0],a=t[t.length-1],s=document.activeElement,n=!!s&&this._isNodeInsideDrawer(s);if(e.shiftKey){(!n||s===o)&&(e.preventDefault(),a.focus());return}(!n||s===a)&&(e.preventDefault(),o.focus())}_onDocumentKeyDown(e){if(!(!this._isOpen||!this._isTopMost())){if(e.key==="Escape"){if(!this.dismissible||!this.closeOnEsc||this._isInteractionLocked())return;e.preventDefault(),e.stopPropagation(),this._requestClose("escape");return}e.key==="Tab"&&this._handleTab(e)}}_onDocumentFocusIn(e){if(!this._isOpen||!this._isTopMost())return;const r=e.target,t=this._getPanel(),o=typeof e.composedPath=="function"?e.composedPath():[];r&&this._isNodeInsideDrawer(r)||o.includes(this)||t&&o.includes(t)||this._focusInitial()}render(){const e=this.getAttribute("dir")||document.documentElement.getAttribute("dir")||"ltr",r=L(this.getAttribute("side"),e==="rtl"?"rtl":"ltr"),t=this.showClose,o=y(this,"header"),a=y(this,"footer"),s=(this.getAttribute("title")||"").trim(),n=(this.getAttribute("description")||"").trim(),C=t||o||!!s||!!n,h=`ui-drawer-title-${this._uid}`,b=`ui-drawer-description-${this._uid}`,f=`ui-drawer-body-${this._uid}`,g=this.getAttribute("aria-label")||"",E=this.getAttribute("aria-labelledby")||"",w=this.getAttribute("aria-describedby")||"",p=E||(!g&&(o||s)?h:""),l=[];w?l.push(w):(n&&l.push(b),l.push(f));const v=g||(p?"":"Drawer"),m=this.state==="loading";this.setContent(`
+      <style>${O}</style>
+      <div class="overlay" part="overlay" aria-hidden="true"></div>
+      <aside
+        class="panel side-${r}"
+        part="panel"
+        role="dialog"
+        aria-modal="true"
+        ${v?`aria-label="${c(v)}"`:""}
+        ${p?`aria-labelledby="${c(p)}"`:""}
+        ${l.length?`aria-describedby="${c(l.join(" "))}"`:""}
+        ${m?'aria-busy="true"':""}
+        tabindex="-1"
+      >
+        <header class="header ${C?"":"empty"}" part="header">
+          <div class="header-main">
+            ${o?`<slot name="header" id="${h}"></slot>`:""}
+            ${!o&&s?`<h2 class="title" id="${h}">${c(s)}</h2>`:""}
+            ${n?`<p class="subtitle" id="${b}">${c(n)}</p>`:""}
+          </div>
+          <button
+            type="button"
+            class="close-btn"
+            part="close"
+            aria-label="Close drawer"
+            ${t?"":"hidden"}
+            ${m&&this.lockWhileLoading?"disabled":""}
+          >
+            <svg class="close-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true">
+              <path d="M3.5 3.5L12.5 12.5"></path>
+              <path d="M12.5 3.5L3.5 12.5"></path>
+            </svg>
+          </button>
+        </header>
+        <div class="body" part="body" id="${f}"><slot></slot></div>
+        <footer class="footer ${a?"":"empty"}" part="footer"><slot name="footer"></slot></footer>
+      </aside>
+    `),this._isOpen&&queueMicrotask(()=>this._ensureFocusTrap())}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("keydown",this._onDocumentKeyDown,!0),document.addEventListener("focusin",this._onDocumentFocusIn,!0),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("keydown",this._onDocumentKeyDown,!0),document.removeEventListener("focusin",this._onDocumentFocusIn,!0),this._globalListenersBound=!1)}}typeof customElements<"u"&&!customElements.get("ui-drawer")&&customElements.define("ui-drawer",k);exports.UIDrawer=k;