@editora/ui-core 0.1.9 → 0.1.12

package/dist/drawer.esm.js

@@ -0,0 +1,872 @@
+import { E } from "./ElementBase-909688f3.mjs";
+import { O as d } from "./overlayManager-86454af7.mjs";
+import "./scroll-lock-9de6d328.mjs";
+const x = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', A = `
+  :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 O extends E {
+  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.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.unregister(this), d.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.register(this), d.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(), k = 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") || "", C = this.getAttribute("aria-labelledby") || "", w = this.getAttribute("aria-describedby") || "", p = C || (!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>${A}</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 ${k ? "" : "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", O);
+export {
+  O as UIDrawer
+};