input-duration 3.0.0 → 3.0.1

package/README.md

@@ -49,7 +49,11 @@
 
 Use `input-duration` when users need to enter a duration rather than a time of day: for example, a countdown, elapsed-time limit, or media offset. Its displayed value uses `HH:mm:ss.SSS` on every locale, without a locale-specific AM/PM presentation, and supports durations greater than 24 hours (currently up to 99 hours) with millisecond values, such as `30:00:00.125`.
 
+HTML's built-in `<input type="time">` is for choosing a time of day, not entering elapsed time. HTML does not provide a native duration input with a fixed `HH:mm:ss.SSS` format or support for values over 24 hours; this web component fills that gap.
+
 The component supplies its own segmented layout instead of the browser's native time-picker UI, so the displayed format does not change with browser or locale. It is built from native number inputs, however, so details such as the on-screen keyboard and interaction can still vary by device and browser; this is consistency of the value's presentation, not a guarantee of pixel-identical rendering. Milliseconds can be entered as three digits; the input's step controls increment in 10 ms intervals.
+
+The control's styles are scoped inside its Shadow DOM, so global styles and resets from Tailwind or other CSS libraries do not leak into its internal layout. The control inherits its font and text color from its surrounding page.
 <br>
 <p>
 <div>

package/docs/index.html

@@ -1,196 +1,266 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>JSDoc: Home</title>
-<h1> See the input-duration in action</h1>
-
-    <h2>Best HTML5 Option</h2>
- <input type="time" id="problemTime" step="0.01" value="00:00:00.000">
-
-<h2>Better Option</h2>
-<input-duration id="bob"></input-duration>
-
-<h1>More uses of input-duration</h1>
-<input-duration id="bobPrepop" value="99:09:09.999"></input-duration><br>
-<input-duration id="Jane"></input-duration><br>
-<input type="date" id="BobsDate"><br>
-
-<h2>Test the prototype</h2>
-<p id="what">This is for testing HTMLelement prototype update</p>
-
-<script type="module">
-    import chronlyhms from 'https://cdn.jsdelivr.net/npm/input-duration/+esm';
-</script>
-
-    <script src="scripts/prettify/prettify.js"> </script>
-    <script src="scripts/prettify/lang-css.js"> </script>
-    <!--[if lt IE 9]>
-      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-    <![endif]-->
-    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
-    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="A tiny demo of why a time-of-day input is not the same thing as a duration input.">
+    <title>Time is not a duration — input-duration</title>
+    <style>
+        :root {
+            color-scheme: light;
+            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+            color: #17201c;
+            background: #f5f7f3;
+            font-synthesis: none;
+            text-rendering: optimizeLegibility;
+            --green: #176b4a;
+            --muted: #64716a;
+            --line: #dce4dd;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            min-width: 320px;
+            margin: 0;
+        }
+
+        main {
+            width: min(100% - 40px, 960px);
+            margin: 0 auto;
+            padding: 48px 0 32px;
+        }
+
+        header {
+            max-width: 720px;
+            margin: 0 auto 34px;
+            text-align: center;
+        }
+
+        .eyebrow {
+            margin: 0 0 14px;
+            color: var(--green);
+            font-size: .78rem;
+            font-weight: 750;
+            letter-spacing: .12em;
+            text-transform: uppercase;
+        }
+
+        h1 {
+            margin: 0;
+            font-size: clamp(2.35rem, 7vw, 4.5rem);
+            letter-spacing: -.065em;
+            line-height: 1.02;
+        }
+
+        .intro {
+            max-width: 610px;
+            margin: 20px auto 0;
+            color: var(--muted);
+            font-size: 1.08rem;
+            line-height: 1.6;
+        }
+
+        .scenario {
+            display: inline-block;
+            margin-top: 20px;
+            padding: 10px 15px;
+            border: 1px solid #d6e8dc;
+            border-radius: 999px;
+            background: #eaf4ed;
+            color: #25513b;
+            font-size: .95rem;
+            font-weight: 650;
+        }
+
+        .comparison {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 18px;
+        }
+
+        article {
+            display: flex;
+            min-height: 300px;
+            flex-direction: column;
+            align-items: flex-start;
+            padding: 26px;
+            border: 1px solid var(--line);
+            border-radius: 18px;
+            background: #fff;
+            box-shadow: 0 12px 32px rgb(23 32 28 / 5%);
+        }
+
+        article.duration {
+            border-color: #b7d9c4;
+            box-shadow: 0 12px 32px rgb(23 107 74 / 9%);
+        }
+
+        .card-label {
+            margin: 0 0 8px;
+            color: var(--muted);
+            font-size: .76rem;
+            font-weight: 750;
+            letter-spacing: .1em;
+            text-transform: uppercase;
+        }
+
+        h2 {
+            margin: 0;
+            font-size: 1.45rem;
+            letter-spacing: -.03em;
+        }
+
+        .card-copy {
+            min-height: 52px;
+            margin: 10px 0 20px;
+            color: var(--muted);
+            line-height: 1.5;
+        }
+
+        .field {
+            display: flex;
+            min-height: 54px;
+            align-items: center;
+            margin: 0 0 18px;
+            padding: 8px 12px;
+            border: 1px solid #bdc9c0;
+            border-radius: 10px;
+            background: #fff;
+        }
+
+        input[type="time"] {
+            width: 100%;
+            border: 0;
+            background: transparent;
+            color: inherit;
+            font: inherit;
+            font-size: 1.2rem;
+        }
+
+        input[type="time"]:focus-visible {
+            outline: 2px solid var(--green);
+            outline-offset: 3px;
+        }
+
+        input-duration {
+            display: block;
+            max-width: 100%;
+            font-size: 1.2rem;
+        }
+
+        .result {
+            margin: auto 0 0;
+            color: #33463a;
+            font-size: .94rem;
+            line-height: 1.5;
+        }
+
+        .result strong {
+            color: #a23e2c;
+        }
+
+        .duration .result strong {
+            color: var(--green);
+        }
+
+        footer {
+            margin-top: 28px;
+            color: var(--muted);
+            font-size: .92rem;
+            line-height: 1.6;
+            text-align: center;
+        }
+
+        a {
+            color: var(--green);
+            font-weight: 650;
+        }
+
+        @media (max-width: 650px) {
+            main {
+                width: min(100% - 28px, 480px);
+                padding-top: 34px;
+            }
+
+            .comparison {
+                grid-template-columns: 1fr;
+            }
+
+            article {
+                min-height: 270px;
+                padding: 22px;
+            }
+        }
+    </style>
 </head>
-
 <body>
-
-<div id="main">
-
-    <h1 class="page-title">Plugin Doccumentation</h1>
-
-    
-
-
-
-    
-
-
-    <h3> </h3>
-
-
-
-
-
-
-
-
-
-
-    
-
-
-
-
-
-
-
-
-
-
-
-
-<section>
-
-<header>
-    
-        <h2>index.js</h2>
-        
-    
-</header>
-
-<article>
-    <div class="container-overview">
-    
-        
-            <div class="description">INPUT-DURATION</div>
-        
-
-        
-
-
-<dl class="details">
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-    <dt class="tag-author">Author:</dt>
-    <dd class="tag-author">
-        <ul>
-            <li>Stephan Luis</li>
-        </ul>
-    </dd>
-    
-
-    
-    <dt class="tag-copyright">Copyright:</dt>
-    <dd class="tag-copyright"><ul class="dummy"><li>MIT License, Copyright (c) 2022</li></ul></dd>
-    
-
-    
-
-    
-
-    
-    <dt class="tag-source">Source:</dt>
-    <dd class="tag-source"><ul class="dummy"><li>
-        <a href="index.js.html">index.js</a>, <a href="index.js.html#line1">line 1</a>
-    </li></ul></dd>
-    
-
-    
-
-    
-    <dt class="tag-see">See:</dt>
-    <dd class="tag-see">
-        <ul>
-            <li><a href="https://www.npmjs.com/package/input-duration">NPM input-duration</a></li>
-        
-            <li><a href="https://github.com/StephanLuis/input-duration">GitHub input-duration</a></li>
-        </ul>
-    </dd>
-    
-
-    
-</dl>
-
-
-        
-    
-    </div>
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-
-    
-</article>
-
-</section>
-
-
-
-
-</div>
-
-<nav>
-    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="InputDuration.html">InputDuration</a></li></ul>
-</nav>
-
-<br class="clear">
-
-<footer>
-    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.2</a> on Fri Sep 29 2023 11:02:59 GMT+0000 (GMT)
-</footer>
-
-<script> prettyPrint(); </script>
-<script src="scripts/linenumber.js"> </script>
+    <main>
+        <header>
+            <p class="eyebrow">A small input, a very different question</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>
+        </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>
+                <label class="field" for="clock-time">
+                    <input id="clock-time" type="time" value="06:00" step="60">
+                </label>
+                <p class="result" id="clock-result" aria-live="polite">06:00 is a time of day—not how long the task takes.</p>
+            </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>
+            </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.
+            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';
+
+        const clockInput = document.querySelector('#clock-time');
+        const clockResult = document.querySelector('#clock-result');
+        const durationInput = document.querySelector('#duration');
+        const durationResult = document.querySelector('#duration-result');
+
+        clockInput.addEventListener('input', () => {
+            clockResult.textContent = clockInput.value
+                ? `${clockInput.value} is a time of day—not how long the task takes.`
+                : 'No time picked. Still not a duration.';
+        });
+
+        const updateDurationResult = () => {
+            const value = durationInput.value;
+            if (/^[0-9]{2}:[0-5][0-9]:[0-5][0-9]\.[0-9]{3}$/.test(value)) {
+                const formattedValue = document.createElement('strong');
+                formattedValue.textContent = value;
+                durationResult.replaceChildren(
+                    formattedValue,
+                    document.createTextNode(' — a duration, exactly as requested.')
+                );
+            } else {
+                durationResult.textContent = 'Keep going—finish entering the duration.';
+            }
+        };
+
+        durationInput.addEventListener('input', updateDurationResult);
+        durationInput.addEventListener('change', updateDurationResult);
+    </script>
 </body>
 </html>

package/index.js

@@ -256,82 +256,89 @@ class InputDuration extends HTMLElement {
               </svg>
           </div>
           <style>
-                *:focus {
-                outline: none;
+                :host {
+                    display: inline-block;
+                    color: inherit;
+                    font: inherit;
+                    vertical-align: middle;
                 }
 
-
-                div.timeCase{
-                display: inline-flex;
-                flex-direction: row;
-                max-width: 300px;
-                padding: 3px;
-                border-style: solid;
-                border-width: 1px;
-                border-radius: 2px;
+                .timeCase {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 0.08em;
+                    max-width: 100%;
+                    padding: 0.4em 0.55em;
+                    border: 1px solid #9aa6b2;
+                    border-radius: 0.4em;
+                    background: transparent;
+                    color: inherit;
+                    font-variant-numeric: tabular-nums;
+                    line-height: 1.4;
+                    white-space: nowrap;
                 }
 
-
-                /* Each input width set and blinking cursor 'caret' removed */
-                div.timeCase input{
-                caret-color: transparent;
-                width: 15px;
-                padding-top:1px;
+                .timeCase:focus-within {
+                    border-color: #176b4a;
+                    outline: 3px solid #176b4a;
+                    outline-offset: 2px;
                 }
 
-
-                div.timeCase .D3{
-                width: 25px;
+                .timeCase input {
+                    box-sizing: content-box;
+                    width: 2ch;
+                    min-width: 2ch;
+                    margin: 0;
+                    padding: 0;
+                    border: 0;
+                    outline: 0;
+                    background: transparent;
+                    color: inherit;
+                    font: inherit;
+                    font-variant-numeric: tabular-nums;
+                    text-align: center;
+                    caret-color: transparent;
+                    appearance: textfield;
                 }
 
-
-                /* Hiding the up and down arrow */
-                /*https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp*/
-                /* Chrome, Safari, Edge, Opera */
-
-                input::-webkit-outer-spin-button,
-                input::-webkit-inner-spin-button {
-                -webkit-appearance: none;
-                margin: 0;
+                .timeCase input.D3 {
+                    width: 3ch;
+                    min-width: 3ch;
                 }
 
-
-                /* Firefox */
-
-                input[type=number] {
-                /* -moz-appearance: textfield; */
-                -moz-appearance: textarea;
-                -webkit-appearance: textarea;
+                .timeCase input::-webkit-outer-spin-button,
+                .timeCase input::-webkit-inner-spin-button {
+                    margin: 0;
+                    appearance: none;
                 }
 
-
-                div.timeCase:focus-within {
-                border: 2px solid black;
-                padding: 2px;
+                .timeCase span {
+                    color: currentColor;
+                    opacity: 0.7;
                 }
 
+                #svgContainer {
+                    display: inline-flex;
+                    width: 1em;
+                    height: 1em;
+                    flex: 0 0 auto;
+                    align-items: center;
+                    justify-content: center;
+                    margin-left: 0.2em;
+                    color: inherit;
+                }
 
-                .ts_digit {
-                border: none;
-                } 
-
-                /* between digit span */
-                .bds{
-                padding-bottom: 1px;
+                #svgContainer svg {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
                 }
 
-                #svgContainer {
-                width: 12px;
-                height: 12px;
-                padding-top: 1px;
-                padding-right: 2px;
-                color: black;
-                }  
-
-                *:disabled {
-                background-color: grey;
-                color: lightgrey;
-                opacity: .6;
+                .timeCase input:disabled {
+                    background: transparent;
+                    color: GrayText;
+                    cursor: not-allowed;
+                    opacity: 0.65;
                 }
                 </style> `
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "input-duration",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "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",