@pie-players/pie-tool-annotation-toolbar 0.3.59 → 0.3.61

package/dist/tool-annotation-toolbar.js

@@ -2776,6 +2776,116 @@ var Ss = class $r {
         text-underline-offset: 2px;
         color: inherit;
       }
+
+      /* The blocks below cover annotation swatches, print, and reduced motion.
+         They deliberately do NOT retune the TTS layers: applyAdaptiveTTSStyle()
+         writes the pie-tts custom properties inline on documentElement on every
+         paint and on theme change, so a media query that only varies a var()
+         fallback for those can never take effect. Annotation colours have no such
+         adaptive path -- they are fixed swatches a student chose -- so a media
+         query is the only way to adjust them, and each keeps its var() so a host
+         override still wins.
+
+         The names above are spelled without their leading dashes on purpose.
+         check-theme-tokens scans comments, and its token pattern stops at the
+         first non-alphanumeric character, so writing the wildcard form reads as
+         consumption of a shorter token that is not in the registry and fails the
+         check. Spell property names in full, or omit the dashes. */
+
+      @media (prefers-color-scheme: dark) {
+        ::highlight(annotation-yellow) {
+          background-color: var(--pie-annotation-yellow-highlight, rgba(139, 117, 0, 0.6));
+        }
+        ::highlight(annotation-green) {
+          background-color: var(--pie-annotation-green-highlight, rgba(45, 92, 63, 0.6));
+        }
+        ::highlight(annotation-blue) {
+          background-color: var(--pie-annotation-blue-highlight, rgba(0, 102, 170, 0.6));
+        }
+        ::highlight(annotation-pink) {
+          background-color: var(--pie-annotation-pink-highlight, rgba(139, 51, 74, 0.6));
+        }
+        ::highlight(annotation-orange) {
+          background-color: var(--pie-annotation-orange-highlight, rgba(154, 99, 0, 0.6));
+        }
+        ::highlight(annotation-underline) {
+          text-decoration-color: var(--pie-primary, #4da6ff);
+        }
+      }
+
+      /* WCAG 2.2 SC 1.4.11 non-text contrast: a highlight is the only indication
+         that text is annotated, so the swatches saturate and the underline
+         thickens when the user asks for more contrast.
+
+         The value is "more", not "high". The stylesheet this was recovered from
+         used prefers-contrast: high, which is not a valid value for the feature
+         -- the keywords are no-preference, more, less, custom. An invalid query
+         evaluates to "not all", so that block could never have matched in any
+         browser even had the file been loaded. Verified with matchMedia under
+         emulation: "high" stays false where "more" flips true. */
+      @media (prefers-contrast: more) {
+        ::highlight(annotation-yellow) {
+          background-color: var(--pie-annotation-yellow-highlight, rgba(255, 255, 0, 0.7));
+        }
+        ::highlight(annotation-green) {
+          background-color: var(--pie-annotation-green-highlight, rgba(0, 255, 127, 0.7));
+        }
+        ::highlight(annotation-blue) {
+          background-color: var(--pie-annotation-blue-highlight, rgba(0, 191, 255, 0.7));
+        }
+        ::highlight(annotation-pink) {
+          background-color: var(--pie-annotation-pink-highlight, rgba(255, 105, 180, 0.7));
+        }
+        ::highlight(annotation-orange) {
+          background-color: var(--pie-annotation-orange-highlight, rgba(255, 165, 0, 0.85));
+        }
+        ::highlight(annotation-underline) {
+          text-decoration-thickness: 3px;
+        }
+      }
+
+      @media print {
+        /* TTS highlighting is a transient read-along cue, not content. */
+        ::highlight(tts-word),
+        ::highlight(tts-sentence),
+        [data-pie-tts-word-element="true"],
+        [data-pie-tts-sentence-element="true"] {
+          background-color: transparent;
+          text-decoration: none;
+          text-shadow: none;
+          border-bottom: none;
+        }
+
+        /* Annotations are student work and must survive printing, but a fill
+           that reads fine on screen can print as an illegible wash, so each
+           becomes an underline that keeps its colour coding. */
+        ::highlight(annotation-yellow),
+        ::highlight(annotation-green),
+        ::highlight(annotation-blue),
+        ::highlight(annotation-pink),
+        ::highlight(annotation-orange) {
+          background-color: transparent;
+          border-bottom: 2px solid currentColor;
+        }
+        ::highlight(annotation-yellow) { border-bottom-color: #ffeb3b; }
+        ::highlight(annotation-green) { border-bottom-color: #a6e1c5; }
+        ::highlight(annotation-blue) { border-bottom-color: #a7e0f6; }
+        ::highlight(annotation-pink) { border-bottom-color: #ff9fae; }
+        ::highlight(annotation-orange) { border-bottom-color: #ffa500; }
+        ::highlight(annotation-underline) {
+          text-decoration-color: #000;
+          border-bottom: none;
+        }
+      }
+
+      /* text-shadow is a direct property rather than a var(), so unlike the
+         other TTS rules this one is not overridden by the adaptive path. */
+      @media (prefers-reduced-motion: reduce) {
+        ::highlight(tts-word),
+        [data-pie-tts-word-element="true"] {
+          text-shadow: none;
+        }
+      }
     `, document.head.appendChild(t);
   }
   highlightTTSWord(t, n, r) {
@@ -3340,9 +3450,11 @@ function $c(e) {
     "pie-multiple-choice",
     "pie-inline-choice",
     "pie-select-text",
+    "pie-ebsr",
     "multiple-choice",
     "inline-choice",
-    "select-text"
+    "select-text",
+    "ebsr"
   ];
   if (xs(e)) {
     const n = e.item.config;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pie-players/pie-tool-annotation-toolbar",
-	"version": "0.3.59",
+	"version": "0.3.61",
 	"type": "module",
 	"description": "Text annotation toolbar with highlighting and underlining for PIE assessment player",
 	"repository": {
@@ -36,8 +36,8 @@
 	"unpkg": "./dist/tool-annotation-toolbar.js",
 	"jsdelivr": "./dist/tool-annotation-toolbar.js",
 	"dependencies": {
-		"@pie-players/pie-assessment-toolkit": "0.3.59",
-		"@pie-players/pie-players-shared": "0.3.59"
+		"@pie-players/pie-assessment-toolkit": "0.3.61",
+		"@pie-players/pie-players-shared": "0.3.61"
 	},
 	"types": "./dist/index.d.ts",
 	"scripts": {

package/dist/pie-tool-annotation-toolbar.css

@@ -1,2 +0,0 @@
-::highlight(tts-word){background-color:var( --pie-tts-word-highlight, color-mix(in srgb, var(--pie-missing, #ffeb3b) 68%, transparent) );text-decoration:underline 2px solid var( --pie-tts-word-underline, color-mix(in srgb, var(--pie-text, #111827) 70%, transparent) );text-underline-offset:2px;text-shadow:0 0 1px var( --pie-tts-word-shadow, color-mix(in srgb, var(--pie-text, #111827) 35%, transparent) );color:inherit}::highlight(tts-sentence){background-color:var( --pie-tts-sentence-highlight, color-mix(in srgb, var(--pie-missing, #ffeb3b) 38%, transparent) );color:inherit}::highlight(annotation-yellow){background-color:var( --pie-annotation-yellow-highlight, rgba(253, 233, 149, .5) );color:inherit}::highlight(annotation-pink){background-color:var( --pie-annotation-pink-highlight, rgba(255, 159, 174, .5) );color:inherit}::highlight(annotation-blue){background-color:var( --pie-annotation-blue-highlight, rgba(167, 224, 246, .5) );color:inherit}::highlight(annotation-green){background-color:var( --pie-annotation-green-highlight, rgba(166, 225, 197, .5) );color:inherit}::highlight(annotation-underline){background-color:transparent;text-decoration:underline 2px solid var(--pie-primary, #0066cc);text-underline-offset:2px;color:inherit}@media(prefers-color-scheme:dark){::highlight(tts-word){background-color:var( --pie-tts-word-highlight, color-mix(in srgb, var(--pie-missing, #ffeb3b) 72%, transparent) );text-decoration:underline 2px solid var( --pie-tts-word-underline, color-mix(in srgb, var(--pie-white, #fff) 70%, transparent) );text-shadow:0 0 2px var( --pie-tts-word-shadow, color-mix(in srgb, var(--pie-white, #fff) 32%, transparent) )}::highlight(tts-sentence){background-color:var( --pie-tts-sentence-highlight, color-mix(in srgb, var(--pie-missing, #ffeb3b) 42%, transparent) )}::highlight(annotation-yellow){background-color:#8b750099}::highlight(annotation-pink){background-color:#8b334a99}::highlight(annotation-blue){background-color:#06a9}::highlight(annotation-green){background-color:#2d5c3f99}::highlight(annotation-underline){text-decoration-color:#4da6ff}}@media(prefers-contrast:high){::highlight(tts-word){background-color:var( --pie-tts-word-highlight, color-mix(in srgb, var(--pie-missing, #ffeb3b) 85%, transparent) );text-decoration-color:var( --pie-tts-word-underline, color-mix(in srgb, var(--pie-text, #111827) 85%, transparent) );text-decoration-thickness:3px;text-shadow:none}::highlight(tts-sentence){background-color:var( --pie-tts-sentence-highlight, color-mix(in srgb, var(--pie-missing, #ffeb3b) 55%, transparent) )}::highlight(annotation-yellow){background-color:#ffff00b3}::highlight(annotation-pink){background-color:#ff69b4b3}::highlight(annotation-blue){background-color:#00bfffb3}::highlight(annotation-green){background-color:#00ff7fb3}::highlight(annotation-underline){text-decoration-thickness:3px;text-decoration-color:#000}}@media(prefers-color-scheme:dark)and (prefers-contrast:high){::highlight(tts-word){background-color:var( --pie-tts-word-highlight, color-mix(in srgb, var(--pie-missing, #ffeb3b) 85%, transparent) );text-decoration-color:var( --pie-tts-word-underline, color-mix(in srgb, var(--pie-white, #fff) 88%, transparent) )}::highlight(annotation-underline){text-decoration-color:#fff}}@media print{::highlight(tts-word),::highlight(tts-sentence){background-color:transparent;text-decoration:none;text-shadow:none}::highlight(annotation-yellow),::highlight(annotation-pink),::highlight(annotation-blue),::highlight(annotation-green){background-color:transparent;border-bottom:2px solid currentColor}::highlight(annotation-yellow){border-bottom-color:#ffeb3b}::highlight(annotation-pink){border-bottom-color:#ff9fae}::highlight(annotation-blue){border-bottom-color:#a7e0f6}::highlight(annotation-green){border-bottom-color:#a6e1c5}::highlight(annotation-underline){text-decoration-color:#000;border-bottom:none}}@media(prefers-reduced-motion:reduce){::highlight(tts-word){text-shadow:none}}.pie-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pie-tool-annotation-toolbar button:focus-visible{outline:2px solid var(--pie-button-focus-outline, var(--pie-primary, #0066cc));outline-offset:2px}@media(prefers-color-scheme:dark){.pie-tool-annotation-toolbar button:focus-visible{outline-color:#4da6ff}}@media(prefers-contrast:high){.pie-tool-annotation-toolbar button:focus-visible{outline-width:3px}}
-/*$vite$:1*/