@abreen/tada 1.17.0 → 1.18.0

package/src/slides/{style.scss → _index.scss}

@@ -93,6 +93,7 @@ body.is-presenting [data-slides-annotation-layer] {
 body.is-presenting header,
 body.is-presenting .title-and-info,
 body.is-presenting nav.toc,
+body.is-presenting .page-bottom,
 body.is-presenting footer,
 body.is-presenting .appearance-pickers,
 body.is-presenting .slides-header,
@@ -177,3 +178,7 @@ body.is-presenting .slide:has(> .trace-widget) > .trace-widget > .trace-body {
   height: 100%;
   min-height: 0;
 }
+
+body.is-presenting > .container {
+  min-height: 0;
+}

package/src/style.scss

@@ -1,540 +1,28 @@
-@use 'mixins' as *;
+// The only Sass entry point, imported by src/index.ts and compiled once per
+// build into index.bundle.*.css. Every other Sass file is a partial loaded
+// here: shared partials live in src/, component styles in
+// src/<component>/_index.scss. Modules are emitted in this order, so later
+// rules win specificity ties.
+
+// Theme custom properties, generated from the site config at build time
 @use 'config/theme';
 @use 'base';
 @use 'layout';
 @use 'alerts';
-@include theme.custom-font-faces;
-@include theme.custom-font-tuning;
-
-@font-face {
-  font-family: Inter;
-  font-style: normal;
-  font-weight: 100 900;
-  src: url('inter/InterVariable.woff2') format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: Inter;
-  font-style: italic;
-  font-weight: 100 900;
-  src: url('inter/InterVariable-Italic.woff2') format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Google Sans Code';
-  font-style: normal;
-  font-weight: 300 800;
-  src: url('google-sans-code/GoogleSansCodeVariable.woff2') format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Google Sans Code';
-  font-style: italic;
-  font-weight: 300 800;
-  src: url('google-sans-code/GoogleSansCodeVariable-Italic.woff2')
-    format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Source Serif 4';
-  font-style: normal;
-  font-weight: 200 900;
-  src: url('source-serif-4/SourceSerif4-VariableFont_opsz,wght.woff2')
-    format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Source Serif 4';
-  font-style: italic;
-  font-weight: 200 900;
-  src: url('source-serif-4/SourceSerif4-Italic-VariableFont_opsz,wght.woff2')
-    format('woff2');
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Courier Prime';
-  font-style: normal;
-  font-weight: 400;
-  src: url('courier-prime/CourierPrime-Regular.woff2') format('woff2');
-  font-display: swap;
-  size-adjust: 106.383%;
-}
-
-@font-face {
-  font-family: 'Courier Prime';
-  font-style: italic;
-  font-weight: 400;
-  src: url('courier-prime/CourierPrime-Italic.woff2') format('woff2');
-  font-display: swap;
-  size-adjust: 106.383%;
-}
-
-@font-face {
-  font-family: 'Courier Prime';
-  font-style: normal;
-  font-weight: 700;
-  src: url('courier-prime/CourierPrime-Bold.woff2') format('woff2');
-  font-display: swap;
-  size-adjust: 106.383%;
-}
-
-@font-face {
-  font-family: 'Courier Prime';
-  font-style: italic;
-  font-weight: 700;
-  src: url('courier-prime/CourierPrime-BoldItalic.woff2') format('woff2');
-  font-display: swap;
-  size-adjust: 106.383%;
-}
-
-::selection {
-  color: var(--bg-color);
-  background: var(--fg-color);
-}
-
-:focus-visible {
-  outline: 2px solid var(--theme-color);
-  outline-offset: 1px;
-}
-
-a.disabled {
-  color: var(--fg-color-translucent);
-  text-decoration-color: var(--fg-color-translucent);
-  cursor: not-allowed;
-
-  @media (hover: hover) {
-    &:hover {
-      color: var(--fg-color-translucent);
-      text-decoration-line: none;
-    }
-  }
-}
-
-.external-link-tail {
-  white-space: nowrap;
-}
-
-.external-link-tail::after,
-a.external:not(:has(.external-link-tail))::after {
-  vertical-align: text-top;
-
-  @include contained-mask(var(--icon-external-link));
-}
-
-.external-link-tail::after {
-  display: inline;
-
-  // With zero font metrics, block-end padding paints down from text-top.
-  padding-block-end: var(--icon-external-link-size);
-  padding-inline-start: var(--icon-external-link-size);
-  font-size: 0;
-  line-height: 0;
-  content: '\2060' / '';
-}
-
-a.external:not(:has(.external-link-tail))::after {
-  display: inline-block;
-  width: var(--icon-external-link-size);
-  height: var(--icon-external-link-size);
-  content: '';
-}
-
-.footnotes {
-  padding-top: 32px;
-  margin-top: calc(var(--thematic-break-margin) / 2);
-  font-size: 0.9em;
-  border-top: 3px solid var(--bg2-color);
-}
-
-.footnotes .title {
-  @include user-select(none);
-
-  font-size: larger;
-  font-weight: 700;
-}
-
-.footnotes p {
-  margin: 0;
-}
-
-.footnotes li {
-  margin-bottom: 8px;
-}
-
-a.footnote-ref {
-  font-size: 0.8em;
-  vertical-align: super;
-  border-bottom: none;
-}
-
-.footnote-item {
-  &:target {
-    outline: 2px solid var(--theme-color);
-    outline-offset: 1px;
-  }
-}
-
-a.footnote-ref,
-.footnotes .footnote-backref {
-  display: inline-block;
-
-  @include user-select(none);
-}
-
-hr {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  margin: var(--section-padding) 0;
-  border: none;
-}
-
-hr::after {
-  display: block;
-  width: 160px;
-  height: 12px;
-  content: '';
-  background-color: var(--fg2-color);
-  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'><rect x='0' y='5.5' width='96' height='1' fill='black'/><path d='M 64,6 C 71,6 80,4.5 80,1 C 80,4.5 89,6 96,6 C 89,6 80,7.5 80,11 C 80,7.5 71,6 64,6 Z' fill='black'/><rect x='64' y='5.5' width='96' height='1' fill='black'/></svg>");
-  mask-repeat: no-repeat;
-  mask-size: 100% 100%;
-}
-
-button,
-a.button,
-input[type='submit'] {
-  padding: 0.25em 0.66em;
-  font-family: var(--font);
-  font-size: var(--font-size-small);
-  font-weight: 500;
-  color: var(--fg-color);
-  text-decoration: none;
-  background: var(--bg-color);
-  border: var(--control-border-width) solid var(--fg2-color);
-  border-radius: var(--border-radius);
-}
-
-button:disabled,
-input[type='submit']:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-button:active:not(:disabled),
-a.button:not(.disabled):active,
-input[type='submit']:active:not(:disabled) {
-  color: var(--bg-color) !important;
-  background: var(--link-active-color) !important;
-}
-
-@media (hover: hover) {
-  button:hover:not(:disabled),
-  a.button:not(.disabled):hover,
-  input[type='submit']:hover:not(:disabled) {
-    cursor: pointer;
-    background: var(--bg2-color);
-  }
-}
-
-button:focus,
-a.button:focus,
-input[type='submit']:focus,
-input[type='text']:focus,
-input[type='search']:focus,
-select:focus {
-  outline: 2px solid var(--theme-color);
-  outline-offset: 1px;
-  background-color: var(--bg2-color);
-  border-color: var(--fg-color);
-}
-
-button.icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  padding: 0;
-  font-style: normal;
-  font-weight: 400;
-  vertical-align: top;
-  border: none;
-  border-radius: 999px;
-}
-
-button.icon-button:focus {
-  background-color: var(--bg2-color);
-}
-
-ol.styled-list,
-ul.styled-list {
-  font-weight: 700;
-  color: var(--theme-color-text);
-}
-
-ul.styled-list {
-  // Make bullet points slightly bigger
-  font-size: 1.2em;
-}
-
-ol li .styled-list-item {
-  font-size: 1em;
-  font-weight: var(--font-weight);
-  color: var(--fg-color);
-}
-
-ul li .styled-list-item {
-  font-size: 0.8333em;
-  font-weight: var(--font-weight);
-  color: var(--fg-color);
-}
-
-ul {
-  list-style-type: square;
-}
-
-ul ul {
-  list-style-type: disc;
-}
-
-ul ul ul {
-  list-style-type: circle;
-}
-
-ul ul ul ul {
-  list-style-type: square;
-}
-
-ol {
-  list-style-type: decimal;
-}
-
-:root[data-font-preference='serif'] ol > li::marker {
-  font-variant-numeric: oldstyle-nums;
-}
-
-ol ol {
-  list-style-type: lower-alpha;
-}
-
-ol ol ol {
-  list-style-type: lower-roman;
-}
-
-ol ol ol ol {
-  list-style-type: decimal;
-}
-
-ol ol ol ol ol {
-  list-style-type: lower-alpha;
-}
-
-table {
-  margin: 1rem 0;
-  overflow: scroll;
-  font-size: var(--font-size-smaller);
-  border-collapse: collapse;
-}
-
-thead {
-  text-align: left;
-}
-
-th,
-td {
-  border-bottom: 1px solid var(--fg-color);
-}
-
-th {
-  font-weight: 600;
-  color: var(--theme-color-text);
-}
-
-th,
-td {
-  padding: var(--table-padding) var(--table-padding) var(--table-padding) 0;
-  vertical-align: top;
-  text-align: left;
-}
-
-tbody tr:last-child td {
-  border-bottom: none;
-}
-
-section {
-  padding: calc(5 * var(--gap)) calc(2 * var(--gap));
-  margin: 0 calc(-1 * var(--gap)) 2rem;
-  background: linear-gradient(
-    0deg,
-    transparent 0,
-    var(--bg2-color) 3rem,
-    var(--bg2-color) calc(100% - 3rem),
-    transparent 100%
-  );
-
-  .alert {
-    background: var(--bg-color);
-  }
-}
-
-section h2:first-child,
-section h3:first-child,
-section h4:first-child,
-section h5:first-child,
-section h6:first-child {
-  font-style: italic;
-  font-weight: 600;
-}
-
-section > p:last-child,
-section > div:last-child {
-  margin-bottom: 0;
-}
-
-section > h2 + p {
-  margin-top: 16px;
-}
-
-blockquote {
-  font-size: 1.2em;
-  font-style: italic;
-  color: var(--fg-color);
-}
-
-.heading-subtitle {
-  font-style: italic;
-}
-
-h1 .heading-subtitle,
-h2 .heading-subtitle,
-h3 .heading-subtitle,
-h4 .heading-subtitle,
-h5 .heading-subtitle,
-h6 .heading-subtitle {
-  margin-left: 1rem;
-  font-weight: 400;
-}
-
-h3.has-subtitle,
-h4.has-subtitle,
-h5.has-subtitle,
-h6.has-subtitle {
-  padding-bottom: 0.5em;
-  margin-top: 6rem;
-  margin-bottom: 0.5em;
-  border-bottom: 1px solid var(--fg-color);
-}
-
-.small-caps {
-  margin-right: -0.05em;
-  font-variant-caps: all-small-caps;
-  font-synthesis-small-caps: none;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-dl {
-  dt {
-    font-weight: 600;
-    color: var(--theme-color-text);
-  }
-
-  dd > *:first-child {
-    margin-top: 0;
-  }
-}
-
-dfn {
-  font-style: italic;
-  font-weight: 500;
-  color: var(--theme-color-text);
-}
-
-a.breadcrumb {
-  @include user-select(none);
-  @include subdued-link;
-
-  &::after {
-    display: inline-block;
-    width: var(--icon-parent-size);
-    height: var(--icon-parent-size);
-    vertical-align: middle;
-    content: '';
-
-    @include contained-mask(var(--icon-parent));
-  }
-}
-
-img {
-  max-width: 100%;
-}
-
-.avatar {
-  max-width: 100px;
-  aspect-ratio: 1 / 1;
-  object-fit: cover;
-  border-radius: 999px;
-}
-
-figure.bio {
-  float: left;
-  max-width: 125px;
-  margin: 1rem 1rem 1rem 0;
-
-  @media (width > 540px) {
-    max-width: 200px;
-  }
-
-  .avatar {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-  }
-
-  figcaption {
-    margin-top: var(--gap);
-    font-style: italic;
-    text-align: center;
-  }
-}
-
-kbd {
-  display: inline-block;
-  padding: 1px 5px;
-  font-family: var(--font);
-  font-size: var(--font-size-small);
-  font-weight: 500;
-  border: 1px solid var(--fg-color);
-  border-radius: 4px;
-  box-shadow: 0 2px 0 var(--fg-color);
-}
-
-select {
-  position: relative;
-  padding: 4px;
-  font-family: var(--font);
-  font-size: inherit;
-  color: var(--fg-color);
-  background: var(--bg-color);
-  border: var(--control-border-width) solid var(--fg2-color);
-  border-radius: var(--border-radius);
-}
-
-// Shiki dual-theme support (defaultColor: false, CSS custom properties only,
-// no inline color/background-color, so no !important needed)
-.shiki span {
-  color: var(--shiki-light);
-}
-
-@media (prefers-color-scheme: dark) {
-  .shiki span {
-    color: var(--shiki-dark);
-  }
-}
+@use 'fonts';
+@use 'content';
+@use 'material-symbols';
+@use 'anchor';
+@use 'code';
+@use 'literate';
+@use 'header';
+@use 'print';
+@use 'question';
+@use 'search';
+@use 'slides';
+@use 'timezone';
+@use 'toc';
+@use 'trace';
+@use 'appearance-picker';
+@use 'navigate';
+@use 'page-update';

package/src/timezone/index.ts

@@ -4,6 +4,7 @@ import {
   normalizeHM,
   to12Hour,
   to12HourMarkup,
+  to24Hour,
   type PeriodStyle,
 } from './time-format';
 
@@ -149,6 +150,23 @@ export default (window: Window) => {
     periodStyles.set(el, detectPeriodStyle(el.textContent ?? ''));
   });
   const pagePeriodStyle = dominantPeriodStyle(periodStyles);
+  const twentyFourHourTimes = new Set<HTMLTimeElement>();
+  for (const [el, style] of periodStyles) {
+    const rangeEnd = getRangeEnd(el);
+    const inheritsPeriod =
+      rangeEnd !== null && periodStyles.get(rangeEnd) != null;
+    const authoredTime = (el.textContent ?? '').trim();
+    // A periodless 12-hour prefix may inherit its range's final AM/PM.
+    // Otherwise text matching datetime is an authored 24-hour time.
+    if (
+      style === null &&
+      !inheritsPeriod &&
+      /^\d{1,2}:\d{2}$/.test(authoredTime) &&
+      parseHHMM(authoredTime) === parseHHMM(el.getAttribute('datetime') ?? '')
+    ) {
+      twentyFourHourTimes.add(el);
+    }
+  }
 
   function updateTimes(targetTz: string) {
     const target = timezones.find(t => t.value === targetTz) || defaultTz;
@@ -187,11 +205,12 @@ export default (window: Window) => {
         }
       }
 
+      const is24Hour = twentyFourHourTimes.has(el);
       const originalStyle = periodStyles.get(el) ?? null;
       const originalIsPm = Math.floor(baseMinutes / 60) >= 12;
       const periodChanged = originalIsPm !== h >= 12 || dayShift !== 0;
       let style =
-        originalStyle === null && periodChanged
+        !is24Hour && originalStyle === null && periodChanged
           ? pagePeriodStyle
           : originalStyle;
 
@@ -201,6 +220,7 @@ export default (window: Window) => {
         ? parseHHMM(rangeEndDatetime)
         : NaN;
       if (
+        !is24Hour &&
         originalStyle === null &&
         rangeEnd !== null &&
         !isNaN(rangeEndMinutes)
@@ -216,14 +236,20 @@ export default (window: Window) => {
         isDefault || style === null || rangeEnd !== null
           ? ''
           : ` <span class="small-caps">${target.abbreviation}</span>`;
-      el.innerHTML = to12HourMarkup(h, m, style) + timeZone + suffix;
+      el.innerHTML =
+        (is24Hour ? to24Hour(h, m) : to12HourMarkup(h, m, style)) +
+        timeZone +
+        suffix;
 
       if (isDefault) {
         el.classList.remove('is-modified');
         el.title = '';
       } else {
         el.classList.add('is-modified');
-        el.title = `${to12Hour(...normalizeHM(baseMinutes), style ?? pagePeriodStyle)} ${defaultTz.abbreviation}`;
+        const originalTime = is24Hour
+          ? to24Hour(...normalizeHM(baseMinutes))
+          : to12Hour(...normalizeHM(baseMinutes), style ?? pagePeriodStyle);
+        el.title = `${originalTime} ${defaultTz.abbreviation}`;
       }
     });
   }

package/src/timezone/time-format.ts

@@ -22,6 +22,10 @@ function pad(n: number | string) {
   return String(n).padStart(2, '0');
 }
 
+export function to24Hour(h: number, m: number) {
+  return `${pad(h)}:${pad(m)}`;
+}
+
 export function to12Hour(
   h: number,
   m: number,

package/src/toc/index.ts

@@ -45,7 +45,7 @@ function getHeadingsAndAlerts(
 ): (HTMLHeadingElement | HTMLDivElement)[] {
   return Array.from(
     parent.querySelectorAll(
-      '.body h1, .body h2, .body h3, .body h4, .body h5, .body h6, .body > div.alert, .body section > div.alert',
+      '.body h1, .body h2, .body h3, .body h4, .body h5, .body h6, :is(.body, .page-content) > div.alert, .body section > div.alert',
     ),
   );
 }
@@ -55,7 +55,7 @@ function getTocElements(
 ): (HTMLHeadingElement | HTMLDivElement | HTMLHRElement)[] {
   return Array.from(
     parent.querySelectorAll(
-      '.body h1, .body h2, .body h3, .body h4, .body h5, .body h6, .body > div.alert, .body section > div.alert, .body > hr',
+      '.body h1, .body h2, .body h3, .body h4, .body h5, .body h6, :is(.body, .page-content) > div.alert, .body section > div.alert, :is(.body, .page-content) > hr',
     ),
   );
 }
@@ -123,11 +123,12 @@ export default (window: Window) => {
       }
 
       let best = 0;
+      let bestLine = -1;
+      // TOC display groups (such as fields and methods) are not source order.
       for (let i = 0; i < codeLines.length; i++) {
-        if (codeLines[i] <= line) {
+        if (codeLines[i] <= line && codeLines[i] >= bestLine) {
           best = i;
-        } else {
-          break;
+          bestLine = codeLines[i];
         }
       }