fix(select)!: change compound attribute names to kebab-case

BREAKING_CHANGE: Attributes `errortext`, `supportingtext`, `menufixed`, `hasleadingicon`, `hastrailingicon`, `displaytext`, `typeaheadbuffertime` and `selectedindex` have been renamed to `error-text`, `supporting-text`, `menu-fixed`, `has-leading-icon`, `has-trailing-icon`, `display-text`, `typeahead-delay` and `selected-index` respectively. The property `typeaheadBufferTime` has been renamed `typeaheadDelay`.
PiperOrigin-RevId: 542657808

select/demo/demo.ts

@@ -16,7 +16,7 @@ const collection =
     new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('Select', [
       new Knob('md-select', {ui: title()}),
       new Knob('label', {ui: textInput(), defaultValue: ''}),
-      new Knob('typeaheadBufferTime', {ui: numberInput(), defaultValue: 200}),
+      new Knob('typeaheadDelay', {ui: numberInput(), defaultValue: 200}),
       new Knob('quick', {ui: boolInput(), defaultValue: false}),
       new Knob('required', {ui: boolInput(), defaultValue: false}),
       new Knob('disabled', {ui: boolInput(), defaultValue: false}),

select/demo/stories.ts

@@ -16,7 +16,7 @@ import {html, nothing} from 'lit';
 export interface StoryKnobs {
   'md-select': void;
   label: string;
-  typeaheadBufferTime: number;
+  typeaheadDelay: number;
   quick: boolean;
   required: boolean;
   disabled: boolean;
@@ -42,7 +42,7 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
           .errorText=${knobs.errorText}
           .supportingText=${knobs.supportingText}
           .menuFixed=${knobs.menuFixed}
-          .typeaheadBufferTime=${knobs.typeaheadBufferTime}
+          .typeaheadDelay=${knobs.typeaheadDelay}
           .error=${knobs.error}>
         ${renderIcon(knobs['slot=leadingicon'], 'leadingicon')}
         ${renderIcon(knobs['slot=trailingicon'], 'trailingicon')}
@@ -64,7 +64,7 @@ const filled: MaterialStoryInit<StoryKnobs> = {
           .errorText=${knobs.errorText}
           .supportingText=${knobs.supportingText}
           .menuFixed=${knobs.menuFixed}
-          .typeaheadBufferTime=${knobs.typeaheadBufferTime}
+          .typeaheadDelay=${knobs.typeaheadDelay}
           .error=${knobs.error}>
         ${renderIcon(knobs['slot=leadingicon'], 'leadingicon')}
         ${renderIcon(knobs['slot=trailingicon'], 'trailingicon')}

select/lib/select.ts

@@ -48,7 +48,7 @@ export abstract class Select extends LitElement {
    * Calling `reportValidity()` will automatically update `errorText` to the
    * native `validationMessage`.
    */
-  @property({type: String}) errorText = '';
+  @property({type: String, attribute: 'error-text'}) errorText = '';
   /**
    * The floating label for the field.
    */
@@ -57,7 +57,7 @@ export abstract class Select extends LitElement {
    * Conveys additional information below the text field, such as how it should
    * be used.
    */
-  @property({type: String}) supportingText = '';
+  @property({type: String, attribute: 'supporting-text'}) supportingText = '';
   /**
    * Gets or sets whether or not the text field is in a visually invalid state.
    *
@@ -68,24 +68,27 @@ export abstract class Select extends LitElement {
    * Whether or not the underlying md-menu should be position: fixed to display
    * in a top-level manner.
    */
-  @property({type: Boolean}) menuFixed = false;
+  @property({type: Boolean, attribute: 'menu-fixed'}) menuFixed = false;
   /**
    * The max time between the keystrokes of the typeahead select / menu behavior
    * before it clears the typeahead buffer.
    */
-  @property({type: Number}) typeaheadBufferTime = DEFAULT_TYPEAHEAD_BUFFER_TIME;
+  @property({type: Number, attribute: 'typeahead-delay'})
+  typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
   /**
    * Whether or not the text field has a leading icon. Used for SSR.
    */
-  @property({type: Boolean}) hasLeadingIcon = false;
+  @property({type: Boolean, attribute: 'has-leading-icon'})
+  hasLeadingIcon = false;
   /**
    * Whether or not the text field has a trailing icon. Used for SSR.
    */
-  @property({type: Boolean}) hasTrailingIcon = false;
+  @property({type: Boolean, attribute: 'has-trailing-icon'})
+  hasTrailingIcon = false;
   /**
    * Text to display in the field. Only set for SSR.
    */
-  @property() displayText = '';
+  @property({attribute: 'display-text'}) displayText = '';
   /**
    * When set to true, the error text's `role="alert"` will be removed, then
    * re-added after an animation frame. This will re-announce an error message
@@ -131,7 +134,7 @@ export abstract class Select extends LitElement {
    * rather than setting `selectedIndex` setting `selectedIndex` will incur a
    * DOM query.
    */
-  @property({type: Number})
+  @property({type: Number, attribute: 'selected-index'})
   get selectedIndex(): number {
     // tslint:disable-next-line:enforce-name-casing
     const [_option, index] = (this.getSelectedOptions() ?? [])[0] ?? [];
@@ -283,7 +286,7 @@ export abstract class Select extends LitElement {
           .open=${this.open}
           .quick=${this.quick}
           .fixed=${this.menuFixed}
-          .typeaheadBufferTime=${this.typeaheadBufferTime}
+          .typeaheadBufferTime=${this.typeaheadDelay}
           @opening=${this.handleOpening}
           @closing=${this.handleClosing}
           @close-menu=${this.handleCloseMenu}