kempo-ui 0.4.2 → 0.4.4

package/docs-src/components/time.page.html

@@ -0,0 +1,204 @@
+<page pageName="Time" title="Time - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+      <div class="m pl">
+        <h6>Examples</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#defaultValue">Default Value</a><br />
+        <a href="#increment">Minute Increment</a><br />
+        <a href="#military">24-Hour Time</a><br />
+        <a href="#javascriptUsage">JavaScript Usage</a><br />
+        <a href="#formUsage">Form Usage</a><br />
+        <a href="#disabled">Disabled</a><br />
+
+        <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#events">Events</a><br />
+      </div>
+    </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Wraps the browser's native <code>&lt;input type="time"&gt;</code> so the user can click or tab between the hour, minute, and AM/PM segments and type numbers to change each one. The <code>value</code> is always a 24-hour <code>HH:MM</code> string regardless of the locale-dependent display format.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-time</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-time</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-time></k-time>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="defaultValue"><a href="#defaultValue" class="no-link">Default Value</a></h3>
+    <p>Set an initial value with the <code>value</code> attribute using 24-hour <code>HH:MM</code> format.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-time</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;14:30&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-time</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-time value="14:30"></k-time>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="increment"><a href="#increment" class="no-link">Minute Increment</a></h3>
+    <p>The <code>increment</code> attribute controls the minute step when the user presses the up/down arrow keys on the minute segment. Defaults to <code>1</code>.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-time</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;09:15&quot;</span> <span class="hljs-attr">increment</span>=<span class="hljs-string">&quot;15&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-time</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-time value="09:15" increment="15"></k-time>
+        </k-card>
+      </div>
+    </div>
+
+    <h4>Half-Hour Increment</h4>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-time</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;13:00&quot;</span> <span class="hljs-attr">increment</span>=<span class="hljs-string">&quot;30&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-time</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-time value="13:00" increment="30"></k-time>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="military"><a href="#military" class="no-link">24-Hour Time</a></h3>
+    <p>Add the <code>military</code> attribute to render in 24-hour form without an AM/PM segment. Internally the input is tagged as <code>lang="en-GB"</code> to request a 24-hour display; most modern browsers respect this. The stored <code>value</code> format is unchanged.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-time</span> <span class="hljs-attr">military</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;17:45&quot;</span> <span class="hljs-attr">increment</span>=<span class="hljs-string">&quot;15&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-time</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-time military value="17:45" increment="15"></k-time>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="javascriptUsage"><a href="#javascriptUsage" class="no-link">JavaScript Usage</a></h3>
+    <p>Listen for the <code>change</code> event to react to committed values. The <code>detail.value</code> is a <code>HH:MM</code> string in 24-hour format.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-time</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;jsTime&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;08:00&quot;</span> <span class="hljs-attr">increment</span>=<span class="hljs-string">&quot;5&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-time</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Selected: <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;jsTimeOutput&quot;</span>&gt;</span>08:00<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">const</span> $time = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;jsTime&#x27;</span>);<br>  <span class="hljs-keyword">const</span> $out = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;jsTimeOutput&#x27;</span>);<br>  $time.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;change&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =&gt;</span> {<br>    $out.<span class="hljs-property">textContent</span> = e.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>;<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-time id="jsTime" value="08:00" increment="5" class="mb"></k-time>
+          <p>Selected: <span id="jsTimeOutput">08:00</span></p>
+          <script>
+            const $time = document.getElementById('jsTime');
+            const $out = document.getElementById('jsTimeOutput');
+            $time.addEventListener('change', (e) => {
+              $out.textContent = e.detail.value;
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="formUsage"><a href="#formUsage" class="no-link">Form Usage</a></h3>
+    <p>The component is form-associated. Set a <code>name</code> so it participates in form submission. The submitted value is always the 24-hour <code>HH:MM</code> string, regardless of display mode.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;timeForm&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Start: <span class="hljs-tag">&lt;<span class="hljs-name">k-time</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;start&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;09:00&quot;</span> <span class="hljs-attr">increment</span>=<span class="hljs-string">&quot;15&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-time</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>End: <span class="hljs-tag">&lt;<span class="hljs-name">k-time</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;end&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;17:00&quot;</span> <span class="hljs-attr">increment</span>=<span class="hljs-string">&quot;15&quot;</span> <span class="hljs-attr">military</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-time</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Form Data: <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;timeFormOutput&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;timeForm&#x27;</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;submit&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">e</span>) =&gt;</span> {<br>    e.<span class="hljs-title function_">preventDefault</span>();<br>    <span class="hljs-keyword">const</span> fd = <span class="hljs-keyword">new</span> <span class="hljs-title class_">FormData</span>(e.<span class="hljs-property">target</span>);<br>    <span class="hljs-keyword">const</span> entries = [...fd.<span class="hljs-title function_">entries</span>()].<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">[k, v]</span>) =&gt;</span> k + <span class="hljs-string">&#x27;=&#x27;</span> + v);<br>    <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;timeFormOutput&#x27;</span>).<span class="hljs-property">textContent</span> = entries.<span class="hljs-title function_">join</span>(<span class="hljs-string">&#x27;, &#x27;</span>);<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <form id="timeForm" class="mb">
+            <label class="d-b mb">Start: <k-time name="start" value="09:00" increment="15"></k-time></label>
+            <label class="d-b mb">End: <k-time name="end" value="17:00" increment="15" military></k-time></label>
+            <button type="submit">Submit</button>
+          </form>
+          <p>Form Data: <span id="timeFormOutput"></span></p>
+          <script>
+            document.getElementById('timeForm').addEventListener('submit', (e) => {
+              e.preventDefault();
+              const fd = new FormData(e.target);
+              const entries = [...fd.entries()].map(([k, v]) => k + '=' + v);
+              document.getElementById('timeFormOutput').textContent = entries.join(', ');
+            });
+          </script>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="disabled"><a href="#disabled" class="no-link">Disabled</a></h3>
+    <p>The <code>disabled</code> attribute prevents user interaction.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-time</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;12:00&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-time</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-time disabled value="12:00"></k-time>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5><code>new Time()</code></h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>value<i>: String</i></code></h5>
+    <p>The committed time as a 24-hour <code>HH:MM</code> string (e.g. <code>"14:30"</code>). Empty string when no time is set. Syncs to <code>value</code> attribute.</p>
+
+    <h5><code>name<i>: String</i></code></h5>
+    <p>The form field name. When set inside a <code>&lt;form&gt;</code>, the component participates in form submission. Syncs to <code>name</code> attribute.</p>
+
+    <h5><code>increment<i>: Number</i></code></h5>
+    <p>The minute step used when the user presses the up/down arrow keys on the minute segment. Also sets the underlying <code>step</code> attribute on the native input in seconds (<code>increment &times; 60</code>). Default is <code>1</code>. Syncs to <code>increment</code> attribute.</p>
+
+    <h5><code>military<i>: Boolean</i></code></h5>
+    <p>When <code>true</code>, the displayed time uses 24-hour format and no AM/PM segment. The stored <code>value</code> format is unchanged. Default is <code>false</code>. Syncs to <code>military</code> attribute.</p>
+
+    <h5><code>disabled<i>: Boolean</i></code></h5>
+    <p>When <code>true</code>, the component cannot be changed by user interaction. The element appears at 50% opacity. Syncs to <code>disabled</code> attribute.</p>
+
+    <h5><code>required<i>: Boolean</i></code></h5>
+    <p>When <code>true</code> and no time is set, the element reports a <code>valueMissing</code> validity error for form validation. Syncs to <code>required</code> attribute.</p>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>change</code></h5>
+    <p>Fired when the committed <code>value</code> changes. The event <code>detail</code> contains <code>{ value: String }</code> in 24-hour <code>HH:MM</code> format, or an empty string when cleared.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Time.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>

package/docs-src/index.page.html

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

package/docs-src/nav.fragment.html

@@ -46,6 +46,9 @@
               href="{{pathToRoot}}components/accordion.html">Accordion<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="aside sidebar components"><a
               href="{{pathToRoot}}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="{{pathToRoot}}components/calendar.html"
+            >Calendar<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a
               href="{{pathToRoot}}components/card.html">Card<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
@@ -101,6 +104,9 @@
           <k-filter-item filter-keywords="sortable drag drop sort components"><a
               href="{{pathToRoot}}components/sortable.html"
             >Sortable<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="speech to text speechtotext microphone voice recognition transcription components"><a
+              href="{{pathToRoot}}components/speech-to-text.html"
+            >Speech To Text<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="spinner loading components"><a
               href="{{pathToRoot}}components/spinner.html">Spinner<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="split pane components"><a
@@ -153,12 +159,18 @@
               href="{{pathToRoot}}components/tabs.html">Tabs<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tags tag input components"><a
               href="{{pathToRoot}}components/tags.html">Tags<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="text to speech texttospeech tts speak voice synthesis components"><a
+              href="{{pathToRoot}}components/text-to-speech.html"
+            >Text To Speech<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="theme select dropdown dark light components"><a
               href="{{pathToRoot}}components/theme-select.html"
             >Theme Select<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="theme switcher dark light components"><a
               href="{{pathToRoot}}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="{{pathToRoot}}components/time.html"
+            >Time<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="timestamp date time components"><a
               href="{{pathToRoot}}components/timestamp.html"
             >Timestamp<br><small>Component</small></a></k-filter-item>
@@ -253,6 +265,7 @@
         <h3>Components</h3>
         <a href="{{pathToRoot}}components/accordion.html">Accordion</a>
         <a href="{{pathToRoot}}components/aside.html">Aside</a>
+        <a href="{{pathToRoot}}components/calendar.html">Calendar</a>
         <a href="{{pathToRoot}}components/card.html">Card</a>
         <a href="{{pathToRoot}}components/code-editor.html">Code Editor</a>
         <a href="{{pathToRoot}}components/combobox.html">Combobox</a>
@@ -274,13 +287,16 @@
         <a href="{{pathToRoot}}components/show-more.html">Show More</a>
         <a href="{{pathToRoot}}components/slider.html">Slider</a>
         <a href="{{pathToRoot}}components/sortable.html">Sortable</a>
+        <a href="{{pathToRoot}}components/speech-to-text.html">Speech To Text</a>
         <a href="{{pathToRoot}}components/spinner.html">Spinner</a>
         <a href="{{pathToRoot}}components/split.html">Split</a>
         <a href="{{pathToRoot}}components/table.html">Table</a>
         <a href="{{pathToRoot}}components/tabs.html">Tabs</a>
         <a href="{{pathToRoot}}components/tags.html">Tags</a>
+        <a href="{{pathToRoot}}components/text-to-speech.html">Text To Speech</a>
         <a href="{{pathToRoot}}components/theme-select.html">Theme Select</a>
         <a href="{{pathToRoot}}components/theme-switcher.html">Theme Switcher</a>
+        <a href="{{pathToRoot}}components/time.html">Time</a>
         <a href="{{pathToRoot}}components/timestamp.html">Timestamp</a>
         <a href="{{pathToRoot}}components/toast.html">Toast</a>
         <a href="{{pathToRoot}}components/toggle.html">Toggle</a>

package/icons/mic.svg

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

package/icons/record_voice_over.svg

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

package/icons/stop.svg

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

package/llms.txt

@@ -54,6 +54,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 |-----------|------|-------------|------|
 | `<k-accordion>` `<k-accordion-header>` `<k-accordion-panel>` | `Accordion.js` | Collapsible panel groups; `for-panel` attribute links headers to panels | [accordion.html](https://dustinpoissant.github.io/kempo-ui/components/accordion.html) |
 | `<k-aside>` `<k-aside-item>` `<k-aside-label>` `<k-aside-menu>` `<k-aside-spacer>` `<k-aside-toggle>` | `Aside.js` | Sidebar/drawer; `main="push"` or `main="overlay"`, `side="left|right"` | [aside.html](https://dustinpoissant.github.io/kempo-ui/components/aside.html) |
+| `<k-calendar>` | `Calendar.js` | Inline month-grid date picker widget; `mode="single"` (default) or `mode="range"`; `value` is ISO `YYYY-MM-DD` (single) or comma-separated pair (range); `min`/`max` bounds; form-associated; fires `change` | [calendar.html](https://dustinpoissant.github.io/kempo-ui/components/calendar.html) |
 | `<k-card>` | `Card.js` | Bordered container; optional `label` attribute | [card.html](https://dustinpoissant.github.io/kempo-ui/components/card.html) |
 | `<k-code-editor>` | `CodeEditor.js` | Monaco-powered code editor; `value`, `language`, `controls` attributes; form-associated; theme-aware | [code-editor.html](https://dustinpoissant.github.io/kempo-ui/components/code-editor.html) |
 | `<k-color-picker>` | `ColorPicker.js` | Full color picker (hex, rgb, hsl, hsv, alpha); `value` property | [color-picker.html](https://dustinpoissant.github.io/kempo-ui/components/color-picker.html) |
@@ -75,13 +76,16 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-show-more>` | `ShowMore.js` | Truncated content with expand toggle | [show-more.html](https://dustinpoissant.github.io/kempo-ui/components/show-more.html) |
 | `<k-slider>` | `Slider.js` | Slider with min, max, discrete step snap points, vertical orientation, and dual-handle range mode via comma-separated `value` (e.g. `"20,80"`); `format` attribute for value formatting (e.g. `"$0.00"`) applied to change events, form submission, and optional drag `tooltip`; form-associated; fires `change` | [slider.html](https://dustinpoissant.github.io/kempo-ui/components/slider.html) |
 | `<k-sortable>` `<k-sortable-item>` | `Sortable.js` | Drag-to-reorder list | [sortable.html](https://dustinpoissant.github.io/kempo-ui/components/sortable.html) |
+| `<k-speech-to-text>` | `SpeechToText.js` | Microphone button wrapping the Web Speech API; click to start, click again or pause to stop; `language`, `continuous`, `interim`, `min-confidence` (0-1 noise filter), `timeout` (max recording seconds) attrs; fires `start`, `result` (with `{text, isFinal}`), `end` (with `{text}`), `error` | [speech-to-text.html](https://dustinpoissant.github.io/kempo-ui/components/speech-to-text.html) |
 | `<k-spinner>` | `Spinner.js` | Loading indicator; `size` (xs/sm/md/lg/xl), `variant` (spinner/dots/bar) | [spinner.html](https://dustinpoissant.github.io/kempo-ui/components/spinner.html) |
 | `<k-split>` | `Split.js` | Resizable split panes | [split.html](https://dustinpoissant.github.io/kempo-ui/components/split.html) |
 | `<k-table>` | `Table.js` | Data table with sorting, filtering, pagination, row selection, server sync; `placeholder` (default "No Records") shown when empty; `filtered-placeholder` shown when all records are filtered/hidden | [table.html](https://dustinpoissant.github.io/kempo-ui/components/table.html) |
 | `<k-tabs>` `<k-tab>` `<k-tab-content>` `<k-tab-spacer>` | `Tabs.js` | Tabbed interface; `<k-tab for-content="id">` links to `<k-tab-content name="id">` | [tabs.html](https://dustinpoissant.github.io/kempo-ui/components/tabs.html) |
 | `<k-tags>` `<k-tag>` | `Tags.js` | Tag input; add/remove tags; fires `change` | [tags.html](https://dustinpoissant.github.io/kempo-ui/components/tags.html) |
+| `<k-text-to-speech>` | `TextToSpeech.js` | Button that wraps `window.speechSynthesis`; speaks `text` attr or slotted content; `voice`, `language`, `rate`, `pitch`, `volume` attrs; methods `speak(text?)` / `stop()` / `toggle()`; fires `start`, `end`, `error` | [text-to-speech.html](https://dustinpoissant.github.io/kempo-ui/components/text-to-speech.html) |
 | `<k-theme-select>` | `ThemeSelect.js` | Dropdown to pick a theme | [theme-select.html](https://dustinpoissant.github.io/kempo-ui/components/theme-select.html) |
 | `<k-theme-switcher>` | `ThemeSwitcher.js` | Theme switcher with segmented and toggle display modes | [theme-switcher.html](https://dustinpoissant.github.io/kempo-ui/components/theme-switcher.html) |
+| `<k-time>` | `Time.js` | Wraps native `<input type="time">` with segmented hour/minute/AM-PM editing; `value` is 24-hour `HH:MM`; `increment` attr sets minute step (arrow-key granularity); `military` attr forces 24-hour display via `lang="en-GB"`; form-associated; fires `change` | [time.html](https://dustinpoissant.github.io/kempo-ui/components/time.html) |
 | `<k-timestamp>` | `Timestamp.js` | Displays a `value` timestamp as human-readable relative time | [timestamp.html](https://dustinpoissant.github.io/kempo-ui/components/timestamp.html) |
 | `<k-toast>` `<k-toast-container>` | `Toast.js` | Toast notifications; use `<k-toast-container>` once in page, call `.addToast(options)` | [toast.html](https://dustinpoissant.github.io/kempo-ui/components/toast.html) |
 | `<k-toggle>` | `Toggle.js` | On/off toggle; `value` (Boolean, reflects); methods: `on()`, `off()`, `toggle()`; fires `change`, `on`, `off` | [toggle.html](https://dustinpoissant.github.io/kempo-ui/components/toggle.html) |

package/package.json

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