@abreen/tada 1.9.0 → 1.10.2

package/src/style.scss

@@ -5,36 +5,36 @@
 @use 'alerts';
 
 @font-face {
-  font-family: 'Inter';
+  font-family: Inter;
   font-style: normal;
   font-weight: 100 900;
-  font-display: swap;
   src: url('inter/InterVariable.woff2') format('woff2');
+  font-display: swap;
 }
 
 @font-face {
-  font-family: 'Inter';
+  font-family: Inter;
   font-style: italic;
   font-weight: 100 900;
-  font-display: swap;
   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;
-  font-display: swap;
   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;
-  font-display: swap;
   src: url('google-sans-code/GoogleSansCodeVariable-Italic.woff2')
     format('woff2');
+  font-display: swap;
 }
 
 ::selection {
@@ -66,25 +66,27 @@ a.disabled {
 
 .external-link-tail::after,
 a.external:not(:has(.external-link-tail))::after {
-  content: '';
   display: inline-block;
   width: 1em;
   height: 1em;
   vertical-align: middle;
+  content: '';
+
   @include contained-mask(var(--icon-external-link));
 }
 
 .footnotes {
-  margin-top: calc(var(--thematic-break-margin) / 2);
   padding-top: 32px;
-  border-top: 3px solid var(--bg2-color);
+  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-weight: 700;
+
   font-size: larger;
+  font-weight: 700;
 }
 
 .footnotes p {
@@ -92,8 +94,8 @@ a.external:not(:has(.external-link-tail))::after {
 }
 
 .footnotes ol {
-  list-style: none;
   padding-left: 0;
+  list-style: none;
 }
 
 .footnotes li {
@@ -103,16 +105,17 @@ a.external:not(:has(.external-link-tail))::after {
 }
 
 a.footnote-ref {
-  vertical-align: text-bottom;
   font-size: 0.8em;
   font-weight: 600;
+  vertical-align: text-bottom;
 }
 
 .footnote-marker {
   @include user-select(none);
+
   position: absolute;
-  left: 0;
   top: 0;
+  left: 0;
   font-weight: 500;
 }
 
@@ -134,62 +137,63 @@ a.footnote-ref {
 
 .footnotes .footnote-backref {
   display: inline-block;
+
   @include user-select(none);
 }
 
 hr {
-  border: none;
-  height: 32px;
-  margin: var(--section-padding) 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 32px;
+  margin: var(--section-padding) 0;
+  border: none;
 }
 
 hr::after {
-  content: '';
   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-size: 100% 100%;
   mask-repeat: no-repeat;
+  mask-size: 100% 100%;
 }
 
 button,
 a.button,
 input[type='submit'] {
-  background: var(--bg-color);
-  color: var(--fg-color);
   padding: 0.25em 0.66em;
-  border: var(--control-border-width) solid var(--fg2-color);
-  border-radius: var(--border-radius);
-  font-size: var(--font-size-small);
   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 {
-  opacity: 0.4;
   cursor: not-allowed;
+  opacity: 0.4;
 }
 
 button:active:not(:disabled),
 a.button:not(.disabled):active,
 input[type='submit']:active:not(:disabled) {
-  background: var(--link-active-color) !important;
   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) {
-    background: var(--bg2-color);
     cursor: pointer;
+    background: var(--bg2-color);
   }
 }
 
@@ -201,8 +205,8 @@ input[type='search']:focus,
 select:focus {
   outline: 2px solid var(--theme-color);
   outline-offset: 1px;
-  border-color: var(--fg-color);
   background-color: var(--bg2-color);
+  border-color: var(--fg-color);
 }
 
 button.icon-button {
@@ -211,12 +215,12 @@ button.icon-button {
   justify-content: center;
   width: 30px;
   height: 30px;
-  border-radius: 999px;
   padding: 0;
-  border: none;
-  font-weight: 400;
   font-style: normal;
+  font-weight: 400;
   vertical-align: top;
+  border: none;
+  border-radius: 999px;
 }
 
 button.icon-button:focus {
@@ -225,8 +229,8 @@ button.icon-button:focus {
 
 ol.styled-list,
 ul.styled-list {
-  color: var(--theme-color-text);
   font-weight: 700;
+  color: var(--theme-color-text);
 }
 
 ul.styled-list {
@@ -236,9 +240,9 @@ ul.styled-list {
 
 ol li .styled-list-item,
 ul li .styled-list-item {
-  color: var(--fg-color);
-  font-weight: var(--font-weight);
   font-size: 1rem;
+  font-weight: var(--font-weight);
+  color: var(--fg-color);
 }
 
 ul {
@@ -278,10 +282,10 @@ ol ol ol ol ol {
 }
 
 table {
+  margin: 1rem 0;
+  overflow: scroll;
   font-size: var(--font-size-smaller);
   border-collapse: collapse;
-  overflow: scroll;
-  margin: 1rem 0;
 }
 
 thead {
@@ -301,8 +305,8 @@ th {
 th,
 td {
   padding: var(--table-padding) var(--table-padding) var(--table-padding) 0;
-  text-align: left;
   vertical-align: top;
+  text-align: left;
 }
 
 tbody tr:last-child td {
@@ -310,6 +314,8 @@ tbody tr:last-child td {
 }
 
 section {
+  padding: calc(5 * var(--gap)) calc(2 * var(--gap));
+  margin: 0 calc(-1 * var(--gap)) 2rem;
   background: linear-gradient(
     0deg,
     transparent 0,
@@ -317,8 +323,6 @@ section {
     var(--bg2-color) calc(100% - 3rem),
     transparent 100%
   );
-  padding: calc(5 * var(--gap)) calc(2 * var(--gap));
-  margin: 0 calc(-1 * var(--gap)) 2rem calc(-1 * var(--gap));
 
   .alert {
     background: var(--bg-color);
@@ -344,9 +348,9 @@ section > h2 + p {
 }
 
 blockquote {
-  color: var(--fg-color);
-  font-style: italic;
   font-size: 1.2em;
+  font-style: italic;
+  color: var(--fg-color);
 }
 
 .heading-subtitle {
@@ -367,16 +371,16 @@ h3.has-subtitle,
 h4.has-subtitle,
 h5.has-subtitle,
 h6.has-subtitle {
-  margin-top: 6rem;
-  border-bottom: 1px solid var(--fg-color);
   padding-bottom: 0.5em;
+  margin-top: 6rem;
   margin-bottom: 0.5em;
+  border-bottom: 1px solid var(--fg-color);
 }
 
 .small-caps {
-  text-transform: uppercase;
-  font-weight: 600;
   font-size: 0.9em;
+  font-weight: 600;
+  text-transform: uppercase;
 }
 
 dl {
@@ -391,9 +395,9 @@ dl {
 }
 
 dfn {
+  font-style: italic;
   font-weight: 500;
   color: var(--theme-color-text);
-  font-style: italic;
 }
 
 a.breadcrumb {
@@ -401,11 +405,12 @@ a.breadcrumb {
   @include subdued-link;
 
   &::after {
-    content: '';
     display: inline-block;
     width: 1em;
     height: 1em;
     vertical-align: middle;
+    content: '';
+
     @include contained-mask(var(--icon-breadcrumb));
   }
 }
@@ -415,54 +420,54 @@ img {
 }
 
 .avatar {
-  aspect-ratio: 1 / 1;
   max-width: 100px;
-  border-radius: 999px;
+  aspect-ratio: 1 / 1;
   object-fit: cover;
+  border-radius: 999px;
 }
 
 figure.bio {
   float: left;
-  margin: 1rem 1rem 1rem 0;
   max-width: 125px;
+  margin: 1rem 1rem 1rem 0;
 
   @media (width > 540px) {
     max-width: 200px;
   }
 
   .avatar {
-    max-width: 100%;
-    width: 100%;
     display: block;
+    width: 100%;
+    max-width: 100%;
   }
 
   figcaption {
-    text-align: center;
     margin-top: var(--gap);
     font-style: italic;
+    text-align: center;
   }
 }
 
 kbd {
   display: inline-block;
   padding: 1px 5px;
-  border: 1px solid var(--fg-color);
-  border-radius: 4px;
-  box-shadow: 0 2px 0 var(--fg-color);
   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);
-  padding: 4px;
-  position: relative;
-  font-size: inherit;
 }
 
 // Shiki dual-theme support (defaultColor: false, CSS custom properties only,

package/src/timezone/index.ts

@@ -1,4 +1,5 @@
 const STORAGE_KEY = 'timezoneSelection';
+const TIMEZONE_SELECT_LABEL = 'Time zone';
 
 type PeriodStyle = [am: string, pm: string];
 
@@ -112,6 +113,13 @@ function init(element: HTMLSelectElement, selectedTz: string) {
   element.value = selectedTz;
   element.hidden = false;
   element.disabled = false;
+  if (
+    !element.hasAttribute('aria-label') &&
+    !element.hasAttribute('aria-labelledby') &&
+    (element.labels?.length ?? 0) === 0
+  ) {
+    element.setAttribute('aria-label', TIMEZONE_SELECT_LABEL);
+  }
 }
 
 function dominantPeriodStyle(
@@ -236,7 +244,7 @@ export default (window: Window) => {
     const resetBtn = window.document.createElement('button');
     resetBtn.type = 'button';
     resetBtn.innerHTML =
-      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">' +
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">' +
       '<line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>' +
       '<line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>' +
       '</svg>';
@@ -254,8 +262,10 @@ export default (window: Window) => {
     const sync = (val: string) => {
       selectEl.value = val;
       const isDefault = val === defaultTz.value;
-      resetBtn.style.opacity = isDefault ? '0' : '1';
-      resetBtn.style.pointerEvents = isDefault ? 'none' : '';
+      resetBtn.classList.toggle('is-hidden', isDefault);
+      resetBtn.disabled = isDefault;
+      resetBtn.tabIndex = isDefault ? -1 : 0;
+      resetBtn.setAttribute('aria-hidden', String(isDefault));
     };
 
     choosers.push({ sync });

package/src/timezone/style.scss

@@ -5,14 +5,20 @@ time[datetime] {
 }
 
 span.next-prev-day {
-  color: var(--fg2-color);
   font-style: italic;
+  color: var(--fg2-color);
 }
 
 .timezone-wrapper {
   display: inline-flex;
-  align-items: center;
   gap: 4px;
+  align-items: center;
+
+  .icon-button.is-hidden {
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+  }
 }
 
 @media print {
@@ -21,12 +27,12 @@ span.next-prev-day {
   }
 
   select.time-zone {
-    appearance: none;
-    border: none;
-    background: none;
     padding: 0;
     font: inherit;
     color: inherit;
+    appearance: none;
+    background: none;
+    border: none;
 
     option {
       display: none;

package/src/toc/style.scss

@@ -3,6 +3,7 @@
 :root {
   --highlight-hue: 59deg;
   --highlight-color: hsl(var(--highlight-hue) 100% 50% / 50%);
+
   // For animations
   --highlight-color-transparent: hsl(var(--highlight-hue) 50% 90% / 0%);
 }
@@ -19,37 +20,37 @@ body.code .toc ol li:has(a) {
 }
 
 body.code .toc ol a {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .toc ol::before {
-  content: 'On this page';
   display: block;
   font-family: var(--mono-font);
-  font-style: italic;
   font-size: var(--font-size-small);
+  font-style: italic;
   text-align: center;
+  content: 'On this page';
 }
 
 .toc ol {
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 
 .toc ol li {
-  list-style-type: none;
-  overflow-wrap: break-word;
   margin-bottom: 0;
+  overflow-wrap: break-word;
+  list-style-type: none;
 }
 
 .toc ol a {
-  text-decoration: none;
-  border: none;
   display: block;
   padding: 4px 6px;
   color: var(--fg-color);
+  text-decoration: none;
+  border: none;
 
   &:focus-visible {
     outline-offset: -2px;
@@ -68,7 +69,7 @@ body.code .toc ol a {
   color: var(--link-active-color);
 }
 
-@media (min-width: 900px) {
+@media (width >= 900px) {
   .toc ol li.current a {
     background: var(--bg2-color);
   }
@@ -92,26 +93,26 @@ body.code .toc ol a {
 }
 
 .toc ol li.level3 {
-  font-size: var(--font-size-smaller);
   margin-left: 10px;
+  font-size: var(--font-size-smaller);
 }
 
 .toc ol li.level4 {
+  margin-left: 18px;
   font-size: var(--font-size-small);
   font-weight: 450;
-  margin-left: 18px;
 }
 
 .toc ol li.level5 {
+  margin-left: 24px;
   font-size: var(--font-size-small);
   font-weight: 450;
-  margin-left: 24px;
 }
 
 .toc ol li.level6 {
+  margin-left: 32px;
   font-size: var(--font-size-small);
   font-weight: 450;
-  margin-left: 32px;
 }
 
 .toc ol li.dinkus-item {
@@ -120,8 +121,8 @@ body.code .toc ol a {
   pointer-events: none;
   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-size: 100% 100%;
   mask-repeat: no-repeat;
+  mask-size: 100% 100%;
 }
 
 .toc ol li.alert-item {
@@ -130,12 +131,12 @@ body.code .toc ol a {
 
 .toc ol li.alert-item.warning a::before,
 .toc ol li.alert-item.note a::before {
-  content: '';
   display: inline-block;
   width: 20px;
   height: 20px;
-  vertical-align: bottom;
   margin-right: 4px;
+  vertical-align: bottom;
+  content: '';
 }
 
 .toc ol li.alert-item.warning a::before {