@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/autocomplete/AutocompleteClearButton.d.ts

@@ -3,6 +3,7 @@ import { type AutocompleteClearButtonProps } from "./types.js";
 /**
  * An internal component used for to clear the value from the `Autocomplete`.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @internal
  * @since 6.0.0
  */

package/dist/autocomplete/AutocompleteClearButton.js

@@ -7,10 +7,11 @@ import { autocompleteClearButton } from "./autocompleteStyles.js";
 /**
  * An internal component used for to clear the value from the `Autocomplete`.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @internal
  * @since 6.0.0
  */ export function AutocompleteClearButton(props) {
-    const { id: propId, className, children, buttonType = "icon", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = buttonType === "text" || ariaLabelledBy ? undefined : "Clear", ...remaining } = props;
+    const { id: propId, className, children, buttonType = "icon", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = buttonType === "text" || ariaLabelledBy ? undefined : "Clear", visibility, ...remaining } = props;
     const id = useEnsuredId(propId, "autocomplete-clear");
     return /*#__PURE__*/ _jsx(Button, {
         ...remaining,
@@ -18,7 +19,8 @@ import { autocompleteClearButton } from "./autocompleteStyles.js";
         "aria-labelledby": ariaLabelledBy,
         id: id,
         className: autocompleteClearButton({
-            className
+            className,
+            visibility
         }),
         tabIndex: -1,
         buttonType: buttonType,

package/dist/autocomplete/AutocompleteClearButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/AutocompleteClearButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement } from \"react\";\n\nimport { Button } from \"../button/Button.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { autocompleteClearButton } from \"./autocompleteStyles.js\";\nimport { type AutocompleteClearButtonProps } from \"./types.js\";\n\n/**\n * An internal component used for to clear the value from the `Autocomplete`.\n *\n * @internal\n * @since 6.0.0\n */\nexport function AutocompleteClearButton(\n  props: AutocompleteClearButtonProps\n): ReactElement {\n  const {\n    id: propId,\n    className,\n    children,\n    buttonType = \"icon\",\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = buttonType === \"text\" || ariaLabelledBy\n      ? undefined\n      : \"Clear\",\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"autocomplete-clear\");\n\n  return (\n    <Button\n      {...remaining}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      id={id}\n      className={autocompleteClearButton({ className })}\n      tabIndex={-1}\n      buttonType={buttonType}\n    >\n      {getIcon(\"clear\", children)}\n    </Button>\n  );\n}\n"],"names":["Button","getIcon","useEnsuredId","autocompleteClearButton","AutocompleteClearButton","props","id","propId","className","children","buttonType","ariaLabelledBy","ariaLabel","undefined","remaining","aria-label","aria-labelledby","tabIndex"],"mappings":"AAAA;;AAIA,SAASA,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE;;;;;CAKC,GACD,OAAO,SAASC,wBACdC,KAAmC;IAEnC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,MAAM,EACnB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,eAAe,UAAUC,iBAC/CE,YACA,OAAO,EACX,GAAGC,WACJ,GAAGT;IACJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAEhC,qBACE,KAACP;QACE,GAAGc,SAAS;QACbC,cAAYH;QACZI,mBAAiBL;QACjBL,IAAIA;QACJE,WAAWL,wBAAwB;YAAEK;QAAU;QAC/CS,UAAU,CAAC;QACXP,YAAYA;kBAEXT,QAAQ,SAASQ;;AAGxB"}
+{"version":3,"sources":["../../src/autocomplete/AutocompleteClearButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement } from \"react\";\n\nimport { Button } from \"../button/Button.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { autocompleteClearButton } from \"./autocompleteStyles.js\";\nimport { type AutocompleteClearButtonProps } from \"./types.js\";\n\n/**\n * An internal component used for to clear the value from the `Autocomplete`.\n *\n * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}\n * @internal\n * @since 6.0.0\n */\nexport function AutocompleteClearButton(\n  props: AutocompleteClearButtonProps\n): ReactElement {\n  const {\n    id: propId,\n    className,\n    children,\n    buttonType = \"icon\",\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = buttonType === \"text\" || ariaLabelledBy\n      ? undefined\n      : \"Clear\",\n    visibility,\n    ...remaining\n  } = props;\n  const id = useEnsuredId(propId, \"autocomplete-clear\");\n\n  return (\n    <Button\n      {...remaining}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      id={id}\n      className={autocompleteClearButton({ className, visibility })}\n      tabIndex={-1}\n      buttonType={buttonType}\n    >\n      {getIcon(\"clear\", children)}\n    </Button>\n  );\n}\n"],"names":["Button","getIcon","useEnsuredId","autocompleteClearButton","AutocompleteClearButton","props","id","propId","className","children","buttonType","ariaLabelledBy","ariaLabel","undefined","visibility","remaining","aria-label","aria-labelledby","tabIndex"],"mappings":"AAAA;;AAIA,SAASA,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE;;;;;;CAMC,GACD,OAAO,SAASC,wBACdC,KAAmC;IAEnC,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,QAAQ,EACRC,aAAa,MAAM,EACnB,mBAAmBC,cAAc,EACjC,cAAcC,YAAYF,eAAe,UAAUC,iBAC/CE,YACA,OAAO,EACXC,UAAU,EACV,GAAGC,WACJ,GAAGV;IACJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAEhC,qBACE,KAACP;QACE,GAAGe,SAAS;QACbC,cAAYJ;QACZK,mBAAiBN;QACjBL,IAAIA;QACJE,WAAWL,wBAAwB;YAAEK;YAAWM;QAAW;QAC3DI,UAAU,CAAC;QACXR,YAAYA;kBAEXT,QAAQ,SAASQ;;AAGxB"}

package/dist/autocomplete/AutocompleteDropdownButton.d.ts

@@ -5,6 +5,7 @@ import { type AutocompleteDropdownButtonProps } from "./types.js";
  * This is a simple `Button` wrapper to be used as a dropdown button within the
  * `Autocomplete`.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */
 export declare function AutocompleteDropdownButton(props: LabelRequiredForA11y<AutocompleteDropdownButtonProps>): ReactElement;

package/dist/autocomplete/AutocompleteDropdownButton.js

@@ -9,6 +9,7 @@ import { autocompleteDropdownButton } from "./autocompleteStyles.js";
  * This is a simple `Button` wrapper to be used as a dropdown button within the
  * `Autocomplete`.
  *
+ * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}
  * @since 6.0.0
  */ export function AutocompleteDropdownButton(props) {
     const { id: propId, icon, visible, iconRotatorProps, className, ...remaining } = props;

package/dist/autocomplete/AutocompleteDropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/AutocompleteDropdownButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement } from \"react\";\n\nimport { Button } from \"../button/Button.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { autocompleteDropdownButton } from \"./autocompleteStyles.js\";\nimport { type AutocompleteDropdownButtonProps } from \"./types.js\";\n\n/**\n * This is a simple `Button` wrapper to be used as a dropdown button within the\n * `Autocomplete`.\n *\n * @since 6.0.0\n */\nexport function AutocompleteDropdownButton(\n  props: LabelRequiredForA11y<AutocompleteDropdownButtonProps>\n): ReactElement {\n  const {\n    id: propId,\n    icon,\n    visible,\n    iconRotatorProps,\n    className,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"autocomplete-dropdown\");\n\n  return (\n    <Button\n      {...remaining}\n      id={id}\n      aria-expanded={visible}\n      tabIndex={-1}\n      buttonType=\"icon\"\n      className={autocompleteDropdownButton({ className })}\n    >\n      <IconRotator {...iconRotatorProps} rotated={visible}>\n        {getIcon(\"dropdown\", icon)}\n      </IconRotator>\n    </Button>\n  );\n}\n"],"names":["Button","IconRotator","getIcon","useEnsuredId","autocompleteDropdownButton","AutocompleteDropdownButton","props","id","propId","icon","visible","iconRotatorProps","className","remaining","aria-expanded","tabIndex","buttonType","rotated"],"mappings":"AAAA;;AAIA,SAASA,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,0BAA0B,QAAQ,0BAA0B;AAGrE;;;;;CAKC,GACD,OAAO,SAASC,2BACdC,KAA4D;IAE5D,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,OAAO,EACPC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACJ,GAAGP;IAEJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAEhC,qBACE,KAACR;QACE,GAAGa,SAAS;QACbN,IAAIA;QACJO,iBAAeJ;QACfK,UAAU,CAAC;QACXC,YAAW;QACXJ,WAAWR,2BAA2B;YAAEQ;QAAU;kBAElD,cAAA,KAACX;YAAa,GAAGU,gBAAgB;YAAEM,SAASP;sBACzCR,QAAQ,YAAYO;;;AAI7B"}
+{"version":3,"sources":["../../src/autocomplete/AutocompleteDropdownButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement } from \"react\";\n\nimport { Button } from \"../button/Button.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { autocompleteDropdownButton } from \"./autocompleteStyles.js\";\nimport { type AutocompleteDropdownButtonProps } from \"./types.js\";\n\n/**\n * This is a simple `Button` wrapper to be used as a dropdown button within the\n * `Autocomplete`.\n *\n * @see {@link https://next.react-md.dev/components/autocomplete | Autocomplete Demos}\n * @since 6.0.0\n */\nexport function AutocompleteDropdownButton(\n  props: LabelRequiredForA11y<AutocompleteDropdownButtonProps>\n): ReactElement {\n  const {\n    id: propId,\n    icon,\n    visible,\n    iconRotatorProps,\n    className,\n    ...remaining\n  } = props;\n\n  const id = useEnsuredId(propId, \"autocomplete-dropdown\");\n\n  return (\n    <Button\n      {...remaining}\n      id={id}\n      aria-expanded={visible}\n      tabIndex={-1}\n      buttonType=\"icon\"\n      className={autocompleteDropdownButton({ className })}\n    >\n      <IconRotator {...iconRotatorProps} rotated={visible}>\n        {getIcon(\"dropdown\", icon)}\n      </IconRotator>\n    </Button>\n  );\n}\n"],"names":["Button","IconRotator","getIcon","useEnsuredId","autocompleteDropdownButton","AutocompleteDropdownButton","props","id","propId","icon","visible","iconRotatorProps","className","remaining","aria-expanded","tabIndex","buttonType","rotated"],"mappings":"AAAA;;AAIA,SAASA,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,0BAA0B,QAAQ,0BAA0B;AAGrE;;;;;;CAMC,GACD,OAAO,SAASC,2BACdC,KAA4D;IAE5D,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAI,EACJC,OAAO,EACPC,gBAAgB,EAChBC,SAAS,EACT,GAAGC,WACJ,GAAGP;IAEJ,MAAMC,KAAKJ,aAAaK,QAAQ;IAEhC,qBACE,KAACR;QACE,GAAGa,SAAS;QACbN,IAAIA;QACJO,iBAAeJ;QACfK,UAAU,CAAC;QACXC,YAAW;QACXJ,WAAWR,2BAA2B;YAAEQ;QAAU;kBAElD,cAAA,KAACX;YAAa,GAAGU,gBAAgB;YAAEM,SAASP;sBACzCR,QAAQ,YAAYO;;;AAI7B"}

package/dist/autocomplete/AutocompleteListboxChildren.d.ts

@@ -4,11 +4,9 @@ import { type AutocompleteGetOptionLabel, type AutocompleteGetOptionProps, type
  * @since 6.0.0
  * @internal
  */
-export interface AutocompleteListboxChildrenProps<Option extends AutocompleteOption> {
+export interface AutocompleteListboxChildrenProps<Option extends AutocompleteOption> extends Required<AutocompleteGetOptionProps<Option>>, Required<AutocompleteGetOptionLabel<Option>> {
     query: string;
     options: readonly Option[];
-    getOptionLabel: AutocompleteGetOptionLabel<Option>;
-    getOptionProps: AutocompleteGetOptionProps<Option>;
     children: ReactNode;
     noOptionsChildren: ReactNode;
 }

package/dist/autocomplete/AutocompleteListboxChildren.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/AutocompleteListboxChildren.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { useListboxContext } from \"../form/ListboxProvider.js\";\nimport { Option } from \"../form/Option.js\";\nimport {\n  type AutocompleteGetOptionLabel,\n  type AutocompleteGetOptionProps,\n  type AutocompleteOption,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface AutocompleteListboxChildrenProps<\n  Option extends AutocompleteOption,\n> {\n  query: string;\n  options: readonly Option[];\n  getOptionLabel: AutocompleteGetOptionLabel<Option>;\n  getOptionProps: AutocompleteGetOptionProps<Option>;\n  children: ReactNode;\n  noOptionsChildren: ReactNode;\n}\n\n/**\n * NOTE: This was moved to a second component to improve performance so\n * that the availableOptions aren't looped until the listbox is visible\n *\n * @since 6.0.0\n * @internal\n */\nexport function AutocompleteListboxChildren<Option extends AutocompleteOption>(\n  props: AutocompleteListboxChildrenProps<Option>\n): ReactElement {\n  const {\n    children,\n    query,\n    options: availableOptions,\n    noOptionsChildren,\n    getOptionLabel,\n    getOptionProps,\n  } = props;\n  const { isOptionSelected } = useListboxContext();\n\n  return (\n    <>\n      {children}\n      {!availableOptions.length && noOptionsChildren}\n      {availableOptions.map((option, index) => {\n        const label = getOptionLabel(option);\n        const optionProps = getOptionProps({\n          index,\n          query,\n          option,\n          selected: isOptionSelected(option),\n          extractor: getOptionLabel,\n        });\n\n        return (\n          <Option key={label} value={option} {...optionProps}>\n            {optionProps?.children ?? label}\n          </Option>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["useListboxContext","Option","AutocompleteListboxChildren","props","children","query","options","availableOptions","noOptionsChildren","getOptionLabel","getOptionProps","isOptionSelected","length","map","option","index","label","optionProps","selected","extractor","value"],"mappings":"AAAA;;AAIA,SAASA,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,MAAM,QAAQ,oBAAoB;AAsB3C;;;;;;CAMC,GACD,OAAO,SAASC,4BACdC,KAA+C;IAE/C,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,SAASC,gBAAgB,EACzBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACf,GAAGP;IACJ,MAAM,EAAEQ,gBAAgB,EAAE,GAAGX;IAE7B,qBACE;;YACGI;YACA,CAACG,iBAAiBK,MAAM,IAAIJ;YAC5BD,iBAAiBM,GAAG,CAAC,CAACC,QAAQC;gBAC7B,MAAMC,QAAQP,eAAeK;gBAC7B,MAAMG,cAAcP,eAAe;oBACjCK;oBACAV;oBACAS;oBACAI,UAAUP,iBAAiBG;oBAC3BK,WAAWV;gBACb;gBAEA,qBACE,KAACR;oBAAmBmB,OAAON;oBAAS,GAAGG,WAAW;8BAC/CA,aAAab,YAAYY;mBADfA;YAIjB;;;AAGN"}
+{"version":3,"sources":["../../src/autocomplete/AutocompleteListboxChildren.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { useListboxContext } from \"../form/ListboxProvider.js\";\nimport { Option } from \"../form/Option.js\";\nimport {\n  type AutocompleteGetOptionLabel,\n  type AutocompleteGetOptionProps,\n  type AutocompleteOption,\n} from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface AutocompleteListboxChildrenProps<\n  Option extends AutocompleteOption,\n> extends Required<AutocompleteGetOptionProps<Option>>,\n    Required<AutocompleteGetOptionLabel<Option>> {\n  query: string;\n  options: readonly Option[];\n  children: ReactNode;\n  noOptionsChildren: ReactNode;\n}\n\n/**\n * NOTE: This was moved to a second component to improve performance so\n * that the availableOptions aren't looped until the listbox is visible\n *\n * @since 6.0.0\n * @internal\n */\nexport function AutocompleteListboxChildren<Option extends AutocompleteOption>(\n  props: AutocompleteListboxChildrenProps<Option>\n): ReactElement {\n  const {\n    children,\n    query,\n    options: availableOptions,\n    noOptionsChildren,\n    getOptionLabel,\n    getOptionProps,\n  } = props;\n  const { isOptionSelected } = useListboxContext();\n\n  return (\n    <>\n      {children}\n      {!availableOptions.length && noOptionsChildren}\n      {availableOptions.map((option, index) => {\n        const label = getOptionLabel(option);\n        const optionProps = getOptionProps({\n          index,\n          query,\n          option,\n          selected: isOptionSelected(option),\n          extractor: getOptionLabel,\n        });\n\n        return (\n          <Option key={label} value={option} {...optionProps}>\n            {optionProps?.children ?? label}\n          </Option>\n        );\n      })}\n    </>\n  );\n}\n"],"names":["useListboxContext","Option","AutocompleteListboxChildren","props","children","query","options","availableOptions","noOptionsChildren","getOptionLabel","getOptionProps","isOptionSelected","length","map","option","index","label","optionProps","selected","extractor","value"],"mappings":"AAAA;;AAIA,SAASA,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,MAAM,QAAQ,oBAAoB;AAqB3C;;;;;;CAMC,GACD,OAAO,SAASC,4BACdC,KAA+C;IAE/C,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,SAASC,gBAAgB,EACzBC,iBAAiB,EACjBC,cAAc,EACdC,cAAc,EACf,GAAGP;IACJ,MAAM,EAAEQ,gBAAgB,EAAE,GAAGX;IAE7B,qBACE;;YACGI;YACA,CAACG,iBAAiBK,MAAM,IAAIJ;YAC5BD,iBAAiBM,GAAG,CAAC,CAACC,QAAQC;gBAC7B,MAAMC,QAAQP,eAAeK;gBAC7B,MAAMG,cAAcP,eAAe;oBACjCK;oBACAV;oBACAS;oBACAI,UAAUP,iBAAiBG;oBAC3BK,WAAWV;gBACb;gBAEA,qBACE,KAACR;oBAAmBmB,OAAON;oBAAS,GAAGG,WAAW;8BAC/CA,aAAab,YAAYY;mBADfA;YAIjB;;;AAGN"}

package/dist/autocomplete/_autocomplete.scss

@@ -1,3 +1,7 @@
+////
+/// @group autocomplete
+////
+
 @use "sass:list";
 @use "sass:map";
 @use "sass:math";
@@ -10,96 +14,124 @@
 @use "../form/form";
 @use "../progress/progress";
 
-// Set to `true` to disable all the styles
-// @type boolean
+/// Set to `true` to disable all the styles
+/// @type Boolean
 $disable-everything: false !default;
 
-// Set to `true` to disable the clear button styles
-// @type boolean
+/// Set to `true` to disable the clear button styles
+/// @type Boolean
 $disable-clear-button: false !default;
 
-// Set to `true` to disable the dropdown button styles
-// @type boolean
+/// Set to `true` to disable showing the clear button only while:
+/// - the user is focusing the input
+/// - the user is hovering a valued input
+///
+/// @type Boolean
+$disable-clear-button-hover: false !default;
+
+/// Set to `true` to disable showing the clear button only while:
+/// - the input has a value
+/// - the user is focusing the input
+/// - the user is hovering a valued input
+///
+/// NOTE: This requires the `$disable-clear-button-hover` to be `false` to
+/// work.
+///
+/// @type Boolean
+$disable-clear-button-query-hover: $disable-clear-button-hover !default;
+
+/// Set to `true` to disable the dropdown button styles
+/// @type Boolean
 $disable-dropdown-button: false !default;
 
-// Set to `true` to disable the circular progress styles
-// @type boolean
+/// Set to `true` to disable the circular progress styles
+/// @type Boolean
 $disable-circular-progress: false !default;
 
-// Set to `true` to disable setting `text-overflow: ellipsis` on the input
-// @type boolean
+/// Set to `true` to disable setting `text-overflow: ellipsis` on the input
+/// @type Boolean
 $disable-text-overflow-ellipsis: false !default;
 
-// Set to `true` to disable the inline chip styles
-// @type boolean
+/// Set to `true` to disable the inline chip styles
+/// @type Boolean
 $disable-inline-chips: chip.$disable-everything !default;
 
-// This is the min width for the input when there are inline chips. This causes
-// the input to wrap to the next line.
-// @type number
+/// This is the min width for the input when there are inline chips. This causes
+/// the input to wrap to the next line.
+/// @type Number
 $inline-min-width: 5rem !default;
 
-// The amount of spacing between each inline chip
-// @type number
+/// The amount of spacing between each inline chip
+/// @type Number
 $inline-chips-gap: icon.get-var(spacing) !default;
 
-// The vertical padding to apply to the text field when using inline chips and
-// the outline theme. This is used so that the chips and floating label look
-// nice.
-// @type number
+/// The vertical padding to apply to the text field when using inline chips and
+/// the outline theme. This is used so that the chips and floating label look
+/// nice.
+/// @type Number
 $inline-outlined-vertical-padding: calc(
   (form.form-get-var(text-field-height) - chip.get-var(height)) / 2 -
     form.$text-field-border-width
 ) !default;
 
-// The amount of padding to apply to the text field when there is at least one
-// chip visible. The default behavior makes it so the text in the input matches
-// with a chip if they were stacked.
-//
-// @type number
+/// The amount of padding to apply to the text field when there is at least one
+/// chip visible. The default behavior makes it so the text in the input matches
+/// with a chip if they were stacked.
+///
+/// @type Number
 $inline-input-leading-padding: chip.get-var(horizontal-padding) !default;
 
-// Updates all the icon button sizes that appear within the autocomplete to use
-// this new size
-// @type number
+/// Updates all the icon button sizes that appear within the autocomplete to use
+/// this new size
+/// @type Number
 $button-size: button.$icon-small-size !default;
 
-// The size of the circular progress and used to generate the correct padding
-// for all the inline addons
-// @type number
+/// The size of the circular progress and used to generate the correct padding
+/// for all the inline addons
+/// @type Number
 $circular-progress-size: button.$icon-small-size !default;
 
-// The amount of gap between the circular progress, clear button, and dropdown
-// button (when they exist).
-//
-// @type number
+/// The amount of gap between the circular progress, clear button, and dropdown
+/// button (when they exist).
+///
+/// @type Number
 $addon-gap: form.$text-field-addon-gap !default;
 
-// The spacing between the input and the circular progress/clear button/dropdown
-// button addons.
-//
-// @type number
+/// The spacing between the input and the circular progress/clear button/dropdown
+/// button addons.
+///
+/// @type Number
 $addon-spacing: form.form-get-var(addon-spacing) !default;
 
-// The size of the clear button and used to generate the correct padding for all
-// the inline addons
-// @type number
+/// The size of the clear button and used to generate the correct padding for all
+/// the inline addons
+/// @type Number
 $clear-button-size: calc(button.get-var(icon-font-size) * 2) !default;
 
-// The size of the dropdown button and used to generate the correct padding for all
-// the inline addons
-// @type number
+/// The size of the dropdown button and used to generate the correct padding for all
+/// the inline addons
+/// @type Number
 $dropdown-button-size: calc(button.get-var(icon-font-size) * 2) !default;
 
+/// @access private
+/// @type String
 $_chip-selector: ".rmd-autocomplete__chip";
+/// @access private
+/// @type String
 $_clear-button-selector: ".rmd-autocomplete__clear-button";
+/// @access private
+/// @type String
 $_dropdown-button-selector: ".rmd-autocomplete__dropdown-button";
+/// @access private
+/// @type String
 $_outline-selector: ".rmd-text-field-container--outline";
+/// @access private
+/// @type String
 $_underline-selector: ".rmd-text-field-container--underline";
 
-// The available configurable css variables and mostly used internally for the
-// `get-var`, `set-var`, and `use-var` utils.
-// @type List
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (
   clear-button-size,
   dropdown-button-size,
@@ -111,9 +143,9 @@ $variables: (
   addon-spacing
 );
 
-// @param {string} name - The supported variable name
-// @param {any} fallback - An optional fallback value
-// @returns {string} a `var()` statement
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "autocomplete");
   @if $fallback {
@@ -123,24 +155,24 @@ $variables: (
   @return var(#{$var});
 }
 
-// @param {string} name - The supported variable name
-// @param {any} value - The value to set the variable to. Supports `null` which
-// will just be a no-op.
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "autocomplete")}: #{$value};
   }
 }
 
-// @param {string} property - The css property to apply the variable to
-// @param {string} name - The supported variable name
-// @param {any} fallback - An optional fallback value if the variable has not
-// been set
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-// Conditionally applies the css variables based on feature flags
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(addon-gap, $addon-gap);
@@ -152,7 +184,10 @@ $variables: (
   }
 }
 
-// @internal
+/// Used to create a `calc` expression for the right addons.
+///
+/// @access private
+/// @returns {String} A `calc` string
 @function _right-addon-calc() {
   $calc-spacing: get-var(addon-spacing);
   $calc-total-gap: calc(get-var(gap-count, 0) * get-var(addon-gap));
@@ -177,18 +212,23 @@ $variables: (
   @return calc($calc-spacing + #{$calc-total-gap + $calc-addon-size});
 }
 
-// @internal
+/// Used to create a `:has` selector for the different addons.
+///
+/// @access private
+/// @param {String} appending-selector
+/// @param {String} addon-selector
+/// @returns {String} a class name selector
 @function _add-has-selector($appending-selector, $addon-selector) {
   $prefix: if(string.length($appending-selector), "", "&");
 
   @return $appending-selector + $prefix + ":has(" + $addon-selector + ")";
 }
 
-// Generates all the styles for the `Autocomplete` components based on feature
-// flags.
-//
-// @param {boolean} disable-layer - Set this to `true` to disable the
-// layer behavior
+/// Generates all the styles for the `Autocomplete` components based on feature
+/// flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   // disclaimer: this is the first component where I'm trying to utilize more of
   // the `:has`, `:where`, `:is`, etc selectors to require less javascript and
@@ -299,10 +339,24 @@ $variables: (
           }
         }
 
-        @include utils.mouse-hover($wrap-in-hover: false) {
-          &:where(:not(:hover):not(:focus-within))
-            :where(#{$_clear-button-selector}) {
-            opacity: 0;
+        @if not $disable-clear-button-hover {
+          @include utils.mouse-hover($wrap-in-hover: false) {
+            // show the clear button if the autocomplete container is hovered or
+            // any element is focused within the container
+            $hover-selector: "&:where(:not(:hover):not(:focus-within)) :where(#{$_clear-button-selector + "--hover"})";
+
+            // stacks on top of the hover behavior, and also enforces only
+            // showing the clear button if the input has a value (or query)
+            $query-selector: "&:where(:has(:placeholder-shown)) :where(#{$_clear-button-selector + "--query"})";
+
+            $selector: $hover-selector;
+            @if not $disable-clear-button-query-hover {
+              $selector: $selector + ", " $query-selector;
+            }
+
+            #{$selector} {
+              opacity: 0;
+            }
           }
         }
 

package/dist/autocomplete/autocompleteStyles.d.ts

@@ -1,3 +1,4 @@
+import { type ClearButtonVisibility } from "./types.js";
 /**
  * @since 6.0.0
  */
@@ -37,6 +38,8 @@ export declare function autocompleteDropdownButton(options?: AutocompleteDropdow
  */
 export interface AutocompleteClearButtonClassNameOptions {
     className?: string;
+    /** {@inheritDoc ClearButtonVisibility} */
+    visibility?: ClearButtonVisibility;
 }
 /**
  * @since 6.0.0

package/dist/autocomplete/autocompleteStyles.js

@@ -30,8 +30,11 @@ const styles = bem("rmd-autocomplete");
 /**
  * @since 6.0.0
  */ export function autocompleteClearButton(options = {}) {
-    const { className } = options;
-    return cnb(styles("clear-button"), className);
+    const { className, visibility = "always" } = options;
+    return cnb(styles("clear-button", {
+        hover: visibility === "active" || visibility === "query",
+        query: visibility === "query"
+    }), className);
 }
 /**
  * @since 6.0.0

package/dist/autocomplete/autocompleteStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/autocomplete/autocompleteStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-autocomplete\");\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteClassNameOptions {\n  className?: string;\n\n  loading?: boolean;\n  inlineChips?: boolean;\n  disableClearButton?: boolean;\n  disableDropdownButton?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocomplete(\n  options: AutocompleteClassNameOptions = {}\n): string {\n  const {\n    className,\n    loading,\n    inlineChips,\n    disableClearButton,\n    disableDropdownButton,\n  } = options;\n\n  return cnb(\n    styles({\n      cb: !disableClearButton,\n      db: !disableDropdownButton,\n      cp: loading,\n      \"inline-chips\": inlineChips,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteRightAddonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteRightAddon(\n  options: AutocompleteRightAddonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\n    styles(\"right-addon\"),\n    cssUtils({ backgroundColor: \"current-color\" }),\n    className\n  );\n}\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteDropdownButton(\n  options: AutocompleteDropdownButtonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"dropdown-button\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteClearButton(\n  options: AutocompleteClearButtonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"clear-button\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteChip(\n  options: AutocompleteChipClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"chip\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","autocomplete","options","className","loading","inlineChips","disableClearButton","disableDropdownButton","cb","db","cp","autocompleteRightAddon","backgroundColor","autocompleteDropdownButton","autocompleteClearButton","autocompleteChip"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAcnB;;CAEC,GACD,OAAO,SAASE,aACdC,UAAwC,CAAC,CAAC;IAE1C,MAAM,EACJC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGL;IAEJ,OAAOL,IACLG,OAAO;QACLQ,IAAI,CAACF;QACLG,IAAI,CAACF;QACLG,IAAIN;QACJ,gBAAgBC;IAClB,IACAF;AAEJ;AASA;;CAEC,GACD,OAAO,SAASQ,uBACdT,UAAkD,CAAC,CAAC;IAEpD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IACLG,OAAO,gBACPF,SAAS;QAAEc,iBAAiB;IAAgB,IAC5CT;AAEJ;AAQA;;CAEC,GACD,OAAO,SAASU,2BACdX,UAAsD,CAAC,CAAC;IAExD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,oBAAoBG;AACxC;AASA;;CAEC,GACD,OAAO,SAASW,wBACdZ,UAAmD,CAAC,CAAC;IAErD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,iBAAiBG;AACrC;AASA;;CAEC,GACD,OAAO,SAASY,iBACdb,UAA4C,CAAC,CAAC;IAE9C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,SAASG;AAC7B"}
+{"version":3,"sources":["../../src/autocomplete/autocompleteStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ClearButtonVisibility } from \"./types.js\";\n\nconst styles = bem(\"rmd-autocomplete\");\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteClassNameOptions {\n  className?: string;\n\n  loading?: boolean;\n  inlineChips?: boolean;\n  disableClearButton?: boolean;\n  disableDropdownButton?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocomplete(\n  options: AutocompleteClassNameOptions = {}\n): string {\n  const {\n    className,\n    loading,\n    inlineChips,\n    disableClearButton,\n    disableDropdownButton,\n  } = options;\n\n  return cnb(\n    styles({\n      cb: !disableClearButton,\n      db: !disableDropdownButton,\n      cp: loading,\n      \"inline-chips\": inlineChips,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteRightAddonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteRightAddon(\n  options: AutocompleteRightAddonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\n    styles(\"right-addon\"),\n    cssUtils({ backgroundColor: \"current-color\" }),\n    className\n  );\n}\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteDropdownButtonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteDropdownButton(\n  options: AutocompleteDropdownButtonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"dropdown-button\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteClearButtonClassNameOptions {\n  className?: string;\n  /** {@inheritDoc ClearButtonVisibility} */\n  visibility?: ClearButtonVisibility;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteClearButton(\n  options: AutocompleteClearButtonClassNameOptions = {}\n): string {\n  const { className, visibility = \"always\" } = options;\n\n  return cnb(\n    styles(\"clear-button\", {\n      hover: visibility === \"active\" || visibility === \"query\",\n      query: visibility === \"query\",\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface AutocompleteChipClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function autocompleteChip(\n  options: AutocompleteChipClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"chip\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","autocomplete","options","className","loading","inlineChips","disableClearButton","disableDropdownButton","cb","db","cp","autocompleteRightAddon","backgroundColor","autocompleteDropdownButton","autocompleteClearButton","visibility","hover","query","autocompleteChip"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAcnB;;CAEC,GACD,OAAO,SAASE,aACdC,UAAwC,CAAC,CAAC;IAE1C,MAAM,EACJC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,kBAAkB,EAClBC,qBAAqB,EACtB,GAAGL;IAEJ,OAAOL,IACLG,OAAO;QACLQ,IAAI,CAACF;QACLG,IAAI,CAACF;QACLG,IAAIN;QACJ,gBAAgBC;IAClB,IACAF;AAEJ;AASA;;CAEC,GACD,OAAO,SAASQ,uBACdT,UAAkD,CAAC,CAAC;IAEpD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IACLG,OAAO,gBACPF,SAAS;QAAEc,iBAAiB;IAAgB,IAC5CT;AAEJ;AAQA;;CAEC,GACD,OAAO,SAASU,2BACdX,UAAsD,CAAC,CAAC;IAExD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,oBAAoBG;AACxC;AAWA;;CAEC,GACD,OAAO,SAASW,wBACdZ,UAAmD,CAAC,CAAC;IAErD,MAAM,EAAEC,SAAS,EAAEY,aAAa,QAAQ,EAAE,GAAGb;IAE7C,OAAOL,IACLG,OAAO,gBAAgB;QACrBgB,OAAOD,eAAe,YAAYA,eAAe;QACjDE,OAAOF,eAAe;IACxB,IACAZ;AAEJ;AASA;;CAEC,GACD,OAAO,SAASe,iBACdhB,UAA4C,CAAC,CAAC;IAE9C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,SAASG;AAC7B"}