Embed interactive search field in large table

components/data-display.html

@@ -80,17 +80,18 @@
     <article class="sg-card sg-large-table" data-component="large-table" role="table" aria-label="Beispiel Large Table">
       <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-large-table__title-segment" data-component-part="large-table-header">
         <div class="sg-strong">Large Table</div>
-        <div class="sg-large-table__search" data-component="search-field">
+        <span class="sg-search-field-row" data-component="search-field">
-          <label class="sg-large-table__search-label" for="large-table-search">Suchfeld</label>
+          <span class="sg-input-single-line-wrap" data-has-value="false" data-component="single-line-input" data-component-state="inactive-selectable">
-          <input
+            <input
-            class="sg-large-table__search-input"
+              class="sg-interaction-element sg-input-single-line sg-search-field-input sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
-            id="large-table-search"
+              type="text"
-            type="search"
+              placeholder="Suchfeld"
-            placeholder="Tabelle durchsuchen"
+              aria-label="Suchfeld ohne Eingabe"
-            aria-label="Tabelle durchsuchen"
+              data-large-table-search
-            data-large-table-search
+            >
-          >
+            <button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button>
-        </div>
+          </span>
+        </span>
       </div>
 
       <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--header" role="row" data-component-part="large-table-header-row">
@@ -221,6 +222,8 @@
       const rows = Array.from(table.querySelectorAll('[data-component-part="large-table-row"]'));
       const headerRow = table.querySelector('[data-component-part="large-table-header-row"]');
       const searchInput = table.querySelector('[data-large-table-search]');
+      const searchFieldWrap = table.querySelector('[data-component="single-line-input"]');
+      const searchClearButton = table.querySelector('.sg-input-clear-button');
       const state = {
         columnIndex: 0,
         direction: 'ascending',
@@ -314,10 +317,25 @@
       if (searchInput) {
         searchInput.addEventListener('input', () => {
           state.query = searchInput.value.trim().toLowerCase();
+          if (searchFieldWrap) {
+            searchFieldWrap.setAttribute('data-has-value', searchInput.value ? 'true' : 'false');
+          }
           renderRows();
         });
       }
 
+      if (searchClearButton && searchInput) {
+        searchClearButton.addEventListener('click', () => {
+          searchInput.value = '';
+          state.query = '';
+          if (searchFieldWrap) {
+            searchFieldWrap.setAttribute('data-has-value', 'false');
+          }
+          renderRows();
+          searchInput.focus();
+        });
+      }
+
       if (headerRow) {
         setHeaderState(state.columnIndex, state.direction);
       }

styles/42-components-data-display.css

@@ -78,42 +78,6 @@
   gap: var(--spacing-large);
 }
 
-.sg-large-table__search {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacing-small);
-  margin-left: auto;
-}
-
-.sg-large-table__search-label {
-  color: var(--text-card-header);
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--line-height-base);
-  white-space: nowrap;
-}
-
-.sg-large-table__search-input {
-  width: 14rem;
-  max-width: 100%;
-  box-sizing: border-box;
-  padding: 0.35rem var(--spacing-small);
-  border: var(--border-none);
-  border-radius: var(--radius-card);
-  background: var(--color-white);
-  color: var(--text-control-default);
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-base);
-}
-
-.sg-large-table__search-input:focus-visible {
-  outline: 2px solid var(--color-white);
-  outline-offset: 2px;
-}
-
 .sg-large-table__row {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));