$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
name: Accordion Item
status: experimental
description: An accordion item component with accordion header and accordion body.
props:
  type: object
  properties:
    item_id:
      type: string
      title: Item ID
      description: The target ID for the accordion item. 
      default: ''
    accordion_id:
      type: string
      title: Accordion ID
      description: Unique ID for the accordion component.
      default: ''
    header_tag:
      type: string
      title: Header tag
      description: The HTML (h1, h2, h3, h4, h5, or h6) header tag.
      default: h4
      enum:
        - h1
        - h2
        - h3
        - h4
        - h5
        - h6
    collapsable:
      type: boolean
      title: Collapsable Accordion item
      description: Have a collapsed or collapsable accordion item.
      default: true
    expanded:
      type: boolean
      title: Expanded
      description: Set the accordion item as expanded.
      default: true
    accordion_item_utility_classes:
      type: array
      title: Utility Classes
      default: []
      items:
        type: 'string'
      description: An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to the root accordion item wrapper.
    accordion_item_header_utility_classes:
      type: array
      title: Header Utility Classes
      default: []
      items:
        type: 'string'
      description: An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to the accordion header wrapper.
    accordion_item_body_utility_classes:
      type: array
      title: Body Utility Classes
      default: []
      items:
        type: 'string'
      description: An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to the accordion body wrapper.
    accordion_item_button_utility_classes:
      type: array
      title: Header Button Utility Classes
      default: []
      items:
        type: 'string'
      description: An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to the accordion header button.
    accordion_item_collapse_utility_classes:
      type: array
      title: Body collapse Utility Classes
      default: []
      items:
        type: 'string'
      description: An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to the accordion body collapse wrapper.
    attributes:
      type: object
      title: Attributes
      description: HTML attributes for the root accordion item wrapper element.
      $ref: 'ui-patterns://attributes'
    header_attributes:
      type: object
      title: Header Attributes
      description: HTML attributes for the accordion header wrapper element.
      $ref: 'ui-patterns://attributes'
    body_attributes:
      type: object
      title: Body Attributes
      description: HTML attributes for the accordion body wrapper element.
      $ref: 'ui-patterns://attributes'
    button_attributes:
      type: object
      title: Header Button Attributes
      description: HTML attributes for the accordion header button element.
      $ref: 'ui-patterns://attributes'
    collapse_attributes:
      type: object
      title: Collapse Attributes
      description: HTML attributes for the accordion collapse wrapper element for the accordion body.
      $ref: 'ui-patterns://attributes'
slots:
  header:
    type: string
    title: Accordion header
    description: The heading part of the accordion item.
    default: ''
  body:
    type: string
    title: Accordion body
    description: The content body part of the accordion item.
    default: ''
libraryOverrides:
  dependencies:
    - vartheme_bs5/bs-collapse-script
    - vartheme_bs5/bs-dropdown-script
