Merge branch 'next' into page-docs

docs/.eleventy.js

@@ -146,6 +146,7 @@ export default function (eleventyConfig) {
   // }
 
   return {
+    markdownTemplateEngine: 'njk',
     dir: {
       includes: '_includes',
       layouts: '_layouts'

docs/_includes/base.njk

@@ -76,7 +76,7 @@
         {# Logo #}
         <div id="docs-branding">
           {# Nav toggle #}
-          <wa-button appearance="text" data-toggle-nav>
+          <wa-button appearance="text" size="small" data-toggle-nav>
             <wa-icon name="bars" label="Toggle navigation"></wa-icon>
           </wa-button>
           <a href="/" aria-label="Web Awesome">

docs/_includes/sidebar.njk

@@ -233,7 +233,6 @@
 
 {# Layout #}
 {% if not isAlpha %}
-<h2>Layout</h2>
 <h2>
   <a href="/docs/layout" title="Overview">Layout
     <wa-icon name="grid-2"></wa-icon>
@@ -273,11 +272,12 @@
 {% endif %}
 
 {# Theming #}
-<h2>Theming</h2>
+<h2>
+  <a href="/docs/theming" title="Overview">Theming
+    <wa-icon name="grid-2"></wa-icon>
+  </a>
+</h2>
 <ul>
-  <li>
-    <a href="/docs/theming/">Theming Overview</a>
-  </li>
   <li>
     <a href="/docs/theming/color">Color</a>
   </li>

docs/_includes/svgs/page.njk

@@ -0,0 +1,9 @@
+<svg width="96" height="80" viewBox="0 0 96 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="1" y="13" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="1" y="73" width="94" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="25" y="61" width="46" height="6" rx="3" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="25" y="25" width="46" height="30" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="1" y="25" width="18" height="42" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+<rect x="77" y="25" width="18" height="42" rx="5" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
+</svg>

docs/assets/styles/docs.css

@@ -38,9 +38,7 @@ wa-page > header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 4rem;
-  padding-inline-start: var(--wa-space-m);
-  padding-inline-end: var(--wa-space-s);
+  padding-inline: var(--wa-space-xl);
 
   a[href='/'] {
     color: var(--wa-color-text-normal);
@@ -49,6 +47,7 @@ wa-page > header {
 
   wa-button[data-toggle-nav] {
     --label-color: currentColor;
+    font-size: 1rem;
     margin-inline-start: -0.875rem;
     margin-inline-end: 0;
 
@@ -96,11 +95,10 @@ wa-page > header {
 #outline {
   h2 {
     font-size: var(--wa-font-size-m);
-    margin-block-end: var(--wa-space-m);
-
-    &:not(:first-of-type) {
-      margin-block-start: var(--wa-space-xl);
-    }
+    margin: 0;
+  }
+  h2:not(:first-child) {
+    margin-block-start: var(--wa-space-xs);
   }
   ul {
     border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
@@ -114,7 +112,9 @@ wa-page > header {
   }
   li {
     list-style: none;
-    margin-block-end: var(--wa-space-m);
+  }
+  li + li {
+    margin-block-start: var(--wa-space-m);
   }
   li a {
     color: var(--wa-color-text-normal);

docs/docs/components/index.md

@@ -315,13 +315,21 @@ layout: page-outline
     </wa-card>
   </a>
   <a href="/docs/components/drawer">
-    <wa-card id="drawer-card">
+    <wa-card with-header id="drawer-card">
       <div slot="header">
         {% include "svgs/drawer.njk" %}
       </div>
       <span class="page-name">Drawer</span>
     </wa-card>
   </a>
+  <a href="/docs/components/page">
+    <wa-card with-header>
+      <div slot="header">
+        {% include "svgs/page.njk" %}
+      </div>
+      <span class="page-name">Page</span>
+    </wa-card>
+  </a>
   <a href="/docs/components/split-panel">
     <wa-card with-header>
       <div slot="header">

docs/docs/theming/color.md

@@ -65,7 +65,7 @@ Lightness values on this scale have a strong correlation to [relative luminance]
 - A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
 - A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
 
-Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{name}-{#}`.
+Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
 
 <div class="color-name">Red</div>
 <ul class="color-group">
@@ -549,4 +549,4 @@ Finally, each color is named according to how much attention it draws. Here, we
 
     swatch.appendChild(copyButton)
   })
-</script>
+</script>

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

@@ -109,4 +109,14 @@ export default css`
       opacity: 80%;
     }
   }
+
+  [part~='zoom-in'],
+  [part~='zoom-in']::part(base) {
+    cursor: zoom-in;
+  }
+
+  [part~='zoom-out'],
+  [part~='zoom-out']::part(base) {
+    cursor: zoom-out;
+  }
 `;

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

@@ -291,9 +291,13 @@ export default class WaViewportDemo extends WebAwesomeElement {
         <span part="controls">
           ${dimensions}
           <span class="zoom">
-            <wa-icon-button name="square-minus" variant="regular" @click=${() => this.zoomOut()}>-</wa-icon-button>
+            <wa-icon-button name="square-minus" variant="regular" @click=${() => this.zoomOut()} part="zoom-out button"
+              >-</wa-icon-button
+            >
             <span class="zoom-level"> ${Math.round(this.computedZoom * 100)}%</span>
-            <wa-icon-button name="square-plus" variant="regular" @click=${() => this.zoomIn()}>+</wa-icon-button>
+            <wa-icon-button name="square-plus" variant="regular" @click=${() => this.zoomIn()} part="zoom-in button"
+              >+</wa-icon-button
+            >
           </span>
         </span>
         <slot @slotchange=${this.handleSlotChange}></slot>

src/themes/applied.css

@@ -43,15 +43,23 @@ body {
   -webkit-text-size-adjust: none;
 }
 
-/* Show custom elements only after they're registered */
-:where(:not(:defined, [did-ssr])),
-:where(:not(:defined, [did-ssr])) * {
-  opacity: 0;
+@keyframes wa-fade-in {
+  from {
+    opacity: 0;
+  }
 }
 
-:where(:defined) {
-  opacity: 1;
-  transition: 0.1s opacity;
+/* Show custom elements only after they're registered */
+:where(:not(:defined, [did-ssr])) {
+  &,
+  & * {
+    /*
+     * if an element gets defined earlier than 400ms, the animation stops applying so it just appears (no fade)
+     * If it takes somewhere between 400 and 600 ms, then you may get an interrupted fade, but oh well
+     * If an element takes longer than 600ms to get defined, it fades in over 200ms
+     */
+    animation: 200ms 400ms wa-fade-in both;
+  }
 }
 
 /* Content flow */