diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index 473f7897a..b826b1cf2 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -9,6 +9,7 @@
+ {% if hasSidebar %}{% endif %}
{% if hasSidebar %}{% endif %}
diff --git a/docs/_includes/sidebar-group.njk b/docs/_includes/sidebar-group.njk
deleted file mode 100644
index b723d22ab..000000000
--- a/docs/_includes/sidebar-group.njk
+++ /dev/null
@@ -1,23 +0,0 @@
-{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
-{% if collections[tag] -%}
- {% set groupUrl %}/docs/{{ tag }}/{% endset %}
- {% set groupItem = groupUrl | getCollectionItemFromUrl %}
- {% set children = groupItem.data.children if groupItem.data.children.length > 0 else (collections[tag] | sort) %}
-
-
-
- {% if groupItem %}
- {{ title or (tag | capitalize) }}
-
-
- {% else %}
- {{ title or (tag | capitalize) }}
- {% endif %}
-
-
- {% for page in children %}
- {% include 'sidebar-link.njk' %}
- {% endfor %}
-
-
-{%- endif %}
diff --git a/docs/_includes/sidebar-link.njk b/docs/_includes/sidebar-link.njk
deleted file mode 100644
index fafaf399d..000000000
--- a/docs/_includes/sidebar-link.njk
+++ /dev/null
@@ -1,16 +0,0 @@
-{% if page and not page.data.unlisted -%}
-
- {{ page.data.title }}
- {% if page.data.status == 'experimental' %}{% endif %}
- {% if page.data.isPro %}PRO{% endif %}
-
- {% set children = page.data.children %}
- {% if children.length > 0 %}
-
- {% for page in children %}
- {% include 'sidebar-link.njk' %}
- {% endfor %}
-
- {% endif %}
-
-{%- endif %}
diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk
index 71345ddf9..f96611dfc 100644
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -20,15 +20,427 @@
Visual Tests
-{% for tag, title in {
- 'themes': 'Themes',
- 'components': 'Components',
- 'native': 'Native Styles',
- 'utilities': 'Style Utilities',
- 'layout': 'Layout',
- 'patterns': 'Patterns',
- 'palettes': 'Color Palettes',
- 'tokens': 'Design Tokens'
-} %}
- {% include 'sidebar-group.njk' %}
-{% endfor %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/assets/scripts/sidebar.js b/docs/assets/scripts/sidebar.js
new file mode 100644
index 000000000..2a077cee2
--- /dev/null
+++ b/docs/assets/scripts/sidebar.js
@@ -0,0 +1,26 @@
+const sidebar = document.querySelector('#sidebar');
+const allDetails = sidebar.querySelectorAll('wa-details');
+const collapsibleSections = sidebar.querySelectorAll('h2 > a');
+
+function ensureCurrentSectionIsOpen(root) {
+ const matchingDetails = root.querySelectorAll('wa-details:has(a.current)');
+
+ matchingDetails.forEach(details => {
+ details.setAttribute('open', '');
+ });
+}
+
+// Ensure current section is open on normal page load
+window.addEventListener('DOMContentLoaded', () => {
+ ensureCurrentSectionIsOpen(sidebar);
+});
+
+// Ensure current section is open on Turbo page loads
+document.addEventListener('turbo:before-render', event => {
+ if (!event?.detail?.newBody) return;
+ const newSidebar = event.detail.newBody.querySelector('#sidebar');
+
+ if (newSidebar) {
+ ensureCurrentSectionIsOpen(newSidebar);
+ }
+});
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 9ba02ef69..856f2d4ec 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -198,6 +198,11 @@ wa-badge.pro {
opacity: 0;
}
}
+
+ wa-details {
+ --show-duration: 0;
+ --hide-duration: 0;
+ }
}
wa-icon-button.delete {
diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md
index 7af557eba..0cb1fcc37 100644
--- a/docs/docs/components/textarea.md
+++ b/docs/docs/components/textarea.md
@@ -8,7 +8,7 @@ native: input
```html {.example}