@greypan/web-ui 1.4.2 → 2.0.1

package/dist/components/dialog/style.js

@@ -0,0 +1,6 @@
+//#region src/components/dialog/style.css?inline
+var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{transform:scale(var(--wui-scale-enter,.97));box-sizing:border-box;max-width:min(90vw, var(--wui-dialog-max-width,360px));max-height:90vh;color:var(--wui-color-text,#1b1b1b);opacity:0;transition:opacity var(--wui-duration-overlay-enter,.18s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1)), transform var(--wui-duration-overlay-enter,.18s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1));background:0 0;border:none;padding:0;font-family:inherit;overflow:visible}dialog::backdrop{opacity:0;background:var(--wui-dialog-overlay-bg,var(--wui-color-backdrop,#0000001a));transition:opacity var(--wui-duration-overlay-enter,.18s) ease}dialog[open].is-visible{opacity:1;transform:scale(1)}dialog.is-closing{pointer-events:none;transition-duration:var(--wui-duration-overlay-exit,.14s)}dialog.is-closing::backdrop{transition-duration:var(--wui-duration-overlay-exit,.14s)}dialog[open].is-visible::backdrop{opacity:1}@media (prefers-reduced-motion:reduce){dialog,dialog[open].is-visible{transition-duration:.12s;transform:none}}.wui-dialog-body{--wui-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);background-color:var(--wui-color-surface-overlay,#f6f6f6e0);border-radius:20px;padding:24px}.title{color:var(--wui-color-text,#1b1b1b);margin:0 0 8px;padding:0;font-size:18px;font-weight:600;line-height:1.4}.desc{color:var(--wui-color-text-muted,#6a6a6a);margin:0 0 20px;padding:0;font-size:14px;line-height:1.5}.wui-dialog-footer{flex-direction:column;gap:10px;display:flex}.wui-dialog-footer ::slotted(web-ui-button){width:100%;display:flex}:host([horizontal]) .wui-dialog-footer{flex-direction:row;justify-content:center;gap:10px}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button:not([full])){width:auto}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button[full]){flex:1;min-width:0}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=style.js.map

package/dist/components/dialog/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dialog/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: contents;\n}\n\ndialog {\n  transform: scale(var(--wui-scale-enter, 0.97));\n\n  overflow: visible;\n\n  box-sizing: border-box;\n  max-width: min(90vw, var(--wui-dialog-max-width, 360px));\n  max-height: 90vh;\n  padding: 0;\n  border: none;\n\n  font-family: inherit;\n  color: var(--wui-color-text, #1b1b1b);\n\n  opacity: 0;\n  background: transparent;\n\n  transition:\n    opacity var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),\n    transform var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n\n  &::backdrop {\n    opacity: 0;\n    background: var(--wui-dialog-overlay-bg, var(--wui-color-backdrop, rgb(0 0 0 / 0.1)));\n    transition: opacity var(--wui-duration-overlay-enter, 180ms) ease;\n  }\n}\n\ndialog[open].is-visible {\n  transform: scale(1);\n  opacity: 1;\n}\n\ndialog.is-closing {\n  pointer-events: none;\n  transition-duration: var(--wui-duration-overlay-exit, 140ms);\n}\n\ndialog.is-closing::backdrop {\n  transition-duration: var(--wui-duration-overlay-exit, 140ms);\n}\n\ndialog[open].is-visible::backdrop {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog,\n  dialog[open].is-visible {\n    transform: none;\n    transition-duration: 120ms;\n  }\n}\n\n/* ===== 玻璃卡片主体（样式由 glass.css 提供） ===== */\n\n.wui-dialog-body {\n  --wui-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n  padding: 24px;\n  border-radius: 20px;\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n}\n\n/* ===== 标题 ===== */\n\n.title {\n  margin: 0 0 8px;\n  padding: 0;\n\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.4;\n  color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== 描述 ===== */\n\n.desc {\n  margin: 0 0 20px;\n  padding: 0;\n\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--wui-color-text-muted, #6a6a6a);\n}\n\n/* ===== 按钮区域 ===== */\n\n.wui-dialog-footer {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n  /* ===== 按钮全宽（默认垂直排列） ===== */\n\n  & ::slotted(web-ui-button) {\n    display: flex;\n    width: 100%;\n  }\n}\n\n/* ===== horizontal 模式 ===== */\n\n:host([horizontal]) .wui-dialog-footer {\n  flex-direction: row;\n  gap: 10px;\n  justify-content: center;\n\n  /* 非 full 按钮：居中，不拉伸 */\n\n  & ::slotted(web-ui-button:not([full])) {\n    width: auto;\n  }\n\n  /* full 按钮：平分剩余空间 */\n\n  & ::slotted(web-ui-button[full]) {\n    flex: 1;\n    min-width: 0;\n  }\n}\n"],"mappings":""}

package/dist/components/drawer/index.d.ts

@@ -0,0 +1,57 @@
+import { LitElement, PropertyValues } from 'lit';
+declare const ALLOWED_PLACEMENTS: readonly ["right", "left", "top", "bottom"];
+export type DrawerPlacement = (typeof ALLOWED_PLACEMENTS)[number];
+export declare class WebUiDrawer extends LitElement {
+    static styles: import('lit').CSSResult[];
+    open: boolean;
+    lockScroll: boolean;
+    overlayClosable: boolean;
+    get placement(): DrawerPlacement;
+    set placement(v: string);
+    private _placement;
+    /** 标题文字（未传 header slot 时显示默认 header） */
+    heading: string;
+    closable: boolean;
+    private get dialog();
+    private _closeFallbackTimer;
+    private _openFrame;
+    private _isClosing;
+    private _hasHeaderSlot;
+    private _hasFooterSlot;
+    private _hasScrollLock;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private _checkSlotContent;
+    private handleHeaderSlotChange;
+    private handleFooterSlotChange;
+    protected updated(props: PropertyValues): void;
+    private _startOpening;
+    private _startClosing;
+    private _finishClosing;
+    private _clearCloseFallback;
+    private _cancelOpenFrame;
+    private handleTransitionEnd;
+    private handleKeydown;
+    /** 打开抽屉（命令式） */
+    show(): void;
+    /** 关闭抽屉（带动画） */
+    close(): void;
+    private handleCancel;
+    private handleNativeClose;
+    private handleBackdropClick;
+    private emitOpenChange;
+    private _syncScrollLock;
+    render(): import('lit').TemplateResult<1>;
+    readonly $events: {
+        'open-change': CustomEvent<{
+            open: boolean;
+        }>;
+    };
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'web-ui-drawer': WebUiDrawer;
+    }
+}
+export {};

package/dist/components/drawer/index.js

@@ -0,0 +1,172 @@
+import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import "../icon/index.js";
+import t from "../../assets/glass.js";
+import n from "../../icons/generated/lucide-x.js";
+import { normalizeLiteral as r } from "../../shared/normalize/index.js";
+import "../button/index.js";
+import { booleanWithFalseString as i } from "../../shared/property-converters/boolean-with-false-string.js";
+import { getTransitionDuration as a } from "../../shared/overlay/presence.js";
+import { lockScroll as o, unlockScroll as s } from "../../shared/scroll-lock/scroll-lock.js";
+import c from "./style.js";
+import { LitElement as l, html as u, nothing as d, unsafeCSS as f } from "lit";
+import { customElement as p, property as m } from "lit/decorators.js";
+//#region src/components/drawer/index.ts
+var h = [
+	"right",
+	"left",
+	"top",
+	"bottom"
+], g = class extends l {
+	constructor(...e) {
+		super(...e), this.open = !1, this.lockScroll = !0, this.overlayClosable = !0, this._placement = "right", this.heading = "", this.closable = !1, this._closeFallbackTimer = null, this._openFrame = null, this._isClosing = !1, this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._hasScrollLock = !1;
+	}
+	static {
+		this.styles = [f(t), f(c)];
+	}
+	get placement() {
+		return this._placement;
+	}
+	set placement(e) {
+		let t = this._placement;
+		this._placement = r(e, h, "right"), this.requestUpdate("placement", t);
+	}
+	get dialog() {
+		return this.shadowRoot?.querySelector("dialog") ?? null;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._hasHeaderSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "header"), this._hasFooterSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "footer");
+	}
+	firstUpdated() {
+		this._checkSlotContent("footer");
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._cancelOpenFrame(), this._clearCloseFallback(), this._syncScrollLock(!1);
+	}
+	_checkSlotContent(e) {
+		let t = this.shadowRoot?.querySelector(`slot[name="${e}"]`);
+		if (!t) return;
+		let n = t.assignedNodes().length > 0;
+		e === "footer" && n !== this._hasFooterSlot && (this._hasFooterSlot = n, this.requestUpdate());
+	}
+	handleHeaderSlotChange(e) {
+		let t = e.target.assignedNodes().length > 0;
+		t !== this._hasHeaderSlot && (this._hasHeaderSlot = t, this.requestUpdate());
+	}
+	handleFooterSlotChange(e) {
+		let t = e.target.assignedNodes().length > 0;
+		t !== this._hasFooterSlot && (this._hasFooterSlot = t, this.requestUpdate());
+	}
+	updated(e) {
+		super.updated(e), this.isConnected && (e.has("open") && (this.emitOpenChange(), this.open ? this._startOpening() : this._startClosing()), (e.has("open") || e.has("lockScroll")) && this._syncScrollLock());
+	}
+	_startOpening() {
+		let e = this.dialog;
+		e && (this._isClosing = !1, this._clearCloseFallback(), e.classList.remove("is-closing"), e.open || e.showModal?.(), this._cancelOpenFrame(), this._openFrame = requestAnimationFrame(() => {
+			this._openFrame = null, !(!this.isConnected || !this.open || !e.open) && e.classList.add("is-visible");
+		}));
+	}
+	_startClosing() {
+		let e = this.dialog;
+		if (e?.open) {
+			if (this._cancelOpenFrame(), this._isClosing = !0, !e.classList.contains("is-visible")) {
+				this._finishClosing();
+				return;
+			}
+			e.classList.add("is-closing"), e.classList.remove("is-visible"), this._clearCloseFallback(), this._closeFallbackTimer = setTimeout(() => this._finishClosing(), a(e) + 80);
+		}
+	}
+	_finishClosing() {
+		let e = this.dialog;
+		!e || !this._isClosing || this.open || (this._clearCloseFallback(), this._isClosing = !1, e.classList.remove("is-closing", "is-visible"), e.open && e.close?.());
+	}
+	_clearCloseFallback() {
+		this._closeFallbackTimer &&= (clearTimeout(this._closeFallbackTimer), null);
+	}
+	_cancelOpenFrame() {
+		this._openFrame !== null && (cancelAnimationFrame(this._openFrame), this._openFrame = null);
+	}
+	handleTransitionEnd(e) {
+		e.target === this.dialog && e.propertyName === "transform" && this._finishClosing();
+	}
+	handleKeydown(e) {
+		e.key === "Escape" && (e.preventDefault(), this.close());
+	}
+	show() {
+		this.open ||= !0;
+	}
+	close() {
+		this.open &&= !1;
+	}
+	handleCancel(e) {
+		e.preventDefault(), this.close();
+	}
+	handleNativeClose() {
+		this.open &&= (this._cancelOpenFrame(), this._clearCloseFallback(), this._isClosing = !1, this.dialog?.classList.remove("is-closing", "is-visible"), !1);
+	}
+	handleBackdropClick(e) {
+		e.target === e.currentTarget && this.overlayClosable && this.close();
+	}
+	emitOpenChange() {
+		this.dispatchEvent(new CustomEvent("open-change", {
+			detail: { open: this.open },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_syncScrollLock(e = this.open) {
+		let t = e && this.lockScroll;
+		t !== this._hasScrollLock && (t ? o() : s(), this._hasScrollLock = t);
+	}
+	render() {
+		let e = this._hasHeaderSlot || !!this.heading;
+		return u`
+      <dialog
+        @cancel=${this.handleCancel}
+        @close=${this.handleNativeClose}
+        @click=${this.handleBackdropClick}
+        @keydown=${this.handleKeydown}
+        @transitionend=${this.handleTransitionEnd}
+      >
+        <div class="wui-drawer-body wui-glass">
+          ${e ? u`
+                <div class="wui-drawer-header">
+                  <slot name="header" @slotchange=${this.handleHeaderSlotChange}>
+                    ${this.heading ? u`<span class="wui-drawer-heading">${this.heading}</span>` : d}
+                  </slot>
+                </div>
+              ` : d}
+          <div class="wui-drawer-content">
+            <slot></slot>
+          </div>
+          <div class="wui-drawer-footer" ?hidden=${!this._hasFooterSlot}>
+            <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
+          </div>
+        </div>
+        ${this.closable ? u`
+              <web-ui-button class="wui-drawer-close" @click=${this.close} aria-label="关闭" icon>
+                <web-ui-icon .icon=${n} size="16"></web-ui-icon>
+              </web-ui-button>
+            ` : d}
+      </dialog>
+    `;
+	}
+};
+e([m({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "open", void 0), e([m({
+	reflect: !0,
+	attribute: "lock-scroll",
+	converter: i
+})], g.prototype, "lockScroll", void 0), e([m({
+	reflect: !0,
+	attribute: "overlay-closable",
+	converter: i
+})], g.prototype, "overlayClosable", void 0), e([m({ reflect: !0 })], g.prototype, "placement", null), e([m({ type: String })], g.prototype, "heading", void 0), e([m({
+	type: Boolean,
+	reflect: !0
+})], g.prototype, "closable", void 0), g = e([p("web-ui-drawer")], g);
+//#endregion
+export { g as WebUiDrawer };
+
+//# sourceMappingURL=index.js.map

package/dist/components/drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/drawer/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideX } from '@/icons'\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\nimport { booleanWithFalseString } from '@/shared/property-converters/boolean-with-false-string'\nimport { lockScroll, unlockScroll } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = ['right', 'left', 'top', 'bottom'] as const\n\nexport type DrawerPlacement = (typeof ALLOWED_PLACEMENTS)[number]\n\n@customElement('web-ui-drawer')\nexport class WebUiDrawer extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ reflect: true, attribute: 'lock-scroll', converter: booleanWithFalseString }) lockScroll = true\n  @property({ reflect: true, attribute: 'overlay-closable', converter: booleanWithFalseString }) overlayClosable = true\n  @property({ reflect: true })\n  get placement(): DrawerPlacement {\n    return this._placement\n  }\n  set placement(v: string) {\n    const old = this._placement\n    this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'right')\n    this.requestUpdate('placement', old)\n  }\n  private _placement: DrawerPlacement = 'right'\n\n  /** 标题文字（未传 header slot 时显示默认 header） */\n  @property({ type: String }) heading = ''\n\n  @property({ type: Boolean, reflect: true }) closable = false\n\n  private get dialog() {\n    return this.shadowRoot?.querySelector('dialog') ?? null\n  }\n\n  private _closeFallbackTimer: ReturnType<typeof setTimeout> | null = null\n  private _openFrame: number | null = null\n  private _isClosing = false\n  private _hasHeaderSlot = false\n  private _hasFooterSlot = false\n  private _hasScrollLock = false\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._hasHeaderSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'header')\n    this._hasFooterSlot = Array.from(this.children).some(child => child.getAttribute?.('slot') === 'footer')\n  }\n\n  override firstUpdated() {\n    this._checkSlotContent('footer')\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._cancelOpenFrame()\n    this._clearCloseFallback()\n    this._syncScrollLock(false)\n  }\n\n  private _checkSlotContent(name: string) {\n    const slot = this.shadowRoot?.querySelector(`slot[name=\"${name}\"]`) as HTMLSlotElement | null\n    if (!slot) return\n    const has = slot.assignedNodes().length > 0\n    if (name === 'footer' && has !== this._hasFooterSlot) {\n      this._hasFooterSlot = has\n      this.requestUpdate()\n    }\n  }\n\n  private handleHeaderSlotChange(e: Event) {\n    const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n    if (has !== this._hasHeaderSlot) {\n      this._hasHeaderSlot = has\n      this.requestUpdate()\n    }\n  }\n\n  private handleFooterSlotChange(e: Event) {\n    const has = (e.target as HTMLSlotElement).assignedNodes().length > 0\n    if (has !== this._hasFooterSlot) {\n      this._hasFooterSlot = has\n      this.requestUpdate()\n    }\n  }\n\n  protected override updated(props: PropertyValues) {\n    super.updated(props)\n    if (!this.isConnected) return\n\n    if (props.has('open')) {\n      this.emitOpenChange()\n      if (this.open) this._startOpening()\n      else this._startClosing()\n    }\n    if (props.has('open') || props.has('lockScroll')) this._syncScrollLock()\n  }\n\n  private _startOpening() {\n    const dialog = this.dialog\n    if (!dialog) return\n\n    this._isClosing = false\n    this._clearCloseFallback()\n    dialog.classList.remove('is-closing')\n    if (!dialog.open) dialog.showModal?.()\n\n    this._cancelOpenFrame()\n    this._openFrame = requestAnimationFrame(() => {\n      this._openFrame = null\n      if (!this.isConnected || !this.open || !dialog.open) return\n      dialog.classList.add('is-visible')\n    })\n  }\n\n  private _startClosing() {\n    const dialog = this.dialog\n    if (!dialog?.open) return\n\n    this._cancelOpenFrame()\n    this._isClosing = true\n\n    // 还未进入可见帧时没有可过渡的视觉状态，直接释放原生 dialog。\n    if (!dialog.classList.contains('is-visible')) {\n      this._finishClosing()\n      return\n    }\n\n    dialog.classList.add('is-closing')\n    dialog.classList.remove('is-visible')\n    this._clearCloseFallback()\n    this._closeFallbackTimer = setTimeout(() => this._finishClosing(), getTransitionDuration(dialog) + 80)\n  }\n\n  private _finishClosing() {\n    const dialog = this.dialog\n    if (!dialog || !this._isClosing || this.open) return\n\n    this._clearCloseFallback()\n    this._isClosing = false\n    dialog.classList.remove('is-closing', 'is-visible')\n    if (dialog.open) dialog.close?.()\n  }\n\n  private _clearCloseFallback() {\n    if (!this._closeFallbackTimer) return\n    clearTimeout(this._closeFallbackTimer)\n    this._closeFallbackTimer = null\n  }\n\n  private _cancelOpenFrame() {\n    if (this._openFrame === null) return\n    cancelAnimationFrame(this._openFrame)\n    this._openFrame = null\n  }\n\n  private handleTransitionEnd(e: TransitionEvent) {\n    if (e.target !== this.dialog || e.propertyName !== 'transform') return\n    this._finishClosing()\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (e.key !== 'Escape') return\n    e.preventDefault()\n    this.close()\n  }\n\n  /** 打开抽屉（命令式） */\n  show() {\n    if (this.open) return\n    this.open = true\n  }\n\n  /** 关闭抽屉（带动画） */\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\n  private handleCancel(e: Event) {\n    // 保留 top layer 直到 CSS 过渡结束，避免原生关闭跳过退出动画。\n    e.preventDefault()\n    this.close()\n  }\n\n  private handleNativeClose() {\n    if (!this.open) return\n\n    // 原生关闭可绕过 cancel；同步受控状态，避免 show() 误判为已打开。\n    this._cancelOpenFrame()\n    this._clearCloseFallback()\n    this._isClosing = false\n    this.dialog?.classList.remove('is-closing', 'is-visible')\n    this.open = false\n  }\n\n  private handleBackdropClick(e: MouseEvent) {\n    if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n    if (!this.overlayClosable) return\n    this.close()\n  }\n\n  private emitOpenChange() {\n    this.dispatchEvent(\n      new CustomEvent('open-change', {\n        detail: { open: this.open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _syncScrollLock(isOpen = this.open) {\n    const shouldLock = isOpen && this.lockScroll\n    if (shouldLock === this._hasScrollLock) return\n\n    if (shouldLock) lockScroll()\n    else unlockScroll()\n    this._hasScrollLock = shouldLock\n  }\n\n  override render() {\n    const showHeader = this._hasHeaderSlot || !!this.heading\n\n    return html`\n      <dialog\n        @cancel=${this.handleCancel}\n        @close=${this.handleNativeClose}\n        @click=${this.handleBackdropClick}\n        @keydown=${this.handleKeydown}\n        @transitionend=${this.handleTransitionEnd}\n      >\n        <div class=\"wui-drawer-body wui-glass\">\n          ${showHeader\n            ? html`\n                <div class=\"wui-drawer-header\">\n                  <slot name=\"header\" @slotchange=${this.handleHeaderSlotChange}>\n                    ${this.heading ? html`<span class=\"wui-drawer-heading\">${this.heading}</span>` : nothing}\n                  </slot>\n                </div>\n              `\n            : nothing}\n          <div class=\"wui-drawer-content\">\n            <slot></slot>\n          </div>\n          <div class=\"wui-drawer-footer\" ?hidden=${!this._hasFooterSlot}>\n            <slot name=\"footer\" @slotchange=${this.handleFooterSlotChange}></slot>\n          </div>\n        </div>\n        ${this.closable\n          ? html`\n              <web-ui-button class=\"wui-drawer-close\" @click=${this.close} aria-label=\"关闭\" icon>\n                <web-ui-icon .icon=${lucideX} size=\"16\"></web-ui-icon>\n              </web-ui-button>\n            `\n          : nothing}\n      </dialog>\n    `\n  }\n\n  declare readonly $events: {\n    'open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-drawer': WebUiDrawer\n  }\n}\n"],"mappings":"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"}

package/dist/components/drawer/style.js

@@ -0,0 +1,6 @@
+//#region src/components/drawer/style.css?inline
+var e = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{box-sizing:border-box;width:var(--wui-drawer-width,320px);max-width:90vw;height:100dvh;max-height:100dvh;color:var(--wui-color-text,#1b1b1b);transition:transform var(--wui-duration-drawer,.28s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1));background:0 0;border:none;margin:0;padding:0;font-family:inherit;inset:0 0 0 auto;overflow:visible;transform:translate(100%)}dialog::backdrop{opacity:0;background:var(--wui-drawer-overlay-bg,#0000001f);transition:opacity var(--wui-duration-drawer,.28s) ease}dialog[open].is-visible,:host([placement=left]) dialog[open].is-visible,:host([placement=top]) dialog[open].is-visible,:host([placement=bottom]) dialog[open].is-visible{transform:translate(0)}dialog.is-closing{pointer-events:none}dialog[open].is-visible::backdrop{opacity:1}:host([placement=left]) dialog{left:0;right:auto;transform:translate(-100%)}:host([placement=top]) dialog,:host([placement=bottom]) dialog{width:100vw;max-width:100vw;height:var(--wui-drawer-height,300px);max-height:90dvh}:host([placement=top]) dialog{inset:0 0 auto;transform:translateY(-100%)}:host([placement=bottom]) dialog{inset:auto 0 0;transform:translateY(100%)}.wui-drawer-body{--wui-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);background-color:var(--wui-color-surface-overlay,#f6f6f6e0);flex-direction:column;height:100%;display:flex}.wui-drawer-header{border-bottom:1px solid #0000000f;justify-content:space-between;align-items:center;padding:16px 20px;font-size:18px;font-weight:600;line-height:1.4;display:flex}.wui-drawer-content{overscroll-behavior:contain;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);flex:1;padding:20px;line-height:1.5;overflow-y:auto}.wui-drawer-footer{border-top:1px solid #0000000f;flex-shrink:0;padding:16px 20px}@media (prefers-reduced-motion:reduce){dialog{transition:opacity .12s}dialog::backdrop{transition-duration:.12s}dialog[open].is-visible{transform:none}}.wui-drawer-footer[hidden]{display:none}.wui-drawer-close{z-index:3;position:absolute;top:8px;right:8px}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=style.js.map

package/dist/components/drawer/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/drawer/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: contents;\n}\n\n/* ===== Dialog 容器 ===== */\ndialog {\n  /* 默认：右侧滑出 — 需显式 left:auto 覆盖 UA dialog:modal 的 left:0 */\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: auto;\n  transform: translateX(100%);\n\n  /* 阴影属于抽屉主体，不能由同尺寸的原生 dialog 裁剪。内容滚动由 .wui-drawer-content 管理。 */\n  overflow: visible;\n\n  box-sizing: border-box;\n  width: var(--wui-drawer-width, 320px);\n  max-width: 90vw;\n  height: 100dvh;\n  max-height: 100dvh;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  font-family: inherit;\n  color: var(--wui-color-text, #1b1b1b);\n\n  background: transparent;\n\n  transition: transform var(--wui-duration-drawer, 280ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n\n  &::backdrop {\n    opacity: 0;\n    background: var(--wui-drawer-overlay-bg, rgb(0 0 0 / 0.12));\n    transition: opacity var(--wui-duration-drawer, 280ms) ease;\n  }\n}\n\ndialog[open].is-visible {\n  transform: translate(0, 0);\n}\n\n:host([placement='left']) dialog[open].is-visible,\n:host([placement='top']) dialog[open].is-visible,\n:host([placement='bottom']) dialog[open].is-visible {\n  transform: translate(0, 0);\n}\n\ndialog.is-closing {\n  pointer-events: none;\n}\n\ndialog[open].is-visible::backdrop {\n  opacity: 1;\n}\n\n/* ===== Placement 变体 ===== */\n\n:host([placement='left']) dialog {\n  right: auto;\n  left: 0;\n  transform: translateX(-100%);\n}\n\n:host([placement='top']) dialog,\n:host([placement='bottom']) dialog {\n  width: 100vw;\n  max-width: 100vw;\n  height: var(--wui-drawer-height, 300px);\n  max-height: 90dvh;\n}\n\n:host([placement='top']) dialog {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: 0;\n  transform: translateY(-100%);\n}\n\n:host([placement='bottom']) dialog {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateY(100%);\n}\n\n/* ===== 抽屉主体 ===== */\n\n.wui-drawer-body {\n  --wui-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n}\n\n/* ===== Header ===== */\n\n.wui-drawer-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 16px 20px;\n  border-bottom: 1px solid rgb(0 0 0 / 0.06);\n\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n/* ===== 内容区 ===== */\n\n.wui-drawer-content {\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  flex: 1;\n\n  padding: 20px;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== Footer ===== */\n\n.wui-drawer-footer {\n  flex-shrink: 0;\n  padding: 16px 20px;\n  border-top: 1px solid rgb(0 0 0 / 0.06);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  dialog {\n    transition: opacity 120ms ease;\n  }\n\n  dialog::backdrop {\n    transition-duration: 120ms;\n  }\n\n  dialog[open].is-visible {\n    transform: none;\n  }\n}\n\n.wui-drawer-footer[hidden] {\n  display: none;\n}\n\n/* ===== 关闭按钮（独立定位，与 header 解耦） ===== */\n\n.wui-drawer-close {\n  position: absolute;\n  z-index: 3;\n  top: 8px;\n  right: 8px;\n}\n"],"mappings":""}

package/dist/components/dropdown/index.d.ts

@@ -0,0 +1,87 @@
+import { Placement } from '@floating-ui/dom';
+import { LitElement } from 'lit';
+export type { Placement };
+export declare class WebUiDropdown extends LitElement {
+    static styles: import('lit').CSSResult[];
+    open: boolean;
+    disabled: boolean;
+    matchWidth: boolean;
+    lockScroll: boolean;
+    private _placement;
+    get placement(): Placement;
+    set placement(v: string);
+    private _offset;
+    get offset(): number;
+    set offset(v: number);
+    private _activePath;
+    private readonly _overlays;
+    private readonly _closingSubmenuOverlays;
+    private _openTimer?;
+    private _ignoreOutsideClick;
+    private _ignoreOutsideClickTimer?;
+    private _hoverCleanupFns;
+    private _hasScrollLock;
+    private _restoreFocusTarget?;
+    private _shouldOpenInstantly;
+    get isOpen(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * 打开菜单。
+     * @returns 无返回值；打开后派发 `open-change` 事件。
+     */
+    openMenu(): void;
+    private _openMenu;
+    /**
+     * 关闭所有层级。
+     * @returns 无返回值；关闭后派发 `open-change` 事件。
+     */
+    closeAll(): void;
+    /** 清理子菜单状态（不影响 open prop） */
+    private _closeAllSubmenus;
+    private _cleanupClosedMenu;
+    private _closeRootAfterPresence;
+    private _hideAllSubmenuChildren;
+    private _toggleSubmenu;
+    private _closeSubmenuFrom;
+    private _syncActiveAttrs;
+    private _getLevelItems;
+    private _populateLevel0;
+    private _returnLevel0Items;
+    private _populateOverlay;
+    private _depopulateOverlay;
+    private _ensureOverlay;
+    private _buildOverlay;
+    private _disposeOverlay;
+    private _disposeAll;
+    private _closeSubmenuAfterPresence;
+    private _disposeClosingSubmenuOverlays;
+    private _restoreSubmenuItems;
+    private _syncScrollLock;
+    private _queryTriggerAnchor;
+    private _getSubmenuTriggerAnchor;
+    private _onTriggerClick;
+    private _onClickOutside;
+    private _onMenuClick;
+    private _onKeydown;
+    private _getEnabledLevelItems;
+    private _getFocusedItem;
+    private _getFocusedLevel;
+    private _focusMenuItem;
+    private _isInsideShadowRoot;
+    private _ignoreCurrentOutsideClick;
+    private _bindLevelHovers;
+    private _bindHoversAfterUpdate;
+    render(): import('lit').TemplateResult<1>;
+    readonly $events: {
+        'open-change': CustomEvent<{
+            open: boolean;
+        }>;
+    };
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'web-ui-dropdown': WebUiDropdown;
+    }
+}