@patternfly/patternfly 5.0.0-alpha.49 → 5.0.0-alpha.50

package/docs/components/SearchInput/examples/SearchInput.css

@@ -1,12 +0,0 @@
-#ws-core-c-search-input-advanced-search-expanded,
-#ws-core-c-search-input-advanced-search-expanded-with-autocomplete {
-  height: 550px;
-}
-
-#ws-core-c-search-input-autocomplete {
-  height: 250px;
-}
-
-#ws-core-c-search-input-autocomplete-last-option-hint {
-  height: 150px;
-}

package/docs/components/SearchInput/examples/SearchInput.md

@@ -1,681 +0,0 @@
----
-id: 'Search input'
-section: components
-cssPrefix: pf-v5-c-search-input
----import './SearchInput.css'
-
-## Examples
-
-### Basic
-
-```html
-<div class="pf-v5-c-search-input">
-  <div class="pf-v5-c-search-input__bar">
-    <span class="pf-v5-c-search-input__text">
-      <span class="pf-v5-c-search-input__icon">
-        <i class="fas fa-search fa-fw" aria-hidden="true"></i>
-      </span>
-      <input
-        class="pf-v5-c-search-input__text-input"
-        type="text"
-        placeholder="Find by name"
-        aria-label="Find by name"
-      />
-    </span>
-  </div>
-</div>
-
-```
-
-### No match
-
-```html
-<div class="pf-v5-c-search-input">
-  <div class="pf-v5-c-search-input__bar">
-    <span class="pf-v5-c-search-input__text">
-      <span class="pf-v5-c-search-input__icon">
-        <i class="fas fa-search fa-fw" aria-hidden="true"></i>
-      </span>
-      <input
-        class="pf-v5-c-search-input__text-input"
-        type="text"
-        placeholder="Find by name"
-        aria-label="Find by name"
-        value="Joh"
-      />
-    </span>
-    <span class="pf-v5-c-search-input__utilities">
-      <span class="pf-v5-c-search-input__clear">
-        <button
-          class="pf-v5-c-button pf-m-plain"
-          type="button"
-          aria-label="Clear"
-        >
-          <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-        </button>
-      </span>
-    </span>
-  </div>
-</div>
-
-```
-
-### Match with result count
-
-```html
-<div class="pf-v5-c-search-input">
-  <div class="pf-v5-c-search-input__bar">
-    <span class="pf-v5-c-search-input__text">
-      <span class="pf-v5-c-search-input__icon">
-        <i class="fas fa-search fa-fw" aria-hidden="true"></i>
-      </span>
-      <input
-        class="pf-v5-c-search-input__text-input"
-        type="text"
-        placeholder="Find by name"
-        aria-label="Find by name"
-        value="John Doe"
-      />
-    </span>
-    <span class="pf-v5-c-search-input__utilities">
-      <span class="pf-v5-c-search-input__count">
-        <span class="pf-v5-c-badge pf-m-read">3</span>
-      </span>
-      <span class="pf-v5-c-search-input__clear">
-        <button
-          class="pf-v5-c-button pf-m-plain"
-          type="button"
-          aria-label="Clear"
-        >
-          <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-        </button>
-      </span>
-    </span>
-  </div>
-</div>
-
-```
-
-### Match with navigable options
-
-```html
-<div class="pf-v5-c-search-input">
-  <div class="pf-v5-c-search-input__bar">
-    <span class="pf-v5-c-search-input__text">
-      <span class="pf-v5-c-search-input__icon">
-        <i class="fas fa-search fa-fw" aria-hidden="true"></i>
-      </span>
-      <input
-        class="pf-v5-c-search-input__text-input"
-        type="text"
-        placeholder="Find by name"
-        aria-label="Find by name"
-        value="John Doe"
-      />
-    </span>
-    <span class="pf-v5-c-search-input__utilities">
-      <span class="pf-v5-c-search-input__count">
-        <span class="pf-v5-c-badge pf-m-read">1 / 3</span>
-      </span>
-      <span class="pf-v5-c-search-input__nav">
-        <button
-          class="pf-v5-c-button pf-m-plain"
-          type="button"
-          disabled
-          aria-label="Previous"
-        >
-          <i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
-        </button>
-        <button
-          class="pf-v5-c-button pf-m-plain"
-          type="button"
-          aria-label="Next"
-        >
-          <i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
-        </button>
-      </span>
-      <span class="pf-v5-c-search-input__clear">
-        <button
-          class="pf-v5-c-button pf-m-plain"
-          type="button"
-          aria-label="Clear"
-        >
-          <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-        </button>
-      </span>
-    </span>
-  </div>
-</div>
-
-```
-
-### With submit button
-
-```html
-<div class="pf-v5-c-search-input">
-  <div class="pf-v5-c-input-group">
-    <div class="pf-v5-c-input-group__item pf-m-fill">
-      <div class="pf-v5-c-search-input__bar">
-        <span class="pf-v5-c-search-input__text">
-          <span class="pf-v5-c-search-input__icon">
-            <i class="fas fa-search fa-fw" aria-hidden="true"></i>
-          </span>
-          <input
-            class="pf-v5-c-search-input__text-input"
-            type="text"
-            placeholder="Find by name"
-            aria-label="Find by name"
-          />
-        </span>
-      </div>
-    </div>
-    <div class="pf-v5-c-input-group__item">
-      <button
-        class="pf-v5-c-button pf-m-control"
-        type="submit"
-        aria-label="Search"
-      >
-        <i class="fas fa-arrow-right" aria-hidden="true"></i>
-      </button>
-    </div>
-  </div>
-</div>
-
-```
-
-### Advanced search
-
-```html
-<div class="pf-v5-c-search-input">
-  <div class="pf-v5-c-input-group">
-    <div class="pf-v5-c-input-group__item pf-m-fill">
-      <div class="pf-v5-c-search-input__bar">
-        <span class="pf-v5-c-search-input__text">
-          <span class="pf-v5-c-search-input__icon">
-            <i class="fas fa-search fa-fw" aria-hidden="true"></i>
-          </span>
-          <input
-            class="pf-v5-c-search-input__text-input"
-            type="text"
-            placeholder="username:admin firstname:joe"
-            aria-label="username:admin firstname:joe"
-            value="username:root firstname:ned"
-          />
-        </span>
-        <span class="pf-v5-c-search-input__utilities">
-          <span class="pf-v5-c-search-input__clear">
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              aria-label="Clear"
-            >
-              <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-            </button>
-          </span>
-        </span>
-      </div>
-    </div>
-    <div class="pf-v5-c-input-group__item">
-      <button
-        class="pf-v5-c-button pf-m-control"
-        type="button"
-        aria-expanded="false"
-        aria-label="Advanced search"
-      >
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
-      </button>
-    </div>
-    <div class="pf-v5-c-input-group__item">
-      <button
-        class="pf-v5-c-button pf-m-control"
-        type="submit"
-        aria-label="Search"
-      >
-        <i class="fas fa-arrow-right" aria-hidden="true"></i>
-      </button>
-    </div>
-  </div>
-</div>
-
-```
-
-### Advanced search expanded
-
-```html
-<div class="pf-v5-c-search-input">
-  <div class="pf-v5-c-input-group">
-    <div class="pf-v5-c-input-group__item pf-m-fill">
-      <div class="pf-v5-c-search-input__bar">
-        <span class="pf-v5-c-search-input__text">
-          <span class="pf-v5-c-search-input__icon">
-            <i class="fas fa-search fa-fw" aria-hidden="true"></i>
-          </span>
-          <input
-            class="pf-v5-c-search-input__text-input"
-            type="text"
-            placeholder="username:admin firstname:joe"
-            aria-label="username:admin firstname:joe"
-            value="username:root firstname:ned"
-          />
-        </span>
-        <span class="pf-v5-c-search-input__utilities">
-          <span class="pf-v5-c-search-input__clear">
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              aria-label="Clear"
-            >
-              <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-            </button>
-          </span>
-        </span>
-      </div>
-    </div>
-    <div class="pf-v5-c-input-group__item">
-      <button
-        class="pf-v5-c-button pf-m-control pf-m-expanded"
-        type="button"
-        aria-expanded="true"
-        aria-label="Advanced search"
-      >
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
-      </button>
-    </div>
-    <div class="pf-v5-c-input-group__item">
-      <button
-        class="pf-v5-c-button pf-m-control"
-        type="submit"
-        aria-label="Search"
-      >
-        <i class="fas fa-arrow-right" aria-hidden="true"></i>
-      </button>
-    </div>
-  </div>
-  <div class="pf-v5-c-search-input__menu">
-    <div class="pf-v5-c-search-input__menu-body">
-      <form class="pf-v5-c-form" novalidate>
-        <div class="pf-v5-c-form__group">
-          <div class="pf-v5-c-form__group-label"><label
-              class="pf-v5-c-form__label"
-              for="advanced-search-input-form-username"
-            >
-              <span class="pf-v5-c-form__label-text">Username</span></label>
-          </div>
-          <div class="pf-v5-c-form__group-control">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              value="root"
-              id="advanced-search-input-form-username"
-              name="advanced-search-input-form-username"
-            />
-          </div>
-        </div>
-        <div class="pf-v5-c-form__group">
-          <div class="pf-v5-c-form__group-label"><label
-              class="pf-v5-c-form__label"
-              for="advanced-search-input-form-firstname"
-            >
-              <span class="pf-v5-c-form__label-text">First name</span></label>
-          </div>
-          <div class="pf-v5-c-form__group-control">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              value="ned"
-              id="advanced-search-input-form-firstname"
-              name="advanced-search-input-form-firstname"
-            />
-          </div>
-        </div>
-        <div class="pf-v5-c-form__group">
-          <div class="pf-v5-c-form__group-label"><label
-              class="pf-v5-c-form__label"
-              for="advanced-search-input-form-group"
-            >
-              <span class="pf-v5-c-form__label-text">Group</span></label>
-          </div>
-          <div class="pf-v5-c-form__group-control">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              id="advanced-search-input-form-group"
-              name="advanced-search-input-form-group"
-            />
-          </div>
-        </div>
-        <div class="pf-v5-c-form__group">
-          <div class="pf-v5-c-form__group-label"><label
-              class="pf-v5-c-form__label"
-              for="advanced-search-input-form-email"
-            >
-              <span class="pf-v5-c-form__label-text">Email</span></label>
-          </div>
-          <div class="pf-v5-c-form__group-control">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              id="advanced-search-input-form-email"
-              name="advanced-search-input-form-email"
-            />
-          </div>
-        </div>
-        <div class="pf-v5-c-form__group pf-m-action">
-          <div class="pf-v5-c-form__actions">
-            <button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
-            <button class="pf-v5-c-button pf-m-link" type="reset">Reset</button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-
-```
-
-### Autocomplete
-
-```html
-<div class="pf-v5-c-search-input">
-  <div class="pf-v5-c-search-input__bar">
-    <span class="pf-v5-c-search-input__text">
-      <span class="pf-v5-c-search-input__icon">
-        <i class="fas fa-search fa-fw" aria-hidden="true"></i>
-      </span>
-      <input
-        class="pf-v5-c-search-input__text-input"
-        id="search-input-autocomplete-text-input"
-        type="text"
-        placeholder="Keyword search"
-        aria-label="Keyword search"
-        value="app"
-      />
-    </span>
-    <span class="pf-v5-c-search-input__utilities">
-      <span class="pf-v5-c-search-input__clear">
-        <button
-          class="pf-v5-c-button pf-m-plain"
-          type="button"
-          aria-label="Clear"
-        >
-          <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-        </button>
-      </span>
-    </span>
-  </div>
-  <div class="pf-v5-c-search-input__menu">
-    <ul class="pf-v5-c-search-input__menu-list">
-      <li class="pf-v5-c-search-input__menu-list-item">
-        <button class="pf-v5-c-search-input__menu-item" type="button">
-          <span class="pf-v5-c-search-input__menu-item-text">apple</span>
-        </button>
-      </li>
-      <li class="pf-v5-c-search-input__menu-list-item">
-        <button class="pf-v5-c-search-input__menu-item" type="button">
-          <span class="pf-v5-c-search-input__menu-item-text">appleby</span>
-        </button>
-      </li>
-      <li class="pf-v5-c-search-input__menu-list-item">
-        <button class="pf-v5-c-search-input__menu-item" type="button">
-          <span class="pf-v5-c-search-input__menu-item-text">appleseed</span>
-        </button>
-      </li>
-      <li class="pf-v5-c-search-input__menu-list-item">
-        <button class="pf-v5-c-search-input__menu-item" type="button">
-          <span class="pf-v5-c-search-input__menu-item-text">appleton</span>
-        </button>
-      </li>
-    </ul>
-  </div>
-</div>
-
-```
-
-### Autocomplete last option hint
-
-```html
-<div class="pf-v5-c-search-input">
-  <div class="pf-v5-c-search-input__bar">
-    <span class="pf-v5-c-search-input__text">
-      <span class="pf-v5-c-search-input__icon">
-        <i class="fas fa-search fa-fw" aria-hidden="true"></i>
-      </span>
-      <input
-        class="pf-v5-c-search-input__text-input pf-m-hint"
-        type="text"
-        disabled
-        aria-hidden="true"
-        placeholder="Keyword search"
-        aria-label="Keyword search"
-        value="appleseed"
-      />
-      <input
-        class="pf-v5-c-search-input__text-input"
-        type="text"
-        placeholder="Keyword search"
-        aria-label="Keyword search"
-        value="apples"
-      />
-    </span>
-    <span class="pf-v5-c-search-input__utilities">
-      <span class="pf-v5-c-search-input__clear">
-        <button
-          class="pf-v5-c-button pf-m-plain"
-          type="button"
-          aria-label="Clear"
-        >
-          <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-        </button>
-      </span>
-    </span>
-  </div>
-  <div class="pf-v5-c-search-input__menu">
-    <ul class="pf-v5-c-search-input__menu-list">
-      <li class="pf-v5-c-search-input__menu-list-item">
-        <button class="pf-v5-c-search-input__menu-item" type="button">
-          <span class="pf-v5-c-search-input__menu-item-text">appleseed</span>
-        </button>
-      </li>
-    </ul>
-  </div>
-</div>
-
-```
-
-### Advanced search expanded with autocomplete
-
-```html
-<div class="pf-v5-c-search-input">
-  <div class="pf-v5-c-input-group">
-    <div class="pf-v5-c-input-group__item pf-m-fill">
-      <div class="pf-v5-c-search-input__bar">
-        <span class="pf-v5-c-search-input__text">
-          <span class="pf-v5-c-search-input__icon">
-            <i class="fas fa-search fa-fw" aria-hidden="true"></i>
-          </span>
-          <input
-            class="pf-v5-c-search-input__text-input"
-            type="text"
-            placeholder="username:admin firstname:joe"
-            aria-label="username:admin firstname:joe"
-            value="username:root firstname:n"
-          />
-        </span>
-        <span class="pf-v5-c-search-input__utilities">
-          <span class="pf-v5-c-search-input__clear">
-            <button
-              class="pf-v5-c-button pf-m-plain"
-              type="button"
-              aria-label="Clear"
-            >
-              <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-            </button>
-          </span>
-        </span>
-      </div>
-    </div>
-    <div class="pf-v5-c-input-group__item">
-      <button
-        class="pf-v5-c-button pf-m-control pf-m-expanded"
-        type="button"
-        aria-expanded="true"
-        aria-label="Advanced search"
-      >
-        <i class="fas fa-caret-down" aria-hidden="true"></i>
-      </button>
-    </div>
-    <div class="pf-v5-c-input-group__item">
-      <button
-        class="pf-v5-c-button pf-m-control"
-        type="submit"
-        aria-label="Search"
-      >
-        <i class="fas fa-arrow-right" aria-hidden="true"></i>
-      </button>
-    </div>
-  </div>
-  <div class="pf-v5-c-search-input__menu">
-    <div class="pf-v5-c-search-input__menu-body">
-      <form class="pf-v5-c-form" novalidate>
-        <div class="pf-v5-c-form__group">
-          <div class="pf-v5-c-form__group-label"><label
-              class="pf-v5-c-form__label"
-              for="advanced-search-autocomplete-input-form-username"
-            >
-              <span class="pf-v5-c-form__label-text">Username</span></label>
-          </div>
-          <div class="pf-v5-c-form__group-control">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              value="root"
-              id="advanced-search-autocomplete-input-form-username"
-              name="advanced-search-autocomplete-input-form-username"
-            />
-          </div>
-        </div>
-        <div class="pf-v5-c-form__group">
-          <div class="pf-v5-c-form__group-label"><label
-              class="pf-v5-c-form__label"
-              for="advanced-search-autocomplete-input-form-firstname"
-            >
-              <span class="pf-v5-c-form__label-text">First name</span></label>
-          </div>
-          <div class="pf-v5-c-form__group-control">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              value="n"
-              id="advanced-search-autocomplete-input-form-firstname"
-              name="advanced-search-autocomplete-input-form-firstname"
-            />
-          </div>
-        </div>
-        <div class="pf-v5-c-form__group">
-          <div class="pf-v5-c-form__group-label"><label
-              class="pf-v5-c-form__label"
-              for="advanced-search-autocomplete-input-form-group"
-            >
-              <span class="pf-v5-c-form__label-text">Group</span></label>
-          </div>
-          <div class="pf-v5-c-form__group-control">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              id="advanced-search-autocomplete-input-form-group"
-              name="advanced-search-autocomplete-input-form-group"
-            />
-          </div>
-        </div>
-        <div class="pf-v5-c-form__group">
-          <div class="pf-v5-c-form__group-label"><label
-              class="pf-v5-c-form__label"
-              for="advanced-search-autocomplete-input-form-email"
-            >
-              <span class="pf-v5-c-form__label-text">Email</span></label>
-          </div>
-          <div class="pf-v5-c-form__group-control">
-            <input
-              class="pf-v5-c-form-control"
-              type="text"
-              id="advanced-search-autocomplete-input-form-email"
-              name="advanced-search-autocomplete-input-form-email"
-            />
-          </div>
-        </div>
-        <div class="pf-v5-c-form__group pf-m-action">
-          <div class="pf-v5-c-form__actions">
-            <button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
-            <button class="pf-v5-c-button pf-m-link" type="reset">Reset</button>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-  <div class="pf-v5-c-search-input__menu">
-    <ul class="pf-v5-c-search-input__menu-list">
-      <li class="pf-v5-c-search-input__menu-list-item">
-        <button class="pf-v5-c-search-input__menu-item" type="button">
-          <span class="pf-v5-c-search-input__menu-item-text">nancy</span>
-        </button>
-      </li>
-      <li class="pf-v5-c-search-input__menu-list-item">
-        <button class="pf-v5-c-search-input__menu-item" type="button">
-          <span class="pf-v5-c-search-input__menu-item-text">ned</span>
-        </button>
-      </li>
-      <li class="pf-v5-c-search-input__menu-list-item">
-        <button class="pf-v5-c-search-input__menu-item" type="button">
-          <span class="pf-v5-c-search-input__menu-item-text">neil</span>
-        </button>
-      </li>
-      <li class="pf-v5-c-search-input__menu-list-item">
-        <button class="pf-v5-c-search-input__menu-item" type="button">
-          <span class="pf-v5-c-search-input__menu-item-text">nicole</span>
-        </button>
-      </li>
-    </ul>
-  </div>
-</div>
-
-```
-
-### Accessibility
-
-| Attributes | Applied to | Outcome |
-| -- | -- | -- |
-| `aria-hidden="true"` | `.pf-v5-c-search-input__icon > *` | Hides the search icon from assistive technologies. **Required** |
-| `aria-label="Previous"` | `.pf-v5-c-search-input__nav > .pf-v5-c-button` | Provides an accessible label for the previous nav button. **Required** |
-| `aria-label="Next"` | `.pf-v5-c-search-input__nav > .pf-v5-c-button` | Provides an accessible label for the next nav button. **Required** |
-| `aria-label="[descriptive text]"` | `.pf-v5-c-search-input__text-input` | Provides an accessible label for the search input. **Required** |
-| `aria-label="Clear"` | `.pf-v5-c-search-input__clear > .pf-v5-c-button` | Provides an accessible label for the clear button. **Required** |
-| `aria-label="Search"` | `.pf-v5-c-button` | Provides an accessible label for the search button. **Required** |
-| `aria-label="Advanced search"` | `.pf-v5-c-button` | Provides an accessible label for the advanced search toggle. **Required** |
-| `aria-expanded="[true/false]"` | `.pf-v5-c-button` | Indicates whether the advanced search menu is expanded or collapsed. **Required** |
-| `id` | `.pf-v5-c-search-input__text-input` | Assigns an ID that is used with `aria-labelledby` on `.pf-v5-c-search-input__menu-list`. **Required when using autocomplete** |
-| `aria-labelledby="[id of text input]"` | `.pf-v5-c-search-input__menu-list` | Gives the menu list an accessible label. **Required when using autocomplete** |
-| `disabled` | `.pf-v5-c-search-input__text-input.pf-m-hint` | Disables the hint text input from being submitted with the search input. **Required when using hint text** |
-| `aria-hidden="true"` | `.pf-v5-c-search-input__text-input.pf-m-hint` | Hides the hint text input from assistive technology. **Required when using hint text** |
-
-### Usage
-
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v5-c-search-input` | `<div>` | Initiates the custom search input component. **Required** |
-| `.pf-v5-c-search-input__bar` | `<div>` | Initiates the custom search input bar. **Required** |
-| `.pf-v5-c-search-input__text` | `<span>` | Initiates the text area. **Required** |
-| `.pf-v5-c-search-input__text-input` | `<input>` | Initiates the search input. **Required** |
-| `.pf-v5-c-search-input__icon` | `<span>` | Initiates the search icon container. **Required** |
-| `.pf-v5-c-search-input__utilities` | `<span>` | Initiates the utilities area beside the search input. |
-| `.pf-v5-c-search-input__count` | `<span>` | Initiates the item count container. |
-| `.pf-v5-c-search-input__nav` | `<span>` | Initiates the navigable buttons container. |
-| `.pf-v5-c-search-input__clear` | `<span>` | Initiates the clear button container. **Required when there is text in the search input** |
-| `.pf-v5-c-search-input__menu` | `<div>` | Initiates the search input dropdown menu. |
-| `.pf-v5-c-search-input__menu-body` | `<div>` | Initiates the search input dropdown menu body element. |
-| `.pf-v5-c-search-input__menu-list` | `<div>` | Initiates the search input dropdown menu list. |
-| `.pf-v5-c-search-input__menu-list-item` | `<div>` | Initiates the search input dropdown menu list item. |
-| `.pf-v5-c-search-input__menu-item` | `<div>` | Initiates the search input dropdown menu item. |
-| `.pf-v5-c-search-input__menu-item-text` | `<span>` | Initiates the search input dropdown menu item text. |
-| `.pf-m-top` | `.pf-v5-c-search-input__menu` | Modifies the menu to display above the toggle. |
-| `.pf-m-static` | `.pf-v5-c-search-input__menu` | Modifies the menu to be statically positioned to support custom positioning. |
-| `.pf-m-hint` | `.pf-v5-c-search-input__text-input` | Modifies the text input for hint text styles. |