kempo-ui 0.4.2 → 0.4.4

package/docs/components/timestamp.html

@@ -62,6 +62,9 @@
               href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a
               href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="calendar date picker range month day components"><a
+              href="../components/calendar.html"
+            >Calendar<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a
               href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
@@ -117,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
@@ -169,12 +175,18 @@
               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>
           <k-filter-item filter-keywords="theme switcher dark light components"><a
               href="../components/theme-switcher.html"
             >Theme Switcher<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="time picker clock hour minute form components"><a
+              href="../components/time.html"
+            >Time<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="timestamp date time components"><a
               href="../components/timestamp.html"
             >Timestamp<br><small>Component</small></a></k-filter-item>
@@ -269,6 +281,7 @@
         <h3>Components</h3>
         <a href="../components/accordion.html">Accordion</a>
         <a href="../components/aside.html">Aside</a>
+        <a href="../components/calendar.html">Calendar</a>
         <a href="../components/card.html">Card</a>
         <a href="../components/code-editor.html">Code Editor</a>
         <a href="../components/combobox.html">Combobox</a>
@@ -290,13 +303,16 @@
         <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>
         <a href="../components/timestamp.html">Timestamp</a>
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>

package/docs/components/toast.html

@@ -62,6 +62,9 @@
               href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a
               href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="calendar date picker range month day components"><a
+              href="../components/calendar.html"
+            >Calendar<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a
               href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
@@ -117,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
@@ -169,12 +175,18 @@
               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>
           <k-filter-item filter-keywords="theme switcher dark light components"><a
               href="../components/theme-switcher.html"
             >Theme Switcher<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="time picker clock hour minute form components"><a
+              href="../components/time.html"
+            >Time<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="timestamp date time components"><a
               href="../components/timestamp.html"
             >Timestamp<br><small>Component</small></a></k-filter-item>
@@ -269,6 +281,7 @@
         <h3>Components</h3>
         <a href="../components/accordion.html">Accordion</a>
         <a href="../components/aside.html">Aside</a>
+        <a href="../components/calendar.html">Calendar</a>
         <a href="../components/card.html">Card</a>
         <a href="../components/code-editor.html">Code Editor</a>
         <a href="../components/combobox.html">Combobox</a>
@@ -290,13 +303,16 @@
         <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>
         <a href="../components/timestamp.html">Timestamp</a>
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>

package/docs/components/toggle.html

@@ -62,6 +62,9 @@
               href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a
               href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="calendar date picker range month day components"><a
+              href="../components/calendar.html"
+            >Calendar<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a
               href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
@@ -117,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
@@ -169,12 +175,18 @@
               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>
           <k-filter-item filter-keywords="theme switcher dark light components"><a
               href="../components/theme-switcher.html"
             >Theme Switcher<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="time picker clock hour minute form components"><a
+              href="../components/time.html"
+            >Time<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="timestamp date time components"><a
               href="../components/timestamp.html"
             >Timestamp<br><small>Component</small></a></k-filter-item>
@@ -269,6 +281,7 @@
         <h3>Components</h3>
         <a href="../components/accordion.html">Accordion</a>
         <a href="../components/aside.html">Aside</a>
+        <a href="../components/calendar.html">Calendar</a>
         <a href="../components/card.html">Card</a>
         <a href="../components/code-editor.html">Code Editor</a>
         <a href="../components/combobox.html">Combobox</a>
@@ -290,13 +303,16 @@
         <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>
         <a href="../components/timestamp.html">Timestamp</a>
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>

package/docs/components/tree.html

@@ -62,6 +62,9 @@
               href="../components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a
               href="../components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="calendar date picker range month day components"><a
+              href="../components/calendar.html"
+            >Calendar<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a
               href="../components/card.html">Card<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
@@ -117,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
@@ -169,12 +175,18 @@
               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>
           <k-filter-item filter-keywords="theme switcher dark light components"><a
               href="../components/theme-switcher.html"
             >Theme Switcher<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="time picker clock hour minute form components"><a
+              href="../components/time.html"
+            >Time<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="timestamp date time components"><a
               href="../components/timestamp.html"
             >Timestamp<br><small>Component</small></a></k-filter-item>
@@ -269,6 +281,7 @@
         <h3>Components</h3>
         <a href="../components/accordion.html">Accordion</a>
         <a href="../components/aside.html">Aside</a>
+        <a href="../components/calendar.html">Calendar</a>
         <a href="../components/card.html">Card</a>
         <a href="../components/code-editor.html">Code Editor</a>
         <a href="../components/combobox.html">Combobox</a>
@@ -290,13 +303,16 @@
         <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>
         <a href="../components/timestamp.html">Timestamp</a>
         <a href="../components/toast.html">Toast</a>
         <a href="../components/toggle.html">Toggle</a>

package/docs/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/docs/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/docs/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/docs/index.html

@@ -62,6 +62,9 @@
               href="./components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a
               href="./components/aside.html">Aside<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="calendar date picker range month day components"><a
+              href="./components/calendar.html"
+            >Calendar<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a
               href="./components/card.html">Card<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
@@ -117,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
@@ -169,12 +175,18 @@
               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>
           <k-filter-item filter-keywords="theme switcher dark light components"><a
               href="./components/theme-switcher.html"
             >Theme Switcher<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="time picker clock hour minute form components"><a
+              href="./components/time.html"
+            >Time<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="timestamp date time components"><a
               href="./components/timestamp.html"
             >Timestamp<br><small>Component</small></a></k-filter-item>
@@ -269,6 +281,7 @@
         <h3>Components</h3>
         <a href="./components/accordion.html">Accordion</a>
         <a href="./components/aside.html">Aside</a>
+        <a href="./components/calendar.html">Calendar</a>
         <a href="./components/card.html">Card</a>
         <a href="./components/code-editor.html">Code Editor</a>
         <a href="./components/combobox.html">Combobox</a>
@@ -290,13 +303,16 @@
         <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>
         <a href="./components/timestamp.html">Timestamp</a>
         <a href="./components/toast.html">Toast</a>
         <a href="./components/toggle.html">Toggle</a>
@@ -490,6 +506,12 @@
           <p class="tc-muted">Enhanced sidebar component with push and overlay modes.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./components/calendar.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Calendar</h3>
+          <p class="tc-muted">Month-grid date picker widget with single and range selection modes.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="./components/card.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Card</h3>
@@ -616,6 +638,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="./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="./components/spinner.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Spinner</h3>
@@ -646,6 +674,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="./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="./components/theme-select.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Theme Select</h3>
@@ -658,6 +692,12 @@
           <p class="tc-muted">Toggle between light, dark, and auto theme modes.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./components/time.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Time</h3>
+          <p class="tc-muted">Time picker with 12/24-hour display, configurable minute increments, and form submission.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="./components/timestamp.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Timestamp</h3>

package/docs/src/components/Calendar.js

@@ -0,0 +1,170 @@
+import{html as e,css as t}from"../lit-all.min.js";import a from"./ShadowComponent.js";const i=["January","February","March","April","May","June","July","August","September","October","November","December"],s=["Su","Mo","Tu","We","Th","Fr","Sa"];export default class r extends a{static formAssociated=!0;static properties={value:{type:String,reflect:!0},name:{type:String,reflect:!0},mode:{type:String,reflect:!0},min:{type:String,reflect:!0},max:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0},view:{state:!0},hoverDate:{state:!0}};constructor(){super(),this.internals=this.attachInternals(),this.value="",this.name="",this.mode="single",this.min="",this.max="",this.disabled=!1,this.required=!1;const e=new Date;this.view=`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}`,this.hoverDate=null}#e=!1;updated(e){if(super.updated(e),this.internals.setFormValue(this.value),this.required&&!this.value?this.internals.setValidity({valueMissing:!0},"Please select a date.",this.shadowRoot?.querySelector(".day")):this.internals.setValidity({}),e.has("value")&&void 0!==e.get("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0})),e.has("value")&&this.value&&!this.#e){const e=this.fromIso(this.value.split(",")[0]);if(e){const t=`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}`;t!==this.view&&(this.view=t)}}this.#e=!1}get isRange(){return"range"===this.mode}get viewYear(){return Number(this.view.split("-")[0])}get viewMonth(){return Number(this.view.split("-")[1])-1}get parsed(){if(!this.value)return this.isRange?{start:null,end:null}:{date:null};if(this.isRange){const[e,t]=this.value.split(",");return{start:e?this.fromIso(e):null,end:t?this.fromIso(t):null}}return{date:this.fromIso(this.value)}}toIso=e=>e?`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`:"";fromIso=e=>{if(!e)return null;const[t,a,i]=e.split("-").map(Number);return isNaN(t)||isNaN(a)||isNaN(i)?null:new Date(t,a-1,i)};isSameDay=(e,t)=>!(!e||!t)&&(e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate());isWithinRange=(e,t,a)=>{if(!t||!a||!e)return!1;const i=e.getTime();return i>t.getTime()&&i<a.getTime()};resolveDate=e=>{if(!e)return null;const t=String(e).toLowerCase();if("today"===t||"tomorrow"===t||"yesterday"===t){const e=new Date;return e.setHours(0,0,0,0),"tomorrow"===t&&e.setDate(e.getDate()+1),"yesterday"===t&&e.setDate(e.getDate()-1),e}return this.fromIso(e)};get minDate(){return this.resolveDate(this.min)||this.fromIso("1900-01-01")}get maxDate(){if(this.max)return this.resolveDate(this.max);const e=new Date;return new Date(e.getFullYear()+10,11,31)}isDisabledDate=e=>{if(!e)return!1;const t=this.minDate;if(t&&e<t)return!0;const a=this.maxDate;return!!(a&&e>a)};get availableYears(){const e=this.minDate?.getFullYear()??1900,t=this.maxDate?.getFullYear()??(new Date).getFullYear()+10,a=[];for(let i=e;i<=t;i++)a.push(i);return a}isMonthDisabled=(e,t)=>{const a=new Date(e,t+1,0),i=new Date(e,t,1),s=this.minDate,r=this.maxDate;return!!(s&&a<s)||!!(r&&i>r)};get weekGrid(){const e=this.viewYear,t=this.viewMonth,a=new Date(e,t,1).getDay(),i=new Date(e,t,1-a),s=[];for(let e=0;e<6;e++){const t=[];for(let a=0;a<7;a++){const s=new Date(i);s.setDate(i.getDate()+7*e+a),t.push(s)}s.push(t)}return s}get monthLabel(){return`${i[this.viewMonth]} ${this.viewYear}`}prevMonth=()=>{const e=new Date(this.viewYear,this.viewMonth-1,1);this.view=`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}`};nextMonth=()=>{const e=new Date(this.viewYear,this.viewMonth+1,1);this.view=`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}`};goToMonth=(e,t)=>{this.view=`${e}-${String(t+1).padStart(2,"0")}`};goToToday=()=>{const e=new Date;this.view=`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}`};handleDayClick=e=>{if(!this.disabled&&!this.isDisabledDate(e))if(this.#e=!0,this.isRange){const{start:t,end:a}=this.parsed;this.value=!t||a?this.toIso(e):e<t?`${this.toIso(e)},${this.toIso(t)}`:`${this.toIso(t)},${this.toIso(e)}`}else this.value=this.toIso(e)};handleDayHover=e=>{this.isRange&&(this.hoverDate=e)};handleMouseLeave=()=>{this.isRange&&(this.hoverDate=null)};handleMonthChange=e=>{this.goToMonth(this.viewYear,Number(e.target.value))};handleYearChange=e=>{this.goToMonth(Number(e.target.value),this.viewMonth)};render(){const t=new Date,a=this.parsed,r=a.date,n=a.start,o=a.end,l=this.isRange&&n&&!o&&this.hoverDate?this.hoverDate:o,d=this.isRange&&n&&l&&n>l?l:n,h=this.isRange&&n&&l&&n>l?n:l;return e`
+      <div class="header">
+        <select
+          class="month-select"
+          aria-label="Month"
+          ?disabled=${this.disabled}
+          @change=${this.handleMonthChange}
+        >
+          ${i.map((t,a)=>e`
+            <option
+              value=${a}
+              ?selected=${a===this.viewMonth}
+              ?disabled=${this.isMonthDisabled(this.viewYear,a)}
+            >${t}</option>
+          `)}
+        </select>
+        <select
+          class="year-select"
+          aria-label="Year"
+          ?disabled=${this.disabled}
+          @change=${this.handleYearChange}
+        >
+          ${this.availableYears.map(t=>e`
+            <option value=${t} ?selected=${t===this.viewYear}>${t}</option>
+          `)}
+        </select>
+      </div>
+      <div class="grid" @mouseleave=${this.handleMouseLeave}>
+        <div class="row head">
+          ${s.map(t=>e`<div class="dow">${t}</div>`)}
+        </div>
+        ${this.weekGrid.map(a=>e`
+          <div class="row">
+            ${a.map(a=>{const i=a.getMonth()!==this.viewMonth,s=this.isSameDay(a,t),n=!this.isRange&&this.isSameDay(a,r),l=this.isRange&&this.isSameDay(a,d),g=this.isRange&&this.isSameDay(a,h),u=this.isRange&&this.isWithinRange(a,d,h),c=this.isDisabledDate(a),v=["day",i?"outside":"",s?"today":"",n?"selected":"",l?"range-start":"",g&&!l?"range-end":"",u?"in-range":"",this.isRange&&!o&&(l||g||u)&&!n?"preview":"",c?"disabled":""].filter(Boolean).join(" ");return e`
+                <button
+                  type="button"
+                  class="no-btn ${v}"
+                  ?disabled=${c||this.disabled}
+                  aria-selected=${n||l||g?"true":"false"}
+                  @click=${()=>this.handleDayClick(a)}
+                  @mouseenter=${()=>this.handleDayHover(a)}
+                >${a.getDate()}</button>
+              `})}
+          </div>
+        `)}
+      </div>
+    `}static styles=t`
+    :host {
+      --day_size: 2rem;
+      --day_radius: var(--radius);
+      --day_bg__selected: var(--c_primary);
+      --day_tc__selected: white;
+      --day_bg__range: var(--c_bg__alt);
+      --day_bg__hover: var(--c_bg__alt);
+
+      display: inline-block;
+      border: 1px solid var(--c_border);
+      border-radius: var(--radius);
+      padding: 0.5rem;
+      background: var(--c_bg);
+      user-select: none;
+    }
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      padding: 0.25rem;
+      margin-bottom: 0.25rem;
+    }
+    .month-select,
+    .year-select {
+      font-weight: 600;
+      width: auto;
+    }
+    .month-select {
+      flex: 1;
+    }
+    .grid {
+      display: flex;
+      flex-direction: column;
+    }
+    .row {
+      display: grid;
+      grid-template-columns: repeat(7, var(--day_size));
+    }
+    .row.head {
+      margin-bottom: 0.25rem;
+    }
+    .dow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      color: var(--tc_muted);
+      font-weight: 500;
+      height: var(--day_size);
+    }
+    .day {
+      appearance: none;
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: var(--day_radius);
+      width: var(--day_size);
+      height: var(--day_size);
+      cursor: pointer;
+      color: var(--tc);
+      font: inherit;
+      font-size: 0.875rem;
+      padding: 0;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition: background var(--animation_ms), color var(--animation_ms);
+    }
+    .day:hover:not(:disabled):not(.selected):not(.range-start):not(.range-end) {
+      background: var(--day_bg__hover);
+    }
+    .day:focus-visible {
+      outline: none;
+      border-color: var(--c_primary);
+      box-shadow: var(--focus_shadow);
+      z-index: 1;
+    }
+    .day.outside {
+      color: var(--tc_muted);
+      opacity: 0.5;
+    }
+    .day.today {
+      font-weight: 700;
+      border-color: var(--c_primary);
+    }
+    .day.selected,
+    .day.in-range,
+    .day.range-start,
+    .day.range-end {
+      background: var(--day_bg__selected);
+      color: var(--day_tc__selected);
+      border-color: transparent;
+    }
+    .day.in-range {
+      border-radius: 0;
+    }
+    .day.range-start:not(.range-end) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .day.range-end:not(.range-start) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    .day.outside.in-range,
+    .day.outside.range-start,
+    .day.outside.range-end {
+      opacity: 0.6;
+    }
+    .day.preview.in-range,
+    .day.preview.range-start,
+    .day.preview.range-end {
+      opacity: 0.75;
+    }
+    .day:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+  `}customElements.define("k-calendar",r);

package/docs/src/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);