kempo-ui 0.4.3 → 0.4.4

package/docs-src/components/text-to-speech.page.html

@@ -0,0 +1,202 @@
+<page pageName="Text To Speech" title="Text To Speech - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+      <div class="m pl">
+        <h6>Examples</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#slotted">Slotted Text</a><br />
+        <a href="#rate">Rate &amp; Pitch</a><br />
+        <a href="#language">Language</a><br />
+        <a href="#dynamic">Dynamic Text</a><br />
+        <a href="#disabled">Disabled</a><br />
+
+        <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#methods">Methods</a><br />
+        <a href="#cssVariables">CSS Variables</a><br />
+        <a href="#events">Events</a><br />
+      </div>
+    </k-accordion-panel>
+    </k-accordion>
+
+    <p>Wraps the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis" target="_blank">SpeechSynthesis API</a> in a single button. Click to speak; click again while speaking to stop. Works in all modern browsers (Chromium, Firefox, Safari).</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>The <code>text</code> attribute holds the phrase to read aloud.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-text-to-speech</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;Hello, world!&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-text-to-speech</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-text-to-speech text="Hello, world!"></k-text-to-speech>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="slotted"><a href="#slotted" class="no-link">Slotted Text</a></h3>
+    <p>If <code>text</code> is not set, the element's text content is spoken. Useful when the text is longer or already lives in the DOM.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-text-to-speech</span>&gt;</span>The quick brown fox jumps over the lazy dog.<span class="hljs-tag">&lt;/<span class="hljs-name">k-text-to-speech</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-text-to-speech>The quick brown fox jumps over the lazy dog.</k-text-to-speech>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="rate"><a href="#rate" class="no-link">Rate &amp; Pitch</a></h3>
+    <p>Tune playback with the <code>rate</code> (<code>0.1</code>&ndash;<code>10</code>, default <code>1</code>) and <code>pitch</code> (<code>0</code>&ndash;<code>2</code>, default <code>1</code>) attributes. <code>volume</code> (<code>0</code>&ndash;<code>1</code>, default <code>1</code>) is also available.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-text-to-speech</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;Wow that is fast&quot;</span> <span class="hljs-attr">rate</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-text-to-speech</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-text-to-speech</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;A bit higher pitch&quot;</span> <span class="hljs-attr">pitch</span>=<span class="hljs-string">&quot;1.6&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-text-to-speech</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-text-to-speech text="Wow that is fast" rate="2" class="mr"></k-text-to-speech>
+          <k-text-to-speech text="A bit higher pitch" pitch="1.6"></k-text-to-speech>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="language"><a href="#language" class="no-link">Language</a></h3>
+    <p>Set <code>language</code> to a BCP&#x2011;47 tag to pick a localized voice (browser-dependent &mdash; the OS-installed voices determine availability).</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-text-to-speech</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;Bonjour le monde&quot;</span> <span class="hljs-attr">language</span>=<span class="hljs-string">&quot;fr-FR&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-text-to-speech</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-text-to-speech text="Bonjour le monde" language="fr-FR"></k-text-to-speech>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="dynamic"><a href="#dynamic" class="no-link">Dynamic Text</a></h3>
+    <p>Set the <code>text</code> property at runtime to read whatever is in an input or other DOM source.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-text-to-speech</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;ttsExample&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-text-to-speech</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;ttsInput&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;Type something then click the button&quot;</span> /&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">const</span> $tts = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;ttsExample&#x27;</span>);<br>  <span class="hljs-keyword">const</span> $input = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;ttsInput&#x27;</span>);<br>  $input.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;input&#x27;</span>, <span class="hljs-function">() =&gt;</span> {<br>    $tts.<span class="hljs-property">text</span> = $input.<span class="hljs-property">value</span>;<br>  });<br>  $tts.<span class="hljs-property">text</span> = $input.<span class="hljs-property">value</span>;<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-text-to-speech id="ttsExample" class="mr"></k-text-to-speech>
+          <input id="ttsInput" type="text" value="Type something then click the button" />
+          <script>
+            const $tts = document.getElementById('ttsExample');
+            const $input = document.getElementById('ttsInput');
+            $input.addEventListener('input', () => {
+              $tts.text = $input.value;
+            });
+            $tts.text = $input.value;
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="disabled"><a href="#disabled" class="no-link">Disabled</a></h3>
+    <p>The <code>disabled</code> attribute prevents user interaction. The button also auto-disables when the browser doesn't support the SpeechSynthesis API.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-text-to-speech</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;You can't hear this&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-text-to-speech</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-text-to-speech disabled text="You can't hear this"></k-text-to-speech>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5><code>new TextToSpeech()</code></h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li>A browser with <code>window.speechSynthesis</code> (all major modern browsers)</li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>text<i>: String</i></code></h5>
+    <p>The text to speak. When empty, the element's slotted text content is used. Syncs to <code>text</code> attribute.</p>
+
+    <h5><code>voice<i>: String</i></code></h5>
+    <p>Optional voice name (matched against <code>speechSynthesis.getVoices()</code>). Falls back to the default voice for the language. Syncs to <code>voice</code> attribute.</p>
+
+    <h5><code>language<i>: String</i></code></h5>
+    <p>BCP&#x2011;47 language tag (e.g. <code>"en-US"</code>, <code>"fr-FR"</code>). Default is empty (browser default). Syncs to <code>language</code> attribute.</p>
+
+    <h5><code>rate<i>: Number</i></code></h5>
+    <p>Speech rate from <code>0.1</code> (slow) to <code>10</code> (fast). Default is <code>1</code>. Syncs to <code>rate</code> attribute.</p>
+
+    <h5><code>pitch<i>: Number</i></code></h5>
+    <p>Pitch from <code>0</code> to <code>2</code>. Default is <code>1</code>. Syncs to <code>pitch</code> attribute.</p>
+
+    <h5><code>volume<i>: Number</i></code></h5>
+    <p>Volume from <code>0</code> (silent) to <code>1</code> (loud). Default is <code>1</code>. Syncs to <code>volume</code> attribute.</p>
+
+    <h5><code>disabled<i>: Boolean</i></code></h5>
+    <p>When <code>true</code>, the button cannot be clicked. Syncs to <code>disabled</code> attribute.</p>
+
+    <h5><code>speaking<i>: Boolean</i></code></h5>
+    <p>Reflects whether the component is currently speaking. The button shows the stop icon and switches to the active color while <code>true</code>. Syncs to <code>speaking</code> attribute.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>speak(textOverride?)<i>: void</i></code></h5>
+    <p>Begin speaking. If <code>textOverride</code> is supplied, it is spoken instead of <code>text</code>/slot content. Cancels any in-flight utterance first.</p>
+
+    <h5><code>stop()<i>: void</i></code></h5>
+    <p>Cancel any speech in progress.</p>
+
+    <h5><code>toggle()<i>: void</i></code></h5>
+    <p>Calls <code>stop()</code> if currently speaking, otherwise <code>speak()</code> &mdash; the same behavior as clicking the button.</p>
+
+    <h3 id="cssVariables"><a href="#cssVariables" class="no-link">CSS Variables</a></h3>
+    <table class="b">
+      <thead><tr><th>Variable</th><th>Default</th><th>Description</th></tr></thead>
+      <tbody>
+        <tr><td><code>--btn_size</code></td><td><code>2.5rem</code></td><td>Diameter of the button</td></tr>
+        <tr><td><code>--btn_bg</code></td><td><code>var(--c_bg)</code></td><td>Background of the idle button</td></tr>
+        <tr><td><code>--btn_bg__speaking</code></td><td><code>var(--c_primary)</code></td><td>Background while actively speaking</td></tr>
+        <tr><td><code>--btn_tc__speaking</code></td><td><code>white</code></td><td>Icon color while speaking</td></tr>
+      </tbody>
+    </table>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>start</code></h5>
+    <p>Fires when speech begins.</p>
+
+    <h5><code>end</code></h5>
+    <p>Fires when speech finishes (naturally or via <code>stop()</code>).</p>
+
+    <h5><code>error</code></h5>
+    <p>Fires if the underlying <code>SpeechSynthesisUtterance</code> reports an error. <code>detail</code> contains <code>{ error: String }</code>.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/TextToSpeech.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Icon.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>

package/docs-src/index.page.html

@@ -179,6 +179,12 @@
           <p class="tc-muted">Drag-and-drop lists with reordering and sort events.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/speech-to-text.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Speech To Text</h3>
+          <p class="tc-muted">Microphone button that uses the Web Speech API to transcribe spoken input.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/spinner.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Spinner</h3>
@@ -209,6 +215,12 @@
           <p class="tc-muted">Input field for adding and removing tags with keyboard support.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/text-to-speech.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Text To Speech</h3>
+          <p class="tc-muted">Button that speaks the given text aloud using the browser's SpeechSynthesis API.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/theme-select.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Theme Select</h3>

package/docs-src/nav.fragment.html

@@ -104,6 +104,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="{{pathToRoot}}components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="speech to text speechtotext microphone voice recognition transcription components"><a
+              href="{{pathToRoot}}components/speech-to-text.html"
+            >Speech To Text<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="spinner loading components"><a
               href="{{pathToRoot}}components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -156,6 +159,9 @@
               href="{{pathToRoot}}components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="{{pathToRoot}}components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="text to speech texttospeech tts speak voice synthesis components"><a
+              href="{{pathToRoot}}components/text-to-speech.html"
+            >Text To Speech<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="theme select dropdown dark light components"><a
               href="{{pathToRoot}}components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -281,11 +287,13 @@
         <a href="{{pathToRoot}}components/show-more.html">Show More</a>
         <a href="{{pathToRoot}}components/slider.html">Slider</a>
         <a href="{{pathToRoot}}components/sortable.html">Sortable</a>
+        <a href="{{pathToRoot}}components/speech-to-text.html">Speech To Text</a>
         <a href="{{pathToRoot}}components/spinner.html">Spinner</a>
         <a href="{{pathToRoot}}components/split.html">Split</a>
         <a href="{{pathToRoot}}components/table.html">Table</a>
         <a href="{{pathToRoot}}components/tabs.html">Tabs</a>
         <a href="{{pathToRoot}}components/tags.html">Tags</a>
+        <a href="{{pathToRoot}}components/text-to-speech.html">Text To Speech</a>
         <a href="{{pathToRoot}}components/theme-select.html">Theme Select</a>
         <a href="{{pathToRoot}}components/theme-switcher.html">Theme Switcher</a>
         <a href="{{pathToRoot}}components/time.html">Time</a>

package/icons/mic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M395-435q-35-35-35-85v-240q0-50 35-85t85-35q50 0 85 35t35 85v240q0 50-35 85t-85 35q-50 0-85-35Zm85-205Zm-40 520v-123q-104-14-172-93t-68-184h80q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h80q0 105-68 184t-172 93v123h-80Zm68.5-371.5Q520-503 520-520v-240q0-17-11.5-28.5T480-800q-17 0-28.5 11.5T440-760v240q0 17 11.5 28.5T480-480q17 0 28.5-11.5Z"/></svg>

package/icons/record_voice_over.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m798-322-62-62q44-41 69-97t25-119q0-63-25-118t-69-96l62-64q56 53 89 125t33 153q0 81-33 153t-89 125ZM670-450l-64-64q18-17 29-38.5t11-47.5q0-26-11-47.5T606-686l64-64q32 29 50 67.5t18 82.5q0 44-18 82.5T670-450Zm-310 10q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-120v-112q0-33 17-62t47-44q51-26 115-44t141-18q77 0 141 18t115 44q30 15 47 44t17 62v112H40Zm80-80h480v-32q0-11-5.5-20T580-266q-36-18-92.5-36T360-320q-71 0-127.5 18T140-266q-9 5-14.5 14t-5.5 20v32Zm296.5-343.5Q440-567 440-600t-23.5-56.5Q393-680 360-680t-56.5 23.5Q280-633 280-600t23.5 56.5Q327-520 360-520t56.5-23.5ZM360-600Zm0 400Z"/></svg>

package/icons/stop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M240-240v-480h480v480H240Z"/></svg>

package/llms.txt

@@ -76,11 +76,13 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-show-more>` | `ShowMore.js` | Truncated content with expand toggle | [show-more.html](https://dustinpoissant.github.io/kempo-ui/components/show-more.html) |
 | `<k-slider>` | `Slider.js` | Slider with min, max, discrete step snap points, vertical orientation, and dual-handle range mode via comma-separated `value` (e.g. `"20,80"`); `format` attribute for value formatting (e.g. `"$0.00"`) applied to change events, form submission, and optional drag `tooltip`; form-associated; fires `change` | [slider.html](https://dustinpoissant.github.io/kempo-ui/components/slider.html) |
 | `<k-sortable>` `<k-sortable-item>` | `Sortable.js` | Drag-to-reorder list | [sortable.html](https://dustinpoissant.github.io/kempo-ui/components/sortable.html) |
+| `<k-speech-to-text>` | `SpeechToText.js` | Microphone button wrapping the Web Speech API; click to start, click again or pause to stop; `language`, `continuous`, `interim`, `min-confidence` (0-1 noise filter), `timeout` (max recording seconds) attrs; fires `start`, `result` (with `{text, isFinal}`), `end` (with `{text}`), `error` | [speech-to-text.html](https://dustinpoissant.github.io/kempo-ui/components/speech-to-text.html) |
 | `<k-spinner>` | `Spinner.js` | Loading indicator; `size` (xs/sm/md/lg/xl), `variant` (spinner/dots/bar) | [spinner.html](https://dustinpoissant.github.io/kempo-ui/components/spinner.html) |
 | `<k-split>` | `Split.js` | Resizable split panes | [split.html](https://dustinpoissant.github.io/kempo-ui/components/split.html) |
 | `<k-table>` | `Table.js` | Data table with sorting, filtering, pagination, row selection, server sync; `placeholder` (default "No Records") shown when empty; `filtered-placeholder` shown when all records are filtered/hidden | [table.html](https://dustinpoissant.github.io/kempo-ui/components/table.html) |
 | `<k-tabs>` `<k-tab>` `<k-tab-content>` `<k-tab-spacer>` | `Tabs.js` | Tabbed interface; `<k-tab for-content="id">` links to `<k-tab-content name="id">` | [tabs.html](https://dustinpoissant.github.io/kempo-ui/components/tabs.html) |
 | `<k-tags>` `<k-tag>` | `Tags.js` | Tag input; add/remove tags; fires `change` | [tags.html](https://dustinpoissant.github.io/kempo-ui/components/tags.html) |
+| `<k-text-to-speech>` | `TextToSpeech.js` | Button that wraps `window.speechSynthesis`; speaks `text` attr or slotted content; `voice`, `language`, `rate`, `pitch`, `volume` attrs; methods `speak(text?)` / `stop()` / `toggle()`; fires `start`, `end`, `error` | [text-to-speech.html](https://dustinpoissant.github.io/kempo-ui/components/text-to-speech.html) |
 | `<k-theme-select>` | `ThemeSelect.js` | Dropdown to pick a theme | [theme-select.html](https://dustinpoissant.github.io/kempo-ui/components/theme-select.html) |
 | `<k-theme-switcher>` | `ThemeSwitcher.js` | Theme switcher with segmented and toggle display modes | [theme-switcher.html](https://dustinpoissant.github.io/kempo-ui/components/theme-switcher.html) |
 | `<k-time>` | `Time.js` | Wraps native `<input type="time">` with segmented hour/minute/AM-PM editing; `value` is 24-hour `HH:MM`; `increment` attr sets minute step (arrow-key granularity); `military` attr forces 24-hour display via `lang="en-GB"`; form-associated; fires `change` | [time.html](https://dustinpoissant.github.io/kempo-ui/components/time.html) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/SpeechToText.js

@@ -0,0 +1,252 @@
+import { html, css } from '../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+import './Icon.js';
+
+export default class SpeechToText extends ShadowComponent {
+  static properties = {
+    language: { type: String, reflect: true },
+    continuous: { type: Boolean, reflect: true },
+    interim: { type: Boolean, reflect: true },
+    minConfidence: { type: Number, reflect: true, attribute: 'min-confidence' },
+    timeout: { type: Number, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    listening: { type: Boolean, reflect: true }
+  };
+
+  #recognition = null;
+  #buffer = '';
+  #interim = '';
+  #unsupported = false;
+  #timeoutId = null;
+
+  /*
+    Lifecycle Callbacks
+  */
+  constructor() {
+    super();
+    this.language = 'en-US';
+    this.continuous = false;
+    this.interim = false;
+    this.minConfidence = 0;
+    this.timeout = 0;
+    this.disabled = false;
+    this.listening = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+    if(!SR){
+      this.#unsupported = true;
+      return;
+    }
+    this.#recognition = new SR();
+    this.#recognition.lang = this.language;
+    this.#recognition.continuous = this.continuous;
+    // Always enable interim internally so the `end` event has a fallback
+    // transcript when the engine doesn't finalize. The public `interim` attr
+    // controls whether `result` events fire for unfinalized chunks.
+    this.#recognition.interimResults = true;
+    this.#recognition.onstart = this.handleStart;
+    this.#recognition.onend = this.handleEnd;
+    this.#recognition.onresult = this.handleResult;
+    this.#recognition.onerror = this.handleError;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#clearTimeout();
+    if(this.#recognition){
+      try { this.#recognition.stop(); } catch(e) {}
+      this.#recognition.onstart = null;
+      this.#recognition.onend = null;
+      this.#recognition.onresult = null;
+      this.#recognition.onerror = null;
+      this.#recognition = null;
+    }
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if(this.#recognition){
+      if(changedProperties.has('language')) this.#recognition.lang = this.language;
+      if(changedProperties.has('continuous')) this.#recognition.continuous = this.continuous;
+    }
+  }
+
+  /*
+    Event Handlers
+  */
+  handleStart = () => {
+    this.#buffer = '';
+    this.#interim = '';
+    this.listening = true;
+    this.#armTimeout();
+    this.dispatchEvent(new CustomEvent('start', { bubbles: true }));
+  };
+
+  handleResult = (e) => {
+    let final = '';
+    let interim = '';
+    for(let i = e.resultIndex; i < e.results.length; i++){
+      const res = e.results[i];
+      const alt = res[0];
+      const confidence = typeof alt.confidence === 'number' ? alt.confidence : 0;
+      if(confidence < this.minConfidence) continue;
+      if(res.isFinal) final += alt.transcript;
+      else interim += alt.transcript;
+    }
+    if(final) this.#buffer += final;
+    // Only overwrite the cached interim when this event actually carries text.
+    // Chrome occasionally fires a "settling" result event where final/interim
+    // are both empty — wiping #interim in that case loses the last transcript
+    // and the `end` event ends up with nothing to report.
+    if(final || interim){
+      this.#interim = interim;
+    }
+    if(final || this.interim){
+      this.dispatchEvent(new CustomEvent('result', {
+        detail: {
+          text: (this.#buffer + (interim || this.#interim)).trim(),
+          isFinal: !!final && !interim
+        },
+        bubbles: true
+      }));
+    }
+  };
+
+  handleEnd = () => {
+    this.listening = false;
+    this.#clearTimeout();
+    // Include any unfinalized interim text — Chrome occasionally fires `end`
+    // without finalizing the last utterance.
+    const text = (this.#buffer + this.#interim).trim();
+    this.dispatchEvent(new CustomEvent('end', {
+      detail: { text },
+      bubbles: true
+    }));
+  };
+
+  handleError = (e) => {
+    this.listening = false;
+    this.#clearTimeout();
+    this.dispatchEvent(new CustomEvent('error', {
+      detail: { error: e.error, message: e.message },
+      bubbles: true
+    }));
+  };
+
+  #armTimeout = () => {
+    this.#clearTimeout();
+    if(this.timeout > 0){
+      this.#timeoutId = setTimeout(() => this.stop(), this.timeout * 1000);
+    }
+  };
+
+  #clearTimeout = () => {
+    if(this.#timeoutId){
+      clearTimeout(this.#timeoutId);
+      this.#timeoutId = null;
+    }
+  };
+
+  handleClick = () => {
+    if(this.disabled) return;
+    if(this.listening) this.stop();
+    else this.start();
+  };
+
+  /*
+    Public Methods
+  */
+  start = () => {
+    if(this.disabled || !this.#recognition || this.listening) return;
+    try { this.#recognition.start(); } catch(e) {}
+  };
+
+  stop = () => {
+    if(!this.#recognition || !this.listening) return;
+    try { this.#recognition.stop(); } catch(e) {}
+  };
+
+  toggle = () => {
+    this.handleClick();
+  };
+
+  /*
+    Rendering
+  */
+  render() {
+    const supported = !this.#unsupported;
+    const label = !supported
+      ? 'Speech recognition not supported in this browser'
+      : this.listening ? 'Stop listening' : 'Start listening';
+    return html`
+      <button
+        type="button"
+        class="no-btn btn ${this.listening ? 'listening' : ''}"
+        ?disabled=${this.disabled || !supported}
+        @click=${this.handleClick}
+        aria-label=${label}
+        title=${label}
+      >
+        <k-icon name=${this.listening ? 'stop' : 'mic'}></k-icon>
+      </button>
+    `;
+  }
+
+  /*
+    Styles
+  */
+  static styles = css`
+    :host {
+      --btn_size: 2.5rem;
+      --btn_bg: var(--c_bg);
+      --btn_bg__listening: var(--c_danger, #d32f2f);
+      --btn_tc__listening: white;
+      display: inline-block;
+    }
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--btn_size);
+      height: var(--btn_size);
+      padding: 0;
+      border: 1px solid var(--c_border);
+      border-radius: 50%;
+      background: var(--btn_bg);
+      color: var(--tc);
+      cursor: pointer;
+      transition: background var(--animation_ms), color var(--animation_ms), border-color var(--animation_ms);
+    }
+    .btn:hover:not(:disabled) {
+      background: var(--c_bg__alt);
+    }
+    .btn:focus-visible {
+      outline: none;
+      box-shadow: var(--focus_shadow);
+    }
+    :host([listening]) .btn,
+    :host([listening]) .btn:hover,
+    :host([listening]) .btn:focus-visible {
+      background: var(--btn_bg__listening);
+      color: var(--btn_tc__listening);
+      border-color: transparent;
+      animation: pulse 1.4s infinite;
+    }
+    .btn:disabled {
+      cursor: not-allowed;
+    }
+    @keyframes pulse {
+      0%, 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.5); }
+      50% { box-shadow: 0 0 0 10px rgba(211, 47, 47, 0); }
+    }
+  `;
+}
+
+customElements.define('k-speech-to-text', SpeechToText);