input-duration 3.0.3 → 3.2.0

package/docs/bootstrap.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="See input-duration styled with Bootstrap 5 using CSS custom properties and Shadow Parts.">
+    <title>Bootstrap demo — input-duration</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        input-duration {
+            --input-duration-gap: 0.1em;
+            --input-duration-padding: 0.375rem 0.75rem;
+            --input-duration-border-color: var(--bs-border-color);
+            --input-duration-border-radius: var(--bs-border-radius);
+            --input-duration-background: var(--bs-body-bg);
+            --input-duration-color: var(--bs-body-color);
+            --input-duration-focus-color: var(--bs-primary);
+            --input-duration-focus-outline: 0.25rem solid rgba(var(--bs-primary-rgb), 0.25);
+            --input-duration-focus-outline-offset: 0;
+        }
+
+        input-duration::part(control) {
+            min-height: calc(1.5em + 0.75rem + 2px);
+        }
+
+        input-duration::part(field) {
+            font-size: 1rem;
+        }
+    </style>
+</head>
+<body>
+    <main class="container py-5">
+        <div class="row justify-content-center">
+            <div class="col-lg-8">
+                <a class="link-secondary text-decoration-none" href="./">&larr; Main demo</a>
+                <header class="my-4">
+                    <p class="text-uppercase text-primary fw-semibold small mb-2">input-duration + Bootstrap 5</p>
+                    <h1 class="display-5 fw-semibold">A duration input that fits your Bootstrap theme</h1>
+                    <p class="lead text-secondary mt-3">
+                        The component keeps its Shadow DOM. Bootstrap’s global selectors do not reach inside it;
+                        this page maps Bootstrap theme variables to the component’s public styling hooks instead.
+                    </p>
+                </header>
+
+                <section class="card shadow-sm" aria-labelledby="example-heading">
+                    <div class="card-body p-4">
+                        <h2 class="h4 card-title" id="example-heading">Maintenance window</h2>
+                        <p class="card-text text-secondary">Set a duration of more than a day, down to milliseconds.</p>
+                        <label class="form-label fw-medium" id="duration-label">Duration</label>
+                        <div>
+                            <input-duration id="duration" value="30:00:00.042" role="group"
+                                aria-labelledby="duration-label"
+                                aria-describedby="duration-help"
+                                aria-label="Duration in hours, minutes, seconds, and milliseconds"></input-duration>
+                        </div>
+                        <div class="form-text mt-3" id="duration-help">
+                            Current value: <output id="duration-value">30:00:00.042</output>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="mt-4" aria-labelledby="integration-heading">
+                    <h2 class="h5" id="integration-heading">How the styling works</h2>
+                    <p>
+                        CSS custom properties bring in Bootstrap colors, border radius, spacing, and focus-ring
+                        styling. Shadow Parts provide targeted access to the control and its internal fields.
+                    </p>
+                    <pre class="bg-body-tertiary border rounded p-3"><code>input-duration {
+  --input-duration-border-color: var(--bs-border-color);
+  --input-duration-border-radius: var(--bs-border-radius);
+  --input-duration-focus-color: var(--bs-primary);
+  --input-duration-focus-outline: 0.25rem solid rgba(var(--bs-primary-rgb), 0.25);
+}
+
+input-duration::part(field) {
+  font-size: 1rem;
+}</code></pre>
+                </section>
+
+                <footer class="border-top mt-5 pt-3 text-secondary small">
+                    <a href="https://github.com/StephanLuis/input-duration">Source on GitHub</a>
+                    <span class="mx-2" aria-hidden="true">&middot;</span>
+                    <a href="https://github.com/StephanLuis/input-duration#usage">Styling API documentation</a>
+                </footer>
+            </div>
+        </div>
+    </main>
+    <script type="module">
+        import 'https://cdn.jsdelivr.net/npm/input-duration/+esm';
+
+        const duration = document.querySelector('#duration');
+        const output = document.querySelector('#duration-value');
+
+        duration.addEventListener('input', () => {
+            output.value = duration.value;
+            output.textContent = duration.value;
+        });
+        duration.addEventListener('change', () => {
+            output.value = duration.value;
+            output.textContent = duration.value;
+        });
+    </script>
+</body>
+</html>

package/docs/index.html

@@ -89,16 +89,25 @@
             line-height: 1.6;
         }
 
-        .scenario {
-            display: inline-block;
-            margin-top: 20px;
-            padding: 10px 15px;
-            border: 1px solid #c8def4;
-            border-radius: 999px;
-            background: #e1efff;
-            color: #244e7a;
-            font-size: .95rem;
-            font-weight: 650;
+        .get-started {
+            display: table;
+            margin: 30px auto 0;
+            padding: 13px 22px;
+            border: 1px solid var(--blue);
+            border-radius: 10px;
+            background: var(--blue);
+            color: #fff;
+            font-size: 1.05rem;
+            text-decoration: none;
+        }
+
+        .get-started:hover {
+            background: #1d4f87;
+        }
+
+        .get-started:focus-visible {
+            outline: 3px solid #8bb9e8;
+            outline-offset: 3px;
         }
 
         .comparison {
@@ -234,7 +243,6 @@
             <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 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">
@@ -262,9 +270,11 @@
             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>
+        <p class="demo-link"><a href="bootstrap.html">See the Bootstrap 5 demo</a></p>
+        <a class="get-started" href="https://github.com/StephanLuis/input-duration#getting-started">Get Started</a>
     </main>
     <script type="module">
-        import 'https://cdn.jsdelivr.net/npm/input-duration@3.0.1/+esm';
+        import 'https://cdn.jsdelivr.net/npm/input-duration/+esm';
 
         const clockInput = document.querySelector('#clock-time');
         const clockResult = document.querySelector('#clock-result');