fix theme selector

cspell.json

@@ -161,7 +161,6 @@
     "rgba",
     "roadmap",
     "Roboto",
-    "rockstar",
     "roledescription",
     "Sapan",
     "saturationl",
@@ -171,6 +170,7 @@
     "scroller",
     "Scrollers",
     "Segoe",
+    "selectattr",
     "semibold",
     "shadowrootmode",
     "Shortcode",
@@ -229,8 +229,6 @@
     "src/translations/!(en).ts",
     "**/*.min.js"
   ],
-  "ignoreRegExpList": [
-    "(^|[^a-z])sl[a-z]*(^|[^a-z])"
-  ],
+  "ignoreRegExpList": ["(^|[^a-z])sl[a-z]*(^|[^a-z])"],
   "useGitignore": true
 }

packages/webawesome/docs/_includes/theme-selector.njk

@@ -8,7 +8,7 @@
   {# Free themes #}
   {% for page in collections.themePages %}
     {% if not page.data.isPro %}
-      <wa-option value="{{ page.data.file | stripExtension }}">{{ page.data.title }}</wa-option>
+      <wa-option value="{{ page.fileSlug }}">{{ page.data.title }}</wa-option>
     {% endif %}
   {% endfor %}
 
@@ -21,7 +21,7 @@
   {% for page in collections.themePages %}
     {% if loop.first %}<wa-divider></wa-divider>{% endif %}
     {% if page.data.isPro %}
-      <wa-option value="{{ page.data.file | stripExtension }}">{{ page.data.title }}</wa-option>
+      <wa-option value="{{ page.fileSlug }}">{{ page.data.title }}</wa-option>
     {% endif %}
   {% endfor %}
 </wa-select>

packages/webawesome/docs/docs/themes.njk

@@ -35,6 +35,8 @@ isPro: true
 </wa-comparison>
 
 <script type="module">
+  import { allDefined } from '/dist/webawesome.js';
+
   let didInit = false;
 
   function init() {
@@ -45,7 +47,7 @@ isPro: true
     const afterFrame = document.querySelector('wa-zoomable-frame[slot="after"]');
     const beforeFrame = document.querySelector('wa-zoomable-frame[slot="before"]');
 
-    function updateFrames(selectedValue, title, description, isPro) {
+    async function updateFrames(selectedValue, title, description, isPro) {
       const baseUrl = '/assets/examples/themes/showcase.html';
       const params = new URLSearchParams();
 
@@ -62,6 +64,8 @@ isPro: true
       const queryString = params.toString() ? '?' + params.toString() : '';
       const darkQueryString = '?' + darkParams.toString();
 
+      await allDefined();
+
       afterFrame.src = baseUrl + queryString;
       beforeFrame.src = baseUrl + darkQueryString;
     }