@abreen/tada 1.16.9 → 1.16.11

package/build/custom-fonts.ts

@@ -18,8 +18,8 @@ export const CUSTOM_FONT_FAMILY_DEFINITIONS = Object.freeze({
   }),
 });
 
-export type CustomFontFamilyKey = keyof typeof CUSTOM_FONT_FAMILY_DEFINITIONS;
-export type CustomFontFaceKey = keyof typeof CUSTOM_FONT_FACE_DEFINITIONS;
+type CustomFontFamilyKey = keyof typeof CUSTOM_FONT_FAMILY_DEFINITIONS;
+type CustomFontFaceKey = keyof typeof CUSTOM_FONT_FACE_DEFINITIONS;
 
 const FACE_KEYS = Object.freeze(
   Object.keys(CUSTOM_FONT_FACE_DEFINITIONS) as CustomFontFaceKey[],
@@ -32,7 +32,7 @@ interface ParsedFont {
   availableFeatures: readonly string[];
 }
 
-export interface CustomFontValidationOptions {
+interface CustomFontValidationOptions {
   fontOverrides: FontOverrides | undefined;
   publicDir: string;
   publicFiles: ReadonlySet<string>;

package/build/generate-fonts.ts

@@ -18,7 +18,7 @@ export const DEFAULT_FONT_PRELOAD_FILES = {
   ],
 } as const;
 
-export interface DefaultFontPreloadFile {
+interface DefaultFontPreloadFile {
   filePath: string;
   source: 'package' | 'public';
 }

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.9",
+  "version": "1.16.11",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",

package/src/appearance-picker/index.ts

@@ -1,5 +1,5 @@
-export type FontPreference = 'sans' | 'serif';
-export type ContrastPreference = 'standard' | 'high';
+type FontPreference = 'sans' | 'serif';
+type ContrastPreference = 'standard' | 'high';
 
 const FONT_STORAGE_KEY = 'fontPreference';
 const CONTRAST_STORAGE_KEY = 'contrastPreference';
@@ -25,9 +25,7 @@ function getFontPreferenceLoader(
   window: Window,
 ): FontPreferenceLoader | undefined {
   return (
-    window as Window & {
-      __tadaFontPreferenceLoader?: FontPreferenceLoader;
-    }
+    window as Window & { __tadaFontPreferenceLoader?: FontPreferenceLoader }
   ).__tadaFontPreferenceLoader;
 }
 
@@ -171,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(
@@ -193,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',
   );
 }
 
@@ -238,7 +242,9 @@ export default function mountAppearancePicker(window: Window): () => void {
 
   const observedRequests = new Set<number>();
   const observeFontRequest = (request: FontPreferenceRequest) => {
-    if (observedRequests.has(request.generation)) return;
+    if (observedRequests.has(request.generation)) {
+      return;
+    }
     observedRequests.add(request.generation);
     request.promise.then(
       () => {
@@ -266,26 +272,26 @@ export default function mountAppearancePicker(window: Window): () => void {
 
   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') {
+    if (button.dataset.fontPreferenceSwitch !== undefined) {
       fontPreference = getAppliedFontPreference(document);
-      if (fontValue === fontPreference) {
+      if (fontLoader?.pending) {
         fontLoader?.cancel();
         saveFontPreference(storage, fontPreference, defaultFontPreference);
-      } else {
-        const request = fontLoader?.request(fontValue) ?? null;
-        if (request) {
-          observeFontRequest(request);
-          return;
-        }
-        fontPreference = fontValue;
-        saveFontPreference(storage, fontPreference, defaultFontPreference);
-        applyFontPreference(document, fontPreference);
+        syncAppearance(document, fontPreference, contrastPreference);
+        return;
+      }
+      const nextFontPreference = fontPreference === 'serif' ? 'sans' : 'serif';
+      const request = fontLoader?.request(nextFontPreference) ?? null;
+      if (request) {
+        observeFontRequest(request);
+        return;
       }
-    } else if (contrastValue === 'standard' || contrastValue === 'high') {
-      contrastPreference = contrastValue;
+      fontPreference = nextFontPreference;
+      saveFontPreference(storage, fontPreference, defaultFontPreference);
+      applyFontPreference(document, fontPreference);
+    } 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 {
@@ -15,6 +16,7 @@ header {
   grid-template-columns: 1fr;
   width: 100%;
   background: var(--bg-color-translucent);
+  border-bottom: 1px solid var(--bg2-color);
   backdrop-filter: var(--backdrop-filter);
   view-transition-name: site-header;
 
@@ -35,6 +37,25 @@ header {
   background: var(--bg-color);
 }
 
+body > .container::before {
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  pointer-events: none;
+  content: '';
+  background: var(--bg-color-translucent);
+  opacity: 0;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 150ms ease-out;
+  }
+}
+
+body:has(header details[open]) > .container::before {
+  pointer-events: auto;
+  opacity: 1;
+}
+
 header > details {
   min-width: 0;
 }
@@ -75,21 +96,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

@@ -208,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>