@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/feedback/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/modal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKnD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C,0CAA0C;IACE,IAAI,UAAS;IACzD,iCAAiC;IACL,KAAK,SAAM;IACvC,0DAA0D;IAC9B,IAAI,SAAM;IACtC,6CAA6C;IACjB,KAAK,SAAW;IAC5C,4DAA4D;IAChB,UAAU,UAAS;IAC/D,wEAAwE;IACf,WAAW,UAAQ;IAC5E,kEAAkE;IACV,UAAU,UAAQ;IAC1E,oEAAoE;IACd,SAAS,UAAQ;IAEtD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IACX,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAC7C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAE/E,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IAEvC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4B;IACpD,OAAO,CAAC,WAAW,CAA4B;IAE/C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAoGpB;IAEF,oBAAoB,IAAI,IAAI;IAK5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAiBtD,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAGxB;IAEF,2DAA2D;IAC3D,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAIpC;IAEF,0DAA0D;IAC1D,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAMlC;IAEF,8BAA8B;IAC9B,IAAI,QAAO,IAAI,CAEb;IAEF,+BAA+B;IAC/B,IAAI,QAAO,IAAI,CAEb;IAEF,MAAM;CAqDP"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/modal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKnD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C,0CAA0C;IACE,IAAI,UAAS;IACzD,iCAAiC;IACL,KAAK,SAAM;IACvC,0DAA0D;IAC9B,IAAI,SAAM;IACtC,6CAA6C;IACjB,KAAK,SAAW;IAC5C,4DAA4D;IAChB,UAAU,UAAS;IAC/D,wEAAwE;IACf,WAAW,UAAQ;IAC5E,kEAAkE;IACV,UAAU,UAAQ;IAC1E,oEAAoE;IACd,SAAS,UAAQ;IAEtD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAc;IACX,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAC7C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAE/E,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IAEvC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA4B;IACpD,OAAO,CAAC,WAAW,CAA4B;IAE/C,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAyGpB;IAEF,oBAAoB,IAAI,IAAI;IAK5B,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAiBtD,4DAA4D;IAC5D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAGxB;IAEF,2DAA2D;IAC3D,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAIpC;IAEF,0DAA0D;IAC1D,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAMlC;IAEF,8BAA8B;IAC9B,IAAI,QAAO,IAAI,CAEb;IAEF,+BAA+B;IAC/B,IAAI,QAAO,IAAI,CAEb;IAEF,MAAM;CAuDP"}

package/dist/components/feedback/modal.js

@@ -0,0 +1,303 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles, aithePanelStyles } from '../../core/styles';
+import { uid } from '../../utils/utils';
+import { t } from '../../styles/i18n';
+/**
+ * Full-featured modal dialog with header, body, footer slots and focus trapping.
+ * 全功能模态对话框，支持头部、正文、底部插槽和焦点捕获。
+ *
+ * @slot - Default slot for modal body content. 模态框正文内容。
+ * @slot header - Custom header content (overrides title property). 自定义头部内容。
+ * @slot footer - Footer action area. 底部操作区域。
+ * @fires aithe-open-change - Emitted when open state changes, with `{ open }`. 开关状态变更时触发。
+ * @example
+ * ```html
+ * <aithe-modal title="Edit Profile" width="520px">
+ *   <p>Modal body content here.</p>
+ *   <button slot="footer">Save</button>
+ * </aithe-modal>
+ * ```
+ */
+let AitheModal = class AitheModal extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the modal is open. 是否打开模态框。 */
+        this.open = false;
+        /** Modal title text. 模态框标题文本。 */
+        this.title = '';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+        /** Modal width (CSS value). 模态框宽度（CSS 值）。 */
+        this.width = '640px';
+        /** Whether the modal takes up the full viewport. 是否全屏显示。 */
+        this.fullscreen = false;
+        /** Whether clicking the backdrop mask closes the modal. 点击遮罩是否关闭模态框。 */
+        this.closeOnMask = true;
+        /** Whether pressing Escape closes the modal. 按 Escape 是否关闭模态框。 */
+        this.closeOnEsc = true;
+        /** Whether the close button is shown in the header. 是否在头部显示关闭按钮。 */
+        this.showClose = true;
+        this.hasHeaderSlot = false;
+        this.hasFooterSlot = false;
+        this.titleId = uid('aithe-modal-title');
+        this.lastFocused = null;
+        /** Syncs header/footer slot presence state. 同步头部/底部插槽状态。 */
+        this.syncSlots = () => {
+            this.hasHeaderSlot = this.headerNodes.length > 0;
+            this.hasFooterSlot = this.footerNodes.length > 0;
+        };
+        /** Handles Escape key to close modal. 处理 Escape 键关闭模态框。 */
+        this.handleDocumentKeydown = (event) => {
+            if (event.key === 'Escape' && this.closeOnEsc && this.open) {
+                this.hide();
+            }
+        };
+        /** Handles backdrop click to close modal. 处理遮罩点击关闭模态框。 */
+        this.handleBackdropClick = (event) => {
+            if (!this.closeOnMask || event.target !== event.currentTarget) {
+                return;
+            }
+            this.hide();
+        };
+        /** Opens the modal. 打开模态框。 */
+        this.show = () => {
+            this.open = true;
+        };
+        /** Closes the modal. 关闭模态框。 */
+        this.hide = () => {
+            this.open = false;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        aithePanelStyles('.panel'),
+        css `
+      :host {
+        display: contents;
+      }
+
+      .overlay {
+        position: fixed;
+        inset: 0;
+        z-index: var(--aithe-z-modal);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--aithe-space-lg);
+        background: var(--aithe-color-overlay);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--aithe-duration-base) var(--aithe-ease-standard);
+      }
+
+      .overlay.open {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .panel {
+        width: min(100%, var(--aithe-modal-width, 640px));
+        max-height: min(88vh, 960px);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .panel-inner {
+        display: flex;
+        flex-direction: column;
+        transform: translateY(14px) scale(0.98);
+        transition: transform var(--aithe-duration-base) var(--aithe-ease-standard);
+      }
+
+      .overlay.open .panel-inner {
+        transform: translateY(0) scale(1);
+      }
+
+      .panel.fullscreen {
+        width: 100vw;
+        max-width: 100vw;
+        height: 100vh;
+        max-height: 100vh;
+        border-radius: 0;
+      }
+
+      .header,
+      .footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--aithe-space-4);
+        padding: var(--aithe-space-lg);
+      }
+
+      .header {
+        border-bottom: 1px solid var(--aithe-color-border);
+      }
+
+      .footer {
+        border-top: 1px solid var(--aithe-color-border);
+      }
+
+      .title {
+        margin: 0;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        font-size: var(--aithe-font-size-lg);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .title-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .body {
+        flex: 1;
+        overflow: auto;
+        padding: var(--aithe-space-lg);
+      }
+
+      .close {
+        flex-shrink: 0;
+        width: 36px;
+        height: 36px;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: var(--aithe-color-text-muted);
+        cursor: pointer;
+      }
+
+      .close:hover {
+        background: var(--aithe-color-surface-muted);
+      }
+    `,
+    ]; }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('keydown', this.handleDocumentKeydown);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('open')) {
+            this.emit('aithe-open-change', { open: this.open });
+            if (this.open) {
+                this.lastFocused = document.activeElement;
+                document.addEventListener('keydown', this.handleDocumentKeydown);
+                queueMicrotask(() => this.focusFirst(this.panel ?? this.renderRoot));
+            }
+            else {
+                document.removeEventListener('keydown', this.handleDocumentKeydown);
+                this.lastFocused?.focus?.();
+            }
+        }
+    }
+    render() {
+        const showHeader = this.title || this.hasHeaderSlot || this.showClose;
+        const modalIcon = this.icon
+            ? html `
+          <aithe-icon class="title-icon" name=${this.icon} size="18"></aithe-icon>
+        `
+            : nothing;
+        return html `
+      <div class=${classMap({ overlay: true, open: this.open })} @click=${this.handleBackdropClick}>
+        <div
+          class=${classMap({ panel: true, fullscreen: this.fullscreen })}
+          aria-labelledby=${this.titleId}
+          aria-modal="true"
+          role="dialog"
+          style=${styleMap({ '--aithe-modal-width': this.width })}
+          tabindex="-1"
+          @click=${(event) => event.stopPropagation()}
+          @keydown=${(event) => this.trapFocus(event, this.panel ?? this.renderRoot)}
+        >
+          <div class="panel-inner">
+          <header class="header" ?hidden=${!showHeader}>
+            <slot name="header" @slotchange=${this.syncSlots}>
+              ${this.title
+            ? html `
+                    <h2 id=${this.titleId} class="title">${modalIcon}${this.title}</h2>
+                  `
+            : html `
+                    <span id=${this.titleId}></span>
+                  `}
+            </slot>
+            ${this.showClose
+            ? html `
+                  <button
+                    class="close"
+                    type="button"
+                    aria-label=${t('feedback.modal.closeAriaLabel')}
+                    @click=${this.hide}
+                  >
+                    ×
+                  </button>
+                `
+            : null}
+          </header>
+          <div class="body">
+            <slot></slot>
+          </div>
+          <footer class="footer" ?hidden=${!this.hasFooterSlot}>
+            <slot name="footer" @slotchange=${this.syncSlots}></slot>
+          </footer>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheModal.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], AitheModal.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheModal.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheModal.prototype, "width", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheModal.prototype, "fullscreen", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-mask' })
+], AitheModal.prototype, "closeOnMask", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-esc' })
+], AitheModal.prototype, "closeOnEsc", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-close' })
+], AitheModal.prototype, "showClose", void 0);
+__decorate([
+    query('.panel')
+], AitheModal.prototype, "panel", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'header' })
+], AitheModal.prototype, "headerNodes", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'footer' })
+], AitheModal.prototype, "footerNodes", void 0);
+__decorate([
+    state()
+], AitheModal.prototype, "hasHeaderSlot", void 0);
+__decorate([
+    state()
+], AitheModal.prototype, "hasFooterSlot", void 0);
+AitheModal = __decorate([
+    customElement('aithe-modal')
+], AitheModal);
+export { AitheModal };

package/dist/components/feedback/notification.js

@@ -0,0 +1,170 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+/**
+ * Top-right notification card with auto-dismiss timer and close button.
+ * 右上角通知卡片，支持自动消失计时器和关闭按钮。
+ *
+ * @slot - Default slot (unused; content driven by `content` property). 默认插槽（未使用，内容由 content 属性控制）。
+ * @fires aithe-close - Emitted when the notification auto-dismisses or is manually closed. 通知自动消失或手动关闭时触发。
+ * @example
+ * ```html
+ * <aithe-notification title="Update" content="New version available" type="success" duration="3200"></aithe-notification>
+ * ```
+ */
+let AitheNotification = class AitheNotification extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Notification title text. 通知标题文本。 */
+        this.title = '';
+        /** Icon name to display before the title. 在标题前显示的图标名称。 */
+        this.icon = '';
+        /** Notification body text. 通知正文文本。 */
+        this.content = '';
+        /** Notification color variant. 通知颜色类型。 */
+        this.type = 'default';
+        /** Auto-dismiss duration in milliseconds. 自动消失时长（毫秒）。 */
+        this.duration = 3200;
+        /** Whether the notification is visible. 是否显示通知。 */
+        this.open = true;
+        this.timer = 0;
+        this.close = () => {
+            this.open = false;
+            this.emit('aithe-close');
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        position: fixed;
+        top: 24px;
+        right: 24px;
+        z-index: var(--aithe-z-popover);
+      }
+
+      .card {
+        width: min(360px, calc(100vw - 48px));
+        padding: var(--aithe-space-4);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-xl);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-4);
+      }
+
+      .head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--aithe-space-3);
+        margin-bottom: var(--aithe-space-2);
+      }
+
+      .title {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        font-weight: var(--aithe-font-weight-semibold);
+      }
+
+      .title-icon {
+        flex-shrink: 0;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .content {
+        color: var(--aithe-color-text-muted);
+      }
+
+      .success {
+        border-color: rgba(53, 166, 111, 0.28);
+      }
+
+      .warning {
+        border-color: rgba(209, 143, 41, 0.28);
+      }
+
+      .danger {
+        border-color: rgba(223, 82, 107, 0.28);
+      }
+
+      button {
+        border: none;
+        background: transparent;
+        color: var(--aithe-color-text-subtle);
+        cursor: pointer;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.startTimer();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        globalThis.clearTimeout(this.timer);
+    }
+    updated(changed) {
+        if (changed.has('duration') || changed.has('open') || changed.has('content')) {
+            this.startTimer();
+        }
+    }
+    startTimer() {
+        globalThis.clearTimeout(this.timer);
+        if (!this.open || !this.duration) {
+            return;
+        }
+        this.timer = globalThis.setTimeout(() => {
+            this.open = false;
+            this.emit('aithe-close');
+        }, this.duration);
+    }
+    render() {
+        if (!this.open)
+            return html ``;
+        const notifIcon = this.icon
+            ? html `
+          <aithe-icon class="title-icon" name=${this.icon} size="16"></aithe-icon>
+        `
+            : nothing;
+        return html `
+      <div class=${classMap({ card: true, [this.type]: true })}>
+        <div class="head">
+          <span class="title">${notifIcon}${this.title}</span>
+          <button type="button" @click=${this.close}>×</button>
+        </div>
+        <div class="content">${this.content}</div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheNotification.prototype, "title", void 0);
+__decorate([
+    property({ type: String })
+], AitheNotification.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], AitheNotification.prototype, "content", void 0);
+__decorate([
+    property({ type: String })
+], AitheNotification.prototype, "type", void 0);
+__decorate([
+    property({ type: Number })
+], AitheNotification.prototype, "duration", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheNotification.prototype, "open", void 0);
+AitheNotification = __decorate([
+    customElement('aithe-notification')
+], AitheNotification);
+export { AitheNotification };

package/dist/components/feedback/popover.d.ts

@@ -6,7 +6,7 @@ import { AitheAnchoredOverlayElement } from '../../core/anchored-overlay';
  *
  * @slot - Default slot for the trigger element. 触发元素内容。
  * @slot content - Custom popover content. 自定义弹出面板内容。
- * @fires aithe-open-change - Emitted when open state changes, with `{ open }`. 开关状态变更时触发。
+ * @fires aithe-dropdown-change - Emitted when open state changes, with `{ open }`. 开关状态变更时触发。
  * @example
  * ```html
  * <aithe-popover placement="bottom">

package/dist/components/feedback/popover.js

@@ -0,0 +1,124 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { AitheAnchoredOverlayElement } from '../../core/anchored-overlay';
+import { aitheBaseStyles, aithePanelStyles, aitheScrollbarStyles } from '../../core/styles';
+/**
+ * Click-triggered popover panel anchored to a trigger element.
+ * 点击触发的弹出面板，锚定于触发元素。
+ *
+ * @slot - Default slot for the trigger element. 触发元素内容。
+ * @slot content - Custom popover content. 自定义弹出面板内容。
+ * @fires aithe-dropdown-change - Emitted when open state changes, with `{ open }`. 开关状态变更时触发。
+ * @example
+ * ```html
+ * <aithe-popover placement="bottom">
+ *   <button>Click me</button>
+ *   <slot name="content"><p>Popover content here.</p></slot>
+ * </aithe-popover>
+ * ```
+ */
+let AithePopover = class AithePopover extends AitheAnchoredOverlayElement {
+    constructor() {
+        super(...arguments);
+        /** Popover placement relative to trigger. 弹出面板相对于触发元素的位置。 */
+        this.placement = 'bottom';
+        /** Closes popover on outside pointer events. 点击外部时关闭弹出面板。 */
+        this.handleOutsidePointer = (event) => {
+            if (!this.open) {
+                return;
+            }
+            const path = event.composedPath();
+            if (!path.includes(this)) {
+                this.open = false;
+            }
+        };
+        /** Closes popover on Escape key. 按 Escape 键关闭弹出面板。 */
+        this.handleDocumentKeydown = (event) => {
+            if (event.key === 'Escape' && this.open) {
+                this.open = false;
+            }
+        };
+        /** Toggles popover open state. 切换弹出面板开关状态。 */
+        this.togglePanel = () => {
+            this.open = !this.open;
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        aithePanelStyles('.panel'),
+        aitheScrollbarStyles,
+        css `
+      :host {
+        display: inline-flex;
+      }
+
+      .trigger {
+        display: inline-flex;
+      }
+
+      .panel {
+        position: fixed;
+        z-index: var(--aithe-z-popover);
+        min-width: 240px;
+        max-width: min(360px, calc(100vw - 24px));
+        max-height: min(70vh, 520px);
+        overflow: auto;
+        padding: var(--aithe-space-4);
+      }
+    `,
+    ]; }
+    get panelElement() {
+        return this.panel ?? null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsidePointer);
+        document.addEventListener('keydown', this.handleDocumentKeydown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsidePointer);
+        document.removeEventListener('keydown', this.handleDocumentKeydown);
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('open')) {
+            this.emit('aithe-dropdown-change', { open: this.open });
+        }
+    }
+    render() {
+        return html `
+      <span class="trigger" @click=${this.togglePanel}>
+        <slot></slot>
+      </span>
+      ${this.open
+            ? html `
+            <div
+              class="panel"
+              role="dialog"
+              tabindex="-1"
+              @click=${(event) => event.stopPropagation()}
+            >
+              <slot name="content"></slot>
+            </div>
+          `
+            : null}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AithePopover.prototype, "placement", void 0);
+__decorate([
+    query('.panel')
+], AithePopover.prototype, "panel", void 0);
+AithePopover = __decorate([
+    customElement('aithe-popover')
+], AithePopover);
+export { AithePopover };