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

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

@@ -5,6 +5,7 @@ import {
   createFormControlIds,
   buildAriaDescribedBy,
 } from '../../../shared/form-control-utils';
+import { FaceMixin } from '../../../shared/face-mixin';
 
 
 export type RadioSize = 'small' | 'medium' | 'large';
@@ -29,35 +30,35 @@ export interface RadioProps {
   /**
    * Name attribute for the radio input (required for grouping)
    */
-  name: string;
+  name?: string;
   /**
    * Value of the radio input
    */
-  value: string;
+  value?: string;
   /**
    * Whether the radio is checked
    */
-  checked: boolean;
+  checked?: boolean;
   /**
    * Whether the radio is disabled
    */
-  disabled: boolean;
+  disabled?: boolean;
   /**
    * Size of the radio button
    */
-  size: RadioSize;
+  size?: RadioSize;
   /**
    * Color theme variant
    */
-  theme: RadioTheme;
+  theme?: RadioTheme;
   /**
    * Label text for the radio button (internal label that wraps the radio)
    */
-  labelText: string;
+  labelText?: string;
   /**
    * Position of labelText relative to radio (end = after radio, start = before radio)
    */
-  labelPosition: 'end' | 'start';
+  labelPosition?: 'end' | 'start';
   /**
    * Optional external label displayed above the radio (useful for groups or standalone with context)
    */
@@ -96,7 +97,7 @@ export interface RadioProps {
   onChange?: (event: RadioChangeEvent) => void;
 }
 
-export class AgRadio extends LitElement implements RadioProps {
+export class AgRadio extends FaceMixin(LitElement) implements RadioProps {
   static override styles = [
     formControlStyles,
     css`
@@ -286,9 +287,6 @@ export class AgRadio extends LitElement implements RadioProps {
   `,
   ];
 
-  @property({ type: String, reflect: true })
-  name = '';
-
   @property({ type: String, reflect: true })
   value = '';
 
@@ -336,6 +334,8 @@ export class AgRadio extends LitElement implements RadioProps {
   // Stable IDs for form control elements (created once)
   private _ids = createFormControlIds('ag-radio');
 
+  private inputRef?: HTMLInputElement;
+
   // Event callback props
   @property({ attribute: false })
   onClick?: (event: MouseEvent) => void;
@@ -343,6 +343,111 @@ export class AgRadio extends LitElement implements RadioProps {
   @property({ attribute: false })
   onChange?: (event: RadioChangeEvent) => void;
 
+  // ─── FACE ─────────────────────────────────────────────────────────────────
+
+  /**
+   * Sync the form value to ElementInternals.
+   * Submits this radio's value when checked, or null when unchecked.
+   * Each radio in the group reports independently; only the checked one
+   * contributes a value, matching native radio behavior.
+   */
+  private _syncFormValue(): void {
+    this._internals.setFormValue(this.checked ? this.value : null);
+  }
+
+  /**
+   * Returns true if any ag-radio in this named group is checked.
+   * Uses the same DOM-traversal logic as uncheckOtherRadiosInGroup so it
+   * works whether the radios are in the document or nested inside a shadow root.
+   */
+  private _isGroupChecked(): boolean {
+    if (this.checked) return true;
+    // Query from the immediate root node. If the radios live inside a shadow root
+    // (e.g. a Lit host component), getRootNode() returns that shadow root and
+    // querySelectorAll can reach them. If they're in the document's light DOM
+    // (React/Vue), getRootNode() returns the document. Traversing all the way up
+    // to document would bypass shadow roots and miss the siblings.
+    const root = this.getRootNode() as Document | ShadowRoot;
+    return Array.from(root.querySelectorAll(`ag-radio[name="${this.name}"]`)).some(
+      (el) => (el as AgRadio).checked
+    );
+  }
+
+  /**
+   * Sync validity to ElementInternals.
+   *
+   * Shadow DOM isolation prevents the inner <input type="radio"> from seeing
+   * sibling ag-radio elements in separate shadow trees, so native delegation
+   * would report each unchecked required radio as invalid individually.
+   * Instead we query the DOM directly: a required radio group is valid when
+   * ANY radio with the same name is checked.
+   */
+  private _syncValidity(): void {
+    if (!this.required) {
+      this._internals.setValidity({});
+      return;
+    }
+    if (this._isGroupChecked()) {
+      this._internals.setValidity({});
+    } else {
+      this._internals.setValidity({ valueMissing: true }, 'Please select one of these options.');
+    }
+  }
+
+  /**
+   * FACE lifecycle: called when the parent form is reset.
+   * Restores checked to false and clears the form value.
+   */
+  override formResetCallback(): void {
+    this.checked = false;
+    this._internals.setFormValue(null);
+    this._internals.setValidity({});
+    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(checked)  — this radio is selected
+   *  :state(disabled) — radio is disabled
+   *  :state(required) — radio is required
+   *  :state(invalid)  — FACE constraint validation is failing
+   */
+  private _syncStates(): void {
+    this._setState('checked', this.checked);
+    this._setState('disabled', this.disabled);
+    this._setState('required', this.required);
+    this._setState('invalid', !this._internals.validity.valid);
+  }
+
+  // ─── End FACE ─────────────────────────────────────────────────────────────
+
+  override firstUpdated() {
+    this.inputRef = this.shadowRoot?.querySelector('.radio-input') as HTMLInputElement;
+
+    // FACE: set initial form value and sync validity after first render
+    this._syncFormValue();
+    this._syncValidity();
+    this._syncStates();
+  }
+
+  override updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+
+    // FACE: sync form value and validity for programmatic changes to checked.
+    // This fires when uncheckOtherRadiosInGroup() sets sibling.checked = false,
+    // so group FACE state stays synchronized without any explicit coordination.
+    if (changedProperties.has('checked')) {
+      this._syncFormValue();
+      this._syncValidity();
+      this._syncStates();
+    }
+  }
+
   private handleClick(e: MouseEvent) {
     if (this.onClick) {
       this.onClick(e);
@@ -415,22 +520,8 @@ export class AgRadio extends LitElement implements RadioProps {
 
   private getRadiosInGroup(): AgRadio[] {
     if (!this.name) return [];
-
-    // Find the root document (traverse up from shadow roots if needed)
-    let root: Node = this.getRootNode();
-    while (root && 'host' in root) {
-      const parent = (root as ShadowRoot).host?.getRootNode();
-      if (parent && parent !== root) {
-        root = parent;
-      } else {
-        break;
-      }
-    }
-
-    const doc = root instanceof Document ? root : document;
-    const allRadios = doc.querySelectorAll(`ag-radio[name="${this.name}"]`);
-
-    // Filter to only enabled radios and return as array
+    const root = this.getRootNode() as Document | ShadowRoot;
+    const allRadios = root.querySelectorAll(`ag-radio[name="${this.name}"]`);
     return Array.from(allRadios).filter((radio): radio is AgRadio => {
       return radio instanceof AgRadio && !radio.disabled;
     });
@@ -446,6 +537,11 @@ export class AgRadio extends LitElement implements RadioProps {
     const wasChecked = this.checked;
     this.checked = input.checked;
 
+    // FACE: sync form value and validity on user interaction
+    this._syncFormValue();
+    this._syncValidity();
+    this._syncStates();
+
     // Radio group coordination: When this radio is checked, uncheck all other radios with the same name
     // This is necessary because native radios in separate shadow DOMs don't coordinate automatically
     if (this.checked && !wasChecked && this.name) {
@@ -474,23 +570,17 @@ export class AgRadio extends LitElement implements RadioProps {
   }
 
   private uncheckOtherRadiosInGroup() {
-    // Find the root document (traverse up from shadow roots if needed)
-    let root: Node = this.getRootNode();
-    while (root && 'host' in root) {
-      const parent = (root as ShadowRoot).host?.getRootNode();
-      if (parent && parent !== root) {
-        root = parent;
-      } else {
-        break;
-      }
-    }
-
-    const doc = root instanceof Document ? root : document;
-    const allRadios = doc.querySelectorAll(`ag-radio[name="${this.name}"]`);
+    const root = this.getRootNode() as Document | ShadowRoot;
+    const allRadios = root.querySelectorAll(`ag-radio[name="${this.name}"]`);
 
     allRadios.forEach((radio) => {
       if (radio !== this && radio instanceof AgRadio) {
         radio.checked = false;
+        // If checked didn't actually change (was already false), Lit's updated() won't
+        // fire on the sibling, so _syncValidity() wouldn't be called. Force it so
+        // unchecked siblings correctly reflect the group's new validity state.
+        radio._syncValidity();
+        radio._syncStates();
       }
     });
   }

package/src/components/Radio/vue/VueRadio.vue

@@ -1,6 +1,5 @@
 <template>
   <ag-radio
-    ref="radioRef"
     .checked="checked"
     .disabled="disabled"
     .required="required"
@@ -25,7 +24,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import type { RadioSize, RadioTheme } from "../core/Radio";
 import "../core/Radio";
 
@@ -47,7 +45,7 @@ export interface VueRadioProps {
   helpText?: string;
 }
 
-const props = withDefaults(defineProps<VueRadioProps>(), {
+withDefaults(defineProps<VueRadioProps>(), {
   name: "",
   value: "",
   checked: false,
@@ -71,8 +69,6 @@ const emit = defineEmits<{
   "update:checked": [checked: boolean];
 }>();
 
-const radioRef = ref<HTMLElement>();
-
 const handleClick = (event: MouseEvent) => {
   emit("click", event);
 };

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

@@ -8,6 +8,7 @@ import {
   type LabelPosition,
 } from '../../../shared/form-control-utils';
 import { formControlStyles } from '../../../shared/form-control-styles';
+import { FaceMixin, type ValidationMessages } from '../../../shared/face-mixin';
 
 // Event detail interfaces
 export interface RatingChangeEventDetail {
@@ -46,6 +47,7 @@ export interface RatingProps {
   invalid?: boolean;
   errorMessage?: string;
   helpText?: string;
+  validationMessages?: ValidationMessages;
   // Event handlers
   onRatingChange?: (event: RatingChangeEvent) => void;
   onRatingHover?: (event: RatingHoverEvent) => void;
@@ -53,7 +55,7 @@ export interface RatingProps {
 
 let uniqueIdCounter = 0;
 
-export class AgRating extends LitElement {
+export class AgRating extends FaceMixin(LitElement) {
   private uniqueId = ++uniqueIdCounter; // Unique ID for clip paths in half-star rendering
 
   // Form control IDs
@@ -84,9 +86,6 @@ export class AgRating extends LitElement {
   @property({ type: String, reflect: true })
   declare size: RatingSize; // Size: small, medium, large
 
-  @property({ type: String })
-  declare name: string; // Form integration name
-
   // Form control properties
   @property({ type: String })
   declare label: string;
@@ -112,6 +111,9 @@ export class AgRating extends LitElement {
   @property({ type: String, attribute: 'help-text' })
   declare helpText: string;
 
+  @property({ attribute: false })
+  declare validationMessages: ValidationMessages | undefined;
+
   // Event handlers
   @property({ attribute: false })
   declare onRatingChange?: (event: RatingChangeEvent) => void;
@@ -141,7 +143,6 @@ export class AgRating extends LitElement {
     this.allowClear = false;
     this.variant = '';
     this.size = 'md';
-    this.name = '';
     this.label = '';
     this.labelHidden = false;
     this.noLabel = false;
@@ -149,11 +150,62 @@ export class AgRating extends LitElement {
     this.invalid = false;
     this.errorMessage = '';
     this.helpText = '';
+    this.validationMessages = undefined;
     this.handlePointerMove = this.handlePointerMove.bind(this);
     this.handlePointerUp = this.handlePointerUp.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
   }
 
+  // ─── FACE ─────────────────────────────────────────────────────────────────
+
+  /**
+   * Sync the form value to ElementInternals.
+   * Submits the numeric rating as a string, or null when value is 0 (no rating).
+   */
+  private _syncFormValue(): void {
+    this._internals.setFormValue(this.value > 0 ? String(this.value) : null);
+  }
+
+  /**
+   * Sync validity. No inner input to delegate to, so we implement required
+   * directly: a rating of 0 with required=true is valueMissing.
+   */
+  private _syncValidity(): void {
+    if (this.required && this.value === 0) {
+      this._internals.setValidity(
+        { valueMissing: true },
+        this.validationMessages?.valueMissing ?? 'Please select a rating.'
+      );
+    } else {
+      this._internals.setValidity({});
+    }
+  }
+
+  override firstUpdated() {
+    this._syncFormValue();
+    this._syncValidity();
+  }
+
+  override updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('value')) {
+      this._syncFormValue();
+      this._syncValidity();
+    }
+  }
+
+  /**
+   * FACE lifecycle: called when the parent form is reset.
+   * Restores rating to 0 (no selection).
+   */
+  override formResetCallback(): void {
+    this.value = 0;
+    this._internals.setFormValue(null);
+    this._internals.setValidity({});
+  }
+
+  // ─── End FACE ─────────────────────────────────────────────────────────────
+
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener('keydown', this.handleKeyDown);
@@ -558,6 +610,11 @@ export class AgRating extends LitElement {
   private commitValue(newValue: number, oldValue: number) {
     const normalized = this.roundToPrecision(newValue);
     this.value = normalized;
+
+    // FACE: sync form value and validity on user interaction
+    this._syncFormValue();
+    this._syncValidity();
+
     const changeEvent = new CustomEvent<RatingChangeEventDetail>('rating-change', {
       detail: { oldValue, newValue: normalized },
       bubbles: true,

package/src/components/Rating/vue/VueRating.vue

@@ -6,6 +6,7 @@
     .allowClear="allowClear"
     .required="required"
     .invalid="invalid"
+    .validationMessages="validationMessages"
     :max="max"
     :precision="precision"
     :variant="variant"
@@ -28,6 +29,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import "../core/Rating";
+import type { ValidationMessages } from "../../../shared/face-mixin";
 
 /**
  * Vue Rating Props
@@ -59,6 +61,7 @@ export interface VueRatingProps {
   invalid?: boolean;
   errorMessage?: string;
   helpText?: string;
+  validationMessages?: ValidationMessages;
 }
 
 const props = withDefaults(defineProps<VueRatingProps>(), {

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

@@ -7,6 +7,7 @@ import {
   type LabelPosition,
 } from '../../../shared/form-control-utils';
 import { formControlStyles } from '../../../shared/form-control-styles';
+import { FaceMixin, syncInnerInputValidity } from '../../../shared/face-mixin';
 
 export type SelectSize = 'small' | 'large' | '';
 
@@ -47,7 +48,7 @@ export interface SelectProps {
  *
  * @fires change - Emitted when selection changes
  */
-export class Select extends LitElement implements SelectProps {
+export class Select extends FaceMixin(LitElement) implements SelectProps {
   @property({ type: String, reflect: true })
   public size: SelectSize = '';
 
@@ -57,9 +58,6 @@ export class Select extends LitElement implements SelectProps {
   @property({ type: Boolean, reflect: true })
   public disabled = false;
 
-  @property({ type: String })
-  public name = '';
-
   @property({ type: Number, attribute: 'multiple-size' })
   public multipleSize?: number;
 
@@ -103,6 +101,49 @@ export class Select extends LitElement implements SelectProps {
   @query('select')
   private selectElement!: HTMLSelectElement;
 
+  // ─── FACE ─────────────────────────────────────────────────────────────────
+
+  /**
+   * FACE lifecycle: called when the parent form is reset.
+   * Restores each option to its defaultSelected state (the `selected`
+   * attribute from the original HTML), then re-syncs the form value.
+   */
+  override formResetCallback(): void {
+    if (this.selectElement) {
+      Array.from(this.selectElement.options).forEach(opt => (opt.selected = opt.defaultSelected));
+    }
+    this._syncFormValue();
+    this._internals.setValidity({});
+  }
+
+  /**
+   * Sync the form value to ElementInternals.
+   * Single select: submits the selected value as a string.
+   * Multi-select: uses the FormData overload to submit all selected values
+   * under the same key (matching native <select multiple> behavior).
+   */
+  private _syncFormValue(): void {
+    if (!this.selectElement) return;
+    if (this.multiple) {
+      const formData = new FormData();
+      Array.from(this.selectElement.selectedOptions).forEach(opt => {
+        formData.append(this.name, opt.value);
+      });
+      this._internals.setFormValue(formData);
+    } else {
+      this._internals.setFormValue(this.selectElement.value || '');
+    }
+  }
+
+  /**
+   * Sync validity to ElementInternals by delegating to the inner <select>.
+   */
+  private _syncValidity(): void {
+    syncInnerInputValidity(this._internals, this.selectElement);
+  }
+
+  // ─── End FACE ─────────────────────────────────────────────────────────────
+
   protected firstUpdated() {
     // Ensure options are moved after first render
     this.handleSlotChange();
@@ -112,6 +153,10 @@ export class Select extends LitElement implements SelectProps {
     if (slotElement) {
       slotElement.addEventListener('slotchange', () => this.handleSlotChange());
     }
+
+    // FACE: set initial form value and sync validity after options are in place
+    this._syncFormValue();
+    this._syncValidity();
   }
 
   private handleSlotChange() {
@@ -162,7 +207,7 @@ export class Select extends LitElement implements SelectProps {
       /* Base styling */
       padding: var(--ag-space-2) var(--ag-space-8) var(--ag-space-2) var(--ag-space-3);
       -moz-padding-start: calc(var(--ag-space-3) - 3px);
-      font-size: var(--ag-font-size-base);
+      font-size: var(--ag-font-size-sm);
       font-weight: 400;
       line-height: 1.5;
       font-family: inherit;
@@ -212,7 +257,7 @@ export class Select extends LitElement implements SelectProps {
       padding-block-start: var(--ag-space-1);
       padding-block-end: var(--ag-space-1);
       padding-inline-start: var(--ag-space-2);
-      font-size: var(--ag-font-size-small);
+      font-size: var(--ag-font-size-sm);
     }
 
     /* Large size variant */
@@ -276,6 +321,10 @@ export class Select extends LitElement implements SelectProps {
       value = select.value;
     }
 
+    // FACE: sync form value and validity on every selection change
+    this._syncFormValue();
+    this._syncValidity();
+
     // Dual-dispatch: dispatchEvent + callback
     const changeEvent = new CustomEvent<SelectChangeEventDetail>('change', {
       detail: { value },

package/src/components/SelectionButton/core/SelectionButton.ts

@@ -0,0 +1,13 @@
+import { AgSelectionButton } from './_SelectionButton.js';
+
+if (!customElements.get('ag-selection-button')) {
+  customElements.define('ag-selection-button', AgSelectionButton);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ag-selection-button': AgSelectionButton;
+  }
+}
+
+export * from './_SelectionButton.js';