@greypan/web-ui 11.2.0 → 12.0.0

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

@@ -1,82 +1,91 @@
-import { LitElement, PropertyValues } from 'lit';
+import "../icon/index.js";
+import "../button/index.js";
+import { LitElement, PropertyValues } from "lit";
 export declare class WebUiDialog extends LitElement {
-    static styles: import('lit').CSSResult[];
-    open: boolean;
-    closable: boolean;
-    horizontal: boolean;
-    noScrollLock: boolean;
-    noBackdropClose: boolean;
-    noEscapeClose: boolean;
-    /**
-     * Controlled 模式下，Escape 和 backdrop 点击只派发 `open-change` 请求，
-     * 不会自行修改 `open`。Consumer 回写 `open` 后才执行关闭动画。
-     * 程序化 API（showModal/close/直接赋值 open）不受此模式影响，始终直通。
-     */
-    controlled: boolean;
-    /**
-     * `header` 槽为空时的标题文案。槽优先：一旦有元素分配到 `header`，槽内容整条接管，
-     * 属性被忽略。默认空串且槽也为空时不渲染 chrome 带。`headless` 模式不渲染 chrome 带，
-     * `heading` 一并失效。
-     */
-    heading: string;
-    /**
-     * Headless 模式：只保留 overlay 基础设施（backdrop、动画、scroll lock、`<dialog>` 语义），
-     * 移除内置 UI（chrome 带、正文区、footer），默认槽的内容渲染进卡片内的滚动层
-     * `.wui-dialog-content`，视觉交给 Consumer。形态与 `<web-ui-drawer>` 的 `headless` 一致。
-     *
-     * 该模式没有可自动关联的内置标题，内部原生 dialog 的 accessible name 必须由 Consumer
-     * 用 `dialog-label`（或自绘标题 + 自己的 `aria-labelledby`）提供。
-     */
-    headless: boolean;
-    /**
-     * 内部原生 dialog 的 accessible name。`headless` 模式必须由 Consumer 提供，
-     * 因为该模式不会渲染可自动关联的内置 chrome 带。
-     */
-    dialogLabel: string;
-    private _hasHeader;
-    private readonly _userOpenChange;
-    private readonly _overlay;
-    /** 当前开启会话的 handle；未开启时为 null。查询与惰性同步走它。 */
-    private _handle;
-    private readonly _scrollLock;
-    private readonly _presence;
-    private get dialog();
-    protected updated(props: PropertyValues): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _reclaimIfOpen;
-    private _syncOverlayInert;
-    showModal(): void;
-    close(): void;
-    private handleCancel;
-    private handleBackdropClick;
-    /** 用户发起的关闭入口（Escape、backdrop 点击、关闭 button）共用一条路径。 */
-    private readonly _closeFromUser;
-    private emitOpenChange;
-    private _onTransitionEnd;
-    private _onNativeClose;
-    private _syncScrollLock;
-    /**
-     * 只在「有/无」翻转时写 state：slotchange 在每次分配变化时都会触发，逐次赋值会让
-     * Lit 无谓重渲染。`heading` 与槽共同决定 chrome 带的存在，见 `_showHeader`。
-     */
-    private _onHeaderSlotChange;
-    private get _showHeader();
-    /**
-     * 默认模式与 `headless` 模式共用同一枚关闭 button：都绝对定位到卡片右上角，偏移由
-     * `--wui-dialog-close-top` / `--wui-dialog-close-right` 控制（见 style.css）。
-     * 它在两种模式下都是卡片的直接子元素，定位参照是卡片本身（.wui-dialog-body）。
-     */
-    private _renderCloseButton;
-    render(): import('lit').TemplateResult<1>;
-    readonly $events: {
-        'open-change': CustomEvent<{
-            open: boolean;
-        }>;
-    };
+  static styles: import("lit").CSSResult[];
+  open: boolean;
+  closable: boolean;
+  horizontal: boolean;
+  noScrollLock: boolean;
+  noBackdropClose: boolean;
+  noEscapeClose: boolean;
+  /**
+   * Controlled 模式下，Escape 和 backdrop 点击只派发 `open-change` 请求，
+   * 不会自行修改 `open`。Consumer 回写 `open` 后才执行关闭动画。
+   * 程序化 API（showModal/close/直接赋值 open）不受此模式影响，始终直通。
+   */
+  controlled: boolean;
+  /**
+   * `header` 槽为空时的标题文案。槽优先：一旦有元素分配到 `header`，槽内容整条接管，
+   * 属性被忽略。默认空串且槽也为空时不渲染 chrome 带。`headless` 模式不渲染 chrome 带，
+   * `heading` 一并失效。
+   */
+  heading: string;
+  /**
+   * Headless 模式：只保留 overlay 基础设施（backdrop、动画、scroll lock、`<dialog>` 语义），
+   * 移除内置 UI（chrome 带、正文区、footer），默认槽的内容渲染进卡片内的滚动层
+   * `.wui-dialog-content`，视觉交给 Consumer。形态与 `<web-ui-drawer>` 的 `headless` 一致。
+   *
+   * 该模式没有可自动关联的内置标题，内部原生 dialog 的 accessible name 必须由 Consumer
+   * 用 `aria-dialog-label`（或自绘标题 + 自己的 `aria-labelledby`）提供。
+   */
+  headless: boolean;
+  /**
+   * 内部原生 dialog 的 accessible name。`headless` 模式必须由 Consumer 提供，
+   * 因为该模式不会渲染可自动关联的内置 chrome 带。
+   */
+  ariaDialogLabel: string;
+  /** @deprecated 用 `aria-dialog-label`。 */
+  get dialogLabel(): string;
+  set dialogLabel(value: string);
+  /** 关闭按钮的无障碍名称；未设置时回退内置英文文案（见 ADR-0016）。 */
+  ariaCloseLabel: string;
+  private _hasHeader;
+  private readonly _userOpenChange;
+  private readonly _overlay;
+  /** 当前开启会话的 handle；未开启时为 null。查询与惰性同步走它。 */
+  private _handle;
+  private readonly _scrollLock;
+  private readonly _presence;
+  private get dialog();
+  protected updated(props: PropertyValues): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private _reclaimIfOpen;
+  private _syncOverlayInert;
+  showModal(): void;
+  close(): void;
+  private handleCancel;
+  private handleBackdropClick;
+  private handleKeydown;
+  /** 用户发起的关闭入口（Escape、backdrop 点击、关闭 button）共用一条路径。 */
+  private readonly _closeFromUser;
+  private emitOpenChange;
+  private _onTransitionEnd;
+  private _onNativeClose;
+  private _syncScrollLock;
+  /**
+   * 只在「有/无」翻转时写 state：slotchange 在每次分配变化时都会触发，逐次赋值会让
+   * Lit 无谓重渲染。`heading` 与槽共同决定 chrome 带的存在，见 `_showHeader`。
+   */
+  private _onHeaderSlotChange;
+  private get _showHeader();
+  /**
+   * 默认模式与 `headless` 模式共用同一枚关闭 button：都绝对定位到卡片右上角，偏移由
+   * `--wui-dialog-close-top` / `--wui-dialog-close-right` 控制（见 style.css）。
+   * 它在两种模式下都是卡片的直接子元素，定位参照是卡片本身（.wui-dialog-body）。
+   */
+  private _renderCloseButton;
+  render(): import("lit").TemplateResult<1>;
+  readonly $events: {
+    'open-change': CustomEvent<{
+      open: boolean;
+    }>;
+  };
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        'web-ui-dialog': WebUiDialog;
-    }
+  interface HTMLElementTagNameMap {
+    'web-ui-dialog': WebUiDialog;
+  }
 }
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/dialog/index.ts"],"mappings":";;;qBAqBa,oBAAoB;SACf,sBAAM;EAEsB;EACA;EACA;EAC6B;EACG;EACF;;;;;;EAO9B;;;;;;EAOhB;;;;;;;;;EAUgB;;;;;EAMgB;;MASxD;MAGA,YAAY;;EAK2C;UAE1C;mBACA;mBAOA;;UAKT;mBACS;mBACA;cAML;YAIO,QAAQ,OAAO;EAuCzB;EAWA;UAaD;UAaA;EAIR;EAKA;UAcQ;UAQA;UAMA;;mBAWS;UAUT;UAIA;UAIA;UAyBA;;;;;UAQA;cAMI;;;;;;UASJ;EAeC,wBAAM;WA6CE;IACf,eAAe;MAAc;;;;QAIzB;YACI;IACR,iBAAiB"}

package/dist/components/dialog/index.js

@@ -1,189 +1,284 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../classes/glass.js";
-import n from "../../icons/generated/ooui-close.js";
+import glass_default from "../../classes/glass.js";
+import ooui_close_default from "../../icons/generated/ooui-close.js";
 import "../button/index.js";
-import r from "../../scrollbars/internal.js";
-import { dispatchOpenChangeEvent as i } from "../../shared/open-state/index.js";
-import { defineOpenOverlay as a } from "../../shared/overlay/open-overlay.js";
-import { defineScrollLockLease as o } from "../../shared/scroll-lock/scroll-lock.js";
-import { UserChangeController as s } from "../../shared/events/user-change.js";
-import c from "../../assets/modal-surface.js";
-import { defineNativeDialogPresence as l } from "../../shared/overlay/native-dialog-presence.js";
-import u from "./style.js";
-import { LitElement as d, html as f, nothing as p, unsafeCSS as m } from "lit";
-import { customElement as h, property as g, state as _ } from "lit/decorators.js";
-//#region src/components/dialog/index.ts
-var v = class extends d {
-	constructor(...e) {
-		super(...e), this.open = !1, this.closable = !1, this.horizontal = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this.noEscapeClose = !1, this.controlled = !1, this.heading = "", this.headless = !1, this.dialogLabel = "", this._hasHeader = !1, this._userOpenChange = new s(), this._overlay = a().make({
+import { resolveBuiltinLabel } from "../../shared/locale/builtin-labels.js";
+import scrollbar_default from "../../assets/scrollbar.js";
+import { dispatchOpenChangeEvent } from "../../shared/open-state/index.js";
+import { defineOpenOverlay } from "../../shared/overlay/open-overlay.js";
+import { defineScrollLockLease } from "../../shared/scroll-lock/scroll-lock.js";
+import { UserChangeController } from "../../shared/events/user-change.js";
+import modal_surface_default from "../../assets/modal-surface.js";
+import { trapTabKey } from "../../shared/focus/tabbable.js";
+import { defineNativeDialogPresence } from "../../shared/overlay/native-dialog-presence.js";
+import style_default from "./style.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+// src/components/dialog/index.ts
+let WebUiDialog = class WebUiDialog extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.closable = false;
+		this.horizontal = false;
+		this.noScrollLock = false;
+		this.noBackdropClose = false;
+		this.noEscapeClose = false;
+		this.controlled = false;
+		this.heading = "";
+		this.headless = false;
+		this.ariaDialogLabel = "";
+		this.ariaCloseLabel = "";
+		this._hasHeader = false;
+		this._userOpenChange = new UserChangeController();
+		this._overlay = defineOpenOverlay().make({
 			requestClose: () => this._closeFromUser(),
 			isConnected: () => this.isConnected
-		}), this._handle = null, this._scrollLock = o().make(), this._presence = l().make({
+		});
+		this._handle = null;
+		this._scrollLock = defineScrollLockLease().make();
+		this._presence = defineNativeDialogPresence().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this.open
-		}), this._closeFromUser = () => {
+		});
+		this._closeFromUser = () => {
 			if (this.controlled) {
-				this.emitOpenChange(!1);
+				this.emitOpenChange(false);
 				return;
 			}
-			this._userOpenChange.mark(), this.close();
-		}, this._onTransitionEnd = (e) => {
-			this._presence.handleTransitionEnd(e);
-		}, this._onNativeClose = () => {
+			this._userOpenChange.mark();
+			this.close();
+		};
+		this._onTransitionEnd = (event) => {
+			this._presence.handleTransitionEnd(event);
+		};
+		this._onNativeClose = () => {
 			if (!this.open) {
 				this._presence.handleNativeClose();
 				return;
 			}
-			if (!this._presence.handleNativeClose()) {
-				if (this.controlled) {
-					this._presence.sync(!0), this.emitOpenChange(!1);
-					return;
-				}
-				this._userOpenChange.mark(), this.open = !1;
+			if (this._presence.handleNativeClose()) return;
+			if (this.controlled) {
+				this._presence.sync(true);
+				this.emitOpenChange(false);
+				return;
 			}
+			this._userOpenChange.mark();
+			this.open = false;
 		};
 	}
 	static {
 		this.styles = [
-			m(t),
-			m(c),
-			m(r),
-			m(u)
+			unsafeCSS(glass_default),
+			unsafeCSS(modal_surface_default),
+			unsafeCSS(scrollbar_default),
+			unsafeCSS(style_default)
 		];
 	}
+	/** @deprecated 用 `aria-dialog-label`。 */
+	get dialogLabel() {
+		return this.ariaDialogLabel;
+	}
+	set dialogLabel(value) {
+		this.ariaDialogLabel = value;
+	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
 	}
-	updated(e) {
-		if (super.updated(e), this.isConnected) {
-			if (e.has("open")) {
-				this._userOpenChange.consume() && this.emitOpenChange(), this._presence.sync(this.open), this.open && window.getSelection()?.removeAllRanges();
-				let e = this.dialog;
-				e && (this.open ? (this._handle?.release(), this._handle = this._overlay.claim(e, { ancestryFrom: this })) : (this._handle?.release(), this._handle = null));
+	updated(props) {
+		super.updated(props);
+		if (!this.isConnected) return;
+		if (props.has("open")) {
+			if (this._userOpenChange.consume()) this.emitOpenChange();
+			this._presence.sync(this.open);
+			if (this.open) window.getSelection()?.removeAllRanges();
+			const dialog = this.dialog;
+			if (dialog) {
+				if (this.open) {
+					this._handle?.release();
+					this._handle = this._overlay.claim(dialog, { ancestryFrom: this });
+				} else {
+					this._handle?.release();
+					this._handle = null;
+				}
 			}
-			(e.has("open") || e.has("noScrollLock")) && this._syncScrollLock(), this._syncOverlayInert();
 		}
+		if (props.has("open") || props.has("noScrollLock")) this._syncScrollLock();
+		this._syncOverlayInert();
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._presence.reconcile(), this._syncScrollLock(), this._reclaimIfOpen();
+		super.connectedCallback();
+		this._presence.reconcile();
+		this._syncScrollLock();
+		this._reclaimIfOpen();
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._presence.dispose(), this._scrollLock.release(), this._handle?.release(), this._handle = null;
+		super.disconnectedCallback();
+		this._presence.dispose();
+		this._scrollLock.release();
+		this._handle?.release();
+		this._handle = null;
 	}
 	_reclaimIfOpen() {
 		if (!this.open || this._handle) return;
-		let e = this.dialog;
-		e && (this._handle = this._overlay.claim(e, { ancestryFrom: this }), this._syncOverlayInert());
+		const dialog = this.dialog;
+		if (!dialog) return;
+		this._handle = this._overlay.claim(dialog, { ancestryFrom: this });
+		this._syncOverlayInert();
 	}
 	_syncOverlayInert() {
 		this._handle?.setInert(this.noEscapeClose);
 	}
 	showModal() {
-		this.open ||= !0;
+		if (this.open) return;
+		this.open = true;
 	}
 	close() {
-		this.open = !1;
+		this.open = false;
 	}
 	handleCancel(e) {
-		e.target === e.currentTarget && (e.preventDefault(), !this.noEscapeClose && this._closeFromUser());
+		if (e.target !== e.currentTarget) return;
+		e.preventDefault();
+		if (this.noEscapeClose) return;
+		this._closeFromUser();
 	}
 	handleBackdropClick(e) {
-		e.target === e.currentTarget && (this.noBackdropClose || this._closeFromUser());
+		if (e.target !== e.currentTarget) return;
+		if (this.noBackdropClose) return;
+		this._closeFromUser();
+	}
+	handleKeydown(e) {
+		if (e.key !== "Tab") return;
+		const path = e.composedPath();
+		const ownIndex = path.indexOf(e.currentTarget);
+		if (ownIndex > 0 && path.slice(0, ownIndex).some((node) => node instanceof HTMLDialogElement)) return;
+		const dialog = this.dialog;
+		if (dialog) trapTabKey(e, dialog);
 	}
-	emitOpenChange(e = this.open) {
-		i(this, e);
+	emitOpenChange(open = this.open) {
+		dispatchOpenChangeEvent(this, open);
 	}
-	_syncScrollLock(e = this.open) {
-		this._scrollLock.sync(e && !this.noScrollLock);
+	_syncScrollLock(isOpen = this.open) {
+		this._scrollLock.sync(isOpen && !this.noScrollLock);
 	}
+	/**
+	* 只在「有/无」翻转时写 state：slotchange 在每次分配变化时都会触发，逐次赋值会让
+	* Lit 无谓重渲染。`heading` 与槽共同决定 chrome 带的存在，见 `_showHeader`。
+	*/
 	_onHeaderSlotChange(e) {
 		if (!(e.target instanceof HTMLSlotElement)) return;
-		let t = e.target.assignedElements().length > 0;
-		t !== this._hasHeader && (this._hasHeader = t);
+		const has = e.target.assignedElements().length > 0;
+		if (has !== this._hasHeader) this._hasHeader = has;
 	}
 	get _showHeader() {
 		return this._hasHeader || this.heading !== "";
 	}
+	/**
+	* 默认模式与 `headless` 模式共用同一枚关闭 button：都绝对定位到卡片右上角，偏移由
+	* `--wui-dialog-close-top` / `--wui-dialog-close-right` 控制（见 style.css）。
+	* 它在两种模式下都是卡片的直接子元素，定位参照是卡片本身（.wui-dialog-body）。
+	*/
 	_renderCloseButton() {
-		return f`
+		return html`
       <web-ui-button
         class="wui-dialog-close"
         @click=${this._closeFromUser}
-        aria-label="Close"
+        aria-label=${resolveBuiltinLabel("close", this.ariaCloseLabel)}
         variant="secondary"
         icon
         size="26"
       >
-        <web-ui-icon size="14" .icon=${n}></web-ui-icon>
+        <web-ui-icon size="14" .icon=${ooui_close_default}></web-ui-icon>
       </web-ui-button>
     `;
 	}
 	render() {
-		let e = this._showHeader, t = this.dialogLabel.trim(), n = !t && !this.headless && e ? "wui-dialog-heading" : p;
-		return f`
+		const showHeader = this._showHeader;
+		const dialogLabel = this.ariaDialogLabel.trim();
+		const dialogLabelledBy = !dialogLabel && !this.headless && showHeader ? "wui-dialog-heading" : nothing;
+		return html`
       <dialog
-        aria-label=${t || p}
-        aria-labelledby=${n}
+        aria-label=${dialogLabel || nothing}
+        aria-labelledby=${dialogLabelledBy}
         @cancel=${this.handleCancel}
         @close=${this._onNativeClose}
         @click=${this.handleBackdropClick}
+        @keydown=${this.handleKeydown}
         @transitionend=${this._onTransitionEnd}
       >
         <div class="wui-dialog-body wui-glass">
-          ${this.headless ? f`
+          ${this.headless ? html`
                   <div class="wui-dialog-content wui-scroll">
                     <slot></slot>
                   </div>
-                  ${this.closable ? this._renderCloseButton() : p}
-                ` : f`
-                  <div class="header" id="wui-dialog-heading" ?hidden=${!e}>
+                  ${this.closable ? this._renderCloseButton() : nothing}
+                ` : html`
+                  <div class="header" id="wui-dialog-heading" ?hidden=${!showHeader}>
                     <slot name="header" @slotchange=${this._onHeaderSlotChange}>
-                      ${this.heading ? f`<span class="wui-dialog-heading">${this.heading}</span>` : p}
+                      ${this.heading ? html`<span class="wui-dialog-heading">${this.heading}</span>` : nothing}
                     </slot>
                   </div>
                   <div class="desc wui-scroll"><slot></slot></div>
                   <div class="wui-dialog-footer"><slot name="footer"></slot></div>
-                  ${this.closable ? this._renderCloseButton() : p}
+                  ${this.closable ? this._renderCloseButton() : nothing}
                 `}
         </div>
       </dialog>
     `;
 	}
 };
-e([g({
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], v.prototype, "open", void 0), e([g({
+	reflect: true
+})], WebUiDialog.prototype, "open", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], v.prototype, "closable", void 0), e([g({
+	reflect: true
+})], WebUiDialog.prototype, "closable", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], v.prototype, "horizontal", void 0), e([g({
+	reflect: true
+})], WebUiDialog.prototype, "horizontal", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0,
+	reflect: true,
 	attribute: "no-scroll-lock"
-})], v.prototype, "noScrollLock", void 0), e([g({
+})], WebUiDialog.prototype, "noScrollLock", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0,
+	reflect: true,
 	attribute: "no-backdrop-close"
-})], v.prototype, "noBackdropClose", void 0), e([g({
+})], WebUiDialog.prototype, "noBackdropClose", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0,
+	reflect: true,
 	attribute: "no-escape-close"
-})], v.prototype, "noEscapeClose", void 0), e([g({
+})], WebUiDialog.prototype, "noEscapeClose", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], v.prototype, "controlled", void 0), e([g({ type: String })], v.prototype, "heading", void 0), e([g({
+	reflect: true
+})], WebUiDialog.prototype, "controlled", void 0);
+__decorate([property({ type: String })], WebUiDialog.prototype, "heading", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], v.prototype, "headless", void 0), e([g({
+	reflect: true
+})], WebUiDialog.prototype, "headless", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-dialog-label"
+})], WebUiDialog.prototype, "ariaDialogLabel", void 0);
+__decorate([property({
 	type: String,
 	attribute: "dialog-label"
-})], v.prototype, "dialogLabel", void 0), e([_()], v.prototype, "_hasHeader", void 0), v = e([h("web-ui-dialog")], v);
-//#endregion
-export { v as WebUiDialog };
+})], WebUiDialog.prototype, "dialogLabel", null);
+__decorate([property({
+	type: String,
+	attribute: "aria-close-label"
+})], WebUiDialog.prototype, "ariaCloseLabel", void 0);
+__decorate([state()], WebUiDialog.prototype, "_hasHeader", void 0);
+WebUiDialog = __decorate([customElement("web-ui-dialog")], WebUiDialog);
+export { WebUiDialog };
 
 //# sourceMappingURL=index.js.map