
######################
HoopsMarkupItemElement
######################

.. js:class:: wvc.HoopsMarkupItemElement

   Renders one selectable markup item with icon and toolbar content.
   
   .. rubric:: Examples
   
   
   .. code-block:: html
   
      <hoops-markup-item markupId="markup-1" selected>
        Label
        <hoops-icon slot="icon"></hoops-icon>
      </hoops-markup-item>
   
   .. rubric:: Custom Element
   
   
   ``hoops-markup-item``
   
   .. rubric:: Attributes
   
   
   **markupId**
   
   
      Unique markup identifier
   
   
   **selected**
   
   
      Indicates whether the item is selected
   
   
   .. rubric:: Slots
   
   
   **- Slot for markup text label content**
   
   **icon**
   
   
      Slot for the markup type icon
   
   
   **toolbar**
   
   
      Slot for trailing markup actions
   
   
   .. rubric:: Events
   
   
   **hoops-select-markup**
   
   
      Emitted when the markup item is selected
   
   
   .. rubric:: CSS Properties
   
   
   **--hoops-foreground**
   
   
      Foreground color for row and separators
   
   
   **--hoops-accent-foreground**
   
   
      Accent color used on hover and selected states
   
   
   .. rubric:: Since
   
   
   ``2025.7.0``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~wvc.HoopsMarkupItemElement.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~wvc.HoopsMarkupItemElement.markupId`
   * :js:data:`~wvc.HoopsMarkupItemElement.selected`
   
   



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

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


.. js:method:: wvc.HoopsMarkupItemElement.constructor

      .. rst-class:: sig-pretty-signature
      
         | HoopsMarkupItemElement(): :js:class:`HoopsMarkupItemElement <wvc.HoopsMarkupItemElement>`
      
      **Returns**\ : :js:class:`HoopsMarkupItemElement <wvc.HoopsMarkupItemElement>`
      



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

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


.. js:data:: wvc.HoopsMarkupItemElement.markupId

      .. rst-class:: sig-pretty-signature
      
         | markupId: *string*
      



.. js:data:: wvc.HoopsMarkupItemElement.selected

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




