Side sheets

<div style="display: flex">
  <div>
    content...
  </div>
  <mc-side-sheet onchange="page.oneOpen = this.open" id=one onback=this.close(); open=${page.oneOpen}>
    <div slot=headline>Headline</div>
  
    <div>
      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.
    </div>
  
    <mc-button onclick=this.parentElement.close() slot=action>cancel</mc-button>
    <mc-button onclick=this.parentElement.close() slot=action>save</mc-button>
  </mc-side-sheet>
</div>



<mc-side-sheet back hideclose modal onback=this.close(); open scrim></mc-side-sheet>
            

<div style="display: flex">
  <div>
    content...
  </div>
  <mc-side-sheet global modal>
    <div slot=headline>Headline</div>
  
    <h5>One</h5>
    <p>
      Lorem ipsum ...
    </p>
  
    <mc-button onclick=this.parentElement.close() slot=action>cancel</mc-button>
    <mc-button onclick=this.parentElement.close() slot=action>save</mc-button>
  </mc-side-sheet>
</div>
            

<mc-side-sheet hide-close id=formdialog>
  <div slot=headline>Headline</div>
  <form id=test method=dialog>
    <div style="font-size: 14px; margin-bottom: 8px;"><strong>Cancel</strong> checks for form changes and presents dialog</div>
    <div style="font-size: 14px; margin-bottom: 24px;"><strong>Save</strong> will validate the form</div>
    <div style="font-size: 14px; margin-bottom: 24px;"><strong>Close</strong> will disregard the form and close the sheet</div>
    <mc-textfield class=outlined label=Required required supporting-test=Required value=one></mc-textfield>
  </form>
  <mc-button onclick=formdialog.close() slot=action>close</mc-button>
  <mc-button form=test slot=action type=cancel>cancel</mc-button>
  <mc-button form=test slot=action type=submit>save</mc-button>
</mc-side-sheet>
            

/* Optional variables for overriding */

--mc-side-sheet-shape: var(--mc-shape-large);
--mc-side-sheet-container-color: var(--mc-surface);