@pie-players/pie-tool-tts-inline 0.3.52 → 0.3.53

package/README.md

@@ -165,6 +165,7 @@ When used with the section player, this tool benefits from extracted catalogs
 when a host/import pipeline runs `SSMLExtractor` before render:
 
 **Author embeds SSML in content:**
+
 ```html
 <div>
   <speak>Solve <prosody rate="slow">x squared plus two</prosody>.</speak>
@@ -173,11 +174,13 @@ when a host/import pipeline runs `SSMLExtractor` before render:
 ```
 
 **Preprocessing extracts SSML:**
+
 - Generates catalog with ID like `auto-prompt-q1-0`
 - Adds `data-catalog-idref="auto-prompt-q1-0"` to visual content
 - Provides `config.extractedCatalogs` for runtime catalog registration
 
 **Tool uses extracted catalog:**
+
 - User clicks TTS button in header
 - Tool calls `ttsService.speak(text, { catalogId: 'auto-prompt-q1-0' })`
 - TTSService finds SSML in extracted catalogs
@@ -194,6 +197,28 @@ The component uses scoped styles and doesn't require external CSS. Styling uses
 - **Speed state**: Active speed button receives distinct token-driven styling
 - **Disabled**: Reduced opacity, no pointer
 
+Hosts that need to theme the trigger's active/open state should prefer these
+component-scoped variables instead of overriding broad semantic tokens such as
+`--pie-primary`:
+
+```css
+--pie-tool-trigger-active-background: Active/open trigger background
+--pie-tool-trigger-active-color: Active/open trigger foreground
+--pie-tool-trigger-active-border-color: Active/open trigger border
+```
+
+If unset, the trigger keeps the existing defaults: active background and border
+derive from `--pie-primary`, while foreground continues through
+`--pie-button-color` / `--pie-text`. Hosts remain responsible for maintaining
+WCAG AA foreground/background contrast when overriding active trigger colors.
+
+Ordinary trigger and control button styling also preserves these legacy aliases:
+`--pie-button-background-color`, `--pie-button-border-color`, and
+`--pie-button-hover-background-color`. They remain supported for host
+compatibility, but fall back through the canonical `--pie-button-bg`,
+`--pie-button-border`, and `--pie-button-hover-bg` tokens before broad surface
+tokens.
+
 ## Architecture
 
 This tool follows the PIE Assessment Toolkit tool pattern:

package/dist/tool-tts-inline.js

@@ -2301,7 +2301,7 @@ function ci(e, t, n, r, i, a) {
 //#region tool-tts-inline.svelte
 var li = /* @__PURE__ */ xr("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" class=\"pie-tool-tts-inline__icon svelte-18mzc0g\" aria-hidden=\"true\"><path d=\"M6 19h4V5H6v14zm8-14v14h4V5h-4z\"></path></svg>"), ui = /* @__PURE__ */ xr("<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" class=\"pie-tool-tts-inline__icon svelte-18mzc0g\" aria-hidden=\"true\"><path d=\"M8 5v14l11-7z\"></path></svg>"), di = /* @__PURE__ */ yr("<button type=\"button\"><!></button>"), fi = /* @__PURE__ */ yr("<button type=\"button\" data-pie-tts-control=\"\"><span aria-hidden=\"true\"> </span></button>"), pi = /* @__PURE__ */ yr("<div role=\"toolbar\" aria-label=\"Reading controls\" tabindex=\"-1\"><!> <button type=\"button\" data-pie-tts-control=\"\" class=\"pie-tool-tts-inline__control svelte-18mzc0g\" aria-label=\"Rewind\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" class=\"pie-tool-tts-inline__icon svelte-18mzc0g\" aria-hidden=\"true\"><path d=\"M20 18V6l-8.5 6L20 18zM10.5 18V6L2 12l8.5 6z\"></path></svg></button> <button type=\"button\" data-pie-tts-control=\"\" class=\"pie-tool-tts-inline__control svelte-18mzc0g\" aria-label=\"Fast-forward\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" class=\"pie-tool-tts-inline__icon svelte-18mzc0g\" aria-hidden=\"true\"><path d=\"M4 18l8.5-6L4 6v12zm9.5 0L22 12l-8.5-6v12z\"></path></svg></button> <button type=\"button\" data-pie-tts-control=\"\" class=\"pie-tool-tts-inline__control svelte-18mzc0g\" aria-label=\"Stop reading\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" class=\"pie-tool-tts-inline__icon svelte-18mzc0g\" aria-hidden=\"true\"><path d=\"M6 6h12v12H6z\"></path></svg></button></div>"), mi = /* @__PURE__ */ yr("<!> <!>", 1), hi = /* @__PURE__ */ yr("<div><!> <div class=\"pie-sr-only svelte-18mzc0g\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"> </div></div>"), gi = {
 	hash: "svelte-18mzc0g",
-	code: ".pie-tool-tts-inline.svelte-18mzc0g {position:relative;display:inline-flex;align-items:center;}.pie-tool-tts-inline--controls-row.svelte-18mzc0g {width:100%;justify-content:flex-end;}.pie-tool-tts-inline__trigger.svelte-18mzc0g {display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--pie-button-border-color, var(--pie-border, #c6c6c6));background-color:var(--pie-button-background-color, var(--pie-background, #fff));color:var(--pie-button-color, var(--pie-text, #333));border-radius:0.25rem;cursor:pointer;transition:background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;}.pie-tool-tts-inline__trigger.svelte-18mzc0g:hover:not(:disabled),\n	.pie-tool-tts-inline__control.svelte-18mzc0g:hover:not(:disabled) {background-color:var(--pie-button-hover-background-color, var(--pie-secondary-background, #f2f4f8));transform:translateY(-1px);box-shadow:0 2px 6px color-mix(in srgb, var(--pie-shadow, #000) 14%, transparent);}.pie-tool-tts-inline__trigger.svelte-18mzc0g:active:not(:disabled),\n	.pie-tool-tts-inline__control.svelte-18mzc0g:active:not(:disabled) {transform:translateY(0);box-shadow:none;}.pie-tool-tts-inline__trigger.svelte-18mzc0g:focus-visible,\n	.pie-tool-tts-inline__control.svelte-18mzc0g:focus-visible {outline:2px solid var(--pie-focus-outline, var(--pie-button-focus-outline, var(--pie-primary, #0066cc)));outline-offset:2px;box-shadow:0 0 0 4px color-mix(in srgb, var(--pie-primary, #0066cc) 22%, transparent);}.pie-tool-tts-inline__trigger--active.svelte-18mzc0g {border-color:var(--pie-primary, #1565c0);background-color:color-mix(in srgb, var(--pie-primary, #1565c0) 10%, var(--pie-background, #fff));}.pie-tool-tts-inline__panel.svelte-18mzc0g {display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:0.25rem;box-sizing:border-box;height:var(--pie-tts-controls-row-height, 2.875rem);padding:0 0.5rem;background:var(--pie-surface, var(--pie-background, #fff));border:1px solid var(--pie-border, #d0d0d0);border-radius:0.5rem;}.pie-tool-tts-inline__panel--floating.svelte-18mzc0g {position:absolute;z-index:2;top:100%;right:0;left:auto;}.pie-tool-tts-inline__panel--left-aligned-inline.svelte-18mzc0g {position:static;margin-right:0.5rem;}.pie-tool-tts-inline__panel--row.svelte-18mzc0g {position:absolute;z-index:2;top:100%;right:0;left:auto;}.pie-tool-tts-inline__control.svelte-18mzc0g {display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--pie-button-border-color, var(--pie-border, #c6c6c6));border-radius:0.25rem;background:var(--pie-button-background-color, var(--pie-background, #fff));color:var(--pie-button-color, var(--pie-text, #222));cursor:pointer;transition:background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;}.pie-tool-tts-inline__control--speed.svelte-18mzc0g {font-size:0.6875rem;font-weight:400;letter-spacing:0;white-space:nowrap;}.pie-tool-tts-inline__control--speed-active.svelte-18mzc0g {border-color:var(--pie-primary, #1565c0);background:color-mix(in srgb, var(--pie-primary, #1565c0) 14%, var(--pie-background, #fff));color:var(--pie-primary, #1565c0);font-weight:600;}.pie-tool-tts-inline__trigger.svelte-18mzc0g:disabled,\n	.pie-tool-tts-inline__control.svelte-18mzc0g:disabled {cursor:not-allowed;opacity:0.6;}.pie-tool-tts-inline__trigger--sm.svelte-18mzc0g {width:1.75rem;height:1.75rem;}.pie-tool-tts-inline__trigger--sm.svelte-18mzc0g .pie-tool-tts-inline__icon:where(.svelte-18mzc0g) {width:1rem;height:1rem;}.pie-tool-tts-inline__trigger--md.svelte-18mzc0g {width:2rem;height:2rem;}.pie-tool-tts-inline__trigger--md.svelte-18mzc0g .pie-tool-tts-inline__icon:where(.svelte-18mzc0g) {width:1.25rem;height:1.25rem;}.pie-tool-tts-inline__trigger--lg.svelte-18mzc0g {width:2.5rem;height:2.5rem;}.pie-tool-tts-inline__trigger--lg.svelte-18mzc0g .pie-tool-tts-inline__icon:where(.svelte-18mzc0g) {width:1.5rem;height:1.5rem;}.pie-tool-tts-inline__icon.svelte-18mzc0g {\n		/* Default explicit size so control-button icons (rewind/fast-forward/stop)\n		   render in WebKit, which sizes an inline SVG that has only a viewBox (no\n		   width/height attributes) to 0. The play/pause trigger icon already works\n		   because the __trigger--sm/md/lg rules below set these dimensions; this\n		   gives the control-panel icons the same treatment. Keep the SVG's default\n		   inline display — forcing display:block makes WebKit collapse it to 0. */width:1.25rem;height:1.25rem;fill:currentColor;color:currentColor;}.pie-sr-only.svelte-18mzc0g {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}\n\n	@media (prefers-reduced-motion: reduce) {.pie-tool-tts-inline__trigger.svelte-18mzc0g,\n		.pie-tool-tts-inline__control.svelte-18mzc0g {transition:none !important;}\n	}"
+	code: ".pie-tool-tts-inline.svelte-18mzc0g {position:relative;display:inline-flex;align-items:center;}.pie-tool-tts-inline--controls-row.svelte-18mzc0g {width:100%;justify-content:flex-end;}.pie-tool-tts-inline__trigger.svelte-18mzc0g {display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--pie-button-border-color, var(--pie-button-border, var(--pie-border, #c6c6c6)));background-color:var(--pie-button-background-color, var(--pie-button-bg, var(--pie-background, #fff)));color:var(--pie-button-color, var(--pie-text, #333));border-radius:0.25rem;cursor:pointer;transition:background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;}.pie-tool-tts-inline__trigger.svelte-18mzc0g:hover:not(:disabled),\n	.pie-tool-tts-inline__control.svelte-18mzc0g:hover:not(:disabled) {background-color:var(--pie-button-hover-background-color, var(--pie-button-hover-bg, var(--pie-secondary-background, #f2f4f8)));transform:translateY(-1px);box-shadow:0 2px 6px color-mix(in srgb, var(--pie-shadow, #000) 14%, transparent);}.pie-tool-tts-inline__trigger.svelte-18mzc0g:active:not(:disabled),\n	.pie-tool-tts-inline__control.svelte-18mzc0g:active:not(:disabled) {transform:translateY(0);box-shadow:none;}.pie-tool-tts-inline__trigger.svelte-18mzc0g:focus-visible,\n	.pie-tool-tts-inline__control.svelte-18mzc0g:focus-visible {outline:2px solid var(--pie-focus-outline, var(--pie-button-focus-outline, var(--pie-primary, #0066cc)));outline-offset:2px;box-shadow:0 0 0 4px color-mix(in srgb, var(--pie-primary, #0066cc) 22%, transparent);}.pie-tool-tts-inline__trigger--active.svelte-18mzc0g {border-color:var(--pie-tool-trigger-active-border-color, var(--pie-primary, #1565c0));background-color:var(\n			--pie-tool-trigger-active-background,\n			color-mix(in srgb, var(--pie-primary, #1565c0) 10%, var(--pie-background, #fff))\n		);color:var(--pie-tool-trigger-active-color, var(--pie-button-color, var(--pie-text, #333)));}.pie-tool-tts-inline__trigger--active.svelte-18mzc0g:hover:not(:disabled) {border-color:var(--pie-tool-trigger-active-border-color, var(--pie-primary, #1565c0));background-color:var(\n			--pie-tool-trigger-active-background,\n			color-mix(in srgb, var(--pie-primary, #1565c0) 10%, var(--pie-background, #fff))\n		);color:var(--pie-tool-trigger-active-color, var(--pie-button-color, var(--pie-text, #333)));}.pie-tool-tts-inline__panel.svelte-18mzc0g {display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:0.25rem;box-sizing:border-box;height:var(--pie-tts-controls-row-height, 2.875rem);padding:0 0.5rem;background:var(--pie-surface, var(--pie-background, #fff));border:1px solid var(--pie-border, #d0d0d0);border-radius:0.5rem;}.pie-tool-tts-inline__panel--floating.svelte-18mzc0g {position:absolute;z-index:2;top:100%;right:0;left:auto;}.pie-tool-tts-inline__panel--left-aligned-inline.svelte-18mzc0g {position:static;margin-right:0.5rem;}.pie-tool-tts-inline__panel--row.svelte-18mzc0g {position:absolute;z-index:2;top:100%;right:0;left:auto;}.pie-tool-tts-inline__control.svelte-18mzc0g {display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--pie-button-border-color, var(--pie-button-border, var(--pie-border, #c6c6c6)));border-radius:0.25rem;background:var(--pie-button-background-color, var(--pie-button-bg, var(--pie-background, #fff)));color:var(--pie-button-color, var(--pie-text, #222));cursor:pointer;transition:background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;}.pie-tool-tts-inline__control--speed.svelte-18mzc0g {font-size:0.6875rem;font-weight:400;letter-spacing:0;white-space:nowrap;}.pie-tool-tts-inline__control--speed-active.svelte-18mzc0g {border-color:var(--pie-primary, #1565c0);background:color-mix(in srgb, var(--pie-primary, #1565c0) 14%, var(--pie-background, #fff));color:var(--pie-primary, #1565c0);font-weight:600;}.pie-tool-tts-inline__trigger.svelte-18mzc0g:disabled,\n	.pie-tool-tts-inline__control.svelte-18mzc0g:disabled {cursor:not-allowed;opacity:0.6;}.pie-tool-tts-inline__trigger--sm.svelte-18mzc0g {width:1.75rem;height:1.75rem;}.pie-tool-tts-inline__trigger--sm.svelte-18mzc0g .pie-tool-tts-inline__icon:where(.svelte-18mzc0g) {width:1rem;height:1rem;}.pie-tool-tts-inline__trigger--md.svelte-18mzc0g {width:2rem;height:2rem;}.pie-tool-tts-inline__trigger--md.svelte-18mzc0g .pie-tool-tts-inline__icon:where(.svelte-18mzc0g) {width:1.25rem;height:1.25rem;}.pie-tool-tts-inline__trigger--lg.svelte-18mzc0g {width:2.5rem;height:2.5rem;}.pie-tool-tts-inline__trigger--lg.svelte-18mzc0g .pie-tool-tts-inline__icon:where(.svelte-18mzc0g) {width:1.5rem;height:1.5rem;}.pie-tool-tts-inline__icon.svelte-18mzc0g {\n		/* Default explicit size so control-button icons (rewind/fast-forward/stop)\n		   render in WebKit, which sizes an inline SVG that has only a viewBox (no\n		   width/height attributes) to 0. The play/pause trigger icon already works\n		   because the __trigger--sm/md/lg rules below set these dimensions; this\n		   gives the control-panel icons the same treatment. Keep the SVG's default\n		   inline display — forcing display:block makes WebKit collapse it to 0. */width:1.25rem;height:1.25rem;fill:currentColor;color:currentColor;}.pie-sr-only.svelte-18mzc0g {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}\n\n	@media (prefers-reduced-motion: reduce) {.pie-tool-tts-inline__trigger.svelte-18mzc0g,\n		.pie-tool-tts-inline__control.svelte-18mzc0g {transition:none !important;}\n	}"
 };
 function _i(o, s) {
 	We(s, !0), Ur(o, gi);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pie-players/pie-tool-tts-inline",
-	"version": "0.3.52",
+	"version": "0.3.53",
 	"type": "module",
 	"license": "MIT",
 	"main": "./dist/tool-tts-inline.js",
@@ -27,12 +27,13 @@
 	"scripts": {
 		"build": "vite build",
 		"dev": "vite build --watch",
+		"test": "bun test tests",
 		"typecheck": "tsc --noEmit",
 		"lint": "biome check ."
 	},
 	"dependencies": {
-		"@pie-players/pie-assessment-toolkit": "0.3.52",
-		"@pie-players/pie-context": "0.3.52"
+		"@pie-players/pie-assessment-toolkit": "0.3.53",
+		"@pie-players/pie-context": "0.3.53"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.4.12",