fix(LionInputStepper): improve handling of decimal step values and al… (#2621)

* fix(LionInputStepper): improve handling of decimal step values and alignment

* fix: add changeset LionInputStepper improvements

.changeset/four-rabbits-cover.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+fix(LionInputStepper): improve handling of decimal step values and alignment closes #2615

README.md

@@ -54,6 +54,35 @@ They provide an unopinionated, white-label layer that can be extended to your ow
   <a href="https://lion.js.org/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
 </p>
 
+<details>
+<summary><h2>Table of Contents</h2></summary>
+<ul>
+  <li><a href="#astro-migration"> Astro migration </a>
+  <ul>
+   <li><a href="#astro-how-to"> Astro how to </a></li>
+   <li><a href="#issues-which-are-not-caused-by-the-migration-not-to-be-fixed-now"> Issues which are not caused by migration </a></li>
+  </ul>
+ </li>
+ <li><a href="#how-to-install"> Installation </a></li>
+ <li><a href="#how-to-use"> How to use </a>
+  <ul>
+   <li><a href="#extend-a-web-component"> Extend a web component </a></li>
+   <li><a href="#use-a-javascript-system"> Use a JavaScript system </a></li>
+   <li><a href="#use-a-web-component"> Use a Web Component </a></li>
+  </ul>
+ </li>
+ <li><a href="#issues"> Issues </a></li>
+ <li><a href="#feature-requests"> Feature request </a></li>
+ <li><a href="#content"> Content </a></li>
+ <li><a href="#technologies"> Technologies </a></li>
+ <li><a href="#rationale"> Rationale </a></li>
+ <li><a href="#coding-guidelines"> Coding guidelines </a></li>
+ <li><a href="#how-to-contribute"> How to contribute </a></li>
+ <li><a href="#site-deployment"> Site deployment </a></li>
+ <li><a href="#content"> Contact </a></li>
+</ul>
+</details>
+
 ## Astro migration
 
 - Keep using `/docs` on the root level as we used it in the `master` branch. The documentation is copied into Astro related directories on `npm run start` and when when anything in `/docs` is updated.

docs/_assets/style.css

@@ -130,3 +130,13 @@ rocket-navigation ul > li:nth-child(n + 6).active > ul {
   font-size: inherit;
   color: inherit;
 }
+
+.announcement-bar {
+  background: var(--primary-color);
+  color: white;
+  text-align: center;
+
+  & a {
+    color: white;
+  }
+}

docs/_includes/partials/header.njk

@@ -0,0 +1,11 @@
+<div class="announcement-bar">
+   <p>A new portal is coming! Check out <a href="/about/astro">the technical release of our Astro portal</a></p>
+</div>
+
+<header id="main-header">
+  <div class="content-area">
+    {% for blockName, blockPath in _joiningBlocks.header %}
+      {% include blockPath %}
+    {% endfor %}
+  </div>
+</header>

docs/about/astro.md

@@ -0,0 +1,27 @@
+---
+title: Astro portal
+description: Technically live with Astro (while still fully compatible with Rocket content!)
+---
+
+# Astro Portal Announcement
+
+We are excited to introduce the new version of our portal, now built with the Astro framework! You can access it at <a href="https://lion.js.org/next" rel="noopener noreferrer">/next</a>.
+
+## What’s New?
+
+- **Modern Look & Feel:** The UI will be redesigned in close collaboration with our designers. Expect further improvements as the design team continues to enhance the user experience.
+- **Search Functionality:** Quickly find components and documentation with the new search feature.
+- **Upgraded Dependencies:** All major dependencies and approaches have been updated for better performance, security, and maintainability.
+
+## Compatibility
+
+The new Astro portal is fully compatible with the previous Rocket-based portal. Maintaining the same structure and functionality was a key challenge and priority, ensuring a seamless experience for all users. Both portals will run in parallel in the near term future. During the course of 2026 the Astro portal will become the default.
+
+## For Developers
+
+The technical release of the Astro portal is primarily aimed at developers. We encourage you to explore the new features and provide feedback.
+
+**Found an issue or have a suggestion?**
+Please open an issue on [GitHub](https://github.com/ing-bank/lion/issues) and use the tag `#astro`.
+
+Stay tuned for more updates as we continue to improve the portal!

packages/ui/components/input-stepper/src/LionInputStepper.js

@@ -267,12 +267,19 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
   _increment() {
     const { step, min, max } = this.values;
     const stepMin = min !== Infinity ? min : 0;
+    const epsilon = 1e-10; // Tolerance for floating-point comparison
 
-    let newValue = this.currentValue + step;
+    let newValue;
 
-    if ((this.currentValue + stepMin) % step !== 0) {
+    const remainder = (this.currentValue - stepMin) % step;
-      // If the value is not aligned to step, align it to the nearest step
+    const isAligned = Math.abs(remainder) < epsilon || Math.abs(remainder - step) < epsilon;
-      newValue = Math.floor(this.currentValue / step) * step + step + (stepMin % step);
+
+    if (!isAligned) {
+      // If the value is not aligned to step, align it to the next valid step
+      newValue = Math.ceil((this.currentValue - stepMin) / step) * step + stepMin;
+    } else {
+      // If the value is aligned, just add the step
+      newValue = this.currentValue + step;
     }
 
     if (newValue <= max || max === Infinity) {
@@ -289,12 +296,19 @@ export class LionInputStepper extends LocalizeMixin(LionInput) {
   _decrement() {
     const { step, max, min } = this.values;
     const stepMin = min !== Infinity ? min : 0;
+    const epsilon = 1e-10; // Tolerance for floating-point comparison
 
-    let newValue = this.currentValue - step;
+    let newValue;
 
-    if ((this.currentValue + stepMin) % step !== 0) {
+    const remainder = (this.currentValue - stepMin) % step;
-      // If the value is not aligned to step, align it to the nearest step
+    const isAligned = Math.abs(remainder) < epsilon || Math.abs(remainder - step) < epsilon;
-      newValue = Math.floor(this.currentValue / step) * step + (stepMin % step);
+
+    if (!isAligned) {
+      // If the value is not aligned to step, align it to the previous valid step
+      newValue = Math.floor((this.currentValue - stepMin) / step) * step + stepMin;
+    } else {
+      // If the value is aligned, just subtract the step
+      newValue = this.currentValue - step;
     }
 
     if (newValue >= min || min === Infinity) {

packages/ui/components/input-stepper/test/lion-input-stepper.test.js

@@ -359,6 +359,47 @@ describe('<lion-input-stepper>', () => {
         await el.updateComplete;
         expect(el.modelValue).to.equal(-13, 'Fail - : (-23 > 100 by 10; val 55)'); // -23 > -13 > -3 > 7
       });
+
+      it('handles decimal step values correctly', async () => {
+        // Test with decimal step 0.1
+        let el = await fixture(
+          html`<lion-input-stepper step="0.1" min="0" max="9" value="5.55"></lion-input-stepper>`,
+        );
+
+        // Test increment with decimal step
+        let incrementButton = el.querySelector('[slot=suffix]');
+        incrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(5.6, 'Fail + : (0 > 9 by 0.1; val 5.55)');
+
+        // Test decrement with decimal step
+        let decrementButton = el.querySelector('[slot=prefix]');
+        decrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(5.5, 'Fail - : (0 > 9 by 0.1; val 5.6)');
+
+        // Test with value that needs alignment
+        el = await fixture(
+          html`<lion-input-stepper step="0.1" min="0" max="9" value="3.27"></lion-input-stepper>`,
+        );
+
+        // Should align to next step when incrementing
+        incrementButton = el.querySelector('[slot=suffix]');
+        incrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(3.3, 'Fail + alignment: (0 > 9 by 0.1; val 3.27)');
+
+        // Reset and test decrement alignment
+        el = await fixture(
+          html`<lion-input-stepper step="0.1" min="0" max="9" value="3.27"></lion-input-stepper>`,
+        );
+
+        // Should align to previous step when decrementing
+        decrementButton = el.querySelector('[slot=prefix]');
+        decrementButton?.dispatchEvent(new Event('click'));
+        await el.updateComplete;
+        expect(el.modelValue).to.equal(3.2, 'Fail - alignment: (0 > 9 by 0.1; val 3.27)');
+      });
     });
   });
 

rocket.config.mjs

@@ -34,6 +34,9 @@ export default {
     eleventyConfig.setUseGitIgnore(false);
     eleventyConfig.addPassthroughCopy('CNAME');
   },
+  checkLinks: {
+    ignoreLinkPatterns: ['**/astro'],
+  },
   absoluteBaseUrl: absoluteBaseUrlNetlify('http://localhost:8080'),
   setupUnifiedPlugins: [
     adjustPluginOptions(mdjsSetupCode, {