Merge branch 'next' into alpha

docs/_includes/page-demo.njk

@@ -7,7 +7,7 @@
   <div class="options">
   {% for slot in slots %}
 	{% if (slot.name != "skip-to-content") and (slot.name != "navigation-toggle-icon") %}
-  <wa-checkbox name="slot" value="{{ slot.name }}" {{ 'checked' if slot.name != "menu" | safe}} class="{{ 'default' if not slot.name }}"
+  <wa-checkbox name="slot" value="{{ slot.name }}" {{ 'checked' if slot.name != "menu" and slot.name != 'navigation-toggle' | safe}} class="{{ 'default' if not slot.name }}"
   data-description="{{ slot.description | inlineMarkdown }}" title="{{ slot.description | inlineMarkdown | striptags | safe }}">
     {{ slot.name or "(default)" }}
   </wa-checkbox>
@@ -16,7 +16,7 @@
   </div>
 </fieldset>
 <wa-viewport-demo viewport="1000">
-<iframe srcdoc="" id="page_slots_iframe"></iframe>
+<iframe srcdoc="" id="page_slots_iframe" data-turbo="false" data-turbo-temporary></iframe>
 </wa-viewport-demo>
 </div>
 <script type=module src="/assets/examples/page-demo/demo.js"></script>

docs/_utils/code-examples.js

@@ -78,7 +78,13 @@ const templates = {
 
     let preview = '';
     if (attributes.viewport === undefined) {
+      // Slot in pre-rendered preview
       preview = `<div style="display:contents" slot="preview">${code.textContent}</div>`;
+
+      // Run preview scripts as modules to prevent collisions
+      const root = parse(preview, { blockTextElements: { script: true } });
+      root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
+      preview = root.toString();
     }
 
     return `${includes}

docs/assets/examples/page-demo/demo.js

@@ -40,3 +40,11 @@ function render() {
 }
 fieldset?.addEventListener('input', render);
 render();
+
+//
+// TODO - fix Turbo caching. When this is removed, visiting the <wa-page> docs via Turbo will cause the <iframe srcdoc>
+// to not render. Even with this, there are console errors when leaving the page.
+//
+// NOTE - the iframe already has `data-turbo="false"` and `data-turbo-temporary` on it.
+//
+document.body.setAttribute('data-turbo', 'false');

src/components/viewport-demo/viewport-demo.styles.ts

@@ -121,7 +121,7 @@ export default css`
     }
 
     /* Quick hack to disable zooming in Firefox and Safari */
-    @supports not (interpolate-size: allow-keywords) {
+    @supports not (scroll-timeline: none) {
       [part~='zoom-in'],
       [part~='zoom-out'] {
         display: none;