{# @description A quotation under one oversized quotation mark in a colour of the theme. The mark does the announcing, so the words need none of their own. #}
{# @prop name:text | description:"Who said it" #}
{# @prop role:text | description:"What they do and where" #}
{# @prop source:text | description:"The work it comes from" #}
{# @prop href:text | description:"Where the source can be read" #}
{# @prop src:text | description:"A portrait of the person" #}
{# @prop variant:select['primary', 'secondary', 'accent', 'neutral', 'base-300'] | default:"primary" | description:"The colour of the mark" #}
{# @prop align:select['start', 'centre'] | default:"start" | description:"Set from the leading edge, or centred" #}
{# @prop size:select['md', 'lg'] | default:"md" | description:"How large the words are set" #}
{# @prop class:text | description:"Extra classes on the figure" #}
{# @slot Good tools get out of the way. — What was said, without quotation marks #}
{% comment %}
  The mark is hidden from assistive technology: read aloud it is the word
  "quote" ahead of a quotation the markup already announces. Its box is half
  its own height, because the glyph sits in the top half of the line.
{% endcomment %}
<c-vars name role source href src variant="primary" align="start" size="md" class />
<figure class="dce:flex dce:flex-col dce:gap-4
               {% if align == 'centre' %}dce:mx-auto dce:items-center dce:text-center{% endif %}
               {% if size == 'lg' %}dce:max-w-3xl{% else %}dce:max-w-2xl{% endif %}
               {{ class }}"
        {{ attrs }}>
  <span aria-hidden="true"
        class="dce:h-[0.5em] dce:font-serif dce:leading-none dce:select-none dce:text-{{ variant }}
               {% if size == 'lg' %}dce:text-8xl{% else %}dce:text-7xl{% endif %}">&ldquo;</span>
  <blockquote {% if href %}cite="{{ href }}"{% endif %}
              class="dce:font-medium dce:text-balance
                     {% if size == 'lg' %}dce:text-2xl dce:leading-snug dce:sm:text-4xl{% else %}dce:text-xl dce:leading-relaxed dce:sm:text-2xl{% endif %}">
    {{ slot }}
  </blockquote>
  {% if name or role or source %}
    <c-quote.byline name="{{ name }}" role="{{ role }}" source="{{ source }}" href="{{ href }}" src="{{ src }}" align="{{ align }}" class="dce:mt-2" only />
  {% endif %}
</figure>