kempo-ui 0.4.3 → 0.4.4

package/dist/components/SpeechToText.js

@@ -0,0 +1,60 @@
+import{html as t,css as i}from"../lit-all.min.js";import n from"./ShadowComponent.js";import"./Icon.js";export default class e extends n{static properties={language:{type:String,reflect:!0},continuous:{type:Boolean,reflect:!0},interim:{type:Boolean,reflect:!0},minConfidence:{type:Number,reflect:!0,attribute:"min-confidence"},timeout:{type:Number,reflect:!0},disabled:{type:Boolean,reflect:!0},listening:{type:Boolean,reflect:!0}};#t=null;#i="";#n="";#e=!1;#s=null;constructor(){super(),this.language="en-US",this.continuous=!1,this.interim=!1,this.minConfidence=0,this.timeout=0,this.disabled=!1,this.listening=!1}connectedCallback(){super.connectedCallback();const t=window.SpeechRecognition||window.webkitSpeechRecognition;t?(this.#t=new t,this.#t.lang=this.language,this.#t.continuous=this.continuous,this.#t.interimResults=!0,this.#t.onstart=this.handleStart,this.#t.onend=this.handleEnd,this.#t.onresult=this.handleResult,this.#t.onerror=this.handleError):this.#e=!0}disconnectedCallback(){if(super.disconnectedCallback(),this.#o(),this.#t){try{this.#t.stop()}catch(t){}this.#t.onstart=null,this.#t.onend=null,this.#t.onresult=null,this.#t.onerror=null,this.#t=null}}updated(t){super.updated(t),this.#t&&(t.has("language")&&(this.#t.lang=this.language),t.has("continuous")&&(this.#t.continuous=this.continuous))}handleStart=()=>{this.#i="",this.#n="",this.listening=!0,this.#r(),this.dispatchEvent(new CustomEvent("start",{bubbles:!0}))};handleResult=t=>{let i="",n="";for(let e=t.resultIndex;e<t.results.length;e++){const s=t.results[e],o=s[0];("number"==typeof o.confidence?o.confidence:0)<this.minConfidence||(s.isFinal?i+=o.transcript:n+=o.transcript)}i&&(this.#i+=i),(i||n)&&(this.#n=n),(i||this.interim)&&this.dispatchEvent(new CustomEvent("result",{detail:{text:(this.#i+(n||this.#n)).trim(),isFinal:!!i&&!n},bubbles:!0}))};handleEnd=()=>{this.listening=!1,this.#o();const t=(this.#i+this.#n).trim();this.dispatchEvent(new CustomEvent("end",{detail:{text:t},bubbles:!0}))};handleError=t=>{this.listening=!1,this.#o(),this.dispatchEvent(new CustomEvent("error",{detail:{error:t.error,message:t.message},bubbles:!0}))};#r=()=>{this.#o(),this.timeout>0&&(this.#s=setTimeout(()=>this.stop(),1e3*this.timeout))};#o=()=>{this.#s&&(clearTimeout(this.#s),this.#s=null)};handleClick=()=>{this.disabled||(this.listening?this.stop():this.start())};start=()=>{if(!this.disabled&&this.#t&&!this.listening)try{this.#t.start()}catch(t){}};stop=()=>{if(this.#t&&this.listening)try{this.#t.stop()}catch(t){}};toggle=()=>{this.handleClick()};render(){const i=!this.#e,n=i?this.listening?"Stop listening":"Start listening":"Speech recognition not supported in this browser";return t`
+      <button
+        type="button"
+        class="no-btn btn ${this.listening?"listening":""}"
+        ?disabled=${this.disabled||!i}
+        @click=${this.handleClick}
+        aria-label=${n}
+        title=${n}
+      >
+        <k-icon name=${this.listening?"stop":"mic"}></k-icon>
+      </button>
+    `}static styles=i`
+    :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",e);

package/dist/components/TextToSpeech.js

@@ -0,0 +1,56 @@
+import{html as e,css as t}from"../lit-all.min.js";import n from"./ShadowComponent.js";import"./Icon.js";export default class s extends n{static properties={text:{type:String,reflect:!0},voice:{type:String,reflect:!0},language:{type:String,reflect:!0},rate:{type:Number,reflect:!0},pitch:{type:Number,reflect:!0},volume:{type:Number,reflect:!0},disabled:{type:Boolean,reflect:!0},speaking:{type:Boolean,reflect:!0}};#e=!1;#t=null;constructor(){super(),this.text="",this.voice="",this.language="",this.rate=1,this.pitch=1,this.volume=1,this.disabled=!1,this.speaking=!1}connectedCallback(){super.connectedCallback(),"undefined"!=typeof window&&window.speechSynthesis&&"function"==typeof window.SpeechSynthesisUtterance||(this.#e=!0)}disconnectedCallback(){super.disconnectedCallback(),this.stop()}get effectiveText(){return this.text?this.text:this.textContent.trim()}resolveVoice=()=>{if(!this.voice||this.#e)return null;return window.speechSynthesis.getVoices().find(e=>e.name===this.voice)||null};speak=e=>{if(this.disabled||this.#e)return;const t=(void 0!==e?String(e):this.effectiveText).trim();if(!t)return;window.speechSynthesis.cancel();const n=new window.SpeechSynthesisUtterance(t);n.rate=this.rate,n.pitch=this.pitch,n.volume=this.volume,this.language&&(n.lang=this.language);const s=this.resolveVoice();s&&(n.voice=s),n.onstart=this.handleStart,n.onend=this.handleEnd,n.onerror=this.handleError,this.#t=n,window.speechSynthesis.speak(n)};stop=()=>{this.#e||window.speechSynthesis.cancel()};toggle=()=>{this.speaking?this.stop():this.speak()};handleStart=()=>{this.speaking=!0,this.dispatchEvent(new CustomEvent("start",{bubbles:!0}))};handleEnd=()=>{this.speaking=!1,this.#t=null,this.dispatchEvent(new CustomEvent("end",{bubbles:!0}))};handleError=e=>{this.speaking=!1,this.#t=null,this.dispatchEvent(new CustomEvent("error",{detail:{error:e.error||"unknown"},bubbles:!0}))};handleClick=()=>{this.disabled||this.toggle()};render(){const t=!this.#e,n=t?this.speaking?"Stop speaking":"Speak":"Text-to-speech not supported in this browser";return e`
+      <button
+        type="button"
+        class="no-btn btn"
+        ?disabled=${this.disabled||!t}
+        @click=${this.handleClick}
+        aria-label=${n}
+        title=${n}
+      >
+        <k-icon name=${this.speaking?"stop":"record_voice_over"}></k-icon>
+      </button>
+      <slot style="display:none"></slot>
+    `}static styles=t`
+    :host {
+      --btn_size: 2.5rem;
+      --btn_bg: var(--c_bg);
+      --btn_bg__speaking: var(--c_primary);
+      --btn_tc__speaking: 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([speaking]) .btn,
+    :host([speaking]) .btn:hover,
+    :host([speaking]) .btn:focus-visible {
+      background: var(--btn_bg__speaking);
+      color: var(--btn_tc__speaking);
+      border-color: transparent;
+    }
+    .btn:disabled {
+      cursor: not-allowed;
+    }
+  `}customElements.define("k-text-to-speech",s);

package/docs/components/accordion.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/aside.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/calendar.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/card.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/code-editor.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/color-picker.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/combobox.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/content-slider.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/context.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/dialog.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/dropdown.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/filter-list.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/focus-capture.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>

package/docs/components/html-editor.html

@@ -120,6 +120,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="../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="../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="../components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -172,6 +175,9 @@
               href="../components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="../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="../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="../components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
@@ -297,11 +303,13 @@
         <a href="../components/show-more.html">Show More</a>
         <a href="../components/slider.html">Slider</a>
         <a href="../components/sortable.html">Sortable</a>
+        <a href="../components/speech-to-text.html">Speech To Text</a>
         <a href="../components/spinner.html">Spinner</a>
         <a href="../components/split.html">Split</a>
         <a href="../components/table.html">Table</a>
         <a href="../components/tabs.html">Tabs</a>
         <a href="../components/tags.html">Tags</a>
+        <a href="../components/text-to-speech.html">Text To Speech</a>
         <a href="../components/theme-select.html">Theme Select</a>
         <a href="../components/theme-switcher.html">Theme Switcher</a>
         <a href="../components/time.html">Time</a>