kempo-ui 0.4.2 → 0.4.3

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>
@@ -215,6 +221,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
@@ -159,6 +162,9 @@
           <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 +259,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>
@@ -281,6 +288,7 @@
         <a href="{{pathToRoot}}components/tags.html">Tags</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/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) |
@@ -82,6 +83,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<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-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.3",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",