Clamp text

<brio-clamp-text lines="3">
                <p>
                    This text is clamped to three lines with a subtle gradient fade at the bottom.
                    Clicking the toggle reveals the rest of the content. Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                </p>
            </brio-clamp-text>

<div class="stack">
                <brio-clamp-text lines="2">
                    <p>
                        Two-line clamp with a shorter fade. This text demonstrates how the gradient
                        fade adjusts based on the line count. Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco.
                    </p>
                </brio-clamp-text>
                <brio-clamp-text lines="4">
                    <p>
                        Four-line clamp with a taller fade area. The gradient spans approximately
                        twice as much space as the two-line version. Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                        dolor. In reprehenderit in voluptate velit esse cillum dolore eu fugiat
                        nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                        culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit
                        amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                        aute irure dolor. In reprehenderit in voluptate velit esse cillum dolore eu
                        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
                        in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </brio-clamp-text>
            </div>

<brio-clamp-text lines="3">
                <p>
                    Long text with a custom-styled toggle button. The component finds the slotted
                    button via data-clamp-toggle and manages its ARIA state and text automatically.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
                </p>
                <button class="button is-sm is-primary" data-clamp-toggle>Read more</button>
            </brio-clamp-text>

<brio-clamp-text lines="3" read-more="Show more" read-less="Show less">
                <p>
                    Custom toggle text via read-more and read-less attributes. The button text
                    automatically updates between your custom labels. Lorem ipsum dolor sit amet,
                    consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                    laboris nisi ut aliquip.
                </p>
            </brio-clamp-text>

<brio-clamp-text lines="3" expanded="true">
                <p>
                    Starts in the expanded state. The toggle button reads "Read less" initially and
                    will switch to "Read more" when clicked. Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                    ut aliquip ex ea commodo consequat.
                </p>
            </brio-clamp-text>

<div class="grid" style="--grid-min: 17.5rem; --grid-gap: var(--space-md)">
                <div class="card">
                    <h3>Short testimonial</h3>
                    <brio-clamp-text lines="4">
                        <p>
                            "Great product that works exactly as advertised. I was up and running in
                            minutes with zero configuration needed."
                        </p>
                    </brio-clamp-text>
                </div>
                <div class="card">
                    <h3>Long testimonial</h3>
                    <brio-clamp-text lines="4">
                        <p>
                            "I've been using this for six months and it has completely transformed
                            my entire workflow. The team is incredibly responsive to questions and
                            feature requests, the documentation is crystal clear, and the API is an
                            absolute joy to work with. I've already recommended this to all my
                            colleagues and friends without hesitation."
                        </p>
                    </brio-clamp-text>
                </div>
                <div class="card">
                    <h3>Medium testimonial</h3>
                    <brio-clamp-text lines="4">
                        <p>
                            "Solid choice overall. The onboarding process was surprisingly smooth
                            and whenever I had questions, the support team responded quickly with
                            helpful answers."
                        </p>
                    </brio-clamp-text>
                </div>
            </div>

<div class="card" style="--clamp-text-fade-color: var(--color-surface-raised)">
                <brio-clamp-text lines="3">
                    <p>
                        This clamp-text sits on a card surface with a raised background. The fade
                        gradient blends into the card background by overriding
                        --clamp-text-fade-color to match. Lorem ipsum dolor sit amet, consectetur
                        adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
                        aliqua. Ut enim ad minim veniam, quis nostrud.
                    </p>
                </brio-clamp-text>
            </div>

<div class="stack">
                <div
                    class="clamp-text"
                    style="--clamp-text-lines: 3"
                    aria-expanded="false"
                    id="manual-clamp"
                >
                    <p class="clamp-text-content">
                        CSS-only clamp without the custom element. The visual clamping and fade are
                        applied via CSS. Without JS, the button won't toggle automatically, but you
                        can manage aria-expanded yourself as shown here. Lorem ipsum dolor sit amet,
                        consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Ut enim ad minim veniam.
                    </p>
                    <button
                        class="button is-sm clamp-text-toggle"
                        onclick="
                            var el = document.getElementById('manual-clamp');
                            var isExpanded = el.getAttribute('aria-expanded') === 'true';
                            el.setAttribute('aria-expanded', String(!isExpanded));
                            this.textContent = isExpanded ? 'Read more' : 'Read less';
                        "
                    >
                        Read more
                    </button>
                </div>
                <!-- The .is-N-lines classes set --clamp-text-lines for you, so no
                    inline style is needed: is-1-line through is-5-lines, and
                    .is-responsive as an empty hook for your own breakpoint
                    overrides. -->
                <div class="clamp-text is-2-lines" aria-expanded="false" id="manual-clamp-2">
                    <p class="clamp-text-content">
                        The same CSS-only shape, clamped through the .is-2-lines class instead of an
                        inline --clamp-text-lines. The classes exist for consumers who would rather
                        keep the line count in markup than in a style attribute. Lorem ipsum dolor
                        sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.
                    </p>
                    <button
                        class="button is-sm clamp-text-toggle"
                        onclick="
                            var el = document.getElementById('manual-clamp-2');
                            var isExpanded = el.getAttribute('aria-expanded') === 'true';
                            el.setAttribute('aria-expanded', String(!isExpanded));
                            this.textContent = isExpanded ? 'Read more' : 'Read less';
                        "
                    >
                        Read more
                    </button>
                </div>
            </div>

<brio-clamp-text
                lines="3"
                style="--clamp-text-fade-height: 2em; --clamp-text-fade-color: oklch(90% 0 0)"
            >
                <p>
                    Custom fade height (2em instead of the default 1.5em) and a light gray fade
                    color. Override --clamp-text-fade-height and --clamp-text-fade-color for custom
                    effects. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation.
                </p>
            </brio-clamp-text>