unovue
diff --git a/‎docs/content/docs/components/slider.md
Copy file name to clipboard
+15-8Lines changed: 15 additions & 8 deletions b/‎docs/content/docs/components/slider.md
Copy file name to clipboard
+15-8Lines changed: 15 additions & 8 deletions
diff --git a/‎packages/core/src/Slider/Slider.test.ts
Copy file name to clipboard
+252Lines changed: 252 additions & 0 deletions b/‎packages/core/src/Slider/Slider.test.ts
Copy file name to clipboard
+252Lines changed: 252 additions & 0 deletions
diff --git a/‎packages/core/src/Slider/SliderHorizontal.vue
Copy file name to clipboard
+9-5Lines changed: 9 additions & 5 deletions b/‎packages/core/src/Slider/SliderHorizontal.vue
Copy file name to clipboard
+9-5Lines changed: 9 additions & 5 deletions
diff --git a/‎packages/core/src/Slider/SliderRange.vue
Copy file name to clipboard
+2-2Lines changed: 2 additions & 2 deletions b/‎packages/core/src/Slider/SliderRange.vue
Copy file name to clipboard
+2-2Lines changed: 2 additions & 2 deletions
diff --git a/‎packages/core/src/Slider/SliderThumbImpl.vue
Copy file name to clipboard
+2-2Lines changed: 2 additions & 2 deletions b/‎packages/core/src/Slider/SliderThumbImpl.vue
Copy file name to clipboard
+2-2Lines changed: 2 additions & 2 deletions
@@ -273,35 +273,35 @@ Adheres to the [Slider WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/
   :data="[
     {
       keys: ['ArrowRight'],
-      description: '<span> Increments/decrements by the <Code>step</Code> value depending on <Code>orientation</Code>. </span>',
+      description: 'Increases the value by the <Code>step</Code> amount.',
     },
     {
       keys: ['ArrowLeft'],
-      description: '<span> Increments/decrements by the <Code>step</Code> value depending on <Code>orientation</Code>. </span>',
+      description: 'Decreases the value by the <Code>step</Code> amount.',
     },
     {
       keys: ['ArrowUp'],
-      description: '<span> Increases the value by the <Code>step</Code> amount. </span>',
+      description: 'Increases the value by the <Code>step</Code> amount.',
     },
     {
       keys: ['ArrowDown'],
-      description: '<span> Decreases the value by the <Code>step</Code> amount. </span>',
+      description: 'Decreases the value by the <Code>step</Code> amount.',
     },
     {
       keys: ['PageUp'],
-      description: '<span> Increases the value by a larger <Code>step</Code>. </span>',
+      description: 'Increases the value by a larger <Code>step</Code>.',
     },
     {
       keys: ['PageDown'],
-      description: '<span> Decreases the value by a larger <Code>step</Code>. </span>',
+      description: 'Decreases the value by a larger <Code>step</Code>.',
     },
     {
       keys: ['Shift + ArrowUp'],
-      description: '<span> Increases the value by a larger <Code>step</Code>. </span>',
+      description: 'Increases the value by a larger <Code>step</Code>.',
     },
     {
       keys: ['Shift + ArrowDown'],
-      description: '<span> Decreases the value by a larger <Code>step</Code>. </span>',
+      description: 'Decreases the value by a larger <Code>step</Code>.',
     },
     {
       keys: ['Home'],
@@ -314,6 +314,13 @@ Adheres to the [Slider WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/
   ]"
 />
 
+#### Inverted sliders
+
+When the slider is <Code>inverted</Code>, some controls are inverted as well, depending on the <Code>orientation</Code>.
+
+- When the slider is <Code>horizontal</Code> (the default), <kbd>ArrowRight</kbd>, <kbd>ArrowLeft</kbd>, <kbd>Home</kbd>, and <kbd>End</kbd> are inverted.
+- When the slider is <Code>vertical</Code>, <kbd>ArrowUp</kbd>, <kbd>ArrowDown</kbd>, <kbd>PageUp</kbd>, <kbd>PageDown</kbd>, <kbd>Shift + ArrowUp</kbd>, and <kbd>Shift + ArrowDown</kbd> are inverted.
+
 ## Custom APIs
 
 Create your own API by abstracting the primitive parts into your own component.
 
@@ -52,6 +52,240 @@ describe('given default Slider', () => {
     })
   })
 
+  describe('when inverted', () => {
+    beforeEach(async () => {
+      await wrapper.setProps({ inverted: true })
+    })
+
+    describe('after pressing navigation key', () => {
+      let slider: DOMWrapper<HTMLElement>
+
+      beforeEach(() => {
+        slider = wrapper.find('[role="slider"]')
+      })
+
+      it('arrowRight should decrease by 1', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'ArrowRight' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('49')
+        expect(diff).toBe(-1)
+      })
+
+      it('arrowLeft should increase by 1', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'ArrowLeft' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('51')
+        expect(diff).toBe(1)
+      })
+
+      it('arrowUp should increase by 1', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'ArrowUp' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('51')
+        expect(diff).toBe(1)
+      })
+
+      it('arrowDown should decrease by 1', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'ArrowDown' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('49')
+        expect(diff).toBe(-1)
+      })
+
+      it('pageUp should increase by 10', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'PageUp' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('60')
+        expect(diff).toBe(10)
+      })
+
+      it('pageDown should decrease by 10', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'PageDown' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('40')
+        expect(diff).toBe(-10)
+      })
+
+      it('home should set value to 0', async () => {
+        await slider.trigger('keydown', { key: 'Home' })
+        expect(slider.attributes('aria-valuenow')).toBe('0')
+      })
+
+      it('end should set value to max', async () => {
+        await slider.trigger('keydown', { key: 'End' })
+        expect(slider.attributes('aria-valuenow')).toBe('100')
+      })
+    })
+  })
+
+  describe('when vertical', () => {
+    beforeEach(async () => {
+      await wrapper.setProps({ orientation: 'vertical' })
+    })
+
+    describe('when inverted', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({ inverted: true })
+      })
+
+      describe('after pressing navigation key', () => {
+        let slider: DOMWrapper<HTMLElement>
+
+        beforeEach(() => {
+          slider = wrapper.find('[role="slider"]')
+        })
+
+        it('arrowRight should increase by 1', async () => {
+          const currentValue = slider.attributes('aria-valuenow')
+          await slider.trigger('keydown', { key: 'ArrowRight' })
+          const newValue = slider.attributes('aria-valuenow')
+          const diff = Number(newValue) - Number(currentValue)
+          expect(slider.attributes('aria-valuenow')).toBe('51')
+          expect(diff).toBe(1)
+        })
+
+        it('arrowLeft should decrease by 1', async () => {
+          const currentValue = slider.attributes('aria-valuenow')
+          await slider.trigger('keydown', { key: 'ArrowLeft' })
+          const newValue = slider.attributes('aria-valuenow')
+          const diff = Number(newValue) - Number(currentValue)
+          expect(slider.attributes('aria-valuenow')).toBe('49')
+          expect(diff).toBe(-1)
+        })
+
+        it('arrowUp should decrease by 1', async () => {
+          const currentValue = slider.attributes('aria-valuenow')
+          await slider.trigger('keydown', { key: 'ArrowUp' })
+          const newValue = slider.attributes('aria-valuenow')
+          const diff = Number(newValue) - Number(currentValue)
+          expect(slider.attributes('aria-valuenow')).toBe('49')
+          expect(diff).toBe(-1)
+        })
+
+        it('arrowDown should increase by 1', async () => {
+          const currentValue = slider.attributes('aria-valuenow')
+          await slider.trigger('keydown', { key: 'ArrowDown' })
+          const newValue = slider.attributes('aria-valuenow')
+          const diff = Number(newValue) - Number(currentValue)
+          expect(slider.attributes('aria-valuenow')).toBe('51')
+          expect(diff).toBe(1)
+        })
+
+        it('pageUp should decrease by 10', async () => {
+          const currentValue = slider.attributes('aria-valuenow')
+          await slider.trigger('keydown', { key: 'PageUp' })
+          const newValue = slider.attributes('aria-valuenow')
+          const diff = Number(newValue) - Number(currentValue)
+          expect(slider.attributes('aria-valuenow')).toBe('40')
+          expect(diff).toBe(-10)
+        })
+
+        it('pageDown should increase by 10', async () => {
+          const currentValue = slider.attributes('aria-valuenow')
+          await slider.trigger('keydown', { key: 'PageDown' })
+          const newValue = slider.attributes('aria-valuenow')
+          const diff = Number(newValue) - Number(currentValue)
+          expect(slider.attributes('aria-valuenow')).toBe('60')
+          expect(diff).toBe(10)
+        })
+
+        it('home should set value to 100', async () => {
+          await slider.trigger('keydown', { key: 'Home' })
+          expect(slider.attributes('aria-valuenow')).toBe('0')
+        })
+
+        it('end should set value to 0', async () => {
+          await slider.trigger('keydown', { key: 'End' })
+          expect(slider.attributes('aria-valuenow')).toBe('100')
+        })
+      })
+    })
+
+    describe('after pressing navigation key', () => {
+      let slider: DOMWrapper<HTMLElement>
+
+      beforeEach(() => {
+        slider = wrapper.find('[role="slider"]')
+      })
+
+      it('arrowRight should increase by 1', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'ArrowRight' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('51')
+        expect(diff).toBe(1)
+      })
+
+      it('arrowLeft should decrease by 1', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'ArrowLeft' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('49')
+        expect(diff).toBe(-1)
+      })
+
+      it('arrowUp should increase by 1', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'ArrowUp' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('51')
+        expect(diff).toBe(1)
+      })
+
+      it('arrowDown should decrease by 1', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'ArrowDown' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('49')
+        expect(diff).toBe(-1)
+      })
+
+      it('pageUp should increase by 10', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'PageUp' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('60')
+        expect(diff).toBe(10)
+      })
+
+      it('pageDown should decrease by 10', async () => {
+        const currentValue = slider.attributes('aria-valuenow')
+        await slider.trigger('keydown', { key: 'PageDown' })
+        const newValue = slider.attributes('aria-valuenow')
+        const diff = Number(newValue) - Number(currentValue)
+        expect(slider.attributes('aria-valuenow')).toBe('40')
+        expect(diff).toBe(-10)
+      })
+
+      it('home should set value to 0', async () => {
+        await slider.trigger('keydown', { key: 'Home' })
+        expect(slider.attributes('aria-valuenow')).toBe('0')
+      })
+
+      it('end should set value to max', async () => {
+        await slider.trigger('keydown', { key: 'End' })
+        expect(slider.attributes('aria-valuenow')).toBe('100')
+      })
+    })
+  })
+
   describe('after pointerdown event on slider-impl', () => {
     let sliderImpl: VueWrapper<InstanceType<typeof SliderImpl>>
     beforeEach(async () => {
@@ -114,6 +348,24 @@ describe('given default Slider', () => {
       expect(diff).toBe(-1)
     })
 
+    it('arrowUp should increase by 1', async () => {
+      const currentValue = slider.attributes('aria-valuenow')
+      await slider.trigger('keydown', { key: 'ArrowUp' })
+      const newValue = slider.attributes('aria-valuenow')
+      const diff = Number(newValue) - Number(currentValue)
+      expect(slider.attributes('aria-valuenow')).toBe('51')
+      expect(diff).toBe(1)
+    })
+
+    it('arrowDown should decrease by 1', async () => {
+      const currentValue = slider.attributes('aria-valuenow')
+      await slider.trigger('keydown', { key: 'ArrowDown' })
+      const newValue = slider.attributes('aria-valuenow')
+      const diff = Number(newValue) - Number(currentValue)
+      expect(slider.attributes('aria-valuenow')).toBe('49')
+      expect(diff).toBe(-1)
+    })
+
     it('pageUp should increase by 10', async () => {
       const currentValue = slider.attributes('aria-valuenow')
       await slider.trigger('keydown', { key: 'PageUp' })
 
@@ -18,8 +18,8 @@ const { forwardRef, currentElement: sliderElement } = useForwardExpose()
 const rootContext = injectSliderRootContext()
 
 const offsetPosition = ref<number>()
-const rectRef = ref<ClientRect>()
-const isSlidingFromLeft = computed(() => (dir?.value === 'ltr' && !inverted.value) || (dir?.value !== 'ltr' && inverted.value))
+const rectRef = ref<DOMRect>()
+const isSlidingFromLeft = computed(() => (dir?.value !== 'rtl' && !inverted.value) || (dir?.value !== 'ltr' && inverted.value))
 
 function getValueFromPointerEvent(event: PointerEvent, slideStart?: boolean) {
   const rect = rectRef.value || sliderElement.value!.getBoundingClientRect()
@@ -46,10 +46,14 @@ function getValueFromPointerEvent(event: PointerEvent, slideStart?: boolean) {
   return value(position)
 }
 
+const startEdge = computed(() => isSlidingFromLeft.value ? 'left' : 'right')
+const endEdge = computed(() => isSlidingFromLeft.value ? 'right' : 'left')
+const direction = computed(() => isSlidingFromLeft.value ? 1 : -1)
+
 provideSliderOrientationContext({
-  startEdge: isSlidingFromLeft.value ? 'left' : 'right',
-  endEdge: isSlidingFromLeft.value ? 'right' : 'left',
-  direction: isSlidingFromLeft.value ? 1 : -1,
+  startEdge,
+  endEdge,
+  direction,
   size: 'width',
 })
 </script>
 
@@ -31,8 +31,8 @@ const offsetEnd = computed(() => 100 - Math.max(...percentages.value, 0))
     :as-child="asChild"
     :as="as"
     :style="{
-      [orientation!.startEdge]: `${offsetStart}%`,
-      [orientation!.endEdge]: `${offsetEnd}%`,
+      [orientation!.startEdge.value]: `${offsetStart}%`,
+      [orientation!.endEdge.value]: `${offsetEnd}%`,
     }"
   >
     <slot />
 
@@ -37,7 +37,7 @@ const thumbInBoundsOffset = computed(() => {
     return 0
   }
   else {
-    return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation!.direction)
+    return getThumbInBoundsOffset(orientationSize.value, percent.value, orientation!.direction.value)
   }
 })
 
@@ -70,7 +70,7 @@ onUnmounted(() => {
       :style="{
         transform: 'var(--reka-slider-thumb-transform)',
         position: 'absolute',
-        [orientation!.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`,
+        [orientation!.startEdge.value]: `calc(${percent}% + ${thumbInBoundsOffset}px)`,
         /**
          * There will be no value on initial render while we work out the index so we hide thumbs
          * without a value, otherwise SSR will render them in the wrong position before they