@abreen/tada 1.16.8 → 1.16.10

package/build/material-symbols.ts

@@ -68,16 +68,6 @@ export const MATERIAL_SYMBOLS = Object.freeze({
     symbol: 'smart_display',
     opticalSize: 24,
   }),
-  headerMenu: Object.freeze({
-    cssVariable: '--icon-header-menu',
-    symbol: 'menu',
-    opticalSize: 24,
-  }),
-  headerClose: Object.freeze({
-    cssVariable: '--icon-header-close',
-    symbol: 'close',
-    opticalSize: 24,
-  }),
 } as const);
 
 type MaterialSymbol = (typeof MATERIAL_SYMBOLS)[keyof typeof MATERIAL_SYMBOLS];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.16.8",
+  "version": "1.16.10",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/src/appearance-picker/index.ts

@@ -4,6 +4,31 @@ export type ContrastPreference = 'standard' | 'high';
 const FONT_STORAGE_KEY = 'fontPreference';
 const CONTRAST_STORAGE_KEY = 'contrastPreference';
 
+interface FontPreferenceRequest {
+  generation: number;
+  preference: FontPreference;
+  promise: Promise<void>;
+}
+
+interface FontPreferenceLoader {
+  supported: boolean;
+  pending: FontPreferenceRequest | null;
+  failedPreference: FontPreference | null;
+  request(preference: FontPreference): FontPreferenceRequest | null;
+  isCurrent(request: FontPreferenceRequest): boolean;
+  complete(request: FontPreferenceRequest): void;
+  fail(request: FontPreferenceRequest): void;
+  cancel(): void;
+}
+
+function getFontPreferenceLoader(
+  window: Window,
+): FontPreferenceLoader | undefined {
+  return (
+    window as Window & { __tadaFontPreferenceLoader?: FontPreferenceLoader }
+  ).__tadaFontPreferenceLoader;
+}
+
 function getStorage(window: Window): Storage | null {
   try {
     return window.localStorage;
@@ -91,6 +116,12 @@ function getDefaultFontPreference(document: Document): FontPreference {
     : 'sans';
 }
 
+function getAppliedFontPreference(document: Document): FontPreference {
+  return document.documentElement.dataset.fontPreference === 'serif'
+    ? 'serif'
+    : 'sans';
+}
+
 function getDefaultContrastPreference(window: Window): ContrastPreference {
   const configured =
     window.document.documentElement.dataset.defaultContrastPreference === 'high'
@@ -138,21 +169,19 @@ export function applyContrastPreference(
   }
 }
 
-function syncControls(
+function syncSwitch(
   document: Document,
   selector: string,
-  preference: string,
+  checked: boolean,
+  title: string,
 ): void {
-  document.querySelectorAll<HTMLButtonElement>(selector).forEach(button => {
-    button.disabled = false;
-    button.setAttribute(
-      'aria-pressed',
-      String(
-        button.dataset.fontPreferenceValue === preference ||
-          button.dataset.contrastPreferenceValue === preference,
-      ),
-    );
-  });
+  const control = document.querySelector<HTMLButtonElement>(selector);
+  if (!control) {
+    return;
+  }
+  control.disabled = false;
+  control.setAttribute('aria-checked', String(checked));
+  control.title = title;
 }
 
 function syncAppearance(
@@ -160,11 +189,19 @@ function syncAppearance(
   fontPreference: FontPreference,
   contrastPreference: ContrastPreference,
 ): void {
-  syncControls(document, '[data-font-preference-value]', fontPreference);
-  syncControls(
+  syncSwitch(
     document,
-    '[data-contrast-preference-value]',
-    contrastPreference,
+    '[data-font-preference-switch]',
+    fontPreference === 'serif',
+    fontPreference === 'serif' ? 'Use sans-serif fonts' : 'Use serif fonts',
+  );
+  syncSwitch(
+    document,
+    '[data-contrast-preference-switch]',
+    contrastPreference === 'high',
+    contrastPreference === 'high'
+      ? 'Use standard contrast'
+      : 'Use high contrast',
   );
 }
 
@@ -179,29 +216,82 @@ export default function mountAppearancePicker(window: Window): () => void {
     container.querySelectorAll<HTMLButtonElement>('button'),
   );
   const storage = getStorage(window);
+  const fontLoader = getFontPreferenceLoader(window);
   const defaultFontPreference = getDefaultFontPreference(document);
   const defaultContrastPreference = getDefaultContrastPreference(window);
-  let fontPreference = getFontPreference(storage, defaultFontPreference);
+  const requestedFontPreference = getFontPreference(
+    storage,
+    defaultFontPreference,
+  );
+  let fontPreference = getAppliedFontPreference(document);
   let contrastPreference = getContrastPreference(
     storage,
     defaultContrastPreference,
   );
 
-  applyFontPreference(document, fontPreference);
+  const requestedFontIsWaiting =
+    (fontLoader?.pending?.preference === requestedFontPreference ||
+      fontLoader?.failedPreference === requestedFontPreference) ??
+    false;
+  if (!requestedFontIsWaiting) {
+    fontPreference = requestedFontPreference;
+    applyFontPreference(document, fontPreference);
+  }
   applyContrastPreference(document, contrastPreference);
   syncAppearance(document, fontPreference, contrastPreference);
 
+  const observedRequests = new Set<number>();
+  const observeFontRequest = (request: FontPreferenceRequest) => {
+    if (observedRequests.has(request.generation)) {
+      return;
+    }
+    observedRequests.add(request.generation);
+    request.promise.then(
+      () => {
+        if (fontLoader?.isCurrent(request)) {
+          fontPreference = request.preference;
+          saveFontPreference(storage, fontPreference, defaultFontPreference);
+          applyFontPreference(document, fontPreference);
+          fontLoader.complete(request);
+        } else {
+          fontPreference = getAppliedFontPreference(document);
+        }
+        syncAppearance(document, fontPreference, contrastPreference);
+      },
+      () => {
+        fontLoader?.fail(request);
+        fontPreference = getAppliedFontPreference(document);
+        syncAppearance(document, fontPreference, contrastPreference);
+      },
+    );
+  };
+
+  if (fontLoader?.pending) {
+    observeFontRequest(fontLoader.pending);
+  }
+
   const handleClick = (event: Event) => {
     const button = event.currentTarget as HTMLButtonElement;
-    const fontValue = button.dataset.fontPreferenceValue;
-    const contrastValue = button.dataset.contrastPreferenceValue;
 
-    if (fontValue === 'sans' || fontValue === 'serif') {
-      fontPreference = fontValue;
+    if (button.dataset.fontPreferenceSwitch !== undefined) {
+      fontPreference = getAppliedFontPreference(document);
+      if (fontLoader?.pending) {
+        fontLoader?.cancel();
+        saveFontPreference(storage, fontPreference, defaultFontPreference);
+        syncAppearance(document, fontPreference, contrastPreference);
+        return;
+      }
+      const nextFontPreference = fontPreference === 'serif' ? 'sans' : 'serif';
+      const request = fontLoader?.request(nextFontPreference) ?? null;
+      if (request) {
+        observeFontRequest(request);
+        return;
+      }
+      fontPreference = nextFontPreference;
       saveFontPreference(storage, fontPreference, defaultFontPreference);
       applyFontPreference(document, fontPreference);
-    } else if (contrastValue === 'standard' || contrastValue === 'high') {
-      contrastPreference = contrastValue;
+    } else if (button.dataset.contrastPreferenceSwitch !== undefined) {
+      contrastPreference = contrastPreference === 'high' ? 'standard' : 'high';
       saveContrastPreference(
         storage,
         contrastPreference,

package/src/appearance-picker/style.scss

@@ -21,6 +21,7 @@
   width: fit-content;
   padding: var(--preference-picker-padding);
   background: var(--bg2-color);
+  border: 0;
   border-radius: calc(var(--border-radius) + 4px);
 }
 
@@ -46,15 +47,15 @@
   transform: translateX(calc(100% + var(--preference-picker-gap)));
 }
 
-.preference-picker:has(
-    .preference-picker-option[aria-pressed='true']:is(:hover, :focus)
-  )::before {
+.preference-picker:is(:hover, :focus)::before {
   background: var(--bg2-color);
 }
 
-.preference-picker:has(
-    .preference-picker-option[aria-pressed='true']:active:not(:disabled)
-  )::before {
+.preference-picker:active:not(:disabled) {
+  background: var(--bg2-color) !important;
+}
+
+.preference-picker:active:not(:disabled)::before {
   background: var(--link-active-color);
 }
 
@@ -65,9 +66,8 @@
   align-items: center;
   justify-content: center;
   width: var(--preference-picker-option-width);
-  height: 2rem;
+  height: 1.8rem;
   padding: 0;
-  font-size: var(--font-size-smaller);
   color: var(--fg2-color);
   background: transparent;
   border: 0;
@@ -100,17 +100,22 @@
   font-size-adjust: var(--font-size-adjust);
 }
 
-.preference-picker-option[aria-pressed='true'] {
+:root:not([data-font-preference='serif']) .font-picker-option-sans,
+:root[data-font-preference='serif'] .font-picker-option-serif,
+:root:not([data-contrast-preference='high']) .contrast-picker-option-standard,
+:root[data-contrast-preference='high'] .contrast-picker-option-high {
   color: var(--fg-color);
-  background: transparent;
 }
 
-.preference-picker-option[aria-pressed='true']:is(:hover, :focus) {
-  background: transparent;
-}
-
-.preference-picker-option[aria-pressed='true']:active:not(:disabled) {
-  background: transparent !important;
+.preference-picker:active:not(:disabled) {
+  :root:not([data-font-preference='serif']) & .font-picker-option-sans,
+  :root[data-font-preference='serif'] & .font-picker-option-serif,
+  :root:not([data-contrast-preference='high'])
+    &
+    .contrast-picker-option-standard,
+  :root[data-contrast-preference='high'] & .contrast-picker-option-high {
+    color: var(--bg-color);
+  }
 }
 
 @media print {

package/src/header/README.md

@@ -1,8 +1,10 @@
 # The `header` component
 
-Use the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
-to animate the `<details>` element in the header.
+CSS morphs the header's three-stroke inline SVG between menu and close states
+and, where supported, animates its `<details>` content. The component's
+JavaScript adds dismissal behavior for outside clicks, focus leaving the menu,
+and the Escape key.
 
 This component doesn't provide any other functionality related to the header.
 If JavaScript is turned off in the web browser, the `<details>` element is still
-functional but with no animation.
+functional and its disclosure content opens immediately.

package/src/header/_base.scss

@@ -2,6 +2,7 @@
 
 :root {
   --header-collapsed-height: 45px;
+  --header-menu-icon-size: 24px;
 }
 
 header {
@@ -75,21 +76,77 @@ header details summary::marker {
   content: '';
 }
 
-header summary::after {
-  flex: 0 0 var(--icon-header-menu-size);
+header summary .menu-icon {
+  flex: 0 0 var(--header-menu-icon-size);
   order: -1;
-  width: var(--icon-header-menu-size);
-  height: var(--icon-header-menu-size);
+  width: var(--header-menu-icon-size);
+  height: var(--header-menu-icon-size);
   margin-right: 8px;
   margin-left: var(--gap);
-  content: '';
+  overflow: visible;
+  pointer-events: none;
+}
+
+header summary .menu-icon-line {
+  transform-origin: center;
+  transform-box: fill-box;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  header summary .menu-icon-line {
+    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  header summary .menu-icon-line-middle {
+    transition:
+      opacity 150ms ease-out,
+      transform 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+}
+
+header details[open] summary .menu-icon-line-top {
+  transform: translateY(6px) rotate(45deg);
+}
+
+header details[open] summary .menu-icon-line-middle {
+  opacity: 0;
+  transform: scaleX(0.8);
+}
 
-  @include contained-mask(var(--icon-header-menu));
+header details[open] summary .menu-icon-line-bottom {
+  transform: translateY(-6px) rotate(-45deg);
 }
 
-header details[open] summary::after {
-  -webkit-mask-image: var(--icon-header-close);
-  mask-image: var(--icon-header-close);
+@supports selector(details::details-content) and
+  (transition-behavior: allow-discrete) {
+  @media (prefers-reduced-motion: no-preference) {
+    :root.js header > details {
+      display: grid;
+      grid-template-rows: var(--header-collapsed-height) 0fr;
+      grid-template-columns: minmax(0, 1fr);
+      transition: grid-template-rows 200ms cubic-bezier(0.2, 0, 0, 1);
+    }
+
+    :root.js header > details[open] {
+      grid-template-rows: var(--header-collapsed-height) 1fr;
+    }
+
+    :root.js header > details::details-content {
+      min-block-size: 0;
+      overflow: clip;
+      opacity: 0;
+      transform: translateY(-4px);
+      transition:
+        content-visibility 200ms allow-discrete,
+        opacity 150ms ease-out,
+        transform 200ms cubic-bezier(0.2, 0, 0, 1);
+    }
+
+    :root.js header > details[open]::details-content {
+      opacity: 1;
+      transform: none;
+    }
+  }
 }
 
 header .content {

package/src/search/style.scss

@@ -14,6 +14,11 @@ header {
   .results-container.is-showing .results {
     pointer-events: all;
     opacity: 1;
+    transform: none;
+  }
+
+  &.loading .results {
+    transition: none;
   }
 
   @media (hover: hover) {
@@ -37,6 +42,14 @@ header {
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
     opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+    transform-origin: top center;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition:
+        opacity 150ms ease-out,
+        transform 200ms cubic-bezier(0.2, 0, 0, 1);
+    }
 
     @include user-select(none);
 

package/templates/_appearance-picker.html

@@ -1,20 +1,16 @@
 <% if (site.features.pickers) { %>
 <div class="appearance-pickers" data-pagefind-ignore>
-  <div class="preference-picker font-picker" role="group" aria-label="Font style">
-    <button type="button" class="preference-picker-option font-picker-option-sans" data-font-preference-value="sans" aria-label="Use sans-serif fonts" aria-pressed="<%= site.defaultFont === 'sans' %>" disabled>
-      <span aria-hidden="true">Aa</span>
-    </button>
-    <button type="button" class="preference-picker-option font-picker-option-serif" data-font-preference-value="serif" aria-label="Use serif fonts" aria-pressed="<%= site.defaultFont === 'serif' %>" disabled>
-      <span aria-hidden="true">Aa</span>
-    </button>
-  </div>
-  <div class="preference-picker contrast-picker" role="group" aria-label="Contrast">
-    <button type="button" class="preference-picker-option contrast-picker-option-standard" data-contrast-preference-value="standard" aria-label="Use standard contrast" aria-pressed="<%= site.defaultContrast === 'standard' %>" disabled>
-      <span class="material-symbol-icon material-symbol-icon-contrast-standard" aria-hidden="true"></span>
-    </button>
-    <button type="button" class="preference-picker-option contrast-picker-option-high" data-contrast-preference-value="high" aria-label="Use high contrast" aria-pressed="<%= site.defaultContrast === 'high' %>" disabled>
-      <span class="material-symbol-icon material-symbol-icon-contrast-high" aria-hidden="true"></span>
-    </button>
-  </div>
+  <button type="button" class="preference-picker font-picker" role="switch" data-font-preference-switch aria-label="Use serif fonts" aria-checked="<%= site.defaultFont === 'serif' %>" title="<%= site.defaultFont === 'serif' ? 'Use sans-serif fonts' : 'Use serif fonts' %>" disabled>
+    <span class="preference-picker-option font-picker-option-sans" data-font-preference-value="sans" aria-hidden="true">Aa</span>
+    <span class="preference-picker-option font-picker-option-serif" data-font-preference-value="serif" aria-hidden="true">Aa</span>
+  </button>
+  <button type="button" class="preference-picker contrast-picker" role="switch" data-contrast-preference-switch aria-label="Use high contrast" aria-checked="<%= site.defaultContrast === 'high' %>" title="<%= site.defaultContrast === 'high' ? 'Use standard contrast' : 'Use high contrast' %>" disabled>
+    <span class="preference-picker-option contrast-picker-option-standard" data-contrast-preference-value="standard" aria-hidden="true">
+      <span class="material-symbol-icon material-symbol-icon-contrast-standard"></span>
+    </span>
+    <span class="preference-picker-option contrast-picker-option-high" data-contrast-preference-value="high" aria-hidden="true">
+      <span class="material-symbol-icon material-symbol-icon-contrast-high"></span>
+    </span>
+  </button>
 </div>
 <% } %>

package/templates/_top.html

@@ -38,7 +38,70 @@
     <% } %>
     <title><%= page.title %><%= site.titlePostfix %></title>
     <script>
+      (() => {
       document.documentElement.classList.add('js');
+      const fontPreferenceFamilies = {
+        sans: ['Inter', 'Google Sans Code'],
+        serif: [
+          '<%= site.fontOverrides?.serif ? 'Tada Custom Serif' : 'Source Serif 4' %>',
+          '<%= site.fontOverrides?.serifMono ? 'Tada Custom Serif Mono' : 'Libertinus Mono' %>',
+        ],
+      };
+      const fontPreferenceLoader = {
+        generation: 0,
+        pending: null,
+        failedPreference: null,
+        supported:
+          document.fonts && typeof document.fonts.load === 'function',
+        request(preference) {
+          if (!this.supported) return null;
+          if (this.pending?.preference === preference) return this.pending;
+
+          const generation = ++this.generation;
+          const [bodyFamily, monoFamily] = fontPreferenceFamilies[preference];
+          const promise = Promise.all([
+            document.fonts.load('normal 400 1em "' + bodyFamily + '"'),
+            document.fonts.load('normal 700 1em "' + bodyFamily + '"'),
+            document.fonts.load('normal 400 1em "' + monoFamily + '"'),
+          ]).then(matches => {
+            if (matches.some(faces => faces.length === 0)) {
+              throw new Error('A required font face did not load');
+            }
+          });
+          const request = { generation, preference, promise };
+          this.pending = request;
+          this.failedPreference = null;
+          return request;
+        },
+        isCurrent(request) {
+          return (
+            this.pending === request &&
+            this.generation === request.generation
+          );
+        },
+        complete(request) {
+          if (this.isCurrent(request)) this.pending = null;
+        },
+        fail(request) {
+          if (!this.isCurrent(request)) return;
+          this.pending = null;
+          this.failedPreference = request.preference;
+        },
+        cancel() {
+          ++this.generation;
+          this.pending = null;
+          this.failedPreference = null;
+        },
+      };
+      window.__tadaFontPreferenceLoader = fontPreferenceLoader;
+
+      const applyFontPreference = preference => {
+        if (preference === 'serif') {
+          document.documentElement.dataset.fontPreference = 'serif';
+        } else {
+          delete document.documentElement.dataset.fontPreference;
+        }
+      };
       try {
         const preference = window.localStorage.getItem('fontPreference');
         const configured =
@@ -47,10 +110,27 @@
           (preference === 'serif' || preference === 'sans') &&
           preference !== configured
         ) {
-          if (preference === 'serif') {
-            document.documentElement.dataset.fontPreference = 'serif';
+          const request = fontPreferenceLoader.request(preference);
+          if (!request) {
+            applyFontPreference(preference);
           } else {
-            delete document.documentElement.dataset.fontPreference;
+            request.promise.then(
+              () => {
+                let storedPreference;
+                try {
+                  storedPreference =
+                    window.localStorage.getItem('fontPreference');
+                } catch {}
+                if (
+                  fontPreferenceLoader.isCurrent(request) &&
+                  storedPreference === preference
+                ) {
+                  applyFontPreference(preference);
+                  fontPreferenceLoader.complete(request);
+                }
+              },
+              () => fontPreferenceLoader.fail(request),
+            );
           }
         }
       } catch {}
@@ -81,6 +161,7 @@
       } else {
         delete document.documentElement.dataset.contrastPreference;
       }
+      })();
     </script>
     <% if (!isWatchMode) { %>
     <script type="speculationrules">
@@ -127,6 +208,12 @@
       </div>
       <details>
         <summary aria-label="Toggle site navigation">
+          <svg class="menu-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"
+               fill="none" stroke="currentColor" stroke-width="1.65" stroke-linecap="round">
+            <path class="menu-icon-line menu-icon-line-top" d="M3 6h18" />
+            <path class="menu-icon-line menu-icon-line-middle" d="M3 12h18" />
+            <path class="menu-icon-line menu-icon-line-bottom" d="M3 18h18" />
+          </svg>
           <% if (site.symbol) { %><span class="logo" aria-hidden="true"><%= site.symbol %></span><% } %>
           <span class="site-title" aria-hidden="true"><%= site.title %></span>
         </summary>

package/assets/material-symbols/close_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M252-203.69 205.69-252l227-228-227-230L252-758.31l229 230 227-230L754.31-710l-227 230 227 228L708-203.69l-227-230-229 230Z"/></svg>

package/assets/material-symbols/menu_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M128-251.23v-66h704v66H128ZM128-448v-66h704v66H128Zm0-196.77v-66h704v66H128Z"/></svg>