@greypan/web-ui 3.0.1 → 4.0.0

package/dist/components/input-number/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input-number/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideMinus, lucidePlus } from '@/icons'\nimport { normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input-number')\nexport class WebUiInputNumber extends LitElement {\n  static formAssociated = true\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true }) placeholder = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) readonly = false\n  @property({ type: Boolean, reflect: true }) required = false\n  @property({ type: Number, reflect: true })\n  get precision(): number {\n    return this._precision\n  }\n  // 精度变化时重算现有值，避免浮点累积误差\n  set precision(v: number) {\n    const old = this._precision\n    this._precision = v\n    const current = this.clamp(this.round(this._value))\n    if (current !== this._value) {\n      this._value = current\n      this._internals?.setFormValue?.(String(current))\n    }\n    this.requestUpdate('precision', old)\n  }\n\n  @state() private _value = 0\n  @state() private _min = 0\n  @state() private _max = Infinity\n  @state() private _step = 1\n  @state() private _focused = false\n  @state() private _formDisabled = false\n  private _precision = 0\n\n  private _internals?: ElementInternals\n\n  @property({ type: Number, reflect: true })\n  get value(): number {\n    return this._value\n  }\n\n  set value(v: number) {\n    const clamped = this.clamp(this.round(v))\n    const old = this._value\n    this._value = clamped\n    this._internals?.setFormValue?.(String(clamped))\n    this.requestUpdate('value', old)\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled\n  }\n\n  @property({ type: Number })\n  get min(): number {\n    return this._min\n  }\n\n  set min(v: unknown) {\n    this._min = normalizeNumber(v, -Infinity, Infinity, 0)\n  }\n\n  @property({ type: Number })\n  get max(): number {\n    return this._max\n  }\n\n  set max(v: unknown) {\n    this._max = normalizeNumber(v, -Infinity, Infinity, Infinity)\n  }\n\n  @property({ type: Number })\n  get step(): number {\n    return this._step\n  }\n\n  // 步进值，默认 1；若声明了 precision 则以 precision 退化步进\n  set step(v: unknown) {\n    this._step = normalizeNumber(v, 0, Infinity, 1)\n  }\n\n  private get _effectiveStep(): number {\n    return this._step\n  }\n\n  private get atMin(): boolean {\n    return this._value <= this._min\n  }\n\n  private get atMax(): boolean {\n    return this._value >= this._max\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (!this._internals) {\n      this._internals = this.attachInternals()\n    }\n    this._internals.setFormValue?.(String(this._value))\n  }\n\n  formResetCallback() {\n    const attr = this.getAttribute('value')\n    this.value = attr !== null ? Number(attr) : 0\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (typeof state === 'string') this.value = Number(state)\n  }\n\n  override updated() {\n    this._syncValidity()\n    this.toggleAttribute('focused', this._focused)\n  }\n\n  private _syncValidity() {\n    const input = this.shadowRoot?.querySelector('input')\n    if (!this._internals || !input || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || input.validity.valid) {\n      this._internals.setValidity({})\n      return\n    }\n    const flags: ValidityStateFlags = {}\n    if (input.validity.valueMissing) flags.valueMissing = true\n    if (input.validity.rangeUnderflow) flags.rangeUnderflow = true\n    if (input.validity.rangeOverflow) flags.rangeOverflow = true\n    if (input.validity.stepMismatch) flags.stepMismatch = true\n    this._internals.setValidity(flags, input.validationMessage, input)\n  }\n\n  private clamp(v: number): number {\n    return Math.min(this._max, Math.max(this._min, v))\n  }\n\n  private round(v: number): number {\n    const f = 10 ** this.precision\n    return Math.round(v * f) / f\n  }\n\n  private setValueAndNotify(v: number) {\n    this.value = this.clamp(this.round(v))\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n  }\n\n  private handleStep(direction: 1 | -1) {\n    if (this._isDisabled || this.readonly) return\n    this.setValueAndNotify(this._value + direction * this._effectiveStep)\n  }\n\n  private handleInput(e: Event) {\n    if (this.readonly) return\n    if (!(e.target instanceof HTMLInputElement)) return\n    const raw = e.target.value\n    if (raw === '' || raw === '-') return\n    this._value = this.clamp(this.round(Number(raw)))\n    this._internals?.setFormValue?.(String(this._value))\n    this._syncValidity()\n  }\n\n  // 原生 change 不 composed，被 shadow root 挡住；文本失焦提交时补发 composed 事件，\n  // 与 ArrowUp/ArrowDown 的 change 行为对齐。\n  private handleNativeChange(e: Event) {\n    if (this.readonly) return\n    if (!(e.target instanceof HTMLInputElement)) return\n    const raw = e.target.value\n    if (raw === '' || raw === '-') return\n    this._value = this.clamp(this.round(Number(raw)))\n    this._internals?.setFormValue?.(String(this._value))\n    this._syncValidity()\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (this._isDisabled || this.readonly) return\n    if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      this.setValueAndNotify(this._value + this._effectiveStep)\n      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      this.setValueAndNotify(this._value - this._effectiveStep)\n      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  private handleFocus() {\n    if (!this._isDisabled) this._focused = true\n  }\n\n  private handleBlur() {\n    this._focused = false\n  }\n\n  override render() {\n    return html`\n      <div class=\"wui-glass wui-input-inner\">\n        <button\n          class=\"num-btn\"\n          aria-label=\"Decrease\"\n          ?disabled=${this._isDisabled || this.readonly || this.atMin}\n          @click=${() => this.handleStep(-1)}\n        >\n          <web-ui-icon .icon=${lucideMinus}></web-ui-icon>\n        </button>\n        <input\n          type=\"number\"\n          placeholder=${this.placeholder}\n          name=${this.name}\n          .value=${String(this._value)}\n          ?disabled=${this._isDisabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          @input=${this.handleInput}\n          @change=${this.handleNativeChange}\n          @keydown=${this.handleKeydown}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        <button\n          class=\"num-btn\"\n          aria-label=\"Increase\"\n          ?disabled=${this._isDisabled || this.readonly || this.atMax}\n          @click=${() => this.handleStep(1)}\n        >\n          <web-ui-icon .icon=${lucidePlus}></web-ui-icon>\n        </button>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-input-number': WebUiInputNumber\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/input-number/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideMinus, lucidePlus } from '@/icons'\nimport { defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-input-number')\nexport class WebUiInputNumber extends LitElement {\n  static formAssociated = true\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true }) placeholder = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) readonly = false\n  @property({ type: Boolean, reflect: true }) required = false\n  @property({ type: Number, reflect: true })\n  get precision(): number {\n    return this._precision\n  }\n  // 精度变化时重算现有值，避免浮点累积误差\n  set precision(v: number) {\n    const old = this._precision\n    this._precision = v\n    const current = this.clamp(this.round(this._value))\n    if (current !== this._value) {\n      this._value = current\n      this._formAssociation.sync()\n    }\n    this.requestUpdate('precision', old)\n  }\n\n  @state() private _value = 0\n  @state() private _min = 0\n  @state() private _max = Infinity\n  @state() private _step = 1\n  @state() private _focused = false\n  private _precision = 0\n\n  @property({ type: Number, reflect: true })\n  get value(): number {\n    return this._value\n  }\n\n  set value(v: number) {\n    const clamped = this.clamp(this.round(v))\n    const old = this._value\n    this._value = clamped\n    this._formAssociation.sync()\n    this.requestUpdate('value', old)\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formAssociation.isFormDisabled()\n  }\n\n  @property({ type: Number, reflect: true })\n  get min(): number {\n    return this._min\n  }\n\n  set min(v: unknown) {\n    this._min = normalizeNumber(v, -Infinity, Infinity, 0)\n  }\n\n  @property({ type: Number, reflect: true })\n  get max(): number {\n    return this._max\n  }\n\n  set max(v: unknown) {\n    this._max = normalizeNumber(v, -Infinity, Infinity, Infinity)\n  }\n\n  @property({ type: Number, reflect: true })\n  get step(): number {\n    return this._step\n  }\n\n  // 步进值，默认 1；若声明了 precision 则以 precision 退化步进\n  set step(v: unknown) {\n    this._step = normalizeNumber(v, 0, Infinity, 1)\n  }\n\n  private get _effectiveStep(): number {\n    return this._step\n  }\n\n  private get atMin(): boolean {\n    return this._value <= this._min\n  }\n\n  private get atMax(): boolean {\n    return this._value >= this._max\n  }\n\n  private readonly _formAssociation = defineFormAssociation<number>({\n    host: this,\n    getState: () => this._value,\n    setState: value => {\n      this.value = value\n    },\n    getFormValue: () => String(this._value),\n    getFormState: () => String(this._value),\n    restoreState: state => {\n      if (typeof state !== 'string') return\n      const value = Number(state)\n      if (Number.isFinite(value)) this.value = value\n    },\n    syncValidity: () => this._syncValidity()\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  formResetCallback() {\n    this._formAssociation.reset()\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formAssociation.setDisabled(disabled)\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this._formAssociation.restore(state)\n  }\n\n  override updated() {\n    this._syncValidity()\n    this.toggleAttribute('focused', this._focused)\n  }\n\n  private _syncValidity() {\n    const input = this.shadowRoot?.querySelector('input')\n    const internals = this._formAssociation.getInternals()\n    if (!internals || !input || typeof internals.setValidity !== 'function') return\n    if (this._isDisabled || input.validity.valid) {\n      internals.setValidity({})\n      return\n    }\n    const flags: ValidityStateFlags = {}\n    if (input.validity.valueMissing) flags.valueMissing = true\n    if (input.validity.rangeUnderflow) flags.rangeUnderflow = true\n    if (input.validity.rangeOverflow) flags.rangeOverflow = true\n    if (input.validity.stepMismatch) flags.stepMismatch = true\n    internals.setValidity(flags, input.validationMessage, input)\n  }\n\n  private clamp(v: number): number {\n    return Math.min(this._max, Math.max(this._min, v))\n  }\n\n  private round(v: number): number {\n    const f = 10 ** this.precision\n    return Math.round(v * f) / f\n  }\n\n  private setValueAndNotify(v: number) {\n    this.value = this.clamp(this.round(v))\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n  }\n\n  private handleStep(direction: 1 | -1) {\n    if (this._isDisabled || this.readonly) return\n    this.setValueAndNotify(this._value + direction * this._effectiveStep)\n  }\n\n  private handleInput(e: Event) {\n    if (this.readonly) return\n    if (!(e.target instanceof HTMLInputElement)) return\n    const raw = e.target.value\n    if (raw === '' || raw === '-') return\n    this._value = this.clamp(this.round(Number(raw)))\n    this._formAssociation.sync()\n    this._syncValidity()\n  }\n\n  // 原生 change 不 composed，被 shadow root 挡住；文本失焦提交时补发 composed 事件，\n  // 与 ArrowUp/ArrowDown 的 change 行为对齐。\n  private handleNativeChange(e: Event) {\n    if (this.readonly) return\n    if (!(e.target instanceof HTMLInputElement)) return\n    const raw = e.target.value\n    if (raw === '' || raw === '-') return\n    this._value = this.clamp(this.round(Number(raw)))\n    this._formAssociation.sync()\n    this._syncValidity()\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private handleKeydown(e: KeyboardEvent) {\n    if (this._isDisabled || this.readonly) return\n    if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      this.setValueAndNotify(this._value + this._effectiveStep)\n      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      this.setValueAndNotify(this._value - this._effectiveStep)\n      this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n    }\n  }\n\n  private handleFocus() {\n    if (!this._isDisabled) this._focused = true\n  }\n\n  private handleBlur() {\n    this._focused = false\n  }\n\n  override render() {\n    return html`\n      <div class=\"wui-glass wui-input-inner\">\n        <button\n          class=\"num-btn\"\n          aria-label=\"Decrease\"\n          ?disabled=${this._isDisabled || this.readonly || this.atMin}\n          @click=${() => this.handleStep(-1)}\n        >\n          <web-ui-icon .icon=${lucideMinus}></web-ui-icon>\n        </button>\n        <input\n          type=\"number\"\n          placeholder=${this.placeholder}\n          name=${this.name}\n          .value=${String(this._value)}\n          ?disabled=${this._isDisabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          @input=${this.handleInput}\n          @change=${this.handleNativeChange}\n          @keydown=${this.handleKeydown}\n          @focus=${this.handleFocus}\n          @blur=${this.handleBlur}\n        />\n        <button\n          class=\"num-btn\"\n          aria-label=\"Increase\"\n          ?disabled=${this._isDisabled || this.readonly || this.atMax}\n          @click=${() => this.handleStep(1)}\n        >\n          <web-ui-icon .icon=${lucidePlus}></web-ui-icon>\n        </button>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-input-number': WebUiInputNumber\n  }\n}\n"],"mappings":"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"}

package/dist/components/input-number/style.js

@@ -1,5 +1,5 @@
 //#region src/components/input-number/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.wui-input-inner{box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-button-size,40px);height:var(--wui-button-size,40px);transition:border-color var(--wui-duration-focus,.2s), box-shadow var(--wui-duration-focus,.2s);border-radius:2147483647px;align-items:center;gap:4px;padding:0 4px;display:flex;position:relative}:host([focused]) .wui-input-inner{--wui-glass-shadow:var(--wui-shadow-glass,0 2px 16px #0000000f), 0 0 0 3px var(--wui-focus-ring,#08f6);border-color:var(--wui-color-border-strong,#006ee680)}input{min-width:48px;height:100%;font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-align:center;background:0 0;border:none;outline:none;flex:1;margin:0;padding:0}input::-webkit-inner-spin-button{appearance:none;margin:0}input::-webkit-outer-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield}input:disabled{cursor:not-allowed;opacity:.4}.num-btn{cursor:pointer;width:32px;height:32px;color:var(--wui-color-text-muted,#6a6a6a);transition:background-color var(--wui-duration-trigger,.16s) ease;background:0 0;border:none;border-radius:2147483647px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.num-btn:disabled{cursor:not-allowed;opacity:.4}.num-btn:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px}@media (hover:hover) and (pointer:fine){.num-btn:hover:not(:disabled){background:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 12%, transparent)}}.num-btn:active:not(:disabled){background:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 18%, transparent)}@media (prefers-reduced-motion:reduce){.num-btn{transition:background-color var(--wui-duration-trigger,.16s) ease}}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.wui-input-inner{box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-control-size,40px);height:var(--wui-control-size,40px);transition:border-color var(--wui-duration-focus,.2s), box-shadow var(--wui-duration-focus,.2s);border-radius:2147483647px;align-items:center;gap:4px;padding:0 4px;display:flex;position:relative}:host([focused]) .wui-input-inner{--wui-internal-glass-focus-ring:inset 0 0 0 1px var(--wui-color-accent,#08f), 0 0 0 var(--wui-focus-ring-width,3px) var(--wui-color-focus-ring,#08f6)}input{min-width:48px;height:100%;font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-align:center;background:0 0;border:none;outline:none;flex:1;margin:0;padding:0}input::-webkit-inner-spin-button{appearance:none;margin:0}input::-webkit-outer-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield}input:disabled{cursor:not-allowed;opacity:.4}.num-btn{cursor:pointer;width:32px;height:32px;color:var(--wui-color-text-secondary,#6a6a6a);transition:background-color var(--wui-duration-trigger,.16s) ease;background:0 0;border:none;border-radius:2147483647px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.num-btn:disabled{cursor:not-allowed;opacity:.4}.num-btn:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px}@media (hover:hover) and (pointer:fine){.num-btn:hover:not(:disabled){background:var(--wui-color-state-layer-hover,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent))}}.num-btn:active:not(:disabled){background:var(--wui-color-state-layer-active,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent))}@media (prefers-reduced-motion:reduce){.num-btn{transition:background-color var(--wui-duration-trigger,.16s) ease}}";
 //#endregion
 export { e as default };
 

package/dist/components/input-number/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/input-number/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.wui-input-inner {\n  position: relative;\n\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  box-sizing: border-box;\n  width: var(--wui-input-width, 200px);\n  min-width: var(--wui-button-size, 40px);\n  height: var(--wui-button-size, 40px);\n  padding: 0 4px;\n  border-radius: calc(infinity * 1px);\n\n  transition:\n    border-color var(--wui-duration-focus, 200ms),\n    box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([focused]) .wui-input-inner {\n  --wui-glass-shadow:\n    var(--wui-shadow-glass, 0 2px 16px rgb(0 0 0 / 0.06)), 0 0 0 3px var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n  border-color: var(--wui-color-border-strong, rgb(0 110 230 / 0.5));\n}\n\ninput {\n  flex: 1;\n\n  min-width: 48px;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  /* 表单控件不继承字体；显式继承以对齐宿主排版，避免 UA 默认字体差异 */\n  font: inherit;\n  font-size: var(--wui-font-size, 14px);\n  color: var(--wui-color-text, #1b1b1b);\n  text-align: center;\n\n  background: transparent;\n  outline: none;\n\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button {\n    margin: 0;\n    appearance: none;\n  }\n\n  &[type='number'] {\n    appearance: textfield;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.num-btn {\n  cursor: pointer;\n\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: calc(infinity * 1px);\n\n  color: var(--wui-color-text-muted, #6a6a6a);\n\n  background: transparent;\n\n  transition: background-color var(--wui-duration-trigger, 160ms) ease;\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  &:focus-visible {\n    outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .num-btn:hover:not(:disabled) {\n    background: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 12%, transparent);\n  }\n}\n\n.num-btn:active:not(:disabled) {\n  background: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 18%, transparent);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .num-btn {\n    transition: background-color var(--wui-duration-trigger, 160ms) ease;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/input-number/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.wui-input-inner {\n  position: relative;\n\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  box-sizing: border-box;\n  width: var(--wui-input-width, 200px);\n  min-width: var(--wui-control-size, 40px);\n  height: var(--wui-control-size, 40px);\n  padding: 0 4px;\n  border-radius: calc(infinity * 1px);\n\n  transition:\n    border-color var(--wui-duration-focus, 200ms),\n    box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([focused]) .wui-input-inner {\n  --wui-internal-glass-focus-ring:\n    inset 0 0 0 1px var(--wui-color-accent, #08f),\n    0 0 0 var(--wui-focus-ring-width, 3px) var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n}\n\ninput {\n  flex: 1;\n\n  min-width: 48px;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  /* 表单控件不继承字体；显式继承以对齐宿主排版，避免 UA 默认字体差异 */\n  font: inherit;\n  font-size: var(--wui-font-size, 14px);\n  color: var(--wui-color-text, #1b1b1b);\n  text-align: center;\n\n  background: transparent;\n  outline: none;\n\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button {\n    margin: 0;\n    appearance: none;\n  }\n\n  &[type='number'] {\n    appearance: textfield;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n.num-btn {\n  cursor: pointer;\n\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: calc(infinity * 1px);\n\n  color: var(--wui-color-text-secondary, #6a6a6a);\n\n  background: transparent;\n\n  transition: background-color var(--wui-duration-trigger, 160ms) ease;\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  &:focus-visible {\n    outline: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .num-btn:hover:not(:disabled) {\n    background: var(--wui-color-state-layer-hover, color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent));\n  }\n}\n\n.num-btn:active:not(:disabled) {\n  background: var(--wui-color-state-layer-active, color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .num-btn {\n    transition: background-color var(--wui-duration-trigger, 160ms) ease;\n  }\n}\n"],"mappings":""}

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

@@ -1,11 +1,61 @@
 import { LitElement } from 'lit';
+/**
+ * Layout 组件 - 提供页面布局框架，支持可折叠侧边栏
+ *
+ * @fires sidebar-collapsed-change - 桌面端侧边栏折叠状态变更请求时触发
+ * @fires sidebar-open-change - 移动端侧边栏 Drawer 开关请求时触发
+ * @slot banner - 顶部 Banner 区域（全宽，随页面滚动，可选）
+ * @slot header - 内容区顶部 header（sticky）
+ * @slot sidebar - 侧边栏内容；Consumer 决定其内部固定区域与滚动容器
+ * @slot tabbar - 底部 tabbar 区域
+ * @slot default - 主内容区
+ */
 export declare class WebUiLayout extends LitElement {
     static styles: import('lit').CSSResult[];
-    private _sidebarOpen;
+    /**
+     * 桌面端 Sidebar 的持久布局偏好。
+     *
+     * `true` 只会将桌面 Sidebar 收窄到 `collapsedWidth`，不会影响移动端 Drawer。
+     * 它不与 `sidebarOpen` 合并：前者是跨视口保留的密度选择，后者是移动端瞬时的 modal 可见性。
+     */
+    sidebarCollapsed: boolean;
+    sidebarWidth: string;
+    collapsedWidth: string;
+    /**
+     * 移动端 headless Drawer 的瞬时可见性。
+     *
+     * Drawer Toggle、Escape 和遮罩关闭都通过 `sidebar-open-change` 请求更新它；它不会改变桌面端的折叠偏好。
+     * 因而不与 `sidebarCollapsed` 合并，避免响应式切换时将一次移动端交互误写为桌面端布局选择。
+     */
+    sidebarOpen: boolean;
+    /**
+     * 启用 header 晕染效果
+     */
+    headerGlow: boolean;
+    private _isMobile;
+    private readonly _visibleBanner;
+    private readonly _visibleBannerController;
     private _toggleSidebar;
-    private _closeSidebar;
-    private _onSidebarClick;
+    private _emitSidebarCollapsedChange;
+    private _emitSidebarOpenChange;
+    private _onDrawerChange;
+    private _checkMobile;
+    private _resizeTimeout;
+    private _handleResize;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private _onBannerSlotChange;
+    private _syncBannerPresence;
     render(): import('lit').TemplateResult<1>;
+    readonly $events: {
+        'sidebar-collapsed-change': CustomEvent<{
+            collapsed: boolean;
+        }>;
+        'sidebar-open-change': CustomEvent<{
+            open: boolean;
+        }>;
+    };
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/layout/index.js

@@ -1,65 +1,172 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import "../icon/index.js";
 import t from "../../icons/generated/radix-icons-panel-left-minimized.js";
 import n from "../../assets/glass.js";
 import "../button/index.js";
-import r from "./style.js";
-import { LitElement as i, html as a, unsafeCSS as o } from "lit";
-import { customElement as s, state as c } from "lit/decorators.js";
-import { classMap as l } from "lit/directives/class-map.js";
+import "../drawer/index.js";
+import { VisibleAreaController as r, defineVisibleAreaTracker as i } from "../../shared/visible-area/index.js";
+import a from "./style.js";
+import { LitElement as o, html as s, unsafeCSS as c } from "lit";
+import { customElement as l, property as u, state as d } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { styleMap as p } from "lit/directives/style-map.js";
 //#region src/components/layout/index.ts
-var u = class extends i {
+var m = class extends o {
 	constructor(...e) {
-		super(...e), this._sidebarOpen = !1;
+		super(...e), this.sidebarCollapsed = !1, this.sidebarWidth = "240px", this.collapsedWidth = "72px", this.sidebarOpen = !1, this.headerGlow = !1, this._isMobile = !1, this._visibleBanner = i({ onVisibleAreaChange: (e) => {
+			this.style.setProperty("--wui-layout-visible-banner-height", `${e.height}px`);
+		} }).make(), this._visibleBannerController = new r(this, this._visibleBanner), this._resizeTimeout = null, this._handleResize = () => {
+			this._resizeTimeout !== null && clearTimeout(this._resizeTimeout), this._resizeTimeout = setTimeout(() => {
+				this._checkMobile(), this._resizeTimeout = null;
+			}, 100);
+		};
 	}
 	static {
-		this.styles = [o(n), o(r)];
+		this.styles = [c(n), c(a)];
 	}
 	_toggleSidebar() {
-		this._sidebarOpen = !this._sidebarOpen;
+		if (this._isMobile) {
+			this._emitSidebarOpenChange(!this.sidebarOpen);
+			return;
+		}
+		this._emitSidebarCollapsedChange(!this.sidebarCollapsed);
 	}
-	_closeSidebar() {
-		this._sidebarOpen = !1;
+	_emitSidebarCollapsedChange(e) {
+		this.dispatchEvent(new CustomEvent("sidebar-collapsed-change", {
+			detail: { collapsed: e },
+			bubbles: !0,
+			composed: !0
+		}));
 	}
-	_onSidebarClick(e) {
-		e.target.closest("a, button, [role=\"button\"]") && this._closeSidebar();
+	_emitSidebarOpenChange(e) {
+		this.dispatchEvent(new CustomEvent("sidebar-open-change", {
+			detail: { open: e },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_onDrawerChange(e) {
+		e.stopPropagation(), this._emitSidebarOpenChange(e.detail.open);
+	}
+	_checkMobile() {
+		this._isMobile = window.innerWidth <= 640;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._checkMobile(), window.addEventListener("resize", this._handleResize), this.updateComplete.then(() => {
+			this.isConnected && this._syncBannerPresence();
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("resize", this._handleResize), this._resizeTimeout !== null && clearTimeout(this._resizeTimeout), this._resizeTimeout = null;
+	}
+	firstUpdated() {
+		this._syncBannerPresence();
+	}
+	_onBannerSlotChange() {
+		this._syncBannerPresence();
+	}
+	_syncBannerPresence() {
+		let e = this.renderRoot.querySelector("slot[name=\"banner\"]")?.assignedNodes().some((e) => e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && !!e.textContent?.trim()) ?? !1, t = this.shadowRoot?.querySelector(".layout-banner") ?? null;
+		this._visibleBanner.setTarget(e ? t : null);
 	}
 	render() {
-		return a`
-      <div class="layout-grid">
-        <header>
-          <slot name="header"></slot>
-        </header>
-        <main>
-          <slot></slot>
-        </main>
-        <aside class="${l({ open: this._sidebarOpen })}" @click="${this._onSidebarClick}">
-          <div class="menu wui-glass"><slot name="sidebar"></slot></div>
-        </aside>
-        <footer>
-          <slot name="tabbar"></slot>
-        </footer>
-      </div>
-
-      <div class="${l({
-			backdrop: !0,
-			open: this._sidebarOpen
-		})}" @click="${this._closeSidebar}"></div>
-
+		let e = !this.sidebarCollapsed, n = this._isMobile ? {} : { width: this.sidebarCollapsed ? this.collapsedWidth : this.sidebarWidth }, r = e ? "折叠侧边栏" : "展开侧边栏", i = s`
       <web-ui-button
-        class="mobile-toggle"
+        class="sidebar-toggle"
         icon
-        variant="glass"
+        variant="secondary"
         @click="${this._toggleSidebar}"
-        aria-label="打开导航菜单"
+        aria-label="${r}"
       >
         <web-ui-icon .icon=${t}></web-ui-icon>
       </web-ui-button>
+    `, a = s`
+      <div class="sidebar-viewport">
+        <slot name="sidebar"></slot>
+      </div>
+    `, o = s`
+      <div class="layout-body">
+        <div class="sidebar-wrapper">
+          <aside
+            class="${f({ collapsed: !e })}"
+            style="${p(n)}"
+          >
+            <div class="aside-panel wui-glass">
+              ${a}
+              <div class="sidebar-toggle-area">${i}</div>
+            </div>
+          </aside>
+        </div>
+        <div class="layout-content">
+          <header>
+            <slot name="header"></slot>
+          </header>
+          <main><slot></slot></main>
+          <footer><slot name="tabbar"></slot></footer>
+        </div>
+      </div>
+    `, c = s`
+      <div class="layout-content">
+        <header>
+          <web-ui-button
+            class="mobile-toggle"
+            icon
+            variant="secondary"
+            @click="${this._toggleSidebar}"
+            aria-label="打开导航菜单"
+          >
+            <web-ui-icon .icon=${t}></web-ui-icon>
+          </web-ui-button>
+          <slot name="header"></slot>
+        </header>
+        <main><slot></slot></main>
+        <footer><slot name="tabbar"></slot></footer>
+      </div>
+
+      <web-ui-drawer
+        placement="left"
+        ?open="${this.sidebarOpen}"
+        request-only
+        dialog-label="主导航"
+        @open-change="${this._onDrawerChange}"
+        style="${p({ "--wui-layout-mobile-sidebar-width": this.sidebarWidth })}"
+        headless
+      >
+        <div class="aside-panel wui-glass mobile-sidebar">${a}</div>
+      </web-ui-drawer>
+    `;
+		return s`
+      <div class="layout-page">
+        <div class="layout-banner">
+          <slot name="banner" @slotchange="${this._onBannerSlotChange}"></slot>
+        </div>
+        ${this._isMobile ? c : o}
+      </div>
     `;
 	}
 };
-e([c()], u.prototype, "_sidebarOpen", void 0), u = e([s("web-ui-layout")], u);
+e([u({
+	type: Boolean,
+	attribute: "sidebar-collapsed",
+	reflect: !0
+})], m.prototype, "sidebarCollapsed", void 0), e([u({
+	type: String,
+	attribute: "sidebar-width",
+	reflect: !0
+})], m.prototype, "sidebarWidth", void 0), e([u({
+	type: String,
+	attribute: "collapsed-width",
+	reflect: !0
+})], m.prototype, "collapsedWidth", void 0), e([u({
+	type: Boolean,
+	attribute: "sidebar-open",
+	reflect: !0
+})], m.prototype, "sidebarOpen", void 0), e([u({
+	type: Boolean,
+	attribute: "header-glow",
+	reflect: !0
+})], m.prototype, "headerGlow", void 0), e([d()], m.prototype, "_isMobile", void 0), m = e([l("web-ui-layout")], m);
 //#endregion
-export { u as WebUiLayout };
+export { m as WebUiLayout };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/layout/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport '@/components/icon'\nimport '@/components/button'\nimport { radixIconsPanelLeftMinimized } from '@/icons'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-layout')\nexport class WebUiLayout extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @state() private _sidebarOpen = false\n\n  private _toggleSidebar() {\n    this._sidebarOpen = !this._sidebarOpen\n  }\n\n  private _closeSidebar() {\n    this._sidebarOpen = false\n  }\n\n  private _onSidebarClick(e: MouseEvent) {\n    const target = e.target as HTMLElement\n    if (target.closest('a, button, [role=\"button\"]')) {\n      this._closeSidebar()\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"layout-grid\">\n        <header>\n          <slot name=\"header\"></slot>\n        </header>\n        <main>\n          <slot></slot>\n        </main>\n        <aside class=\"${classMap({ open: this._sidebarOpen })}\" @click=\"${this._onSidebarClick}\">\n          <div class=\"menu wui-glass\"><slot name=\"sidebar\"></slot></div>\n        </aside>\n        <footer>\n          <slot name=\"tabbar\"></slot>\n        </footer>\n      </div>\n\n      <div class=\"${classMap({ backdrop: true, open: this._sidebarOpen })}\" @click=\"${this._closeSidebar}\"></div>\n\n      <web-ui-button\n        class=\"mobile-toggle\"\n        icon\n        variant=\"glass\"\n        @click=\"${this._toggleSidebar}\"\n        aria-label=\"打开导航菜单\"\n      >\n        <web-ui-icon .icon=${radixIconsPanelLeftMinimized}></web-ui-icon>\n      </web-ui-button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-layout': WebUiLayout\n  }\n}\n"],"mappings":";;;;;;;;;;AAYO,IAAM,IAAN,cAA0B,EAAW;;EAGV,aAAA,KAAA,eAAA;;;EAFP,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAI5D,iBAAyB;EACvB,KAAK,eAAe,CAAC,KAAK;CAC5B;CAEA,gBAAwB;EACtB,KAAK,eAAe;CACtB;CAEA,gBAAwB,GAAe;EAErC,AADe,EAAE,OACN,QAAQ,8BAA4B,KAC7C,KAAK,cAAc;CAEvB;CAEA,SAAkB;EAChB,OAAO,CAAI;;;;;;;;wBAQS,EAAS,EAAE,MAAM,KAAK,aAAa,CAAC,EAAE,YAAY,KAAK,gBAAgB;;;;;;;;oBAQ3E,EAAS;GAAE,UAAU;GAAM,MAAM,KAAK;EAAa,CAAC,EAAE,YAAY,KAAK,cAAc;;;;;;kBAMvF,KAAK,eAAe;;;6BAGT,EAA6B;;;CAGxD;AACF;AA/CG,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAJR,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/layout/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport '@/components/icon'\nimport '@/components/button'\nimport '@/components/drawer'\nimport { radixIconsPanelLeftMinimized } from '@/icons'\nimport { defineVisibleAreaTracker, VisibleAreaController } from '@/shared/visible-area'\n\nimport style from './style.css?inline'\n\n/**\n * Layout 组件 - 提供页面布局框架，支持可折叠侧边栏\n *\n * @fires sidebar-collapsed-change - 桌面端侧边栏折叠状态变更请求时触发\n * @fires sidebar-open-change - 移动端侧边栏 Drawer 开关请求时触发\n * @slot banner - 顶部 Banner 区域（全宽，随页面滚动，可选）\n * @slot header - 内容区顶部 header（sticky）\n * @slot sidebar - 侧边栏内容；Consumer 决定其内部固定区域与滚动容器\n * @slot tabbar - 底部 tabbar 区域\n * @slot default - 主内容区\n */\n@customElement('web-ui-layout')\nexport class WebUiLayout extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  /**\n   * 桌面端 Sidebar 的持久布局偏好。\n   *\n   * `true` 只会将桌面 Sidebar 收窄到 `collapsedWidth`，不会影响移动端 Drawer。\n   * 它不与 `sidebarOpen` 合并：前者是跨视口保留的密度选择，后者是移动端瞬时的 modal 可见性。\n   */\n  @property({ type: Boolean, attribute: 'sidebar-collapsed', reflect: true })\n  sidebarCollapsed = false\n\n  @property({ type: String, attribute: 'sidebar-width', reflect: true })\n  sidebarWidth = '240px'\n\n  @property({ type: String, attribute: 'collapsed-width', reflect: true })\n  collapsedWidth = '72px'\n\n  /**\n   * 移动端 headless Drawer 的瞬时可见性。\n   *\n   * Drawer Toggle、Escape 和遮罩关闭都通过 `sidebar-open-change` 请求更新它；它不会改变桌面端的折叠偏好。\n   * 因而不与 `sidebarCollapsed` 合并，避免响应式切换时将一次移动端交互误写为桌面端布局选择。\n   */\n  @property({ type: Boolean, attribute: 'sidebar-open', reflect: true })\n  sidebarOpen = false\n\n  /**\n   * 启用 header 晕染效果\n   */\n  @property({ type: Boolean, attribute: 'header-glow', reflect: true })\n  headerGlow = false\n\n  @state() private _isMobile = false\n\n  private readonly _visibleBanner = defineVisibleAreaTracker({\n    onVisibleAreaChange: area => {\n      this.style.setProperty('--wui-layout-visible-banner-height', `${area.height}px`)\n    }\n  }).make()\n\n  private readonly _visibleBannerController = new VisibleAreaController(this, this._visibleBanner)\n\n  private _toggleSidebar() {\n    if (this._isMobile) {\n      this._emitSidebarOpenChange(!this.sidebarOpen)\n      return\n    }\n\n    this._emitSidebarCollapsedChange(!this.sidebarCollapsed)\n  }\n\n  private _emitSidebarCollapsedChange(collapsed: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('sidebar-collapsed-change', {\n        detail: { collapsed },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _emitSidebarOpenChange(open: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('sidebar-open-change', {\n        detail: { open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _onDrawerChange(e: CustomEvent<{ open: boolean }>) {\n    e.stopPropagation()\n    this._emitSidebarOpenChange(e.detail.open)\n  }\n\n  private _checkMobile() {\n    this._isMobile = window.innerWidth <= 640\n  }\n\n  private _resizeTimeout: ReturnType<typeof setTimeout> | null = null\n\n  private _handleResize = () => {\n    if (this._resizeTimeout !== null) clearTimeout(this._resizeTimeout)\n    this._resizeTimeout = setTimeout(() => {\n      this._checkMobile()\n      this._resizeTimeout = null\n    }, 100)\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._checkMobile()\n    window.addEventListener('resize', this._handleResize)\n    void this.updateComplete.then(() => {\n      if (this.isConnected) this._syncBannerPresence()\n    })\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    window.removeEventListener('resize', this._handleResize)\n    if (this._resizeTimeout !== null) clearTimeout(this._resizeTimeout)\n    this._resizeTimeout = null\n  }\n\n  override firstUpdated() {\n    this._syncBannerPresence()\n  }\n\n  private _onBannerSlotChange() {\n    this._syncBannerPresence()\n  }\n\n  private _syncBannerPresence() {\n    const bannerSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"banner\"]')\n    const hasBanner =\n      bannerSlot\n        ?.assignedNodes()\n        .some(\n          node =>\n            node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim())\n        ) ?? false\n    const banner = this.shadowRoot?.querySelector<HTMLElement>('.layout-banner') ?? null\n    this._visibleBanner.setTarget(hasBanner ? banner : null)\n  }\n\n  override render() {\n    const isSidebarOpen = !this.sidebarCollapsed\n    const sidebarStyle = this._isMobile\n      ? {}\n      : { width: this.sidebarCollapsed ? this.collapsedWidth : this.sidebarWidth }\n\n    const toggleLabel = isSidebarOpen ? '折叠侧边栏' : '展开侧边栏'\n\n    const desktopToggle = html`\n      <web-ui-button\n        class=\"sidebar-toggle\"\n        icon\n        variant=\"secondary\"\n        @click=\"${this._toggleSidebar}\"\n        aria-label=\"${toggleLabel}\"\n      >\n        <web-ui-icon .icon=${radixIconsPanelLeftMinimized}></web-ui-icon>\n      </web-ui-button>\n    `\n\n    const sidebarViewport = html`\n      <div class=\"sidebar-viewport\">\n        <slot name=\"sidebar\"></slot>\n      </div>\n    `\n\n    // 桌面端布局\n    const desktopLayout = html`\n      <div class=\"layout-body\">\n        <div class=\"sidebar-wrapper\">\n          <aside\n            class=\"${classMap({\n              collapsed: !isSidebarOpen\n            })}\"\n            style=\"${styleMap(sidebarStyle)}\"\n          >\n            <div class=\"aside-panel wui-glass\">\n              ${sidebarViewport}\n              <div class=\"sidebar-toggle-area\">${desktopToggle}</div>\n            </div>\n          </aside>\n        </div>\n        <div class=\"layout-content\">\n          <header>\n            <slot name=\"header\"></slot>\n          </header>\n          <main><slot></slot></main>\n          <footer><slot name=\"tabbar\"></slot></footer>\n        </div>\n      </div>\n    `\n\n    // 移动端布局\n    const mobileLayout = html`\n      <div class=\"layout-content\">\n        <header>\n          <web-ui-button\n            class=\"mobile-toggle\"\n            icon\n            variant=\"secondary\"\n            @click=\"${this._toggleSidebar}\"\n            aria-label=\"打开导航菜单\"\n          >\n            <web-ui-icon .icon=${radixIconsPanelLeftMinimized}></web-ui-icon>\n          </web-ui-button>\n          <slot name=\"header\"></slot>\n        </header>\n        <main><slot></slot></main>\n        <footer><slot name=\"tabbar\"></slot></footer>\n      </div>\n\n      <web-ui-drawer\n        placement=\"left\"\n        ?open=\"${this.sidebarOpen}\"\n        request-only\n        dialog-label=\"主导航\"\n        @open-change=\"${this._onDrawerChange}\"\n        style=\"${styleMap({ '--wui-layout-mobile-sidebar-width': this.sidebarWidth })}\"\n        headless\n      >\n        <div class=\"aside-panel wui-glass mobile-sidebar\">${sidebarViewport}</div>\n      </web-ui-drawer>\n    `\n\n    return html`\n      <div class=\"layout-page\">\n        <div class=\"layout-banner\">\n          <slot name=\"banner\" @slotchange=\"${this._onBannerSlotChange}\"></slot>\n        </div>\n        ${this._isMobile ? mobileLayout : desktopLayout}\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    'sidebar-collapsed-change': CustomEvent<{ collapsed: boolean }>\n    'sidebar-open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-layout': WebUiLayout\n  }\n}\n"],"mappings":"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"}

package/dist/components/layout/style.js

@@ -1,5 +1,5 @@
 //#region src/components/layout/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.layout-grid{grid-template-areas:\"sidebar header\"\"sidebar content\";grid-template-columns:var(--web-ui-base-layout-sidebar-width,240px) 1fr;grid-template-rows:var(--web-ui-base-layout-header-height,64px) 1fr;box-sizing:border-box;min-height:100vh;display:grid}.layout-grid *{box-sizing:inherit}header{z-index:var(--wui-layer-header,10);grid-area:header;position:sticky;top:0;right:0}main{grid-area:content}aside{grid-area:sidebar;height:100vh;padding:8px;position:sticky;top:0;left:0}aside .menu{background-color:var(--wui-color-surface-overlay,#f6f6f6e0);border-radius:24px;height:100%}footer{grid-area:footer}.backdrop{display:none}.mobile-toggle{z-index:var(--wui-layer-header,20);visibility:hidden;position:fixed;top:12px;left:12px}@media (width<=640px){.layout-grid{grid-template-columns:1fr;grid-template-areas:\"header\"\"content\"}aside{z-index:var(--wui-layer-drawer,100);width:var(--web-ui-base-layout-sidebar-width,240px);height:100dvh;transition:transform var(--wui-duration-drawer-enter,.28s) ease;padding:8px;position:fixed;top:0;left:0;transform:translate(-100%)}aside.open{transform:translate(0)}.backdrop{z-index:var(--wui-layer-backdrop,90);background:#0000004d;display:none;position:fixed;inset:0}.backdrop.open{display:block}.mobile-toggle{visibility:visible}}";
+var e = "*,:before,:after{box-sizing:border-box}:host{--wui-layout-visible-banner-height:0px;--wui-layout-header-glow-color:var(--wui-color-page,#fff);--wui-internal-layout-header-glow-height:150%;display:block}.layout-page{flex-direction:column;min-height:100dvh;display:flex}.layout-banner{z-index:var(--wui-layer-banner,30);position:relative}.layout-body{flex:1;display:flex}.sidebar-wrapper{align-self:stretch;position:relative}.sidebar-viewport{flex:1;min-height:0}.mobile-sidebar{width:calc(var(--wui-layout-mobile-sidebar-width,240px) - 16px);border-radius:var(--wui-layout-sidebar-radius,28px);background-color:var(--wui-color-surface-overlay,#f6f6f6d1);flex-direction:column;max-width:calc(100vw - 16px);height:calc(100dvh - 16px);min-height:0;margin:8px;display:flex}aside{z-index:var(--wui-layer-sidebar,50);height:calc(100vh - var(--wui-layout-visible-banner-height));height:calc(100dvh - var(--wui-layout-visible-banner-height));max-height:calc(100vh - var(--wui-layout-visible-banner-height));max-height:calc(100dvh - var(--wui-layout-visible-banner-height));transition:width var(--wui-duration-layout,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));flex-direction:column;flex-shrink:0;padding:8px;display:flex;position:sticky;top:0}aside .aside-panel{border-radius:var(--wui-layout-sidebar-radius,28px);background-color:var(--wui-color-surface-overlay,#f6f6f6d1);flex-direction:column;flex:1;min-height:0;display:flex}aside .sidebar-toggle-area{flex-shrink:0;align-items:center;display:flex}aside .sidebar-toggle{width:fit-content;margin:8px}aside.collapsed .sidebar-viewport{overflow:hidden}.layout-content{flex-direction:column;flex:1;min-width:0;display:flex}header{isolation:isolate;z-index:var(--wui-layer-header,10);align-items:center;gap:8px;display:flex;position:sticky;top:0}:host([header-glow]) header:before{pointer-events:none;content:\"\";z-index:-1;inset:calc(100% - var(--wui-internal-layout-header-glow-height)) -20px auto;height:var(--wui-internal-layout-header-glow-height);background:linear-gradient(to bottom, var(--wui-layout-header-glow-color) 0%, var(--wui-layout-header-glow-color) 55%, color-mix(in srgb, var(--wui-layout-header-glow-color) 90%, transparent) 62%, color-mix(in srgb, var(--wui-layout-header-glow-color) 40%, transparent) 70%, transparent 100%);filter:blur(10px);position:absolute;transform:scaleY(1.5)}main{flex:1}footer{z-index:var(--wui-layer-tabbar,40);position:sticky;bottom:0}@media (width<=640px){aside,.sidebar-wrapper{display:none}}@media (prefers-reduced-motion:reduce){aside{transition:none}}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/layout/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.layout-grid {\n  display: grid;\n  grid-template-areas:\n    'sidebar header'\n    'sidebar content';\n  grid-template-columns: var(--web-ui-base-layout-sidebar-width, 240px) 1fr;\n  grid-template-rows: var(--web-ui-base-layout-header-height, 64px) 1fr;\n\n  box-sizing: border-box;\n  min-height: 100dvh;\n  min-height: 100vh;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\nheader {\n  position: sticky;\n  z-index: var(--wui-layer-header, 10);\n  top: 0;\n  right: 0;\n\n  grid-area: header;\n}\n\nmain {\n  grid-area: content;\n}\n\naside {\n  position: sticky;\n  top: 0;\n  left: 0;\n\n  grid-area: sidebar;\n\n  height: 100dvh;\n  height: 100vh;\n  padding: 8px;\n\n  .menu {\n    height: 100%;\n    border-radius: 24px;\n    background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n  }\n}\n\nfooter {\n  grid-area: footer;\n}\n\n.backdrop {\n  display: none;\n}\n\n.mobile-toggle {\n  position: fixed;\n  z-index: var(--wui-layer-header, 20);\n  top: 12px;\n  left: 12px;\n\n  visibility: hidden;\n}\n\n@media (width <= 640px) {\n  .layout-grid {\n    grid-template-areas:\n      'header'\n      'content';\n    grid-template-columns: 1fr;\n  }\n\n  aside {\n    position: fixed;\n    z-index: var(--wui-layer-drawer, 100);\n    top: 0;\n    left: 0;\n    transform: translateX(-100%);\n\n    width: var(--web-ui-base-layout-sidebar-width, 240px);\n    height: 100dvh;\n    padding: 8px;\n\n    transition: transform var(--wui-duration-drawer-enter, 280ms) ease;\n  }\n\n  aside.open {\n    transform: translateX(0);\n  }\n\n  .backdrop {\n    position: fixed;\n    z-index: var(--wui-layer-backdrop, 90);\n    inset: 0;\n\n    display: none;\n\n    background: rgb(0 0 0 / 0.3);\n  }\n\n  .backdrop.open {\n    display: block;\n  }\n\n  .mobile-toggle {\n    visibility: visible;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/layout/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --wui-layout-visible-banner-height: 0px;\n  --wui-layout-header-glow-color: var(--wui-color-page, #fff);\n\n  /*\n   * 内部变量：晕染伪元素的总高度（相对于 header 盒子高度的百分比）。\n   * 默认 150% 表示伪元素从 header 顶部向上延伸 50% header 高度，\n   * 向下延伸 100% header 高度。sticky 到顶后，可见范围为 header 底部到\n   * 下方 100% header 高度处，实现从实色到透明的自然过渡。\n   *\n   * 调大此值会加深晕染浓度并扩大覆盖范围，但过大会遮挡内容区。\n   */\n  --wui-internal-layout-header-glow-height: 150%;\n  display: block;\n}\n\n/* 页面级滚动容器。Banner 位于正文前，随页面一起滚动。 */\n.layout-page {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\n\n.layout-banner {\n  position: relative;\n  z-index: var(--wui-layer-banner, 30);\n}\n\n/* 参考 book-fe：正文区域负责撑高 sidebar 的 relative wrapper。 */\n.layout-body {\n  display: flex;\n  flex: 1;\n}\n\n.sidebar-wrapper {\n  position: relative;\n  align-self: stretch;\n}\n\n/* Layout 只提供可用高度；Consumer 决定其内部 scrollport。 */\n.sidebar-viewport {\n  flex: 1;\n  min-height: 0;\n}\n\n/* headless drawer 只提供 overlay 基础设施；此卡片与桌面端 aside-panel 相同。 */\n.mobile-sidebar {\n  display: flex;\n  flex-direction: column;\n\n  width: calc(var(--wui-layout-mobile-sidebar-width, 240px) - 16px);\n  max-width: calc(100vw - 16px);\n  height: calc(100vh - 16px);\n  height: calc(100dvh - 16px);\n  min-height: 0;\n  margin: 8px;\n  border-radius: var(--wui-layout-sidebar-radius, 28px);\n\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82));\n}\n\n/*\n * Banner 可见时，组件用它的当前可见高度缩短 aside；Banner 滚出后该值归零。\n * 因而圆角卡片始终完整可见，同时 sticky Sidebar 可在 Banner 消失后填满视口。\n */\naside {\n  position: sticky;\n  z-index: var(--wui-layer-sidebar, 50);\n  top: 0;\n\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n\n  height: calc(100vh - var(--wui-layout-visible-banner-height));\n  height: calc(100dvh - var(--wui-layout-visible-banner-height));\n  max-height: calc(100vh - var(--wui-layout-visible-banner-height));\n  max-height: calc(100dvh - var(--wui-layout-visible-banner-height));\n  padding: 8px;\n\n  transition: width var(--wui-duration-layout, 200ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  .aside-panel {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    min-height: 0;\n    border-radius: var(--wui-layout-sidebar-radius, 28px);\n\n    background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82));\n  }\n\n  .sidebar-toggle-area {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .sidebar-toggle {\n    width: fit-content;\n    margin: 8px;\n  }\n\n  &.collapsed {\n    .sidebar-viewport {\n      overflow: hidden;\n    }\n  }\n}\n\n.layout-content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n}\n\nheader {\n  /* 将负层级 glow 限定在 Header 的局部 stacking context，slot 内容自然位于其上。 */\n  isolation: isolate;\n  position: sticky;\n  z-index: var(--wui-layer-header, 10);\n  top: 0;\n\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n/*\n * Header 的装饰性背景晕染\n * ========================\n *\n * 伪元素随 header 的实际盒子尺寸和 sticky 位置变化，自然适配 header slot 的\n * 高度与位置，无需单独维护一层 DOM。\n *\n * 几何模型（以 --wui-internal-layout-header-glow-height: 150% 为例）：\n *   伪元素总高度 = 1.5 × header 高度\n *   inset top    = 100% - 150% = -50%（即向上延伸 0.5 个 header 高度）\n *   sticky 到顶后，上半段位于视口外，下半段（header 底部 → 下方 1 header 高度）\n *   为可见区域，形成从实色到透明的渐变过渡。\n *\n * 渐变浓度控制（0% 在伪元素顶部，100% 在底部）：\n *   0%  - 55%   实色（覆盖可见区域上方约 1/3，确保 header 后方完全不透明）\n *   55% - 70%   快速衰减（90% → 40% 混合透明，覆盖中间过渡带）\n *   70% - 100%  柔和收尾（40% → 完全透明，过渡到内容区背景）\n */\n:host([header-glow]) header::before {\n  pointer-events: none;\n  content: '';\n\n  position: absolute;\n  z-index: -1;\n  inset: calc(100% - var(--wui-internal-layout-header-glow-height)) -20px auto;\n  transform: scaleY(1.5);\n\n  height: var(--wui-internal-layout-header-glow-height);\n\n  background: linear-gradient(\n    to bottom,\n    var(--wui-layout-header-glow-color) 0%,\n    var(--wui-layout-header-glow-color) 55%,\n    color-mix(in srgb, var(--wui-layout-header-glow-color) 90%, transparent) 62%,\n    color-mix(in srgb, var(--wui-layout-header-glow-color) 40%, transparent) 70%,\n    transparent 100%\n  );\n  filter: blur(10px);\n}\n\nmain {\n  flex: 1;\n}\n\nfooter {\n  position: sticky;\n  z-index: var(--wui-layer-tabbar, 40);\n  bottom: 0;\n}\n\n@media (width <= 640px) {\n  aside,\n  .sidebar-wrapper {\n    display: none;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  aside {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/option/index.js

@@ -1,4 +1,4 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import "../icon/index.js";
 import t from "../../icons/generated/heroicons-check-16-solid.js";
 import n from "./style.js";

package/dist/components/option/style.js

@@ -1,5 +1,5 @@
 //#region src/components/option/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([disabled]){cursor:not-allowed;opacity:.4}.option-label{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;height:32px;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;transition:color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), background-color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));border-radius:2147483647px;align-items:center;gap:8px;padding:0 8px;display:flex;overflow:hidden}.check{flex-shrink:0}.content-wrap{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:host(:not([selected])) .check{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0}.option-label:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px}:host([active]) .option-label{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}@media (hover:hover) and (pointer:fine){.option-label:hover{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}}:host([disabled]) .option-label{cursor:not-allowed}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([disabled]){cursor:not-allowed;opacity:.4}.option-label{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;height:32px;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;transition:color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), background-color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));border-radius:2147483647px;align-items:center;gap:8px;padding:0 8px;display:flex;overflow:hidden}.check{display:var(--wui-option-check-display,block);flex-shrink:0}.content-wrap{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:host(:not([selected])) .check{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0}.option-label:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px}:host([active]) .option-label{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}@media (hover:hover) and (pointer:fine){.option-label:hover{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}}:host([disabled]) .option-label{cursor:not-allowed}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/option/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.option-label {\n  cursor: pointer;\n  user-select: none;\n\n  overflow: hidden;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 8px;\n  border-radius: calc(infinity * 1px);\n\n  font-size: var(--wui-font-size, 14px);\n  color: var(--wui-color-text, #1b1b1b);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  transition:\n    color var(--wui-duration-feedback, 100ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n    background-color var(--wui-duration-feedback, 100ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.check {\n  flex-shrink: 0;\n}\n\n.content-wrap {\n  overflow: hidden;\n  flex: 1;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(:not([selected])) .check {\n  visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  flex-shrink: 0;\n}\n\n.option-label:focus-visible {\n  outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n  outline-offset: 2px;\n}\n\n:host([active]) .option-label {\n  color: var(--wui-color-on-accent, #fff);\n  background: var(--wui-color-accent, #08f);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .option-label:hover {\n    color: var(--wui-color-on-accent, #fff);\n    background: var(--wui-color-accent, #08f);\n  }\n}\n\n:host([disabled]) .option-label {\n  cursor: not-allowed;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/option/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.option-label {\n  cursor: pointer;\n  user-select: none;\n\n  overflow: hidden;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 8px;\n  border-radius: calc(infinity * 1px);\n\n  font-size: var(--wui-font-size, 14px);\n  color: var(--wui-color-text, #1b1b1b);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  transition:\n    color var(--wui-duration-feedback, 100ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n    background-color var(--wui-duration-feedback, 100ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.check {\n  display: var(--wui-option-check-display, block);\n  flex-shrink: 0;\n}\n\n.content-wrap {\n  overflow: hidden;\n  flex: 1;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(:not([selected])) .check {\n  visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  flex-shrink: 0;\n}\n\n.option-label:focus-visible {\n  outline: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n  outline-offset: 2px;\n}\n\n:host([active]) .option-label {\n  color: var(--wui-color-on-accent, #fff);\n  background: var(--wui-color-accent, #08f);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .option-label:hover {\n    color: var(--wui-color-on-accent, #fff);\n    background: var(--wui-color-accent, #08f);\n  }\n}\n\n:host([disabled]) .option-label {\n  cursor: not-allowed;\n}\n"],"mappings":""}

package/dist/components/popover/index.js

@@ -1,4 +1,4 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import t from "../../assets/glass.js";
 import n from "../../assets/overlay-motion.js";
 import { normalizeLiteral as r, normalizeNumber as i } from "../../shared/normalize/index.js";
@@ -105,10 +105,12 @@ var m = [
 		this.open && (requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly)), this._shouldOpenInstantly = !0);
 	}
 	updated(e) {
-		if (e.has("portal") || e.has("overlayContainer") ? requestAnimationFrame(() => this._reconfigureOverlay()) : (e.has("placement") || e.has("offset")) && requestAnimationFrame(() => this._panel.updatePosition()), e.has("open")) if (this.open) {
-			let e = this._shouldOpenInstantly;
-			this._shouldOpenInstantly = !0, requestAnimationFrame(() => this._openOverlay(e)), this._userOpenChange.consume() && this._dispatchChange(!0), this._focusPanel();
-		} else this._returnFocus(), this._closeOverlay(), this._userOpenChange.consume() && this._dispatchChange(!1);
+		if (e.has("portal") || e.has("overlayContainer") ? requestAnimationFrame(() => this._reconfigureOverlay()) : (e.has("placement") || e.has("offset")) && requestAnimationFrame(() => this._panel.updatePosition()), e.has("open")) {
+			if (this.open) {
+				let e = this._shouldOpenInstantly;
+				this._shouldOpenInstantly = !0, requestAnimationFrame(() => this._openOverlay(e)), this._userOpenChange.consume() && this._dispatchChange(!0), this._focusPanel();
+			} else this._returnFocus(), this._closeOverlay(), this._userOpenChange.consume() && this._dispatchChange(!1);
+		}
 		e.has("trigger") && (this.removeEventListener("pointerenter", this._onPointerEnter), this.removeEventListener("pointerleave", this._onPointerLeave), clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this._syncTriggerListeners());
 	}
 	show() {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/popover/index.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = [\n  'top',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-start',\n  'bottom-end',\n  'left',\n  'left-start',\n  'left-end',\n  'right',\n  'right-start',\n  'right-end'\n] as const\n\nconst ALLOWED_TRIGGERS = ['click', 'hover', 'manual'] as const\n\nlet popoverIdCounter = 0\n\n@customElement('web-ui-popover')\nexport class WebUiPopover extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  @property({ type: String, reflect: true })\n  get placement(): Placement {\n    return this._placement\n  }\n  set placement(v: string) {\n    const old = this._placement\n    this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'bottom')\n    this.requestUpdate('placement', old)\n  }\n  private _placement: Placement = 'bottom'\n\n  @property({ type: Number })\n  get offset(): number {\n    return this._offset\n  }\n  set offset(v: number) {\n    const old = this._offset\n    this._offset = normalizeNumber(v, 0, 100, 8)\n    this.requestUpdate('offset', old)\n  }\n  private _offset = 8\n\n  @property({ type: String, reflect: true })\n  get trigger(): 'click' | 'hover' | 'manual' {\n    return this._trigger\n  }\n  set trigger(v: string) {\n    const old = this._trigger\n    this._trigger = normalizeLiteral(v, ALLOWED_TRIGGERS, 'click')\n    this.requestUpdate('trigger', old)\n  }\n  private _trigger: 'click' | 'hover' | 'manual' = 'click'\n\n  @property({ type: Boolean, reflect: true }) portal = false\n  @property({ attribute: false }) overlayContainer?: OverlayContainer\n\n  private _showTimer?: ReturnType<typeof setTimeout>\n  private _hideTimer?: ReturnType<typeof setTimeout>\n  private readonly _userOpenChange = new UserChangeController()\n  private _shouldOpenInstantly = true\n\n  private _panelId = `wui-popover-panel-${++popoverIdCounter}`\n  private readonly _panel = defineAnchoredPanel().make({\n    getAnchor: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-trigger') ?? null,\n    getLocalPanel: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-panel') ?? null,\n    getPositioning: () => ({\n      placement: this.placement,\n      offset: this.offset,\n      strategy: this.portal ? 'fixed' : 'absolute'\n    }),\n    isPortal: () => this.portal,\n    createPortal: () => this._createPortal()\n  })\n\n  // 当前是否打开\n  get isOpen(): boolean {\n    return this.open\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    document.addEventListener('click', this._onClickOutside)\n    document.addEventListener('keydown', this._onKeydown)\n    this.addEventListener('focusout', this._onFocusOut)\n    this._syncTriggerListeners()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this._onClickOutside)\n    document.removeEventListener('keydown', this._onKeydown)\n    this.removeEventListener('focusout', this._onFocusOut)\n    this.removeEventListener('pointerenter', this._onPointerEnter)\n    this.removeEventListener('pointerleave', this._onPointerLeave)\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    this._panel.dispose()\n  }\n\n  override firstUpdated() {\n    if (this.open) {\n      requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly))\n      this._shouldOpenInstantly = true\n    }\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    if (changed.has('portal') || changed.has('overlayContainer'))\n      requestAnimationFrame(() => this._reconfigureOverlay())\n    else if (changed.has('placement') || changed.has('offset'))\n      requestAnimationFrame(() => this._panel.updatePosition())\n\n    if (changed.has('open')) {\n      if (this.open) {\n        const isInstant = this._shouldOpenInstantly\n        this._shouldOpenInstantly = true\n        requestAnimationFrame(() => this._openOverlay(isInstant))\n        if (this._userOpenChange.consume()) this._dispatchChange(true)\n        this._focusPanel()\n      } else {\n        this._returnFocus()\n        void this._closeOverlay()\n        if (this._userOpenChange.consume()) this._dispatchChange(false)\n      }\n    }\n\n    if (changed.has('trigger')) {\n      this.removeEventListener('pointerenter', this._onPointerEnter)\n      this.removeEventListener('pointerleave', this._onPointerLeave)\n      clearTimeout(this._showTimer)\n      clearTimeout(this._hideTimer)\n      this._syncTriggerListeners()\n    }\n  }\n\n  // 打开 popover\n  show() {\n    if (this.disabled || this.open) return\n    this.open = true\n  }\n\n  // 关闭 popover\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\n  // 切换 popover\n  toggle() {\n    if (this.open) this.close()\n    else this.show()\n  }\n\n  private _isInsideShadowRoot(e: MouseEvent): boolean {\n    for (const node of e.composedPath()) {\n      if (node instanceof Node && node.getRootNode() === this.shadowRoot) return true\n    }\n    return false\n  }\n\n  private _syncTriggerListeners() {\n    if (this.trigger === 'hover') {\n      this.addEventListener('pointerenter', this._onPointerEnter)\n      this.addEventListener('pointerleave', this._onPointerLeave)\n    }\n  }\n\n  private _openOverlay(isInstant = false) {\n    this._panel.open(isInstant)\n  }\n\n  private _createPortal(): OverlayPortal {\n    const portal = defineOverlayPortal().make({\n      container: this.overlayContainer,\n      target: this,\n      style: `${glass}\\n${overlayMotion}\\n${style}`,\n      className: 'popover-panel portal wui-glass wui-floating-panel'\n    })\n    portal.panel.id = this._panelId\n    portal.panel.setAttribute('role', 'dialog')\n    portal.panel.tabIndex = -1\n    portal.panel.addEventListener('pointerenter', this._onPanelPointerEnter)\n    portal.panel.addEventListener('pointerleave', this._onPanelPointerLeave)\n    portal.moveContent(\n      Array.from(this.childNodes).filter(node => !(node instanceof HTMLElement && node.slot === 'trigger'))\n    )\n    return portal\n  }\n\n  private async _closeOverlay() {\n    await this._panel.close(() => this.open)\n  }\n\n  private _reconfigureOverlay() {\n    this._panel.reconfigure(this.open)\n  }\n\n  private _dispatchChange(open: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('open-change', {\n        detail: { open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _focusPanel() {\n    requestAnimationFrame(() => {\n      const panel = this._panel.getPanel()\n      const autofocus = panel?.querySelector<HTMLElement>('[autofocus]')\n      if (autofocus && !autofocus.matches(':disabled, [disabled]')) autofocus.focus()\n    })\n  }\n\n  private _returnFocus() {\n    const panel = this._panel.getPanel()\n    if (!panel?.matches(':focus-within')) return\n    const trigger = this._queryTrigger()\n    trigger?.focus()\n  }\n\n  private _queryTrigger(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const el = slot?.assignedElements()[0]\n    return el instanceof HTMLElement ? el : null\n  }\n\n  private _onTriggerClick = (event: MouseEvent) => {\n    if (this.disabled) return\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    if (this.trigger === 'hover') return\n    if (!this.open) this._shouldOpenInstantly = event.detail === 0\n    this._userOpenChange.mark()\n    this.toggle()\n  }\n\n  private _onClickOutside = (e: MouseEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n    if (e.target instanceof Node && this.portal && this._panel.getPanel()?.contains(e.target)) return\n    if (this._isInsideShadowRoot(e)) return\n    this._userOpenChange.mark()\n    this.open = false\n  }\n\n  private _onFocusOut = () => {\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n\n    requestAnimationFrame(() => {\n      if (this.open && !this.matches(':focus-within') && !this._panel.getPanel()?.matches(':focus-within')) {\n        this._userOpenChange.mark()\n        this.open = false\n      }\n    })\n  }\n\n  private _onKeydown = (e: KeyboardEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual') return\n    if (e.key === 'Escape') {\n      this._userOpenChange.mark()\n      this.open = false\n      e.preventDefault()\n    }\n  }\n\n  private _onPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n    this._showTimer = setTimeout(() => {\n      this._shouldOpenInstantly = false\n      if (this.open) return\n      this._userOpenChange.mark()\n      this.show()\n    }, 100)\n  }\n\n  private _onPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._showTimer)\n    this._hideTimer = setTimeout(() => {\n      if (!this.open) return\n      this._userOpenChange.mark()\n      this.close()\n    }, 100)\n  }\n\n  private _onPanelPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n  }\n\n  private _onPanelPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    this._hideTimer = setTimeout(() => {\n      if (!this.open) return\n      this._userOpenChange.mark()\n      this.close()\n    }, 100)\n  }\n\n  override render() {\n    return html`\n      <div class=\"popover-anchor\">\n        <div\n          class=\"popover-trigger\"\n          aria-expanded=${String(this.open)}\n          aria-controls=${this._panelId}\n          @click=${this._onTriggerClick}\n        >\n          <slot name=\"trigger\"></slot>\n        </div>\n        <div\n          id=${this._panelId}\n          class=\"popover-panel wui-glass wui-floating-panel\"\n          hidden\n          role=\"dialog\"\n          tabindex=\"-1\"\n          @pointerenter=${this._onPanelPointerEnter}\n          @pointerleave=${this._onPanelPointerLeave}\n        >\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    'open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-popover': WebUiPopover\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/popover/index.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = [\n  'top',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-start',\n  'bottom-end',\n  'left',\n  'left-start',\n  'left-end',\n  'right',\n  'right-start',\n  'right-end'\n] as const\n\nconst ALLOWED_TRIGGERS = ['click', 'hover', 'manual'] as const\n\nlet popoverIdCounter = 0\n\n@customElement('web-ui-popover')\nexport class WebUiPopover extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  @property({ type: String, reflect: true })\n  get placement(): Placement {\n    return this._placement\n  }\n  set placement(v: string) {\n    const old = this._placement\n    this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'bottom')\n    this.requestUpdate('placement', old)\n  }\n  private _placement: Placement = 'bottom'\n\n  @property({ type: Number })\n  get offset(): number {\n    return this._offset\n  }\n  set offset(v: number) {\n    const old = this._offset\n    this._offset = normalizeNumber(v, 0, 100, 8)\n    this.requestUpdate('offset', old)\n  }\n  private _offset = 8\n\n  @property({ type: String, reflect: true })\n  get trigger(): 'click' | 'hover' | 'manual' {\n    return this._trigger\n  }\n  set trigger(v: string) {\n    const old = this._trigger\n    this._trigger = normalizeLiteral(v, ALLOWED_TRIGGERS, 'click')\n    this.requestUpdate('trigger', old)\n  }\n  private _trigger: 'click' | 'hover' | 'manual' = 'click'\n\n  @property({ type: Boolean, reflect: true }) portal = false\n  @property({ attribute: false }) overlayContainer?: OverlayContainer\n\n  private _showTimer?: ReturnType<typeof setTimeout>\n  private _hideTimer?: ReturnType<typeof setTimeout>\n  private readonly _userOpenChange = new UserChangeController()\n  private _shouldOpenInstantly = true\n\n  private _panelId = `wui-popover-panel-${++popoverIdCounter}`\n  private readonly _panel = defineAnchoredPanel().make({\n    getAnchor: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-trigger') ?? null,\n    getLocalPanel: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-panel') ?? null,\n    getPositioning: () => ({\n      placement: this.placement,\n      offset: this.offset,\n      strategy: this.portal ? 'fixed' : 'absolute'\n    }),\n    isPortal: () => this.portal,\n    createPortal: () => this._createPortal()\n  })\n\n  // 当前是否打开\n  get isOpen(): boolean {\n    return this.open\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    document.addEventListener('click', this._onClickOutside)\n    document.addEventListener('keydown', this._onKeydown)\n    this.addEventListener('focusout', this._onFocusOut)\n    this._syncTriggerListeners()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this._onClickOutside)\n    document.removeEventListener('keydown', this._onKeydown)\n    this.removeEventListener('focusout', this._onFocusOut)\n    this.removeEventListener('pointerenter', this._onPointerEnter)\n    this.removeEventListener('pointerleave', this._onPointerLeave)\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    this._panel.dispose()\n  }\n\n  override firstUpdated() {\n    if (this.open) {\n      requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly))\n      this._shouldOpenInstantly = true\n    }\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    if (changed.has('portal') || changed.has('overlayContainer'))\n      requestAnimationFrame(() => this._reconfigureOverlay())\n    else if (changed.has('placement') || changed.has('offset'))\n      requestAnimationFrame(() => this._panel.updatePosition())\n\n    if (changed.has('open')) {\n      if (this.open) {\n        const isInstant = this._shouldOpenInstantly\n        this._shouldOpenInstantly = true\n        requestAnimationFrame(() => this._openOverlay(isInstant))\n        if (this._userOpenChange.consume()) this._dispatchChange(true)\n        this._focusPanel()\n      } else {\n        this._returnFocus()\n        void this._closeOverlay()\n        if (this._userOpenChange.consume()) this._dispatchChange(false)\n      }\n    }\n\n    if (changed.has('trigger')) {\n      this.removeEventListener('pointerenter', this._onPointerEnter)\n      this.removeEventListener('pointerleave', this._onPointerLeave)\n      clearTimeout(this._showTimer)\n      clearTimeout(this._hideTimer)\n      this._syncTriggerListeners()\n    }\n  }\n\n  // 打开 popover\n  show() {\n    if (this.disabled || this.open) return\n    this.open = true\n  }\n\n  // 关闭 popover\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\n  // 切换 popover\n  toggle() {\n    if (this.open) this.close()\n    else this.show()\n  }\n\n  private _isInsideShadowRoot(e: MouseEvent): boolean {\n    for (const node of e.composedPath()) {\n      if (node instanceof Node && node.getRootNode() === this.shadowRoot) return true\n    }\n    return false\n  }\n\n  private _syncTriggerListeners() {\n    if (this.trigger === 'hover') {\n      this.addEventListener('pointerenter', this._onPointerEnter)\n      this.addEventListener('pointerleave', this._onPointerLeave)\n    }\n  }\n\n  private _openOverlay(isInstant = false) {\n    this._panel.open(isInstant)\n  }\n\n  private _createPortal(): OverlayPortal {\n    const portal = defineOverlayPortal().make({\n      container: this.overlayContainer,\n      target: this,\n      style: `${glass}\\n${overlayMotion}\\n${style}`,\n      className: 'popover-panel portal wui-glass wui-floating-panel'\n    })\n    portal.panel.id = this._panelId\n    portal.panel.setAttribute('role', 'dialog')\n    portal.panel.tabIndex = -1\n    portal.panel.addEventListener('pointerenter', this._onPanelPointerEnter)\n    portal.panel.addEventListener('pointerleave', this._onPanelPointerLeave)\n    portal.moveContent(\n      Array.from(this.childNodes).filter(node => !(node instanceof HTMLElement && node.slot === 'trigger'))\n    )\n    return portal\n  }\n\n  private async _closeOverlay() {\n    await this._panel.close(() => this.open)\n  }\n\n  private _reconfigureOverlay() {\n    this._panel.reconfigure(this.open)\n  }\n\n  private _dispatchChange(open: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('open-change', {\n        detail: { open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _focusPanel() {\n    requestAnimationFrame(() => {\n      const panel = this._panel.getPanel()\n      const autofocus = panel?.querySelector<HTMLElement>('[autofocus]')\n      if (autofocus && !autofocus.matches(':disabled, [disabled]')) autofocus.focus()\n    })\n  }\n\n  private _returnFocus() {\n    const panel = this._panel.getPanel()\n    if (!panel?.matches(':focus-within')) return\n    const trigger = this._queryTrigger()\n    trigger?.focus()\n  }\n\n  private _queryTrigger(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const el = slot?.assignedElements()[0]\n    return el instanceof HTMLElement ? el : null\n  }\n\n  private _onTriggerClick = (event: MouseEvent) => {\n    if (this.disabled) return\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    if (this.trigger === 'hover') return\n    if (!this.open) this._shouldOpenInstantly = event.detail === 0\n    this._userOpenChange.mark()\n    this.toggle()\n  }\n\n  private _onClickOutside = (e: MouseEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n    if (e.target instanceof Node && this.portal && this._panel.getPanel()?.contains(e.target)) return\n    if (this._isInsideShadowRoot(e)) return\n    this._userOpenChange.mark()\n    this.open = false\n  }\n\n  private _onFocusOut = () => {\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n\n    requestAnimationFrame(() => {\n      if (this.open && !this.matches(':focus-within') && !this._panel.getPanel()?.matches(':focus-within')) {\n        this._userOpenChange.mark()\n        this.open = false\n      }\n    })\n  }\n\n  private _onKeydown = (e: KeyboardEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual') return\n    if (e.key === 'Escape') {\n      this._userOpenChange.mark()\n      this.open = false\n      e.preventDefault()\n    }\n  }\n\n  private _onPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n    this._showTimer = setTimeout(() => {\n      this._shouldOpenInstantly = false\n      if (this.open) return\n      this._userOpenChange.mark()\n      this.show()\n    }, 100)\n  }\n\n  private _onPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._showTimer)\n    this._hideTimer = setTimeout(() => {\n      if (!this.open) return\n      this._userOpenChange.mark()\n      this.close()\n    }, 100)\n  }\n\n  private _onPanelPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n  }\n\n  private _onPanelPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    this._hideTimer = setTimeout(() => {\n      if (!this.open) return\n      this._userOpenChange.mark()\n      this.close()\n    }, 100)\n  }\n\n  override render() {\n    return html`\n      <div class=\"popover-anchor\">\n        <div\n          class=\"popover-trigger\"\n          aria-expanded=${String(this.open)}\n          aria-controls=${this._panelId}\n          @click=${this._onTriggerClick}\n        >\n          <slot name=\"trigger\"></slot>\n        </div>\n        <div\n          id=${this._panelId}\n          class=\"popover-panel wui-glass wui-floating-panel\"\n          hidden\n          role=\"dialog\"\n          tabindex=\"-1\"\n          @pointerenter=${this._onPanelPointerEnter}\n          @pointerleave=${this._onPanelPointerLeave}\n        >\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    'open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-popover': WebUiPopover\n  }\n}\n"],"mappings":"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"}