// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page BaseShowcase {
  layout = "showcase"
  seo {
    title = "Base components"
    description = "27 base components from @wrnexus/ui."
  }
  view {
    <header class="showcase-hero showcase-hero--category">
      <span class="showcase-eyebrow">Component category</span>
      <h1 class="showcase-title">Base</h1>
      <p class="showcase-description">27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
      <div class="category-meta"><span>27 components</span><span>Multiple use cases</span><span>169 live configurations</span></div>
    </header>
    <div class="catalog-grid">
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Accordion" size="default" color="primary" id="accordion-example-1" items="[{&quot;value&quot;:&quot;first&quot;,&quot;label&quot;:&quot;Accordion #1&quot;,&quot;content&quot;:&quot;This is the item&#39;s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.&quot;},{&quot;value&quot;:&quot;second&quot;,&quot;label&quot;:&quot;Accordion #2&quot;,&quot;content&quot;:&quot;This is the item&#39;s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.&quot;},{&quot;value&quot;:&quot;third&quot;,&quot;label&quot;:&quot;Accordion #3&quot;,&quot;content&quot;:&quot;This is the item&#39;s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.&quot;}]" defaultOpen="[&quot;first&quot;]" contentItalic="true"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p></div>
          <div class="catalog-card-footer"><span>17 props · 0 slots</span><a href="/components/accordion">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Alert" color="dark" variant="solid" radius="lg" shadow="sm" title="Dark alert!" description="You should check in on some of those fields below." items="[]" actions="[]" showIcon="false" dismissible="false" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="true"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p></div>
          <div class="catalog-card-footer"><span>21 props · 0 slots</span><a href="/components/alert">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="xs" color="primary" variant="solid" shape="circle"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p></div>
          <div class="catalog-card-footer"><span>18 props · 0 slots</span><a href="/components/avatar">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="AvatarGroup" items="[{&quot;src&quot;:&quot;/avatar-example.svg&quot;,&quot;name&quot;:&quot;Mark Wanner&quot;,&quot;alt&quot;:&quot;Mark Wanner&quot;},{&quot;src&quot;:&quot;/avatar-example-2.svg&quot;,&quot;name&quot;:&quot;Maria Guan&quot;,&quot;alt&quot;:&quot;Maria Guan&quot;},{&quot;src&quot;:&quot;/avatar-example-3.svg&quot;,&quot;name&quot;:&quot;Amil Evara&quot;,&quot;alt&quot;:&quot;Amil Evara&quot;},{&quot;initials&quot;:&quot;EE&quot;,&quot;name&quot;:&quot;Ebele Egbuna&quot;,&quot;color&quot;:&quot;info&quot;}]" size="lg" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Avatar Group</h2><p>Theme-aware, responsive avatar group component.</p></div>
          <div class="catalog-card-footer"><span>12 props · 0 slots</span><a href="/components/avatar-group">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Badge" label="Active" size="md" color="success" variant="solid" shape="pill"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p></div>
          <div class="catalog-card-footer"><span>22 props · 0 slots</span><a href="/components/badge">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Blockquote" quote="I just wanted to say that I&#39;m very happy with my purchase so far. The documentation is outstanding - clear and detailed." size="md" color="primary" align="left" variant="default" quoteMark="true" italic="true"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p></div>
          <div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/blockquote">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Button" label="Save &amp; Submit" as="button" type="submit" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Button</h2><p>Theme-aware, responsive button component.</p></div>
          <div class="catalog-card-footer"><span>25 props · 1 slots</span><a href="/components/button">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Profile&quot;,&quot;value&quot;:&quot;profile&quot;},{&quot;label&quot;:&quot;Settings&quot;,&quot;value&quot;:&quot;settings&quot;},{&quot;label&quot;:&quot;Messages&quot;,&quot;value&quot;:&quot;messages&quot;}]" value="profile" size="md" color="primary" variant="outline" orientation="horizontal" attached="true" selectable="true"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Button Group</h2><p>Theme-aware, responsive button group component.</p></div>
          <div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/button-group">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Card" title="Card title" description="Some quick example text to build on the card title and make up the bulk of the card&#39;s content." imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" actionLabel="Go somewhere" actionHref="#card-demo" size="md" color="primary"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Card</h2><p>Theme-aware, responsive card component.</p></div>
          <div class="catalog-card-footer"><span>31 props · 1 slots</span><a href="/components/card">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Carousel" size="default" color="primary" title="" description="" items="[{&quot;label&quot;:&quot;First slide&quot;,&quot;title&quot;:&quot;First slide&quot;,&quot;description&quot;:&quot;Introduce the collection with a concise, focused message.&quot;},{&quot;label&quot;:&quot;Second slide&quot;,&quot;title&quot;:&quot;Second slide&quot;,&quot;description&quot;:&quot;Move through content using buttons, pagination, keyboard, or touch.&quot;},{&quot;label&quot;:&quot;Third slide&quot;,&quot;title&quot;:&quot;Third slide&quot;,&quot;description&quot;:&quot;Every interaction exposes useful public lifecycle and navigation events.&quot;},{&quot;label&quot;:&quot;Fourth slide&quot;,&quot;title&quot;:&quot;Fourth slide&quot;,&quot;description&quot;:&quot;Flexible for larger collections.&quot;},{&quot;label&quot;:&quot;Fifth slide&quot;,&quot;title&quot;:&quot;Fifth slide&quot;,&quot;description&quot;:&quot;Responsive at every viewport.&quot;},{&quot;label&quot;:&quot;Sixth slide&quot;,&quot;title&quot;:&quot;Sixth slide&quot;,&quot;description&quot;:&quot;Built with accessible semantics.&quot;}]" ariaLabel="Basic usage"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p></div>
          <div class="catalog-card-footer"><span>22 props · 1 slots</span><a href="/components/carousel">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{&quot;id&quot;:&quot;question&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;title&quot;:&quot;How can we help?&quot;,&quot;text&quot;:&quot;You can ask questions like:&quot;,&quot;bullets&quot;:[&quot;What&#39;s WireJS UI?&quot;,&quot;How many component examples are there?&quot;,&quot;Is there a PRO version?&quot;]},{&quot;id&quot;:&quot;request&quot;,&quot;direction&quot;:&quot;outgoing&quot;,&quot;author&quot;:&quot;AZ&quot;,&quot;text&quot;:&quot;what&#39;s wirejs ui?&quot;},{&quot;id&quot;:&quot;answer&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;text&quot;:&quot;WireJS UI is an open-source set of reusable UI components built for responsive applications.&quot;,&quot;links&quot;:[{&quot;label&quot;:&quot;Installation guide&quot;,&quot;href&quot;:&quot;/installation&quot;},{&quot;label&quot;:&quot;Framework guides&quot;,&quot;href&quot;:&quot;/framework-guides&quot;}]}]" oneSided="false" showAvatars="false" showMetadata="false" ariaLabel="Conversation"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Chat Bubble</h2><p>Theme-aware, responsive chat bubble component.</p></div>
          <div class="catalog-card-footer"><span>11 props · 1 slots</span><a href="/components/chat-bubble">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Collapse" size="default" color="primary" items="[{&quot;id&quot;:&quot;collapse-default-panel&quot;,&quot;label&quot;:&quot;Collapse&quot;,&quot;closeLabel&quot;:&quot;Collapse&quot;,&quot;content&quot;:&quot;This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused.&quot;}]" multiple="false" mode="panel" initialOpenIndexes="[]" ariaLabel="Default collapse"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Collapse</h2><p>Theme-aware, responsive collapse component.</p></div>
          <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/collapse">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="DatePicker" size="default" label="Date Picker" value="sample-1" placeholder="Enter a sample value" firstDayOfWeek="0" variant="normal" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Date Picker</h2><p>Theme-aware, responsive date picker component.</p></div>
          <div class="catalog-card-footer"><span>25 props · 0 slots</span><a href="/components/date-picker">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="DeviceFrame" size="default" title="Device Frame example" description="A polished default device frame for a modern application." items="[{&quot;id&quot;:&quot;device-frame-0-1&quot;,&quot;key&quot;:&quot;device-frame-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;device-frame-0-2&quot;,&quot;key&quot;:&quot;device-frame-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" frameTitle="Device Frame example" showToolbar="true" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Device Frame</h2><p>Theme-aware, responsive device frame component.</p></div>
          <div class="catalog-card-footer"><span>14 props · 1 slots</span><a href="/components/device-frame">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="FileUploadProgress" size="default" label="Uploading archive" value="42" max="100" showValue="true" fileName="design-system.zip" fileSize="20 MB" uploadedSize="8.4 MB" status="uploading" cancelLabel="File Upload Progress" retryLabel="File Upload Progress" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>File Upload Progress</h2><p>Theme-aware, responsive file upload progress component.</p></div>
          <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/file-upload-progress">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="LegendIndicator" size="default" title="Legend Indicator example" description="A polished default legend indicator for a modern application." items="[{&quot;id&quot;:&quot;legend-indicator-0-1&quot;,&quot;key&quot;:&quot;legend-indicator-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;legend-indicator-0-2&quot;,&quot;key&quot;:&quot;legend-indicator-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Legend Indicator</h2><p>Theme-aware, responsive legend indicator component.</p></div>
          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/legend-indicator">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="List" size="default" title="List example" description="A polished default list for a modern application." items="[{&quot;id&quot;:&quot;list-0-1&quot;,&quot;key&quot;:&quot;list-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;list-0-2&quot;,&quot;key&quot;:&quot;list-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>List</h2><p>Theme-aware, responsive list component.</p></div>
          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/list">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="ListGroup" size="default" title="List Group example" description="A polished default list group for a modern application." items="[{&quot;id&quot;:&quot;list-group-0-1&quot;,&quot;key&quot;:&quot;list-group-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;list-group-0-2&quot;,&quot;key&quot;:&quot;list-group-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>List Group</h2><p>Theme-aware, responsive list group component.</p></div>
          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/list-group">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Marquee" size="default" title="Marquee example" description="A polished default marquee for a modern application." items="[{&quot;id&quot;:&quot;marquee-0-1&quot;,&quot;key&quot;:&quot;marquee-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;marquee-0-2&quot;,&quot;key&quot;:&quot;marquee-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Marquee</h2><p>Theme-aware, responsive marquee component.</p></div>
          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/marquee">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Progress" size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Progress</h2><p>Theme-aware, responsive progress component.</p></div>
          <div class="catalog-card-footer"><span>7 props · 0 slots</span><a href="/components/progress">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Rating" size="default" title="Rating example" description="A polished default rating for a modern application." items="[{&quot;id&quot;:&quot;rating-0-1&quot;,&quot;key&quot;:&quot;rating-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;rating-0-2&quot;,&quot;key&quot;:&quot;rating-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Rating</h2><p>Theme-aware, responsive rating component.</p></div>
          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/rating">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Skeleton" label="Skeleton" size="md" lines="3" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Skeleton</h2><p>Theme-aware, responsive skeleton component.</p></div>
          <div class="catalog-card-footer"><span>5 props · 0 slots</span><a href="/components/skeleton">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Spinner" label="Spinner" size="md" lines="3" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Spinner</h2><p>Theme-aware, responsive spinner component.</p></div>
          <div class="catalog-card-footer"><span>5 props · 0 slots</span><a href="/components/spinner">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="StyledIcon" size="default" title="Styled Icon example" description="A polished default styled icon for a modern application." items="[{&quot;id&quot;:&quot;styled-icon-0-1&quot;,&quot;key&quot;:&quot;styled-icon-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#styled-icon-demo&quot;,&quot;actionHref&quot;:&quot;#styled-icon-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;styled-icon-0-2&quot;,&quot;key&quot;:&quot;styled-icon-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#styled-icon-demo&quot;,&quot;actionHref&quot;:&quot;#styled-icon-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Styled Icon</h2><p>Theme-aware, responsive styled icon component.</p></div>
          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/styled-icon">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Timeline" size="default" title="Timeline example" description="A polished default timeline for a modern application." items="[{&quot;id&quot;:&quot;timeline-0-1&quot;,&quot;key&quot;:&quot;timeline-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#timeline-demo&quot;,&quot;actionHref&quot;:&quot;#timeline-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;timeline-0-2&quot;,&quot;key&quot;:&quot;timeline-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#timeline-demo&quot;,&quot;actionHref&quot;:&quot;#timeline-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Timeline</h2><p>Theme-aware, responsive timeline component.</p></div>
          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/timeline">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="Toast" size="default" title="Toast example" description="A polished default toast for a modern application." items="[{&quot;id&quot;:&quot;toast-0-1&quot;,&quot;key&quot;:&quot;toast-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#toast-demo&quot;,&quot;actionHref&quot;:&quot;#toast-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;toast-0-2&quot;,&quot;key&quot;:&quot;toast-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#toast-demo&quot;,&quot;actionHref&quot;:&quot;#toast-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Toast</h2><p>Theme-aware, responsive toast component.</p></div>
          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/toast">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><div data-component="TreeView" size="default" title="Tree View example" description="A polished default tree view for a modern application." items="[{&quot;id&quot;:&quot;tree-view-0-1&quot;,&quot;key&quot;:&quot;tree-view-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#tree-view-demo&quot;,&quot;actionHref&quot;:&quot;#tree-view-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;tree-view-0-2&quot;,&quot;key&quot;:&quot;tree-view-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#tree-view-demo&quot;,&quot;actionHref&quot;:&quot;#tree-view-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Base</span><h2>Tree View</h2><p>Theme-aware, responsive tree view component.</p></div>
          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/tree-view">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article></div>
  }
}