feat(select): add mixin for variable width

PiperOrigin-RevId: 343188973

Author: allan-chen

packages/mdc-select/README.md

@@ -554,6 +554,7 @@ Mixin | Description
 `filled-with-leading-icon-height($height)` | Sets height of filled select with leading icon variant.
 `outlined-height($height)` | Sets height of outlined select variant (Excluding outlined select with leading icon).
 `outlined-with-leading-icon-height($height)` | Sets height of outlined select with leading icon variant.
+`variable-width($min-width)` | Sets the select behavior to change width dynamically based on content.
 
 > _NOTE_: To further customize the floating label, please see the [floating label documentation](./../mdc-floating-label/README.md).
 

packages/mdc-select/_select-theme.scss

@@ -165,6 +165,20 @@ $error-color: error !default;
   }
 }
 
+/// Sets the select behavior to change width dynamically based on content.
+/// @param {Number} $min-width - The min-width of the select, which should be
+///     large enough to allow the label (if exists) to display in full.
+@mixin variable-width($min-width, $query: feature-targeting.all()) {
+  $feat-structure: feature-targeting.create-target($query, structure);
+
+  .mdc-select__anchor {
+    @include feature-targeting.targets($feat-structure) {
+      width: 100%;
+      min-width: $min-width;
+    }
+  }
+}
+
 @mixin ink-color($color-or-map, $query: feature-targeting.all()) {
   @include _if-enabled {
     @include _ink-color(state.get-default-state($color-or-map), $query: $query);