eslint

prettier
add recommended styles
2026-01-19 23:44:15 +00:00 · 2023-11-02 13:20:43 -04:00 · 2023-11-02 13:16:52 -04:00 · 2023-11-02 13:10:43 -04:00 · 2023-11-02 13:04:39 -04:00 · 2023-11-02 12:00:19 -04:00
126 changed files with 9971 additions and 3950 deletions
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,4 +1,7 @@
 contact_links:
+  - name: Feature Requests
+    url: https://github.com/shoelace-style/shoelace/discussions/categories/ideas
+    about: All requests for new features should go here.
  - name: Help & Support
    url: https://github.com/shoelace-style/shoelace/discussions/categories/help
    about: Please don't create issues for personal help requests. Instead, ask your question on the discussion forum.
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,15 +0,0 @@
---
-name: Feature Request
-about: Suggest an idea for this project.
-title: ''
-labels: feature
---
-
-### What issue are you having?
-Provide a clear and concise description of the problem you're facing.
-
-### Describe the solution you'd like
-How would you like to see the library solve it?
-
-### Describe alternatives you've considered
-In what ways have you tried to solve this with the current version?
--- a/cspell.json
+++ b/cspell.json
@@ -113,6 +113,7 @@
    "Numberish",
    "oklab",
    "oklch",
+    "onscrollend",
    "outdir",
    "ParamagicDev",
    "peta",
@@ -170,6 +171,7 @@
    "valpha",
    "valuenow",
    "valuetext",
+    "viewports",
    "WCAG",
    "webawesome",
    "WEBP",
--- a/custom-elements-manifest.config.js
+++ b/custom-elements-manifest.config.js
@@ -205,6 +205,7 @@ export default {
    customElementJetBrainsPlugin({
      outdir: './dist',
      excludeCss: true,
+      packageJson: false,
      referencesTemplate: (_, tag) => {
        return {
          name: 'Documentation',
--- a/docs/_includes/default.njk
+++ b/docs/_includes/default.njk
@@ -61,7 +61,7 @@
    <script src="{{ assetUrl('scripts/search.js') }}" defer></script>
  </head>
  <body>
-    <a id="skip-to-main" class="wa-visually-hidden" href="#main-content" data-smooth-link="false">
+    <a id="skip-to-content" class="wa-visually-hidden" href="#main-content" data-smooth-link="false">
      Skip to main content
    </a>

--- a/docs/_includes/layout-example.njk
+++ b/docs/_includes/layout-example.njk
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html
+  lang="en"
+  data-layout="{{ layout }}"
+  data-shoelace-version="{{ meta.version }}"
+>
+  <head>
+    {# Metadata #}
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="{{ meta.description }}" />
+    <title>{{ meta.title }}</title>
+
+    {# Opt out of Turbo caching #}
+    <meta name="turbo-cache-control" content="no-cache">
+    <meta name="turbo-cache-control" content="no-preview">
+
+    {# Favicons #}
+    <link rel="icon" href="{{ assetUrl('images/favicon.svg') }}" type="image/x-icon" />
+
+    {# Twitter Cards #}
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:creator" content="shoelace_style" />
+    <meta name="twitter:image" content="{{ assetUrl(meta.image, true) }}" />
+
+    {# OpenGraph #}
+    <meta property="og:url" content="{{ rootUrl(page.url, true) }}" />
+    <meta property="og:title" content="{{ meta.title }}" />
+    <meta property="og:description" content="{{ meta.description }}" />
+    <meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
+
+    {# WebAwesome #}
+    <link rel="stylesheet" href="/dist/themes/default.css" />
+    <link rel="stylesheet" href="/dist/themes/applied.css" />
+    <script type="module" src="/dist/webawesome.js"></script>
+
+    {# Set the initial theme and menu states here to prevent flashing #}
+    <script>
+      (() => {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = localStorage.getItem('theme') || 'auto';
+        document.documentElement.classList.toggle('wa-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
+
+        if (window.Turbo) {
+          window.Turbo.session.drive = false
+        }
+      })();
+    </script>
+
+    <style>
+      *, *:before, *:after {
+        box-sizing: border-box;
+      }
+
+      html, body {
+        height: 100%;
+        min-height: 100%;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+    </style>
+
+  </head>
+  <body>
+    {% block content %}
+      {{ content | safe }}
+    {% endblock %}
+  </body>
+</html>
--- a/docs/_includes/layout-templates/advanced-example.css
+++ b/docs/_includes/layout-templates/advanced-example.css
@@ -0,0 +1,73 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
+body {
+  padding: 0;
+  height: auto;
+}
+
+.grid {
+  font-size: 1.35rem;
+  text-align: center;
+  display: grid;
+  place-content: center;
+  padding: 1rem;
+}
+
+header {
+  background-color: var(--wa-color-blue-90);
+}
+
+aside {
+  min-width: 250px;
+  max-width: 250px;
+  height: 100%;
+}
+
+main {
+  background-color: var(--wa-color-green-90);
+  height: 100%;
+}
+
+footer {
+  background-color: var(--wa-color-blue-80);
+}
+
+.banner {
+  background-color: var(--wa-color-yellow-90);
+}
+
+.header {
+  background-color: var(--wa-color-blue-90);
+}
+
+.banner,
+.header {
+  min-width: 100%;
+  height: 100%;
+}
+
+[slot='header'] {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+[slot='aside'] {
+  background-color: var(--wa-color-yellow-90);
+}
+
+[slot='menu'] {
+  background-color: var(--wa-color-red-80);
+}
+
+[slot='main-header'] {
+  background-color: var(--wa-color-red-90);
+  padding: 1rem;
+}
+
+[slot='main-footer'] {
+  background-color: var(--wa-color-red-70);
+}
--- a/docs/_includes/layout-templates/advanced-example.html
+++ b/docs/_includes/layout-templates/advanced-example.html
@@ -0,0 +1,18 @@
+<wa-layout main-id="main-content" class="wa-theme-light">
+  <header slot="banner" class="grid banner">banner</header>
+
+  <header slot="header" class="grid header">header</header>
+
+  <aside class="grid" slot="menu">menu</aside>
+
+  <header class="grid" slot="main-header">main-header</header>
+
+  <main class="grid" id="main-content">main</main>
+
+  <footer class="grid" slot="main-footer">main-footer</footer>
+
+  <aside class="grid" slot="aside">aside</aside>
+  <footer class="grid" slot="footer">footer</footer>
+</wa-layout>
+
+{% include "layout-widget.njk" %}
--- a/docs/_includes/layout-templates/app.css
+++ b/docs/_includes/layout-templates/app.css
@@ -0,0 +1,216 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
+body {
+  padding: 0;
+  height: auto;
+}
+
+main {
+  min-height: 100%;
+  padding: 1rem 2rem;
+}
+
+/* Layout */
+wa-layout {
+  background-color: var(--wa-color-neutral-95);
+  color: var(--wa-color-neutral-20);
+}
+
+wa-card :is(p, h3) {
+  margin: 0;
+}
+
+wa-layout::part(header) {
+  /** Because headers are sticky, this keeps text from leaking through. */
+  background-color: var(--wa-color-white);
+}
+
+wa-layout::part(drawer__panel) {
+  height: 100%;
+}
+
+wa-layout[view='mobile'] {
+  background-color: var(--wa-color-white);
+  --menu-width: 0px;
+}
+
+wa-layout[view='mobile']::part(header) {
+  padding: 0.25rem;
+  border-bottom: 1px solid var(--wa-color-neutral-70);
+}
+
+wa-layout[view='mobile']::part(navigation) {
+  display: none;
+}
+
+wa-layout[view='desktop']::part(main) {
+  padding-top: 1rem;
+}
+
+wa-layout[view='desktop'] {
+  --menu-width: 250px;
+}
+
+wa-layout[view='desktop']::part(navigation) {
+  padding-top: 1.9rem;
+}
+
+wa-layout[view='desktop'] > [slot='header'] {
+  display: none;
+}
+
+wa-layout[view='desktop']::part(header) {
+  display: none;
+}
+
+wa-layout[view='desktop'] main {
+  background-color: var(--wa-color-white);
+  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--wa-color-neutral-80);
+  border-top-left-radius: 8px;
+}
+
+/* Navigation / Lists */
+
+/* Highlights */
+.highlight {
+  font-size: 0.85em;
+  padding: 0.4em 0.6em;
+  border-radius: 6px;
+  display: inline-block;
+}
+
+.highlight--success {
+  background-color: var(--wa-color-success-fill-muted);
+  color: var(--wa-color-success-text-on-muted);
+}
+
+.highlight--danger {
+  background-color: var(--wa-color-red-90);
+  color: var(--wa-color-red-30);
+}
+
+/* Text */
+.text--light {
+  color: var(--wa-color-neutral-40);
+}
+
+/* Cards */
+.wa-card--muted::part(base) {
+  --border-color: transparent;
+  background-color: transparent;
+  display: grid;
+  height: 100%;
+  box-shadow: none;
+}
+
+.wa-card--muted::part(body) {
+  display: grid;
+  align-content: flex-end;
+  gap: var(--padding);
+}
+
+/* Buttons */
+.wa-button--card {
+  --border-radius: 8px;
+  --padding: 1rem 0px;
+}
+
+.wa-button--card.wa-button--muted {
+  --background-color: var(--wa-color-neutral-95);
+}
+
+.wa-button--card::part(base) {
+  height: 100%;
+  border-radius: var(--border-radius);
+  padding: var(--padding);
+}
+
+.wa-button--card::part(label) {
+  width: 100%;
+}
+
+.wa-button--muted {
+  --text-color: var(--wa-color-neutral-30);
+  --text-color-active: var(--wa-color-neutral-30);
+  --background-color: transparent;
+  --background-color-active: var(--wa-color-neutral-90);
+  --border-color: transparent;
+  --border-color-active: var(--wa-color-neutral-80);
+}
+
+.wa-button--muted::part(base) {
+  background-color: var(--background-color);
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+
+.wa-button--muted:is(:focus-within)::part(base) {
+  background-color: var(--background-color);
+  color: var(--text-color-active);
+  border-color: var(--border-color-active);
+}
+
+.wa-button--muted:is(:hover)::part(base) {
+  background-color: var(--background-color-active);
+  color: var(--text-color-active);
+  border-color: var(--border-color-active);
+}
+
+.wa-button--logo::part(base) {
+  font-size: 1.5rem;
+  color: var(--wa-color-neutral-30);
+}
+
+.wa-button--square::part(base) {
+  border-radius: 0px;
+}
+
+.wa-button--stretch {
+  width: 100%;
+}
+
+.wa-button--stretch::part(label) {
+  flex: 1 1 auto;
+}
+
+.wa-button--nav-footer {
+  --border-color: var(--wa-color-neutral-70);
+  --wa-spacing-large: 8px;
+}
+
+wa-layout[view='desktop'] .wa-button--nav-footer::part(base) {
+  --border-color: transparent;
+  border-top-color: var(--wa-color-neutral-70);
+}
+
+/* Tables */
+table {
+  max-width: 100%;
+  border: none;
+  border-collapse: collapse;
+  color: inherit;
+}
+
+table tr {
+  border-bottom: 1px solid var(--wa-color-neutral-70);
+}
+
+table th {
+  font-weight: var(--wa-font-weight-semibold);
+  text-align: left;
+  padding: 0.75rem 1rem;
+}
+
+table td {
+  line-height: var(--wa-line-height-normal);
+  padding: 1rem;
+}
+
+* > table {
+  max-width: 100%;
+  overflow-x: auto;
+}
--- a/docs/_includes/layout-templates/app.html
+++ b/docs/_includes/layout-templates/app.html
@@ -0,0 +1,428 @@
+<wa-layout main-id="main-content" class="wa-theme-light">
+  <header slot="header">
+    <wa-icon-button name="list" style="font-size: 1.5rem" data-toggle-nav></wa-icon-button>
+  </header>
+  <wa-button
+    href="#"
+    variant="text"
+    style="padding: 0 0.4rem"
+    class="wa-button--logo wa-button--stretch wa-button--muted"
+    size="large"
+    slot="navigation-header"
+  >
+    <wa-icon name="music-note" slot="prefix" style="font-size: 2rem"></wa-icon>
+    Musicify
+  </wa-button>
+
+  <nav style="padding: 1rem" slot="navigation">
+    <wa-nav-group style="height: 100%">
+      <wa-nav-item href="#">
+        <wa-icon name="search" slot="prefix"></wa-icon>
+        Search
+      </wa-nav-item>
+
+      <wa-nav-item href="#">
+        <wa-icon name="bell" slot="prefix"></wa-icon>
+        Notifications
+      </wa-nav-item>
+
+      <wa-divider></wa-divider>
+
+      <wa-nav-item href="#" current="page">
+        <wa-icon name="house-door" slot="prefix"></wa-icon>
+        Home
+      </wa-nav-item>
+
+      <wa-nav-item href="#">
+        <wa-icon name="music-note-list" slot="prefix"></wa-icon>
+        Playlists
+      </wa-nav-item>
+
+      <wa-nav-item href="#">
+        <wa-icon name="file-earmark-music" slot="prefix"></wa-icon>
+        Tracks
+      </wa-nav-item>
+
+      <wa-nav-item href="#">
+        <wa-icon name="gear" slot="prefix"></wa-icon>
+        Settings
+      </wa-nav-item>
+
+      <wa-nav-item href="#" style="margin-top: auto">
+        <wa-icon name="question-circle" slot="prefix"></wa-icon>
+        Help
+      </wa-nav-item>
+    </wa-nav-group>
+  </nav>
+
+  <!-- Hacky override to make padding 8px -->
+  <wa-button
+    slot="navigation-footer"
+    outline
+    class="wa-button--square wa-button--stretch wa-button--muted wa-button--nav-footer"
+    size="large"
+    href="#"
+  >
+    <div
+      style="
+        display: grid;
+        align-items: center;
+        max-width: 100%;
+        gap: 8px;
+        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+      "
+    >
+      <wa-avatar shape="rounded" style="--size: 36px"></wa-avatar>
+      <div style="text-overflow: ellipsis; max-width: 100%; overflow: hidden; text-align: start; font-size: 1rem">
+        Really really really long name
+      </div>
+      <wa-icon name="chevron-right"></wa-icon>
+    </div>
+  </wa-button>
+
+  <main id="main-content" class="main">
+    <h1 style="margin: 0.5rem 0 2rem 0">Good Evening, Konnor Rogers</h1>
+
+    <section>
+      <div style="display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-end; gap: 8px">
+        <h2 style="">Overview</h2>
+
+        <wa-select value="monthly">
+          <wa-option value="daily">Daily</wa-option>
+          <wa-option value="weekly">Weekly</wa-option>
+          <wa-option value="monthly">Monthly</wa-option>
+          <wa-option value="yearly">Yearly</wa-option>
+        </wa-select>
+      </div>
+
+      <wa-divider></wa-divider>
+
+      <div
+        style="
+          margin-top: 1rem;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          grid-auto-rows: 1fr;
+          gap: var(--wa-spacing-large);
+          text-align: center;
+        "
+      >
+        <wa-card class="wa-card--muted" style="--padding: 8px">
+          <h3 slot="header">Total listening time</h3>
+
+          <p>
+            <strong><wa-format-number value="35000"></wa-format-number></strong> minutes
+          </p>
+          <p>
+            <mark class="highlight highlight--success"> +16% </mark>
+
+            <small class="text--light">from last month</small>
+          </p>
+        </wa-card>
+
+        <wa-card class="wa-card--muted" style="--padding: 8px">
+          <h3 slot="header">Total songs played</h3>
+
+          <p>
+            <strong><wa-format-number value="302"></wa-format-number></strong> songs
+          </p>
+
+          <p>
+            <mark class="highlight highlight--danger"> -0.3% </mark>
+
+            <small class="text--light">from last month</small>
+          </p>
+        </wa-card>
+
+        <wa-card class="wa-card--muted" style="--padding: 8px">
+          <h3 slot="header">Average listening session</h3>
+
+          <p>
+            <strong><wa-format-number value="36"></wa-format-number></strong> minutes
+          </p>
+
+          <p>
+            <mark class="highlight highlight--success"> +11.4% </mark>
+
+            <small class="text--light">from last month</small>
+          </p>
+        </wa-card>
+
+        <wa-card class="wa-card--muted" style="--padding: 8px">
+          <h3 slot="header">Average track listening time</h3>
+
+          <p>
+            <strong><wa-format-number value="2"></wa-format-number></strong> minutes,
+            <strong><wa-format-number value="42"></wa-format-number></strong> seconds
+          </p>
+          <p>
+            <mark class="highlight highlight--success"> -6.2% </mark>
+
+            <small class="text--light">from last month</small>
+          </p>
+        </wa-card>
+      </div>
+    </section>
+
+    <section style="margin-top: 3rem">
+      <h2>Recent playlists</h2>
+
+      <div
+        style="
+          margin-top: 1rem;
+          --card-width: clamp(200px, 100%, 350px);
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
+          gap: 16px;
+        "
+      >
+        <wa-button variant="neutral" class="wa-button--card wa-button--muted" href="#">
+          <div style="display: flex; gap: 1rem">
+            <img
+              src="https://via.placeholder.com/100x100"
+              height="100"
+              width="100"
+              style="align-self: center; border-radius: 8px; display: inline-block; max-width: 100%; flex: 0 1 auto"
+            />
+
+            <article
+              style="
+                display: grid;
+                align-content: center;
+                color: var(--wa-color-neutral-700);
+                grid-template-columns: minmax(0, 1fr);
+                max-width: 100%;
+                overflow: hidden;
+                width: 100%;
+              "
+            >
+              <h2 style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">Punk Rock Anthems</h2>
+
+              <p style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">
+                For when you just wanna rock out, have a good time, and feel angsty.
+              </p>
+
+              <wa-icon name="chevron-right" style="justify-self: flex-end"></wa-icon>
+            </article>
+          </div>
+        </wa-button>
+
+        <wa-button variant="neutral" class="wa-button--card wa-button--muted" href="#">
+          <div style="display: flex; gap: 1rem">
+            <img
+              src="https://via.placeholder.com/100x100"
+              height="100"
+              width="100"
+              style="align-self: center; border-radius: 8px; display: inline-block; max-width: 100%"
+            />
+
+            <article
+              style="
+                display: grid;
+                align-content: center;
+                color: var(--wa-color-neutral-700);
+                grid-template-columns: minmax(0, 1fr);
+                max-width: 100%;
+                overflow: hidden;
+                width: 100%;
+              "
+            >
+              <h2 style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">Random</h2>
+
+              <p style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">
+                Throw it on shuffle, and embrace the chaos.
+              </p>
+
+              <wa-icon name="chevron-right" style="justify-self: flex-end"></wa-icon>
+            </article>
+          </div>
+        </wa-button>
+
+        <wa-button variant="neutral" class="wa-button--card wa-button--muted" href="#">
+          <div style="display: flex; gap: 1rem">
+            <img
+              src="https://via.placeholder.com/100x100"
+              height="100"
+              width="100"
+              style="align-self: center; border-radius: 8px; display: inline-block"
+            />
+
+            <article
+              style="
+                display: grid;
+                align-content: center;
+                color: var(--wa-color-neutral-700);
+                grid-template-columns: minmax(0, 1fr);
+                max-width: 100%;
+                overflow: hidden;
+                width: 100%;
+              "
+            >
+              <h2 style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">Classics</h2>
+
+              <p style="max-width: 100%; text-overflow: ellipsis; overflow: hidden">
+                Timeless songs that you love to relive.
+              </p>
+
+              <wa-icon name="chevron-right" style="justify-self: flex-end"></wa-icon>
+            </article>
+          </div>
+        </wa-button>
+      </div>
+    </section>
+
+    <section style="margin-top: 3rem">
+      <h2>Recent tracks</h2>
+
+      <div style="margin-top: 1rem; max-width: 100%; overflow: auto">
+        <table style="width: 100%; min-width: 500px; border-spacing: 2px">
+          <thead>
+            <tr>
+              <th>Release Date</th>
+
+              <th>Name</th>
+
+              <th>Album</th>
+
+              <th>Artist</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+
+            <tr>
+              <td>
+                <wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>
+              </td>
+
+              <td>No Strangers to Love</td>
+
+              <td>You Know the Rules</td>
+
+              <td>Rick Barry</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </main>
+</wa-layout>
--- a/docs/_includes/layout-templates/example.css
+++ b/docs/_includes/layout-templates/example.css
@@ -0,0 +1,74 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
+body {
+  padding: 0;
+  height: auto;
+}
+
+.grid {
+  font-size: 1.35rem;
+  text-align: center;
+  display: grid;
+  place-content: center;
+  padding: 1rem;
+}
+
+header {
+  background-color: var(--wa-color-blue-90);
+}
+
+aside {
+  min-width: 250px;
+  max-width: 250px;
+}
+
+main {
+  background-color: var(--wa-color-green-90);
+  height: 100%;
+}
+
+footer {
+  background-color: var(--wa-color-blue-80);
+}
+
+.banner {
+  background-color: var(--wa-color-yellow-90);
+}
+
+.header {
+  background-color: var(--wa-color-blue-90);
+}
+
+.banner,
+.header {
+  min-width: 100%;
+  height: 100%;
+}
+
+[slot='header'] {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+[slot='aside'] {
+  height: 100%;
+  background-color: var(--wa-color-yellow-90);
+}
+
+[slot='menu'] {
+  height: 100%;
+  background-color: var(--wa-color-red-90);
+}
+
+[slot='main-header'] {
+  background-color: var(--wa-color-red-80);
+  padding: 1rem;
+}
+
+[slot='main-footer'] {
+  background-color: var(--wa-color-green-80);
+}
--- a/docs/_includes/layout-templates/example.html
+++ b/docs/_includes/layout-templates/example.html
@@ -0,0 +1,47 @@
+<wa-layout>
+  <div slot="navigation">
+    <div style="padding: 2rem">
+      <a href="#">Option 1</a><br />
+      <a href="#">Option 2</a><br />
+      <a href="#">Option 3</a>
+    </div>
+  </div>
+
+  <button data-toggle-nav>Menu</button>
+
+  <p>I'm just a lowly page.</p>
+  <p>
+    I think I'll put a <a href="#">link right here</a> for you to click. And maybe <a href="#">another one here</a> for
+    fun.
+  </p>
+
+  <wa-dialog id="dialog"> I'm just a lowly dialog. </wa-dialog>
+
+  <wa-button>Open Dialog</wa-button>
+</wa-layout>
+
+<style>
+  wa-layout {
+    --menu-width: 260px;
+
+    outline: dashed 1px dodgerblue;
+    max-width: 1280px;
+    margin: 0 auto;
+  }
+
+  wa-layout::part(menu) {
+    border-right: solid 1px #ececec;
+  }
+
+  wa-layout::part(main-content) {
+    padding: 2rem;
+  }
+</style>
+
+<script>
+  const dialog = document.getElementById('dialog');
+
+  dialog.nextElementSibling.addEventListener('click', () => {
+    dialog.open = true;
+  });
+</script>
--- a/docs/_includes/layout-templates/hero.css
+++ b/docs/_includes/layout-templates/hero.css
@@ -0,0 +1,9 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
+body {
+  padding: 0;
+  height: auto;
+}
--- a/docs/_includes/layout-templates/hero.html
+++ b/docs/_includes/layout-templates/hero.html
@@ -0,0 +1 @@
+<wa-layout main-id="main-content" class="wa-theme-light"> </wa-layout>
--- a/docs/_includes/layout-templates/sport-awesome.css
+++ b/docs/_includes/layout-templates/sport-awesome.css
@@ -0,0 +1,182 @@
+html {
+  min-height: 100%;
+  height: auto;
+}
+
+body {
+  padding: 0 !important;
+  height: auto;
+  margin: 0;
+}
+
+/** https://andy-bell.co.uk/my-favourite-3-lines-of-css/ */
+.flow > * + * {
+  margin-block-start: var(--wa-flow-spacing);
+}
+
+img {
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+}
+
+.navigation--desktop::part(nav-items) {
+  gap: 2rem;
+}
+
+.navigation--top::part(nav-items) {
+  flex-direction: row;
+}
+
+.navigation--top wa-nav-item {
+  font-size: 1.4rem;
+  font-weight: bold;
+}
+
+.navigation--top wa-nav-item::part(content) {
+  text-align: center;
+  justify-content: center;
+}
+
+.navigation--top wa-nav-item {
+  --text-color: var(--wa-color-brand-text-on-vivid);
+  --text-color-hover: var(--wa-color-text-normal);
+  --background-color: transparent;
+  --background-color-hover: var(--wa-color-neutral-fill-muted-alt);
+}
+
+.header {
+  display: flex;
+  border-bottom: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-brand-fill-vivid-alt);
+  background-color: var(--wa-color-white);
+}
+
+.header > * {
+  padding-top: var(--wa-space-m);
+  padding-bottom: var(--wa-space-m);
+}
+
+.header__navigation {
+  display: flex;
+  clip-path: polygon(var(--wa-space-2xl) 0, 100% 0, 100% 100%, 0 100%);
+  padding-inline-start: calc(var(--wa-space-2xl) + var(--wa-space-xs));
+  padding-inline-end: var(--wa-space-m);
+  background-color: var(--wa-color-brand-fill-vivid-alt);
+  width: 100%;
+}
+
+.header > .logo {
+  padding-inline-start: var(--wa-space-m);
+  /** Responsive font size for the top header to make it flow nicer */
+  font-size: clamp(1rem, 4vw, 1.4rem);
+}
+
+a.logo {
+  flex-shrink: 0;
+  font-size: 1.4rem;
+  font-weight: bold;
+  color: var(--wa-color-text-normal);
+  text-decoration: none;
+  margin: auto;
+}
+
+a.logo:is(:hover, :focus) {
+  text-decoration: underline;
+}
+
+.logo__accent {
+  color: var(--wa-color-yellow-70);
+}
+
+.navigation--desktop {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.navigation--desktop wa-nav-item[current='page'] {
+  text-decoration: underline;
+  text-underline-offset: 8px;
+  text-decoration-thickness: 4px;
+  text-decoration-color: var(--wa-color-brand-outline-muted-alt);
+}
+
+.navigation--desktop wa-nav-item[current='page']:hover {
+  text-decoration-color: var(--wa-color-brand-outline-vivid);
+}
+
+.navigation--extra {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-inline-start: auto;
+}
+
+wa-layout[view='desktop'] [data-toggle-nav],
+wa-layout[view='desktop']::part(navigation) {
+  display: none;
+}
+
+wa-layout[view='mobile'] .navigation--desktop {
+  display: none;
+}
+
+.layout-banner {
+  padding: var(--wa-space-m);
+  text-align: center;
+  background-color: var(--wa-color-yellow-80);
+}
+
+.stats-grid {
+  display: grid;
+  /** 30vw ensures we never show more than 3 tables in the viewport at any given time. */
+  grid-template-columns: repeat(auto-fit, minmax(clamp(225px, 30vw, 100%), 1fr));
+  gap: var(--wa-space-m);
+  grid-template-rows: 1fr;
+  align-items: start;
+  max-width: 100%;
+}
+
+.stats-grid table {
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: var(--wa-panel-corners);
+  border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-outline);
+}
+
+.table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.stats-grid table * {
+  font-variant-numeric: tabular-nums;
+}
+
+.stats-grid table th {
+  font-weight: bold;
+  text-align: center;
+}
+
+.stats-grid table td:nth-child(2) {
+  text-align: end;
+}
+
+.navigation--top.navigation--social::part(nav-items) {
+  justify-content: flex-end;
+}
+
+.navigation--social {
+  flex-grow: 1;
+}
+
+.navigation--top .social-link {
+  display: none;
+}
+
+@media screen and (min-width: 415px) {
+  .navigation--top .social-link {
+    display: flex;
+  }
+}
--- a/docs/_includes/layout-templates/sport-awesome.html
+++ b/docs/_includes/layout-templates/sport-awesome.html
@@ -0,0 +1,343 @@
+<wa-layout main-id="main-content" class="wa-theme-light" mobile-breakpoint="925" disable-sticky="banner">
+  <header class="layout-banner" slot="banner">Reminder! Get your insurance paperwork in by Oct 12!</header>
+
+  <header class="header" slot="header">
+    <a href="#" class="logo"> <span>Sport</span> <span class="logo__accent">Awesome</span> </a>
+
+    <div class="header__navigation">
+      <wa-nav-group class="navigation navigation--top navigation--desktop">
+        <wa-nav-item href="#" current="page">Home</wa-nav-item>
+        <wa-nav-item href="#">Schedule</wa-nav-item>
+        <wa-nav-item href="#">Roster</wa-nav-item>
+        <wa-nav-item href="#">Stats</wa-nav-item>
+        <wa-nav-item href="#">Videos</wa-nav-item>
+      </wa-nav-group>
+
+      <wa-nav-group class="navigation navigation--top navigation--social">
+        <wa-nav-item class="social-link" href="#"><wa-icon name="instagram"></wa-icon></wa-nav-item>
+        <wa-nav-item class="social-link" href="#"><wa-icon name="facebook"></wa-icon></wa-nav-item>
+        <wa-nav-item data-toggle-nav href="#"><wa-icon name="list"></wa-icon></wa-nav-item>
+      </wa-nav-group>
+    </div>
+  </header>
+
+  <a href="#" class="logo" slot="navigation-header"> Sport <span class="logo__accent">Awesome</span> </a>
+
+  <wa-nav-group slot="navigation">
+    <wa-nav-item href="#" current="page">
+      <wa-icon name="house-door" slot="prefix"></wa-icon>
+      Home
+    </wa-nav-item>
+    <wa-nav-item href="#">
+      <wa-icon name="calendar" slot="prefix"></wa-icon>
+      Schedule
+    </wa-nav-item>
+    <wa-nav-item href="#">
+      <wa-icon name="people" slot="prefix"></wa-icon>
+      Roster
+    </wa-nav-item>
+    <wa-nav-item href="#">
+      <wa-icon name="graph-up-arrow" slot="prefix"></wa-icon>
+      Stats
+    </wa-nav-item>
+    <wa-nav-item href="#">
+      <wa-icon name="camera-video" slot="prefix"></wa-icon>
+      Videos
+    </wa-nav-item>
+
+    <wa-divider></wa-divider>
+
+    <wa-nav-group>
+      <wa-nav-item href="#">
+        <wa-icon name="instagram" slot="prefix"></wa-icon>
+        Instagram
+      </wa-nav-item>
+      <wa-nav-item href="#">
+        <wa-icon name="facebook" slot="prefix"></wa-icon>
+        Facebook
+      </wa-nav-item>
+    </wa-nav-group>
+  </wa-nav-group>
+
+  <main id="main-content" class="flow" style="padding: var(--wa-space-m)">
+    <div style="display: flex; flex-wrap: wrap; gap: var(--wa-space-m)">
+      <figure style="min-width: 75%; display: flex; flex-direction: column; margin: 0 auto">
+        <img
+          src="https://images.unsplash.com/photo-1562552052-c72ceddf93dc?auto=format&fit=crop&q=80&w=3540&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          loading="lazy"
+          alt="Picture of people playing volleyball"
+          height="512"
+          width="300"
+          style="aspect-ratio: 16/9; min-width: 100%"
+        />
+        <figcaption>
+          Photo by
+          <cite><a href="https://unsplash.com/@stevenabraham">Steven Abraham</a></cite>
+          courtesy of
+          <cite><a href="https://unsplash.com/">Unsplash</a></cite>
+        </figcaption>
+      </figure>
+      <aside
+        style="
+          display: flex;
+          flex-direction: column;
+          border-radius: var(--wa-panel-corners);
+          flex-grow: 1;
+          flex-shrink: 1;
+          max-width: 75vw;
+          margin: 0 auto;
+        "
+      >
+        <header
+          style="
+            font-size: 1.4rem;
+            font-weight: bold;
+            color: var(--wa-color-brand-text-on-vivid);
+            background-color: var(--wa-color-brand-fill-vivid-alt);
+            padding: var(--wa-space-m);
+            text-align: center;
+            border-top-left-radius: inherit;
+            border-top-right-radius: inherit;
+          "
+        >
+          Upcoming
+        </header>
+
+        <div
+          style="
+            color: var(--wa-color-brand-text-on-vivid);
+            background-color: var(--wa-color-danger-fill-vivid-alt);
+            padding: var(--wa-space-s);
+            text-align: center;
+            font-weight: bold;
+          "
+        >
+          Tryouts!
+        </div>
+
+        <div
+          style="
+            background-color: var(--wa-color-neutral-90);
+            padding: var(--wa-space-m);
+            border-bottom-left-radius: inherit;
+            border-bottom-right-radius: inherit;
+            text-align: center;
+          "
+        >
+          <span style="font-weight: bold; font-size: 1.2rem">Barclay's Center</span>
+
+          <br />
+
+          <time>Sat, Jul 3rd • 11:30am</time>
+        </div>
+      </aside>
+    </div>
+
+    <section>
+      <h1>Welcome to Sport <span class="logo__accent">Awesome</span></h1>
+
+      <p>
+        Dolor quam voluptate nostrum neque eius. Quo nemo corporis repellat quia sunt molestiae! Dolorem labore
+        laudantium nobis numquam reprehenderit? Voluptatibus odio animi nemo maiores accusamus eaque Assumenda
+        perferendis omnis quae. Adipisicing beatae lorem nisi aliquid similique Voluptas doloremque pariatur tempore
+        omnis maiores explicabo. Provident iste vel explicabo corporis quaerat! Necessitatibus minus quas iusto ducimus
+        consequatur illo Cum eos adipisci ut!
+      </p>
+    </section>
+
+    <section>
+      <h2 style="text-align: center; font-weight: bold; font-size: 1.5em">Stats</h2>
+      <div class="stats-grid">
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Serve</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Attempts</td>
+                <td>2936</td>
+              </tr>
+              <tr>
+                <td>Serve %</td>
+                <td>93.6%</td>
+              </tr>
+              <tr>
+                <td>Aces</td>
+                <td>268</td>
+              </tr>
+              <tr>
+                <td>Errors</td>
+                <td>189</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Serve Receive</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Attempts</td>
+                <td>2428</td>
+              </tr>
+              <tr>
+                <td>Pass Rating</td>
+                <td>1.72</td>
+              </tr>
+              <tr>
+                <td>Pass Error %</td>
+                <td>13.3%</td>
+              </tr>
+              <tr>
+                <td>3-pass %</td>
+                <td>28.5%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Attack</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Attempts</td>
+                <td>3624</td>
+              </tr>
+              <tr>
+                <td>Kills</td>
+                <td>1431</td>
+              </tr>
+              <tr>
+                <td>Errors</td>
+                <td>268</td>
+              </tr>
+              <tr>
+                <td>Hitting Efficiency</td>
+                <td>0.254</td>
+              </tr>
+
+              <tr>
+                <td>Kill %</td>
+                <td>39.5%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Dig</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Attempts</td>
+                <td>3124</td>
+              </tr>
+
+              <tr>
+                <td>Digs</td>
+                <td>2235</td>
+              </tr>
+
+              <tr>
+                <td>Errors</td>
+                <td>889</td>
+              </tr>
+
+              <tr>
+                <td>Dig %</td>
+                <td>71.5%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Block</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Blocks</td>
+                <td>348</td>
+              </tr>
+
+              <tr>
+                <td>Errors</td>
+                <td>414</td>
+              </tr>
+
+              <tr>
+                <td>Block %</td>
+                <td>31.6%</td>
+              </tr>
+
+              <tr>
+                <td>Error %</td>
+                <td>24.6%</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th colspan="2">Set</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td>Assists</td>
+                <td>1364</td>
+              </tr>
+
+              <tr>
+                <td>Errors</td>
+                <td>81</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer
+    slot="main-footer"
+    style="
+      background-color: var(--wa-color-brand-fill-vivid);
+      color: var(--wa-color-text-inverse);
+      padding: var(--wa-space-m);
+      text-align: center;
+    "
+  >
+    © 2023 - Sport Awesome
+  </footer>
+</wa-layout>
--- a/docs/_includes/layout-widget.njk
+++ b/docs/_includes/layout-widget.njk
@@ -0,0 +1,92 @@
+<!-- playground-hide -->
+<style>
+  .layout-widget {
+    position: fixed;
+    z-index: 9999;
+    background-color: white;
+    bottom: 4rem;
+    left: 4rem;
+  }
+
+  .layout-widget:not(:defined) {
+    display: none;
+  }
+</style>
+
+<wa-dropdown id="js-layout-widget" class="layout-widget" stay-open-on-select>
+  <wa-button slot="trigger" caret>Dropdown</wa-button>
+  <wa-menu></wa-menu>
+</wa-dropdown>
+
+<script type="module">
+  const layoutWidget = document.querySelector("#js-layout-widget")
+  const docFrag = new DocumentFragment()
+
+  function makeMenuItem (type, slot) {
+    const menuItem = Object.assign(document.createElement("wa-menu-item"), {
+      type: "checkbox",
+      textContent: `${type} ${slot}`
+    })
+
+    menuItem.setAttribute("value", `${type}-${slot}`)
+    return menuItem
+  }
+
+  document.querySelectorAll("wa-layout > [slot]").forEach((el) => {
+    const slot = el.getAttribute("slot");
+    docFrag.append(makeMenuItem("toggle", slot), makeMenuItem("overflow", slot), document.createElement("wa-divider"))
+  })
+
+  docFrag.append(makeMenuItem("toggle", "main"), makeMenuItem("overflow", "main"))
+  layoutWidget.querySelector("wa-menu").append(docFrag)
+
+  function capitalize(string) {
+    return string.split(/\s+/).map((str) => str[0].toUppercase() + str.slice(1)).join(" ")
+  }
+
+  function handleSelect (e) {
+    const item = e.detail.item
+    const val = item.getAttribute("value")
+
+    if (val === "footer-0") {
+
+    }
+
+    const slot = val.split("-").slice(1).join("-")
+
+    let el
+
+    if (slot === "main") {
+      el = document.querySelector(`main`)
+    } else {
+      el = document.querySelector(`wa-layout > [slot='${slot}']`)
+    }
+
+    if (val.startsWith("overflow")) {
+      if (item.checked) {
+        el.textContent = "lorem ".repeat(1_000)
+        return
+      }
+
+      el.textContent = slot
+      return
+    }
+
+    if (val.startsWith("toggle")) {
+      if (item.checked) {
+        el.setAttribute("hidden", "")
+        return
+      }
+
+      el.removeAttribute("hidden")
+      return
+    }
+  }
+
+  layoutWidget.addEventListener("wa-select", handleSelect);
+{% if in_playground %}
+  &lt;/script>
+{% else %}
+  </script>
+{% endif %}
+<!-- playground-hide-end -->
--- a/docs/_includes/playground.njk
+++ b/docs/_includes/playground.njk
@@ -0,0 +1,124 @@
+<script type="module">
+  import "https://cdn.jsdelivr.net/npm/light-pen@1.1.3/+esm"
+</script>
+<div style="display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); min-height: 100%; grid-template-rows: minmax(0, 1fr); gap: 8px; ">
+<!-- Knobs -->
+<div id="knobs">
+  <div class="space-vertically">
+    <a href="/">{% include 'logo.njk' %}</a>
+    <wa-select name="theme" label="Theme" value="default">
+      <wa-option value="default">Default</wa-option>
+      <wa-option value="glassy">Glassy</wa-option>
+      <wa-option value="mellow">Mellow</wa-option>
+      <wa-option value="playful">Playful</wa-option>
+    </wa-select>
+    <wa-select name="heading-text" label="Heading" value="">
+      <wa-option value="">Theme default</wa-option>
+      <wa-option value="serif">Serif</wa-option>
+      <wa-option value="sans-serif">Sans-serif</wa-option>
+      <wa-option value="monospace">Monospace</wa-option>
+      <wa-option value="cursive">Cursive</wa-option>
+    </wa-select>
+    <wa-select name="body-text" label="Body" value="">
+      <wa-option value="">Theme default</wa-option>
+      <wa-option value="serif">Serif</wa-option>
+      <wa-option value="sans-serif">Sans-serif</wa-option>
+      <wa-option value="monospace">Monospace</wa-option>
+      <wa-option value="cursive">Cursive</wa-option>
+    </wa-select>
+    <wa-select name="border-style" label="Border Style" value="solid">
+      <wa-option value="solid">Solid</wa-option>
+      <wa-option value="dashed">Dashed</wa-option>
+      <wa-option value="dotted">Dotted</wa-option>
+      <wa-option value="double">Double</wa-option>
+    </wa-select>
+    <wa-range name="border-width" label="Border Width" min="1" max="5" value="1" step="1" tooltip="none"></wa-range>
+    <wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-range>
+    <wa-range name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-range>
+  </div>
+</div>
+
+<script type="module">
+  const container = document.getElementById('knobs');
+  const iframeDocument = () => document.querySelector("light-pen").iframeElem.contentWindow.document
+  const themeStylesheet = () => iframeDocument().getElementById('theme-stylesheet');
+
+  // Theme
+  container.querySelector('[name="theme"]').addEventListener('wa-change', event => {
+    themeStylesheet().href = `/dist/themes/${event.target.value}.css`;
+  });
+
+  // Heading text
+  container.querySelector('[name="heading-text"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-font-family-heading', event.target.value);
+  });
+
+  // Body text
+  container.querySelector('[name="body-text"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-font-family-body', event.target.value);
+  });
+
+  // Corners
+  container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-corners-base', `${event.target.value}rem`);
+  });
+
+  // Border width
+  container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-border-width-base', `${event.target.value / 16}rem`);
+  });
+
+  // Border style
+  container.querySelector('[name="border-style"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-border-style', event.target.value);
+  });
+
+  // Spacing style
+  container.querySelector('[name="spacing"]').addEventListener('wa-input', event => {
+    iframeDocument().documentElement.style.setProperty('--wa-space-base', `${event.target.value}rem`);
+  });
+
+</script>
+
+<style>
+  :root {
+    --knobs-width: 300px;
+  }
+
+  #knobs {
+    background: var(--wa-color-surface-default);
+    border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
+    border-radius: var(--wa-corners-2x);
+    box-shadow: var(--wa-shadow-level-2);
+    width: var(--knobs-width);
+    padding: 2rem;
+    margin-inline: auto;
+    margin-block: 0;
+  }
+
+  #knobs p {
+    margin: 0;
+  }
+</style>
+
+<light-pen style="height: 100%;" resize-position="30">
+  <script type="text/plain" slot="html">
+<link id="theme-stylesheet" href="/dist/themes/default.css" rel="stylesheet">
+<link id="applied-stylesheet" href="/dist/themes/applied.css"" rel="stylesheet">
+
+{% include html_file %}
+  </script>
+
+  <script type="text/plain" slot="css">
+@import "/dist/themes/applied.css";
+
+{% include css_file %}
+  </script>
+
+  <script type="text/plain" slot="js">
+import { setBasePath } from "/dist/utilities/base-path.js";
+setBasePath("/dist");
+import("/dist/autoloader.js");
+  </script>
+</light-pen>
+<div>
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -6,6 +6,7 @@
      <li><a href="/experimental/style-guide">Style Guide</a></li>
      <li><a href="/experimental/form-validation">Form Validation Styles</a></li>
      <li style="margin-top: .5rem;"><wa-switch id="theme-toggle">Dark mode</wa-switch></li>
+      <li><a href="/layouts/index.html">Layout Examples</a></li>
      <script type="module">
        // Temporary dark toggle
        const toggle = document.getElementById('theme-toggle');
--- a/docs/_utilities/scrolling-tables.cjs
+++ b/docs/_utilities/scrolling-tables.cjs
@@ -1,8 +1,13 @@
 /**
- * Turns headings into clickable, deep linkable anchors. The provided doc should be a document object provided by JSDOM.
+ * Turns tables into scrollable tables
 * The same document will be returned with the appropriate DOM manipulations.
 */
 module.exports = function (doc, options) {
+  // We don't want to run this on layouts.
+  if (doc.querySelector("[data-layout='layout-example.njk']")) {
+    return;
+  }
+
  const tables = [...doc.querySelectorAll('table')];

  options = {
--- a/docs/assets/images/layout.png
+++ b/docs/assets/images/layout.png
--- a/docs/assets/scripts/docs.js
+++ b/docs/assets/scripts/docs.js
@@ -15,7 +15,7 @@
  }

  function isSidebarVisible() {
-    return getSidebar().getBoundingClientRect().x >= 0;
+    return getSidebar()?.getBoundingClientRect().x >= 0;
  }

  function toggleSidebar(force) {
@@ -24,7 +24,11 @@
  }

  function updateInert() {
-    getSidebar().inert = !isSidebarVisible();
+    const sidebar = getSidebar();
+
+    if (sidebar) {
+      sidebar.inert = !isSidebarVisible();
+    }
  }

  // Toggle the menu
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -7,7 +7,6 @@
  --docs-content-padding: 2rem;
  --docs-content-vertical-spacing: 2rem;
  --docs-search-overlay-background: rgb(0 0 0 / 0.2);
-  --docs-skip-to-main-width: 200px;
 }

 /* Light theme */
@@ -254,7 +253,9 @@ pre .token.italic {
  right: 0;
  white-space: normal;
  color: var(--wa-color-neutral-text-on-muted-alt);
-  transition: 150ms opacity, 150ms scale;
+  transition:
+    150ms opacity,
+    150ms scale;
 }

 .copy-code-button::part(button) {
@@ -648,18 +649,17 @@ html.sidebar-open #menu-toggle {
 }

 /* Skip to main content */
-#skip-to-main {
+#skip-to-content {
  position: fixed;
-  top: 0.25rem;
-  left: calc(50% - var(--docs-skip-to-main-width) / 2);
+  top: var(--wa-space-m);
+  left: var(--wa-space-m);
  z-index: 100;
-  width: var(--docs-skip-to-main-width);
  text-align: center;
  text-decoration: none;
  border-radius: 9999px;
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
-  padding: 0.5rem;
+  padding: var(--wa-space-s);
 }

 /* Print styles */
@@ -793,7 +793,6 @@ html.sidebar-open #menu-toggle {
 }

 .component-header__tag {
-  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
 }

--- a/docs/eleventy.config.cjs
+++ b/docs/eleventy.config.cjs
@@ -28,7 +28,16 @@ module.exports = function (eleventyConfig) {
  //
  // Global data
  //
-  eleventyConfig.addGlobalData('baseUrl', 'https://shoelace.style/'); // the production URL
+  let baseUrl = 'https://shoelace.style/';
+
+  if (process.env.VERCEL_URL) {
+    baseUrl = process.env.VERCEL_URL;
+    if (!process.env.VERCEL_URL.match(/^https?/)) {
+      baseUrl = 'https://' + baseUrl;
+    }
+  }
+
+  eleventyConfig.addGlobalData('baseUrl', baseUrl); // the production URL
  eleventyConfig.addGlobalData('layout', 'default'); // make 'default' the default layout
  eleventyConfig.addGlobalData('toc', true); // enable the table of contents
  eleventyConfig.addGlobalData('meta', {
@@ -52,6 +61,11 @@ module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy(assetsDir);
  eleventyConfig.setServerPassthroughCopyBehavior('passthrough'); // emulates passthrough copy during --serve

+  //
+  // Add additional extensions. This allows things like {% include "layout.css" %}
+  //
+  eleventyConfig.setTemplateFormats(['html', 'md', 'njk', 'css']);
+
  //
  // Functions
  //
@@ -183,21 +197,23 @@ module.exports = function (eleventyConfig) {
        }).window.document;
        const content = doc.querySelector('#content');

-        // Get title and headings
-        const title = (doc.querySelector('title')?.textContent || path.basename(result.outputPath)).trim();
-        const headings = [...content.querySelectorAll('h1, h2, h3, h4')]
-          .map(heading => heading.textContent)
-          .join(' ')
-          .replace(/\s+/g, ' ')
-          .trim();
+        if (content) {
+          // Get title and headings
+          const title = (doc.querySelector('title')?.textContent || path.basename(result.outputPath)).trim();
+          const headings = [...content.querySelectorAll('h1, h2, h3, h4')]
+            .map(heading => heading.textContent)
+            .join(' ')
+            .replace(/\s+/g, ' ')
+            .trim();

-        // Remove code blocks and whitespace from content
-        [...content.querySelectorAll('code[class|=language]')].forEach(code => code.remove());
-        const textContent = content.textContent.replace(/\s+/g, ' ').trim();
+          // Remove code blocks and whitespace from content
+          [...content.querySelectorAll('code[class|=language]')].forEach(code => code.remove());
+          const textContent = content.textContent.replace(/\s+/g, ' ').trim();

-        // Update the index and map
-        this.add({ id: index, t: title, h: headings, c: textContent });
-        map[index] = { title, url };
+          // Update the index and map
+          this.add({ id: index, t: title, h: headings, c: textContent });
+          map[index] = { title, url };
+        }
      });
    });

--- a/docs/pages/components/carousel.md
+++ b/docs/pages/components/carousel.md
@@ -803,7 +803,7 @@ const App = () => (

 ### Aspect Ratio

-Use the `--aspect-ratio` custom property to customize the size of the carousel's viewport.
+Use the `--aspect-ratio` custom property to customize the size of the carousel's viewport from the default value of 16/9.

 ```html:preview
 <wa-carousel class="aspect-ratio" navigation pagination style="--aspect-ratio: 3/2;">
--- a/docs/pages/components/details.md
+++ b/docs/pages/components/details.md
@@ -122,8 +122,10 @@ Details are designed to function independently, but you can simulate a group or
  const container = document.querySelector('.details-group-example');

  // Close all other details when one is shown
-  container.addEventListener('wa-show', event => {
-    [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
+  container.addEventListener('sl-show', event => {
+    if (event.target.localName === 'sl-details') {
+      [...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
+    }
  });
 </script>

--- a/docs/pages/components/layout.md
+++ b/docs/pages/components/layout.md
@@ -0,0 +1,118 @@
+---
+meta:
+  title: Layout
+  description: Layouts offer an easy way to scaffold pages using minimal markup.
+layout: component
+---
+
+The layout component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation.
+
+A number of sections are available as part of the layout, most of which are optional. Content is added by [slotting elements](/getting-started/usage/#slots) into various locations.
+
+This component _does not_ implement any [content sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning) or "semantic elements" internally (such as `<main>`, `<header>`, `<footer>`, etc.). Instead, it is recommended that you slot in content sectioning elements wherever you feel they're appropriate.
+
+## Layout Anatomy
+
+This image depicts the layout's anatomy, including the default positions of each section. The labels represent the [named slots](#slots) you can use to populate them.
+
+Most slots are optional. Slots that have no content will not be shown, allowing you to opt-in to just the sections of the layout you actually need.
+
+[![Screenshot of Layout Anatomy showing various slots](/assets/images/layout.png)](/assets/images/layout.png)
+
+:::tip
+If you're not familiar with how slots work in HTML, you might want to [learn more about slots](/getting-started/usage/#slots) before using this component.
+:::
+
+## Sticky Sections
+
+The following sections of the layout are "sticky" by default, meaning they remain in position as the user scrolls.
+
+- `banner`
+- `header`
+- `sub-header`
+- `aside`
+- `menu`
+
+This is often desirable, but you can change this behavior using the `disable-sticky` attribute. Use a space-delimited list of names to tell the layout which sections should not be sticky.
+
+```html
+<wa-layout disable-sticky="header aside"> ... </wa-layout>
+```
+
+## How to Apply Spacing to Your Layout
+
+The layout component _does not_ apply spacing for you. You can apply the appropriate paddings or margins directly to the elements you slot in to fine tune your spacing needs.
+
+TODO - add example here
+
+When using `<wa-layout>`, make sure to zero out all paddings and margins on `<html>` and `<body>`, otherwise you may see unexpected gaps. The following styles are highly recommended when using `<wa-layout>`.
+
+```css
+html,
+body {
+  min-height: 100%;
+  padding: 0;
+  margin: 0;
+}
+```
+
+## Skip To Content
+
+The layout provides a "skip to content" link that's visually hidden until the user tabs into it. You don't have to do anything to configure this, unless you want to change the text displayed in the link. In that case, you can slot in your own text using the `skip-to-content` slot.
+
+This example localizes the "skip to content" link for German users.
+
+```html
+<wa-layout>
+  ...
+  <span slot="skip-to-content">Zum Inhalt springen</span>
+  ...
+</wa-layout>
+```
+
+## Responsiveness
+
+The layout component tries not to have too many opinions in terms of responsive behaviors — you get to decide with your own CSS and media queries how your content responds! However, the navigation menu _does_ respond by collapsing on smaller screens. The breakpoint at which this occurs is 768px by default, but you can change it using the `mobile-breakpoint` attribute.
+
+```html
+<wa-layout mobile-breakpoint="600"> ... </wa-layout>
+```
+
+You can provide a button to toggle the navigation menu anywhere inside the layout by adding the `data-toggle-nav` attribute. (This _does not_ have to be a Web Awesome button.)
+
+```html
+<wa-layout mobile-breakpoint="600">
+  ...
+  <wa-button data-toggle-nav>Menu</wa-button>
+  ...
+</wa-layout>
+```
+
+Alternatively, you can apply `nav-state="open"` and `nav-state="closed"` to the layout component to show and hide the navigation, respectively.
+
+```html
+<wa-layout nav-state="open"> ... </wa-layout>
+```
+
+## Providing Navigation Items
+
+- TODO - example with navigation items
+- TODO - example with`<h2>` and `<a>` as navigation items
+
+## Examples
+
+### Hero Layout
+
+- TODO - Sticky header + main + footer
+
+### Blog Layout
+
+- TODO - Sticky header + main + aside + footer (blog)
+
+### App Layout
+
+- TODO - Menu + main, plus maybe headers and footers in each (app)
+
+### Docs Layout
+
+- TODO - Menu + main + aside + footer (docs)
--- a/docs/pages/components/nav-group.md
+++ b/docs/pages/components/nav-group.md
@@ -0,0 +1,89 @@
+---
+meta:
+  title: Nav Group
+  description:
+layout: component
+---
+
+```html:preview
+<wa-nav-group
+  style="
+    --gap: var(--wa-space-2xl);
+    border: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-surface-outline);
+    border-radius: var(--wa-panel-corners);
+    padding: var(--wa-space-square-m);
+  "
+>
+  <wa-nav-group>
+    <wa-nav-item href="#">
+      <wa-icon name="search" slot="prefix"></wa-icon>
+      Search
+    </wa-nav-item>
+
+    <wa-nav-item href="#">
+      <wa-icon name="bell" slot="prefix"></wa-icon>
+      Notifications
+    </wa-nav-item>
+  </wa-nav-group>
+
+  <wa-nav-group label="Workspace">
+    <wa-nav-item expandable>
+      <div slot="label" style="display: flex; align-items: center; gap: 8px;">
+        <wa-icon name="credit-card"></wa-icon>
+        Payments
+      </div>
+
+      <wa-nav-item href="#" current="page">
+        Transactions
+      </wa-nav-item>
+
+      <wa-nav-item href="#">
+        Invoices
+      </wa-nav-item>
+
+      <wa-nav-item href="#">
+        Disputed Charges
+      </wa-nav-item>
+    </wa-nav-item>
+  </wa-nav-group>
+
+  <wa-nav-group label="Reports">
+    <wa-nav-item href="#">
+      Sales
+    </wa-nav-item>
+
+    <wa-nav-item href="#">
+      Expenses
+    </wa-nav-item>
+
+    <wa-nav-item href="#">
+      Payroll
+    </wa-nav-item>
+  </wa-nav-group>
+
+  <wa-nav-item href="#">
+    <wa-icon name="question-circle" slot="prefix"></wa-icon>
+    Help
+  </wa-nav-item>
+</wa-nav-group>
+```
+
+## Examples
+
+### Nav Group with label
+
+```html:preview
+<wa-nav-group label="Workspace">
+  <wa-nav-item href="#" current="page">
+    Transactions
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    Invoices
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    Disputed Charges
+  </wa-nav-item>
+</wa-nav-group>
+```
--- a/docs/pages/components/nav-item.md
+++ b/docs/pages/components/nav-item.md
@@ -0,0 +1,232 @@
+---
+meta:
+  title: Nav Item
+  description: |
+    A nav item is intended to be used in a navigation area such as within a nav element in a sidebar or inside of a drawer. A nav item is meant to drive page level navigations.
+layout: component
+---
+
+`wa-nav-item` maps to a `role="listitem"` under the hood and should generally be used as part
+of a `<wa-nav-group>` for accessibility purposes.
+
+```html:preview
+<wa-nav-group>
+  <wa-nav-item href="#">
+    <wa-icon name="search" slot="prefix"></wa-icon>
+    Search
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    <wa-icon name="bell" slot="prefix"></wa-icon>
+    Notifications
+  </wa-nav-item>
+
+  <wa-divider></wa-divider>
+
+  <wa-nav-item href="#" current="page">
+    <wa-icon name="house-door" slot="prefix"></wa-icon>
+    Home
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    <wa-icon name="music-note-list" slot="prefix"></wa-icon>
+    Playlists
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    <wa-icon name="file-earmark-music" slot="prefix"></wa-icon>
+    Tracks
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    <wa-icon name="gear" slot="prefix"></wa-icon>
+    Settings
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    <wa-icon name="question-circle" slot="prefix"></wa-icon>
+    Help
+  </wa-nav-item>
+</wa-nav-group>
+```
+
+{% raw %}
+
+```jsx:react
+import WaNavGroup from '@shoelace-style/shoelace/dist/react/nav-group';
+import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
+import WaDivider from '@shoelace-style/shoelace/dist/react/divider';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+
+<WaNavGroup>
+  <WaNavItem href="#">
+    <WaIcon name="search" slot="prefix" />
+    Search
+  </WaNavItem>
+
+  <WaNavItem href="#">
+    <WaIcon name="bell" slot="prefix" />
+    Notifications
+  </WaNavItem>
+
+  <WaDivider></WaDivider>
+
+  <WaNavItem href="#" current="page">
+    <WaIcon name="house-door" slot="prefix" />
+    Home
+  </WaNavItem>
+
+  <WaNavItem href="#">
+    <WaIcon name="music-note-list" slot="prefix" />
+    Playlists
+  </WaNavItem>
+
+  <WaNavItem href="#">
+    <WaIcon name="file-earmark-music" slot="prefix" />
+    Tracks
+  </WaNavItem>
+
+  <WaNavItem href="#">
+    <WaIcon name="gear" slot="prefix" />
+    Settings
+  </WaNavItem>
+
+  <WaNavItem href="#">
+    <WaIcon name="question-circle" slot="prefix" />
+    Help
+  </WaNavItem>
+</WaNavGroup>
+```
+
+{% endraw %}
+
+## Examples
+
+### Active nav item
+
+Set a `<wa-nav-item>` to active using the `current` string attribute. Doing so will map to `aria-current="<string>"` under the hood. If your nav-items are intended for full page navigations, it is recommended to use `current="page"`. If your nav-items are, for example, just the active item within a list, but do not perform full page navigation (such as with table of contents) then use `current="true"`.
+
+```html:preview
+<wa-nav-item href="#" current="page">
+  Active Nav Item
+</wa-nav-item>
+```
+
+{% raw %}
+
+```jsx:react
+import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
+
+export default () => {
+  return (
+    <WaNavItem href="#" current="page">
+      Active Nav Item
+    </WaNavItem>
+  )
+}
+```
+
+{% endraw %}
+
+### Icon only
+
+```html:preview
+<wa-nav-item href="#">
+  <wa-icon name="house-door" label="Home"></wa-icon>
+</wa-nav-item>
+```
+
+{% raw %}
+
+```jsx:react
+import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+
+export default () => {
+  return (
+    <WaNavItem href="#">
+      <WaIcon name="house-door" label="Home" />
+    </WaNavItem>
+  )
+}
+```
+
+{% endraw %}
+
+### Nav items with prefix + suffix
+
+```html:preview
+<wa-nav-item href="#">
+  <wa-icon slot="prefix" name="link-45deg"></wa-icon>
+  Nav Item
+  <wa-icon slot="suffix" name="box-arrow-up-right"></wa-icon>
+</wa-nav-item>
+```
+
+{% raw %}
+
+```jsx:react
+import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
+import WaIcon from '@shoelace-style/shoelace/dist/react/icon';
+
+export default () => {
+  return (
+    <WaNavItem href="#">
+      <WaIcon slot="prefix" name="link-45deg" />
+      Nav Item
+      <WaIcon slot="suffix" name="box-arrow-up-right" />
+    </WaNavItem>
+  )
+}
+```
+
+{% endraw %}
+
+### Nav group with nested nav items
+
+Use the `expandable` attribute to mark a nav item as expandable. In addition,
+you can add a `label` slot or attribute to display in the `<wa-details>` element prior
+to expanding the nav group.
+
+```html:preview
+<wa-nav-item expandable>
+  <div slot="label" style="display: flex; align-items: center; gap: 8px;">
+    <wa-icon name="credit-card"></wa-icon>
+    Payments
+  </div>
+
+  <wa-nav-item href="#" current="page">
+    Transactions
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    Invoices
+  </wa-nav-item>
+
+  <wa-nav-item href="#">
+    Disputed Charges
+  </wa-nav-item>
+</wa-nav-group>
+```
+
+{% raw %}
+
+```jsx:react
+import WaNavItem from '@shoelace-style/shoelace/dist/react/nav-item';
+
+<WaNavItem expandable label="Payments">
+  <WaNavItem href="#" current="page">
+    Transactions
+  </WaNavItem>
+
+  <WaNavItem href="#">
+    Invoices
+  </WaNavItem>
+
+  <WaNavItem href="#">
+    Disputed Charges
+  </WaNavItem>
+</WaNavGroup>
+```
+
+{% endraw %}
--- a/docs/pages/experimental/themer.md
+++ b/docs/pages/experimental/themer.md
@@ -49,7 +49,7 @@ toc: false
  container.querySelector('[name="theme"]').addEventListener('wa-change', event => {
    themeStylesheet.href = `/dist/themes/${event.target.value}.css`;
  });
-  
+
  // Heading text
  container.querySelector('[name="heading-text"]').addEventListener('wa-input', event => {
    document.documentElement.style.setProperty('--wa-font-family-heading', event.target.value);
@@ -167,7 +167,7 @@ toc: false
          <wa-alert variant="warning" open>
            <wa-icon slot="icon" name="check-circle-fill"></wa-icon>
            It's a trap!
-          </wa-alert> 
+          </wa-alert>
          <wa-radio-group label="Faction" value="2">
            <wa-radio value="1">Galactic Empire</wa-radio>
            <wa-radio value="2">Rebel Alliance</wa-radio>
@@ -226,7 +226,7 @@ toc: false
    padding: 0 var(--wa-space-m);
    z-index: 1;
  }
-  
+
  .overlap::after {
    content: '';
    position: absolute;
@@ -264,7 +264,7 @@ toc: false
  }

  .overlap .image #fighters {
-    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), black 30%); 
+    fill: color-mix(in oklab, var(--wa-color-brand-fill-vivid), black 30%);
  }

  .overlap .image #upper_clouds {
@@ -295,6 +295,7 @@ toc: false
    margin-block-start: var(--wa-space-m);
  }

+  .cards wa-card::part(body),
  .cards wa-card::part(base) {
    height: 100%;
  }
@@ -303,6 +304,11 @@ toc: false
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
+    height: 100%;
+  }
+
+  .space-vertically > *:last-child {
+    margin-top: auto;
  }

  wa-select[label="Signet"]::part(form-control-help-text) {
--- a/docs/pages/frameworks/angular.md
+++ b/docs/pages/frameworks/angular.md
@@ -10,16 +10,40 @@ Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custo

 ## Installation

+### Download the npm package
+
 To add Web Awesome to your Angular app, install the package from npm.

 ```bash
 npm install @shoelace-style/shoelace
 ```

-Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
+### Update the Angular Configuration
+
+Next, [include a theme](/getting-started/themes). In this example, we'll import the light theme.
+Its also important to load the components by using a `<script>` tag into the index.html file. However, the Angular way to do it is by adding a script configurations into your angular.json file as follows:
+
+```json
+"architect": {
+  "build": {
+    ...
+    "options": {
+      ...
+      "styles": [
+        "src/styles.scss",
+        "@shoelace-style/shoelace/dist/themes/light.css"
+       ],
+      "scripts": [
+        "@shoelace-style/shoelace/dist/shoelace.js"
+      ]
+      ...
+```
+
+### Setting up the base path
+
+Next, set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets in the `main.ts`. In this example, we'll use the CDN as a base path.

 ```jsx
-import '@shoelace-style/shoelace/%NPMDIR%/themes/default.css';
 import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path';

 setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
--- a/docs/pages/getting-started/usage.md
+++ b/docs/pages/getting-started/usage.md
@@ -212,9 +212,30 @@ If `settings.json` already exists, simply add the above line to the root of the

 ### JetBrains IDEs

-If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Web Awesome from NPM, the editor will automatically detect the `web-types.json` file from the package and you should immediately see component information in your editor.
+If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Shoelace from NPM, the editor will automatically detect the `web-types.json` file from the package and you should immediately see component information in your editor.

-If you are installing from the CDN, you can [download a local copy](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace/dist/web-types.json) and add it to the root of your project.
+If you are installing from the CDN, you can [download a local copy](https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace/dist/web-types.json) and add it to the root of your project. Be sure to add a reference to the `web-types.json` file in your `package.json` in order for your editor to properly detect it.
+
+```json
+{
+  ...
+  "web-types": "./web-types.json"
+  ...
+}
+```
+
+If you are using types from multiple projects, you can add an array of references.
+
+```json
+{
+  ...
+  "web-types": [
+    ...,
+    "./web-types.json"
+  ]
+  ...
+}
+```

 ### Other Editors

--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -85,7 +85,7 @@ With Web Awesome, you can:
 - Incrementally adopt components as needed (no need to ditch your framework)
 - Upgrade or switch frameworks without rebuilding foundational components

-If your organization is looking to build a design system, [Web Awesome will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871).\* All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come.
+If your organization is looking to build a design system, [Web Awesome will save you thousands of dollars](https://medium.com/eightshapes-llc/and-you-thought-buttons-were-easy-26eb5b5c1871). All the foundational components you need are right here, ready to be customized for your brand. And since it's built on web standards, browsers will continue to support it for many years to come.

 Whether you use Web Awesome as a starting point for your organization's design system or for a fun personal project, there's no limit to what you can do with it.

--- a/docs/pages/layouts/advanced-example-playground.njk
+++ b/docs/pages/layouts/advanced-example-playground.njk
@@ -0,0 +1,9 @@
+---
+layout: layout-example.njk
+---
+
+{% set in_playground = true %}
+{% set html_file = "layout-templates/advanced-example.html" %}
+{% set css_file = "layout-templates/advanced-example.css" %}
+
+{% include "playground.njk" %}
--- a/docs/pages/layouts/advanced-example.njk
+++ b/docs/pages/layouts/advanced-example.njk
@@ -0,0 +1,10 @@
+---
+layout: layout-example.njk
+---
+
+<style>
+  {% include "layout-templates/advanced-example.css" %}
+</style>
+
+{% include "layout-templates/advanced-example.html" %}
+
--- a/docs/pages/layouts/app-playground.njk
+++ b/docs/pages/layouts/app-playground.njk
@@ -0,0 +1,8 @@
+---
+layout: layout-example.njk
+---
+
+{% set html_file = "layout-templates/app.html" %}
+{% set css_file = "layout-templates/app.css" %}
+
+{% include "playground.njk" %}
--- a/docs/pages/layouts/app.njk
+++ b/docs/pages/layouts/app.njk
@@ -0,0 +1,9 @@
+---
+layout: layout-example.njk
+---
+
+<style>
+  {% include "layout-templates/app.css" %}
+</style>
+
+{% include "layout-templates/app.html" %}
--- a/docs/pages/layouts/example-playground.njk
+++ b/docs/pages/layouts/example-playground.njk
@@ -0,0 +1,10 @@
+---
+layout: layout-example.njk
+---
+
+<!-- Required for load layout widget -->
+{% set in_playground = true %}
+{% set html_file = "layout-templates/example.html" %}
+{% set css_file = "layout-templates/example.css" %}
+
+{% include "playground.njk" %}
--- a/docs/pages/layouts/example.njk
+++ b/docs/pages/layouts/example.njk
@@ -0,0 +1,10 @@
+---
+layout: layout-example.njk
+---
+
+<style>
+  {% include "layout-templates/example.css" %}
+</style>
+
+{% include "layout-templates/example.html" %}
+
--- a/docs/pages/layouts/hero-playground.njk
+++ b/docs/pages/layouts/hero-playground.njk
@@ -0,0 +1,9 @@
+---
+layout: layout-example.njk
+---
+
+{% set in_playground = true %}
+{% set html_file = "layout-templates/hero.html" %}
+{% set css_file = "layout-templates/hero.css" %}
+
+{% include "playground.njk" %}
--- a/docs/pages/layouts/hero.njk
+++ b/docs/pages/layouts/hero.njk
@@ -0,0 +1,9 @@
+---
+layout: layout-example.njk
+---
+
+<style>
+  {% include "layout-templates/example.css" %}
+</style>
+
+{% include "layout-templates/example.html" %}
--- a/docs/pages/layouts/index.md
+++ b/docs/pages/layouts/index.md
@@ -0,0 +1,18 @@
+<script type="module">
+window.Turbo.session.drive = false
+</script>
+
+- [Example Layout](/layouts/example/index.html)
+- [Example Playground](/layouts/example-playground/index.html)
+
+- [Advanced Example Layout](/layouts/advanced-example/index.html)
+- [Advanced Example Playground](/layouts/advanced-example-playground/index.html)
+
+- [App Layout](/layouts/app/index.html)
+- [App Playground](/layouts/app-playground/index.html)
+
+- [Hero Layout](/layouts/hero/index.html)
+- [Hero Playground](/layouts/hero-playground/index.html)
+
+- [Sport Awesome Layout](/layouts/sport-awesome/index.html)
+- [Sport Awesome Playground](/layouts/sport-awesome-playground/index.html)
--- a/docs/pages/layouts/sport-awesome-playground.njk
+++ b/docs/pages/layouts/sport-awesome-playground.njk
@@ -0,0 +1,10 @@
+---
+layout: layout-example.njk
+---
+
+{% set in_playground = true %}
+{% set html_file = "layout-templates/sport-awesome.html" %}
+{% set css_file = "layout-templates/sport-awesome.css" %}
+
+{% include "playground.njk" %}
+
--- a/docs/pages/layouts/sport-awesome.njk
+++ b/docs/pages/layouts/sport-awesome.njk
@@ -0,0 +1,10 @@
+---
+layout: layout-example.njk
+---
+
+<style>
+  {% include "layout-templates/sport-awesome.css" %}
+</style>
+
+{% include "layout-templates/sport-awesome.html" %}
+
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -16,13 +16,45 @@ New versions of Web Awesome are released as-needed and generally occur when a cr

 - Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
 - Changed `primary` variants to `brand` in all components
+- Improved submenu selection by implementing the [safe triangle](https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) method [#1550]
 - Removed `default` from `<wa-button>` and made `neutral` the new default
 - Removed the `circle` modifier from `<wa-button>` because button's no longer have a set height

 ## Next

+- Fixed a bug with bundled components using CDN builds not having translations on initial connect [#1696]
+- Fixed a bug where the `"sl-change"` event would always fire simultaneously with `"sl-input"` event in `<sl-color-picker>`. The `<sl-change>` event now only fires when a user stops dragging a slider or stops dragging on the color canvas. [#1689]
+
+## 2.11.2
+
+- Fixed a bug in `<sl-carousel>` component that caused an error to be thrown when rendered with Lit [#1684]
+
+## 2.11.1
+
+- Improved the experimental `<sl-carousel>` component [#1605]
+
+## 2.11.0
+
+- Added the Croatian translation [#1656]
+- Fixed a bug that caused the [[Escape]] key to stop propagating when tooltips are disabled [#1607]
+- Fixed a bug that made it impossible to style placeholders in `<sl-select>` [#1667]
+- Fixed a bug that caused `dist/react/index.js` to be blank [#1659]
+
+## 2.10.0
+
+- Added the Simplified Chinese translation [#1604]
 - Fixed a bug [in the localize dependency](https://github.com/shoelace-style/localize/issues/20) that caused underscores in language codes to throw a `RangeError`
+- Fixed a bug in the focus trapping utility used by modals that caused unexpected focus behavior. [#1583]
+- Fixed a bug in `<sl-copy-button>` that prevented exported tooltip parts from being styled [#1586]
+- Fixed a bug in `<sl-menu>` that caused it not to fire the `sl-select` event if you clicked an element inside of a `<sl-menu-item>` [#1599]
+- Fixed a bug that caused focus trap logic to hang the browser in certain circumstances [#1612]
+- Improved submenu selection by implementing the [safe triangle](https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) method [#1550]
 - Updated `@shoelace-style/localize` to 3.1.0
+- Updated `@lib-labs/react` to stable `@lit/react`
+- Updated Bootstrap Icons to 1.11.1
+- Updated Lit to 3.0.0
+- Updated TypeScript to 5.2.2
+- Updated all other dependencies to latest versions

 ## 2.9.0

--- a/docs/pages/resources/contributing.md
+++ b/docs/pages/resources/contributing.md
@@ -36,6 +36,7 @@ I realize that one cannot reasonably enforce this any more than one can enforce
 The [issue tracker](https://github.com/shoelace-style/shoelace/issues) is for bug reports, feature requests, and pull requests.

 - Please **do not** use the issue tracker for personal support requests. Use [the discussion forum](https://github.com/shoelace-style/shoelace/discussions/categories/help) instead.
+- Please **do not** use the issue tracker for feature requests. Use [the discussion forum](https://github.com/shoelace-style/shoelace/discussions/categories/ideas) instead.
 - Please **do not** derail, hijack, or troll issues. Keep the discussion on topic and be respectful of others.
 - Please **do not** post comments with "+1" or "👍". Use [reactions](https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) instead.
 - Please **do** use the issue tracker for feature requests, bug reports, and pull requests.
@@ -44,10 +45,10 @@ Issues that do not follow these guidelines are subject to closure. There simply

 ### Feature Requests

-Feature requests can be added using the issue tracker.
+Feature requests can be added using [the discussion forum](https://github.com/shoelace-style/shoelace/discussions/categories/ideas).

 - Please **do** search for an existing request before suggesting a new feature.
- Please **do** use the "👍" reaction to vote for a feature.
+- Please **do** use the voting buttons to vote for a feature.
 - Please **do** share substantial use cases and perspective that support new features if they haven't already been mentioned.
 - Please **do not** bump, spam, or ping contributors to prioritize your own feature.

--- a/docs/pages/tutorials/integrating-with-rails.md
+++ b/docs/pages/tutorials/integrating-with-rails.md
@@ -88,7 +88,7 @@ module.exports = environment;
 The final step is to add the corresponding `pack_tags` to the page. You should have the following `tags` in the `<head>` section of `app/views/layouts/application.html.erb`.

 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
    <!-- ... -->
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -46,11 +46,10 @@
    "build": "node scripts/build.js",
    "verify": "npm run prettier:check && npm run lint && npm run build && npm run test",
    "prepublishOnly": "npm run verify",
-    "prettier": "prettier --write --loglevel warn .",
-    "prettier:check": "prettier --check --loglevel warn .",
+    "prettier": "prettier --write --log-level warn .",
+    "prettier:check": "prettier --check --log-level warn .",
    "lint": "eslint src --max-warnings 0",
    "lint:fix": "eslint src --max-warnings 0 --fix",
-    "ts-check": "tsc --noEmit --project ./tsconfig.json",
    "create": "plop --plopfile scripts/plop/plopfile.js",
    "test": "web-test-runner --group default",
    "test:component": "web-test-runner -- --watch --group",
@@ -63,77 +62,77 @@
    "node": ">=14.17.0"
  },
  "dependencies": {
-    "@ctrl/tinycolor": "^4.0.1",
-    "@floating-ui/dom": "^1.2.1",
-    "@lit-labs/react": "^2.0.3",
+    "@ctrl/tinycolor": "^4.0.2",
+    "@floating-ui/dom": "^1.5.3",
    "@shoelace-style/animations": "^1.1.0",
    "@shoelace-style/localize": "^3.1.2",
    "composed-offset-position": "^0.0.4",
-    "lit": "^2.7.5",
+    "lit": "^3.0.0",
    "qr-creator": "^1.0.0"
  },
  "devDependencies": {
    "@11ty/eleventy": "^2.0.1",
-    "@custom-elements-manifest/analyzer": "^0.8.3",
-    "@open-wc/testing": "^3.1.7",
-    "@types/mocha": "^10.0.1",
-    "@types/react": "^18.0.26",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@web/dev-server-esbuild": "^0.3.3",
-    "@web/test-runner": "^0.15.0",
-    "@web/test-runner-commands": "^0.6.5",
+    "@custom-elements-manifest/analyzer": "^0.8.4",
+    "@lit/react": "^1.0.0",
+    "@open-wc/testing": "^3.2.0",
+    "@types/mocha": "^10.0.2",
+    "@types/react": "^18.2.28",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "@web/dev-server-esbuild": "^0.3.6",
+    "@web/test-runner": "^0.15.3",
+    "@web/test-runner-commands": "^0.6.6",
    "@web/test-runner-playwright": "^0.9.0",
-    "bootstrap-icons": "^1.11.0",
+    "bootstrap-icons": "^1.11.1",
    "browser-sync": "^2.29.3",
-    "chalk": "^5.2.0",
+    "chalk": "^5.3.0",
    "change-case": "^4.1.2",
    "command-line-args": "^5.2.1",
-    "comment-parser": "^1.3.1",
+    "comment-parser": "^1.4.0",
    "cspell": "^6.18.1",
-    "custom-element-jet-brains-integration": "^1.1.0",
-    "custom-element-vs-code-integration": "^1.1.0",
-    "del": "^7.0.0",
+    "custom-element-jet-brains-integration": "^1.4.0",
+    "custom-element-vs-code-integration": "^1.2.1",
+    "del": "^7.1.0",
    "download": "^8.0.0",
-    "esbuild": "^0.18.2",
+    "esbuild": "^0.19.4",
    "esbuild-plugin-replace": "^1.4.0",
-    "eslint": "^8.44.0",
+    "eslint": "^8.51.0",
    "eslint-plugin-chai-expect": "^3.0.0",
    "eslint-plugin-chai-friendly": "^0.7.2",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-lit": "^1.8.3",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-lit": "^1.9.1",
    "eslint-plugin-lit-a11y": "^4.1.0",
-    "eslint-plugin-markdown": "^3.0.0",
+    "eslint-plugin-markdown": "^3.0.1",
    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
-    "eslint-plugin-wc": "^1.5.0",
+    "eslint-plugin-wc": "^2.0.4",
    "front-matter": "^4.0.2",
    "get-port": "^7.0.0",
-    "globby": "^13.1.3",
+    "globby": "^13.2.2",
    "husky": "^8.0.3",
    "jsdom": "^22.1.0",
-    "jsonata": "^2.0.1",
-    "lint-staged": "^13.1.0",
+    "jsonata": "^2.0.3",
+    "lint-staged": "^14.0.1",
    "lunr": "^2.3.9",
    "markdown-it-container": "^3.0.0",
    "markdown-it-ins": "^3.0.1",
    "markdown-it-kbd": "^2.2.2",
    "markdown-it-mark": "^3.0.1",
    "markdown-it-replace-it": "^1.0.0",
-    "npm-check-updates": "^16.6.2",
-    "ora": "^6.3.1",
+    "npm-check-updates": "^16.14.6",
+    "ora": "^7.0.1",
    "pascal-case": "^3.1.2",
-    "plop": "^3.1.1",
-    "prettier": "^2.8.8",
+    "plop": "^4.0.0",
+    "prettier": "^3.0.3",
    "prismjs": "^1.29.0",
    "react": "^18.2.0",
    "recursive-copy": "^2.0.14",
-    "sinon": "^15.0.1",
+    "sinon": "^16.1.0",
    "smartquotes": "^2.3.2",
    "source-map": "^0.7.4",
    "strip-css-comments": "^5.0.0",
-    "tslib": "^2.4.1",
-    "typescript": "^5.1.3",
-    "user-agent-data-types": "^0.3.0"
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "user-agent-data-types": "^0.3.1"
  },
  "lint-staged": {
    "*.{ts,js}": [
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@@ -1,5 +1,5 @@
-/* eslint-env node */
-module.exports = {
+/** @type {import("prettier").Config} */
+const config = {
  arrowParens: 'avoid',
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'css',
@@ -16,3 +16,5 @@ module.exports = {
  trailingComma: 'none',
  useTabs: false
 };
+
+export default config;
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -87,7 +87,7 @@ async function buildTheDocs(watch = false) {
 // Builds the source with esbuild.
 //
 async function buildTheSource() {
-  const alwaysExternal = ['@lit-labs/react', 'react'];
+  const alwaysExternal = ['@lit/react', 'react'];

  const cdnConfig = {
    format: 'esm',
@@ -122,7 +122,7 @@ async function buildTheSource() {
    // We don't bundle certain dependencies in the unbundled build. This ensures we ship bare module specifiers,
    // allowing end users to better optimize when using a bundler. (Only packages that ship ESM can be external.)
    //
-    // We never bundle React or @lit-labs/react though!
+    // We never bundle React or @lit/react though!
    //
    external: alwaysExternal,
    splitting: true,
@@ -247,7 +247,14 @@ if (serve) {

  const bs = browserSync.create();
  const port = await getPort({ port: portNumbers(4000, 4999) });
+  /**
+   * @type {import("browser-sync").Options}
+   */
  const browserSyncConfig = {
+    snippetOptions: {
+      // Ignore all HTML files within the templates folder
+      ignorePaths: ['/assets/playground-service-worker-proxy.html', '/assets/playground-service-worker.js']
+    },
    startPath: '/',
    port,
    logLevel: 'silent',
@@ -328,12 +335,12 @@ if (!serve) {

  await nextTask('Building the docs', async () => {
    result = await buildTheDocs();
-  });

-  // Log deferred output
-  if (result.output.length > 0) {
-    console.log('\n' + result.output.join('\n'));
-  }
+    // Log deferred output
+    if (result.output.length > 0) {
+      console.log('\n' + result.output.join('\n'));
+    }
+  });
 }

 // Cleanup on exit
--- a/scripts/make-react.js
+++ b/scripts/make-react.js
@@ -1,10 +1,9 @@
 import commandLineArgs from 'command-line-args';
 import fs from 'fs';
 import path from 'path';
-import chalk from 'chalk';
 import { deleteSync } from 'del';
 import prettier from 'prettier';
-import prettierConfig from '../prettier.config.cjs';
+import { default as prettierConfig } from '../prettier.config.js';
 import { getAllComponents } from './shared.js';

 const { outdir } = commandLineArgs({ name: 'outdir', type: String });
@@ -20,7 +19,7 @@ const metadata = JSON.parse(fs.readFileSync(path.join(outdir, 'custom-elements.j
 const components = getAllComponents(metadata);
 const index = [];

-components.map(component => {
+for await (const component of components) {
  const tagWithoutPrefix = component.tagName.replace(/^wa-/, '');
  const componentDir = path.join(reactDir, tagWithoutPrefix);
  const componentFile = path.join(componentDir, 'index.ts');
@@ -31,8 +30,7 @@ components.map(component => {
  const eventExports = (component.events || [])
    .map(event => `export type { ${event.eventName} } from '../../../src/events/events';`)
    .join('\n');
-  const eventNameImport =
-    (component.events || []).length > 0 ? `import { type EventName  } from '@lit-labs/react';` : ``;
+  const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
  const events = (component.events || [])
    .map(event => `${event.reactName}: '${event.name}' as EventName<${event.eventName}>`)
    .join(',\n');
@@ -41,10 +39,10 @@ components.map(component => {

  const jsDoc = component.jsDoc || '';

-  const source = prettier.format(
+  const source = await prettier.format(
    `
      import * as React from 'react';
-      import { createComponent } from '@lit-labs/react';
+      import { createComponent } from '@lit/react';
      import Component from '../../${importPath}';

      ${eventNameImport}
@@ -75,7 +73,7 @@ components.map(component => {
  index.push(`export { default as ${component.name} } from './${tagWithoutPrefix}/index.js';`);

  fs.writeFileSync(componentFile, source, 'utf8');
-});
+}

 // Generate the index file
 fs.writeFileSync(path.join(reactDir, 'index.ts'), index.join('\n'), 'utf8');
--- a/scripts/make-themes.js
+++ b/scripts/make-themes.js
@@ -24,7 +24,7 @@ filesToEmbed.forEach(file => {
 });

 // Loop through each theme file, copying the .css and generating a .js version for Lit users
-files.forEach(file => {
+files.forEach(async file => {
  let source = fs.readFileSync(file, 'utf8');

  // If the source has "/* _filename.css */" in it, replace it with the embedded styles
@@ -32,11 +32,11 @@ files.forEach(file => {
    source = source.replace(`/* ${key} */`, embeds[key]);
  });

-  const css = prettier.format(stripComments(source), {
+  const css = await prettier.format(stripComments(source), {
    parser: 'css'
  });

-  let js = prettier.format(
+  let js = await prettier.format(
    `
    import { css } from 'lit';

--- a/src/components/alert/alert.test.ts
+++ b/src/components/alert/alert.test.ts
@@ -210,10 +210,12 @@ describe('<wa-alert>', () => {
    };

    it('deletes the toast stack after the last alert is done', async () => {
-      const container = await fixture<HTMLElement>(html`<div>
-        <wa-alert data-testid="alert1" closable>alert 1</wa-alert>
-        <wa-alert data-testid="alert2" closable>alert 2</wa-alert>
-      </div>`);
+      const container = await fixture<HTMLElement>(
+        html`<div>
+          <wa-alert data-testid="alert1" closable>alert 1</wa-alert>
+          <wa-alert data-testid="alert2" closable>alert 2</wa-alert>
+        </div>`
+      );

      const alert1 = queryByTestId<WaAlert>(container, 'alert1');
      const alert2 = queryByTestId<WaAlert>(container, 'alert2');
--- a/src/components/avatar/avatar.styles.ts
+++ b/src/components/avatar/avatar.styles.ts
@@ -22,6 +22,7 @@ export default css`
    font-size: calc(var(--size) * 0.5);
    color: var(--wa-color-neutral-text-on-vivid);
    user-select: none;
+    -webkit-user-select: none;
    vertical-align: middle;
  }

--- a/src/components/badge/badge.styles.ts
+++ b/src/components/badge/badge.styles.ts
@@ -20,6 +20,7 @@ export default css`
    white-space: nowrap;
    padding: 0.35em 0.6em;
    user-select: none;
+    -webkit-user-select: none;
    cursor: inherit;
  }

--- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
@@ -80,5 +80,6 @@ export default css`
    align-items: center;
    margin: 0 var(--wa-space-xs);
    user-select: none;
+    -webkit-user-select: none;
  }
 `;
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -21,11 +21,15 @@ export default css`
    font-weight: var(--wa-font-weight-action);
    text-decoration: none;
    user-select: none;
+    -webkit-user-select: none;
    white-space: nowrap;
    vertical-align: middle;
    padding: 0;
-    transition: var(--wa-transition-faster) background-color, var(--wa-transition-faster) color,
-      var(--wa-transition-faster) border, var(--wa-transition-faster) box-shadow;
+    transition:
+      var(--wa-transition-faster) background-color,
+      var(--wa-transition-faster) color,
+      var(--wa-transition-faster) border,
+      var(--wa-transition-faster) box-shadow;
    cursor: inherit;
  }

--- a/src/components/button/button.test.ts
+++ b/src/components/button/button.test.ts
@@ -98,25 +98,25 @@ describe('<wa-button>', () => {
    });

    it('should render a link with rel="noreferrer noopener" when target is set and rel is not', async () => {
-      const el = await fixture<WaButton>(
-        html` <wa-button href="https://example.com/" target="_blank">Link</wa-button> `
-      );
+      const el = await fixture<WaButton>(html`
+        <wa-button href="https://example.com/" target="_blank">Link</wa-button>
+      `);
      const link = el.shadowRoot!.querySelector('a')!;
      expect(link?.getAttribute('rel')).to.equal('noreferrer noopener');
    });

    it('should render a link with rel="" when a target is provided and rel is empty', async () => {
-      const el = await fixture<WaButton>(
-        html` <wa-button href="https://example.com/" target="_blank" rel="">Link</wa-button> `
-      );
+      const el = await fixture<WaButton>(html`
+        <wa-button href="https://example.com/" target="_blank" rel="">Link</wa-button>
+      `);
      const link = el.shadowRoot!.querySelector('a')!;
      expect(link?.getAttribute('rel')).to.equal('');
    });

    it(`should render a link with a custom rel when a custom rel is provided`, async () => {
-      const el = await fixture<WaButton>(
-        html` <wa-button href="https://example.com/" target="_blank" rel="1">Link</wa-button> `
-      );
+      const el = await fixture<WaButton>(html`
+        <wa-button href="https://example.com/" target="_blank" rel="1">Link</wa-button>
+      `);
      const link = el.shadowRoot!.querySelector('a')!;
      expect(link?.getAttribute('rel')).to.equal('1');
    });
--- a/src/components/card/card.test.ts
+++ b/src/components/card/card.test.ts
@@ -7,9 +7,9 @@ describe('<wa-card>', () => {

  describe('when provided no parameters', () => {
    before(async () => {
-      el = await fixture<WaCard>(
-        html` <wa-card>This is just a basic card. No image, no header, and no footer. Just your content.</wa-card> `
-      );
+      el = await fixture<WaCard>(html`
+        <wa-card>This is just a basic card. No image, no header, and no footer. Just your content.</wa-card>
+      `);
    });

    it('should pass accessibility tests', async () => {
--- a/src/components/carousel-item/carousel-item.component.ts
+++ b/src/components/carousel-item/carousel-item.component.ts
@@ -17,10 +17,6 @@ import type { CSSResultGroup } from 'lit';
 export default class WaCarouselItem extends WebAwesomeElement {
  static styles: CSSResultGroup = styles;

-  static isCarouselItem(node: Node) {
-    return node instanceof Element && node.getAttribute('aria-roledescription') === 'slide';
-  }
-
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute('role', 'group');
--- a/src/components/carousel-item/carousel-item.styles.ts
+++ b/src/components/carousel-item/carousel-item.styles.ts
@@ -19,8 +19,8 @@ export default css`
  }

  ::slotted(img) {
-    width: 100%;
-    height: 100%;
+    width: 100% !important;
+    height: 100% !important;
    object-fit: cover;
  }
 `;
--- a/src/components/carousel/carousel.component.ts
+++ b/src/components/carousel/carousel.component.ts
@@ -1,3 +1,5 @@
+import '../../internal/scrollend-polyfill.js';
+
 import { AutoplayController } from './autoplay-controller.js';
 import { clamp } from '../../internal/math.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -10,10 +12,10 @@ import { range } from 'lit/directives/range.js';
 import { ScrollController } from './scroll-controller.js';
 import { watch } from '../../internal/watch.js';
 import styles from './carousel.styles.js';
-import WaCarouselItem from '../carousel-item/carousel-item.component.js';
 import WaIcon from '../icon/icon.component.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValueMap } from 'lit';
+import type WaCarouselItem from '../carousel-item/carousel-item.component.js';

 /**
 * @summary Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
@@ -40,7 +42,7 @@ import type { CSSResultGroup } from 'lit';
 * @csspart navigation-button--next - Applied to the next button.
 *
 * @cssproperty --slide-gap - The space between each slide.
- * @cssproperty --aspect-ratio - The aspect ratio of each slide.
+ * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide.
 * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become
 *  partially visible as a scroll hint.
 */
@@ -68,7 +70,7 @@ export default class WaCarousel extends WebAwesomeElement {

  /**
   * Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page`
-   * greater than one.
+   * greater than one. It can't be higher than `slides-per-page`.
   */
  @property({ type: Number, attribute: 'slides-per-move' }) slidesPerMove = 1;

@@ -78,7 +80,6 @@ export default class WaCarousel extends WebAwesomeElement {
  /** When set, it is possible to scroll through the slides by dragging them with the mouse. */
  @property({ type: Boolean, reflect: true, attribute: 'mouse-dragging' }) mouseDragging = false;

-  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
  @query('.carousel__slides') scrollContainer: HTMLElement;
  @query('.carousel__pagination') paginationContainer: HTMLElement;

@@ -87,7 +88,6 @@ export default class WaCarousel extends WebAwesomeElement {

  private autoplayController = new AutoplayController(this, () => this.next());
  private scrollController = new ScrollController(this);
-  private readonly slides = this.getElementsByTagName('wa-carousel-item');
  private intersectionObserver: IntersectionObserver; // determines which slide is displayed
  // A map containing the state of all the slides
  private readonly intersectionObserverEntries = new Map<Element, IntersectionObserverEntry>();
@@ -133,19 +133,45 @@ export default class WaCarousel extends WebAwesomeElement {
  protected firstUpdated(): void {
    this.initializeSlides();
    this.mutationObserver = new MutationObserver(this.handleSlotChange);
-    this.mutationObserver.observe(this, { childList: true, subtree: false });
+    this.mutationObserver.observe(this, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  protected willUpdate(changedProperties: PropertyValueMap<WaCarousel> | Map<PropertyKey, unknown>): void {
+    // Ensure the slidesPerMove is never higher than the slidesPerPage
+    if (changedProperties.has('slidesPerMove') || changedProperties.has('slidesPerPage')) {
+      this.slidesPerMove = Math.min(this.slidesPerMove, this.slidesPerPage);
+    }
  }

  private getPageCount() {
-    return Math.ceil(this.getSlides().length / this.slidesPerPage);
+    const slidesCount = this.getSlides().length;
+    const { slidesPerPage, slidesPerMove, loop } = this;
+
+    const pages = loop ? slidesCount / slidesPerMove : (slidesCount - slidesPerPage) / slidesPerMove + 1;
+
+    return Math.ceil(pages);
  }

  private getCurrentPage() {
-    return Math.ceil(this.activeSlide / this.slidesPerPage);
+    return Math.ceil(this.activeSlide / this.slidesPerMove);
  }

+  private canScrollNext(): boolean {
+    return this.loop || this.getCurrentPage() < this.getPageCount() - 1;
+  }
+
+  private canScrollPrev(): boolean {
+    return this.loop || this.getCurrentPage() > 0;
+  }
+
+  /** @internal Gets all carousel items. */
  private getSlides({ excludeClones = true }: { excludeClones?: boolean } = {}) {
-    return [...this.slides].filter(slide => !excludeClones || !slide.hasAttribute('data-clone'));
+    return [...this.children].filter(
+      (el: HTMLElement) => this.isCarouselItem(el) && (!excludeClones || !el.hasAttribute('data-clone'))
+    ) as WaCarouselItem[];
  }

  private handleKeyDown(event: KeyboardEvent) {
@@ -201,20 +227,22 @@ export default class WaCarousel extends WebAwesomeElement {

      // Scrolls to the original slide without animating, so the user won't notice that the position has changed
      this.goToSlide(clonePosition, 'auto');
-
-      return;
+    } else if (firstIntersecting) {
+      // Update the current index based on the first visible slide
+      const slideIndex = slides.indexOf(firstIntersecting.target as WaCarouselItem);
+      // Set the index to the first "snappable" slide
+      this.activeSlide = Math.ceil(slideIndex / this.slidesPerMove) * this.slidesPerMove;
    }
+  }

-    // Activate the first intersecting slide
-    if (firstIntersecting) {
-      this.activeSlide = slides.indexOf(firstIntersecting.target as WaCarouselItem);
-    }
+  private isCarouselItem(node: Node): node is WaCarouselItem {
+    return node instanceof Element && node.tagName.toLowerCase() === 'wa-carousel-item';
  }

  private handleSlotChange = (mutations: MutationRecord[]) => {
    const needsInitialization = mutations.some(mutation =>
      [...mutation.addedNodes, ...mutation.removedNodes].some(
-        node => WaCarouselItem.isCarouselItem(node) && !(node as HTMLElement).hasAttribute('data-clone')
+        (el: HTMLElement) => this.isCarouselItem(el) && !el.hasAttribute('data-clone')
      )
    );

@@ -222,13 +250,13 @@ export default class WaCarousel extends WebAwesomeElement {
    if (needsInitialization) {
      this.initializeSlides();
    }
+
    this.requestUpdate();
  };

  @watch('loop', { waitUntilFirstUpdate: true })
  @watch('slidesPerPage', { waitUntilFirstUpdate: true })
  initializeSlides() {
-    const slides = this.getSlides();
    const intersectionObserver = this.intersectionObserver;

    this.intersectionObserverEntries.clear();
@@ -246,23 +274,11 @@ export default class WaCarousel extends WebAwesomeElement {
      }
    });

+    this.updateSlidesSnap();
+
    if (this.loop) {
      // Creates clones to be placed before and after the original elements to simulate infinite scrolling
-      const slidesPerPage = this.slidesPerPage;
-      const lastSlides = slides.slice(-slidesPerPage);
-      const firstSlides = slides.slice(0, slidesPerPage);
-
-      lastSlides.reverse().forEach((slide, i) => {
-        const clone = slide.cloneNode(true) as HTMLElement;
-        clone.setAttribute('data-clone', String(slides.length - i - 1));
-        this.prepend(clone);
-      });
-
-      firstSlides.forEach((slide, i) => {
-        const clone = slide.cloneNode(true) as HTMLElement;
-        clone.setAttribute('data-clone', String(i));
-        this.append(clone);
-      });
+      this.createClones();
    }

    this.getSlides({ excludeClones: false }).forEach(slide => {
@@ -273,6 +289,26 @@ export default class WaCarousel extends WebAwesomeElement {
    this.goToSlide(this.activeSlide, 'auto');
  }

+  private createClones() {
+    const slides = this.getSlides();
+
+    const slidesPerPage = this.slidesPerPage;
+    const lastSlides = slides.slice(-slidesPerPage);
+    const firstSlides = slides.slice(0, slidesPerPage);
+
+    lastSlides.reverse().forEach((slide, i) => {
+      const clone = slide.cloneNode(true) as HTMLElement;
+      clone.setAttribute('data-clone', String(slides.length - i - 1));
+      this.prepend(clone);
+    });
+
+    firstSlides.forEach((slide, i) => {
+      const clone = slide.cloneNode(true) as HTMLElement;
+      clone.setAttribute('data-clone', String(i));
+      this.append(clone);
+    });
+  }
+
  @watch('activeSlide')
  handelSlideChange() {
    const slides = this.getSlides();
@@ -292,12 +328,12 @@ export default class WaCarousel extends WebAwesomeElement {
  }

  @watch('slidesPerMove')
-  handleSlidesPerMoveChange() {
-    const slides = this.getSlides({ excludeClones: false });
+  updateSlidesSnap() {
+    const slides = this.getSlides();

    const slidesPerMove = this.slidesPerMove;
    slides.forEach((slide, i) => {
-      const shouldSnap = Math.abs(i - slidesPerMove) % slidesPerMove === 0;
+      const shouldSnap = (i + slidesPerMove) % slidesPerMove === 0;
      if (shouldSnap) {
        slide.style.removeProperty('scroll-snap-align');
      } else {
@@ -325,15 +361,7 @@ export default class WaCarousel extends WebAwesomeElement {
   * @param behavior - The behavior used for scrolling.
   */
  previous(behavior: ScrollBehavior = 'smooth') {
-    let previousIndex = this.activeSlide || this.activeSlide - this.slidesPerMove;
-    let canSnap = false;
-
-    while (!canSnap && previousIndex > 0) {
-      previousIndex -= 1;
-      canSnap = Math.abs(previousIndex - this.slidesPerMove) % this.slidesPerMove === 0;
-    }
-
-    this.goToSlide(previousIndex, behavior);
+    this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);
  }

  /**
@@ -357,8 +385,13 @@ export default class WaCarousel extends WebAwesomeElement {
    const slides = this.getSlides();
    const slidesWithClones = this.getSlides({ excludeClones: false });

+    // No need to do anything in case there are no items in the carousel
+    if (!slides.length) {
+      return;
+    }
+
    // Sets the next index without taking into account clones, if any.
-    const newActiveSlide = (index + slides.length) % slides.length;
+    const newActiveSlide = loop ? (index + slides.length) % slides.length : clamp(index, 0, slides.length - 1);
    this.activeSlide = newActiveSlide;

    // Get the index of the next slide. For looping carousel it adds `slidesPerPage`
@@ -377,11 +410,11 @@ export default class WaCarousel extends WebAwesomeElement {
  }

  render() {
-    const { scrollController, slidesPerPage } = this;
+    const { scrollController, slidesPerMove } = this;
    const pagesCount = this.getPageCount();
    const currentPage = this.getCurrentPage();
-    const prevEnabled = this.loop || currentPage > 0;
-    const nextEnabled = this.loop || currentPage < pagesCount - 1;
+    const prevEnabled = this.canScrollPrev();
+    const nextEnabled = this.canScrollNext();
    const isLtr = this.localize.dir() === 'ltr';

    return html`
@@ -459,7 +492,7 @@ export default class WaCarousel extends WebAwesomeElement {
                      aria-selected="${isActive ? 'true' : 'false'}"
                      aria-label="${this.localize.term('goToSlide', index + 1, pagesCount)}"
                      tabindex=${isActive ? '0' : '-1'}
-                      @click=${() => this.goToSlide(index * slidesPerPage)}
+                      @click=${() => this.goToSlide(index * slidesPerMove)}
                      @keydown=${this.handleKeyDown}
                    ></button>
                  `;
--- a/src/components/carousel/carousel.test.ts
+++ b/src/components/carousel/carousel.test.ts
@@ -1,6 +1,8 @@
 import '../../../dist/webawesome.js';
 import { clickOnElement } from '../../internal/test.js';
 import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { map } from 'lit/directives/map.js';
+import { range } from 'lit/directives/range.js';
 import sinon from 'sinon';
 import type WaCarousel from './carousel.js';

@@ -223,6 +225,36 @@ describe('<wa-carousel>', () => {
      // Assert
      expect(el.scrollContainer.style.getPropertyValue('--slides-per-page').trim()).to.be.equal('2');
    });
+
+    [
+      [7, 2, 1, false, 6],
+      [5, 3, 3, false, 2],
+      [10, 2, 2, false, 5],
+      [7, 2, 1, true, 7],
+      [5, 3, 3, true, 2],
+      [10, 2, 2, true, 5]
+    ].forEach(([slides, slidesPerPage, slidesPerMove, loop, expected]: [number, number, number, boolean, number]) => {
+      it(`should display ${expected} pages for ${slides} slides grouped by ${slidesPerPage} and scrolled by ${slidesPerMove}${
+        loop ? ' (loop)' : ''
+      }`, async () => {
+        // Arrange
+        const el = await fixture<WaCarousel>(html`
+          <wa-carousel
+            pagination
+            navigation
+            slides-per-page="${slidesPerPage}"
+            slides-per-move="${slidesPerMove}"
+            ?loop=${loop}
+          >
+            ${map(range(slides), i => html`<wa-carousel-item>${i}</wa-carousel-item>`)}
+          </wa-carousel>
+        `);
+
+        // Assert
+        const paginationItems = el.shadowRoot!.querySelectorAll('.carousel__pagination-item');
+        expect(paginationItems.length).to.equal(expected);
+      });
+    });
  });

  describe('when `slides-per-move` attribute is provided', () => {
@@ -230,7 +262,7 @@ describe('<wa-carousel>', () => {
      // Arrange
      const expectedSnapGranularity = 2;
      const el = await fixture<WaCarousel>(html`
-        <wa-carousel slides-per-move="${expectedSnapGranularity}">
+        <wa-carousel slides-per-page="${expectedSnapGranularity}" slides-per-move="${expectedSnapGranularity}">
          <wa-carousel-item>Node 1</wa-carousel-item>
          <wa-carousel-item>Node 2</wa-carousel-item>
          <wa-carousel-item>Node 3</wa-carousel-item>
@@ -252,6 +284,89 @@ describe('<wa-carousel>', () => {
        }
      }
    });
+
+    it('should be possible to move by the given number of slides at a time', async () => {
+      // Arrange
+      const el = await fixture<WaCarousel>(html`
+        <wa-carousel navigation slides-per-move="2" slides-per-page="2">
+          <wa-carousel-item>Node 1</wa-carousel-item>
+          <wa-carousel-item>Node 2</wa-carousel-item>
+          <wa-carousel-item class="expected">Node 3</wa-carousel-item>
+          <wa-carousel-item class="expected">Node 4</wa-carousel-item>
+          <wa-carousel-item>Node 5</wa-carousel-item>
+          <wa-carousel-item>Node 6</wa-carousel-item>
+        </wa-carousel>
+      `);
+      const expectedSlides = el.querySelectorAll('.expected')!;
+      const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button--next')!;
+
+      // Act
+      await clickOnElement(nextButton);
+
+      await oneEvent(el.scrollContainer, 'scrollend');
+      await el.updateComplete;
+
+      // Assert
+      for (const expectedSlide of expectedSlides) {
+        expect(expectedSlide).to.have.class('--in-view');
+        expect(expectedSlide).to.be.visible;
+      }
+    });
+
+    it('should be possible to move by a number that is less than the displayed number', async () => {
+      // Arrange
+      const el = await fixture<WaCarousel>(html`
+        <wa-carousel navigation slides-per-move="1" slides-per-page="2">
+          <wa-carousel-item>Node 1</wa-carousel-item>
+          <wa-carousel-item>Node 2</wa-carousel-item>
+          <wa-carousel-item>Node 3</wa-carousel-item>
+          <wa-carousel-item>Node 4</wa-carousel-item>
+          <wa-carousel-item class="expected">Node 5</wa-carousel-item>
+          <wa-carousel-item class="expected">Node 6</wa-carousel-item>
+        </wa-carousel>
+      `);
+      const expectedSlides = el.querySelectorAll('.expected')!;
+      const nextButton: HTMLElement = el.shadowRoot!.querySelector('.carousel__navigation-button--next')!;
+
+      // Act
+      await clickOnElement(nextButton);
+      await clickOnElement(nextButton);
+      await clickOnElement(nextButton);
+      await clickOnElement(nextButton);
+      await clickOnElement(nextButton);
+      await clickOnElement(nextButton);
+
+      await oneEvent(el.scrollContainer, 'scrollend');
+      await el.updateComplete;
+
+      // Assert
+      for (const expectedSlide of expectedSlides) {
+        expect(expectedSlide).to.have.class('--in-view');
+        expect(expectedSlide).to.be.visible;
+      }
+    });
+
+    it('should not be possible to move by a number that is greater than the displayed number', async () => {
+      // Arrange
+      const expectedSlidesPerMove = 2;
+      const el = await fixture<WaCarousel>(html`
+        <wa-carousel slides-per-page="${expectedSlidesPerMove}">
+          <wa-carousel-item>Node 1</wa-carousel-item>
+          <wa-carousel-item>Node 2</wa-carousel-item>
+          <wa-carousel-item>Node 3</wa-carousel-item>
+          <wa-carousel-item>Node 4</wa-carousel-item>
+          <wa-carousel-item>Node 5</wa-carousel-item>
+          <wa-carousel-item>Node 6</wa-carousel-item>
+        </wa-carousel>
+      `);
+
+      // Act
+      el.slidesPerMove = 3;
+      await el.updateComplete;
+
+      // Assert
+      expect(el.slidesPerMove).to.be.equal(expectedSlidesPerMove);
+    });
  });

  describe('when `orientation` attribute is provided', () => {
@@ -465,7 +580,7 @@ describe('<wa-carousel>', () => {
      it('should scroll the carousel to the next slide', async () => {
        // Arrange
        const el = await fixture<WaCarousel>(html`
-          <wa-carousel slides-per-move="2">
+          <wa-carousel slides-per-page="2" slides-per-move="2">
            <wa-carousel-item>Node 1</wa-carousel-item>
            <wa-carousel-item>Node 2</wa-carousel-item>
            <wa-carousel-item>Node 3</wa-carousel-item>
@@ -485,7 +600,7 @@ describe('<wa-carousel>', () => {
      it('should scroll the carousel to the previous slide', async () => {
        // Arrange
        const el = await fixture<WaCarousel>(html`
-          <wa-carousel slides-per-move="2">
+          <wa-carousel slides-per-page="2" slides-per-move="2">
            <wa-carousel-item>Node 1</wa-carousel-item>
            <wa-carousel-item>Node 2</wa-carousel-item>
            <wa-carousel-item>Node 3</wa-carousel-item>
--- a/src/components/carousel/scroll-controller.ts
+++ b/src/components/carousel/scroll-controller.ts
@@ -1,4 +1,3 @@
-import { debounce } from '../../internal/debounce.js';
 import { prefersReducedMotion } from '../../internal/animate.js';
 import { waitForEvent } from '../../internal/event.js';
 import type { ReactiveController, ReactiveElement } from 'lit';
@@ -12,7 +11,6 @@ interface ScrollHost extends ReactiveElement {
 */
 export class ScrollController<T extends ScrollHost> implements ReactiveController {
  private host: T;
-  private pointers = new Set();

  dragging = false;
  scrolling = false;
@@ -30,11 +28,10 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
    const scrollContainer = host.scrollContainer;

    scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
+    scrollContainer.addEventListener('scrollend', this.handleScrollEnd, true);
    scrollContainer.addEventListener('pointerdown', this.handlePointerDown);
    scrollContainer.addEventListener('pointerup', this.handlePointerUp);
    scrollContainer.addEventListener('pointercancel', this.handlePointerUp);
-    scrollContainer.addEventListener('touchstart', this.handleTouchStart, { passive: true });
-    scrollContainer.addEventListener('touchend', this.handleTouchEnd);
  }

  hostDisconnected(): void {
@@ -42,11 +39,10 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
    const scrollContainer = host.scrollContainer;

    scrollContainer.removeEventListener('scroll', this.handleScroll);
+    scrollContainer.removeEventListener('scrollend', this.handleScrollEnd, true);
    scrollContainer.removeEventListener('pointerdown', this.handlePointerDown);
    scrollContainer.removeEventListener('pointerup', this.handlePointerUp);
    scrollContainer.removeEventListener('pointercancel', this.handlePointerUp);
-    scrollContainer.removeEventListener('touchstart', this.handleTouchStart);
-    scrollContainer.removeEventListener('touchend', this.handleTouchEnd);
  }

  handleScroll = () => {
@@ -54,35 +50,22 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
      this.scrolling = true;
      this.host.requestUpdate();
    }
-    this.handleScrollEnd();
  };

-  @debounce(100)
-  handleScrollEnd() {
-    if (!this.pointers.size) {
-      // If no pointer is active in the scroll area then the scroll has ended
+  handleScrollEnd = () => {
+    if (this.scrolling && !this.dragging) {
      this.scrolling = false;
-      this.host.scrollContainer.dispatchEvent(
-        new CustomEvent('scrollend', {
-          bubbles: false,
-          cancelable: false
-        })
-      );
      this.host.requestUpdate();
-    } else {
-      // otherwise let's wait a bit more
-      this.handleScrollEnd();
    }
-  }
+  };

  handlePointerDown = (event: PointerEvent) => {
+    // Do not handle drag for touch interactions as scroll is natively supported
    if (event.pointerType === 'touch') {
      return;
    }

-    this.pointers.add(event.pointerId);
-
-    const canDrag = this.mouseDragging && !this.dragging && event.button === 0;
+    const canDrag = this.mouseDragging && event.button === 0;
    if (canDrag) {
      event.preventDefault();

@@ -105,24 +88,9 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
  };

  handlePointerUp = (event: PointerEvent) => {
-    this.pointers.delete(event.pointerId);
    this.host.scrollContainer.releasePointerCapture(event.pointerId);

-    if (this.pointers.size === 0) {
-      this.handleDragEnd();
-    }
-  };
-
-  handleTouchEnd = (event: TouchEvent) => {
-    for (const touch of event.changedTouches) {
-      this.pointers.delete(touch.identifier);
-    }
-  };
-
-  handleTouchStart = (event: TouchEvent) => {
-    for (const touch of event.touches) {
-      this.pointers.add(touch.identifier);
-    }
+    this.handleDragEnd();
  };

  handleDragStart() {
@@ -140,12 +108,11 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
    });
  }

-  async handleDragEnd() {
+  handleDragEnd() {
    const host = this.host;
    const scrollContainer = host.scrollContainer;

    scrollContainer.removeEventListener('pointermove', this.handlePointerMove);
-    this.dragging = false;

    const startLeft = scrollContainer.scrollLeft;
    const startTop = scrollContainer.scrollTop;
@@ -158,12 +125,16 @@ export class ScrollController<T extends ScrollHost> implements ReactiveControlle
    scrollContainer.scrollTo({ left: startLeft, top: startTop, behavior: 'auto' });
    scrollContainer.scrollTo({ left: finalLeft, top: finalTop, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });

-    if (this.scrolling) {
-      await waitForEvent(scrollContainer, 'scrollend');
-    }
+    // Wait for scroll to be applied
+    requestAnimationFrame(async () => {
+      if (startLeft !== finalLeft || startTop !== finalTop) {
+        await waitForEvent(scrollContainer, 'scrollend');
+      }

-    scrollContainer.style.removeProperty('scroll-snap-type');
+      scrollContainer.style.removeProperty('scroll-snap-type');

-    host.requestUpdate();
+      this.dragging = false;
+      host.requestUpdate();
+    });
  }
 }
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -45,8 +45,11 @@ export default css`
    border-radius: min(0.375rem, var(--wa-corners-half)); /* min so it doesn't look like a circle/checkbox */
    background-color: var(--wa-form-controls-background);
    color: var(--wa-form-controls-text-color);
-    transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,
-      var(--wa-transition-fast) color, var(--wa-transition-fast) box-shadow;
+    transition:
+      var(--wa-transition-fast) border-color,
+      var(--wa-transition-fast) background-color,
+      var(--wa-transition-fast) color,
+      var(--wa-transition-fast) box-shadow;
  }

  .checkbox__input {
@@ -97,6 +100,7 @@ export default css`
    line-height: var(--toggle-size);
    margin-inline-start: var(--wa-space-xs);
    user-select: none;
+    -webkit-user-select: none;
  }

  :host([required]) .checkbox__label::after {
--- a/src/components/color-picker/color-picker.component.ts
+++ b/src/components/color-picker/color-picker.component.ts
@@ -243,7 +243,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
    const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__alpha')!;
    const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
    const { width } = container.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;

    handle.focus();
    event.preventDefault();
@@ -253,12 +254,17 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
        this.alpha = clamp((x / width) * 100, 0, 100);
        this.syncValues();

-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('wa-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
          this.emit('wa-input');
        }
      },
+      onStop: () => {
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('wa-change');
+        }
+      },
      initialEvent: event
    });
  }
@@ -267,7 +273,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
    const container = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__slider.color-picker__hue')!;
    const handle = container.querySelector<HTMLElement>('.color-picker__slider-handle')!;
    const { width } = container.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;

    handle.focus();
    event.preventDefault();
@@ -277,12 +284,17 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
        this.hue = clamp((x / width) * 360, 0, 360);
        this.syncValues();

-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('wa-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
          this.emit('wa-input');
        }
      },
+      onStop: () => {
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('wa-change');
+        }
+      },
      initialEvent: event
    });
  }
@@ -291,7 +303,8 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
    const grid = this.shadowRoot!.querySelector<HTMLElement>('.color-picker__grid')!;
    const handle = grid.querySelector<HTMLElement>('.color-picker__grid-handle')!;
    const { width, height } = grid.getBoundingClientRect();
-    let oldValue = this.value;
+    let initialValue = this.value;
+    let currentValue = this.value;

    handle.focus();
    event.preventDefault();
@@ -304,13 +317,18 @@ export default class WaColorPicker extends WebAwesomeElement implements WebAweso
        this.brightness = clamp(100 - (y / height) * 100, 0, 100);
        this.syncValues();

-        if (this.value !== oldValue) {
-          oldValue = this.value;
-          this.emit('wa-change');
+        if (this.value !== currentValue) {
+          currentValue = this.value;
          this.emit('wa-input');
        }
      },
-      onStop: () => (this.isDraggingGridHandle = false),
+      onStop: () => {
+        this.isDraggingGridHandle = false;
+        if (this.value !== initialValue) {
+          initialValue = this.value;
+          this.emit('wa-change');
+        }
+      },
      initialEvent: event
    });
  }
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -22,6 +22,7 @@ export default css`
    background-color: var(--wa-color-surface-raised);
    border-radius: var(--wa-corners-1x);
    user-select: none;
+    -webkit-user-select: none;
  }

  .color-picker--inline {
@@ -243,7 +244,11 @@ export default css`
      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-muted-alt) 75%),
      linear-gradient(45deg, var(--wa-color-neutral-fill-muted-alt) 25%, transparent 25%);
    background-size: 10px 10px;
-    background-position: 0 0, 0 0, -5px -5px, 5px 5px;
+    background-position:
+      0 0,
+      0 0,
+      -5px -5px,
+      5px 5px;
  }

  .color-picker--disabled {
@@ -309,7 +314,9 @@ export default css`
    height: 100%;
    border-radius: inherit;
    background-color: currentColor;
-    box-shadow: inset 0 0 0 2px var(--wa-form-controls-border-color-resting), inset 0 0 0 4px var(--wa-color-white);
+    box-shadow:
+      inset 0 0 0 2px var(--wa-form-controls-border-color-resting),
+      inset 0 0 0 4px var(--wa-color-white);
  }

  .color-dropdown__trigger--empty:before {
--- a/src/components/color-picker/color-picker.test.ts
+++ b/src/components/color-picker/color-picker.test.ts
@@ -1,6 +1,6 @@
 import '../../../dist/webawesome.js';
 import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { clickOnElement } from '../../internal/test.js';
+import { clickOnElement, dragElement } from '../../internal/test.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { serialize } from '../../utilities/form.js';
@@ -31,11 +31,21 @@ describe('<wa-color-picker>', () => {

      await clickOnElement(trigger); // open the dropdown
      await aTimeout(200); // wait for the dropdown to open
-      await clickOnElement(grid); // click on the grid
      await el.updateComplete;

+      // Simulate a drag event. "sl-change" should not fire until we stop dragging.
+      await dragElement(grid, 2, 0, {
+        afterMouseDown: () => {
+          expect(changeHandler).to.have.not.been.called;
+          expect(inputHandler).to.have.been.calledOnce;
+        },
+        afterMouseMove: () => {
+          expect(inputHandler).to.have.been.calledTwice;
+        }
+      });
+
      expect(changeHandler).to.have.been.calledOnce;
-      expect(inputHandler).to.have.been.calledOnce;
+      expect(inputHandler).to.have.been.calledTwice;
    });

    it('should emit wa-change and wa-input when the hue slider is moved', async () => {
@@ -50,10 +60,23 @@ describe('<wa-color-picker>', () => {

      await clickOnElement(trigger); // open the dropdown
      await aTimeout(200); // wait for the dropdown to open
-      await clickOnElement(slider); // click on the hue slider
+
+      // Simulate a drag event. "wa-change" should not fire until we stop dragging.
+      await dragElement(slider, 20, 0, {
+        afterMouseDown: () => {
+          expect(changeHandler).to.have.not.been.called;
+          expect(inputHandler).to.have.been.calledOnce;
+        },
+        afterMouseMove: () => {
+          // It's not twice because you can't change the hue of white!
+          expect(inputHandler).to.have.been.calledOnce;
+        }
+      });
+
      await el.updateComplete;

      expect(changeHandler).to.have.been.calledOnce;
+      // It's not twice because you can't change the hue of white!
      expect(inputHandler).to.have.been.calledOnce;
    });

@@ -69,11 +92,22 @@ describe('<wa-color-picker>', () => {

      await clickOnElement(trigger); // open the dropdown
      await aTimeout(200); // wait for the dropdown to open
-      await clickOnElement(slider); // click on the opacity slider
+
+      // Simulate a drag event. "wa-change" should not fire until we stop dragging.
+      await dragElement(slider, 2, 0, {
+        afterMouseDown: () => {
+          expect(changeHandler).to.have.not.been.called;
+          expect(inputHandler).to.have.been.calledOnce;
+        },
+        afterMouseMove: () => {
+          expect(inputHandler).to.have.been.calledTwice;
+        }
+      });
+
      await el.updateComplete;

      expect(changeHandler).to.have.been.calledOnce;
-      expect(inputHandler).to.have.been.calledOnce;
+      expect(inputHandler).to.have.been.calledTwice;
    });

    it('should emit wa-change and wa-input when toggling the format', async () => {
@@ -97,9 +131,9 @@ describe('<wa-color-picker>', () => {
    });

    it('should render the correct swatches when passing a string of color values', async () => {
-      const el = await fixture<WaColorPicker>(
-        html` <wa-color-picker swatches="red; #008000; rgb(0,0,255);"></wa-color-picker> `
-      );
+      const el = await fixture<WaColorPicker>(html`
+        <wa-color-picker swatches="red; #008000; rgb(0,0,255);"></wa-color-picker>
+      `);
      const swatches = [...el.shadowRoot!.querySelectorAll('[part~="swatch"] > div')];

      expect(swatches.length).to.equal(3);
--- a/src/components/copy-button/copy-button.component.ts
+++ b/src/components/copy-button/copy-button.component.ts
@@ -206,9 +206,9 @@ export default class WaCopyButton extends WebAwesomeElement {
        ?disabled=${this.disabled}
        ?hoist=${this.hoist}
        exportparts="
-          base:tooltip__base
-          base__popup:tooltip__base__popup
-          base__arrow:tooltip__base__arrow
+          base:tooltip__base,
+          base__popup:tooltip__base__popup,
+          base__arrow:tooltip__base__arrow,
          body:tooltip__body
        "
      >
--- a/src/components/details/details.styles.ts
+++ b/src/components/details/details.styles.ts
@@ -24,6 +24,7 @@ export default css`
    align-items: center;
    padding: var(--wa-space-m);
    user-select: none;
+    -webkit-user-select: none;
    cursor: pointer;
  }

@@ -75,7 +76,7 @@ export default css`
    display: none;
  }

-  .details__body {
+  :not(.details--open) .details__body {
    overflow: hidden;
  }

--- a/src/components/dialog/dialog.test.ts
+++ b/src/components/dialog/dialog.test.ts
@@ -17,9 +17,9 @@ describe('<wa-dialog>', () => {
  });

  it('should not be visible without the open attribute', async () => {
-    const el = await fixture<WaDialog>(
-      html` <wa-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog> `
-    );
+    const el = await fixture<WaDialog>(html`
+      <wa-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-dialog>
+    `);
    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;

    expect(base.hidden).to.be.true;
--- a/src/components/drawer/drawer.test.ts
+++ b/src/components/drawer/drawer.test.ts
@@ -16,9 +16,9 @@ describe('<wa-drawer>', () => {
  });

  it('should not be visible without the open attribute', async () => {
-    const el = await fixture<WaDrawer>(
-      html` <wa-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-drawer> `
-    );
+    const el = await fixture<WaDrawer>(html`
+      <wa-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</wa-drawer>
+    `);
    const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;

    expect(base.hidden).to.be.true;
--- a/src/components/format-date/format-date.test.ts
+++ b/src/components/format-date/format-date.test.ts
@@ -52,11 +52,9 @@ describe('<wa-format-date>', () => {
    ];
    results.forEach(setup => {
      it(`date has correct language format: ${setup.lang}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" lang="${setup.lang}"></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" lang="${setup.lang}"></wa-format-date>
+        `);
        expect(el.shadowRoot?.textContent?.trim()).to.equal(setup.result);
      });
    });
@@ -66,14 +64,12 @@ describe('<wa-format-date>', () => {
    const weekdays = ['narrow', 'short', 'long'];
    weekdays.forEach((weekdayFormat: 'narrow' | 'short' | 'long') => {
      it(`date has correct weekday format: ${weekdayFormat}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date
-              .date="${new Date(new Date().getFullYear(), 0, 1)}"
-              weekday="${weekdayFormat}"
-            ></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date
+            .date="${new Date(new Date().getFullYear(), 0, 1)}"
+            weekday="${weekdayFormat}"
+          ></wa-format-date>
+        `);

        const expected = new Intl.DateTimeFormat('en-US', { weekday: weekdayFormat }).format(
          new Date(new Date().getFullYear(), 0, 1)
@@ -87,11 +83,9 @@ describe('<wa-format-date>', () => {
    const eras = ['narrow', 'short', 'long'];
    eras.forEach((eraFormat: 'narrow' | 'short' | 'long') => {
      it(`date has correct era format: ${eraFormat}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" era="${eraFormat}"></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" era="${eraFormat}"></wa-format-date>
+        `);

        const expected = new Intl.DateTimeFormat('en-US', { era: eraFormat }).format(
          new Date(new Date().getFullYear(), 0, 1)
@@ -105,11 +99,9 @@ describe('<wa-format-date>', () => {
    const yearFormats = ['numeric', '2-digit'];
    yearFormats.forEach((yearFormat: 'numeric' | '2-digit') => {
      it(`date has correct year format: ${yearFormat}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" year="${yearFormat}"></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" year="${yearFormat}"></wa-format-date>
+        `);

        const expected = new Intl.DateTimeFormat('en-US', { year: yearFormat }).format(
          new Date(new Date().getFullYear(), 0, 1)
@@ -123,11 +115,9 @@ describe('<wa-format-date>', () => {
    const monthFormats = ['numeric', '2-digit', 'narrow', 'short', 'long'];
    monthFormats.forEach((monthFormat: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long') => {
      it(`date has correct month format: ${monthFormat}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" month="${monthFormat}"></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" month="${monthFormat}"></wa-format-date>
+        `);

        const expected = new Intl.DateTimeFormat('en-US', { month: monthFormat }).format(
          new Date(new Date().getFullYear(), 0, 1)
@@ -141,11 +131,9 @@ describe('<wa-format-date>', () => {
    const dayFormats = ['numeric', '2-digit'];
    dayFormats.forEach((dayFormat: 'numeric' | '2-digit') => {
      it(`date has correct day format: ${dayFormat}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" day="${dayFormat}"></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" day="${dayFormat}"></wa-format-date>
+        `);

        const expected = new Intl.DateTimeFormat('en-US', { day: dayFormat }).format(
          new Date(new Date().getFullYear(), 0, 1)
@@ -159,11 +147,9 @@ describe('<wa-format-date>', () => {
    const hourFormats = ['numeric', '2-digit'];
    hourFormats.forEach((hourFormat: 'numeric' | '2-digit') => {
      it(`date has correct hour format: ${hourFormat}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" hour="${hourFormat}"></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" hour="${hourFormat}"></wa-format-date>
+        `);

        const expected = new Intl.DateTimeFormat('en-US', { hour: hourFormat }).format(
          new Date(new Date().getFullYear(), 0, 1)
@@ -177,14 +163,9 @@ describe('<wa-format-date>', () => {
    const minuteFormats = ['numeric', '2-digit'];
    minuteFormats.forEach((minuteFormat: 'numeric' | '2-digit') => {
      it(`date has correct minute format: ${minuteFormat}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date
-              .date="${new Date(new Date().getFullYear(), 0, 1)}"
-              minute="${minuteFormat}"
-            ></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" minute="${minuteFormat}"></wa-format-date>
+        `);

        const expected = new Intl.DateTimeFormat('en-US', { minute: minuteFormat }).format(
          new Date(new Date().getFullYear(), 0, 1)
@@ -198,14 +179,9 @@ describe('<wa-format-date>', () => {
    const secondFormats = ['numeric', '2-digit'];
    secondFormats.forEach((secondFormat: 'numeric' | '2-digit') => {
      it(`date has correct second format: ${secondFormat}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date
-              .date="${new Date(new Date().getFullYear(), 0, 1)}"
-              second="${secondFormat}"
-            ></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" second="${secondFormat}"></wa-format-date>
+        `);

        const expected = new Intl.DateTimeFormat('en-US', { second: secondFormat }).format(
          new Date(new Date().getFullYear(), 0, 1)
@@ -219,14 +195,12 @@ describe('<wa-format-date>', () => {
    const timeZoneNameFormats = ['short', 'long'];
    timeZoneNameFormats.forEach((timeZoneNameFormat: 'short' | 'long') => {
      it(`date has correct timeZoneName format: ${timeZoneNameFormat}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date
-              .date="${new Date(new Date().getFullYear(), 0, 1)}"
-              time-zone-name="${timeZoneNameFormat}"
-            ></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date
+            .date="${new Date(new Date().getFullYear(), 0, 1)}"
+            time-zone-name="${timeZoneNameFormat}"
+          ></wa-format-date>
+        `);

        const expected = new Intl.DateTimeFormat('en-US', { timeZoneName: timeZoneNameFormat }).format(
          new Date(new Date().getFullYear(), 0, 1)
@@ -240,14 +214,9 @@ describe('<wa-format-date>', () => {
    const timeZones = ['America/New_York', 'America/Los_Angeles', 'Europe/Zurich'];
    timeZones.forEach(timeZone => {
      it(`date has correct timeZoneName format: ${timeZone}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date
-              .date="${new Date(new Date().getFullYear(), 0, 1)}"
-              time-zone="${timeZone}"
-            ></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date .date="${new Date(new Date().getFullYear(), 0, 1)}" time-zone="${timeZone}"></wa-format-date>
+        `);

        const expected = new Intl.DateTimeFormat('en-US', { timeZone: timeZone }).format(
          new Date(new Date().getFullYear(), 0, 1)
@@ -261,14 +230,12 @@ describe('<wa-format-date>', () => {
    const hourFormatValues = ['auto', '12', '24'];
    hourFormatValues.forEach(hourFormatValue => {
      it(`date has correct hourFormat format: ${hourFormatValue}`, async () => {
-        const el = await fixture<WaFormatDate>(
-          html`
-            <wa-format-date
-              .date="${new Date(new Date().getFullYear(), 0, 1)}"
-              hour-format="${hourFormatValue as 'auto' | '12' | '24'}"
-            ></wa-format-date>
-          `
-        );
+        const el = await fixture<WaFormatDate>(html`
+          <wa-format-date
+            .date="${new Date(new Date().getFullYear(), 0, 1)}"
+            hour-format="${hourFormatValue as 'auto' | '12' | '24'}"
+          ></wa-format-date>
+        `);

        const expected = new Intl.DateTimeFormat('en-US', {
          hour12: hourFormatValue === 'auto' ? undefined : hourFormatValue === '12'
--- a/src/components/format-number/format-number.test.ts
+++ b/src/components/format-number/format-number.test.ts
@@ -24,9 +24,9 @@ describe('<wa-format-number>', () => {
  describe('lang property', () => {
    ['de', 'de-CH', 'fr', 'es', 'he', 'ja', 'nl', 'pl', 'pt', 'ru'].forEach(lang => {
      it(`number has correct language format: ${lang}`, async () => {
-        const el = await fixture<WaFormatNumber>(
-          html` <wa-format-number value="1000" lang="${lang}"></wa-format-number> `
-        );
+        const el = await fixture<WaFormatNumber>(html`
+          <wa-format-number value="1000" lang="${lang}"></wa-format-number>
+        `);
        const expected = new Intl.NumberFormat(lang, { style: 'decimal', useGrouping: true }).format(1000);
        expect(el.shadowRoot?.textContent).to.equal(expected);
      });
@@ -36,9 +36,9 @@ describe('<wa-format-number>', () => {
  describe('type property', () => {
    ['currency', 'decimal', 'percent'].forEach(type => {
      it(`number has correct type format: ${type}`, async () => {
-        const el = await fixture<WaFormatNumber>(
-          html` <wa-format-number value="1000" type="${type}"></wa-format-number> `
-        );
+        const el = await fixture<WaFormatNumber>(html`
+          <wa-format-number value="1000" type="${type}"></wa-format-number>
+        `);
        const expected = new Intl.NumberFormat('en-US', { style: type, currency: 'USD' }).format(1000);
        expect(el.shadowRoot?.textContent).to.equal(expected);
      });
@@ -62,9 +62,9 @@ describe('<wa-format-number>', () => {
  describe('currency property', () => {
    ['USD', 'CAD', 'AUD', 'UAH'].forEach(currency => {
      it(`number has correct type format: ${currency}`, async () => {
-        const el = await fixture<WaFormatNumber>(
-          html` <wa-format-number value="1000" currency="${currency}"></wa-format-number> `
-        );
+        const el = await fixture<WaFormatNumber>(html`
+          <wa-format-number value="1000" currency="${currency}"></wa-format-number>
+        `);
        const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currency: currency }).format(1000);
        expect(el.shadowRoot?.textContent).to.equal(expected);
      });
@@ -74,9 +74,9 @@ describe('<wa-format-number>', () => {
  describe('currencyDisplay property', () => {
    ['symbol', 'narrowSymbol', 'code', 'name'].forEach(currencyDisplay => {
      it(`number has correct type format: ${currencyDisplay}`, async () => {
-        const el = await fixture<WaFormatNumber>(
-          html` <wa-format-number value="1000" currency-display="${currencyDisplay}"></wa-format-number> `
-        );
+        const el = await fixture<WaFormatNumber>(html`
+          <wa-format-number value="1000" currency-display="${currencyDisplay}"></wa-format-number>
+        `);
        const expected = new Intl.NumberFormat('en-US', { style: 'decimal', currencyDisplay: currencyDisplay }).format(
          1000
        );
@@ -88,9 +88,9 @@ describe('<wa-format-number>', () => {
  describe('minimumIntegerDigits property', () => {
    [4, 5, 6].forEach(minDigits => {
      it(`number has correct type format: ${minDigits}`, async () => {
-        const el = await fixture<WaFormatNumber>(
-          html` <wa-format-number value="1000" minimum-integer-digits="${minDigits}"></wa-format-number> `
-        );
+        const el = await fixture<WaFormatNumber>(html`
+          <wa-format-number value="1000" minimum-integer-digits="${minDigits}"></wa-format-number>
+        `);
        const expected = new Intl.NumberFormat('en-US', {
          style: 'decimal',
          currencyDisplay: 'symbol',
@@ -104,9 +104,9 @@ describe('<wa-format-number>', () => {
  describe('minimumFractionDigits property', () => {
    [4, 5, 6].forEach(minFractionDigits => {
      it(`number has correct type format: ${minFractionDigits}`, async () => {
-        const el = await fixture<WaFormatNumber>(
-          html` <wa-format-number value="1000" minimum-fraction-digits="${minFractionDigits}"></wa-format-number> `
-        );
+        const el = await fixture<WaFormatNumber>(html`
+          <wa-format-number value="1000" minimum-fraction-digits="${minFractionDigits}"></wa-format-number>
+        `);
        const expected = new Intl.NumberFormat('en-US', {
          style: 'decimal',
          currencyDisplay: 'symbol',
@@ -120,9 +120,9 @@ describe('<wa-format-number>', () => {
  describe('maximumFractionDigits property', () => {
    [4, 5, 6].forEach(maxFractionDigits => {
      it(`number has correct type format: ${maxFractionDigits}`, async () => {
-        const el = await fixture<WaFormatNumber>(
-          html` <wa-format-number value="1000" maximum-fraction-digits="${maxFractionDigits}"></wa-format-number> `
-        );
+        const el = await fixture<WaFormatNumber>(html`
+          <wa-format-number value="1000" maximum-fraction-digits="${maxFractionDigits}"></wa-format-number>
+        `);
        const expected = new Intl.NumberFormat('en-US', {
          style: 'decimal',
          currencyDisplay: 'symbol',
@@ -136,11 +136,9 @@ describe('<wa-format-number>', () => {
  describe('minimumSignificantDigits property', () => {
    [4, 5, 6].forEach(minSignificantDigits => {
      it(`number has correct type format: ${minSignificantDigits}`, async () => {
-        const el = await fixture<WaFormatNumber>(
-          html`
-            <wa-format-number value="1000" minimum-significant-digits="${minSignificantDigits}"></wa-format-number>
-          `
-        );
+        const el = await fixture<WaFormatNumber>(html`
+          <wa-format-number value="1000" minimum-significant-digits="${minSignificantDigits}"></wa-format-number>
+        `);
        const expected = new Intl.NumberFormat('en-US', {
          style: 'decimal',
          currencyDisplay: 'symbol',
@@ -154,11 +152,9 @@ describe('<wa-format-number>', () => {
  describe('maximumSignificantDigits property', () => {
    [4, 5, 6].forEach(maxSignificantDigits => {
      it(`number has correct type format: ${maxSignificantDigits}`, async () => {
-        const el = await fixture<WaFormatNumber>(
-          html`
-            <wa-format-number value="1000" maximum-significant-digits="${maxSignificantDigits}"></wa-format-number>
-          `
-        );
+        const el = await fixture<WaFormatNumber>(html`
+          <wa-format-number value="1000" maximum-significant-digits="${maxSignificantDigits}"></wa-format-number>
+        `);
        const expected = new Intl.NumberFormat('en-US', {
          style: 'decimal',
          currencyDisplay: 'symbol',
--- a/src/components/icon-button/icon-button.test.ts
+++ b/src/components/icon-button/icon-button.test.ts
@@ -30,15 +30,13 @@ describe('<wa-icon-button>', () => {

  describe('when styling the host element', () => {
    it('renders the correct color and font size', async () => {
-      const el = await fixture<WaIconButton>(
-        html`
-          <wa-icon-button
-            library="system"
-            name="check"
-            style="color: rgb(0, 136, 221); font-size: 2rem;"
-          ></wa-icon-button>
-        `
-      );
+      const el = await fixture<WaIconButton>(html`
+        <wa-icon-button
+          library="system"
+          name="check"
+          style="color: rgb(0, 136, 221); font-size: 2rem;"
+        ></wa-icon-button>
+      `);
      const icon = el.shadowRoot!.querySelector('wa-icon')!;
      const styles = getComputedStyle(icon);

@@ -85,16 +83,16 @@ describe('<wa-icon-button>', () => {
    describe('and target is present', () => {
      ['_blank', '_parent', '_self', '_top'].forEach((target: LinkTarget) => {
        it(`the anchor target is the provided target: ${target}`, async () => {
-          const el = await fixture<WaIconButton>(
-            html` <wa-icon-button href="some/path" target="${target}"></wa-icon-button> `
-          );
+          const el = await fixture<WaIconButton>(html`
+            <wa-icon-button href="some/path" target="${target}"></wa-icon-button>
+          `);
          expect(el.shadowRoot?.querySelector(`a[target="${target}"]`)).to.exist;
        });

        it(`the anchor rel is set to 'noreferrer noopener'`, async () => {
-          const el = await fixture<WaIconButton>(
-            html` <wa-icon-button href="some/path" target="${target}"></wa-icon-button> `
-          );
+          const el = await fixture<WaIconButton>(html`
+            <wa-icon-button href="some/path" target="${target}"></wa-icon-button>
+          `);
          expect(el.shadowRoot?.querySelector(`a[rel="noreferrer noopener"]`)).to.exist;
        });
      });
@@ -103,9 +101,9 @@ describe('<wa-icon-button>', () => {
    describe('and download is present', () => {
      it(`the anchor download attribute is the provided download`, async () => {
        const fakeDownload = 'some/path';
-        const el = await fixture<WaIconButton>(
-          html` <wa-icon-button href="some/path" download="${fakeDownload}"></wa-icon-button> `
-        );
+        const el = await fixture<WaIconButton>(html`
+          <wa-icon-button href="some/path" download="${fakeDownload}"></wa-icon-button>
+        `);

        expect(el.shadowRoot?.querySelector(`a[download="${fakeDownload}"]`)).to.exist;
      });
@@ -121,9 +119,9 @@ describe('<wa-icon-button>', () => {

    it('the internal aria-label attribute is set to the provided label when rendering an anchor', async () => {
      const fakeLabel = 'some label';
-      const el = await fixture<WaIconButton>(
-        html` <wa-icon-button href="some/path" label="${fakeLabel}"></wa-icon-button> `
-      );
+      const el = await fixture<WaIconButton>(html`
+        <wa-icon-button href="some/path" label="${fakeLabel}"></wa-icon-button>
+      `);
      expect(el.shadowRoot?.querySelector(`a[aria-label="${fakeLabel}"]`)).to.exist;
    });
  });
--- a/src/components/input/input.styles.ts
+++ b/src/components/input/input.styles.ts
@@ -21,7 +21,9 @@ export default css`
    vertical-align: middle;
    overflow: hidden;
    cursor: text;
-    transition: var(--wa-transition-fast) border, var(--wa-transition-fast) background-color;
+    transition:
+      var(--wa-transition-fast) border,
+      var(--wa-transition-fast) background-color;
  }

  /* Standard inputs */
@@ -101,6 +103,7 @@ export default css`
  .input__control::placeholder {
    color: var(--wa-form-controls-placeholder-color);
    user-select: none;
+    -webkit-user-select: none;
  }

  .input__control:focus {
--- a/src/components/layout/layout.component.ts
+++ b/src/components/layout/layout.component.ts
@@ -0,0 +1,281 @@
+import { html } from 'lit';
+import { live } from 'lit/directives/live.js';
+import { property, query } from 'lit/decorators.js';
+import styles from './layout.styles.js';
+import WaDrawer from '../drawer/drawer.component.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
+import type { CSSResultGroup, PropertyValueMap } from 'lit';
+
+/**
+ * @summary Layouts offer an easy way to scaffold pages using minimal markup.
+ * @documentation https://shoelace.style/components/layout
+ * @status experimental
+ * @since 3.0
+ *
+ * @slot - The page's main content.
+ * @slot banner - The banner that gets display above the header. The banner will not be shown if no content is provided.
+ * @slot header - The header to display at the top of the page. If a banner is present, the header will appear below the banner. The header will not be shown if there is no content.
+ * @slot subheader - A subheader to display below the `header`. This is a good place to put things like breadcrumbs.
+ * @slot menu - The left side of the page. If you slot an element in here, you will override the default "navigation" slot and will be handling navigation on your own. This also will not disable the fallback behavior of the navigation button. This section "sticks" to the top as the page scrolls.
+ * @slot navigation-header - The header for a navigation area. On mobile this will be the header for `<wa-drawer>`.
+ * @slot navigation - The main content to display in the navigation area.
+ * @slot navigation-footer - The footer for a navigation area. On mobile this will be the footer for `<wa-drawer>`.
+ * @slot main-header - Header to display inline above the main content.
+ * @slot main-footer - Footer to display inline below the main content.
+ * @slot aside - Content to be shown on the right side of the page. Typically contains a table of contents, ads, etc. This section "sticks" to the top as the page scrolls.
+ * @slot skip-to-content - The "skip to content" slot. You can override this If you would like to override the `Skip to content` button and add additional "Skip to X", they can be inserted here.
+ * @slot footer - The content to display in the footer. This is always displayed underneath the viewport so will always make the page "scrollable".
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart banner - The banner to show above header.
+ * @csspart header - The header, usually for top level navigation / branding.
+ * @csspart subheader - Shown below the header, usually intended for things like breadcrumbs and other page level navigation.
+ * @csspart body - The wrapper around menu, main, and aside.
+ * @csspart menu - The left hand side of the page. Generally intended for navigation.
+ * @csspart main-header - The header above main content.
+ * @csspart main-content - The main content.
+ * @csspart main-footer - The footer below main content.
+ * @csspart aside - The right hand side of the page. Used for things like table of contents, ads, etc.
+ * @csspart skip-to-content - The "skip to content" link that shows when focused.
+ * @csspart nav-button - The default mobile `<sl-icon-button>` displayed on mobile viewports.
+ * @csspart footer - The footer of the page. This is always below the initial viewport.
+ *
+ * @cssproperty [--menu-width=auto] - The width of the layout's "menu" section.
+ * @cssproperty [--main-width=1fr] - The width of the layout's "main" section.
+ * @cssproperty [--aside-width=auto] - The wide of the layout's "aside" section.
+ * @cssproperty [--banner-height=0px] - The height of the banner. This gets calculated when the layout initializes. If the height is known, you can set it here to prevent shifting when the page loads.
+ * @cssproperty [--header-height=0px] - The height of the header. This gets calculated when the layout initializes. If the height is known, you can set it here to prevent shifting when the page loads.
+ * @cssproperty [--subheader-height=0px] - The height of the subheader. This gets calculated when the layout initializes. If the height is known, you can set it here to prevent shifting when the page loads.
+ */
+export default class WaLayout extends WebAwesomeElement {
+  static styles: CSSResultGroup = styles;
+  static dependencies = {
+    'wa-drawer': WaDrawer
+  };
+
+  private headerResizeObserver = this.slotResizeObserver('header');
+  private subheaderResizeObserver = this.slotResizeObserver('subheader');
+  private bannerResizeObserver = this.slotResizeObserver('banner');
+  private footerResizeObserver = this.slotResizeObserver('footer');
+
+  private slotResizeObserver(slot: string) {
+    return new ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.contentBoxSize) {
+          const contentBoxSize = entry.borderBoxSize[0];
+          this.style.setProperty(`--${slot}-height`, `${contentBoxSize.blockSize}px`);
+        }
+      }
+    });
+  }
+
+  private handleNavigationToggle = (e: Event) => {
+    // Don't toggle the nav when we're in desktop mode
+    if (this.view === 'desktop') {
+      return;
+    }
+
+    if (e.composedPath().find((el: Element) => el?.hasAttribute?.('data-toggle-nav'))) {
+      e.preventDefault();
+      this.toggleNavigation();
+    }
+  };
+
+  @query("[part~='header']") header: HTMLElement;
+  @query("[part~='subheader']") subheader: HTMLElement;
+  @query("[part~='footer']") footer: HTMLElement;
+  @query("[part~='banner']") banner: HTMLElement;
+  @query("[part~='drawer']") navigationDrawer: WaDrawer;
+
+  /**
+   * The view is a reflection of the "mobileBreakpoint", when the layout is larger than the `mobile-breakpoint` (768 by
+   * default), it is considered to be a "desktop" view. The view is merely a way to distinguish when to show/hide the
+   * navigation. You can use additional media queries to make other adjustments to content as necessary.
+   */
+  @property({ attribute: 'view', reflect: true }) view: 'mobile' | 'desktop' = 'mobile';
+
+  /**
+   * Whether or not the navigation drawer is open. Note, the navigation drawer is only "open" on mobile views.
+   */
+  @property({ attribute: 'nav-open', reflect: true, type: Boolean }) navOpen = false;
+
+  /**
+   * At what "px" to hide the "menu" slot and collapse into a hamburger button
+   */
+  @property({ attribute: 'mobile-breakpoint' }) mobileBreakpoint = 768;
+
+  /**
+   * Where to place the navigation when in the mobile viewport.
+   */
+  @property({ attribute: 'navigation-placement', reflect: true }) navigationPlacement: 'start' | 'end' = 'start';
+
+  layoutResizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+      if (entry.contentBoxSize) {
+        const contentBoxSize = entry.borderBoxSize[0];
+        const layoutWidth = contentBoxSize.inlineSize;
+
+        const oldView = this.view;
+
+        if (layoutWidth >= this.mobileBreakpoint) {
+          this.view = 'desktop';
+        } else {
+          this.view = 'mobile';
+        }
+
+        this.requestUpdate('view', oldView);
+
+        this.style.setProperty(`--layout-width`, `${layoutWidth}px`);
+      }
+    }
+  });
+
+  protected update(changedProperties: PropertyValueMap<this> | Map<PropertyKey, unknown>): void {
+    if (changedProperties.has('view')) {
+      this.hideNavigation();
+    }
+    super.update(changedProperties);
+  }
+
+  constructor() {
+    super();
+    this.addEventListener('click', this.handleNavigationToggle);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.layoutResizeObserver.observe(this);
+
+    setTimeout(() => {
+      this.headerResizeObserver.observe(this.header);
+      this.subheaderResizeObserver.observe(this.subheader);
+      this.bannerResizeObserver.observe(this.banner);
+      this.footerResizeObserver.observe(this.footer);
+    });
+  }
+
+  firstUpdated() {
+    // If the user provides a #main-content id, it should be present in the default slot and the "skip to
+    // content" link will point to it. If not, we'll prepend an empty element for them so things just work.
+    if (!document.getElementById('main-content')) {
+      const div = document.createElement('div');
+      div.id = 'main-content';
+      div.slot = 'skip-to-content-target';
+      this.prepend(div);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.layoutResizeObserver.unobserve(this);
+    this.headerResizeObserver.unobserve(this.header);
+    this.subheaderResizeObserver.unobserve(this.subheader);
+    this.footerResizeObserver.unobserve(this.footer);
+    this.bannerResizeObserver.unobserve(this.banner);
+  }
+
+  /**
+   * Shows the mobile navigation drawer
+   */
+  showNavigation() {
+    this.navOpen = true;
+  }
+
+  /**
+   * Hides the mobile navigation drawer
+   */
+  hideNavigation() {
+    this.navOpen = false;
+  }
+
+  /**
+   * Toggles the mobile navigation drawer
+   */
+  toggleNavigation() {
+    this.navOpen = !this.navOpen;
+  }
+
+  render() {
+    return html`
+      <a href="#main-content" part="skip-to-content" class="skip-to-content">
+        <slot name="skip-to-content">Skip to content</slot>
+      </a>
+
+      <div class="base" part="base">
+        <div class="banner" part="banner">
+          <slot name="banner"></slot>
+        </div>
+
+        <div class="header" part="header">
+          <slot name="header"></slot>
+        </div>
+
+        <div class="subheader" part="subheader">
+          <slot name="subheader"></slot>
+        </div>
+
+        <div class="body" part="body">
+          <div class="menu" part="menu">
+            <slot name="menu">
+              <nav name="navigation" class="navigation" part="navigation navigation-desktop">
+                <slot name=${this.view === 'desktop' ? 'navigation-header' : '___'}></slot>
+                <slot name=${this.view === 'desktop' ? 'navigation' : '____'}></slot>
+                <slot name=${this.view === 'desktop' ? 'navigation-footer' : '___'}></slot>
+              </nav>
+            </slot>
+          </div>
+
+          <div class="main" part="main">
+            <div class="main-header" part="main-header">
+              <slot name="main-header"></slot>
+            </div>
+
+            <div class="main-content" part="main-content">
+              <slot name="skip-to-content-target"></slot>
+              <slot></slot>
+            </div>
+
+            <div class="main-footer" part="main-footer">
+              <slot name="main-footer"></slot>
+            </div>
+          </div>
+
+          <div class="aside" part="aside">
+            <slot name="aside"></slot>
+          </div>
+        </div>
+
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+
+      <wa-drawer
+        placement=${this.navigationPlacement}
+        part="drawer"
+        ?open=${live(this.navOpen)}
+        @wa-after-show=${() => (this.navOpen = this.navigationDrawer.open)}
+        @wa-after-hide=${() => (this.navOpen = this.navigationDrawer.open)}
+        exportparts="
+          panel:drawer__panel
+          base:drawer__base
+          overlay:drawer__overlay
+          panel:drawer__panel
+          header:drawer__header
+          header-actions:drawer__header-actions
+          title:drawer__title
+          close-button:drawer__close-button
+          close-button__base:drawer__close-button__base
+          body:drawer__body
+          footer:drawer__footer
+        "
+        class="navigation-drawer"
+      >
+        <slot slot="label" name=${this.view === 'mobile' ? 'navigation-header' : '___'}></slot>
+        <slot name=${this.view === 'mobile' ? 'navigation' : '____'}></slot>
+        <slot slot="footer" name=${this.view === 'mobile' ? 'navigation-footer' : '___'}></slot>
+      </wa-drawer>
+    `;
+  }
+}
--- a/src/components/layout/layout.styles.ts
+++ b/src/components/layout/layout.styles.ts
@@ -0,0 +1,202 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.js';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    box-sizing: border-box;
+    height: 100%;
+
+    --menu-width: auto;
+    --main-width: 1fr;
+    --aside-width: auto;
+
+    --banner-height: 0px;
+    --header-height: 0px;
+    --subheader-height: 0px;
+  }
+
+  :host([disable-sticky~='banner']) :is([part~='header'], [part~='subheader']) {
+    --banner-height: 0px !important;
+  }
+
+  :host([disable-sticky~='header']) [part~='subheader'] {
+    --header-height: 0px !important;
+  }
+
+  /* Nothing else depends on subheader-height. */
+  :host([disable-sticky~='subheader']) {
+  }
+
+  :host([disable-sticky~='aside']) [part~='aside'],
+  :host([disable-sticky~='menu']) [part~='menu'] {
+    height: unset;
+    max-height: unset;
+  }
+
+  :host([disable-sticky~='banner']) [part~='banner'],
+  :host([disable-sticky~='header']) [part~='header'],
+  :host([disable-sticky~='subheader']) [part~='subheader'],
+  :host([disable-sticky~='aside']) [part~='aside'],
+  :host([disable-sticky~='menu']) [part~='menu'] {
+    position: static;
+    overflow: unset;
+  }
+
+  :host([disable-sticky~='aside']) [part~='aside'],
+  :host([disable-sticky~='menu']) [part~='menu'] {
+    height: auto;
+    max-height: auto;
+  }
+
+  /* Hide nav toggles in desktop view */
+  :host([view='desktop']) ::slotted([data-toggle-nav]) {
+    display: none !important;
+  }
+
+  [part~='base'] {
+    min-height: 100%;
+    display: grid;
+    grid-template-rows: repeat(3, minmax(0, auto)) minmax(0, 1fr) minmax(0, auto);
+    grid-template-columns: 100%;
+    width: 100%;
+    grid-template-areas:
+      'banner'
+      'header'
+      'subheader'
+      'body'
+      'footer';
+  }
+
+  /* Grid areas */
+  [part~='banner'] {
+    grid-area: banner;
+  }
+
+  [part~='header'] {
+    grid-area: header;
+  }
+
+  [part~='subheader'] {
+    grid-area: subheader;
+  }
+
+  [part~='menu'] {
+    grid-area: menu;
+  }
+
+  [part~='body'] {
+    grid-area: body;
+  }
+
+  [part~='main'] {
+    grid-area: main;
+  }
+
+  [part~='aside'] {
+    grid-area: aside;
+  }
+
+  [part~='footer'] {
+    grid-area: footer;
+  }
+
+  /* Z-indexes */
+  [part~='banner'],
+  [part~='header'],
+  [part~='subheader'] {
+    position: sticky;
+    z-index: 5;
+  }
+
+  [part~='banner'] {
+    top: 0px;
+  }
+
+  [part~='header'] {
+    top: var(--banner-height);
+  }
+
+  [part~='subheader'] {
+    top: calc(var(--header-height) + var(--banner-height));
+  }
+
+  [part~='body'] {
+    display: grid;
+    height: 100%;
+    align-items: flex-start;
+    grid-template-columns: minmax(0, var(--menu-width)) minmax(0, var(--main-width)) minmax(0, var(--aside-width));
+    grid-template-rows: minmax(0, 1fr);
+    grid-template-areas: 'menu main aside';
+  }
+
+  [part~='main'] {
+    display: grid;
+    min-height: 100%;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+    grid-template-areas:
+      'main-header'
+      'main-content'
+      'main-footer';
+  }
+
+  [part~='main-header'] {
+    grid-area: main-header;
+  }
+
+  [part~='main-content'] {
+    grid-area: main-content;
+  }
+
+  [part~='main-footer'] {
+    grid-area: main-footer;
+  }
+
+  /* Visually hidden */
+  .skip-to-content:not(:focus-within) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    clip: rect(0 0 0 0) !important;
+    clip-path: inset(50%) !important;
+    border: none !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    padding: 0 !important;
+  }
+
+  .skip-to-content {
+    position: absolute;
+    top: var(--wa-space-m);
+    left: var(--wa-space-m);
+    z-index: 6;
+    border-radius: var(--wa-corners-1x);
+    background-color: var(--wa-color-surface-default);
+    color: var(--wa-color-text-link);
+    text-decoration: none;
+    padding: var(--wa-space-s) var(--wa-space-m);
+    box-shadow: var(--wa-shadow-level-3);
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  [part~='menu'],
+  [part~='aside'] {
+    position: sticky;
+    top: calc(var(--banner-height) + var(--header-height) + var(--subheader-height));
+    z-index: 4;
+    height: calc(100dvh - var(--header-height) - var(--banner-height) - var(--subheader-height));
+    max-height: calc(100dvh - var(--header-height) - var(--banner-height) - var(--subheader-height));
+    overflow: auto;
+  }
+
+  [part~='navigation'] {
+    height: 100%;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
+  }
+`;
--- a/src/components/layout/layout.test.ts
+++ b/src/components/layout/layout.test.ts
@@ -0,0 +1,10 @@
+import '../../../dist/webawesome.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<wa-layout>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <sl-layout></sl-layout> `);
+
+    expect(el).to.exist;
+  });
+});
--- a/src/components/layout/layout.ts
+++ b/src/components/layout/layout.ts
@@ -0,0 +1,10 @@
+import WaLayout from './layout.component.js';
+export * from './layout.component.js';
+export default WaLayout;
+WaLayout.define('wa-layout');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wa-layout': WaLayout;
+  }
+}
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -7,6 +7,14 @@ export default css`
  :host {
    --submenu-offset: -2px;

+    /* Private */
+    --safe-triangle-cursor-x: 0;
+    --safe-triangle-cursor-y: 0;
+    --safe-triangle-submenu-start-x: 0;
+    --safe-triangle-submenu-start-y: 0;
+    --safe-triangle-submenu-end-x: 0;
+    --safe-triangle-submenu-end-y: 0;
+
    display: block;
  }

@@ -23,6 +31,7 @@ export default css`
    padding: var(--wa-space-2xs) var(--wa-space-2xs);
    transition: var(--wa-transition-fast) fill;
    user-select: none;
+    -webkit-user-select: none;
    white-space: nowrap;
    cursor: pointer;
  }
@@ -60,6 +69,22 @@ export default css`
    margin-inline-start: var(--wa-space-xs);
  }

+  /* Safe triangle */
+  .menu-item--submenu-expanded::after {
+    content: '';
+    position: fixed;
+    z-index: calc(var(--wa-z-index-dropdown) - 1);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--safe-triangle-cursor-x) var(--safe-triangle-cursor-y),
+      var(--safe-triangle-submenu-start-x) var(--safe-triangle-submenu-start-y),
+      var(--safe-triangle-submenu-end-x) var(--safe-triangle-submenu-end-y)
+    );
+  }
+
  :host(:focus-visible) {
    outline: none;
  }
--- a/src/components/menu-item/menu-item.test.ts
+++ b/src/components/menu-item/menu-item.test.ts
@@ -131,7 +131,7 @@ describe('<wa-menu-item>', () => {
    });
    menu.addEventListener('wa-select', selectHandler);

-    const submenu = menu.querySelector('wa-menu-item');
+    const submenu = menu.querySelector<WaMenuItem>('wa-menu-item')!;
    submenu.focus();
    await menu.updateComplete;
    await sendKeys({ press: 'ArrowRight' });
@@ -145,7 +145,7 @@ describe('<wa-menu-item>', () => {
  it('should focus on outer menu if ArrowRight is pressed on nested menuitem', async () => {
    const menu = await fixture<WaMenuItem>(html`
      <wa-menu>
-        <wa-menu-item value="outer-item-1">
+        <wa-menu-item id="outer" value="outer-item-1">
          Submenu
          <wa-menu slot="submenu">
            <wa-menu-item value="inner-item-1"> Nested Item 1 </wa-menu-item>
@@ -155,11 +155,13 @@ describe('<wa-menu-item>', () => {
    `);

    const focusHandler = sinon.spy((event: FocusEvent) => {
-      expect(event.target.value).to.equal('outer-item-1');
-      expect(event.relatedTarget.value).to.equal('inner-item-1');
+      const target = event.target as WaMenuItem;
+      const relatedTarget = event.relatedTarget as WaMenuItem;
+      expect(target.value).to.equal('outer-item-1');
+      expect(relatedTarget.value).to.equal('inner-item-1');
    });

-    const outerItem = menu.querySelector('wa-menu-item');
+    const outerItem = menu.querySelector<WaMenuItem>('#outer')!;
    outerItem.focus();
    await menu.updateComplete;
    await sendKeys({ press: 'ArrowRight' });
--- a/src/components/menu-item/submenu-controller.ts
+++ b/src/components/menu-item/submenu-controller.ts
@@ -49,6 +49,7 @@ export class SubmenuController implements ReactiveController {

  private addListeners() {
    if (!this.isConnected) {
+      this.host.addEventListener('mousemove', this.handleMouseMove);
      this.host.addEventListener('mouseover', this.handleMouseOver);
      this.host.addEventListener('keydown', this.handleKeyDown);
      this.host.addEventListener('click', this.handleClick);
@@ -61,6 +62,7 @@ export class SubmenuController implements ReactiveController {
    if (!this.isPopupConnected) {
      if (this.popupRef.value) {
        this.popupRef.value.addEventListener('mouseover', this.handlePopupMouseover);
+        this.popupRef.value.addEventListener('wa-reposition', this.handlePopupReposition);
        this.isPopupConnected = true;
      }
    }
@@ -68,6 +70,7 @@ export class SubmenuController implements ReactiveController {

  private removeListeners() {
    if (this.isConnected) {
+      this.host.removeEventListener('mousemove', this.handleMouseMove);
      this.host.removeEventListener('mouseover', this.handleMouseOver);
      this.host.removeEventListener('keydown', this.handleKeyDown);
      this.host.removeEventListener('click', this.handleClick);
@@ -77,11 +80,18 @@ export class SubmenuController implements ReactiveController {
    if (this.isPopupConnected) {
      if (this.popupRef.value) {
        this.popupRef.value.removeEventListener('mouseover', this.handlePopupMouseover);
+        this.popupRef.value.removeEventListener('wa-reposition', this.handlePopupReposition);
        this.isPopupConnected = false;
      }
    }
  }

+  // Set the safe triangle cursor position
+  private handleMouseMove = (event: MouseEvent) => {
+    this.host.style.setProperty('--safe-triangle-cursor-x', `${event.clientX}px`);
+    this.host.style.setProperty('--safe-triangle-cursor-y', `${event.clientY}px`);
+  };
+
  private handleMouseOver = () => {
    if (this.hasSlotController.test('submenu')) {
      this.enableSubmenu();
@@ -188,6 +198,24 @@ export class SubmenuController implements ReactiveController {
    event.stopPropagation();
  };

+  // Set the safe triangle values for the submenu when the position changes
+  private handlePopupReposition = () => {
+    const submenuSlot: HTMLSlotElement | null = this.host.renderRoot.querySelector("slot[name='submenu']");
+    const menu = submenuSlot?.assignedElements({ flatten: true }).filter(el => el.localName === 'wa-menu')[0];
+    const isRtl = this.localize.dir() === 'rtl';
+
+    if (!menu) {
+      return;
+    }
+
+    const { left, top, width, height } = menu.getBoundingClientRect();
+
+    this.host.style.setProperty('--safe-triangle-submenu-start-x', `${isRtl ? left + width : left}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-start-y', `${top}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-end-x', `${isRtl ? left + width : left}px`);
+    this.host.style.setProperty('--safe-triangle-submenu-end-y', `${top + height}px`);
+  };
+
  private setSubmenuState(state: boolean) {
    if (this.popupRef.value) {
      if (this.popupRef.value.active !== state) {
--- a/src/components/menu-label/menu-label.styles.ts
+++ b/src/components/menu-label/menu-label.styles.ts
@@ -14,5 +14,6 @@ export default css`
    color: var(--wa-color-neutral-text-on-surface);
    padding: var(--wa-space-2xs) var(--wa-space-xl);
    user-select: none;
+    -webkit-user-select: none;
  }
 `;
--- a/src/components/menu/menu.component.ts
+++ b/src/components/menu/menu.component.ts
@@ -1,9 +1,9 @@
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
 import styles from './menu.styles.js';
-import WaMenuItem from '../menu-item/menu-item.component.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import type { CSSResultGroup } from 'lit';
+import type WaMenuItem from '../menu-item/menu-item.component.js';
 export interface MenuSelectEventDetail {
  item: WaMenuItem;
 }
@@ -29,11 +29,14 @@ export default class WaMenu extends WebAwesomeElement {
  }

  private handleClick(event: MouseEvent) {
-    if (!(event.target instanceof WaMenuItem)) {
-      return;
-    }
+    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];

-    const item: WaMenuItem = event.target;
+    const target = event.composedPath().find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));
+
+    if (!target) return;
+
+    // This isn't true. But we use it for TypeScript checks below.
+    const item = target as WaMenuItem;

    if (item.type === 'checkbox') {
      item.checked = !item.checked;
--- a/src/components/menu/menu.test.ts
+++ b/src/components/menu/menu.test.ts
@@ -100,4 +100,24 @@ describe('<wa-menu>', () => {

    expect(selectHandler).to.not.have.been.called;
  });
+
+  // @see https://github.com/shoelace-style/shoelace/issues/1596
+  it('Should fire "wa-select" when clicking an element within a menu-item', async () => {
+    // eslint-disable-next-line
+    const selectHandler = sinon.spy(() => {});
+
+    const menu: WaMenu = await fixture(html`
+      <wa-menu>
+        <wa-menu-item>
+          <span>Menu item</span>
+        </wa-menu-item>
+      </wa-menu>
+    `);
+
+    menu.addEventListener('wa-select', selectHandler);
+    const span = menu.querySelector('span')!;
+    await clickOnElement(span);
+
+    expect(selectHandler).to.have.been.calledOnce;
+  });
 });
--- a/src/components/nav-group/nav-group.component.ts
+++ b/src/components/nav-group/nav-group.component.ts
@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './nav-group.styles.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary A nav group is a way of grouping `<wa-nav-item>`s together.
+ * @documentation https://shoelace.style/components/nav-group
+ * @status experimental
+ * @since 3.0
+ *
+ * @csspart base - The base wrapper div around the content
+ * @csspart nav-items - The wrapper around the default slot where nav items are placed.
+ * @csspart details - When `<wa-nav-group>` is expandable, wraps the nav-items in a `<wa-details>`.
+ * @csspart details__base - Maps to the `wa-details::part(base)`
+ * @csspart details__header - Maps to the `wa-details::part(header)`
+ * @csspart details__summary - Maps to the `wa-details::part(summary)`
+ * @csspart details__summary-icon - Maps to the `wa-details::part(summary-icon)`
+ * @csspart details__content - Maps to the `wa-details::part(content)`
+ *
+ * @slot - The default slot where `<wa-nav-item>`s are placed.
+ * @slot heading - Displayed above the nav items.
+ * @slot summary - Displayed inside the `<wa-details>` element.
+ * @slot expand-icon - The expand icon for `<wa-details>`.
+ * @slot collapse-icon - The collapse icon for `<wa-details>`.
+ *
+ */
+export default class WaNavGroup extends WebAwesomeElement {
+  static styles: CSSResultGroup = styles;
+
+  /**
+   * The label to display above the nav items slotted in.
+   */
+  @property({ reflect: true }) label = '';
+
+  render() {
+    return html`
+      <div part="base" class="base" role="navigation" aria-labelledby="label">
+        <p id="label" part="label" class="label">
+          <slot name="label">${this.label}</slot>
+        </p>
+
+        <div class="nav-items" part="nav-items" aria-labelledby="label" role="list">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
--- a/src/components/nav-group/nav-group.styles.ts
+++ b/src/components/nav-group/nav-group.styles.ts
@@ -0,0 +1,34 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.js';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+    --gap: 6px;
+  }
+
+  .base {
+    color: var(--wa-color-text-normal);
+    height: 100%;
+    width: 100%;
+  }
+
+  .label {
+    font-weight: var(--wa-font-weight-heading);
+    color: var(--wa-color-neutral-text-on-surface);
+    padding-inline-start: var(--wa-space-xs);
+    margin: 0;
+    /** This is a cheap way to have labels have a bottom margin withot needing slot test controllers. */
+    line-height: calc(1em + 32px);
+  }
+
+  .nav-items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    height: 100%;
+    width: 100%;
+  }
+`;
--- a/src/components/nav-group/nav-group.test.ts
+++ b/src/components/nav-group/nav-group.test.ts
@@ -0,0 +1,10 @@
+import '../../../dist/webawesome.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<wa-nav-group>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <wa-nav-group></wa-nav-group> `);
+
+    expect(el).to.exist;
+  });
+});
--- a/src/components/nav-group/nav-group.ts
+++ b/src/components/nav-group/nav-group.ts
@@ -0,0 +1,12 @@
+import WaNavGroup from './nav-group.component.js';
+
+export * from './nav-group.component.js';
+export default WaNavGroup;
+
+WaNavGroup.define('wa-nav-group');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wa-nav-group': WaNavGroup;
+  }
+}
--- a/src/components/nav-item/nav-item.component.ts
+++ b/src/components/nav-item/nav-item.component.ts
@@ -0,0 +1,131 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LocalizeController } from '@shoelace-style/localize';
+import { property, state } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import styles from './nav-item.styles.js';
+import WaDetails from '../details/details.component.js';
+import WebAwesomeElement from '../../internal/webawesome-element.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary A nav item is intended to be used in a navigation area such as within a nav element in a sidebar or inside of a drawer. A nav item is meant to drive page navigations.
+ * @documentation https://shoelace.style/components/nav-item
+ * @status experimental
+ * @since 3.0
+ *
+ * @event wa-focus - Emitted on focus.
+ * @event wa-blur - Emitted on blur.
+ *
+ * @slot - The link's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ */
+export default class WaNavItem extends WebAwesomeElement {
+  static styles: CSSResultGroup = styles;
+
+  static dependencies = {
+    'wa-details': WaDetails
+  };
+
+  private readonly localize = new LocalizeController(this);
+
+  /** maps to the underlying `<a>`'s href */
+  @property({ reflect: true }) href = '';
+
+  /** maps to aria-current="<current>". Generally this value will either be "page", "true", or "false" */
+  @property({ reflect: true }) current: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' = 'false';
+
+  /** Tells the browser where to open the link. Only used when `href` is present. */
+  @property({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';
+
+  /**
+   * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
+   * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a
+   * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
+   * setting the attribute to an empty string or a value of your choice, respectively.
+   */
+  @property({ reflect: true }) rel = 'noreferrer noopener';
+
+  /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */
+  @property({ reflect: true }) download?: string;
+
+  /**
+   * The text to display in the summary of the `<wa-details>` element when the nav item is expandable.
+   */
+  @property({ reflect: true }) label = '';
+
+  /**
+   * If true, will add a `<wa-details>` element into the shadowRoot that you can slot `<wa-nav-items>` into.
+   */
+  @property({ reflect: true, type: Boolean }) expandable: boolean = false;
+
+  @state() hasFocus: boolean = false;
+
+  private handleBlur() {
+    this.hasFocus = false;
+    this.emit('wa-blur');
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+    this.emit('wa-focus');
+  }
+
+  render() {
+    const isRtl = this.localize.dir() === 'rtl';
+    return html`
+      <div class="base" part="base" role="listitem" aria-current=${this.expandable ? 'false' : this.current}>
+        ${when(
+          this.expandable,
+          () => html`
+            <wa-details
+              class="details"
+              part="details"
+              exportparts="
+                  base:details__base,
+                  header:details__header,
+                  header:control,
+                  summary:details__summary,
+                  summary-icon:details__summary-icon,
+                  content:details__content
+                "
+            >
+              <div slot="summary" part="label">
+                <slot name="label">${this.label}</slot>
+              </div>
+
+              <slot slot="expand-icon" name="expand-icon">
+                <wa-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
+              </slot>
+              <slot slot="collapse-icon" name="collapse-icon">
+                <wa-icon library="system" name=${isRtl ? 'chevron-left' : 'chevron-right'}></wa-icon>
+              </slot>
+
+              <div class="nav-items" part="nav-items" aria-labelledby="heading" role="list">
+                <slot></slot>
+              </div>
+            </wa-details>
+          `,
+          () => html`
+            <a
+              class="control"
+              part="control"
+              href=${ifDefined(this.href)}
+              target=${ifDefined(this.target)}
+              download=${ifDefined(this.download)}
+              rel=${ifDefined(this.rel)}
+              @blur=${this.handleBlur}
+              @focus=${this.handleFocus}
+            >
+              <slot part="prefix" name="prefix"></slot>
+              <div class="content" part="content"><slot></slot></div>
+              <slot part="suffix" name="suffix"></slot>
+            </a>
+          `
+        )}
+      </div>
+    `;
+  }
+}
--- a/src/components/nav-item/nav-item.styles.ts
+++ b/src/components/nav-item/nav-item.styles.ts
@@ -0,0 +1,117 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.js';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    width: auto;
+    cursor: pointer;
+    list-style-type: none;
+
+    --background-color: transparent;
+    --background-color-hover: var(--wa-color-neutral-fill-muted-alt);
+    --background-color-active: transparent;
+
+    --text-color: var(--wa-color-text-normal);
+    --text-color-hover: var(--wa-color-text-normal);
+    --text-color-active: var(--wa-color-text-normal);
+
+    --border-color: transparent;
+    --border-color-active: transparent;
+    --border-color-hover: color-mix(in oklab, var(--background-color-hover), var(--wa-color-tint-hover));
+  }
+
+  :host(:is([current='page'], [current='true'])) {
+    --background-color: var(--wa-color-brand-fill-vivid);
+    --text-color: var(--wa-color-brand-text-on-vivid);
+    --background-color-hover: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
+    --border-color-hover: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
+    --text-color-hover: var(--wa-color-brand-text-on-vivid);
+  }
+
+  .base {
+    /* when we change to "display: list-item" apparently it sets box-sizing to content-box... */
+    box-sizing: border-box;
+    display: grid;
+    height: 100%;
+  }
+
+  .control,
+  .details::part(header) {
+    padding: var(--wa-space-square-xs);
+    border-radius: var(--wa-corners-1x);
+    font: inherit;
+    font-weight: var(--wa-font-weight-action);
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+    transition:
+      var(--wa-transition-faster) background-color,
+      var(--wa-transition-faster) color,
+      var(--wa-transition-faster) border,
+      var(--wa-transition-faster) box-shadow;
+    cursor: inherit;
+    line-height: var(--wa-font-height-compact);
+
+    background-color: var(--background-color);
+    color: var(--text-color);
+  }
+
+  .control {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    border: 1px solid var(--border-color);
+    gap: 8px;
+  }
+
+  .content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .suffix {
+    align-self: end;
+  }
+
+  .control::-moz-focus-inner {
+    border: 0;
+  }
+
+  .control:focus {
+    outline: transparent;
+  }
+
+  .details::part(header):is(:hover),
+  .control:is(:hover) {
+    background-color: var(--background-color-hover);
+    color: var(--text-color-hover);
+    border-color: var(--border-color-hover);
+  }
+
+  .details::part(header):focus-visible,
+  .control:focus-visible {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+    outline-color: var(--background-color-hover);
+  }
+
+  .details::part(base) {
+    border-color: transparent;
+  }
+
+  .details::part(content) {
+    padding-top: 6px;
+    padding-inline-end: 0px;
+    padding-inline-start: 2em;
+  }
+
+  .nav-items {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    height: 100%;
+  }
+`;
--- a/src/components/nav-item/nav-item.test.ts
+++ b/src/components/nav-item/nav-item.test.ts
@@ -0,0 +1,10 @@
+import '../../../dist/webawesome.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<wa-nav-item>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <wa-nav-item></wa-nav-item> `);
+
+    expect(el).to.exist;
+  });
+});
--- a/src/components/nav-item/nav-item.ts
+++ b/src/components/nav-item/nav-item.ts
@@ -0,0 +1,12 @@
+import WaNavItem from './nav-item.component.js';
+
+export * from './nav-item.component.js';
+export default WaNavItem;
+
+WaNavItem.define('wa-nav-item');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wa-nav-item': WaNavItem;
+  }
+}
--- a/src/components/option/option.styles.ts
+++ b/src/components/option/option.styles.ts
@@ -7,6 +7,7 @@ export default css`
  :host {
    display: block;
    user-select: none;
+    -webkit-user-select: none;
  }

  :host(:focus) {
--- a/src/components/progress-bar/progress-bar.styles.ts
+++ b/src/components/progress-bar/progress-bar.styles.ts
@@ -31,8 +31,11 @@ export default css`
    line-height: var(--height);
    white-space: nowrap;
    overflow: hidden;
-    transition: 400ms width, 400ms background-color;
+    transition:
+      400ms width,
+      400ms background-color;
    user-select: none;
+    -webkit-user-select: none;
  }

  /* Indeterminate */
--- a/src/components/progress-bar/progress-bar.test.ts
+++ b/src/components/progress-bar/progress-bar.test.ts
@@ -73,12 +73,10 @@ describe('<wa-progress-bar>', () => {

  describe('when provided a ariaLabelledBy, and value parameter', () => {
    before(async () => {
-      el = await fixture<WaProgressBar>(
-        html`
-          <label id="labelledby">Progress Ring Label</label>
-          <wa-progress-bar ariaLabelledBy="labelledby" value="25"></wa-progress-bar>
-        `
-      );
+      el = await fixture<WaProgressBar>(html`
+        <label id="labelledby">Progress Ring Label</label>
+        <wa-progress-bar ariaLabelledBy="labelledby" value="25"></wa-progress-bar>
+      `);
    });

    it('should pass accessibility tests', async () => {
--- a/src/components/progress-ring/progress-ring.styles.ts
+++ b/src/components/progress-ring/progress-ring.styles.ts
@@ -66,5 +66,6 @@ export default css`
    height: 100%;
    text-align: center;
    user-select: none;
+    -webkit-user-select: none;
  }
 `;
--- a/src/components/progress-ring/progress-ring.test.ts
+++ b/src/components/progress-ring/progress-ring.test.ts
@@ -52,12 +52,10 @@ describe('<wa-progress-ring>', () => {

  describe('when provided a ariaLabelledBy, and value parameter', () => {
    before(async () => {
-      el = await fixture<WaProgressRing>(
-        html`
-          <label id="labelledby">Progress Ring Label</label>
-          <wa-progress-ring ariaLabelledBy="labelledby" value="25"></wa-progress-ring>
-        `
-      );
+      el = await fixture<WaProgressRing>(html`
+        <label id="labelledby">Progress Ring Label</label>
+        <wa-progress-ring ariaLabelledBy="labelledby" value="25"></wa-progress-ring>
+      `);
    });

    it('should pass accessibility tests', async () => {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Cory LaViska	1329d4475a	eslint	2023-11-02 13:20:43 -04:00
Cory LaViska	f5448f3f09	prettier	2023-11-02 13:16:52 -04:00
Cory LaViska	b33efe697b	add recommended styles	2023-11-02 13:10:43 -04:00
Cory LaViska	306911d663	add layout examples link	2023-11-02 13:04:39 -04:00
Cory LaViska	c0e49cc4ab	fix markup	2023-11-02 12:00:19 -04:00
Cory LaViska	64ac34447c	fix missing </div>	2023-11-02 12:00:11 -04:00
Cory LaViska	667e78243c	remove preview	2023-11-02 11:52:08 -04:00
Cory LaViska	93883537a0	layouts docs	2023-11-02 11:16:33 -04:00
Cory LaViska	900d4b74e3	update name	2023-11-02 11:16:26 -04:00
Cory LaViska	c371dae683	use slot names	2023-11-02 11:15:58 -04:00
Cory LaViska	ecf2da5201	Merge branch 'next' into layouts-review	2023-11-02 08:53:41 -04:00
Cory LaViska	932e2e7566	update jet brains plugin and stop writing to package.json	2023-11-02 08:53:17 -04:00
Konnor Rogers	e76a1dc1f6	fix no translation error (#8 ) * fix no translation error * prettier	2023-11-01 16:49:24 -04:00
Cory LaViska	5383411572	fix metadata	2023-11-01 13:25:25 -04:00
Cory LaViska	af3958cc63	fix margin	2023-11-01 13:01:32 -04:00
Cory LaViska	30561d565b	Merge branch 'next' into layouts-review	2023-11-01 11:20:04 -04:00
Cory LaViska	38302a7c28	fix bad port	2023-10-25 13:38:21 -04:00
Cory LaViska	71e5b10f3b	backport PR 1684	2023-10-25 13:07:59 -04:00
Cory LaViska	4340f89830	Merge branch 'konnorrogers/layouts' into layouts-review	2023-10-24 14:55:07 -04:00
Cory LaViska	9a46c29072	fixes/updates	2023-10-24 14:54:31 -04:00
konnorrogers	55bc5f0432	Merge branch 'konnorrogers/layouts' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts	2023-10-24 11:54:53 -04:00
konnorrogers	dc7c68d6c5	add themer to sport-awesome	2023-10-24 11:53:53 -04:00
Cory LaViska	213bde0f7f	fix prettier command	2023-10-24 10:01:07 -04:00
Cory LaViska	c195b9f444	prettier	2023-10-24 09:57:01 -04:00
Cory LaViska	58a9f04623	Merge branch 'next' into konnorrogers/layouts	2023-10-24 09:53:40 -04:00
konnorrogers	b134911703	update layout playground	2023-10-23 14:14:59 -04:00
Cory LaViska	3eda5510c3	fix tests	2023-10-23 12:33:14 -04:00
Cory LaViska	32494e783c	backport PR 1605	2023-10-23 12:03:18 -04:00
konnorrogers	0fa4810ddb	Merge branch 'next' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts	2023-10-23 11:41:36 -04:00
Cory LaViska	cdf38fe147	remove ts-check	2023-10-23 11:35:32 -04:00
Cory LaViska	302c174055	backport PR 1671	2023-10-23 10:48:37 -04:00
Cory LaViska	fb044aae89	backport PR 1670	2023-10-23 10:19:34 -04:00
konnorrogers	1f09a53fab	layouts	2023-10-20 16:03:52 -04:00
konnorrogers	2d95eedbac	fix playgrounds	2023-10-20 16:01:10 -04:00
konnorrogers	26d83f37d6	with different base settings	2023-10-20 15:29:33 -04:00
konnorrogers	a751053803	try with all sandbox settings on	2023-10-20 15:26:35 -04:00
konnorrogers	44a7dd5089	try 1.0.1	2023-10-20 15:03:01 -04:00
konnorrogers	902ab85f32	fix playgrounds	2023-10-20 14:24:27 -04:00
konnorrogers	21647001a4	update light-preview	2023-10-20 14:04:27 -04:00
konnorrogers	a0ee2256c4	update light-pen	2023-10-20 12:09:02 -04:00
konnorrogers	51f5c30526	update sport awesome, rename to .html and .css	2023-10-20 11:58:18 -04:00
Cory LaViska	bf299d8234	backport PR 1670	2023-10-20 09:04:15 -04:00
konnorrogers	9e0aa9c2ec	move flow to sport-awesome	2023-10-19 14:36:52 -04:00
konnorrogers	15a9c63040	Merge branch 'next' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts	2023-10-19 12:54:04 -04:00
Cory LaViska	30a3164a96	backport PR 1663	2023-10-19 10:31:24 -04:00
Cory LaViska	2a22fb683c	backport PR 1667	2023-10-19 09:43:32 -04:00
Cory LaViska	325ddafb13	backport docs fix	2023-10-19 09:41:39 -04:00
konnorrogers	a1a09a2b2b	finish up sport awesome	2023-10-18 16:10:18 -04:00
konnorrogers	1df6afa541	finish up sport awesome	2023-10-18 13:49:09 -04:00
Cory LaViska	fcb2c7868c	backport PR 1661	2023-10-18 13:44:20 -04:00
Cory LaViska	46b198866d	backport PR 1656	2023-10-18 13:26:39 -04:00
konnorrogers	d4e2abe218	Merge branch 'next' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts	2023-10-18 11:24:46 -04:00
konnorrogers	ac94d838f0	continued work on sportawesome	2023-10-16 16:31:50 -04:00
Cory LaViska	9a4da9b763	backport PR 1655	2023-10-16 13:05:53 -04:00
Cory LaViska	7869144f5e	backport changelog for 2.10.0	2023-10-16 13:05:37 -04:00
Cory LaViska	2d7d400040	backport PR 1614	2023-10-16 12:47:36 -04:00
Cory LaViska	6f5e5a2433	update default	2023-10-16 12:41:37 -04:00
Cory LaViska	e59a4659d8	fix import	2023-10-16 12:39:21 -04:00
konnorrogers	23a0f4afdc	working on sportawesome	2023-10-16 12:26:46 -04:00
Cory LaViska	2f9732fc3d	use discussions for features	2023-10-16 11:37:17 -04:00
Cory LaViska	fdede79155	backport PR 1615	2023-10-13 13:53:41 -04:00
konnorrogers	00f23c485d	update layout stuff	2023-10-13 10:59:19 -04:00
Cory LaViska	3277284473	backport PR 1608	2023-10-12 16:28:19 -04:00
Cory LaViska	b2b8d0d941	backport PR 1583	2023-10-12 15:52:31 -04:00
Cory LaViska	91bfd38a9a	update deps to stay in sync with sl	2023-10-12 15:03:38 -04:00
konnorrogers	7a31446162	add disable-sticky	2023-10-12 12:55:33 -04:00
konnorrogers	11893fe80c	Merge branch 'next' into konnorrogers/layouts	2023-10-12 12:18:10 -04:00
Cory LaViska	f4971456d0	backport PR 1599	2023-10-12 12:18:08 -04:00
konnorrogers	e23adf4d11	use toggle-navigation	2023-10-12 12:15:24 -04:00
Cory LaViska	cc18a90a86	backport PR 1600	2023-10-12 12:11:20 -04:00
Cory LaViska	60b6803437	Merge branch 'themer' into next	2023-10-12 12:01:36 -04:00
Cory LaViska	2b57157502	backport PR 1604	2023-10-12 12:01:10 -04:00
konnorrogers	739a6033af	more notes to layout	2023-10-04 16:21:19 -04:00
konnorrogers	ed43baa459	update to use <current> on the nav-item	2023-10-04 15:58:58 -04:00
konnorrogers	9cbc27a6ef	refactor nav-item to use a 'string' for 'current'	2023-10-04 15:52:38 -04:00
konnorrogers	b017c4df1e	add support for data-wa-layout-navigation-toggle	2023-10-02 16:14:23 -04:00
konnorrogers	27aaa82a9c	Merge branch 'next' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts	2023-10-02 14:45:02 -04:00
konnorrogers	57194ed12d	readd nav button	2023-10-02 12:20:29 -04:00
konnorrogers	74d5b4c3f4	remove navigation button	2023-10-02 11:58:56 -04:00
Cory LaViska	967208d69b	backport PR 1586	2023-10-02 09:06:58 -05:00
konnorrogers	e95bfab77b	update	2023-09-29 10:20:27 -04:00
konnorrogers	78785b872d	Merge branch 'next' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts	2023-09-29 10:19:38 -04:00
konnorrogers	6f0c41cddf	apply lindsay's tweaks	2023-09-28 17:29:40 -04:00
konnorrogers	52bda73657	apply lindsay's tweaks	2023-09-28 16:53:29 -04:00
konnorrogers	aaf845c72a	prettier	2023-09-25 16:25:02 -04:00
konnorrogers	fc66179dc0	fix react examples	2023-09-25 16:07:16 -04:00
konnorrogers	67702b8d89	more nav-group / nav-item fixes	2023-09-25 12:25:06 -04:00
konnorrogers	81ff1422e8	working on nav group / nav-items	2023-09-22 14:26:25 -04:00
konnorrogers	27984299e0	remove align-items: stretch	2023-09-21 12:58:55 -04:00
konnorrogers	0cac319988	working on nav group / nav-items	2023-09-21 12:52:41 -04:00
konnorrogers	0509fb041f	Merge branch 'next' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts	2023-09-21 10:05:16 -04:00
konnorrogers	32bc7f2207	more work on nav items	2023-09-20 18:14:25 -04:00
konnorrogers	7c73b6a458	Merge branch 'next' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts	2023-09-20 14:23:28 -04:00
konnorrogers	6b579a6946	move to nav-item + nav-group	2023-09-19 17:45:11 -04:00
konnorrogers	896fe76a8d	continued layout work	2023-09-18 16:35:05 -04:00
konnorrogers	ed1621410b	update to example.njk	2023-09-15 14:08:49 -04:00
konnorrogers	29e591e69b	Merge branch 'next' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts	2023-09-15 12:56:59 -04:00
konnorrogers	396e632679	working on navigation	2023-09-15 12:36:16 -04:00
konnorrogers	316f8eb16d	use brand button	2023-09-14 14:14:55 -04:00
konnorrogers	131b1ee57e	adding layout examples	2023-09-14 14:10:43 -04:00
konnorrogers	75004768bb	push up docs	2023-09-13 15:51:39 -04:00
konnorrogers	c8067674f6	fix doc layouts	2023-09-12 17:16:57 -04:00
konnorrogers	caf4dc5526	working on semantic tokens	2023-09-12 16:24:40 -04:00
konnorrogers	93841348e1	Merge branch 'next' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts	2023-09-12 14:46:53 -04:00
konnorrogers	8ad392a5ac	update to WA3	2023-09-12 14:35:03 -04:00
konnorrogers	6fc8a5166e	Merge branch 'next' of https://github.com/shoelace-style/webawesome into konnorrogers/layouts	2023-09-11 15:46:09 -04:00
konnorrogers	0e27e1dd3d	update to latest light-pen	2023-09-07 13:05:22 -04:00
Konnor Rogers	1b33f38280	use <script text/plain	2023-09-02 09:59:59 -04:00
Konnor Rogers	340869fa91	try with new setup	2023-09-02 01:20:54 -04:00
konnorrogers	06ff11114a	fix templates	2023-08-30 16:35:01 -04:00
konnorrogers	ebe30a5ce8	fix duplicate binding	2023-08-30 15:56:47 -04:00
konnorrogers	4c84dec601	rename to .njk	2023-08-30 15:53:13 -04:00
konnorrogers	ece156de0b	fix templates	2023-08-30 15:51:02 -04:00
konnorrogers	191f7d708c	create layouts	2023-08-30 15:28:33 -04:00
				`@@ -0,0 +1 @@`
				`<wa-layout main-id="main-content" class="wa-theme-light"> </wa-layout>`