Sections that open and close. Built on <details>, so it works with the keyboard, in assistive
technology and with no JavaScript. In exclusive mode (the default) opening one closes the others, which
the browser does itself through the shared name of the <details>.
Variants: :group is a bordered block with dividers and a plus or minus; :flush is bare rows with a line
under each; :plain is the canvas's default accordion, dividers and a chevron that turns; :card gives each
section its own card, with a lead (an icon, a score), a sub line, a tag and actions in the header. A section
can hold another accordion: nest a :plain one in the panel and it indents with a rule.
Summary
Functions
Attributes
id(:string) (required) - also thenamethat makes the sections exclusive.variant(:atom) - Defaults to:group. Must be one of:group,:flush,:plain, or:card.exclusive(:boolean) - Defaults totrue.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
item(required) - Accepts attributes:title(:string) (required)subtitle(:string) - a line under the title (:card).count(:any) - a small count shown beside the title.tag(:string) - a tag in the header (:card).tone(:atom) - the tone of the tag: risk, warn, ok, info or neutral.open(:boolean)disabled(:boolean)
lead- what sits before the title of a:card; gets%{index: n, title: text}.actions- what sits at the end of the header of a:card; gets%{index: n, title: text}.