@react-md/core 6.3.4 → 6.4.0

package/src/autocomplete/utils.ts

@@ -16,8 +16,9 @@ import {
  * @since 6.0.0
  * @internal
  */
-export interface GetDefaultValueOptions<Option extends AutocompleteOption>
-  extends Required<AutocompleteGetOptionLabel<Option>> {
+export interface GetDefaultValueOptions<
+  Option extends AutocompleteOption,
+> extends Required<AutocompleteGetOptionLabel<Option>> {
   query: string | undefined;
   multiselect?: boolean;
   defaultQuery: UseStateInitializer<string> | undefined;
@@ -86,8 +87,9 @@ export function getDefaultValue<Option extends AutocompleteOption>(
  * @since 6.0.0
  * @internal
  */
-interface GetDefaultQueryOptions<Option extends AutocompleteOption>
-  extends Required<AutocompleteGetOptionLabel<Option>> {
+interface GetDefaultQueryOptions<
+  Option extends AutocompleteOption,
+> extends Required<AutocompleteGetOptionLabel<Option>> {
   value: Option | null | readonly Option[];
   defaultQuery?: UseStateInitializer<string>;
 }
@@ -122,8 +124,9 @@ export function getDefaultQuery<Option extends AutocompleteOption>(
  * @since 6.0.0
  * @internal
  */
-export interface EnforceSelectedValueOptions<Option extends AutocompleteOption>
-  extends Required<AutocompleteGetOptionLabel<Option>> {
+export interface EnforceSelectedValueOptions<
+  Option extends AutocompleteOption,
+> extends Required<AutocompleteGetOptionLabel<Option>> {
   value: Option | readonly Option[] | null;
   visible: boolean;
   container: HTMLElement | null;

package/src/avatar/Avatar.tsx

@@ -15,7 +15,8 @@ export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
  * the `role="presentation"`.
  */
 export interface AvatarProps
-  extends Omit<HTMLAttributes<HTMLSpanElement>, "color">,
+  extends
+    Omit<HTMLAttributes<HTMLSpanElement>, "color">,
     AvatarClassNameOptions {
   /**
    * Since avatars are normally presentational data, they are hidden from screen

package/src/button/Button.tsx

@@ -14,7 +14,8 @@ import {
 import { type ButtonClassNameThemeOptions, button } from "./styles.js";
 
 export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    ButtonHTMLAttributes<HTMLButtonElement>,
     ButtonClassNameThemeOptions,
     ComponentWithRippleProps {
   /** @defaultValue `"button"` */

package/src/button/FloatingActionButton.tsx

@@ -62,7 +62,8 @@ export function fab(options: FloatingActionButtonClassNameOptions): string {
 
 /** @since 6.0.0 */
 export interface FloatingActionButtonProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends
+    HTMLAttributes<HTMLSpanElement>,
     FloatingActionButtonClassNameOptions {}
 
 /**

package/src/card/Card.tsx

@@ -9,7 +9,8 @@ import { type CardClassNameOptions, card } from "./styles.js";
  * deprecated `raiseable` prop
  */
 export interface CardProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     CardClassNameOptions,
     Pick<BoxOptions, "align" | "justify" | "fullWidth" | "disableWrap"> {
   /** @defaultValue `"stretch"` */

package/src/card/CardContent.tsx

@@ -7,8 +7,7 @@ import { type CardContentClassNameOptions, cardContent } from "./styles.js";
  * removed the `disableParagraphMargin` prop.
  */
 export interface CardContentProps
-  extends HTMLAttributes<HTMLDivElement>,
-    CardContentClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, CardContentClassNameOptions {}
 
 /**
  * @see {@link https://react-md.dev/components/card | Card Demos}

package/src/card/ClickableCard.tsx

@@ -16,8 +16,7 @@ const noop = (): void => {
  * @since 6.0.0
  */
 export interface ClickableCardProps
-  extends CardProps,
-    ComponentWithRippleProps {
+  extends CardProps, ComponentWithRippleProps {
   onClick: MouseEventHandler<HTMLDivElement>;
 
   /**

package/src/chip/Chip.tsx

@@ -28,7 +28,8 @@ import { type ChipTheme, chip, chipContent } from "./styles.js";
  * augmentation.
  */
 export interface ChipProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    ButtonHTMLAttributes<HTMLButtonElement>,
     BaseMaxWidthTransitionOptions,
     ComponentWithRippleProps {
   /**

package/src/datetime/NativeDateField.tsx

@@ -7,7 +7,8 @@ import { type DateFieldOptions, useDateField } from "./useDateField.js";
 
 /** @since 6.3.0 */
 export interface NativeDateFieldProps
-  extends Omit<TextFieldProps, keyof DateFieldOptions | "value">,
+  extends
+    Omit<TextFieldProps, keyof DateFieldOptions | "value">,
     Omit<DateFieldOptions, "ref"> {}
 
 /**

package/src/datetime/NativeTimeField.tsx

@@ -9,7 +9,8 @@ import { type TimeFieldOptions, useTimeField } from "./useTimeField.js";
  * @since 6.3.0
  */
 export interface NativeTimeFieldProps
-  extends Omit<TextFieldProps, keyof TimeFieldOptions | "value">,
+  extends
+    Omit<TextFieldProps, keyof TimeFieldOptions | "value">,
     Omit<TimeFieldOptions, "ref"> {}
 
 /**

package/src/datetime/useDateField.ts

@@ -42,7 +42,8 @@ export interface DateFieldConstraints {
 
 /** @since 6.3.0 */
 export interface DateFieldOptions
-  extends Omit<
+  extends
+    Omit<
       TextFieldHookOptions,
       | "isNumber"
       | "counter"
@@ -55,7 +56,8 @@ export interface DateFieldOptions
 
 /** @since 6.3.0 */
 export interface ProvidedDateFieldProps
-  extends Omit<ProvidedTextFieldProps, "value">,
+  extends
+    Omit<ProvidedTextFieldProps, "value">,
     Omit<DateFieldConstraints, "step"> {
   type: "date";
   step?: number | "any";
@@ -72,20 +74,23 @@ export interface ProvidedDateFieldMessageProps extends ProvidedDateFieldProps {
 }
 
 /** @since 6.3.0 */
-export interface DateFieldImplementation
-  extends Omit<TextFieldImplementation, "fieldProps"> {
+export interface DateFieldImplementation extends Omit<
+  TextFieldImplementation,
+  "fieldProps"
+> {
   fieldProps: ProvidedDateFieldProps;
 }
 
 /** @since 6.3.0 */
-export interface DateFieldWithMessageImplementation
-  extends Omit<TextFieldWithMessageImplementation, "fieldProps"> {
+export interface DateFieldWithMessageImplementation extends Omit<
+  TextFieldWithMessageImplementation,
+  "fieldProps"
+> {
   fieldProps: ProvidedDateFieldMessageProps;
 }
 
 /** @since 6.3.0 */
-export interface ValidatedDateFieldImplementation
-  extends DateFieldImplementation {
+export interface ValidatedDateFieldImplementation extends DateFieldImplementation {
   fieldProps: ProvidedDateFieldProps | ProvidedDateFieldMessageProps;
 }
 

package/src/datetime/useTimeField.ts

@@ -69,7 +69,8 @@ export interface TimeFieldConstraints {
 
 /** @since 6.3.0 */
 export interface TimeFieldOptions
-  extends Omit<
+  extends
+    Omit<
       TextFieldHookOptions,
       | "isNumber"
       | "counter"
@@ -82,7 +83,8 @@ export interface TimeFieldOptions
 
 /** @since 6.3.0 */
 export interface ProvidedTimeFieldProps
-  extends Omit<ProvidedTextFieldProps, "value">,
+  extends
+    Omit<ProvidedTextFieldProps, "value">,
     Omit<TimeFieldConstraints, "step"> {
   type: "time";
   step?: number | "any";
@@ -99,20 +101,23 @@ export interface ProvidedTimeFieldMessageProps extends ProvidedTimeFieldProps {
 }
 
 /** @since 6.3.0 */
-export interface TimeFieldImplementation
-  extends Omit<TextFieldImplementation, "fieldProps"> {
+export interface TimeFieldImplementation extends Omit<
+  TextFieldImplementation,
+  "fieldProps"
+> {
   fieldProps: ProvidedTimeFieldProps;
 }
 
 /** @since 6.3.0 */
-export interface TimeFieldWithMessageImplementation
-  extends Omit<TextFieldWithMessageImplementation, "fieldProps"> {
+export interface TimeFieldWithMessageImplementation extends Omit<
+  TextFieldWithMessageImplementation,
+  "fieldProps"
+> {
   fieldProps: ProvidedTimeFieldMessageProps;
 }
 
 /** @since 6.3.0 */
-export interface ValidatedTimeFieldImplementation
-  extends TimeFieldImplementation {
+export interface ValidatedTimeFieldImplementation extends TimeFieldImplementation {
   fieldProps: ProvidedTimeFieldProps | ProvidedTimeFieldMessageProps;
 }
 

package/src/dialog/Dialog.tsx

@@ -42,7 +42,8 @@ const noop = (): void => {
 const noopBool = (): boolean => false;
 
 export interface BaseDialogProps
-  extends HTMLAttributes<HTMLDivElement>,
+  extends
+    HTMLAttributes<HTMLDivElement>,
     CSSTransitionComponentProps,
     TransitionActions,
     FocusContainerComponentProps {

package/src/dialog/DialogContainer.tsx

@@ -5,8 +5,7 @@ import { dialogContainer } from "./styles.js";
 /**
  * @since 6.0.0
  */
-export interface ConfigurableDialogContainerProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface ConfigurableDialogContainerProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Set to `true` to force the `Dialog` to be wrapped in a `DialogContainer`
    * div. This defaults to `true` for `type !== "custom"`.

package/src/dialog/DialogContent.tsx

@@ -3,8 +3,7 @@ import { type HTMLAttributes, forwardRef } from "react";
 import { type DialogContentClassNameOptions, dialogContent } from "./styles.js";
 
 export interface DialogContentProps
-  extends HTMLAttributes<HTMLDivElement>,
-    DialogContentClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, DialogContentClassNameOptions {}
 
 /**
  * The `DialogContent` component should be used as a child of the `Dialog`

package/src/dialog/DialogFooter.tsx

@@ -3,8 +3,7 @@ import { type HTMLAttributes, forwardRef } from "react";
 import { type DialogFooterClassNameOptions, dialogFooter } from "./styles.js";
 
 export interface DialogFooterProps
-  extends HTMLAttributes<HTMLDivElement>,
-    DialogFooterClassNameOptions {}
+  extends HTMLAttributes<HTMLDivElement>, DialogFooterClassNameOptions {}
 
 /**
  * The `DialogFooter` is a simple `<footer>` with simple `display: flex` styles

package/src/divider/Divider.tsx

@@ -8,8 +8,7 @@ export type DividerElement = HTMLHRElement | HTMLDivElement;
  * @since 6.0.0 Extends the {@link DividerClassNameOptions}
  */
 export interface DividerProps
-  extends HTMLAttributes<DividerElement>,
-    DividerClassNameOptions {}
+  extends HTMLAttributes<DividerElement>, DividerClassNameOptions {}
 
 /**
  * @example Simple Example

package/src/draggable/useDraggable.ts

@@ -84,8 +84,7 @@ export interface ControllableDraggableStateOptions {
  * @since 6.0.0
  */
 export interface BaseDraggableOptions<E extends HTMLElement>
-  extends DraggableEventHandlers<E>,
-    ControllableDraggableStateOptions {
+  extends DraggableEventHandlers<E>, ControllableDraggableStateOptions {
   /**
    * An optional ref to merge with the returned
    * {@link DraggableImplementation.draggableRef}.
@@ -275,8 +274,9 @@ export type DraggableOptions<E extends HTMLElement = HTMLElement> =
 /**
  * @since 6.0.0
  */
-export interface DraggableImplementation<E extends HTMLElement = HTMLElement>
-  extends Required<DraggableEventHandlers<E>> {
+export interface DraggableImplementation<
+  E extends HTMLElement = HTMLElement,
+> extends Required<DraggableEventHandlers<E>> {
   mouseEventHandlers: Required<DraggableMouseEventHandlers<E>>;
   touchEventHandlers: Required<DraggableTouchEventHandlers<E>>;
   keyboardEventHandlers: Required<DraggableKeyboardEventHandlers<E>>;

package/src/draggable/utils.ts

@@ -120,8 +120,10 @@ export const getRelativeDragPosition = (
 /**
  * @internal
  */
-interface UpdateDragPositionOptions
-  extends Omit<RelativeDragPositionOptions, "container"> {
+interface UpdateDragPositionOptions extends Omit<
+  RelativeDragPositionOptions,
+  "container"
+> {
   event: ClientPositionEvent;
   nodeRef: RefObject<HTMLElement>;
   focus?: boolean;

package/src/expansion-panel/ExpansionPanelHeader.tsx

@@ -17,8 +17,7 @@ import { expansionPanelButton, expansionPanelHeading } from "./styles.js";
  * @since 6.0.0 Updated to include additional heading/Typography
  * props.
  */
-export interface ExpansionPanelHeaderProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ExpansionPanelHeaderProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   id: string;
 
   /**

package/src/files/FileInput.tsx

@@ -27,7 +27,8 @@ export type FileInputHTMLAttributes = Omit<
  * longer required.
  */
 export interface FileInputProps
-  extends ButtonClassNameThemeOptions,
+  extends
+    ButtonClassNameThemeOptions,
     FileInputHTMLAttributes,
     ComponentWithRippleProps {
   /**

package/src/files/useFileUpload.ts

@@ -67,8 +67,9 @@ export interface FileUploadState<CustomError = never> {
  * @since 2.9.0
  * @internal
  */
-export interface FileUploadHookState<CustomError = never>
-  extends FileUploadState<CustomError> {
+export interface FileUploadHookState<
+  CustomError = never,
+> extends FileUploadState<CustomError> {
   /**
    * All the current readers used for uploading files to the browser.
    *
@@ -86,8 +87,7 @@ export interface FileUploadHookState<CustomError = never>
  * @since 2.9.0
  */
 export interface FileUploadOptions<E extends HTMLElement, CustomError = never>
-  extends FileUploadHandlers<E>,
-    FileValidationOptions {
+  extends FileUploadHandlers<E>, FileValidationOptions {
   /**
    * Setting this value to a number greater than `0` will update the browser
    * upload process to queue the uploads in chunks instead of all at once. This
@@ -153,8 +153,8 @@ export interface FileUploadActions {
 export interface FileUploadHookReturnValue<
   E extends HTMLElement = HTMLElement,
   CustomError = never,
-> extends FileUploadActions,
-    Required<FileUploadHandlers<E>> {
+>
+  extends FileUploadActions, Required<FileUploadHandlers<E>> {
   /** {@inheritDoc FileUploadState.errors} */
   errors: readonly FileValidationError<CustomError>[];
 

package/src/files/validation.ts

@@ -283,8 +283,7 @@ export interface FileValidationOptions {
 }
 
 /** @since 2.9.0 */
-export interface FilesValidationOptions
-  extends Required<FileValidationOptions> {
+export interface FilesValidationOptions extends Required<FileValidationOptions> {
   /**
    * The total number of bytes in the {@link FileUploadHookReturnValue.stats}
    * list. This is really just:

package/src/focus/useFocusContainer.ts

@@ -50,8 +50,9 @@ export type FocusContainerTransitionCallbacks = TransitionCallbacks;
  * @since 6.3.2 Fixed by extending `TransitionCallbacks` after the
  * `onEnteredOnce` and `onExitedOnce` support was added to CSS transitions.
  */
-export interface FocusContainerTransitionOptions<E extends HTMLElement>
-  extends TransitionCallbacks {
+export interface FocusContainerTransitionOptions<
+  E extends HTMLElement,
+> extends TransitionCallbacks {
   /**
    * An optional ref that will be merged with the
    * {@link FocusContainerImplementation.nodeRef}
@@ -83,8 +84,7 @@ export interface FocusContainerComponentProps {
 
 /** @since 6.0.0 */
 export interface FocusContainerOptions<E extends HTMLElement>
-  extends FocusContainerTransitionOptions<E>,
-    FocusContainerComponentProps {
+  extends FocusContainerTransitionOptions<E>, FocusContainerComponentProps {
   onKeyDown?: KeyboardEventHandler<E>;
   /**
    * This to `true` will capture the current focused element as a focus target

package/src/form/Fieldset.tsx

@@ -8,7 +8,8 @@ import { type FieldsetClassNameOptions, fieldset } from "./fieldsetStyles.js";
  * yourself manually instead of using a prop.
  */
 export interface FieldsetProps
-  extends FieldsetHTMLAttributes<HTMLFieldSetElement>,
+  extends
+    FieldsetHTMLAttributes<HTMLFieldSetElement>,
     FieldsetClassNameOptions {}
 
 /**
@@ -30,14 +31,34 @@ export interface FieldsetProps
  * }
  * ```
  *
+ * @example Floating Legend Example
+ * ```tsx
+ * import { Form } from "@react-md/core/form/Form";
+ * import { Fieldset } from "@react-md/core/form/Fieldset";
+ * import { Legend } from "@react-md/core/form/Legend";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     <Form>
+ *       <Fieldset floatingLegend>
+ *         <Legend floating>Some Title</Legend>
+ *         // form components
+ *       </Fieldset>
+ *     </Form>
+ *   );
+ * }
+ * ```
+ * ```
+ *
  * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}
  */
 export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
   function Fieldset(props, ref) {
     const {
       className,
-      fullWidth = false,
-      browserStyles = false,
+      fullWidth,
+      browserStyles,
+      floatingLegend,
       children,
       ...remaining
     } = props;
@@ -50,6 +71,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           className,
           fullWidth,
           browserStyles,
+          floatingLegend,
         })}
       >
         {children}

package/src/form/FormMessageContainer.tsx

@@ -12,8 +12,7 @@ import { type FormMessageProps } from "./types.js";
  * @since 2.5.0
  */
 export interface FormMessageContainerProps
-  extends HTMLAttributes<HTMLDivElement>,
-    FormMessageContainerClassNameOptions {
+  extends HTMLAttributes<HTMLDivElement>, FormMessageContainerClassNameOptions {
   /**
    * If the extension doesn't actually want to render the `FormMessage`
    * component, these props are optional. It kind of eliminates the whole

package/src/form/FormMessageCounter.tsx

@@ -8,8 +8,7 @@ import {
 import { formMessageCounter } from "./formMessageStyles.js";
 
 /** @since 2.9.0 */
-export interface FormMessageCounterProps
-  extends HTMLAttributes<HTMLSpanElement> {
+export interface FormMessageCounterProps extends HTMLAttributes<HTMLSpanElement> {
   /**
    * The children to display in the counter. This is normally a string like:
    *

package/src/form/InputToggle.tsx

@@ -149,7 +149,8 @@ export interface InputToggleLabelProps {
  * @since 6.0.0
  */
 export interface BaseInputToggleProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">,
+  extends
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size">,
     FormMessageContainerExtension,
     FormComponentStates,
     ConfigurableInputToggleIconProps,
@@ -194,8 +195,7 @@ export interface IndeterminateCheckboxProps {
 }
 
 export interface CheckboxProps
-  extends BaseInputToggleProps,
-    IndeterminateCheckboxProps {}
+  extends BaseInputToggleProps, IndeterminateCheckboxProps {}
 
 /** @since 6.0.0 */
 export interface CheckboxInputToggleProps extends CheckboxProps {

package/src/form/Legend.tsx

@@ -1,35 +1,80 @@
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
 
-import { cssUtils } from "../cssUtils.js";
 import { Typography, type TypographyProps } from "../typography/Typography.js";
+import { type LegendClassNameOptions, legend } from "./legendStyles.js";
 
 /**
  * @since 6.0.0
+ * @since 6.4.0 Extends the `LegendClassNameOptions`
  */
-export interface LegendProps extends TypographyProps {
-  /**
-   * @defaultValue `false`
-   */
-  srOnly?: boolean;
-}
+export interface LegendProps extends TypographyProps, LegendClassNameOptions {}
 
 /**
  * This should be used within a `Fieldset` to apply a label.
  *
+ * @example Simple Example
+ * ```tsx
+ * <Fieldset>
+ *   <Legend>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
+ * @example Visible to Screen readers only
+ * ```tsx
+ * <Fieldset>
+ *   <Legend srOnly>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
+ * @example Acting as a floating label
+ * ```tsx
+ * <Fieldset floatingLegend>
+ *   <Legend floating>I am legend</Legend>
+ *   {children}
+ * </Fieldset>
+ * ```
+ *
  * @see {@link https://react-md.dev/components/fieldset | Fieldset Demos}
  * @since 6.0.0
  */
 export const Legend = forwardRef<HTMLLegendElement, LegendProps>(
   function Legend(props, ref) {
-    const { srOnly = false, className, children, ...remaining } = props;
+    const {
+      srOnly,
+      floating,
+      theme,
+      gap,
+      dense,
+      active,
+      error,
+      disabled,
+      stacked,
+      reversed,
+      className,
+      children,
+      ...remaining
+    } = props;
 
     return (
       <Typography
         {...remaining}
         as="legend"
         ref={ref}
-        className={cnb("rmd-legend", cssUtils({ srOnly }), className)}
+        className={legend({
+          srOnly,
+          floating,
+          theme,
+          gap,
+          dense,
+          active,
+          error,
+          disabled,
+          stacked,
+          reversed,
+          className,
+        })}
       >
         {children}
       </Typography>

package/src/form/Listbox.tsx

@@ -16,8 +16,7 @@ import {
  * @internal
  */
 export interface ListboxProps<Value extends ListboxValue>
-  extends MenuProps,
-    ListboxProviderOptions<Value> {
+  extends MenuProps, ListboxProviderOptions<Value> {
   nodeRef?: Ref<HTMLDivElement>;
   children: ReactNode;
 }

package/src/form/ListboxProvider.ts

@@ -47,8 +47,9 @@ export type ListboxValue = string | number | null | object;
 /**
  * @since 6.3.0
  */
-export interface ListboxProviderOptions<Value extends ListboxValue>
-  extends OptionSelectedIconProps {
+export interface ListboxProviderOptions<
+  Value extends ListboxValue,
+> extends OptionSelectedIconProps {
   value: ListboxValue | readonly NonNullable<ListboxValue>[];
   setValue: Dispatch<NonNullable<Value>>;
 }

package/src/form/NativeSelect.tsx

@@ -23,7 +23,8 @@ import {
  * @since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
  */
 export interface NativeSelectProps
-  extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">,
+  extends
+    Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">,
     UserAgentAutocompleteProps,
     FormFieldOptions {
   /**

package/src/form/Password.tsx

@@ -64,8 +64,10 @@ export interface ConfigurableVisibilityIcon {
  * @since 6.0.0 Merged the `getVisibilityIcon` prop behavior into the
  * `visibilityIcon` prop.
  */
-export interface PasswordProps
-  extends Omit<TextFieldProps, "type" | "rightAddon"> {
+export interface PasswordProps extends Omit<
+  TextFieldProps,
+  "type" | "rightAddon"
+> {
   /**
    * @defaultValue `"password"`
    * @since 6.0.0 Defaults to `"password"`