.. role:: clio-optional
   :class: clio-flag clio-flag-optional


##############
HoopsAccordion
##############

.. js:class:: ui.accordion.HoopsAccordion

   A custom web component that implements an accessible accordion using LitElement.
   
   .. rubric:: Examples
   
   
   .. code-block:: ts
   
      <hoops-accordion expanded><span slot="header">My Header</span><div slot="content">Content here</div></hoops-accordion>
   
   .. rubric:: Custom Element
   
   
   ``hoops-accordion``
   
   .. rubric:: Attributes
   
   
   **expanded**
   
   
      Indicates whether the accordion is expanded
   
   
   **disabled**
   
   
      Indicates whether the accordion is disabled
   
   
   **level**
   
   
      The aria-level attribute for the heading element
   
   
   .. rubric:: Slots
   
   
   **header**
   
   
      Slot for the accordion header content
   
   
   **toolbar**
   
   
      Slot for the accordion header toolbar
   
   
   **icon**
   
   
      Slot for the accordion icon, defaults to an arrow icon
   
   
   **content**
   
   
      Slot for the accordion content
   
   
   .. rubric:: Events
   
   
   **change**
   
   
      Dispatched when the accordion is toggled
   
   
   .. rubric:: CSS Properties
   
   
   **--hoops-svg-accent-color**
   
   
      The accent color for the accordion
   
   
   **--hoops-svg-fill-color**
   
   
      The fill color for the accordion icon
   
   
   **--hoops-background**
   
   
      The background color for the accordion panel
   
   
   **--hoops-neutral-background-50**
   
   
      The background color of accordion button
   
   
   **--hoops-foreground**
   
   
      The foreground color for the accordion text
   
   
   .. rubric:: CSS Parts
   
   
   **button**
   
   
      The button element that toggles the accordion
   
   
   **panel**
   
   
      The panel element that contains the accordion content
   
   
   .. rubric:: Since
   
   
   ``2025.8.0``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~ui.accordion.HoopsAccordion.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~ui.accordion.HoopsAccordion.disabled`
   * :js:data:`~ui.accordion.HoopsAccordion.expanded`
   * :js:data:`~ui.accordion.HoopsAccordion.level`
   
   



.. rst-class:: kind-group kind-constructors

.. rubric:: Constructors
   :class: kind-group-title


.. js:method:: ui.accordion.HoopsAccordion.constructor

      .. rst-class:: sig-pretty-signature
      
         | HoopsAccordion(): :js:class:`HoopsAccordion <ui.accordion.HoopsAccordion>`
      
      **Returns**\ : :js:class:`HoopsAccordion <ui.accordion.HoopsAccordion>`
      



.. rst-class:: kind-group kind-properties

.. rubric:: Properties
   :class: kind-group-title


.. js:data:: ui.accordion.HoopsAccordion.disabled

      .. rst-class:: sig-pretty-signature
      
         | disabled: *boolean*
      



.. js:data:: ui.accordion.HoopsAccordion.expanded

      .. rst-class:: sig-pretty-signature
      
         | expanded: *boolean*
      



.. js:data:: ui.accordion.HoopsAccordion.level

      .. rst-class:: clio-flags
      
         :clio-optional:`optional`
      
      .. rst-class:: sig-pretty-signature
      
         | level: *number*
      




