/ Search

/ Defaults
- this.search = {}
- this.search.id = this.createId()
- this.search.ariaHidden = false
- this.search.tabindex = false
- this.search.close = false
- this.search.label = 'Search for programs';

/ Inherit overrides
- if (typeof search !== 'undefined')
  - this.search = Object.assign(this.search, search);

/! { @id           Identifies Search for toggling }
/! { @class        Add "o-search-fixed" in production layouts }
/! { @aria-hidden  Add aria-hidden="true" in production layouts }
div#aria-c-search class='o-search ${this.search.class}' aria-hidden=this.search.ariaHidden
  - if this.search.close
    div class='o-search__close'
      /! { @tabindex       Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }
      /! { @aria-controls  Targets the Search ID for toggling }
      /! { @aria-expanded  Indicates the toggled state of the target }
      button class='link-icon' data-js='toggle' aria-controls='aria-c-search' tabindex=this.search.tabindex aria-expanded='${this.search.ariaHidden ? 'false' : 'true' }'
        svg class='icon-ui'
          use href='#lucide-x'

        span Close

  form tabindex=this.search.tabindex class='o-search__form'
    - this.search.input = {}
    - this.search.input.id = this.createId()
    label class='label' for='${this.search.input.id}' tabindex=this.search.tabindex
      = this.search.label

    div class='input o-search__input'
      /! { @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }
      input type='text' name='s' value='' placeholder='Search' inputmode='search' data-js='search__input' id='${this.search.input.id}' tabindex=this.search.tabindex

      /! { @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }
      button class='o-search__submit' type='submit' tabindex=this.search.tabindex
        /! { @tabindex  Add tabindex="-1" to insure focusable elements are not visible when parent is hidden }
        svg class='icon-ui' tabindex=this.search.tabindex
          use href='#lucide-search'