@fluentui/web-components 3.0.0-beta.39 → 3.0.0-beta.40

package/dist/web-components.d.ts

@@ -19,8 +19,9 @@ import { ViewTemplate } from '@microsoft/fast-element';
  * An Accordion Custom HTML Element
  * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
  *
+ * @slot - The default slot for the accordion items
  * @fires change - Fires a custom 'change' event when the active item changes
- * @csspart item - The slot for the accordion items
+ *
  * @public
  */
 export declare class Accordion extends FASTElement {
@@ -38,31 +39,53 @@ export declare class Accordion extends FASTElement {
      * @internal
      */
     slottedAccordionItems: HTMLElement[];
+    /**
+     * @internal
+     */
     protected accordionItems: Element[];
     /**
      * @internal
      */
     slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
     /**
+     * Watch for changes to the slotted accordion items `disabled` and `expanded` attributes
      * @internal
      */
     handleChange(source: any, propertyName: string): void;
-    private activeid;
     private activeItemIndex;
-    private accordionIds;
-    private change;
+    /**
+     * Find the first expanded item in the accordion
+     * @returns {void}
+     */
     private findExpandedItem;
+    /**
+     * Resets event listeners and sets the `accordionItems` property
+     * then rebinds event listeners to each non-disabled item
+     * @returns {void}
+     */
     private setItems;
+    /**
+     * Checks if the accordion is in single expand mode
+     * @returns {boolean}
+     */
+    private isSingleExpandMode;
+    /**
+     * Controls the behavior of the accordion in single expand mode
+     * @param expandedItem The item to expand in single expand mode
+     * @returns {void}
+     */
     private setSingleExpandMode;
+    /**
+     * Removes event listeners from the previous accordion items
+     * @param oldValue An array of the previous accordion items
+     */
     private removeItemListeners;
-    private activeItemChange;
-    private handleExpandedChange;
-    private getItemIds;
-    private isSingleExpandMode;
-    private handleItemKeyDown;
-    private handleItemFocus;
-    private adjust;
-    private focusItem;
+    /**
+     * Changes the expanded state of the accordion item
+     * @param evt Click event
+     * @returns
+     */
+    private expandedChangedHandler;
 }
 
 /**
@@ -89,22 +112,24 @@ export declare type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
 
 /**
  *
- * @slot start - Content which can be provided between the heading and the icon
- * @slot end - Content which can be provided between the start slot and icon
+ * @slot start - Content positioned before heading in the collapsed state
  * @slot heading - Content which serves as the accordion item heading and text of the expand button
  * @slot - The default slot for accordion item content
- * @slot expanded-icon - The expanded icon
- * @slot collapsed-icon - The collapsed icon
- * @fires change - Fires a custom 'change' event when the button is invoked
+ * @slot marker-expanded - The expanded icon
+ * @slot marker-collapsed - The collapsed icon
  * @csspart heading - Wraps the button
  * @csspart button - The button which serves to invoke the item
- * @csspart heading-content - Wraps the slot for the heading content within the button
- * @csspart icon - The icon container
- * @csspart region - The wrapper for the accordion item content
+ * @csspart content - The wrapper for the accordion item content
  *
  * @public
  */
 export declare class AccordionItem extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
      * heading element.
@@ -122,6 +147,12 @@ export declare class AccordionItem extends FASTElement {
      * HTML attribute: expanded
      */
     expanded: boolean;
+    /**
+     * Handles expanded changes
+     * @param prev - previous value
+     * @param next - next value
+     */
+    expandedChanged(prev: boolean, next: boolean): void;
     /**
      * Disables an accordion item
      *
@@ -130,6 +161,12 @@ export declare class AccordionItem extends FASTElement {
      * HTML attribute: disabled
      */
     disabled: boolean;
+    /**
+     * Handles disabled changes
+     * @param prev - previous value
+     * @param next - next value
+     */
+    disabledChanged(prev: boolean, next: boolean): void;
     /**
      * The item ID
      *
@@ -146,6 +183,12 @@ export declare class AccordionItem extends FASTElement {
      * HTML Attribute: size
      */
     size?: AccordionItemSize;
+    /**
+     * Handles changes to size attribute
+     * @param prev - previous value
+     * @param next - next value
+     */
+    sizeChanged(prev: AccordionItemSize, next: AccordionItemSize): void;
     /**
      * Sets the width of the focus state.
      *
@@ -154,22 +197,30 @@ export declare class AccordionItem extends FASTElement {
      * HTML Attribute: block
      */
     block: boolean;
+    /**
+     * Handles changes to block attribute
+     * @param prev - previous value
+     * @param next - next value
+     */
+    blockChanged(prev: boolean, next: boolean): void;
     /**
      * Sets expand and collapsed icon position.
      *
      * @public
      * @remarks
-     * HTML Attribute: expand-icon-position
+     * HTML Attribute: marker-position
      */
-    expandIconPosition?: AccordionItemExpandIconPosition;
+    markerPosition?: AccordionItemMarkerPosition;
     /**
-     * @internal
+     * Handles changes to marker-position attribute
+     * @param prev - previous value
+     * @param next - next value
      */
-    expandbutton: HTMLElement;
+    markerPositionChanged(prev: AccordionItemMarkerPosition, next: AccordionItemMarkerPosition): void;
     /**
      * @internal
      */
-    clickHandler: (e: MouseEvent) => void;
+    expandbutton: HTMLElement;
 }
 
 /**
@@ -192,7 +243,7 @@ export declare const accordionItemDefinition: FASTElementDefinition<typeof Accor
 /**
  * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
  */
-export declare const AccordionItemExpandIconPosition: {
+export declare const AccordionItemMarkerPosition: {
     readonly start: "start";
     readonly end: "end";
 };
@@ -201,7 +252,7 @@ export declare const AccordionItemExpandIconPosition: {
  * Applies expand/collapse icon position
  * @public
  */
-export declare type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
+export declare type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemMarkerPosition>;
 
 /**
  * Accordion Item configuration options
@@ -984,13 +1035,7 @@ declare class BaseAnchor extends FASTElement {
 }
 
 /**
- * A Checkbox Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
- *
- * @slot checked-indicator - The checked indicator
- * @slot indeterminate-indicator - The indeterminate indicator
- * @fires change - Emits a custom change event when the checked state changes
- * @fires input - Emits a custom input event when the checked state changes
+ * The base class for a component with a toggleable checked state.
  *
  * @public
  */
@@ -1010,37 +1055,46 @@ declare class BaseCheckbox extends FASTElement {
      * @public
      */
     get checked(): boolean;
-    set checked(state: boolean);
+    set checked(next: boolean);
     /**
-     * The element's disabled state.
+     * The disabled state of the control.
+     *
      * @public
-     * @remarks
-     * HTML Attribute: `disabled`
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
-     * The id of a form to associate the element to.
-     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
+     * Toggles the disabled state when the user changes the `disabled` property.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `form`
+     * @internal
      */
-    formAttribute?: string;
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
-     * Indicates that the element is in an indeterminate or mixed state.
+     * The initial disabled state of the control.
      *
      * @public
+     * @remarks
+     * HTML Attribute: `disabled`
      */
-    indeterminate?: boolean;
+    disabledAttribute?: boolean;
     /**
-     * Synchronizes the element's indeterminate state with the internal ElementInternals state.
+     * Sets the disabled state when the `disabled` attribute changes.
      *
+     * @param prev - the previous value
+     * @param next - the current value
      * @internal
      */
-    indeterminateChanged(prev: boolean, next: boolean): void;
+    protected disabledAttributeChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
-     * The element's checked state.
+     * The id of a form to associate the element to.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `form`
+     */
+    formAttribute?: string;
+    /**
+     * The initial checked state of the element.
      *
      * @public
      * @remarks
@@ -1048,11 +1102,13 @@ declare class BaseCheckbox extends FASTElement {
      */
     initialChecked?: boolean;
     /**
-     * Updates the form value when the checked state changes.
+     * Updates the checked state when the `checked` attribute is changed, unless the checked state has been changed by the user.
      *
+     * @param prev - The previous initial checked state
+     * @param next - The current initial checked state
      * @internal
      */
-    initialCheckedChanged(prev: boolean | undefined, next: boolean): void;
+    protected initialCheckedChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
      * The initial value of the input.
      *
@@ -1062,13 +1118,13 @@ declare class BaseCheckbox extends FASTElement {
      */
     initialValue: string;
     /**
-     * Sets the value of the input when the value attribute changes.
+     * Sets the value of the input when the `value` attribute changes.
      *
-     * @param prev - The previous value
-     * @param next - The current value
+     * @param prev - The previous initial value
+     * @param next - The current initial value
      * @internal
      */
-    initialValueChanged(prev: string, next: string): void;
+    protected initialValueChanged(prev: string, next: string): void;
     /**
      * The name of the element. This element's value will be surfaced during form submission under the provided name.
      *
@@ -1092,13 +1148,13 @@ declare class BaseCheckbox extends FASTElement {
      * @param next - The current required state
      * @internal
      */
-    requiredChanged(prev: boolean, next: boolean): void;
+    protected requiredChanged(prev: boolean, next: boolean): void;
     /**
      * The internal checked state of the control.
      *
      * @internal
      */
-    private _checked;
+    private _checked?;
     /**
      * Indicates that the checked state has been changed by the user.
      *
@@ -1131,7 +1187,7 @@ declare class BaseCheckbox extends FASTElement {
      *
      * @public
      */
-    get labels(): ReadonlyArray<Node>;
+    get labels(): ReadonlyArray<HTMLLabelElement>;
     /**
      * The fallback validation message, taken from a native checkbox `<input>` element.
      *
@@ -1176,12 +1232,6 @@ declare class BaseCheckbox extends FASTElement {
      * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
      */
     get willValidate(): boolean;
-    /**
-     * Sets the `elementInternals.ariaChecked` value based on the checked state.
-     *
-     * @internal
-     */
-    private setAriaChecked;
     /**
      * Checks the validity of the element and returns the result.
      *
@@ -1198,14 +1248,13 @@ declare class BaseCheckbox extends FASTElement {
      */
     clickHandler(e: MouseEvent): boolean | void;
     connectedCallback(): void;
-    constructor();
     /**
      * Updates the form value when a user changes the `checked` state.
      *
      * @param e - the event object
      * @internal
      */
-    inputHandler(e: Event): boolean | void;
+    inputHandler(e: InputEvent): boolean | void;
     /**
      * Prevents scrolling when the user presses the space key.
      *
@@ -1234,6 +1283,13 @@ declare class BaseCheckbox extends FASTElement {
      * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
      */
     reportValidity(): boolean;
+    /**
+     * Sets the ARIA checked state.
+     *
+     * @param value - The checked state
+     * @internal
+     */
+    protected setAriaChecked(value?: boolean): void;
     /**
      * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
      *
@@ -1260,9 +1316,10 @@ declare class BaseCheckbox extends FASTElement {
     /**
      * Toggles the checked state of the control.
      *
+     * @param force - Forces the element to be checked or unchecked
      * @public
      */
-    private toggleChecked;
+    toggleChecked(force?: boolean): void;
 }
 
 /**
@@ -1798,27 +1855,31 @@ export declare const ButtonType: {
 export declare type ButtonType = ValuesOf<typeof ButtonType>;
 
 /**
- * Creates a checkable form associated component.
- * @beta
- */
-declare function CheckableFormAssociated<T extends ConstructableFormAssociated>(BaseCtor: T): T;
-
-/**
- * Base class for providing Custom Element Form Association with checkable features.
+ * A Checkbox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#checkbox | ARIA checkbox }.
  *
- * @beta
+ * @slot checked-indicator - The checked indicator
+ * @slot indeterminate-indicator - The indeterminate indicator
+ * @fires change - Emits a custom change event when the checked state changes
+ * @fires input - Emits a custom input event when the checked state changes
+ *
+ * @public
  */
-declare interface CheckableFormAssociated extends FormAssociated {
-    currentChecked: boolean;
-    dirtyChecked: boolean;
-    checkedAttribute: boolean;
-    defaultChecked: boolean;
-    defaultCheckedChanged(oldValue: boolean | undefined, newValue: boolean): void;
-    checked: boolean;
-    checkedChanged(oldValue: boolean | undefined, newValue: boolean): void;
-}
-
 export declare class Checkbox extends BaseCheckbox {
+    /**
+     * Indicates that the element is in an indeterminate or mixed state.
+     *
+     * @public
+     */
+    indeterminate?: boolean;
+    /**
+     * Updates the indeterminate state when the `indeterminate` property changes.
+     *
+     * @param prev - the indeterminate state
+     * @param next - the current indeterminate state
+     * @internal
+     */
+    protected indeterminateChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
      * Indicates the shape of the checkbox.
      *
@@ -1828,13 +1889,15 @@ export declare class Checkbox extends BaseCheckbox {
      */
     shape?: CheckboxShape;
     /**
-     * Handles changes to shape attribute custom states
-     * @param prev - the previous state
-     * @param next - the next state
+     * Applies shape states when the `shape` property changes.
+     *
+     * @param prev - the previous shape value
+     * @param next - the next shape value
+     * @internal
      */
-    shapeChanged(prev: CheckboxShape | undefined, next: CheckboxShape | undefined): void;
+    protected shapeChanged(prev: CheckboxShape | undefined, next: CheckboxShape | undefined): void;
     /**
-     * Indicates the size of the checkbox.
+     * Indicates the size of the control.
      *
      * @public
      * @remarks
@@ -1842,11 +1905,28 @@ export declare class Checkbox extends BaseCheckbox {
      */
     size?: CheckboxSize;
     /**
-     * Handles changes to size attribute custom states
+     * Applies size states when the `size` property changes.
+     *
      * @param prev - the previous state
      * @param next - the next state
+     * @internal
      */
-    sizeChanged(prev: CheckboxSize | undefined, next: CheckboxSize | undefined): void;
+    protected sizeChanged(prev: CheckboxSize | undefined, next: CheckboxSize | undefined): void;
+    constructor();
+    /**
+     * Sets the ARIA checked state. If the `indeterminate` flag is true, the value will be 'mixed'.
+     *
+     * @internal
+     * @override
+     */
+    protected setAriaChecked(value?: boolean): void;
+    /**
+     * Toggles the checked state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     */
+    toggleChecked(force?: boolean): void;
 }
 
 /**
@@ -4877,6 +4957,19 @@ export declare class Field extends FASTElement {
      * HTML Attribute: `label-position`
      */
     labelPosition: FieldLabelPosition;
+    /**
+     * The slotted label elements.
+     *
+     * @internal
+     */
+    labelSlot: Node[];
+    /**
+     * Updates attributes on the slotted label elements.
+     *
+     * @param prev - the previous list of slotted label elements
+     * @param next - the current list of slotted label elements
+     */
+    protected labelSlotChanged(prev: Node[], next: Node[]): void;
     /**
      * The slotted message elements. Filtered to only include elements with a `flag` attribute.
      *
@@ -4919,19 +5012,28 @@ export declare class Field extends FASTElement {
      * @public
      */
     input: SlottableInput;
+    /**
+     * Updates the field's states and label properties when the assigned input changes.
+     *
+     * @param prev - the previous input
+     * @param next - the current input
+     */
+    inputChanged(prev: SlottableInput | undefined, next: SlottableInput | undefined): void;
     /**
      * Calls the `setStates` method when a `change` event is emitted from the slotted input.
      *
      * @param e - the event object
      * @internal
      */
-    changeHandler(e: Event): void;
+    changeHandler(e: Event): boolean | void;
     /**
      * Redirects `click` events to the slotted input.
      *
+     * @param e - the event object
      * @internal
      */
     clickHandler(e: MouseEvent): boolean | void;
+    constructor();
     /**
      * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
      *
@@ -4953,12 +5055,19 @@ export declare class Field extends FASTElement {
      * @internal
      */
     invalidHandler(e: Event): boolean | void;
+    /**
+     * Sets ARIA and form-related attributes on slotted label elements.
+     *
+     * @internal
+     */
+    private setLabelProperties;
     /**
      * Toggles the field's states based on the slotted input.
      *
      * @internal
      */
     setStates(): void;
+    setValidationStates(): void;
 }
 
 /**
@@ -5152,15 +5261,6 @@ declare interface FormAssociated extends Omit<ElementInternals, 'labels'> {
     valueChanged(previous: string, next: string): void;
 }
 
-/**
- * @beta
- */
-declare class FormAssociatedRadio extends FormAssociatedRadio_base {
-    proxy: HTMLInputElement;
-}
-
-declare const FormAssociatedRadio_base: typeof _Radio;
-
 /**
  * @beta
  */
@@ -6389,54 +6489,63 @@ export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarVali
 
 /**
  * A Radio Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ * Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
  *
- * @slot checked-indicator - The checked indicator
- * @slot - The default slot for the label
- * @csspart control - The element representing the visual radio control
- * @csspart label - The label
+ * @slot checked-indicator - The checked indicator slot
  * @fires change - Emits a custom change event when the checked state changes
+ * @fires input - Emits a custom input event when the checked state changes
  *
  * @public
  */
-export declare class Radio extends FormAssociatedRadio implements RadioControl {
-    /**
-     * The name of the radio. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute} for more info.
-     */
-    name: string;
+export declare class Radio extends BaseCheckbox {
+    connectedCallback(): void;
+    constructor();
     /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="radio"]
+     * Toggles the disabled state when the user changes the `disabled` property.
      *
+     * @param prev - the previous value of the `disabled` property
+     * @param next - the current value of the `disabled` property
      * @internal
+     * @override
      */
-    initialValue: string;
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
     /**
+     * This method is a no-op for the radio component.
+     *
      * @internal
+     * @override
+     * @remarks
+     * To make a group of radio controls required, see {@link RadioGroup.required}.
      */
-    defaultSlottedNodes: Node[];
-    private get radioGroup();
+    protected requiredChanged(): void;
     /**
+     * This method is a no-op for the radio component.
+     *
      * @internal
+     * @override
+     * @remarks
+     * The radio form value is controlled by the `RadioGroup` component.
      */
-    defaultCheckedChanged(): void;
-    constructor();
+    setFormValue(): void;
     /**
+     * Sets the validity of the control.
+     *
      * @internal
+     * @override
+     * @remarks
+     * The radio component does not have a `required` attribute, so this method always sets the validity to `true`.
      */
-    connectedCallback(): void;
-    private isInsideRadioGroup;
+    setValidity(): void;
     /**
-     * Handles key presses on the radio.
-     * @beta
+     * Toggles the checked state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     * @override
+     * @remarks
+     * The radio checked state is controlled by the `RadioGroup` component, so the `force` parameter defaults to `true`.
      */
-    keypressHandler(e: KeyboardEvent): boolean | void;
-}
-
-declare class _Radio extends FASTElement {
-}
-
-declare interface _Radio extends CheckableFormAssociated {
+    toggleChecked(force?: boolean): void;
 }
 
 /**
@@ -6455,106 +6564,267 @@ export declare type RadioControl = Pick<HTMLInputElement, 'checked' | 'disabled'
 export declare const RadioDefinition: FASTElementDefinition<typeof Radio>;
 
 /**
- * The base class used for constructing a fluent-radio-group custom element
+ * A Radio Group Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
+ *
  * @public
+ *
+ * @slot - The default slot for the radio group
  */
 export declare class RadioGroup extends FASTElement {
     /**
-     * sets radio layout styles
+     * The index of the checked radio, scoped to the enabled radios.
+     *
+     * @internal
+     */
+    protected checkedIndex: number;
+    /**
+     * Sets the checked state of the nearest enabled radio when the `checkedIndex` changes.
+     *
+     * @param prev - the previous index
+     * @param next - the current index
+     * @internal
+     */
+    protected checkedIndexChanged(prev: number | undefined, next: number): void;
+    /**
+     * Indicates that the value has been changed by the user.
+     */
+    private dirtyState;
+    /**
+     * Disables the radio group and child radios.
      *
      * @public
      * @remarks
-     * HTML Attribute: stacked
+     * HTML Attribute: `disabled`
      */
-    stacked: boolean;
+    disabled: boolean;
     /**
-     * When true, the child radios will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
+     * Sets the `disabled` attribute on all child radios when the `disabled` property changes.
+     *
+     * @param prev - the previous disabled value
+     * @param next - the current disabled value
+     * @internal
+     */
+    protected disabledChanged(prev?: boolean, next?: boolean): void;
+    /**
+     * The value of the checked radio.
+     *
      * @public
      * @remarks
-     * HTML Attribute: readonly
+     * HTML Attribute: `value`
      */
-    readOnly: boolean;
+    initialValue?: string;
     /**
-     * Disables the radio group and child radios.
+     * Sets the matching radio to checked when the value changes. If no radio matches the value, no radio will be checked.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     */
+    initialValueChanged(prev: string | undefined, next: string | undefined): void;
+    /**
+     * The name of the radio group.
      *
      * @public
      * @remarks
-     * HTML Attribute: disabled
+     * HTML Attribute: `name`
      */
-    disabled: boolean;
+    name: string;
+    /**
+     * Sets the `name` attribute on all child radios when the `name` property changes.
+     *
+     * @internal
+     */
+    protected nameChanged(prev: string | undefined, next: string | undefined): void;
     /**
-     * The name of the radio group. Setting this value will set the name value
-     * for all child radio elements.
+     * The orientation of the group.
      *
      * @public
      * @remarks
-     * HTML Attribute: name
+     * HTML Attribute: `orientation`
      */
-    name: string;
-    protected nameChanged(): void;
+    orientation?: RadioGroupOrientation;
+    /**
+     * Sets the ariaOrientation attribute when the orientation changes.
+     *
+     * @param prev - the previous orientation
+     * @param next - the current orientation
+     * @internal
+     */
+    orientationChanged(prev: RadioGroupOrientation | undefined, next: RadioGroupOrientation | undefined): void;
+    /**
+     * The collection of all child radios.
+     *
+     * @public
+     */
+    radios: Radio[];
+    /**
+     * Updates the enabled radios collection when properties on the child radios change.
+     *
+     * @param prev - the previous radios
+     * @param next - the current radios
+     */
+    radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
     /**
-     * The value of the checked radio
+     * Indicates whether the radio group is required.
      *
      * @public
      * @remarks
-     * HTML Attribute: value
+     * HTML Attribute: `required`
      */
-    value: string;
-    protected valueChanged(): void;
+    required: boolean;
     /**
-     * The orientation of the group
+     *
+     * @param prev - the previous required value
+     * @param next - the current required value
+     */
+    requiredChanged(prev: boolean, next: boolean): void;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * A collection of child radios that are not disabled.
+     *
+     * @internal
+     */
+    get enabledRadios(): Radio[];
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static formAssociated: boolean;
+    /**
+     * The fallback validation message, taken from a native checkbox `<input>` element.
+     *
+     * @internal
+     */
+    private _validationFallbackMessage;
+    /**
+     * The validation message. Uses the browser's default validation message for native checkboxes if not otherwise
+     * specified (e.g., via `setCustomValidity`).
+     *
+     * @internal
+     */
+    get validationMessage(): string;
+    /**
+     * The element's validity state.
      *
      * @public
      * @remarks
-     * HTML Attribute: orientation
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity(): ValidityState;
+    /**
+     * The current value of the checked radio.
+     *
+     * @public
      */
-    orientation: RadioGroupOrientation;
-    childItems: HTMLElement[];
+    get value(): string | null;
+    set value(next: string | null);
     /**
+     * Sets the checked state of all radios when any radio emits a `change` event.
+     *
+     * @param e - the change event
+     */
+    changeHandler(e: Event): boolean | void;
+    /**
+     * Checks the radio at the specified index.
+     *
+     * @param index - the index of the radio to check
      * @internal
      */
-    slottedRadioButtons: HTMLElement[];
-    protected slottedRadioButtonsChanged(oldValue: unknown, newValue: HTMLElement[]): void;
-    private selectedRadio;
-    private focusedRadio;
-    private direction;
-    private get parentToolbar();
-    private get isInsideToolbar();
-    private get isInsideFoundationToolbar();
+    checkRadio(index?: number): void;
     /**
+     * Checks the validity of the element and returns the result.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     */
+    checkValidity(): boolean;
+    /**
+     * Handles click events for the radio group.
+     *
+     * @param e - the click event
      * @internal
      */
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private setupRadioButtons;
-    private radioChangeHandler;
-    private moveToRadioByIndex;
-    private moveRightOffGroup;
-    private moveLeftOffGroup;
+    clickHandler(e: MouseEvent): boolean | void;
+    constructor();
     /**
+     * Focuses the checked radio or the first enabled radio.
+     *
      * @internal
      */
-    focusOutHandler: (e: FocusEvent) => boolean | void;
+    focus(): void;
     /**
+     * Enables tabbing through the radio group when the group receives focus.
+     *
+     * @param e - the focus event
      * @internal
      */
-    handleDisabledClick: (e: MouseEvent) => void | boolean;
+    focusinHandler(e: FocusEvent): boolean | void;
     /**
+     * Sets the tabindex of the radios based on the checked state when the radio group loses focus.
+     *
+     * @param e - the focusout event
      * @internal
      */
-    clickHandler: (e: MouseEvent) => void | boolean;
-    private shouldMoveOffGroupToTheRight;
-    private shouldMoveOffGroupToTheLeft;
-    private checkFocusedRadio;
-    private moveRight;
-    private moveLeft;
+    focusoutHandler(e: FocusEvent): boolean | void;
+    formResetCallback(): void;
+    private getEnabledIndexInBounds;
     /**
-     * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
-     * navigation is different when there is an ancestor with role='toolbar'
+     * Handles keydown events for the radio group.
      *
+     * @param e - the keyboard event
      * @internal
      */
-    keydownHandler: (e: KeyboardEvent) => boolean | void;
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     *
+     * @param e - the disabled event
+     */
+    disabledRadioHandler(e: CustomEvent): void;
+    /**
+     * Reports the validity of the element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     */
+    reportValidity(): boolean;
+    /**
+     * Resets the `tabIndex` for all child radios when the radio group loses focus.
+     *
+     * @internal
+     */
+    private restrictFocus;
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    /**
+     * Sets the validity of the element.
+     *
+     * @param flags - Validity flags to set.
+     * @param message - Optional message to supply. If not provided, the element's `validationMessage` will be used.
+     * @param anchor - Optional anchor to use for the validation message.
+     *
+     * @internal
+     */
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    /**
+     * Updates the collection of child radios when the slot changes.
+     *
+     * @param e - the slot change event
+     * @internal
+     */
+    slotchangeHandler(e: Event): void;
 }
 
 /**
@@ -6600,11 +6870,18 @@ export declare type RadioOptions = {
     checkedIndicator?: StaticallyComposableHTML<Radio>;
 };
 
-/** Radio styles
+/**
+ * Styles for the Radio component
+ *
  * @public
  */
 export declare const RadioStyles: ElementStyles;
 
+/**
+ * Template for the Radio component
+ *
+ * @public
+ */
 export declare const RadioTemplate: ElementViewTemplate<Radio>;
 
 /**
@@ -7151,6 +7428,8 @@ export declare type SlottableInput = HTMLElement & ElementInternals & {
     required: boolean;
     disabled: boolean;
     readOnly: boolean;
+    checked?: boolean;
+    value?: string;
 };
 
 /**
@@ -7440,6 +7719,7 @@ export { styles as ButtonStyles }
 export { styles as MenuButtonStyles }
 
 export declare class Switch extends BaseCheckbox {
+    constructor();
 }
 
 /**