@api-client/ui 0.2.3 → 0.2.4

package/src/elements/autocomplete/internals/autocomplete.ts

@@ -0,0 +1,490 @@
+import { html, LitElement, PropertyValues, TemplateResult } from 'lit'
+import { state } from 'lit/decorators.js'
+import type UiListbox from '../../../md/listbox/internals/Listbox.js'
+import type UiListItem from '../../../md/list/internals/ListItem.js'
+import { bound } from '../../../decorators/bound.js'
+
+/**
+ * An accessible and performant autocomplete component that enhances a text input with a list of suggestions.
+ *
+ * The `autocomplete-input` component provides a flexible way to add autocomplete functionality
+ * to any text input. It works by coordinating a slotted input element with a slotted `ui-listbox`
+ * containing suggestions.
+ *
+ * Key Features:
+ *
+ * - **Popover Management**: Automatically shows and hides the suggestions popover based on input focus
+ *   and user interaction.
+ * - **Keyboard Navigation**: Allows users to navigate suggestions using ArrowUp, ArrowDown keys directly
+ *   from the input. Enter selects a suggestion, and Escape closes the popover.
+ *   The suggestion list itself never gains focus.
+ * - **Dynamic Filtering**: Filters the list of suggestions as the user types into the input. Items not matching
+ *   the query are hidden (not removed).
+ *   - By default, filtering checks `item.dataset.value` and then `item.textContent`.
+ *   - If a `ui-list-item` has a `data-index` attribute (e.g., `data-index="name email"`), filtering will search
+ *     within the specified `data-*` attributes (e.g., `data-name`, `data-email`).
+ * - **Mutation Awareness**: Reacts to changes in slotted suggestions, re-filtering them if necessary.
+ * - **Event-Driven**: Notifies the parent application via an `autocomplete` event when a suggestion is selected,
+ *   without directly modifying the input's value. This allows the application author to control the input update logic.
+ * - **Accessibility**: Designed with accessibility in mind, ensuring keyboard navigability and proper ARIA attribute
+ *   management (handled by `ui-listbox`).
+ *
+ * The component uses CSS anchor positioning to place the suggestions popover relative to the input.
+ * Ensure your `ui-listbox` is styled appropriately for popover display (e.g., `popover="manual"`, `position-anchor`).
+ * The component will manage `showPopover()` and `hidePopover()` calls.
+ *
+ * @slot input - The input element that will be used for autocomplete. This element should be an `HTMLInputElement`
+ *               or behave like one (have a `value` property and dispatch `input`, `focus`, `blur`, and `keydown`
+ *               events).
+ * @slot suggestions - The `ui-listbox` element containing `ui-list-item` elements as suggestions.
+ *
+ * @fires autocomplete - Dispatched when a suggestion is selected by the user (e.g., via click or Enter key).
+ * The `event.detail` object contains:
+ *   - `item`: The selected `UiListItem` instance.
+ *
+ * @example
+ * ```html
+ * <autocomplete-input @autocomplete="${this.handleAutocompleteSelection}">
+ *   <input slot="input" type="text" placeholder="Search fruits..." />
+ *   <ui-listbox slot="suggestions">
+ *     <ui-list-item data-value="apple">Apple</ui-list-item>
+ *     <ui-list-item data-value="banana">Banana</ui-list-item>
+ *     <ui-list-item data-value="cherry">Cherry</ui-list-item>
+ *   </ui-listbox>
+ * </autocomplete-input>
+ *
+ * <script>
+ *   // In your component/script
+ *   handleAutocompleteSelection(event) {
+ *     const selectedItem = event.detail.item;
+ *     const inputElement = this.shadowRoot.querySelector('input[slot="input"]');
+ *     if (inputElement) {
+ *       inputElement.value = selectedItem.dataset.value || selectedItem.textContent;
+ *     }
+ *     console.log('Selected:', selectedItem.dataset.value);
+ *   }
+ * </script>
+ * ```
+ *
+ * @example Dynamic filtering with `data-index`
+ * ```html
+ * <autocomplete-input @autocomplete="${this.handleUserSelection}">
+ *   <input slot="input" type="text" placeholder="Search users..." />
+ *   <ui-listbox slot="suggestions">
+ *     <ui-list-item data-id="1" data-name="Alice Wonderland" data-email="alice@example.com" data-index="name email">
+ *       Alice Wonderland
+ *       <span slot="supporting-text">alice@example.com</span>
+ *     </ui-list-item>
+ *     <ui-list-item data-id="2" data-name="Bob The Builder" data-email="bob@example.com" data-index="name email">
+ *       Bob The Builder
+ *       <span slot="supporting-text">bob@example.com</span>
+ *     </ui-list-item>
+ *   </ui-listbox>
+ * </autocomplete-input>
+ *
+ * <script>
+ *   // In your component/script
+ *   handleUserSelection(event) {
+ *     const selectedItem = event.detail.item;
+ *     const inputElement = this.shadowRoot.querySelector('input[slot="input"]');
+ *     if (inputElement) {
+ *       // You might want to display the name, but store the ID
+ *       inputElement.value = selectedItem.dataset.name;
+ *     }
+ *     console.log('Selected user ID:', selectedItem.dataset.id);
+ *   }
+ * </script>
+ * ```
+ */
+export default class Autocomplete extends LitElement {
+  /**
+   * The MutationObserver instance used to watch for changes in slotted children.
+   */
+  protected observer?: MutationObserver
+
+  /**
+   * The ID of the input element, generated if not provided.
+   * This is used for CSS anchoring and to ensure unique IDs for accessibility.
+   */
+  @state() protected accessor inputId = ''
+
+  /**
+   * The reference to the slotted input element.
+   * This should be an `HTMLInputElement` or behave like one.
+   */
+  protected inputRef?: HTMLInputElement | HTMLElement | null
+  /**
+   * The reference to the slotted suggestions element, which should be a `ui-listbox`.
+   * This is used to manage the suggestions popover and filtering.
+   */
+  protected suggestionsRef?: UiListbox | null
+
+  /**
+   * Checks if the suggestions popover is currently open.
+   */
+  get opened(): boolean {
+    return this.suggestionsRef?.matches(':popover-open') || false
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this.observer = new MutationObserver(this.handleMutations.bind(this))
+    this.observer.observe(this, { childList: true })
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.observer?.disconnect()
+    this.observer = undefined
+    this.clearInputListeners()
+    this.clearSuggestionsListeners()
+  }
+
+  protected override firstUpdated(cp: PropertyValues): void {
+    super.firstUpdated(cp)
+    this.firstSetup()
+  }
+
+  /**
+   * Performs initial setup after the first update, ensuring that slotted input
+   * and suggestions elements are configured.
+   */
+  async firstSetup(): Promise<void> {
+    await this.updateComplete
+    const input = this.shadowRoot?.querySelector('slot[name="input"]') as HTMLSlotElement | null
+    const suggestions = this.shadowRoot?.querySelector('slot[name="suggestions"]') as HTMLSlotElement | null
+    if (input) {
+      const elements = input.assignedElements()
+      if (elements.length > 0 && elements[0] instanceof HTMLElement) {
+        this.setupInput(elements[0])
+      }
+    }
+    if (suggestions) {
+      const elements = suggestions.assignedElements()
+      if (elements.length > 0 && elements[0] instanceof HTMLElement) {
+        // Assuming the slotted element is ui-listbox or compatible
+        this.setupSuggestions(elements[0] as UiListbox)
+      }
+    }
+  }
+
+  /**
+   * Handles mutations observed on the component's slotted children.
+   * This is used to set up or tear down input and suggestions elements when they are added or removed.
+   * @param mutations An array of MutationRecord objects.
+   */
+  protected handleMutations(mutations: MutationRecord[]): void {
+    for (const mutation of mutations) {
+      if (mutation.type === 'childList') {
+        for (const node of mutation.removedNodes) {
+          if (node instanceof HTMLElement) {
+            if (node.slot === 'input' && this.inputRef === node) {
+              this.clearInputListeners()
+            } else if (node.slot === 'suggestions' && this.suggestionsRef === node) {
+              this.clearSuggestionsListeners()
+            }
+          }
+        }
+        for (const node of mutation.addedNodes) {
+          if (node instanceof HTMLElement) {
+            if (node.slot === 'input') {
+              this.setupInput(node)
+            } else if (node.slot === 'suggestions') {
+              this.setupSuggestions(node as UiListbox)
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Clears event listeners from the current input reference and resets it.
+   */
+  protected clearInputListeners(): void {
+    if (this.inputRef) {
+      this.inputRef.removeEventListener('focus', this.handleInputFocus)
+      this.inputRef.removeEventListener('input', this.handleInput)
+      this.inputRef.removeEventListener('keydown', this.handleKeydown as EventListener)
+      this.inputRef.removeEventListener('blur', this.handleInputBlur)
+    }
+    this.inputRef = null
+  }
+
+  /**
+   * Clears event listeners from the current suggestions reference and resets it.
+   */
+  protected clearSuggestionsListeners(): void {
+    if (this.suggestionsRef) {
+      this.suggestionsRef.removeEventListener('select', this.handleSuggestionSelect as EventListener)
+      // If ui-listbox uses a slot for its items, listen to its slotchange
+      this.suggestionsRef.removeEventListener('itemschange', this.handleSuggestionsSlotChange)
+      if (this.suggestionsRef.matches(':popover-open')) {
+        this.suggestionsRef.hidePopover()
+      }
+    }
+    this.suggestionsRef = null
+  }
+
+  /**
+   * Sets up the slotted input element.
+   * Assigns an ID if necessary, sets up CSS anchoring, and attaches event listeners.
+   * @param input The HTMLElement to be used as the input.
+   */
+  protected setupInput(input: HTMLElement): void {
+    this.clearInputListeners() // Clear any old listeners
+    if (!input.id) {
+      this.inputId = `autocomplete-input-${Math.random().toString(36).substring(2, 15)}`
+      input.id = this.inputId
+    } else {
+      this.inputId = input.id
+    }
+    // Ensure CSS anchor positioning can work
+    input.style.setProperty('anchor-name', `--${this.inputId}`)
+
+    this.inputRef = input as HTMLInputElement // Assuming it behaves like an input
+    this.inputRef.addEventListener('focus', this.handleInputFocus)
+    this.inputRef.addEventListener('input', this.handleInput)
+    this.inputRef.addEventListener('keydown', this.handleKeydown as EventListener)
+    this.inputRef.addEventListener('blur', this.handleInputBlur)
+
+    // Apply initial filtering if suggestions are already present
+    if (this.suggestionsRef) {
+      this.suggestionsRef.style.setProperty('position-anchor', `--${this.inputId}`)
+      this.filterSuggestions((this.inputRef as HTMLInputElement).value || '')
+    }
+  }
+
+  /**
+   * Sets up the slotted suggestions element (assumed to be a `UiListbox`).
+   * Configures popover behavior, CSS anchoring, and attaches event listeners.
+   * @param suggestionsElement The `UiListbox` element to be used for suggestions.
+   */
+  protected setupSuggestions(suggestionsElement: UiListbox): void {
+    this.clearSuggestionsListeners() // Clear any old listeners
+
+    this.suggestionsRef = suggestionsElement
+    this.suggestionsRef.popover = 'manual'
+    this.suggestionsRef.tabIndex = -1 // Prevent direct focus
+
+    if (this.inputId) {
+      this.suggestionsRef.style.setProperty('position-anchor', `--${this.inputId}`)
+    }
+
+    this.suggestionsRef.addEventListener('select', this.handleSuggestionSelect as EventListener)
+    // The `List` dispatches `itemschange` when the slot changes, so we can listen to it.
+    this.suggestionsRef.addEventListener('itemschange', this.handleSuggestionsSlotChange)
+
+    // Initial filter
+    this.filterSuggestions(this.inputRef ? (this.inputRef as HTMLInputElement).value : '')
+  }
+
+  /**
+   * Handles the focus event on the input element.
+   * Opens the suggestions popover if there are items to display.
+   */
+  @bound
+  protected handleInputFocus(): void {
+    const items = this.suggestionsRef?.items
+    if (!items || items.length === 0) {
+      // If no suggestions, do not open
+      return
+    }
+    const active = items.find((item) => !item.hidden)
+    if (active) {
+      this.openSuggestions()
+      this.filterSuggestions(this.inputRef ? (this.inputRef as HTMLInputElement).value : '')
+    }
+  }
+
+  /**
+   * Handles the input event on the input element.
+   * Filters suggestions based on the input query and opens/closes the popover accordingly.
+   * @param event The input event.
+   */
+  @bound
+  protected handleInput(event: Event): void {
+    this.openSuggestions()
+    const query = (event.target as HTMLInputElement).value
+    this.filterSuggestions(query)
+  }
+
+  /**
+   * Handles keydown events on the input element for navigating and selecting suggestions.
+   * - ArrowDown/ArrowUp: Navigates the suggestion list.
+   * - Enter: Selects the highlighted suggestion.
+   * - Escape: Closes the suggestions popover.
+   * @param event The keyboard event.
+   */
+  @bound
+  protected handleKeydown(event: KeyboardEvent): void {
+    if (!this.suggestionsRef) return
+
+    const { key } = event
+    const isSuggestionsOpen = this.suggestionsRef.matches(':popover-open')
+
+    if (['ArrowDown', 'ArrowUp'].includes(key)) {
+      event.preventDefault()
+      if (!isSuggestionsOpen) {
+        this.openSuggestions()
+        // Give popover a moment to open before trying to highlight
+        requestAnimationFrame(() => this.navigateList(key))
+      } else {
+        this.navigateList(key)
+      }
+    } else if (key === 'Enter') {
+      if (isSuggestionsOpen && this.suggestionsRef.highlightListItem) {
+        event.preventDefault()
+        this.suggestionsRef.notifySelect(this.suggestionsRef.highlightListItem)
+      }
+    } else if (key === 'Escape') {
+      if (isSuggestionsOpen) {
+        event.preventDefault()
+        this.closeSuggestions()
+      }
+    }
+  }
+
+  /**
+   * Navigates the suggestion list based on the pressed key.
+   * @param key The key that was pressed (ArrowDown or ArrowUp).
+   */
+  protected navigateList(key: string): void {
+    if (!this.suggestionsRef) return
+    switch (key) {
+      case 'ArrowDown':
+        this.suggestionsRef.highlightNext()
+        break
+      case 'ArrowUp':
+        this.suggestionsRef.highlightPrevious()
+        break
+      // Don't handle Home or End keys here, as they break the usability of the input.
+    }
+  }
+
+  /**
+   * Handles the blur event on the input element.
+   * Closes the suggestions popover if focus moves outside the autocomplete component.
+   */
+  @bound
+  protected handleInputBlur(): void {
+    // We use the manual popover mode, so we need to close suggestions
+    // when the input loses focus, but only the current active element is not part of the suggestions.
+    requestAnimationFrame(() => {
+      if (
+        !this.inputRef?.contains(document.activeElement) &&
+        (!this.suggestionsRef || !this.suggestionsRef.contains(document.activeElement))
+      ) {
+        this.closeSuggestions()
+      }
+    })
+  }
+
+  /**
+   * Handles the `select` event dispatched by the `ui-listbox` when a suggestion is chosen.
+   * Dispatches an `autocomplete` event and closes the popover.
+   * @param event The custom event from `ui-listbox`.
+   */
+  @bound
+  protected handleSuggestionSelect(event: CustomEvent): void {
+    event.stopPropagation()
+    const selectedItem = event.detail.item as UiListItem
+    this.dispatchEvent(
+      new CustomEvent('autocomplete', {
+        detail: { item: selectedItem },
+        bubbles: false,
+        composed: false,
+      })
+    )
+    this.closeSuggestions()
+  }
+
+  /**
+   * Handles the `itemschange` event dispatched by the `ui-listbox` when its slotted items change.
+   * Re-filters the suggestions.
+   */
+  @bound
+  protected handleSuggestionsSlotChange(): void {
+    const value = this.inputRef ? (this.inputRef as HTMLInputElement).value : ''
+    if (!value) {
+      return
+    }
+    this.openSuggestions()
+    this.filterSuggestions(value)
+  }
+
+  /**
+   * Opens the suggestions popover if it's not already open and there are visible items.
+   */
+  protected openSuggestions(): void {
+    if (this.suggestionsRef && !this.suggestionsRef.matches(':popover-open')) {
+      this.suggestionsRef.showPopover()
+    }
+  }
+
+  /**
+   * Closes the suggestions popover if it's open and clears any highlighted item.
+   */
+  protected closeSuggestions(): void {
+    if (this.suggestionsRef && this.suggestionsRef.matches(':popover-open')) {
+      this.suggestionsRef.hidePopover()
+    }
+  }
+
+  /**
+   * Filters the suggestions based on the provided query.
+   * Hides items that do not match and manages the highlighted item state.
+   * @param query The search query string.
+   */
+  protected filterSuggestions(query: string): void {
+    if (!this.suggestionsRef) {
+      return
+    }
+
+    const lowerCaseQuery = query.toLowerCase().trim()
+    let firstVisibleItem: UiListItem | null = null
+
+    // The `items` getter in `List.ts` (parent of UiListbox) correctly gets assigned elements.
+    const items = this.suggestionsRef.items as UiListItem[]
+
+    for (const item of items) {
+      let matches = false
+      if (lowerCaseQuery === '') {
+        matches = true
+      } else if (item.dataset.index) {
+        const indexFields = item.dataset.index.split(' ').filter(Boolean)
+        for (const field of indexFields) {
+          const valueToSearch = item.dataset[field] || ''
+          if (valueToSearch.toLowerCase().includes(lowerCaseQuery)) {
+            matches = true
+            break
+          }
+        }
+      } else {
+        const valueToSearch = item.dataset.value || item.textContent || ''
+        matches = valueToSearch.toLowerCase().includes(lowerCaseQuery)
+      }
+      item.hidden = !matches
+      if (matches && !firstVisibleItem) {
+        firstVisibleItem = item
+      }
+    }
+
+    // If the currently highlighted item is now hidden, try to highlight the first visible one or clear.
+    if (this.suggestionsRef.highlightListItem?.hidden) {
+      // the highlightListItem clears the highlighted item if it is not passed an argument.
+      this.suggestionsRef?.highlightItem(firstVisibleItem)
+    }
+    if (!firstVisibleItem) {
+      // Close if no items are visible
+      this.closeSuggestions()
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <slot name="input"></slot>
+      <slot name="suggestions"></slot>
+    `
+  }
+}

package/src/elements/dialog/internals/DeleteCookieAction.element.ts

@@ -4,7 +4,7 @@ import { live } from 'lit/directives/live.js'
 import { ClassInfo, classMap } from 'lit/directives/class-map.js'
 import UiDialog from '../../../md/dialog/internals/Dialog.js'
 import type Input from '../../../md/input/Input.js'
-import '../../../md/text-field/ui-text-field.js'
+import '../../../md/text-field/ui-filled-text-field.js'
 import {
   DeleteCookieStep,
   type IDeleteCookieStep,
@@ -74,7 +74,7 @@ export default class DeleteCookieAction extends UiDialog {
     return html`
       <div class="content">
         <div class="param-row">
-          <ui-text-field
+          <ui-filled-text-field
             name="name"
             label="Cookie name"
             type="text"
@@ -82,10 +82,10 @@ export default class DeleteCookieAction extends UiDialog {
             @change="${this.handleNameChange}"
             class="input"
             supportingText="Leave empty to delete all cookies for the URL."
-          ></ui-text-field>
+          ></ui-filled-text-field>
         </div>
         <div class="param-row">
-          <ui-text-field
+          <ui-filled-text-field
             name="url"
             label="Cookie URL"
             type="url"
@@ -93,7 +93,7 @@ export default class DeleteCookieAction extends UiDialog {
             @change="${this.handleUrlChange}"
             class="input"
             supportingText="When the URL is not set then the request URL is used."
-          ></ui-text-field>
+          ></ui-filled-text-field>
         </div>
       </div>
     `

package/src/elements/dialog/internals/Rename.ts

@@ -7,7 +7,7 @@ import type Input from '../../../md/input/Input.js'
 
 import '../../../md/button/ui-text-button.js'
 import '../../../md/icons/ui-icon.js'
-import '../../../md/text-field/ui-text-field.js'
+import '../../../md/text-field/ui-filled-text-field.js'
 
 /**
  * A dialog that requests the user for the new name.
@@ -94,7 +94,7 @@ export default class RenameDialogElement extends UiDialog {
     const value = this.newValue || this.name || ''
     return html`
       <div class="content">
-        <ui-text-field
+        <ui-filled-text-field
           class="file-name"
           type="text"
           name="name"
@@ -104,7 +104,7 @@ export default class RenameDialogElement extends UiDialog {
           @keydown="${this.handleInputKeyDown}"
           .value="${live(value)}"
           label="Enter new name"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </div>
     `
   }

package/src/elements/dialog/internals/SetCookieAction.element.ts

@@ -8,7 +8,7 @@ import type CheckboxElement from '../../../md/checkbox/internals/CheckboxElement
 import { type ISetCookieStep, SetCookieStep } from '@api-client/core/models/http-flows/steps/data/SetCookieStep.js'
 import type { SameSiteValue } from '@api-client/core/cookies/CookieParser.js'
 
-import '../../../md/text-field/ui-text-field.js'
+import '../../../md/text-field/ui-filled-text-field.js'
 import '../../../md/checkbox/ui-checkbox.js'
 
 /**
@@ -91,7 +91,7 @@ export default class SetCookieAction extends UiDialog {
     return html`
       <div class="content">
         <div class="param-row">
-          <ui-text-field
+          <ui-filled-text-field
             name="name"
             label="Cookie name"
             type="text"
@@ -100,11 +100,11 @@ export default class SetCookieAction extends UiDialog {
             @change="${this.handleValueChange}"
             class="input"
             supportingText="The name of the cookie to set."
-          ></ui-text-field>
+          ></ui-filled-text-field>
         </div>
 
         <div class="param-row">
-          <ui-text-field
+          <ui-filled-text-field
             name="url"
             label="Cookie URL"
             type="url"
@@ -112,29 +112,29 @@ export default class SetCookieAction extends UiDialog {
             @change="${this.handleValueChange}"
             class="input"
             supportingText="When the URL is not set then the request URL is used."
-          ></ui-text-field>
+          ></ui-filled-text-field>
         </div>
 
         <div class="param-row">
-          <ui-text-field
+          <ui-filled-text-field
             name="expires"
             label="Expires"
             .value="${live(expires)}"
             @change="${this.handleValueChange}"
             class="input"
             supportingText="A valid cookie date or relative time like 4d, 600s, etc."
-          ></ui-text-field>
+          ></ui-filled-text-field>
         </div>
 
         <div class="param-row">
-          <ui-text-field
+          <ui-filled-text-field
             name="sameSite"
             label="Same site"
             .value="${live(sameSite)}"
             @change="${this.handleSameSiteChange}"
             class="input"
             .list="${['Lax', 'Strict', 'None']}"
-          ></ui-text-field>
+          ></ui-filled-text-field>
         </div>
 
         <div class="checkbox-row">

package/src/elements/environment/EnvironmentEditor.styles.ts

@@ -6,7 +6,7 @@ export default css`
     max-width: 900px;
   }
 
-  ui-text-field {
+  ui-filled-text-field {
     margin: 0;
     width: 100%;
   }

package/src/elements/environment/EnvironmentEditor.ts

@@ -20,7 +20,7 @@ import { TabSelectionDetail } from '../../md/tabs/internals/Tabs.js'
 import '../../define/environment/server-editor.js'
 import '../../define/environment/variables-editor.js'
 import '../../md/icons/ui-icon.js'
-import '../../md/text-field/ui-text-field.js'
+import '../../md/text-field/ui-filled-text-field.js'
 import '../../md/switch/ui-switch.js'
 import '../../md/icon-button/ui-icon-button.js'
 import '../../md/button/ui-filled-tonal-button.js'
@@ -256,13 +256,13 @@ export default class EnvironmentEditor extends ApiElement {
   protected renderNameInput(): TemplateResult {
     const { environment } = this
     return html` <div class="form-item">
-      <ui-text-field
+      <ui-filled-text-field
         name="name"
         label="Environment name"
         required
         .value="${live(environment.info.name || '')}"
         @change="${this.handleNameChange}"
-      ></ui-text-field>
+      ></ui-filled-text-field>
     </div>`
   }
 

package/src/elements/environment/ServerEditor.styles.ts

@@ -9,7 +9,7 @@ export default css`
     margin: 20px 0;
   }
 
-  ui-text-field {
+  ui-filled-text-field {
     margin: 0;
     width: 100%;
   }