Sheets

This provides a handy way for displaying a drawer on the right hand side. It accepts a slot, so you can fill it with whatever content you wish.

<sheet>
   <sheet-trigger class="p-2 bg-white text-sm border border-[--gray] rounded-md text-black">
      Open
   </sheet-trigger>
   <sheet-content>
      <div class="p-4">
         <div class="row">
            <div class="col">
               <h5>Edit profile</h5>
               Make changes to your profile here. Click save when you're done.
            </div>
         </div>
         <div class="row">
            <div class="col">
               <label for="titlename">Name</label>
               <input 
                  class="form-control" 
                  type="text"
                  name="name" 
                  value="Pedro Duarte" 
                  placeholder="" />
            </div>
         </div>
         <div class="row">
            <div class="col">
               <label for="username">Username</label>
               <input 
                  class="form-control" 
                  type="text"
                  name="username" 
                  value="@pedroduarte" 
                  placeholder="" />
            </div>
         </div>
         <div class="row">
            <div class="col">
               <button-component variant="primary" class="w-full">
                  Save
               </button-component>
            </div>
         </div>
      </div>
   </sheet-content>
</sheet>