@greypan/web-ui 3.0.0 → 4.0.0

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

@@ -1,22 +1,37 @@
-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/lucide-plus.js";
 import n from "../../icons/generated/lucide-minus.js";
 import r from "../../assets/glass.js";
-import { normalizeNumber as i } from "../../shared/normalize/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 { FormAssociationController as i, defineFormAssociation as a } from "../../shared/form-association/index.js";
+import { normalizeNumber as o } from "../../shared/normalize/index.js";
+import s from "./style.js";
+import { LitElement as c, html as l, unsafeCSS as u } from "lit";
+import { customElement as d, property as f, state as p } from "lit/decorators.js";
 //#region src/components/input-number/index.ts
-var f = class extends o {
+var m = class extends c {
 	constructor(...e) {
-		super(...e), this.placeholder = "", this.name = "", this.disabled = !1, this.readonly = !1, this.required = !1, this._value = 0, this._min = 0, this._max = Infinity, this._step = 1, this._focused = !1, this._formDisabled = !1, this._precision = 0;
+		super(...e), this.placeholder = "", this.name = "", this.disabled = !1, this.readonly = !1, this.required = !1, this._value = 0, this._min = 0, this._max = Infinity, this._step = 1, this._focused = !1, this._precision = 0, this._formAssociation = a({
+			host: this,
+			getState: () => this._value,
+			setState: (e) => {
+				this.value = e;
+			},
+			getFormValue: () => String(this._value),
+			getFormState: () => String(this._value),
+			restoreState: (e) => {
+				if (typeof e != "string") return;
+				let t = Number(e);
+				Number.isFinite(t) && (this.value = t);
+			},
+			syncValidity: () => this._syncValidity()
+		}).make(), this._formAssociationController = new i(this, this._formAssociation);
 	}
 	static {
 		this.formAssociated = !0;
 	}
 	static {
-		this.styles = [c(r), c(a)];
+		this.styles = [u(r), u(s)];
 	}
 	get precision() {
 		return this._precision;
@@ -25,35 +40,35 @@ var f = class extends o {
 		let t = this._precision;
 		this._precision = e;
 		let n = this.clamp(this.round(this._value));
-		n !== this._value && (this._value = n, this._internals?.setFormValue?.(String(n))), this.requestUpdate("precision", t);
+		n !== this._value && (this._value = n, this._formAssociation.sync()), this.requestUpdate("precision", t);
 	}
 	get value() {
 		return this._value;
 	}
 	set value(e) {
 		let t = this.clamp(this.round(e)), n = this._value;
-		this._value = t, this._internals?.setFormValue?.(String(t)), this.requestUpdate("value", n);
+		this._value = t, this._formAssociation.sync(), this.requestUpdate("value", n);
 	}
 	get _isDisabled() {
-		return this.disabled || this._formDisabled;
+		return this.disabled || this._formAssociation.isFormDisabled();
 	}
 	get min() {
 		return this._min;
 	}
 	set min(e) {
-		this._min = i(e, -Infinity, Infinity, 0);
+		this._min = o(e, -Infinity, Infinity, 0);
 	}
 	get max() {
 		return this._max;
 	}
 	set max(e) {
-		this._max = i(e, -Infinity, Infinity, Infinity);
+		this._max = o(e, -Infinity, Infinity, Infinity);
 	}
 	get step() {
 		return this._step;
 	}
 	set step(e) {
-		this._step = i(e, 0, Infinity, 1);
+		this._step = o(e, 0, Infinity, 1);
 	}
 	get _effectiveStep() {
 		return this._step;
@@ -64,31 +79,27 @@ var f = class extends o {
 	get atMax() {
 		return this._value >= this._max;
 	}
-	connectedCallback() {
-		super.connectedCallback(), this._internals ||= this.attachInternals(), this._internals.setFormValue?.(String(this._value));
-	}
 	formResetCallback() {
-		let e = this.getAttribute("value");
-		this.value = e === null ? 0 : Number(e);
+		this._formAssociation.reset();
 	}
 	formDisabledCallback(e) {
-		this._formDisabled = e;
+		this._formAssociation.setDisabled(e);
 	}
 	formStateRestoreCallback(e) {
-		typeof e == "string" && (this.value = Number(e));
+		this._formAssociation.restore(e);
 	}
 	updated() {
 		this._syncValidity(), this.toggleAttribute("focused", this._focused);
 	}
 	_syncValidity() {
-		let e = this.shadowRoot?.querySelector("input");
-		if (!this._internals || !e || typeof this._internals.setValidity != "function") return;
+		let e = this.shadowRoot?.querySelector("input"), t = this._formAssociation.getInternals();
+		if (!t || !e || typeof t.setValidity != "function") return;
 		if (this._isDisabled || e.validity.valid) {
-			this._internals.setValidity({});
+			t.setValidity({});
 			return;
 		}
-		let t = {};
-		e.validity.valueMissing && (t.valueMissing = !0), e.validity.rangeUnderflow && (t.rangeUnderflow = !0), e.validity.rangeOverflow && (t.rangeOverflow = !0), e.validity.stepMismatch && (t.stepMismatch = !0), this._internals.setValidity(t, e.validationMessage, e);
+		let n = {};
+		e.validity.valueMissing && (n.valueMissing = !0), e.validity.rangeUnderflow && (n.rangeUnderflow = !0), e.validity.rangeOverflow && (n.rangeOverflow = !0), e.validity.stepMismatch && (n.stepMismatch = !0), t.setValidity(n, e.validationMessage, e);
 	}
 	clamp(e) {
 		return Math.min(this._max, Math.max(this._min, e));
@@ -109,12 +120,12 @@ var f = class extends o {
 	handleInput(e) {
 		if (this.readonly || !(e.target instanceof HTMLInputElement)) return;
 		let t = e.target.value;
-		t !== "" && t !== "-" && (this._value = this.clamp(this.round(Number(t))), this._internals?.setFormValue?.(String(this._value)), this._syncValidity());
+		t !== "" && t !== "-" && (this._value = this.clamp(this.round(Number(t))), this._formAssociation.sync(), this._syncValidity());
 	}
 	handleNativeChange(e) {
 		if (this.readonly || !(e.target instanceof HTMLInputElement)) return;
 		let t = e.target.value;
-		t !== "" && t !== "-" && (this._value = this.clamp(this.round(Number(t))), this._internals?.setFormValue?.(String(this._value)), this._syncValidity(), this.dispatchEvent(new Event("change", {
+		t !== "" && t !== "-" && (this._value = this.clamp(this.round(Number(t))), this._formAssociation.sync(), this._syncValidity(), this.dispatchEvent(new Event("change", {
 			bubbles: !0,
 			composed: !0
 		})));
@@ -135,7 +146,7 @@ var f = class extends o {
 		this._focused = !1;
 	}
 	render() {
-		return s`
+		return l`
       <div class="wui-glass wui-input-inner">
         <button
           class="num-btn"
@@ -171,29 +182,38 @@ var f = class extends o {
     `;
 	}
 };
-e([u({
+e([f({
 	type: String,
 	reflect: !0
-})], f.prototype, "placeholder", void 0), e([u({
+})], m.prototype, "placeholder", void 0), e([f({
 	type: String,
 	reflect: !0
-})], f.prototype, "name", void 0), e([u({
+})], m.prototype, "name", void 0), e([f({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "disabled", void 0), e([u({
+})], m.prototype, "disabled", void 0), e([f({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "readonly", void 0), e([u({
+})], m.prototype, "readonly", void 0), e([f({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "required", void 0), e([u({
+})], m.prototype, "required", void 0), e([f({
+	type: Number,
+	reflect: !0
+})], m.prototype, "precision", null), e([p()], m.prototype, "_value", void 0), e([p()], m.prototype, "_min", void 0), e([p()], m.prototype, "_max", void 0), e([p()], m.prototype, "_step", void 0), e([p()], m.prototype, "_focused", void 0), e([f({
+	type: Number,
+	reflect: !0
+})], m.prototype, "value", null), e([f({
+	type: Number,
+	reflect: !0
+})], m.prototype, "min", null), e([f({
 	type: Number,
 	reflect: !0
-})], f.prototype, "precision", null), e([d()], f.prototype, "_value", void 0), e([d()], f.prototype, "_min", void 0), e([d()], f.prototype, "_max", void 0), e([d()], f.prototype, "_step", void 0), e([d()], f.prototype, "_focused", void 0), e([d()], f.prototype, "_formDisabled", void 0), e([u({
+})], m.prototype, "max", null), e([f({
 	type: Number,
 	reflect: !0
-})], f.prototype, "value", null), e([u({ type: Number })], f.prototype, "min", null), e([u({ type: Number })], f.prototype, "max", null), e([u({ type: Number })], f.prototype, "step", null), f = e([l("web-ui-input-number")], f);
+})], m.prototype, "step", null), m = e([d("web-ui-input-number")], m);
 //#endregion
-export { f as WebUiInputNumber };
+export { m as WebUiInputNumber };
 
 //# sourceMappingURL=index.js.map

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":";;;;;;;;;;;AAYO,IAAM,IAAN,cAA+B,EAAW;;EAyGD,aArGW,KAAA,cAAA,IACP,KAAA,OAAA,IACK,KAAA,WAAA,IACA,KAAA,WAAA,IACA,KAAA,WAAA,IAiB7B,KAAA,SAAA,GACF,KAAA,OAAA,GACA,KAAA,OAAA,UACC,KAAA,QAAA,GACG,KAAA,WAAA,IACP,KAAA,aAAA,GA2De,KAAA,mBAAA,EAA8B;GAChE,MAAM;GACN,gBAAgB,KAAK;GACrB,WAAU,MAAS;IACjB,KAAK,QAAQ;GACf;GACA,oBAAoB,OAAO,KAAK,MAAM;GACtC,oBAAoB,OAAO,KAAK,MAAM;GACtC,eAAc,MAAS;IACrB,IAAI,OAAO,KAAU,UAAU;IAC/B,IAAM,IAAQ,OAAO,CAAK;IAC1B,AAAI,OAAO,SAAS,CAAK,MAAG,KAAK,QAAQ;GAC3C;GACA,oBAAoB,KAAK,cAAc;EACzC,CAAC,CAAC,CAAC,KAAK,GAEsC,KAAA,6BAAA,IAAI,EAA0B,MAAM,KAAK,gBAAgB;;;EAxG/E,KAAA,iBAAA;;;EACC,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAO5D,IACI,YAAoB;EACtB,OAAO,KAAK;CACd;CAEA,IAAI,UAAU,GAAW;EACvB,IAAM,IAAM,KAAK;EACjB,KAAK,aAAa;EAClB,IAAM,IAAU,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,CAAC;EAKlD,AAJI,MAAY,KAAK,WACnB,KAAK,SAAS,GACd,KAAK,iBAAiB,KAAK,IAE7B,KAAK,cAAc,aAAa,CAAG;CACrC;CASA,IACI,QAAgB;EAClB,OAAO,KAAK;CACd;CAEA,IAAI,MAAM,GAAW;EACnB,IAAM,IAAU,KAAK,MAAM,KAAK,MAAM,CAAC,CAAC,GAClC,IAAM,KAAK;EAGjB,AAFA,KAAK,SAAS,GACd,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc,SAAS,CAAG;CACjC;CAEA,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK,iBAAiB,eAAe;CAC/D;CAEA,IACI,MAAc;EAChB,OAAO,KAAK;CACd;CAEA,IAAI,IAAI,GAAY;EAClB,KAAK,OAAO,EAAgB,GAAG,WAAW,UAAU,CAAC;CACvD;CAEA,IACI,MAAc;EAChB,OAAO,KAAK;CACd;CAEA,IAAI,IAAI,GAAY;EAClB,KAAK,OAAO,EAAgB,GAAG,WAAW,UAAU,QAAQ;CAC9D;CAEA,IACI,OAAe;EACjB,OAAO,KAAK;CACd;CAGA,IAAI,KAAK,GAAY;EACnB,KAAK,QAAQ,EAAgB,GAAG,GAAG,UAAU,CAAC;CAChD;CAEA,IAAY,iBAAyB;EACnC,OAAO,KAAK;CACd;CAEA,IAAY,QAAiB;EAC3B,OAAO,KAAK,UAAU,KAAK;CAC7B;CAEA,IAAY,QAAiB;EAC3B,OAAO,KAAK,UAAU,KAAK;CAC7B;CAoBA,oBAAoB;EAClB,KAAK,iBAAiB,MAAM;CAC9B;CAEA,qBAAqB,GAAmB;EACtC,KAAK,iBAAiB,YAAY,CAAQ;CAC5C;CAEA,yBAAyB,GAAwC;EAC/D,KAAK,iBAAiB,QAAQ,CAAK;CACrC;CAEA,UAAmB;EAEjB,AADA,KAAK,cAAc,GACnB,KAAK,gBAAgB,WAAW,KAAK,QAAQ;CAC/C;CAEA,gBAAwB;EACtB,IAAM,IAAQ,KAAK,YAAY,cAAc,OAAO,GAC9C,IAAY,KAAK,iBAAiB,aAAa;EACrD,IAAI,CAAC,KAAa,CAAC,KAAS,OAAO,EAAU,eAAgB,YAAY;EACzE,IAAI,KAAK,eAAe,EAAM,SAAS,OAAO;GAC5C,EAAU,YAAY,CAAC,CAAC;GACxB;EACF;EACA,IAAM,IAA4B,CAAC;EAKnC,AAJI,EAAM,SAAS,iBAAc,EAAM,eAAe,KAClD,EAAM,SAAS,mBAAgB,EAAM,iBAAiB,KACtD,EAAM,SAAS,kBAAe,EAAM,gBAAgB,KACpD,EAAM,SAAS,iBAAc,EAAM,eAAe,KACtD,EAAU,YAAY,GAAO,EAAM,mBAAmB,CAAK;CAC7D;CAEA,MAAc,GAAmB;EAC/B,OAAO,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,KAAK,MAAM,CAAC,CAAC;CACnD;CAEA,MAAc,GAAmB;EAC/B,IAAM,IAAI,MAAM,KAAK;EACrB,OAAO,KAAK,MAAM,IAAI,CAAC,IAAI;CAC7B;CAEA,kBAA0B,GAAW;EAEnC,AADA,KAAK,QAAQ,KAAK,MAAM,KAAK,MAAM,CAAC,CAAC,GACrC,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC1E;CAEA,WAAmB,GAAmB;EAChC,KAAK,eAAe,KAAK,YAC7B,KAAK,kBAAkB,KAAK,SAAS,IAAY,KAAK,cAAc;CACtE;CAEA,YAAoB,GAAU;EAE5B,IADI,KAAK,YACL,EAAE,EAAE,kBAAkB,mBAAmB;EAC7C,IAAM,IAAM,EAAE,OAAO;EACjB,MAAQ,MAAM,MAAQ,QAC1B,KAAK,SAAS,KAAK,MAAM,KAAK,MAAM,OAAO,CAAG,CAAC,CAAC,GAChD,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc;CACrB;CAIA,mBAA2B,GAAU;EAEnC,IADI,KAAK,YACL,EAAE,EAAE,kBAAkB,mBAAmB;EAC7C,IAAM,IAAM,EAAE,OAAO;EACjB,MAAQ,MAAM,MAAQ,QAC1B,KAAK,SAAS,KAAK,MAAM,KAAK,MAAM,OAAO,CAAG,CAAC,CAAC,GAChD,KAAK,iBAAiB,KAAK,GAC3B,KAAK,cAAc,GACnB,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAEA,cAAsB,GAAkB;EAClC,KAAK,eAAe,KAAK,aACzB,EAAE,QAAQ,aACZ,EAAE,eAAe,GACjB,KAAK,kBAAkB,KAAK,SAAS,KAAK,cAAc,GACxD,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC,KAChE,EAAE,QAAQ,gBACnB,EAAE,eAAe,GACjB,KAAK,kBAAkB,KAAK,SAAS,KAAK,cAAc,GACxD,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAE7E;CAEA,cAAsB;EACpB,AAAK,KAAK,gBAAa,KAAK,WAAW;CACzC;CAEA,aAAqB;EACnB,KAAK,WAAW;CAClB;CAEA,SAAkB;EAChB,OAAO,CAAI;;;;;sBAKO,KAAK,eAAe,KAAK,YAAY,KAAK,MAAM;yBAC7C,KAAK,WAAW,EAAE,EAAE;;+BAEd,EAAY;;;;wBAInB,KAAK,YAAY;iBACxB,KAAK,KAAK;mBACR,OAAO,KAAK,MAAM,EAAE;sBACjB,KAAK,YAAY;sBACjB,KAAK,SAAS;sBACd,KAAK,SAAS;mBACjB,KAAK,YAAY;oBAChB,KAAK,mBAAmB;qBACvB,KAAK,cAAc;mBACrB,KAAK,YAAY;kBAClB,KAAK,WAAW;;;;;sBAKZ,KAAK,eAAe,KAAK,YAAY,KAAK,MAAM;yBAC7C,KAAK,WAAW,CAAC,EAAE;;+BAEb,EAAW;;;;CAIxC;AAMF;AAhPG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAgBxC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGN,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,IAAA,GAiBxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,IAAA,GASxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,IAAA,GASxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,IAAA,GApE1C,IAAA,EAAA,CAAA,EAAc,qBAAqB,CAAA,GAAA,CAAA"}

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 };