fix incremental builds (#1961)

* fix incremental builds

* prettier

.gitignore

@@ -10,3 +10,4 @@ yarn.lock
 _bundle_
 /packages/webawesome-pro
 /packages/webawesome-app
+custom-elements.json

package-lock.json

@@ -1880,6 +1880,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@lit-labs/eleventy-plugin-lit": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@lit-labs/eleventy-plugin-lit/-/eleventy-plugin-lit-1.0.5.tgz",
@@ -5420,6 +5426,18 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -14646,6 +14664,7 @@
         "@lit/react": "^1.0.8",
         "@shoelace-style/animations": "^1.2.0",
         "@shoelace-style/localize": "^3.2.1",
+        "chart.js": "^4.5.1",
         "composed-offset-position": "^0.0.6",
         "lit": "^3.2.1",
         "nanoid": "^5.1.5",

packages/webawesome/custom-elements-manifest.js

@@ -1,18 +1,18 @@
+import { cemInheritancePlugin } from '@wc-toolkit/cem-inheritance';
+import { cemValidatorPlugin } from '@wc-toolkit/cem-validator';
 import { jsxTypesPlugin } from '@wc-toolkit/jsx-types';
+import { getTsProgram, typeParserPlugin } from '@wc-toolkit/type-parser';
+import { parse } from 'comment-parser';
 import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
+import { customElementSveltePlugin } from 'custom-element-svelte-integration';
 import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
-import { parse } from 'comment-parser';
 import fs from 'fs';
 import * as path from 'node:path';
 import { pascalCase } from 'pascal-case';
 import * as url from 'url';
 import { llmsTxtPlugin } from './scripts/llms.js';
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
-import { getTsProgram, typeParserPlugin } from "@wc-toolkit/type-parser";
-import { cemValidatorPlugin } from "@wc-toolkit/cem-validator";
-import { cemInheritancePlugin } from "@wc-toolkit/cem-inheritance";
-import { customElementSveltePlugin } from "custom-element-svelte-integration";
 
 const packageData = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json'), 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
@@ -34,11 +34,9 @@ export default {
   dependencies: true,
   outdir,
   // Give the plugin access to the TypeScript type checker
-  overrideModuleCreation({ts, globs}) {
-    const program = getTsProgram(ts, globs, "tsconfig.json");
-    return program
-      .getSourceFiles()
-      .filter((sf) => globs.find((glob) => sf.fileName.includes(glob)));
+  overrideModuleCreation({ ts, globs }) {
+    const program = getTsProgram(ts, globs, 'tsconfig.json');
+    return program.getSourceFiles().filter(sf => globs.find(glob => sf.fileName.includes(glob)));
   },
 
   plugins: [
@@ -52,7 +50,7 @@ export default {
     },
 
     cemInheritancePlugin({
-      fileName: "custom-elements.json",
+      fileName: 'custom-elements.json',
       outdir,
     }),
 
@@ -220,11 +218,11 @@ export default {
     customElementVuejsPlugin({
       outdir: './dist-cdn/types/vue',
       fileName: 'index.d.ts',
-      componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js`
+      componentTypePath: (_, tag) => `../../components/${tag.replace('wa-', '')}/${tag.replace('wa-', '')}.js`,
     }),
     customElementSveltePlugin({
-      outdir: "./dist-cdn/types/svelte",
-      fileName: "index.d.ts"
+      outdir: './dist-cdn/types/svelte',
+      fileName: 'index.d.ts',
     }),
     // cemValidatorPlugin({
     //   cemFileName: "./dist-cdn/custom-elements.json"

packages/webawesome/docs/_includes/base.njk

@@ -41,72 +41,82 @@
         {% endif %}
       {% endfor %}
     >
-        {% block pageBanner %}
-          {% if hasBanner %}
-            {#- WA Launch Banner -#}
-            {% include "_banner-wa-launch.njk" ignore missing %}
-          {% endif %}
-        {% endblock %}
+      {# wa-page-based Skip to Content #}
+      {% block pageSkipToContent %}{% endblock %}
 
-        {% block pageHeader %}
-          <header slot="header" class="wa-split">
-            {# Nav toggle #}
-              <wa-button appearance="plain" size="small" data-toggle-nav>
-                <wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
-                <wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
-              </wa-button>
+      {# wa-page-based Banner #}
+      {% block pageBanner %}
+        {% if hasBanner %}
+          {#- WA Launch Banner -#}
+          {% include "_banner-wa-launch.njk" ignore missing %}
+        {% endif %}
+      {% endblock %}
 
-              {# Logo - Desktop #}
-              <a class="brand-logo wa-desktop-only" href="/" aria-label="Web Awesome">
-                {% include "logo.njk" %}
-              </a>
+      {# wa-page-based Subheader #}
+      {% block pageSubheader %}{% endblock %}
 
-            {#- Logo - mobile branding -#}
-            <a href="/" class="brand-logo wa-mobile-only" aria-label="Web Awesome">
-              {# Logo - Mobile #}
-              {% include "logo-simple.njk" %}
-            </a>
+      {# wa-page-based Header #}
+      {% block pageHeader %}
+        <header slot="header" class="wa-split">
+          {# Nav toggle #}
+          <wa-button appearance="plain" size="small" data-toggle-nav>
+            <wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
+            <wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
+          </wa-button>
 
-            <div id="docs-toolbar" class="wa-cluster gap-s">
-              <div class="wa-desktop-only wa-cluster wa-gap-2xs">
-                {% include "theme-selector.njk" %}
-                {% include "color-scheme-selector.njk" %}
-                {% include "github-icon-buttons.njk" %}
-              </div>
-              {#- Login -#}
-              {% include "login-or-avatar.njk" ignore missing %}
-            </div>
-          </header>
-        {% endblock %}
+          {# Logo - Desktop #}
+          <a href="/" class="brand-logo wa-desktop-only" aria-label="Web Awesome">{% include "logo.njk" %}</a>
 
-      {# Sidebar #}
-      {% if hasSidebar %}
-        {# Mobile selectors #}
-        <div class="wa-mobile-only" slot="navigation-header">
-          <div class="wa-cluster wa-gap-s">
-            <a class="brand-logo" href="/" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
-            <div class="wa-cluster wa-gap-2xs" style="flex-wrap: nowrap;">
+          {# Logo - Mobile #}
+          <a href="/" class="brand-logo wa-mobile-only" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
+
+          <div id="docs-toolbar" class="wa-cluster gap-s">
+            <div class="wa-desktop-only wa-cluster wa-gap-2xs">
               {% include "theme-selector.njk" %}
               {% include "color-scheme-selector.njk" %}
               {% include "github-icon-buttons.njk" %}
             </div>
+
+            {#- Login -#}
+            {% include "login-or-avatar.njk" ignore missing %}
           </div>
-        </div>
-        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
-          {% include "sidebar.njk" %}
-        </div>
-      {% endif %}
+        </header>
+      {% endblock %}
 
-      {# Outline #}
-      {% if hasOutline %}
-        <aside slot="aside" id="outline" class="docs-aside">
-          <nav id="outline-standard" class="outline-links">
-            <h2><a href="#content">{{ title }}</a></h2>
-          </nav>
-        </aside>
-      {% endif %}
+      {# wa-page-based Navigation Header #}
+      {% block pageNavigationHeader %}
+        {# Sidebar - Mobile Selectors #}
+        {% if hasSidebar %}
+          <div class="wa-mobile-only" slot="navigation-header">
+            <div class="wa-cluster wa-gap-s">
+              <a class="brand-logo" href="/" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
+              <div class="wa-cluster wa-gap-2xs" style="flex-wrap: nowrap;">
+                {% include "theme-selector.njk" %}
+                {% include "color-scheme-selector.njk" %}
+                {% include "github-icon-buttons.njk" %}
+              </div>
+            </div>
+          </div>
+        {% endif %}
+      {% endblock %}
 
-      {# Main #}
+      {# wa-page-based Navigation #}
+      {% block pageNavigation %}
+        {# Sidebar - Navigation #}
+        {% if hasSidebar %}
+          <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
+            {% include "sidebar.njk" %}
+          </div>
+        {% endif %}
+      {% endblock %}
+
+      {# wa-page-based Navigation Footer #}
+      {% block pageNavigationFooter %}{% endblock %}
+
+      {# wa-page-based Main Header #}
+      {% block pageMainHeader %}{% endblock %}
+
+      {# wa-page-based Main Content (default) #}
       <main id="content">
         {# Expandable outline #}
         {% if hasOutline %}
@@ -117,7 +127,10 @@
         </nav>
         {% endif %}
 
-        <div id="flashes">{% server "flashes" %}</div>
+        {# Flashes #}
+        {% block flashes %}
+          <div id="flashes">{% server "flashes" %}</div>
+        {% endblock %}
 
         {% block header %}
           {% if hasGeneratedTitle %}
@@ -134,6 +147,24 @@
         {% block afterContent %}{% endblock %}
       </main>
 
+      {# wa-page-based Main Footer #}
+      {% block pageMainFooter %}{% endblock %}
+
+      {# wa-page-based Aside #}
+      {% block pageAside %}
+        {# Outline #}
+        {% if hasOutline %}
+          <aside slot="aside" id="outline" class="docs-aside">
+            <nav id="outline-standard" class="outline-links">
+              <h2><a href="#content">{{ title }}</a></h2>
+            </nav>
+          </aside>
+        {% endif %}
+      {% endblock %}
+
+      {# wa-page-based Footer #}
+      {% block pageFooter %}{% endblock %}
+
       {% include 'search.njk' %}
 
       {#- Site-Wide Dialog -#}
@@ -143,9 +174,6 @@
 
       {#- Cookie Consent Dialog -#}
       {% include "cookie-consent.njk" ignore missing %}
-
-      {# Footer #}
-      {% block pageFooter %}{% endblock %}
     </wa-page>
 
   </body>

packages/webawesome/docs/_utils/manifest.js

@@ -11,7 +11,7 @@ export function getComponents() {
   const manifest = JSON.parse(readFileSync(join(distDir, 'custom-elements.json'), 'utf-8'));
   const components = [];
 
-  const sortByName = (a, b) => (a.name || "").localeCompare(b.name || "")
+  const sortByName = (a, b) => (a.name || '').localeCompare(b.name || '');
   manifest.modules?.forEach(module => {
     module.declarations?.forEach(declaration => {
       if (declaration.customElement) {
@@ -19,15 +19,15 @@ export function getComponents() {
         declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js');
 
         // Remove private members and those that lack a description
-        const slots = declaration.slots?.sort(sortByName)
-        const events = declaration.events?.sort(sortByName)
-        const cssProperties = declaration.cssProperties?.sort(sortByName)
-        const cssParts = declaration.cssParts?.sort(sortByName)
-        const cssStates = declaration.cssStates?.sort(sortByName)
-        const dependencies = declaration.dependencies?.sort((a, b) => a.localeCompare(b))
+        const slots = declaration.slots?.sort(sortByName);
+        const events = declaration.events?.sort(sortByName);
+        const cssProperties = declaration.cssProperties?.sort(sortByName);
+        const cssParts = declaration.cssParts?.sort(sortByName);
+        const cssStates = declaration.cssStates?.sort(sortByName);
+        const dependencies = declaration.dependencies?.sort((a, b) => a.localeCompare(b));
 
-
-        const members = declaration.members?.filter(member => member.description && member.privacy !== 'private')
+        const members = declaration.members
+          ?.filter(member => member.description && member.privacy !== 'private')
           ?.sort(sortByName);
         const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');
         const properties = members?.filter(prop => {
@@ -38,7 +38,7 @@ export function getComponents() {
           }
 
           return prop.kind === 'field' && prop.privacy !== 'private';
-        })
+        });
         components.push({
           ...declaration,
           slots,

packages/webawesome/docs/docs/resources/changelog.md

@@ -21,9 +21,10 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Added `wa-justify-content-*` utility classes [pr:1930]
 - Added missing `wa-gap-4xl` utility class [pr:1931]
 - Added `track` and `indicator` CSS parts to `<wa-progress-ring>` [pr:1863]
-- [Docs]: component APIs like slots, state, methods, etc, are now alphabetized [pr:]
-- [Docs]: component APIs now properly check their inheritance chain [pr:]
-- [Docs]: Included framework specific documentation for Svelte, Vue, and Angular. [pr:]
+- [Docs]: component APIs like slots, state, methods, etc, are now alphabetized [pr:1895]
+- [Docs]: component APIs now properly check their inheritance chain [pr:1895]
+- [Docs]: Included framework specific documentation for Svelte, Vue, and Angular. [pr:1895]
+- Fixed a bug in `<wa-dropdown>` where submenu detection would not work in shadow dom. [pr:]
 - Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
 - Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
 - Fixed a bug in `<wa-popup>` and `<wa-dropdown-item>` that caused an error when removing a popup while it was opening [issue:1910]
@@ -48,14 +49,15 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-icon>` that caused some icon libraries to render with the incorrect SVG fill [issue:1733]
 - Fixed a bug in `<wa-tree-item>` that caused the spinner to not show when lazy loading [issue:1678]
 - Fixed a bug in `<wa-dropdown>` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483]
+- Fixed a bug in `<wa-tab-group>` that ensures the active indicator always shows [issue:1206]
 - Fixed a bug in `<wa-dropdown-item>` that prevented the icon dependency from being imported [issue:1825]
 - Fixed a bug in `<wa-select>` that prevented clicks on the tag's remove button from removing options in multiple mode
 - Fixed a bug in `<wa-select>` that caused tags to appear in alphabetical order instead of selection order when using `multiple`
-- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
-- Improved `<wa-slider>` to not throw an error when string values are passed to the `min`, `max`, and `step` properties [issue:1823]
 - Fixed a bug in Web Awesome form controls that caused `<wa-input form="foo">` to set the form property to equal `"foo"` instead of returning an `HTMLFormElement` breaking platform expectations. [pr:1815]
 - Fixed a bug in `<wa-button>` causing it to not copy over attributes for form submissions. [pr:1815]
 - Fixed a bug where the build script was not building `/dist/(utilities|events).js` [pr:1816]
+- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
+- Improved `<wa-slider>` to not throw an error when string values are passed to the `min`, `max`, and `step` properties [issue:1823]
 - Improved performance of all components by fixing how CSS is imported and reused [issue:1812]
 - Modified the default `transition` styles of `<wa-dropdown-item>` to use design tokens [pr:1693]
 
@@ -541,4 +543,4 @@ Many of these changes and improvements were the direct result of feedback from u
 
 </details>
 
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)

packages/webawesome/scripts/docs.js

@@ -52,7 +52,8 @@ export async function createEleventy(options = {}) {
   eleventy.logger.overrideLogger(new CustomLogger());
 
   if (isIncremental) {
-    await eleventy.watch();
+    // For some reason, removing the await here fixes incremental loading?
+    eleventy.watch();
 
     process.on('SIGINT', async () => {
       await eleventy.stopWatch();

packages/webawesome/scripts/llms.js

@@ -16,6 +16,10 @@ function loadAllFrontMatter(components, docsDir) {
   const cache = new Map();
 
   for (const component of components) {
+    if (!component.tagName) {
+      continue;
+    }
+
     const componentName = component.tagName.replace(/^wa-/, '');
     const mdPath = path.join(docsDir, 'docs/components', `${componentName}.md`);
 
@@ -36,6 +40,11 @@ function loadAllFrontMatter(components, docsDir) {
 /** Generates the API reference section for a single component. */
 function generateComponentApiSection(component, frontMatterCache, baseUrl) {
   const lines = [];
+
+  if (!component.tagName) {
+    return lines;
+  }
+
   const frontMatter = frontMatterCache.get(component.tagName);
   const componentSlug = component.tagName.replace(/^wa-/, '');
   const description = removeNewlines(frontMatter?.description || component.summary || '');
@@ -144,6 +153,8 @@ function generateComponentApiSection(component, frontMatterCache, baseUrl) {
  * Generates the complete llms.txt content.
  */
 function generateLlmsTxt({ components, packageData, frontMatterCache, baseUrl }) {
+  // Account for base "abstract elements" that don't have a tagName.
+  components = components.filter(c => c.tagName);
   const lines = [];
 
   // H1 Title (required by llmstxt.org spec)
@@ -189,7 +200,7 @@ icon names.
   lines.push('## Components');
   lines.push('');
 
-  const sortedComponentsList = [...components].sort((a, b) => a.tagName.localeCompare(b.tagName));
+  const sortedComponentsList = components.filter(c => c.tagName).sort((a, b) => a.tagName.localeCompare(b.tagName));
 
   for (const component of sortedComponentsList) {
     const frontMatter = frontMatterCache.get(component.tagName);
@@ -214,7 +225,7 @@ icon names.
   lines.push('');
 
   // Sort components alphabetically by tag name for the API reference
-  const sortedComponents = [...components].sort((a, b) => a.tagName.localeCompare(b.tagName));
+  const sortedComponents = components.filter(c => c.tagName).sort((a, b) => a.tagName.localeCompare(b.tagName));
 
   for (const component of sortedComponents) {
     lines.push(...generateComponentApiSection(component, frontMatterCache, baseUrl));

packages/webawesome/scripts/make-react.js

@@ -22,7 +22,9 @@ const components = getAllComponents(metadata);
 const index = [];
 
 for await (const component of components) {
-  if (!component.tagName) { continue }
+  if (!component.tagName) {
+    continue;
+  }
   const tagWithoutPrefix = component.tagName.replace(/^wa-/, '');
   const componentDir = path.join(reactDir, tagWithoutPrefix);
   const componentFile = path.join(componentDir, 'index.ts');

packages/webawesome/src/components/dropdown/dropdown.ts

@@ -661,16 +661,22 @@ export default class WaDropdown extends WebAwesomeElement {
     currentSubmenuItem.submenuElement.style.setProperty('--safe-triangle-cursor-x', `${constrainedX}px`);
     currentSubmenuItem.submenuElement.style.setProperty('--safe-triangle-cursor-y', `${constrainedY}px`);
 
-    const isOverItem = currentSubmenuItem.matches(':hover');
+    // Calculate these up front since this event cant fire a lot.
+    const composedPath = event.composedPath();
+    const submenuItemHovered = currentSubmenuItem.matches(':hover');
+    const submenuElementHovered = Boolean(currentSubmenuItem.submenuElement?.matches(':hover'));
+
+    const isOverItem = submenuItemHovered || !!composedPath.find(el => el === currentSubmenuItem);
+
     const isOverSubmenu =
-      currentSubmenuItem.submenuElement?.matches(':hover') ||
-      !!event
-        .composedPath()
-        .find(el => el instanceof HTMLElement && el.closest('[part="submenu"]') === currentSubmenuItem.submenuElement);
+      submenuElementHovered ||
+      !!composedPath.find(
+        el => el instanceof HTMLElement && el.closest('[part="submenu"]') === currentSubmenuItem.submenuElement,
+      );
 
     if (!isOverItem && !isOverSubmenu) {
       setTimeout(() => {
-        if (!currentSubmenuItem.matches(':hover') && !currentSubmenuItem.submenuElement?.matches(':hover')) {
+        if (!submenuItemHovered && !submenuElementHovered) {
           currentSubmenuItem.submenuOpen = false;
         }
       }, 100);

packages/webawesome/src/components/tab-group/tab-group.styles.ts

@@ -6,6 +6,9 @@ export default css`
     --track-color: var(--wa-color-neutral-fill-normal);
     --track-width: 0.125rem;
 
+    /* Private */
+    --safe-track-width: max(0.5px, round(var(--track-width), 0.5px));
+
     display: block;
   }
 
@@ -51,8 +54,8 @@ export default css`
   }
 
   /*
-   * Top
-   */
+    * Top
+    */
 
   .tab-group-top {
     flex-direction: column;
@@ -80,12 +83,12 @@ export default css`
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-bottom: solid var(--track-width) var(--track-color);
+    border-bottom: solid var(--safe-track-width) var(--track-color);
   }
 
   .tab-group-top .indicator {
-    bottom: calc(-1 * var(--track-width));
-    border-bottom: solid var(--track-width) var(--indicator-color);
+    bottom: calc(-1 * var(--safe-track-width));
+    border-bottom: solid var(--safe-track-width) var(--indicator-color);
   }
 
   .tab-group-top .body {
@@ -93,8 +96,8 @@ export default css`
   }
 
   .tab-group-top ::slotted(wa-tab[active]) {
-    border-block-end: solid var(--track-width) var(--indicator-color);
-    margin-block-end: calc(-1 * var(--track-width));
+    border-block-end: solid var(--safe-track-width) var(--indicator-color);
+    margin-block-end: calc(-1 * var(--safe-track-width));
   }
 
   .tab-group-top ::slotted(wa-tab-panel) {
@@ -102,8 +105,8 @@ export default css`
   }
 
   /*
-   * Bottom
-   */
+    * Bottom
+    */
 
   .tab-group-bottom {
     flex-direction: column;
@@ -131,12 +134,12 @@ export default css`
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-top: solid var(--track-width) var(--track-color);
+    border-top: solid var(--safe-track-width) var(--track-color);
   }
 
   .tab-group-bottom .indicator {
-    top: calc(-1 * var(--track-width));
-    border-top: solid var(--track-width) var(--indicator-color);
+    top: calc(-1 * var(--safe-track-width));
+    border-top: solid var(--safe-track-width) var(--indicator-color);
   }
 
   .tab-group-bottom .body {
@@ -144,8 +147,8 @@ export default css`
   }
 
   .tab-group-bottom ::slotted(wa-tab[active]) {
-    border-block-start: solid var(--track-width) var(--indicator-color);
-    margin-block-start: calc(-1 * var(--track-width));
+    border-block-start: solid var(--safe-track-width) var(--indicator-color);
+    margin-block-start: calc(-1 * var(--safe-track-width));
   }
 
   .tab-group-bottom ::slotted(wa-tab-panel) {
@@ -153,8 +156,8 @@ export default css`
   }
 
   /*
-   * Start
-   */
+    * Start
+    */
 
   .tab-group-start {
     flex-direction: row;
@@ -167,12 +170,12 @@ export default css`
   .tab-group-start .tabs {
     flex: 0 0 auto;
     flex-direction: column;
-    border-inline-end: solid var(--track-width) var(--track-color);
+    border-inline-end: solid var(--safe-track-width) var(--track-color);
   }
 
   .tab-group-start .indicator {
-    inset-inline-end: calc(-1 * var(--track-width));
-    border-right: solid var(--track-width) var(--indicator-color);
+    inset-inline-end: calc(-1 * var(--safe-track-width));
+    border-right: solid var(--safe-track-width) var(--indicator-color);
   }
 
   .tab-group-start .body {
@@ -181,8 +184,8 @@ export default css`
   }
 
   .tab-group-start ::slotted(wa-tab[active]) {
-    border-inline-end: solid var(--track-width) var(--indicator-color);
-    margin-inline-end: calc(-1 * var(--track-width));
+    border-inline-end: solid var(--safe-track-width) var(--indicator-color);
+    margin-inline-end: calc(-1 * var(--safe-track-width));
   }
 
   .tab-group-start ::slotted(wa-tab-panel) {
@@ -190,8 +193,8 @@ export default css`
   }
 
   /*
-   * End
-   */
+    * End
+    */
 
   .tab-group-end {
     flex-direction: row;
@@ -204,12 +207,12 @@ export default css`
   .tab-group-end .tabs {
     flex: 0 0 auto;
     flex-direction: column;
-    border-left: solid var(--track-width) var(--track-color);
+    border-left: solid var(--safe-track-width) var(--track-color);
   }
 
   .tab-group-end .indicator {
-    inset-inline-start: calc(-1 * var(--track-width));
-    border-inline-start: solid var(--track-width) var(--indicator-color);
+    inset-inline-start: calc(-1 * var(--safe-track-width));
+    border-inline-start: solid var(--safe-track-width) var(--indicator-color);
   }
 
   .tab-group-end .body {
@@ -218,8 +221,8 @@ export default css`
   }
 
   .tab-group-end ::slotted(wa-tab[active]) {
-    border-inline-start: solid var(--track-width) var(--indicator-color);
-    margin-inline-start: calc(-1 * var(--track-width));
+    border-inline-start: solid var(--safe-track-width) var(--indicator-color);
+    margin-inline-start: calc(-1 * var(--safe-track-width));
   }
 
   .tab-group-end ::slotted(wa-tab-panel) {

packages/webawesome/web-test-runner.config.js

@@ -11,6 +11,10 @@ const metadata = JSON.parse(readFileSync('./dist/custom-elements.json'), 'utf8')
 const serverComponents = [];
 const componentImports = [];
 getAllComponents(metadata).forEach(component => {
+  if (!component.tagName) {
+    return;
+  }
+
   const name = component.tagName.replace(/^wa-/, '');
 
   serverComponents.push(`/dist/components/${name}/${name}.js`);