Bottom app bar

<mc-bottom-app-bar>
  <mc-icon-button>
    <mc-icon>more_vert</mc-icon>
  </mc-icon-button>

  <mc-icon-button>
    <mc-icon>search</mc-icon>
  </mc-icon-button>

  <mc-icon-button>
    <mc-icon>delete</mc-icon>
  </mc-icon-button>

  <mc-fab>
    <mc-icon>add</mc-icon>
  </mc-fab>
</mc-bottom-app-bar>
            

<mc-bottom-app-bar auto-hide>
  <mc-icon-button>
    <mc-icon>search</mc-icon>
  </mc-icon-button>

  <mc-icon-button>
    <mc-icon>delete</mc-icon>
  </mc-icon-button>

  <mc-fab>
    <mc-icon>add</mc-icon>
  </mc-fab>
</mc-bottom-app-bar>
            

<mc-bottom-app-bar>
  <mc-icon-button>
    <mc-icon>search</mc-icon>
  </mc-icon-button>

  <mc-icon-button>
    <mc-icon>delete</mc-icon>
  </mc-icon-button>

  <mc-icon-button slot="secondary">
    <mc-icon>add</mc-icon>
  </mc-icon-button>

  <mc-icon-button slot="secondary">
    <mc-icon>edit</mc-icon>
  </mc-icon-button>

  <mc-icon-button slot="secondary">
    <mc-icon>favorite</mc-icon>
  </mc-icon-button>
</mc-bottom-app-bar>


<!-- you can also trigger secondary based on url hash -->
<mc-bottom-app-bar secondary-hash="#one">
        

document.querySelector('mc-bottom-app-bar').showAlt('bottom-ap-bar-secondary-one');

// calling showSecondary with no id will revert back to primary
document.querySelector('mc-bottom-app-bar').showPrimary();
document.querySelector('mc-bottom-app-bar').showAlt();
            

/* Optional variables for overriding */
  
--mc-bottom-app-bar-container-color: var(--mc-surface-container);