@react-md/core 6.4.0 → 6.5.0

package/dist/_a11y.scss

@@ -183,5 +183,7 @@ $_linear-channel-values: (
   $light-contrast: _contrast($background-color, $light-color);
   $dark-contrast: _contrast($background-color, $dark-color);
 
-  @return if($light-contrast > $dark-contrast, $light-color, $dark-color);
+  @return if(
+    sass($light-contrast > $dark-contrast): $light-color; else: $dark-color
+  );
 }

package/dist/_box-shadows.scss

@@ -203,7 +203,11 @@ $box-shadow-3-layers: (
   $create-pseudo: true,
   $position-relative: true
 ) {
-  $pseudo-selector: if($pseudo-before, "&::before", "&::after");
+  $pseudo-selector: "&::after";
+  @if $pseudo-before {
+    $pseudo-selector: "&::before";
+  }
+
   $suffix: string.slice($pseudo-selector, 2);
   $active-string: "";
 
@@ -230,7 +234,11 @@ $box-shadow-3-layers: (
       @for $i from 1 to list.length($active-selectors) + 1 {
         $selector: list.nth($active-selectors, $i);
 
-        $prefix: $active-string + if($i > 1, ", ", "");
+        $maybe-comma: "";
+        @if $i > 1 {
+          $maybe-comma: ", ";
+        }
+        $prefix: $active-string + $maybe-comma;
         $active-string: $prefix + $selector + $suffix;
       }
     }
@@ -282,16 +290,16 @@ $box-shadow-3-layers: (
   $opacity-boost: 0,
   $position-relative: true
 ) {
-  $start-shadow: if(
-    $start-z-value == none or $start-z-value == 0,
-    none,
-    box-shadow($start-z-value, $color, $opacity-boost)
-  );
-  $end-shadow: if(
-    $end-z-value == none or $end-z-value == 0,
-    none,
-    if($end-z-value, box-shadow($end-z-value, $color, $opacity-boost), null)
-  );
+  $start-shadow: none;
+  $end-shadow: null;
+  @if $start-z-value != none and $start-z-value != 0 {
+    $start-shadow: box-shadow($start-z-value, $color, $opacity-boost);
+  }
+  @if $end-z-value {
+    @if $end-z-value != none and $end-z-value != 0 {
+      $end-shadow: box-shadow($end-z-value, $color, $opacity-boost);
+    }
+  }
 
   @include box-shadow-transition(
     $start-shadow,

package/dist/_core.scss

@@ -15,9 +15,9 @@
 @forward "box-shadows";
 @forward "interaction/interaction" as interaction-*;
 @forward "draggable/draggable" as draggable-*;
+@forward "divider/divider" as divider-*;
 @forward "window-splitter/window-splitter" as window-splitter-*;
 @forward "icon/icon" as icon-*;
-@forward "divider/divider" as divider-*;
 @forward "progress/progress" as progress-*;
 @forward "overlay/overlay" as overlay-*;
 @forward "button/button" as button-*;

package/dist/_utils.scss

@@ -97,30 +97,40 @@ $_swappable-properties: text-align;
 /// @param {String} error-message - The additional error message to display
 /// @returns {any} the value from the list or map
 @function validate($options, $key-or-value, $error-message) {
-  $options: if(
-    meta.type-of($options) == string,
-    list.append((), $options),
-    $options
-  );
+  @if meta.type-of($options) == string {
+    $options: list.append((), $options);
+  }
 
   $type: meta.type-of($options);
   $is-map: $type == map;
   $is-list: $type == list;
 
   @if $disable-validation {
-    @return if($is-list, $key-or-value, map.get($options, $key-or-value));
+    @if $is-list {
+      @return $key-or-value;
+    }
+
+    @return map.get($options, $key-or-value);
   }
 
   @if not $is-map and not $is-list {
     @error "Unable to validate anything except for lists and maps at this time. Received: '#{$options}'.";
   }
 
-  $choices: if($is-map, map.keys($options), $options);
+  $choices: $options;
+  @if $is-map {
+    $choices: map.keys($options);
+  }
+
   @if not list.index($choices, $key-or-value) {
     @error "Invalid #{$error-message}: '#{$key-or-value}'. Choose one of: #{$choices}";
   }
 
-  @return if($is-list, $key-or-value, map.get($options, $key-or-value));
+  @if $is-list {
+    @return $key-or-value;
+  }
+
+  @return map.get($options, $key-or-value);
 }
 
 /// Used to get a custom property variable name.
@@ -272,7 +282,7 @@ $_swappable-properties: text-align;
   content: "";
   inset: $inset;
   pointer-events: none;
-  position: if($fixed, fixed, absolute);
+  position: if(sass($fixed): fixed; else: absolute);
   z-index: $z-index;
 }
 
@@ -349,8 +359,12 @@ $_swappable-properties: text-align;
   $css-modules: false,
   $parent-selector: true
 ) {
-  $selector: if($css-modules, ":global #{$selector} :local", $selector);
-  $selector: if($parent-selector, "#{$selector} &", $selector);
+  @if $css-modules {
+    $selector: ":global #{$selector} :local";
+  }
+  @if $parent-selector {
+    $selector: "#{$selector} &";
+  }
 
   #{$selector} {
     @content;

package/dist/app-bar/_app-bar.scss

@@ -115,10 +115,10 @@ $light-theme-surface-color: a11y.contrast-color(
 /// The background color to use when `theme="surface"` and using the global dark
 /// theme
 /// @type Color
+// prettier-ignore
 $dark-theme-surface-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $fixed-elevation)
+  sass(theme.$disable-dark-elevation): theme.$dark-theme-surface-color;
+  else: map.get(theme.$dark-elevation-colors, $fixed-elevation)
 ) !default;
 
 /// The text color to use when `theme="surface"` and using the global dark theme

package/dist/autocomplete/_autocomplete.scss

@@ -195,21 +195,22 @@ $variables: (
 @function _right-addon-calc() {
   $calc-spacing: get-var(addon-spacing);
   $calc-total-gap: calc(get-var(gap-count, 0) * get-var(addon-gap));
-  $calc-clear-button: if(
-    $disable-clear-button,
-    "",
-    " + " + get-var(clear-button-size, 0px)
-  );
-  $calc-dropdown-button: if(
-    $disable-dropdown-button,
-    "",
-    " + " + get-var(dropdown-button-size, 0px)
-  );
-  $calc-circular-progress: if(
-    $disable-circular-progress,
-    "",
-    " + " + get-var(circular-progress-size, 0px)
-  );
+
+  $calc-clear-button: "";
+  @if not $disable-clear-button {
+    $calc-clear-button: " + " + get-var(clear-button-size, 0px);
+  }
+
+  $calc-dropdown-button: "";
+  @if not $disable-dropdown-button {
+    $calc-dropdown-button: " + " + get-var(dropdown-button-size, 0px);
+  }
+
+  $calc-circular-progress: "";
+  @if not $disable-circular-progress {
+    $calc-circular-progress: " + " + get-var(circular-progress-size, 0px);
+  }
+
   $calc-addon-size: $calc-clear-button + $calc-dropdown-button +
     $calc-circular-progress;
 
@@ -223,7 +224,10 @@ $variables: (
 /// @param {String} addon-selector
 /// @returns {String} a class name selector
 @function _add-has-selector($appending-selector, $addon-selector) {
-  $prefix: if(string.length($appending-selector), "", "&");
+  $prefix: "";
+  @if not string.length($appending-selector) {
+    $prefix: "&";
+  }
 
   @return $appending-selector + $prefix + ":has(" + $addon-selector + ")";
 }

package/dist/avatar/_avatar.scss

@@ -165,7 +165,8 @@ $variables: (
 /// @param {Boolean} disable-prefix [false] - Set to `true` to disable the
 /// `.rmd-avatar--` prefix for the class name
 @mixin custom-color($name, $color, $background-color, $disable-prefix: false) {
-  $class-name: if($disable-prefix, $name, ".rmd-avatar--#{$name}");
+  // prettier-ignore
+  $class-name: if(sass($disable-prefix): $name; else: ".rmd-avatar--#{$name}");
 
   #{$class-name} {
     @include set-var(background-color, $background-color);

package/dist/button/_button.scss

@@ -408,6 +408,14 @@ $variables: (
         }
 
         @if not $disable-contained {
+          $contained-elevation-end: null;
+          @if not
+            $disable-contained-pressed-elevation and
+            $contained-pressed-elevation
+          {
+            $contained-elevation-end: $contained-pressed-elevation;
+          }
+
           &--contained {
             // contained buttons should _normally_ always force dark background
             // colors for the interaction states This means use the default light
@@ -424,11 +432,7 @@ $variables: (
 
             @include box-shadows.elevation-transition(
               $contained-elevation,
-              if(
-                $disable-contained-pressed-elevation,
-                null,
-                $contained-pressed-elevation
-              ),
+              $contained-elevation-end,
               "&.rmd-button--pressed",
               $pseudo-before: false,
               $position-relative: false

package/dist/card/_card.scss

@@ -59,10 +59,10 @@ $light-theme-background-color: theme.theme-get-var(surface-color) !default;
 
 /// The background color to use when using the global dark theme
 /// @type Color
+// prettier-ignore
 $dark-theme-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $elevation)
+  sass(theme.$disable-dark-elevation): theme.$dark-theme-surface-color;
+  else: map.get(theme.$dark-elevation-colors, $elevation)
 ) !default;
 
 /// The default card background color
@@ -226,10 +226,10 @@ $variables: (background-color, color);
           column-gap: $header-spacing;
           display: flex;
           max-width: 100%;
+          // prettier-ignore
           padding: if(
-            $header-padding == $header-padding-top or not $header-padding-top,
-            $header-padding,
-            $header-padding-top $header-padding $header-padding
+            sass($header-padding == $header-padding-top or not $header-padding-top): $header-padding;
+            else: $header-padding-top $header-padding $header-padding
           );
         }
 

package/dist/chip/_chip.scss

@@ -182,10 +182,10 @@ $solid-light-color: a11y.contrast-color($solid-light-background-color) !default;
 
 /// The dark theme background color for the `theme="solid"`
 /// @type Color
+// prettier-ignore
 $solid-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  colors.$grey-900,
-  map.get(theme.$dark-elevation-colors, 12)
+  sass(theme.$disable-dark-elevation): colors.$grey-900;
+  else: map.get(theme.$dark-elevation-colors, 12)
 ) !default;
 
 /// The dark theme background color for the `theme="solid"` and the `Chip` is
@@ -261,10 +261,10 @@ $outline-dark-color: $outline-light-color !default;
 
 /// The background-color to use in dark themes when `theme="outline"`
 /// @type Color
+// prettier-ignore
 $outline-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  theme.$dark-theme-surface-color,
-  map.get(theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value)
+  sass(theme.$disable-dark-elevation): theme.$dark-theme-surface-color;
+  else: map.get( theme.$dark-elevation-colors, $outline-raisable-box-shadow-z-value)
 ) !default;
 
 /// The text color to use in dark themes when `theme="outline"`

package/dist/dialog/_dialog.scss

@@ -87,18 +87,18 @@ $z-index: utils.$temporary-element-z-index !default;
 
 /// The default background color for a dialog.
 /// @type Color
+// prettier-ignore
 $background-color: if(
-  theme.$disable-dark-elevation,
-  theme.theme-get-var(surface-color),
-  null
+  sass(theme.$disable-dark-elevation): theme.theme-get-var(surface-color);
+  else: null
 ) !default;
 
 /// The default text color for a dialog.
 /// @type Color
+// prettier-ignore
 $color: if(
-  theme.$disable-dark-elevation,
-  theme.theme-get-var(text-primary-color),
-  null
+  sass(theme.$disable-dark-elevation): theme.theme-get-var(text-primary-color);
+  else: null,
 ) !default;
 
 /// The `min-width` to apply to all `Dialog`s.

package/dist/divider/_divider.scss

@@ -125,8 +125,12 @@ $variables: (
 /// @param {String} position [null] - This should be one of `left`, `right`,
 /// `top`, `bottom`
 @mixin border-style($position: null) {
-  $property: if(not $position, border, "border-#{$position}");
-  $var-name: if(not $position, size, border-size);
+  $property: border;
+  $var-name: size;
+  @if $position {
+    $property: "border-#{$position}";
+    $var-name: border-size;
+  }
 
   #{$property}: get-var($var-name) solid get-var(color);
 }

package/dist/form/Select.d.ts

@@ -2,8 +2,27 @@ import { type ChangeEvent, type HTMLAttributes, type InputHTMLAttributes, type R
 import { type BoxProps } from "../box/Box.js";
 import { type MenuProps } from "../menu/Menu.js";
 import { type LabelA11y, type PropsWithRef, type RequireAtLeastOne } from "../types.js";
+import { type OptionProps } from "./Option.js";
 import { type TextFieldContainerProps } from "./TextFieldContainer.js";
 import { type UserAgentAutocompleteProps } from "./types.js";
+/**
+ * @since 6.5.0
+ */
+export interface GetSelectedOptionChildrenOptions<Value extends string = string> {
+    value: "" | Value;
+    /**
+     * The option will be undefined if there is no value or matching option.
+     */
+    option: OptionProps | undefined;
+    /**
+     * This is a pass-through of the {@link SelectProps.placeholder}
+     */
+    placeholder?: ReactNode;
+    /**
+     * This is a pass-through of the {@link SelectProps.selectedOptionProps}
+     */
+    children?: ReactNode;
+}
 /**
  * This is a convenience type for casting the `event.currentTarget.value` of a
  * `Select`'s change event to be union of available values.
@@ -145,6 +164,11 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldContain
      * @defaultValue `false`
      */
     disableSelectedIcon?: boolean;
+    /**
+     * @since 6.5.0
+     * @defaultValue `({ children, option, placeholder }) => children ?? (option?.children || placeholder)`
+     */
+    getSelectedOptionChildren?: (options: GetSelectedOptionChildrenOptions<Value>) => ReactNode;
     /**
      * This should be the available `Option`s for the select to choose from. It
      * can also contain `OptGroup` or any other elements but only clicking on an

package/dist/form/Select.js

@@ -22,6 +22,12 @@ const EMPTY_STRING = "";
 const noop = ()=>{
 // do nothing
 };
+/**
+ * @since 6.5.0
+ */ const defaultGetSelectedOptionChildren = (options)=>{
+    const { children, option, placeholder } = options;
+    return children ?? (option?.children || placeholder);
+};
 /**
  * **Client Component**
  *
@@ -53,7 +59,7 @@ const noop = ()=>{
  * @see {@link https://react-md.dev/components/select | Select Demos}
  * @since 6.0.0 Rewritten with a new API.
  */ export function Select(props) {
-    const { id, form, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, className, onClick, onFocus, onKeyDown, inputRef: propInputRef, inputProps, containerRef, placeholder, menuProps = {}, label, labelProps = {}, selectedOptionProps, icon: propIcon, value, defaultValue, theme: propTheme, onChange = noop, rightAddon: propRightAddon, active = false, required, selectedIconAfter = false, disableOptionAddon = false, disableSelectedIcon = false, children, ...remaining } = props;
+    const { id, form, autoCompleteValue, autoComplete = autoCompleteValue, name = autoCompleteValue, className, onClick, onFocus, onKeyDown, inputRef: propInputRef, inputProps, containerRef, placeholder, menuProps = {}, label, labelProps = {}, selectedOptionProps, getSelectedOptionChildren = defaultGetSelectedOptionChildren, icon: propIcon, value, defaultValue, theme: propTheme, onChange = noop, rightAddon: propRightAddon, active = false, required, selectedIconAfter = false, disableOptionAddon = false, disableSelectedIcon = false, children, ...remaining } = props;
     const { dense, error, disabled } = props;
     const comboboxId = useEnsuredId(id, "select");
     const inputId = useEnsuredId(inputProps?.id, "select-value");
@@ -117,9 +123,14 @@ const noop = ()=>{
                 children: [
                     /*#__PURE__*/ _jsx(SelectedOption, {
                         option: currentOption,
-                        placeholder: placeholder,
                         disableAddon: disableOptionAddon,
-                        ...selectedOptionProps
+                        ...selectedOptionProps,
+                        children: getSelectedOptionChildren({
+                            value: currentValue,
+                            option: currentOption,
+                            placeholder,
+                            children: selectedOptionProps?.children
+                        })
                     }),
                     /*#__PURE__*/ _jsx("input", {
                         "aria-hidden": true,

package/dist/form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type BoxProps } from \"../box/Box.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type LabelA11y,\n  type PropsWithRef,\n  type RequireAtLeastOne,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { Listbox } from \"./Listbox.js\";\nimport { SelectedOption } from \"./SelectedOption.js\";\nimport {\n  TextFieldContainer,\n  type TextFieldContainerProps,\n} from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label as labelStyles } from \"./labelStyles.js\";\nimport { select } from \"./selectStyles.js\";\nimport { extractOptionsFromChildren } from \"./selectUtils.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport { type UserAgentAutocompleteProps } from \"./types.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport { useSelectCombobox } from \"./useSelectCombobox.js\";\nimport { triggerManualChangeEvent } from \"./utils.js\";\n\nconst EMPTY_STRING = \"\" as const;\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This is a convenience type for casting the `event.currentTarget.value` of a\n * `Select`'s change event to be union of available values.\n *\n * Note: The change event does not provide any sort of validation on the value\n * so automation tools like Cypress, Playwright, or Selenium might set an\n * invalid value. This also does not work for numbers, so you will need to\n * implement that yourself.\n *\n * @example Simple Usage\n * ```tsx\n * import { Select, type SelectChangeEvent } from \"@react-md/core/form/Select\";\n * import { Option } from \"@react-md/core/form/Option\";\n * import type { ReactElement } from \"react\";\n *\n * type Value = \"\" | \"a\" | \"b\" | \"c\" | \"d\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState<Value>(\"\");\n *\n *   const handleChange = (event: SelectChangeEvent<Value>): void => {\n *     // No type error!\n *     // `event.currentTarget.value`'s type is `Value` instead of a generic `string`\n *     setValue(event.currentTarget.value);\n *   };\n *\n *   return (\n *     <Select\n *       label=\"Label\"\n *       value={value}\n *       onChange={handleChange}\n *     >\n *       <Option value=\"a\">First</Option>\n *       <Option value=\"b\">Second</Option>\n *       <Option value=\"c\">Third</Option>\n *       <Option value=\"d\">Fourth</Option>\n *     </Select>\n *   );\n * }\n * ```\n * @since 6.0.0\n */\nexport type SelectChangeEvent<Value extends string> =\n  ChangeEvent<HTMLInputElement> & { currentTarget: { value: Value } };\n\n/**\n * @since 6.0.0 Rewritten with a new API.\n */\nexport interface SelectProps<Value extends string>\n  extends\n    Omit<TextFieldContainerProps, \"label\">,\n    Pick<InputHTMLAttributes<HTMLInputElement>, \"form\" | \"required\">,\n    UserAgentAutocompleteProps {\n  /**\n   * @defaultValue `\"select-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text or element to render while no options have been\n   * selected.\n   */\n  placeholder?: ReactNode;\n\n  /**\n   * Set this to a custom dropdown icon or `null` to not render a dropdown icon.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this value to fully control the value of the select component. The\n   * {@link onChange} handler **must** also be provided if this prop exists.\n   */\n  value?: Value;\n\n  /**\n   * An optional default value when the value of the select component is\n   * uncontrolled.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: Value;\n\n  /** @see {@link SelectChangeEvent} */\n  onChange?: (event: SelectChangeEvent<Value>) => void;\n\n  /**\n   * An optional floating label to display like other form fields.\n   */\n  label?: ReactNode;\n\n  /**\n   * Optional props to pass to the `<span>` that surrounds the {@link label}\n   */\n  labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * An optional ref to pass to the hidden `<input type=\"text\" />` element that\n   * stores the current value. This is really only useful if you'd like to keep\n   * this component uncontrolled and access the value through\n   * `inputRef.current.value`.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n\n  /**\n   * A ref for the container `<div>` element.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * Any additional props to provide to the `Menu` component that renders all\n   * the `Option`s.\n   *\n   * The menu will always have these default values unless explicity\n   * overwritten by this prop:\n   *\n   * - `aria-labelledby={label ? labelId : id}` -- this will be undefined if\n   *   `aria-label` is provided\n   * - `anchor={BELOW_CENTER_ANCHOR}`\n   * - `width=\"min\"`\n   */\n  menuProps?: PropsWithRef<\n    Omit<MenuProps, \"visible\" | \"onRequestClose\" | \"fixedTo\">\n  >;\n\n  /**\n   * Any additional props to pass to the div that contains the current visible\n   * option.\n   */\n  selectedOptionProps?: BoxProps;\n\n  /**\n   * Set this to `true` if all the `Option` components should display the\n   * selected icon after the children instead of before.\n   *\n   * @see {@link disableSelectedIcon} to remove the selected icon instead.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` to prevent the current option from rendering the\n   * `leftAddon` in the `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  disableOptionAddon?: boolean;\n\n  /**\n   * Set this to `true` to update all the `Option` components to no longer\n   * render an icon while selected.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * This should be the available `Option`s for the select to choose from. It\n   * can also contain `OptGroup` or any other elements but only clicking on an\n   * `Option` component will update the value.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Option } from \"@react-md/core/form/Option\";\n * import { Select } from \"@react-md/core/form/Select\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"\");\n *\n *   return (\n *     <Select\n *       label=\"Select\"\n *       value={value}\n *       onChange={(event) => setValue(event.currentTarget.value)}\n *       placeholder=\"Select a value\"\n *     >\n *       <Option value=\"a\">Option 1</Option>\n *       <Option value=\"b\">Option 2</Option>\n *       <Option value=\"c\">Option 3</Option>\n *       <Option value=\"d\">Option 4</Option>\n *     </Select>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/select | Select Demos}\n * @since 6.0.0 Rewritten with a new API.\n */\nexport function Select<Value extends string>(\n  props: RequireAtLeastOne<SelectProps<Value>, \"label\" | keyof LabelA11y>\n): ReactElement {\n  const {\n    id,\n    form,\n    autoCompleteValue,\n    autoComplete = autoCompleteValue,\n    name = autoCompleteValue,\n    className,\n    onClick,\n    onFocus,\n    onKeyDown,\n    inputRef: propInputRef,\n    inputProps,\n    containerRef,\n    placeholder,\n    menuProps = {},\n    label,\n    labelProps = {},\n    selectedOptionProps,\n    icon: propIcon,\n    value,\n    defaultValue,\n    theme: propTheme,\n    onChange = noop,\n    rightAddon: propRightAddon,\n    active = false,\n    required,\n    selectedIconAfter = false,\n    disableOptionAddon = false,\n    disableSelectedIcon = false,\n    children,\n    ...remaining\n  } = props;\n  const { dense, error, disabled } = props;\n\n  const comboboxId = useEnsuredId(id, \"select\");\n  const inputId = useEnsuredId(inputProps?.id, \"select-value\");\n  const selectLabelId = useEnsuredId(labelProps.id, \"select-label\");\n  const labelId = label ? selectLabelId : undefined;\n\n  const [localValue, setLocalValue] = useState(() => {\n    if (typeof defaultValue !== \"undefined\") {\n      return defaultValue;\n    }\n\n    return typeof value !== \"undefined\" ? value : EMPTY_STRING;\n  });\n  const currentValue = typeof value === \"undefined\" ? localValue : value;\n  const initialValue = useRef(currentValue);\n  const { options, currentOption } = extractOptionsFromChildren(\n    children,\n    currentValue\n  );\n\n  const { visible, comboboxProps, movementContext, getMenuProps } =\n    useSelectCombobox({\n      form,\n      value: currentValue,\n      values: options,\n      onClick,\n      onFocus,\n      onKeyDown,\n      disabled,\n      popupId: menuProps.id,\n      popupRef: menuProps.ref,\n      comboboxId,\n      comboboxRef: containerRef,\n    });\n\n  const [inputRef, inputRefCallback] = useEnsuredRef(propInputRef);\n  useFormReset({\n    form,\n    elementRef: inputRef,\n    defaultValue: initialValue.current,\n  });\n\n  const icon = getIcon(\"dropdown\", propIcon);\n  const theme = getFormConfig(\"theme\", propTheme);\n  let rightAddon = propRightAddon;\n  if (typeof rightAddon === \"undefined\" && icon) {\n    rightAddon = <IconRotator rotated={visible}>{icon}</IconRotator>;\n  }\n\n  const { ref: listboxRef, ...listboxProps } = getMenuProps(menuProps);\n  let listboxLabelledBy = menuProps[\"aria-labelledby\"];\n  const listboxLabel = menuProps[\"aria-label\"];\n  if (!listboxLabel && !listboxLabelledBy) {\n    listboxLabelledBy = labelId || comboboxId;\n  }\n\n  return (\n    <KeyboardMovementProvider value={movementContext}>\n      <TextFieldContainer\n        aria-labelledby={labelId}\n        {...remaining}\n        {...comboboxProps}\n        label={!!label}\n        theme={theme}\n        active={active || visible}\n        className={cnb(\"rmd-select-container\", className)}\n        rightAddon={rightAddon}\n      >\n        <SelectedOption\n          option={currentOption}\n          placeholder={placeholder}\n          disableAddon={disableOptionAddon}\n          {...selectedOptionProps}\n        />\n        <input\n          aria-hidden\n          id={inputId}\n          ref={inputRefCallback}\n          type=\"text\"\n          autoComplete={autoComplete}\n          name={name}\n          tabIndex={-1}\n          disabled={disabled}\n          required={required}\n          placeholder=\" \"\n          {...inputProps}\n          value={value}\n          defaultValue={defaultValue}\n          className={cnb(select({ theme }), textField())}\n          onChange={(event) => {\n            onChange(event as SelectChangeEvent<Value>);\n            if (typeof value !== \"undefined\") {\n              return;\n            }\n\n            const nextValue = event.currentTarget.value;\n            const nextOption = options.find((option) => option === nextValue);\n\n            setLocalValue(nextOption ?? initialValue.current);\n          }}\n        />\n        {label && (\n          <span\n            {...labelProps}\n            id={labelId}\n            className={labelStyles({\n              dense,\n              error,\n              disabled,\n              active: active || visible,\n              floating: true,\n              floatingActive: !!placeholder || !!currentOption,\n              className: labelProps.className,\n            })}\n          >\n            {label}\n          </span>\n        )}\n      </TextFieldContainer>\n      <Listbox\n        {...listboxProps}\n        aria-label={listboxLabel}\n        aria-labelledby={listboxLabelledBy as string}\n        nodeRef={listboxRef}\n        value={currentValue}\n        setValue={useCallback(\n          (option: \"\" | Value) => {\n            triggerManualChangeEvent(inputRef.current, option);\n          },\n          [inputRef]\n        )}\n        selectedIconAfter={selectedIconAfter}\n        disableSelectedIcon={disableSelectedIcon}\n      >\n        {children}\n      </Listbox>\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["cnb","useCallback","useRef","useState","IconRotator","getIcon","KeyboardMovementProvider","useEnsuredId","useEnsuredRef","Listbox","SelectedOption","TextFieldContainer","getFormConfig","label","labelStyles","select","extractOptionsFromChildren","textField","useFormReset","useSelectCombobox","triggerManualChangeEvent","EMPTY_STRING","noop","Select","props","id","form","autoCompleteValue","autoComplete","name","className","onClick","onFocus","onKeyDown","inputRef","propInputRef","inputProps","containerRef","placeholder","menuProps","labelProps","selectedOptionProps","icon","propIcon","value","defaultValue","theme","propTheme","onChange","rightAddon","propRightAddon","active","required","selectedIconAfter","disableOptionAddon","disableSelectedIcon","children","remaining","dense","error","disabled","comboboxId","inputId","selectLabelId","labelId","undefined","localValue","setLocalValue","currentValue","initialValue","options","currentOption","visible","comboboxProps","movementContext","getMenuProps","values","popupId","popupRef","ref","comboboxRef","inputRefCallback","elementRef","current","rotated","listboxRef","listboxProps","listboxLabelledBy","listboxLabel","aria-labelledby","option","disableAddon","input","aria-hidden","type","tabIndex","event","nextValue","currentTarget","nextOption","find","span","floating","floatingActive","aria-label","nodeRef","setValue"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAOEC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAGf,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,wBAAwB,QAAQ,6CAA6C;AAMtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,OAAO,QAAQ,eAAe;AACvC,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SACEC,kBAAkB,QAEb,0BAA0B;AACjC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,SAASC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,0BAA0B,QAAQ,mBAAmB;AAC9D,SAASC,SAAS,QAAQ,uBAAuB;AAEjD,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,wBAAwB,QAAQ,aAAa;AAEtD,MAAMC,eAAe;AACrB,MAAMC,OAAO;AACX,aAAa;AACf;AA0KA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASC,OACdC,KAAuE;IAEvE,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,YAAY,EACtBC,UAAU,EACVC,YAAY,EACZC,WAAW,EACXC,YAAY,CAAC,CAAC,EACd1B,KAAK,EACL2B,aAAa,CAAC,CAAC,EACfC,mBAAmB,EACnBC,MAAMC,QAAQ,EACdC,KAAK,EACLC,YAAY,EACZC,OAAOC,SAAS,EAChBC,WAAW1B,IAAI,EACf2B,YAAYC,cAAc,EAC1BC,SAAS,KAAK,EACdC,QAAQ,EACRC,oBAAoB,KAAK,EACzBC,qBAAqB,KAAK,EAC1BC,sBAAsB,KAAK,EAC3BC,QAAQ,EACR,GAAGC,WACJ,GAAGjC;IACJ,MAAM,EAAEkC,KAAK,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGpC;IAEnC,MAAMqC,aAAatD,aAAakB,IAAI;IACpC,MAAMqC,UAAUvD,aAAa6B,YAAYX,IAAI;IAC7C,MAAMsC,gBAAgBxD,aAAaiC,WAAWf,EAAE,EAAE;IAClD,MAAMuC,UAAUnD,QAAQkD,gBAAgBE;IAExC,MAAM,CAACC,YAAYC,cAAc,GAAGhE,SAAS;QAC3C,IAAI,OAAO0C,iBAAiB,aAAa;YACvC,OAAOA;QACT;QAEA,OAAO,OAAOD,UAAU,cAAcA,QAAQvB;IAChD;IACA,MAAM+C,eAAe,OAAOxB,UAAU,cAAcsB,aAAatB;IACjE,MAAMyB,eAAenE,OAAOkE;IAC5B,MAAM,EAAEE,OAAO,EAAEC,aAAa,EAAE,GAAGvD,2BACjCwC,UACAY;IAGF,MAAM,EAAEI,OAAO,EAAEC,aAAa,EAAEC,eAAe,EAAEC,YAAY,EAAE,GAC7DxD,kBAAkB;QAChBO;QACAkB,OAAOwB;QACPQ,QAAQN;QACRvC;QACAC;QACAC;QACA2B;QACAiB,SAAStC,UAAUd,EAAE;QACrBqD,UAAUvC,UAAUwC,GAAG;QACvBlB;QACAmB,aAAa3C;IACf;IAEF,MAAM,CAACH,UAAU+C,iBAAiB,GAAGzE,cAAc2B;IACnDjB,aAAa;QACXQ;QACAwD,YAAYhD;QACZW,cAAcwB,aAAac,OAAO;IACpC;IAEA,MAAMzC,OAAOrC,QAAQ,YAAYsC;IACjC,MAAMG,QAAQlC,cAAc,SAASmC;IACrC,IAAIE,aAAaC;IACjB,IAAI,OAAOD,eAAe,eAAeP,MAAM;QAC7CO,2BAAa,KAAC7C;YAAYgF,SAASZ;sBAAU9B;;IAC/C;IAEA,MAAM,EAAEqC,KAAKM,UAAU,EAAE,GAAGC,cAAc,GAAGX,aAAapC;IAC1D,IAAIgD,oBAAoBhD,SAAS,CAAC,kBAAkB;IACpD,MAAMiD,eAAejD,SAAS,CAAC,aAAa;IAC5C,IAAI,CAACiD,gBAAgB,CAACD,mBAAmB;QACvCA,oBAAoBvB,WAAWH;IACjC;IAEA,qBACE,MAACvD;QAAyBsC,OAAO8B;;0BAC/B,MAAC/D;gBACC8E,mBAAiBzB;gBAChB,GAAGP,SAAS;gBACZ,GAAGgB,aAAa;gBACjB5D,OAAO,CAAC,CAACA;gBACTiC,OAAOA;gBACPK,QAAQA,UAAUqB;gBAClB1C,WAAW9B,IAAI,wBAAwB8B;gBACvCmB,YAAYA;;kCAEZ,KAACvC;wBACCgF,QAAQnB;wBACRjC,aAAaA;wBACbqD,cAAcrC;wBACb,GAAGb,mBAAmB;;kCAEzB,KAACmD;wBACCC,aAAW;wBACXpE,IAAIqC;wBACJiB,KAAKE;wBACLa,MAAK;wBACLlE,cAAcA;wBACdC,MAAMA;wBACNkE,UAAU,CAAC;wBACXnC,UAAUA;wBACVR,UAAUA;wBACVd,aAAY;wBACX,GAAGF,UAAU;wBACdQ,OAAOA;wBACPC,cAAcA;wBACdf,WAAW9B,IAAIe,OAAO;4BAAE+B;wBAAM,IAAI7B;wBAClC+B,UAAU,CAACgD;4BACThD,SAASgD;4BACT,IAAI,OAAOpD,UAAU,aAAa;gCAChC;4BACF;4BAEA,MAAMqD,YAAYD,MAAME,aAAa,CAACtD,KAAK;4BAC3C,MAAMuD,aAAa7B,QAAQ8B,IAAI,CAAC,CAACV,SAAWA,WAAWO;4BAEvD9B,cAAcgC,cAAc9B,aAAac,OAAO;wBAClD;;oBAEDtE,uBACC,KAACwF;wBACE,GAAG7D,UAAU;wBACdf,IAAIuC;wBACJlC,WAAWhB,YAAY;4BACrB4C;4BACAC;4BACAC;4BACAT,QAAQA,UAAUqB;4BAClB8B,UAAU;4BACVC,gBAAgB,CAAC,CAACjE,eAAe,CAAC,CAACiC;4BACnCzC,WAAWU,WAAWV,SAAS;wBACjC;kCAECjB;;;;0BAIP,KAACJ;gBACE,GAAG6E,YAAY;gBAChBkB,cAAYhB;gBACZC,mBAAiBF;gBACjBkB,SAASpB;gBACTzC,OAAOwB;gBACPsC,UAAUzG,YACR,CAACyF;oBACCtE,yBAAyBc,SAASiD,OAAO,EAAEO;gBAC7C,GACA;oBAACxD;iBAAS;gBAEZmB,mBAAmBA;gBACnBE,qBAAqBA;0BAEpBC;;;;AAIT"}
+{"version":3,"sources":["../../src/form/Select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n  type ChangeEvent,\n  type HTMLAttributes,\n  type InputHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { type BoxProps } from \"../box/Box.js\";\nimport { IconRotator } from \"../icon/IconRotator.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type MenuProps } from \"../menu/Menu.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type LabelA11y,\n  type PropsWithRef,\n  type RequireAtLeastOne,\n} from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { Listbox } from \"./Listbox.js\";\nimport { type OptionProps } from \"./Option.js\";\nimport { SelectedOption } from \"./SelectedOption.js\";\nimport {\n  TextFieldContainer,\n  type TextFieldContainerProps,\n} from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label as labelStyles } from \"./labelStyles.js\";\nimport { select } from \"./selectStyles.js\";\nimport { extractOptionsFromChildren } from \"./selectUtils.js\";\nimport { textField } from \"./textFieldStyles.js\";\nimport { type UserAgentAutocompleteProps } from \"./types.js\";\nimport { useFormReset } from \"./useFormReset.js\";\nimport { useSelectCombobox } from \"./useSelectCombobox.js\";\nimport { triggerManualChangeEvent } from \"./utils.js\";\n\nconst EMPTY_STRING = \"\" as const;\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.5.0\n */\nexport interface GetSelectedOptionChildrenOptions<\n  Value extends string = string,\n> {\n  value: \"\" | Value;\n\n  /**\n   * The option will be undefined if there is no value or matching option.\n   */\n  option: OptionProps | undefined;\n\n  /**\n   * This is a pass-through of the {@link SelectProps.placeholder}\n   */\n  placeholder?: ReactNode;\n\n  /**\n   * This is a pass-through of the {@link SelectProps.selectedOptionProps}\n   */\n  children?: ReactNode;\n}\n\n/**\n * @since 6.5.0\n */\nconst defaultGetSelectedOptionChildren = (\n  options: GetSelectedOptionChildrenOptions\n): ReactNode => {\n  const { children, option, placeholder } = options;\n\n  return children ?? (option?.children || placeholder);\n};\n\n/**\n * This is a convenience type for casting the `event.currentTarget.value` of a\n * `Select`'s change event to be union of available values.\n *\n * Note: The change event does not provide any sort of validation on the value\n * so automation tools like Cypress, Playwright, or Selenium might set an\n * invalid value. This also does not work for numbers, so you will need to\n * implement that yourself.\n *\n * @example Simple Usage\n * ```tsx\n * import { Select, type SelectChangeEvent } from \"@react-md/core/form/Select\";\n * import { Option } from \"@react-md/core/form/Option\";\n * import type { ReactElement } from \"react\";\n *\n * type Value = \"\" | \"a\" | \"b\" | \"c\" | \"d\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState<Value>(\"\");\n *\n *   const handleChange = (event: SelectChangeEvent<Value>): void => {\n *     // No type error!\n *     // `event.currentTarget.value`'s type is `Value` instead of a generic `string`\n *     setValue(event.currentTarget.value);\n *   };\n *\n *   return (\n *     <Select\n *       label=\"Label\"\n *       value={value}\n *       onChange={handleChange}\n *     >\n *       <Option value=\"a\">First</Option>\n *       <Option value=\"b\">Second</Option>\n *       <Option value=\"c\">Third</Option>\n *       <Option value=\"d\">Fourth</Option>\n *     </Select>\n *   );\n * }\n * ```\n * @since 6.0.0\n */\nexport type SelectChangeEvent<Value extends string> =\n  ChangeEvent<HTMLInputElement> & { currentTarget: { value: Value } };\n\n/**\n * @since 6.0.0 Rewritten with a new API.\n */\nexport interface SelectProps<Value extends string>\n  extends\n    Omit<TextFieldContainerProps, \"label\">,\n    Pick<InputHTMLAttributes<HTMLInputElement>, \"form\" | \"required\">,\n    UserAgentAutocompleteProps {\n  /**\n   * @defaultValue `\"select-\" + useId()`\n   */\n  id?: string;\n\n  /**\n   * Optional placeholder text or element to render while no options have been\n   * selected.\n   */\n  placeholder?: ReactNode;\n\n  /**\n   * Set this to a custom dropdown icon or `null` to not render a dropdown icon.\n   *\n   * @defaultValue `getIcon(\"dropdown\")`\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this value to fully control the value of the select component. The\n   * {@link onChange} handler **must** also be provided if this prop exists.\n   */\n  value?: Value;\n\n  /**\n   * An optional default value when the value of the select component is\n   * uncontrolled.\n   *\n   * @defaultValue `\"\"`\n   */\n  defaultValue?: Value;\n\n  /** @see {@link SelectChangeEvent} */\n  onChange?: (event: SelectChangeEvent<Value>) => void;\n\n  /**\n   * An optional floating label to display like other form fields.\n   */\n  label?: ReactNode;\n\n  /**\n   * Optional props to pass to the `<span>` that surrounds the {@link label}\n   */\n  labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n  /**\n   * An optional ref to pass to the hidden `<input type=\"text\" />` element that\n   * stores the current value. This is really only useful if you'd like to keep\n   * this component uncontrolled and access the value through\n   * `inputRef.current.value`.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n\n  /**\n   * A ref for the container `<div>` element.\n   */\n  containerRef?: Ref<HTMLDivElement>;\n\n  /**\n   * Any additional props to provide to the `Menu` component that renders all\n   * the `Option`s.\n   *\n   * The menu will always have these default values unless explicity\n   * overwritten by this prop:\n   *\n   * - `aria-labelledby={label ? labelId : id}` -- this will be undefined if\n   *   `aria-label` is provided\n   * - `anchor={BELOW_CENTER_ANCHOR}`\n   * - `width=\"min\"`\n   */\n  menuProps?: PropsWithRef<\n    Omit<MenuProps, \"visible\" | \"onRequestClose\" | \"fixedTo\">\n  >;\n\n  /**\n   * Any additional props to pass to the div that contains the current visible\n   * option.\n   */\n  selectedOptionProps?: BoxProps;\n\n  /**\n   * Set this to `true` if all the `Option` components should display the\n   * selected icon after the children instead of before.\n   *\n   * @see {@link disableSelectedIcon} to remove the selected icon instead.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Set this to `true` to prevent the current option from rendering the\n   * `leftAddon` in the `TextFieldContainer`.\n   *\n   * @defaultValue `false`\n   */\n  disableOptionAddon?: boolean;\n\n  /**\n   * Set this to `true` to update all the `Option` components to no longer\n   * render an icon while selected.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * @since 6.5.0\n   * @defaultValue `({ children, option, placeholder }) => children ?? (option?.children || placeholder)`\n   */\n  getSelectedOptionChildren?: (\n    options: GetSelectedOptionChildrenOptions<Value>\n  ) => ReactNode;\n\n  /**\n   * This should be the available `Option`s for the select to choose from. It\n   * can also contain `OptGroup` or any other elements but only clicking on an\n   * `Option` component will update the value.\n   */\n  children: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Option } from \"@react-md/core/form/Option\";\n * import { Select } from \"@react-md/core/form/Select\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"\");\n *\n *   return (\n *     <Select\n *       label=\"Select\"\n *       value={value}\n *       onChange={(event) => setValue(event.currentTarget.value)}\n *       placeholder=\"Select a value\"\n *     >\n *       <Option value=\"a\">Option 1</Option>\n *       <Option value=\"b\">Option 2</Option>\n *       <Option value=\"c\">Option 3</Option>\n *       <Option value=\"d\">Option 4</Option>\n *     </Select>\n *   );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/select | Select Demos}\n * @since 6.0.0 Rewritten with a new API.\n */\nexport function Select<Value extends string>(\n  props: RequireAtLeastOne<SelectProps<Value>, \"label\" | keyof LabelA11y>\n): ReactElement {\n  const {\n    id,\n    form,\n    autoCompleteValue,\n    autoComplete = autoCompleteValue,\n    name = autoCompleteValue,\n    className,\n    onClick,\n    onFocus,\n    onKeyDown,\n    inputRef: propInputRef,\n    inputProps,\n    containerRef,\n    placeholder,\n    menuProps = {},\n    label,\n    labelProps = {},\n    selectedOptionProps,\n    getSelectedOptionChildren = defaultGetSelectedOptionChildren,\n    icon: propIcon,\n    value,\n    defaultValue,\n    theme: propTheme,\n    onChange = noop,\n    rightAddon: propRightAddon,\n    active = false,\n    required,\n    selectedIconAfter = false,\n    disableOptionAddon = false,\n    disableSelectedIcon = false,\n    children,\n    ...remaining\n  } = props;\n  const { dense, error, disabled } = props;\n\n  const comboboxId = useEnsuredId(id, \"select\");\n  const inputId = useEnsuredId(inputProps?.id, \"select-value\");\n  const selectLabelId = useEnsuredId(labelProps.id, \"select-label\");\n  const labelId = label ? selectLabelId : undefined;\n\n  const [localValue, setLocalValue] = useState(() => {\n    if (typeof defaultValue !== \"undefined\") {\n      return defaultValue;\n    }\n\n    return typeof value !== \"undefined\" ? value : EMPTY_STRING;\n  });\n  const currentValue = typeof value === \"undefined\" ? localValue : value;\n  const initialValue = useRef(currentValue);\n  const { options, currentOption } = extractOptionsFromChildren(\n    children,\n    currentValue\n  );\n\n  const { visible, comboboxProps, movementContext, getMenuProps } =\n    useSelectCombobox({\n      form,\n      value: currentValue,\n      values: options,\n      onClick,\n      onFocus,\n      onKeyDown,\n      disabled,\n      popupId: menuProps.id,\n      popupRef: menuProps.ref,\n      comboboxId,\n      comboboxRef: containerRef,\n    });\n\n  const [inputRef, inputRefCallback] = useEnsuredRef(propInputRef);\n  useFormReset({\n    form,\n    elementRef: inputRef,\n    defaultValue: initialValue.current,\n  });\n\n  const icon = getIcon(\"dropdown\", propIcon);\n  const theme = getFormConfig(\"theme\", propTheme);\n  let rightAddon = propRightAddon;\n  if (typeof rightAddon === \"undefined\" && icon) {\n    rightAddon = <IconRotator rotated={visible}>{icon}</IconRotator>;\n  }\n\n  const { ref: listboxRef, ...listboxProps } = getMenuProps(menuProps);\n  let listboxLabelledBy = menuProps[\"aria-labelledby\"];\n  const listboxLabel = menuProps[\"aria-label\"];\n  if (!listboxLabel && !listboxLabelledBy) {\n    listboxLabelledBy = labelId || comboboxId;\n  }\n\n  return (\n    <KeyboardMovementProvider value={movementContext}>\n      <TextFieldContainer\n        aria-labelledby={labelId}\n        {...remaining}\n        {...comboboxProps}\n        label={!!label}\n        theme={theme}\n        active={active || visible}\n        className={cnb(\"rmd-select-container\", className)}\n        rightAddon={rightAddon}\n      >\n        <SelectedOption\n          option={currentOption}\n          disableAddon={disableOptionAddon}\n          {...selectedOptionProps}\n        >\n          {getSelectedOptionChildren({\n            value: currentValue,\n            option: currentOption,\n            placeholder,\n            children: selectedOptionProps?.children,\n          })}\n        </SelectedOption>\n        <input\n          aria-hidden\n          id={inputId}\n          ref={inputRefCallback}\n          type=\"text\"\n          autoComplete={autoComplete}\n          name={name}\n          tabIndex={-1}\n          disabled={disabled}\n          required={required}\n          placeholder=\" \"\n          {...inputProps}\n          value={value}\n          defaultValue={defaultValue}\n          className={cnb(select({ theme }), textField())}\n          onChange={(event) => {\n            onChange(event as SelectChangeEvent<Value>);\n            if (typeof value !== \"undefined\") {\n              return;\n            }\n\n            const nextValue = event.currentTarget.value;\n            const nextOption = options.find((option) => option === nextValue);\n\n            setLocalValue(nextOption ?? initialValue.current);\n          }}\n        />\n        {label && (\n          <span\n            {...labelProps}\n            id={labelId}\n            className={labelStyles({\n              dense,\n              error,\n              disabled,\n              active: active || visible,\n              floating: true,\n              floatingActive: !!placeholder || !!currentOption,\n              className: labelProps.className,\n            })}\n          >\n            {label}\n          </span>\n        )}\n      </TextFieldContainer>\n      <Listbox\n        {...listboxProps}\n        aria-label={listboxLabel}\n        aria-labelledby={listboxLabelledBy as string}\n        nodeRef={listboxRef}\n        value={currentValue}\n        setValue={useCallback(\n          (option: \"\" | Value) => {\n            triggerManualChangeEvent(inputRef.current, option);\n          },\n          [inputRef]\n        )}\n        selectedIconAfter={selectedIconAfter}\n        disableSelectedIcon={disableSelectedIcon}\n      >\n        {children}\n      </Listbox>\n    </KeyboardMovementProvider>\n  );\n}\n"],"names":["cnb","useCallback","useRef","useState","IconRotator","getIcon","KeyboardMovementProvider","useEnsuredId","useEnsuredRef","Listbox","SelectedOption","TextFieldContainer","getFormConfig","label","labelStyles","select","extractOptionsFromChildren","textField","useFormReset","useSelectCombobox","triggerManualChangeEvent","EMPTY_STRING","noop","defaultGetSelectedOptionChildren","options","children","option","placeholder","Select","props","id","form","autoCompleteValue","autoComplete","name","className","onClick","onFocus","onKeyDown","inputRef","propInputRef","inputProps","containerRef","menuProps","labelProps","selectedOptionProps","getSelectedOptionChildren","icon","propIcon","value","defaultValue","theme","propTheme","onChange","rightAddon","propRightAddon","active","required","selectedIconAfter","disableOptionAddon","disableSelectedIcon","remaining","dense","error","disabled","comboboxId","inputId","selectLabelId","labelId","undefined","localValue","setLocalValue","currentValue","initialValue","currentOption","visible","comboboxProps","movementContext","getMenuProps","values","popupId","popupRef","ref","comboboxRef","inputRefCallback","elementRef","current","rotated","listboxRef","listboxProps","listboxLabelledBy","listboxLabel","aria-labelledby","disableAddon","input","aria-hidden","type","tabIndex","event","nextValue","currentTarget","nextOption","find","span","floating","floatingActive","aria-label","nodeRef","setValue"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAOEC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAGf,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,wBAAwB,QAAQ,6CAA6C;AAMtF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,OAAO,QAAQ,eAAe;AAEvC,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SACEC,kBAAkB,QAEb,0BAA0B;AACjC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,SAASC,WAAW,QAAQ,mBAAmB;AACxD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,0BAA0B,QAAQ,mBAAmB;AAC9D,SAASC,SAAS,QAAQ,uBAAuB;AAEjD,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,wBAAwB,QAAQ,aAAa;AAEtD,MAAMC,eAAe;AACrB,MAAMC,OAAO;AACX,aAAa;AACf;AA0BA;;CAEC,GACD,MAAMC,mCAAmC,CACvCC;IAEA,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,WAAW,EAAE,GAAGH;IAE1C,OAAOC,YAAaC,CAAAA,QAAQD,YAAYE,WAAU;AACpD;AAkLA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASC,OACdC,KAAuE;IAEvE,MAAM,EACJC,EAAE,EACFC,IAAI,EACJC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,UAAUC,YAAY,EACtBC,UAAU,EACVC,YAAY,EACZf,WAAW,EACXgB,YAAY,CAAC,CAAC,EACd9B,KAAK,EACL+B,aAAa,CAAC,CAAC,EACfC,mBAAmB,EACnBC,4BAA4BvB,gCAAgC,EAC5DwB,MAAMC,QAAQ,EACdC,KAAK,EACLC,YAAY,EACZC,OAAOC,SAAS,EAChBC,WAAW/B,IAAI,EACfgC,YAAYC,cAAc,EAC1BC,SAAS,KAAK,EACdC,QAAQ,EACRC,oBAAoB,KAAK,EACzBC,qBAAqB,KAAK,EAC1BC,sBAAsB,KAAK,EAC3BnC,QAAQ,EACR,GAAGoC,WACJ,GAAGhC;IACJ,MAAM,EAAEiC,KAAK,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGnC;IAEnC,MAAMoC,aAAa1D,aAAauB,IAAI;IACpC,MAAMoC,UAAU3D,aAAakC,YAAYX,IAAI;IAC7C,MAAMqC,gBAAgB5D,aAAaqC,WAAWd,EAAE,EAAE;IAClD,MAAMsC,UAAUvD,QAAQsD,gBAAgBE;IAExC,MAAM,CAACC,YAAYC,cAAc,GAAGpE,SAAS;QAC3C,IAAI,OAAO+C,iBAAiB,aAAa;YACvC,OAAOA;QACT;QAEA,OAAO,OAAOD,UAAU,cAAcA,QAAQ5B;IAChD;IACA,MAAMmD,eAAe,OAAOvB,UAAU,cAAcqB,aAAarB;IACjE,MAAMwB,eAAevE,OAAOsE;IAC5B,MAAM,EAAEhD,OAAO,EAAEkD,aAAa,EAAE,GAAG1D,2BACjCS,UACA+C;IAGF,MAAM,EAAEG,OAAO,EAAEC,aAAa,EAAEC,eAAe,EAAEC,YAAY,EAAE,GAC7D3D,kBAAkB;QAChBY;QACAkB,OAAOuB;QACPO,QAAQvD;QACRY;QACAC;QACAC;QACA0B;QACAgB,SAASrC,UAAUb,EAAE;QACrBmD,UAAUtC,UAAUuC,GAAG;QACvBjB;QACAkB,aAAazC;IACf;IAEF,MAAM,CAACH,UAAU6C,iBAAiB,GAAG5E,cAAcgC;IACnDtB,aAAa;QACXa;QACAsD,YAAY9C;QACZW,cAAcuB,aAAaa,OAAO;IACpC;IAEA,MAAMvC,OAAO1C,QAAQ,YAAY2C;IACjC,MAAMG,QAAQvC,cAAc,SAASwC;IACrC,IAAIE,aAAaC;IACjB,IAAI,OAAOD,eAAe,eAAeP,MAAM;QAC7CO,2BAAa,KAAClD;YAAYmF,SAASZ;sBAAU5B;;IAC/C;IAEA,MAAM,EAAEmC,KAAKM,UAAU,EAAE,GAAGC,cAAc,GAAGX,aAAanC;IAC1D,IAAI+C,oBAAoB/C,SAAS,CAAC,kBAAkB;IACpD,MAAMgD,eAAehD,SAAS,CAAC,aAAa;IAC5C,IAAI,CAACgD,gBAAgB,CAACD,mBAAmB;QACvCA,oBAAoBtB,WAAWH;IACjC;IAEA,qBACE,MAAC3D;QAAyB2C,OAAO4B;;0BAC/B,MAAClE;gBACCiF,mBAAiBxB;gBAChB,GAAGP,SAAS;gBACZ,GAAGe,aAAa;gBACjB/D,OAAO,CAAC,CAACA;gBACTsC,OAAOA;gBACPK,QAAQA,UAAUmB;gBAClBxC,WAAWnC,IAAI,wBAAwBmC;gBACvCmB,YAAYA;;kCAEZ,KAAC5C;wBACCgB,QAAQgD;wBACRmB,cAAclC;wBACb,GAAGd,mBAAmB;kCAEtBC,0BAA0B;4BACzBG,OAAOuB;4BACP9C,QAAQgD;4BACR/C;4BACAF,UAAUoB,qBAAqBpB;wBACjC;;kCAEF,KAACqE;wBACCC,aAAW;wBACXjE,IAAIoC;wBACJgB,KAAKE;wBACLY,MAAK;wBACL/D,cAAcA;wBACdC,MAAMA;wBACN+D,UAAU,CAAC;wBACXjC,UAAUA;wBACVP,UAAUA;wBACV9B,aAAY;wBACX,GAAGc,UAAU;wBACdQ,OAAOA;wBACPC,cAAcA;wBACdf,WAAWnC,IAAIe,OAAO;4BAAEoC;wBAAM,IAAIlC;wBAClCoC,UAAU,CAAC6C;4BACT7C,SAAS6C;4BACT,IAAI,OAAOjD,UAAU,aAAa;gCAChC;4BACF;4BAEA,MAAMkD,YAAYD,MAAME,aAAa,CAACnD,KAAK;4BAC3C,MAAMoD,aAAa7E,QAAQ8E,IAAI,CAAC,CAAC5E,SAAWA,WAAWyE;4BAEvD5B,cAAc8B,cAAc5B,aAAaa,OAAO;wBAClD;;oBAEDzE,uBACC,KAAC0F;wBACE,GAAG3D,UAAU;wBACdd,IAAIsC;wBACJjC,WAAWrB,YAAY;4BACrBgD;4BACAC;4BACAC;4BACAR,QAAQA,UAAUmB;4BAClB6B,UAAU;4BACVC,gBAAgB,CAAC,CAAC9E,eAAe,CAAC,CAAC+C;4BACnCvC,WAAWS,WAAWT,SAAS;wBACjC;kCAECtB;;;;0BAIP,KAACJ;gBACE,GAAGgF,YAAY;gBAChBiB,cAAYf;gBACZC,mBAAiBF;gBACjBiB,SAASnB;gBACTvC,OAAOuB;gBACPoC,UAAU3G,YACR,CAACyB;oBACCN,yBAAyBmB,SAAS+C,OAAO,EAAE5D;gBAC7C,GACA;oBAACa;iBAAS;gBAEZmB,mBAAmBA;gBACnBE,qBAAqBA;0BAEpBnC;;;;AAIT"}

package/dist/form/SelectedOption.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement } from "react";
 import { type BoxProps } from "../box/Box.js";
 import { type OptionProps } from "./Option.js";
 /**
@@ -7,7 +7,6 @@ import { type OptionProps } from "./Option.js";
  */
 export interface SelectedOptionProps extends BoxProps {
     option: OptionProps | undefined;
-    placeholder?: ReactNode;
     disableAddon: boolean;
 }
 /**

package/dist/form/SelectedOption.js

@@ -9,8 +9,8 @@ import { textField } from "./textFieldStyles.js";
  * @since 6.0.0
  * @internal
  */ export function SelectedOption(props) {
-    const { disableAddon, option, className, disableWrap = true, disablePadding = true, placeholder, ...remaining } = props;
-    let children = option?.children || placeholder;
+    const { disableAddon, option, className, disableWrap = true, disablePadding = true, ...remaining } = props;
+    let { children } = remaining;
     // when the children are a string or number, wrap it in additional span so
     // that overflow can be ellipsis-ed
     if (typeof children === "string" || typeof children === "number") {

package/dist/form/SelectedOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/SelectedOption.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement, type ReactNode } from \"react\";\n\nimport { Box, type BoxProps } from \"../box/Box.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type OptionProps } from \"./Option.js\";\nimport { textField } from \"./textFieldStyles.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface SelectedOptionProps extends BoxProps {\n  option: OptionProps | undefined;\n  placeholder?: ReactNode;\n  disableAddon: boolean;\n}\n\n/**\n * This component is used to render the current option.\n *\n * @since 6.0.0\n * @internal\n */\nexport function SelectedOption(props: SelectedOptionProps): ReactElement {\n  const {\n    disableAddon,\n    option,\n    className,\n    disableWrap = true,\n    disablePadding = true,\n    placeholder,\n    ...remaining\n  } = props;\n\n  let children = option?.children || placeholder;\n  // when the children are a string or number, wrap it in additional span so\n  // that overflow can be ellipsis-ed\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    children = (\n      <span className={cssUtils({ textOverflow: \"ellipsis\" })}>{children}</span>\n    );\n  }\n\n  return (\n    <Box\n      {...remaining}\n      className={cnb(\"rmd-selected-option\", textField(), className)}\n      disableWrap={disableWrap}\n      disablePadding={disablePadding}\n    >\n      {!disableAddon && option?.leftAddon}\n      {children}\n    </Box>\n  );\n}\n"],"names":["cnb","Box","cssUtils","textField","SelectedOption","props","disableAddon","option","className","disableWrap","disablePadding","placeholder","remaining","children","span","textOverflow","leftAddon"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAASC,GAAG,QAAuB,gBAAgB;AACnD,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,SAAS,QAAQ,uBAAuB;AAYjD;;;;;CAKC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,cAAc,IAAI,EAClBC,iBAAiB,IAAI,EACrBC,WAAW,EACX,GAAGC,WACJ,GAAGP;IAEJ,IAAIQ,WAAWN,QAAQM,YAAYF;IACnC,0EAA0E;IAC1E,mCAAmC;IACnC,IAAI,OAAOE,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChEA,yBACE,KAACC;YAAKN,WAAWN,SAAS;gBAAEa,cAAc;YAAW;sBAAKF;;IAE9D;IAEA,qBACE,MAACZ;QACE,GAAGW,SAAS;QACbJ,WAAWR,IAAI,uBAAuBG,aAAaK;QACnDC,aAAaA;QACbC,gBAAgBA;;YAEf,CAACJ,gBAAgBC,QAAQS;YACzBH;;;AAGP"}
+{"version":3,"sources":["../../src/form/SelectedOption.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type ReactElement } from \"react\";\n\nimport { Box, type BoxProps } from \"../box/Box.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { type OptionProps } from \"./Option.js\";\nimport { textField } from \"./textFieldStyles.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport interface SelectedOptionProps extends BoxProps {\n  option: OptionProps | undefined;\n  disableAddon: boolean;\n}\n\n/**\n * This component is used to render the current option.\n *\n * @since 6.0.0\n * @internal\n */\nexport function SelectedOption(props: SelectedOptionProps): ReactElement {\n  const {\n    disableAddon,\n    option,\n    className,\n    disableWrap = true,\n    disablePadding = true,\n    ...remaining\n  } = props;\n\n  let { children } = remaining;\n  // when the children are a string or number, wrap it in additional span so\n  // that overflow can be ellipsis-ed\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    children = (\n      <span className={cssUtils({ textOverflow: \"ellipsis\" })}>{children}</span>\n    );\n  }\n\n  return (\n    <Box\n      {...remaining}\n      className={cnb(\"rmd-selected-option\", textField(), className)}\n      disableWrap={disableWrap}\n      disablePadding={disablePadding}\n    >\n      {!disableAddon && option?.leftAddon}\n      {children}\n    </Box>\n  );\n}\n"],"names":["cnb","Box","cssUtils","textField","SelectedOption","props","disableAddon","option","className","disableWrap","disablePadding","remaining","children","span","textOverflow","leftAddon"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAGhC,SAASC,GAAG,QAAuB,gBAAgB;AACnD,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,SAASC,SAAS,QAAQ,uBAAuB;AAWjD;;;;;CAKC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,YAAY,EACZC,MAAM,EACNC,SAAS,EACTC,cAAc,IAAI,EAClBC,iBAAiB,IAAI,EACrB,GAAGC,WACJ,GAAGN;IAEJ,IAAI,EAAEO,QAAQ,EAAE,GAAGD;IACnB,0EAA0E;IAC1E,mCAAmC;IACnC,IAAI,OAAOC,aAAa,YAAY,OAAOA,aAAa,UAAU;QAChEA,yBACE,KAACC;YAAKL,WAAWN,SAAS;gBAAEY,cAAc;YAAW;sBAAKF;;IAE9D;IAEA,qBACE,MAACX;QACE,GAAGU,SAAS;QACbH,WAAWR,IAAI,uBAAuBG,aAAaK;QACnDC,aAAaA;QACbC,gBAAgBA;;YAEf,CAACJ,gBAAgBC,QAAQQ;YACzBH;;;AAGP"}

package/dist/form/_input-toggle.scss

@@ -91,13 +91,14 @@ $large-size: 2rem !default;
       @include hidden-input-styles(true);
 
       .rmd-input-toggle {
+        $focus-selector: "&:has(:focus-visible)";
+        @if utils.$disable-has-selectors or utils.$disable-focus-visible {
+          $focus-selector: "&:focus-within";
+        }
+
         @include icon.set-var(color, currentcolor);
         @include interaction.surface(
-          $focus-selector: if(
-              utils.$disable-has-selectors or utils.$disable-focus-visible,
-              "&:focus-within",
-              "&:has(:focus-visible)"
-            ),
+          $focus-selector: $focus-selector,
           $keyboard-only-focus: utils.$disable-has-selectors or
             utils.$disable-focus-visible,
           $disabled-selector: "&--disabled",

package/dist/form/_label.scss

@@ -151,8 +151,8 @@ $variables: (
   @include use-var(background-color, active-background-color);
   @include use-var(padding, active-padding);
 
-  transform: scale($floating-scale)
-    translate(get-var(floating-active-x), get-var(floating-active-y));
+  transform: translate(get-var(floating-active-x), get-var(floating-active-y))
+    scale($floating-scale);
   // need to add the `transform-origin` because of the scaling applied.
   // it'll change the position based on the size of the label otherwise
   transform-origin: 0 0;

package/dist/form/_legend.scss

@@ -28,33 +28,42 @@ $disable-floating: false !default;
         @if not $disable-floating {
           &--floating {
             @include label.set-var(floating-active-y, -50%);
-            @include label.set-var(active-padding, 0 label.$floating-padding);
-            @include label.set-var(
-              active-background-color,
-              theme.theme-get-var(background-color)
-            );
             @include label.set-var(
               floating-active-x,
               text-field.get-var(padding-left)
             );
+
+            .rmd-fieldset:has(:focus-within) & {
+              @include label.active-styles;
+            }
           }
 
           @if not base.$form-disable-filled-theme {
-            @include text-field.set-var(
-              padding-left,
-              text-field.get-var(filled-padding)
-            );
+            &--floating-filled {
+              @include text-field.set-var(
+                padding-left,
+                text-field.get-var(filled-padding)
+              );
+              @include label.set-var(floating-active-y, -100%);
+            }
           }
 
           @if not base.$form-disable-underlined-theme {
-            @include text-field.set-var(
-              padding-left,
-              text-field.get-var(underlined-padding)
-            );
+            &--floating-underline {
+              @include text-field.set-var(
+                padding-left,
+                text-field.get-var(underlined-padding)
+              );
+            }
           }
 
           @if not base.$form-disable-outlined-theme {
             &--floating-outline {
+              @include label.set-var(active-padding, 0 label.$floating-padding);
+              @include label.set-var(
+                active-background-color,
+                theme.theme-get-var(background-color)
+              );
               @include text-field.set-var(
                 padding-left,
                 text-field.get-var(outlined-padding)

package/dist/form/_slider.scss

@@ -634,11 +634,13 @@ $variables: (
       }
 
       .rmd-slider-thumb {
-        @include use-var(
-          background-color,
-          if($track-color, color, active-color),
-          if($track-color, theme.theme-color-var-fallback($track-color), null)
-        );
+        $color-name: active-color;
+        $color-fallback: null;
+        @if $track-color {
+          $color-name: color;
+          $color-fallback: theme.theme-color-var-fallback($track-color);
+        }
+        @include use-var(background-color, $color-name, $color-fallback);
 
         border-radius: $thumb-border-radius;
         height: $thumb-size;

package/dist/form/_switch.scss

@@ -80,10 +80,10 @@ $track-light-background-color: colors.$grey-400 !default;
 
 /// The background color to apply to the `SwitchTrack` in the dark theme.
 /// @type Color
+// prettier-ignore
 $track-dark-background-color: if(
-  theme.$disable-dark-elevation,
-  $track-light-background-color,
-  map.get(theme.$dark-elevation-colors, 24)
+  sass(theme.$disable-dark-elevation): $track-light-background-color;
+  else: map.get(theme.$dark-elevation-colors, 24)
 ) !default;
 
 /// The default background color to apply to the `SwitchTrack`.
@@ -274,8 +274,10 @@ $variables: (track-background-color, ball-background-color);
             z-index: 0;
           }
 
-          $active-selector: ".rmd-switch__input:checked + &" +
-            if($disable-menu-item-switch, "", ", &--active");
+          $active-selector: ".rmd-switch__input:checked + &";
+          @if not $disable-menu-item-switch {
+            $active-selector: $active-selector + ", &--active";
+          }
 
           #{$active-selector} {
             $offset: $ball-size + $ball-offset;

package/dist/form/_text-field.scss

@@ -271,6 +271,11 @@ $variables: (
 /// @param {any} fallback [null] - An optional fallback value
 /// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
+  @if $name == underlined-padding and not $underlined-padding and not $fallback
+  {
+    $fallback: 0px;
+  }
+
   $var: utils.get-var-name($variables, $name, "text-field");
   @if $fallback {
     @return var(#{$var}, #{$fallback});
@@ -502,17 +507,14 @@ $variables: (
         &--filled {
           @include theme.theme-set-var(background-color, get-var(filled-color));
           @include theme.theme-use-var(background-color);
-          @include set-var(padding-left, $filled-padding);
-          @include set-var(padding-right, $filled-padding);
+          @include set-var(padding-left, get-var(filled-padding));
+          @include set-var(padding-right, get-var(filled-padding));
           @if not label.$disable-floating {
-            @include label.set-var(
-              floating-active-x,
-              $filled-padding + label.$floating-padding
-            );
+            @include label.set-var(floating-active-x, get-var(filled-padding));
           }
 
           @if not $disable-addon {
-            @include set-var(addon-left-offset, $filled-padding);
+            @include set-var(addon-left-offset, get-var(filled-padding));
           }
         }
       }
@@ -529,8 +531,8 @@ $variables: (
           border-bottom-width: $border-width;
 
           @if $underlined-padding {
-            @include set-var(padding-left, $underlined-padding);
-            @include set-var(padding-right, $underlined-padding);
+            @include set-var(padding-left, get-var(underlined-padding));
+            @include set-var(padding-right, get-var(underlined-padding));
           }
 
           &::after {
@@ -594,8 +596,8 @@ $variables: (
 
         @if not $disable-addon {
           $addon-offset: calc(
-            #{icon.get-var(size) +
-              if($underlined-padding, "#{$underlined-padding} + ", "")} +
+            icon.get-var(size) +
+              get-var(underlined-padding) +
               $underlined-label-left-offset *
               2
           );

package/dist/form/defaultGetSelectedOptionChildren.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/form/getSelectedOptionChildren.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/form/legendStyles.d.ts

@@ -2,7 +2,7 @@ import { type FormTheme, type LabelClassNameOptions } from "./types.js";
 /**
  * @since 6.4.0
  */
-export type LegendLabelClassNameOptions = Pick<LabelClassNameOptions, "active" | "gap" | "dense" | "error" | "stacked" | "disabled" | "reversed">;
+export type LegendLabelClassNameOptions = Pick<LabelClassNameOptions, "active" | "gap" | "error" | "stacked" | "disabled" | "reversed">;
 /**
  * @since 6.4.0
  */

package/dist/form/legendStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/legendStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label } from \"./labelStyles.js\";\nimport { type FormTheme, type LabelClassNameOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-legend\");\n\n/**\n * @since 6.4.0\n */\nexport type LegendLabelClassNameOptions = Pick<\n  LabelClassNameOptions,\n  \"active\" | \"gap\" | \"dense\" | \"error\" | \"stacked\" | \"disabled\" | \"reversed\"\n>;\n\n/**\n * @since 6.4.0\n */\nexport interface LegendClassNameOptions extends LegendLabelClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n\n  /**\n   * Set this to `true` to make the `<legend>` have the styles of a floating label.\n   * This requires the parent `<fieldset>` to have the `floatingLegend` flag\n   * enabled.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link FormTheme}\n   * @defaultValue `getFormConfig(\"theme\")`\n   */\n  theme?: FormTheme;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.active}\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.gap}\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.disabled}\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.dense}\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.error}\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.stacked}\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.reversed}\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport function legend(options: LegendClassNameOptions = {}): string {\n  const {\n    className,\n    srOnly,\n    floating,\n    theme = getFormConfig(\"theme\"),\n    ...labelOptions\n  } = options;\n\n  return cnb(\n    styles({\n      floating,\n      \"floating-filled\": floating && theme === \"filled\",\n      \"floating-underline\": floating && theme === \"underline\",\n      \"floating-outline\": floating && theme === \"outline\",\n    }),\n    floating &&\n      label({\n        ...labelOptions,\n        floating: true,\n        floatingActive: true,\n      }),\n    cssUtils({ srOnly }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","getFormConfig","label","styles","legend","options","className","srOnly","floating","theme","labelOptions","floatingActive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAGzC,MAAMC,SAASH,IAAI;AA+FnB;;CAEC,GACD,OAAO,SAASI,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,QAAQR,cAAc,QAAQ,EAC9B,GAAGS,cACJ,GAAGL;IAEJ,OAAOP,IACLK,OAAO;QACLK;QACA,mBAAmBA,YAAYC,UAAU;QACzC,sBAAsBD,YAAYC,UAAU;QAC5C,oBAAoBD,YAAYC,UAAU;IAC5C,IACAD,YACEN,MAAM;QACJ,GAAGQ,YAAY;QACfF,UAAU;QACVG,gBAAgB;IAClB,IACFZ,SAAS;QAAEQ;IAAO,IAClBD;AAEJ"}
+{"version":3,"sources":["../../src/form/legendStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { label } from \"./labelStyles.js\";\nimport { type FormTheme, type LabelClassNameOptions } from \"./types.js\";\n\nconst styles = bem(\"rmd-legend\");\n\n/**\n * @since 6.4.0\n */\nexport type LegendLabelClassNameOptions = Pick<\n  LabelClassNameOptions,\n  \"active\" | \"gap\" | \"error\" | \"stacked\" | \"disabled\" | \"reversed\"\n>;\n\n/**\n * @since 6.4.0\n */\nexport interface LegendClassNameOptions extends LegendLabelClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `false`\n   */\n  srOnly?: boolean;\n\n  /**\n   * Set this to `true` to make the `<legend>` have the styles of a floating label.\n   * This requires the parent `<fieldset>` to have the `floatingLegend` flag\n   * enabled.\n   *\n   * @defaultValue `false`\n   */\n  floating?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link FormTheme}\n   * @defaultValue `getFormConfig(\"theme\")`\n   */\n  theme?: FormTheme;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.active}\n   * @defaultValue `false`\n   */\n  active?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.gap}\n   * @defaultValue `false`\n   */\n  gap?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.disabled}\n   * @defaultValue `false`\n   */\n  disabled?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.dense}\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.error}\n   * @defaultValue `false`\n   */\n  error?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.stacked}\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n\n  /**\n   * This will only apply if {@link floating} is `true`.\n   *\n   * @see {@link LabelClassNameOptions.reversed}\n   * @defaultValue `false`\n   */\n  reversed?: boolean;\n}\n\n/**\n * @since 6.4.0\n */\nexport function legend(options: LegendClassNameOptions = {}): string {\n  const {\n    className,\n    srOnly,\n    floating,\n    theme = getFormConfig(\"theme\"),\n    ...labelOptions\n  } = options;\n\n  return cnb(\n    styles({\n      floating,\n      \"floating-filled\": floating && theme === \"filled\",\n      \"floating-underline\": floating && theme === \"underline\",\n      \"floating-outline\": floating && theme === \"outline\",\n    }),\n    floating &&\n      label({\n        ...labelOptions,\n        floating: true,\n        floatingActive: true,\n      }),\n    cssUtils({ srOnly }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","getFormConfig","label","styles","legend","options","className","srOnly","floating","theme","labelOptions","floatingActive"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAGzC,MAAMC,SAASH,IAAI;AA+FnB;;CAEC,GACD,OAAO,SAASI,OAAOC,UAAkC,CAAC,CAAC;IACzD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,QAAQR,cAAc,QAAQ,EAC9B,GAAGS,cACJ,GAAGL;IAEJ,OAAOP,IACLK,OAAO;QACLK;QACA,mBAAmBA,YAAYC,UAAU;QACzC,sBAAsBD,YAAYC,UAAU;QAC5C,oBAAoBD,YAAYC,UAAU;IAC5C,IACAD,YACEN,MAAM;QACJ,GAAGQ,YAAY;QACfF,UAAU;QACVG,gBAAgB;IAClB,IACFZ,SAAS;QAAEQ;IAAO,IAClBD;AAEJ"}

package/dist/interaction/_interaction.scss

@@ -533,7 +533,7 @@ $variables: (
 ///     @include surface;
 ///   }
 ///
-/// @param {String} $focus-selector ["&:focus" + if(utils.disable-focus-visible, "", "-visible")] -
+/// @param {String} $focus-selector ["&:focus" + if(sass(not utils.disable-focus-visible): "-visible"; else: "")] -
 /// The selector to use indicating the element has been focused.
 /// @param {Boolean} $keyboard-only-focus [utils.$disable-focus-visible] -
 /// @param {String} $disabled-selector ["&:disabled"] - The selector to use
@@ -552,7 +552,8 @@ $variables: (
 /// @param {Boolean} $disable-background [$disable-focus-background] - Set to
 /// `true` to disable the focus background color styles.
 @mixin surface(
-  $focus-selector: "&:focus" + if(utils.$disable-focus-visible, "", "-visible"),
+  $focus-selector: "&:focus" +
+    if(sass(not utils.$disable-focus-visible): "-visible" ; else: ""),
   $keyboard-only-focus: utils.$disable-focus-visible,
   $disabled-selector: "&:disabled",
   $clickable: true,
@@ -586,7 +587,8 @@ $variables: (
 
     transition-duration: transition.$linear-duration;
     transition-property:
-      background-color, if($focus-box-shadow, box-shadow, outline-color);
+      background-color,
+      if(sass(not $focus-box-shadow): outline-color; else: box-shadow);
     transition-timing-function: transition.$linear-timing-function;
   }
 

package/dist/snackbar/_snackbar.scss

@@ -152,10 +152,10 @@ $light-theme-color: a11y.contrast-color($light-theme-background-color) !default;
 
 /// The background-color to use in the dark theme.
 /// @type Color
+// prettier-ignore
 $dark-theme-background-color: if(
-  theme.$disable-dark-elevation,
-  $light-theme-background-color,
-  map.get(theme.$dark-elevation-colors, $elevation)
+  sass(theme.$disable-dark-elevation): $light-theme-background-color;
+  else: map.get(theme.$dark-elevation-colors, $elevation)
 ) !default;
 
 /// The text color to use in the dark theme.

package/dist/tabs/_tabs.scss

@@ -368,12 +368,11 @@ $variables: (
     }
 
     @include utils.rtl {
-      $button-selector: "&__button" +
-        if(
-          $disable-tablist-scroll-button-vertical,
-          "",
-          ":where(:not(.rmd-tablist-button__button--v))"
-        );
+      $button-selector: "&__button";
+      @if not $disable-tablist-scroll-button-vertical {
+        $button-selector: $button-selector +
+          ":where(:not(.rmd-tablist-button__button--v))";
+      }
 
       &--left {
         left: auto;

package/dist/theme/_a11y.scss

@@ -183,5 +183,7 @@ $_linear-channel-values: (
   $light-contrast: _contrast($background-color, $light-color);
   $dark-contrast: _contrast($background-color, $dark-color);
 
-  @return if($light-contrast > $dark-contrast, $light-color, $dark-color);
+  @return if(
+    sass($light-contrast > $dark-contrast): $light-color; else: $dark-color
+  );
 }

package/dist/theme/_theme.scss

@@ -222,10 +222,10 @@ $dark-theme-background-color: #121212 !default;
 /// color depending on its elevation.
 ///
 /// @type Color
+// prettier-ignore
 $dark-theme-surface-color: if(
-  $disable-dark-elevation,
-  colors.$grey-800,
-  null
+  sass($disable-dark-elevation): colors.$grey-800;
+  else: null
 ) !default;
 
 /// The primary text color when using the dark theme.
@@ -250,7 +250,7 @@ $dark-theme-text-disabled-color: rgba($dark-theme-inverse-color, 0.38) !default;
 /// @param {Color} dark-color - The dark theme color
 /// @returns {Color} The correct color depending on the `$color-scheme`
 @function get-default-color($light-color, $dark-color) {
-  @return if($color-scheme == dark, $dark-color, $light-color);
+  @return if(sass($color-scheme == dark): $dark-color; else: $light-color);
 }
 
 /// The default background color
@@ -519,7 +519,7 @@ $theme-variables: (
 /// @param {any} value - The value to maybe return
 /// @return {any} the `$value` if it was theme var, otherwise null
 @function theme-color-var-fallback($value) {
-  @return if(is-theme-color-var($value), $value, null);
+  @return if(sass(is-theme-color-var($value)): $value; else: null);
 }
 
 /// @param {Number} z-value - The dark elevation value
@@ -777,11 +777,10 @@ $theme-variables: (
 
   @if not $current-color-index {
     @if not $fallback-color {
-      $fallback: if(
-        $fallback-name,
-        "the '$#{$fallback-name}' variable",
-        "a fallback color"
-      );
+      $fallback: "a fallback color";
+      @if $fallback-name {
+        $fallback: "the '$#{$fallback-name}' variable";
+      }
 
       $error-msg: "Invalid material design color: '#{$color}'. If this was intentional because your app does " +
         "not use material design colors, set #{$fallback} instead to get a correct color for the provided swatch: " +
@@ -794,8 +793,13 @@ $theme-variables: (
     }
   }
 
+  // prettier-ignore
+  $current-suffixes: if(
+    sass(not $accent): colors.$primary-suffixes;
+    else: colors.$accent-suffixes
+  );
   $suffixes: utils.validate(
-    if($accent, colors.$accent-suffixes, colors.$primary-suffixes),
+    $current-suffixes,
     $swatch,
     "material design color swatch"
   );
@@ -829,7 +833,7 @@ $theme-variables: (
     }
   }
 
-  $color-name: "#{$current-color-name}#{if($accent, "-a", "")}-#{$swatch}";
+  $color-name: "#{$current-color-name}#{if(sass(not $accent): ""; else: "-a")}-#{$swatch}";
 
   @return map.get(colors.$color-map, $color-name);
 }

package/dist/window-splitter/_window-splitter.scss

@@ -125,12 +125,11 @@ $variables: (
 /// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
+    // prettier-ignore
     $pseudo-selectors: if(
-        not $disable-inactive-background-color,
-        "&::before, ",
-        ""
-      ) +
-      "&::after";
+      sass(not $disable-inactive-background-color): "&::before, ";
+      else: "",
+    ) + "&::after";
 
     @include utils.optional-layer(window-splitter, $disable-layer) {
       .rmd-window-splitter {
@@ -150,14 +149,12 @@ $variables: (
         }
 
         &::after {
-          @include use-var(
-            background-color,
-            $fallback: if(
-                $background-color == interaction.get-var(focus-color),
-                $background-color,
-                null
-              )
+          // prettier-ignore
+          $fallback: if(
+            sass($background-color == interaction.get-var(focus-color)): $background-color;
+            else: null
           );
+          @include use-var(background-color, $fallback: $fallback);
           @include use-var(opacity);
 
           transition: opacity transition.$linear-duration;
@@ -169,14 +166,15 @@ $variables: (
           }
 
           &::before {
+            // prettier-ignore
+            $fallback: if(
+              sass($inactive-background-color == divider.get-var(color)): $inactive-background-color;
+              else: null,
+            );
             @include use-var(
               background-color,
               inactive-background-color,
-              if(
-                $inactive-background-color == divider.get-var(color),
-                $inactive-background-color,
-                null
-              )
+              $fallback
             );
 
             pointer-events: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-md/core",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "description": "The core components and functionality for react-md.",
   "type": "module",
   "sass": "./dist/_core.scss",
@@ -80,25 +80,25 @@
   "devDependencies": {
     "@jest/globals": "^30.2.0",
     "@jest/types": "^30.2.0",
-    "@microsoft/api-extractor": "^7.55.1",
+    "@microsoft/api-extractor": "^7.55.2",
     "@swc/cli": "^0.7.9",
-    "@swc/core": "^1.15.3",
+    "@swc/core": "^1.15.7",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.0",
     "@types/lodash": "^4.17.21",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.10.4",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "@vitest/coverage-v8": "^3.2.4",
     "chokidar": "^5.0.0",
-    "eslint": "^9.39.1",
+    "eslint": "^9.39.2",
     "filesize": "^11.0.13",
     "glob": "13.0.0",
-    "jsdom": "^27.2.0",
+    "jsdom": "^27.3.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
     "npm-run-all2": "^8.0.2",

package/src/form/Select.tsx

@@ -26,6 +26,7 @@ import {
 import { useEnsuredId } from "../useEnsuredId.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { Listbox } from "./Listbox.js";
+import { type OptionProps } from "./Option.js";
 import { SelectedOption } from "./SelectedOption.js";
 import {
   TextFieldContainer,
@@ -46,6 +47,41 @@ const noop = (): void => {
   // do nothing
 };
 
+/**
+ * @since 6.5.0
+ */
+export interface GetSelectedOptionChildrenOptions<
+  Value extends string = string,
+> {
+  value: "" | Value;
+
+  /**
+   * The option will be undefined if there is no value or matching option.
+   */
+  option: OptionProps | undefined;
+
+  /**
+   * This is a pass-through of the {@link SelectProps.placeholder}
+   */
+  placeholder?: ReactNode;
+
+  /**
+   * This is a pass-through of the {@link SelectProps.selectedOptionProps}
+   */
+  children?: ReactNode;
+}
+
+/**
+ * @since 6.5.0
+ */
+const defaultGetSelectedOptionChildren = (
+  options: GetSelectedOptionChildrenOptions
+): ReactNode => {
+  const { children, option, placeholder } = options;
+
+  return children ?? (option?.children || placeholder);
+};
+
 /**
  * This is a convenience type for casting the `event.currentTarget.value` of a
  * `Select`'s change event to be union of available values.
@@ -206,6 +242,14 @@ export interface SelectProps<Value extends string>
    */
   disableSelectedIcon?: boolean;
 
+  /**
+   * @since 6.5.0
+   * @defaultValue `({ children, option, placeholder }) => children ?? (option?.children || placeholder)`
+   */
+  getSelectedOptionChildren?: (
+    options: GetSelectedOptionChildrenOptions<Value>
+  ) => ReactNode;
+
   /**
    * This should be the available `Option`s for the select to choose from. It
    * can also contain `OptGroup` or any other elements but only clicking on an
@@ -266,6 +310,7 @@ export function Select<Value extends string>(
     label,
     labelProps = {},
     selectedOptionProps,
+    getSelectedOptionChildren = defaultGetSelectedOptionChildren,
     icon: propIcon,
     value,
     defaultValue,
@@ -351,10 +396,16 @@ export function Select<Value extends string>(
       >
         <SelectedOption
           option={currentOption}
-          placeholder={placeholder}
           disableAddon={disableOptionAddon}
           {...selectedOptionProps}
-        />
+        >
+          {getSelectedOptionChildren({
+            value: currentValue,
+            option: currentOption,
+            placeholder,
+            children: selectedOptionProps?.children,
+          })}
+        </SelectedOption>
         <input
           aria-hidden
           id={inputId}

package/src/form/SelectedOption.tsx

@@ -1,5 +1,5 @@
 import { cnb } from "cnbuilder";
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement } from "react";
 
 import { Box, type BoxProps } from "../box/Box.js";
 import { cssUtils } from "../cssUtils.js";
@@ -12,7 +12,6 @@ import { textField } from "./textFieldStyles.js";
  */
 export interface SelectedOptionProps extends BoxProps {
   option: OptionProps | undefined;
-  placeholder?: ReactNode;
   disableAddon: boolean;
 }
 
@@ -29,11 +28,10 @@ export function SelectedOption(props: SelectedOptionProps): ReactElement {
     className,
     disableWrap = true,
     disablePadding = true,
-    placeholder,
     ...remaining
   } = props;
 
-  let children = option?.children || placeholder;
+  let { children } = remaining;
   // when the children are a string or number, wrap it in additional span so
   // that overflow can be ellipsis-ed
   if (typeof children === "string" || typeof children === "number") {

package/src/form/legendStyles.ts

@@ -13,7 +13,7 @@ const styles = bem("rmd-legend");
  */
 export type LegendLabelClassNameOptions = Pick<
   LabelClassNameOptions,
-  "active" | "gap" | "dense" | "error" | "stacked" | "disabled" | "reversed"
+  "active" | "gap" | "error" | "stacked" | "disabled" | "reversed"
 >;
 
 /**