feat(components): [color-picker-panel] hue-slider a11y (#22258)

* feat(components): [color-picker] hue-slider a11y

* chore: sync locale

* chore: lint

* chore: rename

* chore: rename

packages/components/color-picker-panel/src/__tests__/color-picker-panel.test.tsx

@@ -493,6 +493,7 @@ describe('Color-picker-panel', () => {
     ).toBe('rgb(0, 255, 0)')
     wrapper.unmount()
   })
+
   it('should update the selected color when the showAlpha prop changes', async () => {
     const color = ref('#00ff00aa')
     const showAlpha = ref(true)
@@ -539,4 +540,28 @@ describe('Color-picker-panel', () => {
     expect(input.element.value).toBe('')
     wrapper.unmount()
   })
+
+  it('control hue changes through keyboard', async () => {
+    const color = ref('#409eff')
+    const wrapper = mount(() => <ColorPickerPanel v-model={color.value} />)
+
+    const alphaSlider = wrapper.findComponent('.el-color-hue-slider')
+    await alphaSlider.find('.el-color-hue-slider__thumb').trigger('keydown', {
+      key: EVENT_CODE.down,
+      code: EVENT_CODE.down,
+    })
+    await alphaSlider.find('.el-color-hue-slider__thumb').trigger('keydown', {
+      key: EVENT_CODE.left,
+      code: EVENT_CODE.left,
+    })
+    const input = wrapper.find<HTMLInputElement>('input').element
+    expect(input!.value).toEqual('#4099ff')
+
+    await alphaSlider.find('.el-color-hue-slider__thumb').trigger('keydown', {
+      key: EVENT_CODE.up,
+      code: EVENT_CODE.up,
+    })
+    expect(input!.value).toEqual('#409cff')
+    wrapper.unmount()
+  })
 })

packages/components/color-picker-panel/src/components/alpha-slider.vue

@@ -5,11 +5,12 @@
       ref="thumb"
       :class="thumbKls"
       :style="thumbStyle"
-      :aria-label="alphaLabel"
-      :aria-valuenow="alpha"
+      :aria-label="ariaLabel"
+      :aria-valuenow="currentValue"
+      :aria-valuetext="ariaValuetext"
       :aria-orientation="vertical ? 'vertical' : 'horizontal'"
-      aria-valuemin="0"
-      aria-valuemax="100"
+      :aria-valuemin="minValue"
+      :aria-valuemax="maxValue"
       role="slider"
       tabindex="0"
       @keydown="handleKeydown"
@@ -18,35 +19,51 @@
 </template>
 
 <script lang="ts" setup>
-import { alphaSliderProps } from '../props/alpha-slider'
-import {
-  useAlphaSlider,
-  useAlphaSliderDOM,
-} from '../composables/use-alpha-slider'
+import { computed } from 'vue'
+import { useLocale } from '@element-plus/hooks'
+import { alphaSliderProps } from '../props/slider'
+import { useSlider, useSliderDOM } from '../composables/use-slider'
 
 defineOptions({
   name: 'ElColorAlphaSlider',
 })
 
 const props = defineProps(alphaSliderProps)
+const minValue = 0
+const maxValue = 100
 
-const {
-  alpha,
-  alphaLabel,
-  bar,
-  thumb,
-  handleDrag,
-  handleClick,
-  handleKeydown,
-} = useAlphaSlider(props)
+const { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } =
+  useSlider(props, { key: 'alpha', minValue, maxValue })
 
 const { rootKls, barKls, barStyle, thumbKls, thumbStyle, update } =
-  useAlphaSliderDOM(props, {
+  useSliderDOM(props, {
+    namespace: 'color-alpha-slider',
+    maxValue,
+    currentValue,
     bar,
     thumb,
     handleDrag,
+    getBackground,
   })
 
+const { t } = useLocale()
+
+const ariaLabel = computed(() => t('el.colorpicker.alphaLabel'))
+const ariaValuetext = computed(() => {
+  return t('el.colorpicker.alphaDescription', {
+    alpha: currentValue.value,
+    color: props.color.value,
+  })
+})
+
+function getBackground() {
+  if (props.color && props.color.value) {
+    const { r, g, b } = props.color.toRgb()
+    return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`
+  }
+  return ''
+}
+
 defineExpose({
   /**
    * @description update alpha slider manually

packages/components/color-picker-panel/src/components/hue-slider.vue

@@ -1,169 +1,76 @@
 <template>
-  <div :class="[ns.b(), ns.is('vertical', vertical)]">
-    <div ref="bar" :class="ns.e('bar')" @click="handleClick" />
+  <div :class="rootKls">
+    <div ref="bar" :class="barKls" @click="handleClick" />
     <div
       ref="thumb"
-      :class="ns.e('thumb')"
-      :style="{
-        left: thumbLeft + 'px',
-        top: thumbTop + 'px',
-      }"
+      :class="thumbKls"
+      :style="thumbStyle"
+      :aria-label="ariaLabel"
+      :aria-valuenow="currentValue"
+      :aria-valuetext="ariaValuetext"
+      :aria-orientation="vertical ? 'vertical' : 'horizontal'"
+      :aria-valuemin="minValue"
+      :aria-valuemax="maxValue"
+      role="slider"
+      tabindex="0"
+      @keydown="handleKeydown"
     />
   </div>
 </template>
 
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  onMounted,
-  ref,
-  watch,
-} from 'vue'
-import { getClientXY } from '@element-plus/utils'
-import { useNamespace } from '@element-plus/hooks'
-import { draggable } from '../utils/draggable'
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useLocale } from '@element-plus/hooks'
+import { hueSliderProps } from '../props/slider'
+import { useSlider, useSliderDOM } from '../composables/use-slider'
 
-import type { PropType } from 'vue'
-import type Color from '../utils/color'
-
-export default defineComponent({
+defineOptions({
   name: 'ElColorHueSlider',
+})
 
-  props: {
-    color: {
-      type: Object as PropType<Color>,
-      required: true,
-    },
+const props = defineProps(hueSliderProps)
+const minValue = 0
+const maxValue = 360
 
-    vertical: Boolean,
-    disabled: Boolean,
-  },
-  setup(props) {
-    const ns = useNamespace('color-hue-slider')
-    const instance = getCurrentInstance()!
+const { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } =
+  useSlider(props, { key: 'hue', minValue, maxValue })
 
-    // ref
-    const thumb = ref<HTMLElement>()
-    const bar = ref<HTMLElement>()
-    // data
-    const thumbLeft = ref(0)
-    const thumbTop = ref(0)
-    // computed
-    const hueValue = computed(() => {
-      return props.color.get('hue')
-    })
-    // watch
-    watch(
-      () => hueValue.value,
-      () => {
-        update()
-      }
-    )
+const { rootKls, barKls, thumbKls, thumbStyle, thumbTop, update } =
+  useSliderDOM(props, {
+    namespace: 'color-hue-slider',
+    maxValue,
+    currentValue,
+    bar,
+    thumb,
+    handleDrag,
+  })
 
-    // methods
-    function handleClick(event: MouseEvent | TouchEvent) {
-      if (props.disabled) return
-      const target = event.target
+const { t } = useLocale()
 
-      if (target !== thumb.value) {
-        handleDrag(event)
-      }
-    }
+const ariaLabel = computed(() => t('el.colorpicker.hueLabel'))
+const ariaValuetext = computed(() => {
+  return t('el.colorpicker.hueDescription', {
+    hue: currentValue.value,
+    color: props.color.value,
+  })
+})
 
-    function handleDrag(event: MouseEvent | TouchEvent) {
-      if (!bar.value || !thumb.value || props.disabled) return
-
-      const el = instance.vnode.el as HTMLElement
-      const rect = el.getBoundingClientRect()
-      const { clientX, clientY } = getClientXY(event)
-      let hue
-
-      if (!props.vertical) {
-        let left = clientX - rect.left
-        left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)
-        left = Math.max(thumb.value.offsetWidth / 2, left)
-
-        hue = Math.round(
-          ((left - thumb.value.offsetWidth / 2) /
-            (rect.width - thumb.value.offsetWidth)) *
-            360
-        )
-      } else {
-        let top = clientY - rect.top
-
-        top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)
-        top = Math.max(thumb.value.offsetHeight / 2, top)
-        hue = Math.round(
-          ((top - thumb.value.offsetHeight / 2) /
-            (rect.height - thumb.value.offsetHeight)) *
-            360
-        )
-      }
-      props.color.set('hue', hue)
-    }
-
-    function getThumbLeft() {
-      if (!thumb.value) return 0
-
-      const el = instance.vnode.el
-
-      if (props.vertical) return 0
-      const hue = props.color.get('hue')
-
-      if (!el) return 0
-      return Math.round(
-        (hue * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 360
-      )
-    }
-
-    function getThumbTop() {
-      if (!thumb.value) return 0
-
-      const el = instance.vnode.el as HTMLElement
-      if (!props.vertical) return 0
-      const hue = props.color.get('hue')
-
-      if (!el) return 0
-      return Math.round(
-        (hue * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 360
-      )
-    }
-
-    function update() {
-      thumbLeft.value = getThumbLeft()
-      thumbTop.value = getThumbTop()
-    }
-
-    // mounded
-    onMounted(() => {
-      if (!bar.value || !thumb.value || props.disabled) return
-
-      const dragConfig = {
-        drag: (event: MouseEvent | TouchEvent) => {
-          handleDrag(event)
-        },
-        end: (event: MouseEvent | TouchEvent) => {
-          handleDrag(event)
-        },
-      }
-
-      draggable(bar.value, dragConfig)
-      draggable(thumb.value, dragConfig)
-      update()
-    })
-
-    return {
-      bar,
-      thumb,
-      thumbLeft,
-      thumbTop,
-      hueValue,
-      handleClick,
-      update,
-      ns,
-    }
-  },
+defineExpose({
+  /**
+   * @description bar element ref
+   */
+  bar,
+  /**
+   * @description thumb element ref
+   */
+  thumb,
+  /**
+   * @description thumb top position, only for vertical slider
+   */
+  thumbTop,
+  /**
+   * @description update hue slider manually
+   */
+  update,
 })
 </script>

packages/components/color-picker-panel/src/composables/use-slider.ts

@@ -7,21 +7,28 @@ import {
   watch,
 } from 'vue'
 import { addUnit, getClientXY, getEventCode } from '@element-plus/utils'
-import { useLocale, useNamespace } from '@element-plus/hooks'
+import { useNamespace } from '@element-plus/hooks'
 import { EVENT_CODE } from '@element-plus/constants'
 import { draggable } from '../utils/draggable'
 
-import type { AlphaSliderProps } from '../props/alpha-slider'
+import type { AlphaSliderProps } from '../props/slider'
 
-export const useAlphaSlider = (props: AlphaSliderProps) => {
+interface UseSliderOptions {
+  key: 'hue' | 'alpha'
+  minValue: number
+  maxValue: number
+}
+
+export const useSlider = (
+  props: AlphaSliderProps,
+  { key, minValue, maxValue }: UseSliderOptions
+) => {
   const instance = getCurrentInstance()!
-  const { t } = useLocale()
 
   const thumb = shallowRef<HTMLElement>()
   const bar = shallowRef<HTMLElement>()
 
-  const alpha = computed(() => props.color.get('alpha'))
-  const alphaLabel = computed(() => t('el.colorpicker.alphaLabel'))
+  const currentValue = computed(() => props.color.get(key))
 
   function handleClick(event: MouseEvent | TouchEvent) {
     if (props.disabled) return
@@ -39,34 +46,30 @@ export const useAlphaSlider = (props: AlphaSliderProps) => {
     const el = instance.vnode.el as HTMLElement
     const rect = el.getBoundingClientRect()
     const { clientX, clientY } = getClientXY(event)
+    let value
 
     if (!props.vertical) {
       let left = clientX - rect.left
       left = Math.max(thumb.value.offsetWidth / 2, left)
       left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)
 
-      props.color.set(
-        'alpha',
-        Math.round(
-          ((left - thumb.value.offsetWidth / 2) /
-            (rect.width - thumb.value.offsetWidth)) *
-            100
-        )
+      value = Math.round(
+        ((left - thumb.value.offsetWidth / 2) /
+          (rect.width - thumb.value.offsetWidth)) *
+          maxValue
       )
     } else {
       let top = clientY - rect.top
       top = Math.max(thumb.value.offsetHeight / 2, top)
       top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)
 
-      props.color.set(
-        'alpha',
-        Math.round(
-          ((top - thumb.value.offsetHeight / 2) /
-            (rect.height - thumb.value.offsetHeight)) *
-            100
-        )
+      value = Math.round(
+        ((top - thumb.value.offsetHeight / 2) /
+          (rect.height - thumb.value.offsetHeight)) *
+          maxValue
       )
     }
+    props.color.set(key, value)
   }
 
   function handleKeydown(event: KeyboardEvent) {
@@ -74,52 +77,80 @@ export const useAlphaSlider = (props: AlphaSliderProps) => {
     const { shiftKey } = event
     const code = getEventCode(event)
     const step = shiftKey ? 10 : 1
+    // NOTE: The hue-slider is opposite in direction to the regular slider, so the hue slider has been reversed here.
+    // But this is not the best way to handle it.
+    const reverse = key === 'hue' ? -1 : 1
+    let isPreventDefault = true
 
     switch (code) {
       case EVENT_CODE.left:
       case EVENT_CODE.down:
-        event.preventDefault()
-        event.stopPropagation()
-        incrementPosition(-step)
+        incrementPosition(-step * reverse)
         break
       case EVENT_CODE.right:
       case EVENT_CODE.up:
-        event.preventDefault()
-        event.stopPropagation()
-        incrementPosition(step)
+        incrementPosition(step * reverse)
+        break
+      case EVENT_CODE.home:
+        props.color.set(key, key === 'hue' ? maxValue : minValue)
+        break
+      case EVENT_CODE.end:
+        props.color.set(key, key === 'hue' ? minValue : maxValue)
+        break
+      case EVENT_CODE.pageDown:
+        incrementPosition(-4 * reverse)
+        break
+      case EVENT_CODE.pageUp:
+        incrementPosition(4 * reverse)
+        break
+      default:
+        isPreventDefault = false
         break
     }
+
+    isPreventDefault && event.preventDefault()
   }
 
   function incrementPosition(step: number) {
-    let next = alpha.value + step
-    next = next < 0 ? 0 : next > 100 ? 100 : next
-    props.color.set('alpha', next)
+    let next = currentValue.value + step
+    next = next < minValue ? minValue : next > maxValue ? maxValue : next
+    props.color.set(key, next)
   }
 
   return {
     thumb,
     bar,
-    alpha,
-    alphaLabel,
+    currentValue,
     handleDrag,
     handleClick,
     handleKeydown,
   }
 }
 
-export const useAlphaSliderDOM = (
+interface UseSliderDOMOptions
+  extends Pick<
+    ReturnType<typeof useSlider>,
+    'bar' | 'thumb' | 'currentValue' | 'handleDrag'
+  > {
+  namespace: string
+  maxValue: number
+  getBackground?: () => string
+}
+
+export const useSliderDOM = (
   props: AlphaSliderProps,
   {
+    namespace,
+    maxValue,
     bar,
     thumb,
+    currentValue,
     handleDrag,
-  }: Pick<ReturnType<typeof useAlphaSlider>, 'bar' | 'thumb' | 'handleDrag'>
+    getBackground,
+  }: UseSliderDOMOptions
 ) => {
   const instance = getCurrentInstance()!
-
-  const ns = useNamespace('color-alpha-slider')
-  // refs
+  const ns = useNamespace(namespace)
 
   const thumbLeft = ref(0)
   const thumbTop = ref(0)
@@ -130,11 +161,11 @@ export const useAlphaSliderDOM = (
 
     if (props.vertical) return 0
     const el = instance.vnode.el
-    const alpha = props.color.get('alpha')
+    const value = currentValue.value
 
     if (!el) return 0
     return Math.round(
-      (alpha * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 100
+      (value * (el.offsetWidth - thumb.value.offsetWidth / 2)) / maxValue
     )
   }
 
@@ -143,26 +174,18 @@ export const useAlphaSliderDOM = (
 
     const el = instance.vnode.el
     if (!props.vertical) return 0
-    const alpha = props.color.get('alpha')
+    const value = currentValue.value
 
     if (!el) return 0
     return Math.round(
-      (alpha * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 100
+      (value * (el.offsetHeight - thumb.value.offsetHeight / 2)) / maxValue
     )
   }
 
-  function getBackground() {
-    if (props.color && props.color.value) {
-      const { r, g, b } = props.color.toRgb()
-      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`
-    }
-    return ''
-  }
-
   function update() {
     thumbLeft.value = getThumbLeft()
     thumbTop.value = getThumbTop()
-    background.value = getBackground()
+    background.value = getBackground?.()
   }
 
   onMounted(() => {
@@ -182,10 +205,8 @@ export const useAlphaSliderDOM = (
     update()
   })
 
-  watch(
-    () => props.color.get('alpha'),
-    () => update()
-  )
+  watch(currentValue, () => update())
+
   watch(
     () => props.color.value,
     () => update()
@@ -204,5 +225,14 @@ export const useAlphaSliderDOM = (
     top: addUnit(thumbTop.value),
   }))
 
-  return { rootKls, barKls, barStyle, thumbKls, thumbStyle, update }
+  return {
+    rootKls,
+    barKls,
+    barStyle,
+    thumbKls,
+    thumbStyle,
+    thumbLeft,
+    thumbTop,
+    update,
+  }
 }

packages/components/color-picker-panel/src/props/slider.ts

@@ -11,8 +11,11 @@ export const alphaSliderProps = buildProps({
   vertical: Boolean,
   disabled: Boolean,
 } as const)
+export const hueSliderProps = alphaSliderProps
 
 export type AlphaSliderProps = ExtractPropTypes<typeof alphaSliderProps>
 export type AlphaSliderPropsPublic = __ExtractPublicPropTypes<
   typeof alphaSliderProps
 >
+export type HueSliderEmits = AlphaSliderProps
+export type HueSliderProps = AlphaSliderPropsPublic

packages/components/color-picker-panel/src/utils/draggable.ts

@@ -30,7 +30,6 @@ export function draggable(element: HTMLElement, options: DraggableOptions) {
 
   const downFn = function (event: MouseEvent | TouchEvent) {
     if (isDragging) return
-    event.preventDefault()
     document.onselectstart = () => false
     document.ondragstart = () => false
     document.addEventListener('mousemove', moveFn)

packages/locale/lang/af.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Nou',

packages/locale/lang/ar-eg.ts

@@ -10,6 +10,9 @@ export default {
       defaultLabel: 'إختر اللون',
       description: 'اللون الحالي هو {color}. اضفط انتر لاختيار لون جديد',
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'الآن',

packages/locale/lang/ar.ts

@@ -10,6 +10,9 @@ export default {
       defaultLabel: 'إختر اللون',
       description: 'اللون الحالي هو {color}. اضفط انتر لاختيار لون جديد',
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'الآن',

packages/locale/lang/az.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'İndi',

packages/locale/lang/bg.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Сега',

packages/locale/lang/bn.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'এখন',

packages/locale/lang/ca.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Ara',

packages/locale/lang/ckb.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'ڕەنگی ئێستا {color}. ئینتەر دابگرە بۆ هەڵبژاردنی ڕەنگی نوێ.',
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'ئێستا',

packages/locale/lang/cs.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Teď',

packages/locale/lang/da.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Nu',

packages/locale/lang/de.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Jetzt',

packages/locale/lang/el.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Τώρα',

packages/locale/lang/en.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.',
       alphaLabel: 'pick alpha value',
+      alphaDescription: 'alpha {alpha}, current color is {color}',
+      hueLabel: 'pick hue value',
+      hueDescription: 'hue {hue}, current color is {color}',
     },
     datepicker: {
       now: 'Now',

packages/locale/lang/eo.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Nun',

packages/locale/lang/es.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Ahora',

packages/locale/lang/et.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Praegu',

packages/locale/lang/eu.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Orain',

packages/locale/lang/fa.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'رنگ فعلی {color} است. برای انتخاب رنگ جدید، اینتر را فشار دهید.',
       alphaLabel: 'مقدار آلفا را انتخاب کنید',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'اکنون',

packages/locale/lang/fi.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Nyt',

packages/locale/lang/fr.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'La couleur actuelle est {color}. Appuyer sur Entrée pour sélectionner une nouvelle couleur.',
       alphaLabel: 'Choisir la valeur alpha',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Maintenant',

packages/locale/lang/he.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'כעת',

packages/locale/lang/hi.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'मौजूदा रंग {color} है. कोई नया रंग चुनने के लिए एंटर दबाएँ.',
       alphaLabel: 'अल्फा मान चुनें',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'अभी',

packages/locale/lang/hr.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Sada',

packages/locale/lang/hu.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Most',

packages/locale/lang/hy-am.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Հիմա',

packages/locale/lang/id.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Sekarang',

packages/locale/lang/it.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Ora',

packages/locale/lang/ja.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: '現在',

packages/locale/lang/kk.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Қазір',

packages/locale/lang/km.ts

@@ -11,6 +11,9 @@ export default {
       description:
         '{color} ជាពណ៌បច្ចុប្បន្ន។ សូមចុច Enter ដើម្បីជ្រើសរើសពណ៌ថ្មី',
       alphaLabel: 'ជ្រើសរើសភាពស្រអាប់',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'ឥឡូវនេះ',

packages/locale/lang/ko.ts

@@ -11,6 +11,9 @@ export default {
       description:
         '현재 색상은 {color}입니다. Enter 키를 눌러 새 색상을 선택합니다.',
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: '지금',

packages/locale/lang/ku.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Niha',

packages/locale/lang/ky.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'азыр',

packages/locale/lang/lo.ts

@@ -10,6 +10,9 @@ export default {
       defaultLabel: 'ເຄື່ອງມືເລືອກສີ',
       description: 'ສີປັດຈຸບັນແມ່ນ {color}. ກົດ enter ເພື່ອເລືອກສີໃໝ່.',
       alphaLabel: 'ເລືອກຄ່າຄວາມໂປ່ງໃສ',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'ຕອນນີ້',

packages/locale/lang/lt.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Dabar',

packages/locale/lang/lv.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Tagad',

packages/locale/lang/mg.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Zao',

packages/locale/lang/mn.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Одоо',

packages/locale/lang/ms.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'warna semasa ialah {warna}. tekan enter untuk memilih warna baharu.',
       alphaLabel: 'pilih nilai alfa',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Sekarang',

packages/locale/lang/my.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'လက်ရှိအရောင်မှာ {color} ဖြစ်ပါသည်။ တခြားအရောင်ကိုရွေးချယ်လိုပါက enter ကိုနှိပ်ပါ။',
       alphaLabel: 'alpha တန်ဖိုးကို ရွေးချယ်ပါ',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'ယခု',

packages/locale/lang/nb-no.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Nå',

packages/locale/lang/nl.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Nu',

packages/locale/lang/no.ts

@@ -10,6 +10,9 @@ export default {
       defaultLabel: 'Fargevelger',
       description: 'Nåværende farge {color}, velg ny farge med Enter-tasten',
       alphaLabel: 'Velg verdi for gjennomsiktighet',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Nå',

packages/locale/lang/pa.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'اوس',

packages/locale/lang/pl.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Teraz',

packages/locale/lang/pt-br.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Agora',

packages/locale/lang/pt.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Agora',

packages/locale/lang/ro.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Acum',

packages/locale/lang/ru.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Сейчас',

packages/locale/lang/sk.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Teraz',

packages/locale/lang/sl.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Zdaj',

packages/locale/lang/sr.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Сада',

packages/locale/lang/sv.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Nu',

packages/locale/lang/sw.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'rangi ya sasa ni {color}. bonyeza kitufe cha kuingia ili kuchagua rangi mpya.',
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'sasa',

packages/locale/lang/ta.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'தற்போது',

packages/locale/lang/te.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'ప్రస్తుత రంగు {color}. కొత్త రంగును ఎంచుకోవడానికి ఎంటర్ నొక్కండి.',
       alphaLabel: 'అల్ఫా విలువను ఎంచుకోండి',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'ఇప్పుడు',

packages/locale/lang/th.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'ตอนนี้',

packages/locale/lang/tk.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Şuwagt',

packages/locale/lang/tr.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Şimdi',

packages/locale/lang/ug-cn.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'ھازىرقى ۋاقىت',

packages/locale/lang/uk.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Зараз',

packages/locale/lang/uz-uz.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Hozir',

packages/locale/lang/vi.ts

@@ -11,6 +11,9 @@ export default {
       description:
         'current color is {color}. press enter to select a new color.', // to be translated
       alphaLabel: 'pick alpha value', // to be translated
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: 'Hiện tại',

packages/locale/lang/zh-cn.ts

@@ -10,6 +10,9 @@ export default {
       defaultLabel: '颜色选择器',
       description: '当前颜色 {color}，按 Enter 键选择新颜色',
       alphaLabel: '选择透明度的值',
+      alphaDescription: '透明度 {alpha}, 当前颜色 {color}',
+      hueLabel: '选择色相值',
+      hueDescription: '色相 {hue}, 当前颜色 {color}',
     },
     datepicker: {
       now: '此刻',
@@ -44,7 +47,6 @@ export default {
       month10: '10 月',
       month11: '11 月',
       month12: '12 月',
-      // week: '周次',
       weeks: {
         sun: '日',
         mon: '一',
@@ -88,12 +90,12 @@ export default {
       noData: '无数据',
       placeholder: '请选择',
     },
-    dropdown: {
-      toggleDropdown: '切换下拉选项',
-    },
     mention: {
       loading: '加载中',
     },
+    dropdown: {
+      toggleDropdown: '切换下拉选项',
+    },
     cascader: {
       noMatch: '无匹配数据',
       loading: '加载中',

packages/locale/lang/zh-hk.ts

@@ -10,6 +10,9 @@ export default {
       defaultLabel: '顏色選擇器',
       description: '當前顏色為 {color}。按 Enter 鍵選擇新顏色。',
       alphaLabel: '選擇透明度的值',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: '現在',
@@ -44,7 +47,6 @@ export default {
       month10: '10 月',
       month11: '11 月',
       month12: '12 月',
-      // week: '周次',
       weeks: {
         sun: '日',
         mon: '一',

packages/locale/lang/zh-mo.ts

@@ -10,6 +10,9 @@ export default {
       defaultLabel: '顏色選擇器',
       description: '當前顏色為 {color}。按 Enter 鍵選擇新顏色。',
       alphaLabel: '選擇透明度的值',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: '現在',
@@ -44,7 +47,6 @@ export default {
       month10: '10 月',
       month11: '11 月',
       month12: '12 月',
-      // week: '周次',
       weeks: {
         sun: '日',
         mon: '一',

packages/locale/lang/zh-tw.ts

@@ -10,6 +10,9 @@ export default {
       defaultLabel: '色彩選擇器',
       description: '目前色彩為 {color}。按一下 Enter 以選擇新色彩。',
       alphaLabel: '選擇透明度的值',
+      alphaDescription: 'alpha {alpha}, current color is {color}', // to be translated
+      hueLabel: 'pick hue value', // to be translated
+      hueDescription: 'hue {hue}, current color is {color}', // to be translated
     },
     datepicker: {
       now: '現在',
@@ -44,7 +47,6 @@ export default {
       month10: '10 月',
       month11: '11 月',
       month12: '12 月',
-      // week: '周次',
       weeks: {
         sun: '日',
         mon: '一',