input-duration 3.0.1 → 3.0.3

package/README.md

@@ -59,12 +59,12 @@ The control's styles are scoped inside its Shadow DOM, so global styles and rese
 <div>
   </div>
     <div align="center">
-  <a href="https://codesandbox.io/s/peaceful-waterfall-6mxpg2?file=/index.html" target="_blank">
+  <a href="https://stephanluis.github.io/input-duration/" target="_blank">Demo</a>
+·
+      <a href="https://codesandbox.io/s/peaceful-waterfall-6mxpg2?file=/index.html" target="_blank">
   Fiddle
 </a> ·
-      <a href="https://6mxpg2.csb.app/" target="_blank">Demo</a>
-    ·
-  <a href="https://stephanluis.github.io/input-duration/" target="_blank">Live demo</a>
+      <a href="https://6mxpg2.csb.app/" target="_blank">Fiddle's Output</a>
     ·
   <a href="https://stephanluis.github.io/input-duration/" target="_blank">Docs</a>
   ·

package/docs/index.html

@@ -9,13 +9,13 @@
         :root {
             color-scheme: light;
             font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-            color: #17201c;
-            background: #f5f7f3;
+            color: #172b45;
+            background: #eef6ff;
             font-synthesis: none;
             text-rendering: optimizeLegibility;
-            --green: #176b4a;
-            --muted: #64716a;
-            --line: #dce4dd;
+            --blue: #2563a6;
+            --muted: #536b84;
+            --line: #d2e2f2;
         }
 
         * {
@@ -39,9 +39,35 @@
             text-align: center;
         }
 
+        .brand {
+            display: inline-flex;
+            align-items: center;
+            gap: 9px;
+            margin-bottom: 24px;
+            color: var(--blue);
+        }
+
+        .brand-icon {
+            width: 30px;
+            height: 34px;
+            flex: 0 0 auto;
+        }
+
+        .brand-tag {
+            padding: 6px 10px;
+            border: 1px solid #c8def4;
+            border-radius: 8px;
+            background: #fff;
+            color: #244e7a;
+            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+            font-size: .95rem;
+            font-weight: 650;
+            letter-spacing: -.04em;
+        }
+
         .eyebrow {
             margin: 0 0 14px;
-            color: var(--green);
+            color: var(--blue);
             font-size: .78rem;
             font-weight: 750;
             letter-spacing: .12em;
@@ -67,10 +93,10 @@
             display: inline-block;
             margin-top: 20px;
             padding: 10px 15px;
-            border: 1px solid #d6e8dc;
+            border: 1px solid #c8def4;
             border-radius: 999px;
-            background: #eaf4ed;
-            color: #25513b;
+            background: #e1efff;
+            color: #244e7a;
             font-size: .95rem;
             font-weight: 650;
         }
@@ -90,12 +116,12 @@
             border: 1px solid var(--line);
             border-radius: 18px;
             background: #fff;
-            box-shadow: 0 12px 32px rgb(23 32 28 / 5%);
+            box-shadow: 0 12px 32px rgb(35 79 125 / 7%);
         }
 
         article.duration {
-            border-color: #b7d9c4;
-            box-shadow: 0 12px 32px rgb(23 107 74 / 9%);
+            border-color: #a9cbed;
+            box-shadow: 0 12px 32px rgb(37 99 166 / 12%);
         }
 
         .card-label {
@@ -126,7 +152,7 @@
             align-items: center;
             margin: 0 0 18px;
             padding: 8px 12px;
-            border: 1px solid #bdc9c0;
+            border: 1px solid #b8cde2;
             border-radius: 10px;
             background: #fff;
         }
@@ -141,7 +167,7 @@
         }
 
         input[type="time"]:focus-visible {
-            outline: 2px solid var(--green);
+            outline: 2px solid var(--blue);
             outline-offset: 3px;
         }
 
@@ -153,7 +179,7 @@
 
         .result {
             margin: auto 0 0;
-            color: #33463a;
+            color: #334c69;
             font-size: .94rem;
             line-height: 1.5;
         }
@@ -163,7 +189,7 @@
         }
 
         .duration .result strong {
-            color: var(--green);
+            color: var(--blue);
         }
 
         footer {
@@ -175,7 +201,7 @@
         }
 
         a {
-            color: var(--green);
+            color: var(--blue);
             font-weight: 650;
         }
 
@@ -199,17 +225,23 @@
 <body>
     <main>
         <header>
-            <p class="eyebrow">A small input, a very different question</p>
+            <div class="brand" role="img" aria-label="input-duration">
+                <svg class="brand-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true">
+                    <path fill="currentColor" d="M393.9 184l22.6-22.6c4.7-4.7 4.7-12.3 0-17l-17-17c-4.7-4.7-12.3-4.7-17 0l-20.7 20.7c-31.1-27.5-70.4-45.9-113.8-50.8V48h28c6.6 0 12-5.4 12-12V12c0-6.6-5.4-12-12-12H172c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12h28v49.4C96.4 109.3 16 197.2 16 304c0 114.9 93.1 208 208 208s208-93.1 208-208c0-44.7-14.1-86.1-38.1-120zM224 464c-88.4 0-160-71.6-160-160s71.6-160 160-160 160 71.6 160 160-71.6 160-160 160zm12-112h-24c-6.6 0-12-5.4-12-12V204c0-6.6 5.4-12 12-12h24c6.6 0 12 5.4 12 12v136c0 6.6-5.4 12-12 12z"/>
+                </svg>
+                <span class="brand-tag">&lt;input-duration&gt;</span>
+            </div>
+            <p class="eyebrow">A small input, solves a very big problem</p>
             <h1>Time is not a duration.</h1>
-            <p class="intro">You need to set a maintenance window. It’ll take 30 hours. Surely a time picker can handle that?</p>
-            <p class="scenario">The task: run for 30 hours</p>
+            <p class="intro">You need to set a maintenance window. It’ll take 30 hours and 42 milliseconds. Surely a time picker can handle that?</p>
+            <p class="scenario">The task: run X for 30 hours and 42 milliseconds</p>
         </header>
 
         <section class="comparison" aria-label="Compare a time-of-day input with a duration input">
             <article>
-                <p class="card-label">The time picker</p>
-                <h2>“What time is it?”</h2>
-                <p class="card-copy">HTML's built-in time input asks for a time of day—not an elapsed duration. The clock has other plans.</p>
+                <p class="card-label">The problem</p>
+               <h2>&lt;input type="time"&gt;</h2>
+                <p class="card-copy">Native HTML inputs are for times of day . Try setting this to 30 hours and 42 milliseconds. A time picker only accepts a time of day.</p>
                 <label class="field" for="clock-time">
                     <input id="clock-time" type="time" value="06:00" step="60">
                 </label>
@@ -217,22 +249,22 @@
             </article>
 
             <article class="duration">
-                <p class="card-label">The duration input</p>
-                <h2>“How long does it take?”</h2>
-                <p class="card-copy">HTML has no built-in duration input. This one handles 30 hours, with a fixed HH:mm:ss.SSS display.</p>
-                <input-duration id="duration" role="group" aria-label="Duration in hours, minutes, seconds, and milliseconds" value="30:00:00.000"></input-duration>
-                <p class="result" id="duration-result" aria-live="polite"><strong>30:00:00.000</strong> — a 30-hour duration, exactly as requested.</p>
+                <p class="card-label">The solution</p>
+                <h2>&lt;input-duration&gt;</h2>
+                <p class="card-copy">HTML has no built-in duration input. This web component handles 30 hours, plus those cheeky 42 milliseconds.</p>
+                <input-duration id="duration" role="group" aria-label="Duration in hours, minutes, seconds, and milliseconds" value="30:00:00.042"></input-duration>
+                <p class="result" id="duration-result" aria-live="polite"><strong>30:00:00.042</strong> — 30 hours, 42 milliseconds. No clock math required.</p>
             </article>
         </section>
 
         <footer>
-            Native HTML time inputs are for times of day; HTML has no built-in control for entering a duration like 30:00:00.000.
+            Native HTML time inputs are for times of day; HTML has no built-in control for entering a duration like 30:00:00.042.
             That's the gap <a href="InputDuration.html">input-duration</a> fills. Read the
             <a href="https://github.com/StephanLuis/input-duration">source on GitHub</a>.
         </footer>
     </main>
     <script type="module">
-        import '../index.js';
+        import 'https://cdn.jsdelivr.net/npm/input-duration@3.0.1/+esm';
 
         const clockInput = document.querySelector('#clock-time');
         const clockResult = document.querySelector('#clock-result');
@@ -252,7 +284,7 @@
                 formattedValue.textContent = value;
                 durationResult.replaceChildren(
                     formattedValue,
-                    document.createTextNode(' — a duration, exactly as requested.')
+                    document.createTextNode(' — duration, not time of day.')
                 );
             } else {
                 durationResult.textContent = 'Keep going—finish entering the duration.';

package/index.js

@@ -279,8 +279,8 @@ class InputDuration extends HTMLElement {
                 }
 
                 .timeCase:focus-within {
-                    border-color: #176b4a;
-                    outline: 3px solid #176b4a;
+                    border-color: #2196f3;
+                    outline: 3px solid #2196f3;
                     outline-offset: 2px;
                 }
 
@@ -417,7 +417,7 @@ class InputDuration extends HTMLElement {
 
 
     /**
-    * eventlistener that adds number input for keyed values triggered by the keyup event
+    * eventlistener that filters number input and advances between fields
     * @method
     * @see boot()
     */
@@ -439,12 +439,6 @@ class InputDuration extends HTMLElement {
                     this.value = this.oldValue;
                 }
             });
-
-            inputElement.addEventListener('keyup', function (event) {
-                if (/^[0-9]$/.test(event.key)) {
-                    inputFilter(this.value);
-                }
-            });
         }
 
         // three filters, hours or minutes and seconds (are the same) but milliseconds is different

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "input-duration",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "author": "Stephan Luis <stephan@learnsense.org>",
   "description": "A JavaScript web component for entering durations up to 99 hours in a fixed HH:mm:ss.SSS format, with millisecond precision for countdown timers and elapsed time.",
   "browser": "./index.js",