vanilla-wheel-number-picker 1.1.0 → 1.1.2

package/README.md

@@ -1,4 +1,4 @@
-# Plain Wheel Number Picker
+# Vanilla JS Wheel Number Picker
 
 A small plain JavaScript wheel-style number picker. No framework required.
 
@@ -21,6 +21,8 @@ A small plain JavaScript wheel-style number picker. No framework required.
   muted-color="#9ca3af"
   active-color="#2563eb"
   background="#f8fafc"
+  arrows
+  arrows-hidden-max-width="480"
 >
 </wheel-number-picker>
 
@@ -58,6 +60,8 @@ A small plain JavaScript wheel-style number picker. No framework required.
     mutedColor: "#9ca3af",
     activeColor: "#2563eb",
     background: "#f8fafc",
+    arrows: true,
+    arrowsHiddenMaxWidth: 480,
     onChange(value) {
       console.log(value);
     },
@@ -67,17 +71,19 @@ A small plain JavaScript wheel-style number picker. No framework required.
 
 ## Options / attributes
 
-| Option         | Attribute       |  Default | Description                                                                                              |
-| -------------- | --------------- | -------: | -------------------------------------------------------------------------------------------------------- |
-| `min`          | `min`           |      `0` | Minimum value                                                                                            |
-| `max`          | `max`           |    `100` | Maximum value                                                                                            |
-| `value`        | `value`         |    `min` | Initial/current value                                                                                    |
-| `itemHeight`   | `item-height`   |     `44` | Row height in pixels. Controls row height, highlight height, snap distance, and total picker height.     |
-| `visibleItems` | `visible-items` |      `5` | Number of visible rows. Even numbers are rounded up to the next odd number so one row can stay centered. |
-| `color`        | `color`         |   `#111` | Base/active text color fallback                                                                          |
-| `mutedColor`   | `muted-color`   |   `#aaa` | Non-selected item text color                                                                             |
-| `activeColor`  | `active-color`  |  `color` | Selected item text color                                                                                 |
-| `background`   | `background`    | gradient | Picker window background. Accepts any valid CSS background value.                                        |
+| Option                 | Attribute                 |  Default | Description                                                                                                   |
+| ---------------------- | ------------------------- | -------: | ------------------------------------------------------------------------------------------------------------- |
+| `min`                  | `min`                     |      `0` | Minimum value                                                                                                 |
+| `max`                  | `max`                     |    `100` | Maximum value                                                                                                 |
+| `value`                | `value`                   |    `min` | Initial/current value                                                                                         |
+| `itemHeight`           | `item-height`             |     `44` | Row height in pixels. This now controls row height, highlight height, snap distance, and total picker height. |
+| `visibleItems`         | `visible-items`           |      `5` | Number of visible rows. Even numbers are rounded up to the next odd number so one row can stay centered.      |
+| `color`                | `color`                   |   `#111` | Base/active text color fallback                                                                               |
+| `mutedColor`           | `muted-color`             |   `#aaa` | Non-selected item text color                                                                                  |
+| `activeColor`          | `active-color`            |  `color` | Selected item text color                                                                                      |
+| `background`           | `background`              | gradient | Picker window background. Accepts any valid CSS background value.                                             |
+| `arrows`               | `arrows`                  |  `false` | Shows clickable top/bottom arrow buttons that decrement/increment the value.                                  |
+| `arrowsHiddenMaxWidth` | `arrows-hidden-max-width` |    empty | Optional responsive breakpoint in pixels. At screen widths up to this value, the arrow buttons are hidden.    |
 
 ## Dynamic updates
 
@@ -90,6 +96,8 @@ picker.setAttribute("item-height", "64");
 picker.setAttribute("visible-items", "3");
 picker.setAttribute("active-color", "crimson");
 picker.setAttribute("background", "#fff7ed");
+picker.setAttribute("arrows", "true");
+picker.setAttribute("arrows-hidden-max-width", "480");
 ```
 
 The component recalculates its render dimensions and snapping math automatically.
@@ -115,3 +123,47 @@ For the most predictable behavior, prefer the `item-height` attribute or `itemHe
 ## Local demo
 
 Open `demo/index.html` in a browser.
+
+## 1.1.1 item-height alignment fix
+
+`item-height` now drives the offset math from the center line of the picker, not from an implicit zero-offset assumption. Font sizes also scale down with small item heights unless you explicitly override `--wnp-item-font-size` or `--wnp-active-font-size`.
+
+Example:
+
+```html
+<wheel-number-picker item-height="28" visible-items="3"></wheel-number-picker>
+```
+
+## 1.1.2 responsive arrows
+
+Enable clickable arrows with the `arrows` attribute. Each click steps the picker by one value.
+
+```html
+<wheel-number-picker
+  min="0"
+  max="10"
+  value="5"
+  arrows
+  arrows-hidden-max-width="480"
+>
+</wheel-number-picker>
+```
+
+`arrows-hidden-max-width="480"` injects a component-scoped media query equivalent to:
+
+```css
+@media (max-width: 480px) {
+  /* this component's arrows are hidden */
+}
+```
+
+You can style the buttons with CSS variables:
+
+```css
+wheel-number-picker {
+  --wnp-arrow-height: 36px;
+  --wnp-arrow-gap: 6px;
+  --wnp-arrow-background: #f8fafc;
+  --wnp-arrow-color: #2563eb;
+}
+```

package/demo/index.html

@@ -48,7 +48,7 @@
 <body>
   <main>
     <h1>Wheel Number Picker</h1>
-    <p>Drag, scroll, or use keyboard arrows.</p>
+    <p>Drag, scroll, use keyboard arrows, or click the arrow buttons. Resize below 480px to hide arrows.</p>
 
     <wheel-number-picker
       min="0"
@@ -59,7 +59,9 @@
       color="#111827"
       muted-color="#9ca3af"
       active-color="#2563eb"
-      background="#f8fafc">
+      background="#f8fafc"
+      arrows
+      arrows-hidden-max-width="480">
     </wheel-number-picker>
 
     <div class="selected">Selected: <strong id="selectedValue">25</strong></div>

package/dist/wheel-number-picker.css

@@ -26,17 +26,21 @@ wheel-number-picker,
 }
 
 .wheel-number-picker__item {
+  box-sizing: border-box;
   height: var(--wnp-item-height, 44px);
+  min-height: var(--wnp-item-height, 44px);
   display: grid;
   place-items: center;
-  font-size: var(--wnp-item-font-size, 22px);
+  line-height: 1;
+  font-size: var(--wnp-item-font-size, clamp(12px, calc(var(--wnp-item-height, 44px) * 0.5), 22px));
   color: var(--wnp-muted-color, #aaa);
   transition: color 120ms ease, font-size 120ms ease, opacity 120ms ease;
 }
 
 .wheel-number-picker__item--active {
   color: var(--wnp-active-color, var(--wnp-color, #111));
-  font-size: var(--wnp-active-font-size, 34px);
+  line-height: 1;
+  font-size: var(--wnp-active-font-size, clamp(16px, calc(var(--wnp-item-height, 44px) * 0.72), 34px));
   font-weight: var(--wnp-active-font-weight, 750);
 }
 
@@ -58,3 +62,36 @@ wheel-number-picker,
   pointer-events: none;
   background: var(--wnp-fade, linear-gradient(to bottom, white 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, white 100%));
 }
+
+.wheel-number-picker__arrow {
+  width: 100%;
+  height: var(--wnp-arrow-height, 32px);
+  display: var(--wnp-arrows-display, none);
+  place-items: center;
+  border: var(--wnp-arrow-border, 1px solid #ddd);
+  border-radius: var(--wnp-arrow-radius, 12px);
+  background: var(--wnp-arrow-background, var(--wnp-background, #fff));
+  color: var(--wnp-arrow-color, var(--wnp-active-color, var(--wnp-color, #111)));
+  font: inherit;
+  font-size: var(--wnp-arrow-font-size, 14px);
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+}
+
+.wheel-number-picker__arrow:hover {
+  background: var(--wnp-arrow-hover-background, #f5f5f5);
+}
+
+.wheel-number-picker__arrow:active {
+  transform: translateY(1px);
+}
+
+.wheel-number-picker__arrow--up {
+  margin-bottom: var(--wnp-arrow-gap, 8px);
+}
+
+.wheel-number-picker__arrow--down {
+  margin-top: var(--wnp-arrow-gap, 8px);
+}

package/dist/wheel-number-picker.js

@@ -10,7 +10,9 @@
     color: '',
     activeColor: '',
     mutedColor: '',
-    background: ''
+    background: '',
+    arrows: false,
+    arrowsHiddenMaxWidth: ''
   };
 
   function readOption(root, options, optionName, attributeName, fallback) {
@@ -36,6 +38,9 @@
         background: readOption(this.root, options, 'background', 'background', DEFAULTS.background)
       };
 
+      this.arrows = this.normalizeBoolean(readOption(this.root, options, 'arrows', 'arrows', DEFAULTS.arrows));
+      this.arrowsHiddenMaxWidth = readOption(this.root, options, 'arrowsHiddenMaxWidth', 'arrows-hidden-max-width', DEFAULTS.arrowsHiddenMaxWidth);
+
       this.isDragging = false;
       this.startY = 0;
       this.startOffset = 0;
@@ -45,6 +50,7 @@
       this.velocity = 0;
       this.animationFrame = null;
 
+      this.normalizeConfiguration();
       this.render();
       this.bindEvents();
       this.snapToValue(this.value, false);
@@ -57,26 +63,30 @@
       if (!this.root.getAttribute('aria-label')) this.root.setAttribute('aria-label', 'Number picker');
 
       this.root.innerHTML = `
+        <button class="wheel-number-picker__arrow wheel-number-picker__arrow--up" type="button" aria-label="Decrease value">▲</button>
         <div class="wheel-number-picker__window">
           <div class="wheel-number-picker__list"></div>
           <div class="wheel-number-picker__highlight"></div>
           <div class="wheel-number-picker__fade"></div>
         </div>
+        <button class="wheel-number-picker__arrow wheel-number-picker__arrow--down" type="button" aria-label="Increase value">▼</button>
       `;
 
       this.list = this.root.querySelector('.wheel-number-picker__list');
-      this.rebuildItems();
+      this.upArrow = this.root.querySelector('.wheel-number-picker__arrow--up');
+      this.downArrow = this.root.querySelector('.wheel-number-picker__arrow--down');
       this.applyConfiguration();
+      this.rebuildItems();
     }
 
     rebuildItems() {
       if (!this.list) return;
       this.list.innerHTML = '';
-      const spacerCount = Math.floor(this.visibleItems / 2);
+      this.spacerCount = Math.floor(this.visibleItems / 2);
 
-      for (let i = 0; i < spacerCount; i++) this.list.appendChild(this.createItem(''));
+      for (let i = 0; i < this.spacerCount; i++) this.list.appendChild(this.createItem(''));
       for (let value = this.min; value <= this.max; value++) this.list.appendChild(this.createItem(value));
-      for (let i = 0; i < spacerCount; i++) this.list.appendChild(this.createItem(''));
+      for (let i = 0; i < this.spacerCount; i++) this.list.appendChild(this.createItem(''));
     }
 
     createItem(value) {
@@ -87,12 +97,17 @@
       return item;
     }
 
-    applyConfiguration() {
+    normalizeConfiguration() {
       if (!Number.isFinite(this.itemHeight) || this.itemHeight <= 0) this.itemHeight = DEFAULTS.itemHeight;
       if (!Number.isFinite(this.visibleItems) || this.visibleItems < 1) this.visibleItems = DEFAULTS.visibleItems;
 
       this.visibleItems = Math.round(this.visibleItems);
       if (this.visibleItems % 2 === 0) this.visibleItems += 1;
+      this.spacerCount = Math.floor(this.visibleItems / 2);
+    }
+
+    applyConfiguration() {
+      this.normalizeConfiguration();
 
       this.root.style.setProperty('--wnp-item-height', `${this.itemHeight}px`);
       this.root.style.setProperty('--wnp-visible-items', String(this.visibleItems));
@@ -105,6 +120,9 @@
 
       this.root.setAttribute('item-height', String(this.itemHeight));
       this.root.setAttribute('visible-items', String(this.visibleItems));
+      this.root.classList.toggle('wheel-number-picker--arrows', this.arrows);
+      this.root.style.setProperty('--wnp-arrows-display', this.arrows ? 'grid' : 'none');
+      this.applyArrowMediaQuery();
     }
 
     setCssVariableFromValue(name, value) {
@@ -112,18 +130,55 @@
       this.root.style.setProperty(name, String(value));
     }
 
+    normalizeBoolean(value) {
+      if (value === true || value === '') return true;
+      if (value === false || value === null || value === undefined) return false;
+      return !['false', '0', 'no', 'off'].includes(String(value).toLowerCase());
+    }
+
+    applyArrowMediaQuery() {
+      if (this.arrowStyleElement) this.arrowStyleElement.remove();
+      if (!this.arrows || this.arrowsHiddenMaxWidth === '' || this.arrowsHiddenMaxWidth === null || this.arrowsHiddenMaxWidth === undefined) return;
+
+      const maxWidth = Number(this.arrowsHiddenMaxWidth);
+      if (!Number.isFinite(maxWidth) || maxWidth < 0) return;
+
+      if (!this.root.id) this.root.id = `wheel-number-picker-${Math.random().toString(36).slice(2)}`;
+      this.arrowStyleElement = document.createElement('style');
+      this.arrowStyleElement.textContent = `@media (max-width: ${maxWidth}px) { #${CSS.escape(this.root.id)} .wheel-number-picker__arrow { display: none; } }`;
+      document.head.appendChild(this.arrowStyleElement);
+    }
+
+    setArrows(arrows) {
+      this.arrows = this.normalizeBoolean(arrows);
+      this.applyConfiguration();
+    }
+
+    setArrowsHiddenMaxWidth(value) {
+      this.arrowsHiddenMaxWidth = value ?? '';
+      this.applyConfiguration();
+    }
+
+
     bindEvents() {
       this.onPointerDownBound = this.onPointerDown.bind(this);
       this.onPointerMoveBound = this.onPointerMove.bind(this);
       this.onPointerUpBound = this.onPointerUp.bind(this);
       this.onWheelBound = this.onWheel.bind(this);
       this.onKeyDownBound = this.onKeyDown.bind(this);
+      this.onArrowUpClickBound = () => this.setValue(this.value - 1);
+      this.onArrowDownClickBound = () => this.setValue(this.value + 1);
+      this.onArrowPointerDownBound = event => event.stopPropagation();
 
       this.root.addEventListener('pointerdown', this.onPointerDownBound);
       window.addEventListener('pointermove', this.onPointerMoveBound);
       window.addEventListener('pointerup', this.onPointerUpBound);
       this.root.addEventListener('wheel', this.onWheelBound, { passive: false });
       this.root.addEventListener('keydown', this.onKeyDownBound);
+      this.upArrow.addEventListener('click', this.onArrowUpClickBound);
+      this.downArrow.addEventListener('click', this.onArrowDownClickBound);
+      this.upArrow.addEventListener('pointerdown', this.onArrowPointerDownBound);
+      this.downArrow.addEventListener('pointerdown', this.onArrowPointerDownBound);
     }
 
     destroy() {
@@ -133,6 +188,12 @@
       window.removeEventListener('pointerup', this.onPointerUpBound);
       this.root.removeEventListener('wheel', this.onWheelBound);
       this.root.removeEventListener('keydown', this.onKeyDownBound);
+      this.upArrow?.removeEventListener('click', this.onArrowUpClickBound);
+      this.downArrow?.removeEventListener('click', this.onArrowDownClickBound);
+      this.upArrow?.removeEventListener('pointerdown', this.onArrowPointerDownBound);
+      this.downArrow?.removeEventListener('pointerdown', this.onArrowPointerDownBound);
+      this.arrowStyleElement?.remove();
+      this.arrowStyleElement = null;
       this.root.innerHTML = '';
     }
 
@@ -215,7 +276,7 @@
     }
 
     snapToNearest() {
-      const rawIndex = -this.offset / this.itemHeight;
+      const rawIndex = this.offsetToIndex(this.offset);
       const value = this.clamp(this.min + Math.round(rawIndex));
       this.setValue(value);
     }
@@ -256,9 +317,8 @@
       const next = Number(visibleItems);
       if (!Number.isFinite(next) || next < 1) return;
       this.visibleItems = Math.round(next);
-      if (this.visibleItems % 2 === 0) this.visibleItems += 1;
-      this.rebuildItems();
       this.applyConfiguration();
+      this.rebuildItems();
       this.snapToValue(this.value, false);
     }
 
@@ -272,7 +332,16 @@
     }
 
     valueToOffset(value) {
-      return -(value - this.min) * this.itemHeight;
+      const index = Number(value) - this.min;
+      const windowCenter = (this.itemHeight * this.visibleItems) / 2;
+      const itemCenter = (this.spacerCount + index) * this.itemHeight + this.itemHeight / 2;
+      return windowCenter - itemCenter;
+    }
+
+    offsetToIndex(offset) {
+      const windowCenter = (this.itemHeight * this.visibleItems) / 2;
+      const centeredItemPosition = windowCenter - offset - this.itemHeight / 2;
+      return centeredItemPosition / this.itemHeight - this.spacerCount;
     }
 
     clamp(value) {
@@ -290,7 +359,7 @@
     }
 
     updateActiveFromOffset() {
-      const rawIndex = -this.offset / this.itemHeight;
+      const rawIndex = this.offsetToIndex(this.offset);
       const value = this.clamp(this.min + Math.round(rawIndex));
       this.updateActive(value);
     }
@@ -317,7 +386,7 @@
 
   class WheelNumberPickerElement extends HTMLElement {
     static get observedAttributes() {
-      return ['value', 'item-height', 'visible-items', 'color', 'active-color', 'muted-color', 'background'];
+      return ['value', 'item-height', 'visible-items', 'color', 'active-color', 'muted-color', 'background', 'arrows', 'arrows-hidden-max-width'];
     }
 
     connectedCallback() {
@@ -331,7 +400,9 @@
         color: this.getAttribute('color') ?? DEFAULTS.color,
         activeColor: this.getAttribute('active-color') ?? DEFAULTS.activeColor,
         mutedColor: this.getAttribute('muted-color') ?? DEFAULTS.mutedColor,
-        background: this.getAttribute('background') ?? DEFAULTS.background
+        background: this.getAttribute('background') ?? DEFAULTS.background,
+        arrows: this.hasAttribute('arrows') ? this.getAttribute('arrows') : DEFAULTS.arrows,
+        arrowsHiddenMaxWidth: this.getAttribute('arrows-hidden-max-width') ?? DEFAULTS.arrowsHiddenMaxWidth
       });
     }
 
@@ -350,6 +421,8 @@
       if (name === 'active-color') this.picker.setColors({ activeColor: newValue });
       if (name === 'muted-color') this.picker.setColors({ mutedColor: newValue });
       if (name === 'background') this.picker.setColors({ background: newValue });
+      if (name === 'arrows') this.picker.setArrows(newValue !== null && this.picker.normalizeBoolean(newValue));
+      if (name === 'arrows-hidden-max-width') this.picker.setArrowsHiddenMaxWidth(newValue);
     }
 
     get value() {

package/dist/wheel-number-picker.min.js

@@ -10,7 +10,9 @@
     color: '',
     activeColor: '',
     mutedColor: '',
-    background: ''
+    background: '',
+    arrows: false,
+    arrowsHiddenMaxWidth: ''
   };
 
   function readOption(root, options, optionName, attributeName, fallback) {
@@ -36,6 +38,9 @@
         background: readOption(this.root, options, 'background', 'background', DEFAULTS.background)
       };
 
+      this.arrows = this.normalizeBoolean(readOption(this.root, options, 'arrows', 'arrows', DEFAULTS.arrows));
+      this.arrowsHiddenMaxWidth = readOption(this.root, options, 'arrowsHiddenMaxWidth', 'arrows-hidden-max-width', DEFAULTS.arrowsHiddenMaxWidth);
+
       this.isDragging = false;
       this.startY = 0;
       this.startOffset = 0;
@@ -45,6 +50,7 @@
       this.velocity = 0;
       this.animationFrame = null;
 
+      this.normalizeConfiguration();
       this.render();
       this.bindEvents();
       this.snapToValue(this.value, false);
@@ -57,26 +63,30 @@
       if (!this.root.getAttribute('aria-label')) this.root.setAttribute('aria-label', 'Number picker');
 
       this.root.innerHTML = `
+        <button class="wheel-number-picker__arrow wheel-number-picker__arrow--up" type="button" aria-label="Decrease value">▲</button>
         <div class="wheel-number-picker__window">
           <div class="wheel-number-picker__list"></div>
           <div class="wheel-number-picker__highlight"></div>
           <div class="wheel-number-picker__fade"></div>
         </div>
+        <button class="wheel-number-picker__arrow wheel-number-picker__arrow--down" type="button" aria-label="Increase value">▼</button>
       `;
 
       this.list = this.root.querySelector('.wheel-number-picker__list');
-      this.rebuildItems();
+      this.upArrow = this.root.querySelector('.wheel-number-picker__arrow--up');
+      this.downArrow = this.root.querySelector('.wheel-number-picker__arrow--down');
       this.applyConfiguration();
+      this.rebuildItems();
     }
 
     rebuildItems() {
       if (!this.list) return;
       this.list.innerHTML = '';
-      const spacerCount = Math.floor(this.visibleItems / 2);
+      this.spacerCount = Math.floor(this.visibleItems / 2);
 
-      for (let i = 0; i < spacerCount; i++) this.list.appendChild(this.createItem(''));
+      for (let i = 0; i < this.spacerCount; i++) this.list.appendChild(this.createItem(''));
       for (let value = this.min; value <= this.max; value++) this.list.appendChild(this.createItem(value));
-      for (let i = 0; i < spacerCount; i++) this.list.appendChild(this.createItem(''));
+      for (let i = 0; i < this.spacerCount; i++) this.list.appendChild(this.createItem(''));
     }
 
     createItem(value) {
@@ -87,12 +97,17 @@
       return item;
     }
 
-    applyConfiguration() {
+    normalizeConfiguration() {
       if (!Number.isFinite(this.itemHeight) || this.itemHeight <= 0) this.itemHeight = DEFAULTS.itemHeight;
       if (!Number.isFinite(this.visibleItems) || this.visibleItems < 1) this.visibleItems = DEFAULTS.visibleItems;
 
       this.visibleItems = Math.round(this.visibleItems);
       if (this.visibleItems % 2 === 0) this.visibleItems += 1;
+      this.spacerCount = Math.floor(this.visibleItems / 2);
+    }
+
+    applyConfiguration() {
+      this.normalizeConfiguration();
 
       this.root.style.setProperty('--wnp-item-height', `${this.itemHeight}px`);
       this.root.style.setProperty('--wnp-visible-items', String(this.visibleItems));
@@ -105,6 +120,9 @@
 
       this.root.setAttribute('item-height', String(this.itemHeight));
       this.root.setAttribute('visible-items', String(this.visibleItems));
+      this.root.classList.toggle('wheel-number-picker--arrows', this.arrows);
+      this.root.style.setProperty('--wnp-arrows-display', this.arrows ? 'grid' : 'none');
+      this.applyArrowMediaQuery();
     }
 
     setCssVariableFromValue(name, value) {
@@ -112,18 +130,55 @@
       this.root.style.setProperty(name, String(value));
     }
 
+    normalizeBoolean(value) {
+      if (value === true || value === '') return true;
+      if (value === false || value === null || value === undefined) return false;
+      return !['false', '0', 'no', 'off'].includes(String(value).toLowerCase());
+    }
+
+    applyArrowMediaQuery() {
+      if (this.arrowStyleElement) this.arrowStyleElement.remove();
+      if (!this.arrows || this.arrowsHiddenMaxWidth === '' || this.arrowsHiddenMaxWidth === null || this.arrowsHiddenMaxWidth === undefined) return;
+
+      const maxWidth = Number(this.arrowsHiddenMaxWidth);
+      if (!Number.isFinite(maxWidth) || maxWidth < 0) return;
+
+      if (!this.root.id) this.root.id = `wheel-number-picker-${Math.random().toString(36).slice(2)}`;
+      this.arrowStyleElement = document.createElement('style');
+      this.arrowStyleElement.textContent = `@media (max-width: ${maxWidth}px) { #${CSS.escape(this.root.id)} .wheel-number-picker__arrow { display: none; } }`;
+      document.head.appendChild(this.arrowStyleElement);
+    }
+
+    setArrows(arrows) {
+      this.arrows = this.normalizeBoolean(arrows);
+      this.applyConfiguration();
+    }
+
+    setArrowsHiddenMaxWidth(value) {
+      this.arrowsHiddenMaxWidth = value ?? '';
+      this.applyConfiguration();
+    }
+
+
     bindEvents() {
       this.onPointerDownBound = this.onPointerDown.bind(this);
       this.onPointerMoveBound = this.onPointerMove.bind(this);
       this.onPointerUpBound = this.onPointerUp.bind(this);
       this.onWheelBound = this.onWheel.bind(this);
       this.onKeyDownBound = this.onKeyDown.bind(this);
+      this.onArrowUpClickBound = () => this.setValue(this.value - 1);
+      this.onArrowDownClickBound = () => this.setValue(this.value + 1);
+      this.onArrowPointerDownBound = event => event.stopPropagation();
 
       this.root.addEventListener('pointerdown', this.onPointerDownBound);
       window.addEventListener('pointermove', this.onPointerMoveBound);
       window.addEventListener('pointerup', this.onPointerUpBound);
       this.root.addEventListener('wheel', this.onWheelBound, { passive: false });
       this.root.addEventListener('keydown', this.onKeyDownBound);
+      this.upArrow.addEventListener('click', this.onArrowUpClickBound);
+      this.downArrow.addEventListener('click', this.onArrowDownClickBound);
+      this.upArrow.addEventListener('pointerdown', this.onArrowPointerDownBound);
+      this.downArrow.addEventListener('pointerdown', this.onArrowPointerDownBound);
     }
 
     destroy() {
@@ -133,6 +188,12 @@
       window.removeEventListener('pointerup', this.onPointerUpBound);
       this.root.removeEventListener('wheel', this.onWheelBound);
       this.root.removeEventListener('keydown', this.onKeyDownBound);
+      this.upArrow?.removeEventListener('click', this.onArrowUpClickBound);
+      this.downArrow?.removeEventListener('click', this.onArrowDownClickBound);
+      this.upArrow?.removeEventListener('pointerdown', this.onArrowPointerDownBound);
+      this.downArrow?.removeEventListener('pointerdown', this.onArrowPointerDownBound);
+      this.arrowStyleElement?.remove();
+      this.arrowStyleElement = null;
       this.root.innerHTML = '';
     }
 
@@ -215,7 +276,7 @@
     }
 
     snapToNearest() {
-      const rawIndex = -this.offset / this.itemHeight;
+      const rawIndex = this.offsetToIndex(this.offset);
       const value = this.clamp(this.min + Math.round(rawIndex));
       this.setValue(value);
     }
@@ -256,9 +317,8 @@
       const next = Number(visibleItems);
       if (!Number.isFinite(next) || next < 1) return;
       this.visibleItems = Math.round(next);
-      if (this.visibleItems % 2 === 0) this.visibleItems += 1;
-      this.rebuildItems();
       this.applyConfiguration();
+      this.rebuildItems();
       this.snapToValue(this.value, false);
     }
 
@@ -272,7 +332,16 @@
     }
 
     valueToOffset(value) {
-      return -(value - this.min) * this.itemHeight;
+      const index = Number(value) - this.min;
+      const windowCenter = (this.itemHeight * this.visibleItems) / 2;
+      const itemCenter = (this.spacerCount + index) * this.itemHeight + this.itemHeight / 2;
+      return windowCenter - itemCenter;
+    }
+
+    offsetToIndex(offset) {
+      const windowCenter = (this.itemHeight * this.visibleItems) / 2;
+      const centeredItemPosition = windowCenter - offset - this.itemHeight / 2;
+      return centeredItemPosition / this.itemHeight - this.spacerCount;
     }
 
     clamp(value) {
@@ -290,7 +359,7 @@
     }
 
     updateActiveFromOffset() {
-      const rawIndex = -this.offset / this.itemHeight;
+      const rawIndex = this.offsetToIndex(this.offset);
       const value = this.clamp(this.min + Math.round(rawIndex));
       this.updateActive(value);
     }
@@ -317,7 +386,7 @@
 
   class WheelNumberPickerElement extends HTMLElement {
     static get observedAttributes() {
-      return ['value', 'item-height', 'visible-items', 'color', 'active-color', 'muted-color', 'background'];
+      return ['value', 'item-height', 'visible-items', 'color', 'active-color', 'muted-color', 'background', 'arrows', 'arrows-hidden-max-width'];
     }
 
     connectedCallback() {
@@ -331,7 +400,9 @@
         color: this.getAttribute('color') ?? DEFAULTS.color,
         activeColor: this.getAttribute('active-color') ?? DEFAULTS.activeColor,
         mutedColor: this.getAttribute('muted-color') ?? DEFAULTS.mutedColor,
-        background: this.getAttribute('background') ?? DEFAULTS.background
+        background: this.getAttribute('background') ?? DEFAULTS.background,
+        arrows: this.hasAttribute('arrows') ? this.getAttribute('arrows') : DEFAULTS.arrows,
+        arrowsHiddenMaxWidth: this.getAttribute('arrows-hidden-max-width') ?? DEFAULTS.arrowsHiddenMaxWidth
       });
     }
 
@@ -350,6 +421,8 @@
       if (name === 'active-color') this.picker.setColors({ activeColor: newValue });
       if (name === 'muted-color') this.picker.setColors({ mutedColor: newValue });
       if (name === 'background') this.picker.setColors({ background: newValue });
+      if (name === 'arrows') this.picker.setArrows(newValue !== null && this.picker.normalizeBoolean(newValue));
+      if (name === 'arrows-hidden-max-width') this.picker.setArrowsHiddenMaxWidth(newValue);
     }
 
     get value() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-wheel-number-picker",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "A plain JavaScript wheel-style number picker with drag, inertia, snapping, keyboard support, colors, dynamic item height, and a custom element API.",
   "main": "dist/wheel-number-picker.js",
   "unpkg": "dist/wheel-number-picker.min.js",