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

package/src/components/Input/core/_Input.ts

@@ -496,6 +496,40 @@ export class AgInput extends FaceMixin(LitElement) implements InputProps {
     this.value = '';
     this._internals.setFormValue('');
     this._internals.setValidity({});
+    this._syncStates();
+  }
+
+  /**
+   * FACE lifecycle: called on session restore or browser autofill.
+   * Restores the input value from the previously saved form state.
+   */
+  override formStateRestoreCallback(
+    state: File | string | FormData | null,
+    _mode: 'restore' | 'autocomplete'
+  ): void {
+    this.value = typeof state === 'string' ? state : '';
+    this._internals.setFormValue(this.value);
+    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)  — input is disabled
+   *  :state(readonly)  — input is read-only
+   *  :state(required)  — input 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);
   }
 
   /**
@@ -678,10 +712,23 @@ export class AgInput extends FaceMixin(LitElement) implements InputProps {
     `;
   }
 
+  override updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has('disabled') ||
+      changedProperties.has('readonly') ||
+      changedProperties.has('required') ||
+      changedProperties.has('invalid')
+    ) {
+      this._syncStates();
+    }
+  }
+
   override firstUpdated() {
     // FACE: set initial form value and sync validity after first render
     this._internals.setFormValue(this.value ?? '');
     this._syncValidity();
+    this._syncStates();
 
     // Initial check for slot content
     setTimeout(() => {

package/src/components/Radio/core/_Radio.ts

@@ -405,6 +405,20 @@ export class AgRadio extends FaceMixin(LitElement) implements RadioProps {
     this._syncStates();
   }
 
+  /**
+   * FACE lifecycle: called on session restore or browser autofill.
+   * Restores checked state: checked when the saved state matches this radio's value.
+   */
+  override formStateRestoreCallback(
+    state: File | string | FormData | null,
+    _mode: 'restore' | 'autocomplete'
+  ): void {
+    this.checked = state === this.value;
+    this._syncFormValue();
+    this._syncValidity();
+    this._syncStates();
+  }
+
   /**
    * Sync CustomStateSet states so :state() pseudo-classes work from external CSS.
    *

package/src/components/Rating/core/_Rating.ts

@@ -184,6 +184,7 @@ export class AgRating extends FaceMixin(LitElement) {
   override firstUpdated() {
     this._syncFormValue();
     this._syncValidity();
+    this._syncStates();
   }
 
   override updated(changedProperties: Map<string, unknown>) {
@@ -192,6 +193,14 @@ export class AgRating extends FaceMixin(LitElement) {
       this._syncFormValue();
       this._syncValidity();
     }
+    if (
+      changedProperties.has('value') ||
+      changedProperties.has('readonly') ||
+      changedProperties.has('required') ||
+      changedProperties.has('invalid')
+    ) {
+      this._syncStates();
+    }
   }
 
   /**
@@ -202,6 +211,39 @@ export class AgRating extends FaceMixin(LitElement) {
     this.value = 0;
     this._internals.setFormValue(null);
     this._internals.setValidity({});
+    this._syncStates();
+  }
+
+  /**
+   * FACE lifecycle: called on session restore or browser autofill.
+   * Restores the rating value from the previously saved form state.
+   * The state is a numeric string (e.g. "3" or "3.5"), or null for no rating.
+   */
+  override formStateRestoreCallback(
+    state: File | string | FormData | null,
+    _mode: 'restore' | 'autocomplete'
+  ): void {
+    this.value = typeof state === 'string' ? parseFloat(state) : 0;
+    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(readonly) — rating is read-only
+   *  :state(required) — rating is required
+   *  :state(invalid)  — FACE constraint validation is failing
+   */
+  private _syncStates(): void {
+    this._setState('readonly', this.readonly);
+    this._setState('required', this.required);
+    this._setState('invalid', !this._internals.validity.valid);
   }
 
   // ─── End FACE ─────────────────────────────────────────────────────────────

package/src/components/Select/core/_Select.ts

@@ -114,6 +114,51 @@ export class Select extends FaceMixin(LitElement) implements SelectProps {
     }
     this._syncFormValue();
     this._internals.setValidity({});
+    this._syncStates();
+  }
+
+  /**
+   * FACE lifecycle: called on session restore or browser autofill.
+   * Restores the selected option(s) from the previously saved form state.
+   * Uses updateComplete to ensure options are in the DOM before restoring.
+   */
+  override formStateRestoreCallback(
+    state: File | string | FormData | null,
+    _mode: 'restore' | 'autocomplete'
+  ): void {
+    this.updateComplete.then(() => {
+      if (!this.selectElement) return;
+      if (this.multiple && state instanceof FormData) {
+        const restored = new Set(Array.from(state.values()) as string[]);
+        Array.from(this.selectElement.options).forEach(opt => {
+          opt.selected = restored.has(opt.value);
+        });
+      } else if (typeof state === 'string') {
+        Array.from(this.selectElement.options).forEach(opt => {
+          opt.selected = opt.value === state;
+        });
+      }
+      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) — select is disabled
+   *  :state(required) — select is required
+   *  :state(invalid)  — FACE constraint validation is failing
+   */
+  private _syncStates(): void {
+    this._setState('disabled', this.disabled);
+    this._setState('required', this.required);
+    this._setState('invalid', !this._internals.validity.valid);
   }
 
   /**
@@ -144,6 +189,17 @@ export class Select extends FaceMixin(LitElement) implements SelectProps {
 
   // ─── End FACE ─────────────────────────────────────────────────────────────
 
+  override updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has('disabled') ||
+      changedProperties.has('required') ||
+      changedProperties.has('invalid')
+    ) {
+      this._syncStates();
+    }
+  }
+
   protected firstUpdated() {
     // Ensure options are moved after first render
     this.handleSlotChange();
@@ -157,6 +213,7 @@ export class Select extends FaceMixin(LitElement) implements SelectProps {
     // FACE: set initial form value and sync validity after options are in place
     this._syncFormValue();
     this._syncValidity();
+    this._syncStates();
   }
 
   private handleSlotChange() {

package/src/components/SelectionButtonGroup/core/_SelectionButtonGroup.ts

@@ -215,6 +215,46 @@ export class AgSelectionButtonGroup extends FaceMixin(LitElement) implements Sel
     this._internals.setFormValue(null);
     this._syncValidity();
     this._syncChildButtons();
+    this._syncStates();
+  }
+
+  /**
+   * FACE lifecycle: called on session restore or browser autofill.
+   * Restores selected value(s) from the previously saved form state.
+   * Radio mode: state is a single string. Checkbox mode: state is FormData.
+   */
+  override formStateRestoreCallback(
+    state: File | string | FormData | null,
+    _mode: 'restore' | 'autocomplete'
+  ): void {
+    if (state === null) {
+      this._internalSelectedValues = [];
+    } else if (state instanceof FormData) {
+      this._internalSelectedValues = Array.from(state.getAll(this.name)) as string[];
+    } else if (typeof state === 'string') {
+      this._internalSelectedValues = [state];
+    }
+    this._syncFormValue();
+    this._syncValidity();
+    this._syncChildButtons();
+    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) — group is disabled
+   *  :state(required) — group is required
+   *  :state(invalid)  — FACE constraint validation is failing
+   */
+  private _syncStates(): void {
+    this._setState('disabled', this.disabled);
+    this._setState('required', this.required);
+    this._setState('invalid', !this._internals.validity.valid);
   }
 
   // ─── End FACE ─────────────────────────────────────────────────────────────
@@ -260,12 +300,20 @@ export class AgSelectionButtonGroup extends FaceMixin(LitElement) implements Sel
     } else if (changedProperties.has('required')) {
       this._syncValidity();
     }
+    if (
+      changedProperties.has('disabled') ||
+      changedProperties.has('required') ||
+      changedProperties.has('_internalSelectedValues')
+    ) {
+      this._syncStates();
+    }
   }
 
   override firstUpdated() {
     this._syncChildButtons();
     this._syncFormValue();
     this._syncValidity();
+    this._syncStates();
   }
 
   private _getButtons(): AgSelectionButton[] {

package/src/components/SelectionCardGroup/core/_SelectionCardGroup.ts

@@ -192,6 +192,46 @@ export class AgSelectionCardGroup extends FaceMixin(LitElement) implements Selec
     this._internals.setFormValue(null);
     this._syncValidity();
     this._syncChildCards();
+    this._syncStates();
+  }
+
+  /**
+   * FACE lifecycle: called on session restore or browser autofill.
+   * Restores selected value(s) from the previously saved form state.
+   * Radio mode: state is a single string. Checkbox mode: state is FormData.
+   */
+  override formStateRestoreCallback(
+    state: File | string | FormData | null,
+    _mode: 'restore' | 'autocomplete'
+  ): void {
+    if (state === null) {
+      this._internalSelectedValues = [];
+    } else if (state instanceof FormData) {
+      this._internalSelectedValues = Array.from(state.getAll(this.name)) as string[];
+    } else if (typeof state === 'string') {
+      this._internalSelectedValues = [state];
+    }
+    this._syncFormValue();
+    this._syncValidity();
+    this._syncChildCards();
+    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) — group is disabled
+   *  :state(required) — group is required
+   *  :state(invalid)  — FACE constraint validation is failing
+   */
+  private _syncStates(): void {
+    this._setState('disabled', this.disabled);
+    this._setState('required', this.required);
+    this._setState('invalid', !this._internals.validity.valid);
   }
 
   // ─── End FACE ─────────────────────────────────────────────────────────────
@@ -235,12 +275,20 @@ export class AgSelectionCardGroup extends FaceMixin(LitElement) implements Selec
     } else if (changedProperties.has('required')) {
       this._syncValidity();
     }
+    if (
+      changedProperties.has('disabled') ||
+      changedProperties.has('required') ||
+      changedProperties.has('_internalSelectedValues')
+    ) {
+      this._syncStates();
+    }
   }
 
   override firstUpdated() {
     this._syncChildCards();
     this._syncFormValue();
     this._syncValidity();
+    this._syncStates();
   }
 
   private _getCards(): AgSelectionCard[] {

package/src/components/Slider/core/_Slider.ts

@@ -671,12 +671,25 @@ export class AgSlider extends FaceMixin(LitElement) implements SliderProps {
 
   // ─── FACE ─────────────────────────────────────────────────────────────────
 
+  override updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has('disabled') ||
+      changedProperties.has('readonly') ||
+      changedProperties.has('required') ||
+      changedProperties.has('invalid')
+    ) {
+      this._syncStates();
+    }
+  }
+
   override firstUpdated() {
     // Capture default value for formResetCallback, then set initial form value
     this._defaultValue = Array.isArray(this.value)
       ? ([...this.value] as [number, number])
       : this.value;
     this._updateFormValue();
+    this._syncStates();
   }
 
   /**
@@ -688,6 +701,46 @@ export class AgSlider extends FaceMixin(LitElement) implements SliderProps {
       ? ([...this._defaultValue] as [number, number])
       : this._defaultValue;
     this._updateFormValue();
+    this._syncStates();
+  }
+
+  /**
+   * FACE lifecycle: called on session restore or browser autofill.
+   * Restores the slider value from the previously saved FormData.
+   * Single mode: one entry (name, valueStr). Dual mode: two entries.
+   */
+  override formStateRestoreCallback(
+    state: File | string | FormData | null,
+    _mode: 'restore' | 'autocomplete'
+  ): void {
+    if (!(state instanceof FormData) || !this.name) return;
+    const entries = Array.from(state.getAll(this.name)) as string[];
+    if (this.dual && entries.length === 2) {
+      this.value = [parseFloat(entries[0]), parseFloat(entries[1])];
+    } else if (entries.length === 1) {
+      this.value = parseFloat(entries[0]);
+    }
+    this._updateFormValue();
+    this._syncStates();
+  }
+
+  /**
+   * Sync CustomStateSet states so :state() pseudo-classes work from external CSS.
+   *
+   * Must be called AFTER _updateFormValue() (which also calls setValidity) so
+   * that :state(invalid) reads the freshly-updated _internals.validity.valid value.
+   *
+   * Exposed states:
+   *  :state(disabled)  — slider is disabled
+   *  :state(readonly)  — slider is read-only
+   *  :state(required)  — slider 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/Toggle/core/_Toggle.ts

@@ -396,6 +396,21 @@ export class AgToggle extends FaceMixin(LitElement) implements ToggleProps {
     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.
+   */
+  override formStateRestoreCallback(
+    state: File | string | FormData | null,
+    _mode: 'restore' | 'autocomplete'
+  ): void {
+    this.checked = state !== 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

package/src/shared/face-mixin.ts

@@ -106,6 +106,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.
@@ -135,6 +140,16 @@ export const FaceMixin = <T extends Constructor<LitElement>>(superClass: T) => {
      */
     protected _internals!: ElementInternals;
 
+    /**
+     * The disabled state the user set on this element itself (via attribute or property),
+     * captured before a <fieldset disabled> ancestor overwrites it.
+     * Restored when the fieldset is re-enabled so the two sources don't stomp each other.
+     */
+    private _ownDisabled = false;
+
+    /** True while a <fieldset disabled> ancestor is disabling this element. */
+    private _parentDisabled = false;
+
     /**
      * The name under which this control's value is submitted with the parent form.
      * Mirrors the standard `name` attribute on native form controls.
@@ -182,14 +197,21 @@ export const FaceMixin = <T extends Constructor<LitElement>>(superClass: T) => {
 
     /**
      * 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(disabled: boolean): void {
-      // `disabled` is declared on each subclass via @property; cast to access it
-      (this as unknown as { disabled: boolean }).disabled = disabled;
+      if (disabled) {
+        // Save the user's own disabled state before the fieldset takes over.
+        this._ownDisabled = (this as unknown as { disabled: boolean }).disabled;
+        this._parentDisabled = true;
+        (this as unknown as { disabled: boolean }).disabled = true;
+      } else {
+        this._parentDisabled = false;
+        // Restore only the user-set state — do not blindly set false.
+        (this as unknown as { disabled: boolean }).disabled = this._ownDisabled;
+      }
     }
 
     /**
@@ -201,6 +223,26 @@ export const FaceMixin = <T extends Constructor<LitElement>>(superClass: T) => {
       // no-op default — override in subclass
     }
 
+    /**
+     * 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(
+      _state: File | string | FormData | null,
+      _mode: 'restore' | 'autocomplete'
+    ): void {
+      // no-op default — override in subclass
+    }
+
     /**
      * Toggle a custom state in ElementInternals.states (CustomStateSet).
      *