fix incremental builds (#1961)

* fix incremental builds

* prettier

packages/webawesome/docs/_includes/base.njk

@@ -41,72 +41,82 @@
         {% endif %}
       {% endfor %}
     >
-        {% block pageBanner %}
+      {# wa-page-based Skip to Content #}
-          {% if hasBanner %}
+      {% block pageSkipToContent %}{% endblock %}
-            {#- WA Launch Banner -#}
-            {% include "_banner-wa-launch.njk" ignore missing %}
-          {% endif %}
-        {% endblock %}
 
-        {% block pageHeader %}
+      {# wa-page-based Banner #}
-          <header slot="header" class="wa-split">
+      {% block pageBanner %}
-            {# Nav toggle #}
+        {% if hasBanner %}
-              <wa-button appearance="plain" size="small" data-toggle-nav>
+          {#- WA Launch Banner -#}
-                <wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
+          {% include "_banner-wa-launch.njk" ignore missing %}
-                <wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
+        {% endif %}
-              </wa-button>
+      {% endblock %}
 
-              {# Logo - Desktop #}
+      {# wa-page-based Subheader #}
-              <a class="brand-logo wa-desktop-only" href="/" aria-label="Web Awesome">
+      {% block pageSubheader %}{% endblock %}
-                {% include "logo.njk" %}
-              </a>
 
-            {#- Logo - mobile branding -#}
+      {# wa-page-based Header #}
-            <a href="/" class="brand-logo wa-mobile-only" aria-label="Web Awesome">
+      {% block pageHeader %}
-              {# Logo - Mobile #}
+        <header slot="header" class="wa-split">
-              {% include "logo-simple.njk" %}
+          {# Nav toggle #}
-            </a>
+          <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">
+          {# Logo - Desktop #}
-              <div class="wa-desktop-only wa-cluster wa-gap-2xs">
+          <a href="/" class="brand-logo wa-desktop-only" aria-label="Web Awesome">{% include "logo.njk" %}</a>
-                {% 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 %}
 
-      {# Sidebar #}
+          {# Logo - Mobile #}
-      {% if hasSidebar %}
+          <a href="/" class="brand-logo wa-mobile-only" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
-        {# Mobile selectors #}
+
-        <div class="wa-mobile-only" slot="navigation-header">
+          <div id="docs-toolbar" class="wa-cluster gap-s">
-          <div class="wa-cluster wa-gap-s">
+            <div class="wa-desktop-only wa-cluster wa-gap-2xs">
-            <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>
+
+            {#- Login -#}
+            {% include "login-or-avatar.njk" ignore missing %}
           </div>
-        </div>
+        </header>
-        <div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
+      {% endblock %}
-          {% include "sidebar.njk" %}
-        </div>
-      {% endif %}
 
-      {# Outline #}
+      {# wa-page-based Navigation Header #}
-      {% if hasOutline %}
+      {% block pageNavigationHeader %}
-        <aside slot="aside" id="outline" class="docs-aside">
+        {# Sidebar - Mobile Selectors #}
-          <nav id="outline-standard" class="outline-links">
+        {% if hasSidebar %}
-            <h2><a href="#content">{{ title }}</a></h2>
+          <div class="wa-mobile-only" slot="navigation-header">
-          </nav>
+            <div class="wa-cluster wa-gap-s">
-        </aside>
+              <a class="brand-logo" href="/" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
-      {% endif %}
+              <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/docs/resources/changelog.md

@@ -49,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]
 

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

@@ -200,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);
@@ -225,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/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));
+    bottom: calc(-1 * var(--safe-track-width));
-    border-bottom: solid var(--track-width) var(--indicator-color);
+    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);
+    border-block-end: solid var(--safe-track-width) var(--indicator-color);
-    margin-block-end: calc(-1 * var(--track-width));
+    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));
+    top: calc(-1 * var(--safe-track-width));
-    border-top: solid var(--track-width) var(--indicator-color);
+    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);
+    border-block-start: solid var(--safe-track-width) var(--indicator-color);
-    margin-block-start: calc(-1 * var(--track-width));
+    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));
+    inset-inline-end: calc(-1 * var(--safe-track-width));
-    border-right: solid var(--track-width) var(--indicator-color);
+    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);
+    border-inline-end: solid var(--safe-track-width) var(--indicator-color);
-    margin-inline-end: calc(-1 * var(--track-width));
+    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));
+    inset-inline-start: calc(-1 * var(--safe-track-width));
-    border-inline-start: solid var(--track-width) var(--indicator-color);
+    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);
+    border-inline-start: solid var(--safe-track-width) var(--indicator-color);
-    margin-inline-start: calc(-1 * var(--track-width));
+    margin-inline-start: calc(-1 * var(--safe-track-width));
   }
 
   .tab-group-end ::slotted(wa-tab-panel) {