agnosticui-core 2.0.0-alpha.21 → 2.0.0-alpha.22

package/dist/components/Toggle/core/_Toggle.js

@@ -1,23 +1,23 @@
-import { LitElement as b, css as u, html as l } from "lit";
-import { n as i } from "../../../property-CemaeiRl.js";
+import { LitElement as u, css as b, html as l } from "lit";
+import { n as a } from "../../../property-CemaeiRl.js";
 import { o as c } from "../../../if-defined-C8i28hSj.js";
-import { createFormControlIds as f, isHorizontalLabel as p, buildAriaDescribedBy as y } from "../../../shared/form-control-utils.js";
-import { formControlStyles as _ } from "../../../shared/form-control-styles.js";
-import { FaceMixin as v } from "../../../shared/face-mixin.js";
-var m = Object.defineProperty, a = (d, t, r, o) => {
-  for (var s = void 0, n = d.length - 1, g; n >= 0; n--)
-    (g = d[n]) && (s = g(t, r, s) || s);
-  return s && m(t, r, s), s;
+import { createFormControlIds as y, isHorizontalLabel as p, buildAriaDescribedBy as _ } from "../../../shared/form-control-utils.js";
+import { formControlStyles as f } from "../../../shared/form-control-styles.js";
+import { FaceMixin as m } from "../../../shared/face-mixin.js";
+var v = Object.defineProperty, s = (d, e, i, o) => {
+  for (var r = void 0, n = d.length - 1, g; n >= 0; n--)
+    (g = d[n]) && (r = g(e, i, r) || r);
+  return r && v(e, i, r), r;
 };
-const h = class h extends v(b) {
+const h = class h extends m(u) {
   constructor() {
-    super(), this._toggleId = "", this._labelId = "", this._helperId = "", this._errorId = "", this.labelPosition = "top", this._handleClick = (r) => {
-      this.onClick && this.onClick(r), this._performToggle(r);
-    }, this._handleKeydown = (r) => {
-      (r.key === " " || r.key === "Enter") && (r.preventDefault(), this._performToggle(r));
-    }, this._performToggle = (r) => {
+    super(), this._toggleId = "", this._labelId = "", this._helperId = "", this._errorId = "", this.labelPosition = "top", this._handleClick = (i) => {
+      this.onClick && this.onClick(i), this._performToggle(i);
+    }, this._handleKeydown = (i) => {
+      (i.key === " " || i.key === "Enter") && (i.preventDefault(), this._performToggle(i));
+    }, this._performToggle = (i) => {
       if (this.disabled || this.readonly) {
-        r.preventDefault();
+        i.preventDefault();
         return;
       }
       this.checked = !this.checked, this._internals.setFormValue(this.checked ? this.value || "on" : null), this._syncValidity(), this._syncStates();
@@ -32,8 +32,8 @@ const h = class h extends v(b) {
       });
       this.dispatchEvent(o), this.onToggleChange && this.onToggleChange(o);
     };
-    const t = f("toggle");
-    this._toggleId = t.inputId, this._labelId = t.labelId, this._helperId = t.helperId, this._errorId = t.errorId, this.label = "", this.labelHidden = !1, this.noLabel = !1, this.checked = !1, this.size = "md", this.variant = "default", this.disabled = !1, this.readonly = !1, this.required = !1, this.invalid = !1, this.errorMessage = "", this.helpText = "", this.value = "", this.validationMessages = void 0;
+    const e = y("toggle");
+    this._toggleId = e.inputId, this._labelId = e.labelId, this._helperId = e.helperId, this._errorId = e.errorId, this.label = "", this.labelHidden = !1, this.noLabel = !1, this.checked = !1, this.size = "md", this.variant = "default", this.disabled = !1, this.readonly = !1, this.required = !1, this.invalid = !1, this.errorMessage = "", this.helpText = "", this.value = "", this.validationMessages = void 0;
   }
   // ─── FACE ─────────────────────────────────────────────────────────────────
   /**
@@ -43,6 +43,14 @@ const h = class h extends v(b) {
   formResetCallback() {
     this.checked = !1, this._internals.setFormValue(null), this._internals.setValidity({}), this._syncStates();
   }
+  /**
+   * FACE lifecycle: called on session restore or browser autofill.
+   * Restores checked state from the previously saved form value.
+   * A non-null state means the toggle was on; null means it was off.
+   */
+  formStateRestoreCallback(e, i) {
+    this.checked = e !== null, this._internals.setFormValue(this.checked ? this.value || "on" : null), this._syncValidity(), this._syncStates();
+  }
   /**
    * Sync validity state to ElementInternals.
    * Toggle has no inner <input> to delegate to, so required validation
@@ -71,20 +79,20 @@ const h = class h extends v(b) {
     this._setState("checked", this.checked), this._setState("disabled", this.disabled), this._setState("readonly", this.readonly), this._setState("required", this.required), this._setState("invalid", !this._internals.validity.valid);
   }
   // ─── End FACE ─────────────────────────────────────────────────────────────
-  updated(t) {
-    super.updated(t), (t.has("disabled") || t.has("readonly")) && this._syncStates();
+  updated(e) {
+    super.updated(e), (e.has("disabled") || e.has("readonly")) && this._syncStates();
   }
   firstUpdated() {
     this._internals.setFormValue(this.checked ? this.value || "on" : null), this._syncValidity(), this._syncStates(), !this.label && !this.noLabel && console.warn("AgToggle: label property is required for accessibility.");
   }
   renderLabel() {
     if (!this.label || this.noLabel) return "";
-    const t = [];
-    return p(this.labelPosition) ? (t.push("ag-form-control__label--horizontal"), t.push(`ag-form-control__label--${this.labelPosition}`)) : this.labelPosition === "bottom" && t.push(`ag-form-control__label--${this.labelPosition}`), l`
+    const e = [];
+    return p(this.labelPosition) ? (e.push("ag-form-control__label--horizontal"), e.push(`ag-form-control__label--${this.labelPosition}`)) : this.labelPosition === "bottom" && e.push(`ag-form-control__label--${this.labelPosition}`), l`
       <label
         id=${this._labelId}
         for=${this._toggleId}
-        class="ag-form-control__label ${this.labelHidden ? "ag-form-control__label--hidden" : ""} ${this.required ? "ag-form-control__label--required" : ""} ${t.join(" ")}"
+        class="ag-form-control__label ${this.labelHidden ? "ag-form-control__label--hidden" : ""} ${this.required ? "ag-form-control__label--required" : ""} ${e.join(" ")}"
         part="ag-toggle-label"
       >
         ${this.label}
@@ -92,22 +100,22 @@ const h = class h extends v(b) {
     `;
   }
   render() {
-    const t = y({
+    const e = _({
       helperId: this._helperId,
       errorId: this._errorId,
       hasHelper: !!this.helpText && !this.invalid,
       hasError: !!this.invalid && !!this.errorMessage
-    }), r = this.helpText && !this.invalid ? l`<div class="ag-form-control__helper" id="${this._helperId}">
+    }), i = this.helpText && !this.invalid ? l`<div class="ag-form-control__helper" id="${this._helperId}">
           ${this.helpText}
         </div>` : "", o = this.invalid && this.errorMessage ? l`<div class="ag-form-control__error" id="${this._errorId}">
           ${this.errorMessage}
-        </div>` : "", s = l`
+        </div>` : "", r = l`
       <button
         id="${this._toggleId}"
         role="switch"
         aria-checked="${this.checked}"
         aria-labelledby="${c(this.label && !this.noLabel ? this._labelId : void 0)}"
-        aria-describedby="${c(t)}"
+        aria-describedby="${c(e)}"
         ?disabled="${this.disabled}"
         class="ag-toggle ag-toggle--${this.size} ag-toggle--${this.variant}"
         part="ag-toggle-button"
@@ -127,26 +135,26 @@ const h = class h extends v(b) {
     return p(this.labelPosition) ? l`
         <div class="ag-form-control--horizontal">
           ${this.renderLabel()}
-          ${s}
+          ${r}
         </div>
-        ${r}
+        ${i}
         ${o}
       ` : this.labelPosition === "bottom" ? l`
-        ${s}
         ${r}
+        ${i}
         ${o}
         ${this.renderLabel()}
       ` : l`
       ${this.renderLabel()}
-      ${s}
       ${r}
+      ${i}
       ${o}
     `;
   }
 };
 h.styles = [
-  _,
-  u`
+  f,
+  b`
     /* MINIMALIST & THEMEABLE - Styling via --ag-* design tokens */
     :host {
       /* Block for label positioning support */
@@ -308,58 +316,58 @@ h.styles = [
     }
   `
 ];
-let e = h;
-a([
-  i({ type: String })
-], e.prototype, "label");
-a([
-  i({ type: String, attribute: "label-position" })
-], e.prototype, "labelPosition");
-a([
-  i({ type: Boolean, attribute: "label-hidden" })
-], e.prototype, "labelHidden");
-a([
-  i({ type: Boolean, attribute: "no-label" })
-], e.prototype, "noLabel");
-a([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "checked");
-a([
-  i({ type: String, reflect: !0 })
-], e.prototype, "size");
-a([
-  i({ type: String, reflect: !0 })
-], e.prototype, "variant");
-a([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled");
-a([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "readonly");
-a([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "required");
-a([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "invalid");
-a([
-  i({ type: String, attribute: "error-message" })
-], e.prototype, "errorMessage");
-a([
-  i({ type: String, attribute: "help-text" })
-], e.prototype, "helpText");
-a([
-  i({ type: String })
-], e.prototype, "value");
-a([
-  i({ attribute: !1 })
-], e.prototype, "onClick");
-a([
-  i({ attribute: !1 })
-], e.prototype, "validationMessages");
-a([
-  i({ attribute: !1 })
-], e.prototype, "onToggleChange");
+let t = h;
+s([
+  a({ type: String })
+], t.prototype, "label");
+s([
+  a({ type: String, attribute: "label-position" })
+], t.prototype, "labelPosition");
+s([
+  a({ type: Boolean, attribute: "label-hidden" })
+], t.prototype, "labelHidden");
+s([
+  a({ type: Boolean, attribute: "no-label" })
+], t.prototype, "noLabel");
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "checked");
+s([
+  a({ type: String, reflect: !0 })
+], t.prototype, "size");
+s([
+  a({ type: String, reflect: !0 })
+], t.prototype, "variant");
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "readonly");
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "required");
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "invalid");
+s([
+  a({ type: String, attribute: "error-message" })
+], t.prototype, "errorMessage");
+s([
+  a({ type: String, attribute: "help-text" })
+], t.prototype, "helpText");
+s([
+  a({ type: String })
+], t.prototype, "value");
+s([
+  a({ attribute: !1 })
+], t.prototype, "onClick");
+s([
+  a({ attribute: !1 })
+], t.prototype, "validationMessages");
+s([
+  a({ attribute: !1 })
+], t.prototype, "onToggleChange");
 export {
-  e as AgToggle
+  t as AgToggle
 };

package/dist/shared/face-mixin.d.ts

@@ -64,6 +64,11 @@ export declare class FaceMixinInterface {
     formDisabledCallback(disabled: boolean): void;
     /** FACE lifecycle — called on form reset; subclasses should override */
     formResetCallback(): void;
+    /**
+     * FACE lifecycle — called when the browser restores session state or autofills.
+     * Subclasses should override to restore their own state from the saved value.
+     */
+    formStateRestoreCallback(state: File | string | FormData | null, mode: 'restore' | 'autocomplete'): void;
     /**
      * Toggle a custom state in ElementInternals.states (CustomStateSet).
      * Enables :state() pseudo-class targeting from external CSS.

package/dist/shared/face-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"face-mixin.d.ts","sourceRoot":"","sources":["../../src/shared/face-mixin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,KAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAE,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,IAAI,GAAG,SAAS,GACrF,IAAI,CAQN;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAkB;IACrC,iEAAiE;IACjE,MAAM,CAAC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;IACxC,qFAAqF;IACrF,SAAS,CAAC,UAAU,EAAE,gBAAgB,CAAC;IACvC,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,QAAQ,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IACtC,kEAAkE;IAClE,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,qDAAqD;IACrD,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;IACnC,iEAAiE;IACjE,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,8DAA8D;IAC9D,aAAa,IAAI,OAAO;IACxB,qDAAqD;IACrD,cAAc,IAAI,OAAO;IACzB,wEAAwE;IACxE,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAC7C,wEAAwE;IACxE,iBAAiB,IAAI,IAAI;IACzB;;;;OAIG;IACH,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI;CAC1D;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,KA6GvC,WAAW,CAAC,kBAAkB,CAAC,GAAG,CACpE,CAAC"}
+{"version":3,"file":"face-mixin.d.ts","sourceRoot":"","sources":["../../src/shared/face-mixin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,KAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAE,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,IAAI,GAAG,SAAS,GACrF,IAAI,CAQN;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAkB;IACrC,iEAAiE;IACjE,MAAM,CAAC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;IACxC,qFAAqF;IACrF,SAAS,CAAC,UAAU,EAAE,gBAAgB,CAAC;IACvC,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,QAAQ,CAAC,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IACtC,kEAAkE;IAClE,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,qDAAqD;IACrD,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;IACnC,iEAAiE;IACjE,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;IAC/B,8DAA8D;IAC9D,aAAa,IAAI,OAAO;IACxB,qDAAqD;IACrD,cAAc,IAAI,OAAO;IACzB,wEAAwE;IACxE,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAC7C,wEAAwE;IACxE,iBAAiB,IAAI,IAAI;IACzB;;;OAGG;IACH,wBAAwB,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,GAAG,cAAc,GAAG,IAAI;IACxG;;;;OAIG;IACH,SAAS,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,IAAI;CAC1D;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,KAkJvC,WAAW,CAAC,kBAAkB,CAAC,GAAG,CACpE,CAAC"}

package/dist/shared/face-mixin.js

@@ -1,18 +1,18 @@
 import "lit";
-import { n } from "../property-CemaeiRl.js";
-var l = Object.defineProperty, d = (e, t, r, o) => {
-  for (var i = void 0, s = e.length - 1, a; s >= 0; s--)
-    (a = e[s]) && (i = a(t, r, i) || i);
-  return i && l(t, r, i), i;
+import { n as l } from "../property-CemaeiRl.js";
+var n = Object.defineProperty, d = (i, e, s, o) => {
+  for (var t = void 0, a = i.length - 1, r; a >= 0; a--)
+    (r = i[a]) && (t = r(e, s, t) || t);
+  return t && n(e, s, t), t;
 };
-function c(e, t) {
-  t && (t.validity.valid ? e.setValidity({}) : e.setValidity(t.validity, t.validationMessage, t));
+function _(i, e) {
+  e && (e.validity.valid ? i.setValidity({}) : i.setValidity(e.validity, e.validationMessage, e));
 }
-const y = (e) => {
-  const r = class r extends e {
+const c = (i) => {
+  const s = class s extends i {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    constructor(...i) {
-      super(...i), this.name = "", this._internals = this.attachInternals();
+    constructor(...t) {
+      super(...t), this._ownDisabled = !1, this._parentDisabled = !1, this.name = "", this._internals = this.attachInternals();
     }
     /** The parent <form> element, or null if not inside a form. */
     get form() {
@@ -40,13 +40,12 @@ const y = (e) => {
     }
     /**
      * FACE lifecycle: called when a <fieldset disabled> ancestor is toggled.
-     * Syncs the component's own `disabled` property so it renders correctly.
-     *
-     * Note: this only fires for inherited disabled state (via fieldset), not
-     * for the element's own `disabled` attribute — both paths must be handled.
+     * Separates parent-disabled state from the element's own `disabled` attribute
+     * so re-enabling a fieldset does not accidentally re-enable an intentionally
+     * disabled control.
      */
-    formDisabledCallback(i) {
-      this.disabled = i;
+    formDisabledCallback(t) {
+      t ? (this._ownDisabled = this.disabled, this._parentDisabled = !0, this.disabled = !0) : (this._parentDisabled = !1, this.disabled = this._ownDisabled);
     }
     /**
      * FACE lifecycle: called when the parent form is reset.
@@ -55,6 +54,21 @@ const y = (e) => {
      */
     formResetCallback() {
     }
+    /**
+     * FACE lifecycle: called when the browser restores form state from session history
+     * (back/forward navigation) or when the browser autofills the field.
+     *
+     * `state` is the value that was previously passed to setFormValue():
+     *   - a string for single-value controls
+     *   - a FormData for multi-value controls (multi-select, checkbox groups)
+     *   - null if the control had no value
+     *
+     * `mode` is 'restore' for session-history restores and 'autocomplete' for autofill.
+     *
+     * Default is a no-op. Subclasses should override to restore their own state.
+     */
+    formStateRestoreCallback(t, a) {
+    }
     /**
      * Toggle a custom state in ElementInternals.states (CustomStateSet).
      *
@@ -70,17 +84,17 @@ const y = (e) => {
      * @param state  State name, e.g. 'checked', 'disabled', 'invalid'
      * @param active True to add the state, false to remove it
      */
-    _setState(i, s) {
-      this._internals.states && (s ? this._internals.states.add(i) : this._internals.states.delete(i));
+    _setState(t, a) {
+      this._internals.states && (a ? this._internals.states.add(t) : this._internals.states.delete(t));
     }
   };
-  r.formAssociated = !0;
-  let t = r;
+  s.formAssociated = !0;
+  let e = s;
   return d([
-    n({ type: String, reflect: !0 })
-  ], t.prototype, "name"), t;
+    l({ type: String, reflect: !0 })
+  ], e.prototype, "name"), e;
 };
 export {
-  y as FaceMixin,
-  c as syncInnerInputValidity
+  c as FaceMixin,
+  _ as syncInnerInputValidity
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agnosticui-core",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.22",
   "author": "AgnosticUI",
   "license": "Apache-2.0",
   "type": "module",

package/src/components/Checkbox/core/_Checkbox.ts

@@ -364,6 +364,22 @@ export class AgCheckbox extends FaceMixin(LitElement) implements CheckboxProps {
     this._syncStates();
   }
 
+  /**
+   * FACE lifecycle: called on session restore or browser autofill.
+   * Restores checked state from the previously saved form value.
+   * A non-null state means the checkbox was checked; null means unchecked.
+   */
+  override formStateRestoreCallback(
+    state: File | string | FormData | null,
+    _mode: 'restore' | 'autocomplete'
+  ): void {
+    this.checked = state !== null;
+    this.indeterminate = false;
+    this._internals.setFormValue(this.checked ? (this.value || 'on') : null);
+    this._syncValidity();
+    this._syncStates();
+  }
+
   /**
    * Sync validity to ElementInternals by delegating to the inner
    * <input type="checkbox">. Required validation is handled natively

package/src/components/Combobox/core/_Combobox.ts

@@ -759,6 +759,14 @@ export class AgCombobox extends FaceMixin(LitElement) implements ComboboxProps {
       this._syncFormValue();
       this._syncValidity();
     }
+    if (
+      changedProperties.has('disabled') ||
+      changedProperties.has('readonly') ||
+      changedProperties.has('required') ||
+      changedProperties.has('value')
+    ) {
+      this._syncStates();
+    }
   }
 
   // Public methods
@@ -994,6 +1002,7 @@ export class AgCombobox extends FaceMixin(LitElement) implements ComboboxProps {
   override firstUpdated() {
     this._syncFormValue();
     this._syncValidity();
+    this._syncStates();
   }
 
   /**
@@ -1005,6 +1014,50 @@ export class AgCombobox extends FaceMixin(LitElement) implements ComboboxProps {
     this._selectionChanged();
     this._internals.setFormValue(null);
     this._internals.setValidity({});
+    this._syncStates();
+  }
+
+  /**
+   * FACE lifecycle: called on session restore or browser autofill.
+   * Restores the selected option(s) by matching saved values against this.options.
+   * Single: state is a string. Multiple: state is FormData.
+   */
+  override formStateRestoreCallback(
+    state: File | string | FormData | null,
+    _mode: 'restore' | 'autocomplete'
+  ): void {
+    if (state === null) {
+      this._selectedOptions = [];
+    } else if (state instanceof FormData) {
+      const values = new Set(Array.from(state.getAll(this.name)) as string[]);
+      this._selectedOptions = this.options.filter(opt => values.has(opt.value));
+    } else if (typeof state === 'string') {
+      const found = this.options.find(opt => opt.value === state);
+      this._selectedOptions = found ? [found] : [];
+    }
+    this._selectionChanged();
+    this._syncFormValue();
+    this._syncValidity();
+    this._syncStates();
+  }
+
+  /**
+   * Sync CustomStateSet states so :state() pseudo-classes work from external CSS.
+   *
+   * Must be called AFTER _syncValidity() so that :state(invalid) reads the
+   * freshly-updated _internals.validity.valid value.
+   *
+   * Exposed states:
+   *  :state(disabled) — combobox is disabled
+   *  :state(readonly) — combobox is read-only
+   *  :state(required) — combobox is required
+   *  :state(invalid)  — FACE constraint validation is failing
+   */
+  private _syncStates(): void {
+    this._setState('disabled', this.disabled);
+    this._setState('readonly', this.readonly);
+    this._setState('required', this.required);
+    this._setState('invalid', !this._internals.validity.valid);
   }
 
   // ─── End FACE ─────────────────────────────────────────────────────────────

package/src/components/Dialog/core/_dialog.ts

@@ -164,10 +164,20 @@ export class AgnosticDialog extends LitElement implements DialogProps {
     const currentCount = parseInt(document.body.getAttribute('data-dialog-count') || '0', 10);
 
     if (currentCount === 0) {
-      // First dialog - store original overflow and lock scroll
+      // First dialog - lock scroll on body (propagates to viewport) and reserve
+      // the scrollbar gutter on both body and html. The visible scrollbar belongs
+      // to the html element in most browsers/frameworks (including VitePress), so
+      // scrollbar-gutter: stable must be applied there to prevent layout shift.
+      const html = document.documentElement;
       document.body.setAttribute('data-dialog-original-overflow',
         document.body.style.overflow || '');
+      document.body.setAttribute('data-dialog-original-scrollbar-gutter',
+        document.body.style.scrollbarGutter || '');
+      document.body.setAttribute('data-dialog-original-html-scrollbar-gutter',
+        html.style.scrollbarGutter || '');
       document.body.style.overflow = 'hidden';
+      document.body.style.scrollbarGutter = 'stable';
+      html.style.scrollbarGutter = 'stable';
       document.body.setAttribute('data-dialog-scroll-locked', '');
     }
 
@@ -181,10 +191,17 @@ export class AgnosticDialog extends LitElement implements DialogProps {
     document.body.setAttribute('data-dialog-count', newCount.toString());
 
     if (newCount === 0) {
-      // Last dialog closing - restore original overflow
+      // Last dialog closing - restore all saved styles
+      const html = document.documentElement;
       const originalOverflow = document.body.getAttribute('data-dialog-original-overflow');
+      const originalScrollbarGutter = document.body.getAttribute('data-dialog-original-scrollbar-gutter');
+      const originalHtmlScrollbarGutter = document.body.getAttribute('data-dialog-original-html-scrollbar-gutter');
       document.body.style.overflow = originalOverflow || '';
+      document.body.style.scrollbarGutter = originalScrollbarGutter || '';
+      html.style.scrollbarGutter = originalHtmlScrollbarGutter || '';
       document.body.removeAttribute('data-dialog-original-overflow');
+      document.body.removeAttribute('data-dialog-original-scrollbar-gutter');
+      document.body.removeAttribute('data-dialog-original-html-scrollbar-gutter');
       document.body.removeAttribute('data-dialog-scroll-locked');
       document.body.removeAttribute('data-dialog-count');
     }

package/src/components/Dialog/react/ReactDialog.tsx

@@ -9,12 +9,26 @@ import {
 } from '../core/Dialog';
 
 /**
- * React-specific props for Dialog
+ * React-specific props for Dialog.
+ *
+ * Includes onOpenChange for controlled-component support. This is necessary
+ * because the underlying Lit web component manages its own open state internally
+ * (e.g. it sets this.open = false on Escape or backdrop click). @lit/react's
+ * createComponent only bridges DOM events -> React props, so without explicitly
+ * calling onOpenChange(false) on close/cancel, React's state never learns the
+ * dialog closed. The stale open={true} is then re-applied on the next render,
+ * causing previously dismissed dialogs to reappear behind newer ones.
  */
 export interface ReactDialogProps extends DialogProps {
   children?: React.ReactNode;
   className?: string;
   id?: string;
+  /**
+   * Called with the new open state whenever the dialog opens or closes.
+   * Wire this to your React state setter (e.g. onOpenChange={setIsOpen}) so
+   * React stays in sync when the dialog closes itself internally.
+   */
+  onOpenChange?: (open: boolean) => void;
 }
 
 /**
@@ -31,8 +45,9 @@ export interface DialogFooterProps {
   children?: React.ReactNode;
 }
 
-// Create Dialog component with @lit/react
-export const ReactDialog = createComponent({
+// Raw @lit/react bridge — maps Lit custom events to React prop callbacks.
+// Does NOT handle onOpenChange; that requires the wrapper below.
+const _ReactDialogBase = createComponent({
   tagName: 'ag-dialog',
   elementClass: AgnosticDialog,
   react: React,
@@ -43,6 +58,48 @@ export const ReactDialog = createComponent({
   },
 });
 
+/**
+ * ReactDialog wraps _ReactDialogBase to add onOpenChange support.
+ *
+ * The Lit element fires "dialog-close" when the close button is clicked and
+ * "dialog-cancel" when the user presses Escape or clicks the backdrop. Both
+ * mean the dialog is now closed. We intercept those two events and call
+ * onOpenChange(false) so React state reflects the new closed state immediately,
+ * preventing the stale open={true} from being pushed back into the element on
+ * the next render.
+ */
+export const ReactDialog = React.forwardRef<AgnosticDialog, ReactDialogProps>(
+  ({ onOpenChange, onDialogOpen, onDialogClose, onDialogCancel, ...props }, ref) => {
+    const handleDialogOpen = (event: DialogOpenEvent) => {
+      onDialogOpen?.(event);
+      onOpenChange?.(true);
+    };
+
+    // Both close and cancel mean the dialog is no longer open — notify React.
+    const handleDialogClose = (event: DialogCloseEvent) => {
+      onDialogClose?.(event);
+      onOpenChange?.(false);
+    };
+
+    const handleDialogCancel = (event: DialogCancelEvent) => {
+      onDialogCancel?.(event);
+      onOpenChange?.(false);
+    };
+
+    return (
+      <_ReactDialogBase
+        ref={ref}
+        onDialogOpen={handleDialogOpen}
+        onDialogClose={handleDialogClose}
+        onDialogCancel={handleDialogCancel}
+        {...props}
+      />
+    );
+  }
+);
+
+ReactDialog.displayName = 'ReactDialog';
+
 // Helper components for slots (simple React components)
 export const DialogHeader: React.FC<DialogHeaderProps> = ({ children }) => {
   return <div slot="header">{children}</div>;