bootstrap-time 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 M. de Ridder
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,47 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# bootstrap-time
+
+Analog clock based on Bootstrap.
+
+The package is available on [npm](https://www.npmjs.com/package/bootstrap-time) and [jsDelivr](https://www.jsdelivr.com/package/npm/bootstrap-time).
+
+## What's included
+
+```
+src/                         source
+  js/bootstrap-time.js      script entrypoint
+  scss/bootstrap-time.scss  style entrypoint
+dist/                        generated, do not edit
+  css/bootstrap-time.css
+  css/bootstrap-time.min.css
+  js/bootstrap-time.js
+  js/bootstrap-time.min.js
+examples/                    HTML that points at dist
+```
+
+`npm run build` compiles `src` into `dist`. Bootstrap 6 is required. The time field uses [form adornments](https://getbootstrap.com/docs/6.0/forms/form-adorn/), which Bootstrap 5.3 does not have. Bootstrap 5.3 can only place an addon beside the input with `input-group`, not inside it. The clock icon comes from bootstrap-icons.
+
+## Usage
+
+Install from npm:
+
+```bash
+npm install bootstrap-time bootstrap@6 bootstrap-icons
+```
+
+Or load the published files from jsDelivr:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.2/font/bootstrap-icons.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-time@0.1.0/dist/css/bootstrap-time.min.css">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap-time@0.1.0/dist/js/bootstrap-time.min.js"></script>
+```
+
+Local builds use the same paths under `dist/`:
+
+```html
+<link rel="stylesheet" href="dist/css/bootstrap-time.min.css">
+<script src="dist/js/bootstrap-time.min.js"></script>
+```
+
+The script initializes the clock when `.clock-picker`, `#clock`, `#time-input`, `#hour-arrow` and `#minute-arrow` are present. The widget overlays the form under the time input. See `examples/bootstrap-time.html`.

package/dist/css/bootstrap-time.css

@@ -0,0 +1,120 @@
+.clock-picker {
+  position: relative;
+  width: 20rem;
+}
+.clock-picker input[type=time]::-webkit-calendar-picker-indicator {
+  display: none;
+  appearance: none;
+}
+
+.clock-toggle {
+  pointer-events: auto;
+  width: 2.25rem;
+  height: 2.25rem;
+  margin: -0.25rem;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--bs-form-adorn-icon-color, var(--bs-secondary-color));
+}
+.clock-toggle .bi {
+  font-size: 1rem;
+  line-height: 1;
+}
+.clock-toggle:hover, .clock-toggle:focus-visible {
+  background-color: var(--bs-bg-3);
+  color: var(--bs-body-color);
+}
+
+.clock-widget {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 5;
+  width: 20rem;
+  margin-top: 0.25rem;
+  padding: 0.25rem 0.5rem 1rem;
+  background-color: var(--bs-secondary-bg-subtle);
+  color: var(--bs-secondary-fg);
+}
+
+.clock-arrows {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+
+.btn.clock-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  min-height: 0;
+  padding: 0;
+  border-radius: 50%;
+  background-color: transparent;
+  color: var(--bs-body-color);
+  text-decoration: none;
+}
+.btn.clock-arrow svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: currentColor;
+}
+.btn.clock-arrow:hover, .btn.clock-arrow:focus-visible {
+  background-color: var(--bs-bg-3);
+  color: var(--bs-body-color);
+}
+.btn.clock-arrow:disabled, .btn.clock-arrow:disabled:hover {
+  background-color: transparent;
+  color: var(--bs-secondary-color);
+  opacity: 0.45;
+}
+
+.clock {
+  width: 16rem;
+  height: 16rem;
+  border-radius: 50%;
+}
+
+.clock-hand {
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  width: 2px;
+  height: var(--hand);
+  transform-origin: center bottom;
+  transform: translateX(-50%) rotate(var(--angle));
+  transition: transform 0.3s ease, height 0.3s ease;
+  border-radius: 1px;
+  pointer-events: none;
+}
+
+.clock-knob {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.clock-number {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 1;
+  width: 2.25rem;
+  height: 2.25rem;
+  margin: -1.125rem;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  transform: rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1));
+}
+.clock-number[aria-pressed=true] {
+  color: var(--bs-white, #fff);
+}

package/dist/css/bootstrap-time.min.css

@@ -0,0 +1 @@
+.clock-picker{position:relative;width:20rem}.clock-picker input[type=time]::-webkit-calendar-picker-indicator{display:none;appearance:none}.clock-toggle{pointer-events:auto;width:2.25rem;height:2.25rem;margin:-0.25rem;border:0;border-radius:50%;background:rgba(0,0,0,0);color:var(--bs-form-adorn-icon-color, var(--bs-secondary-color))}.clock-toggle .bi{font-size:1rem;line-height:1}.clock-toggle:hover,.clock-toggle:focus-visible{background-color:var(--bs-bg-3);color:var(--bs-body-color)}.clock-widget{position:absolute;top:100%;left:0;z-index:5;width:20rem;margin-top:.25rem;padding:.25rem .5rem 1rem;background-color:var(--bs-secondary-bg-subtle);color:var(--bs-secondary-fg)}.clock-arrows{display:flex;justify-content:flex-end;gap:.25rem}.btn.clock-arrow{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-height:0;padding:0;border-radius:50%;background-color:rgba(0,0,0,0);color:var(--bs-body-color);text-decoration:none}.btn.clock-arrow svg{width:1.5rem;height:1.5rem;fill:currentColor}.btn.clock-arrow:hover,.btn.clock-arrow:focus-visible{background-color:var(--bs-bg-3);color:var(--bs-body-color)}.btn.clock-arrow:disabled,.btn.clock-arrow:disabled:hover{background-color:rgba(0,0,0,0);color:var(--bs-secondary-color);opacity:.45}.clock{width:16rem;height:16rem;border-radius:50%}.clock-hand{position:absolute;left:50%;bottom:50%;width:2px;height:var(--hand);transform-origin:center bottom;transform:translateX(-50%) rotate(var(--angle));transition:transform .3s ease,height .3s ease;border-radius:1px;pointer-events:none}.clock-knob{position:absolute;left:50%;top:0;width:2.25rem;height:2.25rem;border-radius:50%;transform:translate(-50%, -50%)}.clock-number{position:absolute;left:50%;top:50%;z-index:1;width:2.25rem;height:2.25rem;margin:-1.125rem;border:0;border-radius:50%;background:rgba(0,0,0,0);color:inherit;transform:rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1))}.clock-number[aria-pressed=true]{color:var(--bs-white, #fff)}

package/dist/js/bootstrap-time.js

@@ -0,0 +1,172 @@
+// Analog clock based on Bootstrap.
+// Source entrypoint. `npm run build` writes dist/js/bootstrap-time.js
+// and dist/js/bootstrap-time.min.js.
+
+(function () {
+  "use strict";
+
+  var INNER_RADIUS = "4.6rem";
+  var OUTER_RADIUS = "6.4rem";
+
+  function init() {
+    var picker = document.querySelector(".clock-picker");
+    var clock = document.querySelector("#clock");
+    var widget = document.querySelector("#clock-widget");
+    var timeInput = document.querySelector("#time-input");
+    var hourArrow = document.querySelector("#hour-arrow");
+    var minuteArrow = document.querySelector("#minute-arrow");
+    var clockToggle = document.querySelector("#clock-toggle");
+    if (!clock || !timeInput || !hourArrow || !minuteArrow) return;
+
+    var initial = (timeInput.value || "17:00").split(":");
+    var hour = Number(initial[0]) || 0;
+    var minute = Number(initial[1]) || 0;
+    var mode = "hour";
+    var handAngle = 150;
+    var hand = document.createElement("div");
+    var knob = document.createElement("span");
+
+    hand.className = "clock-hand bg-primary";
+    knob.className = "clock-knob bg-primary";
+    knob.setAttribute("aria-hidden", "true");
+    hand.append(knob);
+    clock.append(hand);
+
+    function pad(value) {
+      return String(value).padStart(2, "0");
+    }
+
+    function targetAngle() {
+      return mode === "hour" ? (hour % 12) * 30 : minute * 6;
+    }
+
+    function handLength() {
+      var innerHour = hour === 0 || hour > 12;
+      return mode === "hour" && innerHour ? INNER_RADIUS : OUTER_RADIUS;
+    }
+
+    function moveHand() {
+      var target = targetAngle();
+      var delta = ((target - handAngle) % 360 + 540) % 360 - 180;
+      handAngle += delta;
+      hand.style.setProperty("--angle", handAngle + "deg");
+      hand.style.setProperty("--hand", handLength());
+    }
+
+    function updateArrows() {
+      hourArrow.disabled = mode === "hour";
+      minuteArrow.disabled = mode === "minute";
+    }
+
+    function writeInput() {
+      timeInput.value = pad(hour) + ":" + pad(minute);
+    }
+
+    function showMode(nextMode) {
+      if (mode === nextMode) return;
+      mode = nextMode;
+      updateArrows();
+      renderClock();
+    }
+
+    function renderClock() {
+      clock.querySelectorAll(".clock-number").forEach(function (node) {
+        node.remove();
+      });
+      clock.setAttribute("aria-label", mode === "hour" ? "Kies een uur" : "Kies de minuten");
+
+      var numbers = mode === "hour"
+        ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
+        : [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+      var selected = mode === "hour" ? hour : minute;
+      moveHand();
+
+      numbers.forEach(function (value, index) {
+        var button = document.createElement("button");
+        var inner = mode === "hour" && index >= 12;
+        var angle = (mode === "hour" ? index % 12 : index) * 30;
+
+        button.type = "button";
+        button.className = "clock-number";
+        button.textContent = mode === "hour" && value === 0 ? "00" : String(value);
+        button.setAttribute("aria-pressed", value === selected ? "true" : "false");
+        button.style.setProperty("--angle", angle + "deg");
+        button.style.setProperty("--radius", inner ? INNER_RADIUS : OUTER_RADIUS);
+        button.addEventListener("click", function () {
+          if (mode === "hour") {
+            hour = value;
+            mode = "minute";
+          } else {
+            minute = value;
+          }
+          writeInput();
+          updateArrows();
+          renderClock();
+        });
+        clock.append(button);
+      });
+    }
+
+    function showWidget() {
+      if (!widget) return;
+      widget.hidden = false;
+      if (clockToggle) clockToggle.setAttribute("aria-pressed", "true");
+    }
+
+    function hideWidget() {
+      if (!widget) return;
+      widget.hidden = true;
+      if (clockToggle) clockToggle.setAttribute("aria-pressed", "false");
+    }
+
+    function toggleWidget() {
+      if (widget && widget.hidden) showWidget();
+      else hideWidget();
+    }
+
+    hourArrow.addEventListener("click", function () {
+      showMode("hour");
+    });
+    minuteArrow.addEventListener("click", function () {
+      showMode("minute");
+    });
+    if (clockToggle) {
+      clockToggle.addEventListener("click", toggleWidget);
+    }
+    timeInput.addEventListener("focus", showWidget);
+    timeInput.addEventListener("input", function () {
+      if (!timeInput.value) return;
+      var parts = timeInput.value.split(":");
+      var nextHour = Number(parts[0]);
+      var nextMinute = Number(parts[1]);
+      if (nextMinute !== minute) mode = "minute";
+      else if (nextHour !== hour) mode = "hour";
+      hour = nextHour;
+      minute = nextMinute;
+      updateArrows();
+      renderClock();
+    });
+    if (picker) {
+      picker.addEventListener("mousedown", function (event) {
+        if (event.target === timeInput) return;
+        if (clockToggle && clockToggle.contains(event.target)) return;
+        event.preventDefault();
+      });
+    }
+    document.addEventListener("mousedown", function (event) {
+      if (!picker || picker.contains(event.target)) return;
+      hideWidget();
+    });
+
+    updateArrows();
+    writeInput();
+    renderClock();
+    hideWidget();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();

package/dist/js/bootstrap-time.min.js

@@ -0,0 +1 @@
+!function(){"use strict";var e="4.6rem",t="6.4rem";function n(){var n=document.querySelector(".clock-picker"),r=document.querySelector("#clock"),u=document.querySelector("#clock-widget"),o=document.querySelector("#time-input"),c=document.querySelector("#hour-arrow"),i=document.querySelector("#minute-arrow"),a=document.querySelector("#clock-toggle");if(r&&o&&c&&i){var d=(o.value||"17:00").split(":"),s=Number(d[0])||0,l=Number(d[1])||0,m="hour",f=150,p=document.createElement("div"),h=document.createElement("span");p.className="clock-hand bg-primary",h.className="clock-knob bg-primary",h.setAttribute("aria-hidden","true"),p.append(h),r.append(p),c.addEventListener("click",function(){k("hour")}),i.addEventListener("click",function(){k("minute")}),a&&a.addEventListener("click",function(){u&&u.hidden?S():L()}),o.addEventListener("focus",S),o.addEventListener("input",function(){if(o.value){var e=o.value.split(":"),t=Number(e[0]),n=Number(e[1]);n!==l?m="minute":t!==s&&(m="hour"),s=t,l=n,b(),E()}}),n&&n.addEventListener("mousedown",function(e){e.target!==o&&(a&&a.contains(e.target)||e.preventDefault())}),document.addEventListener("mousedown",function(e){n&&!n.contains(e.target)&&L()}),b(),g(),E(),L()}function v(e){return String(e).padStart(2,"0")}function y(){f+=((("hour"===m?s%12*30:6*l)-f)%360+540)%360-180,p.style.setProperty("--angle",f+"deg"),p.style.setProperty("--hand","hour"===m&&(0===s||s>12)?e:t)}function b(){c.disabled="hour"===m,i.disabled="minute"===m}function g(){o.value=v(s)+":"+v(l)}function k(e){m!==e&&(m=e,b(),E())}function E(){r.querySelectorAll(".clock-number").forEach(function(e){e.remove()}),r.setAttribute("aria-label","hour"===m?"Kies een uur":"Kies de minuten");var n="hour"===m?[12,1,2,3,4,5,6,7,8,9,10,11,0,13,14,15,16,17,18,19,20,21,22,23]:[0,5,10,15,20,25,30,35,40,45,50,55],u="hour"===m?s:l;y(),n.forEach(function(n,o){var c=document.createElement("button"),i="hour"===m&&o>=12,a=30*("hour"===m?o%12:o);c.type="button",c.className="clock-number",c.textContent="hour"===m&&0===n?"00":String(n),c.setAttribute("aria-pressed",n===u?"true":"false"),c.style.setProperty("--angle",a+"deg"),c.style.setProperty("--radius",i?e:t),c.addEventListener("click",function(){"hour"===m?(s=n,m="minute"):l=n,g(),b(),E()}),r.append(c)})}function S(){u&&(u.hidden=!1,a&&a.setAttribute("aria-pressed","true"))}function L(){u&&(u.hidden=!0,a&&a.setAttribute("aria-pressed","false"))}}"loading"===document.readyState?document.addEventListener("DOMContentLoaded",n):n()}();

package/package.json

@@ -1,6 +1,68 @@
-{
-  "name": "bootstrap-time",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "bootstrap-time",
+  "version": "0.1.0",
+  "description": "Time picker based on Bootstrap.",
+  "author": "M. de Ridder",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/matthijsderidder/bootstrap-time.git"
+  },
+  "bugs": {
+    "url": "https://github.com/matthijsderidder/bootstrap-time/issues"
+  },
+  "homepage": "https://github.com/matthijsderidder/bootstrap-time#readme",
+  "keywords": [
+    "bootstrap",
+    "clock",
+    "time",
+    "timepicker",
+    "css",
+    "scss"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/js/bootstrap-time.js",
+  "module": "./dist/js/bootstrap-time.js",
+  "style": "./dist/css/bootstrap-time.css",
+  "sass": "./src/scss/bootstrap-time.scss",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "style": "./dist/css/bootstrap-time.css",
+      "sass": "./src/scss/bootstrap-time.scss",
+      "import": "./dist/js/bootstrap-time.js",
+      "default": "./dist/js/bootstrap-time.js"
+    },
+    "./css": "./dist/css/bootstrap-time.css",
+    "./css/min": "./dist/css/bootstrap-time.min.css",
+    "./js": "./dist/js/bootstrap-time.js",
+    "./js/min": "./dist/js/bootstrap-time.min.js",
+    "./scss": "./src/scss/bootstrap-time.scss",
+    "./dist/*": "./dist/*",
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "jsdelivr": "dist/js/bootstrap-time.min.js",
+  "unpkg": "dist/js/bootstrap-time.min.js",
+  "scripts": {
+    "build:css": "sass src/scss/bootstrap-time.scss dist/css/bootstrap-time.css --style=expanded --no-source-map && sass src/scss/bootstrap-time.scss dist/css/bootstrap-time.min.css --style=compressed --no-source-map",
+    "build:js": "mkdir -p dist/js && cp src/js/bootstrap-time.js dist/js/bootstrap-time.js && terser src/js/bootstrap-time.js --compress --mangle --output dist/js/bootstrap-time.min.js",
+    "build": "npm run build:css && npm run build:js",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "sass": "^1.93.2",
+    "terser": "^5.44.0"
+  },
+  "peerDependencies": {
+    "bootstrap": ">=6.0.0-alpha.1"
+  },
+  "dependencies": {
+    "bootstrap-icons": "^1.13.2"
+  }
+}

package/src/js/bootstrap-time.js

@@ -0,0 +1,172 @@
+// Analog clock based on Bootstrap.
+// Source entrypoint. `npm run build` writes dist/js/bootstrap-time.js
+// and dist/js/bootstrap-time.min.js.
+
+(function () {
+  "use strict";
+
+  var INNER_RADIUS = "4.6rem";
+  var OUTER_RADIUS = "6.4rem";
+
+  function init() {
+    var picker = document.querySelector(".clock-picker");
+    var clock = document.querySelector("#clock");
+    var widget = document.querySelector("#clock-widget");
+    var timeInput = document.querySelector("#time-input");
+    var hourArrow = document.querySelector("#hour-arrow");
+    var minuteArrow = document.querySelector("#minute-arrow");
+    var clockToggle = document.querySelector("#clock-toggle");
+    if (!clock || !timeInput || !hourArrow || !minuteArrow) return;
+
+    var initial = (timeInput.value || "17:00").split(":");
+    var hour = Number(initial[0]) || 0;
+    var minute = Number(initial[1]) || 0;
+    var mode = "hour";
+    var handAngle = 150;
+    var hand = document.createElement("div");
+    var knob = document.createElement("span");
+
+    hand.className = "clock-hand bg-primary";
+    knob.className = "clock-knob bg-primary";
+    knob.setAttribute("aria-hidden", "true");
+    hand.append(knob);
+    clock.append(hand);
+
+    function pad(value) {
+      return String(value).padStart(2, "0");
+    }
+
+    function targetAngle() {
+      return mode === "hour" ? (hour % 12) * 30 : minute * 6;
+    }
+
+    function handLength() {
+      var innerHour = hour === 0 || hour > 12;
+      return mode === "hour" && innerHour ? INNER_RADIUS : OUTER_RADIUS;
+    }
+
+    function moveHand() {
+      var target = targetAngle();
+      var delta = ((target - handAngle) % 360 + 540) % 360 - 180;
+      handAngle += delta;
+      hand.style.setProperty("--angle", handAngle + "deg");
+      hand.style.setProperty("--hand", handLength());
+    }
+
+    function updateArrows() {
+      hourArrow.disabled = mode === "hour";
+      minuteArrow.disabled = mode === "minute";
+    }
+
+    function writeInput() {
+      timeInput.value = pad(hour) + ":" + pad(minute);
+    }
+
+    function showMode(nextMode) {
+      if (mode === nextMode) return;
+      mode = nextMode;
+      updateArrows();
+      renderClock();
+    }
+
+    function renderClock() {
+      clock.querySelectorAll(".clock-number").forEach(function (node) {
+        node.remove();
+      });
+      clock.setAttribute("aria-label", mode === "hour" ? "Kies een uur" : "Kies de minuten");
+
+      var numbers = mode === "hour"
+        ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 0, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
+        : [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+      var selected = mode === "hour" ? hour : minute;
+      moveHand();
+
+      numbers.forEach(function (value, index) {
+        var button = document.createElement("button");
+        var inner = mode === "hour" && index >= 12;
+        var angle = (mode === "hour" ? index % 12 : index) * 30;
+
+        button.type = "button";
+        button.className = "clock-number";
+        button.textContent = mode === "hour" && value === 0 ? "00" : String(value);
+        button.setAttribute("aria-pressed", value === selected ? "true" : "false");
+        button.style.setProperty("--angle", angle + "deg");
+        button.style.setProperty("--radius", inner ? INNER_RADIUS : OUTER_RADIUS);
+        button.addEventListener("click", function () {
+          if (mode === "hour") {
+            hour = value;
+            mode = "minute";
+          } else {
+            minute = value;
+          }
+          writeInput();
+          updateArrows();
+          renderClock();
+        });
+        clock.append(button);
+      });
+    }
+
+    function showWidget() {
+      if (!widget) return;
+      widget.hidden = false;
+      if (clockToggle) clockToggle.setAttribute("aria-pressed", "true");
+    }
+
+    function hideWidget() {
+      if (!widget) return;
+      widget.hidden = true;
+      if (clockToggle) clockToggle.setAttribute("aria-pressed", "false");
+    }
+
+    function toggleWidget() {
+      if (widget && widget.hidden) showWidget();
+      else hideWidget();
+    }
+
+    hourArrow.addEventListener("click", function () {
+      showMode("hour");
+    });
+    minuteArrow.addEventListener("click", function () {
+      showMode("minute");
+    });
+    if (clockToggle) {
+      clockToggle.addEventListener("click", toggleWidget);
+    }
+    timeInput.addEventListener("focus", showWidget);
+    timeInput.addEventListener("input", function () {
+      if (!timeInput.value) return;
+      var parts = timeInput.value.split(":");
+      var nextHour = Number(parts[0]);
+      var nextMinute = Number(parts[1]);
+      if (nextMinute !== minute) mode = "minute";
+      else if (nextHour !== hour) mode = "hour";
+      hour = nextHour;
+      minute = nextMinute;
+      updateArrows();
+      renderClock();
+    });
+    if (picker) {
+      picker.addEventListener("mousedown", function (event) {
+        if (event.target === timeInput) return;
+        if (clockToggle && clockToggle.contains(event.target)) return;
+        event.preventDefault();
+      });
+    }
+    document.addEventListener("mousedown", function (event) {
+      if (!picker || picker.contains(event.target)) return;
+      hideWidget();
+    });
+
+    updateArrows();
+    writeInput();
+    renderClock();
+    hideWidget();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();

package/src/scss/bootstrap-time.scss

@@ -0,0 +1,134 @@
+// Analog clock based on Bootstrap.
+// Source entrypoint. `npm run build` writes dist/css/bootstrap-time.css
+// and dist/css/bootstrap-time.min.css.
+
+.clock-picker {
+  position: relative;
+  width: 20rem;
+
+  input[type="time"]::-webkit-calendar-picker-indicator {
+    display: none;
+    appearance: none;
+  }
+}
+
+.clock-toggle {
+  pointer-events: auto;
+  width: 2.25rem;
+  height: 2.25rem;
+  margin: -0.25rem;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--bs-form-adorn-icon-color, var(--bs-secondary-color));
+
+  .bi {
+    font-size: 1rem;
+    line-height: 1;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--bs-bg-3);
+    color: var(--bs-body-color);
+  }
+}
+
+.clock-widget {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 5;
+  width: 20rem;
+  margin-top: 0.25rem;
+  padding: 0.25rem 0.5rem 1rem;
+  background-color: var(--bs-secondary-bg-subtle);
+  color: var(--bs-secondary-fg);
+}
+
+.clock-arrows {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.25rem;
+}
+
+.btn.clock-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  min-height: 0;
+  padding: 0;
+  border-radius: 50%;
+  background-color: transparent;
+  color: var(--bs-body-color);
+  text-decoration: none;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: currentColor;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--bs-bg-3);
+    color: var(--bs-body-color);
+  }
+
+  &:disabled,
+  &:disabled:hover {
+    background-color: transparent;
+    color: var(--bs-secondary-color);
+    opacity: 0.45;
+  }
+}
+
+.clock {
+  width: 16rem;
+  height: 16rem;
+  border-radius: 50%;
+}
+
+.clock-hand {
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  width: 2px;
+  height: var(--hand);
+  transform-origin: center bottom;
+  transform: translateX(-50%) rotate(var(--angle));
+  transition: transform 0.3s ease, height 0.3s ease;
+  border-radius: 1px;
+  pointer-events: none;
+}
+
+.clock-knob {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.clock-number {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 1;
+  width: 2.25rem;
+  height: 2.25rem;
+  margin: -1.125rem;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  transform: rotate(var(--angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--angle) * -1));
+
+  &[aria-pressed="true"] {
+    color: var(--bs-white, #fff);
+  }
+}