ropav 0.0.5 → 0.0.7

package/dist/select.js

@@ -1,49 +1,20 @@
 import './select.css';
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
-import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSelector, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, watch, withModifiers, withVaporModifiers } from "vue";
+import { t as useClickOutside } from "./useClickOutside.js";
+import { t as x_default } from "./x.js";
+import { VaporTransition, child, computed, createComponent, createFor, createIf, createInvoker, createSelector, createSlot, createTemplateRefSetter, defineVaporComponent, delegateEvents, extend, markRaw, next, nextTick, on, ref, renderEffect, setAttr, setClass, setClassName, setInsertionState, setProp, setText, setValue, template, toDisplayString, txt, unref, useId, withModifiers, withVaporModifiers } from "vue";
 //#region ~icons/lucide/chevrons-up-down
-var t0$2 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
-function render$1(_ctx) {
-	return t0$2();
-}
-var chevrons_up_down_default = markRaw(defineVaporComponent({
-	name: "lucide-chevrons-up-down",
-	render: render$1
-}));
-//#endregion
-//#region ~icons/lucide/x
-var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M18 6L6 18M6 6l12 12\">", 3, 1);
+var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"m7 15l5 5l5-5M7 9l5-5l5 5\">", 3, 1);
 function render(_ctx) {
 	return t0$1();
 }
-var x_default = markRaw(defineVaporComponent({
-	name: "lucide-x",
+var chevrons_up_down_default = markRaw(defineVaporComponent({
+	name: "lucide-chevrons-up-down",
 	render
 }));
 //#endregion
-//#region src/composables/useClickOutside.ts
-function useClickOutside(target, active, callback) {
-	let isListening = false;
-	let stopWatch;
-	function handler(e) {
-		if (target.value && !target.value.contains(e.target)) callback();
-	}
-	function setListening(value) {
-		if (typeof document === "undefined" || value === isListening) return;
-		isListening = value;
-		if (value) document.addEventListener("click", handler, true);
-		else document.removeEventListener("click", handler, true);
-	}
-	onMounted(() => {
-		stopWatch = watch(active, setListening, { immediate: true });
-	});
-	onBeforeUnmount(() => {
-		stopWatch?.();
-		setListening(false);
-	});
-}
-//#endregion
 //#region src/composables/useListNavigation.ts
 function useListNavigation(options) {
 	const localFocusedIndex = ref(-1);
@@ -215,6 +186,13 @@ function useSelect(props, emitUpdate) {
 					navigation.focusLast();
 				}
 				break;
+			case "Delete":
+			case "Backspace":
+				if (canClear.value) {
+					e.preventDefault();
+					clearSelection();
+				}
+				break;
 			case "Escape":
 				e.preventDefault();
 				close();

package/dist/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../src/composables/useClickOutside.ts","../src/composables/useListNavigation.ts","../src/components/select/useSelect.ts","../src/components/select/select.vue","../src/components/select/select.vue"],"sourcesContent":["import { watch, onMounted, onBeforeUnmount, type Ref } from 'vue';\n\nexport function useClickOutside(\n    target: Ref<HTMLElement | null>,\n    active: Ref<boolean>,\n    callback: () => void,\n) {\n    let isListening = false;\n    let stopWatch: (() => void) | undefined;\n\n    function handler(e: MouseEvent) {\n        if (target.value && !target.value.contains(e.target as Node)) {\n            callback();\n        }\n    }\n\n    function setListening(value: boolean) {\n        if (typeof document === 'undefined' || value === isListening) return;\n        isListening = value;\n\n        if (value) {\n            document.addEventListener('click', handler, true);\n        } else {\n            document.removeEventListener('click', handler, true);\n        }\n    }\n\n    onMounted(() => {\n        stopWatch = watch(active, setListening, { immediate: true });\n    });\n\n    onBeforeUnmount(() => {\n        stopWatch?.();\n        setListening(false);\n    });\n}\n","import { computed, ref } from 'vue';\n\nexport interface ListNavigationItem {\n    disabled?: boolean;\n}\n\nexport interface UseListNavigationOptions<T extends ListNavigationItem> {\n    items: () => T[];\n    isSelected?: (item: T) => boolean;\n    loop?: boolean;\n}\n\nexport function useListNavigation<T extends ListNavigationItem>(\n    options: UseListNavigationOptions<T>,\n) {\n    const localFocusedIndex = ref(-1);\n    const loop = options.loop ?? true;\n\n    const enabledIndexes = computed(() =>\n        options\n            .items()\n            .map((item, index) => (item.disabled ? -1 : index))\n            .filter((index) => index >= 0),\n    );\n\n    function resetFocus() {\n        localFocusedIndex.value = -1;\n    }\n\n    function setNearest(index: number, direction: 1 | -1) {\n        const indexes = enabledIndexes.value;\n        if (indexes.length === 0) {\n            resetFocus();\n            return;\n        }\n\n        if (options.items()[index] && !options.items()[index]?.disabled) {\n            localFocusedIndex.value = index;\n            return;\n        }\n\n        let next: number | undefined;\n        if (direction === 1) {\n            next = indexes.find((i) => i > index);\n        } else {\n            for (let i = indexes.length - 1; i >= 0; i -= 1) {\n                const candidate = indexes[i]!;\n                if (candidate < index) {\n                    next = candidate;\n                    break;\n                }\n            }\n        }\n\n        if (next !== undefined) {\n            localFocusedIndex.value = next;\n        } else if (loop) {\n            localFocusedIndex.value = direction === 1 ? indexes[0]! : indexes[indexes.length - 1]!;\n        }\n    }\n\n    function focusSelected() {\n        const items = options.items();\n        const selectedIndex = options.isSelected\n            ? items.findIndex((item) => options.isSelected!(item) && !item.disabled)\n            : -1;\n        if (selectedIndex >= 0) {\n            localFocusedIndex.value = selectedIndex;\n        } else {\n            focusFirst();\n        }\n    }\n\n    function focusFirst() {\n        const first = enabledIndexes.value[0];\n        localFocusedIndex.value = first ?? -1;\n    }\n\n    function focusLast() {\n        const indexes = enabledIndexes.value;\n        localFocusedIndex.value = indexes[indexes.length - 1] ?? -1;\n    }\n\n    function moveFocus(delta: 1 | -1) {\n        if (localFocusedIndex.value < 0) {\n            if (delta === 1) {\n                focusFirst();\n            } else {\n                focusLast();\n            }\n            return;\n        }\n        setNearest(localFocusedIndex.value + delta, delta);\n    }\n\n    return {\n        focusedIndex: localFocusedIndex,\n        resetFocus,\n        focusSelected,\n        focusFirst,\n        focusLast,\n        moveFocus,\n    };\n}\n","import { computed, nextTick, ref, useId } from 'vue';\nimport { useClickOutside } from '@/composables/useClickOutside';\nimport { useControlState } from '@/composables/useControlState';\nimport { useListNavigation } from '@/composables/useListNavigation';\nimport { bem } from '@/utils/bem';\nimport type { SelectOption, SelectProps } from './types';\n\ntype SelectValue = string | number | null;\n\nfunction hasSelectValue(value: SelectValue) {\n    return value != null && value !== '';\n}\n\nfunction getSelectDisplayLabel(options: SelectOption[] | undefined, value: SelectValue) {\n    if (!hasSelectValue(value)) return '';\n    return options?.find((option) => option.value === value)?.label ?? '';\n}\n\nfunction getSelectActiveDescendantId(baseId: string, focusedIndex: number) {\n    return focusedIndex < 0 ? undefined : `${baseId}-option-${focusedIndex}`;\n}\n\nexport function useSelect(props: Readonly<SelectProps>, emitUpdate: (value: SelectValue) => void) {\n    const selectRef = ref<HTMLElement | null>(null);\n    const triggerRef = ref<HTMLElement | null>(null);\n    const isOpen = ref(false);\n\n    const selectId = useId();\n    const listboxId = `${selectId}-listbox`;\n\n    const control = useControlState(props);\n    const visibleOptions = computed(() => props.options ?? []);\n\n    const navigation = useListNavigation<SelectOption>({\n        items: () => visibleOptions.value,\n        isSelected: (item) => item.value === props.modelValue,\n    });\n\n    const focusedIndex = navigation.focusedIndex;\n    const activeDescendantId = computed(() =>\n        getSelectActiveDescendantId(selectId, focusedIndex.value),\n    );\n\n    const rootClass = computed(() =>\n        bem('rp-select', {\n            open: isOpen.value,\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    const hasValue = computed(() => hasSelectValue(props.modelValue));\n    const displayLabel = computed(() => getSelectDisplayLabel(props.options, props.modelValue));\n    const canClear = computed(() =>\n        Boolean(props.clearable && hasValue.value && !control.disabled),\n    );\n\n    function focusTrigger() {\n        nextTick(() => triggerRef.value?.focus());\n    }\n\n    function open() {\n        if (control.disabled || isOpen.value) return;\n        isOpen.value = true;\n        navigation.focusSelected();\n    }\n\n    function close() {\n        isOpen.value = false;\n        navigation.resetFocus();\n    }\n\n    function toggle() {\n        if (control.disabled) return;\n        if (isOpen.value) {\n            close();\n            focusTrigger();\n        } else {\n            open();\n        }\n    }\n\n    function selectOption(option: SelectOption) {\n        if (option.disabled) return;\n        emitUpdate(option.value);\n        close();\n        focusTrigger();\n    }\n\n    function clearSelection() {\n        if (!canClear.value) return;\n        emitUpdate(null);\n        close();\n        focusTrigger();\n    }\n\n    function onOptionMouseenter(option: SelectOption, index: number) {\n        if (!option.disabled) focusedIndex.value = index;\n    }\n\n    function selectFocusedOption() {\n        if (focusedIndex.value < 0 || focusedIndex.value >= visibleOptions.value.length) return;\n        selectOption(visibleOptions.value[focusedIndex.value]!);\n    }\n\n    function onTriggerKeydown(e: KeyboardEvent) {\n        if (control.disabled) return;\n\n        switch (e.key) {\n            case 'Enter':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else selectFocusedOption();\n                break;\n            case ' ':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else selectFocusedOption();\n                break;\n            case 'ArrowDown':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else navigation.moveFocus(1);\n                break;\n            case 'ArrowUp':\n                e.preventDefault();\n                if (!isOpen.value) {\n                    open();\n                    navigation.focusLast();\n                } else {\n                    navigation.moveFocus(-1);\n                }\n                break;\n            case 'Home':\n                if (isOpen.value) {\n                    e.preventDefault();\n                    navigation.focusFirst();\n                }\n                break;\n            case 'End':\n                if (isOpen.value) {\n                    e.preventDefault();\n                    navigation.focusLast();\n                }\n                break;\n            case 'Escape':\n                e.preventDefault();\n                close();\n                focusTrigger();\n                break;\n        }\n    }\n\n    useClickOutside(selectRef, isOpen, close);\n\n    return {\n        selectRef,\n        triggerRef,\n        isOpen,\n        selectId,\n        listboxId,\n        control,\n        visibleOptions,\n        focusedIndex,\n        activeDescendantId,\n        rootClass,\n        hasValue,\n        displayLabel,\n        canClear,\n        toggle,\n        selectOption,\n        clearSelection,\n        onOptionMouseenter,\n        onTriggerKeydown,\n    };\n}\n","<template>\n    <div :class=\"rootClass\" ref=\"selectRef\">\n        <input\n            v-if=\"name\"\n            type=\"hidden\"\n            :name=\"name\"\n            :value=\"modelValue ?? ''\"\n            :disabled=\"control.disabled || undefined\"\n        />\n        <div\n            :id=\"control.id\"\n            ref=\"triggerRef\"\n            class=\"rp-select__trigger\"\n            role=\"combobox\"\n            :aria-expanded=\"isOpen\"\n            aria-haspopup=\"listbox\"\n            :aria-activedescendant=\"activeDescendantId\"\n            :aria-controls=\"listboxId\"\n            :aria-disabled=\"control.disabled || undefined\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :data-state=\"isOpen ? 'open' : 'closed'\"\n            :data-disabled=\"control.disabled || undefined\"\n            :tabindex=\"control.disabled ? -1 : 0\"\n            @click=\"toggle\"\n            @keydown=\"onTriggerKeydown\"\n        >\n            <span class=\"rp-select__value\" :class=\"{ 'rp-select__placeholder': !hasValue }\">\n                {{ displayLabel || placeholder }}\n            </span>\n\n            <span class=\"rp-select__indicator\">\n                <button\n                    v-if=\"canClear\"\n                    type=\"button\"\n                    class=\"rp-select__clear\"\n                    aria-label=\"Clear selection\"\n                    tabindex=\"-1\"\n                    @mousedown.prevent\n                    @click.stop=\"clearSelection\"\n                >\n                    <XIcon />\n                </button>\n                <span class=\"rp-select__arrow\" aria-hidden=\"true\">\n                    <ChevronsUpDownIcon />\n                </span>\n            </span>\n        </div>\n\n        <Transition name=\"rp-select-dropdown\">\n            <div v-if=\"isOpen\" class=\"rp-select__dropdown\" role=\"listbox\" :id=\"listboxId\">\n                <div v-if=\"visibleOptions.length === 0\" class=\"rp-select__empty\">\n                    <slot name=\"empty\">No options</slot>\n                </div>\n                <div\n                    v-for=\"(option, index) in visibleOptions\"\n                    :key=\"option.value\"\n                    role=\"option\"\n                    :id=\"`${selectId}-option-${index}`\"\n                    :aria-selected=\"option.value === modelValue\"\n                    :aria-disabled=\"option.disabled || undefined\"\n                    :data-selected=\"option.value === modelValue || undefined\"\n                    :data-disabled=\"option.disabled || undefined\"\n                    :class=\"[\n                        'rp-select__option',\n                        {\n                            'rp-select__option--selected': option.value === modelValue,\n                            'rp-select__option--focused': index === focusedIndex,\n                            'rp-select__option--disabled': option.disabled,\n                        },\n                    ]\"\n                    @click=\"selectOption(option)\"\n                    @mouseenter=\"onOptionMouseenter(option, index)\"\n                >\n                    {{ option.label }}\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport ChevronsUpDownIcon from '~icons/lucide/chevrons-up-down';\nimport XIcon from '~icons/lucide/x';\nimport { useSelect } from './useSelect';\nimport type { SelectProps } from './types';\n\ndefineOptions({ name: 'RpSelect' });\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n    options: () => [],\n    placeholder: 'Select...',\n    clearable: false,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst {\n    selectRef,\n    triggerRef,\n    isOpen,\n    selectId,\n    listboxId,\n    control,\n    visibleOptions,\n    focusedIndex,\n    activeDescendantId,\n    rootClass,\n    hasValue,\n    displayLabel,\n    canClear,\n    toggle,\n    selectOption,\n    clearSelection,\n    onOptionMouseenter,\n    onTriggerKeydown,\n} = useSelect(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid selectRef;\nvoid triggerRef;\n</script>\n\n<style src=\"./select.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\" ref=\"selectRef\">\n        <input\n            v-if=\"name\"\n            type=\"hidden\"\n            :name=\"name\"\n            :value=\"modelValue ?? ''\"\n            :disabled=\"control.disabled || undefined\"\n        />\n        <div\n            :id=\"control.id\"\n            ref=\"triggerRef\"\n            class=\"rp-select__trigger\"\n            role=\"combobox\"\n            :aria-expanded=\"isOpen\"\n            aria-haspopup=\"listbox\"\n            :aria-activedescendant=\"activeDescendantId\"\n            :aria-controls=\"listboxId\"\n            :aria-disabled=\"control.disabled || undefined\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :data-state=\"isOpen ? 'open' : 'closed'\"\n            :data-disabled=\"control.disabled || undefined\"\n            :tabindex=\"control.disabled ? -1 : 0\"\n            @click=\"toggle\"\n            @keydown=\"onTriggerKeydown\"\n        >\n            <span class=\"rp-select__value\" :class=\"{ 'rp-select__placeholder': !hasValue }\">\n                {{ displayLabel || placeholder }}\n            </span>\n\n            <span class=\"rp-select__indicator\">\n                <button\n                    v-if=\"canClear\"\n                    type=\"button\"\n                    class=\"rp-select__clear\"\n                    aria-label=\"Clear selection\"\n                    tabindex=\"-1\"\n                    @mousedown.prevent\n                    @click.stop=\"clearSelection\"\n                >\n                    <XIcon />\n                </button>\n                <span class=\"rp-select__arrow\" aria-hidden=\"true\">\n                    <ChevronsUpDownIcon />\n                </span>\n            </span>\n        </div>\n\n        <Transition name=\"rp-select-dropdown\">\n            <div v-if=\"isOpen\" class=\"rp-select__dropdown\" role=\"listbox\" :id=\"listboxId\">\n                <div v-if=\"visibleOptions.length === 0\" class=\"rp-select__empty\">\n                    <slot name=\"empty\">No options</slot>\n                </div>\n                <div\n                    v-for=\"(option, index) in visibleOptions\"\n                    :key=\"option.value\"\n                    role=\"option\"\n                    :id=\"`${selectId}-option-${index}`\"\n                    :aria-selected=\"option.value === modelValue\"\n                    :aria-disabled=\"option.disabled || undefined\"\n                    :data-selected=\"option.value === modelValue || undefined\"\n                    :data-disabled=\"option.disabled || undefined\"\n                    :class=\"[\n                        'rp-select__option',\n                        {\n                            'rp-select__option--selected': option.value === modelValue,\n                            'rp-select__option--focused': index === focusedIndex,\n                            'rp-select__option--disabled': option.disabled,\n                        },\n                    ]\"\n                    @click=\"selectOption(option)\"\n                    @mouseenter=\"onOptionMouseenter(option, index)\"\n                >\n                    {{ option.label }}\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport ChevronsUpDownIcon from '~icons/lucide/chevrons-up-down';\nimport XIcon from '~icons/lucide/x';\nimport { useSelect } from './useSelect';\nimport type { SelectProps } from './types';\n\ndefineOptions({ name: 'RpSelect' });\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n    options: () => [],\n    placeholder: 'Select...',\n    clearable: false,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst {\n    selectRef,\n    triggerRef,\n    isOpen,\n    selectId,\n    listboxId,\n    control,\n    visibleOptions,\n    focusedIndex,\n    activeDescendantId,\n    rootClass,\n    hasValue,\n    displayLabel,\n    canClear,\n    toggle,\n    selectOption,\n    clearSelection,\n    onOptionMouseenter,\n    onTriggerKeydown,\n} = useSelect(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid selectRef;\nvoid triggerRef;\n</script>\n\n<style src=\"./select.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":[],"sources":["../src/composables/useListNavigation.ts","../src/components/select/useSelect.ts","../src/components/select/select.vue","../src/components/select/select.vue"],"sourcesContent":["import { computed, ref } from 'vue';\n\nexport interface ListNavigationItem {\n    disabled?: boolean;\n}\n\nexport interface UseListNavigationOptions<T extends ListNavigationItem> {\n    items: () => T[];\n    isSelected?: (item: T) => boolean;\n    loop?: boolean;\n}\n\nexport function useListNavigation<T extends ListNavigationItem>(\n    options: UseListNavigationOptions<T>,\n) {\n    const localFocusedIndex = ref(-1);\n    const loop = options.loop ?? true;\n\n    const enabledIndexes = computed(() =>\n        options\n            .items()\n            .map((item, index) => (item.disabled ? -1 : index))\n            .filter((index) => index >= 0),\n    );\n\n    function resetFocus() {\n        localFocusedIndex.value = -1;\n    }\n\n    function setNearest(index: number, direction: 1 | -1) {\n        const indexes = enabledIndexes.value;\n        if (indexes.length === 0) {\n            resetFocus();\n            return;\n        }\n\n        if (options.items()[index] && !options.items()[index]?.disabled) {\n            localFocusedIndex.value = index;\n            return;\n        }\n\n        let next: number | undefined;\n        if (direction === 1) {\n            next = indexes.find((i) => i > index);\n        } else {\n            for (let i = indexes.length - 1; i >= 0; i -= 1) {\n                const candidate = indexes[i]!;\n                if (candidate < index) {\n                    next = candidate;\n                    break;\n                }\n            }\n        }\n\n        if (next !== undefined) {\n            localFocusedIndex.value = next;\n        } else if (loop) {\n            localFocusedIndex.value = direction === 1 ? indexes[0]! : indexes[indexes.length - 1]!;\n        }\n    }\n\n    function focusSelected() {\n        const items = options.items();\n        const selectedIndex = options.isSelected\n            ? items.findIndex((item) => options.isSelected!(item) && !item.disabled)\n            : -1;\n        if (selectedIndex >= 0) {\n            localFocusedIndex.value = selectedIndex;\n        } else {\n            focusFirst();\n        }\n    }\n\n    function focusFirst() {\n        const first = enabledIndexes.value[0];\n        localFocusedIndex.value = first ?? -1;\n    }\n\n    function focusLast() {\n        const indexes = enabledIndexes.value;\n        localFocusedIndex.value = indexes[indexes.length - 1] ?? -1;\n    }\n\n    function moveFocus(delta: 1 | -1) {\n        if (localFocusedIndex.value < 0) {\n            if (delta === 1) {\n                focusFirst();\n            } else {\n                focusLast();\n            }\n            return;\n        }\n        setNearest(localFocusedIndex.value + delta, delta);\n    }\n\n    return {\n        focusedIndex: localFocusedIndex,\n        resetFocus,\n        focusSelected,\n        focusFirst,\n        focusLast,\n        moveFocus,\n    };\n}\n","import { computed, nextTick, ref, useId } from 'vue';\nimport { useClickOutside } from '@/composables/useClickOutside';\nimport { useControlState } from '@/composables/useControlState';\nimport { useListNavigation } from '@/composables/useListNavigation';\nimport { bem } from '@/utils/bem';\nimport type { SelectOption, SelectProps } from './types';\n\ntype SelectValue = string | number | null;\n\nfunction hasSelectValue(value: SelectValue) {\n    return value != null && value !== '';\n}\n\nfunction getSelectDisplayLabel(options: SelectOption[] | undefined, value: SelectValue) {\n    if (!hasSelectValue(value)) return '';\n    return options?.find((option) => option.value === value)?.label ?? '';\n}\n\nfunction getSelectActiveDescendantId(baseId: string, focusedIndex: number) {\n    return focusedIndex < 0 ? undefined : `${baseId}-option-${focusedIndex}`;\n}\n\nexport function useSelect(props: Readonly<SelectProps>, emitUpdate: (value: SelectValue) => void) {\n    const selectRef = ref<HTMLElement | null>(null);\n    const triggerRef = ref<HTMLElement | null>(null);\n    const isOpen = ref(false);\n\n    const selectId = useId();\n    const listboxId = `${selectId}-listbox`;\n\n    const control = useControlState(props);\n    const visibleOptions = computed(() => props.options ?? []);\n\n    const navigation = useListNavigation<SelectOption>({\n        items: () => visibleOptions.value,\n        isSelected: (item) => item.value === props.modelValue,\n    });\n\n    const focusedIndex = navigation.focusedIndex;\n    const activeDescendantId = computed(() =>\n        getSelectActiveDescendantId(selectId, focusedIndex.value),\n    );\n\n    const rootClass = computed(() =>\n        bem('rp-select', {\n            open: isOpen.value,\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            disabled: control.disabled,\n            invalid: control.invalid,\n        }),\n    );\n\n    const hasValue = computed(() => hasSelectValue(props.modelValue));\n    const displayLabel = computed(() => getSelectDisplayLabel(props.options, props.modelValue));\n    const canClear = computed(() =>\n        Boolean(props.clearable && hasValue.value && !control.disabled),\n    );\n\n    function focusTrigger() {\n        nextTick(() => triggerRef.value?.focus());\n    }\n\n    function open() {\n        if (control.disabled || isOpen.value) return;\n        isOpen.value = true;\n        navigation.focusSelected();\n    }\n\n    function close() {\n        isOpen.value = false;\n        navigation.resetFocus();\n    }\n\n    function toggle() {\n        if (control.disabled) return;\n        if (isOpen.value) {\n            close();\n            focusTrigger();\n        } else {\n            open();\n        }\n    }\n\n    function selectOption(option: SelectOption) {\n        if (option.disabled) return;\n        emitUpdate(option.value);\n        close();\n        focusTrigger();\n    }\n\n    function clearSelection() {\n        if (!canClear.value) return;\n        emitUpdate(null);\n        close();\n        focusTrigger();\n    }\n\n    function onOptionMouseenter(option: SelectOption, index: number) {\n        if (!option.disabled) focusedIndex.value = index;\n    }\n\n    function selectFocusedOption() {\n        if (focusedIndex.value < 0 || focusedIndex.value >= visibleOptions.value.length) return;\n        selectOption(visibleOptions.value[focusedIndex.value]!);\n    }\n\n    function onTriggerKeydown(e: KeyboardEvent) {\n        if (control.disabled) return;\n\n        switch (e.key) {\n            case 'Enter':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else selectFocusedOption();\n                break;\n            case ' ':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else selectFocusedOption();\n                break;\n            case 'ArrowDown':\n                e.preventDefault();\n                if (!isOpen.value) open();\n                else navigation.moveFocus(1);\n                break;\n            case 'ArrowUp':\n                e.preventDefault();\n                if (!isOpen.value) {\n                    open();\n                    navigation.focusLast();\n                } else {\n                    navigation.moveFocus(-1);\n                }\n                break;\n            case 'Home':\n                if (isOpen.value) {\n                    e.preventDefault();\n                    navigation.focusFirst();\n                }\n                break;\n            case 'End':\n                if (isOpen.value) {\n                    e.preventDefault();\n                    navigation.focusLast();\n                }\n                break;\n            case 'Delete':\n            case 'Backspace':\n                if (canClear.value) {\n                    e.preventDefault();\n                    clearSelection();\n                }\n                break;\n            case 'Escape':\n                e.preventDefault();\n                close();\n                focusTrigger();\n                break;\n        }\n    }\n\n    useClickOutside(selectRef, isOpen, close);\n\n    return {\n        selectRef,\n        triggerRef,\n        isOpen,\n        selectId,\n        listboxId,\n        control,\n        visibleOptions,\n        focusedIndex,\n        activeDescendantId,\n        rootClass,\n        hasValue,\n        displayLabel,\n        canClear,\n        toggle,\n        selectOption,\n        clearSelection,\n        onOptionMouseenter,\n        onTriggerKeydown,\n    };\n}\n","<template>\n    <div :class=\"rootClass\" ref=\"selectRef\">\n        <input\n            v-if=\"name\"\n            type=\"hidden\"\n            :name=\"name\"\n            :value=\"modelValue ?? ''\"\n            :disabled=\"control.disabled || undefined\"\n        />\n        <div\n            :id=\"control.id\"\n            ref=\"triggerRef\"\n            class=\"rp-select__trigger\"\n            role=\"combobox\"\n            :aria-expanded=\"isOpen\"\n            aria-haspopup=\"listbox\"\n            :aria-activedescendant=\"activeDescendantId\"\n            :aria-controls=\"listboxId\"\n            :aria-disabled=\"control.disabled || undefined\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :data-state=\"isOpen ? 'open' : 'closed'\"\n            :data-disabled=\"control.disabled || undefined\"\n            :tabindex=\"control.disabled ? -1 : 0\"\n            @click=\"toggle\"\n            @keydown=\"onTriggerKeydown\"\n        >\n            <span class=\"rp-select__value\" :class=\"{ 'rp-select__placeholder': !hasValue }\">\n                {{ displayLabel || placeholder }}\n            </span>\n\n            <span class=\"rp-select__indicator\">\n                <button\n                    v-if=\"canClear\"\n                    type=\"button\"\n                    class=\"rp-select__clear\"\n                    aria-label=\"Clear selection\"\n                    tabindex=\"-1\"\n                    @mousedown.prevent\n                    @click.stop=\"clearSelection\"\n                >\n                    <XIcon />\n                </button>\n                <span class=\"rp-select__arrow\" aria-hidden=\"true\">\n                    <ChevronsUpDownIcon />\n                </span>\n            </span>\n        </div>\n\n        <Transition name=\"rp-select-dropdown\">\n            <div v-if=\"isOpen\" class=\"rp-select__dropdown\" role=\"listbox\" :id=\"listboxId\">\n                <div v-if=\"visibleOptions.length === 0\" class=\"rp-select__empty\">\n                    <slot name=\"empty\">No options</slot>\n                </div>\n                <div\n                    v-for=\"(option, index) in visibleOptions\"\n                    :key=\"option.value\"\n                    role=\"option\"\n                    :id=\"`${selectId}-option-${index}`\"\n                    :aria-selected=\"option.value === modelValue\"\n                    :aria-disabled=\"option.disabled || undefined\"\n                    :data-selected=\"option.value === modelValue || undefined\"\n                    :data-disabled=\"option.disabled || undefined\"\n                    :class=\"[\n                        'rp-select__option',\n                        {\n                            'rp-select__option--selected': option.value === modelValue,\n                            'rp-select__option--focused': index === focusedIndex,\n                            'rp-select__option--disabled': option.disabled,\n                        },\n                    ]\"\n                    @click=\"selectOption(option)\"\n                    @mouseenter=\"onOptionMouseenter(option, index)\"\n                >\n                    {{ option.label }}\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport ChevronsUpDownIcon from '~icons/lucide/chevrons-up-down';\nimport XIcon from '~icons/lucide/x';\nimport { useSelect } from './useSelect';\nimport type { SelectProps } from './types';\n\ndefineOptions({ name: 'RpSelect' });\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n    options: () => [],\n    placeholder: 'Select...',\n    clearable: false,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst {\n    selectRef,\n    triggerRef,\n    isOpen,\n    selectId,\n    listboxId,\n    control,\n    visibleOptions,\n    focusedIndex,\n    activeDescendantId,\n    rootClass,\n    hasValue,\n    displayLabel,\n    canClear,\n    toggle,\n    selectOption,\n    clearSelection,\n    onOptionMouseenter,\n    onTriggerKeydown,\n} = useSelect(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid selectRef;\nvoid triggerRef;\n</script>\n\n<style src=\"./select.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\" ref=\"selectRef\">\n        <input\n            v-if=\"name\"\n            type=\"hidden\"\n            :name=\"name\"\n            :value=\"modelValue ?? ''\"\n            :disabled=\"control.disabled || undefined\"\n        />\n        <div\n            :id=\"control.id\"\n            ref=\"triggerRef\"\n            class=\"rp-select__trigger\"\n            role=\"combobox\"\n            :aria-expanded=\"isOpen\"\n            aria-haspopup=\"listbox\"\n            :aria-activedescendant=\"activeDescendantId\"\n            :aria-controls=\"listboxId\"\n            :aria-disabled=\"control.disabled || undefined\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :data-state=\"isOpen ? 'open' : 'closed'\"\n            :data-disabled=\"control.disabled || undefined\"\n            :tabindex=\"control.disabled ? -1 : 0\"\n            @click=\"toggle\"\n            @keydown=\"onTriggerKeydown\"\n        >\n            <span class=\"rp-select__value\" :class=\"{ 'rp-select__placeholder': !hasValue }\">\n                {{ displayLabel || placeholder }}\n            </span>\n\n            <span class=\"rp-select__indicator\">\n                <button\n                    v-if=\"canClear\"\n                    type=\"button\"\n                    class=\"rp-select__clear\"\n                    aria-label=\"Clear selection\"\n                    tabindex=\"-1\"\n                    @mousedown.prevent\n                    @click.stop=\"clearSelection\"\n                >\n                    <XIcon />\n                </button>\n                <span class=\"rp-select__arrow\" aria-hidden=\"true\">\n                    <ChevronsUpDownIcon />\n                </span>\n            </span>\n        </div>\n\n        <Transition name=\"rp-select-dropdown\">\n            <div v-if=\"isOpen\" class=\"rp-select__dropdown\" role=\"listbox\" :id=\"listboxId\">\n                <div v-if=\"visibleOptions.length === 0\" class=\"rp-select__empty\">\n                    <slot name=\"empty\">No options</slot>\n                </div>\n                <div\n                    v-for=\"(option, index) in visibleOptions\"\n                    :key=\"option.value\"\n                    role=\"option\"\n                    :id=\"`${selectId}-option-${index}`\"\n                    :aria-selected=\"option.value === modelValue\"\n                    :aria-disabled=\"option.disabled || undefined\"\n                    :data-selected=\"option.value === modelValue || undefined\"\n                    :data-disabled=\"option.disabled || undefined\"\n                    :class=\"[\n                        'rp-select__option',\n                        {\n                            'rp-select__option--selected': option.value === modelValue,\n                            'rp-select__option--focused': index === focusedIndex,\n                            'rp-select__option--disabled': option.disabled,\n                        },\n                    ]\"\n                    @click=\"selectOption(option)\"\n                    @mouseenter=\"onOptionMouseenter(option, index)\"\n                >\n                    {{ option.label }}\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport ChevronsUpDownIcon from '~icons/lucide/chevrons-up-down';\nimport XIcon from '~icons/lucide/x';\nimport { useSelect } from './useSelect';\nimport type { SelectProps } from './types';\n\ndefineOptions({ name: 'RpSelect' });\n\nconst props = withDefaults(defineProps<SelectProps>(), {\n    options: () => [],\n    placeholder: 'Select...',\n    clearable: false,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string | number | null];\n}>();\n\nconst {\n    selectRef,\n    triggerRef,\n    isOpen,\n    selectId,\n    listboxId,\n    control,\n    visibleOptions,\n    focusedIndex,\n    activeDescendantId,\n    rootClass,\n    hasValue,\n    displayLabel,\n    canClear,\n    toggle,\n    selectOption,\n    clearSelection,\n    onOptionMouseenter,\n    onTriggerKeydown,\n} = useSelect(props, (value) => {\n    emit('update:modelValue', value);\n});\n\nvoid selectRef;\nvoid triggerRef;\n</script>\n\n<style src=\"./select.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}

package/dist/slider.css

@@ -0,0 +1,438 @@
+.rp-slider[data-v-c9655b1d] {
+  --_rp-slider-color: var(--_rp-slider-custom-color, var(--rp-color-control-selected-bg));
+  --_rp-slider-track-bg: var(--rp-color-control-track-bg);
+  --_rp-slider-thumb-bg: var(--rp-color-control-thumb-bg);
+  --_rp-slider-thumb-border: var(--_rp-slider-color);
+  --_rp-slider-thumb-border-style: var(--_rp-slider-thumb-border-width) solid
+      var(--_rp-slider-thumb-border);
+  --_rp-slider-thumb-padding: 0;
+  --_rp-slider-track-length: 160px;
+  --_rp-slider-track-height: 8px;
+  --_rp-slider-thumb-size: 16px;
+  --_rp-slider-thumb-border-width: 4px;
+  --_rp-slider-ratio: 0;
+  --_rp-slider-fill-position: calc(
+      var(--_rp-slider-thumb-size) / 2 + (100% - var(--_rp-slider-thumb-size)) *
+          var(--_rp-slider-ratio)
+  );
+  --_rp-slider-font-size: var(--rp-font-size-base);
+  --_rp-slider-mark-size: 4px;
+  --_rp-slider-mark-color: var(--rp-color-control-thumb-bg);
+  --_rp-slider-mark-label-color: var(--rp-color-text-secondary);
+  --_rp-slider-mark-filled-label-color: var(--rp-color-text);
+  --_rp-slider-mark-ring-color: var(--_rp-slider-color);
+  --_rp-slider-valid-color: var(--rp-color-success);
+  --_rp-slider-valid-ring: color-mix(in srgb, var(--rp-color-success) 32%, transparent);
+  --_rp-slider-invalid-color: var(--rp-color-danger);
+  --_rp-slider-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
+  display: inline-grid;
+  width: 100%;
+  min-width: var(--_rp-slider-track-length);
+  max-width: 100%;
+  gap: var(--rp-spacing-2);
+  cursor: pointer;
+  font-family: var(--rp-font-family);
+  font-size: var(--_rp-slider-font-size);
+  line-height: var(--rp-line-height-normal);
+}
+html.dark .rp-slider[data-v-c9655b1d] {
+  --_rp-slider-thumb-bg: var(--_rp-slider-color);
+  --_rp-slider-thumb-border: var(--rp-color-control-thumb-bg);
+  --_rp-slider-valid-color: var(--rp-color-success-fg);
+  --_rp-slider-valid-ring: color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
+  --_rp-slider-invalid-color: var(--rp-color-danger-fg);
+  --_rp-slider-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+}
+.rp-slider--custom-thumb[data-v-c9655b1d] {
+  --_rp-slider-thumb-bg: var(--_rp-slider-color);
+  --_rp-slider-thumb-border: var(--rp-color-control-thumb-bg);
+}
+.rp-slider--disabled[data-v-c9655b1d] {
+  opacity: var(--rp-opacity-disabled);
+  cursor: not-allowed;
+}
+.rp-slider__header[data-v-c9655b1d] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  gap: var(--rp-spacing-3);
+}
+.rp-slider__label[data-v-c9655b1d] {
+  min-width: 0;
+  color: var(--rp-color-text);
+}
+.rp-slider__value[data-v-c9655b1d] {
+  flex-shrink: 0;
+  color: var(--rp-color-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+.rp-slider__track[data-v-c9655b1d] {
+  position: relative;
+  display: block;
+  min-width: 0;
+}
+.rp-slider__bar[data-v-c9655b1d] {
+  position: absolute;
+  z-index: 1;
+  top: calc((var(--_rp-slider-thumb-size) - var(--_rp-slider-track-height)) / 2);
+  left: 0;
+  display: block;
+  width: 100%;
+  height: var(--_rp-slider-track-height);
+  pointer-events: none;
+  background: linear-gradient(to right, var(--_rp-slider-color) 0 var(--_rp-slider-fill-position), var(--_rp-slider-track-bg) var(--_rp-slider-fill-position) 100%);
+  border-radius: var(--rp-radius-full);
+}
+.rp-slider--marks-with-labels .rp-slider__track[data-v-c9655b1d] {
+  padding-bottom: calc(var(--_rp-slider-font-size) * var(--rp-line-height-normal) + var(--rp-spacing-2));
+}
+.rp-slider__native[data-v-c9655b1d] {
+  position: relative;
+  z-index: 3;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: var(--_rp-slider-thumb-size);
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+}
+.rp-slider__marks[data-v-c9655b1d] {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: calc(var(--_rp-slider-thumb-size) / 2);
+  left: calc(var(--_rp-slider-thumb-size) / 2);
+  height: var(--_rp-slider-thumb-size);
+  pointer-events: none;
+}
+.rp-slider__mark[data-v-c9655b1d] {
+  position: absolute;
+  top: 0;
+  left: var(--_rp-slider-mark-position);
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  width: max-content;
+  max-width: 8rem;
+  color: var(--_rp-slider-mark-label-color);
+  line-height: var(--rp-line-height-normal);
+  transform: translateX(-50%);
+}
+.rp-slider__mark-dot[data-v-c9655b1d] {
+  width: var(--_rp-slider-mark-size);
+  height: var(--_rp-slider-mark-size);
+  margin-top: calc((var(--_rp-slider-thumb-size) - var(--_rp-slider-mark-size)) / 2);
+  background: var(--_rp-slider-mark-color);
+  border-radius: var(--rp-radius-full);
+  box-shadow: 0 0 0 var(--rp-border-width-thin) transparent;
+  transition: box-shadow var(--rp-transition-fast);
+}
+.rp-slider__mark-label[data-v-c9655b1d] {
+  max-width: 100%;
+  margin-top: calc((var(--_rp-slider-thumb-size) - var(--_rp-slider-mark-size)) / 2 + var(--rp-spacing-1));
+  overflow-wrap: anywhere;
+  color: inherit;
+  font-size: var(--_rp-slider-font-size);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.rp-slider__mark--filled .rp-slider__mark-dot[data-v-c9655b1d] {
+  box-shadow: 0 0 0 var(--rp-border-width-thin) var(--_rp-slider-mark-ring-color);
+}
+.rp-slider__mark--filled .rp-slider__mark-label[data-v-c9655b1d] {
+  color: var(--_rp-slider-mark-filled-label-color);
+}
+.rp-slider__thumb[data-v-c9655b1d] {
+  position: absolute;
+  z-index: 4;
+  top: 0;
+  right: calc(var(--_rp-slider-thumb-size) / 2);
+  left: calc(var(--_rp-slider-thumb-size) / 2);
+  height: var(--_rp-slider-thumb-size);
+  pointer-events: none;
+}
+.rp-slider__thumb-content[data-v-c9655b1d] {
+  position: absolute;
+  top: 50%;
+  left: var(--_rp-slider-percent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_rp-slider-thumb-size);
+  height: var(--_rp-slider-thumb-size);
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: var(--_rp-slider-thumb-padding);
+  color: var(--_rp-slider-thumb-border);
+  background: var(--_rp-slider-thumb-bg);
+  border: var(--_rp-slider-thumb-border-style);
+  border-radius: var(--rp-radius-full);
+  box-shadow: var(--rp-shadow-sm);
+  transform: translate(-50%, -50%);
+  transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-slider__thumb-content[data-v-c9655b1d] svg {
+  width: 60%;
+  height: 60%;
+}
+.rp-slider__tooltip[data-v-c9655b1d] {
+  position: absolute;
+  z-index: 5;
+  top: 0;
+  left: var(--_rp-slider-fill-position);
+  pointer-events: none;
+  translate: -50% 0;
+}
+.rp-slider__tooltip-anchor[data-v-c9655b1d] {
+  display: block;
+  width: 0;
+  height: 0;
+}
+.rp-slider__tooltip[data-v-c9655b1d] .rp-tooltip__content {
+  min-width: 2rem;
+  max-width: min(12rem, 100vw - var(--rp-spacing-6));
+  padding: var(--rp-spacing-1) var(--rp-spacing-2);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.rp-slider__native[data-v-c9655b1d]:disabled {
+  cursor: not-allowed;
+}
+.rp-slider__native[data-v-c9655b1d]::-webkit-slider-runnable-track {
+  height: var(--_rp-slider-track-height);
+  border-radius: var(--rp-radius-full);
+  background: transparent;
+}
+.rp-slider__native[data-v-c9655b1d]::-moz-range-track {
+  height: var(--_rp-slider-track-height);
+  border-radius: var(--rp-radius-full);
+  background: transparent;
+}
+.rp-slider__native[data-v-c9655b1d]::-moz-range-progress {
+  height: var(--_rp-slider-track-height);
+  border-radius: var(--rp-radius-full);
+  background: transparent;
+}
+.rp-slider__native[data-v-c9655b1d]::-webkit-slider-thumb {
+  width: var(--_rp-slider-thumb-size);
+  height: var(--_rp-slider-thumb-size);
+  margin-top: calc((var(--_rp-slider-track-height) - var(--_rp-slider-thumb-size)) / 2);
+  box-sizing: border-box;
+  appearance: none;
+  background: var(--_rp-slider-thumb-bg);
+  border: var(--_rp-slider-thumb-border-style);
+  border-radius: var(--rp-radius-full);
+  box-shadow: var(--rp-shadow-sm);
+  transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-slider__native[data-v-c9655b1d]::-moz-range-thumb {
+  width: var(--_rp-slider-thumb-size);
+  height: var(--_rp-slider-thumb-size);
+  box-sizing: border-box;
+  background: var(--_rp-slider-thumb-bg);
+  border: var(--_rp-slider-thumb-border-style);
+  border-radius: var(--rp-radius-full);
+  box-shadow: var(--rp-shadow-sm);
+  transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-slider--vertical[data-v-c9655b1d] {
+  width: max-content;
+  min-width: 0;
+  max-width: none;
+  justify-items: center;
+}
+.rp-slider--vertical .rp-slider__header[data-v-c9655b1d] {
+  width: max-content;
+  max-width: 12rem;
+  justify-content: space-between;
+  gap: var(--rp-spacing-3);
+  text-align: center;
+}
+.rp-slider--vertical .rp-slider__value[data-v-c9655b1d] {
+  min-width: 3ch;
+  text-align: right;
+}
+.rp-slider--vertical .rp-slider__track[data-v-c9655b1d] {
+  width: var(--_rp-slider-thumb-size);
+  height: var(--_rp-slider-track-length);
+  min-width: 0;
+  min-height: var(--_rp-slider-track-length);
+  justify-self: center;
+}
+.rp-slider--vertical .rp-slider__bar[data-v-c9655b1d] {
+  top: 0;
+  left: calc((var(--_rp-slider-thumb-size) - var(--_rp-slider-track-height)) / 2);
+  width: var(--_rp-slider-track-height);
+  height: 100%;
+  background: linear-gradient(to top, var(--_rp-slider-color) 0 var(--_rp-slider-fill-position), var(--_rp-slider-track-bg) var(--_rp-slider-fill-position) 100%);
+}
+.rp-slider--vertical.rp-slider--marks-with-labels .rp-slider__track[data-v-c9655b1d] {
+  padding-right: calc(var(--_rp-slider-font-size) * var(--rp-line-height-normal) + var(--rp-spacing-2));
+  padding-bottom: 0;
+}
+.rp-slider--vertical .rp-slider__native[data-v-c9655b1d] {
+  width: var(--_rp-slider-thumb-size);
+  min-width: 0;
+  height: 100%;
+  min-height: var(--_rp-slider-track-length);
+  direction: rtl;
+  writing-mode: vertical-lr;
+}
+.rp-slider--vertical .rp-slider__marks[data-v-c9655b1d] {
+  top: calc(var(--_rp-slider-thumb-size) / 2);
+  right: auto;
+  bottom: calc(var(--_rp-slider-thumb-size) / 2);
+  left: 0;
+  width: var(--_rp-slider-thumb-size);
+  height: auto;
+}
+.rp-slider--vertical .rp-slider__mark[data-v-c9655b1d] {
+  top: calc(100% - var(--_rp-slider-mark-position));
+  left: 0;
+  flex-direction: row;
+  align-items: center;
+  transform: translateY(-50%);
+}
+.rp-slider--vertical .rp-slider__mark-dot[data-v-c9655b1d] {
+  flex: 0 0 auto;
+  margin-top: 0;
+  margin-left: calc((var(--_rp-slider-thumb-size) - var(--_rp-slider-mark-size)) / 2);
+}
+.rp-slider--vertical .rp-slider__mark-label[data-v-c9655b1d] {
+  margin-top: 0;
+  margin-left: calc((var(--_rp-slider-thumb-size) - var(--_rp-slider-mark-size)) / 2 + var(--rp-spacing-1));
+  text-align: left;
+}
+.rp-slider--vertical .rp-slider__thumb[data-v-c9655b1d] {
+  top: calc(var(--_rp-slider-thumb-size) / 2);
+  right: auto;
+  bottom: calc(var(--_rp-slider-thumb-size) / 2);
+  left: 0;
+  width: var(--_rp-slider-thumb-size);
+  height: auto;
+}
+.rp-slider--vertical .rp-slider__thumb-content[data-v-c9655b1d] {
+  top: calc(100% - var(--_rp-slider-percent));
+  left: 50%;
+}
+.rp-slider--vertical .rp-slider__tooltip[data-v-c9655b1d] {
+  top: calc(100% - var(--_rp-slider-fill-position));
+  left: 0;
+  translate: 0 -50%;
+}
+.rp-slider--vertical .rp-slider__native[data-v-c9655b1d]::-webkit-slider-runnable-track {
+  width: var(--_rp-slider-track-height);
+  height: 100%;
+  background: transparent;
+}
+.rp-slider--vertical .rp-slider__native[data-v-c9655b1d]::-moz-range-track {
+  width: var(--_rp-slider-track-height);
+  height: 100%;
+}
+.rp-slider--vertical .rp-slider__native[data-v-c9655b1d]::-moz-range-progress {
+  width: var(--_rp-slider-track-height);
+}
+.rp-slider--vertical .rp-slider__native[data-v-c9655b1d]::-webkit-slider-thumb {
+  margin-top: 0;
+  margin-left: calc((var(--_rp-slider-track-height) - var(--_rp-slider-thumb-size)) / 2);
+}
+.rp-slider--custom-thumb .rp-slider__native[data-v-c9655b1d]::-webkit-slider-thumb {
+  opacity: 0;
+}
+.rp-slider--custom-thumb .rp-slider__native[data-v-c9655b1d]::-moz-range-thumb {
+  opacity: 0;
+}
+.rp-slider__native[data-v-c9655b1d]:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--rp-shadow-sm), 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-slider__native[data-v-c9655b1d]:focus-visible::-moz-range-thumb {
+  box-shadow: var(--rp-shadow-sm), 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-slider--custom-thumb .rp-slider__native:focus-visible ~ .rp-slider__thumb .rp-slider__thumb-content[data-v-c9655b1d] {
+  box-shadow: var(--rp-shadow-sm), 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-slider--color-primary[data-v-c9655b1d] {
+  --_rp-slider-color: var(--rp-color-primary);
+}
+.rp-slider--color-secondary[data-v-c9655b1d] {
+  --_rp-slider-color: var(--rp-color-secondary);
+}
+.rp-slider--color-success[data-v-c9655b1d] {
+  --_rp-slider-color: var(--rp-color-success);
+}
+.rp-slider--color-warning[data-v-c9655b1d] {
+  --_rp-slider-color: var(--rp-color-warning);
+}
+.rp-slider--color-danger[data-v-c9655b1d] {
+  --_rp-slider-color: var(--rp-color-danger);
+}
+.rp-slider--color-info[data-v-c9655b1d] {
+  --_rp-slider-color: var(--rp-color-info);
+}
+.rp-slider--color-neutral[data-v-c9655b1d] {
+  --_rp-slider-color: var(--rp-color-neutral);
+}
+.rp-slider--valid[data-v-c9655b1d] {
+  --_rp-slider-color: var(--_rp-slider-valid-color);
+}
+.rp-slider--invalid[data-v-c9655b1d] {
+  --_rp-slider-color: var(--_rp-slider-invalid-color);
+}
+.rp-slider--valid .rp-slider__native[data-v-c9655b1d]:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--rp-shadow-sm), 0 0 0 var(--rp-border-width-medium) var(--_rp-slider-valid-ring);
+}
+.rp-slider--valid .rp-slider__native[data-v-c9655b1d]:focus-visible::-moz-range-thumb {
+  box-shadow: var(--rp-shadow-sm), 0 0 0 var(--rp-border-width-medium) var(--_rp-slider-valid-ring);
+}
+.rp-slider--valid.rp-slider--custom-thumb .rp-slider__native:focus-visible ~ .rp-slider__thumb .rp-slider__thumb-content[data-v-c9655b1d] {
+  box-shadow: var(--rp-shadow-sm), 0 0 0 var(--rp-border-width-medium) var(--_rp-slider-valid-ring);
+}
+.rp-slider--invalid .rp-slider__native[data-v-c9655b1d]:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--rp-shadow-sm), 0 0 0 var(--rp-border-width-medium) var(--_rp-slider-invalid-ring);
+}
+.rp-slider--invalid .rp-slider__native[data-v-c9655b1d]:focus-visible::-moz-range-thumb {
+  box-shadow: var(--rp-shadow-sm), 0 0 0 var(--rp-border-width-medium) var(--_rp-slider-invalid-ring);
+}
+.rp-slider--invalid.rp-slider--custom-thumb .rp-slider__native:focus-visible ~ .rp-slider__thumb .rp-slider__thumb-content[data-v-c9655b1d] {
+  box-shadow: var(--rp-shadow-sm), 0 0 0 var(--rp-border-width-medium) var(--_rp-slider-invalid-ring);
+}
+.rp-slider--size-xs[data-v-c9655b1d] {
+  --_rp-slider-track-height: 4px;
+  --_rp-slider-thumb-size: 8px;
+  --_rp-slider-thumb-border-width: 4px;
+  --_rp-slider-font-size: var(--rp-font-size-xs);
+  --_rp-slider-mark-size: 4px;
+}
+.rp-slider--size-sm[data-v-c9655b1d] {
+  --_rp-slider-track-height: 6px;
+  --_rp-slider-thumb-size: 12px;
+  --_rp-slider-thumb-border-width: 3px;
+  --_rp-slider-font-size: var(--rp-font-size-sm);
+  --_rp-slider-mark-size: 4px;
+}
+.rp-slider--size-md[data-v-c9655b1d] {
+  --_rp-slider-track-height: 8px;
+  --_rp-slider-thumb-size: 16px;
+  --_rp-slider-thumb-border-width: 4px;
+  --_rp-slider-font-size: var(--rp-font-size-base);
+  --_rp-slider-mark-size: 4px;
+}
+.rp-slider--size-lg[data-v-c9655b1d] {
+  --_rp-slider-track-height: 10px;
+  --_rp-slider-thumb-size: 20px;
+  --_rp-slider-thumb-border-width: 5px;
+  --_rp-slider-font-size: var(--rp-font-size-lg);
+  --_rp-slider-mark-size: 5px;
+}
+.rp-slider--size-xl[data-v-c9655b1d] {
+  --_rp-slider-track-height: 12px;
+  --_rp-slider-thumb-size: 24px;
+  --_rp-slider-thumb-border-width: 6px;
+  --_rp-slider-font-size: var(--rp-font-size-xl);
+  --_rp-slider-mark-size: 6px;
+}