Repository: juntossomosmais/atomium
Pull request #748: feat(atom-list-slider): add 'step' property to the interface
Author: login: anabrook
Created: 2025-04-22T22:20:17Z | Merged: 2025-04-24T13:55:22Z

[Task](https://juntossomosmais.monday.com/boards/3328436962/views/97222821/pulses/8527506120)

## Summary

This pull request adds a new `step` property to the `AtomListSlider` component, allowing users to control the number of items to advance or go back when navigating. It also updates the corresponding stories to demonstrate this new functionality. Below are the key changes:

### Feature Addition: `step` Property in `AtomListSlider`

* Added a new `step` property to the `AtomListSlider` component, with a default value of `1`. This property determines the number of items to navigate forward or backward. (`packages/core/src/components/list-slider/list-slider.tsx`, [packages/core/src/components/list-slider/list-slider.tsxR22](diffhunk://#diff-2c5a766e4d119ac62f36714f2fa93937fa676a54df335a9b39c4022a3de81b29R22))
* Updated navigation logic to use the `step` value for determining the new index when moving forward or backward. (`packages/core/src/components/list-slider/list-slider.tsx`, [[1]](diffhunk://#diff-2c5a766e4d119ac62f36714f2fa93937fa676a54df335a9b39c4022a3de81b29L142-R145) [[2]](diffhunk://#diff-2c5a766e4d119ac62f36714f2fa93937fa676a54df335a9b39c4022a3de81b29L239-R243)

### Updates to Storybook for `AtomListSlider`

* Added the `step` property to the Storybook arguments (`ListSliderStoryArgs`), including a description, default value, and control type. (`packages/core/src/components/list-slider/stories/list-slider.args.ts`, [packages/core/src/components/list-slider/stories/list-slider.args.tsR33-R40](diffhunk://#diff-abe29f97969fc16589b0c0ff6964f51e393265759497f8baf49510a4f8d76997R33-R40))
* Set a default value for the `step` property in `ListSliderComponentArgs`. (`packages/core/src/components/list-slider/stories/list-slider.args.ts`, [packages/core/src/components/list-slider/stories/list-slider.args.tsL80-R90](diffhunk://#diff-abe29f97969fc16589b0c0ff6964f51e393265759497f8baf49510a4f8d76997L80-R90))
* Modified the `createListSlider` function in the Storybook to accept and apply the `step` argument, and added additional slider items to better demonstrate the functionality. (`packages/core/src/components/list-slider/stories/list-slider.core.stories.tsx`, [[1]](diffhunk://#diff-947de2fa60f18af16772859491ee311eb6237befc3497584e7f72aba127813c1L13-R15) [[2]](diffhunk://#diff-947de2fa60f18af16772859491ee311eb6237befc3497584e7f72aba127813c1R31-R51)

## Evidences

Media(images, gifs or videos) that shows the result of your work.

https://github.com/user-attachments/assets/3cf4cff8-d4e2-479a-9037-96aed2ab73b5






Diff:
diff --git a/package-lock.json b/package-lock.json
index 635c6f674f..915402f96e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7946,6 +7946,28 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/babel-plugin-root-import": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-root-import/-/babel-plugin-root-import-5.1.0.tgz",
+      "integrity": "sha512-9VYUlnHtM7zjM9vM3kFClUDH7jjhqnvQwxWYGP18EciPsPZYZD9wGqVGwry6gQv0UdZS0+WmbPSlKSjKv1wZFw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "slash": "^1.0.0"
+      }
+    },
+    "node_modules/babel-plugin-root-import/node_modules/slash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+      "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/babel-plugin-transform-scss": {
       "version": "1.2.0",
       "dev": true,
@@ -17901,6 +17923,23 @@
         "postcss": "^8.4.20"
       }
     },
+    "node_modules/postcss-styled-syntax": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.7.1.tgz",
+      "integrity": "sha512-V5Iy8JztqXOKnTojdytF8IJ3zDXyVR927XftBPinJa3TnKdChGvGzUNEYlNuDtR+iqpuFkwJMgZdaJarYfGFCg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "typescript": "^5.7.3"
+      },
+      "engines": {
+        "node": ">=14.17"
+      },
+      "peerDependencies": {
+        "postcss": "^8.5.1"
+      }
+    },
     "node_modules/postcss-svgo": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-7.0.1.tgz",
@@ -20877,6 +20916,130 @@
         "stylelint": "^16.13.0"
       }
     },
+    "node_modules/stylelint-config-recommended-scss": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz",
+      "integrity": "sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "postcss-scss": "^4.0.9",
+        "stylelint-config-recommended": "^14.0.1",
+        "stylelint-scss": "^6.4.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3",
+        "stylelint": "^16.6.1"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylelint-config-recommended-scss/node_modules/stylelint-config-recommended": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz",
+      "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.1.0"
+      }
+    },
+    "node_modules/stylelint-config-standard": {
+      "version": "36.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz",
+      "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "stylelint-config-recommended": "^14.0.1"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.1.0"
+      }
+    },
+    "node_modules/stylelint-config-standard-scss": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-14.0.0.tgz",
+      "integrity": "sha512-6Pa26D9mHyi4LauJ83ls3ELqCglU6VfCXchovbEqQUiEkezvKdv6VgsIoMy58i00c854wVmOw0k8W5FTpuaVqg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "stylelint-config-recommended-scss": "^14.1.0",
+        "stylelint-config-standard": "^36.0.1"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3",
+        "stylelint": "^16.11.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylelint-config-standard/node_modules/stylelint-config-recommended": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz",
+      "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.1.0"
+      }
+    },
     "node_modules/stylelint-order": {
       "version": "6.0.4",
       "dev": true,
@@ -23131,7 +23294,7 @@
     },
     "packages/core": {
       "name": "@juntossomosmais/atomium",
-      "version": "3.8.0"
+      "version": "3.9.0"
     },
     "packages/icons": {
       "name": "@juntossomosmais/atomium-icons"
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index bffc0d2326..86786d77d9 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -356,6 +356,7 @@ export namespace Components {
          * @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
          */
         "has-navigation"?: boolean;
+        "step": number;
     }
     interface AtomListSliderItem {
     }
@@ -1443,6 +1444,7 @@ declare namespace LocalJSX {
         "has-navigation"?: boolean;
         "onClickNext"?: (event: AtomListSliderCustomEvent<any>) => void;
         "onClickPrev"?: (event: AtomListSliderCustomEvent<any>) => void;
+        "step"?: number;
     }
     interface AtomListSliderItem {
     }
diff --git a/packages/core/src/components/list-slider/list-slider.spec.ts b/packages/core/src/components/list-slider/list-slider.spec.ts
index cd896fb203..6cafff7697 100644
--- a/packages/core/src/components/list-slider/list-slider.spec.ts
+++ b/packages/core/src/components/list-slider/list-slider.spec.ts
@@ -304,4 +304,79 @@ describe('AtomListSlider', () => {
     expect(instance.touchEndX).toBe(150)
     expect(instance.currentIndex).toBe(0)
   })
+
+  it('should navigate by step value when clicking on navigation buttons', async () => {
+    const page = await newSpecPage({
+      components: [AtomListSlider, AtomListSliderItem],
+      html: `
+        <atom-list-slider step="2">
+          <atom-list-slider-item>Slide 1</atom-list-slider-item>
+          <atom-list-slider-item>Slide 2</atom-list-slider-item>
+          <atom-list-slider-item>Slide 3</atom-list-slider-item>
+          <atom-list-slider-item>Slide 4</atom-list-slider-item>
+          <atom-list-slider-item>Slide 5</atom-list-slider-item>
+        </atom-list-slider>
+      `,
+    })
+
+    await page.waitForChanges()
+
+    const nextButton = page.root?.shadowRoot?.querySelector(
+      '.navigation--next'
+    ) as HTMLElement
+
+    nextButton?.click()
+    await page.waitForChanges()
+
+    expect(page.rootInstance.currentIndex).toBe(2)
+
+    nextButton?.click()
+    await page.waitForChanges()
+
+    expect(page.rootInstance.currentIndex).toBe(4)
+  })
+
+  it('should navigate by step value when swiping', async () => {
+    const page = await newSpecPage({
+      components: [AtomListSlider, AtomListSliderItem],
+      html: `
+        <atom-list-slider step="3">
+          <atom-list-slider-item>Slide 1</atom-list-slider-item>
+          <atom-list-slider-item>Slide 2</atom-list-slider-item>
+          <atom-list-slider-item>Slide 3</atom-list-slider-item>
+          <atom-list-slider-item>Slide 4</atom-list-slider-item>
+          <atom-list-slider-item>Slide 5</atom-list-slider-item>
+          <atom-list-slider-item>Slide 6</atom-list-slider-item>
+        </atom-list-slider>
+      `,
+    })
+
+    await page.waitForChanges()
+    const instance = page.rootInstance
+    const wrapper = page?.root?.shadowRoot?.querySelector(
+      '.wrapper'
+    ) as HTMLElement
+
+    instance.sliderItems = page.root?.querySelectorAll('atom-list-slider-item')
+    instance.currentIndex = 0
+
+    const touchStartEvent = new MockTouchEvent('touchstart', {
+      touches: [{ clientX: 100 }] as unknown as Touch[],
+    })
+
+    wrapper.dispatchEvent(touchStartEvent)
+
+    const touchMoveEvent = new MockTouchEvent('touchmove', {})
+
+    wrapper.dispatchEvent(touchMoveEvent)
+
+    const touchEndEventLeft = new MockTouchEvent('touchend', {
+      changedTouches: [{ clientX: 50 }] as unknown as Touch[],
+    })
+
+    wrapper.dispatchEvent(touchEndEventLeft)
+    await page.waitForChanges()
+
+    expect(instance.currentIndex).toBe(3)
+  })
 })
diff --git a/packages/core/src/components/list-slider/list-slider.tsx b/packages/core/src/components/list-slider/list-slider.tsx
index 62e650c054..ab4e694264 100644
--- a/packages/core/src/components/list-slider/list-slider.tsx
+++ b/packages/core/src/components/list-slider/list-slider.tsx
@@ -19,6 +19,7 @@ import { debounce } from '../../utils/debounce'
 export class AtomListSlider {
   @Prop({ mutable: true }) hasNavigation = true
   @Prop({ mutable: true }) centralized: boolean
+  @Prop({ mutable: true }) step: number = 1
 
   @State() currentIdx: number = 0
   @State() currentCentralized = false
@@ -139,7 +140,9 @@ export class AtomListSlider {
       this.clickPrev.emit()
     }
 
-    const newIndex = this.currentIndex + (isNext ? 1 : -1)
+    const stepValue = Number(this.step) || 1
+
+    const newIndex = this.currentIndex + (isNext ? stepValue : -stepValue)
 
     const isLastItemAndNext = isNext && newIndex >= this.sliderItems.length
     const isFirstItemAndPrev = !isNext && newIndex < 0
@@ -234,10 +237,11 @@ export class AtomListSlider {
 
     const lastIndex = this.sliderItems.length - 1
     const isSwipeLeft = this.touchEndX < this.touchStartX
+    const stepValue = Number(this.step) || 1
 
     this.currentIndex = isSwipeLeft
-      ? Math.min(this.currentIndex + 1, lastIndex)
-      : Math.max(this.currentIndex - 1, 0)
+      ? Math.min(this.currentIndex + stepValue, lastIndex)
+      : Math.max(this.currentIndex - stepValue, 0)
   }
 
   render() {
diff --git a/packages/core/src/components/list-slider/stories/list-slider.args.ts b/packages/core/src/components/list-slider/stories/list-slider.args.ts
index e6f5b52d7d..2643649081 100644
--- a/packages/core/src/components/list-slider/stories/list-slider.args.ts
+++ b/packages/core/src/components/list-slider/stories/list-slider.args.ts
@@ -30,6 +30,14 @@ export const ListSliderStoryArgs = {
         category: Category.PROPERTIES,
       },
     },
+    step: {
+      description: 'Number of items to advance or go back when navigating.',
+      defaultValue: { summary: 1 },
+      control: { type: 'number' },
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
     '--slider-height': {
       description: 'The min-height of the slider.',
       defaultValue: { summary: '42px' },
@@ -77,4 +85,6 @@ export const ListSliderStoryArgs = {
   },
 }
 
-export const ListSliderComponentArgs = {}
+export const ListSliderComponentArgs = {
+  step: 1,
+}
diff --git a/packages/core/src/components/list-slider/stories/list-slider.core.stories.tsx b/packages/core/src/components/list-slider/stories/list-slider.core.stories.tsx
index b41cc40418..36a4a3df39 100644
--- a/packages/core/src/components/list-slider/stories/list-slider.core.stories.tsx
+++ b/packages/core/src/components/list-slider/stories/list-slider.core.stories.tsx
@@ -10,9 +10,9 @@ export default {
   ...ListSliderStoryArgs,
 } as Meta
 
-const createListSlider = () => {
+const createListSlider = (args) => {
   return html`
-    <atom-list-slider>
+    <atom-list-slider step="${args.step}">
       <atom-list-slider-item class="slide">
         <div>Example 1</div>
       </atom-list-slider-item>
@@ -28,12 +28,27 @@ const createListSlider = () => {
       <atom-list-slider-item class="slide">
         <div>Example 5</div>
       </atom-list-slider-item>
+      <atom-list-slider-item class="slide">
+        <div>Example 6</div>
+      </atom-list-slider-item>
+      <atom-list-slider-item class="slide">
+        <div>Example 7</div>
+      </atom-list-slider-item>
+      <atom-list-slider-item class="slide">
+        <div>Example 8</div>
+      </atom-list-slider-item>
+      <atom-list-slider-item class="slide">
+        <div>Example 9</div>
+      </atom-list-slider-item>
+      <atom-list-slider-item class="slide">
+        <div>Example 10</div>
+      </atom-list-slider-item>
     </atom-list-slider>
   `
 }
 
 export const Default: StoryObj = {
-  render: () => createListSlider(),
+  render: (args) => createListSlider(args),
 }
 
 export const Centralized: StoryObj = {


Reviews:
user: login: copilot-pull-request-reviewer[bot]
body: 

Copilot reviewed 1 out of 1 changed files in this pull request and generated no comments.




state: COMMENTED
author_association: NONE
submitted_at: 2025-04-22T22:20:19Z
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR introduces a new "step" property to the AtomListSlider component that defines the number of items advanced or retracted during navigation. Key changes include:
- Adding a new "step" Prop in the AtomListSlider component.
- Updating the slider navigation logic (both via button clicks and swipe gestures) to support custom step values.
- Adjusting story configuration and args to include the new "step" property.

### Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

| File | Description |
| ---- | ----------- |
| packages/core/src/components/list-slider/stories/list-slider.core.stories.tsx | Updated the createListSlider function and story render method to accept and pass the "step" argument. |
| packages/core/src/components/list-slider/stories/list-slider.args.ts | Added the "step" property to the story args and component args with a default value. |
| packages/core/src/components/list-slider/list-slider.tsx | Added the "step" Prop and updated navigation logic in both click and swipe interactions. |




state: COMMENTED
author_association: NONE
submitted_at: 2025-04-22T22:32:18Z
user: login: anabrook
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T23:02:00Z
user: login: copilot-pull-request-reviewer[bot]
body: ## Pull Request Overview

This PR adds a new “step” property to the AtomListSlider component, enabling users to configure how many items the slider advances or retreats when navigating.  
- Updated the AtomListSlider component to include a new “step” property and use it in navigation logic.  
- Adjusted Storybook stories and arguments to demonstrate and support the new “step” functionality.

### Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

| File | Description |
| ---- | ----------- |
| packages/core/src/components/list-slider/list-slider.core.stories.tsx | Updated the createListSlider function to accept args and pass the “step” prop; several new slider items added for demonstration. |
| packages/core/src/components/list-slider/stories/list-slider.args.ts | Added the “step” property in story arguments and set its default value. |
| packages/core/src/components/list-slider/list-slider.tsx | Added the “step” prop and updated the navigation logic to utilize this property. |


<details>
<summary>Comments suppressed due to low confidence (1)</summary>

**packages/core/src/components/list-slider/list-slider.tsx:240**
* The navigation logic incorrectly uses 'this.currentIndex' while the state property is defined as 'currentIdx'. Replace 'this.currentIndex' with 'this.currentIdx' to ensure the property is correctly updated.
```
this.currentIndex = isSwipeLeft ? Math.min(this.currentIndex + stepValue, lastIndex) : Math.max(this.currentIndex - stepValue, 0)
```
</details>


state: COMMENTED
author_association: NONE
submitted_at: 2025-04-22T23:02:46Z
user: login: brunosf
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T14:37:08Z
user: login: felipefialho
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T16:59:37Z
user: login: matheus-rosa-jsm
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-23T18:11:23Z
user: login: anabrook
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-24T13:08:51Z
user: login: felipefialho
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-24T13:11:13Z
user: login: tassioFront
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-24T13:40:24Z

Review comments:
diff_hunk: @@ -236,8 +239,8 @@ export class AtomListSlider {
     const isSwipeLeft = this.touchEndX < this.touchStartX
 
     this.currentIndex = isSwipeLeft
-      ? Math.min(this.currentIndex + 1, lastIndex)
-      : Math.max(this.currentIndex - 1, 0)
+      ? Math.min(this.currentIndex + this.step, lastIndex)
+      : Math.max(this.currentIndex - this.step, 0)
path: packages/core/src/components/list-slider/list-slider.tsx
user: login: Copilot
body: In the swipe gesture navigation block, the code uses 'this.step' directly while the click navigation uses a parsed numeric value from 'this.step'. For consistency and to avoid potential issues with non-numeric values, consider using the 'stepValue' variable after conversion.
created_at: 2025-04-22T22:32:18Z
author_association: NONE
diff_hunk: @@ -236,8 +239,8 @@ export class AtomListSlider {
     const isSwipeLeft = this.touchEndX < this.touchStartX
 
     this.currentIndex = isSwipeLeft
-      ? Math.min(this.currentIndex + 1, lastIndex)
-      : Math.max(this.currentIndex - 1, 0)
+      ? Math.min(this.currentIndex + this.step, lastIndex)
+      : Math.max(this.currentIndex - this.step, 0)
path: packages/core/src/components/list-slider/list-slider.tsx
user: login: anabrook
body: done [904e8b0](https://github.com/juntossomosmais/atomium/pull/748/commits/904e8b04d433397e35cc90645db845c48a39dc04)
created_at: 2025-04-22T23:02:00Z
author_association: CONTRIBUTOR
diff_hunk: @@ -139,7 +140,9 @@ export class AtomListSlider {
       this.clickPrev.emit()
     }
 
-    const newIndex = this.currentIndex + (isNext ? 1 : -1)
+    const stepValue = Number(this.step) || 1
+
+    const newIndex = this.currentIndex + (isNext ? stepValue : -stepValue)
path: packages/core/src/components/list-slider/list-slider.tsx
user: login: Copilot
body: The code references 'this.currentIndex', but the component defines the state property as 'currentIdx'. Please update the reference to 'this.currentIdx' for consistency.
created_at: 2025-04-22T23:02:46Z
author_association: NONE
diff_hunk: @@ -139,7 +140,9 @@ export class AtomListSlider {
       this.clickPrev.emit()
     }
 
-    const newIndex = this.currentIndex + (isNext ? 1 : -1)
+    const stepValue = Number(this.step) || 1
+
+    const newIndex = this.currentIndex + (isNext ? stepValue : -stepValue)
path: packages/core/src/components/list-slider/list-slider.tsx
user: login: felipefialho
body: @anabrook 
created_at: 2025-04-23T16:59:37Z
author_association: CONTRIBUTOR
diff_hunk: @@ -139,7 +140,9 @@ export class AtomListSlider {
       this.clickPrev.emit()
     }
 
-    const newIndex = this.currentIndex + (isNext ? 1 : -1)
+    const stepValue = Number(this.step) || 1
+
+    const newIndex = this.currentIndex + (isNext ? stepValue : -stepValue)
path: packages/core/src/components/list-slider/list-slider.tsx
user: login: anabrook
body: The value this.currentIndex is not equal to this.currrentIdx. The this.currentIndex has a custom function built in on it’s set() method that control more than just setting the this.currentIdx to the same value.
@felipefialho 
created_at: 2025-04-24T13:08:51Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-04-22T22:23:21Z
body: [PR Preview Action](https://github.com/rossjrw/pr-preview-action) v1.6.1
:---:
Preview removed because the pull request was closed.
2025-04-24 13:58 UTC
<!-- Sticky Pull Request Commentpr-preview -->
author_association: CONTRIBUTOR
user: login: sonarqubecloud[bot]
created_at: 2025-04-24T13:36:35Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=juntossomosmais_atomium_core&pullRequest=748) **Quality Gate passed for 'juntossomosmais_atomium_core'**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=juntossomosmais_atomium_core&pullRequest=748&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=juntossomosmais_atomium_core&pullRequest=748&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=juntossomosmais_atomium_core&pullRequest=748&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [80.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=juntossomosmais_atomium_core&pullRequest=748&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=juntossomosmais_atomium_core&pullRequest=748&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=juntossomosmais_atomium_core&pullRequest=748)


author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-04-24T13:37:05Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=juntossomosmais_atomium_token&pullRequest=748) **Quality Gate passed for 'juntossomosmais_atomium_token'**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=juntossomosmais_atomium_token&pullRequest=748&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=juntossomosmais_atomium_token&pullRequest=748&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=juntossomosmais_atomium_token&pullRequest=748&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=juntossomosmais_atomium_token&pullRequest=748&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=juntossomosmais_atomium_token&pullRequest=748&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=juntossomosmais_atomium_token&pullRequest=748)


author_association: NONE