@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.30

package/dist/esm/radio-group/radio-group.d.ts

@@ -1,283 +1,19 @@
-import { FASTElement } from '@microsoft/fast-element';
-import { Radio } from '../radio/radio.js';
-import { RadioGroupOrientation } from './radio-group.options.js';
+import type { Radio } from '../radio/radio.js';
+import { BaseRadioGroup } from './radio-group.base.js';
 /**
  * A Radio Group Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#radiogroup | ARIA `radiogroup` role}.
  *
  * @tag fluent-radio-group
  *
- * @public
- *
  * @slot - The default slot for the radio group
+ * @fires { Event } change - Fired when the selected radio changes.
+ *
+ * @public
  */
-export declare class RadioGroup extends FASTElement {
-    /**
-     * 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: `disabled`
-     */
-    disabled: boolean;
-    /**
-     * 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: `value`
-     */
-    initialValue?: string;
-    /**
-     * 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: `name`
-     */
-    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 orientation of the group.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `orientation`
-     */
-    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
-     */
+export declare class RadioGroup extends BaseRadioGroup {
+    private fg;
+    private fgItems;
+    disconnectedCallback(): void;
     radiosChanged(prev: Radio[] | undefined, next: Radio[] | undefined): void;
-    /**
-     * Indicates whether the radio group is required.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: `required`
-     */
-    required: boolean;
-    /**
-     *
-     * @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
-     * 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
-     */
-    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
-     */
-    checkRadio(index?: number, shouldEmit?: boolean): 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
-     */
-    clickHandler(e: MouseEvent): boolean | void;
-    constructor();
-    /**
-     * Focuses the checked radio or the first enabled radio.
-     *
-     * @internal
-     */
-    focus(): void;
-    /**
-     * Enables tabbing through the radio group when the group receives focus.
-     *
-     * @param e - the focus event
-     * @internal
-     */
-    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
-     */
-    focusoutHandler(e: FocusEvent): boolean | void;
-    formResetCallback(): void;
-    private getEnabledIndexInBounds;
-    /**
-     * Handles keydown events for the radio group.
-     *
-     * @param e - the keyboard event
-     * @internal
-     */
-    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
-     * @remarks
-     * RadioGroup validation is reported through the individual Radio elements rather than the RadioGroup itself.
-     * This is necessary because:
-     * 1. Each Radio is form-associated (extends BaseCheckbox which has `formAssociated = true`)
-     * 2. Browser validation UIs and screen readers announce validation against individual form controls
-     * 3. For groups like RadioGroup, the browser needs to report the error on a specific member of the group
-     * 4. We anchor the error to the first Radio so it receives focus and announcement
-     *
-     * When the group is invalid (required but no selection):
-     * - Only the first Radio gets the invalid state with the validation message
-     * - Other Radios are kept valid since selecting any of them would satisfy the requirement
-     *
-     * When the group becomes valid (user selects any Radio):
-     * - All Radios are cleared back to valid state
-     * - This allows form submission to proceed
-     */
-    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;
 }

package/dist/esm/radio-group/radio-group.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-radio-group element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/radio-group/radio-group.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './radio-group.options.js';
+/**
+ * The async definition configuration for the fluent-radio-group element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=radio-group.definition-async.js.map

package/dist/esm/radio-group/radio-group.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.definition-async.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

package/dist/esm/radio-group/radio-group.definition.d.ts

@@ -1,10 +1,7 @@
-import { RadioGroup } from './radio-group.js';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 /**
- * The Fluent RadioGroup Element.
- *
+ * The definition for the `<fluent-radio-group>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-radio-group\>
  */
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof RadioGroup>;
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/radio-group/radio-group.definition.js

@@ -1,18 +1,16 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { RadioGroup } from './radio-group.js';
+import { tagName } from './radio-group.options.js';
 import { styles } from './radio-group.styles.js';
 import { template } from './radio-group.template.js';
 /**
- * The Fluent RadioGroup Element.
- *
+ * The definition for the `<fluent-radio-group>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-radio-group\>
  */
-export const definition = RadioGroup.compose({
-    name: `${FluentDesignSystem.prefix}-radio-group`,
-    template,
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     styles,
-});
+    template,
+};
 //# sourceMappingURL=radio-group.definition.js.map

package/dist/esm/radio-group/radio-group.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.definition.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,cAAc;IAChD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"radio-group.definition.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}