kempo-ui 0.4.4 → 0.4.5

package/dist/components/TextToSpeech.js

@@ -1,8 +1,8 @@
-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`
+import{html as t,css as e}from"../lit-all.min.js";import n from"./ShadowComponent.js";import{getVoice as s}from"../utils/voice.js";import"./Icon.js";export default class i 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}};#t=!1;#e=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.#t=!0)}disconnectedCallback(){super.disconnectedCallback(),this.stop()}get effectiveText(){return this.text?this.text:this.textContent.trim()}resolveVoice=()=>{if(this.#t)return null;const t=this.voice||s()||"";if(!t)return null;const e=window.speechSynthesis.getVoices(),n=t.split(",").map(t=>t.trim()).filter(Boolean);for(const t of n){const n=e.find(e=>e.name===t);if(n)return n}return null};speak=t=>{if(this.disabled||this.#t)return;const e=(void 0!==t?String(t):this.effectiveText).trim();if(!e)return;window.speechSynthesis.cancel();const n=new window.SpeechSynthesisUtterance(e);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.#e=n,window.speechSynthesis.speak(n)};stop=()=>{this.#t||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.#e=null,this.dispatchEvent(new CustomEvent("end",{bubbles:!0}))};handleError=t=>{this.speaking=!1,this.#e=null,this.dispatchEvent(new CustomEvent("error",{detail:{error:t.error||"unknown"},bubbles:!0}))};handleClick=()=>{this.disabled||this.toggle()};render(){const e=!this.#t,n=e?this.speaking?"Stop speaking":"Speak":"Text-to-speech not supported in this browser";return t`
       <button
         type="button"
         class="no-btn btn"
-        ?disabled=${this.disabled||!t}
+        ?disabled=${this.disabled||!e}
         @click=${this.handleClick}
         aria-label=${n}
         title=${n}
@@ -10,7 +10,7 @@ import{html as e,css as t}from"../lit-all.min.js";import n from"./ShadowComponen
         <k-icon name=${this.speaking?"stop":"record_voice_over"}></k-icon>
       </button>
       <slot style="display:none"></slot>
-    `}static styles=t`
+    `}static styles=e`
     :host {
       --btn_size: 2.5rem;
       --btn_bg: var(--c_bg);
@@ -53,4 +53,4 @@ import{html as e,css as t}from"../lit-all.min.js";import n from"./ShadowComponen
     .btn:disabled {
       cursor: not-allowed;
     }
-  `}customElements.define("k-text-to-speech",s);
+  `}customElements.define("k-text-to-speech",i);

package/dist/components/VoiceSelector.js

@@ -0,0 +1,49 @@
+import{html as e,css as t}from"../lit-all.min.js";import s from"./ShadowComponent.js";import{getVoice as n,setVoice as i,subscribeToVoice as a,subscribeToAvailableVoices as l}from"../utils/voice.js";const o=e=>(e||"").split("-")[0].toLowerCase();let c=null;try{if("undefined"!=typeof Intl&&Intl.DisplayNames){const e="undefined"!=typeof navigator&&navigator.language||"en";c=new Intl.DisplayNames([e],{type:"language"})}}catch(e){}const r=new Map,u=e=>{let t=e;if(c)try{t=c.of(e)||e}catch(e){}const s=(e=>{if(r.has(e))return r.get(e);let t="";try{"undefined"!=typeof Intl&&Intl.DisplayNames&&(t=new Intl.DisplayNames([e],{type:"language"}).of(e)||"")}catch(e){}return t&&(t=t.charAt(0).toUpperCase()+t.slice(1)),r.set(e,t),t})(e);return s&&s.toLowerCase()!==t.toLowerCase()?`${t} (${s})`:t};export default class h extends s{static properties={language:{type:String,reflect:!0},placeholder:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},voices:{state:!0},selected:{state:!0},currentLang:{state:!0}};#e=null;#t=null;#s=!1;#n=!1;constructor(){super(),this.language="",this.placeholder="Browser default",this.disabled=!1,this.voices=[],this.selected="",this.currentLang=""}connectedCallback(){super.connectedCallback(),"undefined"!=typeof window&&window.speechSynthesis?(this.#e=l(e=>{this.voices=e,this.#i()}),this.#t=a(e=>{if(this.selected=e||"",e){const t=this.voices.find(t=>t.name===e);t&&t.lang&&(this.currentLang=o(t.lang))}})):this.#s=!0}disconnectedCallback(){super.disconnectedCallback(),this.#e&&this.#e(),this.#t&&this.#t(),this.#e=null,this.#t=null}#i=()=>{if(this.#n||0===this.voices.length)return;this.#n=!0;const e=this.selected?this.voices.find(e=>e.name===this.selected):null;if(e&&e.lang)return void(this.currentLang=o(e.lang));if(this.language)return void(this.currentLang=o(this.language));const t="undefined"==typeof navigator?"en":o(navigator.language||"en")||"en",s=this.availableLanguages;s.includes(t)?this.currentLang=t:s.length>0&&(this.currentLang=s[0])};get availableLanguages(){const e=new Set;for(const t of this.voices)t.lang&&e.add(o(t.lang));return[...e].sort()}get voicesForCurrentLanguage(){return this.currentLang?this.voices.filter(e=>o(e.lang)===this.currentLang):this.voices}handleLanguageChange=e=>{if(this.disabled)return;this.currentLang=e.target.value;this.voicesForCurrentLanguage.some(e=>e.name===this.selected)||i("")};handleVoiceChange=e=>{if(this.disabled)return;const t=e.target.value;i(t),this.dispatchEvent(new CustomEvent("change",{detail:{voice:t,language:this.currentLang},bubbles:!0}))};refresh=()=>{this.#s||(this.voices=window.speechSynthesis.getVoices(),this.#i())};render(){if(this.#s)return e`
+        <select disabled aria-label="Voice selector (unsupported)">
+          <option>Speech synthesis not supported</option>
+        </select>
+      `;const t=this.availableLanguages,s=this.voicesForCurrentLanguage;return e`
+      <div class="row">
+        <div class="col" style="min-width: 10rem; flex: 0 0 auto">
+          <select
+            class="lang"
+            aria-label="Language"
+            ?disabled=${this.disabled||0===t.length}
+            .value=${this.currentLang}
+            @change=${this.handleLanguageChange}
+          >
+            ${t.map(t=>e`
+              <option value=${t} ?selected=${t===this.currentLang}>${u(t)}</option>
+            `)}
+          </select>
+        </div>
+        <div class="col">
+          <select
+            class="voice"
+            aria-label="Voice"
+            ?disabled=${this.disabled}
+            .value=${this.selected}
+            @change=${this.handleVoiceChange}
+          >
+            <option value="">${this.placeholder}</option>
+            ${s.map(t=>{return e`
+              <option
+                value=${t.name}
+                ?selected=${t.name===this.selected}
+              >${s=t.name,s.split("(")[0].trim()||s}</option>
+            `;var s})}
+          </select>
+        </div>
+      </div>
+    `}static styles=t`
+    :host {
+      display: block;
+    }
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    select {
+      width: 100%;
+    }
+  `}customElements.define("k-voice-selector",h);

package/dist/utils/voice.js

@@ -0,0 +1 @@
+import e from"./context.js";const t="k-voice",o=e("voice",(()=>{try{return localStorage.getItem(t)||""}catch(e){return""}})());o.subscribe(e=>{try{e?localStorage.setItem(t,e):localStorage.removeItem(t)}catch(e){}}),"undefined"!=typeof window&&window.addEventListener("storage",e=>{e.key===t&&o.set(e.newValue||"")});export const setVoice=e=>o.set(e||"");export const getVoice=()=>o.get();export const subscribeToVoice=e=>o.subscribe(e);export const getAvailableVoices=()=>"undefined"!=typeof window&&window.speechSynthesis?window.speechSynthesis.getVoices():[];export const waitForVoices=(e=2e3)=>{if("undefined"==typeof window||!window.speechSynthesis)return Promise.resolve([]);const t=window.speechSynthesis,o=t.getVoices();return o.length>0?Promise.resolve(o):new Promise(o=>{let s=!1;const i=()=>{s||(s=!0,t.removeEventListener("voiceschanged",i),o(t.getVoices()))};t.addEventListener("voiceschanged",i),setTimeout(()=>{s||(s=!0,t.removeEventListener("voiceschanged",i),o(t.getVoices()))},e)})};export const subscribeToAvailableVoices=e=>{if("undefined"==typeof window||!window.speechSynthesis)return e([]),()=>{};const t=window.speechSynthesis,o=()=>e(t.getVoices());return t.addEventListener("voiceschanged",o),o(),()=>t.removeEventListener("voiceschanged",o)};export default{get:getVoice,set:setVoice,subscribe:subscribeToVoice,getAvailable:getAvailableVoices,waitForVoices:waitForVoices,subscribeAvailable:subscribeToAvailableVoices};

package/docs/components/accordion.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/aside.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/calendar.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/card.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/code-editor.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/color-picker.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/combobox.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/content-slider.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/context.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/dialog.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/dropdown.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/filter-list.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/focus-capture.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>

package/docs/components/html-editor.html

@@ -198,6 +198,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="../components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="../components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="../components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -231,6 +234,8 @@
               href="../utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="../utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="../utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="../utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -317,6 +322,7 @@
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>
         <a href="../components/tree.html">Tree</a>
+        <a href="../components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -339,6 +345,7 @@
         <a href="../utils/string.html">string</a>
         <a href="../utils/theme.html">theme</a>
         <a href="../utils/type.html">type</a>
+        <a href="../utils/voice.html">voice</a>
         <a href="../utils/wait.html">wait</a>
       </div>
     </menu>