Shine CSS framework

<div class="stack gap-3 w-full">
  <div class="cluster gap-2"><button class="btn" type="button">Solid</button><button class="btn btn-outline" type="button">Outline</button><button class="btn btn-soft" type="button">Soft</button><button class="btn btn-ghost" type="button">Ghost</button><button class="btn btn-link" type="button">Link</button><button class="btn btn-icon" type="button" aria-label="Favorite">★</button></div>
  <div class="cluster gap-2"><button class="btn tone-secondary" type="button">Secondary</button><button class="btn tone-accent" type="button">Accent</button><button class="btn tone-success" type="button">Success</button><button class="btn tone-warning btn-soft" type="button">Warning</button><button class="btn tone-danger btn-outline" type="button">Danger</button><button class="btn tone-info btn-ghost" type="button">Info</button></div>
  <div class="cluster gap-2"><button class="btn btn-sm" type="button">Small</button><button class="btn" type="button">Default</button><button class="btn btn-lg" type="button">Large</button><button class="btn" type="button" disabled>Disabled</button></div>
  <button class="btn btn-block" type="button">Block button</button>
</div>

<div class="btn-group" role="group" aria-label="Text alignment"><button class="btn btn-outline" type="button">Left</button><button class="btn btn-outline" type="button">Center</button><button class="btn btn-outline" type="button">Right</button></div>
<div class="btn-group" role="group" aria-label="Save"><button class="btn" type="button">Save</button><button class="btn btn-caret" type="button" popovertarget="demo-split" aria-label="More save options"></button></div>
<div id="demo-split" popover class="menu dropdown-menu dropdown-menu-end"><a href="#demo-button-group">Save as…</a><a href="#demo-button-group">Export PDF</a></div>
<div class="btn-group-vertical" role="group" aria-label="Sort"><button class="btn" type="button">Newest</button><button class="btn" type="button">Popular</button><button class="btn" type="button">Rating</button></div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
  <article class="card">
    <div class="card-header"><h4 class="card-title m-0">Header</h4></div>
    <div class="card-body">Radius and elevation follow the knobs.</div>
    <div class="card-footer cluster gap-2"><button class="btn btn-sm" type="button">Save</button><button class="btn btn-sm btn-ghost" type="button">Cancel</button></div>
  </article>
  <article class="card card-flat">
    <div class="card-media h-24 bg-primary" role="img" aria-label="Placeholder"></div>
    <div class="card-body"><h4 class="card-title m-0">Flat with media</h4><p class="text-muted text-sm m-0">No elevation, stretched link.</p><a class="stretched-link link text-sm" href="#components">Read more</a></div>
  </article>
</div>

<form class="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full" onsubmit="return false">
  <div class="field"><label class="label" for="g-name">Name</label><input class="input" id="g-name" placeholder="Ada Lovelace" autocomplete="off"><span class="hint">Helper text</span></div>
  <div class="field"><label class="label" for="g-mail">Email</label><input class="input is-invalid" id="g-mail" value="oops" aria-invalid="true" aria-describedby="g-mail-h"><span class="hint" id="g-mail-h">Enter a valid email</span></div>
  <div class="field"><label class="label" for="g-plan">Plan</label><select class="select" id="g-plan"><option>Free</option><option>Pro</option></select></div>
  <div class="field"><label class="label" for="g-lg">Large</label><input class="input input-lg" id="g-lg" placeholder="input-lg" autocomplete="off"></div>
  <div class="field sm:col-span-2"><label class="label" for="g-msg">Message</label><textarea class="textarea" id="g-msg" rows="2"></textarea></div>
  <div class="field"><label class="label" for="g-range">Volume</label><input class="range" type="range" id="g-range" value="40"></div>
  <div class="field"><label class="label" for="g-file">Upload</label><input class="file" type="file" id="g-file"></div>
  <div class="cluster gap-4 sm:col-span-2">
    <label class="flex items-center gap-2"><input type="checkbox" class="checkbox" checked> Checkbox</label>
    <label class="flex items-center gap-2"><input type="radio" class="radio" name="g-r" checked> Radio A</label>
    <label class="flex items-center gap-2"><input type="radio" class="radio" name="g-r"> Radio B</label>
    <label class="flex items-center gap-2"><input type="checkbox" class="switch" checked> Switch</label>
  </div>
</form>

<div class="stack gap-4 w-full">
  <div class="input-group"><span class="input-addon">@</span><label class="sr-only" for="g-user">Username</label><input class="input" id="g-user" placeholder="username" autocomplete="off"></div>
  <div class="input-group"><label class="sr-only" for="g-search">Search</label><input class="input" id="g-search" placeholder="Search components" autocomplete="off"><button class="btn" type="button">Search</button></div>
  <div class="floating"><input class="input" id="g-fl1" placeholder=" " autocomplete="off"><label for="g-fl1">Full name</label></div>
  <div class="floating"><textarea class="textarea" id="g-fl2" placeholder=" " rows="2"></textarea><label for="g-fl2">Notes</label></div>
</div>

<div class="stack gap-4 w-full">
  <div class="cluster gap-2"><span class="badge">Default</span><span class="badge tone-success">Success</span><span class="badge badge-solid tone-danger">Solid</span><span class="badge badge-outline tone-info">Outline</span><span class="badge tone-warning"><span class="dot tone-warning"></span> Pending</span></div>
  <div class="cluster gap-4">
    <span class="avatar">AB</span><span class="avatar tone-accent">CD</span>
    <div class="avatar-group"><span class="avatar">AL</span><span class="avatar tone-accent">GH</span><span class="avatar tone-success">KJ</span><span class="avatar tone-secondary">+4</span></div>
    <span class="indicator"><span class="indicator-item badge badge-solid tone-danger">3</span><button class="btn btn-outline" type="button">Inbox</button></span>
    <span>Press <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">K</kbd></span>
  </div>
</div>

<div class="stack gap-3 w-full">
  <div class="alert tone-info"><span class="alert-title">Info</span> A soft alert.</div>
  <div class="alert alert-solid tone-success"><span class="alert-title">Success</span> Your changes were saved.</div>
  <div class="alert alert-solid tone-warning"><span class="alert-title">Warning</span> Check your input.</div>
  <div class="alert alert-solid tone-danger"><span class="alert-title">Danger</span> Something failed.</div>
</div>

<button class="btn" type="button" command="show-modal" commandfor="g-modal">Open modal</button>
<dialog id="g-modal" class="modal" aria-labelledby="g-modal-t">
  <div class="modal-header"><h4 class="card-title m-0" id="g-modal-t">Modal title</h4><button class="btn-close" type="button" command="close" commandfor="g-modal" aria-label="Close"></button></div>
  <div class="modal-body">Native dialog: Esc or the backdrop closes it and focus is trapped by the browser.</div>
  <div class="modal-footer"><button class="btn btn-ghost" type="button" command="close" commandfor="g-modal">Cancel</button><button class="btn" type="button" command="close" commandfor="g-modal">OK</button></div>
</dialog>

<button class="btn btn-outline" type="button" popovertarget="g-oc">Left panel</button>
<button class="btn btn-outline" type="button" popovertarget="g-oc2">Right panel</button>
<aside id="g-oc" popover class="offcanvas" aria-label="Left panel">
  <div class="offcanvas-header"><strong>Menu</strong><button class="btn-close" type="button" popovertarget="g-oc" popovertargetaction="hide" aria-label="Close"></button></div>
  <div class="offcanvas-body"><ul class="menu"><li><a href="#components">Dashboard</a></li><li><a href="#components">Projects</a></li><li><a href="#components">Settings</a></li></ul></div>
</aside>
<aside id="g-oc2" popover class="offcanvas offcanvas-right" aria-label="Right panel">
  <div class="offcanvas-header"><strong>Filters</strong><button class="btn-close" type="button" popovertarget="g-oc2" popovertargetaction="hide" aria-label="Close"></button></div>
  <div class="offcanvas-body">Built on the Popover API.</div>
</aside>

<details class="dropdown"><summary class="btn btn-soft">Details dropdown</summary>
  <ul class="menu"><li><a href="#components" class="active">Profile</a></li><li><a href="#components">Settings</a></li><li><hr class="menu-divider"></li><li><button type="button">Sign out</button></li></ul></details>
<button class="btn btn-outline" type="button" popovertarget="g-pop">Popover menu</button>
<div id="g-pop" popover class="menu dropdown-menu"><ul class="list-none p-0 m-0"><li><a href="#components">Duplicate</a></li><li><a href="#components">Archive</a></li><li><button type="button">Delete</button></li></ul></div>

<button class="btn btn-outline" type="button" data-tooltip="Top tooltip">Top</button>
<button class="btn btn-outline" type="button" data-tooltip="Bottom tooltip" data-tooltip-pos="bottom">Bottom</button>
<button class="btn btn-outline" type="button" data-tooltip="Right tooltip" data-tooltip-pos="right">Right</button>
<button class="btn tone-success" type="button" popovertarget="g-toast">Show toast</button>
<div id="g-toast" popover="manual" class="toast tone-success" role="status"><strong>Saved.</strong> Your changes are live. <button class="btn-close" type="button" popovertarget="g-toast" popovertargetaction="hide" aria-label="Dismiss"></button></div>
<div class="toast tone-info w-full">A static toast is just a notice card.</div>

<nav class="navbar border rounded-lg w-full" aria-label="Demo navbar"><a class="navbar-brand" href="#components">Brand</a>
  <ul class="navbar-nav"><li><a href="#components" aria-current="page">Home</a></li><li><a href="#components">Docs</a></li><li><a href="#components">Pricing</a></li></ul>
  <a class="navbar-end btn btn-sm" href="#components">Sign in</a></nav>

<div class="stack gap-4 w-full">
  <nav aria-label="Breadcrumb"><ol class="breadcrumb"><li><a href="#components">Home</a></li><li><a href="#components">Library</a></li><li aria-current="page">Data</li></ol></nav>
  <nav aria-label="Pagination"><ul class="pagination"><li><span aria-disabled="true">Prev</span></li><li><a href="#components">1</a></li><li><a href="#components" aria-current="page">2</a></li><li><a href="#components">3</a></li><li><a href="#components">Next</a></li></ul></nav>
</div>

<div class="stack gap-4 w-full">
  <ul class="tabs"><li><a href="#components" aria-current="page">Overview</a></li><li><a href="#components">Usage</a></li><li><a href="#components">API</a></li></ul>
  <ul class="tabs tabs-pills"><li><a href="#components" aria-current="page">Day</a></li><li><a href="#components">Week</a></li><li><a href="#components">Month</a></li></ul>
</div>

<div class="accordion w-full">
  <details name="g-acc" open><summary>What is Shine?</summary><p>A single prebuilt stylesheet with utilities, components and design knobs.</p></details>
  <details name="g-acc"><summary>Does it need JavaScript?</summary><p>No. Native details, dialog and popover elements do the work.</p></details>
  <details name="g-acc"><summary>Can I override it?</summary><p>Yes. Shine lives in cascade layers, so your CSS always wins.</p></details>
</div>

<div class="table-wrap w-full"><table class="table table-striped table-hover table-stack">
  <caption>Sort arrows come from aria-sort (your JS sorts); rows stack into cards on phones.</caption>
  <thead><tr><th scope="col" aria-sort="ascending">Name</th><th scope="col" aria-sort="none">Role</th><th scope="col">Status</th><th scope="col" class="text-right">Commits</th></tr></thead>
  <tbody>
    <tr><td data-label="Name">Ada Lovelace</td><td data-label="Role">Engineer</td><td data-label="Status"><span class="badge tone-success">Active</span></td><td data-label="Commits" class="text-right">1,204</td></tr>
    <tr class="tone-warning"><td data-label="Name">Grace Hopper</td><td data-label="Role">Admiral</td><td data-label="Status"><span class="badge tone-warning">Away</span></td><td data-label="Commits" class="text-right">982</td></tr>
    <tr aria-selected="true"><td data-label="Name">Alan Turing</td><td data-label="Role">Researcher</td><td data-label="Status"><span class="badge tone-info">Selected</span></td><td data-label="Commits" class="text-right">640</td></tr>
  </tbody>
  <tfoot><tr><td>Total</td><td></td><td></td><td class="text-right">2,826</td></tr></tfoot>
</table></div>
<table class="table table-bordered table-compact w-full">
  <thead><tr><th scope="col">Plan</th><th scope="col" class="text-right">Price</th></tr></thead>
  <tbody><tr><td>Starter</td><td class="text-right">$0</td></tr><tr class="tone-danger"><td>Legacy</td><td class="text-right">Retiring</td></tr></tbody>
</table>

<div class="stack gap-4 w-full">
  <div><label class="label" for="g-prog">Uploading</label><progress class="progress" id="g-prog" value="60" max="100">60%</progress></div>
  <div><label class="label" for="g-meter">Disk usage</label><meter class="meter" id="g-meter" min="0" max="100" low="40" high="80" optimum="20" value="55">55%</meter></div>
  <div class="grid grid-cols-2 gap-4"><div class="stat"><span class="stat-label">Visitors</span><span class="stat-value">12.4k</span><span class="stat-desc">+8% vs. last week</span></div><div class="stat"><span class="stat-label">Bounce rate</span><span class="stat-value">32%</span><span class="stat-desc">-2.1 pts</span></div></div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
  <div class="list-group"><a href="#components" aria-current="true">Active item</a><a href="#components">Second item</a><a href="#components">Third item</a></div>
  <ul class="list-group"><li class="flex justify-between"><span>Inbox</span><span class="badge">12</span></li><li class="flex justify-between"><span>Drafts</span><span class="badge tone-warning">3</span></li><li class="flex justify-between"><span>Sent</span><span class="badge tone-success">48</span></li></ul>
</div>

<div class="carousel rounded-lg w-full" tabindex="0" role="group" aria-roledescription="carousel" aria-label="Demo slides">
  <div class="demo-slide tone-primary bg-primary">Slide 1</div><div class="demo-slide tone-accent bg-accent">Slide 2</div><div class="demo-slide tone-success bg-success">Slide 3</div>
</div>